/* =====================================================================
   Startseite formatplus.digital: nur was basis.css nicht schon hat.
   Farben und Schriften aus marke.css.
   Seit 30.09.2026 ohne Themen-Kacheln (Daniel: Sparten nur im Menü).
   ===================================================================== */

/* Hero mit Daniel: am Handy kleines Foto über dem Text, am Computer großes Foto rechts */
.hp-text{display:grid;gap:20px;align-content:start}
.hp-person{display:flex;align-items:center;gap:14px}
.hp-person img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hp-person span{display:grid;gap:2px;min-width:0}
.hp-person strong{font:var(--head-weight) 1.25rem/1.1 var(--font-head);text-transform:var(--head-case);color:var(--dark)}
.hp-person small{font-size:.85rem;line-height:1.35;color:var(--muted)}
.hero-person .kicker{display:none}
.hero-person .lede{max-width:46ch}
.hp-kunde{font-size:.95rem;color:var(--muted)}
.hp-kunde a{color:var(--link);font-weight:700;text-underline-offset:3px}
.hp-photo{display:none}
@media (min-width:900px){
  .hero-person .wrap{align-items:center}
  .hp-person{display:none}
  .hero-person .kicker{display:inline-flex}
  .hp-photo{display:block;justify-self:end;width:100%}
}

/* Über mich ohne zweites Foto: Text links, Mitgliedschaften rechts */
.about{display:grid;gap:24px}
.about .me-text p:not(.quote){font-size:1.05rem;line-height:1.6;max-width:60ch}
@media (min-width:860px){.about{grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}}

/* Arbeitsweise: drei Karten */
@media (min-width:1024px){.why-grid.why-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Kunde werden */
.neu{display:grid;gap:8px;max-width:760px}
.neu .head{margin-bottom:8px}
.neu .steps{margin-bottom:22px}
.neu .btns{display:flex;flex-wrap:wrap;gap:10px}
.neu .btns .btn{flex:1 1 220px}

/* Wenn sich etwas ändert: Anliegen aus dem Kundenservice */
.anliegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.anliegen a{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:12px 14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);color:var(--dark);font-weight:700;font-size:.95rem;line-height:1.25;text-decoration:none;min-width:0;overflow-wrap:break-word;hyphens:auto}
.anliegen a:hover{border-color:var(--accent)}
.anliegen svg{width:24px;height:24px;flex:none;color:var(--link)}
.anliegen-alle{margin-top:16px}
.anliegen-alle a{color:var(--link);font-weight:700;text-underline-offset:3px}
@media (min-width:760px){.anliegen{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Titel im Hero (Daniels Wortlaut, 30.09.2026) */
.hp-titel{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hp-titel li{position:relative;padding-left:24px;font-size:.92rem;font-weight:600;line-height:1.35;color:var(--dark)}
.hp-titel li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;background:var(--accent);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}

/* Logos: Versicherer (Arbeitsweise) und Verbände (Über mich). Logos unverändert, nur auf weißer Kachel */
.logo-block{margin-top:34px;display:grid;gap:14px}
.logo-block h3{font-size:1.15rem;line-height:1.25}
.logo-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.logo-reihe img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
@media (min-width:960px){.logo-reihe{grid-template-columns:repeat(8,minmax(0,1fr))}}
.logo-reihe-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:560px}
@media (min-width:600px){.logo-reihe-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.about .logo-block{margin-top:0}