/* navigator/spalten.css — DIE RUHIGE FLÄCHE (08.10.2026): Seitenspalten ein- und ausklappen · Scrollleisten wie am Mac · Lesebreite · PDF-Export abgeschaltet. EIN Modul für alle Desktop-Seiten der Begegnung (mit Zeit, ohne Zeit, Profi). Klaus 08.10.: »Ja, leg los – offen und mit schlanken Scrollleisten. Und wie du sagst, alles über ein Modul steuerbar. Wenn der Klient das erste mal öffnet, sollte es offen sein, nicht zugeklappt, wichtig ist, das die Klappfunktion leicht zu finden ist. Was die Scrolleisten angeht, … es geht Richtung Apple. … Diese PDF-Export-Funktion … wir deaktivieren sie.« Anlass: Rückmeldungen aus dem Testkreis (»zu überladen«). Wo die Werkstatt-Version »Beginner« liegt (nur DEV), nutzt sie dasselbe Modul. Die STELLUNG (spalte-links-zu / spalte-rechts-zu) steht an : Der Vorgriff im Kopf jeder Seite setzt die gemerkte Stellung, BEVOR der Browser malt — sonst blitzte die offene Fläche auf und klappte sichtbar zu (gemessen 08.10.: bei jedem Laden). Kopf, Knöpfe, Scrollleisten und Lesebreite hängen an body.spalten-modul (setzt navigator/spalten.js); fehlt das Skript, nimmt der Vorgriff die Stellung beim Laden zurück — dann bleibt die Seite wie bisher. Werkzeug: scripts/dev/spalten/ (Prüfstand). */ /* ── EINKLAPPEN ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ html.spalte-links-zu body { grid-template-columns: 44px 3fr 1fr; } html.spalte-rechts-zu body { grid-template-columns: 1fr 3fr 44px; } html.spalte-links-zu.spalte-rechts-zu body { grid-template-columns: 44px 3fr 44px; } /* eingeklappt: alles in der Spalte ruht, nur ihr Kopf bleibt — als schmale Leiste */ html.spalte-links-zu #left-panel > :not(.spalte-kopf), html.spalte-rechts-zu #right-panel > :not(.spalte-kopf) { display: none !important; } /* Der Kopf jeder Seitenspalte steht immer oben (auch wenn ein Modul später etwas davor einfügt) */ .spalte-kopf { order: -1; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 30px; user-select: none; } .spalte-kopf--links { justify-content: flex-end; } .spalte-kopf--rechts { justify-content: flex-start; } /* Der Knopf: leicht zu finden — Pfeil UND Wort, im Haus-Lila, ruhig */ .spalte-knopf { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer; font-family: 'Jura', sans-serif; font-size: 0.74rem; letter-spacing: 0.05em; line-height: 1; color: #E7DFF6; background: rgba(168,112,220,0.12); border: 1px solid rgba(168,112,220,0.42); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } .spalte-knopf__pfeil { font-size: 0.72rem; } .spalte-knopf:hover, .spalte-knopf:focus-visible { background: rgba(168,112,220,0.30); border-color: rgba(168,112,220,0.75); outline: none; } .spalte-kopf__name { display: none; font-family: 'Jura', sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; color: #B9AFD2; white-space: nowrap; } /* Beim ersten Besuch auf einem Gerät leuchten die Knöpfe dreimal sanft auf — dann nie wieder (Merker im Browser) */ .spalte-knopf.spalte-hinweis { animation: spalteHinweis 1.6s ease-in-out 3; } @keyframes spalteHinweis { 0%, 100% { box-shadow: 0 0 0 0 rgba(168,112,220,0); } 50% { box-shadow: 0 0 0 6px rgba(168,112,220,0.35), 0 0 18px rgba(168,112,220,0.45); background: rgba(168,112,220,0.30); } } @media (prefers-reduced-motion: reduce) { .spalte-knopf.spalte-hinweis { animation: none; } } /* eingeklappt: eine schmale Leiste — oben der Pfeil, darunter senkrecht der Name; die ganze Leiste öffnet */ html.spalte-links-zu #left-panel > .spalte-kopf, html.spalte-rechts-zu #right-panel > .spalte-kopf { flex: 1 1 auto; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 6px; cursor: pointer; border: 1px solid rgba(168,112,220,0.22); border-radius: 14px; background: rgba(168,112,220,0.05); transition: background 0.2s; } html.spalte-links-zu #left-panel > .spalte-kopf:hover, html.spalte-rechts-zu #right-panel > .spalte-kopf:hover { background: rgba(168,112,220,0.12); } html.spalte-links-zu #left-panel .spalte-knopf, html.spalte-rechts-zu #right-panel .spalte-knopf { width: 28px; padding: 0; justify-content: center; } html.spalte-links-zu #left-panel .spalte-knopf__wort, html.spalte-rechts-zu #right-panel .spalte-knopf__wort { display: none; } html.spalte-links-zu #left-panel .spalte-kopf__name, html.spalte-rechts-zu #right-panel .spalte-kopf__name { display: block; writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 10px; } /* ── LESEBREITE ───────────────────────────────────────────────────────────────────────────────────────────────────────── Einklappen macht die Mitte breiter, nicht die Zeilen: navis Spalte bleibt höchstens 1180 px breit und steht mittig. Bei offenen Spalten ändert sich auf üblichen Schirmen nichts; ohne diese Zeile liefen Antworten über ~1.900 px. */ body.spalten-modul #navigator { padding-left: max(15px, calc((100% - 1180px) / 2)); padding-right: max(15px, calc((100% - 1180px) / 2)); } /* ── SCROLLLEISTEN WIE AM MAC (aus dem Testkreis: »es geht Richtung Apple«) ───────────────────────────────────────────── Schmal, abgerundet, ohne Spur und Pfeile; in Ruhe nur ein Hauch, beim Darüberfahren deutlicher, beim Scrollen am deutlichsten (das Skript setzt dafür kurz .scrollt). Chrome, Edge und Safari lesen die ::-webkit-Regeln; Firefox die Standard-Eigenschaften — getrennt, weil Chrome die ::-webkit-Regeln überginge, sobald die Standard-Eigenschaften gesetzt sind. */ body.spalten-modul ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } body.spalten-modul ::-webkit-scrollbar-track, body.spalten-modul ::-webkit-scrollbar-corner { background: transparent; } body.spalten-modul ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } body.spalten-modul ::-webkit-scrollbar-thumb { background-color: rgba(168,112,220,0.12); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; min-height: 40px; } body.spalten-modul :hover::-webkit-scrollbar-thumb { background-color: rgba(168,112,220,0.32); } body.spalten-modul .scrollt::-webkit-scrollbar-thumb { background-color: rgba(168,112,220,0.50); } body.spalten-modul ::-webkit-scrollbar-thumb:hover { background-color: rgba(168,112,220,0.65); } @supports not selector(::-webkit-scrollbar) { body.spalten-modul, body.spalten-modul * { scrollbar-width: thin; scrollbar-color: rgba(168,112,220,0.32) transparent; } } /* ── PDF-EXPORT ABGESCHALTET ──────────────────────────────────────────────────────────────────────────────────────────── Klaus 08.10.: »Diese PDF-Export-Funktion, die bauen wir erstmal raus oder besser, wir deaktivieren sie. Die ist ja noch aus der Anfängerzeit.« Der Code bleibt unberührt (navigator/exportUtils.js); zum Wiedereinschalten nur diese Regel entfernen. Absichtlich ohne body.spalten-modul — sie gilt auch, falls das Skript einmal nicht läuft. */ #export-button-wrapper { display: none !important; }