/* KUKANILEA Datei-Trias: gemeinsame Oberflaeche (Reader, Konverter, Editor) * * Quelle: shared/kukanilea-datei-oberflaeche/basis.css, verteilt von * scripts/ops/sync_geteilte_kerne.py. Nicht in einer Kopie aendern. * * Tokens, Knoepfe, Kopf (.re-kopf), Landing, Garantie, Ablage, Formate, * Saeulen, Ablauf, FAQ, Karussell, Fuss, Meldungen, Befehlspalette. * * Kontraste (gemessen gegen die Flaechenfarbe, WCAG 2.2 SC 1.4.6, AAA 7:1): * (Flaeche #ffffff; der Seitengrund #f1f5f9 liegt darunter: gedaempft dort 9,6) * hell Text #0f172a 17,8 · gedaempft #334155 10,4 * dunkel Text #e8eef4 15,9 · gedaempft #c3cdd8 11,2 * * Kennfarben je Werkzeug (html[data-werkzeug], 2026-09-29). Jeder Host traegt eine * eigene Farbe; Knoepfe, Kicker, Aktivmarke, Ablage und Zusage folgen ihr. * Gemessen: Akzent auf Weiss / auf --akzent-weich / auf dem Seitengrund, dunkel auf #111a22. * viewer #075261 8,8 / 7,5 / 8,0 dunkel #2dd4bf 9,4 (Akzenttext darauf 8,5) * konverter #4c2a91 10,3 / 8,6 / 9,4 dunkel #c4b5fd 9,5 (9,3) * editor #8a3a06 7,8 / 7,2 / 7,1 dunkel #fdba74 10,4 (10,2) * #9a3412 (Terrakotta) war fuer den Editor vorgeschlagen und verfehlt AAA auf der * getoenten Flaeche (6,9) und dem Seitengrund (6,7) -- darum das tiefere #8a3a06. * --gut bleibt gruen: es meldet einen Pruefzustand (Summe stimmt, Zeile neu), keine Marke. */ :root { color-scheme: light; --bg: #f1f5f9; --flaeche: #ffffff; --flaeche-2: #f8fafc; --ink: #0f172a; --ink-2: #1e293b; --mut: #334155; --linie: #cbd5e1; --linie-2: #94a3b8; --linie-weich: #e2e8f0; --schatten-karte: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06); --akzent: #075261; --akzent-2: #053e4a; --akzent-text: #ffffff; --akzent-weich: #e1f0f2; --akzent-flaeche: #f0fdfa; --akzent-rand: #99f6e4; --gut: #14532d; --gut-bg: #dcfce7; --warn: #7c2d12; --warn-bg: #ffedd5; --fehler: #7f1d1d; --fehler-bg: #fee2e2; --fokus: #b45309; --markiert: #fde68a; --markiert-aktiv: #f59e0b; --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .22); --radius: 12px; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kopf-h: 60px; /* Namen der uebernommenen E-Rechnungsregeln (vom XRechnung-Viewer) */ --ink-3: var(--mut); --ink-4: var(--mut); --line: var(--linie); --line-2: var(--linie-2); --paper: var(--flaeche-2); --blue-2: var(--akzent); --blue-soft: var(--akzent-weich); --green: var(--gut); --green-soft: var(--gut-bg); --warn-ink: var(--warn); --warn-soft: var(--warn-bg); --radius-sm: 8px; --font-mono: var(--mono); --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; } html[data-farbschema="dunkel"] { color-scheme: dark; --bg: #0b1117; --flaeche: #111a22; --flaeche-2: #16212b; --ink: #e8eef4; --ink-2: #d9e2ea; --mut: #c3cdd8; --linie: #2c3a47; --linie-2: #4a5b6b; --linie-weich: #22303c; --schatten-karte: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35); --akzent: #2dd4bf; --akzent-2: #5eead4; --akzent-text: #04262d; --akzent-weich: #0f292f; --akzent-flaeche: #0f292f; --akzent-rand: #134e4a; --gut: #bbf7d0; --gut-bg: #0f2e1c; --warn: #fed7aa; --warn-bg: #3a2210; --fehler: #fecaca; --fehler-bg: #3b1515; --fokus: #fbbf24; --markiert: #7c5c06; --markiert-aktiv: #b45309; --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7); } /* Kennfarbe je Werkzeug -- der Viewer nutzt die Vorgabe oben. */ html[data-werkzeug="konverter"] { --akzent: #4c2a91; --akzent-2: #3b1f73; --akzent-weich: #ede9fe; --akzent-flaeche: #f5f3ff; --akzent-rand: #ddd6fe; } html[data-werkzeug="konverter"][data-farbschema="dunkel"] { --akzent: #c4b5fd; --akzent-2: #ddd6fe; --akzent-text: #1e1340; --akzent-weich: #1e1b4b; --akzent-flaeche: #1e1b4b; --akzent-rand: #3730a3; } html[data-werkzeug="editor"] { --akzent: #8a3a06; --akzent-2: #6c2d04; --akzent-weich: #fff3e6; --akzent-flaeche: #fff7ed; --akzent-rand: #fed7aa; } html[data-werkzeug="editor"][data-farbschema="dunkel"] { --akzent: #fdba74; --akzent-2: #fed7aa; --akzent-text: #2f1403; --akzent-weich: #2a1208; --akzent-flaeche: #2a1208; --akzent-rand: #7c2d12; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); } a { color: var(--akzent); text-underline-offset: 2px; } a:hover { color: var(--akzent-2); } :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } code, kbd, pre { font-family: var(--mono); font-size: .92em; } kbd { border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--flaeche); } /* Skip-Link: nimmt keinen Platz, bis er fokussiert wird */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--akzent); color: var(--akzent-text); padding: 10px 14px; border-radius: 8px; font-weight: 700; } .skip-link:focus { left: 8px; } /* ── Knoepfe (44 px Mindesthoehe ueberall: WCAG 2.5.5 AAA) ─────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink); font: 600 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover { border-color: var(--akzent); color: var(--akzent-2); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn-primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); } .btn-primaer:hover { background: var(--akzent-2); border-color: var(--akzent-2); color: var(--akzent-text); } .btn-flach { border-color: transparent; background: transparent; } .btn-flach:hover { background: var(--akzent-weich); } .btn-sym { padding: 0; width: 44px; } .btn svg { width: 20px; height: 20px; flex: none; } .btn-sm { font-size: 14px; } /* ── Kopf (.re-kopf, gemeinsames Leitsystem mit rechnung-erstellen) ───── */ .re-kopf { position: sticky; top: 0; z-index: 40; min-height: var(--kopf-h); display: flex; align-items: center; gap: 14px; padding: 8px clamp(12px, 3vw, 28px); background: color-mix(in srgb, var(--flaeche) 94%, transparent); border-bottom: 1px solid var(--linie); box-shadow: inset 0 3px 0 var(--akzent); backdrop-filter: blur(8px); } .re-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; } .re-marke span { display: flex; flex-direction: column; line-height: 1.1; } .re-marke strong { font-size: 16px; } .re-marke small { font-size: 11px; letter-spacing: .08em; color: var(--mut); } .or-marke-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2)); } .or-marke-symbol svg { width: 20px; height: 20px; } .re-nav { display: flex; gap: 4px; flex: 1; min-width: 0; } .re-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 15px; white-space: nowrap; } .re-nav a:hover { background: var(--akzent-weich); } .re-nav a[aria-current="page"] { background: var(--akzent-weich); color: var(--akzent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--akzent); } .re-nav-symbol { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, var(--k1), var(--k2)); } .re-nav-symbol svg { width: 15px; height: 15px; } .re-kopf-aktionen { display: flex; gap: 6px; align-items: center; } @media (max-width: 720px) { .re-nav { display: none; } .re-kopf-aktionen .or-nur-breit { display: none; } } /* ── Landing ──────────────────────────────────────────────────────── */ .or-breit { max-width: 1120px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); } .or-hero { padding: clamp(24px, 5vw, 56px) 0 12px; } .or-kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--akzent); background: var(--akzent-weich); padding: 4px 12px; border-radius: 999px; } .or-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; margin: 14px 0 12px; letter-spacing: -.01em; } .or-lede { font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); max-width: 62ch; margin: 0 0 22px; } /* Hero als Raster (2026-09-29): links Ueberschrift, kurze Einleitung und die Ablage -- der Handlungsbereich; rechts Zusage und Merkmale. Unter 960 px eine Spalte, die Ablage kommt vor der Seitenspalte. */ .or-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 960px) { .or-hero-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; } } .or-hero-text { min-width: 0; } .or-hero-seite { min-width: 0; display: grid; gap: 14px; align-content: start; } @media (min-width: 960px) { .or-hero-seite { padding-top: 52px; } } .or-hero-seite .or-garantie { margin: 0; } .or-merkmale { margin: 0; padding: 16px 18px; list-style: none; display: grid; gap: 10px; background: var(--flaeche); border: 1px solid var(--linie-weich); border-radius: var(--radius); box-shadow: var(--schatten-karte); } .or-merkmale li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; color: var(--ink-2); } .or-merkmale li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--akzent-rand); } .or-merkmale li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 8px; border: solid var(--akzent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .or-merkmale strong { color: var(--ink); } .or-garantie { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 14px 16px; background: var(--akzent-flaeche); color: var(--akzent); border: 1px solid var(--akzent-rand); border-radius: var(--radius); } .or-garantie p { color: var(--ink-2); } .or-garantie svg { width: 26px; height: 26px; flex: none; margin-top: 2px; } .or-garantie strong { display: block; font-size: 17px; } .or-garantie p { margin: 2px 0 0; font-size: 15px; } .or-ablage { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(24px, 5vw, 44px) 18px; border: 2px dashed var(--linie-2); border-radius: 16px; background: var(--flaeche); cursor: pointer; transition: border-color .15s, background .15s; } .or-ablage:hover, .or-ablage.ist-drueber { border-color: var(--akzent); background: var(--akzent-weich); } .or-ablage:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; } .or-ablage input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .or-ablage-symbol { width: 44px; height: 44px; color: var(--akzent); } .or-ablage-titel { font-size: 20px; font-weight: 700; margin: 0; } .or-ablage-hinweis { margin: 0; color: var(--mut); font-size: 15px; } .or-ablage .btn { pointer-events: none; } .or-status { min-height: 1.6em; margin: 10px 0 0; font-size: 15px; } .or-status[data-zustand="fehler"] { color: var(--fehler); font-weight: 600; } .or-status[data-zustand="laeuft"] { color: var(--mut); } .or-beispiele { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 15px; color: var(--mut); } .or-abschnitt { padding: clamp(28px, 5vw, 52px) 0 0; } .or-abschnitt h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 6px; } .or-abschnitt > .or-breit > p.or-einleitung { color: var(--mut); margin: 0 0 18px; max-width: 70ch; } .or-formate { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .or-format { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; } .or-format h3 { margin: 0 0 4px; font-size: 16px; } .or-format p { margin: 0 0 8px; color: var(--mut); font-size: 14.5px; } .or-format ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .or-format li { font: 600 12.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; background: var(--akzent-weich); color: var(--akzent); } .or-saeulen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .or-saeule { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; } .or-saeule h3 { margin: 0 0 4px; font-size: 16px; display: flex; gap: 8px; align-items: center; } .or-saeule p { margin: 0; color: var(--mut); font-size: 14.5px; } .or-ablauf { counter-reset: schritt; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .or-ablauf li { counter-increment: schritt; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 14px 56px; position: relative; font-size: 15px; } .or-ablauf li::before { content: counter(schritt); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: var(--akzent-text); font-weight: 700; } .or-ablauf strong { display: block; } .or-faq { display: grid; gap: 8px; max-width: 860px; } .or-faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); } .or-faq summary { cursor: pointer; list-style: none; padding: 12px 44px 12px 16px; min-height: 44px; font-weight: 700; position: relative; } .or-faq summary::-webkit-details-marker { display: none; } .or-faq summary::after { content: "+"; position: absolute; right: 16px; top: 10px; font-size: 22px; color: var(--akzent); } .or-faq details[open] summary::after { content: "–"; } .or-faq details > div { padding: 0 16px 14px; color: var(--ink-2); } .or-faq details > div p { margin: 0 0 8px; } .or-karussell-kopf { display: flex; align-items: end; justify-content: space-between; gap: 12px; } .or-karussell-knoepfe { display: flex; gap: 6px; } .or-karussell { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-top: 12px; overscroll-behavior-x: contain; } .or-karussell > div { scroll-snap-align: start; display: grid; } .or-karussell a { display: grid; gap: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); text-decoration: none; min-height: 44px; } .or-karussell a:hover { border-color: var(--akzent); } .or-karussell a strong { color: var(--akzent); } .or-karussell a span { color: var(--mut); font-size: 14.5px; } .or-fuss { margin-top: 48px; border-top: 1px solid var(--linie); background: var(--flaeche); } .or-fuss .or-breit { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; font-size: 14.5px; color: var(--mut); } .or-fuss nav { display: flex; flex-wrap: wrap; gap: 4px 16px; } .or-fuss a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; } /* Meldungen (Toast) */ .or-toast { position: fixed; z-index: 60; right: 16px; bottom: 16px; max-width: min(460px, calc(100vw - 32px)); display: grid; gap: 8px; } .or-toast-meldung { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--flaeche); box-shadow: var(--schatten); font-size: 15px; border-left: 4px solid var(--akzent-rand); } .or-toast-meldung .btn { min-height: 40px; background: var(--flaeche); color: var(--ink); border-color: var(--flaeche); } .or-toast-meldung[data-art="fehler"] { background: var(--fehler); } /* Befehlspalette */ dialog.or-palette { width: min(640px, calc(100vw - 24px)); max-height: min(70dvh, 560px); padding: 0; border: 1px solid var(--linie-2); border-radius: 16px; background: var(--flaeche); color: var(--ink); box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); margin-top: 12vh; } dialog.or-palette::backdrop { background: rgba(15, 23, 42, .5); } .or-palette-eingabe { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--linie); background: transparent; color: var(--ink); font: 18px var(--sans); } .or-palette-eingabe:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--fokus); } .or-palette ul { list-style: none; margin: 0; padding: 6px; overflow: auto; max-height: calc(min(70dvh, 560px) - 100px); } .or-palette li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; } .or-palette li[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); } .or-palette li small { opacity: .85; } .or-palette li[aria-disabled="true"] { opacity: .5; } .or-palette-fuss { padding: 8px 14px; font-size: 13px; color: var(--mut); border-top: 1px solid var(--linie); } /* Text-Editor (editor-werkzeuge.mjs): Reader und Online-Editor */ .or-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; } .or-editor.nur-text { grid-template-columns: minmax(0, 1fr); } .or-editor textarea { width: 100%; min-height: 100%; height: 100%; resize: none; border: 0; border-right: 1px solid var(--linie); padding: 14px 16px; font: calc(14px * var(--or-zoom, 1)) / 1.55 var(--mono); background: var(--flaeche); color: var(--ink); tab-size: 2; } .or-editor textarea:focus-visible { outline-offset: -3px; } .or-editor-vorschau { overflow: auto; min-height: 0; } .or-editor-status { font-size: 13.5px; padding: 6px 12px; } .or-editor-status[data-ok="nein"] { background: var(--fehler-bg); color: var(--fehler); } .or-editor-status[data-ok="ja"] { background: var(--gut-bg); color: var(--gut); } .or-editor-status[data-ok="hinweis"] { background: var(--warn-bg); color: var(--warn); } .or-editor-befund { margin: 2px 0; } .or-editor-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); } .or-editor-hilfe { margin-left: auto; font-size: 13px; color: var(--mut); } .or-editor-suche { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; } .or-editor-suche[hidden] { display: none; } .or-editor-feld { min-height: 44px; padding: 0 10px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); color: var(--ink); font: 15px var(--sans); min-width: 0; flex: 1 1 140px; } .or-editor-haken { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; } .or-editor-zahl { font-size: 14px; color: var(--mut); } .or-editor-raster { border-collapse: collapse; font-size: 14px; } .or-editor-raster th, .or-editor-raster td { border: 1px solid var(--linie); padding: 0; } .or-editor-raster .or-editor-nr { padding: 0 8px; color: var(--mut); font-weight: 400; background: var(--flaeche-2); text-align: right; } .or-editor-raster input { width: 12ch; min-width: 100%; min-height: 36px; border: 0; padding: 4px 8px; background: transparent; color: var(--ink); font: 14px var(--sans); } .or-editor-raster .ist-kopf input { font-weight: 700; background: var(--akzent-weich); } .or-editor-raster input.fehlt { background: var(--fehler-bg); } .or-editor-raster input:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; } @media (pointer: coarse) { .or-editor-raster input { min-height: 44px; } } @media (max-width: 959.98px) { .or-editor { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(40vh, 1fr) auto; } .or-editor textarea { border-right: 0; border-bottom: 1px solid var(--linie); } } /* Feinschliff der Startseiten (2026-09-28) -- fuer Datei-Viewer, Konverter und Editor. Motion-System: Dauer <= 320 ms, Weg <= 12 px, nur transform/opacity/Farben, keine Endlosschleife, kein Inhalt haengt an einer Animation. Unter reduzierter Bewegung bleiben nur Farbwechsel. */ :root { --weich: cubic-bezier(.2, .8, .2, 1); --federnd: cubic-bezier(.34, 1.56, .64, 1); } /* Ablage: Milchglas ueber einem leichten Akzentschimmer; beim Darueberfahren/Ziehen hebt sie sich */ .or-ablage { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--akzent) 7%, transparent), transparent 70%), color-mix(in srgb, var(--flaeche) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .15s, background-color .15s, transform .2s var(--weich), box-shadow .2s var(--weich); } .or-ablage:hover, .or-ablage.ist-drueber { border-style: solid; transform: translateY(-2px); box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--akzent) 35%, transparent); } .or-ablage-symbol { transition: transform .2s var(--federnd); } .or-ablage:hover .or-ablage-symbol, .or-ablage.ist-drueber .or-ablage-symbol { transform: translateY(-3px) scale(1.1); } /* Garantie kompakter: eine Zeile Aussage, der Beleg darunter */ .or-garantie { padding: 12px 14px; } .or-garantie strong { font-size: 16px; } .or-garantie p { font-size: 14.5px; } /* Beispiel-Knoepfe: risikolos ausprobieren -- sichtbar anhebbar */ /* Kein Anheben: ein Knopf, der sich unter dem Zeiger bewegt, verliert an seiner Kante den Hover und faellt zurueck -- das zittert (gemessen: Playwright fand ihn nie "stabil"). */ .or-beispiele .btn { transition: border-color .15s, box-shadow .15s; } .or-beispiele .btn:hover { box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .35); } /* Knopfdruck spuerbar */ .btn:active:not([disabled]) { transform: scale(.96); transition: transform 80ms; } /* Formatkarten: Farbsaum der Dateifamilie, Mini-Vorschau, Anheben */ .or-format { position: relative; transition: transform .2s var(--weich), box-shadow .2s var(--weich), border-color .2s; } .or-format::before { content: ""; position: absolute; inset: -1px -1px auto; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: var(--familie, var(--akzent)); } /* Die Karte hebt sich um 4 px -- die Trefferflaeche reicht 6 px darunter, damit der Zeiger an der Unterkante auf der Karte bleibt, statt Hover und Absenken im Wechsel auszuloesen. */ .or-format::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; } .or-format:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--familie, var(--akzent)) 45%, var(--linie)); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .35); } .or-format-vorschau { display: block; width: 100%; height: 64px; margin: 2px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--familie, var(--akzent)) 8%, var(--flaeche-2)); } .or-format-vorschau * { vector-effect: non-scaling-stroke; } .or-format-vorschau .v-blatt { fill: var(--flaeche); stroke: var(--linie-2); } .or-format-vorschau .v-zeile { fill: var(--linie-2); } .or-format-vorschau .v-akzent { fill: var(--familie, var(--akzent)); } .or-format-vorschau .v-gitter { fill: none; stroke: var(--familie, var(--akzent)); stroke-opacity: .45; } .or-format-aktion { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; } .or-format-aktion span { transition: transform .15s var(--weich); } .or-format:hover .or-format-aktion span, .or-format-aktion:focus-visible span { transform: translateX(3px); } [data-familie="pdf"] { --familie: #d23f31; } [data-familie="erechnung"] { --familie: #0e7a8a; } [data-familie="dokument"] { --familie: #2f6fd8; } [data-familie="tabelle"] { --familie: #1f8a4c; } [data-familie="ebook"] { --familie: #8a5a1f; } [data-familie="bild"] { --familie: #9a4fb5; } [data-familie="code"] { --familie: #5b6472; } [data-familie="archiv"] { --familie: #a36a00; } [data-familie="cad"] { --familie: #5b4fc4; } [data-familie="medien"] { --familie: #c2410c; } html[data-farbschema="dunkel"] [data-familie="cad"] { --familie: #a99ff5; } html[data-farbschema="dunkel"] [data-familie="medien"] { --familie: #fdba74; } html[data-farbschema="dunkel"] [data-familie="pdf"] { --familie: #ff8a7a; } html[data-farbschema="dunkel"] [data-familie="dokument"] { --familie: #8db4ff; } html[data-farbschema="dunkel"] [data-familie="tabelle"] { --familie: #6fd69a; } html[data-farbschema="dunkel"] [data-familie="code"] { --familie: #aab4c3; } /* Ablauf als Kette: Verbindungslinie, einmalige Betonung beim Hereinscrollen (Klasse von JS; ohne JS steht die Kette vollstaendig und ruhig da) */ .or-ablauf li { transition: border-color .3s var(--weich), box-shadow .3s var(--weich); } @media (min-width: 880px) { .or-ablauf li:not(:last-child)::after { content: ""; position: absolute; top: 28px; right: -12px; width: 12px; height: 2px; background: var(--linie-2); } } .or-ablauf.ist-sichtbar li { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 12%, transparent); } .or-ablauf.ist-sichtbar li:nth-child(2) { transition-delay: 60ms; } .or-ablauf.ist-sichtbar li:nth-child(3) { transition-delay: 120ms; } .or-ablauf.ist-sichtbar li:nth-child(4) { transition-delay: 180ms; } /* Befehlspalette und Dialoge: Milchglas-Hintergrund, kurzer federnder Eintritt */ dialog.or-palette::backdrop { background: rgba(15, 23, 42, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } dialog.or-palette[open] { animation: or-dialog-ein .22s var(--federnd); } @keyframes or-dialog-ein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .or-palette-eingabe:focus-visible { box-shadow: inset 0 -3px 0 var(--fokus), 0 0 0 3px color-mix(in srgb, var(--fokus) 25%, transparent); } @media (prefers-reduced-motion: reduce) { .or-ablage, .or-ablage-symbol, .or-format, .or-format-aktion span, .or-ablauf li { transition: border-color .15s, background-color .15s, box-shadow .15s !important; } .or-ablage:hover, .or-ablage.ist-drueber, .or-format:hover, .or-ablage:hover .or-ablage-symbol, .or-ablage.ist-drueber .or-ablage-symbol, .or-format:hover .or-format-aktion span, .btn:active:not([disabled]) { transform: none !important; } dialog.or-palette[open] { animation: none; } } /* Pruefsummen im Infobereich */ .or-pruefsummen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); } .or-pruefsummen h3 { margin: 0 0 8px; font-size: 15px; } .or-pruefsummen progress { width: 100%; height: 8px; accent-color: var(--akzent); } .or-ps-liste { margin: 0; display: grid; gap: 4px; } .or-ps-liste dt { font-size: 13px; color: var(--mut); margin-top: 6px; } .or-ps-liste dd { margin: 0; display: flex; gap: 6px; align-items: center; } .or-ps-liste code { flex: 1; min-width: 0; font: 12px/1.45 var(--mono); word-break: break-all; color: var(--ink); } .or-ps-label { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; color: var(--mut); } .or-ps-feld { min-height: 44px; padding: 0 10px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--ink); font: 13px var(--mono); } .or-ps-ergebnis { margin: 6px 0 0; font-size: 14px; font-weight: 600; } .or-ps-ergebnis[data-ok="ja"] { color: var(--gut); } .or-ps-ergebnis[data-ok="nein"] { color: var(--fehler); } /* ── Studio-Schliff (2026-09-28): ruhige Flaechen statt Rahmenknoepfe ── Gilt fuer den gemeinsamen Text-Editor (Viewer "Bearbeiten", Online-Editor) und den Pruefsummen-Block. 44 px Mindesthoehe bleiben (WCAG 2.5.5 AAA) -- leichter wird es ueber Flaeche und Rahmen, nicht ueber kleinere Ziele. */ .or-editor-leiste .btn { border-color: var(--linie); border-radius: 8px; background: var(--flaeche); font-size: 14px; padding: 0 12px; } .or-editor-leiste .btn:hover { background: var(--akzent-weich); border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie)); color: var(--ink); } .or-editor textarea { padding: 20px 24px; line-height: 1.6; } .or-editor textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; } .or-ps-liste dt { display: flex; justify-content: space-between; gap: 8px; } .or-ps-merk { color: var(--gut); font-weight: 700; } .or-ps-chip { display: block; width: 100%; min-height: 44px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); color: var(--ink); text-align: left; cursor: copy; } .or-ps-chip:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); background: var(--akzent-weich); } .or-ps-chip:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; } .or-ps-chip code { font: 12px/1.45 var(--mono); word-break: break-all; } @media (prefers-reduced-motion: no-preference) { .or-editor-leiste .btn { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .or-editor-leiste .btn:hover { transform: translateY(-1px); } } /* ── Studio-Tiefe (2026-09-28): Seitengrund getoent, Karten weiss mit weichem Schatten ── Der Grund tritt zurueck, was man anfassen kann, liegt obenauf. Rand in --linie-weich: die Karten sind keine Bedienelemente, ihr Rand braucht keine 3:1 (SC 1.4.11). */ .or-format, .or-saeule, .or-ablauf li, .or-faq details { border-color: var(--linie-weich); box-shadow: var(--schatten-karte); } /* Tastenkappen: im HTML steht "Strg"; auf Apple-Geraeten setzt tastenBeschriften() "⌘" ein */ .or-kbd-gruppe { display: inline-flex; gap: 3px; margin-left: 2px; } .or-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 5px; background: var(--flaeche); color: var(--ink); font: 600 12px/1 var(--sans); } /* Ohne Tastatur (Touch) und auf schmalen Kopfleisten ist die Kappe nur Ballast -- der Knopf heisst weiter "Befehle" */ @media (pointer: coarse), (max-width: 560px) { .or-kbd-gruppe { display: none; } } /* ── Kopfleiste auf der Startseite: dieselbe Flucht wie der Inhalt (2026-09-28) ── Gemessen vorher: Marke bei 12 px, Inhalt bei 14 px (Telefon); ab 1120 px lief der Kopf randlos, der Inhalt zentriert (Marke 28 px, Ueberschrift 188 px bei 1440). Jetzt steht die Marke genau ueber der Ueberschrift. Im Arbeitsmodus bleibt der Kopf randlos -- dort gehoert die Breite der Arbeitsflaeche. */ :root { --rand: clamp(14px, 3vw, 28px); } html:not([data-or-modus]):not([data-oe-modus]) .re-kopf { padding-left: max(var(--rand), calc((100% - 1120px) / 2 + var(--rand))); padding-right: max(var(--rand), calc((100% - 1120px) / 2 + var(--rand))); } .re-kopf { padding-left: var(--rand); padding-right: var(--rand); } /* Zwischen Telefon und breitem Bildschirm (721-1099 px) passten Marke, drei Werkzeuge und die Aktionen nicht nebeneinander: die Werkzeugnamen liefen UNTER "Befehle" (gemessen: 203 px Ueberhang bei 768). Dort traegt die Marke nur ihr Symbol -- ihr Name steht ohnehin als aktuelles Werkzeug in der Leiste --, die Tastenkappen und "Alle Webtools" treten ab ("Alle Webtools" bleibt im Seitenfuss). Laeuft es trotzdem einmal ueber, scrollt die Leiste, statt Knoepfe zu ueberdecken. */ .re-nav { overflow-x: auto; scrollbar-width: none; } .re-nav::-webkit-scrollbar { display: none; } @media (max-width: 1099.98px) { .re-marke > span:not(.or-marke-symbol) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .re-kopf-aktionen .or-nur-breit, .or-kbd-gruppe { display: none; } /* nur noch Symbol: die Trefferflaeche bleibt trotzdem 44 x 44, das Symbol an der Kante */ .re-marke { min-width: 44px; } } @media (max-width: 720px) { .re-marke > span:not(.or-marke-symbol) { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } /* Ohne Werkzeugleiste (Telefon) standen die Aktionen direkt neben der Marke statt am rechten Rand -- gemessen 53 bis 111 px vor der Inhaltskante. */ .re-kopf-aktionen { margin-left: auto; } /* ── Handy (bis 720 px): Werkzeugzeile unter dem Kopf (2026-09-28) ── Vorher gab es auf dem Telefon keinen Weg zwischen Ansehen, Umwandeln und Bearbeiten. Gemessen bei iLovePDF, Smallpdf, PDF24, CloudConvert, Convertio: der Wechsel steckt dort hinter einem Menue- oder Kachelknopf, die Kopfziele sind oft kleiner als 44 px. Hier stehen alle drei direkt da, je ein Drittel der Breite, Symbol ueber Namen, 46 px hoch. Zielwerte (tests/e2e/datei-viewer-hero.spec.mjs): Kopf gesamt hoechstens 110 px, jedes Ziel mindestens 44 px, kein Querscrollen ab 320 px, "Datei auswaehlen" im ersten Bild. Der Kopf klebt auf dem Telefon nicht mit: 110 px dauerhaft oben waeren ein Achtel des Bildschirms beim Lesen. Im Arbeitsmodus bleibt die Zeile weg -- dort hat die Arbeits- flaeche ihre eigene Leiste. "Befehle" ist eine Tastaturhilfe; auf der Startseite des Telefons steht alles, was sie anbietet, ohnehin sichtbar da. */ @media (max-width: 720px) { html:not([data-or-modus]):not([data-oe-modus]) { scroll-padding-top: 12px; } html:not([data-or-modus]):not([data-oe-modus]) .re-kopf { position: relative; flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; } html:not([data-or-modus]):not([data-oe-modus]) .re-nav { display: grid; order: 3; flex: 0 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; } html:not([data-or-modus]):not([data-oe-modus]) .re-nav a { flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 46px; padding: 3px 2px; font-size: 12.5px; line-height: 1.2; white-space: normal; text-align: center; } html:not([data-or-modus]):not([data-oe-modus]) .re-nav-symbol { width: 22px; height: 22px; } html:not([data-or-modus]):not([data-oe-modus]) .re-kopf-aktionen .or-befehle { display: none; } } /* Schmales Telefon: "Dateien auswaehlen" muss im ersten Bild stehen (gemessen 2026-09-28: Konverter 706 px, Editor 816 px bei 375 x 667, solange Kicker, acht Zeilen Einleitung und der Sicherheitskasten davor standen). Seit dem Raster (2026-09-29) ist die Einleitung kurz und die Zusage steht in der Seitenspalte hinter der Ablage; der Kicker entfaellt hier, weil die Zusage dasselbe ausfuehrlicher sagt. */ @media (max-width: 560px) { .or-hero-text > .or-kicker { display: none; } }