/* Campingplatz Allensbach - Website
   Tokens und Regeln: DESIGN.md, verbindlich darueber .claude/rules/ui-design.md */

/* ---------- Schrift ---------- */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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:"Archivo";
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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;
}

/* ---------- Tokens ----------
   Die Farben stammen aus der echten Hausmarke von campingamsee.com, abgelesen
   am 17.09.2026 von der laufenden Seite und aus dem Logo:
     Logo      #F89A34 (Orange) auf #000000
     Flaechen  #D3B274 Sand, #EADFC7 helles Sand
     Links     #8A6A2F Gold
     Text      #686868 Grau
   Das Tentacl-Orange #e8540a der Buchungsstrecke gilt hier bewusst NICHT
   (Robert 17.09.2026: "halt dich an die Farben und an die CI").
   ------------------------------------------------------------------ */
:root{
  --papier:#fdfcfa; --karte:#fff; --tinte:#1b1b1b; --neben:#686868;
  --sand:#d3b274; --sand-hell:#eadfc7; --sand-weich:#f6f0e4;
  --gold:#8a6a2f; --gold-tief:#75551e; --sonne:#f89a34; --sonne-tief:#e08420;
  --linie:#e4ded2; --linie-weich:#efe6d5;
  --tiefe:#221f1a;            /* dunkle Abschnitte: warmes Schwarzbraun, kein Petrol */
  --gruen:#5f7a3f;            /* Status frei, aus der Wiese statt aus dem Farbkreis */

  /* Altnamen bleiben bestehen, damit nichts bricht */
  --flaeche:var(--papier); --text:var(--tinte);
  --akzent:var(--sonne); --aktion:var(--sonne); --aktion-hover:var(--sonne-tief);
  --weich:var(--sand-weich);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r-flaeche:4px; --r-element:3px;      /* die Hausmarke ist eckig, nicht rund */
  --breit:1180px; --lese:680px;

  --kurve:cubic-bezier(.22,1,.36,1);
  --schnell:140ms; --mittel:200ms; --ruhig:260ms;

  --schrift-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --schrift-text:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  /* Schraffur: das Streifenmotiv der Hausmarke */
  --schraffur:repeating-linear-gradient(-45deg, var(--sand-hell) 0 1px, transparent 1px 6px);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--schrift-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block; -webkit-user-drag:none; user-select:none}
h1,h2,h3,h4{font-family:var(--schrift-display); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0; text-wrap:balance;
  /* Deutsche Bandwurmwoerter ("Geschaeftsbedingungen") sprengen auf 320px
     sonst die Seite. Erst trennen, notfalls hart umbrechen. */
  hyphens:auto; overflow-wrap:break-word}
h1{font-size:clamp(30px,6.4vw,54px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:clamp(19px,2vw,22px); letter-spacing:-.01em; line-height:1.22}
p{margin:0}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}

/* Browserflaechen mitgestalten */
::selection{background:var(--weich); color:var(--text)}
:focus-visible{outline:3px solid var(--akzent); outline-offset:2px; border-radius:6px}
html{scrollbar-color:var(--linie) var(--flaeche)}

input,select,textarea,button{font:inherit; color:inherit}
input,select,textarea{font-size:16px}
button,a,[role="button"],summary{touch-action:manipulation; -webkit-user-select:none; user-select:none}

.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;color:var(--text)}
.springmarke{position:absolute;left:var(--s4);top:-60px;z-index:60;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-element);padding:10px 14px;transition:top var(--schnell) var(--kurve)}
.springmarke:focus{top:var(--s3)}

/* ---------- Raster ---------- */
.bahn{width:min(100% - 32px,var(--breit)); margin-inline:auto}
.bahn-lese{width:min(100% - 32px,var(--lese)); margin-inline:auto}
.abschnitt{padding-block:var(--s8)}
.abschnitt-eng{padding-block:var(--s7)}
@media (max-width:640px){ .abschnitt{padding-block:var(--s7)} }

.kopfzeile-block{display:grid; gap:var(--s3); margin-bottom:var(--s6); max-width:var(--lese)}
.kopfzeile-block p{color:var(--neben)}

/* ---------- Bedienelemente ---------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px; border-radius:var(--r-element);
  border:1px solid transparent; background:var(--sonne); color:#171512;
  font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  letter-spacing:.005em;
  transition:background var(--schnell) var(--kurve), transform var(--schnell) var(--kurve);
}
.knopf:active{transform:translateY(1px)}
.knopf-neutral{background:var(--karte); color:var(--tinte); border-color:var(--tinte); border-width:1.5px; font-weight:600}
.knopf-klar{background:transparent; color:var(--text); border-color:var(--linie)}
.knopf svg{width:1em;height:1em;flex:none}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:var(--sonne-tief)}
  .knopf-neutral:hover,.knopf-klar:hover{background:var(--sand-weich); border-color:var(--sand)}
}

.textlink{color:var(--gold-tief); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:600}
@media (hover:hover) and (pointer:fine){ .textlink:hover{text-decoration-thickness:2px} }

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky; top:0; z-index:50; background:var(--karte); border-bottom:1px solid var(--linie)}

/* Schmales Band wie auf der Hausseite, oben und unten von der Schraffur gerahmt. */
.kopf-band{
  font-size:12.5px; color:var(--neben); background:var(--karte);
  border-block:6px solid transparent;
  border-image:var(--schraffur) 6 repeat;
}
.kopf-band-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:34px}
.kopf-band a{text-decoration:none; color:var(--neben)}
.kopf-band .trenner{display:inline-block; width:1px; height:9px; background:var(--sand); margin:0 8px; vertical-align:middle}
@media (hover:hover) and (pointer:fine){ .kopf-band a:hover{color:var(--gold)} }
.kopf-band-konto{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--tinte)}
.kopf-band-konto svg{width:12px; height:12px; color:var(--gold)}
@media (max-width:860px){ .kopf-band{display:none} }

.kopf-inner{display:flex; align-items:center; gap:var(--s3); min-height:92px}
.marke{display:block; text-decoration:none; margin-inline:auto; flex:none; order:2}
.marke img{width:74px; height:76px; display:block; transition:width var(--mittel) var(--kurve), height var(--mittel) var(--kurve)}
.hauptnavi{display:none; gap:2px; flex:1}
.hauptnavi.links{order:1; justify-content:flex-end}
.hauptnavi.rechts{order:3; justify-content:flex-start}
.hauptnavi a{
  padding:9px 11px; text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinte); white-space:nowrap;
  border-bottom:2px solid transparent; transition:border-color var(--schnell) var(--kurve), color var(--schnell) var(--kurve);
}
.hauptnavi a[aria-current="page"]{border-bottom-color:var(--sonne)}
@media (hover:hover) and (pointer:fine){ .hauptnavi a:hover{color:var(--gold); border-bottom-color:var(--sand)} }

.kopf-aktion{order:4; min-height:48px; padding:0 14px; font-size:15px; flex:none}
.kopf-aktion .lang{display:none}
.menue-knopf{
  order:0; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:48px;height:48px; border-radius:var(--r-element); border:1.5px solid var(--tinte);
  background:var(--karte); cursor:pointer;
}
.menue-knopf svg{width:18px;height:18px}
/* "Mein Konto" als Symbol, solange das Kopfband ausgeblendet ist (Handy/Tablet).
   Links neben dem Menueknopf, damit das Rundlogo mittig bleibt. */
.kopf-konto{
  order:1; flex:none; display:none; align-items:center; justify-content:center;
  width:48px;height:48px; border-radius:var(--r-element); border:1.5px solid var(--tinte);
  background:var(--karte); color:var(--tinte); text-decoration:none;
}
.kopf-konto svg{width:18px;height:18px}
@media (max-width:860px){ .kopf-konto{display:inline-flex} }
@media (min-width:1080px){
  .hauptnavi{display:flex}
  .menue-knopf{display:none}
  .kopf-inner{min-height:104px}
  .kopf-aktion{min-height:44px; padding:0 18px; font-size:15px}
  .kopf-aktion .lang{display:inline}
  .marke img{width:86px;height:88px}
}
/* Gemessen 24.09.2026: die Kopfzeile brauchte 1217 px (9 Punkte + Logo + Knopf),
   die Bahn hat hoechstens 1180 px. Zwischen 1080 und 1240 px Fensterbreite lief
   die ganze Seite deshalb seitlich (Robert: "laesst sich seitwaerts bewegen").
   Engere Punkte, und bis 1259 px kleinere Schrift ohne den langen Knopftext. */
@media (min-width:1080px){ .hauptnavi a{padding:9px 8px} }
@media (min-width:1080px) and (max-width:1259px){
  .hauptnavi a{font-size:12.5px; padding:9px 6px; letter-spacing:.045em}
  .kopf-aktion .lang{display:none}
  .kopf-aktion{padding:0 14px}
  .marke img{width:76px;height:78px}
}
@media (max-width:420px){
  .kopf-inner{min-height:76px}
  .marke img{width:58px;height:60px}
  .kopf-aktion{padding:0 11px; font-size:14px}
}

.schublade{
  position:fixed; inset:0; z-index:60; display:none;
  width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none;
  margin:0; padding:0; border:0; overflow:hidden; background:transparent; color:var(--tinte)
}
.schublade[open]{display:block}
.schublade::backdrop{background:rgba(27,27,27,.45)}
.schublade-blatt{
  position:absolute; inset:0 0 auto 0; background:var(--karte);
  max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  border-bottom:6px solid transparent; border-image:var(--schraffur) 6 repeat;
  padding:max(var(--s4),env(safe-area-inset-top)) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  box-shadow:0 18px 40px -20px rgba(27,27,27,.35);
  animation:blatt-rein var(--ruhig) var(--kurve);
}
@keyframes blatt-rein{from{transform:translateY(-12px);opacity:.6}to{transform:none;opacity:1}}
.schublade-kopf{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s3);padding-block:4px;background:var(--karte)
}
.schublade-kopf .menue-knopf svg{color:var(--tinte)}
.schublade a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 10px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--linie)}
.schublade a:last-of-type{border-bottom:0}
.schublade svg{width:18px;height:18px;color:var(--sand);flex:none}

/* ---------- Suchleiste ---------- */
.suche{
  background:var(--karte); border:0; border-radius:var(--r-flaeche);
  padding:var(--s4); display:grid; gap:var(--s3);
  box-shadow:0 2px 4px -2px rgba(26,26,26,.10), 0 18px 34px -22px rgba(26,26,26,.45);
}
.suche-felder{display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Kleine Handys (320px, z.B. iPhone SE): zwei Datumsfelder passen nicht
   nebeneinander - sie haben eine feste Mindestbreite und schoben die Seite
   42px nach rechts. Darunter untereinander. */
@media (max-width:380px){ .suche-felder{grid-template-columns:minmax(0,1fr)} }
/* Spalte darf nicht mit der Mindestbreite des Feldes wachsen (iOS-Datumsfeld,
   E: Abreise ragte am iPhone rechts aus der Karte, Robert 24.09.2026). */
.suche-feld{display:grid; gap:6px; grid-template-columns:minmax(0,1fr)}
.suche-feld.voll{grid-column:1 / -1}
.suche-feld label{font-size:13px; font-weight:600; color:var(--neben)}
.suche-feld input,.suche-feld select{
  width:100%; min-width:0; box-sizing:border-box; min-height:48px; padding:0 12px; border:1px solid var(--linie);
  color:var(--text); color-scheme:light;
  border-radius:var(--r-element); background:var(--flaeche);
  transition:border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
.suche-feld input:focus,.suche-feld select:focus{background:var(--karte); border-color:var(--akzent); outline:none}
/* iOS Safari: das native Datumsfeld haelt eine feste Mindestbreite und zentriert
   den Wert. Ohne Systemoptik richtet es sich nach der Spalte. */
.suche-feld input[type="date"]{-webkit-appearance:none; appearance:none; display:block}
.suche-feld input[type="date"]::-webkit-date-and-time-value{text-align:left; min-height:1.3em}
.suche .knopf{width:100%}
.suche-hinweis{font-size:14px; color:var(--neben); min-height:22px}
.suche-hinweis[data-stand="frei"]{color:var(--gruen); font-weight:600}
.suche-hinweis[data-stand="knapp"]{color:var(--aktion); font-weight:600}
@media (min-width:760px){
  .suche{grid-template-columns:1fr auto; align-items:end; padding:var(--s5)}
  .suche-felder{grid-template-columns:repeat(4,minmax(0,1fr)); grid-column:1 / 2}
  .suche-feld.voll{grid-column:auto}
  .suche .knopf{width:auto; min-width:190px}
  .suche-hinweis{grid-column:1 / -1}
}

/* ---------- Bilder ---------- */
.bild{border-radius:var(--r-flaeche); overflow:hidden; background:var(--linie)}
.bild picture{display:block; height:100%}
.bild img{width:100%; height:100%; object-fit:cover}
.bild-breit{aspect-ratio:16/9}
.bild-hoch{aspect-ratio:4/5}
.bild-quer{aspect-ratio:3/2}
.bild-band{aspect-ratio:21/9}
@media (max-width:640px){ .bild-band{aspect-ratio:16/10} }

/* ---------- Unterkunftskacheln ---------- */
.kachelreihe{display:grid; gap:var(--s4)}
@media (min-width:700px){ .kachelreihe{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .kachelreihe-3{grid-template-columns:repeat(3,1fr)} }

.kachel{display:flex; flex-direction:column; background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-flaeche); overflow:hidden; text-decoration:none; transition:border-color var(--mittel) var(--kurve), transform var(--mittel) var(--kurve)}
.kachel .bild{border-radius:0}
.kachel img{transition:transform 320ms var(--kurve)}
.kachel-text{padding:var(--s4); display:grid; gap:8px; flex:1}
.kachel-text h3{display:flex; align-items:center; gap:9px}
.kachel-text h3 svg{width:20px;height:20px;color:var(--akzent);flex:none}
.kachel-text p{color:var(--neben); font-size:15.5px}
.kachel-fuss{margin-top:auto; padding-top:var(--s2); display:flex; align-items:baseline; gap:8px; font-size:15px}
.kachel-fuss b{font-family:var(--schrift-display); font-size:19px}
.kachel-fuss span{color:var(--neben)}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{border-color:var(--linie-weich)}
  .kachel:hover img{transform:scale(1.03)}
}

/* ---------- Querliste (Handy scrollt, Desktop Raster) ---------- */
.querliste{display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:var(--s4); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding-bottom:var(--s3); scrollbar-width:thin}
.querliste > *{scroll-snap-align:start}
@media (min-width:700px){ .querliste{grid-auto-columns:46%} }
@media (min-width:1000px){ .querliste{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible} }

/* ---------- Faktenzeile ---------- */
.fakten{display:grid; gap:var(--s4); grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .fakten{grid-template-columns:repeat(4,1fr)} }
.fakt{display:grid; gap:6px}
.fakt svg{width:22px;height:22px;color:var(--akzent)}
.fakt b{font-family:var(--schrift-display); font-size:20px; letter-spacing:-.02em}
.fakt span{color:var(--neben); font-size:15px}

/* ---------- Listen ---------- */
.haken{display:grid; gap:10px}
.haken li{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start}
.haken svg{width:16px;height:16px;color:var(--gruen);margin-top:5px}
.striche{display:grid}
.striche li{padding:14px 0; border-bottom:1px solid var(--linie); display:grid; gap:4px}
.striche li:last-child{border-bottom:0}
.striche b{font-weight:600}
.striche span{color:var(--neben); font-size:15.5px}

/* ---------- Tabellen ---------- */
.tabellenrahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--r-flaeche); background:var(--karte); padding-bottom:var(--s2)}
table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:420px}
caption{text-align:left; padding:var(--s4) var(--s4) 0; color:var(--neben); font-size:14px}
th,td{padding:12px var(--s4); text-align:left; border-bottom:1px solid var(--linie)}
thead th{font-size:13px; text-transform:none; font-weight:600; color:var(--neben); background:var(--flaeche)}
tbody tr:last-child td{border-bottom:0}
td.zahl,th.zahl{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Am Handy liefen die Preistabellen rechts aus dem Rahmen: Preise waren nach dem
   Komma abgeschnitten, "frei"/0 gar nicht zu sehen (Frank 21.10.2026). Ohne
   Mindestbreite und mit engeren Zellen passen sie in 390 px. */
@media (max-width:560px){
  table{min-width:0; font-size:14.5px}
  th,td{padding:10px var(--s2)}
  th:first-child,td:first-child{padding-left:var(--s3)}
  th:last-child,td:last-child{padding-right:var(--s3)}
  thead th.zahl{white-space:normal}
  th[scope="row"]{hyphens:auto}
  caption{padding:var(--s3) var(--s3) 0}
}

/* ---------- Speisekarte ---------- */
.speisekarte{border:1px solid var(--linie); border-radius:var(--r-flaeche); background:var(--karte); padding:var(--s2) var(--s4)}
.speisekarte-hinweis{color:var(--neben); font-size:14px; padding:var(--s3) 0 var(--s2)}
.speisekarte li{padding:14px 0; border-top:1px solid var(--linie)}
.speisekarte-zeile{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3)}
.speisekarte-zeile b{font-weight:600}
.speisekarte-preis{font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
.speisekarte li p{margin-top:4px; color:var(--neben); font-size:15.5px; max-width:62ch}

/* ---------- Platzplan ---------- */
.plan{position:relative; background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-flaeche); overflow:hidden}
.plan img{width:100%}
.plan-fuss{display:flex; flex-wrap:wrap; gap:var(--s3); padding:var(--s4); border-top:1px solid var(--linie); font-size:15px; color:var(--neben)}
/* Inline-Icons brauchen eine Groesse, sonst fuellen sie die Breite (E: riesiges
   Auto unter dem Platzplan auf /anreise/, Robert 24.09.2026). */
.plan-fuss span{display:inline-flex; align-items:center; gap:8px}
.plan-fuss svg{width:16px; height:16px; flex:none}

/* ---------- Bandbild ---------- */
.band{position:relative; background:var(--tiefe)}
.band img{width:100%; height:100%; object-fit:cover; opacity:.92}
.band-inhalt{position:absolute; inset:auto 0 0 0; padding:var(--s5); color:#fff; background:linear-gradient(to top,rgba(31,58,61,.85),rgba(31,58,61,0))}

/* ---------- Kontaktkarte ---------- */
.karte-flaeche{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-flaeche); padding:var(--s5)}
.karte-weich{background:var(--weich); border:1px solid var(--linie-weich); border-radius:var(--r-flaeche); padding:var(--s5)}
/* Harte Regel, die Gaeste nicht ueberlesen duerfen (z. B. keine Anreise nach 20 Uhr) */
.warnung{display:flex; gap:var(--s3); align-items:flex-start; background:#fff4e6; border:1px solid var(--sonne); border-left:4px solid var(--sonne-tief); border-radius:var(--r-flaeche); padding:var(--s4); color:var(--tinte); font-size:17px; line-height:1.45; max-width:68ch}
.warnung svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--sonne-tief)}
.zweispalt{display:grid; gap:var(--s5)}
@media (min-width:860px){ .zweispalt{grid-template-columns:1fr 1fr; gap:var(--s6)} .zweispalt-schmal{grid-template-columns:1.25fr .75fr} }

/* Klebrige Begleitkarten gehören nur ins zweispaltige Desktop-Raster. Auf
   dem Handy lagen sie sonst beim Scrollen über dem nachfolgenden Inhalt. */
@media (min-width:860px){
  .desktop-klebrig{position:sticky;top:var(--klebrig-oben,120px)}
}

/* ---------- Fliesstext ---------- */
.fliess{display:grid; gap:var(--s4); max-width:var(--lese)}
/* Rechtstexte enthalten lange Adressen und Paragrafenketten ohne Trennmoeglichkeit.
   Ohne das schob die Datenschutzseite das Handy um 181 px zur Seite. */
.fliess p,.fliess li,.fliess h2{overflow-wrap:anywhere; hyphens:auto}
.fliess p{color:#2b2b2b}
.fliess h2{margin-top:var(--s5)}
.fliess h3{margin-top:var(--s4)}
.fliess a{color:var(--gold-tief); text-decoration:underline; text-underline-offset:3px} /* Sonnenorange auf Weiss/Sand nur 1,9:1, WCAG verlangt 4,5:1 */
.fliess ul{display:grid; gap:8px; padding-left:1.1em; list-style:disc}
.fliess li{padding-left:4px}

/* ---------- Auszeichnungen vor der Fusszeile ---------- */
.auszeichnungen{margin-top:var(--s8);padding-block:var(--s7);background:linear-gradient(135deg,#f5f0e6 0%,#eef3eb 100%);border-block:1px solid var(--linie)}
.auszeichnungen-inner{display:grid;gap:var(--s5)}
.auszeichnungen-kopf{max-width:720px}
.auszeichnungen-kopf h2{margin-top:6px;font-size:clamp(26px,3.2vw,39px)}
.auszeichnungen-kopf>p:last-child{margin-top:12px;color:var(--neben);max-width:62ch}
.auszeichnungen-raster{display:grid;gap:var(--s3)}
.auszeichnung-karte{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:var(--s4);min-width:0;padding:var(--s4);background:rgba(255,255,255,.9);border:1px solid rgba(22,51,47,.13);border-radius:var(--r-flaeche);color:var(--tinte);text-decoration:none;box-shadow:0 12px 34px rgba(22,51,47,.07);transition:transform var(--mittel) var(--kurve),box-shadow var(--mittel) var(--kurve),border-color var(--mittel) var(--kurve)}
.auszeichnung-karte img{width:92px;height:92px;object-fit:contain}
.auszeichnung-karte>span:last-child{display:grid;gap:4px;min-width:0}
.auszeichnung-karte small{color:var(--neben);font-size:11px;line-height:1.35;text-transform:uppercase;letter-spacing:.055em}
.auszeichnung-karte strong{font-family:var(--schrift-display);font-size:19px;line-height:1.15}
.auszeichnung-karte em{color:var(--neben);font-size:13px;font-style:normal;line-height:1.4}
.adac-signet{display:grid;place-items:center;align-content:center;gap:8px;width:92px;min-height:82px;margin:auto}
.adac-logo{display:grid;place-items:center;width:62px;height:42px;border-radius:4px;background:#fc0;color:#111;font-family:Arial Black,Arial,sans-serif;font-size:18px;font-weight:900;line-height:1;letter-spacing:-1.2px}
.adac-sterne{display:flex;gap:1px;line-height:1}
.adac-sterne i{font-size:15px;font-style:normal;color:#fc0}
.adac-sterne .leer{color:#c5c5c5}
.pincamp-bewertung{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-block:2px;color:#4b4b4b;font-size:14px;line-height:1.25}
.pincamp-bewertung b{display:inline-grid;place-items:center;min-width:38px;height:28px;padding-inline:6px;border-radius:4px 4px 0 4px;background:#4b4b4b;color:#fff;font-size:17px;line-height:1}
.pincamp-bewertung>span:first-of-type{font-weight:800}
@media (min-width:760px){.auszeichnungen-raster{grid-template-columns:1fr 1fr}.auszeichnung-profil{grid-column:1/-1}}
@media (min-width:1120px){.auszeichnungen-inner{grid-template-columns:.8fr 1.7fr;align-items:center}.auszeichnungen-raster{grid-template-columns:repeat(3,1fr)}.auszeichnung-profil{grid-column:auto}.auszeichnung-karte{grid-template-columns:78px minmax(0,1fr);height:100%}.auszeichnung-karte img{width:78px;height:84px}.adac-signet{width:78px}}
@media (hover:hover) and (pointer:fine){.auszeichnung-karte:hover{transform:translateY(-3px);border-color:rgba(22,51,47,.28);box-shadow:0 18px 40px rgba(22,51,47,.12)}}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--tiefe); color:#e8e5df; padding-block:var(--s7) calc(var(--s5) + env(safe-area-inset-bottom))}
.fuss a{color:#fff; text-decoration:none}
.fuss h3{color:#fff; font-size:16px; margin-bottom:var(--s3)}
.fuss-raster{display:grid; gap:var(--s5)}
@media (min-width:760px){ .fuss-raster{grid-template-columns:1.25fr 1fr 1fr} }
.fuss ul{display:grid; gap:10px; font-size:15px}
.fuss-social{display:flex;gap:10px;margin-top:var(--s4)}
.fuss-social a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 13px 8px 9px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:14px;font-weight:700}
.fuss-social svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.fuss-social .social-punkt{fill:currentColor;stroke:none}
.fuss-social .social-facebook svg{fill:currentColor;stroke:none}
.fuss-unten{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); font-size:14px; color:#b9c3c2}
/* Eigene Zeile, immer linksbuendig: der schwimmende Ellie-Knopf (ellie.css,
   position:fixed unten rechts) ueberdeckt sonst ein rechtsbuendiges Badge am
   Seitenende (E-A... UI-Walkthrough 01.10.2026 vor Livegang entdeckt). */
.madeby{display:inline-flex; align-items:center; gap:8px; flex-basis:100%; opacity:.55; transition:opacity .2s}
.madeby span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; text-transform:uppercase; letter-spacing:.16em}
.madeby img{display:block; height:16px; width:auto}
@media (hover:hover) and (pointer:fine){
  .fuss a:hover{text-decoration:underline; text-underline-offset:3px}
  .fuss a.madeby:hover{opacity:1; text-decoration:none}
}
.fuss a.madeby:focus-visible{opacity:1; text-decoration:none}

/* ---------- Ruhige Bewegung ---------- */
.auftakt{animation:auftakt 520ms var(--kurve) both}
@keyframes auftakt{from{opacity:.001; transform:translateY(8px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .kachel:hover img{transform:none}
}

/* ================= Startseiten-Auftakte ================= */

/* --- A: Ans Wasser ---
   Kein Vollbild-Auftakt: das beste Foto ist 1024 px breit und wuerde auf grossen
   Schirmen weich und kontrastarm. Stattdessen ein gerahmter Auftakt in nativer
   Groesse, Worte auf hellem Grund. */
.auftakt-a{padding-block:var(--s6) 0}
.auftakt-a .oben{display:grid; gap:var(--s5); align-items:center}
.auftakt-a h1{max-width:12ch}
.auftakt-a .worte p{max-width:44ch; margin-top:var(--s4); color:var(--neben); font-size:18px}
.auftakt-a .traeger{border-radius:var(--r-flaeche); overflow:hidden; aspect-ratio:4/3; background:var(--linie)}
.auftakt-a .traeger figure{height:100%; margin:0}
.auftakt-a .traeger picture{display:block; height:100%}
.auftakt-a .traeger img{width:100%; height:100%; object-fit:cover}
.auftakt-a .suchblock{padding-block:var(--s5) 0}
.auftakt-a .marker{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s5); color:var(--neben); font-size:15px}
.auftakt-a .marker span{display:inline-flex; align-items:center; gap:8px}
.auftakt-a .marker svg{width:16px;height:16px;color:var(--akzent)}
@media (min-width:860px){
  .auftakt-a{padding-block:var(--s7) 0}
  .auftakt-a .oben{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:var(--s6)}
  .auftakt-a .traeger{aspect-ratio:5/4}
}

/* --- B: Erst suchen --- */
.auftakt-b{padding-block:var(--s6) var(--s7); border-bottom:1px solid var(--linie)}
.auftakt-b h1{max-width:15ch}
.auftakt-b .unterzeile{margin-top:var(--s3); max-width:52ch; color:var(--neben)}
.auftakt-b .suche{margin-top:var(--s5)}
.lagebericht{display:grid; gap:var(--s3); margin-top:var(--s5)}
@media (min-width:760px){ .lagebericht{grid-template-columns:repeat(3,1fr)} }
.lage-karte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-flaeche); padding:var(--s4); display:grid; gap:6px}
.lage-karte b{font-family:var(--schrift-display); font-size:22px; letter-spacing:-.02em}
.lage-karte span{color:var(--neben); font-size:15px}
.streifen{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; margin-top:var(--s5); border-radius:var(--r-flaeche); overflow:hidden}
.streifen figure{margin:0; aspect-ratio:1/1}
.streifen picture{display:block;height:100%}
.streifen img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){ .streifen{grid-auto-columns:42%; grid-auto-flow:column; overflow-x:auto; overscroll-behavior-inline:contain} }

/* --- C: Der Platz erzählt --- */
.auftakt-c{padding-block:var(--s8) var(--s6)}
.auftakt-c h1{font-size:clamp(34px,7.6vw,68px); max-width:11ch}
.auftakt-c .vorspann{margin-top:var(--s5); max-width:58ch; font-size:19px; line-height:1.55}
.auftakt-c .vorspann b{font-weight:600}
.bildband{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:var(--s3); margin-top:var(--s7); overflow-x:auto; overscroll-behavior-inline:contain}
.bildband figure{margin:0; aspect-ratio:4/3; border-radius:var(--r-flaeche); overflow:hidden}
.bildband picture{display:block;height:100%}
.bildband img{width:100%;height:100%;object-fit:cover}
.index-liste{border-top:1px solid var(--linie)}
.index-liste a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3) var(--s4); align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--linie); text-decoration:none; transition:padding-left var(--mittel) var(--kurve)}
.index-liste h3{grid-column:1; min-width:0; display:flex; align-items:center; gap:10px}
.index-liste h3 svg{width:20px;height:20px;color:var(--akzent);flex:none}
.index-liste .zahl{grid-column:2; grid-row:1; font-family:var(--schrift-display); font-size:19px; white-space:nowrap; font-variant-numeric:tabular-nums}
.index-liste p{grid-column:1 / -1; color:var(--neben); max-width:62ch; font-size:15.5px}
.index-liste .zusatz{grid-column:1 / -1; color:var(--neben); font-size:14px; display:flex; gap:var(--s4); flex-wrap:wrap}
/* Am Handy passen Titel und Preis nicht in eine Zeile: Preis rutscht darunter. */
@media (max-width:560px){
  .index-liste a{grid-template-columns:minmax(0,1fr)}
  .index-liste .zahl{grid-column:1; grid-row:auto; font-size:17px}
}
@media (hover:hover) and (pointer:fine){ .index-liste a:hover{padding-left:10px; background:linear-gradient(90deg,var(--weich),transparent 55%)} }

/* ---------- 6. Sanftes Auftauchen beim Scrollen ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-auftauchen]{opacity:0; transform:translateY(14px); filter:blur(3px)}
  [data-auftauchen].sichtbar{
    opacity:1; transform:none; filter:blur(0);
    transition:opacity 620ms var(--kurve), transform 620ms var(--kurve), filter 620ms var(--kurve);
    transition-delay:var(--verzug,0ms);
  }
}


/* ---------- Gemeinsamer Auftakt der Unterseiten ----------
   Damit sich keine Unterseite anders anfuehlt als die Startseite: Titel und
   Text links, gerahmtes Foto rechts, darunter das Schraffurband der Marke. */
.seitenkopf{padding-block:var(--s6) 0}
.seitenkopf-raster{display:grid; gap:var(--s5); align-items:center}
.seitenkopf .pfad{font-size:13.5px; color:var(--neben); margin-bottom:var(--s3)}
.seitenkopf .pfad a{color:var(--neben); text-decoration:none; border-bottom:1px solid var(--linie)}
.seitenkopf h1{font-size:clamp(32px,4.6vw,52px); letter-spacing:-.035em; line-height:1.04; max-width:15ch}
.seitenkopf .vorspann{margin-top:var(--s4); max-width:46ch; color:var(--neben); font-size:clamp(16px,1.5vw,18px)}
.seitenkopf-bilder{position:relative; min-height:340px}
.seitenkopf-bild-gross,.seitenkopf-bild-klein{
  position:absolute; overflow:hidden; border-radius:var(--r-flaeche); background:var(--sand-hell)
}
.seitenkopf-bild-gross{
  inset:0 0 auto auto; width:79%; aspect-ratio:4/3;
  box-shadow:0 30px 60px -40px rgba(34,31,26,.6)
}
.seitenkopf-bild-klein{
  left:0; bottom:0; width:46%; aspect-ratio:1/1; border:6px solid var(--karte);
  box-shadow:0 22px 44px -30px rgba(34,31,26,.7)
}
.seitenkopf-bilder.ohne-zweites .seitenkopf-bild-gross{inset:0; width:100%; aspect-ratio:auto}
.seitenkopf-bilder figure{height:100%; margin:0}
.seitenkopf-bilder picture{display:block; height:100%}
.seitenkopf-bilder img{width:100%; height:100%; object-fit:cover}
.seitenkopf-fuss{
  margin-top:var(--s6); border-block:6px solid transparent; border-image:var(--schraffur) 6 repeat;
  padding-block:var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  font-size:14.5px; color:var(--neben);
}
.seitenkopf-fuss span{display:inline-flex; align-items:center; gap:8px}
.seitenkopf-fuss svg{width:15px;height:15px;color:var(--sand)}
.seitenkopf-fuss b{color:var(--tinte); font-family:var(--schrift-display); letter-spacing:-.02em}
@media (min-width:900px){
  .seitenkopf{padding-block:var(--s7) 0}
  .seitenkopf-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s7)}
  .seitenkopf-bilder{min-height:500px}
}
@media (max-width:899px){
  .seitenkopf-bilder{min-height:0; aspect-ratio:1/1; margin-top:var(--s2)}
  .seitenkopf-bild-gross{width:78%}
  .seitenkopf-bild-klein{width:48%}
}

/* ---------- Bildergalerie ---------- */
.galerie{display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr)}
.galerie figure{margin:0; border-radius:var(--r-flaeche); overflow:hidden; background:var(--sand-hell)}
.galerie picture{display:block; height:100%}
.galerie img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform 420ms var(--kurve)}
.galerie figure:first-child{grid-column:1 / -1}
.galerie figure:first-child img{aspect-ratio:16/9}
@media (min-width:760px){
  .galerie{grid-template-columns:repeat(3,1fr)}
  .galerie figure:first-child{grid-column:1 / 3; grid-row:span 2}
  .galerie figure:first-child img{aspect-ratio:auto; height:100%}
}
@media (hover:hover) and (pointer:fine){ .galerie figure:hover img{transform:scale(1.03)} }

/* ---------- Häufige Fragen ---------- */
.fragengruppe{margin-top:var(--s7)}
.fragengruppe:first-of-type{margin-top:var(--s5)}
.fragengruppe > h2{
  font-size:clamp(20px,2.2vw,25px); padding-bottom:var(--s3);
  border-bottom:6px solid transparent; border-image:var(--schraffur) 6 repeat;
}
.fragen{margin-top:var(--s2)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; cursor:pointer; list-style:none;
  font-weight:600; font-size:17px; min-height:56px;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary svg{width:15px;height:15px;color:var(--sand);flex:none;
  transition:transform var(--mittel) var(--kurve)}
.frage[open] summary svg{transform:rotate(90deg)}
.frage[open] summary{color:var(--gold)}
.antwort{padding:0 0 var(--s5) 0; max-width:68ch}
.antwort p{color:var(--neben); font-size:16px}
@media (prefers-reduced-motion:no-preference){
  .frage[open] .antwort{animation:antwort-auf 240ms var(--kurve)}
  @keyframes antwort-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (hover:hover) and (pointer:fine){ .frage summary:hover{color:var(--gold)} }

/* ---------- Karte ----------
   Google-Maps-Rahmen, direkt eingebettet. Siehe Hinweis in abschnitte.js. */
.kartenfeld{border:1px solid var(--linie); border-radius:var(--r-flaeche); overflow:hidden; background:var(--sand-hell)}
.kartenfeld iframe{display:block; width:100%; border:0; max-height:70svh}
.karte-leinwand{position:relative; width:100%; max-height:70svh; background:var(--sand-hell); z-index:0}
.karte-ersatz{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gold-tief); font-weight:600}
.karte-aktiv .karte-ersatz{display:none}
.karte-leinwand .leaflet-control-zoom a{width:40px; height:40px; line-height:40px; font-size:22px}
.karte-nadel span{display:block; width:28px; height:28px; background:var(--sonne-tief); border:3px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 1px 4px rgba(0,0,0,.35)}
.karten-fuss{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); padding:var(--s3) var(--s4);
  border-top:1px solid var(--linie); background:var(--karte); font-size:13.5px; color:var(--neben)}
.karten-fuss a{color:var(--gold-tief)}
@media (max-width:640px){ .kartenfeld iframe, .karte-leinwand{height:360px !important} }

/* ---------- Klassenband: die gezeichneten Fahrzeug- und Zeltbilder ---------- */
.klassenband{display:grid; gap:var(--s3); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ .klassenband{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:980px){ .klassenband{grid-template-columns:repeat(4,minmax(0,1fr))} }
.klasse{
  display:grid; gap:6px; padding:var(--s4) var(--s3); background:var(--karte);
  border:1px solid var(--linie); border-radius:var(--r-flaeche);
  transition:border-color var(--mittel) var(--kurve), transform var(--mittel) var(--kurve);
}
.klasse svg{width:100%; height:42px; color:var(--tinte)}
.klasse b{font-size:15px; line-height:1.25}
.klasse span{font-size:13px; color:var(--neben)}
.klasse .stk{
  display:inline-block; margin-top:2px; font-size:12px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .klasse:hover{border-color:var(--sand); transform:translateY(-2px)}
  .klasse:hover svg{color:var(--gold)}
}

/* Die Silhouetten als ruhiges Muster, nicht als Deko-Teppich */
.silhouettenband{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s5);
  padding:var(--s5) 0; border-block:6px solid transparent; border-image:var(--schraffur) 6 repeat;
}
.silhouettenband svg{height:36px; width:auto; color:var(--sand); flex:none;
  transition:color var(--mittel) var(--kurve)}
.silhouettenband:hover svg{color:var(--linie-weich)}
@media (max-width:640px){ .silhouettenband{gap:var(--s4)} .silhouettenband svg{height:24px} }
.suche-fenster{font-size:13.5px; color:var(--neben); line-height:1.5; margin-top:calc(var(--s2) * -1)}

/* ---------- Gemeinsames Buchungs- und Erlebnisfenster ----------
   Die Website bleibt als Huelle stehen; Karte, Checkout und Rundgang fuellen
   den verbleibenden Raum. Diese Regeln gelten deshalb auf jeder Unterseite. */
.erlebnis-dialog{
  width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;
  background:var(--papier);color:var(--tinte)
}
.erlebnis-dialog::backdrop{background:rgba(26,26,26,.72)}
.erlebnis-rahmen{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.erlebnis-kopf{
  display:grid;grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s4);padding-top:max(var(--s3),env(safe-area-inset-top));
  border-bottom:1px solid var(--linie);background:var(--karte)
}
.erlebnis-einstieg>span{display:block;color:var(--akzent);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.erlebnis-kopf h2{font-size:clamp(20px,2.5vw,28px);outline:none}
.erlebnis-kopf p{margin-top:3px;color:var(--neben);font-size:13.5px}
.erlebnis-tabs{display:flex;gap:5px;padding:4px;border:1px solid var(--linie);border-radius:99px;background:var(--sand-weich)}
.erlebnis-tabs button{
  min-height:42px;padding:8px 14px;border:0;border-radius:99px;background:transparent;color:var(--neben);
  display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer
}
.erlebnis-tabs button[aria-selected="true"]{background:var(--aktion);color:#fff;box-shadow:0 4px 12px -8px rgba(26,26,26,.8)}
.erlebnis-tabs svg{width:15px;height:15px}
.erlebnis-zu{
  width:48px;height:48px;border:1px solid var(--linie);border-radius:99px;background:var(--karte);
  color:var(--tinte);display:grid;place-items:center;cursor:pointer
}
.erlebnis-zu svg{width:16px;height:16px}
.erlebnis-inhalt{position:relative;min-height:0;background:var(--sand-weich)}
.erlebnis-panel{position:absolute;inset:0}
.erlebnis-panel[hidden]{display:none}
.erlebnis-panel iframe{display:block;width:100%;height:100%;border:0;background:var(--karte)}
.erlebnis-rundgang,.erlebnis-rundgang iframe{background:#111}
.erlebnis-laedt{position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:var(--neben);background:var(--sand-weich)}
.erlebnis-rundgang .erlebnis-laedt{color:#fff;background:#111}
.erlebnis-laedt[hidden]{display:none}
body.erlebnis-offen{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .erlebnis-tabs button:not([aria-selected="true"]):hover,.erlebnis-zu:hover{background:var(--sand)}
}
@media (max-width:760px){
  .erlebnis-kopf{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);padding-inline:var(--s3)}
  .erlebnis-tabs{grid-column:1/-1;grid-row:2;width:100%;border-radius:var(--r-element)}
  .erlebnis-tabs button{flex:1;min-width:0;padding-inline:8px}
  .erlebnis-zu{grid-column:2;grid-row:1}
  .erlebnis-einstieg{grid-column:1;grid-row:1;min-width:0}
  .erlebnis-kopf h2{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .erlebnis-kopf p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-height:540px) and (orientation:landscape){
  .erlebnis-kopf p,.erlebnis-einstieg>span{display:none}
}
@media (max-height:540px) and (orientation:landscape) and (min-width:620px){
  .erlebnis-kopf{grid-template-columns:minmax(0,1fr) auto auto;padding-block:8px}
}

/* Sprachwahl DE · EN · FR · NL (ADR-0087). Steht nur da, wenn Sprachen aktiv sind. */
.sprachwahl{display:inline-flex; gap:2px; vertical-align:middle}
.sprachwahl a,.sprachwahl b{display:inline-block; min-width:28px; padding:2px 5px; text-align:center;
  font-size:12px; letter-spacing:.04em; border-radius:6px; text-decoration:none}
.sprachwahl b{color:var(--text, #1a1a1a); font-weight:700}
.schublade .sprachwahl{display:flex; gap:6px; margin-top:16px}
.schublade .sprachwahl a,.schublade .sprachwahl b{min-width:44px; min-height:44px; line-height:40px; font-size:15px;
  border:1px solid var(--sand, #e5e5e5)}