/* =========================================================================== redesign.css - Stylesheet des neuen Screendesigns --------------------------------------------------------------------------- DREI Seiten haengen daran: default.html, ueber-mich.html und mein-angebot.html. Alle drei teilen sich Kopf, Fusszeile, Knoepfe, Wellen, den Bildring, die Marke, die Vorspann-Pille und die Bewertungsanzeiger; was nur einer Seite gehoert, steht in einem eigenen Abschnitt weiter unten und nennt seine Seite im Kopf. Eine Datei und nicht drei, weil alle dieselbe Palette und dasselbe Raster brauchen. Drei Stylesheets mit je einem :root waeren drei Wahrheiten ueber dieselben Farben. Bewusst eigenstaendig: modern.css wird von diesen Seiten NICHT geladen. Jede von ihnen bringt ein eigenes :root mit, und ein gemeinsames Laden wuerde die Palette der Livestartseite ueberschreiben. Alle Farbwerte sind aus den drei Screendesigns abgegriffen, nicht geschaetzt. Die Schriften stehen schon lizenziert in css/fonts.css: Museo Slab W03_500 fuer Ueberschriften, Museo Sans W03_300/500/900 fuer den Rest. Es wird keine Schrift von aussen nachgeladen. =========================================================================== */ :root { /* Farben, abgegriffen aus dem Screendesign */ --rd-gelb: #FDC617; --rd-gelb-dunkel: #F0B400; --rd-gelb-hell: #FFF6E4; --rd-tuerkis: #00AEC5; --rd-tuerkis-dunkel: #057989; --rd-tuerkis-hell: #E2F7FA; --rd-tuerkis-ring: #D6EFF2; /* der blasse Ring um das Video, abgegriffen */ /* ROT — die einzige Farbe, die mit den Design-States (05.09.2026) wirklich dazukam. ABGEGRIFFEN aus lernerfolg.jetzt_designstates.png, nicht geschaetzt: in beiden roten Bereichen (Zahlung fehlgeschlagen, Meldung Fehler) ist #E24E34 der haeufigste Ton, der blasse Kreis dahinter #FBE9E6. Tuerkis und Gelb der Zustaende brauchten KEIN neues Token — gemessen sind es #00AEC5 und #FBB900/#FDC716, also genau die, die oben schon stehen. Ein zweites Gelb waere die zweite Wahrheit ueber dieselbe Farbe gewesen. */ --rd-rot: #E24E34; --rd-rot-hell: #FBE9E6; /* Das Grau der Ladeplatzhalter, ebenso abgegriffen (#E6E5E0). */ --rd-skelett: #E6E5E0; --rd-creme: #FFFDF7; --rd-braun: #322600; /* der dunkle Ton der dritten Freebie-Karte */ --rd-weiss: #FFFFFF; --rd-text: #1B1B1B; --rd-text-grau: #6E7477; /* Die Navigation. Sie stand auf --rd-text in der schwersten Schnittweite und wirkte damit schwerer als alles andere im Kopf; Kevin am 14.08.2026: „eine kleine Stufe groesser und ein Ton, der ein mini bisschen heller ist“. Der Ton liegt zwischen Text und Grau, nicht beim Grau - Navigation soll lesbar bleiben, nicht zuruecktreten. */ --rd-text-nav: #3D4245; /* Schrift */ --rd-slab: 'Museo Slab W03_500', Georgia, 'Times New Roman', serif; --rd-sans: 'Museo Sans W03_500', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --rd-sans-fett: 'Museo Sans W03_900', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* DIE SCHREIBSCHRIFT DER UNTERSCHRIFT (Kevin, 10.09.2026: "Die Unterschrift Bettina Betz bitte in der schreibschrift 'Segoe Script'"). ES IST EINE SYSTEMSCHRIFT UND KEIN WEBFONT, und das gehoert dazugesagt: `Segoe Script` liegt auf Windows und sonst nirgends -- auf einem Mac, einem iPhone oder einem Android-Geraet greift der naechste Name der Kette. Das Projekt laedt keine Schrift von einem fremden Dienst (kein @font-face in dieser Datei, kein Google-Fonts-Link in den Seiten), und ein Webfont waere ein eigener Handgriff samt Datei in beiden Deploy-Listen. Die Kette ist deshalb nach demselben Muster gebaut wie --rd-sans darueber: der gewuenschte Name zuerst, dann die Schreibschriften, die auf den anderen Systemen wirklich vorhanden sind, und `cursive` als letzte Zusicherung. */ --rd-schreibschrift: 'Segoe Script', 'Segoe Print', 'Bradley Hand', 'Snell Roundhand', 'Brush Script MT', cursive; --rd-sans-leicht: 'Museo Sans W03_300', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Raster. Im Screendesign steht die linke Textkante bei x=211 und die rechte Kante des Loginknopfs bei x=1714, bei 1920 Breite. Macht 1500 Inhalt; mit 24px Innenabstand also 1548 Aussenmass. Gemessen, nicht gegriffen - siehe die Zahlen am Ende dieser Datei. */ /* DER EINE REGLER FUER DIE GESAMTGROESSE. Der Entwurf ist auf 1920 gezeichnet, und diese Datei traegt seine gemessenen Zahlen im Klartext: 1548 fuer den Container, 122 fuer die Kopfzeile, 58/60 fuer die Karteninnenabstaende. Sie bleiben stehen und werden hier EINMAL multipliziert, statt sie umzurechnen - sonst waere die Messtabelle am Ende der Datei von genau den Werten abgeschnitten, gegen die sie nachzumessen erlaubt. .93 heisst: wie 93% Browserzoom. Wer es groesser oder kleiner will, aendert diese eine Zahl; 1 stellt den Entwurf massstabsgetreu wieder her. Was ABSICHTLICH nicht mitskaliert: die Breakpoints (sie beschreiben das wirkliche Fenster, nicht den Entwurf), das 100vw in der Anschnittrechnung, Haarlinien wie der 2px-Unterstrich der Navigation, die Schatten, und alle em-Werte - die haengen schon an ihrer eigenen Schriftgroesse und wuerden sonst doppelt schrumpfen. */ --rd-zoom: .93; --rd-container: calc(1548px * var(--rd-zoom)); --rd-radius-karte: calc(28px * var(--rd-zoom)); /* "Karten-Radius, gross: 56px 46px 60px 50px - Hero-Angebotskarte Standortbestimmung und grosse Sektionskarten" (Asset-Datei, 19.09.2026, W8): die beiden Angebotskarten der Startseite und die Standortkarte auf "Mein Angebot". */ --rd-radius-karte-gross: calc(56px * var(--rd-zoom)) calc(46px * var(--rd-zoom)) calc(60px * var(--rd-zoom)) calc(50px * var(--rd-zoom)); /* Hoehe der klebenden Kopfzeile. Steht hier, weil sie an ZWEI Stellen gebraucht wird: als Mindesthoehe der Kopfzeile selbst und als Abstand, den ein Sprungziel nach oben freihaelt. Ohne den zweiten waere jeder Seitensprung (#angebote, #ueber-mich) unter der Kopfzeile gelandet - die ersten Zeilen des Ziels waeren verdeckt gewesen. Getrennte Zahlen waeren irgendwann auseinandergelaufen. */ --rd-kopf: calc(122px * var(--rd-zoom)); --rd-schatten-karte: 0 18px 40px rgba(80, 60, 0, .10); --rd-schatten-pille: 0 6px 16px rgba(80, 60, 0, .10); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--rd-sans); font-size: calc(18px * var(--rd-zoom)); line-height: 1.6; color: var(--rd-text); background: var(--rd-creme); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.rd-menue-offen { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } strong { font-family: var(--rd-sans-fett); font-weight: 400; color: var(--rd-text); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--rd-gelb); color: var(--rd-text); padding: calc(12px * var(--rd-zoom)) calc(20px * var(--rd-zoom)); z-index: 2000; border-radius: 0 0 calc(12px * var(--rd-zoom)) 0; } .skip-link:focus { left: 0; } .rd-container { width: 100%; max-width: var(--rd-container); margin: 0 auto; padding: 0 calc(24px * var(--rd-zoom)); } /* --------------------------------------------------------------- Buttons */ .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(14px * var(--rd-zoom)); padding: calc(21px * var(--rd-zoom)) calc(39px * var(--rd-zoom)); border: 0; /* "Button-Radius: 42px 36px 44px 38px - alle Primaer- und Sekundaer-Buttons, leicht ungleich" (Asset-Datei, 19.09.2026, W8). Vorher 999px, also eine exakte Pille; der Entwurf zeichnet die Ecken absichtlich verschieden. Bei niedrigeren Knoepfen staucht der Browser die Radien im Verhaeltnis, die Ungleichheit bleibt. */ border-radius: calc(42px * var(--rd-zoom)) calc(36px * var(--rd-zoom)) calc(44px * var(--rd-zoom)) calc(38px * var(--rd-zoom)); font-family: var(--rd-sans); font-size: calc(1.3rem * var(--rd-zoom)); line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .rd-btn:hover { transform: translateY(-2px); } /* Der gedaempfte Zustand eines Knopfes, der (noch) nichts tut: ohne diese Zeilen haette er weiterhin die Hand als Zeiger und wuerde sich beim Ueberfahren anheben - er saehe also anklickbar aus und waere es nicht. Nur gedaempft, nicht ausgegraut. BIS ZUM 17.08.2026 STAND HIER "der Kundenlogin ist ein deaktivierter Knopf, solange es den Kundenbereich nicht gibt". Es gibt ihn jetzt: der Knopf ist auf allen elf Seiten ein auf /mein_bereich.php, und damit hat diese Regel im Entwurf gerade keinen Nutzer mehr. Sie bleibt trotzdem stehen - sie sagt nichts ueber den Login, sondern ueber jeden Knopf, und der naechste Platzhalter kommt bestimmt. Was NICHT bleiben durfte, war der Satz darueber: ein Kommentar, der das Gegenteil des Zustands behauptet, ist schlimmer als keiner. */ .rd-btn:disabled { cursor: default; opacity: .85; } .rd-btn:disabled:hover { transform: none; } .rd-btn:focus-visible { outline: 3px solid var(--rd-tuerkis-dunkel); outline-offset: 3px; } /* DIE SYMBOLE AUS DER ASSET-DATEI (19.09.2026, W8): svg/rd-icons.svg ist ein Sprite, tools/rd_sprite.php baut es. Eine Seite bindet ein Symbol als IN den Behaelter ein, der vorher das Material Symbol trug - die Klasse material-symbols-outlined bleibt am Behaelter, damit jede Groessen- und Farbregel dieser Datei (font-size, color) weiter greift: das Symbol ist 1em gross und nimmt currentColor. Wo die Asset-Datei kein Gegenstueck hat, steht weiter das Material Symbol. */ .rd-icon { width: 1em; height: 1em; display: block; flex: 0 0 auto; } .rd-btn-pfeil { font-size: calc(48px * var(--rd-zoom)); font-variation-settings: 'wght' 350; margin: calc(-6px * var(--rd-zoom)) 0; } /* DAS INFO-ZEICHEN AN EINEM FELD (19.09.2026, Kevin: "hinter der Bezeichnung fuer das Eingabefeld E-Mail ein Info-Symbol, wenn man draufdrueckt oder drueberhovert steht da dann, dass man sich mit dieser E-Mail ins Kundenportal anmelden kann"). Ein Knopf im Label (fokussierbar, mit title), daneben die Blase, die bei :hover und :focus-within erscheint - ohne JavaScript. Der Text steht in Klammern, wie Kevin es beschrieben hat, und ist fuer Vorleseprogramme ein tooltip. */ .rd-info { position: relative; display: inline-block; margin-left: calc(6px * var(--rd-zoom)); vertical-align: middle; } .rd-info-knopf { display: inline-flex; align-items: center; justify-content: center; width: calc(22px * var(--rd-zoom)); height: calc(22px * var(--rd-zoom)); padding: 0; border: 0; border-radius: 50%; background: var(--rd-tuerkis-hell); color: var(--rd-tuerkis-dunkel); font-size: calc(16px * var(--rd-zoom)); cursor: pointer; } .rd-info-knopf:focus-visible { outline: 2px solid var(--rd-tuerkis-dunkel); outline-offset: 2px; } .rd-info-text { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: max-content; max-width: min(320px, 80vw); padding: calc(8px * var(--rd-zoom)) calc(12px * var(--rd-zoom)); border-radius: calc(10px * var(--rd-zoom)); background: var(--rd-text); color: var(--rd-weiss); font-family: var(--rd-sans-leicht); font-size: calc(0.9rem * var(--rd-zoom)); font-weight: 400; line-height: 1.45; text-align: left; box-shadow: var(--rd-schatten-pille); } .rd-info:hover .rd-info-text, .rd-info:focus-within .rd-info-text { display: block; } /* Zwei Blasen an der E-Mail (21.09.2026), eine je Angebotsart; die ausgeblendete bleibt auch beim Darueberfahren weg - `display: block` oben schluege sonst das [hidden] des Browsers. */ .rd-info-text[hidden] { display: none; } /* Ein Knopf MIT Pfeilscheibe braucht rechts weniger Luft: die Scheibe bringt ihren eigenen Rand mit. Faellt :has() aus, bleibt der Abstand symmetrisch, und das ist keine Entgleisung, sondern nur etwas grosszuegiger. */ .rd-btn:has(.rd-btn-pfeil) { padding-right: calc(20px * var(--rd-zoom)); } .rd-btn-primaer { background: var(--rd-gelb); color: var(--rd-text); box-shadow: var(--rd-schatten-pille); } .rd-btn-primaer:hover { background: var(--rd-gelb-dunkel); } .rd-btn-weiss { background: var(--rd-weiss); color: var(--rd-text); box-shadow: var(--rd-schatten-pille); } .rd-btn-tuerkis { background: var(--rd-tuerkis-dunkel); color: var(--rd-weiss); box-shadow: 0 6px 16px rgba(5, 121, 137, .22); } .rd-btn-tuerkis:hover { background: #04606C; } .rd-btn-login { background: var(--rd-gelb); color: var(--rd-text); font-size: calc(1.16rem * var(--rd-zoom)); padding: calc(17px * var(--rd-zoom)) calc(30px * var(--rd-zoom)); } .rd-btn-login .material-symbols-outlined { font-size: calc(26px * var(--rd-zoom)); } .rd-btn-login:hover { background: var(--rd-gelb-dunkel); } .rd-btn-block { width: 100%; } /* ---------------------------------------------------------------- Header */ .rd-header { position: sticky; top: 0; z-index: 1000; background: var(--rd-creme); } .rd-header-inner { display: flex; align-items: center; gap: calc(24px * var(--rd-zoom)); min-height: var(--rd-kopf); } section[id] { scroll-margin-top: var(--rd-kopf); } .rd-logo { flex: none; } .rd-logo img { height: calc(79px * var(--rd-zoom)); width: auto; } /* Die Navigation steht im Entwurf nicht rechtsbuendig, sondern mittig ZWISCHEN Logo und Loginknopf: gemessen 710..1308 bei einer freien Flaeche von 525..1490, beides mit derselben Mitte. */ .rd-nav { flex: 1; display: flex; justify-content: center; } .rd-btn-login { flex: none; } .rd-nav ul { display: flex; align-items: center; gap: calc(34px * var(--rd-zoom)); list-style: none; margin: 0; padding: 0; } .rd-nav a { font-family: var(--rd-sans); font-size: calc(1.22rem * var(--rd-zoom)); color: var(--rd-text-nav); white-space: nowrap; padding: calc(6px * var(--rd-zoom)) 0; border-bottom: 2px solid transparent; } .rd-nav a:hover { border-bottom-color: var(--rd-gelb); } /* Die Seite, auf der man gerade steht. Der Entwurf zeichnet sie im Ueber-mich-Screendesign gelb und unterstrichen; das aria-current sagt dasselbe den Vorlesern. Beide Navigationen tragen die Regel, denn sie sind dieselbe Navigation. */ .rd-nav a[aria-current="page"], .rd-menu-mobile ul a[aria-current="page"] { color: var(--rd-gelb-dunkel); } /* DER AKTIVE MENUEPUNKT bekommt den dafuer vorgesehenen Schwung statt einer geraden Linie - das Assetsdokument nennt ihn ausdruecklich "aktiver Menuepunkt". Der frueher hier gesetzte `border-bottom-color` faellt weg: zwei Striche uebereinander waeren einer zu viel. */ .rd-nav a[aria-current="page"] { border-bottom-color: transparent; position: relative; } .rd-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-2px * var(--rd-zoom)); height: calc(10px * var(--rd-zoom)); background-image: var(--rd-strich-nav); background-repeat: no-repeat; background-size: 100% 100%; /* "im Design leicht rotiert" (Asset-Datei): im Ueber-mich-Screendesign liegt das rechte Ende eine Spur hoeher als das linke (19.09.2026, W8). */ transform: rotate(-2deg); } .rd-burger { display: none; width: calc(56px * var(--rd-zoom)); height: calc(56px * var(--rd-zoom)); margin-left: auto; border: 0; border-radius: calc(16px * var(--rd-zoom)); background: var(--rd-gelb); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: calc(5px * var(--rd-zoom)); } .rd-burger span { display: block; width: calc(24px * var(--rd-zoom)); height: calc(2.5px * var(--rd-zoom)); border-radius: calc(2px * var(--rd-zoom)); background: var(--rd-text); } .rd-menu-mobile { position: absolute; left: calc(16px * var(--rd-zoom)); right: calc(16px * var(--rd-zoom)); top: calc(100% - 8px * var(--rd-zoom)); background: var(--rd-weiss); border-radius: var(--rd-radius-karte); box-shadow: 0 24px 50px rgba(80, 60, 0, .18); padding: calc(28px * var(--rd-zoom)) calc(24px * var(--rd-zoom)) calc(24px * var(--rd-zoom)); } .rd-menu-mobile[hidden] { display: none; } .rd-menu-mobile ul { list-style: none; margin: 0 0 calc(24px * var(--rd-zoom)); padding: 0; } .rd-menu-mobile li + li { margin-top: calc(6px * var(--rd-zoom)); } /* Dieselbe Schnittweite, Groesse und Farbe wie die Navigation oben - es ist dieselbe Navigation, nur aufgeklappt. */ .rd-menu-mobile ul a { display: block; padding: calc(14px * var(--rd-zoom)) calc(8px * var(--rd-zoom)); font-family: var(--rd-sans); font-size: calc(1.22rem * var(--rd-zoom)); color: var(--rd-text-nav); } .rd-menu-mobile .rd-btn { padding-top: calc(20px * var(--rd-zoom)); padding-bottom: calc(20px * var(--rd-zoom)); font-size: calc(1.15rem * var(--rd-zoom)); } /* ------------------------------------------------------------------ Hero */ .rd-hero { position: relative; overflow: hidden; /* Farbe der Welle nach unten: der Ton des naechsten Abschnitts. */ --rd-wellenfarbe: var(--rd-gelb-hell); padding: calc(37px * var(--rd-zoom)) 0 calc(165px * var(--rd-zoom)); background: var(--rd-creme); } /* ====================================================================== Die Wellen zwischen den Abschnitten --------------------------------------------------------------------- Geometrie einmal, Farbe je Abschnitt ueber --rd-wellenfarbe: es ist ueberall dieselbe Form, und Abschriften davon laufen auseinander. Gefaerbt wird immer mit dem Ton des NAECHSTEN Abschnitts - die Welle haengt unten am aktuellen und laesst den naechsten hineinragen. SEIT DEM 15.08.2026 EINE KLASSE, nicht mehr eine Aufzaehlung von fuenf Abschnittsnamen. Der Grund ist nicht Schoenheit: ueber-mich.html braucht dieselbe Welle, und eine zweite Seite kann einer Liste von Selektoren in dieser Datei nicht beitreten, ohne dass jemand daran denkt. Eine Aufzaehlung, die man beim Hinzufuegen einer Seite pflegen muss, ist im Projekt schon zweimal teuer geworden. WER .rd-welle AN EINEN ABSCHNITT HAENGT, SCHULDET ZWEIERLEI: `position: relative` mit `overflow: hidden` (sonst haengen 290 Pixel Bogen sichtbar unter der Kante), und genug unteren Innenabstand - der Bogen liegt UEBER dem Inhalt, siehe die Rechnung unten. Die bestehenden Abschnitte haben dafuer 165, 130, 188, 130 und 152. Wie tief die Welle sein muss, ist gemessen und nicht gegriffen. Im Entwurf schwankt die Farbkante Hero -> Angebote y 1101..1161 (60) Angebote -> Ueber mich y 2352..2408 (56) Gratis -> Stimmen y 5374..5447 (73) Stimmen -> Abschluss y 6334..6389 (55) Abschluss -> Fuss y 6985..7045 (60) [nach Gelb-hell] also rund 60 bis 70 Pixel. Die erste Fassung stand auf height 70 / bottom -25 und brachte AN DEN PIXELN GEMESSEN 12 - eine Kante, die wie ein Strich aussieht. Die Rechnung dahinter hat mich zweimal getaeuscht, deshalb steht sie hier ganz. Sichtbar ist nur der Teil ueber der Abschnittskante, also H - |bottom|. Wie weit der Bogen zum Bildrand hin abfaellt, haengt dagegen am SENKRECHTEN Radius - und `border-radius: 50%` heisst waagerecht die halbe Breite, senkrecht die halbe HOEHE. Der senkrechte Radius ist also H/2, nicht H. Genau diese Haelfte hatte ich im ersten Anlauf uebersehen: gerechnet 62, gemessen 30. Bei 130% Breite (left/right -15%) steht der Bildrand bei 0,769 des waagerechten Radius; dort ist der Bogen um Abfall = (H/2) * (1 - sqrt(1 - 0,769^2)) = 0,1805 * H gefallen. Ein voller Bogen ueber die Fensterbreite - kein abgeschnittener Buckel - heisst: Abfall gleich sichtbare Hoehe. H - |bottom| = 0,1805 * H => |bottom| = 0,8195 * H Mit H = 360 macht das bottom = -295 und 65 Pixel Hub. Das Verhaeltnis haengt nur an den 130% Breite, nicht am Fenster: auf dem Telefon ergibt sich derselbe Bogen. Wer H aendert, muss bottom mitziehen - und danach an den PIXELN nachmessen, nicht am errechneten Wert. Der Bogen liegt UEBER dem Inhalt des Abschnitts (positioniertes ::after ohne z-index). Die 65 Pixel passen deshalb nur, solange jeder Abschnitt mehr unteren Innenabstand hat: 165, 130, 188, 130 und 152. Und der Rest des Bogens - gut 290 Pixel - haengt unter der Kante und lebt nur davon, dass alle drei Abschnitte `overflow: hidden` tragen. ====================================================================== */ .rd-welle::after { content: ''; position: absolute; left: -15%; right: -15%; bottom: calc(-295px * var(--rd-zoom)); height: calc(360px * var(--rd-zoom)); border-radius: 50% 50% 0 0; background: var(--rd-wellenfarbe); } /* Die grossen Schmuckkreise im Hintergrund. Sie standen bis zum 15.08.2026 mit HARTER Kante da und lasen sich damit als Scheiben, nicht als Schimmer - Kevin: „deshalb sah das Design noch nicht so rund aus". Die 45px sind eine ENTSCHEIDUNG, keine Messung, und deshalb steht die Messung daneben: im Entwurf ist der Kreis rechts oben im Hero ueber rund 12 bis 15 Pixel weich (abgegriffen bei y=250 und y=400), der Kreis links im Abschnitt „Was mir wichtig ist" dagegen ueber 4 - der Entwurf selbst ist an dieser Stelle uneinheitlich. Ein Wert, der die 12 nachbaut, haette die Scheibe Scheibe bleiben lassen. Gewaehlt ist der Wert, der die Kreise zu Licht macht, an den Fassungen 0/25/45/70/100 nebeneinander verglichen. Der Radius haengt am Regler, wie jede andere Entwurfszahl auch: sonst waere die Zusicherung am Dateiende, dass --rd-zoom: 1 den Entwurf wiederherstellt, fuer die Kreise nicht mehr wahr. NICHT betroffen ist .rd-karte-blase, der aufgehellte Kreis INNERHALB der Karten: der gehoert zur Karte und nicht zum Hintergrund. */ .rd-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(45px * var(--rd-zoom))); } .rd-blob-gelb { left: calc(-260px * var(--rd-zoom)); bottom: calc(-40px * var(--rd-zoom)); width: calc(520px * var(--rd-zoom)); height: calc(520px * var(--rd-zoom)); background: rgba(253, 198, 23, .13); } .rd-blob-tuerkis { right: calc(-220px * var(--rd-zoom)); top: calc(-120px * var(--rd-zoom)); width: calc(620px * var(--rd-zoom)); height: calc(620px * var(--rd-zoom)); background: rgba(0, 174, 197, .11); /* Im Entwurf ist der tuerkise Kreis hinter dem Hero-Blob SCHARF gerandet (19.09.2026, W8), nur der gelbe Fleck links unten ist weich. */ filter: none; } .rd-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); align-items: center; gap: calc(clamp(40px, 3.6vw, 68px) * var(--rd-zoom)); } .rd-eyebrow { display: inline-block; background: #FBEFD2; color: #6A5518; font-family: var(--rd-sans-fett); font-size: calc(.93rem * var(--rd-zoom)); letter-spacing: .12em; text-transform: uppercase; padding: calc(12px * var(--rd-zoom)) calc(24px * var(--rd-zoom)); border-radius: 999px; margin-bottom: calc(30px * var(--rd-zoom)); } .rd-hero-titel { font-family: var(--rd-slab); font-weight: 400; font-size: calc(clamp(2.2rem, calc(25.5px + 3.1vw), 5.3rem) * var(--rd-zoom)); line-height: 1.05; color: var(--rd-text); margin: 0 0 calc(42px * var(--rd-zoom)); } /* Der laengere Hero-Satz vom 10.09.2026 (Kevin: "die schriftart kleiner machen und ersetzen durch der richtige Lernweg fuer bessere Lateinnoten ohne Lerndruck"). EIGENE REGEL STATT KLEINERER GRUNDGROESSE: `.rd-hero-titel` traegt jede Hero-Ueberschrift des Redesigns, auch die kurzen auf den anderen Seiten. Wer dort die Zahl senkt, verkleinert sie alle mit -- und keiner merkt es, weil nichts fehlschlaegt. Die Kurve ist dieselbe wie oben, nur um rund ein Viertel gestaucht: der Satz ist gut doppelt so lang wie "Kennen Sie das auch?" und braucht bei 1920 sonst drei Zeilen. */ .rd-hero-titel-klein { font-size: calc(clamp(1.75rem, calc(19px + 2.3vw), 3.9rem) * var(--rd-zoom)); line-height: 1.14; } /* =================================================================== DIE DREI UNTERSTREICHUNGEN AUS DEM ASSETSDOKUMENT (04.09.2026) =================================================================== Kevin: "Bitte noch die korrekten Unterstreichungen nutzen, die als SVG bereitgestellt werden." Hier stand ein GERADER Balken mit runden Enden. Der Entwurf hat einen handgezeichneten Schwung, und `Lernerfolg_Assets21.html` liefert ihn in drei Varianten - mit eigener Kurve, eigener Strichstaerke und eigener Bezeichnung: deko-unterstreichung-h1 220x18, Strich 6 Ueberschriften deko-unterstreichung-lang 320x18, Strich 6,5 "Ueber mich, Leitsatz" deko-unterstreichung-nav 200x16, Strich 4,5 "aktiver Menuepunkt" ALS HINTERGRUNDBILD, nicht als im Markup: der Schwung ist Schmuck und traegt keine Aussage - im Markup braeuchte er auf jeder der zwoelf Seiten ein `aria-hidden` und stuende in jedem Vorleseprogramm im Weg. `preserveAspectRatio="none"` zieht ihn auf die Breite des Wortes, genau wie im Assetsdokument. DIE FARBE IST #fbb900 UND NICHT --rd-gelb (#FDC617). Das ist kein Versehen: das Assetsdokument setzt sie so und sagt dazu "exakt so wie im Design gesetzt". Wer sie angleicht, korrigiert den Entwurf. */ :root { --rd-strich-h1: url("data:image/svg+xml,"); --rd-strich-lang: url("data:image/svg+xml,"); --rd-strich-nav: url("data:image/svg+xml,"); } /* Der Schwung sitzt am Text, nicht an der Zeile, damit er beim Umbruch mitwandert. */ .rd-unterstrich { position: relative; display: inline-block; } .rd-unterstrich::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: calc(14px * var(--rd-zoom)); background-image: var(--rd-strich-h1); background-repeat: no-repeat; background-size: 100% 100%; /* Die Asset-Datei sagt zur H1-Unterstreichung "im Design mit scaleY(-1)", und die Screendesigns zeigen es (19.09.2026, W8, nachgesehen an "das auch?", "Eltern und Schueler" und "Bettina."): der Schwung haengt in der Mitte DURCH, die Enden liegen hoeher. Der Pfad der Datei woelbt sich nach oben, deshalb die Spiegelung - fuer beide Varianten. */ transform: scaleY(-1); } /* "Ueber mich, Leitsatz" - laenger und einen Hauch dicker. */ .rd-unterstrich-lang::after { background-image: var(--rd-strich-lang); } .rd-hero-fliess { font-family: var(--rd-sans-leicht); font-size: calc(clamp(1.05rem, calc(17.35px + .331vw), 1.48rem) * var(--rd-zoom)); line-height: 1.73; color: var(--rd-text-grau); max-width: 29.5em; margin: 0 0 calc(48px * var(--rd-zoom)); } .rd-hero-aktionen { display: flex; flex-wrap: wrap; gap: calc(16px * var(--rd-zoom)); } /* ------------------------------------------------------- Hero: Bild + Ring */ .rd-hero-bild { position: relative; margin: 0; justify-self: stretch; /* Solange rechts neben dem Container Platz ist, darf der Kreis ihn nutzen; wird es eng, zieht sich der Wert von selbst auf 0 zurueck. */ margin-right: clamp(calc(-74px * var(--rd-zoom)), calc((var(--rd-container) - 100vw) / 2), 0px); } /* =================================================================== DIE ZWEI ORGANIC-FORMEN AUS DEM ASSETSDOKUMENT (04.09.2026) =================================================================== Kevin: "start_neu hat definitiv nicht den richtigen Ring um die Bilder." Er hatte recht, und der Fehler war die FORM, nicht die Farbe: hier stand `border-radius: 50%` - ein exakter Kreis mit einem gleichmaessigen Rahmen. Der Entwurf hat beides nicht. `lernerfolg.jetzt_Assets.html` fuehrt sie unter der Ueberschrift "Organic-Formen (CSS, kein SVG)" mit Namen und Wert: Video- und Portraitmaske 52% 48% 55% 45% / 48% 54% 46% 52% "Bild und Overlay des Videoblocks, Ueber-mich-Portrait" Hero-Blob hinter dem Foto 63% 37% 58% 42% / 55% 60% 40% 45% "goldene Flaeche HINTER dem Hero-Portrait der Startseite" DAS WORT "HINTER" IST DIE GANZE AUSSAGE. Das Gelb ist keine Umrandung, sondern eine eigene Flaeche, die unter dem Foto liegt und ringsum ungleichmaessig hervorschaut - deshalb wirkt der "Ring" an einer Stelle dicker als an der anderen. Als `border` war er ueberall gleich breit und sah dadurch gedruckt aus. Als Variablen, weil beide Werte an mehreren Stellen gebraucht werden und ein zweites Literal die Fassung waere, die eines Tages abweicht. */ :root { --rd-maske-portrait: 52% 48% 55% 45% / 48% 54% 46% 52%; --rd-maske-heroblob: 63% 37% 58% 42% / 55% 60% 40% 45%; /* "Organic-Badge, Angebotskarten - 70 px Form hinter den Bereichsicons" */ --rd-maske-badge-karte: 52% 48% 46% 54%; /* "Organic-Badge, Journey - Kreisform hinter den Journey-Icons" */ --rd-maske-badge-journey: 58% 42% 50% 50%; } /* Die goldene Flaeche. Sie sitzt HINTER dem Foto und ist an jeder Seite verschieden weit heraus - genau das macht die Form lebendig. Als Pseudoelement und nicht als eigener div: sie traegt keine Bedeutung, ein Vorleseprogramm hat davon nichts. */ .rd-hero-bild::before { content: ''; position: absolute; /* Im Entwurf schaut die Flaeche links und oben deutlich weiter hervor als rechts und unten (19.09.2026, W8, am Screendesign nachgemessen: links rund 50 px, oben rund 40, rechts rund 20, unten rund 30 bei 1920 px). */ inset: calc(-40px * var(--rd-zoom)) calc(-20px * var(--rd-zoom)) calc(-30px * var(--rd-zoom)) calc(-50px * var(--rd-zoom)); /* Der Verlauf aus der Asset-Datei ("Hero-Blob hinter dem Foto": linear-gradient(150deg, #fdc311, #fbb900)) statt einer glatten Flaeche. */ background: linear-gradient(150deg, #fdc311, #fbb900); border-radius: var(--rd-maske-heroblob); box-shadow: 0 24px 60px rgba(180, 130, 0, .18); z-index: 0; } /* Das Foto liegt DARAUF, mit der Portraitmaske. Kein Rahmen mehr: was wie einer aussieht, ist die Flaeche darunter. */ .rd-hero-ring { position: relative; z-index: 1; aspect-ratio: 1; border-radius: var(--rd-maske-portrait); overflow: hidden; } .rd-hero-ring img { width: 100%; height: 100%; object-fit: cover; /* bettina.png ist quadratisch (330x330) und das Gesicht sitzt mittig - hier also keine Verschiebung noetig, anders als beim hochkanten Vorgaenger. */ object-position: 50% 50%; border-radius: var(--rd-maske-portrait); /* Die Datei bringt einen EIGENEN grauen Ring mit, rund 13 von 330 Pixeln Rand, und durchsichtige Ecken. Ohne Gegenmassnahme laege innerhalb der goldenen Flaeche noch ein grauer Rand. 330 / (330 - 2*13) = 1,086 - der Faktor, ab dem er aus dem Ausschnitt herauswaechst; 1.09 gibt eine Haaresbreite Zugabe. Der Ausschnitt von .rd-hero-ring schneidet ihn dann weg. Faellt die Datei je durch ein Foto ohne eingebackenen Ring, gehoert diese Zeile ersatzlos entfernt. */ transform: scale(1.09); } /* DIE PILLE LIEGT UEBER DEM FOTO, und das braucht seit dem 04.09.2026 eine ausdrueckliche Angabe: mit dem Ringumbau hat `.rd-hero-ring` ein `z-index: 1` bekommen, und ein Geschwister ohne eigenen Wert verliert dagegen - auch wenn es im Markup spaeter steht. Kevin hat es gemeldet ("das Google-Bewertungswidget ist immer noch hinter dem Bild"). Die Zahl steht ueber der des Rings, nicht daneben: 0 ist die goldene Flaeche, 1 das Foto, 2 die Pille. Wer den Ring anfasst, sieht hier, was daran haengt. */ .rd-bewertung { position: absolute; z-index: 2; left: 8%; bottom: 7%; display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'g zahl sterne' 'g quelle quelle'; align-items: center; column-gap: calc(12px * var(--rd-zoom)); background: var(--rd-weiss); border-radius: calc(20px * var(--rd-zoom)); padding: calc(16px * var(--rd-zoom)) calc(28px * var(--rd-zoom)); box-shadow: 0 12px 30px rgba(60, 45, 0, .16); white-space: nowrap; } /* Der feste Stand liegt im selben Raster wie zuvor; die Pille selbst bleibt also unveraendert, egal welcher von beiden gerade drinsteht. */ .rd-bewertung-fest { display: contents; } /* Muss sein: `display: contents` aus dem Stylesheet schlaegt das `[hidden] { display: none }` des Browsers, weil Autorenregeln vor der Standardregel kommen. Ohne diese Zeile bliebe der feste Stand stehen, sobald das Widget geladen hat - und beide staenden nebeneinander. */ .rd-bewertung-fest[hidden] { display: none; } /* KEIN display:none, solange nichts gerendert ist - der Container muss messbar im Dokument stehen, sonst startet Elfsight nicht (siehe der Kommentar am div). Leer ist er null hoch und faellt damit ohnehin nicht auf; ueber alle Spalten gesetzt, damit er das dreispaltige Raster der Pille nicht verschiebt. */ .rd-bewertung-live { grid-column: 1 / -1; /* Die Pille setzt nowrap fuer ihre eigene Zeile. Das Widget bringt eigenen Text mit und darf umbrechen. */ white-space: normal; } .rd-google { grid-area: g; width: calc(42px * var(--rd-zoom)); height: calc(42px * var(--rd-zoom)); } .rd-bewertung-zahl { grid-area: zahl; font-family: var(--rd-sans-fett); font-size: calc(1.6rem * var(--rd-zoom)); line-height: 1.1; } .rd-sterne { grid-area: sterne; color: var(--rd-gelb); font-size: calc(1.3rem * var(--rd-zoom)); letter-spacing: 2px; line-height: 1.1; } .rd-bewertung-quelle { grid-area: quelle; font-size: calc(1.02rem * var(--rd-zoom)); color: var(--rd-text-grau); line-height: 1.3; } /* ---------------------------------------------- Elfsight in der Pille ---- Der Uebersichtsanzeiger bringt eine eigene, STEHENDE Karte mit: weisser Grund, Rahmen, Radius, Ueberschrift "Google Rating", die Anzahl in Gold. Ungebremst steht damit eine Karte in der Karte, rund 170px hoch, quer ueber dem Foto. Hier wird sie abgeraeumt und in die Waagerechte gelegt: [G] 5,0 * * * * * 24 Bewertungen WARUM DAS HIER STEHT UND NICHT IN ELFSIGHTS PANEL: das Widget rendert in dasselbe Dokument, kein iframe, kein Shadow-DOM. Sein CSS ist also von hier aus erreichbar - und damit versioniert, mitdeployt und von tests/test_redesign_startseite.php erreichbar. Im Panel laege es ausserhalb des Repos, und eine Aenderung dort waere spurlos. ANGEFASST WERDEN NUR die es-*-Klassen. Die zweiten Klassen daneben (BadgeContainer__Inner-sc-effaa9da-1 und aehnliche) kommen aus styled-components und wechseln bei jedem Elfsight-Update den Namen. `!important` steht hier mit Absicht und ueberall: Elfsights Regeln werden zur LAUFZEIT eingehaengt, also nach diesem Stylesheet, und haben dieselbe Spezifitaet. Ohne !important entscheidet die Reihenfolge, und die hat man nicht in der Hand. Gemessen: Elfsight selbst benutzt kein !important. */ /* Die eigene Karte abraeumen. */ .rd-bewertung .es-badge-container { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; width: auto !important; } /* Aus der stehenden Karte eine liegende Zeile. Der Innenabstand faellt weg, den setzt die Pille. */ .rd-bewertung .es-card-badge-container { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: calc(12px * var(--rd-zoom)) !important; padding: 0 !important; width: auto !important; } /* "Google Rating" faellt weg - darunter steht ohnehin "Bewertungen", und das Logo sagt, von wem. */ .rd-bewertung .es-badge-label-container { display: none !important; } /* Das Logo auf die Groesse der Pille (42 im Entwurf). `max-width` muss ausdruecklich weg: das Widget deckelt den Rahmen um das Logo auf 28px, ein groesseres Logo waere darueber hinausgelaufen statt ihn aufzuweiten. */ .rd-bewertung .es-badge-sources-container, .rd-bewertung .es-badge-sources-container .es-badge-sources-item { flex: 0 0 auto !important; width: calc(42px * var(--rd-zoom)) !important; height: calc(42px * var(--rd-zoom)) !important; min-width: 0 !important; max-width: none !important; } /* Rechts vom Logo die zwei Zeilen, linksbuendig statt zentriert. */ .rd-bewertung .es-badge-rating-container { align-items: flex-start !important; gap: calc(2px * var(--rd-zoom)) !important; width: auto !important; } /* Erste Zeile: Note und Sterne - dieselben Werte wie am handgebauten Stand darueber (.rd-bewertung-zahl, .rd-sterne). */ .rd-bewertung .es-badge-rating { gap: calc(12px * var(--rd-zoom)) !important; } .rd-bewertung .es-rating-value { font-family: var(--rd-sans-fett) !important; font-weight: 400 !important; /* die 900 steckt im Schriftschnitt selbst */ font-size: calc(1.6rem * var(--rd-zoom)) !important; line-height: 1.1 !important; color: var(--rd-text) !important; } .rd-bewertung .es-rating-bar-container { width: auto !important; gap: calc(2px * var(--rd-zoom)) !important; } .rd-bewertung .es-rating-item { width: calc(21px * var(--rd-zoom)) !important; height: calc(21px * var(--rd-zoom)) !important; } /* Die Sterne sind SVG-Pfade ohne fill-Attribut. Elfsights Gold (#FCBF02) weicht dem Gelb der Seite. Dass die Regel wirklich greift, ist mit einer Magenta-Probe gemessen - die zwei Gelbs sind bei 20px nicht zu unterscheiden, ein Augenschein haette hier nichts bewiesen. */ .rd-bewertung .es-rating-item-filled svg path { fill: var(--rd-gelb) !important; stroke: var(--rd-gelb) !important; } /* Zweite Zeile: die Anzahl, im Grau der Seite statt in Gold. */ .rd-bewertung .es-badge-reviews-count { font-family: var(--rd-sans) !important; font-weight: 400 !important; font-size: calc(1.02rem * var(--rd-zoom)) !important; line-height: 1.3 !important; color: var(--rd-text-grau) !important; } /* -------------------------------------------------------------- Angebote */ .rd-angebote { position: relative; /* Farbe der Welle nach unten: der Ton des naechsten Abschnitts. */ --rd-wellenfarbe: var(--rd-creme); /* Notwendig, seit hier eine Welle haengt: sie ist 130% breit, und ohne Beschnitt entstuende waagerechter Ueberlauf. Der Hero macht es genauso. */ overflow: hidden; background: var(--rd-gelb-hell); padding: calc(185px * var(--rd-zoom)) 0 calc(130px * var(--rd-zoom)); } .rd-abschnitt-titel { font-family: var(--rd-slab); font-weight: 400; font-size: calc(clamp(1.7rem, calc(27px + 1.41vw), 3.4rem) * var(--rd-zoom)); line-height: 1.2; text-align: center; color: var(--rd-text); max-width: 22em; margin: 0 auto calc(26px * var(--rd-zoom)); } .rd-abschnitt-lead { font-family: var(--rd-sans-leicht); font-size: calc(clamp(1rem, calc(15.9px + .423vw), 1.5rem) * var(--rd-zoom)); line-height: 1.62; text-align: center; color: var(--rd-text-grau); max-width: 33em; margin: 0 auto calc(24px * var(--rd-zoom)); } .rd-schlagworte { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(18px * var(--rd-zoom)); list-style: none; margin: 0 0 calc(73px * var(--rd-zoom)); padding: 0; } /* Ohne den gelben Punkt davor (Kevin am 14.08.2026 entfernt) braucht die Pille keinen Zwischenraum mehr - der stand zwischen Punkt und Wort. */ .rd-schlagworte li { display: flex; align-items: center; background: var(--rd-weiss); color: #55595B; font-family: var(--rd-sans); font-size: calc(1.2rem * var(--rd-zoom)); padding: calc(13px * var(--rd-zoom)) calc(26px * var(--rd-zoom)); border-radius: 999px; box-shadow: var(--rd-schatten-pille); } /* ----------------------------------------------------- Angebote: Karten */ .rd-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(44px * var(--rd-zoom)); } .rd-karte { position: relative; overflow: hidden; border-radius: var(--rd-radius-karte-gross); padding: calc(58px * var(--rd-zoom)) calc(60px * var(--rd-zoom)) calc(56px * var(--rd-zoom)); box-shadow: var(--rd-schatten-karte); display: flex; flex-direction: column; align-items: flex-start; } /* Der grosse aufgehellte Kreis oben rechts in beiden Karten. */ .rd-karte-blase { position: absolute; right: calc(-70px * var(--rd-zoom)); top: calc(-90px * var(--rd-zoom)); width: calc(300px * var(--rd-zoom)); height: calc(300px * var(--rd-zoom)); border-radius: 50%; background: rgba(255, 255, 255, .22); pointer-events: none; } .rd-karte-icon { display: flex; align-items: center; justify-content: center; width: calc(70px * var(--rd-zoom)); height: calc(70px * var(--rd-zoom)); /* Die 70 px sind die Probe aufs Exempel: das Assetsdokument nennt fuer diese Form ausdruecklich "70 px hinter den Bereichsicons". */ border-radius: var(--rd-maske-badge-karte); background: var(--rd-weiss); color: var(--rd-text); font-size: calc(36px * var(--rd-zoom)); margin-bottom: calc(32px * var(--rd-zoom)); position: relative; } .rd-karte-icon-tuerkis { background: var(--rd-tuerkis); color: var(--rd-weiss); } /* Die Asset-Datei nennt fuer die Karten-Badges drei Varianten; die zweite Karte bekommt die zweite (48% 52% 54% 46%), damit die beiden Formen nicht wie Kopien wirken (19.09.2026, W8). */ .rd-karte-schueler .rd-karte-icon { border-radius: 48% 52% 54% 46%; } .rd-karte-label { font-family: var(--rd-sans-fett); font-size: calc(.9rem * var(--rd-zoom)); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 calc(10px * var(--rd-zoom)); position: relative; } .rd-karte-titel { font-family: var(--rd-sans-fett); font-weight: 400; font-size: calc(clamp(1.5rem, calc(24.5px + .704vw), 2.375rem) * var(--rd-zoom)); line-height: 1.21; margin: 0 0 calc(16px * var(--rd-zoom)); position: relative; } .rd-karte-text { font-family: var(--rd-sans-leicht); font-size: calc(clamp(1.05rem, calc(17.55px + .169vw), 1.3rem) * var(--rd-zoom)); line-height: 1.63; margin: 0 0 calc(20px * var(--rd-zoom)); max-width: 25.5em; position: relative; } .rd-karte .rd-btn { position: relative; margin-top: auto; font-size: calc(1.15rem * var(--rd-zoom)); padding: calc(18px * var(--rd-zoom)) calc(30px * var(--rd-zoom)); } .rd-karte .rd-btn-pfeil { font-size: calc(40px * var(--rd-zoom)); } .rd-karte-eltern { background: var(--rd-gelb); color: var(--rd-text); } .rd-karte-eltern .rd-karte-label { color: #6A5518; } .rd-karte-eltern .rd-karte-text { color: #3D3116; } .rd-karte-schueler { background: var(--rd-tuerkis-hell); color: var(--rd-tuerkis-dunkel); } .rd-karte-schueler .rd-karte-blase { background: rgba(0, 174, 197, .10); } .rd-karte-schueler .rd-karte-label, .rd-karte-schueler .rd-karte-titel, .rd-karte-schueler .rd-karte-text { color: var(--rd-tuerkis-dunkel); } /* ====================================================================== 3. Ueber mich --------------------------------------------------------------------- Spiegelbild des Heros: dort haengt der Kreis rechts aus dem Container heraus, hier die Videoellipse links. Gemessen bei 1920 Breite - Ellipse x 98..954, Textspalte x 1007..1660, Container 211..1710. ====================================================================== */ .rd-uebermich { position: relative; overflow: hidden; background: var(--rd-creme); /* Unten 60 statt der frueher angesetzten 199: gemessen sind vom unteren Rand der Ellipse bis zur Zeile "Mein Ansatz" 167, und die teilen sich dieser Abschnitt und der naechste (107). Die 199 stammten aus der Stelle, an der im Entwurf die Cremeflaeche endet - die liegt aber UNTER dem Beginn des naechsten Abschnitts, weil der Uebergang dort ein Verlauf ist und keine Kante. Wo genau die Grenze liegt, ist damit frei; nur die Summe ist gemessen. */ padding: calc(146px * var(--rd-zoom)) 0 calc(60px * var(--rd-zoom)); } /* Der blasse gelbe Kreis rechts hinter dem Text. Gemessen: Durchmesser 420, Mittelpunkt bei x=1831, also 121 ueber die Seitenkante hinaus; Oberkante 155 unter dem Abschnittsanfang. Anders als die Hero-Blobs eine VOLLE Farbe statt eines Deckwerts: hier liegt nur Creme dahinter, und der gemessene Ton #FFF9E1 laesst sich mit keinem einzelnen Alpha auf das Gelb der Palette zurueckfuehren - Gruen- und Blaukanal fordern verschiedene Werte. Zur Lage: der Wert ist von der FENSTERKANTE aus gemessen, wie bei den beiden Hero-Blobs auch. Bei --rd-zoom kleiner 1 sitzt der Kreis damit rund 67px weiter rechts als im Entwurf, denn die Verkleinerung geschieht um die Seitenmitte, waehrend dieser Wert am Rand haengt. Das ist Absicht und die kleinere von zwei Unschoenheiten: rechnete man es auf die Mitte um, stimmte der Kreis bei .93 - aber die Zusicherung am Dateiende, dass --rd-zoom: 1 den Entwurf Pixel fuer Pixel wiederherstellt, waere fuer ihn nicht mehr wahr. Bei einem blassen Schmuckkreis ist die Lage das kleinere Gut. */ .rd-blob-creme { right: calc(-121px * var(--rd-zoom)); top: calc(155px * var(--rd-zoom)); width: calc(420px * var(--rd-zoom)); height: calc(420px * var(--rd-zoom)); background: #FFF9E1; } .rd-uebermich-inner { /* Hebt den Inhalt ueber den Blob. Ohne das laege der absolut gesetzte Kreis VOR dem Text - dieselbe Zeile steht aus demselben Grund am Hero. */ position: relative; z-index: 1; display: grid; /* 743 + 53 + 703 = 1499, also genau die Containerbreite. Was die Ellipse darueber hinaus nach links braucht, holt sie sich per Aussenabstand. */ grid-template-columns: minmax(0, 743fr) minmax(0, 703fr); gap: calc(53px * var(--rd-zoom)); align-items: center; } .rd-uebermich-bild { position: relative; margin: 0; /* Solange links neben dem Container Platz ist, darf die Ellipse ihn nutzen; wird es eng, zieht sich der Wert von selbst auf 0 zurueck. Spiegelbild von .rd-hero-bild. HIER SITZT DIE GROESSE DER ELLIPSE. Die Rasterspalte gibt 743 vor, die beiden Aussenabstaende rechnen darauf: 743 + 70 - 43 = 770, also 90 Prozent der im Entwurf gemessenen 856 (Kevin am 14.08.2026, "einen Ticken kleiner"). Die Hoehe folgt von allein, sie haengt am aspect-ratio. Warum auf BEIDEN Seiten und nicht nur links: zoege man die 86 allein links ab, ruecke die Ellipse von der Fensterkante weg und es entstuende eine leere Bahn, wo der Entwurf sie angeschnitten zeigt. Zoege man sie allein rechts ab, wuechse der Abstand zur Textspalte von 53 auf 139. So verteilt bleibt der Mittelpunkt stehen, wo er im Entwurf steht: die Ellipse laeuft von 141 bis 911 statt von 98 bis 954. */ margin-left: clamp(calc(-70px * var(--rd-zoom)), calc((var(--rd-container) - 100vw) / 2), 0px); margin-right: calc(43px * var(--rd-zoom)); } /* Der Ring ist ein BORDER, kein Innenabstand - aus demselben Grund wie beim Hero: `overflow: hidden` schneidet am Polsterrand ab, also innerhalb des Rahmens, und genau dort soll das Video enden. Die Ellipse ist im Entwurf NICHT rund: 856 breit, 954 hoch. */ /* DIESELBE MASKE WIE DAS HERO-PORTRAIT: das Assetsdokument nennt sie ausdruecklich "Video- und Portraitmaske - Bild und Overlay des Videoblocks, Ueber-mich-Portrait". Hier stand bis zum 04.09.2026 ein exakter Kreis. Der blasse Ring BLEIBT ein Rahmen, anders als beim Hero: das Assetsdokument fuehrt fuer den Videoblock keine eigene Flaeche dahinter, und die Farbe ist aus dem Entwurf abgegriffen (--rd-tuerkis-ring). Mit der organischen Maske ist er jetzt ungleichmaessig breit, wie im Entwurf. */ .rd-video-ring { position: relative; aspect-ratio: 856 / 954; border-radius: var(--rd-maske-portrait); overflow: hidden; border: calc(37px * var(--rd-zoom)) solid var(--rd-tuerkis-ring); /* Faerbt die Flaeche, solange der Browser das erste Videobild noch nicht hat. Ohne das waere dort kurz Schwarz, und das saehe nach Fehler aus. */ background: var(--rd-tuerkis-hell); } .rd-video { width: 100%; height: 100%; object-fit: cover; display: block; } .rd-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: calc(100px * var(--rd-zoom)); height: calc(100px * var(--rd-zoom)); border: 0; border-radius: 50%; background: var(--rd-weiss); color: var(--rd-tuerkis); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 60, 70, .22); transition: transform .15s ease, background-color .15s ease; } .rd-play:hover { transform: translate(-50%, -50%) scale(1.06); } .rd-play:focus-visible { outline: 3px solid var(--rd-tuerkis-dunkel); outline-offset: 4px; } .rd-play .material-symbols-outlined { font-size: calc(52px * var(--rd-zoom)); font-variation-settings: 'FILL' 1; /* Ein Dreieck wirkt mittig erst, wenn es etwas rechts steht. */ margin-left: calc(5px * var(--rd-zoom)); } /* Ist das Video am Laufen, verschwindet der Knopf und die Steuerleiste des Browsers uebernimmt. */ .rd-video-ring.rd-laeuft .rd-play { display: none; } .rd-insta { position: absolute; /* In Prozent der Ellipse, damit die Pille beim Schrumpfen mitwandert: im Entwurf 151 von 856 rechts und 82 von 954 unten. */ right: 17.6%; bottom: 8.6%; display: flex; align-items: center; gap: calc(17px * var(--rd-zoom)); background: var(--rd-weiss); border-radius: 999px; padding: calc(11px * var(--rd-zoom)) calc(38px * var(--rd-zoom)) calc(11px * var(--rd-zoom)) calc(18px * var(--rd-zoom)); box-shadow: 0 12px 30px rgba(60, 45, 0, .16); white-space: nowrap; transition: transform .15s ease; } .rd-insta:hover { transform: translateY(-2px); } .rd-insta img { width: calc(50px * var(--rd-zoom)); height: calc(50px * var(--rd-zoom)); flex: none; } .rd-insta-text { display: flex; flex-direction: column; line-height: 1.25; } .rd-insta-text strong { font-size: calc(1.32rem * var(--rd-zoom)); color: var(--rd-text); } .rd-insta-text small { font-family: var(--rd-sans-leicht); font-size: calc(.97rem * var(--rd-zoom)); color: var(--rd-text-grau); } /* ------------------------------------------------ Ueber mich: Textspalte */ /* Die kleine tuerkise Zeile ueber der Ueberschrift. Anders als .rd-eyebrow im Hero ohne Pille - der Entwurf setzt sie ab Abschnitt 3 als blossen Text. */ /* Der Textkasten ist im Entwurf 653 breit und beginnt bei x=1007 - er reicht also NICHT bis zur Containerkante (1710), sondern laesst rund 50px stehen. Ohne diese Schranke bekaeme der Absatz die vollen 703 der Rasterspalte und braeche eine Zeile frueher um als im Entwurf. */ .rd-uebermich-text { max-width: calc(653px * var(--rd-zoom)); } .rd-abschnitt-label { font-family: var(--rd-sans-fett); font-size: calc(clamp(1.2rem, calc(19.27px + .098vw), 1.32rem) * var(--rd-zoom)); color: var(--rd-tuerkis-dunkel); margin: 0 0 calc(12px * var(--rd-zoom)); } .rd-uebermich-titel { font-family: var(--rd-slab); font-weight: 400; /* Durch BEIDE Messpunkte gelegt: 37,1px bei 500 Fensterbreite (Mobilentwurf) und 60,5px bei 1920 (Desktopentwurf). 28,9 + 1,648vw trifft beide. */ font-size: calc(clamp(2rem, calc(28.9px + 1.65vw), 3.78rem) * var(--rd-zoom)); line-height: 1.15; color: var(--rd-text); margin: 0 0 calc(29px * var(--rd-zoom)); } .rd-wort-gelb { color: var(--rd-gelb); } .rd-uebermich-fliess { font-family: var(--rd-sans-leicht); /* Eigene Kurve, nicht die des Leads aus Abschnitt 2: der Mobilentwurf setzt diesen Absatz mit 20,8px deutlich groesser, als jene Kurve dort liefert (18,0). Beide Messpunkte: 20,8 bei 500 und 24,0 bei 1920. */ font-size: calc(clamp(1.25rem, calc(19.67px + .2254vw), 1.5rem) * var(--rd-zoom)); line-height: 1.65; color: var(--rd-text-grau); margin: 0 0 calc(20px * var(--rd-zoom)); } .rd-merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Aus dem Entwurf zurueckgerechnet: Spaltenabstand 341, Blockbreite 653, also 2*Spalte + Zwischenraum = 653 und Spalte + Zwischenraum = 341 -> 29. Zeilenabstand 45 minus Scheibenhoehe 28 -> 17. */ column-gap: calc(29px * var(--rd-zoom)); row-gap: calc(17px * var(--rd-zoom)); list-style: none; margin: calc(24px * var(--rd-zoom)) 0 0; padding: 0; } .rd-merkmale li { display: flex; align-items: center; gap: calc(15px * var(--rd-zoom)); font-family: var(--rd-sans-fett); font-size: calc(1.16rem * var(--rd-zoom)); /* Die Zeilenhoehe muss unter die Scheibenhoehe: sonst bestimmt der TEXT die Zeilenhoehe des Rasters und der gemessene Zeilenabstand von 45 wird zu 47. */ line-height: 1.2; color: var(--rd-text); } .rd-merkmale .material-symbols-outlined { flex: none; display: flex; align-items: center; justify-content: center; width: calc(28px * var(--rd-zoom)); height: calc(28px * var(--rd-zoom)); border-radius: 50%; background: var(--rd-gelb); color: var(--rd-weiss); font-size: calc(18px * var(--rd-zoom)); font-variation-settings: 'wght' 600; } .rd-signatur-name { font-family: var(--rd-schreibschrift); font-size: calc(2.35rem * var(--rd-zoom)); color: var(--rd-text); margin: calc(46px * var(--rd-zoom)) 0 calc(6px * var(--rd-zoom)); } /* Kevins Vorspannzeile ueber der Einleitung (10.09.2026). Sie ist KEINE zweite Ueberschrift -- die H1 daneben sagt "Hallo, ich bin Bettina." --, sondern der betonte erste Satz des Textes. Deshalb ein

mit eigenem Gewicht und nicht

: eine zweite Ueberschrift im selben Block verschoebe die Gliederung der Seite fuer Screenreader und Suchmaschinen. */ .rd-hallo-vorspann { font-family: var(--rd-sans-fett); font-size: calc(1.32rem * var(--rd-zoom)); line-height: 1.45; color: var(--rd-text); margin: 0 0 calc(20px * var(--rd-zoom)); } .rd-signatur-rolle { font-family: var(--rd-sans-leicht); font-size: calc(1.18rem * var(--rd-zoom)); color: var(--rd-text-grau); margin: 0; } /* ====================================================================== 4. Mein Ansatz - in vier Schritten --------------------------------------------------------------------- Gemessen bei 1920: Spaltenmitten 477 / 799 / 1121 / 1442, also Abstand 321,7 und ein 1287 breiter, mittig stehender Block. Scheiben 96 gross, Oberkante 3902. Der Hintergrund geht von Creme auf das Hellgelb des naechsten Abschnitts ueber - ein Verlauf, keine Welle. ====================================================================== */ .rd-ansatz { position: relative; background: linear-gradient(180deg, var(--rd-creme) 0%, var(--rd-gelb-hell) 100%); padding: calc(98px * var(--rd-zoom)) 0 calc(110px * var(--rd-zoom)); } .rd-mittig { text-align: center; } .rd-schritte { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: calc(1287px * var(--rd-zoom)); margin: calc(88px * var(--rd-zoom)) auto 0; padding: 0; list-style: none; } /* DIE PUNKTLINIE (zurueck seit dem 19.09.2026, Kevin: "diese Punkte in der Desktop-Ansicht dahinter wieder einsetzen"; vom 14.08. bis 19.09. stillgelegt). Sie liegt HINTER den Scheiben. Ihre Hoehe ergibt sich aus der Breite (viewBox 1000x80), deshalb sitzt die Mitte per translateY auf der Scheibenmitte; ein fester Wert waere bei jeder anderen Breite daneben. Pfad und Strichbild aus der Asset-Datei ("Journey-Punktlinie, vier Schritte": viewBox 1000x100, Staerke 4, Punkt 1, Luecke 12, runde Enden, Gelb). Das SVG steht in default.html; beides gehoert zusammen. */ .rd-schritte-linie { position: absolute; left: 0; right: 0; top: calc(48px * var(--rd-zoom)); transform: translateY(-50%); width: 100%; height: auto; z-index: 0; pointer-events: none; } .rd-schritte-linie path { fill: none; stroke: var(--rd-gelb); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 12; } .rd-schritt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .rd-schritt-scheibe { display: flex; align-items: center; justify-content: center; width: calc(96px * var(--rd-zoom)); height: calc(96px * var(--rd-zoom)); /* Das Assetsdokument nennt fuer die Journey-Badges 78 px; hier stehen 96. Die GROESSE ist eine Entscheidung dieser Seite und bleibt, die FORM kommt aus dem Entwurf - das ist der Unterschied, den ein exakter Kreis verwischt hat. */ border-radius: var(--rd-maske-badge-journey); /* Deckende Fuellung, damit die Punktlinie dahinter verschwindet. */ background: var(--rd-weiss); /* Rand und Schatten wie in der Asset-Datei ("Organic-Badge, Journey": 2px #fbb900, 0 12px 28px rgba(251,185,0,.22)) - im Screendesign ist der Rand duenn und der Schatten faellt weich nach unten, kein Schein ringsum (19.09.2026, W8). */ border: 2px solid #fbb900; color: var(--rd-text); box-shadow: 0 12px 28px rgba(251, 185, 0, .22); } /* "je Schritt leicht variiert" (Asset-Datei): vier Formen fuer vier Schritte, in der Reihenfolge der Datei. Ueber die Stellung im Elternelement, damit die Startseite, die Landingpage und die Zeitleiste auf "Ueber mich" ohne eigene Klassen dieselben Formen bekommen; ab dem fuenften Schritt beginnt die Reihe von vorn. */ .rd-schritt:nth-child(4n+2) .rd-schritt-scheibe, .rd-station:nth-child(4n+2) .rd-schritt-scheibe { border-radius: 50% 50% 42% 58%; } .rd-schritt:nth-child(4n+3) .rd-schritt-scheibe, .rd-station:nth-child(4n+3) .rd-schritt-scheibe { border-radius: 42% 58% 50% 50%; } .rd-schritt:nth-child(4n+4) .rd-schritt-scheibe, .rd-station:nth-child(4n+4) .rd-schritt-scheibe { border-radius: 50% 50% 58% 42%; } .rd-schritt-scheibe .material-symbols-outlined { font-size: calc(44px * var(--rd-zoom)); font-variation-settings: 'wght' 350; } /* DIE VIER JOURNEY-SYMBOLE aus der Asset-Datei (19.09.2026, "schoener wohnen"): Standortbestimmung, Ziele erarbeiten, Grundlagen schaffen, Wissen behalten - aus dem Sprite svg/rd-icons.svg statt Material Symbols. Die Groesse ist die der Symbole vorher (44 px); die Striche nehmen die Textfarbe der Scheibe (currentColor), das Gelb steht im Symbol. */ .rd-schritt-symbol { width: calc(46px * var(--rd-zoom)); height: calc(46px * var(--rd-zoom)); display: block; color: var(--rd-text); } /* Die letzte Scheibe ist im Entwurf gefuellt statt umrandet - sie ist das Ziel. */ .rd-schritt-scheibe-voll { background: var(--rd-gelb); border-color: var(--rd-gelb); } .rd-schritt-titel { font-family: var(--rd-slab); font-weight: 400; font-size: calc(1.55rem * var(--rd-zoom)); line-height: 1.25; color: var(--rd-text); margin: calc(29px * var(--rd-zoom)) 0 0; } .rd-schritt-text { font-family: var(--rd-sans-leicht); font-size: calc(1.18rem * var(--rd-zoom)); line-height: 1.64; color: var(--rd-text-grau); max-width: calc(255px * var(--rd-zoom)); margin: calc(15px * var(--rd-zoom)) 0 0; } /* Nur fuer die gestapelte Darstellung. Auf dem Desktop uebernimmt die gepunktete Welle diese Aufgabe. Seit dem 19.09.2026 ein SVG aus der Asset-Datei ("Schrittpfeil, Bogen rechts/links") statt eines Material-Pfeils. */ .rd-schritt-pfeil { display: none; } .rd-ansatz-aktion { display: flex; justify-content: center; margin-top: calc(71px * var(--rd-zoom)); } /* ====================================================================== 5. Sofort loslegen, kostenlos --------------------------------------------------------------------- Gemessen bei 1920: Marke 154x42 mittig, Karten 440 breit mit 41 Zwischenraum, Block 260..1659 also 1400 und mittig. Karten sind verschieden hoch - im Entwurf endet jede an ihrem eigenen Inhalt, deshalb `align-items: start` statt der sonst ueblichen Dehnung. ZWEI ABWEICHUNGEN VOM ENTWURF, beide von Kevin am 14.08.2026: die Marke ist gelb statt rot, und die Karten tragen oben KEINEN farbigen Streifen mehr - Etikett, Aktionsflaeche und Scheibe reichen als Traeger der Akzentfarbe. ====================================================================== */ .rd-gratis { position: relative; /* Farbe der Welle nach unten: der Ton des naechsten Abschnitts. */ --rd-wellenfarbe: var(--rd-creme); /* Notwendig, seit hier eine Welle haengt - dieselbe Begruendung wie bei .rd-angebote: die Welle ist 130% breit, und ohne Beschnitt entstuende waagerechter Ueberlauf. */ overflow: hidden; background: var(--rd-gelb-hell); padding: calc(98px * var(--rd-zoom)) 0 calc(188px * var(--rd-zoom)); } /* Im Entwurf rot mit weisser Schrift. Gelb traegt weisse Schrift nicht - der Kontrast reicht nicht -, deshalb dunkle Schrift auf Gelb, genau wie bei den gelben Knoepfen der Seite. */ .rd-marke { display: block; width: fit-content; margin: 0 auto calc(19px * var(--rd-zoom)); padding: calc(13px * var(--rd-zoom)) calc(20px * var(--rd-zoom)); border-radius: 999px; background: var(--rd-gelb); color: var(--rd-text); font-family: var(--rd-sans-fett); font-size: calc(1rem * var(--rd-zoom)); letter-spacing: .06em; line-height: 1; text-transform: uppercase; } .rd-freebies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(41px * var(--rd-zoom)); align-items: start; max-width: calc(1400px * var(--rd-zoom)); margin: calc(68px * var(--rd-zoom)) auto 0; padding: 0; list-style: none; } /* Jede Karte setzt nur ihre drei Toene; alle Regeln darunter lesen sie. So steht die Farblogik an einer Stelle statt in einem Dutzend Ausnahmen. */ .rd-freebie-gelb { --akzent: var(--rd-gelb); --akzent-flaeche: #FFF9EA; --akzent-schrift: var(--rd-braun); --akzent-auf-scheibe: var(--rd-braun); } .rd-freebie-tuerkis { --akzent: var(--rd-tuerkis); --akzent-flaeche: #EAF8FB; --akzent-schrift: var(--rd-tuerkis-dunkel); --akzent-auf-scheibe: var(--rd-weiss); } .rd-freebie-braun { --akzent: var(--rd-braun); --akzent-flaeche: #F6F3EA; --akzent-schrift: var(--rd-braun); --akzent-auf-scheibe: var(--rd-weiss); } .rd-freebie { display: flex; flex-direction: column; background: var(--rd-weiss); border-radius: var(--rd-radius-karte); box-shadow: var(--rd-schatten-karte); padding: calc(44px * var(--rd-zoom)) calc(46px * var(--rd-zoom)) calc(72px * var(--rd-zoom)); } .rd-freebie-label { font-family: var(--rd-sans-fett); font-size: calc(.9rem * var(--rd-zoom)); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-schrift); margin: 0 0 calc(14px * var(--rd-zoom)); } .rd-freebie-titel { font-family: var(--rd-slab); font-weight: 400; font-size: calc(1.86rem * var(--rd-zoom)); line-height: 1.22; color: var(--rd-text); margin: 0 0 calc(19px * var(--rd-zoom)); } .rd-freebie-text { font-family: var(--rd-sans-leicht); font-size: calc(1.25rem * var(--rd-zoom)); line-height: 1.55; color: var(--rd-text-grau); margin: 0 0 calc(30px * var(--rd-zoom)); } /* Sitzt unten, auch wenn der Text darueber kuerzer ist als in der Nachbarkarte - innerhalb der eigenen Karte, nicht ueber alle hinweg. */ .rd-freebie-aktion { display: flex; align-items: center; gap: calc(20px * var(--rd-zoom)); margin-top: auto; padding: calc(16px * var(--rd-zoom)) calc(18px * var(--rd-zoom)); border-radius: calc(18px * var(--rd-zoom)); background: var(--akzent-flaeche); transition: transform .15s ease; } .rd-freebie-aktion:hover { transform: translateY(-2px); } /* Auf mein-angebot.html zeichnet script.js dieselbe Kachel aus der Datenbank, und ihre Aktion oeffnet ein Formular statt einer Seite: ein