/* ========================================================================== STUDIO KONTUR – Basis-Komponenten (im , für den ersten Bildschirm nötig) Icons, Knöpfe, Links, Duotone-Abbildungen, Laufband. Alles Weitere steht in components-kapitel.css und wird erst im geladen. Jeder Zustand ist gestaltet: hover, focus-visible, active, disabled. ========================================================================== */ /* -------------------------------------------------------------------------- Icons (eigenes Sprite) -------------------------------------------------------------------------- */ .icon { width: 1.15em; height: 1.15em; flex: none; } /* -------------------------------------------------------------------------- Knöpfe – harte Kante, harter Schatten, rasten beim Drücken ein -------------------------------------------------------------------------- */ .knopf { hyphens: manual; --knopf-grund: var(--papier); --knopf-schrift: var(--tinte); --knopf-schatten: var(--tinte); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3.25rem; padding: var(--s-3) var(--s-5); border: var(--rahmen) solid var(--tinte); background: var(--knopf-grund); color: var(--knopf-schrift); box-shadow: var(--schatten-v) var(--schatten-v) 0 0 var(--knopf-schatten); font-family: var(--schrift-display); font-size: 1rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em; transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve), background-color var(--dauer-kurz), color var(--dauer-kurz); } .knopf--blau { --knopf-grund: var(--blau); --knopf-schrift: var(--weiss); } /* Farbumkehr: Hover wird schwarz mit weißer Schrift, der Schatten blau */ .knopf:hover { --knopf-grund: var(--tinte); --knopf-schrift: var(--weiss); --knopf-schatten: var(--blau); transform: translate(-2px, -2px); box-shadow: calc(var(--schatten-v) + 2px) calc(var(--schatten-v) + 2px) 0 0 var(--knopf-schatten); } .knopf:active { --knopf-grund: var(--blau-tief); --knopf-schrift: var(--weiss); transform: translate(var(--schatten-v), var(--schatten-v)); box-shadow: 0 0 0 0 var(--knopf-schatten); } .knopf:disabled, .knopf[aria-disabled="true"] { --knopf-grund: var(--papier-2); --knopf-schrift: var(--tinte-2); border-style: dashed; box-shadow: none; transform: none; } /* Auf blauem Grund: Papier-Knopf, Hover invertiert zu Schwarz */ .auf-blau .knopf { --knopf-grund: var(--weiss); --knopf-schrift: var(--tinte); } .auf-blau .knopf:hover { --knopf-grund: var(--tinte); --knopf-schrift: var(--weiss); --knopf-schatten: var(--weiss); } .knopf--klein { min-height: 2.75rem; padding: var(--s-2) var(--s-4); font-size: 0.875rem; } /* Text-Link in Mono mit dicker blauer Unterstreichung */ .textlink { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0.1em; font-family: var(--schrift-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--lw-mono); text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--blau); text-decoration-thickness: 3px; text-underline-offset: 0.35em; } .textlink:hover { background: var(--blau); color: var(--weiss); text-decoration-color: var(--weiss); } /* Fließtext-Links */ .fliesstext a:not([class]) { text-decoration-color: var(--blau); } .fliesstext a:not([class]):hover { background: var(--blau); color: var(--weiss); } /* -------------------------------------------------------------------------- Abbildungen: SW-Foto → per CSS blau getont (Duotone) Schwarz bleibt Schwarz, Mitteltöne werden elektrisch blau, Lichter weiß. -------------------------------------------------------------------------- */ .abb { display: flex; flex-direction: column; gap: var(--s-2); } .abb__rahmen { position: relative; border: var(--rahmen) solid var(--tinte); box-shadow: var(--schatten-gross); background: var(--tinte); overflow: hidden; } .abb__rahmen img { width: 100%; } .duoton { background: var(--blau); } .duoton img { filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; transition: filter var(--dauer) var(--kurve); } /* Hover zeigt kurz das Schwarzweiß-Original („Farbumkehr“ des Tons) */ .abb:hover .duoton img { mix-blend-mode: normal; } .abb__text { display: flex; gap: var(--s-3); font-family: var(--schrift-mono); font-size: var(--fs-mini); line-height: 1.5; letter-spacing: 0.02em; color: var(--tinte-2); } .abb__nr { flex: none; padding: 0 var(--s-1); background: var(--tinte); color: var(--weiss); font-weight: 500; align-self: flex-start; } /* -------------------------------------------------------------------------- Laufband (läuft erst, wenn JS den Pause-Knopf bereitgestellt hat) -------------------------------------------------------------------------- */ .laufband { position: relative; overflow: hidden; border-block: var(--rahmen) solid var(--tinte); background: var(--blau); color: var(--weiss); } .laufband__spur { display: flex; width: max-content; } .laufband__text { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.3em 0.35em 0.6em; font-family: var(--schrift-display); font-size: clamp(1.4rem, 1rem + 2.4vw, 3rem); font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; hyphens: none; } .laufband__trenner { width: 0.42em; height: 0.42em; background: var(--tinte); transform: rotate(45deg); flex: none; } .laufband__pause { position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); border: 0; border-left: var(--rahmen) solid var(--tinte); background: var(--tinte); color: var(--weiss); font-family: var(--schrift-mono); font-size: var(--fs-mini); font-weight: 500; letter-spacing: var(--lw-mono); text-transform: uppercase; --fokus-farbe: var(--weiss); outline-offset: -6px; } .laufband__pause:hover { background: var(--weiss); color: var(--tinte); --fokus-farbe: var(--blau); } @media (prefers-reduced-motion: no-preference) { .laufband--aktiv .laufband__spur { animation: laufen var(--laufband-dauer) linear infinite; } .laufband--aktiv:hover .laufband__spur, .laufband--aktiv:focus-within .laufband__spur, .laufband--pausiert .laufband__spur { animation-play-state: paused; } } /* Ohne Bewegung braucht es keinen Pause-Knopf */ @media (prefers-reduced-motion: reduce) { .laufband__pause { display: none; } } @keyframes laufen { to { transform: translateX(-50%); } }