/* ===========================================================================
   RESSOURCEN — gemeinsames Seitengeruest
   Jede Farbe, jede Schrift, jedes Material kommt aus tokens.css (Signalakquise
   Brand Kit). Hier steht nur, wie eine Ressourcenseite aufgebaut ist, damit
   alle 28 gleich lesen und eine Formkorrektur alle erreicht.

   Papier fuer Text, Argument und Beweis. Das dunkle Instrument-Panel fuer
   alles, was System zeigt: Tabellen, Feeds, Werkzeuge, Gespraechsverlaeufe.
   =========================================================================== */

*{ box-sizing: border-box; margin: 0; padding: 0 }
body{ background: var(--sa-bg) }

.bahn{ max-width: 1120px; margin: 0 auto; padding: 0 40px }

/* ---- Kopf ---- */
header{ border-bottom: 1px solid var(--sa-rule); padding: 30px 0; margin-bottom: 60px }
.kopfzeile{ display: flex; justify-content: space-between; align-items: center; gap: 24px }
.kopfzeile img{ height: 24px; width: auto; display: block }
.stand{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em;
        text-transform: uppercase; color: var(--sa-dim) }
h1{ font-size: 42px; line-height: 1.12; letter-spacing: -.028em; font-weight: 600;
    color: var(--sa-ink); max-width: 19ch; margin-top: 36px }
/* Der eine Signalmoment der Seite. Blinzeltest: das Gruen laeuft hier
   zusammen, deshalb bleibt alles Weitere neutral. */
h1 em{ font-style: normal; color: var(--sa-signal) }
header .lede{ font-size: 16.5px; line-height: 1.62; color: var(--sa-body); max-width: 74ch;
              margin-top: 19px }
.marken{ display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap }
.marke{ font-family: var(--sa-font-mono); font-size: 8.5px; font-weight: 500;
        letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim);
        border: 1px solid var(--sa-rule-strong); padding: 5px 9px 4px }
.marke--telefon{ color: var(--sa-signal); border-color: var(--sa-signal-edge) }
.marke--wissen{ color: var(--sa-bernstein); border-color: var(--sa-bernstein) }

/* ---- Abschnitte ---- */
section{ margin-bottom: 84px }
.snum{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500;
       letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim);
       padding-bottom: 12px; margin-bottom: 26px; border-bottom: 1px solid var(--sa-rule) }
h2{ font-size: 27px; line-height: 1.18; letter-spacing: -.024em; font-weight: 600;
    color: var(--sa-ink); margin-bottom: 15px; max-width: 24ch }
h3{ font-size: 15.5px; font-weight: 600; color: var(--sa-ink); margin: 32px 0 9px }
p{ font-size: 14.5px; line-height: 1.68; color: var(--sa-body); max-width: 78ch }
p + p{ margin-top: 14px }
b, strong{ color: var(--sa-ink); font-weight: 600 }
a{ color: var(--sa-body); text-decoration: none; border-bottom: 1px solid var(--sa-rule-strong) }
a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) }
a.signal{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) }
code{ font-family: var(--sa-font-mono); font-size: .88em; color: var(--sa-ink);
      background: rgba(20,23,26,.05); padding: 1px 5px }
.az{ font-family: var(--sa-font-mono); font-size: .88em; color: var(--sa-ink) }

ul{ list-style: none; margin: 14px 0; max-width: 78ch }
li{ font-size: 14.5px; line-height: 1.66; color: var(--sa-body);
    padding: 0 0 10px 18px; position: relative }
li::before{ content: ""; position: absolute; left: 0; top: 10px;
            width: 5px; height: 5px; background: var(--sa-rule-strong) }

/* ---- Karten ---- */
.karten{ display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
         gap: 14px; margin: 24px 0 }
.karten > div{ padding: 19px 20px 18px }
.karten .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--sa-signal); margin-bottom: 10px }
.karten b{ display: block; font-size: 14.5px; margin-bottom: 6px }
.karten p{ font-size: 12.5px; line-height: 1.58 }

/* ---- Nummerierte Saetze ---- */
.satz{ display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 15px 0;
       border-bottom: 1px solid var(--sa-rule); max-width: 82ch }
.satz:last-of-type{ border-bottom: 0 }
.satz .n{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-dim);
          padding-top: 2px }

/* ---- Das dunkle Instrument-Panel ---- */
.werkzeug{ padding: 32px 34px 30px; margin: 26px 0 14px }
.wkopf{ display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
        padding-bottom: 16px; border-bottom: 1px solid var(--sa-rule); margin-bottom: 4px }
.wkopf b{ font-size: 15px; color: var(--sa-ink); font-weight: 600 }
.wkopf span{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--sa-dim) }

table{ width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th{ font-family: var(--sa-font-mono); font-size: 8.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim);
    text-align: left; padding: 14px 16px 11px 0; border-bottom: 1px solid var(--sa-rule) }
td{ font-size: 13px; line-height: 1.5; color: var(--sa-body);
    padding: 12px 16px 12px 0; border-bottom: 1px solid var(--sa-rule); vertical-align: top }
tr:last-child td{ border-bottom: 0 }
.werkzeug td.nr{ font-family: var(--sa-font-mono); font-size: 10.5px; color: var(--sa-dim);
                 width: 30px }
td.sig{ color: var(--sa-ink); font-weight: 500 }
td.mono, .mono{ font-family: var(--sa-font-mono); font-size: 11px; white-space: nowrap }
td.klein{ font-size: 12.5px }

/* ---- Feed: Zeilen mit Zeitstempel ---- */
.zeile{ display: grid; grid-template-columns: 92px 1fr 132px; gap: 18px; align-items: baseline;
        padding: 13px 0; border-bottom: 1px solid var(--sa-rule) }
.zeile:last-of-type{ border-bottom: 0 }
.zeile .ts{ font-family: var(--sa-font-mono); font-size: 10.5px; color: var(--sa-dim) }
.zeile .was{ font-size: 13.5px; line-height: 1.5; color: var(--sa-body) }
.zeile .was b{ color: var(--sa-ink) }
.zeile .qu{ font-family: var(--sa-font-mono); font-size: 9.5px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--sa-dim); text-align: right }
.zeile.heiss .was b{ color: var(--sa-signal) }
.schluss{ margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--sa-rule) }
.schluss p{ font-size: 13.5px; max-width: none }

/* ---- Gespraechsverlauf ---- */
.turn{ display: grid; grid-template-columns: 74px 1fr; gap: 18px; padding: 14px 0;
       border-bottom: 1px solid var(--sa-rule) }
.turn:last-of-type{ border-bottom: 0 }
.turn .wer{ font-family: var(--sa-font-mono); font-size: 9.5px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--sa-dim); padding-top: 3px }
.turn.uns .wer{ color: var(--sa-signal) }
.turn p{ font-size: 13.5px; line-height: 1.6; color: var(--sa-body); max-width: none }
.turn .rand{ grid-column: 2; display: block; font-size: 12px; line-height: 1.55;
             color: var(--sa-dim); margin-top: 7px; max-width: 76ch }

/* ---- Zwei Faelle nebeneinander ---- */
.zwei{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 14px }
.fall{ padding: 22px 23px 20px }
.fall .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em;
          text-transform: uppercase; color: var(--sa-dim); margin-bottom: 12px }
.fall b.t{ display: block; font-size: 15.5px; color: var(--sa-ink); margin-bottom: 12px;
           line-height: 1.35 }
.kv{ display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
     border-bottom: 1px solid var(--sa-rule); font-size: 12.5px; color: var(--sa-body) }
.kv:last-of-type{ border-bottom: 0 }
.kv span:last-child{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-ink);
                     text-align: right }
.fall p{ font-size: 12.5px; line-height: 1.58; margin-top: 14px; padding-top: 13px;
         border-top: 1px solid var(--sa-rule); max-width: none }

/* ---- Hinweise ---- */
.hinweis{ border-left: 2px solid var(--sa-signal); padding: 3px 0 3px 18px; margin: 24px 0 }
.warnung{ border-left: 2px solid var(--sa-bernstein); padding: 3px 0 3px 18px; margin: 24px 0 }
.hinweis p, .warnung p{ font-size: 14px }

/* ---- Fuss: die Herkunft steht auf jeder Ressource ---- */
footer{ border-top: 1px solid var(--sa-rule); margin-top: 24px; padding: 20px 0 48px;
        display: flex; justify-content: space-between; align-items: center; gap: 20px;
        font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em;
        text-transform: uppercase; color: var(--sa-dim) }
footer b{ color: var(--sa-body); font-weight: 500 }

@media (max-width: 760px){
  .bahn{ padding: 0 22px }
  h1{ font-size: 32px }
  .werkzeug{ padding: 22px 18px }
  .zwei{ grid-template-columns: 1fr }
  .zeile{ grid-template-columns: 1fr; gap: 4px }
  .zeile .qu{ text-align: left }
  .turn{ grid-template-columns: 1fr; gap: 5px }
  .turn .rand{ grid-column: 1 }
  footer{ flex-direction: column; align-items: flex-start; gap: 8px }
}