@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url("fonts/jost-500.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:600;font-display:swap;src:url("fonts/jost-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("fonts/inter-600.woff2") format("woff2")}

/* CI Anteces: Weiss, Grau, Rot, Blau, Schwarz */
:root{
  --blau:#32384c; --blau-tief:#262b3a; --rot:#c81230; --grau:#646565;
  --text:#23262e; --papier:#f4f5f6; --linie:#dcdfe3; --weiss:#fff;
  --rosa:#f59aaa;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Inter",system-ui,sans-serif;color:var(--text);background:var(--weiss);line-height:1.6;font-size:17px}
h1,h2,h3,h4,.frage{text-wrap:balance}
p,dd{text-wrap:pretty}
h1,h2,h3{font-family:"Jost",sans-serif;font-weight:600;line-height:1.12;color:var(--blau);letter-spacing:-.015em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
:root{--maxw:1160px}
@media(min-width:1600px){:root{--maxw:1320px}}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.dark :focus-visible{outline-color:#fff}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:6px;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent}
.btn-rot{background:var(--rot);color:#fff}
.btn-rot:hover{background:#a50e27}
.btn-linie{border-color:rgba(255,255,255,.55);color:#fff}
.btn-linie:hover{border-color:#fff}

/* Konzept-Hinweis */
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;background:var(--blau);color:#fff;padding:12px 18px;border-radius:6px;font-weight:600}
.skip-link:focus{top:12px}
.hinweis{background:#fff7d6;color:#5b4a00;font-size:.9rem;padding:10px 0;border-bottom:1px solid #eadf9f}

/* Header */
header{background:#fff;border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav .logo svg{height:50px;width:auto}
.nav nav{display:flex;gap:32px;font-weight:500;color:var(--blau)}
.nav nav a{text-decoration:none;padding:10px 0}
.nav nav a:hover{color:var(--rot)}
.nav .rechts{display:flex;align-items:center;gap:18px}
/* Sprachschalter: bewusst anders als die Menüpunkte */
.sprach-gruppe{position:relative}
.sprache{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px 0 11px;border:1px solid var(--linie);border-radius:999px;background:none;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--grau);line-height:1;cursor:pointer}
.sprache svg{width:10px;height:10px;transition:transform .2s}
.sprache:hover,.sprache:focus-visible,.sprache[aria-expanded="true"]{color:var(--rot);border-color:var(--rot)}
.sprache[aria-expanded="true"] svg{transform:rotate(180deg)}
.sprach-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:160px;background:#fff;border:1px solid var(--linie);border-radius:8px;box-shadow:0 14px 34px rgba(50,56,76,.14);padding:8px;z-index:20}
.sprach-menu[hidden]{display:none}
.sprach-menu a,.sprach-menu .jetzt{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:6px;color:var(--blau);font-weight:500;text-decoration:none}
.sprach-menu a:hover,.sprach-menu a:focus-visible{background:var(--papier);color:var(--rot)}
.sprach-menu .jetzt{font-weight:600}
.sprach-menu .jetzt::after{content:"✓";color:var(--rot)}
.nav .tel{font-weight:600;color:var(--blau);text-decoration:none}
.nav{position:relative}
/* Untermenü Leistungen: per Klick, Tastatur und (am Desktop) beim Darüberfahren */
.nav-gruppe{position:relative}
.nav-knopf{font:inherit;font-weight:500;color:var(--blau);background:none;border:0;padding:10px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-knopf:hover,.nav-knopf[aria-expanded="true"]{color:var(--rot)}
.nav-knopf svg{width:12px;height:12px;transition:transform .2s}
.nav-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 6px);left:-18px;min-width:270px;background:#fff;border:1px solid var(--linie);border-radius:8px;box-shadow:0 14px 34px rgba(50,56,76,.14);padding:8px;z-index:20}
.nav-menu[hidden]{display:none}
.nav .nav-menu a{display:block;padding:11px 14px;border-radius:6px;color:var(--blau);font-weight:500;text-decoration:none}
.nav .nav-menu a:hover,.nav .nav-menu a:focus-visible{background:var(--papier);color:var(--rot)}
.nav .nav-menu .nav-alle{margin-top:4px;border-top:1px solid var(--linie);border-radius:0 0 6px 6px;font-size:.92rem;color:var(--grau)}
@media(prefers-reduced-motion:reduce){.nav-knopf svg{transition:none}}

/* Hero: Menschen statt Muster */
.hero{background:linear-gradient(135deg,rgba(50,56,76,.82),rgba(38,43,58,.88)),url("images/arrows-bg.jpg") center/cover;color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;min-height:clamp(540px,42vw,700px)}
.hero-text{padding:48px 0;align-self:center}
.hero h1{color:#fff;font-size:clamp(2.2rem,4vw,3.3rem);max-width:15ch}
.hero p{font-size:1.25rem;color:#dfe2e8;max-width:44ch;margin:24px 0 36px}
.hero .kicker{text-wrap:balance;font-size:.95rem;font-weight:600;color:#c9cdd6;letter-spacing:.02em;margin:0 0 18px;max-width:none}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
/* Foto ragt bis zum Rand, aber höchstens 240px über den Inhaltsbereich hinaus – sonst wird es zu breit und die Köpfe werden abgeschnitten */
.hero-bild{position:relative;margin-right:max(calc((100vw - var(--maxw))/-2 - 28px),-240px)}
/* Teamfoto füllt die Hero-Höhe und läuft links weich ins Pfeilmuster aus. Die Hero-Höhe ist so gewählt, dass seitlich höchstens wenig beschnitten wird; wird es knapp, stapelt der Hero (siehe 1260px-Regel). */
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}

/* Sehr breite Bildschirme: Foto endet vor dem Rand und läuft auch rechts weich ins Pfeilmuster aus */
@media(min-width:1700px){.hero-bild img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}}

/* Nachweise */
.nachweise{border-bottom:1px solid var(--linie)}
.nachweise ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:30px;padding-bottom:30px}
.nachweise li{font-size:.95rem;color:var(--grau);line-height:1.4}
.nachweise b{display:block;color:var(--blau);font-family:"Jost",sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:2px}

section{padding:104px 0}
.kopf{max-width:none;margin-bottom:56px}

.kopf h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.kopf p{font-size:1.15rem;color:var(--grau);margin-top:18px;max-width:80ch}

/* Signatur: Befähigen – Begleiten – Übernehmen */
.skala-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie)}
.stufe{padding:36px 32px 8px 0}
.stufe+.stufe{padding-left:32px;border-left:1px solid var(--linie)}
.anteil{display:flex;height:40px;border-radius:6px;overflow:hidden;margin-bottom:24px;font-size:.8rem;font-weight:600}
.anteil span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
.anteil .ihr{background:#e3e5e7;color:var(--blau)}
.anteil .wir{background:var(--rot);color:#fff}
.skala-legende{display:flex;gap:22px;font-size:.9rem;color:var(--grau);margin:-28px 0 28px}
.skala-legende span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px;background:#e3e5e7}
.skala-legende .l-wir::before{background:var(--rot)}
.stufe h3{font-size:1.6rem;margin-bottom:12px}
.stufe p{color:var(--text);max-width:34ch}
.stufe .wer{margin-top:18px;font-size:.92rem;color:var(--grau)}
.skala-fuss{margin-top:48px;padding-top:24px;border-top:1px solid var(--linie);color:var(--grau);max-width:70ch}

/* Signatur: Eine Frage, drei Blickwinkel */
.claim span{display:block}
.kopf-claim{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:baseline}
.kopf-claim h2{font-size:clamp(2rem,3.2vw,2.8rem)}
.kopf-claim p{margin-top:0;max-width:52ch}
#blick,#buchhaltung{background:var(--papier)}
.blick{border-top:1px solid var(--linie);padding-top:28px}
.blick-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.blick-tabs button{font:inherit;font-size:1.02rem;font-weight:600;line-height:1.35;text-align:left;min-height:76px;padding:16px 20px;border-radius:8px;border:1px solid var(--linie);background:#fff;color:var(--blau);cursor:pointer;position:relative}
.blick-tabs button:hover{border-color:var(--blau)}
.blick-tabs button[aria-selected="true"]{background:var(--blau);border-color:var(--blau);color:#fff}
.blick-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:28px;bottom:-9px;width:16px;height:16px;background:var(--blau);transform:rotate(45deg)}
.blick-panels{display:grid}
.blick-panel{grid-area:1/1}
.blick-panel.is-hidden{visibility:hidden}
.frage{font-family:"Jost",sans-serif;font-weight:500;letter-spacing:0;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.2;color:var(--blau);max-width:none;margin-bottom:36px}
.sichten{display:grid;grid-template-columns:repeat(4,1fr)}
.sicht{padding:4px 24px 4px 0}
.sicht+.sicht{padding-left:24px;border-left:1px solid var(--linie)}
.sicht h3,.sicht h4{font-family:"Jost",sans-serif;font-weight:600;font-size:1.15rem;color:var(--rot);margin-bottom:10px}
.sicht p{max-width:none}
.sicht a{display:inline-block;margin-top:14px;font-size:.92rem;font-weight:600;color:var(--blau);text-underline-offset:4px}

/* Leistungen: vier eigenständige Einstiege, kombinierbar */
.leistungen{background:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.weg{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px;row-gap:48px}
/* Vier eigenständige Einstiege: je ein kurzer roter Strich statt einer durchgehenden Linie */
.weg li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;padding-top:22px;border-top:1px solid var(--linie);position:relative}
.weg li::before{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--rot)}
.weg a{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;text-decoration:none}
.weg h3{font-size:1.3rem}
.weg p{color:var(--grau)}
.weg .mehr{color:var(--rot);font-weight:600;align-self:end}
.weg a:hover h3{color:var(--rot)}
@media(max-width:1100px){.weg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.weg{grid-template-columns:1fr;row-gap:32px}}
.weg.weg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.weg.weg-3{grid-template-columns:1fr;row-gap:32px}}
/* Praxis */
.praxis{background:var(--blau);color:#fff}
.praxis .kopf h2{color:#fff}
.praxis .kopf p{color:#c9cdd6}
/* Startseite: Kundenwege (ein Kunde, mehrere Leistungen) */
.wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:64px}
.kundenweg{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.kundenweg h3{color:#fff;font-size:1.35rem}
.kw-vorher{color:#c9cdd6;margin:10px 0 26px}
.kw-schritt{position:relative;padding:0 0 22px 26px;border-left:2px solid rgba(255,255,255,.18)}
.kw-schritt::before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--rot)}
.kw-schritt a{color:#fff;font-family:"Jost",sans-serif;font-weight:600;font-size:1.1rem;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.kw-schritt a:hover{color:var(--rosa);text-decoration-color:currentColor}
.kw-schritt p{color:#dfe2e8;margin-top:4px}
.kw-heute{padding:4px 0 0 26px;border-left:2px solid var(--rosa);color:#fff;font-size:1.08rem;font-weight:500;line-height:1.5}
.kw-heute b{display:block;font-size:.85rem;font-weight:600;color:var(--rosa);margin-bottom:4px}
@media(max-width:900px){.wege{grid-template-columns:1fr;grid-template-rows:none;row-gap:56px}.kundenweg{grid-row:auto;grid-template-rows:none}}
@media(max-width:560px){.wege{row-gap:44px}.kw-vorher{margin-bottom:20px}.kw-schritt{padding-bottom:16px;padding-left:22px}.kw-heute{padding-left:22px;font-size:1.02rem}}
.faelle{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.fall{padding:0 32px 0 0}
.fall+.fall{padding-left:32px;border-left:1px solid rgba(255,255,255,.18)}
.fall h3{color:#fff;font-size:1.25rem;margin-bottom:6px}
.fall .bereiche{font-size:.9rem;color:#c9cdd6;margin-bottom:10px}
.fall dt{font-size:.85rem;color:var(--rosa);font-weight:600;margin-top:14px}
.fall dd{color:#dfe2e8}
.fall a{display:inline-block;margin-top:20px;color:#fff;font-weight:600;text-underline-offset:4px}

/* Vor Ort */
.ablauf{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:72px;border-top:1px solid var(--linie)}
.ablauf li{padding:28px 24px 0 0}
.ablauf li+li{padding-left:24px;border-left:1px solid var(--linie)}
.ablauf h3{font-size:1.2rem;margin:0 0 8px}
.ablauf p{color:var(--grau);font-size:.97rem}
.orte{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ort{display:block;text-decoration:none;color:inherit;border-radius:8px}
.ort:hover h3{color:var(--rot)}
.ort:hover img{filter:brightness(1.04)}
.ort h3::after{content:" \203A";color:var(--rot)}
.ort img{width:100%;height:300px;object-fit:cover;border-radius:6px}
/* Schmale Bildschirme: Format statt fester Höhe, sonst bleibt von der Landschaft nur ein quadratischer Ausschnitt */
@media(max-width:900px){.ort img{height:auto;aspect-ratio:16/9}}
.ort h3{font-size:1.35rem;margin:20px 0 6px}
.ort p{color:var(--grau)}
.ort .person{display:flex;align-items:center;gap:14px;margin-top:16px}
.ort .person img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.ort .person span{font-size:.95rem;color:var(--text)}

/* Team */
.team{background:var(--papier)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
/* height:auto nötig, sonst gilt das height-Attribut (800 px) und das Bild wird zum schmalen Hochformat */
.person-karte img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;border-radius:6px;margin-bottom:18px}
@media(max-width:900px){.person-karte img{max-width:420px}}
.person-karte h3{font-size:1.3rem}
.person-karte .rolle{color:var(--rot);font-weight:600;font-size:.95rem;margin:4px 0 10px;text-wrap:balance}
.person-karte p{color:var(--grau);font-size:.97rem}

/* Abschluss */
/* Abschluss und Footer teilen sich ein durchgehendes Pfeilmuster – keine Kante dazwischen */
.schluss{background:linear-gradient(180deg,rgba(38,43,58,.90),rgba(38,43,58,.96)),url("images/arrows-bg.jpg") center/cover;color:#fff}
.abschluss{color:#fff;padding-bottom:72px}
.abschluss .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.abschluss h2{color:#fff;font-size:clamp(1.8rem,2.6vw,2.4rem)}
.abschluss p{color:#c9cdd6;margin-top:16px;max-width:60ch}
.abschluss .ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}

footer{color:#aeb3bf;padding:0 0 32px;font-size:.93rem}
footer .wrap{border-top:1px solid rgba(255,255,255,.14);padding-top:56px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .fkontakt{margin-top:8px}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}
.fbottom a{display:inline-block;padding:12px 4px;margin:-12px -4px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .flogo{display:block}
footer .flogo svg{height:60px;width:auto;display:block;margin:0 0 28px -6px}
footer h3{color:#fff;font-family:"Jost",sans-serif;font-weight:600;font-size:1rem;line-height:1.6;letter-spacing:0;margin-bottom:12px}

@media(max-width:900px){
  body{font-size:16px}
  .nachweise ul{grid-template-columns:1fr 1fr}
  .kopf-claim{grid-template-columns:1fr;gap:18px}
  section{padding:72px 0}
  .ablauf{grid-template-columns:1fr;row-gap:0}.ablauf li,.ablauf li+li{padding:20px 0;border-left:0}.ablauf li+li{border-top:1px solid var(--linie)}
  .sichten{grid-template-columns:1fr}.sicht,.sicht+.sicht{padding:18px 0;border-left:0;border-top:1px solid var(--linie)}
  .blick-tabs{grid-template-columns:1fr;gap:10px}
  .blick-tabs button{min-height:56px}
  .blick-tabs button[aria-selected="true"]::after{display:none}
  .skala-grid,.faelle,.orte,.team-grid,.abschluss .wrap,footer .fgrid{grid-template-columns:1fr}
  .stufe,.stufe+.stufe{padding:28px 0;border-left:0;border-bottom:1px solid var(--linie)}
  .fall,.fall+.fall{padding:24px 0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .abschluss .ctas{justify-content:flex-start}
}
@media(min-width:561px) and (max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}}
@media(max-width:560px){.nachweise ul{grid-template-columns:1fr;gap:16px}}
/* Kopfzeile: das Menü bleibt immer sichtbar. Zuerst verschwindet die Telefonnummer, dann der Erstgespräch-Knopf (er steht auch im Hero). */
@media(min-width:901px){.sichten.sichten-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:901px) and (max-width:1100px){.nav .tel{display:none!important}}
@media(max-width:1100px){.abschluss .wrap{grid-template-columns:1fr;gap:28px}.abschluss .ctas{justify-content:flex-start}}
/* Unter 900 px bleibt die Telefonnummer sichtbar (mit Symbol), der Knopf steht dann im Hero */
.nav .tel{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav .tel::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.nav .rechts .btn{display:none}.nav .tel{display:inline-flex;padding:10px 0}.nav nav{gap:28px}}
/* Kopfzeile zweizeilig bis 760 px, damit Menü und Telefonnummer nicht umbrechen */
@media(max-width:760px){
  .nav{flex-wrap:wrap;height:auto;gap:0;padding-top:12px;padding-bottom:0}
  .nav .logo svg{height:40px}
  .nav .rechts{order:1;margin-left:auto;gap:10px}
  .nav nav{order:2;width:100%;justify-content:space-between;gap:0;margin-top:8px;border-top:1px solid var(--linie)}
  .nav nav a{padding:12px 0}
  .nav-knopf{padding:12px 0}
  .nav-gruppe{position:static}
  .nav-menu{left:12px;right:12px;top:100%;min-width:0}
}
/* Schmale Handys: etwas kleineres Logo, damit Sprachschalter und Telefonnummer neben dem Logo Platz haben */
@media(max-width:400px){.nav .logo svg{height:34px}.nav .rechts{gap:8px}.sprache{padding:0 7px 0 8px;gap:4px}}
/* Vertikale Ausrichtung: Spalten nebeneinander teilen sich ihre Zeilen (subgrid) –
   Titel, Texte und Links stehen dadurch auf gleicher Höhe, auch wenn Titel unterschiedlich lang sind */
@media(min-width:901px){
  .faelle{grid-template-rows:repeat(7,auto)}
  .fall{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start}
  .fall a{justify-self:start;align-self:end}
  .sichten{grid-template-rows:repeat(3,auto)}
  .sicht{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .sicht a{justify-self:start;align-self:end}
  .ablauf{grid-template-rows:repeat(2,auto)}
  .ablauf li{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .team-grid{grid-template-rows:repeat(4,auto);row-gap:0}
  .person-karte{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}
/* Kleine Laptops: Text und Foto bleiben nebeneinander – Foto erhält etwas mehr Breite, Hero wird etwas niedriger, damit das Foto kaum beschnitten wird */
@media(min-width:1100px) and (max-width:1260px){
  .hero .wrap{grid-template-columns:1fr 1.1fr;min-height:480px;gap:16px}
  .hero-text{padding:40px 0}
  .hero h1{font-size:clamp(2.2rem,3.6vw,3.3rem)}
  .hero-bild{margin-right:-28px}
}
/* Hero stapelt erst, wenn neben dem Text kein Platz mehr für das Teamfoto ist */
@media(max-width:1099px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-text{padding:56px 0 32px}
  .hero h1{max-width:20ch}
  .hero-bild{margin:0 -28px;height:min(calc(100vw / 1.2),460px)}
  .hero-bild img{object-position:50% 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
}
/* Handy: Teamfoto rückt in den ersten Bildschirm; der zweite Knopf entfällt, die Leistungen folgen direkt */
@media(max-width:560px){
  .hero-text{padding:36px 0 24px}
  .hero .kicker{margin-bottom:12px}
  .hero p{margin:18px 0 26px}
  .hero .ctas .btn-linie{display:none}
}

/* ===== Unterseiten ===== */
section.grau{background:var(--papier)}
.seite-hero{background:linear-gradient(135deg,rgba(50,56,76,.86),rgba(38,43,58,.90)),url("images/arrows-bg.jpg") center/cover;color:#fff;padding:72px 0 64px}
.seite-hero .crumb{font-size:.9rem;color:#c9cdd6;margin-bottom:14px}
.seite-hero .crumb a{color:#c9cdd6;text-underline-offset:3px}
.seite-hero .crumb a:hover{color:#fff}
.seite-hero h1{color:#fff;font-size:clamp(2.2rem,4vw,3.3rem)}
.seite-hero p{font-size:1.2rem;color:#dfe2e8;margin-top:14px}
.seite-hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
[id]{scroll-margin-top:100px}

/* Arten der Zusammenarbeit */
.arten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.art{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--rot);border-radius:0 0 10px 10px;padding:30px 28px 26px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px}
.art h3{font-size:1.35rem}
.art p{color:var(--text)}
.art p a{color:var(--rot);font-weight:600;text-underline-offset:3px}
.art .passt{align-self:end;padding-top:14px;border-top:1px solid var(--linie);color:var(--grau);font-size:.95rem}
.art .passt b{display:block;color:var(--blau);font-weight:600}
.art:target{box-shadow:0 0 0 3px rgba(200,18,48,.25)}

/* Leistungsliste */
.leistungsliste{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--linie)}
.leistungsliste li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--linie)}
.leistungsliste li::before{content:"";position:absolute;left:4px;top:23px;width:14px;height:7px;border-left:2px solid var(--rot);border-bottom:2px solid var(--rot);transform:rotate(-45deg)}

/* Themen der Buchhaltung: sechs gleichwertige Bereiche mit eigenem Sprungpunkt */
.themen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:48px}
.themen li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:12px;padding-top:22px;border-top:1px solid var(--linie);position:relative}
.themen li::before{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--rot)}
.themen h3{font-size:1.3rem}
.themen p{color:var(--grau)}
.themen p a{color:var(--rot);font-weight:600;text-underline-offset:3px}
@media(max-width:1100px){.themen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.themen{grid-template-columns:1fr;row-gap:32px}}

/* Unterschied und Ansprechperson */
.bildband{width:100%;height:clamp(200px,26vw,380px);object-fit:cover;border-radius:8px;margin-bottom:56px}
@media(max-width:900px){.bildband{margin-bottom:36px}}
.unterschied{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:start}
/* Text oben bündig mit dem Inhalt der Karte (Kartenrand 1px + Innenabstand 24px) */
.unterschied-text{padding-top:25px}
.unterschied p{font-size:1.1rem;max-width:62ch}
.unterschied p+p{margin-top:16px}
.ansprech{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:24px;display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.ansprech img{width:120px;height:120px;border-radius:8px;object-fit:cover}
.ansprech h3{font-size:1.25rem}
.ansprech .rolle{color:var(--rot);font-weight:600;font-size:.92rem;margin:4px 0 12px;text-wrap:balance}
.ansprech .quali{font-size:.92rem;color:var(--grau);margin-bottom:12px}
.ansprech .verband{grid-column:1/-1;display:flex;gap:16px;align-items:center;padding-top:18px;border-top:1px solid var(--linie)}
.ansprech .verband img{width:auto;height:30px;border-radius:0;flex:0 0 auto}
.ansprech .verband p{font-size:.88rem;line-height:1.4;color:var(--grau)}
.ansprech .verband a{color:var(--blau);text-underline-offset:3px}
.ansprech blockquote{font-family:"Jost",sans-serif;font-weight:500;font-size:1.08rem;line-height:1.4;color:var(--blau)}
.ansprech-mehr{margin-top:14px;font-size:.95rem}
.ansprech-mehr a{color:var(--blau);font-weight:600;text-underline-offset:3px}
.ansprech-mehr a:hover{color:var(--rot)}

.einstieg{margin-bottom:0}

/* Häufige Fragen */
.fragen-liste{border-top:1px solid var(--linie)}
.fragen-liste details{border-bottom:1px solid var(--linie)}
.fragen-liste summary{list-style:none;cursor:pointer;position:relative;padding:22px 48px 22px 0;font-family:"Jost",sans-serif;font-weight:600;font-size:1.2rem;color:var(--blau);text-wrap:balance}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:500;color:var(--rot);line-height:1}
.fragen-liste details[open] summary::after{content:"–"}
.fragen-liste summary:hover{color:var(--rot)}
.fragen-liste details p{padding:0 48px 24px 0;max-width:78ch;color:var(--text)}
.platzhalter{background:#fff7d6;color:#5b4a00;padding:2px 6px;border-radius:4px;font-size:.92rem}

@media(max-width:1100px){.arten{grid-template-columns:1fr}.art{grid-row:auto;grid-template-rows:none}.unterschied{grid-template-columns:1fr;gap:40px}.unterschied-text{padding-top:0}.ansprech{max-width:560px}}
@media(max-width:900px){.seite-hero{padding:56px 0 48px}.leistungsliste{grid-template-columns:1fr}}
@media(max-width:560px){.ansprech{grid-template-columns:1fr}.ansprech .verband{flex-direction:column;align-items:flex-start}.ansprech img{width:96px;height:96px}.fragen-liste summary{font-size:1.08rem}.fragen-liste details p{padding-right:0}}

/* Praxisfälle: Ergebnis hervorgehoben, Weg dorthin darunter */
.fe-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:0 32px}
.fe{display:grid;grid-row:span 4;grid-template-rows:subgrid;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:30px 32px 28px}
.fe h3{color:#fff;font-size:1.25rem}
.fe .bereiche{font-size:.9rem;color:#c9cdd6;margin-top:6px}
.fe-heute{margin:22px 0 24px;padding-left:18px;border-left:3px solid var(--rosa)}
.fe-heute span{display:block;font-size:.85rem;font-weight:600;color:var(--rosa);margin-bottom:4px}
.fe-heute p{color:#fff;font-size:1.08rem;font-weight:500;line-height:1.5}
.fe-weg{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-self:start}
.fe-weg dt{font-size:.85rem;font-weight:600;color:#c9cdd6;padding-top:2px}
.fe-weg dd{color:#c9cdd6;font-size:.95rem}
@media(max-width:900px){.fe-liste{grid-template-columns:1fr;grid-template-rows:none;gap:24px}.fe{grid-row:auto;grid-template-rows:none}}
@media(max-width:560px){.fe{padding:24px 22px}.fe-weg{grid-template-columns:1fr;gap:2px}.fe-weg dd{margin-bottom:10px}}
.fe-link{align-self:end;justify-self:start;margin-top:22px;color:#fff;font-weight:600;font-size:.95rem;text-underline-offset:4px}
.fe-link:hover{color:var(--rosa)}
/* Startseite: drei Fälle nebeneinander, mit Link */
.fe-liste-3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto)}
.fe-liste-3 .fe{grid-row:span 5}
.fe-liste-3 .fe-weg{grid-template-columns:1fr;gap:4px}
@media(max-width:1100px){.fe-liste-3{grid-template-columns:1fr;grid-template-rows:none;gap:24px}.fe-liste-3 .fe{grid-row:auto;grid-template-rows:none}}
/* Strategieberatung: Themen mit ihren Leitfragen */
.fragen-raster{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:44px}
.fragen-raster li{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:10px;padding-top:22px;border-top:1px solid var(--linie);position:relative}
.fragen-raster li::before{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--rot)}
.fragen-raster h3{font-size:1.2rem}
.fragen-raster p{color:var(--grau)}
@media(max-width:1100px){.fragen-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fragen-raster{grid-template-columns:1fr;row-gap:28px}}
/* Ein einzelner Praxisfall */
.fe-liste-1{grid-template-columns:minmax(0,860px);grid-template-rows:none}
.fe-liste-1 .fe{grid-row:auto;grid-template-rows:none}
.bild-rechts{object-position:60% 62%}
/* Vorgehen mit Methoden-Zeile */
.ablauf-methoden .methoden{font-size:.88rem;color:var(--blau);font-weight:500;margin-top:14px;padding-top:12px;border-top:1px dashed var(--linie)}
@media(min-width:901px){.ablauf-methoden{grid-template-rows:repeat(3,auto)}.ablauf-methoden li{grid-row:span 3}.ablauf-methoden .methoden{align-self:start}}
/* Praxisfälle mit Link: fünfte Zeile im Raster */
.fe-liste-5{grid-template-rows:repeat(5,auto)}
.fe-liste-5 .fe{grid-row:span 5}
@media(max-width:900px){.fe-liste-5{grid-template-rows:none}.fe-liste-5 .fe{grid-row:auto}}
.ablauf-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.ablauf-4{grid-template-columns:1fr}}

/* ===== Eigenständige Elemente pro Seite ===== */
/* Strategie: die drei Schritte als Kreislauf */
.kreislauf{position:relative;height:52px;margin:28px 6% 0;border:2px solid var(--rot);border-top:0;border-radius:0 0 26px 26px}
.kreislauf::before{content:"";position:absolute;left:-8px;top:-12px;border:7px solid transparent;border-bottom:12px solid var(--rot);border-top:0}
.kreislauf span{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);background:var(--papier);padding:0 14px;font-size:.92rem;font-weight:600;color:var(--blau);white-space:nowrap}
.kreislauf-text{margin-top:20px;color:var(--grau)}
@media(max-width:900px){.kreislauf{display:none}}
@media(min-width:901px){.kreislauf-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Prozesse: Ablaufkette vom Kunden bis zur Rechnung */
.kette{list-style:none;display:flex;margin-bottom:14px}
.kette li{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:10px 12px 10px 26px;margin-right:-10px;background:var(--papier);color:var(--blau);font-family:"Jost",sans-serif;font-weight:600;font-size:1.02rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.kette li:first-child{padding-left:16px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.kette li:nth-child(even){background:#e9ebee}
.kette li:last-child{margin-right:0;background:var(--blau);color:#fff}
.kette-text{color:var(--grau);margin-bottom:56px}
@media(max-width:900px){
  .kette{flex-direction:column}
  .kette li,.kette li:first-child{margin:0 0 -8px;padding:12px 16px 20px;min-height:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
  .kette li:last-child{margin-bottom:0;padding-bottom:12px;clip-path:none}
  .kette-text{margin-bottom:36px}
}
/* Coaching: Bild mit grossem Zitat */
.bild-zitat{position:relative;margin-bottom:56px}
.bild-zitat .bildband{margin-bottom:0}
.bild-zitat blockquote{position:absolute;left:0;right:0;bottom:0;padding:40px 36px 28px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,transparent,rgba(38,43,58,.82));color:#fff;font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.3;text-wrap:balance}
@media(max-width:900px){.bild-zitat{margin-bottom:36px}}
@media(max-width:560px){.bild-zitat blockquote{position:static;background:none;color:var(--blau);padding:18px 0 0;border-radius:0}}

/* ===== Über uns ===== */
.bild-team{height:clamp(240px,34vw,520px);object-position:50% 20%}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.zwei-spalten p{font-size:1.1rem}
.gruender{background:var(--blau);color:#fff}
.gruender-zitat{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center;max-width:980px}
.gruender-zitat img{width:180px;height:180px;border-radius:50%;object-fit:cover}
.gruender-zitat blockquote{font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.35;color:#fff;text-wrap:balance}
.gruender-zitat figcaption{margin-top:18px;color:#c9cdd6;font-size:.95rem}
.person-karte a{display:inline-block;margin-top:12px;font-size:.92rem;font-weight:600;color:var(--blau);text-underline-offset:4px}
.raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ort-info h3::after{content:none}
.ort-info a{color:var(--blau);text-underline-offset:3px}
.ort-info p{line-height:1.7}
.ort-info .ort-person{margin-top:12px;line-height:1.5;color:var(--text)}
@media(max-width:1100px){.raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.zwei-spalten{grid-template-columns:1fr;gap:16px}.gruender-zitat{grid-template-columns:1fr;gap:24px}.gruender-zitat img{width:120px;height:120px}}
@media(max-width:560px){.raster-4{grid-template-columns:1fr}}
@media(min-width:901px){.team-grid-5{grid-template-rows:repeat(5,auto)}.team-grid-5 .person-karte{grid-row:span 5}.team-grid-5 .person-karte a{align-self:start;justify-self:start}}

/* ===== Kontakt ===== */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.formular-karte{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:30px}
.formular-karte h2,.kontakt-seite h2{font-size:1.4rem;margin-bottom:20px}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-weight:600;font-size:.95rem;color:var(--blau);margin-bottom:6px}
.form-field input,.form-field select,.form-field textarea{width:100%;font:inherit;color:var(--text);background:#fff;border:1px solid #c7ccd3;border-radius:6px;padding:12px 14px;min-height:48px}
.form-field textarea{resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid rgba(200,18,48,.25);border-color:var(--rot)}
/* Auswahl „Ihr Anliegen“ im Stil des Leistungen-Menüs */
.auswahl{position:relative}
.auswahl-knopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;color:var(--text);text-align:left;background:#fff;border:1px solid #c7ccd3;border-radius:6px;padding:12px 14px;min-height:48px;cursor:pointer}
.auswahl-knopf svg{width:12px;height:12px;flex:none;color:var(--blau);transition:transform .2s}
.auswahl-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.auswahl-knopf:focus-visible,.auswahl-knopf[aria-expanded="true"]{outline:3px solid rgba(200,18,48,.25);border-color:var(--rot)}
.auswahl-liste{position:absolute;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;background:#fff;border:1px solid var(--linie);border-radius:8px;box-shadow:0 14px 34px rgba(50,56,76,.14);padding:8px;z-index:20}
.auswahl-liste[hidden]{display:none}
.auswahl-liste:focus{outline:none}
.auswahl-liste li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:6px;color:var(--blau);font-weight:500;cursor:pointer}
.auswahl-liste li.aktiv{background:var(--papier);color:var(--rot)}
.auswahl-liste li[aria-selected="true"]::after{content:"✓";color:var(--rot)}
.captcha input{max-width:160px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:.88rem;color:var(--grau);margin-top:16px}
.form-note a{color:var(--blau)}
.form-msg{display:none;padding:12px 16px;border-radius:6px;margin-bottom:18px;font-weight:500}
.form-msg.ok{display:block;background:#e7f4ea;color:#1e5a2b}
.form-msg.err{display:block;background:#fbe9ec;color:#8a0f22}
.kontakt-seite{display:grid;gap:28px}
.direkt{background:var(--blau);color:#fff;border-radius:10px;padding:30px}
.direkt h2{color:#fff}
.direkt a{display:block;color:#fff;text-underline-offset:4px;margin-top:8px}
.direkt .direkt-tel{font-family:"Jost",sans-serif;font-weight:600;font-size:1.6rem;text-decoration:none;margin-top:0}
.direkt a:hover{color:var(--rosa)}
.erstgespraech-info{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:30px}
.erstgespraech-info ol{list-style:none;counter-reset:schritt;display:grid;gap:14px;margin-bottom:18px}
.erstgespraech-info li{counter-increment:schritt;position:relative;padding-left:40px}
.erstgespraech-info li::before{content:counter(schritt);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--rot);color:#fff;font-weight:600;font-size:.9rem;display:grid;place-items:center}
.erstgespraech-info p{color:var(--grau);font-size:.95rem}
.orte-kontakt{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ort-kontakt{border-top:3px solid var(--rot);padding-top:22px}
.ort-kontakt h3{font-size:1.3rem;margin-bottom:10px}
.ort-kontakt p{margin-bottom:12px}
.ort-kontakt a{color:var(--blau);text-underline-offset:3px}
.ort-kontakt .person{display:flex;align-items:center;gap:14px;margin-top:6px}
.ort-kontakt .person img{width:56px;height:56px;border-radius:50%;object-fit:cover}
@media(max-width:1000px){.kontakt-raster{grid-template-columns:1fr}}
@media(max-width:900px){.orte-kontakt{grid-template-columns:1fr}}
@media(max-width:560px){.feld-paar{grid-template-columns:1fr}.formular-karte{padding:24px 20px}.direkt,.erstgespraech-info{padding:24px 20px}}

/* ===== Impressum, Datenschutz ===== */
.legal{max-width:75ch}
.legal h2{font-size:1.35rem;margin:36px 0 10px}
.legal p+p{margin-top:12px}
.legal a{color:var(--blau);text-underline-offset:3px}
/* Coaching: typische Situationen */
.situationen li{grid-row:span 3}
.situationen .situation{font-family:"Jost",sans-serif;font-weight:500;font-size:1.1rem;line-height:1.4;color:var(--blau)}
@media(min-width:901px){.situationen{grid-template-rows:repeat(6,auto)}}

/* ===== Aufrufe zur Buchhaltung (2026-10-05) ===== */
.seite-hero .ctas{margin-top:28px}
.seite-hero-zwei .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center}
.wechsel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:28px 28px 26px}
.seite-hero .wechsel .wechsel-zeit{font-size:.9rem;font-weight:600;color:var(--rosa);margin:0 0 8px}
.wechsel h2{color:#fff;font-size:1.5rem;text-wrap:balance}
.seite-hero .wechsel p{font-size:1rem;margin-top:10px;text-wrap:pretty}
.wechsel a{display:inline-block;margin-top:16px;color:#fff;font-weight:600;text-underline-offset:4px}
.wechsel a:hover{color:var(--rosa)}
.btn-blau-linie{border-color:var(--blau);color:var(--blau)}
.btn-blau-linie:hover{background:var(--blau);color:#fff}
.aufruf{margin-top:40px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:10px;padding:24px 28px}
.aufruf-bilder{display:flex}
.aufruf-bilder img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.aufruf-bilder img+img{margin-left:-14px}
.aufruf h3{font-size:1.3rem;text-wrap:balance}
.aufruf p{color:var(--grau);font-size:.97rem;margin-top:6px;text-wrap:pretty}
.aufruf-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.blick-hinweis{margin-top:32px;padding:16px 20px;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:0 8px 8px 0;font-size:.97rem;text-wrap:pretty}
.blick-hinweis b{color:var(--blau)}
.blick-hinweis a,.fragen-liste details p a{color:var(--rot);font-weight:600;text-underline-offset:3px;white-space:nowrap}
@media(max-width:1100px){.aufruf{grid-template-columns:auto minmax(0,1fr)}.aufruf-knoepfe{grid-column:1/-1}}
@media(max-width:900px){.seite-hero-zwei .wrap{grid-template-columns:1fr;gap:36px}}
@media(max-width:560px){.aufruf{grid-template-columns:1fr;gap:18px;padding:22px 20px}.wechsel{padding:22px 20px}}
/* Tablet: Standorte nebeneinander statt zwei grosse Bilder untereinander */
@media(min-width:561px) and (max-width:900px){.orte{grid-template-columns:1fr 1fr;gap:24px}}

/* Fachbeiträge (erzeugt mit website_agent/beitraege.py) */
.seite-hero .beitrag-meta{font-size:1rem;color:#c9cdd6;margin-top:18px}
.beitrag{max-width:70ch}
.beitrag>*:first-child{margin-top:0}
.beitrag h2{font-size:1.55rem;margin:44px 0 12px;text-wrap:balance}
.beitrag h3{font-size:1.2rem;margin:30px 0 8px;text-wrap:balance}
.beitrag p{text-wrap:pretty}
.beitrag p+p{margin-top:14px}
.beitrag ul,.beitrag ol{margin:14px 0;padding-left:1.3em}
.beitrag li+li{margin-top:6px}
.beitrag a{color:var(--blau);text-underline-offset:3px}
.beitrag blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:4px solid var(--rot);font-size:1.12rem;color:var(--blau)}
.beitrag .fragen-liste{margin-top:12px}
.beitrag .einstieg{font-size:1.15rem;line-height:1.6;color:var(--blau)}
.beitrag .frage{font-family:"Jost",sans-serif;font-weight:600;font-size:1.12rem;line-height:1.4;color:var(--blau);margin:36px 0 0;text-wrap:pretty}
.beitrag .frage+p{margin-top:10px}
.beitrag .frage::before{content:"";display:block;width:28px;height:3px;background:var(--rot);margin-bottom:12px}
.beitrag blockquote.zitat{margin:44px 0;padding:22px 0 0;border:0;position:relative;font-family:"Jost",sans-serif;font-weight:500;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.35;color:var(--blau)}
.beitrag blockquote.zitat::before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--rot)}
.beitrag blockquote.zitat p{text-wrap:balance}
.beitrag blockquote.zitat+.frage{margin-top:36px}
.beitrag-bild{margin:36px 0}
.beitrag-bild img{display:block;width:100%;height:auto;border-radius:8px}
.beitrag-bild figcaption{margin-top:10px;font-size:.92rem;color:var(--grau);text-wrap:pretty}
.seite-hero .beitrag-rubrik{display:inline-block;margin:0 0 12px;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rosa)}
.beitrag-hero .wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.beitrag-hero-bild{width:100%;max-width:400px;height:auto;justify-self:end;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
@media(max-width:900px){.beitrag-hero .wrap{grid-template-columns:1fr;gap:32px}.beitrag-hero-bild{justify-self:start;max-width:300px}}
.beitrag blockquote+.frage{margin-top:26px}
.steckbrief{display:block;margin:32px 0 8px;padding:24px 26px;background:var(--papier);border-radius:8px}
.steckbrief:has(img){display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start;margin:32px 0 8px;padding:24px 26px;background:var(--papier);border-radius:8px}
.steckbrief img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.steckbrief-titel{font-family:"Jost",sans-serif;font-weight:600;color:var(--blau)}
.beitrag .steckbrief ul{margin:8px 0 0;padding-left:1.1em}
.beitrag .steckbrief li+li{margin-top:3px}
.beitrag-entwurf{background:#fff4d6;border-left:4px solid #b97a00;padding:10px 16px;margin-bottom:28px;color:var(--text)}
.beitrag-schluss{background:var(--papier);padding:72px 0}
.beitrag-autor{display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;align-items:start;max-width:820px}
.beitrag-autor img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.beitrag-autor h2{font-size:1.45rem;margin-bottom:10px}
.beitrag-aufruf{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:20px}
.beitrag-aufruf a:not(.btn){color:var(--blau);font-weight:600;text-underline-offset:3px}
.beitrag-mehr{margin-top:16px;font-size:.95rem}
.beitrag-mehr a{color:var(--blau);text-underline-offset:3px}
.beitrag-liste{display:grid;gap:20px;max-width:820px}
.einblick-liste{display:grid;gap:20px;max-width:820px}
.einblick-karte{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start;background:var(--weiss);border:1px solid var(--linie);border-radius:8px;padding:22px;color:var(--text);text-decoration:none}
.einblick-karte img{width:120px;height:120px;border-radius:8px;object-fit:cover}
.einblick-karte .beitrag-meta{font-size:.9rem;color:var(--grau)}
.einblick-karte h3{font-size:1.3rem;margin:6px 0 8px;color:var(--blau);text-wrap:balance}
.einblick-karte p{text-wrap:pretty}
.einblick-karte:hover h3,.einblick-karte:focus-visible h3{color:var(--rot);text-decoration:underline;text-underline-offset:3px}
.einblick-alle{margin-top:20px}
.einblick-alle a{color:var(--blau);font-weight:600;text-underline-offset:3px}
.beitrag-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:8px;padding:26px 28px}
.beitrag-karte .beitrag-meta{font-size:.9rem;color:var(--grau)}
.beitrag-karte h2{font-size:1.35rem;margin:6px 0 8px;text-wrap:balance}
.beitrag-karte h2 a{color:var(--blau);text-decoration:none}
.beitrag-karte h2 a:hover{color:var(--rot);text-decoration:underline;text-underline-offset:3px}
.beitrag-marke{display:inline-block;background:#fff4d6;color:#7a5200;font-weight:600;font-size:.8rem;padding:1px 8px;border-radius:4px;margin-left:6px}
@media(max-width:560px){.beitrag-autor{grid-template-columns:1fr;gap:18px}.beitrag-autor img{width:96px;height:96px}.beitrag-karte{padding:22px 20px}.beitrag-schluss{padding:56px 0}.steckbrief,.steckbrief:has(img){grid-template-columns:1fr;gap:14px;padding:20px}.einblick-karte{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px}.einblick-karte img{width:72px;height:72px}.beitrag-hero-bild{max-width:220px}.steckbrief img{width:80px;height:80px}}