/* --- Schriften ---------------------------------------------
   Red Hat Display und Red Hat Text – dieselben Schnitte wie auf
   dev.aktie.de. Selbst gehostet statt über den Google-CDN: sonst
   ginge bei jedem Seitenaufruf die IP-Adresse an Google, und die
   Zusage „keine Dienste Dritter“ in der Datenschutzerklärung
   wäre hinfällig.

   Variable Schriftdateien, ein Schnitt deckt den ganzen
   Gewichtsbereich ab. Zusammen rund 84 KB.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Red Hat Display"; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url("../fonts/red-hat-display-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:"Red Hat Display"; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url("../fonts/red-hat-display-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:"Red Hat Text"; font-style:normal; font-weight:400 600;
  font-display:swap;
  src:url("../fonts/red-hat-text-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:"Red Hat Text"; font-style:normal; font-weight:400 600;
  font-display:swap;
  src:url("../fonts/red-hat-text-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;
}

/* ============================================================
   Dachstuhl.de — Fundament
   Design-Tokens, Reset, Typografie, Layout-Primitive.

   Ebenen:  base.css  → Tokens, Reset, Typo, Layout, Utilities
            app.css   → Komponenten und Sektionen
            funnel.css→ Multi-Step-Angebotsstrecke
   ============================================================ */

/* ============================================================
   Dachstuhl.de — Fundament

   Formensprache: technische Zeichnung. Haarlinien statt Schatten,
   kantige Radien, Maßzahlen in Tabellenziffern, warmes Papier.

   Ebenen:  base.css   → Tokens, Reset, Typografie, Layout
            app.css    → Komponenten und Sektionen
            funnel.css → Anfragestrecke
   ============================================================ */

:root{
  /* KERNFARBEN: Hellblau und Orange.
     Hellblau trägt die Flächen (Bühne, Bänder, Zeichnung, Auswahlzustände),
     Orange ist das Signal (Schaltflächen, Strich unter den Überschriften,
     Maßkette, Fortschritt).

     Schrift braucht Kontrast: Hellblau erreicht auf Weiß 1,8:1, Orange 3,0:1 –
     beide sind als Textfarbe unzulässig. Die Typografie steht deshalb im
     Tiefblau derselben Familie (#0f2b40, 14,6:1), Schrift in Akzentfarbe im
     abgedunkelten Orange (#a84a0d, 5,7:1). Schaltflächen tragen weiße
     Schrift auf dem vollen #f26d1f: das sind 3,0:1 und damit
     nur als grosse Schrift zulaessig - deshalb tragen Schaltflaechen
     19 px in 700, was WCAG als 'large text' zaehlt (Schwelle 3:1). */

  --paper:#ffffff;

  --blue-050:#f4f9fc;
  --blue-100:#e7f3fd;   /* Bühne – entspricht dem Hintergrund der Dachgrafik */
  --blue-200:#d3e4f0;
  --blue-300:#a8c0d7;   /* Kernfarbe Hellblau */
  --blue-700:#1c4e73;
  --blue-900:#0f2b40;   /* dunkle Fläche, Typografie */

  --accent:#f26d1f;       /* Kernfarbe Orange – Flächen, Linien, Grafik */
  --accent-text:#a84a0d;  /* Orange als Schrift */
  --accent-btn:#f26d1f;   /* Schaltflächen im vollen Markenorange */
  --accent-btn-hover:#d85c12;
  --accent-700:#d85c12;
  --accent-100:#fbdcc6;
  --accent-050:#fef5ef;

  --off:#f1f7fb;
  --off-2:#e1ecf5;
  --ink:#0f2b40;
  --ink-2:#39536a;
  --ink-3:#54728c;
  --ink-4:#517089;
  --line:#dbe8f2;
  --line-2:#c2d7e6;

  --focus:#b4500f;

  --wrap:1220px;
  --wrap-narrow:840px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(72px,10vw,146px);

  --r-xs:3px;
  --r-s:5px;
  --r-m:8px;
  --r-l:12px;

  --sh-s:0 1px 2px rgba(15,43,64,.07);
  --sh-m:0 2px 6px rgba(15,43,64,.06), 0 16px 40px rgba(15,43,64,.10);
  --sh-l:0 4px 12px rgba(15,43,64,.08), 0 34px 74px rgba(15,43,64,.15);

  --f:"Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-display:"Red Hat Display", "Red Hat Text", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:76px;
}

/* --- Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--f);
  font-size:clamp(16px,.5vw + 14.8px,17px);
  line-height:1.62;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit; color:inherit; margin:0}
input,select,textarea{font:inherit; color:inherit}

/* --- Typografie --------------------------------------------- */
h1,h2,h3,h4{
  margin:0 0 .5em;
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.09;
  letter-spacing:-.026em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5vw,3.85rem); letter-spacing:-.036em; line-height:1.04}
h2{font-size:clamp(1.9rem,3.9vw,3rem); letter-spacing:-.031em}
h3{font-size:clamp(1.12rem,1.45vw,1.3125rem); letter-spacing:-.016em; line-height:1.3}
h4{font-size:1rem}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.0625rem,1.3vw,1.25rem);
  line-height:1.58; color:var(--ink-2); letter-spacing:-.01em;
}
.muted{color:var(--ink-3)}
.small{font-size:.875rem; line-height:1.55}

/* Maßzahl-Optik: kleine Versalien, Tabellenziffern, Ockerton */
.tag{
  display:inline-block;
  font-size:.75rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--accent-text);
  margin:0 0 20px;
}
.tag--ink{color:var(--ink-4)}

/* --- Layout -------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(48px,6vw,86px)}
.section--off{background:var(--off)}
.section--ruled{border-top:1px solid var(--line)}

.head{max-width:none}
.head h2{max-width:18ch; position:relative; padding-bottom:24px}
/* Signaturelement: der kurze Akzentstrich unter jeder Abschnittsüberschrift */
.head h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:64px; height:3px; background:var(--accent);
}
.head p{margin-top:.65em; max-width:52ch}

/* --- Zugänglichkeit ------------------------------------------ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; inset-block-start:10px; inset-inline-start:10px; z-index:300;
  padding:13px 20px; border-radius:var(--r-s);
  background:var(--ink); color:#fff; font-weight:600; text-decoration:none;
  transform:translateY(-220%);
}
.skip:focus-visible{transform:none}

/* --- Einblenden ----------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

@media print{
  .site-header,dialog,.hero__plan{display:none!important}
  body{color:#000}
  .section{padding-block:16px}
}