/* ===== FIT4PAR Website – Shared Bold Design System ===== */
:root{
  /* Zwei Farben mussten dunkler werden, gemessen am 19.07.2026:
     --muted lag auf Mint bei 4.2:1, --olive als Text bei 2.4:1.
     Beide unter dem Mindestwert 4.5:1. Neu: 5.1:1 und 4.7:1.
     Betrifft ALLE Seiten — deshalb hier und nicht in einer Seite. */
  --paper:#ffffff; --ink:#0c1524; --ink2:#0a1120; --ink3:#070d18;
  --lime:#95c11f; --lime2:#aad12f; --emerald:#22c55e; --green-deep:#14532d; --olive:#547320;
  --mint:#eef7ef; --mint2:#e7f2d6; --slate:#1f2933; --slate2:#3a4553;
  --cream:#e1dfd9; --muted:#5b6472; --muted-d:#9aa4b2; --line:#e6e8eb; --line-d:rgba(255,255,255,.14);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;
  /* Die Navigationsleiste ist fest und rund 74 px hoch. Ohne diesen Abstand
     springt jeder Sprungmarken-Verweis (#kurs, #offerte, #fragen) so weit,
     dass die Überschrift hinter der Leiste verschwindet. */
  scroll-padding-top:96px;}
body{font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:var(--slate);background:#fff;line-height:1.62;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
@media(max-width:480px){.wrap{padding:0 18px;}}
/* Ein einziges langes Wort — eine Mailadresse, eine URL — schiebt sonst
   die ganze Seite seitlich raus. Auf dem Handy fällt das sofort auf. */
p,li,td,dd,figcaption,span,a{overflow-wrap:break-word;}
.lime{color:var(--lime);}
h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.04;font-weight:900;color:var(--ink);}
b,strong{font-weight:800;}

/* ---------- progress + nav ---------- */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--lime);z-index:200;transition:width .1s linear;}
.nav{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;background:rgba(9,14,24,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-d);}
.nav .brand{font-weight:900;letter-spacing:.1em;color:#fff;font-size:22px;}
.nav .brand b{color:var(--lime);}
.nav .links{display:flex;gap:clamp(12px,1.35vw,24px);align-items:center;}
.nav .links a{color:#dfe4ea;font-size:15px;font-weight:700;letter-spacing:.02em;transition:color .2s;white-space:nowrap;}
.nav .links a:hover,.nav .links a.active{color:var(--lime);}
.nav .cta{background:var(--lime);color:#152400 !important;padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:800;transition:transform .2s;}
/* Zwei Knöpfe nebeneinander brauchen eine Rangfolge: der Spick ist der zweite
   Weg, nicht der erste. Deshalb Umriss statt Fläche — sonst schreien beide. */
.nav .cta-spick{background:transparent;color:var(--lime) !important;
  border:2px solid var(--lime);padding:8px 16px;}
.nav .cta-spick:hover{background:var(--lime);color:#152400 !important;}
/* Der Regelkurs ist der dritte Knopf. Drei gleich laute Knöpfe sind keine
   Rangfolge mehr, sondern Lärm — deshalb eine dritte Stufe: gefüllt für die
   Einschätzung, Lime-Umriss für den Spick, leiser Umriss für den Regelkurs.
   Er zieht 26 % aller Seitenaufrufe und stand bisher in keinem Menü. */
.nav .cta-kurs{background:transparent;color:#dfe4ea !important;
  border:2px solid rgba(255,255,255,.30);padding:8px 16px;}
.nav .cta-kurs:hover{border-color:var(--lime);color:var(--lime) !important;}
/* Drei Knöpfe plus acht Verweise brauchen rund 1600 px. Statt die ganze
   Leiste früh ins Klappmenü zu schicken, werden erst die Beschriftungen
   kurz — «Regelkurs» und «Mein Spick» sparen zusammen rund 190 px. */
.nav .nav-kurz{display:none;}
@media(max-width:1620px){
  .nav .nav-lang{display:none;}
  .nav .nav-kurz{display:inline;}
}
@media(max-width:1380px){
  /* Im Klappmenü ist Platz — dort wieder der volle Wortlaut. */
  .nav .nav-lang{display:inline;}
  .nav .nav-kurz{display:none;}
}
.nav .cta:hover{transform:translateY(-2px);}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px;}
.burger span{width:26px;height:3px;background:#fff;border-radius:2px;transition:.3s;}
@media(max-width:1380px){
  .nav .links{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ink);padding:24px;gap:18px;
    transform:translateY(-140%);transition:transform .35s;border-bottom:1px solid var(--line-d);align-items:stretch;}
  .nav .links.open{transform:none;}
  .nav .links a{font-size:17px;padding:6px 0;}
  /* Im Klappmenü stehen die Knöpfe untereinander und dürfen wieder gross sein. */
  .nav .cta,.nav .cta-spick,.nav .cta-kurs{text-align:center;font-size:15px;padding:12px 18px;margin-top:4px;}
  .burger{display:flex;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:16px;padding:15px 28px;border-radius:999px;transition:transform .2s,box-shadow .2s;border:2px solid transparent;cursor:pointer;}
.btn-lime{background:var(--lime);color:#152400;}
.btn-lime:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(149,193,31,.32);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{transform:translateY(-3px);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--lime);color:var(--olive);}

/* ---------- sections ---------- */
.sec{padding:100px 0;}
.sec-sm{padding:70px 0;}
.sec-dark{background:linear-gradient(180deg,#0d1524,#0a111e);color:var(--cream);}
.sec-ink{background:var(--ink);color:var(--cream);}
.sec-mint{background:var(--mint);}
.sec-dark h2,.sec-dark h3,.sec-ink h2,.sec-ink h3{color:#fff;}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);}
.kicker::before{content:"";width:28px;height:3px;background:var(--lime);border-radius:2px;}
.kicker.on{color:var(--lime);}
/* Der Name gehört vor den Titel, und beides gehört nicht in eine Zeile:
   gesperrte Versalien über 48 Zeichen brechen mitten im Namen um — im
   Bildschirmfoto stand «ANTHONY C.» oben und «BIASIO» darunter.
   Deshalb zwei gesetzte Zeilen statt einer umbrechenden. */
/* Zwei Zeilen, keine leere dazwischen. Das <b> ist display:block und
   bricht die Zeile selbst — ein zusätzliches <br> erzeugte eine dritte,
   leere Zeile. Deshalb steht im HTML kein <br> mehr, und die Zeilenhöhe
   ist mit 1.25 eng gesetzt: Name und Titel sind EIN Block, nicht zwei. */
.kicker-name{align-items:flex-start;text-transform:none;letter-spacing:.01em;
  font-size:18px;font-weight:800;line-height:1.25;}
.kicker-name::before{margin-top:.5em;flex:0 0 auto;}
.kicker-name b{display:block;color:#fff;font-weight:800;}
.h2{font-size:clamp(30px,4.6vw,50px);}
.h3{font-size:clamp(22px,2.6vw,30px);}
.lead{font-size:clamp(20px,2.3vw,25px);line-height:1.55;color:var(--slate2);max-width:780px;}
.sec-dark .lead,.sec-ink .lead{color:var(--cream);}
.center{text-align:center;} .center .kicker{justify-content:center;} .center .lead{margin-left:auto;margin-right:auto;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;} .d5{transition-delay:.40s;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 82% 12%,#16202f 0%,#0d1524 46%,#060b14 100%);color:#fff;padding:150px 0 130px;}
.hero .glow{position:absolute;right:-10%;top:0;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(149,193,31,.16),rgba(149,193,31,0) 66%);}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;}
/* 40 px Abstand waren zu wenig: der Textblock lief bis fast an das
   Portrait heran. Der Abstand wächst jetzt mit der Fensterbreite mit,
   höchstens bis 96 px. Die Textspalte gibt dafür etwas ab. */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(40px,5.5vw,96px);align-items:center;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero{padding:104px 0 56px;min-height:auto;}
}
.hero h1{font-size:clamp(40px,7vw,78px);color:#fff;line-height:.98;}
.hero .sub{font-size:clamp(19px,2.3vw,24px);color:var(--cream);max-width:580px;margin-top:22px;line-height:1.5;}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:36px;align-items:center;}
.hero-badge{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;color:var(--cream);}
.hero-badge .st{color:var(--lime);font-weight:900;}

/* Rollenzeile im Hero: nur das Wort Coach trägt die Marke.
   Alles grün heisst nichts ist betont. */
.rollen{margin-top:16px;font-weight:800;font-size:clamp(16px,1.6vw,19px);
  letter-spacing:.01em;color:var(--cream);}
.rollen b{color:var(--lime);}

/* portrait */
.portrait{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line-d);aspect-ratio:1/1;
  background:linear-gradient(160deg,#16202f,#0b1220);display:flex;align-items:center;justify-content:center;}
.portrait img{width:100%;height:100%;object-fit:cover;}
.portrait .ph{color:var(--muted-d);text-align:center;padding:24px;font-size:14px;}
.portrait .tag{position:absolute;left:16px;bottom:16px;background:var(--lime);color:#152400;font-weight:900;font-size:13px;padding:8px 14px;border-radius:999px;}

/* Kein Vergleichspreis, sondern was im Preis enthalten ist. Ein
   durchgestrichener Preis wäre nach PBV nur zulässig, wenn Anthony ihn
   selbst 30 Tage lang verlangt hätte — hat er nie. */
.pnote{margin-top:8px;font-size:14.5px;font-weight:700;color:var(--olive);line-height:1.4;}
.sec-dark .pnote,.sec-ink .pnote{color:var(--lime);}

/* ---------- grids/cards ---------- */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;transition:transform .3s,box-shadow .3s;}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(17,24,39,.10);}
.card-dark{background:var(--ink);border:1px solid var(--line-d);color:var(--cream);border-radius:22px;padding:30px;}
.card-dark h3{color:#fff;}
.card-lime{background:var(--lime);color:#152400;border-radius:22px;padding:30px;}
.card-mint{background:var(--mint);border:1px solid #d9ecdb;border-radius:22px;padding:30px;}
.card .ct,.card-dark .ct,.card-mint .ct{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:12px;}
.card-dark .ct{color:var(--lime);}
.card h3,.card-mint h3{font-size:25px;margin-bottom:11px;}
.card p{font-size:18px;color:var(--slate);}
.card-dark p{color:var(--cream);}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:800;color:var(--olive);font-size:16.5px;}
.card:hover .more{color:var(--lime);}
.icn{width:98px;height:98px;border-radius:26px;background:var(--mint2);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:50px;line-height:1;transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:inset 0 0 0 1px rgba(149,193,31,.25), 0 14px 30px rgba(149,193,31,.14);}
.card-dark .icn{background:rgba(149,193,31,.14);}
.card:hover .icn,.card-dark:hover .icn,a.card:hover .icn,a.card-dark:hover .icn{transform:translateY(-5px) scale(1.08) rotate(-4deg);}
ul.ticks{list-style:none;display:grid;gap:12px;margin-top:8px;}
ul.ticks li{position:relative;padding-left:32px;font-size:18px;line-height:1.5;}
ul.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:6px;background:var(--mint2);border:1.6px solid var(--lime);}
ul.ticks li::after{content:"";position:absolute;left:5.6px;top:7.4px;width:7px;height:4px;border-left:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);transform:rotate(-45deg);}
.card-dark ul.ticks li{color:var(--cream);} .card-dark ul.ticks li::before{background:rgba(149,193,31,.16);} .card-dark ul.ticks li::after{border-color:var(--lime);}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s;}
@media(max-width:800px){.steps{grid-template-columns:1fr;}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 28px;}
.step .num{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.step h3{font-size:24px;margin-bottom:9px;}
.step p{font-size:17.5px;color:var(--slate);}

/* ---------- stat tiles ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:800px){.stats{grid-template-columns:1fr 1fr;}}
.stat{text-align:center;padding:26px 14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line-d);}
.sec-mint .stat,.sec .stat{background:#fff;border:1px solid var(--line);}
.stat .n{font-size:clamp(34px,4vw,48px);font-weight:900;color:var(--lime);line-height:1;letter-spacing:-.03em;}
.stat .l{font-size:16px;color:var(--muted);margin-top:8px;font-weight:600;}
.sec-dark .stat .l{color:var(--muted-d);}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;}}
.price{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;position:relative;}
.price.feature{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.02);}
.price.feature h3{color:#fff;}
.price .tag{position:absolute;top:-14px;left:32px;background:var(--lime);color:#152400;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;}
.price .pt{font-size:15.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--olive);}
.price.feature .pt{color:var(--lime);}
.price .amount{font-size:44px;font-weight:900;letter-spacing:-.03em;margin:8px 0 2px;}
.price .per{font-size:17px;color:var(--muted);}
.price.feature .per{color:var(--muted-d);}
.price ul{list-style:none;display:grid;gap:10px;margin:18px 0 24px;}
.price ul li{position:relative;padding-left:28px;font-size:18.5px;line-height:1.45;}
.price ul li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:900;}
.price .btn{margin-top:auto;justify-content:center;}

/* ---------- reviews ---------- */
.rev-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.g-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 20px;box-shadow:0 10px 30px rgba(17,24,39,.06);}
.g-badge .g-score{font-size:30px;font-weight:900;color:var(--ink);line-height:1;}
.g-stars{color:#f5b301;font-size:19px;letter-spacing:2px;}
.g-badge .g-sub{font-size:14.5px;color:var(--muted);}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
@media(max-width:900px){.reviews{grid-template-columns:1fr;}}
.review{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;}
.review .g-stars{font-size:17px;}
.review p{font-size:17.5px;color:var(--slate);margin:12px 0 16px;line-height:1.55;}
.review .who{display:flex;align-items:center;gap:12px;}
.review .av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;}
.review .who b{display:block;font-size:16.5px;color:var(--ink);}
.review .who span{font-size:14.5px;color:var(--muted);}
.rev-note{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:15.5px;color:var(--olive);font-weight:700;}

/* ---------- social ---------- */
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;}
@media(max-width:900px){.social-grid{grid-template-columns:1fr 1fr;}}
.spost{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--line-d);
  background:linear-gradient(160deg,#16202f,#0b1220);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;transition:transform .3s;}
.spost:hover{transform:translateY(-5px);}
.spost .plat{position:absolute;top:12px;left:12px;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);}
.spost .cap{font-size:15px;color:var(--cream);font-weight:600;position:relative;z-index:2;}
.spost .em{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:44px;opacity:.9;}
.social-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.slink{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);color:var(--cream);padding:11px 18px;border-radius:999px;font-weight:700;font-size:16px;transition:.2s;}
.slink:hover{border-color:var(--lime);color:var(--lime);}

/* ---------- big CTA ---------- */
.cta-band{background:var(--lime);color:#152400;border-radius:28px;padding:56px;text-align:center;position:relative;overflow:hidden;}
.cta-band h2{color:#152400;}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px;}

/* ---------- footer ---------- */
.footer{background:var(--ink3);color:var(--cream);padding:80px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.footer .brand{font-size:24px;font-weight:900;letter-spacing:.08em;color:#fff;}
.footer .brand b{color:var(--lime);}
.footer h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:16px;}
.footer a{color:var(--cream);font-size:16px;display:block;margin-bottom:9px;transition:color .2s;}
.footer a:hover{color:var(--lime);}
.footer .muted{color:var(--muted-d);font-size:15.5px;line-height:1.6;}
.foot-bottom{border-top:1px solid var(--line-d);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14.5px;color:var(--muted-d);}
.mt10{margin-top:10px;}.mt16{margin-top:16px;}.mt24{margin-top:24px;}.mt40{margin-top:40px;}.mt56{margin-top:56px;}

/* ---------- golden-thread tagline band ---------- */
.thread{background:var(--lime);color:#152400;padding:30px 0;overflow:hidden;}
.thread .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap;text-align:center;}
.thread .base{font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;}
.thread .flow{display:inline-flex;align-items:center;gap:clamp(8px,1.4vw,16px);flex-wrap:wrap;justify-content:center;font-size:clamp(17px,2vw,23px);font-weight:900;}
.thread .flow .node{display:inline-flex;align-items:center;gap:8px;background:#152400;color:#eaffb0;padding:9px 18px;border-radius:999px;}
.thread .flow .node .e{font-size:1.15em;}
.thread .flow .arw{font-size:1.2em;font-weight:900;opacity:.75;}
@media(max-width:640px){.thread .flow .node{padding:8px 14px;}}

/* ===== Animations & decorative graphics ===== */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes pulseGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.12)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.float{animation:floaty 6.5s ease-in-out infinite;}
.float-slow{animation:floaty2 9s ease-in-out infinite;}
/* decorative floating dots */
.fdots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.fdot{position:absolute;border-radius:50%;background:var(--lime);opacity:.5;animation:floaty 7s ease-in-out infinite;}
.fring{position:absolute;border-radius:50%;border:2px solid rgba(149,193,31,.18);animation:floaty2 11s ease-in-out infinite;}
/* hero trajectory */
/* ===== Ballflug: fliegen, aufkommen, springen, ausrollen, fallen ===== */
/* 1) Die Spur — wie im Fernsehen: der Ball führt, die Linie entsteht
      unmittelbar hinter ihm. Dafür müssen beide auf derselben Uhr laufen.
      Gleicher Pfad, gleiche Dauer, gleiche Verzögerung, gleiche Stützstellen.
      Pfadlänge exakt vermessen: 889 Einheiten. */
.tracer{stroke-dasharray:889;stroke-dashoffset:889;opacity:0;
  animation:traceBall 3.95s .45s forwards;}

@keyframes traceBall{
  /* Jede Marke entspricht derselben Marke in flyBall.
     dashoffset = 889 × (1 − offset-distance) */
  0%   {opacity:0;stroke-dashoffset:889;   animation-timing-function:cubic-bezier(.4,0,.68,.32);}
  4%   {opacity:1;                         animation-timing-function:cubic-bezier(.4,0,.68,.32);}
  50%  {stroke-dashoffset:213.3;           animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  59%  {stroke-dashoffset:151.1;           animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  67%  {stroke-dashoffset:111.1;           animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  73%  {stroke-dashoffset:82.7;            animation-timing-function:cubic-bezier(.08,.72,.28,1);}
  100% {stroke-dashoffset:0;opacity:1;}
}

/* 3) Der Ball läuft den ganzen Weg: Flug + drei Sprünge + Ausrollen */
.ballfly{opacity:0;
  offset-path:path('M120 610 C 300 330,430 300,560 586 q 26 -58 52 0 q 18 -34 36 0 q 13 -19 26 0 C 700 586,728 586,758 586');
  offset-rotate:0deg;
  animation:flyBall 3.95s .45s forwards, ballSink .5s 4.3s ease-in forwards;}

@keyframes flyBall{
  /* Flug — wird nach unten hin schneller, wie bei der Schwerkraft */
  0%   {opacity:0;offset-distance:0%;   animation-timing-function:cubic-bezier(.4,0,.68,.32);}
  4%   {opacity:1;                      animation-timing-function:cubic-bezier(.4,0,.68,.32);}
  50%  {offset-distance:76%;            animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  /* erster Sprung, hoch */
  59%  {offset-distance:83%;            animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  /* zweiter Sprung, flacher */
  67%  {offset-distance:87.5%;          animation-timing-function:cubic-bezier(.22,.72,.42,1);}
  /* dritter Sprung, kaum noch */
  73%  {offset-distance:90.7%;          animation-timing-function:cubic-bezier(.08,.72,.28,1);}
  /* Ausrollen — wird immer langsamer */
  100% {offset-distance:100%;opacity:1;}
}

/* 4) Der Ball fällt ins Loch */
@keyframes ballSink{
  0%  {r:7;opacity:1;}
  60% {r:5;opacity:.85;}
  100%{r:1.5;opacity:.15;}
}

/* 5) Das Loch quittiert den Einschlag */
.cup{animation:cupPulse .85s 4.32s ease-out;}
@keyframes cupPulse{
  0%  {stroke-opacity:.22;stroke-width:1;}
  30% {stroke-opacity:.95;stroke-width:2.8;}
  100%{stroke-opacity:.22;stroke-width:1;}
}

@media (prefers-reduced-motion: reduce){
  .tracer,.ballfly,.cup{animation:none;}
  .tracer{stroke-dashoffset:0;opacity:1;}
  .ballfly{opacity:1;offset-distance:100%;}
}
.glow-pulse{animation:pulseGlow 5s ease-in-out infinite;}
/* portrait floating badge */
.portrait .tag{animation:floaty 5s ease-in-out infinite;}
.portrait{transition:transform .5s;}
.portrait:hover{transform:translateY(-6px) rotate(.5deg);}
/* icon pop on reveal */
.reveal.in .icn{animation:fadeUp .6s .1s both;}
/* tech / partner marquee */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee .track{display:flex;gap:56px;width:max-content;animation:marquee 26s linear infinite;}
.marquee .track span{font-size:26px;font-weight:900;letter-spacing:.02em;color:rgba(255,255,255,.55);white-space:nowrap;}
.sec-mint .marquee .track span{color:var(--slate2);}
.marquee:hover .track{animation-play-state:paused;}
/* animated underline links */
.more{position:relative;}
.card:hover .more{transform:translateX(3px);}
.more{transition:transform .25s,color .2s;}

/* ===== EXTRA graphics: dot-grid textures ===== */
.sec-dark,.sec-ink{position:relative;}
.sec-dark::before,.sec-ink::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(149,193,31,.12) 1.4px,transparent 1.6px);background-size:28px 28px;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);}
.sec-mint{position:relative;}
.sec-mint::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,83,45,.10) 1.3px,transparent 1.5px);background-size:30px 30px;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);}
.sec-dark>.wrap,.sec-ink>.wrap,.sec-mint>.wrap{position:relative;z-index:2;}

/* ===== golf-ball floating illustration ===== */
.balldeco{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));}
.balldeco.spin{animation:floaty 8s ease-in-out infinite;}
.flagdeco{position:absolute;pointer-events:none;z-index:1;}
.flagdeco .flagcloth{transform-origin:left center;animation:flagwave 3.2s ease-in-out infinite;}
@keyframes flagwave{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-8deg) scaleX(.92)}}

/* ===== thread node pop ===== */
@keyframes popIn{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.thread .flow .node{animation:popIn .6s cubic-bezier(.2,.8,.2,1) both;}
.thread .flow .node:nth-child(3){animation-delay:.18s;}
.thread .flow .node:nth-child(5){animation-delay:.36s;}
.thread .flow .arw{animation:fadeUp .5s .28s both;}

/* ===== steps connector line (desktop) ===== */
@media(min-width:801px){
  .steps{position:relative;}
  .steps::before{content:"";position:absolute;top:60px;left:16%;right:16%;height:2px;z-index:0;
    background:repeating-linear-gradient(90deg,rgba(149,193,31,.55) 0 10px,transparent 10px 22px);}
  .step{position:relative;z-index:1;}
}

/* ===== section wave divider ===== */
.wave-top{display:block;width:100%;height:60px;margin-bottom:-1px;}
.wave-bottom{display:block;width:100%;height:60px;margin-top:-1px;}

/* ===== stat count-up ===== */
.stat .n{will-change:contents;}

/* ===== card sheen on hover ===== */
.card,.card-dark{position:relative;overflow:hidden;}
.card::after,.card-dark::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(149,193,31,.10),transparent);transform:translateX(-160%) skewX(-18deg);transition:transform .8s;pointer-events:none;}
.card:hover::after,.card-dark:hover::after{transform:translateX(240%) skewX(-18deg);}

/* ===== kicker line grows on reveal ===== */
.kicker::before{transition:width .6s .1s cubic-bezier(.2,.8,.2,1);}
.reveal .kicker::before,.kicker.reveal::before{width:0;}
.reveal.in .kicker::before{width:28px;}
/* number count pop */
.stat .n{transition:transform .3s;}
.stat:hover .n{transform:scale(1.06);}
/* section top wave divider (subtle) */
.btn-lime,.btn-dark{position:relative;overflow:hidden;}
.btn-lime::after,.btn-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25),transparent 70%);transform:translateX(-120%);transition:transform .6s;}
.btn-lime:hover::after,.btn-dark:hover::after{transform:translateX(120%);}

/* ===== LESBARKEIT AUF DUNKLEN FLÄCHEN – zentral für alle Seiten ===== */
/* Überschriften erben sonst die dunkle Standardfarbe (--ink) und werden
   auf dunklem Grund unsichtbar. Gilt für Hero, Seitenköpfe und dunkle Sektionen. */
.hero h1,.hero h2,.hero h3,.hero h4,
.pagehead h1,.pagehead h2,.pagehead h3,.pagehead h4,
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4,
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,
.footer h1,.footer h2,.footer h3,.footer h4{color:#fff;}

/* =====================================================================
   HELLE INSELN IN DUNKLEN ABSCHNITTEN
   Die Regel oben macht jede Überschrift weiss, sobald sie in einem
   dunklen Container steckt. Eine helle Karte IN einem dunklen Abschnitt
   ist aber weiterhin hell — dort war die Überschrift weiss auf mint,
   also unlesbar. Diese Regel dreht es für alle hellen Kartenarten
   zurück und muss NACH der Regel oben stehen.
   ===================================================================== */
.hero .card,.pagehead .card,.part .card,.sec-dark .card,.sec-ink .card,.footer .card,
.hero .card-mint,.pagehead .card-mint,.part .card-mint,.sec-dark .card-mint,.sec-ink .card-mint,.footer .card-mint,
.hero .card-lime,.pagehead .card-lime,.part .card-lime,.sec-dark .card-lime,.sec-ink .card-lime,.footer .card-lime,
.hero .figcard,.pagehead .figcard,.part .figcard,.footer .figcard{color:var(--slate);}

.hero .card h1,.hero .card h2,.hero .card h3,.hero .card h4,
.pagehead .card h1,.pagehead .card h2,.pagehead .card h3,.pagehead .card h4,
.part .card h1,.part .card h2,.part .card h3,.part .card h4,
.sec-dark .card h1,.sec-dark .card h2,.sec-dark .card h3,.sec-dark .card h4,
.sec-ink .card h1,.sec-ink .card h2,.sec-ink .card h3,.sec-ink .card h4,
.footer .card h1,.footer .card h2,.footer .card h3,.footer .card h4,
.hero .card-mint h1,.hero .card-mint h2,.hero .card-mint h3,.hero .card-mint h4,
.pagehead .card-mint h1,.pagehead .card-mint h2,.pagehead .card-mint h3,.pagehead .card-mint h4,
.part .card-mint h1,.part .card-mint h2,.part .card-mint h3,.part .card-mint h4,
.sec-dark .card-mint h1,.sec-dark .card-mint h2,.sec-dark .card-mint h3,.sec-dark .card-mint h4,
.sec-ink .card-mint h1,.sec-ink .card-mint h2,.sec-ink .card-mint h3,.sec-ink .card-mint h4,
.footer .card-mint h1,.footer .card-mint h2,.footer .card-mint h3,.footer .card-mint h4,
.hero .card-lime h1,.hero .card-lime h2,.hero .card-lime h3,.hero .card-lime h4,
.pagehead .card-lime h1,.pagehead .card-lime h2,.pagehead .card-lime h3,.pagehead .card-lime h4,
.part .card-lime h1,.part .card-lime h2,.part .card-lime h3,.part .card-lime h4,
.sec-dark .card-lime h1,.sec-dark .card-lime h2,.sec-dark .card-lime h3,.sec-dark .card-lime h4,
.sec-ink .card-lime h1,.sec-ink .card-lime h2,.sec-ink .card-lime h3,.sec-ink .card-lime h4,
.footer .card-lime h1,.footer .card-lime h2,.footer .card-lime h3,.footer .card-lime h4{color:var(--ink);}

/* Fliesstext, Listen und Vorspann auf hellen Inseln ebenfalls zurückdrehen */
.sec-dark .card p,.sec-ink .card p,.part .card p,.hero .card p,.pagehead .card p,
.sec-dark .card li,.sec-ink .card li,.part .card li,.hero .card li,.pagehead .card li,
.sec-dark .card-mint p,.sec-ink .card-mint p,.part .card-mint p,.hero .card-mint p,.pagehead .card-mint p,
.sec-dark .card-mint li,.sec-ink .card-mint li,.part .card-mint li,.hero .card-mint li,.pagehead .card-mint li,
.sec-dark .card-mint .lead,.sec-ink .card-mint .lead,.sec-dark .card .lead,.sec-ink .card .lead{color:var(--slate);}
.sec-dark .card-lime p,.sec-ink .card-lime p,.part .card-lime p,
.sec-dark .card-lime li,.sec-ink .card-lime li,.part .card-lime li{color:#152400;}

/* Der Kicker auf hellen Inseln braucht die dunklere Olive, nicht Lime */
.sec-dark .card .ct,.sec-ink .card .ct,.part .card .ct,
.sec-dark .card-mint .ct,.sec-ink .card-mint .ct,.part .card-mint .ct,
.sec-dark .card .kicker,.sec-ink .card .kicker,.sec-dark .card-mint .kicker,.sec-ink .card-mint .kicker{color:var(--olive);}

/* Fliesstext auf dunklen Flächen — alle dunklen Container, nicht nur einzelne */
.hero p,.hero li,.pagehead p,.pagehead li,.part p,.part li,
.sec-dark p,.sec-dark li,.sec-ink p,.sec-ink li,.footer p,.footer li{color:var(--cream);}
.hero .sub,.pagehead .sub,.part .sub{color:var(--cream);}
.hero .lead,.pagehead .lead,.part .lead,
.sec-dark .lead,.sec-ink .lead,.footer .lead{color:var(--cream);}

/* Helle Inseln behalten ihren dunklen Text — sie haben hellen Hintergrund */
.hero .card p,.pagehead .card p,.part .card p,.sec-dark .card p,.sec-ink .card p,
.hero .card li,.pagehead .card li,.part .card li,.sec-dark .card li,.sec-ink .card li,
.sec-dark .card-mint p,.sec-ink .card-mint p,.part .card-mint p,
.sec-dark .step p,.sec-ink .step p,.part .step p,
.sec-dark .figcard p,.sec-ink .figcard p,.part .figcard p,
.sec-dark .cta-band p,.sec-ink .cta-band p,.part .cta-band p,
.sec-dark .box li,.sec-ink .box li,.part .box li,
.sec-dark .box p,.sec-ink .box p,.part .box p{color:var(--slate);}

/* Lime-Akzente in Überschriften bleiben lime */
.hero h1 .lime,.pagehead h1 .lime,.sec-dark .lime,.sec-ink .lime,
.hero h2 .lime,.pagehead h2 .lime{color:var(--lime);}

/* Textauswahl gut lesbar */
::selection{background:var(--lime);color:#152400;}
::-moz-selection{background:var(--lime);color:#152400;}

/* Sicherheitsnetz: ohne JS oder bei reduzierter Bewegung bleibt alles sichtbar */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ===== EINWILLIGUNG (consent.js) ===== */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:400;background:var(--ink);color:var(--cream);
  border-top:2px solid var(--lime);box-shadow:0 -18px 44px rgba(0,0,0,.34);
  transform:translateY(110%);transition:transform .38s cubic-bezier(.2,.7,.2,1);}
.cc.show{transform:none;}
.cc-inner{max-width:var(--wrap);margin:0 auto;padding:26px 24px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;}
@media(max-width:920px){.cc-inner{grid-template-columns:1fr;gap:20px;}}
.cc h4{color:#fff;font-size:21px;margin-bottom:8px;}
.cc-txt>p{font-size:16px;color:var(--muted-d);max-width:820px;line-height:1.55;}
.cc-txt>p a{color:var(--lime);font-weight:800;text-decoration:underline;}
.cc-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
@media(max-width:820px){.cc-opts{grid-template-columns:1fr;}}
.cc-opt{display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.04);
  border:1.5px solid var(--line-d);border-radius:14px;padding:13px 15px;cursor:pointer;transition:border-color .18s;}
.cc-opt:hover{border-color:var(--lime);}
.cc-opt.cc-fix{opacity:.72;cursor:default;}
.cc-opt input{appearance:none;width:21px;height:21px;border:2px solid var(--muted-d);border-radius:6px;
  flex:0 0 21px;margin-top:2px;cursor:pointer;position:relative;transition:.18s;}
.cc-opt input:checked{background:var(--lime);border-color:var(--lime);}
.cc-opt input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2.4px solid #14532d;border-bottom:2.4px solid #14532d;transform:rotate(42deg);}
.cc-opt input:disabled{cursor:default;}
.cc-opt span{display:block;}
.cc-opt b{display:block;color:#fff;font-size:15.5px;font-weight:800;margin-bottom:4px;}
.cc-opt em{display:block;font-style:normal;font-size:13.5px;color:var(--muted-d);line-height:1.45;}
.cc-btns{display:grid;gap:10px;min-width:246px;}
@media(max-width:920px){.cc-btns{grid-template-columns:1fr 1fr;min-width:0;}
  .cc-btns .cc-min{grid-column:1/-1;}}
.cc-btns .btn{width:100%;justify-content:center;text-align:center;}
.cc-btns .btn-outline{border-color:rgba(255,255,255,.34);color:#fff;}
.cc-min{background:none;border:0;color:var(--muted-d);font-family:inherit;font-weight:700;
  font-size:14.5px;text-decoration:underline;cursor:pointer;padding:6px;}
.cc-min:hover{color:#fff;}

/* ===== Bildbänder & Bildkarten ===== */
/* =====================================================================
   BILDAUSSCHNITT
   Ein Bildband ist bei grossem Bildschirm rund 3:1 — die Vorlagen sind
   aber 16:9. Es geht also fast die Hälfte der Höhe verloren. Wo dieser
   Schnitt aus der Mitte kommt, köpft er Menschen.
   Faustregel des Fotografen: Augen liegen im oberen Drittel. Deshalb
   sitzt der Ausschnitt hier bei 38 % statt bei 50 %.
   ===================================================================== */
.figband{margin:0;position:relative;}
.figband img{width:100%;height:clamp(260px,42vw,460px);object-fit:cover;object-position:center 38%;display:block;}

/* Einzelne Bilder brauchen einen eigenen Schwerpunkt */
.figband img.fp-hoch{object-position:center 24%;}   /* Kopf sitzt weit oben */
.figband img.fp-mitte{object-position:center 50%;}
.figband img.fp-tief{object-position:center 66%;}

/* Sachaufnahmen: Produkte, Urkunden, Schaubilder.
   Sie dürfen NIE beschnitten werden — sonst fehlt die Hälfte der Aussage.
   Ganz zeigen, Rest freilassen. */
.figband img.fig-ganz{object-fit:contain;background:#0f1216;height:auto;max-height:clamp(300px,44vw,520px);}
img.fig-ganz{object-fit:contain !important;}
/* Ein 1000x641-Bild in einem 2.91:1-Band verliert 47 Prozent der Höhe —
   dabei gehen zuerst die Füsse verloren. Kein object-position hilft dagegen,
   das Verhältnis stimmt einfach nicht. Diese Fassung schneidet gar nicht:
   das Bild behält sein eigenes Verhältnis und wird nur in der Breite begrenzt. */
/* Für Bilder mit eingebranntem Text: volle Breite, aber das Verhältnis
   der Datei selbst. Nichts wird beschnitten, also bleibt die Schrift ganz.
   Höhe deckeln, damit es auf breiten Schirmen nicht ausufert. */
/* Das Bildverhältnis der Datei als Rahmenverhältnis setzen: 1000x563 = 16:9.
   Dann füllt cover die volle Breite und schneidet trotzdem nichts weg —
   Rahmen und Bild haben dasselbe Verhältnis. Kein max-height, denn ein
   Deckel erzeugt genau die Balken links und rechts, die stören. */
.figband.eigenes-mass{max-width:none;margin:0;padding:0;}
.figband.eigenes-mass img{width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:0;display:block;}
.figband.ganzes-bild{max-width:none;margin:0;padding:0;}
/* Volle Breite ohne Balken links und rechts — dafür wird oben und unten
   beschnitten. Das Bild ist 1000x641, der Spieler belegt die Zeilen 127 bis 542.
   Bei 2:1 bleiben 500 der 641 Zeilen sichtbar; mit 55 Prozent Versatz liegt
   das Fenster auf 78 bis 578. Der Spieler steht damit ganz drin, weg fallen
   nur Himmel oben und Vordergrundrasen unten.
   Wer das Verhältnis schmaler macht als 2:1, schneidet ihm wieder die Füsse ab. */
.figband.ganzes-bild img{
  width:100%;height:auto;aspect-ratio:2/1;
  object-fit:cover;object-position:center 55%;
  border-radius:0;}
@media(max-width:700px){
  /* Auf dem Telefon wäre 2:1 nur ein schmaler Streifen — dort mehr Höhe. */
  .figband.ganzes-bild img{aspect-ratio:4/3;object-position:center 52%;}
}
.figcard img.fig-ganz{height:190px;background:#fff;padding:10px;box-sizing:border-box;}
.figband figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 24px 22px;
  background:linear-gradient(180deg,transparent,rgba(6,11,20,.82));color:#fff;
  font-size:16.5px;font-weight:700;}
.figband figcaption .wrap{padding:0 24px;}
.figband.rounded img{border-radius:26px;}
.figgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:860px){.figgrid{grid-template-columns:1fr;}}
.figcard{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;}
.figcard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(17,24,39,.10);}
.figcard img{width:100%;height:190px;object-fit:cover;display:block;}
.figcard .body{padding:24px;}
.figcard h3{font-size:22px;margin-bottom:9px;}
.figcard p{font-size:17px;color:var(--slate);}
.sec-dark .figcard,.sec-ink .figcard{background:var(--ink);border-color:var(--line-d);}
.sec-dark .figcard h3,.sec-ink .figcard h3{color:#fff;}
.sec-dark .figcard p,.sec-ink .figcard p{color:var(--cream);}

/* ===== Hero-Portrait: Auftritt und ruhiges Schweben ===== */
/* Das Portrait sass in einem Inline-Stil: align-self:start, -40px nach oben,
   margin-left:auto. Damit war die Zentrierung des Rasters (align-items:center)
   ausgehebelt — Anthony klebte oben am Spaltenanfang, unten rechts blieb eine
   grosse Leere. Die Masse gehören hierher, nicht in die Seite. */
/* margin-left:auto hält das Portrait bündig am rechten Rand des Rasters.
   Kleiner als die Spalte gesetzt, damit links zusätzlich Luft entsteht. */
.hero-portrait{position:relative;width:100%;max-width:420px;margin-left:auto;}
/* Das Portrait steht nicht mittig zum ganzen Textblock, sondern beginnt oben
   auf der Höhe der Überschrift. Der Vorlauf entspricht der Kicker-Zeile plus
   ihrem Abstand zur H1 — deshalb eine Variable und keine geratene Zahl. */
.hero-grid{align-items:start;}
.hero-portrait{margin-top:var(--hero-kicker,74px);}
@media(max-width:900px){
  .hero-grid{align-items:center;}
  .hero-portrait{max-width:340px;margin:0 auto;}
}

/* weicher Lichtschein hinter dem Portrait, atmet mit */
.hero-portrait::before{
  content:"";position:absolute;inset:-11% -11% -13% -11%;border-radius:50%;
  background:radial-gradient(circle,rgba(149,193,31,.30),rgba(149,193,31,0) 62%);
  filter:blur(14px);z-index:0;
  animation:heroGlow 6.5s 1s ease-in-out infinite;
}
.hero-portrait .portrait{
  position:relative;z-index:1;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  animation:portraitIn 1.05s .2s cubic-bezier(.2,.75,.25,1) both,
            portraitFloat 7s 1.4s ease-in-out infinite;
}
/* beim Darüberfahren hält das Schweben an und das Bild kommt entgegen */
.hero-portrait:hover .portrait{animation-play-state:paused;}
.hero-portrait:hover::before{animation-play-state:paused;opacity:1.15;}

@keyframes portraitIn{
  0%  {opacity:0;transform:translateY(34px) scale(.93) rotate(-1.6deg);}
  60% {opacity:1;}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg);}
}
@keyframes portraitFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%    {transform:translateY(-13px) rotate(.7deg);}
}
@keyframes heroGlow{
  0%,100%{opacity:.55;transform:scale(1);}
  50%    {opacity:.95;transform:scale(1.06);}
}

/* Wer weniger Bewegung eingestellt hat, bekommt sie auch nicht */
@media (prefers-reduced-motion: reduce){
  .hero-portrait .portrait,.hero-portrait::before{animation:none;}
}

/* =====================================================================
   TYPOGRAFIE UND WEISSRAUM — gilt für alle Seiten
   Drei Stellschrauben: Durchschuss (Zeilenabstand), Abstand zwischen
   Blöcken und Satzbreite. Text braucht Luft, sonst liest ihn niemand.
   ===================================================================== */

/* --- Durchschuss --- */
body{line-height:1.74;}
p{line-height:1.74;}
.lead{line-height:1.62;}
.hero .sub,.pagehead .sub{line-height:1.58;}

/* --- Aufeinanderfolgende Absätze bekommen Abstand --- */
p + p{margin-top:1.1em;}

/* --- Satzbreite: mehr als rund 70 Zeichen ermüdet das Auge --- */
.sec p{max-width:70ch;}
.center p,.cta-band p,.figband figcaption{max-width:none;}
.lead{max-width:min(780px,68ch);}

/* --- Listen: Abstand zwischen den Punkten, nicht nur zwischen den Zeilen --- */
ul.ticks{gap:20px;margin-top:12px;}
ul.ticks li{line-height:1.62;padding-left:34px;}
ul.ticks li::before{top:4px;}
ul.ticks li::after{top:8.4px;}
.price ul{gap:14px;}
.price ul li{line-height:1.58;}
.hio{gap:14px;}
.hio li{line-height:1.55;}

/* --- Karten: mehr Innenabstand, luftigerer Satz --- */
.card,.card-mint,.card-lime{padding:34px 32px;}
.card-dark{padding:34px 32px;}
.card p,.card-dark p,.card-mint p,.card-lime p{line-height:1.72;}
.card h3,.card-mint h3,.card-dark h3{margin-bottom:15px;line-height:1.16;}
.card .ct,.card-dark .ct,.card-mint .ct{margin-bottom:15px;}
.card .more{margin-top:20px;}

/* --- Überschriften: Raum darunter, engerer Zeilenfall darin --- */
.h2{line-height:1.07;}
.h3{line-height:1.16;}

/* Grosse Schrift braucht MEHR Durchschuss, nicht weniger.
   Bei 78px stossen Oberlängen und Unterlängen sonst zusammen —
   "weiterentwickelt" über "vergisst." war unlesbar.
   Elementweise setzen, sonst greift Zeile 16 (1.04) weiter durch. */
h1{line-height:1.09;}
h2{line-height:1.12;}
h3{line-height:1.2;}
h4{line-height:1.3;}
.hero h1,.pagehead h1{line-height:1.08;}

/* =====================================================================
   DAS BAUWERK
   Die Metapher wörtlich genommen: sechs Stockwerke, von unten nach oben
   gebaut. Das obere kann erst entstehen, wenn das untere steht — genau
   das ist die Aussage. Die Animation läuft erst, wenn der Abschnitt
   sichtbar wird (.reveal.in setzt der bestehende Beobachter).
   ===================================================================== */
.bauwerk{margin:0;}
.bauwerk svg{width:100%;height:auto;overflow:visible;}
.bauwerk figcaption{margin-top:16px;font-size:16px;color:var(--muted);text-align:center;}

/* Grundzustand: alles unsichtbar und leicht abgesenkt */
.bauwerk .etage{opacity:0;transform:translateY(26px);}
.bauwerk .etage rect{fill:var(--ink);}
.bauwerk .et-nr{fill:var(--lime);font-weight:900;font-size:19px;font-family:inherit;}
.bauwerk .et-tx{fill:#fff;font-weight:800;font-size:18px;font-family:inherit;}
.bauwerk .et-zu{fill:var(--lime);font-weight:700;font-size:13px;font-family:inherit;letter-spacing:.06em;text-transform:uppercase;}

/* Das Fundament ist massiver — es trägt alles */
.bauwerk .fundament rect{fill:var(--ink);stroke:var(--lime);stroke-width:3;}
/* Die Prüfung sticht hervor */
.bauwerk .pruefung rect{fill:#152400;stroke:var(--lime);stroke-width:2;}

.bauwerk .sockel{fill:none;stroke:var(--line);stroke-width:2;opacity:0;}
.bauwerk .schraffur line{stroke:var(--line);stroke-width:2;opacity:0;}
.bauwerk .grund{stroke:var(--ink);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:380;stroke-dashoffset:380;}
.bauwerk .fmast{stroke:var(--ink);stroke-width:3;stroke-linecap:round;}
.bauwerk .fahne{fill:var(--lime);transform-origin:250px 83px;}

/* Kran — steht schon da, bevor gebaut wird */
.bauwerk .kran line{stroke:var(--muted);stroke-width:2.5;stroke-linecap:round;opacity:0;}
.bauwerk .kr-haken{fill:var(--muted);opacity:0;}

/* --- Ablauf: Boden, Kran, dann Stockwerk für Stockwerk von unten --- */
.reveal.in .bauwerk .grund{animation:bauGrund .7s .1s ease-out forwards;}
.reveal.in .bauwerk .sockel,.reveal.in .bauwerk .schraffur line{animation:bauEin .5s .3s ease-out forwards;}
.reveal.in .bauwerk .kran line,.reveal.in .bauwerk .kr-haken{animation:bauEin .6s .45s ease-out forwards;}
.reveal.in .bauwerk .kr-seil{animation:bauEin .6s .45s ease-out forwards, seilAb 3.4s .6s ease-in-out;}

.reveal.in .bauwerk .e1{animation:etageRauf .62s .70s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .e2{animation:etageRauf .62s 1.06s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .e3{animation:etageRauf .62s 1.42s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .e4{animation:etageRauf .62s 1.78s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .e5{animation:etageRauf .62s 2.14s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .e6{animation:etageRauf .62s 2.50s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .bauwerk .fahne{animation:fahneWeht 3.2s 3.2s ease-in-out infinite;}

@keyframes etageRauf{
  0%  {opacity:0;transform:translateY(26px);}
  70% {opacity:1;transform:translateY(-3px);}   /* kurz überschwingen, dann setzen */
  100%{opacity:1;transform:translateY(0);}
}
@keyframes bauEin{to{opacity:1;}}
@keyframes bauGrund{to{stroke-dashoffset:0;}}
@keyframes seilAb{
  0%,100%{transform:translateY(0);}
  45%    {transform:translateY(300px);}
}
@keyframes fahneWeht{
  0%,100%{transform:scaleX(1);}
  50%    {transform:scaleX(.86) skewY(-3deg);}
}

/* Ohne Bewegungswunsch: alles sofort fertig gebaut zeigen */
@media (prefers-reduced-motion: reduce){
  .bauwerk .etage{opacity:1;transform:none;}
  .bauwerk .sockel,.bauwerk .schraffur line,.bauwerk .kran line,.bauwerk .kr-haken{opacity:1;}
  .bauwerk .grund{stroke-dashoffset:0;}
  .reveal.in .bauwerk *{animation:none !important;}
}

/* =====================================================================
   DIE LEITER — vom Schlag bis zum Ziel
   Sechs Stufen, jede grösser als die vorige. Die Nummer sitzt links in
   einem Feld, damit die Staffelung sofort als Reihenfolge gelesen wird
   und nicht als Aufzählung gleichrangiger Punkte.
   ===================================================================== */
.leiter{list-style:none;counter-reset:stufe;display:grid;gap:2px;}
.leiter li{counter-increment:stufe;position:relative;padding:16px 0 16px 62px;
  line-height:1.6;border-bottom:1px solid var(--line);}
.leiter li:last-child{border-bottom:0;}
.leiter li::before{content:counter(stufe);position:absolute;left:0;top:14px;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--mint2);color:var(--olive);font-weight:900;font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(149,193,31,.3);}
/* Je höher die Stufe, desto kräftiger — die Leiter wird sichtbar steiler */
.leiter li:nth-child(4)::before{background:var(--lime);color:#152400;}
.leiter li:nth-child(5)::before{background:var(--lime);color:#152400;}
.leiter li:nth-child(6)::before{background:var(--ink);color:var(--lime);box-shadow:none;}
.leiter li b{color:var(--ink);}
/* Auf allen sechs dunklen Flächen aufhellen */
.hero .leiter li,.pagehead .leiter li,.part .leiter li,
.sec-dark .leiter li,.sec-ink .leiter li,.footer .leiter li{color:var(--cream);border-color:var(--line-d);}
.hero .leiter li b,.pagehead .leiter li b,.part .leiter li b,
.sec-dark .leiter li b,.sec-ink .leiter li b,.footer .leiter li b{color:#fff;}
.sec-dark .leiter li::before,.sec-ink .leiter li::before,
.part .leiter li::before,.hero .leiter li::before{background:rgba(149,193,31,.16);color:var(--lime);}
@media(max-width:640px){.leiter li{padding-left:52px;} .leiter li::before{width:32px;height:32px;}}

/* --- Worttrennung in Überschriften abschalten ---
   „Golf-unterricht" ist zwar korrekt getrennt, in einer 50px-Überschrift
   aber unschön. Lange deutsche Wörter rücken lieber ganz in die nächste
   Zeile. text-wrap:balance verteilt die Zeilen zusätzlich gleichmässig. */
h1,h2,h3,h4,.h2,.h3{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance;}
.lead,.sub{text-wrap:pretty;}

/* --- Der Weg vom Kicker über den Titel zum Lead --- */
.kicker{margin-bottom:14px;}
.hero h1,.pagehead h1{margin-bottom:0;}

/* Lead und Sub klebten direkt am Titel — das war der Hauptbefund */
.hero h1 + .lead,.pagehead h1 + .lead,
.hero h1 + .sub,.pagehead h1 + .sub,
.hero h1 + p,.pagehead h1 + p{margin-top:28px;}
.sec h2 + .lead,.sec h2 + p,.sec .h2 + .lead,.sec .h2 + p{margin-top:22px;}

/* Abstand zu den Schaltflächen */
.hero .hero-cta,.pagehead .hero-cta{margin-top:40px;}
.hero-badges{margin-top:42px;}

/* Titelblock und folgender Inhalt */
.sec-head,.title-block{margin-bottom:44px;}

/* --- Abstandsklassen grosszügiger --- */
.mt10{margin-top:12px;}
.mt16{margin-top:20px;}
.mt24{margin-top:30px;}
.mt40{margin-top:48px;}
.mt56{margin-top:66px;}

/* --- Abschnitte atmen mehr --- */
.sec{padding:118px 0;}
.sec-sm{padding:84px 0;}
@media(max-width:760px){
  .sec{padding:80px 0;}
  .sec-sm{padding:60px 0;}
  .card,.card-mint,.card-lime,.card-dark{padding:28px 24px;}
  ul.ticks{gap:17px;}
}

/* --- Gitterabstände --- */
.grid{gap:26px;}
.figgrid{gap:26px;}
.steps{gap:26px;}
.price-grid{gap:26px;}

/* ============================================================
   Offertbeleg auf danke.html — Bildschirm
   Der Block steht in einer hellen .sec, nie auf dunklem Grund.
   Dunkle Farben stehen bewusst in zusammengesetzten Selektoren.
   ============================================================ */
[hidden]{display:none !important;}

.sec .beleg{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:38px 36px;color:var(--slate);}
.beleg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:2px solid var(--line);}
.beleg .beleg-marke{font-weight:900;letter-spacing:.1em;font-size:26px;color:var(--ink);line-height:1;}
.beleg .beleg-marke b{color:var(--lime);}
.beleg .beleg-absender{font-style:normal;font-size:14.5px;line-height:1.6;color:var(--muted);text-align:right;}
.beleg-titel{margin-top:26px;}
.beleg .beleg-h{font-size:28px;letter-spacing:-.03em;color:var(--ink);line-height:1.15;}
.beleg .beleg-kennung{display:flex;gap:28px;flex-wrap:wrap;margin-top:10px;font-size:15px;color:var(--muted);}
.beleg .beleg-kennung b{color:var(--slate2);font-weight:800;letter-spacing:.03em;margin-left:6px;}
.beleg-block{margin-top:32px;break-inside:avoid;page-break-inside:avoid;}
.beleg .beleg-bh{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);
  padding-bottom:9px;border-bottom:1px solid var(--line);}
.beleg-liste{display:grid;grid-template-columns:236px 1fr;margin-top:4px;}
.beleg .beleg-liste dt{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:700;color:var(--muted);}
.beleg .beleg-liste dd{padding:10px 0;border-bottom:1px solid var(--line);
  font-size:16.5px;font-weight:700;color:var(--slate2);white-space:pre-line;}
.beleg .beleg-hinweis{margin-top:32px;padding:17px 19px;background:var(--mint);border:1px solid #d9ecdb;
  border-radius:14px;font-size:16px;line-height:1.6;color:var(--slate);break-inside:avoid;page-break-inside:avoid;}
.beleg-aktion{margin-top:28px;}
.beleg-aktion .beleg-fussnote{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:660px;}
@media(max-width:560px){
  .sec .beleg{padding:28px 22px;}
  .beleg-liste{grid-template-columns:1fr;}
  .beleg .beleg-liste dt{padding:10px 0 0 0;border-bottom:0;}
  .beleg .beleg-absender{text-align:left;}
}

/* ============================================================
   Druckausgabe — schwarz auf weiss, ohne dunkle Flächen
   ============================================================ */
@page{margin:16mm;}

@media print{
  html,body{background:#fff !important;color:#000 !important;font-size:11pt;line-height:1.5;}
  .progress,.nav,.footer,.thread,.no-print,.cc{display:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  a{color:#000 !important;text-decoration:none;}

  /* Liegt ein Beleg vor, kommt nur er aufs Papier. */
  body.beleg-da > *{display:none !important;}
  body.beleg-da > #offertbeleg{display:block !important;padding:0 !important;background:#fff !important;}
  body.beleg-da #offertbeleg .wrap{max-width:none !important;padding:0 !important;}

  #offertbeleg .beleg{border:0 !important;border-radius:0 !important;padding:0 !important;
    background:#fff !important;color:#000 !important;}
  #offertbeleg .beleg *{color:#000 !important;background:transparent !important;}
  #offertbeleg .beleg-kopf{border-bottom:1.5pt solid #000;padding-bottom:8pt;}
  #offertbeleg .beleg-marke{font-size:19pt;letter-spacing:.12em;}
  #offertbeleg .beleg-absender{font-size:8.5pt;line-height:1.45;}
  #offertbeleg .beleg-titel{margin-top:14pt;}
  #offertbeleg .beleg-h{font-size:16pt;}
  #offertbeleg .beleg-kennung{font-size:10pt;gap:18pt;margin-top:5pt;}
  #offertbeleg .beleg-block{margin-top:16pt;}
  #offertbeleg .beleg-bh{font-size:9pt;border-bottom:.75pt solid #000;padding-bottom:4pt;}
  #offertbeleg .beleg-liste{grid-template-columns:52mm 1fr;margin-top:2pt;}
  #offertbeleg .beleg-liste dt{font-size:10.5pt;padding:4pt 8pt 4pt 0;border-bottom:.5pt solid #bbb;}
  #offertbeleg .beleg-liste dd{font-size:10.5pt;padding:4pt 0;border-bottom:.5pt solid #bbb;}
  #offertbeleg .beleg-hinweis{margin-top:16pt;border:.75pt solid #000 !important;border-radius:0;
    font-size:10pt;padding:8pt 10pt;}
  #offertbeleg .beleg-kopf,#offertbeleg .beleg-block,#offertbeleg .beleg-hinweis{
    break-inside:avoid;page-break-inside:avoid;}
}

/* ============================================================
   Google-Bewertungen — wiederverwendbare Karte (.bw)
   Hell auf hellem Grund; für alle sechs dunklen Container
   (.hero, .pagehead, .part, .sec-dark, .sec-ink, .footer)
   weiter unten aufgehellt.
   ============================================================ */
.bw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.bw-grid.bw-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.bw-grid,.bw-grid.bw-3{grid-template-columns:1fr;}}

.bw{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;gap:12px;margin:0;}
.bw-sterne{color:#f5b301;font-size:18px;letter-spacing:2px;line-height:1;}
.bw blockquote{font-size:17.5px;color:var(--slate);line-height:1.58;margin:0;font-weight:500;}
.bw-wer{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px;}
.bw-av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16.5px;flex:0 0 auto;}
.bw-name{display:block;font-size:16.5px;font-weight:800;color:var(--ink);}
.bw-zeit{display:block;font-size:14.5px;color:var(--muted);font-weight:600;}
.bw-hinweis{font-size:15.5px;color:var(--muted);font-weight:600;}
.bw-sprache{font-size:13.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;}

.hero .bw,.pagehead .bw,.part .bw,.sec-dark .bw,.sec-ink .bw,.footer .bw{
  background:rgba(255,255,255,.055);border-color:var(--line-d);}
.hero .bw blockquote,.pagehead .bw blockquote,.part .bw blockquote,
.sec-dark .bw blockquote,.sec-ink .bw blockquote,.footer .bw blockquote{color:var(--cream);}
.hero .bw-name,.pagehead .bw-name,.part .bw-name,
.sec-dark .bw-name,.sec-ink .bw-name,.footer .bw-name{color:#fff;}
.hero .bw-zeit,.pagehead .bw-zeit,.part .bw-zeit,
.sec-dark .bw-zeit,.sec-ink .bw-zeit,.footer .bw-zeit,
.hero .bw-hinweis,.pagehead .bw-hinweis,.part .bw-hinweis,
.sec-dark .bw-hinweis,.sec-ink .bw-hinweis,.footer .bw-hinweis,
.hero .bw-sprache,.pagehead .bw-sprache,.part .bw-sprache,
.sec-dark .bw-sprache,.sec-ink .bw-sprache,.footer .bw-sprache{color:var(--muted-d);}
.hero .bw-av,.pagehead .bw-av,.part .bw-av,
.sec-dark .bw-av,.sec-ink .bw-av,.footer .bw-av{background:var(--lime);color:#152400;}

/* =====================================================================
   NEWSLETTER-ANMELDUNG
   Drei Pflichtfelder plus Einwilligung. Die Einwilligung ist keine
   Höflichkeit, sondern Voraussetzung — ohne sie darf nicht versendet
   werden. Deshalb steht sie sichtbar und nicht vorangekreuzt.
   ===================================================================== */
.nl{background:var(--ink);border-radius:26px;padding:44px 40px;color:var(--cream);}
.nl h2{color:#fff;}
.nl .nl-lead{color:var(--cream);max-width:60ch;}
.nl form{margin-top:28px;}
.nl-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.nl-felder .voll{grid-column:1/-1;}
@media(max-width:640px){.nl-felder{grid-template-columns:1fr;} .nl{padding:32px 22px;}}
.nl label{display:block;font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lime);margin-bottom:7px;}
.nl input[type=text],.nl input[type=email]{width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.06);border:1px solid var(--line-d);border-radius:13px;
  padding:14px 15px;font:inherit;font-size:17px;color:#fff;transition:border-color .2s;}
.nl input::placeholder{color:var(--muted-d);}
.nl input:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.09);}
.nl input:invalid:not(:placeholder-shown){border-color:#c0693f;}
.nl-ok{display:flex;gap:12px;align-items:flex-start;margin-top:22px;
  font-size:15.5px;line-height:1.55;color:var(--cream);}
.nl-ok input{margin-top:4px;width:19px;height:19px;accent-color:var(--lime);flex:0 0 auto;}
.nl-ok a{color:var(--lime);text-decoration:underline;}
.nl button{margin-top:24px;}
.nl button[disabled]{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important;}
.nl-hinweis{margin-top:14px;font-size:14.5px;color:var(--muted-d);}

/* =====================================================================
   SOCIAL-KANÄLE
   Anthony postet täglich auf allen Plattformen — das ist sein grösster
   Vorsprung. Er gehört auf jede Seite, nicht nur auf die Startseite.
   ===================================================================== */
.social-links{display:flex;gap:9px;flex-wrap:wrap;}
.slink{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-d);
  font-size:14.5px;font-weight:700;color:var(--cream);
  transition:border-color .2s,background .2s,transform .2s;}
.slink:hover{border-color:var(--lime);color:var(--lime);background:rgba(149,193,31,.10);transform:translateY(-2px);}
.slink svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor;}

/* =====================================================================
   DIE REISE — eine Woche als Flugbahn
   Der Faden zeichnet sich beim Scrollen, das Flugzeug fliegt ihn ab,
   und jede Station steigt auf, wenn sie erreicht wird. Kein Karussell:
   der Besucher soll die Woche einmal von vorn bis hinten erleben.
   Ausgelöst wird alles über .reveal.in — den Beobachter gibt es schon.
   ===================================================================== */
.reise{position:relative;}
.reise-bahn{position:relative;height:120px;margin-bottom:-30px;}
.reise-bahn svg{width:100%;height:120px;overflow:visible;display:block;}
.reise-bahn .bahn{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;opacity:.55;}
.reise-bahn .flieger{offset-rotate:auto;opacity:0;}
.reveal.in .reise-bahn .bahn{animation:bahnZeichnen 4.6s .2s cubic-bezier(.35,0,.2,1) forwards;}
.reveal.in .reise-bahn .flieger{animation:fliegerEin .4s .2s forwards, fliegerZieht 4.6s .2s cubic-bezier(.35,0,.2,1) forwards;}
@keyframes bahnZeichnen{to{stroke-dashoffset:0;}}
@keyframes fliegerEin{to{opacity:1;}}
@keyframes fliegerZieht{
  0%  {offset-distance:0%;}
  100%{offset-distance:100%;}
}

.reise-tage{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative;}
@media(max-width:1080px){.reise-tage{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.reise-tage{grid-template-columns:1fr;gap:14px;}}

.tag{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transform:translateY(30px) scale(.97);}
.tag .bild{position:relative;height:150px;overflow:hidden;background:var(--mint);}
.tag .bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.06);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.tag:hover .bild img{transform:scale(1.13);}
.tag .nr{position:absolute;left:12px;top:12px;z-index:2;
  background:var(--lime);color:#152400;font-weight:900;font-size:12px;letter-spacing:.1em;
  padding:6px 11px;border-radius:999px;text-transform:uppercase;}
.tag .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
.tag h3{font-size:19px;line-height:1.2;margin-bottom:8px;color:var(--ink);}
.tag p{font-size:15.5px;line-height:1.55;color:var(--slate);}
.tag .frei{background:var(--mint);border-color:#cfe6cf;}

/* Ohne Bild — der freie Tag lebt von den Wörtern */
.tag.wort .bild{height:auto;background:none;}
.tag.wort .worte{display:flex;flex-wrap:wrap;gap:7px;padding:18px 18px 0;}
.tag.wort .worte span{font-size:14px;font-weight:800;color:var(--olive);
  background:var(--mint2);border-radius:999px;padding:6px 12px;
  opacity:0;transform:translateY(8px);}
.reveal.in .tag.wort .worte span{animation:wortEin .5s forwards;}
@keyframes wortEin{to{opacity:1;transform:none;}}

/* Die sechs Stationen steigen nacheinander auf — im Takt der Flugbahn */
.reveal.in .tag{animation:tagAuf .7s cubic-bezier(.2,.8,.25,1) forwards;}
.reveal.in .tag:nth-child(1){animation-delay:.45s;}
.reveal.in .tag:nth-child(2){animation-delay:1.15s;}
.reveal.in .tag:nth-child(3){animation-delay:1.85s;}
.reveal.in .tag:nth-child(4){animation-delay:2.55s;}
.reveal.in .tag:nth-child(5){animation-delay:3.25s;}
.reveal.in .tag:nth-child(6){animation-delay:3.95s;}
@keyframes tagAuf{
  0%  {opacity:0;transform:translateY(30px) scale(.97);}
  65% {opacity:1;transform:translateY(-4px) scale(1.006);}
  100%{opacity:1;transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .reise-bahn .bahn{stroke-dashoffset:0;}
  .reise-bahn .flieger{opacity:1;}
  .tag,.tag.wort .worte span{opacity:1;transform:none;}
  .reveal.in .reise-bahn *,.reveal.in .tag,.reveal.in .tag.wort .worte span{animation:none !important;}
}

/* =====================================================================
   HINWEISBLÖCKE UNTER PRODUKTRASTERN
   .sec p ist auf 70 Zeichen begrenzt — richtig für Fliesstext, falsch
   für einen Hinweis, der unter einem dreispaltigen Raster steht und
   dort als schmale Säule in der linken Hälfte hängen bleibt.
   Er nimmt die volle Rasterbreite, aber keinen Millimeter mehr.
   ===================================================================== */
.cat-note{max-width:none;}
.cat-note p{max-width:none;}
.cat-note{background:rgba(20,83,45,.05);border:1px solid #d9ecdb;
  border-radius:20px;padding:28px 30px;}
.cat-note p{font-size:16.5px;line-height:1.7;color:var(--slate);}
.cat-note p + p{margin-top:14px;}
.cat-note b{color:var(--ink);}
@media(max-width:640px){.cat-note{padding:22px 20px;}}

/* Auch für andere volle Textblöcke unter Rastern */
.sec .voll-breit p,.voll-breit{max-width:none;}