/* Gemeinsames Stylesheet aller Seiten (base.html). Die Farb-Tokens stehen in
   static/tokens.css, das vorher geladen wird. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  line-height: 1.5;
}
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--accent); }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.hero { max-width: 640px; margin: 0 auto; text-align: center; }
.hero form { text-align: left; }
header.site {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  background: var(--surface);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.site-nav a { font-size: 14px; color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-nav a.sprache { font-size: 13px; color: var(--ink-soft); font-weight: 400; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; }
/* Schmale Bildschirme (375 px): Die Navigation bricht unter die Marke um und
   wird kompakter, sonst laeuft sie ueber den Rand. */
@media (max-width: 640px) {
  header.site { padding: 14px 0; }
  header.site .wrap { position: relative; }
  .site-nav { gap: 6px 14px; }
  .site-nav a { font-size: 13.5px; }
  /* Sprachumschalter rechts neben die Marke, die Links darunter in eine Zeile. */
  .site-nav a.sprache { position: absolute; right: 20px; top: -3px; padding: 3px 9px; }
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand .dot { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); display: inline-block; transform: rotate(45deg); }
main { padding: 56px 0 80px; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
/* Der Lead hat bewusst kein max-width: er nutzt die Inhaltsbreite statt links
   zu haengen. Wo eine schmalere Zeile gewollt
   ist (Blogartikel), begrenzt das Template selbst. */
p.lead { color: var(--ink-soft); font-size: 16px; margin: 0 0 32px; }
.info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--ink-soft);
  font-size: 11px; font-style: normal; font-weight: 700; cursor: help; margin-left: 4px; vertical-align: middle; }
.info-icon .tooltip-text { visibility: hidden; opacity: 0; position: absolute; z-index: 20;
  bottom: 135%; left: 50%; transform: translateX(-50%); width: 240px;
  background: var(--ink); color: white; text-align: left; border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; transition: opacity .15s ease; }
.info-icon .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border-width: 5px; border-style: solid; border-color: var(--ink) transparent transparent transparent; }
.info-icon:hover .tooltip-text, .info-icon:focus .tooltip-text { visibility: visible; opacity: 1; }
/* Auf dem Handy liess sich die Ergebnisseite frueher nach
   rechts wegscrollen - dort lag nur leerer grauer Bereich. Ursache waren
   genau diese Tooltips.

   Zwei Dinge kamen zusammen. Erstens war der Tooltip am Symbol verankert
   (vorher mittig, dann linksbuendig) und bis zu 240 px breit: steht das
   Symbol hinter einem langen Label weit rechts, ragt der Kasten ueber den
   rechten Rand hinaus. Zweitens - und das ist der eigentliche Grund, warum
   der Effekt AUCH OHNE Antippen auftrat - ist `visibility: hidden` nicht
   dasselbe wie `display: none`: das Element wird weiterhin gelayoutet und
   zaehlt zur scrollbaren Breite des Dokuments. Die unsichtbaren Tooltips
   haben die Seite also permanent verbreitert.

   Auf schmalen Bildschirmen ist der Tooltip deshalb nicht mehr am Symbol
   verankert, sondern `fixed` am unteren Rand ueber die volle Breite. Ein
   fixiertes Element kann per Definition keine horizontale Scrollbreite
   erzeugen, und der Text ist gleichzeitig besser lesbar als in einem
   240-px-Kaestchen. Der kleine Pfeil entfaellt dabei - er zeigte auf ein
   Symbol, neben dem der Kasten nun nicht mehr steht. */
@media (max-width: 640px) {
  .info-icon .tooltip-text {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px; top: auto;
    transform: none; width: auto; max-width: none;
    z-index: 100; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  }
  .info-icon .tooltip-text::after { display: none; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: white; border: none;
  padding: 13px 22px; border-radius: 8px; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn:hover { background: #050B18; }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: #2140B0; }
.btn:disabled { background: #C7CBD4; cursor: not-allowed; }
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 48px 24px; text-align: center; background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.upload-zone.drag { border-color: var(--accent); background: #F0F3FF; }
.upload-zone input[type=file] { display: none; }
.filename { margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink-soft); }
/* Meldung der Upload-Pruefung im Browser */
.upload-fehler { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #FDECEC; color: #A31E1E; font-size: 14px; text-align: left; }
.upload-fehler[hidden] { display: none; }

/* Severity-Leiste: das Signature-Element */
.sev-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 6px 0 18px; background: var(--border); }
.sev-seg { height: 100%; transition: width .6s ease; }
.sev-seg.crit { background: var(--crit); }
.sev-seg.hoch { background: var(--hoch); }
.sev-seg.mittel { background: var(--mittel); }
.sev-seg.niedrig { background: var(--niedrig); }
.sev-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-bottom: 28px; }
.sev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sev-legend .sw { width: 10px; height: 10px; border-radius: 2px; }
.sev-legend .sw.crit { background: var(--crit); } .sev-legend .sw.hoch { background: var(--hoch); }
.sev-legend .sw.mittel { background: var(--mittel); } .sev-legend .sw.niedrig { background: var(--niedrig); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.metric { background: var(--surface); padding: 18px 16px; }
.metric.tile { cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.metric.tile:hover { background: #F0F3FF; }
.metric.tile-active { background: #E8EEFF; box-shadow: inset 0 0 0 2px var(--accent); }
.metric.tile-dimmed { opacity: .4; }
.metric .num { font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; }
.metric .label { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

.paywall { background: linear-gradient(180deg, #10192E 0%, #1A2A4A 100%); color: white; border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; }
.paywall form { margin-top: auto; padding-top: 8px; }
.paywall form .btn.accent { border: 2px solid white; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.paywall .price { font-family: 'IBM Plex Mono', monospace; font-size: 32px; font-weight: 600; }
.paywall ul { padding-left: 20px; margin: 16px 0 24px; color: #C9D2E8; }
.paywall li { margin-bottom: 6px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #DEF3E4; color: #1B7A3D; }
.badge.processing { background: #FFF3D6; color: #92660A; }
.badge.error { background: #FBE2E2; color: #A31E1E; }
.badge.beta { background: #F3E9D9; color: #7A5A26; vertical-align: middle; letter-spacing: .04em; text-transform: uppercase; }

footer.site { border-top: 1px solid var(--border); padding: 28px 0; color: var(--ink-soft); font-size: 13px; }
.fineprint { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  max-width: 640px; margin: 0 auto;
  background: var(--ink); color: #E7EAF2;
  border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  display: none;
}
.cookie-banner.show { display: block; }
.cookie-banner p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #C9D2E8; }
.cookie-banner .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner .btn.small { padding: 9px 16px; font-size: 13.5px; }

.loading-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,25,46,.94);
  color: white; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.loading-overlay.show { display: flex; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.2); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Referenzlogos auf der Startseite. Graustufen, damit unterschiedlich
   bunte Firmenlogos nebeneinander nicht unruhig wirken; beim Darauffahren
   in Farbe. */
.referenzen { margin: 0 0 34px; text-align: center; }
.referenzen-titel {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
}
.referenzen-liste {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: center; justify-content: center;
}
.referenzen-liste img {
  max-height: 42px; max-width: 150px; width: auto; height: auto;
  filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease;
}
.referenzen-liste a:hover img, .referenzen-liste a:focus img {
  filter: grayscale(0); opacity: 1;
}
@media (prefers-reduced-motion: reduce) { .referenzen-liste img { transition: none; } }
/* Hinweisbalken des Testsystems. Auffaellig genug, um nicht uebersehen zu
   werden, aber ohne die Seite zu verschieben - sonst pruefst du ein Layout,
   das es in Produktion nicht gibt. */
.staging-banner {
  position: sticky; top: 0; z-index: 999;
  background: #B45309; color: #fff;
  font-size: 13px; line-height: 1.45; text-align: center;
  padding: 7px 14px;
}
.staging-banner strong { letter-spacing: .04em; text-transform: uppercase; }
@media print { .staging-banner { display: none; } }

/* Hilfsklassen fuer die haeufigsten frueheren Inline-Styles. !important, weil
   sie das style-Attribut ersetzen, das ebenfalls jede andere Regel schlug. */
.u-mt0 { margin-top: 0 !important; }
.u-m0 { margin: 0 !important; }
.u-m0-b10 { margin: 0 0 10px !important; }
.u-fs13 { font-size: 13px !important; }
.u-soft { color: var(--ink-soft) !important; }