/* BENTHO 2026 — Basis und wiederkehrende Bausteine. Mobile-first:
   alle Breakpoints sind min-width, der Grundzustand ist das Telefon. */

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;background:var(--bt-n0);color:var(--bt-n800);
  font-family:var(--bt-font);font-size:var(--bt-fs-body);line-height:var(--bt-lh);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--bt-ind);text-decoration:none;}
a:hover,a:focus-visible{color:var(--bt-ind-900);}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.015em;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
ul{margin:0;padding:0;list-style:none;}

:focus-visible{outline:3px solid var(--bt-cta);outline-offset:2px;}

.bt-skip{position:absolute;left:-9999px;}
.bt-skip:focus{left:1rem;top:1rem;z-index:100;background:var(--bt-n0);padding:.75rem 1.25rem;}

/* --------------------------------------------------------------- Raster -- */

.bt-wrap{width:100%;max-width:var(--bt-wrap);margin-inline:auto;padding-inline:var(--bt-gutter);}
.bt-sec{padding-block:var(--bt-sec);}
.bt-stack{display:flex;flex-direction:column;gap:1rem;}
.bt-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;}
@media (min-width:48em){
  .bt-grid--2,.bt-grid--3,.bt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:64em){
  .bt-grid{gap:1.75rem;}
  .bt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bt-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* -------------------------------------------------------------- Typo ----- */

.bt-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bt-ind);}
.bt-lead{font-size:var(--bt-fs-lead);line-height:1.6;color:var(--bt-n600);}
.bt-h1{font-size:clamp(2.05rem,6.2vw,3.75rem);font-weight:800;}
.bt-h2{font-size:clamp(1.6rem,3.6vw,2.375rem);font-weight:800;}
.bt-h3{font-size:clamp(1.15rem,2vw,1.4375rem);}

/* Platzhalter für noch fehlende Angaben. Vor dem Livegang muss diese
   Klasse aus dem Markup verschwunden sein. */
.bt-ph{background:var(--bt-cta-tint);color:var(--bt-cta-hover);
  border-bottom:2px dotted var(--bt-cta);padding:1px 6px;font-weight:700;font-size:.94em;}


/* Merkmalsliste neben der Team-Sektion. Optisch die helle Entsprechung zur
   Liste in der Souveränitäts-Sektion, damit beide als eine Familie lesen. */
.bt-merkmale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:1px;background:var(--bt-n200);border:1px solid var(--bt-n200);}
.bt-merkmale li{background:var(--bt-n0);padding:1.25rem 1.5rem;}
.bt-merkmale strong{display:block;color:var(--bt-ind-900);font-size:1rem;}
.bt-merkmale span{display:block;margin-top:.3125rem;font-size:.9375rem;color:var(--bt-n600);}

/* ------------------------------------------------------------ Aktionen --- */

.bt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  padding:.9375rem 1.875rem;min-height:52px;font-size:.875rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid transparent;
  cursor:pointer;transition:background-color .15s ease,color .15s ease;}
.bt-btn--cta{background:var(--bt-cta);color:var(--bt-on-cta);}
.bt-btn--cta:hover,.bt-btn--cta:focus-visible{background:var(--bt-cta-hover);color:var(--bt-on-cta);}
.bt-btn--ghost{border-color:var(--bt-ind);color:var(--bt-ind);}
.bt-btn--ghost:hover{background:var(--bt-ind);color:var(--bt-on-ind);}
.bt-btn--ghost-w{border-color:rgba(255,255,255,.55);color:var(--bt-on-brand);}
.bt-btn--ghost-w:hover{background:var(--bt-on-brand);color:var(--bt-on-light);}
@media (max-width:47.9375em){ .bt-btn{width:100%;} }

/* --------------------------------------------------------------- Karte --- */

.bt-card{background:var(--bt-n0);border:1px solid var(--bt-n200);padding:1.5rem 1.375rem;
  display:flex;flex-direction:column;gap:.75rem;}
.bt-card__num{font-size:1.4375rem;font-weight:800;color:var(--bt-ind);line-height:1.15;}
.bt-card__meta{font-size:.8125rem;color:var(--bt-n500);margin-top:auto;padding-top:.75rem;}
.bt-card--link:hover{border-color:var(--bt-cta);}
@media (min-width:64em){ .bt-card{padding:2.125rem 1.875rem;} }

.bt-ico{width:2.375rem;height:2.375rem;color:var(--bt-ind);}

/* ------------------------------------------------------------ Topbar ----- */

.bt-topbar{position:sticky;top:0;z-index:50;background:var(--bt-n0);border-bottom:1px solid var(--bt-n200);}
.bt-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:.875rem;}
.bt-brand{display:flex;align-items:center;flex:none;}
/* Die Wortmarke ist Teil der Bilddatei (Seitenverhaeltnis 3,28:1).
   Unter etwa 130px Breite wird "BUSINESS SOLUTIONS" unleserlich,
   deshalb auch mobil nicht kleiner. */
.bt-brand__logo{width:166px;height:auto;display:block;}
@media (min-width:48em){
  .bt-brand__logo{width:192px;}
  /* Schon ab Tablet knapper polstern, sonst waere die Leiste hier mit 87px
     hoeher als auf dem Desktop mit 85px. */
  .bt-topbar__inner{padding-block:.625rem;}
}
@media (min-width:64em){
  /* Gemessen: Ab 232px laeuft die Leiste bei 1280px Fenster ueber. 212px
     lassen 29px Luft - genug, dass ein zusaetzlicher Menuepunkt oder eine
     andere Schriftauslieferung nichts bricht. Mehr ginge erst, wenn das
     Hauptmenue auf die drei Saeulen gekuerzt ist. */
  .bt-brand__logo{width:212px;}
  /* Weniger Innenabstand, damit die Leiste nicht zu hoch wird: 212px Breite
     ergeben 65px Hoehe, 2x10px dazu = 85px. */
  .bt-topbar__inner{padding-block:.625rem;}
}

.bt-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;cursor:pointer;color:var(--bt-ind-900);}
.bt-nav{display:none;}
.bt-nav__cta{display:none;}

.bt-nav[data-open="true"]{display:block;position:absolute;inset-inline:0;top:100%;
  background:var(--bt-n0);border-bottom:1px solid var(--bt-n200);box-shadow:var(--bt-schatten);}
.bt-nav[data-open="true"] ul{display:flex;flex-direction:column;padding:.5rem var(--bt-gutter) 1.25rem;}
.bt-nav[data-open="true"] ul a{display:block;padding:.875rem 0;font-weight:600;color:var(--bt-n800);
  border-bottom:1px solid var(--bt-n200);min-height:44px;}
.bt-nav__cta-mobil{padding:0 var(--bt-gutter) 1.5rem;}
.bt-nav__cta-mobil .bt-btn{width:100%;}

/* Umbruchpunkt der waagerechten Navigation.
   Acht Menuepunkte brauchen 761px. Dazu Logo, Umschalter, CTA und Aussen-
   abstaende: zusammen rund 1345px. Bei 64em (1024px) stand das Menue zwar
   nebeneinander, schob aber CTA und Umschalter aus der Leiste und liess das
   gesamte Dokument 1263px breit werden - die Seite scrollte waagerecht auf
   jedem Laptop. Entscheidend ist nicht die Fensterbreite, sondern .bt-wrap:
   der deckelt den Inhalt bei 1180px, und da hinein muessen Logo, Menue,
   Umschalter und CTA passen. Deshalb ab 80em UND mit engerem Menue.
   Sobald das Hauptmenue auf die drei Saeulen gekuerzt ist, kann dieser Wert
   wieder sinken - dann neu messen, nicht schaetzen. */
@media (min-width:80em){
  .bt-burger{display:none;}
  .bt-nav{display:block;}
  /* Enger und etwas kleiner als der Fliesstext: Acht Punkte mit 1.75rem
     Abstand brauchen 761px, in den Rahmen passen aber nur rund 690px. */
  .bt-nav ul{display:flex;align-items:center;gap:1.25rem;}
  .bt-nav a{font-size:.875rem;font-weight:600;color:var(--bt-n800);}
  .bt-nav a:hover,.bt-nav .current-menu-item > a{color:var(--bt-ind);}
  .bt-nav__cta{display:inline-flex;min-height:44px;padding:.75rem 1.375rem;font-size:.8125rem;width:auto;}
  .bt-nav__cta-mobil{display:none;}
}

/* --------------------------------------------------------------- Hero ---- */

.bt-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#1b1b47 0%,var(--bt-ind-800) 48%,#3c3a86 100%);
  color:var(--bt-on-brand);padding-block:3rem;}
.bt-hero .bt-h1{color:var(--bt-on-brand);}
.bt-hero > *{position:relative;z-index:1;}
.bt-hero__sub{font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:40rem;}
.bt-hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.625rem;font-size:.78125rem;font-weight:600;
  letter-spacing:.05em;color:rgba(255,255,255,.78);}
.bt-hero__rule{height:1px;background:rgba(255,255,255,.18);}
@media (min-width:48em){ .bt-hero{padding-block:4.5rem;} .bt-hero__sub{font-size:1.25rem;} }

/* ----------------------------------------------------------- Bausteine --- */

.bt-quote{border-left:3px solid var(--bt-cta);padding-left:1.25rem;}
.bt-quote p:first-child{font-size:1.0625rem;line-height:1.55;color:var(--bt-ind-900);font-weight:600;}
@media (min-width:48em){ .bt-quote{padding-left:1.75rem;} .bt-quote p:first-child{font-size:1.1875rem;} }

.bt-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--bt-n200);border:1px solid var(--bt-n200);}
.bt-logos > *{background:var(--bt-n0);min-height:76px;display:flex;align-items:center;justify-content:center;padding:.75rem;}
@media (min-width:48em){ .bt-logos{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:64em){ .bt-logos{grid-template-columns:repeat(5,minmax(0,1fr));} .bt-logos > *{min-height:88px;} }

/* -------------------------------------------------------------- Footer --- */

.bt-footer{background:var(--bt-ink);color:rgba(255,255,255,.72);
  padding-block:3rem 2.25rem;font-size:.9375rem;}
.bt-footer a{color:rgba(255,255,255,.72);}
.bt-footer a:hover{color:var(--bt-on-brand);}
.bt-footer__cols{display:grid;grid-template-columns:1fr;gap:2rem;}
.bt-footer__head{color:var(--bt-on-brand);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.bt-footer__rule{height:1px;background:rgba(255,255,255,.14);}
.bt-footer__legal{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.875rem;}
@media (min-width:48em){ .bt-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:64em){ .bt-footer__cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.25rem;} }

/* ----------------------------------------------- Altbestand: Seitenelemente */
/* Solange die Unterseiten am inclposts-Konstrukt hängen, brauchen sie
   ein Mindestmaß an Gestaltung im neuen Look. */

.bt-legacy{padding-block:var(--bt-sec);}
.bt-legacy.white{background:var(--bt-n0);}
.bt-legacy.lightgrey{background:var(--bt-n100);}
.bt-legacy.darkgrey{background:var(--bt-ink-2);color:rgba(255,255,255,.85);}
.bt-legacy.text-white{color:var(--bt-on-brand);}
.bt-legacy .hl{margin-bottom:1.5rem;font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:800;color:inherit;}
.bt-legacy .columns{display:grid;gap:1.75rem;grid-template-columns:1fr;}
@media (min-width:48em){
  .bt-legacy .columns.col2,.bt-legacy .columns.col4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bt-legacy .columns.col3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:64em){ .bt-legacy .columns.col4{grid-template-columns:repeat(4,minmax(0,1fr));} }

/* Einzelne Kachel in einer mehrspaltig angelegten Reihe mittig setzen.
   Tritt beim 2-1-2-Aufbau der Profilseite auf: Die Reihe ist als zweispaltig
   angelegt, trägt aber nur eine Kachel. Die Kachel spannt über alle Spalten
   und wird dann auf Spaltenbreite zurückgenommen - so steht sie mittig und
   bleibt genauso breit wie die Kacheln der Reihen darüber und darunter.

   Voraussetzung ist, dass leere Spalten gar nicht erst ausgegeben werden;
   das erledigt include-cpts.php. Sonst wäre :only-child nie wahr. */
@media (min-width:48em){
  .bt-legacy .columns.col2 > .clmn:only-child,
  .bt-legacy .columns.col3 > .clmn:only-child,
  .bt-legacy .columns.col4 > .clmn:only-child{
    grid-column:1 / -1;
    max-width:calc((100% - 1.75rem) / 2);
    margin-inline:auto;
  }
}
.bt-legacy .align-center{text-align:center;}

/* ------------------------------------------------- Sektionsrhythmus ------ */
/* Die Seite braucht dunkle Bänder, sonst laufen die hellen Abschnitte
   zu einem einzigen Block zusammen. */

.bt-sec--tint{background:var(--bt-n50);}
.bt-sec--dark{background:var(--bt-ind-800);color:rgba(255,255,255,.86);position:relative;overflow:hidden;}
.bt-sec--dark h2,.bt-sec--dark h3,.bt-sec--dark strong{color:var(--bt-on-brand);}
.bt-sec--dark .bt-eyebrow{color:#a9a4d8;}
.bt-sec--dark .bt-lead{color:rgba(255,255,255,.8);}
.bt-sec--dark a{color:var(--bt-on-brand);}
.bt-sec--dark > *{position:relative;z-index:1;}

/* Wabenmuster aus dem Logo-Sechseck. Sehr dezent, nur als Textur
   in dunklen Flächen — nie über Text. */
.bt-hex::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M28 64 56 80v32L28 128 0 112V80z' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 97px;
}

/* Zeigerreaktion auf den Wabenflächen ("Leuchtkegel").
   Eine zweite Lage mit demselben Muster, kreisförmig um den Zeiger
   maskiert: Das Netz wird dort heller, ohne sich zu bewegen.

   Die Position liefert assets/netz.js als --netz-x / --netz-y. Ohne das
   Skript bleibt die Lage unsichtbar (opacity:0), die Fläche sieht aus wie
   vorher - das Skript setzt .is-aktiv nur, solange der Zeiger darüber ist,
   und rührt Touchgeräte sowie "Bewegung reduzieren" gar nicht erst an.

   Greift nur bei [data-netz], damit Flächen ohne Skript keine tote
   Zeichenebene bekommen.

   Das Muster ist dasselbe wie oben. Wird es dort geändert, hier mitziehen. */
.bt-hex[data-netz]{--netz-x:50%;--netz-y:50%;}
.bt-hex[data-netz]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M28 64 56 80v32L28 128 0 112V80z' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:radial-gradient(circle 240px at var(--netz-x) var(--netz-y),
    #000 0%,rgba(0,0,0,.45) 45%,transparent 72%);
          mask-image:radial-gradient(circle 240px at var(--netz-x) var(--netz-y),
    #000 0%,rgba(0,0,0,.45) 45%,transparent 72%);
  transition:opacity .45s ease;
}
.bt-hex[data-netz].is-aktiv::after{opacity:.30;}

/* Sicherheitsnetz: Sollte das Skript trotz seiner eigenen Prüfung laufen,
   bleibt die Lage bei abbestellter Bewegung trotzdem aus. */
@media (prefers-reduced-motion:reduce){
  .bt-hex[data-netz]::after{display:none;}
}

/* Karten mit Flächen statt nur Rahmen — bricht die Reihe gleicher Rechtecke auf. */
.bt-card--fill{background:var(--bt-n50);border-color:var(--bt-n200);}
.bt-card--dark{background:var(--bt-ind-800);border-color:var(--bt-ind-800);color:rgba(255,255,255,.84);}
.bt-card--dark h3,.bt-card--dark strong{color:var(--bt-on-brand);}

/* Bildfläche in Karten und Blöcken */
.bt-figure{margin:0;background:var(--bt-n100);border:1px solid var(--bt-n200);}
.bt-figure img{width:100%;height:auto;display:block;}
.bt-figure figcaption{padding:.75rem 1rem;font-size:.8125rem;color:var(--bt-n600);
  border-top:1px solid var(--bt-n200);background:var(--bt-n0);}

/* ------------------------------------------------- Redaktioneller Text --- */
/* Der globale Reset oben (margin:0, list-style:none) ist für die gebauten
   Abschnitte richtig, zerstört aber jeden Fließtext aus dem Editor.
   Alles, was aus dem Backend kommt, läuft deshalb durch diesen Kontext:
   the_content() auf Seiten und Beiträgen sowie die Spalteninhalte der
   Seitenelemente. */

.bt-prose > * + *{margin-top:1.125rem;}
.bt-prose p{margin:0;}
.bt-prose h2,.bt-prose h3,.bt-prose h4{color:var(--bt-ind-900);}
.bt-prose h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-top:2.75rem;}
.bt-prose h3{font-size:clamp(1.1rem,2vw,1.3125rem);margin-top:2rem;}
.bt-prose h4{font-size:1.0625rem;margin-top:1.5rem;}
.bt-prose > :first-child{margin-top:0;}

.bt-prose ul{list-style:disc;padding-left:1.375rem;}
.bt-prose ol{list-style:decimal;padding-left:1.625rem;}
.bt-prose li + li{margin-top:.375rem;}
.bt-prose li > ul,.bt-prose li > ol{margin-top:.375rem;}
.bt-prose ::marker{color:var(--bt-ind-400);}

/* Links im Fließtext müssen sich vom Text abheben - Farbe allein reicht nicht. */
.bt-prose a{text-decoration:underline;text-underline-offset:.15em;}

.bt-prose strong{color:var(--bt-ind-900);}
.bt-prose img{margin-block:.5rem;}
.bt-prose blockquote{border-left:3px solid var(--bt-cta);padding-left:1.25rem;font-style:normal;
  color:var(--bt-ind-900);}
.bt-prose hr{border:0;border-top:1px solid var(--bt-n200);margin-block:2rem;}

/* Tabellen (Datenschutz, AGB) müssen auf dem Telefon scrollen dürfen,
   nicht die Seite breit machen. */
.bt-prose table{width:100%;border-collapse:collapse;font-size:.9375rem;display:block;
  overflow-x:auto;}
.bt-prose th,.bt-prose td{border:1px solid var(--bt-n200);padding:.625rem .75rem;
  text-align:left;vertical-align:top;}
.bt-prose th{background:var(--bt-n100);font-weight:700;color:var(--bt-ind-900);}

/* Die Spalten der Altbestand-Seitenelemente tragen ebenfalls Editor-Inhalt. */
.bt-legacy .clmn > * + *,
.bt-legacy .columns > div > * + *{margin-top:1.125rem;}
/* Ausnahme Galerie: Die Zeile darüber ist für Editor-Fließtext gedacht, trifft
   aber auch jede <figure class="gallery-item"> außer der ersten - .gallery IST
   so ein div. Folge: Kachel 1 der ersten Reihe steht 18px höher als ihre
   Nachbarn, und zwischen den Reihen klafft ein 19px breites Band (18px Margin
   plus 1px gap). Die Galerie ist ein eigenes Raster und setzt ihre Abstände
   selbst. Auch der Bildabstand aus .bt-legacy img hat darin nichts verloren. */
.bt-legacy .columns > div.gallery > * + *,
.bt-legacy .clmn > div.gallery > * + *{margin-top:0;}
.bt-legacy .gallery img{margin-block:0;}
.bt-legacy .clmn ul,.bt-legacy .columns ul{list-style:disc;padding-left:1.375rem;}
.bt-legacy .clmn ol,.bt-legacy .columns ol{list-style:decimal;padding-left:1.625rem;}
.bt-legacy .clmn li + li,.bt-legacy .columns li + li{margin-top:.375rem;}
.bt-legacy .clmn h2,.bt-legacy .clmn h3,.bt-legacy .clmn h4,
.bt-legacy .columns h2,.bt-legacy .columns h3,.bt-legacy .columns h4{
  color:inherit;margin-top:1.75rem;}
.bt-legacy .clmn > :first-child,.bt-legacy .columns > div > :first-child{margin-top:0;}
.bt-legacy a{text-decoration:underline;text-underline-offset:.15em;}
.bt-legacy img{margin-block:.5rem;}

/* ------------------------------------------------------- Stellenfilter --- */
.bt-jobfilter{display:flex;flex-wrap:wrap;gap:.625rem;}
.bt-chip{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.125rem;
  border:1px solid var(--bt-n300);font-size:.875rem;font-weight:600;color:var(--bt-n800);}
.bt-chip:hover{border-color:var(--bt-ind);color:var(--bt-ind);}
.bt-chip.is-active{background:var(--bt-ind);border-color:var(--bt-ind);color:var(--bt-on-ind);}
.bt-chip.is-active:hover{color:var(--bt-on-ind);}

/* --------------------------------------- WordPress-Standardklassen ------- */
/* Der Editor vergibt diese Klassen, jedes Theme muß sie bedienen.
   Ohne sie stehen zentrierte Bilder links und Logo-Reihen untereinander. */

.aligncenter{display:block;margin-inline:auto;}
.alignnone{display:block;}
.alignleft{float:left;margin:.25rem 1.75rem 1rem 0;max-width:50%;}
.alignright{float:right;margin:.25rem 0 1rem 1.75rem;max-width:50%;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:.8125rem;color:var(--bt-n600);margin-top:.5rem;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.clrfix::after{content:"";display:table;clear:both;}

/* Bilder INNERHALB eines Absatzes gehören nebeneinander - etwa Logo-Reihen
   wie "ELO Business Partner" + "Trained by DATEV". Der globale
   img{display:block} weiter oben würde sie stapeln. */
.bt-prose p img,
.bt-legacy p img{display:inline-block;vertical-align:middle;margin:.5rem .625rem;}
.bt-prose p img.aligncenter,
.bt-legacy p img.aligncenter{display:inline-block;}

/* Logo-Reihen bändigen: kein Logo größer als nötig. */
.bt-prose p img[width][height],
.bt-legacy p img[width][height]{max-height:120px;width:auto;}

/* Theme-Klasse aus bentho-light: Produkt-Icons in Spalten.
   Dort war .icon{width:20%} - ohne diese Regel füllen die
   600x600-Dateien die ganze Spalte. */
.bt-legacy .icon,
.bt-prose .icon{width:auto;max-height:132px;max-width:44%;margin-inline:auto;
  margin-bottom:.5rem;}

/* Innenabstand der Spalten - im alten Theme .clmn:not(.image){padding:1.5em}.
   Ohne ihn klebt der Inhalt an den Kanten und wirkt gedrückt. */
.bt-legacy .clmn:not(.image){padding:1.5rem;}
.bt-legacy .columns.col1 > div,
.bt-legacy .columns.col1{padding-inline:0;}
/* Bildspalten tragen das Bild doppelt: als <img> UND als inline
   background-image. Ohne background-size rendert der Hintergrund in
   Originalgröße (1211x838) und wird an der Spaltenkante abgeschnitten -
   sichtbar als dunkler Bildfetzen unter dem eigentlichen Bild, sobald die
   Textspalte daneben höher ist. Beide Ebenen deshalb auf dieselbe
   Darstellung zwingen: zentriert, vollständig, nichts beschnitten. */
.bt-legacy .clmn.image{padding:0;background-size:contain;
  background-position:center;background-repeat:no-repeat;}
.bt-legacy .clmn.image img{display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;}

/* Etwas Luft zwischen Headline und Spaltenblöcken, und zwischen mehreren
   Spaltenblöcken derselben Sektion. */
.bt-legacy .columns + .columns{margin-top:1.5rem;}
.bt-legacy .hl{margin-bottom:2rem;}

/* ------------------------------- Altbestand: Klassen aus bentho-light ---- */
/* Diese Klassen vergeben die Seitenelemente und die Redaktion. Ohne
   Entsprechung im neuen Theme sehen Schaltflächen wie normale Links aus
   und die Teamdarstellung stapelt sich unformatiert. */

/* Schaltflächen der Seitenelemente ("Mehr erfahren …") */
.bt-legacy .button,
.bt-prose .button{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.75rem 1.75rem;font-size:.8125rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--bt-ind);color:var(--bt-ind);background:transparent;
  transition:background-color .15s ease,color .15s ease;}
.bt-legacy .button:hover,
.bt-prose .button:hover{background:var(--bt-ind);color:var(--bt-on-ind);}
.bt-legacy .button.filled,
.bt-prose .button.filled{background:var(--bt-cta);border-color:var(--bt-cta);color:var(--bt-on-cta);}
.bt-legacy .button.filled:hover,
.bt-prose .button.filled:hover{background:var(--bt-cta-hover);border-color:var(--bt-cta-hover);}
/* Auf dunklem Grund muß der Rahmen hell sein. */
.bt-legacy.text-white .button,
.bt-sec--dark .button{border-color:rgba(255,255,255,.55);color:var(--bt-on-brand);}
.bt-legacy.text-white .button:hover,
.bt-sec--dark .button:hover{background:var(--bt-on-brand);color:var(--bt-on-light);}

.bt-legacy .readmore{margin-top:2rem;text-align:center;}

/* Teaser-Kacheln (Kategorie-Teaser der Seitenelemente) */
.bt-legacy .columnItem{display:flex;flex-direction:column;background:var(--bt-n0);
  border:1px solid var(--bt-n200);}
.bt-legacy .columnItem .colspan{padding:1.5rem;}
.bt-legacy .columnItem > * + *{margin-top:0;}
@media (min-width:48em){
  .bt-legacy .columns.col3 .columnItem{flex-direction:column;}
}

/* Teamdarstellung auf der Profilseite */
.bt-legacy .profile-item{display:flex;flex-direction:column;height:100%;
  background:var(--bt-n0);border:1px solid var(--bt-n200);color:var(--bt-n800);
  padding-bottom:1.5rem;}
/* Teamfotos sind Kachelbilder, keine Logos. Die Höhenbremse für Logo-Reihen
   weiter oben (.bt-legacy p img[width][height]) hat Spezifität (0,3,2) - zwei
   Attributselektoren zählen wie Klassen - und schlug diese Regel hier (0,2,1).
   Folge: Die Fotos hingen mit 222px an der linken Kante statt zentriert in
   der Kachel zu stehen. Der Selektor unten kommt auf (0,4,2) und gewinnt. */
.bt-legacy .profile-item img{margin:0;}
.bt-legacy .profile-item p img[width][height]{display:block;margin-inline:auto;}
.bt-legacy .profile-item h3,
.bt-legacy .profile-item h4,
.bt-legacy .profile-item p{padding-inline:1.5rem;}
.bt-legacy .profile-item h3{margin-top:1.5rem;font-size:1.25rem;color:var(--bt-ind-900);}
.bt-legacy .profile-item h4{margin-top:.375rem;font-size:.9375rem;font-weight:600;
  color:var(--bt-ind);}
.bt-legacy .profile-item p{margin-top:.75rem;font-size:.9375rem;color:var(--bt-n600);}

/* Farbige Overlays lagen als PNG im alten Theme - hier als Farbfläche. */
.bt-legacy .overlay{position:absolute;inset:0;z-index:0;pointer-events:none;}
.bt-legacy .overlay-blue{background:rgba(20,55,111,.55);}
.bt-legacy .overlay-red{background:rgba(214,60,11,.5);}
.bt-legacy .clmn.image{position:relative;}

/* Einspaltige Textblöcke: Lesebreite begrenzen. Im alten Theme lag der
   Text bei 60 % der Seitenbreite (padding 20 % links und rechts). */
.bt-legacy .columns.col1{max-width:60rem;margin-inline:auto;}
.bt-legacy .columns.col1 > * + *{margin-top:1.125rem;}
.bt-legacy .columns.col1 ul{list-style:disc;padding-left:1.375rem;}
.bt-legacy .columns.col1 ol{list-style:decimal;padding-left:1.625rem;}
.bt-legacy .columns.col1 li + li{margin-top:.375rem;}
.bt-legacy .columns.col1 h2,
.bt-legacy .columns.col1 h3,
.bt-legacy .columns.col1 h4{margin-top:2rem;color:inherit;}
.bt-legacy .columns.col1 > :first-child{margin-top:0;}

.bt-legacy .colspan{grid-column:span 2;}
@media (max-width:47.9375em){ .bt-legacy .colspan{grid-column:span 1;} }

/* Hintergrundbild-Steuerung der Seitenelemente. Die Klassen kommen aus den
   ACF-Feldern incl_bgsize / incl_bgpos / incl_parallax und stehen an der
   Sektion; ohne Regeln wird das Bild gekachelt statt formatfüllend gezeigt. */
.bt-legacy.image{background-repeat:no-repeat;position:relative;}
.bt-legacy.cover{background-size:cover;}
.bt-legacy.contain{background-size:contain;}
.bt-legacy.left{background-position:left center;}
.bt-legacy.right{background-position:right center;}
.bt-legacy.center{background-position:center center;}
.bt-legacy.bg_normal{background-attachment:scroll;}

/* Parallax nur auf Zeigergeräten: background-attachment:fixed ist auf
   iOS wirkungslos und kostet auf Android Scrollleistung. */
@media (min-width:64em) and (hover:hover){
  .bt-legacy.bg_fixed{background-attachment:fixed;}
}
@media (prefers-reduced-motion:reduce){
  .bt-legacy.bg_fixed{background-attachment:scroll;}
}

/* Auf Bildhintergründen muß der Text lesbar bleiben. */
.bt-legacy.image.text-white{color:var(--bt-on-brand);}
.bt-legacy.image.text-white .hl,
.bt-legacy.image.text-white h2,
.bt-legacy.image.text-white h3,
.bt-legacy.image.text-white strong{color:var(--bt-on-brand);}
.bt-legacy.image.text-white::before{content:"";position:absolute;inset:0;
  background:rgba(13,12,27,.45);pointer-events:none;}
.bt-legacy.image > *{position:relative;z-index:1;}

/* Beitragsübersicht: Kacheln auf hellgrauem Grund, damit sie als Karten lesbar
   sind. Ohne Kontrast verschwimmt Weiß auf Weiß zu einer Liste. */
.bt-teaser{display:flex;flex-direction:column;background:var(--bt-n0);
  border:1px solid var(--bt-n200);overflow:hidden;transition:border-color .15s ease;}
.bt-teaser:hover{border-color:var(--bt-ind-400);}
.bt-teaser__media{display:block;background:var(--bt-n100);}
.bt-teaser__media img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.bt-teaser__body{display:flex;flex-direction:column;gap:.75rem;padding:1.375rem;flex:1;}
.bt-teaser__body h2{font-size:1.1875rem;color:var(--bt-ind-900);}
.bt-teaser__body h2 a{color:inherit;}
.bt-teaser__body h2 a:hover{color:var(--bt-ind);}
.bt-teaser__excerpt{font-size:.9375rem;color:var(--bt-n600);}
.bt-teaser__excerpt p{margin:0;}
.bt-teaser__more{margin-top:auto;padding-top:.75rem;font-weight:700;font-size:.9375rem;}
.bt-teaser__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;}
.bt-teaser__cat{font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bt-cta);}
/* Gleiche Form wie die Kategorie, aber zurückgenommen: Das Datum ordnet ein,
   es wirbt nicht. margin-left:auto schiebt es an den rechten Rand - auch dann,
   wenn die Kategorie daneben fehlt. (justify-content:space-between täte das
   nicht: bei einem einzigen Kind steht es wieder links.) */
.bt-teaser__datum{font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bt-n500);margin-left:auto;}

/* Datum über der Überschrift eines Beitrags. Gleiche Form wie .bt-eyebrow,
   aber im gedämpften Neutralton - es ordnet ein, es kündigt nichts an. */
.bt-beitragsdatum{display:block;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bt-n500);}

/* ------------------------------------------------------------ Galerien --- */
/* Weil das Theme add_theme_support('html5','gallery') setzt, liefert
   WordPress KEIN eigenes Galerie-CSS mehr - das muß hier stehen. Ohne
   diese Regeln stehen Logos in Originalgröße und unausgerichtet unter-
   einander. Im Bestand sind 16 Galerien, überwiegend Logo- und Icon-Reihen
   (Skills, Branchen, Referenzkunden) mit ganz unterschiedlichen
   Seitenverhältnissen - deshalb feste Zellenhöhe und object-fit:contain,
   damit alle Logos optisch gleich groß wirken und nichts beschnitten wird. */

.gallery{display:grid;gap:1px;background:var(--bt-n200);
  border:1px solid var(--bt-n200);margin-block:1.75rem;}
.gallery-item{background:var(--bt-n0);margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:1.25rem;text-align:center;}
/* Feste Box statt nur max-height: begrenzt Höhe UND Breite, damit ein
   breites Logo nicht doppelt so groß wirkt wie ein schmales. */
.gallery-icon{display:flex;align-items:center;justify-content:center;
  width:100%;height:84px;}
.gallery-item img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border:0;margin:0;}
.gallery-caption{font-size:.8125rem;color:var(--bt-n600);margin-top:.625rem;}

/* Grundsatz mobil: zwei Spalten. Ab Tablet folgt die Galerie ihrer
   eingestellten Spaltenzahl. */
.gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
.gallery-columns-1{grid-template-columns:minmax(0,1fr);}

@media (min-width:48em){
  .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .gallery-columns-5,
  .gallery-columns-6{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gallery-item{padding:1.75rem;}
}

/* Boxhöhe nach verfügbarem Platz: wenige Spalten = mehr Raum je Bild. */
@media (min-width:48em){
  .gallery-columns-1 .gallery-icon{height:200px;}
  .gallery-columns-2 .gallery-icon{height:150px;}
  .gallery-columns-3 .gallery-icon{height:124px;}
  .gallery-columns-4 .gallery-icon{height:104px;}
}
@media (min-width:64em){
  .gallery-columns-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .gallery-columns-6{grid-template-columns:repeat(6,minmax(0,1fr));}
  .gallery-columns-7{grid-template-columns:repeat(7,minmax(0,1fr));}
  .gallery-columns-8{grid-template-columns:repeat(8,minmax(0,1fr));}
  .gallery-columns-9{grid-template-columns:repeat(9,minmax(0,1fr));}
}

/* Auf dunklen Sektionen soll die Galerie nicht als weißer Block erschlagen. */
.bt-legacy.text-white .gallery,
.bt-sec--dark .gallery{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);}
.bt-legacy.text-white .gallery-item,
.bt-sec--dark .gallery-item{background:rgba(255,255,255,.94);}

/* Die Galerie ist ein eigenständiger Block, kein Fließtext - der
   Prose-Abstand oben würde sie sonst zusätzlich einrücken. */
.bt-prose .gallery,
.bt-legacy .gallery{margin-inline:0;}

/* --------------------------------------------------- Kundenlogo-Laufband -- */
/* Zwei identische Spuren, die zusammen doppelt so breit sind wie das Fenster.
   Die Animation verschiebt das Band um genau eine Spurbreite (-50 %) und
   springt dann zurück - für das Auge ein endloser Lauf. Kein JavaScript,
   kein Plugin. */

.bt-logowand{display:flex;flex-direction:column;gap:1rem;}
.bt-logowand__titel{font-size:.8125rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bt-n500);}

.bt-logowand__fenster{
  overflow:hidden;
  border-block:1px solid var(--bt-n200);
  /* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
     wirken, sondern aus dem Nichts kommen und darin verschwinden. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.bt-logowand__band{display:flex;width:max-content;
  animation:bt-lauf var(--bt-lauf,40s) linear infinite;}
.bt-logowand__spur{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none;}
.bt-logowand__item{flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(170px,24vw,260px);height:112px;padding:0 1.25rem;}
.bt-logowand__item img{max-width:100%;max-height:72px;width:auto;height:auto;
  object-fit:contain;display:block;}

@keyframes bt-lauf{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* Beim Darüberfahren und bei Tastaturfokus anhalten, damit man ein Logo
   in Ruhe ansehen kann. */
.bt-logowand__fenster:hover .bt-logowand__band,
.bt-logowand__fenster:focus-within .bt-logowand__band{animation-play-state:paused;}

/* Wer Bewegung abbestellt hat, bekommt ein ruhiges Raster statt eines Laufbands. */
@media (prefers-reduced-motion:reduce){
  .bt-logowand__fenster{mask-image:none;-webkit-mask-image:none;overflow:visible;
    border:1px solid var(--bt-n200);}
  .bt-logowand__band{animation:none;width:100%;display:block;}
  .bt-logowand__spur{flex-wrap:wrap;justify-content:center;}
  .bt-logowand__spur[aria-hidden="true"]{display:none;}
  .bt-logowand__item{width:20%;min-width:130px;}
}

/* ------------------------------------------------------ Formulare (CF7) -- */
/* Contact Form 7 liefert nur Klassen, kein Aussehen. Ohne diese Regeln sind
   es nackte Browser-Standardfelder - der Hauptgrund, warum die Kontaktseite
   altbacken wirkte. Gilt für alle Formulare: Kontakt, Bewerbung, Initiativ. */

.wpcf7{display:block;width:100%;}
.wpcf7 form > p{margin:0 0 1rem;}
.wpcf7 label{display:block;font-size:.9375rem;font-weight:600;color:var(--bt-ind-900);
  margin-bottom:.375rem;}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea{
  display:block;width:100%;box-sizing:border-box;
  padding:.875rem 1rem;min-height:52px;
  font-family:inherit;font-size:1rem;color:var(--bt-n800);
  background:var(--bt-n0);border:1px solid var(--bt-n300);
  transition:border-color .15s ease,box-shadow .15s ease;}
.wpcf7 textarea{min-height:9rem;resize:vertical;}

.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none;border-color:var(--bt-ind);box-shadow:0 0 0 3px var(--bt-ind-100);}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--bt-n500);}

/* Pflichtfeld-Markierung */
.wpcf7 .bt-pflicht{color:var(--bt-cta);font-weight:700;}

/* Absendeknopf im Stil der übrigen Schaltflächen */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:52px;padding:.9375rem 2rem;
  font-size:.875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bt-on-cta);background:var(--bt-cta);border:1px solid var(--bt-cta);cursor:pointer;
  transition:background-color .15s ease;}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover{background:var(--bt-cta-hover);border-color:var(--bt-cta-hover);}
@media (max-width:47.9375em){ .wpcf7 input[type="submit"]{width:100%;} }

/* Ladeanzeige und Rückmeldungen */
.wpcf7-spinner{margin:0 0 0 .75rem;}
.wpcf7 .wpcf7-response-output{margin:1.25rem 0 0;padding:.875rem 1.125rem;
  border:1px solid var(--bt-n300);font-size:.9375rem;float:none;width:auto;}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--bt-ok);background:var(--bt-ok-tint);color:var(--bt-ok-text);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:var(--bt-cta);background:var(--bt-cta-tint);
  color:var(--bt-cta-hover);}
.wpcf7-not-valid-tip{display:block;margin-top:.375rem;font-size:.875rem;color:var(--bt-cta-hover);}
.wpcf7 .wpcf7-not-valid{border-color:var(--bt-cta);}

/* Rechenaufgabe gegen Spam */
.wpcf7 .wpcf7-quiz-label{display:block;margin-top:0;}

/* Zweispaltige Feldreihen, wo das Formular sie vorsieht */
.bt-feldreihe{display:grid;grid-template-columns:1fr;gap:0 1rem;}
@media (min-width:38em){ .bt-feldreihe{grid-template-columns:1fr 1fr;} }

/* ------------------------------------------------------- Erstgespräch ---- */

.bt-erstgespraech{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;}
@media (min-width:60em){
  .bt-erstgespraech{grid-template-columns:1fr 1.05fr;gap:4rem;}
}

.bt-ablauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem;
  counter-reset:none;}
.bt-ablauf li{display:flex;gap:1rem;align-items:flex-start;}
.bt-ablauf__nr{flex:none;width:34px;height:34px;border-radius:50%;background:var(--bt-ind-800);
  color:var(--bt-on-brand);font-size:.9375rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.bt-ablauf strong{display:block;color:var(--bt-ind-900);font-size:1.0625rem;}
.bt-ablauf__text{display:block;margin-top:.25rem;font-size:.9375rem;color:var(--bt-n600);}

.bt-zusagen{list-style:none;margin:0;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;
  background:var(--bt-n50);border:1px solid var(--bt-n200);}
.bt-zusagen li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:var(--bt-n800);}
.bt-zusagen svg{flex:none;margin-top:2px;}

.bt-direkt{display:flex;flex-direction:column;gap:.375rem;padding-left:1.25rem;
  border-left:3px solid var(--bt-cta);}
.bt-direkt strong{color:var(--bt-ind-900);}
.bt-direkt__tel{font-size:1.375rem;font-weight:700;color:var(--bt-ind);}
.bt-direkt__zeit{font-size:.875rem;color:var(--bt-n600);}

.bt-formularkarte{background:var(--bt-n0);border:1px solid var(--bt-n200);padding:1.75rem 1.5rem;
  display:flex;flex-direction:column;gap:.75rem;}
@media (min-width:48em){ .bt-formularkarte{padding:2.5rem 2.25rem;} }
@media (min-width:60em){ .bt-formularkarte{position:sticky;top:5.5rem;} }
.bt-formularkarte__hinweis{font-size:.875rem;color:var(--bt-n600);margin-bottom:.75rem;}

/* ------------------------------------------------------------ Kontakt ---- */
/* Drei Angaben mittig nebeneinander. .bt-direkt kommt vom Erstgespräch;
   der Akzentstrich wandert hier von links nach oben, weil ein linker Rand
   bei zentrierter Schrift ins Leere zeigt. */

.bt-direkt__tel{overflow-wrap:anywhere;}
.bt-kontakt{display:grid;grid-template-columns:1fr;gap:2.5rem;justify-items:center;text-align:center;}
@media (min-width:56em){
  .bt-kontakt{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;align-items:start;}
}
.bt-kontakt .bt-direkt{align-items:center;padding-left:0;border-left:0;}
.bt-kontakt .bt-direkt::before{content:"";width:2.5rem;height:3px;background:var(--bt-cta);margin-bottom:.625rem;}
.bt-kontakt__adresse{font-style:normal;color:var(--bt-n800);line-height:1.6;}

/* Statische Karte. Das Bild ist auf das Ziel zentriert, daher sitzt die
   Nadel bei jedem Zuschnitt in der Mitte. Auf dem Telefon wird nur
   beschnitten, nicht verkleinert - sonst wäre die Schrift unlesbar. */
.bt-karte{margin:0;border:1px solid var(--bt-n200);background:var(--bt-n0);}
.bt-karte__bild{position:relative;display:block;height:clamp(16rem,42vw,26rem);overflow:hidden;}
.bt-karte__bild img{width:100%;height:100%;object-fit:none;object-position:50% 50%;}
.bt-karte__hell{display:var(--bt-nur-hell);}
.bt-karte__dunkel{display:var(--bt-nur-dunkel);}
.bt-karte__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(13,12,27,.35));}
.bt-karte__pin svg{order:2;}
.bt-karte__marke{order:1;margin-bottom:.375rem;padding:.25rem .625rem;white-space:nowrap;
  background:var(--bt-ind-800);color:var(--bt-on-brand);font-size:.8125rem;font-weight:700;}
.bt-karte__bild:focus-visible{outline:3px solid var(--bt-cta);outline-offset:2px;}
.bt-karte__leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding:.875rem 1.125rem;font-size:.9375rem;}
.bt-karte__quelle{font-size:.8125rem;color:var(--bt-n600);}
.bt-karte__quelle a{color:inherit;}

/* ========================================================== Dunkelmodus === */
/* Fast alles kippt von allein, weil Flächen und Schrift über Tokens laufen
   (siehe tokens.css). Hier stehen nur die Fälle, die eine Farbumkehr allein
   nicht löst. */

/* ------------------------------------------------- Logo in der Topbar ---- */
/* Zwei Fassungen im Markup, umgeschaltet über die Sichtbarkeitstokens.
   Ein <picture> mit prefers-color-scheme könnte den Schalter nicht sehen. */
.bt-brand{display:flex;align-items:center;}
.bt-brand__logo--hell{display:var(--bt-nur-hell);}
.bt-brand__logo--dunkel{display:var(--bt-nur-dunkel);}

/* -------------------------------------------------------- Umschalter ----- */

.bt-modus{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;padding:0;margin-inline-start:auto;
  background:transparent;border:1px solid var(--bt-n200);color:var(--bt-n600);
  cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.bt-modus:hover{border-color:var(--bt-ind);color:var(--bt-ind);}
.bt-modus__sonne{display:var(--bt-nur-dunkel);}
.bt-modus__mond{display:var(--bt-nur-hell);}

/* Auf dem Telefon sitzt der Schalter neben dem Menüknopf, nicht im Menü:
   er soll auch bei geschlossener Navigation erreichbar sein. */
/* Die Grenzen folgen dem Umbruchpunkt der Navigation (80em), nicht 64em.
   Solange das Menue eingeklappt ist, bleiben in der Leiste nur Logo,
   Umschalter und Menueknopf - ohne auto-Abstand verteilt space-between die
   drei gleichmaessig und der Umschalter steht mitten im Nichts. */
@media (max-width:79.9375em){
  .bt-modus{margin-inline-start:auto;margin-inline-end:.5rem;}
}
@media (min-width:80em){
  .bt-modus{margin-inline-start:.75rem;margin-inline-end:.25rem;}
}

/* ------------------------------------------- Fremdlogos auf heller Platte */
/* Alle 40 Logos und Branchenicons im Bestand sind dunkle Tinte auf
   Transparenz - im Dunkelmodus wären sie praktisch unsichtbar. Einfärben
   verbietet sich: fremde Wort-/Bildmarken dürfen nicht verändert werden.
   Sie bekommen deshalb eine helle Platte, die im hellen Modus transparent
   und damit unsichtbar ist (--bt-logo-plate). */
.gallery-icon,
.bt-legacy .icon,
.bt-prose .icon,
.bt-logo-platte{
  background:var(--bt-logo-plate);
  padding:var(--bt-logo-plate-pad);
  border-radius:3px;
}

/* Ausnahme: In .text-white-Sektionen war der Grund schon immer dunkel, die
   Bilder dort sind deshalb bereits hell gezeichnet - die ELO-Produkticons
   etwa sind reinweiß (gemessene Helligkeit 255). Eine helle Platte macht sie
   unsichtbar. */
.bt-legacy.text-white .icon,
.bt-legacy.text-white .gallery-icon,
.bt-legacy.image .icon{
  background:none;padding:0;
}

/* Laufband: Die Platte gehört an das einzelne Logo, NICHT an die Spur. Liegt
   sie auf .bt-logowand__item, stoßen die Kacheln aneinander und ergeben einen
   durchgehenden hellen Balken über die ganze Seitenbreite - den die weichen
   Kanten der Maske dann auch noch an den Rändern verwaschen.
   content-box, damit max-height:72px weiter für das Logo selbst gilt und die
   Polsterung außen dazukommt. */
.bt-logowand__item img{
  box-sizing:content-box;
  background:var(--bt-logo-plate);
  padding:var(--bt-logo-chip-pad);
  border-radius:4px;
}
/* -------------------------------- Flächen, die in beiden Modi hell sind -- */
/* Auf einer dauerhaft hellen Fläche müssen die hellen Tokens wieder gelten,
   sonst steht im Dunkelmodus fast weiße Schrift auf fast weißem Grund.
   Betrifft die Galeriekacheln in dunklen Sektionen. */
.bt-auf-hell,
.bt-sec--dark .gallery-item{
  --bt-n0:#fff; --bt-n50:#f8f9fb; --bt-n100:#f3f5f9;
  --bt-n200:#eaedf2; --bt-n300:#d7dce6;
  --bt-n500:#7c8496; --bt-n600:#5d6472; --bt-n800:#2b3040;
  --bt-ind:#554f99; --bt-ind-900:#14376f;
  --bt-cta:#d63c0b; --bt-on-cta:#fff;
  --bt-logo-plate:transparent; --bt-logo-plate-pad:0; --bt-logo-chip-pad:0;
  color:var(--bt-n800);
}

/* Das ALTCHA-Widget bringt eigene Farben mit und rechnet mit hellem Grund.
   Es liest diese Variablen aus, eine Anpassung im Plugin ist nicht nötig. */
.altcha{
  --altcha-color-base:var(--bt-n0);
  --altcha-color-border:var(--bt-n300);
  --altcha-color-text:var(--bt-n800);
  --altcha-color-border-focus:var(--bt-ind);
  --altcha-color-error-text:var(--bt-cta);
}

/* -------------------------------------------------------------- Bilder -- */
/* Fotos und Schemagrafiken wirken auf dunklem Grund überstrahlt. Ein Hauch
   weniger Helligkeit nimmt die Härte, ohne die Farben zu verfälschen.
   Logos sind ausgenommen - sie stehen ohnehin auf heller Platte. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bt-figure img,
  :root:not([data-theme="light"]) .bt-legacy .clmn.image img,
  :root:not([data-theme="light"]) .bt-teaser__media img{filter:brightness(.92);}
}
:root[data-theme="dark"] .bt-figure img,
:root[data-theme="dark"] .bt-legacy .clmn.image img,
:root[data-theme="dark"] .bt-teaser__media img{filter:brightness(.92);}

/* ------------------------------------------- Kundenlogos im b-carousel --- */
/* Das Plugin b-carousel-block rendert seine Slidebilder mit
   object-fit:cover, height:100%, width:100%. Für Fotos ist das richtig, für
   Logos falsch: cover füllt die Slidefläche und schneidet die Überstände ab.
   Solange die Logodateien einen breiten Rand mitbrachten, traf der Schnitt
   nur diesen Rand. Seit die Dateien freigestellt sind, schneidet er in die
   Marke - besonders bei breiten Logos wie rau oder Commend.

   Gleiche Spezifität wie die Plugin-Regel (0,4,1); theme.css wird nach
   build/view.css eingereiht, deshalb gewinnt sie über die Reihenfolge.
   Bei einem Plugin-Update prüfen, ob der Selektor noch stimmt. */
.wp-block-bicb-carousel .bicbCarousel .carouselItem .image img{
  box-sizing:content-box;
  object-fit:contain;
  width:auto;max-width:100%;
  height:auto;max-height:88px;
  margin-inline:auto;
  /* Im Dunkelmodus dieselbe helle Platte wie im Laufband der Startseite. */
  background:var(--bt-logo-plate);
  padding:var(--bt-logo-chip-pad);
  border-radius:4px;
}
.wp-block-bicb-carousel .bicbCarousel .carouselItem .image{
  align-items:center;justify-content:center;
}

/* ------------------------------ Inline-Farben aus dem Editor entschärfen -- */
/* Im Bestand stehen 304 fest eingetragene Schriftfarben im Redaktionsinhalt,
   überwiegend `color: #333333` (208x) und `color: #000000` (26x). Beide sind
   im hellen Modus unauffällig - sie wiederholen nur die Textfarbe - und im
   dunklen unlesbar: #333333 auf #12131c ergibt 1,6:1.

   Inline-Stile lassen sich nur mit !important überstimmen. Die
   Attributselektoren treffen deshalb gezielt die dunklen Werte; Akzentfarben
   wie #ff6600, #ff9900 oder #8cd133 bleiben unberührt. Auch das blaue
   #0000ff ist dabei - es erreicht auf dunklem Grund nur 2,4:1.

   Das ist die Notlösung. Sauber wäre, die Farben aus der Datenbank zu
   entfernen: sie sind auch im hellen Modus überflüssig. */
:root[data-theme="dark"] [style*="color: #333"],
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color: #000"],
:root[data-theme="dark"] [style*="color:#000"],
:root[data-theme="dark"] [style*="color: #0000ff"],
:root[data-theme="dark"] [style*="color:#0000ff"]{color:inherit !important;}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [style*="color: #333"],
  :root:not([data-theme="light"]) [style*="color:#333"],
  :root:not([data-theme="light"]) [style*="color: #000"],
  :root:not([data-theme="light"]) [style*="color:#000"],
  :root:not([data-theme="light"]) [style*="color: #0000ff"],
  :root:not([data-theme="light"]) [style*="color:#0000ff"]{color:inherit !important;}
}

/* --------------------------------------------- Auswahl im CF7-Formular --- */
/* Bevorzugter Kontaktweg als Segmentschalter statt nackter Radiobuttons.
   Der echte Radio bleibt im DOM und fokussierbar (nur optisch ausgeblendet),
   damit Tastatur und Screenreader unverändert funktionieren. */

.bt-wahl{border:0;margin:0;padding:0;min-width:0;}
.bt-wahl legend{padding:0;margin-bottom:.625rem;font-size:.9375rem;font-weight:600;
  color:var(--bt-n800);}
.bt-wahl .wpcf7-radio{display:flex;flex-wrap:wrap;gap:.5rem;}
.bt-wahl .wpcf7-list-item{position:relative;margin:0;}
.bt-wahl .wpcf7-list-item label{display:block;cursor:pointer;margin:0;}
.bt-wahl input[type="radio"]{position:absolute;inset:0;opacity:0;margin:0;
  width:100%;height:100%;cursor:pointer;}
.bt-wahl .wpcf7-list-item-label{display:inline-flex;align-items:center;
  min-height:44px;padding:.5rem 1.25rem;font-size:.9375rem;
  border:1px solid var(--bt-n300);color:var(--bt-n600);background:var(--bt-n0);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;}
.bt-wahl .wpcf7-list-item-label:hover{border-color:var(--bt-ind);color:var(--bt-ind);}
.bt-wahl input:checked + .wpcf7-list-item-label{
  background:var(--bt-ind);border-color:var(--bt-ind);color:var(--bt-on-ind);font-weight:700;}
/* Fokus liegt auf dem unsichtbaren Radio - der Ring muss am Label erscheinen. */
.bt-wahl input:focus-visible + .wpcf7-list-item-label{
  outline:3px solid var(--bt-cta);outline-offset:2px;}
.bt-wahl__hinweis{display:block;margin-top:.5rem;font-size:.875rem;color:var(--bt-n500);}

/* ------------------------------------- Bedienelemente des b-carousel ----- */
/* Pfeile und Punktanzeige legt das Plugin ÜBER die Slides: die Pfeile 10px
   vom Rand, die Punktreihe an den unteren Rand der Fläche. Bei Fotos geht
   das, bei Logos liegen sie mitten auf der Marke.

   Dazu färbt das Plugin beides zur Laufzeit in den im Block gespeicherten
   Ton (#abb8c3). Auf hellem Grund ist das blass, auf dunklem praktisch
   unsichtbar - und die Farbe steckt in den Blockattributen, nicht im CSS,
   wäre also nur im Editor jeder einzelnen Seite zu ändern.

   Deshalb: Die Fläche bekommt Innenabstand, Pfeile und Punkte rücken dort
   hinein, und die Farben kommen aus den Theme-Tokens.

   Die Farben brauchen !important. Das Plugin schreibt zur Laufzeit ein
   <style> mit ID-Selektor (#bicbCarousel-1 .swiper-button-prev{color:...}),
   Spezifität (1,1,0). Die ID wechselt je Blockinstanz, ist also nicht
   zuverlässig nachzubilden. Alles ausser der Farbe kommt ohne aus. */

/* ACHTUNG beim Selektor: .bicbCarousel.default IST das .swiper-Element -
   beide Klassen sitzen am selben div. Ein Nachfahrenselektor
   ".bicbCarousel .swiper" trifft deshalb nichts.

   Pfeile und Punktleiste sind absolut positionierte Kinder genau dieses
   divs. Ihr left:0 bzw. bottom:0 bezieht sich auf dessen Polsterkante, der
   Slidebereich beginnt dagegen erst hinter dem Innenabstand. Innenabstand
   hier trennt also beides voneinander - ohne dass etwas vom overflow:hidden
   abgeschnitten wird. */
.wp-block-bicb-carousel .bicbCarousel.default{
  /* !important aus demselben Grund wie bei der Farbe: Das Plugin schreibt
     zur Laufzeit "padding: 10px" mit ID-Selektor. 10px reichen nicht - der
     Pfeil ist 34px breit und lag damit 24px tief auf dem ersten Logo. */
  padding-inline:2.75rem !important;
  padding-bottom:2rem !important;
}

.wp-block-bicb-carousel .swiper-button-prev,
.wp-block-bicb-carousel .swiper-button-next{
  width:34px;height:34px;margin-top:-17px;
  color:var(--bt-ind) !important;
  border-radius:50%;
  transition:background-color .15s ease,color .15s ease;
}
.wp-block-bicb-carousel .swiper-button-prev{left:0;}
.wp-block-bicb-carousel .swiper-button-next{right:0;}
.wp-block-bicb-carousel .swiper-button-prev::after,
.wp-block-bicb-carousel .swiper-button-next::after{font-size:19px;font-weight:700;color:inherit !important;}
.wp-block-bicb-carousel .swiper-button-prev:hover,
.wp-block-bicb-carousel .swiper-button-next:hover{
  background:var(--bt-ind);color:var(--bt-on-ind) !important;
}
/* Ist nichts mehr zu blättern, soll der Pfeil nicht halb sichtbar bleiben. */
.wp-block-bicb-carousel .swiper-button-disabled{opacity:.25;}

.wp-block-bicb-carousel .swiper-pagination{bottom:0;line-height:1;}
.wp-block-bicb-carousel .swiper-pagination-bullet{
  width:7px;height:7px;margin:0 4px;
  background:var(--bt-n300) !important;opacity:1;
}
.wp-block-bicb-carousel .swiper-pagination-bullet-active{background:var(--bt-ind) !important;}

@media (max-width:30rem){
  .wp-block-bicb-carousel .bicbCarousel.default{padding-inline:2.25rem;}
}