/* Logofarben hier zentral aendern */
:root{ --ink:#1B1F2A; --accent:#CFA421; --warm:#F3ECDA; --muted:#63697A; --accentText:#7A5F0F; --line:rgba(27,31,42,0.12); --bg:#FBF7EC; --navbg:rgba(251,247,236,0.93); --dark:#1B1F2A; --btn:#1B1F2A; --btnText:#F4F6FA; --focus:#1B1F2A;
  --ok:#3F7D35; --warn:#B3402E; --neutral:#A6A6A6; --on-accent:#14110E; --gold-dark:#D8C08E;
  --accent:#D8C08E; --night:#0B0A0C; --night-card:#141215; --bordeaux:#5B0E1E; --bone:#EDE7DD; }
html[data-theme="dark"]{ --accentText:#F1D187; --ink:#F4F6FA; --warm:#181C28; --muted:#A8AEBB; --line:rgba(244,246,250,0.14); --bg:#0F1219; --navbg:rgba(15,18,25,0.88); --dark:#181C28; --btn:#F4F6FA; --btnText:#12151F; --focus:#CFA421; }
[data-light-ui="true"]{ --accentText:#7A5F0F; --ink:#1B1F2A; --warm:#F3ECDA; --muted:#63697A; --accentText:#7A5F0F; --line:rgba(27,31,42,0.12); --bg:#FBF7EC; --dark:#1B1F2A; --btn:#1B1F2A; --btnText:#F4F6FA; --focus:#1B1F2A; }
/* Variante D: ein Grund, ein Metall, Bordeaux sparsam.
   Vollbreite ueber ::before, weil die Stufen auf max-width zentriert sind
   und sonst nur ihre eigene Spalte einfaerben (Treppeneffekt). */
#noche{ overflow-x:hidden; }
#noche > div{ position:relative; }
#etapa4::before,#etapa5::before,#etapa6::before{ content:''; position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw; z-index:0; background:var(--night); }
#noche > div > *{ position:relative; z-index:1; }
html:not([data-theme="dark"]) #etapa1,
html:not([data-theme="dark"]) #etapa2,
html:not([data-theme="dark"]) #etapa3{ --ink:#1B1F2A; --muted:#63697A; --line:rgba(27,31,42,0.12); --accentText:#6B5426; }
#etapa4,#etapa5,#etapa6{ --ink:var(--bone); --muted:#A79E92; --line:rgba(237,231,221,0.14);
  --accentText:#D8C08E; --bg:var(--night-card); --warm:var(--night-card); }
#mailblock{ position:relative; padding-bottom:56px; --ink:var(--bone); --muted:#A79E92;
  --line:rgba(237,231,221,0.14); --accentText:#D8C08E; --bg:var(--night-card); --warm:var(--night-card); }
#mailblock::before{ content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw);
  width:100vw; z-index:0; background:var(--night); }
#mailblock > *{ position:relative; z-index:1; }
#web{ overflow-x:hidden; }

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;padding-bottom:110px;font-family:'Manrope',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accentText);text-decoration:none}
a:hover{color:#A8851A}
*{box-sizing:border-box}
input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px}
@keyframes omPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
/* Hero: Teller dreht sich beim Kartenwechsel (Lazy-Susan-Geste) */
.hplate{transition:transform 1.1s cubic-bezier(0.22,1,0.36,1)}
.hthumb{transition:transform .25s cubic-bezier(0.22,1,0.36,1),border-color .25s ease,opacity .25s ease}
.hthumb:hover{transform:translateY(-3px)}
/* Auswahlreihe: rechte Kante ausblenden, damit sichtbar ist dass es weitergeht */
.hrow{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
/* Organische Form als Hintergrundebene HINTER dem Inhalt.
   Absolute Radien statt Prozent: Prozentwerte erzeugen eine Ellipse, deren
   einbeschriebenes Rechteck viel kleiner ist als der Inhaltskasten — dann
   haengt der Text ueber der Kante. Asymmetrische feste Radien geben dieselbe
   handgezeichnete Anmutung, ohne die Ecken aufzufressen. */
.hblob{border-radius:118px 72px 104px 84px / 88px 116px 76px 100px}
@media (max-width:900px){ .hblob{border-radius:64px 40px 56px 46px / 48px 62px 42px 54px} }
@media (max-width:560px){ .hblob{border-radius:28px} }
@media (prefers-reduced-motion: reduce){ .hplate{transition:none} .hthumb:hover{transform:none} }
[data-stepper-row]::-webkit-scrollbar,[data-tab-row]::-webkit-scrollbar{display:none}