/* ============================================================
   ib-jk.de — Gestaltung
   Ingenieurbüro IB-JK · Fachplanung Gebäudeautomation KG 480
   Drei Farbmodi: hell (Vorgabe), dunkel, Automatik (Systemeinstellung)
   ============================================================ */

/* ---------- Farbwerte: heller Modus ---------- */
:root{
  --papier:#f9f8f5;
  --flaeche:#ffffff;
  --ink:#1d2126;
  --mut:#666d75;
  --haar:#d9d6cf;
  --haar-stark:#1d2126;
  --blau:#17457c;
  --blau-flach:#eef2f7;
  --feld:#b56a10;
  --mgmt:#1d6e50;
  --panel:#14171b;
  --panel-ink:#dfe3e8;
  --panel-mut:#8d97a2;
  --panel-haar:#2a2f36;
  --panel-akz:#ffffff;
  --schatten:none;
  --untergrund:#dcdbd6;
}

/* ---------- Automatik: dunkel, wenn das System es will ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#14171c;
    --flaeche:#1c2028;
    --ink:#e3e7ea;
    --mut:#98a0a8;
    --haar:#333942;
    --haar-stark:#5b636c;
    --blau:#7fb0e8;
    --blau-flach:#1c2733;
    --feld:#e09a45;
    --mgmt:#5cbf96;
    --panel:#262b33;
    --panel-ink:#e3e7ea;
    --panel-mut:#8d97a2;
    --panel-haar:#3a4049;
    --panel-akz:#ffffff;
    --untergrund:#000000;
  }
}

/* ---------- Feste Wahl: dunkel ---------- */
:root[data-theme="dark"]{
  --papier:#14171c;
  --flaeche:#1c2028;
  --ink:#e3e7ea;
  --mut:#98a0a8;
  --haar:#333942;
  --haar-stark:#5b636c;
  --blau:#7fb0e8;
  --blau-flach:#1c2733;
  --feld:#e09a45;
  --mgmt:#5cbf96;
  --panel:#262b33;
  --panel-ink:#e3e7ea;
  --panel-mut:#8d97a2;
  --panel-haar:#3a4049;
  --panel-akz:#ffffff;
  --untergrund:#000000;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--papier);
  color:var(--ink);
  font:15.5px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.din{font-family:Bahnschrift,"DIN Alternate","Segoe UI Semibold","Segoe UI",sans-serif}
.mono{font-family:Consolas,"Cascadia Mono","Courier New",monospace}

/* Sprungmarke für Tastatur und Screenreader */
.sprung{position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;padding:10px 16px;z-index:99}
.sprung:focus{left:8px;top:8px}

/* Sichtbare Fokusmarkierung für die Tastaturbedienung.
   Der Standardring des Browsers geht auf der dunklen Markenspalte unter. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blau);
  outline-offset:2px;
  border-radius:1px;
}
aside a:focus-visible,.menuknopf:focus-visible,aside .modus button:focus-visible{
  outline-color:#ffffff;
}

/* ============ linke Markenspalte ============ */
aside{
  flex:0 0 330px;
  background:var(--panel);
  color:var(--panel-ink);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  padding:34px 32px 24px;
  /* Die Kante trennt Markenspalte und Inhalt zusätzlich zur Fläche -
     im Dunkelmodus tragen Flächenunterschiede allein zu wenig. */
  border-right:1px solid var(--haar);
}
aside .marke{display:block}
aside .marke img{width:100%;max-width:242px;height:auto;display:block}
aside .rolle{margin-top:24px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-mut)}
aside .claim{margin-top:10px;font-size:21px;line-height:1.35;font-weight:600}

aside nav{margin-top:36px;border-top:1px solid var(--panel-haar)}
aside nav a{
  display:flex;gap:14px;align-items:center;
  padding:10px 2px;border-bottom:1px solid var(--panel-haar);
  font-size:14.5px;color:#b7bec6;
}
aside nav a .n{color:#77828e;font-size:12px}
aside nav a:hover{color:#fff;padding-left:6px;transition:padding .12s ease}
aside nav a[aria-current="page"]{color:#fff;font-weight:600}
aside nav a[aria-current="page"] .n{color:var(--panel-akz)}

aside .unten{margin-top:auto;padding-top:22px;font-size:12.5px;color:var(--panel-mut);line-height:1.7}
aside .unten b{color:var(--panel-ink);font-weight:600}
aside .normen{margin-top:12px;padding-top:10px;border-top:1px solid var(--panel-haar);font-size:11px;letter-spacing:.05em;color:#77828e}

/* Farbmodus-Umschalter */
.modus{margin-top:16px;display:flex;gap:0;border:1px solid var(--panel-haar);border-radius:3px;overflow:hidden}
.modus button{
  flex:1;background:none;border:none;border-right:1px solid var(--panel-haar);
  color:var(--panel-mut);font:inherit;font-size:11.5px;letter-spacing:.06em;
  padding:7px 4px;cursor:pointer;text-transform:uppercase;
}
.modus button:last-child{border-right:none}
.modus button:hover{color:#fff}
.modus button[aria-pressed="true"]{background:var(--panel-haar);color:#fff}

/* ============ Inhaltsspalte ============ */
/* Der Inhalt hängt nicht am linken Rand, sondern sitzt mittig im Raum
   neben der Markenspalte. Auf 3440 px blieben sonst 61 % der Fläche leer,
   und der Text klebte in der linken Ecke. */
/* Spalte als Flexsaeule: die Fusszeile wird per margin-top:auto ans
   Seitenende gedrueckt - auf kurzen Seiten (z. B. Wissen-Ueberblick)
   hing sie sonst mitten im Bild (Jens' Rueckmeldung 20.08.2026). */
main{flex:1;min-width:0;display:flex;flex-direction:column}
main > *{width:100%}
.sekt,.fuss{max-width:1080px;margin-left:auto;margin-right:auto}
.sekt{padding:60px 56px 64px;border-bottom:1px solid var(--haar)}
.sekt:last-of-type{border-bottom:none}
.sektkopf{display:flex;align-items:baseline;gap:18px;margin-bottom:30px}
.sektkopf .nr{font-size:12.5px;color:var(--mut)}
.sektkopf h1,.sektkopf h2{font-size:26px;font-weight:600;letter-spacing:.01em}
.sektkopf .fuellstrich{flex:1;height:1px;background:var(--haar);align-self:center}

h3{font-size:16.5px;font-weight:600}
/* Zeilenlänge: 40em ergibt rund 78 Zeichen je Zeile. Darüber
   verliert das Auge beim Zeilenwechsel die Spur (gemessen waren es 92). */
p.text{max-width:40em;margin-bottom:14px}
p.text:last-child{margin-bottom:0}
p.text b{font-weight:600}
.vorsatz{font-size:17px;color:var(--mut);max-width:38em;margin-bottom:22px}
.hinweiszeile{font-size:13px;color:var(--mut);margin-top:10px}

/* Kennzahlenleiste */
.kennzahlen{display:flex;border:1px solid var(--haar);margin-top:26px;flex-wrap:wrap;background:var(--flaeche)}
.kz{flex:1 1 150px;padding:15px 18px;border-right:1px solid var(--haar)}
.kz:last-child{border-right:none}
.kz b{display:block;font-size:19px;font-weight:600;color:var(--blau)}
.kz span{font-size:12.5px;color:var(--mut)}

/* Tabellen im Planungsstil */
table.tab{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--haar);font-size:14px}
table.tab caption{text-align:left;font-size:12.5px;color:var(--mut);padding-bottom:8px}
table.tab th{
  text-align:left;padding:10px 14px;border-bottom:2px solid var(--haar-stark);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600;
}
table.tab td{padding:10px 14px;border-bottom:1px solid var(--haar);vertical-align:top}
table.tab tr:last-child td{border-bottom:none}
table.tab td.nr{white-space:nowrap;color:var(--blau);font-weight:600;width:64px}
table.tab td.name{font-weight:600;width:230px}
table.tab td.was{color:var(--mut)}
table.tab tbody tr:hover td{background:var(--blau-flach)}
.tabellenfuss{font-size:13px;color:var(--mut);margin-top:10px;max-width:46em}

/* Platzhalter für eigene Unterlagen */
.platzhalter{
  border:1px dashed var(--haar-stark);
  background:var(--flaeche);
  padding:34px 26px;text-align:center;color:var(--mut);
}
.platzhalter .marke-ph{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau)}
.platzhalter b{display:block;margin-top:8px;font-size:16px;color:var(--ink);font-weight:600}
.platzhalter p{margin:8px auto 0;max-width:34em;font-size:13.5px}

/* Planauszug: Zeichnung auf hellem Blatt, auch im Dunkelmodus.
   Ein Plan ist auf Papier gezeichnet - eingefärbt oder invertiert
   würde er falsch aussehen. */
figure.plan{margin:0}
/* Mehrere Plaene untereinander brauchen Luft. Als Geschwister-Regel,
   damit sie in beiden Fassungen greift - WordPress setzt die Bloecke
   direkt nebeneinander, ohne eigenen Abstand. */
figure.plan + figure.plan{margin-top:26px}
.planblatt{
  background:#ffffff;
  border:1px solid var(--haar);
  padding:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.planblatt img{
  display:block;
  width:100%;
  /* Mindestbreite je Plan: ein Spaltenwerk braucht mehr als ein Schema.
     Wird im HTML als --planbreite gesetzt (siehe plan_html in bauen.py). */
  min-width:var(--planbreite,760px);
  height:auto;
}
.planblatt a{display:block}
.planblatt a:focus-visible{outline-offset:-2px}
figure.plan figcaption{
  margin-top:9px;font-size:13px;color:var(--mut);max-width:52em;
}
@media print{
  .planblatt{overflow:visible;border-color:#000}
  .planblatt img{min-width:0}
}

/* Bildschau (Lightbox) — von theme.js erzeugt, im Markup steht sie nicht.
   Bewusst dunkel in BEIDEN Farbmodi: Ein Planauszug ist eine Strichzeichnung
   auf Weiss, die vor dunklem Grund am besten steht — wie ein Leuchttisch. */
.bildschau{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(8,10,13,.88);
  cursor:zoom-out;
}
.bildschau[hidden]{display:none}
.bildschau img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  background:#fff;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  cursor:default;
}
.bildschau-zu{
  position:absolute;top:12px;right:16px;
  width:44px;height:44px;            /* Fingergroesse, nicht kleiner */
  display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;
  color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);border-radius:4px;
  cursor:pointer;
}
.bildschau-zu:hover{background:rgba(255,255,255,.22)}
.bildschau-zu:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media print{
  .bildschau{display:none !important}
}

/* Leistungsübersicht */
.leistungsliste{border-top:1px solid var(--haar-stark)}
.lzeile{display:grid;grid-template-columns:52px 1fr 1.35fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--haar);align-items:baseline}
.lzeile .znr{font-weight:600;color:var(--mut);font-size:13px}
.lzeile h3{font-size:16.5px}
.lzeile p{color:var(--mut);font-size:14.5px}
@media(max-width:760px){.lzeile{grid-template-columns:40px 1fr;gap:12px}.lzeile p{grid-column:2}}

/* Unternavigation (HOAI-Bereich) */
.unternav{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--haar);background:var(--flaeche);margin-bottom:28px}
.unternav a{padding:9px 16px;font-size:13.5px;border-right:1px solid var(--haar);color:var(--mut)}
.unternav a:last-child{border-right:none}
.unternav a:hover{background:var(--blau-flach);color:var(--ink)}
.unternav a[aria-current="page"]{background:var(--blau);color:#fff;font-weight:600}

/* Honorartafel: viele Zahlen, deshalb enger und rechtsbündig */
table.tafel{font-size:13.5px}
table.tafel td,table.tafel th{padding:7px 12px;text-align:right}
table.tafel td:first-child,table.tafel th:first-child{text-align:left;font-weight:600;color:var(--blau)}
table.tafel th{text-align:center}
table.tafel .gruppe{text-align:center;border-left:1px solid var(--haar)}
table.tafel td.zonenstart{border-left:1px solid var(--haar)}
/* Tabellen rollen waagerecht, statt am Rand abgeschnitten zu werden */
.tabellenrolle{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:2px}
.tabellenrolle table{margin-bottom:0}
table.tab td,table.tab th{overflow-wrap:break-word;hyphens:auto}

/* Anlage 15: Leistungsphasen als aufklappbare Blöcke */
.lph-block{border:1px solid var(--haar);background:var(--flaeche);margin-bottom:12px}
.lph-block > summary{padding:13px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:16px;display:flex;gap:14px;align-items:baseline}
.lph-block > summary::-webkit-details-marker{display:none}
.lph-block > summary::after{content:"+";margin-left:auto;color:var(--blau);font-size:19px;line-height:1}
.lph-block[open] > summary::after{content:"–"}
.lph-block > summary:hover{background:var(--blau-flach)}
.lph-block .kennung{color:var(--blau);font-size:13px}
.lph-block .rumpf{padding:6px 18px 18px;border-top:1px solid var(--haar)}
.lph-block h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:16px 0 8px;font-weight:600}
.lph-block ol,.lph-block ul{margin:0 0 0 22px}
.lph-block li{margin-bottom:6px;font-size:14.5px}
.lph-block ul{list-style:none;margin-left:0}
.lph-block ul li{padding-left:18px;position:relative;color:var(--mut)}
.lph-block ul li::before{content:"–";position:absolute;left:0;color:var(--blau)}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;background:var(--haar);border:1px solid var(--haar)}
.person{background:var(--flaeche);padding-bottom:16px}
.person .foto{
  aspect-ratio:1/1.15;background:var(--blau-flach);border-bottom:1px solid var(--haar);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--mut);
}
.person .foto b{font-size:28px;font-weight:600;color:var(--haar-stark)}
.person .foto span{font-size:11px;letter-spacing:.06em}
.person .foto img{width:100%;height:100%;object-fit:cover}
.person .pdaten{padding:14px 16px 0}
/* Klassen statt Elementnamen: Im WordPress sind das Absatz-Bloecke,
   damit Jens die Karten ohne HTML bearbeiten kann. Beide Fassungen
   nutzen so dieselben Regeln. */
.person .pdaten .pname{display:block;font-size:15.5px;font-weight:600}
.person .pdaten .prolle{display:block;font-style:normal;font-size:12.5px;color:var(--blau);margin-top:3px}
.person .pdaten .ptext{font-size:12.5px;color:var(--mut);margin-top:8px}
/* Das Foto ist im WordPress ein Bild-Block (<figure>) - dessen
   Aussenabstand wuerde die Karte auseinanderziehen. */
.person .foto{margin:0}

/* Referenzen */
.referenz{border:1px solid var(--haar);background:var(--flaeche);margin-bottom:14px}
.referenz > summary{
  padding:14px 18px;cursor:pointer;display:flex;gap:16px;align-items:baseline;
  list-style:none;font-weight:600;font-size:16px;
}
.referenz > summary::-webkit-details-marker{display:none}
.referenz > summary::after{content:"+";margin-left:auto;color:var(--blau);font-size:19px;line-height:1}
.referenz[open] > summary::after{content:"–"}
.referenz > summary:hover{background:var(--blau-flach)}
.referenz .ort{font-weight:400;font-size:13px;color:var(--mut)}
.referenz .rumpf{padding:4px 18px 20px;border-top:1px solid var(--haar)}
.referenz .rumpf p{max-width:52em;margin:12px 0;font-size:14.5px}
.rmeta{display:flex;gap:28px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.rmeta div b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600;margin-bottom:4px}
.kg-liste{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.kg{border:1px solid var(--haar);padding:2px 7px;font-size:12px;color:var(--mut)}
.kg.betont{border-color:var(--blau);color:var(--blau);font-weight:600}
.lph-liste{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.lph-marke{border:1px solid var(--blau);color:var(--blau);padding:2px 8px;font-size:12px;font-weight:600}

/* Beiträge */
.beitraege{background:var(--flaeche);border:1px solid var(--haar)}
.beitrag{display:flex;gap:22px;padding:15px 18px;border-bottom:1px solid var(--haar);align-items:baseline}
.beitrag:last-child{border-bottom:none}
.beitrag time{flex:0 0 92px;font-size:12.5px;color:var(--mut)}
.beitrag h3{font-size:15.5px}
.beitrag p{font-size:13.5px;color:var(--mut);margin-top:3px;max-width:46em}
.beitrag:hover{background:var(--blau-flach)}
/* Beitragsbild: hoechstens halbe Spaltenbreite, damit die Chronik eine
   Chronik bleibt und nicht zur Bildergalerie wird. */
.beitragsbild{margin-top:11px;max-width:520px}
.beitragsbild img{display:block;width:100%;height:auto;
  border:1px solid var(--haar)}
@media (max-width:700px){
  .beitrag{flex-direction:column;gap:4px}
  .beitrag time{flex:none}
}

/* Verweisknopf */
.knopf{
  display:inline-block;margin-top:18px;border:1px solid var(--haar-stark);
  padding:10px 22px;font-size:14px;font-weight:600;background:var(--flaeche);
}
.knopf:hover{background:var(--blau);border-color:var(--blau);color:#fff}
.knopf .mono{color:var(--mut);margin-right:8px;font-size:12.5px}
.knopf:hover .mono{color:rgba(255,255,255,.7)}
.knopfreihe{display:flex;gap:10px;flex-wrap:wrap}

/* Formular */
form.anfrage{max-width:44em;margin-top:8px}
form.anfrage .feld{margin-bottom:16px}
form.anfrage label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
form.anfrage input,form.anfrage select,form.anfrage textarea{
  width:100%;padding:10px 12px;border:1px solid var(--haar);background:var(--flaeche);
  color:var(--ink);font:inherit;font-size:14.5px;border-radius:0;
}
form.anfrage input:focus,form.anfrage select:focus,form.anfrage textarea:focus{outline:2px solid var(--blau);outline-offset:-2px}
form.anfrage textarea{min-height:130px;resize:vertical}
form.anfrage .zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){form.anfrage .zwei{grid-template-columns:1fr}}
form.anfrage .honig{position:absolute;left:-9999px}
form.anfrage button{
  border:1px solid var(--blau);background:var(--blau);color:#fff;
  font:inherit;font-weight:600;font-size:14.5px;padding:11px 28px;cursor:pointer;
}
form.anfrage button:hover{background:var(--ink);border-color:var(--ink)}
.pflichtnote{font-size:12.5px;color:var(--mut);margin-top:12px}

/* Kontaktangaben */
.kontaktgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px}
.kontaktgitter h3{margin-bottom:8px}
.kontaktgitter p{color:var(--mut);line-height:1.8;font-size:14.5px}
.kontaktgitter b{color:var(--ink)}

/* Rechtstexte */
.recht{max-width:46em}
.recht h2{font-size:19px;font-weight:600;margin:32px 0 10px}
.recht h3{font-size:15.5px;margin:22px 0 8px}
.recht p{margin-bottom:12px}
.recht ul{margin:0 0 14px 20px}
.recht li{margin-bottom:5px}
.recht a{color:var(--blau);text-decoration:underline}

/* AGB: nummerierte Regelungen je Abschnitt */
.recht ul.agb{list-style:none;margin:0 0 4px;counter-reset:regel}
.recht ul.agb li{
  position:relative;padding-left:34px;margin-bottom:10px;counter-increment:regel;
}
.recht ul.agb li::before{
  content:counter(regel) ".";
  position:absolute;left:0;top:0;
  color:var(--blau);font-weight:600;font-size:13.5px;
  font-variant-numeric:tabular-nums;
}
.recht .agb-stand{
  margin-top:26px;padding-top:12px;border-top:1px solid var(--haar);
  font-size:13px;color:var(--mut);
}

/* Fußzeile */
.fuss{margin-top:auto;padding:22px 56px 30px;font-size:12.5px;color:var(--mut);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.fuss a:hover{color:var(--blau)}
.fuss .rechts{margin-left:auto}

/* ============ große und sehr breite Bildschirme ============
   Das Grundproblem breiter Monitore: Der Inhalt braucht rund 1300 px, alles
   Übrige bleibt leer — egal, ob man ihn links anlegt oder mittig stellt.
   Statt die Leere zu verschieben, wird sie hier erklärt: Die Seite steht als
   BLATT auf einer abgesetzten Unterlage, wie eine Planunterlage auf dem Tisch.
   Markenspalte und Inhalt bleiben dabei beieinander.

   Vergrößert wird maßvoll: Die Textspalten sind in em bemessen und wachsen mit
   der Schrift mit, sodass es auf jeder Bildschirmbreite rund 80 Zeichen je
   Zeile bleiben. */
@media(min-width:1700px){
  html{background:var(--untergrund)}
  /* Die Blattbreite ist auf den Inhalt zugeschnitten (Markenspalte + Innenrand
     + rund 1150 px Inhalt). Ein breiteres Blatt zöge Listen und Tabellen
     auseinander - Titel und Beschreibung stünden dann weit voneinander weg. */
  body{
    max-width:1640px;
    margin-left:auto;margin-right:auto;
    font-size:16.5px;
    box-shadow:0 0 0 1px var(--haar), 0 18px 60px rgba(0,0,0,.22);
  }
  .sekt,.fuss{max-width:none}
  aside{flex-basis:360px;padding:38px 36px 26px}
  aside .marke img{max-width:262px}
  aside .claim{font-size:22.5px}
  aside nav a{font-size:15px}
  .sekt{padding:68px 60px 72px}
  .sektkopf h1,.sektkopf h2{font-size:28px}
  .vorsatz{font-size:18px}
  /* Titelspalte enger führen, damit die Beschreibung nicht abdriftet */
  .lzeile{grid-template-columns:56px minmax(200px,.72fr) 1.5fr}
}
@media(min-width:2400px){
  body{max-width:1780px;font-size:17.5px}
  aside{flex-basis:390px}
  aside .marke img{max-width:286px}
  aside .claim{font-size:24px}
  .sekt{padding:74px 66px 78px}
  .sektkopf h1,.sektkopf h2{font-size:30px}
  .vorsatz{font-size:19px}
  .kz b{font-size:21px}
}

/* Menüknopf und Fußkontakt gehören zur schmalen Ansicht */
.menuknopf{display:none}
.fusskontakt{display:none}

/* ============ schmale Bildschirme ============
   Untereinander gestapelt stand die komplette Markenspalte vor dem Inhalt:
   Der Text begann erst nach 914 px — beim Laden war auf einem Handy kein
   einziges Wort Inhalt zu sehen. Deshalb wird die Spalte hier zur kompakten
   Kopfzeile: Logo und Menüknopf in einer Zeile, Navigation eingeklappt,
   Kontaktblock und Farbwahl wandern ans Seitenende. */
@media(max-width:960px){
  body{display:block}
  aside{
    position:static;height:auto;flex:none;
    padding:14px 24px 16px;
    border-right:none;border-bottom:1px solid var(--haar);
  }
  .markenzeile{display:flex;align-items:center;justify-content:space-between;gap:18px}
  aside .marke img{max-width:186px}
  aside .rolle{display:none}
  aside .claim{margin-top:12px;font-size:17px;line-height:1.3}

  .menuknopf{
    display:inline-flex;align-items:center;gap:9px;flex:none;
    background:none;border:1px solid var(--panel-haar);border-radius:3px;
    color:var(--panel-ink);font:inherit;font-size:13.5px;
    letter-spacing:.06em;text-transform:uppercase;
    padding:9px 14px;cursor:pointer;
  }
  .menuknopf .balken{
    position:relative;display:block;width:16px;height:2px;
    background:currentColor;transition:background .12s;
  }
  .menuknopf .balken::before,.menuknopf .balken::after{
    content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
  }
  .menuknopf .balken::before{top:-5px}
  .menuknopf .balken::after{top:5px}

  aside nav{margin-top:16px;max-height:66vh;overflow-y:auto}
  aside[data-menu="zu"] nav{display:none}
  aside .unten{display:none}

  main{max-width:none}
  .sekt,.fuss{max-width:none;padding-left:24px;padding-right:24px}
  .sekt{padding-top:40px;padding-bottom:44px}

  /* Kontakt und Farbwahl am Seitenende statt vor dem Inhalt */
  .fusskontakt{
    display:block;padding:26px 24px 4px;
    border-top:1px solid var(--haar);font-size:13.5px;color:var(--mut);
  }
  .fusskontakt b{color:var(--ink)}
  .fusskontakt a{color:var(--blau)}
  .fusskontakt .modus{
    margin-top:16px;max-width:280px;border-color:var(--haar);
  }
  .fusskontakt .modus button{
    border-right-color:var(--haar);color:var(--mut);
  }
  .fusskontakt .modus button:hover{color:var(--ink)}
  .fusskontakt .modus button[aria-pressed="true"]{
    background:var(--blau);color:#fff;
  }
}

/* ============ Druckausgabe ============
   Für ein Ingenieurbüro realistisch: Honorartafel, Leistungsbild oder die
   Referenzliste werden ausgedruckt oder als PDF an Bauherren weitergegeben.
   Deshalb: Navigation und Bedienelemente raus, Papier weiß, Rahmen bleiben. */
@media print{
  html,body{
    background:#ffffff !important;
    color:#000000 !important;
    display:block !important;
    max-width:none !important;
    box-shadow:none !important;
    font-size:10.5pt;
  }
  /* Bedienelemente haben auf Papier nichts zu suchen */
  aside nav,.menuknopf,.modus,.unternav,.sprung,.knopf,.knopfreihe,
  .fuss,.hinweiszeile{display:none !important}

  /* Markenspalte wird zum schlichten Briefkopf */
  aside{
    position:static !important;height:auto !important;
    background:none !important;color:#000 !important;
    border:none !important;border-bottom:1.5pt solid #000 !important;
    padding:0 0 8pt !important;margin-bottom:14pt !important;
    display:block !important;
  }
  aside .marke img{max-width:150pt !important;filter:invert(1)}
  aside .claim{font-size:11pt !important;margin-top:6pt !important}
  aside .rolle{display:block !important;color:#000 !important}
  aside .unten{display:block !important;margin-top:8pt !important;color:#000 !important}
  aside .normen{color:#000 !important}
  .fusskontakt{display:block !important;border:none !important;color:#000 !important}
  .fusskontakt .modus{display:none !important}

  main{max-width:none !important}
  .sekt{padding:0 0 14pt !important;border-bottom:none !important;max-width:none !important}
  .sektkopf{border-bottom:.5pt solid #000;padding-bottom:4pt}
  .sektkopf h1,.sektkopf h2{font-size:15pt !important}
  p.text,.vorsatz{max-width:none !important;color:#000 !important;font-size:10.5pt !important}

  /* Tabellen: Rahmen behalten, Kopfzeile auf Folgeseiten wiederholen */
  .tabellenrolle{overflow:visible !important}
  table.tab{border:.5pt solid #000 !important;font-size:9pt !important;page-break-inside:auto}
  table.tab thead{display:table-header-group}
  table.tab th,table.tab td{
    border-color:#000 !important;color:#000 !important;
    background:none !important;padding:4pt 6pt !important;
  }
  table.tab tbody tr{page-break-inside:avoid}

  /* Aufgeklappte Inhalte auch drucken (theme.js öffnet sie vor dem Druck) */
  details{page-break-inside:avoid;border-color:#000 !important}
  details > summary::after{content:"" !important}

  .kennzahlen,.person,.beitraege,.platzhalter{
    border-color:#000 !important;background:none !important;
    page-break-inside:avoid;
  }
  .kz b,.kz span,.person .pdaten .prolle{color:#000 !important}
  .person .foto{display:none !important}

  /* Adresse der Website unter jede Ausdruckseite */
  .sekt:last-of-type::after{
    content:"ib-jk.de · Ingenieurbüro IB-JK · Schwanenstr. 14 · 64739 Höchst i. Odw. · +49 6163 9138406";
    display:block;margin-top:16pt;padding-top:6pt;
    border-top:.5pt solid #000;font-size:8pt;
  }
  a{color:#000 !important;text-decoration:none}
}

/* Handy: Tabellen (16.10.2026, Jens: „die Tabellen ragen über den Bildschirm
   raus"). Feste Spaltenbreiten und 14 px Innenabstand sprengten 327 px.
   Rollhinweis: theme.js setzt .rollt/.rollt-ende auf .tabellenrolle. */
@media(max-width:700px){
  table.tab{font-size:13.5px}
  table.tab th{padding:8px 9px;letter-spacing:.05em}
  table.tab td{padding:8px 9px;overflow-wrap:break-word;hyphens:auto}
  table.tab td.nr{width:auto}
  table.tab td.name{width:auto}
}
.tabellenrolle{position:relative}
.tabellenrolle.rollt::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.22),transparent);transition:opacity .2s;
}
.tabellenrolle.rollt.rollt-ende::after{opacity:0}