/*
Theme Name: Banu Bas Steuerberatung
Theme URI: https://www.banu-bas-steuerberatung.de/
Author: Bas Steuerberatungsgesellschaft mbH
Description: Natives Theme der Kanzlei Banu Bas. Enthaelt das komplette Design, ein Mini-CRM fuer Anfragen aus der Potenzialanalyse, Klick-Auswertung, eigene Inhaltstypen fuer Hilfe-Center und Glossar sowie Einstellungen fuer Logo, Mega-Menue, Formularfelder und Kategorie-Banner.
Version: 2.14.1
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: banu-bas
Tags: business, blog, custom-colors, custom-logo, custom-menu, block-styles, wide-blocks
*/

/* ==========================================================================
   Grundlagen aus dem Entwurf
   ========================================================================== */
@font-face{font-family:'Kanit';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/Kanit-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/Kanit-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/Kanit-500i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/Kanit-500i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/Kanit-600i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/Kanit-600i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url(assets/fonts/Kanit-700i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url(assets/fonts/Kanit-700i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Kanit-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/Kanit-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Kanit-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Kanit-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Kanit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Kanit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Kanit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Kanit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Kanit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Kanit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

html { scroll-behavior: smooth; }
  body { margin:0; font-family:'Kanit',sans-serif; color:#0B2350; background:#FFFFFF; -webkit-font-smoothing:antialiased; }
  *, *::before, *::after { box-sizing:border-box; }
  a { color:#0B2350; text-decoration:none; }
  a:hover { color:#35D2E0; }
  p { text-wrap:pretty; }
  summary { list-style:none; }
  summary::-webkit-details-marker { display:none; }

  .has-mega { position: static; }
  .has-mega > a { padding:10px 0; }
  .mega-panel { white-space:normal; display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1) .45s; pointer-events:none; }
  .mega-panel > .mega-inner { min-height:0; overflow:hidden; }
  .has-mega:hover .mega-panel, .mega-panel:hover { grid-template-rows:1fr; pointer-events:auto; transition-delay:0s; }
  .svc-acc summary::-webkit-details-marker { display:none; }
  .svc-acc[open] .svc-chevron { transform: rotate(180deg); }
  @keyframes slideInCta { from { transform: translateX(135%); opacity:0; } to { transform: translateX(0); opacity:1; } }
      @supports (animation-timeline: scroll()) {
    .cta-rail { animation: slideInCta linear both, ctaPeek 5s ease-in-out 2s infinite; animation-timeline: scroll(root block), auto; animation-range: 120px 320px, normal; }
  }

/* ==========================================================================
   Banu Bas Steuerberatung, globale Ergaenzungen zum Design
   ========================================================================== */

:root {
  --navy: #0B2350;
  --navy-deep: #08193B;
  --cyan: #35D2E0;
  --cyan-soft: #E4F6F9;
  --ink-soft: #6E7EB8;
  --line: #E9EDF3;
  --shell: 32px;
}

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

/* Sprungmarke: erst beim Tabben sichtbar */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: #0B2350; color: #FFFFFF;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-size: 15px; font-weight: 500;
}
main:focus { outline: none; }
img, video, iframe { max-width: 100%; }
body { overflow-x: clip; }

/* --- Schwebendes Mega-Menue ---------------------------------------------
   Der Zustand haengt am <html>, weil der reine CSS-Hover bei einem
   Rerender der Design-Runtime verloren geht. */
.mega-panel { padding-bottom: 18px; }
.has-mega:hover .mega-panel { grid-template-rows: 0fr; pointer-events: none; }
.mega-open .mega-panel {
  grid-template-rows: 1fr !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}
.mega-card {
  background: #FFFFFF;
  /* gleicher Radius wie die uebrigen CTA-Flaechen im Design */
  border-radius: 6px;
}
/* Der Termin-Button im Mega-Menue bekommt die Maße des Kopf-Buttons,
   sonst dominiert er die Karte und die Beschriftung bricht um. */
.mega-card a[href="/potenzialanalyse/"] {
  gap: 10px !important;
  padding: 12px 22px 12px 15px !important;
}
.mega-card a[href="/potenzialanalyse/"] img {
  width: 28px !important; height: 28px !important; flex: 0 0 28px !important;
}
.mega-card a[href="/potenzialanalyse/"] span span:first-child {
  font-size: 16.6px !important; font-weight: 500 !important; white-space: nowrap;
}
.mega-card a[href="/potenzialanalyse/"] span span:last-child { font-size: 10.6px !important; }
.mega-card > div > a { transition: background .18s ease, transform .18s ease; }
.mega-card > div > a:hover { transform: translateY(-1px); }

/* --- Kennzahlenraster, Zeilen bleiben oben buendig ----------------------- */
/* Die Inline-Styles des Designs setzen display:flex, deshalb hier bewusst !important. */
.blick-grid > div { display: grid !important; grid-template-rows: subgrid; grid-row: span 2; gap: 8px; align-content: start; }
.blick-grid > div > span:first-child { font-size: clamp(15.5px, 1.35vw, 18.5px) !important; line-height: 1.25; text-wrap: balance; }
@supports not (grid-template-rows: subgrid) {
  .blick-grid > div { display: flex !important; flex-direction: column; }
  .blick-grid > div > span:first-child { min-height: 2.5em; }
}

/* --- Akkordeons, ein Pfeil ueberall -------------------------------------- */
.svc-chevron { display: inline-flex; align-items: center; color: var(--ink-soft); transition: transform .25s ease; }
.svc-acc[open] .svc-chevron { transform: rotate(180deg); }
.svc-acc summary { transition: background .18s ease; }

/* --- Inhaltsverzeichnis im Blog ------------------------------------------ */
.toc-link { position: relative; padding: 9px 12px 9px 15px; border-radius: 9px; transition: background .2s ease, color .2s ease; }
.toc-link::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 66%; border-radius: 3px; background: var(--cyan); transition: transform .22s ease;
}
.toc-link.is-active { background: #FFFFFF; color: var(--navy); font-weight: 500; }
.toc-link.is-active::before { transform: translateY(-50%) scaleY(1); }

/* --- Ablauf-Widget ------------------------------------------------------- */
.flow-step { opacity: .45; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.flow-step.is-open { opacity: 1; transform: none; }
.flow-step .flow-body {
  display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}
.flow-step .flow-body > div { min-height: 0; overflow: hidden; }
.flow-step.is-open .flow-body { grid-template-rows: 1fr; opacity: 1; }
.flow-step .flow-dot { transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.flow-step.is-open .flow-dot { background: var(--cyan); border-color: var(--cyan); transform: scale(1.1); }
.flow-rail-fill { transform-origin: top; transform: scaleY(0); }

/* --- Burger und mobiles Menue -------------------------------------------- */
.nav-burger {
  display: none; width: 48px; height: 48px; border: 0;
  background: rgba(11, 35, 80, .06);
  border-radius: 14px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: background .2s ease;
}
.nav-burger:hover { background: rgba(11, 35, 80, .1); }
.nav-burger span {
  display: block; height: 2px; border-radius: 2px; background: var(--navy);
  transition: width .28s ease, transform .3s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
/* Zwei Striche unterschiedlicher Laenge, der dritte entfaellt */
.nav-burger span:nth-child(1) { width: 20px; }
.nav-burger span:nth-child(2) { width: 13px; align-self: flex-start; margin-left: 14px; }
.nav-burger span:nth-child(3) { display: none; }
.nav-burger:hover span:nth-child(2) { width: 20px; margin-left: 14px; }

.nav-open .nav-burger { background: rgba(53, 210, 224, .16); }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { width: 20px; margin-left: 14px; transform: translateY(-4px) rotate(-45deg); }

/* Klammert das geschlossene Menue ein, damit es keine Scrollbreite erzeugt. */
.mm-shell {
  position: fixed; inset: 0; z-index: 110;
  overflow: hidden; pointer-events: none;
}
.nav-open .mm-shell { pointer-events: auto; }
.mm-shell > * { pointer-events: auto; }

.mobile-menu {
  position: absolute; top: 0; right: 0; z-index: 120;
  width: min(430px, 92vw); height: 100%;
  background: #FFFFFF;
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .38s cubic-bezier(.32, .72, 0, 1);
  visibility: hidden;
  box-shadow: -30px 0 60px rgba(8, 25, 59, .18);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-open .mobile-menu { transform: none; visibility: visible; }

/* Kopfzeile */
.mm-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: calc(env(safe-area-inset-top) + 16px) 20px 16px;
  border-bottom: 1px solid var(--line);
}
.mm-logo { height: 46px; width: auto; display: block; }
.mm-close {
  width: 44px; height: 44px; flex: 0 0 44px; border: 0;
  background: #F2F2F2; color: var(--navy); border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.mm-close:hover { background: #F5F7FA; }

/* Scrollbereich */
.mm-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px; }
.mm-inner { display: flex; flex-direction: column; gap: 2px; }

.mm-link, .mm-sum {
  opacity: 0; transform: translateY(8px);
  transition: opacity .34s ease, transform .34s ease;
  transition-delay: calc(var(--i, 0) * 38ms + 90ms);
}
.nav-open .mm-link, .nav-open .mm-sum { opacity: 1; transform: none; }

.mm-link {
  display: flex; align-items: center; min-height: 52px;
  padding: 12px 14px; border-radius: 12px;
  font-size: 19px; font-weight: 400; color: var(--navy);
}
.mm-link:hover, .mm-link:active { background: #F2F6FB; }

/* Aufklappbare Gruppen */
.mm-group { border-radius: 12px; }
.mm-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  list-style: none; font-size: 19px; font-weight: 400; color: var(--navy);
}
.mm-sum { width: 100%; border: 0; background: none; text-align: left; font-family: inherit; }
.mm-sum svg { color: #9FB3D8; transition: transform .28s ease; flex: 0 0 auto; }
.mm-group.is-open > .mm-sum { background: #F2F6FB; font-weight: 500; }
.mm-group.is-open > .mm-sum svg { transform: rotate(180deg); color: var(--cyan); }
/* Bewusst ueber max-height statt des fr-Tricks: der laesst sich hier
   nicht zuverlaessig aufloesen und blieb bei null. */
.mm-sublist {
  max-height: 0; overflow: hidden;
  transition: max-height .36s cubic-bezier(.4, 0, .2, 1);
}
.mm-group.is-open .mm-sublist { max-height: 420px; }
.mm-sublist > div { display: flex; flex-direction: column; padding-bottom: 6px; }
.mm-sub {
  position: relative; display: flex; align-items: center; min-height: 46px;
  margin-left: 22px; padding: 10px 14px 10px 16px;
  font-size: 16px; font-weight: 300; color: var(--ink-soft); border-radius: 10px;
}
.mm-sub::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1.5px; background: var(--line);
}
.mm-sub:hover { background: #F2F6FB; color: var(--navy); }
.mm-sub:hover::before { background: var(--cyan); }

/* Fussbereich */
.mm-foot {
  flex: 0 0 auto; border-top: 1px solid var(--line);
  background: #FAFBFD; padding: 18px 16px calc(env(safe-area-inset-bottom) + 18px);
  display: flex; flex-direction: column; gap: 16px;
}
.mm-cta {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, #35D2E0, #12A7BC); color: var(--navy);
  border-radius: 999px; padding: 12px 26px 12px 12px; min-height: 64px;
}
.mm-cta svg {
  flex: 0 0 42px; width: 42px; height: 42px; padding: 9px; box-sizing: border-box;
  color: var(--navy); background: rgba(11, 35, 80, .14); border-radius: 50%;
}
.mm-cta-text { display: flex; flex-direction: column; line-height: 1.25; }
.mm-cta-text strong { font-size: 17px; font-weight: 600; }
.mm-cta-text span { font-size: 12px; font-weight: 300; opacity: .78; }

.mm-contact { display: flex; flex-direction: column; gap: 2px; }
.mm-contact-row {
  display: flex; align-items: center; gap: 11px; min-height: 40px;
  font-size: 14px; font-weight: 300; color: var(--ink-soft);
  padding: 6px 4px; border-radius: 8px;
}
.mm-contact-row svg {
  flex: 0 0 30px; width: 30px; height: 30px; padding: 7px; box-sizing: border-box;
  color: var(--navy); background: rgba(53, 210, 224, .18); border-radius: 50%;
}
.mm-contact-row:hover { color: var(--navy); background: #F2F6FB; }
.mm-hours { font-size: 12px; color: #9FB3D8; padding: 6px 4px 0; }

.mm-backdrop {
  position: absolute; inset: 0; z-index: 110;
  background: rgba(8, 25, 59, .5); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
.nav-open .mm-backdrop { opacity: 1; pointer-events: auto; }
.nav-open { overflow: hidden; }

/* --- Touch-Ziele ---------------------------------------------------------- */
a, button, summary { -webkit-tap-highlight-color: rgba(53, 210, 224, .18); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Seitenraender ueberall an einer Stelle */
.shell { padding-left: var(--shell) !important; padding-right: var(--shell) !important; }

/* Kleiner Desktop und Tablet quer */
@media (max-width: 1180px) {
  :root { --shell: 26px; }
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .mega-panel { display: none !important; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Fusszeile mit sechs Spalten: bis 1240 px zwei Reihen zu je drei Spalten,
   damit lange Linktexte wie „Geschäftsführer-Netto“ nicht umbrechen. */
@media (min-width: 981px) and (max-width: 1240px) {
  footer > .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 44px !important; }
}

/* Zwischen Tablet und kleinem Desktop wird der Fuss sonst so schmal, dass
   ein langer Leistungsname mit Aktivpunkt aus seiner Spalte laeuft. */
@media (min-width: 981px) and (max-width: 1180px) {
  footer > .g-side { gap: 22px !important; }
}

/* Tablet */
@media (max-width: 980px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g-side { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  .g-toc { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .g-toc > div:first-child { position: static !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; }
  /* Einspaltig darf keine Randspalte mehr kleben, sonst laeuft sie ueber den Text */
  .g-side > [style*="sticky"], .g-toc > [style*="sticky"] { position: static !important; top: auto !important; }
  .blick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Alternierende Zeitleiste wird zur linken Schiene:
     Ziffer in der ersten Spalte, Inhalt daneben, leere Haelfte faellt weg. */
  .g-timeline {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 16px !important; align-items: start !important;
  }
  .g-timeline > div:empty { display: none !important; }
  .g-timeline > span { grid-column: 1 !important; grid-row: 1 !important; }
  /* Der aktive Eintrag rueckt auf dem Desktop zur Mitte, hier bliebe davon
     nur ein Versatz nach rechts uebrig. */
  .g-timeline > div {
    grid-column: 2 !important; grid-row: 1 !important;
    text-align: left !important; padding: 14px 16px !important; transform: none !important;
  }
  /* Die Schiene wandert von der Mitte auf die Ziffernspalte */
  .tl-rail { left: 19px !important; transform: none !important; }
}

/* Mobil */
@media (max-width: 680px) {
  :root { --shell: 18px; }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .blick-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .card-fixed { flex: 0 0 82vw !important; width: 82vw !important; }
  .shell { padding-top: 46px !important; padding-bottom: 46px !important; }
  /* Faengt einzelne absolut positionierte Deko-Elemente ab.
     Nur mobil, weil das klebende Inhaltsverzeichnis hier ohnehin statisch steht. */
  .shell { overflow-x: clip !important; }
  .mm-link { font-size: 19px; }
  /* Artikel und Karten enger fassen */
  .pad-lg { padding: 22px 16px !important; }
  /* Zeilenbegrenzungen aufheben, damit Titel vollstaendig lesbar bleiben */
  h3[style*="-webkit-line-clamp"] { -webkit-line-clamp: 3 !important; min-height: 0 !important; }
  /* Fusszeilen-Links als bequem treffbare Zeilen */
  footer > .g-side > div > a { min-height: 40px; display: flex; align-items: center; }
  /* Ankreuzfeld gross genug fuer den Daumen */
  label > input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #12A7BC; }
}

/* Sehr schmale Geraete */
@media (max-width: 380px) {
  :root { --shell: 14px; }
  /* Lange Komposita passen sonst in keine Zeile. Die Seite ist auf Deutsch
     ausgezeichnet, deshalb trennt der Browser an den richtigen Stellen. */
  h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
}

/* --- Software-Logos ------------------------------------------------------
   Vier Kacheln nebeneinander funktionieren nur auf breiten Flaechen. Darunter
   zwei Spalten, die Logos werden ueber die Hoehe auf ein Mass gebracht. */
@media (max-width: 680px) {
  .logo-row.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .logo-row > div { height: 64px !important; padding: 8px 12px !important; }
  .logo-row img { max-height: 30px !important; }
  .logo-row img[src*="datev"] { max-height: 34px !important; }
  .logo-row img[src*="buchhaltungsbutler"] { max-height: 21px !important; }
  /* Die kleineren Kacheln der Leistungsseiten fuellen die Zeile zu zweit */
  .logo-mini-row { gap: 8px !important; }
  .logo-mini { flex: 1 1 calc(50% - 4px) !important; max-width: none !important; height: 52px !important; }
  .logo-mini img { max-height: 26px !important; }
  .logo-mini img[src*="buchhaltungsbutler"] { max-height: 18px !important; }
}

/* --- Ablauf-Widget -------------------------------------------------------
   Auf dem Desktop oeffnet sich beim Scrollen jeweils ein Schritt. Auf kleinen
   Flaechen steht alles offen, sonst wirken die Texte abgeschnitten. */
@media (max-width: 980px) {
  [data-step] { background: transparent !important; padding: 10px 14px !important; }
  [data-step] > div > div { grid-template-rows: 1fr !important; opacity: 1 !important; }
  /* Alle Schritte stehen offen, damit bleibt nur die durchgehende Schiene.
     Der scrollgesteuerte Fortschrittsbalken entfaellt hier. */
  .flow-rail-fill { display: none !important; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .flow-step { opacity: 1; transform: none; }
  .flow-step .flow-body { grid-template-rows: 1fr; opacity: 1; }
}

/* --- Kopfbereich: Logo und Navigation praesenter --------------------------- */
header .nav-desktop { font-size: 17.5px !important; gap: 38px !important; }
header > div > a[href="/"] img { height: 62px !important; }
footer img[alt="Banu Bas Steuerberatung"] { height: 48px !important; }
@media (max-width: 680px) {
  header > div > a[href="/"] img { height: 52px !important; }
}

/* --- Kopfbereich mobil ---------------------------------------------------- */
@media (max-width: 1180px) {
  header > div { padding-left: var(--shell) !important; padding-right: var(--shell) !important; }
  header > div > a[href="/"] { flex: 0 0 auto; }
}
@media (max-width: 680px) {
  /* Im Kopf bleiben Logo und Menue, der Termin-Button sitzt schwebend unten rechts */
  header > div > div:last-child > a { display: none !important; }
  .cta-rail { display: flex !important; right: 12px !important; bottom: 14px !important; }
  .cta-rail a { padding: 8px 18px 8px 8px !important; font-size: 14px !important; }
  .cta-rail a img { width: 36px !important; height: 36px !important; }
  .cta-rail .cta-siegel { width: 64px !important; height: 64px !important; }
}

/* --- Aktive Seite: türkiser Punkt vor dem Link ---------------------------- */
a.is-current, .mm-link.is-current, .mm-sub.is-current {
  color: #FFFFFF;
  font-weight: 500;
}
footer a.is-current { color: #FFFFFF; }
/* Der Link wird zum Flex-Container, damit der Punkt exakt auf der
   Textmitte sitzt. Links mit eigenem display im Inline-Style behalten ihres. */
a.is-current { display: inline-flex; align-items: center; }
a.is-current::before {
  content: "";
  display: block;
  width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%;
  background: var(--cyan);
  margin-right: 9px;
}
/* Im hellen Kontext bleibt die Schrift dunkelblau */
header a.is-current, .mega-card a.is-current, .mm-link.is-current, .mm-sub.is-current {
  color: var(--navy);
}
/* In der Hauptnavigation bleibt der aktive Punkt tuerkis wie im Entwurf */
.nav-desktop > a.is-current,
.nav-desktop .has-mega > a.is-current { color: var(--cyan); font-weight: 500; }
.mm-sub.is-current { font-weight: 400; }
/* Das Logo bleibt ohne Punkt */
header > div > a[href="/"].is-current::before,
footer a[href="/"].is-current::before { content: none; }

/* --- Termin-Button in der Beitrags-CTA-Box kompakter -----------------------
   Der Baustein ist derselbe wie sonst, hier aber eine Stufe kleiner, damit
   er die Box nicht dominiert. */
.cta-box a[href="/potenzialanalyse/"] {
  gap: 11px !important;
  padding: 9px 22px 9px 9px !important;
}
.cta-box a[href="/potenzialanalyse/"] img {
  width: 28px !important; height: 28px !important; flex: 0 0 28px !important;
}
.cta-box a[href="/potenzialanalyse/"] span span:first-child { font-size: 14px !important; }
.cta-box a[href="/potenzialanalyse/"] span span:last-child { font-size: 10.5px !important; }

/* --- Autorenzeile im Beitrag: eine Zeile, etwas kleiner ------------------- */
.autorzeile { flex-wrap: nowrap !important; }
.autorzeile > img { width: 34px !important; height: 34px !important; flex: 0 0 34px; }
.autorzeile span:first-child { font-size: 13.5px !important; }
.autorzeile span:last-child { font-size: 11.5px !important; }
.autorzeile button { font-size: 13px !important; padding: 6px 14px 6px 7px !important; white-space: nowrap; }
.autorzeile button img { width: 22px !important; height: 22px !important; }

/* --- Hilfe-Center --------------------------------------------------------
   Suche, Bereichsleiste und Gruppen. Die Antworten sind <details> und
   funktionieren auch ohne Skript. */
.faq-suche {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .09);
  border: 0;
  border-radius: 999px; padding: 14px 22px; max-width: 560px;
  transition: background .18s ease;
}
.faq-suche:focus-within { background: rgba(255, 255, 255, .15); }
.faq-suche svg { flex: 0 0 19px; }
.faq-suche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 15.6px; font-weight: 300; color: #FFFFFF;
}
.faq-suche input::placeholder { color: #7C90BC; }
.faq-suche input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.faq-treffer { font-size: 13.6px; font-weight: 300; color: #8FA3C8; }

.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav > a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 0; border-radius: 999px;
  padding: 9px 16px; font-size: 14.2px; font-weight: 400; color: var(--navy);
  transition: background .16s ease, color .16s ease;
}
.faq-nav > a:hover { border-color: var(--cyan); background: #F2FCFD; color: var(--navy); }
.faq-nav > a > span {
  font-size: 11.6px; font-weight: 500; color: var(--ink-soft);
  background: #F2F4F8; border-radius: 999px; padding: 2px 7px;
}

.faq-gruppe { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px; }
.faq-gruppe > h2 { padding-top: 4px; border-top: 1px solid var(--line); }
.faq-mehr {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.6px; font-weight: 500; color: #12A7BC; margin-top: 2px;
}
.faq-mehr:hover { color: var(--navy); }
.faq-eintrag[hidden] { display: none; }
.faq-leer { margin: 0; font-size: 15.4px; line-height: 1.8; font-weight: 300; color: var(--ink-soft); }

@media (max-width: 680px) {
  .faq-suche { padding: 11px 16px; gap: 9px; }
  .faq-suche input { font-size: 15px; }
  .faq-nav > a { font-size: 13.4px; padding: 8px 13px; }
}

/* --- Aufzaehlungen im Fachbeitrag ---------------------------------------
   Der Punkt sitzt als tuerkiser Kreis in der ersten Zeile, damit auch
   mehrzeilige Eintraege sauber einruecken. */
.post-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.post-list > li { position: relative; padding-left: 27px; }
.post-list > li::before {
  content: ""; position: absolute; left: 3px; top: .78em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
}
@media (max-width: 680px) {
  .post-list > li { padding-left: 23px; }
  .post-list > li::before { left: 0; width: 8px; height: 8px; }
}

/* --- Tabellen im Fachbeitrag ---------------------------------------------
   Auf schmalen Flaechen bekommt die Tabelle einen eigenen Scrollbereich,
   damit die Seite selbst nicht seitlich laeuft. */
.post-table {
  overflow-x: auto;
  border: 0;
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}
.post-table table { min-width: 460px; }
.post-table th:first-child, .post-table td:first-child { padding-left: 16px; }
.post-table tr:last-child td { border-bottom: 0; }

/* --- Akkordeons: Radius am Rahmen, damit an den Seiten keine Lücke bleibt - */
.svc-acc { border-radius: 10px; overflow: hidden; }
.svc-acc > summary, .svc-acc > p, .svc-acc > div { border-radius: 0 !important; }

/* --- Weitere FAQ hinter „Mehr Fragen anzeigen" ---------------------------
   Sichtbar sind die ersten Fragen, der Rest liegt in .faq-rest und wird per
   Klick eingeblendet. Das Layout steht hier und nicht inline, damit das
   hidden-Attribut den Rest wirklich verbirgt. */
.faq-rest { display: flex; flex-direction: column; gap: 10px; }
.faq-mehr-wrap { display: flex; justify-content: center; margin-top: 6px; }
/* Verborgen über die Klasse, damit es den Snapshot des Design-Builds
   übersteht, der boolesche Attribute wie hidden verwirft. */
.faq-zu { display: none !important; }
.faq-mehr { transition: background .18s ease, color .18s ease; }
.faq-mehr:hover { background: #EAF7F9 !important; color: #0E8FA0 !important; }
.faq-mehr:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.faq-mehr .ic { transition: transform .2s ease; }

/* --- Schwebender Termin-Button -------------------------------------------
   Der Handoff laesst ihn im Fuenf-Sekunden-Takt hinausrutschen, das wirkt
   unruhig. Stattdessen gleitet er beim Scrollen herein und oben wieder hinaus. */
.cta-rail {
  animation: none !important;
  transform: translateX(135%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
.rail-on .cta-rail { transform: none; opacity: 1; pointer-events: auto; }
.cta-rail > a { box-shadow: 0 14px 34px rgba(8, 25, 59, .22); }
@media (prefers-reduced-motion: reduce) {
  .cta-rail { transition: opacity .2s ease; transform: none; }
}

/* --- Inhaltsverzeichnis mobil als aufklappbares Feld ---------------------- */
.toc-fab {
  display: none;
  position: fixed; right: 12px; z-index: 79;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: #FFFFFF; color: var(--navy); cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(8, 25, 59, .2);
}
.toc-fab svg { transition: transform .28s ease; }
.toc-open .toc-fab svg { transform: rotate(180deg); }
.toc-sheet {
  display: none;
  position: fixed; right: 12px; left: 12px; z-index: 78;
  background: #FFFFFF; border-radius: 16px; padding: 16px 14px;
  box-shadow: 0 18px 44px rgba(8, 25, 59, .24);
  max-height: 46vh; overflow-y: auto;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
}
.toc-open .toc-sheet { opacity: 1; transform: none; pointer-events: auto; }
.toc-sheet-title {  display: block; font-size: 12.9px;
  color: #9FB3D8; padding: 2px 10px 8px;
}
.toc-sheet a {
  display: flex; align-items: center; min-height: 46px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 300; color: var(--ink-soft);
}
.toc-sheet a.is-active { background: #F2F6FB; color: var(--navy); font-weight: 500; }

@media (max-width: 980px) {
  .toc-fab { display: flex; }
  .toc-sheet { display: block; }
  /* Das eingebettete Inhaltsverzeichnis entfällt, es steckt jetzt im Feld */
  .g-toc > div:first-child { display: none !important; }
}

/* --- Mobile Feinheiten ---------------------------------------------------- */
@media (max-width: 680px) {
  :root { --shell: 14px; }
  .pad-lg { padding: 22px 16px !important; }

  /* Autorenbox stapeln statt zweispaltig */
  .autorbox { flex-direction: column !important; gap: 14px !important; padding: 22px 18px !important; }

  /* Karussellkarten bleiben innerhalb des Containers, Pfeile entfallen */
  div:has(> .testi-scroll) > button { display: none !important; }
  .card-fixed { flex: 0 0 100% !important; width: 100% !important; }
  .testi-scroll { gap: 14px !important; }
}


/* ==========================================================================
   Ergaenzungen fuer WordPress
   ========================================================================== */

/* Der Editor soll dieselben Abstaende zeigen wie die Seite */
.entry-content > * { margin-block: 0; }
.wp-block-image img { max-width: 100%; height: auto; }

/* Blockstile fuer den Fachbeitrag, im Editor unter „Stile" auswaehlbar */
/* Hinweiskasten mit einer Fahne, die halb über der Kante sitzt */
.is-style-banu-infobox {
  position: relative;
  margin-top: 26px;
  background: var(--cyan-soft);
  border: 0;
  border-radius: 6px;
  padding: 30px 26px 24px;
  font-size: 14.8px; line-height: 1.8; font-weight: 300; color: var(--navy);
}
.is-style-banu-infobox::before {  content: "Gut zu wissen";
  position: absolute;
  top: 0; left: 22px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  background: var(--navy) no-repeat 13px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2335D2E0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  color: #FFFFFF;
  font-size: 12.9px; font-weight: 500;
  padding: 7px 15px 7px 35px;
  border-radius: 999px;
  white-space: nowrap;
}
.is-style-banu-infobox > *:first-child { margin-top: 0; }
.is-style-banu-infobox > *:last-child { margin-bottom: 0; }
.is-style-banu-quote {
  margin: 0; border-left: 3px solid var(--cyan); background: var(--cyan-soft);
  border-radius: 0 6px 6px 0; padding: 18px 22px;
  font-size: 16.2px; line-height: 1.8; font-weight: 400; color: var(--navy); font-style: italic;
}
.is-style-banu-quote cite { display: block; margin-top: 8px; font-size: 13.6px; font-style: normal; color: var(--ink-soft); }
.is-style-banu-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.is-style-banu-liste > li { position: relative; padding-left: 27px; font-size: 16.2px; line-height: 1.9; font-weight: 300; color: var(--navy); }
.is-style-banu-liste > li::before {
  content: ""; position: absolute; left: 3px; top: .78em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
}
.is-style-banu-tabelle { border: 0; }
.is-style-banu-tabelle table { width: 100%; border-collapse: collapse; font-size: 13.4px; line-height: 1.6; }
.is-style-banu-tabelle th {
  text-align: left; font-weight: 500; color: var(--navy); background: var(--cyan-soft);
  padding: 11px 14px; border-bottom: 1px solid #D3E7EC; white-space: nowrap;
}
.is-style-banu-tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 300; color: var(--navy); vertical-align: top; }
.is-style-banu-tabelle tr:last-child td { border-bottom: 0; }

/* Kategorie-Banner im Beitrag */
/* Im Hintergrund steht Banu selbst. Das Bild sitzt rechts, damit der
   Text auf der dunklen Seite steht und ihr Gesicht frei bleibt. */
/* Kategorie-Banner: Foto im Hintergrund mit dunklem Schleier, Inhalt links. */
.banu-kat-cta { position: relative; border-radius: 6px; overflow: hidden; background-size: cover; background-position: right 22%; }
.banu-kat-cta > .banu-kat-schleier { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,35,80,.96) 40%, rgba(11,35,80,.55) 100%); }
.banu-kat-cta > .banu-kat-innen { position: relative; z-index: 1; padding: 34px 34px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Blog-Hero: Navy mit grossflaechigem, ruhigem Muster, weiche Farbverlaeufe und
   eine grosse organische Form rechts, keine Punkte, keine Linien. */
.banu-artikel-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(78% 130% at 114% -25%, rgba(53,210,224,.20), transparent 58%),
    radial-gradient(60% 100% at -12% 122%, rgba(53,210,224,.10), transparent 55%),
    linear-gradient(120deg, #0B2350 0%, #0E2A5E 100%);
}
.banu-artikel-hero::after {
  content: ""; position: absolute; right: -80px; bottom: -130px; z-index: 0;
  width: 440px; height: 440px; border-radius: 46% 54% 52% 48%;
  background: radial-gradient(circle at 42% 40%, rgba(53,210,224,.13), rgba(53,210,224,0) 70%);
  pointer-events: none;
}
.banu-artikel-hero > * { position: relative; z-index: 1; }
.banu-kat-cta h3 { margin: 0; font-size: clamp(23.5px, calc(20.4px + 0.82vw), 30.6px); line-height: 1.25; font-weight: 400; color: #FFFFFF; max-width: 620px; }
.banu-kat-cta p { margin: 0; font-size: 14.5px; line-height: 1.7; font-weight: 300; color: #B9C8E4; max-width: 580px; }
/* Drei Punkte statt Fließtext, jeder mit einem Haken davor */
.banu-kat-punkte {
  margin: 2px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px; max-width: 620px;
}
.banu-kat-punkte > li {
  position: relative; padding-left: 32px;
  font-size: 15.4px; line-height: 1.6; font-weight: 300; color: #D3DFF3;
}
.banu-kat-punkte > li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(53, 210, 224, .17) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2335D2E0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E");
}
.banu-kat-cta .banu-kat-knopf {
  align-self: flex-start; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #35D2E0, #12A7BC); color: var(--navy);
  padding: 11px 30px 11px 13px; border-radius: 999px; margin-top: 10px;
}
.banu-kat-cta .banu-kat-knopf img { width: 28px; height: 28px; flex: 0 0 28px; display: block; }
.banu-kat-cta .banu-kat-knopf span { display: flex; flex-direction: column; line-height: 1.25; }
.banu-kat-cta .banu-kat-knopf b { font-size: 17px; font-weight: 600; color: var(--navy); }
.banu-kat-cta .banu-kat-knopf i { font-size: 12.5px; font-weight: 300; font-style: normal; color: rgba(11,35,80,.72); }

/* Beitragsgitter im Fachwissen */
.banu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.banu-karte { background: #FFFFFF; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: var(--navy); }
.banu-karte-bild { position: relative; height: 200px; overflow: hidden; }
.banu-karte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.banu-karte-text { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.banu-karte-kat { align-self: flex-start; background: var(--cyan-soft); color: #12A7BC; font-size: 12.9px; font-weight: 500; padding: 5px 11px; border-radius: 4px; }
.banu-karte h3 { margin: 0; font-size: 17.9px; line-height: 1.4; font-weight: 500; color: var(--navy); }
.banu-karte p { margin: 0; font-size: 14.8px; line-height: 1.7; font-weight: 300; color: var(--ink-soft); flex: 1; }
.banu-karte-meta { font-size: 12.9px; color: #9FB3D8; font-weight: 500; }
.banu-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.banu-filter a {
  display: inline-flex; align-items: center; background: #FFFFFF; border: 0;
  border-radius: 999px; padding: 9px 18px; font-size: 14.2px; color: var(--navy);
}
.banu-filter a.aktiv, .banu-filter a:hover { background: var(--cyan-soft); color: var(--navy); }
@media (max-width: 980px) { .banu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .banu-grid { grid-template-columns: minmax(0, 1fr); } }


/* Fragen im Beitrag: dieselbe Anmutung wie die Akkordeons der Seite.
   Ohne diese Regeln steht dort nur blauer Text untereinander. */
.entry-content .wp-block-details,
.wp-block-details.is-style-banu-faq {
  background: #F2F2F2; border-radius: 6px; overflow: hidden;
  padding: 0; margin: 0;
}
.entry-content .wp-block-details + .wp-block-details { margin-top: 10px; }
.entry-content .wp-block-details > summary,
.wp-block-details.is-style-banu-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-size: 16.2px; font-weight: 500; color: var(--navy);
}
.entry-content .wp-block-details > summary::-webkit-details-marker,
.entry-content .wp-block-details > summary::marker { display: none; content: ""; }
.entry-content .wp-block-details > summary::after {
  content: ""; flex: 0 0 15px; width: 15px; height: 15px;
  background: no-repeat center / 15px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239FB3D8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  transition: transform .25s ease;
}
.entry-content .wp-block-details[open] > summary::after { transform: rotate(180deg); }
.entry-content .wp-block-details > summary:hover { background: #EDEFF3; }
.entry-content .wp-block-details > *:not(summary) {
  margin: 0; padding: 0 18px 18px;
  font-size: 16.2px; line-height: 1.85; font-weight: 300; color: var(--ink-soft);
}

/* Tabellen im Beitrag: auf schmalen Flächen waagerecht schiebbar,
   mit einem weichen Rand als Hinweis, dass rechts noch etwas kommt. */
.entry-content .wp-block-table,
.entry-content .post-table { position: relative; margin: 0; }
.entry-content .wp-block-table > table,
.entry-content .post-table > table { min-width: 460px; }
.entry-content .wp-block-table,
.entry-content .post-table {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.entry-content .wp-block-table table,
.entry-content .post-table table {
  width: 100%; border-collapse: collapse; border: 0;
  font-size: 14.6px; line-height: 1.65;
}
/* Die Blockbibliothek zieht um jede Zelle einen Rahmen und einen kräftigen
   Strich unter den Kopf. Beides wird zurückgenommen, es bleiben feine
   Trennlinien zwischen den Zeilen. */
.entry-content .wp-block-table thead,
.entry-content .wp-block-table tbody,
.entry-content .wp-block-table tfoot,
.entry-content .post-table thead,
.entry-content .post-table tbody { border: 0; }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.entry-content .post-table th,
.entry-content .post-table td { border: 0; }
.entry-content .wp-block-table th,
.entry-content .post-table th {  text-align: left; background: none; color: var(--ink-soft);
  font-size: 12.9px; font-weight: 500;
  padding: 0 20px 12px; border-bottom: 1px solid #C4D3E8; white-space: nowrap;
  vertical-align: bottom;
}
.entry-content .wp-block-table td,
.entry-content .post-table td {
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  font-weight: 300; color: var(--navy); vertical-align: top;
}
.entry-content .wp-block-table th:first-child,
.entry-content .wp-block-table td:first-child,
.entry-content .post-table th:first-child,
.entry-content .post-table td:first-child { padding-left: 0; }
.entry-content .wp-block-table th:last-child,
.entry-content .wp-block-table td:last-child,
.entry-content .post-table th:last-child,
.entry-content .post-table td:last-child { padding-right: 0; }
/* Die erste Spalte trägt die Frage, sie darf etwas fester wirken. */
.entry-content .wp-block-table tbody td:first-child,
.entry-content .post-table tbody td:first-child { font-weight: 400; }
.entry-content .wp-block-table tr:last-child td,
.entry-content .post-table tr:last-child td { border-bottom: 0; }
.entry-content .wp-block-table figcaption { font-size: 13.4px; color: var(--ink-soft); padding-top: 8px; }

@media (max-width: 720px) {
  .entry-content .wp-block-table::after,
  .entry-content .post-table::after {
    content: ""; position: sticky; right: 0; top: 0; float: right;
    width: 26px; height: 100%; margin-left: -26px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
    pointer-events: none;
  }
}

/* Der Kasten unter den drei Schritten schreibt wie in einem Chat.
   Erst laufen drei Punkte, dann steht der Satz da.

   Wichtig dabei: Der Satz bleibt immer im Fluss und bestimmt die Höhe,
   die Punkte liegen darüber. So steht die Größe des Kastens von Anfang
   an fest und springt beim Wechsel nicht. Wer weniger Bewegung
   eingestellt hat, sieht den Text sofort. */
.ablauf-person .banu-blase {
  position: relative;
  display: block;
}
.ablauf-person .banu-tippt {
  position: absolute;
  top: 4px;
  left: 0;
  display: none;
  align-items: center;
  gap: 5px;
  height: 18px;
}
.ablauf-person .banu-tippt span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9FB3D8;
  animation: banuTippen 1.15s ease-in-out infinite;
}
.ablauf-person .banu-tippt span:nth-child(2) { animation-delay: .16s; }
.ablauf-person .banu-tippt span:nth-child(3) { animation-delay: .32s; }
@keyframes banuTippen {
  0%, 62%, 100% { opacity: .28; transform: translateY(0); }
  31% { opacity: 1; transform: translateY(-3px); }
}
.ablauf-person .banu-satz { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .ablauf-person[data-chat] .banu-satz {
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
  }
  .ablauf-person[data-chat="wartet"] .banu-tippt { display: flex; }
  .ablauf-person[data-chat="fertig"] .banu-satz {
    opacity: 1;
    transform: none;
  }
  .ablauf-person[data-chat="fertig"] .banu-tippt {
    opacity: 0;
    transition: opacity .25s ease;
  }
}

/* Fragen im Beitrag stehen enger beieinander als die übrigen Blöcke.
   Der Beitrag setzt zwischen allen Blöcken 24 Pixel, für eine Reihe
   von Fragen ist das zu luftig. */
.entry-content .wp-block-details + .wp-block-details { margin-top: -15px; }

/* Zeichen in runden Knöpfen sitzen genau in der Mitte.
   Der Pfeil aus dem Entwurf war um eine halbe Einheit versetzt, das
   fällt in einem Kreis sofort auf. */
.banu-reiter [data-reiter=zurueck] svg,
.banu-reiter [data-reiter=weiter] svg,
[data-rel="zurueck"] svg,
[data-rel="weiter"] svg {
  display: block;
  margin: 0;
}
.banu-reiter [data-reiter=zurueck],
.banu-reiter [data-reiter=weiter],
[data-rel="zurueck"],
[data-rel="weiter"] {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}
/* Verborgen wird über das Merkmal, nicht über die Anzeigeart. Sonst
   verliert der Knopf beim Wiedereinblenden seine Ausrichtung und das
   Zeichen rutscht aus der Mitte. */
[data-rel="zurueck"][hidden],
[data-rel="weiter"][hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Zeilen mit Pfeil, die sich öffnen lassen */
.banu-klapp-kopf { -webkit-tap-highlight-color: transparent; }
.banu-klapp-kopf:hover .banu-klapp-pfeil { opacity: .75; }
.banu-klapp-kopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.banu-klapp-pfeil {
  display: inline-block;
  line-height: 1;
  transition: transform .22s ease, opacity .22s ease;
}
.banu-klapp-kopf[aria-expanded=true] .banu-klapp-pfeil { transform: rotate(180deg); }
.banu-klapp-leib[hidden] { display: none; }

/* Seite nicht gefunden: Vorschläge statt Sackgasse */
.banu-404-treffer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.banu-404-karte {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  background: #FFFFFF; color: var(--navy);
  border-radius: 6px; padding: 22px 46px 20px 24px;
  transition: background .16s ease;
}
.banu-404-karte:hover { background: var(--cyan-soft); }
.banu-404-karte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.banu-404-titel { font-size: 17.1px; font-weight: 500; color: var(--navy); }
.banu-404-text { font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--ink-soft); }
.banu-404-pfeil {
  position: absolute; top: 22px; right: 20px; display: flex; color: #9FB3D8;
  transition: color .16s ease, transform .16s ease;
}
.banu-404-karte:hover .banu-404-pfeil { color: #12A7BC; transform: translateX(2px); }

.banu-404-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #FFFFFF; color: var(--navy);
  padding: 15px 20px; font-size: 15.4px; font-weight: 400;
  border-radius: 6px;
}
.banu-404-zeile + .banu-404-zeile { margin-top: 2px; }
.banu-404-zeile:hover { background: var(--cyan-soft); }
.banu-404-zeile svg { color: #9FB3D8; flex: 0 0 14px; }

.banu-404-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.banu-404-liste > a {
  display: inline-flex; align-items: center;
  background: #FFFFFF; color: var(--navy); border: 0;
  border-radius: 999px; padding: 9px 18px; font-size: 14.2px;
  transition: background .16s ease;
}
.banu-404-liste > a:hover { background: var(--cyan-soft); }

/* Hilfe-Center: die beiden großen Themen mit eigener Unterseite */
.banu-themen { display: flex; flex-direction: column; gap: 20px; }
.banu-themen-kopf h2 {
  margin: 0 0 6px;
  font-size: clamp(20.3px, calc(16.06px + 1.116vw), 29.9px);
  font-weight: 400; color: var(--navy);
}
.banu-themen-kopf p {
  margin: 0; max-width: 64ch;
  font-size: 16.2px; line-height: 1.8; font-weight: 300; color: var(--ink-soft);
}
.banu-themen-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.banu-thema {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--navy); color: #FFFFFF;
  border-radius: 6px; padding: 26px 28px 24px;
  overflow: hidden;
  transition: background .18s ease;
}
/* Eine sehr zurückhaltende Struktur im Grund, damit die Fläche nicht
   ganz tot wirkt. Zwei weit auseinanderliegende Lichtkegel, kein Muster
   und keine Punkte, auf dem Bildschirm kaum als Form erkennbar. */
.banu-thema::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(53, 210, 224, .10), transparent 58%),
    radial-gradient(90% 70% at 6% 96%, rgba(255, 255, 255, .05), transparent 62%);
  pointer-events: none;
}
.banu-thema > * { position: relative; }
.banu-thema:hover { background: #123164; }
.banu-thema:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.banu-thema-zahl {  font-size: 12.9px; font-weight: 500;
  color: var(--cyan);
}
.banu-thema-name {
  font-size: clamp(19px, calc(17.4px + .42vw), 22.6px); font-weight: 400; color: #FFFFFF;
}
.banu-thema-text {
  font-size: 14.8px; line-height: 1.7; font-weight: 300; color: #B9C8E4; max-width: 46ch;
}
.banu-thema-bereiche {
  margin-top: 4px; font-size: 12.8px; line-height: 1.6; color: #8FA3C8;
}
.banu-thema-pfeil {
  position: absolute; top: 24px; right: 24px; display: flex; color: var(--cyan);
  transition: transform .18s ease;
}
.banu-thema:hover .banu-thema-pfeil { transform: translateX(2px); }

/* Zweite Ebene des Hilfe-Centers */
.banu-faq-frage > summary { list-style: none; }
.banu-faq-frage > summary::-webkit-details-marker { display: none; }
.banu-faq-frage > summary svg { transition: transform .22s ease; }
.banu-faq-frage[open] > summary svg { transform: rotate(180deg); }
.banu-faq-frage + .banu-faq-frage { margin-top: 0; }
@media (max-width: 860px) {
  .banu-faq-nav { position: static !important; padding-bottom: 8px; }
}

/* Rezensionen bei Google. Der Pfeil oben rechts zeigt, dass der Klick
   auf die Liste bei Google führt. */
.banu-bewertung { color: var(--navy); transition: background .18s ease; }
.banu-bewertung .banu-raus {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  color: #9FB3D8;
  transition: color .18s ease, transform .18s ease;
}
.banu-bewertung:hover .banu-raus,
.banu-bewertung:focus-visible .banu-raus {
  color: var(--cyan);
  transform: translate(1px, -1px);
}
.banu-bewertung:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Bahnen mit Karten: die Pfeile liegen über den Rändern, statt die Bahn
   einzurücken. So beginnt die erste Karte genau unter der Überschrift. */
.banu-bahn {
  position: relative;
  gap: 0 !important;
}
.banu-bahn > .testi-scroll,
.banu-bahn > [data-rel="bahn"] {
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.banu-bahn > .testi-scroll::-webkit-scrollbar,
.banu-bahn > [data-rel="bahn"]::-webkit-scrollbar { width: 0; height: 0; display: none; }
.banu-bahn > [data-rel="zurueck"],
.banu-bahn > [data-rel="weiter"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.banu-bahn > [data-rel="zurueck"] { left: -18px; }
.banu-bahn > [data-rel="weiter"] { right: -18px; }
/* Auf breiten Flächen füllen drei Karten die Bahn genau aus, damit sie
   links und rechts auf derselben Kante stehen wie der Abschnitt darunter.
   Kommt eine vierte dazu, läuft die Bahn wie gewohnt über. Die Karten
   tragen ihre Breite aus dem Entwurf im style-Attribut, deshalb steht
   hier ausnahmsweise ein Vorrang dahinter. */
@media (min-width: 1000px) {
  .banu-bahn > .testi-scroll > .card-fixed,
  .banu-bahn > [data-rel="bahn"] > .card-fixed {
    flex: 0 0 calc((100% - 40px) / 3) !important;
  }
}
@media (max-width: 900px) {
  .banu-bahn > [data-rel="zurueck"] { left: 0; }
  .banu-bahn > [data-rel="weiter"] { right: 0; }
}

/* Reiter der Kategorien: eine Zeile, geschoben wird mit den Pfeilen.
   Die Bildlaufleiste bleibt verborgen, gescrollt wird trotzdem. */
.banu-reiter {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 8px;
  min-width: 0;
}
.banu-reiter-bahn {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.banu-reiter-bahn::-webkit-scrollbar { width: 0; height: 0; display: none; }
.banu-reiter-bahn > a {
  white-space: nowrap;
  flex: 0 0 auto;
  word-break: normal;
  hyphens: none;
}
/* Die Pfeile behalten ihren Platz, auch wenn gerade keiner nötig ist.
   Sonst rutschen die Reiter beim Schieben seitlich weg. */
/* Die Pfeile liegen über den Rändern der Bahn, statt sie einzurücken.
   So beginnt der erste Reiter genau über der ersten Karte. */
.banu-reiter [data-reiter=zurueck],
.banu-reiter [data-reiter=weiter] {
  display: flex !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  transition: opacity .18s ease, visibility .18s ease;
}
.banu-reiter [data-reiter=zurueck] { left: -18px; }
.banu-reiter [data-reiter=weiter] { right: -18px; }
@media (max-width: 900px) {
  .banu-reiter [data-reiter=zurueck] { left: 0; }
  .banu-reiter [data-reiter=weiter] { right: 0; }
}
.banu-reiter [data-reiter=zurueck][hidden],
.banu-reiter [data-reiter=weiter][hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Die winkende Hand in der Begrüßung */
.banu-winkt { display: inline-block; transform-origin: 70% 80%; }
@media (prefers-reduced-motion: no-preference) {
  .banu-winkt { animation: banuWinken 2.6s ease-in-out 1.2s 3; }
}
@keyframes banuWinken {
  0%, 62%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(13deg); }
  72% { transform: rotate(-9deg); }
  78% { transform: rotate(11deg); }
  84% { transform: rotate(-6deg); }
  90% { transform: rotate(7deg); }
}

/* Karte laedt erst auf Klick, siehe inc/bausteine.php */
.banu-karte-halt { position: relative; width: 100%; height: 100%; }
.banu-karte-halt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.banu-karte-frage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 10px;
  padding: 26px 28px; background: #EDF1F6; color: var(--navy);
}
.banu-karte-frage .banu-karte-titel { font-size: 17.1px; font-weight: 500; color: var(--navy); }
.banu-karte-frage .banu-karte-text { font-size: 14.5px; line-height: 1.7; font-weight: 300; color: var(--ink-soft); max-width: 420px; }
.banu-karte-frage .banu-karte-knopf {
  border: none; background: linear-gradient(135deg, #35D2E0, #12A7BC); color: var(--navy);
  font-family: 'Kanit', sans-serif; font-size: 15.6px; font-weight: 500;
  padding: 11px 24px; border-radius: 999px; cursor: pointer; margin-top: 4px;
}
.banu-karte-frage .banu-karte-link { font-size: 13.8px; font-weight: 300; color: #12A7BC; text-decoration: underline; text-underline-offset: 3px; }
.banu-karte-frage .banu-karte-kurz { display: none; }

/* Auf kleinen Flächen bleibt nur das Nötigste stehen, damit der
   Platzhalter genauso hoch bleibt wie die Karte an seiner Stelle. */
@media (max-width: 720px) {
  .banu-karte-frage { padding: 16px 16px; gap: 6px; }
  .banu-karte-frage .banu-karte-titel { font-size: 15.4px; }
  .banu-karte-frage .banu-karte-text { font-size: 12.9px; line-height: 1.5; }
  .banu-karte-frage .banu-karte-lang { display: none; }
  .banu-karte-frage .banu-karte-kurz { display: block; }
  .banu-karte-frage .banu-karte-knopf { font-size: 14.2px; padding: 9px 18px; margin-top: 0; }
  .banu-karte-frage .banu-karte-link { display: none; }
}

/* Formularfelder tragen dieselbe Schrift wie die Seite */
input, select, textarea { font-family: 'Kanit', sans-serif; }
input:focus, select:focus, textarea:focus { outline: 2px solid #35D2E0; outline-offset: 1px; }

/* Bahnen ohne sichtbare Leiste */
.testi-scroll { scrollbar-width: none; }
.testi-scroll::-webkit-scrollbar { display: none; }

/* Glossar: Buchstabenleiste ohne sichtbare Leiste */
.az-scroll { scrollbar-width: none; }
.az-scroll::-webkit-scrollbar { display: none; }
.banu-kat-cta .banu-kat-mehr { align-self: flex-start; font-size: 14.2px; font-weight: 300; color: #35D2E0; text-decoration: underline; text-underline-offset: 3px; }

/* Fenster mit dem Pruefhinweis */
.review-modal[hidden] { display: none !important; }

/* Seitennummerierung */
.banu-seiten { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.banu-seiten .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
  padding: 0 12px; border-radius: 999px; background: #FFFFFF; border: 0;
  font-size: 15px; color: var(--navy);
}
.banu-seiten .page-numbers.current { background: var(--cyan); font-weight: 500; }


section[style*="height:480px"] { height: auto !important; padding-top: 60px !important; padding-bottom: 60px !important; }
section[style*="height:480px"] > .g-side { height: auto !important; }
section[style*="height:480px"] .g-side > div { height: auto !important; overflow: visible !important; }
section[style*="height:480px"] .g-side > div[style*="position:relative"] { height: 380px !important; align-self: center; }
@media (max-width: 980px) {
  section[style*="height:480px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="height:480px"] .g-side > div[style*="position:relative"] { height: 240px !important; }
  section[style*="height:480px"] .g-side > div[style*="0 0 0 56px"],
  section[style*="height:480px"] .g-side > div[style*="0 56px 0 0"] { padding-left: 0 !important; padding-right: 0 !important; }
}


/* ==========================================================================
   Holding-Seite: Vorteile als Kartenstapel, Blog-Kopf mittig, Schluss-Banner
   auf der Footer-Kante. Dazu seitenweit schlankere „Mehr anzeigen"-Knöpfe.
   ========================================================================== */

/* „Mehr anzeigen" und „Mehr zu …" auf allen Seiten: kleiner und ganz rund */
.faq-mehr {
  font-size: 15px !important;
  padding: 11px 22px !important;
  border-radius: 20rem !important;
}

/* --- Vorteile ------------------------------------------------------------ */
.hv { background: #FFFFFF; padding: 76px 32px; }
.hv-grid {
  max-width: 1176px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px; align-items: start;
}
.hv-links {
  position: sticky; top: 130px;
  display: flex; flex-direction: column; gap: 16px;
}
.hv-links h2 {
  margin: 0; max-width: 18ch;
  font-size: clamp(25px, 19.79px + 1.372vw, 36.8px); line-height: 1.35; font-weight: 400; color: #0B2350;
}
.hv-links p { margin: 0; max-width: 460px; font-size: 16.2px; line-height: 1.8; font-weight: 300; color: #6E7EB8; }
.hv-links .hv-hinweis { font-size: 13.5px; line-height: 1.6; color: #9FB3D8; }

.hv-stapel { display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.hv-karte {
  position: sticky; top: calc(130px + var(--i) * 22px);
  min-height: 260px;
  background: #F2F2F2; border-radius: 6px;
  padding: 28px 30px 32px;
  display: flex; flex-direction: column; gap: 14px;
  transform-origin: 50% 0;
  transition: transform 0.35s ease-out, filter 0.35s ease-out;
}
.hv-kopf { display: flex; align-items: center; justify-content: space-between; }
.hv-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, rgb(228, 246, 249), rgb(199, 238, 244));
  display: flex; align-items: center; justify-content: center;
}
.hv-icon img { width: 22px; height: 22px; display: block; }
.hv-nr { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: #12A7BC; }
.hv-karte h3 { margin: 0; font-size: clamp(17px, 0.62vw + 10.5px, 19.5px); line-height: 1.4; font-weight: 500; color: #0B2350; }
.hv-karte p { margin: 0; font-size: 16.2px; line-height: 1.8; font-weight: 300; color: #6E7EB8; }

@media (max-width: 980px) {
  .hv { padding: 56px 20px; }
  .hv-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hv-links { position: static; }
  .hv-links h2 { max-width: none; }
  .hv-stapel { gap: 16px; }
  .hv-karte { position: static; min-height: 0; transform: none !important; filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-karte { transition: none; }
}

/* --- Blog-Kopf mittig ---------------------------------------------------- */
.blog-mitte > div > div:first-child { align-items: center !important; text-align: center; }
.blog-mitte > div > div:first-child > span { align-self: center !important; }
.blog-mitte > div > div:first-child > h2,
.blog-mitte > div > div:first-child > p { margin-left: auto !important; margin-right: auto !important; }

/* --- Schluss-Banner auf der Footer-Kante ---------------------------------
   Der Abschnitt ist so hoch wie der Kasten. Die oberen 60 % bekommen das
   Hellgrau der FAQ darüber, die unteren 40 % die Farbe des Footers. So liegt
   der Kasten zu 40 % auf dem Footer, ohne dessen Text zu überdecken. */
.cta-banner {
  position: relative; isolation: isolate;
  background: transparent !important;
  padding: 0 32px !important;
}
.cta-banner::before,
.cta-banner::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; }
.cta-banner::before { top: 0; bottom: 40%; background: var(--oben, #F2F2F2); }
.cta-banner::after { top: 60%; bottom: 0; background: #08193B; }
.cta-banner-box {
  max-width: 1176px; margin: 0 auto;
  background: #0B2350; border-radius: 6px;
  padding: 72px 40px;
}
.cta-banner-box h2 { text-wrap: balance; }
@media (min-width: 1100px) { .hv-karte h3 { white-space: nowrap; } }
@media (max-width: 980px) {
  .cta-banner { padding: 0 20px !important; }
  .cta-banner-box { padding: 52px 22px; }
}

/* --- Auswahlfelder (theme.js baut jedes select als eigene Auswahl) ------- */
.bd-nativ {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  overflow: hidden !important; clip-path: inset(50%) !important;
}
.bd-auswahl { position: relative; width: 100%; min-width: 0; }
.bd-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-size: 16.2px; font-weight: 300; line-height: 1.4; color: #0B2350;
  background: #FFFFFF; border: 1px solid #E4E9F2; border-radius: 8px;
  padding: 12px 15px;
  transition: border-color .16s ease;
}
.bd-knopf:hover, .bd-auswahl.is-offen .bd-knopf { border-color: #35D2E0; }
.bd-knopf:focus { outline: none; }
.bd-knopf:focus-visible { outline: 2px solid #35D2E0; outline-offset: 1px; }
.bd-knopf:disabled { opacity: .55; cursor: default; }
.bd-wert { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-knopf.is-leer .bd-wert { color: #6E7EB8; }
.bd-pfeil { flex: 0 0 auto; display: flex; color: #6E7EB8; transition: transform .18s ease; }
.bd-pfeil svg, .bd-haken svg { display: block; }
.bd-auswahl.is-offen .bd-pfeil { transform: rotate(180deg); color: #12A7BC; }
.bd-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  margin: 0; padding: 6px;
  background: #FFFFFF; border: 1px solid #E4E9F2; border-radius: 8px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 14px 34px rgba(8, 25, 59, .12);
}
.bd-liste[hidden] { display: none; }
.bd-auswahl.is-oben .bd-liste { top: auto; bottom: calc(100% + 6px); }
.bd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-size: 15px; line-height: 1.45; font-weight: 300; color: #0B2350;
}
.bd-option.is-aktiv { background: #F2FCFD; }
.bd-option.is-gewaehlt { color: #12A7BC; font-weight: 400; }
.bd-haken { flex: 0 0 auto; display: flex; color: #12A7BC; opacity: 0; }
.bd-option.is-gewaehlt .bd-haken { opacity: 1; }
.bd-option[aria-disabled="true"] { opacity: .45; cursor: default; }

/* Hero ohne Tag: Die H1 braucht mobil denselben Abstand zum Header wie auf den übrigen Seiten */
@media (max-width: 680px) {
  .pad-lg:has(h1) { padding-top: 46px !important; }
}

/* Überschriften im Beitragstext: eigene Zeilenhöhe statt der 1.9 aus theme.json, damit umbrochene H2/H3 kompakt bleiben (10.11.2026) */
.entry-content h2 { line-height: 1.3; }
.entry-content h3 { line-height: 1.4; }