/* ============================================================
   DALYRO – Homepage

   Farben und Grundskala sind aus app/globals.css uebernommen, damit
   Website und Anwendung dieselbe Marke tragen.

   Die Anwendung kennt Schriftgroessen bis 30px (Kennzahl). Eine
   Startseite braucht darueber hinaus eine Anzeigenskala; sie ist
   bewusst gesetzt und endet hier:
       34px  Abschnittstitel klein     44px  Abschnittstitel
       56px  Aufmacher
   Andere Groessen kommen aus der Skala der Anwendung:
       11 Versal · 12 Meta · 13 Sekundaer · 14 Fliesstext
       16 Kartentitel · 21 Statusband · 26 Seitentitel · 30 Kennzahl

   Es gibt kein !important. Medienabfragen erhoehen die Spezifitaet
   nicht – Ueberschreibungen unten benutzen darum dieselbe
   Selektorform wie die Grundregel.

   Schrift: dieselbe Kette wie in der Anwendung, ohne Geist. Es wird
   bewusst keine Schrift von einem fremden Server geladen; ein
   Aufruf bei Google Fonts wuerde die IP-Adresse jedes Besuchers
   ohne Einwilligung an einen Drittstaat uebertragen.
   ============================================================ */

:root{
  --navy:#0F2942;
  --navy-hi:#16354F;
  --ink:#16293D;
  --muted:#5A7288;
  --faint:#8397AA;
  --line:#DCE4EC;
  --line-soft:#E9EFF4;
  --canvas:#F4F7FA;
  --surface:#FFFFFF;
  --brand:#1F6FB2;
  --brand-dark:#1A6099;
  --brand-soft:#E9F2F9;
  --brand-line:#C9E0F1;
  --warn:#A66611;   --warn-bg:#FFF3E0;  --warn-line:#EFDCBB;
  --crit:#A8403A;   --crit-bg:#FCECEB;  --crit-line:#EFD0CE;
  --ok:#1F6B48;     --ok-bg:#E7F4ED;    --ok-line:#C9E5D6;
  --shadow-sm:0 1px 2px rgba(16,41,66,.05);
  --shadow-md:0 6px 18px rgba(16,41,66,.09);
  --shadow-lg:0 20px 52px rgba(16,41,66,.20);
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px;
  --seite:1180px;
  --rand:max(24px,calc((100vw - var(--seite)) / 2));
  /* Verkleinerung des Anwendungsnachbaus, je Breite gesetzt. */
  --massstab:.53;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  padding:12px 18px;background:var(--navy);color:#fff;
  font-size:13px;font-weight:640;text-decoration:none;
}
.skip:focus{left:0}

.icon{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.eyebrow{
  margin:0 0 10px;color:var(--brand);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
}

/* ---------- Schaltflaechen ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;
  border:1px solid var(--brand);border-radius:var(--r-md);
  background:var(--brand);color:#fff;
  box-shadow:0 4px 12px rgba(31,111,178,.22);
  font-size:14px;font-weight:640;text-decoration:none;white-space:nowrap;
}
.button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.button-small{min-height:38px;padding:0 15px;font-size:13px}
.text-link{
  color:var(--brand);font-size:13px;font-weight:640;text-decoration:none;
  white-space:nowrap;
}
.text-link:hover{text-decoration:underline}
.text-link.arrow{font-size:14px}
.text-link.arrow span{margin-left:6px}

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:36px;
  height:72px;padding:0 var(--rand);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(12px);
}
/* Das Logo liegt mit grosszuegigem weissem Rand vor: Der Bildinhalt
   beginnt bei 12,33 % der Breite und 32,28 % der Hoehe und ist 78,17 %
   breit und 35,44 % hoch. Diese Werte sind am Bild gemessen, nicht
   geschaetzt – und sie stehen als Faktoren hier, damit sich die Groesse
   ueber --logo-breite aendern laesst, ohne neu zu rechnen.

   Ein Ausschnittfenster zeigt genau den Bildinhalt. Die Datei selbst
   bleibt unveraendert, damit Anwendung und Website dasselbe Logo
   benutzen. */
.brand{
  --logo-breite:150px;
  /* Bildbreite so, dass der Inhalt exakt --logo-breite fuellt. */
  --logo-datei:calc(var(--logo-breite) / .7817);
  display:block;flex:0 0 auto;overflow:hidden;
  width:var(--logo-breite);
  /* Hoehe des Inhalts im Verhaeltnis zu seiner Breite: 101 / 469. */
  height:calc(var(--logo-breite) * .2154);
}
.brand img{
  /* Ohne max-width:none deckelt die Grundregel img{max-width:100%} das
     Bild auf die Kastenbreite – der Ausschnitt verrutscht und das Logo
     wird angeschnitten. */
  display:block;width:var(--logo-datei);max-width:none;height:auto;
  margin-left:calc(var(--logo-datei) * -.1233);
  /* Die Bildhoehe ist 285/600 = .475 der Bildbreite. */
  margin-top:calc(var(--logo-datei) * .475 * -.3228);
}
.site-header nav{display:flex;gap:26px;margin-left:auto}
.site-header nav a{color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.site-header nav a:hover{color:var(--brand)}
.header-actions{display:flex;align-items:center;gap:20px}
.menu{
  display:none;margin-left:auto;padding:8px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.menu .icon{width:20px;height:20px}

/* ---------- Aufmacher ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;gap:56px;
  padding:76px var(--rand) 88px;
  background:
    radial-gradient(circle at 88% 12%,var(--brand-soft) 0,transparent 34%),
    linear-gradient(180deg,var(--surface),var(--canvas));
}
.hero h1{
  margin:0;color:var(--navy);
  font-size:clamp(34px,4vw,56px);line-height:1.06;
  letter-spacing:-.03em;font-weight:700;text-wrap:balance;
}
.hero h1 span{color:var(--brand)}
.lead{max-width:560px;margin:22px 0 0;color:var(--muted);font-size:16px;line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.trust-row{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin:34px 0 0;padding:0;list-style:none;
  color:var(--muted);font-size:12px;
}
.trust-row li{display:flex;align-items:center;gap:7px}
.trust-row li::before{
  content:"";width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  background:var(--ok-bg);
  box-shadow:inset 0 0 0 1px var(--ok-line);
}

/* ---------- Nachbau der Anwendung ----------
   Der Nachbau wird in Originalgroesse aufgebaut und als Ganzes
   verkleinert. Dadurch stimmen die Groessenverhaeltnisse mit der
   echten Anwendung ueberein, statt dass einzelne Texte auf 6px
   zusammenfallen. --massstab steuert die Verkleinerung. */
.stage{
  position:relative;width:100%;margin-inline:auto;
  height:calc(700px * var(--massstab));
  overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.stage-scale{
  position:absolute;left:0;top:0;
  width:1180px;height:700px;
  transform:scale(var(--massstab));
  transform-origin:top left;
}
.app{
  display:grid;grid-template-columns:248px 1fr;
  width:1180px;height:700px;overflow:hidden;
  border:1px solid var(--line);border-radius:calc(var(--r-xl) / var(--massstab));
  background:var(--surface);
}
.app-side{
  display:flex;flex-direction:column;gap:22px;
  padding:22px 14px 16px;background:var(--navy);color:#DCE7F1;
}
.app-side .plate{display:block;background:#fff;border-radius:var(--r-md);padding:11px 14px}
.app-side .plate img{display:block;width:100%;height:auto}
.app-side-claim{color:#7E9DBA;font-size:11px;font-weight:600;letter-spacing:.03em;text-align:center}
.app-side nav{display:flex;flex-direction:column;gap:2px}
.app-side nav b{
  padding:10px 11px;border-radius:9px;
  color:#B9CDDF;font-size:14px;font-weight:500;
}
.app-side nav b.active{background:rgba(255,255,255,.11);color:#fff;font-weight:640}
.app-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.app-company{
  display:block;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);
  font-size:12px;font-weight:700;letter-spacing:.04em;
}
.app-user{display:flex;align-items:center;gap:10px;padding-top:13px;border-top:1px solid rgba(255,255,255,.11)}
.app-user i{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:50%;background:rgba(255,255,255,.12);
  font-size:12px;font-style:normal;font-weight:700;color:#fff;
}
.app-user em{display:flex;flex-direction:column;font-style:normal;font-size:13px;font-weight:640;color:#fff}
.app-user small{color:#7E9DBA;font-size:11px;font-weight:500}

.app-main{display:flex;flex-direction:column;min-width:0;background:var(--canvas)}
.app-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;border-bottom:1px solid var(--line);background:var(--surface);
}
.app-top span{display:flex;flex-direction:column;gap:2px}
.app-top b{color:var(--ink);font-size:21px;font-weight:640;letter-spacing:-.01em}
.app-top small{color:var(--muted);font-size:13px}
.app-top i{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-style:normal;font-weight:700;
}
.app-body{padding:26px;display:flex;flex-direction:column;gap:18px}
.app-hello{
  position:relative;display:flex;flex-direction:column;gap:5px;
  padding:22px 26px;border-radius:var(--r-lg);
  background:linear-gradient(110deg,var(--navy),#205B86);color:#fff;
}
.app-hello small{color:#84C8F0;font-size:11px;font-weight:700;letter-spacing:.09em}
.app-hello strong{font-size:21px;font-weight:640;letter-spacing:-.01em}
.app-hello span{color:#B8CFE3;font-size:13px}
.app-hello em{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  padding:11px 16px;border-radius:var(--r-md);
  background:#fff;color:var(--navy);
  font-size:13px;font-style:normal;font-weight:640;
}
.app-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.app-kpis article{
  display:flex;flex-direction:column;gap:2px;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.app-kpis small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.07em}
.app-kpis b{font-size:30px;font-weight:660;line-height:1.1}
.app-kpis span{color:var(--muted);font-size:12px}
.app-kpis .is-warn span{color:var(--crit)}
.app-cols{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.app-card{
  overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.app-card header{display:flex;flex-direction:column;gap:2px;padding:16px 18px 12px}
.app-card-split{border-top:1px solid var(--line-soft);margin-top:4px}
.app-card b{color:var(--ink);font-size:16px;font-weight:620}
.app-card header small{color:var(--muted);font-size:13px}
.app-shift{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:13px 18px;border-top:1px solid var(--line-soft);
}
.app-shift time{
  display:flex;flex-direction:column;align-items:center;padding:7px 0;
  border-radius:var(--r-sm);background:var(--canvas);
  color:var(--ink);font-size:13px;font-weight:700;
}
.app-shift time small{color:var(--muted);font-size:11px;font-weight:600}
.app-shift>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.app-shift>span b{font-size:14px;font-weight:640}
.app-shift>span small{color:var(--muted);font-size:12px}
.app-resp{align-items:flex-end;text-align:right}
.app-resp small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.07em}
.app-resp b{font-size:13px;font-weight:640}
.app-todo{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-top:1px solid var(--line-soft);
}
.app-todo i{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-style:normal;font-weight:700;
}
.app-todo i.is-warn{background:var(--warn-bg);color:var(--warn)}
.app-todo span{display:flex;flex-direction:column;gap:1px;min-width:0}
.app-todo b{font-size:13px;font-weight:640}
.app-todo small{color:var(--muted);font-size:12px}
.app-todo mark{
  margin-left:auto;padding:3px 10px;border-radius:20px;
  border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);
  font-size:11px;font-weight:640;
}

/* ---------- Branchenleiste ---------- */
.branchen{
  padding:26px var(--rand);text-align:center;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.branchen p{
  margin:0 0 16px;color:var(--faint);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.branchen div{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px;
  color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.07em;
}

/* ---------- Abschnitte ---------- */
.section{padding:96px var(--rand)}
.section-canvas{background:var(--canvas)}
.section-head{max-width:720px;margin:0 auto 52px;text-align:center}
.section-head.left{margin-left:0;margin-right:0;text-align:left}
.section h2,.kontakt h2{
  margin:0;color:var(--navy);
  font-size:clamp(26px,3vw,44px);line-height:1.12;
  letter-spacing:-.025em;font-weight:700;text-wrap:balance;
}
.section-head>p:last-child{margin:18px 0 0;color:var(--muted);font-size:16px;line-height:1.7}

/* ---------- Ablauf ---------- */
.ablauf{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin:0;padding:0;list-style:none;counter-reset:none;
}
.ablauf li{
  display:flex;flex-direction:column;
  padding:26px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);
}
.ablauf i{
  display:block;margin-bottom:36px;
  color:var(--brand);font-size:12px;font-style:normal;font-weight:700;letter-spacing:.09em;
}
.ablauf b{display:block;margin-bottom:9px;color:var(--navy);font-size:16px;font-weight:640}
.ablauf p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

/* ---------- Funktionen ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.features article{
  padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);
}
.features .featured{grid-row:span 2;display:flex;flex-direction:column}
.feature-icon{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:26px;
  border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand);
}
.feature-icon .icon{width:20px;height:20px}
.features h3{margin:0 0 10px;color:var(--navy);font-size:16px;font-weight:640}
.features p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.kalender{
  margin-top:auto;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.kalender header{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 13px;background:var(--canvas);
}
.kalender header b{font-size:13px;font-weight:640}
.kalender header span{color:var(--muted);font-size:12px}
/* minmax(0,1fr) statt 1fr: Sonst ist die Untergrenze jeder Spalte ihr
   Inhalt, und die Wochentage drueckten das ganze Raster auf schmalen
   Geraeten breiter als den Bildschirm. */
.kalender>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.kalender i{
  min-height:104px;padding:9px 7px;
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  color:var(--muted);font-size:11px;font-style:normal;font-weight:700;
}
.kalender i:last-child{border-right:0}
.kalender mark{
  display:block;margin-top:11px;padding:6px;border-radius:6px;
  border-left:2px solid var(--brand);
  background:var(--brand-soft);color:var(--brand);
  font-size:11px;font-weight:640;line-height:1.3;
  /* Lange Bezeichnungen trennen, statt die Spalte aufzudehnen. */
  hyphens:auto;overflow-wrap:break-word;
}
.kalender mark.alt{
  border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn);
}

/* ---------- Rollen ---------- */
.rollen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rollen article{
  padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--canvas);
}
.rollen article>span{
  display:inline-grid;place-items:center;width:36px;height:36px;margin-bottom:24px;
  border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-weight:700;
}
.rollen h3{margin:0 0 8px;color:var(--navy);font-size:16px;font-weight:640}
.rollen p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.65}
.rollen ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.rollen li{
  display:flex;gap:9px;color:var(--ink);font-size:13px;line-height:1.5;
}
.rollen li::before{content:"";
  width:6px;height:6px;flex:0 0 auto;margin-top:7px;
  border-radius:50%;background:var(--brand);
}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.leistungen article{
  display:flex;flex-direction:column;
  padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--canvas);
}
.leistungen h3{margin:0 0 10px;color:var(--navy);font-size:16px;font-weight:640}
.leistungen>article>p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.65}
.leistungen ul{display:grid;gap:9px;margin:auto 0 0;padding:0;list-style:none}
.leistungen li{display:flex;gap:9px;color:var(--ink);font-size:13px;line-height:1.5}
.leistungen li::before{content:"";
  width:6px;height:6px;flex:0 0 auto;margin-top:7px;
  border-radius:50%;background:var(--brand);
}
.leistungen-fuss{
  max-width:660px;margin:34px auto 0;text-align:center;
  color:var(--muted);font-size:14px;line-height:1.7;
}
.leistungen-fuss a{color:var(--brand);font-weight:640}

/* ---------- Sicherheit ---------- */
.sicherheit{background:var(--navy);color:#DCE7F1}
.sicherheit .eyebrow{color:#7FB8E4}
.sicherheit h2{color:#fff}
.sicherheit .section-head>p:last-child{color:#B8CFE3}
.sicherheit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sicherheit-grid article{
  padding:28px;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-xl);
  background:rgba(255,255,255,.05);
}
.sicherheit-grid b{display:block;margin-bottom:10px;color:#fff;font-size:16px;font-weight:640}
.sicherheit-grid p{margin:0;color:#B8CFE3;font-size:13px;line-height:1.7}
.sicherheit-fuss{
  max-width:720px;margin:34px auto 0;text-align:center;
  color:#8FB0CB;font-size:13px;
}

/* ---------- Zielgruppen ---------- */
.zielgruppen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zielgruppen article{
  padding:24px;border-top:3px solid var(--brand);
  background:var(--surface);border-radius:0 0 var(--r-md) var(--r-md);
}
.zielgruppen b{display:block;margin-bottom:7px;color:var(--navy);font-size:14px;font-weight:640}
.zielgruppen p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* ---------- Demo ---------- */
.demo-card{
  display:grid;grid-template-columns:1.1fr 1fr auto;gap:40px;align-items:center;
  padding:34px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--canvas);
}
.demo-card span{color:var(--brand);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.demo-card h3{margin:8px 0 10px;color:var(--navy);font-size:21px;font-weight:640;letter-spacing:-.01em}
.demo-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.demo-card ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.demo-card li{display:flex;gap:9px;color:var(--ink);font-size:13px}
.demo-card li::before{content:"";
  width:6px;height:6px;flex:0 0 auto;margin-top:7px;
  border-radius:50%;background:var(--brand);
}

/* ---------- Kontakt ---------- */
.kontakt{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;
  padding:96px var(--rand);background:var(--canvas);
}
.kontakt>div>p:not(.eyebrow){max-width:440px;margin:20px 0 0;color:var(--muted);font-size:15px;line-height:1.7}
.kontakt-mail{
  display:inline-block;margin-top:20px;
  color:var(--brand);font-size:16px;font-weight:640;
}
.kontakt form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;
  padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--shadow-md);
}
.kontakt label{
  display:flex;flex-direction:column;gap:7px;
  color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.kontakt input,.kontakt select,.kontakt textarea{
  width:100%;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:400;
  letter-spacing:normal;text-transform:none;
}
.kontakt textarea{resize:vertical;min-height:96px}
.kontakt input:focus,.kontakt select:focus,.kontakt textarea:focus{border-color:var(--brand)}
.wide{grid-column:1 / -1}
.kontakt form small{color:var(--muted);font-size:12px;line-height:1.6}
.kontakt form small a{color:var(--brand)}
.form-error{
  margin:0;padding:11px 13px;
  border:1px solid var(--crit-line);border-radius:var(--r-sm);
  background:var(--crit-bg);color:var(--crit);font-size:13px;
}

/* ---------- Fusszeile ---------- */
footer{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  padding:38px var(--rand);background:var(--surface);
}
footer p{margin:0;color:var(--muted);font-size:12px}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer nav a{color:var(--muted);font-size:12px;text-decoration:none}
footer nav a:hover{color:var(--brand)}
footer>small{
  grid-column:1 / -1;padding-top:20px;
  border-top:1px solid var(--line-soft);color:var(--faint);font-size:12px;
}

/* ---------- Rechtstexte ---------- */
.legal{width:min(720px,calc(100% - 40px));margin:64px auto;padding-bottom:88px}
.legal .back{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:40px;
  color:var(--brand);font-size:13px;font-weight:640;text-decoration:none;
}
.legal .back:hover{text-decoration:underline}
.legal h1{margin:0 0 8px;color:var(--navy);font-size:34px;line-height:1.15;letter-spacing:-.025em;font-weight:700}
.legal h2{margin:38px 0 10px;color:var(--navy);font-size:16px;font-weight:640}
.legal h3{margin:24px 0 8px;color:var(--ink);font-size:14px;font-weight:640}
.legal p,.legal li{color:var(--muted);font-size:14px;line-height:1.75}
.legal ul{padding-left:20px}
.legal a{color:var(--brand)}
.legal table{width:100%;border-collapse:collapse;margin:14px 0}
.legal th,.legal td{
  padding:9px 11px;border:1px solid var(--line);
  text-align:left;vertical-align:top;font-size:13px;
}
.legal th{background:var(--canvas);color:var(--ink);font-weight:640}
.legal td{color:var(--muted)}
.luecke{
  margin:22px 0;padding:18px 20px;
  border:1px solid var(--warn-line);border-radius:var(--r-md);
  background:var(--warn-bg);
}
.luecke b{display:block;margin-bottom:6px;color:var(--warn);font-size:14px}
.luecke p{margin:0;color:var(--warn);font-size:13px}
/* Offene Pflichtangabe. Bewusst auffaellig, damit sie beim
   Korrekturlesen nicht uebersehen wird. */
.offen{
  padding:1px 6px;border-radius:4px;
  border:1px dashed var(--warn-line);background:var(--warn-bg);
  color:var(--warn);font-size:13px;font-weight:640;
}

/* ============================================================
   Breiten. Die Selektorform entspricht der Grundregel, sonst
   greift die Ueberschreibung nicht (Medienabfragen erhoehen die
   Spezifitaet nicht).
   ============================================================ */

@media (max-width:1240px){
  /* Schmalster Punkt hier: 1050px -> Buehne 531px -> 0.450 */
  :root{--massstab:.44}
}

@media (max-width:1049px){
  /* Schmalster Punkt hier: 761px -> Buehne 713px -> 0.604 */
  :root{--massstab:.60}
  /* Fuenf Punkte plus Anmelden und Schaltflaeche passen hier nur mit
     engeren Abstaenden in die Kopfzeile. */
  .site-header{gap:18px}
  .site-header nav{gap:14px}
  .hero{grid-template-columns:1fr;gap:48px;padding:64px var(--rand) 72px}
  .lead{max-width:640px}
  .stage{max-width:850px}
  .ablauf{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .features .featured{grid-row:span 2}
  .leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rollen{grid-template-columns:1fr}
  .zielgruppen{grid-template-columns:repeat(2,1fr)}
  .demo-card{grid-template-columns:1fr 1fr;gap:28px}
  .demo-card .button{grid-column:1 / -1}
  .kontakt{grid-template-columns:1fr;gap:36px}
}

/* Der Massstab in den Medienabfragen greift nur ohne JavaScript - sonst
   misst script.js den genauen Wert. Als Rueckfall muss er darum am
   *schmalsten* Punkt des jeweiligen Bereichs noch passen, nicht am
   breitesten, sonst steht der Nachbau dort rechts ueber. Die Werte sind
   am Geraet gemessen, nicht geschaetzt: Buehnenbreite / 1180, abgerundet.
   Ab 1241px waechst die Buehne nicht weiter, dort gilt der Grundwert. */

@media (max-width:760px){
  /* Schmalster Punkt hier: 521px -> Buehne 485px -> 0.411 */
  :root{--rand:18px;--massstab:.40}
  .site-header{height:64px;gap:0}
  .brand{--logo-breite:124px}
  .site-header nav{
    display:none;position:absolute;left:18px;right:18px;top:60px;
    flex-direction:column;gap:0;margin-left:0;padding:8px;
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--surface);box-shadow:var(--shadow-md);
  }
  .site-header nav.open{display:flex}
  .site-header nav a{padding:12px;font-size:14px}
  .header-actions{margin-left:auto;gap:12px}
  .header-actions .text-link{display:none}
  .menu{display:block;margin-left:12px}
  .hero{padding:48px var(--rand) 64px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:14px}
  /* Beruehrungsflaechen: Auf dem Handy sind Textlinks sonst nur so hoch
     wie ihre Zeile. iOS setzt 44px als Richtwert an. */
  .hero-actions .text-link{padding:12px 0;text-align:center}
  .trust-row{flex-direction:column;gap:9px}
  .section{padding:64px var(--rand)}
  .section-head{margin-bottom:36px}
  .ablauf{grid-template-columns:1fr}
  .ablauf i{margin-bottom:18px}
  .features{grid-template-columns:minmax(0,1fr)}
  .features .featured{grid-row:auto}
  .leistungen{grid-template-columns:minmax(0,1fr)}
  .sicherheit-grid{grid-template-columns:1fr}
  .zielgruppen{grid-template-columns:1fr}
  .demo-card{grid-template-columns:1fr;gap:24px;padding:24px}
  .kontakt{padding:64px var(--rand)}
  .kontakt form{grid-template-columns:1fr;padding:20px}
  footer{grid-template-columns:1fr;justify-items:center;gap:18px;text-align:center}
  footer nav{justify-content:center;gap:8px 16px}
  footer nav a{padding:11px 8px}
  footer>small{grid-column:1}
  .legal h1{font-size:26px}
}

@media (max-width:520px){
  /* Schmalster Punkt hier: 320px -> Buehne 284px -> 0.241 */
  :root{--massstab:.24}
}