/* erbright Design-System: gemeinsame Grundlage aller Seiten.
   Verbindliche Referenz: style-guide.html. Konvention: BEM-lite (block__element, block--modifier),
   Präfixe: site-* = Rahmen (Banner, Nav, Footer), type-* = Typografie, section/panel = Layout,
   Seiten-Komponenten ohne Präfix in home.css / pages.css / article.css. Tokens: --color-*, --font-*, --radius-*, --motion-*. */
:root{
  /* Farbe */
  --color-ink:#1E1928;
  --color-text-muted:rgba(30,25,40,.64);
  --color-border-subtle:rgba(30,25,40,.08);
  --color-border-default:rgba(30,25,40,.16);
  --color-icon-muted:rgba(30,25,40,.40);
  --color-bg-page:#FFFFFF;
  --color-surface-subtle:#F6F5F7;
  --color-surface-warm:#F4EFE9;
  --color-surface-dark:#372219;
  --color-accent-primary:#B2D3EA;
  --color-accent-cta:#FF9E7D;
  /* Schrift */
  --font-display:"Fraunces",Georgia,serif;
  --font-sans:"Inter",system-ui,sans-serif;
  /* Form & Motion */
  --radius-pill:9999px;
  --radius-card:16px;
  --radius-card-lg:24px;
  --motion-ease-standard:cubic-bezier(.22,1,.36,1);
  --size-banner-height:3.5rem;
}

/* base */
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:400 16px/26px var(--font-sans);letter-spacing:-.011em;color:var(--color-ink);background:var(--color-bg-page);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
sup{font-size:.7em;line-height:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* layout – Sektions-Anatomie: <section class="section …"> = volle Breite, trägt NUR den Background;
   darin .section__inner = Container-Breite + vertikales Padding */
.l-container{max-width:1140px;margin:0 auto;padding:0 24px}
.section__inner{max-width:1140px;margin:0 auto;padding:96px 24px}
/* dunkle Sektionen (Guide Regel 2/3): solid surface-dark, weißer Text; --fade-ink verläuft zu ink (vor Footer o.ä.) */
.section--dark{background:var(--color-surface-dark);color:#fff}
.section--fade-ink{background:linear-gradient(to bottom,var(--color-surface-dark),var(--color-ink) 92%)}
.section--dark .type-eyebrow{color:rgba(255,255,255,.56)}
.section--dark .text-muted{color:rgba(255,255,255,.72)}
.section--dark .footnote{color:rgba(255,255,255,.56)}
.section--dark .panel{color:var(--color-ink)}  /* Panels bleiben helle Inseln mit Ink-Text */
.section--dark .panel .type-eyebrow{color:var(--color-text-muted)}
.section--dark .panel .text-muted{color:var(--color-text-muted)}

/* typografie – px-Zeilenhöhen, Serif immer Gewicht 400 */
.type-display-xl{font:400 64px/74px var(--font-display);letter-spacing:0}
.type-display-lg{font:400 44px/54px var(--font-display);letter-spacing:0}
.type-display-sm{font:400 32px/42px var(--font-display);letter-spacing:0}
.type-heading-sm{font:600 20px/28px var(--font-sans);letter-spacing:-.017em}
.type-body-lg{font:400 18px/30px var(--font-sans);letter-spacing:-.014em}
.type-eyebrow{font:600 13px/20px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.text-muted{color:var(--color-text-muted)}

/* buttons – Pills, 12×24px */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);padding:12px 24px;font:400 16px/24px var(--font-sans);letter-spacing:-.084px;text-decoration:none;white-space:nowrap;transition:background-color .28s ease,transform .28s var(--motion-ease-standard)}
.button:hover{transform:scale(1.02)}
.button--primary{background:var(--color-accent-cta);color:var(--color-ink)}
.button--primary:hover{background:#F58B64}
.button--light{background:#fff;color:var(--color-ink)}
.button--ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}

/* announcement banner */
.site-banner{display:flex;height:var(--size-banner-height);align-items:center;justify-content:center;background:var(--color-ink);color:#fff;font:400 14px/20px var(--font-sans);letter-spacing:-.084px;text-decoration:none}
.site-banner:hover{text-decoration:underline}

/* nav – full-width weiß, wird beim Scrollen zur Floating-Pill */
.site-nav{position:sticky;top:0;z-index:100;display:flow-root;height:76px}  /* flow-root verhindert Margin-Collapse der Pill (32px-Abstand fiel sonst durch), feste Höhe hält das Dokument stabil */
.site-nav__bar{width:100%;height:76px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;background:#fff;border-radius:0;box-shadow:0 1px 0 rgba(30,25,40,.06);transition:width .45s var(--motion-ease-standard),height .45s var(--motion-ease-standard),margin .45s var(--motion-ease-standard),padding .45s var(--motion-ease-standard),border-radius .45s var(--motion-ease-standard),background-color .3s ease,box-shadow .4s ease}
.site-nav.is-scrolled .site-nav__bar{width:min(100% - 48px,1024px);height:64px;margin:24px auto 0;padding:8px 8px 8px 32px;border-radius:var(--radius-pill);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 30px -10px rgba(30,25,40,.22),0 1px 2px rgba(30,25,40,.06)}
.site-nav__inner{position:relative;width:100%;max-width:1440px;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.wordmark{font:400 26px/1 var(--font-display);text-decoration:none}
.wordmark span{color:var(--color-accent-cta)}
.site-nav__links{display:flex;gap:0;align-items:center;list-style:none}
.site-nav__links a:not(.site-nav__cta){text-decoration:none;display:inline-flex;align-items:center;padding:10px 16px;border-radius:100px;font:400 16px/24px var(--font-sans);letter-spacing:-.084px;color:var(--color-ink);transition:background-color .2s ease}
.site-nav__links a:not(.site-nav__cta):hover{background:var(--color-border-subtle)}
.site-nav__cta{font-size:14px;margin-left:8px}
.site-nav__toggle{display:none}

/* sektionskopf + panels */
.section__head{max-width:720px;margin-bottom:40px}
.section__head .type-eyebrow{margin-bottom:16px}
.section__head p{margin-top:16px}
.panel{border-radius:var(--radius-card-lg);padding:64px 56px}
.panel--surface-warm{background:var(--color-surface-warm)}

/* footer */
.site-footer{background:var(--color-ink);color:rgba(255,255,255,.64);padding:56px 0}
.site-footer__inner{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-footer .wordmark{color:#fff}
.site-footer__columns{display:flex;gap:32px 80px;flex-wrap:wrap}
.site-footer__heading{font:600 13px/20px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer ul :is(a,button){color:rgba(255,255,255,.64);text-decoration:none;font-size:14px}
.site-footer ul button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;line-height:inherit;letter-spacing:inherit}  /* Cookie-Einstellungen: Button, sieht aus wie die Links */
.site-footer ul :is(a,button):hover{color:#fff}
.site-footer__legal{margin-top:32px;font-size:13px;line-height:20px;color:rgba(255,255,255,.56);max-width:860px}
.nowrap{white-space:nowrap}
html.has-open-menu{overflow:hidden}  /* Seite hinter dem Vollbild-Menü scrollt nicht mit */

/* motion-empfindlichkeit */
@media (prefers-reduced-motion:reduce){
  .site-nav__links{animation:none !important}
  .button{transition:none}
  .button:hover{transform:none}
}

/* Mobil: Navigation als aufklappbares Menü (vorher wurden alle Links außer dem CTA ausgeblendet) */
@media (max-width:920px){
  .panel{padding:40px 24px}
  .type-display-xl{font-size:40px;line-height:50px}
  .type-display-lg{font-size:32px;line-height:42px}
  .section__inner{padding:64px 24px}
  .site-nav__links{margin-left:auto}
  .site-nav__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-left:4px;padding:10px 14px;border:0;border-radius:var(--radius-pill);background:transparent;font:400 15px/22px var(--font-sans);color:var(--color-ink);cursor:pointer}
  .site-nav__toggle:hover{background:var(--color-border-subtle)}
  .site-nav__toggle-icon{width:18px;height:2px;background:currentColor;position:relative;transition:background-color .2s ease}
  .site-nav__toggle-icon::before,.site-nav__toggle-icon::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .25s var(--motion-ease-standard)}
  .site-nav__toggle-icon::before{top:-6px}
  .site-nav__toggle-icon::after{top:6px}
  .site-nav__links li:not(:last-child){display:none}

  /* Geöffnet: Vollbild-Overlay. Die Pill fällt in den Normalzustand zurück, weil backdrop-filter
     sonst das fixierte Overlay auf die Pill begrenzen würde. Logo und Knopf liegen über dem Overlay. */
  .site-nav.is-open .site-nav__bar{width:100%;height:76px;margin:0 auto;padding:8px 24px;border-radius:0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .site-nav.is-open .wordmark{position:relative;z-index:2}
  .site-nav.is-open .site-nav__toggle-icon{background:transparent}
  .site-nav.is-open .site-nav__toggle-icon::before{transform:translateY(6px) rotate(45deg)}
  .site-nav.is-open .site-nav__toggle-icon::after{transform:translateY(-6px) rotate(-45deg)}
  .site-nav.is-open .site-nav__links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--nav-bottom, 76px) + 24px) 24px calc(32px + env(safe-area-inset-bottom));background:#fff;overflow-y:auto;animation:nav-overlay-in .2s ease}
  .site-nav.is-open .site-nav__links li{display:block;border-bottom:1px solid var(--color-border-subtle)}
  .site-nav.is-open .site-nav__links li:last-child{border-bottom:0;margin-top:auto;padding-top:24px}
  .site-nav.is-open .site-nav__links a:not(.site-nav__cta){display:block;padding:18px 0;border-radius:0;font:400 28px/36px var(--font-display);background:transparent}
  .site-nav.is-open .site-nav__cta{width:100%;margin:0;padding:16px 24px;font-size:17px}
  @keyframes nav-overlay-in{from{opacity:0}to{opacity:1}}
}

@media (max-width:640px){
  .panel{padding:36px 20px}
  .site-nav__toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}  /* nur für Screenreader */
}