/* ---------------------------------------------------------------------------
   Backlink-Plattform — Oberflaeche Stufe 0a
   Hell, sachlich, technisch. Eine Akzentfarbe, keine Dauer-Animationen,
   Fliesstext gross genug zum Lesen.
   --------------------------------------------------------------------------- */

:root {
  --akzent:        #1a4f8c;
  --akzent-hell:   #eaf1f9;
  --akzent-dunkel: #123a68;

  --text:      #1c2126;
  --text-leise:#5c666f;
  --linie:     #d8dee4;
  --flaeche:   #ffffff;
  --grund:     #f4f6f8;

  --ok:      #1c6b3f;
  --ok-bg:   #e7f3ec;
  --warn:    #8a5a00;
  --warn-bg: #fbf1de;
  --fehler:  #9b2226;
  --fehler-bg:#fbeaea;

  --radius: 6px;
  --schatten: 0 1px 2px rgba(16, 24, 32, .06), 0 1px 8px rgba(16, 24, 32, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--akzent-dunkel); }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
}
.marke { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.marke span { color: var(--akzent); }
.kopf nav { display: flex; gap: 20px; font-size: 16px; }
.kopf nav a { color: var(--text-leise); text-decoration: none; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--akzent); }
.kopf-rechts { margin-left: auto; font-size: 15px; color: var(--text-leise); }

/* --------------------------------------------------------------- Rahmen */

/*
 * Volle Breite statt fester Spalte.
 *
 * Die Tabellen haben bis zu acht Spalten und wurden vorher in 1180 px
 * gequetscht — mit waagerechtem Scrollen, waehrend links und rechts der Platz
 * leer blieb. Tabellen duerfen also die ganze Breite nutzen.
 *
 * Fliesstext darf das NICHT: Zeilen ueber etwa 90 Zeichen liest niemand gern.
 * Deshalb wird nicht die Seite begrenzt, sondern nur das, was Text ist —
 * siehe .lesebreite weiter unten.
 */
main { margin: 0 auto; padding: 28px 32px 72px; }

h1 { font-size: 27px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.015em; }
h2 { font-size: 21px; margin: 34px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 18px; margin: 24px 0 8px; }

/* Begrenzung fuer alles, was gelesen und nicht ueberflogen wird. */
.unterzeile, .hinweis > p, .karte > p, .fuss { max-width: 78ch; }
.unterzeile { color: var(--text-leise); font-size: 16px; margin: 0 0 24px; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

/* -------------------------------------------------------------- Kennzahl */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; }
.kennzahl .wert { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kennzahl .titel { font-size: 14px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; }

/* Kennzahl als Filter: Sie zeigt ohnehin die Menge, nach der man filtern will. */
a.kennzahl { display: block; text-decoration: none; color: inherit; }
a.kennzahl:hover { border-color: var(--akzent); background: var(--akzent-hell); }
a.kennzahl.aktiv { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
a.kennzahl.aktiv .titel { color: var(--akzent-dunkel); }

/* ------------------------------------------------- Speichern im Hintergrund */

/* Rueckmeldung an genau dem Feld, das man angefasst hat — eine Meldung am
   Seitenkopf uebersieht man bei 45 Zeilen. Ohne JavaScript nie sichtbar. */
/* Waehrend ein Inhaltsbereich getauscht wird. Bewusst dezent: Der Vorgang
   dauert Millisekunden, ein Ladebalken waere Unruhe ohne Nutzen. */
body.bx-laedt #bx-inhalt { opacity: .55; transition: opacity .12s ease; }
body.bx-laedt { cursor: progress; }

.feld-status { margin-left: 6px; font-size: 13px; white-space: nowrap; }
.feld-status.laeuft  { color: var(--text-leise); }
.feld-status.fertig  { color: var(--ok); }
.feld-status.schief  { color: var(--fehler); }
select.laeuft { opacity: .6; }
select.schief { border-color: var(--fehler); }

/* -------------------------------------------------------------- Tabellen */

.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
thead th {
  background: #fafbfc; font-size: 13px; font-weight: 600; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leise { color: var(--text-leise); font-size: 15px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }

/* --------------------------------------------------------------- Marken */

.marke-stufe, .status, .verdikt {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
/* Status und Vermarktungshinweis in einer Zeile, ohne unschoenen Umbruch
   mitten in der Domainspalte. Bricht erst um, wenn wirklich kein Platz ist. */
.zeile-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.marke-fremd {
  display: inline-block; padding: 1px 7px; border-radius: 99px;
  font-size: 12px; white-space: nowrap;
  background: #f4f0e8; color: #7a5a3c; border: 1px solid #e3d7cb;
}

.marke-stufe { border: 1px solid var(--linie); background: #fff; color: var(--text-leise); }
.marke-stufe.PLATIN { background: var(--akzent-hell); border-color: #b9d0e8; color: var(--akzent-dunkel); }
.marke-stufe.GOLD   { background: var(--warn-bg);   border-color: #e6d3ac; color: var(--warn); }
.marke-stufe.SILBER { background: #eef0f2;          border-color: var(--linie); color: var(--text-leise); }
.marke-stufe.BRONZE { background: #f6f2ee;          border-color: #e3d7cb; color: #7a5a3c; }

.status.ok, .verdikt.ok            { background: var(--ok-bg);     color: var(--ok); }
.status.warn, .verdikt.c_qualitaet { background: var(--warn-bg);   color: var(--warn); }
.status.fehler, .verdikt.a_manipulation, .verdikt.b_ausfall, .verdikt.fehler {
  background: var(--fehler-bg); color: var(--fehler);
}

/* ---------------------------------------------------------------- Balken */

.balken { display: block; width: 100%; max-width: 190px; height: 7px; background: #e9edf1; border-radius: 99px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--akzent); border-radius: 99px; }
.balken.gut i  { background: var(--ok); }
.balken.mittel i { background: #b8860b; }
.balken.schwach i { background: #b06a6a; }

.score-zelle { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.score-zahl { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; flex: 0 0 auto; }
/* Ohne diese Zeile schrumpft der Balken als Flex-Element auf wenige Pixel. */
.score-zelle .balken { flex: 1 1 auto; min-width: 70px; }

/* -------------------------------------------------------------- Hinweise */

.hinweis { border-left: 4px solid var(--akzent); background: var(--akzent-hell); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; margin: 18px 0; font-size: 16px; }
.hinweis.warn   { border-left-color: #c69214; background: var(--warn-bg); }
.hinweis.fehler { border-left-color: var(--fehler); background: var(--fehler-bg); }
.hinweis p:first-child { margin-top: 0; } .hinweis p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ Definitionsliste */

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 7px 20px; margin: 0; font-size: 16px; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; }

/* --------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius);
  background: var(--akzent); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 500; border: 1px solid var(--akzent);
}
.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf.leise { background: #fff; color: var(--akzent); }
.knopf.leise:hover { background: var(--akzent-hell); }

/* ------------------------------------------------------------------ Fuss */

.fuss { margin: 0 auto; padding: 0 32px 40px; color: var(--text-leise); font-size: 15px; }

/* --------------------------------------------------- Aufklappbare Bereiche */

/* Fuer Formulare, die man selten braucht: sichtbar erst auf Klick, ganz ohne
   JavaScript. Das Hinzufuegen-Formular stand vorher dauerhaft ueber der Liste
   und schob den eigentlichen Inhalt nach unten. */
details.klappe { margin-bottom: 22px; }
details.klappe > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 8px 16px; border-radius: var(--radius);
  background: #fff; color: var(--akzent); border: 1px solid var(--akzent);
  font-size: 16px; font-weight: 500;
}
details.klappe > summary::-webkit-details-marker { display: none; }
details.klappe > summary:hover { background: var(--akzent-hell); }
details.klappe[open] > summary { margin-bottom: 14px; }
details.klappe[open] > summary::after { content: " ×"; }
details.klappe > summary::after { content: " +"; }

/* ----------------------------------------------------------------- Print */

@media print {
  body { background: #fff; font-size: 11pt; }
  .kopf, .knopf, .nicht-drucken { display: none !important; }
  main { max-width: none; padding: 0; }
  .karte { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  a { color: #000; text-decoration: none; }

  /* Spickzettel: auf EINE Seite. Enger gesetzt, zweispaltig, ohne Zierrat.
     Ein Zettel, der auf zwei Seiten laeuft, haengt nicht neben dem Bildschirm. */
  .spick { font-size: 8.6pt; line-height: 1.34; }
  .spick main { padding: 0; }
  .spick h1 { font-size: 15pt; margin: 0 0 1mm; }
  .spick .unterzeile { font-size: 8pt; margin: 0 0 3mm; max-width: none; }
  /*
   * column-fill: auto statt des Standards balance.
   *
   * Mit balance versucht der Browser, beide Spalten gleich hoch zu machen.
   * Beim Druck fuehrt das dazu, dass er den Inhalt auf zwei SEITEN verteilt,
   * um zwei gleich hohe Spalten zu bekommen — obwohl alles auf eine passt
   * (gemessen: 860 von 1062 verfuegbaren Pixeln). Mit auto fuellt er erst
   * die linke Spalte bis zum Seitenende, dann die rechte. Genau so soll ein
   * Zettel gesetzt sein.
   *
   * Die Hoehenangabe ist noetig, damit der Browser ueberhaupt weiss, wo die
   * Spalte enden soll: Ohne sie ist die Hoehe unbegrenzt und auto wirkt nicht.
   */
  .spick .spalten {
    column-count: 2; column-gap: 5mm;
    column-fill: auto;
    height: 250mm;
  }
  .spick .karte {
    padding: 2mm 2.5mm; margin: 0 0 2mm; border-radius: 0;
    break-inside: avoid; border-color: #ccc;
  }
  .spick h2 { font-size: 9.5pt; margin: 0 0 1.5mm; letter-spacing: 0; }
  .spick p, .spick li { margin: 0 0 1mm; max-width: none; }
  .spick ul, .spick ol { margin: 0; padding-left: 4mm; }
  .spick table { font-size: 8.2pt; }
  .spick th, .spick td { padding: 0.8mm 1.5mm; }
  .spick .tabelle-rahmen { border: 0; }
  .spick .hinweis { padding: 1.5mm 2.5mm; margin: 0 0 2mm; border-left-width: 2mm; }
  .spick .mono { font-size: 7.8pt; }
  @page { margin: 8mm; }
}

/* Am Bildschirm bleibt der Spickzettel einspaltig und normal gross —
   zweispaltig liest sich am Monitor schlechter als auf Papier. */
.spick .spalten { column-count: 1; }

@media (max-width: 700px) {
  body { font-size: 17px; }
  main { padding: 20px 16px 56px; }
  .daten { grid-template-columns: 1fr; gap: 2px 0; }
  .daten dd { margin-bottom: 10px; }
}