/* Theme Name: Gute Digital Probeseite Theme URI: https://gute-digital.de Author: Gute Digital Description: Agenturseite mit Entwurf-vorab-Modell: erst sehen, dann zahlen. Mehrseiter, eigenständiges Theme ohne Baukasten, Vanilla CSS/JS, selbst gehostete Schrift. Jeder Abschnitt ist zugleich ein Elementor-Widget: Texte, Bilder und Reihenfolge sind bearbeitbar, das Aussehen bleibt unverändert. Version: 3.26.0 Requires PHP: 7.4 License: proprietär Text Domain: gutedigital-probe */ /* ---------- Schrift (selbst gehostet, variabel) ---------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url('assets/fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url('assets/fonts/bricolage-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Gestaltungswerte ---------- */ :root { --grund: #f6f6f4; --grund-rgb: 246, 246, 244; --flaeche: #ffffff; --tinte: #17181c; --tinte-weich: #565963; --tinte-mittel: #3d404a; --linie: rgba(23, 24, 28, 0.12); --linie-stark: rgba(23, 24, 28, 0.26); --signal: #2b3be0; /* Ultramarin: Hauptaktion und Akzent */ --signal-tief: #2231c2; --signal-hell: #eef0fd; /* getoenter Grund fuer den Ablauf */ --signal-linie: rgba(43, 59, 224, 0.22); --zweitweg: #0d1130; /* zweiter Handlungsweg: Anruf, WhatsApp; seit 2.7.0 das Navy der Hausfarbe statt Fast-Schwarz */ --zweitweg-hell: #1a2154; /* Hover des Zweitwegs */ --dunkel: #0d1130; /* Hausfarbe dunkel (2.6.0): Ultramarin-Navy fuer Held, Beispiele, Anfrage, Fuss, betontes Paket */ --dunkel-flaeche: #161b40; --dunkel-linie: rgba(255, 255, 255, 0.14); --auf-dunkel: #f5f5f2; --auf-dunkel-weich: #c9cbd3; --held-grund: var(--dunkel); /* Held und Kopfleiste darueber */ --schrift: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; --inhalt: 1200px; --abschnitt: clamp(3.5rem, 8vw, 5.75rem); /* 56 bis 92 px */ --rand: clamp(1.25rem, 4vw, 3rem); --kopf-h: 73px; /* Kopfleiste: 72 px plus Haarlinie */ --leiste-h: 0px; /* feste Kontaktleiste unten; erst am Handy > 0 (2.9.0) */ --radius-karte: 16px; --radius-feld: 12px; --radius-pille: 999px; --gang: cubic-bezier(0.16, 1, 0.3, 1); --weich: cubic-bezier(0.22, 0.61, 0.36, 1); /* sanfter Auslauf ohne Ueberschwingen */ --dauer: 0.3s; } /* ---------- Grundlage ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--schrift); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.65; color: var(--tinte); background: var(--grund); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; letter-spacing: 0; text-wrap: balance; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; } .band--dunkel :focus-visible, .fuss :focus-visible, .mobilleiste :focus-visible { outline-color: #8f9aff; } body.menue-offen { overflow: hidden; } ::selection { background: var(--signal); color: #fff; } .springlink { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--tinte); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; } .springlink:focus { left: 0; } .halter { max-width: var(--inhalt); margin-inline: auto; padding-inline: var(--rand); } .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .abschnitt { padding-block: var(--abschnitt); scroll-margin-top: 96px; } .fliess { max-width: 62ch; } /* Ueberschriften: gemessene Zielwerte aus dem Aufmass */ .u1 { font-size: clamp(2.25rem, 3.9vw, 2.75rem); line-height: 1.08; font-weight: 780; } .u1 span { display: block; } .u2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.12; font-weight: 750; } .u3 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; } .vorspann { color: var(--tinte-weich); margin-top: 0.9em; } .ueberzeile { font-weight: 650; font-size: 1.0625rem; color: var(--signal); margin: 0 0 1em; } .band--dunkel .ueberzeile { color: #8f9aff; } .u2 + .person__karte { margin-top: 2.5rem; } /* ---------- Knoepfe und Textlinks ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-pille); border: 2px solid transparent; font: inherit; font-size: 1.0625rem; font-weight: 650; line-height: 1.2; padding: 14px 28px; min-height: 52px; cursor: pointer; text-decoration: none; text-align: center; transition: transform var(--dauer) var(--gang), background-color var(--dauer) var(--gang), border-color var(--dauer) var(--gang), color var(--dauer) var(--gang); } .knopf:hover { transform: translateY(-2px); } .knopf:active { transform: translateY(0) scale(0.98); } .knopf--voll { background: var(--signal); color: #fff; } .knopf--voll:hover { background: var(--signal-tief); } .knopf--gross { min-height: 58px; padding: 16px 32px; font-size: 1.125rem; } .knopf--dunkel { background: var(--zweitweg); color: #fff; } .knopf--dunkel:hover { background: var(--zweitweg-hell); } .knopf--leise { border-color: var(--linie-stark); color: var(--tinte); background: transparent; } .knopf--leise:hover { border-color: var(--tinte); } .band--dunkel .knopf--leise { border-color: var(--dunkel-linie); color: var(--auf-dunkel); } .band--dunkel .knopf--leise:hover { border-color: var(--auf-dunkel); } .knopf--weiss { background: #fff; color: var(--tinte); } .knopf--weiss:hover { background: #e9e9e5; } .knopfzeile { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 2rem; } .knopfzeile--mitte { justify-content: center; text-align: center; } .textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 1.0625rem; text-decoration: none; color: var(--tinte); padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color var(--dauer) var(--gang), gap var(--dauer) var(--gang); } .textlink svg { color: var(--signal); } .textlink:hover { border-bottom-color: var(--tinte); gap: 10px; } .band--dunkel .textlink { color: var(--auf-dunkel); } .band--dunkel .textlink svg { color: #8f9aff; } .band--dunkel .textlink:hover { border-bottom-color: var(--auf-dunkel); } /* ---------- Kopfleiste ---------- */ .kopf { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dauer) var(--gang), background-color var(--dauer) var(--gang); } .kopf.gerollt { border-bottom-color: var(--linie); background: color-mix(in srgb, var(--grund) 94%, transparent); } .kopf__zeile { display: flex; align-items: center; gap: 28px; min-height: 72px; } .marke { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .marke b { color: var(--signal); font-weight: 800; } .kopf__nav { display: flex; gap: 26px; margin-inline: auto; } .kopf__nav a { text-decoration: none; font-size: 1rem; font-weight: 500; color: var(--tinte-weich); padding: 4px 0; border-bottom: 2px solid transparent; transition: color var(--dauer), border-color var(--dauer); } .kopf__nav a:hover { color: var(--tinte); } .kopf__nav a[aria-current="page"] { color: var(--tinte); font-weight: 650; border-bottom-color: var(--signal); } .kopf__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; font-size: 1rem; white-space: nowrap; } .kopf__tel svg { color: var(--signal); } .kopf .knopf { min-height: 46px; padding: 10px 22px; font-size: 1rem; } .klapp { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--tinte); } /* Kopfleiste ueber dem dunklen Seitenanfang: dunkle Fassung, solange der Held (Startseite) bzw. der dunkle Seitenkopf (Unterseiten, seit 2.7.0) unter der Leiste liegt. header.php setzt die Klasse von Anfang an (kein Aufblitzen), main.js nimmt sie ab, sobald das dunkle Band vorbeigerollt ist. */ .kopf--dunkel { background: color-mix(in srgb, var(--held-grund) 80%, transparent); } .kopf--dunkel.gerollt { border-bottom-color: rgba(255, 255, 255, 0.12); background: color-mix(in srgb, var(--held-grund) 92%, transparent); } .kopf--dunkel .marke, .kopf--dunkel .kopf__tel, .kopf--dunkel .klapp { color: #f5f5f2; } .kopf--dunkel .marke b { color: #8f9aff; } .kopf--dunkel .kopf__tel svg { color: #8f9aff; } .kopf--dunkel .kopf__nav a { color: #aab0c9; } .kopf--dunkel .kopf__nav a:hover { color: #fff; } .kopf--dunkel .kopf__nav a[aria-current="page"] { color: #fff; border-bottom-color: #8f9aff; } .kopf--dunkel .knopf--voll { background: #3446f4; } .kopf--dunkel .knopf--voll:hover { background: #4557ff; } .kopf--dunkel :focus-visible { outline-color: #8f9aff; } .rollo { display: none; position: fixed; inset: 0; z-index: 90; background: var(--grund); padding: 110px var(--rand) 40px; overflow-y: auto; } .rollo.offen { display: flex; flex-direction: column; gap: 6px; } .rollo a { text-decoration: none; font-size: 1.5rem; font-weight: 650; padding: 12px 0; border-bottom: 1px solid var(--linie); } .rollo a[aria-current="page"] { color: var(--signal); } .rollo .knopf { margin-top: 22px; border-bottom: 0; } /* ---------- Held: Schaufenster mit Reitern ---------- Links der Text, rechts ein grosses Browserfenster, das ueber den rechten Rand hinausragt und leicht ins Bild gedreht ist. Darin laeuft eine echte Beispielseite von oben nach unten durch; links davor ein Handy mit derselben Seite in der Handyfassung. Die Laufweite (--weg) rechnet main.js aus der Bildhoehe, die Bewegung macht die Animation hier. Darunter drei Reiter mit Miniatur und Name: alle drei Seiten auf einen Blick, der aktive traegt den Laufbalken bis zum Wechsel, Klick wechselt sofort. */ .held { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); color: var(--auf-dunkel); background: radial-gradient(900px 640px at 82% 10%, rgba(43, 59, 224, 0.3), transparent 62%), radial-gradient(720px 540px at -8% 98%, rgba(43, 59, 224, 0.14), transparent 58%), var(--held-grund); /* Das erste Bild gehoert dem Held allein (2.4.0): mindestens ein Bildschirm abzueglich der Kopfleiste, Inhalt darin mittig. Vorher endete der Held genau an der Bildkante, und das Vertrauensband darunter wurde in das erste Bild hineingezogen — es sah aus, als gehoerten seine vier Zusagen noch in den Held. Jetzt beginnt es wieder unter der Kante. 2.9.0: --leiste-h kommt dazu. Am Handy steht unten die feste Kontaktleiste (80 px). Ohne sie in der Rechnung war der Held genau um diese 80 px zu hoch angesetzt, und seine Buehne fiel auf jedem gaengigen Handy unter die Kante. */ min-height: calc(100vh - var(--kopf-h) - var(--leiste-h)); min-height: calc(100svh - var(--kopf-h) - var(--leiste-h)); display: flex; align-items: center; } /* 2.7.0: Halter breiter (1320 -> 1400), damit Text und Knoepfe auf breiten Bildschirmen 40 px weiter links stehen; das Handy rueckt unten um dasselbe Mass nach links und verdeckt weniger von der Beispielseite. */ .held .halter { max-width: 1400px; width: 100%; } .held__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } /* 3.1.0: Held ohne Buehne (Schalter im Widget aus, oder keine Beispielseite mehr eingetragen). Ohne diese Regel bliebe die zweite Rasterspalte leer und der Text stuende auf halber Breite am linken Rand. */ .held__raster--nur-text { grid-template-columns: minmax(0, 1fr); } .held__raster--nur-text .held__text { max-width: 42rem; } .held__text { max-width: 580px; } .held .u1 { font-size: clamp(2.25rem, 3.6vw, 3.125rem); letter-spacing: -0.015em; } /* 2.10.0: mehr Luft zwischen Ueberschrift und Vorspann (1.1 -> 1.5 em) und die Knoepfe ein Stueck tiefer (2.25 -> 3 rem), damit die handgezeichnete Markierung um „48 Stunden“ und die Linie unter „kostenlos und unverbindlich“ Platz zum Atmen haben; am Rechner ist die Hoehe da (Held = ein Bildschirm, Inhalt mittig). */ .held .vorspann { max-width: 50ch; font-size: 1.1875rem; margin-top: 1.5em; } .held .knopfzeile { margin-top: 3rem; gap: 12px 16px; } .held .knopf--leise { padding-inline: 24px; } /* 2.8.0: „Referenzen ansehen“ ist breiter als „Beispiele ansehen“, beide Knoepfe muessen in die 580 px passen */ /* 3.2.0: die drei Zusagen stehen untereinander (Wunsch des Inhabers). Vorher war es eine Zeile mit Umbruch — sie brach auf jedem gaengigen Rechner nach dem zweiten Punkt und ergab zwei Zeilen mit 2 + 1 Zusagen, was aussah wie ein Umbruchunfall. Untereinander sind es drei gleich gewichtete Zeilen, und das Auge liest sie als Liste. */ .held__punkte { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 0.9375rem; font-weight: 600; color: var(--tinte-mittel); } .held__punkte li { display: inline-flex; align-items: center; gap: 7px; } .held__punkte svg { color: var(--signal); flex: 0 0 auto; } /* 3.10.0: Die vierte Zeile ist ein Link auf die Preise (Startphase). Sie traegt den Stern statt des Hakens und eine Linie darunter, damit sie als anklickbar zu erkennen ist, ohne die drei Zusagen zu ueberstrahlen. */ .held__punkt--startphase a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .held__punkt--startphase a:hover { border-bottom-color: transparent; } .held .held__punkt--startphase svg { color: #ffd166; } /* 2.10.0: handgezeichnete Hervorhebungen im Held (Vorbild: Magic UI „Highlighter“, darunter liegt rough-notation, MIT, selbst gehostet in assets/js/rough-notation.js; main.js zeichnet sie, sobald die Schrift geladen ist). „48 Stunden“ in der Ueberschrift bekommt einen Textmarker-Strich in Ultramarin (der weisse Text bleibt darauf lesbar), „kostenlos und unverbindlich“ im Vorspann eine handgezogene Linie in Hellblau. Das Wort steht wie im Vorbild als inline-block: ein Rechteck fuer die Markierung, und der ResizeObserver der Bibliothek kann es messen (inline-Elemente kann er nicht). Ohne JavaScript steht der Text schlicht da. */ .hervor { display: inline-block; } mark.hervor { background: none; color: inherit; } .rough-annotation { pointer-events: none; } /* 2.6.0: die Buehne rueckt um --versatz nach rechts und das Handy ist etwas kleiner, damit es weniger vom Text der Beispielseite verdeckt. */ .held__buehne { position: relative; min-width: 0; --handy: clamp(140px, 13.5vw, 178px); --versatz: clamp(40px, 5vw, 76px); --handy-links: clamp(30px, 8vw - 60px, 56px); /* 2.7.0: Handy weiter links, auf breiten Bildschirmen mehr (22 -> 56 px) */ } .schau { position: relative; width: 118%; margin-left: var(--versatz); perspective: 2000px; padding-bottom: 34px; } .schau__browser { transform: rotateY(-6deg) rotateX(1.5deg); transform-origin: left center; box-shadow: 0 40px 90px -36px rgba(23, 24, 28, 0.42), 0 12px 30px -18px rgba(23, 24, 28, 0.25); } /* Das Fenster: fester Ausschnitt, die lange Seite laeuft darin nach oben. */ .schau__fenster { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #eceae6; } .schau__seite { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity 1s var(--weich); will-change: transform, opacity; } .schau__seite.sichtbar { opacity: 1; } /* 2.7.0: kuerzerer Stand am Anfang und ein Verlauf, der frueher Fahrt aufnimmt. 2.8.0: 7 s und ein flacherer Verlauf: in der Mitte etwas langsamer, am Ende kein langes Auslaufen mehr (der Stand danach ist in main.js auf 0,5 s gekuerzt). 2.11.0 (Wunsch des Inhabers): jede Seite lief zu schnell an. Der Stand oben dauert laenger (4 -> 7 Prozent der Strecke) und der Verlauf nimmt spaeter Fahrt auf (Anfangssteigung 0,29 -> 0,13). Damit die Mitte davon nicht hektisch wird, dauert ein Durchlauf 7,6 statt 7 Sekunden (main.js, DAUER). 3.1.1 (Wunsch des Inhabers): unter 768 px sind es 9,6 s — am Handy fuellt das hochkante Fenster den halben Bildschirm, dort liest man mit. Die Zahl steht in main.js (DAUER_BREIT / DAUER_HANDY) und kommt als --dauer-rollen hier an; der Wert hinter dem Komma greift nur, wenn kein JavaScript laeuft — dann rollt allerdings ohnehin nichts, denn die Klasse `rollt` setzt erst main.js. */ .schau__seite.rollt { animation: schau-rollen var(--dauer-rollen, 7.6s) cubic-bezier(0.46, 0.06, 0.55, 1) forwards; } @keyframes schau-rollen { 0% { transform: translateY(0); } 7% { transform: translateY(0); } 100% { transform: translateY(var(--weg, -60%)); } } .held .schau__handy { /* .held davor: die allgemeine .handy-Regel weiter unten darf hier nicht greifen */ /* Das Handy bleibt an der linken Kante der Buehne stehen, waehrend das Fenster um --versatz nach rechts rueckt (2.6.0): so verdeckt es weniger. */ position: absolute; left: calc(-1 * var(--handy-links, 22px) - var(--versatz, 0px)); bottom: 0; width: var(--handy); max-width: none; border-radius: 26px; border: 6px solid var(--tinte); transform: none; } .schau__fenster--handy { aspect-ratio: 39 / 78; } /* Reiter: alle drei Seiten auf einen Blick, Klick wechselt, Balken zaehlt bis zum naechsten Wechsel (main.js setzt --dauer-seite). */ .reiter { display: flex; gap: 6px; margin-top: 10px; width: 100%; } .reiter__knopf { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 8px 12px 7px; margin: 0; background: transparent; border: 0; border-radius: 12px; font: inherit; text-align: left; color: var(--tinte-weich); cursor: pointer; transition: background-color var(--dauer) var(--gang), color var(--dauer) var(--gang); } .reiter__knopf:hover { background: rgba(23, 24, 28, 0.045); color: var(--tinte); } .reiter__knopf:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .reiter__knopf.ist-aktiv { color: var(--tinte); } .reiter__bild { flex: 0 0 auto; width: 54px; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #eceae6; border: 1px solid var(--linie); opacity: 0.72; transition: opacity var(--dauer) var(--gang), border-color var(--dauer) var(--gang); } .reiter__knopf.ist-aktiv .reiter__bild, .reiter__knopf:hover .reiter__bild { opacity: 1; } .reiter__knopf.ist-aktiv .reiter__bild { border-color: var(--linie-stark); } .reiter__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .reiter__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .reiter__text b { font-weight: 700; font-size: 0.875rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .reiter__lauf { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: 1px; background: rgba(23, 24, 28, 0.1); overflow: hidden; } .reiter__lauf::after { content: ''; position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: left center; } .reiter__knopf.ist-aktiv .reiter__lauf::after { transform: scaleX(1); } .reiter__knopf.ist-aktiv.laeuft .reiter__lauf::after { animation: reiter-lauf var(--dauer-seite, 8s) linear forwards; } @keyframes reiter-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Held am Rechner: der Platz, der da ist (3.2.0) ---------- Gemessen bei 1440 x 900: der Textblock war 580 px breit und 440 px hoch, der Held selbst 827 px — es standen 387 px Hoehe leer, waehrend die Ueberschrift in einer schmalen Spalte umbrach und Vorspann, Knoepfe und Zusagen dicht aneinander klebten. Ab 1000 px (dort beginnt das zweispaltige Raster) nimmt der Text darum mehr Breite (580 -> 700 px, Spaltenanteil 1 : 1,05 -> 1,1 : 1) und die Stufen darin stehen weiter auseinander. Die Ueberschrift wird groesser (50 -> 63 px bei 1440): Sie ist der erste Satz, den der Besucher liest, und sie hat den Platz. Die Abstaende laufen mit der Fensterbreite (clamp mit vw), damit bei 1024 px, wo die zwei Knoepfe untereinander rutschen, nichts unter die Bildkante fallt. Die Buehne rechts verliert dabei rund 40 px Breite; sie ragt ohnehin ueber den rechten Rand hinaus, im Bild fehlt nichts. */ @media (min-width: 1000px) { .held__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 3.2vw, 3.5rem); } .held__text { max-width: 700px; } .held .u1 { font-size: clamp(2.5rem, 4.4vw, 4rem); } .held .vorspann { max-width: 54ch; font-size: 1.3125rem; margin-top: 1.4em; } .held .knopfzeile { margin-top: clamp(2.25rem, 4vw, 3.5rem); } .held__punkte { margin-top: clamp(1.75rem, 3vw, 2.75rem); gap: clamp(10px, 1vw, 16px); font-size: 1rem; } } /* Flache Fenster (Laptop mit Browserleiste): weniger Luft, damit Fenster und Reiter noch im ersten Bild sind. */ @media (min-width: 1000px) and (max-height: 760px) { .held { padding-block: 1.25rem 1.5rem; } .schau { width: 104%; padding-bottom: 20px; } .reiter { margin-top: 8px; } .held__buehne { --handy: clamp(130px, 11.5vw, 160px); --versatz: clamp(28px, 3vw, 44px); } /* 3.2.0: Die groessere Ueberschrift und die drei untereinander stehenden Zusagen brauchen Hoehe. Im flachen Fenster ist sie nicht da, also faellt die Ueberschrift wieder auf 56 px und die Stufen ruecken zusammen. */ .held .u1 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); } .held .vorspann { font-size: 1.1875rem; margin-top: 1.2em; } .held .knopfzeile { margin-top: 2.25rem; } .held__punkte { margin-top: 1.75rem; gap: 8px; } } /* Schmaler als 1000px: Text oben, Schaufenster darunter in voller Breite, das Handy dann links vor dem Browser. */ @media (max-width: 999.98px) { .held__raster { grid-template-columns: 1fr; } .schau { width: 100%; margin-left: 0; padding-left: 40px; } .schau__browser { transform: none; } .held .schau__handy { left: 0; width: 150px; } } /* Am Handy (2.9.0): das erste Bild traegt Botschaft UND Beweis. Der Rechnerrahmen faellt hier ganz weg. Bis 2.8.0 stand er auch am Handy: 350 px breit, darin eine 1200-px-Aufnahme auf 28 Prozent geschrumpft, davor ein 119 px kleines Handy, das das linke Drittel verdeckte — unlesbar, und ausserdem lag das Ganze auf jedem gaengigen Handy unter der Bildkante. Stattdessen steht jetzt EIN grosses Geraet hochkant in der Mitte, in echter Handyproportion (39 : 78), und darin laeuft dieselbe Beispielseite durch, die der Besucher auf seinem eigenen Handy saehe. Die Hoehe folgt dem Bildschirm (54svh), die Breite folgt daraus. Reihenfolge: Ueberzeile, Ueberschrift, Reiterzeile, Geraet — dann erst Knoepfe, Vorspann, Zusagen. Die Reiterzeile steht ueber dem Geraet, damit der Name der gezeigten Seite im ersten Bild lesbar ist, auch wenn das Geraet unten leicht angeschnitten wird. Die Hauptaktion geht dabei nicht verloren: die feste Kontaktleiste unten traegt sie dauerhaft. Dafuer loest sich .held__text auf (display: contents), damit alle Teile im selben Raster umsortiert werden koennen. */ @media (max-width: 767.98px) { .held { padding-block: 1rem 2rem; } .held__raster { gap: 0; } .held__text { display: contents; } /* 3.13.0: Die Ueberzeile ist am Handy WIEDER DA — kleiner als am Rechner. 3.5.0 hatte sie gestrichen, um 35 px fuer die Buehne zu gewinnen. Der Preis dafuer war zu hoch: Am Handy stand im ersten Bild nirgends, FUER WEN diese Seite ist. Das Wort „Handwerk" tauchte erst weit unten im Angebot auf, und die Mehrheit dieser Zielgruppe kommt vom Handy. Ein Interessent, der sich nicht angesprochen fuehlt, liest nicht weiter. Der Platz kommt aus der Buehne (42 -> 40 svh), nicht vom Hauptknopf: die Zeile ist mit 13 px und engem Abstand darunter rund 20 px hoch, die Buehne gibt bei 844 px Fensterhoehe 17 px ab. Das Buendel H1 + Vorspann + Buehne + Hauptknopf bleibt damit im ersten Bild (nachgemessen, siehe unten). Am Rechner bleibt alles, wie es war; dort steht davor noch „Deutschlandweit fuer " in .nur-breit. */ .held .ueberzeile { order: 1; font-size: 0.8125rem; margin-bottom: 0.3rem; } /* 3.8.0: Der Vorspann rueckt VOR die Buehne. Vorher stand er auf order: 5, unter dem Hauptknopf und damit unter der Falz — der Besucher wurde zum Klick aufgefordert, bevor er „kostenlos und unverbindlich" gelesen hatte. Neu: H1, Vorspann, Buehne und Hauptknopf zusammen im ersten Bild. Damit das auf 390 x 844 aufgeht, ist die Buehne von 54 auf 46 svh gekuerzt und die Luft um Vorspann und Knopf enger gesetzt (gemessen bleiben ~55 px frei, der zweite, leise Knopf schaut an und zeigt, dass es weitergeht). 3.10.0 hat die Buehne auf 42 svh (kurze Handys 36) gekuerzt, weil die Ueberschrift mit „zum Anklicken“ am Handy dreizeilig war und 38 px kostete. 3.11.0: Die Ueberschrift ist wieder zweizeilig, die 42 svh bleiben aber — zurueck auf 46 gemessen, rutscht der Hauptknopf auf 360x780 wieder unter die Falz (719-798 bei 780 Fensterhoehe), waehrend er mit 42 svh auf allen vier geprueften Groessen vollstaendig im Bild steht und der zweite, leise Knopf mehr davon zeigt. Nachgemessen bei 390x844, 414x896, 360x780 und 375x667. */ .held .u1 { order: 2; font-size: clamp(2.125rem, 9vw, 2.75rem); } .held .vorspann { order: 3; font-size: 1rem; margin-top: 0.6rem; } .held__buehne { order: 4; display: grid; margin-top: 0.85rem; --handy: auto; } .held .knopfzeile { order: 5; margin-top: 1.1rem; } .held__punkte { order: 6; margin-top: 1.25rem; gap: 8px; font-size: 0.9375rem; } /* Innerhalb der Buehne: erst die Reiterzeile, dann das Geraet. */ .reiter { order: 1; margin: 0 0 0.7rem; gap: 2px; } .schau { order: 2; position: relative; width: 100%; margin-left: 0; padding: 0; perspective: none; display: flex; justify-content: center; } /* Der Rechner bleibt dem Rechner. display:none haelt am Handy zugleich die drei langen Rechner-Aufnahmen (740 KB) aus dem Ladeplan: sie stehen alle auf loading="lazy" und werden in einem verborgenen Teilbaum nicht geholt. */ .held .schau__browser { display: none; } /* Das Geraet IST die Buehne. Die Hoehe steht am Fenster, die Breite folgt der Proportion; das Geraet ist Flex-Kind und legt sich darum herum. */ .held .schau__handy { position: relative; left: auto; bottom: auto; z-index: 1; width: auto; max-width: none; flex: 0 0 auto; border: 5px solid var(--tinte); border-top-width: 8px; border-bottom-width: 8px; border-radius: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32), 0 0 70px -8px rgba(96, 116, 255, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.85); } .held .schau__fenster--handy { height: clamp(240px, 40svh, 420px); width: auto; aspect-ratio: 39 / 78; border-radius: 21px; } /* Glaskante: eine feine helle Linie innen, damit der Bildschirm als Glas gelesen wird und nicht als aufgeklebtes Bild. */ .held .schau__fenster--handy::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } /* Schein hinter dem Geraet: der Rahmen ist #17181c auf Navy #0d1130 und versinkt sonst im Grund. */ .schau::before { content: ''; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(140%, 460px); height: 112%; background: radial-gradient(closest-side, rgba(52, 70, 244, 0.5), transparent 74%); } /* Wortteile, die nur auf breiten Bildschirmen mitlaufen. */ .nur-breit { display: none; } .reiter__knopf { padding: 7px 6px 11px; gap: 0; } .reiter__bild { display: none; } .reiter__text b { font-size: 0.75rem; } .reiter__lauf { left: 5px; right: 5px; bottom: 3px; } } /* 3.5.0: Kurze Handys. Wunsch des Inhabers ist, dass Ueberschrift, die drei Beispielseiten UND der grosse Knopf darunter gleichzeitig im Bild stehen. Seit 3.8.0 steht zusaetzlich der Vorspann dazwischen (siehe oben), darum ist die Buehne hier weiter auf 40 svh gekuerzt und der Vorspann eine Stufe kleiner — gemessen passt das Buendel damit auch auf das iPhone SE (667) und Android 360 x 800. Die 740 px Grenze liegt bewusst ueber dem SE und unter Android 360x800: das hoehere Geraet braucht die Kur nicht. Der zweite, leise Knopf wird angeschnitten — mit Absicht, er zeigt, dass es weitergeht, und die Hauptaktion steht vollstaendig. */ @media (max-width: 767.98px) and (max-height: 740px) { .held { padding-block: 0.75rem 1.5rem; } .held .u1 { font-size: clamp(1.875rem, 8.2vw, 2.375rem); } .held .vorspann { font-size: 0.9375rem; margin-top: 0.5rem; } .held__buehne { margin-top: 0.6rem; } .held .reiter { margin-bottom: 0.5rem; } .held .ueberzeile { font-size: 0.75rem; margin-bottom: 0.2rem; } .held .schau__fenster--handy { height: clamp(196px, 34svh, 420px); } .held .knopfzeile { margin-top: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .schau__seite.rollt { animation: none; } .schau__seite { transition: none; } .reiter__knopf.ist-aktiv.laeuft .reiter__lauf::after { animation: none; transform: scaleX(1); } } /* ---------- Held auf Dunkel (2.5.0) ---------- Der Held liegt auf tiefem Ultramarin-Navy (--held-grund), dem dunklen Bruder der Markenfarbe. Texte hell, Akzente wie in den dunklen Baendern in #8f9aff. Die Hauptaktion leuchtet einen Hauch heller als das Marken-Ultramarin und traegt einen weichen Schein, sonst saeuft sie im dunklen Blau ab. Browserfenster und Handy bekommen eine feine helle Kante und tiefere Schatten, damit die drei Beispielseiten klar vor dem dunklen Grund stehen. */ .held .ueberzeile { color: #8f9aff; } .held .u1 { color: #fff; } .held .vorspann { color: #c3c8de; } .held .held__punkte { color: #ced2e4; } .held .held__punkte svg { color: #8f9aff; } .held :focus-visible { outline-color: #8f9aff; } /* 2.7.0: gilt jetzt fuer jede Hauptaktion auf dunklem Grund (Held und dunkle Baender). */ .held .knopf--voll, .band--dunkel .knopf--voll { background: #3446f4; box-shadow: 0 14px 38px -12px rgba(52, 70, 244, 0.55); } .held .knopf--voll:hover, .band--dunkel .knopf--voll:hover { background: #4557ff; } .held .knopf--leise { border-color: rgba(255, 255, 255, 0.34); color: var(--auf-dunkel); } .held .knopf--leise:hover { border-color: #fff; } /* 2.6.0: statt Browserleiste mit Adresse ein Geraeterahmen wie beim Handy (Bildschirmrand plus Kinn), damit klar ist: das ist die Rechnerfassung. */ .held .schau__browser { border: 10px solid var(--tinte); border-bottom-width: 24px; border-radius: 22px; background: var(--tinte); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 48px 110px -36px rgba(0, 0, 0, 0.75), 0 14px 34px -18px rgba(0, 0, 0, 0.55); } .held .schau__fenster { border-radius: 10px 10px 6px 6px; } /* Hauptaktion im Held (2.7.0, ersetzt die Fassung aus 2.6.0): ein Lichtstreifen gleitet alle fuenf Sekunden ueber den Knopf, im selben Takt loest sich ein feiner Ring nach aussen. Beides bewegt nur transform und opacity bzw. eine winzige Flaeche und beginnt und endet unsichtbar, deshalb ruckt und blitzt nichts mehr; die Fassung aus 2.6.0 sprang bei jedem Neustart des Pulses sichtbar auf (Schatten von 0 auf 0,6 Deckung), was wie ein Haenger wirkte. Beides unter dem Text, damit der Hover-Hub weiter greift; bei reduced-motion aus. */ .held .knopf--voll { position: relative; isolation: isolate; } .held .knopf--voll::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.26) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; animation: cta-glanz 5s cubic-bezier(0.45, 0, 0.25, 1) infinite; } .held .knopf--voll::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; border: 2px solid rgba(143, 154, 255, 0.85); opacity: 0; transform: scale(1); animation: cta-ring 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; } @keyframes cta-glanz { 0% { background-position: 130% 0; } 10% { background-position: 130% 0; } 40% { background-position: -30% 0; } 100% { background-position: -30% 0; } } @keyframes cta-ring { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 0.5; } 55% { opacity: 0; transform: scale(1.06, 1.32); } 100% { opacity: 0; transform: scale(1.06, 1.32); } } @media (prefers-reduced-motion: reduce) { .held .knopf--voll::before, .held .knopf--voll::after { animation: none; } } .held .schau__handy { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 26px 60px -22px rgba(0, 0, 0, 0.75); } .held .reiter__knopf { color: #a9aec8; } .held .reiter__knopf:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .held .reiter__knopf.ist-aktiv { color: #fff; } .held .reiter__bild { background: #171b3a; border-color: rgba(255, 255, 255, 0.18); } .held .reiter__knopf.ist-aktiv .reiter__bild { border-color: rgba(255, 255, 255, 0.42); } .held .reiter__lauf { background: rgba(255, 255, 255, 0.16); } .held .reiter__lauf::after { background: #8f9aff; } /* Die beiden Lichter im Held sind auf das Rechnerlayout gezielt (Schaufenster rechts oben). Am Handy steht das Geraet in der Mitte, das Licht wandert mit. */ @media (max-width: 767.98px) { .held { background: radial-gradient(680px 560px at 50% 64%, rgba(43, 59, 224, 0.32), transparent 62%), var(--held-grund); } } /* Browserrahmen um echte Bildschirmfotos (Beispiele im Detail) */ .browser { display: block; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-karte); box-shadow: 0 24px 60px -24px rgba(23, 24, 28, 0.28); overflow: hidden; } .browser__leiste { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: #fafaf8; } .browser__punkte { display: flex; gap: 5px; } .browser__punkte span { width: 9px; height: 9px; border-radius: 50%; background: var(--linie-stark); opacity: 0.55; } .browser__adresse { flex: 1; text-align: center; font-size: 0.8125rem; color: var(--tinte-weich); background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-pille); padding: 4px 14px; max-width: 340px; margin-inline: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser__buehne { position: relative; aspect-ratio: 16 / 10; background: #eceae6; } .browser__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .handy { position: absolute; left: -46px; bottom: -28px; width: 134px; border-radius: 24px; border: 5px solid var(--tinte); overflow: hidden; background: #fff; box-shadow: 0 20px 44px -18px rgba(23, 24, 28, 0.4); } .handy__buehne { position: relative; aspect-ratio: 39 / 72; background: #eceae6; } .handy__buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* 3.20.0: Rahmen und Handy sind auf /beispiele/ selbst Links (Wunsch des Inhabers) — bis dahin fuehrte nur der Knopf „Live ansehen“ zur Referenz, obwohl aufs Bildschirmfoto zu klicken das Erste ist, was jeder versucht. In Ruhe sieht der Rahmen aus wie vorher; erst beim Darueberfahren hebt er sich und bekommt einen Ring in der Signalfarbe. Beide heben zusammen: Es sind zwei Links, aber ein Ziel — deshalb der :has()-Zwilling. */ .browser--link, .handy--link { color: inherit; text-decoration: none; } .browser--link, .handy--link { transition: transform var(--dauer) var(--gang), box-shadow var(--dauer) var(--gang), border-color var(--dauer) var(--gang); } .browser--link:hover, .browser--link:focus-visible, .referenz__medien:has(.handy--link:hover) .browser--link { transform: translateY(-6px); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(43, 59, 224, 0.16), 0 34px 70px -26px rgba(23, 24, 28, 0.42); } .handy--link:hover, .handy--link:focus-visible, .referenz__medien:has(.browser--link:hover) .handy--link { transform: translateY(-6px); box-shadow: 0 0 0 4px rgba(43, 59, 224, 0.16), 0 26px 52px -16px rgba(23, 24, 28, 0.46); } @media (prefers-reduced-motion: reduce) { .browser--link, .handy--link { transition: none; } .browser--link:hover, .browser--link:focus-visible, .handy--link:hover, .handy--link:focus-visible, .referenz__medien:has(.handy--link:hover) .browser--link, .referenz__medien:has(.browser--link:hover) .handy--link { transform: none; } } /* ---------- Vertrauensband ---------- */ .belegband { border-block: 1px solid var(--linie); background: var(--flaeche); position: relative; z-index: 1; } .belegband__raster { display: grid; grid-template-columns: repeat(4, 1fr); } .beleg { display: flex; align-items: center; gap: 12px; padding: 22px 20px; font-weight: 600; font-size: 1rem; line-height: 1.3; } .beleg + .beleg { border-left: 1px solid var(--linie); } .beleg svg { flex: none; color: var(--signal); } /* ---------- Problem / So arbeite ich (Zweierraster mit Haarlinien) ---------- */ .band--weiss { background: var(--flaeche); } .problem__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem); margin-top: 2.5rem; } .problem__punkt { border-top: 1px solid var(--linie); padding: 26px 0 30px; } .problem__punkt .u3 { margin-bottom: 0.4em; } .problem__punkt p { color: var(--tinte-weich); font-size: 1.0625rem; } /* ---------- Beispiele: drei Fenster ---------- */ /* Die drei Fenster sind das Beweisstueck der Seite. Deshalb bekommt dieser Abschnitt mehr Breite als der Rest (1400 statt 1200) und die Bildflaeche das hoehere Format 4:3. */ #beispiele .halter { max-width: 1400px; } #beispiele .halter > *:not(.fenster__raster):not(.knopfzeile--mitte) { padding-inline: clamp(0px, (100vw - var(--inhalt)) / 2, 100px); } #beispiele .vorspann { color: var(--auf-dunkel-weich); } .fenster__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.8vw, 40px); margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--dunkel-linie); } /* 3.17.0: Auf /beispiele/ stehen alle vier Referenzen. Vier Karten in einem Dreierraster liessen die letzte allein in einer zweiten Reihe stehen — deshalb bekommt die Reihe eine vierte Spalte, sobald es eine vierte Karte gibt. Die Startseite mit ihren drei Karten bleibt dadurch unberuehrt. Gezaehlt wird am Kind, nicht am Elternteil: eine Elementor-Huelle dazwischen wuerde eine Geschwisterregel brechen, `:has(> …)` nicht. */ .fenster__raster:has(> .fenster:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } /* Auf /beispiele/ steht die Kartenreihe in einem Halter ohne Ueberschrift — dort gilt sonst die Textbreite (1200 px), und vier Karten waeren nur 246 px breit. Derselbe breite Halter wie auf der Startseite macht rund 305 px daraus. 3.18.1: Die Regel haengt an der ANZAHL der Karten, nicht an der Nachbarschaft der Reihe. Der erste Anlauf (`.fenster__raster:only-child`) griff nie, weil `main.js` die Wischpunkte direkt hinter die Reihe haengt — sie ist damit nie das einzige Kind. Ein Halter mit drei Karten (Startseite) bleibt unberuehrt; dort macht ohnehin schon `#beispiele .halter` die Breite. */ .halter:has(> .fenster__raster > .fenster:nth-child(4)) { max-width: 1400px; } /* 3.22.0: Mit der Dachdeckerseite sind es fuenf. Fuenf in eine Reihe zu zwingen hiesse 256 px je Karte — auf einem 4:3-Fenster erkennt man von einer Startseite dann nichts mehr. Also zurueck ins Dreierraster: die Karten werden mit rund 380 px sogar breiter als im Viererraster, und die zweite Reihe traegt zwei. Beide Regeln stehen NACH denen fuer vier, sonst gewaenne die Viererfassung (gleiche Spezifitaet, spaeter zaehlt). */ .fenster__raster:has(> .fenster:nth-child(5)) { grid-template-columns: repeat(3, 1fr); } .halter:has(> .fenster__raster > .fenster:nth-child(5)) { max-width: var(--inhalt); } /* Kaeme in diesem Halter spaeter doch Text dazu (Ueberschrift im Widget einschalten), soll er nicht auf 1400 px auseinanderlaufen — dieselbe Ausgleichsregel wie auf der Startseite. */ .halter:has(> .fenster__raster > .fenster:nth-child(4)) > *:not(.fenster__raster):not(.knopfzeile--mitte):not(.wischpunkte) { padding-inline: clamp(0px, (100vw - var(--inhalt)) / 2, 100px); } .fenster__raster:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .fenster { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--auf-dunkel); } /* 2.6.0: die Karte traegt die lange Aufnahme der ganzen Seite (*-lang.jpg). In Ruhe sieht man den Anfang; faehrt die Maus darueber, hebt sich die Karte staerker und die Seite rollt in sieben Sekunden bis zum Fuss durch, beim Verlassen kommt sie zuegig zurueck. Der Laufweg ist Bildhoehe minus Kartenhoehe (100cqh), deshalb ist die Flaeche ein Groessencontainer. */ .fenster__flaeche { position: relative; /* 3.8.0: Anker fuer das Kennzeichen (.fenster__art) */ display: block; aspect-ratio: 4 / 3; overflow: hidden; container-type: size; border: 1px solid var(--dunkel-linie); border-radius: var(--radius-karte); background: var(--dunkel-flaeche); transition: transform var(--dauer) var(--gang), border-color var(--dauer) var(--gang), box-shadow var(--dauer) var(--gang); } .fenster__flaeche img { width: 100%; height: auto; display: block; transform: translateY(0); transition: transform 0.9s var(--weich); } .fenster:hover .fenster__flaeche, .fenster:focus-visible .fenster__flaeche { transform: translateY(-8px) scale(1.025); border-color: rgba(143, 154, 255, 0.75); box-shadow: 0 0 0 4px rgba(143, 154, 255, 0.22), 0 36px 74px -26px rgba(0, 0, 0, 0.9); } .fenster:hover .fenster__flaeche img, .fenster:focus-visible .fenster__flaeche img { transform: translateY(calc(100cqh - 100%)); /* 2.7.0: ein Verlauf, der sofort Fahrt aufnimmt (vorher stand das Bild in der ersten Sekunde fast still). 3.17.0 (Wunsch des Inhabers): acht statt sechs Sekunden — man soll im Vorbeifahren lesen koennen, was auf der Seite steht, nicht nur sehen, dass sich etwas bewegt. */ transition: transform 8s cubic-bezier(0.3, 0.25, 0.3, 1); } /* 2.8.0: die Trainer-Seite rollt etwas ruhiger. */ .fenster--ruhig:hover .fenster__flaeche img, .fenster--ruhig:focus-visible .fenster__flaeche img { transition-duration: 9s; } /* 2.11.0 (Wunsch des Inhabers): Am Handy und am Tablet gibt es keinen Mauszeiger — dort stand in der Karte nur ein Standbild, und der Besucher konnte nicht wissen, dass die Seite durchrollt. Deshalb laeuft die Karte, die man gerade vor sich hat, dort von allein: hinunter bis zum Fuss, kurz stehen, zurueck nach oben, kurz stehen, wieder von vorn. Angestossen wird das nicht von der Zeit, sondern vom Blick: main.js setzt .ist-vorfuehrung erst, wenn die Reihe im Bild ist, und nimmt es wieder ab, sobald sie es verlaesst. Ohne Bewegungswunsch passiert nichts (main.js prueft das). Die Laufweite ist wie beim Hover Bildhoehe minus Kartenhoehe (100cqh). */ /* 3.17.0: 14 statt 11 Sekunden, passend zum langsameren Hover am Rechner. */ .fenster.ist-vorfuehrung .fenster__flaeche img { animation: fenster-lauf var(--lauf-dauer, 14s) var(--lauf-versatz, 0s) infinite; } @keyframes fenster-lauf { 0%, 7% { transform: translateY(0); animation-timing-function: cubic-bezier(0.42, 0.05, 0.5, 1); } 64%, 76% { transform: translateY(calc(100cqh - 100%)); animation-timing-function: cubic-bezier(0.5, 0.05, 0.42, 1); } 93%, 100% { transform: translateY(0); } } .fenster--ruhig.ist-vorfuehrung .fenster__flaeche img { --lauf-dauer: 15.5s; } @media (prefers-reduced-motion: reduce) { .fenster:hover .fenster__flaeche img, .fenster:focus-visible .fenster__flaeche img { transform: none; } .fenster.ist-vorfuehrung .fenster__flaeche img { animation: none; } } .fenster__fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dunkel-linie); } .fenster__text { min-width: 0; } .fenster__titel { display: block; font-size: 1.3125rem; font-weight: 700; line-height: 1.25; } .fenster__daten { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 0.84375rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--auf-dunkel-weich); } .fenster__weg { color: #8f9aff; } /* 3.8.0: Kennzeichen auf der Karte — „Kundenprojekt" oder „Musterseite". Es liegt auf der Bildflaeche, damit es beim Durchrollen sichtbar bleibt und der Fuss (Titel, Daten, Pfeil) nicht enger wird. Das Kundenprojekt traegt Ultramarin, die Musterseiten eine gedeckte Navy-Pille: der Blick soll zuerst auf die echte Referenz fallen. */ .fenster__art { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; border-radius: var(--radius-pille); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.4; background: rgba(13, 17, 48, 0.82); color: #dfe3f5; border: 1px solid rgba(255, 255, 255, 0.24); } .fenster__art--kunde { background: var(--signal); color: #fff; border-color: transparent; } .fenster__pfeil { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--dunkel-linie); color: var(--auf-dunkel); transition: background-color var(--dauer) var(--gang), border-color var(--dauer) var(--gang), color var(--dauer) var(--gang); } .fenster:hover .fenster__pfeil { background: var(--signal); border-color: var(--signal); color: #fff; } #beispiele .knopfzeile--mitte { margin-top: 3rem; } /* ---------- Angebot ---------- */ .angebot__raster { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hakenliste { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 20px; } .hakenliste li { display: flex; gap: 14px; } .hakenliste svg { flex: none; margin-top: 3px; color: var(--signal); } .hakenliste b { display: block; font-size: 1.125rem; font-weight: 650; } .hakenliste span { color: var(--tinte-weich); font-size: 1.0625rem; } .angebot__handy { justify-self: center; width: min(300px, 80%); margin: 0; } .angebot__handy .rahmen { border-radius: 34px; border: 6px solid var(--tinte); overflow: hidden; background: #fff; box-shadow: 0 28px 64px -26px rgba(23, 24, 28, 0.4); } .angebot__handy img { aspect-ratio: 39 / 78; height: auto; object-fit: cover; object-position: top; } .angebot__handy figcaption { text-align: center; color: var(--tinte-weich); font-size: 0.9375rem; margin-top: 14px; } /* ---------- Ablauf: vier Schritte nebeneinander ---------- Vier offene Schritte auf einem leicht blau getoenten Band, jeder mit grosser Ziffer, Titel und Text. Darueber liegt eine Schiene, auf der je Schritt ein blauer Balken ausfaehrt. Jede Stufe traegt --t von 0 bis 1: main.js rechnet den Wert aus dem geglaetteten Scrollweg, das Stylesheet macht daraus Balkenlaenge, Ziffernfarbe und Einblendung. Nicht gepinnt (Handy, flache Fenster) springt --t auf 1 und die Uebergaenge hier erledigen die Bewegung. */ .abschnitt--ablauf { background: var(--signal-hell); } .ablauf__kopf { max-width: 760px; } .ablauf__reihe { position: relative; list-style: none; margin: clamp(2.75rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 810px) and (max-width: 1179.98px) { .ablauf__reihe { grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 56px; } } @media (min-width: 1180px) { .ablauf__reihe { grid-template-columns: repeat(4, 1fr); gap: 36px; } .ablauf__reihe::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--signal-linie); pointer-events: none; } } .schritt { position: relative; margin: 0; min-width: 0; --t: 0; } .schritt::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--signal); transform: scaleX(var(--t)); transform-origin: left center; transition: transform 1100ms var(--weich); } .schritt__nr { display: block; margin-top: clamp(20px, 2.2vw, 28px); font-size: clamp(54px, 5.6vw, 78px); font-weight: 780; line-height: 0.86; letter-spacing: -0.035em; font-variant-numeric: lining-nums tabular-nums; color: var(--signal-linie); transition: color 900ms var(--weich); } .schritt.erreicht .schritt__nr { color: var(--signal); } /* Titel und Text liegen im Fluss und sind nur durchsichtig: ihr Platz steht von Anfang an, beim Erscheinen springt nichts. */ .schritt__titel { margin-top: 18px; color: var(--tinte); opacity: calc(0.001 + var(--t) * 0.999); transform: translateY(calc((1 - var(--t)) * 10px)); transition: opacity 900ms var(--weich), transform 900ms var(--weich); } @media (min-width: 810px) { .schritt__titel { min-height: 2.6em; } } .schritt p { margin: 10px 0 0; color: var(--tinte-mittel); font-size: 1.0625rem; line-height: 1.55; } .schritt p[data-stufe] { --t: 0; opacity: calc(0.001 + var(--t) * 0.999); transform: translateY(calc((1 - var(--t)) * 8px)); transition: opacity 900ms var(--weich), transform 900ms var(--weich); } /* Gepinnt kommt die Bewegung aus dem geglaetteten Scrollweg; die Uebergaenge hier duerfen dann nur noch nachziehen, sonst hinken sie eine Sekunde hinterher. */ .ist-gepinnt .schritt::before, .ist-gepinnt .schritt__titel, .ist-gepinnt .schritt p[data-stufe] { transition-duration: 220ms; transition-timing-function: linear; } .ist-gepinnt .schritt__nr { transition-duration: 600ms; } .ablauf__reihe + .knopfzeile { margin-top: 2.75rem; } /* ---------- Abschnitt festhalten, waehrend die Stufen erscheinen ---------- Kein Eingriff in das Scrollen selbst: die Seite scrollt ganz normal weiter, der Abschnitt bleibt darin nur stehen (position: sticky), bis seine Strecke abgefahren ist. pin-bahn und pin-halt liegen ohne Wirkung im Markup; erst wenn JavaScript ist-gepinnt setzt — und das tut es nur, wenn der Inhalt nachweislich in einen Bildschirm passt — greifen die Regeln hier. */ .pin-bahn { position: relative; } .ist-gepinnt { padding-block: 0; overflow: visible; } .ist-gepinnt .pin-halt { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-top: 96px; padding-bottom: 40px; box-sizing: border-box; } .ist-gepinnt .pin-halt > .halter { width: 100%; } /* Waehrend des Festhaltens zaehlt jeder Pixel Hoehe: gedrungenere Fassung. */ .ist-gepinnt .u2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); } .ist-gepinnt .ablauf__kopf .vorspann { font-size: 1.0625rem; margin-top: 0.6em; } .ist-gepinnt .ablauf__reihe { margin-top: 2.5rem; } .ist-gepinnt .schritt__nr { margin-top: 18px; font-size: clamp(46px, 4.6vw, 64px); } .ist-gepinnt .schritt__titel { margin-top: 14px; } .ist-gepinnt .ablauf__reihe + .knopfzeile { margin-top: 1.75rem; } /* Flache Fenster (Laptop mit Browserleiste, rund 650 bis 780 px): noch knapper, damit der Abschnitt trotzdem festgehalten werden kann. main.js setzt ist-flach vor dem Messen. */ .ist-gepinnt.ist-flach .pin-halt { padding-top: 84px; padding-bottom: 28px; } .ist-gepinnt.ist-flach .ueberzeile { margin-bottom: 0.5em; font-size: 0.9375rem; } .ist-gepinnt.ist-flach .u2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); } .ist-gepinnt.ist-flach .ablauf__kopf .vorspann { display: none; } .ist-gepinnt.ist-flach .ablauf__reihe { margin-top: 1.5rem; gap: 28px; } .ist-gepinnt.ist-flach .schritt__nr { margin-top: 12px; font-size: 40px; } .ist-gepinnt.ist-flach .schritt__titel { margin-top: 10px; font-size: 1.0625rem; min-height: 0; } .ist-gepinnt.ist-flach .schritt p { font-size: 0.9375rem; line-height: 1.45; margin-top: 6px; } .ist-gepinnt.ist-flach .ablauf__reihe + .knopfzeile { margin-top: 1.25rem; } .ist-gepinnt.ist-flach .knopfzeile .knopf { min-height: 46px; padding: 10px 22px; font-size: 1rem; } /* Sehr flache Fenster (unter 600 px, etwa 1366er-Laptop mit 125 % Zoom): noch enger. */ .ist-gepinnt.ist-sehr-flach .pin-halt { padding-top: 76px; padding-bottom: 20px; } .ist-gepinnt.ist-sehr-flach .ablauf__reihe { margin-top: 1rem; } .ist-gepinnt.ist-sehr-flach .schritt__nr { margin-top: 8px; font-size: 34px; } .ist-gepinnt.ist-sehr-flach .schritt p { font-size: 0.875rem; line-height: 1.4; } .ist-gepinnt.ist-sehr-flach .ablauf__reihe + .knopfzeile { margin-top: 0.9rem; } /* Zwischen 900 und 1180 px stehen die Schritte sonst zu zweit untereinander und der Abschnitt wird zu hoch fuer den Pin (z. B. 1366er-Laptop mit 125 % Zoom: 1093 x 525). Festgehalten stehen sie deshalb auch hier zu viert. */ @media (min-width: 900px) and (max-width: 1179.98px) { .ist-gepinnt .ablauf__reihe { grid-template-columns: repeat(4, 1fr); gap: 24px; row-gap: 24px; } .ist-gepinnt .ablauf__reihe::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--signal-linie); pointer-events: none; } .ist-gepinnt .schritt__nr { font-size: 44px; } .ist-gepinnt .schritt__titel { font-size: 1.0625rem; min-height: 0; } .ist-gepinnt .schritt p { font-size: 0.9375rem; line-height: 1.45; } } @media (prefers-reduced-motion: reduce) { .schritt, .schritt p[data-stufe] { --t: 1 !important; } .schritt::before, .schritt__nr, .schritt__titel, .schritt p[data-stufe] { transition: none !important; } .schritt__nr { color: var(--signal); } } /* 3.13.0: Der Beleg im Angebot. Solange es keine Kundenstimmen gibt, ist eine nachpruefbare Messung der einzige Beweis, den niemand behaupten muss — und der zugleich zeigt, was der Kunde bekommt (schnelle Seite, keine fremden Dienste). Ruhig getont wie der Betreuungskasten, damit er als Beleg liest und nicht als Werbeversprechen. Leeres Feld = ganzer Kasten weg. */ .angebot__beleg { margin-top: 1.75rem; padding: 14px 18px; background: var(--signal-hell); border: 1px solid var(--signal-linie); border-radius: var(--radius-feld); font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-mittel); } .angebot__beleg a { color: var(--signal); font-weight: 600; } .angebot__beleg + .knopfzeile { margin-top: 1.75rem; } /* 3.13.0: Platz fuer einen Satz des Kunden an der Referenzkarte. Es gibt noch keinen — das Feld steht leer im Widget, und „leer heisst weg“ sorgt dafuer, dass hier nichts erscheint, solange nichts eingetragen ist. Der Inhaber kann den Satz spaeter allein in Elementor nachtragen, ohne dass jemand Code anfassen muss. Die Karte ist ein , deshalb Spans statt
. */ .fenster__zitat { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dunkel-linie); } .fenster__zitat-text { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--auf-dunkel); } .fenster__zitat-von { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--auf-dunkel-weich); } /* Dieselbe Stimme, ausfuehrlich, auf /beispiele/ — dort ist es ein echtes
, weil der Textblock kein Link ist. */ .referenz__zitat { margin: 1.25rem 0 0; padding-left: 16px; border-left: 3px solid var(--signal); } .referenz__zitat blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tinte); } .referenz__zitat figcaption { margin-top: 6px; font-size: 0.9375rem; color: var(--tinte-weich); } /* ---------- Preise ---------- */ .preise__kopf { text-align: center; max-width: 60ch; margin-inline: auto; } .preise__kopf .vorspann { margin-inline: auto; } /* 3.13.0: Die drei Zahlen im Klartext — nur am Handy und Tablet. Dort stehen die Pakete in einer Wischreihe, die bewusst in der MITTE beginnt („Anfragen und Bewerber“). Wer nicht wischt, sieht den Einstiegspreis nie und haelt den mittleren fuer den kleinsten — bei jemandem, der Preise vergleicht, ein Grund abzuspringen. Diese Zeile nennt alle drei, bevor die Reihe beginnt. Am Rechner waere sie ueberfluessig: dort stehen die Karten nebeneinander. */ .preise__spanne { display: none; } /* 3.9.0: Startphase-Band (Nachlass fuer die ersten Kunden). Steht ueber der Preistafel auf /preise/ und kompakt auf der Startseite; geschaltet wird es in inc/preise.json, nicht hier. Dieselbe Tonung wie der Betreuungskasten, damit es als Hinweis liest und nicht als vierte Karte. */ .startphase { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 860px; margin: 0 auto 2.25rem; background: var(--signal-hell); border: 1px solid var(--signal-linie); border-radius: var(--radius-karte); padding: 16px 22px; } .preise__kopf + .startphase { margin-top: 2.5rem; } .startphase__marke { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--signal); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pille); padding: 6px 13px; } .startphase p { margin: 0; flex: 1 1 32ch; color: var(--tinte-mittel); font-size: 1rem; line-height: 1.5; } .startphase--kurz { margin-bottom: 0; } .startphase--kurz + .preise__kurz { margin-top: 2.25rem; } .preise__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; align-items: stretch; } .paket { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: 34px 30px 32px; } .preise .paket { background: var(--grund); } .paket--betont { background: var(--dunkel) !important; border-color: var(--dunkel); color: var(--auf-dunkel); box-shadow: 0 30px 62px -30px rgba(23, 24, 28, 0.55); } .paket__zeichen { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--signal); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pille); padding: 7px 16px; } .paket__name { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } /* 3.9.0: „Für wen“ ist ein Einzeiler wie auf der Startseite, der Preis rueckt damit eine Zeilengruppe hoeher ins erste Bild (vorher min-height 5.1em). */ .paket__wofuer { color: var(--tinte-weich); font-size: 1rem; margin-top: 0.8em; min-height: 2.6em; } .paket--betont .paket__wofuer { color: var(--auf-dunkel-weich); } .paket__preis { display: grid; gap: 6px; margin-top: 0.4rem; padding-bottom: 1.7rem; margin-bottom: 1.7rem; border-bottom: 1px solid var(--linie); } .paket--betont .paket__preis { border-bottom-color: var(--dunkel-linie); } .paket__wert { display: flex; align-items: baseline; gap: 7px; } .paket__zahl { font-size: clamp(2.5rem, 4.2vw, 3.25rem); font-weight: 780; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .paket__waehrung { font-size: 1.375rem; font-weight: 700; } .paket__zusatz { font-size: 1rem; font-weight: 500; color: var(--tinte-weich); } .paket__fein { font-size: 0.875rem; color: var(--tinte-weich); } /* 3.9.0: Startphase — der regulaere Preis steht ruhig durchgestrichen unter dem Startphase-Preis; kein Rot, kein Rabatt-Geschrei. */ .paket__regulaer, .kurzpaket__regulaer { font-size: 0.875rem; font-weight: 600; color: var(--tinte-mittel); } .paket__regulaer s, .kurzpaket__regulaer s { text-decoration-thickness: 1.5px; text-decoration-color: var(--signal); font-weight: 700; color: var(--tinte); } .paket--betont .paket__regulaer, .kurzpaket--betont .kurzpaket__regulaer { color: var(--auf-dunkel-weich); } .paket--betont .paket__regulaer s, .kurzpaket--betont .kurzpaket__regulaer s { color: #fff; text-decoration-color: #8f9aff; } .paket--betont .paket__zusatz, .paket--betont .paket__fein { color: var(--auf-dunkel-weich); } /* 3.9.0: Der Knopf sagt jetzt "Kostenlosen Entwurf anfragen" (Sache mit Preisschild statt reinem Verb). Damit das in einer Zeile bleibt, ist er etwas enger gesetzt; zwischen 860 und 1100 px, wo die drei Karten am schmalsten sind, noch einmal eine Stufe kleiner. */ .paket__cta { width: 100%; padding-inline: 14px; font-size: 1rem; } @media (min-width: 860.02px) and (max-width: 1100px) { /* Kein nowrap: das machte die Karte mindestens 308 px breit, und das Dreierraster lief bei 900 px ueber den rechten Rand (gemessen 19.8.2026). */ .preise__raster { gap: 16px; } .paket { padding-inline: 22px; } .paket__cta { font-size: 0.875rem; padding-inline: 10px; } } .paket--betont .knopf--dunkel { background: rgba(255, 255, 255, 0.14); } .paket__leistungen { list-style: none; margin: 1.7rem 0 0; padding: 0; display: grid; gap: 13px; flex: 1; align-content: start; } .paket__leistungen li { display: flex; gap: 11px; font-size: 1rem; line-height: 1.45; } .paket__grund { font-weight: 650; padding-bottom: 13px; border-bottom: 1px solid var(--linie); } .paket--betont .paket__grund { border-bottom-color: var(--dunkel-linie); } .paket__haken { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--signal); } .paket--betont .paket__haken { background: rgba(255, 255, 255, 0.16); color: #fff; } /* 3.9.0: statt Umschalter und Hinweissatz eine Zeile unter der Tafel. */ .preise__netto { margin: 1.6rem auto 0; max-width: 76ch; text-align: center; font-size: 0.9375rem; color: var(--tinte-weich); } /* 3.9.0: Vergleichstabelle auf /preise/. Die Karten sind kumulativ, die Tabelle zeigt jedes Paket vollstaendig. Am Handy rollt sie in .vergleich__rollen, die Zeilenkoepfe bleiben links stehen; die Seite selbst rollt nie seitwaerts. */ .vergleich .preise__kopf { margin-bottom: 2.25rem; } /* contain: paint am Rollkasten: Ohne das rechnet Chrome in der Handy-Emulation die 700 px der Tabelle in die Seitenbreite ein, sobald der Abschnitt eingeblendet ist (Reveal ohne transform), und zoomt die ganze Seite auf 598 statt 390 px heraus, obwohl der Kasten sie laengst einrollt. Ein eigener Malkontext (contain: paint, ebenso transform) stoppt das; die klebende erste Spalte haengt weiter an diesem Kasten. Gemessen im echten Chrome am 19.8.2026, vor/nach dem Scrollen. */ .vergleich__rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; border: 1px solid var(--linie); border-radius: var(--radius-karte); background: var(--flaeche); } .vergleich__tabelle { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 0.9875rem; } .vergleich__tabelle th, .vergleich__tabelle td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); } .vergleich__tabelle tbody tr:last-child th, .vergleich__tabelle tbody tr:last-child td { border-bottom: 0; } .vergleich__tabelle thead th { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-block: 16px; border-bottom-color: var(--linie-stark); } .vergleich__tabelle thead th.ist-betont { color: var(--signal); } .vergleich__empfehlung { display: block; margin-top: 4px; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--tinte-weich); } .vergleich__tabelle tbody th { font-weight: 600; color: var(--tinte); width: 30%; } .vergleich__tabelle td { color: var(--tinte-mittel); } .vergleich__tabelle th:first-child, .vergleich__tabelle td:first-child { position: sticky; left: 0; background: var(--flaeche); box-shadow: 1px 0 0 var(--linie); } .vergleich__tabelle thead th:first-child { z-index: 1; } .vergleich__ja { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: -5px; background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--signal); } .vergleich__nein { color: var(--linie-stark); font-weight: 700; } .vergleich__preis th, .vergleich__preis td { border-top: 1px solid var(--linie-stark); padding-top: 16px; } .vergleich__preis b { font-size: 1.25rem; font-weight: 750; color: var(--tinte); } .vergleich__preis small { font-size: 0.8125rem; color: var(--tinte-weich); } /* ---------- Am Handy: ein Paket zur Zeit statt seitwaerts wischen (3.12.0) ---------- Vorher stand hier dieselbe Tabelle mit 640 px Mindestbreite in einem Rollkasten. Am 390-px-Handy blieb neben der klebenden ersten Spalte knapp eine Paketspalte uebrig: Wer vergleichen wollte, musste in jeder Zeile hin- und herwischen und verlor dabei die Zeile. Jetzt waehlt man oben ein Paket und liest darunter eine ganz normale Liste — Leistung links, Wert rechts, ueber die volle Breite. Die Wahl laeuft ueber drei Radios und reines CSS: kein JavaScript, also bleibt auch dann nichts leer, wenn ein Skript nicht laedt. Am Rechner aendert sich nichts — Radios und Knoepfe stehen auf display:none, die Tabelle bleibt Tabelle. */ .vergleich__tafel { position: relative; } .vergleich__radio, .vergleich__wahl { display: none; } @media (max-width: 860px) { /* Das Radio bleibt bedienbar (Tastatur, Vorleseprogramm), nur unsichtbar. */ .vergleich__radio { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .vergleich__wahl { display: block; margin-bottom: 14px; } .vergleich__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vergleich__knopf { display: flex; flex-direction: column; gap: 3px; padding: 11px 10px 12px; min-height: 44px; cursor: pointer; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-feld); transition: background-color var(--dauer) var(--gang), border-color var(--dauer) var(--gang); } .vergleich__knopf-name { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--tinte); } .vergleich__knopf-preis { font-size: 0.8125rem; color: var(--tinte-weich); } .vergleich__knopf-marke { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); } .vergleich__radio:nth-of-type(1):checked ~ .vergleich__wahl .vergleich__knopf:nth-child(1), .vergleich__radio:nth-of-type(2):checked ~ .vergleich__wahl .vergleich__knopf:nth-child(2), .vergleich__radio:nth-of-type(3):checked ~ .vergleich__wahl .vergleich__knopf:nth-child(3) { background: var(--signal-hell); border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); } /* Das Radio ist unsichtbar, sein Fokusring waere es auch — er gehoert an den Knopf. */ .vergleich__radio:nth-of-type(1):focus-visible ~ .vergleich__wahl .vergleich__knopf:nth-child(1), .vergleich__radio:nth-of-type(2):focus-visible ~ .vergleich__wahl .vergleich__knopf:nth-child(2), .vergleich__radio:nth-of-type(3):focus-visible ~ .vergleich__wahl .vergleich__knopf:nth-child(3) { outline: 3px solid var(--signal); outline-offset: 3px; } /* Aus der Tabelle wird eine Liste: je Zeile die Leistung links, der Wert rechts. */ .vergleich__rollen { overflow: visible; } .vergleich__tabelle { display: block; width: 100%; min-width: 0; font-size: 1rem; } .vergleich__tabelle thead { display: none; } .vergleich__tabelle tbody { display: block; } .vergleich__tabelle tr { display: grid; grid-template-columns: minmax(42%, 1fr) minmax(0, auto); gap: 2px 18px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--linie); } .vergleich__tabelle tbody tr:last-child { border-bottom: 0; } .vergleich__tabelle th, .vergleich__tabelle td { display: block; padding: 0; border: 0; } .vergleich__tabelle tbody th, .vergleich__tabelle th:first-child { position: static; width: auto; font-size: 1rem; background: none; box-shadow: none; } /* Sichtbar ist nur die Spalte des gewaehlten Pakets. */ .vergleich__tabelle td { display: none; text-align: right; } .vergleich__radio:nth-of-type(1):checked ~ .vergleich__rollen .vergleich__tabelle td:nth-of-type(1), .vergleich__radio:nth-of-type(2):checked ~ .vergleich__rollen .vergleich__tabelle td:nth-of-type(2), .vergleich__radio:nth-of-type(3):checked ~ .vergleich__rollen .vergleich__tabelle td:nth-of-type(3) { display: block; } .vergleich__preis { border-top: 1px solid var(--linie-stark); } .vergleich__preis th, .vergleich__preis td { border-top: 0; padding-top: 0; } } .vergleich .knopfzeile--mitte { margin-top: 2.25rem; } /* Nur fuer Vorleseprogramme (Tabellenzellen „enthalten“ / „nicht enthalten“). */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .betreuung { max-width: 860px; margin: 2.75rem auto 0; background: var(--signal-hell); border: 1px solid var(--signal-linie); border-radius: var(--radius-karte); padding: 26px 30px; } .betreuung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 0.5em; } .betreuung__titel { font-size: 1.25rem; font-weight: 700; } .betreuung__preis { font-size: 1.25rem; font-weight: 750; } .betreuung p { color: var(--tinte-weich); font-size: 1rem; } /* 3.4.0: Die Betreuung ist ein Zusatz, kein Teil des Festpreises. Ohne dieses Schild las sich der Kasten wie eine vierte Pflichtzeile unter den Paketen — dieselbe Pille wie „Meine Empfehlung“, nur klein und neben dem Titel. */ .betreuung__marke { display: inline-block; margin-left: 9px; vertical-align: 2px; background: var(--signal); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pille); padding: 4px 10px; } /* 3.3.0: Auf der Startseite steht derselbe Kasten kompakter — er ergaenzt dort die drei Kurzkarten, statt wie auf /preise/ ein eigener Abschnitt zu sein. */ .betreuung--kurz { margin-top: 2rem; padding: 20px 24px; } .betreuung--kurz .betreuung__titel, .betreuung--kurz .betreuung__preis { font-size: 1.125rem; } .betreuung--kurz p { font-size: 0.9375rem; } .preise__fuss { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2rem; text-align: center; color: var(--tinte-weich); font-size: 0.9375rem; } .preise__fuss svg { flex: none; color: var(--signal); } .preise__individuell { margin-top: 0.9rem; text-align: center; color: var(--tinte-weich); font-size: 1rem; } /* 3.2.1: auf /preise/ faellt der Fusssatz weg, dann steht der Satz direkt unter dem Betreuungskasten und braucht den Abstand, den vorher der Fusssatz hielt. */ .betreuung + .preise__individuell { margin-top: 2rem; } .preise__individuell a { color: var(--signal); font-weight: 650; text-decoration: none; } .preise__individuell a:hover { text-decoration: underline; } /* Preise, kurz (Startseite): drei anklickbare Karten. Seit 2.7.0 nur noch Name, fuer wen, Preis und eine Zeile Umfang; die fuenf Vorteile je Paket stehen auf /preise/, jede Karte fuehrt dorthin. */ .preise__kurz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.75rem; } .kurzpaket { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: 30px 28px 26px; transition: transform var(--dauer) var(--gang), box-shadow var(--dauer) var(--gang), border-color var(--dauer) var(--gang); } .kurzpaket:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(13, 17, 48, 0.4); border-color: var(--signal-linie); } .kurzpaket--betont { background: var(--dunkel); border-color: var(--dunkel); color: var(--auf-dunkel); } .kurzpaket__wofuer { color: var(--tinte-weich); font-size: 1rem; min-height: 2.6em; } .kurzpaket--betont .kurzpaket__wofuer { color: var(--auf-dunkel-weich); } .kurzpaket__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; font-size: 1rem; color: var(--tinte-weich); } .kurzpaket__preis b { font-size: 2.125rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1; color: var(--tinte); } .kurzpaket--betont .kurzpaket__preis { color: var(--auf-dunkel-weich); } .kurzpaket--betont .kurzpaket__preis b { color: #fff; } .kurzpaket__preis span { flex-basis: 100%; font-size: 0.9375rem; } .kurzpaket__preis .kurzpaket__regulaer { font-size: 0.875rem; margin-top: 2px; } .kurzpaket__umfang { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 0.9375rem; line-height: 1.5; color: var(--tinte-mittel); flex: 1; } .kurzpaket--betont .kurzpaket__umfang { border-top-color: var(--dunkel-linie); color: var(--auf-dunkel-weich); } .kurzpaket__mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.9375rem; font-weight: 650; color: var(--signal); transition: gap var(--dauer) var(--gang); } .kurzpaket--betont .kurzpaket__mehr { color: #8f9aff; } .kurzpaket:hover .kurzpaket__mehr { gap: 10px; } #preise .knopfzeile--mitte { margin-top: 2.25rem; } /* Wischreihen (Referenzen und Preise unter 860 px, 2.10.0): drei Punkte unter der Reihe zeigen, wo man steht, und holen auf Tipp die Karte. main.js legt sie an und blendet sie aus, sobald die Reihe wieder ein Raster ist; sie ersetzen den Satz „Wischen fuer alle drei Pakete“ aus 2.8.0. */ .wischpunkte { display: flex; justify-content: center; gap: 6px; margin: 0.35rem 0 0; } .wischpunkte[hidden] { display: none; } .wischpunkte__punkt { width: 26px; height: 26px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .wischpunkte__punkt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); transition: transform var(--dauer) var(--gang), background-color var(--dauer) var(--gang); } .wischpunkte__punkt.ist-aktiv::before { background: var(--signal); transform: scale(1.35); } .band--dunkel .wischpunkte__punkt::before { background: rgba(255, 255, 255, 0.3); } .band--dunkel .wischpunkte__punkt.ist-aktiv::before { background: #8f9aff; } /* ---------- Person und Zusagen ---------- */ .person__karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .band--weiss .person__karte { background: var(--grund); } .person__karte--kurz { align-items: center; } .person__bild { border-radius: var(--radius-karte); overflow: hidden; } .person__bild img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; } /* 3.2.1: Das Portraet nimmt den Mauszeiger an — ein Hauch Zoom im stehenden Rahmen (der Rahmen schneidet ab, deshalb waechst nur das Bild) und der Hausschatten der Karten. Nur bei echtem Zeiger: am Handy bliebe der Hover-Zustand nach dem Antippen haengen. */ @media (hover: hover) { .person__bild { transition: box-shadow var(--dauer) var(--gang); } .person__bild img { transition: transform 600ms var(--weich); } .person__bild:hover { box-shadow: 0 24px 50px -28px rgba(13, 17, 48, 0.4); } .person__bild:hover img { transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .person__bild, .person__bild img { transition: none; } .person__bild:hover img { transform: none; } } .ehrlich { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.35; font-weight: 650; border-bottom: 1px solid var(--linie); padding-bottom: 1.2em; margin-bottom: 1.2em; } .ehrlich mark { background: none; color: var(--signal); } .person__name { font-weight: 750; font-size: 1.125rem; } /* 3.2.0: Auf der Startseite traegt der Name die Ueberschrift des Abschnitts. Bis 3.1.1 stand darueber der Ehrlichkeitssatz in 26 px und war damit der Kopf der Karte; er steht jetzt nur noch auf /ueber-mich/. Ohne ihn waere der groesste Text der Karte 18 px gewesen — ein Abschnitt ohne Kopf, und der einzige der Startseite ohne

. Kleiner als die uebrigen Abschnitts- ueberschriften bleibt er trotzdem: Er steht in einer Karte, nicht auf der ganzen Breite. */ .person__karte .u2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; } .person__karte .u2 + .person__rolle { margin-top: 0.45em; } .person__rolle { color: var(--tinte-weich); font-size: 1rem; } .person__text { margin-top: 1em; color: var(--tinte-weich); } .person__rolle + .person__text { margin-top: 1.4em; } /* Der erste Absatz steht etwas groesser und in voller Tinte: Er sagt, worum es geht, und traegt den Block aus mehreren Absaetzen an. */ .person__text--lead { font-size: 1.0625rem; color: var(--tinte); } .person__direkt { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 1.6rem; } .person__direkt .hinweis { color: var(--tinte-weich); font-size: 0.9375rem; } .zusagen { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; grid-column: 1 / -1; } .zusagen li { border-top: 2px solid var(--signal); padding-top: 16px; } .zusagen b { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.35em; } .zusagen p { color: var(--tinte-weich); font-size: 0.9875rem; margin: 0; } /* ---------- Fragen ---------- */ .fragen__liste { max-width: 820px; margin-top: 2.25rem; } .fragen__liste--breit { max-width: 860px; margin-top: 0; } .fragen__gruppe { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 2.75rem 0 0.5rem; } .fragen__gruppe:first-child { margin-top: 0; } .frage { border-bottom: 1px solid var(--linie); } .frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; padding: 20px 4px; font-weight: 650; font-size: 1.125rem; } .frage summary::-webkit-details-marker { display: none; } .frage summary svg { flex: none; transition: transform var(--dauer) var(--gang); color: var(--tinte-weich); } .frage[open] summary svg { transform: rotate(45deg); color: var(--signal); } .frage__korpus { overflow: hidden; } .frage__korpus > div { padding: 0 4px 22px; color: var(--tinte-mittel); max-width: 65ch; } .fragen__mehr { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; } .fragen__mehr p { margin: 0; color: var(--tinte-weich); } /* ---------- Anfrage (Startseite unten und /anfrage/) ---------- */ .band--dunkel { background: var(--dunkel); color: var(--auf-dunkel); } .band--dunkel .vorspann { color: var(--auf-dunkel-weich); } .anfrage__raster { display: grid; gap: clamp(2rem, 5vw, 4.75rem); align-items: start; } @media (min-width: 900px) { /* 2.8.0: Kopf und Rest links untereinander, das Foto rechts ueber beide Zeilen. */ .anfrage__raster { grid-template-columns: 1.1fr 0.82fr; grid-template-rows: auto 1fr; row-gap: 0; } .anfrage__kopf { grid-column: 1; grid-row: 1; } .anfrage__rest { grid-column: 1; grid-row: 2; } .anfrage__bild { grid-column: 2; grid-row: 1 / span 2; } } /* WebKit-Falle: ein Rasterfeld mit Bild zieht in Safari die ganze Spur auf die Eigenbreite des Bildes auf und schneidet den Text daneben ab. */ .anfrage__raster > * { min-width: 0; } .anfrage__spalte { max-width: 640px; } .anfrage-seite .abschnitt { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .schnellwahl { display: flex; flex-direction: column; gap: 12px; margin-top: 2.125rem; } .schnellwahl a { text-decoration: none; color: var(--auf-dunkel); } .schnellwahl__whatsapp { display: flex; align-items: center; gap: 14px; padding: 16px 22px; min-height: 44px; background: #146237; border-radius: var(--radius-karte); color: #fff; transition: background-color var(--dauer) var(--gang); } .schnellwahl__whatsapp:hover { background: #0e4a29; } .schnellwahl__kreis { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); color: #fff; } .schnellwahl__stapel { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .schnellwahl__stapel--mitte { align-items: center; } .schnellwahl__wort { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; } .schnellwahl__nummer { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; } .schnellwahl__zusatz { font-size: 0.875rem; line-height: 1.35; color: var(--auf-dunkel-weich); } .schnellwahl__whatsapp .schnellwahl__zusatz { color: #fff; } .schnellwahl__weg { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; min-height: 44px; border: 1px solid var(--dunkel-linie); border-radius: var(--radius-karte); font-weight: 700; font-size: 1rem; white-space: nowrap; transition: background-color var(--dauer) var(--gang); } .schnellwahl__weg--zweizeilig { white-space: normal; } .schnellwahl__weg:hover { background: rgba(255, 255, 255, 0.08); } .schnellwahl__weg > svg { flex: none; color: #8f9aff; } /* ---------- Die Anfragekarte und ihre Rueckseite (3.25.0) ---------- Der Kasten ist eine Karte mit zwei Seiten: vorn das Formular, hinten die Bestaetigung. Gedreht wird der KASTEN, nicht sein Inhalt — so wandert der Hintergrund mit, statt dass sich Text in einem stehenden Rahmen umklappt. Beide Seiten liegen im selben Rasterfeld (grid-area 1/1). Das hat einen Grund, der wichtiger ist als er klingt: der Kasten ist damit immer so hoch wie die HOEHERE der beiden Seiten. Wuerde er beim Umdrehen auf die Hoehe der kuerzeren Rueckseite schrumpfen, ruckte alles darunter nach oben — und wenn die Seite dabei kuerzer wird als die Rollposition erlaubt, springt der Browser. Genau diesen Sprung sollte der Umbau ja abschaffen. `perspective` steht in der transform-Kette der gedrehten Fassung und nicht als eigene Eigenschaft am Elternteil: sonst braeuchte es eine zusaetzliche Huelle, deren Fluchtpunkt in der Spaltenmitte laege statt in der Kartenmitte. -webkit-backface-visibility bleibt stehen: aeltere WebKit-Fassungen kennen die Eigenschaft nur mit Praefix und zeigen sonst BEIDE Seiten uebereinander. */ .formular__kasten { margin-top: 2.125rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dunkel-linie); border-radius: var(--radius-karte); padding: clamp(22px, 3.5vw, 34px); display: grid; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* `height` ist mit dabei, weil main.js die Karte NACH der Drehung auf die Hoehe ihrer Rueckseite zusammenzieht (karteEinpassen) — waehrend der Drehung bleibt sie absichtlich hoch, sonst wandert alles darunter. */ transition: transform 0.9s var(--gang), height 0.55s var(--gang); } .formular__kasten > .wender__vorn, .formular__kasten > .wender__hinten { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* `align-self: start` und NICHT `center` (3.26.0): Solange die Vorderseite noch im Raster steht, ist die Karte reichlich hoeher als die Bestaetigung. Mittig gesetzt, wanderte deren Text beim Einpassen um gut 200 px nach oben — und das Rollziel, das main.js beim Umdrehen ansteuert, waere ein Ziel, das sich danach noch bewegt. Oben angeschlagen steht die Bestaetigung vom ersten Bild an dort, wo sie am Ende steht; die Karte schrumpft nur noch von unten. */ .wender__hinten { transform: rotateY(180deg); align-self: start; } .formular__kasten.ist-um { transform: perspective(1600px) rotateY(180deg); } @media (prefers-reduced-motion: reduce) { /* Ohne Drehung, aber mit demselben Ergebnis: die Karte zeigt sofort die Rueckseite. Ein Zustandswechsel, keine Bewegung. */ .formular__kasten { transition: none; } } /* Die Rueckseite selbst (template-parts/danke-karte.php). */ .danke { display: block; } .danke:focus { outline: none; } .danke:focus-visible { outline: 2px solid #8f9aff; outline-offset: 6px; border-radius: 8px; } /* Haken und „Angekommen" in EINER Zeile (3.26.0). Untereinander kosteten sie 100 px Hoehe fuer zwei Woerter — am Handy ein Siebtel der Bestaetigung, und die soll ohne Rollen ins Bild passen. Nebeneinander sind es 54. */ .danke__kopf { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } .danke__zeichen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1d3a24; color: #b8f0c3; border: 1px solid #2c5a37; } .danke__ueber { margin: 0; } .danke__titel { font-size: clamp(1.5rem, 3.2vw, 1.9375rem); font-weight: 780; line-height: 1.15; color: var(--auf-dunkel); margin: 0 0 0.5em; } .danke__text { color: var(--auf-dunkel-weich); margin: 0 0 1.25rem; max-width: 46ch; } .danke__nummer { color: var(--auf-dunkel); font-weight: 700; white-space: nowrap; } .danke__schritte { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 15px; counter-reset: danke; } .danke__schritte li { position: relative; padding-left: 42px; counter-increment: danke; color: var(--auf-dunkel-weich); font-size: 1rem; line-height: 1.5; } .danke__schritte li::before { content: counter(danke); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(43, 59, 224, 0.22); border: 1px solid var(--signal-linie); color: var(--auf-dunkel); font-size: 0.875rem; font-weight: 700; display: grid; place-items: center; } /* Eigene Zeile (3.26.0, Wunsch des Inhabers): Ziffer und weisse Ueberschrift oben, der Erklaertext darunter — am Handy wie am Rechner derselbe Aufbau. Inline gesetzt hing die Ueberschrift mal allein in der Zeile, mal mit zwei Woertern des Fliesstextes dahinter, je nach Breite; genau das sah auf beiden Geraeten verschieden aus. */ .danke__schritte b { display: block; color: var(--auf-dunkel); font-weight: 700; } .danke__eilig { color: var(--auf-dunkel-weich); font-size: 0.9375rem; margin: 0 0 0.75rem; } .danke__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .danke__wa { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; min-height: 48px; background: #146237; color: #fff; border-radius: var(--radius-pille); font-weight: 700; text-decoration: none; transition: background-color var(--dauer) var(--gang); } .danke__wa:hover { background: #0e4a29; } .danke__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--auf-dunkel); font-weight: 700; text-decoration: none; min-height: 44px; } .danke__tel > svg { flex: none; color: #8f9aff; } .danke__tel:hover { text-decoration: underline; } /* Am Handy enger (3.26.0). Kein Geschmack, sondern Arithmetik: von einem Handy-Sichtfenster sind je nach Browserleiste 650 bis 730 px nutzbar. Was darueber hinausgeht, muss man rollen — und genau das sollte weg. Gekuerzt wird an den Abstaenden, der Text bleibt vollstaendig. */ @media (max-width: 599.98px) { .danke__titel { margin-bottom: 0.4em; } .danke__text { font-size: 1rem; line-height: 1.5; margin-bottom: 0.85rem; } .danke__schritte { gap: 12px; margin-bottom: 1.1rem; } .danke__schritte li { font-size: 0.9375rem; line-height: 1.45; padding-left: 38px; } .danke__schritte li::before { width: 26px; height: 26px; font-size: 0.8125rem; } .danke__eilig { margin-bottom: 0.5rem; } .danke__wege { gap: 10px 16px; } /* Ohne die schmalere Polsterung bricht „Per WhatsApp schreiben" bei 375 px auf zwei Zeilen, und der Knopf wird 85 statt 48 px hoch. `white-space: nowrap` waere hier die falsche Loesung: das ergaebe auf noch schmaleren Geraeten waagerechtes Scrollen statt eines Umbruchs. `min-height: 48px` bleibt unangetastet — die Flaeche zum Antippen darf nicht kleiner werden, nur der Leerraum darin. */ .danke__wa { padding: 12px 16px; font-size: 1rem; } } /* Absendeknopf waehrend des Sendens, und die Zeile, wenn es schiefging. */ .knopf--laeuft { opacity: 0.72; cursor: progress; } .formular__fehler { margin: 0; padding: 12px 16px; border-radius: var(--radius-feld); background: #3a1d1d; color: #f0b8b8; border: 1px solid #5a2c2c; font-size: 0.9375rem; font-weight: 600; } .formular { display: grid; gap: 18px; } .feld { display: grid; gap: 7px; } .feld label { font-size: 0.9375rem; font-weight: 600; color: var(--auf-dunkel); } .feld input, .feld textarea { font: inherit; font-size: 1.0625rem; color: var(--auf-dunkel); background: var(--dunkel-flaeche); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-feld); padding: 13px 16px; width: 100%; } .feld textarea { resize: vertical; min-height: 120px; } .feld input::placeholder { color: #8b8e99; } .feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid #8f9aff; outline-offset: 1px; } .feld .hilfe { font-size: 0.875rem; color: var(--auf-dunkel-weich); } /* 3.15.0: Pflichtfelder. „(Pflichtfeld)“ steht in der Beschriftung wie „(optional)“ bei den anderen, nur leiser. Fehlt beim Absenden etwas, faerbt main.js den Rand und zeigt die Zeile unter dem Feld; die Farben sind die der roten Meldung weiter unten. [hidden] muss hier ausdruecklich stehen, weil die Fehlerzeile sonst ueber das Raster-Gap trotzdem Platz einnimmt. */ .feld .pflicht { font-weight: 400; color: var(--auf-dunkel-weich); } .feld__fehler { font-size: 0.875rem; font-weight: 600; color: #f0b8b8; } .feld__fehler[hidden] { display: none; } .feld--fehler input, .feld--fehler textarea { border-color: #e08a8a; box-shadow: 0 0 0 1px #e08a8a; } /* 3.10.0: Die Zeile ueber dem Absendeknopf. Etwas heller als der Hilfetext der Felder — sie ist ein Versprechen, keine Fussnote. */ .formular__danach { margin: 1.6rem 0 0.9rem; font-size: 0.9375rem; line-height: 1.45; color: var(--auf-dunkel); } .formular__senden { width: 100%; white-space: normal; line-height: 1.3; } .formular__schutz { font-size: 0.875rem; color: var(--auf-dunkel-weich); } .formular__schutz a { color: var(--auf-dunkel); } /* Honigtopf (Bot-Falle): sichtbar fuer Maschinen, unsichtbar fuer Menschen. 3.25.0 — NICHT mehr ueber `left: -9999px` weggeschoben. Seit sich der Formularkasten umdreht, spiegelt die Drehung auch die Position: aus x = -9830 wurde x = +10757, und die Seite liess sich ploetzlich 9300 px nach rechts schieben. Nach LINKS darf Inhalt folgenlos hinausragen, nach RECHTS erzeugt er Rollbalken — dieselbe Falle wie damals bei der versteckten Schubladen-Checkbox, nur diesmal von einer Drehung ausgeloest. Also am Ort verstecken statt wegschieben, mit demselben Rezept wie `.nur-vorlesen`: ein Pixel gross, weggeschnitten, `overflow: hidden` haelt auch das Eingabefeld darin. Fuer einen Bot bleibt es unveraendert ein ausfuellbares Feld ohne display:none — genau das ist der Zweck. */ .honigtopf { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .meldung { border-radius: var(--radius-feld); padding: 16px 20px; font-weight: 600; margin-top: 1.75rem; } .meldung--gut { background: #1d3a24; color: #b8f0c3; border: 1px solid #2c5a37; } .meldung--schlecht { background: #3a1d1d; color: #f0b8b8; border: 1px solid #5a2c2c; } /* 3.18.2 (Wunsch des Inhabers): noch enger — vom Unterkoerper ist nichts mehr zu sehen. Das Bild beginnt eine Handbreit ueber dem Kopf und endet knapp unter der Hemdtasche, also auf Brusthoehe. Der Schnitt steckt in der Datei selbst (michael-telefon-brust.jpg, 1086 x 700: aus dem Hochformat michael-telefon-hoch.jpg die Zeilen 390 bis 1090; 3.18.0 nahm noch 250 bis 1210 und damit 960 Zeilen). Per CSS allein ginge das nicht: `cover` schneidet immer nur an EINER Achse — oben UND unten enger heisst hineinzoomen, und das kann nur die Datei. Preis des engeren Schnitts: weniger Quellpixel. Am Rechner nutzt der 4:5- Rahmen 560 x 700 der Datei und stellt sie mit 441 x 551 dar — bei einfacher Pixeldichte also verkleinert und scharf, auf Retina 1,6-fach vergroessert (3.18.0: 1,15-fach). Deshalb ist die Datei leicht nachgeschaerft (Unsharp Mask r1,1 / 30 % / Schwelle 3) und mit Qualitaet 88 ohne Farbunterabtastung gespeichert: 117 KB fuer 0,76 Megapixel statt 113 KB fuer 1,04 — mehr Bits je Pixel, weil jedes Pixel weiter gezogen wird. Ein groesseres Original gibt es nicht, michael-telefon-hoch.jpg ist mit 1086 x 1448 die Quelle. 3.25.0 (Wunsch des Inhabers): der Rahmen ist nicht mehr 4:5, sondern hat genau das Seitenverhaeltnis der Datei — 1086 : 814. Damit schneidet er NICHTS mehr weg, weder oben noch an den Seiten, und die Kraeuter links wie die Monstera rechts sind zu sehen. Unten endet der Ausschnitt weiter auf Zeile 1090 des Hochformats, vom Unterkoerper ist also nach wie vor nichts da; die neue Datei michael-telefon-weit.jpg reicht nur weiter nach OBEN (Zeilen 276-1090 statt 390-1090). Der Preis steht ehrlich hier: der 4:5-Rahmen zeigte 560 der 1086 Spalten, jetzt sind es alle 1086 bei gleicher Rahmenbreite. Der Kopf steht damit rund halb so gross wie in 3.18.2. Wer ihn wieder groesser will, muss die Spalte verbreitern (grid-template-columns weiter oben) — am Zuschnitt liegt es nicht, der zeigt schon alles. object-position darf jetzt `center` sein und ist wirkungslos: bei gleichem Seitenverhaeltnis von Rahmen und Datei gibt es keinen Ueberhang, den man verschieben koennte. Zuschnitte vor dem Deploy offline durchprobiert. */ .anfrage__bild { margin: 0; align-self: start; position: sticky; top: clamp(88px, 12vh, 120px); } /* Das Bild steckt in einem : darunter liegt die kleine Fassung fuers Handy (michael-telefon-weit-klein.jpg). Ohne `display: block` waere die Huelle inline und das Bild haenge an der Grundlinie. */ .anfrage__bild picture { display: block; } .anfrage__bild img { width: 100%; height: auto; aspect-ratio: 1086 / 814; object-fit: cover; object-position: center; border-radius: var(--radius-karte); } .anfrage__bild figcaption { margin-top: 12px; color: var(--auf-dunkel-weich); font-size: 0.9375rem; } @media (max-width: 899.98px) { /* 3.14.0: Am Handy und Tablet steht das Foto quer ueber die volle Breite zwischen Ueberschrift und Kontaktwegen — vorher war es ein 60-px-Kreis, in dem vom Gesicht kaum etwas zu erkennen war. Kein Hochformat unter dem Formular: das schoebe es 500 px nach unten. 3.18.0 bis 3.24.0 stand hier ein Quadrat, das aus der Datei seitlich etwas wegnahm. 3.25.0: auch am Handy das volle Bild (1086 : 814). Bei 350 px Breite ist es 262 px hoch — 88 px weniger als das Quadrat, die Kontaktwege ruecken also wieder nach oben. Geladen wird dort michael-telefon-weit-klein.jpg mit 760 Spalten: das deckt 350 px bei doppelter Pixeldichte mit Reserve und spart gegenueber der grossen Fassung 46 KB. */ .anfrage__raster { gap: 1.5rem; } .anfrage__bild { position: static; max-width: none; display: block; padding: 0; border: 0; background: none; } .anfrage__bild img { width: 100%; height: auto; aspect-ratio: 1086 / 814; object-position: center; } .anfrage__bild figcaption { margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; } .anfrage__spalte { max-width: none; } .anfrage__rest > :first-child { margin-top: 0; } } /* Auf dem Tablet stuende das Foto ueber die volle Breite zu gross und schoebe das Formular aus dem Bild, deshalb dort schmaler: 440 px breit, mit dem Seitenverhaeltnis der Datei also 330 px hoch. */ @media (min-width: 600px) and (max-width: 899.98px) { .anfrage__bild { max-width: 440px; } } /* Was danach passiert (/anfrage/) */ .danach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 2.25rem; } .danach__punkt { border-top: 2px solid var(--signal); padding-top: 18px; } .danach__nr { display: block; font-size: 2rem; font-weight: 780; color: var(--signal); line-height: 1; margin-bottom: 10px; } .danach__punkt b { display: block; font-size: 1.125rem; font-weight: 700; margin-bottom: 0.3em; } .danach__punkt p { color: var(--tinte-weich); font-size: 1rem; } /* ---------- Schlussband der Unterseiten ---------- */ .schluss__raster { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .schluss__wege { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; justify-self: end; } .schluss__kurz { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1rem; font-weight: 650; } .schluss__kurz a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--auf-dunkel); } .schluss__kurz svg { color: #8f9aff; } .schluss__kurz a:hover { text-decoration: underline; } /* ---------- Unterseiten: Kopf ---------- Seit 2.7.0 traegt jede Unterseite oben dasselbe Navy wie der Held der Startseite (mit den beiden Ultramarin-Scheinen), die Kopfleiste darueber die dunkle Fassung: so ist die Seite auf jeder Unterseite sofort als dieselbe zu erkennen. Text hell, Ueberzeile im hellen Blau. */ .seitenkopf { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.75rem, 5vw, 4.25rem); color: var(--auf-dunkel); background: radial-gradient(900px 640px at 82% 10%, rgba(43, 59, 224, 0.3), transparent 62%), radial-gradient(720px 540px at -8% 98%, rgba(43, 59, 224, 0.14), transparent 58%), var(--dunkel); } .seitenkopf .ueberzeile { color: #8f9aff; } .seitenkopf .u1 { max-width: 22ch; color: #fff; letter-spacing: -0.015em; } .seitenkopf .vorspann { font-size: 1.1875rem; color: #c3c8de; } .seitenkopf :focus-visible { outline-color: #8f9aff; } /* Folgt direkt ein dunkles Band (Beispiele), trennt nur eine Haarlinie. */ .seitenkopf + .band--dunkel { padding-top: 2.75rem; border-top: 1px solid var(--dunkel-linie); } /* 3.12.0: In Elementor liegen Seitenkopf und Band in getrennten Huellen, der Nachbarschafts-Kombinator oben findet sie dann nicht mehr — auf /beispiele/ fehlten dadurch die Haarlinie und 47 px Abstand. Dieselbe Regel noch einmal ueber die Huellen hinweg. Sie steht mit Absicht in einem EIGENEN Block: kennt ein Browser :has() nicht, faellt nur diese Zeile aus und nicht auch die Regel darueber. */ .elementor .e-con:has(.seitenkopf) + .e-con .abschnitt.band--dunkel { padding-top: 2.75rem; border-top: 1px solid var(--dunkel-linie); } .seitenkopf--mitte { text-align: center; } .seitenkopf--mitte .u1, .seitenkopf--mitte .vorspann { margin-inline: auto; max-width: 60ch; } /* ---------- Beispiele im Detail ---------- */ .referenz { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); } .referenz + .referenz { border-top: 1px solid var(--linie); } .referenz__medien { position: relative; padding-left: 40px; padding-bottom: 28px; } .referenz--gedreht .referenz__medien { order: 2; padding-left: 0; padding-right: 40px; } .referenz__medien .handy { left: -6px; } .referenz--gedreht .referenz__medien .handy { left: auto; right: -6px; } .referenz__text .u2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); } .referenz__text > p { color: var(--tinte-mittel); margin-top: 1em; } .referenz__punkte { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 10px; } .referenz__punkte li { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 500; } .referenz__punkte svg { color: var(--signal); flex: none; } .hinweiskasten { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; /* 2.7.0: hellblau getoent wie das Ablauf-Band, damit die Karte sich vom dunklen Schlussband darunter abhebt */ background: var(--signal-hell); border: 1px solid var(--signal-linie); border-radius: var(--radius-karte); padding: clamp(1.75rem, 4vw, 3rem); } .hinweiskasten .knopf { justify-self: end; } /* ---------- Ablauf im Detail ---------- */ .stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); } .stufe { border-top: 1px solid var(--linie); padding-top: clamp(2rem, 4vw, 3rem); } .stufe:first-child { border-top: 0; padding-top: 0; } .stufe__kopf { display: flex; gap: clamp(18px, 3vw, 32px); align-items: flex-start; } .stufe__nr { flex: none; font-size: clamp(3rem, 5vw, 4.25rem); font-weight: 780; line-height: 0.9; letter-spacing: -0.035em; color: var(--signal); font-variant-numeric: tabular-nums; min-width: 1.1em; } .stufe__kopf .u2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); } .stufe__dauer { display: inline-flex; align-items: center; gap: 8px; margin-top: 0.6em; font-size: 0.9375rem; font-weight: 600; color: var(--tinte-weich); } .stufe__dauer svg { color: var(--signal); } .stufe__korpus { margin-top: 1.25rem; padding-left: calc(clamp(3rem, 5vw, 4.25rem) * 1.1 + clamp(18px, 3vw, 32px)); color: var(--tinte-mittel); max-width: 78ch; } .stufe__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 1.5rem; } .stufe__zwei .u3 { color: var(--tinte); margin-bottom: 0.4em; font-size: 1.125rem; } .stufe__zwei p { font-size: 1.0625rem; } .zeitkarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 2.25rem; } .zeitkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-karte); padding: 26px 24px; } .zeitkarte__wert { display: block; font-size: 2rem; font-weight: 780; letter-spacing: -0.02em; color: var(--signal); line-height: 1; margin-bottom: 12px; } .zeitkarte b { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.3em; } .zeitkarte p { color: var(--tinte-weich); font-size: 0.9875rem; } /* ---------- Fuss ---------- */ .fuss { background: var(--dunkel); color: rgba(255, 255, 255, 0.72); } .fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; border-top: 1px solid var(--dunkel-linie); padding-block: 48px 44px; } .fuss .marke { color: #fff; font-size: 1.25rem; font-weight: 600; } .fuss .marke b { color: inherit; font-weight: 600; } .fuss__spalte--marke p { margin-top: 1em; max-width: 34ch; font-size: 0.96875rem; } .fuss h3 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8f9aff; margin-bottom: 1.4em; } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .fuss a { text-decoration: none; font-size: 0.96875rem; transition: color var(--dauer) var(--gang); } .fuss a:hover { color: var(--auf-dunkel); text-decoration: underline; } .fuss__unten { border-top: 1px solid var(--dunkel-linie); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; font-size: 0.84375rem; } /* ---------- Mobile Leiste ---------- Seit 3.5.0 steht sie nicht mehr von Anfang an da: main.js haelt sie im Held auf `verborgen` und laesst sie einfahren, sobald die drei Zusagen im Bild sind (Wunsch des Inhabers). Ueber dem Anfrage-Abschnitt faehrt sie wie bisher wieder hinaus. Ohne JavaScript bleibt sie durchgehend sichtbar. */ .mobilleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--dunkel) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(0); transition: transform var(--dauer) var(--gang); } .mobilleiste.verborgen { transform: translateY(110%); } .mobilleiste .knopf { min-height: 48px; padding: 10px 12px; font-size: 0.9375rem; width: 100%; } .mobilleiste .knopf--rand { background: var(--dunkel-flaeche); color: var(--auf-dunkel); } /* Der gruene WhatsApp-Knopf aus 2.11.0 ist mit 3.11.0 aus der Leiste raus (siehe footer.php); die Regeln dazu stehen nicht mehr hier, sondern nur noch bei der Schnellwahl im Anfragebereich. */ /* ---------- Einblendung beim Rollen ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--gang), transform 0.7s var(--gang); } .reveal.da { opacity: 1; transform: none; } /* Angebot: die vier Haken links erscheinen nacheinander, sobald die Liste ins Bild rollt. Kein Eingriff ins Scrollen, nur ein gestaffeltes Auftauchen; die Klasse haken-reveal setzt erst JavaScript, ohne JS ist alles sofort sichtbar. */ .haken-reveal li { --warte: 0s; opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--weich) var(--warte), transform 0.55s var(--weich) var(--warte); } .haken-reveal li:nth-child(2) { --warte: 0.16s; } .haken-reveal li:nth-child(3) { --warte: 0.32s; } .haken-reveal li:nth-child(4) { --warte: 0.48s; } .haken-reveal li svg { opacity: 0; transform: scale(0.3); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--warte) + 0.12s), opacity 0.3s var(--weich) calc(var(--warte) + 0.12s); } .haken-reveal.da li { opacity: 1; transform: none; } .haken-reveal.da li svg { opacity: 1; transform: none; } /* ---------- Textseiten (Impressum, Datenschutz) ---------- */ .seite { padding-block: var(--abschnitt); } .seite .halter, .halter--schmal { max-width: 820px; } .seite h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 750; margin-bottom: 1em; } .seite h2 { font-size: 1.375rem; font-weight: 700; margin: 1.8em 0 0.5em; } .seite p, .seite li { color: var(--tinte-weich); } /* ---------- Responsiv ---------- */ @media (max-width: 1100px) { .kopf__nav { display: none; } .klapp { display: block; margin-left: auto; } .kopf__tel span { display: none; } /* 2.8.0: drei nebeneinander statt zwei plus eins allein */ .fenster__raster { grid-template-columns: repeat(3, 1fr); gap: 16px; } /* 3.17.0: Vier Karten waeren hier je 220 px schmal — lieber zwei mal zwei. */ .fenster__raster:has(> .fenster:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } .fenster__titel { font-size: 1.0625rem; } .fenster__daten { font-size: 0.75rem; } .fenster__fuss { margin-top: 14px; padding-top: 12px; } .fenster__pfeil { width: 40px; height: 40px; } .fuss__raster { grid-template-columns: 1fr 1fr; gap: 36px 32px; } .angebot__raster { grid-template-columns: 1fr; } /* 2.8.0: das Handy im Angebot zeigte am Tablet und Handy dieselbe Seite wie der Held direkt darueber; hier reicht die Liste. */ .angebot__handy { display: none; } .person__karte { grid-template-columns: 1fr; } .person__bild { max-width: 380px; } .zusagen { grid-template-columns: 1fr 1fr; } .referenz { grid-template-columns: 1fr; } .referenz--gedreht .referenz__medien { order: 0; padding-right: 0; padding-left: 40px; } .referenz--gedreht .referenz__medien .handy { right: auto; left: -6px; } .referenz__medien { max-width: 640px; } .zeitkarten { grid-template-columns: 1fr 1fr; } .schluss__raster { grid-template-columns: 1fr; } .schluss__wege { justify-self: start; } } @media (max-width: 860px) { .preise__spanne { display: block; margin: 1.1rem auto 0; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--tinte-mittel); } .preise__spanne b { font-weight: 750; color: var(--tinte); white-space: nowrap; } .belegband__raster { grid-template-columns: 1fr 1fr; } .beleg { border-left: 0 !important; } .beleg:nth-child(even) { border-left: 1px solid var(--linie) !important; } .beleg:nth-child(n+3) { border-top: 1px solid var(--linie); } .problem__raster { grid-template-columns: 1fr; } /* 2.8.0: die drei Pakete stehen am Handy und Tablet nebeneinander in einer Wischreihe (Scroll-Snap). Untereinander wirkten die drei Karten wie eine lange Liste. Der obere Innenabstand laesst Platz fuer die Plakette "Meine Empfehlung". 2.10.0 (Wunsch des Inhabers): die Reihe beginnt in der MITTE, links und rechts lugen die Nachbarn gleich weit hervor, und man wischt in beide Richtungen. Dafuer ist die Karte --karte breit und der Innenabstand der Reihe links wie rechts genau (Reihenbreite - Karte) / 2: so laesst sich jede der drei Karten mittig einrasten, auch die erste und die letzte. Die Reihe ist so breit wie das Fenster (Randausgleich), ihr Bezugsblock ist der Halter-Inhalt, deshalb 50 % + --rand. main.js stellt beim Laden die mittlere Karte in die Mitte; ohne JavaScript beginnt die Reihe links. */ .preise__raster, .preise__kurz { --karte: min(80vw, 360px); display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 18px calc(50% + var(--rand) - var(--karte) / 2) 12px; margin-inline: calc(-1 * var(--rand)); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .preise__raster::-webkit-scrollbar, .preise__kurz::-webkit-scrollbar { display: none; } .paket, .kurzpaket { flex: 0 0 var(--karte); scroll-snap-align: center; } .paket:hover, .kurzpaket:hover { transform: none; } /* Referenzen ebenso (bis 2.9.2 erst unter 640 px, am Tablet standen drei schmale Karten nebeneinander): eine Wischreihe, der Trainer in der Mitte zuerst. Am Tablet ist die Karte bis 560 px breit, damit man die Seite wirklich sieht; die Schriftgrade aus dem 1100er-Block sind hier wieder etwas groesser. */ .fenster__raster { --karte: min(80vw, 560px); display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 1.5rem calc(50% + var(--rand) - var(--karte) / 2) 8px; margin-inline: calc(-1 * var(--rand)); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fenster__raster::-webkit-scrollbar { display: none; } .fenster { flex: 0 0 var(--karte); scroll-snap-align: center; } .fenster:hover .fenster__flaeche { transform: none; } /* In der Wischreihe macht den Durchlauf die Schleife (.ist-vorfuehrung), nicht der Zeiger: sonst kaempfen an einem schmal gezogenen Rechnerfenster Hover-Uebergang und Schleife um dieselbe Eigenschaft. */ .fenster:hover .fenster__flaeche img, .fenster:focus-visible .fenster__flaeche img { transform: translateY(0); } .fenster__raster:first-child { padding-top: 0; } .fenster__titel { font-size: 1.1875rem; } .fenster__daten { font-size: 0.8125rem; } .fenster__pfeil { width: 44px; height: 44px; } #beispiele .fenster__raster + .wischpunkte { margin-top: 0.75rem; } #beispiele .knopfzeile--mitte { margin-top: 2.25rem; } .zusagen { grid-template-columns: 1fr; } .danach { grid-template-columns: 1fr; gap: 20px; } .hinweiskasten { grid-template-columns: 1fr; } .hinweiskasten .knopf { justify-self: start; } .stufe__korpus { padding-left: 0; } .stufe__zwei { grid-template-columns: 1fr; } } @media (max-width: 640px) { /* Die Wischreihe der Referenzen liegt seit 2.10.0 im 860er-Block (mit den Preisen). */ .fuss__raster { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 36px; } .betreuung { padding: 22px 20px; } .zeitkarten { grid-template-columns: 1fr; } } @media (max-width: 767px) { /* 2.9.0: die feste Kontaktleiste unten ist ab hier Teil der Hoehenrechnung (--leiste-h), und die Kopfleiste wird niedriger — in ihr stehen am Handy nur Marke, Telefonzeichen und Klappknopf, die 72 px des Rechners sind verschenkt. Beides zusammen gibt dem Held 92 px mehr erstes Bild. */ :root { --kopf-h: 61px; --leiste-h: 80px; } .kopf__zeile { min-height: 60px; } .mobilleiste { display: grid; } body { padding-bottom: var(--leiste-h); } .kopf .knopf { display: none; } /* 3.11.0 (Wunsch des Inhabers): das nackte Telefonzeichen in der Kopfleiste faellt am Handy weg. Es stand ohne Nummer daneben (die Beschriftung ist seit dem 1100er-Block ausgeblendet) und doppelte den Anruf-Knopf in der festen Leiste unten. Am Tablet, wo neben dem Zeichen noch der Knopf steht, bleibt es. Der Anruf-Weg bleibt am Handy ueber die feste Leiste und den Fuss. */ .kopf__tel { display: none; } .schritt__nr { margin-top: 16px; font-size: 56px; } .knopfzeile .knopf { width: 100%; } .knopfzeile .textlink { margin-inline: auto; } .fragen__mehr .knopf { width: 100%; } .handy { left: -6px; bottom: -14px; width: 31%; max-width: 118px; border-width: 4px; border-radius: 18px; } .referenz__medien { padding-left: 0; } .fenster__pfeil { width: 38px; height: 38px; } .paket { padding: 30px 22px 28px; } .paket__wofuer { min-height: 0; } .schluss__wege { width: 100%; } .schluss__wege .knopf { width: 100%; } } /* ---------- 3.1.0: Abschnitte ohne Bild ---------- Vier Abschnitte stehen im Raster „Text links, Bild rechts“. Wird das Bild im Widget abgeschaltet, bliebe die zweite Spur leer und der Text stuende auf halber Breite am Rand. Diese Regeln geben ihm die ganze Breite zurueck. Sie stehen am Ende der Datei, weil sie die Raster von weiter oben ueberschreiben — bei .anfrage__raster auch eine Regel aus einer Bildschirmabfrage, die deshalb hier noch einmal aufgemacht wird. */ .angebot__raster--nur-text { grid-template-columns: minmax(0, 1fr); } .person__karte--ohne-bild { grid-template-columns: minmax(0, 1fr); } .schluss__raster--nur-text { grid-template-columns: minmax(0, 1fr); } .schluss__raster--nur-text .schluss__wege { justify-self: start; } @media (min-width: 900px) { .anfrage__raster--ohne-bild { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 5vw, 4.75rem); } } /* ---------- Reduzierte Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } }