/* ==========================================================================
   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; }
img, video, iframe { max-width: 100%; }
body { overflow-x: clip; }

/* --- Schwebendes Mega-Menue --------------------------------------------- */
.mega-panel { padding-bottom: 18px; }
.mega-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.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: 46px; height: 46px; border: 1px solid var(--line); background: #FFFFFF;
  border-radius: 12px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 19px; height: 1.6px; border-radius: 2px; background: var(--navy); transition: transform .28s ease, opacity .2s ease; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.6px) 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(400px, 88vw); height: 100%; background: #FFFFFF;
  border-left: 1px solid var(--line);
  transform: translateX(102%); transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top) + 84px) 24px calc(env(safe-area-inset-bottom) + 32px);
  visibility: hidden;
}
.nav-open .mobile-menu { transform: none; visibility: visible; }
.mm-inner { display: flex; flex-direction: column; gap: 2px; }
.mm-link {
  font-size: 20px; font-weight: 400; color: var(--navy);
  padding: 13px 12px; border-radius: 10px; min-height: 48px; display: flex; align-items: center;
}
.mm-link:hover { background: #F5F7FA; }
.mm-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9FB3D8;
  padding: 22px 12px 8px;
}
.mm-sub {
  font-size: 16px; font-weight: 300; color: var(--ink-soft);
  padding: 12px 12px; border-radius: 10px; min-height: 46px; display: flex; align-items: center;
}
.mm-sub:hover { background: #F5F7FA; color: var(--navy); }
.mm-cta {
  margin-top: 26px; background: linear-gradient(135deg, #35D2E0, #12A7BC); color: var(--navy);
  border-radius: 14px; padding: 16px 20px; font-size: 17px; font-weight: 600;
  display: flex; flex-direction: column; gap: 3px; min-height: 56px; justify-content: center;
}
.mm-cta span { font-size: 12px; font-weight: 300; opacity: .8; }
.mm-backdrop {
  position: absolute; inset: 0; z-index: 110; background: rgba(8, 25, 59, .45);
  opacity: 0; pointer-events: none; transition: opacity .3s 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; }
}

/* 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; }
  .blick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Alternierende Zeitleiste wird einspaltig */
  .g-timeline { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .g-timeline > * { grid-column: 1 !important; text-align: left !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 */
  article[style*="padding:48px 52px"] { padding: 26px 20px !important; }
  div[style*="padding:44px 46px"] { padding: 26px 20px !important; }
  div[style*="padding:44px 42px"] { padding: 26px 20px !important; }
  div[style*="padding:48px"] { padding: 24px 18px !important; }
  /* Zeilenbegrenzungen aufheben, damit Titel vollstaendig lesbar bleiben */
  h3[style*="-webkit-line-clamp"] { -webkit-line-clamp: 3 !important; min-height: 0 !important; }
}

/* Sehr schmale Geraete */
@media (max-width: 380px) {
  :root { --shell: 14px; }
}

/* 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: 52px !important; }
footer img[alt="Banu Bas Steuerberatung"] { height: 48px !important; }
@media (max-width: 680px) {
  header > div > a[href="/"] img { height: 42px !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 img { width: 36px !important; height: 36px !important; }
}