/* =========================================================================== crAIze Suite - Oberflaeche (Paket craize_basis). Gilt fuer Manager, Game, Board und Account. Uebernommen von craize.de: dieselben Farben, dieselben Schriften, dieselbe Formensprache (Pillen-Knoepfe, 18px-Radien, Mono-Grossbuchstaben als Beschriftung). Warum eine Datei statt CSS in jeder Vorlage: Die Oberflaeche hat drei Einstiege (Verein, Plattformverwaltung, angemeldet-noch-nichts) und ein halbes Dutzend Seiten ohne Anmeldung. Dreimal dieselbe Palette zu pflegen heisst, dass sie beim naechsten Markenwechsel an zwei Stellen stimmt und an einer nicht. Die Variablennamen sind bewusst die alten (--papier, --tinte, --akzent): Fuenfzig Vorlagen benutzen sie. Getauscht wurden die Werte, nicht die Namen - so ist der Markenwechsel eine Aenderung an dieser Datei und nicht an fuenfzig. =========================================================================== */ /* --- Schriften: mitgeliefert, nicht nachgeladen --------------------------- craize.de laedt Space Grotesk, Inter und JetBrains Mono von Google. Hier liegen sie im Paket. Der Grund ist nicht Geschwindigkeit: Eine Vereinsverwaltung, die bei jedem Seitenaufruf die IP-Adresse eines Mitglieds an einen Dritten meldet, waere ein Datenschutzproblem, das sich niemand einhandeln muss. Alle drei stehen unter der SIL Open Font License; die Lizenztexte liegen in schrift/ daneben. ------------------------------------------------------------------------ */ @font-face{font-family:"Inter var";src:url("schrift/inter.260c81a4759b.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Space Grotesk";src:url("schrift/space-grotesk-500.ab4861869c91.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Space Grotesk";src:url("schrift/space-grotesk-700.f9e147a59a93.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"JetBrains Mono var";src:url("schrift/jetbrains-mono.b058178d7f30.woff2") format("woff2"); font-weight:100 800;font-style:normal;font-display:swap} :root{ /* Flaechen. --papier ist der Seitengrund, --flaeche die Karte darauf. */ --papier:#07090f; --flaeche:#0b0f1a; --flaeche2:#141b2b; --erhaben:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); /* Schrift. Drei Stufen genuegen - eine vierte wird nicht mehr gelesen. */ --tinte:#eef2f8; --tinte-leise:#aab4c6; --leise:#6b7689; --linie:rgba(255,255,255,.10); --linie-fein:rgba(255,255,255,.055); --linie-stark:rgba(255,255,255,.18); --akzent:#4cf0ff; --akzent-2:#3b6cff; --akzent-hell:rgba(76,240,255,.10); --verlauf:linear-gradient(120deg,#4cf0ff,#3b6cff); /* Zustandsfarben, auf dunklem Grund neu gesetzt: Das alte Waldgruen und das alte Ziegelrot verschwinden auf #07090f fast vollstaendig. */ --gut:#3ddc97; --gut-hell:rgba(61,220,151,.12); --warn:#ffb547; --warn-hell:rgba(255,181,71,.12); --schlecht:#ff5d7a; --schlecht-hell:rgba(255,93,122,.12); /* Ein- und Ausgaenge in den Finanzgrafiken. Dieses Paar besteht den Rot-Gruen-Test; die Richtung steckt ohnehin in der Lage zur Nulllinie. */ --ein:#3ddc97; --aus:#ff8a5b; /* --serif heisst weiter --serif, ist aber die Display-Schrift der Marke. Der Name bleibt, weil fuenfzig Vorlagen ihn benutzen. */ --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif; --sans:"Inter var","Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; --mono:"JetBrains Mono var","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace; --radius:18px; --radius-klein:12px; --ruck:cubic-bezier(.22,1,.36,1); /* Das Pink von craize.de - nur fuer den Strich durch ein Wort. */ --heiss:#ff3d7f; --breite:1160px; /* Was im Dunklen fest verdrahtet war und im Hellen anders sein muss (siehe „Die Anwendung in Hell“ weiter unten). Die ersten drei sind nur die Farbanteile - die Deckkraft steht an der Stelle, die sie benutzt: rgba(var(--schleier),.06). */ --schleier:255,255,255; /* ein Hauch ueber dem Grund: Hover, Zebra */ --akzent-rgb:76,240,255; /* der Akzent als Toenung und Rand */ --schatten:0,0,0; --schattenkraft:1; --kopf:rgba(11,15,26,.86); --kopf-zweite:rgba(11,15,26,.45); --feld:#070a12; /* der Grund eines Eingabefelds */ /* Schrift auf einer vollen Farbflaeche: auf --tinte oder --akzent, auf Gruen, Gelb und Rot. */ --auf-voll:#05070c; --auf-gut:#04130c; --auf-warn:#1c1200; --auf-schlecht:#1a0509; --schlecht-stark:#ff7d94; --art-spiel:#8f9bff; --art-sitzung:#e879f9; } *{box-sizing:border-box} html{color-scheme:dark} body{margin:0;background:var(--papier);color:var(--tinte); font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased} a{color:var(--akzent);text-underline-offset:2px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, summary:focus-visible,textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:2px} ::selection{background:rgba(var(--akzent-rgb),.25)} /* --- Kopf ---------------------------------------------------------------- */ header.kopf{background:var(--kopf);border-bottom:1px solid var(--linie); position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)} .kopf .oben{max-width:var(--breite);margin:0 auto;padding:13px 22px 0; display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* Die Marke: Zeichen als SVG, Schriftzug als Text. Siehe marke/craize-club.svg. */ .marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .marke .zeichen{width:30px;height:30px;display:block;flex:none} .wortmarke{font-family:var(--serif);font-weight:700;font-size:1.12rem; letter-spacing:-.025em;color:var(--tinte);white-space:nowrap} .wortmarke b{font-weight:700;background:var(--verlauf);-webkit-background-clip:text; background-clip:text;color:transparent} .wortmarke .teil{font-family:var(--mono);font-weight:500;font-size:.58em; letter-spacing:.18em;text-transform:uppercase;color:var(--leise); margin-left:7px;vertical-align:2px} .markentrenner{width:1px;height:26px;background:var(--linie);flex:none} .vereinsname{font-family:var(--serif);font-size:1.12rem;font-weight:600;letter-spacing:-.015em} /* Das Logo bestimmt die Hoehe nicht mit: Ein zu hohes Bild darf den Kopf nicht auseinanderdruecken, ein zu breites nichts verdecken. */ .logo{height:32px;width:auto;max-width:150px;object-fit:contain;vertical-align:middle} @media(max-width:640px){.logo{height:26px;max-width:104px}} .kopf .konto{margin-left:auto;font-size:13.5px;color:var(--leise); display:flex;gap:14px;align-items:center} /* Vereinswechsel - reines HTML, kein Skript. */ .wechsel{position:relative} .wechsel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px} .wechsel>summary::-webkit-details-marker{display:none} .wechsel>summary::after{content:"";border:5px solid transparent; border-top-color:var(--leise);margin-top:5px;align-self:center} .wechsel[open]>summary::after{transform:rotate(180deg);margin-top:-5px} .wechsel>summary:hover .vereinsname{color:var(--akzent)} .wechselliste{position:absolute;top:calc(100% + 10px);left:0;z-index:40;min-width:288px; background:var(--flaeche2);border:1px solid var(--linie-stark);border-radius:var(--radius-klein); box-shadow:0 18px 40px rgba(var(--schatten),calc(.55*var(--schattenkraft)));padding:6px} .wechselliste a{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--tinte);font-size:14.5px} .wechselliste a:hover{background:rgba(var(--schleier),.06)} .wechselliste a[aria-current]{font-weight:600;color:var(--akzent)} .wechselliste .rolle{font-family:var(--mono);font-size:10px;letter-spacing:.07em; text-transform:uppercase;color:var(--leise)} .wechselliste hr{border:0;border-top:1px solid var(--linie-fein);margin:6px 0} .rollenfahne{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--akzent);background:var(--akzent-hell); border:1px solid rgba(var(--akzent-rgb),.22);border-radius:999px;padding:3px 10px} /* Rechts im Kopf, was auf jeder Seite gebraucht wird: Suche, Hilfe zu dieser Seite, Sprache, Konto. */ .kopf .werkzeug{margin-left:auto;display:flex;align-items:center;gap:10px} .kopfsuche{margin:0;display:flex} .kopfsuche input{width:200px;padding:7px 15px;border-radius:999px; border:1px solid var(--linie);background:rgba(var(--schleier),.04);color:var(--tinte); font:inherit;font-size:13.5px;transition:border-color .2s,width .25s var(--ruck)} .kopfsuche input::placeholder{color:var(--leise)} .kopfsuche input:hover{border-color:var(--linie-stark)} .kopfsuche input:focus{border-color:var(--akzent);width:260px;outline:0} .frage{flex:none;width:31px;height:31px;border-radius:50%;border:1px solid var(--linie); display:inline-flex;align-items:center;justify-content:center;text-decoration:none; color:var(--tinte-leise);font-weight:600;font-size:14px;transition:color .2s,border-color .2s} .frage:hover{color:var(--akzent);border-color:var(--akzent)} /* Hell oder dunkel: ein runder Knopf wie die Hilfe daneben. Er zeigt, wohin es geht - im Dunklen die Sonne, im Hellen den Mond. */ .aussehen{margin:0;display:inline-flex;flex:none} .aussehen:not(.in-liste) button,.fuss .aussehen button{width:31px;height:31px;padding:0;border-radius:50%; border:1px solid var(--linie);background:none;color:var(--tinte-leise);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;text-decoration:none; transition:color .2s,border-color .2s} .aussehen:not(.in-liste) button:hover{color:var(--akzent);border-color:var(--akzent)} /* Auf dem Telefon steht er im Kontomenue - mit Wort statt Zeichen. */ .aussehen.in-liste{display:none} @media(max-width:640px){.aussehen.im-kopf{display:none}.aussehen.in-liste{display:block}} .aussehen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .sprachen{margin:0;display:inline-flex;flex:none;border:1px solid var(--linie); border-radius:999px;padding:2px} .sprachen button{border:0;background:none;color:var(--leise);cursor:pointer; font:500 10.5px var(--mono);letter-spacing:.09em;padding:5px 9px;border-radius:999px} .sprachen button:hover{color:var(--tinte)} .sprachen button.an{background:var(--tinte);color:var(--auf-voll);font-weight:600} /* Das Konto klappt auf wie der Vereinswechsel - von der rechten Kante aus. */ .kontomenue .wechselliste{left:auto;right:0;min-width:236px} .kontoname{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-size:13.5px;color:var(--tinte-leise)} .kontomenue>summary:hover .kontoname{color:var(--akzent)} .wechselliste .wer{display:block;padding:8px 12px 7px;font-size:12.5px;color:var(--leise); overflow-wrap:anywhere} .wechselliste form{margin:0} .wechselliste button{display:block;width:100%;text-align:left;border:0;background:none; cursor:pointer;font:inherit;font-size:14.5px;color:var(--tinte);padding:9px 12px;border-radius:8px} .wechselliste button:hover{background:rgba(var(--schleier),.06)} /* Navigation: Pillen wie auf craize.de, der aktive Punkt gefuellt. Erste Zeile die Bereiche, zweite (nav.zweite) die Seiten des Bereichs. */ nav.haupt{max-width:var(--breite);margin:0 auto;padding:8px 22px 10px; display:flex;gap:2px;flex-wrap:wrap} nav.haupt a{padding:8px 14px;border-radius:999px;color:var(--tinte-leise); text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;flex:none; transition:color .2s,background .2s} nav.haupt a:hover{color:var(--tinte);background:rgba(var(--schleier),.06)} nav.haupt a.aktiv{color:var(--auf-voll);background:var(--tinte);font-weight:600} /* „Mein Bereich“ gehört jedem Konto und nicht zur Vereinsverwaltung - deshalb steht er für sich am rechten Rand. */ nav.haupt a.abgesetzt{margin-left:auto} /* Die Zahl am Punkt: Hier wartet etwas. */ nav .zahl{display:inline-block;margin-left:7px;min-width:19px;padding:0 6px; border-radius:999px;background:var(--akzent);color:var(--auf-voll);text-align:center; font:600 10.5px/19px var(--mono);vertical-align:1px} nav.haupt a.aktiv .zahl{background:var(--auf-voll);color:var(--tinte)} nav.zweite{border-bottom:1px solid var(--linie-fein);background:var(--kopf-zweite)} nav.zweite .innen{max-width:var(--breite);margin:0 auto;padding:9px 22px; display:flex;gap:4px;flex-wrap:wrap} nav.zweite a{padding:5px 13px;border-radius:999px;border:1px solid transparent; color:var(--tinte-leise);text-decoration:none;font-size:13.5px;font-weight:500; white-space:nowrap;flex:none;transition:color .2s,border-color .2s} nav.zweite a:hover{color:var(--tinte);border-color:var(--linie)} nav.zweite a.aktiv{color:var(--tinte);border-color:var(--linie-stark); background:rgba(var(--schleier),.05);font-weight:600} /* --- Hilfe --------------------------------------------------------------- Ein Suchfeld, darunter die Antworten. Jeder Eintrag klappt auf: In den Treffern steht er offen, im Verzeichnis geschlossen - sechzig offene Absätze liest niemand. ------------------------------------------------------------------------ */ .hilfesuche{display:flex;gap:10px;max-width:760px;margin:0 0 26px} .hilfesuche input{flex:1 1 auto;min-width:0;padding:13px 20px;border-radius:999px; border:1px solid var(--linie-stark);background:rgba(var(--schleier),.04);color:var(--tinte); font:inherit;font-size:16px} .hilfesuche input:focus{border-color:var(--akzent);outline:0} .hilfezahl{color:var(--leise);font-size:13.5px;margin:0 0 14px} .hilfegruppe{max-width:760px;margin:0 0 26px} .hilfegruppe h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--leise);margin:0 0 8px} .hilfeeintrag{max-width:760px;border:1px solid var(--linie);border-radius:var(--radius-klein); background:var(--erhaben);margin:0 0 8px} .hilfeeintrag[open]{border-color:var(--linie-stark)} .hilfeeintrag>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex; align-items:baseline;gap:6px 14px;flex-wrap:wrap} .hilfeeintrag>summary::-webkit-details-marker{display:none} .hilfeeintrag .titel{font-weight:600;color:var(--tinte)} .hilfeeintrag>summary:hover .titel{color:var(--akzent)} .hilfeeintrag .weg,.hilfeeintrag .noch{margin-left:auto;font-family:var(--mono);font-size:10.5px; letter-spacing:.07em;text-transform:uppercase;color:var(--leise);white-space:nowrap} .hilfeeintrag .noch{color:var(--warn)} .hilfeeintrag .inhalt{padding:0 16px 14px} .hilfeeintrag .inhalt p{margin:0 0 12px;color:var(--tinte-leise);font-size:15px} .hilfeeintrag .inhalt p.wer{color:var(--warn);font-size:14px;margin:0} .hilfeeintrag.nochnicht .titel{color:var(--tinte-leise)} .hilfeleer{max-width:760px} .hilfeleer a{display:inline-block;margin-top:6px} .hilfebruecke{max-width:760px;margin:22px 0 0;color:var(--tinte-leise);font-size:14.5px} @media(max-width:640px){ .hilfesuche .knopf{display:none} .hilfeeintrag .weg,.hilfeeintrag .noch{margin-left:0;white-space:normal} } /* --- Inhalt -------------------------------------------------------------- */ main{max-width:var(--breite);margin:0 auto;padding:34px 22px 90px} h1{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:-.03em; line-height:1.12;margin:0 0 6px} .unterzeile{color:var(--tinte-leise);margin:0 0 28px} h2{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.02em; margin:36px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--linie)} h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em} /* Kacheln. Die Fugen sind Rahmen der Kachel, nicht Luecken im Hintergrund: bei ungerader Kachelzahl bliebe sonst ein grauer Streifen stehen. */ .kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);overflow:hidden;margin-bottom:28px} .kachel{background:var(--erhaben);padding:19px 21px;border-left:1px solid var(--linie-fein)} .kachel:first-child{border-left:0} .kachel .zahl{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1; letter-spacing:-.035em;font-variant-numeric:tabular-nums} .kachel .bez{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--leise);margin-top:8px} .kachel .zusatz{font-size:13px;color:var(--tinte-leise);margin-top:5px;line-height:1.45} /* --- Tabellen ------------------------------------------------------------ */ table{width:100%;border-collapse:collapse;font-size:15px} th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--leise);text-align:left;padding:0 14px 9px 0; border-bottom:1px solid var(--linie);font-weight:500} td{padding:11px 14px 11px 0;border-bottom:1px solid var(--linie-fein);vertical-align:top} tr:hover td{background:rgba(var(--schleier),.028)} td.zahl,th.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums; text-align:right;white-space:nowrap} .tabellenrahmen{overflow-x:auto;background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:4px 18px} /* --- Knoepfe ------------------------------------------------------------- */ /* Der volle Knopf ist hell auf dunkel, nicht akzentfarben: Weisse Schrift auf #4cf0ff ist nicht lesbar - der Kontrast liegt unter 2:1. */ .knopf{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px; background:var(--tinte);color:var(--auf-voll);border:1px solid var(--tinte); font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none; transition:background .22s,border-color .22s,color .22s,transform .22s var(--ruck)} .knopf:hover{background:var(--akzent);border-color:var(--akzent);color:var(--auf-voll)} .knopf.leise{background:transparent;color:var(--tinte-leise);border-color:var(--linie-stark)} .knopf.leise:hover{border-color:var(--akzent);color:var(--akzent);background:rgba(var(--akzent-rgb),.06)} .knopf:disabled,.knopf[aria-disabled=true]{opacity:.45;cursor:not-allowed} /* --- Fahnen -------------------------------------------------------------- */ .fahne{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.07em; text-transform:uppercase;padding:2px 9px;border-radius:999px; border:1px solid currentColor;white-space:nowrap} .f-gut{color:var(--gut);background:var(--gut-hell)} .f-warn{color:var(--warn);background:var(--warn-hell)} .f-schlecht{color:var(--schlecht);background:var(--schlecht-hell)} /* --- Formulare ----------------------------------------------------------- */ form.formular{max-width:700px;background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:28px} fieldset{border:0;padding:0;margin:0 0 26px} legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--akzent);font-weight:500;padding:0 0 10px} .feld{margin-bottom:18px} .feld label{display:block;font-size:13.5px;color:var(--tinte-leise);margin-bottom:6px;font-weight:500} .feld input[type=text],.feld input[type=email],.feld input[type=password], .feld input[type=date],.feld input[type=time],.feld input[type=number],.feld input[type=search], .feld input[type=url],.feld input[type=tel],.feld select,.feld textarea{ width:100%;padding:10px 12px;background:var(--feld);border:1px solid var(--linie); border-radius:10px;color:var(--tinte);font:inherit} .feld input:focus,.feld select:focus,.feld textarea:focus{border-color:rgba(var(--akzent-rgb),.45)} .feld input[type=file]{color:var(--tinte-leise);font-size:14px} .feld .hilfe{font-size:12.5px;color:var(--leise);margin-top:5px;line-height:1.5} .feld .fehler{font-size:13.5px;color:var(--schlecht);margin-top:5px;font-weight:500} .aktionen{display:flex;gap:12px;align-items:center;flex-wrap:wrap; margin-top:26px;padding-top:21px;border-top:1px solid var(--linie)} input[type=checkbox],input[type=radio]{accent-color:var(--akzent)} /* --- Baender ------------------------------------------------------------- */ .meldung{padding:13px 18px;margin-bottom:22px;border-radius:var(--radius-klein); border:1px solid var(--linie);border-left:3px solid var(--akzent);background:var(--flaeche)} .meldung.success{border-left-color:var(--gut)} .meldung.error{border-left-color:var(--schlecht)} .warnband{background:var(--warn-hell);border:1px solid rgba(255,181,71,.35); border-radius:var(--radius-klein);padding:15px 18px;margin-bottom:24px;font-size:14.5px} .warnband b{color:var(--warn)} .notband{background:var(--schlecht-hell);border:1px solid rgba(255,93,122,.4); border-radius:var(--radius-klein);padding:15px 18px;margin-bottom:24px;font-size:14.5px} .leer{color:var(--leise);padding:34px 0;text-align:center} .suchleiste{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .suchleiste input,.suchleiste select{padding:9px 13px;border:1px solid var(--linie); border-radius:999px;font:inherit;font-size:14.5px;background:var(--feld);color:var(--tinte)} .suchleiste input:focus,.suchleiste select:focus{border-color:rgba(var(--akzent-rgb),.45)} /* Mono-Grossbuchstaben mit Punkt davor - die Beschriftung von craize.de. Hier fuer Seiten, die eine Zeile Einordnung ueber der Ueberschrift vertragen. */ .marker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--akzent);display:inline-flex; align-items:center;gap:9px;margin-bottom:14px} .marker::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--akzent);box-shadow:0 0 12px var(--akzent)} /* --- Plattformebene ------------------------------------------------------ Dieselbe Formensprache, anderer Akzent: Wer auf /adm arbeitet, sieht an der Farbe, dass er eine Ebene ueber dem Verein ist. Das war schon vorher so und bleibt so - nur nicht mehr als zweite, eigene Palette. ------------------------------------------------------------------------ */ body.plattform{--akzent:#ffb547;--akzent-2:#ff8a5b;--akzent-hell:rgba(255,181,71,.12); --verlauf:linear-gradient(120deg,#ffb547,#ff8a5b)} body.plattform .wortmarke b{background:var(--verlauf);-webkit-background-clip:text; background-clip:text;color:transparent} body.plattform .marke .zeichen{filter:hue-rotate(168deg) saturate(1.25)} .knopf.gefahr{background:var(--schlecht);border-color:var(--schlecht);color:var(--auf-schlecht)} .knopf.gefahr:hover{background:var(--schlecht-stark);border-color:var(--schlecht-stark);color:var(--auf-schlecht)} .hinweis{background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius-klein);padding:16px 18px;color:var(--tinte-leise);font-size:14px} .meldung.erfolg{border-left-color:var(--gut)} .meldung.fehler{border-left-color:var(--schlecht)} .marke-gut{color:var(--gut)} .marke-warn{color:var(--warn)} .marke-schlecht{color:var(--schlecht)} /* --- Einstiegsseiten ohne Kopf (Anmeldung, Einladung, Fehler) ------------- Bewusst NICHT .tafel: So heisst im Finanzblatt die Diagrammtafel, und eine Klasse, die an zwei Stellen etwas anderes meint, faellt genau dann auf, wenn jemand die eine aendert und die andere kaputtgeht. ------------------------------------------------------------------------ */ .einstieg-mitte{min-height:100dvh;display:grid;place-items:center;padding:28px} .einstiegskarte{width:100%;max-width:430px;background:var(--flaeche); border:1px solid var(--linie);border-radius:var(--radius);padding:34px 32px; box-shadow:0 26px 70px rgba(var(--schatten),calc(.45*var(--schattenkraft)))} .einstiegskarte .marke{margin-bottom:22px} .einstiegskarte h1{font-size:1.5rem;margin-bottom:4px} .einstiegskarte .sub{color:var(--leise);margin:0 0 26px;font-size:14.5px} /* Der Schein hinter der Anmeldekarte - derselbe Effekt wie im Kopfbereich von craize.de, nur ruhiger: ein Farbfleck, keine Animation. */ .einstieg-mitte::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(760px circle at 50% -10%,rgba(59,108,255,.20),transparent 62%), radial-gradient(520px circle at 82% 108%,rgba(var(--akzent-rgb),.11),transparent 60%)} /* --- Material ------------------------------------------------------------- Gearbeitet wird am Regal, mit dem Handy in der einen und dem Karton in der anderen Hand. Deshalb grosse Knoepfe, die sich auf schmalem Bildschirm zu zweit nebeneinander legen, und Bilder als Erkennungshilfe. ------------------------------------------------------------------------ */ .unternav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px} .unternav a{padding:6px 15px;border-radius:999px;border:1px solid var(--linie); color:var(--tinte-leise);text-decoration:none;font-size:13.5px;font-weight:500} .unternav a:hover{border-color:var(--akzent);color:var(--akzent)} .unternav a.aktiv{border-color:var(--tinte);color:var(--tinte);font-weight:600} .knopfreihe{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px} .materialkopf{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:24px} .materialkopf .text{flex:1 1 320px;min-width:0} .materialkopf .text .unterzeile{margin-bottom:14px} .materialbild{width:180px;height:180px;object-fit:cover;border-radius:var(--radius); border:1px solid var(--linie);background:var(--flaeche2);display:block} /* Vorschaubild in Listen. Ohne Foto ein leeres Feld gleicher Groesse - sonst springt die Spalte je nach Zeile. */ .daumen{width:42px;height:42px;border-radius:9px;object-fit:cover;display:block; border:1px solid var(--linie);background:var(--flaeche2)} td.bildzelle{width:56px;padding-right:12px} .fotoreihe{display:flex;gap:16px;flex-wrap:wrap} .fotoreihe figure{margin:0;width:150px} .fotoreihe img{width:150px;height:150px;object-fit:cover;display:block; border-radius:var(--radius-klein);border:1px solid var(--linie)} .fotoreihe figcaption{font-size:12.5px;color:var(--leise);margin-top:6px;line-height:1.4} .fotoreihe form{display:inline} .fotoreihe button{background:none;border:0;padding:0;font:inherit;font-size:12.5px; color:var(--tinte-leise);text-decoration:underline;cursor:pointer} .fotoreihe button:hover{color:var(--akzent)} /* Angaben als Zeilenpaare - auf dem Handy lesbarer als eine Tabelle. */ .angaben{display:grid;grid-template-columns:max-content 1fr;gap:9px 22px;margin:0; background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius); padding:18px 20px;max-width:700px} .angaben dt{color:var(--leise);font-size:13.5px} .angaben dd{margin:0} .arbeitsvorrat{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px;margin-bottom:10px} .arbeitsvorrat section{background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:16px 18px} .arbeitsvorrat h3{margin:0 0 10px;font-size:1rem} .arbeitsvorrat ul{list-style:none;margin:0;padding:0} .arbeitsvorrat li{padding:7px 0;border-top:1px solid var(--linie-fein);font-size:14px; display:flex;justify-content:space-between;gap:12px} .arbeitsvorrat li:first-child{border-top:0} .arbeitsvorrat li span{color:var(--leise);white-space:nowrap} /* Auswahl in Zeilen: Radioknoepfe und Haken stehen NEBEN ihrem Text. Auf die Materialformulare begrenzt - die uebrigen Formulare haben ihre Auswahlfelder anders gesetzt und sollen so bleiben. */ .materialformular .feld div[id^=id_] label{display:flex;gap:9px;align-items:center; font-size:14.5px;color:var(--tinte);font-weight:400;margin:0 0 7px} .materialformular .feld.haken label{display:flex;gap:10px;align-items:center; font-size:14.5px;color:var(--tinte);margin:0} .materialformular .feld select[multiple]{min-height:170px} /* Mengenfelder je Groesse nebeneinander. */ .mengenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px} .mengenraster .feld{margin-bottom:8px} /* Eine Karte wie das Formular - fuer Bloecke, die selbst kein
sind. */ .materialkarte{max-width:700px;background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:28px} /* Kacheln, die auch auf dem Handy nebeneinander bleiben. */ .kacheln.dicht{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))} .nur-schmal,.nur-schmal-zeile{display:none} @media(max-width:640px){ /* Auf dem Handy zaehlt, was da ist - nicht, wem es gehoert. Die Spalte weicht, die Angabe rutscht unter den Artikelnamen. */ .nur-breit{display:none} .nur-schmal{display:inline} .nur-schmal-zeile{display:block} .kacheln.dicht .kachel{padding:14px 14px} .kacheln.dicht .kachel .zahl{font-size:1.5rem} .knopfreihe .knopf{flex:1 1 calc(50% - 10px);justify-content:center;padding:13px 12px} .materialbild{width:100%;height:auto;max-height:260px} .angaben{grid-template-columns:1fr;gap:2px 0} .angaben dd{margin-bottom:10px} } @media(max-width:640px){ /* Der Vereinswechsel haengt am Vereinsnamen, und der steht auf dem Handy mitten in der Zeile: 288 Pixel von dort aus ragen ueber den Rand, die Seite laesst sich seitlich schieben und die Liste ist rechts abgeschnitten. Hier haengt sie deshalb an der Kopfzeile und nimmt deren Breite. */ .kopf .oben{position:relative} .wechsel{position:static} .wechselliste{left:16px;right:16px;min-width:0} .kopf .oben{padding:12px 16px 0} /* Mit „Beta“ an der Marke rutscht der Vereinsname in die zweite Zeile; der Trennstrich stuende dann allein am Zeilenende. */ .markentrenner{display:none} /* Umbrechen duerfen: Eine lange Adresse schob „Abmelden“ sonst drei Pixel ueber den Rand - genug, dass die ganze Seite seitlich wackelt. */ .kopf .konto{width:100%;margin:8px 0 0;flex-wrap:wrap;row-gap:6px} /* Die Werkzeuge bekommen eine eigene Zeile, das Suchfeld deren Rest. */ .kopf .werkzeug{width:100%;margin:8px 0 0} .kopfsuche{flex:1 1 auto;min-width:0} .kopfsuche input,.kopfsuche input:focus{width:100%} .kontoname{max-width:96px} .kontomenue{position:static} .kontomenue .wechselliste{left:16px;right:16px;min-width:0} /* Beide Menüzeilen bleiben einzeilig und lassen sich seitlich schieben. Aufklappen sparte Platz und versteckte den Weg; umbrechen machte aus zwei Zeilen fünf. Der Rand rechts läuft aus - so sieht man, dass es weitergeht. */ nav.haupt,nav.zweite .innen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)} nav.haupt::-webkit-scrollbar,nav.zweite .innen::-webkit-scrollbar{display:none} nav.haupt{padding:6px 12px 10px} nav.haupt a.abgesetzt{margin-left:8px} nav.haupt a:last-child,nav.zweite a:last-child{margin-right:26px} nav.zweite .innen{padding:8px 12px} main{padding:26px 16px 70px} h1{font-size:1.6rem} } /* --- Beta ------------------------------------------------------------------ Steht an der Marke und damit auf jeder Seite. In der Warnfarbe, nicht im Akzent: Es ist ein Hinweis, kein Schmuck. ------------------------------------------------------------------------ */ .beta{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--warn);background:var(--warn-hell); border:1px solid rgba(255,181,71,.38);border-radius:999px;padding:2px 8px; margin-left:2px;white-space:nowrap} .knopf.klein{padding:6px 15px;font-size:13.5px} .knopf.gross{padding:13px 27px;font-size:15.5px} .knopfzeile{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* --- Seiten ohne Anmeldung: Startseite, Rechtstexte, Registrierung -------- Kopf, Fuss und die gemeinsamen Bausteine. Die Farben dieser Seiten - hell, anders als die Anwendung - und die Startseite selbst stehen weiter unten in eigenen Abschnitten. ------------------------------------------------------------------------ */ .offenkopf{position:sticky;top:0;z-index:30;background:rgba(7,9,15,.8); border-bottom:1px solid var(--linie-fein);backdrop-filter:blur(14px)} .offenkopf .innen{max-width:var(--breite);margin:0 auto;padding:13px 22px; display:flex;align-items:center;gap:18px} .offenkopf nav{margin-left:auto;display:flex;gap:6px;align-items:center} .offenkopf a.punkt{padding:7px 13px;border-radius:999px;color:var(--tinte-leise);white-space:nowrap; text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s,background .2s} .offenkopf a.punkt:hover{color:var(--tinte);background:rgba(255,255,255,.06)} .offenkopf .knopf{margin-left:6px;white-space:nowrap} .vorschauband{background:var(--warn-hell);border-bottom:1px solid rgba(255,181,71,.35); padding:10px 22px;text-align:center;font-size:14px} .vorschauband b{color:var(--warn)} .offenmeldung{max-width:var(--breite);margin:22px auto 0;padding:0 22px} .offenmeldung .meldung{margin:0} .abschnitt{max-width:var(--breite);margin:0 auto;padding:92px 22px 0;scroll-margin-top:40px} .abschnitt .nummer{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--akzent);margin-bottom:16px} .abschnitt h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.04em; line-height:1.08;margin:0 0 14px;padding:0;border:0} .abschnitt .einleitung{font-size:1.08rem;color:var(--tinte-leise);max-width:60ch;margin:0 0 20px} .abschnitt .nachsatz{color:var(--tinte-leise);font-size:14.5px;margin:22px 0 0} .geplant{list-style:none;margin:26px 0 0;padding:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--linie)} .geplant li{padding:15px 0 15px 26px;border-bottom:1px solid var(--linie-fein); color:var(--tinte-leise);position:relative;font-size:15px;line-height:1.5} .geplant li::before{content:"";position:absolute;left:2px;top:23px;width:9px;height:9px; border-radius:50%;border:1.5px solid var(--leise)} .offenfuss{border-top:1px solid var(--linie);margin-top:110px} .offenfuss .innen{max-width:var(--breite);margin:0 auto;padding:26px 22px 34px; display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap; font-size:13.5px;color:var(--leise)} .offenfuss nav{display:flex;gap:6px 22px;flex-wrap:wrap} .offenfuss a{color:var(--tinte-leise);text-decoration:none} .offenfuss a:hover{color:var(--akzent)} /* Unter der Anmeldung: der Weg zur Startseite. */ .mehr-erfahren{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--linie-fein); font-size:13.5px;line-height:1.75;color:var(--tinte-leise);text-align:center} /* Dieselben Verweise unter den Karten-Seiten (Anmeldung, Passwort). */ .einstieg-mitte{grid-template-rows:1fr auto} .kartenfuss{display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:center; padding-top:22px;font-size:12.5px} .kartenfuss a{color:var(--leise);text-decoration:none} .kartenfuss a:hover{color:var(--akzent)} /* --- Hell -------------------------------------------------------------------- Zwei Sorten von Seiten stehen auf hellem Grund: * die oeffentlichen - Startseite, Zugang, Registrierung, Rechtstexte (alles auf basis_offen.html), immer; so kennen Vereine es von anderer Vereinssoftware; * die Anwendung hinter der Anmeldung, wenn das Konto es so gewaehlt hat (plattform/aussehen.py). Ohne Wahl bleibt sie dunkel, die Anmeldung auch. Beide tragen die Klasse „hell“ am , und beide haben dieselben Farben: Wer von craize.club in die Anwendung wechselt, bleibt im selben Haus. Es werden nur die Werte getauscht, nicht die Namen: Was an --tinte, --flaeche oder --akzent haengt, stimmt dadurch von selbst. Darunter stehen die Stellen, an denen mehr noetig ist als ein anderer Wert. Der Akzent ist das Blau der Marke, nicht ihr Cyan: #4cf0ff ist auf Weiss als Schrift nicht lesbar. Das Cyan bleibt Schmuck - im Zeichen, im Unterstrich der Ueberschrift, in getoenten Flaechen. ------------------------------------------------------------------------ */ html.hell{color-scheme:light; --papier:#ffffff; --flaeche:#f4f7fb; --flaeche2:#e8eef7; --erhaben:linear-gradient(180deg,#ffffff,#f8fafd); --tinte:#0c1a33; --tinte-leise:#3f4e66; --leise:#5d6b82; --linie:rgba(12,26,51,.12); --linie-fein:rgba(12,26,51,.07); --linie-stark:rgba(12,26,51,.22); --akzent:#1d5fe0; --akzent-2:#0891b2; --akzent-hell:rgba(29,95,224,.08); --verlauf:linear-gradient(120deg,#0891b2,#1d5fe0); --gut:#0f7a55; --gut-hell:rgba(15,122,85,.10); --warn:#96580a; --warn-hell:rgba(255,181,71,.20); --schlecht:#c0264a; --schlecht-hell:rgba(192,38,74,.08); --ein:#0f7a55; --aus:#b84a14; --cyan:#4cf0ff; --tief:#174bb5; /* Die Gegenstuecke zu dem, was im Dunklen fest verdrahtet war. */ --schleier:12,26,51; --akzent-rgb:29,95,224; --schatten:12,26,51; --schattenkraft:.3; --kopf:rgba(255,255,255,.92); --kopf-zweite:rgba(244,247,251,.9); --feld:#ffffff; --auf-voll:#ffffff; --auf-gut:#ffffff; --auf-warn:#ffffff; --auf-schlecht:#ffffff; --schlecht-stark:#a31d3d; --art-spiel:#5560d8; --art-sitzung:#b02fc7; } body.offen{background:var(--papier);color:var(--tinte)} html.hell ::selection{background:rgba(29,95,224,.18)} body.offen .offenkopf{background:rgba(255,255,255,.9);border-bottom-color:var(--linie)} body.offen .offenkopf a.punkt:hover{background:rgba(12,26,51,.05)} html.hell .wortmarke .teil{color:var(--leise)} html.hell .beta{border-color:rgba(150,88,10,.35)} /* Der volle Knopf: weiss auf dem Blau der Marke. */ html.hell .knopf{background:var(--akzent);border-color:var(--akzent);color:#fff; box-shadow:0 8px 20px -10px rgba(29,95,224,.75)} html.hell .knopf:hover{background:var(--tief);border-color:var(--tief);color:#fff} html.hell .knopf.leise{background:#fff;color:var(--tinte);border-color:var(--linie-stark);box-shadow:none} html.hell .knopf.leise:hover{background:#fff;border-color:var(--akzent);color:var(--akzent)} html.hell .knopf:disabled,html.hell .knopf[aria-disabled=true]{box-shadow:none} html.hell .knopf.gefahr{background:var(--schlecht);border-color:var(--schlecht);color:#fff; box-shadow:0 8px 20px -10px rgba(192,38,74,.7)} html.hell .knopf.gefahr:hover{background:var(--schlecht-stark);border-color:var(--schlecht-stark);color:#fff} html.hell form.formular,html.hell .materialkarte{box-shadow:0 20px 50px -34px rgba(12,26,51,.35)} html.hell .feld input[type=text],html.hell .feld input[type=email],html.hell .feld input[type=password], html.hell .feld input[type=date],html.hell .feld input[type=number],html.hell .feld input[type=search], html.hell .feld input[type=url],html.hell .feld input[type=tel],html.hell .feld select,html.hell .feld textarea{ background:#fff;border-color:var(--linie-stark)} html.hell .feld input:focus,html.hell .feld select:focus,html.hell .feld textarea:focus{ border-color:var(--akzent);box-shadow:0 0 0 3px rgba(29,95,224,.14);outline:0} html.hell .zustimmung .haken{background:#fff} html.hell .suchleiste input[type=date],html.hell .feld input[type=date], html.hell .feld input[type=time]{color-scheme:light} /* Im Monatsraster die Tage des Nachbarmonats: zurueckgenommen, nicht grau. */ html.hell .kaltag.fremd{background:var(--flaeche)} /* Die Plattformebene behaelt ihren warmen Akzent - nur so dunkel, dass er auf Weiss als Schrift traegt. */ html.hell body.plattform{--akzent:#96580a;--akzent-2:#c2410c;--akzent-hell:rgba(255,181,71,.18); --akzent-rgb:150,88,10;--tief:#7a4708;--verlauf:linear-gradient(120deg,#c2710c,#c2410c)} html.hell body.plattform .knopf{box-shadow:0 8px 20px -10px rgba(150,88,10,.7)} body.offen legend{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none; font-weight:700;color:var(--tinte)} body.offen .marker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0; text-transform:none;padding:4px 13px 4px 11px;border-radius:999px;background:var(--akzent-hell)} body.offen .marker::before{box-shadow:none} body.offen .rechtstext .fassung{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none} body.offen .rechtstext ol>li::before{font-family:var(--sans)} body.offen .offenfuss{background:var(--flaeche);margin-top:96px} body.offen .vorschauband{border-bottom-color:rgba(150,88,10,.3)} /* --- Startseite ------------------------------------------------------------- Aufbau wie bei anderer Vereinssoftware, damit sich niemand erst zurechtfinden muss: oben, was leichter wird, daneben die Anwendung; dann Alltag, Funktionen, wer dahintersteht, was es kostet, Fragen. Zwei Regeln halten diesen Abschnitt zusammen: * Alles heisst .st-… oder haengt an body.start - nichts hier faerbt auf andere Seiten ab. * Was sich bewegt, haengt an html.js. Die Klasse setzt start.js als Erstes. Ohne Skript steht die Seite einfach da: nichts ist versteckt, nichts wartet auf eine Bewegung, die nie kommt. ------------------------------------------------------------------------ */ body.start{overflow-x:hidden} html.st{scroll-behavior:smooth} .unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} html.js body.start .offenkopf{transition:box-shadow .3s} html.js body.start .offenkopf.gerollt{box-shadow:0 10px 30px -22px rgba(12,26,51,.5)} body.start .offenkopf a.punkt.aktiv{color:var(--akzent);background:var(--akzent-hell)} body.start .knopf svg{width:18px;height:18px;flex:none;transition:transform .25s var(--ruck)} body.start .knopf:hover svg{transform:translateX(4px)} /* Der Aufmacher: links der Satz, rechts die Anwendung. */ .st-held{position:relative;isolation:isolate} .st-held::before{content:"";position:absolute;z-index:-1;inset:0 0 -60px 0; background:radial-gradient(52% 70% at 88% 18%,#dff6fd 0%,rgba(223,246,253,0) 70%), radial-gradient(46% 60% at 6% 0%,#eaf0ff 0%,rgba(234,240,255,0) 70%)} .st-held .innen{max-width:var(--breite);margin:0 auto;padding:68px 22px 30px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px;align-items:center} .st-etikett{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:5px 14px 5px 6px; border-radius:999px;background:#fff;border:1px solid var(--linie); font-size:13.5px;font-weight:500;color:var(--tinte-leise)} .st-etikett b{font-weight:700;color:var(--warn);background:var(--warn-hell);border-radius:999px;padding:2px 10px} .st-held h1{font-size:clamp(2.25rem,4.5vw,3.45rem);line-height:1.08;letter-spacing:-.035em; margin:0 0 20px;color:var(--tinte)} /* Der Strich unter den letzten Worten - das Cyan der Marke, von Hand gezogen. */ .st-held h1 em{font-style:normal;white-space:nowrap;padding-bottom:.12em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 2, 120 13, 180 6 S 270 4, 297 8' fill='none' stroke='%234cd9f0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .32em} .st-held .vorspann{font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.6;color:var(--tinte-leise); max-width:33em;margin:0 0 28px} .st-held .knopfzeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .st-klein{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--leise);max-width:34em} .st-zusagen{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--linie); display:flex;flex-wrap:wrap;gap:10px 26px} .st-zusagen li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--tinte)} .st-zusagen svg{width:18px;height:18px;flex:none;color:var(--gut)} .st-held .st-bild img{aspect-ratio:1280/1000;object-fit:cover;object-position:top} .st-held .st-bild figcaption{font-size:13px;color:var(--leise)} html.js .st-held .st-bild{opacity:0;transform:translateY(26px);animation:st-herein .9s var(--ruck) .15s forwards} @keyframes st-herein{to{opacity:1;transform:none}} /* Abschnitte. */ .st-abschnitt{max-width:var(--breite);margin:0 auto;padding:92px 22px 0;scroll-margin-top:68px} .st-abschnitt>h2,.st-kopf h2{font-size:clamp(1.75rem,3.1vw,2.45rem);font-weight:700;letter-spacing:-.03em; line-height:1.12;margin:0 0 14px;padding:0;border:0;color:var(--tinte)} .st-kopf{max-width:44em;margin:0 0 34px} .st-kopf.mitte{margin-left:auto;margin-right:auto;text-align:center} .st-kopf p{margin:0;font-size:1.08rem;line-height:1.62;color:var(--tinte-leise)} .st-kopf p a{color:var(--akzent)} /* „Kommt euch das bekannt vor?“ - drei Szenen aus dem Vereinsalltag. */ .st-szenen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .st-szene{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:26px 26px 24px; box-shadow:0 18px 44px -34px rgba(12,26,51,.4)} .st-szene .zeichen{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--akzent-hell);color:var(--akzent);margin-bottom:18px} .st-szene h3{font-size:1.22rem;line-height:1.3;letter-spacing:-.015em;margin:0 0 8px;color:var(--tinte)} .st-szene p{margin:0;font-size:15px;line-height:1.6;color:var(--tinte-leise)} .st-nachsatz{margin:28px auto 0;max-width:40em;text-align:center;font-size:1.08rem;line-height:1.6;color:var(--tinte)} /* Die Ansichten der Anwendung (plattform/startbilder.py): ein dunkles Fenster auf der hellen Seite - die Anwendung ist dunkel, und so sieht man es auch. */ .st-bild{margin:0;min-width:0} .st-bild .rahmen{position:relative;display:block;overflow:hidden;text-decoration:none; border:1px solid rgba(12,26,51,.2);border-radius:14px;background:#0b0f1a; box-shadow:0 40px 80px -42px rgba(12,26,51,.6),0 14px 30px -20px rgba(29,95,224,.35); transition:transform .4s var(--ruck),box-shadow .4s} .st-bild .rahmen:hover,.st-bild .rahmen:focus-visible{transform:translateY(-3px); box-shadow:0 46px 90px -40px rgba(12,26,51,.65),0 18px 36px -18px rgba(29,95,224,.5)} .st-bild .leiste{display:flex;align-items:center;gap:6px;padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.09);background:#0d1220; font-size:11.5px;font-weight:500;letter-spacing:.02em;color:#8d98ad;white-space:nowrap} .st-bild .leiste i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);flex:none} .st-bild .leiste b{font-weight:500;margin-left:8px;overflow:hidden;text-overflow:ellipsis} .st-bild .leiste em{font-style:normal;margin-left:auto;padding:1px 9px;border-radius:999px; border:1px solid rgba(255,181,71,.45);color:#ffb547;flex:none} .st-bild img{display:block;width:100%;height:auto} .st-bild .lupe{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;color:#fff;background:rgba(7,9,15,.78); border:1px solid rgba(255,255,255,.25);opacity:.85;transform:scale(.92); transition:opacity .25s,transform .25s var(--ruck)} .st-bild .lupe svg{width:18px;height:18px} .st-bild .rahmen:hover .lupe,.st-bild .rahmen:focus-visible .lupe{opacity:1;transform:none} .st-bild figcaption{margin-top:12px;color:var(--tinte-leise);font-size:14px;line-height:1.5} .st-muster{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--leise)} /* Suchen und aufklappen. Die Leiste zeigt start.js - ohne Skript bleibt sie verborgen, statt Knoepfe zu zeigen, die nichts tun. */ .st-leiste{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px} .st-leiste[hidden]{display:none} .st-leiste .suche{flex:1 1 320px;display:flex;align-items:center;gap:11px;padding:0 18px; border:1px solid var(--linie-stark);border-radius:999px;background:#fff; transition:border-color .2s,box-shadow .2s} .st-leiste .suche:focus-within{border-color:var(--akzent);box-shadow:0 0 0 3px rgba(29,95,224,.14)} .st-leiste .suche svg{width:18px;height:18px;flex:none;color:var(--leise)} .st-leiste input{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--tinte); font:inherit;font-size:15.5px;padding:13px 0;outline:0} .st-leiste input::placeholder{color:var(--leise)} .st-leiste .treffer{font-size:13.5px;font-weight:500;color:var(--tinte-leise)} .st-kapitel{display:grid;gap:12px} .kapitel{border:1px solid var(--linie);border-radius:var(--radius);scroll-margin-top:84px;background:#fff; box-shadow:0 14px 36px -32px rgba(12,26,51,.45);transition:border-color .3s,box-shadow .3s} .kapitel:hover{border-color:var(--linie-stark)} .kapitel[open]{border-color:rgba(29,95,224,.4);box-shadow:0 24px 54px -36px rgba(12,26,51,.5)} .kapitel[hidden]{display:none} .kapitel summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:52px minmax(0,1fr) auto 36px;gap:2px 20px;align-items:center;padding:20px 22px} .kapitel summary::-webkit-details-marker{display:none} .kapitel summary .zeichen{grid-column:1;grid-row:1 / span 2;align-self:start;width:52px;height:52px; border-radius:14px;display:grid;place-items:center;background:var(--akzent-hell);color:var(--akzent); transition:background .3s,transform .3s var(--ruck)} .kapitel summary:hover .zeichen{background:rgba(29,95,224,.14);transform:scale(1.04)} .kapitel .titel{grid-column:2;grid-row:1;min-width:0} .kapitel .name{display:block;font-family:var(--serif);font-weight:700;font-size:1.32rem; letter-spacing:-.02em;line-height:1.2;color:var(--tinte);transition:color .2s} .kapitel summary:hover .name{color:var(--akzent)} .kapitel .unter{display:block;color:var(--tinte-leise);font-size:14.5px;margin-top:3px} .kapitel .anzahl{grid-column:3;grid-row:1;white-space:nowrap;font-size:13px;font-weight:500;color:var(--leise)} .kapitel .anzahl b{color:var(--tinte);font-weight:700} .kapitel .pfeil{grid-column:4;grid-row:1 / span 2;align-self:center;width:36px;height:36px; border-radius:50%;border:1px solid var(--linie-stark);position:relative; transition:transform .4s var(--ruck),border-color .3s,background .3s} .kapitel .pfeil::before,.kapitel .pfeil::after{content:"";position:absolute;left:50%;top:50%; width:13px;height:2px;border-radius:1px;background:var(--tinte);transform:translate(-50%,-50%); transition:transform .4s var(--ruck)} .kapitel .pfeil::after{transform:translate(-50%,-50%) rotate(90deg)} .kapitel summary:hover .pfeil{border-color:var(--akzent)} .kapitel[open] .pfeil{transform:rotate(180deg);border-color:var(--akzent);background:var(--akzent-hell)} .kapitel[open] .pfeil::after{transform:translate(-50%,-50%) rotate(0deg)} .kapitel .vorschau{grid-column:2 / span 2;grid-row:2;color:var(--leise);font-size:13.5px; line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kapitel[open] .vorschau{visibility:hidden;height:0} .kapitel .funktionen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;padding:2px 22px 24px 94px} .kapitel[open] .funktionen,.kapitel[open] .st-bilder{animation:st-oeffnen .45s var(--ruck)} @keyframes st-oeffnen{from{opacity:0;transform:translateY(-8px)}} .funktion{border-radius:14px;padding:18px 20px 19px;background:var(--flaeche)} .funktion[hidden]{display:none} .funktion h3{font-size:1.02rem;line-height:1.3;margin:0 0 6px;color:var(--tinte)} .funktion p{margin:0;color:var(--tinte-leise);font-size:14.5px;line-height:1.58} .funktion mark,.kapitel mark{background:#ffe89a;color:inherit;border-radius:3px;padding:0 1px} .st-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:4px 22px 22px 94px} .st-bilder.eins .st-bild{grid-column:1 / -1;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:center} .st-bilder.eins figcaption{margin:0;font-size:1.04rem;line-height:1.55;color:var(--tinte)} /* Wer sucht, will die Treffer sehen - nicht erst an Bildern vorbeirollen. */ .st-kapitel.sucht .st-bilder{display:none} .st-leer{margin:22px 0 0;color:var(--tinte-leise)} .st-leer[hidden]{display:none} /* Wer dahintersteht. */ .st-wir{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start} .st-wir .karte{background:var(--flaeche);border-radius:var(--radius);padding:28px} .st-wir .kopf{display:flex;align-items:center;gap:16px;margin-bottom:18px} .st-wir .bild{width:88px;height:88px;border-radius:50%;flex:none;display:block;object-fit:cover; background:var(--flaeche2);box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--akzent-2)} .st-wir .name{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--tinte)} .st-wir .amt{font-size:14px;color:var(--leise)} .st-wir .karte p{margin:0;font-size:15.5px;line-height:1.62;color:var(--tinte-leise)} .st-wir .text>p{margin:0 0 16px;font-size:1.08rem;line-height:1.66;color:var(--tinte-leise)} .st-wir .text>p:first-of-type{color:var(--tinte)} .st-versprechen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px} .st-versprechen li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px} .st-versprechen svg{grid-row:1 / span 2;width:24px;height:24px;color:var(--gut);margin-top:2px} .st-versprechen b{font-family:var(--serif);font-size:1.06rem;color:var(--tinte)} .st-versprechen span{font-size:15px;line-height:1.58;color:var(--tinte-leise)} /* Stimmen aus Vereinen - erscheint erst, wenn es welche gibt (plattform/stimmen.py). */ .st-stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .st-stimme{margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:26px} .st-stimme blockquote{margin:0 0 16px;font-size:1.04rem;line-height:1.6;color:var(--tinte)} .st-stimme figcaption{font-size:14px;color:var(--leise)} .st-stimme figcaption b{display:block;color:var(--tinte);font-size:15px} /* Was es kostet. */ .st-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .st-karten.drei{grid-template-columns:repeat(3,minmax(0,1fr))} .st-karte{border:1px solid var(--linie);border-radius:var(--radius);padding:28px;background:#fff} .st-karte .zeichen{width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--akzent-hell);color:var(--akzent);margin-bottom:18px;font-weight:700;font-size:15px} .st-karte h3{font-size:1.2rem;margin:0 0 8px;letter-spacing:-.015em;color:var(--tinte)} .st-karte p{margin:0;color:var(--tinte-leise);font-size:15px;line-height:1.62} .st-wortlaut{margin:22px 0 0;text-align:center;color:var(--leise);font-size:14px} /* Fragen und Antworten. */ .st-fragen{max-width:800px;margin:0 auto;border-top:1px solid var(--linie)} .st-frage{border-bottom:1px solid var(--linie)} .st-frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center; gap:18px;padding:19px 4px;font-family:var(--serif);font-weight:700;font-size:1.1rem; letter-spacing:-.01em;color:var(--tinte)} .st-frage summary::-webkit-details-marker{display:none} .st-frage summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--linie-stark);font-family:var(--sans);font-weight:400;font-size:20px;line-height:1; color:var(--tinte);transition:transform .3s var(--ruck),border-color .2s} .st-frage[open] summary::after{content:"–";border-color:var(--akzent);color:var(--akzent)} .st-frage summary:hover{color:var(--akzent)} .st-frage p{margin:0;padding:0 44px 20px 4px;font-size:15.5px;line-height:1.66;color:var(--tinte-leise)} .st-frage p a{color:var(--akzent)} /* Der Schluss: ein dunkles Band - hier beginnt die Anwendung. */ .st-aufruf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center; border-radius:28px;padding:clamp(30px,5vw,60px);position:relative;overflow:hidden;color:#eef2f8; background:radial-gradient(70% 120% at 100% 0%,rgba(76,240,255,.28),rgba(76,240,255,0) 60%), linear-gradient(135deg,#0c1a33,#123a8f)} .st-aufruf h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1; margin:0 0 12px;padding:0;border:0;color:#fff} .st-aufruf p{margin:0 0 26px;font-size:1.06rem;line-height:1.6;color:#c9d6ee;max-width:30em} .st-aufruf .knopfzeile{display:flex;flex-wrap:wrap;gap:12px} body.offen .st-aufruf .knopf{background:#fff;border-color:#fff;color:#0c1a33;box-shadow:none} body.offen .st-aufruf .knopf:hover{background:var(--cyan);border-color:var(--cyan);color:#07090f} body.offen .st-aufruf .knopf.leise{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} body.offen .st-aufruf .knopf.leise:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff} .st-schritte{list-style:none;margin:0;padding:0;counter-reset:schritt} .st-schritte li{counter-increment:schritt;position:relative;padding:15px 0 15px 54px; border-top:1px solid rgba(255,255,255,.16)} .st-schritte li:first-child{border-top:0} .st-schritte li::before{content:counter(schritt);position:absolute;left:0;top:14px;width:34px;height:34px; border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12); font-family:var(--serif);font-weight:700;font-size:15px;color:#fff} .st-schritte b{display:block;font-family:var(--serif);font-size:1.08rem;letter-spacing:-.01em;color:#fff} .st-schritte span{color:#c9d6ee;font-size:14.5px;line-height:1.5} /* Die grosse Ansicht eines Bildes. */ .st-gross{width:min(96vw,1340px);max-width:none;max-height:94vh;padding:0;overflow:hidden; border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#0b0f1a;color:#eef2f8} .st-gross[open]{display:flex;flex-direction:column} .st-gross::backdrop{background:rgba(12,26,51,.72);backdrop-filter:blur(6px)} .st-gross .rolle{overflow:auto;min-height:0} .st-gross img{display:block;width:100%;height:auto} .st-gross p{margin:0;padding:12px 60px 14px 18px;border-top:1px solid rgba(255,255,255,.1); color:#aab4c6;font-size:14px} .st-gross p:empty{display:none} .st-gross .zu{position:absolute;top:10px;right:10px;z-index:1;width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.25);background:rgba(7,9,15,.82);color:#eef2f8; font-size:22px;line-height:1;cursor:pointer} .st-gross .zu:hover{border-color:#4cf0ff;color:#4cf0ff} /* Einblenden beim Rollen - nur mit Skript, sonst steht alles da. */ html.js .st-zeig{opacity:0;transform:translateY(22px); transition:opacity .8s var(--ruck),transform .8s var(--ruck),border-color .3s,box-shadow .3s} html.js .st-zeig.da{opacity:1;transform:none} html.js .st-zeig[data-stufe="1"]{transition-delay:.08s} html.js .st-zeig[data-stufe="2"]{transition-delay:.16s} @media(max-width:1000px){ .st-held .innen{grid-template-columns:1fr;gap:36px;padding-top:44px} .st-szenen,.st-karten,.st-karten.drei,.st-wir,.st-aufruf{grid-template-columns:1fr} .st-wir{gap:26px} .st-bilder{padding-left:22px} .kapitel .funktionen{padding-left:22px} } @media(max-width:640px){ .st-held .innen,.st-abschnitt{padding-left:16px;padding-right:16px} .st-abschnitt{padding-top:68px} .st-held .knopfzeile .knopf,.st-aufruf .knopfzeile .knopf{flex:1 1 100%;justify-content:center} .st-leiste .suche{flex-basis:100%} .kapitel summary{grid-template-columns:44px minmax(0,1fr) 32px;gap:4px 14px;padding:16px} .kapitel summary .zeichen{width:44px;height:44px;border-radius:12px} .kapitel .name{font-size:1.16rem} .kapitel .anzahl{grid-column:2;grid-row:2} .kapitel .vorschau{display:none} .kapitel .pfeil{grid-column:3;width:32px;height:32px} .kapitel .funktionen{padding:2px 16px 18px;grid-template-columns:1fr} .st-bilder{padding:2px 16px 16px;grid-template-columns:1fr} .st-bilder.eins .st-bild{grid-template-columns:1fr;gap:12px} .st-bild .leiste em{display:none} .st-frage p{padding-right:4px} .st-aufruf{border-radius:22px} } @media(prefers-reduced-motion:reduce){ html.st{scroll-behavior:auto} html.js .st-zeig,html.js .st-held .st-bild{opacity:1;transform:none;animation:none} .st-bild .rahmen,.st-bild .lupe{transition:none} .st-bild .rahmen:hover{transform:none} } /* --- Rechtstexte ---------------------------------------------------------- Lesetext: schmale Spalte, Absaetze mit (1), (2) wie im Gesetz. ------------------------------------------------------------------------ */ main.rechtstext{max-width:780px;padding-top:64px} .rechtstext .fassung{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--leise);margin:0 0 30px} .rechtstext h2{font-size:1.18rem;margin:38px 0 12px;padding:0;border:0} .rechtstext h2.anlage{font-size:1.45rem;margin-top:64px;padding-top:30px;border-top:1px solid var(--linie)} .rechtstext h3{font-size:1rem;margin:26px 0 8px;color:var(--tinte)} .rechtstext p,.rechtstext li{color:var(--tinte-leise);font-size:15.5px;line-height:1.68} .rechtstext strong{color:var(--tinte);font-weight:600} .rechtstext ol{list-style:none;margin:0;padding:0;counter-reset:absatz} .rechtstext ol>li{counter-increment:absatz;position:relative;padding-left:40px;margin-bottom:10px} .rechtstext ol>li::before{content:"(" counter(absatz) ")";position:absolute;left:0;top:0; font-family:var(--mono);font-size:12.5px;color:var(--leise);line-height:2.1} .rechtstext ul{margin:0 0 12px;padding-left:20px} .rechtstext ul li{margin-bottom:6px} .rechtstext table{margin:14px 0 18px;font-size:14.5px} .rechtstext td{color:var(--tinte-leise)} .rechtstext.eingebettet{max-width:860px;background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:8px 30px 30px} /* --- Registrierung ------------------------------------------------------- */ main.anmeldung{max-width:760px;padding-top:64px} main.anmeldung.schmal{max-width:620px} form.formular.breit{max-width:none} .zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px} .hilfe{font-size:12.5px;color:var(--leise);line-height:1.5} .fehler{font-size:13.5px;color:var(--schlecht);font-weight:500} /* Das Feld, das Menschen nicht sehen sollen. Nicht display:none - das erkennen die Programme, fuer die es gedacht ist. */ .nicht-ausfuellen{position:absolute;left:-6000px;top:auto;width:1px;height:1px;overflow:hidden} .zustimmung .haken{display:flex;gap:12px;align-items:flex-start;padding:12px 14px; border:1px solid var(--linie);border-radius:var(--radius-klein);margin-bottom:10px; font-size:14.5px;line-height:1.5;color:var(--tinte);cursor:pointer;background:var(--feld)} .zustimmung .haken:hover{border-color:var(--linie-stark)} .zustimmung .haken input{margin-top:3px;width:17px;height:17px;flex:none} .zustimmung .fehler{margin:-4px 0 12px 2px} .aktionen .hilfe{flex:1 1 260px} /* --- /adm/einstellungen: der Stand auf einen Blick ------------------------ */ .standtafel{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:14px; margin-bottom:30px} .standtafel section{background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius);padding:18px 20px} .standtafel h3{margin:0 0 10px;font-size:1.02rem;display:flex;justify-content:space-between; align-items:center;gap:10px} .standtafel ul{list-style:none;margin:0 0 4px;padding:0} .standtafel li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;padding:6px 0; border-top:1px solid var(--linie-fein);font-size:14px} .standtafel li span{color:var(--leise);font-size:13px;white-space:nowrap} .standtafel .mangel{margin:8px 0 0;font-size:13px;color:var(--warn);line-height:1.45} .standtafel form{margin-top:12px;gap:8px} .feld.schalter label{display:flex;gap:10px;align-items:center;font-size:15px; color:var(--tinte);font-weight:500;margin:0 0 4px} .feld.schalter .hilfe{margin-left:27px} .feld.schalter .fehler{margin:5px 0 0 27px} @media(max-width:980px){ /* Vier Sprungmarken und zwei Knoepfe passen daneben nicht mehr in eine Zeile - die Abschnitte erreicht man hier durch Rollen. */ body.start .offenkopf a.punkt{display:none} } @media(max-width:640px){ .offenkopf .innen{padding:11px 16px;gap:10px} .offenkopf a.punkt{display:none} .offenkopf .knopf{margin-left:0} /* Fuer zwei Knoepfe neben der Marke reicht ein Handy nicht. Der zum Registrieren steht ohnehin gleich darunter. */ .offenkopf .knopf.leise+.knopf{display:none} .abschnitt{padding-left:16px;padding-right:16px} .abschnitt{padding-top:64px} .geplant,.zweispaltig{grid-template-columns:1fr} .offenfuss{margin-top:74px} .offenfuss .innen{padding:22px 16px 30px} main.rechtstext,main.anmeldung{padding-top:38px} .rechtstext ol>li{padding-left:32px} .rechtstext.eingebettet{padding:4px 18px 20px} } /* --- Geführte Einrichtung -------------------------------------------------- Die Leiste zeigt, wo man ist und was schon da ist. Sie ist anklickbar: Niemand muss die Schritte der Reihe nach gehen. ------------------------------------------------------------------------ */ .schrittleiste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 34px} .schrittleiste a{display:flex;gap:11px;align-items:center;padding:12px 14px;text-decoration:none; color:var(--tinte-leise);background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--radius-klein);transition:border-color .2s} .schrittleiste a:hover{border-color:var(--linie-stark)} .schrittleiste a.aktiv{border-color:var(--akzent);color:var(--tinte);background:var(--akzent-hell)} .schrittleiste .zahl{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-family:var(--mono);font-size:12px;border:1px solid var(--linie-stark);color:var(--leise)} /* Die Leiste ist ein