/* Mobile-Layout, Stand 26.10.2026: wird zuletzt geladen und macht die Seite auf dem
  Handy benutzbar - schmale Kopfzeile mit Burger-Panel, ein Gift-Grid in einer Spalte,
  kleinere Ueberschriften, Lesetexte wieder sichtbar, alle Trefferflaechen mindestens 44 px.
  Alles, was ein Script braucht, haengt an html[data-menu] (setzt das Inline-Script im Kopf):
  ohne Script bleibt die Navigation vollstaendig ausgeklappt. */

/* Grundabsicherung: nichts darf breiter sein als der Viewport. */
img,.gift-image svg{max-width:100%}
.editorial{padding-left:max(48px,calc((100% - 1224px)/2));padding-right:max(48px,calc((100% - 1224px)/2))}
a,button{touch-action:manipulation}

@media(max-width:650px){
/* --- Kopf und Menue-Panel (nur mit Script) --- */
html[data-menu] .site-head{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
html[data-menu] .header{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:0;max-width:none;padding:9px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
html[data-menu] .brand{display:flex;align-items:center;flex:1 1 auto;min-width:0;min-height:44px;font-size:18px;line-height:1.1;gap:7px}
html[data-menu] .brand-mark{font-size:25px}
html[data-menu] .brand-sub{font-size:7.5px;letter-spacing:1.4px;margin-top:2px}
html[data-menu] .nav-toggle{display:inline-flex;order:2;flex:0 0 auto}
html[data-menu] .header nav,html[data-menu] .main-nav{display:none}
html[data-menu] .header nav{order:3;width:100%;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 16px 10px;border-bottom:1px solid var(--line);font-size:16px}
html[data-menu] .header nav a:not(.nav-pill){display:flex;align-items:center;min-height:48px;padding:12px 2px;margin:0;border-bottom:1px solid var(--line);border-radius:0}
html[data-menu] .nav-pill{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:16px 0 2px;padding:13px 16px;border-radius:4px;background:var(--green);border-color:var(--green);color:#fff;font-size:15px}
html[data-menu] .main-nav{background:var(--paper);border-bottom:0}
html[data-menu] .main-nav-inner{padding:14px 16px 26px;gap:18px}
html[data-menu] .main-nav-label{display:block}
html[data-menu] .main-nav-row{gap:9px}
html[data-menu] .main-nav-row a{display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;border-color:var(--line);font-size:15px}
html[data-menu] .main-nav-budget a{font-size:14px;color:var(--ink)}
/* Geoeffnetes Panel fuellt den Schirm, die Seite dahinter ruht. */
html[data-menu-open]{overflow:hidden}
html[data-menu-open] .site-head{position:fixed;top:0;right:0;left:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
html[data-menu-open] .header nav,html[data-menu-open] .main-nav{display:flex}
html[data-menu-open] .main-nav{display:block}

/* --- Typografie: Ueberschriften auf Schirmgroesse, lange Worter brechen sauber --- */
h1,h2{hyphens:auto;overflow-wrap:break-word}
.category-hero h1,.guide h1{font-size:clamp(28px,7.6vw,34px);letter-spacing:-.6px;line-height:1.14}
.legal h1{font-size:29px;letter-spacing:-.5px}
.legal h2{font-size:22px;margin:28px 0 12px}
.guide h2{font-size:clamp(23px,6vw,28px)}
.breadcrumbs{font-size:.9rem;overflow-wrap:anywhere}
.breadcrumbs a{padding:9px 5px;margin:-9px -5px}
/* Der aktuelle Pfadpunkt steht direkt darunter als H1 - auf dem Handy eine Zeile weniger. */
.breadcrumbs li:last-child{display:none}

/* --- Startseite: Hero kuuerzer, Wertestreifen lesbar --- */
.hero{padding:22px 18px 34px;gap:26px}
.hero-art{min-height:300px;margin:0}
.gift-scene{transform:rotate(-8deg) scale(.78)}
.art-caption{top:26px}
.art-bottom{bottom:22px;font-size:20px}
.floating-note{bottom:54px;left:-6px;padding:12px 15px;font-size:12px}
.floating-note em{font-size:15px}
.intro{font-size:16px;line-height:1.7}
.hero-note{font-size:13px}
.value-strip{font-size:12px;gap:10px;padding:16px 10px}
.section{padding:38px 18px}
.section-heading>p{display:block;margin-top:14px;font-size:15px;line-height:1.7}

/* --- Geschenk-Karten: eine Spalte, volle Lesbarkeit statt zwei schmaler Spalten --- */
.gift-grid{grid-template-columns:1fr;gap:18px}
.gift-image{height:170px}
.gift-image svg{height:132px;width:150px}
.gift-image>span{font-size:10px}
.gift-content{padding:20px 18px}
.gift-content h3{font-size:21px;letter-spacing:-.4px}
.gift-content .eyebrow{font-size:10px;letter-spacing:1.1px}
.gift-content>p:not(.eyebrow){font-size:14px}
.gift-content .gift-budget,.gift-content details{font-size:13px}
.shop-link{font-size:13px;padding-top:18px}
.small{font-size:13px}
.affiliate-note{font-size:13px}

/* --- Ratgeber und Detailseiten --- */
.advice{padding:20px}
.advice p{font-size:14px}
.guide-toc{padding:18px}
.guide-toc a{display:block;padding:12px 2px}
.guide-steps{padding-left:20px}
.guide-context a{padding:8px 4px;margin:0 8px 8px 0}
.comparison{min-width:500px;font-size:.9rem}
.comparison th,.comparison td{padding:.7rem}
.comparison-scroll{-webkit-overflow-scrolling:touch}

/* --- Budget-Leiter: Stufen als 44-px-Pills, Parent-Link unter den Geschwistern --- */
.budget-ladder{padding:22px 18px 0}
.budget-ladder-list{gap:7px}
.budget-ladder-list a,.budget-ladder-list [aria-current]{min-height:44px;padding:11px 15px;font-size:14px}
.budget-ladder-nav{gap:6px 16px;font-size:15px}
.budget-ladder-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 2px;margin:-8px -2px}
.budget-ladder-parent{margin-left:0}

/* --- Formulare: iOS zoomt nicht mehr, Filter und Budget gut zu treffen --- */
.filters button,.budget-presets button{min-height:44px;padding:11px 16px;font-size:14px}
.budget-filter{padding:16px}
.budget-fields{gap:12px}
.budget-fields>div{min-width:0;flex:1 1 100%}
.budget-filter select{font-size:16px}
.faq summary{font-size:16px}

/* --- Kategorien und Fuss --- */
.category-grid>a{padding:22px}
.category-grid strong{font-size:22px}
.editorial{padding:36px 18px}
footer{padding:32px 18px calc(32px + env(safe-area-inset-bottom))}
.footer-links{gap:6px 18px;font-size:13px}
.footer-links a{padding:10px 4px;margin:-10px -4px}
.footer-affiliate{font-size:13px}
.legal{min-height:40vh}

/* Anker verschwinden nicht unter der klebrigen Kopfzeile. */
html{scroll-padding-top:74px}
}