/* ===========================================================================
 * CHALET LINZ — "AFTER DARK"
 *
 * Wird NUR von static/page/header.phtml geladen, also ausschliesslich auf den
 * oeffentlichen Seiten. Der Adminbereich hat einen eigenen Kopfbereich und
 * sieht diese Datei nie. Schriften kommen per <link> aus dem Kopfbereich.
 * Radikaler Neuentwurf. Freistehende Vorschau, kein Bootstrap, keine Vorlage.
 * Farbschema des Bestands: Schwarz, #ad147a. Neu sind nur hellere Toene
 * derselben Farbe und ein warmes Gold fuer den VIP-Faden.
 * ======================================================================== */


:root{
  --ink:#fff; --bg:#050506; --surf:#0c0c10; --surf2:#131318;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.2);
  --mute:rgba(255,255,255,.56); --faint:rgba(255,255,255,.32);
  --pink:#ad147a; --pink2:#ff2da1; --gold:#e8c07d;
  --disp:'Bebas Neue',Impact,sans-serif; --body:'Sora',system-ui,sans-serif;
  --pad:clamp(1.2rem,5vw,4.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Die Farbe steht ausdruecklich auf BEIDEN, html und body. Safari ab 26
 * faerbt den Bereich hinter der Statusleiste mit dem Seitenhintergrund -
 * und liest ihn dabei vom Wurzelelement. Ohne eigene Angabe auf html
 * verlaesst man sich darauf, dass die Farbe vom body nach oben durchschlaegt,
 * und genau das ist dort nicht verlaesslich. */
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:#fff}

/* Koernung ueber allem — gibt der Seite Textur statt Plakat-Flaeche */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Typografie ---------- */
.d1{font-family:var(--disp);font-size:clamp(3.4rem,13vw,13rem);line-height:.82;text-transform:uppercase;letter-spacing:-.01em}
.d2{font-family:var(--disp);font-size:clamp(2.4rem,7.5vw,6.5rem);line-height:.86;text-transform:uppercase}
.d3{font-family:var(--disp);font-size:clamp(1.7rem,3.6vw,3rem);line-height:.95;text-transform:uppercase}
.eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--pink2)}
.lede{font-size:clamp(.98rem,1.5vw,1.18rem);color:var(--mute);max-width:52ch;font-weight:300}
.num{font-family:var(--disp);color:var(--faint);font-size:.9rem;letter-spacing:.1em}

/* ---------- Kopfleiste ---------- */
/* env(safe-area-inset-*) im Innenabstand: gedacht fuer Geraete, die eine
 * sichere Flaeche melden - eine vom Startbildschirm gestartete Web-App, und
 * im Querformat die Aussparung links und rechts. Im normalen Browserbetrieb
 * von Safari ist der Wert oben 0, am Geraet nachgemessen. Wo keine sichere
 * Flaeche gemeldet wird, rechnet env() zu null und es aendert sich nichts.
 * viewport-fit=cover steht in PageController. */
/* Auf dem Handy laeuft die Leiste MIT hinaus, statt oben stehen zu bleiben.
 *
 * Grund: Safari ab 26 legt die Seite unter die Statusleiste. Der Streifen
 * darueber ist Glas, durch das die scrollende Ebene sichtbar ist, waehrend
 * fest positionierte Elemente am unverdeckten Bereich ausgerichtet und dort
 * beschnitten werden. Eine oben stehende Leiste bekommt dadurch zwangslaeufig
 * einen Streifen ueber sich, durch den Seiteninhalt laeuft - und die Seite
 * kann dort nichts hineinzeichnen. Am Geraet durchgemessen: weder fest noch
 * absolut noch klebend positionierte Flaechen erscheinen dort, theme-color
 * wird seit Safari 26 ignoriert, und den Farbton nimmt Safari vom fertig
 * gezeichneten Inhalt.
 *
 * position:absolute laesst die Leiste am Seitenanfang stehen und beim
 * Scrollen mit hinauslaufen. Damit gibt es keine Leiste mehr, ueber der ein
 * Streifen stehen koennte. Ab Tabletbreite bleibt sie fest - dort gibt es
 * keine Statusleiste und das Verhalten ist unveraendert. */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;transition:.4s;mix-blend-mode:difference;
  padding:calc(1rem + env(safe-area-inset-top, 0px)) calc(var(--pad) + env(safe-area-inset-right, 0px)) 1rem calc(var(--pad) + env(safe-area-inset-left, 0px))}
.top.solid{mix-blend-mode:normal;background:rgba(5,5,6,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding-top:calc(.7rem + env(safe-area-inset-top, 0px));padding-bottom:.7rem}
@media(max-width:860px){
  .top{position:absolute}
  /* Beim Mitlaufen braucht es den verdichteten Zustand nicht - er waere
   * ohnehin schon aus dem Bild gescrollt, bevor er sich zeigen koennte. */
  .top.solid{background:none;backdrop-filter:none;border-bottom:0;
    padding-top:calc(1rem + env(safe-area-inset-top, 0px));padding-bottom:1rem}
}
.top__logo{font-family:var(--disp);font-size:1.5rem;letter-spacing:.16em}
.top__logo b{color:var(--pink2);font-weight:400}
.top__nav{display:flex;gap:2rem}
.top__nav a{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.72;transition:.25s;position:relative}
.top__nav a:hover,.top__nav a[aria-current]{opacity:1}
.top__nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--pink2)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line2);border-radius:50%;
  align-items:center;justify-content:center}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
.burger i::before{top:-5px}.burger i::after{top:5px}
@media(max-width:860px){.top__nav{display:none}.burger{display:flex}}

/* Plakette "24/7 geöffnet" neben dem Logo, auf jeder Seite mit Kopfleiste.
 * Baut auf .tag auf (siehe Damenliste). Die Regeln stehen auf .tag.top__open
 * statt nur .top__open: .tag steht weiter unten in dieser Datei und wuerde
 * Farbe, Rand, Abstand und Schriftgroesse sonst wieder ueberschreiben.
 * margin-right:auto haelt die Plakette am Logo und schiebt Menue bzw.
 * Burger nach rechts. .top traegt mix-blend-mode:difference: auf dem
 * dunklen Grund oben bleiben die Farben wie sie sind, ueber hellen
 * Bildstellen kehren sie sich um - genau wie Logo und Menue daneben. */
.tag.top__open{display:inline-flex;align-items:center;gap:.55rem;margin:0 auto 0 1.4rem;
  color:var(--ink);border-color:var(--line2);white-space:nowrap;line-height:1}
.top__open i{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--pink2)}
.top__open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink2);
  animation:adPuls 2.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes adPuls{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(3.2);opacity:0}}
@media(max-width:860px){.tag.top__open{margin-left:.9rem;padding:.4rem .7rem;font-size:.58rem;letter-spacing:.12em}}
@media(max-width:350px){.tag.top__open{margin-left:.6rem;padding:.36rem .55rem;letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){.top__open i::after{animation:none;opacity:0}}

/* ---------- Zurueck zum Seitenanfang ---------- */
/* Auf dem Handy laeuft die Kopfleiste beim Scrollen mit hinaus (siehe .top),
 * damit ist die Navigation dort nur noch ueber den Seitenanfang erreichbar.
 * Dieser Knopf holt einen zurueck - und der Ring zeigt die Leseposition,
 * was zugleich die Orientierung ersetzt, die die stehende Leiste gegeben hat.
 *
 * Unten rechts und damit im Anzeigebereich: oben kann die Seite auf iOS
 * nichts zeichnen, unten schon. Die sicheren Abstaende sind eingerechnet,
 * damit der Knopf nicht unter der Browserleiste klebt. */
.totop{position:fixed;z-index:150;
  right:calc(var(--pad) + env(safe-area-inset-right, 0px));
  bottom:calc(1.4rem + env(safe-area-inset-bottom, 0px));
  width:54px;height:54px;border:0;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(5,5,6,.72);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .35s,transform .35s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:rgba(5,5,6,.9)}
.totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:1.5}
.totop .totop__bahn{stroke:var(--line2)}
.totop .totop__fort{stroke:var(--pink2);stroke-linecap:round}
/* Pfeil aus zwei Kanten - kein zusaetzliches Zeichen, keine Schriftart. */
.totop i{display:block;width:11px;height:11px;margin-top:4px;
  border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink);
  transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}

/* Vollbild-Menue */
.sheet{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.97);backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:var(--pad);
  opacity:0;visibility:hidden;transition:.35s}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font-family:var(--disp);font-size:clamp(2.4rem,11vw,5rem);text-transform:uppercase;
  line-height:1;opacity:.55;transition:.25s;display:flex;align-items:baseline;gap:1rem}
.sheet a:hover{opacity:1;color:var(--pink2);transform:translateX(12px)}
.sheet a span{font-family:var(--body);font-size:.6rem;letter-spacing:.3em;color:var(--faint)}
.sheet__x{position:absolute;top:calc(1.4rem + env(safe-area-inset-top, 0px));right:var(--pad);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase}

/* ---------- Held ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.12);animation:heroCycle 24s infinite}
.hero__bg img:nth-child(1){animation-delay:0s}
.hero__bg img:nth-child(2){animation-delay:6s}
.hero__bg img:nth-child(3){animation-delay:12s}
.hero__bg img:nth-child(4){animation-delay:18s}
@keyframes heroCycle{0%{opacity:1;transform:scale(1.12)}25%{opacity:1}29%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* Oben deckend beginnend, dann schnell aufklarend: dieselbe Ueberlegung wie
 * bei .profil__img::after - die Zone unter der Kopfleiste bleibt dunkel,
 * damit Logo und Menueknopf lesbar sind und Safari fuer den Streifen hinter
 * der Statusleiste keine helle Farbe findet. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(75% 55% at 70% 20%,rgba(173,20,122,.4),transparent 60%),
             linear-gradient(180deg,var(--bg),rgba(5,5,6,.55) 110px,rgba(5,5,6,.2) 35%,rgba(5,5,6,.95) 85%,var(--bg))}
.hero__in{position:relative;z-index:2;padding:0 var(--pad) clamp(3rem,7vw,5rem);width:100%}
.hero .d1{margin:.6rem 0 1.2rem;text-shadow:0 10px 60px rgba(0,0,0,.6)}
.hero .d1 em{font-style:normal;color:var(--pink2);display:block}
.hero__row{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-end;justify-content:space-between}
.hero__facts{display:flex;gap:2.2rem;flex-wrap:wrap}
.hero__fact b{font-family:var(--disp);font-size:2rem;display:block;line-height:1}
.hero__fact span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.9rem;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:.28s;white-space:nowrap}
.btn--fill{background:var(--pink);color:#fff;box-shadow:0 10px 40px rgba(173,20,122,.4)}
.btn--fill:hover{background:var(--pink2);transform:translateY(-3px);box-shadow:0 18px 56px rgba(255,45,161,.5)}
.btn--out{border:1px solid var(--line2)}
.btn--out:hover{border-color:var(--pink2);background:rgba(255,255,255,.04);transform:translateY(-3px)}
.btn svg{width:17px;height:17px;fill:currentColor}

/* ---------- Laufband ---------- */
.ticker{border-block:1px solid var(--line);background:var(--surf);overflow:hidden;padding:.9rem 0}
.ticker__in{display:flex;gap:3rem;width:max-content;animation:slide 34s linear infinite}
.ticker span{font-family:var(--disp);font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:3rem;white-space:nowrap}
.ticker span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Abschnitt ---------- */
.sec{padding:clamp(4.5rem,11vw,10rem) var(--pad);position:relative}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;margin-bottom:clamp(2.2rem,5vw,4rem)}
.sec__head .lede{margin-top:.9rem}

/* ---------- Damen: versetztes Raster ---------- */
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.card{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--surf);
  aspect-ratio:3/4.1;isolation:isolate}
.card:nth-child(even){margin-top:clamp(0px,4vw,4rem)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.07)}
.card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(5,5,6,.9))}
.card__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem}
.card__name{font-family:var(--disp);font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:.95}
.card__meta{display:flex;justify-content:space-between;align-items:center;margin-top:.35rem}
.card__meta span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.card__go{width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;display:grid;
  place-items:center;transition:.3s}
.card:hover .card__go{background:var(--pink);border-color:var(--pink);transform:rotate(-45deg)}

/* ---------- Bar: grosse Zahl + Liste ---------- */
.bar{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr}
@media(min-width:900px){.bar{grid-template-columns:1.05fr .95fr;align-items:center}}
.price{font-family:var(--disp);font-size:clamp(7rem,22vw,20rem);line-height:.78;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.12));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.price sup{font-size:.28em;vertical-align:super;color:var(--pink2);-webkit-text-fill-color:var(--pink2)}
.drinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.1rem 1.6rem}
.drinks li{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.drinks li b{font-weight:500}
.drinks li i{font-style:normal;color:var(--pink2);font-size:.72rem;letter-spacing:.1em}

/* ---------- Services als Schlagzeilenliste ---------- */
.svc{border-top:1px solid var(--line)}
.svc__row{display:flex;align-items:center;gap:1.6rem;padding:clamp(1.1rem,2.4vw,2rem) 0;
  border-bottom:1px solid var(--line);position:relative;transition:.35s}
.svc__row:hover{padding-inline:1.2rem;background:linear-gradient(90deg,rgba(173,20,122,.14),transparent)}
.svc__row .num{flex:0 0 2.4rem}
.svc__row h3{font-family:var(--disp);font-size:clamp(1.5rem,4vw,2.9rem);line-height:1;
  text-transform:uppercase;flex:1;transition:.35s}
.svc__row:hover h3{color:var(--pink2)}
.svc__row .thumb{width:0;height:74px;border-radius:4px;overflow:hidden;transition:width .45s cubic-bezier(.2,.8,.2,1);flex:0 0 auto}
.svc__row:hover .thumb{width:104px}
.svc__row .thumb img{width:104px;height:74px;object-fit:contain;padding:.5rem;background:var(--surf2)}

/* ---------- Galerie-Band ---------- */
.rail{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
/* min-width:0 ist hier NICHT optional: Flex-Elemente haben min-width:auto,
 * und das loest sich zur Eigenbreite des Bildes auf (2048px). Solange die
 * Bilder noch nicht geladen sind, ist die Eigenbreite 0 und alles misst
 * korrekt - sobald sie geladen sind, sprengt jedes Bild den Streifen. */
.rail img{flex:0 0 clamp(210px,26vw,340px);min-width:0;width:clamp(210px,26vw,340px);
  aspect-ratio:3/4;object-fit:cover;border-radius:4px;
  scroll-snap-align:start;transition:.5s}
.rail img:hover{transform:scale(1.02)}

/* ---------- Kontaktband ---------- */
.cta{text-align:center;background:
  radial-gradient(60% 100% at 50% 0%,rgba(173,20,122,.26),transparent 70%);border-top:1px solid var(--line)}
.cta .d2{margin-bottom:1.6rem}
.foot{padding:2.5rem var(--pad) 3.5rem;border-top:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.74rem;color:var(--faint)}
.foot a:hover{color:var(--pink2)}

/* ---------- Einblenden ----------
 * Grundzustand ist SICHTBAR. Verborgen wird erst, wenn das Skript die Klasse
 * js-rv an <html> setzt - faellt JavaScript aus, steht die ganze Seite da,
 * statt leer zu bleiben. */
.rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
html.js-rv .rv:not(.in){opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero__bg img{animation:none;opacity:1}
  .hero__bg img:not(:first-child){display:none}.ticker__in{animation:none}}

/* ---------- Profil ---------- */
.profil{display:grid;grid-template-columns:1fr;min-height:70svh}
@media(min-width:900px){.profil{grid-template-columns:1.05fr .95fr}}
.profil__img{position:relative;min-height:56svh;overflow:hidden}
.profil__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Der obere Teil des Verlaufs ist bewusst kraeftig: er dunkelt die Zone ab,
 * die unter der Kopfleiste liegt. Das macht Logo und Menueknopf ueber hellen
 * Fotos lesbar - und haelt zugleich den Bereich dunkel, aus dem Safari die
 * Farbe fuer den Streifen hinter der Statusleiste nimmt. */
.profil__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg),rgba(5,5,6,.75) 90px,transparent 32%,rgba(5,5,6,.85))}
/* Unter 900px ist die Kachel bildschirmbreit und 56svh hoch. Ein Foto muss
 * dort mit object-fit:cover hineinpassen, und das schneidet ab, was nicht in
 * das Seitenverhaeltnis passt - bei einem Hochformat oben den Kopf. Auf dem
 * Telefon bestimmt deshalb das Bild die Hoehe: volle Breite, nichts
 * beschnitten. Die min-height muss dabei mit weg, sonst bleibt unter einem
 * flachen Foto leere Flaeche stehen. */
@media(max-width:899px){
  .profil{min-height:0}
  .profil__img{min-height:0}
  .profil__img img{position:static;display:block;width:100%;height:auto;object-fit:fill}
  /* Der Verlauf wurde fuer eine 56svh hohe Kachel gebaut: 90px dunkel oben,
   * dunkel auch unten. Sobald das Bild die Hoehe bestimmt, ist das zu viel -
   * die 90px sind dann ein grosser Teil des Fotos, und die Abdunklung unten
   * hat gar keine Aufgabe mehr, weil der Text auf eigenem Grund darunter
   * steht. Bleibt nur das, wofuer der Verlauf da ist: Logo und Menueknopf
   * ueber hellen Fotos lesbar halten. */
  .profil__img::after{background:linear-gradient(180deg,rgba(5,5,6,.8),rgba(5,5,6,.42) 104px,transparent 28%)}
}

.profil__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,6vw,5rem) var(--pad)}
.profil__txt .d2{margin:.4rem 0 1rem}
.profil__meta{display:flex;gap:2rem;flex-wrap:wrap;margin:1.8rem 0}
.profil__meta div b{font-family:var(--disp);font-size:1.7rem;display:block;line-height:1}
.profil__meta div span{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---------- Galerie ---------- */
.gal{column-count:2;column-gap:.7rem}
@media(min-width:640px){.gal{column-count:3}}
@media(min-width:1100px){.gal{column-count:4;column-gap:.9rem}}
.gal__item{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;width:100%;
  margin:0 0 .7rem;border-radius:4px;overflow:hidden;position:relative;cursor:zoom-in;background:var(--surf)}
.gal__item img{width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.gal__item:hover img{transform:scale(1.05)}
.gal__item:focus-visible{outline:2px solid var(--pink2);outline-offset:3px}

/* ---------- Lichtkasten ---------- */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(5,5,6,.97);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.lb.open{opacity:1;visibility:visible;transition:opacity .25s}
body.lb-on{overflow:hidden}
.lb__stage{flex:1;display:flex;align-items:center;justify-content:center;padding:3.6rem 1rem .6rem;min-height:0;touch-action:pan-y}
.lb__img{max-width:min(94vw,1300px);max-height:100%;object-fit:contain;border-radius:4px}
.lb__bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:1rem var(--pad)}
.lb__count{font-family:var(--disp);letter-spacing:.14em;color:var(--mute)}
.lb__btn{width:46px;height:46px;border:1px solid var(--line2);border-radius:50%;display:grid;
  place-items:center;transition:.25s;font-size:1.2rem}
.lb__btn:hover{border-color:var(--pink2);background:rgba(255,255,255,.06)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb__nav--p{left:1rem}.lb__nav--n{right:1rem}
.lb__strip{display:flex;gap:.4rem;overflow-x:auto;padding:.7rem var(--pad) 1.2rem;scrollbar-width:none}
.lb__strip::-webkit-scrollbar{display:none}
.lb__thumb{flex:0 0 auto;width:58px;height:58px;min-width:0;border-radius:4px;overflow:hidden;
  border:2px solid transparent;opacity:.45;transition:.2s}
.lb__thumb img{width:58px;height:58px;object-fit:cover}
.lb__thumb.cur{opacity:1;border-color:var(--pink2)}
@media(max-width:560px){.lb__nav{display:none}}

/* ===========================================================================
 * Bestandsseiten: Formulare, Listen, Reste der alten Vorlage
 * ======================================================================== */

/* Vorlage neutralisieren, wo sie der neuen Optik widerspricht */
.silent-separator{height:clamp(2rem,5vw,4rem)}
.silent-separator-sm{height:clamp(1rem,2.5vw,2rem)}
.container,.container-fluid{width:100%;max-width:none;padding:0;margin:0}
.row{display:block;margin:0}
[class*="col-"]{width:auto;padding:0;max-width:none;flex:none}
.text-fancy{font-family:var(--disp);color:var(--ink)}
.jb_preloader{display:none!important}
.slider_wrapper{display:none!important}
.animated,.wow{visibility:visible!important;opacity:1!important}

/* ---------- Formulare ---------- */
.form{display:grid;gap:.9rem;max-width:620px}
.form--wide{max-width:none;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.form__full{grid-column:1/-1}
.form label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.45rem}
.form input,.form textarea,.form select{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:3px;
  color:var(--ink);font:inherit;font-size:.92rem;font-weight:300;padding:.95rem 1.1rem;transition:.22s}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--pink2);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(173,20,122,.2)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}

/* ---------- Damenliste (Laufhaus) ---------- */
.list{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.list__row{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:840px){
  .list__row{grid-template-columns:1fr 1fr}
  .list__row:nth-child(even) .list__img{order:2}
}
.list__img{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--surf)}
.list__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.list__row:hover .list__img img{transform:scale(1.05)}
.list__name{font-family:var(--disp);font-size:clamp(2.4rem,6vw,4.4rem);line-height:.9;text-transform:uppercase}
.list__props{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0}
.tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .8rem;
  border:1px solid var(--line);border-radius:100px;color:var(--mute)}

/* ---------- Infoblock ---------- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.facts div{background:var(--bg);padding:1.5rem 1.4rem}
.facts b{display:block;font-family:var(--disp);font-size:1.5rem;margin-bottom:.3rem}
.facts span{font-size:.82rem;color:var(--mute);line-height:1.55}

/* ---------- Hinweiskasten ---------- */
.note{border-left:2px solid var(--pink);padding:.2rem 0 .2rem 1.3rem;color:var(--mute);font-size:.92rem}
.note b{color:var(--ink);font-weight:500}

/* ---------- Sprachwahl (Jobs) ---------- */
.langs{display:flex;gap:.35rem;flex-wrap:wrap}
.langs a{font-size:.7rem;font-weight:600;letter-spacing:.14em;padding:.5rem .85rem;border-radius:100px;
  border:1px solid var(--line);color:var(--mute);transition:.22s}
.langs a:hover{color:var(--ink);border-color:var(--line2)}
.langs a[aria-current]{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---------- Vorteilsliste (Jobs) ---------- */
.perks{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.perk{background:var(--bg);display:flex;gap:1.2rem;align-items:flex-start;padding:1.15rem 0}
.perk .num{flex:0 0 2.2rem;padding-top:.15rem}
.perk p{color:var(--mute);font-size:.94rem;margin:0}

/* ===========================================================================
 * Grundabstaende
 *
 * Die Kopfleiste ist fest positioniert und wuerde sonst den Anfang jeder
 * Seite verdecken. Der Koerper bekommt deshalb oben Platz - und der Held
 * zieht sich mit negativem Rand wieder darunter, weil er bewusst unter der
 * transparenten Leiste beginnen soll.
 *
 * Seiten ohne eigene .sec-Struktur (Impressum, Datenschutz, 404) tragen ihre
 * Inhalte in nackten .container-Elementen. Die Neutralisierung weiter oben
 * nimmt denen jeden Abstand; hier kommt der Seitenabstand zurueck.
 * ======================================================================== */

:root{ --topH: 78px; }
body.ad{ padding-top: calc(var(--topH) + env(safe-area-inset-top, 0px)); }
body.ad .hero{ margin-top: calc((var(--topH) + env(safe-area-inset-top, 0px)) * -1); }

body.ad > .container,
body.ad > section.container,
body.ad > div.container{ padding-inline: var(--pad); }

/* Nackte Inhaltsseiten lesbar halten */
body.ad > .container h1,
body.ad > section.container h1{ font-family:var(--disp); font-size:clamp(2rem,5vw,3.4rem);
  text-transform:uppercase; margin:clamp(2rem,5vw,3.5rem) 0 1rem }
body.ad > .container h2,
body.ad > section.container h2{ font-family:var(--disp); font-size:clamp(1.4rem,3vw,2rem);
  text-transform:uppercase; margin:2rem 0 .6rem }
body.ad > .container h3,
body.ad > section.container h3{ font-size:1rem; font-weight:600; margin:1.4rem 0 .4rem }
body.ad > .container p,
body.ad > section.container p{ max-width:76ch; margin-bottom:.9rem }
body.ad > .container a,
body.ad > section.container a{ color:var(--pink2) }

/* Der obere Aussenabstand der ersten Ueberschrift faellt mit dem des
 * Containers zusammen und wandert nach aussen - die Ueberschrift rutscht
 * dadurch unter die feste Kopfleiste. Deshalb Innenabstand statt Aussenabstand
 * am Container, und der erste Kindknoten beginnt bei null. */
body.ad > .container:first-of-type,
body.ad > section.container:first-of-type{ padding-top: clamp(1.5rem, 4vw, 3rem) }
body.ad > .container > :first-child,
body.ad > section.container > :first-child{ margin-top: 0 }

/* Seiten ohne Navigation (Kundenchat, Demo, Toy) brauchen auch keinen
 * Platz fuer die Kopfleiste - wohl aber fuer die Statusleiste: seit die
 * viewport-Angabe viewport-fit=cover enthaelt, reicht die Seite bis an die
 * Oberkante des Bildschirms, und ohne Kopfleiste gaebe es hier nichts, was
 * den Streifen fuellt. Der Kundenchat ist davon unberuehrt, er liegt auf
 * dem Handy fest positioniert (siehe page/chat/index.phtml, max-width:640px). */
body.ad--nonav{ padding-top: env(safe-area-inset-top, 0px) }

/* ===========================================================================
 * Klassenkollisionen mit Bootstrap und der alten Vorlage
 *
 * Drei Namen, die es dort schon gibt und die sonst durchschlagen:
 *   .btn  — Bootstrap setzt color:#212529. Ohne eigene Farbe wird jeder
 *           Umriss-Knopf dunkelgrau auf Schwarz: gemessener Kontrast 1,32:1.
 *   .bar  — in template/css/style.css ein 3x3px grosser, absolut
 *           positionierter, animierter Equalizer-Balken. Ohne Ruecknahme
 *           faellt der Bar-Abschnitt aus dem Fluss und der naechste Abschnitt
 *           legt sich darueber.
 *   .card — Bootstrap gibt eine helle 1px-Kante mit.
 * ======================================================================== */

.ad .btn{ color: var(--ink) }
.ad .btn--fill{ color:#fff }
.ad .btn--fill:hover,.ad .btn--fill:focus{ color:#fff }
.ad .btn--out:hover,.ad .btn--out:focus{ color: var(--ink) }

.ad .bar{
  position: static; width: auto; height: auto;
  top: auto; right: auto; bottom: auto; left: auto;
  background: none; animation: none; border: 0; border-radius: 0;
}
.ad .bar::before,.ad .bar::after{ content: none }

.ad .card{ border: 0 }