/* ============================================================
   SECULATOR Portal – Startseite

   Gestaltungsgedanke: Die Zielgruppe sind Geschäftsführer von
   Wach- und Sicherheitsdiensten. Was sie interessiert, sind Zahlen –
   also zeigt die Seite gleich oben eine echte Kalkulation statt eines
   Werbeversprechens. Die Zahl ist der Held, alles andere bleibt ruhig.

   Farben nach dem Corporate Design: Navy als Grundfläche,
   Blau als einziger Akzent.
   ============================================================ */

:root{
  --p-navy:#0F2C41;
  --p-navy-hell:#1B3F58;
  --p-blau:#4888F4;
  --p-blau-tief:#2E6BD0;
  --p-blau-zart:#EAF1FE;
  --p-grau:#45494C;
  --p-linie:#DCE3EA;
  --p-papier:#F4F6F9;
  --p-kopf:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --p-text:"Lato",system-ui,-apple-system,sans-serif;
  --p-zahl:"IBM Plex Mono","Courier New",monospace;
}

body.portal-start{
  margin:0;background:#fff;color:var(--p-navy);
  font-family:var(--p-text);font-size:16px;line-height:1.65;
  padding-bottom:0;
}
.portal-start *{box-sizing:border-box}
.p-innen{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- Kopfleiste ---------- */
.p-kopf{
  background:var(--p-navy);color:#fff;
  padding:16px 0;
}
.p-kopf .p-innen{display:flex;align-items:center;gap:20px}
.p-marke{
  font-family:var(--p-kopf);font-weight:700;font-size:21px;
  letter-spacing:-.02em;color:#fff;text-decoration:none;
}
.p-marke span{color:var(--p-blau)}
.p-kopf nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.p-kopf nav a{color:#A8BACA;text-decoration:none;font-size:14px}
.p-kopf nav a:hover{color:#fff}
.p-kopf nav a.p-knopf{
  background:var(--p-blau);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;
  font-family:var(--p-kopf);
}
.p-kopf nav a.p-knopf:hover{background:var(--p-blau-tief);color:#fff}

/* ---------- Aufmacher ---------- */
.p-oben{background:var(--p-navy);color:#fff;padding:56px 0 72px}
.p-oben .p-innen{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.p-oben h1{
  font-family:var(--p-kopf);font-weight:700;
  font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.025em;
  margin:0 0 18px;color:#fff;
}
.p-oben p{font-size:17px;line-height:1.7;color:#C7D4E0;margin:0 0 12px;max-width:46ch}
.p-oben .p-klein{font-size:14px;color:#8FA3B5}
.p-oben .p-aktion{margin-top:26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.p-gross-knopf{
  background:var(--p-blau);color:#fff;text-decoration:none;
  font-family:var(--p-kopf);font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:9px;display:inline-block;
}
.p-gross-knopf:hover{background:var(--p-blau-tief);color:#fff}
.p-oben .p-aktion span{font-size:14px;color:#8FA3B5}

/* ---------- Die Rechnung als Held ---------- */
.p-rechnung{
  background:#fff;border-radius:14px;padding:24px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.p-rechnung-kopf{
  font-size:12.5px;color:var(--p-grau);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--p-linie);
}
.p-rechnung table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.p-rechnung td{padding:6px 0;font-size:14px;color:var(--p-navy)}
.p-rechnung td:last-child{text-align:right;font-family:var(--p-zahl);white-space:nowrap}
.p-rechnung tr.p-teil td{color:var(--p-grau);font-size:13px}
.p-rechnung tr.p-summe td{
  border-top:1px solid var(--p-navy);padding-top:11px;margin-top:6px;
  font-weight:700;font-size:16px;
}
.p-rechnung tr.p-summe td:last-child{font-size:20px;color:var(--p-blau-tief)}
.p-rechnung-fuss{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--p-linie);
  font-size:12.5px;color:var(--p-grau);line-height:1.55;
}

/* ---------- Der Unterschied, den keiner sieht ---------- */
.p-vergleich{background:var(--p-papier);padding:64px 0}
.p-vergleich h2,
.p-pakete h2,
.p-antrag h2{
  font-family:var(--p-kopf);font-weight:700;font-size:27px;
  letter-spacing:-.02em;margin:0 0 12px;
}
.p-vergleich>.p-innen>p{font-size:16px;color:var(--p-grau);max-width:62ch;margin:0 0 30px}
.p-tabelle{
  width:100%;border-collapse:collapse;background:#fff;
  border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums;
}
.p-tabelle th{
  background:var(--p-navy);color:#fff;text-align:left;
  padding:13px 18px;font-size:13px;font-weight:400;
}
.p-tabelle th:not(:first-child){text-align:right}
.p-tabelle td{padding:12px 18px;border-top:1px solid var(--p-linie);font-size:15px}
.p-tabelle td:not(:first-child){text-align:right;font-family:var(--p-zahl)}
.p-tabelle tr:last-child td{font-weight:700}
.p-tabelle .p-diff{color:var(--p-blau-tief)}
.p-vergleich .p-nachsatz{margin-top:22px;font-size:15px;color:var(--p-grau);max-width:62ch}

/* ---------- Was es kann ---------- */
.p-kann{padding:64px 0}
.p-kann-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:8px}
.p-kann-liste h3{
  font-family:var(--p-kopf);font-weight:700;font-size:17px;
  margin:0 0 8px;letter-spacing:-.01em;
}
.p-kann-liste p{font-size:15px;color:var(--p-grau);margin:0;line-height:1.65}
.p-kann-liste>div{border-left:2px solid var(--p-blau);padding-left:18px}

/* ---------- Pakete ---------- */
.p-pakete{background:var(--p-papier);padding:64px 0}
.p-paket-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.p-paket{
  background:#fff;border:1px solid var(--p-linie);border-radius:12px;
  padding:26px 24px;display:flex;flex-direction:column;
}
.p-paket.p-empfohlen{border-color:var(--p-blau);border-width:2px}
.p-paket-name{font-family:var(--p-kopf);font-weight:700;font-size:19px;margin-bottom:4px}
.p-paket-hinweis{
  font-size:12px;color:var(--p-blau-tief);font-weight:700;
  font-family:var(--p-kopf);margin-bottom:8px;
}
.p-paket-preis{
  font-family:var(--p-zahl);font-size:30px;color:var(--p-navy);
  margin:14px 0 2px;font-variant-numeric:tabular-nums;
}
.p-paket-preis small{font-size:14px;color:var(--p-grau);font-family:var(--p-text)}
.p-paket-jahr{font-size:13px;color:var(--p-grau);margin-bottom:16px}
.p-paket-text{font-size:14.5px;color:var(--p-grau);line-height:1.6;flex:1}
.p-paket-zahl{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--p-linie);
  font-size:14px;
}
.p-paket-zahl strong{font-family:var(--p-zahl);font-size:17px}

/* ---------- Antrag ---------- */
.p-antrag{padding:64px 0 80px}
.p-antrag>.p-innen>p{font-size:16px;color:var(--p-grau);max-width:62ch;margin:0 0 26px}
.p-feld-gruppe{
  border:1px solid var(--p-linie);border-radius:12px;
  padding:24px;margin-bottom:18px;
}
.p-feld-titel{
  font-family:var(--p-kopf);font-weight:700;font-size:15px;
  margin:0 0 16px;color:var(--p-navy);
}

/* ---------- Fuß ---------- */
.p-fuss{background:var(--p-navy);color:#8FA3B5;padding:36px 0;font-size:13.5px}
.p-fuss .p-innen{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.p-fuss a{color:#C7D4E0;text-decoration:none}
.p-fuss a:hover{color:#fff}
.p-fuss .p-fuss-rechts{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:900px){
  .p-oben .p-innen{grid-template-columns:1fr;gap:36px}
  .p-kann-liste,.p-paket-liste{grid-template-columns:1fr}
  .p-oben{padding:40px 0 48px}
  .p-vergleich,.p-kann,.p-pakete,.p-antrag{padding:44px 0}
  .p-kopf nav{gap:14px}
  .p-kopf nav a:not(.p-knopf){display:none}
  .p-tabelle th,.p-tabelle td{padding:10px 12px;font-size:14px}
}