/* ZUFIQ — "Das Haus ohne Hammerschlag" (1 Kön 6,7).
   A house of limestone ashlar, olive-wood doors laid with soft gold, text in
   ink. Motion is quiet: stones settle, a line of gold light is drawn along a
   joint, a plumb line comes to rest. Nothing blinks, nothing covers the text,
   and prefers-reduced-motion stills everything. Written for zufiq.de only. */

:root {
  --kalk: #f2ede2;
  --kalk-hell: #fbf8f1;
  --kalk-tief: #e7dfcd;
  --fuge: #d3c6aa;
  --fuge-tief: #bfae8c;
  --tinte: #1d2129;
  --tinte-weich: #4a505c;
  --tinte-nacht: #161920;
  --olive: #5b6534;
  --olive-tief: #3f4724;
  --olive-hell: #a3a874;
  --olive-blass: #ecedde;
  --gold: #b8924a;
  --gold-satt: #8f6c2a;
  --gold-hell: #e3c88a;
  --gold-licht: #fff0c2;
  --rot: #b0151e;
  --gelb: #f1bf00;
  --serif: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mass: 1180px;
  --rand: clamp(16px, 4vw, 40px);
  --ruhig: cubic-bezier(.25, .7, .2, 1);
  --schatten: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 14px 30px -22px rgba(29, 33, 41, .45);
  --mauer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='72'%3E%3Cpath d='M0 .5h176M0 36.5h176M.5 0v36M88.5 36v36' stroke='%23dcd2bd' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --mauer-nacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='72'%3E%3Cpath d='M0 .5h176M0 36.5h176M.5 0v36M88.5 36v36' stroke='%23e3c88a' stroke-opacity='.07' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1.0625rem/1.72 var(--sans);
  color: var(--tinte);
  background: var(--kalk) var(--mauer);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--tinte); margin: 0 0 .5em; letter-spacing: .002em; overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 1em; }
a { color: var(--olive-tief); text-decoration-color: rgba(184, 146, 74, .75); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); text-decoration-color: var(--gold); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-hell); color: var(--tinte); }

.still-sprung {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--tinte); color: var(--kalk-hell); padding: 10px 16px; border-radius: 3px;
  font-weight: 600; text-decoration: none;
}
.still-sprung:focus { top: 12px; color: var(--kalk-hell); }

/* ── Spanien 2026: the ink inscription band ─────────────────────────────── */
.still-wm {
  position: relative;
  background: linear-gradient(90deg, #12151b, #1d2129 30%, #1d2129 70%, #12151b);
  color: #efe6cf;
  border-bottom: 1px solid rgba(227, 200, 138, .35);
  font-size: .8125rem;
  line-height: 1.3;
  overflow: hidden;
}
.still-wm__innen {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 7px var(--rand) 11px;
}
.still-wm__pokal { flex: 0 0 auto; width: 22px; height: 27px; filter: drop-shadow(0 0 5px rgba(226, 181, 74, .45)); }
.still-wm__text { margin: 0; flex: 0 1 auto; text-align: center; letter-spacing: .02em; }
.still-wm__text strong { color: var(--gold-hell); font-weight: 700; letter-spacing: .04em; }
.still-wm__band { flex: 0 0 auto; width: 64px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(227, 200, 138, .35); }
.still-wm__bahn {
  position: absolute; left: var(--rand); right: var(--rand); bottom: 3px; height: 9px;
  background: linear-gradient(90deg, transparent, rgba(227, 200, 138, .45) 12%, rgba(227, 200, 138, .45) 88%, transparent) bottom / 100% 1px no-repeat;
}
.still-wm__lauf { display: block; width: calc(100% - 9px); height: 9px; }
.still-wm__ball { display: block; width: 9px; height: 9px; }

/* ── Header: the course of stone tiles ──────────────────────────────────── */
.still-kopf {
  position: relative;
  padding-inline: max(var(--rand), calc((100% - var(--mass)) / 2 + var(--rand)));
  background: linear-gradient(180deg, rgba(251, 248, 241, .96), rgba(242, 237, 226, .92)), var(--mauer);
  border-bottom: 1px solid var(--fuge);
}
.still-kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 14px; }
.still-marke { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinte); min-width: 0; }
.still-marke:hover { color: var(--tinte); }
.still-marke__bild { width: 50px; height: 50px; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(29, 33, 41, .16)); }
.still-marke__texte { display: flex; flex-direction: column; min-width: 0; }
.still-marke__name { font-family: var(--serif); font-weight: 600; font-size: 1.85rem; letter-spacing: .2em; line-height: 1; }
.still-marke__lang { margin-top: 5px; font-size: .74rem; letter-spacing: .06em; color: var(--olive); line-height: 1.3; }

.still-knopf {
  display: none;
  align-items: center; gap: 10px;
  font: 600 .9rem/1 var(--sans); color: var(--tinte);
  background: var(--kalk-hell); border: 1px solid var(--fuge-tief); border-radius: 3px;
  padding: 10px 14px; cursor: pointer; flex: 0 0 auto;
  box-shadow: var(--schatten);
}
.still-knopf__striche { position: relative; width: 18px; height: 12px; display: inline-block; }
.still-knopf__striche i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform .35s var(--ruhig), opacity .25s ease; }
.still-knopf__striche i:nth-child(1) { top: 0; }
.still-knopf__striche i:nth-child(2) { top: 5px; background: var(--gold); }
.still-knopf__striche i:nth-child(3) { top: 10px; }
.still-knopf[aria-expanded="true"] .still-knopf__striche i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.still-knopf[aria-expanded="true"] .still-knopf__striche i:nth-child(2) { opacity: 0; }
.still-knopf[aria-expanded="true"] .still-knopf__striche i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.still-menue ul, .still-dienst ul { list-style: none; margin: 0; padding: 0; }
.fliesen {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--fuge);
  box-shadow: 0 0 0 100vmax rgba(231, 223, 205, .55);
  clip-path: inset(0 -100vmax);
}
.fliesen__start { display: none; }
.fliese {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  height: 100%;
  padding: 13px 10px 19px;
  text-align: center; text-decoration: none;
  color: var(--tinte-weich);
  font-size: .875rem; font-weight: 600; line-height: 1.25;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #efe9dc, #e6ddca);
  border-left: 1px solid var(--fuge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
  transition: color .4s ease, background-color .4s ease;
}
.fliesen li:last-child .fliese { border-right: 1px solid var(--fuge); }
.fliese__icon { width: 26px; height: 26px; color: var(--olive); transition: color .4s ease; }
.fliese:hover, .fliese:focus-visible, .fliese[aria-current] { color: var(--tinte); }
.fliese:hover .fliese__icon, .fliese[aria-current] .fliese__icon { color: var(--gold-satt); }
/* The thin line of gold light drawn across the tile. */
.fliese::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(184, 146, 74, 0), #c9a14f 14%, var(--gold-licht) 50%, #c9a14f 86%, rgba(184, 146, 74, 0));
  box-shadow: 0 0 7px 1px rgba(214, 170, 80, .55), 0 0 18px 2px rgba(255, 232, 170, .45);
  transform: scaleX(0); transform-origin: left center;
}
.fliese:hover::after, .fliese:focus-visible::after, .fliese[aria-current]::after { transform: scaleX(1); }
/* Its bright point, travelling with the tip of the line. */
.fliese::before {
  content: ""; position: absolute; left: 12%; bottom: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe9 0, rgba(255, 240, 194, .85) 35%, rgba(255, 240, 194, 0) 70%);
  opacity: 0; pointer-events: none;
}

.still-dienst ul { display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: flex-end; }
.still-dienst a {
  position: relative; display: inline-block; padding: 6px 0;
  font-size: .875rem; font-weight: 500; color: var(--tinte-weich); text-decoration: none;
}
.still-dienst a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-licht), var(--gold));
  transform: scaleX(0); transform-origin: left; box-shadow: 0 0 6px rgba(214, 170, 80, .5);
}
.still-dienst a:hover, .still-dienst a:focus-visible { color: var(--tinte); }
.still-dienst a:hover::after, .still-dienst a:focus-visible::after { transform: scaleX(1); }

@media (min-width: 961px) {
  .still-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zeile dienst" "menue menue"; align-items: center; }
  .still-kopf__zeile { grid-area: zeile; }
  .still-panel { display: contents; }
  .still-menue { grid-area: menue; }
  .still-dienst { grid-area: dienst; }
}

@media (max-width: 960px) {
  .still-knopf { display: inline-flex; }
  .still-panel { padding: 4px 0 18px; }
  .js .still-panel { display: none; }
  .js .still-kopf.offen .still-panel { display: block; }
  .fliesen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0; box-shadow: none; clip-path: none; }
  .fliesen__start { display: block; }
  .fliese { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 14px 16px; border: 1px solid var(--fuge); border-radius: 3px; }
  .fliesen li:last-child .fliese { border-right: 1px solid var(--fuge); }
  .fliese__icon { width: 24px; height: 24px; flex: 0 0 auto; }
  .fliese::after { left: 14px; right: 14px; bottom: 6px; }
  .still-dienst { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fuge); }
  .still-dienst ul { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .fliesen { grid-template-columns: minmax(0, 1fr); }
  .still-marke { gap: 10px; }
  .still-marke__bild { width: 42px; height: 42px; }
  .still-marke__name { font-size: 1.5rem; letter-spacing: .16em; }
  .still-marke__lang { font-size: .68rem; letter-spacing: .03em; }
  .still-knopf { padding: 9px 11px; }
}
@media (max-width: 380px) {
  .still-knopf__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Shared pieces ──────────────────────────────────────────────────────── */
.still-dachzeile {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--olive);
}
.still-dachzeile::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }

.still-taste {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em; text-decoration: none; text-align: center;
  color: #fbf7ec; background: var(--olive-tief);
  border: 1px solid var(--olive-tief); border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 12px 24px -16px rgba(63, 71, 36, .8);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.still-taste::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hell), transparent);
  transform: scaleX(0); transform-origin: left;
}
.still-taste:hover, .still-taste:focus-visible { color: #fff; background: #333b1c; }
.still-taste:hover::after, .still-taste:focus-visible::after { transform: scaleX(1); }
.still-taste--rahmen { color: var(--tinte); background: rgba(251, 248, 241, .7); border-color: var(--fuge-tief); box-shadow: var(--schatten); }
.still-taste--rahmen:hover, .still-taste--rahmen:focus-visible { color: var(--tinte); background: var(--kalk-hell); border-color: var(--gold); }
.still-taste--rahmen::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.still-link { font-weight: 600; }

.still-ueber { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); padding-inline: var(--rand); }
.still-ueber__zeile { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.still-ueber h2 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.7rem); margin: 0; }
.still-ueber__raute { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.still-ueber__raute::before, .still-ueber__raute::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.still-ueber__raute::after { transform: scaleX(-1); }
.still-ueber__raute i { width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); background: var(--kalk-hell); }
.still-ueber--nacht .still-ueber__zeile { color: var(--olive-hell); }
.still-ueber--nacht h2 { color: #f4ecda; }
.still-ueber--nacht .still-ueber__raute i { background: var(--tinte-nacht); border-color: var(--gold-hell); }

.still-pfad ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .85rem; color: var(--tinte-weich); }
.still-pfad li { display: inline-flex; align-items: center; min-width: 0; }
.still-pfad li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border: 1px solid var(--gold); transform: rotate(45deg); flex: 0 0 auto; }
.still-pfad a { color: var(--tinte-weich); }
.still-pfad [aria-current] { color: var(--tinte); overflow-wrap: anywhere; }

/* ── Home: the hall ─────────────────────────────────────────────────────── */
.still-halle {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 84px) 0 clamp(44px, 6vw, 88px);
  background:
    radial-gradient(ellipse 70% 60% at 78% 10%, rgba(255, 240, 194, .55), transparent 70%),
    linear-gradient(180deg, rgba(251, 248, 241, .92), rgba(239, 232, 218, .9)),
    var(--mauer);
  border-bottom: 1px solid var(--fuge);
}
.still-halle::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11px;
  background: repeating-linear-gradient(90deg, #ddd2bb 0 16px, transparent 16px 26px);
  border-bottom: 1px solid rgba(184, 146, 74, .6);
  opacity: .9;
}
.still-halle__licht {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 247, 222, .7) 48%, rgba(255, 250, 235, .9) 50%, rgba(255, 247, 222, .7) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: soft-light;
}
.still-halle__innen {
  position: relative; z-index: 1;
  max-width: var(--mass); margin: 0 auto; padding-inline: var(--rand);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center;
}
.still-halle__titel { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem); line-height: 1.06; margin-bottom: 18px; letter-spacing: -.004em; }
.still-halle__titel em { font-style: italic; color: var(--olive-tief); position: relative; white-space: nowrap; }
.still-halle__titel em::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: .04em; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold-licht) 50%, var(--gold) 85%, transparent);
  box-shadow: 0 0 10px rgba(214, 170, 80, .55);
}
.still-halle__claim { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .7vw, 1.45rem); line-height: 1.4; color: var(--tinte); margin-bottom: 14px; }
.still-halle__intro { color: var(--tinte-weich); max-width: 60ch; }
.still-halle__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.still-halle__bild { position: relative; }
.still-halle__bild::before {
  content: ""; position: absolute; inset: -14px; border: 1px solid rgba(184, 146, 74, .45); border-radius: 8px; pointer-events: none;
}
.haus { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -36px rgba(29, 33, 41, .55), 0 0 0 1px var(--fuge); background: var(--kalk-hell); }

/* ── Home: the six rooms ────────────────────────────────────────────────── */
.still-raeume, .still-neu, .still-grund { padding: clamp(52px, 7vw, 96px) 0; }
.raeume {
  list-style: none; margin: 0 auto; padding: 0 var(--rand); max-width: var(--mass);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.raum {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  padding: 28px 26px 24px;
  color: var(--tinte); text-decoration: none;
  background: linear-gradient(160deg, var(--kalk-hell), #f1ebdf);
  border: 1px solid var(--fuge); border-radius: 4px;
  box-shadow: var(--schatten);
  transition: transform .6s var(--ruhig), box-shadow .6s var(--ruhig), border-color .6s ease;
}
.raum::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(211, 198, 170, .7); border-radius: 2px; pointer-events: none;
}
.raum::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(184, 146, 74, 0), #c9a14f 14%, var(--gold-licht) 50%, #c9a14f 86%, rgba(184, 146, 74, 0));
  box-shadow: 0 0 8px 1px rgba(214, 170, 80, .5);
  transform: scaleX(0); transform-origin: left;
}
.raum:hover, .raum:focus-visible { border-color: var(--fuge-tief); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 26px 40px -28px rgba(29, 33, 41, .55); color: var(--tinte); }
.raum:hover::after, .raum:focus-visible::after { transform: scaleX(1); }
.raum__nr { position: absolute; top: 12px; right: 22px; font-family: var(--serif); font-style: italic; font-size: 2.6rem; line-height: 1; color: rgba(184, 146, 74, .45); }
.raum__siegel {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6d7840, var(--olive-tief));
  box-shadow: 0 0 0 3px var(--kalk-hell), 0 0 0 4px var(--gold), 0 10px 18px -10px rgba(63, 71, 36, .9);
}
.raum__icon { width: 30px; height: 30px; color: var(--gold-hell); }
.raum__name { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.15; margin-bottom: 10px; }
.raum__text { font-size: .95rem; color: var(--tinte-weich); line-height: 1.6; flex: 1 1 auto; }
.raum__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fuge); font-size: .85rem; font-weight: 600; color: var(--olive); }
.raum__tritt { color: var(--tinte); }

/* ── Cards: finished ashlar blocks ──────────────────────────────────────── */
.quader-reihe {
  max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px;
}
.quader { height: 100%; }
.quader__link {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  padding: 24px 24px 22px;
  color: var(--tinte); text-decoration: none;
  background: var(--kalk-hell);
  border: 1px solid var(--fuge); border-radius: 4px;
  box-shadow: var(--schatten);
  transition: transform .6s var(--ruhig), box-shadow .6s var(--ruhig), border-color .6s ease;
}
.quader__link::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 246, 214, .75) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 140% 0;
}
.quader__link::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 10px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(184, 146, 74, 0), #c9a14f 14%, var(--gold-licht) 50%, #c9a14f 86%, rgba(184, 146, 74, 0));
  box-shadow: 0 0 8px 1px rgba(214, 170, 80, .5);
  transform: scaleX(0); transform-origin: left;
}
.quader__link:hover, .quader__link:focus-visible { color: var(--tinte); border-color: var(--fuge-tief); box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 26px 40px -28px rgba(29, 33, 41, .55); }
.quader__link:hover::after, .quader__link:focus-visible::after { transform: scaleX(1); }
.quader__zeichen { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; color: var(--gold); opacity: .75; }
.quader__thema { display: inline-flex; align-items: center; gap: 8px; margin: 0 34px 12px 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); }
.quader__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.quader__titel { font-size: 1.4rem; line-height: 1.2; margin: 0 0 10px; }
.quader__text { display: block; font-size: .95rem; line-height: 1.6; color: var(--tinte-weich); flex: 1 1 auto; }
.quader__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--fuge); font-size: .82rem; font-weight: 600; color: var(--tinte-weich); }
.quader__mehr { color: var(--olive-tief); }
.quader__pfeil { display: inline-block; transition: transform .5s var(--ruhig); }
.quader__link:hover .quader__pfeil { transform: translateX(4px); }

/* ── Home: why ZUFIQ ────────────────────────────────────────────────────── */
.still-grund { background: linear-gradient(180deg, rgba(236, 237, 222, .6), rgba(242, 237, 226, 0)); border-top: 1px solid var(--fuge); }
.still-grund__innen { max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.still-tafel {
  position: relative; margin: 0;
  padding: clamp(30px, 4vw, 48px);
  color: #f1e9d6;
  background: radial-gradient(ellipse at 30% 0%, rgba(227, 200, 138, .16), transparent 60%), var(--tinte-nacht) var(--mauer-nacht);
  border-radius: 4px;
  box-shadow: 0 30px 50px -34px rgba(22, 25, 32, .9);
}
.still-tafel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(227, 200, 138, .5); border-radius: 2px; pointer-events: none; }
.still-tafel::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(227, 200, 138, .2); border-radius: 2px; pointer-events: none; }
.still-tafel blockquote { margin: 0; }
.still-tafel blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); line-height: 1.45; margin: 0 0 18px; }
.still-tafel figcaption { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); }
.still-grund__text h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); }
.still-grund__text p { color: var(--tinte-weich); }
.still-grund__text strong { color: var(--tinte); }
.still-grund__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }

/* ── Home: the index tablet ─────────────────────────────────────────────── */
.still-verzeichnis { padding: clamp(52px, 7vw, 96px) 0; color: #e7e0d0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(227, 200, 138, .12), transparent 70%), var(--tinte-nacht) var(--mauer-nacht); }
.still-verzeichnis__spalten { max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 30px 40px; }
.still-verzeichnis__raum h3 { font-size: 1.3rem; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(227, 200, 138, .3); }
.still-verzeichnis__raum h3 a { color: #f6eedb; text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; }
.still-verzeichnis__raum h3 a:hover { color: var(--gold-hell); }
.still-verzeichnis__nr { font-style: italic; color: var(--gold-hell); min-width: 1.6em; }
.still-verzeichnis__raum ol { margin: 0; padding: 0 0 0 1.2em; font-size: .93rem; line-height: 1.5; }
.still-verzeichnis__raum li { margin: 6px 0; }
.still-verzeichnis__raum li::marker { color: var(--gold); }
.still-verzeichnis__raum li a { color: #ddd5c3; text-decoration-color: rgba(227, 200, 138, .35); }
.still-verzeichnis__raum li a:hover { color: #fff; text-decoration-color: var(--gold-hell); }
.still-verzeichnis__leer { font-size: .9rem; color: #b9b2a2; font-style: italic; }

/* ── Category page ──────────────────────────────────────────────────────── */
.still-raumkopf {
  padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 56px);
  background: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(255, 240, 194, .5), transparent 70%), linear-gradient(180deg, rgba(251, 248, 241, .9), rgba(239, 232, 218, .9)), var(--mauer);
  border-bottom: 1px solid var(--fuge);
}
.still-raumkopf__innen { max-width: 860px; margin: 0 auto; padding: 0 var(--rand); }
.still-raumkopf__siegel { display: grid; place-items: center; width: 72px; height: 72px; margin: 6px 0 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6d7840, var(--olive-tief)); box-shadow: 0 0 0 4px var(--kalk-hell), 0 0 0 5px var(--gold), 0 14px 24px -12px rgba(63, 71, 36, .9); }
.still-raumkopf__icon { width: 38px; height: 38px; color: var(--gold-hell); }
.still-raumkopf h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }
.still-raumkopf__text { font-size: 1.1rem; color: var(--tinte-weich); max-width: 62ch; }
.still-raumkopf__zahl { margin: 0; font-weight: 600; color: var(--olive); }
.still-neu--raum { padding-top: clamp(36px, 5vw, 56px); }
.still-leerhinweis { max-width: 720px; margin: 0 auto; padding: 0 var(--rand); color: var(--tinte-weich); font-style: italic; text-align: center; }

.still-nachbarn { max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand) clamp(52px, 7vw, 88px); }
.still-nachbarn__titel { font-size: 1.5rem; text-align: center; margin-bottom: 20px; }
.still-nachbarn ul, .still-nachbarn__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.still-nachbarn a, .still-nachbarn__liste a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 100%;
  padding: 14px 16px 16px; text-decoration: none; color: var(--tinte); font-weight: 600; font-size: .95rem;
  background: var(--kalk-hell); border: 1px solid var(--fuge); border-radius: 3px; box-shadow: var(--schatten);
}
.still-nachbarn a::after, .still-nachbarn__liste a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(184, 146, 74, 0), #c9a14f 14%, var(--gold-licht) 50%, #c9a14f 86%, rgba(184, 146, 74, 0));
  box-shadow: 0 0 7px rgba(214, 170, 80, .5); transform: scaleX(0); transform-origin: left;
}
.still-nachbarn a:hover::after, .still-nachbarn a:focus-visible::after, .still-nachbarn a[aria-current]::after,
.still-nachbarn__liste a:hover::after, .still-nachbarn__liste a:focus-visible::after { transform: scaleX(1); }
.still-nachbarn__icon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--olive); }

/* ── Article & page ─────────────────────────────────────────────────────── */
.still-artikel__kopf {
  padding: clamp(32px, 5vw, 60px) 0 clamp(30px, 4vw, 46px);
  background: radial-gradient(ellipse 55% 80% at 90% 0%, rgba(255, 240, 194, .5), transparent 70%), linear-gradient(180deg, rgba(251, 248, 241, .92), rgba(242, 237, 226, .9)), var(--mauer);
  border-bottom: 1px solid var(--fuge);
}
.still-artikel__kopfinnen { position: relative; max-width: 860px; margin: 0 auto; padding: 0 var(--rand); }
.still-artikel__thema { margin: 0 0 12px; }
.still-artikel__thema a { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); text-decoration: none; }
.still-artikel__thema a:hover { color: var(--tinte); }
.still-artikel__themaicon { width: 22px; height: 22px; }
.still-artikel__titel { font-size: clamp(2.05rem, 1.35rem + 2.8vw, 3.2rem); line-height: 1.1; margin-bottom: 16px; }
.still-artikel__intro { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.45; color: var(--tinte-weich); max-width: 62ch; }
.still-artikel__meta { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: .86rem; color: var(--tinte-weich); }
.still-artikel__meta li { display: inline-flex; align-items: center; }
.still-artikel__meta li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px; background: var(--gold); transform: rotate(45deg); flex: 0 0 auto; }
.still-artikel__fuge {
  display: block; height: 2px; margin-top: 26px; max-width: 320px; border-radius: 2px;
  background: linear-gradient(90deg, #c9a14f, var(--gold-licht) 45%, #c9a14f 80%, rgba(184, 146, 74, 0));
  box-shadow: 0 0 9px rgba(214, 170, 80, .55); transform-origin: left;
}

.still-artikel__koerper {
  max-width: var(--mass); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--rand) clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 250px minmax(0, 740px); gap: clamp(32px, 5vw, 64px); justify-content: center; align-items: start;
}
.still-artikel__koerper--eins { grid-template-columns: minmax(0, 760px); }
.still-inhalt-rahmen { position: sticky; top: 20px; }
.still-inhalt {
  padding: 20px 18px 18px; background: var(--kalk-hell); border: 1px solid var(--fuge); border-radius: 4px; box-shadow: var(--schatten);
  max-height: calc(100vh - 40px); overflow: auto;
}
.still-inhalt__titel { margin: 0 0 10px; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.still-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: zf; }
.still-inhalt li { counter-increment: zf; }
.still-inhalt a {
  position: relative; display: block; padding: 7px 0 7px 30px; font-size: .88rem; line-height: 1.4; color: var(--tinte-weich); text-decoration: none;
}
.still-inhalt a::before { content: counter(zf, upper-roman); position: absolute; left: 4px; top: 7px; font-family: var(--serif); font-style: italic; color: var(--gold-satt); font-size: .9rem; }
.still-inhalt a::after {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #c9a14f, var(--gold-licht), #c9a14f); box-shadow: 0 0 7px rgba(214, 170, 80, .6);
  transform: scaleY(0); transform-origin: top;
}
.still-inhalt a:hover, .still-inhalt a.an { color: var(--tinte); }
.still-inhalt a.an::after { transform: scaleY(1); }

.still-text { min-width: 0; font-size: 1.0625rem; line-height: 1.78; }
.still-text > :first-child { margin-top: 0; }
.still-text h2 { position: relative; font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2rem); margin: 2.1em 0 .6em; padding-top: 22px; scroll-margin-top: 20px; }
.still-text h2::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-licht), rgba(184, 146, 74, 0)); box-shadow: 0 0 7px rgba(214, 170, 80, .45); }
.still-text h3 { font-size: 1.35rem; margin: 1.7em 0 .5em; scroll-margin-top: 20px; }
.still-text h4 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 1.4em 0 .4em; }
.still-text p { margin: 0 0 1.15em; }
.still-text strong { font-weight: 700; color: var(--tinte); }
.still-text ul { list-style: none; padding-left: 1.5em; margin: 0 0 1.3em; }
.still-text ul li { position: relative; margin: .45em 0; }
.still-text ul li::before { content: ""; position: absolute; left: -1.15em; top: .68em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.still-text ol { padding-left: 1.6em; margin: 0 0 1.3em; }
.still-text ol li { margin: .5em 0; padding-left: .3em; }
.still-text ol li::marker { color: var(--olive); font-weight: 700; font-family: var(--serif); }
.still-text blockquote {
  position: relative; margin: 1.8em 0; padding: 20px 24px 6px 28px;
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; font-style: italic; color: var(--tinte);
  background: linear-gradient(135deg, var(--kalk-hell), #efe8da); border: 1px solid var(--fuge); border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0;
}
.still-text hr { border: 0; height: 12px; margin: 2.4em auto; width: 160px; background: linear-gradient(90deg, transparent, var(--gold), transparent) center / 100% 1px no-repeat; position: relative; }
.still-text hr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1px solid var(--gold); background: var(--kalk); transform: rotate(45deg); }
.still-text code { font-size: .9em; background: var(--kalk-tief); padding: .1em .35em; border-radius: 3px; }
.table-wrap { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--fuge); border-radius: 4px; background: var(--kalk-hell); box-shadow: var(--schatten); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.table-wrap th { text-align: left; padding: 12px 14px; background: var(--olive-tief); color: #f6f0e1; font-weight: 600; border-bottom: 2px solid var(--gold); vertical-align: bottom; }
.table-wrap td { padding: 11px 14px; border-top: 1px solid var(--fuge); vertical-align: top; }
.table-wrap tbody tr:nth-child(even) td { background: rgba(231, 223, 205, .35); }

.still-hinweis {
  margin-top: 2.6em; padding: 20px 22px 6px;
  background: var(--olive-blass); border: 1px solid #d5d8bd; border-left: 3px solid var(--olive); border-radius: 0 4px 4px 0;
  font-size: .95rem; line-height: 1.65;
}
.still-hinweis__titel { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; color: var(--olive-tief); }
.still-neu--weiter { padding-top: 0; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.still-leer { max-width: 860px; margin: 0 auto; padding: clamp(48px, 8vw, 110px) var(--rand); text-align: center; }
.still-leer__code { font-family: var(--serif); font-size: clamp(4rem, 3rem + 6vw, 7.5rem); line-height: 1; margin: 0 0 8px; color: transparent; background: linear-gradient(180deg, var(--gold-hell), var(--gold-satt)); -webkit-background-clip: text; background-clip: text; letter-spacing: .08em; }
.still-leer h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.still-leer > p { color: var(--tinte-weich); }
.still-leer .still-nachbarn__liste { margin: 28px 0; text-align: left; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.still-fuss { color: #cfc8b7; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(227, 200, 138, .1), transparent 70%), #13161c var(--mauer-nacht); font-size: .93rem; }
.still-fuss__fuge { height: 14px; background: repeating-linear-gradient(90deg, #2a2e37 0 54px, #20242c 54px 56px); border-top: 1px solid rgba(227, 200, 138, .4); position: relative; }
.still-fuss__fuge i { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; background: #13161c; border: 1px solid var(--gold-hell); transform: rotate(45deg); }
.still-fuss__innen { max-width: var(--mass); margin: 0 auto; padding: 48px var(--rand) 22px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.still-fuss__name { font-family: var(--serif); font-size: 1.8rem; letter-spacing: .2em; color: #f6eedb; margin: 0; line-height: 1.1; }
.still-fuss__lang { color: var(--gold-hell); font-size: .82rem; letter-spacing: .05em; margin: 6px 0 14px; }
.still-fuss__titel { font-family: var(--serif); font-size: 1.15rem; color: #f6eedb; margin: 0 0 10px; }
.still-fuss ul { list-style: none; margin: 0; padding: 0; }
.still-fuss li { margin: 5px 0; }
.still-fuss a { color: #ddd5c3; text-decoration-color: rgba(227, 200, 138, .35); }
.still-fuss a:hover { color: #fff; text-decoration-color: var(--gold-hell); }
.still-fuss__hinweis { max-width: var(--mass); margin: 0 auto; padding: 18px var(--rand) 34px; border-top: 1px solid rgba(227, 200, 138, .18); font-size: .84rem; line-height: 1.6; color: #aaa391; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .raeume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .still-artikel__koerper { grid-template-columns: minmax(0, 760px); }
  .still-inhalt-rahmen { position: static; }
  .still-inhalt { max-height: none; }
}
@media (max-width: 900px) {
  .still-halle__innen, .still-grund__innen { grid-template-columns: minmax(0, 1fr); }
  .still-halle__bild { max-width: 560px; }
  .still-fuss__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .still-fuss__haus { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .raeume { grid-template-columns: minmax(0, 1fr); }
  .raum { padding: 24px 20px 22px; }
  .quader__link { padding: 22px 20px 20px; }
  .still-halle__titel em { white-space: normal; }
  .still-halle__bild::before { inset: -8px; }
  .still-taste { width: 100%; }
  .still-grund__links .still-taste { width: auto; }
  .still-fuss__innen { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .still-text { font-size: 1.03rem; }
  .still-text blockquote { padding: 16px 18px 4px 20px; font-size: 1.12rem; }
  .still-wm { font-size: .75rem; }
  .still-wm__innen { gap: 8px; }
  .still-wm__band { width: 46px; height: 14px; }
}

/* ── Motion: only for those who welcome it ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .fliese::after { transition: transform 1.3s var(--ruhig); }
  .fliese:hover::before, .fliese:focus-visible::before { animation: fliese-funke 1.3s var(--ruhig) forwards; }
  .fliese[aria-current]::after { animation: fliese-ziehen 1.9s .35s var(--ruhig) both; }
  .still-dienst a::after, .still-taste::after { transition: transform 1s var(--ruhig); }
  .raum::after, .quader__link::after, .still-nachbarn a::after, .still-nachbarn__liste a::after { transition: transform 1.2s var(--ruhig); }
  .raum:hover, .quader__link:hover { transform: translateY(-3px); }
  .quader__link:hover::before { animation: quader-licht 1.6s ease-out forwards; }
  .still-inhalt a::after { transition: transform .7s var(--ruhig); }

  .still-marke__lot { transform-origin: 32px 7px; animation: lot-ruhe 3.6s .3s ease-out both; }
  .still-marke:hover .still-marke__lot { animation: lot-ruhe 3.6s ease-out both; }

  .still-halle__licht { animation: halle-licht 16s 1.2s ease-in-out infinite; }
  .haus__stein { animation: stein-setzen 1s var(--d, 0s) cubic-bezier(.2, .75, .25, 1) both; }
  .haus__tuer { animation: tuer-erscheinen 1.6s 1.2s ease both; }
  .haus__fuge, .haus__fuge-glut { stroke-dasharray: 440; stroke-dashoffset: 440; animation: fuge-ziehen 3.2s 2.4s var(--ruhig) forwards; }
  .haus__funke { animation: funke-wandern 14s 2.4s ease-in-out infinite; }
  .haus__lot { transform-origin: 440px 70px; animation: lot-ruhe 4.2s 2s ease-out both; }
  .still-halle__titel em::after { transform-origin: left; animation: fliese-ziehen 2.2s 1s var(--ruhig) both; }
  .still-artikel__fuge { animation: fliese-ziehen 2.4s .4s var(--ruhig) both; }

  .still-wm__glanz { animation: pokal-glanz 6s 1s ease-in-out infinite; }
  .still-wm__welle { animation: band-welle 9s linear infinite; }
  .still-wm__lauf { animation: ball-lauf 16s ease-in-out infinite alternate; }
  .still-wm__ball { animation: ball-drehen 16s ease-in-out infinite alternate; }

  .js .still-auftritt { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s var(--ruhig); }
  .js .still-auftritt.da { opacity: 1; transform: none; }
}

@keyframes fliese-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fliese-funke {
  0% { left: 12%; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 88%; opacity: 0; }
}
@keyframes quader-licht { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes lot-ruhe {
  0% { transform: rotate(9deg); }
  18% { transform: rotate(-6.5deg); }
  36% { transform: rotate(4.2deg); }
  54% { transform: rotate(-2.4deg); }
  72% { transform: rotate(1.1deg); }
  88% { transform: rotate(-.4deg); }
  100% { transform: rotate(0); }
}
@keyframes halle-licht {
  0% { background-position: 130% 0; }
  30% { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
@keyframes stein-setzen { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes tuer-erscheinen { from { opacity: 0; } to { opacity: 1; } }
@keyframes fuge-ziehen { to { stroke-dashoffset: 0; } }
@keyframes funke-wandern {
  0% { transform: translateX(0); opacity: 0; }
  2% { opacity: 1; }
  22% { transform: translateX(440px); opacity: 1; }
  25% { transform: translateX(440px); opacity: 0; }
  100% { transform: translateX(440px); opacity: 0; }
}
@keyframes pokal-glanz {
  0%, 55% { transform: translateX(0); }
  85%, 100% { transform: translateX(48px); }
}
@keyframes band-welle { from { transform: translateX(0); } to { transform: translateX(72px); } }
@keyframes ball-lauf { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes ball-drehen { from { transform: rotate(0); } to { transform: rotate(1440deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .still-wm, .still-knopf, .still-panel, .still-fuss, .still-neu--weiter, .still-nachbarn, .still-inhalt-rahmen, .still-halle__licht { display: none !important; }
  body { background: #fff; }
  .still-artikel__koerper { display: block; }
}