/* ============================================================================
   Becker GmbH – Hand-CSS für das, was Tailwind in den Templates nicht erreicht:
   Inhalte aus der Datenbank (bk-*-Klassen an Bereichen) und die Überschriftenschrift.
   Tabelle der Klassen: README.md. Eine Änderung hier gehört auch nach
   public/assets/themes/becker/custom-theme.css, der Build überschreibt die Kopie nicht.
   HERKUNFT: Formen aus dem Entwurf index.html (Karten, Kontakt- und Personenkarten, Startbild).
   ========================================================================== */

/* Überschriften: Poppins aus der System-Schriftbibliothek (public/assets/fonts/poppins). */
@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   src: url('../../fonts/poppins/poppins-v20-latin-600.woff2') format('woff2');
}

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   src: url('../../fonts/poppins/poppins-v20-latin-700.woff2') format('woff2');
}

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 800;
   src: url('../../fonts/poppins/poppins-v20-latin-800.woff2') format('woff2');
}

:root {
   --bk-titelschrift: 'Poppins', 'Inter', 'Segoe UI', Arial, sans-serif;
   --bk-blau: #0055a4;
   --bk-blau-hell: #1d7fd1;
   --bk-blau-dunkel: #00407e;
   --bk-glow: #6fb3ff;
   --bk-nacht: #121c27;
   --bk-nacht-2: #1b2b3a;
   --bk-text: #333c44;
   --bk-leise: #5c6a77;
   --bk-hellblau: #f3f7fb;
   --bk-rand: #edf1f5;
   --bk-schatten: 0 2px 18px rgb(18 28 39 / .05);
   --bk-schatten-hoch: 0 18px 38px rgb(18 28 39 / .12);
   --bk-verlauf: linear-gradient(135deg, var(--bk-blau), var(--bk-blau-hell));
}

/* Kopf und Fuß nutzen die Titelschrift auch (Logo-Text, Spaltenköpfe). */
.bk-titelschrift {
   font-family: var(--bk-titelschrift);
}

/* ---- Grundlagen im Inhalt ---- */
#content {
   color: var(--bk-text);
}

#content h1,
#content h2,
#content h3,
#content h4 {
   margin: 0 0 .75rem;
   color: var(--bk-blau); /* alle Überschriften blau (Auftraggeber 09.11.) */
   font-family: var(--bk-titelschrift);
   line-height: 1.2;
}

#content h1 {
   font-size: clamp(1.9rem, 4vw, 2.6rem);
   font-weight: 800;
}

#content h2 {
   font-size: clamp(1.6rem, 3vw, 2.3rem);
   font-weight: 800;
}

#content h3 {
   font-size: 1.3rem;
   font-weight: 700;
}

#content h4 {
   font-size: 1.05rem;
   font-weight: 700;
}

/* Fett gesetzte Wörter in Überschriften erben die Überschriftenfarbe (gepflegte Rechtstexte setzen ganze Überschriften
   in <strong>; so sehen alle Überschriften gleich aus). */
#content :is(h1, h2, h3, h4) strong {
   color: inherit;
   font-weight: inherit;
}

#content .nb-col p {
   margin: 0 0 1rem;
   line-height: 1.65;
}

#content .nb-col li>p {
   margin: 0;
   line-height: inherit;
}

#content .nb-col a:not([class]) {
   color: var(--bk-blau);
   font-weight: 600;
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
}

#content .nb-col a:not([class]):hover {
   color: var(--bk-blau-dunkel);
}

/* Listen mit blauen Markern (Entwurf) */
#content .nb-col ul:not([class]) {
   margin: 0 0 1rem;
   padding-left: 1.2rem;
   list-style: disc;
}

#content .nb-col ul:not([class])>li {
   margin-bottom: .35rem;
}

#content .nb-col ul:not([class])>li::marker {
   color: var(--bk-blau);
}

/* Einleitung unter einer Überschrift (Entwurf: section-sub) */
#content .nb-col p.bk-einleitung {
   max-width: 46rem;
   color: var(--bk-leise);
   font-size: 1.1rem;
}

#content .nb-col p.bk-hinweis {
   color: var(--bk-leise);
   font-size: .95rem;
   font-style: italic;
}

/* Knopf (Entwurf: btn-becker) */
#content a.bk-knopf,
.bk-knopf {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .7rem 1.4rem;
   border-radius: 0;
   background: var(--bk-verlauf);
   color: #fff;
   font-weight: 600;
   line-height: 1.3;
   text-decoration: none;
   transition: background .2s ease, transform .2s ease;
}

#content a.bk-knopf:hover,
.bk-knopf:hover {
   background: var(--bk-blau-dunkel);
   color: #fff;
   transform: translateY(-1px);
}

#content a.bk-knopf:focus-visible,
.bk-knopf:focus-visible {
   outline: 2px solid var(--bk-blau);
   outline-offset: 3px;
}

/* Kleiner Knopf im Kopf (Telefon) */
.bk-knopf.bk-knopf-klein {
   padding: .5rem 1rem;
   font-size: .9rem;
}

#content .nb-col p.bk-knopfzeile {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin: .5rem 0 0;
}

/* „mehr erfahren“: Textlink mit Pfeil */
#content a.bk-mehr {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   color: var(--bk-blau);
   font-weight: 600;
   text-decoration: none;
}

#content a.bk-mehr::after {
   content: '→';
   transition: transform .2s ease;
}

#content a.bk-mehr:hover::after {
   transform: translateX(3px);
}

#content a.bk-mehr:focus-visible {
   outline: 2px solid var(--bk-blau);
   outline-offset: 3px;
}

/* ---- Raster: Inhalt in max-w-7xl wie Kopf und Fuß. Bänder (Kopfbild, Hellblau) laufen über die ganze Breite,
   ihr Inhalt hält dieselbe Linie (80rem, Seitenrand 1 / 1,5 / 2rem wie px-4 sm:px-6 lg:px-8). ---- */
#content section.bk-kopfbild,
#content section.bk-hell {
   margin-block: 0;
}

#content .bk-hell>.grid {
   max-width: 80rem;
   margin-inline: auto;
   padding-inline: 1rem;
}

@media (min-width: 40rem) {
   #content .bk-hell>.grid {
      padding-inline: 1.5rem;
   }
}

@media (min-width: 64rem) {
   #content .bk-hell>.grid {
      padding-inline: 2rem;
   }
}

/* Mehr Luft zwischen den Themen als die festen my-8 der Bereiche (Entwurf: 6rem) */
#content section.bk-luft {
   margin-block: 4rem;
}

#content section.bk-luft-oben {
   margin-top: 4rem;
}

/* ---- bk-hell: hellblaues Band (Entwurf: bg-light-blue) ---- */
#content section.bk-hell {
   padding-block: 4.5rem;
   background: linear-gradient(180deg, #f3f7fb 0%, #eef3f9 100%);
}

/* ---- bk-kopfbild: Banner über die ganze Breite mit Verlauf und Raster wie im Entwurf ---- */
#content section.bk-kopfbild {
   position: relative;
   max-width: none;
   padding-inline: 0;
}

/* Höhen wie auf der alten Seite: Unterseiten 360 / 460 / 550 px, Startseite 450 / 550 / 750 px */
#content .bk-kopfbild .banner-slider {
   --banner-height: 360px;
   background: var(--bk-nacht);
}

@media (min-width: 48rem) {
   #content .bk-kopfbild .banner-slider {
      --banner-height: 460px;
   }
}

@media (min-width: 64rem) {
   #content .bk-kopfbild .banner-slider {
      --banner-height: 550px;
   }
}

/* Startseite: höher, mit Text */
#content .bk-kopfbild-start .banner-slider {
   --banner-height: 450px;
}

@media (min-width: 48rem) {
   #content .bk-kopfbild-start .banner-slider {
      --banner-height: 550px;
   }
}

@media (min-width: 64rem) {
   #content .bk-kopfbild-start .banner-slider {
      --banner-height: 750px;
   }
}

/* Verlauf (Entwurf) über jedem Bild, darüber das feine Raster mit Ausblendung nach unten */
#content .bk-kopfbild .banner-slide::before,
#content .bk-kopfbild .banner-slide::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}

#content .bk-kopfbild .banner-slide::before {
   background: linear-gradient(125deg, rgb(18 28 39 / .6) 10%, rgb(27 43 58 / .5) 45%, rgb(0 85 164 / .45) 100%);
}

#content .bk-kopfbild .banner-slide::after {
   background-image:
      linear-gradient(rgb(255 255 255 / .055) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .055) 1px, transparent 1px);
   background-size: 42px 42px;
   -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .9), transparent 85%);
   mask-image: linear-gradient(180deg, rgb(0 0 0 / .9), transparent 85%);
}

/* Text auf dem Startbild: auf der 7xl-Linie, senkrecht mittig */
#content .bk-kopfbild .banner-slide__overlay {
   inset: 0;
   z-index: 2;
   min-height: 0;
   align-items: center;
   padding: 2rem max(1rem, calc((100% - 80rem) / 2 + 1rem));
   background: none;
}

@media (min-width: 40rem) {
   #content .bk-kopfbild .banner-slide__overlay {
      padding-inline: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
   }
}

@media (min-width: 64rem) {
   #content .bk-kopfbild .banner-slide__overlay {
      padding-inline: max(2rem, calc((100% - 80rem) / 2 + 2rem));
   }
}

#content .bk-kopfbild .banner-slide__overlay-inner {
   max-width: 46rem;
}

#content .bk-kopfbild .banner-slide__title {
   margin: 0 0 1.25rem;
   font-family: var(--bk-titelschrift);
   font-size: clamp(2rem, 5vw, 3.4rem);
   font-weight: 800;
   line-height: 1.15;
   text-shadow: 0 2px 24px rgb(0 0 0 / .25);
}

#content .bk-kopfbild .banner-slide__text {
   max-width: 42rem;
   color: #eef3f9;
   font-size: clamp(1rem, 1.6vw, 1.2rem);
   line-height: 1.6;
   text-shadow: 0 1px 12px rgb(0 0 0 / .35);
}

#content .bk-kopfbild .banner-slide__cta {
   margin-top: 1.75rem;
   padding: .8rem 1.6rem;
   border-radius: .5rem;
   background: #fff;
   color: var(--bk-nacht);
   font-size: 1.05rem;
}

#content .bk-kopfbild .banner-slide__cta:hover {
   background: var(--bk-hellblau);
}

#content .bk-kopfbild .banner-slide__cta:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
}

#content .bk-kopfbild .banner-slider__pagination {
   z-index: 3;
}

/* ---- bk-karten: jede Spalte eine Karte mit Foto oben (Entwurf: card-feature) ---- */
#content .bk-karten .nb-col {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: 0 1.5rem 1.5rem;
   border: 1px solid var(--bk-rand);
   border-radius: 0;
   background: #fff;
   box-shadow: var(--bk-schatten);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#content .bk-karten .nb-col::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 2;
   height: 4px;
   background: linear-gradient(90deg, var(--bk-blau), var(--bk-glow));
   opacity: 0;
   transition: opacity .25s ease;
}

#content .bk-karten .nb-col:hover {
   border-color: transparent;
   box-shadow: var(--bk-schatten-hoch);
   transform: translateY(-6px);
}

#content .bk-karten .nb-col:hover::before {
   opacity: 1;
}

#content .bk-karten .nb-col>figure:first-child {
   overflow: hidden;
   margin: 0 -1.5rem 1.5rem;
}

#content .bk-karten .nb-col>figure:first-child img {
   display: block;
   width: 100%;
   height: 200px;
   border-radius: 0;
   object-fit: cover;
   transition: transform .4s ease;
}

#content .bk-karten .nb-col:hover>figure:first-child img {
   transform: scale(1.07);
}

/* Karte ohne Foto: Text beginnt mit Abstand */
#content .bk-karten .nb-col>:first-child:not(figure) {
   margin-top: 1.5rem;
}

#content .bk-karten h3 {
   font-size: 1.15rem;
}

#content .bk-karten ul:not([class]) {
   color: var(--bk-leise);
}

#content .bk-karten .nb-col>:last-child:has(.bk-mehr, .bk-knopf) {
   margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {

   #content .bk-karten .nb-col,
   #content .bk-karten .nb-col>figure:first-child img {
      transition: none;
   }

   #content .bk-karten .nb-col:hover,
   #content .bk-karten .nb-col:hover>figure:first-child img {
      transform: none;
   }
}

/* ---- bk-text-bild: Text und Bild nebeneinander, Bild mittig zum Text (Startseite wie die alte Seite) ---- */
@media (min-width: 48rem) {
   #content .bk-text-bild>.grid {
      align-items: center;
   }
}

#content .bk-text-bild img {
   display: block;
   width: 100%;
   border-radius: 0;
}

/* Bilder mit Schrägschnitt der alten Seite (transparente Kante) brauchen keinen Rahmen */
#content .bk-freigestellt img {
   border-radius: 0;
   box-shadow: none;
}

/* Fotos im Inhalt: abgerundet wie die Karten. :where hält die Regel schwach, damit Ausnahmen (freigestellt, Bildstreifen,
   Zeichnungen) mit einfacher Klasse greifen. */
#content :where(.nb-col figure) img {
   border-radius: 1rem;
}

/* ---- bk-zeitleiste: Firmengeschichte, Jahr als Überschrift auf einer blauen Linie ---- */
#content .bk-zeitleiste .nb-col {
   position: relative;
   padding-left: 2.25rem;
}

#content .bk-zeitleiste .nb-col::before {
   content: '';
   position: absolute;
   top: .5rem;
   bottom: .5rem;
   left: .45rem;
   width: 2px;
   background: linear-gradient(180deg, var(--bk-blau), var(--bk-glow));
}

#content .bk-zeitleiste h3 {
   position: relative;
   margin-top: 1.5rem;
   color: var(--bk-blau);
}

#content .bk-zeitleiste .nb-col>:first-child h3 {
   margin-top: 0;
}

#content .bk-zeitleiste h3::before {
   content: '';
   position: absolute;
   top: .3em;
   left: -2.25rem;
   width: 1.05rem;
   height: 1.05rem;
   border: 3px solid #fff;
   border-radius: 50%;
   background: var(--bk-verlauf);
   box-shadow: 0 0 0 2px var(--bk-blau);
}

/* ---- bk-kontakt: Kontaktkarte mit Symbol-Kacheln (Entwurf: contact-card) ---- */
#content .bk-kontakt .nb-col.bk-karte,
#content .bk-kontaktkarte .nb-col:first-child {
   padding: 1.75rem;
   border: 1px solid var(--bk-rand);
   border-radius: 0;
   background: #fff;
   box-shadow: var(--bk-schatten);
}

#content .bk-kontaktkarte .nb-col:first-child h2 {
   margin-bottom: 1.25rem;
   font-size: 1.35rem;
}

#content .nb-col p:is(.bk-ort, .bk-tel, .bk-mail) {
   position: relative;
   min-height: 2.75rem;
   padding-left: 3.75rem;
}

#content .nb-col p:is(.bk-ort, .bk-tel, .bk-mail)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 0;
   background: var(--bk-verlauf);
   box-shadow: 0 6px 14px rgb(0 85 164 / .25);
}

#content .nb-col p:is(.bk-ort, .bk-tel, .bk-mail)::after {
   content: '';
   position: absolute;
   top: .75rem;
   left: .75rem;
   width: 1.25rem;
   height: 1.25rem;
   background: #fff;
   -webkit-mask: var(--bk-symbol) center / contain no-repeat;
   mask: var(--bk-symbol) center / contain no-repeat;
}

#content .nb-col p.bk-ort {
   --bk-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

#content .nb-col p.bk-tel {
   --bk-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
}

#content .nb-col p.bk-mail {
   --bk-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

#content .nb-col p:is(.bk-ort, .bk-tel, .bk-mail) a {
   color: var(--bk-text);
   font-weight: 400;
   text-decoration: none;
}

#content .nb-col p:is(.bk-ort, .bk-tel, .bk-mail) a:hover {
   color: var(--bk-blau);
   text-decoration: underline;
}

/* ---- bk-personen: jede Spalte eine Personenkarte mit Kürzel-Kreis (Entwurf: person-card) ---- */
#content .bk-personen .nb-col {
   position: relative;
   padding: 1.4rem 1.4rem 1.4rem 5rem;
   border: 1px solid var(--bk-rand);
   border-radius: 0;
   background: #fff;
   transition: transform .2s ease, box-shadow .2s ease;
}

#content .bk-personen .nb-col:hover {
   box-shadow: 0 14px 28px rgb(18 28 39 / .08);
   transform: translateY(-3px);
}

#content .bk-personen .nb-col p.bk-kuerzel {
   position: absolute;
   top: 1.4rem;
   left: 1.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.9rem;
   height: 2.9rem;
   margin: 0;
   border-radius: 50%;
   background: var(--bk-verlauf);
   color: #fff;
   font-size: .85rem;
   font-weight: 700;
   line-height: 1;
}

#content .bk-personen .nb-col p.bk-rolle {
   margin: 0 0 .25rem;
   color: var(--bk-blau);
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
}

#content .bk-personen h3 {
   margin-bottom: .4rem;
   font-size: 1.1rem;
}

#content .bk-personen .nb-col p {
   margin-bottom: 0;
   color: var(--bk-leise);
   font-size: .95rem;
}

#content .bk-personen .nb-col a:not([class]) {
   overflow-wrap: anywhere;
   color: var(--bk-text);
   font-weight: 400;
   text-decoration: none;
}

#content .bk-personen .nb-col a:not([class]):hover {
   color: var(--bk-blau);
   text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
   #content .bk-personen .nb-col {
      transition: none;
   }

   #content .bk-personen .nb-col:hover {
      transform: none;
   }
}

/* ---- Produkte: Sprungmarken und Artikeltabellen ---- */
#content .bk-sprung .nb-col ul {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

#content .bk-sprung .nb-col ul>li {
   margin: 0;
}

#content .bk-sprung .nb-col ul a {
   display: inline-block;
   padding: .55rem 1.1rem;
   border: 1px solid var(--bk-rand);
   border-radius: 999px;
   background: #fff;
   color: var(--bk-nacht);
   font-weight: 600;
   text-decoration: none;
   box-shadow: var(--bk-schatten);
   transition: border-color .2s ease, color .2s ease;
}

#content .bk-sprung .nb-col ul a:hover {
   border-color: var(--bk-blau);
   color: var(--bk-blau);
}

#content .bk-sprung .nb-col ul>li::marker {
   content: '';
}

/* Sprungziele nicht unter dem festen Kopf verstecken */
#content [id] {
   scroll-margin-top: 8.5rem;
}

/* Tabellen (Freiform-Block): auf schmalen Schirmen seitlich scrollbar statt die Seite zu verbreitern */
#content .bk-tabelle {
   overflow-x: auto;
   margin: 0 0 1.5rem;
   border: 1px solid var(--bk-rand);
   border-radius: .75rem;
   background: #fff;
   box-shadow: var(--bk-schatten);
}

#content .bk-tabelle table {
   width: 100%;
   border-collapse: collapse;
   font-size: .95rem;
}

#content .bk-tabelle caption {
   padding: .9rem 1rem;
   color: var(--bk-blau);
   font-family: var(--bk-titelschrift);
   font-weight: 700;
   text-align: left;
}

#content .bk-tabelle th,
#content .bk-tabelle td {
   padding: .55rem 1rem;
   border-top: 1px solid var(--bk-rand);
   text-align: left;
   vertical-align: top;
   white-space: nowrap;
}

#content .bk-tabelle thead th {
   background: var(--bk-blau);
   color: #fff;
   font-weight: 600;
   vertical-align: bottom;
}

#content .bk-tabelle tbody tr:nth-child(even) {
   background: var(--bk-hellblau);
}

#content .bk-tabelle tbody th {
   font-weight: 600;
}

#content .bk-tabelle tfoot td {
   color: var(--bk-leise);
   font-style: italic;
   white-space: normal;
}

/* Produktbild neben der Tabelle */
#content .bk-produkt img {
   max-height: 22rem;
   margin-inline: auto;
   border-radius: 0;
   object-fit: contain;
}

/* ---- Zertifikat (Unternehmenswerte) ---- */
#content .bk-zertifikat img {
   border: 1px solid var(--bk-rand);
   border-radius: .5rem;
   box-shadow: var(--bk-schatten-hoch);
}

/* ---- Lesebreite für reine Textseiten (AGB, Firmengeschichte) ---- */
#content .bk-text .nb-col {
   max-width: 52rem;
}

/* ---- Spaltenverhältnisse ---- */
@media (min-width: 48rem) {
   #content .bk-zwei-eins>.grid {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      align-items: start;
   }
}

@media (min-width: 64rem) {
   #content .bk-kontaktkarte>.grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
   }
}

/* Kleine Zeile über einer Überschrift (Maschinenart, Rolle) */
#content .nb-col p.bk-oberzeile {
   margin: 0 0 .3rem;
   color: var(--bk-blau);
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
}

/* Karten mit freigestellten Maschinenbildern: ganz zeigen statt beschneiden */
#content .bk-karten-freigestellt .nb-col>figure:first-child {
   background: #fff;
   border-bottom: 1px solid var(--bk-rand);
}

#content .bk-karten-freigestellt .nb-col>figure:first-child img {
   padding: 1rem;
   object-fit: contain;
}

/* ---- bk-band-bild: Bildstreifen über die ganze Breite (Startseite unten) ---- */
#content section.bk-band-bild {
   max-width: none;
   margin-block: 4rem 0;
   padding-inline: 0;
}

#content .bk-band-bild figure {
   margin: 0;
}

#content .bk-band-bild img {
   display: block;
   width: 100%;
   height: clamp(160px, 17vw, 320px);
   border-radius: 0;
   object-fit: cover;
}

/* ---- Akkordeon (Artikeltabellen): Kopf in der Titelschrift, blauer Akzent beim Öffnen ---- */
#content .nb-accordion details {
   border-color: var(--bk-rand);
   box-shadow: var(--bk-schatten);
}

#content .nb-accordion details[open] {
   border-color: rgb(0 85 164 / .25);
}

#content .nb-accordion summary {
   color: var(--bk-blau);
   font-family: var(--bk-titelschrift);
   font-size: 1.05rem;
}

#content .nb-accordion summary:hover,
#content .nb-accordion details[open] summary {
   color: var(--bk-blau-dunkel);
}

#content .nb-accordion summary:focus-visible {
   outline: 2px solid var(--bk-blau);
   outline-offset: -2px;
   border-radius: 1rem;
}

#content .nb-accordion .bk-tabelle {
   margin-bottom: 1rem;
   box-shadow: none;
}

/* ---- Aktuelles: Kartentitel in der Titelschrift ---- */
#content .blog-card h2,
#content .blog-card h3 {
   font-family: var(--bk-titelschrift);
}

/* ---- Aktuelles (Blog-Übersicht und Beitrag): Container „prose“ steht im Theme auf der 7xl-Linie (theme.json),
   der Text selbst bleibt lesbar schmal und linksbündig unter der Überschrift ---- */
#content article.max-w-7xl>*,
#content div.max-w-7xl>.space-y-8 {
   max-width: 52rem;
}

#content article h2 a {
   color: var(--bk-blau);
   text-decoration: none;
}

#content article h2 a:hover {
   color: var(--bk-blau-dunkel);
}

#content article h2 a:focus-visible {
   outline: 2px solid var(--bk-blau);
   outline-offset: 3px;
}