/* Artisan & Firn — Konzeptarbeit von VALO Studio, 31.07.2026 (überarbeitet)
   Eigene Designsprache: hell, großzügig, Rosé als Kommunikationsfarbe.
   KEIN klassischer Header: senkrechte Wortmarke am linken Rand, Menü als
   Vollbild-Overlay, Fortschrittslinie oben. Jung, feminin, teuer. */

:root{
  --bg:#FBF8F7;
  --bg-2:#F3EDEC;
  --ink:#171314;
  --ink-2:#5C5254;
  --dim:#8E8386;
  /* Neonpink-Familie (Jan, 31.07.2026) — ersetzt Rosé auf der ganzen Seite */
  --pink:#FF008C;        /* Signalfarbe, extrem: Hero-Schrift, Vollflächen, Knopffüllung */
  --rose:#FF008C;        /* Alias, damit alte Regeln mitziehen */
  --rose-tief:#D1006B;   /* Tiefstufe für Text auf Hellem — 5,1:1 */
  --rose-hell:#FFEAF3;   /* helle Fläche im selben Farbton */
  --line:#E6DEDD;
  --px:clamp(1.25rem,5vw,5.5rem);
  --rand:clamp(2.6rem,5vw,4.4rem); /* Platz für die senkrechte Wortmarke */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Space Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-weight:300;font-size:1.02rem;line-height:1.75;-webkit-font-smoothing:antialiased;
  padding-left:var(--rand)
}
img{display:block;width:100%;height:auto}
a{color:inherit}

/* Fortschrittslinie statt Kopfleiste */
.fortschritt{position:fixed;top:0;left:0;height:3px;width:0;background:var(--pink);z-index:60}

/* Senkrechte Wortmarke am linken Rand */
.spalte{
  position:fixed;top:0;left:0;bottom:0;width:var(--rand);z-index:50;
  border-right:1px solid var(--line);background:var(--bg);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:1.2rem 0
}
.spalte .wort{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.86rem;letter-spacing:.42em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap
}
.spalte .wort .amp{color:var(--rose-tief)}
.spalte.ueber-bild{background:transparent;border-right-color:rgba(255,255,255,.22);color:var(--pink)}
.spalte.ueber-bild .wort .amp{color:var(--pink)}
.spalte.ueber-bild .punkt{background:var(--pink)}
.spalte .punkt{width:7px;height:7px;border-radius:50%;background:var(--rose)}

/* Menü-Knopf oben rechts + Vollbild-Overlay */
.menue-knopf{
  position:fixed;top:1.1rem;right:clamp(1rem,4vw,3rem);z-index:55;
  border:1px solid var(--ink);background:rgba(251,248,247,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.7rem 1.3rem;font:inherit;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;cursor:pointer;border-radius:999px
}
.menue-knopf:hover{background:var(--pink);border-color:var(--pink);color:#171314}
.overlay{
  position:fixed;inset:0;z-index:70;background:var(--rose-hell);
  display:none;padding:clamp(2rem,8vh,6rem) clamp(1.5rem,8vw,7rem);
  flex-direction:column;justify-content:center;gap:.4rem
}
.overlay.auf{display:flex}
.overlay a{
  text-decoration:none;font-size:clamp(2rem,7vw,4.6rem);font-weight:200;
  line-height:1.25;color:var(--ink);width:max-content;position:relative
}
.overlay a::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:2px;background:var(--rose-tief);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.overlay a:hover::after{transform:scaleX(1)}
.overlay .zu{position:absolute;top:1.4rem;right:clamp(1.5rem,6vw,4rem);background:none;border:0;font:inherit;font-size:2rem;cursor:pointer;color:var(--ink);line-height:1}
.overlay .fuss-info{margin-top:2.5rem;font-size:.86rem;color:var(--ink-2);max-width:34ch}

.pad{padding:clamp(3.5rem,9vh,7rem) var(--px)}
.pad-t0{padding-top:0}

h1,h2,h3{font-weight:200;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.6vw,6.2rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.3;font-weight:300}
.gross{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.6;color:var(--ink-2);max-width:44ch}
.klein{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.klein.rose{color:var(--rose-tief)}
p{max-width:62ch;color:var(--ink-2)}
p+p{margin-top:1rem}

/* Auftakt: Bild sofort, Schrift darüber */
.auftakt{position:relative;min-height:clamp(26rem,86vh,52rem);display:grid;align-items:end;overflow:hidden;
  margin-left:calc(-1 * var(--rand));width:calc(100% + var(--rand))}
.auftakt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auftakt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,15,0) 26%,rgba(18,14,15,.55) 58%,rgba(18,14,15,.82))}
.auftakt .worte{position:relative;z-index:2;padding:clamp(1.5rem,5vw,4rem);padding-left:calc(var(--rand) + clamp(1.5rem,5vw,4rem));color:#fff}
.auftakt .worte h1{color:var(--pink);font-weight:300;letter-spacing:-.02em}
/* Untertext und Vorzeile stehen NICHT in Pink: als kleine Schrift käme
   Pink auf dem Träger nur auf 4,2:1 und fiele unter AA. Pink bleibt der
   Schlagzeile vorbehalten, die als große Schrift 3:1 genügt. */
.auftakt .worte .gross{color:#F4EFEF;margin-top:1rem;max-width:50ch}
.auftakt .eyebrow{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:#FFC8E0;margin-bottom:1.1rem;font-weight:500}

.bildbreit{aspect-ratio:21/9;object-fit:cover}
@media(max-width:48rem){.bildbreit{aspect-ratio:4/3}}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4.5vw,4.5rem);align-items:center}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2.2rem)}
@media(max-width:52rem){.zwei,.drei{grid-template-columns:1fr}}

.werke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:64rem){.werke{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.werke{grid-template-columns:1fr}}
.werk{text-decoration:none;display:block}
.werk img{aspect-ratio:4/5;object-fit:cover}
.werk .meta{padding-top:.9rem;display:flex;flex-direction:column;gap:.2rem}
.werk .titel{font-size:1.02rem;color:var(--ink)}
.werk .kuenstler{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.werk .preis{font-size:.86rem;color:var(--rose-tief)}
.werk:hover img{outline:2px solid var(--rose);outline-offset:5px}

.knopf{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:.85rem 1.9rem;text-decoration:none;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.knopf:hover{background:var(--ink);color:var(--bg)}
.knopf.rose{background:var(--pink);border-color:var(--pink);color:#171314;font-weight:500}
.knopf.rose:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.streifen{background:var(--rose-hell);display:grid;grid-template-columns:repeat(4,1fr)}
.streifen div{padding:1.8rem var(--px);border-left:1px solid rgba(209,0,107,.16)}
.streifen div:first-child{border-left:0}
.streifen b{display:block;font-size:1.7rem;font-weight:200;color:var(--rose-tief)}
@media(max-width:52rem){.streifen{grid-template-columns:1fr 1fr}.streifen div{padding:1.3rem var(--px)}}

.fuss{background:var(--bg-2);padding:clamp(3rem,8vh,5rem) var(--px);margin-top:clamp(3rem,8vh,5rem)}
.fuss .drei{gap:2rem}
.fuss a{color:var(--rose-tief);text-decoration:none}
.fuss a:hover{color:var(--ink)}
.fuss .marke-gross{font-size:clamp(2rem,8vw,5.6rem);line-height:1;letter-spacing:.12em;text-transform:uppercase;margin-top:2.4rem;color:var(--rose-tief);font-weight:200}

.hinweis{font-size:.8rem;color:var(--dim);max-width:62ch;margin-top:1rem}
.konzept-hinweis{background:var(--ink);color:var(--bg);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.6rem var(--px);display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.konzept-hinweis a{color:var(--rose)}

@media(max-width:44rem){
  body{padding-left:0}
  .spalte{position:static;width:auto;height:auto;flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:.9rem var(--px)}
  .spalte .wort{writing-mode:horizontal-tb;transform:none}
  .menue-knopf{top:auto;position:fixed;bottom:1rem;right:1rem}
}
@media(prefers-reduced-motion:reduce){.overlay a::after,.werk img{transition:none}}


/* ===== Weniger generisch (Jan, 31.07.2026) =====
   Zentrierter Auftakt und zentrierte Sektionsköpfe, Überlappungen,
   gekippte Elemente, kreisrunde Bildausschnitte, Laufband. */

.auftakt{align-items:end;text-align:center}
.auftakt .worte{padding-left:calc(var(--rand) + clamp(1.5rem,5vw,4rem));padding-right:clamp(1.5rem,5vw,4rem);
  padding-bottom:clamp(2.6rem,7vh,5rem);max-width:none;margin:0 auto}
.auftakt .worte .gross{margin-left:auto;margin-right:auto;max-width:52ch}
.auftakt .worte h1{font-weight:500;letter-spacing:-.035em;line-height:.94}
.auftakt::after{background:linear-gradient(180deg,rgba(18,14,15,.18) 0%,rgba(18,14,15,.10) 34%,rgba(18,14,15,.62) 62%,rgba(18,14,15,.92) 100%)}

/* --- Raumtiefe im Auftakt (31.07.2026) ---------------------------------
   Das Bild liegt hinten und bewegt sich am wenigsten, die Überschrift
   liegt vorn und bewegt sich am meisten. Der Zeiger verschiebt die Ebenen
   gegeneinander — dadurch entsteht Tiefe ohne eine einzige 3D-Bibliothek. */
.auftakt{perspective:900px;perspective-origin:50% 55%}
/* Bild bewusst größer als der Rahmen, damit die Verschiebung keine Kante freilegt */
.auftakt img{inset:-6%;width:112%;height:112%;transition:transform .6s cubic-bezier(.16,.8,.3,1);will-change:transform}
.auftakt .worte{transform-style:preserve-3d}
.auftakt .worte > *{transition:transform .55s cubic-bezier(.16,.8,.3,1);will-change:transform}

/* Ein Lichtsaum in Neonpink legt sich hinter die Schrift und pulsiert langsam */
.lichtsaum{position:absolute;z-index:1;left:50%;bottom:-14%;width:min(150vw,1500px);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,0,140,.30) 0%,rgba(255,0,140,.10) 42%,transparent 70%);
  animation:atmen 9s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.07)}}

/* Die Überschrift kommt zeilenweise aus ihrer Blende */
.auftakt h1 .zeile{display:block;overflow:hidden;padding-bottom:.04em}
.auftakt h1 .zeile > span{display:block;transform:translateY(104%);
  animation:zeile-auf 1.1s cubic-bezier(.16,.85,.24,1) forwards}
.auftakt h1 .zeile:nth-child(2) > span{animation-delay:.13s}
@keyframes zeile-auf{to{transform:none}}

/* --- Lesbarkeit im Auftakt (03.08.2026) --------------------------------
   Befund: Der Text stand frei auf dem Foto und war je nach Bildstelle
   schlecht zu lesen. Ein Verlauf allein reicht nicht, weil er sich nicht
   danach richtet, was im Bild gerade passiert. Deshalb ein eigener
   Träger: dunkle Fläche mit weicher Kante, die den Text immer trägt —
   unabhängig vom Motiv, auch wenn das Bild später getauscht wird. */
.auftakt .worte{
  background:
    radial-gradient(120% 130% at 50% 100%,
      rgba(12,9,10,.86) 0%, rgba(12,9,10,.72) 42%, rgba(12,9,10,.28) 72%, transparent 100%);
  padding-top:clamp(2.4rem,7vh,5rem);
  padding-bottom:clamp(2rem,5vh,3.6rem)}
@supports (backdrop-filter:blur(2px)){
  .auftakt .worte{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}
/* Schrift bekommt zusätzlich einen weichen Schattensaum — das kostet
   nichts und rettet auch die Stellen, an denen das Bild sehr hell ist. */
.auftakt .worte h1{text-shadow:0 2px 26px rgba(12,9,10,.55)}
.auftakt .worte .gross,.auftakt .eyebrow{text-shadow:0 1px 14px rgba(12,9,10,.7)}

/* --- Künstlernamen im Auftakt (03.08.2026) -----------------------------
   Vorher liefen die Namen als Laufband unter dem Bild. Jetzt stehen sie
   direkt im Auftakt: Wer sich für Kunst interessiert, sucht zuerst nach
   Namen — und ein stehender Name liest sich seriöser als ein fahrender. */
.namen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 0;
  margin-top:clamp(1.4rem,3.5vh,2.2rem);max-width:none}
.namen span{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.9);padding:0 1rem;position:relative;white-space:nowrap}
.namen span+span::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;
  width:1px;background:rgba(255,0,140,.55)}
@media(max-width:44rem){
  .namen span:nth-child(n+5){display:none}
}

/* --- Einheitliche Bildgradation (03.08.2026) ---------------------------
   Befund: Die Motive stammen aus verschiedenen Lichtsituationen und
   wirkten dadurch zusammengesucht statt kuratiert. Eine gemeinsame,
   sehr zurückhaltende Gradation über ALLE Bilder zieht sie auf einen
   Ton: minimal aufgehellt, leicht entsättigt, Kontrast etwas geöffnet.
   Bewusst schwach dosiert — überzogene Filter sehen künstlich aus. */
main img{filter:brightness(1.045) saturate(.9) contrast(.97)}

/* Werke stehen im Raum: leichte Kippung zum Zeiger, Bild hebt sich ab */
.werke{perspective:1200px}
.werk{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,.8,.3,1)}
.werk img{transition:transform .5s cubic-bezier(.16,.8,.3,1),outline-color .3s}
.werk:hover img{transform:translateZ(38px) scale(1.02)}

@media(prefers-reduced-motion:reduce){
  .auftakt img,.auftakt .worte > *,.werk,.werk img{transition:none;transform:none!important}
  .auftakt img{transform:scale(1.04)!important}
  .lichtsaum{animation:none;opacity:.8}
  .auftakt h1 .zeile > span{animation:none;transform:none}
}

.kopfzeile{text-align:center;max-width:24ch;margin:0 auto clamp(2rem,5vh,3.4rem)}
.kopfzeile .klein{display:block;margin-bottom:.9rem}
.kopfzeile h2{margin:0 auto}

/* Laufband mit Künstlernamen */
.laufband{overflow:hidden;border-top:2px solid var(--pink);border-bottom:2px solid var(--pink);
  background:var(--bg);padding:.85rem 0;
  margin-left:calc(-1 * var(--rand));width:calc(100% + var(--rand))}
.laufband .spur{display:flex;gap:2.6rem;width:max-content;animation:ziehen 34s linear infinite}
.laufband span{font-size:clamp(1.1rem,2.6vw,2rem);font-weight:500;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--pink);white-space:nowrap;display:flex;gap:2.6rem;align-items:center}
.laufband span::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--ink);flex:none}
@keyframes ziehen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.laufband .spur{animation:none}}

/* Vollflächen-Sektion in Neonpink */
.knall{background:var(--pink);color:var(--ink);text-align:center;
  margin-left:calc(-1 * var(--rand));width:calc(100% + var(--rand));
  padding:clamp(4rem,12vh,8rem) clamp(1.5rem,6vw,6rem)}
.knall h2{color:var(--ink);font-weight:500;letter-spacing:-.03em;max-width:18ch;margin:0 auto}
.knall p{color:rgba(23,19,20,.82);max-width:48ch;margin:1.4rem auto 0}
.knall .klein{color:rgba(23,19,20,.66)}
.knall .knopf{border-color:var(--ink);color:var(--ink);margin-top:2.2rem}
.knall .knopf:hover{background:var(--ink);color:var(--pink)}

/* Überlappung und Kippung */
.versatz{position:relative}
.versatz .oben{position:relative;z-index:2;margin-top:clamp(-5rem,-7vw,-2.5rem)}

/* --- Leerraum im ersten Drittel geschlossen (03.08.2026) ---------------
   Befund: Zwischen Kennzahlenband und der Ausstellungssektion klaffte
   eine große leere Fläche. Ursache war die Kombination aus voller
   Sektionspolsterung oben und einer schmalen, zentrierten Kopfzeile,
   die links und rechts nichts trug.
   Lösung: Die Ausstellungssektion rückt direkt an das Band heran, und
   die Kopfzeile steht nicht mehr allein über dem Inhalt, sondern in
   einer Zeile mit der Laufzeitangabe — der Raum wird genutzt statt
   nur verkleinert. */
.versatz{padding-top:clamp(1.8rem,4.5vh,3rem)}
.versatz .kopfzeile{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem 2.5rem;
  flex-wrap:wrap;text-align:left;max-width:none;
  margin:0 0 clamp(1.4rem,3.5vh,2.4rem);
  padding-bottom:clamp(1rem,2.5vh,1.6rem);border-bottom:1px solid var(--line)}
.versatz .kopfzeile h2{margin:0;flex:1 1 12ch}
.versatz .kopfzeile .klein{margin:0;flex:0 0 auto;align-self:center}
@media(max-width:44rem){
  .versatz .kopfzeile{flex-direction:column;align-items:flex-start;gap:.7rem}
}
.kippe-l{transform:rotate(-2.4deg)}
.kippe-r{transform:rotate(1.8deg)}
.kippe-l:hover,.kippe-r:hover{transform:rotate(0deg)}
.kippe-l,.kippe-r{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.kippe-l,.kippe-r{transition:none}}

/* Kreisrunde Bildausschnitte */
.rund{border-radius:50%;aspect-ratio:1/1;object-fit:cover}
.rund-rahmen{border-radius:50%;overflow:hidden;aspect-ratio:1/1;position:relative}
.werke .werk:nth-child(2) img{border-radius:50%;aspect-ratio:1/1}

/* Zahlenband runder und lauter */
.streifen{border-radius:clamp(1.5rem,4vw,3rem);margin:0 var(--px);overflow:hidden}
.streifen b{font-weight:500}

@media(max-width:52rem){
  .versatz .oben{margin-top:1.5rem}
  .kippe-l,.kippe-r{transform:none}
}


/* ===== Schwarze Träger für Text auf hellem Grund (Jan, 31.07.2026) =====
   Pink auf Papierweiß ist grenzwertig lesbar. Alle Stellen, an denen die
   Signalfarbe als Text auftritt, sitzen deshalb auf schwarzen Kacheln,
   Bändern oder Pillen. Auf Schwarz erreicht #FF008C 4,9:1. */

/* Sektions-Label als schwarze Pille */
.kopfzeile .klein{
  display:inline-block;background:var(--ink);color:var(--pink);
  padding:.55rem 1.3rem;border-radius:999px;margin-bottom:1.2rem;
  letter-spacing:.26em;font-weight:500
}
.klein.rose{
  display:inline-block;background:var(--ink);color:var(--pink);
  padding:.5rem 1.1rem;border-radius:999px;letter-spacing:.24em;font-weight:500
}

/* Werke: Beschriftung auf schwarzer Kachel unter dem Bild */
.werk .meta{
  background:var(--ink);color:var(--bg);padding:1.1rem 1.2rem 1.2rem;
  gap:.3rem;border-radius:0 0 14px 14px
}
.werk img{border-radius:14px 14px 0 0}
.werke .werk:nth-child(2) img{border-radius:50% 50% 14px 14px}
.werk .titel{color:var(--bg);font-weight:400}
.werk .kuenstler{color:rgba(251,248,247,.62)}
.werk .preis{color:var(--pink);font-weight:500}
.werk:hover img{outline:none}
.werk:hover .meta{background:var(--pink);color:var(--ink)}
.werk:hover .titel{color:var(--ink)}
.werk:hover .kuenstler{color:rgba(23,19,20,.66)}
.werk:hover .preis{color:var(--ink)}

/* Zahlenband auf Schwarz statt auf Rosé */
.streifen{background:var(--ink)}
.streifen div{border-left:1px solid rgba(251,248,247,.14)}
.streifen b{color:var(--pink);font-weight:500}
.streifen .klein{color:rgba(251,248,247,.6)}

/* Laufband auf Schwarz */
.laufband{background:var(--ink);border-color:var(--ink)}
.laufband span::after{background:var(--pink);opacity:.55}

/* Öffnungszeiten- und Adressblock als schwarze Kachel */
.datenkachel{
  background:var(--ink);color:var(--bg);border-radius:18px;
  padding:clamp(1.6rem,3vw,2.4rem)
}
.datenkachel p{color:rgba(251,248,247,.82)}
.datenkachel .klein{background:none;padding:0;color:var(--pink);display:block;margin-bottom:.5rem}

/* Fußzeile schwarz */
.fuss{background:var(--ink);color:var(--bg)}
.fuss p{color:rgba(251,248,247,.7)}
.fuss .klein{background:none;padding:0;color:var(--pink);display:block;margin-bottom:.4rem}
.fuss a{color:var(--pink)}
.fuss a:hover{color:var(--bg)}
.fuss .marke-gross{color:var(--pink);opacity:.42}

/* Werk-Datenblock (Unterseite) ebenfalls auf Schwarz */
.werkdaten{background:var(--ink);color:var(--bg);border-radius:18px;padding:clamp(1.6rem,3vw,2.4rem)}
.werkdaten p{color:rgba(251,248,247,.82)}
.werkdaten .klein{background:none;padding:0;color:var(--pink);display:block;margin-bottom:.4rem}
.werkdaten .knopf{border-color:var(--pink);color:var(--pink)}
.werkdaten .knopf:hover{background:var(--pink);color:var(--ink)}
.werkdaten .hinweis{color:rgba(251,248,247,.5)}

/* Prototyp-Hinweis am Seitenende (ersetzt das Band im Kopf, 31.07.2026) */
.prototyp-fuss{
  display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:1.1rem clamp(1.25rem,5vw,5.5rem);font-size:.82rem;line-height:1.6
}
.prototyp-fuss b{font-weight:600}
.prototyp-fuss{background:#171314;color:#FBF8F7;}
.prototyp-fuss a{color:#FF008C}

/* ======================================================================
   G1–G4 · Die Galerie darf laut werden (11.08.2026)
   Kein Ladezeit-Budget auf dieser Seite. Alles auf transform, opacity
   und clip-path, damit die Grafikeinheit die Arbeit macht.
   ====================================================================== */

/* G2 · Textmaske: ein Lichtband wandert durch die Schrift */
.maske{
  background:linear-gradient(100deg,currentColor 0 38%,var(--pink) 46% 54%,currentColor 62% 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:maskeLauf 9s linear infinite;
}
@keyframes maskeLauf{from{background-position:120% 0}to{background-position:-120% 0}}

/* G3 · Eigener Zeiger */
.eigener-zeiger,.eigener-zeiger a,.eigener-zeiger button,.eigener-zeiger .werk{cursor:none}
.zeiger{
  position:fixed;top:0;left:0;z-index:200;width:14px;height:14px;border-radius:50%;
  background:var(--pink);pointer-events:none;mix-blend-mode:difference;opacity:0;
  transition:width .3s cubic-bezier(.19,1,.22,1),height .3s cubic-bezier(.19,1,.22,1),opacity .3s ease;
}
.eigener-zeiger .zeiger{opacity:1}
.zeiger.gross{width:56px;height:56px}
.zeiger.druck{width:26px;height:26px}

/* G4 · Seitenübergang */
.wische{
  position:fixed;inset:0;z-index:190;background:var(--ink);pointer-events:none;
  transform:translateY(100%);
}
.wische.zu{transform:translateY(0);transition:transform .5s cubic-bezier(.7,0,.3,1)}
.wische.auf{transform:translateY(-100%);transition:transform .65s cubic-bezier(.19,1,.22,1)}

@media(prefers-reduced-motion:reduce){
  .maske{animation:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
  .zeiger,.wische{display:none}
  .eigener-zeiger,.eigener-zeiger a,.eigener-zeiger button{cursor:auto}
}
@media (prefers-reduced-data: reduce){
  .maske{animation:none}
  .zeiger{display:none}
}

/* =======================================================================
   G1 · DIE FAHRT (27.08.2026)
   -----------------------------------------------------------------------
   Ersetzt die frühere Auftakt-Sektion UND den separaten Rundgang. Drei
   fotografierte Räume, gescrollt: der Auftakt ist zugleich der Rundgang.

   Der Browser schreibt den Scroll-Fortschritt in eine einzige Zahl: --p
   (0 = Fahrt beginnt, 1 = Fahrt steht). Alles darunter liest nur diese
   Zahl. Zwei Antriebe schreiben sie — moderne Browser über eine
   scroll-getriebene Animation ohne Skript, ältere über den Block in
   index.html. Bewegt werden ausschließlich transform und opacity.

   Der Vorzustand liegt in _vor-fahrt-2026-08-27/.
   ======================================================================= */

@property --p{ syntax:"<number>"; inherits:true; initial-value:0 }

.fahrt{
  position:relative; height:400vh;
  margin-left:calc(-1 * var(--rand)); width:calc(100% + var(--rand));
}
@supports (animation-timeline: view()){
  .fahrt{ animation:fahrt-lauf linear both; animation-timeline:view();
          animation-range:contain 0% contain 100% }
}
@keyframes fahrt-lauf{ from{ --p:0 } to{ --p:1 } }

.fahrt-buehne{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:#100D0E; isolation:isolate;
}

/* --q ist der Fortschritt innerhalb einer Station. Er wird bewusst NICHT bei
   0 und 1 abgeschnitten, sondern läuft von -.34 bis 1.34 weiter: die alte
   Station wächst beim Ausblenden noch, die neue kommt bereits in Bewegung
   herein. Sonst spränge die Kamera bei jedem Wechsel sichtbar zurück — das
   ist der Grund, warum Bildwechsel bei solchen Fahrten sonst auffallen. */
.fahrt-raum{ position:absolute; inset:0; will-change:transform,opacity }
/* Die Motive stehen hier und nicht als Stil am Element: nur so lässt sich am
   Handy auf die Hochformat-Aufnahmen umschalten. */
.fahrt-raum[data-raum="0"]{ --foto:url(bilder/raum-1.webp) }
.fahrt-raum[data-raum="1"]{ --foto:url(bilder/raum-2.webp) }
.fahrt-raum[data-raum="2"]{ --foto:url(bilder/raum-3.webp) }
.fahrt-raum[data-raum="0"]{
  --q:clamp(-.34, var(--p) * 3, 1.34);
  opacity:clamp(0, (.368 - var(--p)) * 11, 1);
}
.fahrt-raum[data-raum="1"]{
  --q:clamp(-.34, (var(--p) - .3333) * 3, 1.34);
  opacity:calc( clamp(0, (var(--p) - .299) * 11, 1) * clamp(0, (.701 - var(--p)) * 11, 1) );
}
.fahrt-raum[data-raum="2"]{
  --q:clamp(-.34, (var(--p) - .6666) * 3, 1.34);
  opacity:clamp(0, (var(--p) - .632) * 11, 1);
}

/* Die Tiefe entsteht aus EINEM Foto: dasselbe Bild liegt dreimal
   übereinander, über Masken auf Bildmitte und Bildrand beschnitten und mit
   unterschiedlichem Tempo skaliert. Der Bildrand läuft nach außen, die
   Bildmitte steht fast — wie beim Gehen durch einen Raum. --basis hält jede
   Lage auch bei negativem --q über Vollbildgröße, sonst blitzt der
   Bühnenhintergrund an den Rändern auf. */
.fahrt-lage{
  position:absolute; inset:0; contain:paint;
  transform-origin:50% 52%;
  transform:scale(calc(var(--basis) + var(--k) * var(--q)));
  background-image:var(--foto); background-size:cover;
  background-position:center 52%; background-repeat:no-repeat;
}
.fahrt-lage[data-tiefe="0"]{ --k:.15; --basis:1.07 }
/* Die Masken blenden über eine sehr lange Strecke auf: harte Kanten würden
   die versetzten Kopien als Doppelkonturen sichtbar machen. */
.fahrt-lage[data-tiefe="1"]{
  --k:.34; --basis:1.14;
  -webkit-mask-image:radial-gradient(ellipse 78% 84% at 50% 52%,rgba(0,0,0,0) 18%,rgba(0,0,0,.5) 62%,#000 100%);
          mask-image:radial-gradient(ellipse 78% 84% at 50% 52%,rgba(0,0,0,0) 18%,rgba(0,0,0,.5) 62%,#000 100%);
}
.fahrt-lage[data-tiefe="2"]{
  --k:.72; --basis:1.27; filter:blur(2.2px);
  -webkit-mask-image:radial-gradient(ellipse 96% 100% at 50% 52%,rgba(0,0,0,0) 34%,rgba(0,0,0,.42) 74%,#000 100%);
          mask-image:radial-gradient(ellipse 96% 100% at 50% 52%,rgba(0,0,0,0) 34%,rgba(0,0,0,.42) 74%,#000 100%);
}

/* Beim Gang durch eine helle Türöffnung blendet das Auge kurz auf. Genau an
   den beiden Wechselpunkten legt sich deshalb ein warmweißer Schleier über
   das Bild. Er kaschiert den Wechsel und ist erzählerisch begründet. */
.fahrt-durchgang{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse 120% 110% at 50% 48%,#FFFFFF 0%,#FFFDF8 62%,#FFF6EC 100%);
}
.fahrt-durchgang[data-punkt="1"]{
  opacity:calc( min( clamp(0,(var(--p) - .258) * 13.5,1),
                     clamp(0,(.409 - var(--p)) * 13.5,1) ) * .86 );
}
.fahrt-durchgang[data-punkt="2"]{
  opacity:calc( min( clamp(0,(var(--p) - .591) * 13.5,1),
                     clamp(0,(.742 - var(--p)) * 13.5,1) ) * .86 );
}

/* Leseträger: dieselbe Lösung wie im früheren Auftakt (Befund 03.08.2026),
   nur kräftiger — die neuen Räume sind deutlich heller als die vorherigen
   Motive. Der Träger verschwindet, sobald die Schrift verschwunden ist. */
.fahrt-lese{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  /* Gerechnet, nicht geschätzt: Neonpink hat eine Luminanz von 0,2315. Für
     die geforderten 3:1 bei großer Schrift muss der Grund darunter unter
     0,044 liegen — das verlangt in der Schlagzeilenzone rund 50 % Deckung.
     Deshalb der kräftige Sprung ab der Bildmitte plus ein radialer Fleck
     genau hinter der Zeile. Gemessen wird am oberen Sechstel der Helligkeit,
     nicht am Mittelwert: ein heller Fleck hinter einem Buchstaben entscheidet. */
  /* 01.09.2026: Obere zwei Stufen (0/26/48 %) deutlich abgeschwächt, damit vom
     Raum mehr zu sehen bleibt — dort steht kein Text, der Schutz war unnötig.
     Die Stufen ab 70 % und der Fleck hinter der Schlagzeile bleiben unverändert:
     dort sitzen die gemessenen Kontrastwerte aus STAND-GALERIE-FAHRT.md, allen
     voran die Schlagzeile mit knappen 3,18 gegen die nötigen 3,0. Vor dem
     nächsten Kundentermin mit werkzeuge/messen-kontrast.py gegenprüfen. */
  background:
    radial-gradient(ellipse 76% 32% at 50% 66%, rgba(16,13,14,.58) 0%, rgba(16,13,14,0) 100%),
    linear-gradient(180deg,
      rgba(16,13,14,.05) 0%, rgba(16,13,14,.03) 26%,
      rgba(16,13,14,.16) 48%, rgba(16,13,14,.78) 70%, rgba(16,13,14,.94) 100%);
  opacity:clamp(0,(.905 - var(--p)) * 9,1);
}

/* Am Ende läuft die Fahrt ins Licht und übergibt an die helle Seite. */
.fahrt-licht{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(120% 92% at 50% 44%,#FFFFFF 0%,#FDF9F8 46%,var(--bg) 100%);
  opacity:clamp(0,(var(--p) - .86) * 7,.96);
}

/* --- Schrift auf der Bühne --------------------------------------------- */

.fahrt-worte{
  position:absolute; z-index:5; left:0; right:0; bottom:clamp(4.5rem,13vh,8rem);
  padding:0 clamp(1rem,3vw,2.4rem) 0 calc(var(--rand) + clamp(1rem,3vw,2.4rem));
  text-align:center; color:#fff; pointer-events:none;
  opacity:clamp(0,(.185 - var(--p)) * 11,1);
}
.fahrt-worte .fahrt-marke{
  font-size:clamp(.95rem,1.6vw,1.3rem); letter-spacing:.32em; text-transform:uppercase;
  font-weight:500; color:#F4EFEF; margin-bottom:1.5rem;
  text-shadow:0 1px 14px rgba(12,9,10,.7);
}
.fahrt-worte .fahrt-marke .amp{ color:var(--pink) }
.fahrt-worte .eyebrow{
  font-size:clamp(.62rem,.78vw,.74rem); letter-spacing:.28em; text-transform:uppercase;
  color:#FFC8E0; margin-bottom:1.1rem; font-weight:500;
  text-shadow:0 1px 14px rgba(12,9,10,.7);
}
.fahrt-worte h1{
  color:var(--pink); font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(2.6rem,7.4vw,6.4rem);
}
.fahrt-worte h1 .zeile{ display:block; overflow:hidden; padding-bottom:.04em }
.fahrt-worte h1 .zeile > span{
  display:block; transform:translateY(104%);
  animation:zeile-auf 1.1s cubic-bezier(.16,.85,.24,1) forwards;
}
.fahrt-worte h1 .zeile:nth-child(2) > span{ animation-delay:.13s }
.fahrt-worte .gross{
  color:#F4EFEF; margin:1rem auto 0; max-width:52ch;
  text-shadow:0 1px 14px rgba(12,9,10,.7);
}

/* Die Namen stehen unter dem Auftakttext und gehen mit ihm ab. */
.fahrt-namen{
  position:absolute; z-index:5; left:0; right:0; bottom:clamp(2.2rem,6vh,3.4rem);
  padding-left:var(--rand);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 0;
  pointer-events:none; opacity:clamp(0,(.185 - var(--p)) * 11,1);
}
.fahrt-namen span{
  font-size:clamp(.64rem,.8vw,.76rem); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.9); padding:0 .72rem; position:relative; white-space:nowrap;
  text-shadow:0 1px 14px rgba(12,9,10,.7);
}
.fahrt-namen span+span::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:1px; background:rgba(255,0,140,.55);
}
@media(max-width:44rem){ .fahrt-namen span:nth-child(n+5){ display:none } }

/* Die drei Raumtexte lösen den Auftakttext ab, einer je Station. */
.fahrt-raumtext{
  position:absolute; z-index:5; bottom:clamp(3rem,9vh,5.5rem);
  isolation:isolate;
  left:calc(var(--rand) + clamp(1.5rem,5vw,4rem)); right:clamp(1.5rem,5vw,4rem);
  max-width:34rem; color:#fff; pointer-events:none;
}
.fahrt-raumtext::before{
  content:""; position:absolute; z-index:-1;
  inset:-2rem -6rem -2.6rem -5rem;
  /* 01.09.2026: von .84/.55 auf .58/.30 abgesenkt. Die gemessenen Werte lagen
     bei 8,7–17,1 gegen eine Pflicht von 3,0/4,5 — reichlich Reserve, um den
     Raum dahinter zeigen zu lassen. Gegenprüfen mit werkzeuge/messen-kontrast.py. */
  background:radial-gradient(ellipse 66% 100% at 26% 58%,
    rgba(16,13,14,.58) 0%, rgba(16,13,14,.30) 46%, rgba(16,13,14,0) 100%);
}
.fahrt-raumtext .nr{
  display:block; font-size:.72rem; letter-spacing:.34em;
  /* Nicht Pink: als kleine Schrift käme es auf dem Träger unter AA. Dieselbe
     Regel gilt seit 03.08.2026 für Vorzeile und Untertext. Pink bleibt der
     Schlagzeile vorbehalten, die als große Schrift mit 3:1 auskommt. */
  color:#FFC8E0; margin-bottom:.5rem; font-weight:500;
  text-shadow:0 1px 14px rgba(12,9,10,.8);
}
.fahrt-raumtext b{
  display:block; font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:400;
  letter-spacing:-.02em; line-height:1.1; margin-bottom:.5rem;
  text-shadow:0 1px 16px rgba(12,9,10,.8);
}
.fahrt-raumtext > span:last-child{
  display:block; font-size:.98rem; color:#EDE6E7; max-width:46ch;
  text-shadow:0 1px 14px rgba(12,9,10,.8);
}
/* Rate 26 statt 16: bei 16 brauchte ein Text 2/16 = 0,125 der Strecke allein
   fürs Auf- und Abblenden. Raumtext 3 hatte nur 0,093 Fenster und erreichte
   damit nie volle Deckung (gemessen: 0,74). Mit 26 bleibt jedem Text eine
   Ruhephase bei voller Deckung — dort wird gemessen, dort wird gelesen. */
.fahrt-raumtext[data-i="0"]{
  opacity:calc( min( clamp(0,(var(--p) - .134) * 26,1), clamp(0,(.264 - var(--p)) * 26,1) ) );
}
.fahrt-raumtext[data-i="1"]{
  opacity:calc( min( clamp(0,(var(--p) - .428) * 26,1), clamp(0,(.590 - var(--p)) * 26,1) ) );
}
.fahrt-raumtext[data-i="2"]{
  opacity:calc( min( clamp(0,(var(--p) - .748) * 26,1), clamp(0,(.862 - var(--p)) * 26,1) ) );
}

.fahrt-hinweis{
  position:absolute; z-index:5; left:50%; bottom:1.4rem; transform:translateX(-50%);
  padding-left:var(--rand);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:0 1px 14px rgba(12,9,10,.7);
  opacity:clamp(0,(.10 - var(--p)) * 11,1);
}

/* --- Ausstieg: sichtbarer Schalter -------------------------------------- */

.ruhe-knopf{
  position:fixed; right:1rem; bottom:1rem; z-index:61;
  font:inherit; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.55rem .95rem; border-radius:999px; cursor:pointer;
  background:rgba(251,248,247,.92); color:var(--ink-2);
  border:1px solid var(--line); backdrop-filter:blur(6px);
}
.ruhe-knopf:hover{ color:var(--ink); border-color:var(--pink) }
.ruhe-knopf:focus-visible{ outline:2px solid var(--pink); outline-offset:3px }
/* Nur sichtbar, solange die Fahrt im Bild ist. Nicht display:none, sonst
   verlöre die Tastatur beim Ausblenden mitten im Fokus den Halt. */
.ruhe-knopf.ist-weg{ opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s }
.ruhe-knopf{ transition:opacity .3s, visibility .3s }

/* --- Ruhemodus: Systemwunsch, Schalter oder Notbremse ------------------- */

@media (prefers-reduced-motion: reduce){
  .fahrt{ height:100svh; animation:none }
  .fahrt-lage{ transform:none }
  .fahrt-raum[data-raum="0"],.fahrt-raum[data-raum="1"]{ opacity:0 }
  .fahrt-raum[data-raum="2"]{ opacity:1 }
  .fahrt-durchgang{ opacity:0 }
  .fahrt-licht{ opacity:.22 }
  .fahrt-lese{ opacity:1 }
  .fahrt-worte,.fahrt-namen{ opacity:1 }
  .fahrt-raumtext{ opacity:0 }
  .fahrt-hinweis{ display:none }
  .fahrt-worte h1 .zeile > span{ animation:none; transform:none }
}
html[data-ruhe="1"] .fahrt{ height:100svh; animation:none }
html[data-ruhe="1"] .fahrt-lage{ transform:none }
html[data-ruhe="1"] .fahrt-raum[data-raum="0"],
html[data-ruhe="1"] .fahrt-raum[data-raum="1"]{ opacity:0 }
html[data-ruhe="1"] .fahrt-raum[data-raum="2"]{ opacity:1 }
html[data-ruhe="1"] .fahrt-durchgang{ opacity:0 }
html[data-ruhe="1"] .fahrt-licht{ opacity:.22 }
html[data-ruhe="1"] .fahrt-lese{ opacity:1 }
html[data-ruhe="1"] .fahrt-worte,
html[data-ruhe="1"] .fahrt-namen{ opacity:1 }
html[data-ruhe="1"] .fahrt-raumtext{ opacity:0 }
html[data-ruhe="1"] .fahrt-hinweis{ display:none }

/* Handy: kürzere Strecke, eigene Hochformat-Aufnahmen derselben Räume
   (28.08.2026). Vorher wurde in die Mitte des Querformats gezoomt — dafür
   brauchte es eine Grundskalierung von 1.30, sonst blitzte am Bildrand eine
   Kante auf. Das Hochformat überragt den Ausschnitt von sich aus, deshalb
   dürfen die Lagen wieder nah an ihren normalen Werten laufen. Die dritte
   Lage bleibt aus: sie kostet Bildrate und trägt am kleinen Schirm nichts. */
@media (max-aspect-ratio: 4/5){
  .fahrt{ height:270vh }
  .fahrt-raum[data-raum="0"]{ --foto:url(bilder/raum-1-hoch.webp) }
  .fahrt-raum[data-raum="1"]{ --foto:url(bilder/raum-2-hoch.webp) }
  .fahrt-raum[data-raum="2"]{ --foto:url(bilder/raum-3-hoch.webp) }
  .fahrt-lage[data-tiefe="0"]{ --basis:1.10 }
  .fahrt-lage[data-tiefe="1"]{ --basis:1.16 }
  .fahrt-lage[data-tiefe="2"]{ display:none }
  .fahrt-raumtext{ bottom:clamp(2.4rem,7vh,4rem) }
  /* Der Hinweis stand auf 3.6rem und lag damit genau auf den Namen. */
  .fahrt-hinweis{ bottom:1rem }
}