/* ===========================================================================
 * Linzer Escort - Stylesheet der Vorlage linzerescort (2026-10-28)
 *
 * Abgeleitet von chaletlinz („After Dark“): Nachtschwarz, das Pink des Hauses
 * (#ad147a, hell #ff2da1), Sora für den Text, die Körnung über allem, der
 * pinke Punkt der Wortmarke. Neu: die Plakatschrift ist Big Shoulders Display
 * (Bebas Neue hat keine Kleinbuchstaben - hier steht nichts in Versalien), die
 * Schriften liegen auf dem eigenen Server, und die Seite hat nur eine Aufgabe:
 * die Damen. Das eine Zeichen der Seite sind die Namen, groß wie auf einem
 * Plakat, unten in ihren Bildern.
 * Gliederung: Schriften · Grundlagen · Knopf · Kopfleiste · Kopf · Wand ·
 * Profil · Fotos · Leuchte · Leiste · Recht · Fuß · Altersabfrage · Bewegung
 * ======================================================================== */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bigshoulders-700.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bigshoulders-800.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/sora-300.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sora-400.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-600.woff2") format("woff2")}

:root{
  --ink:#fff; --bg:#050506; --surf:#0c0c10; --surf2:#131318;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.22);
  --mute:rgba(255,255,255,.66); --faint:rgba(255,255,255,.4);
  --pink:#ad147a; --pink2:#ff2da1;
  --disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --body:"Sora",system-ui,sans-serif;
  --pad:clamp(1rem,4.5vw,4rem);
  --breite:1360px;
  --weich:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Die Farbe steht auf html UND body (Safari färbt den Bereich hinter der Statusleiste vom Wurzelelement, wie bei Chalet nachgemessen). */
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;font-size:1rem;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b{font-weight:inherit}
:focus-visible{outline:2px solid var(--pink2);outline-offset:3px}
::selection{background:var(--pink);color:#fff}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:absolute;left:1rem;top:-10rem;z-index:300;padding:.6rem 1rem;background:var(--bg);color:var(--ink);border:1px solid var(--pink2)}
.sprung:focus{top:1rem}
main{display:block;padding:0 var(--pad)}
/* Körnung über allem - Textur statt Plakatfläche, wie bei Chalet, etwas leiser */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;
  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")}

/* ---------- Knopf ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.75rem 1.4rem;border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:.92rem;letter-spacing:.01em;line-height:1.2;text-align:center;transition:background .3s,border-color .3s,color .3s}
.btn svg{flex:none;width:17px;height:17px;fill:currentColor}
.btn--fill{background:var(--pink);color:#fff}
.btn--out{border:1px solid var(--line2);color:var(--ink)}
.btn__zusatz{font-weight:300;color:var(--mute);font-variant-numeric:tabular-nums}
@media(hover:hover){.btn--fill:hover{background:var(--pink2)}.btn--out:hover{border-color:var(--pink2)}}
.wege{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}

/* ---------- Kopfleiste ---------- */
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(1.4rem + env(safe-area-inset-top,0px)) calc(var(--pad) + env(safe-area-inset-right,0px)) 1.3rem calc(var(--pad) + env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse 48% 170% at 0% 0%,rgba(255,45,161,.17),rgba(173,20,122,.06) 45%,transparent 72%)}
.top::after{content:"";position:absolute;left:calc(var(--pad) + env(safe-area-inset-left,0px));right:calc(var(--pad) + env(safe-area-inset-right,0px));bottom:0;height:1px;
  background:linear-gradient(90deg,var(--pink2),rgba(255,45,161,.28) 38%,transparent)}
.marke{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,2.5vw,2.2rem);letter-spacing:.02em;line-height:1;text-shadow:0 0 26px rgba(255,45,161,.18)}
.marke b,.fuss__marke b{color:var(--pink2)}
.top__ort{font-size:clamp(.72rem,1vw,.8rem);font-weight:500;letter-spacing:.26em;color:var(--mute);white-space:nowrap}
@media(max-width:420px){.top__ort{letter-spacing:.14em}}
.top__alle{font-size:.85rem;font-weight:400;color:var(--mute);padding:.4rem 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.top__alle:hover{color:var(--ink);border-bottom-color:var(--pink2)}

/* ---------- Kopf der Galerie ---------- */
.kopf{display:grid;gap:1.4rem;max-width:var(--breite);margin:clamp(1.6rem,4.5vw,3.6rem) auto clamp(2rem,4.5vw,3.4rem);
  background:radial-gradient(ellipse 46% 80% at 18% 62%,rgba(173,20,122,.2),transparent 72%)}
@media(min-width:960px){.kopf{grid-template-columns:minmax(0,1fr) 25rem;align-items:end;gap:3.4rem}}
.kopf__claim{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;font-size:clamp(.82rem,1.1vw,.95rem);font-weight:500;letter-spacing:.12em;color:var(--pink2)}
.kopf__claim::before{content:"";flex:0 0 2.4rem;height:2px;background:var(--pink2)}
.kopf__titel{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,12vw,9.5rem);line-height:.86;letter-spacing:-.005em;text-wrap:balance}
.kopf__titel b{color:var(--pink2)}
.kopf__rechts{display:grid;gap:.85rem;padding:0 0 .6rem 1.1rem;border-left:2px solid var(--pink2)}
.kopf__text{font-size:clamp(1.02rem,1.45vw,1.18rem);line-height:1.6;color:var(--ink);text-wrap:pretty}
.kopf__zusatz{font-size:.9rem;line-height:1.6;color:var(--mute);text-wrap:pretty}
.leer{max-width:var(--breite);margin:1rem auto 5rem;color:var(--mute)}

/* ---------- Wand: die Galerie ---------- */
.wand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;max-width:var(--breite);margin:0 auto}
@media(min-width:760px){.wand{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}}
@media(min-width:1200px){.wand{grid-template-columns:repeat(4,minmax(0,1fr))}}
.karte{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--surf)}
.karte__bild{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.1s var(--weich),filter .5s}
.karte::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,6,0) 52%,rgba(5,5,6,.82) 100%)}
.karte__name{position:absolute;left:.85rem;right:.85rem;bottom:.7rem;z-index:2;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:.9;overflow-wrap:break-word}
/* der pinke Faden unter dem Namen: kurz, wächst beim Zeigen */
.karte__name::after{content:"";display:block;width:1.4rem;height:2px;margin-top:.45rem;background:var(--pink2);transition:width .5s var(--weich)}
.karte__initiale{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;
  font-size:clamp(5rem,16vw,9rem);color:var(--pink);background:radial-gradient(ellipse at 50% 30%,var(--surf2) 0%,var(--surf) 70%)}
.etikett{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-block;padding:.3rem .65rem;border-radius:999px;font-size:.72rem;font-weight:600;line-height:1.2;
  background:var(--pink);color:#fff}
.etikett--abwesend{background:rgba(5,5,6,.7);color:var(--mute);border:1px solid var(--line2)}
.karte--abwesend .karte__bild{filter:grayscale(.9) brightness(.6)}
.karte--abwesend .karte__name{color:var(--mute)}
.karte--abwesend .karte__name::after{background:var(--faint)}
@media(hover:hover){
  .karte:hover .karte__bild{transform:scale(1.04)}
  .karte:hover .karte__name::after{width:100%}
}
.karte:focus-visible{outline-offset:2px}
.karte:focus-visible .karte__name::after{width:100%}

/* ---------- Profil ---------- */
.profil{display:grid;gap:1.8rem;max-width:var(--breite);margin:.5rem auto 0}
@media(min-width:960px){.profil{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .profil__bild{position:sticky;top:1.5rem}}
.profil__foto{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--surf)}
.profil__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.profil__foto--leer{display:flex}
.profil__notiz{position:absolute;bottom:1rem;left:1rem;color:var(--mute);font-size:.9rem}
.profil--abwesend .profil__foto img{filter:grayscale(.8) brightness(.7)}
.profil__text{min-width:0}
.profil__text .etikett{position:static;margin-bottom:1rem}
.profil__name{font-family:var(--disp);font-weight:800;font-size:clamp(4rem,11vw,8.5rem);line-height:.84;letter-spacing:-.005em;overflow-wrap:break-word}
.profil__name::after{content:"";display:block;width:3rem;height:3px;margin-top:1.1rem;background:var(--pink2)}
.profil__beschreibung{margin-top:1.6rem;max-width:52ch;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.7;color:var(--mute)}
.profil__beschreibung p+p{margin-top:.8em}
.profil__beschreibung strong{color:var(--ink);font-weight:600}
.profil__beschreibung ul,.profil__beschreibung ol{margin:.6em 0;padding-left:1.2em}
.profil__beschreibung ul{list-style:disc}
.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem;max-width:36rem;margin-top:2rem}
.fakten div{padding:.75rem 0;border-top:1px solid var(--line)}
.fakten dt{font-size:.78rem;font-weight:400;color:var(--faint)}
.fakten dd{font-size:1rem;font-weight:400;overflow-wrap:anywhere}
.profil__adresse{margin-top:1rem;font-size:.9rem;color:var(--mute)}
.abschnitt__titel{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.92;margin-bottom:clamp(1.2rem,2.6vw,2rem)}
.hinweis{max-width:var(--breite);margin:clamp(3rem,6vw,4.5rem) auto 0;padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:4px;font-size:.84rem;line-height:1.6;color:var(--mute)}
.weitere{max-width:var(--breite);margin:clamp(3rem,6vw,4.5rem) auto 0}
.wand--klein .karte__name{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.fehlt{max-width:var(--breite);margin:clamp(1.5rem,5vw,4rem) auto}
.fehlt__titel{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,9vw,6.5rem);line-height:.88;max-width:14ch}
.fehlt__text{margin-top:1.2rem;max-width:44ch;color:var(--mute)}

/* ---------- Fotos ---------- */
.fotos{max-width:var(--breite);margin:clamp(3rem,6vw,5rem) auto 0}
.fotos__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
@media(min-width:760px){.fotos__raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}}
@media(min-width:1200px){.fotos__raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fotos__raster a{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--surf)}
.fotos__raster img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--weich)}
@media(hover:hover){.fotos__raster a:hover img{transform:scale(1.03)}}

/* ---------- Leuchte (Vollbild der Fotos) ---------- */
.leuchte{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(5,5,6,.97);color:var(--ink)}
.leuchte::backdrop{background:rgba(5,5,6,.9)}
.leuchte[open]{display:flex;align-items:center;justify-content:center}
.leuchte__bild{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:3.5rem 1rem}
.leuchte__bild img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px}
.leuchte__zahl{position:absolute;bottom:calc(1rem + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:.85rem;color:var(--mute)}
.leuchte__knopf{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line2);border-radius:50%;
  background:rgba(5,5,6,.6);color:var(--ink)}
.leuchte__knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leuchte__knopf--zu{top:calc(.8rem + env(safe-area-inset-top,0px));right:.8rem}
.leuchte__knopf--vor{left:.8rem;top:50%;transform:translateY(-50%)}
.leuchte__knopf--nach{right:.8rem;top:50%;transform:translateY(-50%)}
.leuchte--einzeln .leuchte__knopf--vor,.leuchte--einzeln .leuchte__knopf--nach{display:none}
@media(hover:hover){.leuchte__knopf:hover{border-color:var(--pink2)}}

/* ---------- Leiste: WhatsApp und Anruf am Telefon ---------- */
.leiste{display:none}
@media(max-width:759px){
  .seite--profil{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
  .leiste{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:.5rem;padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom,0px));
    background:var(--bg);border-top:1px solid var(--line)}
  /* deckend bis zur Unterkante samt sicherer Fläche: halbdurchsichtig schien der Text darunter durch (Feinschliff 2026-10-28) */
  .leiste .btn{flex:1;min-height:48px;padding-inline:.8rem}
}

/* ---------- Recht ---------- */
.recht{max-width:44rem;margin:clamp(1rem,4vw,2.5rem) auto 0}
.recht__titel{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,9vw,6rem);line-height:.88}
.recht__vorspann{margin:1.2rem 0 2rem;color:var(--mute)}
.recht h2{margin:2.4rem 0 .6rem;font-family:var(--disp);font-weight:700;font-size:1.6rem;line-height:1.05}
.recht h3{margin:1.3rem 0 .3rem;font-weight:600;font-size:.95rem}
.recht p{color:var(--mute)}
.recht p+p{margin-top:.7rem}
.recht a{color:var(--ink);border-bottom:1px solid var(--pink2)}

/* ---------- Fuß ---------- */
.fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;max-width:calc(var(--breite) + 2 * var(--pad));
  margin:clamp(4rem,8vw,6rem) auto 0;padding:1.6rem var(--pad) calc(2rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:.85rem;color:var(--mute)}
.fuss__marke{font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--ink)}
.fuss__marke span{margin-left:.5rem;font-family:var(--body);font-weight:300;font-size:.8rem;color:var(--faint)}
.fuss__recht{display:flex;gap:1.4rem}
.fuss__recht a{padding:.35rem 0}
.fuss__recht a:hover,.fuss__recht a[aria-current]{color:var(--ink)}

/* ---------- Altersabfrage (nur mit Skript, einmal je Sitzung; wie auf laufhaus-linz.at) ---------- */
.alter{display:none}
html.alter-offen body{overflow:hidden}
html.alter-offen .alter{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1.2rem var(--pad);
  background:radial-gradient(ellipse at 85% 10%,rgba(173,20,122,.32),transparent 55%),var(--bg)}
.alter__tafel{width:100%;max-width:32rem}
.alter__marke{font-family:var(--disp);font-weight:800;font-size:1.65rem;letter-spacing:.02em;line-height:1}
.alter__marke b,.alter__zahl b{color:var(--pink2)}
.alter__zahl{margin:1.6rem 0 1.2rem;font-family:var(--disp);font-weight:800;font-size:clamp(6rem,24vw,9rem);line-height:.82}
.alter__text{max-width:44ch;padding-left:1rem;border-left:2px solid var(--pink2);font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.65;color:var(--mute)}
.alter .btn{margin-top:1.8rem;min-width:8.5rem}
.alter__weg{margin-top:1.1rem;font-size:.85rem}
.alter__weg a{color:var(--mute);border-bottom:1px solid var(--line2);transition:color .25s,border-color .25s}
.alter__weg a:hover{color:var(--ink);border-bottom-color:var(--pink2)}

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