/* Dieselbe Schrift wie auf der Startseite. Ohne sie fielen die Rechts- und Newsseiten auf eine Serifenschrift zurueck und sahen fremd aus. */ @font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap; src:url(fonts/oswald-700.woff2) format("woff2")} @font-face{font-family:"Oswald";font-weight:300;font-style:normal;font-display:swap; src:url(fonts/oswald-300.woff2) format("woff2")} /* Gemeinsames Aussehen der Rechtsseiten (Datenschutz, Impressum). */ :root{ --ink:#0f0514;--panel:#180825;--line:rgba(255,255,255,.10); --paper:#f3ecf5;--muted:#a294ad;--magenta:#c63a95;--magenta-soft:#e08cc4; --disp:"Oswald",Impact,"Arial Narrow",sans-serif; --sans:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.7 var(--sans)} .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:14px 26px;background:rgba(15,5,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .topbar .home{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper); font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:13px} .topbar nav{display:flex;gap:6px;flex:1;flex-wrap:wrap} .topbar nav a{padding:7px 13px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:14px} .topbar nav a:hover{color:var(--paper);background:rgba(255,255,255,.06)} .topbar nav a[aria-current="page"]{background:var(--magenta);color:#fff} /* Sprachwahl - Zeichen fuer Zeichen dieselbe wie auf der Startseite. Vorher stand hier eine Reihe aus fuenf Kuerzeln; die brauchte mehr Platz, sah anders aus und wurde auf schmalen Fenstern rechts abgeschnitten. */ .langsel{position:relative;margin-left:auto} .lang-trigger{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line); border-radius:999px;padding:6px 11px;color:var(--paper);cursor:pointer;transition:.2s} .lang-trigger:hover,.langsel.open .lang-trigger{border-color:rgba(198,58,149,.5);background:rgba(198,58,149,.1)} .lang-code{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px} .lang-caret{width:10px;height:6px;color:var(--muted);transition:transform .22s} .langsel.open .lang-caret{transform:rotate(180deg)} .flag{display:block;width:21px;height:15px;border-radius:2px;overflow:hidden;flex:0 0 auto; box-shadow:0 0 0 1px rgba(255,255,255,.16) inset} .flag svg{display:block;width:100%;height:100%} .lang{position:absolute;top:calc(100% + 10px);right:0;min-width:196px;display:none;flex-direction:column;gap:1px; background:#150620;border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:0 26px 60px rgba(0,0,0,.6);z-index:60} .langsel.open .lang{display:flex;animation:lmin .18s ease-out} @keyframes lmin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .lang button{display:flex;align-items:center;gap:11px;width:100%;text-align:left; font-family:var(--sans);font-size:14.5px;background:none;border:0;color:var(--muted);cursor:pointer; padding:9px 11px;border-radius:9px;transition:.16s} .lang button:hover{color:var(--paper);background:rgba(255,255,255,.06)} /* Aktive Sprache: magentafarbener Balken links statt Vollflaeche - ruhiger im Menue. */ .lang button[aria-current="true"]{color:#fff;background:rgba(198,58,149,.16);box-shadow:inset 3px 0 0 var(--magenta)} main{max-width:840px;margin:0 auto;padding:46px 26px 90px} h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(30px,5.4vw,48px);line-height:1.06;margin:0 0 10px} .updated{color:var(--muted);font-size:14px;margin:0 0 40px} h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,25px); margin:38px 0 12px;padding-top:18px;border-top:1px solid var(--line)} h3{font-size:17px;margin:24px 0 8px;color:#fff} p,li{color:#e5dae9} ul{padding-left:20px} li{margin-bottom:7px} a{color:var(--magenta-soft)} dl{margin:0} dt{font-weight:700;color:#fff;margin-top:14px} dd{margin:2px 0 0;color:#e5dae9} table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px} th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} /* Noch auszufuellende Angaben deutlich sichtbar - darf nicht live gehen. */ .todo{background:rgba(224,86,138,.14);border:1px dashed rgba(224,86,138,.55); border-radius:8px;padding:2px 8px;color:#ffb9d4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px} .note{background:rgba(198,58,149,.09);border:1px solid rgba(198,58,149,.3); border-radius:14px;padding:18px 20px;margin:26px 0} .note p:last-child{margin-bottom:0} footer{border-top:1px solid var(--line);padding:32px 26px 60px;color:var(--muted);font-size:13.5px} footer .in{max-width:840px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between} footer a{color:var(--muted);text-decoration:none;margin-right:16px} footer a:hover{color:var(--paper);text-decoration:underline} [data-lang-block]{display:none} [data-lang-block].on{display:block} @media(max-width:640px){ main{padding:32px 18px 70px} .topbar{padding:12px 16px} /* Am Handy blieben der Navigation neben dem Zurueck-Link nur 161 Pixel. Die vier Punkte standen dann untereinander und die Kopfzeile war 243 Pixel hoch - fast ein Drittel des Bildschirms. Jetzt bekommt sie eine eigene Zeile unter Zurueck-Link und Sprachwahl. */ .topbar{row-gap:10px} .topbar nav{flex:1 0 100%;order:3;gap:4px} .topbar nav a{padding:6px 10px;font-size:13.5px} .langsel{order:2} } /* Einwilligungsbanner. Liegt hier, damit es auf allen Seiten gleich aussieht; die Startseite bringt dieselben Regeln in ihrem eigenen