/* Tunnelfunk – gemeinsames Stylesheet der Unterseiten (seit 19.10.2026).
   Abgeleitet aus den eingebetteten Regeln der Startseite web/index.html:
   Bahnsteigschild, Ozeanblau/Creme/Papier/Ocker, DIN-artige Schildschrift.
   Die Startseite behält ihr eigenes CSS und ist die Vorlage; ändert sich
   dort etwas Grundsätzliches (Farben, Kopfleiste, Fußzeile), hier nachziehen.
   Keine Webfonts, keine externen Ressourcen. Siehe docs/WEB.md. */

:root {
  --ozean:#18505F; --creme:#F6F0E2; --papier:#EDE4D3; --ocker:#8D5C1F;
  --ocker-hell:#C8862A; --signal:#E84D0E;
  --tinte:#231F1B; --grau:#5E564C; --linie:rgba(35,31,27,.18);
  --schild:"DIN Alternate","DIN Condensed",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--creme); color:var(--tinte);
       font-family:var(--text); font-size:1.05rem; line-height:1.6; }
a { color:var(--ozean); }
main, footer { max-width:50rem; margin:0 auto; padding:0 1.25rem; }
main.breit { max-width:62rem; }
h1, h2, h3, .schild, .knopf, .marke, .fahne, .stand, .kicker { font-family:var(--schild); }
h1, h2, h3 { overflow-wrap:anywhere; hyphens:auto; }   /* „Datenschutzerklärung" auf 375 px */
h1 { font-size:clamp(1.6rem,5.5vw,2.5rem); letter-spacing:.06em; text-transform:uppercase;
     line-height:1.15; margin:0 0 .6rem; }
h2 { font-size:1.45rem; letter-spacing:.14em; text-transform:uppercase;
     color:var(--ozean); margin:0 0 .6rem; line-height:1.2; }
h3 { font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase; margin:1.3rem 0 .3rem; }
p { margin:.5rem 0 0; }
ul, ol { margin:.5rem 0 0; padding-left:1.3rem; }
li { margin:.3rem 0; }
address { font-style:normal; margin:.5rem 0 0; }
section { padding:2.4rem 0 .4rem; border-top:1px solid var(--linie); }
/* Seiten ohne <section> (Datenschutz, Beta): h2 trennt dort selbst */
main > h2 { margin-top:2.4rem; padding-top:1rem; border-top:1px solid var(--linie); }
main > h2 + h3 { margin-top:.6rem; }
.intro { font-size:1.15rem; max-width:42rem; }
.intro strong { color:var(--ozean); }
.leise { color:var(--grau); font-size:.95rem; }
.stand { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
         color:var(--grau); margin:0 0 1.2rem; }
.kicker { font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grau); margin:0 0 .4rem; }
code { font-family:var(--mono); font-size:.9em; background:var(--papier);
       padding:.08em .3em; border-radius:3px; overflow-wrap:anywhere; }
img { max-width:100%; height:auto; }

/* Kopfleiste – wie auf der Startseite */
header { background:var(--ozean); color:var(--creme); }
.kopf { max-width:50rem; margin:0 auto; padding:.9rem 1.25rem; display:flex;
        align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.marke { display:flex; align-items:center; gap:.7rem; color:var(--creme);
         text-decoration:none; font-size:1.25rem; letter-spacing:.16em; text-transform:uppercase; }
.marke .zeichen { width:2.4rem; height:2.4rem; flex:none; display:block; }
.marke small { display:block; font-size:.68rem; letter-spacing:.2em; opacity:.8; }
.fahne { color:var(--creme); text-decoration:none; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
         border:1px solid rgba(246,240,226,.55); border-radius:999px; padding:.35rem .85rem; }
.fahne:hover, .fahne:focus-visible { background:rgba(246,240,226,.14); }

/* Bahnsteigschild als Seitentitel */
.schild { background:var(--ozean); color:var(--creme); border-radius:.5rem;
          margin:2rem 0 1.6rem; padding:1.1rem 1.4rem 1.1rem;
          box-shadow:0 3px 0 rgba(35,31,27,.25); position:relative; overflow:hidden; }
.schild::after { content:""; position:absolute; left:1.4rem; right:1.4rem; bottom:.7rem;
                 height:3px; background:var(--creme); opacity:.9; }
.schild .gross { font-size:clamp(1.6rem,7vw,3rem); letter-spacing:.12em;
                 text-transform:uppercase; line-height:1; display:block; overflow-wrap:anywhere; }
.schild .unter { display:block; font-size:clamp(.8rem,3vw,1.1rem); letter-spacing:.28em;
                 text-transform:uppercase; margin:.45rem 0 1rem; opacity:.92; }

/* Knöpfe */
.knopf { display:inline-block; background:var(--ozean); color:var(--creme); text-decoration:none;
         padding:.95rem 1.6rem; border-radius:.45rem; font-size:1.05rem; letter-spacing:.12em;
         text-transform:uppercase; border:2px solid var(--ozean); line-height:1.2; }
.knopf:hover, .knopf:focus-visible { background:var(--tinte); border-color:var(--tinte); }
.knopf.zweit { background:transparent; color:var(--ozean); }
.knopf.zweit:hover, .knopf.zweit:focus-visible { background:var(--papier); color:var(--tinte); }
.knopf.breit { display:block; text-align:center; margin:1.4rem 0; }
.knopf small { display:block; margin-top:.35rem; font-size:.7rem; letter-spacing:.14em;
               text-transform:uppercase; opacity:.75; font-family:var(--text); }
.cta { margin:1.4rem 0 .6rem; display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; }
.cta .leise { margin:0; }

/* Kacheln (Klassen, Schritte, Betriebsarten) */
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem; margin:1rem 0 0; }
.kachel { background:#fff; border-radius:.5rem; padding:1rem 1.1rem 1.2rem; border-top:6px solid var(--ozean); }
.kachel.k2 { border-top-color:var(--ocker); }
.kachel.k1 { border-top-color:var(--tinte); }
.kachel h3 { color:var(--ozean); margin-top:0; }
.kachel.k2 h3 { color:var(--ocker); }
.kachel.k1 h3 { color:var(--tinte); }
.kachel .motto { font-family:var(--schild); letter-spacing:.06em; font-size:1.05rem; margin:0 0 .4rem; }
.kachel p { color:var(--grau); font-size:.97rem; }
.kachel b { color:var(--tinte); }

/* Hinweiskasten („Was Du wissen solltest") und gerahmte Karte */
.ehrlich { background:var(--papier); border-left:6px solid var(--ocker-hell); border-radius:0 .5rem .5rem 0;
           padding:1rem 1.2rem 1.1rem; margin:1rem 0 0; }
.ehrlich h3 { margin-top:0; }
.ehrlich ul { margin:.4rem 0 0; padding-left:1.2rem; }
.karte { border:2px dashed var(--ozean); border-radius:.6rem; padding:1.3rem 1.3rem 1.4rem;
         margin:1rem 0 0; background:#fff; }
.karte h3 { margin-top:0; }

/* Erklärgrafiken (Inline-SVG im Stil von web/bilder/zwei-gleise.svg) */
.grafik { margin:1.4rem 0 .4rem; }
.grafik svg { display:block; width:100%; height:auto; border-radius:.5rem;
              font-family:var(--schild); }
.grafik figcaption { margin-top:.5rem; color:var(--grau); font-size:.88rem; }

/* Tabellen (Zug-WLAN, VPN-Messreihe) */
.tabelle { overflow-x:auto; margin-top:.8rem; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th { text-align:left; font-family:var(--schild); font-size:.72rem; letter-spacing:.14em;
     text-transform:uppercase; color:var(--grau); font-weight:400;
     border-bottom:2px solid var(--ozean); padding:.5rem .5rem; }
td { padding:.5rem .5rem; border-bottom:1px solid var(--linie); vertical-align:top; }
td.ssid { font-family:var(--mono); font-size:.86rem; }
.ok { color:#1f6b3a; font-weight:700; }
.kuerzel { display:inline-block; font-family:var(--schild); font-size:.8rem; letter-spacing:.12em;
           background:var(--ozean); color:var(--creme); border-radius:.3rem; padding:.15rem .45rem;
           box-shadow:0 2px 0 rgba(35,31,27,.25); white-space:nowrap; }
.kuerzel.leer { background:var(--grau); }

/* Fußzeile – wie auf der Startseite */
footer { margin-top:3rem; padding:1.4rem 1.25rem 2.6rem; border-top:3px solid var(--ozean);
         display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-family:var(--schild);
         font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); }
footer a { color:var(--grau); }
footer .firma { flex-basis:100%; margin-top:.4rem; }