/* ==================================================================
   Theme NETZ — Feinschliff für kleine Bildschirme
   Als letzte CSS-Datei einbinden.
   ================================================================== */

/* ---------- Lange deutsche Wörter ----------
   „Wirtschaftlichkeitsbewertungen" oder „Regionalisierungsmittel"
   sprengen sonst auf 360px jede Spalte. */
html{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.display,.kicker,code,.mono,[class*="__meta"],[class*="__date"],
table,.tbl,.b-list__no,.fig b,.num{hyphens:none;-webkit-hyphens:none}
h1,h2,h3,h4,.display{overflow-wrap:break-word}
p,li,dd,figcaption,summary{overflow-wrap:anywhere}
/* In Tabellenzellen NICHT "anywhere" — das bricht mitten im Wort
   ("Steuerungsti/efe"). Nur an Wortgrenzen, notfalls mit Trennstrich. */
th,td{overflow-wrap:break-word;word-break:normal;hyphens:auto}

/* ---------- Kein Querscrollen ---------- */
html,body{max-width:100%;overflow-x:hidden}
.b-image--full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw}
@media(max-width:640px){
  .b-image--full{margin-left:-24px;margin-right:-24px;width:auto;max-width:none}
}

/* ---------- Tabellen im Fließtext ----------
   Die Hülle setzt theme.js beim Laden; das hier ist die Gestaltung. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0;
  border-radius:2px}
.tablewrap table{margin:0;min-width:600px}
.tablewrap::after{content:"";display:block}
@media(max-width:640px){
  .tablewrap{position:relative}
  .tablewrap table{font-size:.86rem}
  .tablewrap td,.tablewrap th{padding:10px 12px}
}

/* ---------- Tippziele mindestens 44px ---------- */
@media(pointer:coarse){
  .menu a,.chip,.pager a,.pager span,.soc a,.venn__tabs button,
  .b-faq summary,.tag,.cap__link,.pitem__go{min-height:44px}
  .chip{padding:12px 16px}
  .soc a{width:44px;height:44px}
  .b-faq summary{padding:20px 0}
  .crumb a{padding:6px 0;display:inline-block}
  .b-list__items li{padding:13px 0}
}

/* ---------- Schriftgrößen auf sehr schmalen Geräten ---------- */
@media(max-width:400px){
  :root{--body-size:16px}
  .d-xl{font-size:clamp(2rem,1.1rem + 4.6vw,2.6rem);font-variation-settings:'wdth' 112,'wght' 700}
  .d-l{font-size:1.62rem;font-variation-settings:'wdth' 108,'wght' 700}
  .d-m{font-size:1.24rem}
  .prose{font-size:1rem;line-height:1.68}
  .lede{font-size:1rem}
  .wrap,.lay,.lay__in{padding-left:18px;padding-right:18px}
  .lay__in{padding-left:0;padding-right:0}
  .article-cover{padding:0 18px;margin-top:-28px}
  .fig b{font-size:2rem}
}

/* ---------- Kopfbereiche auf dem Handy ---------- */
@media(max-width:640px){
  .phero{padding-top:104px}
  .hero{padding-top:96px;min-height:auto}
  .hero--block{padding-top:84px}
  .b-imagetext,.b-cta.contact{gap:24px}
  .b-quote{padding-left:18px}
  .lay{padding-left:20px;padding-right:20px}
}

/* ---------- Blogfilter scrollbar statt umbrechend ---------- */
@media(max-width:640px){
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-left:-20px;margin-right:-20px;
    padding-left:20px;padding-right:20px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
}

/* ---------- Sonstiges ---------- */
@media(max-width:640px){
  .b-gallery{gap:14px}
  .tags{gap:8px}
  .drawer a{font-size:1.5rem}
}

/* ---------- Nachtrag ---------- */
.venn__side{min-width:0}

/* ---------- Menüschalter und Schublade ---------- */
.navtoggle{display:none;margin-left:auto;width:44px;height:44px;background:none;
  border:0;cursor:pointer;padding:12px 9px;flex-direction:column;
  justify-content:space-between}
.navtoggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.top.light-txt .navtoggle span{background:var(--ink)}
.navtoggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:900px){.navtoggle{display:flex}}

.drawer{position:fixed;inset:0;z-index:65;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.drawer.open{opacity:1;visibility:visible}
.drawer ul{list-style:none;padding:0;margin:0;text-align:center}
.drawer li{margin:10px 0}
.drawer a{display:block;padding:10px 20px;min-height:44px;
  font-family:var(--sans);font-variation-settings:'wdth' 116,'wght' 700;
  font-size:clamp(1.5rem,1rem + 2.6vw,2.2rem);color:#fff;text-decoration:none;
  letter-spacing:-.02em;transition:color .25s}
.drawer a:hover{color:var(--b)}
@media(min-width:901px){.drawer{display:none}}