/* Lesezeichen-Designer · Glöckler Verlagsgruppe
   Hochwertiges, literarisches Design – mobile-first. */

/* GVG-Design – Farbwelt der Glöckler-Verlagsgruppe-Homepage.
   HELL = Basis (:root); DUNKEL = GVG-Signatur (Standard, per data-theme gesetzt). */
:root {
  --paper:      #f5f3ee;   /* Seite */
  --paper-2:    #eae7dd;   /* zweite Fläche */
  --surface:    #ffffff;   /* Karten/Panels */
  --frame:      #ffffff;   /* Rahmen um Lesezeichen-Bilder */
  --ink:        #1b2427;
  --ink-soft:   #566065;
  --ink-faint:  #8b9598;
  --line:       #e3e0d7;
  --line-soft:  #eeece4;
  --accent:     #3c828c;   /* Petrol/Teal (GVG) */
  --accent-deep:#2f6a73;
  --gold:       #b3873f;
  --accent-ink: #06181c;   /* Text auf Teal-Buttons (dunkel = lesbar) */
  --shadow:     0 18px 50px -18px rgba(20, 40, 44, 0.28);
  --shadow-sm:  0 6px 20px -8px rgba(20, 40, 44, 0.22);
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --ui: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1080px;
}
:root[data-theme="dark"] {
  --paper:      #0f1416;   /* GVG dunkel */
  --paper-2:    #161d20;
  --surface:    #192126;
  --frame:      #e9edee;   /* helle Passepartout-Kante hebt die Lesezeichen ab */
  --ink:        #eaeceb;
  --ink-soft:   #a7b1b1;
  --ink-faint:  #798385;
  --line:       #263036;
  --line-soft:  #1c2429;
  --accent:     #55a7b1;   /* Teal etwas heller auf Dunkel */
  --accent-deep:#3f8790;
  --gold:       #c8a24a;
  --accent-ink: #06181c;
  --shadow:     0 22px 55px -18px rgba(0, 0, 0, 0.6);
  --shadow-sm:  0 8px 22px -8px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 520px at 82% -10%, color-mix(in srgb, var(--accent) 12%, var(--paper)) 0%, transparent 62%),
    var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px clamp(16px, 4vw, 32px);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 52px; height: 52px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.small { width: 30px; height: 30px; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .01em; }

/* Hell/Dunkel-Umschalter */
.top-right { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; font-size: 16px; line-height: 1; transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .ico-sun, .theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }        /* dunkel → Sonne (klick = hell) */
:root:not([data-theme="dark"]) .theme-toggle .ico-moon { display: block; } /* hell → Mond (klick = dunkel) */

/* Stepper – dient zugleich als Navigation */
.stepper { display: flex; align-items: center; gap: 4px; }
.step { display: flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 12.5px; font-weight: 500; user-select: none; border-radius: 100px; padding: 4px 4px; transition: color .15s; }
.step i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all .3s ease; flex: 0 0 auto; }
.step em { font-style: normal; display: none; }
.step:not(:last-child)::after { content: ""; width: 16px; height: 1.5px; background: var(--line); margin-left: 4px; }
.step.done i { background: var(--gold); }
.step.current i { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.step.current { color: var(--ink); }
.step.current em { display: inline; }
/* anklickbare (bereits erreichte) Schritte */
.step.nav { cursor: pointer; }
.step.nav:hover { color: var(--accent); }
.step.nav:hover i { background: var(--accent); }
@media (min-width: 720px) {
  .step { padding: 4px 8px; }
  .step em { display: inline; }         /* auf dem Desktop alle Beschriftungen zeigen */
}

/* ---------- Layout ---------- */
main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 48px; }
.view { display: none; }
.view.active { display: block; animation: rise .4s cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.display {
  font-family: var(--display); font-weight: 600; line-height: 1.04;
  font-size: clamp(32px, 7vw, 56px); letter-spacing: -0.015em; margin: 0 0 14px;
  color: var(--ink);
}
.hero .display { color: var(--accent); }   /* Teal-Hero wie die GVG-Startseite */
.lead { color: var(--ink-soft); font-size: clamp(15px, 2.4vw, 18px); max-width: 52ch; margin: 0; }

/* ---------- Landing / Willkommen ---------- */
.landing {
  max-width: 860px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(16px, 4vw, 46px) 0 clamp(30px, 5vw, 58px);
}
.landing .display { margin: 4px 0 0; }
.landing-lead { max-width: 58ch; margin: 12px auto 0; }
.brand-intro { max-width: 56ch; margin: 12px auto 2px; font-size: clamp(13px, 1.9vw, 14.5px); line-height: 1.55; color: var(--ink-soft); }
.brand-intro strong { font-weight: 700; }
.brand-intro .v-gg { color: #f3c217; }   /* G&G – gold/gelb */
.brand-intro .v-uev { color: #e5443c; }  /* Ueberreuter Berlin – rot */
.brand-intro .v-cuv { color: #2f97d4; }  /* Carl Ueberreuter – blau */
:root[data-theme="light"] .brand-intro .v-gg { color: #b8860b; }  /* dunkleres Gold für hellen Hintergrund */

/* Marken-Lockup: Logo mittig über dem Namen (wiederverwendbare Einheit) */
.brand-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.brand-lockup-logo { width: clamp(78px, 11vw, 116px); height: auto; display: block; }
.brand-lockup-name { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.6vw, 25px); letter-spacing: .005em; color: var(--accent); line-height: 1; }

/* Storyboard: Vorlage → Foto + Vorname → Fertig */
.demo-storyboard { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 18px); flex-wrap: nowrap; margin: 12px 0 6px; }
.demo-panel { display: flex; flex-direction: column; align-items: center; gap: 9px; opacity: .42; filter: grayscale(.7) brightness(.78); transition: opacity .5s, transform .5s, filter .5s; }
.demo-panel.active { opacity: 1; filter: grayscale(0) brightness(1.05); transform: translateY(-5px) scale(1.07); }
.demo-panel.active .demo-mini, .demo-panel.active .demo-photo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 12px 30px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.demo-mini { border-radius: 11px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); line-height: 0; }
.demo-mini canvas { display: block; width: clamp(76px, 10.5vw, 104px); height: auto; }
.demo-ingredients { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; }
.demo-photo { width: clamp(70px, 9.5vw, 94px); height: auto; border-radius: 12px; box-shadow: var(--shadow); display: block; }
.demo-vorname { font-family: "Baloo 2", var(--display); font-weight: 700; font-size: clamp(16px, 2.3vw, 21px); color: var(--accent); line-height: 1; }
.demo-arrow { font-size: clamp(20px, 3vw, 28px); color: var(--ink-faint); font-weight: 400; flex: 0 0 auto; }
.demo-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: color .45s; max-width: 12ch; }
.demo-panel.active .demo-label { color: var(--accent); }
.demo-caption { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); margin: 26px 0 0; text-align: center; }

.landing-cta { width: auto; margin-top: 26px; padding: 15px 32px; font-size: 17px; }
.landing-cta .arr { font-size: 18px; margin-left: 4px; transition: transform .2s; }
.landing-cta:hover .arr { transform: translateY(3px); }

@media (max-width: 560px) {
  .demo-storyboard { flex-direction: column; gap: 4px; }
  .demo-arrow { transform: rotate(90deg); }
  .demo-label { max-width: none; }
  .landing-cta { width: 100%; }
}

/* ---------- Hero (Start) ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(30px, 5vw, 64px) 0 clamp(30px, 5vw, 56px);
}
.hero-copy { max-width: 42ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 18px;
  padding: 6px 13px; border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.hero .lead { max-width: 44ch; margin-top: 2px; }
.hero-cta { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.hero-btn { width: auto; margin-top: 0; padding: 15px 26px; text-decoration: none; }
.hero-btn .arr { font-size: 18px; transition: transform .2s; }
.hero-btn:hover .arr { transform: translateY(3px); }
.hero-note { font-size: 13px; color: var(--ink-faint); max-width: 18ch; line-height: 1.4; }

/* Gefächerte Lesezeichen-Präsentation */
.hero-art { display: flex; justify-content: center; align-items: center; }
.hero-stack {
  position: relative; width: min(340px, 90%); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.hero-stack .hs {
  position: absolute; width: 46%; aspect-ratio: 1 / 3; object-fit: cover;
  border-radius: 10px; background: var(--paper-2);
  box-shadow: 0 26px 50px -20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);
  border: 4px solid var(--frame);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero-stack .hs-1 { transform: rotate(-4deg) translateY(-2%); z-index: 3; }
.hero-stack .hs-2 { transform: rotate(9deg) translate(52%, 4%); z-index: 2; }
.hero-stack .hs-3 { transform: rotate(-17deg) translate(-52%, 6%); z-index: 1; }
.hero-stack:hover .hs-1 { transform: rotate(-3deg) translateY(-5%); }
.hero-stack:hover .hs-2 { transform: rotate(11deg) translate(56%, 2%); }
.hero-stack:hover .hs-3 { transform: rotate(-19deg) translate(-56%, 4%); }

.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin: 8px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.section-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3.6vw, 28px); margin: 0; }
.section-sub { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 0; }
.hint-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--accent);
  padding: 8px 15px; border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.hint-line .hint-ico { font-size: 15px; line-height: 1; animation: hintbob 1.5s ease-in-out infinite; }
@keyframes hintbob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .hint-line .hint-ico { animation: none; } }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
  .hero-art { order: -1; margin-bottom: 18px; }
  .hero-stack { width: min(300px, 84%); aspect-ratio: 3 / 3.5; }
  .hero-stack .hs { width: 36%; border-width: 3px; }
  .hero-stack .hs-1 { transform: rotate(-4deg) translateY(-1%); }
  .hero-stack .hs-2 { transform: rotate(9deg) translate(46%, 4%); }
  .hero-stack .hs-3 { transform: rotate(-15deg) translate(-46%, 6%); }
  .hero-copy { max-width: none; }
  .hero-cta { gap: 12px; }
  .hero-btn { width: 100%; }
}

/* Vorlagen-Kacheln – nach Verlag gruppiert */
/* Abstand zwischen den Verlagsblöcken bewusst knapp (Georg 05.09.: zwischen dem
   Ende der Kacheln und dem nächsten Verlagsnamen Freiraum rausnehmen). Die
   farbige Kopfzeile trennt ohnehin deutlich genug. */
.template-groups { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); }
.verlag-group { display: block; }
.verlag-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.verlag-head .verlag-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--verlag, var(--accent)); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--verlag, var(--accent)) 18%, transparent); }
.verlag-head .verlag-name { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 2.4vw, 18px); color: var(--ink); }
.verlag-head .verlag-count { font-size: 12.5px; color: var(--ink-faint); }
/* Kachelbreite bewusst klein (Georg 05.09.: "Ich will es nicht groesser haben").
   Sehr lange Titel werden dadurch nach der 4. Zeile abgeschnitten - das ist so
   akzeptiert; Breite geht vor Vollstaendigkeit. */
.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: clamp(7px, 1.2vw, 11px); align-items: start; }
.tpl-card {
  position: relative; border: 1.2px solid var(--verlag, var(--line)); border-radius: 9px;
  overflow: hidden; background: var(--surface); cursor: pointer; text-align: left; padding: 0;
  font-family: inherit; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
.tpl-card:hover, .tpl-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--verlag, var(--accent)) 26%, transparent); border-color: var(--verlag, color-mix(in srgb, var(--accent) 30%, var(--line))); outline: none; }
.tpl-card .cover-wrap { position: relative; padding: 5px 5px 0; }
.tpl-card .cover { aspect-ratio: 1/3; width: 100%; object-fit: cover; display: block; border-radius: 6px; background: var(--paper-2); box-shadow: 0 4px 11px -8px rgba(0,0,0,.4); }
.tpl-card .meta { padding: 5px 6px 7px; display: block; }
/* Textblock IMMER exakt 4 Zeilen hoch (4 x 12px) -> alle Kacheln stehen buendig,
   egal wie lang der Titel ist. Vier statt drei Zeilen zeigen spuerbar mehr vom
   Titel; vier sind laut Georg (05.09.) das Maximum. */
.tpl-card .meta-txt { min-width: 0; height: 48px; overflow: hidden; }
/* Titel darf alle 4 Zeilen nutzen. */
.tpl-card .t-title {
  font-family: var(--display); font-weight: 600; font-size: 10px; line-height: 12px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden; overflow-wrap: anywhere;
}
.tpl-card .t-series { display: none; }
.tpl-card .go { display: none; }
.loading { color: var(--ink-faint); grid-column: 1/-1; padding: 40px 0; text-align: center; }

/* ---------- Editor / Review ---------- */
.editor-layout, .review-layout { display: grid; grid-template-columns: 1fr; gap: 20px; padding: clamp(18px, 4vw, 30px) 0; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bookmark-frame { position: relative; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bookmark-canvas {
  aspect-ratio: 1/3; width: min(58vw, 232px); height: auto; display: block;
  border-radius: 8px; background: var(--paper-2); touch-action: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.bookmark-canvas.small { width: min(52vw, 200px); }
.stage-cap { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
/* ISBN auf den Gestaltungsseiten (Gestalten / Vorschau / Fertig).
   Bewusst zart: sie soll auffindbar sein, wenn jemand das Buch nachbestellen
   will, aber die Gestaltung nicht stoeren. Hier ist Platz fuer die
   VOLLSTAENDIGE ISBN mit Bindestrichen - anders als auf den Motiv-Kacheln. */
.tpl-isbn {
  margin: 4px 0 12px; font-size: 11px; line-height: 1.35; font-weight: 400;
  letter-spacing: .04em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.tpl-isbn[hidden] { display: none; }
.drag-hint {
  position: absolute; left: 50%; top: 68%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,14,16,.82); color: #fff; font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); backdrop-filter: blur(3px);
  pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap;
}
.drag-hint .dh-ico { font-size: 15px; line-height: 1; animation: draghint 1.4s ease-in-out infinite; }
@keyframes draghint { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .drag-hint .dh-ico { animation: none; } }
.bookmark-frame.has-photo .drag-hint { opacity: 1; }
.bookmark-frame.dragging .drag-hint { opacity: 0; }

.controls { width: 100%; max-width: 460px; margin: 0 auto; }
.controls h2 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 4vw, 28px); margin: 2px 0 4px; }
.control-intro { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; }

.field { display: block; margin: 16px 0; }
.field-label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.field-label .num, .num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.num.light { background: rgba(255,255,255,.25); }

input[type="text"], input[type="email"] {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 16px; font-family: inherit; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.counter { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 7px; }
.err { color: #b3261e; font-size: 13px; display: block; margin-top: 7px; min-height: 1px; }

/* Dropzone */
.dropzone {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px; border: 1.8px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  color: var(--ink); cursor: pointer; transition: all .18s;
}
.dropzone:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dz-icon { font-size: 26px; color: var(--accent); line-height: 1; }
.dz-text { font-weight: 600; font-size: 15px; }
.dz-sub { font-size: 12px; color: var(--ink-faint); }
.bookmark-frame.has-photo ~ * .dropzone, .field.done .dropzone { }

.checkbox { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0; font-size: 14px; cursor: pointer; color: var(--ink-soft); }
.checkbox input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.fineprint { font-size: 11px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.5; }
.photo-privacy { display: block; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.quality-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; text-align: center; }
.quality-note span { color: var(--ink-faint); }

/* ---------- Buttons ---------- */
button { cursor: pointer; font-family: inherit; }
.btn-primary {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 18px; border: none; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--accent), var(--accent-deep));
  color: var(--accent-ink); font-weight: 600; font-size: 16px; margin-top: 12px;
  box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .2s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-outline {
  width: 100%; padding: 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius-sm); background: var(--surface); color: var(--accent); font-weight: 600; font-size: 15px; transition: all .15s;
}
.btn-outline:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: var(--accent); }
.ghost { background: none; border: none; color: var(--ink-soft); font-size: 14px; padding: 6px 0; transition: color .15s; }
.ghost.back { display: inline-block; margin-bottom: 10px; }
.ghost:hover { color: var(--accent); }
.ghost.restart { margin-top: 22px; font-weight: 500; }

/* ---------- Danke ---------- */
.thanks-wrap { max-width: 780px; margin: 0 auto; text-align: center; padding: clamp(26px, 6vw, 50px) 0; }
.thanks-main { display: flex; gap: clamp(18px, 4vw, 40px); align-items: center; justify-content: center; margin: 24px 0 10px; flex-wrap: wrap; }
.thanks-main .thumb { margin: 0; flex: 0 0 auto; }
.thanks-cards { display: flex; flex-direction: column; gap: 14px; flex: 1 1 320px; max-width: 420px; text-align: left; }
.thanks-cards .print-tip, .thanks-cards .publisher-cta { margin: 0; max-width: none; width: 100%; align-items: flex-start; box-sizing: border-box; }
.thanks-cards .publisher-note { text-align: left; }
.check {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; font-size: 32px;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--accent-ink);
  box-shadow: var(--shadow); animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks-wrap .lead { margin: 0 auto; }
.thumb { margin: 26px 0; display: flex; justify-content: center; }
.download-row { display: flex; flex-direction: column; gap: 11px; max-width: 360px; margin: 6px auto 0; }
.share-row { display: flex; gap: 14px; justify-content: center; align-items: center; margin: 22px 0 6px; flex-wrap: wrap; }
.btn-share { padding: 11px 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--ink); transition: all .15s; }
.btn-share:hover { border-color: var(--accent); color: var(--accent); }
.btn-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-link:hover { text-decoration: underline; }
.publisher-cta { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 18px auto 0; padding: 16px 20px; max-width: 400px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.publisher-note { max-width: 42ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.publisher-cta .btn-link { font-size: 15px; }
.print-tip { display: flex; align-items: flex-start; gap: 12px; margin: 14px auto 0; padding: 14px 18px; max-width: 400px; text-align: left; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius-sm); background: var(--surface); }
.print-shops { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.print-shops li { display: flex; flex-direction: column; gap: 1px; }
.print-shop-hinweis { font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }
.print-tip-ico { font-size: 22px; line-height: 1.3; flex: 0 0 auto; }
.print-tip-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.print-tip-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 60%, var(--paper)); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 20px clamp(16px, 4vw, 32px); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 14px; }
.foot-note { font-size: 12px; color: var(--ink-faint); }
.foot-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.foot-links a { color: var(--ink-faint); text-decoration: none; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal { max-width: 760px; padding-bottom: 56px; }
.legal h1 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4.6vw, 34px); color: var(--accent); margin: 24px 0 10px; }
.legal h2 { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 2.6vw, 20px); color: var(--ink); margin: 30px 0 9px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.legal p, .legal li { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 11px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent); }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal .legal-intro { font-size: 15.5px; color: var(--ink-soft); }
.legal .adresse { line-height: 1.75; }
.legal .legal-stand { margin-top: 30px; font-size: 12.5px; color: var(--ink-faint); }
.legal-highlight {
  margin: 18px 0 6px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.legal-highlight p { margin: 0; color: var(--ink); }
.legal-back { display: inline-block; margin: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.legal-back:hover { text-decoration: underline; }

/* ---------- Busy ---------- */
.busy { position: fixed; inset: 0; background: rgba(30,22,14,.42); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.busy-msg { margin: 0; color: #fff; font-size: 15px; font-weight: 600; text-align: center; max-width: 20ch; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.busy-msg:empty { display: none; }
.spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Schmale Handys: Marke, Schrittanzeige und Theme-Knopf passen sonst nicht in
   eine Zeile - die Kopfzeile wurde breiter als der Bildschirm und die GANZE
   Seite liess sich seitlich schieben (gemessen 467px bei 375px Bildschirm).
   Die Marke darf jetzt schrumpfen, die Verbindungsstriche der Schrittanzeige
   werden kuerzer; unter 480px traegt die Kopfzeile nur noch das Logo - der
   Schriftzug steht dort ohnehin gross auf der Startseite und im Fuss. */
@media (max-width: 560px) {
  .topbar-inner { gap: 10px; }
  .brand { min-width: 0; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-right { flex: 0 0 auto; gap: 8px; }
  .step { padding: 4px 2px; }
  .step:not(:last-child)::after { width: 8px; margin-left: 2px; }
}
@media (max-width: 480px) { .brand-name { display: none; } }

/* ---------- Desktop ---------- */
@media (min-width: 560px) { .step em { display: inline; } }
@media (min-width: 760px) {
  .editor-layout, .review-layout { grid-template-columns: 300px 1fr; gap: 48px; align-items: start; padding: 40px 0; }
  .stage { position: sticky; top: 92px; }
  .bookmark-canvas { width: 260px; }
  .controls { margin: 0; }
  .hero { padding-top: clamp(40px, 7vw, 72px); }
}