/* ==========================================================================
   aipublix — Customer area
   Optik nach Hannahs Vorlage (09.11.2026): warmes Papier statt Grau, weiße
   Karten mit feiner Kante, Manrope im Text, Newsreader in den Überschriften,
   ein lauter Akzent. Funktionen und Aufbau sind die alten — nur die Optik ist neu.
   Keine fremden Ressourcen (DSGVO): die Schriften liegen in customer/fonts/.
   ========================================================================== */

@import url("../fonts/fonts.css");

:root {
  --canvas:   #FAF9F4;
  --card:     #FFFFFF;
  --soft:     #F3F1EA;
  --soft-2:   #E8E5DC;
  /* Die feine Kante der Karten aus der Vorlage. */
  --line:     rgba(25, 24, 23, .08);
  --line-2:   rgba(25, 24, 23, .16);

  --ink:      #191817;
  --ink-2:    #55524D;
  --ink-3:    #8A867F;

  /* Der Name ist geblieben, der Wert ist seit 06.11.2026 der Punkt im
     dein.buch-Logo. Marken und Journeys setzen ihren eigenen Akzent. */
  --lime:       #F25A55;
  --lime-2:     #E5453F;
  --orange:     #B8423C;
  --orange-sft: #F7E4E1;
  /* Ruhige Hinweisfläche: das gedeckte Grün-Blau der Vorlage statt Himmelblau. */
  --blue-sft:   #EAF1F0;

  /* Status — dots only, never large fills. Töne der Vorlage: warm, gedeckt. */
  --st-error:   #B8423C;
  --st-waiting: #D9A21B;
  --st-active:  #609A98;
  --st-new:     #C4C0B6;
  --st-done:    #3E7370;

  --r-app:  26px;
  --r-card: 18px;
  --r-sm:   12px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t:    180ms;

  --ff: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Überschriften der Vorlage. */
  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.dp-app {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 40px 40px;
}

/* Die Kopfleiste reicht über die ganze Fensterbreite (Vorlage), ihr Inhalt
   bleibt an der Spalte darunter ausgerichtet. Ohne clip schöbe der Scrollbalken
   eine waagerechte Bildlaufleiste herein (100vw zählt ihn mit). */
html { overflow-x: clip; }

/* ── Top bar ────────────────────────────────────────────────────────────── */

.dp-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--card);
  border-radius: var(--r-app);
}

/* Im Rahmen des Kundenbereichs: weiße Leiste über die volle Breite, oben
   angeheftet, unten eine feine Linie (Vorlage). Die schmale Pille der
   Anmeldeseite (.dp-auth-topnav) bleibt, wie sie ist. */
.dp-app > .dp-topnav:not(.dp-auth-topnav) {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: -18px calc(50% - 50vw) 0;
  padding: 16px calc(50vw - 50%);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}

.dp-brandchip {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 0;
  background: none;
  text-decoration: none;
  color: var(--ink);
}

.dp-topnav .dp-logo-dein-buch { height: 24px; margin-inline: 0; }

/* Der Seitenname neben dem Logo, leise und durch eine Linie abgesetzt. */
.dp-brandchip-text { padding-left: .9rem; border-left: 1px solid var(--line-2); }

.dp-brandchip-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
  font-size: .9rem;
}

/* The dein.buch logo where no brand stands (login, legal pages, Hannah 06.11.). */
.dp-logo-dein-buch { height: 22px; width: auto; display: block; margin-inline: .25rem; }

.dp-brandchip-text { display: flex; flex-direction: column; line-height: 1.15; }
.dp-brandchip-text strong { font-size: .875rem; letter-spacing: -.01em; }
.dp-brandchip-text span { font-size: .8125rem; font-weight: 600; color: var(--ink-3); }

.dp-topnav-right { display: flex; align-items: center; gap: .5rem; }

.dp-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: .8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.dp-chip-lg { padding: .55rem 1.1rem; font-size: .875rem; font-weight: 500; color: var(--ink); background: var(--card); }
a.dp-chip-link { text-decoration: none; transition: background var(--t) var(--ease); }
a.dp-chip-link:hover { background: var(--soft-2); color: var(--ink); }

/* In der Kopfleiste als umrandete Pille, wie die Zweitknöpfe der Vorlage. */
.dp-topnav-right .dp-chip-link {
  padding: .6rem 1.1rem;
  background: transparent;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 700;
}
.dp-topnav-right .dp-chip-link:hover { background: var(--soft); }

/* ── Project tiles (overview page) ──────────────────────────────────────── */

.dp-proj { display: flex; flex-direction: column; min-height: 210px; }
.dp-proj-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.dp-proj-title { margin: 0 0 .75rem; font-size: 1.375rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.dp-proj-foot { margin-top: auto; }

.dp-icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.dp-icon-btn:hover { background: var(--soft-2); color: var(--ink); }

/* Initiale auf hellem Grund, wie in der Vorlage. */
.dp-avatar {
  width: 42px; height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 800;
  cursor: pointer;
}
.dp-avatar:hover { background: var(--soft-2); }

.dp-menu { border: 0; border-radius: var(--r-sm); box-shadow: 0 12px 32px -12px rgba(0,0,0,.25); padding: .35rem; min-width: 230px; }
.dp-menu-head { margin: 0; padding: .55rem .7rem .65rem; border-bottom: 1px solid var(--soft); font-size: .75rem; color: var(--ink-3); line-height: 1.4; }
.dp-menu-head strong { color: var(--ink); font-size: .8125rem; }
.dp-menu-mail { display: inline-block; margin-top: .1rem; word-break: break-all; }

.dp-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: .55rem;
  margin-top: .3rem;
  padding: .5rem .7rem;
  border: 0; border-radius: 9px;
  background: none; color: var(--ink-2);
  font-size: .8125rem; text-align: left; cursor: pointer;
}

.dp-menu-item:hover { background: var(--soft); color: var(--ink); }

/* ── Body: Seitenleiste + Inhalt ────────────────────────────────────────── */

/* Wie die Vorlage: links eine Spalte mit dem Menü als Textliste, der aktive
   Eintrag als weiße Karte mit feinem Rand, rechts der Inhalt. */
.dp-body { display: flex; align-items: flex-start; gap: 48px; margin-top: 36px; }

.dp-rail {
  position: sticky;
  top: 104px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.dp-rail-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 11px 16px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.dp-rail-btn .bi { font-size: 1.05rem; color: var(--ink-3); }
.dp-rail-btn:hover { background: rgba(25, 24, 23, .04); color: var(--ink); }
.dp-rail-btn.active {
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(25, 24, 23, .06), 0 0 0 1px rgba(25, 24, 23, .07);
}
.dp-rail-btn.active .bi { color: var(--lime); }

/* Abmelden steht abgesetzt unter einer Linie, leiser als die Ziele. */
.dp-rail-spacer { height: 1px; margin: 16px 0 12px; background: var(--line-2); }
.dp-rail-btn-quiet { font-size: .875rem; color: var(--ink-3); }

.dp-content { flex: 1; min-width: 0; }

/* ── Page head ──────────────────────────────────────────────────────────── */

.dp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem .5rem 1.1rem;
}

.dp-head-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.dp-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .35rem .35rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.dp-pill-btn:hover { background: #2A2A2E; color: #fff; }

.dp-pill-btn-circle {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: .8rem;
}

.dp-kicker { margin: 0; font-size: .8125rem; color: var(--ink-3); }

.dp-pagetitle {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}

/* ── Bento grid ─────────────────────────────────────────────────────────── */

.dp-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  min-width: 0;
}

.sp2 { grid-column: span 2; }
.sp4 { grid-column: span 4; }
.rw2 { grid-row: span 2; }

.dp-card-label {
  margin: 0 0 .5rem;
  font-size: .75rem;
  color: var(--ink-3);
}

/* ── Hero tile ──────────────────────────────────────────────────────────── */

.dp-hero { display: flex; flex-direction: column; }

.dp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }

.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: .75rem;
  font-weight: 500;
}

/* Trend pill — the lime accent that carries a number, like the reference. */
.dp-trend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.dp-trend-dark { background: var(--ink); color: var(--lime); }

.dp-hero-title {
  margin: 0 0 .75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.dp-hero-meta { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }

.dp-tag {
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: .75rem;
  color: var(--ink-2);
}

.dp-hero-foot { margin-top: auto; }

.dp-bar { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.dp-bar-fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width 600ms var(--ease); }

[data-status="DONE"]  .dp-bar-fill { background: var(--st-done); }
[data-status="ERROR"] .dp-bar-fill { background: var(--orange); }

.dp-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.dp-note { margin: .85rem 0 0; display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--ink-3); }

/* ── Number tiles ───────────────────────────────────────────────────────── */

.dp-num { display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; }

.dp-num-value {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}

.dp-num-unit { font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-left: .25rem; }
.dp-num-sm { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }

/* ── Cover tile ─────────────────────────────────────────────────────────── */

.dp-cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--lime);
  overflow: hidden;
  min-height: 176px;
}

.dp-cover-copy { min-width: 0; }

.dp-cover-title {
  margin: .75rem 0 0;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
}

/* A book drawn in CSS — no external asset, no cover upload needed. */
.dp-book {
  position: relative;
  flex: none;
  width: 104px;
  aspect-ratio: 3 / 4;
  border-radius: 3px 10px 10px 3px;
  background: var(--card);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .45);
  transform: rotate(-5deg);
  display: flex;
  align-items: flex-end;
  padding: 10px 10px 12px 16px;
}

.dp-book-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  border-radius: 3px 0 0 3px;
  background: var(--ink);
}

.dp-book-label {
  font-size: .625rem;
  line-height: 1.25;
  color: var(--ink-2);
  overflow: hidden;
}

.dp-book-tilt { transform: rotate(6deg); align-self: flex-end; }

/* ── Accent CTA tile ────────────────────────────────────────────────────── */

.dp-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  background: var(--lime);
  color: var(--ink);
  text-decoration: none;
  min-height: 132px;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.dp-cta:hover { background: var(--lime-2); color: var(--ink); transform: translateY(-1px); }
.dp-cta .dp-card-label { color: rgba(11, 11, 12, .55); display: block; }

/* Non-actionable states get their own tint instead of the lime call to action. */
.dp-cta-blue { background: var(--blue-sft); }
.dp-cta-blue:hover { background: var(--blue-sft); transform: none; }
.dp-cta-orange { background: var(--orange-sft); }
.dp-cta-orange:hover { background: var(--orange-sft); transform: none; }
.dp-cta-orange .dp-cta-circle { background: var(--orange); }

.dp-spin i { display: inline-block; animation: dp-rotate 1.8s linear infinite; }

@keyframes dp-rotate { to { transform: rotate(360deg); } }

/* Tinted info tile */
.dp-tinted { background: var(--blue-sft); }
.dp-tinted-text { margin: 0; font-size: .9375rem; }

.dp-cta-text {
  display: block;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.dp-cta-circle {
  width: 48px; height: 48px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 1.05rem;
}

.dp-cta-quiet .dp-cta-circle { background: var(--ink-3); }

/* ── Welcome tile ───────────────────────────────────────────────────────── */

.dp-welcome { min-height: 180px; align-items: flex-start; }
.dp-welcome-title { display: block; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.dp-welcome-lead { display: block; margin-top: .6rem; max-width: 48ch; font-size: .9375rem; color: rgba(11, 11, 12, .7); }

.dp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dp-steps li { display: flex; align-items: center; gap: .65rem; font-size: .875rem; color: var(--ink-2); }
.dp-steps-num { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .75rem; font-weight: 600; }

/* ── Detail page ────────────────────────────────────────────────────────── */

.dp-back { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-3); text-decoration: none; }
.dp-back:hover { color: var(--ink); }

.dp-cover-note { margin: .5rem 0 0; font-size: .8125rem; color: rgba(11, 11, 12, .6); }

/* Two tiles stacked inside one grid cell. */
.dp-stack { display: flex; flex-direction: column; gap: 12px; }
.dp-stack > .dp-card { flex: 1; }

.dp-inline-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Project titles link to the detail page without looking like links until hover. */
.dp-proj-link, .dp-row-name-link { color: inherit; text-decoration: none; }
.dp-proj-link:hover, .dp-row-name-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── Settings ───────────────────────────────────────────────────────────── */

.dp-msgs { display: grid; gap: .5rem; margin-bottom: 12px; }

.dp-msg {
  padding: .8rem 1.1rem;
  border-radius: var(--r-card);
  background: var(--lime);
  font-size: .875rem;
  font-weight: 500;
}

.dp-msg.is-error { background: var(--orange-sft); }

.dp-form { display: grid; gap: .75rem; justify-items: start; }
.dp-form-wide .dp-field { max-width: 34rem; }
.dp-field { display: grid; gap: .4rem; width: 100%; max-width: 22rem; }
.dp-field span { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }

.dp-field input {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid rgba(25, 24, 23, .14);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
}

.dp-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; background: var(--card); }

/* Chrome faerbt ausgefuellte Felder eigenmaechtig gelb und ignoriert dabei
   `background`. Der Farbverlauf-Trick ist der einzige Weg, der ohne
   !important auskommt: die Fuellung wird als box-shadow gemalt, den die
   Autofill-Regel nicht anfasst. Sonst steht mitten im Formular ein Feld in
   einer Farbe, die im ganzen Design nicht vorkommt. */
.dp-field input:-webkit-autofill,
.dp-field input:-webkit-autofill:hover,
.dp-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 100px var(--card) inset;
  caret-color: var(--ink);
}

.dp-field input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--card) inset;
}

.dp-settings-current { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; }
.dp-settings-note { margin: 0 0 1rem; font-size: .8125rem; color: var(--ink-2); max-width: 44ch; }

.dp-settings-pending {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .55rem .8rem;
  border-radius: var(--r-sm);
  background: var(--blue-sft);
  font-size: .8125rem;
}

.dp-btn-danger { background: var(--orange-sft); color: #8A2C0D; }
.dp-btn-danger:hover { background: var(--orange); color: #fff; }

/* Consequence list in the close-account dialog. The icons carry the split:
   what happens now vs. what stays put. */
.dp-facts { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .55rem; }

.dp-facts li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  background: var(--soft);
  font-size: .8125rem;
  line-height: 1.45;
}

.dp-facts li i { margin-top: .1rem; font-size: .9rem; flex: none; }
.dp-facts .is-now { background: var(--orange-sft); }
.dp-facts .is-now i { color: var(--orange); }
.dp-facts .is-kept i { color: var(--ink-3); }

.dp-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.1rem;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  background: var(--soft);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
}

.dp-check input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--ink); flex: none; }
.dp-check:hover { background: var(--soft-2); }

/* ── Help panel ─────────────────────────────────────────────────────────── */

.dp-help { width: min(420px, 92vw); border: 0; background: var(--card); }
.dp-help-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 22px 22px 12px; }
.dp-help-title { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; }
.dp-help-body { padding: 0 22px 28px; overflow-y: auto; }
.dp-help-sep { margin-top: 1.75rem; }

.dp-help-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

/* "On this page" — plain sentences, no boxes: this block should read faster
   than the legend below it. */
.dp-help-page { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.dp-help-page li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .8125rem;
  color: var(--ink-2);
  line-height: 1.45;
}

.dp-help-page li::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--lime-2);
}

.dp-help-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .8rem;
  border-radius: var(--r-sm);
  background: var(--soft);
}

.dp-help-row .dp-dot { margin-top: .45rem; }
.dp-help-row strong { display: block; font-size: .875rem; font-weight: 600; }
.dp-help-row span span { display: block; margin-top: .15rem; font-size: .8125rem; color: var(--ink-2); }

/* The one state the customer is in right now. */
.dp-help-row.is-active { background: var(--lime); }
.dp-help-row.is-active span span { color: rgba(11, 11, 12, .72); }

/* Dots inside the panel carry their own status, not the page's. */
.dp-help-row .dp-dot[data-status="ERROR"]   { background: var(--st-error); }
.dp-help-row .dp-dot[data-status="WAITING"] { background: var(--st-waiting); }
.dp-help-row .dp-dot[data-status="ACTIVE"]  { background: var(--st-active); }
.dp-help-row .dp-dot[data-status="DONE"]    { background: var(--st-done); }
.dp-help-row .dp-dot[data-status="NEW"]     { background: var(--st-new); }

.dp-help-faq { margin: 0; }
.dp-help-faq dt { margin-top: 1rem; font-size: .875rem; font-weight: 600; }
.dp-help-faq dt:first-child { margin-top: 0; }
.dp-help-faq dd { margin: .2rem 0 0; font-size: .8125rem; color: var(--ink-2); }

/* ── Dark tile ──────────────────────────────────────────────────────────── */

/* Hervorgehobene Kachel. Früher schwarz; die Vorlage kennt keine dunklen
   Flächen, also warm getönt mit dunkler Schrift. Der Klassenname bleibt. */
.dp-dark { background: var(--soft); border-color: transparent; color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; min-height: 176px; }
.dp-dark .dp-card-label { color: var(--ink-2); }
.dp-num-lime { color: var(--lime); }
.dp-num-lime .dp-num-unit { color: rgba(242, 90, 85, .6); }
.dp-dark-note { margin: .5rem 0 0; font-size: .75rem; color: var(--ink-3); }

/* ── Invoice rows ───────────────────────────────────────────────────────── */

.dp-row-inv { gap: 1rem; padding: .85rem 0; }
.dp-inv-date { font-size: .8125rem; color: var(--ink-3); white-space: nowrap; min-width: 5.5rem; }
.dp-inv-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dp-inv-desc { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-inv-no { font-size: .75rem; color: var(--ink-3); }
.dp-inv-amount { font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.dp-inv-none { width: 32px; text-align: center; color: var(--ink-3); flex: none; }
.dp-row-inv .dp-row-link { margin-left: 0; }

/* ── Rows ───────────────────────────────────────────────────────────────── */

.dp-rows { list-style: none; margin: 0; padding: 0; }

.dp-row { display: flex; align-items: center; gap: .65rem; padding: .65rem 0; border-bottom: 1px solid var(--soft); }
.dp-row:last-child { border-bottom: 0; }
.dp-row:first-child { padding-top: 0; }
.dp-row-name { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row-meta { margin-left: auto; font-size: .75rem; color: var(--ink-3); white-space: nowrap; }

.dp-row-link {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t) var(--ease);
}

.dp-row-link:hover { background: var(--ink); color: #fff; }
.dp-row-link-accent { background: var(--lime); margin-left: auto; }

/* ── Status dots ────────────────────────────────────────────────────────── */

.dp-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--st-new); }

[data-status="ERROR"]   > .dp-dot, .dp-bento[data-status="ERROR"]   ~ * .dp-dot { background: var(--st-error); }
.dp-chip-lg .dp-dot { background: var(--st-new); }

.dp-row[data-status="ERROR"]   > .dp-dot { background: var(--st-error); }
.dp-row[data-status="WAITING"] > .dp-dot { background: var(--st-waiting); }
.dp-row[data-status="ACTIVE"]  > .dp-dot { background: var(--st-active); }
.dp-row[data-status="DONE"]    > .dp-dot { background: var(--st-done); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem 1.35rem;
  border: 0;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.dp-btn-dark { background: var(--ink); color: #fff; }
.dp-btn-dark:hover { background: #2A2A2E; color: #fff; }

/* Die eine Aktion, die eine Seite tragen soll: auf dem Akzent, die Schrift
   ist die besser lesbare (auf #F25A55 schwarz). */
.dp-btn-brand { background: var(--lime); color: var(--ink); }
.dp-btn-brand:hover { background: var(--lime-2); color: var(--ink); }
.dp-btn-primary { background: var(--lime); color: var(--ink); }
.dp-btn-primary:hover { background: var(--lime-2); color: var(--ink); }
.dp-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.dp-btn-ghost:hover { background: var(--soft); color: var(--ink); }

/* Eine leise Folgeaktion, die wie ein Link aussieht (z. B. „Einwilligung für
   alle Geräte widerrufen“). Ohne eigene Regel malte der Browser sie grau. */
.dp-btn-link { padding-inline: 0; background: none; color: var(--ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dp-btn-link:hover { color: var(--ink); }

/* ── Packages ───────────────────────────────────────────────────────────── */

.dp-pkgs { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.dp-pkg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  background: var(--soft);
  cursor: pointer;
  transition: background var(--t) var(--ease);
}

.dp-pkg:hover, .dp-pkg:focus-visible { background: var(--lime); outline: none; }
.dp-pkg-name { font-size: .875rem; font-weight: 500; }
.dp-pkg-price { font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }

/* ── News / promo widgets ───────────────────────────────────────────────── */

.dp-news-headline { margin: 0 0 .3rem; font-size: 1rem; font-weight: 500; letter-spacing: -.015em; }
.dp-news-excerpt { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.dp-news-item { padding: 0; }
.dp-news-date { margin: 0 0 .3rem; font-size: .75rem; color: var(--ink-3); }

.dp-promo { border-radius: var(--r-sm); background: var(--soft); overflow: hidden; }
.dp-promo-inner, .dp-promo-body { padding: 1rem; }
.dp-promo-tag { margin: 0 0 .3rem; font-size: .75rem; color: var(--ink-3); }
.dp-promo-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; }
.dp-promo-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--ink); text-decoration: none; font-weight: 500; }

.dp-prod-row { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--soft); }
.dp-prod-row:last-child { border-bottom: 0; }
.dp-prod-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--lime); color: var(--ink); }
.dp-prod-name { margin: 0; font-size: .9375rem; font-weight: 500; }
.dp-prod-sub { margin: 0; font-size: .75rem; color: var(--ink-3); }

/* ── Panels (invoices, checkout pages) ──────────────────────────────────── */

/* Used by the checkout pages, which bring their own inner padding — the panel
   itself must stay flush or everything inside gets padded twice. */
.dp-panel { background: var(--card); border-radius: var(--r-card); margin-bottom: 12px; overflow: hidden; }
.dp-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 20px 20px 12px; }
.dp-panel-title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em; }
.dp-panel-meta { font-size: .75rem; color: var(--ink-3); }
.dp-panel .table { --bs-table-bg: transparent; }
.dp-panel .table > :not(caption) > * > * { border-color: var(--soft); }

.dp-empty { padding: 3rem 1.25rem; text-align: center; }
.dp-empty-icon { font-size: 1.5rem; color: var(--ink-3); }
.dp-empty-title { margin: .75rem 0 .25rem; font-weight: 500; }
.dp-empty-sub { margin: 0; font-size: .875rem; color: var(--ink-3); }

/* ── Package modal ──────────────────────────────────────────────────────── */

.dp-modal .modal-content { border: 0; border-radius: var(--r-card); overflow: hidden; }
.dp-modal-hd { display: flex; align-items: flex-start; gap: 1rem; padding: 22px 22px 12px; }
.dp-modal-hd-text { flex: 1; }
.dp-modal-title { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; }
.dp-modal-price { font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; }
.dp-modal-price small { font-size: .6875rem; font-weight: 400; color: var(--ink-3); margin-left: .35rem; letter-spacing: 0; }

.dp-modal-close { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); cursor: pointer; }
.dp-modal-close:hover { background: var(--soft-2); }
.dp-modal-body { padding: 0 22px 20px; }
.dp-modal-desc { margin: 0 0 1rem; font-size: .9375rem; color: var(--ink-2); }
.dp-modal-section-label { margin: 0 0 .6rem; font-size: .75rem; color: var(--ink-3); }
.dp-modal-features { display: grid; gap: .45rem; }
.dp-modal-feature { display: flex; align-items: center; gap: .55rem; font-size: .875rem; color: var(--ink-2); }
.dp-modal-feature i { color: var(--ink); }
.dp-modal-ft { display: flex; justify-content: flex-end; gap: .5rem; padding: 16px 22px; background: var(--soft); }

/* ── Refinements ────────────────────────────────────────────────────────── */

/* Figures line up column-wise instead of dancing with every digit. */
.dp-num-value, .dp-inv-amount, .dp-pkg-price, .dp-modal-price, .dp-trend, .dp-row-meta {
  font-variant-numeric: tabular-nums;
}

/* One visible focus ring for everything reachable by keyboard. */
.dp-rail-btn:focus-visible,
.dp-icon-btn:focus-visible,
.dp-avatar:focus-visible,
.dp-row-link:focus-visible,
.dp-pill-btn:focus-visible,
.dp-btn:focus-visible,
.dp-cta:focus-visible,
.dp-pkg:focus-visible,
.dp-brandchip:focus-visible,
.dp-menu-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.dp-cta:focus-visible { outline-offset: 3px; }

/* Only tiles that actually do something react to the pointer. */
.dp-card { transition: box-shadow var(--t) var(--ease); }
a.dp-card { cursor: pointer; }

.dp-rows li:last-child { padding-bottom: 0; }

::selection { background: var(--lime); color: var(--ink); }

/* ── Entrance ───────────────────────────────────────────────────────────── */

.dp-card { animation: dp-rise 380ms var(--ease) both; }

@keyframes dp-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .dp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp4 { grid-column: span 2; }
  .rw2 { grid-row: auto; }
}

/* Unter Tablet-Breite wird die Seitenleiste zur waagerechten Leiste, die
   sich seitlich schieben lässt (Vorlage). */
@media (max-width: 991.98px) {
  .dp-app { padding: 18px 24px 32px; }
  .dp-body { flex-direction: column; gap: 24px; margin-top: 20px; }
  .dp-rail {
    position: static;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dp-rail::-webkit-scrollbar { display: none; }
  .dp-rail-btn { width: auto; }
  .dp-rail-spacer { display: none; }
  .dp-rail form { margin-left: auto; }
}

@media (max-width: 767.98px) {
  .dp-app { padding: 18px 18px 28px; }
  .dp-brandchip-text { display: none; }

  .dp-bento { grid-template-columns: minmax(0, 1fr); }
  .sp2, .sp4 { grid-column: span 1; }
  .dp-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .dp-topnav-right .dp-chip { display: none; }
  .dp-hero-actions .dp-btn { flex: 1; }
  .dp-book { width: 80px; }
  .dp-cover { min-height: 150px; }
  .dp-dark, .dp-cta, .dp-num { min-height: 112px; }
  .dp-row-inv { flex-wrap: wrap; gap: .35rem .75rem; }
  .dp-inv-date { min-width: 0; order: -1; width: 100%; }
  .dp-pill-btn { width: 100%; justify-content: space-between; }
}

/* ── Fusszeile mit den Pflichtlinks ─────────────────────────────────────── */

/* Kein Kasten. Eine Kachel machte daraus einen Seitenabschluss, ohne Kachel
   lagen die Links heimatlos auf dem Canvas — eine 1px-Linie traegt sie,
   ohne Gewicht zu geben. */
.dp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 12px 8px 2px;
  border-top: 1px solid var(--soft-2);
  font-size: .6875rem;
  color: var(--ink-3);
}

.dp-footer-copy { white-space: nowrap; }

.dp-footer-links { display: flex; align-items: center; gap: 1rem; }

.dp-footer-links a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.dp-footer-links a:hover { color: var(--ink-2); text-decoration: underline; }

.dp-footer-links a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Pause-Schritt ──────────────────────────────────────────────────────── */

/* Zwei Kacheln statt einer leeren Flaeche: links, wo der Kunde steht,
   rechts die Handlung — dieselbe Bento-Teilung wie das Dashboard, aus dem
   er kommt. */
.dp-pause-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.dp-pause-context {
  display: grid;
  justify-items: start;
  gap: .45rem;
  margin-bottom: 0;
  padding: 28px 28px 30px;
}

/* Markenmotiv wie .dp-brandchip-mark und das Login: schwarzer Kreis,
   Akzent darin. */
.dp-pause-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

.dp-pause-project {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dp-pause-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--ink);
}

.dp-pause-sub {
  margin: 0;
  font-size: .875rem;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 40ch;
}

.dp-pause-tag { margin-top: .9rem; }

/* Derselbe Balken wie in der Hero-Karte: schwarz auf hellgrau, schmal. */
.dp-pause-bar {
  width: 100%;
  height: 6px;
  margin-top: .3rem;
  border-radius: 999px;
  background: var(--soft-2);
  overflow: hidden;
}

.dp-pause-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}

/* Das Formular ist nur Huelle — die Kachel selbst ist der Knopf. */
.dp-pause-action { display: flex; }

.dp-pause-cta {
  flex: 1;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 20px;
  min-height: 100%;
}

.dp-pause-cta-text { display: grid; gap: .15rem; }
.dp-pause-cta .dp-cta-text { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.dp-pause-cta:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 48rem) {
  .dp-pause-grid { grid-template-columns: 1fr; }
  .dp-pause-cta { min-height: 132px; }
}

/* ── Aufgaben-Dashboard ─────────────────────────────────────────────────── */

/* Die Startseite beantwortet zuerst "Muss ich etwas tun?" (dp-hello), dann
   stehen die Aufgaben — jede mit ihrem Buch — und darunter die Buecher.
   Der einzige laute Knopf der Seite ist dp-task-btn; alles andere sind Links
   oder ganze Karten. */

.dp-hello { padding: 6px 4px 18px; }
.dp-hello-title {
  margin: .15rem 0 0;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.dp-hello-sub { margin: .5rem 0 0; max-width: 60ch; font-size: .9375rem; color: var(--ink-2); }

.dp-group-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 22px 4px 10px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dp-count {
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--soft-2);
  color: var(--ink);
  font-size: .6875rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Gezeichnetes Cover — ein Buch statt einer Kachel mit Zahlen. */
.dp-bcover {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(160deg, hsl(var(--bk-h) 55% 62%), hsl(var(--bk-h) 45% 32%));
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
  color: #fff;
}
.dp-bcover-title {
  padding: 10px 10px 10px 16px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.dp-bcover-lg { width: 140px; }
.dp-bcover-md { width: 60px; }
.dp-bcover-sm { width: 38px; }
.dp-bcover-md .dp-bcover-title, .dp-bcover-sm .dp-bcover-title { display: none; }

/* Status — ueberall dieselben fuenf Woerter, Punkt plus Text. */
.dp-state {
  --c: var(--st-new);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem .2rem .5rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.dp-state::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); }
.dp-state[data-attention="turn"] { --c: var(--st-waiting); }
.dp-state[data-attention="ai"]   { --c: var(--st-active); }
.dp-state[data-attention="help"] { --c: var(--st-error); background: var(--orange-sft); }
.dp-state[data-attention="done"] { --c: var(--st-done); }
.dp-state[data-attention="ai"]::before { animation: dp-pulse 1.4s ease-in-out infinite; }
@keyframes dp-pulse { 50% { opacity: .3; } }

/* Vier Phasen statt einer Punktreihe ohne Namen. */
.dp-phases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  color: var(--ink-3);
}
.dp-phase { display: inline-flex; align-items: center; gap: .35rem; }
.dp-phase + .dp-phase::before {
  content: "";
  width: 14px;
  height: 2px;
  margin-right: .15rem;
  border-radius: 2px;
  background: var(--soft-2);
}
.dp-phase-mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--soft-2);
  border-radius: 999px;
  font-size: .625rem;
}
.dp-phase.is-done { color: var(--ink-2); }
.dp-phase.is-done .dp-phase-mark { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.dp-phase.is-current { color: var(--ink); font-weight: 600; }
.dp-phase.is-current .dp-phase-mark { border-color: var(--ink); }
.dp-phase.is-current .dp-phase-mark::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }

/* Kompakt fuer Karten: vier Balken, nur die aktuelle Phase beschriftet. */
.dp-phasebar { display: grid; gap: .4rem; }
.dp-phasebar-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dp-phasebar-track > span { height: 6px; border-radius: 999px; background: var(--soft-2); }
.dp-phasebar-track > .is-done { background: var(--ink); }
.dp-phasebar-track > .is-current { background: linear-gradient(90deg, var(--ink) 50%, var(--soft-2) 50%); }
.dp-phasebar-label { font-size: .75rem; color: var(--ink-2); }

/* Der eine laute Knopf: nur fuer Aufgaben. */
.dp-task-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .45rem .45rem 1.15rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.dp-task-btn:hover { background: var(--lime-2); color: var(--ink); transform: translateX(2px); }
.dp-task-btn-circle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
}

/* Ein Buch: eine Karte mit allem. */
.dp-focus {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--card);
}
.dp-focus-body { display: grid; gap: 1rem; min-width: 0; }
.dp-focus-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.dp-focus-title { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.dp-focus-sub { margin: .2rem 0 0; font-size: .8125rem; color: var(--ink-3); }

.dp-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--soft);
}
.dp-next[data-attention="ai"], .dp-next[data-attention="wait"] { background: var(--blue-sft); }
.dp-next[data-attention="help"] { background: var(--orange-sft); }
.dp-next-copy { min-width: 0; max-width: 52ch; }
.dp-next-label { margin: 0; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.dp-next-text { margin: .15rem 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.dp-next-hint { margin: .2rem 0 0; font-size: .8125rem; color: var(--ink-2); }

/* Aufgabenliste: jede Zeile nennt ihr Buch neben dem Knopf. */
.dp-tasks {
  display: grid;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--card);
}
.dp-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
}
.dp-task + .dp-task { border-top: 1px solid var(--soft); }
.dp-task-book { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.dp-task-text { margin: .1rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }

.dp-calm {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: var(--card);
}
.dp-calm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--blue-sft);
  font-size: 1.1rem;
}
.dp-calm-title { margin: 0; font-weight: 600; }
.dp-calm-sub { margin: 0; font-size: .8125rem; color: var(--ink-2); }

/* Zwei bis drei Buecher: Karten zum Nachschauen. Die ganze Karte fuehrt zur
   Detailseite (gestreckter Link); Aktionen fertiger Buecher liegen darueber. */
.dp-bks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dp-bk {
  position: relative;
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--card);
  transition: box-shadow var(--t) var(--ease);
}
.dp-bk:hover { box-shadow: 0 0 0 2px var(--soft-2); }
.dp-bk-top { display: flex; align-items: flex-start; gap: 12px; }
.dp-bk-head { display: grid; justify-items: start; gap: .4rem; min-width: 0; }
.dp-bk-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.dp-bk-link { color: inherit; text-decoration: none; }
.dp-bk-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dp-bk .dp-bk-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dp-bk-line { margin: 0; font-size: .8125rem; color: var(--ink-2); }
.dp-bk-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Ab vier Buechern: kompakte Zeilen, gruppiert. */
.dp-bkrows {
  display: grid;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--r-card);
  background: var(--card);
}
.dp-bkrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.dp-bkrow + .dp-bkrow { border-top: 1px solid var(--soft); }
.dp-bkrow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-bkrow-state { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dp-bkrow-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--ink-2); }
.dp-bkrow-since { font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.dp-bkrow-actions { display: flex; gap: .35rem; }

.dp-done > summary { cursor: pointer; list-style: none; }
.dp-done > summary::-webkit-details-marker { display: none; }
.dp-done > summary .bi { transition: transform var(--t) var(--ease); }
.dp-done[open] > summary .bi { transform: rotate(180deg); }

/* Angebote: abgesetzt und leiser als die eigenen Buecher. */
.dp-offers { margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--soft-2); }
.dp-offers .dp-pkg { background: var(--card); }
.dp-offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.dp-offer { padding: 14px 16px; border-radius: var(--r-sm); background: var(--card); }

.dp-task-btn:focus-visible, .dp-bk-link:focus-visible, .dp-done > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dp-state[data-attention="ai"]::before { animation: none; }
  .dp-task-btn:hover { transform: none; }
}

@media (max-width: 767.98px) {
  .dp-focus { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .dp-bcover-lg { width: 96px; }
  .dp-task { grid-template-columns: auto minmax(0, 1fr); }
  .dp-task .dp-task-btn { grid-column: 1 / -1; justify-self: start; }
  .dp-bkrow { grid-template-columns: auto minmax(0, 1fr); }
  .dp-bkrow-state { grid-column: 2; }
  .dp-bkrow-since { display: none; }
  .dp-bkrow-actions { grid-column: 2; }
}

/* ── Typografie der Vorlage (Hannah, 09.11.2026) ──────────────────────────
   Steht am Ende, damit sie die Angaben der einzelnen Bausteine weiter oben
   übersteuert, ohne dass jede Stelle angefasst werden muss. Große Titel in
   Newsreader (Serif), Kicker und Abschnittsüberschriften als kleine Versalien
   mit weitem Abstand, wie „MEINE BÜCHER“ in der Vorlage. */

.dp-pagetitle,
.dp-hello-title,
.dp-welcome-title,
.dp-focus-title,
.dp-pause-title,
.dp-proj-title,
.dp-modal-title,
.dp-help-title {
  font-family: var(--ff-serif);
  font-weight: 500;
  letter-spacing: -.012em;
}

.dp-pagetitle,
.dp-hello-title { font-size: clamp(2.1rem, 4.4vw, 2.75rem); line-height: 1.08; }

/* Betonung in einer Überschrift kursiv, wie „Hallo <em>Hannah.</em>“. */
.dp-pagetitle em,
.dp-hello-title em { font-style: italic; }

.dp-kicker,
.dp-group-label,
.dp-pause-project,
.dp-next-label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dp-card-label { font-size: .8125rem; font-weight: 700; color: var(--ink-2); }

.dp-hero-title,
.dp-cover-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  letter-spacing: -.012em;
}

/* Status wie in der Vorlage: farbiger Punkt und fette Schrift, ohne Pille.
   Die Farbregeln weiter oben greifen nur, wenn data-status direkt am
   Elternteil des Punkts hängt; in Buchkarte und Detailseite steht es
   weiter außen. */
.dp-badge { padding: .2rem 0; background: none; font-size: .875rem; font-weight: 700; }
[data-status="ERROR"]   .dp-badge .dp-dot { background: var(--st-error); }
[data-status="WAITING"] .dp-badge .dp-dot { background: var(--st-waiting); }
[data-status="ACTIVE"]  .dp-badge .dp-dot { background: var(--st-active); }
[data-status="DONE"]    .dp-badge .dp-dot { background: var(--st-done); }