@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/source-sans-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cormorant-700-normal.woff2") format("woff2");
}

:root {
  --ink: #151922;
  --navy: #1e2838;
  --navy-2: #263044;
  --paper: #f6f1e8;
  --cream: #fffdf8;
  --gold: #b4853a;
  --gold-2: #d4b06a;
  --muted: #5c6470;
  --text: #2a3140;
  --line: #e6dfd2;
  --shadow: 0 18px 40px rgba(21, 25, 34, 0.08);
  --serif: "Cormorant Garamond", Georgia, "Palatino Linotype", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1180px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}
body.faof-nav-lock { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:hover { color: var(--gold); }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); margin: 0 0 0.45em; }
h3 { font-size: 1.35rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
.faof-wrap { width: min(var(--max), calc(100% - 2.4rem)); margin-inline: auto; }
.faof-skip { position: absolute; left: -999px; top: 0; }
.faof-skip:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 40; }

/*
 * Hintergrund und Milchglas liegen auf ::before, nicht auf dem Header selbst.
 * Grund: backdrop-filter erzeugt einen neuen Bezugsrahmen für position:fixed.
 * Da das mobile Menü im Header steht, bezog sich sein inset dann nicht mehr auf
 * den Bildschirm, sondern auf die knapp 60 Pixel hohe Kopfzeile — das Menü
 * klappte nur als schmaler Streifen auf, in dem man scrollen musste.
 * Auf dem Pseudo-Element wirkt der Effekt gleich, ohne den Bezugsrahmen zu
 * kippen. position:relative am Header ist unkritisch, das betrifft nur
 * position:absolute.
 */
.faof-top {
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
}
.faof-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: saturate(1.05) blur(10px);
  -webkit-backdrop-filter: saturate(1.05) blur(10px);
  pointer-events: none;
}
.faof-top.is-stuck { box-shadow: 0 8px 24px rgba(21, 25, 34, 0.06); }
.faof-top__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--header-h);
  flex-wrap: nowrap;
  /* über der Milchglasfläche, sonst verdeckt sie Logo und Menüknopf */
  position: relative;
  z-index: 1;
}
.faof-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
}
.faof-logo:hover { color: var(--gold); }
.faof-logo__mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  flex-shrink: 0;
}
.faof-logo__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.faof-logo__text strong {
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faof-logo__text small { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.faof-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.faof-age--foot { background: var(--navy); }

.faof-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.1rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.faof-nav.is-open { display: flex; }
.faof-nav a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.2rem 0;
  white-space: nowrap;
}
.faof-nav__cta {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink) !important;
  padding: 0.38rem 0.75rem !important;
}
.faof-nav__cta--ghost {
  background: transparent;
  color: var(--ink) !important;
}
.faof-nav__cta:hover { background: var(--gold-2); color: var(--ink) !important; }
.faof-nav__group { position: relative; }
.faof-nav__drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 0.5rem 0;
  z-index: 5;
  box-shadow: var(--shadow);
}
.faof-nav__drop a { display: block; padding: 0.4rem 0.9rem; }
.faof-nav__group:hover .faof-nav__drop,
.faof-nav__group:focus-within .faof-nav__drop { display: block; }

.faof-nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cream);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 4;
}
.faof-nav-toggle__bars,
.faof-nav-toggle__bars::before,
.faof-nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.faof-nav-toggle__bars::before,
.faof-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.faof-nav-toggle__bars::before { top: -5px; }
.faof-nav-toggle__bars::after { top: 5px; }

.faof-hero {
  background:
    radial-gradient(800px 380px at 90% 0%, rgba(180, 133, 58, 0.22), transparent 55%),
    linear-gradient(165deg, #151922 0%, #1e2838 55%, #12161e 100%);
  color: #f4efe6;
  padding: 5rem 0 4.2rem;
}
.faof-hero h1, .faof-hero h2 { color: #f7f3ea; }
.faof-hero--page { padding: 3.2rem 0 2.7rem; }
.faof-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 3rem;
  align-items: center;
}
.faof-hero__panel {
  background: rgba(20, 26, 36, 0.7);
  border: 1px solid rgba(180, 133, 58, 0.3);
  padding: 1.5rem 1.4rem;
}
.faof-hero__offers { list-style: none; padding: 0; margin: 0; }
.faof-hero__offers li { padding: 0.9rem 0; border-top: 1px solid rgba(180, 133, 58, 0.16); display: grid; gap: 0.2rem; }
.faof-hero__offers li:first-child { border-top: 0; padding-top: 0; }
.faof-hero__offers strong { font-family: var(--serif); font-size: 1.2rem; color: #fff; }
.faof-hero__offers span { color: #c4bdb0; font-size: 0.95rem; }

.faof-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.8rem;
  font-weight: 700;
}
.faof-lead { font-size: 1.16rem; max-width: 40rem; color: #cfc8bb; }
.faof-lead--tight { font-size: 1rem; }
.faof-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.faof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--gold);
  padding: 0.75rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}
.faof-btn:hover { background: var(--gold-2); color: var(--ink); }
.faof-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.faof-btn--ghost:hover { background: var(--ink); color: #fff; }
.faof-hero .faof-btn--ghost { color: var(--gold-2); border-color: var(--gold); }
.faof-hero .faof-btn--ghost:hover { background: rgba(180, 133, 58, 0.14); color: #fff; }
.faof-panel .faof-btn--ghost { color: var(--gold-2); border-color: var(--gold); }

.faof-band { background: var(--navy-2); color: #c8c2b6; }
.faof-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.05rem 0;
  font-size: 0.9rem;
}
.faof-trust span { border-left: 1px solid rgba(180, 133, 58, 0.25); padding-left: 1rem; }
.faof-trust span:first-child { border-left: 0; padding-left: 0; }

.faof-section { padding: 4.2rem 0; }
.faof-section--tint { background: #efe8dc; }
.faof-section__head { max-width: 40rem; margin-bottom: 2rem; }
.faof-center { text-align: center; margin-top: 2rem; }
.faof-muted { color: var(--muted); font-size: 0.92rem; }
.faof-narrow { max-width: 36rem; }
.faof-badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.15rem 0.4rem;
}

.faof-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.faof-card {
  background: var(--cream);
  padding: 1.35rem 1.25rem 1.2rem;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.faof-card:hover { color: inherit; transform: translateY(-3px); }
.faof-card__num {
  font-family: var(--serif);
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  /* Ohne diese Zeile erbt die Nummer das flex:1 der Absätze darunter und
     dehnt sich mit — dann steht die Überschrift in jeder Karte auf einer
     anderen Höhe, je nachdem wie lang ihr Fließtext ist. */
  flex: 0 0 auto;
}
.faof-card p { color: var(--muted); flex: 1; }
/* Bei zwei Absätzen soll nur der letzte den Rest der Höhe aufnehmen. */
.faof-card p:not(:last-of-type) { flex: 0 0 auto; }
.faof-more {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}

.faof-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.2rem;
  align-items: start;
}
.faof-panel {
  background: var(--navy);
  color: #e7e2d6;
  padding: 1.6rem 1.45rem;
}
.faof-panel h2, .faof-panel h3 { color: #fff; }
.faof-panel .faof-cards { grid-template-columns: 1fr; }
.faof-panel .faof-card { background: rgba(255,255,255,0.04); color: #e7e2d6; box-shadow: none; }
.faof-panel .faof-card p { color: #c4bdb0; }

.faof-table-wrap { overflow-x: auto; }
.faof-table { width: 100%; border-collapse: collapse; background: var(--cream); }
.faof-table th, .faof-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.faof-table thead th { background: var(--navy); color: #f4efe6; font-weight: 600; }
.faof-table tbody th { font-family: var(--serif); font-size: 1.1rem; width: 18%; }

.faof-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.faof-models--db {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.faof-model-card {
  margin: 0;
  padding: 0;
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(21, 25, 34, 0.12);
  border: 0;
}
.faof-model-card__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  text-decoration: none !important;
  color: #fff;
  overflow: hidden;
  background: #111;
}
.faof-model-card__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faof-model-card__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #222;
}
.faof-model-card__desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 48px 10px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.92) 100%);
  pointer-events: none;
}
.faof-model-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #e8c9a0;
  letter-spacing: 0.02em;
}
.faof-model-card__loc {
  margin: 2px 0 6px;
  font-size: 0.82rem;
  color: #f2f2f2;
  opacity: 0.95;
}
.faof-model-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 4px;
  text-align: center;
}
.faof-model-card__facts span {
  display: block;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #cfcfcf;
  font-weight: 600;
}
.faof-model-card__facts strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
@media (max-width: 1100px) {
  .faof-models--db { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .faof-models--db { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .faof-models--db { grid-template-columns: 1fr; }
}
.faof-model {
  background: var(--cream);
  padding: 1.1rem;
  border: 1px solid var(--line);
}
.faof-model__avatar {
  aspect-ratio: 4/5;
  display: grid;
  place-items: center;
  margin-bottom: 0.8rem;
  filter: blur(1px);
}
.faof-model__avatar span {
  font-family: var(--serif);
  font-size: 2rem;
  color: #f4efe6;
}
.faof-model--a .faof-model__avatar { background: linear-gradient(160deg, #2a3344, #1e2838); }
.faof-model--b .faof-model__avatar { background: linear-gradient(160deg, #3a2f28, #241c18); }
.faof-model--c .faof-model__avatar { background: linear-gradient(160deg, #2c3a36, #1a2422); }
.faof-model--d .faof-model__avatar { background: linear-gradient(160deg, #34303a, #1c1a22); }
.faof-model--e .faof-model__avatar { background: linear-gradient(160deg, #3a3228, #221c16); }
.faof-model--f .faof-model__avatar { background: linear-gradient(160deg, #2a3038, #161a20); }
.faof-model__meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.25rem; }
.faof-gate {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.3rem 1.2rem;
  margin-bottom: 1.8rem;
}
.faof-gate--ok { border-color: var(--gold); }

.faof-faq details {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
}
.faof-faq summary { cursor: pointer; font-weight: 600; }
.faof-faq p { margin: 0.7rem 0 0; color: var(--muted); }

.faof-partners { padding: 2.4rem 0 0; }
.faof-partners__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
}
.faof-partners__list img { width: 100%; height: auto; }

.faof-foot { background: #efe8dc; padding-bottom: 5.5rem; }
.faof-foot__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
  padding: 3rem 0 2rem;
}
.faof-list { list-style: none; padding: 0; margin: 0; }
.faof-list li { margin-bottom: 0.35rem; }
.faof-list a { text-decoration: none; }
.faof-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  padding: 1.1rem 0 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  align-items: center;
}

.faof-dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  z-index: 25;
}
.faof-dock a {
  flex: 1;
  text-align: center;
  color: #f4efe6;
  text-decoration: none;
  padding: 0.85rem 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.faof-dock a + a { border-left: 1px solid rgba(180, 133, 58, 0.3); color: var(--gold-2); }

.faof-prose { max-width: 42rem; }
.faof-prose ul, .faof-prose ol { padding-left: 1.2rem; }
.faof-prose li { margin-bottom: 0.4rem; }

.faof-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.faof-form input, .faof-form textarea, .faof-form select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 0.65rem 0.7rem;
  font: inherit;
}
.faof-form textarea { resize: vertical; }
.faof-check { display: flex; gap: 0.6rem; align-items: flex-start; }
.faof-check input { width: auto; margin-top: 0.3rem; }
.faof-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.faof-form-block { margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.faof-note { padding: 0.75rem 0.9rem; border: 1px solid var(--line); }
.faof-note--ok { border-color: var(--gold); }
.faof-note--err { border-color: #8a3a3a; color: #6a2424; }

.faof-calc {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.6rem;
}
.faof-row { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.faof-row label { display: flex; justify-content: space-between; font-weight: 700; }
.faof-val { color: var(--gold); }
.faof-row input[type="range"] { width: 100%; }
.faof-seg { display: flex; gap: 0.4rem; background: var(--paper); border: 1px solid var(--line); padding: 0.25rem; }
.faof-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.45rem;
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.faof-seg button span { display: block; font-size: 0.7rem; font-weight: 600; }
.faof-seg button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.faof-calc__out { background: var(--navy); color: #fff; padding: 1.6rem; text-align: center; }
.faof-calc__total { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.2rem); margin: 0.3rem 0 1rem; }
.faof-calc__brk {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 0.55rem 0;
  font-size: 0.95rem;
  text-align: left;
}
.faof-calc__out .faof-muted { color: #c4bdb0; }

@media (min-width: 960px) {
  .faof-nav { display: flex !important; }
  .faof-nav-toggle { display: none !important; }
  .admin-bar .faof-top { top: 32px; }
}
@media (max-width: 959px) {
  .faof-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    /* dvh folgt der ein- und ausfahrenden Adressleiste; die Zeile darüber
       bleibt als Rückfall für Browser ohne dvh stehen. */
    height: calc(100dvh - var(--header-h));
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.2rem 6rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 40;
    display: none;
  }
  .faof-nav.is-open { display: flex !important; }
  .admin-bar .faof-nav { top: calc(var(--header-h) + 46px); }
  .faof-nav__drop { position: static; display: block; box-shadow: none; border: 0; padding-left: 0.6rem; }
  .faof-nav-toggle { display: inline-flex !important; }
  .ofm-lang {
    margin-left: auto;
    margin-right: 0.35rem;
  }
  .faof-nav-toggle { margin-left: 0; }
  .faof-hero__grid, .faof-split, .faof-calc, .faof-foot__grid, .faof-trust { grid-template-columns: 1fr; }
  .faof-trust span { border-left: 0; padding-left: 0; border-top: 1px solid rgba(180, 133, 58, 0.2); padding-top: 0.5rem; }
  .faof-dock { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faof-card:hover { transform: none; }
}

/* ——— Premium layer 0.2 ——— */
.faof-urgency {
  margin: 1.1rem 0 0;
  font-size: 0.88rem;
  color: var(--gold-2);
  letter-spacing: 0.02em;
}
.faof-btn--block { width: 100%; margin-top: 1.2rem; }
.faof-band--stats { background: var(--ink); padding: 1.6rem 0; }
.faof-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.faof-stats__item {
  text-align: center;
  color: #cfc8bb;
  padding: 0.4rem 0.3rem;
  border-left: 1px solid rgba(180, 133, 58, 0.25);
}
.faof-stats__item:first-child { border-left: 0; }
.faof-stats__item strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #fff;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.faof-stats__item span { font-size: 0.82rem; line-height: 1.35; display: block; }

.faof-section__head--wide { max-width: 48rem; }
.faof-section--dark {
  background:
    radial-gradient(700px 320px at 10% 0%, rgba(180, 133, 58, 0.18), transparent 50%),
    linear-gradient(180deg, #1a2130, #12161e);
  color: #cfc8bb;
}
.faof-section--dark h2,
.faof-section--dark h3 { color: #f7f3ea; }
.faof-section--dark .faof-card {
  background: rgba(255, 253, 248, 0.04);
  color: #e7e2d6;
  box-shadow: none;
  border: 1px solid rgba(180, 133, 58, 0.22);
}
.faof-section--dark .faof-card p { color: #b7b0a4; }
.faof-section--dark .faof-more { color: var(--gold-2); }
.faof-section--cta { padding-bottom: 5rem; }

.faof-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.faof-feature {
  background: var(--cream);
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.faof-feature::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(180, 133, 58, 0.12), transparent 70%);
  pointer-events: none;
}
.faof-feature__icon {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.faof-card--lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.faof-card--lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(21, 25, 34, 0.14);
}

.faof-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: none;
  border-left: 2px solid var(--gold);
}
.faof-process__step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0 1.35rem 1.4rem;
  position: relative;
  background: linear-gradient(90deg, rgba(180, 133, 58, 0.06), transparent 55%);
  border-bottom: 1px solid var(--line);
}
.faof-process__step:last-child { border-bottom: 0; }
.faof-process__num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  line-height: 1;
}
.faof-process__step h3 { margin-bottom: 0.25rem; }
.faof-process__step p { margin: 0; color: var(--muted); }

.faof-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.faof-compare__card {
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.faof-compare__topic {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: var(--ink);
  color: #f7f3ea;
  font-size: 1.15rem;
}
.faof-compare__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.faof-compare__col { padding: 1rem 1.05rem; min-height: 100%; }
.faof-compare__col p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.faof-compare__label {
  font-size: 0.68rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.45rem !important;
}
.faof-compare__col--them {
  background: #f3ebe0;
  color: #5a5048;
  border-right: 1px solid var(--line);
}
.faof-compare__col--them .faof-compare__label { color: #8a7b6a; }
.faof-compare__col--us {
  background: linear-gradient(165deg, #1e2838, #151922);
  color: #f0ebe2;
}
.faof-compare__col--us .faof-compare__label { color: var(--gold-2); }

.faof-cta-panel {
  margin-top: 2.2rem;
  padding: 1.6rem 1.5rem;
  background: var(--ink);
  color: #e7e2d6;
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 1.4rem;
  align-items: center;
}
.faof-cta-panel h3 { color: #fff; margin: 0 0 0.35rem; }
.faof-cta-panel p { margin: 0; color: #c4bdb0; }
.faof-cta-banner {
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(180, 133, 58, 0.28), transparent 55%),
    var(--ink);
  color: #e7e2d6;
  padding: 2.4rem 2rem;
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 1.5rem;
  align-items: center;
}
.faof-cta-banner h2 { color: #fff; }
.faof-cta-banner p { color: #cfc8bb; margin: 0; }

.faof-panel--accent {
  background:
    radial-gradient(280px 180px at 100% 0%, rgba(180, 133, 58, 0.25), transparent 60%),
    var(--navy);
}
.faof-token-grid { display: grid; gap: 0.85rem; margin: 1rem 0; }
.faof-token {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(180, 133, 58, 0.28);
  padding: 1rem 1.05rem;
}
.faof-token__num {
  margin: 0 0 0.25rem;
  color: var(--gold-2);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.faof-token__num span {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: #fff;
  margin-right: 0.25rem;
}
.faof-token h3 { color: #fff; margin-bottom: 0.3rem; }
.faof-token p { color: #c4bdb0; margin: 0; font-size: 0.92rem; }

.faof-checklist {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
}
.faof-checklist li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.6rem;
  border-bottom: 1px solid var(--line);
}
.faof-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(180, 133, 58, 0.18);
}

.faof-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
.faof-quotes--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}
.faof-quotes--six .faof-quote {
  padding: 1.1rem 0.95rem 1rem;
}
.faof-quotes--six .faof-quote p {
  font-size: 0.98rem;
  line-height: 1.4;
}
.faof-logo__text strong {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.faof-partners__list {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1099px) {
  .faof-quotes--six { grid-template-columns: repeat(2, 1fr); }
  .faof-partners__list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .faof-quotes--six { grid-template-columns: 1fr; }
}
.faof-quote {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.5rem 1.35rem 1.25rem;
  box-shadow: var(--shadow);
  position: relative;
}
.faof-quote::before {
  content: "“";
  position: absolute;
  top: 0.35rem;
  right: 1rem;
  font-family: var(--serif);
  font-size: 3.5rem;
  color: rgba(180, 133, 58, 0.28);
  line-height: 1;
}
.faof-quote p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1rem;
}
.faof-quote footer {
  font-size: 0.88rem;
  color: var(--muted);
}
.faof-quote footer strong { color: var(--ink); }

.faof-split--reverse { direction: rtl; }
.faof-split--reverse > * { direction: ltr; }

.faof-prose--wide { max-width: 48rem; }
.faof-prose h2 { margin-top: 2rem; }
.faof-prose h3 { margin-top: 1.4rem; }

@media (max-width: 1099px) {
  .faof-stats,
  .faof-feature-grid,
  .faof-compare,
  .faof-quotes,
  .faof-cta-panel,
  .faof-cta-banner { grid-template-columns: 1fr; }
  .faof-stats__item { border-left: 0; border-top: 1px solid rgba(180, 133, 58, 0.2); padding-top: 0.7rem; }
  .faof-stats__item:first-child { border-top: 0; }
  .faof-compare__cols { grid-template-columns: 1fr; }
  .faof-compare__col--them { border-right: 0; border-bottom: 1px solid var(--line); }
  .faof-process__step { grid-template-columns: 3.2rem 1fr; }
}

/* ——— Sprachumschalter (ofm-lang, Optik wie HCG) ——— */
.ofm-lang {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.ofm-lang__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 2px 4px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.ofm-lang__btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.ofm-lang__btn:hover,
.ofm-lang__btn[aria-expanded="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.ofm-lang__flag {
  display: inline-flex;
  width: 20px;
  height: 13px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(180, 133, 58, 0.45);
}
.ofm-lang__flag svg,
.ofm-lang__flag img {
  display: block;
  width: 20px;
  height: 13px;
  object-fit: cover;
}
.ofm-lang__name {
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.ofm-lang-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(860px, calc(100vw - 32px));
  width: min(860px, calc(100vw - 32px));
}
.ofm-lang-dialog::backdrop {
  background: rgba(21, 25, 34, 0.72);
}
.ofm-lang-dialog__panel {
  background: linear-gradient(180deg, #1e2838 0%, #151922 100%);
  border: 1px solid rgba(180, 133, 58, 0.35);
  border-radius: 12px;
  padding: 32px 36px 28px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(243, 230, 196, 0.06);
}
.ofm-lang-dialog__kicker {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.ofm-lang-dialog__grid {
  display: block;
  columns: 3;
  column-gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ofm-lang-dialog__grid li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.ofm-lang-dialog__grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: #f4ead8 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 0.95rem;
}
.ofm-lang-dialog__grid a:hover,
.ofm-lang-dialog__grid a[aria-current="true"] {
  color: var(--gold-2) !important;
  border-bottom-color: var(--gold);
}
.ofm-lang-dialog__flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1px;
}
.ofm-lang-dialog__flag svg,
.ofm-lang-dialog__flag img,
.ofm-flag-svg {
  display: block;
  width: 18px;
  height: 12px;
  object-fit: cover;
}
@media (max-width: 720px) {
  .ofm-lang-dialog__grid { columns: 2; }
}
@media (max-width: 480px) {
  .ofm-lang-dialog__grid { columns: 1; }
  .ofm-lang-dialog__panel { padding: 24px 22px 20px; }
  .ofm-lang__name { display: none; }
}

/* Model-Datenbank im Theme-Look */
.dsmdb-card-price,
.dsmdb-card-svc { display: none !important; }
.ofm-models .dsmdb-search,
.ofm-models .dsmdb-wrap,
.ofm-models .dsmdb-listing {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.ofm-models .dsmdb-wrap { padding-left: 0; padding-right: 0; }
.ofm-models .dsmdb-listing { margin: 1.5rem auto 2rem; gap: 1.75rem; }
.ofm-models .eib-home-seo { display: none !important; }
.dsmdb-sc__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1rem;
  background: #151922;
  color: #f4ead8;
  margin: 0 0 1.25rem;
}
/*
 * Die mobile Fassung muss hier stehen und nicht im Plugin: Das Theme-Stylesheet
 * wird nach dem des Plugins geladen, eine Abfrage dort käme also zu spät.
 * Als Flexzeile schrumpfen die sechs Kennzahlen auf dem Telefon auf gut fünfzig
 * Pixel je Spalte, dann bricht jede Beschriftung ab. Zwei feste Spalten sind
 * schmal genug für „Reaktionszeit" und breit genug zum Lesen.
 */
@media (max-width: 720px) {
  /* !important, weil Theme und Plugin dieselbe Leiste beschreiben und die
     Reihenfolge der Stylesheets sonst über das Ergebnis entscheidet. */
  .dsmdb-sc__stats {
    display: grid !important;
    /* auto-fit statt fester Spaltenzahl: Die Leiste legt selbst fest, wie viele
       Kennzahlen nebeneinander passen. Zwei Spalten auf einem 390er-Display,
       eine auf sehr schmalen Geräten — ohne dass ein Haltepunkt die genaue
       Gerätebreite erraten muss. 9rem ist die Breite, die "Reaktionszeit" in
       der verkleinerten Schrift ungebrochen braucht. */
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .dsmdb-sc__stats > .dsmdb-sc__stat,
  .dsmdb-sc__stats > * {
    /* min-width kommt aus dem Plugin mit 6.5rem; in einer 2-Spalten-Zelle auf
       kleinen Geräten sprengt das die Spalte. */
    min-width: 0 !important;
    max-width: 100%;
    flex: none !important;
    padding: 0.7rem 0.5rem;
    /* Nur Trennlinien nach unten. Ein rechter Rahmen müsste wissen, welche
       Zelle am Zeilenende steht — bei auto-fit ändert sich das mit der
       Gerätebreite, und nth-child rät dann falsch. */
    border-right: 0;
    border-bottom: 1px solid rgba(244, 234, 216, 0.12);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .dsmdb-sc__stat--feedback { grid-column: 1 / -1; }
  /* „Reaktionszeit" ist das längste Wort und bestimmt die nötige Schriftgröße. */
  .dsmdb-sc__stat span {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    display: block;
  }
}

/* ============================================================================
   BILDSPRACHE UND LAYOUT-ÜBERARBEITUNG (0.4.0)

   Die Seite hatte kein einziges Foto. Alles unterhalb dieser Linie führt
   Bildflächen ein und lockert die bis dahin rein textbasierten Raster auf.
   Die Typografie und die Farbmarke bleiben unangetastet — geändert wird die
   Tiefenstaffelung: weiche Kanten, echte Schatten, Bild als Trägerfläche.
   ========================================================================= */

:root {
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
  --lift: 0 22px 50px rgba(21, 25, 34, 0.16);
  --lift-soft: 0 10px 26px rgba(21, 25, 34, 0.09);
}

/* ——— Grundform: Bilder bekommen Kanten und Fläche ——— */

.faof-figure { margin: 0 0 1.4rem; }
.faof-figure img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--lift-soft);
}
.faof-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}
.faof-section--dark .faof-figure figcaption { color: #a49c8f; }

/* ——— Bühne mit Bild statt Textpanel ——— */

.faof-hero--media .faof-hero__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  align-items: center;
}
.faof-hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.faof-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Verlauf von unten, damit ein eventueller Text darauf lesbar bleibt und das
   Motiv sich in den dunklen Bühnenhintergrund einfügt. */
.faof-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 25, 34, 0) 45%, rgba(21, 25, 34, 0.55) 100%);
  pointer-events: none;
}
.faof-hero__media--wide img { aspect-ratio: 16 / 10; }

/* Unterseiten-Bühne: schmaler Bildstreifen unter der Überschrift. */
.faof-hero--page .faof-hero__media {
  margin-top: 1.8rem;
  border-radius: var(--r);
}
.faof-hero--page .faof-hero__media img {
  aspect-ratio: 21 / 8;
  /* Bei 21:7 fiel von einem Hochformat nur ein Streifen aus der Bildmitte
     übrig — bei Portraits war das regelmäßig der Hals statt des Gesichts.
     Etwas mehr Höhe und ein Ausschnitt aus dem oberen Drittel treffen das
     Motiv, ohne dass die Bühne zur Bildstrecke wird. */
  object-position: center 22%;
}

/* ——— Karten mit Motiv ——— */

.faof-card__media {
  position: relative;
  /* Zieht das Motiv bündig an die Kartenkante — die Werte spiegeln das
     Innenabstandsmaß von .faof-card. */
  margin: -1.35rem -1.25rem 1.1rem;
  overflow: hidden;
  border-radius: var(--r) var(--r) 0 0;
}
.faof-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.faof-card--lift { border-radius: var(--r); overflow: hidden; }
.faof-card--lift:hover .faof-card__media img { transform: scale(1.045); }

/* ——— Bildmosaik: bricht lange Textstrecken auf ——— */

.faof-mosaic {
  display: grid;
  /* Spaltenzahl kommt aus dem Template (siehe faof_img_mosaic), damit die
     letzte Reihe voll wird. auto-fit als Rückfall, falls die Variable fehlt. */
  grid-template-columns: repeat(var(--mosaik-spalten, 5), minmax(0, 1fr));
  gap: 0.9rem;
  margin: 2rem 0;
}
@media (max-width: 900px) {
  .faof-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.faof-mosaic__cell {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--lift-soft);
}
.faof-mosaic__cell img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.faof-mosaic__cell:hover img { transform: scale(1.05); }
/* Erste Zelle darf größer sein, damit das Raster nicht wie eine Tapete wirkt. */
.faof-mosaic--akzent .faof-mosaic__cell:first-child {
  grid-column: span 2;
}
.faof-mosaic--akzent .faof-mosaic__cell:first-child img { aspect-ratio: 3 / 2; }

/* ——— Wechsel aus Bild und Text ———
   Eigene Klasse statt .faof-split, weil .faof-split bereits als reines
   Textraster mit anderer Spaltenteilung im Einsatz ist. */

.faof-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.faof-duo__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift);
}
.faof-duo__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.faof-duo--reverse .faof-duo__media { order: 2; }
.faof-duo--reverse .faof-duo__text { order: 1; }

/* ——— Magazin ——— */

.faof-post-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faof-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift);
  color: inherit;
}
.faof-post-card__media { overflow: hidden; }
.faof-post-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.faof-post-card:hover .faof-post-card__media img { transform: scale(1.05); }
.faof-post-card__body { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: 0.45rem; }
.faof-post-card__meta {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.faof-post-card h3 { margin: 0; font-size: 1.3rem; }
.faof-post-card p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.faof-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}

/* Beitragsbild im Artikel. */
.faof-post-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 2.2rem;
  box-shadow: var(--lift);
}
.faof-post-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* Bild mitten im Fließtext eines Beitrags. */
.faof-prose .faof-figure { margin: 2.2rem 0; }

/* ——— Weiche Kanten für die bestehenden Bausteine ——— */

.faof-card,
.faof-feature,
.faof-panel,
.faof-quote,
.faof-compare__col,
.faof-hero__panel,
.faof-form-block,
.faof-model-card { border-radius: var(--r); }

.faof-btn { border-radius: 999px; padding-inline: 1.45rem; }
.faof-partners__list img { border-radius: var(--r-sm); }

/* ——— Partnerleiste: Kachel plus Name ———
   Die Kachel trägt die Markenfarbe, der Name steht darunter. Vorher stand der
   Name allein in der Farbe auf weißem Grund; das war bei einundzwanzig
   Einträgen unruhig und sah nach Platzhalter aus. Die Kachelform kennt jeder
   vom Startbildschirm seines Telefons und liest sie sofort als Plattform. */

.faof-partners { padding-block: 2.6rem; }
.faof-partners__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 1rem 0.6rem;
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.1rem;
}
.faof-partners__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.faof-partners__kachel {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--marke, var(--navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(19, 22, 33, 0.14);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.faof-partners__item:hover .faof-partners__kachel {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(19, 22, 33, 0.2);
}
.faof-partners__kachel svg {
  width: 26px;
  height: 26px;
  display: block;
}
.faof-partners__kurz {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Drei Zeichen brauchen etwas weniger Größe, sonst stoßen sie an den Rand. */
.faof-partners__kachel .faof-partners__kurz:not(:empty) { font-size: clamp(0.8rem, 2.4vw, 1.05rem); }
.faof-partners__name {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.faof-section--dark .faof-partners__name { color: #b7b0a4; }

/* ——— Zahlenband mit mehr Gewicht ——— */

.faof-band--stats { padding-block: 1.6rem; }

/* ——— Bewegung nur, wo sie hilft ——— */

@media (prefers-reduced-motion: reduce) {
  .faof-card__media img,
  .faof-mosaic__cell img,
  .faof-post-card__media img,
  .faof-post-card { transition: none; }
}

/* ——— Schmale Ansichten ——— */

@media (max-width: 900px) {
  .faof-duo { grid-template-columns: 1fr; gap: 1.8rem; }
  .faof-duo--reverse .faof-duo__media,
  .faof-duo--reverse .faof-duo__text { order: initial; }
  .faof-hero--media .faof-hero__grid { grid-template-columns: 1fr; }
  .faof-hero__media img { aspect-ratio: 16 / 10; }
  .faof-hero--page .faof-hero__media img { aspect-ratio: 16 / 8; }
}

@media (max-width: 560px) {
  .faof-mosaic { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .faof-mosaic--akzent .faof-mosaic__cell:first-child { grid-column: span 2; }
  .faof-post-hero img { aspect-ratio: 16 / 10; }
  .faof-partners__list { grid-template-columns: repeat(4, 1fr); }
}

/* ——— Prüfliste auf der Vertrauensseite ——— */

.faof-kriterien { display: grid; gap: 1.1rem; }
.faof-kriterium {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--lift-soft);
}
/* Der eine Punkt, den wir selbst nicht voll erfüllen, wird optisch abgesetzt —
   sonst liest ihn niemand. */
.faof-kriterium--offen { border-left-color: var(--muted); }
.faof-kriterium__num {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--gold);
  margin: 0;
  line-height: 1;
}
.faof-kriterium--offen .faof-kriterium__num { color: var(--muted); }
.faof-kriterium h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.faof-kriterium p { margin: 0 0 0.7rem; }
.faof-kriterium__pruef { color: var(--muted); font-size: 0.97rem; }
.faof-kriterium__wir {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.97rem;
}
.faof-kriterium__marke {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-right: 0.5rem;
  vertical-align: 0.06em;
}
.faof-kriterium--offen .faof-kriterium__marke { background: var(--muted); color: #fff; }

@media (max-width: 560px) {
  .faof-kriterium { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.2rem 1.1rem; }
  .faof-kriterium__num { font-size: 1.5rem; }
}

/* ——— Potenzialrechner ———
   Zwei Spalten: links die Eingaben, rechts das Ergebnisfeld, das mitscrollt.
   Unter 900px stapeln sie, das Ergebnisfeld rutscht dann nach unten — dort
   gehört es hin, weil es die Folge der Eingaben ist. */

.ofm-calc {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.6rem;
  align-items: start;
}
.ofm-calc__inputs {
  display: grid;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem;
  box-shadow: var(--lift-soft);
}
.ofm-calc__field > label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.ofm-calc__control {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.ofm-calc__control input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gold);
}
.ofm-calc__control input[type="number"] {
  width: 108px;
  flex-shrink: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  text-align: right;
  color: var(--ink);
  background: var(--cream);
}
.ofm-calc__unit {
  color: var(--muted);
  font-size: 0.95rem;
  margin-left: -0.45rem;
}
.ofm-calc__hint {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Silhouette und Stufenliste nebeneinander. */
.ofm-calc__stufen {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
.ofm-calc__figur {
  flex-shrink: 0;
  display: block;
}
.ofm-calc__figur-leer { fill: #e3ddd2; }
.ofm-calc__figur-voll {
  fill: var(--gold);
  transition: none;
}
/* Der Füllstand springt nicht, er wandert — sonst wirkt die Stufe wie ein
   Schalter statt wie ein Mehr oder Weniger. */
#ofm-calc-rect { transition: y 0.28s ease, height 0.28s ease; }

.ofm-calc__stufen-wahl {
  flex: 1;
  min-width: 0;
}
.ofm-calc__stufen-wahl input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  margin-bottom: 0.9rem;
}
.ofm-calc__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  counter-reset: none;
}
.ofm-calc__stufe-btn {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ofm-calc__stufe-btn:hover { background: var(--paper); }
.ofm-calc__stufe-nr {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e3ddd2;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.ofm-calc__stufe-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.3;
}
.ofm-calc__stufe-text span {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}
.ofm-calc__liste li.is-on .ofm-calc__stufe-btn {
  background: var(--paper);
  border-color: var(--gold);
  color: var(--text);
}
.ofm-calc__liste li.is-on .ofm-calc__stufe-nr {
  background: var(--gold);
  color: #fff;
}

/* Ergebnisfeld. */
.ofm-calc__out {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  overflow: hidden;
}
.ofm-calc__out-inner { padding: 1.8rem; }
.ofm-calc__out .faof-kicker { color: var(--gold-2); }
.ofm-calc__out-titel {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0.2rem 0 0.9rem;
  color: #fff;
}
.ofm-calc__betrag {
  font-family: var(--serif);
  font-size: 2.6rem;
  letter-spacing: 0.06em;
  color: var(--gold-2);
  margin: 0 0 1rem;
}
.ofm-calc__out-text,
.ofm-calc__fuss {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #c4bdb0;
}
.ofm-calc__fuss {
  font-size: 0.82rem;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ofm-calc__start { width: 100%; justify-content: center; margin-top: 0.4rem; }

.ofm-calc__form { display: grid; gap: 0.35rem; }
/* Ohne diese Zeile gewinnt das display darüber gegen das hidden-Attribut und
   das Formular steht offen da, bevor überhaupt gerechnet wurde. */
.ofm-calc__form[hidden] { display: none; }
.ofm-calc__form-text {
  font-size: 0.95rem;
  color: #e8e2d6;
  margin: 0 0 0.6rem;
}
.ofm-calc__form label {
  font-size: 0.86rem;
  color: #c4bdb0;
  margin-top: 0.5rem;
}
.ofm-calc__form input[type="text"],
.ofm-calc__form input[type="email"],
.ofm-calc__form input[type="tel"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
}
.ofm-calc__form input:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 1px;
}
.ofm-calc__check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.84rem;
  line-height: 1.45;
  margin-top: 0.7rem;
  color: #c4bdb0;
}
.ofm-calc__check input { margin-top: 0.2rem; accent-color: var(--gold); }
.ofm-calc__check a { color: var(--gold-2); }
.ofm-calc__form .faof-btn { margin-top: 1rem; width: 100%; justify-content: center; }
.ofm-calc__klein {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #9c968c;
  margin: 0.8rem 0 0;
}
.ofm-calc .ofm-calc__hint { color: #9c968c; }

@media (max-width: 900px) {
  .ofm-calc { grid-template-columns: 1fr; }
  .ofm-calc__out { position: static; }
}
@media (max-width: 520px) {
  .ofm-calc__stufen { flex-direction: column; align-items: center; }
  .ofm-calc__figur { width: 84px; height: 182px; }
  .ofm-calc__control { flex-wrap: wrap; }
  .ofm-calc__control input[type="range"] { flex-basis: 100%; }
  .ofm-calc__control input[type="number"] { width: 100%; text-align: left; }
}

/* ——— Stimmen ———
   Vier Spalten, zwei Reihen. Das Zitatzeichen sitzt als eigenes Element über
   dem Text statt als überlagerndes Zierzeichen in der Ecke — dort lief es
   vorher in die erste Zeile hinein. */

.faof-stimmen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.faof-stimme {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--lift-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.faof-stimme:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.faof-stimme::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.faof-stimme__text {
  margin: 0 0 1.3rem;
  font-size: 1.02rem;
  line-height: 1.58;
  color: var(--text);
  flex: 1;
  quotes: none;
}
.faof-stimme__wer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.faof-stimme__kreis {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-2);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faof-stimme__namen { display: flex; flex-direction: column; min-width: 0; }
.faof-stimme__namen strong {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.2;
}
.faof-stimme__namen span {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.3;
}

.faof-section--tint .faof-stimme { background: #fff; }

@media (max-width: 1099px) {
  .faof-stimmen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .faof-stimmen { grid-template-columns: 1fr; }
}

/* Zweiter Absatz in den Einstiegskarten: etwas kleiner als der erste, damit
   die Karte eine Rangfolge behält und nicht zur Textwand wird. */
.faof-card__mehr {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-top: 0.65rem;
}