/* Velion Solutions – gemeinsames Stylesheet für Startseite und „Über mich“.
   Layout: Ladenschild – breite Archivo-Zeilen auf kühlem Papierweiß, Navy-Bänder wie die Visitenkarte,
   schräge Striche im 60°-Winkel des Velion-V als einziges Ornament. */
:root{
  --ink:#0F2243;        /* Navy aus dem Logo und der Karte */
  --ink-2:#172F59;
  --ink-deep:#0A1830;
  --azure:#018AE6;      /* rechter Strich des V */
  --azure-deep:#035796;
  --sky:#5BB8F5;
  --paper:#F6F8FB;
  --white:#FFFFFF;
  --line:#DAE2EE;
  --muted:#56657F;
  --on-ink:#EAF0F8;
  --on-ink-muted:#A8B7CE;
  --ok:#1E9E5E;
  --bad:#C2412D;
  --hl:rgba(1,138,230,.26);

  --display:"Archivo","Arial",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@font-face{font-family:"Archivo";src:url("fonts/archivo-wide.woff2") format("woff2");font-weight:500 850;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plexmono.woff2") format("woff2");font-weight:500;font-display:swap}

/* Weicher Übergang zwischen den Seiten */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .4s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.62 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azure);outline-offset:3px;border-radius:4px}
::selection{background:var(--azure);color:#fff}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
section{scroll-margin-top:84px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut-l);top:-60px;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:6px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;color:inherit}
h1{font-size:clamp(2.55rem,1.4rem + 4.9vw,5.35rem);font-weight:800;font-stretch:112%;line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(1.95rem,1.25rem + 2.5vw,3.3rem);font-weight:780;font-stretch:110%;line-height:1.02;letter-spacing:-.02em}
h3{font-size:1.14rem;font-weight:700;font-stretch:104%;line-height:1.25;letter-spacing:-.005em}
p{margin:0}
.lead{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);color:var(--muted);max-width:36em}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font:500 .76rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--azure-deep)}
.eyebrow::before{content:"";width:.5em;height:1.15em;background:var(--azure);transform:skewX(-30deg)}
.band .eyebrow{color:var(--on-ink-muted)}
.sec-head{display:grid;gap:1.1rem;max-width:44rem}
.hl{position:relative;display:inline-block;isolation:isolate;white-space:nowrap}
.hl::after{content:"";position:absolute;z-index:-1;left:-.06em;right:-.14em;bottom:.04em;height:.36em;background:var(--hl);
  transform-origin:left;transform:skewX(-30deg);animation:draw .8s .75s cubic-bezier(.65,0,.25,1) both}

/* ---------- Knöpfe ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1em 1.4em;border-radius:6px;font:650 1rem/1 var(--body);text-decoration:none;cursor:pointer;border:0;
  transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0 -35%;z-index:-1;transform:skewX(-30deg) translateX(-105%);transition:transform .5s cubic-bezier(.65,0,.25,1)}
.btn:hover::before,.btn:focus-visible::before{transform:skewX(-30deg) translateX(0)}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink::before{background:var(--azure)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--line::before{background:var(--ink)}
.btn--line:hover,.btn--line:focus-visible{color:#fff}
.btn--azure{background:var(--azure);color:#fff}
.btn--azure::before{background:#fff}
.btn--azure:hover,.btn--azure:focus-visible{color:var(--ink)}
.band .btn--line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.band .btn--line::before{background:#fff}
.band .btn--line:hover,.band .btn--line:focus-visible{color:var(--ink)}

/* ---------- Kopfzeile ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(246,248,251,.9);view-transition-name:site-head;
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.is-scrolled{border-bottom-color:var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand .mark{flex:none;width:30px;height:auto;color:var(--ink)}
.brand-word{font:800 1.28rem/1 var(--display);font-stretch:118%;letter-spacing:-.02em}
.brand-word span{font-weight:500;font-stretch:100%;color:var(--muted);letter-spacing:0;font-size:.82em}
.nav{display:none;gap:1.9rem;font-weight:550;font-size:.97rem}
.nav a{text-decoration:none;position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--azure);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.head-actions{display:flex;align-items:center;gap:.5rem}
.head-cta{padding:.78em 1.1em;font-size:.92rem;white-space:nowrap}
.head-cta .long{display:none}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:transparent;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.menu-btn i{display:block;width:18px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s;grid-area:1/1}
.menu-btn i:nth-child(1){transform:translateY(-5px)}
.menu-btn i:nth-child(3){transform:translateY(5px)}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:rotate(-45deg)}
.mnav{border-top:1px solid var(--line);background:var(--paper)}
.mnav ul{list-style:none;margin:0 auto;padding-block:.6rem 1.2rem;display:grid}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none;font:750 1.35rem/1.1 var(--display);font-stretch:110%}
.mnav a::after{content:"";width:.45rem;height:1rem;background:var(--azure);transform:skewX(-30deg)}
.mnav:not([hidden]) li{animation:rise .45s var(--ease) both}
.mnav li:nth-child(2){animation-delay:.04s}.mnav li:nth-child(3){animation-delay:.08s}.mnav li:nth-child(4){animation-delay:.12s}.mnav li:nth-child(5){animation-delay:.16s}.mnav li:nth-child(6){animation-delay:.2s}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--azure);transform-origin:left;transform:scaleX(var(--sp,0))}
@media (min-width:960px){.nav{display:flex}.head-cta .long{display:inline}.head-cta .short{display:none}.menu-btn,.mnav{display:none!important}}
@media (max-width:440px){.brand-word{font-size:1.14rem}.head-cta{padding:.75em .9em}.head-row{gap:.6rem}}
@media (max-width:360px){.brand-word span{display:none}}

/* ---------- Hero (Startseite) ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3.5rem,7vw,6.5rem);overflow:hidden}
.hero-grid{display:grid;gap:3rem;align-items:center}
.hero-copy{display:grid;gap:1.6rem;min-width:0}
.hero h1 .w{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 80ms)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem}
.facts{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;padding:0;margin:0;list-style:none;font-size:.95rem;font-weight:550}
.facts li{display:inline-flex;align-items:center;gap:.55rem}
.facts li::before{content:"";width:.38em;height:.95em;background:var(--azure);transform:skewX(-30deg)}
.fade-in{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
.hero-visual{display:grid;justify-items:center;gap:1.2rem;min-width:0;position:relative}
.hero-visual::before{content:"";position:absolute;z-index:-1;width:min(520px,120%);aspect-ratio:1;top:50%;left:50%;translate:-50% -54%;
  background:radial-gradient(closest-side,rgba(1,138,230,.16),rgba(1,138,230,0))}
.stroke-deco{position:absolute;z-index:-1;width:46%;max-width:240px;top:6%;right:-4%;opacity:.07;color:var(--ink)}
.phone-float{width:min(300px,72vw);container-type:inline-size;animation:float 7s ease-in-out infinite}
.phone{--rx:0deg;--ry:0deg;width:100%;aspect-ratio:300/620;border-radius:15cqw;background:#0A1630;padding:3.1cqw;
  box-shadow:0 50px 90px -40px rgba(15,34,67,.55),0 18px 40px -24px rgba(15,34,67,.45),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease)}
.phone-screen{position:relative;height:100%;border-radius:12.3cqw;overflow:hidden;background:#111}
.island{position:absolute;top:2.4cqw;left:50%;translate:-50% 0;width:27cqw;height:7.6cqw;border-radius:99px;background:#000;z-index:5}
.phone-tabs{display:flex;gap:.3rem;padding:.3rem;border-radius:99px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.phone-tabs button{font:600 .86rem/1 var(--body);color:var(--muted);background:none;border:0;padding:.6em 1em;border-radius:99px;cursor:pointer;transition:background .3s,color .3s}
.phone-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.phone-note{font:500 .72rem/1.3 var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:0}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:4rem}}

/* ---------- Laufband ---------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding-block:1.1rem;border-block:1px solid var(--ink-2)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track ul{display:flex;gap:1.6rem;margin:0;padding:0 1.6rem 0 0;list-style:none}
.mq-track li{display:inline-flex;align-items:center;gap:1.6rem;font:800 clamp(1.3rem,1rem + 1.2vw,2rem)/1 var(--display);font-stretch:120%;letter-spacing:-.01em;white-space:nowrap}
.mq-track li:nth-child(even){color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.75)}
.mq-track li::after{content:"";width:.32em;height:.8em;background:var(--azure);transform:skewX(-30deg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Mini-Websites (Handy, Beispiele, Vorher/Nachher) ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;font-size:4.35cqw;line-height:1.35;overflow:hidden;
  opacity:0;transform:translateY(7%) scale(.97);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.scr.is-on{opacity:1;transform:none}
.scr--static{position:relative;inset:auto;height:100%;opacity:1;transform:none}
.scr-bar{display:flex;justify-content:space-between;align-items:center;padding:1.15em 1.9em .2em;font:650 .74em/1 var(--body)}
.scr-bar i{display:inline-block;width:1.9em;height:.85em;border-radius:.25em;box-shadow:inset 0 0 0 .11em currentColor;position:relative;opacity:.85}
.scr-bar i::after{content:"";position:absolute;inset:.22em .5em .22em .22em;background:currentColor;border-radius:.1em}
.scr-head{display:flex;justify-content:space-between;align-items:center;padding:1.05em 1.35em .8em}
.scr-menu{width:1.35em;height:.75em;border-block:.13em solid currentColor;position:relative}
.scr-menu::after{content:"";position:absolute;left:0;right:0;top:50%;height:.13em;translate:0 -50%;background:currentColor}
.scr-photo{margin:0 .95em;height:12.5em;border-radius:1em;position:relative;overflow:hidden;flex:none}
.scr-body{display:flex;flex-direction:column;gap:.75em;padding:1.05em 1.35em .6em}
.scr-open{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:.74em;font-weight:600;padding:.4em .75em;border-radius:99px}
.scr-open b{width:.62em;height:.62em;border-radius:50%;background:#3DDC84;animation:pulse 2.2s infinite}
.scr-title{font-size:1.6em;line-height:1.06;margin:0}
.scr-btn{align-self:flex-start;font-size:.86em;font-weight:700;padding:.75em 1.15em}
.scr-list{list-style:none;margin:.15em 0 0;padding:0;display:grid;gap:.5em;font-size:.82em}
.scr-list li{display:flex;justify-content:space-between;gap:1em;padding-top:.5em;border-top:1px solid rgba(127,127,127,.28)}
.scr-list li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.scr-dock{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:.55em;padding:.8em 1.1em 1.5em;font-size:.82em;font-weight:700;text-align:center}
.scr-dock span{padding:.85em 0;border-radius:.75em}
.scr--salon{background:#1C181E;color:#F4EAE4}
.scr--salon .scr-name{font:italic 600 1.2em/1 Georgia,"Times New Roman",serif}
.scr--salon .scr-photo{background:radial-gradient(circle at 74% 26%,rgba(247,214,190,.95) 0,rgba(247,214,190,0) 34%),radial-gradient(circle at 18% 88%,rgba(140,84,104,.9) 0,rgba(140,84,104,0) 52%),linear-gradient(162deg,#4A3540 0%,#1E1820 70%)}
.scr--salon .arch{position:absolute;left:14%;bottom:0;width:36%;height:80%;border:.18em solid rgba(255,236,224,.42);border-bottom:0;border-radius:999px 999px 0 0}
.scr--salon .arch::after{content:"";position:absolute;inset:16% 18% 0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(255,236,224,.22),rgba(255,236,224,0))}
.scr--salon .chair{position:absolute;right:16%;bottom:0;width:26%;height:30%;border-radius:.6em .6em 0 0;background:linear-gradient(180deg,#2B2228,#140F14)}
.scr--salon .scr-open{background:rgba(255,255,255,.09)}
.scr--salon .scr-title{font:400 1.75em/1.04 Georgia,"Times New Roman",serif}
.scr--salon .scr-btn{background:#D9B39D;color:#1C181E;border-radius:99px}
.scr--salon .scr-dock span{background:rgba(255,255,255,.08)}
.scr--gastro{background:#1E3326;color:#F3EEDD}
.scr--gastro .scr-name{font:800 1.08em/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.scr--gastro .scr-photo{background:repeating-linear-gradient(92deg,rgba(0,0,0,.08) 0 .25em,rgba(0,0,0,0) .25em 1.4em),linear-gradient(170deg,#7B5432,#4A2F1C)}
.scr--gastro .plate{position:absolute;width:58%;aspect-ratio:1;left:50%;top:54%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 42% 44%,#8C4A23 0,#8C4A23 18%,rgba(140,74,35,0) 19%),radial-gradient(circle at 60% 58%,#E9D7A8 0,#E9D7A8 13%,rgba(233,215,168,0) 14%),radial-gradient(circle at 36% 64%,#5E7A3A 0,#5E7A3A 7%,rgba(94,122,58,0) 8%),radial-gradient(circle,#FBF8F1 0,#FBF8F1 62%,#E5DFD2 63%,#F7F3EA 70%);
  box-shadow:0 .9em 1.6em -.4em rgba(0,0,0,.5)}
.scr--gastro .glass{position:absolute;right:9%;top:12%;width:14%;height:34%;border-radius:.3em .3em .9em .9em;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(232,170,60,.85) 30%,#C98A22)}
.scr--gastro .scr-open{background:rgba(255,255,255,.08)}
.scr--gastro .scr-title{font:800 1.55em/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#E3B04B}
.scr--gastro .scr-btn{background:#E3B04B;color:#1E3326;border-radius:.35em}
.scr--gastro .scr-list li{border-top-style:dotted}
.scr--gastro .scr-dock span{background:rgba(255,255,255,.07)}
.scr--holz{background:#EFE8DD;color:#2A2521}
.scr--holz .scr-name{font:800 .92em/1 var(--body);text-transform:uppercase;letter-spacing:.14em}
.scr--holz .scr-grid{margin:0 .95em;display:grid;grid-template-columns:1fr 1fr;gap:.45em;flex:none}
.scr--holz .wood{position:relative;aspect-ratio:1.18;border-radius:.25em;overflow:hidden}
.scr--holz .wood span{position:absolute;left:.55em;bottom:.5em;font-size:.68em;font-weight:700;padding:.25em .55em;background:rgba(239,232,221,.92);color:#2A2521;letter-spacing:.04em}
.wood.w1{background:repeating-linear-gradient(8deg,rgba(0,0,0,.07) 0 .18em,rgba(0,0,0,0) .18em .9em),linear-gradient(135deg,#C99566,#9C6A3C)}
.wood.w2{background:repeating-linear-gradient(-4deg,rgba(0,0,0,.08) 0 .16em,rgba(0,0,0,0) .16em 1.1em),linear-gradient(160deg,#8A5A35,#5B3920)}
.wood.w3{background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 .12em,rgba(0,0,0,0) .12em 2.1em),linear-gradient(180deg,#D8C3A5,#B99B76)}
.wood.w4{background:repeating-linear-gradient(2deg,rgba(0,0,0,.06) 0 .2em,rgba(0,0,0,0) .2em 1.3em),linear-gradient(120deg,#B47B48,#7E5130)}
.scr--holz .scr-open{background:rgba(42,37,33,.08)}
.scr--holz .scr-open b{background:#2E9E5B}
.scr--holz .scr-title{font:800 1.5em/1.05 var(--body);letter-spacing:-.01em}
.scr--holz .scr-title em{font-style:normal;color:#A0652F}
.scr--holz .scr-btn{background:#2A2521;color:#EFE8DD;border-radius:0}
.scr--holz .scr-chips{list-style:none;margin:.35em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em;font-size:.72em;font-weight:700}
.scr--holz .scr-chips li{padding:.45em .75em;box-shadow:inset 0 0 0 1px rgba(42,37,33,.28)}
.scr--holz .scr-dock span{box-shadow:inset 0 0 0 1px rgba(42,37,33,.3);border-radius:0}

/* ---------- Abschnitte ---------- */
.sec{padding-block:clamp(4.2rem,8vw,7.5rem)}
.sec--white{background:var(--white)}
.band{background:var(--ink);color:var(--on-ink)}
.band .lead{color:var(--on-ink-muted)}
.band h2{color:#fff}

/* Handy-Abschnitt */
.why-grid{display:grid;gap:3rem;align-items:start}
.why-copy{display:grid;gap:1.5rem;min-width:0}
.checks{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:1.1rem}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;align-items:baseline}
.checks li::before{content:"";grid-row:span 2;width:.5rem;height:1.25rem;background:var(--azure);transform:skewX(-30deg) translateY(.2rem)}
.checks strong{font-weight:700}
.checks span{color:var(--muted);grid-column:2}
.hours{background:var(--white);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(15,34,67,.35);padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1.2rem;min-width:0}
.hours-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tag{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.5em .7em;border-radius:4px;background:var(--paper)}
.hours-name{font:800 1.3rem/1.1 var(--display);font-stretch:110%}
.hours-status{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.12rem}
.hours-status b{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
.hours-status.is-closed b{background:var(--bad);animation:none}
.hours-sub{color:var(--muted);font-size:.98rem;margin-top:-.8rem}
.week{list-style:none;margin:0;padding:0;display:grid;font-variant-numeric:tabular-nums;font-size:.97rem}
.week li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .7rem;border-radius:6px}
.week li.is-today{background:var(--paper);font-weight:700}
.week li .off{color:var(--muted)}
.hours-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hours-actions span{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.85rem;border-radius:8px;font-weight:700;font-size:.95rem;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.hours-actions span:first-child{background:var(--ink);color:#fff;box-shadow:none}
.hours-actions svg{width:1.05em;height:1.05em}
@media (min-width:900px){.why-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:5rem}}

/* Leistung */
.feat{display:grid;margin-top:3rem;border-top:1px solid var(--line)}
.feat-item{display:grid;align-content:start;grid-template-columns:auto 1fr;gap:.35rem 1.1rem;padding:1.6rem 0;border-bottom:1px solid var(--line);min-width:0}
.feat-item svg{grid-row:span 2;width:28px;height:28px;color:var(--azure-deep);stroke-width:1.7;transition:transform .5s var(--ease)}
.feat-item:hover svg{transform:translateY(-3px) rotate(-6deg)}
.feat-item p{color:var(--muted);grid-column:2}
@media (min-width:700px){.feat{grid-template-columns:1fr 1fr;column-gap:3rem}}
@media (min-width:1040px){.feat{grid-template-columns:repeat(3,1fr)}.feat-item{grid-template-columns:1fr;padding:2rem 0 2.2rem}.feat-item svg{grid-row:auto;margin-bottom:.9rem}.feat-item p{grid-column:auto}}

/* Vorher / Nachher */
.vn-grid{display:grid;gap:2.2rem;margin-top:3rem;align-items:center;justify-items:center}
.vn-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;width:100%;max-width:22rem}
.vn-list h3{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
.vn-list li{display:flex;gap:.7rem;align-items:flex-start;font-weight:550}
.vn-list svg{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem}
.vn-list--before{color:var(--muted)}
.vn-list--before svg{color:var(--bad)}
.vn-list--after svg{color:var(--ok)}
.vn{position:relative;width:min(330px,82vw);container-type:inline-size}
.vn-stage{position:relative;aspect-ratio:300/620;border-radius:15cqw;background:#0A1630;padding:3.1cqw;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;
  box-shadow:0 50px 90px -40px rgba(15,34,67,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.vn-screen{position:relative;height:100%;border-radius:12.3cqw;overflow:hidden;background:#E8E8E8}
.vn-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.vn-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(15,34,67,.25);z-index:4;pointer-events:none}
.vn-knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:12cqw;height:12cqw;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px -6px rgba(0,0,0,.5)}
.vn-knob svg{width:60%;height:60%}
.vn-tag{position:absolute;top:13cqw;z-index:5;font:600 3.6cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:1.6cqw 2.4cqw;border-radius:99px;pointer-events:none;transition:opacity .3s}
.vn-tag--b{left:5cqw;background:rgba(0,0,0,.72);color:#fff}
.vn-tag--a{right:5cqw;background:#fff;color:var(--ink)}
.vn-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vn-range:focus-visible + .vn-hint{outline:3px solid var(--azure);outline-offset:3px}
.vn-hint{display:block;text-align:center;margin-top:1rem;font:500 .72rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-radius:4px}
.vn-note{margin-top:2rem;text-align:center;color:var(--muted);font-size:.9rem}
@media (min-width:900px){.vn-grid{grid-template-columns:1fr auto 1fr;gap:3.5rem}.vn-list--before{justify-self:end;text-align:right}.vn-list--before li{flex-direction:row-reverse}}
/* Alte Website (Vorher) */
.old{position:absolute;inset:0;background:#E5E5E5;color:#000;font:2.55cqw/1.25 "Times New Roman",Times,serif;overflow:hidden}
.old .scr-bar{font-size:3.2cqw;padding:4.6cqw 7cqw 1cqw;color:#111}
.old-head{margin:1.5cqw 2cqw 1cqw;background:linear-gradient(#7393CF,#294C8C);border:.5cqw outset #9DB3DD;padding:2.2cqw;text-align:center}
.old-head b{display:block;font:bold 5.4cqw/1.1 "Comic Sans MS","Chalkboard SE","Comic Neue",cursive;color:#FFE34D;text-shadow:.4cqw .4cqw 0 #1B2F5A}
.old-head small{color:#fff;font:2.3cqw Arial,sans-serif}
.old-nav{margin:0 2cqw;padding:.9cqw;background:#C9C9C9;border:.3cqw solid #999;font:2.2cqw Arial,sans-serif;color:#00E;text-align:center}
.old-nav u{margin:0 .4cqw}
.old-tick{margin:1.2cqw 2cqw;background:#000;color:#FF3B3B;font:bold 2.4cqw Arial,sans-serif;white-space:nowrap;overflow:hidden;padding:.6cqw 0}
.old-tick span{display:inline-block;padding-left:100%;animation:tick 9s linear infinite}
.old-body{display:grid;grid-template-columns:31% 1fr;gap:1.6cqw;margin:0 2cqw}
.old-side{background:#FFFBE0;border:.3cqw solid #C9B200;padding:1.3cqw;font:2.1cqw/1.3 Verdana,Arial,sans-serif}
.old-main p{margin:0 0 1.2cqw}
.old-img{height:24cqw;background:repeating-linear-gradient(45deg,#C7C7C7 0 2cqw,#BDBDBD 2cqw 4cqw);display:grid;place-items:center;font:2.2cqw Arial,sans-serif;color:#555;border:.3cqw inset #999;margin-top:1cqw}
.old-count{margin:2.4cqw 2cqw 1cqw;font:2.2cqw Arial,sans-serif;display:flex;align-items:center;gap:.6cqw;flex-wrap:wrap}
.old-count i{background:#000;color:#3F3;font:bold 2.4cqw "Courier New",monospace;padding:.2cqw .7cqw;font-style:normal;letter-spacing:.3cqw}
.old-foot{margin:0 2cqw;font:1.9cqw Arial,sans-serif;color:#666}
.old-news{margin:2cqw;border:.3cqw dashed #999;background:#fff;padding:1.4cqw;font:2.2cqw/1.3 Arial,sans-serif}
.old-news b{color:#C00}
.old-news p{margin:.6cqw 0 0}
.old-gb{margin:0 2cqw 2cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw}
.old-gb span{display:block;height:13cqw;background:repeating-linear-gradient(45deg,#C7C7C7 0 2cqw,#BDBDBD 2cqw 4cqw);border:.3cqw inset #999}
.old-links{margin:0 2cqw 2cqw;font:2.1cqw Arial,sans-serif;color:#00E}
@keyframes tick{to{transform:translateX(-100%)}}

/* Beispiele */
.tiles{display:grid;gap:1.5rem;margin-top:3.2rem}
.tile{display:grid;gap:1.15rem;text-decoration:none;color:inherit;min-width:0}
.tile-frame{position:relative;container-type:inline-size;aspect-ratio:300/430;border-radius:18px;overflow:hidden;background:var(--ink-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.tile:hover .tile-frame{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 50px -30px rgba(0,0,0,.6)}
.tile-meta{display:grid;gap:.4rem}
.tile-kicker{font:500 .72rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink-muted)}
.tile-meta h3{color:#fff;font-size:1.3rem}
.tile-meta p{color:var(--on-ink-muted);font-size:.98rem}
.tile-state{display:inline-flex;align-items:center;gap:.5em;margin-top:.35rem;font-weight:650;font-size:.95rem;color:#fff}
.tile-state svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.tile:hover .tile-state svg{transform:translateX(4px)}
.tile.is-soon{cursor:default}
.tile.is-soon .tile-state{color:var(--on-ink-muted);font-weight:550}
.tile.is-soon .tile-state svg{display:none}
.light .tile-frame{box-shadow:0 0 0 1px var(--line)}
.light .tile:hover .tile-frame{box-shadow:0 0 0 1px var(--line),0 30px 50px -30px rgba(15,34,67,.45)}
.light .tile-kicker,.light .tile-meta p{color:var(--muted)}
.light .tile-meta h3,.light .tile-state{color:var(--ink)}
@media (min-width:800px){.tiles{grid-template-columns:repeat(3,1fr);gap:2rem}.tile:nth-child(2){margin-top:3rem}}
@media (max-width:799px){.tiles{grid-auto-flow:column;grid-auto-columns:min(78%,320px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;
  margin-left:calc(-1 * var(--gut-l));margin-right:calc(-1 * var(--gut-r));padding-left:var(--gut-l);padding-right:var(--gut-r);scroll-padding-inline:var(--gut-l) var(--gut-r);scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}.tile{scroll-snap-align:start}}
.swipe-hint{display:none;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-muted);margin-top:1rem}
.light .swipe-hint{color:var(--muted)}
@media (max-width:799px){.swipe-hint{display:block}}

/* Ablauf */
.steps{--p:0;list-style:none;margin:3.2rem 0 0;padding:0 0 0 2.6rem;display:grid;gap:2.2rem;position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:.62rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.steps::after{background:var(--azure);transform-origin:top;transform:scaleY(var(--p))}
.step{position:relative;display:grid;align-content:start;gap:.5rem;min-width:0}
.step-dot{position:absolute;left:-2.6rem;top:.1rem;width:1.3rem;height:1.3rem;display:grid;place-items:center}
.step-dot::before{content:"";width:.62rem;height:1.25rem;background:var(--line);transform:skewX(-30deg);transition:background .4s}
.step.is-done .step-dot::before{background:var(--azure)}
.step-num{font:800 .8rem/1 var(--mono);letter-spacing:.1em;color:var(--azure-deep)}
.step p{color:var(--muted);max-width:30em}
.step .pill{justify-self:start;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.5em .7em;border-radius:4px;background:var(--azure);color:#fff;margin-top:.25rem}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(4,1fr);gap:2.4rem;padding:2.8rem 0 0}
  .steps::before,.steps::after{left:0;right:0;top:.6rem;bottom:auto;width:auto;height:2px}
  .steps::after{transform-origin:left;transform:scaleX(var(--p))}
  .step-dot{left:0;top:-2.8rem}
}

/* Vergleich */
.vs{margin-top:3rem;display:grid}
.vs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.5rem;align-items:stretch}
.vs-label{grid-column:1/-1;padding:1.1rem 0 .45rem;font-weight:700;font-size:.98rem;border-top:1px solid var(--line)}
.vs-cell{padding:.2rem .1rem .9rem;font-size:.93rem;color:var(--muted);line-height:1.4;min-width:0}
.vs-cell.v{color:var(--ink);font-weight:650;background:rgba(1,138,230,.07);border-radius:6px;padding:.45rem .55rem .7rem;margin-bottom:.5rem}
.vs-cell .y{color:var(--ok)}
.vs-cell .n{color:var(--bad)}
.vs-head .vs-cell{padding:0 .1rem .8rem;font:500 .7rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs-head .vs-cell.v{background:var(--ink);color:#fff;padding:.8rem .55rem;border-radius:8px;margin-bottom:.3rem;font-weight:500}
.vs-head .vs-label{display:none}
.vs-foot{margin-top:1.2rem;font-size:.88rem;color:var(--muted)}
@media (min-width:860px){
  .vs-row{grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr));column-gap:0}
  .vs-label{grid-column:auto;padding:1.25rem 1.5rem 1.25rem 0}
  .vs-cell{padding:1.25rem 1.2rem;border-top:1px solid var(--line);font-size:.98rem}
  .vs-cell.v{border-radius:0;margin:0;padding:1.25rem 1.2rem;background:rgba(1,138,230,.07);border-top-color:rgba(1,138,230,.18)}
  .vs-head .vs-label{display:block;border-top:0}
  .vs-head .vs-cell{border-top:0;padding:1rem 1.2rem}
  .vs-head .vs-cell.v{border-radius:10px 10px 0 0;margin:0;padding:1.1rem 1.2rem}
  .vs-row:last-of-type .vs-cell.v{border-radius:0 0 10px 10px}
}

/* Preis */
.price-grid{display:grid;gap:2rem;margin-top:3rem;align-items:start}
.price-card{background:var(--ink);color:var(--on-ink);border-radius:16px;padding:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.6rem;position:relative;overflow:hidden;isolation:isolate}
.price-card .mark{position:absolute;z-index:-1;width:46%;max-width:240px;right:-6%;top:-6%;color:#fff;opacity:.06}
.amount{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.amount strong{font:800 clamp(3.4rem,2.4rem + 4vw,5.2rem)/.9 var(--display);font-stretch:112%;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.amount span{color:var(--on-ink-muted);font-size:1.02rem}
.plus{display:grid;gap:.3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.plus strong{font:780 1.65rem/1.1 var(--display);font-stretch:110%;color:#fff}
.plus strong small{font:500 1rem var(--body);color:var(--on-ink-muted);margin-left:.3rem}
.plus p{color:var(--on-ink-muted);max-width:30em}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.incl li{display:flex;gap:.7rem;align-items:flex-start}
.incl svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;color:var(--sky)}
.side{display:grid;gap:1.6rem;min-width:0}
.extras h3{margin-bottom:.8rem}
.extras table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.extras td{padding:.85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.extras td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-left:1rem}
.extras small{display:block;color:var(--muted);font-size:.88rem}
.fine{color:var(--muted);font-size:.92rem;max-width:34em}
.free{display:flex;gap:.9rem;align-items:flex-start;padding:1.15rem 1.2rem;border-radius:10px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.free::before{content:"";flex:none;width:.5rem;height:1.25rem;margin-top:.2rem;background:var(--azure);transform:skewX(-30deg)}
@media (min-width:900px){.price-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}

/* Foto-Platz (Gaspar) */
.portrait{position:relative;margin:0;aspect-ratio:4/5;width:100%;max-width:420px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--ink-2),var(--ink));display:grid;place-items:center}
.portrait > .mark{width:42%;color:#fff}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait figcaption{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;justify-content:space-between;gap:1rem;font:500 .7rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-muted)}
.portrait.has-photo figcaption{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.portrait.has-photo .ph-hint,.portrait.has-photo > .mark{display:none}

/* Über mich (Startseite) */
.about{display:grid;gap:2.5rem;align-items:center}
.about .portrait{aspect-ratio:1;max-width:360px}
.about-copy{display:grid;gap:1.4rem;min-width:0}
.about-copy .lead{color:var(--ink);font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem);line-height:1.5;max-width:30em}
.sign{display:flex;align-items:center;gap:.8rem;font-weight:650}
.sign::before{content:"";width:2.2rem;height:2px;background:var(--azure)}
@media (min-width:860px){.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem}.about .portrait{aspect-ratio:4/5;max-width:420px}}

/* Fragen */
.faq{margin-top:2.6rem;border-top:1px solid var(--line);max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 0;cursor:pointer;font:700 1.12rem/1.3 var(--display);font-stretch:104%}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .3s,box-shadow .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;background:var(--ink);translate:-50% -50%;transition:transform .35s var(--ease),background .3s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] .pm{background:var(--ink)}
.faq details[open] .pm::before{background:#fff}
.faq details[open] .pm::after{transform:rotate(0);background:#fff}
.faq summary:hover .pm{box-shadow:inset 0 0 0 1.5px var(--azure)}
.faq .a{padding:0 3rem 1.5rem 0;color:var(--muted);max-width:42em}
.faq details[open] .a{animation:rise .45s var(--ease) both}

/* Kontakt */
.contact-grid{display:grid;gap:2.8rem;align-items:center}
.contact-copy{display:grid;gap:1.3rem;min-width:0}
.ways{display:grid;gap:.8rem;min-width:0}
.way{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1rem;padding:1.15rem 1.3rem;border-radius:12px;text-decoration:none;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);position:relative;overflow:hidden;isolation:isolate;min-width:0}
.way::before{content:"";position:absolute;inset:0 -30%;z-index:-1;background:var(--azure);transform:skewX(-30deg) translateX(-104%);transition:transform .55s cubic-bezier(.65,0,.25,1)}
.way:hover::before,.way:focus-visible::before{transform:skewX(-30deg) translateX(0)}
.way small{font:500 .7rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink-muted);transition:color .3s}
.way strong{grid-column:1;font:750 clamp(1.08rem,.98rem + .5vw,1.35rem)/1.2 var(--display);font-stretch:106%;color:#fff;overflow-wrap:anywhere;transition:color .3s}
.way svg{grid-row:1/3;grid-column:2;width:1.4rem;height:1.4rem;color:#fff;transition:transform .35s var(--ease),color .3s}
.way:hover small,.way:focus-visible small{color:#DCEEFC}
.way:hover svg{transform:translateX(4px)}
.way--main{background:var(--azure);box-shadow:none}
.way--main::before{background:#fff}
.way--main small{color:#DCEEFC}
.way--main:hover small,.way--main:hover strong,.way--main:hover svg,.way--main:focus-visible small,.way--main:focus-visible strong,.way--main:focus-visible svg{color:var(--ink)}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5rem}}

/* Fußzeile */
.site-foot{background:var(--ink-deep);color:var(--on-ink-muted);padding-block:2.6rem calc(2.6rem + env(safe-area-inset-bottom,0px));font-size:.93rem}
.foot-row{display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center;justify-content:space-between}
.site-foot .brand{color:#fff}
.site-foot .brand .mark{color:#fff}
.site-foot .brand-word span{color:var(--on-ink-muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:#fff}

/* Leiste unten am Handy */
.dock-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.7rem var(--gut-r) calc(.7rem + env(safe-area-inset-bottom,0px)) var(--gut-l);background:rgba(246,248,251,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.dock-bar.is-shown{transform:none}
.dock-bar .btn{padding:.95em 1em;font-size:.95rem}
@media (min-width:900px){.dock-bar{display:none}}

/* ---------- Über-mich-Seite ---------- */
.me-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,7vw,6rem);overflow:hidden}
.me-grid{display:grid;gap:3rem;align-items:center}
.me-copy{display:grid;gap:1.5rem;min-width:0}
.me-copy h1 .w{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 80ms + 80ms)}
.me-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.me-chips li{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-radius:99px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-weight:600;font-size:.92rem}
.me-chips li::before{content:"";width:.35rem;height:.85rem;background:var(--azure);transform:skewX(-30deg)}
.me-photo{position:relative;justify-self:center;width:min(420px,100%)}
.me-photo::before,.me-photo::after{content:"";position:absolute;z-index:-1;transform:skewX(-30deg)}
.me-photo::before{width:28%;height:72%;right:-9%;top:8%;background:var(--azure);animation:slide-in 1s .3s var(--ease) both}
.me-photo::after{width:16%;height:52%;left:-6%;bottom:-4%;background:var(--ink);animation:slide-in 1s .45s var(--ease) both}
.me-photo .portrait{animation:rise 1s .15s var(--ease) both}
@media (min-width:900px){.me-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4.5rem}}

.tl{--p:0;list-style:none;margin:3.2rem 0 0;padding:0 0 0 2.4rem;position:relative;display:grid;gap:2.6rem;max-width:56rem}
.tl::before,.tl::after{content:"";position:absolute;left:.55rem;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.tl::after{background:var(--azure);transform-origin:top;transform:scaleY(var(--p))}
.tl li{position:relative;display:grid;gap:.45rem;min-width:0}
.tl li::before{content:"";position:absolute;left:-2.4rem;top:.3rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .4s,background .4s}
.tl li.is-done::before{background:var(--azure);box-shadow:inset 0 0 0 2px var(--azure),0 0 0 5px rgba(1,138,230,.15)}
.tl-k{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--azure-deep)}
.tl h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);font-stretch:110%}
.tl p{color:var(--muted);max-width:38em;font-size:1.06rem}
@media (min-width:860px){
  .tl{padding-left:0;gap:3rem}
  .tl::before,.tl::after{left:11.55rem}
  .tl li{grid-template-columns:10rem 1fr;column-gap:3.4rem;row-gap:.4rem}
  .tl li::before{left:11rem}
  .tl-k{grid-row:span 2;padding-top:.4rem;text-align:right}
}

.quote{position:relative;padding-block:clamp(4.5rem,9vw,8rem);overflow:hidden;isolation:isolate}
.quote > .mark{position:absolute;z-index:-1;width:clamp(180px,30vw,360px);height:auto;right:-3%;bottom:-12%;opacity:.07;color:#fff}
.quote blockquote{margin:0;max-width:22em;font:780 clamp(1.8rem,1.1rem + 3vw,3.4rem)/1.1 var(--display);font-stretch:110%;letter-spacing:-.02em;color:#fff}
.quote blockquote span{color:var(--sky)}
.quote figcaption{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;color:var(--on-ink-muted);font-weight:600}
.quote figcaption::before{content:"";width:2.2rem;height:2px;background:var(--azure)}

.promises{display:grid;gap:1.2rem;margin-top:3rem}
.promise{display:grid;gap:.7rem;padding:1.6rem;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);min-width:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.promise:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 24px 40px -28px rgba(15,34,67,.4)}
.promise .n{font:500 .74rem/1 var(--mono);letter-spacing:.14em;color:var(--azure-deep)}
.promise p{color:var(--muted)}
@media (min-width:700px){.promises{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.promises{grid-template-columns:repeat(4,1fr)}}

/* Einblenden beim Scrollen: startet sichtbar, nur Elemente unterhalb des ersten Bildschirms werden kurz versteckt */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.reveal.pre{opacity:0;transform:translateY(30px)}

@keyframes rise{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:skewX(-30deg) scaleX(0)}to{transform:skewX(-30deg) scaleX(1)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes slide-in{from{opacity:0;transform:skewX(-30deg) translateY(40px)}to{opacity:1;transform:skewX(-30deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 .55em rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal.pre{opacity:1;transform:none}
  @view-transition{navigation:none}
}