/* ==========================================================================
   mm Markisenbau Müller GmbH — Gestaltung "Tuchbahnen mit Wellenvolant"
   Handgeschrieben, keine fremden Bibliotheken, alles lokal.
   ========================================================================== */

/* --- Schriften (lokal, keine externen Aufrufe) --------------------------- */
@font-face{font-family:'Signika';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/signika-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Signika';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/signika-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/epilogue-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/epilogue-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(schriften/splinesansmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(schriften/splinesansmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- Werte --------------------------------------------------------------- */
:root{
  --sonne:#FCF8F0;
  --sand:#F3ECDF;
  --sand-tief:#E8DDC9;
  --schatten:#2A3942;
  --schatten-tief:#1E2A31;
  --rot:#E2231A;
  --rot-tief:#B01610;
  --ocker:#C97A10;
  --ocker-tief:#8A5209;
  --tinte:#1B2126;
  --nebel:#636C72;
  --nebel-hell:#A9B4BA;
  --linie:#D9CFBB;
  --volant:22px;          /* Radius der Volantbögen */
  --breite:min(100% - 2.4rem, 74rem);
  --breite-eng:min(100% - 2.4rem, 54rem);
  --kopf:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{
  margin:0;background:var(--sonne);color:var(--tinte);
  font-family:'Epilogue',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot-tief);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--rot)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,h5{font-family:'Signika',Georgia,serif;font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(1.85rem,1.2rem + 2.6vw,3.1rem)}
h2{font-size:clamp(1.5rem,1.05rem + 1.7vw,2.3rem)}
h3{font-size:clamp(1.18rem,1rem + .7vw,1.5rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
li{margin-bottom:.4em}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--linie);margin:2.2rem 0}
.mono{font-family:'Spline Sans Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.nur-lesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zentriert{text-align:center}

/* --- Sprungmarke --------------------------------------------------------- */
.sprung{position:absolute;left:.6rem;top:-100px;z-index:200;background:var(--rot);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 6px 6px;font-weight:700;text-decoration:none;transition:top .15s}
.sprung:focus{top:0;color:#fff}

/* --- Kopf ---------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:100;background:rgba(252,248,240,.97);
  border-bottom:1px solid var(--linie);backdrop-filter:saturate(1.2) blur(6px)}
.kopf__streifen{height:4px;background:repeating-linear-gradient(90deg,
  var(--rot) 0 18px, var(--sand) 18px 36px)}
.kopf__innen{width:var(--breite);margin-inline:auto;display:flex;align-items:center;
  gap:.9rem;min-height:var(--kopf);flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinte);
  flex:0 1 auto;min-width:0}
.marke img{width:38px;height:38px;border-radius:3px;flex:0 0 auto}
.marke__text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.marke__name{font-family:'Signika',serif;font-weight:700;font-size:1.02rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marke__zusatz{font-size:.72rem;color:var(--nebel);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:26rem){.marke__zusatz{display:none}}
.kopf__rest{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.kopf__tel{display:none;font-weight:600;text-decoration:none;color:var(--tinte);font-size:.95rem}
.kopf__tel span{display:block;font-size:.7rem;color:var(--nebel);font-weight:400}
.menuknopf{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:44px;
  padding:.5rem .8rem;background:none;border:1px solid var(--linie);border-radius:4px;
  font:inherit;font-weight:600;font-size:.92rem;color:var(--tinte);cursor:pointer}
.menuknopf__balken{display:block;width:20px;height:2px;background:var(--tinte);position:relative}
.menuknopf__balken::before,.menuknopf__balken::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--tinte);transition:transform .18s}
.menuknopf__balken::before{top:-6px}.menuknopf__balken::after{top:6px}
.menuknopf[aria-expanded="true"] .menuknopf__balken{background:transparent}
.menuknopf[aria-expanded="true"] .menuknopf__balken::before{transform:translateY(6px) rotate(45deg)}
.menuknopf[aria-expanded="true"] .menuknopf__balken::after{transform:translateY(-6px) rotate(-45deg)}

.navi{display:none;flex:0 0 calc(100% + 2.4rem);order:3;background:var(--sand);
  border-top:1px solid var(--linie);margin-inline:-1.2rem;padding-inline:1.2rem}
.navi[data-offen="true"]{display:block}
.navi ul{list-style:none;margin:0;padding:.4rem 0 1rem}
.navi li{margin:0}
.navi a{display:block;padding:.78rem .2rem;min-height:44px;text-decoration:none;color:var(--tinte);
  font-weight:600;border-bottom:1px solid rgba(0,0,0,.07)}
.navi a[aria-current="page"]{color:var(--rot-tief);box-shadow:inset 4px 0 0 var(--rot);padding-left:.8rem}
.navi .navi__cta{margin-top:.8rem;background:var(--rot);color:#fff;border-radius:4px;text-align:center;border:0}
.navi .navi__cta[aria-current="page"]{color:#fff;box-shadow:none;padding-left:.2rem}

@media (min-width:68rem){
  .menuknopf{display:none}
  .kopf__innen{flex-wrap:nowrap}
  .navi{display:block;order:2;flex:0 1 auto;min-width:0;background:none;border:0;
    margin-inline:0;padding-inline:0}
  .kopf__rest{order:3;margin-left:.6rem}
  .navi ul{display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;justify-content:flex-end;padding:0}
  .navi a{border:0;padding:.5rem .55rem;font-size:.94rem;border-radius:4px;white-space:nowrap}
  .navi a:hover{background:var(--sand)}
  .navi a[aria-current="page"]{box-shadow:none;padding-left:.55rem;background:var(--sand-tief)}
  .navi .navi__cta{margin:0 0 0 .5rem;padding:.55rem .9rem}
  .navi .navi__cta[aria-current="page"]{background:var(--rot);color:#fff}
}
@media (min-width:82rem){
  .kopf__tel{display:block;text-align:right;margin-right:.4rem}
  .kopf__innen{min-height:72px}
  :root{--kopf:76px}
}

/* --- Tuchbahn: das durchgehende Motiv ------------------------------------ */
.bahn{position:relative;background:var(--sonne)}
.bahn--sand{background:var(--sand)}
.bahn--schatten{background:var(--schatten);color:#F1EFEA}
.bahn--schatten h2,.bahn--schatten h3,.bahn--schatten h4{color:#fff}
.bahn--schatten a{color:#FFC9C4}
.bahn--schatten a:hover{color:#fff}
.bahn--schatten .neben{color:var(--nebel-hell)}

/* Das gespannte Tuch mit Wellenvolant an der Unterkante */
.tuch{
  height:clamp(54px,7.5vw,86px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0 42%, rgba(0,0,0,.10) 100%),
    repeating-linear-gradient(90deg, var(--tuch-a,var(--rot)) 0 44px, var(--tuch-b,var(--sand)) 44px 88px);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  -webkit-mask-size:calc(var(--volant)*2) 100%;mask-size:calc(var(--volant)*2) 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:bottom left;mask-position:bottom left;
}
.tuch--ocker{--tuch-a:var(--ocker);--tuch-b:#F7EDD9}
.tuch--sand{--tuch-a:#DCD0B6;--tuch-b:#FCF8F0}
.tuch--schatten{--tuch-a:#3B4C56;--tuch-b:#16212700}
.tuch--hell{--tuch-a:#E9DFC8;--tuch-b:#FCF8F0}
@media (max-width:40rem){:root{--volant:16px}}

.bahn__inhalt{width:var(--breite);margin-inline:auto;padding:2.4rem 0 3rem}
.bahn__inhalt--eng{width:var(--breite-eng)}
@media (min-width:48rem){.bahn__inhalt{padding:3.2rem 0 4rem}}
.bahn__nr{font-family:'Spline Sans Mono',monospace;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ocker-tief);display:block;margin-bottom:.5rem;font-weight:600}
.bahn--schatten .bahn__nr{color:#F0B95E}
.bahn__kopf{max-width:46rem}
.vorlauf{font-size:1.1rem;color:var(--nebel);max-width:44rem}
.bahn--schatten .vorlauf{color:var(--nebel-hell)}

/* --- Einstieg ------------------------------------------------------------ */
.einstieg{position:relative;background:var(--schatten);color:#fff}
.einstieg__bild{position:relative}
.einstieg__bild img{width:100%;height:clamp(220px,46vw,460px);object-fit:cover;object-position:center 58%}
.einstieg__tuch{display:block;height:clamp(40px,6.5vw,70px);margin-top:-1px;
  background:repeating-linear-gradient(90deg,var(--rot) 0 44px,#FBF4E6 44px 88px);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  -webkit-mask-size:calc(var(--volant)*2) 100%;mask-size:calc(var(--volant)*2) 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:bottom left;mask-position:bottom left;
}
.einstieg__text{width:var(--breite);margin-inline:auto;padding:2.4rem 0 2.8rem;
  display:grid;gap:1.6rem}
@media (min-width:56rem){.einstieg__text{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:3rem;align-items:end;padding:3rem 0 3.4rem}
  .einstieg__marken{margin-top:0}}
.einstieg h1{color:#fff;max-width:24ch}
.einstieg p{color:#DCE4E8;max-width:52ch;font-size:1.08rem}
.einstieg__marken{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.4rem 0 0;padding:0;list-style:none;
  font-family:'Spline Sans Mono',monospace;font-size:.84rem;color:#F3C371}
.einstieg__marken li{display:flex;align-items:center;gap:.4rem}

/* --- Knöpfe -------------------------------------------------------------- */
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.35rem;border-radius:4px;border:2px solid var(--rot);
  background:var(--rot);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s}
.knopf:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:#fff}
.knopf--rand{background:transparent;color:var(--rot-tief);border-color:var(--rot-tief)}
.knopf--rand:hover{background:var(--rot-tief);color:#fff}
.bahn--schatten .knopf--rand,.einstieg .knopf--rand{color:#fff;border-color:#9AA7AE}
.bahn--schatten .knopf--rand:hover,.einstieg .knopf--rand:hover{background:#fff;color:var(--schatten);border-color:#fff}
.knopf--klein{min-height:44px;padding:.5rem 1rem;font-size:.92rem}

/* --- Zeilen statt Kacheln (Produkte, Filialen) --------------------------- */
.zeile{display:grid;gap:1.2rem;padding:2rem 0;border-top:1px solid var(--linie)}
.bahn--schatten .zeile{border-color:#41525C}
.zeile:first-of-type{border-top:0}
@media (min-width:52rem){
  .zeile{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.2rem;align-items:start}
  .zeile--gedreht .zeile__bild{order:2}
}
.zeile__bild img{width:100%}
.zeile h3{margin-top:0}
.zeile__daten{list-style:none;margin:.2rem 0 1rem;padding:0;font-family:'Spline Sans Mono',monospace;font-size:.86rem}
.zeile__daten li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dotted var(--linie)}
.bahn--schatten .zeile__daten li{border-color:#41525C}
.zeile__daten b{font-weight:600}

/* --- Foto mit Volantsaum ------------------------------------------------- */
.foto{margin:0}
.foto img{width:100%;
  -webkit-mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  mask-image:radial-gradient(circle at 50% 100%, transparent 0 var(--volant), #000 calc(var(--volant) + .6px));
  -webkit-mask-size:calc(var(--volant)*2) 100%;mask-size:calc(var(--volant)*2) 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:bottom left;mask-position:bottom left;}
.foto figcaption{font-family:'Spline Sans Mono',monospace;font-size:.76rem;color:var(--nebel);
  margin-top:.5rem;line-height:1.45}
.bahn--schatten .foto figcaption{color:var(--nebel-hell)}
.foto--glatt img{-webkit-mask-image:none;mask-image:none}

/* --- Merkliste / Vorteile ------------------------------------------------ */
.haken{list-style:none;padding:0;margin:0 0 1.2rem}
.haken li{position:relative;padding-left:1.7rem;margin-bottom:.55rem}
.haken li::before{content:"";position:absolute;left:0;top:.55em;width:.72rem;height:.72rem;
  border-radius:50%;border:2px solid var(--rot);background:transparent}
.haken li::after{content:"";position:absolute;left:.24rem;top:.72em;width:.34rem;height:.16rem;
  border-left:2px solid var(--rot);border-bottom:2px solid var(--rot);transform:rotate(-45deg)}
.bahn--schatten .haken li::before{border-color:#FF6B60}
.bahn--schatten .haken li::after{border-color:#FF6B60}

/* --- Tabellen ------------------------------------------------------------ */
.tabellenrahmen{overflow-x:auto;margin:1.4rem 0 1.8rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.94rem;
  background:#fff;color:var(--tinte)}
caption{text-align:left;font-size:.85rem;color:var(--nebel);padding:.7rem .7rem .6rem;background:#fff}
th,td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{background:var(--sand);color:var(--tinte);font-family:'Signika',serif;font-size:.95rem}
tbody th{font-weight:600}
td.ja{color:var(--rot-tief);font-weight:700}
td.nein{color:var(--nebel)}
.tabelle--eng{min-width:24rem}

/* --- Marken / Stempel ---------------------------------------------------- */
.stempel{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin:1.4rem 0 0;padding:0;list-style:none}
.stempel img{width:84px;height:auto}
.stempel figcaption{font-size:.75rem;color:var(--nebel);max-width:9rem;text-align:center;margin-top:.3rem}

/* --- Hinweiskasten ------------------------------------------------------- */
.hinweis{border-left:4px solid var(--ocker);background:rgba(201,122,16,.08);
  padding:1rem 1.1rem;margin:1.4rem 0;font-size:.96rem}
.hinweis p:last-child{margin-bottom:0}
.hinweis--rot{border-color:var(--rot);background:rgba(226,35,26,.07)}
.bahn--schatten .hinweis{background:rgba(255,255,255,.07)}

/* --- Status (offen/geschlossen) ------------------------------------------ */
.status{display:inline-flex;align-items:center;gap:.45rem;font-family:'Spline Sans Mono',monospace;
  font-size:.8rem;font-weight:600;padding:.28rem .6rem;border-radius:3px;background:var(--sand);color:var(--tinte)}
.status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--nebel)}
.status[data-offen="ja"]{background:#E3F1E4;color:#1D5B26}
.status[data-offen="ja"]::before{background:#2E8B3A}
.status[data-offen="nein"]{background:#F6E4E3;color:#8E2019}
.status[data-offen="nein"]::before{background:var(--rot)}

/* --- Formular ------------------------------------------------------------ */
.formular{display:grid;gap:1.1rem;max-width:44rem}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld label,.gruppe legend{font-weight:600;font-size:.95rem}
.feld .erklaerung{font-size:.83rem;color:var(--nebel)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  font:inherit;font-size:1rem;padding:.7rem .8rem;min-height:48px;width:100%;
  border:1px solid #B9AE97;border-radius:4px;background:#fff;color:var(--tinte)}
textarea{min-height:8rem;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinte) 50%),linear-gradient(135deg,var(--tinte) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--rot);outline-offset:1px;border-color:var(--rot)}
fieldset{border:1px solid var(--linie);border-radius:4px;padding:1rem;margin:0}
legend{padding:0 .4rem}
.wahlreihe{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.wahl{display:flex;align-items:center;gap:.5rem;min-height:44px}
.wahl input{width:20px;height:20px;accent-color:var(--rot)}
.zwei{display:grid;gap:1.1rem}
@media (min-width:40rem){.zwei{grid-template-columns:1fr 1fr}}
.pflicht{color:var(--rot-tief)}

/* --- Planer -------------------------------------------------------------- */
.planer{display:grid;gap:1.6rem;margin-top:1rem}
@media (min-width:56rem){.planer{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
.planer__buehne{background:#fff;border:1px solid var(--linie);border-radius:4px;padding:.8rem}
.planer__buehne svg{width:100%;height:auto;display:block}
.planer__werte{list-style:none;margin:.9rem 0 0;padding:0;font-family:'Spline Sans Mono',monospace;font-size:.86rem}
.planer__werte li{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;border-bottom:1px dotted var(--linie)}
.planer__warnung{color:#8E2019;font-weight:600;font-size:.92rem;margin:.7rem 0 0}
.planer__text{width:100%;font-family:'Spline Sans Mono',monospace;font-size:.86rem;min-height:11rem}

/* --- Galerie ------------------------------------------------------------- */
.galerie{columns:2 10rem;column-gap:.55rem;margin:1.2rem 0 0}
@media (min-width:52rem){.galerie{columns:4 14rem}}
.galerie button{display:block;width:100%;padding:0;margin:0 0 .55rem;border:0;background:none;cursor:pointer;
  break-inside:avoid;line-height:0}
.galerie img{width:100%;border-radius:2px}
.galerie button:focus-visible img{outline:3px solid var(--rot);outline-offset:2px}
.lichtkasten{position:fixed;inset:0;z-index:200;background:rgba(20,26,30,.94);display:none;
  align-items:center;justify-content:center;padding:1rem}
.lichtkasten[data-offen="true"]{display:flex}
.lichtkasten img{max-width:min(96vw,1200px);max-height:82vh;width:auto;object-fit:contain}
.lichtkasten__leiste{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;
  gap:.6rem;padding:1rem;align-items:center}
.lichtkasten__zaehler{font-family:'Spline Sans Mono',monospace;color:#D8DEE2;font-size:.85rem;min-width:5.5rem;text-align:center}
.lichtkasten button{min-width:48px;min-height:48px;border:1px solid #566771;background:rgba(255,255,255,.08);
  color:#fff;border-radius:4px;font:inherit;font-size:1.1rem;cursor:pointer}
.lichtkasten button:hover{background:rgba(255,255,255,.2)}
.lichtkasten__zu{position:absolute;top:1rem;right:1rem}

/* --- Karte (Zwei-Klick) --------------------------------------------------- */
.karte{border:1px solid var(--linie);border-radius:4px;overflow:hidden;background:#fff}
.karte__vorschau{padding:1.2rem;text-align:center}
.karte__vorschau svg{width:100%;max-width:34rem;height:auto;margin:0 auto .9rem}
.karte__hinweis{font-size:.86rem;color:var(--nebel);max-width:38rem;margin:0 auto 1rem}

/* --- Suchfeld ------------------------------------------------------------ */
.suche{display:flex;flex-wrap:wrap;gap:.7rem;align-items:end;margin:1.2rem 0}
.suche .feld{flex:1 1 16rem}
.trefferzahl{font-family:'Spline Sans Mono',monospace;font-size:.84rem;color:var(--nebel)}

/* --- Ausklapper (FAQ, Ortsliste) ----------------------------------------- */
details{border-bottom:1px solid var(--linie);padding:.2rem 0}
details summary{cursor:pointer;padding:.85rem 0;font-weight:600;min-height:44px;
  display:flex;align-items:center;gap:.6rem;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";font-family:'Spline Sans Mono',monospace;color:var(--rot);
  font-size:1.2rem;width:1rem;flex:0 0 auto}
details[open] summary::before{content:"–"}
details .antwort{padding:0 0 1rem 1.6rem}

/* --- Ortsliste ----------------------------------------------------------- */
.orte{columns:2 11rem;column-gap:1.4rem;font-size:.9rem;list-style:none;padding:0;margin:.6rem 0 0}
.orte li{break-inside:avoid;margin-bottom:.2rem;color:var(--nebel)}
@media (min-width:52rem){.orte{columns:4 11rem}}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{background:var(--schatten-tief);color:#C9D2D7}
.fuss__innen{width:var(--breite);margin-inline:auto;padding:2.4rem 0 2rem;
  display:grid;gap:1.8rem}
@media (min-width:52rem){.fuss__innen{grid-template-columns:1.3fr 1fr 1fr}}
.fuss h2{font-size:1.05rem;color:#fff;margin-bottom:.6rem}
.fuss a{color:#E6EBEE}
.fuss a:hover{color:#fff}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.45rem}
.fuss__unten{border-top:1px solid #3A4A53;font-size:.85rem;color:#94A2AA}
.fuss__unten div{width:var(--breite);margin-inline:auto;padding:1rem 0 1.6rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.fuss__unten a{color:#94A2AA}

/* --- Brotkrumen ---------------------------------------------------------- */
.krumen{width:var(--breite);margin-inline:auto;padding:.7rem 0 0;font-size:.84rem;color:var(--nebel)}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.krumen li::after{content:"›";margin-left:.4rem;color:var(--linie)}
.krumen li:last-child::after{content:""}

/* --- Aktionsleiste unten (nur Mobil) ------------------------------------- */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  background:var(--schatten);border-top:3px solid var(--rot)}
.aktionsleiste a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:54px;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem}
.aktionsleiste a+a{border-left:1px solid #41525C}
@media (min-width:68rem){.aktionsleiste{display:none}}
@media (max-width:67.99rem){body{padding-bottom:54px}}