/* ============================================================================
   assets/css/site.css — messlog.ch / messlog.de
   Richtung B «Klarraum»: hell, Petrol als einziger Akzent, viel Weissraum.
   ----------------------------------------------------------------------------
   Handgeschrieben, kein Build-Schritt, keine fremden Schriften.
   Farben stehen AUSSCHLIESSLICH hier oben — wer die Richtung wechseln will,
   ändert diesen Block und sonst nichts.
   ========================================================================== */

:root {
    --hg:        #f4f7f9;
    --flaeche:   #ffffff;   /* feste-farbe-ok: Weiss auf dunklem Grund */
    --flaeche2:  #f7fafb;
    --dunkel:    #0f2933;
    --rand:      #e2e9ee;
    --fein:      #eef3f6;
    --text:      #132029;
    --leise:     #61798a;
    --zart:      #93a7b4;
    --akz:       #0e7c8a;
    --akzweich:  #e5f4f6;
    --akztext:   #ffffff;   /* feste-farbe-ok: Weiss auf dunklem Grund */
    --ok:        #0f7a4a;
    --okweich:   #e3f4ec;
    --gefahr:    #c02b1f;
    --gefahrweich:#fce9e7;
    --r:         12px;
    --rs:        8px;
    --schatten:  0 1px 2px rgba(16,40,56,.05);
    --gross:     0 18px 44px -20px rgba(16,40,56,.35);
    --held:      linear-gradient(160deg, #0f2933 0%, #17414f 55%, #0e7c8a 130%);
    --tab:       46px;   /* Mindesthöhe für alles Antippbare */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hg);
    color: var(--text);
    font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.mitte { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.klein { font-size: .84rem; color: var(--zart); }
.leer  { color: var(--zart); }

/* Sichtbar nur für Vorlesehilfen — der Honigtopf gegen Formular-Roboter. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- Kopfzeile */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.9);   /* feste-farbe-ok: Weiss auf dunklem Grund */
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rand);
}
.kopf .mitte { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.marke .zeichen {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    background: var(--akz); display: grid; place-items: center;
}
.marke .zeichen svg { width: 18px; height: 18px; stroke: #fff; fill: none; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.kopf nav { display: flex; gap: 20px; margin-left: auto; font-size: 15px; color: var(--leise); flex-wrap: wrap; }
.kopf nav a { padding: 6px 0; }
.kopf nav a:hover { color: var(--akz); }
.kopf nav a[aria-current] { color: var(--akz); font-weight: 650; }
.sprachen { display: flex; gap: 2px; border: 1px solid var(--rand); border-radius: 20px; padding: 2px; background: var(--flaeche2); }
.sprachen a {
    padding: 6px 11px; border-radius: 16px; font-size: 12.5px; font-weight: 650;
    color: var(--leise); text-transform: uppercase; min-height: 32px; display: grid; place-items: center;
}
.sprachen a[aria-current] { background: var(--akz); color: var(--akztext); }

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--rs); border: 1px solid transparent;
    background: var(--akz); color: var(--akztext);
    font: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer;
    min-height: var(--tab);
}
.knopf:hover { filter: brightness(1.06); }
.knopf.voll { width: 100%; }
.knopf.auf-dunkel { background: #fff; color: var(--dunkel); }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.knopf.rand-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }   /* feste-farbe-ok: Weiss auf dunklem Grund */

/* ------------------------------------------------------------------ Meldung */
.meldung {
    margin: 18px 0 0; padding: 13px 16px; border-radius: var(--r);
    border-left: 3px solid var(--akz); background: var(--akzweich); color: var(--text);
}
.meldung-erfolg { border-left-color: var(--ok);     background: var(--okweich);     color: var(--ok); }
.meldung-fehler { border-left-color: var(--gefahr); background: var(--gefahrweich); color: var(--gefahr); }

/* --------------------------------------------------------------------- Held */
.held { background: var(--held); color: #fff; padding: 84px 0 74px; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.augen {
    display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
    font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255,255,255,.72); font-weight: 700;   /* feste-farbe-ok: Weiss auf dunklem Grund */
}
.augen span { width: 22px; height: 1px; background: #fff; opacity: .6; display: block; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.held h1 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 16px; }
.held .lead { font-size: 18.5px; color: rgba(255,255,255,.84); max-width: 46ch; margin-bottom: 26px; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.held .reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.siegel { display: flex; gap: 10px; margin: 32px 0 0; flex-wrap: wrap; }
.siegel span {
    border: 1px solid rgba(255,255,255,.28); border-radius: 20px; padding: 5px 13px;   /* feste-farbe-ok: Weiss auf dunklem Grund */
    font-size: 12.5px; color: rgba(255,255,255,.86); font-weight: 600;   /* feste-farbe-ok: Weiss auf dunklem Grund */
}

/* Handy-Attrappe im Held.
   FORM: rund 1 : 2.15, also die Form eines echten Telefons. Die erste Fassung
   war 268 x 262 und damit praktisch quadratisch – als Telefon las sie niemand.
   Alle Masse in Pixeln, keine vh: In einer WebView wäre vh oft 0. */
.telefon {
    position: relative;
    width: 274px;
    margin: 0 auto;
    border: 10px solid #08161c;   /* feste-farbe-ok: Gehäuse, bewusst schwarz */
    border-radius: 38px;
    background: var(--flaeche);
    box-shadow: var(--gross);
    overflow: hidden;
}
/* Die Kerbe oben – ohne sie wirkt es wie ein Bilderrahmen. */
.tel-kerbe {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 96px; height: 20px; border-radius: 0 0 12px 12px;
    background: #08161c;          /* feste-farbe-ok: Gehäuse */
    z-index: 2;
}
.tel-kopf {
    background: var(--dunkel); color: #fff;   /* feste-farbe-ok: Weiss auf dunklem Grund */
    padding: 26px 14px 11px; font-size: 13.5px; font-weight: 650;
    display: flex; align-items: center; gap: 9px;
}
.tel-kopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--akz); display: block; }
.tel-body { padding: 14px 14px 12px; }

/* Tastatur-Umschalter – dasselbe, was die Seite unten bewirbt. */
.tel-wahl {
    display: flex; align-items: center; gap: 5px;
    background: var(--flaeche2); border: 1px solid var(--rand);
    border-radius: 7px; padding: 5px 6px; margin-bottom: 11px;
    font-size: 10.5px; color: var(--leise);
}
.tel-wahl > span:first-child { font-weight: 650; margin-right: auto; }
.tel-wahl-k {
    padding: 4px 8px; border-radius: 5px; font-weight: 650;
    border: 1px solid var(--rand); background: var(--flaeche);
}
.tel-wahl-k.ist { background: var(--akz); border-color: var(--akz); color: #fff; }   /* feste-farbe-ok */

.tel-name { font-size: 14px; font-weight: 650; margin: 0; }
.tel-soll { font-size: 12px; color: var(--leise); margin: 0 0 8px; }
.tel-wert {
    font-size: 44px; font-weight: 750; text-align: center; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; margin: 0; padding: 6px 0;
    color: var(--ok);
}
.band { position: relative; height: 8px; border-radius: 5px; background: var(--flaeche2);
        border: 1px solid var(--rand); margin-top: 4px; }
.band .soll { position: absolute; top: 0; bottom: 0; left: 32%; right: 24%;
              background: var(--okweich); border-left: 1px solid var(--ok); border-right: 1px solid var(--ok); }
.band .ist  { position: absolute; top: -4px; left: 56%; width: 4px; height: 16px; border-radius: 2px; background: var(--text); }
.bandtext { display: flex; justify-content: space-between; font-size: 10.5px;
            color: var(--zart); margin: 6px 0 14px; }

/* Zifferntastatur */
.tel-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tel-taste {
    display: grid; place-items: center; min-height: 42px;
    background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 5px;
    font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text);
}
.tel-weg { color: var(--gefahr); font-size: 13px; }
.tel-fuss { display: flex; gap: 6px; margin-top: 6px; }
.tel-schmal { width: 33%; min-height: 38px; }
.tel-weiter {
    flex: 1; display: grid; place-items: center; min-height: 38px;
    background: var(--akz); color: #fff;   /* feste-farbe-ok: Knopf */
    border-radius: 5px; font-size: 12.5px; font-weight: 700;
}

/* Untere Leiste – im Handy-Modus genau zwei Einträge (siehe handy_leiste). */
.tel-tabbar {
    display: flex; background: var(--dunkel); padding: 12px 0 16px;
}
.tel-tabbar span {
    flex: 1; text-align: center; font-size: 10px; font-weight: 650;
    color: rgba(255,255,255,.55);   /* feste-farbe-ok: auf dunklem Grund */
}
.tel-tabbar span.ist { color: var(--akz); }

/* -------------------------------------------------------------- Seitenkopf */
.seitenkopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); padding: 56px 0 44px; }
.seitenkopf h1 { font-size: clamp(27px, 3.6vw, 40px); }
.aug { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--zart);
       font-weight: 700; margin: 0 0 12px; }
.unter { color: var(--leise); font-size: 17.5px; max-width: 62ch; margin: 14px 0 0; }

/* --------------------------------------------------------------- Abschnitte */
.abschnitt { padding: 70px 0; }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt h2 { font-size: clamp(23px, 3vw, 33px); margin-bottom: 18px; }
.fliess { color: var(--leise); font-size: 17px; max-width: 68ch; }
.fliess p:last-child { margin-bottom: 0; }
.fliess ul, .fliess ol { padding-left: 20px; }
.fliess li { margin-bottom: 8px; }
.fliess strong, .fliess b { color: var(--text); }
.fliess a { color: var(--akz); text-decoration: underline; text-underline-offset: 3px; }

.abschnitt-tabelle, .abschnitt-schieber { background: var(--flaeche2); }

/* ------------------------------------------------------------------ Karten */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; margin-top: 26px; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
         padding: 26px; box-shadow: var(--schatten); }
.karte .sym { width: 46px; height: 46px; border-radius: 13px; background: var(--akzweich); color: var(--akz);
              display: grid; place-items: center; margin-bottom: 16px; }
.karte .sym svg { width: 23px; height: 23px; }
.karte h3 { font-size: 18px; margin-bottom: 8px; }
.karte p { color: var(--leise); font-size: 15px; margin: 0; }

/* ----------------------------------------------------------------- Tabelle */
table { width: 100%; border-collapse: collapse; background: var(--flaeche);
        border: 1px solid var(--rand); border-radius: var(--r); overflow: hidden; font-size: 15.5px; }
th { text-align: left; padding: 13px 18px; background: var(--flaeche2); border-bottom: 1px solid var(--fein);
     font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--zart); }
td { padding: 14px 18px; border-bottom: 1px solid var(--fein); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; width: 40%; }
td:last-child { color: var(--leise); }

/* ---------------------------------------------------------------- Schieber */
.schieber { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
            overflow: hidden; box-shadow: var(--schatten); margin-top: 24px; }
.sch-bilder { position: relative; }
.sch-bild { display: none; margin: 0; }
.sch-bild.an { display: block; }
.sch-bild img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-bottom: 1px solid var(--fein); }
.sch-platz { display: grid; place-items: center; aspect-ratio: 16/8; background: var(--flaeche2);
             color: var(--zart); font-size: 15px; border-bottom: 1px solid var(--fein); }
.sch-bild figcaption { padding: 20px 24px; }
.sch-bild figcaption b { display: block; font-size: 18px; margin-bottom: 5px; }
.sch-bild figcaption span { color: var(--leise); font-size: 15px; }
.sch-steuer { display: flex; align-items: center; gap: 12px; justify-content: center;
              padding: 0 20px 20px; }
.sch-steuer button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand);
                     background: var(--flaeche); color: var(--text); font-size: 19px; cursor: pointer; }
.sch-steuer button:hover { border-color: var(--akz); color: var(--akz); }
.sch-punkte { display: flex; gap: 7px; }
.sch-punkte button { width: 9px; height: 9px; border-radius: 50%; padding: 0; border: 0;
                     background: var(--rand); cursor: pointer; }
.sch-punkte button[aria-selected="true"] { background: var(--akz); width: 24px; border-radius: 5px; }

/* ----------------------------------------------------------------- Rechner */
.rechner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center;
           background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
           padding: 28px; box-shadow: var(--schatten); margin-top: 24px; }
.regler { display: block; margin-bottom: 22px; }
.regler .zeile { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.regler .zeile b { font-variant-numeric: tabular-nums; }
.regler input[type="range"] { width: 100%; accent-color: var(--akz); min-height: 34px; }
.ergebnis { background: var(--akzweich); border-radius: var(--r); padding: 28px; text-align: center; }
.ergebnis .zahl { font-size: 48px; font-weight: 750; letter-spacing: -.03em; color: var(--akz);
                  font-variant-numeric: tabular-nums; line-height: 1; margin: 0; }
.ergebnis .was { color: var(--leise); font-size: 15px; margin: 8px 0 0; }

/* ----------------------------------------------------------------- Grenzen */
.grenzen { background: var(--flaeche); border: 1px solid var(--rand); border-left: 3px solid var(--gefahr);
           border-radius: var(--r); padding: 28px 32px; }

/* ----------------------------------------------------------------- Kontakt */
.kontakt { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.kontakt-liste { list-style: none; padding: 0; margin: 18px 0 0; }
.kontakt-liste li { margin-bottom: 10px; color: var(--leise); }
.kontakt-liste a { color: var(--akz); }
.formular { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
            padding: 28px; box-shadow: var(--schatten); }
.feld { display: block; margin-bottom: 16px; }
.feld span { display: block; font-size: 13px; font-weight: 650; color: var(--leise); margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--rs);
    background: var(--flaeche); color: var(--text);
    font: inherit;
    font-size: 16px;          /* darunter zoomt iOS beim Antippen hinein */
    min-height: var(--tab);
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: 2px solid var(--akz); outline-offset: -1px; border-color: var(--akz);
}
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* -------------------------------------------------------------------- Fuss */
footer { background: var(--dunkel); color: rgba(255,255,255,.72); padding: 50px 0 28px; font-size: 15px; margin-top: 20px; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
footer .spalten { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
footer h2 { color: #fff; font-size: 12.5px; letter-spacing: .11em; text-transform: uppercase; margin: 0 0 12px; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
footer a { display: block; padding: 5px 0; color: rgba(255,255,255,.72); }   /* feste-farbe-ok: Weiss auf dunklem Grund */
footer a:hover { color: #fff; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.marke-fuss { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.03em; margin-bottom: 8px; }   /* feste-farbe-ok: Weiss auf dunklem Grund */
.fuss-unten { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; display: flex;   /* feste-farbe-ok: Weiss auf dunklem Grund */
              justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
              color: rgba(255,255,255,.5); }   /* feste-farbe-ok: Weiss auf dunklem Grund */

/* ------------------------------------------------------------------- Handy */
@media (max-width: 860px) {
    .held-raster, .rechner, .kontakt { grid-template-columns: 1fr; }
    .telefon { margin-top: 32px; }
    .kopf nav { display: none; }        /* Die Seiten stehen im Fuss */
    footer .spalten { grid-template-columns: 1fr; }
    .abschnitt { padding: 48px 0; }
}
@media (max-width: 560px) {
    .zwei { grid-template-columns: 1fr; }
    /* Tabelle wird zur Karte: Kopfzeile ausblenden, Beschriftung je Zelle */
    table thead { display: none; }
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr { border-bottom: 1px solid var(--fein); padding: 6px 0; }
    table tr:last-child { border-bottom: 0; }
    td { border: 0; padding: 8px 18px; }
    td:first-child { width: auto; }
    td::before { content: attr(data-label); display: block; font-size: 10.5px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--zart); font-weight: 700; margin-bottom: 3px; }
}

@media print {
    .kopf, .sprachen, footer, .knopf, .sch-steuer { display: none !important; }
    body { background: #fff; }   /* feste-farbe-ok: Druckansicht */
}