/* ========== ROOT & BASE ========== */
:root {
  --bg: #EAF6E7;
  --bg-panel: #FFFFFF;
  --ink: #1E3B20;
  --ink-soft: #4B6B4D;
  --teal: #A21CAF;
  --teal-deep: #7E22CE;
  --rose: #D946EF;
  --line: #CFE6CC;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --radius: 8px;

  --heading-weight: 500;
  --heading-transform: none;
  --heading-letter-spacing: normal;

  --radius-portrait: 50%;
  --radius-hund: 50%;
  --radius-hochzeit: 50%;
  --radius-familie: 28px;
  --radius-sport: 28px;
  --rotate-portrait: 0deg;
  --rotate-hund: -2deg;
  --rotate-hochzeit: 2deg;
  --rotate-familie: 0deg;
  --rotate-sport: 0deg;
  --order-portrait: 2;
  --order-hund: 1;
  --order-hochzeit: 2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.15;
  margin: 0;
  color: var(--teal-deep);
  transition: all 0.4s ease;
}

a {
  color: var(--teal);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ========== BARRIEREFREIHEITS-LEISTE ========== */
.a11y-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #1E1E1E;
}

.a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.a11y-btn:hover {
  border-color: #FFFFFF;
}

.a11y-btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: #1E1E1E;
}

html.hoher-kontrast {
  --bg: #FFFFFF !important;
  --bg-panel: #FFFFFF !important;
  --ink: #000000 !important;
  --ink-soft: #000000 !important;
  --teal: #000000 !important;
  --teal-deep: #000000 !important;
  --rose: #000000 !important;
  --line: #000000 !important;
}

html.hoher-kontrast * {
  text-shadow: none !important;
  box-shadow: none !important;
}

html.hoher-kontrast img {
  filter: grayscale(1) contrast(1.3);
}

html.hoher-kontrast a {
  text-decoration: underline !important;
}

html.hoher-kontrast .card,
html.hoher-kontrast .impressum-block {
  border-width: 2px !important;
}

html.grosse-schrift {
  font-size: 120%;
}

html.grosse-schrift body {
  font-size: 20px !important;
}

/* ========== HERO ========== */
.hero {
  padding: 96px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: rise 0.8s ease-out 0.1s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .wrap { animation: none; opacity: 1; }
}

.hero-mark {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  opacity: 0.55;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap-reverse;
}

.hero-text {
  flex: 1 1 320px;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  letter-spacing: -0.01em;
}

.hero .tagline {
  margin-top: 14px;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero .intro {
  margin-top: 28px;
  max-width: 56ch;
  color: var(--ink);
}

.hero .perspektive-adjektive {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--teal-deep);
}

/* ========== BILD-CONTAINER (von der KI gesteuert) ========== */
.img-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid var(--line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: border-radius 0.5s ease, transform 0.5s ease, border-color 0.4s ease;
}

[data-image="portrait"] {
  order: var(--order-portrait);
  flex: 0 0 clamp(150px, 26vw, 240px);
  aspect-ratio: 1 / 1;
}
[data-image="portrait"] img {
  border-radius: var(--radius-portrait);
  transform: rotate(var(--rotate-portrait));
}

.duo-images {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.duo-images figure {
  margin: 0;
  flex: 1 1 150px;
  aspect-ratio: 1 / 1;
}
[data-image="hund"] { order: var(--order-hund); }
[data-image="hochzeit"] { order: var(--order-hochzeit); }
[data-image="hund"] img {
  border-radius: var(--radius-hund);
  transform: rotate(var(--rotate-hund));
}
[data-image="hochzeit"] img {
  border-radius: var(--radius-hochzeit);
  transform: rotate(var(--rotate-hochzeit));
}

.card-image {
  margin: 16px 0 0;
  width: 100%;
  aspect-ratio: 16 / 10;
}
[data-image="familie"] img {
  border-radius: var(--radius-familie);
  transform: rotate(var(--rotate-familie));
}
[data-image="sport"] img {
  border-radius: var(--radius-sport);
  transform: rotate(var(--rotate-sport));
}
[data-image="sport"].card-image {
  aspect-ratio: 3 / 4;
}

/* ========== ACTION BUTTONS ========== */
.action-buttons-container {
  padding: 24px 0 32px;
  text-align: center;
}

.action-buttons {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-buttons button {
  background: var(--teal-deep);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-buttons button:hover {
  background: var(--teal);
  transform: translateY(-2px);
}

.action-buttons button:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.sprach-hinweis {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ========== MODAL ========== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 59, 32, 0.7);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--bg-panel);
  padding: 28px;
  border-radius: var(--radius);
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.modal-content h3 {
  margin-bottom: 20px;
  color: var(--teal-deep);
}

.modal-content .modal-hinweis {
  margin: -8px 0 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.modal-content input {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  box-sizing: border-box;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.modal-buttons button {
  background: var(--rose);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.3s;
}

.modal-buttons button:hover {
  background: var(--teal-deep);
}

/* ========== SECTIONS ========== */
section {
  padding: 52px 0;
  border-top: 1px solid var(--line);
}

section h2 {
  font-size: 1.5rem;
  margin-bottom: 28px;
}

/* ========== TIMELINE ========== */
.timeline {
  position: relative;
  padding-left: 26px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.tl-item {
  position: relative;
  padding-bottom: 26px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal);
}

.tl-year {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--teal);
  display: block;
  margin-bottom: 3px;
}

.tl-text {
  color: var(--ink);
}
.tl-text .muted {
  color: var(--ink-soft);
}

/* ========== CARDS ========== */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.card p {
  margin: 0;
  color: var(--ink);
}
.card p + p {
  margin-top: 10px;
}

/* Haus-Outer: Bezugsrahmen für den nach außen ragenden Reiter */
.haus-outer {
  grid-column: 1 / -1;
  position: relative;
}

/* Haus-Wrap: Computer + Handwerk übereinander, klemmt die Schublade zuverlässig ab */
.haus-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  border-radius: var(--radius);
}

.haus-wrap .card {
  width: 100%;
}

/* Der senkrechte "Reiter" zum Herausziehen – sitzt AUSSERHALB der Karten */
.haus-tab {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--teal-deep);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius);
  padding: 18px 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.18);
  z-index: 11;
  transition: background 0.3s ease;
}

.haus-tab:hover {
  background: var(--teal);
}

/* Die Schublade, die sich beim Klick von rechts über beide Karten legt */
.haus-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rose);
  border-radius: var(--radius);
  padding: 24px 44px 24px 24px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 10;
  overflow-y: auto;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.haus-drawer.offen {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .haus-drawer {
    transition: none;
  }
}

.haus-kamera {
  width: 150px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.haus-werte {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
}

.haus-wert {
  display: flex;
  flex-direction: column;
}

.haus-wert-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.haus-wert-zahl {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--teal-deep);
}

.haus-zeitstempel {
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Schmale Bildschirme: Neben den Karten ist kein Platz für den Reiter, und eine Schublade
   über den Karten würde Text verdecken. Stattdessen: waagerechter Button unter den Karten,
   der den Haus-Bereich darunter aufklappt und den restlichen Inhalt nach unten schiebt.
   Ab 800px ist rechts neben dem Container genug Platz für den senkrechten Reiter. */
@media (max-width: 799px) {
  .haus-outer {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Die Hülle löst sich auf, damit Karten, Button und Haus-Bereich direkt untereinander stehen. */
  .haus-wrap {
    display: contents;
  }

  .haus-wrap .card { order: 1; }

  .haus-tab {
    order: 2;
    position: static;
    transform: none;
    margin: 0;
    width: 100%;
    writing-mode: horizontal-tb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 12px 18px;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .haus-tab::before {
    content: "🏠";
    margin-right: -4px;
  }

  .haus-tab span {
    flex: 1;
  }

  .haus-tab::after {
    content: "▾";
    font-size: 1.1rem;
    transition: transform 0.3s ease;
  }

  .haus-tab[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .haus-drawer {
    order: 3;
    position: static;
    width: auto;
    transform: none;
    transition: none;
    display: none;
    padding: 20px;
    box-shadow: none;
    overflow: visible;
  }

  .haus-drawer.offen {
    display: flex;
    animation: haus-aufklappen 0.35s ease-out;
  }

  .haus-kamera {
    width: 100%;
    height: auto;
    max-height: 240px;
  }
}

@keyframes haus-aufklappen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .haus-drawer.offen { animation: none; }
  .haus-tab::after { transition: none; }
}

/* ========== IMPRESSUM ========== */
.back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 0.95rem;
}

.impressum-block {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 20px;
}

.impressum-block h2 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.impressum-block h3 {
  font-size: 1rem;
  margin: 16px 0 6px;
  color: var(--ink);
}

.impressum-block p {
  margin: 0 0 6px;
}

.impressum-block p + h3 {
  margin-top: 20px;
}

.generator-credit {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ========== BEHIND THE SCENES ========== */
.bts-wrap {
  max-width: 900px;
}

.bts-intro {
  max-width: 68ch;
  color: var(--ink-soft);
}

.bts-personal-hinweis {
  max-width: 68ch;
  background: var(--bg);
  border-left: 3px solid var(--rose);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0 0;
}

.bts-personal-hinweis p {
  margin: 0 0 8px;
  color: var(--ink);
}

.bts-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 28px;
}

.bts-tab {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ink);
}

.bts-tab[aria-selected="true"] {
  background: var(--teal-deep);
  color: #FFFFFF;
  border-color: var(--teal-deep);
}

.bts-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rose);
  border-radius: var(--radius);
  padding: 28px;
}

.bts-content h2 {
  margin-bottom: 12px;
}

.bts-content h3 {
  font-size: 1rem;
  margin: 26px 0 10px;
}

.bts-content p {
  max-width: 72ch;
}

.bts-content code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Rollen-Legende */
.bts-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 28px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.bts-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bts-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bts-dot-browser { background: var(--teal); }
.bts-dot-vercel { background: var(--rose); }
.bts-dot-claude { background: var(--teal-deep); }

/* Flow-Diagramm (HTML/CSS statt SVG) */
.bts-flow-caption {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.bts-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin: 16px 0 20px;
}

.bts-node {
  flex: 1 1 160px;
  min-width: 150px;
  background: var(--bg);
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bts-node-vercel {
  border-color: var(--rose);
}

.bts-node-claude {
  border-color: var(--teal-deep);
}

.bts-node-haus {
  border-color: var(--teal);
  border-style: dashed;
}

.bts-node-role {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.bts-node-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.bts-arrow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 76px;
  max-width: 110px;
  padding: 0 4px;
}

.bts-arrow-glyph {
  font-size: 1.3rem;
  color: var(--teal-deep);
  line-height: 1;
}

.bts-arrow-label {
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .bts-flow {
    flex-direction: column;
  }
  .bts-arrow-step {
    flex-direction: row;
    min-width: 0;
    max-width: none;
    gap: 8px;
    justify-content: flex-start;
    padding: 2px 0;
  }
  .bts-arrow-glyph {
    transform: rotate(90deg);
  }
}

/* Codeschnipsel */
.bts-code-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 14px 0 4px;
}

.bts-code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

.bts-code code {
  background: none;
  padding: 0;
  font-family: 'Space Grotesk', 'IBM Plex Sans', monospace;
  color: var(--ink);
}

/* Für Nachahmer: Schritte + Generator */
.bts-selfbuild {
  margin-top: 32px;
}

.bts-selfbuild h2 {
  margin-bottom: 10px;
}

.bts-selfbuild h3 {
  font-size: 1rem;
  margin: 22px 0 10px;
}

.bts-steps {
  padding-left: 22px;
  max-width: 72ch;
}

.bts-steps li {
  margin-bottom: 10px;
  color: var(--ink);
}

/* Schritt-Karte (Stepper) */
.bts-stepcard {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 640px;
  margin-top: 14px;
}

.bts-step-title {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.bts-step-desc {
  color: var(--ink-soft);
  margin: 0;
}

.bts-step-list {
  padding-left: 20px;
  margin: 0;
}

.bts-step-list li {
  margin-bottom: 14px;
  color: var(--ink);
}

.bts-step-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.bts-step-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bts-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.bts-step-dot.aktiv {
  background: var(--teal-deep);
  color: #FFFFFF;
}

.bts-step-link {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
}

.bts-step-next {
  margin-left: auto;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
}

.bts-step-next:hover {
  opacity: 0.85;
}

/* "Was hilft wem" (Barrierefreiheit) */
.bts-wer-tabelle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 24px;
  max-width: 72ch;
}

.bts-wer-zeile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
}

.bts-wer-funktion {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
}

.bts-wer-desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.bts-generator {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 12px;
}

.bts-gen-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.bts-gen-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--ink);
}

#genTextFields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bts-gen-submit {
  background: var(--teal-deep);
  color: #FFFFFF;
  align-self: flex-start;
}

/* Kopieren-Buttons stehen auf hellen Kästen - die weiße Schrift der a11y-Leiste wäre dort unsichtbar */
.bts-gen-copy,
#pixelZweckKopieren {
  color: var(--ink);
  border-color: var(--line);
}

.bts-gen-copy:hover,
#pixelZweckKopieren:hover {
  border-color: var(--teal);
}

.bts-gen-submit:hover {
  background: var(--teal);
}

#genOutput {
  margin-top: 20px;
  max-width: 700px;
}

#genCopyBtn {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--line);
}

#genCopyBtn:hover {
  border-color: var(--teal);
}

/* ========== FOOTER ========== */
footer {
  padding: 44px 0 60px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

footer .footer-copy {
  margin-top: 20px;
}

footer .footer-kaffee {
  margin-top: 24px;
}

footer a.kaffee-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

footer a.kaffee-btn:hover {
  border-color: var(--teal);
}

footer a {
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

footer a:hover {
  border-bottom-color: var(--teal);
}

/* ========== PIXELWAND ========== */
.pixel-lead {
  max-width: 62ch;
  margin-bottom: 28px;
}

.pixel-hinweis {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 10px !important;
}

.pixel-schritte,
.pixel-regeln {
  margin: 0;
  padding-left: 20px;
}

.pixel-schritte li,
.pixel-regeln li {
  margin-bottom: 8px;
}

.pixel-wand-titel {
  margin: 36px 0 6px;
}

.pixel-status {
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.pixel-wand-rahmen {
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

/* 40 × 25 Blöcke - die Linien kommen aus zwei Farbverläufen statt aus 1.000 einzelnen Elementen */
.pixel-wand {
  position: relative;
  aspect-ratio: 40 / 25;
  background-color: var(--bg-panel, #fff);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 40) calc(100% / 25);
  cursor: crosshair;
  touch-action: manipulation;
}

.pixel-flaeche,
.pixel-auswahl {
  position: absolute;
  box-sizing: border-box;
}

.pixel-flaeche img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pixel-auswahl {
  background: color-mix(in srgb, var(--teal) 35%, transparent);
  outline: 2px solid var(--teal-deep);
  pointer-events: none;
}

.pixel-auswahl.konflikt {
  background: color-mix(in srgb, var(--rose) 45%, transparent);
  outline-color: var(--rose);
}

.pixel-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 10px 0 24px;
}

.pixel-legende > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pixel-legende-feld {
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
}

.pixel-legende-frei { background: var(--bg-panel, #fff); }
.pixel-legende-auswahl { background: var(--teal); }
.pixel-legende-verkauft { background: var(--ink-soft); }

.pixel-eingaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pixel-eingaben label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.pixel-eingaben input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--bg);
  color: var(--ink);
}

.pixel-zusammenfassung {
  font-weight: 600;
}

.pixel-fehler {
  color: var(--rose);
}

.pixel-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.pixel-aktionen .kaffee-btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pixel-aktionen .pixel-paypal {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
}

.pixel-zweck {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pixel-zweck code {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.pixel-unterstuetzer {
  margin: 0;
  padding-left: 20px;
}

/* ========== KI-DESIGN: KACHELN + LIVE-SCHAUFENSTER (Behind the Scenes) ========== */
.bts-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 14px 0 8px;
}

.bts-kachel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.bts-kachel-live {
  border-top-color: var(--rose);
}

.bts-kachel-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.bts-kachel h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--teal-deep);
  margin: 0;
}

.bts-kachel p {
  margin: 0;
  font-size: 0.92rem;
}

.bts-kachel-btn {
  align-self: flex-start;
  margin-top: auto;
  background: var(--teal-deep);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.bts-kachel-btn:hover {
  background: var(--teal);
}

.bts-kachel-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.bts-kachel-hinweis {
  font-size: 0.82rem !important;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* Das Schaufenster */
.bts-live {
  margin: 18px 0 8px;
  border: 2px solid var(--rose);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg-panel);
  scroll-margin-top: 16px;
}

.bts-live [hidden] {
  display: none !important;
}

/* Die Schritte sind <section>s - ohne den großen Abstand und die Linie normaler Seitenabschnitte */
.bts-live-pane {
  padding: 0;
  border-top: none;
}

.bts-live h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--teal-deep);
  margin: 0 0 8px;
}

.bts-live h4:focus {
  outline: none;
}

.bts-live-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.bts-live-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: schritt;
}

.bts-live-schritte li {
  counter-increment: schritt;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.bts-live-schritte li::before {
  content: counter(schritt) " · ";
}

.bts-live-schritte li.erledigt {
  color: var(--ink);
}

.bts-live-schritte li.erledigt::before {
  content: "✓ ";
}

.bts-live-schritte li.aktiv {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #FFFFFF;
}

.bts-live-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.bts-live-nav .bts-step-next {
  margin-left: 0;
}

.bts-step-next:disabled,
.bts-live-btn-zweit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bts-live-btn-zweit {
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
}

.bts-live-btn-zweit:hover:not(:disabled) {
  border-color: var(--teal);
}

.bts-live-klein {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.bts-live-fehler {
  color: var(--ink);
  font-weight: 600;
  min-height: 0;
}

.bts-live-status {
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.bts-live-details {
  margin-top: 12px;
}

.bts-live-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.bts-live-details .bts-code {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Schritt 1: Farbkreis */
.bts-farbwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: 16px 0 6px;
}

.bts-farbkreis {
  position: relative;
  width: 168px;
  height: 168px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: crosshair;
  background: conic-gradient(
    hsl(0 72% 50%), hsl(30 72% 50%), hsl(60 72% 50%), hsl(90 72% 50%), hsl(120 72% 50%),
    hsl(150 72% 50%), hsl(180 72% 50%), hsl(210 72% 50%), hsl(240 72% 50%), hsl(270 72% 50%),
    hsl(300 72% 50%), hsl(330 72% 50%), hsl(360 72% 50%)
  );
}

.bts-farbkreis-mitte {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  border: 4px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--line);
}

.bts-farbkreis-marke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform 0.15s ease;
}

.bts-farbkreis-marke span {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.bts-farbwahl-regler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 220px;
}

.bts-farbwahl-regler .bts-live-btn-zweit {
  align-self: flex-start;
}

.bts-farbton-regler {
  width: 100%;
  accent-color: var(--teal-deep);
}

.bts-farbton-regler::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, hsl(0 72% 50%), hsl(60 72% 50%), hsl(120 72% 50%), hsl(180 72% 50%), hsl(240 72% 50%), hsl(300 72% 50%), hsl(360 72% 50%));
}

.bts-farbton-regler::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, hsl(0 72% 50%), hsl(60 72% 50%), hsl(120 72% 50%), hsl(180 72% 50%), hsl(240 72% 50%), hsl(300 72% 50%), hsl(360 72% 50%));
}

.bts-farbton-regler::-webkit-slider-thumb {
  margin-top: -5px;
}

/* Schritt 2: Zutaten */
.bts-zutaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.bts-zutat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 0.9rem;
}

.bts-zutat p {
  margin: 4px 0;
}

.bts-zutat-titel {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
}

.bts-zutat-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.bts-zutat-liste {
  margin: 4px 0 0;
  padding-left: 18px;
}

.bts-zutat-liste li {
  margin-bottom: 4px;
}

.bts-musterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.bts-muster {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px);
}

.bts-muster-gross {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

/* Schritt 3: Küche = Notizen + Vorschau */
.bts-kueche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
  align-items: start;
}

@media (max-width: 760px) {
  .bts-kueche {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bts-kueche-notizen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
}

.bts-notiz,
.bts-notiz-farbe {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.bts-notiz p,
.bts-notiz-farbe p {
  margin: 2px 0;
}

.bts-notiz-label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
}

.bts-notiz-farben {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bts-notiz-farbe {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.bts-notiz-farbe .bts-muster {
  margin-top: 2px;
}

.bts-notiz-hex {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.bts-notiz-warum,
.bts-notiz-wert {
  color: var(--ink-soft);
}

.bts-wartet {
  opacity: 0.45;
}

.bts-schreibt {
  border-color: var(--teal);
}

.bts-schreibt .bts-notiz-warum::after {
  content: "▍";
  margin-left: 2px;
  color: var(--teal);
  animation: bts-cursor 0.8s steps(1) infinite;
}

@keyframes bts-cursor {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bts-schreibt .bts-notiz-warum::after {
    animation: none;
  }
  .bts-farbkreis-marke,
  .bts-v-seite,
  .bts-v-seite * {
    transition: none !important;
  }
}

.bts-kompakt .bts-notiz-farbe {
  padding: 6px 10px;
}

.bts-live-mini {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--rose);
  border-radius: var(--radius);
}

.bts-roh code {
  font-size: 0.78rem;
}

/* Die Vorschau: eigene Variablen, damit nur sie sich ändert und nicht die ganze Seite */
.bts-vorschau {
  --v-bg: var(--bg);
  --v-bg-panel: var(--bg-panel);
  --v-ink: var(--ink);
  --v-ink-soft: var(--ink-soft);
  --v-teal: var(--teal);
  --v-teal-deep: var(--teal-deep);
  --v-rose: var(--rose);
  --v-line: var(--line);
  --v-font-heading: var(--font-heading);
  --v-font-body: var(--font-body);
  --v-radius: var(--radius);
  --v-hw: var(--heading-weight);
  --v-ht: var(--heading-transform);
  --v-hls: var(--heading-letter-spacing);
}

.bts-v-seite {
  background: var(--v-bg);
  color: var(--v-ink);
  font-family: var(--v-font-body);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  transition: background 0.5s ease, color 0.5s ease;
}

.bts-v-seite * {
  transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease, border-radius 0.5s ease, transform 0.5s ease;
}

.bts-v-kopf {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bts-v-kopftext {
  flex: 1;
  min-width: 0;
}

.bts-v-el {
  margin-top: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  outline: 2px dashed transparent;
  outline-offset: 2px;
}

.bts-v-el.markiert,
.bts-v-seite.markiert {
  outline: 2px dashed var(--v-ink);
}

.bts-v-h {
  font-family: var(--v-font-heading);
  color: var(--v-teal-deep);
  font-weight: var(--v-hw);
  text-transform: var(--v-ht);
  letter-spacing: var(--v-hls);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.bts-v-text {
  color: var(--v-ink);
  font-size: 0.9rem;
  margin: 2px 0;
}

.bts-v-neben {
  color: var(--v-ink-soft);
  font-size: 0.8rem;
  margin: 0;
}

.bts-v-link {
  color: var(--v-teal);
  text-decoration: underline;
  font-size: 0.9rem;
}

.bts-v-karte {
  background: var(--v-bg-panel);
  border: 1px solid var(--v-line);
  border-left: 4px solid var(--v-rose);
  border-radius: var(--v-radius);
  padding: 8px 12px;
  margin-top: 12px;
}

.bts-v-kartentitel {
  font-family: var(--v-font-heading);
  color: var(--v-teal-deep);
  font-weight: var(--v-hw);
  text-transform: var(--v-ht);
  letter-spacing: var(--v-hls);
  margin: 0;
}

.bts-v-btn {
  display: inline-block;
  background: var(--v-teal-deep);
  color: #FFFFFF;
  border-radius: var(--v-radius);
  padding: 6px 14px;
  font-size: 0.85rem;
  margin: 2px 4px 2px 0;
}

.bts-v-btn2 {
  background: var(--v-rose);
}

.bts-v-schriftprobe {
  margin: 0;
  font-size: 0.9rem;
}

.bts-v-schriftprobe .bts-v-h {
  display: inline;
  font-size: 1.2rem;
  margin-right: 6px;
}

.bts-v-bilder {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px;
}

.bts-v-bild {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

.bts-v-portrait {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

/* Die ✎-Knöpfe: bewusst neutral gefärbt, damit sie auf jeder Vorschau-Farbe lesbar bleiben */
.bts-v-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 4px;
}

.bts-v-pill {
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  background: #FFFFFF;
  color: #1E1E1E;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

.bts-v-pill:hover:not(:disabled) {
  border-color: #1E1E1E;
}

.bts-v-pill[aria-pressed="true"] {
  background: #1E1E1E;
  color: #FFFFFF;
  border-color: #1E1E1E;
}

.bts-v-pill[aria-pressed="true"]::after {
  content: " ✓";
}

.bts-v-pill:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Schritt 4: Prüfliste */
.bts-pruefliste {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.bts-pruefliste li {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg);
}

.bts-pruef-icon {
  font-weight: 700;
  color: var(--teal-deep);
}

.bts-pruefliste li.nicht-ok {
  border-left: 3px solid var(--rose);
}

.bts-pruefliste li.nicht-ok .bts-pruef-icon {
  color: var(--rose);
}

.bts-pruef-detail {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Schritt 6 */
.bts-live-idee {
  margin: 8px 0;
  padding: 10px 16px;
  border-left: 4px solid var(--teal);
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

@media (max-width: 480px) {
  .bts-live {
    padding: 14px;
  }
  .bts-v-kopf {
    flex-direction: column;
    gap: 6px;
  }
  .bts-v-kopftext .bts-v-h {
    font-size: 1.15rem;
  }
  .bts-farbkreis {
    width: 140px;
    height: 140px;
  }
  .bts-farbkreis-mitte {
    inset: 28px;
  }
}

/* ==========================================================================
   MITSCROLLENDE NAVIGATION (stickynav.js, Daten in navigation.js)
   Alle Farben über die Design-Variablen, damit die Leiste zu jedem KI-Design passt.
   ========================================================================== */
html {
  scroll-padding-top: 72px;
  /* Beim Sperren des Scrollens springt das Layout nicht, weil der Platz der Scrollleiste bleibt. */
  scrollbar-gutter: stable;
}

html.snav-gesperrt {
  overflow: hidden;
}

.snav-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

.snav-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1100;
  padding: 10px 16px;
  background: var(--teal-deep);
  color: #FFFFFF; /* wie alle Akzent-Buttons der Seite: Weiß auf --teal-deep */
  border-radius: var(--radius);
  font-weight: 600;
}

.snav-skip:focus {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

/* Unter dem Overlay der KI-Perspektive (z-index 2000), über allem anderen. */
.snav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: calc(64px + env(safe-area-inset-top, 0px));
}

.snav-band {
  position: relative;
  z-index: 2;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg-panel);
  border-bottom: 2px solid var(--teal);
  transition: box-shadow 0.2s ease;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .snav-band {
    background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.snav--klein .snav-band {
  box-shadow: 0 6px 14px -10px var(--ink);
}

.snav-leiste {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: min-height 0.2s ease;
}

.snav--klein .snav-leiste {
  min-height: 48px;
}

.snav-innen {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  min-height: inherit;
  margin: 0 auto;
  padding: 0 28px;
}

.snav-emblem {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  transition: width 0.2s ease, height 0.2s ease;
}

.snav--klein .snav-emblem {
  width: 24px;
  height: 24px;
}

.snav-ball,
.snav-emblem-bild {
  width: 100%;
  height: 100%;
}

.snav-emblem-bild {
  border-radius: 50%;
  object-fit: cover;
}

.snav-titel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.05rem;
  color: var(--ink);
}

.snav-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  background: var(--teal-deep);
  color: #FFFFFF; /* wie alle Akzent-Buttons der Seite: Weiß auf --teal-deep */
  font-size: 0.9rem;
  font-weight: 600;
}

.snav-pfeil {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.snav--offen .snav-pfeil {
  transform: rotate(180deg);
}

.snav-leiste:hover .snav-chip {
  background: var(--teal);
}

/* Einmal pro Sitzung: ein sanfter Ring um den Chip, genau zweimal. */
.snav-chip--puls::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--teal);
  animation: snav-puls 1.4s ease-out 2;
  pointer-events: none;
}

@keyframes snav-puls {
  from { box-shadow: 0 0 0 0 var(--teal); opacity: 0.9; }
  to { box-shadow: 0 0 0 12px var(--teal); opacity: 0; }
}

/* Schleier hinter dem Menü */
.snav-schleier {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.snav--offen .snav-schleier {
  opacity: 0.4;
  visibility: visible;
  transition: opacity 0.2s ease;
}

/* Das Menü */
.snav-menue {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  width: min(720px, calc(100% - 24px));
  max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 22px;
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 36px -18px var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.snav--offen .snav-menue {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.snav-menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.snav-menue-titel,
.snav-bereich-titel {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
}

.snav-schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.snav-schliessen:hover {
  background: var(--bg);
}

.snav-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .snav-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.snav-kachel {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.snav-kachel:hover {
  border-color: var(--teal);
}

.snav-kachel[aria-current="page"] {
  border: 2px solid var(--teal);
  padding: 9px 11px;
}

.snav-kachel-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--teal-deep);
}

.snav-kachel-bild {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
}

.snav-kachel-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.snav-kachel-name {
  font-weight: 600;
  line-height: 1.25;
  /* Lange Wörter wie "Wimmelbilder" neben einem Mini-Bild dürfen umbrechen statt überzulaufen. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.snav-kachel-hinweis {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* "Seite verwandeln": die verschobenen KI-Buttons der Startseite */
.snav-familie { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.snav-familie .snav-bereich-titel { margin-bottom: 10px; }
.snav-familie-link { width: 100%; text-align: left; cursor: pointer; font: inherit; }

.snav-verwandeln {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.snav-verwandeln .action-buttons {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.snav-verwandeln .action-buttons button {
  background: var(--teal-deep);
  color: #FFFFFF; /* wie alle Akzent-Buttons der Seite: Weiß auf --teal-deep */
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.snav-verwandeln .action-buttons button:hover {
  background: var(--teal);
}

.snav-verwandeln .action-buttons button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.snav-verwandeln .sprach-hinweis {
  margin-top: 8px;
}

.snav-spende {
  margin-top: 16px;
}

.snav-spende .kaffee-btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* Barrierefreiheit: Zweitknöpfe der Schalter oben auf der Seite */
.snav-hilfen {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.snav-hilfen-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.snav-hilfe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}

.snav-hilfe:hover {
  border-color: var(--teal);
}

/* Eingeschaltet: Akzentrahmen und Häkchen */
.snav-hilfe[aria-pressed="true"] {
  border: 2px solid var(--teal);
  padding: 7px 13px;
  font-weight: 600;
}

.snav-hilfe[aria-pressed="true"]::after {
  content: "✓";
  color: var(--teal-deep);
}

/* Sichtbare Fokusrahmen */
.snav-leiste:focus-visible,
.snav-kachel:focus-visible,
.snav-schliessen:focus-visible,
.snav-menue button:focus-visible,
.snav-hilfe:focus-visible,
.snav-menue a:focus-visible,
.snav-skip:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.snav-leiste:focus-visible {
  outline-offset: -4px;
}

/* Ohne JavaScript: schlichte Linkliste */
.snav-noscript {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 28px;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .snav-band,
  .snav-leiste,
  .snav-emblem,
  .snav-pfeil,
  .snav-schleier,
  .snav-menue,
  .snav-kachel {
    transition: none !important;
  }
  .snav-chip--puls::after {
    animation: none;
  }
}

/* ==========================================================================
   WIMMELBILDER (wimmelbilder.html) - alle Farben über die Design-Variablen
   ========================================================================== */
.wb-buch-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
  margin: 16px 0 18px;
}

.wb-cover {
  flex: 0 0 auto;
  width: min(220px, 100%);
  margin: 0;
}

.wb-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px -12px var(--ink);
}

.wb-buch-text {
  flex: 1 1 260px;
  min-width: 0;
}

.wb-titel {
  font-size: 1.35rem;
  margin: 0 0 4px;
}

.wb-untertitel {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.wb-amazon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--teal-deep);
  color: #FFFFFF; /* wie alle Akzent-Buttons der Seite: Weiß auf --teal-deep */
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.wb-amazon:hover {
  background: var(--teal);
}

.wb-taschengeld {
  margin: 8px 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
}

.wb-amazon:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.wb-merkmale {
  margin: 14px 0;
  padding-left: 1.2em;
}

.wb-merkmale li + li {
  margin-top: 4px;
}

.wb-daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.wb-daten dt {
  color: var(--ink-soft);
}

.wb-daten dd {
  margin: 0;
}

/* Platzhalter für ein Buch, das noch nicht erhältlich ist (Ausmalbuch) */
.wb-cover-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 629 / 900;
  border: 2px dashed var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-soft);
}

.wb-platzhalter-icon {
  font-size: 2.4rem;
  line-height: 1;
}

.wb-platzhalter-text {
  font-size: 0.9rem;
}

.wb-bald-marke {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal-deep);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ==========================================================================
   DATENSCHUTZ (datenschutz.html)
   ========================================================================== */
.ds-stand {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: -12px 0 24px;
}

.ds-hinweis {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.impressum-block ul {
  margin: 8px 0;
  padding-left: 1.2em;
}

/* Abstand zwischen Seitenüberschrift und erstem Kasten (Wimmelbilder, Datenschutz, Impressum) */
#inhalt h1 + .impressum-block,
#inhalt h1 + .ds-stand {
  margin-top: 20px;
}

/* ==========================================================================
   BLOG (blog.html) - alle Farben über die Design-Variablen
   ========================================================================== */
.blog-intro {
  margin: 0 0 20px;
  color: var(--ink-soft);
}

.blog-datum {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.blog-kopf {
  position: relative;
  display: block;
  padding-right: 32px;
  cursor: pointer;
  list-style: none;
}

.blog-kopf::-webkit-details-marker {
  display: none;
}

/* Pfeil rechts: zeigt nach unten, geöffnet nach oben */
.blog-kopf::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.blog-details[open] > .blog-kopf::after {
  top: 14px;
  transform: rotate(-135deg);
}

.blog-kopf:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
  border-radius: 4px;
}

.blog-kopf:hover .blog-titel {
  text-decoration: underline;
}

.blog-titel {
  font-size: 1.35rem;
  margin: 0;
}

.blog-inhalt {
  margin-top: 14px;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.blog-tag {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .blog-kopf::after {
    transition: none;
  }
}

.blog-eintrag p + p {
  margin-top: 10px;
}

.blog-bild {
  width: min(360px, 100%);
  margin: 16px 0 0;
}

.blog-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.blog-bild--original img {
  aspect-ratio: auto;
  height: auto;
}

.blog-bild figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

#inhalt h1 + .blog-intro + #blog-liste > .blog-eintrag:first-child {
  margin-top: 0;
}

/* ========== FAMILIE (Auswahl, Ansichten, Hafen) ========== */
/* Farben kommen aus den Design-Variablen, damit der KI-Design-Wechsel weiter greift. */
body.familie-offen { overflow: hidden; }
.hf-weg { display: none !important; }

.familie-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--line);
  font-size: 0.95rem; color: var(--ink-soft);
}
.familie-leiste p { margin: 0; }
.familie-leiste strong { color: var(--teal-deep); }
.familie-hinweis { flex-basis: 100%; color: var(--ink); background: var(--bg); padding: 8px 12px; border-radius: var(--radius); }
.familie-leiste [hidden] { display: none; }

.familie-knopf {
  background: var(--bg-panel); color: var(--teal-deep); border: 1px solid var(--teal-deep);
  padding: 9px 16px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: 0.95rem;
}
.familie-knopf:hover, .familie-anders:hover { background: var(--teal-deep); color: #fff; }
.familie-knopf-haupt { background: var(--rose); color: #fff; border-color: var(--rose); }
.familie-anders {
  background: transparent; color: var(--teal-deep); border: 1px solid var(--teal-deep);
  padding: 5px 12px; border-radius: var(--radius); cursor: pointer; font-family: var(--font-body);
}
.familie-knopf:focus-visible, .familie-anders:focus-visible, .familie-kacheln button:focus-visible,
.hafen-weiter:focus-visible, #familieWoherFeld:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Während man eine andere Ansicht sieht, gibt es nichts umzuschreiben. */
body[data-ansicht]:not([data-ansicht="schwesi"]) #personalizeBtn,
body[data-ansicht]:not([data-ansicht="schwesi"]) .sprach-hinweis { display: none; }

.familie-ansicht { padding: 40px 0 64px; }
.familie-ansicht[hidden], #ansichtSchwesi[hidden] { display: none; }
.familie-ansicht h1 { margin-bottom: 24px; }
.familie-block { padding: 24px 0; border-top: 1px solid var(--line); }
.familie-block h2 { font-size: 1.3rem; margin-bottom: 12px; }
.familie-personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.familie-person { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.familie-person h3 { margin-bottom: 8px; }
.familie-person p { margin: 0 0 12px; color: var(--ink-soft); }

.familie-rolle { color: var(--ink-soft); margin: 0 0 8px; }
.familie-tagline { font-size: 1.15rem; margin: 0 0 16px; }
.familie-liste { margin: 0; padding-left: 1.2em; }
.familie-liste li { margin-bottom: 8px; }
.familie-bild { margin: 0 0 16px; }
.familie-bild img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); }
.familie-galerie { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.familie-galerie .familie-bild { margin: 0; }
.familie-galerie .familie-bild img { max-width: 100%; }
.kino { background: #111; border-radius: var(--radius); padding: 12px; max-width: 760px; color: #eee; }
.kino:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
.kino-leinwand { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--radius) / 2); background: #000; }
.kino-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transition: opacity 1s ease; transform: scale(1);
}
.kino-aktiv { opacity: 1; animation: kino-zoom 9s ease-out forwards; }
@keyframes kino-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.kino-text { margin: 10px 2px 4px; font-size: 0.9rem; min-height: 2.8em; color: #ddd; }
.kino-steuerung { display: flex; align-items: center; gap: 8px; }
.kino-knopf {
  min-width: 44px; min-height: 44px; border: 1px solid #666; border-radius: var(--radius);
  background: #222; color: #fff; font-size: 1rem; cursor: pointer;
}
.kino-knopf:hover { background: #333; }
.kino-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kino-zaehler { margin-left: auto; font-size: 0.9rem; color: #bbb; }
@media (prefers-reduced-motion: reduce) {
  .kino-bild { transition: none; }
  .kino-aktiv { animation: none; }
}
.baustelle-person { color: var(--ink-soft); margin: 0 0 4px; }
.baustelle-bild { margin: 8px 0 20px; }

/* Auswahl-Overlay */
.familie-overlay {
  position: fixed; inset: 0; z-index: 2500; background: var(--bg);
  display: flex; flex-direction: column; overflow-y: auto;
}
.familie-overlay[hidden] { display: none; }
.familie-panel {
  flex: 1; width: min(640px, 100%); margin: 0 auto; padding: 24px 16px 40px; text-align: center;
}
.familie-panel h2 { margin-bottom: 8px; }
.familie-hinweistext { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 16px; }
.familie-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.familie-kachel-breit { grid-column: 1 / -1; }
.familie-kacheln button {
  width: 100%; min-height: 56px; padding: 12px; cursor: pointer; font-family: var(--font-body); font-size: 1.1rem;
  background: var(--bg-panel); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius);
}
.familie-kacheln button span { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.familie-kacheln button:hover { border-color: var(--teal-deep); }
#familieWoherFeld {
  width: 100%; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 16px; resize: vertical;
}
.familie-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Hafenleiste: baut die Seite auf und klebt dabei oben im Bild; danach ist sie weg */
.hf-buehne {
  position: sticky; top: var(--hf-oben, 0px); z-index: 40; overflow: visible;
  /* halb durchsichtig: Die Seite darunter bleibt zu sehen */
  background: linear-gradient(rgba(191, 227, 245, .5) 0 53.9%, rgba(74, 144, 184, .5) 53.9% 76.5%, rgba(154, 165, 161, .5) 76.5% 100%);
  border-bottom: 3px solid #6f7a76;
}
.hf-skala { position: absolute; left: 50%; top: 0; width: 800px; height: 230px; transform-origin: 0 0; opacity: .5; }
.hf-skala > * { position: absolute; left: 0; top: 0; }
.hf-sonne { left: 60px; top: 24px; width: 54px; height: 54px; border-radius: 50%; background: #ffd166; }
.hf-boden { left: -400px; top: 176px; width: 1600px; height: 54px; background: #9aa5a1; }
.hf-c, .hf-huelle, .hf-zelle-voll {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 9px),
    var(--farbe, #e4572e);
  border: 1px solid rgba(0, 0, 0, .35); border-radius: 3px;
}
.hf-c { width: 72px; height: 32px; }
.hf-wagen { width: 22px; height: 12px; background: #5d6d7e; border-radius: 2px; }
.hf-seil { width: 2px; background: #2b2118; }
.hf-seil::after { content: ""; position: absolute; left: -8px; bottom: -2px; width: 18px; height: 4px; background: #2b2118; }
.hf-ueber { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.hf-huelle { position: absolute; }
.hf-text {
  position: absolute; left: 8px; bottom: 6px; margin: 0; max-width: calc(100% - 140px);
  font-size: 0.85rem; background: rgba(255, 255, 255, .85); color: #1E3B20; padding: 3px 8px; border-radius: 6px; z-index: 6;
}
.hf-weiter {
  position: absolute; right: 8px; bottom: 6px; z-index: 6; font-family: var(--font-body); font-size: 0.85rem;
  background: rgba(255, 255, 255, .9); color: #1E3B20; border: 1px solid #6f7a76; border-radius: 6px; padding: 3px 10px; cursor: pointer;
}
.hf-weiter:focus-visible { outline: 3px solid #1E3B20; outline-offset: 2px; }

/* Baustelle: eine Wand aus Containern, die zubleiben */
.baustelle-bild { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; justify-content: center; align-items: end; margin: 16px 0 24px; }
.hf-zelle { width: 72px; height: 32px; border: 1px dashed var(--line); border-radius: 3px; }
.hf-zelle-voll { border-style: solid; }
.baustelle-schild {
  grid-column: 1 / -1; justify-self: center; margin-top: 10px; width: 54px; height: 48px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ffd23f; color: #2b2118;
  display: flex; align-items: flex-end; justify-content: center; font-weight: 700; font-size: 1.4rem; padding-bottom: 2px;
}


/* ======================
   EINFACHE SPRACHE: Zusammenfassungen (Impressum, Datenschutz) nur im Modus "Einfache Sprache"
   ====================== */
.ls-nur { display: none; }
html.leichte-sprache .ls-nur { display: block; }
html.leichte-sprache .ls-nur ul { padding-left: 1.2em; }
html.leichte-sprache .ls-nur li { margin: 0.5em 0; line-height: 1.7; }


/* ==========================================================================
   GAMIFICATION (gamification.html, gamification-webseite.html) - nur Design-Variablen
   ========================================================================== */
.gm-bausteine { margin: 8px 0 12px; padding-left: 1.3em; }
.gm-bausteine li + li { margin-top: 8px; }
.gm-ueberschrift { margin: 32px 0 14px; }
.gm-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gm-karte {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  background: var(--bg-panel); border: 1px solid var(--line); border-left: 3px solid var(--teal-deep);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gm-karte:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--ink); }
.gm-karte:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.gm-karte-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--radius); background: var(--teal-deep);
  color: #FFFFFF; font-family: monospace; font-weight: 700; font-size: 1rem;
}
.gm-karte-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm-karte-titel { font-family: var(--font-heading); font-size: 1.2rem; }
.gm-karte-meta { font-size: 0.85rem; color: var(--ink-soft); }
.gm-karte-beschr { margin-top: 4px; }
.gm-karte-los { margin-top: 8px; font-weight: 600; color: var(--teal-deep); }
.gm-hinweis { margin-top: 14px; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.gm-schritt { margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.gm-technik { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg); border-radius: var(--radius); font-size: 0.9rem; color: var(--ink-soft); }
.gm-datei code, .gm-bausteine code { font-family: monospace; font-size: 0.92em; }
.gm-datei h3 { margin-top: 18px; }