/* ========================================================================= clevagents — Teaser-Landingpage Eine einzige Stildatei. Keine Bibliothek, kein Bauschritt, kein CDN. ACHTUNG DATENSCHUTZ: In dieser Datei darf NIE ein @import oder ein url() auf einen fremden Server stehen (fonts.googleapis.com, cdn.*, unpkg, …). Sobald das passiert, lädt der Browser des Besuchers von dort — und das Verkaufsargument «Daten bleiben in der Schweiz» ist auf der eigenen Startseite widerlegt. Schriften und Bilder kommen ausschliesslich aus diesem Ordner. Geschrieben wird deshalb in der Systemschrift des Geräts. GRUNDENTSCHEID 04.08.2026: Die Seite ist NUR DUNKEL. Der leuchtende Bogen unter dem Hero trägt die ganze Seite; auf weissem Grund gäbe es ihn nicht, und ein zweites Farbschema wäre doppelte Arbeit für einen Teaser mit vier Abschnitten. Deshalb gibt es keinen Hell-/Dunkel-Umschalter mehr und kein @media (prefers-color-scheme). FOLGE DARAUS FÜRS LOGO: Die Kopfzeile ist durchgehend dunkel und undurchsichtig — sie wechselt beim Scrollen ihre Farbe NICHT. Deshalb gehört dort die HELLE Logo-Fassung hinein (logo/clevagents-hell.svg, «Clev» in #f1f5f9). Die dunkle Fassung (logo/clevagents.svg, «Clev» in rgb(23,39,66)) ist für helle Flächen und wäre hier fast unsichtbar. Wer die Kopfzeile je hell oder halbdurchsichtig macht, MUSS das Logo mitwechseln — sonst verschwinden Sechseck und «Clev», und nur das blaue «Agents» bleibt stehen. Der Fehler fällt kaum auf, weil die Kopfzeile dann trotzdem «richtig» aussieht. DER LICHTEFFEKT IST REINES CSS (Radialverläufe + Weichzeichner), keine Bilddatei. Damit ist er in jeder Fenstergrösse scharf und kostet nichts. Woher die Gestaltung kommt (echte Vorlagen mit Links): docs/marketing/design-referenzen.md ========================================================================= */ /* ------------------------------------------------------------------------- 1. FARBEN UND MASSE (die «Marken-Festlegung») Die drei Blautöne und das helle Grau sind NICHT frei gewählt, sondern aus website/logo/clevagents-hell.svg ausgelesen — damit Logo und Seite dieselbe Sprache sprechen. Herkunft je Farbe steht daneben. ------------------------------------------------------------------------- */ :root { /* Flächen */ --grund: #05070d; /* Fast-Schwarz mit blauem Unterton */ --grund-hoch: #090d17; /* leicht abgehobene Fläche (Formular-Abschnitt) */ --grund-kasten: #0d1220; /* Eingabefelder */ /* Schrift */ --text: #f1f5f9; /* aus dem Logo: Schriftfarbe der hellen Fassung */ --text-leise: #aab6c9; /* Fliesstext — Kontrast 9,8:1 auf --grund */ --text-still: #7d8ba2; /* Kleingedrucktes — Kontrast 5,8:1 auf --grund */ /* Marke */ --blau: #2062d9; /* Knopffüllung; aus dem Logo-Blau rgb(35,106,233) leicht abgedunkelt, damit weisse Schrift darauf sicher WCAG AA erreicht */ --blau-hell: #7aa8ff; /* Verknüpfungen und Akzente auf Dunkel */ --blau-leucht: #4c8dff; /* der Lichtbogen — aufgehelltes Markenblau */ /* Linien */ --linie: rgba(255, 255, 255, 0.09); --linie-stark: rgba(255, 255, 255, 0.17); /* Zustände */ --fokus: #9dc0ff; --fehler: #ff9d9d; --gut: #7ee0b0; /* Masse */ --breite: 1160px; --breite-eng: 660px; --rand: clamp(1.25rem, 5vw, 2.5rem); --radius: 14px; --radius-gross: 22px; /* Systemschrift — nichts wird nachgeladen */ --schriftart: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color-scheme: dark; } /* ------------------------------------------------------------------------- 2. GRUNDLAGEN ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Wer im Betriebssystem «Bewegung reduzieren» eingeschaltet hat, bekommt eine vollständig stille Seite: kein weiches Scrollen und kein Atmen des Lichts. Das ist keine Höflichkeit, sondern nötig — Bewegung im Augenwinkel löst bei manchen Menschen Übelkeit oder Migräne aus. Die Seite verliert dabei nichts: der Lichtbogen bleibt, er steht nur still. Hier ist die EINE Stelle dafür — neue Bewegung gehört mit in diese Liste. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .held__schein, .held__schimmer, .held__bogen { animation: none; opacity: 1; } } body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schriftart); font-size: 1rem; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Verhindert, dass der übergrosse Lichtbogen die Seite seitlich schiebt. */ overflow-x: hidden; } img, svg { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; } p { margin: 0; } a { color: var(--blau-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: #a6c4ff; } /* Tastaturbedienung muss auf Dunkel sichtbar bleiben — das ist der einzige Weg durch die Seite für alle, die keine Maus benutzen. */ :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(76, 141, 255, 0.35); color: #fff; } ::placeholder { color: var(--text-still); opacity: 1; } /* * Hier stand am 04.08.2026 kurzzeitig eine Hilfsklasse .marke, die den Namen * im Fliesstext wie im Logo setzte («Clev» hell, «Agents» blau). Sie hatte * genau einen Einsatzort: die Fusszeile. Seit dort das ECHTE Logo steht, * hatte sie keinen mehr und ist entfernt worden. * Wer den Namen je wieder als Schrift statt als Bild setzen will, baut sie * neu — und benutzt dafür --blau-hell, nicht das satte Logo-Blau: Letzteres * ist auf Schwarz nicht lesbar genug. */ /* Für Vorlese-Software vorhanden, für das Auge nicht. Wird für Abschnitts-Überschriften benutzt, die gestalterisch nicht auftauchen sollen — ohne sie wäre die Seitengliederung für blinde Besucherinnen eine Wüste. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Der erste Tabulator-Sprung: direkt zum Inhalt. */ .sprungmarke { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.7rem 1.1rem; background: var(--blau); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 600; } .sprungmarke:focus { top: 1rem; color: #fff; } /* ------------------------------------------------------------------------- 3. HÜLLE — die gemeinsame Spaltenbreite aller Abschnitte ------------------------------------------------------------------------- */ .huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .huelle--eng { max-width: var(--breite-eng); } /* ------------------------------------------------------------------------- 4. KOPFZEILE — nur das Logo, sonst nichts Undurchsichtig dunkel, ohne Zustandswechsel beim Scrollen (siehe die Logo-Notiz ganz oben). Der frühere «Eintragen»-Knopf rechts ist am 04.08.2026 entfallen (das Eingabefeld steht ohne Blättern darunter). Damit ist das Logo das einzige Element hier. DIE LOGO-GRÖSSE BLEIBT, WIE SIE IST. Sie war am 04.08. kurzzeitig vergrössert, weil das Logo nun alleine steht — Andreas hat das ausdrücklich zurückgenommen: «Passt so, wie wir es schon hatten. Nichts ändern.» Bitte nicht erneut anfassen. ------------------------------------------------------------------------- */ .kopf { position: relative; z-index: 3; padding-block: clamp(1rem, 2.4vw, 1.5rem); } .wortmarke { display: inline-block; line-height: 0; border-radius: 6px; } .wortmarke img { width: clamp(132px, 16vw, 178px); height: auto; } /* ------------------------------------------------------------------------- 5. KNÖPFE ------------------------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.78rem 1.35rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Der gefüllte Knopf trägt einen weichen Schein im Markenblau — grosser Radius, niedrige Deckkraft. Er soll wertig wirken, nicht leuchten wie ein Spielknopf; deshalb liegt der Schein UNTER dem Knopf und nicht als Ring um ihn herum. Beim Überfahren mit der Maus wird er etwas kräftiger. */ .knopf--voll { background: var(--blau); color: #fff; box-shadow: 0 6px 22px -6px rgba(32, 98, 217, 0.75), 0 0 30px -6px rgba(76, 141, 255, 0.45); } .knopf--voll:hover { background: #2a70ef; color: #fff; box-shadow: 0 8px 28px -6px rgba(42, 112, 239, 0.9), 0 0 42px -4px rgba(76, 141, 255, 0.6); } /* Bei Tastaturbedienung wird der Schein zurückgenommen, damit der Fokusring nicht im Leuchten untergeht. Der Ring ist der einzige Hinweis darauf, wo man gerade steht — er hat Vorrang vor der Optik. */ .knopf--voll:focus-visible { box-shadow: 0 6px 18px -8px rgba(32, 98, 217, 0.5); } .knopf--rand { background: transparent; border-color: var(--linie-stark); color: var(--text); } .knopf--rand:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.05); color: var(--text); } /* Hier standen .knopf--klein (der Knopf in der Kopfzeile) und .knopf--breit (der Absende-Knopf des früheren zweiten Formulars). Beide sind am 04.08.2026 mit ihren Elementen weggefallen und hatten keinen Benutzer mehr. Es gibt nur noch zwei Knopf-Arten: gefüllt (Eintragen) und mit Rand («Zurück zur Startseite» auf den Bestätigungsseiten). */ /* ------------------------------------------------------------------------- 6. HERO Füllt den ersten Bildschirm. Aufbau von hinten nach vorne: .held__schein weiche Lichtwolke, steigt vom unteren Rand auf .held__bogen ein sehr grosser Kreis; sichtbar ist nur seine obere Kante — das ergibt den Bogen, der die Seite trägt .held__innen der Text darüber ------------------------------------------------------------------------- */ .held { position: relative; isolation: isolate; /* Schneidet den übergrossen Lichtbogen an der Unterkante des Hero ab. OHNE DIESE ZEILE reicht der Kreis (bis zu 2400 px hoch) weit in den nächsten Abschnitt hinein und man sieht den Bogen ein zweites Mal, mit einer harten Kante an der Abschnittsgrenze dazwischen. Bitte nicht entfernen — dafür ist unten .held::after da, das die letzten Bildpunkte in die Seitenfarbe ausblendet. */ overflow: hidden; display: flex; /* «safe» ist die Sicherung gegen einen oben abgeschnittenen Titel: Sobald der Inhalt höher ist als der Platz, hört das Zentrieren auf und der Inhalt beginnt oben. Ohne «safe» schiebt die Zentrierung die Hälfte des Überschusses über den oberen Fensterrand hinaus — dann fehlt die Kopfzeile und der Titel ist angeschnitten. Angeschnitten werden darf nur der Bogen unten, nie der Titel oben. */ align-items: safe center; /* «erster Bildschirm» abzüglich der Kopfzeile; svh statt vh, damit die ein- und ausfahrende Adressleiste auf dem Handy nichts abschneidet. */ min-height: min(90svh, 880px); /* Die Abstände sind am 04.08.2026 enger geworden, nachdem der Satz über dem Feld und der Datenschutz-Aufklapper dazugekommen sind. Grund: Der Bogen MUSS auf dem ersten Bildschirm sichtbar bleiben — er trägt die Seite. Wer hier wieder Luft einbaut, prüft vorher bei 1280 × 800, ob der Scheitel des Bogens noch im Bild liegt. */ padding-block: clamp(1.25rem, 4vh, 2.75rem) clamp(8rem, 17vh, 11rem); } .held__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* --- Die Lichtwolke ----------------------------------------------------- Die breite Grundhelligkeit, die vom unteren Rand aufsteigt. Sie atmet sehr langsam (18 Sekunden) und wandert dabei ein paar Bildpunkte nach oben — das ist der «da kommt etwas hoch»-Eindruck. Bewegt werden nur Deckkraft und Verschiebung; beides rechnet die Grafikkarte, es ruckelt also nicht und kostet keine Rechenzeit beim Blättern. */ .held__schein { position: absolute; left: 50%; bottom: 0; width: min(150vw, 1800px); height: 92%; transform: translateX(-50%); /* Geometrie exakt wie in der ersten Fassung (Höhe, Lage, Verlaufsform). Angehoben sind NUR die Deckkraft-Werte (0.34 → 0.44, 0.15 → 0.20) — etwas mehr Glanz, gleiche Form. */ background: radial-gradient(52% 62% at 50% 100%, rgba(76, 141, 255, 0.44) 0%, rgba(46, 105, 209, 0.20) 40%, rgba(35, 106, 233, 0.00) 70%); animation: atmen 18s ease-in-out infinite alternate; will-change: opacity, transform; } /* --- Der aufsteigende Schimmer ------------------------------------------ Eine sehr weiche, breite Lichtzunge direkt über dem Bogen. Sie ist stark weichgezeichnet und wandert langsam seitlich hin und her, damit der Bogen lebt statt bloss zu liegen. Absichtlich in einer anderen Dauer (13 s) als die Lichtwolke — sonst pulsieren beide im Gleichtakt und es wirkt wie ein Blinken statt wie Licht. */ .held__schimmer { position: absolute; left: 50%; top: 62%; width: min(112vw, 1400px); height: 34%; transform: translateX(-50%); border-radius: 50%; /* Das hellere Blau über dem Bogen — der «Schimmer». Bewusst zurückhaltend: Er soll Glanz geben, nicht die Fläche fluten. */ background: radial-gradient(50% 50% at 50% 62%, rgba(200, 224, 255, 0.46) 0%, rgba(108, 166, 255, 0.26) 45%, rgba(76, 141, 255, 0) 76%); filter: blur(44px); animation: wandern 13s ease-in-out infinite alternate; will-change: opacity, transform; } /* Die Ausschläge sind am 04.08.2026 vergrössert worden — Andreas sah das Pulsieren vorher schlicht nicht («Die sollte mehr leuchten, so ein cooles, beruhigendes, pulsierendes Leuchten»). Der Charakter bleibt «atmen»: Die Dauern sind unverändert lang, nur der Weg zwischen hell und dunkel ist weiter. Wer hier weiter aufdreht, kippt es ins Blinken — dann lieber den Kern heller machen als die Dauer verkürzen. */ @keyframes atmen { from { opacity: 0.66; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(-7px); } } @keyframes wandern { from { opacity: 0.52; transform: translateX(-55%) translateY(8px) scale(0.96); } to { opacity: 1; transform: translateX(-45%) translateY(-10px) scale(1.04); } } /* --- Der Bogen ---------------------------------------------------------- Ein Kreis, dessen Scheitel bei 87 % der Hero-Höhe sitzt; alles darunter liegt ausserhalb des Bildes (.held hat overflow: hidden). Sichtbar bleibt nur die obere Kante — das ist der Bogen. ⚠️ DIE GEOMETRIE HIER IST ZURÜCKGEDREHT (04.08.2026) und bitte nicht erneut anfassen. Sie stammt aus der ersten Fassung: Scheitel bei 87 %, Breite clamp(680px, 195vw, 2400px), Verlaufsstopps 98,4 / 99,2 / 100. Ein Versuch, den Bogen «deutlich kräftiger» zu machen, hatte statt der Helligkeit die FORM verändert (Scheitel auf 93 %, engere Lichtebene) — Ergebnis laut Andreas: «Viel zu wenig von dieser Mondoberfläche zu sehen» und ein harter weisser Strich an der Kante. Merksatz daraus: Mehr Glanz heisst Deckkraft und Streuradius ändern, NIE Form und Lage. 87 % ist kein Zufallswert: Der Scheitel muss UNTER der letzten Textzeile liegen — das ist der Datenschutz-Aufklapper. Sonst steht Text mitten im hellen Licht und ist nicht mehr lesbar. Den nötigen Abstand dafür schafft die untere Polsterung von .held; wer am Hero etwas hinzufügt oder wegnimmt, prüft beides zusammen nach. Zwei Ringe im selben Verlauf: unten ein breiter weicher Schein, darüber eine dünne helle Kante. Die Prozentwerte sind der Radius — 99,2 % heisst «fast ganz aussen am Kreisrand». */ .held__bogen { position: absolute; left: 50%; top: 87%; width: clamp(680px, 195vw, 2400px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: /* Die helle Kante. Die Deckkraft bleibt UNTER 1 und die Rampe davor ist breiter als dahinter — genau das macht den Übergang stufenlos. Mit voller Deckkraft (1.0) entsteht an dieser Stelle ein harter weisser Strich quer durchs Blau; das war der Fehler vom 04.08. */ radial-gradient(closest-side, rgba(5, 7, 13, 0) 98.1%, rgba(214, 232, 255, 0.95) 99.2%, rgba(5, 7, 13, 0) 100%), /* Die «Mondoberfläche»: der weiche Schein direkt unter der Kante. */ radial-gradient(closest-side, rgba(5, 7, 13, 0) 95.8%, rgba(96, 156, 255, 0.34) 99.4%, rgba(76, 141, 255, 0) 100%); /* Zwei Schatten: der weite trägt den Schein in die dunkle Fläche hinauf, der engere gibt den Hof um die Kante. Gegenüber der ersten Fassung nur moderat erhöht (110 → 150 px Radius). */ box-shadow: 0 0 150px 24px rgba(76, 141, 255, 0.42), 0 0 56px 6px rgba(150, 190, 255, 0.26); animation: bogen-glimmen 16s ease-in-out infinite alternate; will-change: opacity; } @keyframes bogen-glimmen { from { opacity: 0.72; } to { opacity: 1; } } /* Der Kreis wird vom overflow:hidden des Hero unten abgeschnitten. Ohne diesen Verlauf sieht man dort eine schnurgerade Kante quer über den Bildschirm — der Effekt verrät sich als Trick. Der Verlauf blendet die letzten Bildpunkte in den Seitenhintergrund aus. Liegt über dem Licht (z-index 0) und unter dem Text (z-index 1). */ .held::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 9vh, 110px); z-index: 0; pointer-events: none; /* Wie in der ersten Fassung: erreicht die Seitenfarbe bei 88 %. */ background: linear-gradient(to bottom, rgba(5, 7, 13, 0), var(--grund) 88%); } .held__innen { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } /* --- Die Pille über dem Titel ------------------------------------------- */ .pille { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.36rem 0.95rem 0.36rem 0.75rem; border: 1px solid var(--linie-stark); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: var(--text-leise); font-size: 0.86rem; letter-spacing: 0.01em; } .pille__punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blau-leucht); box-shadow: 0 0 10px 2px rgba(76, 141, 255, 0.75); } /* --- Der grosse Titel ---------------------------------------------------- */ .held__titel { margin-top: clamp(0.9rem, 2.4vh, 1.7rem); max-width: 17ch; font-size: clamp(2.45rem, 6.2vw, 5rem); line-height: 1.04; letter-spacing: -0.032em; } /* Das eine Wort in der Markenfarbe — es meint die Agenten, also trägt es ihre Farbe (siehe Kommentar am

in index.html). WARUM --blau-hell und nicht --blau: Das satte Markenblau (#2062d9) erreicht auf dem Seitenhintergrund nur 4,1:1. Für sehr grossen Text ist das nach WCAG zwar zulässig (Grenze 3:1), es sackt aber neben dem weissen Rest der Zeile sichtbar ab und wirkt wie ein Fehler. #7aa8ff kommt auf 8,4:1, bleibt erkennbar dieselbe Farbfamilie und hält die Zeile zusammen. Kein zusätzliches Leuchten: Der Titel steht bereits über dem Lichtbogen; ein zweiter Schein macht ihn unruhig statt festlich. */ .held__titel-marke { color: var(--blau-hell); } /* --- Der eine Satz ------------------------------------------------------- */ .held__satz { margin-top: clamp(0.75rem, 1.8vh, 1.25rem); max-width: 56ch; color: var(--text-leise); font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.6; text-wrap: pretty; } /* --- Die Aufforderung ---------------------------------------------------- «Seien Sie einer der Ersten.» — ergänzt am 04.08.2026. Sie trägt kräftiger als der erklärende Satz darunter (heller, etwas grösser, halbfett), bleibt aber deutlich unter dem Untertitel: Sie soll einladen, nicht mit der Überschrift um Aufmerksamkeit streiten. Die Abstände sind knapp gehalten — der Hero hat auf einem flachen Fenster (1440 × 700) keine Höhe zu verschenken. */ .held__ruf { margin-top: clamp(0.7rem, 1.7vh, 1.15rem); color: var(--text); font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; } /* --- Der Satz direkt über dem Eingabefeld -------------------------------- Bewusst eine Stufe leiser als der Untertitel darüber (kleiner, gedämpfter): Er soll den Weg zum Feld bahnen, nicht mit der Überschrift konkurrieren. */ .held__zusatz { margin-top: clamp(0.4rem, 0.9vh, 0.65rem); max-width: 46ch; color: var(--text-still); font-size: clamp(0.94rem, 1.15vw, 1.02rem); line-height: 1.55; text-wrap: pretty; } /* --- Feld und Knopf in EINER Zeile --------------------------------------- */ .schnell { display: flex; align-items: center; gap: 0.4rem; width: min(100%, 480px); margin-top: clamp(1.05rem, 2.6vh, 1.7rem); padding: 0.34rem; border: 1px solid var(--linie-stark); border-radius: 999px; /* Der Bogen liegt hinter dem Feld — ohne diese leichte Trübung würde die Eingabezeile im Licht verschwimmen. */ background: rgba(10, 14, 24, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .schnell__feld { flex: 1 1 auto; min-width: 0; padding: 0.62rem 0.5rem 0.62rem 1.05rem; border: 0; background: transparent; color: var(--text); font: inherit; } /* Der Fokus wird an der ganzen Zeile gezeigt, nicht am nackten Feld — sonst sähe er auf dem runden Rahmen aus wie ein Fehler. */ .schnell__feld:focus { outline: none; } .schnell:focus-within { border-color: var(--fokus); box-shadow: 0 0 0 3px rgba(157, 192, 255, 0.22); } .schnell__knopf { flex: none; padding-inline: 1.45rem; } /* Das Formular im Hero ist mittig gesetzt wie alles darüber. */ .held__innen .formular { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; } /* --- Die Einwilligung --------------------------------------------------- Eine einzige Zeile unter dem Feld statt eines eigenen Kastens. Sie ersetzt seit dem 04.08.2026 zugleich die frühere Zeile «Nur die Erst-Information, jederzeit abmeldbar» — beides zusammen war doppelt gesagt. Das Häkchen ist Pflicht und bleibt es: ohne Einwilligung darf hier nichts gesammelt werden. */ .zusage { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; width: min(100%, 480px); margin-top: 0.8rem; text-align: left; /* Bewusst --text-leise und nicht --text-still: Diese Zeile steht direkt im Lichtschein des Bogens. Licht dahinter hebt den Hintergrund an und senkt damit den Kontrast. Der hellere Ton lässt genug Reserve — und es ist die rechtlich tragende Zeile der Seite, die muss man mühelos lesen können. */ color: var(--text-leise); font-size: 0.83rem; line-height: 1.5; cursor: pointer; } .zusage input { width: 1rem; height: 1rem; margin: 0.16rem 0 0; accent-color: var(--blau); cursor: pointer; } /* --- Der leise Verweis am Ende der Einwilligungszeile --------------------- ERSETZT SEIT DEM 04.08.2026 den früheren Aufklapper unter dem Feld (.datenschutz / .datenschutz__aufklapper / .datenschutz__inhalt sind mit ihm weggefallen). Andreas: «Die Information soll da sein, aber bitte nicht herunterklappen, unterstrichen sein und so weiter.» Also: kleiner als der Einwilligungstext, gedämpfte Farbe, KEINE dauerhafte Unterstreichung — die kommt erst beim Überfahren mit der Maus. Kein Pfeil, kein Kasten, kein Knopf-Anschein. Er soll da sein, aber nicht ziehen. */ .zusage__mehr { white-space: nowrap; /* «Datenschutz» bricht nie mitten im Wort um */ /* Ein Zwischenton zwischen --text-leise (Einwilligung) und --text-still (Kleingedrucktes). GEMESSEN, nicht geschätzt: --text-still ergibt an dieser Stelle nur 3,9:1 — die Zeile liegt im Lichtschein des Bogens, und Licht dahinter hebt den Hintergrund an. 4,5:1 sind das Minimum, damit man den Verweis auf den Datenschutz überhaupt lesen kann; dieser Ton hält rund 5,3:1 und bleibt trotzdem sichtbar leiser als der Text daneben. Wer ihn weiter dämpfen will, misst vorher nach. */ color: #94a2b8; font-size: 0.94em; /* eine Spur kleiner als die Zeile ringsum */ text-decoration: none; } .zusage__mehr:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .zusage__mehr:focus-visible { color: var(--text); } /* --- Das kleine Fenster mit dem Datenschutzhinweis ------------------------ Ein echtes : Escape schliesst, der Tastaturfokus bleibt darin, der Rest der Seite ist so lange nicht bedienbar. Das Fenster steht ganz am Ende der Seite (siehe index.html) und liegt deshalb ausserhalb der Hero-Höhe. */ .hinweis { width: min(100% - 2rem, 34rem); max-height: min(80svh, 34rem); padding: 0; border: 0; background: transparent; overflow: auto; overscroll-behavior: contain; color: var(--text-leise); } .hinweis::backdrop { background: rgba(2, 4, 9, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .hinweis__kasten { padding: 1.35rem 1.5rem 1.25rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-gross); background: var(--grund-hoch); font-size: 0.9rem; line-height: 1.6; text-align: left; } .hinweis__titel { margin-bottom: 0.9rem; color: var(--text); font-size: 1.08rem; } .hinweis__liste { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; } .hinweis__liste strong { color: var(--text); font-weight: 600; } .hinweis__schliessen { margin-top: 1.25rem; } /* OHNE JavaScript gibt es kein Fenster. Dann — und nur dann — wird aus dem ein ganz normaler, unauffälliger Abschnitt am Seitenende, zu dem der Link springt. Die Klasse setzt das Skript in index.html, sobald es sicher ist, dass showModal() vorhanden ist. Das ist der Grund, weshalb der Text nur EINMAL in der Seite steht: eine zweite Kopie wäre rechtlich tragender Text, der irgendwann abweicht. */ html:not(.hat-fenster) .hinweis { display: block; position: static; width: 100%; max-width: var(--breite-eng); max-height: none; margin: 0 auto clamp(3rem, 7vh, 4.5rem); padding-inline: var(--rand); overflow: visible; } html:not(.hat-fenster) .hinweis__schliessen { display: none; } /* ------------------------------------------------------------------------- 7. DIE DREI ANDEUTUNGEN Bewusst ohne Kacheln, Symbole und Häkchen: ein Teaser deutet an, er zählt nicht auf. Nur ein dünner Strich über jedem Titel. ------------------------------------------------------------------------- */ .andeutungen { padding-block: clamp(3.5rem, 9vh, 6rem); } .andeutungen__gitter { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .andeutungen__gitter { grid-template-columns: repeat(3, 1fr); } } .andeutung { padding-top: 1.35rem; border-top: 1px solid var(--linie); } .andeutung__titel { font-size: clamp(1.12rem, 1.5vw, 1.28rem); letter-spacing: -0.012em; } .andeutung__text { margin-top: 0.65rem; color: var(--text-leise); font-size: 0.985rem; text-wrap: pretty; } /* ── Abbinder unter den drei Andeutungen ──────────────────────────────── Er sagt, dass die drei Punkte Beispiele sind und nicht der Leistungsumfang. Warum mittig und mit den zwei feinen Strichen: Die drei Andeutungen stehen linksbündig in Spalten; ein linksbündiger vierter Absatz läse sich wie eine vergessene vierte Spalte. Zentriert und flankiert wird er als Abschluss der Gruppe gelesen — er gehört zu allen dreien, nicht zu einer. Bewusst zurückhaltend (kleiner und leiser als der Fliesstext daneben): Der Satz ist ein Hinweis, keine vierte Botschaft. */ .andeutungen__abbinder { margin: clamp(2.2rem, 5vw, 3.4rem) auto 0; max-width: 46ch; display: flex; align-items: center; gap: 1.1rem; color: var(--text-still); font-size: 0.94rem; text-align: center; text-wrap: balance; } .andeutungen__abbinder::before, .andeutungen__abbinder::after { content: ""; flex: 1 1 auto; height: 1px; /* Zu den Rändern hin auslaufend, damit keine harte Linienkante entsteht. */ background: linear-gradient(90deg, transparent, rgb(148 162 184 / 0.28)); } .andeutungen__abbinder::after { background: linear-gradient(90deg, rgb(148 162 184 / 0.28), transparent); } /* Auf schmalen Geräten fressen die Striche den Text auf — dort nur der Satz. */ @media (max-width: 34rem) { .andeutungen__abbinder { display: block; } .andeutungen__abbinder::before, .andeutungen__abbinder::after { display: none; } } /* ------------------------------------------------------------------------- 8. DIE VERTRAUENSZEILE ------------------------------------------------------------------------- */ .vertrauen { padding-bottom: clamp(3.5rem, 9vh, 6rem); } .vertrauen__satz { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.35rem; border: 1px solid var(--linie); border-radius: var(--radius); background: rgba(255, 255, 255, 0.022); color: var(--text-leise); font-size: 0.965rem; } .vertrauen__zeichen { flex: none; color: var(--blau-hell); } .vertrauen__zeichen svg { width: 21px; height: 21px; } /* ------------------------------------------------------------------------- 9. DER HONIGTOPF Am 04.08.2026 ist hier viel weggefallen. Bis dahin gab es einen zweiten Eintragungs-Abschnitt am Seitenende mit eigenem Formular (.band, .feld, .feld-reihe, .hakenfeld, .formular__fuss, .datenschutz-notiz …). Er ist ersatzlos entfernt worden, weil die Seite damit zwei Eingabestellen hatte. Die zugehörigen Regeln sind mit ihm gegangen — sie hatten keinen Benutzer mehr. Das einzige Formular steht jetzt im Hero (Abschnitt 6). ------------------------------------------------------------------------- */ /* Der Honigtopf gegen Spam-Automaten: für Menschen unsichtbar und nicht anspringbar. Bewusst NICHT display:none — manche Automaten prüfen darauf und überspringen das Feld dann. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------------------- 10. FUSSZEILE Genau zwei Dinge: Logo und Kontaktadresse. Sonst nichts. Bewusst ohne Personen- oder Adressangaben (Entscheid Andreas, 02.08.2026), seit dem 04.08.2026 auch ohne «ein Vorhaben in Gründung» und ohne den Datenschutz-Aufklapper — der steht jetzt oben beim Eingabefeld. ------------------------------------------------------------------------- */ .fuss { border-top: 1px solid var(--linie); padding-block: clamp(2.25rem, 5vh, 3.25rem); font-size: 0.885rem; color: var(--text-still); } .fuss__reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; } /* Kleiner als in der Kopfzeile — unten ist das Logo Absender, nicht Auftritt. */ .fuss__logo { width: clamp(112px, 13vw, 136px); height: auto; } .fuss__kontakt a { color: var(--text-leise); } .fuss__kontakt a:hover { color: var(--blau-hell); } /* ------------------------------------------------------------------------- 11. TEXTSEITEN UND SERVERMELDUNGEN Diese Klassen erzeugt PHP (danke.html, bestaetigen.php, austragen.php, kern.php). Sie müssen hier stehen bleiben, sonst sind die Bestätigungs- und Austragungsseiten ungestylt. ------------------------------------------------------------------------- */ .textseite { padding-block: clamp(2.5rem, 8vh, 4.5rem); color: var(--text-leise); } .textseite h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 1.1rem; color: var(--text); } .textseite h2 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.7rem; color: var(--text); } .textseite p { margin-bottom: 1rem; } .textseite ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin-bottom: 1.2rem; } .textseite strong { color: var(--text); } .meldung { margin-bottom: 1.4rem; padding: 1.05rem 1.25rem; border: 1px solid var(--linie-stark); border-left-width: 3px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); } .meldung--gut { border-left-color: var(--gut); } .meldung--fehler { border-left-color: var(--fehler); } .zurueck { margin-top: 0.6rem; } /* ------------------------------------------------------------------------- 12. SEHR SCHMALE GERÄTE ------------------------------------------------------------------------- */ @media (max-width: 430px) { /* Nebeneinander wird das Eingabefeld auf dem Handy zu schmal zum Lesen — dort stehen Feld und Knopf untereinander, in derselben Hülle. */ .schnell { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.5rem; border-radius: var(--radius-gross); } .schnell__feld { padding: 0.72rem 0.85rem; } .schnell__knopf { width: 100%; } .held__titel { max-width: none; } /* Auf ganz schmalen Geräten stehen Logo und Kontaktadresse untereinander, sonst quetscht sich beides in eine zu enge Zeile. */ .fuss__reihe { flex-direction: column; align-items: flex-start; gap: 0.7rem; } }