/* > **Gepflegt von:** `frag-anna-website` Erzeugt von `npm run gestaltung` aus `stil/formularseite/formularseite.css`. Stand: siehe gestaltung-manifest.json. Nicht von Hand ändern: Änderungen hier gehen beim nächsten Lauf verloren. Gehört etwas hinein, schreib es in deine Abschlussmeldung. Nach rahmen.css laden, nur auf /b/ (modus-seite). Braucht --akzent und die Body-Klasse branche-. */ /* Formularseite /b/: Hintergrund mit Muster je Beruf, Formular mittig (Auftrag Jonathan über Uschi, 26.09.2026: »die Seite soll auch geil aussehen«). Gepflegt von der Website-Werft; die App-Werft übernimmt diese Regeln in app/public/assets/rahmen.css (body.modus-seite.seite-eigenstaendig), Dateien aus _gemeinsam/gestaltung/formularseite/. Einbau: LIESMICH dort. Prinzip: Eine SVG je Beruf als Maske (mask-image), die Farbe kommt aus var(--akzent) des Büros. Damit reicht eine Datei für jede Hausfarbe. Die Linienfarbe wird aus der Hausfarbe und der Textfarbe gemischt, damit auch eine sehr helle Hausfarbe auf hellem Grund und eine sehr dunkle auf dunklem Grund sichtbar bleibt, aber nie laut wird. Hell oder dunkel folgt dem Gerät (prefers-color-scheme), nicht der Formularfarbe »hell/dunkel« des Büros. Fassung 5.1 (Jonathan, 26.09.2026): Wird /b/ in einen fremden Rahmen gesetzt (ein Büro baut den Link selbst als iframe ein), darf der Hintergrund »definitiv nicht mehr zu sehen« sein. Deshalb hängt JEDE Regel dieser Datei an body.modus-seite.seite-eigenstaendig. Die Klasse setzt nur eigenstaendig.js, und nur bei window.self === window.top. Ohne sie (gerahmt, ohne JavaScript, bei jedem Fehler) greift allein rahmen.css: kein Muster, kein Schein, keine Zentrierung, der Fuß wie eingebettet. */ body.modus-seite.seite-eigenstaendig { --seite-grund: color-mix(in oklab, var(--akzent) 5%, #F6F7F4); --seite-linie: color-mix(in oklab, var(--akzent) 60%, #0E2744); --seite-deckkraft: .06; /* Standard für fehlende oder unbekannte Branche (auch künftige): neutrales Punktraster, nie eine leere Fläche. */ --seite-muster: url("muster-neutral.svg"); --seite-kachel: 28px; min-height: 100vh; min-height: 100svh; margin: 0; display: flex; flex-direction: column; /* Ein zarter Schein aus der Hausfarbe hinter dem Formular: herzlich, und er hebt den Kasten vom Muster ab. */ background: radial-gradient(ellipse 50% 45% at 50% 45%, color-mix(in oklab, var(--akzent) 8%, transparent), transparent 70%) fixed, var(--seite-grund); position: relative; isolation: isolate; } @media (prefers-color-scheme: dark) { body.modus-seite.seite-eigenstaendig { --seite-grund: color-mix(in oklab, var(--akzent) 10%, #0A1D33); --seite-linie: color-mix(in oklab, var(--akzent) 55%, #FFFFFF); --seite-deckkraft: .07; } } /* Muster je Beruf (Klasse setzt die App am body, nur bei modus-seite: branche-vermessung | branche-brandschutz | branche-pruefsachverstaendiger). */ body.modus-seite.seite-eigenstaendig.branche-vermessung { --seite-muster: url("muster-vermessung.svg"); --seite-kachel: 160px; --seite-deckkraft: .09; } /* Vermessung etwas kräftiger als das neutrale Raster (Jonathan zu Fassung 4: »vermessung hintergrund darf etwas mehr durchkommen«): Die Kacheln sind locker gezeichnet und wirkten bei .06 wie leer. */ @media (prefers-color-scheme: dark) { body.modus-seite.seite-eigenstaendig.branche-vermessung { --seite-deckkraft: .10; } } /* Brandschutz und Prüfung: keine Kachel, sondern je eine große Zeichnung über die ganze Fläche (Jonathan, 26.09.2026: »die zwei gehen geiler«; danach »backround bei allen dezenter bitte«). Außen erkennbar, zur Mitte hin weich ausgeblendet, damit das Formular frei steht. */ body.modus-seite.seite-eigenstaendig.branche-brandschutz { --seite-muster: url("zeichnung-brandschutz.svg"); } body.modus-seite.seite-eigenstaendig.branche-pruefsachverstaendiger { --seite-muster: url("zeichnung-pruefung.svg"); } body.modus-seite.seite-eigenstaendig.branche-brandschutz, body.modus-seite.seite-eigenstaendig.branche-pruefsachverstaendiger { --seite-deckkraft: .15; } @media (prefers-color-scheme: dark) { body.modus-seite.seite-eigenstaendig.branche-brandschutz, body.modus-seite.seite-eigenstaendig.branche-pruefsachverstaendiger { --seite-deckkraft: .17; } } body.modus-seite.seite-eigenstaendig.branche-brandschutz::before, body.modus-seite.seite-eigenstaendig.branche-pruefsachverstaendiger::before { -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, transparent 0 38%, #000 88%), var(--seite-muster); mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, transparent 0 38%, #000 88%), var(--seite-muster); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 100% 100%, cover; mask-size: 100% 100%, cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Das Muster liegt als eigene Ebene hinter allem, fest zum Fenster (kein Mitscrollen, ruhiger), und läuft zu den Rändern hin aus, damit es um das Formular herum am stärksten ist und nichts hart abschneidet. */ body.modus-seite.seite-eigenstaendig::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--seite-linie); opacity: var(--seite-deckkraft); -webkit-mask-image: var(--seite-muster); mask-image: var(--seite-muster); -webkit-mask-size: var(--seite-kachel); mask-size: var(--seite-kachel); -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Formular mittig: margin-block auto im Flex-Kasten zentriert senkrecht und fällt auf 0, sobald das Formular höher ist als der Bildschirm; dann beginnt es oben mit Abstand, nichts wird abgeschnitten. */ body.modus-seite.seite-eigenstaendig { padding-block: 24px; box-sizing: border-box; } body.modus-seite.seite-eigenstaendig .app { width: min(100% - 24px, 760px); margin: auto auto 0; box-sizing: border-box; position: relative; z-index: 1; /* über der ruhigen Zone des Fußes, sonst schneidet sie den Schatten an */ box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px -24px rgba(14,39,68,.35); border-radius: var(--r-gross, 20px); } /* Formular und Fuß sind eine Gruppe: Die Gruppe steht senkrecht in der Mitte, der Fuß direkt unter dem Formular (nicht unten am Fenster). */ body.modus-seite.seite-eigenstaendig .fuss { width: min(100% - 24px, 760px); margin: 12px auto auto; } /* Fuß der eigenständigen Seite (Jonathan, 26.09.2026, zu Fassung 3: »hier müsste das logo auf jeden fall hin«). Der Fuß liegt auf dem Seitengrund, nicht im Kasten. Deshalb folgen seine Farben dem Gerät wie der Grund, nicht der Wahl hg-hell/hg-dunkel des Büros; sonst wäre die Marke bei einem dunkel gewählten Kasten auf hellem Grund weiß. */ body.modus-seite.seite-eigenstaendig .fuss { --fuss-text: #4A5A70; justify-content: center; text-align: center; gap: 0 10px; padding: 12px 12px 4px; color: var(--fuss-text); position: relative; z-index: 0; } @media (prefers-color-scheme: dark) { body.modus-seite.seite-eigenstaendig .fuss { --fuss-text: rgba(255,255,255,.74); } } body.modus-seite.seite-eigenstaendig .fuss a { color: var(--fuss-text); text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Der Trennpunkt steht im Link (rahmen.css); inline-block, damit die Unterstreichung ihn nicht zum Strich macht. */ body.modus-seite.seite-eigenstaendig .fuss a + a:not(.fuss-produkt)::before { display: inline-block; color: var(--fuss-text); opacity: .6; text-decoration: none; } /* Ruhige Zone: eine weiche Fläche aus dem Seitengrund hinter dem Fuß blendet Muster und Zeichnung aus, wo auch immer der Fuß gerade steht (unten am Fenster oder nach dem Scrollen). Bewusst eine eigene Ebene statt einer zweiten Maske auf dem Muster: Die Maske ist fest zum Fenster, der Fuß nicht. */ body.modus-seite.seite-eigenstaendig .fuss::before { content: ""; position: absolute; inset: -36px 0 -16px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--seite-grund) 70%, transparent); } /* Der Vermerk ist auf dieser Seite der Absender: eigene Zeile, mittig, direkt unter dem Formular, über den Pflichtlinks. Wortmarke 18 px hoch (in der Einbettung 14 px), unten bündig mit der Schriftlinie von »Erstellt mit«. */ body.modus-seite.seite-eigenstaendig .fuss-produkt { order: -1; flex-basis: 100%; justify-content: center; align-items: baseline; gap: 8px; margin: 0; font-size: .8125rem; letter-spacing: .01em; color: var(--fuss-text); opacity: 1; transition: opacity .15s ease; } body.modus-seite.seite-eigenstaendig .fuss-produkt img, body.hg-dunkel.modus-seite.seite-eigenstaendig .fuss-produkt img { height: 18px; width: auto; filter: none; opacity: .9; transition: opacity .15s ease; } /* Am Handy brechen die drei Pflichtlinks um; ein Trennpunkt am Zeilenanfang sähe aus wie ein Fehler. Dort trennt der Abstand allein. */ @media (max-width: 600px) { body.modus-seite.seite-eigenstaendig .fuss { gap: 0 18px; } body.modus-seite.seite-eigenstaendig .fuss a + a:not(.fuss-produkt)::before { display: none; } } body.modus-seite.seite-eigenstaendig .fuss-produkt:hover img, body.modus-seite.seite-eigenstaendig .fuss-produkt:focus-visible img { opacity: 1; } body.modus-seite.seite-eigenstaendig .fuss-produkt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; } /* Ohne Vermerk (bezahlter Tarif, abgewählt) braucht es nichts Eigenes: Es bleiben die Pflichtlinks, mittig, mit derselben ruhigen Zone. */ body.modus-seite.seite-eigenstaendig .fuss:not(:has(.fuss-produkt)) { padding-top: 16px; } /* Handy: schmaler Rand von 12 px statt randlos. Begründung: Der Rand zeigt das Muster und damit, dass es die Seite des Büros ist und kein nacktes Formular; 24 px Breite kosten bei 360 px nur 7 %, alle Felder bleiben einspaltig. */ @media (max-width: 600px) { body.modus-seite.seite-eigenstaendig { padding-block: 12px; } body.modus-seite.seite-eigenstaendig .app { width: calc(100% - 24px); border-radius: var(--r, 12px); } } @media (prefers-reduced-transparency: reduce) { body.modus-seite.seite-eigenstaendig::before { opacity: calc(var(--seite-deckkraft) * .6); } } @media print { body.modus-seite.seite-eigenstaendig::before { display: none; } }