/*
* BuchStudio – gemeinsame Oberfläche für Admin und Kunden-App
*
* Grundlage: docs/vorgaben/01-design-und-darstellung.md, Teil A (§7 vollständig)
* und docs/ARCHITEKTUR.md §19 (gemeinsames UI-Vokabular). Eine Datei für beide
* Bereiche: Der Admin ist dicht und sachlich, die Kunden-App bekommt über
* `body.area-app` dieselben Bausteine nur größer, runder und luftiger – so muss
* kein Modul zwei Varianten pflegen.
*
* Aufbau:
* 1 Farben und Maße 9 Seitenkopf, Leerzustand, Seitenzahlen
* 2 Grundlagen 10 Assistent (Schritte, Hauptfrage, Leiste unten)
* 3 Grundgerüst 11 Auswahlkarten, Chips, Umschalter
* 4 Karten und Raster 12 Fortschritt, Ampel, Credits, Pakete
* 5 Formulare 13 Kopierfelder, Prüfliste
* 6 Knöpfe 14 Vorschau, Farbfelder, Hochladen, Figuren
* 7 Meldungen 15 Hilfe-Symbol, Dialog, Klappbereiche
* 8 Tabellen, Badges, Reiter 16 Anmeldeseiten
* 17 Kunden-App (body.area-app)
* 18 Schmale Schirme
* 19 Bewegung, Druck, [hidden]
*
* Keine Webfonts für die Oberfläche (Systemschriften). Die Buchschriften in
* fonts.css werden nur von der Buch-Vorschau benutzt.
*/
/* ========================================================================
1 Farben und Maße
======================================================================== */
:root {
--bg: #f5f6f8;
--surface: #ffffff;
--surface-2: #fafbfc;
--border: #e2e5ea;
--border-strong: #cfd4db;
/* Eingabefelder bekommen einen etwas kräftigeren Rand als Karten: ein
weißes Feld auf einer weißen Karte war mit #e2e5ea kaum zu erkennen. */
--field-border: #c9ced6;
--text: #1c2024;
/* Eine Spur dunkler als PinStudio (#6b7480): auf dem grauen Seitengrund
kam der alte Wert nur auf 4,38 : 1 – zu wenig für AA. #646d79 hält
4,5 : 1 auf allen Flächen ein, auch auf --accent-soft. */
--muted: #646d79;
--placeholder: #6e7782;
--accent: #6a48d7;
--accent-dark: #5a3cbb;
--accent-soft: #f0ecfd;
--accent-line: #c9bdf3;
--accent-ring: rgba(106, 72, 215, .18);
--ok: #157347;
--ok-bg: #e7f4ed;
--ok-line: #b9dfc9;
/* Warnfarbe dunkler als die Vorgabe #9a6700 (4,4 : 1 auf --warn-bg) –
Schrift in gelben Kästen muss genauso lesbar sein wie in den anderen. */
--warn: #8a5a00;
--warn-bg: #fdf3d8;
--warn-line: #f1dfa6;
--err: #b42318;
--err-bg: #fdeceb;
--err-line: #f3c2be;
--info: #1e4fa3;
--info-bg: #e8effb;
--info-line: #c3d4f2;
--radius: 10px;
--radius-sm: 8px;
--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);
--focus: var(--info);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--sidebar-w: 232px;
--tap: 40px;
}
/* ========================================================================
2 Grundlagen
======================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font: 15px/1.5 var(--font);
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
ul, ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
hr, .divider { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
small, .small { font-size: .83rem; }
strong, b { font-weight: 600; }
code, kbd, .mono { font-family: var(--mono); font-size: .82rem; }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .3rem; }
img, video, canvas, iframe, svg { max-width: 100%; }
img { height: auto; }
/* Icons aus Kdp\Support\Icons: nur Linien, Farbe vom Text. */
.icon {
display: inline-block;
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
vertical-align: -.2em;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
/*
* Sichtbarer Fokus für alles, was man mit der Tastatur erreicht.
* :focus-visible statt :focus – sonst zeigt jeder Mausklick einen Rahmen,
* und dann wird er erfahrungsgemäß wieder „wegdesignt“.
*/
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible,
input[type=range]:focus-visible,
input[type=file]:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* Nur für Bildschirmleser – z. B. Beschriftungen von Icon-Knöpfen. */
.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;
}
/* Erster Tab-Halt jeder Seite: springt am Menü vorbei direkt zum Inhalt. */
.skip-link {
position: absolute;
top: .5rem;
left: .5rem;
z-index: 100;
padding: .55rem .9rem;
border-radius: var(--radius-sm);
background: var(--text);
color: #fff;
font-weight: 600;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; text-decoration: none; }
/* ========================================================================
3 Grundgerüst: Seitenleiste, Hauptbereich, Kopfzeile
======================================================================== */
.shell { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex: 0 0 var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border);
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.brand {
display: flex;
align-items: center;
gap: .55rem;
min-width: 0;
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand-logo { flex: 0 0 auto; width: 28px; height: 28px; display: block; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .65rem;
border-radius: 8px;
color: var(--text);
font-size: .92rem;
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* Erweiterung 4 [4]: Unterpunkt (z. B. „Meine Bildstile“ direkt unter „Figuren“) – auf Michaels Wunsch
genauso links ausgerichtet wie alle anderen Punkte; die Klasse bleibt als Haken für später. */
.nav-item svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-group {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
font-weight: 700;
margin: .75rem .65rem .15rem;
padding-top: .6rem;
border-top: 1px solid var(--border);
}
.sidebar-cta { width: 100%; }
.sidebar-foot {
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: .75rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.sidebar-foot form { margin: 0; }
/* „Abmelden“ bündig mit dem Namen darüber (der Geisterknopf hat Innenabstand). */
.sidebar-foot form .btn-ghost { margin-left: -.6rem; }
/* Name + Rolle als Link aufs eigene Profil. */
.user-link {
display: flex;
flex-direction: column;
min-width: 0;
padding: .35rem .5rem;
margin: 0 -.5rem;
border-radius: 8px;
color: var(--text);
font-size: .9rem;
font-weight: 600;
line-height: 1.3;
}
.user-link:hover { background: var(--surface-2); text-decoration: none; }
.user-link.is-active { background: var(--accent-soft); color: var(--accent); }
.user-link .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-link .user-role { font-size: .78rem; font-weight: 400; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .75rem; }
.legal-links a { color: var(--muted); }
.main { flex: 1; min-width: 0; padding: 1.25rem 1.75rem 3rem; }
/* Ziel des „Zum Inhalt“-Links; der Rahmen um die ganze Fläche hilft dort niemandem. */
.main:focus { outline: none; }
.topbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; min-height: 2.5rem; }
.topbar-title { flex: 1 1 auto; min-width: 0; }
.topbar h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.topbar .topbar-credits { display: none; }
/* Untertitel steht unter der Kopfzeile, nicht in ihr – auf dem Handy klebt
die Kopfzeile, und dort soll sie einzeilig bleiben. */
.page-subtitle { margin: -.6rem 0 1.25rem; color: var(--muted); max-width: 72ch; }
.content { min-width: 0; }
/* Menüknopf, Schließkreuz und Schleier gehören zur Schublade (Abschnitt 18). */
.nav-toggle, .nav-close, .nav-backdrop { display: none; }
/* ========================================================================
4 Karten und Raster
======================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.1rem;
margin-bottom: 1rem;
min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.card-head h2, .card-head h3 { margin: 0; }
.card-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5rem;
flex-wrap: wrap;
margin: 1rem -1.1rem -1.1rem;
padding: .8rem 1.1rem;
border-top: 1px solid var(--border);
background: var(--surface-2);
border-radius: 0 0 var(--radius) var(--radius);
}
.card > :last-child:not(.card-foot) { margin-bottom: 0; }
/*
* `minmax(0, 1fr)` und `min()`: eine Rasterspalte ist sonst mindestens so
* breit wie ihr breitester unteilbarer Inhalt (eine lange Auswahlliste, eine
* Adresse) – auf dem Handy schob genau das in PinStudio die Seite aus dem Bild.
*/
.grid { display: grid; gap: 1rem; }
.grid > * { min-width: 0; }
/* Im Raster sorgt der Spaltenabstand für Luft – der Kartenabstand unten käme doppelt dazu. */
.grid > .card, .grid > .stat { margin-bottom: 0; }
.grid { margin-bottom: 1rem; }
.card > .grid:last-child, .wizard-section.grid { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.grid-form { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; margin-bottom: 1rem; }
.grid-form > * { min-width: 0; }
.grid-form > .card { margin-bottom: 0; }
@media (max-width: 1100px) { .grid-form { grid-template-columns: minmax(0, 1fr); } }
/* Liste + Vorschau nebeneinander (Seiteneditor, Figuren, Ratgeber). */
.split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
.split > * { min-width: 0; }
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Die Vorschau bleibt beim Blättern durch eine lange Liste stehen. */
.split-sticky > :last-child { position: sticky; top: 1rem; }
@media (max-width: 900px) {
.split, .split-even { grid-template-columns: minmax(0, 1fr); }
.split-sticky > :last-child { position: static; }
}
.stack { display: flex; flex-direction: column; gap: .5rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1rem; }
/* Kennzahlen (Teil 1 §5.1) – einzeln oder im .kpi-grid. */
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .9rem 1rem;
min-width: 0;
}
.stat-value { font-size: 1.6rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .82rem; color: var(--muted); }
.stat-change { display: inline-block; margin-left: .35rem; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-change.up { color: var(--ok); }
.stat-change.down { color: var(--err); }
.stat-sub { margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.kpi-grid {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
margin-bottom: 1rem;
}
.kpi-grid > * { min-width: 0; }
/* Schlüssel-Wert-Liste für Detailseiten. */
.kv { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0; }
.kv dt { color: var(--muted); font-size: .86rem; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Einfache Zeilenliste. */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); min-width: 0; }
.list > li:last-child { border-bottom: 0; }
/* ========================================================================
5 Formulare
======================================================================== */
form { margin: 0; }
label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .3rem; }
.field { margin-bottom: .9rem; }
.hint { font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: .25rem; }
.field-error { font-size: .82rem; color: var(--err); font-weight: 600; margin-top: .25rem; }
.required::after { content: ' *'; color: var(--err); }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=date], input[type=datetime-local], input[type=time], input[type=month],
input[type=number], select, textarea {
width: 100%;
padding: .5rem .65rem;
border: 1px solid var(--field-border);
border-radius: 8px;
font: inherit;
color: inherit;
background: #fff;
min-width: 0;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 2px solid #c9d8f5; outline-offset: 0; border-color: #8fb0e8; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--surface-2); }
.is-invalid, [aria-invalid="true"] { border-color: var(--err) !important; }
/* Erweiterung 4 [22]: Feld zur Fehlermeldung (KDP.markField) – rot umrandet, kurz pulsierend. */
.has-error { border-radius: 14px; box-shadow: 0 0 0 2px var(--err), 0 0 0 7px var(--err-bg); animation: kdp-error-pulse 1.2s ease-out 1; }
fieldset.has-error, .field.has-error, .plan-field.has-error { padding-left: .6rem; padding-right: .6rem; }
@keyframes kdp-error-pulse { 0% { box-shadow: 0 0 0 2px var(--err), 0 0 0 14px rgba(220, 38, 38, .25); } 100% { box-shadow: 0 0 0 2px var(--err), 0 0 0 7px var(--err-bg); } }
@media (prefers-reduced-motion: reduce) { .has-error { animation: none; } }
input[type=checkbox], input[type=radio], input[type=range], progress { accent-color: var(--accent); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; min-width: 0; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .92rem; margin-bottom: 0; cursor: pointer; }
.check input { width: 1rem; height: 1rem; margin: 0; flex: 0 0 auto; }
/* Mehrzeiliger Text neben dem Haken: Haken oben ausrichten. */
.check.is-top { align-items: flex-start; }
.check.is-top input { margin-top: .2rem; }
/* Eingabe mit Einheit oder Knopf daneben („7,99 €“, „Suchen“). */
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > input, .input-group > select,
.area-app .input-group > input, .area-app .input-group > select { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-addon, .input-group > .btn {
flex: 0 0 auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}
.input-addon {
display: inline-flex;
align-items: center;
padding: 0 .7rem;
border: 1px solid var(--field-border);
border-radius: 8px;
background: var(--surface-2);
color: var(--muted);
font-size: .9rem;
}
/* Zeichenzähler unter Textfeldern (Beschreibung, Keywords). */
.counter { display: block; text-align: right; font-size: .78rem; color: var(--muted); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.counter.is-over { color: var(--err); font-weight: 700; }
/* Schalter (an/aus) – echtes Ankreuzfeld, nur anders gezeichnet. */
.switch { position: relative; display: inline-flex; align-items: center; gap: .65rem; margin: 0; font-size: .92rem; font-weight: 500; cursor: pointer; }
.switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track {
position: relative;
flex: 0 0 auto;
width: 2.6rem;
height: 1.5rem;
border-radius: 999px;
background: #8b93a0;
transition: background-color .15s ease;
}
.switch-track::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: calc(1.5rem - 6px);
height: calc(1.5rem - 6px);
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
transition: transform .15s ease;
}
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch > input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch > input:disabled + .switch-track { opacity: .5; }
fieldset { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .5rem; font-weight: 600; font-size: .95rem; }
/* ========================================================================
6 Knöpfe
======================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: .5rem .9rem;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font: inherit;
font-weight: 600;
font-size: .9rem;
line-height: 1.25;
text-align: center;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #10603a; border-color: #10603a; color: #fff; }
.btn-danger { color: var(--err); border-color: #f2c4c0; }
.btn-danger:hover { background: var(--err-bg); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-small { padding: .3rem .6rem; font-size: .82rem; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .45rem; aspect-ratio: 1; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btn-row.is-end { justify-content: flex-end; }
/* Preis im Knopf: „Inhalt erstellen · 10 Credits“ – der Preis tritt zurück. */
.btn-cost { font-weight: 500; opacity: .85; white-space: nowrap; }
.btn-cost::before { content: '·'; margin-right: .4rem; }
/* Knopf, der gerade arbeitet (KDP.busy, form[data-busy]). */
.btn.is-busy { cursor: progress; opacity: .8; }
/* Als Link gestalteter Knopf – für Aktionen in Formularen („Zurück“). */
.linklike {
background: none;
border: 0;
padding: 0;
margin: 0;
color: var(--info);
font: inherit;
cursor: pointer;
text-decoration: none;
}
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: var(--err); }
/* Korrektur Runde 9 (Fund 5): gesperrter Textknopf (z. B. „Duplizieren“ im Cover-Studio der Kennenlern-Phase). */
.linklike:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.back-link {
display: inline-flex;
align-items: center;
gap: .3rem;
min-height: var(--tap);
color: var(--muted);
font-weight: 600;
}
.back-link:hover { color: var(--text); }
.inline-form { display: inline; }
.spinner {
display: inline-block;
flex: 0 0 auto;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -.15em;
animation: kdp-spin .65s linear infinite;
}
@keyframes kdp-spin { to { transform: rotate(360deg); } }
/* Ladezustand großer Karten-Knöpfe (KDP.busy, z. B. Buchart-Kacheln „Neues Buch starten“): Der Inhalt bleibt
stehen, darüber ein heller Schleier mit großem Kreisel und Text in der Mitte – statt eines kleinen Kreisels
oben links in einer sonst leeren Karte. */
.is-busy-card { position: relative; cursor: progress; }
.busy-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 1rem;
border-radius: inherit;
background: rgba(255, 255, 255, .93);
color: var(--accent);
font-weight: 600;
font-size: .95rem;
line-height: 1.3;
text-align: center;
animation: kdp-busy-in .18s ease-out;
}
.busy-overlay .spinner { width: 2.4rem; height: 2.4rem; border-width: 3px; }
@keyframes kdp-busy-in { from { opacity: 0; } to { opacity: 1; } }
/* ========================================================================
7 Meldungen: Flash, Hinweis, Banner, Toast
======================================================================== */
/* Server-Meldungen schweben oben rechts (Teil 1 §4.1), knapp unter der
Kopfzeile – so bleiben deren Knöpfe (Seitenaktionen) frei. Erfolg
verschwindet nach 6 s (app.js), Fehler bleiben bis zum Schließen. */
.flash-stack {
position: fixed;
top: 4.5rem;
right: 1.25rem;
z-index: 35;
display: flex;
flex-direction: column;
gap: .5rem;
width: min(420px, calc(100vw - 2rem));
}
.flash {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: .65rem .85rem;
border-radius: 8px;
border: 1px solid transparent;
font-size: .9rem;
box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
animation: kdp-drop-in .22s ease-out;
transition: opacity .25s ease, transform .25s ease;
}
.flash-text { min-width: 0; overflow-wrap: anywhere; }
.flash-success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.flash-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.flash-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.flash-close {
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
margin: -.2rem -.35rem -.2rem 0;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
color: inherit;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
opacity: .7;
}
.flash-close:hover { opacity: 1; background: rgba(0, 0, 0, .05); }
.flash.is-leaving, .toast.is-leaving { opacity: 0; transform: translateY(-6px); }
@keyframes kdp-drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Hinweis im Seiteninhalt: dunkle Schrift auf getönter Fläche, Farbe nur
am Rand und am Symbol – so bleibt auch ein langer Text gut lesbar. */
.notice {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .8rem 1rem;
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
font-size: .92rem;
line-height: 1.5;
}
.notice > .icon, .notice > svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--muted); }
.notice-body { flex: 1 1 auto; min-width: 0; }
.notice-title { display: block; font-weight: 700; margin-bottom: .15rem; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice-info { background: var(--info-bg); border-color: var(--info-line); }
.notice-info > .icon, .notice-info > svg { color: var(--info); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice-ok > .icon, .notice-ok > svg { color: var(--ok); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice-warn > .icon, .notice-warn > svg { color: var(--warn); }
.notice-err { background: var(--err-bg); border-color: var(--err-line); }
.notice-err > .icon, .notice-err > svg { color: var(--err); }
/* Banner über dem Inhalt – z. B. „Bitte bestätige deine E-Mail-Adresse“. */
.banner {
display: flex;
align-items: center;
gap: .6rem 1rem;
flex-wrap: wrap;
padding: .75rem 1rem;
margin-bottom: 1.25rem;
border: 1px solid var(--warn-line);
border-radius: var(--radius);
background: var(--warn-bg);
color: #4d3800;
font-size: .92rem;
}
.banner > .icon, .banner > svg { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; align-self: flex-start; margin-top: .1rem; color: var(--warn); }
.banner-text { flex: 1 1 0; min-width: 12rem; }
.banner-text strong { display: block; }
.banner form { margin: 0; }
.banner .btn { background: #fff; }
.banner-info { background: var(--info-bg); border-color: var(--info-line); color: #12305f; }
.banner-info > .icon, .banner-info > svg { color: var(--info); }
/* Kurze Rückmeldungen aus JavaScript (KDP.toast). */
.toast-stack {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 90;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .5rem;
width: min(400px, calc(100vw - 2rem));
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: .6rem;
width: 100%;
padding: .7rem .75rem .7rem .85rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-left: 4px solid var(--info);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
font-size: .92rem;
animation: kdp-rise-in .2s ease-out;
transition: opacity .25s ease, transform .25s ease;
}
.toast::before {
content: 'i';
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--info-bg);
color: var(--info);
font-size: .78rem;
font-weight: 800;
}
.toast-ok { border-left-color: var(--ok); }
.toast-ok::before { content: '✓'; background: var(--ok-bg); color: var(--ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-warn::before { content: '!'; background: var(--warn-bg); color: var(--warn); }
.toast-err { border-left-color: var(--err); }
.toast-err::before { content: '!'; background: var(--err-bg); color: var(--err); }
.toast-text { flex: 1 1 auto; min-width: 0; padding-top: .05rem; overflow-wrap: anywhere; }
.toast-close {
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
color: var(--muted);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
}
.toast-close:hover { background: var(--surface-2); color: var(--text); }
@keyframes kdp-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ========================================================================
8 Tabellen, Badges, Reiter
======================================================================== */
/* Jede Tabelle steckt in .table-wrap: lieber waagerecht scrollen als die
ganze Seite auf dem Handy verbreitern. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card > .table-wrap:first-child { margin-top: -.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap, td.nowrap, th.nowrap { white-space: nowrap; }
td.actions, th.actions { text-align: right; white-space: nowrap; }
td.actions .btn-row { justify-content: flex-end; flex-wrap: nowrap; }
.table-compact th, .table-compact td { padding: .4rem .5rem; }
.badge {
display: inline-block;
padding: .15rem .5rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
vertical-align: middle;
background: #eceef1;
color: #4a525c;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.info { background: var(--info-bg); color: var(--info); }
/* „läuft“ – Violett ist hier die Akzentfarbe selbst, gedämpft. */
.badge.violet { background: var(--accent-soft); color: var(--accent-dark); }
.badge.beta { background: var(--accent-soft); color: var(--accent-dark); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.badge.gray { background: #eceef1; color: #4a525c; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: #9aa1ab; vertical-align: middle; }
.dot.ok { background: var(--ok); }
.dot.warn { background: #d69e00; }
.dot.err { background: var(--err); }
/* Reiter als Pillen; aktiv dunkel gefüllt (Teil 1 §5.1). */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a {
padding: .45rem .9rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: .88rem;
font-weight: 500;
white-space: nowrap;
}
.tabs a:hover { background: var(--surface-2); text-decoration: none; }
.tabs a.is-active { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
/* ========================================================================
9 Seitenkopf, Leerzustand, Seitenzahlen
======================================================================== */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: .75rem 1rem;
flex-wrap: wrap;
margin: 0 0 1.25rem;
}
.page-head-text { flex: 1 1 18rem; min-width: 0; }
.page-head h2 { margin: 0; font-size: 1.25rem; }
.page-head-sub { margin: .25rem 0 0; color: var(--muted); max-width: 72ch; }
.page-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: .75rem;
border-radius: 50%;
background: #eef0f3;
color: var(--muted);
}
.empty-icon .icon, .empty-icon svg { width: 1.6rem; height: 1.6rem; }
.empty-title { margin: 0 0 .35rem; color: var(--text); font-size: 1.1rem; font-weight: 600; }
.empty-text { margin: 0 auto 1.1rem; max-width: 46ch; }
.empty .btn { margin-top: .1rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }
.page-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .25rem;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 .65rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: .88rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.page-link:hover { background: var(--surface-2); text-decoration: none; }
.page-link.is-active { background: var(--text); border-color: var(--text); color: #fff; }
.page-link.is-disabled { color: #8b93a0; background: var(--surface-2); pointer-events: none; }
.page-gap { padding: 0 .15rem; color: var(--muted); }
/* „Seite 5 von 12“ – nur auf dem Handy, dort ersetzt es die Zahlenreihe. */
.page-status { display: none; padding: 0 .5rem; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
/* ========================================================================
10 Assistent: Schrittleiste, Hauptfrage, Aktionsleiste
======================================================================== */
/*
* Schrittleiste (ARCHITEKTUR §16.3). Erwartetes Markup:
*
*
* -
* 1Idee
* - …
* - …
*
*
* Am PC mit Beschriftung und Verbindungslinien, am Handy nur Nummernkreise
* (waagerecht scrollbar), dort trägt nur der aktuelle Schritt seinen Namen.
* Erledigte Schritte zeigen ✓ statt der Zahl.
*/
.steps {
display: flex;
align-items: center;
gap: .5rem;
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
}
.step { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.step:last-child { flex: 0 0 auto; }
.step::after {
content: '';
flex: 1 1 1.5rem;
min-width: .75rem;
height: 2px;
border-radius: 2px;
background: var(--border);
}
.step:last-child::after { display: none; }
.step.is-done::after { background: var(--accent-line); }
.step-link {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .25rem .6rem .25rem .25rem;
border-radius: 999px;
color: var(--text);
white-space: nowrap;
}
a.step-link:hover { background: var(--accent-soft); text-decoration: none; }
.step-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 2px solid var(--border-strong);
background: var(--surface);
color: var(--muted);
font-size: .9rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.step-label { font-size: .92rem; font-weight: 600; color: var(--muted); }
.step.is-done .step-num { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent); font-size: 0; }
.step.is-done .step-num::before { content: '✓'; font-size: .95rem; }
.step.is-done .step-label { color: var(--text); }
.step.is-current .step-num { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-ring); }
.step.is-current .step-label { color: var(--text); font-weight: 700; }
.step.is-locked .step-link { cursor: not-allowed; }
.step.is-locked .step-num { border-style: dashed; color: #8b93a0; background: var(--surface-2); }
.step.is-locked .step-label { color: #7d8591; font-weight: 500; }
/* Ein Schritt = eine Hauptfrage, darunter ein grauer Satz (§16.3). */
.wizard { width: 100%; max-width: 880px; }
.wizard.is-wide, .wizard-wide { max-width: none; }
.wizard-q { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.wizard-sub { margin: 0 0 1.5rem; color: var(--muted); font-size: 1.02rem; max-width: 62ch; }
.wizard-section { margin-top: 2rem; }
.wizard-section > h3 { font-size: 1.05rem; margin-bottom: .75rem; }
/*
* Aktionsleiste am Ende eines Schritts: „Zurück“ als Textlink links, großer
* Hauptknopf rechts. Auf dem Handy klebt sie unten (Abschnitt 18) – als
* position:sticky statt fixed, damit sie nie Inhalt überdeckt.
* Direkt ins Formular bzw. in .main setzen, nicht in eine Karte.
*/
.sticky-actions {
display: flex;
align-items: center;
gap: .75rem 1rem;
flex-wrap: wrap;
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.sticky-actions .btn-primary, .sticky-actions .is-main { margin-left: auto; }
.sticky-actions .sticky-note { font-size: .85rem; color: var(--muted); }
/* ========================================================================
11 Auswahlkarten, Chips, Umschalter
======================================================================== */
/*
* Große Auswahlkarte (Buchtyp, Zielgruppe, Format …):
*
*
*
* Das Radio bleibt sichtbar (oben rechts): so hat die Tastatur einen
* echten Fokuspunkt, und die Wahl funktioniert ohne JavaScript.
*/
.choice-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.choice-grid > * { min-width: 0; }
.choice-card {
position: relative;
display: flex;
flex-direction: column;
gap: .65rem;
margin: 0;
padding: 1.1rem 2.75rem 1.1rem 1.1rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: inherit;
font-weight: 400;
text-align: left;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
a.choice-card:hover { text-decoration: none; }
.choice-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.choice-card > input[type=radio], .choice-card > input[type=checkbox] {
position: absolute;
top: 1rem;
right: 1rem;
width: 1.2rem;
height: 1.2rem;
margin: 0;
cursor: pointer;
}
/* :has() in eigenen Regeln: Ein Browser ohne :has() verwirft sonst die ganze
Regel – samt der Klasse .is-selected, die app.js als Rückfall setzt. */
.choice-card.is-selected { border-color: var(--accent); background: #fdfcff; box-shadow: 0 0 0 3px var(--accent-ring); }
.choice-card:has(> input:checked) { border-color: var(--accent); background: #fdfcff; box-shadow: 0 0 0 3px var(--accent-ring); }
.choice-card.is-locked { cursor: not-allowed; background: var(--surface-2); border-style: dashed; box-shadow: none; }
.choice-card.is-locked .choice-media, .choice-card.is-locked .choice-title, .choice-card.is-locked .choice-text { opacity: .6; }
.choice-media {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 3rem;
height: 3rem;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
overflow: hidden;
}
.choice-media .icon, .choice-media svg { width: 1.6rem; height: 1.6rem; }
.choice-media.is-image { width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--surface-2); }
.choice-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.choice-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.choice-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.choice-text { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.choice-meta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .86rem; font-weight: 600; color: var(--text); }
.choice-meta .icon { color: var(--accent); }
.choice-lock { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--warn); }
/* Kleine Variante: Symbol links, Text rechts (z. B. Zielgruppe, Papier). */
.choice-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: .65rem; }
.choice-grid.is-compact .choice-card { flex-direction: row; align-items: center; gap: .75rem; padding: .8rem 2.5rem .8rem .85rem; }
.choice-grid.is-compact .choice-card > input { top: 50%; transform: translateY(-50%); right: .85rem; }
.choice-grid.is-compact .choice-media { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
.choice-grid.is-compact .choice-title { font-size: .97rem; }
.choice-grid.is-compact .choice-text { font-size: .85rem; }
/* Chips: Vorschläge zum Antippen oder Mehrfachauswahl mit aria-pressed. */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
display: inline-flex;
align-items: center;
gap: .35rem;
min-height: 2.25rem;
margin: 0;
padding: .35rem .85rem;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .88rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.chip:hover { background: var(--surface-2); border-color: #b4bac3; text-decoration: none; }
.chip[aria-pressed="true"], .chip.is-active, .chip.is-selected { background: var(--text); border-color: var(--text); color: #fff; }
.chip:has(> input:checked) { background: var(--text); border-color: var(--text); color: #fff; }
.chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip .icon { width: 1rem; height: 1rem; }
.chip-count { font-weight: 500; opacity: .78; }
/* Umschalter mit zwei, drei Möglichkeiten („Monatlich | Jährlich“). */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: #eceef1; }
.segmented > button, .segmented > a, .segmented > label {
position: relative;
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0;
padding: .4rem .95rem;
border: 0;
border-radius: 999px;
background: none;
color: #4a525c;
font: inherit;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.segmented > a:hover { text-decoration: none; color: var(--text); }
.segmented > [aria-pressed="true"], .segmented > .is-active, .segmented > label.is-selected { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .16); }
.segmented > label:has(> input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .16); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmented > label:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented .badge { font-size: .68rem; }
/* ========================================================================
12 Fortschritt, Ampel, Credits, Pakete
======================================================================== */
/*
* Fortschritt eines Auftrags:
*
* Ich suche Wörter zum Thema …
* Die Streifen laufen, damit man auch bei langsamen Schritten sieht, dass
* etwas passiert. .is-indeterminate = „weiß noch nicht, wie lange“.
*/
.progress { position: relative; height: .75rem; border-radius: 999px; background: #e9e6f3; overflow: hidden; }
.progress-bar {
height: 100%;
width: 0;
min-width: .75rem;
border-radius: inherit;
background-color: var(--accent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
transition: width .6s ease;
animation: kdp-stripes 1s linear infinite;
}
.progress.is-indeterminate .progress-bar { width: 35%; animation: kdp-stripes 1s linear infinite, kdp-sweep 1.6s ease-in-out infinite; }
.progress.is-done .progress-bar { background-color: var(--ok); background-image: none; animation: none; }
.progress.is-error .progress-bar { background-color: var(--err); background-image: none; animation: none; }
.progress-label {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin: .55rem 0 0;
color: var(--muted);
font-size: .92rem;
}
.progress-label strong, .progress-percent { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes kdp-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
@keyframes kdp-sweep { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
/*
* Nischen-Ampel (§16.4): Gehäuse mit drei Lampen, die aktive leuchtet.
*
*
Gute Chancen Ein Satz Begründung.
*
*
Titel
*
Mein Rätselbuch
*
*
Kurze Erklärung.
*
*
*
* Seitenverhältnis über --thumb-ratio (Vorgabe 8,5 × 11 Zoll).
*/
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .75rem; }
.thumb {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--muted);
font: inherit;
font-size: .75rem;
text-align: center;
cursor: pointer;
}
a.thumb:hover { text-decoration: none; }
.thumb-page {
position: relative;
display: block;
aspect-ratio: var(--thumb-ratio, 17 / 22);
overflow: hidden;
border: 1px solid var(--border);
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
transition: border-color .15s ease, box-shadow .15s ease;
}
.thumb-page > svg, .thumb-page > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb:hover .thumb-page { border-color: var(--accent-line); }
.thumb.is-active .thumb-page, .thumb.is-selected .thumb-page { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.thumb.is-active .thumb-label, .thumb.is-selected .thumb-label { color: var(--accent); font-weight: 700; }
.thumb:focus-visible { outline: none; }
.thumb:focus-visible .thumb-page { outline: 2px solid var(--focus); outline-offset: 3px; }
.thumb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
* Papierblatt mit Inline-SVG (Vorschau = Druck, ARCHITEKTUR §12). Das SVG
* füllt die Breite, die Höhe ergibt sich aus seiner viewBox. --page-ratio
* (Breite/Höhe) begrenzt die Breite so, dass die ganze Seite auf den
* Bildschirm passt.
*/
.preview-stage {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 0;
padding: 1.5rem;
border-radius: var(--radius);
background: #e9ebf0;
min-width: 0;
}
.preview-page {
position: relative;
width: 100%;
max-width: min(100%, calc((100vh - 14rem) * var(--page-ratio, .7727)));
margin: 0 auto;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 10px 30px rgba(16, 24, 40, .16);
overflow: hidden;
}
.preview-page > svg, .preview-page > img { display: block; width: 100%; height: auto; }
/* Keine künstlich verfetteten oder schräggestellten Schriften – im PDF gibt
es die auch nicht. */
.preview-page svg text { font-synthesis: none; }
.preview-page:empty { aspect-ratio: var(--page-ratio, .7727); }
.preview-page.is-loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(240, 236, 253, .8) 50%, rgba(255, 255, 255, 0) 70%);
background-size: 200% 100%;
animation: kdp-shimmer 1.2s linear infinite;
}
@keyframes kdp-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* Doppelseite (linke + rechte Seite) am PC. */
.preview-spread { display: flex; justify-content: center; width: 100%; max-width: min(100%, calc((100vh - 14rem) * var(--page-ratio, .7727) * 2)); margin: 0 auto; }
.preview-spread > .preview-page { flex: 1 1 0; max-width: none; margin: 0; border-radius: 0; }
.preview-spread > .preview-page + .preview-page { box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 10px 30px rgba(16, 24, 40, .16), inset 6px 0 10px -8px rgba(16, 24, 40, .35); }
.preview-caption { margin-top: .6rem; text-align: center; color: var(--muted); font-size: .85rem; }
/*
* Farbpaletten-Kacheln (Cover):
*
*/
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch {
position: relative;
display: inline-flex;
margin: 0;
padding: 3px;
border: 2px solid transparent;
border-radius: 12px;
background: var(--surface);
box-shadow: 0 0 0 1px var(--border);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.swatch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.swatch-colors { display: flex; width: 3.25rem; height: 2.25rem; overflow: hidden; border-radius: 8px; }
.swatch-colors > span { flex: 1 1 0; }
.swatch-color { display: block; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--c, #ccc); }
.swatch:hover { box-shadow: 0 0 0 1px var(--accent-line); }
.swatch.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.swatch:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.swatch:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Datei hochladen: Klick oder Hineinziehen. */
.dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
padding: 1.75rem 1rem;
border: 2px dashed var(--border-strong);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--muted);
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dropzone > .icon, .dropzone > svg { width: 2rem; height: 2rem; color: var(--accent); }
.dropzone strong { color: var(--text); }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.dropzone input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Figuren (Bilderbuch). */
.avatar-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.avatar-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.avatar-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.avatar-card:has(> input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.avatar-card > input[type=checkbox], .avatar-card > input[type=radio] { position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 1.25rem; height: 1.25rem; margin: 0; }
/* Figuren-Referenzbilder sind Hochformat 3:4 (Erweiterung 2 [25]): Fläche im selben Format und
„contain“ – so ist die ganze Figur zu sehen, mit Füßen (vorher quadratisch und „cover“ = Füße ab). */
.avatar-img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
background: linear-gradient(135deg, var(--accent-soft), #fbfaff);
color: var(--accent-line);
}
.avatar-img > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.avatar-img > .icon, .avatar-img > svg { width: 2.5rem; height: 2.5rem; }
.avatar-body { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .85rem; min-width: 0; }
.avatar-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-meta { color: var(--muted); font-size: .85rem; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding: 0 .85rem .85rem; }
/* ========================================================================
15 Hilfe-Symbol, Dialog, Klappbereiche
======================================================================== */
/*
* ⓘ mit Erklärtext (views/shared/partials/help-tip.php).
* Zeigen: Maus darüber (nur Geräte mit Maus), Tastaturfokus, Antippen
* (.is-open, app.js). Der Text bleibt im DOM und hängt über
* aria-describedby am Knopf – Bildschirmleser lesen ihn beim Fokus vor.
*/
.help-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: .25rem; font-weight: 400; }
.help-tip-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: 1.5px solid currentColor;
border-radius: 50%;
background: var(--surface);
color: var(--info);
font: italic 700 .75rem/1 Georgia, "Times New Roman", serif;
cursor: pointer;
}
/* Unsichtbar vergrößerte Tippfläche: 20 px sieht ruhig aus, 40 px trifft man. */
.help-tip-btn::after { content: ''; position: absolute; inset: -10px; }
.help-tip-btn:hover, .help-tip.is-open .help-tip-btn { background: var(--info); color: #fff; border-color: var(--info); }
.help-tip-pop {
position: absolute;
top: calc(100% + 10px);
left: 50%;
z-index: 60;
width: max-content;
max-width: min(300px, calc(100vw - 2rem));
padding: .7rem .85rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
color: var(--text);
font-size: .86rem;
font-weight: 400;
font-style: normal;
line-height: 1.5;
text-align: left;
text-transform: none;
letter-spacing: normal;
white-space: normal;
transform: translateX(calc(-50% + var(--shift, 0px)));
visibility: hidden;
opacity: 0;
transition: opacity .12s ease, visibility 0s linear .15s;
}
/* Brücke über den Abstand – sonst verschwindet der Text auf dem Weg dorthin. */
.help-tip-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.help-tip-pop::after {
content: '';
position: absolute;
top: -6px;
left: calc(50% - var(--shift, 0px));
width: 10px;
height: 10px;
margin-left: -5px;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
background: var(--surface);
transform: rotate(45deg);
}
.help-tip.is-above .help-tip-pop { top: auto; bottom: calc(100% + 10px); }
.help-tip.is-above .help-tip-pop::before { top: auto; bottom: -12px; }
.help-tip.is-above .help-tip-pop::after { top: auto; bottom: -6px; transform: rotate(225deg); }
.help-tip-pop a { font-weight: 600; }
.help-tip-more { display: block; margin-top: .4rem; }
/* Erweiterung 8 [29]: Absätze im Erklärtext (help-tip.php $lines), z. B. „So zählt Amazon …“ und die Aufschlüsselung. */
.help-tip-line { display: block; }
.help-tip-pop > .help-tip-line:not(:first-child), .help-tip-line + .help-tip-line { margin-top: .45rem; }
.help-tip-line[hidden] { display: none; }
.help-tip.is-open .help-tip-pop,
.help-tip-btn:focus-visible + .help-tip-pop,
.help-tip-pop:focus-within {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
@media (hover: hover) {
.help-tip:hover .help-tip-pop { visibility: visible; opacity: 1; transition-delay: 0s; }
}
/* Mit Escape zugeklappt, obwohl der Fokus noch auf dem Knopf steht. */
.help-tip.is-dismissed .help-tip-pop { visibility: hidden; opacity: 0; }
/*
* Dialog (KDP.modal.open/close):
*
*/
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .5); animation: kdp-fade-in .18s ease-out; }
.modal-box {
position: relative;
display: flex;
flex-direction: column;
width: min(560px, 100%);
max-height: calc(100vh - 3rem);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
animation: kdp-pop-in .18s ease-out;
}
.modal-sm .modal-box { width: min(420px, 100%); }
.modal-lg .modal-box { width: min(960px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin: -.4rem -.6rem 0 0;
padding: 0;
border: 0;
border-radius: 8px;
background: none;
color: var(--muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { flex: 1 1 auto; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.modal-body > :last-child { margin-bottom: 0; }
.modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5rem;
flex-wrap: wrap;
padding: .85rem 1.25rem;
border-top: 1px solid var(--border);
background: var(--surface-2);
border-radius: 0 0 var(--radius) var(--radius);
}
body.modal-open { overflow: hidden; }
/* Erweiterung 4 [4]: „Eigenen Bildstil erstellen“ unter Stil-Auswahlen und „Zurück zu …“ auf „Meine Bildstile“. */
.style-create, .style-return { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; }
.style-create { margin-top: .85rem; }
.style-create .hint, .style-return .hint { margin: 0; }
.style-return { margin: 0 0 1.1rem; }
/* Erweiterung 4 [1]: Rückfragen und Hinweise (KDP.ask / KDP.notice) statt der Browserfenster. */
.kdp-dialog { z-index: 90; }
.kdp-dialog .modal-box { width: min(440px, 100%); }
.kdp-dialog-body { padding: 1.35rem 1.4rem 1.1rem; }
.kdp-dialog-title { margin: 0 0 .55rem; font-size: 1.12rem; line-height: 1.3; }
.kdp-dialog-text { color: var(--text); font-size: .96rem; line-height: 1.5; }
.kdp-dialog-text p { margin: 0 0 .6rem; }
.kdp-dialog-text p:last-child { margin-bottom: 0; }
.kdp-dialog .modal-foot .btn { min-width: 6.5rem; justify-content: center; }
.btn-danger-solid { border-color: var(--err); background: var(--err); color: #fff; }
.btn-danger-solid:hover { border-color: #93180f; background: #93180f; color: #fff; }
@media (max-width: 520px) {
/* Am Handy: Knöpfe untereinander, der wichtige oben – daumengerecht. */
.kdp-dialog { align-items: flex-end; padding: .75rem; }
.kdp-dialog .modal-foot { flex-direction: column-reverse; align-items: stretch; }
.kdp-dialog .modal-foot .btn { width: 100%; min-height: 44px; }
}
@keyframes kdp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kdp-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kdp-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
/* Klappbereich (natives details/summary, optional data-remember). */
.panel { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel > summary {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem .9rem;
border-radius: var(--radius);
font-weight: 600;
font-size: .95rem;
list-style: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before {
content: '';
flex: 0 0 auto;
width: .5rem;
height: .5rem;
margin: 0 .2rem 0 .1rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
transition: transform .15s ease;
}
.panel[open] > summary::before { transform: rotate(45deg); }
.panel > summary:hover { background: var(--surface-2); }
.panel[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.panel-body { padding: .9rem; }
.panel-body > :last-child { margin-bottom: 0; }
/* Kleine Hilfsklassen. */
.muted { color: var(--muted); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-err { color: var(--err); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 68ch; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.ml-auto { margin-left: auto !important; }
.w-100 { width: 100%; }
.break { overflow-wrap: anywhere; }
/* ========================================================================
16 Anmeldeseiten (auth-layout.php)
======================================================================== */
/* Ein Hauch der Akzentfarbe hinter der Karte – Wiedererkennung ohne Fläche. */
.auth-body {
min-height: 100vh;
background:
radial-gradient(900px 480px at 50% -10%, rgba(106, 72, 215, .11), rgba(106, 72, 215, 0) 70%),
radial-gradient(700px 420px at 100% 110%, rgba(106, 72, 215, .06), rgba(106, 72, 215, 0) 70%),
var(--bg);
background-attachment: fixed;
}
.auth-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
min-height: 100vh;
min-height: 100dvh;
padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
.auth-box {
width: 100%;
max-width: 400px;
padding: 1.75rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 36px rgba(31, 22, 66, .09);
}
.auth-box.is-wide { max-width: 560px; }
.auth-brand {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
margin: 0 0 1.25rem;
color: var(--text);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -.01em;
}
.auth-brand img { width: 40px; height: 40px; display: block; }
.auth-title { margin: 0 0 .35rem; text-align: center; font-size: 1.35rem; font-weight: 700; }
.auth-sub { margin: 0 0 1.25rem; text-align: center; color: var(--muted); }
.auth-box .flash-stack { position: static; width: auto; margin: 0 0 1rem; }
.auth-box .flash { box-shadow: none; animation: none; }
.auth-alt { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; font-size: .9rem; color: var(--muted); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; font-size: .82rem; color: var(--muted); }
.auth-foot a { color: var(--muted); }
.auth-foot a:hover { color: var(--text); }
/*
* Erweiterung 10 [7]: Knopf „Mit Google anmelden“ nach Googles Markenrichtlinien – weißer Grund, Kante #747775,
* Schrift #1F1F1F, das „G“ in Originalfarben links. Eigene Farben statt der App-Variablen, damit der Knopf auch bei
* einer anderen Akzentfarbe so aussieht, wie Google es verlangt. 44 px hoch wie alle Tippflächen der App.
*/
.google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
width: 100%;
min-height: 44px;
padding: .55rem 1rem;
border: 1px solid #747775;
border-radius: 999px;
background: #fff;
color: #1f1f1f;
font: inherit;
font-size: .98rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
}
.google-btn:hover { background: #f8f9fa; color: #1f1f1f; text-decoration: none; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.google-btn:active { background: #eceff1; }
.google-btn:focus-visible { outline: 3px solid rgba(66, 133, 244, .45); outline-offset: 2px; }
.google-btn-logo { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.google-btn-text { min-width: 0; }
.auth-google-hint { margin: .45rem 0 0; text-align: center; }
/* Trenner „oder“ zwischen E-Mail-Formular und Google-Knopf. */
.auth-or { display: flex; align-items: center; gap: .75rem; margin: 1.15rem 0; color: var(--muted); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--border); }
/* Zwischenseite: welches Google-Konto gerade ein Konto bekommt. */
.google-identity {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1rem;
padding: .75rem .9rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg);
}
.google-identity-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.google-identity-label { font-size: .8rem; color: var(--muted); }
.google-identity-email { font-weight: 600; }
/* „Mein Konto“ → Passwort und Anmeldung. */
.account-google { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.account-google-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; margin-bottom: .35rem; }
.account-google-head h3 { margin: 0; font-size: 1rem; }
.account-google .google-btn { width: auto; display: inline-flex; padding: .55rem 1.4rem; }
.account-password-new .hint { margin-top: .5rem; }
/* ========================================================================
17 Kunden-App: dieselbe Grundlage, freundlicher (body.area-app)
======================================================================== */
/*
* Kundinnen arbeiten oft abends am Handy und ohne Technikerfahrung: größere
* Schrift (16 px), große Tippflächen (44 px), weichere Radien, mehr Luft und
* ein klar hervorgehobener Hauptknopf als Pille. Alles andere – Farben,
* Klassen, Aufbau – ist dasselbe wie im Admin.
*/
body.area-app {
font-size: 16px;
--bg: #f6f5fa;
--surface-2: #faf9fd;
--border: #e6e3ee;
--field-border: #bdb7cf;
--radius: 14px;
--radius-sm: 12px;
--shadow: 0 1px 2px rgba(31, 22, 66, .04), 0 2px 10px rgba(31, 22, 66, .05);
/* Erweiterung 8 [16]: 276 statt 256 px – der Markenname „Ein-Buch-Erstellen.de“ passt so
samt Logo in eine Zeile (gemessen 189 px Text, hier 202 px Platz, Luft für breitere
Systemschriften); bei 1280 px bleiben dem Hauptbereich gut 1000 px. Die Schublade am
Handy hat ihre eigene Breite (17rem). */
--sidebar-w: 276px;
--tap: 44px;
}
.area-app h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; }
.area-app h2 { font-size: 1.25rem; }
.area-app h3 { font-size: 1.06rem; }
.area-app .sidebar { padding: 1.5rem 1rem; gap: 1.1rem; background: #fcfbff; border-right-color: #ebe7f5; }
.area-app .brand { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.area-app .brand-logo { width: 32px; height: 32px; }
.area-app .sidebar nav { gap: 3px; }
.area-app .nav-item { gap: .75rem; padding: .65rem .8rem; border-radius: 12px; font-size: 1rem; }
.area-app .nav-item svg { width: 20px; height: 20px; }
.area-app .nav-item:hover { background: #f3f0fc; }
.area-app .nav-group { margin-left: .8rem; border-top-color: #ebe7f5; }
.area-app .sidebar-foot { border-top-color: #ebe7f5; gap: .6rem; }
.area-app .user-link { font-size: .95rem; }
.area-app .user-link:hover { background: #f3f0fc; }
.area-app .main { padding: 1.75rem 2.25rem 4rem; }
.area-app .topbar { margin-bottom: 1.25rem; }
.area-app .topbar h1 { font-size: 1.65rem; }
.area-app .page-subtitle { font-size: 1.02rem; margin-top: -.75rem; margin-bottom: 1.5rem; }
@media (min-width: 781px) {
/* Auf großen Schirmen nicht über die ganze Breite: lange Zeilen liest
niemand gern, und Karten verlieren sich. */
.area-app .topbar,
.area-app .page-subtitle,
.area-app .banner,
.area-app .main > .trial-band,
.area-app .content { max-width: 1180px; margin-left: auto; margin-right: auto; }
.area-app .page-subtitle { margin-top: -.75rem; }
}
.area-app .card { padding: 1.5rem; margin-bottom: 1.25rem; border-radius: 16px; }
.area-app .card-head { margin-bottom: 1rem; }
.area-app .card-foot { margin: 1.25rem -1.5rem -1.5rem; padding: 1rem 1.5rem; border-radius: 0 0 16px 16px; }
.area-app .stat { padding: 1.1rem 1.2rem; border-radius: 16px; }
.area-app label { font-size: .95rem; margin-bottom: .4rem; }
.area-app .hint { font-size: .88rem; margin-top: .35rem; }
.area-app .field { margin-bottom: 1.25rem; }
.area-app input[type=text], .area-app input[type=url], .area-app input[type=email], .area-app input[type=password],
.area-app input[type=search], .area-app input[type=tel], .area-app input[type=date], .area-app input[type=datetime-local],
.area-app input[type=time], .area-app input[type=month], .area-app input[type=number], .area-app select, .area-app textarea {
min-height: 48px;
padding: .7rem .9rem;
border-width: 1.5px;
border-radius: 12px;
font-size: 16px;
}
.area-app textarea { min-height: 120px; }
.area-app input:focus, .area-app select:focus, .area-app textarea:focus {
border-color: var(--accent);
outline: 3px solid var(--accent-ring);
outline-offset: 0;
}
.area-app .input-addon { border-width: 1.5px; border-radius: 12px; }
/* Feld + Einheit als ein Körper: innen keine Rundung (steht hier, weil die
App-Regel für Felder oben sonst gewinnt). */
.area-app .input-group > input, .area-app .input-group > select { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.area-app .input-group > .input-addon, .area-app .input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.area-app .check { font-size: 1rem; gap: .65rem; }
.area-app .check input { width: 1.2rem; height: 1.2rem; }
.area-app .btn { min-height: 44px; padding: .6rem 1.15rem; border-radius: 12px; font-size: .97rem; }
.area-app .btn-small { min-height: 36px; padding: .35rem .8rem; border-radius: 10px; font-size: .88rem; }
.area-app .btn-lg { min-height: 52px; padding: .8rem 1.75rem; font-size: 1.05rem; }
.area-app .btn-icon { padding: .5rem; }
.area-app .btn-primary {
padding-left: 1.4rem;
padding-right: 1.4rem;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(106, 72, 215, .22);
}
.area-app .btn-primary:hover { box-shadow: 0 6px 16px rgba(106, 72, 215, .28); }
.area-app .btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(106, 72, 215, .22); }
.area-app .btn-ok { border-radius: 999px; }
.area-app .btn-block { width: 100%; }
.area-app .flash { border-radius: 12px; font-size: .95rem; padding: .8rem 1rem; }
.area-app .notice { padding: 1rem 1.1rem; border-radius: 14px; font-size: .97rem; }
.area-app .banner { padding: .9rem 1.1rem; border-radius: 14px; font-size: .97rem; }
.area-app .toast { border-radius: 12px; font-size: .95rem; }
.area-app .badge { padding: .2rem .6rem; font-size: .8rem; }
.area-app .badge.beta { font-size: .7rem; }
.area-app table { font-size: .95rem; }
.area-app .tabs a { padding: .55rem 1.05rem; font-size: .95rem; }
.area-app .chip { min-height: 2.75rem; padding: .5rem 1rem; font-size: .95rem; }
.area-app .segmented > button, .area-app .segmented > a, .area-app .segmented > label { min-height: 40px; padding: .5rem 1.1rem; font-size: .95rem; }
.area-app .page-link { min-width: 2.75rem; height: 2.75rem; border-radius: 12px; font-size: .95rem; }
.area-app .empty { padding: 2.75rem 1rem; }
.area-app .empty-icon { width: 4rem; height: 4rem; background: var(--accent-soft); color: var(--accent); }
.area-app .empty-title { font-size: 1.2rem; }
.area-app .choice-card { padding: 1.3rem 3rem 1.3rem 1.3rem; border-radius: 16px; }
.area-app .choice-card > input[type=radio], .area-app .choice-card > input[type=checkbox] { top: 1.15rem; right: 1.15rem; width: 1.3rem; height: 1.3rem; }
.area-app .choice-grid.is-compact .choice-card { padding: .9rem 2.75rem .9rem 1rem; border-radius: 14px; }
.area-app .choice-grid.is-compact .choice-card > input { top: 50%; right: 1rem; transform: translateY(-50%); }
.area-app .copy-value { border-radius: 10px; }
.area-app .check-item { padding: 1rem 1.1rem; border-radius: 14px; }
.area-app .plan-card { padding: 1.6rem 1.4rem 1.4rem; border-radius: 18px; }
.area-app .avatar-card { border-radius: 16px; }
.area-app .modal-box { border-radius: 18px; }
.area-app .modal-foot { border-radius: 0 0 18px 18px; }
.area-app .panel { border-radius: 14px; }
.area-app .panel > summary { padding: .9rem 1.1rem; border-radius: 14px; font-size: 1rem; }
.area-app .panel[open] > summary { border-radius: 14px 14px 0 0; }
.area-app .panel-body { padding: 1.1rem; }
.area-app .help-tip-btn { width: 1.35rem; height: 1.35rem; font-size: .8rem; }
.area-app .help-tip-pop { font-size: .92rem; }
.area-app .dropzone { padding: 2.25rem 1.25rem; border-radius: 16px; }
.area-app .progress { height: .85rem; }
.area-app .sticky-actions .btn-primary { min-height: 52px; padding: .8rem 1.9rem; font-size: 1.05rem; }
.area-app .auth-box { max-width: 420px; padding: 2rem 1.75rem; border-radius: 20px; }
.area-app .auth-box.is-wide { max-width: 580px; }
.area-app .auth-title { font-size: 1.5rem; }
/* ========================================================================
18 Schmale Schirme: das Menü wird zur Schublade
======================================================================== */
/*
* Unter 780 px liegt die Seitenleiste neben dem Sichtfeld und kommt über ☰
* herein. Zustand nur über body.nav-open (app.js) – eine Stelle, Übergänge
* bleiben im Stylesheet. `visibility` nimmt die Schublade zusätzlich aus der
* Tab-Reihenfolge; sonst landet der Fokus in einem Menü, das niemand sieht.
*/
@media (max-width: 780px) {
.main { padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom)); }
.area-app .main { padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom)); }
/* Die Kopfzeile klebt: der Menüknopf ist von überall erreichbar. */
.topbar {
position: sticky;
top: 0;
z-index: 20;
min-height: 0;
margin: -1rem -1rem 1rem;
padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.area-app .topbar { margin: -1rem -1rem 1.25rem; padding-top: calc(.55rem + env(safe-area-inset-top)); padding-bottom: .55rem; }
.topbar h1, .area-app .topbar h1 { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-app .topbar h1 { font-size: 1.2rem; }
/* Seitenaktionen rutschen in eine zweite Zeile: neben ☰, Titel und
Credits wäre für sie kein Platz, und der Titel soll lesbar bleiben. */
.topbar { flex-wrap: wrap; row-gap: .45rem; }
.topbar-actions {
order: 3;
flex: 1 0 100%;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.topbar-actions::-webkit-scrollbar { display: none; }
.topbar-actions .btn, .area-app .topbar-actions .btn { flex: 0 0 auto; min-height: 36px; padding: .35rem .75rem; font-size: .85rem; border-radius: 10px; }
.topbar .topbar-credits { display: inline-flex; flex: 0 0 auto; order: 2; }
.page-subtitle, .area-app .page-subtitle { margin: -.4rem 0 1rem; font-size: .95rem; }
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
margin-left: -.5rem;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
color: var(--text);
cursor: pointer;
}
.nav-toggle:active { background: var(--surface-2); }
.nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
margin-right: -.5rem;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
color: var(--muted);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.nav-close:active { background: var(--surface-2); }
.sidebar, .area-app .sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 45;
width: 17rem;
max-width: 84vw;
flex: none;
height: auto;
padding-top: calc(1rem + env(safe-area-inset-top));
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
padding-left: calc(1rem + env(safe-area-inset-left));
box-shadow: 4px 0 24px rgba(16, 24, 40, .18);
transform: translateX(-100%);
visibility: hidden;
transition: transform .22s ease, visibility .22s ease;
}
body.nav-open .sidebar { transform: none; visibility: visible; }
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 40;
background: rgba(16, 24, 40, .45);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
/* 40 bzw. 44 px sind das Mindestmaß, das man mit dem Daumen sicher trifft. */
.nav-item { min-height: 44px; padding: .6rem .7rem; font-size: .98rem; }
.btn { min-height: 40px; }
.btn-small { min-height: 40px; }
/* Kundenbereich: auch kleine Knöpfe (15 × „Kopieren“ in Schritt 6, Editor) daumengerecht. */
.area-app .btn-small { min-height: 44px; }
.area-app button.linklike { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.topbar .topbar-credits { min-height: 40px; }
/* iOS zoomt beim Antippen jedes Feldes unter 16 px hinein. */
input, select, textarea { font-size: 16px !important; }
.card { padding: .9rem; }
.area-app .card { padding: 1.15rem; border-radius: 14px; }
.card-foot { margin: 1rem -.9rem -.9rem; padding: .75rem .9rem; }
.area-app .card-foot { margin: 1rem -1.15rem -1.15rem; padding: .85rem 1.15rem; }
.card-head { flex-wrap: wrap; gap: .4rem .75rem; }
/* Auf dem Handy stehen Meldungen im Fluss unter der Kopfzeile: schwebend
würden sie die (je nach Seite ein- oder zweizeilige) Kopfzeile verdecken. */
.flash-stack { position: static; width: auto; margin: 0 0 1rem; }
.flash { box-shadow: none; }
.topbar-title { flex: 1 1 0; }
.toast-stack { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); width: auto; align-items: stretch; }
body:has(.sticky-actions) .toast-stack { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
/* Reiter: eine waagerecht scrollbare Reihe statt drei umgebrochener Zeilen. */
.tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.kv { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.kv dd { margin-bottom: .55rem; }
/* Schrittleiste: nur Nummernkreise, der aktuelle Schritt mit Namen. */
.steps {
gap: .35rem;
margin: -.25rem -1rem 1.25rem;
padding: .25rem 1rem .35rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.steps::-webkit-scrollbar { display: none; }
.step { flex: 0 0 auto; gap: .35rem; }
.step::after { flex: 0 0 .9rem; min-width: .9rem; }
.step-link { min-height: 44px; padding: .2rem; }
.step.is-current .step-link { padding-right: .6rem; }
.step:not(.is-current) .step-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.wizard-q { font-size: 1.35rem; }
.wizard-sub { font-size: .98rem; margin-bottom: 1.25rem; }
/* Aktionsleiste klebt unten; der Hauptknopf nimmt die Breite ein. */
.sticky-actions {
position: sticky;
bottom: 0;
z-index: 15;
flex-wrap: nowrap;
gap: .75rem;
margin: 1.5rem -1rem 0;
padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
background: rgba(255, 255, 255, .97);
box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
}
.sticky-actions .btn-primary, .sticky-actions .is-main { flex: 1 1 auto; margin-left: 0; }
.sticky-actions .back-link { flex: 0 0 auto; }
.sticky-actions .sticky-note { display: none; }
/* Steht die Leiste am Seitenende, braucht .main darunter keinen Rand mehr. */
.main:has(> .content > .sticky-actions:last-child),
.main:has(> .content > form:last-child > .sticky-actions:last-child),
.main:has(> .content > .wizard:last-child .sticky-actions:last-child) { padding-bottom: 0; }
.choice-grid { gap: .75rem; }
.choice-card { padding: 1rem 2.6rem 1rem 1rem; }
.area-app .choice-card { padding: 1.1rem 2.75rem 1.1rem 1.1rem; }
.check-item { flex-wrap: wrap; }
.check-actions { flex-basis: 100%; padding-left: 2.35rem; }
.copy-field { flex-wrap: wrap; }
.copy-field > .copy-value { flex-basis: 100%; }
.copy-field > .btn { flex: 1 1 auto; }
/* Seiten-Miniaturen als waagerechte Leiste (§16.6). */
.thumbs {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 68px;
overflow-x: auto;
scroll-snap-type: x proximity;
margin: 0 -1rem;
padding: .25rem 1rem .6rem;
scrollbar-width: thin;
}
.thumb { scroll-snap-align: start; }
.preview-stage { margin: 0 -1rem; padding: 1rem; border-radius: 0; }
.preview-page { max-width: min(100%, calc((100vh - 11rem) * var(--page-ratio, .7727))); }
.plan-card { padding: 1.3rem 1.1rem 1.1rem; }
/* Dialog als Blatt von unten, randlos (Teil 1 §5.1). */
.modal { align-items: flex-end; padding: 0; }
.modal-box, .modal-sm .modal-box, .modal-lg .modal-box {
width: 100%;
max-height: 92vh;
border-radius: 16px 16px 0 0;
animation: kdp-sheet-in .24s ease-out;
}
.area-app .modal-box { border-radius: 18px 18px 0 0; }
.modal-foot, .area-app .modal-foot { border-radius: 0; padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); }
.modal-foot .btn { flex: 1 1 auto; }
.page-head { align-items: flex-start; }
.page-head-actions { width: 100%; }
}
/* Breiter werdendes Fenster: kein „offen“ darf hängen bleiben. */
@media (min-width: 781px) {
body.nav-open { overflow: visible; }
}
@media (max-width: 560px) {
/* Zahlenreihe passt nicht in eine Zeile: nur ‹ Seite 5 von 12 › */
.pagination > .page-link:not(.page-prev):not(.page-next), .pagination > .page-gap { display: none; }
.page-status { display: inline; }
/* Kennzahlen zu zweit nebeneinander statt einer langen Säule. */
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.stat-value { font-size: 1.4rem; }
.ampel { gap: .8rem; }
.ampel::before { transform: scale(.9); transform-origin: left center; }
.btn-row.is-stack-mobile { flex-direction: column; align-items: stretch; }
.auth-box, .area-app .auth-box { padding: 1.4rem 1.15rem; border-radius: 16px; }
.plan-price { font-size: 1.75rem; }
}
/* ========================================================================
19 Bewegung, Kontrastmodus, Druck, [hidden]
======================================================================== */
/* Wer im System „Bewegung reduzieren“ gewählt hat, bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.progress-bar { animation: none !important; }
/* Ohne Bewegung zeigt ein voller, blasser Balken „läuft noch“. */
.progress.is-indeterminate .progress-bar { width: 100% !important; transform: none !important; opacity: .45; }
.spinner { animation: kdp-spin 1.5s linear infinite !important; }
}
/* Windows-Kontrastmodus: Hintergründe verschwinden, Rahmen bleiben. */
@media (forced-colors: active) {
.choice-card.is-selected, .swatch.is-selected, .avatar-card.is-selected, .thumb.is-active .thumb-page { outline: 3px solid Highlight; }
.step.is-current .step-num { forced-color-adjust: none; }
.progress-bar { background: Highlight; }
}
/* Erweiterung 5: Gutschein einlösen, Partner-Vorteil bei der Registrierung, Freunde werben. */
.voucher-form .input-group input { text-transform: uppercase; letter-spacing: .04em; }
.voucher-form .input-group input::placeholder { text-transform: none; letter-spacing: 0; }
.voucher-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.voucher-list li { margin: .2rem 0; }
.register-offer { margin-top: .75rem; }
/*
* Wunsch 20.10.2026: Code-Feld der Registrierung – leer nur als kleiner Link (aufgeklappt verschwindet der Link, das Feld
* sieht aus wie jedes andere), vorausgefüllt mit grünem Hinweis, was der Code bringt. 44 px Tippfläche wie überall.
*/
.code-reveal > summary {
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 44px;
color: var(--info);
font-size: .9rem;
cursor: pointer;
list-style: none;
}
.code-reveal > summary::-webkit-details-marker { display: none; }
.code-reveal > summary:hover { text-decoration: underline; }
.code-reveal > summary .icon { width: 1rem; height: 1rem; }
.code-reveal[open] > summary { display: none; }
.code-note {
display: flex;
gap: .5rem;
align-items: flex-start;
margin-top: .4rem;
padding: .55rem .7rem;
border: 1px solid var(--ok-line);
border-radius: var(--radius);
background: var(--ok-bg);
font-size: .85rem;
}
.code-note > .icon, .code-note > svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--ok); }
.code-note p { margin: 0; }
.code-note p + p { margin-top: .25rem; }
.referral-points { list-style: none; margin: 0 0 1rem; padding: 0; }
.referral-points li { display: flex; gap: .55rem; align-items: flex-start; margin: .45rem 0; }
.referral-points li .icon { flex: none; margin-top: .15rem; color: var(--accent); }
.referral-link { overflow-wrap: anywhere; word-break: break-all; }
.referral-kpis { margin-top: 1rem; }
/* Erweiterung 6: Credit-Töpfe, Gutschein aus dem Link, gesperrte Figuren, Teilen und Auszahlen. */
.credit-buckets { list-style: none; margin: .35rem 0 .75rem; padding: 0; font-size: .9rem; }
.credit-buckets li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .32rem 0; border-top: 1px dashed var(--border); }
.credit-buckets li:first-child { border-top: 0; }
.credit-buckets li > span:first-child { min-width: 0; }
.credit-buckets strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.credit-buckets .is-frozen { color: var(--muted); }
.credit-buckets .is-frozen strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-card.is-voucher { border: 2px solid var(--ok); box-shadow: 0 10px 28px rgba(22, 128, 61, .16); }
.plan-card.is-voucher .plan-flag { background: var(--ok); }
.voucher-card.is-linked { border: 2px solid var(--ok); box-shadow: 0 10px 28px rgba(22, 128, 61, .12); }
.voucher-card.is-linked .voucher-gift { margin: 0 0 .9rem; padding: .75rem .9rem; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); }
.voucher-card.is-problem { border: 2px solid var(--warn-line); }
.avatar-card.is-plan-locked { opacity: .55; filter: grayscale(.65); }
.avatar-card.is-plan-locked:hover { opacity: .8; }
.avatar-plan-lock { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.choice-card.is-plan-locked, .avatar-choice.is-plan-locked { opacity: .5; filter: grayscale(.65); cursor: not-allowed; }
.share-preview { display: block; width: 100%; max-width: 270px; aspect-ratio: 9 / 16; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface-2); object-fit: cover; }
.share-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); align-items: start; }
.share-buttons { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.share-buttons .btn { justify-content: flex-start; }
.share-text { width: 100%; min-height: 6.5rem; font-size: .9rem; }
.payout-methods { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 .75rem; }
.input-group > select.input-addon-select { flex: 0 0 auto; width: auto; min-width: 7rem; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
/* Erweiterung 7 [1]: Editor des Teilbilds – Farbthemen als kleine Verläufe. */
.share-editor > summary { list-style: none; cursor: pointer; }
.share-editor > summary::-webkit-details-marker { display: none; }
.theme-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.theme-swatch { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .76rem; cursor: pointer; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch span { width: 2.6rem; height: 2.6rem; border-radius: 10px; border: 2px solid var(--border); }
.theme-swatch input:checked + span { border-color: var(--text); box-shadow: 0 0 0 3px var(--accent-ring); }
.theme-swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Erweiterung 7 [2]: Chance-Balken der Ampel, Einschätzung je Idee, Hinweis auf die bessere Nische. */
.chance-meter { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 0; font-size: .86rem; color: var(--muted); }
.chance-meter-bar { position: relative; flex: 1 1 auto; max-width: 260px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #ffb3b3 0%, #ffb3b3 19%, #ffe08a 20%, #ffe08a 34%, #b9ecca 35%, #6fd49b 70%, #3fbf7a 100%); }
.chance-meter-bar span { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--text); transform: translateY(-50%); }
.idea-chance { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-bottom: .2rem; padding: .12rem .55rem; border-radius: 99px; font-size: .76rem; font-weight: 700; }
.idea-chance::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.idea-chance.is-green { background: var(--ok-bg); color: var(--ok); }
.idea-chance.is-yellow { background: var(--warn-bg); color: var(--warn); }
.idea-chance.is-red { background: var(--err-bg); color: var(--err); }
.niche-better { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0 0; padding: .65rem .8rem; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); font-size: .9rem; }
.niche-better .icon { flex: none; color: var(--ok); margin-top: .1rem; }
.input-group > input + select.input-addon-select { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
@media (max-width: 640px) {
.share-layout { grid-template-columns: 1fr; }
.share-preview { max-width: 220px; margin: 0 auto; }
}
@media print {
.sidebar, .topbar .nav-toggle, .nav-backdrop, .flash-stack, .toast-stack, .sticky-actions, .banner, .skip-link { display: none !important; }
body { background: #fff; }
.shell { display: block; }
.main { padding: 0; }
.card { box-shadow: none; break-inside: avoid; }
}
/*
* Ganz am Ende: Die Browser-Regel [hidden]{display:none} steht im
* UA-Stylesheet und verliert gegen jede Klasse, die display setzt (etwa
* .btn mit inline-flex). In PinStudio blieben genau daran Knöpfe sichtbar,
* die das Skript ausgeblendet hatte.
*/
[hidden] { display: none !important; }
/* Erweiterung 7 [8]: FAQ-Block unter Hilfe-Artikeln */
.help-faq { display: grid; gap: .5rem; margin-bottom: 1rem; }
.help-faq > details > summary { font-weight: 600; }
/* Kachel „Eigenen Bildstil erstellen“ – immer die letzte Karte der Stil-Auswahl (Schritt 2, Figuren-Formular; 16.10.2026). */
.choice-card.style-create-card { border: 2px dashed var(--accent-line); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 75%); color: var(--text); text-decoration: none; }
.choice-card.style-create-card:hover, .choice-card.style-create-card:focus-visible { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.style-create-media { position: relative; background: var(--surface); color: var(--accent); border: 1.5px dashed var(--accent-line); }
.style-create-media > .icon { width: 1.6rem; height: 1.6rem; }
.has-previews .style-create-media > .icon { width: 2.8rem; height: 2.8rem; }
.style-create-plus { position: absolute; right: .4rem; bottom: .4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.style-create-plus .icon { width: .85rem; height: .85rem; }
.choice-grid.is-compact:not(.has-previews) .style-create-plus { right: .1rem; bottom: .1rem; width: 1rem; height: 1rem; font-size: .75rem; }
.choice-grid.is-compact:not(.has-previews) .style-create-plus .icon { width: .6rem; height: .6rem; }
.style-create-card .choice-title { color: var(--accent-dark); }
.style-create-card.is-plan { background: var(--surface-2); }
.style-create-card.is-plan .choice-title { color: var(--text); }
/* Erweiterung 9 [6]: Shop-Stil ohne Freischaltung in einer Stil-Auswahl – Schloss auf dem Bild, Preis darunter, Klick → Stil-Shop. */
.choice-card.shop-locked-card { color: var(--text); text-decoration: none; background: var(--surface-2); border-style: dashed; }
.choice-card.shop-locked-card:hover, .choice-card.shop-locked-card:focus-visible { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.choice-card.shop-locked-card.is-plan-locked:hover { border-style: dashed; border-color: var(--border); box-shadow: none; }
.shop-locked-card .choice-media { position: relative; }
.shop-locked-card .choice-media img { filter: saturate(.75); }
.shop-locked-badge { position: absolute; right: .35rem; top: .35rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(28, 32, 36, .72); color: #fff; }
.choice-grid .choice-card.shop-locked-card .shop-locked-badge .icon { width: .95rem; height: .95rem; color: #fff; }
.choice-grid.is-compact:not(.has-previews) .choice-card.shop-locked-card .shop-locked-badge { right: 0; top: 0; width: 1.1rem; height: 1.1rem; }
.choice-grid.is-compact:not(.has-previews) .choice-card.shop-locked-card .shop-locked-badge .icon { width: .65rem; height: .65rem; }
.shop-locked-price { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 700; color: var(--accent-dark); }
.shop-locked-price .icon { width: .95rem; height: .95rem; }
.shop-step-lock { margin: .6rem 0 0; }
/* Kennzeichnung der Amazon-Affiliate-Links ganz unten auf der Seite (Ideen-Prüfung mit Partner-Tag). */
.affiliate-note { max-width: 1180px; margin: 2.5rem auto 0; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; line-height: 1.45; }
.affiliate-note[hidden] { display: none; }
/* Kachel „Neue Figur erstellen“ – letzte Karte der Figurenauswahl in Schritt 2 (16.10.2026). */
.avatar-card.avatar-create-card { border: 2px dashed var(--accent-line); box-shadow: none; background: linear-gradient(160deg, var(--accent-soft), var(--surface) 75%); color: var(--text); text-decoration: none; }
.avatar-card.avatar-create-card:hover, .avatar-card.avatar-create-card:focus-visible { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.avatar-create-img { position: relative; background: transparent; color: var(--accent); }
.avatar-create-img > .icon { width: 3rem; height: 3rem; }
.avatar-create-plus { position: absolute; left: 50%; top: 50%; margin: .8rem 0 0 .8rem; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--surface); }
.avatar-create-plus .icon { width: 1rem; height: 1rem; }
.avatar-create-card .avatar-name { color: var(--accent-dark); white-space: normal; }
.avatar-create-card.is-plan { background: var(--surface-2); }
.avatar-create-card.is-plan .avatar-name { color: var(--text); }
/* =========================================================================
Erweiterung 10 [5], [6]: Kennenlern-Band – oben auf jeder Seite (kompakt, schließbar), auf der Startseite groß.
Am Handy eine Zeile Text + Knopf: Nebensätze und Angebotstext weichen, Restzeit und Zähler bleiben.
========================================================================= */
.trial-band { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding: .55rem .6rem .55rem .85rem; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.trial-band-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: var(--accent); }
.trial-band-icon .icon, .trial-band-icon svg { width: 1.1rem; height: 1.1rem; }
.trial-band-body { flex: 1 1 auto; min-width: 0; }
.trial-band-line, .trial-band-offer { margin: 0; line-height: 1.4; font-size: .9rem; }
.trial-band-line strong { color: var(--accent-dark); }
.trial-band-after { color: var(--muted); margin-left: .35rem; }
.trial-band-short { display: none; }
.trial-band-offer { margin-top: .1rem; font-weight: 600; color: var(--text); }
/* Nachtrag 20.10.2026: erst das Angebot, dann der Zähler – der Zähler steht darum hinter dem Text (Abstand links). */
.trial-band-timer { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: #fff; color: var(--accent-dark); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trial-band-timer .icon, .trial-band-timer svg { width: .95em; height: .95em; margin-right: .25rem; vertical-align: -.12em; }
/* Kompaktes Band: Passt der Zähler nicht mehr hinter den Text, beginnt er bündig in der nächsten Zeile. */
.trial-band:not(.is-large) .trial-band-offer { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.trial-band:not(.is-large) .trial-band-timer { margin-left: 0; }
.trial-band-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
.trial-band-actions form { margin: 0; }
.trial-band-btn { min-height: 44px; white-space: nowrap; }
.trial-band-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.trial-band-x:hover, .trial-band-x:focus-visible { background: #fff; color: var(--text); }
/* Nachtrag 20.10.2026: Der Untertitel rückt sonst (negativer Abstand für „direkt unter dem Titel“) ans Band heran. */
.area-app .main > .trial-band + .page-subtitle { margin-top: 0; }
/* Große Fassung auf der Startseite (ersetzt die frühere Karte „Kennenlern-Phase“). */
.trial-band.is-large { align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.trial-band.is-large .trial-band-icon { width: 2.75rem; height: 2.75rem; }
.trial-band.is-large .trial-band-icon .icon, .trial-band.is-large .trial-band-icon svg { width: 1.5rem; height: 1.5rem; }
.trial-band-kicker { margin: 0 0 .1rem; color: var(--accent-dark); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.trial-band-title { margin: 0 0 .25rem; font-size: 1.2rem; }
.trial-band-text { margin: 0; line-height: 1.5; }
/* Nachtrag 20.10.2026: Angebot auf der Startseite als eigener weißer Kasten mit Überschrift „Dein Startgeschenk“. */
.trial-band.is-large .trial-band-offer { margin-top: .75rem; padding: .7rem .85rem; border: 1px solid var(--accent-line); border-radius: 10px; background: #fff; font-size: .95rem; }
.trial-band-offer-head { display: flex; align-items: center; gap: .35rem; margin: 0 0 .2rem; color: var(--accent-dark); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.trial-band-offer-head .icon, .trial-band-offer-head svg { width: 1rem; height: 1rem; }
.trial-band.is-large .trial-band-offer-text { display: block; margin: 0 0 .45rem; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.trial-band.is-large .trial-band-timer { margin-left: 0; background: var(--accent-soft); }
.trial-band.is-large .trial-band-actions { align-self: center; }
/* Mein Abo: Angebot an der Paketkarte, Knopf „7 Tage kennenlernen“ über dem normalen Abschluss. */
.plan-offer-line .trial-band-timer { margin: .2rem 0 0; background: var(--accent-soft); white-space: normal; }
.plan-trial-sub { display: block; font-size: .8rem; font-weight: 600; opacity: .85; }
.plan-trial { margin-bottom: .5rem; }
.plan-trial .btn { width: 100%; justify-content: center; }
/* Startseite für Neue: „7 Tage kennenlernen – 0 € heute“ (Knopf + Link darunter). */
.dash-trial form.dash-todo-btn { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.dash-trial-more { font-size: .88rem; text-align: center; }
/* Erweiterung 10 [5a]: „Freunde werben“ in der Kennenlern-Phase – Menüpunkt ausgegraut mit Schloss, Seite gesperrt. */
.nav-item.is-plan-locked { color: var(--muted); }
.nav-item.is-plan-locked svg:last-child { margin-left: auto; width: 15px; height: 15px; }
.referral-intro.is-plan-locked .referral-points { opacity: .7; }
@media (max-width: 600px) {
.trial-band { gap: .5rem; padding: .4rem .35rem .4rem .6rem; }
.trial-band-icon { display: none; }
.trial-band-after, .trial-band-offer-text, .trial-band-long, .trial-band-timer-label { display: none; }
.trial-band-short { display: inline; }
.trial-band-line, .trial-band-offer { display: inline; font-size: .85rem; }
.trial-band-body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-band-timer { margin-left: .25rem; margin-right: 0; }
.trial-band:not(.is-large) .trial-band-timer .icon, .trial-band:not(.is-large) .trial-band-timer svg { display: none; }
.trial-band:not(.is-large) .trial-band-offer { display: inline; }
.trial-band:not(.is-large) .trial-band-timer { margin-left: .25rem; }
.trial-band-btn { padding-left: .7rem; padding-right: .7rem; }
.trial-band-btn .icon { display: none; }
.trial-band.is-large { flex-wrap: wrap; padding: 1rem; }
.trial-band.is-large .trial-band-icon { display: inline-flex; }
.trial-band.is-large .trial-band-body { flex-basis: calc(100% - 3.75rem); white-space: normal; }
.trial-band.is-large .trial-band-offer, .trial-band.is-large .trial-band-offer-text { display: block; }
.trial-band.is-large .trial-band-timer-label { display: inline; }
.trial-band.is-large .trial-band-timer { margin: 0; white-space: normal; }
.trial-band.is-large .trial-band-actions { width: 100%; }
.trial-band.is-large .trial-band-actions > * { flex: 1 1 auto; }
.trial-band.is-large .trial-band-btn { width: 100%; justify-content: center; }
}
/* =========================================================================
Erweiterung 11 [10]–[15] (N5): Browser-Erweiterung – Anleitung, „Verbinden?“-Seite und Übergabe, „Mein Konto“,
Hinweise in Schritt 6 und auf der Startseite. Alles hier (statt in wizard/publish/avatars.css), weil dieselben
Bausteine auf mehreren Seiten mit unterschiedlichen Zusatz-Stylesheets stehen.
========================================================================= */
.ext-connect { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }
.ext-connect h2 { margin: .5rem 0 .5rem; font-size: 1.35rem; }
.ext-connect > p, .ext-connect [data-ext-step] > p { max-width: 34rem; margin-left: auto; margin-right: auto; }
.ext-connect .btn-row { justify-content: center; }
.ext-connect-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.ext-connect-icon .icon, .ext-connect-icon svg { width: 1.6rem; height: 1.6rem; }
.ext-connect-icon.is-ok { background: var(--ok-bg); color: var(--ok); }
.ext-connect-icon.is-warn { background: var(--warn-bg); color: var(--warn); }
.ext-connect-icon .spinner { width: 1.5rem; height: 1.5rem; }
.ext-connect-lead { font-weight: 600; }
.ext-list { list-style: none; margin: 0 auto 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; text-align: left; max-width: 32rem; }
.ext-list li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.45; }
.ext-list li > .icon, .ext-list li > svg { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: .1rem; color: var(--accent); }
.ext-connect-form { margin-top: 1rem; }
.ext-connect-device { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; padding: .35rem .75rem; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border); font-size: .9rem; }
.ext-connect-device .icon, .ext-connect-device svg { width: 1rem; height: 1rem; color: var(--muted); }
.ext-connect .notice { text-align: left; }
.ext-steps { margin: 0 0 .75rem; padding-left: 1.4rem; line-height: 1.55; text-align: left; max-width: 46rem; }
.ext-connect .ext-steps { margin-left: auto; margin-right: auto; max-width: 34rem; }
.ext-steps li + li { margin-top: .3rem; }
.ext-steps code, .ext-token-plain { padding: .05rem .35rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border);
font-size: .88em; overflow-wrap: anywhere; }
.ext-token { max-width: 34rem; margin: 0 auto .75rem; text-align: left; }
.ext-token .copy-field input, .account-ext-new .copy-field input { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.ext-intro-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.ext-intro-head > div { flex: 1 1 auto; min-width: 0; }
.ext-intro-head h2 { margin: 0 0 .25rem; }
.ext-intro-head p { margin: 0; }
.ext-intro .ext-list { margin-left: 0; max-width: none; }
.ext-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: .35rem; border-radius: 50%;
background: var(--accent); color: #fff; font-size: .9rem; font-weight: 700; vertical-align: .1em; }
.ext-guide { margin-top: .75rem; padding: .75rem .9rem; border-left: 3px solid var(--accent-line); background: var(--surface-2); line-height: 1.5; }
/* Erweiterung 11 [16] (N6): Download und Schritt-Bilder auf der Anleitungsseite, Bilder von Popup/Seitenfenster */
.ext-download { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .25rem 0 1.1rem; }
.ext-howto { list-style: none; counter-reset: exthow; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.ext-howto li { counter-increment: exthow; position: relative; display: flex; flex-direction: column; gap: .55rem; padding: .7rem; border: 1px solid var(--border);
border-radius: var(--radius); background: var(--surface); line-height: 1.45; }
.ext-howto li::before { content: counter(exthow); position: absolute; top: .45rem; left: .45rem; display: inline-flex; align-items: center; justify-content: center;
width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .9rem; font-weight: 700; }
.ext-art { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.ext-howto-text strong { display: block; margin-bottom: .15rem; }
.ext-howto-text code { padding: .05rem .3rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: .88em; overflow-wrap: anywhere; }
.ext-shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-top: .75rem; }
.ext-shot { margin: 0; flex: 0 1 auto; max-width: 100%; }
.ext-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ext-shot.is-popup img { width: 300px; }
.ext-shot.is-panel img { width: 340px; }
.ext-shot figcaption { margin-top: .35rem; color: var(--muted); font-size: .85rem; max-width: 340px; }
/* „Mein Konto → Browser-Erweiterung“ */
.account-ext-new .copy-item { margin: .4rem 0 .5rem; }
.account-ext-sub { margin: 1rem 0 .5rem; font-size: 1rem; }
.account-ext-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.account-ext-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.account-ext-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
background: var(--accent-soft); color: var(--accent); }
.account-ext-icon .icon, .account-ext-icon svg { width: 1.1rem; height: 1.1rem; }
.account-ext-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.account-ext-body strong { overflow-wrap: anywhere; }
.account-ext-meta { color: var(--muted); font-size: .85rem; }
.account-ext-item form { margin: 0; flex: 0 0 auto; }
/* Schritt 6, Teil „Bei KDP hochladen“ */
.ext-promo { display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--accent-line);
border-radius: var(--radius); background: var(--accent-soft); }
.ext-promo-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: #fff; color: var(--accent); }
.ext-promo-icon .icon, .ext-promo-icon svg { width: 1.3rem; height: 1.3rem; }
.ext-promo-body { flex: 1 1 auto; min-width: 0; }
.ext-promo-title { display: block; margin-bottom: .2rem; line-height: 1.35; }
.ext-promo-body p { margin: 0 0 .6rem; line-height: 1.5; }
.ext-promo-done { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--radius);
background: var(--ok-bg); border: 1px solid var(--ok-line); line-height: 1.45; }
.ext-promo-done > .icon, .ext-promo-done > svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--ok); }
/* Startseite: Hinweis-Karte (Farben wie die Kennenlern-Karte, schließbar wie das Kennenlern-Band) */
.dash-todo.dash-ext { margin-bottom: 1.25rem; border-color: var(--accent-line); background: var(--accent-soft); }
.dash-ext .dash-todo-icon { color: var(--accent); }
.dash-ext .dash-todo-kicker { color: var(--accent-dark); }
.dash-ext-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
.dash-ext-close { margin: 0; }
@media (max-width: 600px) {
.ext-intro-head { flex-wrap: wrap; }
.ext-promo { flex-direction: column; }
.ext-promo-icon { display: none; }
.ext-promo .btn-row .btn { width: 100%; justify-content: center; }
.account-ext-item { flex-wrap: wrap; }
.account-ext-body { flex-basis: calc(100% - 3rem); }
.account-ext-item form { width: 100%; }
.account-ext-item form .btn { width: 100%; justify-content: center; }
.dash-ext-actions { width: 100%; }
.dash-ext-actions .dash-todo-btn { flex: 1 1 auto; width: auto; justify-content: center; }
}
/* ===== Erweiterung 11 W1: Partner-Bewerbung, Bewerbungen im Admin, Nischenprüfer → Tiefenrecherche ===== */
.partner-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.partner-consent { font-weight: 400; }
.partner-terms .notice-title { line-height: 1.4; }
.partner-app-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
.partner-app-actions { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.partner-app-actions h2 { display: flex; align-items: center; gap: .4rem; }
.partner-app-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.partner-app-dl { margin: 0; display: grid; gap: .75rem; }
.partner-app-dl dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.partner-app-dl dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.partner-app-text { white-space: normal; }
.partner-app-channel { overflow-wrap: anywhere; }
.niche-concept-research { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .88rem; font-weight: 600; text-decoration: none; }
.niche-concept-research:hover { text-decoration: underline; }
.niche-concept-research .icon, .niche-concept-research svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.niche-research { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.25rem; border-left: 4px solid var(--accent); }
.niche-research.is-locked { border-left-color: var(--border); background: var(--surface-2); }
.niche-research-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--accent-soft); color: var(--accent-dark); flex: 0 0 auto; }
.niche-research-icon svg { width: 1.3rem; height: 1.3rem; }
.niche-research-body { min-width: 0; flex: 1 1 auto; }
.niche-research-body h3 { margin: 0 0 .35rem; }
.niche-research-body p { margin: 0 0 .75rem; }
.niche-research-lock { color: var(--muted); }
.research-prefill { margin-bottom: 1rem; }
@media (max-width: 600px) {
.niche-research { flex-direction: column; }
.niche-research .btn-row .btn { width: 100%; justify-content: center; }
.partner-app-terms { grid-template-columns: 1fr; }
}
/* Erweiterung 11 [T1]: Admin → Credit-Kosten – breit als Tabelle mit den Spalten „Credits“ und „In der Kennenlern-Phase“; am
Handy je Aktion ein Block (Name, Erklärung, darunter beide Felder nebeneinander mit kleiner Beschriftung), sonst würden die
Zahlenfelder zu schmal und die zweite Spalte rutschte aus dem Bild. */
.cost-table .cost-cell { width: 8.5rem; }
.cost-table .cost-cell input { width: 100%; }
@media (max-width: 640px) {
.cost-table thead { display: none; }
.cost-table, .cost-table tbody { display: block; }
.cost-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.cost-table td { display: block; padding: 0; border: 0; }
.cost-table td:not(.cost-cell) { grid-column: 1 / -1; }
.cost-table .cost-cell { width: auto; text-align: left; }
.cost-table .cost-cell::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
}
/* Erweiterung 11 [N7] – Anfang: Add-on-Karten unter „Mein Abo“ – Kontingent („30 Analysen im Monat inklusive, danach je
5 Credits“) und in der Kennenlern-Phase die Zeile „Noch 2 von 2 … frei in deiner Kennenlern-Phase.“ (Geschenk-Symbol). */
.addon-quota { white-space: normal; }
.addon-card .addon-trial { display: flex; align-items: flex-start; gap: .4rem; margin: 0; padding: .45rem .6rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; line-height: 1.4; }
.addon-trial .icon { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .1rem; color: var(--accent); }
/* Erweiterung 11 [N7] – Ende */
/* Erweiterung 11 [C3]: Admin → Einstellungen → Website – Beispielbilder der KI-Hinweise im Cover-Designer. */
.cover-ex-list { display: grid; gap: .75rem; margin: .5rem 0; }
.cover-ex-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; align-items: start; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; }
.cover-ex-preview { display: flex; align-items: center; justify-content: center; width: 96px; min-height: 96px; border-radius: 8px; background: var(--bg-soft, rgba(0,0,0,.04)); overflow: hidden; text-align: center; }
.cover-ex-preview img { display: block; max-width: 96px; max-height: 128px; width: auto; height: auto; }
.cover-ex-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.cover-ex-actions input[type=file] { max-width: 100%; }
/* Erweiterung 11 [C3] – Ende */
/* Erweiterung 11 [D2]: Verlauf der DataForSEO-Antworten (Admin → Einstellungen → Nischenprüfer → Karte „Suchvolumen“).
Jede Zeile ist ein natives details/summary (.panel); Anfrage und Rohantwort stehen in eigenen Scroll-Kästen, damit lange
JSON-Zeilen nie die Seite verbreitern (Handy 492 px). */
.dfs-error .notice-body p { overflow-wrap: anywhere; }
.dfs-log { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dfs-log-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.dfs-log-head h3 { margin: 0; font-size: 1rem; }
.dfs-log-item { margin-bottom: .5rem; min-width: 0; }
.dfs-log-item > summary { align-items: flex-start; font-weight: 400; font-size: .9rem; }
.dfs-log-item > summary::before { margin-top: .45rem; }
.dfs-log-sum { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-width: 0; }
.dfs-log-line { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.dfs-log-kw { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.dfs-log-msg { font-size: .84rem; overflow-wrap: anywhere; }
.dfs-log-body { min-width: 0; }
.dfs-log-part { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; margin-bottom: .3rem; }
.dfs-log-label { font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.dfs-pre {
max-width: 100%;
max-height: 22rem;
margin: 0 0 .9rem;
padding: .6rem .7rem;
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
font-family: var(--mono);
font-size: .76rem;
line-height: 1.45;
white-space: pre;
tab-size: 2;
}
.dfs-log-body > .dfs-pre:last-child { margin-bottom: 0; }
/* Erweiterung 11 [D2] – Ende */
/* Erweiterung 11 [NP1]: Admin → Nischenprüfer – Achtung-Box zu Partner-Tag + Cover-Bildern (rot, wenn beide an) und der Block
„Keyword-Ideen“ auf der Karte „Suchvolumen“. */
.niche-app-warn { margin: .35rem 0 0; }
.niche-app-warn .notice-body p + p { margin-top: .35rem; }
.niche-app-warn.is-both { box-shadow: 0 0 0 2px var(--err-line); }
.dfs-ideas { margin-top: .9rem; }
.dfs-google-pause { display: flex; align-items: center; gap: .35rem; color: var(--warn); }
/* Erweiterung 11 [NP1] – Ende */
/* Erweiterung 11 [NPD]: Admin → Nischenprüfer – Karte „Letzte Antworten von Canopy“. Die Zeilen nutzen die Klassen des
DataForSEO-Verlaufs (D2: .dfs-log-item, .dfs-pre); hier nur der umbrechende Kopf (Handy) und der Hinweis „Feld fehlt“. */
.cnp-log-head { flex-wrap: wrap; gap: .5rem 1rem; }
.cnp-log-warn { display: flex; align-items: flex-start; gap: .35rem; color: var(--warn); }
.cnp-log-warn svg { flex: 0 0 auto; margin-top: .15rem; }
/* Erweiterung 11 [NPD] – Ende */
/* Erweiterung 11 [PA1]: Admin → Nischenprüfer – Karte „Offizielle Amazon-Daten (Creators API)“ (Zeilen des Verlaufs nutzen die
Klassen des DataForSEO-Verlaufs) und die Zeile „offizielle Daten – regelkonform“ in der Achtung-Box. */
.cr-state { margin-bottom: .75rem; }
.cr-state .notice-body p + p { margin-top: .25rem; }
.cr-pause { display: flex; align-items: flex-start; gap: .35rem; color: var(--warn); }
.cr-pause svg { flex: 0 0 auto; margin-top: .15rem; }
.cr-rules ul { padding-left: 1.1rem; line-height: 1.5; }
.niche-app-official { margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border); }
.niche-app-official.is-ok .badge { margin-right: .3rem; }
/* Erweiterung 11 [PA1] – Ende */
/* Erweiterung 11 [NP2]: Admin → Nischenprüfer – Karte „Test: Amazon-Suche über DataForSEO“ (✓/✗-Liste „Was davon wäre nutzbar“,
Einzelheiten zum Aufklappen) und der Block „Sterne und Bewertungszahlen“. Am Handy alles untereinander, nichts breiter als die Karte. */
.niche-ratings { margin-top: 1rem; }
.mt-form { margin-top: .5rem; }
.mt-result { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); min-width: 0; }
.mt-result h3 { margin: 0 0 .25rem; font-size: 1rem; overflow-wrap: anywhere; }
.mt-result > p { overflow-wrap: anywhere; }
.mt-h4 { margin: 1rem 0 .45rem; font-size: .95rem; }
.mt-fetch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.mt-verdict { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mt-row { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .55rem; align-items: start; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.mt-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 700; line-height: 1; }
.mt-row.is-yes .mt-mark { background: var(--ok-bg); color: var(--ok); }
.mt-row.is-no .mt-mark { background: var(--err-bg); color: var(--err); }
.mt-row.is-open .mt-mark { background: #eceef1; color: #4a525c; }
.mt-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.mt-fazit { margin: .75rem 0 0; overflow-wrap: anywhere; }
.mt-more { margin-top: .6rem; min-width: 0; }
.mt-first { margin: .3rem 0 0; padding-left: 1.3rem; font-size: .88rem; }
.mt-first li { overflow-wrap: anywhere; margin-bottom: .15rem; }
.mt-hint { display: flex; align-items: flex-start; gap: .35rem; color: var(--warn); margin-top: .4rem; }
.mt-hint svg { flex: 0 0 auto; margin-top: .15rem; }
/* Erweiterung 11 [NP2] – Ende */