/* =========================================================
   UI-CHROME (Editor, Toolbar, Sidebar, Dialog, Toast)
   Nicht im Druck sichtbar.
   ========================================================= */

:root {
  --ui-bg: #f4f4f2;
  --ui-panel: #ffffff;
  --ui-border: #e5e5e3;
  --ui-text: #1a1a1a;
  --ui-muted: #6b6b6b;
  --ui-accent: var(--accent, #0055a4);
  --ui-accent-contrast: #ffffff;
  --ui-danger: #b53232;
  --ui-focus: #ffcd3c;
  --ui-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --ui-radius: 10px;
  --toolbar-h: 56px;
  --sidebar-w: 260px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
button:hover { background: #f9f9f7; }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

button.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-contrast);
  border-color: var(--ui-accent);
}
button.primary:hover { filter: brightness(1.08); }

button.danger {
  color: var(--ui-danger);
  border-color: #ead5d5;
  background: #fff6f6;
}
button.danger:hover { background: #ffecec; }

button.ghost {
  background: transparent;
  border: 1px dashed var(--ui-border);
}
button.ghost:hover { background: #f9f9f7; }

button.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* ---------- Toolbar ---------- */

.toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  z-index: 50;
}
.toolbar-left,
.toolbar-center,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.toolbar-center {
  flex: 1;
  justify-content: center;
}
.toolbar-left   { justify-content: flex-start; }
.toolbar-right  { justify-content: flex-end; }

.brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 16px;
  white-space: nowrap;
}
.badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--accent-soft, #eef5ff);
  color: var(--ui-accent);
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  white-space: nowrap;
}

/* Segmentierter View-Switch */
.view-group {
  display: inline-flex;
  background: #f0f0ee;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.view-toggle {
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 7px;
  white-space: nowrap;
}
.view-toggle:hover { background: rgba(0,0,0,.04); }
.view-toggle.active {
  background: var(--ui-panel);
  color: var(--ui-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Theme-Button mit Farbpunkt */
.theme-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-accent);
  border: 1px solid rgba(0,0,0,.1);
  vertical-align: -2px;
  margin-right: 4px;
}

/* Sidebar-Toggle versteckt auf Desktop */
/* Sidebar-Toggle: auf Desktop sichtbar, klappt die Sidebar ein/aus.
   Auf Mobile (<900px) übernimmt er die Drawer-Funktion. */
.sidebar-toggle { display: inline-flex; }

/* Overflow-Menü */
.menu-wrap { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  box-shadow: var(--ui-shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 60;
}
.menu[hidden] { display: none; }
.menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.menu button:hover { background: #f4f4f2; }
.menu hr {
  border: 0;
  border-top: 1px solid var(--ui-border);
  margin: 4px 0;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  top: var(--toolbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  padding: 16px 16px 40px;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-border);
  overflow-y: auto;
  z-index: 40;
  transition: transform .2s ease;
}

/* Kollabierte Sidebar auf Desktop: ganz raus, Workspace rückt nach links */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .workspace {
  padding-left: 40px;
}
.sidebar, .workspace { transition: transform .2s ease, padding .2s ease; }

/* Hamburger-Icon bekommt Hintergrund-Akzent, wenn Sidebar offen ist */
body:not(.sidebar-collapsed) .sidebar-toggle {
  background: var(--ui-text);
  color: #fff;
  border-color: var(--ui-text);
}
.sidebar-close { display: none; }
.sidebar h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ui-muted);
  margin: 0 0 10px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.sidebar nav a {
  color: var(--ui-text);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
}
.sidebar nav a:hover { background: #f4f4f2; }

.sidebar-section {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--ui-border);
}
.sidebar-section h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ui-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  background: var(--accent-soft, #eef5ff);
  color: var(--ui-accent);
  border-radius: 999px;
  font-size: 11px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-section button { width: 100%; }
.btn-stack { display: flex; flex-direction: column; gap: 6px; }
.hint {
  font-size: 11px;
  color: var(--ui-muted);
  margin: 6px 0 0;
}

.datenschutz p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-muted);
}

/* Eltern-Einwilligung — eigene Sidebar-Sektion mit Download-Link.
   Nutzt die Optik der ghost-Buttons (gestrichelter Rahmen), ist aber
   ein nativer <a download>, damit der Browser das PDF korrekt anbietet. */
.sidebar-consent .hint {
  margin-bottom: 8px;
}
.ghost-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.ghost-link:hover {
  background: #f9f9f7;
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
.ghost-link:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* Backdrop für mobile Sidebar */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 39;
}
.sidebar-backdrop[hidden] { display: none; }

/* ---------- Workspace ---------- */

.workspace {
  padding: calc(var(--toolbar-h) + 32px) 40px 96px calc(var(--sidebar-w) + 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  min-height: 100vh;
}

/* Dezente Seiten-Zählermarke über jeder Seite */
.page { scroll-margin-top: calc(var(--toolbar-h) + 20px); }

/* View-Modi */
.workspace[data-view="edit"] .print-layout,
.workspace[data-view="preview"] .print-layout { display: none; }

/* In Vorschau und Druck-Ansicht sämtliches Editor-Chrome unterdrücken */
.workspace[data-view="preview"] [contenteditable="true"] { outline: none !important; }
.workspace[data-view="preview"] .remove-item,
.workspace[data-view="preview"] .photo-remove,
.workspace[data-view="preview"] .photo-pan,
.workspace[data-view="print-layout"] .remove-item,
.workspace[data-view="print-layout"] .photo-remove,
.workspace[data-view="print-layout"] .photo-pan { display: none !important; }

.workspace[data-view="print-layout"] > .page { display: none; }
.workspace[data-view="print-layout"] .print-layout { display: flex; }

/* Edit-Hinweise: nur beim Fokus deutlich, beim Hover minimal */
.workspace[data-view="edit"] [contenteditable="true"]:hover {
  background: rgba(255, 205, 60, 0.06);
  border-radius: 2px;
}
.workspace[data-view="edit"] [contenteditable="true"]:focus {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
  border-radius: 2px;
  background: rgba(255, 205, 60, 0.08);
}

/* Platzhalter-Hinweis ausschließlich im Bearbeiten-Modus zeigen.
   Wichtig: im Druck-Bogen-Mirror wurde contenteditable entfernt, daher muss
   der Selector auch ohne [contenteditable] greifen. */
.workspace[data-view="preview"] [data-placeholder]:empty::before,
.workspace[data-view="print-layout"] [data-placeholder]:empty::before {
  content: none !important;
}

/* Im Edit-Modus bleibt alles strikt innerhalb der Karte. Wenn eine
   Antwort zu lang ist, wird sie wie in der Vorschau abgeschnitten —
   so sieht der User sofort, dass es nicht passt, und kürzt selbst. */
.workspace[data-view="edit"] .qa-a {
  text-overflow: clip;          /* kein "..." beim Tippen, aber abgeschnitten */
}

/* Remove-Buttons an Karten */
.remove-item {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  line-height: 18px;
  padding: 0;
  font-size: 14px;
  border-radius: 50%;
  background: #fff;
  color: var(--ui-danger);
  border: 1px solid #ead5d5;
  opacity: 0;
  transition: opacity .15s;
  z-index: 3;
}
.student-card,
.memory-card,
.shower-card { position: relative; }
.student-card:hover .remove-item,
.memory-card:hover .remove-item,
.shower-card:hover .remove-item,
.student-card:focus-within .remove-item,
.memory-card:focus-within .remove-item,
.shower-card:focus-within .remove-item { opacity: 1; }

/* Memory-Karten haben oben das Foto in voller Kartenbreite. Würden wir
   den Karten-Löschen-Button (×) wie bei den anderen Karten oben rechts
   platzieren, läge er pixelgenau auf dem Foto-Löschen-Button (×) — der
   User wüsste nicht, was er gerade trifft. Deshalb wandert hier nur
   der Karten-Löschen-Button in die untere rechte Ecke (im Body-Bereich
   unter dem Foto), klar getrennt vom Foto-Button. */
.memory-card > .remove-item {
  top: auto;
  bottom: 4px;
  right: 4px;
}

/* Photo-Upload Interaktion */
.photo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #eee;
}
.photo.drop-hover { outline: 3px solid var(--ui-accent); outline-offset: -3px; }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ui-muted);
  font-size: 11px;
  padding: 4px;
  background:
    repeating-linear-gradient(45deg, #f1f1ee 0 10px, #e8e8e5 10px 20px);
}
.photo.has-image .photo-placeholder { display: none; }
.photo-remove,
.photo-pan {
  position: absolute;
  top: 4px;
  width: 22px;
  height: 22px;
  line-height: 18px;
  padding: 0;
  font-size: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--ui-border);
  display: none;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.photo-remove { right: 4px; color: var(--ui-danger); }
.photo-pan    { left: 4px; font-size: 13px; }
.photo.has-image .photo-remove,
.photo.has-image .photo-pan { display: block; }
.photo-pan:hover { background: #fff; }
.photo-pan:active,
.photo.repositioning .photo-pan { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }

.photo.repositioning { cursor: grabbing; }
.photo.repositioning img { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.photo img { user-select: none; -webkit-user-drag: none; }
/* Touch-Geräte: Pan-Button schluckt Scroll-Gesten, sonst scrollt die
   Seite statt das Bild zu verschieben. */
.photo-pan { touch-action: none; }
.photo.repositioning { touch-action: none; }

/* ---------- Modal (native <dialog>) ---------- */

.modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(560px, 92vw);
  background: var(--ui-panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal::backdrop {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 18px;
  margin: 0;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-header h2 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
}
.modal-hint {
  margin: 0;
  font-size: 13px;
  color: var(--ui-muted);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--ui-border);
  padding-top: 14px;
}

/* Theme-Grid im Dialog */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.theme-card {
  border: 2px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  background: var(--ui-panel);
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, transform .05s;
}
.theme-card:hover { border-color: var(--ui-muted); }
.theme-card.selected {
  border-color: var(--ui-accent);
  background: var(--accent-soft, #eef5ff);
}
.theme-card-preview {
  height: 40px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--tc-paper, #fff) 55%, var(--tc-accent, #0055a4) 55%);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}
.theme-card-preview::after {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 45%;
  height: 3px;
  background: var(--tc-accent, #0055a4);
  border-radius: 2px;
  opacity: .8;
}
.theme-card-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.theme-card-desc {
  font-size: 11px;
  color: var(--ui-muted);
  line-height: 1.3;
}

/* Hilfe-Dialog */
.help-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}
.help-list dt { font-family: 'Montserrat', sans-serif; font-weight: 600; }
.help-list dd { margin: 0; color: var(--ui-muted); }
kbd {
  display: inline-block;
  padding: 1px 6px;
  background: #f4f4f2;
  border: 1px solid var(--ui-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: 'Inter', monospace;
  font-size: 12px;
}
.tips {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ui-muted);
  line-height: 1.5;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.toast[hidden] { display: none; }

/* ---------- Responsive ---------- */

.hide-sm { display: inline; }
/* show-sm: nur auf kleinen Viewports sichtbar (z.B. Menü-Einträge, die
   eine sonst versteckte Toolbar-Mitte ersetzen). */
.show-sm { display: none; }

/* Menü-Einträge, die als View-Toggle dienen, sollen sich nicht wie
   segmentierte Chips verhalten (kein zentrierter Pill-Style). Sie
   bekommen den normalen Menüeintrag-Look + einen aktiv-Marker. */
.menu .menu-view-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: none;
}
.menu .menu-view-item.active {
  background: var(--accent-soft, #eef5ff);
  color: var(--ui-accent);
  font-weight: 600;
}
.menu .menu-view-item.active::before {
  content: '✓ ';
}

@media (max-width: 1100px) {
  .toolbar-center { display: none; }
  .badge { display: none; }
  /* Wenn die Toolbar-Mitte verschwindet, zeigen wir den Menü-View-
     Switcher als Ersatz an. */
  .show-sm { display: block; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 260px; }

  .sidebar-toggle { display: inline-flex; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close {
    display: inline-flex;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px; height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
  }

  /* Editor-Seite ist 210mm breit (~794px). Auf Smartphones/Tablets passt
     sie nicht in die Viewport-Breite. Statt sie horizontal zu zentrieren
     (was den Anfang der Headlines abschneidet), verankern wir sie links
     und erlauben horizontales Scrollen. So bleiben Titel & Editier-
     Hinweise immer ab Position 0 sichtbar. */
  .workspace {
    padding: calc(var(--toolbar-h) + 16px) 12px 80px 12px;
    gap: 20px;
    align-items: flex-start;
    overflow-x: auto;
  }

  .hide-sm { display: none; }
}

@media (max-width: 520px) {
  .brand { font-size: 14px; }
  .toolbar { padding: 0 8px; gap: 6px; }
  .toolbar button:not(.icon-btn) { padding: 6px 10px; font-size: 13px; }
  /* Touch-Targets: Apple/Google empfehlen ≥40px für Icon-Buttons.
     Im engen Mobile-Toolbar reservieren wir die Mindestgröße auch
     gegen Flex-Shrink für ALLE Toolbar-Buttons. */
  .toolbar button.icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 auto;
  }
  .toolbar button:not(.icon-btn) {
    min-height: 40px;
    flex: 0 0 auto;
  }
}

/* Theme-Modal hat auf schmalen Tablets (≤780px) 4 Spalten und drückt
   längere Theme-Namen wie "Sonnenuntergang" an den rechten Rand. Auf
   Smartphone- und schmalen Tablet-Breiten zwingen wir die Auto-Fit-
   Mindestbreite kleiner, damit die Namen auf 2 Zeilen umbrechen oder
   die Kacheln einspaltiger werden. */
@media (max-width: 780px) {
  .theme-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .theme-card-name { font-size: 12px; line-height: 1.2; }
}

/* Empty-States waren zentriert, aber kleine .empty-state-Boxen wirkten
   einsam in einer großen leeren Seite. Wir lassen sie ihre Mindesthöhe
   füllen, damit die Seite "fertig" wirkt, auch wenn noch keine Inhalte
   vorhanden sind. Greift in jedem Container, der display:flex verwendet. */
.empty-state { min-height: 50mm; }