/* Shared phone layout; each design keeps its own fonts, palette and desktop grid. */
@media screen and (max-width:48rem){
 html{scroll-padding-top:1rem}
 body{font-size:1.0625rem;line-height:1.6}
 .kopf-innen,.fuss-innen,.abschnitt{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
 .kopf-innen{position:relative;gap:.5rem .75rem;padding-top:.75rem;padding-bottom:.75rem}
 .wortmarke{min-height:48px;justify-content:center}
 .wortmarke .funktion{font-size:.8rem;margin-top:.2rem}
 .kopf .desktop-navigation{display:none}
 .mobile-navigation{display:block}
 .mobile-navigation summary{display:flex;align-items:center;gap:.5rem;min-height:48px;min-width:64px;padding:.5rem 0 .5rem .5rem;cursor:pointer;list-style:none;font-size:1rem;color:var(--menu-text,var(--navy))}
 .mobile-navigation summary::-webkit-details-marker{display:none}
 .mobile-navigation[open] summary{color:var(--menu-text,var(--navy))}
 .mobile-navigation nav{position:absolute;z-index:5;top:100%;left:0;right:0;max-height:calc(100svh - 6rem);overflow-y:auto;overscroll-behavior:contain;background:var(--menu-surface,var(--off));padding:.5rem max(1.25rem,env(safe-area-inset-left)) 1rem;border-bottom:1px solid var(--menu-line,var(--gold))}
 .kopf .mobile-navigation nav ul{display:block}
 .kopf .mobile-navigation nav a{display:flex;align-items:center;min-height:48px;padding:.6rem 0;width:100%;font-size:1.0625rem;color:var(--menu-text,var(--navy));border-bottom:1px solid var(--menu-line,var(--beige))}
 .kopf .mobile-navigation nav a[aria-current="page"]{font-weight:600;border-bottom:2px solid var(--gold)}
 .kopf :focus-visible{outline-color:var(--menu-text,var(--navy))}
 .abschnitt{padding-top:3.25rem;padding-bottom:3.25rem}
 /* Section start marker: on phones sections stack in one column, so each section title gets a short gold rule and more air than the items inside it. */
 main section h2:not(.ruf h2):not(.kontakt-direkt h2)::before{content:"";display:block;width:2.5rem;height:3px;background:var(--gold);margin-bottom:.9rem}
 .zuweiser-hinweis{padding-top:2.5rem;padding-bottom:3.25rem}
 .einstieg,.start-einstieg,.seiten-einstieg,.kontakt-einstieg,.person-einstieg{padding-top:2rem;gap:1.5rem}
 h1{font-size:clamp(2rem,8.4vw,2.5rem);line-height:1.13;hyphens:manual;overflow-wrap:normal;margin-bottom:.55em}
 h2{font-size:clamp(1.65rem,6.5vw,2rem);line-height:1.2;hyphens:manual;overflow-wrap:normal}
 h3{font-size:1.35rem;line-height:1.3}
 p{margin-bottom:1rem}
 .lead,.start-text>.lead{font-size:1.15rem;line-height:1.5;max-width:none;margin-bottom:1rem}
 .knopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;min-height:52px;padding:.85rem 1rem;text-align:center;line-height:1.35}
 .knopf small{flex-basis:100%;margin-top:.2rem}
 .aktionen{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;margin-top:1.25rem}
 .textlink,.knopf-leise,.drei a{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
 .kontakt-hinweis{font-size:.875rem;line-height:1.5;margin-top:.65rem;max-width:none}
 .start-bild img,.einstieg .start-bild img{aspect-ratio:16/10;object-fit:cover}
 .bildentwurf figcaption{font-size:.875rem;line-height:1.5}
 .seiten-einstieg.seiten-mit-bild h1{font-size:clamp(2rem,8.4vw,2.5rem)}
 .seiten-bild img{aspect-ratio:16/10}
 .situationen .karten-bild img,.bild-band .bildentwurf img{aspect-ratio:16/10;max-height:none}
 .abschnitt-kopf{margin-bottom:1.5rem;text-align:left}
 .abschnitt-kopf h2{margin-bottom:.6rem}
 .abschnitt-kopf p{margin:0;max-width:none}
 .zitate{gap:0}
 .zitate li{font-size:1.2rem;font-weight:400;line-height:1.45;max-width:none;border:0;border-bottom:1px solid var(--linie,var(--beige));padding:1rem 0}
 .zitate li:first-child{border-top:1px solid var(--linie,var(--beige))}
 .drei,.situationen{gap:1.25rem}
 .situationen article+article{padding-top:1.25rem}
 .drei>div+div{padding-top:1.25rem;border-top:1px solid var(--beige)}
 .drei p,.situationen p{margin-bottom:.35rem;max-width:none}
 .haltung-bild{padding-top:0;padding-bottom:3.25rem}
 .haltung-anker{padding:1.5rem}
 .haltung-anker blockquote p{font-size:1.5rem;line-height:1.4;margin-bottom:1rem}
 .haltung-anker>a{margin-top:1rem}
 .prozess,.person-vorschau,.zuweiser-hinweis,.person-haltung,.hintergrund,.erstgespraech,.leseabschnitt{gap:1.25rem}
 .prozess h2,.person-vorschau h2,.leseabschnitt h2{max-width:none}
 .prozess-grundsatz{font-size:1.2rem;margin-top:1rem}
 .schritte li{padding-left:2.5rem}
 .schritte li+li{padding-top:1rem}.schritte li+li::before{top:1.1rem}
 .ruf{padding-top:2.5rem;padding-bottom:2.5rem;margin-top:0;text-align:left}
 .ruf>.knopf{width:100%;justify-self:stretch}
 .ruf p{margin-left:0;margin-right:0}
 .foto.klein,.portraet-offen{aspect-ratio:auto;min-height:0;max-width:none;padding:1rem}
 .kontakt-direkt{padding:1.25rem}
 .kontakt-direkt h2{font-size:1.65rem}
 main a[href^="mailto:"]{display:flex;align-items:center;min-height:48px;overflow-wrap:anywhere}
 .seiten-navigation{gap:.15rem 1rem;margin-top:1.25rem}
 .fragen{padding-top:1.5rem}
 .fragen summary{font-size:1.0625rem;line-height:1.5;padding:1rem 0}
 .fehlt{padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere}
 .fuss{margin-top:0}
 .fuss-innen{gap:1.25rem;padding-top:2rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
 .fuss a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
 .fuss :focus-visible{outline-color:var(--weiss)}
 .recht{display:flex;flex-wrap:wrap;gap:0 1.5rem}
}