/* Zitatfriend Typo-Feinschliff Handy v1, 26.09.2026
   Nur bis 760px Breite: mehr Zeilenhoehe in Ueberschriften und mehr Luft zwischen Ueberschrift und Text.
   Am PC aendert sich nichts. Wird auf den statischen Seiten als letztes Stylesheet geladen.
   Zurueckdrehen: diese Datei leeren. Sicherung der Seiten: zf-backups/typo-20260926/ */
@media (max-width:760px){
h1,h2,h3{text-wrap:balance}
:root:has(link[href*="style.css"],.zf-wrap,.zf-page) h1{line-height:1.16}
:root:has(link[href*="style.css"],.zf-wrap,.zf-page) h2{line-height:1.2}
:root:has(link[href*="style.css"],.zf-wrap,.zf-page) :is(.card-body,.zf-prose,.zf-card,.zf-day-body,.zf-related) h3,
:root:has(link[href*="style.css"],.zf-wrap,.zf-page) :is(.container,.wrap) > h3{line-height:1.26}
:root:has(link[href*="style.css"],.zf-wrap,.zf-page) .hero-copy h1{line-height:1.18}
h1.serif{line-height:1.16}
h2.serif{line-height:1.2}
:is(h1,h2) + .lede.lede{margin-top:16px}
:is(.center,.cta-band,.band,.wrap) > h2 + p:is(p){margin-top:14px}
.panel h2 + :is(ul,p){margin-top:16px}
.card-body h3{margin-bottom:4px}
.zf-card h3,.zf-day-body h3{margin-bottom:12px}
.zf-prose h3{margin-bottom:12px}
.zf-prose :is(p,ul,ol,blockquote,figure,div) + h3{margin-top:34px}
.zf-prose :is(p,ul,ol,blockquote,figure,div) + h2{margin-top:48px}
:is(.container,.wrap,.explain) > h2 + :is(p,ul,ol):not([class]){margin-top:16px}
:is(.container,.wrap,.explain) > h3 + :is(p,ul,ol):not([class]){margin-top:10px}
:is(.container,.wrap,.explain) > :is(p,ul,ol,blockquote):not([class]) + h2{margin-top:44px}
:is(.container,.wrap,.explain) > :is(p,ul,ol,blockquote):not([class]) + h3{margin-top:30px}
:is(.container,.wrap,.explain) > p:not([class]) + :is(p,ul,ol):not([class]){margin-top:14px}
a[style*="white-space:nowrap"]{display:inline-block}
}

/* Linien-Icons statt Emojis (26.09.2026), gilt fuer alle Breiten */
.zf-i{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;margin-right:.42em;flex:none;opacity:.9}
.zf-i svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Fuss am PC (26.09.2026): alle Spalten in einer Reihe, Lesen zweispaltig. Handy bleibt unveraendert. */
@media (min-width:761px){
footer.footer .footer-grid .brand{gap:3px}
footer.footer .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;column-gap:40px;row-gap:36px;align-items:start}
footer.footer .footer-grid>div:first-child{grid-column:1/-1}
footer.footer .footer-grid>div:nth-child(3){grid-column:1/-1}
footer.footer .footer-grid>div:nth-child(3) ul{grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
}
@media (min-width:1100px){
footer.footer .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,2.5fr) minmax(0,1fr);column-gap:40px}
footer.footer .footer-grid>div:first-child{grid-column:auto;max-width:250px}
footer.footer .footer-grid>div:nth-child(3){grid-column:auto}
footer.footer .footer-grid>div:nth-child(3) ul{grid-auto-flow:column;grid-template-rows:repeat(11,auto);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
footer.footer .footer-grid a{white-space:nowrap}
}

/* 27.09.2026 Tippflaeche Menue-Knopf am Handy */
@media (max-width:760px){button.burger{min-width:44px;min-height:44px}}

/* 27.09.2026 Flüssiges Scrollen und Wischen am Handy */
html,body{overscroll-behavior-x:none}
@media (max-width:760px){
 html body .blob,html body .fx-stage .blob,html body .cal-stage .blob,html body .cal-float .blob{filter:none!important;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(closest-side,#000 25%,transparent 100%)}
 .hero-badge{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.96)!important}
 #produkte .grid-4,#kostenlos .grid-4,#kostenlos .grid-2,.section .quotes{overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
 img{-webkit-user-drag:none}
}

/* PC-Abstaende (27.09.2026): gleiche Luft zwischen Ueberschrift und Text wie am Handy. Handy bleibt unveraendert. */
@media (min-width:761px){
:is(h1,h2) + .lede.lede{margin-top:18px}
:is(.center,.cta-band,.band,.wrap) > h2 + p:is(p){margin-top:16px}
.panel h2 + :is(ul,p){margin-top:18px}
.card-body h3{margin-bottom:6px}
.zf-card h3,.zf-day-body h3{margin-bottom:12px}
.zf-prose h3{margin-bottom:12px}
.zf-prose :is(p,ul,ol,blockquote,figure,div) + h3{margin-top:36px}
.zf-prose :is(p,ul,ol,blockquote,figure,div) + h2{margin-top:52px}
:is(.container,.wrap,.explain) > h2 + :is(p,ul,ol):not([class]){margin-top:18px}
:is(.container,.wrap,.explain) > h3 + :is(p,ul,ol):not([class]){margin-top:10px}
:is(.container,.wrap,.explain) > :is(p,ul,ol,blockquote):not([class]) + h2{margin-top:52px}
:is(.container,.wrap,.explain) > :is(p,ul,ol,blockquote):not([class]) + h3{margin-top:34px}
:is(.container,.wrap,.explain) > p:not([class]) + :is(p,ul,ol):not([class]){margin-top:16px}
:is(.page-hero,.hero,.hero-copy) .lede + ul{margin-top:20px}
.panel p + p{margin-top:12px}
}

/* Feinschliff 2 (27.09.2026), alle Breiten: kleine Titel in Karten und Schritten nicht mehr am Text klebend */
h4 + p:not([class]){margin-top:8px}
.steps .step h3 + p{margin-top:6px}