/* ========================================================================= AddOnSchule - Preisseite 2026/27 Wird NUR auf den ausgewaehlten Seiten geladen (siehe kiep-preisseite.php) und zusaetzlich im Block-Editor. Alles haengt unter .kiep-preisseite bzw. .editor-styles-wrapper, damit Kopf, Menue und Fusszeile der Website unberuehrt bleiben. BEWUSST OHNE dunkle Darstellung: Blocksy hat kein eigenes Dunkelschema. ========================================================================= */ .kiep-preisseite { /* Schriftfarbe auf dem Kartenkopf (--*-ink): drei von vier Koepfen tragen WEISS, nur der gelbe StepOn-Kopf dunkel. Das ist kein Versehen -- am 25.08.2026 durchgerechnet und mit dem Betreiber entschieden. Der Kopf traegt auch KLEINE Zeilen ("Einstieg", "+ 144 EUR Vereinsbeitrag"), es gelten also 4,5:1: Grundton weisse Schrift dunkle Schrift GetOn rot 5,33:1 gut 3,44:1 zu wenig StepOn gelb 1,73:1 zu wenig 9,92:1 gut KiEPon gruen 2,69:1 zu wenig 6,24:1 gut DiveOn gruen 3,76:1 knapp 4,56:1 gut Farbtausch 25.08.2026 auf Betreiberwunsch: GetOn rot (vorher gruen), KiEPon und DiveOn gruen (vorher orange bzw. rot); die Grundton-Werte sind dieselben gepruefte Saetze wie vorher, nur anders zugeordnet. ⚠️ Ebenfalls Betreiber-Entscheid 25.08.2026: Auf den GRUENEN Koepfen steht die Schrift WEISS (2,69:1, rechnerisch unter 4,5:1) -- bewusst so gewuenscht, nicht "reparieren". Nur StepOn (gelb) bleibt dunkel: Weiss auf Gelb (1,73:1) waere schlicht unlesbar. */ /* 🔴 Nachtrag 27.08.2026 (Betreiberwunsch): KiEPon und DiveOn trugen bis dahin GENAU DENSELBEN Gruenton -- im Shop standen dadurch zwei gleich aussehende Produktbilder nebeneinander. DiveOn ist jetzt "leicht unterschiedlich" abgedunkelt (#6BAF32 -> #4E9426). Nebenwirkung, die niemand reparieren muss: Weiss auf DiveOn steigt damit von 2,69:1 auf 3,76:1, das fuenffarbige Band im Kopf und ueber den Abschluessen zeigt jetzt zwei Gruentoene statt eines doppelten. Wer die beiden wieder gleich haben will, setzt --c-wholeon* auf die --c-kiepon*-Werte zurueck -- und muss dann auch die Editor-Palette in kiep-preisseite.php UND das Shop-Bild in KiEPhub (products.bild_pfad / products.farbe fuer Produkt 84) mitziehen. */ --c-geton: #CC2A31; --c-geton-ink: #FFFFFF; --c-geton-text: #B01E25; --c-stepon: #FBBA00; --c-stepon-ink: #241A00; --c-stepon-text: #8A6100; --c-kiepon: #6BAF32; --c-kiepon-ink: #FFFFFF; --c-kiepon-text: #3F7C15; --c-wholeon: #4E9426; --c-wholeon-ink: #FFFFFF; --c-wholeon-text: #35690F; /* Blau-Leiter fuer die Abschluesse */ --c-b1: #0A76B2; --c-b2: #0E5F92; --c-b3: #0B4A75; --c-b4: #34489B; --c-b5: #262F6E; --c-pruefung: var(--c-b1); --c-pruefung-ink: #FFFFFF; --c-pruefung-text: var(--c-b1); /* Staerke ALLER farbigen Kanten -- eine einzige Stellschraube fuer: liegend : das fuenffarbige Band im Kopf, das Band ueber den Abschluessen, die Oberkante von Karten und Kaesten stehend : die linke Kante der Wegweiser-Zeilen, der Erwachsenen-Liste und der Markierung "bitte pruefen" Betreiberwunsch 25.08.2026: alles gleich kraeftig. Vorher war es dreierlei -- 10px oben, 4px an Karten/Kaesten, 5px an den stehenden Kanten; nebeneinander sah das nach Zufall aus. ⚠️ Die vier Paketkarten sind bewusst ausgenommen -- sie haben statt einer Kante einen ganz gefuellten Kopf (.karte.mit-kopf setzt 1px). */ --kante: 10px; --grund: #FBFAF6; --flaeche: #FFFFFF; /* Gruen der Abschnittsbalken -- identisch mit der Startseite (dort Klasse "programme", gemessen rgb(123,184,99)). */ --balken: #7BB863; /* Zwei getrennte Schriftfarben auf dem Balken (Betreiber-Entscheid 25.08.2026): die kleine Ueber-Ueberschrift dunkel, die grosse Ueberschrift weiss. Das trifft die Barrierefreiheit auch gut: die KLEINE Schrift braucht den hoeheren Kontrast (dunkel = 7,1:1, bestanden), die grosse fette Schrift die niedrigere Schwelle. ⚠️ Weiss erreicht dort 2,37:1 und bleibt unter den geforderten 3:1 -- bewusst so gewaehlt; wer es beheben will, dunkelt das GRUEN ab (--balken), nicht die Schrift. */ --balken-schrift: #FFFFFF; --balken-kicker: #17200F; /* Seitlicher Ueberstand des Balkens. Kicker und Ueberschrift muessen DENSELBEN Wert benutzen, sonst stehen sie versetzt uebereinander. */ --balken-ueberstand: calc(-1 * clamp(0px, (100vw - 1260px) / 2, 130px)); --flaeche-2: #F4F3EC; --text: #232A22; --text-2: #5C655A; --linie: #E2E1D6; /* Seitenakzent BEWUSST fest auf dem Gruen, nicht auf var(--c-geton-text): seit dem Farbtausch (GetOn = rot) darf der Akzent der Seite nicht mitwandern -- er passt zum Gruen der Abschnittsbalken (--balken). */ --akzent: #3F7C15; --akzent-hell: #EDF5E5; --c-geton-bg: #FAE5E6; --c-stepon-bg: #FEF6E0; --c-kiepon-bg: #EDF5E5; --c-wholeon-bg: #E7F2DE; --c-pruefung-bg: #E2F0F8; } /* Produktfarbe als lokale Variable, gesetzt ueber eine Klasse am Block. Diese fuenf Klassen traegt der Betreiber unter "Erweitert -> Zusaetzliche CSS-Klasse(n)" ein. */ .kiep-preisseite .p-geton { --pf: var(--c-geton); --pf-ink: var(--c-geton-ink); --pf-text: var(--c-geton-text); --pf-bg: var(--c-geton-bg); } .kiep-preisseite .p-stepon { --pf: var(--c-stepon); --pf-ink: var(--c-stepon-ink); --pf-text: var(--c-stepon-text); --pf-bg: var(--c-stepon-bg); } .kiep-preisseite .p-kiepon { --pf: var(--c-kiepon); --pf-ink: var(--c-kiepon-ink); --pf-text: var(--c-kiepon-text); --pf-bg: var(--c-kiepon-bg); } .kiep-preisseite .p-wholeon { --pf: var(--c-wholeon); --pf-ink: var(--c-wholeon-ink); --pf-text: var(--c-wholeon-text); --pf-bg: var(--c-wholeon-bg); } .kiep-preisseite .p-pruefung { --pf: var(--c-pruefung); --pf-ink: var(--c-pruefung-ink); --pf-text: var(--c-pruefung-text); --pf-bg: var(--c-pruefung-bg); } /* ---------- Abschnitte und Sprungmarken ---------------------------------- */ /* Blocksy kann einen klebenden Kopf haben - deshalb reichlich Vorlauf. */ .kiep-preisseite .abschnitt, .kiep-preisseite .karte { scroll-margin-top: 110px; } .kiep-preisseite .abschnitt { margin-top: 44px; } /* Abschnittsueberschriften als gruener Balken -- dieselbe Bauform wie auf der Startseite: volle Spaltenbreite, weisse fette Schrift mittig auf gruenem Grund. Damit sehen Startseite und Preisseite gleich aus. (24.08.2026) */ .kiep-preisseite .abschnitt > h2 { background: var(--balken); color: var(--balken-schrift); font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 700; letter-spacing: normal; text-align: center; margin: 0 0 14px; padding: 16px 20px; /* Ueberstand: der Balken ragt seitlich etwas ueber die Textspalte hinaus -- dieselbe Wirkung wie die Breitstellung (alignwide) auf der Startseite. Der Ueberstand waechst nur so weit mit, wie wirklich Platz da ist, und ist unterhalb von 1260 px Fensterbreite null (130 px = der am Original gemessene Ueberstand: Balken 1460 px gegen Textspalte 1200 px). Damit kann nie etwas seitlich aus dem Bild laufen. */ margin-inline: var(--balken-ueberstand); } /* Der Kicker steht ueber dem Balken -- deshalb ebenfalls mittig. */ /* Der Kicker gehoert MIT auf den gruenen Balken (Wunsch 25.08.2026): gleicher Grund, gleicher Ueberstand, kein Abstand dazwischen -- beides liest sich dadurch als EIN Balken. Nur drei der sieben Abschnitte haben einen Kicker; die anderen behalten ihr volles Innenmass, weil die Nachbarregel nur bei einem direkt davorstehenden Kicker greift. */ .kiep-preisseite .abschnitt > .kicker { text-align: center; background: var(--balken); color: var(--balken-kicker); margin: 0; padding: 14px 20px 0; margin-inline: var(--balken-ueberstand); } .kiep-preisseite .abschnitt > .kicker + h2 { padding-top: 6px; } .kiep-preisseite .vorspann { color: var(--text-2); margin: 0 0 4px; max-width: 60em; } /* ---------- Kopfbereich --------------------------------------------------- */ .kiep-preisseite .hero { border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; background: var(--flaeche); padding: 0; margin-top: 8px; } /* Das fuenffarbige Band oben ist reine Zier - deshalb CSS statt fuenf Bloecke. */ .kiep-preisseite .hero::before { content: ""; display: block; height: var(--kante); background: linear-gradient(to right, var(--c-geton) 0 20%, var(--c-stepon) 20% 40%, var(--c-kiepon) 40% 60%, var(--c-wholeon) 60% 80%, var(--c-pruefung) 80% 100%); } .kiep-preisseite .hero-innen { padding: 26px 30px; } .kiep-preisseite .stand { display: inline-block; background: var(--akzent-hell); color: var(--akzent); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin: 0 0 14px; } .kiep-preisseite .hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.015em; margin: 0 0 6px; text-wrap: balance; } .kiep-preisseite .leitsatz { font-size: clamp(1.02rem, 2vw, 1.2rem); font-weight: 600; margin: 0 0 8px; color: var(--text); } .kiep-preisseite .unterzeile { color: var(--text-2); max-width: 50em; margin: 0 0 18px; } .kiep-preisseite .chips { gap: 8px; } .kiep-preisseite .chip { margin: 0; background: var(--pf-bg, var(--flaeche-2)); color: var(--pf-text, var(--text-2)); border: 1px solid color-mix(in srgb, var(--pf, var(--linie)) 34%, transparent); font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; } /* ---------- Sprungleiste -------------------------------------------------- */ .kiep-preisseite .sprung { gap: 7px; margin: 18px 0 0; } .kiep-preisseite .sprung .wp-block-button__link { background: var(--flaeche); color: var(--text-2); border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; font-weight: 600; padding: 6px 14px; } .kiep-preisseite .sprung .wp-block-button__link:hover, .kiep-preisseite .sprung .wp-block-button__link:focus-visible { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-hell); } /* ---------- Entscheidungshilfe ------------------------------------------- */ .kiep-preisseite .wegweiser { display: grid; gap: 8px; margin-top: 14px; } .kiep-preisseite .wegzeile { margin: 0; } /* BEWUSST KEIN Flex-Layout: Der Satz enthaelt fettgedruckte Stellen. In einem Flex-Kasten wird jedes Textstueck zwischen ihnen zu einem eigenen Element und der Satz mit "space-between" auseinandergerissen. Der Text bleibt deshalb normaler Fliesstext; nur das Sprungziel wandert nach rechts. */ .kiep-preisseite .wegzeile > a { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-left: var(--kante) solid var(--pf, var(--linie)); border-radius: 12px; padding: 12px 16px; color: var(--text); text-decoration: none; } .kiep-preisseite .wegzeile > a:hover, .kiep-preisseite .wegzeile > a:focus-visible { background: var(--pf-bg, var(--flaeche-2)); border-color: color-mix(in srgb, var(--pf, var(--linie)) 50%, transparent); border-left-color: var(--pf, var(--linie)); } /* "GetOn ->" am Zeilenende: das letzte Fettgedruckte im Link wandert nach rechts, ohne den Satz davor anzutasten. */ .kiep-preisseite .wegzeile > a > strong:last-child { float: right; margin-left: 18px; color: var(--pf-text, var(--akzent)); white-space: nowrap; font-weight: 800; } .kiep-preisseite .wegzeile > a::after { content: ""; display: block; clear: both; } .kiep-preisseite .auch-fuer { margin: 14px 0 0; font-size: .92rem; color: var(--text-2); background: var(--flaeche-2); border-radius: 12px; padding: 12px 16px; } /* ---------- Kartenraster -------------------------------------------------- */ /* Die vier Karten teilen sich dieselben Rasterzeilen (subgrid): Kartenkopf, Beschreibung, "Laufzeit & Zahlweise" und "Im 1. Jahr gesamt" stehen dadurch in allen Spalten auf exakt derselben Hoehe. ACHTUNG - JEDE KARTE MUSS GENAU FUENF DIREKTE UNTERBLOECKE HABEN. Kommt einer dazu oder faellt einer weg, verrutscht die Ausrichtung. Neue Inhalte gehoeren deshalb IN die Gruppe "Kartenrest", nicht daneben. Der Zeilenabstand des Rasters muss 0 sein (er wirkte sonst INNERHALB der Karten); der Abstand zwischen umgebrochenen Kartenreihen kommt stattdessen aus dem Aussenabstand der Karte. */ .kiep-preisseite .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); align-items: stretch; column-gap: 16px; row-gap: 0; margin: 18px 0 -16px; } .kiep-preisseite .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; border-top: var(--kante) solid var(--pf, var(--linie)); padding: 20px; margin: 0 0 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Nur die vier Paketkarten teilen sich die Rasterzeilen. Camp-, Pruefungs- und Erwachsenenkarten sind schlichte Karten ohne diese Regel -- sie duerfen beliebig viele Bausteine haben. */ .kiep-preisseite .karte.mit-kopf { border-top-width: 1px; padding: 0 20px 20px; display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0; } /* Auch der Kartenrest reicht seine vier Bausteine an das gemeinsame Raster durch -- nur so stehen "Geschwister", Knopf und Fussnote in allen vier Karten auf derselben Hoehe, egal wie lang die Leistungsliste darueber ist (Wunsch 25.08.2026). Vorher war der Kartenrest eine Flex-Spalte: die Bausteine richteten sich dann nur INNERHALB einer Karte aus. 🔴 RECHNUNG: 4 Bausteine neben dem Kartenrest + 4 Bausteine IM Kartenrest = span 8 an der Karte. Aendert sich eine der beiden Zahlen, muss die 8 mitwandern -- sonst verrutscht die Ausrichtung wieder. */ .kiep-preisseite .kartenrest { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; } /* Kartenkopf: Vollton in der Produktfarbe, Preis klebt unten */ .kiep-preisseite .kartenkopf { background: var(--pf); color: var(--pf-ink); margin: 0 -20px 16px; padding: 14px 20px 0; display: flex; flex-direction: column; gap: 0; } /* Die Zeile ueber dem Namen ordnet nur ein und tritt deshalb zurueck -- sonst steht sie in Konkurrenz zum Paketnamen. */ .kiep-preisseite .augenbraue { margin: 0 0 5px; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; } /* Der Paketname ist die wichtigste Angabe der Karte und muss auf der farbigen Flaeche sofort ins Auge fallen -- deshalb deutlich groesser als der Preis darunter. Die Schriftfarbe ist weiss -- ausser auf dem gelben StepOn-Kopf, wo Weiss nicht lesbar waere. */ /* "margin-top: auto" haengt den Namen von UNTEN auf: Er sitzt damit immer direkt ueber dem Preisblock, egal ob die Zeile darueber ein- oder zweizeilig ist ("Erfahrungsraum - gemeinsames Lernen" bricht um). Weil alle vier Kartenkoepfe dieselbe Rasterzeile teilen, stehen Name und Preis dadurch in allen vier Karten auf exakt derselben Hoehe -- ohne der Zeile darueber eine feste Hoehe aufzuzwingen. */ .kiep-preisseite .karte .kartenkopf h3 { margin: auto 0 0; font-weight: 800; font-size: clamp(1.7rem, 2.7vw, 2.1rem); line-height: 1.08; letter-spacing: -.02em; color: var(--pf-ink); } .kiep-preisseite .kopfpreis { margin: 13px -20px 0; padding: 10px 20px 12px; background: rgba(0, 0, 0, .14); font-variant-numeric: tabular-nums; } .kiep-preisseite .kopfpreis > p { margin: 0; font-size: .9rem; font-weight: 700; } /* Der grosse Preis ist schlicht das erste Fettgedruckte - der Betreiber markiert ihn im Editor mit "Fett", kein Sonder-Markup noetig. */ .kiep-preisseite .kopfpreis > p:first-child > strong:first-child { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; } .kiep-preisseite .kopfpreis .zerlegung { font-size: .8rem; font-weight: 500; opacity: .88; margin-top: 1px; } .kiep-preisseite .abzeichen { position: absolute; top: 12px; right: 14px; z-index: 2; margin: 0; background: rgba(255, 255, 255, .93); color: #232A22; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .kiep-preisseite .karte .fuer { margin: 0 0 12px; font-size: .93rem; color: var(--text-2); } /* Etikettzeilen: das fuehrende Fettgedruckte wird zur Kopfzeile darueber */ .kiep-preisseite .zeile { margin: 0 0 8px; font-size: .9rem; border-top: 1px solid var(--linie); padding-top: 8px; } .kiep-preisseite .zeile > strong:first-child { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; } .kiep-preisseite .leistungen { list-style: none; margin: 4px 0 12px; padding: 0; font-size: .91rem; display: grid; gap: 7px; } /* Gruene Haekchen - das kann kein Block von sich aus. */ .kiep-preisseite .leistungen > li { padding-left: 24px; position: relative; } .kiep-preisseite .leistungen > li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--pf-text, var(--akzent)); font-weight: 800; } .kiep-preisseite .sparen { background: var(--pf-bg); border-radius: 12px; padding: 11px 14px; margin: 0 0 12px; font-size: .88rem; } .kiep-preisseite .sparen > p { margin: 0; } .kiep-preisseite .formel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .kiep-preisseite .formel > p { margin: 0; font-weight: 800; font-size: .78rem; } .kiep-preisseite .formel > .teil { background: var(--pf); color: var(--pf-ink); padding: 3px 10px; border-radius: 999px; } /* Buchen-Knopf -- auch die helle Zweitform klebt unten, sonst haengen die Knoepfe benachbarter Karten auf verschiedenen Hoehen. */ .kiep-preisseite .knopf, .kiep-preisseite .knopf-zweit { margin-top: auto; } .kiep-preisseite .knopf .wp-block-button__link { display: block; width: 100%; text-align: center; background: var(--pf); color: var(--pf-ink); border-radius: 11px; padding: 12px 16px; font-weight: 800; font-size: .97rem; border: 0; } .kiep-preisseite .knopf .wp-block-button__link:hover, .kiep-preisseite .knopf .wp-block-button__link:focus-visible { filter: brightness(.92); color: var(--pf-ink); } .kiep-preisseite .mikro { margin: 7px 0 0; font-size: .78rem; color: var(--text-2); text-align: center; } .kiep-preisseite .vergleich-link { margin: 8px 0 0; font-size: .84rem; text-align: center; } .kiep-preisseite .vergleich-link a { color: var(--text-2); } /* ---------- Beratungs-Streifen ------------------------------------------- */ .kiep-preisseite .beratung { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; background: var(--akzent-hell); border: 1px solid color-mix(in srgb, var(--akzent) 22%, transparent); border-radius: 16px; padding: 18px 22px; margin-top: 22px; } .kiep-preisseite .beratung h3 { margin: 0 0 3px; font-size: 1.1rem; font-weight: 800; } .kiep-preisseite .beratung p { margin: 0; font-size: .92rem; color: var(--text-2); } .kiep-preisseite .knopf-zweit .wp-block-button__link { background: var(--flaeche); color: var(--akzent); border: 2px solid var(--akzent); border-radius: 11px; font-weight: 800; font-size: .92rem; padding: 10px 18px; } /* ---------- "In allen Paketen enthalten" --------------------------------- */ .kiep-preisseite .gemeinsam { background: var(--flaeche-2); border-radius: 16px; padding: 20px 22px; margin-top: 18px; } .kiep-preisseite .gemeinsam h3 { margin: 0 0 3px; font-size: 1.1rem; font-weight: 800; } .kiep-preisseite .untertitel { margin: 0 0 12px; font-size: .9rem; color: var(--text-2); } .kiep-preisseite .gemeinsam ul { list-style: none; margin: 0; padding: 0; font-size: .91rem; display: grid; gap: 7px 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .kiep-preisseite .gemeinsam li { padding-left: 24px; position: relative; } .kiep-preisseite .gemeinsam li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--akzent); font-weight: 800; } /* ---------- Kicker: kleine Zeile ueber einer Ueberschrift ---------------- */ .kiep-preisseite .kicker { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pf-text, var(--akzent)); } /* ---------- Kosten-Klartext ---------------------------------------------- */ .kiep-preisseite .kosten { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* "stretch" statt "start": die Kaesten einer Reihe werden alle so hoch wie der hoechste, sonst stehen ihre Unterkanten treppenfoermig versetzt (Wunsch 25.08.2026). */ align-items: stretch; } .kiep-preisseite .kasten { background: var(--flaeche); border: 1px solid var(--linie); border-top: var(--kante) solid var(--pf, var(--linie)); border-radius: 16px; padding: 18px 20px; } .kiep-preisseite .kasten h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--pf-text, var(--text)); } /* Ein Kasten, der NICHT im Kosten-Raster steht, sondern allein auf voller Breite -- seit 25.08.2026 der Kombi-Rabatt unter den Paketkarten. Im Raster kam sein Abstand nach oben aus der Luecke (gap); allein stehend hat er keinen und klebte sonst an den Karten darueber. Derselbe Wert wie bei .gemeinsam, damit die Abstaende der Reihe gleich bleiben. */ .kiep-preisseite .kasten-breit { margin-top: 18px; } /* Posten: fette Zeile als Ueberschrift, danach die Erklaerung. Bewusst KEINE Definitionsliste -- dafuer gibt es keinen Block, und Ueberschrift plus Absatz ist im Editor leichter zu pflegen. */ .kiep-preisseite .posten { margin: 0 0 3px; font-size: .92rem; font-weight: 700; } .kiep-preisseite .posten-text { margin: 0 0 13px; font-size: .88rem; color: var(--text-2); } .kiep-preisseite .posten-text:last-child { margin-bottom: 0; } .kiep-preisseite .beispiel { background: var(--pf-bg, var(--flaeche-2)); border-radius: 11px; padding: 12px 14px; margin: 12px 0 0; font-size: .88rem; font-variant-numeric: tabular-nums; } /* ---------- Leistungsvergleich: Aufklappbloecke mit Tabellen ------------- */ .kiep-preisseite .themenblock { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 13px; margin: 0 0 9px; overflow: hidden; } .kiep-preisseite .themenblock > summary { cursor: pointer; padding: 13px 18px; font-weight: 800; font-size: .98rem; background: var(--flaeche-2); list-style-position: inside; } .kiep-preisseite .themenblock > summary:hover { color: var(--akzent); } .kiep-preisseite .themenblock[open] > summary { border-bottom: 1px solid var(--linie); } .kiep-preisseite .legende { margin: 0; padding: 10px 18px 0; font-size: .82rem; color: var(--text-2); } /* WordPress gibt der Tabelle bereits einen waagerechten Rollbereich mit -- darin bleibt die erste Spalte beim Wischen stehen. */ .kiep-preisseite .themenblock .wp-block-table { margin: 0; padding: 10px 18px 16px; } /* Feste Spaltenbreiten: Ohne sie richtet sich JEDE Tabelle nach ihrem eigenen laengsten Text -- dann steht "GetOn" in jedem Themenblock an einer anderen Stelle. Mit 32% + 4x17% liegen die vier Paketspalten in allen Tabellen exakt uebereinander, und die Buchen-Knoepfe darunter treffen ihre Spalte (siehe .vergleich-knoepfe). */ .kiep-preisseite .vgl table { border-collapse: separate; border-spacing: 0; min-width: 620px; font-size: .87rem; width: 100%; table-layout: fixed; } .kiep-preisseite .vgl thead th:first-child { width: 32%; } .kiep-preisseite .vgl thead th:not(:first-child) { width: 17%; } .kiep-preisseite .vgl th, .kiep-preisseite .vgl td { padding: 8px 11px; text-align: center; border-bottom: 1px solid var(--linie); border-top: 0; border-left: 0; border-right: 0; vertical-align: top; } /* Erste Spalte: bleibt beim seitlichen Wischen stehen */ .kiep-preisseite .vgl th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--flaeche); text-align: left; font-weight: 600; box-shadow: 1px 0 0 var(--linie); } .kiep-preisseite .vgl thead th { background: var(--flaeche-2); font-weight: 800; border-bottom: 2px solid var(--linie); text-align: center; } /* Die Paketfarben haengen an der SPALTENNUMMER, nicht an einer Klasse in der Zelle -- der Tabellenblock wuerde eine Zellklasse beim Bearbeiten verwerfen (siehe Hinweis in der Aufbau-Datei). */ .kiep-preisseite .vgl thead th:nth-child(2) { color: var(--c-geton-text); } .kiep-preisseite .vgl thead th:nth-child(3) { color: var(--c-stepon-text); } .kiep-preisseite .vgl thead th:nth-child(4) { color: var(--c-kiepon-text); } .kiep-preisseite .vgl thead th:nth-child(5) { color: var(--c-wholeon-text); } .kiep-preisseite .vgl thead th:first-child { color: var(--text-2); font-weight: 700; text-align: left; } .kiep-preisseite .vgl tbody tr:nth-child(even) th[scope="row"] { background: #FCFCF9; } .kiep-preisseite .vgl tbody tr:nth-child(even) td { background: #FCFCF9; } /* "enthalten" ist fett ausgezeichnet, "nicht enthalten" kursiv -- beides kennt der Block als Textformat und ueberlebt das Bearbeiten. Das Gruen steht hier FEST (nicht var(--c-geton-text)): es bedeutet "enthalten", nicht "GetOn" -- seit dem Farbtausch ist GetOn rot. */ .kiep-preisseite .vgl tbody td strong { color: #3F7C15; font-weight: 800; font-size: 1.05em; } .kiep-preisseite .vgl tbody td em { color: #9AA396; font-style: normal; } /* Knopfreihe: die Knoepfe teilen sich die volle Breite gleichmaessig, statt linksbuendig nebeneinander zu stehen -- sonst wirken sie verloren. Die dritte Klasse (.wp-block-buttons) ist noetig, um das Flex-Layout zu uebersteuern, das WordPress fuer Knopfgruppen mitliefert. */ .kiep-preisseite .knopfreihe.wp-block-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 18px; } .kiep-preisseite .knopfreihe .wp-block-button { width: 100%; } .kiep-preisseite .knopfreihe .wp-block-button__link { display: block; width: 100%; text-align: center; background: var(--pf, var(--akzent)); color: var(--pf-ink, #fff); border-radius: 10px; font-weight: 800; font-size: .9rem; padding: 11px 12px; } /* Unter dem Leistungsvergleich steht jeder Knopf unter SEINER Tabellenspalte. Dieselben Breiten wie die Tabelle (32% + 4x17%), dieselbe Einrueckung wie der Tabellenrand im Themenblock (18px Polster + 1px Rahmen), und die erste Spalte bleibt leer -- dort stehen in der Tabelle die Kriterien. Der Abstand zwischen den Knoepfen kommt aus deren Polsterung statt aus einer Rasterluecke, weil eine Luecke die Spalten verschieben wuerde. */ .kiep-preisseite .vergleich-buchen { display: grid; grid-template-columns: 32% repeat(4, 17%); align-items: center; padding: 0 19px; margin-top: 14px; } /* "display: contents" loest die Knopfgruppe auf, sodass die vier Knoepfe selbst zu Feldern des Rasters werden -- nur so landet jeder unter seiner Tabellenspalte, waehrend der Hinweis links davon in der ersten Spalte steht (dort, wo in der Tabelle die Leistungen stehen). */ .kiep-preisseite .vergleich-knoepfe.wp-block-buttons { display: contents; } /* Abstand ueber den Aussenrand, nicht ueber eine Rasterluecke: eine Luecke wuerde die Spalten gegenueber der Tabelle verschieben. */ .kiep-preisseite .vergleich-knoepfe .wp-block-button { width: auto; margin: 0 6px; } .kiep-preisseite .buchen-hinweis { margin: 0; padding-right: 12px; font-size: .88rem; font-weight: 700; color: var(--text-2); } .kiep-preisseite .vergleich-knoepfe .wp-block-button__link { display: block; width: 100%; text-align: center; background: var(--pf, var(--akzent)); color: var(--pf-ink, #fff); border-radius: 10px; font-weight: 800; font-size: .88rem; padding: 11px 8px; } /* Zu schmal fuer fuenf Spalten? Dann steht der Hinweis ueber den Knoepfen. */ @media (max-width: 780px) { .kiep-preisseite .vergleich-buchen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; } .kiep-preisseite .buchen-hinweis { grid-column: 1 / -1; margin-bottom: 8px; } .kiep-preisseite .vergleich-knoepfe .wp-block-button { margin: 4px; } } /* Im Abschlusskasten sind die Knoepfe der letzte Aufruf der Seite -- deshalb deutlich groesser als die Wiederholung im Leistungsvergleich. */ .kiep-preisseite .abschluss .knopfreihe.wp-block-buttons { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 20px; } /* Alle fuenf Knoepfe gleich hoch, auch wenn eine Beschriftung umbricht. "overflow-wrap: normal" verhindert dabei den Bruch MITTEN im Wort ("Pruefungsvorbereitu|ng"); getrennt wird nur an dem weichen Trennzeichen, das im Text steht. */ .kiep-preisseite .abschluss .knopfreihe .wp-block-button { height: 100%; } .kiep-preisseite .abschluss .knopfreihe .wp-block-button__link { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.02rem; padding: 14px; border-radius: 12px; line-height: 1.25; overflow-wrap: normal; hyphens: manual; } /* ---------- Lernen vor Ort ------------------------------------------------ */ .kiep-preisseite .karte h3 { margin: 0 0 7px; font-size: 1.22rem; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--pf-text, var(--text)); } .kiep-preisseite .terminzeile { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: var(--pf-bg, var(--flaeche-2)); border-radius: 14px; padding: 15px 20px; margin-top: 6px; } .kiep-preisseite .terminzeile p { margin: 0; font-size: .92rem; } /* ---------- Pruefungsvorbereitung ---------------------------------------- */ .kiep-preisseite .p-b1 { --pf: var(--c-b1); --pf-ink: #fff; --pf-text: var(--c-b1); --pf-bg: #E2F0F8; } .kiep-preisseite .p-b2 { --pf: var(--c-b2); --pf-ink: #fff; --pf-text: var(--c-b2); --pf-bg: #E0EDF6; } .kiep-preisseite .p-b3 { --pf: var(--c-b3); --pf-ink: #fff; --pf-text: var(--c-b3); --pf-bg: #DDE9F2; } .kiep-preisseite .p-b4 { --pf: var(--c-b4); --pf-ink: #fff; --pf-text: var(--c-b4); --pf-bg: #E4E7F5; } .kiep-preisseite .p-b5 { --pf: var(--c-b5); --pf-ink: #fff; --pf-text: var(--c-b5); --pf-bg: #E2E4F0; } .kiep-preisseite .leistungsband { background: var(--c-pruefung-bg); border-radius: 14px; padding: 16px 20px; margin: 14px 0 4px; } .kiep-preisseite .leistungsband h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; color: var(--c-pruefung-text); } .kiep-preisseite .leistungsband ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .kiep-preisseite .leistungsband li { padding-left: 24px; position: relative; } .kiep-preisseite .leistungsband li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--c-pruefung-text); font-weight: 800; } /* Die Etikett-Pillen fuellen ihre Rasterzeile ganz aus und zentrieren den Text darin. Dadurch sind alle fuenf gleich hoch -- auch wenn eine davon zweizeilig umbricht ("Mittlere Reife - Komplett"). Ohne "stretch" waere nur die Zeile gleich hoch, die Pille darin aber nicht. */ /* Die Etikett-Pillen fuellen ihre Rasterzelle in BEIDE Richtungen und zentrieren den Text. Dadurch sind alle fuenf gleich hoch UND gleich breit -- auch die zweizeilige "Mittlere Reife - Komplett". */ .kiep-preisseite .familie { align-self: stretch; justify-self: stretch; margin: 0 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--pf); color: var(--pf-ink); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } /* Preis oben in seiner Zeile, damit die Betraege aller fuenf Karten auf einer Linie liegen -- auch wenn "/ Wochenende" umbricht. */ .kiep-preisseite .preis { margin: 0 0 12px; align-self: start; font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 700; color: var(--text-2); } /* Die Knoepfe fuellen ihre Rasterzeile, damit einzeilige und zweizeilige Beschriftungen gleich hohe Knoepfe ergeben. WICHTIG: "margin-top" muss hier auf 0 zurueck. Ein automatischer Aussenabstand schiebt das Feld nach unten und hebt "stretch" auf -- beides zusammen geht bei Rasterfeldern nicht. */ .kiep-preisseite .karte-gleich .knopf, .kiep-preisseite .karte-gleich .knopf-zweit { margin-top: 0; align-self: stretch; } /* Volle Kartenbreite -- dieselbe Breite wie die Etikett-Pille oben, damit die Karten von oben bis unten dieselbe Kante haben. */ .kiep-preisseite .karte-gleich .wp-block-buttons { width: 100%; } .kiep-preisseite .karte-gleich .wp-block-button, .kiep-preisseite .karte-gleich .wp-block-button__link { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .kiep-preisseite .preis > strong:first-child { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-right: 3px; } /* Zweite Zeile unter dem Preis. Bei der High-School-Karte steht gross der ECHTE Preis (Jahresbetrag, so wird auch gezahlt) und hier darunter die Umrechnung auf den Monat -- nur damit sich die Karte mit den monatlich ausgezeichneten Karten daneben vergleichen laesst. 🔴 Das Wort "umgerechnet" muss stehen bleiben: ohne es liest sich der Monatsbetrag wie eine Rate. Der Zusatz "einmalig bei der Schulanmeldung faellig" stand hier bis zum 25.08.2026 und wurde vom Betreiber gestrichen, nachdem der JAHRESbetrag nach oben gewandert war. ⚠️ Damit sagt die Karte nicht mehr ausdruecklich, dass nicht in Raten gezahlt wird. 🔴 Sie steht ALS SPAN IM Preis-Baustein, nicht als eigener Block daneben: die Pruefungskarten teilen sich die Rasterzeilen und muessen genau fuenf Bausteine behalten. "display: block" ersetzt den Zeilenumbruch. */ .kiep-preisseite .preis .umgerechnet { display: block; margin-top: 3px; font-size: .81rem; font-weight: 600; line-height: 1.35; color: var(--text-2); } /* Das Sternchen am Preis wird hochgestellt, damit seine Oberkante mit der des Betrags abschliesst -- auf der Grundlinie haengt es sonst unter den grossen Ziffern und sieht aus wie ein Rechenzeichen. Am 25.08.2026 am Bildschirm ausgemessen: bei -0,7em stehen die Oberkanten bis auf 0,6 px gleich (Betrag 24 px, Sternchen 14,4 px). "position: relative" statt "vertical-align": ein hochgestelltes Zeichen wuerde die Zeilenhoehe aufweiten und die Karte um ein paar Pixel wachsen lassen -- die vier Pruefungskarten teilen sich aber ihre Rasterzeilen. Der Versatz in em wandert mit, falls die Schriftgroesse einmal geaendert wird. */ .kiep-preisseite .preis .stern { position: relative; top: -0.7em; font-weight: 700; } /* Sternchen-Erlaeuterung unter einem Kartenraster. Steht bewusst NEBEN den Karten und nicht darin: die Pruefungskarten teilen sich die Rasterzeilen und muessen genau fuenf Bausteine behalten (25.08.2026). */ .kiep-preisseite .sternchen { margin: 14px 0 0; font-size: .84rem; color: var(--text-2); } .kiep-preisseite .kontaktzeile { margin: 14px 0 0; font-size: .89rem; color: var(--text-2); } /* ---------- Fuer Erwachsene ---------------------------------------------- */ .kiep-preisseite .preis-etikett { display: inline-block; align-self: flex-start; margin: 0 0 9px; background: var(--pf-bg); color: var(--pf-text); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .kiep-preisseite .erwachsene-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; } .kiep-preisseite .erwachsene-liste > li { background: var(--flaeche); border: 1px solid var(--linie); border-left: var(--kante) solid var(--akzent); border-radius: 11px; padding: 11px 15px; } /* Die vier Ausbildungswege tragen die vier Hausfarben statt viermal Gruen (Betreiberwunsch 25.08.2026) -- rot, gelb, gruen, blau, dieselbe Folge wie das Band im Seitenkopf. 🔴 Die Farbe haengt an der POSITION, nicht an einer Klasse im Eintrag: Der Listenblock von WordPress verwirft eine Klasse am einzelnen
  • beim Bearbeiten wieder -- derselbe Grund wie beim Leistungsvergleich weiter oben. ⚠️ Kommt ein fuenfter Eintrag dazu, bleibt er beim gruenen Grundwert. Dann hier eine Zeile ergaenzen. */ .kiep-preisseite .erwachsene-liste > li:nth-child(1) { border-left-color: var(--c-geton); } .kiep-preisseite .erwachsene-liste > li:nth-child(2) { border-left-color: var(--c-stepon); } .kiep-preisseite .erwachsene-liste > li:nth-child(3) { border-left-color: var(--c-kiepon); } .kiep-preisseite .erwachsene-liste > li:nth-child(4) { border-left-color: var(--c-pruefung); } /* ---------- Haeufige Fragen ---------------------------------------------- */ .kiep-preisseite .frage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; margin: 0 0 8px; overflow: hidden; } .kiep-preisseite .frage > summary { cursor: pointer; padding: 13px 17px; font-weight: 700; font-size: .95rem; list-style-position: inside; } .kiep-preisseite .frage > summary:hover { color: var(--akzent); } .kiep-preisseite .frage[open] > summary { border-bottom: 1px solid var(--linie); background: var(--flaeche-2); } .kiep-preisseite .frage > p { margin: 0; padding: 13px 17px; font-size: .91rem; color: var(--text-2); } /* 🔴 Die leere Zeile unter zugeklappten Aufklappbereichen. Das Theme gibt jedem Element im Textfluss einen Abstand nach oben: :where(.is-layout-flow) > * { margin-block-start: ... } Beim zugeklappten
    ist der Inhalt zwar unsichtbar, sein Aussenabstand wirkt aber weiter -- und weil die Kaesten "overflow: hidden" haben, wird er eingeschlossen statt zu verschwinden. Ergebnis: eine leere Zeile unter jeder Frage. Der Abstand im AUFGEKLAPPTEN Zustand kommt ohnehin aus der Polsterung, nicht aus diesem Aussenabstand. */ .kiep-preisseite .frage > *:not(summary), .kiep-preisseite .themenblock > *:not(summary) { margin-block-start: 0; } /* Sicherheitshalber ist der Inhalt im zugeklappten Zustand auch ausdruecklich ausgeblendet -- so kann von ihm nichts Platz beanspruchen. */ .kiep-preisseite .frage:not([open]) > *:not(summary), .kiep-preisseite .themenblock:not([open]) > *:not(summary) { display: none; } /* 🔴 DAS war die leere Zeile unter zugeklappten Aufklappbereichen: nicht der Inhalt, sondern die UEBERSCHRIFT selbst. Das traegt einen Abstand nach unten von rund 23 Pixeln (im Browser gemessen: Kasten 75 px, Textzeile 51 px). Beim zugeklappten Kasten ist das die einzige sichtbare Zeile -- der Abstand steht dann als Leerraum darunter. Beim aufgeklappten Kasten ist er ebenfalls unnoetig, weil der Abstand zum Text aus der Polsterung des Absatzes kommt. */ .kiep-preisseite .frage > summary, .kiep-preisseite .themenblock > summary { margin-block-end: 0; margin-bottom: 0; } /* Offene Fragen, deren Antwort das Sekretariat noch liefern muss. Bewusst ueber eine KLASSE am Block statt ueber ein Element im Text: Ein in der Ueberschrift faengt sonst die Layout-Klassen ab, die WordPress an das
    haengen will. Ist die Antwort da, entfernt der Betreiber einfach die Klasse "frage-offen" unter "Erweitert -> Zusaetzliche CSS-Klasse(n)". */ .kiep-preisseite .frage-offen { border-left: var(--kante) solid #E0A93A; } .kiep-preisseite .frage-offen > summary::after { /* \0000FC ist der Umlaut u. Als Zeichen geschrieben haengt seine Darstellung von der Zeichenkodierung der Datei ab -- so nicht. */ content: "bitte pr\0000FCfen"; display: inline-block; margin-left: 8px; vertical-align: 1px; background: #F6EBD2; color: #8A5E12; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; } /* ---------- Abschluss ----------------------------------------------------- */ .kiep-preisseite .abschluss { border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; background: var(--flaeche); padding: 0; margin-top: 44px; } .kiep-preisseite .abschluss::before { content: ""; display: block; height: var(--kante); background: linear-gradient(to right, var(--c-geton) 0 20%, var(--c-stepon) 20% 40%, var(--c-kiepon) 40% 60%, var(--c-wholeon) 60% 80%, var(--c-pruefung) 80% 100%); } .kiep-preisseite .abschluss-innen { padding: 24px 30px 26px; } .kiep-preisseite .abschluss h2 { margin: 0 0 5px; font-size: 1.5rem; font-weight: 800; } .kiep-preisseite .abschluss > .abschluss-innen > p { margin: 0 0 4px; color: var(--text-2); } /* ---------- Handy --------------------------------------------------------- */ @media (max-width: 600px) { .kiep-preisseite .hero-innen { padding: 20px 18px; } .kiep-preisseite .karten { grid-template-columns: 1fr; } .kiep-preisseite .wegzeile > a { border-radius: 10px; padding: 11px 13px; } } /* ---------- Nur im Editor ------------------------------------------------- */ /* Im Editor ist das Raster sonst kaum zu treffen; eine zarte Hilfslinie zeigt dem Betreiber, wo eine Karte anfaengt und aufhoert. */ .editor-styles-wrapper .karte { outline: 1px dashed rgba(0,0,0,.12); outline-offset: 3px; } @media (max-width: 600px) { .kiep-preisseite .kosten { grid-template-columns: 1fr; } .kiep-preisseite .abschluss-innen { padding: 20px 18px 22px; } .kiep-preisseite .vgl th[scope="row"] { min-width: 150px; } .kiep-preisseite .themenblock .wp-block-table { padding: 10px 12px 14px; } } /* Die fuenf Pruefungsangebote stehen in EINER Reihe nebeneinander, solange der Platz reicht -- und teilen sich dabei die Rasterzeilen, damit Etikett, Titel, Beschreibung, Preis und Knopf in allen fuenf Karten auf derselben Hoehe stehen (dieselbe Technik wie bei den vier Paketkarten). Auch hier gilt: GENAU FUENF Bausteine je Karte. */ .kiep-preisseite .karten-schmal { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .kiep-preisseite .karte.karte-gleich { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; } @media (max-width: 600px) { .kiep-preisseite .karten-schmal { grid-template-columns: 1fr; } } /* Im Editor bleibt die Knopfgruppe ein normaler Block: "display: contents" loest sie auf, und der Editor braucht den Wrapper zum Auswaehlen und Verschieben. Die Spaltenausrichtung ist reine Frontend-Feinarbeit. */ /* Der Hinweis steht links (32%), die vier Knoepfe teilen sich die restlichen 68% -- genau die 4 x 17% der Tabellenspalten. So sieht der Editor dasselbe wie der Besucher, ohne dass die Knopfgruppe per "display: contents" aufgeloest wird (das braucht der Editor zum Auswaehlen und Verschieben). */ .editor-styles-wrapper .vergleich-buchen { display: grid; grid-template-columns: 32% 68%; align-items: center; padding: 0; } .editor-styles-wrapper .vergleich-knoepfe.wp-block-buttons { display: flex; flex-wrap: nowrap; gap: 12px; } .editor-styles-wrapper .vergleich-knoepfe .wp-block-button { flex: 1; margin: 0; } /* ---------- Pruefungskarten: gefuellter Kopf (27.08.2026) ----------------- Betreiberwunsch: Die vier Pruefungskarten (Mittlere Reife, High School, Abitur) sollen denselben gefuellten Kopf tragen wie die vier Paketkarten GetOn/StepOn/KiEPon/DiveOn -- nur in ihren blauen Farben. Vorher standen dort eine Farb-Pille, ein blauer Titel und ein grauer Preis, alles auf weissem Grund. Umgesetzt REIN UEBER DIE GESTALTUNG, der Seiteninhalt bleibt unangetastet. Die Karte ist schon ein Raster aus genau fuenf geteilten Zeilen (subgrid); die fuenf Bausteine bekommen ihre Zeile jetzt ausdruecklich zugewiesen. Dabei wandert der Preis VOR die Beschreibung, damit oben -- wie bei den Paketkarten -- Etikett, Titel und Preis beieinander stehen: Zeile 1 .familie Etikett ("MITTLERE REIFE") \ Zeile 2 h3 Titel ("Online") > gefuellter Kopf Zeile 3 .preis Preis ("195 EUR / Monat") / Zeile 4 .fuer Beschreibung Zeile 5 .knopf Knopf 🔴 Damit haengt die Gestaltung an der REIHENFOLGE der Bausteine. Es muessen genau diese fuenf bleiben -- das galt wegen "grid-row: span 5" schon vorher, jetzt wuerde ein sechster Baustein zusaetzlich aus dem Raster fallen. Kommt einer dazu, hier UND bei "span 5" weiter oben nachziehen. 🔴 Die Kopffarbe liegt als EINE Flaeche unter den Zeilen 1 bis 3 (Schattenbaustein ::before), nicht als drei einzelne Hintergruende. Zwei Gruende: zwischen den Zeilen kann so keine Haarlinie aufblitzen, und die Etikettzeile darf wie bei den Paketkarten mit "opacity" zuruecktreten, ohne dass die Flaeche darunter mit aufhellt. Die Kopfschrift ist auf allen vier Blautoenen WEISS und erfuellt die Barrierefreiheit auch bei kleiner Schrift: hellstes Blau #0A76B2 gegen Weiss = 4,91:1 (gefordert 4,5:1), die dunkleren Toene liegen darueber. Das ist der Unterschied zu den gruenen Paketkoepfen, wo Weiss bewusst unter der Schwelle bleibt. */ .kiep-preisseite .karte.karte-gleich { /* Statt der 10px-Oberkante traegt die Karte jetzt den gefuellten Kopf -- sonst stuende ueber ihm ein zweiter Streifen derselben Farbe (dieselbe Ueberlegung wie bei .karte.mit-kopf). */ border-top-width: 1px; /* Oben kein Innenabstand: der Kopf reicht bis an die Kartenkante. */ padding: 0 20px 20px; } /* Die Kopffarbe. Liegt HINTER den ersten drei Zeilen und reicht seitlich ueber den Innenabstand hinaus bis an die Kartenkante. Die runden Ecken oben schneidet die Karte selbst zu ("overflow: hidden"). */ .kiep-preisseite .karte.karte-gleich::before { content: ""; grid-column: 1; grid-row: 1 / 4; margin-inline: -20px; background: var(--pf); z-index: 0; } /* Feste Zeile fuer jeden der fuenf Bausteine. Ausdruecklich MIT Spalte: sobald ein Baustein im Raster von Hand gesetzt wird, wuerde ein automatisch verteilter Nachbar sonst in eine zweite Spalte ausweichen. */ .kiep-preisseite .karte-gleich > .familie { grid-area: 1 / 1; } .kiep-preisseite .karte-gleich > h3 { grid-area: 2 / 1; } .kiep-preisseite .karte-gleich > .preis { grid-area: 3 / 1; } .kiep-preisseite .karte-gleich > .fuer { grid-area: 4 / 1; } .kiep-preisseite .karte-gleich > .knopf, .kiep-preisseite .karte-gleich > .knopf-zweit { grid-area: 5 / 1; } /* Die drei Kopfbausteine liegen ueber der Farbflaeche und schreiben weiss. */ .kiep-preisseite .karte-gleich > .familie, .kiep-preisseite .karte-gleich > h3, .kiep-preisseite .karte-gleich > .preis { position: relative; z-index: 1; align-self: stretch; justify-self: stretch; color: var(--pf-ink); } /* Aus der Farb-Pille wird die kleine Einordnungszeile ueber dem Titel -- dieselbe Rolle und dieselben Werte wie ".augenbraue" bei den Paketkarten. */ .kiep-preisseite .karte-gleich > .familie { display: block; text-align: left; background: none; border-radius: 0; margin: 0; padding: 14px 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; } /* Der Titel sitzt UNTEN in seiner Zeile, direkt ueber dem Preisband -- auch wenn er in einer Nachbarkarte zweizeilig umbricht ("Internationaler Abschluss"). Das geschieht INNERHALB des Bausteins (Spalte mit Ausrichtung nach unten) und nicht ueber "align-self": der Baustein selbst muss seine Zeile ganz ausfuellen, sonst risse die Farbflaeche darunter auf. ⚠️ Kleiner als bei den Paketkarten (dort bis 2,1rem): dort stehen kurze Namen wie "GetOn", hier ganze Titel in schmaleren Karten. */ .kiep-preisseite .karte-gleich > h3 { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 4px 0 10px; font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } /* Preisband: dieselbe leicht abgedunkelte Flaeche wie ".kopfpreis" bei den Paketkarten. Sie liegt hier auf dem Baustein selbst, deshalb als Verlauf UEBER der Kopffarbe -- ein halbdurchsichtiges Schwarz allein haette an dieser Stelle nichts zum Abdunkeln. 🔴 Kein Aussenabstand nach unten: der wuerde innerhalb von Zeile 3 liegen, die Farbflaeche reichte dann unter dem Band weiter. Der Abstand zur Beschreibung kommt deshalb von OBEN an .fuer. */ .kiep-preisseite .karte-gleich > .preis { margin: 0 -20px; padding: 10px 20px 12px; background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), var(--pf); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kiep-preisseite .karte-gleich > .preis > strong:first-child { color: var(--pf-ink); } /* "entspricht umgerechnet ab 25,50 EUR im Monat" tritt zurueck -- ueber Deckkraft statt ueber eine Farbe, damit es zu jedem Blauton passt. */ .kiep-preisseite .karte-gleich > .preis .umgerechnet { color: inherit; opacity: .85; } /* Der Abstand zwischen Kopf und Beschreibung (siehe oben). */ .kiep-preisseite .karte-gleich > .fuer { margin: 16px 0 12px; } /* Die helle Zweitform des Knopfes ("Platz anfragen", "Unverbindlich anfragen") traegt sonst das Gruen des Seitenakzents. Unter einem blauen Kartenkopf sah das nach Versehen aus, deshalb nimmt sie in den Pruefungskarten die Kartenfarbe (Betreiberwunsch 27.08.2026). ⚠️ Bewusst NUR hier: dieselbe Klasse .knopf-zweit benutzt auch der Beratungs-Streifen weiter unten, und der soll gruen bleiben. Die Schriftfarbe ist --pf-text (der dunklere Ton der Kartenfarbe), nicht --pf: auf Weiss erreicht #0A76B2 damit 4,91:1. */ .kiep-preisseite .karte-gleich > .knopf-zweit .wp-block-button__link { color: var(--pf-text); border-color: var(--pf); }