/* ================================================================
   SHIRIN — Atelier & Änderungsschneiderei, Hannover
   Marineblau + Altgold. Playfair Display (Titel) / Jost (Text).
   ================================================================ */

:root{
  --navy:#17223C;
  --navy-tief:#0E1628;
  --navy-hell:#22304F;
  --navy-rand:rgba(255,255,255,.12);
  --gold:#C79A4B;
  --gold-hell:#E6C88A;
  --gold-tief:#7E5E28;
  --silber:#C9CED6;
  --sand:#F4EFE7;
  --papier:#FBF8F3;
  --weiss:#FFFFFF;
  --tinte:#17223C;
  --tinte-weich:#4C5570;
  --linie:rgba(23,34,60,.13);
  --bahn:1220px;
  --luft:clamp(72px,9vw,128px);
  --rund:2px;
  --schatten:0 26px 60px -32px rgba(14,22,40,.45);
  --schatten-tief:0 40px 90px -40px rgba(14,22,40,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.12;
  margin:0;
  letter-spacing:-.006em;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--gold);color:var(--navy)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.springmarke{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--navy);
  padding:14px 22px;font-weight:500;letter-spacing:.05em;
}
.springmarke:focus{left:12px;top:12px}

/* ---------- Bausteine ------------------------------------------ */

.bahn{width:min(100% - 40px,var(--bahn));margin-inline:auto}
@media (max-width:640px){.bahn{width:calc(100% - 32px)}}

.abschnitt{padding-block:var(--luft)}
.abschnitt--eng{padding-block:clamp(52px,6vw,84px)}

.augenbraue{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-tief);margin:0 0 20px;
}
.augenbraue::before{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.65}
.augenbraue--mitte{justify-content:center}
.augenbraue--hell{color:var(--gold)}

.titel{font-size:clamp(31px,4.1vw,52px);max-width:19ch}
.titel--breit{max-width:26ch}
.vorspann{
  font-size:clamp(17px,1.6vw,19.5px);
  color:var(--tinte-weich);
  max-width:62ch;margin-top:20px;line-height:1.72;
}
.kopfblock{max-width:760px}
.kopfblock--mitte{margin-inline:auto;text-align:center}
.kopfblock--mitte .titel{margin-inline:auto}
.kopfblock--mitte .vorspann{margin-inline:auto}

.knopf{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border-radius:var(--rund);border:1px solid transparent;
  font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.knopf svg{width:17px;height:17px;flex:none}
.knopf--gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.knopf--gold:hover{background:var(--gold-hell);border-color:var(--gold-hell)}
.knopf--navy{background:var(--navy);color:var(--sand);border-color:var(--navy)}
.knopf--navy:hover{background:var(--navy-hell);border-color:var(--navy-hell)}
.knopf--linie{background:transparent;color:var(--navy);border-color:rgba(23,34,60,.32)}
.knopf--linie:hover{border-color:var(--navy);background:rgba(23,34,60,.05)}
.knopf--geist{background:transparent;color:var(--sand);border-color:rgba(244,239,231,.4)}
.knopf--geist:hover{border-color:var(--gold);color:var(--gold-hell)}
.knopf:active{transform:translateY(1px)}

.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- Wortmarke ------------------------------------------ */

.marke{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.marke__zeichen{width:44px;height:44px;flex:none;color:var(--silber)}
.z-nadel{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.z-oehr{fill:none;stroke:currentColor;stroke-width:1.3}
.z-faden{fill:none;stroke:var(--gold);stroke-width:2.1;stroke-linecap:round}
.z-raute{fill:var(--gold)}
.marke__text{display:flex;flex-direction:column;line-height:1}
.marke__name{
  font-family:'Jost',sans-serif;font-size:26px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.marke__zusatz{
  font-family:'Playfair Display',serif;font-size:11.5px;
  letter-spacing:.1em;margin-top:7px;color:rgba(244,239,231,.78);
}

/* ---------- Kopf ----------------------------------------------- */

.kopf{position:relative;z-index:60;background:var(--navy);color:var(--sand)}

.kopf__leiste{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  width:min(100% - 40px,var(--bahn));margin-inline:auto;
  padding-block:10px;border-bottom:1px solid var(--navy-rand);
  font-size:12.5px;letter-spacing:.05em;color:rgba(244,239,231,.72);
}
.kopf__leiste p{display:flex;align-items:center;gap:9px;margin:0}
.kopf__leiste svg{width:15px;height:15px;color:var(--gold);flex:none}
@media (max-width:900px){.kopf__leiste-r{display:none}}
@media (max-width:560px){.kopf__leiste{display:none}}

.kopf__bahn{
  display:flex;align-items:center;gap:26px;
  width:min(100% - 40px,var(--bahn));margin-inline:auto;
  padding-block:18px;
}

.nav{display:flex;gap:30px;margin-left:auto;flex-wrap:wrap}
.nav a{
  position:relative;text-decoration:none;font-size:14.5px;letter-spacing:.075em;
  color:rgba(244,239,231,.88);padding-block:6px;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-hell)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.kopf__rechts{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav + .kopf__rechts{margin-left:0}
.kopf__ruf{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:14.5px;letter-spacing:.04em;color:var(--sand);white-space:nowrap;
}
.kopf__ruf svg{width:16px;height:16px;color:var(--gold)}
.kopf__ruf:hover{color:var(--gold-hell)}
.kopf__knopf{padding:12px 22px;font-size:12.5px}

.klapp{
  display:none;align-items:center;gap:10px;background:none;border:0;
  color:var(--sand);font-family:inherit;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;cursor:pointer;padding:8px 0;
}
.klapp__balken{position:relative;display:block;width:24px;height:1.6px;background:currentColor}
.klapp__balken::before,.klapp__balken::after{
  content:"";position:absolute;left:0;width:24px;height:1.6px;background:currentColor;
  transition:transform .25s ease;
}
.klapp__balken::before{top:-7px}
.klapp__balken::after{top:7px}
.klapp[aria-expanded="true"] .klapp__balken{background:transparent}
.klapp[aria-expanded="true"] .klapp__balken::before{transform:translateY(7px) rotate(45deg)}
.klapp[aria-expanded="true"] .klapp__balken::after{transform:translateY(-7px) rotate(-45deg)}

.schub{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 20px 26px;border-top:1px solid var(--navy-rand);background:var(--navy-tief);
}
.schub[hidden]{display:none}
.schub a{
  text-decoration:none;padding:13px 2px;border-bottom:1px solid var(--navy-rand);
  font-size:16px;letter-spacing:.05em;color:var(--sand);
}
.schub__ruf{color:var(--gold)!important;border-bottom:0!important}
.schub__zeit{margin:14px 0 0;font-size:13px;line-height:1.7;color:rgba(244,239,231,.66)}

@media (max-width:1080px){
  .nav{display:none}
  .klapp{display:inline-flex}
}
@media (max-width:720px){
  .kopf__ruf span{display:none}
  .kopf__knopf{display:none}
  .marke__name{font-size:22px;letter-spacing:.22em}
  .marke__zeichen{width:38px;height:38px}
}

/* ---------- Held ----------------------------------------------- */

.held{position:relative;background:var(--navy);color:var(--sand);isolation:isolate;overflow:hidden}
.held__bild{position:absolute;inset:0;z-index:-2}
.held__bild img{width:100%;height:100%;object-fit:cover}
.held::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(14,22,40,.96) 0%,rgba(14,22,40,.93) 44%,rgba(14,22,40,.88) 62%,rgba(14,22,40,.46) 82%,rgba(14,22,40,.72) 100%);
}
.held__bahn{
  width:min(100% - 40px,var(--bahn));margin-inline:auto;
  padding-block:clamp(84px,13vw,168px);
  max-width:none;
}
.held__inhalt{max-width:720px}
.held h1{
  font-size:clamp(38px,6.2vw,78px);line-height:1.03;margin:0;
  color:var(--sand);
}
.held h1 em{font-style:normal;color:var(--gold-hell)}
.held__satz{
  margin-top:26px;max-width:52ch;font-size:clamp(16.5px,1.5vw,19px);
  color:rgba(244,239,231,.86);line-height:1.75;
}
.held__marken{
  display:flex;flex-wrap:wrap;gap:12px 30px;margin:38px 0 0;
  padding-top:26px;border-top:1px solid var(--navy-rand);
}
.held__marken li{
  display:flex;align-items:center;gap:10px;font-size:14px;
  letter-spacing:.04em;color:rgba(244,239,231,.84);
}
.held__marken svg{width:17px;height:17px;color:var(--gold);flex:none}

/* ---------- Zahlenband ----------------------------------------- */

.zahlen{position:relative;background:var(--navy-tief);color:var(--sand);isolation:isolate;overflow:hidden}
.zahlen__bild{position:absolute;inset:0;z-index:-2}
.zahlen__bild img{width:100%;height:100%;object-fit:cover;opacity:.34}
.zahlen::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,22,40,.72)}
.zahlen__gitter{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:clamp(44px,5vw,68px);
}
.zahlen__feld{padding:6px 24px;border-left:1px solid var(--navy-rand);text-align:center}
.zahlen__feld:first-child{border-left:0}
.zahlen__wert{
  display:block;font-family:'Playfair Display',serif;
  font-size:clamp(34px,4vw,50px);color:var(--gold-hell);line-height:1;
}
.zahlen__wort{
  display:block;margin-top:12px;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(244,239,231,.78);
}
@media (max-width:820px){
  .zahlen__gitter{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .zahlen__feld:nth-child(odd){border-left:0}
}
@media (max-width:420px){
  .zahlen__gitter{grid-template-columns:1fr;gap:30px}
  .zahlen__feld{border-left:0}
}

/* ---------- Leistungskacheln ------------------------------------ */

.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
@media (max-width:960px){.kacheln{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:600px){.kacheln{grid-template-columns:1fr}}

.kachel{
  position:relative;display:flex;flex-direction:column;
  background:var(--weiss);border:1px solid var(--linie);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.kachel:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:rgba(199,154,75,.5)}
.kachel__bild{position:relative;aspect-ratio:9/7;overflow:hidden;background:var(--navy)}
.kachel__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.kachel:hover .kachel__bild img{transform:scale(1.045)}
.kachel--hoch .kachel__bild{aspect-ratio:9/11}
.kachel__text{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.kachel h3{font-size:22px;margin-bottom:10px}
.kachel p{font-size:15.5px;color:var(--tinte-weich);line-height:1.7;margin-bottom:18px}
.kachel__ab{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:16px;border-top:1px solid var(--linie);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-tief);
}
.kachel__ab svg{width:17px;height:17px;transition:transform .25s ease}
.kachel:hover .kachel__ab svg{transform:translateX(5px)}

/* ---------- Ablauf ---------------------------------------------- */

.ablauf{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,76px);align-items:center}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}}
.ablauf__bild{position:relative}
.ablauf__bild img{width:100%;aspect-ratio:14/9;object-fit:cover}
.ablauf__bild::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(199,154,75,.55);
  pointer-events:none;
}
.schritte{counter-reset:s;margin-top:34px}
.schritt{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:0 0 26px 0;
}
.schritt + .schritt{border-top:1px solid var(--linie);padding-top:26px}
.schritt__nr{
  counter-increment:s;width:46px;height:46px;flex:none;
  display:grid;place-items:center;border:1px solid rgba(199,154,75,.6);
  font-family:'Playfair Display',serif;font-size:18px;color:var(--gold-tief);
}
.schritt__nr::before{content:counter(s,decimal-leading-zero)}
.schritt h3{font-size:20px;margin-bottom:7px}
.schritt p{font-size:15.5px;color:var(--tinte-weich);margin:0;line-height:1.7}

/* ---------- Preisauszug ----------------------------------------- */

.preise{background:var(--sand)}
.preisgitter{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:48px}
@media (max-width:820px){.preisgitter{grid-template-columns:1fr}}
.preiskarte{background:var(--weiss);border:1px solid var(--linie);padding:34px 32px 30px}
.preiskarte h3{
  font-size:21px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:12px;
}
.preiskarte h3 svg{width:22px;height:22px;color:var(--gold-tief);flex:none}
.preisliste li{
  display:flex;align-items:baseline;gap:14px;padding:11px 0;
  border-bottom:1px dotted rgba(23,34,60,.18);font-size:15.5px;
}
.preisliste li:last-child{border-bottom:0}
.preisliste span:first-child{color:var(--tinte-weich)}
.preisliste .punkte{flex:1;border-bottom:1px dotted rgba(23,34,60,.28);transform:translateY(-4px)}
.preisliste .wert{font-weight:500;white-space:nowrap;color:var(--navy)}
.preis-hinweis{
  margin-top:26px;padding:18px 22px;background:rgba(199,154,75,.12);
  border-left:2px solid var(--gold);font-size:14.5px;color:var(--tinte-weich);
}

/* ---------- Streifen -------------------------------------------- */

.streifen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media (max-width:700px){.streifen{gap:12px}}
@media (max-width:430px){.streifen{gap:8px}}
.streifen figure{margin:0;position:relative;overflow:hidden;background:var(--navy)}
.streifen img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s ease}
.streifen figure:hover img{transform:scale(1.05)}

/* ---------- Zitatband ------------------------------------------- */

.band{position:relative;background:var(--navy);color:var(--sand);isolation:isolate;overflow:hidden}
.band__bild{position:absolute;inset:0;z-index:-2}
.band__bild img{width:100%;height:100%;object-fit:cover;opacity:.28}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,22,40,.76)}
.band .titel,.band h2,.band h3{color:var(--sand)}
.band .vorspann{color:rgba(244,239,231,.82)}

.zitat{max-width:820px;margin-inline:auto;text-align:center}
.zitat blockquote{
  margin:0;font-family:'Playfair Display',serif;
  font-size:clamp(23px,2.8vw,34px);line-height:1.45;color:var(--sand);
}
.zitat figcaption{
  margin-top:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}

/* ---------- Über / Person --------------------------------------- */

.person{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:880px){.person{grid-template-columns:1fr}
.person__bild::after{display:none}}
.person__bild{position:relative}
.person__bild img{width:100%;aspect-ratio:9/11;object-fit:cover}
.person__bild::after{
  content:"";position:absolute;left:-18px;bottom:-18px;width:46%;height:46%;
  border:1px solid var(--gold);z-index:-1;
}
.person__unterschrift{
  font-family:'Playfair Display',serif;font-size:27px;color:var(--gold-tief);
  margin-top:26px;
}
.person__rolle{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-weich);margin-top:4px}

/* ---------- Stimmen --------------------------------------------- */

.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
@media (max-width:900px){.stimmen{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
.stimme{
  background:var(--weiss);border:1px solid var(--linie);padding:32px 30px;
  display:flex;flex-direction:column;
}
.stimme__sterne{display:flex;gap:4px;color:var(--gold);margin-bottom:18px}
.stimme__sterne span{width:13px;height:13px;background:currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stimme p{font-size:16px;color:var(--tinte-weich);line-height:1.75;flex:1}
.stimme__wer{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--linie)}
.stimme__wer img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.stimme__name{font-weight:500;font-size:15px;display:block;line-height:1.4}
.stimme__ort{font-size:13px;color:var(--tinte-weich);display:block;line-height:1.4}

/* ---------- Termin / Aufruf ------------------------------------- */

.aufruf{position:relative;background:var(--navy);color:var(--sand);isolation:isolate;overflow:hidden}
.aufruf__bild{position:absolute;inset:0;z-index:-2}
.aufruf__bild img{width:100%;height:100%;object-fit:cover;opacity:.3}
.aufruf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,22,40,.92),rgba(14,22,40,.66))}
.aufruf__inhalt{max-width:640px;padding-block:clamp(64px,8vw,110px)}
.aufruf h2{color:var(--sand);font-size:clamp(30px,3.8vw,46px)}
.aufruf p{margin-top:20px;color:rgba(244,239,231,.85);max-width:52ch}

/* ---------- Seitenkopf ------------------------------------------ */

.seitenkopf{position:relative;background:var(--navy);color:var(--sand);isolation:isolate;overflow:hidden}
.seitenkopf__bild{position:absolute;inset:0;z-index:-2}
.seitenkopf__bild img{width:100%;height:100%;object-fit:cover}
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,22,40,.9),rgba(14,22,40,.78))}
.seitenkopf__inhalt{padding-block:clamp(58px,7vw,104px);max-width:760px}
.seitenkopf h1{font-size:clamp(34px,5vw,60px);color:var(--sand)}
.seitenkopf p{margin-top:20px;color:rgba(244,239,231,.84);max-width:56ch;font-size:17.5px}
.brotkrumen{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px;
  font-size:13px;letter-spacing:.06em;color:rgba(244,239,231,.62);
}
.brotkrumen a{color:rgba(244,239,231,.8);text-decoration:none}
.brotkrumen a:hover{color:var(--gold-hell)}
.brotkrumen span[aria-hidden]{color:var(--gold);opacity:.7}

/* ---------- Leistungsblöcke ------------------------------------- */

.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.block + .block{margin-top:var(--luft)}
@media (max-width:880px){.block{grid-template-columns:1fr;gap:30px}}
.block--gedreht .block__bild{order:2}
@media (max-width:880px){.block--gedreht .block__bild{order:0}}
.block__bild img{width:100%;aspect-ratio:9/7;object-fit:cover}
.block h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px}
.block p{color:var(--tinte-weich)}
.hakenliste{margin-top:22px;display:grid;gap:11px}
.hakenliste li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15.5px;color:var(--tinte-weich);align-items:start}
.hakenliste svg{width:18px;height:18px;color:var(--gold-tief);margin-top:4px;flex:none}

/* ---------- Galerie --------------------------------------------- */

.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.galerie{grid-template-columns:repeat(2,1fr);gap:12px}}
.galerie figure{margin:0;position:relative;overflow:hidden;background:var(--navy)}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s ease}
.galerie figure:hover img{transform:scale(1.06)}
.galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;
  background:linear-gradient(to top,rgba(14,22,40,.88),transparent);
  color:var(--sand);font-size:13.5px;letter-spacing:.05em;
}

/* ---------- Kontakt --------------------------------------------- */

.kontaktgitter{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,64px);align-items:start}
@media (max-width:900px){.kontaktgitter{grid-template-columns:1fr}}

.zeittafel{width:100%;border-collapse:collapse;margin-top:8px}
.zeittafel th,.zeittafel td{
  padding:13px 4px;border-bottom:1px solid var(--linie);
  font-size:15.5px;font-weight:400;text-align:left;
}
.zeittafel th{color:var(--tinte);width:44%}
.zeittafel td{color:var(--tinte-weich);text-align:right;font-variant-numeric:tabular-nums}
.zeittafel .zu{color:var(--gold-tief)}
.zeittafel tr:last-child th,.zeittafel tr:last-child td{border-bottom:0}

.infokarte{background:var(--weiss);border:1px solid var(--linie);padding:34px 32px}
.infokarte + .infokarte{margin-top:22px}
.infokarte h3{font-size:21px;margin-bottom:18px}
.infoliste li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--linie);align-items:start}
.infoliste li:last-child{border-bottom:0}
.infoliste svg{width:19px;height:19px;color:var(--gold-tief);margin-top:4px;flex:none}
.infoliste a{text-decoration:none;color:var(--navy);border-bottom:1px solid rgba(199,154,75,.5)}
.infoliste a:hover{color:var(--gold-tief)}
.infoliste b{display:block;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-weich);margin-bottom:2px}

.formular{background:var(--weiss);border:1px solid var(--linie);padding:clamp(28px,4vw,44px)}
.formular h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
.feld{display:block;margin-top:20px}
.feld span{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-weich);margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%;padding:14px 16px;border:1px solid rgba(23,34,60,.24);
  background:var(--papier);font-family:inherit;font-size:16px;color:var(--tinte);
  border-radius:var(--rund);
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.feldpaar{grid-template-columns:1fr;gap:0}}
.kreuz{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:22px;align-items:start;font-size:14.5px;color:var(--tinte-weich)}
.kreuz input{width:18px;height:18px;margin-top:4px;accent-color:var(--gold-tief)}
.formular__hinweis{margin-top:18px;font-size:14px;color:var(--tinte-weich)}
.formular__antwort{
  margin-top:20px;padding:15px 18px;background:rgba(199,154,75,.14);
  border-left:2px solid var(--gold);color:var(--navy);font-size:15px;
}

/* ---------- Fragen ---------------------------------------------- */

.fragen{margin-top:40px;max-width:900px}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;cursor:pointer;list-style:none;
  font-family:'Playfair Display',serif;font-size:19.5px;color:var(--navy);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:1.6px solid var(--gold-tief);border-bottom:1.6px solid var(--gold-tief);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s ease;
}
.frage[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.frage__text{padding:0 2px 24px;color:var(--tinte-weich);font-size:15.8px;max-width:72ch}
.frage__text p{margin-bottom:.8em}

/* ---------- Fuß -------------------------------------------------- */

.fuss{background:var(--navy);color:rgba(244,239,231,.78);padding-top:clamp(56px,7vw,88px)}
.fuss__bahn{
  width:min(100% - 40px,var(--bahn));margin-inline:auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;
  padding-bottom:clamp(44px,5vw,66px);
}
@media (max-width:980px){.fuss__bahn{grid-template-columns:1fr 1fr;gap:38px}}
@media (max-width:560px){.fuss__bahn{grid-template-columns:1fr;gap:34px}}
.fuss__satz{margin-top:22px;font-size:15px;line-height:1.72;max-width:38ch}
.fuss__titel{
  font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500;
}
.fuss__nav{display:grid;gap:9px}
.fuss__nav a{text-decoration:none;font-size:15px;color:rgba(244,239,231,.78)}
.fuss__nav a:hover{color:var(--gold-hell)}
.fuss__zeiten{width:100%;border-collapse:collapse;font-size:14.5px}
.fuss__zeiten th,.fuss__zeiten td{padding:5px 0;font-weight:400;text-align:left;color:rgba(244,239,231,.78)}
.fuss__zeiten td{text-align:right;font-variant-numeric:tabular-nums}
.fuss__zeiten .zu{color:var(--gold)}
.fuss__adresse{font-style:normal;display:grid;gap:13px;font-size:15px}
.fuss__adresse span,.fuss__adresse a{display:grid;grid-template-columns:auto 1fr;gap:11px;text-decoration:none;color:rgba(244,239,231,.8);align-items:start}
.fuss__adresse svg{width:17px;height:17px;color:var(--gold);margin-top:4px}
.fuss__adresse a:hover{color:var(--gold-hell)}
.fuss__knopf{margin-top:24px;color:var(--sand);border-color:rgba(244,239,231,.36)}
.fuss__knopf:hover{border-color:var(--gold);color:var(--gold-hell);background:transparent}
.fuss__sozial{display:flex;gap:12px;margin-top:24px}
.fuss__sozial a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--navy-rand);color:rgba(244,239,231,.8);
  transition:border-color .2s ease,color .2s ease;
}
.fuss__sozial svg{width:19px;height:19px}
.fuss__sozial a:hover{border-color:var(--gold);color:var(--gold-hell)}
.marke--fuss .marke__zusatz{color:rgba(244,239,231,.7)}

.fuss__band{
  border-top:1px solid var(--navy-rand);
}
.fuss__band p{
  margin:0;font-size:13px;color:rgba(244,239,231,.56);
}
.fuss__band{
  display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;
  width:min(100% - 40px,var(--bahn));margin-inline:auto;padding-block:22px;
}
.fuss__band a{color:rgba(244,239,231,.72);text-decoration:none}
.fuss__band a:hover{color:var(--gold-hell)}

/* ---------- Nach oben ------------------------------------------- */

.hoch{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--navy);color:var(--gold);border:1px solid var(--gold);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.hoch svg{width:19px;height:19px}
.hoch.da{opacity:1;visibility:visible;transform:none}
.hoch:hover{background:var(--gold);color:var(--navy)}

/* ---------- Einblenden ------------------------------------------ */

.js .zeig{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .zeig.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .zeig{opacity:1;transform:none;transition:none}
  .kachel:hover,.kachel:hover .kachel__bild img,.streifen figure:hover img,.galerie figure:hover img{transform:none}
}

/* ---------- 404 -------------------------------------------------- */

.vierhundert{position:relative;background:var(--navy);color:var(--sand);isolation:isolate;overflow:hidden;text-align:center}
.vierhundert__bild{position:absolute;inset:0;z-index:-2}
.vierhundert__bild img{width:100%;height:100%;object-fit:cover;opacity:.4}
.vierhundert::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,22,40,.7)}
.vierhundert__inhalt{padding-block:clamp(80px,11vw,150px)}
.vierhundert .zahl{
  font-family:'Playfair Display',serif;font-size:clamp(72px,13vw,150px);
  color:var(--gold-hell);line-height:1;
}
.vierhundert h1{font-size:clamp(26px,3.4vw,40px);margin-top:18px;color:var(--sand)}
.vierhundert p{margin-top:18px;color:rgba(244,239,231,.82)}
.vierhundert .knopfreihe{justify-content:center}

/* ---------- Rechtstexte ------------------------------------------ */

.rechtstext{max-width:860px}
.rechtstext h2{font-size:clamp(22px,2.6vw,30px);margin:44px 0 14px}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{font-size:19px;margin:26px 0 8px}
.rechtstext p,.rechtstext li{color:var(--tinte-weich);font-size:16px}
.rechtstext ul{list-style:disc;padding-left:22px;margin:0 0 1.1em;display:grid;gap:6px}
.rechtstext a{color:var(--navy)}

/* ---------- Sehr schmale Geräte (320 px) ------------------------- */
@media (max-width:420px){
  .kopf__bahn{gap:14px;padding-block:15px}
  .klapp__wort{display:none}
  .marke{gap:9px}
  .marke__zeichen{width:32px;height:32px}
  .marke__name{font-size:19px;letter-spacing:.17em}
  .marke__zusatz{font-size:9px;letter-spacing:.05em;margin-top:5px}
  .kopf__rechts{gap:12px}
}

/* Zwei Stimmen statt drei, solange stimme-03.jpg dieselbe Person wie shirin.jpg zeigt */
.stimmen--zwei{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media (max-width:900px){.stimmen--zwei{grid-template-columns:1fr;max-width:640px}}