/* ============================================================
   Anskara - Fluent-Gestaltung (wie die Videos): hell, weisse Karten mit weichem Schatten,
   Anskara-Orange als Akzent. Prefix: .fl-  Wrapper: <div class="fl-page">
   ============================================================ */

.fl-page {
  --fl-bg: #f3f3f3; --fl-card: #fff; --fl-ink: #1b1b1b; --fl-muted: #5f5f5f; --fl-line: #e5e5e5;
  --fl-acc: #FA6400; --fl-acc-d: #d95400; --fl-acc-soft: #fff1e6;
  --fl-r: 10px; --fl-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07);
  --fl-font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--fl-font); color: var(--fl-ink); font-size: 18px; line-height: 1.6;
}
.fl-page *, .fl-page *:before, .fl-page *:after { box-sizing: border-box; }

/* Abschnitte ueber die volle Breite, Inhalt mittig */
.fl-sec {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw;
  background: var(--fl-bg); padding: clamp(56px, 7vw, 96px) 0;
}
.fl-sec--white { background: #fff; }
.fl-sec--tight { padding: clamp(36px, 4vw, 56px) 0; }
.fl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Schrift */
.fl-page h1, .fl-page h2, .fl-page h3 { font-family: var(--fl-font); color: var(--fl-ink); margin: 0; letter-spacing: -.015em; }
.fl-page h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.08; font-weight: 700; }
.fl-page h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 650; margin-bottom: 14px; }
.fl-page h3 { font-size: 22px; line-height: 1.3; font-weight: 650; margin-bottom: 8px; }
.fl-page p { margin: 0 0 14px; }
.fl-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--fl-muted); max-width: 640px; }
.fl-acc { color: var(--fl-acc); }
.fl-kicker { display: inline-block; font-size: 15px; font-weight: 600; color: var(--fl-acc); margin-bottom: 12px; }
.fl-kopf { max-width: 760px; margin-bottom: 36px; }
.fl-kopf p { color: var(--fl-muted); }

/* Knoepfe */
.fl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fl-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 8px;
  background: var(--fl-acc); color: #fff !important; font-weight: 600; font-size: 17px; text-decoration: none !important;
  border: 1px solid var(--fl-acc); transition: background .15s, box-shadow .15s;
}
.fl-btn:hover { background: var(--fl-acc-d); box-shadow: 0 6px 18px rgba(250,100,0,.25); }
.fl-btn--ghost { background: #fff; color: var(--fl-ink) !important; border-color: var(--fl-line); }
.fl-btn--ghost:hover { background: #fafafa; box-shadow: var(--fl-shadow); }

/* Hero: Text links, Karte rechts */
.fl-hero { padding-top: clamp(48px, 6vw, 88px); }
.fl-hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.fl-hero h1 { margin-bottom: 20px; }
.fl-hero__card { padding: 34px 34px 26px; }
.fl-hero__card h3 { font-size: 19px; margin-bottom: 16px; }

/* Karten */
.fl-card {
  background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-r);
  box-shadow: var(--fl-shadow); padding: 30px; display: block;
}
.fl-card p { color: var(--fl-muted); font-size: 17px; }
.fl-card--link { text-decoration: none !important; color: inherit !important; transition: transform .15s, box-shadow .15s; }
.fl-card--link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 16px 36px rgba(0,0,0,.11); }
.fl-card--akzent { box-shadow: inset 0 4px 0 var(--fl-acc), var(--fl-shadow); }
.fl-more { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--fl-acc); font-size: 16px; }
.fl-grid { display: grid; gap: 22px; }
.fl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fl-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Linien-Symbole */
.fl-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--fl-acc-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fl-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--fl-acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Haken-Liste */
.fl-haken { list-style: none; margin: 0 0 16px; padding: 0; }
.fl-haken li { position: relative; padding-left: 30px; margin: 0 0 9px; font-size: 17px; }
.fl-haken li:before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--fl-acc);
}
.fl-haken li:after {
  content: ""; position: absolute; left: 7.5px; top: 9px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Leistungsliste (GUe und Beratung) */
.fl-zeilen { display: grid; gap: 10px; }
.fl-zeile {
  display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: #fff; border: 1px solid var(--fl-line);
  border-radius: var(--fl-r); text-decoration: none !important; color: var(--fl-ink) !important; transition: box-shadow .15s;
}
.fl-zeile:hover { box-shadow: var(--fl-shadow); }
.fl-zeile b { font-weight: 650; font-size: 18px; }
.fl-zeile span { color: var(--fl-muted); font-size: 16px; }
.fl-zeile i { margin-left: auto; font-style: normal; color: var(--fl-acc); font-weight: 600; }
.fl-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }

/* Ablauf */
.fl-schritte { counter-reset: s; }
.fl-schritt { position: relative; padding-top: 64px; }
.fl-schritt:before {
  counter-increment: s; content: counter(s); position: absolute; left: 30px; top: 26px; width: 40px; height: 40px; border-radius: 10px;
  background: var(--fl-acc); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center;
}
.fl-schritt { padding-top: 84px; }

/* Kennzahlen */
.fl-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fl-zahl { text-align: left; }
.fl-zahl b { display: block; font-size: clamp(34px, 4vw, 48px); font-weight: 700; color: var(--fl-ink); line-height: 1.1; }
.fl-zahl span { color: var(--fl-muted); font-size: 16px; }

/* Abschluss */
.fl-cta { display: grid; grid-template-columns: 1.4fr auto; gap: 30px; align-items: center; padding: 40px 44px; }
.fl-cta h2 { margin-bottom: 6px; }
.fl-cta p { margin: 0; color: var(--fl-muted); }
.fl-cta .fl-btns { margin-top: 0; }

/* Leistungs-Unterseiten */
.fl-unter { padding-top: clamp(40px, 5vw, 72px); }
.fl-krumen { font-size: 15px; color: var(--fl-muted); margin-bottom: 18px; }
.fl-krumen a { color: var(--fl-muted) !important; text-decoration: none !important; }
.fl-krumen a:hover { color: var(--fl-acc) !important; }
.fl-faq details { background: #fff; border: 1px solid var(--fl-line); border-radius: var(--fl-r); padding: 18px 22px; margin-bottom: 10px; }
.fl-faq summary { font-weight: 650; cursor: pointer; font-size: 18px; }
.fl-faq details p { margin: 12px 0 0; color: var(--fl-muted); }

@media (max-width: 960px) {
  .fl-hero__grid, .fl-split, .fl-cta { grid-template-columns: 1fr; gap: 32px; }
  .fl-grid--3, .fl-grid--4, .fl-zahlen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fl-page { font-size: 17px; }
  .fl-grid--3, .fl-grid--2, .fl-grid--4, .fl-zahlen { grid-template-columns: 1fr; }
  .fl-card, .fl-cta { padding: 24px; }
  .fl-zeile { flex-wrap: wrap; gap: 4px 12px; }
  .fl-zeile i { margin-left: 0; }
}

/* Zeitleiste (Geschichte) */
.fl-zeit { display: grid; gap: 14px; }
.fl-zeit__item { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: start; }
.fl-zeit__jahr { font-size: 28px; font-weight: 700; color: var(--fl-acc); line-height: 1.2; padding-top: 26px; }
@media (max-width: 640px) { .fl-zeit__item { grid-template-columns: 1fr; gap: 4px; } .fl-zeit__jahr { padding-top: 0; font-size: 24px; } }

/* Kontakt */
.fl-kontakt .fl-card a { color: var(--fl-ink) !important; text-decoration: none !important; font-weight: 600; }
.fl-kontakt .fl-card a:hover { color: var(--fl-acc) !important; }
.fl-page .fl-hinweis { margin-top: 28px; color: var(--fl-muted); font-size: 16px; }
.fl-page .fl-hinweis a, .fl-page .fl-faq a, .fl-page .fl-split p a { color: var(--fl-acc-d) !important; font-weight: 600; text-decoration: none !important; }
body:has(.fl-kontakt) .ak-footer__cta { display: none; }
.fl-kontakt address { font-style: normal; }
.fl-gross { font-size: 22px; font-weight: 650; display: block; margin: 4px 0 8px; }

.fl-unter h1 { margin-bottom: 20px; }
.fl-card.fl-schritt { padding-top: 84px; }
@media (max-width: 640px) { .fl-card.fl-schritt { padding-top: 78px; } .fl-schritt:before { left: 24px; top: 24px; } }

/* ============================================================
   Ratgeber-Artikel im Fluent-Stil (body.ak-artikel): weisse Lesekarte auf hellgrauem Grund
   ============================================================ */
body.ak-artikel #main-content { background: #f3f3f3; }
body.ak-artikel .the-content-parent { padding: clamp(28px, 4vw, 56px) 16px !important; }
html body.ak-artikel .ak-ratgeber {
  max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07); padding: clamp(26px, 5vw, 60px);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: #1b1b1b;
}
html body.ak-artikel .ak-ratgeber h1.ak-ratgeber-titel { font-family: inherit; font-weight: 700; color: #1b1b1b; letter-spacing: -.015em; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; }
html body.ak-artikel .ak-ratgeber h1.ak-ratgeber-titel:before { display: none; }
html body.ak-artikel .ak-ratgeber p, html body.ak-artikel .ak-ratgeber li { font-size: 18px; line-height: 1.7; color: #3b3b3b; }
html body.ak-artikel .ak-ratgeber p { margin: 0 0 1.05em; }
html body.ak-artikel .ak-ratgeber strong { color: #1b1b1b; font-weight: 650; }
html body.ak-artikel .ak-ratgeber h2 { font-family: inherit; font-weight: 650; color: #1b1b1b; letter-spacing: -.01em; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; margin: 1.9em 0 .55em; }
html body.ak-artikel .ak-ratgeber h3 { font-family: inherit; font-weight: 650; font-size: 20px; margin: 1.4em 0 .4em; color: #1b1b1b; }
html body.ak-artikel .ak-ratgeber ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
html body.ak-artikel .ak-ratgeber ul li { position: relative; padding-left: 24px; margin: 0 0 .45em; }
html body.ak-artikel .ak-ratgeber ul li:before { content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: #FA6400; }
html body.ak-artikel .ak-ratgeber ol { margin: 0 0 1.2em 1.3em; padding: 0; }
html body.ak-artikel .ak-ratgeber a { color: #d95400; text-decoration: none; font-weight: 600; }
html body.ak-artikel .ak-ratgeber a:hover { text-decoration: underline; }
html body.ak-artikel .ak-ratgeber img { max-width: 100%; height: auto; border-radius: 8px; }
html body.ak-artikel .ak-ratgeber nav.ak-inhalt { background: #f7f7f7; border: 1px solid #e5e5e5; border-left: 0; border-radius: 8px; padding: 18px 24px 12px; }
html body.ak-artikel .ak-ratgeber nav.ak-inhalt p.ak-inhalt-titel { text-transform: none !important; letter-spacing: 0; font-size: 15px !important; color: #1b1b1b !important; font-weight: 650 !important; }
html body.ak-artikel .ak-ratgeber nav.ak-inhalt li { font-size: 16px !important; }
html body.ak-artikel .ak-ratgeber nav.ak-inhalt li:before { display: none; }
html body.ak-artikel .ak-ratgeber nav.ak-inhalt li a { font-weight: 400; border-bottom: 0; color: #1b1b1b !important; }
html body.ak-artikel .ak-ratgeber blockquote.ak-merk { background: #fff1e6; border-left: 0; border-radius: 8px; padding: 18px 24px; box-shadow: inset 4px 0 0 #FA6400; }
html body.ak-artikel .ak-ratgeber p.ak-stand { border-top-color: #e5e5e5; }
html body.ak-artikel .ak-tabelle table { font-size: 16px; }
html body.ak-artikel .ak-tabelle th { background: #f7f7f7; font-weight: 650; }
.ak-ratgeber-karten { margin: 8px 0 10px; }
html body.ak-artikel .ak-ratgeber .ak-ratgeber-karten h3 { margin: 0 0 8px; }
html body.ak-artikel .ak-ratgeber .ak-ratgeber-karten p { font-size: 16px; margin: 0 0 10px; }
html body.ak-artikel .ak-ratgeber a.fl-card--link { font-weight: 400; color: inherit; }
html body.ak-artikel .ak-ratgeber a.fl-card--link:hover { text-decoration: none; }

/* Rechner und Download-Kasten (rechner.css) im Fluent-Stil */
html body .ak-rechner .ak-rechner-innen { border: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; border-radius: 10px; box-shadow: inset 0 4px 0 #FA6400, 0 2px 4px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07); }
html body .ak-rechner .ak-rechner-innen p.ak-download-kicker { text-transform: none; letter-spacing: 0; font-size: 15px !important; font-weight: 600; }
.ak-feld input[type=number], .ak-feld input[type=text], .ak-feld input[type=email], .ak-feld input[type=tel], .ak-feld select, .ak-feld textarea { border-radius: 6px !important; }
.ak-knopf { border-radius: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ak-ergebnis { border-radius: 10px; background: #1b1b1b; }

/* ============================================================
   Kopf und Fuss im Fluent-Stil
   ============================================================ */
.ak-btn { border-radius: 8px; font-weight: 600; }
.ak-nav .sub-menu { border-top: 1px solid var(--ak-line); border-radius: 10px; padding: 8px; }
.ak-nav .sub-menu a { border-radius: 6px; }

.ak-footer { background: #f3f3f3; color: #5f5f5f; border-top: 1px solid #e5e5e5; }
.ak-footer a { color: #3b3b3b; }
.ak-footer a:hover { color: var(--ak-accent); }
.ak-footer__cta { background: #f3f3f3; border-bottom: 0; }
.ak-footer__cta-inner {
  max-width: 1152px; margin: 0 auto; padding: 40px 44px; background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07); position: relative; top: 56px;
}
.ak-footer__cta-text h2 { color: #1b1b1b; font-weight: 650; letter-spacing: -.015em; }
.ak-footer__cta-text p { color: #5f5f5f; }
.ak-footer__cta + .ak-footer__main { padding-top: 112px; }
/* Seiten mit eigenem Abschluss-Kasten brauchen das Band nicht doppelt */
body:has(.fl-cta) .ak-footer__cta { display: none; }
.ak-footer__col h3 { color: #1b1b1b; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 650; padding-bottom: 0; margin-bottom: 14px; }
.ak-footer__col h3:after { display: none; }
.ak-footer__about { color: #5f5f5f; }
.ak-footer__nap strong { color: #1b1b1b; }
.ak-footer__nap .ak-reg { color: #8a8a8a; }
.ak-footer__bottom { border-top: 1px solid #e5e5e5; }
.ak-footer__bottom-inner { color: #8a8a8a; }
@media (max-width: 1200px) { .ak-footer__cta { padding: 0 24px; } }
@media (max-width: 600px) { .ak-footer__cta-inner { padding: 28px 24px; top: 40px; } .ak-footer__cta + .ak-footer__main { padding-top: 80px; } }

/* Footer-Feinschliff: Theme-Einzug der Listen weg, Logo auf Normalmass */
.ak-footer__col ul { margin: 0 !important; padding: 0 !important; }
.ak-footer__col li { margin: 0 0 9px !important; padding: 0 !important; list-style: none; }
.ak-footer__col li:before { display: none !important; }
.ak-footer__logo img { height: 34px !important; width: auto !important; max-width: 200px; }

/* Startseite: Bild im Einstieg, Karte ueberlappt unten links */
.fl-hero__media { position: relative; }
.fl-hero__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: var(--fl-shadow); }
.fl-hero__media .fl-hero__card { position: relative; margin: -120px 0 0 -48px; max-width: 440px; }
@media (max-width: 960px) { .fl-hero__media .fl-hero__card { margin: -70px 16px 0; max-width: none; } }
.fl-hero__grid:has(.fl-hero__media) { grid-template-columns: 1fr 1.1fr; gap: 48px; }
.fl-hero__media .fl-hero__card { margin: -64px 0 0 -36px; max-width: 400px; padding: 26px 28px 18px; }
.fl-hero__media .fl-hero__card .fl-haken li { font-size: 16px; margin-bottom: 7px; }
@media (max-width: 960px) { .fl-hero__grid:has(.fl-hero__media) { grid-template-columns: 1fr; } .fl-hero__media .fl-hero__card { margin: -48px 14px 0; max-width: none; } }

/* Startseite: grosser Banner (Wellen-Ueberschrift aus pages.css) ueber dem Fluent-Einstieg */
.fl-page .fl-banner { min-height: clamp(460px, 74vh, 700px); display: flex; align-items: center; background-size: cover; background-position: center; padding: 72px 0; }
.fl-page .fl-banner .fl-wrap { width: 100%; }
.fl-page .fl-banner h1 { color: #fff; font-size: clamp(36px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 22px; max-width: 22ch; }
.fl-page .fl-banner p { color: rgba(255,255,255,.85); font-size: clamp(17px, 2vw, 21px); max-width: 54ch; margin: 0 0 32px; }
.fl-page .fl-titel { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; font-weight: 700; margin-bottom: 20px; }
.fl-page .fl-banner .fl-wrap { position: relative; z-index: 1; }
body.ak-fluent:not(.ak-artikel) #main-content, body.ak-fluent:not(.ak-artikel) #main, body.ak-fluent:not(.ak-artikel) .page-wrapper, body.ak-fluent:not(.ak-artikel) .the-content-parent, body.ak-fluent:not(.ak-artikel) .limit-wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* Startseite: schwarzes Aussage-Band unter dem Banner */
.fl-page .fl-claim { background: #0A0909; padding: clamp(40px, 5vw, 64px) 0; }
.fl-page .fl-claim .fl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.fl-page .fl-claim h2 { color: #fff; max-width: 24ch; margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }
.fl-page .fl-claim h2:after { content: ""; display: block; width: 60px; height: 4px; background: var(--fl-acc); margin-top: 22px; border-radius: 2px; }