/* ==========================================================================
   daveonduty – persönliches Portfolio
   Design-System: dunkler Grund, Neon-Gelb + Cyan, verspielt-technischer Look
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-variable.woff2') format('woff2-variations'),
       url('../fonts/space-grotesk-variable.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-variable.woff2') format('woff2-variations'),
       url('../fonts/ibm-plex-sans-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-variable.woff2') format('woff2-variations'),
       url('../fonts/caveat-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #08080d;
  --panel: #131319;
  --panel-raised: #1a1a22;
  --paper: #f4f4f2;
  --muted: #a7a7b8;
  --yellow: #f5e000;
  --yellow-dim: #c7b700;
  --cyan: #33e6e0;
  --line: #2a2a35;

  --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  --max-width: 1160px;
  --cut: 14px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
/* Klassen mit eigenem display (z.B. .btn mit inline-flex) schlagen sonst die Browser-Regel
   für das hidden-Attribut - ein Element mit hidden wäre dann trotzdem sichtbar. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(rgba(245,224,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,224,0,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Schwebende Gästebuch-Kommentare (nur Startseite, nur wenn welche vorhanden sind) ---------- */
.floating-comments {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.floating-comment {
  position: absolute;
  left: 0;
  font-family: var(--font-hand);
  white-space: nowrap;
  line-height: 1.2;
  animation-name: float-across;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes float-across {
  from { transform: translateX(-35vw); }
  to { transform: translateX(135vw); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-comment { animation: none; transform: translateX(50vw); }
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 3.8rem); }
h1.h1-tight { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 1000;
  font-family: var(--font-mono);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  /* Bewusst breiter als var(--max-width) (1160px), das der Rest der Seite verwendet - die
     Hauptnav allein braucht mit 8 Punkten + Logo + Social-Icons rund 1270px, würde also bei
     1160px auf jeder Bildschirmbreite umbrechen. Der Umbruchpunkt fürs Hamburger-Menü unten
     ist entsprechend angepasst. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
}
.logo span { color: var(--yellow); }
.logo .cursor {
  display: inline-block;
  width: 9px; height: 1.05em;
  background: var(--cyan);
  margin-left: 3px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.main-nav { margin-left: auto; }
/* flex-wrap, damit bei knappem Platz ganze Punkte in eine zweite Zeile umbrechen statt dass
   ein einzelner Link (z.B. "Über mich") mitten im Wort zusammengequetscht wird. */
.main-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; gap: 30px; }
.main-nav li { flex-shrink: 0; }
.main-nav a {
  font-family: var(--font-mono);
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.main-nav a::before { content: '/'; color: var(--cyan); margin-right: 5px; opacity: 0.7; }
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--paper);
  border-color: var(--yellow);
}
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.65rem;
  background: rgba(245,224,0,0.15);
  color: var(--yellow);
  border: 1px solid rgba(245,224,0,0.4);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.social-links { display: flex; gap: 16px; align-items: center; }
.social-links a {
  display: flex;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s, filter 0.2s;
}
.social-links a:hover {
  color: var(--yellow);
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(245,224,0,0.6));
}
.social-links svg { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  padding: 6px;
  margin-left: 4px;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 24px 0;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); }
.footer-links a { text-decoration: none; color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--yellow); }
.footer-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  background: var(--yellow);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
  background: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(51,230,224,0.45);
}
.btn-outline {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--muted);
  padding: 13px 28px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn-outline:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------- Hero ---------- */
.hero { padding: 70px 0 80px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  display: block;
}
.hero-eyebrow::before { content: '// '; }
.hero h1 {
  text-shadow: 0 0 30px rgba(245,224,0,0.25);
}
.hero h1 .accent { color: var(--yellow); }
.hero-handle {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 1rem;
  margin: -10px 0 22px;
}
.hero-lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 46ch;
}
.hero-actions { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-photo {
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--panel);
  position: relative;
  border: 1px solid var(--line);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(51,230,224,0.16), transparent 40%, rgba(245,224,0,0.14));
  pointer-events: none;
}

/* ---------- Photo stack (scattered, not static rectangles) ---------- */
.photo-stack {
  position: relative;
  padding: 10px 34px 34px 10px;
}
.photo-stack .stack-main {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  transform: rotate(-2.5deg);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.55);
}
.photo-stack .stack-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-stack .stack-main::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(51,230,224,0.16), transparent 40%, rgba(245,224,0,0.14));
}
.photo-stack .stack-accent {
  position: absolute;
  z-index: 1;
  width: 52%;
  aspect-ratio: 1 / 1;
  bottom: 0;
  right: 0;
  overflow: hidden;
  transform: rotate(6deg);
  border: 2px solid var(--yellow);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.5);
}
.photo-stack .stack-accent img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-stack.is-interactive { cursor: pointer; }
.photo-stack .stack-main img,
.photo-stack .stack-accent img {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.photo-stack.is-swapping .stack-main img,
.photo-stack.is-swapping .stack-accent img {
  opacity: 0;
  transform: scale(1.06);
}
.photo-stack.is-interactive:hover .stack-main,
.photo-stack.is-interactive:hover .stack-accent {
  filter: brightness(1.06);
}
.photo-stack .stack-hint {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 3;
  background: rgba(8,8,13,0.75);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 4px 9px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.photo-stack.is-interactive:hover .stack-hint,
.photo-stack.is-interactive:focus-visible .stack-hint {
  opacity: 1;
}
.photo-stack .stack-tag {
  position: absolute;
  top: -6px;
  left: 20px;
  z-index: 3;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  transform: rotate(-2.5deg);
}

/* ---------- Fact card photo accent ---------- */
.fact-card { position: relative; overflow: visible; }
.fact-card.has-photo { padding-top: 20px; }
.fact-photo {
  width: 74px;
  height: 74px;
  position: absolute;
  top: -16px;
  right: 18px;
  overflow: hidden;
  transform: rotate(7deg);
  border: 2px solid var(--cyan);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.fact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Photo cluster (several photos, layered with a background) ---------- */
.photo-cluster {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 6% 6% 6%;
}
.cluster-bg {
  position: absolute;
  width: 33%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: 0.48;
  filter: saturate(0.6) brightness(0.85);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  z-index: 1;
}
.cluster-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cluster-bg-1 { top: -8%; left: -10%; transform: rotate(-10deg); }
.cluster-bg-2 { bottom: -8%; right: -10%; transform: rotate(9deg); }
.cluster-bg-3 { top: -8%; right: -10%; transform: rotate(7deg); }
.cluster-bg-4 { bottom: -8%; left: -10%; transform: rotate(-6deg); }
.cluster-main {
  position: absolute;
  inset: 9% 11%;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--line);
  transform: rotate(-2deg);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.55);
  cursor: pointer;
}
.cluster-main::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(51,230,224,0.16), transparent 40%, rgba(245,224,0,0.14));
  pointer-events: none;
}
.cluster-main img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cluster-main.is-swapping img { opacity: 0; transform: scale(1.06); }
.cluster-counter {
  position: absolute;
  bottom: 6px;
  left: 6px;
  z-index: 3;
  background: rgba(8,8,13,0.75);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 9px;
  letter-spacing: 0.03em;
}
.cluster-counter .dim { color: var(--muted); }
.cluster-main .stack-hint {
  position: absolute;
  bottom: 6px; right: 6px;
  z-index: 3;
  background: rgba(8,8,13,0.75);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 4px 9px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.cluster-main:hover .stack-hint,
.cluster-main:focus-visible .stack-hint { opacity: 1; }
.photo-cluster .stack-tag {
  position: absolute;
  top: 2%;
  left: 14%;
  z-index: 3;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  transform: rotate(-2.5deg);
}

.prose-figure {
  position: relative;
  max-width: 480px;
  margin: 32px auto;
  overflow: hidden;
  border: 1px solid var(--line);
}
.prose-figure img { width: 100%; display: block; }
.prose-figure figcaption {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 10px 2px 0;
}
.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0;
}
.map-pin-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--yellow);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 12px rgba(245,224,0,0.7);
}
.map-pin-dot::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px solid var(--yellow);
  animation: pulse-ring 2.2s ease-out infinite;
}
.map-pin-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--yellow);
  padding: 3px 9px;
  margin-left: 10px;
  white-space: nowrap;
}
@keyframes pulse-ring {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Video embed ---------- */
.video-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 640px;
  border: 1px solid var(--line);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.video-embed video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--panel); }
.video-caption { font-family: var(--font-mono); color: var(--muted); font-size: 0.85rem; margin-top: 12px; }

/* ---------- Sections ---------- */
.section { padding: 70px 0; }
.section-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Zwei plain Sections ohne Hintergrundwechsel dazwischen (z.B. Reels/YouTube auf der
   Startseite, Gästebuch/Kontakt auf der Kontaktseite) sonst 140px auseinander - viel mehr
   als jeder andere Abstand auf der Seite. Ohne sichtbaren Bruch dazwischen sollten sie sich
   eher wie durchgehender Inhalt lesen. */
.section:not(.section-alt):has(+ .section:not(.section-alt)) { padding-bottom: 24px; }
.section:not(.section-alt) + .section:not(.section-alt) { padding-top: 24px; }
.section-head { margin-bottom: 44px; }
.section-head p { color: var(--muted); }
.section-tag {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.section-tag::before { content: '// '; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 10px;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to right, #9a9aa8 0, #9a9aa8 2px, transparent 2px, transparent 8px, #9a9aa8 8px, #9a9aa8 10px),
    repeating-linear-gradient(to bottom, #6b4423 0, #6b4423 2px, transparent 2px, transparent 12px);
}
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -40px; top: 4px;
  width: 12px; height: 12px;
  background: #ffb84d;
  border: 3px solid #2e2e33;
  box-shadow: 0 0 0 2px var(--ink), 0 0 10px rgba(255,184,77,0.6);
}
.timeline-date {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 4px;
}
.timeline-item h3 { margin-bottom: 6px; }

/* Schlichte, professionelle Variante ohne Pixel-Look (z.B. Werdegang) */
.timeline-plain::before { content: none; }
.timeline-plain { border-left: 2px solid var(--line); }
.timeline-plain .timeline-item::before {
  left: -38px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 8px rgba(245,224,0,0.5);
}
.timeline-item p { color: var(--muted); margin-bottom: 0; }

.subsection-heading {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cyan);
  margin: 56px 0 20px;
}
.subsection-heading:first-of-type { margin-top: 0; }

/* ---------- Social-Banner (Kanal-Header-Grafik über den Reels-/Video-Reihen) ---------- */
.social-banner {
  position: relative;
  aspect-ratio: 6 / 1;
  max-width: var(--max-width);
  margin: 0 0 28px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.social-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.social-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.social-stats-item {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.social-stats-item:first-child { border-left: none; }
.social-stats-item svg { width: 22px; height: 22px; color: var(--cyan); }
.social-stats-value { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--yellow); }
.social-stats-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }

/* ---------- Fahrzeug-Bilderbuch ---------- */


/* je mehr Fotos, desto kleiner und dichter gestreut (max. 12 pro Fahrzeug) */


.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8,8,13,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border: 8px solid #fff;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--yellow); }

/* ---------- Umbau-Carousel ---------- */


/* Der Punkt bleibt optisch 8px klein, die Trefferflaeche ist aber 24x24 - so gross verlangt
   es WCAG 2.2, und mit 8 Pixeln trifft man auf dem Handy schlicht daneben. Gemacht mit einem
   durchsichtigen Rahmen: Der zaehlt zur Klickflaeche, veraendert aber das Bild nicht. */


/* Der aktive Punkt wird groesser gemacht, indem der durchsichtige Rahmen schmaler wird -
   nicht per transform. Ein vergroessertes Element wuerde ueber die Trefferflaechen der
   Nachbarn ragen, und genau das bemaengelt die Pruefung (WCAG 2.2, Abstand der Ziele). */


/* ---------- Placeholder graphics ---------- */
.placeholder {
  background:
    linear-gradient(160deg, rgba(51,230,224,0.16), transparent 45%, rgba(245,224,0,0.14)),
    var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.placeholder.square { aspect-ratio: 1 / 1; }
.placeholder svg { width: 34%; height: 34%; opacity: 0.95; filter: drop-shadow(0 0 14px rgba(245,224,0,0.35)); }

/* ---------- Facts / list blocks ---------- */
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fact-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 24px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.fact-card h3 { font-size: 1.05rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.fact-card p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.fact-icon { width: 22px; height: 22px; color: var(--yellow); flex-shrink: 0; }
.section-alt .fact-card { background: var(--ink); }

.umbau-status { margin-bottom: 8px; }
.build-sheet-link { color: var(--muted); font-size: 0.92rem; }
.build-sheet-link a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.build-sheet-link a:hover { color: var(--cyan); }

/* ---------- Prose ---------- */
.story-track { position: relative; }
.story-char {
  position: absolute;
  left: -11px;
  top: 0;
  width: 26px;
  height: 26px;
  z-index: 4;
  cursor: pointer;
  transition: top 0.65s cubic-bezier(.34,1.4,.4,1);
  animation: story-char-idle 1.8s ease-in-out infinite;
}
.story-char svg { width: 100%; height: 100%; shape-rendering: crispEdges; overflow: visible; }
.story-char .gear-shoulders,
.story-char .gear-helmet {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.34,1.6,.4,1);
}
.story-char[data-stage="1"] .gear-shoulders,
.story-char[data-stage="2"] .gear-shoulders {
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 1.5px rgba(245,224,0,0.85));
}
.story-char[data-stage="2"] .gear-helmet {
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 1.5px rgba(245,224,0,0.85));
}
.story-char .gear-pickaxe {
  opacity: 0;
  transform: scale(0.4) rotate(-15deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.34,1.6,.4,1);
}
.story-char.has-pickaxe .gear-pickaxe {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: drop-shadow(0 0 1.5px rgba(245,224,0,0.85));
}
.story-char.is-gear-pop .gear-shoulders,
.story-char.is-gear-pop .gear-helmet,
.story-char.is-gear-pop .gear-pickaxe { animation: story-gear-pop 0.6s ease; }
.story-char .pupil { transition: transform 0.12s linear; }

.story-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  white-space: normal;
  max-width: 120px;
  width: max-content;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.34,1.6,.4,1), opacity 0.2s ease;
  pointer-events: none;
  z-index: 5;
}
.story-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--paper);
}
.story-char.is-talking .story-bubble {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.story-char.is-hopping { animation: story-char-hop 0.55s cubic-bezier(.34,1.4,.4,1); }
.story-char.is-wobble { animation: story-char-wobble 0.6s ease-in-out; }
.story-char.is-spin { animation: story-char-spin 0.6s ease-in-out; }
.story-char.is-bigjump { animation: story-char-bigjump 0.7s cubic-bezier(.34,1.6,.4,1); }
.story-char.is-nod { animation: story-char-nod 0.6s ease-in-out; }
.story-char.is-shake { animation: story-char-shake 0.5s ease-in-out; }
.story-char.is-pulse { animation: story-char-pulse 0.6s ease-in-out; }
.story-char.is-peek { animation: story-char-peek 0.7s ease-in-out; }
.story-char.is-doubletake { animation: story-char-doubletake 0.55s ease-in-out; }
.story-char.is-happy { animation: story-char-happy 0.7s cubic-bezier(.34,1.6,.4,1); }

@keyframes story-char-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes story-char-hop {
  0% { transform: translateX(0) scale(1,1); }
  25% { transform: translateX(-4px) scale(1.2,0.75); }
  50% { transform: translateX(3px) scale(0.8,1.25) translateY(-12px); }
  75% { transform: translateX(-2px) scale(1.1,0.85); }
  100% { transform: translateX(0) scale(1,1); }
}
@keyframes story-char-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}
@keyframes story-char-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.85); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes story-char-bigjump {
  0% { transform: scale(1,1) translateY(0); }
  25% { transform: scale(1.3,0.6) translateY(0); }
  55% { transform: scale(0.75,1.3) translateY(-26px); }
  80% { transform: scale(1.15,0.8) translateY(0); }
  100% { transform: scale(1,1) translateY(0); }
}
@keyframes story-char-nod {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(4px); }
  50% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}
.story-char.is-wink .pupil:first-of-type { animation: story-char-wink-eye 0.6s ease-in-out; }
@keyframes story-char-wink-eye {
  0%, 20%, 100% { transform: scaleY(1); }
  40%, 70% { transform: scaleY(0.1); }
}
@keyframes story-gear-pop {
  0% { transform: scale(0.4); filter: brightness(1) drop-shadow(0 0 0 rgba(245,224,0,0)); }
  50% { transform: scale(1.4); filter: brightness(1.9) drop-shadow(0 0 3px rgba(245,224,0,0.9)); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes story-char-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes story-char-pulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.88); }
}
@keyframes story-char-peek {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30% { transform: translateX(-11px) rotate(-9deg); }
  65% { transform: translateX(6px) rotate(5deg); }
}
@keyframes story-char-doubletake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  15% { transform: rotate(-10deg) translateX(-3px); }
  30% { transform: rotate(0deg) translateX(0); }
  45% { transform: rotate(-16deg) translateX(-5px); }
  70% { transform: rotate(4deg) translateX(2px); }
}
@keyframes story-char-happy {
  0%, 100% { transform: translateY(0) scale(1,1); }
  20% { transform: translateY(-9px) scale(0.9,1.15); }
  40% { transform: translateY(0) scale(1.1,0.9); }
  60% { transform: translateY(-6px) scale(0.95,1.1); }
  80% { transform: translateY(0) scale(1,1); }
}

.story-prose {
  position: relative;
  padding-left: 34px;
  padding-bottom: 1px;
}
.story-prose h2 { position: relative; }
.story-prose-gold {
  position: relative;
  padding-left: 34px;
  padding-top: 1px;
}
.story-prose-gold h2 { position: relative; }

.story-prose::before,
.story-prose-gold::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to right, #9a9aa8 0, #9a9aa8 2px, transparent 2px, transparent 8px, #9a9aa8 8px, #9a9aa8 10px),
    repeating-linear-gradient(to bottom, #6b4423 0, #6b4423 2px, transparent 2px, transparent 12px);
}
.story-marker {
  position: absolute;
  left: -45px;
  top: 0.05em;
  width: 22px;
  height: 22px;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(255,184,77,0.6));
}
.story-marker svg { width: 100%; height: 100%; shape-rendering: crispEdges; display: block; }

.prose { max-width: 68ch; }
.story-prose, .story-prose-gold { max-width: none; }
.prose p { color: var(--muted); line-height: 1.75; margin-bottom: 1.3em; }
.prose p a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245,224,0,0.4); transition: color 0.2s, text-decoration-color 0.2s; }
.prose p a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.prose h2 { margin-top: 1.9em; }
.story-prose h2:first-of-type { margin-top: 0; }
.prose h3 { color: var(--paper); margin-top: 1.6em; }

/* ---------- Two-column layout ---------- */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.split-hero { grid-template-columns: 320px 1fr; gap: 36px; align-items: center; }
.split-photo-wrap {
  position: sticky;
  top: 100px;
  max-width: 360px;
}
.split-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  /* Der Kasten haelt seine Hoehe selbst, unabhaengig vom Bild darin. Die width/height-Angaben
     am <img> reichen dafuer theoretisch aus, in der Praxis rutschte die Seite bei etwa jedem
     sechsten Kaltstart trotzdem um 0,42 nach unten - das Bild stand fuer einen Moment mit
     2 Pixeln Hoehe da. Mit einem festen Seitenverhaeltnis am Kasten kann das nicht passieren. */
  aspect-ratio: 3 / 4;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
/* height: auto ist hier Pflicht, nicht Kosmetik: Das Bild hat width/height-Attribute
   (fuer das Seitenverhaeltnis waehrend des Ladens). Ohne diese Zeile nimmt der Browser
   die Attributhoehe als echte Hoehe - das Foto wurde dadurch 1200px hoch. */
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-photo-bg {
  position: absolute;
  width: 42%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: 0.45;
  filter: saturate(0.55) brightness(0.82);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  z-index: 0;
  pointer-events: none;
}
.split-photo-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-photo-bg-1 { top: -20%; left: -26%; transform: rotate(-9deg); }
.split-photo-bg-3 { top: -20%; right: -26%; transform: rotate(6deg); }

/* ---------- Form ---------- */
.contact-layout, .guestbook-layout { display: grid; grid-template-columns: 1fr 0.8fr; gap: 56px; }
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--cyan);
  margin-bottom: 6px;
}
/* select gehoert mit dazu: Ohne width wurde ein Auswahlfeld so breit wie seine laengste
   Option und schob auf dem Handy die ganze Seite seitlich auf (Produkt: 418px, Textblock:
   529px bei 375px Bildschirm) - und sah als einziges Feld nach Browser-Standard aus. */
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  max-width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--panel);
  color: var(--paper);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(245,224,0,0.15);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-hidden { position: absolute; left: -9999px; top: -9999px; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
.form-status { padding: 14px 18px; margin-bottom: 20px; font-size: 0.95rem; display: none; font-family: var(--font-mono); }
.form-status.success { display: block; background: rgba(51,230,224,0.12); color: var(--cyan); border: 1px solid rgba(51,230,224,0.4); }
.form-status.error { display: block; background: rgba(245,90,90,0.1); color: #ff8a8a; border: 1px solid rgba(255,138,138,0.4); }

.contact-info-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 32px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.contact-info-card h3 { color: var(--paper); }
.contact-info-card a { color: var(--paper); text-decoration: none; }
.contact-info-card a:hover { color: var(--yellow); }
.contact-info-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-item svg { width: 20px; height: 20px; color: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.contact-social { display: flex; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-social a { display: flex; color: var(--muted); transition: color 0.2s; }
.contact-social a:hover { color: var(--yellow); }
.contact-social svg { width: 22px; height: 22px; }
.contact-info-card p { color: var(--muted); margin-bottom: 14px; }
.contact-info-card p:last-child { margin-bottom: 0; }

/* ---------- Gästebuch-Carousel (gleicher 3D-Kurveneffekt wie Reels/YouTube-Carousel) ---------- */
.guestbook-list-wrap { margin-top: 64px; }
.guestbook-empty { color: var(--muted); font-family: var(--font-mono); font-size: 0.9rem; margin: 0; }
.guestbook-carousel {
  --edge-scale: 1;
  --edge-tilt: 0deg;
  --edge-push: 0px;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 30px max(24px, calc((100vw - var(--max-width)) / 2 + 24px)) 34px;
  margin-top: 8px;
  margin-bottom: 8px;
  perspective: 1000px;
  cursor: grab;
  scrollbar-width: none;
}
.guestbook-carousel::-webkit-scrollbar { display: none; }
.guestbook-carousel-item {
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  width: 280px;
  height: 190px;
  padding: 20px 22px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  transform: translateX(var(--edge-push, 0px)) rotateY(var(--edge-tilt, 0deg)) scale(var(--edge-scale, 1));
  transform-style: preserve-3d;
  transition: transform 0.15s linear;
  will-change: transform;
}
.guestbook-carousel-name { font-family: var(--font-head); font-weight: 600; color: var(--yellow); }
.guestbook-carousel-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 10px; }
.guestbook-carousel-message {
  color: var(--paper);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  white-space: pre-line;
  word-break: break-word;
  flex: 1;
}
.guestbook-carousel-item.is-truncated::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(19,19,25,0), var(--panel) 75%);
  pointer-events: none;
}
.guestbook-carousel-more {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
  pointer-events: none;
}
.guestbook-carousel-item.is-truncated .guestbook-carousel-more { display: block; }

/* ---------- Gästebuch: voller Kommentar per Klick ---------- */
.gb-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,8,13,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.gb-modal.is-open { opacity: 1; pointer-events: auto; }
.gb-modal-panel {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.gb-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.gb-modal-close:hover { background: var(--yellow); }
.gb-modal-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; padding-right: 30px; }
.gb-modal-name { font-family: var(--font-head); font-weight: 600; color: var(--yellow); font-size: 1.1rem; }
.gb-modal-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.gb-modal-message { color: var(--paper); white-space: pre-line; word-break: break-word; line-height: 1.6; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Legal pages ---------- */
.legal-content h2 { margin-top: 1.6em; }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }

/* ---------- Shop ---------- */
.shop-banner {
  background: rgba(245,224,0,0.08);
  border: 1px solid rgba(245,224,0,0.35);
  color: var(--yellow);
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: 40px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.product-icon {
  width: 100%;
  aspect-ratio: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border-radius: 8px;
  margin-bottom: 18px;
}
.product-icon svg { width: 56px; height: 56px; color: var(--cyan); }
.product-icon { position: relative; overflow: hidden; }
.product-photo { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.product-badge-soldout { background: rgba(245,90,90,0.85); color: var(--paper); }
/* "Bald verfügbar" ist kein Problem, sondern eine Ankündigung - bewusst der freundliche
   Cyan-Ton statt des roten Ausverkauft-Tons, damit es nicht wie ein Fehlerzustand wirkt. */
.product-badge-coming_soon { background: rgba(51,230,224,0.85); color: var(--ink); }
.product-sold-out-msg {
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: #ff8a8a;
  background: rgba(245,90,90,0.1);
  border: 1px solid rgba(255,138,138,0.4);
  border-radius: 4px;
}
.product-sold-out-msg-coming_soon {
  color: var(--cyan);
  background: rgba(51,230,224,0.1);
  border-color: rgba(51,230,224,0.4);
}
.product-sold-out-msg-large { padding: 16px 20px; font-size: 0.95rem; }
.product-link { display: block; text-decoration: none; color: inherit; }
.product-link:hover .product-name { color: var(--cyan); }
.product-name {
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 6px;
  /* Feste Höhe wie bei .product-description - ein langer Produktname (z.B. "Schlüsselanhänger")
     würde sonst auf 2 Zeilen umbrechen und Preis/Button tiefer schieben als bei kürzeren Namen. */
  min-height: 3.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-description {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 14px;
  /* Feste Höhe (min-height UND line-clamp) statt flex:1 - sonst würde unterschiedlich langer
     Text unterschiedlich hohe Karten ergeben, statt dass alle Karten gleich hoch sind. */
  min-height: 3.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-price { font-family: var(--font-mono); color: var(--yellow); font-size: 1.1rem; margin-bottom: 14px; }

/* Dienstleistungen: Preis-Karten für die Video-Pakete, gleiches Panel-Aussehen wie .product-card. */
.service-start-price { font-family: var(--font-mono); color: var(--yellow); font-size: 1.3rem; margin: 10px 0 18px; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 32px 0; }
.service-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  /* Wie bei .template-card: Spalte + margin-top:auto am Preis, damit die Preise bei
     unterschiedlich langen Beschreibungen auf gleicher Hoehe stehen (der "Ganztag" hat
     drei Zeilen Text, die anderen zwei). */
  display: flex;
  flex-direction: column;
}
.service-card .service-price { margin-top: auto; }
.service-card h3 { font-family: var(--font-head); margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; }
.service-price { font-family: var(--font-mono); color: var(--yellow); font-size: 1.2rem; }
/* Preise brechen nur zwischen den Bestandteilen um, nie mitten in "ab 20€/Monat" -
   auf Handy-Breite stand sonst das "ab" allein am Zeilenende. */
.service-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.price-part { white-space: nowrap; }
.price-sep { color: var(--muted); }
.service-note { color: var(--muted); font-size: 0.88rem; margin-top: 14px; }
.service-references { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.service-references a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.service-references a:hover { color: var(--yellow); }
.service-legal-note { color: var(--muted); font-size: 0.85rem; margin-top: 16px; }

/* Vorlagen-Karten: breiter als die Paket-Karten (.service-card), weil hier ein ganzer
   Beschreibungstext plus Demo- und PDF-Link reinpasst. */
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
/* Bei genau vier Paketen ergaebe die automatische Aufteilung 3 + 1 - eine einsame Karte in
   der zweiten Reihe. Zwei Spalten ergeben stattdessen ein gleichmaessiges 2x2. Die Anzahl
   setzt main.js als data-anzahl; bei drei oder fuenf Paketen greift wieder die Automatik. */
@media (min-width: 1000px) {
  .template-grid[data-anzahl="4"] { grid-template-columns: repeat(2, 1fr); }
}
/* Preis immer zweizeilig reservieren: sonst sitzt "ab 1.600€ einmalig" (bricht um) eine
   Zeile hoeher als "ab 900€ einmalig" (bricht nicht um), sobald die Karten schmal werden. */
.template-card .service-price { line-height: 1.35; min-height: calc(2 * 1.35em); align-content: end; }
.template-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  /* Spalte + margin-top:auto am Preis, damit Preis und Buttons bei unterschiedlich
     langen Beschreibungen trotzdem auf gleicher Hoehe stehen. */
  display: flex;
  flex-direction: column;
}
.template-card .service-price { margin-top: auto; }
/* Ziel des Preis-Rechners ("Passendes Paket ansehen"): Abstand zu Kopfzeile und Reiterleiste,
   und ein kurzes Aufleuchten, damit man die Karte nach dem Sprung sofort findet. */
.template-card {
  scroll-margin-top: calc(var(--kopf-hoehe, 66px) + var(--subnav-hoehe, 64px) + 16px);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.template-card.ist-hervorgehoben {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,224,0,0.35), 0 0 28px rgba(245,224,0,0.2);
}
.template-card h3 { font-family: var(--font-head); margin-bottom: 10px; }
.template-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; }
.template-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.template-links a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 4px;
  padding: 9px 16px;
  transition: background 0.2s, color 0.2s;
}
.template-links a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }

/* PDF-Vorschau im Overlay - gleiche Optik wie das Gästebuch-Popup (.gb-modal), nur breiter,
   weil eine DIN-A4-Seite sonst unlesbar klein wird. */
.pdf-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,8,13,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pdf-modal.is-open { opacity: 1; pointer-events: auto; }
.pdf-modal-panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.pdf-modal-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; padding-right: 50px; }
.pdf-modal-title { font-family: var(--font-head); font-weight: 600; color: var(--yellow); }
.pdf-modal-open { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.pdf-modal-open:hover { color: var(--yellow); }
.pdf-modal-frame { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); }
.pdf-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.pdf-modal-close:hover { background: var(--yellow); }
/* Der zweite Link (PDF) ist die ruhigere Variante - die Demo soll der Hauptweg bleiben. */
.template-links a + a { background: none; color: var(--paper); border-color: var(--line); }
.template-links a + a:hover { background: none; border-color: var(--yellow); color: var(--yellow); }

/* "Was dabei ist"-Block: einmal unter den Website-Paketen (Betreuung), einmal unter den
   Video-Paketen (Leistungsumfang). Gleiche Optik, damit die Seite einheitlich wirkt. */
.inklusive-block {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
}
.inklusive-block h3 { font-family: var(--font-head); margin-bottom: 14px; font-size: 1.05rem; }
.inklusive-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.inklusive-block li {
  color: var(--muted);
  font-size: 0.95rem;
  padding-left: 24px;
  position: relative;
  line-height: 1.55;
}
.inklusive-block li::before { content: "\2713"; position: absolute; left: 0; color: var(--cyan); }
/* Optionen mit Aufpreis: gelber Akzent und "+" statt Haken, damit man sie auf einen Blick
   von den enthaltenen Leistungen unterscheidet. */
.inklusive-block.is-optionen { border-left-color: var(--yellow); margin-top: 16px; }
.inklusive-block.is-optionen li::before { content: "+"; color: var(--yellow); font-weight: 700; }

/* Anfahrt-Zonen: zweispaltige Mini-Tabelle (Entfernung links, Preis rechts). Bewusst
   schlichter als .inklusive-block - es sind keine enthaltenen Leistungen, sondern Staffeln. */
.zonen-block { margin-top: 28px; }
.zonen-block h3 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 12px; }
.zonen-liste { list-style: none; padding: 0; margin: 0; max-width: 460px; }
.zonen-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.zonen-liste li:last-child { border-bottom: none; }
.zone-label { color: var(--paper); font-size: 0.95rem; }
.zone-preis { font-family: var(--font-mono); color: var(--yellow); font-size: 0.95rem; text-align: right; }

/* Häufige Fragen: aufklappbar, damit die Seite nicht durch sieben Antworten wächst.
   <details>/<summary> braucht dafür kein JavaScript und ist von Haus aus bedienbar. */
.faq-liste { display: grid; gap: 12px; align-items: start; }
/* NACHTRAG: Vorher stand hier max-width 820px. Sieben schmale Balken in einer
   Spalte wirkten im breiten Abschnitt verloren - jetzt zwei Spalten über die
   volle Breite wie die Karten darüber. align-items:start sorgt dafür, dass ein
   aufgeklappter Eintrag seinen Nachbarn in derselben Reihe nicht mitwachsen lässt. */
@media (min-width: 1000px) {
  .faq-liste { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
}
.faq-eintrag {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.faq-eintrag summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-head);
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: "+";
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-eintrag[open] summary::after { content: "\2212"; }
.faq-eintrag summary:hover { color: var(--cyan); }
.faq-eintrag summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.faq-eintrag p { color: var(--muted); font-size: 0.95rem; padding: 0 22px 20px; margin: 0; line-height: 1.6; }

/* Steuer-Fussnote, steht unter jedem Preisblock. */
.price-footnote { color: var(--muted); font-size: 0.8rem; margin-top: 18px; }

/* Referenz-Galerie der Fahrzeug-Videos. Hochformat (Reels), deshalb 9:16. */
.video-ref-heading { font-family: var(--font-head); margin: 40px 0 18px; }
.video-ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.video-ref-card { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.video-ref-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  background: #000;
  object-fit: cover;
}
.video-ref-card figcaption { padding: 16px 18px 20px; }
.video-ref-card figcaption strong { display: block; font-family: var(--font-head); margin-bottom: 4px; }
.video-ref-branche { display: block; color: var(--cyan); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.video-ref-card figcaption p { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.5; }

/* Startseite: Karten-Übersicht, die zu den einzelnen Seitenbereichen verlinkt (Werdegang,
   Garage, Cockpit, Dienstleistungen, Shop) - dieselbe Panel-Optik wie .service-card, aber als
   ganze Karte klickbar wie .product-link. */
/* minmax bewusst bei 200px (nicht 220px) - bei genau 5 Karten und der Container-Breite von
   1160px passen bei 200px alle 5 in eine Zeile; bei 220px blieb eine Karte allein in einer
   zweiten Zeile übrig (sah unfertig aus). */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 32px; }
.explore-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.explore-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
/* "Dienstleistungen" ist bei 5 Karten pro Zeile das einzige Wort, das nicht in eine Zeile
   passt - hyphens:auto statt des globalen h1-h4-Fallbacks overflow-wrap:break-word (bricht
   sonst mitten im Wort ohne Trennzeichen um, z.B. "Dienstleistun"/"gen"). */
/* h2 steht hier gleichberechtigt neben h3: Auf der 404-Seite sind die Karten die erste
   Gliederungsebene unter der h1, auf der Startseite die zweite. Die Groesse soll in
   beiden Faellen dieselbe sein - sonst bricht "Startseite" mitten im Wort um. */
.explore-card h2,
.explore-card h3 { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.25; margin-bottom: 8px; color: var(--paper); hyphens: auto; -webkit-hyphens: auto; }
.explore-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* Unternavigation auf der Dienstleistungen-Seite - springt zu den Abschnitten. Bewusst als
   eigene Leiste statt in die Hauptnav gepackt, damit hier später weitere Leistungen dazu
   kommen können, ohne die (jetzt schon volle) Hauptnav weiter zu überladen. scroll-margin-top
   sorgt dafür, dass der Sprungziel-Abschnitt nicht unter dem sticky Header verschwindet. */
/* Klickbare Reiter statt reiner Textlinks (erster Versuch) - deutlicher erkennbar, aber
   ohne eigene Pill-Optik, die nicht zum Rest der Seite passte. */
/* Bleibt beim Scrollen unter der Kopfzeile stehen, damit man nach einem Sprung direkt zum
   naechsten Abschnitt weiterkommt. --kopf-hoehe setzt das Skript auf der Seite (die Hoehe der
   Kopfzeile schwankt je nach Bildschirm). Die Leiste ist volle Breite, damit ihr Hintergrund
   beim Festkleben die ganze Zeile abdeckt - die Reiter selbst bleiben in der Seitenspalte. */
.service-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 12px max(24px, calc((100% - var(--max-width)) / 2 + 24px));
  position: sticky;
  top: var(--kopf-hoehe, 66px);
  z-index: 90;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.service-subnav a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 18px;
  transition: color 0.2s, border-color 0.2s;
}
.service-subnav a:hover { color: var(--paper); border-color: var(--yellow); }
/* Der Abschnitt, in dem man gerade ist (setzt das Skript beim Scrollen). */
.service-subnav a[aria-current="true"] { color: var(--cyan); border-color: var(--cyan); }
.service-subnav .subnav-kurz { display: none; }
/* Sprungziele halten Abstand zu Kopfzeile UND Reiterleiste, die beide oben stehen bleiben -
   sonst verschwindet die Ueberschrift nach dem Sprung darunter. */
#webdesign, #rechner, #vorlagen, #video, #kooperationen, #fragen {
  scroll-margin-top: calc(var(--kopf-hoehe, 66px) + var(--subnav-hoehe, 64px) + 8px);
}
#kontaktformular { scroll-margin-top: 90px; }
.product-variant { margin-bottom: 14px; }
.product-variant:has(select:disabled) { visibility: hidden; }
.product-variant label { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.product-variant select {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 8px 10px;
  font-family: var(--font-body);
  border-radius: 4px;
}
.product-add-btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: 0.85rem; }

.cart-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cart-toggle svg { width: 26px; height: 26px; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-count[data-empty="true"] { display: none; }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,8,13,0.7);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 96;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cart-drawer-head h2 { margin: 0; font-size: 1.2rem; }
.cart-close { background: none; border: none; color: var(--paper); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.cart-items { flex: 1; overflow-y: auto; }
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name { font-family: var(--font-head); font-size: 0.92rem; margin-bottom: 4px; }
.cart-item-variant { color: var(--muted); font-size: 0.78rem; margin-bottom: 4px; }
.cart-item-row { display: flex; justify-content: space-between; align-items: center; }
.cart-item-price { font-family: var(--font-mono); color: var(--yellow); font-size: 0.85rem; }
.cart-item-remove { background: none; border: none; color: #ff8a8a; font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; padding: 0; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; }
.cart-qty-btn { background: var(--ink); border: 1px solid var(--line); color: var(--paper); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; }
.cart-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 40px 0; }
.cart-footer { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 12px; }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-mono); margin-bottom: 16px; }
.cart-subtotal strong { color: var(--yellow); }
.cart-checkout-btn { width: 100%; justify-content: center; }
.cart-checkout-status { margin-top: 12px; font-size: 0.85rem; }
.cart-checkout-status.error { color: #ff8a8a; }

.product-back { margin-bottom: 24px; }
.product-back a { color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; }
.product-back a:hover { color: var(--cyan); }
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.product-icon-large { aspect-ratio: 1.2; }
.product-icon-large svg { width: 110px; height: 110px; }
.product-detail-body h1 { margin-bottom: 10px; }
.product-detail-price { font-family: var(--font-mono); color: var(--yellow); font-size: 1.4rem; margin-bottom: 18px; }
.product-detail-description { color: var(--muted); margin-bottom: 22px; }
.product-detail-qty { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.product-detail-qty label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }

/* ---------- Admin-Bereich: linke Sidebar statt einer Top-Nav (die wurde bei 11 Unterseiten
   zu voll und ist mehrzeilig umgebrochen). Auf schmalen Screens wird die Sidebar zur
   ausklappbaren Schublade hinter einer schmalen Kopfleiste (admin-topbar), analog zum
   Hamburger-Menü der öffentlichen Seite. ---------- */
.admin-layout { display: flex; align-items: flex-start; min-height: 100vh; }
.admin-topbar { display: none; }
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* Bei vielen Einträgen scrollt die Sidebar. Der Balken bleibt schmal und fast unsichtbar
     und wird erst beim Drüberfahren sichtbar, statt als heller Streifen neben dem Inhalt. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.admin-sidebar:hover { scrollbar-color: var(--line) transparent; }
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.admin-sidebar:hover::-webkit-scrollbar-thumb { background: var(--line); }
.admin-sidebar .logo { padding: 0 8px; }
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 22px; }
.admin-nav-links { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 4px;
}
.admin-sidebar-nav a svg { width: 18px; height: 18px; flex: none; }
.admin-sidebar-nav a:hover { color: var(--paper); background: var(--panel-raised); }
.admin-sidebar-nav a[aria-current="page"] { color: var(--cyan); background: rgba(51,230,224,0.1); }
/* Unterseiten von Website/Geschäft: nur sichtbar, solange man in dem Bereich ist. */
.admin-nav-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid var(--line); }
.admin-sidebar-nav .admin-nav-unter a { font-size: 0.78rem; padding: 6px 10px; }
.admin-sidebar-nav .admin-nav-unter a[aria-current="page"] { background: none; }
/* Papierkorb und Ausloggen: klein ganz unten, keine eigenen Menüpunkte mehr. */
.admin-nav-fuss { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.admin-nav-fuss a, .admin-nav-fuss button {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-decoration: none;
}
.admin-nav-fuss a:hover, .admin-nav-fuss button:hover, .admin-nav-fuss a[aria-current="page"] { color: var(--paper); }
/* Kachelseiten Website und Geschäft */
.admin-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.admin-kachel {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 96px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--paper);
  transition: border-color 0.15s;
}
.admin-kachel:hover { border-color: var(--cyan); }
.admin-kachel b { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
.admin-kachel span { color: var(--muted); font-size: 0.85rem; }
.admin-sidebar-backdrop { display: none; }

/* Volle Restbreite neben der Sidebar (max. var(--max-width), wie der Rest der Seite) - im
   Admin-Bereich gibt's Listen/Tabellen, die von mehr Platz profitieren. */
.admin-wrap { flex: 1; min-width: 0; max-width: var(--max-width); margin: 0 auto; padding: 40px 32px 80px; }

@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }
  .admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .admin-sidebar-toggle {
    background: none;
    border: none;
    color: var(--paper);
    padding: 6px;
    cursor: pointer;
  }
  .admin-sidebar-toggle svg { width: 24px; height: 24px; display: block; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,0.4);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .admin-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .admin-wrap { padding: 32px 20px 60px; }
}
.admin-section { margin-top: 48px; }
/* Sprungziele aus dem Menü (z. B. #kooperationen) nicht unter der Kopfleiste verstecken. */
.admin-section[id] { scroll-margin-top: 90px; }
.admin-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
/* Mehrere Knoepfe rechts im Abschnittskopf, z. B. "Absenderdaten" neben "+ Neue Rechnung". */
.admin-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Links, die als Knopf aussehen ("Absenderdaten"), ohne Unterstrich wie die echten Knoepfe. */
.admin-kopf-knoepfe a, .admin-section-head > a { text-decoration: none; }

.admin-entry {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.admin-entry-body { flex: 1; min-width: 0; }
.admin-entry-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.admin-entry-name { font-family: var(--font-head); font-weight: 600; color: var(--yellow); }
.admin-entry-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.admin-entry-message { color: var(--paper); white-space: pre-line; word-break: break-word; }
.admin-entry-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.admin-delete-btn, .admin-edit-btn {
  background: none;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
}
.admin-delete-btn { border: 1px solid rgba(255,138,138,0.4); color: #ff8a8a; }
.admin-delete-btn:hover { background: rgba(245,90,90,0.12); }
.admin-edit-btn { border: 1px solid rgba(51,230,224,0.4); color: var(--cyan); }
.admin-edit-btn:hover { background: rgba(51,230,224,0.12); }
.admin-delete-btn:disabled, .admin-edit-btn:disabled { opacity: 0.5; cursor: default; }
/* Als Link statt Button verwendet, z. B. "Drucken" in der Rechnungsliste. */
a.admin-edit-btn { display: inline-block; text-decoration: none; }
.admin-edit-form { margin-top: 14px; }
.admin-edit-form .form-field { margin-bottom: 12px; }
.admin-edit-form .form-field textarea { min-height: 80px; }
.admin-edit-actions { display: flex; gap: 10px; align-items: center; }
.admin-edit-status { margin: 10px 0 0; }

/* ---------- Admin-Shop (Produktverwaltung) ---------- */
.admin-entry-link {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.admin-entry-link:hover .admin-entry-name { color: var(--cyan); }
.admin-entry-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.admin-entry-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-entry-thumb svg { width: 30px; height: 30px; color: var(--cyan); }
.admin-entry-price { font-family: var(--font-mono); color: var(--yellow); font-size: 0.85rem; }
.admin-entry-unavailable { color: #ff8a8a; font-family: var(--font-mono); font-size: 0.75rem; }
.form-field-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.form-field-checkbox input { accent-color: var(--cyan); width: 16px; height: 16px; }
.form-field-checkbox label { margin: 0; }
.admin-photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.admin-photo-list-item { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--ink); }
.admin-photo-list-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(8,8,13,0.8);
  color: #ff8a8a;
  border: none;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  font-size: 0.9rem;
}
.admin-upload-status { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; }

/* ---------- Einzelne Held-/Deko-Bildplätze (Startseite-Hintergrund, Garage-Heldenbild) ---------- */
.admin-decor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }
.admin-decor-slot { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.admin-decor-slot-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.admin-decor-slot-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--ink); margin-bottom: 12px; }
.admin-decor-slot-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-decor-slot .form-field { margin-bottom: 10px; }
.admin-decor-slot input[type="file"] { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; width: 100%; }
.admin-link-import { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.admin-link-import-row { display: flex; gap: 10px; }
.admin-link-import-row input { flex: 1; width: auto; }
.admin-link-import-row .btn { flex-shrink: 0; }

.admin-trash { margin-top: 40px; }
.admin-trash summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  padding: 10px 0;
}
.admin-trash summary:hover { color: var(--paper); }
.admin-trash-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  padding: 14px 18px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.admin-trash-item-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.admin-trash-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-restore-btn { border: 1px solid rgba(245,224,0,0.4); color: var(--yellow); }
.admin-restore-btn:hover { background: rgba(245,224,0,0.12); }
.admin-purge-btn { border: 1px solid rgba(255,138,138,0.4); color: #ff8a8a; }
.admin-purge-btn:hover { background: rgba(245,90,90,0.12); }

/* ---------- Admin-Startseite (Bilder-Grid) ---------- */
.admin-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; margin-top: 6px; }
.admin-image-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.admin-image-card-link { display: block; text-decoration: none; color: inherit; }
.admin-image-card-thumb { width: 100%; aspect-ratio: 1; background: var(--ink); overflow: hidden; }
.admin-image-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-card-alt {
  padding: 10px 12px 6px;
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.admin-image-card-link:hover .admin-image-card-alt { color: var(--cyan); }
/* margin-top: auto schiebt den Button an den unteren Rand der Karte - Karten in derselben
   Grid-Zeile werden per Grid-Default (align-items: stretch) auf gleiche Höhe gestreckt, ohne
   das säße der Button bei kurzen Beschreibungen (1 statt 2 Zeilen) weiter oben als bei langen. */
.admin-image-card-delete { margin: auto 12px 12px; width: calc(100% - 24px); }

/* ---------- Admin-Karussells (Tabs) ---------- */
.admin-tabs { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: -1px;
}
.admin-tab-btn:hover { color: var(--paper); }
.admin-tab-btn.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }

.order-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.order-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.order-email { font-family: var(--font-head); font-weight: 600; }
.order-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.order-items { color: var(--muted); font-size: 0.88rem; }
.order-status { font-family: var(--font-mono); font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; background: rgba(51,230,224,0.12); color: var(--cyan); }

/* Rechnungsstatus: offen fällt gelb auf, damit man unbezahlte Rechnungen sofort sieht. */
.invoice-status { font-family: var(--font-mono); font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; }
.invoice-status.is-offen { background: rgba(245,224,0,0.15); color: var(--yellow); }
.invoice-status.is-bezahlt { background: rgba(51,230,224,0.12); color: var(--cyan); }

/* ---------- Kooperationen (Startseite) ---------- */
.koop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 48px; }
/* Karten als Flex-Spalte mit .koop-card-bottom auf margin-top:auto - so stehen Codes und
   Links über alle Karten hinweg auf gleicher Höhe, egal wie lang der Text darüber ist. */
.koop-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 20px 22px;
  color: inherit;
}
.koop-card-bottom { margin-top: auto; padding-top: 14px; }
.koop-name { display: block; font-family: var(--font-head); font-weight: 600; color: var(--paper); margin-bottom: 4px; }
.koop-kind { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--cyan); margin-bottom: 8px; }
.koop-note { color: var(--muted); font-size: 0.88rem; margin: 0; }
.koop-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.koop-note a:hover { color: var(--yellow); }
/* Feste Mindesthöhen: leere Zeilen halten den Platz frei, damit Codes und Links über alle
   Karten hinweg exakt auf einer Linie liegen. */
.koop-code-row { min-height: 34px; display: flex; align-items: center; }
.koop-links { margin-top: 12px; min-height: 34px; }
.koop-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 13px;
  display: inline-block;
  transition: color 0.2s, border-color 0.2s;
}
.koop-links a:hover { color: var(--yellow); border-color: var(--yellow); }
.koop-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* Abgelaufener Code darf nicht wie ein aktives Angebot aussehen. */
.koop-code.is-expired .koop-code-value {
  background: none;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-decoration: line-through;
}
.koop-code.is-expired .koop-code-rabatt { color: var(--muted); }
/* "Abgelaufen" in Rot, damit sofort klar ist, dass der Code nicht mehr gilt. */
.koop-code.is-expired .koop-status { color: #ff8a8a; }
.koop-code { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.koop-code-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 4px;
  padding: 6px 12px;
}
.koop-code-rabatt { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); }
/* Werbekennzeichnung: klein, aber eindeutig lesbar - sie muss auf den ersten Blick erkennbar
   sein, darf den Abschnitt aber nicht dominieren. */
.koop-werbung {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 9px;
  margin-left: 10px;
}
.koop-werbung-hinweis { color: var(--muted); font-size: 0.85rem; }

/* ---------- Statistik ---------- */
.stat-range { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.stat-range-btn {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.stat-range-btn:hover { color: var(--paper); border-color: var(--yellow); }
.stat-range-btn.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.stat-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 14px; align-items: center; padding: 8px 0; }
.stat-row-label { font-family: var(--font-mono); font-size: 0.82rem; color: var(--paper); overflow-wrap: anywhere; }
.stat-row-bar { background: var(--ink); border-radius: 3px; height: 10px; overflow: hidden; }
.stat-row-bar span { display: block; height: 100%; background: var(--cyan); border-radius: 3px; }
.stat-row-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--yellow); }
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr auto; }
  .stat-row-bar { grid-column: 1 / -1; }
}

.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.admin-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.admin-stat-card:hover { border-color: var(--cyan); }
.admin-stat-number { font-family: var(--font-head); font-size: 2.2rem; color: var(--cyan); }
.admin-stat-label { color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem; margin-top: 6px; }

/* ---------- Admin auf dem Handy ----------
   Steht bewusst HINTER allen Admin-Grundregeln (.admin-entry, .admin-stat-grid, ...): Bei
   gleicher Spezifitaet gewinnt die spaetere Regel, weiter oben wuerden diese hier ueberschrieben. */
@media (max-width: 900px) {
  /* In der Spaltenanordnung machte align-items: flex-start (siehe .admin-layout) den
     Inhaltsbereich nur so breit wie seinen Inhalt: Schmale Seiten schwammen eingerueckt in
     der Mitte (Uebersicht 321px, Bestellungen 260px), breite liefen seitlich ueber den Rand
     (Shop 420px, Rechnungen 395px - bei 375px Bildschirmbreite). */
  .admin-layout { align-items: stretch; }
  .admin-wrap { width: 100%; margin: 0; }
  /* 100vh reicht auf dem iPhone bis hinter die Browserleiste - "Ausloggen" war abgeschnitten. */
  .admin-sidebar { height: 100dvh; }
  .admin-sidebar-nav a { padding: 12px; }
}
@media (max-width: 600px) {
  .admin-wrap { padding: 24px 16px 56px; }
  .admin-wrap h1 { font-size: 1.9rem; margin-bottom: 16px; }
  .admin-wrap h2 { font-size: 1.35rem; }
  .admin-section { margin-top: 36px; }

  /* Abschnittskopf: Ueberschrift oben, Knoepfe darunter. Nebeneinander wurden die Knoepfe
     neben die Ueberschrift gequetscht und brachen einzeln um. */
  .admin-section-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .admin-section-head > .btn { justify-content: center; padding: 12px 14px; font-size: 0.85rem; }
  /* stretch: die Grundregel zentriert (align-items: center), dann waeren die Knoepfe im
     Raster unterschiedlich hoch. */
  .admin-kopf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  /* Fuer alle Kinder, nicht nur .btn - "Absenderdaten" ist ein Link mit nur .btn-outline. */
  .admin-kopf-knoepfe > * {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    white-space: nowrap; padding: 12px 8px; font-size: 0.8rem;
  }
  /* Der letzte Knopf ist immer die Hauptaktion ("+ Neu …") - bei ungerader Anzahl bekommt
     er die ganze Zeile statt einer halben mit Loch daneben. */
  .admin-kopf-knoepfe > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Listeneintraege: Aktionen unter den Inhalt statt als schmale Spalte daneben, die den
     Text auf wenige Woerter pro Zeile zusammendrueckte. */
  .admin-entry { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 12px; }
  .admin-entry-actions { flex-direction: row; }
  .admin-entry-actions > * { flex: 1; text-align: center; }
  .admin-trash-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-trash-item-actions > * { flex: 1; }
  .admin-link-import-row { flex-direction: column; }
  .admin-link-import-row .btn { justify-content: center; }
  /* Unter 40px Hoehe trifft man mit dem Daumen daneben. */
  .admin-delete-btn, .admin-edit-btn, .admin-restore-btn, .admin-purge-btn { min-height: 40px; }
  .admin-tabs { overflow-x: auto; }
  .admin-tab-btn { white-space: nowrap; }
  /* "Papierkorb ist leer." usw.: Die 40px Polster oben und unten der Shop-Variante machten
     aus sechs leeren Abschnitten fast drei Bildschirme. */
  .admin-wrap .cart-empty { padding: 8px 0; text-align: left; }

  /* Uebersicht: zwei kompakte Kacheln pro Zeile statt elf bildschirmhoher untereinander. */
  .admin-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stat-card { padding: 14px 16px; border-radius: 8px; }
  .admin-stat-number { font-size: 1.6rem; line-height: 1.1; }
  .admin-stat-label { font-size: 0.72rem; margin-top: 4px; }

  /* iOS zoomt beim Antippen in jedes Feld mit weniger als 16px Schrift hinein. */
  .admin-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .admin-wrap textarea,
  .admin-wrap select { font-size: 16px; }
}

/* ---------- Konto ---------- */
/* .container ist wie auf jeder anderen Seite volle Breite (var(--max-width)) - nur das
   Formular selbst bleibt in einer lesbaren Spalte, sonst würden Eingabefelder über die
   ganze Seitenbreite gezogen. */
.konto-panel { max-width: 480px; }

/* Eingeloggt: eine Karte mit Konto und Aktionen, darunter die Bestellungen. Vorher standen
   E-Mail, zwei gleich gewichtete Knoepfe mit Luecke dazwischen und ein zentrierter
   Platzhaltertext lose untereinander. */
.konto-karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}
.konto-karte-kopf { display: flex; align-items: center; gap: 14px; }
.konto-initiale {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(51,230,224,0.12);
  border: 1px solid rgba(51,230,224,0.4);
  color: var(--cyan);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
}
.konto-karte-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.konto-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* Lange Adressen duerfen umbrechen statt die Karte zu sprengen. */
.konto-email { color: var(--paper); overflow-wrap: break-word; }
.konto-marke {
  font-size: 0.62rem;
  padding: 1px 6px; border-radius: 3px;
  border: 1px solid rgba(245,224,0,0.5); color: var(--yellow);
}
.konto-hinweis {
  margin: 16px 0 0; padding: 10px 12px; border-radius: 6px;
  background: rgba(245,224,0,0.08); border: 1px solid rgba(245,224,0,0.3);
  color: var(--yellow); font-size: 0.85rem;
}
.konto-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.konto-aktionen .btn { justify-content: center; }

/* Doppelte Klasse, weil .subsection-heading:first-of-type den Abstand sonst auf 0 setzt. */
.subsection-heading.konto-abschnitt { margin-top: 36px; }
.konto-leer {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 20px;
}
.konto-leer-titel { margin: 0 0 4px; color: var(--paper); font-family: var(--font-head); font-weight: 600; }
.konto-leer-text { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }
.konto-leer-link { font-family: var(--font-mono); font-size: 0.85rem; color: var(--cyan); text-decoration: none; }
.konto-leer-link:hover { color: var(--yellow); }

/* Ausgeloggt: Login und Registrierung als Karte mit echten Tabs. Vorher zwei kleine
   Umrandungs-Knoepfe, bei denen nicht zu sehen war, welcher gerade aktiv ist. */
.konto-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: -20px -20px 20px;
  border-bottom: 1px solid var(--line);
}
.konto-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 16px 12px; margin-bottom: -1px;
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.konto-tab:hover { color: var(--paper); }
.konto-tab[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.konto-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.konto-tab:first-child { border-top-left-radius: 10px; }
.konto-tab:last-child { border-top-right-radius: 10px; }

.konto-karte-titel { font-size: 1.3rem; margin: 0 0 6px; }
.konto-karte-intro { color: var(--muted); font-size: 0.92rem; margin: 0 0 20px; }
.konto-karte .form-field:last-of-type { margin-bottom: 24px; }
/* Felder dunkler als die Karte - in derselben Farbe verschwammen sie mit dem Hintergrund. */
.konto-karte .form-field input { background: var(--ink); }
.konto-feld-hinweis { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }
.konto-senden { width: 100%; justify-content: center; }
.konto-senden:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }

/* Passwortfeld mit "Anzeigen"-Knopf im Feld: Auf dem Handy vertippt man sich leicht, und
   ohne Anzeige merkt man es erst an der Fehlermeldung. */
.konto-passwort { position: relative; }
.konto-passwort input { padding-right: 104px; }
.konto-passwort-zeigen {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: none; border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); cursor: pointer;
}
.konto-passwort-zeigen:hover, .konto-passwort-zeigen[aria-pressed="true"] { color: var(--cyan); }
.konto-passwort-zeigen:focus-visible { outline: 2px solid var(--cyan); }

.konto-wechsel { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 0.88rem; }
.konto-wechsel-link {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  color: var(--cyan); font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.konto-wechsel-link:hover { color: var(--yellow); }

/* 2FA: Schritte nummeriert, Schluessel und Code gut lesbar in Monospace. */
.konto-schritte { margin: 0 0 20px; padding-left: 20px; color: var(--paper); font-size: 0.92rem; }
.konto-schritte li { margin-bottom: 10px; }
.konto-schritte li::marker { color: var(--cyan); font-family: var(--font-mono); }
.konto-schluessel {
  display: block; margin-top: 8px; padding: 10px 12px; border-radius: 6px;
  background: var(--ink); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.08em;
  color: var(--yellow); word-break: break-all; user-select: all;
}
.form-field input.konto-code {
  font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: 0.4em;
  text-align: center; padding: 12px 16px;
}

@media (max-width: 560px) {
  .konto-karte, .konto-leer { padding: 16px; }
  .konto-tabs { margin: -16px -16px 16px; }
  /* Auf dem Handy volle Breite, Hauptaktion oben - so trifft man sie mit dem Daumen. */
  .konto-aktionen { flex-direction: column; }
  .konto-aktionen .btn { width: 100%; }
}

.nav-account { position: relative; }
.nav-account > a::after { content: ' ▾'; font-size: 0.75em; }
/* "Meine Story" ist (anders als "Konto") der erste Nav-Punkt - rechtsbündig wie beim
   Standard-Dropdown würde das Menü nach links über den Seitenrand/Logo hinausragen. */
.nav-account-left .nav-account-menu { left: 0; right: auto; }
.nav-account-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 190px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  z-index: 50;
}
.nav-account-menu.is-open { display: block; }
.nav-account-menu a, .nav-account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  color: var(--paper);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
}
.nav-account-menu a:hover, .nav-account-menu button:hover { background: rgba(255,255,255,0.06); color: var(--cyan); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .social-stats { flex-direction: column; }
  .social-stats-item { border-left: none; border-top: 1px solid var(--line); }
  .social-stats-item:first-child { border-top: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 40px 0 50px; }
  .hero-photo { max-width: 320px; margin: 0 auto; }
  .hero-grid > div:first-child { text-align: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .photo-stack { width: 100%; max-width: 300px; padding: 8px 26px 26px 8px; margin-left: auto; margin-right: auto; }
  .photo-cluster { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; margin-top: 28px; }
  .story-char { width: 20px; height: 20px; left: -8px; }
  .story-prose { padding-left: 22px; }
  .story-prose-gold { padding-left: 22px; }
  .story-prose::before,
  .story-prose-gold::before {
    left: -4px;
    width: 8px;
    background-image:
      linear-gradient(to right, #9a9aa8 0, #9a9aa8 2px, transparent 2px, transparent 6px, #9a9aa8 6px, #9a9aa8 8px),
      repeating-linear-gradient(to bottom, #6b4423 0, #6b4423 2px, transparent 2px, transparent 10px);
  }
  .story-marker { left: -30px; width: 16px; height: 16px; top: 0.1em; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-photo-wrap { position: relative; top: 0; max-width: 320px; margin: 0 auto; }
  .split-photo-bg { width: 32%; opacity: 0.35; }
  .split-photo-bg-1 { top: -10%; left: -10%; }
  .split-photo-bg-3 { display: none; }


  .contact-layout, .guestbook-layout { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }


  .guestbook-carousel { gap: 18px; }
  .guestbook-carousel-item { width: 240px; height: 180px; }
  .cart-drawer { width: 100vw; }
  .product-detail-layout { grid-template-columns: 1fr; }
  .section { padding: 50px 0; }
  h1 { font-size: 2.2rem; }
}

/* Eigener, breiterer Umbruchpunkt fürs Hamburger-Menü (unabhängig vom 860px-Block oben) -
   die Nav allein braucht mit 8 Punkten ("Shop"+Badge, "Dienstleistungen", "Konto ▾"-Dropdown
   bei Login) gemessen rund 1270px, deutlich mehr als der Rest der Seite. Bewusst mit
   großzügigem Sicherheitsabstand statt exakt an der in einem Test-Browser gemessenen Kante -
   je nach Schriftart-Rendering im tatsächlichen Browser kann der reale Bedarf spürbar
   variieren (das hat hier schon mal für zu knapp bemessene Werte gesorgt).

   NACHTRAG: Seit die Einträge unter "Meine Story" zusammengefasst sind, braucht die Leiste
   nur noch rund 925px (Logo 121 + Navigation 676 + Social-Icons 128) statt der früheren
   ~1270px. Der alte Umschaltpunkt von 1320px war danach viel zu früh - auf einem normalen
   Laptop (1280px oder schmaler) verschwand die komplette Leiste im ☰-Knopf, obwohl sie
   bequem gepasst hätte. Jetzt 1080px: das sind ~105px Reserve auf die gemessenen 975px
   inklusive Innenabstand, also weiterhin Luft für abweichendes Schrift-Rendering. */
@media (max-width: 1080px) {
  .main-nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: calc(100vh - 60px);
    background: var(--ink);
    padding: 20px 24px;
    overflow-y: auto;
    transform: translateY(-110%);
    transition: transform 0.25s ease;
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav a { display: block; padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .social-links { margin-left: auto; }
  /* Im mobilen Menü ist die "Konto"-Zeile volle Breite und der Text steht links - das
     Untermenü soll deshalb auch links unter dem Text aufklappen, nicht rechtsbündig am Rand
     der ganzen Zeile (das saß sonst weit weg vom Wort "Konto"). */
  .nav-account-menu { left: 0; right: auto; }
}

@media (max-width: 560px) {
  .header-inner { padding: 12px 18px; }
  .hero { padding: 32px 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }

  .logo .cursor { animation: none; }
  .story-char, .story-char * { animation: none !important; transition: none !important; }

}

/* ---------- Preis-Rechner (Services-Seite) ----------
   Links die Fragen, rechts das Ergebnis - auf dem Handy untereinander. Die Optionen sind
   Knoepfe statt eines Auswahlfeldes, damit man alle Moeglichkeiten auf einen Blick sieht
   und nicht erst etwas aufklappen muss. role="radio" sorgt dafuer, dass Screenreader und
   Tastatur sie trotzdem wie eine normale Auswahl behandeln. */
.rechner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 28px;
  align-items: start;
}
.rechner-frage { margin-bottom: 22px; }
.rechner-frage:last-child { margin-bottom: 0; }
.rechner-frage-text {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--paper);
  margin-bottom: 10px;
}
.rechner-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.rechner-option {
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.rechner-option:hover { border-color: rgba(51,230,224,0.5); color: var(--paper); }
.rechner-option[aria-checked="true"] {
  border-color: var(--cyan);
  color: var(--ink);
  background: var(--cyan);
  font-weight: 600;
}
.rechner-option:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.rechner-ergebnis {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 24px 26px;
}
.rechner-preis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  color: var(--yellow);
  line-height: 1.3;
}
.rechner-preis .price-part { white-space: nowrap; }
.rechner-preis .price-sep { color: var(--muted); }
.rechner-zusatz { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; }
.rechner-hinweis { margin: 14px 0 0; color: var(--paper); font-size: 0.95rem; line-height: 1.6; }
.rechner-hinweis strong { color: var(--cyan); }
.rechner-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rechner-knoepfe .btn, .rechner-knoepfe .btn-outline { font-size: 0.85rem; padding: 10px 18px; }
.rechner-fussnote { margin: 18px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.6; }

@media (max-width: 860px) {
  .rechner { grid-template-columns: 1fr; gap: 22px; }
  .rechner-ergebnis { padding: 20px; }
  .rechner-preis { font-size: 1.25rem; }
}

/* ---------- Über mich: die Geschichte als Partikel-Reise ----------
   Eine feste Leinwand hinter der Seite, darueber scrollen die Kapitel. Der Lesetext leuchtet
   Wort fuer Wort auf, waehrend das Partikelwort auseinanderfliegt. Die Mechanik steckt in
   main.js (initUeberMichStory). Der dunkle Hintergrund ist derselbe wie sonst auf der Seite. */
#partikel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.p-inhalt { position: relative; z-index: 2; }

/* Kapitelanzeige: unten mittig als Leiste, damit sie der Hauptnavigation oben nicht ins
   Gehege kommt. Angelehnt an die Instrumenten-Optik der Vorbilder. */
.p-stufen {
  position: fixed;
  bottom: 16px;
  right: 22px;
  z-index: 5;
  /* Waehrend gelesen wird, tritt die Anzeige zurueck: Sie stand sonst mitten im Text.
     Den Wert setzt die Partikel-Schleife in main.js, passend zum Zerfall des Wortes. */
  opacity: var(--stufen-deckkraft, 1);
  transition: opacity 0.4s ease;
  pointer-events: none;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5,5,10,0.82);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.p-stufe {
  width: 22px; height: 22px;
  border: 1px solid rgba(167,167,184,0.45);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.62rem;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.p-stufe.ist-aktiv { background: var(--cyan); border-color: var(--cyan); color: #05050a; }
.p-stufe.ist-erledigt { border-color: var(--cyan); color: var(--cyan); }
.p-kapitelname { margin-left: 12px; color: var(--cyan); }

/* Eckmarken wie auf dem Vorbild - reine Deko, tragen die Jahreszahlen der Geschichte */
.p-marke {
  position: fixed;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: rgba(167,167,184,0.5);
  border: 1px dashed rgba(167,167,184,0.22);
  padding: 4px 9px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.p-marke.ist-da { opacity: 1; }
.p-marke-1 { top: 18vh; left: 6vw; }
.p-marke-2 { bottom: 16vh; right: 7vw; }

/* ---------- Kapitel ---------- */
/* Jedes Kapitel: erst das Partikelwort allein auf einer Bildschirmhoehe, dann der Text.
   Deshalb kein festes 100vh mehr - lange Abschnitte duerfen laenger sein. */
.p-kapitel { padding: 0 24px 18vh; }
.p-motivraum { height: 78vh; }
.p-karte {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.p-kapitel.ist-da .p-karte { opacity: 1; transform: none; }
.p-nummer {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--cyan);
  display: block;
  margin-bottom: 18px;
}
/* Die Ueberschrift steht als Partikelwort im Bild. Fuer Vorlese-Programme und
   Suchmaschinen bleibt sie hier trotzdem im Dokument, nur unsichtbar. */
.p-karte h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.p-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--paper);
  text-shadow: 0 2px 20px rgba(0,0,0,0.95);
  margin: 0 auto 26px;
  max-width: 54ch;
}
/* Der lange Lesetext steht jetzt offen da - und leuchtet beim Scrollen Wort fuer Wort auf.
   Den Fortschritt setzt JavaScript als eine einzige Zahl (--p) auf den Absatz; welches Wort
   wie hell ist, rechnet der Browser selbst aus. So wird pro Bild nur eine Eigenschaft
   geschrieben statt hunderter - deshalb bleibt es auch mit 400 Woertern fluessig. */
.p-lesetext {
  max-width: 50ch;
  margin: 0 auto;
  text-align: left;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.75;
}
.p-lesetext p { margin: 0 0 1.1em; color: var(--paper); }
/* Links im Lesetext: gelb wie ueberall auf der Seite, und sie leuchten mit dem Rest auf. */
.p-lesetext a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245,224,0,0.45); }
.p-lesetext a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.p-lesetext .wort {
  opacity: clamp(0.13, calc(var(--p, 0) * var(--n) - var(--i)), 1);
  transition: opacity 0.18s linear;
}
/* Der erste Satz bleibt der Aufmacher - groesser, aber nach derselben Logik. */
.p-lesetext p:first-child { font-size: 1.12em; color: #fff; }

.p-weiter {
  display: block;
  margin: 26px auto 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: center;
  opacity: 0.55;
}

@media (max-width: 760px) {
  /* Ungelesene Woerter bleiben heller als am Desktop. Auf dem kleinen Bildschirm ist immer
     ein grosser Teil des Absatzes noch "vor" der Leselinie - mit 0.13 sah das aus, als
     wuerde die Schrift verschwinden. */
  .p-lesetext .wort { opacity: clamp(0.34, calc(var(--p, 0) * var(--n) - var(--i)), 1); }
  .p-stufen { bottom: 10px; right: 50%; transform: translateX(50%); padding: 6px 12px; gap: 6px; }
  .p-stufe { width: 18px; height: 18px; font-size: 0.55rem; }
  .p-kapitelname { display: none; }
  .p-marke { display: none; }
  .p-kapitel { min-height: 92vh; padding: 12vh 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-karte { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Das Familien-Kapitel behaelt seinen goldenen Akzent aus der alten Fassung. */
.p-kapitel.ist-gold .p-nummer { color: var(--yellow); }
.p-kapitel.ist-gold .p-lesetext p:first-child { color: var(--yellow); }

/* Erstes Kapitel bekommt oben etwas Luft unter der Hauptnavigation. */
.p-kapitel:first-child { padding-top: 4vh; }
/* Solange die Kapitel noch geladen werden, steht hier nichts - dann saesse die Fusszeile
   mitten im Bild und wuerde beim Rendern nach unten springen (gemessener Layoutsprung 0.10).
   Eine Bildschirmhoehe reicht, um sie unter die Kante zu schieben. */
#story-blocks:empty { min-height: 100vh; }

/* Das letzte Kapitel braucht Scrollweg nach unten, sonst kann sein Wort nicht mehr
   zerfallen - der Motivbereich muss oben aus dem Bild laufen koennen. Ohne das blieb
   "FAMILIE" ueber dem Schlusstext stehen. */
.p-kapitel:last-child { padding-bottom: 58vh; }

/* ---------- NACHTRAG: Platz reservieren, solange der Inhalt noch laedt ----------
   Die Inhalte dieser Seiten stehen in JSON-Dateien und werden erst per JavaScript
   eingesetzt. Bis dahin waren die Behaelter 0px hoch, und beim Rendern rutschte alles
   darunter nach unten - gemessen 0.651 auf /dienstleistungen und 0.388 auf /garage,
   als "gut" gilt unter 0.1 (Google rechnet das in die Seitenbewertung ein).
   :empty greift nur, solange nichts drinsteht, und verschwindet von selbst, sobald der
   Inhalt da ist. Deshalb braucht es kein JavaScript, und die Werte muessen bei
   Textaenderungen im Admin-Bereich nicht nachgepflegt werden - sie sind nur eine
   Schaetzung fuer die Ladephase. Gemessen bei 1440px, 768px und 375px Fensterbreite. */
@media (min-width: 861px) {
  #dienstleistungen-rechner:empty { min-height: 478px; }
  #dienstleistungen-webdesign-head:empty { min-height: 129px; }
  #dienstleistungen-webdesign-price:empty { min-height: 133px; }
  #dienstleistungen-webdesign-tax:empty { min-height: 20px; }
  #dienstleistungen-templates-head:empty { min-height: 116px; }
  #dienstleistungen-templates-list:empty { min-height: 730px; }
  #dienstleistungen-templates-care:empty { min-height: 354px; }
  #dienstleistungen-video-head:empty { min-height: 116px; }
  #dienstleistungen-video-packages:empty { min-height: 198px; }
  #dienstleistungen-video-scope:empty { min-height: 266px; }
  #dienstleistungen-video-note:empty { min-height: 82px; }
  #garage-hero:empty { min-height: 182px; }
  #garage-project-intro:empty { min-height: 174px; }
  #garage-stats:empty { min-height: 99px; }
  #werdegang-intro:empty { min-height: 235px; }
  #werdegang-facts:empty { min-height: 172px; }
  #werdegang-timeline:empty { min-height: 3500px; }
  #shop-grid:has(> [data-laedt]) { min-height: 520px; }
  #garage-reise:empty { min-height: 10600px; }
}
@media (max-width: 860px) {
  #dienstleistungen-rechner:empty { min-height: 648px; }
  #dienstleistungen-webdesign-head:empty { min-height: 133px; }
  #dienstleistungen-webdesign-price:empty { min-height: 187px; }
  #dienstleistungen-webdesign-tax:empty { min-height: 20px; }
  #dienstleistungen-templates-head:empty { min-height: 125px; }
  #dienstleistungen-templates-list:empty { min-height: 1042px; }
  #dienstleistungen-templates-care:empty { min-height: 354px; }
  #dienstleistungen-video-head:empty { min-height: 125px; }
  #dienstleistungen-video-packages:empty { min-height: 217px; }
  #dienstleistungen-video-scope:empty { min-height: 266px; }
  #dienstleistungen-video-note:empty { min-height: 127px; }
  #garage-hero:empty { min-height: 164px; }
  #garage-project-intro:empty { min-height: 183px; }
  #garage-stats:empty { min-height: 218px; }
  #werdegang-intro:empty { min-height: 251px; }
  #werdegang-facts:empty { min-height: 315px; }
  #werdegang-timeline:empty { min-height: 2640px; }
  #shop-grid:has(> [data-laedt]) { min-height: 515px; }
  #garage-reise:empty { min-height: 10700px; }
}
@media (max-width: 560px) {
  #dienstleistungen-rechner:empty { min-height: 964px; }
  #dienstleistungen-webdesign-head:empty { min-height: 214px; }
  #dienstleistungen-webdesign-price:empty { min-height: 323px; }
  #dienstleistungen-webdesign-tax:empty { min-height: 41px; }
  #dienstleistungen-templates-head:empty { min-height: 237px; }
  #dienstleistungen-templates-list:empty { min-height: 2157px; }
  #dienstleistungen-templates-care:empty { min-height: 600px; }
  #dienstleistungen-video-head:empty { min-height: 237px; }
  #dienstleistungen-video-packages:empty { min-height: 535px; }
  #dienstleistungen-video-scope:empty { min-height: 360px; }
  #dienstleistungen-video-note:empty { min-height: 239px; }
  #garage-hero:empty { min-height: 253px; }
  #garage-project-intro:empty { min-height: 292px; }
  #garage-stats:empty { min-height: 218px; }
  #werdegang-intro:empty { min-height: 608px; }
  #werdegang-facts:empty { min-height: 510px; }
  #werdegang-timeline:empty { min-height: 3190px; }
  #garage-reise:empty { min-height: 14900px; }
}

/* Der Shop braucht eine eigene Grenze: .shop-grid wechselt bei 531px von zwei Spalten auf
   eine (auto-fill, minmax(230px, 1fr), 24px Abstand) - nicht bei den 560px der uebrigen
   Reservierungen. Einspaltig werden die Karten umso hoeher, je schmaler das Fenster ist:
   nachgemessen 1079px bei 320px und 1379px bei 530px, also rund 1,43px Hoehe je Pixel
   Breite. Ein fester Wert laege an den Raendern um 300px daneben - und zu VIEL reservierter
   Platz ist derselbe Sprung wie zu wenig, nur in die andere Richtung.
   Die Werte gelten fuer zwei Produkte. Kommen welche dazu, hier neu ausmessen. */
@media (max-width: 531px) {
  #shop-grid:has(> [data-laedt]) { min-height: calc(1079px + (100vw - 320px) * 1.43); }
}

/* ---------- Startseite: Vorhang, Sternenhimmel und Sternbilder ----------
   Vor der eigentlichen Startseite liegt ein bildschirmhoher Vorhang. Die Partikel-Leinwand
   (#partikel, weiter oben fuer "Über mich" definiert) baut daraus das Wort DAVEONDUTY, das
   beim Weiterscrollen zu einem Sternenhimmel zerfaellt. Die Mechanik steckt in main.js
   (partikelStarten). Alles haengt an .startseite, damit die Stapel-Reihenfolge keine andere
   Seite beruehrt - der Kopf bleibt ueberall sticky, weil .site-header hoeher gewichtet ist. */
.startseite > main,
.startseite > footer { position: relative; z-index: 1; }

/* Die Gaestebuch-Kommentare haben auf der Startseite zwei Auftritte: Im Vorhang stehen sie
   hell und lesbar, mit dem Wort werden sie weggeblasen - und sobald der Vorhang durch ist,
   kommen sie als leise Hintergrunddeko ueber die ganze Seite zurueck. Dafuer braucht es beide
   Werte aus der Partikel-Schleife: --zerfall fuers Wegblasen, --ausblenden dafuer, ob der
   Vorhang ueberhaupt noch im Bild ist. */
.startseite .floating-comments {
  z-index: 0;
  /* Unsichtbar, bis main.js die Hoehen verteilt hat. Sonst wandern die Kommentare nach dem
     ersten Bild noch einmal - und das zaehlt als Layoutsprung. */
  visibility: hidden;
  opacity: max(calc(1 - var(--zerfall, 0)), calc(0.26 * (1 - var(--ausblenden, 1))));
  transform: scale(calc(1 + var(--zerfall, 0) * 0.45 * var(--ausblenden, 1)));
  filter: blur(calc(var(--zerfall, 0) * 5px * var(--ausblenden, 1)));
  transition: opacity 0.35s linear, transform 0.35s ease-out, filter 0.35s ease-out;
}
/* Grundhelligkeit je Kommentar - die Abstufung erhaelt den Tiefeneindruck. main.js setzt die
   Deckkraft direkt am Element, deshalb braucht es hier !important. */
.startseite .floating-comments.ist-da { visibility: visible; }
.startseite .floating-comment { opacity: 0.62 !important; }
.startseite .floating-comment:nth-child(3n) { opacity: 0.8 !important; }
.startseite .floating-comment:nth-child(4n) { opacity: 0.5 !important; }

.start-vorhang {
  position: relative;
  /* svh statt vh: Auf dem Handy ist 100vh die Hoehe OHNE Adressleiste - der Vorhang waere
     also hoeher als das, was man sieht, und unter der Leiste laege ein toter Streifen.
     100svh ist genau der sichtbare Bereich. vh bleibt als Rueckfall fuer alte Browser. */
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: end center;
  padding-bottom: 8vh;
}
.vorhang-hinweis {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin: 0;
  animation: vorhang-wink 2.4s ease-in-out infinite;
}
@keyframes vorhang-wink {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .vorhang-hinweis { animation: none; opacity: 0.6; }
}

/* Einladung ins Gaestebuch, direkt unter dem Partikelwort im Vorhang. Sie greift die
   Handschrift der schwebenden Kommentare auf - so wirkt sie wie einer von ihnen, der stehen
   geblieben ist, und nicht wie ein weiterer Button. Deshalb bewusst kein Rahmen und keine
   Flaeche.
   Positioniert wird sie absolut an der Unterkante des Wortes: main.js meldet die in
   --wortband-unten, weil sie von der Fensterhoehe abhaengt und davon, ob das Wort ein- oder
   zweizeilig steht. Absolut heisst auch: Rueckt sie nach, ist das kein Layoutsprung. */
.start-vorhang .komm-einladung {
  position: absolute;
  left: 50%;
  top: calc(var(--wortband-unten, 48%) - var(--kopf-h, 0px) + 3.2vh);
  /* Mit dem Wort zusammen wegblasen - sonst bliebe die Zeile allein im Bild stehen, waehrend
     die Buchstaben hinter ihr auseinanderfliegen. */
  opacity: calc(1 - var(--zerfall, 0) * 1.8);
  filter: blur(calc(var(--zerfall, 0) * 4px));
}
.start-vorhang .komm-einladung,
.start-vorhang .komm-einladung:hover,
.start-vorhang .komm-einladung:focus-visible {
  transform: translateX(-50%) rotate(-1.4deg);
}
.start-vorhang .komm-einladung:hover,
.start-vorhang .komm-einladung:focus-visible { transform: translateX(-50%) rotate(0deg); }

.komm-einladung {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.6;
  /* Leicht schief wie handgeschrieben - im Ruhezustand, nicht im Hover. Beim Anfassen
     richtet sie sich auf, als wuerde man das Blatt geradeziehen. */
  transform: rotate(-1.4deg);
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
/* Der Strich darunter wird beim Anfassen von links nach rechts gezogen - dieselbe Geste wie
   die Konturlinien auf Werdegang und Garage. */
.komm-einladung::after {
  content: '';
  position: absolute;
  left: 40px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.komm-einladung-stift {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.komm-einladung-stift svg { width: 100%; height: 100%; }
.komm-einladung:hover,
.komm-einladung:focus-visible {
  color: var(--paper);
  opacity: 1;
  transform: rotate(0deg);
}
.komm-einladung:hover::after,
.komm-einladung:focus-visible::after { transform: scaleX(1); }
.komm-einladung:hover .komm-einladung-stift,
.komm-einladung:focus-visible .komm-einladung-stift { transform: translate(2px, -2px) rotate(-8deg); }
.komm-einladung:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }

/* Auf dem Handy gibt es kein Hover - dort waere der Strich nie zu sehen und die Zeile saehe
   aus wie blosser Text. Deshalb ist sie beim Tippgeraet von vornherein etwas kraeftiger und
   der Strich steht schon da, nur leiser. */
@media (hover: none) {
  .komm-einladung { opacity: 0.8; }
  .komm-einladung::after { transform: scaleX(1); opacity: 0.45; }
}
@media (max-width: 460px) {
  .komm-einladung { gap: 9px; }
  .komm-einladung-stift { width: 17px; height: 17px; }
  .komm-einladung::after { left: 26px; }
}
/* Die Zeile laeuft bewusst einzeilig (zwei Zeilen unter dem Wort wirken wie ein zweiter
   Titel). Auf sehr schmalen Geraeten passt sie dann nur kleiner. */
@media (max-width: 370px) {
  .komm-einladung { font-size: 1.12rem; gap: 7px; }
  .komm-einladung-stift { width: 15px; height: 15px; }
  .komm-einladung::after { left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .komm-einladung,
  .komm-einladung::after,
  .komm-einladung-stift { transition: none; }
  /* Nur die Schraeglage zuruecknehmen - die Zentrierung steckt in derselben
     transform-Eigenschaft und muss bleiben. */
  .start-vorhang .komm-einladung,
  .start-vorhang .komm-einladung:hover,
  .start-vorhang .komm-einladung:focus-visible { transform: translateX(-50%); }
}

/* Merkpunkte fuer die Sternbilder: unsichtbar, ohne Einfluss aufs Layout. Sie sagen nur, WO
   und WIE GROSS eine Figur gezeichnet wird - gezeichnet wird auf der Partikel-Leinwand. Die
   Hoehen sind an den freien Stellen der Seite ausgemessen, damit keine Karte und kein Bild
   die Figur zerschneidet. */
.sternbild-stelle {
  position: absolute;
  pointer-events: none;
  width: var(--stelle-gr, 270px);
  height: var(--stelle-gr, 270px);
  top: var(--stelle-oben, 10%);
}
.sternbild-links { left: 2.5vw; }
.sternbild-rechts { right: 2.5vw; }
/* Auf schmalen Bildschirmen gibt es keinen freien Rand mehr. Statt die Figuren dort
   wegzulassen, stehen sie mittig und mit eigener Hoehe (--stelle-oben-schmal) in der Luecke
   zwischen zwei Abschnitten - main.js haelt sie dort zusaetzlich leiser und laesst
   Beschriftung und Rahmen weg, damit der Text lesbar bleibt. */
@media (max-width: 1100px) {
  .sternbild-stelle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--stelle-gr-schmal, min(70vw, 260px));
    height: var(--stelle-gr-schmal, min(70vw, 260px));
    top: var(--stelle-oben-schmal, var(--stelle-oben, 10%));
  }
}

/* ---------- Werdegang als Reise ----------
   Die Stationen sind eigene Kapitel. Der Grundton der Seite bleibt dabei UNVERAENDERT - ein
   erster Versuch mit einer eigenen Farbe je Station war zu unruhig. Den Rhythmus macht
   stattdessen die Typografie, so wie auf daqconsulting.com: Die Ueberschrift steht zuerst nur
   als Kontur da und wird beim Scrollen mit einem schraegen Wisch weiss ausgefuellt.

   Technisch zwei Ebenen uebereinander: unten die hohlen Buchstaben (text-stroke, Text
   durchsichtig), darueber derselbe Text gefuellt, freigelegt von einer Maske. Wie weit die
   Maske offen ist, steht in --wisch (0 bis 1) und kommt aus der Scrollposition - gerechnet
   wird nur diese eine Zahl je Station, den Rest macht der Browser. */
/* Frueher min-height 56vh mit mittig gesetztem Text - kurze Stationen hatten dadurch riesige
   Leerflaechen, und der Punkt der Zeitleiste (oben an der Station) stand weit weg von seiner
   Ueberschrift. Der Wisch haengt nur an der Oberkante der Station, nicht an ihrer Hoehe. */
.wd-station { padding-bottom: 72px; }

/* Die Marke der Station: Nummer und Zeitraum, einzeilig in der Monospace - dieselbe Sprache
   wie die Abschnittsmarken auf der uebrigen Seite. */
.timeline-reise .timeline-date {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.wd-nummer { color: var(--muted); }
.wd-nummer::after {
  content: ' / ';
  color: var(--line);
}

/* Die grosse Ueberschrift. Zwei Schriftschnitte in einer Zeile waeren zu viel Aufwand fuer
   den Gewinn - hier macht es die Groesse allein. */
.timeline-reise .timeline-item h3 {
  font-size: clamp(1.45rem, 3.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 24ch;
  margin-bottom: 20px;
}
.wd-titel { position: relative; display: block; }
/* Ebene 1: nur die Konturen. */
.wd-titel-kontur {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 244, 242, 0.28);
}
/* Ebene 2: der gefuellte Text darueber, freigelegt von einer schraegen Maske. Bei --wisch 0
   liegen beide Farbstopps vor dem Text (nichts sichtbar), bei 1 dahinter (alles sichtbar).
   Die 12 Prozent Abstand zwischen den Stopps sind die weiche Kante des Wischs. */
.wd-titel-fuell {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--paper);
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--wisch, 0) * 132% - 22%), transparent calc(var(--wisch, 0) * 132% - 10%));
  mask-image: linear-gradient(100deg, #000 calc(var(--wisch, 0) * 132% - 22%), transparent calc(var(--wisch, 0) * 132% - 10%));
}

/* Der Lesetext bleibt ruhig und auf Lesebreite - vorher lief er ueber die ganzen 1100 Pixel. */
.timeline-reise .timeline-item p { max-width: 60ch; }

/* Der Punkt der aktuellen Station leuchtet. */
.timeline-reise .timeline-item::before {
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
}
.timeline-reise .timeline-item.ist-aktiv::before {
  background: var(--cyan);
  box-shadow: 0 0 0 3px var(--ink), 0 0 18px rgba(51, 230, 224, 0.8);
}

@media (max-width: 900px) {
  .wd-station { padding-bottom: 52px; }
  .timeline-reise .timeline-item h3 { max-width: none; }
  /* Auf dem Handy ist die Kontur bei 1px auf kleiner Schrift kaum zu sehen und macht die
     Ueberschrift nur unruhig - dort etwas praesenter. */
  .wd-titel-kontur { -webkit-text-stroke-color: rgba(244, 244, 242, 0.38); }
}

/* Ohne Wisch-Animation: Die Ueberschrift steht einfach da. */
@media (prefers-reduced-motion: reduce) {
  .wd-titel-fuell {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Links im Fliesstext ----------
   Ein Link mitten im Absatz darf nicht allein an der Farbe erkennbar sein (WCAG 1.4.1) -
   wer Farben schlecht unterscheidet, sieht ihn sonst nicht. Buttons und Navigation sind
   davon ausgenommen, die sind durch ihre Form schon als bedienbar erkennbar. */
p a:not(.btn):not(.btn-outline),
.p-lesetext a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* ---------- Cockpit: der Flugplan ----------
   Eine Etappenliste in der Sprache der Seite: Nummer und Zustand in der Monospace, die
   Überschrift zuerst als Kontur und beim Scrollen ausgefüllt (siehe Werdegang, dieselbe
   Mechanik in main.js). Die senkrechte Linie links verbindet die Etappen zu einer Route. */
.flugplan {
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  border-left: 2px solid var(--line);
  max-width: 760px;
}
.flugplan-etappe {
  position: relative;
  padding: 0 0 52px;
}
.flugplan-etappe:last-child { padding-bottom: 0; }
/* Der Punkt auf der Route. Erledigt = Gelb wie die übrigen erledigten Marken der Seite,
   laufend = Cyan und leuchtend, offen = nur ein Umriss. */
.flugplan-etappe::before {
  content: '';
  position: absolute;
  left: -42px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 4px var(--ink);
}
.flugplan-etappe.ist-erledigt::before {
  background: var(--yellow);
  border-color: var(--yellow);
}
.flugplan-etappe.ist-unterwegs::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--ink), 0 0 16px rgba(51, 230, 224, 0.7);
}

.flugplan-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.flugplan-nummer { color: var(--muted); }
.flugplan-nummer::after { content: ' /'; color: var(--line); }
/* Der Zustand als kleine Plakette - die Farbe sagt dasselbe wie das Wort darin, damit es
   auch ohne Farbwahrnehmung lesbar bleibt. */
.flugplan-zustand {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--muted);
  letter-spacing: 0.14em;
}
.ist-erledigt .flugplan-zustand { border-color: var(--yellow-dim); color: var(--yellow); }
.ist-unterwegs .flugplan-zustand { border-color: var(--cyan); color: var(--cyan); }
.flugplan-termin { color: var(--muted); margin-left: auto; }

.flugplan-etappe h3 {
  font-size: clamp(1.35rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.flugplan-etappe p {
  color: var(--muted);
  max-width: 58ch;
  margin: 0;
}
/* Noch offene Etappen treten zurück - man sieht auf einen Blick, wo die Reise gerade steht. */
.flugplan-reise .flugplan-etappe.ist-offen p { opacity: 0.75; }

@media (max-width: 700px) {
  .flugplan { padding-left: 24px; }
  .flugplan-etappe { padding-bottom: 40px; }
  .flugplan-etappe::before { left: -32px; }
  .flugplan-termin { margin-left: 0; width: 100%; }
}

/* ---------- Cockpit: DLR-Vorbereitung ----------
   Dieselben Zustandsfarben wie im Flugplan: Gelb = stark/erledigt, Cyan = läuft,
   Umriss = offen. Fortschritt (Cockpit) sowie Modulstand und Logbuch (/cockpit-logbuch)
   baut main.js aus dlr-vorbereitung.json. Grund und Fläche tauschen je nach Sektion,
   damit Karten auf dunklem wie auf hellerem Band abgesetzt bleiben. */
.dlr { --dlr-grund: var(--ink); --dlr-flaeche: var(--panel); }
.section-alt.dlr { --dlr-grund: var(--panel); --dlr-flaeche: var(--ink); }
.dlr .section-head { max-width: 760px; }
.dlr-lead { line-height: 1.7; }
.dlr-leer { color: var(--muted); font-size: 0.95rem; }

/* Der Weg: vier Schritte nebeneinander auf einer durchgehenden, neutralen Linie. Bewusst ohne
   farbiges Teilstück: Das sah wie ein Fortschrittsbalken aus. Wo ich stehe, zeigt nur der Punkt. */
.dlr-weg {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.dlr-weg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.dlr-schritt {
  position: relative;
  padding-top: 28px;
}
.dlr-schritt::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dlr-grund);
  border: 2px solid var(--line);
}
.dlr-schritt.ist-unterwegs::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(51, 230, 224, 0.7);
}
.dlr-schritt-nummer,
.dlr-schritt-ziel {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlr-schritt.ist-unterwegs .dlr-schritt-nummer { color: var(--cyan); }
.dlr-schritt h3 { font-size: 1.1rem; margin: 8px 0 6px; }
.dlr-schritt p { color: var(--muted); font-size: 0.93rem; margin: 0 0 10px; }
.dlr-schritt-ziel { color: var(--paper); letter-spacing: 0.08em; }

.dlr-werkzeug {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}
.dlr-werkzeug span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-right: 8px;
}

/* Fortschritt: die Flugbahn vom Start bis zum Test, "heute" sitzt als Flieger darauf. */
.dlr-flugbahn { margin: 8px 0 32px; }
.dlr-flugbahn-linie {
  position: relative;
  height: 2px;
  margin: 22px 12px 0;
  background-image: linear-gradient(to right, var(--line) 50%, transparent 50%);
  background-size: 10px 2px;
}
.dlr-flugbahn-flug {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(51, 230, 224, 0.6);
}
.dlr-flugbahn-punkt {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--dlr-grund);
}
.dlr-flugbahn-heute {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: var(--cyan);
  background: var(--dlr-grund);
  border-radius: 50%;
}
.dlr-flugbahn-heute svg { width: 100%; height: 100%; display: block; }
/* Der Endpunkt: das Ziel als offener Ring. */
.dlr-flugbahn-linie::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--dlr-grund);
}
.dlr-flugbahn-enden {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}
.dlr-flugbahn-enden span:last-child { text-align: right; color: var(--paper); }

.dlr-kennzahlen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dlr-kennzahlen li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--dlr-flaeche);
  border: 1px solid var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.dlr-kennzahlen strong {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--paper);
}
.dlr-kennzahlen span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlr-kennzahlen .dlr-segmente { margin-top: 6px; }
.dlr-zuletzt {
  margin: 20px 0 24px;
  color: var(--muted);
  font-size: 0.95rem;
}
.dlr-zuletzt > span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-right: 8px;
}
.dlr-zuletzt strong { color: var(--paper); font-weight: 600; }
.dlr-zuletzt a { color: var(--yellow); text-underline-offset: 3px; }
.dlr-zuletzt a:hover { color: var(--cyan); }
.dlr-logbuch + .dlr-zuletzt { margin-top: 48px; }

/* Werkzeug und Kosten: eine Zeile je Posten, Preis rechts, darunter die Summen. */
.dlr-kosten {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dlr-kosten-eintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.dlr-kosten-text h3 { font-size: 1.05rem; margin: 0 0 4px; }
.dlr-kosten-text p { color: var(--muted); font-size: 0.92rem; margin: 0 0 6px; max-width: 70ch; }
.dlr-kosten-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--yellow);
  text-decoration: none;
}
.dlr-kosten-link:hover { color: var(--cyan); }
.dlr-kosten-preis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.dlr-kosten-preis strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
}
.dlr-kosten-preis .dlr-plakette { align-self: flex-end; }
.ist-bezahlt .dlr-plakette { border-color: var(--yellow-dim); color: var(--yellow); }
.ist-geplant .dlr-plakette { border-color: var(--cyan); color: var(--cyan); }
.ist-ausgelassen .dlr-kosten-preis strong { color: var(--muted); }
.dlr-kosten-summe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 40px;
  padding-top: 18px;
}
.dlr-kosten-summe div { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dlr-kosten-summe span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlr-kosten-summe strong { font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: var(--yellow); }
.dlr-kosten-summe div + div strong { color: var(--paper); }
.dlr-kosten-stand { margin: 14px 0 0; text-align: right; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 600px) {
  .dlr-kosten-eintrag { grid-template-columns: 1fr; }
  .dlr-kosten-preis { flex-direction: row; align-items: center; justify-content: space-between; }
  .dlr-kosten-summe { justify-content: space-between; }
  .dlr-kosten-summe div:first-child { align-items: flex-start; }
  .dlr-kosten-stand { text-align: left; }
}

/* Übersichtsleiste und Segmente (Kennzahl "Module" und Detailseite). */
.dlr-uebersicht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dlr-stand-datum { color: var(--paper); }
.dlr-segmente { display: flex; gap: 4px; }
.dlr-segmente span {
  flex: 0 0 auto;
  width: 22px;
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.dlr-kennzahlen .dlr-segmente span { width: auto; flex: 1; }
.dlr-segmente .ist-stark { background: var(--yellow); border-color: var(--yellow); }
.dlr-segmente .ist-in-arbeit { background: var(--cyan); border-color: var(--cyan); }
.dlr-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); }
.dlr-legende-eintrag::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.dlr-legende-eintrag.ist-stark::before { background: var(--yellow); border-color: var(--yellow); }
.dlr-legende-eintrag.ist-in-arbeit::before { background: var(--cyan); border-color: var(--cyan); }

/* Detailseite: eine Karte je Modul. */
.dlr-module {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.dlr-modul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--dlr-flaeche);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  padding: 20px;
}
.dlr-modul.ist-stark { border-top-color: var(--yellow); }
.dlr-modul.ist-in-arbeit { border-top-color: var(--cyan); }
.dlr-modul.ist-offen { background: transparent; border-style: dashed; border-top-style: solid; }
.dlr-modul h3 { font-size: 1.02rem; margin: 0; line-height: 1.25; }
.dlr-modul-untertitel {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}
.dlr-modul p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.dlr-modul.ist-offen p { opacity: 0.8; }

/* Die Plakette wie im Flugplan: Farbe und Wort sagen dasselbe. */
.dlr-plakette {
  flex-shrink: 0;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
}
.ist-stark .dlr-plakette { border-color: var(--yellow-dim); color: var(--yellow); }
.ist-in-arbeit .dlr-plakette { border-color: var(--cyan); color: var(--cyan); }

/* Ein Trainingswert als Balken, die Referenz als senkrechter Strich. */
.dlr-messung { margin-top: auto; padding-top: 6px; }
.dlr-messung-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.dlr-messung-kopf strong { font-family: var(--font-mono); color: var(--paper); font-size: 0.9rem; }
.dlr-balken {
  position: relative;
  height: 6px;
  background: var(--panel-raised);
  border-radius: 3px;
}
.dlr-balken-wert {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--cyan);
}
.ist-stark .dlr-balken-wert { background: var(--yellow); }
.dlr-balken-referenz {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
}
.dlr-messung-fuss {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dlr-hinweis {
  max-width: 76ch;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--yellow-dim);
  color: var(--muted);
  font-size: 0.88rem;
}
.dlr-zurueck {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.dlr-zurueck:hover { color: var(--yellow); }

/* Logbuch: die schlichte Timeline vom Werdegang, "Als Nächstes" als offener Ring. */
.dlr-logbuch { max-width: 760px; }
.dlr-logbuch .timeline-item::before { box-shadow: 0 0 0 3px var(--dlr-grund), 0 0 8px rgba(245,224,0,0.5); }
.dlr-logbuch .dlr-naechstes::before {
  background: var(--dlr-grund);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 3px var(--dlr-grund);
}
.dlr-logbuch .timeline-item h3 { font-size: 1.15rem; margin-bottom: 8px; }
.dlr-punkte {
  list-style: square;
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.95rem;
}
.dlr-punkte li { margin-bottom: 4px; padding-left: 2px; }
.dlr-punkte li::marker { color: var(--yellow-dim); }
.dlr-naechstes .dlr-punkte li::marker { color: var(--cyan); }

/* Du willst das auch? Links die Einladung, rechts was es geben wird. */
.dlr-mitmachen {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.dlr-mitmachen > div > p { color: var(--muted); max-width: 52ch; margin-bottom: 24px; }
.dlr-material {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.dlr-material li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 18px 20px;
  border: 1px dashed var(--line);
}
.dlr-material h3 { grid-column: 1; grid-row: 1; font-size: 1.02rem; margin: 0; }
.dlr-material p { grid-column: 1; color: var(--muted); font-size: 0.9rem; margin: 0; }
.dlr-material .dlr-plakette { grid-column: 2; grid-row: 1; justify-self: start; border-color: var(--yellow-dim); color: var(--yellow); }

@media (max-width: 900px) {
  .dlr-weg { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  /* Mehrzeilig trägt jeder Schritt seine eigene Linie, weiterhin neutral. */
  .dlr-weg::before { content: none; }
  .dlr-schritt { border-top: 2px solid var(--line); padding-top: 26px; }
  .dlr-schritt::before { top: -7px; }
  .dlr-kennzahlen { grid-template-columns: 1fr 1fr; }
  .dlr-mitmachen { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .dlr-weg { grid-template-columns: 1fr; }
  .dlr-kennzahlen li { padding: 16px; }
  .dlr-material li { grid-template-columns: 1fr; }
  .dlr-material .dlr-plakette { grid-column: 1; grid-row: auto; }
  .dlr-material h3 { grid-row: auto; }
}

/* ==========================================================================
   Content-Tracker (Adminbereich)
   Eigener Namensraum tr-*, damit nichts von den bestehenden Admin-Klassen
   ueberschrieben wird. Farben und Abstaende kommen aus denselben Variablen wie
   der restliche Adminbereich.
   ========================================================================== */

/* ---------- Statistik-Kacheln ---------- */
.tr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tr-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.tr-stat-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.tr-stat-wert { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--yellow); line-height: 1.2; margin-top: 4px; }
.tr-top-liste { list-style: none; margin: 0; padding: 0; }
.tr-top-liste li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.tr-top-liste li:last-child { border-bottom: none; }
.tr-top-titel { color: var(--paper); min-width: 0; overflow-wrap: anywhere; }
.tr-top-views { font-family: var(--font-mono); color: var(--cyan); font-size: 0.85rem; flex: none; }

/* ---------- Filterleiste ---------- */
.tr-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.tr-filter[hidden] { display: none; }
/* Filter-Knopf rechts in der Reiterleiste, Punkt zeigt einen aktiven Filter an. */
.tr-filter-knopf {
  position: relative; margin-left: auto; flex: none; align-self: center; width: 40px; height: 36px;
  display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.tr-filter-knopf:hover, .tr-filter-knopf[aria-expanded="true"] { color: var(--cyan); border-color: var(--line); }
.tr-filter-knopf svg { width: 18px; height: 18px; }
.tr-filter-punkt { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.tr-filter-feld { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.tr-filter-feld label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.tr-filter select, .tr-feld select, .tr-feld input, .tr-feld textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 6px;
}
.tr-filter select:focus, .tr-feld select:focus, .tr-feld input:focus, .tr-feld textarea:focus {
  outline: none; border-color: var(--cyan);
}
.tr-filter-reset { align-self: flex-end; }

/* ---------- Ansichtsumschalter Liste / Woche ---------- */
/* Vier Reiter passen auf dem Handy nicht nebeneinander: die Leiste scrollt dann seitlich,
   ohne sichtbaren Balken. */
.tr-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
}
.tr-tabs::-webkit-scrollbar { display: none; }
.tr-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem;
  padding: 10px 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.tr-tab-zahl { font-size: 0.72rem; opacity: 0.7; margin-left: 2px; }
.tr-tab-zahl:empty { display: none; }
@media (max-width: 520px) { .tr-tab { padding: 10px 9px; font-size: 0.8rem; } }
.tr-tab:hover { color: var(--paper); }
.tr-tab[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.tr-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* ---------- Ein Video in der Liste ---------- */
.tr-karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
}
/* Zugeklappte Karte: eine Zeile mit Termin, Titel und Dateistand. */
.tr-karte-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px;
  background: none; border: none; color: var(--paper); text-align: left; cursor: pointer; font: inherit;
}
.tr-karte-zeile:hover .tr-kurz-titel { color: var(--cyan); }
.tr-kurz-termin { flex: none; width: 74px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.tr-kurz-titel { flex: 1; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-kurz-datei { flex: none; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.tr-kurz-datei[data-art="da"] { color: var(--cyan); }
.tr-kurz-datei[data-art="fehlt"] { color: #ff8a8a; }
.tr-kurz-pfeil { flex: none; color: var(--muted); font-size: 1.2rem; line-height: 1; transition: transform 0.15s; }
.tr-karte.ist-offen .tr-kurz-pfeil { transform: rotate(90deg); }
.tr-karte-mehr { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.tr-karte-mehr .tr-karte-kopf { padding-top: 12px; }
/* Aufgeklappte Karte: eine Textzeile, dann je Video/Plattform eine Zeile, unten "Bearbeiten". */
.tr-meta { margin: 12px 0 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); line-height: 1.6; }
.tr-meta a { color: var(--muted); }
.tr-meta a:hover { color: var(--cyan); }
.tr-karte-mehr .tr-karte-notiz { margin-top: 6px; }
.tr-zeilen { margin-top: 12px; border-top: 1px solid var(--line); }
.tr-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tr-zeile-name { flex: none; width: 110px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--paper); }
.tr-zeile-stand { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--cyan); }
.tr-zeile-stand[data-art="live"] { color: var(--yellow); }
.tr-zeile-stand[data-art="zutun"] { color: var(--yellow); }
.tr-zeile-stand[data-art="fehler"] { color: #ff8a8a; }
.tr-zeile-stand[data-art="leer"] { color: var(--muted); }
.tr-zeile-knoepfe { flex: none; display: flex; gap: 6px; }
.tr-zeile-knoepfe:empty { display: none; }
.tr-zeile-knoepfe .tr-kopieren { display: inline-flex; align-items: center; text-decoration: none; min-height: 36px; }
.tr-karte-fuss { display: flex; justify-content: flex-end; margin-top: 14px; }
.tr-karte-fuss .btn { text-decoration: none; padding: 10px 18px; font-size: 0.82rem; }
@media (max-width: 560px) {
  /* Name und Stand oben, Knöpfe darunter über die volle Breite - so bleiben sie gut zu treffen. */
  .tr-zeile { flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; }
  .tr-zeile-name { width: auto; }
  .tr-zeile-knoepfe { flex-basis: 100%; }
  .tr-zeile-knoepfe > * { flex: 1; text-align: center; justify-content: center; }
  .tr-karte-fuss .btn { flex: 1; justify-content: center; }
}
.tr-karte[data-status="geplant"] { border-left-color: var(--cyan); }
.tr-karte[data-status="live"] { border-left-color: var(--yellow); }
.tr-karte-kopf { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.tr-karte-titel { font-family: var(--font-head); font-weight: 600; color: var(--paper); font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.tr-karte-titel a { color: inherit; text-decoration: none; }
.tr-karte-titel a:hover { color: var(--cyan); }
.tr-karte-notiz { color: var(--muted); font-size: 0.88rem; margin: 6px 0 0; overflow-wrap: anywhere; }
.tr-karte-aktionen { display: flex; gap: 8px; flex: none; }

.tr-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tr-marke {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--muted);
}
.tr-marke-status[data-status="geplant"] { border-color: rgba(51,230,224,0.5); color: var(--cyan); }
.tr-marke-status[data-status="live"] { border-color: rgba(245,224,0,0.5); color: var(--yellow); }
.tr-marke-repost { border-color: rgba(51,230,224,0.35); color: var(--cyan); }

/* ---------- Plattform-Zeilen innerhalb einer Karte ---------- */
.tr-plattformen { margin-top: 12px; border-top: 1px solid var(--line); }
.tr-plattform {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.tr-plattform:last-child { border-bottom: none; }
.tr-plattform-name { font-family: var(--font-mono); font-size: 0.78rem; color: var(--paper); min-width: 118px; }
.tr-plattform-termin { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.tr-plattform-termin.ist-faellig { color: #ff8a8a; }
.tr-plattform-live { font-family: var(--font-mono); font-size: 0.72rem; color: var(--yellow); }
.tr-plattform-views { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cyan); }
.tr-plattform-aktionen { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

/* ---------- Kopier-Knopf ---------- */
.tr-kopieren {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  /* Auf dem iPhone ist eine Schaltflaeche unter 32px kaum zu treffen. */
  min-height: 32px;
}
.tr-kopieren:hover { border-color: var(--cyan); color: var(--cyan); }
.tr-kopieren:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tr-kopieren.ist-kopiert { border-color: var(--yellow); color: var(--yellow); }

/* ---------- Wochenansicht ---------- */
.tr-wochenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tr-wochenkopf h3 { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--paper); font-weight: 400; }
/* Umbrechen erlaubt: Ohne flex-wrap bestimmt die Summe der drei Knopfbreiten die
   Mindestbreite der ganzen Admin-Spalte - auf dem Handy schob das die komplette Seite
   um 32px nach rechts. */
.tr-wochenblaettern { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tr-tag {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  min-height: 130px;
}
.tr-tag.ist-heute { border-color: var(--cyan); }
.tr-tag-kopf { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; }
.tr-tag.ist-heute .tr-tag-kopf { color: var(--cyan); }
.tr-tag-post {
  display: block;
  background: var(--ink);
  border-left: 2px solid var(--cyan);
  border-radius: 3px;
  padding: 6px 8px;
  margin-bottom: 6px;
  color: var(--paper);
  text-decoration: none;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.tr-tag-post:hover { border-left-color: var(--yellow); }
.tr-tag-post[data-published="1"] { opacity: 0.6; border-left-color: var(--yellow); }
.tr-tag-zeit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); display: block; }
.tr-tag-plattform { font-family: var(--font-mono); font-size: 0.66rem; color: var(--cyan); display: block; margin-top: 2px; }

/* ---------- Formular ---------- */
.tr-feld { margin-bottom: 18px; }
.tr-feld label { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.tr-feld textarea { min-height: 90px; resize: vertical; }
.tr-feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-feld-hinweis { font-size: 0.78rem; color: var(--muted); margin: 5px 0 0; }
.tr-zaehler { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.tr-zaehler.ist-zuviel { color: #ff8a8a; }

.tr-plattform-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.tr-plattform-block > summary {
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.tr-plattform-block > summary::-webkit-details-marker { display: none; }
.tr-plattform-block > summary::before {
  content: '▸'; color: var(--cyan); transition: transform 0.2s ease; display: inline-block;
}
.tr-plattform-block[open] > summary::before { transform: rotate(90deg); }
.tr-plattform-block > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.tr-plattform-block-inhalt { padding: 0 16px 16px; }
.tr-block-marke { font-family: var(--font-mono); font-size: 0.68rem; color: var(--cyan); margin-left: auto; }

.tr-feld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tr-haken { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.tr-haken input { accent-color: var(--cyan); width: 18px; height: 18px; flex: none; }
.tr-haken label { margin: 0; text-transform: none; font-size: 0.9rem; font-family: var(--font-body); color: var(--paper); letter-spacing: 0; }

.tr-formular-fuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Kalender-Link ---------- */
.tr-ical { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.tr-ical-url {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  word-break: break-all; background: var(--ink); padding: 10px 12px; border-radius: 4px;
  margin: 10px 0; display: block;
}
.tr-ical-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-ical-titel { font-family: var(--font-mono); font-size: 0.95rem; margin: 0 0 10px; }
.tr-auto-upload::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); display: inline-block; margin-right: 8px; }

/* ---------- JSON-Import ---------- */
.tr-import { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 20px; }
.tr-import h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.05rem; color: var(--paper); }
.tr-import .tr-feld textarea { min-height: 220px; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; }
.tr-import-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tr-import-zusammenfassung { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin: 18px 0 12px; }
.tr-import-zusammenfassung strong { color: var(--paper); font-weight: 400; }
.tr-import-zusammenfassung .ist-fehler { color: #ff8a8a; }
.tr-karte.ist-importfehler { border-left-color: #ff8a8a; }
.tr-import-nr { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-right: 6px; }
.tr-import-fehler { color: #ff8a8a; font-family: var(--font-mono); font-size: 0.8rem; margin: 8px 0 0; }
.tr-import-hinweise { list-style: none; margin: 8px 0 0; padding: 0; }
.tr-import-hinweise li { color: var(--yellow); font-family: var(--font-mono); font-size: 0.75rem; margin-top: 3px; }
.tr-import-hinweise li::before { content: '! '; }
.tr-import-text {
  flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--muted); font-size: 0.82rem; margin: 0;
}
.tr-import-text b { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; color: var(--paper); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }

/* ---------- Throwback-Zeile (Reposts) ---------- */
.tr-throwback { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 6px; padding: 14px 16px; margin-bottom: 18px; }
.tr-throwback-titel { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.tr-throwback-vorschau { color: var(--paper); font-size: 0.95rem; margin: 10px 0 6px; overflow-wrap: anywhere; }

/* ---------- Auto-Upload ---------- */
.tr-plattform-auto { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--cyan); border: 1px solid rgba(51,230,224,0.35); border-radius: 3px; padding: 2px 7px; }
.tr-plattform-auto[data-art="entwurf"] { color: var(--yellow); border-color: rgba(245,224,0,0.5); }
.tr-plattform-auto[data-art="fehler"] { color: #ff8a8a; border-color: rgba(255,138,138,0.5); }

.tr-auto-hinweis { margin: 0 0 12px 27px; }
.tr-upload-status {
  background: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 16px; font-size: 0.82rem; color: var(--muted);
  line-height: 1.55; overflow-wrap: anywhere;
}
.tr-upload-status strong { font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; color: var(--cyan); }
.tr-upload-status strong[data-art="entwurf"] { color: var(--yellow); }
.tr-upload-status strong[data-art="fehler"] { color: #ff8a8a; }
.tr-upload-status .admin-edit-btn { margin-top: 8px; }
.tr-upload-warnung { color: var(--yellow); }
.tr-upload-warnung a { color: inherit; }

.tr-datei-info { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); margin: 0 0 12px; }
.tr-datei-info.ist-da { color: var(--cyan); }
.tr-datei-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tr-datei-waehlen { cursor: pointer; }
.tr-datei-waehlen.ist-gesperrt { opacity: 0.5; pointer-events: none; }
.tr-datei-fortschritt { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tr-datei-balken { flex: 1; height: 6px; background: var(--ink); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.tr-datei-balken span { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 0.2s ease; }

.tr-konto {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tr-konto-kopf { min-width: 0; }
.tr-konto-name { font-family: var(--font-head); font-weight: 600; color: var(--paper); margin-right: 10px; }
.tr-konto-zustand { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.tr-konto-zustand.ist-verbunden { color: var(--cyan); }
.tr-konto .tr-feld-hinweis { overflow-wrap: anywhere; }
.tr-konto-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-konto-regeln, .tr-konto-schritte { color: var(--muted); font-size: 0.88rem; line-height: 1.6; padding-left: 20px; margin: 0 0 14px; }
.tr-konto-regeln li, .tr-konto-schritte li { margin-bottom: 8px; }
.tr-konto-regeln b, .tr-konto-schritte b { color: var(--paper); font-weight: 600; }
.tr-konto-schritte code, .tr-konto-regeln code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); overflow-wrap: anywhere; }

/* ---------- Schmale Bildschirme (iPhone) ---------- */
@media (max-width: 760px) {
  .tr-konto-knoepfe { width: 100%; }
  .tr-konto-knoepfe > * { flex: 1; }
  /* Sieben Spalten sind auf dem Handy nicht lesbar - die Woche wird zur Liste,
     leere Tage fallen weg (siehe wocheZeichnen). */
  .tr-woche { grid-template-columns: 1fr; gap: 6px; }
  .tr-tag { min-height: 0; }
  .tr-feld-zeile { grid-template-columns: 1fr; }
  .tr-filter-feld { min-width: 0; flex: 1 1 140px; }
  .tr-karte-kopf { flex-direction: column; }
  .tr-karte-aktionen { width: 100%; }
  .tr-karte-aktionen .admin-edit-btn, .tr-karte-aktionen .admin-delete-btn { flex: 1; }
  .tr-plattform-aktionen { margin-left: 0; width: 100%; }
  .tr-plattform-name { min-width: 100%; }
  /* Auf Touch-Geraeten mit kleiner Schrift zoomt iOS beim Antippen ins Feld hinein,
     sobald die Schrift unter 16px liegt. */
  .tr-feld input, .tr-feld textarea, .tr-feld select, .tr-filter select { font-size: 16px; }
  .tr-import .tr-feld textarea { font-size: 16px; }
  /* Die drei Wochenknoepfe teilen sich eine Zeile, statt sie zu sprengen. */
  .tr-wochenkopf { flex-direction: column; align-items: stretch; }
  .tr-wochenblaettern { width: 100%; }
  .tr-wochenblaettern .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 0.72rem; justify-content: center; }
  /* Statistik: drei kleine Kacheln pro Zeile. Mit 150px Mindestbreite passten nur zwei, die
     dritte stand allein in einer eigenen Zeile - acht Kacheln fuellten so den ganzen Bildschirm. */
  .tr-stat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
  .tr-stat { padding: 10px 12px; }
  .tr-stat-label { font-size: 0.6rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .tr-stat-wert { font-size: 1.35rem; margin-top: 2px; }
}

/* ---------- Rechtsseiten: Muster-Formular und offene Stellen ---------- */
/* Das Muster-Widerrufsformular soll sich sichtbar vom Fliesstext abheben - es ist etwas
   zum Abschreiben, kein Text zum Lesen. */
.legal-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
}
.legal-box p { margin: 0 0 12px; }
.legal-box p:last-child { margin-bottom: 0; }

/* Stellen, an denen noch eine Angabe fehlt. Bewusst auffaellig: Diese Seiten duerfen nicht
   mit Platzhaltern online gehen, sobald im Shop wirklich verkauft wird. */
.legal-luecke {
  background: rgba(245, 224, 0, 0.1);
  border: 1px dashed var(--yellow-dim);
  border-radius: 6px;
  padding: 14px 18px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
}
/* Ausfuelllinien im Muster-Widerrufsformular. Frueher standen hier lange Unterstrich-Ketten -
   die brechen nicht um und haben die Seite auf dem Handy seitlich aus dem Bild geschoben. */
.legal-linie {
  border-bottom: 1px solid var(--muted);
  height: 1.4em;
  margin: 0 0 12px !important;
}
.legal-feld {
  display: inline-block;
  min-width: 90px;
  border-bottom: 1px solid var(--muted);
  vertical-align: baseline;
}
.legal-box { overflow-wrap: anywhere; }
/* Preishinweis "inkl. Versand". Die Versandkosten stecken im Preis - das muss laut
   Preisangabenverordnung dranstehen, sonst wirkt der Preis wie ein Nettopreis. */
.product-preis-zusatz {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Filmstreifen im Umbau-Kapitel ---------- */
/* Waagerechte Bilderstrecke statt Raster: Die zehn Bilder erzaehlen den Umbau der Reihe
   nach. Gescrollt wird mit den Bordmitteln des Browsers - dadurch wischt es auf dem Handy
   von selbst, und das senkrechte Scrollen der Seite bleibt unberuehrt. Das alte Karussell
   hatte genau da sein Problem: Es hat das Mausrad abgefangen. */
.gr-film { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.gr-film-spur {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  /* Eigene Bildlaufleiste: die Standardleiste ist im dunklen Layout ein heller Balken. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.gr-film-spur::-webkit-scrollbar { height: 4px; }
.gr-film-spur::-webkit-scrollbar-track { background: transparent; }
.gr-film-spur::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.gr-film-spur:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.gr-film-bild { flex: 0 0 clamp(210px, 46%, 300px); margin: 0; scroll-snap-align: start; }
.gr-film-bild button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.gr-film-bild button:hover { border-color: var(--cyan); }
.gr-film-bild button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.gr-film-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-film-bild figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.gr-film-nr { color: var(--cyan); }

.gr-film-fuss { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.gr-film-pfeil {
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  border-radius: 6px;
  /* 40px: auf dem Handy mit dem Daumen sicher zu treffen. */
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gr-film-pfeil:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.gr-film-pfeil:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.gr-film-pfeil:disabled { opacity: 0.3; cursor: default; }
.gr-film-zaehler { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .gr-film-spur { scroll-behavior: auto; }
}

/* ==========================================================================
   Oeffentliche Seiten auf dem Handy
   Steht bewusst am Dateiende: Die Regeln uebersteuern die Grundregeln und die
   860px-Anpassungen weiter oben, ohne dass deren Reihenfolge eine Rolle spielt.
   ========================================================================== */
@media (max-width: 560px) {
  /* Social-Icons im Kopf: 20px Tippflaeche war kaum zu treffen. Das Polster vergroessert
     die Flaeche auf 36px, der wegfallende Abstand haelt die Zeile fast gleich breit. */
  .site-header .social-links { gap: 0; }
  .site-header .social-links a { padding: 8px; }

  /* Fusszeile: Raster mit 40px hohen Tippflaechen. Vorher eine Zeile mit 22px hohen
     Links, in der "Versand" allein in die zweite Reihe rutschte. */
  .footer-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 24px; }
  .footer-links a { display: inline-block; padding: 10px 0; }

  /* Startseite: Haupt-Buttons gleich breit untereinander statt zwei verschieden breite. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  /* Kennzahlen als 2x2-Raster. Untereinander brauchten vier Zahlen fast einen ganzen
     Bildschirm (je 200px hoch). */
  .social-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .social-stats-item { border-left: none; border-top: none; padding: 16px 10px; }
  .social-stats-item:nth-child(even) { border-left: 1px solid var(--line); }
  .social-stats-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* Bei ungerader Anzahl bekommt die letzte Kachel die ganze Zeile statt eines Lochs. */
  .social-stats-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .social-stats-value { font-size: 1.3rem; }
  .social-stats-label { font-size: 0.72rem; }

  /* Kooperationen: Die Mindesthoehen halten auf dem Desktop Codes und Links nebeneinander
     auf einer Linie. Auf dem Handy steht jede Karte allein - dort waren sie nur Leerraum. */
  .koop-code-row, .koop-links { min-height: 0; }
  .koop-code-row:empty, .koop-links:empty { display: none; }

  /* Uebersichtskarten ("Wie ich mich hier auslebe") etwas kompakter. */
  .explore-grid { gap: 12px; margin-top: 24px; }
  .explore-card { padding: 18px 20px; }

  /* Services: Die Reiterleiste steht beim Scrollen oben - auf dem Handy deshalb in EINER
     Zeile mit Kurzbeschriftungen ("Preis", "Videos"), sonst wuerde sie dauerhaft ein Viertel
     des Bildschirms belegen. Alle fuenf passen ohne Wischen hinein (eine wischbare Zeile war
     ein erster Versuch - man sah nicht, dass es weitergeht). */
  .service-subnav { flex-wrap: nowrap; gap: 4px; padding: 8px 12px; margin-top: 8px; }
  .service-subnav a { flex: 1 1 auto; text-align: center; padding: 9px 4px; font-size: 0.75rem; }
  .service-subnav .subnav-voll { display: none; }
  .service-subnav .subnav-kurz { display: inline; }
}
/* Bis 400px (z. B. iPhone SE, 12/13 mini mit 375px): 32px Tippflaeche - zusammen genau so
   breit wie vorher die 20px-Icons mit 16px Abstand. Mit 36px passte die Zeile erst ab 383px. */
@media (max-width: 400px) {
  .site-header .social-links a { padding: 6px; }
}
/* Sehr schmale Handys (iPhone SE 1. Generation, 320px): Logo, vier Icons und Menue-Knopf
   passen nicht nebeneinander - die Kopfzeile war 348px breit und der Menue-Knopf hing halb
   ausserhalb des Bildschirms. Die Icons weichen, der Menue-Knopf bleibt immer erreichbar.
   Instagram, YouTube und Co. sind auf Startseite und Kontaktseite weiterhin verlinkt. */
@media (max-width: 369px) {
  .site-header .social-links { display: none; }
  .site-header .nav-toggle { margin-left: auto; }
}
/* Einspaltige Raster duerfen nie breiter als der Bildschirm werden. "1fr" ist in Wahrheit
   minmax(auto, 1fr) und wird nie schmaler als der breiteste Inhalt - bei 320px schoben so
   das lange Wort "Pilotenausbildung" (Cockpit), die 320px-Mindestbreite der Vorlagen-Karten
   (Services) und das Formular (Kontakt) die Seite seitlich auf. */
@media (max-width: 560px) {
  .split, .contact-layout, .guestbook-layout, .template-grid, .fact-grid, .product-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Lange Woerter in grossen Ueberschriften mit Trennstrich umbrechen statt ueber den Rand. */
@media (max-width: 360px) {
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; }
  /* Services-Reiter auch bei 320px in einer Zeile. */
  .service-subnav a { padding: 9px 2px; font-size: 0.7rem; }
}

/* Bestellzustand im Adminbereich einfaerben - "Zahlung fehlgeschlagen" soll auffallen. */
.order-status[data-status="paid"] { color: var(--cyan); }
.order-status[data-status="pending"] { color: var(--yellow); }
.order-status[data-status="failed"] { color: #ff8a8a; }

/* ---------- Startseite: Kanal-Buttons, Social Proof, Rabatt- und Business-Karte ----------
   Bewusst am Dateiende: Die Regeln muessen die allgemeinen .social-stats-Regeln aus den
   Mobil-Abschnitten weiter oben bei gleicher Spezifitaet schlagen. */
.link-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; max-width: 420px; }
.link-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.link-btn svg { width: 26px; height: 26px; flex: none; color: var(--cyan); transition: color 0.2s; }
.link-btn-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.link-btn-name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.link-btn-handle { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.link-btn-pfeil { font-family: var(--font-mono); color: var(--yellow); font-size: 1.1rem; }
.link-btn:hover { border-color: var(--yellow); background: var(--panel-raised); transform: translateY(-2px); }
.link-btn:hover svg { color: var(--yellow); }
.link-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* Direkt unter dem Intro - das Intro bringt schon genug Abstand mit. */
.section-proof { padding-top: 0; }
.social-stats-proof { margin-bottom: 0; }

.aktion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.aktion-stapel { display: flex; flex-direction: column; gap: 24px; }
.aktion-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  border-radius: 10px;
  padding: 28px;
}
.aktion-tag .koop-werbung { font-size: 0.68rem; margin-left: 6px; padding: 2px 7px; vertical-align: 1px; }
.aktion-titel { font-size: clamp(1.4rem, 3vw, 1.75rem); margin: 0 0 8px; }
.aktion-text { color: var(--muted); margin: 0 0 22px; }
/* margin-top:auto: Beide Karten sind gleich hoch, die Button-Zeilen stehen so auf einer Linie. */
.aktion-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
/* Der Code steht im Kopier-Button selbst - feste Mindestbreite, damit "kopiert ✓" nicht springt. */
.rabatt-kopieren { justify-content: center; gap: 10px; min-width: 12.5em; }
.rabatt-code-wert { letter-spacing: 0.14em; font-size: 1.05rem; }
.rabatt-kopieren-text { font-weight: 500; opacity: 0.75; }

@media (max-width: 860px) {
  .link-buttons { margin-left: auto; margin-right: auto; }
  /* Drei Zahlen passen auch schmal nebeneinander - untereinander waeren es drei volle Zeilen. */
  .social-stats-proof { flex-direction: row; flex-wrap: nowrap; }
  .social-stats-proof .social-stats-item { flex: 1 1 0; border-top: none; border-left: 1px solid var(--line); }
  .social-stats-proof .social-stats-item:first-child { border-left: none; }
}
@media (max-width: 560px) {
  .link-buttons { max-width: none; }
  .social-stats-proof { display: grid; grid-template-columns: repeat(3, 1fr); }
  .social-stats-proof .social-stats-item { padding: 16px 6px; border-top: none; border-left: 1px solid var(--line); grid-column: auto; }
  .social-stats-proof .social-stats-item:first-child { border-left: none; }
  /* Die allgemeine Regel zieht bei ungerader Anzahl die letzte Kachel ueber die ganze Zeile. */
  .social-stats-proof .social-stats-item:last-child:nth-child(odd) { grid-column: auto; }
  .aktion-grid { grid-template-columns: 1fr; gap: 18px; }
  .aktion-stapel { gap: 18px; }
  .aktion-karte { padding: 22px 20px; }
  .aktion-buttons { flex-direction: column; align-items: stretch; }
  .aktion-buttons .btn { justify-content: center; }
}
/* Services-Seite: Die Kooperationen stehen dort in einem eigenen, abgesetzten Abschnitt. */
#kooperationen .koop-grid { margin-bottom: 0; }
/* Auf dem abgesetzten Hintergrund (--panel) muessen die Karten dunkel sein, sonst verschwimmen
   sie mit ihm - wie die Fakten-Karten in .section-alt. */
.section-alt .koop-card { background: var(--ink); }

/* Anfrage-Kasten unter den Kooperationen: Text, Reichweite, Button nebeneinander. */
.koop-anfrage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px 36px;
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  border-radius: 10px;
}
.koop-anfrage h3 { margin: 0 0 6px; }
.koop-anfrage p { margin: 0; color: var(--muted); max-width: 46ch; }
.koop-reichweite { display: flex; gap: 28px; }
.koop-reichweite li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.koop-reichweite strong { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--yellow); line-height: 1.2; }
.koop-reichweite span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
@media (max-width: 860px) {
  .koop-anfrage { grid-template-columns: 1fr; }
  .koop-reichweite { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .koop-anfrage { padding: 22px 20px; }
  .koop-reichweite { justify-content: space-between; gap: 12px; }
  .koop-anfrage .btn { justify-content: center; }
}

/* ---------- Clip-Reihen (Startseite: Reels, YouTube) ----------
   Im Rahmen der Seite statt randlos, mit Titeln unter jedem Clip. Am Handy wischt man (die
   Karten rasten ein, die naechste ist angeschnitten), am Desktop gibt es zusaetzlich Pfeile. */
.clip-kopf { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 20px; }
.clip-kopf h2 { margin: 0; }
.clip-steuerung { display: flex; align-items: center; gap: 8px; }
.clip-pfeil {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--paper);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.clip-pfeil:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.clip-pfeil:disabled { opacity: 0.35; cursor: default; }
.clip-reihe {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.clip-reihe::-webkit-scrollbar { display: none; }
.clip-reihe:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.clip { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.clip-reihe-reels .clip { width: 176px; }
.clip-reihe-youtube .clip { width: 300px; }
.clip-rahmen {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.clip-reihe-reels .clip-rahmen { aspect-ratio: 9 / 16; }
.clip-reihe-youtube .clip-rahmen { aspect-ratio: 16 / 9; }
.clip:hover .clip-rahmen, .clip.ist-aktiv .clip-rahmen { border-color: var(--yellow); }
.clip-bild { display: block; width: 100%; height: 100%; }
.clip-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.clip:hover .clip-bild img { transform: scale(1.04); }
.clip-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8,8,13,0.6);
  border: 1px solid rgba(244,244,242,0.35);
  color: var(--paper);
  pointer-events: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.clip-play svg { width: 20px; height: 20px; margin-left: 2px; }
.clip:hover .clip-play { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.clip-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; }
.clip-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.clip-titel:hover { color: var(--yellow); }
/* Die Reihe unter dem Banner und die YouTube-Reihe bekommen denselben Abstand nach oben. */
.social-banner + .clip-kopf { margin-top: 36px; }
@media (max-width: 860px) {
  /* Auf Touch-Geraeten wischt man - Pfeile waeren nur Platz. */
  .clip-pfeil { display: none; }
}
@media (max-width: 560px) {
  .clip-reihe { gap: 12px; }
  .clip-reihe-reels .clip { width: 37vw; max-width: 180px; }
  .clip-reihe-youtube .clip { width: 76vw; }
  .clip-alle { padding: 10px 16px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .clip-bild img { transition: none; }
  .clip:hover .clip-bild img { transform: none; }
}

/* ==========================================================================
   Ernährung (Adminbereich)
   Eigener Namensraum er-*. Mobile first: Das wird am Handy benutzt, deshalb
   große Tippflächen (mind. 48px) und eine Leiste unten am Rand für den Daumen.
   ========================================================================== */

.er-seite { --er-rot: #ff8a8a; --er-gruen: #7ee2a8; }

/* ---------- Unterleiste: am Desktop oben als Reiter, am Handy fest unten ---------- */
.er-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.er-nav a {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem;
  border-bottom: 2px solid transparent;
}
.er-nav a:hover { color: var(--paper); }
.er-nav a[aria-current="page"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.er-nav svg { width: 18px; height: 18px; flex: none; }

/* ---------- Kopf mit Blättern ---------- */
.er-tagkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.er-tagkopf-mitte { text-align: center; min-width: 0; }
.er-tagkopf h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.er-tagkopf h1 small, .er-seite h1 small { display: block; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: 4px; }
.er-pfeil {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--paper);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.er-pfeil:hover { border-color: var(--cyan); color: var(--cyan); }
.er-heute-link { background: none; border: none; color: var(--cyan); font-family: var(--font-mono); font-size: 0.75rem; padding: 6px; cursor: pointer; }
span.er-heute-link { color: var(--muted); cursor: default; }

/* ---------- Karten und Blöcke ---------- */
.er-karte { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.er-block { margin-bottom: 26px; }
.er-block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.er-block-kopf h2 { margin: 0; font-size: 1.15rem; }
.er-block-wert { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); }
.er-breit { width: 100%; justify-content: center; min-height: 48px; }
.er-knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.er-knopfreihe .btn { min-height: 48px; }
.er-leer { text-align: center; }
.er-leer p { color: var(--muted); margin: 0 0 14px; }
.er-leer-zeile { color: var(--muted); font-size: 0.9rem; padding: 10px 0; list-style: none; }
.er-zwischen { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; font-weight: 400; }
.er-hinweis-klein { color: var(--yellow); font-size: 0.8rem; margin: 0 0 12px; }

/* ---------- Tagessumme mit Balken (bleibt beim Scrollen oben) ---------- */
.er-summe { position: sticky; top: 0; z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.er-summe-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.er-summe-zahl { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--paper); line-height: 1; }
.er-summe-von { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.er-summe-rest { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); }
.er-summe-rest.ist-ueber { color: var(--er-rot); }
.er-balken { margin-top: 7px; }
.er-balken-kopf { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.er-balken-kopf b { color: var(--paper); font-weight: 500; }
.er-balken-spur { height: 6px; background: var(--ink); border-radius: 3px; overflow: hidden; }
.er-balken-spur span { display: block; height: 100%; background: var(--cyan); border-radius: 3px; transition: width 0.3s ease; }
.er-balken-kcal .er-balken-spur span { background: var(--yellow); }
.er-balken.ist-erreicht .er-balken-spur span { background: var(--er-gruen); }
.er-balken.ist-ueber .er-balken-spur span { background: var(--er-rot); }

/* ---------- Gerichte zum Antippen ---------- */
.er-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.er-option { position: relative; display: flex; }
.er-option-knopf {
  flex: 1; min-height: 64px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; color: var(--paper); font: inherit;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.er-option-knopf:hover { border-color: rgba(51,230,224,0.5); }
.er-option-knopf:active { transform: scale(0.98); }
.er-option-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.er-option.ist-gewaehlt .er-option-knopf { border-color: var(--cyan); background: rgba(51,230,224,0.1); }
.er-option-name { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.er-option-werte { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.er-anzahl { color: var(--yellow); font-family: var(--font-mono); }
.er-option-minus {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  font-size: 1.3rem; cursor: pointer;
}
.er-option.ist-gewaehlt .er-option-knopf:has(+ .er-option-minus) { padding-right: 56px; }

/* ---------- Freie Einträge ---------- */
.er-eintraege { list-style: none; margin: 0 0 10px; padding: 0; }
.er-eintraege li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.er-eintrag-name { color: var(--paper); flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.er-eintrag-werte { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.er-eintrag-werte b { color: var(--paper); font-weight: 500; }
.er-x {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--muted); font-size: 1.2rem; cursor: pointer;
}
.er-x:hover { border-color: var(--er-rot); color: var(--er-rot); }
.er-schnell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.er-schnell-titel { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.er-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--paper); font: inherit; font-size: 0.85rem;
}
.er-chip small { font-family: var(--font-mono); color: var(--muted); font-size: 0.7rem; }
.er-chip.ist-gewaehlt { border-color: var(--cyan); background: rgba(51,230,224,0.1); cursor: default; }
.er-chip-x { background: none; border: none; color: var(--muted); font-size: 1.1rem; padding: 4px 2px 4px 6px; cursor: pointer; min-height: 32px; }
.er-makro-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Freitext schätzen: Knopf neben dem Feld, darunter die erkannten Posten als Begründung. */
.er-schaetzen-zeile { display: flex; gap: 8px; align-items: stretch; }
.er-schaetzen-zeile input { flex: 1; min-width: 0; }
.er-schaetzen-zeile .btn { flex: none; padding-left: 14px; padding-right: 14px; }
.er-schaetzen-info { margin: 6px 0 0; font-size: 0.78rem; }
.er-schaetzung { margin-top: 10px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 6px; font-size: 0.85rem; }
.er-schaetzung ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.er-schaetzung li { display: flex; justify-content: space-between; gap: 10px; }
.er-schaetzung li small { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; }
.er-schaetzung li b { font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; white-space: nowrap; }
.er-schaetzung p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.er-schaetzung.ist-fehler { border-left-color: #ff8a8a; }
.er-schaetzung.ist-fehler p { color: #ff8a8a; font-size: 0.85rem; }
.er-schaetzung .btn { margin-top: 10px; }
/* Barcode / Nährwert-Foto: zwei gleich breite Knöpfe unter dem Feld. */
.er-produkt { margin: 0 0 14px; padding: 12px 14px; background: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 6px; }
.er-produkt-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.er-produkt-kopf b { font-family: var(--font-head); font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.er-produkt-weg { flex: none; min-width: 36px; min-height: 36px; margin: -8px -8px 0 0; background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.er-produkt-weg:hover { color: var(--paper); }
.er-produkt-pro100 { margin: 4px 0 12px; color: var(--muted); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; }
.er-menge { margin-bottom: 0; }
.er-menge-zeile { display: flex; align-items: center; gap: 10px; }
.er-menge-zeile input { max-width: 140px; font-size: 1.15rem; }
.er-menge-zeile span { font-family: var(--font-mono); color: var(--muted); }
.er-menge-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.er-chip { min-height: 36px; padding: 6px 12px; background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; }
.er-chip:hover, .er-chip:active { border-color: var(--cyan); color: var(--cyan); }
/* Scanner: Kamerabild bildschirmfüllend, Rahmen als Zielhilfe, Rest abgedunkelt. */
.er-scanner { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.er-scanner[hidden] { display: none; }
.er-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.er-scanner-rahmen { position: relative; width: min(80vw, 420px); height: min(42vw, 220px); border: 2px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
.er-scanner-text { position: relative; margin: 18px 20px; color: #fff; font-family: var(--font-mono); font-size: 0.85rem; text-align: center; }
.er-scanner .btn { position: relative; min-width: 180px; justify-content: center; }
body.er-scanner-offen { overflow: hidden; }
/* Eintragen-Karte oben auf der Tagesseite: ein Feld, ein Kamera-Knopf. */
.er-erfassen-titel { display: block; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 10px; }
.er-erfassen-zeile { display: flex; gap: 8px; }
.er-erfassen-zeile input {
  flex: 1; min-width: 0; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  padding: 12px; font-family: var(--font-body); font-size: 16px; border-radius: 6px;
}
.er-erfassen-zeile input:focus { outline: none; border-color: var(--cyan); }
.er-kamera {
  flex: none; width: 50px; min-height: 48px; display: grid; place-items: center; cursor: pointer;
  background: var(--ink); border: 1px solid var(--line); border-radius: 6px; color: var(--paper);
}
.er-kamera:hover { border-color: var(--cyan); color: var(--cyan); }
.er-kamera:disabled { opacity: 0.5; cursor: wait; }
.er-kamera svg { width: 22px; height: 22px; }
/* "Nochmal": eine Zeile zum seitlich Wischen, lange Produktnamen werden gekürzt. */
.er-erfassen .er-schnell { margin: 12px -16px 0; padding: 0 16px 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.er-erfassen .er-schnell::-webkit-scrollbar { display: none; }
.er-erfassen .er-schnell .er-chip { flex: none; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-erfassen .er-schnell-titel { flex: none; }
.er-erfassen .er-schnell:empty { display: none; }
.er-erfassen .er-produkt { margin: 12px 0 0; }
.er-werte { margin-top: 12px; }
.er-erfassen-knoepfe { display: flex; gap: 8px; margin-top: 12px; }
.er-erfassen-knoepfe .btn { flex: 1; justify-content: center; min-height: 46px; padding-left: 10px; padding-right: 10px; }
.er-erfassen-knoepfe .btn[hidden] { display: none; }
/* Kamera: Auslöser für die Nährwerttabelle, Barcodes erkennt sie von selbst. */
.er-ausloeser {
  position: relative; width: 72px; height: 72px; border-radius: 50%; margin: 2px 0 10px; cursor: pointer;
  border: 4px solid #fff; background: rgba(255,255,255,0.22); transition: transform 0.1s;
}
.er-ausloeser:active { transform: scale(0.92); }
.er-scanner-hilfe { position: relative; margin: 0 20px 16px; color: rgba(255,255,255,0.75); font-size: 0.78rem; line-height: 1.5; text-align: center; }
.er-scanner-unten { position: relative; display: flex; gap: 10px; }
.er-scanner .er-scanner-unten .btn { min-width: 130px; }
.er-scanner-unten .btn-outline { background: rgba(0,0,0,0.5); color: #fff; border-color: rgba(255,255,255,0.6); }
.er-scanner.ist-tabelle .er-scanner-rahmen { width: min(78vw, 360px); height: min(92vw, 420px); }
.er-scanner.ist-tabelle .er-ausloeser { border-color: var(--yellow); background: rgba(255,230,0,0.25); }
.er-scanner.ist-tabelle .er-scanner-hilfe { display: none; }
.er-makro-felder.er-zwei { grid-template-columns: 1fr 1fr; }

/* ---------- Wiegen ---------- */
.er-wiegen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border-color: rgba(245,224,0,0.35); }
/* Datumsfelder haben eine eigene Mindestbreite und schoben die Karte am Handy über den Rand. */
.er-wiegen input[type="date"] { width: 100%; min-width: 0; max-width: 100%; }
.er-wiegen-text { display: flex; flex-direction: column; gap: 2px; }
.er-wiegen-text strong { color: var(--paper); font-family: var(--font-head); font-size: 1.1rem; }
.er-wiegen-text span { color: var(--muted); font-size: 0.85rem; }
.er-stepper { display: flex; align-items: stretch; gap: 8px; }
.er-stepper-knopf {
  width: 56px; flex: none; border-radius: 10px; cursor: pointer;
  background: var(--ink); border: 1px solid var(--line); color: var(--paper); font-size: 1.6rem;
}
.er-stepper-knopf:active { border-color: var(--yellow); }
.er-stepper-feld { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.er-stepper-feld input {
  flex: 1; min-width: 0; width: 100%; background: none; border: none; color: var(--paper);
  font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; text-align: center; padding: 10px 0;
}
.er-stepper-feld input:focus { outline: none; }
.er-stepper-feld:focus-within { border-color: var(--yellow); }
.er-stepper-feld span { font-family: var(--font-mono); color: var(--muted); }
.er-gewogen { font-family: var(--font-mono); font-size: 0.8rem; color: var(--er-gruen); margin: 0 0 14px; }
.er-gewogen b { color: var(--paper); font-weight: 500; }
.er-gewogen a { color: var(--cyan); }

/* ---------- Gewichtsdiagramm ---------- */
.er-diagramm { padding: 10px; }
.er-diagramm svg { display: block; width: 100%; height: auto; }
.er-d-raster { stroke: var(--line); stroke-width: 1; }
.er-d-achse { fill: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.er-d-linie { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.er-d-punkt { fill: var(--cyan); stroke: var(--panel); stroke-width: 2; }
.er-hinweis { border-color: rgba(245,224,0,0.5); border-left: 3px solid var(--yellow); }
.er-hinweis strong { color: var(--yellow); font-family: var(--font-head); font-size: 1.05rem; }
.er-hinweis p { color: var(--paper); margin: 8px 0 12px; font-size: 0.92rem; }

/* ---------- Wochenplan ---------- */
.er-wochentag.ist-heute { border-color: var(--cyan); }
.er-wochentag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.er-wochentag-kopf a { color: var(--paper); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem; }
.er-wochentag-kopf a b { color: var(--cyan); font-weight: 500; }
.er-wochentag-kopf > span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.er-wochentag-kopf .ist-passt { color: var(--er-gruen); }
.er-wochentag-kopf .ist-ueber { color: var(--er-rot); }
.er-wochen-zeile { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.er-wochen-zeile > span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.er-wochen-zeile select, .er-wochen-snacks select {
  width: 100%; min-height: 44px; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 16px;
}
.er-wochen-snacks { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Einkaufsliste ---------- */
.er-einkauf { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.er-einkauf li { border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.er-einkauf li:last-child { border-bottom: none; }
.er-einkauf input { width: 24px; height: 24px; margin: 0 0 0 16px; flex: none; accent-color: var(--cyan); }
.er-einkauf label {
  flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 14px 16px 14px 12px; cursor: pointer; min-height: 56px;
}
.er-einkauf-name { color: var(--paper); font-weight: 600; }
.er-einkauf-menge { font-family: var(--font-mono); color: var(--cyan); font-size: 0.9rem; text-align: right; }
.er-einkauf small { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; }
.er-einkauf li.ist-erledigt .er-einkauf-name, .er-einkauf li.ist-erledigt .er-einkauf-menge { text-decoration: line-through; color: var(--muted); }
.er-einkauf li.ist-erledigt { opacity: 0.6; }

.er-umschalter { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.er-umschalter button {
  flex: 1; min-height: 44px; border: none; border-radius: 7px; background: none; cursor: pointer;
  color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem;
}
.er-umschalter button[aria-selected="true"] { background: rgba(51,230,224,0.12); color: var(--cyan); }
.er-grund-zeile { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 12px 16px; }
.er-grund li.ist-naechste { opacity: 0.45; }
.er-anleitung > summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.85rem; color: var(--cyan); min-height: 32px; display: flex; align-items: center; }
.er-anleitung p { color: var(--muted); font-size: 0.88rem; }

/* ---------- Gerichte bearbeiten ---------- */
.tr-plattform-block.ist-aus > summary { opacity: 0.55; }
.er-zutat-zeile { display: grid; grid-template-columns: 1fr 90px 52px 40px; gap: 6px; align-items: center; margin-bottom: 6px; }
.er-zutat-zeile input, .er-zutat-zeile select, .er-zutat-eintrag input, .er-zutat-eintrag select {
  width: 100%; min-width: 0; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 6px; padding: 9px 10px; font: inherit; font-size: 16px;
}
.er-zutat-einheit { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.er-zutat-neu { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.er-zutat-neu[hidden] { display: none; }
.er-zutat-eintrag { display: grid !important; grid-template-columns: 1fr 150px 100px; }
.er-wochentage { display: flex; gap: 6px; flex-wrap: wrap; }
/* Die echte Checkbox bleibt für Tastatur und Screenreader da, aber unsichtbar und winzig -
   sonst erbt sie width: 100% von .tr-feld input und schiebt die Seite am Handy auf. */
.er-tag-wahl { position: relative; }
.er-seite .er-tag-wahl input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.er-tag-wahl span {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer;
}
/* Der Kreis passt nur fuer Wochentags-Kuerzel. Ganze Woerter bekommen eine Pille. */
.er-tag-wahl.er-wort span { width: auto; padding: 0 16px; border-radius: 22px; }
.er-tag-wahl input:checked + span { border-color: var(--cyan); color: var(--cyan); background: rgba(51,230,224,0.1); }
.er-tag-wahl input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.er-gericht-form .er-knopfreihe { margin: 10px 0 0; }

/* ---------- Spickzettel: helles Blatt, am Bildschirm wie auf dem Drucker ---------- */
.er-blatt {
  background: #fff; color: #1a1a1a; border-radius: 6px; padding: 28px 30px; max-width: 800px;
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.45;
}
.er-blatt-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1a1a1a; padding-bottom: 8px; margin-bottom: 14px; }
.er-blatt-kopf h2 { margin: 0; color: #1a1a1a; font-size: 1.35rem; }
.er-blatt-kopf span { font-family: var(--font-mono); font-size: 0.72rem; color: #555; }
.er-blatt-ziele { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.er-blatt-ziele div { border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; }
.er-blatt-ziele b { display: block; font-family: var(--font-head); font-size: 1.2rem; color: #1a1a1a; }
.er-blatt-ziele span { font-family: var(--font-mono); font-size: 0.65rem; color: #555; text-transform: uppercase; letter-spacing: 0.06em; }
.er-blatt-satz { margin: 0 0 6px; color: #333; }
.er-blatt h3 { color: #1a1a1a; font-size: 0.95rem; margin: 14px 0 4px; }
.er-blatt table { width: 100%; border-collapse: collapse; }
.er-blatt th { text-align: left; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #555; border-bottom: 1px solid #999; padding: 3px 6px 3px 0; font-weight: 400; }
.er-blatt td { border-bottom: 1px solid #e3e3e3; padding: 4px 6px 4px 0; vertical-align: top; color: #1a1a1a; }
.er-blatt td:nth-child(n+3), .er-blatt th:nth-child(n+3) { text-align: right; white-space: nowrap; width: 38px; font-family: var(--font-mono); font-size: 0.75rem; }
.er-blatt td:first-child { width: 30%; }
.er-blatt-regeln ul { margin: 4px 0 0; padding-left: 18px; }
.er-blatt-regeln li { margin-bottom: 3px; color: #1a1a1a; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; }
  .admin-sidebar, .admin-topbar, .admin-sidebar-backdrop, .er-nav, .er-nicht-drucken, #admin-status, .cart-empty { display: none !important; }
  .admin-wrap { padding: 0 !important; max-width: none !important; }
  .er-blatt { padding: 0; border-radius: 0; max-width: none; font-size: 9.5pt; }
  .er-blatt tr { break-inside: avoid; }
}

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  /* Leiste fest unten, mit Abstand für den Home-Balken des iPhones */
  .er-seite { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .er-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    background: rgba(19,19,25,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); border-bottom: none;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .er-nav a {
    flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; min-height: 52px; justify-content: center;
    font-size: 0.65rem; border-bottom: none; border-radius: 8px;
  }
  .er-nav a[aria-current="page"] { background: rgba(51,230,224,0.1); }
  .er-nav svg { width: 22px; height: 22px; }
  /* Die Summe klebt unter der Kopfzeile des Adminbereichs - kompakt, damit sie beim Scrollen
     nicht ein Viertel des Bildschirms verdeckt: kcal steht schon groß im Kopf, die vier Balken
     stehen in einer Reihe. */
  .er-summe { top: 60px; padding: 12px 14px; }
  .er-summe-kopf { margin-bottom: 6px; }
  .er-summe-zahl { font-size: 1.6rem; }
  .er-balken-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .er-balken { margin-top: 0; }
  .er-balken-kopf { flex-direction: column; gap: 1px; font-size: 0.64rem; }
  .er-balken-kopf span:last-child { white-space: nowrap; }
  .er-makro-felder { grid-template-columns: repeat(2, 1fr); }
  .er-makro-felder input, .er-makro-felder select, .er-seite .tr-feld input, .er-seite .tr-feld select { font-size: 16px; }
  .er-optionen { grid-template-columns: 1fr; }
  .er-zutat-eintrag { grid-template-columns: 1fr 1fr; }
  .er-zutat-eintrag input { grid-column: 1 / -1; }
  .er-blatt { padding: 18px 16px; overflow-x: auto; }
  .er-blatt-ziele { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .er-zutat-zeile { grid-template-columns: 1fr 72px 40px 40px; }
}
/* Druck zuletzt: Eine A4-Seite ist nur gut 700px breit, sonst griffe dort die Handy-Regel
   (Ziele 2x2) - und der Spickzettel soll auf genau eine Seite passen. */
@media print {
  .er-blatt { font-size: 8.6pt; line-height: 1.35; padding: 0; overflow: visible; }
  .er-blatt-ziele { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
  .er-blatt-ziele div { padding: 5px 8px; }
  .er-blatt-ziele b { font-size: 1.05rem; }
  .er-blatt h3 { margin: 8px 0 2px; font-size: 10pt; }
  .er-blatt td { padding: 2px 6px 2px 0; }
  .er-blatt th { padding: 2px 6px 2px 0; }
  .er-blatt td:first-child { width: 27%; }
  .er-blatt-kopf { margin-bottom: 8px; padding-bottom: 5px; }
  .er-blatt-regeln ul { padding-left: 14px; }
}

/* ---------- Admin: Training (admin-training.html) ----------
   Fuers Handy im Studio: grosse Tippflaechen (mind. 48px), Plus/Minus neben jedem Feld, die
   wichtigen Knoepfe volle Breite und unten erreichbar - mit einer Hand bedienbar. */
.tg { max-width: 760px; }
.tg-kicker { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan); letter-spacing: 0.04em; margin: 0 0 6px; }
.tg .tg-titel { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 10px; }
.tg .tg-zwischen { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 36px 0 12px; }
.tg-liste, .tg-woche, .tg-v-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tg-uebung {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  text-align: left;
  min-height: 64px;
  padding: 14px 16px;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.tg-uebung:hover, .tg-uebung:focus-visible { border-color: var(--yellow); }
.tg-uebung.ist-fertig { border-left-color: var(--cyan); }
.tg-uebung-name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.tg-uebung-name em { font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-left: 6px; }
.tg-uebung-meta { grid-column: 1; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.tg-uebung-status { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono); color: var(--cyan); font-size: 1rem; }
.tg-chip { grid-column: 1 / -1; justify-self: start; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); background: var(--yellow); border-radius: 3px; padding: 2px 8px; margin-top: 4px; }
.tg-hinweis { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 6px; padding: 12px 14px; margin: 14px 0; }
.tg-hinweis.ist-steigern { border-left-color: var(--yellow); color: var(--yellow); }
.tg-ausgelassen { margin-top: 18px; }
.tg-link { background: none; border: none; color: var(--cyan); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 0; min-height: 44px; }
.tg-breit { width: 100%; justify-content: center; min-height: 54px; }
.tg-tagzeile {
  width: 100%;
  display: grid;
  grid-template-columns: 5.6rem 1fr 1.5rem;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tg-tagzeile.ist-heute { border-color: var(--cyan); }
.tg-tagzeile.ist-gewaehlt { background: var(--panel); }
.tg-tagzeile.ist-ausgelassen .tg-tz-name { color: var(--muted); text-decoration: line-through; }
.tg-tz-datum { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.tg-tz-zeichen { color: var(--cyan); text-align: center; }
.tg-tagzeile.ist-ausgelassen .tg-tz-zeichen { color: #ff8a8a; }
.tg-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tg-kalender { margin: 4px 0 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px 14px; }
/* Kopf: Titel links, rechts nur das "⋯"-Menü (Plan, Kalender-Abo, Spickzettel, CSV). */
.tg-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.tg-kopf > div:first-child { min-width: 0; }
.tg-kopf .tg-titel { margin-bottom: 0; }
.tg-kopf-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px;
  background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; list-style: none; white-space: nowrap;
}
.tg-knopf:hover, .tg-knopf[aria-expanded="true"], .admin-menue[open] > .tg-knopf { border-color: var(--cyan); color: var(--cyan); }
.tg-knopf::-webkit-details-marker { display: none; }
.admin-menue { position: relative; }
.admin-menue > summary::after { content: '▾'; font-size: 0.7rem; }
.admin-menue-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px;
  display: grid; padding: 6px; background: var(--panel-raised, var(--panel)); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.admin-menue-liste button { text-align: left; min-height: 44px; padding: 10px 12px; background: none; border: none; border-radius: 6px; color: var(--paper); font: inherit; font-size: 0.92rem; cursor: pointer; }
.admin-menue-liste button:hover { background: var(--panel); color: var(--cyan); }
.admin-menue-liste a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: var(--paper); font-size: 0.92rem; text-decoration: none; }
.admin-menue-liste a:hover { background: var(--panel); color: var(--cyan); }
/* Einheitlicher Seitenkopf: Titel links, rechts höchstens "⋯" und eine Hauptaktion. */
.admin-seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-seitenkopf h1 { margin: 0; }
.admin-seitenkopf-knoepfe { display: flex; gap: 8px; align-items: center; }
.admin-seitenkopf-knoepfe > a.btn { text-decoration: none; }
.admin-punkte > summary { list-style: none; min-width: 44px; justify-content: center; font-size: 1.1rem; letter-spacing: 0.05em; }
.admin-punkte > summary::-webkit-details-marker { display: none; }
.admin-menue.admin-punkte > summary::after { content: none; }
.admin-kennzahlen { margin: 0 0 22px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.admin-kennzahlen b { color: var(--yellow); font-weight: 400; }
@media (max-width: 560px) {
  /* Titel und Knöpfe bleiben in einer Zeile, die Hauptaktion wird kurz ("+ Neu"). */
  .admin-seitenkopf { flex-wrap: nowrap; }
  .admin-seitenkopf h1 { min-width: 0; margin: 0; }
  .admin-seitenkopf-knoepfe .btn { padding: 10px 14px; font-size: 0.8rem; min-height: 42px; }
  .nur-breit { display: none; }
  /* Karten-Zeile: Titel darf zweizeilig werden, "Datei ✓" nur zeigen, wenn sie fehlt. */
  .tr-karte-zeile { gap: 10px; padding: 12px 12px 12px 14px; }
  .tr-kurz-termin { width: 50px; font-size: 0.72rem; line-height: 1.35; }
  .tr-kurz-titel { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.95rem; line-height: 1.3; }
  .tr-kurz-datei[data-art="da"] { display: none; }
}
@media (max-width: 560px) {
}
@media (min-width: 1100px) {
  .tg { max-width: 1180px; }
  .tg > section:not(#tg-tag) { max-width: 760px; }
  .tg-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 32px; align-items: start; }
  .tg .tg-seitlich .tg-zwischen { margin-top: 0; }
  .tg-seitlich { position: sticky; top: 24px; }
}
.tg-feld { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 1rem; }
.tg-feld:focus { outline: none; border-color: var(--yellow); }
.tg-label { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.tg-stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: 6px; }
.tg-stepper button { min-height: 52px; background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 1.4rem; cursor: pointer; }
.tg-stepper button:active { border-color: var(--yellow); color: var(--yellow); }
.tg-stepper .tg-feld { text-align: center; font-size: 1.25rem; min-height: 52px; }
.tg-satz { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.tg-satz.ist-gespeichert { border-left-color: var(--cyan); }
.tg-satz.ist-wartend { border-left-color: var(--yellow); }
.tg-satz-kopf { font-family: var(--font-mono); font-size: 0.85rem; margin: 0 0 10px; }
.tg-ok { color: var(--cyan); margin-left: 6px; }
.tg-satz-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tg-zurueck { background: none; border: none; color: var(--muted); font-family: var(--font-mono); font-size: 0.95rem; padding: 10px 0; min-height: 44px; cursor: pointer; }
.tg-zurueck:hover { color: var(--yellow); }
.tg-unten { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--ink) 70%, transparent); }
.tg-unten .btn { flex: 1; justify-content: center; min-height: 54px; }
.tg-puffer { background: rgba(245,224,0,0.1); border: 1px solid rgba(245,224,0,0.4); color: var(--yellow); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; font-size: 0.9rem; }
.tg-puffer a { color: inherit; }
.tg-aktivitaet { display: grid; gap: 12px; max-width: 420px; }
.tg-legende { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 0.78rem; margin: 0 0 8px; }
.tg-legende span::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; }
.tg-l-gewicht::before { background: var(--yellow); }
.tg-l-e1rm::before { background: var(--cyan); }
.tg-diagramm svg { width: 100%; height: auto; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.tg-d-raster { stroke: var(--line); stroke-width: 1; }
.tg-d-text { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
path.tg-d-gewicht { stroke: var(--yellow); stroke-width: 2.5; }
path.tg-d-e1rm { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 4; }
circle.tg-d-gewicht { fill: var(--yellow); }
circle.tg-d-e1rm { fill: var(--cyan); }
.tg-v-liste { margin-top: 18px; }
.tg-v-liste li { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 0.9rem; }
.tg-v-liste .tg-kicker { display: block; }
.tg-v-e1rm { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.tg-plantag { margin-bottom: 8px; }
.tg-planform { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.tg-planform label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); display: grid; gap: 6px; }
.tg-planform .tg-voll { grid-column: 1 / -1; }
.tg-planform .tg-check { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.tg-planform .tg-check input { width: 22px; height: 22px; }
.tg-tagform { margin-bottom: 14px; }
.tg-planzeile { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
.tg-planzeile summary { padding: 14px 16px; cursor: pointer; min-height: 48px; font-family: var(--font-head); }
.tg-planzeile summary .tg-kicker { display: inline; margin-left: 8px; color: var(--muted); }
.tg-planzeile[open] summary { border-bottom: 1px solid var(--line); }
.tg-planzeile .tg-planform { padding: 14px 16px; }
.tg-weg { border-color: rgba(255,138,138,0.5); color: #ff8a8a; }
@media (max-width: 560px) {
  .tg-werkzeuge > .btn { flex: 1 1 100%; justify-content: center; }
  /* Untere Leiste bleibt einzeilig, sonst verdeckt sie den naechsten Satz. */
  .tg .tg-unten > .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  /* Gewicht und Wdh nebeneinander - ein Satz bleibt so auf einen Blick erfassbar. */
  .tg-satz { padding: 12px; }
  .tg-satz-felder { gap: 8px; }
  .tg-stepper { grid-template-columns: 44px 1fr 44px; gap: 4px; }
  .tg-stepper button { min-height: 50px; }
  .tg-stepper .tg-feld { min-height: 50px; padding: 8px 4px; font-size: 1.15rem; }
}

/* "Angemeldet bleiben" im Login-Formular: großes Tippziel, Erklärung klein darunter. */
.konto-merken { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; cursor: pointer; }
.konto-merken input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--cyan); }
.konto-merken span { color: var(--paper); font-size: 0.95rem; }
.konto-merken small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* ==========================================================================
   Admin als App: Leiste unten (nur am Handy) und die Übersicht "Heute" (hu-*)
   ========================================================================== */
.app-leiste { display: none; }

@media (max-width: 900px) {
  .app-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(19,19,25,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .app-leiste a, .app-leiste button {
    flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 0.64rem;
    background: none; border: none; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .app-leiste [aria-current="page"] { color: var(--cyan); background: rgba(51,230,224,0.1); }
  .app-leiste svg { width: 22px; height: 22px; }
  body.hat-app-leiste .admin-wrap { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* Die Ernährung hatte ihre eigene Leiste unten - mit der App-Leiste wird sie oben zur
     Reiterzeile, sonst stünden zwei Leisten übereinander. */
  body.hat-app-leiste .er-nav {
    position: static; margin: 0 0 18px; padding: 4px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.hat-app-leiste .er-nav a { min-height: 48px; font-size: 0.62rem; }
  body.hat-app-leiste .er-nav svg { width: 18px; height: 18px; }
  body.hat-app-leiste .er-seite { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* Die Werkzeugleiste des Trainings klebt über der App-Leiste statt dahinter. */
  body.hat-app-leiste .tg-unten { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media print { .app-leiste { display: none !important; } }

/* ---------- Übersicht "Heute" ---------- */
.hu-seite { max-width: 720px; }
.hu-datum { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.hu-titel { margin: 2px 0 18px; }
.hu-karten { display: grid; gap: 12px; }
.hu-karte { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 12px; color: var(--paper); text-decoration: none; }
.hu-karten .hu-karte { margin-bottom: 0; }
.hu-karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hu-karte-kopf svg { width: 20px; height: 20px; flex: none; }
.hu-karte-kopf b { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.hu-karte-kopf span { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; }
.hu-gross { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.hu-gross small { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.hu-klein { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }
.hu-hinweis { color: var(--yellow); }
.hu-breit { width: 100%; justify-content: center; min-height: 48px; margin-top: 14px; }
.hu-balken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.hu-balken div { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }
.hu-balken i { display: block; height: 5px; border-radius: 3px; background: var(--ink); margin-top: 4px; overflow: hidden; }
.hu-balken i::after { content: ''; display: block; height: 100%; width: var(--w, 0%); background: var(--cyan); }
.hu-balken div:first-child i::after { background: var(--yellow); }
.hu-post-titel { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
.hu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hu-chip { font-family: var(--font-mono); font-size: 0.68rem; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.hu-chip.gelb { color: var(--yellow); border-color: rgba(245,224,0,0.45); }
.hu-seite .hu-abschnitt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 26px 0 8px; }

.hu-zeitleiste { padding: 6px 16px; }
.hu-tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 14px 0 2px; }
.hu-tag:first-child { margin-top: 8px; }
.hu-termin { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--paper); text-decoration: none; }
.hu-termin:last-child { border-bottom: none; }
a.hu-termin:hover b { color: var(--cyan); }
.hu-zeit { font-family: var(--font-mono); font-size: 0.75rem; padding-top: 2px; }
.hu-was { min-width: 0; }
.hu-was b { display: block; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.hu-was small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 1px; }
.hu-termin.ist-erledigt b { color: var(--muted); }
.hu-art-kalender .hu-was b { font-weight: 500; }
.hu-art-training .hu-zeit::before, .hu-art-kalender .hu-zeit:empty::before { content: '●'; font-size: 0.6rem; }

.hu-kalender > summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.82rem; color: var(--cyan); list-style: none; min-height: 28px; display: flex; align-items: center; }
.hu-kalender > summary::-webkit-details-marker { display: none; }
.hu-kalender.ist-verbunden > summary { color: var(--muted); }
.hu-kalender p { color: var(--muted); font-size: 0.88rem; }
.hu-anleitung { color: var(--muted); font-size: 0.88rem; line-height: 1.55; padding-left: 18px; }
.hu-anleitung b { color: var(--paper); font-weight: 600; }
.hu-kalender textarea {
  width: 100%; min-height: 80px; background: var(--ink); border: 1px solid var(--line); color: var(--paper);
  border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono); font-size: 16px; resize: vertical;
}
.hu-zeile { font-size: 0.9rem; color: var(--muted); }
.hu-zeile .hu-offen { color: var(--yellow); font-weight: 600; }
.hu-shop-hinweis { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; margin-bottom: 0; border-color: rgba(245,224,0,0.45); text-decoration: none; }
.hu-shop-hinweis[hidden] { display: none; }
.hu-seite > #hu-inhalt > .hu-kalender { margin-top: 14px; margin-bottom: 0; }

/* Startseite "Heute": oben zwei Zeilen, die auf eigene Seiten fuehren (Neuigkeiten, Tagesplan).
   Gelber Rand nur, wenn es etwas Neues gibt. */
.hu-wege { display: grid; gap: 12px; margin-bottom: 12px; }
.hu-weg { display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: 14px 16px; min-height: 68px; }
.hu-weg[hidden] { display: none; }
.hu-weg.hat-neues { border-color: rgba(245,224,0,0.45); }
.hu-weg-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; margin: -14px -16px; padding: 14px 16px; color: inherit; text-decoration: none; border-radius: 14px; }
a.hu-weg:focus-visible, .hu-weg-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
a.hu-weg:hover .hu-weg-pfeil, .hu-weg-link:hover .hu-weg-pfeil { color: var(--cyan); transform: translateX(2px); }
.hu-weg-text { flex: 1; min-width: 0; }
.hu-weg-text b { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.hu-weg-text small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.hu-weg-pfeil { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform 0.18s ease, color 0.18s ease; }
.hu-weg .btn { flex: none; min-height: 48px; }
/* Umriss-Knoepfe im Admin: beim Ueberfahren nicht die tuerkise Flaeche der gelben Knoepfe erben,
   sonst steht gelbe Schrift auf Tuerkis (Kontrast 1,1:1). */
.admin-layout .btn-outline:hover { background: transparent; box-shadow: none; }
@media (max-width: 560px) {
  .hu-weg.hat-knopf { flex-wrap: wrap; }
  .hu-weg.hat-knopf .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hu-weg-pfeil { transition: none; } }

/* Unterseiten von "Heute" (Neuigkeiten, Tagesplan): schmale Spalte, Rueckweg oben. */
.hu-seite.hu-schmal { max-width: 720px; }
.hu-zurueck { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.hu-zurueck:hover { color: var(--cyan); }
.hu-seite .hu-abschnitt-erster { margin-top: 8px; }
.hu-warnung { color: var(--yellow); border-color: rgba(245,224,0,0.45); font-size: 0.92rem; margin: 0 0 12px; }
.hu-neu .hu-termin { grid-template-columns: 104px 1fr; }
.hu-neu .hu-zeit { color: var(--muted); white-space: nowrap; }
.hu-neu .hu-art-dlr-frei .hu-zeit, .hu-neu .hu-art-dlr-frei b,
.hu-neu .hu-art-problem .hu-zeit, .hu-neu .hu-art-problem b { color: var(--yellow); }
.hu-neu .hu-art-bestellung .hu-zeit, .hu-neu .hu-art-gaestebuch .hu-zeit,
.hu-neu .hu-art-upload .hu-zeit, .hu-neu .hu-art-dlr-neu .hu-zeit,
.hu-neu .hu-art-ausschreibung .hu-zeit, .hu-neu .hu-art-geschaeft .hu-zeit { color: var(--cyan); }
/* Gelesenes bleibt stehen, tritt aber zurueck. Steht nach den Farbregeln, damit es sie schlaegt. */
.hu-neu .hu-termin.ist-erledigt .hu-zeit, .hu-neu .hu-termin.ist-erledigt b { color: var(--muted); font-weight: 500; }
.hu-neu + .btn { margin-top: 12px; }
/* Klappe mit dem Gelesenen: wie die Kalender-Klappe, nur ohne deren Seitenabstand in der Liste. */
.hu-seite > #hu-inhalt > #hu-alt { margin-top: 12px; }
#hu-alt[open] > summary { margin-bottom: 4px; }
#hu-dlr .hu-neu + .hu-klein { margin: 10px 2px 0; }
@media (max-width: 560px) { .hu-neu .hu-termin { grid-template-columns: 1fr; gap: 2px; } }

/* Tagesplan: vor dem Aufstehen ein grosser Knopf, danach der Tag als Zeitleiste. Lernbloecke
   haben rechts einen Haken zum Antippen (mind. 44 px), der laufende Block ist markiert. */
.hu-plan { margin-bottom: 0; }
.hu-plan-ganztags { margin: 0 0 6px; }
.hu-plan-weiter { margin-bottom: 14px; }
.hu-plan[hidden] { display: none; }
.hu-plan .hu-termin { grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; }
.hu-plan .hu-zeit small { display: block; color: var(--muted); font-size: 0.66rem; margin-top: 1px; white-space: nowrap; }
.hu-plan .ist-erledigt .hu-zeit { opacity: 0.55; }
.hu-plan .ist-jetzt .hu-was b::after { content: 'jetzt'; margin-left: 8px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; color: var(--cyan); }
.hu-haken { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer; white-space: nowrap; }
.hu-haken[aria-pressed="true"] { border-color: rgba(245,224,0,0.45); color: var(--yellow); }
.hu-haken:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hu-plan-balken { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-top: 16px; }
.hu-plan-balken i { display: block; height: 6px; border-radius: 3px; background: var(--ink); margin-top: 6px; overflow: hidden; }
.hu-plan-balken i::after { content: ''; display: block; height: 100%; width: var(--w, 0%); background: var(--yellow); }
.hu-plan-zeit { margin-top: 10px; }
.hu-plan-zeit > summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.hu-plan-zeit > summary::-webkit-details-marker { display: none; }
.hu-plan-zeit label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }
.hu-plan-zeit input { background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono); font-size: 16px; color-scheme: dark; }

/* Aufträge finden (admin-auftraege): Ausschreibungen und Geschäfte ohne Webseite als Zeilen zum
   Aufklappen. Zugeklappt nur Name, Branche, Ort. Aufgeklappt Anschrift, Links und die Knöpfe. */
.hu-chip.tuerkis { color: var(--cyan); border-color: rgba(51,230,224,0.45); }
.af-liste { padding: 2px 16px; }
.af-leer { margin: 12px 0; }
.af-fund { border-bottom: 1px solid var(--line); }
.af-fund:last-child { border-bottom: none; }
.af-fund > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 0; min-height: 44px; }
.af-fund > summary::-webkit-details-marker { display: none; }
.af-fund > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.af-fund > summary::after { content: '›'; flex: none; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform 0.18s ease; }
.af-fund[open] > summary::after { transform: rotate(90deg); }
.af-fund > summary:hover .af-kopf b { color: var(--cyan); }
.af-fund .hu-chip { flex: none; white-space: nowrap; }
.af-kopf { flex: 1; min-width: 0; }
.af-kopf b { display: block; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.af-kopf small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 1px; overflow-wrap: anywhere; }
.af-mehr { padding: 0 0 14px; color: var(--muted); font-size: 0.88rem; }
.af-mehr p { margin: 0 0 4px; overflow-wrap: anywhere; }
.af-mehr a { color: var(--cyan); }
.af-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.af-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.af-branche { margin-left: auto; }
.af-branche select { min-height: 44px; background: var(--ink); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 0 12px; font-family: var(--font-mono); font-size: 16px; color-scheme: dark; }
.hu-seite > #af-inhalt > .af-recht { margin-top: 26px; }
@media (max-width: 560px) { .af-branche { margin-left: 0; width: 100%; } .af-branche select { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .af-fund > summary::after { transition: none; } }

/* Desktop: Karten nebeneinander (Knöpfe unten auf einer Linie), darunter zwei Spalten.
   Erst ab 1100 px, weil die Sidebar 220 px schluckt und drei Karten sonst zu schmal werden. */
@media (min-width: 1100px) {
  .hu-seite { max-width: 1180px; }
  .hu-karten { grid-template-columns: repeat(3, 1fr); }
  .hu-karten .hu-karte { display: flex; flex-direction: column; }
  .hu-karten .hu-karte > .hu-breit { margin-top: auto; }
  .hu-karten .hu-karte > :has(+ .hu-breit) { margin-bottom: 14px; }
  .hu-wege { grid-template-columns: 1fr 1fr; }
}

/* ---------- Webseiten für Betriebe (webseiten.html) ----------
   Zielseite für Postkarte, QR-Code und Gespräch vor Ort. Bewusst knapp: Überschrift, ein Knopf,
   vier Pakete als Zeilen mit Preis. Kopfzeile und Navigation wie auf allen anderen Seiten. */
.ws-hero { padding: 72px 0 72px; overflow: hidden; }
/* Rechts das Motorrad-Foto als Hintergrund, das nach links weich ins Dunkel ausläuft (Maske
   statt harter Kante). Höchstens 640 px breit, damit es auf großen Bildschirmen nicht unter
   die Überschrift wandert. Nur ab 1280 px: darunter braucht die gelbe Zeile der Überschrift
   die ganze Breite, dann steht stattdessen der runde Kopf unter dem Einleitungssatz. */
.ws-hero { position: relative; }
.ws-hero > .container { position: relative; z-index: 1; }
.ws-kino, .ws-kino-gruss { display: none; }
.ws-ich-klein { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; }
.ws-ich-klein img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--yellow); }
.ws-ich-klein span { font-family: var(--font-hand); font-size: 1.7rem; color: var(--yellow); transform: rotate(-3deg); }
.ws-punkte { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ws-punkte li { position: relative; padding-left: 22px; color: var(--muted); font-size: 0.95rem; }
.ws-punkte li::before { content: "\2713"; position: absolute; left: 0; color: var(--cyan); }
@media (min-width: 1280px) {
  /* Bis 1440 px rutscht das Bild etwas aus dem rechten Rand, sonst stößt die Überschrift an den Arm. */
  .ws-kino { display: block; position: absolute; top: 0; right: min(0px, calc((100vw - 1440px) * 0.55)); width: min(44vw, 640px); height: 100%; object-fit: cover; object-position: 40% 58%;
    -webkit-mask-image: linear-gradient(to left, #000 50%, transparent 96%); mask-image: linear-gradient(to left, #000 50%, transparent 96%); }
  .ws-kino-gruss { display: block; position: absolute; z-index: 1; top: 34px; right: max(40px, calc((100vw - 1160px) / 2 + 24px)); margin: 0; font-family: var(--font-hand); font-size: 2.3rem; line-height: 1; color: var(--yellow); transform: rotate(-6deg); text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
  .ws-ich-klein { display: none; }
}
/* Desktop: zwei Zeilen, der gelbe Teil steht ungebrochen in der zweiten. Am Handy bricht er frei um. */
@media (min-width: 861px) { .ws-hero h1 .accent { display: block; white-space: nowrap; } }
.ws-hero .hero-lead { max-width: 60ch; }

/* Pakete: Zeilen statt Karten. Name links, Preis und Demo rechts. */
.ws-preise { padding: 56px 0 64px; }
.ws-wahl { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.ws-wahl button { min-width: 96px; min-height: 44px; padding: 0 18px; border: none; border-radius: 7px; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; }
.ws-wahl button:hover { color: var(--paper); }
.ws-wahl button[aria-checked="true"] { background: var(--yellow); color: var(--ink); }
.ws-wahl button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ws-paket { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 36px; padding: 18px 0; border-top: 1px solid var(--line); }
.ws-pakete .ws-paket:last-child { border-bottom: 1px solid var(--line); }
.ws-paket h3 { font-family: var(--font-head); margin: 0; }
.ws-paket .service-price { font-size: 1.05rem; justify-content: flex-end; }
.ws-demo { font-family: var(--font-mono); font-size: 0.82rem; color: var(--paper); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.ws-demo:hover { border-color: var(--yellow); color: var(--yellow); }
.ws-demo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ws-preise .service-note + .service-note { margin-top: 6px; }

/* Abschnittsköpfe: Überschrift links, Umschalter rechts. */
.ws-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ws-kopfzeile h2 { margin: 0; }
.ws-kopfzeile .ws-wahl { margin-bottom: 0; }
.ws-text { color: var(--muted); max-width: 60ch; margin: 0; }

/* Fahrzeug-Videos: drei Pakete nebeneinander. */
.ws-video-pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ws-video-paket { padding: 20px 20px 20px 0; }
.ws-video-paket + .ws-video-paket { padding-left: 20px; border-left: 1px solid var(--line); }
.ws-video-paket h3 { font-family: var(--font-head); margin: 0 0 4px; }
.ws-video-paket p { color: var(--muted); font-size: 0.92rem; margin: 0 0 10px; }

/* Anfrage: am Desktop eine Zeile über die ganze Breite (drei Felder und der Knopf), am Handy
   untereinander. */
.ws-seite #anfrage { scroll-margin-top: 80px; }
.ws-anfrage h2 { margin-bottom: 24px; }
.ws-formular { display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr 0.9fr auto; gap: 14px; align-items: end; }
.ws-formular .form-field { margin-bottom: 0; }
.ws-formular .btn { min-height: 50px; justify-content: center; white-space: nowrap; }
.ws-anfrage .form-note { margin-top: 16px; }
.ws-anfrage .form-note a { color: var(--cyan); }

@media (max-width: 860px) {
  .ws-hero { padding: 48px 0 52px; }
  .ws-formular { grid-template-columns: 1fr; gap: 18px; }
  .ws-video-pakete { grid-template-columns: 1fr; }
  .ws-video-paket, .ws-video-paket + .ws-video-paket { padding: 16px 0; border-left: none; }
  .ws-video-paket + .ws-video-paket { border-top: 1px solid var(--line); }
  .ws-formular .btn { width: 100%; }
  .ws-hero .hero-actions .btn { width: 100%; justify-content: center; }
  .ws-preise { padding: 36px 0 44px; }
  .ws-paket { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .ws-paket h3 { grid-column: 1 / -1; }
  .ws-paket .service-price { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .ws-wahl { display: flex; }
  .ws-wahl button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ws-wahl button { transition: none; } }

/* ---------- Services-Übersicht (dienstleistungen.html) ----------
   Zwei große Kacheln zu den Seiten für Webseiten und Fahrzeug-Videos, darunter die
   Kooperationen für Marken. */
.ue-hero { padding: 72px 0 80px; }
/* "für Betriebe." steht immer als eigene gelbe Zeile, statt dass nur ein Wort umbricht. */
.ue-hero h1 .accent { display: block; }
.ue-hero .hero-lead { max-width: 62ch; }
.ue-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.ue-kachel { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 64px 26px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--paper); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.ue-kachel:hover { border-color: var(--yellow); transform: translateY(-2px); }
.ue-kachel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ue-kachel-kopf { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ue-kachel-text { color: var(--muted); max-width: 46ch; }
.ue-kachel-preis { font-family: var(--font-mono); color: var(--yellow); margin-top: 6px; }
.ue-kachel-pfeil { position: absolute; top: 26px; right: 26px; font-size: 1.4rem; line-height: 1; color: var(--muted); transition: transform 0.2s ease, color 0.2s ease; }
.ue-kachel:hover .ue-kachel-pfeil { color: var(--yellow); transform: translateX(3px); }
@media (max-width: 860px) {
  .ue-hero { padding: 48px 0 56px; }
  .ue-kacheln { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .ue-kachel, .ue-kachel-pfeil { transition: none; } }