/* KUKANILEA Webtools — Hintergrund entfernen. Eigenständige Subdomain, eigenes Mini-Design-System
(Brand-Werte aus sites/kukanilea-www/styles.css :root übernommen, nicht importiert —
volle Unabhängigkeit der Subdomain). */
:root {
--cream: #ffffff;
--ink: #0f172a;
--ink-2: #1e293b;
--ink-3: #475569;
--ink-4: #5a6678;
--line: #e6ebf1;
--line-2: #cbd5e1;
--white: #ffffff;
--paper: #f4f6f9;
/* Der Arbeitsgrund des Editors -- bewusst dunkel und neutral, damit
helle UND dunkle Motive darauf als Objekt lesbar bleiben. Kein
reines Schwarz: dunkle Motive wuerden darin verschwinden, und die
Kante zum hellen Bedienfeld daneben waere zu hart. */
--arbeitsgrund: #232b36;
--blue: #1B4965;
--blue-2: #123449;
--blue-soft: #d7e3ea;
--blue-tint: #eef3f6;
--green: #18553a;
--green-soft: #e4f1e9;
--green-border: #bfe0cd;
--warn-ink: #97491a;
--warn-soft: #fde9d4;
--radius: 14px;
--radius-lg: 20px;
--radius-sm: 8px;
--shadow-sm: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.05);
--shadow: 0 1px 0 rgba(15,23,42,.04), 0 12px 28px -16px rgba(15,23,42,.16);
--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; }
/* `hidden` heißt "nicht darstellen". Das ist keine Empfehlung, und deshalb
steht hier `!important`.
Vorher stand hier erhöhte Spezifität statt `!important`, mit der Begründung,
`html body [hidden]` schlage jede Klassenregel. Das stimmt nicht: der
Selektor wiegt (0,1,2) und verliert gegen jede Zwei-Klassen-Regel mit
`display` — und gegen jeden ID-Selektor sowieso.
Am 2026-09-19 gemessen, indem jedem Element im Dokument testweise `hidden`
gegeben und das berechnete `display` gelesen wurde. Sieben Elemente blieben
sichtbar:
.he-feature strong, .he-feature > span:last-child { display:block } (0,2,1)
#motivCanvas { display:block } (1,0,0)
Die sechs Spans sind heute harmlos — sie bekommen nie `hidden`. Der Canvas
ist es nicht: er ist genau das Element, dessen Sichtbarkeit den Unterschied
zwischen Start- und Editorzustand trägt. Eine Invariante, die von der
nächsten ID-Regel gekippt wird, ist keine. */
html body [hidden] { display: none !important; }
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); }
/* ── 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: .06em;
color: var(--blue); margin-bottom: 10px;
}
.tool-hero h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
.tool-hero p.lede { font-size: 17px; color: var(--ink-3); max-width: 60ch; margin: 0 0 0; }
/* Der Produktname sagt die Aufgabe, dieser Satz sagt die Grenze der Engine.
Er steht bewusst im Hero und nicht im Kleingedruckten: wer ein Produktfoto
freistellen will, soll es vor dem Hochladen erfahren, nicht danach. */
.tool-hero p.capability-note {
font-size: 15px; color: var(--ink-3); max-width: 60ch;
margin: 10px 0 0; padding: 10px 14px;
border-left: 3px solid var(--blue-soft);
background: var(--blue-tint); border-radius: 0 8px 8px 0;
}
.tool-hero p.capability-note strong { color: var(--ink-2); }
.privacy-note {
display: flex; align-items: flex-start; gap: 10px;
margin: 22px 0 0;
padding: 14px 16px;
background: var(--blue-tint);
border: 1px solid var(--blue-soft);
border-radius: var(--radius);
font-size: 14px; color: var(--blue-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;
}
.dropzone {
border: 2px dashed var(--line-2);
border-radius: var(--radius);
padding: 40px 20px;
text-align: center;
cursor: pointer;
background: var(--paper);
transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--blue); background: var(--blue-tint); }
.dropzone svg { color: var(--ink-4); margin-bottom: 10px; }
.dropzone .dz-title { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.dropzone .dz-sub { font-size: 13px; color: var(--ink-4); margin-top: 4px; }
.dropzone input[type="file"] { display: none; }
.file-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list li {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: 14px;
}
.file-list .file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-list .file-size { color: var(--ink-4); font-size: 12px; font-variant-numeric: tabular-nums; }
.file-list .file-remove {
border: 0; background: none; color: var(--ink-4); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px;
}
.file-list .file-remove:hover { color: var(--warn-ink); }
.file-list li[draggable="true"] { cursor: grab; }
.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); }
.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; }
/* "Bitte pruefen" ist kein Fehler: es liegt ein Ergebnis vor, und der Weg
geht weiter. Deshalb die ruhige Textfarbe statt der Warnfarbe -- sonst
sieht der haeufigste Ausgang aus wie ein Abbruch, und die Warnfarbe
verliert ihre Bedeutung fuer die Faelle, in denen wirklich etwas
schiefging.
Die Regel haengt an `data-urteil`, nicht an `data-state`: letzteres ist
das Maschinensignal "Verarbeitung beendet", auf das siebzehn
Messskripte warten. Ein Maschinensignal fuer eine Textfarbe zu brechen
waere der falsche Tausch. */
.tool-status[data-urteil="UNCERTAIN"] { color: #425365; font-weight: 500; }
/* Kein Motiv ist weder Erfolg noch Fehler. Gruen waere eine Zusage, die
nicht gilt; warnrot wuerde dem Menschen einen Fehler anlasten, den es
nicht gibt. Neutral und ruhig ist die ehrliche Farbe. */
.tool-status[data-state="no-subject"] { color: var(--ink-2, inherit); }
.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); }
.result-textarea {
width: 100%;
margin-top: 10px;
padding: 12px;
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--ink);
background: #fff;
border: 1px solid var(--green-border);
border-radius: var(--radius);
resize: vertical;
}
.page-select-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 10px;
margin: 18px 0 0;
}
.page-thumb {
position: relative;
border: 2px solid var(--line);
border-radius: var(--radius-sm);
padding: 4px;
cursor: pointer;
background: var(--white);
text-align: center;
font-size: 11px;
color: var(--ink-4);
}
.page-thumb.is-selected { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); font-weight: 700; }
.page-thumb canvas { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 4px; }
/* ── 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); }
/* ── Bild-Tool-spezifisch: Regler, Zahlenfelder, Vorschau ── */
.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 input[type="number"] {
width: 88px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
font-size: 14px; font-family: var(--font-sans); color: var(--ink);
}
.field-row input[type="range"] { width: 200px; accent-color: var(--blue); }
.field-row .field-value { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 13px; min-width: 3.5ch; }
.field-row .field-sep { color: var(--ink-4); }
.result-preview { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.result-preview figure { margin: 0; text-align: center; }
.result-preview img { max-width: 160px; max-height: 160px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.result-preview figcaption { font-size: 12px; color: var(--ink-4); margin-top: 6px; }
.result-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.result-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); }
.result-list a { font-weight: 600; }
/* ── Vorlagen (Dimension 8: Werkzeug-Ertrag) — Muster kukanilea-brief/-post ── */
.preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; }
.preset-label { font-size: 12px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.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); }
/* ═══ Ablage und Editor ═══════════════════════════════════════════════════
Die Startflaeche bleibt schmal, der Editor besteht aus Bild plus einer
Leiste. Kein dauerhafter Werkzeugbaum links, kein Inspector rechts: der
Vertrag lautet "Bild rein, Hintergrund weg", und alles, was staendig
danebensteht, behauptet etwas anderes.
Die Faehigkeiten sind dadurch nicht kleiner geworden, sondern unsichtbar --
Bereinigung, Kantenbehandlung und Lichtsaumkorrektur laufen mit Vorgaben
mit. */
kbd {
font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 5px;
border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
}
.btn-klein { padding: 10px 14px; font-size: 14px; min-height: 44px; }
/* ── Vorarbeit: welches Motiv ist gemeint? ──────────────────────────
Bewusst ruhig und ohne Werkzeugleiste. Hier gibt es genau eine
Aufgabe, und alles, was daneben stuende, wuerde davon ablenken. */
.vorarbeit {
display: flex; flex-direction: column; gap: 12px;
padding: 12px 16px 24px; min-height: 60vh;
}
.vorarbeit[hidden] { display: none; }
.vorarbeit-kopf {
display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.vorarbeit-titelgruppe { flex: 1 1 auto; text-align: center; }
.vorarbeit-frage {
margin: 0; font-size: 1.15rem; font-weight: 600;
}
.vorarbeit-hinweis {
margin: 4px 0 0; color: var(--ink-2, #5a6472);
font-size: .95rem; min-height: 1.4em;
}
/* Den Zustand "zuklein" gibt es beim Marker nicht mehr. Beim Umkreisen
war ein winziges Polygon fast sicher ein Verrutschen; ein kurzer
Strich ist dagegen genau die Bedienart, die ohne Ziehen auskommt. */
.vorarbeit-buehne {
flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
min-height: 0; background: var(--flaeche-2, #f4f6f9);
border-radius: 12px; padding: 8px; overflow: hidden;
}
#vorarbeitCanvas {
display: block; max-width: 100%; max-height: 100%;
border-radius: 6px;
/* Der Zeiger gehoert der Geste, nicht dem Scrollen. Ohne `touch-action`
nimmt der Browser den ersten Zug als Wisch und die Linie beginnt
mitten im Bild. */
touch-action: none;
cursor: crosshair;
}
.vorarbeit-fuss {
display: flex; align-items: center; justify-content: center; gap: 12px;
flex-wrap: wrap;
}
/* DIE ZIELGROESSE HING AN EINER BREITENABFRAGE, UND DAS WAR FALSCH.
`min-height: 44px` stand nur unter `max-width: 560px`. Am 2026-09-21
gemessen: „Freistellen" war 39 px hoch, sobald das Fenster breiter
war -- und das trifft genau das Geraet, das der Qualitaetsvertrag als
Beispiel nennt, das iPad im Querformat: grober Zeiger, 1024 Pixel
breit, also keine Telefonregel.
Die 44 Pixel gelten deshalb jetzt unbedingt. Ein groesserer
Hauptknopf schadet auf keinem Geraet; die Frage war nie, ob er auf
dem Desktop kleiner sein DARF, sondern warum er es sollte.
UND DIE ZAHL IST UNSERE, NICHT DIE DER NORM. WCAG 2.2 AA verlangt in
SC 2.5.8 mindestens 24x24 CSS-Pixel oder entsprechende Abstaende; die
44 stehen in SC 2.5.5 und gehoeren zur AAA-Stufe. 39 px waren also
normkonform und trotzdem zu klein -- KUKANILEA fordert hier bewusst
mehr als das Pflichtmass. */
.vorarbeit-fuss > .btn { min-height: 44px; }
/* Der Weg ohne Ziehen braucht keinen eigenen Knopf mehr: ein Tipp IST
ein Strich mit einem Punkt. Der Satz daneben sagt es, damit niemand
es ausprobieren muss. */
.vorarbeit-tipp {
margin: 0; color: var(--ink-2, #5a6472); font-size: .9rem;
}
@media (max-width: 560px) {
.vorarbeit { padding: 8px 10px 0; }
.vorarbeit-frage { font-size: 1.05rem; }
.vorarbeit-titelgruppe { order: -1; flex-basis: 100%; }
/* Der Fuss bleibt erreichbar, ohne den Bildbereich zu verkleinern.
Eine Seitenleiste waere auf dem Telefon genau die falsche
Bauform -- sie nimmt Breite, und Breite ist hier das Knappe. */
.vorarbeit-fuss {
position: sticky; bottom: 0; z-index: 2;
padding: 10px 0 14px; margin-top: 8px;
background: linear-gradient(to bottom,
rgba(246,248,251,0) 0%, var(--flaeche, #f6f8fb) 28%);
}
.vorarbeit-fuss > .btn { flex: 1 1 45%; }
}
/* Der Skip-Link gehoert seit V17 der Shell (sync_webtool_shell.py) --
sie blendet ihn nach oben aus und holt ihn bei Fokus herein. Die
fruehere eigene Regel hier (`left: -9999px`) war danach eine zweite
Wahrheit fuer dasselbe Element und ist entfernt. */
/* ── ARBEITSMODUS ─────────────────────────────────────────────────────
Ab dem ersten Bild gehoert der Viewport der Aufgabe.
Vorher war der Editor ein Abschnitt in einer Landingpage: Markenleiste
und Werkzeugleiste uebereinander, darunter lief der Erklaertext weiter,
und das Bedienfeld schwebte als Karte rechts in einer grossen leeren
Flaeche. Am realen Screenshot bei 1440x900 gemessen: das Bild stand auf
58 % der Hoehe klein in der Mitte, rechts daneben mehrere hundert Pixel
tote Flaeche.
Die Ursache war nicht die Karte -- sie war, dass niemand die Hoehe
besass. Deshalb aendert sich hier die EIGENTUEMERSCHAFT und nicht die
Optik: Kopf und Arbeitsflaeche fuellen zusammen den Viewport, die
Buehne nimmt, was uebrig ist, der Inspector docket daran an.
`100dvh` statt `100vh`: auf dem Telefon waere die Arbeitsflaeche sonst
genau um die ein- und ausfahrende Adressleiste zu hoch. */
[data-he-modus="arbeit"], [data-he-modus="arbeit"] body {
height: 100%; overflow: hidden;
}
[data-he-modus="arbeit"] body { display: flex; flex-direction: column; }
/* Kopfleiste, Fuss und Erklaerabschnitte gehoeren zum Erklaermodus. Sie
werden nicht verkleinert, sondern treten ab -- ein halber
Marketingabschnitt unter einer Arbeitsflaeche ist schlechter als
keiner. Die `#start`-Sektion ist ohnehin schon `hidden`. */
[data-he-modus="arbeit"] .site-header,
[data-he-modus="arbeit"] .site-footer,
[data-he-modus="arbeit"] .kuk-legal-bar { display: none; }
/* Der Statussatz behaelt seine Hoehe. Ohne das schrumpft er als
Flex-Kind der Arbeitsflaeche und wird mitten im Wort abgeschnitten --
am 2026-09-22 im ersten Anlauf genau so gemessen. */
[data-he-modus="arbeit"] .editor-kopf,
[data-he-modus="arbeit"] .editor-status { flex: none; }
/* Die Zeilenlaenge war fuer einen Textblock in einer scrollenden Seite
gedacht. Als Leiste ueber einer Arbeitsflaeche erzeugt `78ch` einen
weissen Kasten, der mitten im Nichts endet -- der Satz sieht dann
abgeschnitten aus, obwohl er vollstaendig da ist. */
[data-he-modus="arbeit"] .editor-status .tool-status { max-width: none; }
[data-he-modus="arbeit"] #main {
flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* IM ARBEITSMODUS IST DER EDITOR DAS EINZIGE KIND VON `#main`.
Nicht nach Klassennamen ausgeblendet, sondern nach Stellung: neben
`#start` und `#vorarbeit` liegen dort noch zwei `.container`-Abschnitte
und der Seitenfuss. Genau die haben den Umbau zuerst zum Scheitern
gebracht -- `.editor` hatte `flex-grow: 1` und trotzdem Hoehe 0, weil
die Geschwister die 900 px bereits verbraucht hatten. Eine Liste von
Klassennamen waere beim naechsten neuen Abschnitt still wieder falsch;
diese Regel ist es nie. */
[data-he-modus="arbeit"] #main > :not(#editor):not(#vorarbeit):not(#arbeit) { display: none; }
/* Die Stufenanzeige zwischen "Freistellen" und Ergebnis. Sie zieht dafuer
aus dem Hero nach `#main` um -- sonst stuende sie in einem versteckten
Elternteil, und die Seite waere waehrend der Verarbeitung leer. Mittig,
weil sie in diesem Moment das Einzige ist, was es zu sehen gibt. */
[data-he-modus="arbeit"] #main > #arbeit {
margin: auto; width: min(560px, calc(100% - 32px));
}
[data-he-modus="arbeit"] #main > #arbeit[hidden] { display: none; }
/* Die Vorarbeit ist die zweite Arbeitsflaeche, nicht ein Vorspann.
Sie bekommt dieselbe Hoehenkette -- `min-height: 0` an jedem Glied,
sonst setzt die Flexbox-Mindestgroesse die Inhaltshoehe durch und die
Kette bricht still.
`min-height: 60vh` faellt dabei weg: das war eine Schaetzung des
verfuegbaren Raums fuer eine scrollende Seite. Hier kennt die Flaeche
ihre Hoehe. */
[data-he-modus="arbeit"] .vorarbeit {
flex: 1; min-height: 0; padding-bottom: 12px;
}
[data-he-modus="arbeit"] .vorarbeit-kopf,
[data-he-modus="arbeit"] .vorarbeit-fuss { flex: none; }
[data-he-modus="arbeit"] .vorarbeit-buehne { min-height: 0; }
[data-he-modus="arbeit"] .vorarbeit-recht { flex: none; }
/* Im Erklaermodus traegt der Seitenfuss den Rechtsweg. Zwei Paare
Impressum-Links auf einer Seite sind keine Redundanz, sondern die
Frage, welches gilt. */
.vorarbeit-recht {
display: none; justify-content: center; gap: 16px;
font-size: 12.5px; padding-top: 2px;
}
[data-he-modus="arbeit"] .vorarbeit-recht { display: flex; }
.vorarbeit-recht a { color: var(--ink-2, #5a6472); text-decoration: none; }
.vorarbeit-recht a:hover { text-decoration: underline; }
.editor { display: flex; flex-direction: column; padding-bottom: 76px; }
/* KEIN `padding-bottom: 0` HIER.
Unterhalb von 960 px liegt die Werkzeugleiste als `position: fixed`
am unteren Rand -- die Arbeitsflaeche weiss nichts von ihr. Der erste
Anlauf hat den Abstand global entfernt, und prompt endete das Bild auf
dem Telefon bei 744, waehrend die Leiste bei 733 beginnt.
Die Hoehe wird gemessen, nicht geraten: `--leiste-h` pflegt
`hintergrund-entfernen.js` per ResizeObserver, weil fuenf Knoepfe bei
412 px Breite in zwei Zeilen umbrechen und die Leiste dann 111 px hoch
ist. Ab 960 px ist sie ausgeblendet, und der 960er-Block setzt den
Abstand dort ohnehin auf 0. */
[data-he-modus="arbeit"] .editor {
flex: 1; min-height: 0;
padding-bottom: calc(var(--leiste-h, 76px) + 8px);
}
/* ── Desktop: Bild links, Einstellungen rechts ────────────────────────────
Der frueher hier stehende Vertrag lautete "eine Leiste unten, sonst Bild,
kein Inspector rechts". Er galt fuer ein Werkzeug mit einem Knopf. Mit
Korrektur, Hintergruenden, Text, mehreren Grafiken und Format ist das
Gegenteil richtig: wer eine Kante korrigiert, will Kante UND Regler sehen,
ohne vorher etwas aufzuklappen.
Auf dem Telefon bleibt es beim Blatt -- dort ist neben dem Bild kein
Platz, und das ist keine Geschmacksfrage. */
@media (min-width: 960px) {
/* KEIN `gap`, KEIN `padding-right`, KEIN `align-items: start`.
Alle drei zusammen erzeugten die schwebende Insel: der Abstand
trennte den Inspector von der Buehne, der Innenabstand schob ihn vom
Fensterrand weg, und `start` liess ihn auf seiner Inhaltshoehe
stehen statt mitzuwachsen. Er docket jetzt an -- eine Trennlinie
statt einer Luecke.
Die Spalte ist 320 px und waechst bis 340: das ist der Bereich, in
dem Desktop-Inspektoren ueblicherweise liegen, und er traegt die
laengste Beschriftung dieses Panels ohne Umbruch. */
.editor-arbeit {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 340px);
align-items: stretch;
}
/* Ab hier traegt das Raster; darunter ist die Arbeitsflaeche ein
einspaltiger Flexcontainer (siehe oben). `display: grid` muss den
dortigen `display: flex` deshalb ausdruecklich zuruecknehmen. */
[data-he-modus="arbeit"] .editor-arbeit { display: grid; }
/* Hier ist die Leiste ausgeblendet, also braucht niemand Platz fuer
sie. Die Regel muss dieselbe Spezifitaet tragen wie die
Arbeitsmodus-Regel oben -- `.editor { padding-bottom: 0 }` allein
verliert gegen sie, und das kostete auf dem Desktop 84 px Bildhoehe
(477x720 fiel auf 421x636). */
[data-he-modus="arbeit"] .editor { padding-bottom: 0; }
@media (min-width: 1280px) {
.editor-arbeit { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* Der Inspector gehoert zur Anwendung, nicht ueber sie: eine
Trennlinie, kein Schlagschatten, kein abgerundeter Kartenrand.
EIN MEDIA QUERY ERHOEHT KEINE SPEZIFITAET.
Zwanzig Zeilen weiter unten steht `.blatt { position: static; width:
auto }` -- die Regel, die den Inspector auf dem Desktop andocken
SOLLTE. Sie hat nie gewirkt: die Grundregel `.blatt { position:
fixed; width: min(360px, ...) }` steht spaeter in der Datei, hat
dieselbe Spezifitaet und gewinnt deshalb.
Gemessen am 2026-09-22: Spalte `1100px 340px`, und darin ein
`position: fixed`-Element von 360 px Breite. Das war die schwebende
Karte -- nicht eine Gestaltungsentscheidung, sondern eine Regel, die
seit ihrem ersten Tag stumm verloren hat.
Diese Regel hier hat eine Klasse mehr und gewinnt unabhaengig von
der Reihenfolge. */
[data-he-modus="arbeit"] .blatt {
position: static; width: auto; pointer-events: auto;
border-left: 1px solid var(--line); background: var(--white);
min-height: 0; overflow: hidden; display: flex;
}
[data-he-modus="arbeit"] .blatt-inner {
flex: 1; min-height: 0; overflow-y: auto;
border: 0; border-radius: 0; box-shadow: none;
}
/* Die Leiste unten entfaellt: zwei Wege zur selben Wahl nebeneinander sind
keine Redundanz, sondern eine Frage ("welcher gilt?"). Die Tabs stehen
dort, wo ihre Wirkung sichtbar wird. */
.editor .leiste { display: none; }
.editor { padding-bottom: 0; }
.blatt { position: static; width: auto; pointer-events: auto; }
.blatt-inner { max-height: none; }
.blatt-zu { display: none; } /* nichts zu schliessen */
.buehne { padding-right: 0; }
}
.editor-kopf {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--white);
}
.editor-marke {
font-weight: 700; font-size: 12px; letter-spacing: .12em;
color: var(--ink-4); white-space: nowrap;
}
/* Auf schmalen Fenstern zaehlt jeder Pixel der Kopfzeile fuer die
Knoepfe -- die Marke steht dann in der Startansicht. */
@media (max-width: 720px) { .editor-marke { display: none; } }
.editor-titel { font-weight: 700; color: var(--ink-2); flex: 1; text-align: center; }
.editor-kopf-rechts { display: flex; gap: 8px; }
/* Das Urteil steht zwischen Kopf und Buehne -- also zwischen dem, was der
Mensch angestossen hat, und dem, was dabei herauskam.
Leer nimmt es keinen Platz: `:empty` faellt ganz weg, damit der ruhige
Fall (CONFIDENT nach dem Lesen, oder ein zurueckgesetzter Zustand) keine
leere Leiste ueber dem Bild stehen laesst und die Buehne nicht springt.
Kein `position: sticky` und keine Animation: der Satz ist eine Auskunft,
kein Alarm. Wer ihn gelesen hat, soll ihn wegscrollen koennen.
Die Regeln haengen am Textelement, nicht am Container: der Container
traegt nach dem Umzug immer das `
` und waere nie `:empty`. Das `
`
dagegen ist es genau dann, wenn `melde("")` es geleert hat.
EIN KOMMENTAR, DER ZWEIMAL SCHLIESST, VERWIRFT DIE REGEL DAHINTER.
Hier stand mitten im Absatz ein zweites Kommentarende. Alles danach bis
zur naechsten geschweiften Klammer las der Parser als Selektor -- und
weil ein Selektor diese Zeichenfolge nicht enthalten darf, fiel die
GANZE folgende Regel weg. Am 2026-09-22 live gemessen: padding 0px,
kein Rahmen, kein Hintergrund, max-width none. Der Statussatz klebte am
linken Fensterrand. Rot wurde davon nichts.
Und die Falle schnappt beim Erklaeren sofort wieder zu: der erste
Versuch dieses Absatzes ZITIERTE die Zeichenfolge -- und schloss damit
denselben Kommentar an derselben Stelle. Sie wird hier deshalb benannt
und nicht geschrieben. Waechter: check_css_kommentare.py */
.editor-status .tool-status {
margin: 0;
max-width: 78ch;
padding: 10px 18px;
border-bottom: 1px solid var(--line);
background: var(--white);
}
.editor-status .tool-status:empty { display: none; }
.buehne {
display: flex; flex-direction: column; min-width: 0;
padding: 20px 18px 10px; background: var(--paper);
}
.buehne-inner {
flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
}
/* ── Nur das Ergebnis ─────────────────────────────────────────────────
Hier stand die Vorher/Nachher-Apparatur: zwei deckungsgleiche
Leinwaende, eine Trennlinie, zwei Marken, ein Schieberegler und ein
Umschalter darunter. Sie war technisch schoen -- beim Ziehen wanderte
nur ein `clip-path`, nichts wurde neu gerechnet.
Sie beantwortete nur die falsche Frage. Wer ein Bild freistellt, will
das Ergebnis sehen, nicht zur Haelfte das, was er loswerden wollte.
Das Original ist nicht verloren: "Rueckgaengig" fuehrt dorthin
zurueck, und die Datei liegt ohnehin auf seinem Geraet. */
.ergebnisflaeche { display: inline-block; max-width: 100%; }
/* Ist ein Panel offen, macht das Bild Platz. Sonst arbeitet der Mensch an
einem Motiv, das er nicht sieht -- und genau das war der erste Eindruck
des fertigen Panels. */
@media (max-width: 860px) { .editor.hat-panel #motivCanvas { max-height: 30vh; } }
/* ── Das Bild nimmt den Raum, der da ist ──────────────────────────────
`max-height: 58vh` war eine willkuerliche Zahl aus der Zeit, als der
Editor mitten in einer scrollenden Seite stand -- dort musste unter
dem Bild noch etwas sichtbar bleiben. Im Arbeitsmodus ist genau das
falsch: die Buehne kennt ihre Hoehe, und das Bild soll sie ausnutzen.
Gemessen am realen Screenshot bei 1440x900: die Flasche stand auf rund
der halben verfuegbaren Hoehe, darunter und daneben mehrere hundert
Pixel leerer Grund. Kein Pixel davon war noetig.
`max-height: 100%` gilt aber nur, wo die Buehne eine BESTIMMTE Hoehe
hat. Unterhalb von 960 px gibt es kein Workspace-Raster: dort ist die
Hoehe der Kette auto, ein Prozentwert damit unbestimmt -- und der
Browser laesst ihn fallen.
Genau das ist im ersten Anlauf passiert. Auf dem Tablet (768x1024) kam
das Bild in seiner vollen Eigenhoehe von 1000 px heraus, endete bei
1120 und lag damit unter der Werkzeugleiste, die bei 913 beginnt. Die
vorherige viewportbezogene Deckelung war dort richtig und bleibt.
Deshalb stehen die Regeln im 960er-Block und nicht hier. Hier bleibt
nur, was auf jeder Breite stimmt. */
/* ── DIE ARBEITSFLAECHE IST KEIN SEITENHINTERGRUND ────────────────────
`--paper` ist #f4f6f9 -- fast weiss. Ein helles Motiv darauf hat
keinen Halt: Bild und Flaeche verschwimmen, und was bleibt, ist der
Eindruck von viel leerem Raum. Genau das war der Befund am realen
Screenshot ("zu breit, zu schwer").
Gemessen: das Bild belegt bei 1440x900 nur 26 % des Fensters -- die
Hoehe zu 91 %, die Breite aber nur zu 43 %. Der Rest ist bei einem
Hochformat unvermeidlich; was sich aendern laesst, ist NICHT die
Groesse, sondern ob er wie Arbeitsflaeche aussieht oder wie Leere.
Dunkel und neutral ist deshalb kein Geschmack, sondern die Bauform
jedes Bildeditors: das Bild wird zum Objekt auf einem Tisch. */
[data-he-modus="arbeit"] .buehne {
min-height: 0;
background: var(--arbeitsgrund);
}
[data-he-modus="arbeit"] .buehne-fuss { color: rgba(255, 255, 255, .62); }
[data-he-modus="arbeit"] .buehne-recht a { color: rgba(255, 255, 255, .62); }
[data-he-modus="arbeit"] .buehne-recht a:hover { color: #fff; }
/* Auf dunklem Grund traegt ein dunkler Schlagschatten nichts. Eine
feine helle Kante trennt das Bild von der Flaeche -- auch dann, wenn
das Motiv selbst dunkel ist. */
[data-he-modus="arbeit"] #motivCanvas {
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .35);
}
/* Die Hoehenkette gilt auf JEDER Breite -- nur das Raster daneben nicht.
Beim ersten Anlauf stand `flex: 1` nur im 960er-Block, und damit blieb
die Kette auf dem Telefon unbestimmt: das Bild hing an `max-height:
44vh`, waehrend die Buehne nach dem Wegfall von Kopf und
Landingpage-Inhalt die ganze Hoehe hatte. Live gemessen: das Bild
endete bei 400 px, die Werkzeugleiste beginnt bei 733 -- dazwischen
rund 330 px, und darunter noch einmal so viel. */
/* NUR unterhalb des Rasters. Beim ersten Anlauf stand diese Regel ohne
Media Query -- und weil sie SPAETER in der Datei steht als der
960er-Block und dieselbe Spezifitaet hat, machte sie aus dem Raster
wieder einen Flexcontainer. Ergebnis auf dem Desktop: zwischen Buehne
und Inspector klafften 781 px. Drei Workspace-Tests haben genau das
gefangen. */
[data-he-modus="arbeit"] .editor-arbeit { flex: 1; min-height: 0; }
@media (max-width: 959.98px) {
[data-he-modus="arbeit"] .editor-arbeit { display: flex; }
[data-he-modus="arbeit"] .editor-arbeit > .buehne { flex: 1; min-width: 0; }
}
[data-he-modus="arbeit"] .buehne-inner { padding: 4px; }
[data-he-modus="arbeit"] .ergebnisflaeche {
display: flex; width: 100%; height: 100%; min-height: 0;
align-items: center; justify-content: center;
}
/* Jetzt ist die Hoehe bestimmt, also darf das Bild in Prozent rechnen.
Die viewportbezogenen Deckelungen weiter unten (44vh, 58vh) stammen
aus der Zeit, als der Editor in einer scrollenden Seite stand.
NICHT zurueckgenommen werden darf die Deckelung bei offenem Panel:
ist auf dem Telefon ein Blatt offen, MUSS das Bild Platz machen,
sonst korrigiert der Mensch an einem Motiv, das er nicht sieht.
HIER STAND, JENE REGEL STEHE SPAETER UND GEWINNE. Das war falsch --
sie steht rund achtzig Zeilen FRUEHER, hat dieselbe Spezifitaet, und
damit gewann diese hier. Live gemessen: Bild endet bei 543, das Blatt
beginnt bei 275; es lag darunter. Dieselbe Kaskadenfalle zum dritten
Mal an einem Tag, diesmal in einem Kommentar, der sie erklaeren
sollte. Die Deckelung steht deshalb jetzt am Ende dieser Datei, mit
Arbeitsmodus-Spezifitaet. */
/* Die FLAECHE traegt das Seitenverhaeltnis (`--bild-ar` setzt `male()`),
das Canvas fuellt sie ganz aus. So passt das Bild in beide Richtungen
ein -- auch nach OBEN -- und die Elementbox bleibt trotzdem exakt das
gemalte Bild. Genau das unterscheidet diesen Weg von
`object-fit: contain`, dessen Briefkastenrand jeden Zeigerpfad
zerstoeren wuerde. */
/* DAS VERHAELTNIS HAELT NUR, WER NICHT BEIDE MASSE VORGIBT.
Hier stand `height: 100%` zusammen mit `aspect-ratio` und
`max-width: 100%`. Auf einer hochkanten Buehne (Telefon, 362x539) war
die Hoehe fest, die Breite wurde gekappt -- und `aspect-ratio` fiel
still weg: ein Querformatfoto 1,20 stand in einer Flaeche von 0,67,
senkrecht um den Faktor 1,79 gestreckt (2026-09-23, live).
Jetzt wird die BREITE aus beiden Grenzen gerechnet -- Buehnenbreite
und Buehnenhoehe mal Verhaeltnis --, und die Hoehe folgt daraus. Die
Buehne ist dafuer ein Groessencontainer; ihre Groesse kommt aus
`flex: 1 1 0%`, nicht aus dem Inhalt, sonst fiele sie auf null. */
[data-he-modus="arbeit"] .buehne-inner { container-type: size; }
[data-he-modus="arbeit"] .ergebnisflaeche {
aspect-ratio: var(--bild-ar, auto);
height: auto;
width: min(100cqw, calc(100cqh * var(--bild-q, 1)),
var(--bild-max-b, 100cqw),
calc(var(--bild-max-h, 100cqh) * var(--bild-q, 1)));
max-width: none; max-height: none;
}
[data-he-modus="arbeit"] .ergebnisflaeche canvas,
[data-he-modus="arbeit"] .ergebnisflaeche #motivCanvas {
width: 100%; height: 100%; max-width: none; max-height: none;
}
#motivCanvas {
max-width: 100%; max-height: 58vh; display: block;
border-radius: 8px; box-shadow: 0 2px 14px rgba(15, 23, 42, .10);
touch-action: none; /* sonst scrollt die Seite beim Malen oder Ziehen */
}
#motivCanvas.ist-pinsel { cursor: var(--pinsel-cursor, crosshair); }
/* Schachbrett nur dort, wo Transparenz auch gemeint ist. */
#motivCanvas.ist-transparent {
background-image:
linear-gradient(45deg, #e9edf2 25%, transparent 25%, transparent 75%, #e9edf2 75%),
linear-gradient(45deg, #e9edf2 25%, transparent 25%, transparent 75%, #e9edf2 75%);
background-size: 18px 18px; background-position: 0 0, 9px 9px;
background-color: var(--white);
}
.buehne-fuss {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 14px; font-size: 13px; color: var(--ink-4);
}
/* Ruhig: eine Auskunft am Rand der Arbeitsflaeche, kein Menue. */
.buehne-recht { display: flex; gap: 16px; }
.buehne-recht a { color: var(--ink-4); text-decoration: none; }
.buehne-recht a:hover { color: var(--ink-2); text-decoration: underline; }
.vergleich { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.vgl {
border: 0; background: var(--white); font: inherit; font-size: 13px;
padding: 10px 16px; min-height: 44px; cursor: pointer; color: var(--ink-3);
}
.vgl.is-aktiv { background: var(--blue); color: var(--white); font-weight: 600; }
/* Die eine Leiste. Fest am Fensterrand und ueber dem Panel: sie ist das, was
erreichbar bleiben muss. `position: sticky` haengt am Container -- sobald
der Editor hoeher ist als das Fenster, steht sie woanders als ein Panel,
das mit dem FENSTER rechnet. Genau daran ist der erste Anlauf gescheitert. */
.leiste {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
padding: 10px 14px; background: var(--white); border-top: 1px solid var(--line);
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
}
.lz {
border: 1px solid var(--line-2); border-radius: 10px; background: var(--white);
font: inherit; font-size: 14px; padding: 10px 18px; min-height: 44px;
cursor: pointer; color: var(--ink-2);
}
.lz:hover { border-color: var(--blue-soft); background: var(--blue-tint); }
.lz.is-aktiv { border-color: var(--blue); background: var(--blue); color: var(--white); font-weight: 600; }
/* Das Panel ist KEIN Dialog. Es laesst die Leiste frei und das Bild sichtbar;
ein Panel, das die Leiste blockiert, aus der es aufgerufen wurde, ist ein
Bedienfehler.
Auf dem Desktop sitzt es RECHTS, nicht unten. Unten hat es das Motiv
verdeckt -- und wer die Kante korrigiert, muss die Kante sehen. Auf einem
breiten Bildschirm ist daneben Platz; auf einem schmalen ist er nicht da,
dort wird es ein Blatt am unteren Rand. */
.blatt {
position: fixed; right: 18px; z-index: 60;
width: min(360px, calc(100vw - 36px));
pointer-events: none;
/* DIE HOEHE DER LEISTE WIRD GEMESSEN, NICHT GERATEN.
Hier stand `bottom: 82px` und weiter unten `bottom: 70px` fuer das
Telefon. Die Leiste ist dort aber 111 Pixel hoch -- fuenf Knoepfe
brechen bei 412 Pixeln Breite in zwei Zeilen um. Das Blatt lag
damit 41 Pixel zu tief, und "Entfernen" ragte unter die Leiste;
Playwright kam zehn Versuche lang nicht an den Knopf.
`--leiste-h` pflegt `hintergrund-entfernen.js` per ResizeObserver.
Der Vorgabewert traegt den Fall, dass kein Skript laeuft. */
bottom: calc(var(--leiste-h, 82px) + 12px);
}
.blatt-inner {
pointer-events: auto;
max-height: min(62vh, 620px); overflow-y: auto;
background: var(--white); border: 1px solid var(--line);
border-radius: 14px; padding: 16px 18px 18px;
box-shadow: 0 8px 30px rgba(15, 23, 42, .18);
}
.blatt-tabs {
display: flex; gap: 4px; margin: -4px -6px 12px; flex-wrap: wrap;
border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
/* AUF DEM TELEFON FUEHRT DIE LEISTE UNTEN -- UND NUR SIE.
Diese Regel stand schon im Stylesheet, rund hundertsiebzig Zeilen
WEITER OBEN, und hat nie gewirkt: eine Media-Query erhoeht die
Spezifitaet nicht, und bei gleicher Spezifitaet gewinnt die spaetere
Regel -- also die Definition darueber.
Am 2026-09-21 in der realen Abnahme gesehen: auf 412 Pixeln standen
"Korrigieren · Hintergrund · Text · Grafik · Format" ZWEIMAL
gleichzeitig, einmal als Reiterzeile im Blatt und einmal in der
Leiste darunter. Zwei Wege zur selben Wahl nebeneinander sind keine
Redundanz, sondern eine Frage. */
@media (max-width: 959px) {
.blatt-tabs { display: none; }
}
.blatt-tab {
border: 0; background: transparent; font: inherit; font-size: 13px;
padding: 8px 10px; min-height: 40px; border-radius: 8px; cursor: pointer;
color: var(--ink-3);
}
.blatt-tab:hover { background: var(--blue-tint); color: var(--ink-2); }
.blatt-tab[aria-selected="true"] { background: var(--blue); color: var(--white); font-weight: 600; }
@media (min-width: 960px) { .blatt-kopf h2 { display: none; } }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blatt-kopf h2 { font-size: 16px; margin: 0; }
.blatt-zu {
border: 0; background: transparent; font-size: 26px; line-height: 1;
width: 44px; height: 44px; cursor: pointer; color: var(--ink-3); border-radius: 8px;
}
.blatt-zu:hover { background: var(--paper); color: var(--ink); }
.blatt-inhalt { margin-top: 10px; }
/* ══ BEDIENFELD TRITT BEIM PINSELN ZURUECK ═════════════════════════════
Auf dem Telefon liegt das Blatt ueber der unteren Bildhaelfte. Wer
"Behalten" oder "Entfernen" waehlt, will im naechsten Moment auf dem
Bild streichen -- und sieht davon die Haelfte nicht.
Es verschwindet nicht, es schrumpft: die Tabs und die Kopfzeile
bleiben stehen, der Rest klappt weg. Damit ist der Weg zurueck immer
sichtbar, und niemand muss raten, wo die Einstellungen geblieben sind.
Ausdruecklich NUR unterhalb von 960 px. Auf dem Desktop steht das Feld
neben dem Bild und verdeckt nichts -- dort waere das Schrumpfen ein
Verlust ohne Gegenwert. */
@media (max-width: 959px) {
.blatt.ist-kompakt .blatt-inner {
max-height: none;
padding-bottom: 10px;
}
.blatt.ist-kompakt .blatt-inhalt {
max-height: 0; margin-top: 0; overflow: hidden;
opacity: 0; transition: max-height .22s ease, opacity .16s ease;
}
/* Ein Hinweis, der sagt, was gerade gilt und wie man zurueckkommt.
Ohne ihn saehe das eingeklappte Feld aus, als waere etwas kaputt. */
.blatt.ist-kompakt .blatt-kopf::after {
content: "Streichen Sie auf dem Bild · Tab antippen für Einstellungen";
flex: 1; font-size: 12px; color: var(--ink-3); text-align: right;
}
.blatt.ist-kompakt .blatt-kopf h2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.blatt.ist-kompakt .blatt-inhalt { transition: none; }
}
.blatt-frage { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }
.blatt-wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.blatt-wahl-spalte { flex-direction: column; }
.blatt-wahl .btn { flex: 1; min-width: 150px; }
.insp-hinweis { font-size: 13px; color: var(--ink-4); line-height: 1.5; margin: 8px 0 0; }
.insp-trenner { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.insp-feld { display: block; margin-bottom: 14px; font-size: 13px; color: var(--ink-3); }
.insp-feld > span { display: block; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.insp-feld input[type="range"] { width: 100%; }
.insp-feld output { font-size: 12px; color: var(--ink-4); }
.insp-feld textarea {
width: 100%; font: inherit; font-size: 14px; padding: 9px 11px;
border: 1px solid var(--line-2); border-radius: 8px; resize: vertical;
}
/* Ein Regler mit zwei Enden sagt, was er tut. "Toleranz 115 %" sagt es nicht.
Die Spezifitaet muss `.insp-feld > span` schlagen -- sonst gewinnt dort
`display: block`, und die beiden Enden stehen als ein zusammenhaengender
Satz nebeneinander statt links und rechts. Genau so gemessen. */
.insp-feld > span.regler-enden {
display: flex; justify-content: space-between; gap: 16px;
font-size: 12px; font-weight: 400; color: var(--ink-4); margin: 4px 0 0;
}
.regler-enden span { display: inline; }
.insp-farbe input[type="color"] {
width: 100%; height: 44px; padding: 2px; border: 1px solid var(--line-2);
border-radius: 8px; background: var(--white); cursor: pointer;
}
.insp-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.insp-schalter {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.insp-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.segmente { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg {
border: 0; background: var(--white); font: inherit; font-size: 14px;
padding: 10px 16px; min-height: 44px; cursor: pointer; color: var(--ink-3);
}
.seg.is-aktiv { background: var(--blue); color: var(--white); font-weight: 600; }
.hg-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hg {
border: 1px solid var(--line-2); border-radius: 9px; background: var(--white);
font: inherit; font-size: 13px; padding: 10px 8px; min-height: 48px;
cursor: pointer; color: var(--ink-2); line-height: 1.3;
}
.hg small { color: var(--ink-4); font-size: 11px; }
.hg.is-aktiv { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.hg.is-aktiv small { color: var(--blue); }
@media (max-width: 860px) {
/* Der Editorkopf trug drei beschriftete Knoepfe plus Titel und lief bei
390 px um 128 Pixel ueber -- waagerechtes Scrollen mitten im
Kernworkflow. Gemessen im LAUFENDEN Zustand: die laengsten Zeilen einer
Anwendung stehen im offenen Editor, nicht auf der Startseite. */
.editor-titel { display: none; }
.editor-kopf { gap: 8px; padding: 8px 10px; }
.editor-kopf-rechts { margin-left: auto; }
#btnZurueck .wort, #btnVor .wort { display: none; }
#btnZurueck, #btnVor { padding: 10px 12px; min-width: 44px; }
.buehne { padding: 12px 10px 6px; }
#motivCanvas { max-height: 44vh; }
.leiste { gap: 6px; padding: 8px 8px; }
.lz { flex: 1 1 30%; padding: 10px 6px; font-size: 13px; }
.blatt { left: 0; right: 0; width: auto; display: flex; justify-content: center; }
.blatt-inner {
width: 100%; border-radius: 14px 14px 0 0;
/* 3 · DIE HOEHE FOLGT DEM, WAS DA IST.
`46vh` war eine Zahl ohne Bezug: bei 839 Pixeln sind das 386, und
darunter stehen noch Leiste und Abstand. Gemessen ragte der
Inhalt 87 Pixel unter den Viewport, und Pinselgroesse,
Rueckgaengig und Zuruecksetzen waren ohne Scrollen nicht da.
Jetzt bleibt oben ein Drittel fuer das Bild stehen -- wer die
Kante korrigiert, muss die Kante sehen. */
max-height: calc(100vh - var(--leiste-h, 82px) - 34vh);
box-shadow: 0 -8px 30px rgba(15, 23, 42, .16);
}
.hg-gitter { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ablage, .lz, .vgl, .hg, .seg { transition: none; }
}
/* 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