/* =====================================================================
   Website: Navigation zwischen den Themen einer Website.
   Ergänzt basis.css (dort nichts ändern). Farben und Schriften aus marke.css.
   Die Leiste und das Menü-Stück setzt bauen.pl nur auf normalen Seiten ein,
   nie auf Landingpages (/…/lp).
   ===================================================================== */

/* Themenleiste über der Kopfzeile: entfällt seit 30.09.2026 (Baustein ist leer) */
.themenleiste{display:none}

/* Handy-Menü: Gruppe „Mehr von …“ */
.sheet nav .menu-gruppe{margin:22px 0 2px;font:700 .72rem/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sheet nav .menu-gruppe ~ a{font-size:1.2rem;padding:12px 0;min-height:46px}
.sheet nav a[aria-current="page"]{color:var(--muted)}

/* Menü mit Themen (Daniel, 30.09.2026): Sparten nur noch hier, auch am Computer.
   Am Handy ganzer Bildschirm, ab 700 px eine Leiste von rechts. */
.sheet nav .menu-sub{margin:14px 0 0;font:600 .8rem/1.2 var(--font-body);color:var(--muted)}
.sheet nav a.mt{display:grid;justify-content:start;gap:3px;font-size:1.15rem;line-height:1.15;padding:10px 0;min-height:0}
.sheet nav a.mt span{text-align:left;font-size:.84rem;line-height:1.3}
.sheet nav a.mt-klein{font:600 .95rem/1.2 var(--font-body);text-transform:none}
@media (min-width:1100px){.menu-btn{display:grid}}
@media (min-width:700px){.sheet{left:auto;width:min(420px,100%);border-left:1px solid var(--line);box-shadow:0 0 0 100vmax rgba(20,23,29,.28),-12px 0 40px rgba(0,0,0,.12)}}

/* Schutz: lange Texte im Hero dürfen die Spalte nie breiter als den Bildschirm machen
   (sonst schneidet .hero{overflow:hidden} rechts ab). */
.hero .wrap > *{min-width:0}
.hero .kicker{width:auto}

/* Kopfzeile am Computer: Seit dem Menü-Knopf auch am Computer (30.09.2026) wird es eng.
   Menüpunkte und Knopf brechen nie um, zwischen 1100 und 1340 px rücken sie enger zusammen. */
nav.desk a,.top-cta{white-space:nowrap}
@media (min-width:1100px) and (max-width:1339px){nav.desk{gap:14px;font-size:.88rem}.top .wrap{gap:12px}.top-cta{padding:0 16px}}

/* Lange Wörter (z. B. „Risikolebensversicherung“) dürfen Karten bei großer Schrift oder 320 px nicht sprengen (30.09.2026) */
.why-card,.path,.c-item > span,.rbadge,.steps li > div{min-width:0}
.why-card h3,.path h3,.steps h3{overflow-wrap:break-word;hyphens:auto}
.share > *,.wa-grid > *{min-width:0}
/* Sehr schmale Bildschirme (oder große Schrift am Handy): Knöpfe etwas schlanker, Weiterempfehlen-Knöpfe untereinander */
@media (max-width:374px){.btn{padding:0 14px;gap:.45em}.share-box .btns .btn{flex:1 1 100%}}
@media (max-width:374px){
  main :is(h1,h2,h3,h4,strong,b){hyphens:auto;overflow-wrap:break-word}
  .share-box .btns .btn{font-size:.86rem;padding-inline:12px}
}
/* Leiste unten: Beschriftungen nie zweizeilig (Daniels Handy mit großer Schrift, 30.09.2026) */
.dock a{white-space:nowrap}
@media (max-width:374px){.dock{padding-inline:6px;gap:4px}.dock a{font-size:.68rem}.dock a.main{font-size:.72rem;padding-inline:4px}}
@media (max-width:374px){.share{padding:20px 14px}.share-box{padding:14px}}
/* „1 %“-Leiste (Omnio): Die große Zahl wird nie gestaucht, sonst liegt sie über dem Text */
.myth .wrap > strong{flex:none}
/* Kennzahlen im Hero: lange Wörter (Google-Rezensionen) brechen um statt herauszuragen */
.score > *{min-width:0}
.score span{overflow-wrap:break-word;hyphens:auto}