/* Ergaenzungen, die auf nabholz.de per Skript (n100.js) nachgeladen werden:
   das blaue Kopfband, das Jubilaeumssignet neben dem Logo. Hier stehen sie
   fest im Blatt, weil das neue Frontend sie direkt ausgibt. */

.nb-band{background:#00457A;color:#fff;font-size:13.5px;line-height:1.3;position:relative;z-index:310;font-family:inherit}
.nb-band .spur{max-width:1200px;margin:0 auto;padding:9px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nb-band .fakten{opacity:.9}
.nb-band .claim{white-space:nowrap}
.nb-band .claim i{font-style:normal;color:#FDC300;font-weight:800}
header .logo{display:flex!important;align-items:center;width:auto!important}
.nb-100{display:inline-block;height:32px;width:auto;margin-left:14px;vertical-align:middle}
@media (max-width:860px){.nb-band .claim{display:none}.nb-band .spur{justify-content:center;padding:7px 16px;font-size:12.5px}.nb-100{height:26px;margin-left:10px}}

/* Das mobile Menue klappt auf nabholz.de per Skript auf. Dieselbe Mechanik,
   nur dass die Schalter hier im Markup stehen. */
header.header-mobile nav .nav-inner ul li.sub > a > .sub-switch{cursor:pointer}
header.header-mobile nav .nav-inner li.sub.sub-opened > ul.lvl-1,
header.header-mobile nav .nav-inner li.sub.sub-opened > ul.lvl-2{display:block}

/* Fliesstext ausserhalb der TYPO3-Bausteine: dieselbe Optik wie .ce-bodytext */
.n100 .n100-fliess h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#00457A;margin:38px 0 18px;letter-spacing:-.01em}
.n100 .n100-fliess h2:first-child{margin-top:0}
.n100 .n100-fliess h3{font-size:clamp(19px,2.1vw,23px);font-weight:800;color:#00457A;margin:28px 0 12px}
.n100 .n100-fliess p{font-size:17.5px;line-height:1.68;color:#4A5560;max-width:78ch;margin:0 0 16px}
.n100 .n100-fliess a{color:#0064AF;font-weight:700}
.n100 .n100-fliess ul,.n100 .n100-fliess ol{margin:0 0 18px 22px;padding:0}
.n100 .n100-fliess li{font-size:17px;line-height:1.6;color:#4A5560;margin:0 0 8px}
.n100 .n100-fliess table{width:100%;border-collapse:collapse;margin:0 0 20px}
.n100 .n100-fliess td,.n100 .n100-fliess th{border:1px solid #D9E2E9;padding:9px 12px;font-size:16px;text-align:left}

/* Frage-Antwort-Bausteine */
.n100 .n100-fa{margin-top:30px;border-top:1px solid #E3EAF0}
.n100 .n100-fa details{border-bottom:1px solid #E3EAF0;padding:16px 0}
.n100 .n100-fa summary{cursor:pointer;font-weight:800;font-size:17.5px;color:#00457A;list-style:none}
.n100 .n100-fa summary::-webkit-details-marker{display:none}
.n100 .n100-fa summary:before{content:"+";display:inline-block;width:20px;color:#0064AF}
.n100 .n100-fa details[open] summary:before{content:"–"}
.n100 .n100-fa details > *:not(summary){margin-top:10px;padding-left:20px}
.n100 .n100-fa p{font-size:16.5px;color:#4A5560;line-height:1.6;margin:0 0 8px}

/* Bilderstrecken ausserhalb der Filialseiten */
.n100 .n100-wand{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:34px}
.n100 .n100-wand figure{margin:0;overflow:hidden;border-radius:3px;background:#00365C}
.n100 .n100-wand img{width:100%;height:220px;object-fit:cover;display:block}

/* Personenkarten ausserhalb der Filialseiten */
.n100 .n100-personen{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:20px;margin-top:40px}

/* Beitragsliste */
.n100 .n100-beitraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;margin-top:34px}
.n100 .n100-datum{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0064AF}

/* Filialuebersicht */
.n100 .n100-filialen{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:34px}
.n100 .n100-filkarte{background:#fff;border:1px solid #D9E2E9;border-top:3px solid #FDC300;border-radius:3px;padding:22px 20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;transition:border-color .15s ease,transform .15s ease}
.n100 .n100-filkarte:hover{border-color:#0064AF;transform:translateY(-2px)}
.n100 .n100-filkarte b{font-size:19px;font-weight:800;color:#00457A}
.n100 .n100-filkarte span{font-size:16px;color:#5A6774;line-height:1.45}
.n100 .n100-filkarte .nr{font-weight:800;color:#0064AF}

/* Karte auf der Filialuebersicht: laedt erst auf Klick. */
.n100 .nb-karte{margin-top:34px;border:1px solid #D9E2E9;border-radius:3px;overflow:hidden;background:#F1F5F8}
.n100 .nb-karte-platz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:340px;padding:30px;text-align:center}
.n100 .nb-karte-platz p{font-size:16px;color:#5A6774;max-width:56ch;text-align:center}
.n100 .nb-karte-feld{height:480px;width:100%}
.n100 .nb-karte-feld .leaflet-container{height:100%;width:100%}

/* Seitenköpfe ohne Bild (Rechtstexte, Danke-Seiten, Sitemap): auf nabholz.de
   gibt es die so nicht. Dort schrumpft die Spur im Kopf auf die Textbreite
   und sitzt mittig — bei einer kurzen Überschrift wie „AGB" sieht das
   verloren aus. Diese Köpfe laufen deshalb über die volle Spaltenbreite. */
@media (min-width:900px){
  .n100 .n100-kopf.n100-kopf-breit{min-height:0}
  .n100 .n100-kopf.n100-kopf-breit .n100-spur{width:100%}
}

/* Listen: content.css zentriert jedes <li> (margin: .5em auto). In den
   n100-Bausteinen ist das falsch — dort stehen Listen linksbündig.
   Für .n100-haken und .n100-tl steht dieselbe Korrektur schon in n100.css. */
.n100 ul.n100-liste li{margin:0 0 10px!important;padding:0 0 0 22px!important;
  text-align:left!important;width:auto!important;max-width:none!important;left:auto!important}
.n100 .n100-fliess ul li{margin:0 0 8px!important;padding:0 0 0 22px!important;text-align:left!important}
.n100 .n100-fliess ul li:before{content:""!important;position:absolute!important;left:0!important;
  top:9px!important;width:7px!important;height:7px!important;border-radius:50%!important;
  background:#0064AF!important;transform:none!important;margin:0!important}
.n100 .n100-fliess ul{margin:0 0 18px!important;padding:0!important}
.n100 .n100-fliess li{position:relative}

/* filiale.css wird hier global geladen, auf nabholz.de nur auf den
   Filialseiten. Ihr heller Schleier macht weisse Ueberschriften auf hellen
   Fotos unlesbar — ausserhalb der Filialseiten gilt wieder der dunklere
   Verlauf aus n100.css. */
.n100 .n100-kopf-schleier{background:linear-gradient(90deg,rgba(0,58,99,.93) 0%,rgba(0,69,122,.84) 42%,rgba(0,100,175,.42) 100%)!important}
.n100-filiale .n100-kopf-schleier{background:linear-gradient(100deg,rgba(0,58,99,.90) 0%,rgba(0,58,99,.62) 48%,rgba(0,58,99,.22) 100%)!important}
@media (max-width:820px){
  .n100 .n100-kopf-schleier{background:linear-gradient(180deg,rgba(0,100,175,.82) 0%,rgba(0,58,99,.92) 100%)!important}
}

/* Kopf ohne Bild: nicht die volle Hero-Hoehe, sonst klafft eine leere
   blaue Flaeche. */
.n100 .n100-kopf.n100-kopf-breit .n100-spur{padding-top:clamp(34px,4vw,58px);padding-bottom:clamp(34px,4vw,58px)}