/* Typorama Web — Kit Styles Layered on top of colors_and_type.css Enthält nur die tatsächlich verwendeten Komponenten (Header/Nav, Buttons, Rubric, Footer + Responsive). Frühere ungenutzte Vorlagen-Komponenten (tp-hero/section/abt/courses/news/visit/prices/schild) am 2026-07-13 entfernt. */ * { box-sizing: border-box; } /* ⚑⚑ SCREEN-PAPIER statt Weiß — auf allen Seiten (Percy, 25.08.2026: «aber immer noch Papier oder?»). Vorher trug die Startseite Papier (#f6f6f4) und die übrigen 31 Seiten Weiß. Und weil die vereinheitlichte Kopfzeile den Papierton mitbrachte, saß auf jenen 31 Seiten eine papierfarbene Leiste auf weißem Grund — eine sichtbare Naht, die ich beim Vereinheitlichen selbst eingebaut habe. ⚑ Die Richtung folgt Percys Begründung zur Insel: die Startseite war die neuere, schönere Fassung, die nur nie nachgezogen wurde. Also wandert ihr Ton ins Haus, nicht das Weiß auf sie — genauso wie zuvor schon die Grundschrift (20 px / 1,55). ⚑ Zurückdrehen ist ein Wert: `--tp-bg` auf `var(--tp-white)`. */ html, body { margin: 0; padding: 0; background: var(--tp-bg); } body { font-family: var(--tp-font-serif); color: var(--tp-fg); min-height: 100vh; } /* ⚑⚑ Formularelemente erben die Textfarbe NICHT von selbst — der Browser gibt jedem button, input, select und textarea seine eigene Systemfarbe, und die ist Volltonschwarz. Folge: nach Percys Entscheid vom 04.09.2026 («Text ist Ink, #000000 bleibt Linien, Rahmen, Balken») standen 39 Stellen weiter auf #000000, obwohl im ganzen CSS keine schwarze Textfarbe mehr stand — ein Knopf sah anders aus als derselbe Knopf als . Gemessen mit _werkzeuge/textfarben.py. Wer hier eine Ausnahme braucht, setzt sie ausdrücklich; .tp-btn und .tp-btn--ghost-inverse tun genau das. */ button, input, select, textarea, optgroup, option { color: inherit; } /* ⚑ Sicherheitsnetz zur Zeile darüber. Mit `color: inherit` verlieren die Elemente auch den Grauton, den der Browser einem ABGESCHALTETEN Bedienelement von sich aus gibt (Chrome: rgba(16,16,16,.3)). Gemessen am 04.09.2026 verließ sich genau eine Stelle darauf — `.pfeil` auf besuch.html, und die hat mit `opacity:.25` ihre eigene Anzeige. Damit die nächste es nicht muss, steht der abgeschaltete Zustand hier ausdrücklich. Seiten mit eigener Regel (`.weiter:disabled` 0-2-0) schlagen diese hier (0-1-1). */ button:disabled, input:disabled, select:disabled, textarea:disabled { color: var(--tp-ink-muted); } /* ===== HEADER ========================================================== */ /* ⚑ Steht seit 24.08.2026 in `ds/kopfzeile.css` — eine Fassung für alle Seiten, gebaut von `_werkzeuge/kopfzeile_setzen.py`. Hier NICHTS mehr ergänzen: zwei Quellen für dieselbe Kopfzeile waren der Grund, warum es sieben gab. */ /* ===== BUTTONS ========================================================= */ .tp-btn { font-family: var(--tp-font-sans); font-weight: 700; font-size: var(--tp-t-klein); text-transform: uppercase; letter-spacing: .14em; padding: 14px 22px; border: 1px solid var(--tp-black); background: var(--tp-black); color: var(--tp-white); cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 180ms; } .tp-btn:hover { opacity: .85; } .tp-btn--yellow { background: var(--tp-yellow); color: var(--tp-ink); border-color: var(--tp-yellow); } .tp-btn--ghost { background: transparent; color: var(--tp-ink); } /* ⚑ war hart #000 — Percy-Entscheid 04.09.2026: Text ist Ink, Volltonschwarz bleibt Linien, Rahmen, Balken */ .tp-btn--ghost-inverse { background: transparent; color: var(--tp-white); border-color: var(--tp-white); } /* Ghost-Button auf dunklem Grund */ .tp-btn--sm { padding: 10px 16px; font-size: var(--tp-t-klein); } /* ⚑⚑ Der abgeschaltete Knopf — neu am 06.09.2026, und er FEHLTE hier bis dahin. Aufgefallen beim Percy-Entscheid «auf den Hausknopf umstellen»: der eigene `.knopf` von artikel.html und warenkorb.html hatte einen `:disabled`-Zustand, der Hausknopf nicht. Ohne diese Regel hätte ein nicht bestellbarer Artikel («nicht am Lager») einen Knopf gezeigt, der aussieht wie ein bestellbarer — ein Knopf, der nichts tut und so aussieht, als täte er etwas. Die Werte sind die des bisherigen `.knopf:disabled`. ⚑⚑ Sie steht NACH den Varianten, und das ist der Grund: `.tp-btn:disabled` und `.tp-btn--yellow` haben dieselbe Spezifität (0,2,0). Weiter oben notiert hätte die gelbe Variante gewonnen — ein abgeschalteter Kaufknopf wäre leuchtend gelb geblieben und hätte ausgesehen wie ein bestellbarer. Beim ersten Anlauf am 06.09. stand sie oben. ⚑ `opacity` beim Überfahren ausdrücklich zurückgenommen: sonst hellt sich ein abgeschalteter Knopf unter dem Zeiger auf und wirkt doch wieder bedienbar. */ .tp-btn:disabled, .tp-btn[aria-disabled="true"] { background: var(--tp-bg-soft); color: var(--tp-ink-muted); border-color: var(--tp-border); cursor: not-allowed; } .tp-btn:disabled:hover, .tp-btn[aria-disabled="true"]:hover { opacity: 1; } .tp-rubric--muted { color: var(--tp-ink-muted); } /* ===== FOOTER ========================================================== */ /* ⚑ Steht seit 24.08.2026 in `ds/fusszeile.css` — eine Fassung für alle Seiten, gebaut von `_werkzeuge/fusszeile_setzen.py`. Hier NICHTS mehr ergänzen: zwei Quellen für dieselbe Fußzeile waren der Grund, warum es sieben gab. */ /* Quellen ausklappbar (16.08.2026). Der Knopf ist Struktur, kein Schmuck: Nunito Sans, Versal, Haarlinie darunter — kein Kasten, keine Fläche. Gelb bleibt Marker, nicht Text. */ .quellen-mehr{display:block;margin:6px 0 0;padding:2px 0;background:none;border:0; border-bottom:1px solid var(--rule,#dad8cf);cursor:pointer; font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:var(--tp-t-label); letter-spacing:.12em;text-transform:uppercase;color:var(--label,#5f5d54)} .quellen-mehr:hover{color:var(--ink,#1b1b18);border-bottom-color:var(--ink,#1b1b18)} .quellen-mehr:focus-visible{outline:2px solid var(--ink,#1b1b18);outline-offset:1px; box-shadow:0 0 0 5px var(--gelb,#ffcc00)} .quellen-rest{margin-top:8px} .quellen-rest p{margin:0 0 7px;padding-left:11px;border-left:1px solid var(--rule,#dad8cf)}