/* ==========================================================================
   johannesebermann.de — Design-Tokens aus dem Brand Style Guide (Kap. 11)
   Alle Farbwerte stammen aus dem Token-Export; Zustände werden nur per
   color-mix abgeleitet (Hover −8 %, Active −14 % Helligkeit).
   ========================================================================== */
:root{
/* Farben — fix, aus dem Porträt abgeleitet */
--color-primary:#C8A882;--color-primary-hover:#B99368;--color-primary-active:#A98354;--color-primary-soft:#EADDC8;
--color-secondary:#9B8B7A;--color-secondary-hover:#8A7A69;
--color-accent:#5A6B73;--color-accent-hover:#4A5A62;--color-accent-active:#3E4C53;
--color-bg:#F8F6F0;
--color-hero-grad-a:#F6E9DA;--color-hero-grad-b:#DCCDBD;
--color-nav:#444241;--color-footer:#2C2C2C;
--color-text:#2C2C2C;--color-text-muted:#666666;--color-text-inverse:#F8F6F0;
--color-icon-tone:#F7EBDC;
--color-scarf:#CD6C5A;--color-scarf-hover:#B85B4A;
--color-shirt:#7498A6;--color-jacket:#72848C;
--surface-page:var(--color-bg);--surface-card:#FFFFFF;--surface-dark:var(--color-footer);
--gradient-hero:linear-gradient(135deg,var(--color-hero-grad-a),var(--color-hero-grad-b));
--text-body-c:var(--color-text);--text-muted:var(--color-text-muted);--text-heading:var(--color-secondary);--text-on-dark:var(--color-icon-tone);
--cta-bg:var(--color-primary);--cta-bg-hover:var(--color-primary-hover);--cta-text:#FFFFFF;
--link-color:var(--color-scarf);--link-hover:var(--color-scarf-hover);
--border-subtle:#E8E2D6;--focus-ring:2px solid var(--color-shirt);
/* Typografie — System A „Charakterkopf" */
--font-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
--font-heading:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
--font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
--font-ui:'Instrument Sans',system-ui,sans-serif;
--text-display:clamp(44px,6vw,72px);--lh-display:1.02;
--text-h1:clamp(36px,4.5vw,56px);--lh-h1:1.08;
--text-h2:clamp(28px,3.2vw,40px);--lh-h2:1.15;
--text-h3:clamp(22px,2.2vw,26px);--lh-h3:1.25;
--text-h4:20px;--lh-h4:1.35;
--text-lead:clamp(18px,1.8vw,20px);--lh-lead:1.55;
--text-body:17px;--lh-body:1.6;
--text-small:15px;--lh-small:1.5;
--text-caption:13px;--lh-caption:1.4;
--tracking-display:-0.02em;--tracking-caps:0.08em;
--weight-display:700;--weight-heading:600;--weight-body:400;--weight-medium:500;
/* Abstände · Radien · Schatten · Bewegung */
--space-3xs:4px;--space-2xs:8px;--space-xs:12px;--space-sm:16px;--space-md:24px;--space-lg:40px;--space-xl:64px;--space-2xl:96px;--space-3xl:128px;
--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-pill:999px;
--shadow-card:0 2px 8px rgba(44,44,44,0.05),0 12px 32px rgba(155,139,122,0.12);
--shadow-card-hover:0 4px 12px rgba(44,44,44,0.07),0 20px 44px rgba(155,139,122,0.18);
--shadow-nav:0 1px 0 rgba(44,44,44,0.08);
--transition-fast:150ms ease-out;--transition-base:250ms ease-out;--transition-slow:450ms cubic-bezier(.22,.61,.36,1);
--touch-target:44px;
--container-max:1200px;--container-pad:clamp(20px,5vw,64px);
--nav-h:64px;
}

/* Fonts — lokal gehostet (woff2), keine Drittserver */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url('../assets/fonts/bricolage-grotesque-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url('../assets/fonts/bricolage-grotesque-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url('../assets/fonts/instrument-sans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Basis */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body-c);font:var(--weight-body) var(--text-body)/var(--lh-body) var(--font-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-hover)}
:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}
section{scroll-margin-top:calc(var(--nav-h) + 20px)}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface-card);color:var(--text-body-c);padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;z-index:200}
.skip:focus{left:0}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-body-c);text-wrap:balance;margin:0}
p{margin:0 0 1em}
.kicker{font:600 var(--text-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-scarf)}
.lead{font-size:var(--text-lead);line-height:var(--lh-lead)}
.muted{color:var(--text-muted)}
.proof{font-style:italic;font-size:var(--text-small);line-height:var(--lh-small);color:var(--text-muted)}

/* Signatur: der rote Faden (max. eine Linie pro Sichtbereich) */
.pathline{display:block;margin:10px auto 0}
.sec-head{text-align:center;margin-bottom:var(--space-xl)}
.sec-head h2{font-size:var(--text-h2);line-height:var(--lh-h2);font-weight:var(--weight-display);letter-spacing:var(--tracking-display)}
.sec-head .lead{max-width:60ch;margin:14px auto 0;color:var(--text-muted)}

/* Buttons */
.btn{font:600 16px/1.2 var(--font-ui);border:none;border-radius:var(--radius-pill);padding:13px 28px;min-height:var(--touch-target);display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.btn-primary{background:var(--cta-bg);color:var(--cta-text)}
.btn-primary:hover{background:var(--cta-bg-hover);color:var(--cta-text)}
.btn-primary:active{background:var(--color-primary-active)}
.btn-accent{background:var(--color-accent);color:#FFFFFF}
.btn-accent:hover{background:var(--color-accent-hover);color:#FFFFFF}
.btn-accent:active{background:var(--color-accent-active)}

/* Navigation */
.nav{position:sticky;top:0;z-index:100;background:var(--color-nav);box-shadow:var(--shadow-nav)}
.nav-in{max-width:var(--container-max);margin:0 auto;padding-inline:clamp(16px,3vw,40px);min-height:var(--nav-h);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-on-dark);font:700 17px/1 var(--font-display);letter-spacing:.01em;min-height:var(--touch-target)}
.brand:hover{color:#FFFFFF}
.brand img{width:34px;height:34px}
.brand .gold{color:var(--color-primary)}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{color:var(--text-on-dark);font:600 14px/1 var(--font-ui);padding:15px 12px;border-radius:var(--radius-sm);min-height:var(--touch-target);display:inline-flex;align-items:center;white-space:nowrap}
.nav-links a:hover{color:#FFFFFF;background:rgba(255,255,255,.07)}
.nav-sep{width:1px;height:22px;background:rgba(255,255,255,.18);margin:0 8px}
.lang{display:flex;align-items:center;gap:2px;margin-left:auto}
.lang a{color:var(--text-on-dark);font:600 13px/1 var(--font-ui);padding:0 9px;min-height:var(--touch-target);display:inline-flex;align-items:center;border-radius:var(--radius-sm);opacity:.75}
.lang a:hover{opacity:1;color:#FFFFFF;background:rgba(255,255,255,.07)}
.lang a[aria-current]{opacity:1;color:var(--color-primary)}
.burger{display:none;margin-left:2px;background:none;border:none;color:var(--text-on-dark);width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-sm);cursor:pointer;align-items:center;justify-content:center}
.burger:hover{background:rgba(255,255,255,.07)}
.burger .ic{width:22px;height:22px}
.burger .ic-close,.burger[aria-expanded="true"] .ic-open{display:none}
.burger[aria-expanded="true"] .ic-close{display:inline-block}
@media(min-width:768px) and (max-width:1100px){
  .nav-links a{font-size:13px;padding:15px 7px}
  .lang a{padding:0 6px}
  .nav-in{gap:8px}
}
@media(min-width:768px) and (max-width:1023px){
  /* Wortmarke unter Mindestbreite: Monogramm übernimmt (Style Guide Kap. 03) */
  .brand .wordmark{display:none}
  .brand img{width:38px;height:38px}
}
@media(max-width:559px){
  /* Wortmarke < 140px Breite: Monogramm statt Schriftzug (Style Guide Kap. 03) */
  .brand .wordmark{display:none}
  .brand img{width:38px;height:38px}
}
@media(max-width:767px){
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--color-nav);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:2px;margin:0;box-shadow:var(--shadow-card)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px;min-height:48px}
  .nav-sep{display:none}
  .burger{display:inline-flex}
}

/* Hero */
.hero{background:var(--gradient-hero);overflow:hidden}
.hero-in{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad);display:grid;grid-template-columns:1fr;align-items:center;gap:var(--space-md)}
.hero-copy{padding-block:clamp(40px,7vh,90px) 0;text-align:center}
.hero-copy .kicker{color:var(--color-secondary)}
.hero h1{font-size:var(--text-display);line-height:var(--lh-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);margin:14px 0 12px;max-width:15ch;margin-inline:auto}
.hero .pathline{margin:6px auto 26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-fig{position:relative;margin:0;justify-self:center;width:min(88%,380px)}
.hero-fig img{width:100%;object-fit:contain;object-position:bottom}
.fico{position:absolute;width:52px;height:52px;border-radius:50%;background:var(--color-icon-tone);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;z-index:2}
.fico .ic{width:22px;height:22px}
.fico:nth-child(odd){animation:float 6s ease-in-out infinite alternate}
.fico:nth-child(even){animation:float 7s 1.2s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
.f1{top:4%;left:-4%}.f2{top:26%;right:-6%}.f3{top:52%;left:-8%}.f4{top:72%;right:-4%}.f5{top:8%;right:14%}.f6{top:82%;left:10%}
.c-gold{color:var(--color-primary)}.c-scarf{color:var(--color-scarf)}.c-shirt{color:var(--color-shirt)}.c-jacket{color:var(--color-jacket)}.c-accent{color:var(--color-accent)}.c-secondary{color:var(--color-secondary)}
@media(max-width:767px){.hero-ctas .btn{flex:1 1 100%;max-width:400px}}
@media(min-width:768px){
  .hero-in{grid-template-columns:3fr 2fr;gap:var(--space-lg)}
  .hero-copy{text-align:left;padding-block:clamp(48px,9vh,110px)}
  .hero-copy .lead,.hero h1{margin-inline:0}
  .hero .pathline,.hero-ctas{justify-content:flex-start;margin-inline:0}
  .hero-fig{align-self:end;width:100%;max-width:460px}
  .hero-fig img{max-height:clamp(420px,58vh,640px);margin-inline:auto}
}
@media(min-width:1024px){.hero-fig{max-width:520px}.hero-fig img{max-height:clamp(420px,70vh,760px)}}

/* Stats / Counter */
.stats{padding-block:var(--space-2xl)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.stat{text-align:center}
.stat b{display:block;font:var(--weight-display) clamp(40px,4.6vw,60px)/1.05 var(--font-display);letter-spacing:var(--tracking-display);color:var(--color-primary);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font:var(--weight-medium) var(--text-small)/var(--lh-small) var(--font-ui);color:var(--text-muted)}
@media(max-width:767px){.stats-grid .stat:last-child{grid-column:1/-1}}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(5,1fr)}}

/* Timeline */
.tl-sec{padding-block:var(--space-2xl)}
.tl{position:relative;max-width:960px;margin:0 auto}
.tl::before{content:"";position:absolute;top:8px;bottom:8px;left:11px;width:2.5px;background:repeating-linear-gradient(to bottom,var(--color-scarf) 0 2.5px,transparent 2.5px 11px)}
.tl-item{position:relative;margin:0 0 var(--space-md);padding-left:44px}
.tl-item::before{content:"";position:absolute;left:5px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--color-scarf);border:3px solid var(--surface-page)}
.tl-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:clamp(20px,3vw,30px);transition:box-shadow var(--transition-base),transform var(--transition-base)}
.tl-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.tl-meta{font:600 var(--text-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-secondary)}
.tl-card h3{font-size:var(--text-h3);line-height:var(--lh-h3);font-weight:var(--weight-heading);margin:8px 0 10px}
.tl-card p{margin:0}
.tl-card .proof{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
@media(min-width:1024px){
  .tl::before{left:50%;transform:translateX(-50%)}
  .tl-item{width:50%;padding-left:0;padding-right:48px}
  .tl-item::before{left:auto;right:-10px;top:30px}
  .tl-item:nth-child(even){margin-left:50%;padding-right:0;padding-left:48px}
  .tl-item:nth-child(even)::before{right:auto;left:-10px}
}

/* Karten (Kompetenzen) */
.comp-sec{padding-block:var(--space-2xl)}
.cards{display:grid;grid-template-columns:1fr;gap:var(--space-md)}
@media(min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px;transition:box-shadow var(--transition-base),transform var(--transition-base)}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.card .dot{position:absolute;top:20px;right:20px;width:8px;height:8px;border-radius:50%;opacity:.6}
.disc{width:52px;height:52px;border-radius:50%;background:var(--color-icon-tone);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.disc .ic{width:22px;height:22px}
.card h3{font-size:var(--text-h4);line-height:var(--lh-h4);font-weight:var(--weight-heading);margin:0 0 10px}
.card p{margin:0}
.card .proof{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}

/* Erfahrungen (ausklappbar) */
.exp-sec{padding-block:var(--space-2xl)}
.stories{max-width:860px;margin:0 auto;display:grid;gap:var(--space-sm)}
.story{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.story summary{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;min-height:var(--touch-target);font:var(--weight-heading) var(--text-h4)/var(--lh-h4) var(--font-heading)}
.story summary::-webkit-details-marker{display:none}
.story summary:hover{background:var(--color-bg)}
.story summary .disc{margin:0;flex-shrink:0;width:44px;height:44px}
.story summary .disc .ic{width:19px;height:19px}
.story summary .chev{margin-left:auto;flex-shrink:0;color:var(--color-secondary);transition:transform var(--transition-base)}
.story[open] summary .chev{transform:rotate(180deg)}
.story-body{padding:4px 24px 24px;display:grid;gap:18px}
@media(min-width:768px){.story-body{grid-template-columns:1fr 1fr;padding:8px 32px 32px}}
.sblock .slabel{display:flex;align-items:center;gap:8px;font:600 var(--text-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-secondary);margin-bottom:6px}
.sblock .slabel .ic{width:15px;height:15px;color:var(--color-primary)}
.sblock p,.sblock ul{margin:0;font-size:var(--text-small);line-height:var(--lh-small)}
.sblock ul{padding-left:0;list-style:none}
.sblock li{position:relative;padding-left:16px;margin-bottom:4px}
.sblock li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-primary)}
.sblock.learn p{font-style:italic;color:var(--text-muted)}

/* Arbeitsweise — Säulen */
.work-sec{padding-block:var(--space-2xl)}
.pillars{display:grid;grid-template-columns:1fr;gap:var(--space-md)}
@media(min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--transition-base),transform var(--transition-base)}
.pillar:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.pillar-head{height:76px;display:flex;align-items:center;padding-inline:24px}
.pillar-head .disc{margin:0;background:var(--color-icon-tone)}
.pillar.p-scarf .pillar-head{background:linear-gradient(135deg,color-mix(in srgb,var(--color-scarf),#FFFFFF 18%),var(--color-scarf))}
.pillar.p-shirt .pillar-head{background:linear-gradient(135deg,color-mix(in srgb,var(--color-shirt),#FFFFFF 18%),var(--color-shirt))}
.pillar.p-jacket .pillar-head{background:linear-gradient(135deg,color-mix(in srgb,var(--color-jacket),#FFFFFF 18%),var(--color-jacket))}
.pillar-body{padding:22px 24px 26px}
.pillar h3{font-size:var(--text-h4);line-height:var(--lh-h4);font-weight:var(--weight-heading);margin:0 0 10px}
.pillar p{margin:0 0 14px;font-size:var(--text-small);line-height:var(--lh-small)}
.pillar .mlabel{font:600 var(--text-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-secondary);margin-bottom:8px}
.pillar ul{margin:0;padding:0;list-style:none;font-size:var(--text-small);line-height:var(--lh-small)}
.pillar li{position:relative;padding-left:16px;margin-bottom:6px}
.pillar li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%}
.pillar.p-scarf li::before{background:var(--color-scarf)}
.pillar.p-shirt li::before{background:var(--color-shirt)}
.pillar.p-jacket li::before{background:var(--color-jacket)}
.bridge{max-width:62ch;margin:var(--space-xl) auto 0;text-align:center;font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--text-muted)}

/* Aktuell / PATHWEAVER — Weggabelungs-Foto mit Schutzverlauf aus #2C2C2C (Style Guide Kap. 07) */
.now-sec{position:relative;background:var(--surface-dark);padding-block:var(--space-2xl);overflow:hidden}
.now-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 42%}
.now-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,44,44,.5) 0%,rgba(44,44,44,.74) 45%,rgba(44,44,44,.88) 100%)}
.now-sec .container{position:relative}
.now-in{max-width:820px;margin:0 auto;text-align:center;color:var(--text-on-dark)}
.now-sec .kicker{color:var(--color-primary)}
.now-sec h2{font-size:var(--text-h1);line-height:var(--lh-h1);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--color-icon-tone)}
.now-sub{font:600 var(--text-lead)/var(--lh-lead) var(--font-ui);color:var(--color-primary);margin:16px 0 24px}
.now-sec p{text-align:left;color:var(--color-icon-tone)}
.now-sec .dwa{font-size:var(--text-small);line-height:var(--lh-small);color:var(--color-icon-tone);opacity:.78}
.now-cta{margin-top:var(--space-md);text-align:center}

/* Footer */
.footer{background:var(--surface-dark);color:var(--text-on-dark);padding-block:var(--space-xl) var(--space-lg);margin-top:var(--space-2xl)}
.footer a{color:var(--text-on-dark)}
.footer a:hover{color:var(--color-primary)}
.f-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);margin-top:var(--space-lg)}
@media(min-width:768px){.f-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.f-brand{font:700 20px/1.2 var(--font-display)}
.f-brand .gold{color:var(--color-primary)}
.f-motto{opacity:.7;margin-top:6px;font-size:var(--text-small)}
.f-col h2{font:600 var(--text-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-primary);margin:0 0 14px}
.f-col ul{margin:0;padding:0;list-style:none;font-size:var(--text-small)}
.f-col li{margin-bottom:10px}
.f-col a{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding-block:4px}
.f-col .ic{width:15px;height:15px}
.f-base{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:var(--text-caption);opacity:.75}

/* Rechtsseiten */
.legal{max-width:760px;margin:0 auto;padding:var(--space-xl) var(--container-pad) var(--space-2xl)}
.legal h1{font-size:var(--text-h2);line-height:var(--lh-h2);font-weight:var(--weight-display);letter-spacing:var(--tracking-display)}
.legal h2{font-size:var(--text-h4);line-height:var(--lh-h4);font-weight:var(--weight-heading);margin:32px 0 10px}
.legal .pathline{margin:12px 0 28px}
.legal address{font-style:normal}

/* Einblendungen */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--transition-slow),transform var(--transition-slow)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fico{animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}