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

:root {
  --radius:       5px;
  --radius-sm:    3px;
  --radius-lg:    8px;
  --radius-pill:  999px;
  --transition:   .2s cubic-bezier(.23,1,.32,1);
  --font-display: 'Sora', 'Inter', sans-serif;
  --font-sans:    'Inter', sans-serif;
}

.theme-dark {
  --bg:          #191713;
  --bg2:         #131110;
  --surface:     #221f1a;
  --surface2:    #2b2721;
  --border:      #453f36;
  --border-h:    #7e7466;
  --text:        #f3f0ea;
  --text-2:      #bab2a5;
  --text-3:      #948b7d;
  --accent:      #7cc49b;
  --accent-soft: rgba(124,196,155,.13);
  --accent-h:    #a3d9ba;
  --on-accent:   #10201a;
  --tag-new-bg:  #221f1a;
  --tag-new-fg:  #7cc49b;
  --tag-sale-bg: #221f1a;
  --tag-sale-fg: #dfa85e;
  --card-hover:  rgba(255,255,255,.025);
  --shadow:      none;
  --shadow-lg:   0 12px 34px rgba(0,0,0,.55);
  --pill-bg:     #221f1a;
  --pill-border: #453f36;
}

.theme-light {
  --bg:          #ffffff;
  --bg2:         #f7f7f7;
  --surface:     #ffffff;
  --surface2:    #f4f4f4;
  --border:      #e3e3e3;
  --border-h:    #7c7c7c;
  --text:        #111111;
  --text-2:      #454545;
  --text-3:      #6a6a6a;
  --accent:      #0b6e4a;
  --accent-soft: rgba(11,110,74,.08);
  --accent-h:    #085239;
  --on-accent:   #ffffff;
  --tag-new-bg:  #ffffff;
  --tag-new-fg:  #0b6e4a;
  --tag-sale-bg: #ffffff;
  --tag-sale-fg: #8a5200;
  --card-hover:  rgba(17,17,17,.02);
  --shadow:      none;
  --shadow-lg:   0 10px 30px rgba(0,0,0,.09);
  --pill-bg:     #ffffff;
  --pill-border: #e3e3e3;
}

.admin-page, .ed-root {
  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    10px;
  --radius-pill:  999px;
  --transition:   .2s cubic-bezier(.23,1,.32,1);
  --font-display: 'Sora', 'Inter', sans-serif;
  --font-sans:    'Inter', sans-serif;
  --bg:          #ffffff;
  --bg2:         #f7f7f8;
  --surface:     #ffffff;
  --surface2:    #f3f4f6;
  --border:      #e4e4e8;
  --border-h:    #7b7b85;
  --text:        #14141a;
  --text-2:      #4a4a55;
  --text-3:      #6e6e79;
  --accent:      #3b3fa8;
  --accent-soft: rgba(59,63,168,.08);
  --accent-h:    #2b2e85;
  --on-accent:   #ffffff;
  --tag-new-bg:  #ffffff;
  --tag-new-fg:  #3b3fa8;
  --tag-sale-bg: #ffffff;
  --tag-sale-fg: #8a5200;
  --card-hover:  rgba(20,20,26,.03);
  --shadow:      none;
  --shadow-lg:   0 10px 30px rgba(20,20,26,.12);
  --pill-bg:     #ffffff;
  --pill-border: #e4e4e8;
}

.theme-dark .admin-page, .ed-root.theme-dark {
  --bg:          #15161c;
  --bg2:         #101116;
  --surface:     #1c1e26;
  --surface2:    #242733;
  --border:      #343846;
  --border-h:    #7d8296;
  --text:        #eef0f6;
  --text-2:      #b2b7c6;
  --text-3:      #8c92a3;
  --accent:      #9da2f0;
  --accent-soft: rgba(157,162,240,.13);
  --accent-h:    #bcc0f7;
  --on-accent:   #14152e;
  --tag-new-bg:  #1c1e26;
  --tag-new-fg:  #9da2f0;
  --tag-sale-bg: #1c1e26;
  --tag-sale-fg: #e0a95f;
  --card-hover:  rgba(255,255,255,.03);
  --shadow:      none;
  --shadow-lg:   0 12px 34px rgba(0,0,0,.5);
  --pill-bg:     #1c1e26;
  --pill-border: #343846;
}

.ed-root {
  --site-bg:          #ffffff;
  --site-bg2:         #f7f7f7;
  --site-surface:     #ffffff;
  --site-surface2:    #f4f4f4;
  --site-border:      #e3e3e3;
  --site-border-h:    #7c7c7c;
  --site-text:        #111111;
  --site-text-2:      #454545;
  --site-text-3:      #6a6a6a;
  --site-accent:      #0b6e4a;
  --site-accent-soft: rgba(11,110,74,.08);
  --site-accent-h:    #085239;
  --site-on-accent:   #ffffff;
  --site-tag-new-bg:  #ffffff;
  --site-tag-new-fg:  #0b6e4a;
  --site-tag-sale-bg: #ffffff;
  --site-tag-sale-fg: #8a5200;
  --site-card-hover:  rgba(17,17,17,.02);
  --site-shadow:      none;
  --site-shadow-lg:   0 10px 30px rgba(0,0,0,.09);
  --site-pill-bg:     #ffffff;
  --site-pill-border: #e3e3e3;
}

.ed-root.theme-dark {
  --site-bg:          #191713;
  --site-bg2:         #131110;
  --site-surface:     #221f1a;
  --site-surface2:    #2b2721;
  --site-border:      #453f36;
  --site-border-h:    #7e7466;
  --site-text:        #f3f0ea;
  --site-text-2:      #bab2a5;
  --site-text-3:      #948b7d;
  --site-accent:      #7cc49b;
  --site-accent-soft: rgba(124,196,155,.13);
  --site-accent-h:    #a3d9ba;
  --site-on-accent:   #10201a;
  --site-tag-new-bg:  #221f1a;
  --site-tag-new-fg:  #7cc49b;
  --site-tag-sale-bg: #221f1a;
  --site-tag-sale-fg: #dfa85e;
  --site-card-hover:  rgba(255,255,255,.025);
  --site-shadow:      none;
  --site-shadow-lg:   0 12px 34px rgba(0,0,0,.55);
  --site-pill-bg:     #221f1a;
  --site-pill-border: #453f36;
}

.ed-root .theme-light, .ed-root .theme-dark {
  --radius:       5px;
  --radius-sm:    3px;
  --radius-lg:    8px;
  --radius-pill:  999px;
  --transition:   .2s cubic-bezier(.23,1,.32,1);
  --font-display: 'Sora', 'Inter', sans-serif;
  --font-sans:    'Inter', sans-serif;
}


/* Rueckfallwert fuer die Fehlerfarbe. Das aktive Theme setzt sie je Modus;
   ohne diesen Wert stuende ein Kundentheme, das sie vergisst, ohne Farbe da. */
.theme-light, .theme-dark { --fehler: #b91c1c; --warnung: #b45309; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-Schutz: kein horizontales Wackeln durch einzelne Ausreisser.
   "clip" statt "hidden", damit position:sticky intakt bleibt. */
html, body { overflow-x: clip; }
img, video { max-width: 100%; }

.shop {
  /* Frueher 100vh, als die Seite ihre eigene Kopfzeile mitbrachte. Die kommt
     jetzt aus dem Layout - 100vh wuerde also Kopfzeile PLUS voller Schirm
     ergeben und auf kurzen Seiten unnoetig scrollen lassen. Der Hintergrund
     kommt ohnehin vom body. */
  min-height: 55vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  transition: background var(--transition), color var(--transition);
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-h); background: var(--surface2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn-dark {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.btn-dark:hover { opacity: .85; background: var(--text); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: transparent; }

.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-sm); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── Formulare ──────────────────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Badges & Pills ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* ── Typo ───────────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}
.section-sub {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Karten-Basis ───────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Icon-Spinner (Lucide LoaderCircle) */
@keyframes icon-spin { to { transform: rotate(360deg); } }
.icon-spin { animation: icon-spin .8s linear infinite; }

/* Scrollbars dezent (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: var(--radius-sm); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Barrierefreiheit (BFSG) ──────────────────────────────────────────────── */
/* Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen (Maus-Klicks
   bleiben ohne Ring dank :focus-visible). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Skip-Link: unsichtbar, bis er per Tab fokussiert wird */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
/* Bewegungs-Reduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.blog-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 20px 80px; }
.blog-head { text-align: center; margin-bottom: 28px; }
.blog-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.blog-h1 { font-family: var(--font-display); font-size: 38px; line-height: 1.1; margin: 0 0 10px; color: var(--text); letter-spacing: -.02em; }
.blog-lead { color: var(--text-2); font-size: 17px; margin: 0; }
.blog-empty { text-align: center; color: var(--text-3); padding: 48px 0; }

.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 28px; }
.blog-cat { font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; background: var(--surface); transition: color .15s, border-color .15s, background .15s; }
.blog-cat:hover { color: var(--text); border-color: var(--border-h); }
.blog-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.blog-cat-n { opacity: .6; font-size: 11px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-h); }
.blog-card-cover { aspect-ratio: 16 / 9; background: var(--surface2); overflow: hidden; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface2), var(--border)); }
.blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.blog-card-title { font-family: var(--font-display); font-size: 19px; line-height: 1.25; margin: 0; color: var(--text); }
.blog-card-excerpt { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { font-size: 12.5px; color: var(--text-3); margin-top: auto; }

.blog-pager { display: flex; gap: 6px; justify-content: center; margin-top: 34px; }
.blog-pg { min-width: 38px; text-align: center; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; font-size: 14px; }
.blog-pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Beitragsseite */
.blog-article { max-width: 760px; }
.blog-back { display: inline-block; color: var(--text-3); text-decoration: none; font-size: 13.5px; margin-bottom: 16px; }
.blog-back:hover { color: var(--text); }
.blog-article-cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.blog-article-title { font-family: var(--font-display); font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; color: var(--text); }
.blog-article-meta { font-size: 13.5px; color: var(--text-3); margin-bottom: 22px; }
.blog-article-cover { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; }
.blog-article-cover img { width: 100%; height: auto; display: block; }
.blog-article-body { font-size: 17px; line-height: 1.75; color: var(--text); }
.blog-article-body h2 { font-family: var(--font-display); font-size: 25px; margin: 32px 0 12px; }
.blog-article-body h3 { font-family: var(--font-display); font-size: 20px; margin: 26px 0 10px; }
.blog-article-body p { margin: 0 0 16px; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 16px; padding-left: 24px; }
.blog-article-body li { margin: 4px 0; }
.blog-article-body a { color: var(--accent); text-decoration: underline; }
.blog-article-body blockquote { margin: 20px 0; padding: 4px 18px; border-left: 3px solid var(--accent); color: var(--text-2); font-style: italic; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); }
/* --text-3 auf --surface2 ergibt 4,42:1 und liegt damit knapp unter der
   Grenze fuer Text dieser Groesse. Eine Stufe kraeftiger reicht. */
.blog-tag { font-size: 12.5px; color: var(--text-2); background: var(--surface2); border-radius: var(--radius-pill); padding: 4px 12px; }

/* blog-list Section */
.sec-bloglist { max-width: var(--container, 1200px); margin: 0 auto; padding: 40px 20px; }
.sec-bloglist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sec-bloglist-title { font-family: var(--font-display); font-size: 26px; margin: 0; color: var(--text); }
.sec-bloglist-all { font-size: 14px; color: var(--accent); text-decoration: none; }



/* ── HEADER (Website) ── */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--transition), border-color var(--transition);
}
.hdr-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex; align-items: center; gap: 18px;
}
.brand {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; color: var(--text);
  white-space: nowrap; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hdr-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.hdr-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}
.nav-actions-desktop { display: flex; align-items: center; gap: 8px; }

/* Hamburger + Drawer sind Desktop-seitig unsichtbar */
.nav-burger {
  display: none;
  width: 38px; height: 38px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer; flex-shrink: 0;
  transition: all var(--transition);
}
.nav-burger:hover { background: var(--surface2); color: var(--text); }
.nav-drawer, .nav-drawer-overlay { display: none; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer;
  transition: all var(--transition); flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ── Mobile: Kopfzeile umbrechen statt ueberlaufen ── */
@media (max-width: 720px) {
  .hdr-inner {
    flex-wrap: wrap; height: auto;
    padding: 10px 14px; row-gap: 10px; column-gap: 10px;
  }
  .brand { font-size: 18px; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .hdr-actions { gap: 4px; }
  .icon-btn { width: 36px; height: 36px; }
  /* Sekundaeraktionen in den Drawer; der Hamburger bleibt in der Leiste */
  .nav-actions-desktop { display: none; }
  .nav-burger { display: flex; }
  /* Die Seitenlinks stehen ohnehin im Drawer. Inline gedraengt haben sie die
     Leiste auf drei Zeilen aufgeblasen - auf einem 812px hohen Schirm waren das
     175px Kopfzeile, bevor der erste Inhalt zu sehen war. */
  .hdr-nav { display: none; }
}

/* ── Mobiler Off-Canvas-Drawer (globale Navbar) ── */
.nav-drawer-overlay.open {
  display: block; position: fixed; inset: 0; z-index: 330;
  background: rgba(0,0,0,.45);
  animation: nav-fade .2s ease;
}
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 340;
  width: min(84vw, 320px);
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  flex-direction: column; gap: 6px;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.22,.8,.26,1);
  overflow-y: auto;
}
.nav-drawer.open { display: flex; transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.nav-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.nav-drawer-group {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.nav-drawer-group:last-child { border-bottom: none; }
.nav-drawer-row { flex-direction: row; align-items: center; gap: 8px; }
.nav-drawer-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: none; border: none; text-align: left; width: 100%;
  color: var(--text); font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition);
}
.nav-drawer-item:hover { background: var(--surface2); }
.nav-drawer-item svg { color: var(--text-2); flex-shrink: 0; }

/* ── Mobile Bottom-Navigation (App-Stil) ── */
.mobile-nav { display: none; }
@media (max-width: 720px) {
  .mobile-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 260;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
    color: var(--text-2); text-decoration: none; padding: 4px 0;
    position: relative;
    transition: color var(--transition);
  }
  .mobile-nav-btn:active { color: var(--accent); }
  .mobile-nav-badge {
    position: absolute; top: -2px; left: calc(50% + 6px);
    background: var(--accent); color: #fff; border-radius: 50%;
    min-width: 16px; height: 16px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
  }
  /* Platz fuer die Leiste, damit Inhalt/Pagination nicht darunter enden */
  .layout { padding-bottom: 120px; }
}



/* ── PILLS ── */
.pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--pill-bg); border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill); padding: 5px 12px 5px 10px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  cursor: pointer; font-family: var(--font-sans);
  transition: background var(--transition), color var(--transition);
}
.pill:hover { background: var(--accent-soft); color: var(--accent); }
.pill-x { opacity: .6; font-size: 14px; line-height: 1; }

/* ── GRID ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: fadeUp .25s ease both;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-h);
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}
/* Barrierefreiheit: Karten-Einblendung (inkl. inline gestaffelter Verzoegerung) bei
   reduzierter Bewegung abschalten. */
@media (prefers-reduced-motion: reduce) {
  .card { animation: none !important; animation-delay: 0s !important; }
}

/* Skeleton-Karten (Erstladen) */
.card-skeleton { cursor: default; animation: none; pointer-events: none; }
.card-skeleton:hover { transform: none; box-shadow: none; border-color: var(--border); }
.card-skeleton .card-foot { padding-top: 0; }
.sk-line { height: 12px; border-radius: var(--radius-sm); }
.sk-dot { width: 36px; height: 36px; border-radius: 50%; }
.sk-shimmer {
  background: linear-gradient(100deg, var(--surface2) 30%, var(--border) 50%, var(--surface2) 70%);
  background-size: 200% 100%;
  animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.card-img {
  aspect-ratio: 1 / 1;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: background var(--transition);
}
.card-img img { transition: transform .35s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: transform .3s, color .2s;
}
.card:hover .card-icon { transform: scale(1.08); color: var(--text-2); }

.card-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  padding: 4px 10px; border-radius: var(--radius-pill); text-transform: uppercase;
}

.card-body {
  padding: 14px 16px 10px; flex: 1;
  display: flex; flex-direction: column; gap: 7px;
}
.card-name {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  font-size: 10px; font-weight: 500;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surface2); color: var(--text-2);
  border: none;
  display: flex; align-items: center; gap: 4px;
  transition: background var(--transition);
}

.card-foot {
  padding: 0 16px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: none;
}

/* ── MENUE-LISTE: kompakte Zeilen statt Karten ── */
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-row {
  display: flex; align-items: stretch; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
  animation: fadeUp .25s ease both;
}
.menu-row:hover { border-color: var(--border-h); box-shadow: var(--shadow-lg); }
.menu-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-row-name {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.menu-row-name .card-tag { position: static; }
.menu-row-desc {
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-row-price {
  margin-top: auto; padding-top: 4px;
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.menu-row-img {
  width: 84px; height: 84px; flex-shrink: 0; align-self: center;
  border-radius: calc(var(--radius) - 4px);
  background: var(--surface2); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
.menu-row-img img { width: 100%; height: 100%; object-fit: cover; }
.menu-row-actions { display: flex; align-items: center; flex-shrink: 0; }
@media (max-width: 640px) {
  .menu-row { padding: 12px; gap: 10px; }
  .menu-row-img { width: 68px; height: 68px; }
}

/* ── EMPTY STATE ── */
.empty { grid-column: 1/-1; text-align: center; padding: 90px 20px; }
.empty-ico { margin-bottom: 16px; color: var(--text-3); display: flex; justify-content: center; }
.empty h3 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.empty p { font-size: 13px; color: var(--text-2); }



/* ── PAGINATION ── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 36px; flex-wrap: wrap;
}
.pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.pg-btn:hover:not(:disabled) {
  background: var(--surface2);
  border-color: var(--border-h);
  color: var(--text);
}
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-btn.pg-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pg-dots {
  font-size: 13px; color: var(--text-3);
  padding: 0 4px; line-height: 36px;
}



/* ── NAVBAR ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--transition), border-color var(--transition);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex; align-items: center; gap: 12px;
}
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.02em;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  transition: color var(--transition);
}
.nav-brand:hover { color: var(--text-2); }

.nav-link {
  color: var(--text-2); font-size: 14px;
  text-decoration: none; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--text); background: var(--surface2); }

.nav-spacer { flex: 1; }

.nav-theme-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: 6px 8px; border-radius: var(--radius);
  font-size: 16px; line-height: 1;
  transition: background var(--transition);
}
.nav-theme-btn:hover { background: var(--surface2); }

.nav-user-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--text-2); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.nav-user-link:hover { color: var(--text); background: var(--surface2); }

.nav-admin-link {
  color: var(--text-2); font-size: 13px;
  text-decoration: none; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  transition: all var(--transition);
}
.nav-admin-link:hover { color: var(--accent); border-color: var(--accent); }

.nav-logout-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 13px;
  padding: 6px 8px; border-radius: var(--radius);
  font-family: var(--font-sans);
  transition: color var(--transition), background var(--transition);
}
.nav-logout-btn:hover { color: var(--text-2); background: var(--surface2); }

.nav-login-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--text-2); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.nav-login-link:hover { color: var(--text); background: var(--surface2); }

.nav-register-link {
  background: var(--accent); color: #fff !important;
  font-size: 13px; text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius); font-weight: 600;
  transition: background var(--transition);
}
.nav-register-link:hover { background: var(--accent-h); }



.footer {
  margin-top: 72px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  font-family: var(--font-sans);
  transition: background var(--transition), border-color var(--transition);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 48px 20px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
}
.footer-claim { font-size: 13px; color: var(--text-2); line-height: 1.6; max-width: 280px; }

.footer-col-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 14px;
}
.footer-link {
  display: block;
  font-size: 13px; color: var(--text-2);
  text-decoration: none; padding: 4px 0;
  transition: color var(--transition);
}
.footer-link:hover { color: var(--text); }

.footer-legal {
  border-top: 1px solid var(--border);
  padding: 18px 0 24px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px;
}
.footer-legal-link {
  font-size: 12px; color: var(--text-3);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-legal-link:hover { color: var(--text-2); }
.footer-copy { font-size: 12px; color: var(--text-3); margin-left: auto; }



/* ── HERO ── */
.sec-hero {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg2);
  background-size: cover; background-position: center;
  overflow: hidden;
  transition: background var(--transition);
}
.sec-hero-s { min-height: 320px; }
.sec-hero-m { min-height: 480px; }
.sec-hero-l { min-height: calc(100vh - 140px); }
.sec-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10,10,14,.45), rgba(10,10,14,.55));
}
.sec-hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  padding-top: 56px; padding-bottom: 56px;
  display: flex; flex-direction: column; gap: 18px;
}
.sec-hero-center .sec-hero-inner { align-items: center; text-align: center; }
.sec-hero-left   .sec-hero-inner { align-items: flex-start; text-align: left; }
.sec-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.4vw, 58px);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.08;
  color: var(--text); max-width: 760px; margin: 0;
}
.sec-hero.has-image .sec-hero-heading,
.sec-hero.has-image .sec-hero-sub { color: #fff; }
.sec-hero-sub {
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.6;
  color: var(--text-2); max-width: 560px; margin: 0;
}
.sec-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── USP ── */
.sec-usp { padding: 56px 20px; }
.sec-usp-grid { display: grid; gap: 28px; }
/* Umbruch setzt nur einen anderen RUECKFALL fuer --sec-cols, statt die
   Spaltenzahl festzunageln. Das !important bleibt noetig (die Komponente
   schreibt grid-template-columns inline), aber eine Geraeteausnahme des
   Bedieners - "auf dem Handy zwei nebeneinander" - ueberlebt es jetzt.
   Vorher schlug die Regel genau die Einstellung tot, die er bewusst
   vorgenommen hatte. Gilt ebenso fuer Galerie, Kundenstimmen und Team. */
@media (max-width: 860px) { .sec-usp-grid { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; } }
@media (max-width: 480px) { .sec-usp-grid { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; } }
.sec-usp-item { display: flex; flex-direction: column; gap: 8px; }
.sec-usp-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.sec-usp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.sec-usp-text  { font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ── RICHTEXT ── */
.sec-richtext { padding: 40px 20px; }
.sec-richtext.narrow .sec-richtext-body { max-width: 720px; margin: 0 auto; }
.sec-richtext-body { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.sec-richtext-body h2, .sec-richtext-body h3, .sec-richtext-body h4 {
  font-family: var(--font-display); font-weight: 700; color: var(--text);
  margin: 1.4em 0 .5em; letter-spacing: -.01em;
}
.sec-richtext-body h2:first-child, .sec-richtext-body p:first-child { margin-top: 0; }
.sec-richtext-body h2 { font-size: 26px; }
.sec-richtext-body h3 { font-size: 20px; }
.sec-richtext-body h4 { font-size: 16px; }
.sec-richtext-body p { margin: 0 0 1em; }
.sec-richtext-body ul, .sec-richtext-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.sec-richtext-body li { margin-bottom: .35em; }
.sec-richtext-body a { color: var(--accent); }
.sec-richtext-body blockquote {
  border-left: 3px solid var(--accent); margin: 1em 0; padding: 4px 0 4px 16px;
  color: var(--text); font-style: italic;
}

/* ── HTML-CODE ── */
.sec-htmlcode { padding: 24px 20px; }

/* ── SPACER ── */
.sec-spacer-s { height: 24px; }
.sec-spacer-m { height: 56px; }
.sec-spacer-l { height: 104px; }
.sec-spacer-divider {
  border: none; border-top: 1px solid var(--border);
  position: relative; top: 50%;
}

/* ── SLIDER (eine wischbare Reihe) ── */
.sec-slider { position: relative; }
.sec-slider-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scroll-padding: 0 4px;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-h) transparent;
  -webkit-overflow-scrolling: touch;
}
.sec-slider-track::-webkit-scrollbar { height: 8px; }
.sec-slider-track::-webkit-scrollbar-thumb {
  background: var(--border-h); border-radius: var(--radius-pill);
}
.sec-slider-track::-webkit-scrollbar-track { background: transparent; }
/* Kinder bekommen eine feste Breite und rasten ein */
.sec-slider-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 230px;
}
/* Pfeil-Buttons (Desktop) - auf Touch weggeblendet */
.sec-slider-arrow {
  position: absolute; top: calc(50% - 18px); transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.sec-slider-arrow:hover { border-color: var(--border-h); background: var(--surface2); }
.sec-slider-arrow.prev { left: -6px; }
.sec-slider-arrow.next { right: -6px; }
@media (hover: none) {
  /* Touch-Geraete: nur wischen, keine Pfeile */
  .sec-slider-arrow { display: none; }
}
@media (max-width: 640px) {
  .sec-slider-track > * { width: 180px; }
}

/* ── IMAGE + TEXT ── */
.sec-imagetext {
  padding: 56px 20px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.sec-imagetext-left .sec-imagetext-media { order: 0; }
.sec-imagetext-left .sec-imagetext-body  { order: 1; }
.sec-imagetext-right .sec-imagetext-media { order: 1; }
.sec-imagetext-right .sec-imagetext-body  { order: 0; }
@media (max-width: 760px) {
  .sec-imagetext { grid-template-columns: 1fr; gap: 24px; }
  .sec-imagetext-media { order: 0 !important; }
  .sec-imagetext-body  { order: 1 !important; }
}
.sec-imagetext-media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.sec-imagetext-placeholder {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: var(--surface2); border: 1px solid var(--border);
}
.sec-imagetext-body { display: flex; flex-direction: column; gap: 16px; }

/* ── BANNER ── */
.sec-banner { font-size: 14px; font-weight: 600; }
.sec-banner-accent { background: var(--accent); color: #fff; }
.sec-banner-soft { background: var(--accent-soft); color: var(--accent); }
.sec-banner-inner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 10px; padding-bottom: 10px; position: relative;
}
.sec-banner-link { color: inherit; text-decoration: none; }
.sec-banner-link:hover { text-decoration: underline; }
.sec-banner-close {
  position: absolute; right: 20px;
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 13px; opacity: .8; padding: 4px;
}
.sec-banner-close:hover { opacity: 1; }

/* ── FAQ ── */
.sec-faq { padding: 56px 20px; max-width: 860px; }
.sec-faq-title { margin: 0 0 24px; }
.sec-faq-list { display: flex; flex-direction: column; gap: 10px; }
.sec-faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--transition);
}
.sec-faq-item[open] { border-color: var(--border-h); }
.sec-faq-q {
  padding: 16px 20px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text);
  list-style: none; position: relative;
  user-select: none;
}
.sec-faq-q::-webkit-details-marker { display: none; }
.sec-faq-q::after {
  content: "+"; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--text-3);
  transition: transform var(--transition);
}
.sec-faq-item[open] .sec-faq-q::after { content: "−"; }
/* Nur mit Icon wird die Zeile zur Flexzeile - ohne Icon bleibt das Markup
   und damit die Darstellung exakt wie vorher. Der zusaetzliche rechte
   Innenabstand haelt lange Fragen vom +/− weg. */
.sec-faq-q.has-icon { display: flex; align-items: center; gap: 10px; padding-right: 46px; }
.sec-faq-icon { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.sec-faq-a {
  padding: 0 20px 16px;
  font-size: 14px; line-height: 1.7; color: var(--text-2);
}

/* ── NEWSLETTER ── */
.sec-newsletter { background: var(--bg2); padding: 64px 20px; transition: background var(--transition); }
.sec-newsletter-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px; max-width: 560px;
}
.sec-newsletter-form {
  display: flex; gap: 8px; width: 100%; max-width: 440px; margin-top: 8px;
}
.sec-newsletter-form .input { flex: 1; }
.sec-newsletter-ok { color: #16a34a; font-weight: 600; font-size: 15px; }
.sec-newsletter-err { color: #dc2626; font-size: 13px; }
@media (max-width: 480px) { .sec-newsletter-form { flex-direction: column; } }

/* ── CONTACT (Kontaktformular) ── */
.sec-contact { padding: 56px 20px; }
.sec-contact-inner { max-width: 640px; }
.sec-contact-form {
  display: flex; flex-direction: column; gap: 16px; margin-top: 20px;
}
.sec-contact-field { display: flex; flex-direction: column; gap: 6px; }
.sec-contact-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sec-contact-textarea { min-height: 150px; resize: vertical; }
.sec-contact-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  cursor: pointer;
}
.sec-contact-privacy input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.sec-contact-form .btn { align-self: flex-start; }
/* Honeypot: aus dem Bild geschoben statt display:none -
   manche Bots ueberspringen display:none-Felder. */
.sec-contact-hp {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* Kontaktwege ueber dem Formular. Erscheinen nur, wenn welche gepflegt sind. */
.sec-contact-ways {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sec-contact-way {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sec-contact-way-link {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; width: 100%;
}
.sec-contact-way-link:hover .sec-contact-way-value { color: var(--accent); }
.sec-contact-way-icon {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-contact-way-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sec-contact-way-label {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-3);
}
.sec-contact-way-value {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow-wrap: anywhere; transition: color var(--transition);
}
.sec-contact-ok { color: #16a34a; font-weight: 600; font-size: 15px; margin-top: 16px; }
.sec-contact-err { color: #dc2626; font-size: 13px; margin: 0; }

/* ── GALLERY ── */
.sec-gallery { padding: 48px 20px; }
.sec-gallery-grid { display: grid; gap: 14px; }
@media (max-width: 760px) { .sec-gallery-grid { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; } }
.sec-gallery-item { margin: 0; }
.sec-gallery-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
  transition: transform .25s ease;
}
.sec-gallery-item img:hover { transform: scale(1.02); }
.sec-gallery-caption { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ── TESTIMONIALS (Kundenstimmen) ── */
.sec-testimonials { padding: 56px 20px; }
.sec-testimonials-title { margin: 0 0 24px; }
.sec-testimonials-grid { display: grid; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .sec-testimonials-grid { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; } }
@media (max-width: 560px) { .sec-testimonials-grid { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; } }
.sec-testimonials-item {
  margin: 0;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  transition: border-color var(--transition);
}
.sec-testimonials-item:hover { border-color: var(--border-h); }
.sec-testimonials-quote {
  margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-2);
}
.sec-testimonials-person {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
}
.sec-testimonials-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto;
}
.sec-testimonials-name { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.sec-testimonials-role { display: block; font-size: 12px; color: var(--text-3); }
/* Slider-Variante: Zitat-Karten brauchen mehr Breite als der Standard-Track */
.sec-testimonials .sec-slider-track > * { width: 320px; }
@media (max-width: 640px) {
  .sec-testimonials .sec-slider-track > * { width: 260px; }
}

/* ── LOGO-LEISTE ── */
.sec-logobar { padding: 40px 20px; }
.sec-logobar-title {
  text-align: center; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 22px;
}
.sec-logobar-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 28px 48px;
}
.sec-logobar-item { display: flex; align-items: center; text-decoration: none; }
.sec-logobar-item img {
  display: block; max-height: 48px; max-width: 160px;
  width: auto; height: auto; object-fit: contain;
  transition: filter var(--transition), opacity var(--transition);
}
/* Entfaerbt-Modus: grau in Ruhe, Farbe bei Hover */
.sec-logobar-gray .sec-logobar-item img { filter: grayscale(1); opacity: .65; }
.sec-logobar-gray .sec-logobar-item:hover img { filter: none; opacity: 1; }
@media (max-width: 560px) {
  .sec-logobar-row { gap: 20px 28px; }
  .sec-logobar-item img { max-height: 36px; max-width: 120px; }
}

/* ── TEAM ── */
.sec-team { padding: 56px 20px; }
.sec-team-title { margin: 0 0 28px; }
.sec-team-grid { display: grid; gap: 32px 28px; }
@media (max-width: 860px) { .sec-team-grid { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; } }
@media (max-width: 480px) { .sec-team-grid { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; } }
.sec-team-member {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
}
.sec-team-member img, .sec-team-placeholder {
  width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  margin-bottom: 10px;
}
.sec-team-placeholder { background: var(--surface2); }
/* Bildform: rund statt eckig (Schalter der Sektion) */
.sec-team-round .sec-team-member img,
.sec-team-round .sec-team-placeholder { border-radius: 50%; }
.sec-team-name { font-size: 15px; font-weight: 700; color: var(--text); }
.sec-team-role { font-size: 13px; font-weight: 600; color: var(--accent); }
.sec-team-text { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ── PREISTABELLE ── */
.sec-pricing { padding: 56px 20px; }
.sec-pricing-title { margin: 0 0 32px; text-align: center; }
.sec-pricing-grid { display: grid; gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .sec-pricing-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .sec-pricing-grid { grid-template-columns: 1fr !important; } }
.sec-pricing-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
  transition: border-color var(--transition);
}
.sec-pricing-card:hover { border-color: var(--border-h); }
/* Hervorgehobenes Paket: Akzentrahmen, leicht angehoben, Badge oben */
.sec-pricing-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
@media (min-width: 981px) {
  .sec-pricing-card.highlight { transform: translateY(-8px); }
}
.sec-pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sec-pricing-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-pricing-name { font-size: 16px; font-weight: 700; color: var(--text); }
.sec-pricing-price {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; color: var(--text);
}
.sec-pricing-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.sec-pricing-features {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sec-pricing-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.sec-pricing-check { color: var(--accent); flex: 0 0 auto; margin-top: 1px; display: flex; }
.sec-pricing-cta { margin-top: auto; padding-top: 12px; }
.sec-pricing-cta .btn { width: 100%; justify-content: center; }

/* ═══ ZEIT UND KURZANGABEN: Öffnungszeiten, Termine, Auf einen Blick ═══ */

/* ── ÖFFNUNGSZEITEN ── */
.sec-zeiten { padding: 56px 20px; }
.sec-zeiten-title { margin: 0 0 20px; }
/* Der leere Zustand des Banderoles: kein Kasten, keine Farbe, keine Hoehe -
   solange der Browser nicht gerechnet hat, soll dort nichts stehen. */
.sec-zeiten-status-leer { margin: 0; }
.sec-zeiten-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2);
  font-size: 13px; font-weight: 700; line-height: 1.4;
  overflow-wrap: anywhere;
}
.sec-zeiten-status::before {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-3);
}
.sec-zeiten-status.auf { color: var(--text); border-color: var(--accent); }
.sec-zeiten-status.auf::before { background: var(--accent); }
.sec-zeiten-tabelle { width: 100%; border-collapse: collapse; }
.sec-zeiten-zeile { border-bottom: 1px solid var(--border); }
.sec-zeiten-zeile:first-child { border-top: 1px solid var(--border); }
.sec-zeiten-tabelle th, .sec-zeiten-tabelle td {
  padding: 11px 10px; text-align: left; vertical-align: baseline;
  overflow-wrap: anywhere;
}
.sec-zeiten-tabelle th:first-child, .sec-zeiten-tabelle td:first-child { padding-left: 0; }
.sec-zeiten-tabelle td:last-child { padding-right: 0; }
.sec-zeiten-tag { font-size: 15px; font-weight: 700; color: var(--text); }
.sec-zeiten-art { font-size: 13px; color: var(--text-2); }
.sec-zeiten-zeiten {
  text-align: right; font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sec-zeiten-zu { color: var(--text-3); }
.sec-zeiten-und { color: var(--text-3); font-size: 13px; }
.sec-zeiten-uhr { margin-left: .35em; font-size: 13px; color: var(--text-2); }
.sec-zeiten-leer { font-size: 13px; font-style: italic; color: var(--text-3); }
.sec-zeiten-hinweis {
  margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-zeiten-hinweisleer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}
@media (max-width: 560px) {
  /* Kartenzeilen statt waagerechtem Scrollen: Tag fett, darunter die Zeiten.
     Zeiten, die man wegwischen muss, sind keine Zeiten mehr. */
  .sec-zeiten-tabelle, .sec-zeiten-tabelle tbody, .sec-zeiten-zeile,
  .sec-zeiten-tabelle th, .sec-zeiten-tabelle td { display: block; width: auto; }
  .sec-zeiten-zeile { padding: 11px 0; }
  .sec-zeiten-tabelle th, .sec-zeiten-tabelle td { padding: 0; }
  .sec-zeiten-art { margin-top: 1px; }
  .sec-zeiten-zeiten { text-align: left; margin-top: 3px; }
}

/* ── TERMINE UND VERANSTALTUNGEN ── */
.sec-termine { padding: 56px 20px; }
.sec-termine-title { margin: 0 0 24px; }
.sec-termine-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.sec-termine-item {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: border-color var(--transition);
}
.sec-termine-item:hover { border-color: var(--border-h); }
.sec-termine-datum {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  min-width: 64px; padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  line-height: 1.1; text-align: center;
}
.sec-termine-datum-tag { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.sec-termine-datum-monat {
  margin-top: 2px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.sec-termine-datum-jahr { margin-top: 3px; font-size: 11px; color: var(--text-3); }
.sec-termine-datum-offen { font-size: 12px; font-weight: 700; }
.sec-termine-inhalt { flex: 1 1 auto; min-width: 0; }
.sec-termine-titel {
  margin: 0 0 5px; font-size: 16px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.sec-termine-meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px;
  font-size: 13px; color: var(--text-2); overflow-wrap: anywhere;
}
/* Trennpunkt zwischen den Angaben - er steht IM Element und nicht dazwischen,
   damit er beim Umbruch mitwandert statt allein am Zeilenende zu haengen. */
.sec-termine-meta > span + span::before {
  content: "· "; color: var(--text-3);
}
.sec-termine-text {
  margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-termine-link { margin-top: 12px; }
.sec-termine-leer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}
@media (max-width: 560px) {
  .sec-termine-item { flex-direction: column; gap: 12px; }
  .sec-termine-datum {
    flex-direction: row; align-items: baseline; gap: 7px;
    min-width: 0; align-self: flex-start; padding: 6px 11px;
  }
  .sec-termine-datum-tag { font-size: 19px; }
  .sec-termine-datum-monat, .sec-termine-datum-jahr { margin-top: 0; }
}

/* ── AUF EINEN BLICK ── */
/* Bewusst deutlich weniger Innenabstand als usp-row (dort 56px): dieser
   Streifen sitzt direkt unter dem Startbereich und muss leichter wirken als
   ein eigener Abschnitt - das ist der ganze Grund fuer seine Existenz. */
.sec-schnell { padding: 24px 20px; }
.sec-schnell-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px 26px; align-items: center;
}
/*
 * Die Umbruchregeln setzen NICHT eine feste Spaltenzahl, sondern nur einen
 * anderen RUECKFALL fuer --sec-cols. Damit gilt weiterhin, was der Bediener
 * unter "Auf Tablet oder Handy anders" eingestellt hat; ohne Einstellung
 * greifen 2 bzw. 1 Spalte. Das !important ist noetig, weil die Komponente
 * grid-template-columns als Inline-Style setzt.
 */
@media (max-width: 980px) {
  .sec-schnell-liste { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; }
}
@media (max-width: 560px) {
  .sec-schnell-liste { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; }
}
.sec-schnell-item, .sec-schnell-link { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sec-schnell-link {
  text-decoration: none; color: inherit;
  border-radius: var(--radius-sm);
}
.sec-schnell-link:hover .sec-schnell-wert { color: var(--accent); }
.sec-schnell-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-schnell-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sec-schnell-label { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.sec-schnell-wert {
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere; transition: color var(--transition);
}
.sec-schnell-leer {
  margin: 0; padding: 18px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}

/* ═══ ERKLÄREN UND BEWEISEN: Ablauf, Leistungsliste, Zahlen, Vergleich ═══ */

/* Leerzustand im Editor - gleiche Form wie .sec-stellen-leer und
   .sec-termine-leer. Er erscheint NUR im Editor: auf der Website steht bei
   einem leeren Baustein weiterhin nichts. Ohne ihn verschwand der Abschnitt
   aus der Vorschau, sobald die letzte Zeile geloescht oder das Pflichtfeld
   geleert war - und war dann nur noch ueber die linke Liste erreichbar. */
.sec-schritte-leer, .sec-zahlen-leer, .sec-leistungen-leer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}

/* ── ABLAUF IN SCHRITTEN ── */
.sec-schritte { padding: 56px 20px; }
.sec-schritte-title { margin: 0 0 28px; }
.sec-schritte-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 24px; align-items: stretch;
}
/* Die feste Zahl stand hier einmal ohne var() - und schlug damit genau die
   Variable, ueber die die Geraeteabweichung ueberhaupt transportiert wird.
   Gemessen: bei responsive.columns = {md:4} und 900 px Breite stand
   --sec-cols: 4 am Element, gerendert wurden zwei Spalten. "Wie viele
   nebeneinander" war auf Tablet und Handy also eine Attrappe. Die Zahl im
   var() ist nur noch der Rueckfall, wenn nichts eingestellt ist. */
@media (max-width: 980px) {
  .sec-schritte-liste { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; }
}
@media (max-width: 560px) {
  .sec-schritte-liste { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; }
}
.sec-schritte-item {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  transition: border-color var(--transition);
}
.sec-schritte-item:hover { border-color: var(--border-h); }
.sec-schritte-kopf { display: flex; align-items: center; gap: 12px; }
/* Der Faden zum naechsten Schritt ist ein Flex-Fueller: er nimmt genau den
   Platz ein, der in der Kopfzeile uebrig bleibt. Dadurch stimmt er bei jeder
   Spaltenzahl und jeder Laenge der Jahreszahl, und er kann nie aus dem Raster
   herauslaufen. Beim letzten Schritt entfaellt er. */
.sec-schritte-kopf::after {
  content: ""; flex: 1 1 auto; min-width: 8px;
  border-top: 2px dashed var(--border);
}
.sec-schritte-item:last-child .sec-schritte-kopf::after { content: none; }
.sec-schritte-nummer {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--accent);
  overflow-wrap: anywhere;
}
/* Jahreszahlen sind laenger als eine Ziffer und duerfen die Zeile nicht sprengen. */
.sec-schritte-marke { font-size: 22px; }
.sec-schritte-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-schritte-titel {
  margin-top: 4px;
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.sec-schritte-text {
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  /* Untereinander wird aus dem waagerechten Faden ein senkrechter in der Luecke. */
  .sec-schritte-kopf::after { content: none; }
  .sec-schritte-item::after {
    content: ""; position: absolute;
    left: 50%; bottom: -24px; width: 0; height: 24px;
    border-left: 2px dashed var(--border);
  }
  .sec-schritte-item:last-child::after { content: none; }
}

/* ── LEISTUNGEN MIT PREIS ── */
.sec-leistungen { padding: 56px 20px; }
.sec-leistungen-title { margin: 0 0 24px; }
.sec-leistungen-block + .sec-leistungen-block { margin-top: 30px; }
.sec-leistungen-gruppe {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
  overflow-wrap: anywhere;
}
.sec-leistungen-zeilen { list-style: none; margin: 0; padding: 0; }
.sec-leistungen-zeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.sec-leistungen-zeile:first-child { border-top: 1px solid var(--border); }
.sec-leistungen-links {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 1 auto; min-width: 0;
}
.sec-leistungen-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  overflow-wrap: anywhere;
}
.sec-leistungen-beschreibung {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  overflow-wrap: anywhere;
}
/* Punktfuehrung: fuellt genau die Luecke zwischen Leistung und Preis. */
.sec-leistungen-fuehrung {
  flex: 1 1 auto; min-width: 12px; align-self: baseline;
  border-bottom: 1px dotted var(--border-h);
  transform: translateY(-3px);
}
.sec-leistungen-rechts {
  display: flex; align-items: baseline; gap: 12px;
  flex: 0 1 auto; max-width: 45%; text-align: right;
}
.sec-leistungen-dauer { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.sec-leistungen-preis {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.sec-leistungen-hinweis {
  margin-top: 18px;
  font-size: 12px; line-height: 1.6; color: var(--text-3);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  /* Auf dem Telefon rutscht der Preis unter die Leistung, die Punktfuehrung
     entfaellt - eine Fuehrungslinie ueber 40 px sagt nichts mehr aus. */
  .sec-leistungen-zeile { flex-wrap: wrap; }
  .sec-leistungen-fuehrung { display: none; }
  .sec-leistungen-links { flex: 1 1 100%; }
  .sec-leistungen-rechts { flex: 1 1 100%; max-width: none; margin-top: 4px; text-align: left; }
}

/* ── ZAHLEN MIT AUSSAGE ── */
.sec-zahlen { padding: 56px 20px; }
.sec-zahlen-title { margin: 0 0 28px; }
.sec-zahlen-raster { display: grid; gap: 24px; }
/* Dieselbe Reparatur wie oben bei .sec-schritte-liste: ohne var(--sec-cols)
   ueberschreibt die feste Zahl die Geraeteeinstellung. */
@media (max-width: 980px) {
  .sec-zahlen-raster { grid-template-columns: repeat(var(--sec-cols, 2), 1fr) !important; }
}
@media (max-width: 560px) {
  .sec-zahlen-raster { grid-template-columns: repeat(var(--sec-cols, 1), 1fr) !important; }
}
.sec-zahlen-item { text-align: center; padding: 8px 12px; }
/* Absichtlich KEIN Flexbox: die Teile stehen als Inline-Text nebeneinander,
   damit sie auf einer Grundlinie sitzen UND die Ausrichtung aus dem Reiter
   Aussehen greift. */
.sec-zahlen-wert {
  margin: 0;
  font-family: var(--font-display); color: var(--text);
  line-height: 1.1; letter-spacing: -.02em;
}
.sec-zahlen-zahl { font-size: 44px; font-weight: 700; overflow-wrap: anywhere; }
.sec-zahlen-vorsatz, .sec-zahlen-nachsatz {
  font-size: 21px; font-weight: 600; color: var(--accent);
  overflow-wrap: anywhere;
}
.sec-zahlen-vorsatz { margin-right: 7px; }
.sec-zahlen-nachsatz { margin-left: 3px; }
.sec-zahlen-beschriftung {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .sec-zahlen-zahl { font-size: 36px; }
  .sec-zahlen-vorsatz, .sec-zahlen-nachsatz { font-size: 18px; }
}

/* ── VORHER UND NACHHER ── */
.sec-vergleich { padding: 56px 20px; }
.sec-vergleich-title { margin: 0 0 24px; }
.sec-vergleich-rahmen {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface2);
  line-height: 0;
}
.sec-vergleich-schicht img { display: block; width: 100%; height: auto; }
/* Die obere Schicht wird ausschliesslich ueber die Variable beschnitten -
   deshalb steht der Schieber auch ohne JavaScript beim eingestellten Startwert. */
.sec-vergleich-vorher {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 calc(100% - var(--vgl-pos, 50%)) 0 0);
}
.sec-vergleich-vorher img { height: 100%; object-fit: cover; }
.sec-vergleich-platzhalter {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 240px;
  padding: 16px 20px; box-sizing: border-box;
  background: var(--surface2); border: 1px dashed var(--border-h);
  color: var(--text-3); font-size: 13px; line-height: 1.5; text-align: center;
}
/* Fehlen beide Bilder, liegen die zwei Platzhalter uebereinander. Damit man
   sieht, dass es ZWEI sind, ruecken ihre Texte nach aussen. */
.sec-vergleich-vorher .sec-vergleich-platzhalter { justify-content: flex-start; text-align: left; }
.sec-vergleich-nachher .sec-vergleich-platzhalter { justify-content: flex-end; text-align: right; }
/* Auf der Website (kein Editor) bleibt eine ruhige Flaeche ohne Wort und ohne
   gestrichelte Kante stehen - ein gestrichelter Kasten liest sich wie ein
   Fehler, und "Vorher-Bild wählen" ist eine Anweisung an den Betreiber und
   nicht an seine Besucher. */
.sec-vergleich-platzhalter-stumm { border-style: none; }
.sec-vergleich-marke {
  position: absolute; top: 12px; z-index: 3;
  max-width: 40%;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.sec-vergleich-marke-links { left: 12px; }
.sec-vergleich-marke-rechts { right: 12px; }
/* Trennlinie samt sichtbarem Griff. Beides haengt allein an --vgl-pos und
   steht deshalb auch ohne JavaScript an der richtigen Stelle. Der Griff ist
   bewusst KEIN Bedienelement - bedient wird der Regler darunter; er waere
   sonst ein zweites, tastaturblindes Steuerelement an derselben Stelle. */
.sec-vergleich-linie {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--vgl-pos, 50%); width: 2px; margin-left: -1px;
  background: var(--surface); box-shadow: var(--shadow);
  pointer-events: none;
}
.sec-vergleich-linie::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
}
/* Bedient wird ein echtes <input type="range">: es liegt als unsichtbare Bahn
   ueber dem ganzen Bild, ist mit Tab erreichbar und mit Pfeiltasten, Bild
   auf/ab und Pos1/Ende bedienbar. Sein Daumen ist absichtlich durchsichtig und
   sehr hoch - dadurch laesst sich ueberall auf der Linie greifen, waehrend der
   SICHTBARE Griff exakt bei --vgl-pos sitzt (ein breiter Daumen wuerde an den
   Enden um seine halbe Breite danebenliegen). Die Fokus-Anzeige des Browsers
   bleibt bewusst stehen. */
.sec-vergleich-regler {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; cursor: ew-resize;
}
.sec-vergleich-regler::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.sec-vergleich-regler::-moz-range-track { height: 100%; background: transparent; border: 0; }
.sec-vergleich-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 3000px;
  background: transparent; border: 0; cursor: ew-resize;
}
.sec-vergleich-regler::-moz-range-thumb {
  width: 10px; height: 3000px;
  background: transparent; border: 0; cursor: ew-resize;
}
/* Zusatz zur Fokus-Anzeige des Browsers, wo :has() verfuegbar ist. */
.sec-vergleich-rahmen:has(.sec-vergleich-regler:focus-visible) .sec-vergleich-linie::after {
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-lg);
}

/* ═══ ORT, KARRIERE UND VIDEO: Anfahrt, Stellen, Video, Zwei-Klick ═══ */

/* ── ZWEI-KLICK-EINWILLIGUNG (components/einwilligung/ZweiKlick.tsx) ──
   Wird von "video" und von "anfahrt" mit eingebetteter Karte benutzt. Steht
   hier und nicht in einer eigenen Datei, damit ein Baustein und sein Aussehen
   im selben Aenderungssatz liegen. */
.fw-zk { width: 100%; }
.fw-zk-vorschau {
  position: relative;
  aspect-ratio: var(--fw-zk-ar, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
}
.fw-zk-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.fw-zk-leer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--surface2); color: var(--text-3);
}
.fw-zk-schleier {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Der Schleier kommt aus einem Token statt aus einer festen Farbe: eine
   halbdurchsichtige eigene Ebene traegt in Hell und Dunkel, ohne dass die
   Schrift darueber mit ausbleicht. */
.fw-zk-schleier::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg); opacity: .8;
}
.fw-zk-kasten {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 460px; text-align: center;
}
.fw-zk-hinweis {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere;
}
.fw-zk-knopf { max-width: 100%; white-space: normal; }
.fw-zk-merken {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3); cursor: pointer;
}
.fw-zk-merken input { margin: 0; }
.fw-zk-fehlt { margin: 0; font-size: 13px; color: var(--text-3); }
.fw-zk-rahmen {
  position: relative;
  aspect-ratio: var(--fw-zk-ar, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
}
.fw-zk-rahmen iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.fw-zk-widerruf {
  margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3);
  overflow-wrap: anywhere;
}
.fw-zk-link {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
@media (max-width: 560px) {
  .fw-zk-schleier { padding: 14px; }
  .fw-zk-hinweis { font-size: 12px; }
}

/* ── ANFAHRT UND STANDORT ── */
.sec-anfahrt { padding: 56px 20px; }
.sec-anfahrt-title { margin: 0 0 28px; }
.sec-anfahrt-raster {
  display: grid; gap: 32px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
@media (max-width: 980px) {
  .sec-anfahrt-raster { grid-template-columns: 1fr; gap: 24px; }
}
.sec-anfahrt-spalte { min-width: 0; }
.sec-anfahrt-adresse {
  font-style: normal;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-anfahrt-name { font-size: 17px; font-weight: 700; color: var(--text); }
.sec-anfahrt-kontakt {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sec-anfahrt-kontakt li {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  font-size: 15px; color: var(--text); overflow-wrap: anywhere;
}
.sec-anfahrt-kontakt a { color: inherit; text-decoration: none; }
.sec-anfahrt-kontakt a:hover { color: var(--accent); }
.sec-anfahrt-ikon {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-anfahrt-hinweis {
  margin: 18px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-anfahrt-routen { margin-top: 22px; }
.sec-anfahrt-routen-titel { margin: 0 0 9px; font-size: 12px; color: var(--text-3); }
.sec-anfahrt-knoepfe {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.sec-anfahrt-bild {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.sec-anfahrt-bildleer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 220px; padding: 28px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; line-height: 1.6; color: var(--text-3);
}
.sec-anfahrt-leer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}

/* ── STELLENANGEBOTE ── */
.sec-stellen { padding: 56px 20px; }
.sec-stellen-title { margin: 0 0 14px; }
.sec-stellen-intro {
  margin: 0 0 26px; max-width: 70ch;
  font-size: 15px; line-height: 1.7; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-stellen-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.sec-stellen-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 24px;
  transition: border-color var(--transition);
}
.sec-stellen-item:hover { border-color: var(--border-h); }
.sec-stellen-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.sec-stellen-titel {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--text);
  overflow-wrap: anywhere;
}
.sec-stellen-marken {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px;
}
.sec-stellen-art {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.sec-stellen-ort {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-2); overflow-wrap: anywhere;
}
.sec-stellen-text {
  margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-2);
  overflow-wrap: anywhere;
}
.sec-stellen-knopf { margin-top: 16px; max-width: 100%; white-space: normal; }
.sec-stellen-leer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}
@media (max-width: 560px) {
  .sec-stellen-item { padding: 18px; }
  .sec-stellen-titel { font-size: 16px; }
}

/* ── VIDEO ── */
.sec-video { padding: 56px 20px; }
.sec-video-title { margin: 0 0 22px; }
.sec-video-zk { max-width: 900px; margin: 0 auto; }
.sec-video-tipp {
  max-width: 900px; margin: 12px auto 0; padding: 12px 14px;
  border: 1px dashed var(--border-h); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6; color: var(--text-3);
  overflow-wrap: anywhere;
}
.sec-video-leer {
  margin: 0; padding: 22px; text-align: center;
  border: 1px dashed var(--border-h); border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text-3);
}

/* ═══ ERWEITERUNGEN an Banner, Kontaktformular, Kundenstimmen, Logo-Leiste ═══ */

/* ── BANNER: Befristung (Hinweis nur im Editor) ── */
/* Der Streifen selbst wird gedaempft, der Hinweis darunter bleibt lesbar -
   deshalb sitzt die Deckkraft auf der Innenzeile und nicht auf dem Balken. */
.sec-banner-ruht .sec-banner-inner { opacity: .45; }
.sec-banner-leer { font-weight: 500; opacity: .85; }
.sec-banner-zeitraum {
  margin: 0; padding: 8px 20px 10px;
  border-top: 1px dashed currentColor;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  text-align: center; overflow-wrap: anywhere;
}

/* ── KONTAKTFORMULAR: ausgeblendete Kontaktwege (Hinweis nur im Editor) ── */
.sec-contact-ways-aus {
  margin: 0 0 8px;
  padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; color: var(--text-3);
  overflow-wrap: anywhere;
}

/* ── KUNDENSTIMMEN: Sterne und Quellenangabe ── */
.sec-testimonials-sterne {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--border);
  /* .sec-testimonials-item ist ein Spalten-Flex; ohne align-self zoege sich die
     Sternereihe auf die volle Kartenbreite, und im Editor waere die anklickbare
     Flaeche viel groesser als das, was man sieht. */
  align-self: flex-start;
  /* Die Karte setzt gap: 18px; zwischen Sternen und Zitat ist das zu viel. */
  margin-bottom: -10px;
}
.sec-testimonials-stern { display: inline-flex; }
/* Lucide setzt fill="none" als Attribut auf das <svg>; eine CSS-Regel schlaegt
   ein Praesentationsattribut, der volle Stern wird also wirklich gefuellt. */
.sec-testimonials-stern.voll { color: var(--accent); }
.sec-testimonials-stern.voll svg { fill: currentColor; }
.sec-testimonials-quelle {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--text-3);
  overflow-wrap: anywhere;
}

/* ── LOGO-LEISTE: Platzhalter, solange kein Bild hochgeladen ist (nur Editor) ── */
.sec-logobar-platzhalter {
  display: flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: 44px; padding: 0 14px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.4; color: var(--text-3); text-align: center;
  overflow-wrap: anywhere;
}
.sec-logobar-leer {
  margin: 0; padding: 16px 18px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-3); text-align: center;
}
@media (max-width: 560px) {
  .sec-logobar-platzhalter { min-width: 96px; min-height: 36px; }
}




/* ── AUTH PAGES (Login / Register) ── */
.auth-page {
  min-height: calc(100vh - 58px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
  transition: background var(--transition), border-color var(--transition);
}
.auth-card-wide { max-width: 480px; }

.auth-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px; color: var(--accent);
  text-decoration: none; display: block;
  margin-bottom: 24px; letter-spacing: -.3px;
}
.auth-logo-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
  margin-left: 1px; vertical-align: middle;
}

.auth-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px; color: var(--text);
  margin: 0 0 6px; letter-spacing: -.3px;
}
.auth-subtitle {
  margin: 0 0 28px; color: var(--text-2); font-size: 14px; line-height: 1.5;
}
.auth-subtitle a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-subtitle a:hover { text-decoration: underline; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--text-2); text-transform: uppercase; }
.auth-input {
  width: 100%; padding: 11px 14px; border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.auth-input::placeholder { color: var(--text-3); }
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}

.auth-error {
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
  color: #ef4444;
}
.auth-success {
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
  color: #22c55e;
}

.auth-btn {
  height: 46px; background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 4px;
  transition: background var(--transition), opacity var(--transition), transform .1s;
}
.auth-btn:hover:not(:disabled) { background: var(--accent-h); transform: translateY(-1px); }
.auth-btn:disabled { opacity: .65; cursor: not-allowed; }

.auth-footer {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--text-3);
}
.auth-footer a { color: var(--text-3); text-decoration: none; }
.auth-footer a:hover { color: var(--text-2); }

/* Admin login variant */
.auth-admin-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 10px; border-radius: var(--radius-lg);
  border: 1px solid var(--pill-border);
  margin-bottom: 16px;
}



/* ── ADMIN LAYOUT ── */
.admin-page {
  min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
}

/* Admin header */
.admin-hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--border);
  /* Kein backdrop-filter: der Grund ist deckend (var(--bg)), es gab also nichts
     durchscheinen zu lassen - der Browser richtete trotzdem bei jedem Bild eine
     Filterebene ueber die volle Kopfleistenbreite ein. */
  transition: background var(--transition), border-color var(--transition);
}
.admin-hdr-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 28px;
  height: 64px; display: flex; align-items: center; gap: 14px;
}
/* Wortmarke nach dem Muster von flotva wawi/kasse: Display-Schrift,
   "flotva" halbfett, der Produktname dahinter in Akzentfarbe. */
.admin-brand {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
  display: flex; align-items: center; gap: 5px;
  text-decoration: none; flex-shrink: 0;
  transition: color var(--transition);
}
.admin-brand:hover { color: var(--accent); }
.admin-brand-sub { color: var(--accent); font-weight: 400; }
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--pill-border);
}
.admin-hdr-spacer { flex: 1; }
.admin-hdr-link {
  color: var(--text-3); font-size: 13px; text-decoration: none; font-weight: 500;
  padding: 6px 10px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.admin-hdr-link:hover { color: var(--text-2); background: var(--surface2); }

/* Hell/Dunkel im Verwaltungsbereich. Rund wie im Laden, damit man ihn als
   denselben Schalter wiedererkennt - er tut auch dasselbe. */
.admin-hdr-mode {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer;
  transition: color var(--a-dur, 180ms) var(--a-ease, ease),
              background var(--a-dur, 180ms) var(--a-ease, ease),
              border-color var(--a-dur, 180ms) var(--a-ease, ease);
}
.admin-hdr-mode:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }

/* Leerzustaende. Eine leere Tabelle ohne Wort daneben liest sich wie ein
   Fehler - besonders am ersten Tag, an dem naturgemaess alles leer ist.
   Deshalb immer zwei Zeilen: was fehlt, und was als Naechstes hilft. */
.admin-leer {
  padding: 34px 16px !important; text-align: center;
  display: table-cell; vertical-align: middle;
}
.admin-leer strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px;
}
.admin-leer span {
  display: block; font-size: 12.5px; line-height: 1.6; color: var(--text-3);
  max-width: 52ch; margin: 0 auto;
}
.admin-leer-klein {
  font-size: 12px; color: var(--text-3); text-align: center; padding: 18px 0;
}

/* Laden und Fehlschlag. Beides muss unterscheidbar sein: eine Anzeige, die bei
   Erfolg und bei Misserfolg gleich aussieht, laesst den Betreiber warten,
   bis er die Seite neu laedt. */
.admin-ladend {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: 13.5px; padding: 8px 0; margin: 0;
}
.admin-ladefehler {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; margin: 4px 0 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--ampel-fehler);
  border-radius: var(--radius); background: var(--surface);
}
.admin-ladefehler > svg { color: var(--ampel-fehler); flex-shrink: 0; margin-top: 1px; }
.admin-ladefehler > div:first-of-type { flex: 1; min-width: 220px; }
.admin-ladefehler strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px;
}
.admin-ladefehler span { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.admin-ladefehler-tasten { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-hdr-mode:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .admin-hdr-mode:active { transform: none; } }

/* Admin body */
.admin-body {
  max-width: 1400px; margin: 0 auto; padding: 28px 28px 80px;
}

/* Shell: gruppierte Seitennavigation + Inhalt */
.admin-shell {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 220px 1fr;
  gap: 28px; padding: 24px 28px 80px;
  align-items: start;
}
.admin-hdr-crumb { font-size: 13px; color: var(--text-3); }
.admin-hdr-user { font-size: 13px; color: var(--text-2); white-space: nowrap; }

.admin-side {
  position: sticky; top: 72px;
  display: flex; flex-direction: column; gap: 18px;
}
.admin-side-group { display: flex; flex-direction: column; gap: 2px; }
.admin-side-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 10px; margin-bottom: 6px;
}
.admin-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--text-2); text-align: left;
  transition: background var(--transition), color var(--transition);
}
.admin-side-item:hover { background: var(--surface2); color: var(--text); }
.admin-side-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.admin-content { min-width: 0; }
/* Sanftes Einblenden beim Tab-Wechsel (key={activeTab} remountet den Container) */
.admin-content { animation: adminTabIn .26s cubic-bezier(.22,.8,.26,1); }
@keyframes adminTabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .admin-content { animation: none; } }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 16px; }
  .admin-side {
    position: static;
    flex-direction: row; flex-wrap: wrap; gap: 12px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
  }
  .admin-side-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-side-title { display: none; }
}

/* Kopfzeile auf dem Telefon.
   Marke, Marke-Etikett, Brotkrume, Konto, "Zum Shop" und der Hell/Dunkel-
   Schalter passen zusammen nicht in 375 px - die Zeile lief bis 481 px und
   der Rest wurde abgeschnitten, nicht scrollbar. Statt zu quetschen fallen
   die entbehrlichen Teile weg: die Brotkrume steht ohnehin als Ueberschrift
   im Inhalt, und "Zum Shop" erreicht man ueber die Marke links. */
@media (max-width: 700px) {
  .admin-hdr-inner { padding: 0 14px; height: 56px; gap: 8px; }
  .admin-hdr-crumb, .admin-hdr-user { display: none; }
  .admin-hdr-link { display: none; }
  .admin-brand { font-size: 18px; }
}

/* Admin tab bar (Legacy - durch .admin-shell/.admin-side abgeloest) */
.admin-tabs {
  display: flex; gap: 0; margin-bottom: 28px;
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
.admin-tab {
  background: none; border: none; padding: 10px 18px;
  cursor: pointer; font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Stat cards */
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.admin-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-stat-card:hover { border-color: var(--border-h); }
.admin-stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-3); margin-bottom: 8px;
}
.admin-stat-value { font-size: 26px; font-weight: 800; font-family: var(--font-sans); letter-spacing: -.02em; }
.admin-stat-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* Karten: eine Definition statt vieler Inline-Wiederholungen */
.admin-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition);
}

/* Section heading */
.admin-section-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text); margin: 0 0 16px;
}

/* Toolbar row */
.admin-toolbar {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.admin-search {
  flex: 1; min-width: 200px; height: 36px; padding: 0 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 13px; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-search::placeholder { color: var(--text-3); }
.admin-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-select {
  height: 36px; padding: 0 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 13px; outline: none; cursor: pointer;
  transition: border-color var(--transition);
}
.admin-select:focus { border-color: var(--accent); }

/* Button-System: eine Hoehe pro Groesse, Icon-Alignment eingebaut,
   sichtbarer Fokus, sauberer Disabled-Zustand. */
.admin-btn, .admin-btn-primary, .admin-btn-sm, .admin-btn-accent-sm, .admin-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform .1s ease;
}
.admin-btn:focus-visible, .admin-btn-primary:focus-visible,
.admin-btn-sm:focus-visible, .admin-btn-accent-sm:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-btn:disabled, .admin-btn-primary:disabled,
.admin-btn-sm:disabled, .admin-btn-accent-sm:disabled {
  opacity: .45; cursor: not-allowed; transform: none;
}
.admin-btn {
  height: 36px; padding: 0 16px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 13px;
}
.admin-btn:hover:not(:disabled) { border-color: var(--border-h); color: var(--text); }
.admin-btn:active:not(:disabled) { transform: translateY(1px); }
.admin-btn-primary {
  height: 36px; padding: 0 18px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.admin-btn-primary:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); }
.admin-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.admin-btn-sm {
  height: 28px; padding: 0 10px; min-width: 28px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 12px;
}
.admin-btn-sm:hover:not(:disabled) { border-color: var(--border-h); color: var(--text); background: var(--surface2); }
.admin-btn-accent-sm {
  height: 28px; padding: 0 12px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--pill-border); font-size: 12px;
}
.admin-btn-accent-sm:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.admin-btn-danger { color: #dc2626; }
.admin-btn-danger:hover:not(:disabled) {
  color: #dc2626; border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.06);
}

/* Go-Live-Fortschritt: dezente, ausklappbare Leiste */
.golive {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 18px; overflow: hidden;
}
.golive-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); text-align: left;
  transition: background var(--transition);
}
.golive-head:hover { background: var(--surface2); }
.golive-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--ampel-warn); box-shadow: 0 0 0 3px var(--ampel-warn-weich);
}
.golive-title { font-size: 13.5px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.golive-count { font-size: 12px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.golive-bar {
  flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; min-width: 40px;
}
.golive-bar > span {
  display: block; height: 100%; border-radius: 99px; background: var(--ampel-warn);
  transition: width .5s cubic-bezier(.22,.8,.26,1);
}
.golive-chev { color: var(--text-3); flex-shrink: 0; transition: transform .2s ease; }
/* Ausklapp-Animation ueber grid-template-rows (0fr -> 1fr) */
.golive-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.golive-body.open { grid-template-rows: 1fr; }
.golive-inner { overflow: hidden; }
.golive-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.golive-item-icon {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ampel-warn-weich); color: var(--ampel-warn-text);
}
.golive-item-text { flex: 1; min-width: 0; }
.golive-item-label { font-size: 13px; font-weight: 600; color: var(--text); }
.golive-item-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; margin-top: 1px; }
.golive-done {
  padding: 9px 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ampel-ok); font-weight: 500;
}

/* Bloecke statt einer langen Liste. Elf Punkte hintereinander liest niemand;
   drei Abschnitte zu je drei bis vier schon. Der Kopf sagt zusaetzlich, wie
   weit dieser Abschnitt ist - so sieht man, wo noch Arbeit liegt, ohne die
   Punkte einzeln zu zaehlen. */
.golive-gruppe { border-top: 1px solid var(--border); }
.golive-gruppe-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px 2px;
}
.golive-gruppe-titel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2);
}
.golive-gruppe-zahl { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.golive-gruppe-text {
  margin: 0; padding: 0 16px 8px;
  font-size: 12px; line-height: 1.5; color: var(--text-3);
}
.golive-gruppe-fertig {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 16px 12px; font-size: 12.5px; color: var(--ampel-ok);
}
.golive-gruppe .golive-item:first-of-type { border-top: none; }
/* Punkte ohne Reiter im Verwaltungsbereich - sie werden bei der Installation
   gesetzt. Ein Knopf, der nirgendwohin fuehrt, waere schlimmer als keiner. */
.golive-item-extern {
  font-size: 11.5px; color: var(--text-3); white-space: nowrap; align-self: center;
}
.golive-fuss {
  padding: 11px 16px; border-top: 1px solid var(--border);
  background: var(--surface2);
  font-size: 12.5px; color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .golive-body, .golive-bar > span, .golive-chev { transition: none; }
}

/* Meta info line */
.admin-meta { font-size: 13px; color: var(--text-3); margin-bottom: 12px; }

/* Success / error messages */
.admin-msg-ok {
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #22c55e;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.admin-msg-err {
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.25);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #ef4444;
  margin-bottom: 14px;
}

/* Table */
.admin-table-wrap {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table thead tr { border-bottom: 1px solid var(--border); background: var(--surface2); }
.admin-table th {
  padding: 10px 14px; text-align: left; font-weight: 600;
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.admin-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface2); }
.admin-table td { padding: 12px 14px; color: var(--text); vertical-align: middle; }
.admin-table td:first-child, .admin-table th:first-child { padding-left: 18px; }
.admin-table td:last-child, .admin-table th:last-child { padding-right: 18px; }
.admin-td-muted { color: var(--text-2) !important; font-size: 12px; }
.admin-td-id {
  font-family: monospace; font-size: 12px; font-weight: 600;
  color: var(--accent); cursor: pointer; background: none; border: none; padding: 0;
}
.admin-td-id:hover { text-decoration: underline; }

/* Status badges */
.admin-badge-status {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* Massen-Aktionsleiste */
.admin-bulkbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
  animation: bulkbarIn .18s ease-out;
}
@keyframes bulkbarIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.admin-bulkbar-count { font-size: 13px; font-weight: 700; color: var(--text); margin-right: 4px; }
.admin-bulkbar-cat { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .admin-bulkbar { animation: none; } }

/* Inline-Schnellbearbeitung Preis/Bestand */
.admin-quick-input { height: 30px; padding: 0 8px; font-size: 13px; width: 90px; }

/* Pagination */
.admin-pagination { display: flex; align-items: center; gap: 8px; margin-top: 18px; justify-content: center; }
.admin-page-btn {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 13px;
}
.admin-page-btn:hover:not(:disabled) { border-color: var(--border-h); color: var(--text); }
.admin-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.admin-page-info { font-size: 13px; color: var(--text-2); padding: 0 4px; }

/* Modal */
.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.admin-modal {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.admin-modal-wide { max-width: 760px; }
.admin-modal-xl { max-width: 940px; }

/* Flush-Modal: Kopf/Tabs/Fuss fix, nur der Inhalt scrollt (Tab-Formular) */
.admin-modal-flush {
  display: flex; flex-direction: column;
  max-height: 92vh; overflow: hidden;
}
.admin-modal-flush .admin-modal-hdr { position: static; flex-shrink: 0; }

/* Produkt-Formular mit Tabs */
.admin-pform { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.admin-pform-tabs {
  display: flex; gap: 2px; padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); overflow-x: auto;
  scrollbar-width: thin;
}
.admin-pform-tab {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  padding: 12px 16px; font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.admin-pform-tab:hover { color: var(--text); }
.admin-pform-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.admin-pform-body {
  padding: 20px; overflow-y: auto; flex: 1; min-height: 0;
}
.admin-pform-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}

/* Varianten-Dimensionen mit Werte-Chips */
.admin-vardim {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
/* Kompaktes Namensfeld - Kompound-Selektor schlaegt .admin-field-input (width:100%) */
.admin-vardim .admin-vardim-name { flex: 0 0 160px; width: 160px; height: 36px; }
.admin-vardim-values {
  flex: 1 1 260px; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.admin-vardim-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--pill-border); border-radius: 16px;
  padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 600;
}
.admin-vardim-chip button {
  border: none; background: none; cursor: pointer; color: inherit;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.admin-vardim-add {
  flex: 1; min-width: 120px; border: none; background: none; outline: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--text);
}
.admin-vardim-add::placeholder { color: var(--text-3); }

/* SKU-Kuerzel-Panel im Varianten-Tab */
.admin-sku-codes {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin: 10px 0;
}
.admin-sku-codes-dim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-sku-codes-dim:last-child { margin-bottom: 0; }
.admin-sku-codes-dim > strong { font-size: 12px; color: var(--text-2); min-width: 70px; }
.admin-sku-code {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-2);
}
.admin-sku-code input {
  width: 54px; height: 28px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px; outline: none;
}
.admin-sku-code input:focus { border-color: var(--accent); }

.admin-modal-hdr {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.admin-modal-title { margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--text); }
.admin-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: 20px; padding: 4px 6px; border-radius: 6px;
  line-height: 1; transition: color var(--transition), background var(--transition);
}
.admin-modal-close:hover { color: var(--text); background: var(--surface2); }
.admin-modal-body { padding: 20px; }

/* Form fields inside admin */
.admin-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.admin-field-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--text-2); text-transform: uppercase; }
.admin-field-input {
  width: 100%; min-height: 36px; padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 13px; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.admin-field-input::placeholder { color: var(--text-3); }
.admin-field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Kurznamen fuer dieselben Bausteine. Neuere Bereiche schreiben .admin-label /
   .admin-input; ohne diese Regeln standen deren Formulare unformatiert da. */
.admin-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--text-2); text-transform: uppercase; }
.admin-input {
  width: 100%; min-height: 36px; padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 13px; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.admin-input::placeholder { color: var(--text-3); }
.admin-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.admin-input, textarea.admin-field-input { line-height: 1.6; padding-top: 10px; resize: vertical; }

/* Felder nebeneinander. Umbricht auf schmalen Schirmen, statt zu quetschen. */
.admin-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.admin-form-row > .admin-field { flex: 1; min-width: 180px; }
@media (max-width: 640px) {
  .admin-form-row > .admin-field, .admin-form-row > .admin-field[style] { min-width: 100%; }
}
/* Kaestchen mit Beschriftung - die Beschriftung klickt mit. */
.admin-check-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.admin-check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* Zwischenueberschrift innerhalb eines langen Formulars. */
.admin-sub-title {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-3); margin: 20px 0 10px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.admin-sub-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ── Textfeld mit Umschalter (Text | HTML) ──────────────────────────────
   Zwei Ansichten auf denselben Inhalt. Der Schalter sitzt UEBER dem Feld
   und nicht daneben: er gehoert zum Feld, nicht zur Zeile darueber. */
.tf { margin-bottom: 4px; }
.tf-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.tf-schalter {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tf-w {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: none; background: none; cursor: pointer;
  border-radius: calc(var(--radius-sm) - 1px);
  font: 500 12px var(--font-sans); color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.tf-w:hover { color: var(--text); }
.tf-w.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
/* Der Hinweis steht neben dem Schalter, nicht darunter - er erklaert, warum
   HTML gerade die richtige Ansicht ist. */
.tf-warn {
  display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 200px;
  font-size: 11.5px; line-height: 1.4; color: var(--warnung, #b45309);
}
.tf-warn svg { flex-shrink: 0; }
/* Platzhalter, solange die gemerkte Wahl noch nicht gelesen ist. */
.tf-platzhalter {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2);
}

/* Grid helpers */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) {
  .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; }
  .admin-body { padding: 16px 16px 60px; }
  .admin-hdr-inner { padding: 0 16px; }
}

/* Info rows inside modals */
.admin-info-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.admin-info-value { font-size: 13px; color: var(--text); line-height: 1.6; }
.admin-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ── Wiederverwendbare Bausteine (einheitliche Dashboard-/Listen-Optik) ────── */
/* Info-Karte mit farbigem linken Rand (Akzent = Hinweis, Warn = Achtung). */
.admin-card--accent { border-left: 3px solid var(--accent); }
.admin-card--warn   { border-left: 3px solid #ea580c; }
/* Kopfzeile einer Karte: Titel links, Aktion rechts. */
.admin-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.admin-card-head .admin-section-title { margin: 0; }
/* Einheitlicher Hinweistext unter einer Ueberschrift. */
.admin-hint { font-size: 12.5px; color: var(--text-3); margin: 0 0 12px; line-height: 1.6; }
/* Vertikale Liste aus gleich gestylten Zeilen. */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.admin-list-row-main { flex: 1; min-width: 0; }
.admin-list-row-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-list-row-title.is-done { text-decoration: line-through; opacity: .6; }
.admin-list-row-sub { font-size: 12px; color: var(--text-3); }
/* Runder Erledigt-/Status-Punkt links in einer Listenzeile. */
.admin-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border-h); color: #fff;
}
.admin-check.is-done { background: #16a34a; border: none; }

/* ── EINRICHTUNGSASSISTENT ───────────────────────────────────────────────
   Betreiber-Oberflaeche, deshalb liegt die Wurzel auf .admin-page und traegt
   dessen Tokens (Indigo, kuehles Dunkelgrau). Die Struktur steht hier, das
   Aussehen kommt aus lib/theme/adminSystem.

   Ein Assistent ist eine Strecke, kein Kasten voller Kacheln: eine Spalte,
   eine Frage je Schritt, unten immer beide Richtungen. */
.su {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px 80px;
}
.su-blatt { width: 100%; max-width: 640px; }

.su-laden {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--text-2); font-size: 14px;
}

/* Schrittanzeige. Sie sagt nicht nur "Schritt 3", sondern zeigt die ganze
   Strecke - man soll vorher wissen, worauf man sich einlaesst. */
.su-schritte {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.su-schritt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-3);
  padding: 4px 10px 4px 4px; border-radius: var(--radius-pill);
  transition: color var(--a-dur, 180ms) var(--a-ease, ease);
}
.su-schritt-punkt {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11px; font-weight: 700; line-height: 1;
  transition: background var(--a-dur, 180ms) var(--a-ease, ease),
              border-color var(--a-dur, 180ms) var(--a-ease, ease),
              color var(--a-dur, 180ms) var(--a-ease, ease);
}
.su-schritt.ist-hier { color: var(--text); }
.su-schritt.ist-hier .su-schritt-punkt {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.su-schritt.ist-fertig { color: var(--text-2); }
.su-schritt.ist-fertig .su-schritt-punkt {
  border-color: var(--accent); color: var(--accent); background: transparent;
}
/* Auf dem Telefon zaehlen die Namen nicht - der Punkt genuegt als Ort. */
@media (max-width: 620px) {
  .su-schritt-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .su-schritte { gap: 8px; }
}

.su-teil { display: flex; flex-direction: column; }
.su-titel {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em; color: var(--text);
  margin: 0 0 12px;
}
.su-text { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.su-hinweis {
  margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3);
  border-top: 1px solid var(--border); padding-top: 16px;
}
.su-liste { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 8px; }
.su-liste li { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.su-liste b { color: var(--text); font-weight: 600; }

.su-fehler {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 20px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface2); color: var(--text);
  font-size: 13.5px; line-height: 1.5;
}
.su-fehler svg { flex-shrink: 0; margin-top: 2px; }

.su-label {
  display: block; margin: 4px 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.su-feld { display: block; margin-bottom: 26px; }
.su-eingabe {
  width: 100%; height: var(--a-h-lg, 46px);
  padding: 0 14px; font-size: 15px;
  border: 1px solid var(--border-h); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans);
  transition: border-color var(--a-dur, 180ms) var(--a-ease, ease),
              box-shadow var(--a-dur, 180ms) var(--a-ease, ease);
}
.su-eingabe:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Auswahlkarten. Der gewaehlte Zustand haengt nicht allein an der Farbe -
   die Kontur wechselt mit, sonst ist er fuer Farbfehlsichtige unsichtbar. */
.su-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.su-wahl-drei { grid-template-columns: repeat(3, 1fr); }
.su-karte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans);
  transition: border-color var(--a-dur, 180ms) var(--a-ease, ease),
              background var(--a-dur, 180ms) var(--a-ease, ease),
              transform var(--a-press, 150ms) var(--a-ease, ease);
}
.su-karte:hover { border-color: var(--border-h); background: var(--surface2); }
.su-karte:active { transform: scale(.985); }
.su-karte b { font-size: 14.5px; font-weight: 600; }
.su-karte span { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.su-karte svg { color: var(--text-3); }
.su-karte.ist-gewaehlt {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.su-karte.ist-gewaehlt svg { color: var(--accent); }

.su-branchen { display: grid; gap: 10px; margin-bottom: 26px; }
.su-branche {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans);
  transition: border-color var(--a-dur, 180ms) var(--a-ease, ease),
              background var(--a-dur, 180ms) var(--a-ease, ease);
}
.su-branche:hover { border-color: var(--border-h); background: var(--surface2); }
.su-branche b { font-size: 14.5px; font-weight: 600; }
.su-branche span { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.su-branche.ist-gewaehlt {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.su-farben { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.su-farbe {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--a-h, 40px); padding: 0 14px 0 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: 600 13px var(--font-sans);
  transition: border-color var(--a-dur, 180ms) var(--a-ease, ease),
              background var(--a-dur, 180ms) var(--a-ease, ease);
}
.su-farbe:hover { border-color: var(--border-h); background: var(--surface2); }
.su-farbe-probe { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.su-farbe.ist-gewaehlt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Die Kantenprobe zeigt, was gewaehlt wird, statt es zu behaupten. */
.su-eckprobe {
  width: 34px; height: 22px; display: block;
  border: 1px solid var(--border-h); background: var(--surface2);
}
.su-eckprobe-eckig { border-radius: 0; }
.su-eckprobe-weich { border-radius: 5px; }
.su-eckprobe-rund  { border-radius: 11px; }

.su-fertig-zeichen {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--accent); color: var(--on-accent);
}

.su-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--border);
}
.su-weiter, .su-zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--a-h-lg, 46px); padding: 0 20px;
  border-radius: var(--radius); cursor: pointer;
  font: 600 14.5px var(--font-sans); text-decoration: none;
  transition: background var(--a-dur, 180ms) var(--a-ease, ease),
              border-color var(--a-dur, 180ms) var(--a-ease, ease),
              transform var(--a-press, 150ms) var(--a-ease, ease);
}
.su-weiter {
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
}
.su-weiter:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); }
.su-weiter:active:not(:disabled) { transform: scale(.98); }
.su-weiter:disabled { opacity: .45; cursor: not-allowed; }
.su-zurueck {
  background: transparent; color: var(--text-2);
  border: 1px solid transparent;
}
.su-zurueck:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }

@media (max-width: 620px) {
  .su { padding: 28px 14px 64px; }
  .su-titel { font-size: 22px; }
  .su-wahl, .su-wahl-drei { grid-template-columns: 1fr; }
  .su-fuss { flex-direction: column-reverse; align-items: stretch; }
  .su-weiter, .su-zurueck { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .su-karte:active, .su-weiter:active { transform: none; }
}



/* Kurven nach den Regeln von Emil Kowalski (github.com/emilkowalski/skills,
   MIT). Eigene Kurven statt CSS-Built-ins; ease-in ist auf Oberflaechen
   verboten, weil es traege startet - und genau den Anfang sieht das Auge am
   genauesten. Kein Wert fuer Bedienoberflaeche ueber 300 ms. */
:root {
  --o-ease-out:    cubic-bezier(.23, 1, .32, 1);
  --o-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --o-press: 160ms;   /* Druckfeedback     100-160 */
  --o-dur:   200ms;   /* Hover, Farbe      125-200 */
  --o-enter: 250ms;   /* Eintritt          150-250 */
  --o-exit:  150ms;   /* Austritt schneller als Eintritt */
  --o-dens:  1;
}

/* Raster und Schraffur - die Bildwelt aus dem Theme (Regel 6) - stehen bewusst
   NICHT in einer eigenen Variablen. Eine Custom Property, die var(--border)
   enthaelt, wird dort aufgeloest, wo sie DEKLARIERT ist, nicht wo sie benutzt
   wird. Auf :root gibt es --border nicht (das steht auf .theme-light bzw.
   .theme-dark), die Referenz waere also leer - und mit ihr das ganze Raster.
   Deshalb stehen die Verlaeufe ausgeschrieben in den Regeln, die sie brauchen. */

/* Sichtbarer Fokus ist Pflicht, nicht Kosmetik (WCAG 2.4.7). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Regel 8: Zaehler und Tabellenzahlen laufen tabellarisch, damit Spalten
   stehen und nichts springt, wenn sich eine Zahl aendert. */
.pg-btn, .admin-table td {
  font-variant-numeric: tabular-nums;
}

/* Zustandsfarben je Modus - gemessen, nicht geschaetzt (hell ab 5,0:1 /
   dunkel ab 6,5:1). Feste Hex-Werte im Markup fielen auf einem der beiden
   Blaetter unter die Kontrastgrenze. */
.theme-light { --fehler: #b91c1c; --warnung: #b45309; --erfolg: #15803d; }
.theme-dark  { --fehler: #f87171; --warnung: #fbbf24; --erfolg: #4ade80; }

/* Regel 7: Druckfeedback. Skalierung bleibt zwischen .95 und .98 - darunter
   wirkt es wie ein Einsturz. Die Eigenschaft wird IMMER mitbenannt; nur eine
   Dauer zu setzen greift ins Leere, wenn das Element gar kein
   transition-property hat. */
.btn, .pill, .chip, .pg-btn, .mobile-nav-btn {
  transition: transform var(--o-press) var(--o-ease-out),
              background-color var(--o-dur) var(--o-ease-out),
              border-color var(--o-dur) var(--o-ease-out),
              color var(--o-dur) var(--o-ease-out);
}
.btn:active, .pill:active, .pg-btn:active { transform: scale(.97); }

/* Zeigegeraet-Effekte NUR dort, wo wirklich gezeigt wird. Auf Touch loest
   Hover beim Tippen aus und bleibt danach haengen. */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform var(--o-dur) var(--o-ease-out),
                      border-color var(--o-dur) var(--o-ease-out); }
  .card:hover { transform: translateY(-2px); }
}

/* ── FLUSS ───────────────────────────────────────────────────────────────
   Bisher gab es nur Reaktion (Druck, Hover). Was fehlte, ist der Fluss: dass
   eine Seite ankommt, statt einfach dazustehen, und dass Ebenen aus ihrer
   Kante kommen statt aus dem Nichts.

   Grundsaetze: Startwerte sind SICHTBAR (nie aus dem Nichts), es bewegt sich
   nur transform und opacity, jede Bewegung ist unterbrechbar, und nichts
   bewegt sich, was gerade niemand ansieht. */

/* ① Ankommen. Der Inhalt setzt sich einmal, kurz und knapp - keine
   Scroll-Choreografie, die bei jedem Vorbeikommen neu auffuehrt.
   Startwert .001 waere ein Ladebalken; .55 liest sich als "kommt gleich". */
@keyframes o-in { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.grid > .card, .sec {
  animation: o-in var(--o-enter) var(--o-ease-out) both;
}
/* Staffelung nur ueber die erste Reihe - danach traegt die Bewegung nichts
   mehr bei und wuerde beim Scrollen nur nachklappern. */
.grid > .card:nth-child(1) { animation-delay: 0ms; }
.grid > .card:nth-child(2) { animation-delay: 40ms; }
.grid > .card:nth-child(3) { animation-delay: 80ms; }
.grid > .card:nth-child(4) { animation-delay: 120ms; }
.grid > .card:nth-child(n+5) { animation-delay: 150ms; }

/* ⑦ Das Kartenbild wird AUFGEDECKT, nicht eingeblendet. Der Inhalt liegt
   schon da - die Abdeckung geht weg. Das ist der Unterschied zwischen "hier
   erscheint etwas" und "hier war schon etwas". clip-path laeuft auf der
   Grafikeinheit, kein Layout. */
@keyframes o-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.grid > .card .card-img, .sec-slider-track .card .card-img {
  animation: o-reveal 420ms var(--o-ease-in-out) both;
  animation-delay: 60ms;
}
.grid > .card:nth-child(2) .card-img { animation-delay: 100ms; }
.grid > .card:nth-child(3) .card-img { animation-delay: 140ms; }
.grid > .card:nth-child(4) .card-img { animation-delay: 180ms; }
.grid > .card:nth-child(n+5) .card-img { animation-delay: 210ms; }

/* ⑧ Zeilen in Listen ruecken beim Zeigen leicht ein - die Bewegung sagt
   "hier geht es weiter", statt nur die Farbe zu wechseln. Nur am
   Zeigegeraet: auf Touch bliebe der Zustand nach dem Tippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .menu-row {
    transition: transform var(--o-dur) var(--o-ease-out),
                background-color var(--o-dur) var(--o-ease-out),
                color var(--o-dur) var(--o-ease-out);
  }
  .menu-row:hover { transform: translateX(3px); }
}

/* ⑨ Der Bildplatz hebt beim Zeigen die Ware hervor, nicht den Rahmen:
   das Motiv wird eine Spur groesser, der Ausschnitt bleibt stehen. */
@media (hover: hover) and (pointer: fine) {
  .card-img { overflow: hidden; }
  .card-img img, .card-icon {
    transition: transform 320ms var(--o-ease-out);
  }
  .card:hover .card-img img, .card:hover .card-icon { transform: scale(1.03); }
}

/* ⑩ Vorschlaege und Aufklapper kommen VON IHRER KANTE, nicht aus dem Nichts -
   sie gehoeren zu dem Feld, unter dem sie stehen. */
@keyframes o-drop { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pop {
  animation: o-drop var(--o-enter) var(--o-ease-out) both;
}

/* ⑪ Ladeplatzhalter: ein ruhiger Schimmer statt eines pulsierenden Kastens.
   Bewegung erklaert hier "es kommt noch etwas" - deshalb darf sie laufen,
   aber langsam genug, dass sie nicht nach Fehler aussieht. */
@keyframes o-shimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } }
.sk-line, .sk-dot, .card-skeleton .card-img {
  background-image: linear-gradient(90deg,
    transparent 0%, var(--card-hover) 45%, var(--card-hover) 55%, transparent 100%);
  background-size: 220% 100%;
  animation: o-shimmer 1400ms linear infinite;
}

/* ⑫ Der Zaehler in der Leiste quittiert am Ort der Zahl. Keyframes, damit
   schnelles Mehrfachklicken die Quittung neu startet. */
.mobile-nav-badge.pop {
  animation: o-pop 220ms var(--o-ease-out);
}

/* ── MODUSWECHSEL ────────────────────────────────────────────────────────
   Der Wischer selbst steckt im ThemeProvider (Kreis aus dem Schalter). Hier
   wird nur die eingebaute Ueberblendung abgeschaltet: sonst laegen zwei
   Effekte uebereinander und das Bild flackert in der Mitte.
   mix-blend-mode: normal, damit der neue Stand den alten deckt statt sich
   mit ihm zu mischen. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ── SEITLICHE SPUREN ────────────────────────────────────────────────────
   Der Sektions-Schieber hatte eine sichtbare Bildlaufleiste unter den Karten -
   ein grauer Strich quer durch die Sektion, der wie ein Gestaltungselement
   aussieht und keines ist. Gescrollt wird ueber die Pfeile, mit dem Finger
   und mit der Tastatur; die Leiste selbst traegt nichts bei.
   scroll-snap laesst die Karten sauber einrasten statt irgendwo zu stehen. */
.sec-slider-track, .blog-cats {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.sec-slider-track::-webkit-scrollbar,
.blog-cats::-webkit-scrollbar { display: none; }
.sec-slider-track { scroll-snap-type: x proximity; scroll-behavior: smooth; }
.sec-slider-track > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .sec-slider-track { scroll-behavior: auto; }
}

/* ⑤ Der Pfeil laeuft in seine eigene Richtung - er zeigt, wohin es geht.
   Nur am Zeigegeraet: auf Touch bliebe der Zustand nach dem Tippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .btn svg {
    transition: transform var(--o-dur) var(--o-ease-out);
  }
  .btn:hover svg { transform: translateX(3px); }
}

/* Quittung am Ort der Zahl (siehe ⑫). Keyframes, damit schnelles
   Mehrfachklicken die Quittung neu startet - genau das koennen
   Transitions nicht. */
@keyframes o-pop { 0% { transform: scale(1) } 40% { transform: scale(1.25) } 100% { transform: scale(1) } }

/* Weniger Bewegung heisst weniger, nicht nichts: Deckkraft bleibt, sie hilft
   beim Verstehen. Ortsveraenderung faellt weg. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
  .card:hover { transform: none; }
  /* Ortsveraenderung faellt weg, die Ebene ist trotzdem da bzw. weg. */
  .grid > .card, .sec { animation: none; opacity: 1; transform: none; }
  /* Aufdecken, Einruecken, Schimmer und Vergroessern fallen weg. Der
     Ladeplatzhalter behaelt seine Flaeche - er soll ja weiter sagen, dass
     etwas kommt, nur ohne Dauerbewegung. */
  .card-img, .pop {
    animation: none !important; clip-path: none !important; opacity: 1; transform: none;
  }
  .sk-line, .sk-dot, .card-skeleton .card-img {
    animation: none !important; background-image: none; background-color: var(--surface2);
  }
  .menu-row:hover,
  .card:hover .card-img img, .card:hover .card-icon { transform: none; }
}

/* ── SCHRIFT AUF AKZENTFLAECHEN ──────────────────────────────────────────
   Das Grundgeruest setzt auf gefuellten Flaechen hart weissen Text. Das
   stimmt nur, solange der Akzent DUNKEL ist. Orions Dunkelmodus hat einen
   HELLEN Akzent (Mint) - weiss darauf ergibt 2,05:1 statt 4,5:1, und zwar
   auf jedem Knopf der ganzen Website.

   Deshalb eine Regel statt siebzehn: alles, was der Akzent fuellt, nimmt
   --on-accent. Das Token kommt aus den Theme-Tokens und kippt mit dem Modus.
   Auch fuer eigene Akzentfarben gerechnet - Kupfer und Bordeaux sind hell
   genug fuer Weiss, Graphit im Dunkelmodus nicht. */
.btn-primary, .auth-btn, .mobile-nav-badge, .nav-register-link, .pop-knopf,
.pg-btn.pg-active, .sec-banner-accent, .skip-link, .blog-cat.on, .blog-pg.on,
.sec-banner-link, .sec-newsletter-btn, .sec-hero-cta {
  color: var(--on-accent);
}
/* Auch die Kindelemente darin - eine Beschriftung steckt oft in einem span. */
.btn-primary *, .auth-btn *, .mobile-nav-badge *, .nav-register-link *, .pop-knopf *, .pg-btn.pg-active *, .sec-banner-accent *, .skip-link *, .blog-cat.on *, .blog-pg.on *, .sec-banner-link *, .sec-newsletter-btn *, .sec-hero-cta * {
  color: inherit;
}
/* Der Werbeblock traegt den Akzent flaechig - Ueberschrift, Text und Knopf
   darauf muessen mitziehen. */
.sec-banner, .sec-banner-title, .sec-banner-text { color: var(--on-accent); }
[data-accentweight="dezent"] .sec-banner,
[data-accentweight="dezent"] .sec-banner-title { color: var(--text); }
[data-accentweight="dezent"] .sec-banner-text { color: var(--text-2); }
/* Der Sprungmarken-Link liegt im Fokus auf dem Akzent. */
.skip-link { background: var(--accent); }

/* ── BEDIENHOEHEN ────────────────────────────────────────────────────────
   Eine Leiter statt gewachsener Einzelwerte. Vorher standen im Grundgeruest
   27, 34, 38, 41 und 42 px nebeneinander - das ist der Grund, warum einzelne
   Felder und Knoepfe eingequetscht aussehen: nicht zu klein an sich, sondern
   uneinheitlich neben ihren Nachbarn. Drei Stufen reichen:

     --o-h    46px  alles, was man liest und bedient (Knopf, Eingabefeld)
     --o-h-sm 38px  kompakte Waehler neben Text (Sortierung, Preisfeld)
     --o-h-ic 40px  reine Symbolknoepfe (auf Touch 44)

   Die Dichte-Einstellung fasst diese Werte bewusst NICHT an. */
:root { --o-h: 46px; --o-h-sm: 38px; --o-h-ic: 40px; }

.btn, .input, .field {
  min-height: var(--o-h);
}
.pg-btn, .lang-switcher, .nav-link {
  min-height: var(--o-h-sm);
}

/* Symbolknoepfe ausserhalb der Kopfzeile: Menuetaste, Schieber-Pfeile. */
.nav-burger, .sec-slider-arrow, .nav-close {
  min-width: var(--o-h-ic); min-height: var(--o-h-ic);
}

/* Knoepfe aus den Baukasten-Sektionen folgen derselben Leiter wie .btn -
   sie sahen mit 42 px neben 46er Nachbarn gestaucht aus. */
.sec-banner-link, .sec-bloglist-all, .sec-hero-cta, .sec-newsletter-btn,
.sec-faq-q, .pop-knopf {
  min-height: var(--o-h);
}
.blog-cat, .sec-cats-item { min-height: var(--o-h-sm); }

/* Ankreuz- und Auswahlfelder: 14 px ist kein Ziel, das ein Daumen trifft.
   Das Feld selbst waechst - eine bloss vergroesserte Trefferflaeche haette
   den Nutzer weiter auf einen Punkt zielen lassen, den er kaum sieht.
   accent-color faerbt den gesetzten Zustand ueber den Theme-Akzent. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
@media (pointer: coarse), (max-width: 760px) {
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
}
/* Textfelder in Formularen auf die Bedienhoehe.
   input:not([type]) muss mit rein: ein <input> ohne type-Attribut verhaelt
   sich wie ein Textfeld, wird von input[type="text"] aber NICHT getroffen. */
input:not([type]),
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], input[type="date"],
select:not(.lang-switcher), textarea {
  min-height: var(--o-h);
}
textarea { min-height: calc(var(--o-h) * 2); }
/* Die Kopfzeilen-Navigation traegt Innenabstand statt purer Textgroesse -
   sonst haengt der Trefferbereich an der Laenge des Wortes. */
.nav-link { display: inline-flex; align-items: center; padding-inline: 12px; border-radius: var(--radius-sm); }
.nav-link:hover { background: var(--surface2); }
.icon-btn {
  min-width: var(--o-h-ic); min-height: var(--o-h-ic);
}
/* Der Sprungmarken-Link ist im Fokus ein vollwertiges Bedienelement. */
.skip-link { min-height: var(--o-h); display: inline-flex; align-items: center; }
/* Die Wortmarke ist ein Link, kein Knopf - sie braucht keine Knopfhoehe,
   aber eine Trefferflaeche, die der Daumen findet. */
.brand { display: inline-flex; align-items: center; min-height: 44px; }

/* Touchziele. Zwei Ausloeser, weil keiner allein reicht: der Zeigertyp
   erwischt das Tablet im Querformat, die Breite erwischt Geraete und
   Vorschauen, die sich faelschlich als "fine" melden. */
@media (pointer: coarse), (max-width: 760px) {
  :root { --o-h-sm: 44px; --o-h-ic: 44px; }
  /* Hoehe allein genuegt nicht: ein 36 px schmaler Knopf ist mit dem Daumen
     genauso schwer zu treffen wie ein flacher. Auf Touch wird beides 44. */
  .pg-btn, .sec-slider-arrow { min-width: 44px; }
  .pg-btn { min-height: 44px; }
}


/* Regel 1: Begrenzung durch 1 px Linie. Der Kopf schwebt nicht, er sitzt -
   also traegt er eine Regel, keinen Schatten. */
.hdr {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.brand {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
/* Der Markenpunkt aus dem alten Design ist reine Zierde - Orion begrenzt und
   gliedert mit Linien, nicht mit Punkten (Systemregel 4). */
.brand-dot { display: none; }

/* Regel 4: Ausrichtung ist Ornament. Die Fusszeile haengt an einer Regel,
   die durch den ganzen Container laeuft. */
.footer { border-top: 1px solid var(--border); background: var(--bg); }
.footer-legal { border-top: 1px solid var(--border); }
.footer-legal-link, .footer-copy { color: var(--text-2); }

/* Die untere Leiste auf dem Telefon: Linie oben, aktiver Eintrag am Akzent.
   Nie allein ueber Farbe - der aktive Eintrag traegt zusaetzlich Gewicht. */
.mobile-nav {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.mobile-nav-btn { color: var(--text-2); }
.mobile-nav-btn.active { color: var(--accent); font-weight: 600; }


.pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.pill:hover { border-color: var(--border-h); }

.pg-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.pg-btn:hover { border-color: var(--border-h); }
.pg-btn.pg-active, .pg-btn[aria-current] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.pg-btn:disabled { color: var(--text-3); border-color: var(--border); background: none; }


/* Regel 1: Kontur, kein Schatten. Die Karte ist ein Blatt auf dem Blatt. */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.card:hover { border-color: var(--border-h); box-shadow: none; }

/* Regel 2 und 6: Der ausgewiesene Platz. Die Bildflaeche traegt das Raster
   des Bretts - man sieht, dass dort etwas hingehoert, auch wenn noch kein
   Foto da ist. Das Raster kommt aus dem Theme, nicht aus einer Bilddatei. */
.card-img {
  background-color: var(--surface2);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
/* Das Raster ist der ausgewiesene Platz fuer ein FEHLENDES Bild, keine Textur
   auf der Ware. Deshalb wird es nur gesetzt, wenn wirklich kein Foto da ist -
   nicht gesetzt und danach wieder entfernt. Bei object-fit:contain blieb es
   sonst rings um jedes echte Foto stehen. */
.card-img:not(:has(img)) {
  background-image: linear-gradient(to right, var(--border) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  /* Ohne Ursprung an der Rahmenkante faellt die erste Rasterlinie direkt
     neben den 1px-Rahmen - aussen also ein doppelter Strich, innen
     einfache. Mit border-box liegt sie UNTER dem Rahmen. */
  background-origin: border-box;
}
.card-icon { color: var(--text-2); }

.card-body { border: none; }
.card-name { font-weight: 600; line-height: 1.35; }
.card-chips, .card-meta { color: var(--text-2); }
.card-foot { border-top: 1px solid var(--border); background: none; }

/* Regel 5: Etikett mit Kontur statt Farbflaeche. */
.card-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  background: var(--bg);
}

/* Ladeplatzhalter: dieselbe Kontur wie die fertige Karte, damit beim Eintreffen
   der Daten nichts springt. */
.card-skeleton { border: 1px solid var(--border); box-shadow: none; }
.sk-line, .sk-dot { background: var(--surface2); }


/* ① ECKEN - vom voll eckigen Werkstattblatt bis zur weichen Kachel. Die
   Pillen folgen mit, sonst bleiben runde Reste stehen und die Einstellung
   wirkt halbherzig. */
[data-corners="eckig"] { --radius: 0; --radius-sm: 0; --radius-lg: 0; --radius-pill: 0; }
[data-corners="weich"] { --radius: 5px; --radius-sm: 3px; --radius-lg: 8px; --radius-pill: 999px; }
[data-corners="rund"]  { --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --radius-pill: 999px; }
[data-corners] .pill, [data-corners] .card-tag { border-radius: var(--radius-pill); }

/* ② DICHTE - greift auf Rhythmus und Innenabstaende, NICHT auf Bedienhoehen.
   Eine kompakte Website steht enger, aber ein Knopf bleibt antippbar. */
[data-density="kompakt"] { --o-dens: .78; }
[data-density="normal"]  { --o-dens: 1; }
[data-density="luftig"]  { --o-dens: 1.3; }
[data-density] .sec { padding-block: calc(clamp(40px, 5vw, 68px) * var(--o-dens)); }
[data-density] .card-body { padding: calc(14px * var(--o-dens)); }
[data-density] .card-foot { padding: calc(12px * var(--o-dens)) calc(14px * var(--o-dens)); }
[data-density] .grid { gap: calc(16px * var(--o-dens)); }

/* ③ AKZENT - Kundeneigentum.
   ACHTUNG, hier steckte ein Fehler, der die Farbwahl komplett wirkungslos
   machte: das data-Attribut sitzt auf <html>, der Seiteninhalt aber in einem
   <div class="theme-light">. Und dieses div DEKLARIERT --accent selbst neu.
   Eine Custom Property vom naeheren Vorfahren gewinnt immer gegen eine
   geerbte - Spezifitaet und Reihenfolge spielen keine Rolle, weil es
   verschiedene Elemente sind. Die Ecken funktionierten deshalb (nur auf html
   deklariert), die Farben nicht.

   Deshalb wird jede Akzentfarbe DORT gesetzt, wo auch die Modusklasse sitzt:
   einmal als Nachfahre (Klasse auf einem Wrapper) und einmal am Element
   selbst (Klasse auf html). --on-accent bleibt beim Modus-Standard; alle
   sechs Akzente sind dagegen gerechnet.

   Die Zustandsfarben (--fehler/--warnung/--erfolg) folgen dem Akzent bewusst
   NICHT: das sind Zustandsaussagen, keine Markenfarben. */
[data-accent="tanne"] .theme-light, .theme-light[data-accent="tanne"],
[data-accent="tanne"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #0b6e4a; --accent-h: #085239; --accent-soft: rgba(11,110,74,.08);
}
[data-accent="tanne"] .theme-dark, .theme-dark[data-accent="tanne"] {
  --accent: #7cc49b; --accent-h: #a3d9ba; --accent-soft: rgba(124,196,155,.13);
}
[data-accent="petrol"] .theme-light, .theme-light[data-accent="petrol"],
[data-accent="petrol"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #0a6274; --accent-h: #074a58; --accent-soft: rgba(10,98,116,.08);
}
[data-accent="petrol"] .theme-dark, .theme-dark[data-accent="petrol"] {
  --accent: #79c6d9; --accent-h: #a2dae8; --accent-soft: rgba(121,198,217,.13);
}
[data-accent="indigo"] .theme-light, .theme-light[data-accent="indigo"],
[data-accent="indigo"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #3b3fa8; --accent-h: #2b2e85; --accent-soft: rgba(59,63,168,.08);
}
[data-accent="indigo"] .theme-dark, .theme-dark[data-accent="indigo"] {
  --accent: #9da2f0; --accent-h: #bcc0f7; --accent-soft: rgba(157,162,240,.13);
}
[data-accent="bordeaux"] .theme-light, .theme-light[data-accent="bordeaux"],
[data-accent="bordeaux"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #9a1b3e; --accent-h: #78122e; --accent-soft: rgba(154,27,62,.08);
}
[data-accent="bordeaux"] .theme-dark, .theme-dark[data-accent="bordeaux"] {
  --accent: #ee9aaf; --accent-h: #f7bac8; --accent-soft: rgba(238,154,175,.13);
}
[data-accent="kupfer"] .theme-light, .theme-light[data-accent="kupfer"],
[data-accent="kupfer"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #9c4318; --accent-h: #7a3210; --accent-soft: rgba(156,67,24,.08);
}
[data-accent="kupfer"] .theme-dark, .theme-dark[data-accent="kupfer"] {
  --accent: #e5a07a; --accent-h: #f2bc9c; --accent-soft: rgba(229,160,122,.13);
}
[data-accent="graphit"] .theme-light, .theme-light[data-accent="graphit"],
[data-accent="graphit"]:not(:has(.theme-light, .theme-dark)) {
  --accent: #333333; --accent-h: #111111; --accent-soft: rgba(51,51,51,.08);
}
[data-accent="graphit"] .theme-dark, .theme-dark[data-accent="graphit"] {
  --accent: #cfc9bf; --accent-h: #e6e1d8; --accent-soft: rgba(207,201,191,.13);
}

/* ④ AKZENTSTAERKE - regelt, wie viel FLAECHE die Farbe bekommt, nicht welche
   Farbe. Die Ware bleibt in jeder Stufe neutral; das ist keine Einstellung,
   sondern Systemregel. */
[data-accentweight="dezent"] .sec-banner { background: var(--surface2); color: var(--text); }
[data-accentweight="dezent"] .sec-usp-grid svg { color: var(--text-2); }
[data-accentweight="kraeftig"] .card-foot { background: var(--accent-soft); }
[data-accentweight="kraeftig"] .hdr { border-bottom-color: var(--accent); }

/* ⑤ KARTENSTIL - dieselbe Karte in drei Bauweisen. */
[data-cards="geteilt"] .card { border-color: transparent; background: none; }
[data-cards="geteilt"] .card-img { border: 1px solid var(--border); border-radius: var(--radius-sm); }
[data-cards="geteilt"] .card-body, [data-cards="geteilt"] .card-foot { padding-inline: 0; }
[data-cards="geteilt"] .card:hover { border-color: transparent; }
[data-cards="flaechig"] .card { border-color: transparent; background: var(--surface2); }
[data-cards="flaechig"] .card-img { background-color: var(--surface); border-bottom-color: transparent; }
[data-cards="flaechig"] .card:hover { box-shadow: var(--shadow-lg); border-color: transparent; }

/* ⑥ SCHRIFT - drei Paarungen aus vier bereits vorhandenen OFL-Schriften.
   Kein zusaetzliches Ladegewicht, kein Fremd-CDN. */
[data-font="bricolage"] {
  --font-display: 'Bricolage Grotesque', 'Sora', sans-serif;
  --font-sans: 'Albert Sans', 'Inter', sans-serif;
}
[data-font="neutral"] {
  --font-display: 'Inter', sans-serif;
  --font-sans: 'Inter', sans-serif;
}



/* ── GRUNDLAGEN ──────────────────────────────────────────────────────────
   Eigene Bewegungstokens auf der Admin-Wurzel: der Admin erbt sie NICHT vom
   Shop-Theme, sonst wuerde ein Theme mit langsamen Kurven auch das Backend
   traege machen. */
.admin-page, .ed-root {
  --a-ease:  cubic-bezier(.23, 1, .32, 1);
  --a-ease2: cubic-bezier(.77, 0, .175, 1);
  --a-press: 150ms;
  --a-dur:   180ms;
  --a-enter: 220ms;
  --a-exit:  140ms;
  /* Eine Leiter statt gewachsener Einzelwerte. Vorher standen 28, 36 und 46
     px nebeneinander - das ist der Grund, warum Knöpfe neben Feldern
     gequetscht aussehen: nicht zu klein an sich, sondern uneinheitlich. */
  --a-h:    40px;   /* Knöpfe, Auswahlfelder */
  --a-h-lg: 46px;   /* Eingabefelder, Hauptaktionen */
  --a-h-sm: 32px;   /* Zeilenaktionen in Tabellen */
}

/* ── AMPELFARBEN ─────────────────────────────────────────────────────────
   Zustaende - offen, erledigt, kritisch - hatten feste Werte, die fuer weissen
   Grund gerechnet waren. Auf dem dunklen Blatt saufen sie ab, und das Gruen
   lag auf Weiss ohnehin unter der Grenze fuer Fliesstext. Deshalb je Modus
   eigene Werte statt eines Kompromisses, der in keinem von beiden stimmt. */
.admin-page, .ed-root { color-scheme: light; }
.theme-light .admin-page, .admin-page.theme-light,
.theme-light .ed-root, .ed-root.theme-light,
.admin-page:not(:has(.theme-dark)), .ed-root:not(:has(.theme-dark)) {
  --ampel-ok:           #15803d;
  --ampel-ok-weich:     rgba(21, 128, 61, .12);
  --ampel-warn:         #b45309;
  --ampel-warn-text:    #92400e;
  --ampel-warn-weich:   rgba(180, 83, 9, .13);
  --ampel-fehler:       #b91c1c;
  --ampel-fehler-weich: rgba(185, 28, 28, .11);
  --ampel-info:         #1d4ed8;
  --ampel-info-weich:   rgba(29, 78, 216, .11);
  --ampel-zweit:        #6d28d9;
  --ampel-zweit-weich:  rgba(109, 40, 217, .11);
}
.theme-dark .admin-page, .admin-page.theme-dark,
.theme-dark .ed-root, .ed-root.theme-dark {
  --ampel-ok:           #4ade80;
  --ampel-ok-weich:     rgba(74, 222, 128, .15);
  --ampel-warn:         #fbbf24;
  --ampel-warn-text:    #fcd34d;
  --ampel-warn-weich:   rgba(251, 191, 36, .16);
  --ampel-fehler:       #f87171;
  --ampel-fehler-weich: rgba(248, 113, 113, .16);
  --ampel-info:         #93b4fd;
  --ampel-info-weich:   rgba(147, 180, 253, .16);
  --ampel-zweit:        #c4b5fd;
  --ampel-zweit-weich:  rgba(196, 181, 253, .16);
}

/* ── REGEL 1: KONTUR VOR FLAECHE VOR SCHATTEN ───────────────────────────
   Karten, Tabellen und Leisten sitzen auf dem Blatt - sie tragen eine Linie.
   Schatten bleibt den schwebenden Ebenen vorbehalten: Dialog, Menue, Leiste
   ueber dem Inhalt. */
.admin-page .admin-card,
.admin-page .admin-list,
.admin-page .admin-table,
.admin-page .admin-bulkbar {
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* Der Markenpunkt ist reine Zierde - hier gliedert die Linie. */
.admin-page .admin-brand-dot { display: none; }
.admin-page .admin-hdr { box-shadow: none; border-bottom: 1px solid var(--border); }
.admin-page .admin-divider { border-color: var(--border); }

/* Schwebende Ebenen DUERFEN Schatten tragen - dort liegt wirklich etwas
   ueber dem Blatt, und der Versatz sagt genau das. */
.admin-page .admin-modal, .ed-root .ed-modal { box-shadow: var(--shadow-lg); }
.admin-page .admin-modal-overlay { backdrop-filter: blur(2px); }

/* ── REGEL 4: AUSRICHTUNG IST ORNAMENT ──────────────────────────────────
   Tabellenzeilen trennt eine Regel, kein Zebrastreifen und kein Kasten. */
.admin-page .admin-table th,
.admin-page .admin-table td { border-bottom: 1px solid var(--border); }
.admin-page .admin-table th {
  background: var(--surface2);
  font-weight: 600; text-align: left;
}
.admin-page .admin-list-row { border-bottom: 1px solid var(--border); }
.admin-page .admin-list-row:last-child { border-bottom: none; }

/* ── REGEL 5: ETIKETTEN SIND SELTEN ─────────────────────────────────────
   Klein, gesperrt, Versalien - und nie auf der schwaechsten Textstufe,
   weil sie Bedeutung tragen. */
.admin-page .admin-field-label,
.admin-page .admin-label,
.admin-page .admin-info-label,
.admin-page .admin-section-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2);
}
.admin-page .admin-section-title {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
}
/* Hilfstexte sind Information, keine Randnotiz: --text-2, nicht --text-3. */
.admin-page .admin-hint, .admin-page .admin-meta { color: var(--text-2); }

/* ── REGEL 8: ZIFFERN SIND TABELLARISCH ─────────────────────────────────
   Damit Spalten stehen und beim Aktualisieren nichts springt. */
.admin-page .admin-table td,
.admin-page .admin-info-value,
.admin-page .admin-page-info,
.admin-page .admin-bulkbar-count,
.admin-page .admin-badge { font-variant-numeric: tabular-nums; }

/* ── BEDIENELEMENTE ─────────────────────────────────────────────────────
   Eine Hoehe je Rolle, Radien aus den Tokens, sichtbare Begrenzung. */
.admin-page .admin-btn,
.admin-page .admin-btn-primary,
.admin-page .admin-btn-danger,
.admin-page .admin-select {
  min-height: var(--a-h);
  border-radius: var(--radius);
}
.admin-page .admin-field-input,
.admin-page .admin-input,
.admin-page .admin-page-btn { min-height: var(--a-h-lg); border-radius: var(--radius); }
.admin-page .admin-btn-sm,
.admin-page .admin-btn-accent-sm { min-height: var(--a-h-sm); border-radius: var(--radius-sm); }

.admin-page .admin-btn, .admin-page .admin-btn-sm {
  border: 1px solid var(--border-h); background: var(--surface); color: var(--text);
}
.admin-page .admin-btn:hover, .admin-page .admin-btn-sm:hover { background: var(--surface2); }
.admin-page .admin-btn-primary, .admin-page .admin-btn-accent-sm {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
}
.admin-page .admin-btn-primary:hover, .admin-page .admin-btn-accent-sm:hover {
  background: var(--accent-h); border-color: var(--accent-h);
}
.admin-page .admin-field-input, .admin-page .admin-input, .admin-page .admin-select {
  border: 1px solid var(--border-h); background: var(--surface); color: var(--text);
}
.admin-page .admin-field-input:focus, .admin-page .admin-input:focus, .admin-page .admin-select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Ankreuzfelder: 14 px trifft kein Daumen und kaum eine Maus. */
.admin-page input[type="checkbox"], .admin-page input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
/* Marken tragen Kontur statt Farbflaeche - wie im Shop. */
.admin-page .admin-badge {
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.admin-page .admin-badge-status { border-color: var(--accent); color: var(--accent); }

/* Nur fuer Screenreader. Gebraucht dort, wo ein Punkt oder eine nackte Zahl
   eine Bedeutung traegt, die sonst nur im title-Attribut steht - und das liest
   weder die Tastatur noch der Screenreader zuverlaessig vor. */
.admin-page .sr-only, .ed-root .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sichtbarer Fokus ist Pflicht, nicht Kosmetik (WCAG 2.4.7). */
.admin-page :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.ed-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ── BEWEGUNG ───────────────────────────────────────────────────────────
   Dieselben Grenzen wie im Shop. Ein Backend, in dem nichts nachgibt, fuehlt
   sich tot an; eines, in dem alles wackelt, unruhig. Also: kurze Wege kurz. */
.admin-page .admin-btn, .admin-page .admin-btn-primary, .admin-page .admin-btn-sm,
.admin-page .admin-btn-danger, .admin-page .admin-btn-accent-sm,
.admin-page .admin-page-btn, .admin-page .admin-nav-item, .admin-page .admin-pform-tab {
  transition: transform var(--a-press) var(--a-ease),
              background-color var(--a-dur) var(--a-ease),
              border-color var(--a-dur) var(--a-ease),
              color var(--a-dur) var(--a-ease);
}
.admin-page .admin-btn:active, .admin-page .admin-btn-primary:active,
.admin-page .admin-btn-sm:active, .admin-page .admin-btn-danger:active,
.admin-page .admin-btn-accent-sm:active { transform: scale(.97); }

/* Ankommen: der Inhalt setzt sich einmal, kurz. Kein Scroll-Theater. */
@keyframes a-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.admin-page .admin-card, .admin-page .admin-list, .admin-page .admin-table {
  animation: a-in var(--a-enter) var(--a-ease) both;
}
.admin-page .admin-card:nth-of-type(2) { animation-delay: 40ms; }
.admin-page .admin-card:nth-of-type(3) { animation-delay: 80ms; }
.admin-page .admin-card:nth-of-type(n+4) { animation-delay: 100ms; }

/* Dialoge kommen aus ihrer Mitte, nicht aus dem Nichts: scale startet bei
   .96, nie bei 0 - sonst weiss niemand, woher das Fenster kam. */
@keyframes a-modal { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.admin-page .admin-modal, .ed-root .ed-modal {
  animation: a-modal var(--a-enter) var(--a-ease) both;
}
@keyframes a-fade { from { opacity: 0 } to { opacity: 1 } }
.admin-page .admin-modal-overlay { animation: a-fade var(--a-enter) var(--a-ease) both; }

/* Rueckmeldungen erscheinen dort, wo gehandelt wurde - und verschwinden
   schneller, als sie kamen. */
.admin-page .admin-msg-ok, .admin-page .admin-msg-err {
  animation: a-in var(--a-enter) var(--a-ease) both;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.admin-page .admin-msg-ok { border-color: var(--accent); color: var(--text); }

/* Zeilen ruecken beim Zeigen leicht ein - nur am Zeigegeraet, auf Touch
   bliebe der Zustand nach dem Tippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .admin-page .admin-list-row, .admin-page .admin-table tbody tr {
    transition: background-color var(--a-dur) var(--a-ease);
  }
  .admin-page .admin-list-row:hover, .admin-page .admin-table tbody tr:hover {
    background: var(--card-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-page *, .admin-page *::before, .admin-page *::after,
  .ed-root *, .ed-root *::before, .ed-root *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 120ms !important;
  }
  .admin-page .admin-card, .admin-page .admin-list, .admin-page .admin-table,
  .admin-page .admin-modal, .admin-page .admin-msg-ok, .admin-page .admin-msg-err {
    animation: none; opacity: 1; transform: none;
  }
}