/* KUKANILEA Webtools — Musterbriefe. Eigenständige Subdomain, eigenes Mini-Design-System. "Papier & Tinte" (Betreiberentscheid 2026-09-25) gilt fuer ALLE Seiten dieses Hosts: warmes Dokumenten-Creme als Grund, Buchdruck-Tinte als Schrift, Kupfer als Akzent, Karten reinweiss mit scharfer Papierkante. Die Startseite (start.css) liest dieselben Werte -- ein Owner. Kupfer #c6842e erreicht auf Weiss nur 3,1:1 und traegt deshalb nur Flaechen und Linien (WCAG 1.4.11 verlangt dort 3:1). Schrift, Links, Knoepfe und Fokus nehmen das tiefe Kupfer #8a5a1c: 5,9:1 auf Weiss, 5,6:1 auf Creme, 5,1:1 auf dem hellen Kupfer #f6ecdd (WCAG 1.4.3: 4,5:1). Die Namen --blue* bleiben als Rollen stehen (Akzent, Akzent dunkel, Akzentkante, Akzentflaeche) -- sie tragen seit dem Umbau kein Blau mehr. */ :root { --cream: #ffffff; --ink: #0f172a; --ink-2: #1e293b; --ink-3: #475569; --ink-4: #5a6678; --line: #e2e8f0; --line-2: #cbd5e1; --white: #ffffff; --paper: #faf9f6; --pergament: #f5f3ef; --kupfer: #c6842e; --kupfer-tief: #8a5a1c; --blue: var(--kupfer-tief); --blue-2: #6b4413; --blue-soft: #e8d3b5; --blue-tint: #f6ecdd; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --green: #18553a; --green-soft: #e4f1e9; --green-border: #bfe0cd; --warn-ink: #97491a; --warn-soft: #fde9d4; --radius: 14px; --radius-lg: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(15,23,42,.04); --shadow: 0 2px 8px rgba(15,23,42,.04); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", "SF Mono", "IBM Plex Mono", monospace; --maxw: 880px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Erhöhte Spezifität statt !important: [hidden] muss jede unconditional display-Regel einzelner Klassen (z. B. .sig-preview{display:flex}, .a4-blk img{display:block}) zuverlässig schlagen — gleiche Spezifität wird per Quellreihenfolge von späteren Regeln übertrumpft, daher ein zusätzlicher Typ-Selektor (html body [hidden]) statt nur body [hidden]. */ html body [hidden] { display: none; } body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .wide { max-width: 1080px; } a { color: var(--blue); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: var(--white); padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 12px; top: 12px; } /* ── Header ── */ .site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: .01em; } .brand-sub { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .brand-sub.tool-suite { color: var(--blue); } .site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .site-nav a { color: var(--ink-3); font-size: 14px; font-weight: 600; text-decoration: none; } .site-nav a:hover, .site-nav a[aria-current] { color: var(--blue); } .header-actions a.text-link { font-size: 14px; font-weight: 600; text-decoration: none; } @media (max-width: 720px) { .header-row { flex-wrap: wrap; } .site-nav { order: 3; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); } } /* ── Hero / intro ── */ .tool-hero { padding: 44px 0 8px; } .tool-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--kupfer-tief); margin-bottom: 10px; } .tool-hero h1 { font-family: var(--serif); font-weight: 600; color: var(--ink-2); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; margin: 0 0 12px; letter-spacing: -0.02em; text-wrap: balance; } .tool-hero p.lede { font-size: 17px; color: var(--ink-3); max-width: 60ch; margin: 0 0 0; } .privacy-note { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; padding: 14px 16px; background: var(--pergament); border: 1px solid var(--line); border-left: 3px solid var(--kupfer); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2); } .privacy-note svg { flex: none; margin-top: 2px; } /* ── Tool card / workspace ── */ .tool-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; margin: 28px 0 40px; } .tool-card-title { margin: 0 0 14px; font-size: 17px; font-weight: 650; color: var(--ink-2); letter-spacing: -0.005em; } /* Abschnittsnummer: klein, Kupfer, keine Pille. */ .abschnitt-nr { display: inline-block; min-width: 1.6em; margin-right: 6px; font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--kupfer-tief); vertical-align: 1px; } .tool-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--blue); color: var(--white); } .btn-primary:hover:not(:disabled) { background: var(--blue-2); } .btn-primary:disabled { background: var(--line-2); color: var(--ink-4); cursor: not-allowed; } .btn-ghost { background: var(--white); color: var(--ink-2); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .btn-ghost:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line-2); color: var(--ink-2); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } .tool-status { font-size: 14px; color: var(--ink-3); } .tool-status[data-state="error"] { color: var(--warn-ink); } .tool-status[data-state="done"] { color: var(--green); font-weight: 600; } .result-panel { margin-top: 20px; padding: 18px; background: var(--green-soft); border: 1px solid var(--green-border); border-radius: var(--radius); display: none; } .result-panel.is-visible { display: block; } .result-panel h3 { margin: 0 0 6px; font-size: 15px; color: var(--green); } /* ── Landing: tool grid ── */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 28px 0 48px; } .tool-tile { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .tool-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-soft); } .tool-tile .tt-icon { color: var(--blue); margin-bottom: 12px; } .tool-tile h2 { font-size: 16px; margin: 0 0 6px; } .tool-tile p { font-size: 13.5px; color: var(--ink-3); margin: 0; } /* ── Footer ── */ .site-footer { border-top: 1px solid var(--line); padding: 32px 0 40px; margin-top: 40px; } .ft-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-4); } .ft-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .ft-links a { color: var(--ink-4); text-decoration: none; } .ft-links a:hover { color: var(--blue); } /* ── Formular (Brief-Generator, Preisvergleich) ── */ .job-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 20px; } .job-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .job-field.full { grid-column: 1 / -1; } .job-field label { font-size: 13px; font-weight: 700; color: var(--ink-2); } .job-field input[type="text"], .job-field input[type="date"], .job-field input[type="email"], .job-field input[type="tel"], .job-field textarea, .job-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font-sans); color: var(--ink); background: var(--white); } .job-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; } /* Fokus: scharfe Tinte statt weichem Halo. */ .job-field input:focus, .job-field textarea:focus, .job-field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); } .job-field .field-hint { font-size: 12px; color: var(--ink-4); } .job-field .char-count { font-size: 11.5px; color: var(--ink-4); text-align: right; } @media (max-width: 640px) { .job-form { grid-template-columns: 1fr; } } .field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; } .field-row label { font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 10px; } .field-row .field-label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-right: 2px; } .chip-group { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; } .chip:hover { border-color: var(--blue); color: var(--blue); } .chip.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); } .chip:disabled { opacity: .45; cursor: not-allowed; } .chip:disabled:hover { border-color: var(--line-2); color: var(--ink-2); } /* Toggle-Checkbox-Zeile (Falt-/Lochmarken an/aus) */ .toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; } .toggle-row label { font-size: 14px; color: var(--ink-2); cursor: pointer; } /* Optik-Einstellungen (Akzentfarbe/Schrift) — Kanon: kukanilea-kassenbuch/fristen */ .ip-style-controls { display: flex; flex-direction: column; gap: 14px; } .style-control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .style-control-label { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; } .color-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .color-swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid var(--white); background: var(--sw); box-shadow: 0 0 0 1px var(--line-2); } .color-swatch.active { box-shadow: 0 0 0 1px var(--sw), 0 0 0 3px var(--white), 0 0 0 4px var(--ink-3); } .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; } .segmented-btn { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; } .segmented-btn.active { background: var(--blue); color: var(--white); } /* PDF-Vorschau */ .pdf-preview { margin-top: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); overflow: hidden; } .pdf-preview iframe { display: block; width: 100%; height: 60vh; border: 0; } /* Vergleichstabelle (Postversand-Preisvergleich) */ .compare-table-wrap { overflow-x: auto; margin-top: 20px; } table.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; } table.compare-table th, table.compare-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } table.compare-table thead th { color: var(--ink-4); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } table.compare-table tbody tr:hover { background: var(--blue-tint); } table.compare-table td.price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blue); } table.compare-table td.price-best { color: var(--green); } table.compare-table .table-note { color: var(--ink-4); font-weight: 400; white-space: normal; } @media (max-width: 520px) { .tool-card { padding: 20px; } .pdf-preview iframe { height: 45vh; } } /* ── Composer: Formular links, Blatt rechts (Geschäftsbrief-Generator) ───── Bis zum 2026-09-25 wurde direkt im A4-Blatt getippt; die Felder sassen dort im Massstab des Blatts (auf dem Telefon rund 6 px Schrift). Jetzt ist das Blatt reine Ausgabe: jedes Element darin ist ein Op aus demselben Plan (din5008-kern.js), den auch das PDF zeichnet. Ab 992 px nebeneinander. Die Vorschauspalte klebt unter der gemessenen Kopfleiste (--kv-kopf, brief-ui.js) und ist genau so hoch wie der Rest des Fensters; das Blatt passt sich in Breite und Hoehe ein (fitPage). */ .composer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin: 28px 0 48px; } .composer-side { display: flex; flex-direction: column; min-width: 0; } .composer-side > .tool-card { margin: 0 0 16px; } .composer-main { position: sticky; top: calc(var(--kv-kopf, 108px) + 12px); height: calc(100vh - var(--kv-kopf, 108px) - 24px); display: flex; flex-direction: column; min-width: 0; min-height: 0; } .composer-main > .a4-blaetter { flex: 1; min-height: 0; overflow: auto; } @media (max-width: 991px) { .composer { grid-template-columns: 1fr; } .composer-main { position: static; height: auto; } .composer-main > .a4-blaetter { overflow-x: auto; overflow-y: visible; } } .preview-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: -6px 0 8px; } /* Auf dem Telefon skaliert "Einpassen" die A4-Seite auf rund 42 % — der 11-pt-Brieftext landet bei etwa 6 CSS-Pixeln. "Lesbar" setzt 100 % und laesst die Seite waagerecht scrollen, damit man dort ueberhaupt tippen kann. */ .zoom-group { gap: 6px; } .page-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-4); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); } .page-badge[data-multi="1"] { color: var(--blue); border-color: var(--blue-soft); background: var(--blue-tint); } /* Die Blaetter sind fuer Screenreader stumm; der Satz sagt, auf welcher Seite Gruss und Unterschrift stehen. */ .schluss-hinweis { font-size: 12.5px; color: var(--ink-4); flex-basis: 100%; } /* Die vier Farben des Plans (INK, WEICH, LINIE, AKZENT) als eine Wahrheit fuer Vorschau und PDF. Die pdf-lib-Werte stehen in buildPdf(); hier ihre Hex-Entsprechung, der Akzent kommt zur Laufzeit aus loadStylePrefs(). */ .a4-blaetter { --a4-farbe-ink: #0f1729; --a4-farbe-weich: #4a5769; --a4-farbe-linie: #b2bfcc; --a4-farbe-akzent: var(--blue); display: flex; flex-direction: column; /* safe: ist das Blatt breiter als die Spalte, bleibt der linke Rand erreichbar. */ align-items: safe center; gap: 22px; overflow-x: auto; padding: 2px 2px 12px; } .a4-blaetter:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* Die Schrift des Blatts ist die des PDF: Helvetica, Times oder Courier. */ [data-schrift="sans"] .a4-op-text { font-family: Helvetica, Arial, sans-serif; } [data-schrift="serif"] .a4-op-text { font-family: "Times New Roman", Times, serif; } [data-schrift="mono"] .a4-op-text { font-family: "Courier New", Courier, monospace; } .a4-page { position: relative; width: var(--a4-breite, 210mm); height: var(--a4-hoehe, 297mm); background: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--line); margin: 0 auto; flex: none; transform-origin: top left; font-family: var(--font-sans); } /* ── Gerenderte Plan-Ops: jedes Blatt der Vorschau ────────────────────────── Dieselben Ops, die baueBriefPdf() an pdf-lib gibt. Keine zweite Auszeichnung, kein zweites Layout — nur die Grundlinie des Plans wird in eine Kastenoberkante umgerechnet (kastenOben in din5008-kern.js). */ .a4-ops { position: absolute; inset: 0; pointer-events: none; } .a4-op-text { position: absolute; line-height: 1; white-space: pre; font-family: var(--font-sans); } .a4-op-linie { position: absolute; } .a4-op-bild { position: absolute; display: block; object-fit: contain; } .a4-op-qr { position: absolute; display: block; } .a4-op-qr svg { display: block; width: 100%; height: 100%; } /* Anhang- und Ratgeberseite (a4-vorschau.js): nur im Druck, als letztes Blatt. Auf dem Bildschirm steht der Hinweis darauf beim Export. */ .a4-anhang-blatt { display: none; } .a4-page { overflow: hidden; } .a4-blatt-nummer { position: absolute; right: 8mm; top: 6mm; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; } /* KUK-WASSERZEICHEN:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN. Quelle: shared/kukanilea-webtool-common/webtool-common.js (Objekt WATERMARK), verteilt von scripts/ops/sync_webtool_common.py, geprueft von check_webtool_common_sync.py. Werte: docs/webtools/document-output-standard.md Abschnitt 6 -- "Created by kukanilea.de" oben-links und "kukanilea.de" unten-rechts, 6pt, 25 %, Slate-Grau (druckstabil, seit 2026-09-26). Die Werte des Vertrags stehen als Custom Properties in :root. Sie sind der Exportweg des Partials: ein Verbraucher, der eine Marke anders verankern muss, liest --kuk-wm-rand/--kuk-wm-oben/--kuk-wm-unten, statt die Grundlinien-Umrechnung ein zweites Mal nachzubilden. Auf dem Bildschirm liegen die Marken im Vorschaublatt (position:absolute im Element mit position:relative). Im Druck ist das falsch: ein absolut positioniertes Kind des Blattes erscheint nur auf Seite 1 -- genau der Zustand bis zum 2026-09-02. position:fixed bezieht sich im Seitenmodell auf die SEITENBOX und wird deshalb auf jeder Druckseite wiederholt. Im Druck sitzen die Ecken an den Ecken des Satzspiegels statt 36pt vom Papierrand: die Seitenraender bestimmt dort @page, nicht dieses Partial. Das ist die sichere Randzone des Seitenmodells (Abschnitt 6, "Ecken"). Das gilt fuer FLIESSENDE Dokumente -- ein Inhalt, den der Browser selbst auf Druckseiten verteilt. Werkzeuge mit EINEM DOM-Element JE SEITE (Brief, Begleitdokument) brauchen das Gegenteil: dort ist jedes Blatt bereits eine Druckseite, absolute Marken erscheinen also ohnehin auf jeder, und `fixed` laege bei @page-Rand 0 auf der Papierkante, also in der nicht druckbaren Zone. Fuer sie traegt das Seitenelement die Klasse `kuk-wm-seite`; die Variante darunter haelt die Marken im Blatt und in der sicheren Randzone. Eine eigene Zahlenmenge braucht dafuer niemand mehr. */ :root { --kuk-wm-rand: 36pt; --kuk-wm-oben: 20pt; --kuk-wm-unten: 19pt; --kuk-wm-groesse: 6pt; --kuk-wm-deckkraft: 0.25; --kuk-wm-farbe: #64748b; } .kuk-wm { position: absolute; z-index: 0; margin: 0; font-size: var(--kuk-wm-groesse); line-height: 1; font-weight: 600; letter-spacing: .02em; color: var(--kuk-wm-farbe); opacity: var(--kuk-wm-deckkraft); pointer-events: none; user-select: none; white-space: nowrap; } .kuk-wm-oben-links { left: var(--kuk-wm-rand); top: var(--kuk-wm-oben); } .kuk-wm-oben-rechts { right: var(--kuk-wm-rand); top: var(--kuk-wm-oben); } .kuk-wm-mitte { left: 50%; top: 50%; transform: translate(-50%, -50%); } .kuk-wm-unten-links { left: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); } .kuk-wm-unten-rechts { right: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); } @media print { .kuk-wm { position: fixed; } .kuk-wm-oben-links { left: 0; top: 0; } .kuk-wm-oben-rechts { right: 0; top: 0; } .kuk-wm-unten-links { left: 0; bottom: 0; } .kuk-wm-unten-rechts { right: 0; bottom: 0; } /* Seite je Element: das Blatt IST die Druckseite. */ .kuk-wm-seite .kuk-wm { position: absolute; } .kuk-wm-seite .kuk-wm-oben-links { left: var(--kuk-wm-rand); top: var(--kuk-wm-oben); } .kuk-wm-seite .kuk-wm-oben-rechts { right: var(--kuk-wm-rand); top: var(--kuk-wm-oben); } .kuk-wm-seite .kuk-wm-unten-links { left: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); } .kuk-wm-seite .kuk-wm-unten-rechts { right: var(--kuk-wm-rand); bottom: var(--kuk-wm-unten); } } /* KUK-WASSERZEICHEN:ENDE */ /* ── Unterschrift-Panel (Sidebar) ── */ .sig-panel { margin-top: 14px; } .sig-canvas-wrap { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--paper); height: 140px; } .sig-canvas-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; } .sig-qr-wrap { margin-top: 14px; text-align: center; } .sig-qr-wrap canvas { border-radius: var(--radius-sm); border: 1px solid var(--line); } .sig-preview { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 12px; justify-content: space-between; } .sig-preview img { max-height: 44px; max-width: 140px; } /* ── Unternehmensprofil (Regel 19/20, Kanon: kukanilea-mahnung) ── */ .biz-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; } .biz-profile-status { font-size: 12px; color: var(--ink-4); margin: 8px 0 0; } .biz-advanced-fields { margin-top: 14px; } .biz-advanced-fields summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue); margin: 4px 0 10px; } /* ── Rechtstext-Bausteine (Regel 19 Punkt 3) ── */ .legal-block-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .legal-block-option { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .legal-block-option label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .legal-block-option input { margin-top: 3px; } .legal-block-option p { margin: 4px 0 0 24px; font-size: 12.5px; color: var(--ink-3); } /* ── Verlauf (Dimension 4: Entwurf-Historie) ── */ .history-bar { margin: 0 0 6px; } .history-panel { margin: 0 0 20px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .history-intro { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-4); } .history-empty { margin: 0; font-size: 13.5px; color: var(--ink-4); } .history-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); } .history-row:first-child { border-top: 0; padding-top: 0; } .history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .history-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--blue-tint); color: var(--blue-2); } .history-badge.is-locked { background: var(--line-2); color: var(--ink-3); } .history-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .history-ts { font-size: 12px; color: var(--ink-4); } .history-actions { display: flex; align-items: center; gap: 8px; flex: none; } .history-locked-hint { font-size: 12px; color: var(--ink-4); font-style: italic; } /* ── Vorlagen (Dimension 8: Maximaler Werkzeug-Ertrag) ── */ .preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; } .preset-label { font-size: 12px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; } /* Hinweis auf Zeichen, die die PDF-Standardschriften nicht darstellen koennen. */ .zeichen-hinweis { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn-ink, #a86b00); background: var(--warn-soft, #fdf6e7); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); } /* ── Druck (Standard Abschnitt 5) ──────────────────────────────────────────── Gedruckt wird das Blatt, nicht die Anwendung. Jede A4-Seite ist ein eigenes DOM-Element und wird deshalb genau eine Druckseite; `@page`-Rand 0 haelt die DIN-Masse auf dem Papier (ein Satzspiegel-Rand wuerde das Blatt verkleinern und das Anschriftfeld aus dem Umschlagfenster schieben). Umbrueche mit `break-*`, nicht mit dem veralteten `page-break-*`. `@page` gilt fuer das ganze Dokument und laesst sich nicht je Seite waehlen. Dieses Stylesheet bedient aber vier Seiten (Start, Generator, Preisvergleich, Signatur-Seite). Nur der Generator druckt ein Blatt; die uebrigen bekommen den Rand, den @page hier abgibt, als Innenabstand zurueck. Traeger ist die Klasse `druckt-blatt` am des Generators — sichtbar im Markup statt implizit ueber eine Selektorakrobatik. */ @page { size: A4 portrait; margin: 0; } @media print { html, body { background: #fff; margin: 0; } /* Seiten ohne A4-Blatt: der Seitenrand wandert in den Inhalt. */ body:not(.druckt-blatt) { padding: 15mm; } .druckt-blatt .site-header, .druckt-blatt .site-footer, .druckt-blatt .tool-hero, .druckt-blatt .composer-side, .druckt-blatt .preview-meta, .druckt-blatt .skip-link, .druckt-blatt .history-panel, .druckt-blatt .export-leiste, /* Seit 2026-09-25 traegt auch diese Unterseite die Werkzeug-Schale; ihr Abschnitt "Passend zu diesem Werkzeug" kam sonst als eigene Druckseite hinter die Briefblaetter (4 statt 3 Seiten, brief-dokumentausgabe.spec). */ .druckt-blatt .tool-weiter, .druckt-blatt .kuk-launcher { display: none !important; } .druckt-blatt, .druckt-blatt main, .druckt-blatt .composer { display: block; margin: 0; padding: 0; } .druckt-blatt .container, .druckt-blatt .container.wide { max-width: none; width: auto; padding: 0; margin: 0; } .druckt-blatt .composer-main { display: block; position: static; height: auto; overflow: visible; padding: 0; } /* Bildschirmregel .composer-main > .a4-blaetter ist spezifischer als .a4-blaetter. */ .druckt-blatt .composer-main > .a4-blaetter { overflow: visible; } .druckt-blatt .kv-mobilleiste, .druckt-blatt .gb-blanko { display: none !important; } /* A4 ist 794 px breit -- die Regeln unter 992 px greifen auch im Druck. Der Platz fuer die Leiste Formular/Vorschau wuerde eine leere Seite anhaengen. */ body.hat-mobilleiste { padding-bottom: 0 !important; } .kv-mobilleiste { display: none !important; } .a4-blaetter { display: block; gap: 0; overflow: visible; padding: 0; } .a4-page { zoom: 1 !important; /* Die Vorschau verkleinert per transform und negativen Aussenabstaenden (a4-vorschau.js) -- gedruckt wird in voller Groesse. */ transform: none !important; margin: 0 !important; box-shadow: none; break-after: page; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .a4-page:last-child { break-after: auto; } .a4-anhang-blatt { display: block; position: relative; overflow: hidden; width: 210mm; height: 297mm; margin: 0; background: #fff; break-before: page; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .a4-blaetter[hidden] .a4-anhang-blatt { display: none; } /* Bedienhinweise sind Werkzeug, nicht Brief. */ .a4-blatt-nummer, .a4-sig-anker { display: none !important; } /* Die Herkunftsmarke im Druck steht vollstaendig im erzeugten Partial (Markerblock oben): jedes `.a4-page` traegt die Klasse `kuk-wm-seite` (gesetzt in geschaeftsbrief-generator.js), und die Variante `.kuk-wm-seite` haelt die Marken im Blatt statt an der Seitenbox. Bis zum 2026-09-03 stand hier stattdessen eine eigene Regelgruppe mit `--kuk-wm-*`-Werten, die das Werkzeug selbst ausrechnete — dieselbe Grundlinien-Umrechnung wie in sync_webtool_common.py, nur in JavaScript und mit anderer Rundung an der halben Stelle. */ } /* KUK-ZIELGROESSEN:ANFANG -- ERZEUGT, NICHT VON HAND AENDERN. Quelle: scripts/ops/sync_webtool_common.py Zielgroessen fuer Pointer und Touch: WCAG 2.2 SC 2.5.8 verlangt 24x24, das Produktziel sind rund 44 Pixel fuer haeufig benutzte Schaltflaechen. */ .btn-sm, .chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .vz-radio-group label, .chip-group > label { min-height: 44px; display: flex; align-items: center; gap: 8px; } /* Die Vorlagenleiste auf schmalen Bildschirmen. Gemessen am 2026-09-16 auf `prozent` bei 390 Pixeln: die Leiste bricht auf vier Zeilen um und wird 200 Pixel hoch -- ein Viertel des Bildschirms, VOR dem ersten Eingabefeld. Das erste Feld begann dadurch erst nach 1,12 Bildschirmhoehen; der Mensch musste scrollen, bevor er die Aufgabe ueberhaupt sah. Die Hoehe kommt nicht von der Schrift, sondern von der 44-Pixel-Zielgroesse oben: sie multipliziert sich mit jeder Umbruchzeile. Zwei Varianten gemessen, bevor eine gebaut wurde: Ausgang 200 px erstes Feld bei 1,12x eine Zeile 44 px erstes Feld bei 0,93x Leiste ausgeblendet 0 px erstes Feld bei 0,86x Das Ausblenden bringt 0,07 Bildschirme mehr und kostet die Vorlagen ganz. Eine Zeile bringt das Feld in den ersten Viewport und laesst sie stehen -- fuer wiederkehrende Nutzer sind sie echte Beschleuniger, kein Beiwerk. Der Tastaturweg traegt ohne Zutun: die Knoepfe sind fokussierbar, und der Browser scrollt sie beim Tabben in den Blick (gemessen: 480 Pixel). Anders als bei den breiten Tabellen, deren Inhalt NICHT fokussierbar ist und die deshalb einen eigenen Tabstopp brauchten, waere hier ein Handler Ueberbau. Nur bis 600 Pixel. Wo Platz ist, bleiben die Vorlagen vollstaendig sichtbar -- dieselbe Funktion, andere Darstellung. */ @media (max-width: 600px) { .preset-bar { flex-wrap: nowrap; overflow-x: auto; } .preset-bar > * { flex: none; } } /* Die Fusszeilen-Navigation. Am 2026-09-16 ueber vier Archetypen gemessen: "Impressum", "Datenschutz" und "KUKANILEA Buerosoftware" sind 20 Pixel hoch bei `padding: 0`, und sie stehen untereinander so dicht, dass der 24-Pixel-Kreis des Erfolgs- kriteriums den Nachbarn beruehrt. Damit greift KEINE der beiden Ausnahmen von SC 2.5.8: Spacing nicht, weil die Kreise sich schneiden -- und Inline nicht, weil `nav.ft-links` eine Navigation ist und kein Satz. Der Kommentar oben nimmt Inline-Links im Fliesstext bewusst aus; diese hier sind keine. Drei Werkzeuge von vieren trugen den Befund, das vierte nur deshalb nicht, weil seine Fusszeile weiter auseinanderstand. Ein gemeinsamer Owner, ein Fix: vier Pixel Innenabstand machen aus 20 genau 24, ohne dass sich die Schrift oder das Bild der Seite aendert. */ .ft-links a { display: inline-flex; align-items: center; min-height: 24px; } /* Waagerechtes Scrollen im Hauptweg. Ein Grid-Kind traegt von sich aus `min-width: auto` und kann deshalb nicht unter die Mindestbreite seines Inhalts schrumpfen. Eine einzige lange Auswahloption genuegt, um die ganze Spalte breiter zu machen als den Bildschirm -- gemessen am 2026-09-12 auf fristen.kukanilea.de: 421 Pixel Scrollbreite bei 390 Pixeln Viewport, verursacht von einem ` kommt aus dem laengsten Eintrag, und `min-width: auto` laesst es nicht darunter. Am 2026-09-22 ueber 186 Werkzeuge bei 320 CSS px gemessen. Es war die haeufigste Einzelursache fuer waagerechtes Seitenscrollen: "Windows-1252 / ANSI (ältere Excel-Exporte)" macht ein Feld 331 px breit, wo 238 zur Verfuegung stehen -- und die ganze Seite wird breiter als das Fenster. WCAG 1.4.10 verlangt 320 CSS px ohne zweidimensionales Scrollen; 320 px sind ausdruecklich auch der Zoomfall 400 % an einem 1280-px-Bildschirm, also kein Sonderfall fuer kleine Telefone. Dieselbe Falle steht in `.claude/rules/autonomer-maximum-modus.md` schon einmal beschrieben -- damals mit 409 px in einem 390 px breiten Bildschirm. `max-inline-size` statt `width`: die Felder behalten ihre gesetzte Breite, wo Platz ist, und geben nur nach, wenn es eng wird. Die Vorfahren brauchen `min-inline-size: 0`, weil ein Flex- oder Grid-Element sonst nicht unter seinen Inhalt schrumpft -- ohne das verschiebt die Regel den Ueberlauf nur eine Ebene nach oben. */ :where(select, input, textarea) { max-inline-size: 100%; min-inline-size: 0; } :where(.form-field, .option-field, .option-row, .field, .tool-card) { min-inline-size: 0; } /* UND EIN UNTEILBARES WORT HAELT EINE GANZE SEITE AUSEINANDER. `Einzelunternehmen/Personengesellschaft` hat keine Umbruchstelle -- ein Schraegstrich ohne Leerzeichen ist keine. Der Chip wurde damit 312 px breit in einer 219 px breiten Gruppe, obwohl sie laengst `flex-wrap: wrap` traegt: umbrechen kann nur, was sich teilen laesst. Gemessen an `gewerbesteuer`, dieselbe Bauform steht in 235 Werkzeugen. `anywhere` und nicht `break-word`: nur `anywhere` senkt auch die INTRINSISCHE Mindestbreite, und genau die verhindert hier das Schrumpfen. `break-word` bricht erst beim Zeichnen und aendert an der Ueberlaufrechnung nichts. Beschraenkt auf Beschriftungen von Bedienelementen: im Fliesstext waere ein Umbruch mitten im Wort eine Verschlechterung, hier ist er die Alternative zu abgeschnittenem Text. */ :where(.chip, .check-tile, .sn-template-btn) { max-inline-size: 100%; overflow-wrap: anywhere; } /* EINE FLEXZEILE BRICHT NICHT VON ALLEIN UM. `display: flex` ohne `flex-wrap` ist `nowrap` -- die Vorgabe des Browsers, und in einer Zeile mit drei Auswahlknoepfen ist sie bei 320 CSS px falsch. `.vz-radio-group` steht in 235 Werkzeugen und trug sie ueberall; aufgefallen ist es an `kuendigungsschreiben` (+40 px), `mahnung` (+3) und `impressum` (+33). Umgebrochen wird nur, wo es sonst nicht passt: solange Platz ist, aendert `wrap` nichts an der Darstellung. */ :where(.vz-radio-group, .checkbox-label, .chip-group, .seg-group, .diff-mode-group, .json-toolbar, .tool-actions) { flex-wrap: wrap; } /* Eine Beschriftung, die ein Bedienelement umschliesst, ist selbst ein Kasten und muss genauso nachgeben koennen. Bei `camt053-viewer` war sie 287 px breit in einem 238 px breiten Feld -- das Dateifeld darin bringt seine eigene Mindestbreite mit. */ label { max-inline-size: 100%; min-inline-size: 0; } /* UND EIN LANGES WORT IM FLIESSTEXT RAGT EINFACH HERAUS. "(monatlich/vierteljährlich/befreit)" hat keine Umbruchstelle; der Listeneintrag blieb 179 px breit und sein Text lief 63 px darueber hinaus. Gemessen an `ust-voranmeldung`, `kuendigungsfrist-schweiz` und `buchfuehrungspflicht`. `break-word` und nicht `anywhere`: hier ist die Kastenbreite richtig, nur der Text passt nicht. `break-word` greift genau dann -- und laesst die Mindestbreitenrechnung in Ruhe, damit sich an Rastern und Flexzeilen nichts still verschiebt. */ body { overflow-wrap: break-word; } .tool-weiter { border-top: 1px solid var(--line); padding: 20px 0 0; margin-top: 40px; } .tool-weiter + .site-footer { margin-top: 20px; } .tool-weiter:empty { display: none; } .weiter-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; font-size: 13px; color: var(--ink-4); } /* ── Volle Fensterbreite fuer Kopf und Fuss ────────────────────────── `.container` zentriert auf `--maxw` und setzt 20 px Rand. Fuer den Seiteninhalt ist das richtig -- eine Textspalte ueber 1600 px waere unlesbar. Fuer die Shell ist es falsch: eine App-Bar, die in der Mitte schwebt, sieht aus wie ein Seitenkopf, nicht wie die Leiste einer Anwendung. Auf 1440 px begann die Marke erst bei rund 300 px. Kopf und Fuss laufen deshalb ueber die volle Breite, und ihr Rand waechst stufenlos mit dem Fenster statt in Sprüngen: `clamp` geht von 14 px auf schmalen Geraeten bis 48 px auf sehr breiten. Der Inhalt darunter behaelt seine zentrierte Spalte. */ .site-header > .container, .site-header .header-lokal > .container, .site-footer > .container, .tool-weiter > .container { max-width: none; width: 100%; padding-inline: clamp(14px, 2.4vw, 48px); } /* ── App-Bar ───────────────────────────────────────────────────────── Eine Zeile, und sie bleibt eine Zeile. Der Werkzeugname darf kuerzen, die Marke nicht verschwinden, und der Knopf nicht umbrechen. */ .header-row { flex-wrap: nowrap; min-height: 56px; } .brand { flex: 0 0 auto; } /* DIE KOPFZEILE PASSTE BEI 320 PX NICHT INS FENSTER. Gemessen am 2026-09-22 an `rechnung` und `stundennachweis`: Marke 130 + Trenner 1 + Werkzeugname 64 + Knopf 106 = 301 plus Abstaende -> rechte Kante bei 383, Fenster 320 Die Seite scrollte also waagerecht -- und zwar die ganze Seite, nicht ein einzelnes Element (WCAG 1.4.10 verlangt 320 CSS px ohne zweidimensionales Scrollen). Nachgeben konnte niemand: die Marke steht auf `0 0 auto`, der Werkzeugname lag schon auf seiner Mindestbreite von 6ch, und der Knopf ist die einzige Bedienung im Kopf. Unterhalb von 400 px traegt die Bildmarke allein. Der Schriftzug ist dort die einzige Angabe, auf die verzichtet werden kann, ohne dass jemand etwas verliert: wo man ist, sagt der Werkzeugname daneben, und die Marke bleibt sichtbar. Das spart rund 98 px -- gemessen genug. */ @media (max-width: 400px) { .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .kuk-trenner { flex: 0 0 auto; width: 1px; height: 22px; background: currentColor; opacity: .25; margin: 0 4px; } /* Der Werkzeugname darf kuerzen, aber erst spaet: er ist die Antwort auf "wo bin ich". Deshalb `flex: 1 1 auto` erst NACH einer Mindestbreite -- und keine Navigation mehr daneben, die ihn verdraengen koennte. */ .kuk-kontext { flex: 1 1 auto; min-width: 6ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: inherit; font-weight: 600; } .kuk-kontext:hover { text-decoration: underline; } .header-actions { flex: 0 0 auto; } /* Die lokale Ebene einer Werkstatt: eigene Zeile unter der App-Bar, nicht darin. Sie existiert nur, wo es sie gibt -- ein Rechner bekommt sie nicht. */ .header-lokal { border-top: 1px solid var(--line); background: var(--white, #fff); } .header-lokal .site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 0; font-size: 14px; } .kuk-tools { font: inherit; font-size: 14px; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 7px 14px; min-height: 40px; cursor: pointer; } .kuk-tools:hover { border-color: var(--blue); color: var(--blue); } @media (pointer: coarse) { .kuk-tools { min-height: 44px; } } /* Unterhalb des gemessenen Umbruchpunkts verlaesst die Werkstattnavigation den Kopf. Sie wird nicht versteckt -- `kuk-shell.js` verschiebt den echten Knoten in den Launcher. Diese Regel ist nur die Ruecklage fuer den Fall, dass kein JavaScript laeuft: dann bleibt sie sichtbar und bricht um. Ein umgebrochener Kopf ist haesslich; eine verschwundene Navigation waere ein Verlust. */ @media (max-width: 840px) { .header-lokal { display: none; } } .kuk-launcher .site-nav { display: flex; flex-direction: column; gap: 2px; } /* ── Launcher ──────────────────────────────────────────────────────── Auf schmalen Breiten ein Blatt am unteren Rand -- dort ist der Daumen. Auf breiten ein Popover unter dem Knopf. Dieselbe Information, andere Komposition. */ .kuk-launcher { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 32, .38); display: flex; align-items: flex-end; justify-content: center; } .kuk-launcher[hidden] { display: none; } .kuk-launcher-blatt { width: 100%; max-height: 86vh; overflow-y: auto; background: var(--white, #fff); border-radius: 16px 16px 0 0; padding: 8px 18px 24px; box-shadow: 0 -8px 32px rgba(16, 24, 32, .18); } .kuk-launcher-kopf { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; } .kuk-launcher-titel { font-weight: 700; } .kuk-launcher-zu { font: inherit; font-size: 24px; line-height: 1; background: transparent; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; color: inherit; } .kuk-launcher-bereich { padding: 8px 0; } .kuk-launcher-bereich[hidden] { display: none; } .kuk-launcher-label { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); } .kuk-launcher-ziel, .kuk-launcher .site-nav a { display: flex; align-items: center; gap: 11px; padding: 7px 0; min-height: 44px; text-decoration: none; color: inherit; } .kuk-launcher-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kuk-launcher-ziel:hover, .kuk-launcher .site-nav a:hover { color: var(--blue); } .kuk-launcher-hinweis { font-size: 12px; color: var(--ink-4); } /* DASSELBE GESICHT WIE IM STORE. Die Zeichnung und die beiden Kachelfarben kommen aus dem Suchindex von /webtools -- keine zweite Iconliste, kein zweiter Farbschluessel. Ein Werkzeug sieht hier aus wie dort. */ .kuk-kachel { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 28%; corner-shape: squircle; border: 1px solid rgba(255,255,255,.24); color: #fff; background: linear-gradient(145deg, var(--tile-light), var(--tile-dark)); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 3px 8px rgba(20,50,60,.16); } .kuk-kachel svg { display: block; width: 74%; height: 74%; overflow: visible; } /* Die kuratierten Marken tragen `stroke="currentColor"`, die semantischen Glyphen nicht -- ohne diese Zeile blieben sie unsichtbar auf der farbigen Kachel. Derselbe Fall wie im Store. */ .kuk-kachel svg:not([stroke]) { stroke: currentColor; fill: none; stroke-width: 1.7; } .kuk-kachel .duo { fill: rgba(255,255,255,.22); stroke: none; } .kuk-launcher-offen { overflow: hidden; } @media (min-width: 841px) { /* Das Popover steht buendig unter dem Knopf -- also am selben fliessenden Rand wie die App-Bar darueber. */ .kuk-launcher { background: transparent; inset: 0 0 auto auto; padding: 8px clamp(14px, 2.4vw, 48px) 0; justify-content: flex-end; } .kuk-launcher-blatt { width: min(360px, calc(100vw - 36px)); border-radius: 12px; margin-top: 56px; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(16, 24, 32, .16); } } /* ── Der Kopf tritt beim Lesen zurueck ─────────────────────────────── Nur auf schmalen Breiten: dort kostet ein dauerhaft klebender Kopf 68 von 844 Pixeln, also acht Prozent der Hoehe, waehrend jemand arbeitet. Verschoben wird mit `transform` -- der Kopf bleibt im Fluss, und der Inhalt darunter springt nicht. `kuk-kopf-weg` setzt `kuk-shell.js`; ohne JavaScript bleibt der Kopf stehen, wie er es immer getan hat. */ @media (max-width: 840px) { .site-header { transition: transform .22s ease; will-change: transform; } .kuk-kopf-weg .site-header { transform: translateY(-100%); } } /* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Fahrt -- aber er bekommt ihn: der Platzgewinn ist kein Effekt, sondern der Zweck. */ @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* Ein klebender Kopf verdeckt jedes Sprungziel. Der Skip-Link fuehrt zu `#main`, Inhaltsverzeichnisse fuehren zu Abschnitten -- landet das Ziel unter der App-Bar, ist der Fokus zwar gesetzt, aber nicht zu sehen. W3C nennt Scroll-Padding ausdruecklich als Technik dagegen. Der Wert deckt App-Bar und lokale Ebene ab. */ html { scroll-padding-top: 112px; } @media (max-width: 840px) { html { scroll-padding-top: 76px; } } /* Der Skip-Link ist im Ruhezustand nicht zu sehen und im Tastaturfokus deutlich -- W3C G1. Er darf dabei nicht unter der App-Bar liegen. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 70; background: var(--white, #fff); color: inherit; border: 2px solid currentColor; border-radius: 8px; padding: 10px 16px; text-decoration: none; transition: top .12s ease-out; } .skip-link:focus { top: 8px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* Die Zielgroesse gilt, wo grob gezeigt wird -- hier stehen Links eng beieinander, und ein Fehlgriff fuehrt auf ein fremdes Werkzeug. */ @media (pointer: coarse) { .weiter-row .ft-links a, .site-footer .ft-links a { display: inline-flex; align-items: center; min-height: 44px; } } /* KUK-SHELL:CSS:ENDE */ /* ── Unterschrift-Dialog (unterschrift-dialog.js) ── Geteilt von Kuendigung und Geschaeftsbrief-Generator; bis zum 2026-09-25 stand er nur im Stylesheet der Kuendigung. Auf dem Telefon als volles Blatt, auf dem Desktop mittig. */ .kv-sig-knoepfe, .kv-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; } .kv-gross { min-height: 44px; justify-content: center; } .kv-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); color: var(--ink); } .kv-dialog::backdrop { background: rgb(15 23 42 / 0.45); } .kv-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kv-dialog-kopf h2 { margin: 0; font-size: 18px; } .kv-schliessen { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-3); border-radius: 999px; } .kv-schliessen:hover { background: var(--paper); } .kv-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0; } .kv-reiter [role="tab"] { min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; } .kv-reiter [role="tab"][aria-selected="true"] { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); } .kv-zeichenflaeche { height: 180px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); margin-bottom: 12px; touch-action: none; } .kv-zeichenflaeche canvas { width: 100%; height: 100%; display: block; } .kv-qr { display: block; margin: 8px auto; width: 220px; height: 220px; } .kv-sig-recht { margin-top: 14px; } /* ── Geschaeftsbrief: Export ueber dem Blatt ── Bis zum 2026-09-25 stand "PDF erzeugen" am Ende der 4000 px langen Seitenleiste. Jetzt oben in der Vorschauspalte, die am Fenster klebt. */ .export-leiste { flex: none; display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); } .export-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } .export-knoepfe .btn { min-height: 44px; } .export-leiste .tool-status:empty, .export-leiste .zeichen-hinweis[hidden] { display: none; } .export-leiste .result-panel { margin: 0; } /* Einklappbare Karten der Seitenleiste */ .gb-klapp > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; } .gb-klapp > summary::-webkit-details-marker { display: none; } .gb-klapp > summary .tool-card-title { margin: 0; } .gb-klapp > summary::after { content: "+"; font-size: 20px; font-weight: 700; color: var(--ink-3); } .gb-klapp[open] > summary::after { content: "–"; } .gb-klapp[open] > summary { margin-bottom: 12px; } .gb-klapp > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } /* Unterschrift auf dem Blatt: unter dem Gruss ein Knopf (Mauskomfort; der zugaengliche Weg ist der Knopf im Formular). Seine Groesse haelt er gegen den Massstab des Blatts: zoom 1/Massstab im Inline-Stil. Nie im Druck. */ .a4-sig-anker { position: absolute; display: flex; align-items: flex-start; } /* Oben ausgerichtet: waechst der Knopf (44 px auf Touch), dann nach unten in den Unterschriftsraum, nicht nach oben ueber den Gruss. */ .a4-sig-anker-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1.5px dashed var(--blue-soft); border-radius: var(--radius-sm); background: var(--blue-tint); font: 600 13px/1 var(--font-sans); color: var(--blue); cursor: pointer; white-space: nowrap; } .a4-sig-anker-knopf:hover { border-color: var(--blue); } @media (pointer: coarse) { .a4-sig-anker-knopf:not(.ist-bild) { min-height: 44px; } } .a4-sig-anker-knopf.ist-bild { width: 100%; height: 100%; min-height: 0; padding: 0; border-color: transparent; background: none; } .a4-sig-anker-knopf.ist-bild:hover { border-color: var(--blue-soft); } /* ── Formular des Geschaeftsbriefs ── */ .gb-felder { margin-top: 0; } .gb-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .gb-knopfzeile[hidden], .gb-profil-knopf[hidden], .job-field[hidden] { display: none; } .gb-profil-knopf { margin-top: 12px; } .gb-warnung { font-size: 13px; font-weight: 600; color: var(--warn-ink); } #blkAddress.is-over textarea { background: var(--warn-soft); border-color: var(--warn-ink); } .gb-feldtitel { font-size: 13px; font-weight: 700; color: var(--ink-2); } .gb-unterschrift { align-items: flex-start; } .gb-unterschrift #sigSlotImg { max-height: 60px; max-width: 240px; border-bottom: 1px solid var(--line-2); } .gb-sig-start { min-height: 44px; border-style: dashed; } /* Zweiter Unterzeichner: aufgeklappt ein eigener Kasten, damit klar ist, welche Felder zu wem gehoeren. */ .gb-zweiter-schalter { margin: 0; } .gb-zweiter { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); gap: 10px; } .gb-zweiter > legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .gb-zweiter .field-hint { margin: 0; } .job-field label .field-hint { font-weight: 400; margin-left: 4px; } /* Farbfelder und Schriftwahl: auf Touch 44 px wie jede andere Bedienung. */ @media (pointer: coarse) { .color-swatch { width: 44px; height: 44px; } .segmented-btn { min-height: 44px; } } /* Unter 16 px zoomt iOS beim Tippen ins Feld. */ @media (pointer: coarse) { .job-field input[type="text"], .job-field input[type="date"], .job-field input[type="email"], .job-field input[type="tel"], .job-field textarea, .job-field select { font-size: 16px; min-height: 44px; } } .gb-vorschau-titel { margin: 0; font-size: 15px; flex: none; } .gb-knapp { flex-basis: 100%; margin: 0; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); background: var(--blue-tint); border-radius: var(--radius-sm); } .gb-knapp[hidden] { display: none; } /* Blanko-Vorlage am Seitenende: dezent, ohne Hauptknopf. */ .gb-blanko { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin: 8px auto 48px; padding-top: 28px; border-top: 1px solid var(--line); } .gb-blanko h2 { margin: 0 0 6px; font-size: 17px; } .gb-blanko p { margin: 0; max-width: 62ch; font-size: 14px; color: var(--ink-3); } .gb-blanko .toggle-row { margin: 0; } .gb-blanko-bild { --a4-farbe-ink: #0f1729; --a4-farbe-weich: #4a5769; --a4-farbe-linie: #b2bfcc; --a4-farbe-akzent: var(--blue); width: 105px; height: 149px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); } /* Eigene Klasse, nicht .a4-page: sonst zaehlte sie als Briefblatt mit. */ .gb-blanko-blatt { position: relative; width: 210mm; height: 297mm; overflow: hidden; background: var(--white); zoom: .1323; } /* Bei 13 % verschwaenden 0,4-pt-Linien unter einem Geraetepixel. */ .gb-blanko-bild .a4-op-linie { min-height: 7px; min-width: 7px; } @media (max-width: 560px) { .gb-blanko { grid-template-columns: 1fr; } .gb-blanko-bild { display: none; } } .export-knoepfe { align-items: center; } /* Datei-Knopf: das Eingabefeld liegt unsichtbar darueber (brief-speicher). */ .kv-dateiknopf { position: relative; } .kv-dateiknopf input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; cursor: pointer; } .kv-dateiknopf:focus-within { outline: 3px solid var(--blue-2); outline-offset: 2px; } /* ── Leiste Formular / Vorschau unter 992 px (brief-ui.js) ── */ .kv-mobilleiste { display: none; } @media (max-width: 991px) { .kv-mobilleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgb(15 23 42 / .06); } .kv-mobilleiste button { flex: 1; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; } .kv-mobilleiste button[aria-current] { background: var(--blue-2); border-color: var(--blue-2); color: #fff; } .kv-mobilleiste button:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; } body.hat-mobilleiste { padding-bottom: 72px; } } /* Zeichenfeld mit Fuehrung: feines Punktraster und eine gestrichelte Linie, auf der man unterschreibt. Nur Hintergrund -- das Bild bleibt transparent. */ .kv-zeichenflaeche { background-color: var(--white); background-image: linear-gradient(to right, var(--line-2) 50%, transparent 0), radial-gradient(circle, rgb(148 163 184 / .35) 1px, transparent 1.2px); background-size: 10px 1.5px, 16px 16px; background-position: 16px calc(100% - 44px), 0 0; background-repeat: repeat-x, repeat; } /* Warten auf das Handy: ein ruhiger Punkt, bei reduzierter Bewegung still. */ .kv-dialog .tool-status:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--blue); vertical-align: middle; animation: kv-puls 1.6s ease-in-out infinite; } .kv-dialog .tool-status[data-state]::before { animation: none; } @keyframes kv-puls { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .kv-dialog .tool-status::before { animation: none !important; } } /* ══ Vorlagenseiten: Einstieg, Formulierung, Bezugsnummer, Entwurfskarte, Exportleiste, Abschluss (Auftrag 2026-09-26) ══════════════════════════ */ .kv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kv-einstieg { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0 0 18px; } .kv-einstieg-knopf { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: left; cursor: pointer; } .kv-einstieg-knopf[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-2); } .kv-einstieg-knopf:hover { border-color: var(--blue); } .kv-einstieg-knopf:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; } .kv-ton { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; } .kv-ton legend { font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; padding: 0; } .kv-ton-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .kv-ton-option { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--ink-2); } .kv-ton-option:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); } .kv-ton-option input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--blue); } .kv-ton-option strong { display: block; } .kv-ton-hinweis { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .kv-referenz-titel { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink-2); } .kv-referenz-zeile { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 8px; } @media (max-width: 480px) { .kv-referenz-zeile { grid-template-columns: 1fr; } } .kv-entwurf-karte { margin: 24px 0 8px; padding: 4px 14px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--paper); } .kv-entwurf-karte > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink-2); list-style: none; } .kv-entwurf-karte > summary::-webkit-details-marker { display: none; } .kv-entwurf-karte > summary::after { content: "▾"; font-size: 14px; color: var(--ink-3); transition: transform .15s ease; } .kv-entwurf-karte[open] > summary::after { transform: rotate(180deg); } .kv-entwurf-karte > summary .tool-card-title { margin: 0; font-size: inherit; } .kv-entwurf-karte > summary:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; border-radius: 4px; } .kv-entwurf-karte .kv-speicher { margin-top: 4px; } .kv-empfohlen-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: 1px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; background: var(--blue-tint); color: var(--blue-2); } .kv-export-primaer { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .kv-export-zweit { border-color: var(--blue); color: var(--blue-2); } .btn-zweit { background: var(--white); color: var(--blue-2); border-color: var(--blue); } .btn-zweit:hover { background: var(--blue-tint); } .kv-weitere { margin: 12px 0 4px; } .kv-weitere > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-3); list-style: none; } .kv-weitere > summary::-webkit-details-marker { display: none; } .kv-weitere > summary::before { content: "▾"; transition: transform .15s ease; } .kv-weitere:not([open]) > summary::before { transform: rotate(-90deg); } .kv-weitere > summary:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; border-radius: 4px; } .kv-weitere-formate { font-weight: 400; } .kv-export-weitere { margin-top: 6px; } .kv-export-weitere .kv-export-knopf { min-height: 60px; } .gb-weitere-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .kv-sonstiges { margin-top: 10px; } /* Abschluss nach dem Export (brief-abschied.js). Hell wie das Blatt; die Farben der Teilen-Knoepfe mit weissem Text tragen mindestens 4,5 : 1 (WhatsApp #075e54 7,9 : 1, LinkedIn #0a66c2 5,4 : 1, Werte aus eSign). */ .kuk-abschied { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35); } .kuk-abschied::backdrop { background: rgba(15, 23, 42, .55); } .kuk-abschied-innen { position: relative; padding: 30px 24px 24px; } .kuk-abschied-zu { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer; } .kuk-abschied-zu:hover { background: var(--pergament); color: var(--ink); } .kuk-abschied-kopf { text-align: center; margin-bottom: 18px; } .kuk-abschied-symbol { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 12px; background: var(--green-soft); color: var(--green); } .kuk-abschied-kopf h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; } .kuk-abschied-kopf p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); } .kuk-abschied-vorschau { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 700; color: var(--blue-2); } .kuk-teilen { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 18px; } .kuk-teilen-titel { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); } .kuk-teilen-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); } .kuk-teilen-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; } .kuk-teilen-knopf svg { flex: none; } .kuk-teilen-whatsapp { background: #075e54; } .kuk-teilen-linkedin { background: #0a66c2; } .kuk-teilen-mail { background: #334155; } .kuk-teilen-link { background: var(--blue); } .kuk-teilen-knopf:hover { filter: brightness(1.12); } .kuk-teilen-status { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; color: var(--green); } .kuk-teilen-status:empty { min-height: 0; margin: 0; } .kuk-abschied-aktionen { display: flex; flex-direction: column; gap: 10px; } .kuk-abschied-aktionen .btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; } .kuk-abschied-zweit { background: var(--white); color: var(--ink-2); border: 1px solid var(--line-2); } .kuk-abschied-zu:focus-visible, .kuk-teilen-knopf:focus-visible, .kuk-abschied .btn:focus-visible, .kuk-abschied-vorschau:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; } @media print { .kuk-abschied { display: none !important; } } /* Einstieg "leeres Blatt" (brief-ui.js): vorlagentypische Bloecke treten zurueck. */ [data-leer-weg] { display: none !important; } .kv-eigen { margin: 0 0 18px; } .kv-eigen textarea { min-height: 260px; }