/* Responsive portal experience, 16 September 2026. */
:root{--spalte:1240px;--ink-3:#9caab5}
body{font-size:16px}
html{scroll-padding-top:76px}
main{padding-bottom:150px}
.top{padding-top:16px;padding-bottom:16px}
.brand{min-height:44px;display:flex;align-items:center}
.skip-content{position:fixed;top:-100px;left:16px;z-index:200;background:#ff9a5c;color:#111;padding:12px 18px;border-radius:8px}
.skip-content:focus{top:12px}
.welcome{padding:52px 0 42px;max-width:800px}
.welcome-label{color:#9bc4d9;font-size:12px;letter-spacing:1.8px;font-weight:700}
.welcome h1{font:600 clamp(36px,5.5vw,68px)/1.1 var(--sora);letter-spacing:-.05em;margin:18px 0 24px}
.welcome>p:not(.welcome-label){max-width:580px;color:#b5c2cc;font-size:18px;line-height:1.7;margin-bottom:26px}
.welcome .knopf-voll{display:inline-flex;gap:25px;align-items:center;text-decoration:none;color:#10161c;background:#ff9a5c;min-height:48px;padding:12px 20px}
.welcome-link{display:block;width:fit-content;padding:14px 0;color:#b8d6e5;text-underline-offset:5px}
#view-start .melden{margin-top:40px;max-width:760px}
.karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.karte{aspect-ratio:auto;min-height:360px;border-radius:20px}
.karte-kopf{padding:20px 18px 0;gap:12px}
.karte-kopf h2{font-size:21px;line-height:1.3;overflow-wrap:anywhere}
.karte .stern{width:44px;height:44px}
.karte-bild{height:230px;flex:0 0 230px;padding:12px 18px}
.karte-bild img{object-fit:contain}
.karte-text{padding:0 20px 22px}
.karte-text:empty{padding-bottom:12px}
.karte-text .unter{font-size:15px;line-height:1.5}
.karte-text .fuss,.karte-text .treffer{font-size:13px;line-height:1.5;color:#a8b6c0;white-space:normal}
.karte-open{color:inherit;text-decoration:none}
.karte-open:after{content:'';position:absolute;inset:0;z-index:1}
.karte .stern{position:relative;z-index:2}
.suchzeile{display:flex;align-items:center;gap:10px;margin:20px 0 12px}
.suchzeile label{flex:1;min-width:0}
.suchzeile input{font-size:16px;min-height:50px}
.rund{min-width:44px;min-height:44px}
.suchhinweis{color:#a8b6c0;font-size:14px}
.tabs{max-width:calc(100% - 24px);background:rgba(15,23,30,.96)}
.tabs .tab .l{display:inline;max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs .tab.is-an{color:#ffac7a;background:#ff9a5c15}
.tabs .tab{min-width:64px;min-height:48px}
.tabs .tab .zaehler{left:auto;right:5px}
.leer{padding:44px 24px;color:#b5c2cc;border-style:solid;background:#121c24}
.leer>.i{width:40px;height:40px;color:#8fbbd0;margin-bottom:12px}
.leer h2{color:#eef2f5;font-size:24px;line-height:1.3;margin:0 0 12px}
.leer p{max-width:460px;margin:0 auto 20px;overflow-wrap:anywhere}
.leer button,.leer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid #566d7a;background:#233642;color:#eef2f5;text-decoration:none}
.search-shortcuts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
#liste>.verweis{grid-column:1/-1;min-height:44px}
.ui-status{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:80;width:max-content;max-width:calc(100% - 32px);background:#243b49;color:#f4f7fa;border:1px solid #5f8093;border-radius:12px;padding:12px 18px;box-shadow:0 12px 35px #0006;pointer-events:none;opacity:0}
.ui-status.is-visible{opacity:1}
.overlay .blatt{max-height:85dvh;overflow-y:auto;overscroll-behavior:contain}
.m001-library .chapter{scroll-margin-top:90px}
.m001-library .chapter-nav a,.m001-library .library-model-controls button,.zurueck,.merken,.aktion{min-height:44px}
button,a,input,summary{touch-action:manipulation}
@media(min-width:1500px){.karten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:641px) and (max-width:980px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 body{font-size:17px}
 main{padding:0 max(18px,env(safe-area-inset-left)) calc(126px + env(safe-area-inset-bottom))}
 .top{padding:8px max(18px,env(safe-area-inset-left))}
 .welcome{padding:25px 0 26px}.welcome h1{font-size:clamp(34px,9.5vw,48px)}
 .welcome>p:not(.welcome-label){font-size:17px}.welcome-label{font-size:11px;letter-spacing:1.2px}
 .karten{grid-template-columns:minmax(0,1fr);gap:16px}
 .karte{min-height:0}.karte-kopf h2{font-size:22px}.karte-bild{height:225px;flex-basis:225px}
 .tabs{width:calc(100% - 24px);max-width:420px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px;border-radius:23px;bottom:calc(10px + env(safe-area-inset-bottom))}
 .tabs .tab{min-width:0;height:58px;flex-direction:column;justify-content:center;gap:4px;padding:5px 2px;border-radius:16px;font-size:10px;line-height:1.2}
 .tabs .tab .l{display:block;max-width:100%}.tabs .tab .i{width:22px;height:22px}
 .tabs .tab .zaehler{top:0;right:2px;font-size:10px}
 .overlay{align-items:flex-end;padding:0}.overlay .blatt{width:100%;max-width:none;border-radius:24px 24px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom))}
 .overlay input{font-size:17px;min-height:48px}.dialog-knoepfe button{min-height:48px}
 .ui-status{bottom:calc(94px + env(safe-area-inset-bottom));font-size:14px}
 .m001-library .chapter-nav nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
 .m001-library .chapter-nav nav a{flex:none;white-space:nowrap;scroll-snap-align:start;display:flex;align-items:center}
 .m001-library .buehne canvas{height:clamp(280px,47svh,390px)}
}
@media(hover:none){.karte:hover{transform:none}.karte:hover .karte-bild img{transform:none}}
@media(prefers-reduced-motion:no-preference){.ui-status{transition:opacity .18s}.overlay:not([hidden]) .blatt{animation:sheet-in .2s ease-out}@keyframes sheet-in{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}}