/* ========================================================================== DIE SCHRIFT — der Grund, warum die Seite vorher nach niemandem aussah ========================================================================== Hier stand: ui-sans-serif, "Segoe UI Variable Display", system-ui. Also der Systemzeichensatz. Eine Seite ohne eigene Schrift hat typografisch KEINE Identitaet — und das ist der Hauptgrund, warum generierte Entwuerfe austauschbar wirken. Jede Marke, die man wiedererkennt, erkennt man zuerst an der Schrift. ARCHIVO, und zwar aus zwei Gruenden: Sie stammt aus der Tradition amerikanischer Industrie- und Beschilderungsschriften — schmal, kraeftig, werkstattnah. Und sie ist NICHT Inter und nicht Space Grotesk, die beiden Schriften, die auf jedem generierten Entwurf stehen. SELBST GEHOSTET, nicht ueber die Google-CDN eingebunden. Das ist hier kein Geschmack: Wer Schriften von fonts.gstatic.com laedt, uebermittelt die IP-Adresse jedes Besuchers an Google — deutsche Gerichte haben das mehrfach als DSGVO-Verstoss gewertet. Vier Schnitte, zusammen 58 KB. font-display: swap — der Text steht sofort da, notfalls in der Systemschrift. Ein leerer Bildschirm, bis eine Schrift geladen ist, kostet mehr Besucher als jede Schriftwahl gewinnt. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/web/schrift/archivo-400.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/web/schrift/archivo-500.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/web/schrift/archivo-600.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/web/schrift/archivo-800.woff2") format("woff2"); } /* ===================================================================== Handwerk Champion — die öffentliche Seite ===================================================================== WAS AN DEN ERSTEN ZWEI ENTWÜRFEN FALSCH WAR Rückmeldung, wörtlich: „Es sieht alles nach irgendwelchen Boxen aus. Das ist wenig emotional. Es fehlen Effekte, es fehlt Freshness, es gibt keine Emotionen, kein Leben." Das stimmte. Ich hatte auf Zurückhaltung gesetzt — Haarlinien, keine Verläufe, keine Bewegung, alles rechteckig — und das Strenge genannt. Herausgekommen ist ein Dokument: Rechtecke mit Rahmen, überall gleich gepolstert, ohne Rhythmus, ohne Tiefe, ohne einen einzigen Moment, an dem etwas passiert. DIESE FASSUNG IST WARM UND SIE BEWEGT SICH. * Weiche große Radien statt scharfer Kanten. Ein Werkzeug, das auf deiner Seite steht, hat keine Ecken. * Warmes Licht: cremiger Grund, bräunliches Schwarz, Schatten mit warmem Ton. Kühles Grau wirkt wie eine Behörde. * EINE kräftige Farbe, die Flamme, und sie steht nur dort, wo gehandelt wird. Daneben ein tiefes Moosgrün ausschließlich für „erledigt". * Großer Sprung in der Schriftgröße. Wo alles gleich groß ist, ist nichts wichtig. * Bewegung beim Scrollen, und im Aufmacher führt sich das Produkt selbst vor. Das war der eigentliche Fehler der ersten Fassung: Sie hat den Vorgang ABGEBILDET statt ihn zu zeigen. Alles Bewegte hält sich an prefers-reduced-motion — wer das eingestellt hat, sieht die fertige Seite ohne einen einzigen Übergang. ===================================================================== */ :root { --grund: #FDFCFB; --sand: #F4F2EF; --sand-2: #EAE6E1; --weiss: #FFFFFF; --tinte: #1F1D1B; --tinte-weich: #423D38; --gedaempft: #6F6862; --gedaempft-d: #C3B3A3; --flamme: #E04A0C; --flamme-hell: #F26A2E; --flamme-blass: #FDEEE4; --moos: #2E6047; --moos-blass: #E7F0EA; --linie: #E9E5E0; --linie-stark: #D5CFC8; /* Die Hoehe der Kopfleiste. Sie steht hier, weil zwei Regeln sie brauchen: `.kopf-inhalt` als Mindesthoehe und der negative Abstand, mit dem der Kopf auf der Buehne aus dem Fluss genommen wird. Zwei getippte 76 waeren zwei Stellen, von denen die zweite beim naechsten Mal vergessen wird. */ --kopf-hoehe: 76px; /* DER RAND EINES EINGABEFELDES IST EIN BEDIENELEMENT, kein Zierstrich — er braucht 3:1 gegen den Grund daneben (WCAG 1.4.11, Nicht-Text-Kontrast). Gemessen: `--linie-stark` erreicht auf Weiss 1,55. Das ist der Grund, aus dem die Felder auf der Registrierseite unsichtbar waren, und es waere auch auf Weiss zu wenig gewesen. #908678 erreicht 3,58 auf Weiss und 3,20 auf Sand — auf BEIDEN Gruenden, damit die Sichtbarkeit nicht wieder davon abhaengt, wo das Formular steht. */ --feldrand: #908678; /* DASSELBE FUER DEN FEHLERTEXT. Die Flamme erreicht auf Weiss 4,07 und verfehlt die 4,5 fuer normale Schrift knapp — knapp daneben ist bei einer Fehlermeldung besonders teuer, weil sie gelesen werden MUSS. #C63F09 erreicht 5,10 auf Weiss und 4,50 auf dem blassen Flammenton. */ --flamme-tief: #C63F09; --linie-d: rgba(255, 252, 248, 0.16); --schatten-s: 0 2px 6px rgba(90, 55, 25, 0.05), 0 1px 2px rgba(90, 55, 25, 0.04); --schatten-m: 0 12px 28px -10px rgba(90, 55, 25, 0.16), 0 2px 6px rgba(90, 55, 25, 0.05); --schatten-l: 0 40px 70px -34px rgba(90, 55, 25, 0.38), 0 6px 18px rgba(90, 55, 25, 0.07); --rund: 18px; --rund-s: 10px; --breit: 1220px; --schmal: 700px; /* Die dritte Breite. 700px ist eine LESESPALTE — richtig fuer Fliesstext, viel zu schmal fuer eine Tabelle mit Betraegen rechts. 1220px ist die volle Bahn. Dazwischen fehlte etwas: 1040px, die uebliche Breite fuer Inhalt, der gelesen UND verglichen wird. */ --mittel: 1040px; --schrift: "Archivo", ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 18px; line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } /* --- Typografie: großer Sprung ------------------------------------------ Wo alles gleich groß ist, ist nichts wichtig. Die Überschrift ist deshalb wirklich groß und wirklich eng — und der Fließtext bleibt ruhig und weit, damit er sich lesen lässt. */ h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; } h1 { font-size: clamp(2.9rem, 6.4vw, 5rem); letter-spacing: -0.045em; } h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -0.038em; } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.024em; } p { margin: 0 0 1.1rem; max-width: 62ch; } a { color: inherit; } strong { font-weight: 700; color: var(--tinte); } .marke { display: inline-flex; align-items: center; gap: 9px; background: var(--flamme-blass); color: var(--flamme); border-radius: 999px; padding: 7px 16px 7px 13px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 20px; } .marke::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .marke.gruen { background: var(--moos-blass); color: var(--moos); } .vorspann { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--tinte-weich); max-width: 56ch; } /* --- Gerüst -------------------------------------------------------------- */ .bahn { width: 100%; max-width: var(--breit); margin: 0 auto; padding: 0 24px; } /* GEMESSEN, NICHT GESCHAETZT: Bei 132px oben UND unten standen zwischen je zwei Abschnitten 264 Pixel. Auf der Preisseite mit ihren dreizehn Abschnitten waren das 3.432 Pixel reine Luft bei 13.111 Pixeln Seitenhoehe — ein Viertel der Seite. Wer scrollt, verliert dabei den Zusammenhang zwischen dem, was er gerade gelesen hat, und dem, was kommt. */ section { padding: clamp(40px, 3.2vw, 56px) 0; position: relative; } /* AUF DEM SCHREIBTISCH ZAEHLT JEDE ZEILE, DIE MAN NICHT SCROLLEN MUSS. Am Handy ist Luft billig — dort steht ohnehin nur eine Spalte, und der Daumen scrollt schneller als das Auge liest. Am Monitor kostet sie: Wer die Preise vergleichen will, muss dafuer zurueckscrollen. */ @media (min-width: 900px) { section { padding: 44px 0; } h1 { line-height: 1.0; } /* Der Nachlauf des letzten Absatzes addiert sich auf den Innenabstand des Abschnitts — 19 Pixel, die niemand haben wollte und die man nur beim Nachmessen findet. */ .bahn > *:last-child, .bahn > div > *:last-child { margin-bottom: 0; } /* DER AUFMACHER GEHT IN DIE ERSTE KARTE UEBER, statt vor ihr zu enden. Sein Schlusssatz lautet „Rechnen Sie zuerst nach, was das heute kostet" — und genau das steht darunter. Zwei volle Abstaende dazwischen trennen, was zusammengehoert. */ section:first-of-type { padding-bottom: 20px; } } section.sand { background: var(--sand); border-radius: 40px; } section.flamme-grund { background: var(--flamme-blass); border-radius: 40px; } @media (max-width: 700px) { section.sand, section.flamme-grund { border-radius: 26px; } } /* --- Knöpfe: rund, warm, mit Gewicht ------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.03rem; letter-spacing: -0.012em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s ease, background-color 0.18s ease; } .knopf-haupt { background: var(--flamme); color: #fff; box-shadow: 0 10px 22px -8px rgba(221, 85, 24, 0.55); } .knopf-haupt:hover { background: var(--flamme-hell); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(221, 85, 24, 0.6); } .knopf-rand { background: var(--weiss); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie-stark), var(--schatten-s); } .knopf-rand:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--tinte), var(--schatten-m); } .knopf-klein { min-height: 46px; padding: 0 22px; font-size: 0.95rem; } .knopf:active { transform: translateY(0); } :focus-visible { outline: 3px solid var(--flamme); outline-offset: 3px; border-radius: 6px; } /* --- Kopfzeile ----------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 60; background: rgba(255, 252, 248, 0.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .kopf.gescrollt { border-bottom-color: var(--linie); box-shadow: 0 4px 20px -12px rgba(90,55,25,0.3); } .kopf-inhalt { display: flex; align-items: center; gap: 26px; min-height: var(--kopf-hoehe); } /* DIE WORTMARKE IST EIN BILD, DIE MASSE STEHEN DESHALB HIER (31.8.2026). Frueher standen hier ein 34-Pixel-Zeichen und ein Schriftzug daneben, deren Verhaeltnis zueinander gepflegt werden musste. Beide stecken jetzt in einer Datei; zu regeln bleibt nur, wie hoch sie im Kopf steht. */ .wortmarke { display: inline-flex; align-items: center; gap: 13px; font-weight: 800; font-size: 1.24rem; letter-spacing: -0.036em; text-decoration: none; margin-right: auto; } .wortmarke svg { display: block; flex: none; } /* DIE WORTMARKE IST JETZT EIN BILD, KEIN ZEICHEN MIT TEXT DANEBEN (31.8.2026). `height: auto` ist hier kein Schoenheitsfehler, sondern noetig: Weiter oben steht `img { max-width: 100% }`. Ohne `height: auto` wuerde in einem sehr schmalen Fenster die Breite schrumpfen, die im HTML gesetzte Hoehe aber stehen bleiben — das Logo waere gestaucht. `flex: none` haelt es davor, im Kopf-Flexkasten zusammengedrueckt zu werden. */ .wortmarke img { display: block; flex: none; height: auto; } /* SIE FUELLT JETZT 61 % DER KOPFHOEHE STATT 39 % (31.8.2026). Bei 30 px war das Zeichen darin KLEINER als die 34 px, die es vorher als eigenes Bild hatte — die Marke war beim Umstieg auf das Logo unbemerkt geschrumpft. Der Kopf ist 76 px hoch, die Knoepfe daneben sind 58 px: Bei 46 px bleiben oben und unten je 15 px Luft, und das Logo steht auf etwa drei Vierteln der Knopfhoehe. Im Logo nimmt das Zeichen die volle Hoehe ein, der Schriftzug 52 % davon — aus 46 px werden also ein 46-px-Zeichen und ein 24 px hoher Schriftzug, beides groesser als der alte Bestand. AM TELEFON MUSS SIE ZURUECK. Unter 1060 px klappt die Navigation zum Schalter, und im Kopf stehen nur noch Logo und Schalter. Gerechnet fuer ein 320 Pixel schmales Fenster: 24 px Innenabstand je Seite lassen 272 px, davon gehen 26 px Abstand und 20 px Schalter ab. Bei 46 px waere das Logo 278 px breit und liefe um 52 px ueber; bei 36 px sind es 217 px und es bleiben 29 px Luft. Der alte Bestand aus Zeichen und Text war mit 226 px genau am Anschlag — schmaler wird es hier also nicht, sondern weiter. */ .kopf .wortmarke img { height: 46px; width: auto; } @media (max-width: 560px) { .kopf .wortmarke img { height: 36px; } } .hauptnav { display: flex; align-items: center; gap: 4px; } .hauptnav a { font-size: 0.97rem; font-weight: 600; text-decoration: none; color: var(--gedaempft); padding: 9px 14px; border-radius: 999px; transition: background-color 0.16s ease, color 0.16s ease; } .hauptnav a:hover, .hauptnav a[aria-current="page"] { color: var(--tinte); background: var(--sand); } /* Der Knopf im Menü ist ein KNOPF und keine Verlinkung mit Hintergrundfarbe: In der ersten Fassung stand er ohne Innenabstand und ohne Rundung da und sah aus wie ein Fehler in der Darstellung. */ .hauptnav .knopf { margin-left: 12px; color: #fff; } .hauptnav .knopf:hover { color: #fff; background: var(--flamme-hell); } /* ANMELDEN: umrandet statt gefuellt. Zwei gefuellte Knoepfe nebeneinander konkurrieren, und der Besucher weiss nicht, welcher fuer ihn ist. Der Bestandskunde sucht ohnehin gezielt — er braucht Sichtbarkeit, keine Lautstaerke. */ .hauptnav .nav-anmelden { margin-left: 8px; color: var(--tinte); background: transparent; box-shadow: inset 0 0 0 1.5px var(--linie-stark); } .hauptnav .nav-anmelden:hover { color: var(--tinte); background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--tinte-weich); } .nav-schalter { display: none; background: var(--weiss); border: 0; border-radius: 999px; width: 48px; height: 48px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--linie-stark); align-items: center; justify-content: center; } @media (max-width: 1060px) { .hauptnav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 2px; background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten-l); padding: 14px; } .hauptnav.offen { display: flex; } .hauptnav a { padding: 14px 16px; } .hauptnav .knopf { margin: 10px 0 0; } .nav-schalter { display: inline-flex; } } /* --- Der Aufmacher ------------------------------------------------------- Kürzer als vorher und ohne Sachfoto. Links steht, worum es geht; rechts FÜHRT SICH DAS PRODUKT VOR: Der Satz wird gesprochen, die Karte baut sich auf, der Knopf pulsiert. Vier Sekunden, und man hat verstanden, was diese Software tut — ohne einen erklärenden Satz zu lesen. */ .aufmacher { position: relative; overflow: hidden; padding: clamp(26px, 3.5vw, 52px) 0 clamp(52px, 6vw, 88px); } /* Warmes Licht — kein Verlauf über die ganze Fläche, sondern ein Schein, wie von einer Lampe außerhalb des Bildes. */ .aufmacher::before { content: ""; position: absolute; z-index: 0; width: 900px; height: 900px; right: -180px; top: -420px; background: radial-gradient(circle, rgba(242,106,46,0.17) 0%, rgba(242,106,46,0) 62%); pointer-events: none; } .aufmacher::after { content: ""; position: absolute; z-index: 0; width: 700px; height: 700px; left: -300px; bottom: -400px; background: radial-gradient(circle, rgba(46,96,71,0.10) 0%, rgba(46,96,71,0) 64%); pointer-events: none; } .aufmacher .bahn { position: relative; z-index: 1; } .aufmacher-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(30px, 4vw, 58px); align-items: center; } @media (max-width: 1060px) { .aufmacher-raster { grid-template-columns: 1fr; gap: 40px; } } .aufmacher h1 { max-width: 13ch; } .aufmacher .vorspann { margin-top: 22px; } .aufmacher-tat { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; } .aufmacher-fuss { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 0.9rem; color: var(--gedaempft); } .aufmacher-fuss span { display: inline-flex; align-items: center; gap: 8px; } .aufmacher-fuss span::before { content: ""; width: 17px; height: 17px; flex: none; border-radius: 50%; background: var(--moos-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 L4.7 8.4 L9.5 3.6' fill='none' stroke='%232E6047' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } /* --- Die Vorführung ------------------------------------------------------ Das Herzstück. Oben ein Mikrofon, das „hört", darunter der Satz, der Wort für Wort erscheint, darunter die Karte, die sich Zeile für Zeile aufbaut. Zum Schluss pulsiert der Freigabe-Knopf. Beide Hälften sind ausdrücklich beschriftet („SIE SAGEN" / „DARAUS MACHT DIE SOFTWARE"), weil in der ersten Fassung niemand verstanden hat, dass die Karte eine Folge des Satzes ist. */ /* ========================================================================== DIE SCHLAGZAHLEN IM AUFMACHER ========================================================================== Hier stand die Vorfuehrung. Sie war am falschen Platz: Sie zeigt, WIE aus einem Satz eine Buchung wird — das ist die Erklaerung, nicht das Versprechen. Wer eine Verkaufsseite oeffnet, will zuerst wissen, was es ihm BRINGT. Die Zahlen sind gross, aber nicht laut: Ziffern in 800, Beschriftung klein und ruhig. Eine Zahl, die schreit, wird geglaubt wie eine Werbung — eine, die dasteht und ihre Herkunft danebenschreibt, wird nachgerechnet. Und genau das soll ein Handwerker tun. */ /* Ziffern in gleicher Breite: Sonst tanzen die drei Zahlen /* Die EINHEIT klein und in der Akzentfarbe: Sie gehoert zur Zahl, soll ihr aber nicht die Groesse wegnehmen. */ .vorfuehrung { position: relative; } /* Unterhalb der Umkehr steht die Vorfuehrung fuer sich und nicht mehr in einer Rasterspalte — begrenzt, damit die Karte nicht ueber die ganze Bahn laeuft. */ .vorfuehrung-breit { max-width: 560px; margin: 40px auto 0; } .vf-fenster { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten-l); overflow: hidden; } .vf-oben { padding: 20px 24px 22px; background: var(--sand); } .vf-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); margin-bottom: 13px; } .vf-hoeren { display: flex; align-items: center; gap: 14px; } .vf-mikro { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--flamme); display: grid; place-items: center; } .vf-laeuft .vf-mikro { animation: puls 1.8s ease-out infinite; } @keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(221, 85, 24, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(221, 85, 24, 0); } 100% { box-shadow: 0 0 0 0 rgba(221, 85, 24, 0); } } /* Fünf Balken, die sich unabhängig bewegen. Ein gleichmäßig schwingender Balken sieht aus wie ein Ladebalken. */ .vf-wellen { display: flex; align-items: center; gap: 4px; height: 26px; } .vf-wellen i { width: 3px; border-radius: 2px; background: var(--flamme); height: 6px; opacity: 0.55; } .vf-laeuft .vf-wellen i { animation: welle 1.1s ease-in-out infinite; } .vf-wellen i:nth-child(2) { animation-delay: 0.14s; } .vf-wellen i:nth-child(3) { animation-delay: 0.29s; } .vf-wellen i:nth-child(4) { animation-delay: 0.08s; } .vf-wellen i:nth-child(5) { animation-delay: 0.22s; } @keyframes welle { 0%,100% { height: 6px; opacity: .5; } 50% { height: 22px; opacity: 1; } } .vf-satz { margin: 15px 0 0; font-size: 1.13rem; font-weight: 650; line-height: 1.5; letter-spacing: -0.02em; color: var(--tinte); min-height: 4.5em; } .vf-cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--flamme); vertical-align: -0.14em; margin-left: 2px; animation: blinken 1s steps(2) infinite; } @keyframes blinken { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .vf-unten { padding: 20px 24px 24px; } .vf-karte-titel { font-size: 1.08rem; font-weight: 750; letter-spacing: -0.022em; margin: 10px 0 4px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1); } .vf-zeile { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--linie); align-items: start; opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1); } .vf-zeile dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); padding-top: 3px; } .vf-zeile dd { margin: 0; font-size: 0.97rem; font-weight: 550; } .vf-zeile .gruen { color: var(--moos); font-weight: 700; } .vf-sichtbar { opacity: 1 !important; transform: translateY(0) !important; } .vf-tat { display: flex; gap: 10px; margin-top: 18px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1); } .vf-tat .knopf { flex: 1; min-height: 50px; font-size: 0.98rem; } .vf-tat .ablehnen { background: var(--weiss); color: var(--gedaempft); box-shadow: inset 0 0 0 1.5px var(--linie-stark); } .vf-bereit .vf-tat .knopf-haupt { animation: knopfpuls 2s ease-in-out infinite; } @keyframes knopfpuls { 0%, 100% { box-shadow: 0 10px 22px -8px rgba(221,85,24,.55); } 50% { box-shadow: 0 10px 32px -6px rgba(221,85,24,.9); } } .vf-fussnote { margin: 15px 6px 0; font-size: 0.9rem; color: var(--gedaempft); text-align: center; } /* --- Bewegung beim Scrollen ---------------------------------------------- */ /* NUR VERSTECKEN, WENN JAVASCRIPT WIRKLICH LÄUFT. Vorher stand hier ``opacity: 0`` ohne Bedingung. Das heißt: Bricht das Skript aus irgendeinem Grund, BEVOR der Beobachter die Klasse „da" vergibt, ist die halbe Seite unsichtbar — und niemand sieht einen Fehler, sondern eine leere Seite. Das darf bei einer Verkaufsseite nicht passieren. Die Klasse „js" setzt ein winziges Skript im ; ohne sie ist alles sichtbar. */ .js .auf { opacity: 0; transform: translateY(26px); } .auf { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); } .js .auf.da { opacity: 1; transform: none; } .auf.v1 { transition-delay: .09s; } .auf.v2 { transition-delay: .18s; } .auf.v3 { transition-delay: .27s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .auf { opacity: 1; transform: none; } .vf-karte-titel, .vf-zeile, .vf-tat { opacity: 1; transform: none; } } /* --- Karten ------------------------------------------------------------- Weich, warm und MIT TIEFE. In der ersten Fassung waren es Rechtecke mit einer Haarlinie — deshalb sah alles aus wie eine Tabelle. */ .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 46px; } .karte { background: var(--weiss); border-radius: var(--rund); padding: 30px 28px 32px; box-shadow: var(--schatten-m); transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease; } .karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-l); } .karte h3 { margin-bottom: 10px; } .karte p { font-size: 1rem; color: var(--tinte-weich); margin: 0; } /* `.karte p` (0-1-1) schlug `.marke` (0-1-0) und nahm dem Abzeichen seinen Abstand — „Fuer die meisten richtig" klebte am Wort „Betrieb". Diese Regel hat 0-2-0 und gewinnt. */ .karte .marke { margin-bottom: 18px; } .karte-hervor .marke { background: var(--flamme); color: var(--weiss); } /* Die gestrichene Einrichtungsgebuehr. DURCHGESTRICHEN UND NICHT WEGGELASSEN: Ein weggelassener Posten ist ein Geschenk, das niemand bemerkt. */ .entfaellt s { color: var(--gedaempft); text-decoration-thickness: 2px; } .entfaellt-marke { display: inline-block; margin-left: 8px; background: var(--moos); color: var(--weiss); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; } /* DAS BAND AUF DER EMPFOHLENEN KARTE HATTE KEINE REGEL (2.9.2026). Auf der Preisseite steht ueber „Backendbuero" ein „Der Kern". Die Klasse gab es im Stylesheet nicht — uebrig blieb eine nackte Textzeile, die wie ein verrutschter Satz aussah statt wie das Abzeichen, das eine Karte als die empfohlene ausweist. Es traegt bewusst VOLLES Orange und nicht das blasse: Der Grund der Karte ist bereits `--flamme-blass`, ein blasses Band darauf verschwaende. */ /* DAS BAND LIEGT AUF DER KARTE, ES SCHIEBT SIE NICHT (3.9.2026). Als Element im Fluss kostete es 12 px Abstand plus seine eigene Hoehe — und nur die EINE Karte hatte es. Gemessen bei 1440 px: „0 €" und „590 €" standen auf 456, „990 €" auf 498. Zweiundvierzig Pixel Versatz zwischen drei Zahlen, die man nebeneinander lesen soll; man sieht es sofort und haelt es fuer schlechte Arbeit, ohne sagen zu koennen, woran es liegt. Absolut gesetzt sitzt es am oberen Rand der Karte, wo ein Abzeichen hingehoert, und die drei Zahlen stehen auf einer Linie. Die Karte bekommt dafuer oben etwas mehr Innenabstand — sonst laege das Band auf der Ueberschrift. */ .karte-band { position: absolute; top: -13px; left: 28px; background: var(--flamme); color: var(--weiss); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(224, 74, 12, 0.5); } .karte:has(> .karte-band) { position: relative; } .karte p + p { margin-top: 10px; } /* Zwei Knoepfe nebeneinander IN einer Karte — und umgebrochen, sobald sie nicht mehr nebeneinander passen. `.knopf` traegt `white-space: nowrap`, kann also nicht schmaler werden als seine Beschriftung; ohne `flex-wrap` schiebt die Reihe die Karte auf, die Karte ihre Grid-Spalte und die Spalte die ganze Seite. Genau so sind auf der Startseite 56 Pixel Querlauf entstanden. Die Knoepfe sind hier kleiner als die der Seite: Sie stehen im Nachbau einer Programmoberflaeche, nicht in ihr. */ /* Der Satz unter einem Knopf, der anders heisst als seine Nachbarn. Er steht NACH dem Knopf und nicht davor: Wer schon entschieden hat, soll nicht erst eine Begruendung lesen muessen. */ .knopf-grund { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--gedaempft); max-width: 34ch; } .karte-tat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .karte-tat .knopf { flex: 1 1 12ch; min-height: 48px; font-size: 0.96rem; padding: 0 18px; } /* DIE HERVORGEHOBENE KARTE IST WARM, NICHT SCHWARZ. Bis zum 23.8.2026 stand sie auf var(--tinte) mit heller Schrift. Das faellt auf — aber es faellt auf wie eine Warnung, nicht wie eine Empfehlung, und ein dunkler Block zwischen zwei hellen liest sich unfreundlich. Jetzt traegt sie den Akzent als GRUND und als RING: blasses Orange, zwei Pixel Rahmen, ein warmer Schatten. Sie steht damit genauso deutlich heraus — nur laedt sie ein, statt sich abzugrenzen. Und die Leistungsliste bleibt in normaler Tinte lesbar; heller Text auf dunklem Grund kostet bei sieben Stichpunkten spuerbar Lesbarkeit. */ .karte-hervor { background: var(--flamme-blass); border: 2px solid var(--flamme); box-shadow: 0 18px 44px -20px rgba(232, 93, 24, 0.45); } .zeichen { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 15px; margin-bottom: 18px; border-radius: 999px; background: var(--flamme-blass); color: var(--flamme); font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; } .karte-hervor .zeichen { background: var(--weiss); color: var(--flamme); } .zeichen.gruen { background: var(--moos-blass); color: var(--moos); } .zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 70px); align-items: center; } @media (max-width: 940px) { .zweispalt { grid-template-columns: 1fr; } } /* `height: auto` IST DER PUNKT, an dem dieses Bild ueberhaupt 3:2 wird. Bis zum 30.8.2026 fehlte es, und die Folge sah niemand als Fehler: Das `height`-Attribut im HTML (fuer die Layoutreservierung noetig, damit beim Laden nichts springt) setzt eine feste Hoehe. Eine feste Hoehe ist nicht `auto`, und ohne `auto` ignoriert der Browser `aspect-ratio` vollstaendig. Die Bilder standen dadurch 551 x 1020 im Raster — hochkant, obwohl das Stylesheet quer verlangt, und `object-fit: cover` schnitt aus einem Querformat einen schmalen senkrechten Streifen heraus. Zwei Angaben, die einander widersprechen, und die stillere gewinnt. */ .stimmungsbild { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rund); box-shadow: var(--schatten-l); } .stimmungsbild.hoch { aspect-ratio: 1 / 1; } /* --- Vorher / Nachher ---------------------------------------------------- */ .umkehr { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: stretch; margin-top: 46px; } @media (max-width: 900px) { .umkehr { grid-template-columns: 1fr; } .umkehr-pfeil { transform: rotate(90deg); justify-self: center; } } .umkehr-seite { background: var(--weiss); border-radius: var(--rund); padding: 28px; box-shadow: var(--schatten-m); } .umkehr-seite.jetzt { background: var(--tinte); color: var(--sand); box-shadow: var(--schatten-l); } .umkehr-kopf { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 16px; } .umkehr-seite.jetzt .umkehr-kopf { color: var(--flamme-hell); } .felderliste { margin: 0; padding: 0; list-style: none; } .felderliste li { font-size: 0.9rem; color: var(--gedaempft); padding: 7px 0 7px 24px; position: relative; } /* DER AUFZAEHLUNGSPUNKT IST DER DER MARKE — ein gefuellter oranger Kreis, wie in `.marke::before`. Hier stand ein leeres Kaestchen mit grauem Rand: auf der Startseite las es sich als Haekchenliste zum Abarbeiten, und auf der Preisseite stand ein UNGEKREUZTES Kaestchen neben „Website und Google-Unternehmensprofil aufgebaut" — also neben einer Leistung, die es gibt. Ein leeres Kaestchen heisst „noch nicht"; das war das Gegenteil der Aussage. Die 16px sind gerechnet, nicht geraten: 7px Innenabstand oben plus die halbe Zeilenhoehe (0,9rem x 1,68 / 2 = 12,1px) ist die Mitte der ERSTEN Zeile bei 19,1px, minus der halbe Punkt (3,5px). Auf der ersten Zeile und nicht in der Mitte des Punktes: Die Vertragsliste auf der Preisseite hat mehrzeilige Eintraege, und ein Punkt in deren Mitte schwebt neben dem Fliesstext. */ .felderliste li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--flamme); } .umkehr-pfeil { align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--flamme); color: #fff; font-size: 1.4rem; box-shadow: 0 10px 22px -8px rgba(221,85,24,.5); } .umkehr-satz { font-size: 1.22rem; font-weight: 650; line-height: 1.45; letter-spacing: -0.022em; margin: 0 0 14px; color: var(--weiss); } .umkehr-fuss { font-size: 0.95rem; color: var(--gedaempft); margin: 0; } .umkehr-seite.jetzt .umkehr-fuss { color: var(--gedaempft-d); } /* --- Die Morgenlage ------------------------------------------------------ */ .lage-liste { list-style: none; margin: 0; padding: 0; } /* DER PUNKT STEHT IN DER MITTE DES EINTRAGS, nicht an dessen Oberkante. Jede Zeile ist zweiteilig — fette Aussage plus Erklaerung darunter. Mit `flex-start` und 9px Abstand klebte der Punkt an der ersten Zeile und liess die zweite ohne Bezug darunter haengen; er sah aus wie der Punkt einer Aufzaehlung, nicht wie die Marke DIESES Eintrags. Zentriert bindet er beide Zeilen zusammen, und die Trennlinien darunter bekommen eine ruhige Achse. */ .lage-liste li { display: flex; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--linie); } .lage-liste li:last-child { border-bottom: 0; } .lage-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--flamme); flex: none; } .lage-liste b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.018em; } .lage-liste span { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--gedaempft); } /* --- Zahlen -------------------------------------------------------------- */ /* --- Preise -------------------------------------------------------------- */ .rechner { background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten-l); overflow: hidden; } .rechner-kopf { padding: 28px 30px 22px; background: var(--sand); } .rechner-kopf p:first-child { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 7px; } .rechner-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 30px; border-bottom: 1px solid var(--linie); } .rechner-zeile > div:first-child { flex: 1 1 230px; } .rechner-zeile b { display: block; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.02em; } .rechner-zeile small { display: block; margin-top: 3px; font-size: 0.89rem; color: var(--gedaempft); } .rechner-betrag { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .zaehler { display: inline-flex; align-items: center; background: var(--sand); border-radius: 999px; padding: 4px; } .zaehler button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--weiss); cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--tinte); box-shadow: var(--schatten-s); transition: transform .15s ease; } .zaehler button:hover:not(:disabled) { transform: scale(1.08); } .zaehler button:disabled { opacity: .4; cursor: not-allowed; } .zaehler output { min-width: 54px; text-align: center; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; } .rechner-summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 26px 30px 30px; background: var(--flamme-blass); } .rechner-summe span:first-child { font-size: 1.05rem; font-weight: 700; margin-right: auto; } .rechner-summe b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--flamme); } .rechner-fuss { padding: 24px 30px 28px; } .rechner-fuss .knopf { width: 100%; } .katalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 8px 36px; margin-top: 40px; } .katalog h4 { font-size: 0.79rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--flamme); margin: 20px 0 10px; } .katalog ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 0.97rem; } .katalog li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 5px 0; align-items: start; color: var(--tinte-weich); } .katalog li::before { content: ""; width: 17px; height: 17px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--moos-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 L4.7 8.4 L9.5 3.6' fill='none' stroke='%232E6047' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } /* --- Gegenüberstellung --------------------------------------------------- */ .nutzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); gap: clamp(26px, 3.5vw, 50px); margin-top: 44px; align-items: start; } @media (max-width: 940px) { .nutzen { grid-template-columns: 1fr; } } .regler-feld { background: var(--weiss); border-radius: var(--rund-s); padding: 20px 22px; margin-bottom: 12px; box-shadow: var(--schatten-s); } .regler-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; } .regler-kopf label { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; flex: 1; } .regler-kopf b { font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--flamme); white-space: nowrap; } .regler-feld small { display: block; font-size: 0.89rem; color: var(--gedaempft); margin-bottom: 12px; } .regler-feld input[type="range"] { width: 100%; margin: 0; accent-color: var(--flamme); height: 28px; cursor: pointer; } .bilanz { background: var(--weiss); border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten-l); position: sticky; top: 96px; } @media (max-width: 940px) { .bilanz { position: static; } } .bilanz-kopf { padding: 24px 28px 20px; background: var(--sand); } .bilanz-kopf p:first-child { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 6px; } .bilanz-posten { display: flex; align-items: baseline; gap: 14px; padding: 15px 28px; border-bottom: 1px solid var(--linie); } .bilanz-posten span:first-child { flex: 1; font-size: 0.97rem; font-weight: 600; } .bilanz-posten span:first-child small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--gedaempft); } .bilanz-posten b { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--moos); } .bilanz-posten.kosten b { color: var(--gedaempft); } .bilanz-summe { padding: 24px 28px 28px; background: var(--flamme-blass); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; } .bilanz-summe span:first-child { font-size: 1.05rem; font-weight: 700; margin-right: auto; } .bilanz-summe b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--flamme); } .bilanz-fuss { padding: 22px 28px 26px; } /* --- Tabelle ------------------------------------------------------------- */ .tabellenrahmen { overflow-x: auto; margin-top: 42px; border-radius: var(--rund); background: var(--weiss); box-shadow: var(--schatten-m); } table.vergleich { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.97rem; } table.vergleich th, table.vergleich td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--linie); vertical-align: top; } table.vergleich tbody tr:last-child th, table.vergleich tbody tr:last-child td { border-bottom: 0; } table.vergleich thead th { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gedaempft); white-space: nowrap; } table.vergleich tbody th { font-weight: 650; } table.vergleich td { font-variant-numeric: tabular-nums; color: var(--tinte-weich); } table.vergleich .uns { background: var(--flamme-blass); } table.vergleich .uns strong { color: var(--flamme); } /* --- Fragen -------------------------------------------------------------- */ .fragen { margin-top: 40px; max-width: 840px; display: flex; flex-direction: column; gap: 10px; } .frage { background: var(--weiss); border-radius: var(--rund-s); box-shadow: var(--schatten-s); overflow: hidden; transition: box-shadow .2s ease; } .frage[open] { box-shadow: var(--schatten-m); } .frage summary { cursor: pointer; list-style: none; padding: 20px 62px 20px 24px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; position: relative; } .frage summary::-webkit-details-marker { display: none; } .frage summary::after { content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--flamme-blass); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2.6v8.8M2.6 7h8.8' stroke='%23DD5518' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; transition: transform .22s cubic-bezier(.2,.8,.3,1); } .frage[open] summary::after { transform: translateY(-50%) rotate(135deg); } .frage summary:hover { color: var(--flamme); } .frage-text { padding: 0 56px 22px 24px; } .frage-text p { font-size: 1rem; color: var(--tinte-weich); } .frage-text p:last-child { margin-bottom: 0; } /* --- Die Staffel --------------------------------------------------------- */ .staffel { background: var(--weiss); border-radius: var(--rund); padding: clamp(28px, 4vw, 46px); box-shadow: var(--schatten-l); margin-top: 40px; } .staffel-plaetze { display: flex; gap: 6px; margin: 22px 0 8px; flex-wrap: wrap; } .staffel-plaetze i { width: 34px; height: 10px; border-radius: 999px; background: var(--linie-stark); display: block; } .staffel-plaetze i.frei { background: var(--flamme); } /* --- Fußzeile ------------------------------------------------------------ */ .fuss { background: var(--tinte); color: var(--gedaempft-d); padding: 68px 0 34px; font-size: 0.96rem; border-radius: 40px 40px 0 0; margin-top: 20px; } .fuss-raster { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px 30px; } @media (max-width: 800px) { .fuss-raster { grid-template-columns: 1fr 1fr; } } .fuss h4 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--weiss); margin-bottom: 16px; } .fuss ul { list-style: none; margin: 0; padding: 0; } .fuss li { margin-bottom: 11px; } .fuss a { text-decoration: none; } .fuss a:hover { color: var(--weiss); text-decoration: underline; } .fuss-unten { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie-d); font-size: 0.87rem; } /* --- Hilfsklassen -------------------------------------------------------- */ /* `margin-inline: auto` IST DER GRUND, WARUM DIESE KLASSEN SO HEISSEN. Bis zum 30.8.2026 fehlte es: Beide setzten nur eine Maximalbreite, und ein
mit Maximalbreite ohne automatische Seitenränder klebt am linken Rand. Gemessen im Preisblock der Startseite: Die Überschrift stand bei Mitte 484, die Karten darunter bei 720 — 236 Pixel Versatz zwischen zwei Blöcken, die zusammengehören. Man sieht es sofort und kann es nicht benennen; es wirkt nur schief. Betroffen waren 16 Blöcke auf drei Seiten. Der Name der Klasse versprach die ganze Zeit etwas, das ihre einzige Regel nicht tat. */ .mitte-schmal { max-width: var(--schmal); margin-inline: auto; } .mitte-mittel { max-width: var(--mittel); margin-inline: auto; } /* EIN ZENTRIERTER KASTEN MUSS AUCH SEINE ABSAETZE ZENTRIEREN (4.9.2026). `text-align: center` richtet nur den Text INNERHALB eines Absatzes aus. Der Absatz selbst ist durch `p { max-width: 62ch }` (Zeile 159) schmaler als sein Kasten und klebt ohne automatische Seitenraender an dessen linkem Rand. GEMESSEN unter den Preiskarten der Startseite, Fenster 1512 px: Der Kasten war 700 px breit mit Mitte bei 756 — genau wie die Kartenreihe darueber. Der Absatz darin war 500 px breit mit Mitte bei 656. Das Kleingedruckte stand also 100 Pixel zu weit links, WAEHREND seine Zeilen untereinander sauber zentriert aussahen. Genau daran sieht man den Fehler so schlecht: Er verschiebt den Block, nicht die Zeilen zueinander. Deshalb eine Klasse und kein `style="text-align:center"` mehr: Der Stil allein war die halbe Sache, und wer ihn das naechste Mal setzt, bekommt die andere Haelfte mit. */ .mittig { text-align: center; } .mittig > p, .mittig > h2, .mittig > h3 { margin-inline: auto; } /* --- Der Kopf der Preisseite --------------------------------------------- */ /* KLEINER ALS DAS h1 DER STARTSEITE, und das ist kein Geschmack. Das globale h1 steht auf clamp(2.9rem, 6.4vw, 5rem) — bei 1440 px sind das 80 Pixel und drei Zeilen. Auf dem Aufmacher der Startseite ist das richtig: Er muss Aufmerksamkeit holen. Auf der Preisseite ist sie schon da; wer „Preise" anklickt, hat die Frage gestellt. GEMESSEN, WARUM DAS NOETIG WAR: Mit dem alten Kopf begann die erste Preiskarte bei 934 Pixeln. Das Fenster ist 900 hoch. Es war also keine einzige Zahl zu sehen, ohne zu scrollen — auf der Seite, deren ganze Aufgabe die Zahl ist. Die 24ch begrenzen auf zwei Zeilen bei 1440 px und eine bei sehr breiten Fenstern; ohne die Grenze zieht `text-wrap: balance` die Zeile bis an den Rand der 1040 und der Satz zerfaellt in vier kurze Stuecke. */ .preis-h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.035em; max-width: 24ch; } .preis-kopf-satz { margin: 14px 0 0; max-width: 58ch; font-size: 1.06rem; color: var(--tinte-weich); } /* Der Abstand zu den Karten kommt von `.karten` (46px). Zusammen mit dem Satz darueber sind das genug Luft — ein eigener Abstand hier waere der zweite. */ .abstand-oben { margin-top: 30px; } .hinweiszeile { font-size: 0.88rem; color: var(--gedaempft); } .abschluss h2 { max-width: 18ch; } /* --- Das Handy in der Hand ---------------------------------------------- Das Foto zeigt eine leere weisse Displayflaeche — mit Absicht: Ein erzeugtes Bild haette dort eine ERFUNDENE Oberflaeche gezeigt, und das waere eine Luege ueber das Produkt. Die echte Ansicht liegt als HTML darueber, millimetergenau auf die vermessene Displayflaeche gelegt. Die Prozentwerte unten sind gemessen, nicht geschaetzt (Bild 580 × 880). */ /* GEMESSEN, NICHT GESCHAETZT. Im Foto (580x880) liegt die weisse /* DIE ECKEN WAREN DER FEHLER. /* Das Display sitzt hinter Glas: eine Spur Licht von oben links. */ /* Alles im Display skaliert mit der Bildbreite, damit es auf jedem Gerät stimmig bleibt — feste Punktgrößen liefen bei 320 px Bildbreite aus dem Rahmen. */ /* Alles im Display haengt an der Bildbreite: feste Punktgroessen liefen bei 320 px Bildbreite aus dem Rahmen. */ /* --- Preisrechner: zwei Zähler nebeneinander ---------------------------- */ .rechner-zeile.zwei { align-items: flex-start; } .zaehler-klein { display: inline-flex; align-items: center; background: var(--sand); border-radius: 999px; padding: 3px; } .zaehler-klein button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--weiss); cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--tinte); box-shadow: var(--schatten-s); } .zaehler-klein button:disabled { opacity: .4; cursor: not-allowed; } .zaehler-klein output { min-width: 44px; text-align: center; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; } /* --- Der Weg zum Termin -------------------------------------------------- */ .schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 44px; counter-reset: schritt; } .schritt { background: var(--weiss); border-radius: var(--rund); padding: 28px 26px 30px; box-shadow: var(--schatten-m); position: relative; } .schritt-nr { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 18px; background: var(--flamme); color: #fff; font-size: 1.15rem; font-weight: 800; box-shadow: 0 8px 18px -6px rgba(221,85,24,.5); } .schritt.frei .schritt-nr { background: var(--moos); box-shadow: 0 8px 18px -6px rgba(46,96,71,.5); } .schritt h3 { margin-bottom: 9px; } .schritt p { font-size: 0.98rem; color: var(--tinte-weich); margin: 0; } /* --- Anfrageformular ----------------------------------------------------- */ /* `[hidden]` MUSS GEWINNEN, AUCH GEGEN `display: flex`. Der Browser setzt fuer `[hidden]` nur `display: none` in seinem eigenen Stilblatt — jede eigene `display`-Regel schlaegt das. `.formular` ist ein Flex-Container, und deshalb blieb das Formular nach dem Absenden STEHEN, waehrend die Bestaetigung darunter erschien. Beides gleichzeitig, mit einem Knopf, den man ein zweites Mal druecken kann. Aufgefallen ist es nicht beim Ansehen, sondern beim Messen: `is_hidden` sagte nein, obwohl das Skript `hidden` gesetzt hatte. */ [hidden] { display: none !important; } .formular { display: flex; flex-direction: column; gap: 14px; } /* DIE MELDEZEILE DES ANFRAGEFORMULARS. Sie stand bis zum 31.8.2026 unformatiert da — was nicht auffiel, weil das Skript sie nie beschrieben hat (falsche Kennung, siehe web.js). Zwei Zustände, nie beide zugleich. */ .formular-antwort:empty { display: none; } .formular-antwort { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.5; padding: 12px 15px; border-radius: 12px; } .antwort-gut { background: var(--moos-blass); color: var(--moos); } .antwort-schlecht { background: var(--flamme-blass); color: var(--flamme); } /* JEDES