/* ==========================================================================
   Daniel Kallenbach — Bewusstsein. Präsenz. Wirkung.
   Ein Akzent, eine Bewegungssignatur, vier Hintergrund-Ebenen.
   ========================================================================== */

:root{
  /* Energie — Farbton wird per JS aus dem Scroll-Fortschritt gesetzt.
     Startwert ist das Orange #FF9130, Ziel am Seitenende #309EFF. */
  --eh: 28.1; --es: 100%; --el: 59.4%;
  --energy:      hsl(var(--eh) var(--es) var(--el));
  --energy-soft: hsl(var(--eh) var(--es) var(--el) / .14);
  --energy-line: hsl(var(--eh) var(--es) var(--el) / .50);

  --bg:        #08080a;
  --bg-2:      #0c0c0f;
  --ink:       #efece6;
  --ink-dim:   #cac6be;
  --ink-faint: #75726b;
  --line:      rgba(239,236,230,.10);
  --line-2:    rgba(239,236,230,.16);

  --ease: cubic-bezier(.22,1,.36,1);     /* die eine Bewegungssignatur */
  --maxw: 1180px;
  --pad:  clamp(22px, 5vw, 64px);

  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
em,i{font-style:normal}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.1rem, .85rem + .7vw, 1.32rem);
  font-weight:400; line-height:1.66; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Hintergrund-Ebenen ----------
   0 atmos · 1 canvas · 2 vignette · 3 content                              */
#atmos{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 30%, hsl(var(--eh) var(--es) 50% / .10), transparent 70%);
  transition:background .6s linear;
}
/* Höhe bewusst über lvh statt inset:0 — mobile Browser verkleinern fixierte
   Elemente mit sichtbarer Adressleiste, was das Feld sonst neu aufbaut. */
/* width/height explizit: ein canvas ist ein ersetztes Element und würde bei
   width:auto seine Eigenbreite behalten statt right:0 zu folgen. */
#energyField{position:fixed; top:0; left:0; width:100%;
  height:100vh; height:100lvh;
  z-index:1; pointer-events:none; display:block; opacity:0}
/* Kontakt und ähnliche Seiten starten direkt im Endzustand der Reise. */
body.field-end #energyField{opacity:1}
#vignette{position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(125% 90% at 50% 32%, transparent 46%, rgba(5,5,7,.5) 82%, rgba(3,3,5,.93) 100%),
    linear-gradient(to bottom, rgba(4,4,6,.55) 0%, transparent 14%, transparent 85%, rgba(3,3,5,.9) 100%);
}
.shell{position:relative; z-index:3}
.shell>section:not(.energybody){background:rgba(8,8,11,.5)}

/* ---------- Fortschrittsbalken ---------- */
#progress{position:fixed; top:0; left:0; height:2px; width:0%; z-index:80;
  background:linear-gradient(90deg, hsl(var(--eh) var(--es) var(--el) / .15), var(--energy));
  box-shadow:0 0 16px hsl(var(--eh) var(--es) var(--el) / .55);
}

/* ---------- Navigation (ein Ziel) ---------- */
nav{position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:clamp(16px, 1.7vw, 27px) var(--pad);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav-end{display:flex; align-items:center; gap:clamp(14px, 1.6vw, 28px); min-width:0}
.nav-links{display:flex; align-items:center; gap:clamp(16px, 1.8vw, 28px)}
.nav-links > a, .nav-drop-btn{
  font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
  white-space:nowrap; transition:color .3s var(--ease);
  background:none; border:0; padding:0; cursor:pointer
}
.nav-links > a:hover, .nav-links > a.is-on,
.nav-drop-btn:hover, .nav-drop-btn.is-on, .nav-drop.is-open .nav-drop-btn{color:var(--ink)}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex; align-items:center; gap:.42em}
.nav-drop-btn::after{
  content:""; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.55;
  transition:transform .25s var(--ease)
}
.nav-drop.is-open .nav-drop-btn::after, .nav-drop:hover .nav-drop-btn::after{transform:rotate(180deg)}
/* Brücke zwischen Wort und Liste, sonst bricht Hover in der Lücke ab. */
.nav-drop::after{content:""; position:absolute; left:0; right:0; top:100%; height:16px}
.nav-drop-list{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:214px; padding:8px; border-radius:14px; z-index:80;
  background:rgba(10,10,14,.94); border:1px solid var(--line-2);
  backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), visibility .2s var(--ease)
}
.nav-drop:hover .nav-drop-list, .nav-drop:focus-within .nav-drop-list,
.nav-drop.is-open .nav-drop-list{opacity:1; visibility:visible; pointer-events:auto}
.nav-drop-list a{
  font-family:var(--sans); font-size:.9rem; letter-spacing:.02em; text-transform:none;
  color:var(--ink-dim); text-decoration:none; padding:.7em .9em; border-radius:9px
}
.nav-drop-list a:hover, .nav-drop-list a.is-on{color:var(--ink); background:rgba(255,255,255,.06)}
.nav-toggle{
  display:none; width:42px; height:42px; margin:0; padding:0; border:0; background:transparent;
  cursor:pointer; position:relative; flex:0 0 auto
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease), opacity .2s var(--ease)
}
.nav-toggle span:first-child{top:16px}
.nav-toggle span:last-child{top:24px}
.nav-toggle[aria-expanded="true"] span:first-child{top:20px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{top:20px; transform:rotate(-45deg)}

nav.scrolled{padding-top:clamp(12px, 1.2vw, 19px); padding-bottom:clamp(12px, 1.2vw, 19px);
  background:rgba(8,8,11,.62); backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%); border-bottom-color:var(--line);
}
.brand{font-family:var(--sans); font-weight:500;
  font-size:clamp(.74rem, .63rem + .32vw, .95rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center;
  gap:clamp(13px, 1.1vw, 19px);
}
.vmark{height:clamp(23px, 2.3vw, 36px); width:auto; display:block; flex:0 0 auto;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}

/* ---------- Buttons (eine Form, ein Akzent) ---------- */
.btn{--ba:.12;
  font-family:var(--sans); font-weight:500;
  font-size:clamp(.82rem, .75rem + .21vw, .96rem);
  letter-spacing:.04em; color:var(--ink); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.92em 1.55em; border-radius:999px; cursor:pointer;
  background:hsl(var(--eh) var(--es) var(--el) / var(--ba));
  border:1px solid hsl(var(--eh) var(--es) var(--el) / .48);
  transition:transform .2s var(--ease), background .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{--ba:.2; border-color:hsl(var(--eh) var(--es) var(--el) / .85);
  box-shadow:0 12px 48px hsl(var(--eh) var(--es) var(--el) / .22)}
.btn:active{transform:scale(.97)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-lg{padding:1.05em 2em; font-size:clamp(.92rem, .84rem + .28vw, 1.1rem)}
nav .btn{padding:.8em 1.5em; font-size:clamp(.74rem, .66rem + .27vw, .94rem)}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--ink-dim)}
.btn-ghost:hover{color:var(--ink); border-color:hsl(var(--eh) var(--es) var(--el) / .55); box-shadow:none}

/* ---------- Rotierender Licht-Rand auf primären CTAs ---------- */
@property --beamA{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
.beam{position:relative; z-index:0}
.beam::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--beamA),
    transparent 0deg, transparent 228deg,
    hsl(var(--eh) var(--es) var(--el) / .85) 310deg,
    #ffffff 340deg,
    hsl(var(--eh) var(--es) var(--el) / .85) 356deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:beamspin 3.6s linear infinite;
}
@keyframes beamspin{ to{ --beamA:360deg } }
@media (prefers-reduced-motion: reduce){ .beam::before{animation:none} }

/* ---------- Primitives ---------- */
/* scroll-margin folgt der Navigationshöhe, sonst verschwindet die
   Überschrift beim Ankersprung unter der fixierten Leiste. */
section{position:relative; padding-block:clamp(96px, 15vh, 200px);
  scroll-margin-top:clamp(88px, 8vw, 118px)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.measure{max-width:60ch}
.eyebrow{font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:.85em; margin:0 0 1.5em;
}
.eyebrow::before{content:""; width:26px; height:1px;
  background:hsl(var(--eh) var(--es) var(--el) / .85); transition:background .6s linear}

h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; color:var(--ink)}
h1{font-size:clamp(2.6rem, 1.2rem + 5vw, 4.9rem); line-height:1.04; letter-spacing:-.028em}
h2{font-size:clamp(1.95rem, 1.1rem + 3vw, 3.5rem); line-height:1.1; letter-spacing:-.022em}
h1 em, h2 em, .accent{font-style:normal; color:var(--energy); transition:color .6s linear}
.lede{font-family:var(--serif); color:var(--ink);
  font-size:clamp(1.3rem,.9rem+1vw,1.7rem); line-height:1.45}
p{margin:0 0 1.1em}

/* Manifest-Fluss: kurze, verdichtete Zeilen */
.verse{color:var(--ink-dim); font-size:clamp(1.18rem,.9rem+.8vw,1.46rem);
  line-height:1.66; letter-spacing:.004em}
.verse p{margin:0 0 .55em}
.verse .gap{height:1.35em}
.verse strong{color:var(--ink); font-weight:500}
.verse .hot{color:var(--energy); font-style:normal; transition:color .6s linear}
.verse a{color:var(--energy); text-decoration:none; border-bottom:1px solid var(--energy-line)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(150px, 13vw, 210px) clamp(56px,9vh,108px)}
/* picture reicht die Größenangaben durch, damit width/height der Bilder
   weiterhin gegen .hero-media beziehungsweise .figure aufgelöst werden. */
picture{display:contents}

.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,9,.94) 1%, rgba(6,6,9,.6) 30%, rgba(6,6,9,.32) 60%, rgba(6,6,9,.5) 100%),
             linear-gradient(to right, rgba(6,6,9,.62), transparent 62%)}
.hero-inner{position:relative; z-index:2; width:100%}
.hero h1{max-width:18ch; text-shadow:0 2px 44px rgba(0,0,0,.55)}
.hero h1 .l2{display:block; color:var(--ink-dim)}
.hero .rotor{text-shadow:0 1px 22px rgba(0,0,0,.5)}
.hero .cta-micro{color:var(--ink-dim)}
.rotor{font-family:var(--serif); font-style:normal; margin-top:1.6rem;
  font-size:clamp(1.35rem,.95rem+1.1vw,1.85rem); color:var(--ink-dim); line-height:1.3}
.rotor .word{color:var(--energy); font-style:normal; display:inline-block; min-width:1ch;
  transition:opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease)}
.rotor .word.out{opacity:0; filter:blur(7px); transform:translateY(-.12em)}
.hero-cta{margin-top:2.7rem; display:flex; gap:15px; flex-wrap:wrap; align-items:center}

/* ---------- Editorial Split ---------- */
.split{display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,80px); align-items:center}
@media(min-width:940px){
  .split{grid-template-columns:1.04fr .96fr}
  .split.rev .t{order:2} .split.rev .m{order:1}
}
.figure{position:relative; border-radius:16px; overflow:hidden; background:var(--bg-2);
  aspect-ratio:4/5; box-shadow:0 50px 130px rgba(0,0,0,.55)}
.figure.tall{aspect-ratio:3/4}
.figure img{width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.02) saturate(.98)}
.figure::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,6,9,.5), transparent 42%),
             radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(6,6,9,.4))}
.figure .ring{position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 0 1px hsl(var(--eh) var(--es) var(--el) / .16); transition:box-shadow .6s linear}
.figcap{position:absolute; left:18px; bottom:15px; z-index:2; font-family:var(--sans);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,236,230,.82)}

/* ---------- Pull-Quote ---------- */
.pull{padding-block:clamp(96px,17vh,190px); text-align:center}
.pull blockquote{margin:0 auto; max-width:22ch; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem,1.1rem+3.8vw,4.4rem); line-height:1.1; letter-spacing:-.018em; color:var(--ink)}
.pull .src{margin-top:1.7rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint)}

/* ---------- Definition ---------- */
.define{border-left:1px solid hsl(var(--eh) var(--es) var(--el) / .55);
  padding-left:clamp(20px,3vw,36px); margin:2.2rem 0 .4rem; transition:border-color .6s linear}
.define p{font-family:var(--serif); color:var(--ink);
  font-size:clamp(1.3rem,.95rem+1vw,1.7rem); line-height:1.42; margin:0}

/* ---------- Sechs Kräfte ---------- */
.kraefte{display:grid; grid-template-columns:1fr; margin-top:clamp(44px,6vw,76px);
  border-top:1px solid var(--line)}
@media(min-width:840px){.kraefte{grid-template-columns:1fr 1fr; column-gap:clamp(54px,6vw,104px)}}
.kraft{display:grid; grid-template-columns:auto 1fr; gap:1.3em;
  padding:clamp(24px,3vw,34px) 0; border-bottom:1px solid var(--line); align-items:baseline}
.kraft .no{font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.06em;
  color:hsl(var(--eh) var(--es) var(--el) / .85); padding-top:.5em; transition:color .6s linear}
.kraft h3{font-size:clamp(1.75rem,1rem+1.8vw,2.45rem); line-height:1.05; margin-bottom:.3em}
.kraft p{margin:0; color:var(--ink-dim); font-size:1.08rem; line-height:1.42}

/* ---------- Manifest-Liste ---------- */
.creed{list-style:none; margin:clamp(36px,5vw,60px) 0 0; padding:0; max-width:32ch}
.creed li{font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1rem+2.1vw,2.5rem); line-height:1.24; color:var(--ink-dim);
  padding:.36em 0; border-bottom:1px solid var(--line)}
.creed li b{color:var(--ink); font-weight:500}
.creed li:last-child{border-bottom:0}
.creed li em{font-style:normal; color:var(--energy); transition:color .6s linear}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-top:clamp(40px,5vw,64px)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; padding:1.25em 0; display:flex; gap:1em;
  align-items:baseline; justify-content:space-between; font-family:var(--serif);
  font-size:clamp(1.3rem,.95rem+.8vw,1.6rem); color:var(--ink); transition:color .3s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.qa .sign{font-family:var(--sans); font-size:1.4rem; line-height:1;
  color:hsl(var(--eh) var(--es) var(--el) / .9); flex:0 0 auto;
  transition:transform .35s var(--ease), color .6s linear}
.qa[open] .sign{transform:rotate(45deg)}
.qa .ans{font-family:var(--sans); font-size:1.02rem; line-height:1.6; color:var(--ink-dim);
  max-width:64ch; padding:0 0 1.5em; margin:0}

/* ---------- Call / Formular ---------- */
.call{position:relative}
.call .grid{display:grid; grid-template-columns:1fr; gap:clamp(44px,6vw,84px); align-items:center}
@media(min-width:1000px){.call .grid{grid-template-columns:1.05fr .95fr}}
.call h2{font-size:clamp(2.4rem,1.4rem+4vw,4.6rem)}
.cta-micro{font-family:var(--sans); font-size:.8rem; letter-spacing:.04em;
  color:var(--ink-faint); margin:1.4rem 0 0}
.gains{list-style:none; margin:1.8rem 0 0; padding:0; max-width:46ch;
  display:flex; flex-direction:column; gap:1.05em}
.gains li{display:grid; grid-template-columns:auto 1fr; gap:.85em; align-items:start;
  font-family:var(--sans); font-size:1.02rem; line-height:1.5; color:var(--ink)}
.gains .g-ic{color:hsl(var(--eh) var(--es) var(--el) / .95); font-weight:600;
  transition:color .6s linear; line-height:1.5}
.scarce{font-family:var(--sans); font-size:.86rem; color:var(--ink-faint); margin:1.1rem 0 0}
.risk{font-family:var(--sans); font-size:.92rem; letter-spacing:.01em; color:var(--ink-dim);
  margin-top:1.6rem; display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap}
.risk .pip{width:6px; height:6px; border-radius:50%;
  background:hsl(var(--eh) var(--es) var(--el) / .9); transition:background .6s linear}

.cardform{background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
  border:1px solid var(--line-2); border-radius:20px; padding:clamp(26px,3.4vw,40px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.cardform h3{font-size:clamp(1.5rem,1rem+1.1vw,2rem); margin-bottom:.25em}
.cardform .sub{font-family:var(--sans); font-size:.9rem; color:var(--ink-faint); margin-bottom:1.6em}
.field{display:flex; flex-direction:column; gap:.5em; margin-bottom:1.05em}
.field label{font-family:var(--sans); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint)}
.field label .opt{text-transform:none; letter-spacing:0; color:var(--ink-faint); opacity:.7}
.field input, .field textarea{font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:rgba(0,0,0,.28); border:1px solid var(--line-2); border-radius:11px;
  padding:.85em 1em; width:100%; resize:vertical;
  transition:border-color .25s var(--ease), background .25s var(--ease)}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-faint)}
.field input:focus, .field textarea:focus{outline:none;
  border-color:hsl(var(--eh) var(--es) var(--el) / .7); background:rgba(0,0,0,.4)}
.field.invalid input, .field.invalid textarea{border-color:#c8694e}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.cardform .btn{width:100%; margin-top:.4em}
.cardform .btn[disabled]{opacity:.6; pointer-events:none}
.form-note{font-family:var(--sans); font-size:.78rem; color:var(--ink-faint);
  margin:1em 0 0; text-align:center}
.form-status{font-family:var(--sans); font-size:.88rem; margin:1em 0 0;
  text-align:center; min-height:1em}
.form-status.err{color:#e09177}
.form-status a{color:var(--energy); text-decoration:underline; text-underline-offset:3px}
.done{text-align:center; padding:1em 0}
.done .mark{width:54px; height:54px; margin:0 auto 1.1em; border-radius:50%;
  border:1px solid hsl(var(--eh) var(--es) var(--el) / .6); display:grid; place-items:center}
.done .mark svg{width:24px; height:24px; stroke:var(--energy); fill:none; stroke-width:1.6}
.done h3{margin-bottom:.3em}
.done p{font-family:var(--sans); font-size:.95rem; color:var(--ink-dim); max-width:38ch; margin:0 auto}

/* Buchungs-Umschalter (Kalender / Nachricht) */
.bookswitch{display:flex; gap:4px; margin-bottom:1.5em; background:rgba(0,0,0,.28);
  border:1px solid var(--line); border-radius:12px; padding:4px}
.bswitch{flex:1; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink-faint); background:transparent; border:1px solid transparent; border-radius:9px;
  padding:.7em .5em; cursor:pointer;
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease)}
.bswitch:hover{color:var(--ink-dim)}
.bswitch.is-on{color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border-color:var(--line-2)}
.bswitch:focus-visible{outline:2px solid var(--energy-line); outline-offset:2px}
.bookpane[hidden]{display:none}
.cal-frame{position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2)}
#cal-widget{border-radius:14px; min-height:630px}
.cal-empty{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4em; height:630px; padding:32px; text-align:center;
  color:var(--ink-faint); font-family:var(--sans); font-size:.85rem;
  letter-spacing:.02em; line-height:1.8}
.cal-mark{width:64px; height:auto; display:block; opacity:.55}
@media (max-width:560px){ .cal-empty{height:600px} }

/* ---------- Essays ---------- */
.essays{border-top:1px solid var(--line)}
.essay-grid{display:grid; grid-template-columns:1fr; gap:1px; margin-top:clamp(36px,5vw,56px);
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(min-width:760px){.essay-grid{grid-template-columns:1fr 1fr}}
.essay{display:block; text-decoration:none; background:var(--bg);
  padding:clamp(26px,3vw,40px); transition:background .35s var(--ease)}
.essay:hover{background:var(--bg-2)}
.essay .k{font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:hsl(var(--eh) var(--es) var(--el) / .85); transition:color .6s linear}
.essay h3{font-size:clamp(1.5rem,1rem+1.1vw,2rem); margin:.7em 0 .4em; line-height:1.12}
.essay p{font-family:var(--sans); font-size:.95rem; color:var(--ink-dim); margin:0; line-height:1.55}
.essay .more{font-family:var(--sans); font-size:.8rem; color:var(--ink-faint);
  margin-top:1.1em; display:inline-flex; gap:.5em; align-items:center}
.essay.soon{pointer-events:none}
.essay.soon .k{color:var(--ink-faint)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:clamp(56px,8vh,92px) 0 48px;
  position:relative; z-index:3;
  background:linear-gradient(180deg, rgba(8,8,11,0), rgba(8,8,11,.94) 20%, #07070a 46%)}
.foot-close{text-align:center; max-width:600px; margin:0 auto;
  padding-bottom:clamp(44px,6vw,68px); display:flex; flex-direction:column; align-items:center}
.foot-logo{height:clamp(58px,7vw,88px); width:auto; display:block; margin-bottom:1.15rem}
.foot-name{font-family:var(--sans); font-weight:500; font-size:.78rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink); margin:0 0 1.9rem}
.foot-line{font-family:var(--serif); font-weight:500;
  font-size:clamp(1.35rem,1rem+1.5vw,2rem); line-height:1.32; letter-spacing:-.01em;
  color:var(--ink); max-width:22ch; margin-bottom:2.1rem}
.foot-micro{margin-top:1.4rem; font-family:var(--sans); font-size:.82rem;
  letter-spacing:.02em; color:var(--ink-faint)}
.copyright{margin-top:clamp(40px,6vw,60px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint)}
.copyright a{color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line);
  transition:color .4s linear, border-color .4s linear}
.copyright a:hover{color:var(--ink); border-color:var(--ink-dim)}
.credit{color:var(--ink-faint)}

/* ---------- Energiekörper-Bühne ---------- */
.energybody{position:relative; min-height:118vh; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-block:clamp(96px,16vh,180px)}
.eb-overlay{position:relative; z-index:2; text-align:center; pointer-events:none;
  padding:0 var(--pad); transform:translateY(1vh)}
.eb-eyebrow{justify-content:center; color:var(--ink-faint); margin-bottom:1.5em}
.eb-eyebrow::before{display:none}
.eb-line{font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem,1rem+3vw,3.3rem); letter-spacing:-.02em; line-height:1.05;
  color:var(--ink); margin:0; text-shadow:0 2px 50px rgba(0,0,0,.7)}
.eb-sub{font-family:var(--serif); font-weight:400;
  font-size:clamp(1.2rem,.9rem+1vw,1.7rem); color:var(--ink-dim);
  margin:.35em 0 0; text-shadow:0 2px 40px rgba(0,0,0,.7)}
.eb-hint{position:absolute; left:50%; transform:translateX(-50%); bottom:30px; z-index:2;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:.85em}
.eb-hint .bar{position:relative; width:1px; height:38px; background:var(--line-2); overflow:hidden}
.eb-hint .bar::after{content:""; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:linear-gradient(to bottom, transparent, var(--ink-dim));
  animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(0)} 100%{transform:translateY(300%)}}
@media (prefers-reduced-motion: reduce){ .eb-hint .bar::after{animation:none} }

.photo-band{padding-block:clamp(42px,7vh,92px)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms); will-change:opacity, transform}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .rotor .word{transition:none}
}

::selection{background:hsl(var(--eh) var(--es) var(--el) / .32); color:#fff}

@media(max-width:520px){
  /* Schriftzug und Button stehen beide auf `white-space:nowrap` und können
     nicht schrumpfen. Ohne diese Verkleinerungen stoßen sie auf schmalen
     Geräten ohne einen Pixel Abstand aneinander. Das `gap` ist die
     Untergrenze, die verhindert, dass sie sich je wieder berühren. */
  nav{gap:16px}
  .brand{font-size:.62rem; letter-spacing:.2em; gap:10px}
  nav .btn{padding:.78em 1.15em; font-size:.7rem}
  .hero{padding-top:104px}
}

@media(max-width:400px){
  /* Der Rand der Kopfzeile darf schmaler sein als der des Fließtexts,
     sonst schiebt der Button ueber den rechten Bildschirmrand hinaus. */
  nav{padding-inline:15px; gap:14px}
  .brand{gap:9px}
  nav .btn{padding:.75em .95em; font-size:.66rem}
}

@media(max-width:359px){
  /* Darunter passen Schriftzug und Button nicht mehr nebeneinander.
     Der Button traegt die Handlungsaufforderung, also weicht der
     Schriftzug — das Logo bleibt als Marke und als Weg zurueck nach oben. */
  .brand span{display:none}
}

@media(max-width:860px){
  .nav-toggle{display:block; z-index:72}
  .nav-links{
    position:fixed; inset:0 0 auto 0; top:0; padding:92px var(--pad) 28px; z-index:71;
    background:rgba(8,8,11,.94); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:18px;
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease), opacity .35s var(--ease)
  }
  body.nav-open .nav-links{transform:none; opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden}
  .nav-drop{width:100%}
  .nav-drop::after{display:none}
  .nav-drop-btn{
    display:block; margin-top:8px; padding-top:16px; width:100%; text-align:left;
    border-top:1px solid var(--line); pointer-events:none;
    font-size:.62rem; letter-spacing:.22em; color:var(--ink-faint)
  }
  .nav-drop-btn::after{display:none}
  .nav-drop-list{
    position:static; transform:none; min-width:0; padding:0; margin-top:14px;
    background:transparent; border:0; border-radius:0; gap:18px;
    opacity:1; visibility:visible; pointer-events:auto;
    backdrop-filter:none; -webkit-backdrop-filter:none
  }
  .nav-drop-list a{
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:0
  }
  .nav-drop-list a:hover, .nav-drop-list a.is-on{background:transparent}
}

/* ---------- Innenseiten ---------- */
.page-hero{padding-block:clamp(132px, 16vw, 190px) clamp(48px, 8vh, 88px)}
.page-hero .reveal{opacity:1; transform:none}
.page-hero h1{max-width:16ch}
.page-hero .lede{margin-top:1.4rem; max-width:42ch; color:var(--ink-dim)}
.page-cta{padding-block:clamp(80px, 12vh, 140px)}
.quote{margin:0; max-width:28ch; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.55rem, 1rem + 1.8vw, 2.35rem); line-height:1.22; letter-spacing:-.016em}
.quote cite{display:block; margin-top:1rem; font-family:var(--sans); font-style:normal;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}

.stimmen{display:grid; grid-template-columns:1fr; gap:1px; margin-top:clamp(36px,5vw,56px);
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
@media(min-width:840px){.stimmen{grid-template-columns:1fr 1fr}}
.stimme{background:var(--bg); padding:clamp(26px,3vw,36px)}
.stimme p{font-family:var(--serif); font-size:clamp(1.05rem,.9rem+.4vw,1.2rem);
  line-height:1.55; color:var(--ink-dim); margin:0 0 1.2em}
.stimme .who{font-family:var(--sans); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0}

.schwer{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px);
  margin-top:clamp(40px,5vw,68px)}
@media(min-width:900px){.schwer{grid-template-columns:1fr 1fr 1fr}}
.schwer article{border-top:1px solid var(--line); padding-top:1.4rem}
.schwer h3{font-size:clamp(1.45rem,1rem+1vw,1.9rem); margin-bottom:.7em}
.schwer ul{margin:0; padding:0; list-style:none}
.schwer li{font-family:var(--sans); font-size:.98rem; line-height:1.5; color:var(--ink-dim);
  padding:.42em 0 .42em 1.1em; position:relative}
.schwer li::before{content:"→"; position:absolute; left:0; color:hsl(var(--eh) var(--es) var(--el) / .9)}

.tips{list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; max-width:68ch}
.tips li{display:grid; grid-template-columns:auto 1fr; gap:1em; align-items:baseline;
  padding:1.05em 0; border-bottom:1px solid var(--line); color:var(--ink-dim);
  font-size:clamp(1.05rem,.9rem+.35vw,1.2rem); line-height:1.5}
.tips .no{font-family:var(--sans); font-size:.74rem; letter-spacing:.06em;
  color:hsl(var(--eh) var(--es) var(--el) / .85)}

.ausbildungen{list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0; max-width:62ch}
.ausbildungen li{display:flex; justify-content:space-between; gap:1.4em; flex-wrap:wrap;
  padding:.95em 0; border-bottom:1px solid var(--line)}
.ausbildungen b{font-weight:500; color:var(--ink)}
.ausbildungen span{font-family:var(--sans); font-size:.86rem; color:var(--ink-faint); text-align:right}

.legal-body{font-family:var(--sans); font-size:1rem; line-height:1.8; color:var(--ink-dim); max-width:62ch}
.legal-body h3{font-size:1.15rem; margin:2.4em 0 .6em; color:var(--ink)}
.legal-body h4{font-size:1rem; margin:1.8em 0 .4em; color:var(--ink)}
.legal-body a{color:var(--energy); text-decoration:none; border-bottom:1px solid var(--energy-line)}
.legal-body ul{margin:.4em 0 1.2em; padding-left:1.2em}
.legal-nav{display:flex; gap:1.4em; flex-wrap:wrap; margin-top:3em}

.soc{display:flex; gap:18px; justify-content:center; margin:1.6rem 0 0}
.soc a{font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none; border-bottom:1px solid transparent}
.soc a:hover{color:var(--ink); border-color:var(--line-2)}

.foot-links{display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  margin:2.2rem 0 0; font-family:var(--sans); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase}
.foot-links a{color:var(--ink-faint); text-decoration:none}
.foot-links a:hover{color:var(--ink)}