/* ─────────────────────────────────────────────────────────────────────
   meine-kinderfotos.de — Design System
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Brand colors */
  --mint: #bddfd2;
  --mint-deep: #9bcdbd;
  --mint-pale: #d6ede3;
  --mint-bg: #c5e5d8;
  --lavender: #9b7bb8;
  --lavender-soft: #b89dd1;
  --lavender-deep: #7d5a9c;
  --lavender-pale: #e8defa;
  --rose: #f4c2c2;
  --rose-deep: #e89a9a;
  --gold: #e8b956;
  --gold-soft: #f0cd7e;
  --cream: #faf7f2;
  --cream-deep: #f1ece2;
  --ink: #3a3a3a;
  --ink-soft: #6a6a6a;
  --ink-faint: #9e9e9e;
  --success: #a8d5ba;
  --warn: #f5d982;
  --error: #d88b8b;

  /* Radii / shadows */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-card: 0 2px 6px rgba(0,0,0,.06), 0 8px 24px rgba(58,46,80,.08);
  --shadow-polaroid: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(58,46,80,.12);
  --shadow-polaroid-hover: 0 2px 4px rgba(0,0,0,.06), 0 14px 32px rgba(58,46,80,.18);

  /* Type */
  --font-script: "Pacifico", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--mint);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ─── Background pattern ─────────────────────────────────────────────── */
/* background-size MUSS dem Kachelmass der pattern.svg entsprechen (768) — sonst
   skalieren die Figuren mit. Die Kachel ist bewusst gross: bei 384 kehrte dieselbe
   Anordnung auf einem Laptop rund 3,5x wieder und das Muster wirkte gereiht.
   Dieselbe Datei liegt im Hub-Repo — Aenderungen dort mitziehen. */
.mint-bg {
  background-color: var(--mint);
  background-image: url("pattern.svg");
  background-size: 768px 768px;
  background-repeat: repeat;
}

/* ─── Script titles ──────────────────────────────────────────────────── */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--lavender);
  letter-spacing: .01em;
  line-height: 1.05;
}
.script-shadow {
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(123,93,156,.18);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--lavender);
  color: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(123,93,156,.30);
}
.btn-primary:hover { background: var(--lavender-deep); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 22px rgba(123,93,156,.36); }

.btn-secondary {
  background: white;
  color: var(--lavender-deep);
  border: 1.5px solid var(--lavender-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn-secondary:hover { background: var(--lavender-pale); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 10px 16px;
}
.btn-ghost:hover { background: rgba(255,255,255,.5); }

.btn-passkey {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);
  color: white;
  padding: 16px 22px;
  font-size: 17px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(123,93,156,.35);
}
.btn-passkey:hover { box-shadow: 0 6px 22px rgba(123,93,156,.45); }

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-fab {
  position: fixed;
  /* app.js hebt den Knopf am Seitenende an, damit er höchstens zur Hälfte in den
     Footer eintaucht. Über bottom, nicht transform — das gehört dem :hover. */
  bottom: var(--fab-bottom, 28px);
  right: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lavender);
  color: white;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(123,93,156,.45), 0 2px 4px rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  transition: transform .18s ease;
}
.btn-fab:hover { transform: scale(1.06) rotate(8deg); }

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.card-cream {
  background: var(--cream);
}

/* ─── Pills / filter chips ───────────────────────────────────────────── */
.pill-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}
.pill-row::-webkit-scrollbar { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 600;
  background: rgba(255,255,255,.55);
  color: var(--ink-soft);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.pill:hover { background: white; }
.pill.active {
  background: var(--lavender);
  color: white;
  box-shadow: 0 2px 8px rgba(123,93,156,.28);
}
.pill.favorites {
  background: rgba(255,255,255,.6);
  color: var(--gold);
}
.pill.favorites.active {
  background: var(--gold);
  color: white;
}

/* ─── Polaroid photo card ────────────────────────────────────────────── */
.polaroid {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 14px 14px 12px 14px;
  box-shadow: var(--shadow-polaroid);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.polaroid:hover {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow: var(--shadow-polaroid-hover);
}
.polaroid-img {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.polaroid-img img,
.polaroid-img .photo-placeholder { width: 100%; height: 100%; display: block; }
.polaroid-img img { object-fit: cover; }   /* nie stauchen; Box = Bildproportion → kein Beschnitt */

.photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,0,0,.5);
  text-align: center;
  padding: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Date stamp on polaroid — printed directly on the photo */
.polaroid .date-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  background: rgba(255,255,255,.82);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color: #333333;
  letter-spacing: .06em;
  text-shadow: none;
  z-index: 2;
  pointer-events: none;
}

/* Star toggle on polaroid */
.polaroid .star-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 32px;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform .18s ease, background .18s ease;
}
.polaroid .star-badge:hover { transform: scale(1.1); background: white; }
/* Auf dem Tablet gibt es kein Mouseover — der Druck ist dort das einzige Feedback. */
.polaroid .star-badge:active { transform: scale(.94); }
.polaroid .star-badge.starred { background: white; }
.polaroid .star-badge svg { width: 18px; height: 18px; fill: none; }
/* Füllung per CSS an .starred koppeln (überstimmt das Inline-fill) → sofortiges
   Feedback beim JS-Toggle, ohne Reload. */
.polaroid .star-badge.starred svg { fill: var(--gold); }

/* Mini avatars on polaroid */
.polaroid .mini-avatars {
  position: absolute;
  bottom: 80px;
  right: 22px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

/* Parent toolbar */
.polaroid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 0 4px;
  color: var(--lavender);
}
.polaroid-toolbar .tool-btn {
  background: transparent;
  border: 0;
  color: var(--lavender-soft);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  border-radius: 6px;
}
.polaroid-toolbar .tool-btn:hover { background: var(--lavender-pale); color: var(--lavender-deep); }
/* Kalender-Schnellzugriff: transparentes Datumsfeld liegt exakt über dem Icon,
   damit der native Datepicker (showPicker) genau an dieser Stelle aufklappt. */
.polaroid-toolbar .tool-date { position: relative; }
.tool-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.tool-date-input::-webkit-calendar-picker-indicator { display: none; }

.polaroid-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--lavender);
}
/* ─── Herz am Foto ───────────────────────────────────────────────────────────
   Sitzt in der Polaroid-Fußzeile (wie in der Design-Übergabe 005/008), NICHT als
   Overlay im Bild: dort sind alle Ecken belegt (Stern oben links, Datum oben
   rechts, Auswahl-Kreis im Auswahlmodus). Für jede Rolle sichtbar — das Herz ist
   die einzige Geste, die auch „Nur ansehen" offensteht. */
.reaction-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 6px 4px;
}
/* Im Foto-Detail steht das Herz links unter dem Bild, nicht rechts in der Fußzeile. */
.reaction-row--left { justify-content: flex-start; padding-left: 0; }
.heart-form { margin: 0; }
.heart-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.heart-btn svg { display: block; fill: none; transition: fill .15s ease; }
.heart-btn:hover { color: var(--rose-deep); background: rgba(232, 154, 154, .12); }
/* Kein Mouseover auf dem Tablet — der Druck ist dort das einzige Feedback. */
.heart-btn:active { transform: scale(.94); }
/* Füllung an .is-on koppeln (überstimmt das fill="none" im Inline-SVG) → das JS
   muss nur die Klasse kippen, kein Icon neu bauen. Wie beim Favoriten-Stern. */
.heart-btn.is-on { color: var(--rose-deep); }
.heart-btn.is-on svg { fill: var(--rose-deep); }
.heart-count:empty { display: none; }
/* Im Auswahlmodus übernimmt der Check-Kreis — das Herz würde nur ablenken
   (app.js sperrt den Klick zusätzlich, das hier ist die sichtbare Hälfte). */
.photo-grid.selecting .reaction-row { visibility: hidden; }

/* ─── Kommentare unter dem Foto ──────────────────────────────────────────
   Flach: Autor + Text, chronologisch (älteste oben). Liegt in der rotierten
   Polaroid-Karte (wie Caption/Kind-Pillen) und erbt die leichte Neigung — bewusst.
   Eingabefeld rund wie in der Design-Übergabe (Screen 008). */
.photo-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 8px 8px;
}
.photo-comments__head {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
}
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; align-items: flex-start; gap: 8px; }
.comment .avatar.sm { flex: 0 0 auto; margin-top: 1px; }
.comment__main { flex: 1 1 auto; min-width: 0; }
.comment__head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.comment__author { font-size: 13px; font-weight: 700; color: var(--ink); }
.comment__time { font-size: 11.5px; color: var(--ink-faint); }
.comment__text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  word-break: break-word;
}
.comment__del-form { margin: 0; flex: 0 0 auto; }
.comment__del {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 8px;
  opacity: .5;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.comment__del:hover { opacity: 1; color: var(--rose-deep); background: rgba(232, 154, 154, .12); }
.comment-empty { font-size: 12.5px; font-style: italic; color: var(--ink-faint); }
.comment-error { font-size: 12.5px; color: var(--error); }
.comment-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.comment-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(0, 0, 0, .08);
  background: var(--cream);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-input:focus { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(155, 124, 186, .18); }
.comment-input.is-error { border-color: var(--error); }
.comment-send { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
/* Im Auswahlmodus übernimmt der Check-Kreis; Kommentare würden nur ablenken. */
.photo-grid.selecting .photo-comments { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .comment__del, .comment-input { transition: none; }
}

/* ─── Folder tile ────────────────────────────────────────────────────── */
.folder-wrap {
  position: relative;
  cursor: pointer;
  min-height: 160px;
  /* width+max-width statt nur max-width: justify-items:center im Raster wuerde die
     Kachel sonst auf ihre Inhaltsbreite schrumpfen. */
  width: 100%;
  max-width: 183px;
  transform: rotate(var(--rot, 0deg));
  transition: transform .22s ease;
}
.folder-wrap:hover {
  transform: rotate(var(--rot, 0deg)) translateY(-4px);
}
.folder-wrap:hover .folder {
  box-shadow:
    0 6px 12px rgba(58,46,80,.14),
    0 24px 44px rgba(58,46,80,.24);
}

/* Each paper is a separate layered card behind the folder */
.folder-paper {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border-radius: 0 12px 12px 12px;
  border: 1px solid rgba(123,93,156,.18);
  box-shadow: 0 3px 8px rgba(58,46,80,.12);
  pointer-events: none;
  transform-origin: 50% 100%;   /* fächern von der Unterkante wie ein Papierstapel */
  transition: transform .24s ease;
  /* Ruhelage je Blatt — Werte kommen pro Ordner leicht zufällig aus dem Markup */
  transform: translate(var(--rx, 1px), var(--ry, 6px)) rotate(var(--rr, 1deg));
}
/* Mouse-Over: Blätter dezent auffächern (Fächer-Werte ebenfalls aus dem Markup) */
.folder-wrap:hover .folder-paper {
  transform: translate(var(--hx, 2px), var(--hy, 5px)) rotate(var(--hr, 2deg));
}

.folder {
  position: relative;
  z-index: 10;
  background: var(--lavender);
  color: white;
  border-radius: 0 14px 14px 14px;
  padding: 32px 16px 18px 16px;
  box-shadow:
    0 2px 6px rgba(58,46,80,.10),
    0 14px 28px rgba(58,46,80,.18);
  transition: box-shadow .22s ease;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
}
.folder::before {
  /* Manila-style tab — same flat violet as folder body */
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 46%;
  height: 14px;
  background: var(--lavender);
  border-radius: 10px 12px 0 0;
  box-shadow: 0 -1px 0 rgba(0,0,0,.04);
}
.folder::after {
  /* Punched binder hole — sits fully within the tab */
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow:
    inset 0 1.5px 2px rgba(0,0,0,.45),
    inset 0 -1px 1px rgba(255,255,255,.35),
    0 1px 0 rgba(255,255,255,.25);
}
.folder .f-month {
  font-family: var(--font-script);
  font-size: 30px;
  font-weight: 700;
  color: white;
  line-height: 1;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.folder .f-year {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  margin-top: 11px;
}
.folder .f-count {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  background: rgba(255,255,255,.22);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  border: 1px solid rgba(255,255,255,.15);
}
.folder .f-count svg { display: block; }
.folder .f-sub {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
}

/* ─── Avatars ────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lavender-pale);
  color: var(--lavender-deep);
  font-weight: 700;
  font-size: 14px;
  border: 2px solid white;
  flex-shrink: 0;
  overflow: hidden;                 /* Profilbild rund beschneiden */
}
.avatar.sm { width: 24px; height: 24px; font-size: 11px; border-width: 1.5px; }
.avatar.lg { width: 48px; height: 48px; font-size: 18px; }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; }
/* Profilbild statt Buchstabe (Kind bearbeiten / Kinder-Liste). */
.avatar.has-photo { background: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* [hidden] verlässlich durchsetzen — .btn/.field setzen display und würden die
   UA-Regel sonst überstimmen (Profilbild-Buttons/Swatches werden per hidden getoggelt). */
[hidden] { display: none !important; }

/* ─── App chrome ─────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(189, 223, 210, .92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.4);
}
.app-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.app-header .left { justify-self: start; min-width: 0; overflow: visible; display: flex; align-items: center; gap: 14px; }
.app-header .left .album-family { min-width: 0; overflow: visible; text-overflow: clip; max-width: 100%; }
.app-header .center { justify-self: center; }
.app-header .right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.app-title { font-size: 30px; }

/* ─── Section header (script + dotted rule) ──────────────────────────── */
.section-header {
  text-align: center;
  margin: 56px 0 28px;
}
.section-header .h {
  font-family: var(--font-script);
  font-size: 44px;
  color: var(--lavender);
}
/* Seitentitel als semantisches Heading, optisch identisch zu .h.
   font-weight:400, weil Pacifico einweightig ist (sonst Faux-Bold). */
.section-header h1.h { margin: 0; font-weight: 400; }
.dotted-rule {
  border: 0;
  border-top: 2px dotted rgba(123,93,156,.4);
  margin: 4px 0 32px;
}

/* ─── Form fields ────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .help {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.45;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  background: white;
  border: 1.5px solid rgba(123,93,156,.18);
  border-radius: var(--r-sm);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--lavender);
  box-shadow: 0 0 0 4px rgba(155,123,184,.15);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.checkbox input { margin-top: 1px; }

/* ─── Custom-Checkboxen — 24×24, eigenes Design (keine Browser-Standards) ─── */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--lavender-soft);
  border-radius: 7px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--lavender); }
input[type="checkbox"]:checked {
  background-color: var(--lavender);
  border-color: var(--lavender);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(155,123,184,.30); }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Kind-Tagging-Pills heben sich hervor, wenn ihre Checkbox aktiv ist */
.pill:has(input[type="checkbox"]:checked) {
  background: var(--lavender-pale);
  border-color: var(--lavender);
  color: var(--lavender-deep);
}

/* Laufzeit-Pills (Fest anlegen) tragen ein Radio — beim Klick wie .pill.active */
.pill:has(input[type="radio"]:checked) {
  background: var(--lavender);
  color: white;
  box-shadow: 0 2px 8px rgba(123,93,156,.28);
}

/* ─── Pfeil-Buttons: eigenes SVG, länger, bei Hover nach rechts animiert ─── */
.btn .btn-arrow {
  width: 34px;
  height: 20px;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.btn:hover .btn-arrow,
.btn:focus-visible .btn-arrow { transform: translateX(5px); }
/* Zurück-Button: Pfeil links, wandert bei Hover nach links. */
.btn-back .btn-arrow-back {
  width: 26px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.btn-back:hover .btn-arrow-back,
.btn-back:focus-visible .btn-arrow-back { transform: translateX(-5px); }

/* ─── Divider ────────────────────────────────────────────────────────── */
.divider-or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 22px 0;
}
.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(58,58,58,.12);
}

/* ─── Banner / inline notice ─────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--lavender-pale);
  color: var(--lavender-deep);
  border-radius: var(--r-md);
  font-size: 15px;
  border-left: 4px solid var(--lavender);
}
.banner.gold {
  background: #fdf4d8;
  color: #8b6d24;
  border-left-color: var(--gold);
}
/* Erfolg trägt die Farbe in der Kante, nicht in der Fläche — Blassgrün auf Blassgrün
   liest sich schlecht (gleiche Regel im Hub). Anders als dort steht dieser Banner im
   Album immer INNERHALB einer weißen Karte: statt des Kartenschattens hält ihn ein
   grüner Haarstrich sichtbar, sonst verschwände das weiße Feld im weißen Untergrund. */
.banner.success {
  background: white;
  color: var(--ink);
  border: 1px solid rgba(126, 178, 146, .45);
  border-left: 4px solid var(--success);
}

/* ─── Speicher-Anzeige (Konto-Karte + „fast voll"-Banner) ──────────────── */
.storage-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--cream-deep);
  overflow: hidden;
}
.storage-bar > span {           /* Füllbreite als Inline-style (width:%) — CSP erlaubt */
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--lavender);
  transition: width .3s ease;
}
.storage-bar.warn > span { background: var(--gold); }
.storage-bar.full > span { background: var(--rose-deep); }
@media (prefers-reduced-motion: reduce) {
  .storage-bar > span { transition: none; }
}

/* ─── Trust strip ────────────────────────────────────────────────────── */
.trust-strip {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.trust-strip svg { color: var(--success); }

/* ─── Modal / overlay ────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 60, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: backdrop-in .2s ease;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: white;
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  /* Der Backdrop blendet ein (backdrop-in, oben) — das Fenster sprang bisher hart rein. */
  animation: float-in .22s cubic-bezier(.16, .84, .44, 1) both;
}
.modal-wide { max-width: 880px; }
.modal-xl { max-width: 1200px; padding: 0; }

.modal h3 { font-size: 24px; margin: 0 0 8px; color: var(--ink); font-weight: 800; }
.modal p { color: var(--ink-soft); margin: 0 0 18px; }

/* ─── Profilbild-Cropper (Kind bearbeiten) ───────────────────────────── */
/* Bühne + Canvas-Pixelmaße setzt app.js (DPR-scharf); hier nur Optik. */
.cropper-stage {
  position: relative; margin: 4px auto 18px; max-width: 100%;
  border-radius: var(--r-md); overflow: hidden; background: #1c142d;
  touch-action: none;
}
.cropper-canvas { display: block; cursor: grab; touch-action: none; }
.cropper-canvas:active { cursor: grabbing; }
.cropper-ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(28, 20, 45, .62);   /* dimmt außerhalb des Kreises */
  outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px;
  pointer-events: none;
}
.cropper-zoom { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cropper-zoom input[type=range] { flex: 1; accent-color: var(--lavender); }
.cropper-zoom .zoom-ico { color: var(--ink-faint); font-weight: 700; user-select: none; }
.cropper-status { min-height: 1.2em; text-align: center; margin: -6px 0 14px; color: var(--ink-soft); font-size: 14px; }
.cropper-status.error { color: #8a3b3b; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ─── Bottom nav (mobile demo) ───────────────────────────────────────── */
.bottom-nav {
  display: none; /* used in mobile views */
}

/* ─── Reset for canvas in design canvas ──────────────────────────────── */
.screen-frame {
  background: var(--mint);
  background-image: url("pattern.svg");
  /* Doppeltes Kachelmass (768 statt 384) → doppelter Wert, damit die Figuren im
     Design-Canvas so gross bleiben wie zuvor. Siehe .mint-bg oben. */
  background-size: 1440px 1440px;
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* establish containing block for position:fixed */
  width: 100%;
  height: 100%;
}
.screen-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateZ(0);
}

/* ─── Container widths ───────────────────────────────────────────────── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }
.container-sm { max-width: 520px; margin: 0 auto; padding: 0 28px; }

/* ─── Utility ────────────────────────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: 12px; }
.vstack { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.spacer { flex: 1; }

/* nav arrow buttons */
.nav-arrow {
  background: white;
  border: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lavender-deep);
  box-shadow: var(--shadow-card);
}
.nav-arrow:hover { background: var(--lavender-pale); }

/* ─── Onboarding tour ────────────────────────────────────────────────── */
.tour-card {
  position: absolute;
  background: white;
  border-radius: var(--r-md);
  padding: 20px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  z-index: 110;
}
.tour-dots { display: flex; gap: 6px; }
.tour-dots i {
  width: 8px; height: 8px;
  background: rgba(123,93,156,.25);
  border-radius: 50%;
  display: inline-block;
}
.tour-dots i.active { background: var(--lavender); }

/* ─── Animations ─────────────────────────────────────────────────────── */
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.pop { animation: pop .35s ease; }

@keyframes float-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.float-in { animation: float-in .3s ease both; }

/* ─── Toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: white;
  padding: 14px 18px;
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 200;
  border-left: 4px solid var(--success);
  font-size: 15px;
  font-weight: 600;
  animation: float-in .25s ease;
}

/* ─── Responsive — keep desktop-first since reference is desktop ───── */
@media (max-width: 720px) {
  .app-title { font-size: 24px; }
  .container { padding: 0 16px; }
  .app-header-inner { padding: 12px 16px; }
  /* .album-family: font-size steht weiter unten (26.4px) — hier stand ein toter
     21px-Wert, den die spätere Regel bei gleicher Spezifität ohnehin überschrieb. */
}

/* ─── Album-Kopf (Screen 04): Familienname + Filter-Pillen mittig ─────── */
.app-header-inner.is-album { padding-top: 10px; padding-bottom: 10px; }
.app-header .center { min-width: 0; max-width: 100%; }
.album-family {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 32.4px;   /* 20 % größer als zuvor (27px); sitzt jetzt links, wo vorher das Wort-Logo stand */
  line-height: 1;
  color: var(--lavender-deep);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.10);
  white-space: normal;   /* bei langen Familiennamen umbrechen statt abschneiden/scrollen */
  line-height: 1.1;
}

/* ─── Album-Titel: Malfläche für den Text-Clip ───────────────────────────────
   background-clip:text malt nur in die Border-Box (css-backgrounds-4 §3.7). Pacifico
   läuft bei line-height 1.1 aus seiner Zeilenbox heraus; was draußen liegt, bekommt
   keine Füllung und ist mit -webkit-text-fill-color:transparent schlicht weg.
   Das Padding ist deshalb MALFLÄCHE, kein Abstand.
   Gemessen an public/assets/fonts/pacifico-400.woff2 (fontTools, echte Kurven-Bounds
   über alle Glyphen, upem 1000). fsSelection Bit 7 (USE_TYPO_METRICS) ist gesetzt →
   alle Engines rechnen mit sTypo 1.303/-0.453, die Zahlen gelten browserübergreifend:
     Zeilenbox 1.1 × 32.4 = 35.64 px, Inhaltsfläche 1.756 em = 56.89 px
     → half-leading -10.63 px, Grundlinie 31.59 px unter der Boxkante.
     unten   p/G -0.457 em, f -0.316 em → 10.76 px unter der Box   → .34 em nötig
     rechts  letzter Buchstabe F +0.224 em / T +0.206 → 7.26 px    → .23 em nötig
     oben    höchste Glyphe der Datei ist Å (1.192 em) → 7.03 px   → .22 em nötig
             (deutsch Ä/Ü 1.073 em → 3.18 px; F/l/b ragen GAR NICHT raus)
     links   erster Buchstabe ist immer „F" (x0 ≈ 0)               → nichts
   ACHTUNG: head.yMax (1.478) und usWinAscent der Datei sind VERALTET — keine Glyphe
   reicht dort hin. Nicht danach dimensionieren.
   Padding + EXAKT spiegelndes negatives Margin: die Malfläche wächst, die Margin-Box
   bleibt identisch (-.3 + (H+.3+.4) + -.4 = H) → Flex-Zentrierung in .left, Header-
   Höhe und Umbruchpunkt ändern sich um kein Pixel. Die Werte müssen gespiegelt
   bleiben, sonst springt der Titel.
   box-sizing:content-box gehört dazu (Ausnahme vom globalen border-box, ganz oben):
   sonst zöge das Padding von max-width:100% ab und lange Familiennamen brächen früher
   um — genau der Umbruch-Fix, der vorher gebaut wurde.
   em statt px: bei ≤720 px fällt die Schrift auf 26.4 px, das Padding skaliert mit.
   Der :focus-visible-Ring unten braucht nichts: er folgt der Padding-Box und hat damit
   ~2.7 px über / 2.2 px unter der Tinte Luft — vorher schnitt er durch die Unterlängen.
   Genau deshalb oben NICHT großzügiger werden. */
.album-family {
  box-sizing: content-box;
  padding: .3em .26em .4em;
  margin: -.3em -.26em -.4em;
}

/* ─── Album-Titel: radialer Verlauf, Mittelpunkt am Mauszeiger ───────────────
   Der Titel steht im Layout (app/Views/layout/app.php:45) → der Effekt wirkt auf
   ALLEN eingeloggten Seiten. Gewollt: die Kopfleiste ist überall dieselbe.
   app.js (initTitleGradient) setzt --tx/--ty bei jeder Mausbewegung auf die
   Zeigerposition; der Fleck klebt am Cursor und wird bewusst NICHT weich nachgezogen
   (ein Spotlight, der der Maus hinterherhinkt, wirkt kaputt).
   Der Radius --tr ist der Schalter, nicht die Farbe: bei 0 liegen beide Stops im
   Nullpunkt, die Fläche ist durchgehend #7d5a9c → Ruhezustand exakt wie ohne Effekt.
   Beim Hover wächst er auf 4.5em, und NUR er wird animiert — deshalb blüht der Fleck
   sanft auf und verschwindet ebenso, ohne dass die Mausposition mitgezogen wird.
   Dafür braucht es @property: eine Custom Property ist sonst nur ein String und nicht
   interpolierbar. Fällt @property aus (Safari < 16.4), greift der var()-Fallback 0px
   → der Effekt schaltet hart statt weich, bleibt aber vollständig funktionsfähig; der
   Ruhezustand ist in beiden Fällen identisch. Genau dafür ist der Fallback da — ohne
   ihn wäre der Gradient ungültig und der Titel (text-fill-color: transparent!) weg.
   background-size/-position bleiben auf Standard: Der Gradient deckt die Padding-Box
   1:1, damit sind --tx/--ty direkt die Pixel aus getBoundingClientRect().
   #a03a63 ist kein Token, sondern die Verlängerung der Achse --lavender-deep →
   --rose-deep ins Kräftige. Kontrast auf dem Header-Mint (#bddfd2, oben): 4.47 am
   Cursor, 3.84 außen (= Ruhezustand), dazwischen nie unter 3.84 → durchgehend ≥ 3
   (WCAG AA, großer Text). Hellere Marken-Töne sind hier unbrauchbar (--rose-deep 1.54,
   --gold 1.27) — der Titel würde auf dem Mint verschwinden. */
@property --tr {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.album-family {
  background-image: radial-gradient(circle var(--tr, 0px) at var(--tx, 50%) var(--ty, 50%),
    #a03a63 0%,      /* am Mauszeiger: kräftiges Purpur-Rot */
    #7d5a9c 100%);   /* außen: das gewohnte Lavendel */
  transition: --tr .42s cubic-bezier(.16, .84, .44, 1);   /* Kurve wie .toast-flash */
}
/* em, damit der Fleck mit der Schrift skaliert (≤720 px sind es 26.4 px statt 32.4). */
.album-family:hover,
.album-family:focus-visible { --tr: 4.5em; }

/* Der Titel hatte keinen Fokus-Ring — ein Farbfleck ist keiner. */
.album-family:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px rgba(155, 123, 184, .30);
}

/* Nur wo der Text-Clip sicher greift — sonst bleibt der flache color-Wert von oben
   stehen. Ein unsichtbarer Titel auf einem alten Gerät wäre der einzige ernste
   Fehlermodus dieses Effekts.
   text-shadow MUSS hier weg: er wird HINTER der Glyphe gemalt und schiene durch die
   transparente Füllung (Doppelkontur). drop-shadow mit identischen Werten arbeitet
   auf dem gerenderten Ergebnis und folgt der Verlaufs-Glyphe. Kein zusätzlicher
   Antialiasing-Verlust: background-clip:text schaltet Subpixel-AA ohnehin ab. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .album-family {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .10));   /* ersetzt den text-shadow oben */
  }
}

/* Reduced Motion: der Fleck ist sofort da statt aufzublühen. Der Verlauf selbst BLEIBT
   (ein Farbwechsel ist keine Bewegung, und der Link braucht Hover-Feedback) — app.js
   lässt ihn dann aber nicht der Maus folgen, sondern setzt ihn einmal in die Mitte.
   Muster wie .toast-flash. */
@media (prefers-reduced-motion: reduce) {
  .album-family { transition: none; }
}

.album-filters { justify-content: center; max-width: 620px; }

/* Icon-Buttons im Album-Kopf (Familie / Einstellungen / Abmelden) — ohne Füllkreis */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  color: var(--lavender-deep);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.header-icon:hover { color: var(--lavender); transform: translateY(-1px); }
.header-icon svg { display: block; }

/* ─── Konto-Chip + Dropdown (Album-Kopf, global) ─────────────────────── */
.account { position: relative; }
.account-chip { display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; background: rgba(255,255,255,.7);
  border: 1px solid rgba(126,92,163,.15); border-radius: var(--r-pill);
  cursor: pointer; font-family: var(--font-body); color: var(--lavender-deep);
  transition: background .15s ease, transform .12s ease; }
/* Auf dem Tablet gibt es kein Mouseover — der Druck ist dort das einzige Feedback. */
.account-chip:active { transform: translateY(1px); }
.account-chip:hover { background: #fff; }
.account-chip__name { font-size: 15px; font-weight: 700; color: #4f4a63;
  max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__chev { color: #8b86a0; display: block; transition: transform .15s ease; }
.account-chip[aria-expanded="true"] .account-chip__chev { transform: rotate(180deg); }
.account-chip .avatar,
.account-menu__head .avatar { background: linear-gradient(135deg,#9b7cba,#8266a6); color: #fff; border-color: transparent; }

.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 250px; background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(74,58,96,.22); padding: 8px;
  animation: menu-in .14s ease both; }
.account-menu[hidden] { display: none; }
.account-menu__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.account-menu__id { min-width: 0; }
.account-menu__name { font-size: 15px; font-weight: 700; color: #3f3a52;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__mail { font-size: 12.5px; color: #8b86a0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__divider { height: 1px; background: #eee7f3; margin: 2px 6px 6px; }
.account-menu__logout { margin: 0; }
.account-menu__item { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #4f4a63;
  text-decoration: none; cursor: pointer; text-align: left;
  transition: background .12s ease; }   /* wirkt auch auf .is-danger:hover unten */
.account-menu__item:hover { background: #f4f0fa; }
.account-menu__item.is-danger { color: #c2463f; }
.account-menu__item.is-danger:hover { background: #fbeeed; }
.account-menu__item svg { flex-shrink: 0; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ─── Album-Toolbar: Ansichts-Umschalter (bzw. Zurück) links, „Fotos auswählen" rechts ── */
.album-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; min-height: 44px; }
.album-toolbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.album-toolbar .btn-back { text-decoration: none; }

/* „Fotos auswählen" — weiße Pille mit Icon */
.btn-select {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--lavender-deep);
  border: 1.5px solid #e0d6ef; border-radius: var(--r-pill); font-weight: 600;
}
.btn-select svg { display: block; }
.btn-select:hover { background: #faf7fe; border-color: #cdbce8; }

@media (prefers-reduced-motion: reduce) {
  .account-menu, .select-bar { animation: none; }
  .account-chip__chev, .account-menu__item { transition: none; }
}

/* Monats-Ordner als Link (Archiv-Ansicht /album?monat=YYYY-MM) */
a.folder-wrap { display: block; text-decoration: none; color: inherit; }

/* Schlanker grauer App-Footer — nur das Wort-Logo (Rechtstexte nur in der Demo) */
.app-footer {
  flex-shrink: 0;
  background: #ededed;
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.app-footer__logo { display: inline-block; text-decoration: none; }
.app-footer__logo .wordmark { font-size: 22px; }
.app-footer__legal { display: flex; gap: 20px; }
.app-footer__legal a { color: var(--ink-soft); text-decoration: none; font-size: 13.5px; }
.app-footer__legal a:hover { color: var(--lavender-deep); }

@media (max-width: 720px) {
  .album-family { font-size: 26.4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   meinekinderfotos.de — App-Ergänzungen (Self-Hosted Fonts + Layout)
   ═══════════════════════════════════════════════════════════════════════ */

/* Self-hosted fonts (CSP 'self', kein Google-CDN). Latin-Subset. Pacifico hat nur
   einen Schnitt (400); als Bereich 400–700 deklariert, damit font-weight:700
   (Wortmarke) die echten Glyphen trifft statt synthetischer Fettung. */
@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/pacifico-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nunito-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-800.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrainsmono-400.woff2") format("woff2");
}

/* Seiten-Grundgerüst */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; }   /* schiebt den Footer immer ganz nach unten */
/* Wortmarke = Script (Pacifico) in Lavendel, „.de" gleiche Schrift in --ink
   (entspricht der Design-Übergabe: <span class="script">…<span ink>.de</span></span>). */
.wordmark { font-family: var(--font-script); font-weight: 700; color: var(--lavender); line-height: 1; }
.wordmark .tld { color: var(--ink); }

/* Header-Navigation (eingeloggt) */
.app-nav { display: flex; align-items: center; gap: 6px; }
.app-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 15px;
  padding: 8px 14px; border-radius: var(--r-pill);
}
.app-nav a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.app-nav a.active { background: white; color: var(--lavender-deep); }

/* Flash-Banner (oben) — nur noch für Fehler (bleiben stehen) + Demo-Hinweis */
.flash { margin: 18px auto 0; max-width: 1180px; padding: 0 28px; }
/* Fehler-/Warn-Banner gelten global (auch für Inline-Banner in Auth-/Konto-Views),
   nicht nur im Flash — sonst rendern sie im neutralen Lavendel statt Rot/Gold. */
.banner.error { background: #fae3e3; color: #8a3b3b; border-left-color: var(--error); }
.banner.warning { background: #fdf4d8; color: #8b6d24; border-left-color: var(--gold); }

/* ─── Toast-Slide (Erfolg/Hinweis) — bildschirmbreit, fährt von unten ein ──── */
.toast-flash {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  padding: 20px 24px; text-align: center;
  font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
  box-shadow: 0 -8px 30px rgba(58, 46, 80, .16);
  cursor: pointer;                         /* Antippen schließt (kein X) */
  transform: translateY(100%);             /* startet unter dem Rand */
  transition: transform .42s cubic-bezier(.16, .84, .44, 1);
  /* Default = success. Text in Lavendel wie beim Hinweis-Toast unten — die Farbe der
     Marke, nicht ein zweites Grün neben dem Balken. */
  background: #e3f3e8; color: var(--lavender-deep); border-top: 3px solid var(--success);
}
.toast-flash.is-in { transform: translateY(0); }
.toast-flash > span { display: block; max-width: 1180px; margin: 0 auto; }
.toast-flash[data-toast-type="info"] { background: var(--lavender-pale); color: var(--lavender-deep); border-top-color: var(--lavender); }
.toast-flash[data-toast-type="warning"] { background: #fdf4d8; color: #8b6d24; border-top-color: var(--gold); }
@media (max-width: 720px) { .toast-flash { font-size: 18px; padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .toast-flash { transition: none; } }

/* Foto-Raster — Masonry (Spalten), damit Hoch-/Querformat in Originalproportion
   ohne Beschnitt/Stauchen nebeneinander passen. ~20 % größer als zuvor (260→312 px). */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.photo-grid .polaroid { width: 100%; margin: 0; }
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: 1fr; }
}
/* Die Spaltenformel bleibt bei 1fr: Ein `minmax(150px, 183px)` wuerde die Spaltenzahl
   am Maximum bemessen und aus 5 Ordnern am Desktop 4 machen. Begrenzt wird deshalb die
   Kachel (.folder-wrap), nicht die Spalte — am Desktop bleibt alles, wie es war (dort
   sind die Spalten ohnehin schmaler als 183px), und auf dem Handy fuellt der Ordner
   nicht mehr die ganze Breite (345px), sondern steht mittig in seinen 183px. */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 70px;
  justify-items: center;
}
.polaroid-caption {
  margin-top: 8px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: var(--ink-soft); line-height: 1.4;
}

/* Empty-State */
.empty-state { text-align: center; padding: 64px 24px; color: var(--ink-soft); }
.empty-state .icon { font-size: 56px; margin-bottom: 8px; }
.empty-state h2 { font-family: var(--font-script); color: var(--lavender); font-size: 34px; margin: 0 0 8px; }

/* ═══ Album-Leerzustände (Design-Screens 026–028) ═══════════════════════ */
.album-empty { padding: 8px 0; }

/* Weiße Hero-Karte (026 gestrichelt, 027/028 solide) */
.empty-hero { max-width: 540px; margin: 20px auto; padding: 40px 28px; text-align: center;
  background: #fff; border-radius: 20px; box-shadow: 0 4px 18px rgba(58, 46, 80, .06); }
.empty-hero--dashed { max-width: 560px; padding: 32px 28px 36px;
  border: 2px dashed rgba(123, 93, 156, .25); }
.empty-hero__title { line-height: 1.1; margin-bottom: 8px; }
.empty-hero__lead { max-width: 440px; margin: 0 auto 22px; font-size: 16px;
  color: var(--ink-soft); line-height: 1.5; }
.empty-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 026 — gestapelte Polaroids */
.polaroid-stack { position: relative; height: 200px; margin-bottom: 18px; }
.polaroid-stack__card { position: absolute; top: 6px; left: 50%; width: 130px; height: 170px;
  padding: 8px 8px 24px; background: #fff; box-shadow: 0 6px 22px rgba(58, 46, 80, .15); }
.polaroid-stack__fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.polaroid-stack__cam { display: flex; color: var(--lavender-deep); }

/* 026 — Drei-Schritte-Streifen */
.next-steps { max-width: 720px; margin: 40px auto 0; }
.next-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { position: relative; background: rgba(255, 255, 255, .55); border-radius: 14px; padding: 18px; }
.step-card__num { position: absolute; top: -10px; left: 14px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--lavender); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.step-card__icon { display: block; margin-bottom: 8px; color: var(--lavender-deep); }
.step-card__t { font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.step-card__d { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* 027 — Kind-Initiale */
.kid-badge { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--mint-pale); color: var(--lavender-deep); display: flex;
  align-items: center; justify-content: center; font-family: var(--font-script);
  font-size: 40px; font-weight: 800; }

/* 027 — Teaser „vielleicht auch dabei" */
.teaser { max-width: 720px; margin: 32px auto 0; }
.teaser__label { font-size: 13px; color: var(--ink-soft); text-align: center; margin-bottom: 14px; }
.teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.teaser__card { display: block; opacity: .6; text-decoration: none; }
.teaser__card:hover { opacity: 1; }

/* 028 — Favoriten-Stern-Badge */
.fav-badge { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(135deg, #fde6b8, #f0cd7e); color: #fff; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(232, 185, 86, .4); }

/* 028 — Hinweisbox */
.fav-hint { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px;
  background: var(--cream); border-radius: 14px; padding: 20px 24px; }
.fav-hint__demo { position: relative; }
.fav-hint__polaroid { width: 80px; padding: 4px 4px 14px; box-shadow: var(--shadow-polaroid); }
.fav-hint__polaroid .polaroid-img { aspect-ratio: auto; height: 60px; }
.fav-hint__star { position: absolute; top: -6px; left: -6px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--gold); color: #fff; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(232, 185, 86, .5); }
.fav-hint__text { max-width: 200px; text-align: left; font-size: 13px; color: var(--ink-soft); }
.fav-hint__text b { color: var(--ink); }

/* Stern-Puls (Reduced-Motion-Guard bei @media weiter unten greift via *) */
@keyframes star-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.star-pulse { animation: star-pulse 2s ease-in-out infinite; }

@media (max-width: 640px) {
  .next-steps__grid, .teaser__grid { grid-template-columns: 1fr; }
  .fav-hint { flex-direction: column; text-align: center; }
  .fav-hint__text { max-width: none; text-align: center; }
}

/* ═══ Kind anlegen / bearbeiten (Design-Screens 057/058) ════════════════ */
/* Avatar-Größe + per-Kind-Farben (Verläufe aus screens-account-security.jsx) */
.avatar.xxl { width: 110px; height: 110px; font-size: 44px; border: 4px solid white;
  box-shadow: 0 4px 18px rgba(58, 46, 80, .12); }
.avatar[data-color="peach"], .swatch[data-color="peach"] { background: linear-gradient(135deg, #fde6b8, #fad9c8); }
.avatar[data-color="rose"],  .swatch[data-color="rose"]  { background: linear-gradient(135deg, #f8d6e0, #e8defa); }
.avatar[data-color="mint"],  .swatch[data-color="mint"]  { background: linear-gradient(135deg, #d6efe5, #cde6f3); }
.avatar[data-color="coral"], .swatch[data-color="coral"] { background: linear-gradient(135deg, #fad6c8, #f8d6e0); }
.avatar[data-color="sky"],   .swatch[data-color="sky"]   { background: linear-gradient(135deg, #cde6f3, #d4e7fa); }

.avatar-picker { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }

/* Farbwähler-Swatches */
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 2.5px solid transparent; cursor: pointer; }
.swatch.active { border-color: var(--lavender); }

/* 2-Spalten-Formular (nur „Kind bearbeiten") */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }

.tool-btn { display: inline-flex; align-items: center; padding: 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-faint); cursor: pointer; }
.tool-btn:hover { color: var(--error); background: rgba(216, 139, 139, .1); }

/* Danger-Zone (rose Akzent, lesbarer Kontrast wie beim Fehler-Banner) */
.danger-zone { background: #fae3e3; border: 1.5px solid rgba(216, 139, 139, .5);
  border-radius: 14px; padding: 22px; }
.danger-zone h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #8a3b3b; }
.danger-zone p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink); }
.btn-danger-outline { background: white; color: #8a3b3b; border: 1.5px solid var(--error); }
.btn-danger-outline:hover { background: var(--error); color: white; }

/* Deaktivierte Platzhalter (Etappe-2-Features) */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .avatar-picker { gap: 16px; }
}

/* ─── „Kind bearbeiten" (Design-Übergabe „Kind bearbeiten") ────────────────────
   Alles unter .kid-page gescoped, wirkt NUR auf /kinder/{id}/bearbeiten. Wichtig:
   .avatar, .swatch, .field, .tool-btn, .danger-zone leben auf vielen anderen Screens —
   global wird hier nichts umgefärbt. Wo das Design stark abweicht (Gefahrenzone,
   Stat-Chips, Lösch-Knopf), stehen eigene Klassen mit kid- und ms-Praefix statt
   Overrides. Font: Nunito statt „Baloo 2" der Übergabe.
   ACHTUNG: hier kein Sternchen direkt vor einem Schraegstrich schreiben — das beendet
   den Kommentar und verschluckt die erste Regel danach (hat .kid-back gekostet). */
/* Zurueck-Link beider Kinder-Formulare (anlegen + bearbeiten). Der weissliche Grund
   liegt schon im Ruhezustand an — auf dem Mint-Muster ist ein reiner Textlink zu leise.
   Hover geht deshalb eine Stufe kraeftiger, sonst gaebe es gar keine Rueckmeldung mehr. */
.kid-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .5); transition: background .15s ease; }
.kid-back:hover { background: rgba(255, 255, 255, .85); }

.kid-card { background: #fff; border-radius: 24px; padding: 28px 32px; margin-bottom: 22px;
  box-shadow: 0 18px 44px rgba(74, 58, 96, .14); animation: floatIn .4s ease both; }

/* 1) Profilkarte */
.kid-profile { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* Gradient-Ring: Wrapper färbt, der innere .avatar setzt den weißen Trennrand. */
.kid-avatar { flex: 0 0 auto; display: block; padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, #9b7cba, #8266a6); box-shadow: 0 8px 20px rgba(126, 92, 163, .28); }
.kid-page .kid-avatar .avatar { width: 92px; height: 92px; font-size: 34px; border: 3px solid #fff; box-shadow: none; }
.kid-profile__text { flex: 1; min-width: 200px; }
.kid-profile__name { margin: 0; font-size: 30px; font-weight: 700; color: #3f3a52; line-height: 1.15; }
.kid-profile__sub { font-size: 15px; color: #7a7590; margin-top: 3px; }
.kid-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kid-stat { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
  border-radius: var(--r-pill); background: #f4f0fa; font-size: 14px; color: #7a7590; }
.kid-stat b { color: #3f3a52; }
.kid-stat.is-soon { opacity: .7; }
.kid-star { color: #f2b705; }
.kid-profile__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kid-upload-status { min-height: 1.2em; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* Ghost-Button („Profilbild ändern", „+ Hinzufügen") */
.kid-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--lavender-deep); background: #fff; border: 1.5px solid #e0d6ef; border-radius: 14px;
  cursor: pointer; transition: background-color .14s ease, border-color .14s ease; }
.kid-ghost:hover { background: #faf7fe; border-color: #cdbce8; }
.kid-avatar-remove { padding: 0; font-family: inherit; font-size: 14px; font-weight: 600;
  color: #b6857f; background: none; border: 0; cursor: pointer; transition: color .14s ease; }
.kid-avatar-remove:hover { color: #c2463f; }

/* 2) Formularkarte */
.kid-page .field label { font-size: 14px; font-weight: 600; color: #4f4a63; margin-bottom: 7px; }
.kid-opt { font-weight: 500; color: #a5a1b5; }
.kid-page .field input[type="text"],
.kid-page .field input[type="date"] {
  padding: 13px 15px; font-size: 15.5px; background: #f6f4fa;
  border: 2px solid #ece8f3; border-radius: 14px; color: #3f3a52; box-shadow: none; }
.kid-page .field input:focus { border-color: #b79dd6; background: #fff; box-shadow: none; }
.kid-page ::placeholder { color: #b3adc4; opacity: 1; }
.kid-swatches { margin: 18px 0 0; }
.kid-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; }
.kid-page .kid-save { padding: 13px 28px; font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6); box-shadow: 0 8px 18px rgba(126, 92, 163, .28); }
.kid-page .kid-save:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(126, 92, 163, .4); }

/* 3) Meilensteine */
.kid-sec { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.kid-sec__icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; background: #f0e7fa; color: var(--lavender-deep); }
.kid-sec h3 { margin: 0; font-size: 19px; font-weight: 600; color: #3f3a52; }
.kid-empty { margin: 0 0 14px; font-size: 14.5px; color: #7a7590; }
.milestone-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.milestone-row { display: flex; align-items: center; gap: 16px; padding: 13px 16px;
  background: #f7f5fb; border: 1px solid #efeaf6; border-radius: 14px; }
.milestone-date { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .3px; color: var(--lavender-deep); background: #ece0f7; padding: 5px 10px; border-radius: 8px; }
.milestone-label { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; color: #3f3a52; }
.ms-del { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: #b0a9c0; cursor: pointer;
  transition: background-color .14s ease, color .14s ease; }
.ms-del:hover { background: #fbeeed; color: #c2463f; }
.milestone-add { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kid-page .milestone-add input { padding: 13px 15px; font-size: 15px; font-family: inherit;
  background: #f6f4fa; border: 2px solid #ece8f3; border-radius: 14px; color: #3f3a52; }
.kid-page .milestone-add input:focus { border-color: #b79dd6; background: #fff; outline: none; }
.kid-page .milestone-add input[type="date"] { flex: 0 0 165px; }
.kid-page .milestone-add input[type="text"] { flex: 1; min-width: 160px; }

/* 4) Gefahrenzone (eigene Klassen — .danger-zone gehört anderen Screens) */
.kid-danger { background: #fbeeed; border: 1px solid #f2d5d2; border-radius: 24px;
  padding: 26px 30px; box-shadow: 0 12px 30px rgba(160, 60, 50, .08); }
.kid-danger__head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; color: #c2463f; }
.kid-danger__head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #b23a33; }
.kid-danger p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: #9a5a54; max-width: 640px; }
.kid-danger__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: #c2463f;
  background: #fff; border: 1.5px solid #eab8b3; border-radius: var(--r-pill); cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.kid-danger__btn:hover { background: #c2463f; border-color: #c2463f; color: #fff; }

@media (max-width: 640px) {
  .kid-card { padding: 22px 20px; border-radius: 20px; }
  .kid-profile { flex-direction: column; align-items: flex-start; }
  .kid-profile__actions { align-items: stretch; align-self: stretch; }
  .kid-profile__name { font-size: 26px; }
  .kid-danger { padding: 22px 20px; border-radius: 20px; }
  .kid-page .milestone-add input[type="date"] { flex: 1 1 100%; }
  .kid-page .milestone-add .kid-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kid-card { animation: none; }
  .kid-back, .kid-ghost, .kid-avatar-remove, .ms-del, .kid-danger__btn { transition: none; }
  .kid-page .kid-save:hover { transform: none; }
}

/* ─── Auth-/Schmal-Karten (Login-Redesign, Design-Übergabe „Login-Bildschirm") ──
   Alles hier ist unter .auth-card gescoped und wirkt NUR auf die Anmelde-Seiten
   (Login, Passwort-vergessen/-neu, E-Mail-bestätigen, 2FA) – nicht auf die App. */
.auth-wrap { max-width: 480px; margin: 48px auto; padding: 0 20px; }
.auth-card {
  max-width: 440px; margin: 0 auto;
  background: white; border-radius: 30px;
  padding: 44px 40px 36px;
  box-shadow: 0 24px 60px rgba(74,58,96,.16);
  animation: floatIn .5s ease both;
}
@keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-card h1 { font-family: var(--font-script); color: var(--lavender-deep); font-size: 40px; font-weight: 400; margin: 0 0 10px; text-align: center; line-height: 1.1; }
.auth-sub { text-align: center; color: #6b6580; font-size: 16.5px; line-height: 1.45; margin: 0 0 28px; }
.auth-alt { text-align: center; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.auth-alt a { color: var(--lavender-deep); font-weight: 700; }

/* Felder im Auth-Kontext: weiche Lavendel-Optik aus dem Design (nur hier gescoped) */
.auth-card .field { margin-bottom: 18px; }
.auth-card .field label { font-size: 14.5px; font-weight: 600; color: #4f4a63; margin-bottom: 7px; }
.auth-card .field input[type="text"],
.auth-card .field input[type="email"],
.auth-card .field input[type="password"] {
  padding: 15px 16px;
  background: #f6f4fa;
  border: 2px solid #ece8f3;
  border-radius: 16px;
  color: #3f3a52;
}
.auth-card .field input:focus { border-color: #b79dd6; background: #fff; box-shadow: none; }
.auth-card .field .help { margin-top: 12px; }
.auth-card .field .help a { color: var(--lavender-deep); font-weight: 600; text-decoration: none; }
.auth-card .field .help a:hover { color: #634882; }

/* Passwortloser Primär-Button (Passkey) – nutzt die bestehende .btn-passkey-Optik.
   white-space:normal hebt das nowrap der .btn-Basis auf → langer Text bricht um
   statt aus dem Button zu laufen (Sicherheitsnetz). */
.auth-passkey { margin-bottom: 8px; white-space: normal; line-height: 1.2; }
/* Fingerabdruck-Symbol: erbt das Weiß des Buttons (currentColor), schrumpft beim
   Umbruch des Textes nicht mit. */
.auth-passkey__icon { flex-shrink: 0; display: block; }
.auth-hint { text-align: center; font-size: 13.5px; color: #8d8aa0; margin: 10px 0 0; }

/* Trenner „Oder mit Passwort" (Linien via ::before/::after) */
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 22px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e8e4ef; }
.auth-divider span { font-size: 13px; color: #a5a1b5; white-space: nowrap; }

/* „Angemeldet bleiben" — sitzt zwischen letztem Feld und Anmelde-Knopf */
.auth-remember {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  margin: 0 0 18px; font-size: 14.5px; color: #4f4a63;
}
.auth-remember input { width: 18px; height: 18px; accent-color: var(--lavender-deep); cursor: pointer; }

/* Sekundär-Button „Anmelden" (weiche Lavendel-Pill aus dem Design) */
.auth-submit { width: 100%; background: #efe9f6; color: var(--lavender-deep); border: 2px solid #e0d6ef; font-weight: 600; }
.auth-submit:hover { background: #e6ddf3; border-color: #d3c4ea; }

/* Footer */
.site-footer {
  margin-top: 56px; padding: 32px 28px; text-align: center;
  color: var(--ink-soft); font-size: 14px;
  border-top: 1px solid rgba(123,93,156,.14);
}
.site-footer a { color: var(--lavender-deep); text-decoration: none; margin: 0 8px; }
.site-footer a:hover { text-decoration: underline; }

/* Foto-Detail */
.photo-detail img { width: 100%; border-radius: var(--r-md); display: block; }

/* Favorit-Stern als Formular (funktioniert ohne JS; app.js verbessert per fetch) */
.star-badge-form { position: absolute; top: 22px; left: 22px; z-index: 2; margin: 0; }
.star-badge-form .star-badge { position: static; }
.tag-chip {
  display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0;
  background: var(--lavender-pale); color: var(--lavender-deep);
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
}
/* Kind-Zuweisung per Klick-Pille unter jedem Foto (Farbe je Kind / grau = nicht zugewiesen) */
.photo-kids { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 2px; }
.photo-kid { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px;
  border: 1.5px solid transparent; border-radius: var(--r-pill); background: rgba(0,0,0,.05);
  color: var(--ink-soft); font-size: 12.5px; font-weight: 700; line-height: 1; font-family: inherit; }
button.photo-kid { cursor: pointer; }
.photo-kid .avatar.sm { width: 22px; height: 22px; font-size: 10px; border-width: 1.5px; transition: filter .12s; }
.photo-kid.is-off { background: rgba(0,0,0,.045); color: var(--ink-faint); }
.photo-kid.is-off .avatar { filter: grayscale(1); opacity: .5; }
.photo-kid.is-on { background: var(--lavender-pale); color: var(--lavender-deep); border-color: var(--lavender-soft); }
button.photo-kid:hover { border-color: var(--lavender-soft); }
button.photo-kid:disabled { cursor: default; opacity: .7; }
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 24px; }
.toolbar-row a { text-decoration: none; }

/* Reduced motion — Pflicht-Fundament */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Marketing-Seiten (Header, Startseite, reicher Footer) — aus der Design-
   Übergabe (screens-marketing.jsx / screens-legal.jsx). Tokens/Buttons/
   Karten werden wiederverwendet; hier nur das Seiten-spezifische Layout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Marketing-Header / Nav ─────────────────────────────────────────────── */
.mk-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(189,223,210,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.4);
}
.mk-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; }
.mk-brand { text-decoration: none; display: inline-flex; }
.mk-brand .wordmark { font-size: 28px; }
.mk-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
.mk-nav-link { color: var(--ink); text-decoration: none; }
.mk-nav-link:hover { color: var(--lavender-deep); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; padding: 60px 28px 80px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: rgba(255,255,255,.7); border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--lavender-deep); margin-bottom: 22px;
}
.hero-badge .dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
.hero h1 { font-size: 56px; line-height: 1.08; margin: 0 0 22px; font-weight: 800; letter-spacing: -.02em; }
.hero h1 .script { font-size: 74px; }
.hero-sub { font-size: 19px; color: var(--ink-soft); max-width: 540px; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

/* Browser-Mockup */
.browser-wrap { position: relative; }
.browser-mock {
  background: #fff; border-radius: 14px; overflow: hidden; transform: rotate(1.5deg);
  box-shadow: 0 20px 60px rgba(58,46,80,.20), 0 8px 20px rgba(0,0,0,.08);
}
.browser-bar { background: #f1ece2; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.browser-url {
  flex: 1; background: #fff; border-radius: 6px; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.browser-body { padding: 26px 22px 30px; min-height: 320px; }
.float-badge {
  position: absolute; top: -16px; right: -10px; transform: rotate(15deg);
  background: var(--gold); color: #fff; padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-script); font-size: 22px; box-shadow: 0 4px 14px rgba(232,185,86,.5);
}

/* ── Sektionen ──────────────────────────────────────────────────────────── */
.mk-section { padding: 80px 0; }
.mk-section.cream { background: var(--cream); padding: 70px 0; }
.mk-section.lav-pale { background: var(--lavender-pale); padding: 70px 0; }
.section-head { text-align: center; margin-bottom: 50px; }
.section-head .eyebrow { font-family: var(--font-script); font-size: 28px; color: var(--lavender); }
.section-head h2 { font-size: 40px; margin: 8px 0 14px; font-weight: 800; }
.section-head p { color: var(--ink-soft); font-size: 18px; max-width: 620px; margin: 0 auto; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cards-2-narrow { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* Feature-Karten (2×2) */
.feature-card { display: flex; gap: 18px; padding: 24px; background: rgba(255,255,255,.55); border-radius: 16px; align-items: flex-start; }
.feature-ico { width: 56px; height: 56px; border-radius: 14px; background: var(--lavender-pale); color: var(--lavender-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Tarife */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1020px; margin: 0 auto; }
.plan { background: #fff; position: relative; }
.plan.featured { transform: translateY(-12px) scale(1.03); box-shadow: 0 20px 50px rgba(123,93,156,.25); border: 2px solid var(--lavender); }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--lavender); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.plan-price .amount { font-size: 38px; font-weight: 800; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.plan-feats li { display: flex; gap: 8px; font-size: 14px; color: var(--ink); }
.plan-feats .ok { color: var(--success); flex-shrink: 0; }

/* Großeltern */
.grand-card { background: var(--cream); border-radius: 18px; padding: 30px; text-align: center; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.grand-item { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.6); padding: 16px; border-radius: 12px; }
.grand-item .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--lavender-pale); color: var(--lavender-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Trust-Grid */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.trust-item .ck { width: 28px; height: 28px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.faq-q { width: 100%; text-align: left; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 700; font-family: inherit; color: var(--ink); }
.faq-icon { color: var(--lavender); transition: transform .2s; flex-shrink: 0; font-size: 22px; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 22px 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; display: none; }
.faq-item.open .faq-a { display: block; }

/* Final-CTA-Band */
.mk-cta { background: var(--lavender); color: #fff; padding: 70px 0; text-align: center; }
.mk-cta h2 { font-size: 40px; margin: 0 0 16px; font-weight: 800; }
.mk-cta p { font-size: 18px; opacity: .92; margin-bottom: 28px; }
.mk-cta .btn-on-lav { background: #fff; color: var(--lavender-deep); padding: 16px 32px; font-size: 17px; }

/* ── Reicher Footer (Folie 16) ──────────────────────────────────────────── */
.mk-footer { background: var(--ink); color: rgba(255,255,255,.72); flex-shrink: 0; }
.mk-newsletter { background: var(--lavender-deep); padding: 32px 0; }
.mk-newsletter-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.mk-news-title { font-size: 28px; color: #fff; line-height: 1.1; font-weight: 700; }
.mk-news-text { color: rgba(255,255,255,.82); margin: 4px 0 0; font-size: 15px; }
.mk-news-form { display: flex; gap: 10px; }
.mk-news-form input { flex: 1; padding: 14px 16px; border-radius: 10px; border: 0; font-size: 15px; font-family: inherit; background: rgba(255,255,255,.96); color: var(--ink); }
.mk-news-btn { background: var(--gold); color: var(--ink); padding: 0 22px; font-weight: 800; font-size: 15px; }
.mk-news-btn[disabled], .mk-news-form input[disabled] { opacity: .85; cursor: not-allowed; }
.mk-news-note { color: rgba(255,255,255,.72); font-size: 12px; margin-top: 6px; }
.mk-foot-cols { padding: 56px 28px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.mk-foot-brand .mk-foot-mark { font-size: 28px; color: #fff; font-family: var(--font-script); font-weight: 700; line-height: 1; }
.mk-foot-brand p { margin: 14px 0 18px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.mk-social { display: flex; gap: 10px; }
.mk-soc { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; }
.mk-foot-col { display: flex; flex-direction: column; gap: 10px; }
.mk-foot-col h4 { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; margin: 0 0 6px; }
.mk-foot-col a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14.5px; line-height: 1.4; }
.mk-foot-col a:hover { color: #fff; }
.mk-soon { color: rgba(255,255,255,.45); font-size: 14.5px; line-height: 1.4; }
.mk-soon em { font-style: normal; font-size: 11px; opacity: .75; margin-left: 4px; }
.mk-trust-inner { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; font-size: 13.5px; color: rgba(255,255,255,.62); }
.mk-trust-inner span { display: inline-flex; align-items: center; gap: 8px; }
/* Am -inner, nicht am -Wrapper: die Häkchen-SVGs tragen kein width/height, das hier
   ist ihre einzige Bemaßung. Am .mk-trust festgemacht wüchsen sie auf ~86px, sobald
   die Punkte ohne diesen Wrapper stehen (Album-Footer). */
.mk-trust-inner .ic { width: 15px; height: 15px; color: var(--success); }
.mk-bottom { background: rgba(0,0,0,.25); padding: 16px 0; }
.mk-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; color: rgba(255,255,255,.55); }
.mk-bottom-right { display: flex; gap: 16px; align-items: center; }
/* Schlanker Album-Footer: nur die Marken-Spalte, zentriert.
   Doppelte Klasse mit Absicht — .mk-foot-cols in der 860px-Query weiter unten ist
   gleich spezifisch, steht aber später und zwänge die Spalte sonst auf halbe Breite. */
.mk-foot-cols.mk-foot-cols--slim {
  grid-template-columns: 1fr;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 28px;
}
/* Eine Zeile statt zweier Streifen: Social links, Vertrauens-Punkte rechts.
   Im Album genügt das — der volle Marketing-Footer lebt im Hub-Repo. */
.mk-foot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.mk-foot-meta .mk-trust-inner { flex: 1 1 auto; justify-content: flex-end; gap: 12px 22px; }
.mk-foot-legal { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.mk-foot-legal a { color: rgba(255,255,255,.6); text-decoration: none; }
.mk-foot-legal a:hover { color: #fff; }
.mk-bottom-right a { color: rgba(255,255,255,.6); text-decoration: none; }
.mk-bottom-right a:hover { color: #fff; }
.mk-footer a:focus-visible, .mk-footer button:focus-visible { outline-color: #fff; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 20px 56px; }
  .hero h1 { font-size: 40px; }
  .hero h1 .script { font-size: 52px; }
  .cards-3, .trust-grid, .pricing-grid { grid-template-columns: 1fr; }
  .cards-2, .cards-2-narrow { grid-template-columns: 1fr; gap: 20px; }
  .plan.featured { transform: none; }
  .mk-newsletter-inner { grid-template-columns: 1fr; }
  .mk-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Schmal wird aus der einen Zeile ein Stapel — sonst quetschen sich Social-Icons
     und Vertrauens-Punkte gegenseitig. */
  .mk-foot-meta { flex-direction: column; align-items: flex-start; }
  .mk-foot-meta .mk-trust-inner { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .mk-header-inner { padding: 12px 16px; }
  .mk-nav { gap: 12px; font-size: 13px; }
  .mk-nav-link { display: none; }
  .mk-brand .wordmark { font-size: 24px; }
  .section-head h2 { font-size: 30px; }
}
@media (max-width: 520px) {
  .mk-foot-cols { grid-template-columns: 1fr; }
  .mk-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ─── Foto-Upload-Overlay (Screen 39/97) ─────────────────────────────────── */
.up-modal { display: flex; flex-direction: column; gap: 14px; }
.up-modal h3 { margin: 0; }
.up-sub { margin: 0; color: var(--ink-soft); font-size: 14px; }
.up-overall { height: 12px; margin: 0; }
.up-shared { background: var(--cream); border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; }
.up-shared__head { font-weight: 800; font-size: 15px; color: var(--ink); }
.up-shared__field { display: flex; flex-direction: column; gap: 7px; }
.up-shared__label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.up-shared__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.up-shared__pills .pill { cursor: pointer; font-size: 13.5px; gap: 8px; padding: 4px 13px 4px 5px; }
.up-shared__pills .pill.active { background: var(--lavender); color: #fff; }
.up-shared__pills .pill input { display: none; }
.up-shared__pills .pill .avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.up-date { padding: 8px 10px; border: 1.5px solid rgba(0, 0, 0, .1); border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px; align-self: flex-start; }
.up-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 44px; max-height: 46vh; }
.up-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); background: var(--cream); }
.up-row.is-error { background: rgba(216, 139, 139, .10); }
.up-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--cream-deep); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-meta { flex: 1; min-width: 0; }
.up-name { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-note { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.up-row.is-error .up-note { color: var(--error); }
.up-rowbar { height: 4px; border-radius: 999px; background: var(--cream-deep); margin: 5px 0; overflow: hidden; }
.up-rowbar > span { display: block; height: 100%; width: 0; background: var(--lavender); transition: width .2s ease; }
.up-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.up-pill.is-done { background: rgba(168, 213, 186, .35); color: #3f7a5a; }
.up-pill.is-uploading { background: var(--lavender-pale); color: var(--lavender-deep); }
.up-pill.is-queued, .up-pill.is-preparing { background: var(--cream-deep); color: var(--ink-faint); }
.up-pill.is-error { background: rgba(216, 139, 139, .22); color: #8a3b3b; }
.up-x { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: 15px; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; }
.up-x:hover { color: var(--error); background: rgba(216, 139, 139, .1); }
.up-foot { display: flex; justify-content: space-between; gap: 10px; }

/* ─── Mehrfachauswahl (Auswahl-Modus) ───────────────────────────────────── */
/* Check-Kreis oben links (28 px); ausgewählt = Lavendel + weißes Häkchen. */
.photo-check { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  z-index: 6; display: none; }
/* Ohne das faerbt Shift+Klick beim Aufziehen einer Reihe Datum und Bildunterschrift blau
   ein. Hier und nicht in JS: die Markierung entsteht schon beim mousedown, der
   Klick-Handler kaeme zu spaet. Ausserhalb des Auswahlmodus bleibt Text markierbar. */
.photo-grid.selecting { -webkit-user-select: none; user-select: none; }
.photo-grid.selecting .photo-check { display: block; }
.photo-grid.selecting .polaroid { cursor: pointer; }
.photo-grid.selecting .polaroid-img a { pointer-events: none; }
/* Favoriten-Stern im Auswahlmodus ausblenden (Check-Kreis übernimmt oben links). */
.photo-grid.selecting .star-badge,
.photo-grid.selecting .star-badge-form { display: none; }
.polaroid.selected::after { content: ""; position: absolute; inset: -6px; border: 3px solid #8266a6;
  border-radius: 14px; background: rgba(130, 102, 166, .16); z-index: 5; pointer-events: none; }
.polaroid.selected .photo-check { background: #8266a6; border-color: #8266a6; }
.polaroid.selected .photo-check::after { content: ""; position: absolute; left: 9px; top: 5px;
  width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Weiße Aktions-Leiste (sticky unter dem Header) */
.select-bar { position: sticky; top: 74px; z-index: 55; margin: 0 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; color: var(--ink); padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid rgba(126, 92, 163, .12); box-shadow: 0 14px 34px rgba(74, 58, 96, .15);
  animation: float-in .18s ease; }
.select-bar__left { display: flex; align-items: center; gap: 14px; }
.select-bar__close { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px; cursor: pointer;
  background: #f2eef8; color: #6b6580; display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background .15s ease; }
.select-bar__close:hover { background: #e8e1f2; }
.select-bar__count { font-size: 17px; font-weight: 700; color: #3f3a52; line-height: 1.2; }
.select-bar__sub { font-size: 13px; color: #8b86a0; }
.select-bar__all { color: var(--lavender-deep); font-weight: 700; cursor: pointer; text-decoration: none; }
.select-bar__all:hover { text-decoration: underline; }
.select-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.select-bar__actions.is-empty { opacity: .45; pointer-events: none; }
.bulk-btn { border: 1px solid #ece4f5; background: #f6f1fb; color: #6f5a91; cursor: pointer;
  border-radius: 999px; padding: 10px 15px; font-weight: 600; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease; }
.bulk-btn:hover { background: #efe6f8; }
.bulk-btn__i { display: inline-flex; }
.bulk-btn__i svg { display: block; }
.bulk-btn.is-danger { background: #fbeeed; border-color: #f2d5d2; color: #c2463f; }
.bulk-btn.is-danger:hover { background: #f7e0de; }

/* ─── Foto bearbeiten (Screen 43) ────────────────────────────────────────── */
.edit-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: start; }
.edit-right { display: flex; flex-direction: column; gap: 16px; }
.edit-preview { background: var(--cream); border-radius: var(--r-md); padding: 24px;
  display: flex; align-items: center; justify-content: center; min-height: 340px; overflow: hidden; }
.edit-photo { max-width: 100%; transition: transform .25s ease; }
.edit-photo img { max-width: 100%; max-height: 56vh; height: auto; display: block; border-radius: 4px; box-shadow: var(--shadow-polaroid); }
.rotate-bar { margin-top: 16px; padding: 10px 14px; background: var(--cream); border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rotate-bar__label { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.rotate-bar__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rotate-bar__btns .btn { padding: 8px 12px; font-size: 13px; }
.rotate-reset { color: var(--lavender-deep); }
.info-block { margin-top: 14px; padding: 14px 16px; background: var(--cream); border-radius: 10px; }
.info-block__label { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-family: var(--font-mono); }
.info-grid > div { display: flex; flex-direction: column; gap: 2px; }
.info-grid span { color: var(--ink-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.info-grid b { color: var(--ink); font-weight: 700; font-size: 13px; }
.action-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Kind-Avatar-Chips ("Wer ist auf dem Foto?") — aktiv per :has, kein JS */
.kid-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, .1); background: white; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink); }
.kid-chip input { display: none; }
.kid-chip .avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.kid-chip__check { display: none; color: var(--lavender-deep); font-weight: 800; }
.kid-chip:has(input:checked) { border-color: var(--lavender); background: var(--lavender-pale); color: var(--lavender-deep); }
.kid-chip:has(input:checked) .kid-chip__check { display: inline; }

/* Favorit-Karte */
.fav-card { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 2px solid rgba(0, 0, 0, .08);
  background: white; border-radius: 10px; cursor: pointer; }
.fav-card input[type=checkbox] { display: none; }
.fav-card .fav-star { flex-shrink: 0; }
.fav-card__t { font-weight: 700; font-size: 14px; }
.fav-card__d { font-size: 12.5px; color: var(--ink-soft); }
.fav-card:has(input:checked) { border-color: var(--gold); background: #fdf4d8; }
.fav-card:has(input:checked) .fav-star { fill: var(--gold); }

@media (max-width: 760px) {
  .edit-grid { grid-template-columns: 1fr; }
}

/* ─── Profil / Konto (Screen 45) ─────────────────────────────────────────── */
.account-page > .card,
.settings-main > .card,
.account-page > .danger-zone { margin-bottom: 18px; }
.account-page > .danger-zone { margin-top: 6px; }

.profile-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.profile-avatar { position: relative; flex-shrink: 0; }
.profile-cam { position: absolute; bottom: -4px; right: -4px; width: 36px; height: 36px;
  border-radius: 50%; background: var(--lavender); color: #fff; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.profile-cam:disabled { cursor: not-allowed; opacity: .8; }

.mono { font-family: var(--font-mono); }
.readonly-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--cream); border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; }
.verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  color: #3d7a4f; background: rgba(168, 213, 186, .3); border-radius: 999px; padding: 3px 10px; }

.activity-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.activity-table tr { border-top: 1px solid rgba(0, 0, 0, .06); }
.activity-table tr:first-child { border-top: 0; }
.activity-table td { padding: 9px 0; }
.activity-table .activity-when { text-align: right; color: var(--ink-soft); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

.danger-reveal summary { display: inline-flex; list-style: none; cursor: pointer; }
.danger-reveal summary::-webkit-details-marker { display: none; }
.danger-reveal[open] summary { display: none; }
.danger-confirm { margin-top: 14px; max-width: 420px; }

/* ── Familienmitglieder: Rollen-Karten, Rechte-Toggles, Wizard, Tour ───────────── */
.role-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line, #e7e1ee);
  border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .12s, background .12s; }
.role-card:hover { border-color: var(--lavender, #b9a3d6); }
.role-card input { margin-top: 3px; accent-color: var(--lavender-deep, #7d5a9c); }
.role-card:has(input:checked) { border-color: var(--lavender-deep, #7d5a9c); background: var(--lavender-pale, #f3eefa); }

.perm-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.perm-toggle input { width: 20px; height: 20px; accent-color: var(--lavender-deep, #7d5a9c); }
.perm-row:first-of-type { border-top: 0 !important; }

.invite-relation { cursor: pointer; }
.invite-relation:has(input:checked) { background: var(--lavender-pale, #f3eefa); border-color: var(--lavender-deep, #7d5a9c); }
.scope-pill { cursor: pointer; }
.scope-pill:has(input:checked) { background: var(--mint, #b8e0d2); }

/* (.invite-benefits — die frühere Häkchen-Liste des Willkommens-Schritts — ist mit
   der Übergabe „Beitreten" durch .invite-perks ersetzt worden.) */

.wizard-step[hidden] { display: none; }

/* ─── Gast-Onboarding im Beitritts-Wizard (Design-Übergabe „Gast Name") ────────
   Der Namens-Schritt, den ein neuer Gast (z. B. Oma) nach dem Beitritt sieht:
   Schritt-Anzeige, Live-Vorschau mit Initialen-Avatar, bewusst großes Namensfeld
   (Gäste sind oft ältere Angehörige). Alles unter .guest-onboard bzw. .onb-*
   gescoped — der Willkommens-Schritt daneben und die Anmelde-Karten bleiben
   unberührt. Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung).
   Lila-getönte Rohwerte stehen wie im Auth-Block bewusst hart als Hex. */

/* Karte etwas breiter und flacher gepolstert als die Anmelde-Karten (Übergabe: 480px) */
.auth-wrap--wide { max-width: 520px; }
.invite-welcome {
  max-width: 480px;
  padding: 38px 40px 34px;
  box-shadow: 0 30px 72px rgba(74, 58, 96, .24);
  /* Damit das Kopf-Band des ersten Schritts an den gerundeten Ecken abgeschnitten
     wird. Kein Schritt braucht hier ueberstehende Inhalte. */
  overflow: hidden;
}

/* ─── Willkommens-Schritt (Design-Übergabe „Beitreten") ───────────────────────
   Erster Schritt des Beitritts-Assistenten: farbiges Kopf-Band mit Einlader → Du,
   Begruessung, drei Vorteils-Karten, Beitritts-Knopf. Alles unter .invite-hero*
   bzw. .invite-perk* gescopet; die Schritte 2 und 3 bleiben unberuehrt. */

/* Das Band laeuft bis an die Kartenkante — es zieht sich per negativem Rand aus
   dem Karten-Padding heraus (oben 38, seitlich 40, siehe .invite-welcome). */
.invite-hero__band {
  position: relative;
  margin: -38px -40px 0;
  padding: 34px 34px 30px;
  background: linear-gradient(155deg, #9b7cba, #7a5fa0);
  text-align: center;
  overflow: hidden;
}
/* Muster-Schleier auf dem Band. pattern.svg bringt opacity .35 mit — .4 hier
   ergibt die 0,14 der Uebergabe. Kachelmass bleibt 768, sonst schrumpfen die
   Figuren gegenueber dem Seitenhintergrund (siehe .mint-bg). */
.invite-hero__band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("pattern.svg");
  background-size: 768px 768px;
  opacity: .3; pointer-events: none;
}
.invite-hero__who {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 16px;
}
.invite-hero__person { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.invite-hero__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--lavender-deep); font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(40, 25, 60, .28);
}
.invite-hero__avatar--you {
  background: rgba(255, 255, 255, .22); color: #fff;
  border: 2px dashed rgba(255, 255, 255, .7); box-shadow: none;
}
.invite-hero__label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.invite-hero__arrow { display: flex; color: rgba(255, 255, 255, .85); }
.invite-hero__pill {
  position: relative;
  display: inline-block; padding: 5px 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .16);
}

/* .invite-welcome davor: sonst schlaegt „.auth-card h1" (40 px, margin 0 0 10px)
   diese Regel und die Begruessung faellt in zwei Zeilen. */
.invite-welcome .invite-hero__title {
  font-family: var(--font-script); font-weight: 400; font-size: 34px; line-height: 1.12;
  color: var(--lavender-deep); text-align: center; margin: 30px 0 12px;
  text-wrap: balance;
}
.invite-hero__text {
  font-size: 16px; line-height: 1.55; color: #5f5a70; text-align: center; margin: 0 0 26px;
}
.invite-hero__text b { color: #3f3a52; }

.invite-perks { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; }
.invite-perk {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px; text-align: left;
  background: #f7f4fb; border: 1px solid #ece3f6; border-radius: 16px;
  animation: invite-perk-in .4s ease both;
}
@keyframes invite-perk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.invite-perk__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #ece0f7; color: var(--lavender-deep);
}
.invite-perk__body { flex: 1; min-width: 0; }
.invite-perk__title { display: block; font-size: 15.5px; font-weight: 700; color: #3f3a52; line-height: 1.3; }
.invite-perk__text { display: block; font-size: 14px; color: #6a6580; line-height: 1.45; margin-top: 2px; }

/* ─── Anmeldeweg wählen (Beitritts-Wizard, Schritt 3) ──────────────────────────
   Baut auf .role-card auf (dieselbe Optik wie die Berechtigungs-Karten beim
   Einladen); hier kommen nur Icon-Spalte und Textaufbau dazu. */
.login-choice { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.login-choice__card { align-items: center; gap: 12px; padding: 14px 16px; }
.login-choice__card[hidden] { display: none; }
.login-choice__icon { flex-shrink: 0; color: var(--lavender-deep, #7d5a9c); display: flex; }
.login-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.login-choice__title { font-weight: 700; font-size: 15.5px; color: #3f3a52; }
.login-choice__desc { font-size: 13.5px; color: #6a6580; line-height: 1.45; }

/* Passwort-Felder: klappen nur bei „Eigenes Passwort" auf (app.js setzt hidden). */
.login-choice__panel {
  border: 1.5px solid var(--lavender-pale, #e5daf5); border-radius: 14px;
  background: #fbf9fe; padding: 18px 16px 6px; margin: 0 0 16px;
  animation: floatIn .28s ease both;
}
.login-choice__panel[hidden] { display: none; }
.login-choice__note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: #8b86a0; text-align: center; margin: 0 0 18px;
}

/* ─── Passkey-Schritt nach dem Beitritt (/beitritt/passkey) ─────────────────── */
.pk-setup { text-align: center; }
.pk-setup__icon { font-size: 46px; line-height: 1; margin: 6px 0 10px; }
.pk-setup__title { font-size: 30px; color: var(--lavender-deep, #7d5a9c); margin-bottom: 8px; }
.pk-setup__lead { margin-bottom: 24px; }
.pk-setup__btn { width: 100%; padding: 15px 24px; font-size: 17px; font-weight: 600; }
.pk-setup__btn[hidden] { display: none; }
.pk-setup__unsupported { font-size: 14px; color: #6a6580; line-height: 1.5; margin: 0 0 8px; }
.pk-setup__skip {
  display: inline-block; margin-top: 16px; font-size: 14px;
  color: var(--ink-soft, #6a6580); text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .login-choice__panel { animation: none; }
}

.invite-hero__cta {
  width: 100%; padding: 15px 24px; font-size: 17px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 10px 22px rgba(126, 92, 163, .34);
}
.invite-hero__cta:hover {
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  transform: translateY(-2px); box-shadow: 0 16px 32px rgba(126, 92, 163, .46);
}
@media (max-width: 520px) {
  /* Karten-Padding ist hier schmaler — der negative Rand des Bandes muss mit. */
  .invite-welcome { padding: 30px 22px 26px; }
  .invite-hero__band { margin: -30px -22px 0; padding: 28px 20px 24px; }
  .invite-hero__title { font-size: 29px; margin-top: 26px; }
  .invite-perk { padding: 12px 13px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .invite-perk { animation: none; }
  .invite-hero__cta:hover { transform: none; }
}

/* Schritt-Anzeige: Kreise + Verbindungsbalken links, Klartext rechts.
   Die Kreise sind Dekoration (aria-hidden) — die Bedeutung trägt der Text. */
.onb-steps { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.onb-steps__dots { display: flex; align-items: center; gap: 8px; }
.onb-step {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f2eef8; color: #a99cc0; font-size: 13px; font-weight: 700;
}
.onb-step.is-on { background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff; }
.onb-step__bar { width: 22px; height: 4px; border-radius: 2px; background: #e6dcf2; }
.onb-step__bar.is-on { background: linear-gradient(135deg, #9b7cba, #8266a6); }
.onb-steps__label { font-size: 13px; font-weight: 600; color: #a99cc0; white-space: nowrap; }

/* Live-Vorschau: so sieht die Familie den Gast */
.onb-preview {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 24px; margin-bottom: 28px;
  background: linear-gradient(160deg, #f7f2fc, #f1e8fa);
  border: 1px solid #ece0f7; border-radius: 22px;
}
.onb-preview__avatar {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  color: #fff; font-size: 29px; font-weight: 700; line-height: 1;
  box-shadow: 0 12px 26px rgba(126, 92, 163, .34);
}
.onb-preview__name { font-size: 19px; font-weight: 700; color: #3f3a52; line-height: 1.2; overflow-wrap: anywhere; }
.onb-preview__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #8b86a0; margin-top: 4px; }
.onb-preview__hint svg { flex-shrink: 0; }

/* Titel und Fließtext linksbündig — die Anmelde-Karten zentrieren beides */
.guest-onboard h1 { font-size: 32px; text-align: left; margin: 0 0 8px; }
.guest-onboard .auth-sub { text-align: left; font-size: 15.5px; color: #5f5a70; margin: 0 0 22px; }

/* Namensfeld: 17px statt 16px — bewusst groß und gut lesbar */
.guest-onboard .field { margin-bottom: 0; }
.guest-onboard .field input[type="text"] { padding: 15px 17px; font-size: 17px; font-weight: 500; border-radius: 15px; }
.guest-onboard .field .help { margin-top: 9px; color: #7c9384; }

/* Aktionen: Textbutton „Zurück" links, Verlaufs-Pille „Weiter" rechts */
.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.onb-actions .btn-ghost { padding: 13px 22px; font-weight: 600; color: #6b6580; }
.onb-actions .btn-ghost:hover { background: transparent; color: #3f3a52; }
.onb-actions .btn-primary {
  padding: 14px 32px; font-size: 16.5px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 10px 22px rgba(126, 92, 163, .32);
}
.onb-actions .btn-primary:hover {
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(126, 92, 163, .44);
}

/* ─── „Jemanden einladen" (Design-Übergabe „Einladen Screen") ──────────────────
   Die Karten-Hülle ist auf .invite-card[data-wizard] gescoped: die „Offene
   Einladungen"-Liste unter „Mitglieder & Rechte" trägt DENSELBEN Klassennamen
   .invite-card (anderer Screen, gleicher Name) — ohne [data-wizard] würde diese
   Liste die 620px-Breite und das Zentrieren des Wizards erben und schmaler stehen
   als die Mitglieder-Karten. Die Kind-Regeln (.inv-step, .role-card …) bleiben
   ungescoped: solche Elemente gibt es nur im Wizard.
   Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung). Lila-getönte
   Rohwerte stehen wie im Auth-Block bewusst hart als Hex (--ink* ist neutral-grau). */
.invite-title {
  font-family: var(--font-script); font-weight: 400; font-size: 38px;
  color: var(--lavender-deep); text-align: center; line-height: 1.1; margin: 0 0 22px;
}
.invite-card[data-wizard] {
  max-width: 620px; margin: 0 auto;
  background: #fff; border-radius: 28px;
  padding: 34px 36px 28px;
  box-shadow: 0 24px 60px rgba(74, 58, 96, .16);
  animation: floatIn .45s ease both;               /* Keyframe existiert (Auth-Block) */
}

/* Schritt-Kopf: Nummernkreis + Überschrift */
.invite-card .inv-step { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.inv-step__num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  color: #fff; font-size: 15px; font-weight: 700;
}
.invite-card .inv-step h2 { font-size: 20px; font-weight: 700; color: #3f3a52; margin: 0; }
.inv-opt { font-size: 14px; font-weight: 500; color: #a5a1b5; }
.inv-divider { height: 1px; background: #eee7f3; margin: 26px 0; }

/* Felder — die Optik der Übergabe entspricht dem Auth-Block */
.invite-card .field { margin-bottom: 0; }
.invite-card .field label { font-size: 14px; font-weight: 600; color: #4f4a63; margin-bottom: 7px; }
.invite-card .field input[type="text"],
.invite-card .field input[type="email"],
.invite-card .field textarea {
  padding: 13px 15px; font-size: 15.5px;
  background: #f6f4fa; border: 2px solid #ece8f3; border-radius: 14px;
  color: #3f3a52; box-shadow: none;
}
.invite-card .field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.invite-card .field input:focus,
.invite-card .field textarea:focus { border-color: #b79dd6; background: #fff; box-shadow: none; }
.invite-card ::placeholder { color: #b3adc4; opacity: 1; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.inv-rels { margin-top: 16px; }
.inv-hint { font-size: 13px; color: #7c9384; margin-top: 6px; }

/* Beziehungs-Chips (nutzt .pill + .invite-relation, hier auf Design-Maße) */
.inv-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.invite-card .invite-relation {
  padding: 9px 16px; font-size: 15px; font-weight: 600;
  background: #f6f4fa; border: 2px solid #ece8f3; color: #6b6580;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.invite-card .invite-relation input { display: none; }   /* Chip selbst ist das Bedienelement */
.invite-card .invite-relation:hover { border-color: #dcd3ea; }
.invite-card .invite-relation:has(input:checked) {
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px rgba(126, 92, 163, .3);
}
/* Tastatur-Bedienung: der Fokus liegt auf dem versteckten Radio → Ring auf den Chip legen. */
.invite-card .invite-relation:focus-within { outline: 2px solid #8266a6; outline-offset: 2px; }

/* Berechtigungs-Karten */
.inv-perms { display: flex; flex-direction: column; gap: 12px; }
.invite-card .role-card {
  align-items: flex-start; gap: 14px; padding: 16px 18px;
  border: 2px solid #ece8f3; border-radius: 18px; background: #fff; text-align: left;
  transition: background-color .14s ease, border-color .14s ease;
}
.invite-card .role-card:hover { border-color: #dcd3ea; }
.invite-card .role-card:has(input:checked) { border-color: #b79dd6; background: #f5eefb; }
.invite-card .role-card:focus-within { outline: 2px solid #8266a6; outline-offset: 2px; }
/* Eigenes Radio (projektweit sind Radios sonst Browser-Standard) */
.invite-card .role-card input[type="radio"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  flex-shrink: 0; width: 22px; height: 22px; margin: 0;
  border: 2px solid #cfc7dd; border-radius: 50%; background: #fff;
  position: relative; cursor: pointer;
  transition: border-color .14s ease;
}
/* Punkt absolut zentriert statt per Grid: `display:grid; place-content:center`
   setzte ihn sichtbar nach oben-links versetzt (die Zeilenhöhe des Eingabefelds
   färbt auf die implizite Grid-Zeile ab). top/left 50 % beziehen sich auf die
   Polsterbox — also auf die Fläche INNERHALB des 2-px-Rands — und die
   Rückverschiebung um die halbe eigene Größe trifft die Mitte exakt, unabhängig
   von Schriftgröße und Zeilenhöhe. */
.invite-card .role-card input[type="radio"]::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #8266a6; opacity: 0; transition: opacity .14s ease;
}
.invite-card .role-card input[type="radio"]:checked { border-color: #8266a6; }
.invite-card .role-card input[type="radio"]:checked::before { opacity: 1; }
.inv-perm__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #f2eef8; color: #9b93ac;
  transition: background-color .14s ease, color .14s ease;
}
.invite-card .role-card:has(input:checked) .inv-perm__icon { background: #e9dcf5; color: var(--lavender-deep); }
.inv-perm__text { flex: 1; min-width: 0; }
.inv-perm__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-perm__title { font-size: 16px; font-weight: 600; color: #3f3a52; }
.inv-perm__desc { display: block; font-size: 13.5px; line-height: 1.45; color: #7a7590; margin-top: 3px; }
.inv-badge {
  font-size: 12px; font-weight: 700; color: var(--lavender-deep);
  background: #ece0f7; padding: 2px 9px; border-radius: var(--r-pill);
}

/* Benachrichtigungs-Häkchen (globale Custom-Checkbox, hier nur der Gradient) */
.inv-notify { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; font-size: 15px; color: #4f4a63; }
.invite-card .inv-notify input[type="checkbox"]:checked { background-color: #8266a6; border-color: #8266a6; }

/* Footer */
.inv-footer { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 26px; }
.invite-card .inv-submit {
  padding: 13px 28px; font-size: 16.5px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 8px 18px rgba(126, 92, 163, .28);
}
.invite-card .inv-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(126, 92, 163, .4); }

@media (max-width: 560px) {
  .invite-card[data-wizard] { padding: 26px 20px 22px; border-radius: 22px; }
  .invite-title { font-size: 31px; }
  .inv-grid { grid-template-columns: 1fr; }
  .inv-footer { align-items: stretch; gap: 10px; }
  .invite-card .inv-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-card[data-wizard] { animation: none; }
  .invite-card .invite-relation,
  .invite-card .role-card,
  .invite-card .role-card input[type="radio"],
  .invite-card .role-card input[type="radio"]::before,
  .inv-perm__icon { transition: none; }
  .invite-card .inv-submit:hover { transform: none; }
}

/* ─── „Einladung verschickt" (Design-Übergabe) ────────────────────────────────
   Bestätigungs-Screen nach dem Absenden. Alles unter .inv-sent gescopet.
   Abweichung von der Übergabe: die zeigt eine leere Vollseite, hier bleibt die
   Konto-Sidebar stehen — die Karte sitzt deshalb zentriert in der Hauptspalte
   statt im Fenster. Mint-Grund + Kindermuster kommen schon vom Layout (.mint-bg).
   Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung). */
.inv-sent { display: flex; justify-content: center; }
.inv-sent__card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 560px;
  background: #fff; border-radius: 30px;
  padding: 48px 44px 38px;
  box-shadow: 0 28px 70px rgba(74, 58, 96, .20);
  text-align: center;
  animation: floatIn .5s ease both;               /* Keyframe existiert (Auth-Block) */
}
/* Grüner Schimmer hinter dem Medaillon — nimmt dessen Farbe in die Karte auf. */
.inv-sent__glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 340px; height: 240px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(124, 192, 166, .22), transparent 70%);
}

/* Medaillon: Scheibe + dauerhaft laufende Puls-Welle dahinter */
.inv-sent__medal {
  position: relative; width: 96px; height: 96px; margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
}
.inv-sent__wave {
  position: absolute; inset: 0; border-radius: 50%;
  background: #7cc0a6; opacity: .35;
  animation: inv-ring-pulse 2.4s ease-out .5s infinite;
}
.inv-sent__disc {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #8fceb4, #57a883);
  box-shadow: 0 14px 30px rgba(63, 138, 104, .4);
  animation: inv-ring-pop .55s cubic-bezier(.2, .9, .3, 1.4) both;
}
/* Der Haken zeichnet sich, sobald die Scheibe steht: die Strichlänge (30) wird von
   „ganz versetzt" auf 0 gefahren. Ohne stroke-dasharray gäbe es nichts zu zeichnen. */
.inv-sent__check { stroke-dasharray: 30; animation: inv-check-draw .4s ease .5s both; }
@keyframes inv-ring-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes inv-ring-pulse {
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes inv-check-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes inv-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.inv-sent__title {
  font-family: var(--font-script); font-weight: 400; font-size: 40px; line-height: 1.1;
  color: var(--lavender-deep); margin: 0 0 10px;
}
.inv-sent__lead { font-size: 16.5px; line-height: 1.55; color: #6a6580; margin: 0 auto 26px; max-width: 400px; }

/* Empfänger-Zeile: Avatar · Name/E-Mail · „Gesendet" */
.inv-sent__row {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #f7f4fb; border: 1px solid #ece3f6; border-radius: 18px;
  padding: 14px 16px; margin-bottom: 14px;
  animation: inv-row-in .4s ease .35s both;
}
.inv-sent__avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  color: #fff; font-size: 19px; font-weight: 700;
}
.inv-sent__who { flex: 1; min-width: 0; }        /* min-width:0 → die E-Mail darf kürzen */
.inv-sent__name { display: block; font-size: 16px; font-weight: 700; color: #3f3a52; }
.inv-sent__mail { display: block; font-size: 13.5px; color: #8b86a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-sent__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #5a9e86;
  background: #e7f4ee; border-radius: var(--r-pill); padding: 5px 11px;
}

.inv-sent__note {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: #7a7590; background: #faf8fc;
  border-radius: 14px; padding: 11px 16px; margin: 0 0 30px;
  animation: inv-row-in .4s ease .45s both;
}
.inv-sent__note svg { flex-shrink: 0; color: #a58fc4; }
.inv-sent__note strong { color: #5f5a70; font-weight: 700; }

/* Test-Modus-Block (nur ohne Mailjet-Zugang) — links ausgerichtet, sonst liest
   sich der Link in der zentrierten Karte nicht. */
.inv-sent__dev { margin: 0 0 14px; text-align: left; }
.inv-sent__devfield { text-align: left; margin-bottom: 26px; }

.inv-sent__actions { display: flex; flex-direction: column; gap: 12px; }
.inv-sent__primary {
  width: 100%; padding: 15px 24px; font-size: 16.5px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 10px 22px rgba(126, 92, 163, .32);
}
.inv-sent__primary:hover {
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(126, 92, 163, .44);
}
.inv-sent__secondary {
  width: 100%; padding: 13px 24px; font-size: 15.5px; font-weight: 600;
  color: var(--lavender-deep); background: #fff; border: 2px solid #e7ddf3;
  transition: background .14s ease, border-color .14s ease;
}
.inv-sent__secondary:hover { background: #f7f2fc; border-color: #d5c3ec; }

@media (max-width: 560px) {
  .inv-sent__card { padding: 38px 22px 30px; }
  .inv-sent__title { font-size: 32px; }
  /* Auf schmalen Geräten bricht die Empfänger-Zeile, sonst quetscht der Chip die E-Mail. */
  .inv-sent__row { flex-wrap: wrap; }
  .inv-sent__who { flex-basis: calc(100% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Die Puls-Welle läuft endlos — sie MUSS hier aus, die globale Regel staucht
     Animationen nur auf 0,001 ms und würde sie weiter wiederholen lassen. */
  .inv-sent__card, .inv-sent__wave, .inv-sent__disc,
  .inv-sent__check, .inv-sent__row, .inv-sent__note { animation: none; }
  .inv-sent__check { stroke-dasharray: none; }
  .inv-sent__primary:hover { transform: none; }
}

/* ─── Kinder-Seite: Kopfzeile + Leerzustand (Design-Übergabe „Kinder") ────────
   Nur der Inhaltsbereich rechts; Header, linke Navigation und Footer bleiben.
   Alles unter .kids-* gescopet — die geteilte .empty-state-Klasse (Album,
   Favoriten, Zeitstrahl) bleibt bewusst unangetastet.
   Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung). */
.kids-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin: 0 0 22px;
}
.kids-head__title {
  font-family: var(--font-script); font-weight: 400; font-size: 40px; line-height: 1.1;
  color: var(--lavender-deep); margin: 0;
}
.kids-head__sub { font-size: 15px; color: #4f5b53; margin: 6px 0 0; max-width: 46ch; }
/* „Kind anlegen": heller Sekundär-Knopf, damit der große CTA in der Karte der
   Hauptweg bleibt. Halbtransparent, weil er direkt auf dem Mint-Grund sitzt. */
.kids-add {
  padding: 12px 20px; font-size: 15.5px; font-weight: 600;
  color: var(--lavender-deep); background: rgba(255, 255, 255, .85);
  border: 2px solid #e0d2f0;
  transition: background .14s ease, border-color .14s ease;
}
.kids-add:hover { background: #fff; border-color: #c9b2e6; }

/* ─── Leerzustands-Karte (geteilt) ────────────────────────────────────────────
   Aus der Übergabe „Kinder (Leerzustand)"; die Übergabe „Feste" bringt dieselbe
   Komponente mit denselben Werten mit. Deshalb NICHT je Screen dupliziert, sondern
   hier einmal — genutzt von app/Views/child/index.php und app/Views/event/index.php.
   Wer sie auf einem weiteren Screen braucht: Medaillon-Figur und Texte tauschen,
   Struktur unverändert lassen. */
.empty-card {
  background: #fff; border-radius: 28px;
  padding: 56px 40px 52px; text-align: center;
  box-shadow: 0 18px 44px rgba(74, 58, 96, .14);
  animation: floatIn .5s ease both;               /* Keyframe existiert (Auth-Block) */
}
.empty-card__inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* Illustrations-Medaillon: Verlaufskreis + gestrichelter Rand, sanft schwebend */
.empty-card__badge {
  position: relative; width: 132px; height: 132px; margin-bottom: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #8266a6;
  background: radial-gradient(circle at 50% 40%, #f0e6fb, #e4d5f5);
  animation: empty-bob 4s ease-in-out infinite;
}
/* Der gestrichelte Rand liegt auf einer eigenen Ebene — als border am Medaillon
   würde er die 132 px sprengen und die Figur aus der Mitte schieben. */
.empty-card__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed #d8c6ef; }
.empty-card__badge svg { position: relative; }
@keyframes empty-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.empty-card__title {
  font-family: var(--font-script); font-weight: 400; font-size: 32px; line-height: 1.15;
  color: var(--lavender-deep); margin: 0 0 12px;
}
.empty-card__text { font-size: 16px; line-height: 1.6; color: #5f5a70; margin: 0 0 30px; max-width: 400px; }
.empty-card__cta {
  padding: 15px 30px; font-size: 16.5px; font-weight: 600; gap: 9px;
  color: #fff; background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 10px 22px rgba(126, 92, 163, .32);
}
.empty-card__cta:hover {
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(126, 92, 163, .44);
}

/* Nutzen-Hinweise: drei Spalten, oben abgetrennt */
.empty-perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%;
  margin-top: 40px; padding-top: 32px; border-top: 1px solid #f0ebf5;
}
.empty-perk { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.empty-perk__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #f5eefb; color: #8266a6;
}
.empty-perk__title { font-size: 14.5px; font-weight: 600; color: #4f4a63; line-height: 1.35; }
.empty-perk__desc { font-size: 13px; color: #8b86a0; line-height: 1.4; }

@media (max-width: 600px) {
  .kids-head__title { font-size: 32px; }
  .empty-card { padding: 40px 20px 36px; border-radius: 22px; }
  /* Einspaltig statt drei — bei 3 Spalten bleiben sonst ein bis zwei Wörter je Zeile. */
  .empty-perks { grid-template-columns: 1fr; gap: 22px; }
  .empty-card__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Das Schweben läuft endlos — die globale Regel staucht Animationen nur auf
     0,001 ms und würde es weiter wiederholen lassen. */
  .empty-card, .empty-card__badge { animation: none; }
  .empty-card__cta:hover { transform: none; }
}

/* ─── Fest: Fotos hochladen (Design-Übergabe „Fotos hochladen") ───────────────
   Erster Screen nach dem Anlegen eines Festes. Alles unter .fest-up* gescopet.
   Die Fortschrittsanzeige beim Upload ist NICHT hier — die kommt aus dem
   gemeinsamen Overlay des Album-Uploads (.up-*), das über data-upload-url /
   data-upload-field auf diesen Screen gerichtet wird.
   Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung). */
.fest-up { max-width: 760px; margin: 0 auto; padding: 26px 20px 80px; }

.fest-up__back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px 9px 15px; margin-bottom: 10px;
  font-size: 15.5px; font-weight: 600; color: #4f4a63; text-decoration: none;
  background: rgba(255, 255, 255, .85); border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(74, 58, 96, .12);
  transition: background .14s ease, transform .14s ease;
}
.fest-up__back:hover { background: #fff; transform: translateX(-2px); }

.fest-up__title {
  font-family: var(--font-script); font-weight: 400; font-size: 46px; line-height: 1.1;
  color: var(--lavender-deep); text-align: center; margin: 6px 0 14px;
  overflow-wrap: anywhere;                        /* lange Festnamen ohne Leerzeichen */
}

.fest-up__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.fest-up__date { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: #5f6f66; }
.fest-up__count { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--lavender-deep); }
.fest-up__dot { color: #a3b3aa; }
.fest-up__live { font-size: 13px; font-weight: 700; color: #3f7a5a; background: rgba(168, 213, 186, .35); padding: 2px 10px; border-radius: var(--r-pill); }
/* Gestrichelte Füll-Linie bis zum rechten Rand — bricht sie um, ist sie schlicht weg. */
.fest-up__rule { flex: 1; min-width: 40px; height: 1px; border-top: 2px dashed #a7c3b7; margin-left: 6px; }

.fest-up__share { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.fest-up__share.is-live { background: #e6f5ee; }

/* Ablagefläche — zugleich das Formular für den Weg ohne JS */
.fest-up__drop {
  display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center;
  width: 100%; padding: 42px 28px 38px; margin: 0;
  background: rgba(255, 255, 255, .62);
  border: 2.5px dashed var(--lavender-soft); border-radius: 28px;
  box-shadow: 0 20px 50px rgba(74, 58, 96, .14);
  cursor: pointer;
  animation: floatIn .45s ease both;              /* Keyframe existiert (Auth-Block) */
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fest-up__drop:hover, .fest-up__drop.is-over {
  background: #fff; border-color: #8266a6; transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(74, 58, 96, .2);
}
.fest-up__plus {
  width: 82px; height: 82px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff;
  box-shadow: 0 12px 26px rgba(126, 92, 163, .4);
  animation: fest-plus-pulse 2.6s ease-in-out infinite;
}
@keyframes fest-plus-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.fest-up__droptitle { font-size: 21px; font-weight: 700; color: #3f3a52; margin-top: 4px; }
.fest-up__droptext { font-size: 14.5px; color: #6f7d74; max-width: 400px; line-height: 1.5; }
.fest-up__pick {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff;
  font-size: 15px; font-weight: 600; box-shadow: 0 8px 18px rgba(126, 92, 163, .3);
}
/* Der Weg ohne JS. app.js setzt .has-js auf den Wurzelknoten und blendet ihn dann aus —
   umgekehrt (per JS einblenden) wäre er ohne JS unsichtbar und der Screen unbedienbar. */
.fest-up__nojs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.fest-up.has-js .fest-up__nojs { display: none; }

.fest-up__empty {
  display: flex; gap: 13px; align-items: center; margin-top: 20px; padding: 16px 20px;
  background: #fdf6dd; border: 1px solid #f2e6ad; border-left: 4px solid #e8c14a; border-radius: 16px;
}
.fest-up__empty-ico { flex: 0 0 auto; display: flex; color: #b8901f; }
.fest-up__empty p { font-size: 14.5px; line-height: 1.5; color: #8a6d18; margin: 0; }

.fest-up__gallery { margin-top: 26px; }
.fest-up__ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 14px; flex-wrap: wrap; }
.fest-up__ghead h2 { font-size: 17px; font-weight: 700; color: #3f3a52; margin: 0; }
.fest-up__gacts { display: flex; align-items: center; gap: 6px; }
.fest-up__gacts form { margin: 0; }
.fest-up__select { padding: 7px 14px; font-size: 14px; }
.fest-up__clear {
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #a24b52;
  padding: 7px 12px; border-radius: var(--r-pill); transition: background .14s ease;
}
.fest-up__clear:hover { background: rgba(162, 75, 82, .1); }

.fest-up__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fest-up__add {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 2.5px dashed var(--lavender-soft); border-radius: 16px;
  background: rgba(255, 255, 255, .55); color: #8266a6; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fest-up__add:hover { background: #fff; border-color: #8266a6; color: #634882; }

.fest-up__tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(74, 58, 96, .16);
  animation: fest-pop-in .28s ease both;
}
@keyframes fest-pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.fest-up__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fest-up__adopted {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(168, 213, 186, .92); font-size: 11px; font-weight: 700; color: #2f6247;
}
.fest-up__rmform { position: absolute; right: 8px; top: 8px; z-index: 3; margin: 0; }
.fest-up__rm {
  width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(63, 58, 82, .55); color: #fff;
  transition: background .14s ease;
}
.fest-up__rm:hover { background: rgba(63, 58, 82, .8); }

/* Auswahl-Modus: Kreis statt ✕ — im Normalzustand sieht die Kachel aus wie in der Übergabe */
.fest-up__mark { display: none; }
.fest-up__gallery.is-selecting .fest-up__rmform { display: none; }
.fest-up__gallery.is-selecting .fest-up__tile { cursor: pointer; }
.fest-up__gallery.is-selecting .fest-up__mark {
  display: block; position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(63, 58, 82, .3);
}
.fest-up__gallery.is-selecting .fest-up__tile.is-sel { outline: 3px solid var(--lavender-deep); outline-offset: -3px; }
.fest-up__gallery.is-selecting .fest-up__tile.is-sel .fest-up__mark { background: var(--lavender-deep); border-color: #fff; }
/* Häkchen im gefüllten Kreis (::after statt eigenem Element — der Kreis ist reine Deko) */
.fest-up__gallery.is-selecting .fest-up__tile.is-sel .fest-up__mark::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* Schon übernommene Fotos lassen sich nicht erneut auswählen. */
.fest-up__gallery.is-selecting .fest-up__tile.is-adopted { opacity: .55; cursor: default; }
.fest-up__gallery.is-selecting .fest-up__tile.is-adopted .fest-up__mark { display: none; }

.fest-up__bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: #fff; border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(74, 58, 96, .22);
}
.fest-up__barcount { font-size: 14.5px; font-weight: 700; color: #3f3a52; }

@media (max-width: 560px) {
  .fest-up__title { font-size: 34px; }
  .fest-up__drop { padding: 32px 18px 28px; border-radius: 22px; }
  .fest-up__plus { width: 68px; height: 68px; }
  .fest-up__plus svg { width: 38px; height: 38px; }
  .fest-up__grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
  .fest-up__bar { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Der Plus-Puls läuft endlos — die globale Regel staucht Animationen nur auf
     0,001 ms und würde ihn weiter wiederholen lassen. */
  .fest-up__drop, .fest-up__plus, .fest-up__tile { animation: none; }
  .fest-up__drop:hover { transform: none; }
  .fest-up__back:hover { transform: none; }
  /* Bisher offene Lücke im Upload-Overlay: der Balken je Foto hatte keine Regel. */
  .up-rowbar > span { transition: none; }
}

/* ─── Fest anlegen (Design-Übergabe „Neues Fest") ─────────────────────────────
   /fest/neu. Alles unter .fest-new* gescopet — die Felder hier haben eigene
   Masse (Radius 14, 15.5 px) und duerfen .field des Restsystems nicht anfassen.
   Die Zurueck-Pille teilt sich die Regel mit /fest/{id}/fotos (.fest-up__back).
   Font: Nunito statt „Baloo 2" der Übergabe (Projektentscheidung). */
.fest-new { max-width: 600px; margin: 0 auto; padding: 26px 20px 80px; }

.fest-new__title {
  font-family: var(--font-script); font-weight: 400; font-size: 40px; line-height: 1.1;
  color: var(--lavender-deep); text-align: center; margin: 6px 0 22px;
}

.fest-new__card {
  background: #fff; border-radius: 28px; padding: 32px 34px 28px;
  box-shadow: 0 24px 60px rgba(74, 58, 96, .18);
  animation: floatIn .45s ease both;              /* Keyframe existiert (Auth-Block) */
}

/* Erklär-Baustein statt der frueheren Emoji-Textwand */
.fest-new__explain {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; margin-bottom: 26px;
  background: linear-gradient(150deg, #f7f2fc, #f1e8fa);
  border: 1px solid #ece0f7; border-radius: 18px;
}
.fest-new__explain-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #ece0f7; color: var(--lavender-deep);
}
.fest-new__explain p { font-size: 14.5px; line-height: 1.55; color: #5f5a70; margin: 0; }
.fest-new__explain b { color: #3f3a52; }

.fest-new__field { margin-bottom: 20px; }
/* :not(.fest-new__pill) — die Segment-Pills sind ebenfalls <label> und wuerden
   sonst als Feld-Beschriftung umgebrochen und eingefaerbt. */
.fest-new__field label:not(.fest-new__pill),
.fest-new__label {
  display: block; font-size: 14px; font-weight: 600; color: #4f4a63; margin: 0 0 8px;
}
.fest-new__hint { font-size: 13px; line-height: 1.5; color: #7c9384; margin: 8px 0 0; }

.fest-new__field input[type="text"],
.fest-new__field input[type="date"],
.fest-new__field select {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 15.5px; color: #3f3a52;
  background: #f6f4fa; border: 2px solid #ece8f3; border-radius: 14px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.fest-new__field input:focus,
.fest-new__field select:focus { border-color: #b79dd6; background: #fff; }
.fest-new ::placeholder { color: #b3adc4; opacity: 1; }

.fest-new__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }

/* Eigener Chevron: der Standardpfeil des Browsers laesst sich nicht einfaerben. */
.fest-new__select { position: relative; }
.fest-new__select select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.fest-new__chev {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; pointer-events: none; color: #8b86a0;
}

.fest-new__lockwrap { position: relative; }
/* .fest-new__field davor: sonst schlaegt die Attribut-Regel oben das Einruecken
   und das Schloss liegt auf dem Platzhalter. */
.fest-new__field .fest-new__lockwrap input { padding-left: 44px; }
.fest-new__lock { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: flex; color: #a99cc0; }

/* Zugriffsdauer: echte Radios, damit der Screen ohne JS und per Tastatur laeuft.
   Der Radio selbst liegt unsichtbar unter dem <span>, der die Pille zeichnet. */
.fest-new__seg { display: flex; gap: 9px; flex-wrap: wrap; }
.fest-new__pill { position: relative; cursor: pointer; }
.fest-new__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.fest-new__pill span {
  display: inline-flex; padding: 10px 20px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; color: #6b6580;
  background: #f6f4fa; border: 2px solid #ece8f3;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.fest-new__pill input:checked + span {
  background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff;
  border-color: transparent; box-shadow: 0 6px 14px rgba(126, 92, 163, .3);
}
.fest-new__pill input:focus-visible + span { outline: 2px solid #8266a6; outline-offset: 2px; }

/* Bestätigung — klickbare Zeile mit Amber-Kante. Die Checkbox bleibt ein echtes
   required-Feld, die Browser-Meldung haengt also am sichtbaren Kasten. */
.fest-new__confirm {
  position: relative;                             /* haelt die unsichtbare Checkbox am Kasten */
  display: flex; align-items: flex-start; gap: 13px; width: 100%;
  padding: 15px 17px; border-radius: 16px; cursor: pointer;
  background: #fdf6dd; border: 1px solid #f2e6ad; border-left: 4px solid #e8c14a;
  transition: background .14s ease;
}
.fest-new__confirm:hover { background: #fcf2cf; }
.fest-new__confirm input { position: absolute; opacity: 0; width: 0; height: 0; }
.fest-new__box {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: #fffdf5; border: 2px solid #d9c88a;
  transition: background .14s ease, border-color .14s ease;
}
/* Haken als CSS-Figur (zwei Kanten eines gedrehten Kastens) — kein Extra-Asset. */
.fest-new__box::after {
  content: ""; width: 6px; height: 11px; margin-top: -3px;
  border: solid #6b5309; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); opacity: 0; transition: opacity .14s ease;
}
.fest-new__confirm input:checked + .fest-new__box { background: #e8c14a; border-color: #b8901f; }
.fest-new__confirm input:checked + .fest-new__box::after { opacity: 1; }
.fest-new__confirm input:focus-visible + .fest-new__box { outline: 2px solid #b8901f; outline-offset: 2px; }
.fest-new__confirm-text { flex: 1; font-size: 14px; line-height: 1.5; color: #8a6d18; }

.fest-new__divider { height: 1px; border: 0; background: #eee7f3; margin: 24px 0; }

.fest-new__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.fest-new__cancel {
  padding: 12px 22px; font-size: 16px; font-weight: 600;
  color: #6b6580; background: transparent; box-shadow: none;
}
.fest-new__cancel:hover { color: #3f3a52; background: transparent; }
.fest-new__submit {
  padding: 14px 26px; font-size: 16px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 10px 22px rgba(126, 92, 163, .3);
}
.fest-new__submit:hover {
  transform: translateY(-2px); box-shadow: 0 16px 32px rgba(126, 92, 163, .42);
}

@media (max-width: 560px) {
  .fest-new__title { font-size: 33px; }
  .fest-new__card { padding: 24px 20px 22px; border-radius: 22px; }
  /* Untereinander: nebeneinander bleibt vom Kind-Select nur noch der Pfeil uebrig. */
  .fest-new__row { grid-template-columns: 1fr; }
  .fest-new__actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fest-new__card { animation: none; }
  .fest-new__submit:hover { transform: none; }
}

/* Onboarding-/Tipps-Overlay (nutzt .modal/.modal-backdrop) */
.tour-modal { text-align: center; max-width: 460px; }
.tour-body h3 { margin: 10px 0 6px; font-size: 20px; }
.tour-body p { margin: 0; color: var(--ink-soft, #6b6472); }
.tour-emoji { font-size: 42px; line-height: 1; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 10px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #ddd); }
.tour-dot.active { background: var(--lavender-deep, #7d5a9c); }
.tour-nav { justify-content: space-between; }

/* Das hidden-Attribut muss display:flex/inline-flex von .btn/.passkey-prompt schlagen. */
[hidden] { display: none !important; }

/* ── Passkey-Einrichtungs-Prompt (Screens 21/36) ──────────────────────────────── */
.passkey-prompt { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.passkey-prompt__inner { pointer-events: auto; background: #fff; border: 1.5px solid var(--lavender, #b9a3d6);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(60,40,90,.18); padding: 14px 16px; max-width: 560px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.passkey-prompt__icon { font-size: 30px; line-height: 1; }
.passkey-prompt__text { flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: 2px; }
.passkey-prompt__text strong { font-size: 15px; }
.passkey-prompt__text span { font-size: 13px; color: var(--ink-soft, #6b6472); }
.passkey-prompt__actions { display: flex; gap: 8px; }

/* ── Zurück-Link (Konto-Unterseiten) ──────────────────────────────────────────── */
.back-link { color: var(--lavender-deep); text-decoration: none; font-weight: 700; font-size: 14px; }
.back-link:hover { text-decoration: underline; }

/* ── Einstellungen-Übersicht (Screen 100) ─────────────────────────────────────── */
.set-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);
  color: #fff; border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-card); }
.set-hero-avatar { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.5); }
.set-hero-main { flex: 1; min-width: 200px; }
.set-hero-name { font-size: 21px; font-weight: 800; }
.set-hero-mail { font-size: 13.5px; opacity: .9; margin-top: 2px; word-break: break-all; }
.set-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.set-hero-pill { background: rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 4px 12px; font-size: 12.5px; font-weight: 700; }
.set-hero-btn { background: #fff; color: var(--lavender-deep); }
.set-hero-btn:hover { background: #f4eefc; }

.set-group-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 22px 2px 10px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.set-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px 18px; text-decoration: none; color: var(--ink);
  transition: transform .12s, box-shadow .12s; }
a.set-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-polaroid-hover); }
.set-card.is-danger { border-color: rgba(216,139,139,.3); }
.set-card.is-soon { opacity: .62; cursor: default; }

.set-ico { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--lavender-pale);
  color: var(--lavender-deep); display: flex; align-items: center; justify-content: center; }
.set-ico.danger { background: rgba(216,139,139,.14); color: var(--error); }
.set-ico svg { display: block; }

.set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-sub { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.set-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); }
.set-badge.success { background: var(--mint-pale); color: #3d7a4f; }
.set-badge.gold { background: #fdf4d8; color: #8b6d24; }
.set-badge.error { background: rgba(216,139,139,.15); color: var(--error); }
.set-badge.lavender { background: var(--lavender-pale); color: var(--lavender-deep); }

.set-chev { color: var(--ink-faint); flex: none; display: flex; }
.set-soon { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); background: var(--cream-deep); border-radius: var(--r-pill); padding: 3px 10px; }

.set-help { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px;
  background: rgba(255,255,255,.6); border-radius: 14px; }
.set-help > div { flex: 1; min-width: 200px; }
.set-help-emoji { font-size: 24px; line-height: 1; }

/* ── Benachrichtigungen (Screen 56) ───────────────────────────────────────────── */
.notif-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.notif-row + .notif-row { border-top: 1px solid rgba(0,0,0,.06); }

/* Zeitpunkt der Zusammenfassungen — steht in derselben Karte wie die zwei Mails, die er
   steuert, und ist von ihnen durch dieselbe Linie getrennt wie die Schalter voneinander. */
.notif-timing { margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.06); }
.notif-timing h4 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.notif-txt { flex: 1; min-width: 0; }
.notif-txt b { display: block; font-size: 15px; }
.notif-txt span { font-size: 13px; color: var(--ink-soft); }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.checkbox-row input { margin-top: 2px; }
/* Der Text sitzt neben einem 24er-Kaestchen und stuende oben buendig zu hoch. Kein
   align-items:center: bricht der Text auf schmalen Geraeten um, soll das Kaestchen an
   der ersten Zeile bleiben, nicht in die Mitte des Blocks rutschen. */
.checkbox-row span { margin-top: 3px; }

/* CSS-only Toggle (kein Inline-JS; Persistenz über Formular) */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; cursor: pointer; }
/* [type="checkbox"] ist nötig: input[type="checkbox"]:disabled (Z. 625) ist
   spezifischer als `.switch input` und holte sonst die opacity auf .5 zurück —
   vom 24er-Kästchen blieb dann ein 4px-Randpunkt sichtbar (der „kleine Kreis"
   am gesperrten Schalter). border/background nehmen ihm zusätzlich die Malfläche. */
.switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
  border: 0; background: none;
}
.switch .slider { position: absolute; inset: 0; background: rgba(0,0,0,.16); border-radius: var(--r-pill); transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .slider { background: var(--lavender); }
.switch input:checked + .slider::before { transform: translateX(20px); }
/* Der Slider deckt den Schalter ab und ist das Element unter dem Zeiger — ein gesperrter
   Schalter zeigt hier den normalen Pfeil, kein klickbereites Fingersymbol. */
.switch input:disabled + .slider { opacity: .5; cursor: default; }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(155,123,184,.35); }

/* ── Aktivitäts-Feed (Screen 44) ──────────────────────────────────────────────── */
.activity-new { background: var(--rose-deep); color: #fff; font-size: 12px; font-weight: 800;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.activity-group-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 20px 2px 8px; }
.activity-list { background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.activity-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; position: relative; }
.activity-row + .activity-row { border-top: 1px solid rgba(0,0,0,.05); }
.activity-row.is-unread { background: rgba(155,123,184,.06); }
.activity-row.is-unread::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose-deep); }
.activity-ava { position: relative; flex: none; }
.activity-kind { position: absolute; right: -3px; bottom: -3px; font-size: 13px; line-height: 1;
  background: #fff; border-radius: 50%; padding: 1px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 14.5px; }
.activity-row .activity-when { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 640px) {
  .set-grid { grid-template-columns: 1fr; }
  .set-hero { flex-direction: column; align-items: flex-start; }
  .set-hero-btn { align-self: stretch; text-align: center; }
}

/* ── Einstellungen-Sidebar (Screen 011) ───────────────────────────────────────── */
.settings-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.settings-main { min-width: 0; }
/* mobil: Sidebar als horizontale Tab-Leiste (scrollbar) */
.settings-side { margin: 0 -16px 4px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings-side::-webkit-scrollbar { display: none; }
.settings-side nav { display: flex; flex-direction: row; gap: 8px; width: max-content; position: relative; }
.settings-side-link { display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 8px 14px; border-radius: var(--r-pill);
  text-decoration: none; color: #5a5470; font-weight: 500; font-size: 15px; background: rgba(0,0,0,.04);
  transition: color .2s ease, background-color .2s ease; }
/* Icon hat eine EIGENE Farbe (Design: grauer als der Text) — stroke="currentColor" am <svg>
   greift auf diese color-Regel, nicht auf die des Links. Aktiv/Danger überschreiben sie. */
.settings-side-link__icon { flex-shrink: 0; display: block; color: #9b93ac; transition: color .2s ease; }
.settings-side-link:hover { background: #f4f0fa; }
.settings-side-link.active { background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff; font-weight: 600; }
.settings-side-link.active .settings-side-link__icon { color: #fff; }
.settings-side-link.is-danger { color: #c2463f; }
.settings-side-link.is-danger .settings-side-link__icon { color: #c2463f; }
.settings-side-link.is-danger:hover { background: #fbeeed; }
.settings-side-link.is-danger.active { background: var(--error); color: #fff; }
.settings-side-link.is-danger.active .settings-side-link__icon { color: #fff; }

/* Gleitender Aktiv-Indikator (per app.js positioniert). Ohne JS bleibt der gefüllte
   .active-Link (oben) als Fallback sichtbar; erst .has-marker aktiviert den Marker. */
.settings-side__marker { position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; pointer-events: none;
  border-radius: var(--r-pill); background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 8px 18px rgba(126, 92, 163, .3);
  transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1),
              height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease, background-color .2s ease; }
.settings-side__marker.is-danger { background: var(--error); box-shadow: 0 8px 18px rgba(216, 139, 139, .35); }
.settings-side.has-marker .settings-side-link { position: relative; z-index: 1; }
/* Text erst einfärben, wenn der gleitende Marker (0.28s) fast da ist — sonst blitzt
   heller Text kurz auf hellem Grund auf. Beim Verlassen (ohne Delay) wird sofort zurückgefärbt. */
.settings-side.has-marker .settings-side-link.active { background: transparent; transition-delay: .16s; }
.settings-side.has-marker .settings-side-link.is-danger.active { background: transparent; }

/* ── Mobil: Menü zum Aufklappen ───────────────────────────────────────────────
   Die Wisch-Leiste zeigte auf einem 375er-Gerät nur „Mein Profil" — die restlichen
   acht Punkte lagen 1086px weit rechts, ohne sichtbare Bildlaufleiste. Deshalb hier
   ein Knopf mit dem aktuellen Punkt, der die Liste als Karte darunter aufklappt.
   `is-collapsible` setzt app.js: ohne JS bliebe die Liste sonst zu. */
.settings-side__toggle { display: none; }
@media (max-width: 859px) {
  .settings-side.is-collapsible { position: relative; overflow: visible; margin: 0 0 4px; padding: 0; }
  .settings-side.is-collapsible .settings-side__toggle {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; color: #5a5470; text-align: left;
    background: #fff; box-shadow: 0 6px 18px rgba(74, 58, 96, .12);
  }
  .settings-side.is-collapsible .settings-side__toggle.is-danger { color: #c2463f; }
  .settings-side.is-collapsible .settings-side__toggle.is-danger .settings-side-link__icon { color: #c2463f; }
  /* Der Pfeil sitzt rechts und dreht sich beim Aufklappen. */
  .settings-side__chev { margin-left: auto; flex: none; color: #9b93ac; transition: transform .2s ease; }
  .settings-side.is-collapsible.is-open .settings-side__chev { transform: rotate(180deg); }
  /* Die Liste schwebt über dem Inhalt, statt ihn zu verschieben — dieselbe weiße
     Karte wie die Sidebar am Desktop. */
  .settings-side.is-collapsible > nav { display: none; }
  .settings-side.is-collapsible.is-open > nav {
    display: flex; flex-direction: column; gap: 2px; width: auto;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border-radius: 18px; padding: 10px;
    box-shadow: 0 18px 44px rgba(74, 58, 96, .22);
  }
  .settings-side.is-collapsible.is-open .settings-side-link { border-radius: 13px; background: transparent; padding: 12px 14px; }
  .settings-side.is-collapsible.is-open .settings-side__marker { border-radius: 13px; }
  /* Ohne den Marker (kein JS-Marker gesetzt) bleibt der gefüllte Aktiv-Link Fallback. */
  .settings-side.is-collapsible.is-open.has-marker .settings-side-link.active { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-side__chev { transition: none; }
}

/* Sanfter Übergang beim Teil-Austausch des rechten Bereichs. */
.settings-main.is-swapping { opacity: .35; transition: opacity .18s ease; }

@media (min-width: 860px) {
  /* Ab hier ist die Sidebar die weiße Karte aus der Übergabe („Fotobuch drucken").
     top:80px bleibt auf unsere Kopfleiste getunt (Design nennt 98px). */
  .settings-layout { grid-template-columns: 258px minmax(0, 1fr); gap: 30px; align-items: start; }
  .settings-side { margin: 0; overflow: visible; position: sticky; top: 80px;
    background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 14px 36px rgba(74, 58, 96, .12); }
  .settings-side nav { flex-direction: column; gap: 2px; width: auto; }
  .settings-side-link { border-radius: 13px; background: transparent; padding: 12px 14px; }
  .settings-side__marker { border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-side-link { transition: none; }
  .settings-side__marker { transition: opacity .18s ease, background-color .2s ease; }
  .settings-main.is-swapping { transition: none; }
}

/* „Konto löschen" optisch abtrennen (letzter Eintrag). Eigenes Element, damit die
   Marker-Geometrie (offsetTop der Links) unberührt bleibt. Nur Desktop-Spalte. */
.settings-sep { display: none; }

/* Anker-Ziele nicht unter der klebenden Kopfleiste verstecken. */
.settings-main > .card[id] { scroll-margin-top: 88px; }

@media (min-width: 860px) {
  .settings-sep { display: block; border: 0; border-top: 1px solid #eee7f3; margin: 10px 8px; }
}

/* ─── Auth-Icon-Badge (Reset-/Verify-Screens 29–33) ────────────────────── */
.auth-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lavender-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
}
.auth-icon.lg { width: 88px; height: 88px; font-size: 40px; }
.auth-icon.pulse { position: relative; z-index: 0; }
.auth-icon.pulse::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--lavender-pale); opacity: .5; z-index: -1;
  animation: auth-pulse 1.6s ease infinite;
}
@keyframes auth-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.3);  opacity: 0; }
  100% { transform: scale(1.3);  opacity: 0; }
}

/* ─── Willkommen-Erfolgsseite (Screen 33) ──────────────────────────────── */
.auth-card h1.xl { font-size: 44px; }
.confetti-wrap { position: relative; width: 120px; height: 120px; margin: 0 auto 22px; }
.confetti-wrap svg { position: absolute; inset: 0; }
.success-badge {
  position: absolute; top: 16px; left: 16px;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--success); color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(168,213,186,.6);
  animation: auth-pop .5s ease;
}
@keyframes auth-pop {
  0%   { transform: scale(.6);  opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.domain-chip {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  background: var(--lavender-pale); border-radius: var(--r-md);
  padding: 12px 18px; margin: 20px 0;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--lavender-deep);
}
.domain-chip .dc-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Faux-Postfach-Vorschau (Screen 30) ───────────────────────────────── */
.mailbox-preview {
  background: var(--cream);
  border: 1px dashed rgba(123,93,156,.28);
  border-radius: var(--r-md);
  padding: 16px 18px; text-align: left; margin: 4px 0 20px;
}
.mailbox-preview .mp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mailbox-preview .mp-avatar {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: var(--lavender); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script); font-weight: 700; font-size: 22px; line-height: 1;
}
.mailbox-preview .mp-from { font-size: 13px; font-weight: 700; color: var(--ink); }
.mailbox-preview .mp-meta { font-size: 11.5px; color: var(--ink-faint); }
.mailbox-preview .mp-subject { font-size: 14px; font-weight: 700; margin-top: 6px; }
.mailbox-preview .mp-snippet { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* ─── Passwort-Stärke + Kriterien (Screens 31 & 99) ────────────────────── */
/* Nur Anzeige-Feedback (JS füllt Balken/Kriterien/Match). Ohne JS bleiben die
   Kriterien als statische Empfehlung sichtbar; Meter/Match sind versteckt. */
.pw-meter { margin-top: 10px; }
.pw-meter[hidden] { display: none; }
.pw-meter-bars { display: flex; gap: 5px; margin-bottom: 6px; }
.pw-meter-bars > span {
  flex: 1; height: 5px; border-radius: 999px;
  background: rgba(58,46,80,.10);
  transition: background .2s ease;
}
.pw-meter-label { font-size: 12.5px; font-weight: 700; }

.pw-match { font-size: 13px; margin-top: 6px; line-height: 1.45; }
.pw-match[hidden] { display: none; }
.pw-match.ok  { color: #3d7a4f; }
.pw-match.bad { color: #b0483f; }

.pw-criteria {
  list-style: none; margin: 6px 0 18px; padding: 14px 16px;
  background: var(--cream); border-radius: var(--r-md);
  display: grid; gap: 8px;
}
.pw-criteria.cols-2 { grid-template-columns: 1fr 1fr; }
.pw-crit-head {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px;
}
.pw-crit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.pw-crit .pw-crit-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: rgba(58,46,80,.12); color: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.pw-crit.is-ok { color: var(--ink); }
.pw-crit.is-ok .pw-crit-dot { background: var(--success); color: white; }
@media (max-width: 640px) { .pw-criteria.cols-2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .auth-icon.pulse::before { animation: none; }
  .success-badge { animation: none; }
  .pw-meter-bars > span { transition: none; }
}

/* ─── Fotobuch-Konfigurator (Design-Übergabe „Fotobuch drucken") ───────────────
   Alles unter .pb-page gescoped und nur auf /fotobuch aktiv. .pill und die
   Custom-Checkbox leben auch auf anderen Screens — global wird nichts umgefärbt.
   Font: Nunito statt „Baloo 2" der Übergabe; Pacifico für Titel + Kennzahl. */
.pb-page .pb-hero {
  display: flex; gap: 22px; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 26px; padding: 36px 38px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(74, 58, 96, .14);
  animation: floatIn .4s ease both;               /* Keyframe existiert (Auth-Block) */
}
.pb-page .pb-hero-text { flex: 1 1 300px; }
.pb-hero-title { font-family: var(--font-script); font-weight: 400; font-size: 40px;
  color: var(--lavender-deep); line-height: 1.1; margin: 0 0 12px; }
.pb-hero-sub { font-size: 15.5px; color: #5f5a70; max-width: 460px; margin: 0; line-height: 1.6; }
.pb-hero-sub strong { color: #3f3a52; }

/* Buch-Mockup — reine CSS-Flächen (Übergabe zeichnet es genauso). */
.pb-book { flex: 0 0 auto; position: relative; width: 150px; height: 180px; border-radius: 14px;
  background: linear-gradient(150deg, #9b7cba, #7a5fa0); box-shadow: 0 16px 30px rgba(126, 92, 163, .34);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.pb-book__cover { position: absolute; top: 16px; left: 16px; right: 16px; height: 88px;
  background: #f4eefb; border-radius: 8px; overflow: hidden; }
.pb-book__sun { position: absolute; top: 12px; right: 14px; width: 20px; height: 20px;
  border-radius: 50%; background: #f2b705; }
.pb-book__hill { position: absolute; bottom: 0; left: 0; width: 100%; height: 38px; display: block; }
.pb-book__label { font-family: var(--font-script); font-size: 19px; color: #fff; position: relative; }
.pb-book__spine { position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px;
  background: rgba(255, 255, 255, .28); border-radius: 0 3px 3px 0; }

/* Info-Box „In Vorbereitung" (statt generischem Gold-Banner) */
.pb-info { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px;
  padding: 15px 18px; background: #fdf6dd; border: 1px solid #f2e6ad; border-radius: 16px; color: #b8901f; }
.pb-info svg { flex: 0 0 auto; margin-top: 1px; }
.pb-info p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #8a6d18; }

.pb-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; margin-top: 24px; }
.pb-card { background: #fff; border-radius: 24px; padding: 28px 30px; box-shadow: 0 18px 44px rgba(74, 58, 96, .14); }
.pb-legend { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: #3f3a52; }
.pb-page .field label { font-size: 14px; font-weight: 600; color: #4f4a63; margin-bottom: 10px; }

/* Auswahl-Pills: inaktiv weiche Fläche, aktiv Gradient (Übergabe) */
.pb-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pb-page .pb-pills .pill { cursor: pointer; position: relative; padding: 9px 18px; font-size: 15px; font-weight: 600;
  background: #f6f4fa; border: 2px solid #ece8f3; color: #6b6580;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; }
.pb-pills input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pb-page .pb-pills .pill:hover { border-color: #dcd3ea; }
.pb-page .pb-pills .pill:has(input:checked) {
  background: linear-gradient(135deg, #9b7cba, #8266a6); border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px rgba(126, 92, 163, .3); }
/* Tastatur: der Fokus liegt auf dem versteckten Radio → Ring auf die Pill legen. */
.pb-page .pb-pills .pill:focus-within { outline: 2px solid #8266a6; outline-offset: 2px; }

/* Von/Bis */
.pb-custom { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pb-custom .field { flex: 1 1 140px; }
.pb-custom .field label { font-size: 13px; font-weight: 600; color: #8b86a0; margin-bottom: 6px; }
.pb-page .pb-custom input[type="date"] { padding: 12px 14px; font-size: 15px; background: #f6f4fa;
  border: 2px solid #ece8f3; border-radius: 13px; color: #3f3a52; box-shadow: none; }
.pb-page .pb-custom input[type="date"]:focus { border-color: #b79dd6; background: #fff; box-shadow: none; }

.pb-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 15.5px; font-weight: 600; color: #3f3a52; }
/* Text 2px tiefer, damit er nicht an der Kästchen-Oberkante klebt. Versatz statt
   margin: bei align-items:center wird die Margin-Box zentriert — ein margin-top:2px
   verschöbe den Text nur um 1px. */
.pb-check > span { position: relative; top: 2px; }
.pb-page .pb-check input[type="checkbox"]:checked { background-color: #8266a6; border-color: #8266a6; }
.pb-star { color: #f2b705; }
.pb-note { font-size: 13.5px; color: #7c9384; margin: 0; line-height: 1.5; }
.pb-note strong { color: #5f5a70; }

/* Paket-Zusammenfassung */
.pb-preview { position: sticky; top: 80px; background: linear-gradient(160deg, #ffffff, #f7f2fc);
  border: 1px solid #ece0f7; border-radius: 24px; padding: 26px; }
.pb-preview-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
  font-weight: 700; color: #a08bbb; margin-bottom: 8px; }
.pb-preview-num { font-family: var(--font-script); font-size: 42px; color: var(--lavender-deep); line-height: 1.1; }
.pb-preview-line { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #5f5a70; margin-top: 8px; }
.pb-preview-line svg { flex: 0 0 auto; color: #8266a6; }
.pb-preview.is-loading { opacity: .55; transition: opacity .15s ease; }
.pb-page .pb-submit { width: 100%; margin-top: 18px; padding: 14px 20px; font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, #9b7cba, #8266a6); box-shadow: 0 8px 18px rgba(126, 92, 163, .28); }
.pb-page .pb-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(126, 92, 163, .4); }

/* Erfolgsseite (fotobuch/done.php) — nicht Teil der Übergabe, daher außerhalb von .pb-page. */
.pb-done-badge { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--lavender-deep); display: flex; align-items: center; justify-content: center; }

@media (max-width: 860px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-preview { position: static; }
}
@media (max-width: 600px) {
  .pb-page .pb-hero { flex-direction: column; text-align: center; padding: 26px 22px; border-radius: 22px; }
  .pb-hero-sub { max-width: none; }
  .pb-card { padding: 22px 20px; border-radius: 20px; }
  .pb-hero-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-preview.is-loading { transition: none; }
  .pb-page .pb-hero { animation: none; }
  .pb-page .pb-pills .pill { transition: none; }
  .pb-page .pb-submit:hover { transform: none; }
}

/* ─── Zeitstrahl (Screen 053) + Ansicht-Umschalter ──────────────────────────── */

/* Segment-Umschalter Raster / Zeitstrahl (Design-Segmented-Control) */
.seg { display: inline-flex; gap: 4px; padding: 5px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(126,92,163,.14);
  border-radius: 999px; }
.seg-item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  font-weight: 600; font-size: 15px; color: #7c7691; text-decoration: none;
  transition: background .15s, color .15s; }
.seg-item svg { display: block; }
.seg-item:hover { color: var(--lavender-deep); }
.seg-item.is-active { color: #fff;
  background: linear-gradient(135deg, #9b7cba, #8266a6);
  box-shadow: 0 6px 14px rgba(126,92,163,.3); }

/* Kopfzeile: Titel links, Zähler rechts */
.section-header.timeline-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; }
.timeline-count { font-size: 13.5px; white-space: nowrap; }

/* Vertikale Achse (durchgehende Linie hinter den Monats-Bullets) */
.timeline { position: relative; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 26px;
  width: 2px; background: linear-gradient(var(--lavender-soft), var(--mint-deep)); }
.timeline-row { position: relative; display: grid; grid-template-columns: 62px 1fr;
  gap: 14px; padding-bottom: 22px; }
.timeline-axis { display: flex; justify-content: center; }
.timeline-bullet { position: relative; z-index: 1; width: 56px; height: 56px;
  border-radius: 50%; background: #fff; border: 2px solid var(--lavender-soft);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; gap: 4px; }
/* line-height fängt die Pacifico-Unterlänge (z. B. „g" in „Aug") ein, gap trennt vom Jahr. */
.timeline-bullet__m { font-size: 19px; color: var(--lavender-deep); line-height: 1.1; }
.timeline-bullet__y { font-size: 10px; color: var(--ink-faint); font-weight: 700; letter-spacing: .3px; }

/* Monats-Karte */
.timeline-card { padding: 16px 16px 14px; }
.timeline-card__head { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.timeline-card__title { font-weight: 800; font-size: 17px; color: var(--ink); }
.timeline-card__meta { font-size: 13px; margin-top: 2px; }
.btn.timeline-all { padding: 6px 12px; font-size: 13px; flex: none; }

/* Meilenstein-Banner (gold, wie im Design) */
.timeline-milestone { display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; margin: 0 0 12px;
  background: linear-gradient(90deg, rgba(232,185,86,.16), rgba(232,185,86,.04));
  border-left: 3px solid var(--gold); border-radius: 10px; }
.timeline-milestone__icon { font-size: 18px; line-height: 1.3; }
.timeline-milestone__label { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.timeline-milestone__date { font-size: 12.5px; margin-top: 1px; }

/* Foto-Streifen (Mini-Polaroids) */
.timeline-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.timeline-photo { flex: 0 0 auto; width: 130px; margin: 0; text-decoration: none; }
.timeline-more { flex: 0 0 auto; width: 92px; min-height: 112px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px dashed var(--lavender-soft); border-radius: 12px; text-decoration: none;
  color: var(--lavender-deep); transition: background .15s; }
.timeline-more:hover { background: var(--lavender-pale); }
.timeline-more__plus { font-weight: 800; font-size: 20px; }

/* Ursprungs-Sentinel */
.timeline-origin { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; }
.timeline-origin__bullet { position: relative; z-index: 1; justify-self: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--mint-pale);
  color: var(--mint-deep); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.timeline-origin__text { font-style: italic; color: var(--ink-soft); font-size: 14.5px; }

/* Fuß des Zeitstrahls: „Weitere Monate laden" (zentriert) bzw. der Ursprung.
   text-align zentriert nur den Inline-Button; der Ursprung ist ein eigenes Grid
   und bleibt an der Zeitachse ausgerichtet. */
.timeline-foot { text-align: center; padding: 20px 0 4px; }
.timeline-loadmore { margin: 0 auto; }
.timeline-loadmore[aria-busy="true"] { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
  .timeline::before { left: 21px; }
  .timeline-row, .timeline-origin { grid-template-columns: 42px 1fr; gap: 10px; }
  .timeline-bullet { width: 40px; height: 40px; }
  .timeline-bullet__m { font-size: 14px; }
  .timeline-bullet__y { font-size: 8px; }
  .timeline-photo { width: 108px; }
  .section-header.timeline-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-item, .timeline-more { transition: none; }
}

/* ─── 404-Seite (Screen 048) ────────────────────────────────────────────────── */
.nf { max-width: 600px; padding-top: 40px; padding-bottom: 64px; text-align: center; }

/* Illustration: zwei überlappende Polaroids (dekorativ, nicht interaktiv) */
.nf-art { position: relative; width: 264px; height: 234px; margin: 0 auto 22px; pointer-events: none; }
.nf-art .polaroid { position: absolute; width: 188px; margin: 0; }
.nf-pol--back  { left: 4px;  top: 20px; transform: rotate(-8deg); opacity: .6; }
.nf-pol--front { right: 4px; top: 0;    transform: rotate(4deg); }
.nf-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--lavender-pale), var(--mint-pale)); }
.nf-code-fill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cream-deep); }
.nf-code { font-family: var(--font-mono); font-size: 58px; font-weight: 800; color: var(--lavender);
  letter-spacing: -.04em; }
.nf-pcap { margin-top: 8px; font-family: var(--font-script); font-size: 17px; color: var(--ink-soft); line-height: 1; }
.nf-cap { margin-top: 8px; font-family: var(--font-mono); text-transform: uppercase; font-size: 10.5px;
  letter-spacing: .06em; color: var(--ink-faint); }

.nf-title { font-size: 52px; margin: 6px 0 4px; }
.nf-lead { font-size: 16.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 auto 22px; max-width: 460px; }
.nf-lead b { color: var(--ink); }

.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nf-btn-ico { margin-right: 7px; vertical-align: -3px; }

/* Quick-Links-Karte */
.nf-quick { margin: 34px auto 0; max-width: 460px; background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px; padding: 16px 18px; }
.nf-quick__title { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px;
  letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 12px; }
.nf-quick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nf-quick__link { display: block; background: #fff; border-radius: 10px; padding: 10px 12px;
  color: var(--lavender-deep); font-weight: 700; font-size: 14px; text-decoration: none; text-align: left;
  transition: transform .14s ease, box-shadow .14s ease; }
.nf-quick__link::before { content: "→"; margin-right: 8px; color: var(--lavender); }
.nf-quick__link:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

@media (max-width: 600px) {
  .nf-art { width: 230px; height: 210px; }
  .nf-art .polaroid { width: 158px; }
  .nf-title { font-size: 40px; }
  .nf-quick__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-quick__link { transition: none; }
}

/* ── Datenexport (Screen 064): „Das ist enthalten" / „nicht dabei" ─────────── */
.export-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 18px; }
.export-box { background: var(--cream, #fbf7f0); border-radius: 14px; padding: 14px 16px; }
.export-box__title { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.export-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.export-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; }
.export-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.export-list--in  li::before { content: "✓"; color: #3d7a5a; }
.export-list--out li::before { content: "–"; color: var(--ink-soft); }
@media (max-width: 640px) { .export-cols { grid-template-columns: 1fr; } }

/* ─── Konto-Löschung (Design-Übergabe Screen 065 „Konto-Löschung") ──────────────
   Alles unter .del-card gescoped, wirkt NUR auf /konto/loeschen. Die Karte sitzt in
   .settings-main (Sidebar bleibt) — die Übergabe zeigt sie ohne Sidebar, 680px breit.
   .field/.btn/.banner/.mono leben auf vielen anderen Screens: hier wird global nichts
   umgefärbt, die Rot-/Gold-Werte stehen bewusst als Hex im Scope statt in :root.
   Font: Nunito statt „Baloo 2" der Übergabe; Script-Titel über --font-script.
   Die Karenzzeit-Fußnote der Übergabe entfällt — gelöscht wird sofort. */
.del-card { max-width: 620px; margin: 0 auto; background: #fff; border-radius: 28px;
  padding: 36px; text-align: center; box-shadow: 0 24px 60px rgba(74, 58, 96, .16);
  animation: floatIn .45s ease both; }
.del-heart { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(216, 139, 139, .12); display: flex; align-items: center; justify-content: center;
  color: #d88b8b; }
.del-title { font-family: var(--font-script); font-weight: 400; font-size: 42px;
  color: var(--lavender-deep); line-height: 1.1; margin: 0 0 10px; }
.del-lede { color: var(--ink-soft); max-width: 480px; margin: 0 auto 24px; line-height: 1.55; }
.del-lede strong { color: var(--ink); }

.del-what { text-align: left; background: var(--cream); padding: 22px; border-radius: 12px; margin-bottom: 22px; }
.del-what__title { font-size: 12px; font-weight: 800; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.del-what ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.del-what li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; align-items: flex-start; }
.del-what li::before { content: "✕"; color: #d88b8b; font-weight: 800; flex-shrink: 0; }
.del-what li.is-keep::before { content: "✓"; color: #3d7a5a; }

.del-tip { text-align: left; background: #fdf4d8; border-left: 4px solid var(--gold);
  padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }
.del-tip__title { font-weight: 700; font-size: 14px; color: #8b6d24; margin-bottom: 4px; }
.del-tip a { color: #8b6d24; font-weight: 700; white-space: nowrap; }

.del-note { text-align: left; background: #f6f4fa; border-left: 4px solid #b79dd6;
  padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-size: 13px;
  color: var(--ink-soft); line-height: 1.5; }
.del-note strong { color: var(--ink); }

.del-card .field { text-align: left; }
.del-card .field input[type="text"], .del-card .field input[type="password"] {
  padding: 13px 15px; font-size: 15.5px; background: #f6f4fa; border: 2px solid #ece8f3;
  border-radius: 14px; color: #3f3a52; box-shadow: none; }
.del-card .field input:focus { border-color: #b79dd6; background: #fff; box-shadow: none; }
.del-card ::placeholder { color: #b3adc4; opacity: 1; }
.del-help { font-size: 12.5px; margin-top: 6px; }

.del-actions { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.del-actions .btn { padding: 12px 22px; gap: 7px; }
.del-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
  .del-card { padding: 26px 20px; border-radius: 22px; }
  .del-title { font-size: 33px; }
  .del-actions { flex-direction: column-reverse; }
  .del-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .del-card { animation: none; } }

/* ─── Funkeln beim Favorisieren ──────────────────────────────────────────────
   20 Partikel, die vom Stern wegbersten und ausdimmen. app.js setzt je Partikel nur
   Winkel (--sp-a) und Weite (--sp-d) — die Bewegung steht komplett hier.
   .sparkles hängt an .polaroid, NICHT an .polaroid-img: dessen overflow:hidden (runde
   Bildecken) würde den Burst kappen, der Stern sitzt nur ~38 px von der Ecke. Der
   Container hat Größe 0 → sein left/top IST der Sternmittelpunkt. .polaroid ist durch
   sein inline transform ein eigener Stapelkontext; z-index 3 legt den Burst übers Bild.
   Bonus: wird das Foto während des Bursts gelöscht, verschwindet der Burst mit.
   4-zackig statt des 5-zackigen Favoriten-Sterns: bei 8 px verschwimmen dessen Zacken
   zu Punkten, und 20 Kopien des Symbols lesen sich als Unordnung — der EINE Stern am
   Foto ist das Symbol. polygon() statt SVG/data-URI/mask: keine 20 Parses pro Klick,
   Farbe bleibt var(--gold), keine Prefixe. path() ginge nicht — es rechnet in px, nicht
   in Boxprozent.
   Gold auf Weiß ist 1.83:1 — auf einer Babydecke wäre der Partikel unsichtbar. Der
   dunkle Hof ist Pflicht, kein Schmuck; der goldene Schein macht das Funkeln.
   drop-shadow statt box-shadow: box-shadow folgt der Border-Box und würde vom clip-path
   wieder weggeschnitten. Statischer Filter → einmal rastern, dann nur komponieren.
   Kein will-change: eine laufende transform/opacity-Animation promotet ohnehin,
   20 erzwungene Layer je Klick wären reiner Verlust. */
.sparkles {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.sparkle {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 1.5px rgba(112, 72, 10, .55))    /* trägt auf hellen Fotos */
          drop-shadow(0 0 5px rgba(232, 185, 86, .5));     /* = --gold, der Schein */
  /* „both" ist Pflicht, nicht Kosmetik: die Partikel starten gestaffelt (app.js setzt
     animation-delay). Mit none/forwards zeigte jeder Partikel in seiner Delay-Phase
     bzw. nach dem Ende seinen Basiszustand — einen Goldpunkt auf dem Stern. */
  animation: sparkle-burst 1560ms cubic-bezier(.16, .84, .44, 1) both;   /* = SPARKLE_MS in app.js */
}
/* scale steht INNEN im transform (ganz rechts) — dort skaliert es nur die Zacke. Als
   eigenständige scale-Property stünde es außen (translate→rotate→scale→transform) und
   würde den Flugweg mitskalieren: der Partikel flöge raus und würde wieder eingesaugt. */
@keyframes sparkle-burst {
  0%   { transform: rotate(var(--sp-a)) translateY(0)                        scale(.2);  opacity: 0; }
  18%  { transform: rotate(var(--sp-a)) translateY(calc(var(--sp-d) * -.28)) scale(1);   opacity: 1; }
  100% { transform: rotate(var(--sp-a)) translateY(calc(var(--sp-d) * -1))   scale(.35); opacity: 0; }
}
/* Partikel sind reine Bewegung — app.js erzeugt sie bei reduce gar nicht erst (sonst
   20 nutzlose Knoten). Dieser Block ist die zweite Reihe. */
@media (prefers-reduced-motion: reduce) {
  .sparkles { display: none; }
}

/* ─── Herzchen-Regen beim Herzen ─────────────────────────────────────────────
   Schwester des Funkelns oben, mit vier bewussten Unterschieden:
   1) Herzen STEIGEN AUF statt rundum zu bersten — app.js streut nur im Bogen
      -70°…+70°. Ein Herz, das nach unten fällt, liest sich als Fehlschlag.
   2) Sie bleiben AUFRECHT. Der Flugweg ist rotate(a) translateY(-d); ohne
      Gegenrotation stünde das Herz bei 70° schräg und bei 180° auf dem Kopf.
      Deshalb ganz innen rotate(calc(var(--h-a) * -1)) — hebt die Flugrotation
      wieder auf — und danach der Zufalls-Kipp --h-t für Organik.
   3) Weniger und größer (10 à 11 px statt 20 à 8 px): ein Herz ist eine Figur,
      kein Lichtpunkt. 20 Stück lesen sich als Schwarm, nicht als Geste.
   4) path() statt polygon(): die Rundungen des Herzens sind mit Polygon-Ecken
      nicht darstellbar. path() rechnet in px — hier unkritisch, weil die Box
      fix 16×16 ist und die Größe über scale() im transform kommt.
   Rosé auf einem hellen Babyfoto verschwindet, deshalb derselbe dunkle Hof wie
   beim Funkeln — Pflicht, kein Schmuck. */
.hearts {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.heart-particle {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background: var(--rose-deep);
  clip-path: path("M8 14 C 2 9, 2 3, 6 3 C 7.5 3, 8 4.5, 8 5 C 8 4.5, 8.5 3, 10 3 C 14 3, 14 9, 8 14 Z");
  filter: drop-shadow(0 0 1.5px rgba(120, 40, 60, .5))    /* trägt auf hellen Fotos */
          drop-shadow(0 0 5px rgba(232, 154, 154, .5));   /* = --rose-deep, der Schimmer */
  /* „both" wie beim Funkeln: die Partikel starten gestaffelt (animation-delay),
     ohne both zeigte jeder in seiner Delay-Phase seinen Basiszustand. */
  animation: heart-float 1400ms cubic-bezier(.16, .84, .44, 1) both;   /* = HEART_MS in app.js */
}
@keyframes heart-float {
  0%   { transform: rotate(var(--h-a)) translateY(0)                       rotate(calc(var(--h-a) * -1)) rotate(var(--h-t)) scale(.3); opacity: 0; }
  20%  { transform: rotate(var(--h-a)) translateY(calc(var(--h-d) * -.3))  rotate(calc(var(--h-a) * -1)) rotate(var(--h-t)) scale(1);  opacity: 1; }
  100% { transform: rotate(var(--h-a)) translateY(calc(var(--h-d) * -1))   rotate(calc(var(--h-a) * -1)) rotate(var(--h-t)) scale(.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hearts { display: none; }
}

/* ─── Bestätigungs-Code: sechs Ziffernfelder (Login + 2-Faktor einrichten) ───────
   Zwei Selektor-Ebenen sind Pflicht: `.auth-card .field input[type="text"]` (Z. 1478)
   hat Spezifität (0,3,1) und holte sonst Breite/Padding/Radius zurück. Die Felder sind
   flexibel (`flex:1 1 0`) statt fest breit — in der Auth-Karte bleiben bei 375 px nur
   255 px Innenraum, sechs feste 44er (264 px) passen dort selbst ohne Lücken nicht. */
.code-row { display: flex; gap: 10px; justify-content: center; }
.code-label { display: block; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.auth-card .code-label { font-size: 14.5px; font-weight: 600; color: #4f4a63; margin-bottom: 7px; }

.field .code-row .code-digit,
.auth-card .field .code-row .code-digit {
  flex: 1 1 0;              /* flex-basis:0 sticht das width:100% aus Z. 572 */
  min-width: 0;
  max-width: 56px;          /* sonst werden sie auf dem Desktop unnötig breit */
  width: auto;
  height: 56px;
  padding: 0;               /* 15px/16px aus Z. 1481 würden das schmale Feld auffressen */
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  background: #f6f4fa;
  border: 2px solid #ece8f3;
  border-radius: var(--r-sm);
  color: #3f3a52;
  caret-color: var(--lavender);
}
/* Fokus-Ring zurückholen: `.auth-card .field input:focus` (Z. 1487) setzt box-shadow:none
   und lässt nur die Randfarbe — auf einem schmalen Ziffernfeld zu leise. */
.field .code-row .code-digit:focus,
.auth-card .field .code-row .code-digit:focus {
  border-color: var(--lavender);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(155,123,184,.28);
}
/* Der Umschalter sieht aus wie ein Link, ist aber ein Button (ein <button> ohne type
   würde das Formular abschicken und einen Anmelde-Versuch verbrennen). */
.code-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--lavender-deep); text-decoration: underline;
}
.code-toggle:hover { color: #634882; }
/* Schmale Geräte: Die Reihe darf 12 px in das 40er-Padding der Karte greifen — sonst
   blieben je Feld nur ~37 px. Im Browser bei 375 px gemessen: 41,5 × 56 px je Feld,
   28 px Randabstand, kein Überlauf. Die Höhe bleibt bewusst bei 56 px (Fingerziel). */
@media (max-width: 400px) {
  .auth-card .code-row { margin-inline: -12px; gap: 6px; }
}

/* ── Fotobuch-Erinnerung („Störer") — design_handoff_erinnerung ────────────────
   Liegt auf dem gemeinsamen .modal-backdrop (Scrim + Blur) und erbt von .modal
   Einblendung und Scroll-Verhalten; hier steht nur, was der Störer anders macht.
   Farben je Anlass über [data-occasion] — verbatim aus der Anlass-Matrix der
   Übergabe. --pb-accent färbt Band-Icon und Stat-Icon, --pb-from/--pb-to das Band. */
.pb-remind {
  max-width: 440px;
  padding: 0;                     /* das Band sitzt randlos oben — Muster wie .modal-xl */
  border-radius: 28px;
  --pb-accent: var(--lavender-deep);
  --pb-from: #9b7cba;
  --pb-to: #7a5fa0;
}
.pb-remind[data-occasion="weihnachten"] { --pb-accent: #c0392b; --pb-from: #b8506a; --pb-to: #8f3f5a; }
.pb-remind[data-occasion="geburtstag"]  { --pb-accent: #c96fa0; --pb-from: #e59abf; --pb-to: #c96fa0; }
.pb-remind[data-occasion="meilenstein"] { --pb-accent: #5a9e86; --pb-from: #7cc0a6; --pb-to: #5a9e86; }
/* „meilenstein-neu" ist NICHT der Fotobuch-Anlass oben, sondern der eigene Hinweis-Layer
   (App\Hints\MilestoneHint) für Alben ohne einen einzigen Meilenstein. Eigener Ton, damit
   die beiden nicht wie dieselbe Nachricht wirken — Gold aus den Design-Tokens, dunkel
   genug für weiße Schrift auf dem Band. */
.pb-remind[data-occasion="meilenstein-neu"] { --pb-accent: #b8860b; --pb-from: #e8b956; --pb-to: #c8912e; }

/* Beispiele im Meilenstein-Hinweis: erklären in vier Wörtern, was gemeint ist.
   Reine Anzeige, keine Knöpfe — sie sollen nichts versprechen, was sie nicht tun. */
.pb-remind__examples {
  list-style: none; margin: 16px 0 0; padding: 0;   /* ohne padding:0 rückt der Browser um 40 px ein */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pb-remind__examples li {
  padding: 6px 13px; border-radius: 999px;
  background: #fdf6e6; border: 1px solid #f3e3bd;
  font-size: 13px; font-weight: 700; color: #8a6a1a;
}

/* Eigene Rundung am Band statt overflow:hidden an der Karte — sonst verlöre sie das
   overflow-y:auto aus .modal und der Layer wäre auf niedrigen Fenstern abgeschnitten. */
.pb-remind__band {
  position: relative;
  height: 172px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(150deg, var(--pb-from), var(--pb-to));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;                     /* Band nie stauchen, wenn der Text lang wird */
}
.pb-remind__icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(40,25,60,.28);
  color: var(--pb-accent);
}
.pb-remind__icon svg { width: 34px; height: 34px; }
.pb-remind__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,.92);
}
.pb-remind__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.22); color: #fff;
  transition: background .14s;
}
.pb-remind__close:hover { background: rgba(255,255,255,.38); }
.pb-remind__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pb-remind__body { padding: 26px 30px 28px; }
/* .modal h3 ist gestylt, h2 nicht — der Titel trägt seine Schrift selbst. */
.pb-remind__title {
  font-family: var(--font-script);
  font-weight: 400; font-size: 29px; line-height: 1.18;
  color: var(--lavender-deep);
  margin: 0 0 12px; text-align: center; text-wrap: pretty;
}
.pb-remind__text {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 20px; text-align: center; text-wrap: pretty;
}
.pb-remind__stat {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: #f7f4fb; border: 1px solid #ece3f6;
  font-size: 14.5px; font-weight: 600; color: #4f4a63;
  text-align: center;
}
.pb-remind__stat-ic { display: flex; color: var(--pb-accent); flex: none; }
.pb-remind__stat-ic svg { width: 17px; height: 17px; }

.pb-remind__actions { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.pb-remind__actions .btn { width: 100%; justify-content: center; }
.pb-remind__later { color: var(--lavender-deep); }
.pb-remind__later:hover { background: #f4f0fa; }

.pb-remind__toggle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #f0ebf5;
  font-size: 13.5px; color: #8b86a0;
}
/* Der Hinweis erscheint nur, wenn der Schalter aus ist (app.js nimmt [hidden] weg).
   Die Animation läuft beim Einblenden von selbst — display:none → block startet sie. */
.pb-remind__note {
  margin: 10px 0 0; text-align: center;
  font-size: 12.5px; line-height: 1.45; color: #a89fb8;
  animation: pb-note-in .22s ease both;
}
.pb-remind__note a { color: #a89fb8; }
@keyframes pb-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 400px) {
  .pb-remind__band { height: 148px; }
  .pb-remind__body { padding: 22px 20px 24px; }
  .pb-remind__title { font-size: 25px; }
}

/* .modal/.modal-backdrop bringen ihre Einblendung (float-in/backdrop-in) selbst mit und
   haben projektweit KEINEN reduced-motion-Block — hier für den Störer nachgezogen.
   Der Layer springt ungefragt ins Bild; wer Bewegung abgewählt hat, soll ihn nicht
   auch noch hereinfliegen sehen. (Die übrigen Modale bleiben, wie sie sind.) */
@media (prefers-reduced-motion: reduce) {
  .pb-remind, .pb-remind-back, .pb-remind__note { animation: none; }
  .pb-remind__close { transition: none; }
}

/* ─── Mitglieder & Rechte — eine Zeile je Person ───────────────────────────────
   Zwei Spalten: links wer (Avatar, Name, E-Mail, Kinder-Bereich), rechts was er darf
   (Rollen-Pillen, Kurzfassung, Knöpfe). Auf schmalen Fenstern stapeln sie sich —
   nebeneinander bliebe der linken Spalte so wenig Platz, dass Name und E-Mail
   zeichenweise umbrechen. Lange E-Mails brechen zusätzlich innerhalb des Worts,
   sonst schieben sie die Karte auf. */
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.member-row.is-blocked { opacity: .72; }
.member-row__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.member-row__id { min-width: 0; }
.member-row__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-weight: 800; }
.member-row__mail { font-size: 13px; overflow-wrap: anywhere; }
.member-row__scope { font-size: 12px; }
.member-row__rights { flex-shrink: 0; text-align: right; }
.member-row__roles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.member-row__can { font-size: 12px; margin-top: 4px; }
.member-row__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.member-row__actions form { margin: 0; }

@media (max-width: 640px) {
  .member-row { flex-direction: column; align-items: stretch; gap: 12px; }
  /* Avatar oben bündig: lange Namen brauchen hier zwei Zeilen, mittig sähe er verrutscht aus. */
  .member-row__who { align-items: flex-start; }
  .member-row__rights { text-align: left; }
  .member-row__roles, .member-row__actions { justify-content: flex-start; }
  /* „DU"/„GESPERRT" sind Plaketten am Namen — in Normalgröße belegen sie eine eigene Zeile. */
  .member-row__name .pill { font-size: 12.5px; padding: 4px 12px; }
  /* Knöpfe teilen sich die volle Breite — mit Daumen bedienbar statt rechts gedrängt. */
  .member-row__actions .btn { flex: 1 1 auto; justify-content: center; }
  .member-row__actions form { flex: 1 1 auto; display: flex; }
  .member-row__actions form .btn { width: 100%; }
}

/* ─── Offene Einladungen — Karte + Rolle-Picker (Design „Mitglieder & Rechte", Screen 04) ──
   Der Rolle-Picker ersetzt <select>+„Übernehmen": Klick auf die Pille öffnet ein Popover
   (<details>, JS-frei), die Auswahl speichert sofort per fetch — kein Reload, kein zweiter
   Klick — und zeigt „✓ Gespeichert". Ohne JS bleibt jeder Eintrag ein Submit-Button. */
.invite-card {
  background: #fff;
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 16px 40px rgba(74,58,96,.12);
  animation: floatIn .4s ease both;
}
.invite-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 14px; flex-wrap: wrap;
}
.invite-card__name {
  font-size: 18px; font-weight: 700; color: #3f3a52;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-width: 0; flex: 1 1 auto;
}
.invite-card__meta { font-size: 13px; color: #8a8499; margin-top: 3px; overflow-wrap: anywhere; }
.invite-badge {
  font-size: 12px; font-weight: 700; color: #8a6d2f; background: #f2e2b6;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.invite-badge.is-expired { color: #7a7488; background: #ece9f0; }

.invite-card__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.invite-card__actions form { margin: 0; }
.invite-resend {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: var(--lavender-deep); padding: 9px 8px; border-radius: var(--r-pill);
}
.invite-resend:hover { color: #634882; text-decoration: underline; }
.invite-withdraw {
  border: 2px solid #eccdd4; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: #c47a86; padding: 9px 18px; border-radius: var(--r-pill);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.invite-withdraw:hover { background: #fbf1f3; border-color: #e0a3b0; color: #b3616e; }

.invite-card__rolerow {
  display: flex; align-items: center; gap: 10px; margin-top: 15px;
  flex-wrap: wrap; position: relative;
}
/* Popover über die nachfolgende Karte heben: die Eintritts-Animation (floatIn) bildet
   kurzzeitig einen Stacking-Context; eine offene Karte bekommt darum den Vorrang. */
.invite-card:has(.invite-role[open]) { position: relative; z-index: 5; }
.invite-card__rolelabel { font-size: 13px; color: #8a8499; }

/* Pille (Trigger) = <summary>. Marker weg, „offen"-Zustand über [open]. */
.invite-role { position: relative; }
.invite-role > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px; border-radius: 14px;
  background: #f6f4fa; border: 2px solid #ece8f3;
  transition: background .14s ease, border-color .14s ease;
}
.invite-role > summary::-webkit-details-marker { display: none; }
.invite-role > summary:hover { border-color: #cbb8e2; }
.invite-role[open] > summary { background: #f5eefb; border-color: #b79dd6; }
.invite-role__ico { color: var(--lavender-deep); display: inline-flex; }
.invite-role__ico svg,
.invite-role__chev svg { display: block; }
.invite-role__cur { font-size: 15px; font-weight: 600; color: #4f4a63; }
.invite-role__chev { color: #9b93ac; display: inline-flex; transition: transform .18s ease; }
.invite-role[open] > summary .invite-role__chev { transform: rotate(180deg); }

/* Popover mit den Rollen-Optionen. */
.invite-role__pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 320px;
  background: #fff; border-radius: 18px; padding: 8px; border: 1px solid #efeaf6;
  box-shadow: 0 20px 48px rgba(74,58,96,.24);
  animation: menu-in .16s ease both;
}
.invite-role__pophead {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #a7a1b5; padding: 8px 13px 6px;
}
.invite-role__opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 13px; border: 0; background: transparent; border-radius: 14px;
  cursor: pointer; text-align: left; font-family: var(--font-body);
  transition: background .12s ease;
}
.invite-role__opt:hover { background: #faf7fd; }
.invite-role__opt.is-on { background: #f5eefb; }
.invite-role__optico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f2eef8; color: #9b93ac;
}
.invite-role__opt.is-on .invite-role__optico { background: #e9dcf5; color: var(--lavender-deep); }
.invite-role__optico svg,
.invite-role__optcheck svg { display: block; }
.invite-role__opttext { min-width: 0; flex: 1; }
.invite-role__optt { display: block; font-size: 15px; font-weight: 600; color: #3f3a52; }
.invite-role__optd { display: block; font-size: 12.5px; line-height: 1.4; color: #8a8499; }
.invite-role__optcheck {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eceaf1; color: #fff; opacity: .4;
}
.invite-role__opt.is-on .invite-role__optcheck {
  background: linear-gradient(135deg,#9b7cba,#8266a6); opacity: 1;
}

/* „✓ Gespeichert"-Chip — erscheint nach der Auswahl, geht nach 1,8 s von selbst. */
.invite-role__saved {
  font-size: 13px; font-weight: 600; color: #4f7a63; background: #dcf0e6;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.invite-role__saved.is-show { animation: invite-saved 1.8s ease both; }
@keyframes invite-saved {
  0%   { opacity: 0; transform: translateY(4px); }
  12%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2px); }
}

@media (max-width: 640px) {
  /* Das Popover hängt sonst an der Pille und schiebt sich rechts aus der Karte. Auf
     schmalen Fenstern richtet es sich an der ganzen Rollen-Zeile aus (dafür .invite-role
     static, damit der Bezugspunkt die Zeile ist) und nimmt deren volle Breite. */
  .invite-role { position: static; }
  .invite-role__pop { left: 0; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-card { animation: none; }
  .invite-role__pop { animation: none; }
  .invite-role__chev { transition: none; }
  .invite-role__saved.is-show { animation: none; }
}

/* ─── Fest teilen / „Einladen" (Design-Übergabe „Fest teilen") ─────────────────
   Host-Seite: Zugangsdaten + fertige Nachricht + Sicherheitshinweis + Verwaltung.
   Dem Handoff treue Lila-/Grün-Werte (bewusst eigene Hex, nicht die --lavender-Tokens);
   Skript-Titel + Nunito wie überall; kein Inline-JS (Kopieren/Akkordeon über app.js/details). */
.ft-share { max-width: 600px; margin: 0 auto; padding: 22px 20px 80px; }
.ft-share .kid-back { margin-bottom: 10px; }

.ft-share__head { text-align: center; margin: 4px 0 20px; }
.ft-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  background: #e4f0e6; border: 1px solid #cfe3d3; color: #4f8b5f;
  font-size: 13.5px; font-weight: 700;
}
.ft-badge svg { display: block; }
.ft-share__title {
  font-family: var(--font-script); font-weight: 400;
  font-size: 44px; line-height: 1.05; color: var(--lavender-deep); margin: 14px 0 0;
}
.ft-share__occasion {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 10px 0 0; font-size: 15.5px; font-weight: 600; color: #5f6f66;
}
.ft-share__sep { color: #a3b3aa; }

.ft-card { background: #fff; border-radius: 26px; padding: 26px 28px; margin: 0 0 18px; animation: floatIn .45s ease both; }
.ft-access { box-shadow: 0 20px 50px rgba(74,58,96,.15); }
.ft-msg    { box-shadow: 0 16px 40px rgba(74,58,96,.13); }
.ft-manage { box-shadow: 0 12px 30px rgba(74,58,96,.10); padding: 0; }

.ft-field { margin-bottom: 16px; }
.ft-field__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8b86a0; margin: 0 0 8px;
}
.ft-field__label svg { display: block; }
.ft-field__row { display: flex; gap: 10px; align-items: stretch; }
.ft-input {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px;
  background: #f6f4fa; border: 2px solid #ece8f3; border-radius: 14px;
  font-family: var(--font-body); font-size: 15px; color: #3f3a52; text-overflow: ellipsis;
}
.ft-input:focus { outline: none; border-color: #b79dd6; background: #fff; }
.ft-input--pw { font-family: var(--font-mono); font-weight: 700; letter-spacing: .02em; }

.ft-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #9b7cba, #8266a6); color: #fff;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 16px rgba(126,92,163,.28);
  transition: filter .15s ease, transform .12s ease, background .2s ease;
}
.ft-copy:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ft-copy:active { transform: translateY(0); }
.ft-copy__ico { display: inline-flex; }
.ft-copy__ico svg { display: block; }
.ft-copy__check { display: none; }
.ft-copy.is-copied { background: linear-gradient(135deg, #67b587, #4f9e6f); box-shadow: 0 8px 16px rgba(79,158,111,.28); }
.ft-copy.is-copied .ft-copy__copy { display: none; }
.ft-copy.is-copied .ft-copy__check { display: inline-flex; }

.ft-hint {
  display: flex; align-items: center; gap: 9px; margin-top: 4px;
  background: #f6f4fa; border-radius: 14px; padding: 12px 15px; font-size: 14px; color: #5a5470;
}
.ft-hint svg { flex-shrink: 0; color: #8266a6; }
.ft-hint strong { color: #3f3a52; }

.ft-msg__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ft-msg__badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #e4f0e6;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.ft-msg__title { font-size: 17px; font-weight: 700; color: #3f3a52; }
.ft-msg__sub { font-size: 13px; color: #8b86a0; margin-top: 1px; }
.ft-msg__preview {
  background: #f4f8f2; border: 1px solid #e3ede0; border-radius: 16px; padding: 16px 18px;
  font-size: 14.5px; line-height: 1.6; color: #41493f; margin-bottom: 14px; overflow-wrap: anywhere;
}
.ft-msg__link { color: var(--lavender-deep); font-weight: 600; }
.ft-msg__preview strong { color: #3f3a52; }
.ft-copy--ghost { background: #f4eefb; color: var(--lavender-deep); box-shadow: none; border-radius: 999px; height: 44px; }
.ft-copy--ghost:hover { background: #ece0f8; filter: none; }
.ft-copy--ghost.is-copied { background: #dff0e6; color: #3d7a4f; box-shadow: none; }

.ft-secure {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px;
  background: #efe6fa; border: 1px solid #ddc9f2; border-left: 4px solid #a785d6;
  border-radius: 16px; padding: 15px 18px; animation: floatIn .5s ease both;
}
.ft-secure__ico { flex-shrink: 0; color: #7e5ca3; display: inline-flex; margin-top: 1px; }
.ft-secure p { margin: 0; font-size: 14px; line-height: 1.55; color: #5a4a72; }
.ft-secure strong { color: #3f3a52; }

.ft-manage > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.ft-manage > summary::-webkit-details-marker { display: none; }
.ft-manage__ico { flex-shrink: 0; color: #7e5ca3; display: inline-flex; }
.ft-manage__title { flex: 1; font-size: 16px; font-weight: 700; color: #3f3a52; }
.ft-manage__chev { flex-shrink: 0; color: #9b93ac; display: inline-flex; transition: transform .2s ease; }
.ft-manage[open] > summary .ft-manage__chev { transform: rotate(180deg); }
.ft-manage__body { padding: 0 24px 24px; }
.ft-pwform .ft-field__label { margin-bottom: 8px; }
.ft-btn-save {
  flex-shrink: 0; height: 50px; padding: 0 22px; border-radius: 14px; cursor: pointer;
  background: #f4eefb; border: 2px solid #e0d2f0; color: var(--lavender-deep);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease;
}
.ft-btn-save:hover { background: #ece0f8; }
.ft-manage__note { font-size: 13px; color: #8b86a0; margin-top: 8px; }
.ft-manage__divider { height: 1px; background: #f0ebf5; margin: 20px 0; }
.ft-retract { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ft-retract__title { font-size: 15px; font-weight: 700; color: #3f3a52; }
.ft-retract__desc { font-size: 13.5px; line-height: 1.5; color: #8b86a0; margin-top: 3px; max-width: 300px; }
.ft-btn-danger {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 2px solid #eecac7; color: #c2463f;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.ft-btn-danger:hover { background: #fbeeed; border-color: #e3a9a4; }
.ft-btn-danger svg { display: block; }

@media (max-width: 520px) {
  .ft-card { padding: 22px 18px; }
  .ft-manage > summary { padding: 18px; }
  .ft-manage__body { padding: 0 18px 20px; }
  .ft-field__row { flex-wrap: wrap; }
  .ft-copy, .ft-btn-save { width: 100%; justify-content: center; }
  .ft-share__title { font-size: 38px; }
  .ft-retract { flex-direction: column; align-items: stretch; }
  .ft-retract__desc { max-width: none; }
  .ft-btn-danger { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-card, .ft-secure { animation: none; }
  .ft-copy, .ft-manage__chev, .ft-btn-save, .ft-btn-danger { transition: none; }
  .ft-copy:hover { transform: none; }
}

/* ─── Familie empfehlen (/konto/empfehlen) ─────────────────────────────────────
   Der Code ist das Herzstück der Seite und soll auch aus zwei Metern Entfernung
   ablesbar sein — Mono-Schrift, weil Buchstabe für Buchstabe abgetippt wird.
   Auf schmalen Fenstern rutscht der Knopf unter den Code statt daneben. */
.refer-code {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 16px 20px; border-radius: 16px;
  background: var(--lavender-pale); border: 1.5px dashed var(--lavender-soft);
}
.refer-code__value {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  letter-spacing: .06em; color: var(--lavender-deep); word-break: break-all;
}
.refer-copy { flex-shrink: 0; }
.refer-copy.is-copied { background: #dff0e6; border-color: #b6dcc4; color: #3d7a4f; }

/* Die fertige Nachricht: Zeilenumbrüche stehen im Text, nicht im Markup. */
.refer-text {
  white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
  background: var(--cream); border-radius: 14px; padding: 16px 18px;
}

@media (max-width: 560px) {
  .refer-code { flex-direction: column; align-items: stretch; }
  .refer-code__value { font-size: 22px; text-align: center; }
  .refer-copy { width: 100%; justify-content: center; }
}