/* ═══════════════════════════════════════════════════════════════════════════
   KERN · gemeinsame Grundlage aller Hotel-Vorlagen
   Baut auf D-001 "Redaktionelles Layout" aus der Design-Bibliothek auf.

   Eine Vorlage aendert NUR die Marken-Stellschrauben ganz oben in ihrer
   eigenen Datei. Alles andere kommt von hier. Ein Fehler wird einmal
   repariert und ist bei allen Haeusern weg.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stellschrauben je Haus ───────────────────────────────────────────────
   Diese Werte ueberschreibt jede Vorlage. Der Rest bleibt. */
:root{
  /* Farben — Voreinstellung ist D-001 */
  --papier:      #f6f3ee;
  --papier-2:    #efeae1;
  --papier-3:    #ffffff;
  --tinte:       #1b1a17;
  --tinte-2:     #3a3733;
  --leise:       #6f6a61;
  --akzent:      #7d5a3c;   /* warmes Holz */
  --akzent-hell: #a97d55;
  --dunkel:      #232019;   /* Grund der dunklen Baender */
  --zier:        #c9aa5f;   /* nur Linien und Flaechen — NIE Text */
  --linie:       rgba(27,26,23,.13);
  --linie-fein:  rgba(27,26,23,.07);

  /* Schrift — Serifen tragen, Sans bedient */
  --schrift-titel: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --schrift-text:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Mass und Rhythmus */
  --breite:   1240px;
  --rand:     clamp(20px, 5vw, 68px);
  --radius:   14px;
  --luft:     clamp(64px, 9vw, 132px);

  /* Bewegung — Feder, nie linear */
  --feder:    linear(0,.0063 1.95%,.0242 3.9%,.0946 8.1%,.4123 20.9%,.5292 25.9%,.6321 31%,.7178 36.2%,.7902 41.6%,.8492 47.1%,.8963 52.8%,.9332 58.8%,.9612 65.2%,.9812 72.1%,.9942 79.9%,1);
  --weich:    cubic-bezier(.2,.75,.25,1);
  --aus:      cubic-bezier(.16,.84,.34,1);
  --t-kurz:   .22s;
  --t-mittel: .46s;
  --t-lang:   .78s;
  --korn:     .05;
}

/* ── Grundgeruest ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{
  scroll-behavior:smooth;
  /* ⛔ WINDOWS: die Scrollleiste hat dort echte Breite. Auf Mac ist sie ein
     Overlay, deshalb faellt es beim Bauen nie auf. */
  scrollbar-width:thin;
  scrollbar-color:rgba(197,130,151,.55) var(--papier-2);
  scrollbar-color:color-mix(in srgb, var(--akzent) 55%, transparent) var(--papier-2);
}
html::-webkit-scrollbar{ width:12px }
html::-webkit-scrollbar-track{ background:var(--papier-2) }
html::-webkit-scrollbar-thumb{
  background:rgba(197,130,151,.5);
  background:color-mix(in srgb, var(--akzent) 50%, transparent);
  border-radius:8px; border:3px solid transparent; background-clip:content-box;
}
html::-webkit-scrollbar-thumb:hover{
  background:var(--akzent); background-clip:content-box;
}

body{
  margin:0; background:var(--papier); color:var(--tinte-2);
  font:400 clamp(1rem,1.05vw,1.09rem)/1.62 var(--schrift-text);
  -webkit-font-smoothing:antialiased;
  /* ⛔ NICHT auf `hidden` zuruecksetzen (02.09.2026): `overflow:hidden` macht
     den Body zum Scroll-Container und schaltet damit JEDES `position:sticky`
     im Dokument lautlos ab — die gestapelten Zimmerkarten lagen dann einfach
     flach untereinander, ohne Fehlermeldung. `clip` schneidet den waagrechten
     Ueberlauf genauso ab, erzeugt aber keinen Scroll-Container. */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

.mitte{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand) }

/* ── Typografie ──────────────────────────────────────────────────────────
   D-001: die Schrift traegt die Seite. Links, nie zentriert. */
h1,h2,h3{ font-family:var(--schrift-titel); font-weight:400; color:var(--tinte); margin:0 }
h1{
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  line-height:1.02; letter-spacing:-.025em; text-wrap:balance;
}
h2{
  font-size:clamp(1.95rem, 4vw, 3.3rem);
  line-height:1.08; letter-spacing:-.022em; text-wrap:balance;
}
h3{ font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.25; letter-spacing:-.012em }
p{ margin:0 0 1.1em; text-wrap:pretty }
.fuehrung{ font-size:clamp(1.08rem,1.5vw,1.32rem); line-height:1.55; color:var(--tinte-2); max-width:54ch }

/* Rubrik: kleine gesperrte Zeile mit Strich, der beim Erscheinen aufzieht */
.rubrik{
  display:inline-block; position:relative;
  font-family:var(--schrift-text); font-size:.66rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--akzent);
  margin:0 0 clamp(16px,2vw,26px);
}
.rubrik::after{
  content:""; position:absolute; left:0; bottom:-8px; height:1px; width:0;
  background:linear-gradient(90deg, var(--akzent), transparent);
  transition:width var(--t-lang) var(--aus) .12s;
}
.rubrik.in::after{ width:100% }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.band{ padding-block:var(--luft); position:relative }
.band--hell{ background:var(--papier) }
.band--papier{ background:var(--papier-2) }
.band--weiss{ background:var(--papier-3) }
.band--dunkel{ background:var(--dunkel); color:rgba(255,255,255,.82) }
.band--dunkel h2,.band--dunkel h3{ color:#fff }
.band--dunkel .rubrik{ color:var(--akzent-hell) }
.band--dunkel .fuehrung{ color:rgba(255,255,255,.8) }

/* Abschnittsnummer am Rand — die Seite weiss, wo sie ist */
.band[data-nr]::before{
  content:attr(data-nr);
  position:absolute; top:clamp(26px,3.4vw,48px); right:clamp(14px,2.4vw,32px);
  font-family:var(--schrift-text); font-size:.6rem; font-weight:600;
  letter-spacing:.3em; color:var(--akzent); opacity:.45;
}

/* ── Titelbild ──────────────────────────────────────────────────────────
   ⛔ D-001: NICHT randlos ueber die ganze Breite. Das Foto sitzt in einem
   Rahmen, die Schrift traegt. Grund: kein Hotelfoto ist breit genug. */
.titel{ padding-top:clamp(120px,16vh,190px); padding-bottom:var(--luft) }
.titel-satz em{ font-style:normal; color:var(--akzent) }
.titel-bild{
  position:relative; margin-top:clamp(34px,4.5vw,60px);
  border-radius:var(--radius); overflow:hidden; background:var(--papier-2);
  aspect-ratio:16/8;
}
.titel-bild img{ width:100%; height:100%; object-fit:cover }
.titel-bild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -90px 120px -60px rgba(0,0,0,.45);
}

/* Beweiszeile unter dem Titel — Zahlen statt Prosa */
.beweise{ display:flex; flex-wrap:wrap; gap:10px 34px; margin:clamp(22px,2.6vw,32px) 0 0; padding:0; list-style:none }
.beweise li{ position:relative; padding-left:20px; font-size:.99rem; color:var(--leise) }
.beweise li::before{ content:""; position:absolute; left:0; top:.7em; width:11px; height:1px; background:var(--akzent) }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
.kopf{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:20px;
  padding:14px var(--rand);
  /* ⛔ Rueckfall ZUERST: Wer `color-mix` nicht kennt (Chrome <111,
     Firefox <113), wirft die naechste Zeile weg — ohne diese hier waere
     die feste Kopfzeile durchsichtig und der Seitentext liefe hindurch.
     Gemessen am 02.09.2026. */
  background:rgba(15,15,17,.82);
  background:color-mix(in srgb, var(--papier) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mittel) var(--weich), background var(--t-mittel) var(--weich),
             padding var(--t-mittel) var(--weich);
}
.kopf.fest{ border-bottom-color:var(--linie); padding-block:9px }
.kopf::after{  /* Lesefortschritt als feine Linie */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--akzent);
  /* ⛔ NICHT `width` animieren (Stand vorher: `width:var(--fortschritt);
     transition:width .1s linear`). Zwei Fehler auf einmal: `width` zwingt den
     Browser bei JEDEM Bild zum Neuberechnen des Layouts, und die 100-ms-
     Transition lief dem Scrollen hinterher — die Linie wuchs sichtbar in
     Stufen statt zu gleiten. `transform:scaleX()` laeuft auf der Grafikkarte
     und braucht gar keine Transition: der Wert kommt schon bei jedem
     Scroll-Ereignis frisch. */
  transform:scaleX(var(--fortschritt-anteil,0));
  transform-origin:0 50%;
  will-change:transform;
}
.marke{ display:inline-flex; flex-direction:column; justify-content:center; min-height:44px;
  font-family:var(--schrift-titel); font-size:1.16rem; letter-spacing:.02em; color:var(--tinte); text-decoration:none }
.marke small{ display:block; font-family:var(--schrift-text); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--leise); margin-top:2px }
.menue{ margin-left:auto; display:flex; align-items:center; gap:clamp(14px,1.9vw,30px) }
/* ⛔ Tippziel mindestens 44 px hoch. Ein Textlink ist von Haus aus 20 px —
   auf dem Handy trifft man ihn nicht. Die Hoehe kommt aus dem Flex-Kasten,
   der Unterstrich bleibt trotzdem eng am Text (bottom:12px statt -5px). */
.menue a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-size:.79rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:var(--tinte-2); white-space:nowrap;
}
.menue a::after{
  content:""; position:absolute; left:0; right:0; bottom:11px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--aus);
}
.menue a.knopf::after{ display:none }
.menue a:hover::after{ transform:scaleX(1); transform-origin:left }

/* ── Burger-Menue ─────────────────────────────────────────────────────────
   ⛔ Vorher waren die Menuelinks unter 900 px einfach versteckt — ohne Ersatz.
   Auf dem Handy gab es damit gar keine Navigation, und 70 % der Gaeste kommen
   vom Handy. Gemessen und behoben am 18.08.2026.
   Jede Vorlage gestaltet das Aufklappen selbst; hier steht nur das Geruest. */
.burger{
  display:none; flex:none; margin-left:auto;
  width:44px; height:44px; border-radius:50%;      /* Tippziel */
  border:1px solid var(--linie); background:none; cursor:pointer;
  align-items:center; justify-content:center;
  transition:border-color var(--t-kurz) var(--weich), background var(--t-kurz) var(--weich);
}
.burger:hover{ border-color:var(--akzent) }
.burger-striche{ display:block; width:19px; height:11px; position:relative }
.burger-striche i{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform var(--t-mittel) var(--feder), opacity var(--t-kurz) var(--weich);
}
.burger-striche i:nth-child(1){ top:0 }
.burger-striche i:nth-child(2){ top:50%; margin-top:-.75px }
.burger-striche i:nth-child(3){ bottom:0 }
/* Offen: aus drei Strichen wird ein Kreuz */
.menue-offen .burger-striche i:nth-child(1){ transform:translateY(4.75px) rotate(45deg) }
.menue-offen .burger-striche i:nth-child(2){ opacity:0; transform:scaleX(.4) }
.menue-offen .burger-striche i:nth-child(3){ transform:translateY(-4.75px) rotate(-45deg) }

@media (max-width:900px){
  .burger{ display:flex }
  .menue{
    position:fixed; inset:0; z-index:59;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:clamp(24px,7vw,48px);
    margin:0; background:var(--papier);
    visibility:hidden; opacity:0;
    transition:opacity var(--t-mittel) var(--weich), visibility var(--t-mittel);
  }
  .menue-offen .menue{ visibility:visible; opacity:1 }
  .menue a{
    min-height:56px;                      /* auf dem Handy grosszuegiger */
    font-family:var(--schrift-titel); font-size:clamp(1.5rem,7vw,2.1rem);
    text-transform:none; letter-spacing:-.01em; color:var(--tinte);
    opacity:0; transform:translateY(14px);
    transition:opacity .4s var(--weich), transform .5s var(--aus);
    transition-delay:calc(var(--mi,0) * 55ms);
  }
  .menue-offen .menue a{ opacity:1; transform:none }
  .menue a::after{ bottom:14px }
  .menue a.knopf{
    margin-top:18px; font-family:var(--schrift-text); font-size:.78rem;
    text-transform:uppercase; letter-spacing:.14em; color:#fff; align-self:stretch;
  }
  /* Solange das Menue offen ist, scrollt die Seite dahinter nicht mit */
  .menue-offen body{ overflow:hidden }
}


/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.knopf{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 26px;             /* 48 px — Fingerkuppe, nicht Mauszeiger */
  border:1px solid var(--akzent); border-radius:999px;
  background:var(--akzent); color:#fff;
  font:600 .78rem/1 var(--schrift-text); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transform:translate3d(var(--mx,0px), var(--my,0px), 0);
  transition:transform .35s var(--feder), color var(--t-kurz) var(--weich),
             box-shadow var(--t-mittel) var(--weich);
}
.knopf::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--tinte); transform:translateY(101%);
  transition:transform .42s var(--aus);
}
.knopf:hover::before{ transform:translateY(0) }
.knopf:hover{ box-shadow:0 16px 34px -20px color-mix(in srgb, var(--tinte) 70%, transparent) }
.knopf:active{ transform:translate3d(var(--mx,0px), calc(var(--my,0px) + 1px), 0) scale(.985) }
.knopf--leise{ background:none; color:var(--tinte); border-color:var(--linie) }
.knopf--leise::before{ background:var(--akzent) }
.knopf--leise:hover{ color:#fff; border-color:var(--akzent) }

/* ── Kacheln ────────────────────────────────────────────────────────────
   ⛔ Nie drei gleiche nebeneinander. Immer eine Hierarchie: eine gross,
   zwei klein. Steht so in Davids Regeln. */
.raster{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.7vw,24px); margin-top:clamp(34px,4vw,56px) }
.kachel{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--papier-2); min-height:230px; isolation:isolate;
  transition:transform var(--t-mittel) var(--weich), box-shadow var(--t-mittel) var(--weich);
}
.kachel--gross{ grid-column:span 7; min-height:clamp(300px,34vw,430px) }
.kachel--klein{ grid-column:span 5; min-height:clamp(210px,22vw,270px) }
.kachel--halb{ grid-column:span 6; min-height:clamp(240px,26vw,320px) }
.kachel--voll{ grid-column:span 12 }
.kachel img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .9s var(--aus) }
.kachel:hover{ transform:translateY(-5px); box-shadow:0 30px 58px -34px rgba(27,26,23,.5) }
.kachel:hover img{ transform:scale(1.05) }
.kachel::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(20,18,15,.28) 66%, rgba(20,18,15,.84));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:inherit;
}
.kachel-text{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,26px); color:#fff }
.kachel-text b{ display:block; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.2 }
.kachel-text span{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--akzent-hell); margin-top:7px }
@media (max-width:940px){
  .kachel--gross,.kachel--klein,.kachel--halb{ grid-column:span 12; min-height:220px }
}

/* ── Geteilter Block: Bild neben Text ───────────────────────────────────── */
.geteilt{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center }
.geteilt--gedreht{ grid-template-columns:.95fr 1.05fr }
.geteilt--gedreht .geteilt-bild{ order:2 }
.geteilt-bild{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--papier-2) }
.geteilt-bild img{ width:100%; height:100%; object-fit:cover }
.geteilt-bild::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
@media (max-width:860px){
  .geteilt,.geteilt--gedreht{ grid-template-columns:1fr }
  .geteilt--gedreht .geteilt-bild{ order:0 }
}

/* ── Zahlenband ─────────────────────────────────────────────────────────── */
.zahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4vw,52px) }
.zahl b{ display:block; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(2.1rem,3.6vw,3rem); color:var(--akzent); font-variant-numeric:tabular-nums; line-height:1 }
.zahl span{ display:block; font-size:.86rem; color:var(--leise); margin-top:9px }

/* ── Anfrage-Leiste ─────────────────────────────────────────────────────── */
.anfrage{
  display:grid; grid-template-columns:repeat(3,1fr) auto; gap:0;
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden;
  background:var(--papier-3); margin-top:clamp(28px,3.4vw,46px);
}
/* Das ganze Feld ist ein <label> und damit das Tippziel — nicht nur das
   20 px hohe Eingabefeld darin. So sind es rund 62 px statt 23. */
.anfrage-feld{ padding:12px 18px; border-right:1px solid var(--linie-fein); display:flex; flex-direction:column; gap:4px; min-width:0; cursor:text; min-height:62px; justify-content:center }
.anfrage-feld > span{ font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--leise) }
.anfrage-feld input,.anfrage-feld select{
  border:0; background:none; color:var(--tinte); font:400 1rem var(--schrift-text);
  min-width:0; padding:0; min-height:28px;
}
.anfrage-feld input:focus,.anfrage-feld select:focus{ outline:none }
.anfrage .knopf{ border-radius:0; min-height:100%; padding-inline:clamp(20px,3vw,38px) }
@media (max-width:760px){
  .anfrage{ grid-template-columns:1fr 1fr }
  .anfrage .knopf{ grid-column:span 2; min-height:52px }
}

/* ── Fuss ───────────────────────────────────────────────────────────────── */
.fuss{ background:var(--dunkel); color:rgba(255,255,255,.62); padding-block:clamp(52px,6vw,82px) }
.fuss a{ color:rgba(255,255,255,.82); text-decoration:none }
.fuss a:hover{ color:#fff }
.fuss-raster{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,3vw,48px) }
.fuss h3{ color:#fff; font-size:.66rem; font-family:var(--schrift-text); font-weight:600; letter-spacing:.24em; text-transform:uppercase; margin-bottom:14px }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; font-size:.93rem }
.fuss ul a{ display:inline-flex; align-items:center; min-height:44px }   /* Tippziel */
@media (max-width:760px){ .fuss-raster{ grid-template-columns:1fr } }

/* ── Bewegung ───────────────────────────────────────────────────────────── */
/* ⭐ Ruhiger und gestaffelt (02.09.2026, Jannik: „dass sie nicht einfach so
   random erscheinen"). Drei Aenderungen gegenueber vorher:
   1. Der Weg ist kuerzer (22 → 16 px) und die Zeit laenger — das liest sich
      als Heben, nicht als Springen.
   2. Ein Hauch Skalierung (.985 → 1) gibt dem Element Koerper. Bewusst so
      klein, dass man es nicht als Zoom wahrnimmt, sondern nur als Naehe.
   3. Der Abstand zwischen Geschwistern steigt von 70 auf 90 ms. Zusammen mit
      der gruppenweisen Zaehlung (kern.js) laeuft eine Reihe damit sichtbar
      von links nach rechts durch, statt gleichzeitig aufzuploppen. */
.stufe{
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity var(--t-lang) var(--weich),
             transform var(--t-lang) var(--weich);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:transform, opacity;
}
.stufe.in{ opacity:1; transform:none }

/* ⚠️ Schwarzenbach schaltet diesen Zuschnitt ab (schwarzenbach.css) — David
   hat das Aufklappen zweimal beanstandet. Die Staffelung fuer den dortigen
   Ersatz steht deshalb ebenfalls in schwarzenbach.css. */
.vorhang{ clip-path:inset(0 0 100% 0); transition:clip-path var(--t-lang) var(--aus) }
.vorhang.in{ clip-path:inset(0 0 0% 0) }
.vorhang img{ transform:scale(1.1); transition:transform 1.5s var(--aus) }
.vorhang.in img{ transform:scale(1) }

.zeile-maske{ display:block; overflow:hidden; padding-bottom:.1em }
.zeile-maske > i{
  display:block; font-style:normal; transform:translateY(108%);
  animation:kern-hoch 1.1s var(--aus) forwards; animation-delay:var(--verzug,0s);
}
@keyframes kern-hoch{ to{ transform:translateY(0) } }

/* Filmkorn — laesst schwaches Fotomaterial gewollt wirken */
.korn{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:var(--korn); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* Eine gemeinsame Farbstimmung ueber ALLE Fotos — aus 40 fremden Bildern
   wird eine Handschrift. Der einzelne staerkste Griff bei schwachem Material. */
.foto-stimmung img{ filter:saturate(1.06) contrast(1.05) brightness(1.005) }

/* ── Weniger Bewegung ───────────────────────────────────────────────────
   ⛔ Unsere Hausregel: nicht abschalten, sondern dreimal schneller.
   Wer alles abschaltet, zeigt David eine tote Seite — und er sieht nie,
   was er verkauft. Nur Dauerbewegung geht wirklich aus, und die haengt
   am SCHALTER, nicht an der Systemabfrage. */
@media not all{
  html{ scroll-behavior:auto }
  :root{ --t-kurz:.08s; --t-mittel:.16s; --t-lang:.26s }
  .stufe,.vorhang{ transition-duration:.24s !important }
  .zeile-maske > i{ animation-duration:.32s !important }
}
.bewegung-aus .korn{ display:none }
.bewegung-aus .kachel:hover img{ transform:none }
.bewegung-aus .knopf{ transform:none !important }

/* ── Bewegungs-Schalter ─────────────────────────────────────────────────── */
.schalter{
  position:fixed; right:16px; bottom:16px; z-index:95;
  display:inline-flex; align-items:center; gap:7px; padding:0 16px;
  border:1px solid var(--linie); border-radius:999px;
  background:rgba(28,28,32,.9);
  background:color-mix(in srgb, var(--papier-3) 90%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  min-height:44px;   /* Tippziel — 38 px waren zu klein gemessen */
  color:var(--tinte); font:600 .66rem/1 var(--schrift-text);
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; opacity:.55;
  box-shadow:0 10px 26px -16px rgba(27,26,23,.5);
  transition:opacity var(--t-kurz) var(--weich), transform .3s var(--feder), border-color var(--t-kurz) var(--weich);
}
.schalter:hover{ opacity:1; transform:translateY(-2px); border-color:var(--akzent) }
.schalter svg{ flex:none; color:var(--akzent) }
.schalter[aria-pressed="false"] svg{ opacity:.4 }

/* ── Zugaenglichkeit ────────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px; border-radius:3px }
.nur-vorlesen{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.spring{
  position:fixed; top:8px; left:8px; z-index:200; padding:10px 16px;
  background:var(--tinte); color:#fff; border-radius:8px; text-decoration:none;
  transform:translateY(-160%); transition:transform var(--t-kurz) var(--aus);
}
.spring:focus{ transform:translateY(0) }

/* ── Entwurfsmarke ──────────────────────────────────────────────────────── */
.entwurf{
  position:fixed; left:16px; bottom:16px; z-index:94;
  display:inline-flex; align-items:center; gap:10px; padding:8px 10px 8px 15px;
  background:var(--dunkel); border:1px solid rgba(197,130,151,.45);
  border:1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  border-radius:999px; color:rgba(255,255,255,.9); font-size:.66rem; letter-spacing:.05em;
  white-space:nowrap; box-shadow:0 16px 40px -22px rgba(0,0,0,.8);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--weich), transform .45s var(--aus);
}
.entwurf b{ color:var(--akzent-hell) }
.ab-titel .entwurf:not(.weg){ opacity:1; transform:none; pointer-events:auto }
.entwurf-zu{
  flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.3); background:none; color:#fff;
  display:grid; place-items:center; font-size:.8rem; line-height:1;
}
.entwurf-zu:hover{ background:#8c0037; border-color:#8c0037 }
/* ⛔ Auf dem Handy duerfen Marke und Schalter nicht beide die volle Breite
   nehmen — gemessen am 18.08.2026 lagen sie uebereinander. Marke bleibt links
   und kuerzt ihren Text, der Schalter sitzt rechts daneben. */
@media (max-width:640px){
  .entwurf{
    left:10px; right:auto; bottom:10px; font-size:.6rem;
    max-width:calc(100vw - 150px); overflow:hidden; text-overflow:ellipsis;
  }
  .schalter{ right:10px; bottom:10px; padding:0 11px; font-size:.6rem }
  .schalter span{ display:none }        /* nur das Zeichen, der Text braucht zu viel Platz */
  .schalter{ min-width:44px; justify-content:center }
}