/* ============================================================
   Foresight — Gestaltung nach der CAIDAO-Markenspezifikation.

   Verbindliche Markenfarben:
     Navy          #244061   Hauptfarbe
     Signal-Orange #FF6601   Akzent
     Dunkelblau    #152740   Flächen mit weißer Schrift
     Hellblau      #A8C0E0   Flächen mit schwarzer Schrift

   Signal-Orange trägt auf Weiß nur 2,94:1 Kontrast — als Textfarbe ist
   das zu wenig. Es bleibt daher Flächen, Rahmen und Markierungen
   vorbehalten; für orangefarbenen Text steht --accent-ink bereit
   (4,91:1 auf Weiß, 8,08:1 auf dunklem Grund).

   Schrift: Lato, laut Spezifikation. Liegen die Schriftdateien unter
   public/fonts/, bindet die Anwendung sie selbst ein — bewusst nicht über
   die Google-Server, weil das die IP-Adressen der Besucher dorthin
   überträgt. Fehlen sie, greift die Ersatzkette; siehe
   public/fonts/LIESMICH.txt.
   ============================================================ */
:root{
  --ground:#F1F4F8; --surface:#FFFFFF; --surface-2:#E6EBF1; --surface-3:#DAE1EA;
  --line:#CFD8E2; --line-strong:#AAB8C8;
  --ink:#101A26; --ink-2:#46566A; --ink-3:#78889C;
  --navy:#244061; --navy-2:#152740; --on-navy:#F4F7FB; --navy-ink:#244061;
  --lightblue:#A8C0E0;
  --accent:#FF6601; --accent-ink:#BF4D00; --accent-soft:#FFF0E6; --accent-line:#FFC49B;
  --red:#A3231A; --red-soft:#F9E4E1; --red-line:#DFA79F;
  --green:#1F6A4E; --green-soft:#DCEDE4; --green-line:#A2C9B5;
  --focus:#2B6CB0;
  --mark:#FFD9B8; --mark-ink:#5A2600;
  --shadow:0 1px 2px rgba(21,39,64,.08), 0 2px 8px rgba(21,39,64,.06);
  --shadow-lg:0 2px 6px rgba(21,39,64,.09), 0 12px 32px rgba(21,39,64,.12);
  --f-disp:"Lato","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Lato","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1219; --surface:#141D28; --surface-2:#1D2836; --surface-3:#27364A;
    --line:#2A3849; --line-strong:#3E4F66;
    --ink:#E4EBF3; --ink-2:#A6B5C6; --ink-3:#78889C;
    --navy:#2B4C74; --navy-2:#3A6295; --on-navy:#EDF3FA; --navy-ink:#7FAEE0;
    --lightblue:#A8C0E0;
    --accent:#FF6601; --accent-ink:#FF8B42; --accent-soft:#2E1B0C; --accent-line:#6B3A14;
    --red:#E28A7E; --red-soft:#3A1E1A; --red-line:#6B3730;
    --green:#6CBB95; --green-soft:#173327; --green-line:#2C5544;
    --focus:#7FAEE0;
    --mark:#6B3A14; --mark-ink:#FFE2CB;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.3);
    --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"]{
  --ground:#0C1219; --surface:#141D28; --surface-2:#1D2836; --surface-3:#27364A;
  --line:#2A3849; --line-strong:#3E4F66;
  --ink:#E4EBF3; --ink-2:#A6B5C6; --ink-3:#78889C;
  --navy:#2B4C74; --navy-2:#3A6295; --on-navy:#EDF3FA; --navy-ink:#7FAEE0;
  --lightblue:#A8C0E0;
  --accent:#FF6601; --accent-ink:#FF8B42; --accent-soft:#2E1B0C; --accent-line:#6B3A14;
  --red:#E28A7E; --red-soft:#3A1E1A; --red-line:#6B3730;
  --green:#6CBB95; --green-soft:#173327; --green-line:#2C5544;
  --focus:#7FAEE0;
  --mark:#6B3A14; --mark-ink:#FFE2CB;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.3);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
:root{color-scheme:light dark}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-2)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
img{max-width:100%; height:auto}

/* ---------- Bausteine ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
  padding:9px 16px; font:inherit; font-size:14px; font-weight:500; color:var(--ink);
  text-decoration:none; transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.btn.primary:hover{background:var(--navy-2); border-color:var(--navy-2)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{padding:5px 11px; font-size:13px}
.btn.block{width:100%}
.btn.danger{color:var(--red); border-color:var(--red-line)}
.btn.danger:hover{background:var(--red-soft)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.eyebrow{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 10px;
}

/* ---------- Kopf- und Fußzeile ---------- */
.sitehead{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.sitehead .inner{display:flex; align-items:center; gap:18px; padding:12px 24px; max-width:1120px; margin:0 auto}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; margin-right:auto; min-width:0}
.logo img{height:30px; width:auto; display:block; flex:none}
.logo span{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; padding-left:12px; border-left:1px solid var(--line); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
@media (max-width:560px){.logo span{display:none}}

/* Die Wortmarke wird nie umgefärbt. Auf dunklem Grund steht sie deshalb
   auf einer eigenen weißen Fläche, statt invertiert zu werden. */
.markenfeld{display:inline-flex; align-items:center; padding:7px 11px; border-radius:6px; background:#FFFFFF}
.markenfeld img{height:52px; width:auto; display:block}
.sitenav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.sitenav a.link{
  color:var(--ink-2); text-decoration:none; font-size:14px; padding:7px 10px; border-radius:5px;
}
.sitenav a.link:hover{background:var(--surface-2); color:var(--ink)}

.sitefoot{
  border-top:1px solid var(--line); background:var(--surface); margin-top:72px;
  padding:32px 0; font-size:13.5px; color:var(--ink-3);
}
.sitefoot .cols{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
.sitefoot a{color:var(--ink-2); text-decoration:none}
.sitefoot a:hover{text-decoration:underline}
.sitefoot ul{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px}

/* ---------- Landing ---------- */
.hero{padding:72px 0 56px}
.hero h1{
  font-family:var(--f-disp); font-size:clamp(38px, 5.4vw, 60px); line-height:1.06;
  font-weight:300; margin:0 0 18px; letter-spacing:-.005em; max-width:19ch; text-wrap:balance;
}
.hero p.lead{font-size:18px; color:var(--ink-2); max-width:62ch; margin:0 0 26px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero .fineprint{font-size:13px; color:var(--ink-3); margin-top:14px}

.screenshot{
  margin-top:44px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--surface);
}
.screenshot .bar{
  display:flex; align-items:center; gap:7px; padding:9px 13px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.screenshot .bar i{width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block}
.screenshot .bar span{margin-left:8px; font-size:11.5px; color:var(--ink-3); font-family:var(--f-mono)}

section.band{padding:64px 0; border-top:1px solid var(--line)}
section.band h2{
  font-family:var(--f-disp); font-size:clamp(28px, 3.4vw, 38px); font-weight:300;
  margin:0 0 12px; letter-spacing:-.005em; text-wrap:balance;
}
section.band p.sub{font-size:16px; color:var(--ink-2); max-width:64ch; margin:0 0 34px}

.grid3{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:22px; box-shadow:var(--shadow);
}
.card h3{font-size:16.5px; margin:0 0 8px; font-weight:600}
.card p{margin:0; color:var(--ink-2); font-size:14px}
.card .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:7px; background:var(--surface-2);
  margin-bottom:13px; font-size:17px;
}

.two{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:24px}
.audience{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px;
  border-top:3px solid var(--navy);
}
.audience.br{border-top-color:var(--accent)}
.audience h3{font-family:var(--f-disp); font-size:23px; margin:0 0 4px; font-weight:700}
.audience .who{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:14px}
.audience ul{margin:0; padding-left:19px; color:var(--ink-2); font-size:14.5px}
.audience li{margin-bottom:7px}

/* ---------- Preise ---------- */
.prices{display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr)); gap:18px; align-items:start}
.price{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.price.featured{border-color:var(--navy); box-shadow:var(--shadow-lg); position:relative}
.price.featured::after{
  content:"empfohlen"; position:absolute; top:-11px; left:24px;
  background:var(--navy); color:var(--on-navy); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; padding:3px 10px; border-radius:999px;
}
.price h3{font-family:var(--f-disp); font-size:24px; margin:0; font-weight:700}
.price .amount{font-family:var(--f-mono); font-size:32px; font-weight:500; line-height:1.1}
.price .amount small{font-size:13px; color:var(--ink-3); font-family:var(--f-body); font-weight:400}
.price ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-2)}
.price li{padding-left:22px; position:relative}
.price li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}
.price li.no{color:var(--ink-3)}
.price li.no::before{content:"–"; color:var(--ink-3)}

.notice{
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:7px;
  padding:13px 16px; font-size:13.5px; color:var(--ink); margin-bottom:26px;
}
.notice b{font-weight:600}

/* ---------- Formulare ---------- */
.authpage{
  min-height:calc(100vh - 62px); display:flex; align-items:flex-start;
  justify-content:center; padding:56px 24px 80px;
}
.authcard{
  width:100%; max-width:456px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:32px; box-shadow:var(--shadow-lg);
}
.authcard h1{font-family:var(--f-disp); font-size:30px; margin:0 0 6px; font-weight:300}
.authcard .sub{color:var(--ink-2); font-size:14.5px; margin:0 0 24px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.field input, .field select{
  width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
  padding:10px 12px; font:inherit; font-size:15px; color:var(--ink);
}
.field input:focus, .field select:focus{border-color:var(--focus); outline:2px solid var(--focus); outline-offset:-1px}
.field .help{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.formerror{
  background:var(--red-soft); border:1px solid var(--red-line); color:var(--red);
  border-radius:6px; padding:11px 14px; font-size:14px; margin-bottom:20px; font-weight:500;
}
.formok{
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green);
  border-radius:6px; padding:11px 14px; font-size:14px; margin-bottom:20px; font-weight:500;
}
.authfoot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.checkline{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin-bottom:18px}
.checkline input{margin-top:3px; accent-color:var(--navy); width:16px; height:16px; flex:none}

/* ---------- Einstellungen ---------- */
.page{padding:40px 0 80px}
.page h1{font-family:var(--f-disp); font-size:34px; margin:0 0 6px; font-weight:300}
.page h2{font-family:var(--f-disp); font-size:23px; margin:36px 0 12px; font-weight:700}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:22px; margin-bottom:20px; box-shadow:var(--shadow);
}
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th{
  text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:0 10px 9px; border-bottom:1px solid var(--line);
}
table.data td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
.tag{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 8px; border-radius:4px; background:var(--surface-2); color:var(--ink-2);
}
.tag.owner{background:var(--navy); color:var(--on-navy)}
.tag.editor{background:var(--accent-soft); color:var(--accent-ink)}
.tag.viewer{background:var(--surface-3); color:var(--ink-2)}
.copyrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.copyrow input{
  flex:1; min-width:260px; font-family:var(--f-mono); font-size:12.5px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:9px 11px; color:var(--ink);
}

/* ---------- Rechtstexte ---------- */
.legal{max-width:76ch; padding:40px 0 80px}
.legal h1{font-family:var(--f-disp); font-size:34px; margin:0 0 8px; font-weight:300}
.legal h2{font-size:17px; margin:30px 0 8px; font-weight:600}
.legal p, .legal li{color:var(--ink-2); font-size:15px}
.legal .todo{
  background:var(--accent-soft); border-left:3px solid var(--accent); padding:11px 15px;
  border-radius:0 5px 5px 0; font-size:14px; color:var(--ink); margin:10px 0;
}