/* ============================================================ WANDFARBEN – Farbfassung mit den echten Wandfarben Gleiche Formen und Struktur wie praxisfarben/, nur andere Farben. Ueberschreibt assets/style.css. ⚠️ NUR ZUR ANSICHT. Entschieden ist nichts. Die laufende Website benutzt weiterhin praxisfarben/praxisfarben.css. Sechs Farben, die am Bildschirm UND an der Wand funktionieren (siehe PRAXISFARBEN.md). Aufgebaut nach drei Regeln: 1. Deutliche Helligkeitsstufen, nicht nur Farbtoene. In Graustufen: 26 - 44 - 78 - 78 - 81 - 94. Dadurch bleiben die Bereiche auch fuer farbsehschwache Menschen unterscheidbar. 2. Ein einziger dunkler Anker (Tiefpetrol) traegt saemtliche Schrift. Das haelt die Palette zusammen. 3. Kein reines Weiss als Flaeche, kein Rot. Weiss wirkt in einer Praxis klinisch, Rot ist medizinisch negativ besetzt. ------------------------------------------------------------ KONTRASTE (nachgerechnet, Norm: 4.5:1 Text, 3:1 grafisch) Weiss auf Wald 11.63:1 Weiss auf Outremer 6.90:1 Weiss auf Himbeere 5.12:1 Wald auf Kirschbluete 6.09:1 Wald auf Lachs 5.14:1 Wald auf Leinen 10.18:1 Leinen auf Wald 10.18:1 Lachs auf Wald 5.14:1 ⚠️ ANDERS ALS IN praxisfarben.css BRAUCHT ES KEINE SONDERTOENE. Wald traegt als Schrift alle hellen Flaechen, Lachs traegt als Akzent die dunklen. Es gibt also weder ein abgedunkeltes Gruen fuer Schrift noch ein aufgehelltes Orange fuer Akzente. ⚠️ DUERFEN SICH NICHT BERUEHREN: Lachs / Kirschbluete 1.19:1 Outremer / Himbeere 1.35:1 ============================================================ */ :root{ /* --- Die sechs Wandfarben, unter ihrem eigenen Namen --- Gemessen an den Musterkarten, Stand 09.09.2026. */ --wald:#1B3F33; /* Anker – Schrift, Fusszeile, Logo-Stein */ --himbeere:#87473B; /* Dunkelrot – traegt weisse Schrift */ --outremer:#2C56AD; /* Blau – traegt weisse Schrift */ --lachs:#EEAE85; /* Helle warme Flaeche, Akzent auf Dunkel */ --kirschbluete:#DBBEC7; /* Helle kuehle Flaeche */ --leinen:#F5EFE6; /* Neutral – Waende, Seitenhintergrund */ /* Die alten Namen zeigen auf die neuen, damit die Regeln weiter unten und die Farbangaben in einzelnen HTML-Dateien unveraendert greifen. */ --tiefpetrol:#1B3F33; --salbei:#87473B; --himmel:#DBBEC7; --aprikose:#EEAE85; --honig:#2C56AD; /* --- Dieselben Farben unter den Namen aus style.css/retro.css --- So greifen alle bestehenden Regeln und die Farbangaben, die in einzelnen HTML-Dateien stehen, ohne dass dort etwas geaendert werden muss. Wichtig: --cork trug in retro.css sowohl Flaechen als auch Schrift. Salbei ist als Schrift zu hell, deshalb zeigt --cork hier auf Tiefpetrol. Die Salbei-Flaechen stehen weiter unten ausdruecklich auf var(--salbei). */ --papier:#F5EFE6; /* Leinen */ --tinte:#1B3F33; /* Wald – Fliesstext und Fusszeile */ --gruen:#1B3F33; --bordeaux:#1B3F33; --blau:#1B3F33; --cork:#1B3F33; /* Schriftfarbe */ --nude:#EEAE85; /* Lachs */ --flieder:#DBBEC7; /* Kirschbluete */ /* ⚠️ --gelb und --orange trugen frueher Honig und damit DUNKLE Schrift. Honigs Platz im Zyklus nimmt jetzt Bleu outremer ein, und das ist dunkel. Als Akzent auf dunklem Grund (Logo und Links in der Fusszeile) steht deshalb Lachs, nicht Outremer. Die Flaechenregeln weiter unten setzen Outremer ausdruecklich. */ --gelb:#EEAE85; /* Lachs – Akzent auf Dunkel */ --orange:#EEAE85; } body{background:var(--leinen)} header{background:rgba(245,239,230,.92)} .wordmark small{color:var(--tiefpetrol)} nav a:hover,nav a:focus-visible{background:var(--himmel)} nav a.aktiv{background:var(--tiefpetrol);color:#FFFFFF} /* Fusszeile auf Tiefpetrol – anders als in retro.css, wo sie auf dem neutralen Dunkelbraun aus style.css blieb. Hier gibt es ein eigenes Dunkel in der Palette, also wird es auch benutzt. */ footer{background:var(--wald);color:var(--leinen)} footer .logo-svg,footer .wordmark,footer .wordmark small,footer a{color:var(--lachs)} /* Kurze Seiten (z.B. Fuer Zuweiser) endeten vor dem unteren Bildschirmrand, darunter blitzte der helle Seitenhintergrund als Streifen durch. Body als Spalte: der Inhalt dehnt sich, der Footer sitzt immer unten. */ body{min-height:100vh;display:flex;flex-direction:column} body>main,body>section{flex:1 0 auto} body>footer{flex-shrink:0} /* Inhaltskarten als Kiesel – als Zyklus, damit auch eine 5. oder 8. Karte eine Form bekommt und nicht ploetzlich als Rechteck dasteht. */ .kartenreihe .karte:nth-child(4n+1){border-radius:58px 40px 64px 36px / 44px 62px 38px 58px} .kartenreihe .karte:nth-child(4n+2){border-radius:42px 60px 38px 62px / 60px 40px 58px 42px} .kartenreihe .karte:nth-child(4n+3){border-radius:62px 38px 56px 44px / 40px 60px 42px 62px} .kartenreihe .karte:nth-child(4n+4){border-radius:38px 58px 42px 60px / 58px 42px 60px 40px} main>.karte:nth-of-type(3n+1){border-radius:64px 40px 58px 38px / 42px 60px 40px 62px} main>.karte:nth-of-type(3n+2){border-radius:40px 62px 38px 60px / 60px 40px 62px 42px} main>.karte:nth-of-type(3n+3){border-radius:58px 42px 62px 40px / 44px 58px 40px 60px} /* Kartenfarben positionsbasiert – so kollidieren nie zwei Nachbarn, egal welche Original-Klasse die Karte hat. 1 = Tiefpetrol, 2 = Salbei, 3 = Aprikose (rotierend). Fuenf Farben im Zyklus: Tiefpetrol, Himmel, Salbei, Aprikose, Honig. Dunkel und hell wechseln sich ab. Warum fuenf und nicht drei: Die Kartenreihe ist ein auto-fit-Raster aus minmax(250px,1fr) in einem 1060 px breiten Container. Damit sind hoechstens DREI Spalten moeglich – vier braeuchten 1054 px Inhalts- breite, verfuegbar sind 948. Nebeneinander kollidiert nie etwas, weil aufeinanderfolgende Nummern immer verschiedene Farben bekommen. Senkrecht untereinander stehen Karte n und n+Spaltenzahl; die kollidieren genau dann, wenn die Zyklus-Laenge die Spaltenzahl teilt. Bei drei Farben und drei Spalten war das der Fall – die vierte Karte stand in derselben Farbe direkt unter der ersten. Fuenf teilt weder 1 noch 2 noch 3, also kann es nicht mehr passieren. Leinen bleibt als sechste Farbe aussen vor: es ist die Farbe des Seitenhintergrunds, eine Karte darin saehe aus wie ein Loch. Auf der Startseite bekommt der Leinen-Stein dafuer eine feine Kontur. */ .kartenreihe .karte:nth-child(5n+1), main>.karte:nth-of-type(5n+1){background:var(--tiefpetrol);color:#FFFFFF} .kartenreihe .karte:nth-child(5n+2), main>.karte:nth-of-type(5n+2){background:var(--himmel);color:var(--tiefpetrol)} .kartenreihe .karte:nth-child(5n+3), main>.karte:nth-of-type(5n+3){background:var(--salbei);color:#FFFFFF} .kartenreihe .karte:nth-child(5n+4), main>.karte:nth-of-type(5n+4){background:var(--aprikose);color:var(--tiefpetrol)} /* ⚠️ Platz 5 trug frueher Honig mit dunkler Schrift. Bleu outremer ist dunkel, also weisse Schrift (6.90:1). NICHT auf dunkle Schrift zurueckbauen - Wald auf Outremer erreicht nur 1.71:1. */ .kartenreihe .karte:nth-child(5n+5), main>.karte:nth-of-type(5n+5){background:var(--outremer);color:#FFFFFF} /* Listen-Trennlinien: hell auf den dunklen Karten, dunkel auf den hellen */ .kartenreihe .karte:nth-child(5n+1) li, .kartenreihe .karte:nth-child(5n+3) li, main>.karte:nth-of-type(5n+1) li, main>.karte:nth-of-type(5n+3) li{border-color:rgba(255,255,255,.3)} .kartenreihe .karte:nth-child(5n+5) li, main>.karte:nth-of-type(5n+5) li{border-color:rgba(255,255,255,.3)} .kartenreihe .karte:nth-child(5n+2) li, .kartenreihe .karte:nth-child(5n+4) li, main>.karte:nth-of-type(5n+2) li, main>.karte:nth-of-type(5n+4) li{border-color:rgba(27,63,51,.22)} /* Team-Raster: derselbe Fuenfer-Zyklus. Das frueher noetige 9er-Muster fuer drei Spalten entfaellt – mit fuenf Farben wechselt die erste Kachel jeder Reihe von selbst. */ .team-grid .karte:nth-child(5n+1){background:var(--tiefpetrol);color:#FFFFFF} .team-grid .karte:nth-child(5n+2){background:var(--himmel);color:var(--tiefpetrol)} .team-grid .karte:nth-child(5n+3){background:var(--salbei);color:#FFFFFF} .team-grid .karte:nth-child(5n+4){background:var(--aprikose);color:var(--tiefpetrol)} .team-grid .karte:nth-child(5n+5){background:var(--outremer);color:#FFFFFF} @media(min-width:821px){.team-grid{grid-template-columns:repeat(3,1fr)}} /* Links innerhalb der farbigen Karten. Es gibt keine Palettenfarbe, die auf allen fuenf Kartenfarben gleichzeitig genug Kontrast hat. Deshalb bleibt die Farbe geerbt und der Link wird allein durch die Unterstreichung kenntlich – bewusst duenn und in normaler Schriftstaerke. */ .karte a:not(.innen-karte){ color:inherit; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; } .karte a:not(.innen-karte):hover{text-decoration-thickness:2.5px} /* Nur fuer Screenreader: sichtbar ausgeblendet, aber vorgelesen. */ .sr-only{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- Barrierefreiheit: Fokus sichtbar machen ---------- style.css setzt bei nav-Links und Kacheln outline:none. */ a:focus-visible, button:focus-visible, nav a:focus-visible, .kachel:focus-visible, .zurueck:focus-visible, .akkordeon-button:focus-visible, .innen-karte:focus-visible, footer a:focus-visible{ outline:3px solid var(--tiefpetrol); outline-offset:3px; } /* Auf farbigen Flaechen erbt der Ring die Schriftfarbe des Elements. Die ist dort bereits auf Kontrast geprueft (mindestens 4.89:1), also hebt sich auch der Ring immer ab – egal welche der fuenf Kartenfarben oder welcher der sechs Steine darunter liegt. Das ersetzt die frueheren festen Weiss- und Tiefpetrol-Regeln, die bei jeder neuen Farbe haetten nachgezogen werden muessen. */ .kachel:focus-visible, footer a:focus-visible, .karte a:focus-visible{ outline-color:currentColor; } /* Fokus-Ring darf nicht vom overflow:hidden der Kachel abgeschnitten werden */ .kachel:focus-visible{outline-offset:-4px} /* Akkordeon als Kiesel, Tiefpetrol-Toene */ .akkordeon .akkordeon-item:nth-child(1){border-radius:32px 22px 28px 20px / 22px 30px 20px 28px} .akkordeon .akkordeon-item:nth-child(2){border-radius:22px 32px 20px 30px / 30px 20px 28px 22px} .akkordeon .akkordeon-item:nth-child(3){border-radius:30px 22px 34px 24px / 22px 30px 24px 32px} .akkordeon-button:hover{background:rgba(27,63,51,.07)} .akkordeon-button[aria-expanded="true"]{background:rgba(27,63,51,.11)} .akkordeon-inhalt{background:rgba(27,63,51,.04)} .karte .akkordeon-inhalt a{color:var(--tiefpetrol)} /* Zugeklappter Akkordeon-Inhalt war nur optisch versteckt: Links darin blieben per Tab erreichbar. visibility:hidden nimmt sie aus Tab-Reihenfolge und Vorlese-Baum. */ .akkordeon-inhalt{ visibility:hidden; transition:max-height .3s ease,visibility 0s linear .3s; } .akkordeon-button[aria-expanded="true"]+.akkordeon-inhalt{ visibility:visible; transition:max-height .3s ease,visibility 0s linear 0s; max-height:1600px; } /* Innen-Karten (Buecher) als Kiesel */ .innen-karte{border-radius:36px 24px 32px 22px / 24px 34px 22px 32px} .innen-grid .innen-karte:nth-child(2n){border-radius:24px 36px 22px 34px / 34px 22px 32px 24px} .innen-karte h4{color:var(--tiefpetrol)} /* Google-Maps-Platzhalter auf der Kontaktseite (Zwei-Klick-Loesung) */ .karten-platzhalter:focus-visible{outline:3px solid var(--tiefpetrol);outline-offset:3px} /* ---------- Startseite: Kacheln als Steine ---------- */ .grid{grid-auto-rows:unset;gap:26px;max-width:1100px;margin:0 auto;align-items:center;justify-items:center} .grid .kachel{aspect-ratio:1/1;width:100%;max-width:330px;padding:14%} .grid .kachel:nth-child(1){border-radius:54% 46% 48% 52% / 49% 56% 44% 51%} .grid .kachel:nth-child(2){border-radius:46% 54% 52% 48% / 55% 47% 53% 45%} .grid .kachel:nth-child(3){border-radius:51% 49% 44% 56% / 47% 52% 48% 53%} .grid .kachel:nth-child(4){border-radius:48% 52% 56% 44% / 52% 46% 54% 48%} .grid .kachel:nth-child(5){border-radius:55% 45% 47% 53% / 45% 54% 46% 55%} .grid .kachel:nth-child(6){border-radius:47% 53% 50% 50% / 53% 48% 52% 47%} @media(max-width:620px){ .grid{gap:18px} .grid .kachel{max-width:240px;padding:12%} .kachel h2{font-size:20px} } /* Sechs Steine, sechs Farben – jede genau einmal. Reihenfolge im HTML: 1 Informationen · 2 Logo · 3 Team 4 Kontakt · 5 Fuer Zuweiser · 6 Nuetzliches 3 Spalten (Computer): Himmel · Tiefpetrol · Salbei Aprikose · Honig · Leinen 2 Spalten (Handy, Logo rutscht mit order:-1 nach vorn): Tiefpetrol · Himmel Salbei · Aprikose Honig · Leinen In beiden Faellen stossen nie zwei gleiche Farben aneinander – ein Farbtausch wie in retro.css ist deshalb nicht noetig. */ .k-claim{background:var(--himmel);color:var(--tiefpetrol)} .k-logo{background:var(--wald);color:var(--lachs)} .k-logo .unterzeile{color:var(--lachs)} .k-logo .logo-svg{color:var(--lachs)} .k-team{background:var(--salbei);color:#FFFFFF} .k-kontakt{background:var(--aprikose);color:var(--tiefpetrol)} .k-zuweiser{background:var(--outremer);color:#FFFFFF} /* Der Leinen-Stein hat fast die Farbe des Hintergrunds. Statt ihn abzudunkeln bekommt er eine feine Kontur – so bleibt die Wandfarbe in der Palette erhalten und der Stein trotzdem sichtbar. */ .k-impressionen{background:var(--leinen);color:var(--tiefpetrol); box-shadow:inset 0 0 0 2px rgba(27,63,51,.18)} .k-impressionen:hover,.k-impressionen:focus-visible{ box-shadow:inset 0 0 0 2px rgba(27,63,51,.18),0 14px 30px rgba(27,63,51,.18); } /* ---------- Wortmarke: Kurzform "PRAXIS ALLMEND" ---------- Die Zeile unter dem Logo endet buendig an dessen rechter Kante. Logobreite = Hoehe x 430/260 Textbreite = 8.895 x Groesse + 13 x Laufweite x Groesse 8.895 em ist die gemessene Breite von "PRAXIS ALLMEND" in Nunito 800 (14 Zeichen, also 13 Zwischenraeume). Der frueher notierte Wert 8.922 em war minim zu gross. Kopfzeile 62 px -> 102.54 px breit -> 10 px Schrift, .1049 em Fusszeile 48 px -> 79.38 px breit -> 7.5 px Schrift, .1296 em Handy 52 px -> 86.00 px breit -> 8 px Schrift, .1427 em Mit dem langen Namen war die Zeile gut dreimal so breit wie das Logo. Damit die Kurzform buendig UND lesbar bleibt, musste das Logo wachsen: bei 42 px Logohoehe waeren nur 6.8 px Schrift moeglich. Wird das Logo skaliert, muss die Schriftgroesse mitwandern. */ header .logo-svg{height:62px} header .wordmark small{font-size:10px;letter-spacing:.1049em} footer .logo-svg{height:48px} footer .wordmark small{font-size:7.5px;letter-spacing:.1296em} @media(max-width:620px){ header .logo-svg{height:52px} header .wordmark small{font-size:8px;letter-spacing:.1427em} }