@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{--paper:#f6f5ef;--white:#fffefa;--ink:#19342f;--muted:#52605b;--accent:#405d4f;--accent-light:#e6ece4;--line:#cbd1c7;--interactive:oklch(.50 .17 255);--interactive-hover:oklch(.38 .17 255);--interactive-light:#a5cdff;--gold:#886927;--mood:#27695e;--serif:Fraunces,Georgia,serif;--sans:Epilogue,'Segoe UI',sans-serif;--radius:16px;--small-radius:8px;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:108px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit}button,a,summary{touch-action:manipulation}a{color:var(--interactive);text-underline-offset:.25em}a:hover{color:var(--interactive-hover)}button{cursor:pointer}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;text-wrap:balance}h1{font-size:clamp(46px,5.1vw,74px);letter-spacing:-.045em}h1 em{color:var(--accent);font-weight:400}h2{font-size:clamp(34px,3.5vw,49px);letter-spacing:-.035em}h3{font-size:25px;letter-spacing:-.02em}p+p{margin-top:18px}::selection{background:var(--accent-light)}:focus-visible{outline:3px solid var(--interactive);outline-offset:5px}button:disabled{cursor:default}[hidden]{display:none!important}.wrap{width:min(var(--max),calc(100% - 64px));margin-inline:auto}.section{padding-block:104px}.eyebrow{font:600 11px/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:23px}.eyebrow::before{content:'';display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:10px;vertical-align:2px}.lead{font-size:18px;line-height:1.85}.fineprint{font-size:12px;line-height:1.85;color:var(--muted)}.center{text-align:center}.skip-link{position:fixed;top:-100px;left:20px;background:var(--white);z-index:100;padding:12px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:20;background:rgba(246,245,239,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.nav{min-height:84px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap;font:400 27px/1 var(--serif)}.brand strong{font-weight:600;color:var(--accent)}.brand img{border-radius:10px}.brand small{display:block;font:600 8px/1 var(--sans);letter-spacing:.19em;margin-top:9px;color:var(--muted)}.nav-links{display:flex;gap:27px;margin-left:auto;align-items:center}.nav-links a{font-size:12px;text-decoration:none;white-space:nowrap;padding:13px 0}.nav-links a:hover{text-decoration:underline}.languages{font-size:11px;display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:24px}.languages a{text-decoration:none;padding-block:12px}.languages [aria-current]{font-weight:700;color:var(--accent)}.languages span{color:var(--line)}.menu-toggle{background:transparent;border:1px solid var(--line);border-radius:var(--small-radius);color:var(--interactive);padding:7px 10px;font-size:12px;align-items:center;gap:8px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:45px;padding-block:80px 76px;align-items:center;min-height:730px}.hero-copy{position:relative;z-index:2}.hero .eyebrow{margin-bottom:23px}.hero-lead{font-size:16px;max-width:520px;margin-top:28px;line-height:1.9;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}.button{display:inline-flex;justify-content:center;align-items:center;gap:11px;min-height:54px;border:1px solid var(--interactive);padding:12px 22px;border-radius:var(--small-radius);text-decoration:none;font-size:13px;font-weight:600;line-height:1.4;transition:background .18s,transform .18s}.button small{display:block;font-size:9px;line-height:1.4;font-weight:400}.button.primary{background:var(--interactive);color:white}.button:hover{background:#e6edf4;transform:translateY(-2px)}.button.primary:hover{background:var(--interactive-hover);color:white}.hero-note{font-size:11px;color:var(--muted);margin-top:18px}.hero-art{position:relative;height:565px;isolation:isolate}.hero-art::before{content:'';position:absolute;inset:22px -20px 0 0;border-radius:50% 50% 40% 55%;background:radial-gradient(ellipse at 45% 50%,#d5dfd0 0%,#e7eae0 50%,transparent 72%);z-index:-2}.orbit{border:1px solid #c6d0c0;position:absolute;inset:30px -5px 35px;border-radius:50%;transform:rotate(-22deg);z-index:-1}.orbit-two{inset:60px -35px 88px 40px;transform:rotate(40deg)}.hero-phone{position:absolute;width:229px;background:var(--white);border:5px solid #fbfaf5;outline:1px solid #b8c2b4;border-radius:25px;overflow:hidden;box-shadow:0 24px 40px -17px #1a312f42}.hero-phone img{width:100%}.front-phone{left:22px;top:49px;transform:rotate(-5deg)}.back-phone{right:0;top:16px;transform:rotate(6deg)}.art-label{position:absolute;top:-4px;left:14px;font:500 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}.art-note{position:absolute;bottom:17px;right:-10px;background:var(--ink);color:var(--paper);padding:20px 25px;display:flex;align-items:flex-start;gap:14px;box-shadow:0 14px 36px #16332c20;transform:rotate(-3deg);border-radius:var(--small-radius)}.art-note p{font:400 17px/1.6 var(--serif)}.art-note em{color:#d8e4d1}.note-dot{width:8px;height:8px;border:1px solid #d8e4d1;border-radius:50%;margin-top:8px}.trust-band{border-block:1px solid var(--line)}.trust-list{display:flex;justify-content:space-between;list-style:none;padding-block:22px;padding-left:0;font-size:12px;font-weight:500}.trust-list span{color:var(--accent);margin-right:9px}.text-link{font:500 12px/1.7 var(--sans);text-decoration:underline;text-underline-offset:5px}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end;margin-bottom:52px}.section-heading>p{color:var(--muted);font-size:16px}.screenshot{display:block;position:relative;border:6px solid var(--white);outline:1px solid #bdc7bb;border-radius:22px;overflow:hidden;padding:0;background:var(--white);width:100%;max-width:255px;margin-inline:auto;box-shadow:0 18px 38px -24px #23392b66;transition:transform .2s}.screenshot:hover{transform:translateY(-5px)}.screenshot img{width:100%}.zoom-mark{position:absolute;bottom:12px;right:12px;background:var(--interactive);color:white;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:21px;box-shadow:0 2px 5px #0002}.step-number{font:400 14px var(--serif);color:var(--accent);display:block;margin-bottom:10px}dt{font-size:12px;font-weight:600}dd{margin:0;font-size:13px;color:var(--muted)}details{border-bottom:1px solid var(--line)}details:first-child{border-top:1px solid var(--line)}summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:23px 0;color:var(--interactive);cursor:pointer;font-size:15px;font-weight:500}summary::-webkit-details-marker{display:none}summary>span{font-size:24px;font-weight:400;transition:transform .2s}details[open]>summary{color:var(--accent)}details[open]>summary>span{transform:rotate(45deg)}details>p{font-size:14px;color:var(--muted);padding:0 30px 23px 0;max-width:64ch}.privacy-band{background:var(--ink);color:var(--paper);padding-block:72px}.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.privacy-band .eyebrow{color:#d4e2cb}.privacy-band .eyebrow::before{background:#b8c9ad}.privacy-band .fineprint{color:#c6d1c7;margin-block:18px}.privacy-band a{color:var(--interactive-light);font-size:12px}.guide-section{display:grid;grid-template-columns:.65fr 1fr;gap:100px;align-items:center}.guide-cover{display:flex;flex-direction:column;background:#e9eddf;color:var(--ink);text-decoration:none;padding:35px 33px 25px;border-left:10px solid var(--accent);outline:1px solid #c6cebf;box-shadow:15px 16px 0 #e3e5da;transform:rotate(-3deg);max-width:320px;min-height:416px;margin-inline:auto}.guide-cover>span:first-child{font:400 25px var(--serif)}.guide-cover small{font:500 8px var(--sans);letter-spacing:.16em;margin-top:44px}.guide-cover .cover-title{font:400 35px/1.15 var(--serif);margin-top:18px;letter-spacing:-.04em}.guide-cover .cover-line{height:1px;background:var(--accent);margin-top:auto;opacity:.5}.guide-cover .cover-bottom{display:flex;justify-content:space-between;font-size:8px;padding-top:12px;letter-spacing:.1em}.guide-cover .cover-bottom span{font:400 14px var(--serif)}.guide-section .lead{margin-top:25px}.guide-section .fineprint{margin-top:20px}.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.family-card{border-top:3px solid var(--mood);padding:28px;background:#f8f8ef;display:flex;flex-direction:column}.family-card.mind{border-color:var(--accent);background:#e2e8db}.family-card.mend{border-color:var(--gold)}.family-card .eyebrow{font-size:9px;margin-bottom:10px;color:var(--muted)}.family-card .eyebrow::before{display:none}.family-card h3{font-size:31px}.family-card h3 strong{font-weight:600}.family-card>p:not(.eyebrow){font-size:13px;margin-block:22px 27px;color:var(--muted)}.family-card .text-link,.family-card .here{margin-top:auto}.here{font-size:12px;color:var(--accent);font-weight:600}.family-grid+.fineprint{margin-top:22px}.faq-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.faq-section h2+a{display:inline-block;margin-top:28px;font-size:13px}.faq-list summary{font-size:14px}.end-section{padding-block:90px;text-align:center}.end-section h2{font-size:clamp(42px,4.5vw,62px)}.end-section h2+p{margin-top:24px;color:var(--muted)}.end-section .actions{justify-content:center}.end-section .fineprint{margin-top:30px}.site-footer{padding-block:44px}.footer-links{font-size:11px}.legal-main{max-width:800px;padding-block:65px 90px}.legal-main h1{font-size:48px;margin-bottom:30px}.legal-main h2{font-size:27px;margin-block:35px 15px}.legal-main h3{font-size:23px;margin-block:24px 12px}.legal-main p,.legal-main li{font-size:14px;line-height:1.9}.legal-main label{display:block;font-size:13px;margin-block:20px 6px}.legal-main input:not([type=checkbox]),.legal-main select,.legal-main textarea{width:100%;padding:13px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:var(--small-radius)}.legal-main textarea{min-height:170px}.legal-main button[type=submit]{margin-block:20px;padding:14px 22px;background:var(--interactive);color:white;border:0;border-radius:var(--small-radius)}.legal-main .message{padding:12px;border:1px solid var(--line);margin-top:20px}.legal-main .message:empty{display:none}
.menu-toggle{display:none}.section-heading>*,.privacy-grid>*,.guide-section>*,.faq-section>*{min-width:0}.hero{overflow:clip;overflow-clip-margin:0}.art-label{max-width:85%;line-height:1.5}.art-note{right:0}
.legal-main .hero{display:block;min-height:auto;padding:0;margin:0 0 30px}.legal-main .wrap{width:100%}.legal-main .section{padding:0;margin-bottom:28px}.legal-main .hero>section+section{margin-top:30px}.legal-main .contact{white-space:pre-line}.legal-main .note{font-size:12px;color:var(--muted);margin-top:18px}.legal-main .status:empty{display:none}.legal-main .status.is-visible{padding:15px;margin-block:20px;border:1px solid var(--line)}.legal-main .is-error{color:#8f3027}.legal-main .is-success{color:var(--accent)}
@media(min-width:1200px){.hero-copy{animation:arrive .65s both}.hero-art{animation:arrive .9s .08s both}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:1100px){.nav{gap:20px}.nav-links{gap:16px}.nav-links a{font-size:11px}.languages{padding-left:16px}.hero{gap:25px}.hero-art{height:500px}.hero-phone{width:205px}.front-phone{left:0;top:35px}.back-phone{right:0;top:0}.art-note{right:-5px;bottom:0;padding:17px}.art-label{top:-32px}.guide-section,.faq-section{gap:55px}.section-heading{gap:50px}.brand{font-size:24px}.brand img{width:36px;height:36px}}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}.nav{min-height:76px;flex-wrap:wrap;gap:16px}.brand{margin-right:auto}.nav-links{order:4;width:100%;justify-content:space-between;margin:0;gap:10px;border-top:1px solid var(--line)}.nav-links a{font-size:12px}.js .menu-toggle{display:flex}.js .nav-links{display:none}.js .nav-links.is-open{display:flex;padding-bottom:14px}.languages{border:0;padding:0}.hero{grid-template-columns:1fr 1fr;min-height:auto;padding-block:75px 65px;gap:20px}h1{font-size:48px}.hero-art{height:430px}.hero-phone{width:178px}.front-phone{top:35px;left:0}.back-phone{right:-3px;top:-5px}.art-note{bottom:-25px;right:0;padding:14px}.art-note p{font-size:14px}.hero-lead{font-size:14px}.hero .actions{gap:10px}.hero .button{padding-inline:16px}.section{padding-block:76px}.section-heading{gap:40px}.privacy-grid{gap:45px}.guide-section{grid-template-columns:.8fr 1fr;gap:40px}.guide-cover{padding:26px 22px;min-height:370px}.guide-cover .cover-title{font-size:29px}.family-card{padding:22px}.family-card h3{font-size:26px}.family-grid{gap:15px}.family-card .eyebrow{font-size:8px}.faq-section{gap:40px;grid-template-columns:.7fr 1.3fr}}
@media(max-width:640px){html{scroll-padding-top:90px}.wrap{width:calc(100% - 40px)}.nav{min-height:72px;gap:14px}.brand{font-size:23px;gap:8px}.brand img{width:33px;height:33px}.brand small{font-size:6px;letter-spacing:.15em}.menu-toggle{font-size:0;padding:9px 11px}.menu-toggle span{font-size:16px;line-height:1}.languages{gap:6px;font-size:10px}.nav-links,.js .nav-links.is-open{flex-direction:column;align-items:stretch;gap:0}.nav-links a{padding:12px 0}.hero{display:flex;flex-direction:column;align-items:stretch;padding-block:48px 35px;gap:50px}.hero h1{font-size:clamp(43px,10.4vw,62px);letter-spacing:-.05em}.hero .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:20px}.hero-lead{font-size:14px;margin-top:23px}.hero .actions{margin-top:25px}.button{font-size:12px;min-height:52px;padding:12px 18px}.hero-note{font-size:10px;line-height:1.8}.hero-art{height:460px;width:min(355px,100%);align-self:center}.hero-phone{width:188px;border-width:4px;border-radius:21px}.front-phone{left:5px;top:31px}.back-phone{right:2px;top:5px}.orbit-two{inset:50px -10px 80px 10px}.hero-art::before{inset:0}.art-label{top:-14px;left:7px;font-size:8px}.art-note{bottom:0;right:0;padding:16px 18px}.art-note p{font-size:15px}.trust-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-block:18px;font-size:11px}.section{padding-block:62px}.eyebrow{font-size:9px;margin-bottom:18px}h2{font-size:35px}h3{font-size:25px}.privacy-grid,.guide-section,.faq-section,.section-heading{grid-template-columns:1fr;gap:35px}.section-heading{margin-bottom:38px;gap:24px}.section-heading>p{font-size:14px}.lead{font-size:15px;line-height:1.9}summary{font-size:14px;padding:20px 0}details>p{font-size:13px}.privacy-band{padding-block:54px}.privacy-grid{gap:24px}.privacy-grid p:not(.eyebrow){font-size:14px}.privacy-grid p.fineprint{font-size:11px}.guide-section{gap:42px}.guide-cover{width:255px;min-height:360px;padding:28px 24px}.guide-section>div{order:-1}.guide-section .actions{align-items:stretch;flex-direction:column}.guide-section .fineprint{font-size:10px}.family-grid{grid-template-columns:1fr;gap:18px}.family-card{padding:25px}.family-card h3{font-size:31px}.family-card .eyebrow{font-size:9px}.family-card>p:not(.eyebrow){margin-block:15px 22px}.family-grid+.fineprint{font-size:11px}.faq-section{gap:30px}.faq-section h2+a{margin-top:20px}.faq-list summary{font-size:13px}.end-section{padding-block:64px}.end-section h2{font-size:43px}.end-section h2+p{font-size:14px}.end-section .fineprint{font-size:10px}.legal-main{padding-block:40px}.legal-main h1{font-size:38px}.legal-main h2{font-size:26px}.legal-main p{overflow-wrap:anywhere}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.brand{font-size:20px}.brand small{font-size:5.5px}.nav{gap:10px}.brand img{width:29px;height:29px}.hero-art{height:425px}.hero-phone{width:170px}.art-note p{font-size:13px}.hero .button{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.site-header,.site-footer,.hero-art,.lightbox,.actions,.skip-link{display:none!important}.section{padding-block:24px}.wrap{width:100%}body{background:white;color:black}a{color:inherit}.section-heading,.privacy-grid,.guide-section,.faq-section{display:block}details{break-inside:avoid}}

@media(max-width:640px){.hero{overflow-clip-margin:0}.orbit{inset:50px 12px 45px;transform:none}.orbit-two{inset:100px 0 100px;transform:none}}

/* Original app identities and access badges, shared with Marcus’Mend. */
.actions.store-actions{display:grid;grid-template-columns:repeat(2,minmax(0,176px));gap:12px;align-items:center}
.store-badge{display:flex;align-items:center;min-height:48px;border-radius:6px;transition:transform .18s}
.store-badge img{display:block;width:100%;height:auto;border-radius:6px}
.store-badge:hover{transform:translateY(-2px)}
/* Finale Logos (Marcus-Website/_reference/brand): eine Grafik je App mit Icon, Name und Claim,
   nur proportional skaliert. Breiten entsprechen den frueheren Gesamtbreiten (Icon + Abstand + Schriftzug). */
.app-identity{display:inline-block;vertical-align:middle;width:276px;max-width:100%}
.app-identity img{display:block;width:100%;height:auto;border-radius:0}
.brand .app-identity{width:230px}
.footer-brand .app-identity{width:246px}
.guide-cover .app-identity{width:228px}
.family-card{min-width:0}
.family-card .app-logo{display:flex;align-items:center;min-height:64px;margin-top:12px}
@media(min-width:641px) and (max-width:1000px){.family-grid{grid-template-columns:1fr}.family-card{padding:28px}}
@media(max-width:640px){.brand .app-identity{width:190px}}
@media(max-width:360px){.brand .app-identity{width:180px}}/* Editorial depth: explanatory spreads, a worked example and source notes. */

.bundle-steps{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.bundle-steps li{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.bundle-letter{font:400 31px/1 var(--serif);color:var(--accent)}
.bundle-steps h3{font:600 13px/1.5 var(--sans);letter-spacing:0}
.bundle-steps p{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.7}
.bundle-steps+.fineprint{margin-top:20px}

.literature-list{display:grid;grid-template-columns:1fr 1fr;gap:36px 65px;list-style:none;padding:0;margin:0}
.literature-list>li{min-width:0;border-top:1px solid var(--line);padding-top:23px}
.literature-list .eyebrow{font-size:9px;margin-bottom:19px}
.literature-list .book-author{font-size:11px;color:var(--muted);margin-bottom:9px}
.literature-list h3{font-size:25px;line-height:1.3;max-width:30ch}
.literature-list h3+p{font-size:13px;color:var(--muted);margin-top:16px;max-width:59ch}
@media(max-width:850px){.literature-list{gap:30px}}
@media(max-width:640px){.bundle-steps li{padding-block:14px;gap:14px}.literature-list{grid-template-columns:1fr;gap:28px}.literature-list h3{font-size:24px}}
@media print{.literature-list{display:block}.bundle-steps li,.literature-list>li{break-inside:avoid}.literature-list>li{margin-bottom:20px}}

/* ---------------------------------------------------------------------------
   3.4 „Für dich“: Situationen mit Profil-Umschalter (CONTENT-ARCHITEKTUR.md)
   Ab hier lesbar formatiert; ältere Regeln oben werden beim Umbau nachgezogen.
   --------------------------------------------------------------------------- */
.situation > summary {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 6px;
  color: var(--ink);
}
.situation-tag {
  flex-basis: 100%;
  font: 600 11px/1.5 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}
.situation[open] > summary > .situation-tag { transform: none; }
.situation > summary > h3 {
  flex: 1;
  font-size: 21px;
  line-height: 1.35;
  color: inherit;
  transition: color .2s;
}
.situation > summary:hover > h3 { color: var(--interactive); }
.situation[open] > summary > h3 { color: var(--accent); }
.situation-body { padding: 0 0 30px; }

.profile-switch, .tab-switch {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.js .profile-switch, .js .tab-switch { display: flex; }
.profile-switch button, .tab-switch button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--small-radius);
  background: transparent;
  color: var(--interactive);
  font: 500 13px/1.2 var(--sans);
  cursor: pointer;
}
.profile-switch button:hover, .tab-switch button:hover { border-color: var(--interactive); }
.profile-switch button[aria-selected="true"], .tab-switch button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.profile-switch button:focus-visible, .tab-switch button:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}

.profile-panel + .profile-panel { margin-top: 28px; }
.profile-name {
  margin-bottom: 10px;
  font: 600 11px/1.5 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.js .situation-body[data-multi] .profile-name { display: none; }
.profile-panel > p:not(.profile-name) {
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.benefit-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.benefit-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.benefit-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.benefit-list strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
.situation-limit {
  margin-top: 22px;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}
.situation-sibling {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.situation-sibling a { color: var(--interactive); }

@media (max-width: 640px) {
  .situation > summary > h3 { font-size: 18px; }
  .situation-body { padding-bottom: 24px; }
}


/* ---------------------------------------------------------------------------
   Weitere Abschnitte nach CONTENT-ARCHITEKTUR.md (24.09.2026)
   --------------------------------------------------------------------------- */

/* 3.1 Kopfzeile: App-Button */
.nav-links .nav-app {
  padding: 8px 14px;
  border: 1px solid var(--interactive);
  border-radius: var(--small-radius);
  color: var(--interactive);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links .nav-app:hover { background: var(--interactive); color: var(--white); text-decoration: none; }/* 3.2 Hero: Nebenschaltflächen */


/* 3.5 So funktioniert's: vier Schritte */
.steps-grid { list-style: none; margin: 0; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-inline: 0; }
.steps-grid h3 { font-size: 21px; }
.steps-grid figcaption p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 10px; }
@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps-grid { grid-template-columns: 1fr; gap: 48px; padding-inline: 28px; } }

/* 3.6 Was in Mind steckt: Reiter */
.tab-switch { margin-bottom: 36px; }
.tab-panel + .tab-panel { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.js .tab-panel + .tab-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.tab-panel.has-media {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 64px;
  align-items: start;
}
.panel-text > .lead { margin-top: 0; }
.panel-text .bundle-steps { margin-top: 26px; }
.panel-text .bundle-steps h4 { font: 400 18px/1.3 var(--serif); color: var(--ink); }
@media (max-width: 850px) {
  .tab-panel.has-media { grid-template-columns: 1fr; gap: 32px; }
  .panel-media { max-width: 280px; }
}

/* 3.7 Anders als ein Buch */
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.format-card {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.format-card h3 { font-size: 23px; margin-bottom: 14px; }
.format-card p:not(.eyebrow) { font-size: 14px; line-height: 1.8; color: var(--muted); }
.format-card.is-mind { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.format-card.is-mind .eyebrow { color: #d4e2cb; }
.format-card.is-mind h3 { color: var(--white); }
.format-card.is-mind p:not(.eyebrow) { color: #e3ebe1; }
@media (max-width: 850px) { .format-grid { grid-template-columns: 1fr; } }

/* 3.8 Für Fachpersonen */
.pro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pro-card { padding-top: 22px; border-top: 2px solid var(--accent); }
.pro-card h3 { font-size: 21px; margin-bottom: 12px; }
.pro-card p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.pro-more { display: grid; grid-template-columns: 1.3fr .9fr; gap: 64px; margin-top: 56px; align-items: start; }
.pro-aside {
  padding: 30px 28px;
  border-radius: var(--radius);
  background: var(--accent-light);
  border: 1px solid var(--line);
}
.pro-aside h3 { font-size: 21px; margin-bottom: 12px; }
.pro-aside > p:not(.fineprint) { font-size: 14px; line-height: 1.8; color: var(--muted); margin-bottom: 22px; }
.pro-aside .fineprint a { color: var(--interactive); }
@media (max-width: 850px) {
  .pro-cards, .pro-more { grid-template-columns: 1fr; }
  .pro-more { gap: 36px; }
}/* 3.9 Quellen: Hintergrund-Links */


/* 3.10 Datenschutz auf dunklem Grund */
.privacy-lead { margin-top: 20px; color: #dfe7de; font-size: 15px; line-height: 1.8; }
.privacy-details details { border-color: rgba(255, 255, 255, .2); }
.privacy-band summary { color: var(--white); }
.privacy-band details[open] > summary { color: #d4e2cb; }
.privacy-band details > p { color: #c6d1c7; }
.privacy-details + a { display: inline-block; margin-top: 22px; color: var(--interactive-light); }/* 3.11 DBT-Therapie finden */


/* 3.14 Warum es Marcus'Mind gibt */
.person-section .section-heading { margin-bottom: 0; align-items: start; }
.person-text a { color: var(--interactive); }

/* 3.16 Schluss: So beginnst du */
.start-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink);
}
/* Zahl als gefüllter Kreis vor dem Text, auf einer Höhe (vorher klein und lose über dem Text) */
.start-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 32px;
  max-width: 980px;
  margin-inline: auto;
  text-align: left;
}
.start-steps li { display: flex; align-items: center; gap: 12px; }
@media (max-width: 850px) {
  .start-steps { grid-template-columns: 1fr; max-width: 360px; }
}
.start-steps .step-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font: 500 15px/1 var(--serif);
}

/* 3.17 Overlays (öffnen über :target, ohne JavaScript bedienbar) */
.overlay { display: none; }
.overlay:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25, 52, 47, .6);
}
body:has(.overlay:target) { overflow: hidden; }
.overlay-box {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 44px 40px 36px;
  border-radius: var(--radius);
  background: var(--paper);
}
.overlay-box h2 { font-size: 30px; margin-bottom: 18px; }
.overlay-box p:not(.eyebrow):not(.fineprint) { font-size: 15px; line-height: 1.85; color: var(--ink); margin-top: 14px; }
.overlay-box video { width: 100%; margin-top: 22px; border-radius: var(--small-radius); background: var(--ink); }
.overlay-close {
  position: absolute;
  top: 16px;
  right: 18px;
  padding: 8px 12px;
  color: var(--interactive);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.overlay-close:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }
.module-overview { margin-top: 22px; display: grid; gap: 16px; }
.module-overview dt { font: 400 19px/1.3 var(--serif); color: var(--ink); }
.module-overview dd { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 640px) { .overlay-box { padding: 48px 22px 28px; } .overlay-box h2 { font-size: 25px; } }

/* ---------------------------------------------------------------------------
   Design-Feinschliff (24.09.2026)
   - Typo-Skala nach Lesbarkeitswerten: Fließtext 17 px, Zeilenhöhe 1,7,
     Kleingedrucktes 14 px, Dachzeilen 12,5 px. Gilt auf Startseite und Rechtstexten;
     #main-content sorgt dafür, dass ältere, verstreute Größenangaben oben nicht greifen.
   - Aufklapp-Elemente, Umschalter und Lupen-Badge nach dem Muster von Marcus'Mood.
   - Symbole statt Textzeichen: Chevron intern, Extern-Symbol extern, Download für Dateien.
   --------------------------------------------------------------------------- */
:root {
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  --fs-ui: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .78rem;
  --fs-h3: 1.375rem;
  --interactive-surface: oklch(.50 .17 255 / .07);
  --interactive-border: oklch(.50 .17 255 / .32);
}

/* Typo-Skala */
#main-content:is(.home-main, .legal-main) :is(p, li, dd) {
  font-size: var(--fs-body);
  line-height: 1.7;
}
#main-content:is(.home-main, .legal-main) :is(.lead, .hero-lead, .privacy-lead) {
  font-size: var(--fs-lead);
  line-height: 1.65;
}
#main-content:is(.home-main, .legal-main) :is(.fineprint, .hero-note, .book-author) {
  font-size: var(--fs-small);
  line-height: 1.65;
}
#main-content:is(.home-main, .legal-main) :is(.eyebrow, .situation-tag, .profile-name, .background-links span) {
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
}
#main-content:is(.home-main, .legal-main) :is(summary, .trust-list li, .start-steps li) {
  font-size: var(--fs-ui);
}
#main-content.home-main h3:not(.app-logo) {
  font-size: var(--fs-h3);
  line-height: 1.3;
}
#main-content.home-main .situation > summary > h3 { font-size: 1.4375rem; }
#main-content.home-main .person-text { font-size: 1.3125rem; line-height: 1.6; }
#main-content.home-main :is(.button, .text-link, .tab-switch button, .profile-switch button) { font-size: .9375rem; }
#main-content.home-main .bundle-steps h4 { font-size: 1.1875rem; }
.nav-links a { font-size: .9375rem; }
.site-footer :is(p, a) { font-size: .875rem; }
.site-footer .fineprint { font-size: .8125rem; }

/* Lesbare Zeilenlänge für Fließtext */
#main-content.home-main :is(.section-heading > p, .therapy-section .lead) { max-width: 62ch; }

/* Symbole */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.icon-external { width: .85em; height: .85em; }
a > .icon:last-child, button > .icon:last-child { margin-left: .35em; }
a > .icon:first-child:not(:last-child) { margin-right: .4em; }
.button > .icon:first-child:not(:last-child), .button > .icon:last-child { margin: 0; }

/* Aufklappen: runder Plus/Minus-Button wie bei Marcus'Mood */
summary > .toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--interactive-border);
  border-radius: 50%;
  background: var(--interactive-surface);
  color: var(--interactive);
  font: 500 20px/1 var(--sans);
  transition: background .2s, border-color .2s, color .2s;
}
summary > .toggle::before { content: '+'; }
details[open] > summary > .toggle { transform: none; background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
details[open] > summary > .toggle::before { content: '−'; }
summary:hover > .toggle { border-color: var(--interactive); }
summary:focus-visible { outline: 2px solid var(--interactive); outline-offset: 4px; border-radius: 6px; }

/* FAQ und Fachpersonen-Details als Karten */
:is(.faq-list, .pro-details) details {
  margin-bottom: 12px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  transition: border-color .2s;
}
:is(.faq-list, .pro-details) details[open] { border-color: var(--accent); }
:is(.faq-list, .pro-details) summary { padding: 20px 0; color: var(--ink); font-weight: 600; }
:is(.faq-list, .pro-details) details[open] > summary { color: var(--ink); }
:is(.faq-list, .pro-details) details > p { padding: 0 44px 22px 0; color: var(--muted); max-width: none; }

/* Datenschutz-Details auf dunklem Grund */
.privacy-details details {
  margin-bottom: 10px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}
.privacy-details details:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }
.privacy-band summary { padding: 18px 0; font-weight: 600; }
.privacy-band summary > .toggle { border-color: var(--interactive); background: var(--interactive); color: var(--white); }  /* blau wie alle Öffnen-Buttons */
.privacy-band details[open] > summary > .toggle { background: var(--white); border-color: var(--white); color: var(--interactive); }
.privacy-band details > p { padding: 0 44px 20px 0; }

/* Situationen: Zeilen wie die Use Cases bei Marcus'Mood */
.situation > summary { align-items: center; }
.situation > summary > .toggle { align-self: center; }

/* Umschalter als Pillen wie bei Marcus'Mood */
.profile-switch button, .tab-switch button {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
}
.profile-switch button[aria-selected="true"], .tab-switch button[aria-selected="true"] {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

/* Lupen-Badge auf Screenshots wie bei Marcus'Mood */
.screenshot { position: relative; }
.screenshot .zoom-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--interactive);
  color: var(--white);
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(25, 52, 47, .28);
  transition: transform .2s;
}
.screenshot:hover .zoom-mark { transform: scale(1.1); }

/* Schließen-Buttons */
.overlay-close { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; }
.overlay-close .icon { margin: 0; }

@media (max-width: 640px) {
  :root { --fs-body: 1.0625rem; --fs-h3: 1.25rem; }
  #main-content.home-main .situation > summary > h3 { font-size: 1.25rem; }
  :is(.faq-list, .pro-details) details { padding: 0 16px; }
  :is(.faq-list, .pro-details) details > p { padding-right: 0; }
}

/* Ausreißer der Typo-Skala */
.hero-art .art-label { font-size: var(--fs-eyebrow); }
.family-card .here { font-size: var(--fs-small); }
.languages, .languages a, .languages span { font-size: .8125rem; }
.legal-main form label { font-size: .9375rem; }
.legal-main form .button { font-size: .9375rem; }

/* ---------------------------------------------------------------------------
   Screenshots im Telefonrahmen nach dem Muster von Marcus'Mend (24.09.2026)
   Gleiche Bildauflösung wie bei Mend (780 × 1688); die Wirkung entsteht durch Rahmen,
   Größe (148 px in Karten, 230 px in Reitern) und die Einbindung in weiße Karten.
   --------------------------------------------------------------------------- */
button.screenshot {
  position: relative;
  display: block;
  width: 230px;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 2px solid #d6d3d1;
  border-radius: 16px;
  background: #f5f5f4;
  overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(25, 52, 47, .4);
  cursor: zoom-in;
  transition: transform .3s;
}
button.screenshot.phone-sm { width: 148px; }
button.screenshot:hover { transform: translateY(-6px); }
.phone-screen { display: block; background: var(--white); }
.phone-screen img { display: block; width: 100%; height: auto; }
button.screenshot .zoom-mark {
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid #d6d3d1;
  background: var(--white);
  color: var(--interactive);
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(25, 52, 47, .15);
}
button.screenshot:hover .zoom-mark { transform: none; background: var(--interactive); border-color: var(--interactive); color: var(--white); }
button.screenshot:focus-visible { outline: 2px solid var(--interactive); outline-offset: 4px; }

/* 3.5 So funktioniert's: Karten wie bei Marcus'Mend */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  text-align: center;
  box-shadow: 0 1px 2px rgba(25, 52, 47, .05);
}
.step-card .step-number { margin-top: 24px; font-family: var(--serif); color: var(--accent); }
#main-content.home-main .step-card h3 { margin: 4px 0 10px; }
#main-content.home-main .step-card p { color: var(--muted); }
@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps-grid { grid-template-columns: 1fr; gap: 20px; padding-inline: 0; } }

/* 3.4 Situationen: Text und Telefon nebeneinander, mobil Telefon oben */
/* Text läuft über die ganze rechte Spalte (Nutzerwunsch: breiter statt Umbruch, Lesbarkeit bewusst abgewogen) */
@media (min-width: 641px) {
  /* Einträge rechts, Trennlinien nur dort. 27 % links statt einem Drittel: so bleibt die längste
     Überschrift ab 1224 px Fensterbreite einzeilig (gemessen 773 px + 56 px Plus-Button). */
  .situations-section { --sit-left: 27%; }
  .situation { position: relative; margin-left: var(--sit-left); }
  .situation > summary > h3 { text-wrap: wrap; }
  .situation .profile-panel > p:not(.profile-name), .situation :is(.situation-limit, .situation-sibling) { max-width: none; }
  /* Bild im linken Bereich, oben bündig mit der Überschrift (top misst site.js; 50px ohne Skript) */
  .situation-media { position: absolute; top: var(--heading-top, 50px); right: calc(100% + 32px); width: calc(100% * 27 / 73 - 32px); display: flex; justify-content: center; }
  .situation-media button.screenshot { margin: 0; }
  .situation[open] { min-height: calc(var(--heading-top, 50px) + var(--media-height, 500px) + 32px); }
  .situations-section > .fineprint { margin-left: var(--sit-left); }
}
@media (max-width: 640px) {
  .situation-body { display: grid; gap: 24px; }
  .situation-media { display: flex; justify-content: center; order: -1; }
  .situation-media button.screenshot { width: 180px; }
}

/* 3.11 Therapie: Telefon unter der Überschrift */
.therapy-media { margin-top: 36px; }
.therapy-media button.screenshot { margin-inline: 0; }
@media (max-width: 850px) { .therapy-media { display: none; } }
#main-content.home-main .step-card h3 { font-size: 1.3125rem; }
#main-content.home-main .step-card p { font-size: 1rem; line-height: 1.65; }
.steps-grid + .fineprint { margin-top: 28px; }

/* Videoabschnitt wie vor dem Umbau (Werte aus Commit 6f97389), an die Typo-Skala angepasst */
.video-row {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 65px;
  padding-top: 58px;
  border-top: 1px solid var(--line);
}
#main-content.home-main .video-row h3 { font-size: 2rem; line-height: 1.2; }
#main-content.home-main .video-row p:not(.eyebrow) { margin-top: 20px; color: var(--muted); }
.video-row video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--small-radius); background: var(--ink); }
@media (max-width: 1100px) { .video-row { gap: 40px; } }
@media (max-width: 850px) { .video-row { grid-template-columns: 1fr; gap: 35px; } }
@media (max-width: 640px) {
  .video-row { margin-top: 40px; padding-top: 38px; gap: 25px; }
  #main-content.home-main .video-row h3 { font-size: 1.75rem; }
}

/* Hero: dezenter Sprunglink zum Videoabschnitt statt Button */
.hero-video { margin-top: 14px; }
#main-content.home-main .hero-video a { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--interactive); text-decoration: none; }
.hero-video a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-video .icon-play { width: .75em; height: .75em; margin: 0; }
#main-content.home-main .video-row h3:not(.app-logo) { font-size: 2rem; }
@media (max-width: 640px) { #main-content.home-main .video-row h3:not(.app-logo) { font-size: 1.75rem; } }

/* Videokarte mit Play-Button und Modal nach dem Muster von Marcus'Mood */
.video-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0 30px 60px -32px rgba(25, 52, 47, .55);
  transition: border-color .2s;
}
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25, 52, 47, .78), rgba(25, 52, 47, .28) 55%, rgba(25, 52, 47, .42));
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--interactive);
  color: var(--white);
  font-size: 30px;
  box-shadow: 0 14px 34px -8px oklch(.50 .17 255 / .6);
  transform: translate(-50%, -50%);
  transition: transform .2s, background .2s;
}
.video-play .icon { margin-left: 4px; }
.video-label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: var(--white);
  font: 600 .9375rem/1.3 var(--sans);
  letter-spacing: .01em;
}
.video-card:hover { border-color: var(--interactive); }
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--interactive-hover); }
.video-card:focus-visible { outline: 3px solid var(--interactive); outline-offset: 4px; }

.video-modal {
  width: min(960px, calc(100vw - 48px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(10, 20, 18, .9); backdrop-filter: blur(8px); }
.video-modal-card {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: var(--ink);
}
.video-modal-card video { display: block; width: 100%; border-radius: 13px; background: #000; }
.video-modal-card .video-frame { aspect-ratio: 16 / 9; border-radius: 13px; background: #000; overflow: hidden; }
.video-modal-card .video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.video-modal-close:hover { background: var(--white); }
.video-modal-close .icon { margin: 0; }
@media (max-width: 640px) {
  .video-play { width: 64px; height: 64px; font-size: 24px; }
  .video-modal-close { top: -48px; right: 0; }
}

/* 3.11 Therapie: eigene Karte mit festen Abständen, Telefon auf ruhigem Kreis wie im Hero */
.therapy-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 64px 64px 64px 72px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--accent-light);
  overflow: hidden;
}
.therapy-text h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.12; }
#main-content.home-main .therapy-text .lead { margin-top: 24px; max-width: 46ch; }
.therapy-text .actions { margin-top: 30px; }
#main-content.home-main .therapy-text .fineprint { margin-top: 16px; }
.therapy-media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; margin: 0; }
.therapy-orbit {
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(64, 93, 79, .18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
}
.therapy-media button.screenshot { position: relative; margin-inline: auto; width: 210px; }
@media (max-width: 850px) {
  .therapy-card { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
  .therapy-media { display: flex; min-height: 0; padding-block: 12px; }
  .therapy-orbit { width: 280px; height: 280px; }
  .therapy-media button.screenshot { width: 170px; }
}

/* ---------------------------------------------------------------------------
   Layout-Durchsicht (24.09.2026): Befunde aus der Prüfung aller Zustände
   --------------------------------------------------------------------------- */

/* Überschriften ohne einzelnes Wort in der letzten Zeile */
h1, h2, h3, .background-title { text-wrap: balance; }

/* Zweispaltige Abschnitte mit langer rechter Spalte: linke Spalte läuft mit (wie „Für dich“) */
@media (min-width: 851px) {
  .faq-section > div:first-child,
  .privacy-grid > div:first-child { position: sticky; top: 120px; align-self: start; }
  .faq-section, .privacy-grid { align-items: start; }
}

/* Fachpersonen: Abstand zwischen PDF-Button und Hinweis */
#main-content.home-main .pro-aside .fineprint { margin-top: 18px; }

/* Quellen: Hintergrund als Karten mit Plus-Button wie bei Marcus'Mood */
.background-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.background-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 64px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s;
}
.background-card .eyebrow { margin: 0; }
.background-title { font: 400 1.25rem/1.3 var(--serif); }
.background-card .toggle {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--interactive-border);
  border-radius: 50%;
  background: var(--interactive-surface);
  color: var(--interactive);
  font: 500 20px/1 var(--sans);
  transform: translateY(-50%);
  transition: background .2s, border-color .2s;
}
.background-card .toggle::before { content: '+'; }
.background-card:hover { border-color: var(--interactive); }
.background-card:hover .toggle { border-color: var(--interactive); background: var(--white); }
.background-card:focus-visible { outline: 2px solid var(--interactive); outline-offset: 3px; }
#main-content.home-main .literature-note { margin-top: 26px; max-width: 70ch; }
@media (max-width: 850px) { .background-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Situationen mobil: Telefon zentriert */
@media (max-width: 640px) { .situation-media { display: flex; justify-content: center; } }

/* Overlays und Modals: Scrollen bleibt im Fenster */
.overlay-box, .video-modal, .lightbox { overscroll-behavior: contain; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  button.screenshot:hover { transform: none; }
  .video-card:hover .video-play { transform: translate(-50%, -50%); }
}

/* Schließen-Buttons: Symbol exakt mittig bzw. ohne doppelten Abstand. Die allgemeine Regel
   „button > .icon:last-child“ ist spezifischer als einfache Ausnahmen, daher hier gezielt stärker. */
button.video-modal-close > .icon:last-child,
a.overlay-close > .icon:last-child { margin: 0; }

/* Video schließen: blauer Kreis mit kräftigem X, oberhalb der Karte rechtsbündig */
button.video-modal-close {
  top: -56px;
  right: 0;
  width: 44px;
  height: 44px;
  background: var(--interactive);
  color: var(--white);
  font-size: 20px;
  box-shadow: 0 6px 18px -6px oklch(.50 .17 255 / .6);
  transition: background .2s;
}
button.video-modal-close:hover { background: var(--interactive-hover); }
button.video-modal-close:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
button.video-modal-close .icon { stroke-width: 3; }
@media (max-width: 640px) { button.video-modal-close { top: -56px; right: 0; } }

/* Farbflächen vereinheitlicht: ein Ton für alle getönten Bänder statt vier fast gleicher Töne */
:root { --band: #e9ede5; }
/* Hintergründe nach fester Regel (24.09.2026): hell und grün wechseln sich ab, dunkel markiert die zwei
   Abschnitte mit Grundsatzaussage (Format, Datenschutz). Farbe immer über volle Bildschirmbreite; der
   border-image-Trick malt sie auch hinter schmal gesetzten .wrap-Abschnitten, ohne Querscrollen. */
.tone-green, .tone-dark { border: 0; border-image: conic-gradient(var(--tone) 0 0) fill 0 / / 0 100vw; }
.tone-green { --tone: var(--band); }
.tone-dark { --tone: var(--ink); color: var(--paper); }

/* Familie: weiße Karten wie im Rest der Seite, App-Farbe als Linie oben, Mind hervorgehoben
   wie Fachpersonen- und Therapie-Karte */
.family-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--mood);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(25, 52, 47, .05);
}
.family-card.mind { border-color: var(--accent); border-top-color: var(--accent); background: var(--accent-light); }
.family-card.mend { border-top-color: var(--gold); }
.family-card.mend { border-color: var(--line); border-top-color: var(--gold); }
/* Mind: weiß wie die anderen (der Schriftzug hat keinen transparenten Hintergrund), hervorgehoben durch Rahmen */
.family-card.mind { background: var(--white); border-color: var(--accent); border-top-color: var(--accent); }

/* Screenshot-Vergrößerung wie bei Marcus'Mend: dunkle Fläche, Bild ohne Kartenrahmen (nur Rundung und
   Schatten), Bildunterschrift und Zähler darunter, Pfeile links und rechts. Schließen wie beim Video. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(10, 20, 18, .9); backdrop-filter: blur(8px); }
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 72px 0 24px;
}
.lightbox-figure img {
  width: auto;
  height: auto;
  max-width: 78vw;
  max-height: calc(100dvh - 250px);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .45);
}
.lightbox-caption {
  max-width: min(760px, 100%);
  margin-top: 22px;
  color: #d7ded6;
  font-size: .9375rem;
  line-height: 1.6;
  text-align: center;
}
.lightbox-count {
  margin-top: 8px;
  color: #93a39a;
  font-size: .75rem;
  letter-spacing: .08em;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s;
}
button.lightbox-close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--interactive);
  color: var(--white);
  font-size: 20px;
  box-shadow: 0 6px 18px -6px oklch(.50 .17 255 / .6);
}
button.lightbox-close:hover { background: var(--interactive-hover); }
button.lightbox-close .icon { stroke-width: 3; }
.lightbox-prev,
.lightbox-next {
  top: 50%;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-size: 22px;
  transform: translateY(-50%);
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .2); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev .icon { transform: scaleX(-1); }
button.lightbox-close > .icon:last-child, button.lightbox-prev > .icon:last-child, button.lightbox-next > .icon:last-child { margin: 0; }
.lightbox button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (max-width: 640px) {
  button.lightbox-close { top: 12px; right: 12px; }
  /* Pfeile unten neben dem Zähler, damit auch Querformat-Bilder die volle Breite bekommen */
  .lightbox-prev, .lightbox-next { top: auto; bottom: 16px; width: 44px; height: 44px; transform: none; }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  .lightbox-figure { padding-bottom: 76px; }
  .lightbox-figure img { max-width: 100%; max-height: calc(100dvh - 290px); }
  .lightbox-caption { font-size: .875rem; line-height: 1.5; }
}
@media (max-width: 359px) {
  .lightbox-figure { max-width: calc(100vw - 20px); }
  .lightbox-caption { font-size: .8125rem; }
}

/* 3.8 Fachpersonen: Desktop-Ansicht im Browserfenster, davor das Handy (wie ein Gerätepaar) */
.pro-devices {
  display: grid;
  grid-template-columns: .75fr 1.5fr;
  gap: 64px;
  align-items: center;
  margin-top: 72px;
}
.pro-devices-text h3 { font-size: 25px; margin-bottom: 14px; }
.pro-devices-text p { color: var(--muted); }
.device-pair { position: relative; padding-bottom: 36px; }
button.desktop-shot {
  position: relative;
  display: block;
  width: calc(100% - 64px);
  padding: 0;
  border: 1px solid #d6d3d1;
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(25, 52, 47, .45);
  cursor: zoom-in;
  transition: transform .3s;
}
button.desktop-shot:hover { transform: translateY(-4px); }
button.desktop-shot:focus-visible { outline: 2px solid var(--interactive); outline-offset: 4px; }
.browser-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #e7e5e4; background: #f5f5f4; }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d6d3d1; }
button.desktop-shot img { display: block; width: 100%; height: auto; }
button.desktop-shot .zoom-mark {
  position: absolute;
  top: 4px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d6d3d1;
  border-radius: 50%;
  background: var(--white);
  color: var(--interactive);
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(25, 52, 47, .15);
}
button.desktop-shot:hover .zoom-mark { background: var(--interactive); border-color: var(--interactive); color: var(--white); }
.device-pair button.screenshot { position: absolute; right: 0; bottom: 0; width: 26%; max-width: 148px; margin: 0; }
@media (max-width: 850px) {
  .pro-devices { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
}
@media (max-width: 480px) {
  button.desktop-shot { width: calc(100% - 36px); }
}

/* Skill-Bundle-Reiter: Schritte kompakt. Die h4 hatte noch den Browser-Standardabstand (je ~1.3em),
   dadurch war jede Zeile rund 140 px hoch. Ab Tablet zweispaltig, Buchstabe neben Titel und Satz. */
.panel-text .bundle-steps h4 { margin: 0; }
.panel-text .bundle-steps li { align-items: start; gap: 14px; padding: 12px 0; }
.panel-text .bundle-letter { font-size: 26px; line-height: 1.1; }
#main-content.home-main .panel-text .bundle-steps p { margin-top: 2px; font-size: .9375rem; line-height: 1.5; }
@media (min-width: 641px) {
  /* Spaltenweise füllen, damit das Akronym senkrecht lesbar bleibt (D-E-A-R | M-A-N) */
  .panel-text .bundle-steps { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; }
}

/* Reiter „Was in Mind steckt“: Der erste Absatz war als Lead gesetzt (21 px, dunkel) und damit größer
   und dunkler als die Abschnittseinleitung darüber. Jetzt normale Textgröße wie „Für dich“. */
#main-content.home-main .panel-text > .lead { font-size: var(--fs-body); line-height: 1.7; }

/* Footer: Kontakt, Impressum, Datenschutz als Bereiche unter dem Footer (wie Marcus'Mend live).
   .legal-main liefert Formular- und Textstile der Einzelseiten, hier nur Abstände und Schriftgrößen. */
.legal-panels { max-width: none; padding-block: 40px 16px; border-top: 1px solid var(--line); margin-top: 32px; }
.legal-panel { max-width: 760px; }
.legal-panel + .legal-panel { margin-top: 56px; }
.js .legal-panel + .legal-panel { margin-top: 0; }
.legal-panels h2 { font-size: 1.75rem; margin-block: 0 16px; }
.legal-panels h3 { font-size: 1.25rem; margin-block: 28px 10px; }
.legal-panels :is(p, li, label) { font-size: .9375rem; line-height: 1.75; }
.legal-panels .lead { font-size: 1.0625rem; }
.site-footer .legal-panels .fineprint { font-size: .8125rem; }

/* Footer-Links: ohne Unterstreichung, kleiner Pfeil nach unten; beim offenen Bereich nach oben */
.footer-links .footer-legal .icon { margin: 0; font-size: .8em; transform: rotate(90deg); transition: transform .2s; }
.footer-links .footer-legal[aria-expanded="true"] .icon { transform: rotate(-90deg); }

/* Fußzeile einzeilig: links Name und Claim, rechts die drei Rechtslinks (ersetzt footer-grid mit Logo) */
.site-footer .footer-claim { color: var(--muted); font-size: .875rem; }
.legal-panels { margin-top: 28px; }

/* Format auf dunklem Grund (wie Datenschutz): helle Schrift, Karten bleiben hell, Mind-Karte hellgrün */
.format-section.tone-dark h2 { color: var(--paper); }
.format-section.tone-dark .section-heading .eyebrow { color: #d4e2cb; }
.format-section.tone-dark .section-heading .eyebrow::before { background: #b8c9ad; }
/* Helle Karten behalten dunkle Schrift (sonst erben sie die helle Abschnittsfarbe) */
.format-section.tone-dark .format-card:not(.is-mind) { color: var(--ink); }
.format-section.tone-dark .format-card:not(.is-mind) h3 { color: var(--ink); }
#main-content.home-main .format-section.tone-dark .section-heading > p { color: #c6d1c7; }

/* Weiße Kästen vertikal kompakter (24.09.2026): einheitlich engere Innenabstände */
#main-content.home-main .background-card { padding-block: 16px; gap: 4px; }
#main-content.home-main :is(#faq, .pro-details) details > summary { padding-block: 13px; }
#main-content.home-main .format-card { padding: 24px 26px; }
#main-content.home-main .family-card { padding: 22px 24px; }
#main-content.home-main .step-card { padding: 20px 20px 22px; }
#main-content.home-main .pro-aside { padding: 24px 24px; }
#main-content.home-main .therapy-card { padding-block: 48px; }

/* Quellen: Cover der deutschen Ausgaben neben dem Text (nur DE) */
.literature-list > li.has-cover { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
.book-cover { width: 96px; height: auto; border-radius: 3px; box-shadow: 0 10px 22px -12px rgba(25, 52, 47, .45); }
@media (max-width: 640px) { .literature-list > li.has-cover { grid-template-columns: 72px 1fr; gap: 16px; } .book-cover { width: 72px; } }

/* Therapie: Tablet hochkant statt Handy (füllt die rechte Spalte, zeigt das zweispaltige Verzeichnis) */
.therapy-media button.screenshot.tablet-shot { width: min(100%, 400px); border-radius: 18px; }
@media (max-width: 850px) { .therapy-media button.screenshot.tablet-shot { width: min(100%, 340px); } }

/* Hinweis auf Marcus'Mend: Link ohne Unterstreichung, mit Symbol für externe Seite */
.sibling-link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.sibling-link:hover { text-decoration: underline; }
.sibling-link .icon { margin-left: 3px; font-size: .85em; }

/* Reiter „Was in Mind steckt“: Aufteilung wie „Für dich“ (27 % Bild, Rest Text über die volle Breite),
   sichtbare Überschrift je Reiter, Bild oben bündig mit ihr */
@media (min-width: 851px) {
  .tab-panel.has-media { grid-template-columns: calc(27% - 32px) 1fr; gap: 32px; }
  .tab-panel.has-media .panel-media { display: flex; justify-content: center; }
  .tab-panel.has-media .panel-media button.screenshot { margin: 0; }
}
#main-content.home-main h3.panel-heading { font-size: 1.4375rem; line-height: 1.3; margin-bottom: 14px; }

/* „Was in Mind steckt“: Reiterleiste mit Unterstrich wie bei Marcus'Mood statt runder Buttons
   (Navigation statt Badge-Optik). Profil-Schalter unter „Für dich“ bleiben Buttons. Mobil seitlich wischbar. */
#main-content .tab-switch { flex-wrap: nowrap; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#main-content .tab-switch::-webkit-scrollbar { display: none; }
#main-content .tab-switch button {
  flex: none;
  min-height: 0;
  margin-bottom: -1px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--interactive);
  font: 600 .9375rem/1.3 var(--sans);
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
#main-content .tab-switch button:hover { color: var(--interactive-hover); border-bottom-color: var(--line); }
#main-content .tab-switch button[aria-selected="true"] { background: none; color: var(--accent); border-bottom-color: var(--accent); }
#main-content .tab-switch button:focus-visible { outline-offset: -2px; }

/* Fußzeile: Rechtslinks links im Stil der Reiterleiste (Linie über die ganze Breite, offener Bereich in
   Akzentfarbe mit Unterstrich), Claim rechts. Der kleine Pfeil zeigt, dass sich darunter etwas öffnet. */
.footer-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 32px; border-bottom: 1px solid var(--line); }
.footer-bar .footer-links { display: flex; gap: 0; }
.footer-links .footer-legal {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: -1px; padding: 12px 18px;
  border-bottom: 2px solid transparent;
  color: var(--interactive); font-weight: 600; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.footer-links .footer-legal:first-child { padding-left: 0; }
.footer-links .footer-legal:hover { color: var(--interactive-hover); border-bottom-color: var(--line); }
.footer-links .footer-legal[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.site-footer .footer-claim { padding-block: 12px; color: var(--muted); }
.legal-panels { border-top: 0; margin-top: 0; }
@media (max-width: 640px) {
  .footer-links .footer-legal { padding-inline: 12px; }
  .footer-bar { border-bottom: 0; }
  /* sehr schmale Bildschirme: wischbar wie die Reiterleiste, statt die Seite quer scrollen zu lassen */
  .footer-bar .footer-links { width: 100%; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .footer-bar .footer-links::-webkit-scrollbar { display: none; }
  .footer-links .footer-legal { flex: none; white-space: nowrap; }
}

/* Navigation: zwischen 851 und 1210 px reicht die Breite in keiner Sprache für die ganze Linkleiste (am knappsten
   in FR mit den längsten Beschriftungen). Dort klappt sie wie unter 850 px in das Menü ein. */
@media(min-width:851px) and (max-width:1210px){.nav{min-height:76px;flex-wrap:wrap;gap:16px}.brand{margin-right:auto}.nav-links{order:4;width:100%;justify-content:space-between;margin:0;gap:10px;border-top:1px solid var(--line)}.js .menu-toggle{display:flex}.js .nav-links{display:none}.js .nav-links.is-open{display:flex;padding-bottom:14px}.languages{border:0;padding:0}}

/* Sprachauswahl als Flyout: Globus, Kürzel der aktuellen Sprache, darunter alle Sprachen mit Namen. */
.languages{position:relative}
.lang-menu{position:relative}
.languages .lang-menu{border:0}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:var(--small-radius);color:var(--interactive);font-size:12px;font-weight:600;letter-spacing:.04em}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{color:var(--interactive-hover);border-color:var(--interactive)}
.lang-menu summary span{color:inherit;font-size:inherit}
.lang-menu summary .icon{width:15px;height:15px;flex:none}
.lang-menu[open] summary .icon-chevron-down{transform:rotate(180deg)}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:168px;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--small-radius);box-shadow:0 14px 30px -14px rgba(25,52,47,.4)}
.lang-menu li{margin:0}
.lang-menu li a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.lang-menu li a:hover{background:var(--accent-light)}
.lang-menu li a[aria-current="page"]{font-weight:700;background:var(--accent-light)}

/* App-Familie: Standard-Layout (Marcus-Website/_reference/brand/APP-FAMILIE-TEASER.md).
   Logo sichtbar so breit wie die Badge-Reihe (max. 2 x 180 + 12 = 372 px); die Logo-PNGs hier sind randlos. */
.family-grid{gap:24px}
.family-card{padding:28px}
/* Gruppen: Kontextzeile + Logo eng, Logo -> Text 24 px, Aktionen unten */
.family-card .eyebrow{margin-bottom:10px}
.family-card .app-logo{margin-top:0;min-height:0}
.family-card>p:not(.eyebrow){margin-block:24px 20px}
.family-card .app-identity{width:min(100%,372px)}
.family-card .app-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 20px}
.family-card .app-links .text-link,.family-card .app-links .here{margin-top:0}
/* Infoseiten-Link: Textlink, Pfeil aus dem Kasten dahinter, nicht unterstrichen (nur beim Ueberfahren) */
.family-card .info-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none}
.family-card .info-link:hover{text-decoration:underline;text-underline-offset:4px}
.family-card .info-link .icon{width:16px;height:16px;flex:none}
.family-card .app-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,372px);margin-top:14px}
.family-card .app-access>div{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.family-card .access-label{font-size:12px;font-weight:600;color:var(--muted)}
.family-card .app-access .store-badge{min-height:0}
.family-card .app-access .store-badge img{width:100%;max-width:180px;height:auto}
@media(max-width:1000px){.family-grid{gap:16px}.family-card{padding:24px}}