/* =====================================================================
   stil.css  ·  gemeinsame Gestaltung der Funktionsseiten
   ---------------------------------------------------------------------
   Bringt die acht Funktionsseiten und die Uebersicht auf den Stand der
   Landing (25.08.2026). Die Klassennamen sind unveraendert geblieben,
   damit kein Markup und keine SEO-Substanz angefasst werden musste; nur
   ihr Aussehen ist neu.

   Zwei Dinge waren vorher kaputt und sind hier behoben:
   1. Die Seiten schrieben font-family:Inter, luden Inter aber NIE. Sie
      liefen also in Segoe UI und sahen schon deshalb anders aus als die
      Landing. Jetzt wird dieselbe selbst gehostete Datei geladen.
   2. Jede Seite trug ihren eigenen Stilblock im Kopf, 100 Zeilen mal
      neun. Eine Aenderung musste neunmal gemacht werden.

   Farben, Radien, Schatten und Typo sind aus index.html uebernommen,
   nicht nachempfunden.
   ===================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../brand/fonts/inter-var.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../brand/fonts/inter-var-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}

:root{
  --accent:#2563EB;
  --accent-tief:#1D4ED8;
  --verlauf:linear-gradient(92deg,#2563EB 10%,#0891B2 90%);
  --knopf-verlauf:linear-gradient(135deg,#2563EB 0%,#1D4ED8 100%);
  --bg:#F7F9FC;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --ruhig:#EFF6FF;
  --border:#E6EAF0;
  --border-fein:#EEF2F7;
  --text:#0F172A;
  --muted:#64748B;
  --gruen:#16A34A;
  --radius:16px;
  --radius-gross:20px;
  --schatten:0 2px 4px rgba(15,23,42,.05), 0 18px 50px rgba(15,23,42,.10);
  --schatten-leise:0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.06);
  --schatten-knopf:0 18px 40px -18px rgba(37,99,235,.35);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img{max-width:100%}

/* Bewusst padding-left/right statt der Kurzform: .wrap sitzt auf denselben
   Elementen wie section, und die Kurzform wuerde deren vertikale Polsterung
   mit ueberschreiben. Genau daran sind die Abstaende vorher gestorben. */
.wrap{max-width:1160px;margin:0 auto;padding-left:clamp(18px,4vw,32px);padding-right:clamp(18px,4vw,32px)}

/* ---------- Kopfzeile: klebt und blendet ab, wie auf der Landing ---------- */
header.top{position:sticky;top:0;z-index:60;background:rgba(247,249,252,.84);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
header.top img{height:34px;width:auto;display:block}
header.top nav{display:flex;gap:22px;align-items:center}
header.top nav a.txt{color:#334155;text-decoration:none;font-size:15px;font-weight:600}
header.top nav a.txt:hover{color:var(--accent)}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:14px;background:var(--knopf-verlauf);color:#fff;text-decoration:none;
  border:1px solid transparent;box-shadow:var(--schatten-knopf);transition:transform .16s ease, box-shadow .16s ease}
.knopf:hover{transform:translateY(-1px);box-shadow:0 22px 46px -18px rgba(37,99,235,.45)}
.knopf.leise{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--schatten-leise)}
.knopf.leise:hover{box-shadow:0 12px 28px -14px rgba(15,23,42,.28)}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,7vw,92px) 0 clamp(28px,4vw,44px);text-align:left}
.hero .puenktchen{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(37,99,235,.09);border-radius:999px;padding:7px 15px;margin-bottom:18px}
h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 16px}
h1 .hervor{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:60ch;color:var(--muted);font-size:17.5px;margin:0 0 26px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hero .klein{font-size:13px;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,5vw,56px);align-items:center}

/* ---------- Abschnitte ---------- */
section{padding-top:clamp(84px,10vw,132px);padding-bottom:0}
section:last-of-type{padding-bottom:clamp(24px,3vw,40px)}
h2{font-size:clamp(1.75rem,3.8vw,2.8rem);letter-spacing:-.03em;font-weight:800;margin:0 0 16px;text-align:center;line-height:1.08}
h2 .hervor{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.unter{color:var(--muted);text-align:center;max-width:62ch;margin:0 auto clamp(40px,5vw,60px);font-size:17.5px;line-height:1.6}

/* ---------- Karten ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,2.4vw,28px)}
.karte{background:var(--surface);border:1px solid var(--border-fein);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--schatten)}
.karte .ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:rgba(37,99,235,.10);margin-bottom:16px}
.raster .karte:nth-child(3n+2) .ico{background:rgba(22,163,74,.12)}
.raster .karte:nth-child(3n) .ico{background:rgba(217,119,6,.12)}
.karte h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.karte p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.65}

/* Auf der Uebersichtsseite ist die ganze Karte ein Link. Ohne diese Regel
   waere der komplette Kartentext blau und unterstrichen. */
a.karte{display:block;text-decoration:none;color:inherit;transition:transform .16s ease, box-shadow .16s ease}
a.karte h3{color:var(--text)}
a.karte p{color:var(--muted)}
a.karte:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(15,23,42,.06),0 30px 70px rgba(15,23,42,.14)}
a.karte:hover h3{color:var(--accent)}
.karte a{color:var(--accent)}

/* ---------- Schritte ---------- */
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(22px,2.6vw,30px);margin-top:26px}
.schritt{background:var(--surface);border:1px solid var(--border-fein);border-radius:var(--radius);
  padding:28px 24px 24px;position:relative;box-shadow:var(--schatten-leise)}
.schritt::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:22px;
  width:32px;height:32px;border-radius:50%;background:var(--knopf-verlauf);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:14.5px;box-shadow:var(--schatten-knopf)}
.schritt h3{font-size:16.5px;font-weight:700;margin:10px 0 8px}
.schritt p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.65}

/* ---------- Vergleichstabelle ---------- */
.tabelle-scroll{overflow-x:auto}
table.vgl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border-fein);
  border-radius:var(--radius);overflow:hidden;font-size:14.5px;box-shadow:var(--schatten-leise)}
table.vgl th, table.vgl td{padding:17px 20px;border-bottom:1px solid var(--border-fein);text-align:left;vertical-align:top}
table.vgl th{background:var(--surface-2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
table.vgl tr:last-child td{border-bottom:0}
.ja{color:var(--gruen);font-weight:700}

/* ---------- FAQ ---------- */
details.faq{background:var(--surface);border:1px solid var(--border-fein);border-radius:14px;
  padding:19px 23px;margin-bottom:14px;box-shadow:var(--schatten-leise)}
details.faq summary{font-weight:700;cursor:pointer;font-size:16px;letter-spacing:-.01em;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:800;font-size:19px;line-height:1}
details.faq[open] summary::after{content:"\2212"}
details.faq p{color:var(--muted);font-size:15px;margin:12px 0 0;line-height:1.65}

/* ---------- Abschluss-Kasten ---------- */
/* Abschluss-Banner. Vorher ein weisses Rechteck mit blauem Knopf, das auf
   jeder Seite gleich beliebig aussah. Jetzt traegt es die Markenfarbe und
   das Firmenzeichen, damit die Seite mit unternio endet und nicht mit
   irgendeinem Kasten. */
.fuss-cta{position:relative;overflow:hidden;text-align:center;color:#fff;border:0;
  background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 52%,#0891B2 100%);
  border-radius:26px;padding:clamp(48px,6vw,76px) clamp(24px,4vw,48px);
  margin:clamp(72px,9vw,110px) 0 clamp(8px,1vw,16px);
  box-shadow:0 30px 70px -30px rgba(29,78,216,.65)}
/* Weicher Lichtschein oben rechts, wie im Landing-Hero. */
.fuss-cta::after{content:"";position:absolute;right:-140px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 68%);pointer-events:none}
.fuss-cta::before{content:"";display:block;width:44px;height:55px;margin:0 auto 22px;
  background:url('../brand/unternio-zeichen-weiss.svg') center/contain no-repeat;opacity:.95}
.fuss-cta > *{position:relative;z-index:1}
.fuss-cta h2{color:#fff;margin-bottom:14px}
.fuss-cta h2 .hervor{background:none;-webkit-background-clip:initial;background-clip:initial;color:#BFDBFE}
.fuss-cta .unter{color:rgba(255,255,255,.86);margin-bottom:0;max-width:56ch}
.fuss-cta .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* Der Knopf kehrt sich um: weiss auf blau statt blau auf weiss. */
.fuss-cta .knopf{background:#fff;color:#1D4ED8;border-color:#fff;box-shadow:0 16px 34px -16px rgba(2,6,23,.5);margin-top:28px}
.fuss-cta .knopf:hover{box-shadow:0 22px 44px -18px rgba(2,6,23,.6)}
.fuss-cta .knopf.leise{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}
.fuss-cta .knopf.leise:hover{background:rgba(255,255,255,.2)}

/* ---------- Produkt-Mockup im Hero ---------- */
.mock{border:1px solid var(--border-fein);border-radius:var(--radius-gross);overflow:hidden;
  box-shadow:0 4px 8px rgba(15,23,42,.06),0 40px 90px rgba(15,23,42,.16);background:var(--surface)}
.mock-leiste{display:flex;gap:6px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--border-fein);background:var(--surface-2)}
.mock-leiste i{width:10px;height:10px;border-radius:50%;background:#D6DEE9;display:block}
.mock-leiste span{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-left:9px;text-transform:uppercase}
.mock-body{padding:15px;display:flex;flex-direction:column;gap:9px;background:var(--bg)}
.mock-zeile{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-fein);
  border-radius:12px;padding:11px 13px;font-size:13.5px;box-shadow:var(--schatten-leise)}
.mock-zeile b{font-weight:700}
.mock-punkt{width:9px;height:9px;border-radius:50%;flex:none}
.p-gruen{background:var(--gruen)} .p-amber{background:#D97706} .p-rot{background:#DC2626}
.mock-chip{margin-left:auto;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;
  background:var(--surface-2);color:var(--muted);white-space:nowrap}
.mock-chip.rot{background:rgba(220,38,38,.1);color:#DC2626}
.mock-chip.blau{background:rgba(37,99,235,.1);color:var(--accent)}
.mock-chip.gruen{background:rgba(22,163,74,.12);color:var(--gruen)}

/* ---------- Fussbereich ---------- */
footer{border-top:1px solid var(--border);padding:34px 0 44px;color:var(--muted);font-size:13.5px;margin-top:clamp(48px,6vw,72px);background:var(--surface)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}

/* ---------- Eigenheiten der Terminbuchungs-Seite ---------- */
.band{background:var(--ruhig);padding:clamp(56px,7vw,88px) 0;margin-top:clamp(64px,8vw,104px)}
.band h2{margin-bottom:12px}
.funktionen-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.funktion{background:var(--surface);border:1px solid var(--border-fein);border-radius:var(--radius);padding:24px;box-shadow:var(--schatten-leise)}
.funktion .fico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:rgba(37,99,235,.10);margin-bottom:14px}
.funktion h3{font-size:16.5px;font-weight:700;margin:0 0 8px}
.funktion p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.65}
.faq-liste{max-width:820px;margin:0 auto}
.bildhinweis{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.fenster{border:1px solid var(--border-fein);border-radius:var(--radius-gross);overflow:hidden;
  box-shadow:0 4px 8px rgba(15,23,42,.06),0 40px 90px rgba(15,23,42,.16);background:var(--surface)}

/* ---------- Uebersichtsseite ---------- */
.plan{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:rgba(37,99,235,.09);border-radius:999px;padding:5px 12px;margin-bottom:10px}

/* ---------- Handy ---------- */
@media (max-width:880px){
  .hero{text-align:center;padding-top:clamp(40px,7vw,64px)}
  .hero-grid{grid-template-columns:1fr}
  .hero-grid .ctas{justify-content:center}
  .hero p{margin-left:auto;margin-right:auto}
  header.top nav{gap:12px}
  header.top nav a.txt{display:none}
  header.top img{height:30px}
}
@media (max-width:520px){
  .knopf{padding:12px 16px;font-size:14.5px}
  .fuss-cta{padding:34px 20px}
}