/* =========================================================================== RHYTHMUS · Der Farbtakt der Startseite Angelegt 07.09.2026 nach Dirks Ansage: nicht ueberall derselbe Hintergrund, aber KEINE grossen dunklen Flaechen mehr. Die Flaechen bleiben hell, die Farbe traegt das Element. GEMESSEN VOR DEM BAUEN (Workflow vom 07.09.2026, fuenf Leser plus zwei Gegenproben). Vier Befunde bestimmen diese Datei: 1 relief.css Abschnitt 2b setzt vier Sektionen mit "html body" auf rgba(242,237,225,.62). Spezifitaet 0,1,2, geladen als Zeile 261. Eine neue Datei braucht dieselbe Spezifitaet, sonst passiert nichts, egal wie spaet sie laedt. Deshalb steht hier ueberall "html body". 2 DIE FLAECHEN MUESSEN ALPHA TRAGEN, keine Volltoene. Hinter der Seite liegt eine feste Pulslinie. Eine deckende Flaeche schneidet sie an ihrer Oberkante ab und setzt unten wieder an. relief.css beschreibt genau diesen Fehler. Der dritte Ton ist deshalb als Alpha notiert, der ueber dem Seitengrund exakt #E9ECE4 ergibt, und nicht als #E9ECE4 selbst. 3 Nach der neuen Reihenfolge stossen #praxisteam und #rezept aneinander. Beide trugen bisher denselben Ton und haetten sich als ein Block von 260 Zeilen gelesen. Deshalb der dritte Ton. 4 --muted #676E68 haelt auf dem dritten Ton nur 4,39 zu 1 und verfehlt AA. Auf allen drei Toenen wird er durch #555C56 ersetzt: 6,32 auf A, 6,05 auf B, 5,76 auf C. DER TAKT ueber die zwoelf Abschnitte in ihrer neuen Reihenfolge: 1 top A Grund, traegt das Relief offen 2 standorte B 3 team A 4 praxisteam B 5 rezept C neu, sonst zweimal B hintereinander 6 praxisfilm A muss offen bleiben, Vollbildvideo 7 termin B 8 leistungen C 9 praxisempfang A wie 6 10 gesundheitsthemen B 11 bewertungen A 12 notfall C Kein Ton steht zweimal hintereinander. =========================================================================== */ :root{ /* A ist der Seitengrund selbst, er wird nicht gesetzt sondern freigelassen. B und C liegen als Schleier darueber. */ /* Nachgeschaerft 07.09.2026 nachmittags. Dirks Ansage: "dass es nicht nur weiss und beiges weiss und beige, das ist langweilig". Gemessen war der Abstand zum Seitengrund 17 (B) und 34 (C) Stufen ueber alle drei Kanaele. Das sieht man kaum. Jetzt 49 und 51, und zwischen B und C 30 statt 17. Die Toene bleiben hell, sie werden nur endlich unterscheidbar: B geht ins Sandige, C ins Salbeigruene. Kontraste gerechnet, --text haelt auf beiden ueber 10 zu 1. */ --ry-b: rgba(236,224,192,.62); /* ergibt ueber A #F1E8D1, Sand */ --ry-c: rgba(203,222,207,.52); /* ergibt ueber A #E1E9DE, Salbei */ --ry-linie: rgba(26,31,27,.05); --ry-leise: #555C56; /* ersetzt --muted, haelt auf allen drei Toenen AA */ } /* --- Ton B --------------------------------------------------------------- Dieselben Sektionen wie in relief.css, plus die Terminstrecke und die Gesundheitsthemen. Die Haarlinien oben und unten halten den Block zusammen, ohne dass die Flaeche laut werden muss. */ html body .standorte, html body .rezept, html body .services, html body .notfall{ background: var(--ry-b); border-top: 1px solid var(--ry-linie); border-bottom: 1px solid var(--ry-linie); } /* --- Ton C --------------------------------------------------------------- Eine Spur kuehler als B. Er trennt dort, wo zwei warme Flaechen sonst aneinanderstiessen, und gibt dem Rezeptbereich und den Leistungen ein eigenes Gewicht. */ html body .pt-section, html body .termin, html body .gt-section{ background: var(--ry-c); border-top: 1px solid var(--ry-linie); border-bottom: 1px solid var(--ry-linie); } /* --- Ton A --------------------------------------------------------------- Offen. Ausdruecklich zurueckgesetzt, weil relief.css .rezept auf B setzt und die Reihenfolge sich geaendert hat. */ html body .hero, html body .ts-section, html body .vs-section, html body .dgr-section{ background: transparent; } /* --- Der gedaempfte Text -------------------------------------------------- Gemessen am 07.09.2026 NACH dem ersten Einbau: --muted #676E68 haelt auf Ton C nur 3,99 zu 1 und auf Ton B 4,49, beides unter AA. Ein erster Versuch hatte vier einzelne Klassen umgefaerbt und dabei .section-sub uebersehen, den laengsten Text der Seite. Deshalb wird jetzt die VARIABLE in den getoenten Sektionen umgesetzt, nicht die einzelne Klasse. Damit ist jede Stelle erfasst, die --muted liest, auch die, an die niemand gedacht hat. #555C56 gemessen: 6,32 auf Ton A, 6,05 auf B, 5,76 auf C. */ html body .standorte, html body .pt-section, html body .termin, html body .gt-section, html body .rezept, html body .services, html body .notfall{ --muted: #555C56; } /* =========================================================================== DIE ELEMENTE TRAGEN DIE FARBE Dirks Ansage: "dass dann auch die verschiedenen Bereiche zum Beispiel bei den externen Links die eingebaut haben die Gegenfarbe hat also gruen dass es sich ein bisschen abhebt" =========================================================================== */ /* --- Die Karten der Gesundheitsthemen ------------------------------------ Sie fuehren als einzige auf fremde Seiten und muessen sich deshalb vom eigenen Angebot unterscheiden. Gemessen: die Karte stand auf #F2EDE1, die Sektion auf effektiv #F4F0E4. Kontrast 1,006 zu 1, also praktisch unsichtbar. Jetzt steht sie auf #FDFBF6, demselben Kartenton, den die Teamsektion schon nutzt. Kontrast zur Flaeche 1,10 zu 1, sichtbar, ohne laut zu sein. gesundheitsthemen.css liegt unter der Sperre startseite-schrift-54e33e9b und wird nur gelesen. Diese Datei laedt spaeter. */ html body .gt-section .gt-karte{ background: #FDFBF6; border-color: rgba(26,31,27,.10); } /* Die Herkunftszeile wird eine volle Leiste in der Rubrikfarbe. Das ist der kraeftige innere Bereich: kleine Flaeche, volle Farbe, sofort erkennbar, und sie funktioniert auch ohne Maus am Telefon. Vorher stand die Herkunft als Schrift in der Rubrikfarbe auf hellem Grund und erreichte je nach Rubrik nur 5,43 bis 8,42 zu 1, vier von sechs Rubriken verfehlten AAA. Weisse Schrift auf der vollen Leiste erreicht 7,03 bis 9,84. */ html body .gt-section .gt-karte-herkunft{ background: var(--gt-farbe, #2A4A38); color: #fff; padding: .34rem .6rem; border-radius: 5px; align-self: flex-start; } html body .gt-section .gt-karte-herkunft *{ color: #fff; } /* Zwei Rubrikfarben halten mit weisser Schrift nur AA. Eine Spur dunkler bringt beide ueber 7 zu 1. */ html body .gt-section [data-rubrik="herz"]{ --gt-farbe: #993932; } html body .gt-section [data-rubrik="stoffwechsel"]{ --gt-farbe: #70531F; } /* =========================================================================== DAS TERMINWERKZEUG Dirks Ansage: "das wirkt irgendwie so flach das gefaellt mir gar nicht vielleicht auch irgendwie was schoenes mit diesem gruenen Gradient" Funktion und Markup bleiben unberuehrt. Geaendert wird nur, wie es aussieht: das Werkzeug steht jetzt als eigener Koerper auf der Flaeche statt buendig mit ihr zu verschwimmen. =========================================================================== */ html body .termin .termin-card, html body .termin .termin-wrap{ border-radius: 24px; /* Drei Lagen statt einer weichen Wolke: eine enge fuer die Kontur, eine mittlere fuer die Tiefe, eine weite fuer den Raum. */ box-shadow: 0 2px 4px rgba(22,41,31,.08), 0 14px 24px rgba(22,41,31,.12), 0 40px 64px rgba(22,41,31,.16); position: relative; isolation: isolate; overflow: hidden; } /* Der gruene Verlauf, den Dirk meint: er sitzt als schmales Band am oberen Rand des Werkzeugs, nicht als Flaeche darunter. Ein Werkzeug, das Termine vergibt, bekommt damit eine Kante, keine Toenung. */ html body .termin .termin-card::before, html body .termin .termin-wrap::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #1C3125 0%, #2A4A38 34%, #C9A960 72%, #2A4A38 100%); z-index: 2; pointer-events: none; } /* Die Schrittanzeige hebt sich ab, statt im Grund zu verschwinden. */ html body .termin .termin-step-badge, html body .termin .termin-phase-badge{ background: linear-gradient(180deg, #2A4A38, #1C3125); color: #F2EEE3; border: 0; } /* Die Auswahlkarten der fuenf Schritte bekommen eine sichtbare Kante und einen ruhigen Zustand unter der Maus. */ html body .termin .termin-option, html body .termin .termin-slot, html body .termin .termin-standort-card{ border: 1px solid rgba(26,31,27,.10); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } @media (hover: hover){ html body .termin .termin-option:hover, html body .termin .termin-slot:hover, html body .termin .termin-standort-card:hover{ border-color: rgba(42,74,56,.42); box-shadow: 0 8px 18px rgba(22,41,31,.10); transform: translateY(-1px); } } html body .termin .termin-option[aria-selected="true"], html body .termin .termin-option.is-selected, html body .termin .termin-standort-card.is-selected{ border-color: #2A4A38; box-shadow: 0 0 0 1px #2A4A38, 0 10px 22px rgba(22,41,31,.14); } @media (prefers-reduced-motion: reduce){ html body .termin .termin-option, html body .termin .termin-slot, html body .termin .termin-standort-card{ transition: none; } html body .termin .termin-option:hover, html body .termin .termin-slot:hover, html body .termin .termin-standort-card:hover{ transform: none; } } /* =========================================================================== DAS REZEPT-ELEMENT SCHWEBT Es steht jetzt weit oben und ist der erste Kasten, den man sieht. =========================================================================== */ html body .rezept-wrap{ border-radius: 24px; box-shadow: 0 2px 4px rgba(22,41,31,.10), 0 12px 20px rgba(22,41,31,.16), 0 34px 60px rgba(22,41,31,.22); } @media (max-width: 768px){ html body .rezept-wrap{ box-shadow: 0 2px 4px rgba(22,41,31,.10), 0 8px 14px rgba(22,41,31,.14), 0 20px 32px rgba(22,41,31,.18); } } /* =========================================================================== ETAPPE 8 · Die vier offenen Punkte vom 07.09.2026 =========================================================================== */ /* --------------------------------------------------------------------------- 8.1 DAS ZITAT STEHT FREI Dirks Ansage: "entferne bitte den hellen Hintergrund hinter der Schrift, der Doktor ist freigestellt und die Schrift ist auch freigestellt, die Schrift laeuft ueber der Pulslinie ohne dass wir einen weissen Kasten dahinter legen" Gemessen: der Kasten ist assets/team-slider.css Zeile 154 bis 169, .ts-text::before mit Verlauf, Rand, Schatten und Radius. In Ruhe steht er auf Deckkraft null und wird erst auf der aktiven Folie eingeblendet (Zeile 171 bis 175). team-slider.css liegt unter der Sperre ragnitz-foto-inhaber-0a8ab0 und wird nur gelesen. Vorrangzeichen noetig: drueben steht die Einblendung mit gleicher Spezifitaet auf der aktiven Folie. --------------------------------------------------------------------------- */ html body .ts-text::before{ opacity: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------------------------- 8.2 DIE KARTEN DER GESUNDHEITSTHEMEN, UMGEKEHRT Dirks Ansage: "du muesstest es nur umkehren, dass das was wir sehen sichtbar ist, und wenn man mit der Maus darueber faehrt, dass wir dann die Hintergrundfarbe haben ... als wuerde man eine Luke oeffnen und man sieht nach unten" Gemessen: gesundheitsthemen.css legt .gt-karte::after als dunklen Verlauf ueber die Karte und schaltet ihn bei :hover auf Deckkraft eins. Umgekehrt heisst: in Ruhe eins, unter der Maus null. Die Schriftregeln drehen mit. Nur fuer Geraete MIT Maus. Auf dem Telefon gibt es kein Darueberfahren, dort waere die dunkle Karte der Dauerzustand und niemand saehe je die Luke. Dort bleiben die Karten hell, wie in Abschnitt "Die Elemente tragen die Farbe" gesetzt. --------------------------------------------------------------------------- */ @media (hover: hover){ html body .gt-section .gt-karte::after{ opacity: 1; } html body .gt-section .gt-karte:hover::after, html body .gt-section .gt-karte:focus-within::after{ opacity: 0; } /* In Ruhe steht die Schrift auf dem dunklen Verlauf, also hell. */ html body .gt-section .gt-karte .gt-karte-titel{ color: #F8F5EE; } html body .gt-section .gt-karte .gt-karte-text{ color: rgba(248,245,238,.88); } html body .gt-section .gt-karte .gt-karte-fuss{ color: rgba(248,245,238,.70); } /* Unter der Maus geht die Luke auf, die Schrift wird dunkel. */ html body .gt-section .gt-karte:hover .gt-karte-titel, html body .gt-section .gt-karte:focus-within .gt-karte-titel{ color: #1C3125; } html body .gt-section .gt-karte:hover .gt-karte-text, html body .gt-section .gt-karte:focus-within .gt-karte-text{ color: #3A423C; } html body .gt-section .gt-karte:hover .gt-karte-fuss, html body .gt-section .gt-karte:focus-within .gt-karte-fuss{ color: #555C56; } /* Die Herkunftsleiste muss in beiden Zustaenden lesbar bleiben. Auf der dunklen Karte verschwaende eine Leiste in der Rubrikfarbe im Grund, denn eine Rubrik ist selbst dunkelgruen. Deshalb dreht sie mit: hell mit dunkler Schrift in Ruhe, Rubrikfarbe mit weisser Schrift unter der Maus. */ html body .gt-section .gt-karte .gt-karte-herkunft{ background: rgba(248,245,238,.92); color: #1C3125; } html body .gt-section .gt-karte .gt-karte-herkunft *{ color: #1C3125; } html body .gt-section .gt-karte:hover .gt-karte-herkunft, html body .gt-section .gt-karte:focus-within .gt-karte-herkunft{ background: var(--gt-farbe, #2A4A38); color: #fff; } html body .gt-section .gt-karte:hover .gt-karte-herkunft *, html body .gt-section .gt-karte:focus-within .gt-karte-herkunft *{ color: #fff; } /* Der Rand der Karte in Ruhe: auf dem dunklen Verlauf braucht er Gegenlicht statt Schatten. */ html body .gt-section .gt-karte{ border-color: rgba(201,169,96,.22); } html body .gt-section .gt-karte:hover, html body .gt-section .gt-karte:focus-within{ border-color: rgba(26,31,27,.12); } } /* --------------------------------------------------------------------------- 8.3 DAS BAND DER VIDEOSPRECHSTUNDE Steht ueber dem Dreierraster der Leistungen, auf dessen Breite (1280 px) und mit dessen Radius (22 px), damit es zur Reihe gehoert statt daneben zu liegen. Beides gemessen. Warum es hier steht und nicht mehr: der Doktor hat am 22.08. gesagt, auf der Seite soll nur stehen, DASS es die Videosprechstunde gibt. Woertlich: "Einbindung muss erst mal nicht sein." Die Praxiskennung fuer app.arzt-direkt.de fehlt ausserdem, ohne sie fuehrt jeder direkte Link ins Leere. Deshalb der Telefonweg als verlaesslicher Weg und der Link nur als Erklaerung. --------------------------------------------------------------------------- */ html body .vsp-band{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); max-width: 1280px; margin: 0 auto clamp(1.6rem, 3vw, 2.6rem); padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.6vw, 2rem); border-radius: 22px; background: radial-gradient(120% 140% at 6% 0%, rgba(201,169,96,.16) 0, transparent 58%), linear-gradient(105deg, #1B3325 0%, #16291F 62%, #12231A 100%); color: #F2EEE3; text-decoration: none; box-shadow: 0 2px 4px rgba(22,41,31,.10), 0 14px 26px rgba(22,41,31,.16); } html body .vsp-icon{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,238,227,.10); border: 1px solid rgba(201,169,96,.28); flex: 0 0 auto; } html body .vsp-icon svg{ width: 22px; height: 22px; color: #C9A960; } html body .vsp-eyebrow{ display: block; font-size: .70rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #C9A960; margin-bottom: .3rem; } html body .vsp-titel{ display: block; font-size: clamp(1.1rem, 2vw, 1.34rem); line-height: 1.25; margin-bottom: .45rem; color: #F2EEE3; } html body .vsp-sub{ display: block; font-size: .95rem; line-height: 1.6; color: rgba(242,238,227,.78); max-width: 62ch; } html body .vsp-tel{ display: block; text-align: center; padding: .8rem 1.3rem; border-radius: 12px; background: rgba(201,169,96,.14); border: 1px solid rgba(201,169,96,.34); } html body .vsp-tel small{ display: block; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: #C9A960; margin-bottom: .2rem; } html body .vsp-tel b{ display: block; font-size: 1.16rem; font-weight: 600; color: #F2EEE3; font-variant-numeric: tabular-nums; } html body .vsp-mehr{ display: inline-block; margin-top: .7rem; font-size: .88rem; color: #C9A960; text-underline-offset: 3px; } @media (max-width: 768px){ html body .vsp-band{ grid-template-columns: 1fr; text-align: left; } html body .vsp-icon{ display: none; } html body .vsp-tel{ text-align: left; } } /* --- Die Kante, die den Abschnitt anfaengt --------------------------------- Bisher trug jede getoente Sektion oben und unten dieselbe graue Haarlinie. Zwei gleiche Linien an einer Naht heben nichts hervor, sie verdoppeln nur den Strich. Jetzt beginnt jeder getoente Abschnitt mit einer feinen Goldlinie, die nach aussen ausblendet, und endet ohne Linie. Das setzt ihn ab, ohne dass die Flaeche lauter werden muss. Gold darf das, weil es hier eine LINIE ist und keine Schrift: als Schriftfarbe erreicht #A88948 auf hellem Grund nur 3,04 zu 1. */ html body .standorte, html body .rezept, html body .services, html body .notfall, html body .pt-section, html body .termin, html body .gt-section{ border-top: 0; border-bottom: 0; position: relative; } html body .standorte::before, html body .rezept::before, html body .services::before, html body .notfall::before, html body .pt-section::before, html body .termin::before, html body .gt-section::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0, rgba(168,137,72,.34) 18%, rgba(168,137,72,.34) 82%, transparent 100%); pointer-events: none; z-index: 1; } /* =========================================================================== ETAPPE 10 · 08.09.2026, Sitzung 75f64d, Chat "Ragnitz Optik final" Dirks Ansage von heute Abend, dazu zwei Funde beim Messen. Alle Farben sind gerechnet und danach an der Seite nachgemessen, keine geschaetzt. ⚠️ WAS DABEI HERAUSKAM UND WICHTIGER IST ALS DIE FARBEN: Dirk hat seine Anweisungen an einer Fassung erteilt, die es hier seit dem 07.09. 13:40 nicht mehr gibt. Sein Browser hielt sie fest. Grund: 07.09. 11:59 Etappe 5, gruene Fassung rhythmus.css?v=4 07.09. 13:40 zurueckgenommen, Kennung faellt zurueck auf v=1 07.09. 22:59 Etappe 9, helle Fassung WIEDER v=4 Dieselbe Adresse trug zwei verschiedene Inhalte, und nginx liefert /assets/ ein Jahr immutable. Deshalb springt diese Datei jetzt auf v=10 statt auf v=5: ueber jeden je vergebenen Wert hinweg. MERKREGEL: Nach einem Revert wird eine Kennung NIE wiederverwendet. =========================================================================== */ /* --------------------------------------------------------------------------- 10.1 DIE KARTE REISST NICHT MEHR WEISS AUF, SIE WIRD NUR HELLER Dirks Wort: "wenn ich mit der Maus ueber ein Element fahre wird es erst weiss und endet genauso ... wir wollten es dann in Heller stellen." Was Etappe 8 tat: sie blendete den dunklen Verlauf unter der Maus auf Deckkraft null. Darunter liegt #FDFBF6. Die Karte sprang also von Dunkelgruen auf Fastweiss, und mit ihr sprangen vier Schriftfarben von hell auf dunkel und die Herkunftsleiste drehte um. Sechs Farbwechsel in einem Moment, deshalb wirkte es wie ein Bruch und nicht wie eine Reaktion. Was jetzt geschieht: der Verlauf bleibt stehen und wird durch eine hellere Fassung DESSELBEN Gruens ersetzt. Die Schrift wechselt gar nicht mehr. Es bewegt sich genau eine Groesse, die Helligkeit der Flaeche, und zwar um Faktor 1,98. Das sieht man, ohne dass es schlaegt. Gemessene Kontraste, in Ruhe auf #1C3125 und unter der Maus auf #294634: Titel 12,73 -> 9,55 Text 10,18 -> 7,82 Fuss 9,08 -> 7,01 Datum 8,37 -> 6,68 Alle vier halten in beiden Zustaenden AA, drei davon AAA. --------------------------------------------------------------------------- */ @media (hover: hover){ html body .gt-section .gt-karte:hover::after, html body .gt-section .gt-karte:focus-within::after{ opacity: 1; background: linear-gradient(168deg, #38604F 0%, #315442 58%, #294634 100%); } /* Die Schrift bleibt hell, in beiden Zustaenden. Die vier Regeln aus Abschnitt 8.2, die sie auf dunkel drehten, sind damit aufgehoben. Sie stehen dort weiter, weil diese Datei die spaetere Fassung ist und der Verlauf der Aenderungen lesbar bleiben soll. */ html body .gt-section .gt-karte .gt-karte-fuss, html body .gt-section .gt-karte:hover .gt-karte-fuss, html body .gt-section .gt-karte:focus-within .gt-karte-fuss{ color: rgba(248,245,238,.82); } html body .gt-section .gt-karte:hover .gt-karte-titel, html body .gt-section .gt-karte:focus-within .gt-karte-titel{ color: #F8F5EE; } html body .gt-section .gt-karte:hover .gt-karte-text, html body .gt-section .gt-karte:focus-within .gt-karte-text{ color: rgba(248,245,238,.88); } /* Die Herkunftsleiste dreht nicht mehr um. Sie war die lauteste der sechs Bewegungen: helle Flaeche mit dunkler Schrift wurde zu voller Rubrikfarbe mit weisser Schrift. Sie bleibt jetzt, wie sie ist, und haelt dabei 10,97 zu 1. */ html body .gt-section .gt-karte:hover .gt-karte-herkunft, html body .gt-section .gt-karte:focus-within .gt-karte-herkunft{ background: rgba(248,245,238,.92); color: #1C3125; } html body .gt-section .gt-karte:hover .gt-karte-herkunft *, html body .gt-section .gt-karte:focus-within .gt-karte-herkunft *{ color: #1C3125; } /* Der Rand traegt jetzt die Rueckmeldung mit: Gold von .22 auf .48. Er ist eine Kante, keine Schrift, deshalb ist die Stufe fuer Text hier nicht der Massstab. */ html body .gt-section .gt-karte:hover, html body .gt-section .gt-karte:focus-within{ border-color: rgba(201,169,96,.48); } /* --------------------------------------------------------------------------- 10.2 DIE DATUMSZEILE WAR UNSICHTBAR Gefunden von Sitzung 630faad2 beim Gegenlesen, nachgerechnet und bestaetigt. gesundheitsthemen.css Zeile 1025 setzt .gt-karte-daten auf var(--forest, #2A4A38). Diese Farbe war fuer den urspruenglichen hellen Kartengrund #F2EDE1 gebaut und haelt dort 8,42 zu 1. Auf der dunklen Karte ergibt sie 1,41 zu 1. Das ist praktisch unsichtbar und faellt unter jede Anforderung. Etappe 8 hat Titel, Text und Fuss nachgezogen und dieses fuenfte Element uebersehen. Dirk hat es von der anderen Seite bemerkt, ohne die Ursache zu kennen: "die Datumszeile ist nicht lesbar, erst beim Darueberfahren wird sie sichtbar." Genau so verhaelt es sich, denn beim Hover wurde die Karte hell und die Farbe stimmte wieder. Die gestrichelte Trennlinie darueber hatte denselben Fehler: rgba aus dem Waldton, auf dunklem Grund 1,05 zu 1, also gar nicht vorhanden. ⚠️ Beides wird NUR im Maus-Zustand geaendert. Auf Telefon und Tablet bleiben die Karten hell, dort ist die urspruengliche dunkle Schrift richtig. Wer das ausserhalb dieser Klammer setzt, macht es dort kaputt. --------------------------------------------------------------------------- */ html body .gt-section .gt-karte .gt-karte-daten{ color: rgba(248,245,238,.80); border-top-color: rgba(248,245,238,.24); } html body .gt-section .gt-karte:hover .gt-karte-daten, html body .gt-section .gt-karte:focus-within .gt-karte-daten{ border-top-color: rgba(248,245,238,.30); } } /* --------------------------------------------------------------------------- 10.3 DER ERKLAERKASTEN BEKOMMT EINEN KOERPER Dirks Punkt 3: der weisse Kasten unter den Karten koennte optisch besser werden. Er trug einen senkrechten Verlauf von rgba(255,255,255,.9) auf .62. Nach unten wurde er also durchscheinend und lief in die Flaeche aus. Das ist dieselbe Machart, die Dirk heute an mehreren Stellen als matschig bemaengelt hat: ein Uebergang, der weder weich noch klar ist. Jetzt eine gleichmaessige Flaeche mit .84 Deckkraft. Alpha bleibt Pflicht, sonst schneidet der Kasten die feste Pulslinie im Hintergrund ab. Dazu ein zweilagiger Schatten, damit er als eigener Koerper auf der Seite liegt statt als heller Fleck darin, und der Goldbalken laeuft ueber die volle Hoehe und blendet an beiden Enden aus, wie die Goldlinie am Kopf jeder Sektion. Text auf der neuen Flaeche: 12,76 zu 1. --------------------------------------------------------------------------- */ html body .gt-section .gt-hinweis{ background: rgba(255,255,255,.84); border-color: rgba(26,31,27,.09); box-shadow: 0 1px 2px rgba(28,49,37,.05), 0 10px 26px rgba(28,49,37,.07); } html body .gt-section .gt-hinweis::before{ top: 0; bottom: 0; width: 3px; border-radius: 0; background: linear-gradient(180deg, rgba(168,137,72,0) 0%, #A88948 16%, #A88948 84%, rgba(168,137,72,0) 100%); }