/* Fuß-Baum „Alle Seiten“ — Wilma 06.10.2026, Auftrag 458/459. Zusatz-Bedienung, die Kopf-Navigation bleibt unberührt. */
.pfadzeile .pf-baum{ appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; margin-right:.9em; flex:none;
  cursor:pointer; font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accent); white-space:nowrap }   /* wie „zurück“ und die Pfadlinks: keine Umrandung, Hover nur unterstrichen (Dieter 06.10.) */
.pfadzeile .pf-baum:hover{ text-decoration:underline }
.fb-dialog{ border:0; border-radius:var(--r-lg,18px); padding:0; width:min(1120px,94vw); max-width:94vw; max-height:88dvh;
  background:var(--surface,#fff); color:var(--text); box-shadow:0 30px 90px rgba(26,26,26,.35); overflow:hidden }
.fb-dialog[open]{ display:flex; flex-direction:column }
.fb-dialog::backdrop{ background:rgba(26,26,26,.5) }
.fb-kopf{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:clamp(1rem,3vw,1.4rem) clamp(1.1rem,3vw,1.6rem) .6rem; flex:0 0 auto }
.fb-kopf h3{ margin:0; font-family:var(--font-head); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.6rem) }
.fb-zu{ border:1px solid var(--border); background:transparent; color:var(--muted); font-size:14px; line-height:1; padding:5px 9px; border-radius:3px; cursor:pointer }
.fb-zu:hover{ color:var(--text); border-color:var(--muted) }
.fb-inhalt{ overflow:auto; padding:.4rem clamp(1.1rem,3vw,1.6rem) clamp(1rem,3vw,1.5rem); overscroll-behavior:contain }
.fb-raster{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:start; margin:0; padding:0; list-style:none }
.fb-bereich{ background:var(--surface-2,#F8F6F3); border:1px solid var(--border); border-radius:var(--r-md,10px); min-width:0 }
.fb-bereich > summary{ font-family:var(--font); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark,#7D6038); padding:12px 14px }
.fb-dialog summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px }
.fb-dialog summary::-webkit-details-marker{ display:none }
.fb-dialog summary::after{ content:"›"; transition:transform .15s; color:var(--accent) }
.fb-dialog details[open] > summary::after{ transform:rotate(90deg) }
.fb-dialog summary:focus-visible,.fb-dialog a:focus-visible{ outline:2px solid var(--accent-dark,#7D6038); outline-offset:2px; border-radius:3px }
.fb-liste{ list-style:none; margin:0; padding:0 14px 12px }
.fb-liste li{ margin:0; padding:0 }
.fb-dialog a{ color:var(--text); text-decoration:none }
.fb-blatt,.fb-ziel{ display:block; padding:6px 0; font-size:.92rem; line-height:1.35 }
.fb-blatt:hover,.fb-ziel:hover{ text-decoration:underline }
.fb-ziel{ color:var(--accent-dark,#7D6038) !important; font-style:italic }
.fb-ast > summary{ padding:6px 0; font-size:.92rem; color:var(--text) }
.fb-ast > .fb-liste{ padding:0 0 4px 14px; border-left:1px solid var(--border); margin-left:4px }
.fb-kanaele{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--border) }
.fb-kanaele h4{ margin:0 0 .5rem; font-family:var(--font); font-weight:600; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-dark,#7D6038) }
.fb-chips{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; list-style:none }
.fb-chips a{ display:inline-block; padding:4px 0; font-size:.85rem }
.fb-chips a:hover{ text-decoration:underline }
@media (max-width:1000px){ .fb-raster{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){
  .fb-dialog{ width:100vw; max-width:100vw; max-height:92dvh; margin:auto 0 0 0; border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0 }
  .fb-raster{ grid-template-columns:minmax(0,1fr) }
}

/* Lange Pfade (Dieter 06.10.): Knopf steht links hinter „zurück“ und bleibt immer sichtbar; auch über 1100 px gibt der Pfad
   (mit Auslassungspunkten) und der Vorschlag nach, nicht die Anordnung — gleiche Rechnung wie stil.css unter 1100 px. */
@media (min-width:1101px){
  .buehne.aktiv > .naechste-vorschlag{ max-width:20vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:1.5em }
  .buehne.aktiv > .pfadzeile{ max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:1.5em }
}

/* 10 px Luft unter dem Fuß (Dieter 06.10.): Pfadzeile und Vorschlag rücken hoch, Seitenwerkzeuge (Handy) und Bühnenrand mit. */
.buehne.aktiv > .pfadzeile, .buehne.aktiv > .naechste-vorschlag{ bottom:calc(clamp(10px,2.2dvh,20px) + 10px) }
.buehne.aktiv{ padding-bottom:calc(var(--pfadraum) + 10px) }
@media (max-width:640px){
  .seitenwerkzeuge{ bottom:calc(clamp(10px,2.2dvh,20px) + 1.7em + 10px) }
  .buehne.aktiv{ padding-bottom:calc(var(--pfadraum) + 2.8em + 10px) }
}