/* Barden — Neuentwurf · Bauteile
 * Alle Farben und Maße kommen aus tokens.css. Keine festen Hex-Werte hier.
 */

html, body { overflow-x: clip; }

body,
.entry-content p, .entry-content li {
  font-family: var(--bn-sans);
  font-size: var(--bn-body);
  line-height: 1.65;
  color: var(--bn-text);
  -webkit-font-smoothing: antialiased;
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--bn-display);
  font-weight: 600;
  font-style: normal;          /* kursive Überschriften: nie */
  color: var(--bn-tinte);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  min-width: 0;
}

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

.bn { max-width: var(--bn-breite); margin-inline: auto; padding-inline: var(--bn-rand); }
.bn-schmal { max-width: var(--bn-schmal); margin-inline: auto; }

.entry-content > * { max-width: none; }

.bn-abschnitt { padding-block: var(--bn-8); }
.bn-abschnitt--eng { padding-block: var(--bn-7); }
.bn-warm   { background: var(--bn-warm); }
.bn-warm-2 { background: var(--bn-warm-2); }
.bn-dunkel { background: var(--bn-dunkel); color: #fff; }
.bn-dunkel :is(h1,h2,h3,p,li) { color: inherit; }

@media (max-width: 767px) {
  .bn-abschnitt { padding-block: var(--bn-7); }
  .bn-abschnitt--eng { padding-block: var(--bn-6); }
}

/* ------------------------------------------------------- Typografie */

.bn-augen {
  display: inline-flex; align-items: center; gap: var(--bn-2);
  font-family: var(--bn-sans);
  font-size: var(--bn-mini); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bn-rot);
  margin-bottom: var(--bn-3);
}
.bn-augen::before {
  content: ""; width: 20px; height: 2px; background: var(--bn-rot);
}

.entry-content .bn-titel, .bn-titel {
  font-size: var(--bn-display-gross);
  line-height: 1.08;
  margin: 0 0 var(--bn-4);
}
.entry-content .bn-h2, .bn-h2 {
  font-size: var(--bn-display-mittel);
  line-height: 1.15;
  margin: 0 0 var(--bn-4);
}
.entry-content .bn-h3, .bn-h3 {
  font-size: var(--bn-h3);
  line-height: 1.3;
  margin: 0 0 var(--bn-2);
}
.bn-lead {
  font-size: var(--bn-lead);
  line-height: 1.55;
  color: var(--bn-text);
  margin: 0 0 var(--bn-5);
}
.bn-leise { color: var(--bn-leise); font-size: var(--bn-klein); }

/* ---------------------------------------------------------- Knöpfe */

.bn-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bn-2);
  font-family: var(--bn-sans);
  font-size: var(--bn-klein); font-weight: 600;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: var(--bn-radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bn-dauer) var(--bn-ease),
              border-color var(--bn-dauer) var(--bn-ease),
              color var(--bn-dauer) var(--bn-ease),
              transform var(--bn-dauer) var(--bn-ease);
}
.bn-knopf--voll  { background: var(--bn-rot); color: #fff; }
.bn-knopf--voll:hover  { background: var(--bn-rot-dunkel); }
.bn-knopf--rand  { background: transparent; color: var(--bn-tinte); border-color: var(--bn-linie); }
.bn-knopf--rand:hover  { border-color: var(--bn-tinte); }
.bn-knopf--hell  { background: #fff; color: var(--bn-tinte); }
.bn-knopf--hell:hover { background: var(--bn-warm-2); }
.bn-knopf:active { transform: translateY(1px); }
.bn-knopf:focus-visible {
  outline: 2px solid var(--bn-rot);
  outline-offset: 3px;          /* erscheint sofort, nie animiert */
}
.bn-knopf[aria-disabled="true"], .bn-knopf:disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

.bn-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--bn-3); }

/* Textlink mit Pfeil */
.bn-pfeil {
  display: inline-flex; align-items: center; gap: var(--bn-2);
  font-family: var(--bn-sans); font-size: var(--bn-klein); font-weight: 600;
  color: var(--bn-rot); text-decoration: none;
}
.bn-pfeil svg { width: 14px; height: 14px; fill: currentColor; transition: transform var(--bn-dauer) var(--bn-ease); }
.bn-pfeil:hover svg { transform: translateX(3px); }
.bn-pfeil:focus-visible { outline: 2px solid var(--bn-rot); outline-offset: 3px; }

/* ----------------------------------------------------------- Karten */

.bn-karten { display: grid; gap: var(--bn-4); }
.bn-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bn-karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bn-karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .bn-karten--3, .bn-karten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bn-karten--2, .bn-karten--3, .bn-karten--4 { grid-template-columns: minmax(0, 1fr); } }

.bn-karte {
  background: var(--bn-papier);
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius-gross);
  padding: var(--bn-5);
  display: flex; flex-direction: column;
  transition: border-color var(--bn-dauer) var(--bn-ease),
              box-shadow var(--bn-dauer) var(--bn-ease);
}
a.bn-karte { text-decoration: none; }
a.bn-karte:hover { border-color: var(--bn-tinte); box-shadow: var(--bn-schatten); }
a.bn-karte:focus-visible { outline: 2px solid var(--bn-rot); outline-offset: 3px; }
.bn-karte p { margin: 0; font-size: var(--bn-klein); }
.bn-karte .bn-h3 { margin-bottom: var(--bn-2); }
.bn-karte__fuss { margin-top: auto; padding-top: var(--bn-4); }

.bn-karte__icon {
  width: 44px; height: 44px; border-radius: var(--bn-radius);
  background: var(--bn-rot-hell);
  display: grid; place-items: center;
  margin-bottom: var(--bn-4);
}
.bn-karte__icon svg { width: 22px; height: 22px; fill: var(--bn-rot); }

/* Bildkarte */
.bn-bildkarte { border-radius: var(--bn-radius-gross); overflow: hidden; display: block; text-decoration: none; position: relative; background: var(--bn-warm-2); }
.bn-bildkarte img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 400ms var(--bn-ease-aus); }
.bn-bildkarte:hover img { transform: scale(1.03); }
.bn-bildkarte__text { position: absolute; inset: auto 0 0 0; padding: var(--bn-5); background: linear-gradient(to top, rgba(23,26,31,.85), rgba(23,26,31,0)); color: #fff; }
.bn-bildkarte__text .bn-h3 { color: #fff; margin: 0; }
.bn-bildkarte:focus-visible { outline: 2px solid var(--bn-rot); outline-offset: 3px; }

/* ---------------------------------------------------- Bewegung aus */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 120ms !important;
  }
  .bn-bildkarte:hover img { transform: none; }
}

/* ======================================================= Kopfbereich */

.bn-held {
  position: relative;
  background: var(--bn-warm);
  border-bottom: 1px solid var(--bn-linie);
  overflow: hidden;
}
.bn-held__innen {
  max-width: var(--bn-breite); margin-inline: auto;
  padding: var(--bn-9) var(--bn-rand) var(--bn-8);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--bn-8);
  align-items: center;
}
.bn-held__titel {
  font-family: var(--bn-display); font-weight: 600;
  font-size: var(--bn-display-gross); line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bn-tinte);
  margin: 0 0 var(--bn-4);
}
.bn-held__titel em { font-style: normal; color: var(--bn-rot); }
.bn-held__lead { font-size: var(--bn-lead); line-height: 1.55; margin: 0 0 var(--bn-6); max-width: 46ch; }
.bn-held__bild { border-radius: var(--bn-radius-gross); overflow: hidden; box-shadow: var(--bn-schatten-hoch); }
.bn-held__bild img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; }

/* Vertrauenszeile direkt unter dem Kopf */
.bn-beleg {
  display: flex; flex-wrap: wrap; gap: var(--bn-3) var(--bn-6);
  padding-top: var(--bn-6); margin-top: var(--bn-6);
  border-top: 1px solid var(--bn-linie);
}
.bn-beleg__punkt { display: flex; align-items: baseline; gap: var(--bn-2); }
.bn-beleg__zahl {
  font-family: var(--bn-display); font-weight: 600;
  font-size: 1.5rem; color: var(--bn-tinte); line-height: 1;
}
.bn-beleg__wort { font-size: var(--bn-klein); color: var(--bn-leise); }

@media (max-width: 900px) {
  .bn-held__innen { grid-template-columns: minmax(0, 1fr); gap: var(--bn-6); padding-block: var(--bn-7) var(--bn-6); }
  .bn-held__bild { order: -1; }
}

/* ================================================ Schadenmeldung */

/* Dauerhafter Streifen über der Kopfzeile: für einen Makler ist der
 * Schadenfall der wichtigste Moment — er darf nicht drei Klicks weit weg
 * liegen. Auf der alten Seite gab es dafür gar keinen Weg. */
.bn-schadenleiste { background: var(--bn-dunkel); color: #fff; }
.bn-schadenleiste__innen {
  max-width: var(--bn-breite); margin-inline: auto;
  padding: 10px var(--bn-rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-2) var(--bn-4);
  font-size: var(--bn-klein);
}
.bn-schadenleiste a { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bn-schadenleiste a:hover { color: #fff; text-decoration: underline; }
.bn-schadenleiste svg { width: 15px; height: 15px; fill: currentColor; }
.bn-schadenleiste__tel { margin-left: auto; color: rgba(255,255,255,.75); }
.bn-schadenleiste__tel a { color: #fff; }
@media (max-width: 700px) { .bn-schadenleiste__tel { margin-left: 0; } }

/* ===================================================== Formular */

.bn-formular { display: grid; gap: var(--bn-4); }
.bn-feld { display: grid; gap: 6px; }
.bn-feld > label { font-size: var(--bn-klein); font-weight: 600; color: var(--bn-tinte); }
.bn-feld input, .bn-feld select, .bn-feld textarea {
  font-family: var(--bn-sans); font-size: var(--bn-body);
  padding: 12px 14px;
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius);
  background: #fff; color: var(--bn-tinte);
  transition: border-color var(--bn-dauer) var(--bn-ease), box-shadow var(--bn-dauer) var(--bn-ease);
}
.bn-feld input:hover, .bn-feld select:hover, .bn-feld textarea:hover { border-color: var(--bn-leise); }
.bn-feld input:focus-visible, .bn-feld select:focus-visible, .bn-feld textarea:focus-visible {
  outline: none;
  border-color: var(--bn-rot);
  box-shadow: 0 0 0 3px var(--bn-rot-hell);
}
.bn-feld input[aria-invalid="true"], .bn-feld textarea[aria-invalid="true"] { border-color: var(--bn-rot); }
.bn-feld__hinweis { font-size: var(--bn-mini); color: var(--bn-leise); }
.bn-feld__fehler { font-size: var(--bn-mini); color: var(--bn-rot); font-weight: 600; }
.bn-feld--paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bn-4); }
@media (max-width: 600px) { .bn-feld--paar { grid-template-columns: minmax(0, 1fr); } }

/* Honigtopf: für Menschen unsichtbar, für Bots verlockend. Kein
 * Rätselbild, keine Rechenaufgabe — nichts, was echte Kunden aufhält. */
.bn-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bn-meldung { padding: var(--bn-4); border-radius: var(--bn-radius); font-size: var(--bn-klein); }
.bn-meldung--gut  { background: #EDF7F0; color: #1A5B31; border: 1px solid #BFE3CC; }
.bn-meldung--fehl { background: var(--bn-rot-hell); color: var(--bn-rot-dunkel); border: 1px solid #F4C4BA; }

/* ================================================== Logowand */

.bn-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--bn-linie); border: 1px solid var(--bn-linie); border-radius: var(--bn-radius-gross); overflow: hidden; }
.bn-logos figure { margin: 0; background: #fff; aspect-ratio: 3/2; display: grid; place-items: center; padding: var(--bn-4); }
.bn-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter var(--bn-dauer) var(--bn-ease), opacity var(--bn-dauer) var(--bn-ease); }
.bn-logos figure:hover img { filter: none; opacity: 1; }
@media (max-width: 1000px) { .bn-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .bn-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================== Kopf & Fuß */

.site-header { border-bottom: 1px solid var(--bn-linie); }
.header-navigation .header-menu-container > ul > li > a {
  font-family: var(--bn-sans); font-size: var(--bn-klein); font-weight: 500;
  color: var(--bn-tinte); letter-spacing: 0;
  padding: 10px 14px; border-radius: var(--bn-radius);
}
.header-navigation .header-menu-container > ul > li > a:hover { color: var(--bn-rot); }
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a { color: var(--bn-rot); }
.site-header-item .site-branding img { max-height: 58px; width: auto; }

.site-footer { background: var(--bn-dunkel); color: rgba(255,255,255,.72); }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }