/* V0.1 Designrevision: nach der neu übergebenen Gesamtansicht. */
:root{--navy:#05264c;--accent:#0096b8;--surface:#ffffffed;--soft:#edf4f9;--line:#ffffff86;--muted:#335a78;--ink:#062a51;--shadow:0 3px 9px #00223c25}
body{background:#d2e2e8;color:var(--ink)}
.app-shell{position:relative;background:linear-gradient(180deg,#10293900 0%,#031e33bb 85%),url('./assets/berge.png') center top/cover fixed;padding-bottom:calc(92px + env(safe-area-inset-bottom));min-height:100dvh}
.hero{background:none!important;padding:calc(15px + env(safe-area-inset-top)) 22px 20px;min-height:220px;overflow:visible;text-align:center;color:#fff}
.hero:before{background:linear-gradient(180deg,#ffffff70,#0b324200 50%,#001d3980 100%)}
.hero-top{position:relative;min-height:92px;align-items:flex-start;justify-content:center}
.brand{width:132px;height:112px;display:block;background:url('./assets/design-reference.png') -596px -365px/734.72px 671.44px no-repeat;font-size:0;mix-blend-mode:multiply;text-shadow:none;letter-spacing:normal;flex:none;margin-top:3px}
.brand small,.brand-landscape{display:none}
.menu-button,.settings-button{position:absolute;top:12px;color:#063451;background:#ffffff66;border:0;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.35rem}
.menu-button{left:0}.settings-button{right:0}
.tagline,.eyebrow{display:none}.hero-caption{margin-top:0;text-shadow:0 2px 8px #082d48}
h1{font-size:1.48rem;letter-spacing:-.02em;margin:4px 0 6px}.hero-caption p{font-size:.88rem;font-weight:500}
main{margin:0;padding:0 15px;min-height:200px;outline:none}
.card{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:12px;box-shadow:var(--shadow)}
.section-heading{margin:17px 3px 9px;color:#fff;text-shadow:0 1px 4px #072640}
.section-heading h2{font-size:.96rem}.section-heading .badge{background:#ffffffbb;color:#234966}
.assistant-panel{padding:11px 13px 10px}.assistant-panel h2{font-size:1rem;display:flex;gap:8px;align-items:center;font-weight:650}.assistant-panel .input-options{margin-top:8px;border-top:1px solid #bed1df;padding-top:8px;gap:6px}.input-options button{background:transparent;border:0;min-height:54px;padding:0;font-size:.65rem;color:var(--navy);opacity:1}.input-options small{font-size:.54rem;color:#426078}.input-options svg{width:25px;height:25px;display:block;margin:0 auto 4px;color:#073e69}.assistant-note{font-size:.66rem;color:#48677a;line-height:1.4;margin-top:7px}
.modules{gap:10px;margin:11px 0 12px}.module{align-items:center;justify-content:center;text-align:center;position:relative;min-height:139px;border:1px solid #ffffff79;border-top:1px solid #ffffff79;padding:12px 8px 13px;border-radius:16px;color:#fff;background:var(--tile);box-shadow:inset 0 1px 2px #ffffff99,0 4px 12px #00152755}
.alltag{--module-color:#078744;--tint:#dff2e8;--tile:linear-gradient(155deg,#17c077,#00845f 42%,#004539)}.verstehen{--module-color:#086dad;--tint:#e3f0fc;--tile:linear-gradient(155deg,#01b8e7,#007dc2 42%,#003962)}.technik{--module-color:#ed7c1c;--tint:#fff0e0;--tile:linear-gradient(155deg,#ffd45c,#e88b1e 42%,#793712)}.offline{--module-color:#e63239;--tint:#ffe8e9;--tile:linear-gradient(155deg,#ff5e62,#ed2236 42%,#7e102e)}
.module-icon{background:transparent!important;color:#fff!important;width:43px;height:43px;margin:0 0 8px;border-radius:0}.module-icon svg{width:43px;height:43px;filter:drop-shadow(0 2px 2px #001c3040)}.module h3{color:#fff!important;font-size:1.05rem;margin-bottom:6px}.module p{color:#fff;font-size:.72rem;line-height:1.25;max-width:150px}.module:after{content:'›';position:absolute;right:9px;top:56px;font-size:1.7rem;opacity:.9}
.list-card{display:flex;align-items:center;gap:17px;min-height:102px;padding:16px 15px;border-radius:13px;border:1px solid #ffffff82;background:var(--surface);box-shadow:var(--shadow);margin-bottom:11px;color:var(--navy);text-align:left;width:100%}
.list-icon{width:49px;min-width:49px;display:grid;place-items:center;color:var(--module-color);filter:drop-shadow(0 2px 2px #193a5020)}.list-icon svg{width:47px;height:47px}.list-body{flex:1;min-width:0}.list-body strong{display:block;font-size:1rem;letter-spacing:-.025em;line-height:1.3;margin-bottom:4px}.list-body p{font-size:.78rem;line-height:1.35;color:#173d62}.list-body .soon{display:block;font-size:.61rem;margin-top:6px;color:#60718a}.list-chevron{font-size:1.4rem;color:var(--module-color)}
.module-intro{padding:8px 12px;margin:0 0 10px;text-align:center;color:#fff;background:#052d488a;border:1px solid #ffffff29;border-radius:9px;font-size:.7rem;line-height:1.45}
.page-symbol{display:flex;align-items:center;justify-content:center;margin:10px auto 12px;width:57px;height:57px;color:#fff;filter:drop-shadow(0 2px 4px #002b45)}.page-symbol svg{width:57px;height:57px}.hero-top:has(.page-symbol){min-height:90px;align-items:center;padding-top:9px}.hero-top:has(.page-symbol) .brand{display:none}.hero-top:has(.page-symbol) .menu-button,.hero-top:has(.page-symbol) .settings-button{color:#fff;background:#14344230}
.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));background:#042434f5;border-top:1px solid #ffffff3b;color:#fff;padding-top:7px;padding-bottom:calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(16px)}
.bottom-nav.with-module{grid-template-columns:repeat(5,minmax(0,1fr))}.bottom-nav a{min-height:45px;padding:3px 0;color:#e6f5ff;font-size:.62rem;gap:4px;border-radius:0}.bottom-nav a span{display:grid;place-items:center}.bottom-nav svg{width:23px;height:23px}.bottom-nav a[aria-current=page]{background:none;color:#00daf2}.bottom-nav a[data-nav=alltag][aria-current=page]{color:#00c69b}.bottom-nav a[data-nav=verstehen][aria-current=page]{color:#05ceef}.bottom-nav a[data-nav=technik][aria-current=page]{color:#ffb438}.bottom-nav a[data-nav=offline][aria-current=page]{color:#ff5f65}.nav-brand{text-align:center;font-size:.58rem;letter-spacing:.08em;color:#ffffffb3;margin:6px 0 0}.bottom-nav-wrap{grid-column:1/-1}
.status-bar{color:#f2f9ff;font-size:.62rem;text-shadow:0 1px 3px #07243c}.back{color:#fff;text-shadow:0 1px 4px #002747}.feature-grid{gap:8px}.note{background:#eff4f7;color:#405b71}.search-input{background:#fff;color:var(--ink);border-color:#becedb}.card h2{font-size:1.02rem}.row select{max-width:60%}.backgrounds{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.backgrounds button{border:2px solid transparent;border-radius:12px;background:#fff;box-shadow:0 2px 7px #001e3e18;color:#0c3254}.swatch{height:112px;background:var(--sample);background-position:center;background-size:cover}.backgrounds .name{font-size:.81rem;font-weight:600;padding:8px}.backgrounds button[aria-pressed=true]{border-color:#00a8bd}.settings-list .list-card{box-shadow:none;background:transparent;border-radius:0;border:0;border-bottom:1px solid #b6c7d5;min-height:73px;margin:0;padding:13px 0;gap:12px}.settings-list .list-icon{width:30px;min-width:30px}.settings-list .list-icon svg{width:28px;height:28px}.settings-list .list-body strong{font-size:.88rem}.settings-list .list-body p{font-size:.72rem}.settings-list .list-card:last-child{border:0}
.app-shell[data-section=technik]{background-image:linear-gradient(180deg,#39180e00,#210e09cf),url('./assets/technik.png')}.app-shell[data-section=alltag]{background-image:linear-gradient(180deg,#132d1800,#003529cf),url('./assets/natur.png')}.app-shell[data-section=offline]{background-image:linear-gradient(180deg,#4b122100,#2b0b22cf),url('./assets/meer.png')}
body[data-background=lichtwellen] .app-shell{background-image:linear-gradient(180deg,#05234000,#001a2acf),url('./assets/lichtwellen.png')}body[data-background=natur] .app-shell{background-image:linear-gradient(180deg,#102e1000,#002b26cf),url('./assets/natur.png')}body[data-background=wasser] .app-shell{background-image:linear-gradient(180deg,#10293900,#002b45cf),url('./assets/wasser.png')}body[data-background=stein] .app-shell{background-image:linear-gradient(180deg,#10293900,#001a2acf),url('./assets/stein.png')}body[data-background=meer] .app-shell{background-image:linear-gradient(180deg,#4b122100,#2b0b22cf),url('./assets/meer.png')}
:root[data-theme=dark]{--surface:#102738ed;--soft:#172f40;--ink:#eff6ff;--muted:#b9d0e0;--line:#ffffff38;--navy:#eff6ff}:root[data-theme=dark] .list-body p{color:#d0e4f0}:root[data-theme=dark] .list-body .soon{color:#a6c1d4}:root[data-theme=dark] .list-card{color:#eff6ff}:root[data-theme=dark] .note{background:#17344a;color:#bdd3e1}:root[data-theme=dark] .input-options svg,:root[data-theme=dark] .input-options button{color:#f0f7ff}:root[data-theme=dark] .assistant-note{color:#bcd5e6}:root[data-theme=dark] .search-input{background:#153144;color:#f0f7ff}:root[data-theme=dark] .backgrounds button{background:#153144;color:#f0f7ff}
@media(min-width:700px){.hero{min-height:220px}.app-shell{border-radius:25px;min-height:calc(100dvh - 48px);background-attachment:scroll}.bottom-nav{max-width:520px}}@media(max-width:340px){.hero{padding-left:15px;padding-right:15px;min-height:200px}.list-card{gap:11px;padding:13px 12px;min-height:96px}.list-body strong{font-size:.9rem}.list-body p{font-size:.73rem}.list-icon,.list-icon svg{width:40px;min-width:40px}.module{min-height:130px}.backgrounds{grid-template-columns:repeat(2,minmax(0,1fr))}}

.assistant-panel h2>svg{width:19px;height:19px;flex:none}.list-body p{overflow-wrap:anywhere}.module-intro{overflow-wrap:anywhere}

.hero{isolation:auto}.brand{height:100px}.hero-top{min-height:105px}

/* Bestätigtes grünes Eifach-Logo: unveränderter Originalausschnitt. */
.brand{background:url('./assets/eifach-logo-green.png') center/contain no-repeat;width:164px;height:84px;mix-blend-mode:normal;margin-top:14px;border-radius:0}

.brand{background-image:url('./assets/eifach-logo-archiv.png');width:156px;height:103px;margin-top:0}