/* SCHRIFTEN VOM EIGENEN SERVER */ @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap; src:url("/fonts/Inter-Regular.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap; src:url("/fonts/Inter-Medium.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap; src:url("/fonts/Inter-SemiBold.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap; src:url("/fonts/Inter-Bold.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap; src:url("/fonts/Inter-ExtraBold.woff2") format("woff2")} @font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap; src:url("/fonts/Fraunces-Medium.woff2") format("woff2")} @font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap; src:url("/fonts/Fraunces-SemiBold.woff2") format("woff2")} :root{ --ink:#080D18; --ink2:#101A2E; --paper:#fff; --line:#E4E8F0; --line2:#F1F4F9; --wash:#F8FAFC; --muted:#65718A; --muted2:#98A2B7; --brand:#3B3AA8; --brand2:#6E5BE8; --brandSoft:#EFEEFE; --teal:#0E7C86; --gold:#A87A12; --rose:#B3123C; --r1:22px; --r2:15px; --r3:11px; --sh1:0 1px 2px rgba(8,13,24,.05),0 6px 20px rgba(8,13,24,.07); --sh2:0 2px 6px rgba(8,13,24,.08),0 22px 54px rgba(8,13,24,.19); } *{box-sizing:border-box} /* Safari vergroessert Text in schmalen Spalten eigenmaechtig. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ margin:0;color:var(--ink); font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; font-feature-settings:"tnum","cv02","cv03"; background: radial-gradient(1200px 680px at 8% -12%,#2B2C7A 0%,transparent 58%), radial-gradient(950px 600px at 96% 2%,#0C4E63 0%,transparent 55%), radial-gradient(700px 500px at 50% 110%,#241F5C 0%,transparent 60%), linear-gradient(175deg,#080D18 0%,#0E1729 50%,#070C16 100%); background-attachment:fixed;min-height:100vh;padding:32px 15px 70px; -webkit-font-smoothing:antialiased } .wrap{max-width:960px;margin:0 auto} /* ============ MASTHEAD ============ */ #spendeBanner:not(:empty){margin:-32px -15px 26px} .spende{ display:block;position:relative;overflow:hidden;isolation:isolate; text-decoration:none;padding:11px 0; background: radial-gradient(150% 200% at 50% -70%,rgba(242,214,123,.15) 0%,transparent 60%), linear-gradient(90deg,#0E0B1C 0%,#191231 26%,#221739 50%,#191231 74%,#0E0B1C 100%); border-top:1px solid rgba(242,214,123,.16); border-bottom:1px solid rgba(242,214,123,.26); box-shadow:0 12px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06); animation:spRise .7s cubic-bezier(.2,.9,.2,1) both; transition:border-color .25s,box-shadow .25s,transform .18s} @keyframes spRise{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} .spende:hover{border-bottom-color:rgba(242,214,123,.6); box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)} .spende:active{filter:brightness(1.07)} .spende:active .sp-btn{transform:translateY(1px) scale(.97)} /* langsam wandernder Lichtschein */ .sp-glanz{position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(105deg,transparent 40%,rgba(242,214,123,.14) 50%,transparent 60%); transform:translateX(-120%);animation:spGlanz 9s ease-in-out infinite 1.5s} @keyframes spGlanz{0%,70%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}} .sp-bild{position:absolute;top:0;bottom:0;left:0;z-index:0;pointer-events:none;display:none; width:calc(100% + var(--sp-kachel,240px)); background-repeat:repeat-x;background-size:auto 100%;background-position:0 center; opacity:.6;will-change:transform; animation:spBild 14s linear infinite} @keyframes spBild{from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--sp-kachel,240px)))}} .spende.mit-bild .sp-bild{display:block} .spende.mit-bild::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,rgba(9,7,18,.9) 0%,rgba(9,7,18,.6) 28%, rgba(9,7,18,.55) 50%,rgba(9,7,18,.6) 72%,rgba(9,7,18,.9) 100%)} /* Anhalten NUR mit echter Maus. Auf dem Handy bleibt der :hover-Zustand nach einem Tippen hängen — die Schleife stand danach für immer still. */ @media (hover:hover) and (pointer:fine){ .spende:hover .sp-bild{animation-play-state:paused}} .sp-rand{position:absolute;top:0;bottom:0;width:56px;pointer-events:none;z-index:3} .sp-rand.l{left:0;background:linear-gradient(90deg,#0E0B1C 0%,rgba(14,11,28,0) 100%)} .sp-rand.r{right:0;background:linear-gradient(270deg,#0E0B1C 0%,rgba(14,11,28,0) 100%)} /* die Schleife: der zweite Satz ist eine exakte Kopie des ersten, deshalb ist der Sprung bei -50 % unsichtbar. */ .profil-spende-wrap{margin:14px -25px 0;overflow:hidden;border-radius:0;box-shadow:0 8px 24px rgba(0,0,0,.14)} .profil-spende{border-radius:0!important;margin:0!important} .sp-band{display:flex;position:relative;z-index:1; width:-webkit-max-content;width:max-content; animation:spLauf 40s linear infinite;will-change:transform} @keyframes spLauf{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (hover:hover) and (pointer:fine){ .spende:hover .sp-band{animation-play-state:paused}} .sp-stk{display:inline-flex;align-items:center;gap:13px;padding-right:54px;white-space:nowrap} .sp-tasse{width:29px;height:29px;flex-shrink:0;color:#F2D67B;animation:spWippe 3.8s ease-in-out infinite} .sp-tasse svg{width:100%;height:100%;display:block} @keyframes spWippe{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-2px)}} .sp-dampf{animation:spDampf 2.6s ease-in-out infinite} @keyframes spDampf{0%,100%{opacity:.25;transform:translateY(1px)}50%{opacity:.95;transform:translateY(-1.5px)}} .sp-txt{display:inline-flex;align-items:baseline;gap:9px} .sp-txt b{color:#F6DFA0;font-size:.85rem;font-weight:800;letter-spacing:-.008em} .sp-txt i{color:#ADA0C8;font-size:.755rem;font-style:normal} .sp-pkt{width:4px;height:4px;border-radius:50%;background:rgba(242,214,123,.5);flex-shrink:0} .sp-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:7px; background:linear-gradient(135deg,#F6DFA0,#D9A93A);color:#2A1D02; padding:8px 16px;border-radius:999px;font-size:.775rem;font-weight:800;white-space:nowrap; animation:spPuls 2.8s ease-in-out infinite;transition:transform .2s,box-shadow .2s} @keyframes spPuls{0%,100%{box-shadow:0 3px 12px rgba(217,169,58,.28)} 50%{box-shadow:0 3px 22px rgba(242,214,123,.62)}} .spende:hover .sp-btn{transform:translateY(-1px) scale(1.04);box-shadow:0 8px 24px rgba(242,214,123,.62)} @media(max-width:560px){ #spendeBanner:not(:empty){margin:-22px -11px 20px} .spende{padding:9px 0} .sp-tasse{width:25px;height:25px} .sp-txt b{font-size:.79rem} .sp-txt i{font-size:.71rem} .sp-stk{gap:11px;padding-right:42px} .sp-btn{font-size:.73rem;padding:7px 14px} .sp-rand{width:34px}} @media (prefers-reduced-motion:reduce){ .spende,.sp-glanz,.sp-tasse,.sp-dampf,.sp-btn,.sp-band,.sp-bild{animation:none!important} .sp-band{width:100%;justify-content:center} .sp-stk{white-space:normal;flex-wrap:wrap;justify-content:center;padding:0 16px} .sp-stk+.sp-stk{display:none} .sp-rand{display:none}} .top{text-align:center;margin-bottom:24px;position:relative} .crest{width:50px;height:50px;margin:0 auto 13px;display:block;animation:drop .8s cubic-bezier(.2,.9,.2,1) both} @keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.86)}to{opacity:1;transform:none}} .top h1{ margin:0;font-size:clamp(1.55rem,4.4vw,2.1rem);font-weight:800;letter-spacing:-.036em; background:linear-gradient(96deg,#fff 12%,#B9C4E8 48%,#fff 84%); background-size:220% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:sweep 9s linear infinite } @keyframes sweep{to{background-position:220% center}} .top .hr{width:56px;height:2px;margin:12px auto 10px;border-radius:2px;background:linear-gradient(90deg,transparent,#8896CE,transparent)} .top .sup{margin:0;color:#9EABC8;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700} /* index scale ticker */ .ticker{display:flex;justify-content:center;gap:4px;margin-top:18px;align-items:flex-end} .tick{ width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center; font-size:.66rem;font-weight:800;color:#fff;opacity:.3; animation:glow 6.2s ease-in-out infinite;cursor:default } @keyframes glow{ 0%,76%,100%{opacity:.3;transform:translateY(0) scale(1);filter:none} 6%{opacity:1;transform:translateY(-6px) scale(1.2);filter:drop-shadow(0 0 13px currentColor)} 18%{opacity:.3;transform:translateY(0) scale(1)} } /* ============ CONSOLE ============ */ .beacon{display:block;width:100%;margin:0 0 15px;padding:0;border:none;cursor:pointer;background:none; position:relative;border-radius:20px;overflow:hidden;font:inherit;text-align:left; animation:rise .6s cubic-bezier(.2,.9,.2,1) both .04s} .bglow{position:absolute;inset:0;border-radius:20px; background:linear-gradient(115deg,#3A2E9E,#6D4FE0 26%,#2E86B8 52%,#6D4FE0 78%,#3A2E9E); background-size:280% 100%;animation:beam 13s linear infinite} @keyframes beam{to{background-position:280% 0}} .beacon::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -18px 34px rgba(0,0,0,.24);z-index:2} .bin{position:relative;z-index:3;display:flex;align-items:center;gap:14px;padding:17px 19px;color:#fff} .bic{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24); animation:hover2 4.4s ease-in-out infinite} @keyframes hover2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-5deg)}} .btx{flex:1;min-width:0} .bt1{display:block;font-size:1.03rem;font-weight:800;letter-spacing:-.022em;margin-bottom:2px} .bt2{display:block;font-size:.735rem;opacity:.82;font-weight:600} .barr{flex-shrink:0;opacity:.85;transition:transform .25s cubic-bezier(.2,1.4,.3,1)} .beacon:hover .barr{transform:translateX(5px)} .beacon:active{transform:scale(.988)} @media(max-width:520px){.bt1{font-size:.94rem}.bt2{font-size:.7rem}} /* NRW-KARTE ÜBER DEN FILTERN */ .atlaskarte{position:relative;z-index:20;margin-bottom:0;border-radius:20px; background:var(--paper);border:1.5px solid var(--line);overflow:hidden; box-shadow:0 10px 30px rgba(8,13,24,.07); animation:rise .6s cubic-bezier(.2,.9,.2,1) both .04s} .mk-head{display:flex;align-items:center;gap:12px;padding:9px 14px 8px; border-bottom:1px solid var(--line);background:linear-gradient(#FCFDFF,#F6F8FC)} .mk-tx{min-width:0;flex:1} .mk-tx b{display:block;font-size:.815rem;font-weight:800;letter-spacing:-.015em;color:var(--ink)} .mk-tx i{display:block;font-size:.665rem;font-style:normal;color:var(--muted2); margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mk-leg{display:flex;align-items:center;gap:4px;font-size:.615rem;color:var(--muted2); font-weight:700;flex-shrink:0} .mk-leg i{width:10px;height:10px;border-radius:50%;display:inline-block; box-shadow:0 0 0 1px rgba(255,255,255,.9) inset} .mk-leg span{white-space:nowrap} .mk-map{height:300px;background:#EDF1F6;position:relative} .mk-map .leaflet-bottom{bottom:112px} .mk-map .leaflet-container{height:100%;width:100%;font:inherit;background:#EDF1F6} /* Leaflets eigene Bedienelemente an das übrige Bild angleichen. */ .mk-map .leaflet-control-zoom a{border-radius:8px;color:var(--ink);border-color:var(--line)} .mk-map .leaflet-control-attribution{font-size:.58rem;background:rgba(255,255,255,.82)} @media(max-width:640px){ .mk-map{height:236px} .mk-map .leaflet-bottom{bottom:52px} .mk-leg span:last-of-type{display:none} .mk-head{padding:10px 13px 9px} } @media(max-width:430px){ .mk-leg{display:none} } /* Der Filterbereich liegt als schwebendes Glaspanel ueber dem unteren Rand der Karte. */ .console{ position:relative;z-index:30; margin:-104px 16px 10px;border-radius:18px;padding:0; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(16px) saturate(1.45); backdrop-filter:blur(16px) saturate(1.45); border:1px solid rgba(255,255,255,.72); box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 0 0 1px rgba(20,32,60,.07), 0 14px 34px rgba(8,13,24,.22); animation:rise .6s cubic-bezier(.2,.9,.2,1) both .08s } @media(max-width:640px){ .console{margin:-40px 8px 10px;border-radius:16px} } /* Unter 560px oeffnet der Profilfilter seine Liste mit position:fixed. */ @media(max-width:560px){ .console{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)} } @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .console-in{padding:11px 12px 12px} .searchbar{position:relative;margin-bottom:8px} .searchbar input{ width:100%;padding:12px 14px 12px 42px;border-radius:13px;border:1.5px solid #D4DAE6; background:#fff;font:inherit;font-size:.93rem;color:var(--ink);outline:none;font-weight:600; transition:border-color .2s,box-shadow .2s,background .2s } .searchbar input::placeholder{color:var(--muted2)} .searchbar input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(59,58,168,.1)} .searchbar .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;transition:color .2s} .searchbar input:focus~.mag{color:var(--brand)} .searchbar .clr{ position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:var(--line2); width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--muted);display:none; align-items:center;justify-content:center;font-size:.85rem } .searchbar .clr.on{display:flex} .scope{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px} .sc{ border:1.5px solid var(--line);background:var(--wash);color:var(--muted); padding:6px 12px;border-radius:999px;font:inherit;font-size:.735rem;font-weight:700;cursor:pointer; transition:all .18s } .sc:hover{border-color:#CBD3E2;color:#48536B} .sc.on{background:var(--ink);border-color:var(--ink);color:#fff} /* select pills */ .selects{display:flex;gap:8px;flex-wrap:wrap} .sel{position:relative;flex:1 1 165px;min-width:0} .sel label{ position:absolute;top:7px;left:14px;font-size:.6rem;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:#5B6880;pointer-events:none;transition:color .2s;z-index:4 } .sel select{ width:100%;padding:21px 32px 8px 13px;border-radius:var(--r2);border:1.5px solid var(--line); background:var(--wash);font:inherit;font-size:.85rem;font-weight:600;color:var(--ink); cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;transition:all .18s } .sel select:hover{border-color:#CBD3E2} .sel select:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(59,58,168,.09)} .sel:focus-within label{color:var(--brand)} .sel .cv{position:absolute;right:13px;top:50%;transform:translateY(-25%);color:var(--muted2);pointer-events:none;transition:transform .28s cubic-bezier(.2,.9,.2,1)} .sel.open .cv{transform:translateY(-25%) rotate(180deg);color:var(--brand)} .console .sel select{padding:18px 30px 6px 12px;border-radius:12px;font-size:.82rem;min-height:46px} .console .sel label{top:6px;left:12px;font-size:.565rem} .console .sel .cv{right:11px} /* Schwerpunkt-/Profilfilter: ersetzt die alte Sortierung. Mehrfachauswahl = ODER. */ .pf{position:relative;width:100%} .pf .pf-btn{padding:22px 13px 9px} .pf .pf-btn .xs-cv{transform:translateY(3px)} .pf.open .pf-btn{border-color:var(--brand);background:#fff; box-shadow:0 0 0 4px rgba(59,58,168,.1)} .pf.open .pf-btn .xs-cv{transform:translateY(3px) rotate(180deg);color:var(--brand)} /* Die Liste bleibt wie sie ist — nur der Abstand wie bei .xs-pop, und die hohe Ebene, damit sie über der Karte darüber liegt. */ .pf-pop{z-index:950!important;padding:6px!important;max-height:min(62vh,410px);overflow:auto} .pf-grp{padding:7px 8px 4px;font-size:.59rem;font-weight:900;letter-spacing:.095em; text-transform:uppercase;color:#7A8498} .pf-opt{display:flex;align-items:center;gap:9px;padding:9px 9px;border-radius:9px; cursor:pointer;font-size:.78rem;font-weight:700;color:var(--ink);user-select:none} .pf-opt:hover{background:var(--brandSoft);color:var(--brand)} .pf-box{width:17px;height:17px;border:1.6px solid #BAC2D1;border-radius:5px;display:flex; align-items:center;justify-content:center;flex-shrink:0;background:#fff} .pf-opt.on .pf-box{background:var(--brand);border-color:var(--brand);color:#fff} .pf-opt.on{background:#F4F2FF;color:#2F2E91} .pf-count{margin-left:auto;font-size:.62rem;color:var(--muted2);font-weight:800} @media(max-width:560px){.pf-pop{position:fixed!important;left:12px!important;right:12px!important; top:auto!important;bottom:16px!important;max-height:70vh!important;z-index:1500!important}} /* eigenes Auswahlfeld */ .xs{position:relative;width:100%} .xs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; text-align:left;font:inherit;cursor:pointer;border-radius:var(--r2); border:2px solid #D4DAE6;background:#fff;color:var(--ink); padding:12px 13px;font-size:.87rem;font-weight:700;transition:all .18s;min-height:50px; box-shadow:0 1px 3px rgba(8,13,24,.07)} .xs-lab .xs-btn{padding:22px 13px 9px} .xs-btn:hover{border-color:#A9B4CC;background:#F7F9FC} .xs.open .xs-btn{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(59,58,168,.1)} .xs-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xs-cv{flex-shrink:0;color:var(--muted2);transition:transform .28s cubic-bezier(.2,.9,.2,1)} .xs.open .xs-cv{transform:rotate(180deg);color:var(--brand)} .xs-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:200; background:#fff;border:1.5px solid var(--line);border-radius:var(--r2); box-shadow:0 20px 50px rgba(8,13,24,.26);padding:6px; display:none;animation:xsIn .22s cubic-bezier(.2,.9,.2,1) both} @keyframes xsIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .xs.open .xs-pop{display:block} .pf.open .xs-pop{display:block} .pf.open .xs-cv{transform:rotate(180deg);color:var(--brand)} .xs-oben{position:relative;z-index:90} .xs-list{max-height:238px;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;touch-action:pan-y} .xs-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .xs-opt{touch-action:manipulation} .xs-search{width:100%;padding:9px 11px;border-radius:9px;border:1.5px solid var(--line); font:inherit;font-size:.8rem;margin-bottom:5px;outline:none;background:var(--wash);color:var(--ink)} .xs-search:focus{border-color:var(--brand);background:#fff} .xs-opt{padding:11px 12px;border-radius:9px;font-size:.84rem;font-weight:600;cursor:pointer; -webkit-tap-highlight-color:transparent; display:flex;align-items:center;justify-content:space-between;gap:8px; color:var(--ink);transition:background .14s,color .14s} .xs-opt:hover,.xs-opt:active{background:var(--brandSoft);color:var(--brand)} .xs-opt.sel2{background:var(--brand);color:#fff} .xs-opt .tick{opacity:0;flex-shrink:0;transition:opacity .16s} .xs-opt.sel2 .tick{opacity:1} .xs-empty{padding:11px;font-size:.8rem;color:var(--muted2);text-align:center} .sel label{z-index:3} .mbox.quest .sel label{color:#6B6394;z-index:5} .mbox.quest .sel{position:relative} .mbox.quest .xs-search::placeholder{color:#8A82B8} .mbox.quest .q{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)} .mbox.quest textarea,.mbox.quest input[type=text]{background:#fff!important; border:2px solid #C9C2EE!important;color:#1A1140!important;font-weight:600} .mbox.quest textarea::placeholder,.mbox.quest input[type=text]::placeholder{color:#8A82B8} .mbox.quest textarea:focus,.mbox.quest input[type=text]:focus{border-color:#8B6BF5!important} .mbox.quest .xs-btn{background:#fff;color:#14103A;font-weight:700; border:2px solid #B4A8E8;border-radius:14px;min-height:58px; box-shadow:0 3px 0 rgba(10,6,30,.35),0 12px 26px rgba(0,0,0,.38)} .mbox.quest .xs-lab .xs-btn{padding:25px 14px 11px} .mbox.quest .xs-btn:hover{background:#F6F3FF;border-color:#8B6BF5} .mbox.quest .xs-btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(10,6,30,.35),0 7px 16px rgba(0,0,0,.34)} .mbox.quest .xs.open .xs-btn{border-color:#7C5CF0;background:#fff; box-shadow:0 0 0 4px rgba(124,92,240,.42),0 12px 26px rgba(0,0,0,.38)} .mbox.quest .xs-val{color:#14103A} .mbox.quest .xs-cv{color:#5B3FD6} .mbox.quest .sel label{color:#584C9E} .mbox.quest .xs-pop{background:#fff;border:2px solid #B4A8E8;border-radius:14px;padding:7px; box-shadow:0 30px 70px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.1)} .mbox.quest .xs-list{max-height:min(44vh,300px)} .mbox.quest .xs-opt{color:#1B1440;font-size:.9rem;padding:14px 13px;font-weight:600; min-height:48px;border-radius:11px} .mbox.quest .xs-opt+.xs-opt{box-shadow:inset 0 1px 0 #ECE7FA} .mbox.quest .xs-opt:hover{background:#EEEAFD;color:#4A2FBF} .mbox.quest .xs-opt:active{background:#DBD1FA;color:#3B23A8} .mbox.quest .xs-opt.sel2{background:linear-gradient(135deg,#7C5CF0,#5B3FD6);color:#fff;box-shadow:none} .mbox.quest .xs-search{background:#fff;border:2px solid #B4A8E8;color:#14103A; font-size:.9rem;padding:13px 13px;border-radius:11px;margin-bottom:7px} .mbox.quest .xs-search:focus{border-color:#7C5CF0;box-shadow:0 0 0 3px rgba(124,92,240,.24)} .mbox.quest .xs-empty{color:#6B6394;padding:14px} /* Schmale Statuszeile direkt ueber der Ergebnisliste statt einer eigenen Box: Trefferzahl links, Merkliste als kleiner Schalter rechts. */ .meterrow{display:flex;align-items:center;gap:6px 11px;flex-wrap:wrap; margin:0 4px 9px;min-height:26px} .strip{display:flex;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(8,13,24,.07)} .strip i{width:16px;height:9px;display:block;transition:transform .3s} .strip:hover i{transform:scaleY(1.5)} .hintline{font-size:.685rem;color:#8794B4;font-weight:600} .hintline b{color:#B9AEFF;font-weight:800} .count{ color:#D3DCEF;font-size:.775rem;font-weight:700;letter-spacing:-.005em; transition:transform .25s } .count.bump{animation:bump .35s cubic-bezier(.2,1.6,.4,1)} @keyframes bump{50%{transform:scale(1.13)}} .tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;align-items:center} /* Merkliste als kompakter Schalter in der Statuszeile. */ .favchip{margin-left:auto;position:relative;display:inline-flex;align-items:center;gap:6px; cursor:pointer;padding:5px 11px;border-radius:999px;user-select:none; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08); color:#D6DEEF;font-size:.715rem;font-weight:700;transition:all .18s; -webkit-tap-highlight-color:transparent} .favchip:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)} .favchip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .favchip .fc-st{font-size:.85rem;line-height:1;transition:color .18s} .favchip input:checked~.fc-st{color:#F0B429} .favchip b{font-weight:800;font-variant-numeric:tabular-nums;opacity:.72} .favchip:has(input:checked){background:#EFEEFE;border-color:#C4C2F6;color:var(--brand)} .tl{ display:inline-flex;align-items:center;gap:6px;background:var(--wash);border:1.5px solid var(--line); color:#414C63;padding:8px 13px;border-radius:var(--r3);font:inherit;font-size:.755rem;font-weight:700; cursor:pointer;transition:all .18s } .tl:hover{background:#EEF1F6;border-color:#CBD3E2;transform:translateY(-1px)} .tl:active{transform:scale(.96)} .tl.on{background:var(--brandSoft);border-color:#C4C2F6;color:var(--brand)} .tl.hero{ background:linear-gradient(135deg,var(--brand2),var(--brand));border-color:transparent;color:#fff; box-shadow:0 5px 16px rgba(59,58,168,.3) } .tl.hero:hover{box-shadow:0 9px 22px rgba(59,58,168,.4)} .swi{margin-left:auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.775rem;font-weight:700;color:#414C63;user-select:none} .swi input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer} /* ============ PANEL / LIST ============ */ .panel{background:var(--paper);border-radius:var(--r1);padding:19px 21px;margin-bottom:16px;box-shadow:var(--sh2);animation:rise .35s cubic-bezier(.2,.9,.2,1) both;position:relative;z-index:2} .panel h3{margin:0 0 3px;font-size:.94rem;font-weight:800;letter-spacing:-.014em} .panel .sb{margin:0 0 14px;font-size:.75rem;color:var(--muted)} .db{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:.75rem} .db .k{width:58px;flex-shrink:0;color:#4B5570;font-weight:700} .db .tr{flex:1;background:var(--line2);border-radius:999px;height:15px;overflow:hidden} .db .fl{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.2,.9,.25,1)} .db .n{width:42px;text-align:right;color:var(--muted);font-weight:800} .tipbar{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#D9E1F2;padding:11px 15px;border-radius:var(--r2);font-size:.79rem;margin-bottom:11px;text-align:center} .list{display:flex;flex-direction:column;gap:9px;position:relative;z-index:1} .row{ background:var(--paper);border-radius:var(--r2);padding:13px 15px;display:flex;align-items:center;gap:12px; box-shadow:var(--sh1);cursor:pointer;border:1px solid transparent;position:relative;overflow:visible; transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-color .18s; animation:rowIn .4s cubic-bezier(.2,.9,.2,1) both } .row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bc,transparent); border-radius:var(--r2) 0 0 var(--r2);transform:scaleY(0);transition:transform .22s} .row:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#DDE2ED} .row:hover .mk{transform:scale(1.05) rotate(-2deg)} .mk{transition:transform .22s cubic-bezier(.2,1.3,.3,1)} .row:hover::before{transform:scaleY(1)} @keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Feste Spaltenbreite: Zeilen mit und ohne Sticker stehen exakt bündig. */ .mkwrap{flex-shrink:0;width:52px;display:flex;flex-direction:column;align-items:center;gap:3px; overflow:visible;position:relative;z-index:3} .minisk{display:grid;grid-auto-flow:row;justify-items:center;align-items:end; width:max-content;max-width:240px;margin-bottom:2px;overflow:visible;position:relative;z-index:4} .minisk>.msk{grid-area:1/1} .minisk[data-n="1"]>.msk{position:relative} .minisk[data-n]:not([data-n="1"])>.msk{ animation:none; opacity:0;pointer-events:none; transform:translateY(3px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.2,1)} .minisk[data-n]:not([data-n="1"])>.msk.zeig{ opacity:1;pointer-events:auto; transform:none} /* Der Sticker darf über die 52px-Spalte hinausragen, ohne sie zu verbreitern — dadurch bleibt die Liste bündig UND der Text vollständig lesbar. */ .msk{display:inline-flex;align-items:center;justify-content:center; font-family:"Georgia","Times New Roman",serif;font-style:italic;font-weight:700; font-size:.405rem;letter-spacing:.002em;color:#fff;padding:3px 7px; border-radius:3px 12px 4px 13px/12px 3px 13px 4px; white-space:nowrap;width:max-content;max-width:none; box-shadow:0 4px 11px rgba(8,13,24,.4),inset 0 1px 0 rgba(255,255,255,.3); position:relative;transform:rotate(-5deg); animation:mskIn .5s cubic-bezier(.2,1.4,.35,1) both} .msk::before{content:'';position:absolute;inset:2px;border:1px dashed rgba(255,255,255,.45); border-radius:2px 9px 3px 10px/9px 2px 10px 3px;pointer-events:none} .msk:nth-child(2){transform:rotate(3.5deg)} @media(prefers-reduced-motion:reduce){ .minisk[data-n]:not([data-n="1"])>.msk{transition:none}} /* Damit die Spalte beim Wechsel nicht in der Breite springt, richtet sich die Gruppe nach dem breitesten Sticker — das leistet das Raster von selbst, weil alle im selben Feld liegen. */ @keyframes mskIn{from{opacity:0;transform:translateY(-4px) scale(.85)}to{opacity:1;transform:none}} .msk.fs{background:linear-gradient(135deg,#B5372E,#7E1A15)} .msk.eu{background:linear-gradient(135deg,#2E4FBF,#16307F)} .msk.mo{background:linear-gradient(135deg,#7B3BB0,#4E1F78)} .msk.ta{background:linear-gradient(135deg,#C79115,#8A6009)} .msk.zu{background:linear-gradient(135deg,#12916B,#0A6046)} .msk.mi{background:linear-gradient(135deg,#087D68,#075848)} .msk.dg{background:linear-gradient(135deg,#116AA0,#0A466B)} .msk.sp{background:linear-gradient(135deg,#D16A19,#8B3D08)} .msk.mus{background:linear-gradient(135deg,#A63E77,#6D2450)} .msk.wa{background:linear-gradient(135deg,#725638,#48351F)} .mk{flex-shrink:0;width:48px;height:48px;border-radius:13px;display:flex;flex-direction:column;text-decoration:none; align-items:center;justify-content:center;color:#fff;position:relative; /* Der Lichtwisch darf die Kachel nicht verlassen */ overflow:hidden;isolation:isolate} .mk .v{font-size:1.24rem;font-weight:800;line-height:1} .mk .c{font-size:.44rem;font-weight:800;letter-spacing:.09em;opacity:.8;margin-top:2px;position:relative;z-index:3} .mk::after{content:'';position:absolute;inset:0;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -9px 16px rgba(0,0,0,.14)} .mk .v{animation:breathe 3.4s ease-in-out infinite;position:relative;z-index:3} @keyframes breathe{0%,100%{text-shadow:0 0 4px rgba(255,255,255,.3)} 50%{text-shadow:0 0 12px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.5)}} .mk::before{content:'';position:absolute;inset:0;border-radius:13px;z-index:2; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%); transform:translateX(-130%);animation:shine 7s ease-in-out infinite} @keyframes shine{0%,80%{transform:translateX(-130%)}93%,100%{transform:translateX(130%)}} .mk.nosi{background:linear-gradient(150deg,#5A6478,#3C4356)!important} .mk.nosi::before{animation:shine 9s ease-in-out infinite; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%)} .rm{flex:1;min-width:0;text-decoration:none;color:inherit} .rm .t{font-weight:700;font-size:.945rem;margin:0 0 3px;letter-spacing:-.014em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rm .m{margin:0;font-size:.755rem;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pl{background:var(--brandSoft);color:var(--brand);padding:2px 8px;border-radius:999px;font-weight:700;font-size:.685rem} .pl.g{background:#E6F5EF;color:#0B6B4F} .pl.y{background:#FBF2DE;color:var(--gold)} .pl.b{background:#E4F1F5;color:var(--teal)} .fv{background:none;border:none;cursor:pointer;font-size:1.1rem;color:#D6DAE4;flex-shrink:0;padding:4px;line-height:1;transition:transform .18s,color .18s} .fv.on{color:#DFA529} .fv:hover{transform:scale(1.22) rotate(8deg)} .void{text-align:center;color:#9AA6C0;padding:54px 20px} /* ============ SHEET ============ */ .veil{position:fixed;inset:0;background:rgba(4,7,15,.66);backdrop-filter:blur(7px);display:none;align-items:flex-start;justify-content:center;padding:16px;z-index:60;overflow-y:auto} .veil.open{display:flex;animation:fade .22s} .veil{padding-top:34px} @media(max-width:560px){.veil{padding-top:26px}} @keyframes fade{from{opacity:0}to{opacity:1}} .sheet{background:var(--paper);border-radius:26px;max-width:480px;width:100%;padding:30px 25px 26px;position:relative;box-shadow:0 44px 96px rgba(0,0,0,.5);animation:pop .38s cubic-bezier(.2,.95,.25,1);margin:20px 0} @keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}} .sx,.sfv{position:absolute;top:14px;width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s} .sx{right:14px;background:var(--line2);color:var(--muted)} .sx:hover{background:var(--line);transform:rotate(90deg)} .sfv{left:14px;background:transparent;font-size:1.2rem;color:#D6DAE4} .sfv.on{color:#DFA529} .sfv:hover{transform:scale(1.2)} .badges{position:absolute;top:-19px;left:-11px;right:44px;display:flex;flex-wrap:wrap;gap:7px;z-index:5; align-items:flex-start} .badges:empty{display:none} .bdg.multi{flex-direction:column;align-items:flex-start;gap:3px;padding:11px 18px 12px} .bdg.multi .mh{font-size:.6rem;font-style:normal;letter-spacing:.13em;text-transform:uppercase;opacity:.82;font-family:"Inter",sans-serif;font-weight:800} .bdg.multi .ml{font-size:.83rem;line-height:1.35} .bdg{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;color:#fff; font-family:"Georgia","Times New Roman",serif;font-size:.9rem;font-weight:700;font-style:italic; letter-spacing:.01em;text-transform:none;position:relative; border-radius:4px 19px 5px 20px/19px 4px 20px 5px; box-shadow:0 11px 28px rgba(8,13,24,.46),inset 0 1px 0 rgba(255,255,255,.3); animation:bdgIn .6s cubic-bezier(.2,1.5,.35,1) both,tilt 7s ease-in-out infinite; transform-origin:center} .bdg:nth-child(1){--rot:-6deg}.bdg:nth-child(2){--rot:4.5deg}.bdg:nth-child(3){--rot:-3deg} .bdg::before{content:'';position:absolute;inset:3px;border:1.5px dashed rgba(255,255,255,.42); border-radius:2px 11px 3px 12px/11px 2px 12px 3px;pointer-events:none} .bdg .seal{width:17px;height:17px;flex-shrink:0;opacity:.92} .bdg .seal svg{width:17px;height:17px} @keyframes bdgIn{from{opacity:0;transform:translateY(-14px) rotate(0) scale(.8)} to{opacity:1;transform:rotate(var(--rot,-5deg))}} @keyframes tilt{0%,100%{transform:rotate(var(--rot,-5deg))} 50%{transform:rotate(calc(var(--rot,-5deg) * .55)) translateY(-2px)}} .bdg svg{flex-shrink:0} .bdg .seal{color:#fff} .bdg.fs{background:linear-gradient(135deg,#B5372E,#7E1A15)} .bdg.zu{background:linear-gradient(135deg,#12916B,#0A6046)} .bdg.pv{background:linear-gradient(135deg,#4A4F63,#23283A)} .bdg:nth-child(4){--rot:5deg}.bdg:nth-child(5){--rot:-4deg} .bdg.eu{background:linear-gradient(135deg,#2E4FBF,#16307F)} .bdg.zu{background:linear-gradient(135deg,#12916B,#0A6046)} .bdg.ta{background:linear-gradient(135deg,#C79115,#8A6009)} .bdg.mo{background:linear-gradient(135deg,#7B3BB0,#4E1F78)} .bdg.mi{background:linear-gradient(135deg,#087D68,#075848)} .bdg.dg{background:linear-gradient(135deg,#116AA0,#0A466B)} .bdg.sp{background:linear-gradient(135deg,#D16A19,#8B3D08)} .bdg.mus{background:linear-gradient(135deg,#A63E77,#6D2450)} .bdg.wa{background:linear-gradient(135deg,#725638,#48351F)} a.bdg{text-decoration:none;color:#fff} a.bdg:hover{filter:brightness(1.08);box-shadow:0 7px 19px rgba(8,13,24,.34)} .eyeb-btn{display:block;margin:4px auto 0;background:none;border:none;font-family:inherit;cursor:pointer; padding:5px 12px;border-radius:999px;transition:all .2s;color:var(--muted2); font-size:.635rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .eyeb-btn::after{content:'?';display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:50%;background:var(--line);color:var(--muted); font-size:.6rem;margin-left:7px;vertical-align:middle;transition:all .2s;letter-spacing:0} .eyeb-btn:hover{background:var(--brandSoft);color:var(--brand)} .eyeb-btn:hover::after{background:var(--brand);color:#fff} .sheet h2{margin:6px 0 3px;font-size:1.19rem;text-align:center;letter-spacing:-.022em;line-height:1.3} .place{color:var(--muted);font-size:.84rem;text-align:center;margin:0 0 13px} /* metric tiles */ /* DIE FUENF KACHELN UEBER DEM SOZIALINDEX */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:7px;margin-bottom:15px} .tile{ min-width:0; /* darf schrumpfen */ background:var(--wash);border:1px solid var(--line);border-radius:var(--r2); padding:9px 5px;text-align:center; display:flex;flex-direction:column;justify-content:center; animation:tileIn .45s cubic-bezier(.2,1.2,.3,1) both;transition:transform .18s,border-color .18s,background .18s } .tile:hover{transform:translateY(-3px);border-color:#C8D0E0;background:#fff} @keyframes tileIn{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}} .tile .tv{ font-size:clamp(.82rem,3.1vw,1.08rem);font-weight:800;line-height:1.12;color:var(--ink); min-width:0;overflow-wrap:anywhere;hyphens:auto } /* Wortwerte statt Zahlen: eine Stufe kleiner, damit "Öffentlich" auch in der schmalsten Kachel in eine Zeile passt. */ .tile.t-txt .tv{font-size:clamp(.7rem,2.4vw,.92rem);letter-spacing:-.01em} .tile.t-pv{background:#F6F2FB;border-color:#E2D5F0} .tile.t-pv .tv{color:#6B2E9E} .tile .tl2{ font-size:clamp(.5rem,1.7vw,.585rem);font-weight:800;letter-spacing:.045em; text-transform:uppercase;color:var(--muted2);margin-top:4px;line-height:1.25; min-width:0;overflow-wrap:anywhere;hyphens:auto } /* Sehr schmale Geraete: lieber zwei Reihen als gequetschte Kacheln. */ @media (max-width:400px){ .tiles{grid-template-columns:repeat(3,1fr);gap:6px} .tile{padding:8px 4px} } .dialw{position:relative;width:154px;height:154px;margin:0 auto 11px} .dialw svg{width:100%;height:100%;transform:rotate(-90deg)} .dbg{fill:none;stroke:var(--line2);stroke-width:12} .dfg{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.15s cubic-bezier(.2,.9,.25,1),stroke .4s} .dring{fill:none;stroke-width:1.5;opacity:.28;animation:halo 3.4s ease-in-out infinite} @keyframes halo{0%,100%{r:56;opacity:.28}50%{r:58;opacity:.06}} .dmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .dmid .n{font-size:2.25rem;font-weight:800;line-height:1} .dmid .l{font-size:.575rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.11em;margin-top:3px;font-weight:800} .verdict{display:block;text-align:center;padding:8px 17px;border-radius:999px;color:#fff;font-weight:700;font-size:.815rem;margin:0 auto 8px;width:fit-content;max-width:100%} .expl{ background:var(--wash);border:1px solid var(--line);border-radius:var(--r2);padding:0 16px; font-size:.755rem;color:var(--muted);line-height:1.68;max-height:0;overflow:hidden; transition:max-height .42s cubic-bezier(.2,.9,.2,1),padding .3s,margin .3s;margin-bottom:0 } .expl.show{max-height:560px;padding:15px 16px 18px;margin-bottom:14px} .expl b{color:var(--ink)} .expl .warn{color:var(--rose);font-weight:700} .explbtn{display:block;margin:0 auto 13px;background:none;border:none;color:var(--brand);font:inherit;font-size:.735rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px} .explbtn svg{transition:transform .3s} .explbtn.open svg{transform:rotate(180deg)} .blk{margin-top:13px} .blkh{display:flex;align-items:center;gap:7px;font-size:.635rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px} .blkh::after{content:'';flex:1;height:1px;background:var(--line)} .facts{background:var(--wash);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;font-size:.815rem;color:#4C5670;line-height:1.55} .fr{display:flex;gap:9px;align-items:flex-start;padding:5px 0} .fr svg{flex-shrink:0;margin-top:3px;color:var(--muted2)} .fr b{color:var(--ink);font-weight:700} .facts a{color:var(--brand);font-weight:600;text-decoration:none} .facts a:hover{text-decoration:underline} .authbtn{ margin-top:8px;width:100%;padding:9px;border-radius:var(--r3);border:1.5px solid #E4D3D8;background:#FFF6F8; color:var(--rose);font:inherit;font-size:.745rem;font-weight:700;cursor:pointer;transition:all .18s; display:flex;align-items:center;justify-content:center;gap:6px } .authbtn:hover{background:#FFECF0;transform:translateY(-1px)} .atlas{height:176px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);background:#EDF1F6} .leaflet-popup-content{font-size:.78rem;font-weight:600} .soft{margin-top:14px} .soft-h .cnt{background:var(--brandSoft);color:var(--brand);border-radius:999px; padding:1px 8px;font-size:.62rem;letter-spacing:0;margin-left:2px} .gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:5px; overflow:hidden;transition:max-height .4s cubic-bezier(.2,.9,.2,1)} .gg.fold{max-height:118px} .ggi{background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--brand2); border-radius:8px;padding:7px 10px;font-size:.755rem;font-weight:600;color:#414C63; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ggmore{margin-top:8px;background:none;border:none;color:var(--brand);font:inherit; font-size:.75rem;font-weight:700;cursor:pointer;padding:4px 0} .ggmore:hover{text-decoration:underline} /* ---- Bilingualer Unterricht: je Sprache eine Zeile */ .bili{display:flex;flex-direction:column;gap:7px} .bgrp{display:flex;align-items:stretch;gap:0;border-radius:11px;overflow:hidden; border:1px solid var(--line);background:#FCFDFF; animation:bgIn .45s cubic-bezier(.2,.9,.2,1) both} @keyframes bgIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}} .bsp{flex-shrink:0;display:flex;align-items:center;padding:9px 13px; background:#F4F5FB;color:#3A3A86; font-size:.74rem;font-weight:800;letter-spacing:-.01em; border-right:1px solid var(--line);position:relative} .bfs{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px;align-content:center; padding:8px 11px;background:transparent} .bfs .bx{background:transparent;border:none;color:#414C63; padding:2px 0;font-size:.735rem;font-weight:600} /* Trennung durch einen Punkt statt durch Kacheln — das liest sich flüssiger und macht die Zeile deutlich leiser. */ .bfs .bx+.bx::before{content:'·';color:var(--muted2);margin-right:7px;font-weight:700} .bfs .bx.leer{color:var(--muted2);font-weight:500;font-style:italic} /* ---- Fremdsprachen: Beginn als eigene Marke ---- Die Stufe steht vorn, so lässt sich die Sprachenfolge von oben nach unten lesen. "EF" steht dort gleichwertig neben "5". */ .spr{display:flex;flex-wrap:wrap;gap:6px} /* WICHTIG: eigener Klassenname. */ .sprx{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line); background:#FCFDFF;border-radius:10px;padding:4px 11px 4px 5px; transition:border-color .18s; animation:bgIn .45s cubic-bezier(.2,.9,.2,1) both} .sprx:hover{border-color:#C6CEDE} .sjg{flex-shrink:0;min-width:27px;height:27px;padding:0 7px;border-radius:8px; display:flex;align-items:center;justify-content:center; background:#EEF0F6;color:#4A5468;border:1px solid var(--line); font-size:.71rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .stx{display:flex;flex-direction:column;line-height:1.25;min-width:0} .stx b{font-size:.775rem;font-weight:700;color:var(--ink)} .stx i{font-size:.665rem;font-style:normal;color:var(--muted2)} .sprx.offen{border-style:dashed} .sprx.offen .sjg{background:var(--line2);color:var(--muted2)} .ladehint{display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--muted); padding:9px 2px} /* Angeklickte Bildungsgang-Kachel zeigt den ganzen Text */ .ggi{cursor:pointer;transition:all .22s cubic-bezier(.2,.9,.2,1)} .ggi:hover{border-color:#B9BEE8;background:#F3F4FD} .ggi.open{white-space:normal;overflow:visible;grid-column:1 / -1; background:#fff;border-left-width:4px;box-shadow:0 6px 18px rgba(8,13,24,.14); font-size:.8rem;padding:10px 12px;position:relative;z-index:2} .soft-h{font-size:.635rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--muted2);margin-bottom:8px;display:flex;align-items:center;gap:7px} .soft-h::after{content:'';flex:1;height:1px;background:var(--line)} .tags{display:flex;flex-wrap:wrap;gap:6px} .tag{background:var(--wash);border:1px solid var(--line);color:#414C63;font-size:.735rem;font-weight:600;padding:4px 10px;border-radius:999px;transition:transform .16s} .tag:hover{transform:translateY(-2px)} .tag.intl{background:#E6F5EF;border-color:#C6E8DA;color:#0B6B4F;display:inline-flex;align-items:center;gap:6px} img.fl{width:19px;height:auto;border-radius:2.5px;box-shadow:0 0 0 1px rgba(0,0,0,.14); display:inline-block;vertical-align:-2px;flex-shrink:0} .fl-pair{display:inline-flex;gap:3px;align-items:center} .fl-globe{font-size:.95rem;line-height:1} .tag.spec{background:#FBF2DE;border-color:#EFDFB6;color:#7E600F} /* course matrix */ .mxh{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r2);padding:11px 14px;cursor:pointer;transition:background .18s} .mxh:hover{background:#EFF2F7} .mxh .l{display:flex;align-items:center;gap:9px;min-width:0} .mxh .t{font-size:.82rem;font-weight:700} .mxh .s{font-size:.71rem;color:var(--muted);margin-top:1px} .cv2{transition:transform .3s cubic-bezier(.2,.9,.2,1);color:var(--muted2);flex-shrink:0} .cv2.up{transform:rotate(180deg)} .mxb{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.9,.2,1)} .mxb.show{max-height:1900px} .mxs{overflow-x:auto;margin-top:9px;border:1px solid var(--line);border-radius:var(--r2)} table.mx{border-collapse:collapse;width:100%;font-size:.755rem} table.mx th,table.mx td{padding:0;text-align:center} table.mx thead th{position:sticky;top:0;background:#F4F6FA;font-size:.585rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 4px;border-bottom:1px solid var(--line);white-space:nowrap} table.mx thead th.f{text-align:left;padding-left:12px;min-width:128px} table.mx tbody td{border-bottom:1px solid var(--line2);padding:6px 3px;width:40px} table.mx tbody tr:last-child td{border-bottom:none} table.mx tbody tr:nth-child(even){background:#FBFCFE} table.mx tbody tr:hover{background:var(--brandSoft)} table.mx td.f{text-align:left;padding-left:12px;font-weight:600;color:#414C63;width:auto;white-space:nowrap;font-size:.765rem} .dm{width:8px!important;height:8px!important;border-radius:50%!important;background:#DFE3EB;display:inline-block!important;vertical-align:middle;padding:0!important;margin:0!important;box-shadow:none!important;border:none!important} .dm.dgk{background:#5A6BB0} .dm.dlk{background:var(--gold)} .mxk{display:flex;gap:13px;margin-top:9px;font-size:.695rem;color:var(--muted);flex-wrap:wrap} .mxk span{display:inline-flex;align-items:center;gap:5px} .links{display:flex;flex-direction:column;gap:7px} .lk{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:11px 14px;border-radius:12px;font-size:.835rem;font-weight:700;transition:transform .18s,box-shadow .18s;border:none;font-family:inherit;cursor:pointer} .lk1{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff;box-shadow:0 6px 18px rgba(59,58,168,.3)} .lk1:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(59,58,168,.4)} .lk2{background:#fff;color:var(--brand);border:1.5px solid #D2D0F5} .lk2:hover{transform:translateY(-2px);background:#FAFAFF} .lk3{background:#F4FBF8;color:#0B6B4F;border:1.5px solid #C6E8DA} /* ---- Inhalt melden */ /* MELDEKNOPF — SECHS AUSFUEHRUNGEN */ .meldeknopf{display:flex;align-items:center;justify-content:center;gap:5px;width:100%; border:0;background:none;font-family:inherit;cursor:pointer; color:var(--muted2);font-size:.665rem;font-weight:600;letter-spacing:.01em; margin-top:2px;padding:5px 10px 0;border-radius:8px; transition:color .18s,background .18s,border-color .18s,opacity .18s} .meldeknopf svg{width:11px;height:11px;opacity:.5;flex-shrink:0;transition:opacity .18s} .meldeknopf:hover{color:#A32540} .meldeknopf:hover svg{opacity:.85} .meldeknopf:active{color:#8E1B33} .meldeknopf[hidden]{display:none} /* 1 — Leise. Reine Textzeile dicht unter dem gruenen Knopf. */ .ms-leise{} /* 2 — Unterstrichen. Wie ein Fussnotenverweis, etwas praesenter. */ .ms-linie{color:var(--muted);text-decoration:underline;text-decoration-color:#D8DEEA; text-underline-offset:3px;text-decoration-thickness:1px} .ms-linie:hover{text-decoration-color:#E7B4BF} /* 3 — Trennlinie. Eine feine Linie darueber setzt den Knopf ab, ohne ihn hervorzuheben. Fuer Profile mit vielen Knoepfen. */ .ms-trenner{margin-top:9px;padding-top:9px;border-top:1px solid var(--line2)} /* 4 — Rahmen. Duenner roter Umriss, nichts gefuellt. Sichtbar, aber ohne Flaeche, die mit den echten Knoepfen konkurriert. */ .ms-rahmen{margin-top:6px;padding:6px 12px;border:1px solid #F0D4DB;color:#9B2138; border-radius:9px} .ms-rahmen svg{opacity:.65} .ms-rahmen:hover{border-color:#E29CAC;background:#FEF8F9;color:#8E1B33} /* 5 — Fläche. Sehr blasses Rosa, kein Rahmen. Am ehesten wie ein Knopf, aber deutlich zurueckgenommen. */ .ms-flaeche{margin-top:6px;padding:7px 12px;background:#FDF6F7;color:#9B2138;border-radius:9px} .ms-flaeche svg{opacity:.6} .ms-flaeche:hover{background:#FBEDF0;color:#8E1B33} /* 6 — Schmal. Rechtsbuendig, ohne Zeichen, so klein wie vertretbar. Fuer alle, denen jede der anderen Ausfuehrungen zu laut ist. */ .ms-schmal{justify-content:flex-end;margin-top:1px;padding:3px 2px 0;font-size:.635rem; font-weight:500;opacity:.78} .ms-schmal svg{display:none} .ms-schmal:hover{opacity:1} /* ─── Fünf gestalterisch eigenständige Ausführungen ─────────────── Die ersten sechs waren Abstufungen derselben Idee. */ /* 7 — Eckmarke. Kein eigener Streifen, sondern ein kleines Feld, das sich rechts an den grünen Knopf anlegt und mit ihm eine Einheit bildet. */ .ms-ecke{width:auto;margin:-3px 0 0 auto;padding:3px 9px 3px 7px; background:#F6F1F2;color:#8A6470;border-radius:0 0 9px 9px; font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .ms-ecke svg{width:9px;height:9px;opacity:.55} .ms-ecke:hover{background:#F7E6EA;color:#A32540} /* 8 — Kapsel. Runde, kleine Pille mittig unter dem Knopf, freistehend. Wirkt eigenständig statt angehängt und hat viel Luft. */ .ms-kapsel{width:auto;margin:10px auto 2px;padding:5px 14px;border-radius:999px; background:#fff;border:1px solid #E8DDE0;color:#8C6B75;font-size:.65rem;font-weight:600; box-shadow:0 1px 2px rgba(140,107,117,.07)} .ms-kapsel svg{width:10px;height:10px;opacity:.6} .ms-kapsel:hover{border-color:#DCB9C2;color:#A32540;background:#FFFBFC; box-shadow:0 2px 7px rgba(163,37,64,.11)} /* 9 — Randstreifen. Ein farbiger Balken links, sonst nichts. Nimmt die Sprache der Hinweiskästen auf und liest sich als Fußnote zum Bericht, nicht als Handlung. Text linksbündig. */ .ms-streifen{justify-content:flex-start;margin-top:7px;padding:6px 10px; border-left:2.5px solid #E7C3CC;background:linear-gradient(90deg,#FDF7F8,rgba(253,247,248,0)); border-radius:0 8px 8px 0;color:#8B5F6B;font-size:.665rem;text-align:left} .ms-streifen svg{opacity:.6} .ms-streifen:hover{border-left-color:#C4485F;color:#8E1B33; background:linear-gradient(90deg,#FBEDF0,rgba(251,237,240,0))} /* 10 — Zurückhaltend. Fast unsichtbar, bis die Maus in die Nähe kommt: Dann fährt der Knopf sanft ein. */ .ms-dezent{margin-top:4px;padding:4px 10px;opacity:.42;font-size:.645rem; transform:translateY(-2px);transition:opacity .22s ease,transform .22s ease,color .18s} .ms-dezent svg{opacity:.55} .ms-dezent:hover{opacity:1;transform:translateY(0);color:#A32540} @media (hover:none){ .ms-dezent{opacity:.8;transform:none} } /* 11 — Zeile mit Punkt. */ .ms-punkt{margin-top:8px;padding:5px 10px;color:#77839A;font-size:.655rem;font-weight:500; letter-spacing:.02em} .ms-punkt svg{display:none} .ms-punkt::before{content:"";width:5px;height:5px;border-radius:50%;background:#D4737F; flex-shrink:0;transition:transform .18s,background .18s} .ms-punkt:hover{color:#A32540} .ms-punkt:hover::before{background:#A32540;transform:scale(1.35)} .lk4{background:#F5F7FE;color:#2E3B8F;border:1.5px solid #CFD6F5} .lk4:hover{transform:translateY(-2px);background:#EEF1FD} .ustat{margin-top:7px;font-size:.735rem;line-height:1.55;padding:10px 12px;border-radius:var(--r3); background:var(--wash);border:1px solid var(--line);color:var(--muted)} .ustat b{color:var(--ink)} .ustat.ok{background:#F1FAF5;border-color:#C6E8DA;color:#0B6B4F} .ustat a{color:var(--brand);font-weight:700;text-decoration:none} .lk3:hover{transform:translateY(-2px);background:#EAF7F1} /* audit */ .abtn{width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;background:linear-gradient(135deg,#101A2E,#2E2A73);color:#fff;font:inherit;font-weight:700;font-size:.87rem;transition:transform .18s,box-shadow .18s;display:flex;align-items:center;justify-content:center;gap:8px} .abtn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,26,46,.35)} .abtn:disabled{opacity:.6;cursor:wait} .anote{font-size:.675rem;color:var(--muted2);margin:8px 0 0;line-height:1.55} .pre{background:var(--wash);border-left:3px solid var(--brand);border-radius:0 var(--r3) var(--r3) 0;padding:11px 13px;font-size:.745rem;color:#4C5670;line-height:1.6;margin-top:11px;animation:slideIn .45s cubic-bezier(.2,.9,.2,1) both} @keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .pre b{color:var(--ink)} .gt{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:12px;padding:13px;background:var(--ink);border-radius:var(--r2);color:#fff;animation:pop .5s cubic-bezier(.2,1.2,.3,1) both} .gt .n{font-size:1.85rem;font-weight:800;line-height:1} .gt .l{font-size:.635rem;letter-spacing:.11em;text-transform:uppercase;color:#94A1BD;font-weight:800} .crit{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line2);animation:rowIn .4s both} .crit:last-of-type{border-bottom:none} .pips{display:flex;gap:3px;flex-shrink:0;margin-top:3px} .pip{width:8px;height:8px;border-radius:50%;background:var(--line)} .pip.f{background:var(--brand)} .pip.na{background:transparent;box-shadow:inset 0 0 0 1px #D3D8E4} .crit .b{flex:1;min-width:0} .crit .t{font-size:.81rem;font-weight:700;margin-bottom:2px} .crit .t .sc2{font-size:.695rem;font-weight:800;color:var(--brand);margin-left:5px} .crit .t .sc2.na{color:var(--muted2)} .crit .r{font-size:.77rem;color:var(--muted);line-height:1.55} .concl{margin-top:13px;padding:13px 15px;background:var(--ink);color:#E4E9F4;border-radius:var(--r2);font-size:.81rem;line-height:1.62} .concl b{color:#A7B4E8} .srcs{margin-top:10px;font-size:.695rem;color:var(--muted2);line-height:1.6} .srcs a{color:var(--brand);text-decoration:none} .work{display:flex;align-items:center;gap:10px;padding:14px;font-size:.795rem;color:var(--muted)} .orb{width:17px;height:17px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:spin .75s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} .alert{color:#8C1030;background:#FFF3F6;border:1px solid #F6D2DD;border-radius:var(--r2);padding:11px 13px;font-size:.77rem;margin-top:11px;line-height:1.55} .info{color:#1F4E7A;background:#EFF7FE;border:1px solid #CFE5F7;border-radius:var(--r2);padding:11px 13px;font-size:.765rem;margin-top:11px;line-height:1.6} /* eco appeal */ .eco{margin-top:12px;padding:22px 19px;border-radius:var(--r1);background:linear-gradient(150deg,#063E33,#0B6B4F 55%,#128A63);color:#EAFBF3;text-align:center;position:relative;overflow:hidden;animation:ecoIn 1.05s cubic-bezier(.16,.9,.2,1) both} @keyframes ecoIn{0%{opacity:0;transform:translateY(26px) scale(.965);filter:blur(9px)}55%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}} .eco h4,.eco p,.eco a,.eco .tap{animation:ecoUp .85s cubic-bezier(.2,.9,.2,1) both} .eco .tap{animation-delay:.12s}.eco h4{animation-delay:.3s}.eco p{animation-delay:.42s}.eco a{animation-delay:.58s} @keyframes ecoUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .eco::after{content:'';position:absolute;inset:-40%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 55%);animation:drift 9s ease-in-out infinite alternate} @keyframes drift{to{transform:translate(14%,10%)}} .eco h4{font-size:1.12rem} .eco h4{margin:0 0 7px;font-size:1rem;font-weight:800;position:relative;z-index:1} .eco p{margin:0 0 14px;font-size:.79rem;line-height:1.62;opacity:.94;position:relative;z-index:1} .eco a{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#0B6B4F;padding:11px 20px;border-radius:999px;text-decoration:none;font-weight:800;font-size:.83rem;position:relative;z-index:1;transition:transform .18s,box-shadow .18s} .eco a:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 26px rgba(0,0,0,.24)} .eco .cd{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 18px;margin-bottom:14px; position:relative;z-index:1} .eco .cdl{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;opacity:.8} .eco .cdv{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em} .eco .fine{font-size:.665rem;opacity:.78;margin-top:11px;margin-bottom:0} /* key box */ /* ---- Matcher: eigene Farbwelt ---- */ .mbox.quest{background:linear-gradient(168deg,#140F33 0%,#1B1447 46%,#241A5E 100%); color:#E9E7FA;border:1px solid rgba(255,255,255,.1);box-shadow:0 46px 100px rgba(0,0,0,.62)} .mbox.quest .qhero{text-align:center;padding:4px 0 18px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:18px} .mbox.quest .qhero svg{color:#B9A6FF;margin-bottom:9px;animation:hover2 4.6s ease-in-out infinite} .mbox.quest h3{color:#fff;font-size:1.28rem;margin:0 0 6px} .mbox.quest .qhero p{margin:0;font-size:.79rem;color:#A79FD4;line-height:1.6} .mbox.quest .ql{color:#F2F0FF;font-size:.845rem} .mbox.quest .qh{color:#8E86BE} .mbox.quest .re{color:#7F77AF} .mbox.quest .q{padding:14px 15px;border-radius:15px;background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.075);margin-bottom:11px;transition:border-color .25s,background .25s} .mbox.quest .q:focus-within{border-color:rgba(139,107,245,.55);background:rgba(255,255,255,.07)} /* Die