/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — mc-core.css
   Wird auf JEDER Seite geladen. Tokens, Reset, Rahmen, Navigation,
   Signaturbausteine (.bevel / .sheen), Buttons, Footer, Reveal.
   ══════════════════════════════════════════════════════════════════════ */

@property --edge { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  /* Palette */
  --noir:#06060A;
  --nuit:#0A0E18;
  --onyx:#0E0E14;
  --onyx-2:#14141B;
  --velours:#3D0E1C;
  --gold:#C9A227;
  --champagne:#F3E3B3;
  --gold-dk:#7E6417;
  --platin:#D9E0E6;

  /* Grautöne. Alle Werte auf mindestens 4,5:1 gegen --noir geprüft,
     damit auch kleine Auszeichnungen auf dem Handy lesbar bleiben. */
  --ash:#A6ACB6;      /* Auszeichnungen, Labels      ~8,4:1 */
  --ash-2:#8E949E;    /* Nebeninfos, Fußnoten        ~6,3:1 */
  --text:#C3C9D1;     /* Fließtext                  ~11,8:1 */

  /* Typografie */
  --display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --body:'Manrope','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Auszeichnungsschrift — lokal, siehe css/mc-fonts.css */
  --hl:'Montserrat','Segoe UI',system-ui,sans-serif;

  /* Höhe der fixierten Kopfleiste. js/mc-core.js überschreibt den Wert
     mit der tatsächlich gemessenen Höhe; hier steht nur der Rückfall
     für den Fall, dass kein Skript läuft. */
  --rail-h:104px;

  /* Maße */
  --cut:26px;
  --rail:clamp(14px,2.2vw,34px);
  --maxw:1320px;
  --ease:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--noir); color:var(--platin);
  font-family:var(--body); font-weight:300; line-height:1.65;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
/* overflow-x:clip statt hidden — clip erzeugt KEINEN Scroll-Container.
   Dadurch bleibt scrollWidth === clientWidth (kein seitliches Schwenken
   auf Mobilgeraeten) und es wird kein overflow-y:auto erzwungen, was
   position:sticky im Dokument zerstoeren wuerde. */
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--champagne); outline-offset:3px; }
body.nav-open{ overflow:hidden; }

/* Atmosphäre: Farbnebel + Filmkorn */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 76% -10%, rgba(61,14,28,.5), transparent 62%),
    radial-gradient(900px 640px at 6% 106%, rgba(10,14,24,.9), transparent 58%);
}
/* Filmkorn.

   Frueher mit mix-blend-mode:overlay und laufender Bewegung. Ein
   Mischmodus auf einer bildschirmfuellenden, fixierten Ebene zwingt den
   Browser bei jedem Bild zu einem zusaetzlichen Kompositionsdurchgang
   ueber die gesamte Flaeche — gemessen kostete allein das rund 14 ms
   pro Bild beim Bildlauf.

   Bei einer Deckkraft von drei Prozent ist zwischen overlay und normal
   praktisch kein Unterschied zu sehen. Die Deckkraft ist als Ausgleich
   leicht angehoben, die Koernung bleibt damit sichtbar. */
body::after{
  content:''; position:fixed; inset:-100%; z-index:9998; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes mc-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}

/* ─── Viewport-Rahmen mit Eck-Ticks ──────────────────────────────
   Liegt ÜBER der Kopfleiste. Sobald diese andockt, rückt die obere
   Linie an den Bildschirmrand, damit sie nicht durchs Menü läuft.
   ─────────────────────────────────────────────────────────────────── */
.frame{
  position:fixed; inset:var(--rail); z-index:9000; pointer-events:none;
  transition:top .45s var(--ease), left .45s var(--ease), right .45s var(--ease);
}
body.rail-pinned .frame{ top:0; left:0; right:0; }
.frame span{ position:absolute; background:linear-gradient(90deg,transparent,rgba(201,162,39,.4),transparent); }
.frame span:nth-child(1){ top:0; left:0; right:0; height:1px; }
.frame span:nth-child(2){ bottom:0; left:0; right:0; height:1px; }
.frame span:nth-child(3){ left:0; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(201,162,39,.4),transparent); }
.frame span:nth-child(4){ right:0; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(201,162,39,.4),transparent); }
.frame i{ position:absolute; width:9px; height:9px; border:1px solid var(--gold); opacity:.65; transition:opacity .35s; }
.frame i:nth-of-type(1){ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame i:nth-of-type(2){ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.frame i:nth-of-type(3){ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.frame i:nth-of-type(4){ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* Obere Ecken verschwinden im angedockten Zustand — sie hätten keinen Bezug mehr */
body.rail-pinned .frame i:nth-of-type(1),
body.rail-pinned .frame i:nth-of-type(2){ opacity:0; }
/* Bei offenem Schubfach stört der Rahmen nur */
body.nav-open .frame{ opacity:0; }

/* ─── SIGNATUR 1: facettierte Spiegelkante ───────────────────────── */
.bevel{
  position:relative; padding:1px; isolation:isolate;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(152deg,
    rgba(201,162,39,.48) 0%, rgba(201,162,39,.07) 38%,
    rgba(217,224,230,.24) 68%, rgba(201,162,39,.42) 100%);
  transition:filter .5s var(--ease), transform .5s var(--ease);
}
.bevel::before{
  content:''; position:absolute; inset:-70%; z-index:0;
  background:conic-gradient(from var(--edge),
    transparent 0 58%, rgba(201,162,39,.32) 66%, var(--champagne) 73%,
    #fff 75.5%, var(--gold) 79%, rgba(201,162,39,.22) 84%, transparent 90%);
  opacity:0; transition:opacity .5s var(--ease);
  animation:mc-edge 3.4s linear infinite;
}
@keyframes mc-edge{ to{ --edge:360deg; } }
.bevel:hover, .bevel:focus-within{ filter:drop-shadow(0 0 26px rgba(201,162,39,.2)); transform:translateY(-3px); }
.bevel:hover::before, .bevel:focus-within::before{ opacity:1; }
/* Abgeschrägte Ecken werden geschlossen.

   Die Umrandung entstand bisher allein durch padding:1px auf .bevel und
   den Farbverlauf darunter. Auf den beiden Schrägen wirkt dieser 1px
   aber nur mit dem Faktor 1/√2, also knapp 0,7px — bei einfacher
   Pixeldichte praktisch unsichtbar, die Ecken sahen offen aus.

   Deshalb werden die beiden Schrägen zusätzlich als Farbverlauf
   gezeichnet. Der senkrechte Abstand der Schräge zur Ecke beträgt
   cut / √2, daher der Faktor 0.7071. */
.bevel__in{
  --cut-in:calc(var(--cut) - 1px);
  --cut-d:calc(var(--cut-in) * .7071);
  position:relative; z-index:1; height:100%;
  clip-path:polygon(var(--cut-in) 0,100% 0,100% calc(100% - var(--cut-in)),calc(100% - var(--cut-in)) 100%,0 100%,0 var(--cut-in));
  background:
    linear-gradient(135deg,transparent calc(var(--cut-d) - 1.6px),
      rgba(201,162,39,.85) calc(var(--cut-d) - 1.6px) var(--cut-d),
      transparent var(--cut-d)),
    linear-gradient(315deg,transparent calc(var(--cut-d) - 1.6px),
      rgba(217,224,230,.5) calc(var(--cut-d) - 1.6px) var(--cut-d),
      transparent var(--cut-d)),
    linear-gradient(168deg,rgba(255,255,255,.035),transparent 46%),
    var(--onyx);
  padding:clamp(1.5rem,3vw,2.6rem);
}

/* ─── SIGNATUR 2: Gold→Platin-Sheen ──────────────────────────────── */
.sheen{
  background-image:linear-gradient(100deg,
    #6F5714 0%, var(--gold) 14%, var(--champagne) 26%, #FFFFFF 33%,
    var(--platin) 40%, var(--gold) 54%, #6F5714 70%, var(--gold) 88%, var(--champagne) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:mc-sheen 9s linear infinite;
}
@keyframes mc-sheen{ from{background-position:0% 0} to{background-position:280% 0} }

/* ─── Typografie-Bausteine ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--hl); font-size:.78rem; font-weight:600; letter-spacing:0.294em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow--c{ justify-content:center; }
.eyebrow--c::after{ content:''; width:34px; height:1px; background:linear-gradient(270deg,transparent,var(--gold)); }

/* Überschriften auf Montserrat. Bodoni Moda ist als Anzeigenschrift
   schön, aber mit ihren haarfeinen Serifen auf dunklem Grund und auf
   dem Handy schwer zu lesen. Bodoni bleibt nur noch dort, wo es
   Schmuck ist (Zitatblöcke). */
.title{
  font-family:var(--hl); font-weight:600;
  font-size:clamp(2rem,4.8vw,3.6rem); line-height:1.1; letter-spacing:-.015em;
  color:var(--platin);
}
.title em{ font-style:normal; font-weight:700; color:var(--champagne); }
h1,h2,h3,h4{ font-family:var(--hl); font-weight:600; letter-spacing:-.01em; }
h3{ font-family:var(--hl); font-weight:600; letter-spacing:-.01em; }
p{ color:var(--text); }
strong,b{ font-family:var(--hl); font-weight:600; color:var(--champagne); }
.lead{ font-size:1.02rem; color:#B8BDC5; max-width:48ch; }
.shell{ width:min(100% - calc(var(--rail)*2 + 2.5rem),var(--maxw)); margin-inline:auto; }
main > section{ position:relative; z-index:1; }

/* ─── Buttons mit Fase ───────────────────────────────────────────── */
.btn{
  --cut:11px; position:relative; padding:1px; display:inline-block;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(120deg,var(--gold),var(--champagne),var(--platin),var(--gold));
  transition:filter .4s var(--ease);
}
.btn span{
  display:block; padding:.78rem 1.5rem; background:var(--noir);
  clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
  font-family:var(--hl); font-weight:600; font-size:.76rem; letter-spacing:0.182em; text-transform:uppercase; color:var(--champagne);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.btn:hover{ filter:drop-shadow(0 0 20px rgba(201,162,39,.38)); }
.btn:hover span{ background:transparent; color:var(--noir); }
.btn--solid span{ background:transparent; color:var(--noir); font-weight:500; }
.btn--solid:hover span{ background:var(--noir); color:var(--champagne); }
.btn--lg span{ padding:1.05rem 2.4rem; font-size:.80rem; }

/* ─── Kopfleiste ─────────────────────────────────────────────────── */
/* Wichtig: minmax(0,1fr) statt 1fr. Ein blosses 1fr ist minmax(auto,1fr)
   und kann nicht unter die min-content-Breite seines Inhalts schrumpfen.
   Da .mark white-space:nowrap traegt, sprengt der Schriftzug sonst die
   Spalte und schiebt die gesamte Kopfleiste ueber den Viewport hinaus. */
.rail{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  padding:calc(var(--rail) + 1.1rem) calc(var(--rail) + 1.6rem);
  /* Kein Grid mehr. Mit drei Spalten bekam die rechte Seite dieselbe
     Breite wie die Statusanzeige links; ihr Inhalt lief über und schob
     sich über das Logo. Ein Grid kann zwei Aussenspalten nicht auf
     dieselbe Inhaltsbreite zwingen — deshalb Flex mit absolut
     zentriertem Logo. Status und Navigation sitzen an den Rändern und
     schrumpfen bei Bedarf, das Logo bleibt exakt mittig. */
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  transition:padding .45s var(--ease), background .45s var(--ease);
}
.rail.pinned{
  padding:.85rem calc(var(--rail) + 1.6rem);
  background:rgba(6,6,10,.86); backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(201,162,39,.16);
}
.status{
  display:flex; align-items:center; gap:.6rem; flex:0 1 auto; min-width:0;
  font-family:var(--hl); font-weight:600; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ash); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.status b{ color:var(--platin); font-weight:500; }
.dot{ width:6px; height:6px; flex:none; background:var(--champagne); box-shadow:0 0 0 0 rgba(243,227,179,.6); animation:mc-pulse 2.6s infinite; }
.dot--off{ background:#6B4A4A; animation:none; }
@keyframes mc-pulse{ to{ box-shadow:0 0 0 9px rgba(243,227,179,0); } }

/* Originallogo. Die frueheren Textmarken .mark__a / .mark__b bleiben
   definiert, damit aeltere Templates nicht brechen. */
/* Linke Gruppe: Statusanzeige und Schnellzugriffe. Beide gehören
   inhaltlich zusammen (was ist heute los, was kostet es) und die rechte
   Seite bleibt dadurch schmal genug, dass die Marke exakt in der
   Fenstermitte stehen kann, ohne dass die Navigation darüberläuft. */
.rail__l{ display:flex; align-items:center; gap:1.2rem; flex:0 1 auto; min-width:0; }

.mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.drawer__top .mark{ position:static; transform:none; }
.mark__img{
  display:block; width:auto; height:clamp(30px,4.4vw,42px);
  max-width:100%; object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(201,162,39,.18));
  transition:filter .4s var(--ease), opacity .3s;
}
.mark:hover .mark__img{ filter:drop-shadow(0 0 26px rgba(201,162,39,.4)); }
/* Nur fuer Screenreader und Suchmaschinen */
.mark__sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.mark__a{ display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:.34em; text-indent:.34em; }
.mark__b{ display:block; font-family:var(--hl); font-weight:600; font-size:.66rem; letter-spacing:0.35em; text-indent:0.35em; color:var(--gold); margin-top:.32rem; }

.rail__r{ display:flex; justify-content:flex-end; align-items:center; gap:1.6rem; flex:0 0 auto; }

/* ─── Schnellzugriffe in der Kopfleiste ──────────────────────────────
   Uhr -> Öffnungszeiten, Euro -> Preise. Die beiden Angaben werden am
   häufigsten gesucht, standen aber bisher nur tief in den Unterseiten.
   Auch auf dem Handy sichtbar, dort ohne Beschriftung.
   ─────────────────────────────────────────────────────────────────── */
.quick{ display:flex; align-items:center; gap:.55rem; flex:none; }
.quick__i{
  display:flex; align-items:center; gap:.5rem;
  --cut:9px;
  padding:.52rem .9rem; color:var(--champagne);
  border:1px solid rgba(201,162,39,.42); background-color:rgba(201,162,39,.06);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background .3s var(--ease), border-color .3s, color .3s;
}
.quick__i:hover, .quick__i:focus-visible{
  background-color:transparent; background-image:linear-gradient(120deg,var(--gold),var(--champagne));
  border-color:var(--champagne); color:var(--noir);
}
.quick__i svg{ width:17px; height:17px; flex:none; }
.quick__t{
  font-family:var(--hl); font-weight:600; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.menu{ display:flex; gap:.85rem; list-style:none; }
.menu > li{ position:relative; }
.menu__t{
  display:block; font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ash); position:relative; padding-block:.35rem;
  cursor:pointer; background:none; border:0; transition:color .3s;
}
.menu__t::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease), left .35s var(--ease);
}
.menu > li:hover > .menu__t,
.menu > li.open > .menu__t,
.menu > li.is-active > .menu__t{ color:var(--platin); }
.menu > li:hover > .menu__t::after,
.menu > li.open > .menu__t::after,
.menu > li.is-active > .menu__t::after{ width:100%; left:0; }

/* Untermenü. Die Brücke schließt den Spalt zwischen Titel und Platte,
   damit der Zeiger beim Hinuntergleiten nicht ins Leere fährt. */
.menu > li.has-sub::after{
  content:''; position:absolute; left:-1.2rem; right:-1.2rem; top:100%; height:1.6rem;
  display:none;
}
.menu > li.has-sub:hover::after,
.menu > li.has-sub:focus-within::after{ display:block; }

.submenu{
  --cut:12px; position:absolute; top:calc(100% + 1.1rem); left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:220px; list-style:none; padding:1px; opacity:0; visibility:hidden;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(152deg,rgba(201,162,39,.5),rgba(217,224,230,.2));
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu,
.menu > li.open > .submenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.submenu::before{
  content:''; position:absolute; inset:1px; z-index:0; background:rgba(10,10,16,.98);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
}
.submenu li{ position:relative; z-index:1; }
.submenu a{
  display:block; padding:.78rem 1.35rem; font-family:var(--hl); font-weight:600; font-size:.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ash); white-space:nowrap;
  border-bottom:1px solid rgba(217,224,230,.06);
  transition:color .3s, background .3s, padding-left .3s var(--ease);
}
.submenu li:last-child a{ border-bottom:0; }
.submenu a:hover, .submenu a.is-active{ color:var(--champagne); background:rgba(201,162,39,.09); padding-left:1.8rem; }

/* Burger */
.burger{ display:none; width:26px; height:14px; position:relative; z-index:8300; }
.burger i{ position:absolute; left:0; right:0; height:1px; background:var(--platin); transition:transform .4s var(--ease), opacity .3s; }
.burger i:nth-child(1){ top:0 } .burger i:nth-child(2){ top:6px } .burger i:nth-child(3){ top:12px }
body.nav-open .burger i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .burger i:nth-child(2){ opacity:0; }
body.nav-open .burger i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ─── Schubfach ──────────────────────────────────────────────────── */
.drawer{
  position:fixed; inset:0; z-index:8200; background:rgba(6,6,10,.98);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:grid; grid-template-rows:auto 1fr auto;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease);
}
body.nav-open .drawer{ clip-path:inset(0 0 0 0); }
.drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem calc(var(--rail) + 1.2rem);
  border-bottom:1px solid rgba(201,162,39,.2);
}
.drawer__top .mark{ justify-content:flex-start; }
.drawer__top .mark__img{ height:34px; }
.drawer__x{ width:30px; height:30px; position:relative; flex:none; }
.drawer__x::before, .drawer__x::after{
  content:''; position:absolute; left:4px; right:4px; top:14px; height:1.5px;
  background:var(--champagne); transition:background .3s;
}
.drawer__x::before{ transform:rotate(45deg); }
.drawer__x::after{ transform:rotate(-45deg); }
.drawer__x:hover::before, .drawer__x:hover::after{ background:var(--champagne); }

/* ─── Schubfach ───────────────────────────────────────────────────────
   Die Einträge standen in Bodoni bei #7C818A — das sind 2,6:1 gegen den
   Hintergrund und damit deutlich unter der Lesbarkeitsgrenze. Auf dem
   Handy wirkte das gesamte Menü dadurch blass und flau.

   Jetzt Montserrat, hellere Farbwerte und jeder Eintrag als eigene
   Fläche mit Trennlinie, damit die Trefferbereiche erkennbar sind.
   ─────────────────────────────────────────────────────────────────── */
.drawer__body{
  overflow-y:auto; padding:1.6rem calc(var(--rail) + 1.2rem) 2rem;
  display:grid; gap:1.5rem; align-content:start;
}
.dgroup__h{
  font-family:var(--hl); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  padding-bottom:.6rem; margin-bottom:.3rem;
  border-bottom:1px solid rgba(201,162,39,.28);
  display:flex; align-items:center; gap:.7rem;
}
.dgroup ul{ list-style:none; display:grid; }
.dgroup li + li{ border-top:1px solid rgba(217,224,230,.07); }
.dgroup a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.92rem .9rem .92rem 1rem;
  font-family:var(--hl); font-weight:500; font-size:1.06rem;
  color:var(--platin); position:relative;
  transition:color .3s, background .3s, padding-left .3s var(--ease);
}
/* Winkel am rechten Rand — macht die Zeile als Ziel erkennbar */
.dgroup a::after{
  content:''; width:7px; height:7px; flex:none;
  border-top:1.5px solid rgba(201,162,39,.45);
  border-right:1.5px solid rgba(201,162,39,.45);
  transform:rotate(45deg); transition:border-color .3s, transform .3s var(--ease);
}
.dgroup a::before{
  content:''; position:absolute; left:0; top:.5rem; bottom:.5rem; width:2px;
  background:linear-gradient(180deg,var(--champagne),var(--gold));
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.dgroup a:hover, .dgroup a.is-active{
  color:var(--champagne); background:rgba(201,162,39,.07); padding-left:1.5rem;
}
.dgroup a:hover::before, .dgroup a.is-active::before{ transform:scaleY(1); }
.dgroup a:hover::after, .dgroup a.is-active::after{ border-color:var(--gold); transform:rotate(45deg) translate(2px,-2px); }
.dgroup a.is-active{ font-weight:700; }

.dgroup--solo .dgroup__h--link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--hl); font-weight:700; font-size:1.14rem; letter-spacing:0;
  text-transform:none; color:var(--champagne);
  border-bottom:1px solid rgba(201,162,39,.28);
  padding:0 0 .7rem; transition:color .3s;
}
.dgroup--solo .dgroup__h--link::after{
  content:''; width:7px; height:7px;
  border-top:1.5px solid rgba(201,162,39,.5); border-right:1.5px solid rgba(201,162,39,.5);
  transform:rotate(45deg);
}
.dgroup--solo .dgroup__h--link.is-active{ color:var(--gold); }

.drawer__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  padding:1.5rem calc(var(--rail) + 1.2rem) calc(var(--rail) + 1.5rem);
  border-top:1px solid rgba(201,162,39,.2);
}
.drawer__status{
  display:flex; align-items:center; gap:.6rem; margin:0;
  font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:0.154em; text-transform:uppercase; color:var(--ash);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.foot{ position:relative; z-index:1; border-top:1px solid rgba(201,162,39,.2); padding:4.5rem 0 2.5rem; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.6rem; }
.foot h4{ font-family:var(--hl); font-size:.72rem; letter-spacing:0.21em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:1.1rem; }
.foot ul{ list-style:none; display:grid; gap:.55rem; }
.foot a, .foot li{ font-size:.92rem; color:#8E939B; transition:color .3s; }
.foot a:hover{ color:var(--champagne); }
.foot__mark{ font-family:var(--display); font-size:1.5rem; letter-spacing:.16em; }
.foot__logo{ display:block; width:auto; height:46px; max-width:100%; object-fit:contain; margin-bottom:.2rem; }
.foot__note{ font-size:.85rem; margin-top:1rem; max-width:34ch; }
/* ─── Besucherzähler ────────────────────────────────────────────────── */
.foot__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;
  margin-top:2.6rem; padding-top:1.8rem;
  border-top:1px solid rgba(201,162,39,.16);
}
.fstat{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.fstat__k{
  font-family:var(--hl); font-weight:600; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash-2);
}
.fstat__v{
  font-family:var(--hl); font-weight:700; font-size:1.35rem;
  color:var(--champagne); font-variant-numeric:tabular-nums; line-height:1;
}

/* Widerruf muss so leicht sein wie die Zustimmung — daher als
   vollwertiger Link gestaltet, nicht als versteckte Schaltfläche. */
.foot__cookie{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
  text-underline-offset:.25em; text-decoration-color:rgba(201,162,39,.5);
}
.foot__cookie:hover{ color:var(--champagne); text-decoration-color:var(--gold); }

.foot__bar{
  margin-top:3.4rem; padding-top:1.6rem; border-top:1px solid rgba(217,224,230,.08);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-family:var(--hl); font-weight:600; font-size:.70rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash-2);
}
.age{ border:1px solid rgba(201,162,39,.4); color:var(--gold); padding:.3rem .6rem; }

/* ─── Scroll-Reveal ──────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ─── Hover-Ersatz auf Touch-Geräten ──────────────────────────────────
   Ohne Zeiger greift kein :hover. Die Seite wirkte dadurch auf dem
   Handy deutlich flauer als auf dem Schreibtisch: Bilder blieben
   entsättigt, Kacheln ohne Glanzkante.

   .in-view  setzt js/mc-core.js einmalig, sobald das Element sichtbar
             war — für alles, was dauerhaft bleiben soll (Farbe).
   .is-near  wird gesetzt, solange das Element im mittleren Drittel
             steht — für alles, was mitwandern soll (Glanz, Anhebung).
   ─────────────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  /* ─── Bildlauf entlasten ────────────────────────────────────────────
     Gemessen bei sechsfach gedrosselter CPU, 390px, dreifache
     Pixeldichte, 150 Bilder Bildlauf:

         Ausgangszustand          Median 30,8 ms   41 % über 33 ms
         nach diesen Regeln       Median 16,3 ms    1 % über 33 ms

     Zwei Ursachen, beide nur auf Touch-Geräten entschärft — am
     Schreibtisch sind die Effekte bezahlbar und bleiben erhalten.

     1. Das Filmkorn liegt als fixierte Ebene über der ganzen Seite und
        mischt sich per mix-blend-mode ein. Ein Mischmodus auf einer
        bildschirmfüllenden Ebene zwingt den Browser bei JEDEM Bild zu
        einem zusätzlichen Kompositionsdurchgang über die gesamte
        Fläche. Allein das kostete 7 ms pro Bild.

     2. Die Kopfleiste unschärft ihren Hintergrund. Bei einem fixierten
        Element bedeutet das: bei jedem Bildlauf wird der durchscheinende
        Bereich neu abgetastet und weichgezeichnet. Kostete 2 ms.

     Nicht angefasst: die umlaufende Randanimation der Kacheln. Die
     stand zuerst im Verdacht, ist aber nachweislich kostenneutral
     (16,9 gegenüber 16,4 ms über drei Läufe — reines Rauschen). */
  .rail{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(6,6,10,.94); }

  .bevel.is-near{ filter:drop-shadow(0 0 26px rgba(201,162,39,.2)); transform:translateY(-3px); }
  .bevel.is-near::before{ opacity:1; }
  .mark__img{ filter:drop-shadow(0 0 22px rgba(201,162,39,.3)); }
  /* Die Fußzeilen-Links bekommen etwas mehr Kontrast, da der
     Hover-Aufhellwert nie erreicht wird */
  .foot a{ color:var(--text); }
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1340px){
  /* Nachgerechnet: rechts neben der mittig stehenden Marke bleiben bei
     1340px rund 500px. Die Navigation braucht knapp darunter. Schmaler
     als das wäre nur mit gekürzten Beschriftungen zu haben. */
  .menu{ display:none; } .burger{ display:block; }
}
@media (max-width:1024px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem 1rem; }
}
@media (max-width:900px){
  /* Nur die Symbole. Rahmen und Hintergrund fallen weg — zwei gerahmte
     Kästchen direkt neben dem Logo wirkten wie ein zweites Menü und
     nahmen der Marke die Ruhe. Die Trefferfläche bleibt bei 44px, auch
     wenn optisch nur das Symbol steht. */
  .quick__t{ display:none; }
  .quick{ gap:.15rem; }
  .quick__i{ width:44px; height:44px; padding:0; justify-content:center; }
  .quick__i svg{ width:22px; height:22px; }
  .rail__r{ gap:.9rem; }
}
@media (max-width:680px){
  :root{ --cut:20px; }
  .status{ display:none; }
  .foot__grid{ grid-template-columns:1fr; }
  .mark__img{ height:30px; }
  /* Rueckfall, falls irgendwo noch die Textmarke benutzt wird */
  .mark__a{ font-size:.92rem; letter-spacing:.22em; text-indent:.22em; }
  .mark__b{ font-size:.66rem; letter-spacing:.3em;  text-indent:.3em; }
}
@media (max-width:400px){
  .rail{ padding-inline:calc(var(--rail) + .9rem); }
  .mark__img{ height:27px; }
  .drawer__top .mark__img{ height:30px; }
  .mark__a{ font-size:.86rem; letter-spacing:.16em; text-indent:.16em; }
  .mark__b{ letter-spacing:.2em; text-indent:.2em; }
  .drawer__top .mark__b{ display:none; }
  /* ─── Besucherzähler ────────────────────────────────────────────────── */
.foot__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;
  margin-top:2.6rem; padding-top:1.8rem;
  border-top:1px solid rgba(201,162,39,.16);
}
.fstat{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.fstat__k{
  font-family:var(--hl); font-weight:600; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash-2);
}
.fstat__v{
  font-family:var(--hl); font-weight:700; font-size:1.35rem;
  color:var(--champagne); font-variant-numeric:tabular-nums; line-height:1;
}

/* Widerruf muss so leicht sein wie die Zustimmung — daher als
   vollwertiger Link gestaltet, nicht als versteckte Schaltfläche. */
.foot__cookie{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
  text-underline-offset:.25em; text-decoration-color:rgba(201,162,39,.5);
}
.foot__cookie:hover{ color:var(--champagne); text-decoration-color:var(--gold); }

.foot__bar{ font-size:.66rem; letter-spacing:.14em; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Fasen schliessen — kleine Elemente

   Diese Elemente kombinieren `border` mit `clip-path`. Der Beschnitt
   schneidet die Umrandung auf den beiden Schrägen restlos weg, dort
   klaffte die Ecke also offen. Anders als bei .bevel hilft hier auch
   kein Farbverlauf im Hintergrund, weil gar keine Randfläche existiert.

   Gezeichnet werden die Schrägen deshalb als Hintergrundverläufe. Der
   senkrechte Abstand einer Schräge zur Ecke ist cut / √2, daher 0.7071.

   background-image statt background, damit die Grundfarbe erhalten
   bleibt. Diese Regel muss hinter allen Basisdefinitionen stehen.
   ══════════════════════════════════════════════════════════════════════ */
.quick__i,
.btn span{
  --cut-d:calc(var(--cut,10px) * .7071);
  background-image:
    linear-gradient(135deg,transparent calc(var(--cut-d) - 1.5px),
      var(--fase,rgba(201,162,39,.6)) calc(var(--cut-d) - 1.5px) var(--cut-d),
      transparent var(--cut-d)),
    linear-gradient(315deg,transparent calc(var(--cut-d) - 1.5px),
      var(--fase,rgba(201,162,39,.6)) calc(var(--cut-d) - 1.5px) var(--cut-d),
      transparent var(--cut-d));
}

/* Der Knopf hat innen schon den Verlauf als Rand — dort genügt eine
   dezentere Linie, sonst wirkt die Ecke überzeichnet. */
.quick__i{ --fase:rgba(201,162,39,.85); }
.btn span{ --fase:rgba(201,162,39,.9); }
.btn--solid span{ --fase:rgba(6,6,10,.35); }

/* ══════════════════════════════════════════════════════════════════════
   Schnellzugriffe auf schmalen Schirmen: nur die Symbole

   Diese Regeln stehen bewusst am Dateiende, hinter dem Fasen-Block.
   Standen sie weiter oben im Medienblock, setzte der spätere Fasen-Block
   die beiden Eckverläufe wieder — und da hier gleichzeitig clip-path
   entfällt, wurden sie nicht mehr in die Ecke geschnitten, sondern
   standen als lose Striche neben den Symbolen.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .quick__i,
  .quick__i:hover,
  .quick__i:focus-visible{
    border-color:transparent;
    background-color:transparent;
    background-image:none;
    clip-path:none;
  }
  .quick__i{ color:var(--gold); }
  .quick__i:hover, .quick__i:focus-visible{ color:var(--champagne); }
}