/* skillbyte · Branchenseiten: Antwort-Abschnitte auf volle Breite.
   Gemeinsam fuer alle Branchenseiten mit .p3-in-Struktur, damit eine
   Aenderung nicht in sieben Dateien nachgezogen werden muss. */
/* ═══ Antwort-Abschnitte auf volle Breite ═══════════════════════════════
   Vorher liefen Fragen, Fließtext, Diagramme und Tabellen in derselben
   840px-Spalte. Für Text ist das richtig, für die beiden Tabellen war es
   falsch: sechs Zeilen mit drei Spalten in 840px zwingen zum Querscrollen,
   und genau diese Tabellen sind der Teil, den ein Netzmeister liest.
   Deshalb jetzt zwei Breiten in einem Abschnitt: der Fließtext behält
   seine Lesespalte, Überschrift, Bild, Diagramm und Tabelle nehmen die
   volle Breite. Die Abschnitte mit eigenem Raster (Einführung, CTA)
   bleiben ausgenommen. */
.p3-in:not(.ein-in):not(.ctb-in){max-width:1280px}
.p3-in:not(.ein-in):not(.ctb-in)>p,
.p3-in:not(.ein-in):not(.ctb-in)>ul,
.p3-in:not(.ein-in):not(.ctb-in)>ol{max-width:74ch}
/* Die Frage trägt den Abschnitt: größer, mit Haarlinie darüber, damit
   beim Scrollen sofort sichtbar ist, wo eine neue Antwort beginnt. */
.p3-in:not(.ein-in):not(.ctb-in)>h2{
  max-width:20ch;font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;
  padding-top:clamp(18px,2.4vw,30px);border-top:1px solid rgba(143,228,246,.28);margin-bottom:clamp(18px,2vw,26px)}
.p3-in:not(.ein-in):not(.ctb-in)>h3{
  max-width:26ch;margin-top:clamp(34px,3.6vw,52px);padding-left:14px;border-left:2px solid #8FE4F6}
/* Der erste Absatz nach der Frage ist die Antwort. Er darf größer sein:
   wer nur ihn liest, hat die Frage beantwortet. */
.p3-in:not(.ein-in):not(.ctb-in)>h2+p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.66;color:#d7dbdf}
.p3-in:not(.ein-in):not(.ctb-in)>figure,
.p3-in:not(.ein-in):not(.ctb-in)>.tabwrap{max-width:none;margin-top:clamp(30px,3.4vw,48px)}
.p3-bild{border-radius:18px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.fluss{margin-left:0;margin-right:0}
.fluss svg{width:100%;height:auto;display:block}

/* Tabellen: die eigentliche Nutzlast dieser Seite. Kopfzeile bleibt beim
   Scrollen stehen, Zeilen heben sich beim Überfahren ab, und auf dem
   Handy scrollt nur die Tabelle, nicht die Seite. */
.tabwrap{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  padding:clamp(14px,1.6vw,24px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{font-size:15.5px;min-width:640px}
.tab caption{padding:2px 0 16px;color:#8FE4F6;opacity:.85}
.tab thead th{position:sticky;top:0;background:#0a0a0a;z-index:1;border-top:0;
  font-family:'DejaVu Sans Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8b939c;padding-bottom:14px}
.tab tbody tr{transition:background .18s}
.tab tbody tr:hover{background:rgba(143,228,246,.05)}
.tab td:first-child{color:#f2f4f6;font-weight:500}
.tab th,.tab td{padding:15px 14px}
@media(max-width:900px){
  .p3-in:not(.ein-in):not(.ctb-in)>h2{max-width:none}
  .p3-in:not(.ein-in):not(.ctb-in)>h3{max-width:none}
  .tab{min-width:560px;font-size:14.5px}