/* Penvela – die App.
   Gleiche Farben und Schriften wie die Vorstellungsseite: warmes Off-White
   auf fast Schwarz, Familjen Grotesk, Blau als Akzent. */

:root {
  --paper: #121316;        /* Hintergrund */
  --surface: #1B1C20;      /* Leiste, Kacheln, Felder */
  --raised: #24262B;       /* Felder im Feld */
  --ink: #ECEBE6;
  --ink-soft: #9B9EA6;
  --ink-faint: #6E7178;
  --line: #2E3036;
  --line-soft: #26282D;
  --btn-bg: #ECEBE6;
  --btn-fg: #121316;
  --accent: #2A47E4;
  --blitz: #5B7CFA;      /* das Blau des Pro-Blitzes */
  --danger: #FF7A6E;
  --shadow: rgba(0, 0, 0, 0.5);

  --f-ui: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* hidden muss gegen display: flex/grid der Komponenten gewinnen */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ----------------------------------------------------------- Gerüst */

main {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  height: 100%;
}

aside {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 28px 26px 44px;
  overflow-y: auto;
}

aside header { margin-bottom: 26px; }
aside header .link {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
aside header .brand {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

aside header p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ----------------------------------------------------------- Felder */

.field { margin-bottom: 24px; }

label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

label + input[type="range"] { margin-bottom: 18px; }

output {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
}

textarea { resize: vertical; line-height: 1.55; min-height: 110px; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 54%, calc(100% - 12px) 54%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}

textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--ink-faint);
  outline-offset: 1px;
  border-color: var(--ink-faint);
}

/* Selbst gezeichnet statt accent-color: der Browser malt sonst einen hellen
   Rahmen um die Schiene, der sich nicht abschalten lässt. Der blaue Teil
   links vom Knopf kommt aus --fuell, das der Editor bei jeder Änderung setzt. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right,
    #7f93f5 var(--fuell, 0%), #3A3D44 var(--fuell, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #7f93f5;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #3A3D44;
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #7f93f5;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #7f93f5;
}

/* ----------------------------------------------------------- Knöpfe */

button {
  font: inherit;
  font-weight: 500;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  transition: background 0.14s, border-color 0.14s, transform 0.14s;
}

button:hover { background: #2C2F35; border-color: var(--ink-faint); }

button.primary {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
}
button.primary:hover { transform: translateY(-1px); background: #fff; }
button.primary:disabled {
  background: #4A4C52;
  border-color: #4A4C52;
  color: #9B9EA6;
  cursor: default;
  transform: none;
}

button.secondary { width: 100%; margin-top: 10px; }

button.link {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font-size: 14px;
  color: var(--ink-soft);
}
button.link:hover { background: none; color: var(--ink); }
button.link.danger { color: var(--danger); opacity: 0.85; }
button.link.danger:hover { opacity: 1; }
button.danger { color: var(--danger); }

/* Name eines Blatts oder einer Schrift: sieht aus wie eine Überschrift,
   lässt sich aber direkt umbenennen. */
input.title {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 2px 0 3px;
}
input.title:hover { border-bottom-color: var(--line); }
input.title:focus { outline: none; border-bottom-color: var(--ink-faint); }

#train, #ki { margin-top: 10px; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { flex: 1; min-width: 92px; white-space: nowrap; }

/* Im Anlern-Fenster ist zu wenig Platz für drei Knöpfe nebeneinander. */
.trainer .actions button.primary { flex-basis: 100%; }

/* ----------------------------------------------------------- Farben */

.row { display: flex; gap: 10px; }

.swatch {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 11px;
  background: var(--raised);
}
input[type="color"].farbe {
  display: block;
  width: 100%;
  height: 44px;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
}
input[type="color"].farbe::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].farbe::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--radius) - 5px);
}

.swatch em { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.swatch input {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: none; cursor: pointer;
  appearance: none;
}
.swatch input::-webkit-color-swatch-wrapper { padding: 1px; }
.swatch input::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* ------------------------------------------------------------ Blatt */

/* Das Blatt wird in voller Länge gezeigt; ist es höher als das Fenster,
   scrollt man – wie bei echtem Papier. */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 38px 34px 52px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.sheet {
  background: #fff;
  box-shadow: 0 20px 50px var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  flex: none;
}

.sheet canvas { display: block; height: auto; border-radius: 6px; }

/* Alle Seiten untereinander, mit Seitenzahl darunter. */
.blaetter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
}

.seitenzahl {
  margin-top: 9px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- Hinweise */

.note { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.note.warn { color: var(--danger); }

/* --------------------------------------------------------- Fenster */

/* Fenster liegen über allem – auch über der festen Leiste und den Knöpfen
   oben rechts, sonst ragen die in das offene Fenster hinein. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  z-index: 60;
}

.sheetbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 30px 32px;
  width: min(920px, 100%);
  max-height: 100%;
  overflow-y: auto;
  box-shadow: 0 30px 70px var(--shadow);
}

.sheetbox-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.sheetbox-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.sheetbox-head .note { max-width: 46ch; }
.sheetbox-head button { width: auto; margin: 0; }

/* -------------------------------------------------- Anlern-Fenster */

.trainer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }

.boardwrap { position: relative; margin-bottom: 12px; }
#board {
  width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  touch-action: none;
  cursor: crosshair;
  display: block;
}
label.toggle {
  justify-content: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  font-weight: 400;
  cursor: pointer;
}
label.toggle input { margin: 0; accent-color: #7f93f5; }

#charset { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
#charset button {
  width: 34px; height: 34px; padding: 0;
  font-size: 14px; border-radius: 9px;
}
#charset button.done { background: rgba(42, 71, 228, 0.22); border-color: rgba(127, 147, 245, 0.5); }
#charset button.current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ------------------------------------------------------- KI-Fenster */

.ki-box { width: min(680px, 100%); }
.ki-box textarea { resize: vertical; }

#ki-datei { font: inherit; font-size: 14px; color: var(--ink-soft); }

#ki-vorschau {
  display: block;
  margin-top: 12px;
  max-height: 230px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#ki-ergebnis textarea { margin-bottom: 10px; }
#ki-ergebnis button { width: 100%; margin: 0; }
#ki-status { flex: 1 1 100%; margin-top: 10px; }

/* -------------------------------------------------------- Startseite */

/* Der Seitentitel steht auf derselben Höhe wie die Knöpfe oben rechts:
   19px oben plus eine 54px hohe Zeile ergibt dieselbe Mitte (46px). */
/* Keine Mittelspalte: Die Bibliothek beginnt links unter dem Titel und endet
   rechts unter den Knöpfen – wie beim Regal, in dem auch nichts in der Mitte
   schwebt. Dadurch passen mehr Blätter in eine Reihe. */
.home {
  padding: 134px 22px 96px 65px;   /* Platz für Titel und feste Leiste */
}

.home-head h1 { font-size: clamp(26px, 3.4vw, 34px); }
.home-head p { margin: 6px 0 0; color: var(--ink-soft); }
.home-head .version { font-size: 12px; color: var(--ink-faint); }

.shelf { margin-top: 48px; }
.shelf h2 {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 30px 24px;
}
.grid.fonts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  min-width: 0;
}
.card:hover { background: none; }

/* Das Fach einer Kachel ist immer gleich hoch – ein Blatt steht hochkant
   darin, eine Mappe liegt breit auf dem Boden des Fachs. Dadurch stehen
   Blätter und Ordner nebeneinander auf einer Linie, wie im Regal. */
.card .thumb {
  position: relative;
  aspect-ratio: 1 / 1.16;
  background: none;
  display: grid;
  place-items: end center;
  transition: transform 0.16s;
  margin-bottom: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}
/* Schriftproben sind breit und flach, keine Blätter. */
.schriften .card .thumb { aspect-ratio: 5 / 2; place-items: stretch; }
.schriften .card .thumb canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  transform: none;
  object-fit: contain;
  object-position: center;
}

/* Freigestellt aus dem Fluss: Sonst zieht das hohe Blatt das Fach in die
   Länge, statt sich einzupassen. */
.card .thumb canvas {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px var(--shadow);
  transition: box-shadow 0.16s;
}

.card:hover .thumb { transform: translateY(-3px); }
.card:hover .thumb canvas { box-shadow: 0 20px 44px var(--shadow); }
.card:focus-visible { outline: none; }
.card:focus-visible .thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

.card .name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .meta { font-size: 13px; color: var(--ink-soft); }

/* Name und Pfeil sind zusammen ein Knopf – wie in GoodNotes öffnet beides
   dasselbe Menü. Mittig unter der Kachel, das Datum darunter. */
.card { align-items: center; text-align: center; }
.karte-titel {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
}
.karte-titel:hover { background: var(--surface); border-color: transparent; }
.karte-titel .pfeil { display: flex; color: var(--ink-faint); }
.card .meta { margin-top: 1px; }

/* Papierkorb neben dem Namen. Immer sichtbar – auf dem iPad gibt es kein
   Daraufzeigen, das ihn hervorholen könnte. */

/* Name direkt auf der Startseite änderbar */
input.name {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0 0 1px;
  width: 100%;
}
input.name:hover { border-bottom-color: var(--line); }
input.name:focus { outline: none; border-bottom-color: var(--ink-faint); }

button.thumb { width: 100%; padding: 0; border: 0; cursor: pointer; }

.card.add .thumb {
  background: transparent;
  border: 1.5px dashed var(--line);
  box-shadow: none;
  font-size: 38px;
  font-weight: 300;
  color: var(--ink-faint);
}
.card.add:hover .thumb { border-color: var(--ink-soft); color: var(--ink); transform: none; }

#delete-sheet { margin-top: 8px; }

/* ------------------------------------------------------------ Schmal */

@media (max-width: 900px) {
  .home { padding: 103px 16px 64px; }
  .home-kopf { left: 32px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 24px 16px; }
  main { grid-template-columns: 1fr; height: auto; }
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage { padding: 24px 18px 44px; }
  .sheet canvas { max-height: none; }
  .trainer { grid-template-columns: 1fr; }
}

/* ================================================= Knöpfe oben rechts */

.kopf-knoepfe {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
}

.knopf-gruppe {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

button.rund {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid transparent;
  color: var(--ink);
}
button.rund:hover { background: #2C2F35; }
.knopf-gruppe button.rund { background: transparent; }
.knopf-gruppe button.rund:hover { background: var(--raised); }
/* Das Profil ist eine volle Scheibe, die Symbole daneben nur Striche. Ohne
   den Extraabstand klebt der Blitz optisch am Profil, obwohl er genau mittig
   in seinem Knopf sitzt. */
.knopf-gruppe button.profil {
  margin-left: 13px;
  background: #1BBF8A;
}
.knopf-gruppe button.profil:hover { background: #22d79d; }

/* So hoch wie die Gruppe daneben (42 + 2×6 Innenabstand), sonst wirkt der
   einzelne Knopf neben dem Profil zu klein. */
/* Stift oder Radierer in Betrieb: der Knopf bleibt sichtbar gedrückt. */
.rund.einzeln.an { background: var(--accent); border-color: var(--accent); color: #fff; }

.rund.einzeln {
  width: 54px;
  height: 54px;
  background: var(--surface);
  border-color: var(--line);
}
.rund.einzeln:disabled { opacity: 0.4; cursor: default; background: var(--surface); }
.rund.gefahr:hover { background: #3a1f24; border-color: var(--danger); color: var(--danger); }

button.profil {
  background: #1BBF8A;
  color: #0b0c11;
  font-weight: 700;
  font-size: 16px;
}
button.profil:hover { background: #22d79d; }

.profil.klein {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: #1BBF8A; color: #0b0c11;
  font-size: 14px; font-weight: 700;
}

button.blank {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--ink);
  border-radius: 10px;
}
button.blank:hover { background: var(--raised); }

/* Ältere Browser setzen [hidden] nicht gegen eigene display-Regeln durch;
   ohne das bleiben versteckte Menüs und Knopfgruppen sichtbar. */
[hidden] { display: none !important; }

.ico { display: block; }
[data-icon] { display: inline-flex; }

/* ============================================================== Menüs */

.menu {
  position: fixed;
  top: 68px;
  right: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 268px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 54px var(--shadow);
}

.menu-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--raised);
  border: 0;
  text-align: left;
  font-size: 15.5px;
  color: var(--ink);
}
.menu-zeile:hover { background: #2C2F35; }
.menu-zeile.name { background: var(--raised); font-weight: 600; cursor: default; }
.menu-zeile.rot { color: var(--danger); }
.menu-zeile.aus { opacity: 0.4; cursor: default; }
.menu-zeile.aus:hover { background: var(--raised); }
.menu-zeile.hervor { font-weight: 600; }

.menu-trenner { height: 1px; background: var(--line); margin: 2px 6px; }

.chip {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #2C2F35;
  color: var(--ink);
}
.chip.blau { background: var(--blitz); color: #0b0c11; }

/* Wiederholen: nur das runde Pfeilsymbol, ohne Beschriftung. */
.nachricht-knoepfe.unter-frage {
  justify-content: flex-end;
  margin: -4px 0 2px;
}

.nachricht-knoepfe button.wiederholen {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.nachricht-knoepfe button.wiederholen:hover {
  background: var(--raised);
  color: var(--ink);
}

.stand {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.plus-menu { min-width: 250px; }
.plus-hinweis {
  margin: 2px 8px 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  /* Der Text selbst bekommt eine blaue Kontur – paint-order legt sie hinter
     die Füllung, sonst frisst die Linie die Buchstaben auf. */
  -webkit-text-stroke: 1px var(--blitz);
  paint-order: stroke fill;
}

/* Pro-Karte */
.pro-karte { min-width: 310px; }
.pro-karte h3 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 0 12px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.03em;
}
.pro-liste {
  margin: 0 0 14px;
  padding: 12px 14px;
  list-style: none;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pro-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 15px; color: var(--ink-soft);
}
.pro-liste li [data-icon] { color: var(--ink-faint); }
.breit { width: 100%; }
.actions + .breit { margin-top: 10px; }
.mittig { margin: 8px auto 0; text-align: center; }
.note.klein { font-size: 12px; }

/* ========================================================= Anmeldung */

#login {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
}

.login-karte {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 28px 60px var(--shadow);
  text-align: center;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.marke.gross { font-size: 36px; }
.logo-stift { width: 0.74em; height: 0.74em; }

.anmelde-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 15.5px;
}
.anmelde-knopf:hover { background: #fff; transform: translateY(-1px); }

/* ============================================================== Chat */

#chat {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: 100%;
  padding: 14px;
  gap: 14px;
}
#chat.ohne-leiste { grid-template-columns: minmax(0, 1fr); }
#chat.ohne-leiste .chat-leiste { display: none; }

.chat-leiste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow-y: auto;
}

.leiste-kopf { display: flex; gap: 10px; align-items: center; }

.suche {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
}
.suche input {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.suche input:focus { outline: none; }

.leisten-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--raised);
  border: 0;
  font-size: 14.5px;
  text-align: left;
  color: var(--ink);
}
.leisten-knopf:hover { background: #2C2F35; }
.leisten-knopf.neu { font-weight: 600; }

.chat-liste { display: flex; flex-direction: column; gap: 2px; }

/* Eine Zeile in der Chatliste: Titel links, die drei Punkte rechts. Die
   Punkte erscheinen erst, wenn die Maus auf der Zeile liegt – oder solange
   ihr Menü offen ist. */
.chat-zeile {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
.chat-zeile:hover, .chat-zeile.aktiv, .chat-zeile.offen { background: var(--raised); }
.chat-zeile:hover .chat-eintrag, .chat-zeile.aktiv .chat-eintrag { color: var(--ink); }

.chat-eintrag {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-eintrag:hover { background: none; }

.chat-punkte {
  display: none;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-soft);
}
.chat-zeile:hover .chat-punkte, .chat-zeile.offen .chat-punkte { display: grid; }
.chat-punkte:hover { background: #33363d; color: var(--ink); }

.chat-menu { min-width: 190px; }

.chat-haupt {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Auf derselben Höhe wie die Knöpfe oben rechts. Fest am Fenster, nicht am
   Chatbereich – sonst schiebt dessen Innenabstand den Knopf nach unten.
   19px, weil die Knopfgruppe rechts 1px Rahmen hat und ihre Nachbarn mittig
   darin sitzen. */
.chat-oben {
  position: fixed;
  top: 19px;
  left: 22px;
  display: flex;
  gap: 8px;
  z-index: 25;
}

.chat-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 74px clamp(16px, 4vw, 56px) 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat-leer { margin: auto; color: var(--ink-faint); text-align: center; max-width: 36ch; }

.nachricht {
  max-width: 760px;
  width: fit-content;
  padding: 15px 19px;
  border-radius: 20px;
  background: var(--raised);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  line-height: 1.6;
}
.nachricht p { margin: 0; }
.nachricht.ich { margin-left: auto; background: #2C2F35; }
.nachricht.ki { background: transparent; border-color: transparent; padding-left: 0; }
.nachricht.fehler { border-color: var(--danger); color: var(--danger); }
.nachricht.wartet { color: var(--ink-faint); border-color: transparent; }
.nachricht .secondary { margin-top: 14px; width: auto; font-size: 14px; padding: 9px 16px; }
.nachricht-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.nachricht .secondary:disabled { opacity: 0.45; cursor: default; }
.chat-hinweis { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }

.anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.anhaenge img { max-height: 200px; border-radius: 12px; border: 1px solid var(--line); }

/* Das fertig ausgefüllte Arbeitsblatt ist das Ergebnis – das darf groß sein. */
.nachricht.blatt { width: 100%; max-width: 520px; }
.nachricht.blatt .anhaenge { flex-direction: column; gap: 14px; }
.nachricht.blatt .anhaenge img {
  max-height: none;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 16px 36px var(--shadow);
}

.chat-fuss { padding: 0 clamp(16px, 4vw, 56px) 26px; }

.eingabe-reihe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
}

#chat-eingabe {
  flex: 1;
  border: 0;
  background: none;
  padding: 11px 2px;
  min-height: 0;
  max-height: 180px;
  resize: none;
  font-size: 16px;
}
#chat-eingabe:focus { outline: none; }

.anhang { position: relative; }
.anhang img { max-height: 110px; }
.anhang-weg {
  position: absolute;
  top: -7px; right: -7px;
  width: 23px; height: 23px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

/* ===================================================== Handschrift */

.schrift-box {
  width: min(1000px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 28px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 30px 70px var(--shadow);
}

.schrift-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.schrift-name { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.schrift-name input {
  font: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.schrift-name input:focus { outline: none; border-bottom-color: var(--ink); }

.schrift-kopf-knoepfe { display: flex; gap: 10px; }
.schrift-kopf-knoepfe button {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
}
.rot-rahmen { color: var(--danger); border-color: rgba(255,122,110,0.4); }

/* Sechs Spalten: so steht in jeder Reihe genau ein Buchstabenpaar mit
   seinen drei Varianten – a a a b b b, darunter c c c d d d. */
.zeichen-raster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.zeichen-kachel {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  overflow: hidden;
}
.zeichen-kachel:hover { border-color: var(--ink-faint); }

.kachel-buchstabe {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-6%);
  color: var(--ink);
}
.kachel-linie {
  position: absolute;
  left: 10%; right: 10%;
  top: 68%;
  border-top: 1.5px dashed var(--ink-faint);
}
.kachel-bild { width: 100%; height: 100%; }

.kachel-ecke {
  position: absolute;
  top: 8px; left: 8px;
  color: var(--ink-faint);
}
.kachel-pro {
  position: absolute;
  top: 7px; right: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Nachfahren */

.nachfahren-box {
  position: relative;
  width: min(560px, 100%);
  padding: 54px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 30px 70px var(--shadow);
}
.ecke-links { position: absolute; top: 14px; left: 16px; }
.ecke-rechts { position: absolute; top: 14px; right: 16px; }

.nachfahren-mitte { display: flex; align-items: center; gap: 10px; }
.nachfahren-mitte .boardwrap { flex: 1; }
.pfeil { color: var(--ink); }

.nachfahren-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

#board {
  width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  touch-action: none;
  cursor: crosshair;
  display: block;
}

label.toggle {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-weight: 400; cursor: pointer; color: var(--ink-soft);
}
label.toggle input { margin: 0; accent-color: #7f93f5; }

/* ======================================================== Dokumente */

/* Der Titel hängt am Fensterrand, nicht an der zentrierten Inhaltsspalte –
   genau wie die Knöpfe rechts. Sonst rückt er auf breiten Bildschirmen weit
   in die Mitte, während die Knöpfe am Rand bleiben. */
.home-kopf {
  position: fixed;
  top: 19px;
  left: 65px;
  z-index: 25;
  display: flex;
  align-items: center;
  height: 54px;
  margin: 0;
}

/* Optischer Ausgleich: Der Schriftkasten ist höher als die Buchstaben, und
   das P hat links etwas Luft. Ohne das steht der Titel zu hoch und zu weit
   rechts, obwohl die Kästen rechnerisch bündig sind. */
.home-kopf .marke { font-size: 33.7px; transform: translateY(5px); }
.regal { margin-top: 42px; }
.regal h2 { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }

/* Höchstens acht nebeneinander: Eine Spalte ist nie schmaler als 96px und
   nie breiter als ein Achtel der Reihe – auf dem iPad stehen damit acht
   nebeneinander, auf dem Telefon entsprechend weniger. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(96px, (100% - 140px) / 8), 1fr));
  gap: 26px 20px;
  align-items: start;
}

/* ------------------------------------------------- Leiste der Bibliothek */

/* Die Leiste bleibt beim Scrollen stehen, genau wie die Knöpfe oben rechts.
   Ohne eigenen Hintergrund: Was darunter wegscrollt, bleibt sichtbar. */
.galerie-leiste {
  position: fixed;
  top: 84px;
  left: 65px;
  right: 22px;
  z-index: 24;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.leiste-rechts { display: flex; align-items: center; gap: 14px; }

/* Filter links: sieht aus wie ein Text, verhält sich wie ein Knopf. */
.galerie-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Links ohne Innenabstand: So steht „Alle“ genau unter dem P von Penvela. */
  margin-left: -12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.galerie-filter:hover { background: var(--surface); border-color: transparent; }
.galerie-filter .ico { color: var(--ink-soft); }

.neu-knopf {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 28px 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.neu-knopf:hover { background: #3754ff; border-color: transparent; }

/* Die Gruppe rechts ist genau so hoch wie der Neu-Knopf (30 + 2x2 + Rand),
   dafür etwas breiter gezogen – sonst wirkt sie neben ihm gedrungen. */
.galerie-leiste .knopf-gruppe { padding: 2px 10px; gap: 10px; }
.galerie-leiste .knopf-gruppe button.rund { width: 30px; height: 30px; }

/* Trennstrich in der Knopfgruppe, wie zwischen Ansicht und Wolke. */
.leiste-strich { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* Die Menüs der Leiste hängen an ihrem Knopf, nicht am Fensterrand. */
.menu.menu-galerie { position: absolute; top: calc(100% + 10px); right: auto; }
.menu.menu-galerie.links { left: 0; }
.menu.menu-galerie.rechts { left: auto; right: 0; }
.menu .note { margin: 0 6px; font-size: 13.5px; }
.menu .note.klein { font-size: 12.5px; color: var(--ink-faint); }
.menu-zeile .haken-platz { margin-left: auto; color: var(--accent); display: flex; }

.ordner-pfad { margin-top: 26px; }
.ordner-pfad .link { font-size: 17px; font-weight: 600; padding: 0; }

/* ------------------------------------------------------------ Ordner */

/* Ein Ordner zeigt statt eines Vorschaubilds die Mappe in ihrer Farbe. Das
   Feld bleibt so hoch wie ein Blatt, damit in einer Reihe aus Ordnern und
   Blättern alle Namen auf derselben Höhe stehen. */
.card.ordner-karte:hover .thumb { transform: translateY(-3px); }
.card.ordner-karte .thumb svg.mappe {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}

/* ------------------------------------------------- Ziehen und Ablegen */

/* Das Schattenbild am Finger. Es darf keine Klicks abfangen, sonst findet
   man den Ordner darunter nicht. */
.zieh-bild {
  position: fixed;
  z-index: 60;
  width: 128px;
  pointer-events: none;
  opacity: 0.85;
  transform: translate(-50%, -50%) rotate(-3deg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}
.zieh-bild canvas, .zieh-bild svg { display: block; width: 100%; height: auto; }

.card.zieht { opacity: 0.35; }
.card.ziel .thumb { outline: 2.5px solid var(--accent); outline-offset: 3px; }
/* „Alle Dokumente“ ist beim Ziehen selbst ein Ziel: Hier fällt ein Blatt
   wieder aus dem Ordner heraus. */
.ordner-pfad .link.ziel {
  background: var(--surface);
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 10px;
}
.leer-hinweis { margin-top: 10px; }

/* --------------------------------------------------------- Listenansicht */

.raster.liste { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.raster.liste .card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 14px;
}
.raster.liste .card:hover { background: var(--surface); }
.raster.liste .card .thumb {
  width: 46px;
  height: 46px;
  flex: none;
  margin: 0;
  aspect-ratio: auto;
}
.raster.liste .card .thumb canvas { max-height: 100%; border-radius: 5px; box-shadow: none; }
.raster.liste .card.ordner-karte .thumb svg.mappe { filter: none; }
.raster.liste .card.add .thumb { background: var(--surface); }
.raster.liste .card { text-align: left; }
.raster.liste .karte-titel { flex: 1; min-width: 0; justify-content: flex-start; }
.raster.liste .card .meta { margin-left: auto; white-space: nowrap; }
.raster.liste .card .name { font-size: 15.5px; }

/* Das Menü zum Einsortieren hängt an der Karte, nicht am Fensterrand. */
.schwebe-menu { position: fixed; min-width: 230px; }
.chip.farbpunkt { width: 22px; height: 22px; }

/* ------------------------------------------------ Cloud & Sicherung */

.wolke-menu { min-width: 300px; gap: 2px; }
.menu-titel { margin: 2px 6px 10px; font-size: 16px; font-weight: 700; text-align: center; }
.menu-gruppe { margin: 2px 8px 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* Ein Kasten im Kasten, wie im Entwurf: Status oben, darunter die Knöpfe. */
.menu-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--raised);
  border-radius: 16px;
}
.menu-karte .menu-zeile.schlicht { background: #2A2D33; justify-content: center; }
.menu-karte .menu-zeile.schlicht:hover { background: #33363D; }
.menu-karte .menu-zeile.schlicht.aus { opacity: 0.45; cursor: default; }
.menu-karte .menu-zeile.schlicht.aus:hover { background: #2A2D33; }

.stand-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px 11px;
}
.stand-zeile b { display: block; font-size: 15px; font-weight: 600; }
.stand-zeile .note { display: block; margin: 1px 0 0; font-size: 12.5px; }
/* Der Haken wie im Entwurf: grün, sobald wirklich synchronisiert wird,
   vorher blass – das Zeichen steht, die Aussage stimmt trotzdem. */
.stand-haken { display: flex; flex: none; }
.stand-haken.an { color: #1BBF8A; }
.stand-haken.aus { color: var(--ink-faint); opacity: 0.6; }

/* Auf dem iPad lädt niemand eine Datei herunter – da bleibt der Knopf weg. */
@media (hover: none) and (pointer: coarse) { .nur-rechner { display: none; } }

/* --------------------------------------------------- Ordner anlegen */

.ordner-box {
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 18px 22px 28px;
  box-shadow: 0 30px 70px var(--shadow);
}

.ordner-box-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.ordner-box-kopf h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ordner-box-kopf .rund.voll { background: var(--accent); color: #fff; }
.ordner-box-kopf .rund.voll:hover { background: #3754ff; }

.ordner-vorschau { display: grid; place-items: center; height: 190px; }
.ordner-vorschau svg { width: 190px; height: 160px; }

.ordner-name {
  width: 100%;
  margin: 6px 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  color: var(--ink);
  font: 600 17px/1.4 var(--f-ui);
  text-align: center;
}
.ordner-name:focus { outline: none; border-color: var(--ink-faint); }

.farb-raster {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
  justify-items: center;
}
.farb-punkt {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
}
.farb-punkt:hover { border-color: var(--ink-faint); }
.farb-punkt.gewaehlt { border-color: var(--ink); }
.farb-punkt .ico { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

@media (max-width: 560px) {
  .farb-raster { grid-template-columns: repeat(5, 1fr); }
  .galerie-filter { font-size: 17px; }
}
.raster.schriften { grid-template-columns: repeat(auto-fill, minmax(max(180px, (100% - 100px) / 6), 1fr)); }

.mit-icon { display: flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 900px) {
  .home { padding-left: 22px; }
  .galerie-leiste { left: 22px; }
  #chat { grid-template-columns: 1fr; }
  .chat-leiste { display: none; }
  .kopf-knoepfe { top: 12px; right: 12px; }
  /* Auf schmalen Geräten passt nur noch ein Buchstabe mit drei Varianten. */
  .zeichen-raster { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------- Sprache */

.flagge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #2C2F35;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.menu-zeile.aktiv { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.menu-zeile.aktiv .flagge { background: var(--accent); color: #fff; }

/* ------------------------------------------------------- Papierkorb */

.korb-box { width: min(620px, 100%); }

.korb-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 14px;
}

.korb-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--raised);
}
.korb-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.korb-text strong { font-size: 15.5px; font-weight: 600; }
.korb-text .note { margin: 0; font-size: 13px; }
.korb-zeile button { width: auto; margin: 0; flex: none; }
.korb-zeile .link { padding: 0 2px; }

/* -------------------------------------------------------- Rückfrage */

.nachfrage-box {
  width: min(380px, 100%);
  padding: 24px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 70px var(--shadow);
}
.nachfrage-box p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.5; }

.nachfrage-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }
.nachfrage-knoepfe button { width: auto; }

.rot-voll {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}
.rot-voll:hover { background: #d9414c; border-color: #d9414c; }

/* -------------------------------------------------------- Anleitung */

/* ------------------------------------------------------- Anleitung */
/* Vier Folien mit Pfeilen: erst die drei Schritte, dann Pro. */

.anleitung-box {
  position: relative;
  width: min(620px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 30px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 30px 70px var(--shadow);
}

.anleitung-zu { position: absolute; top: 14px; right: 14px; z-index: 2; }

.anleitung-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
}
.anleitung-pfeil:hover { background: var(--raised); color: var(--ink); }
/* Die Pfeile stehen neben dem Fenster, nicht darin – im Fenster würde sie
   der eigene Rollbalken abschneiden. */
.anleitung-pfeil.links { left: calc(50% - 368px); }
.anleitung-pfeil.rechts { right: calc(50% - 368px); }
.anleitung-pfeil[disabled] { opacity: 0.25; cursor: default; }
.anleitung-pfeil[disabled]:hover { background: none; color: var(--ink-soft); }

/* Alle Folien sind gleich hoch – sonst wächst und schrumpft das Fenster
   beim Blättern. Die Höhe richtet sich nach der längsten Folie (Pro). */
.folien { min-height: 548px; }
.folie { display: none; }
.folie.da { display: block; }

.folie-titel {
  margin: 0 0 22px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
}
.folie-titel .logo-stift { height: 21px; vertical-align: -2px; }

.folie-schritt { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.folie-schritt span { color: var(--ink-soft); margin-right: 6px; }
.folie-text { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.5; }

.folie-bild { display: grid; place-items: center; }

/* Das Bildschirmfoto füllt die Folie, bleibt aber in der Höhe begrenzt –
   sonst wird die erste Folie doppelt so hoch wie die letzte. */
.folie-bild img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 382px;
  width: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.pro-liste.gross li { font-size: 15.5px; padding: 11px 2px; }
.pro-liste.gross li [data-icon] { color: #1BBF8A; }
.folie-pro .primary.breit { margin-top: 18px; }
.link.mitte { display: block; margin: 8px auto 0; }

.folien-punkte { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.folien-punkte button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
}
.folien-punkte button.da { background: var(--ink-soft); }

@media (max-width: 800px) {
  .anleitung-pfeil.links { left: 2px; }
  .anleitung-pfeil.rechts { right: 2px; }
  .anleitung-box { padding-left: 50px; padding-right: 50px; }
}