:root {
  --bg: #f6f1e8;
  --card: #fffdf8;
  --text: #1c1712;
  --muted: #6b6258;
  --line: rgba(28, 23, 18, 0.1);
  --accent: #8a5a2b;
  --accent-ink: #fff;
  /* dogism Plattform-Chrome (Editor/Owner) — Kundenthemen überschreiben --accent weiter */
  --dogism-teal: #8eb3b1;
  --dogism-teal-deep: #6f9694;
  --dogism-teal-soft: #d8e6e5;
  --dogism-peach: #e69d73;
  --dogism-peach-soft: #f5dccb;
  --dogism-ink: #2c3438;
  --max: 1080px;
}

body.site.theme-luna,
body.site.theme-sand {
  --bg: #faf4ea;
  --card: #fffaf1;
  --accent: #c4782a;
  --muted: #7a6248;
  --text: #2a1d12;
}
body.site.theme-nordpfote,
body.site.theme-moos {
  --bg: #eef6f0;
  --card: #f7fbf8;
  --accent: #2f6b4f;
  --muted: #4f6759;
  --text: #14241c;
}
body.site.theme-birkenhof {
  --bg: #f3f0e4;
  --card: #fbf8ee;
  --accent: #5b7a3a;
  --muted: #5e684c;
  --text: #1e2414;
}
body.site.theme-pfotenrettung,
body.site.theme-ziegel {
  --bg: #fbf3ee;
  --card: #fff8f4;
  --accent: #c45c38;
  --muted: #7a5344;
  --text: #2a1610;
}
body.site.theme-bewegdich,
body.site.theme-see {
  --bg: #eef6f6;
  --card: #f5fbfb;
  --accent: #2a7a78;
  --muted: #4a6a6a;
  --text: #102424;
}
body.site.theme-gassinord,
body.site.theme-abend {
  --bg: #eef2f7;
  --card: #f6f8fb;
  --accent: #3d5a80;
  --muted: #4d5d73;
  --text: #121820;
}
body.site.theme-hsv-beispiel {
  --bg: #f0f6ea;
  --card: #f7fbf2;
  --accent: #3d7a2f;
  --muted: #4f6846;
  --text: #142014;
}
body.site.theme-team-besuch,
body.site.theme-beere {
  --bg: #f4f0fa;
  --card: #faf7fd;
  --accent: #6b4c9a;
  --muted: #64567a;
  --text: #1c1428;
}

* { box-sizing: border-box; }
body.site {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
.site a { color: var(--accent); }
.site .skip {
  position: absolute;
  left: -999px;
}
.site .skip:focus {
  left: 12px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 12px;
  z-index: 20;
}
.site .wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.site .top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* backdrop-filter erzeugt Containing-Block → fixed Toolbar würde im Header
   kleben und Logo/Menü zudecken. Im Owner-Edit: Blur aus, sticky unter Bar. */
body.site.owner:has(#bearbeiten:checked) header.top {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  top: var(--ws-bar-h, 48px);
  background: var(--card);
}
body.site:has(.licht:target) header.top {
  display: none !important;
}
.site .inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  min-height: var(--header-h, 64px);
}
.site .inner > .brand {
  grid-column: var(--hdr-logo-col, 1) / span var(--hdr-logo-span, 3);
  grid-row: var(--hdr-logo-row, 1);
  justify-self: start;
  min-width: 0;
}
.site .inner > nav {
  grid-column: var(--hdr-nav-col, 4) / span var(--hdr-nav-span, 9);
  grid-row: var(--hdr-nav-row, 1);
  justify-self: stretch;
  min-width: 0;
}
.site .inner > .muster-btn {
  grid-column: 12;
  grid-row: 1;
  justify-self: end;
}
.site .inner > .nav-burger {
  grid-column: 12;
  grid-row: 1;
  justify-self: end;
}
/* .bearbeiten-btn-fallback liegt als Body-Kind (fixed Corner), nicht im hdr-inner-Grid */

/* Preset mitte: Defaults kommen als CSS-Variablen; Zentrierung */
body.site.header-mitte .inner > .brand {
  justify-self: center;
  text-align: center;
  width: 100%;
}
body.site.header-mitte .inner > .brand.has-logo {
  max-width: none;
  justify-content: center;
}
body.site.header-mitte .inner > nav {
  justify-self: stretch;
}
body.site.header-mitte nav {
  justify-content: center;
}
/* Wie .nav-menu-check: visuell versteckt, aber klickbar (Label-Toggle).
   pointer-events:none würde Label-Aktivierung in manchen Browsern stören. */
.site .bearbeiten-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.site .nav-menu-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.site .nav-burger {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.site .nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.site .inner:has(#nav-menu:checked) .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site .inner:has(#nav-menu:checked) .nav-burger span:nth-child(2) {
  opacity: 0;
}
.site .inner:has(#nav-menu:checked) .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.site .muster-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site .muster-btn:hover,
.site .muster-btn:focus-visible {
  filter: brightness(1.06);
  color: var(--accent-ink) !important;
}
.site .bearbeiten-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
/*
  Owner-Corner: ruhig = kleiner Keil oben rechts (keine Nav-Überdeckung).
  Hover/Fokus/Touch → Label klappt unter dem Header auf (Wrapper hält Hover-Fläche).
  position:fixed, Body-Kind — außerhalb hdr-inner.
*/
.site .bearbeiten-corner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: 40px;
  /* Idle: nur dezente Pfote — Backend erst im Hover-Menü */
  height: 40px;
  pointer-events: auto;
}
.site .bearbeiten-btn.bearbeiten-btn-fallback {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  color: var(--text);
  box-shadow: none;
  overflow: hidden;
  transition:
    top 0.18s ease,
    width 0.18s ease,
    height 0.18s ease,
    padding 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease;
}
.site .bearbeiten-btn.bearbeiten-btn-fallback > span {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Pfote als dezenter Corner-Hint (zentriert im Keil) */
.site .bearbeiten-btn.bearbeiten-btn-fallback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.38;
  background: var(--edit-paw) center / contain no-repeat;
}
/* Backend: idle unsichtbar — nur im Hover-/Fokus-Menü der Corner */
.site .backend-corner-btn {
  position: absolute;
  top: 40px;
  right: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  transition:
    top 0.18s ease,
    width 0.18s ease,
    height 0.18s ease,
    padding 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-radius 0.18s ease,
    opacity 0.12s ease,
    visibility 0.12s ease;
}
.site .backend-corner-btn:hover,
.site .backend-corner-btn:focus-visible {
  color: var(--accent);
  outline: none;
}
/* Wrapper erweitert Hit-Area, Label wandert unter die Nav */
.site .bearbeiten-corner:hover,
.site .bearbeiten-corner:focus-within,
.site .bearbeiten-corner.is-corner-open {
  width: 180px;
  height: 148px;
}
.site .bearbeiten-corner:hover .bearbeiten-btn-fallback,
.site .bearbeiten-corner:focus-within .bearbeiten-btn-fallback,
.site .bearbeiten-corner.is-corner-open .bearbeiten-btn-fallback {
  top: 48px;
  right: 10px;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 46px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.site .bearbeiten-corner:hover .bearbeiten-btn-fallback > span,
.site .bearbeiten-corner:focus-within .bearbeiten-btn-fallback > span,
.site .bearbeiten-corner.is-corner-open .bearbeiten-btn-fallback > span {
  opacity: 1;
  max-width: 12em;
  pointer-events: auto;
}
.site .bearbeiten-corner:hover .bearbeiten-btn-fallback::before,
.site .bearbeiten-corner:focus-within .bearbeiten-btn-fallback::before,
.site .bearbeiten-corner.is-corner-open .bearbeiten-btn-fallback::before {
  left: auto;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  opacity: 0.22;
}
.site .bearbeiten-corner:hover .backend-corner-btn,
.site .bearbeiten-corner:focus-within .backend-corner-btn,
.site .bearbeiten-corner.is-corner-open .backend-corner-btn {
  top: 100px;
  right: 10px;
  width: auto;
  height: auto;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Touch / kein Hover: etwas größerer tippbarer Keil (nur Pfote idle) */
@media (hover: none) {
  .site .bearbeiten-corner {
    width: 48px;
    height: 48px;
  }
  .site .bearbeiten-btn.bearbeiten-btn-fallback {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
  }
  .site .bearbeiten-btn.bearbeiten-btn-fallback::before {
    width: 26px;
    height: 26px;
    opacity: 0.45;
  }
  .site .bearbeiten-corner.is-corner-open {
    width: 180px;
    height: 148px;
  }
}
.site .bearbeiten-btn:hover,
.site .bearbeiten-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.site .bearbeiten-an { display: none; }
body.site.owner:has(#bearbeiten:checked) .bearbeiten-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
body.site.owner:has(#bearbeiten:checked) .bearbeiten-aus { display: none; }
body.site.owner:has(#bearbeiten:checked) .bearbeiten-an { display: inline; }

/* Bearbeitungswerkzeuge erst nach „Bearbeiten“ */
body.site.owner .owner-bar,
body.site.owner .owner-tools,
body.site.owner .aendern {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .owner-bar {
  display: none; /* Hinweis steckt in den Panels */
}
body.site.owner:has(#bearbeiten:checked) .owner-tools {
  display: block;
}
body.site.owner:has(#bearbeiten:checked) .owner-tools:has(+ .aendern:target) {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .aendern:target {
  display: block;
}

/* === Webstudio-Shell: Toolbar + Navigator + Canvas + Style === */
.site .ws-toolbar,
.site .ws-nav,
.site .ws-style,
.site .ws-crumb {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) {
  --ws-nav-w: 220px;
  --ws-style-w: 300px;
  --ws-bar-h: 48px;
  /* dogism-Chrome: Brand-Gold statt Editor-Blau */
  --ws-blue: var(--dogism-teal, #8eb3b1);
  --ws-blue-ink: #1a2a2a;
  padding-top: var(--ws-bar-h);
  padding-left: var(--ws-nav-w);
  padding-right: var(--ws-style-w);
  box-sizing: border-box;
  background: #eceff3;
}
/* Toolbar als Body-Kind: volle Viewport-Breite über dem Canvas/Grid */
body.site.owner:has(#bearbeiten:checked) > .ws-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  z-index: 80;
  height: var(--ws-bar-h);
  margin: 0;
  padding: 0 14px;
  background: #1c1f26;
  color: #f3f4f6;
  border-bottom: 1px solid #111;
  font-size: 0.85rem;
  pointer-events: auto;
}
/* Fallback falls Markup-Reihenfolge abweicht */
body.site.owner:has(#bearbeiten:checked) .ws-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  z-index: 80;
  height: var(--ws-bar-h);
  margin: 0;
  padding: 0 14px;
  background: #1c1f26;
  color: #f3f4f6;
  border-bottom: 1px solid #111;
  font-size: 0.85rem;
}
/* Toolbar darf nie im Header-Grid landen */
header.top .ws-toolbar {
  display: none !important;
}
.site .ws-toolbar-brand {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #9ca3af;
  font-size: 0.8rem;
  max-width: min(480px, 48vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site .ws-viewport {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.site .ws-vp {
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9ca3af;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}
.site .ws-vp:hover,
.site .ws-vp.is-active {
  background: #2a2f3a;
  color: #fff;
}
.site .ws-toolbar-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
/* Fertig in der Toolbar; Corner-Fallback nur ohne Bearbeiten */
body.site.owner:has(#bearbeiten:checked) .ws-toolbar .bearbeiten-btn {
  display: inline-flex;
}
body.site.owner:has(#bearbeiten:checked) .bearbeiten-corner {
  display: none !important;
}
body.site.owner:not(:has(#bearbeiten:checked)) .bearbeiten-corner {
  display: block;
}
body.site.owner:not(:has(#bearbeiten:checked)) .bearbeiten-btn-fallback {
  display: inline-flex;
}
body.site.owner:has(#bearbeiten:checked) .ws-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--ws-bar-h);
  left: 0;
  bottom: 0;
  z-index: 70;
  width: var(--ws-nav-w);
  overflow: auto;
  padding: 12px 10px 20px;
  background: #f7f8fa;
  border-right: 1px solid #d7dbe3;
  color: #1f2937;
}
body.site.owner:has(#bearbeiten:checked) .ws-style {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--ws-bar-h);
  right: 0;
  bottom: 0;
  z-index: 70;
  width: var(--ws-style-w);
  overflow: auto;
  padding: 0 0 24px;
  background: #f7f8fa;
  border-left: 1px solid #d7dbe3;
  color: #1f2937;
}
body.site.owner:has(#bearbeiten:checked) .ws-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  position: fixed;
  left: var(--ws-nav-w);
  right: var(--ws-style-w);
  bottom: 0;
  z-index: 65;
  height: 32px;
  padding: 0 14px;
  background: #1c1f26;
  color: #9ca3af;
  font-size: 0.78rem;
}
.site .ws-crumb-sep { opacity: 0.5; }
.site .ws-crumb-cur { color: #fff; font-weight: 650; }
.site .ws-panel-titel {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.site .ws-tree,
.site .ws-tree-kids {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site .ws-tree-kids {
  margin: 2px 0 0 10px;
  padding-left: 8px;
  border-left: 1px solid #d7dbe3;
  display: grid;
  gap: 1px;
}
.site .ws-tree-item {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
}
.site .ws-tree-item.is-dragging { opacity: 0.45; }
.site .ws-tree-item.is-over {
  outline: 1px dashed var(--ws-blue);
}
.site .ws-tree-griff {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: #9ca3af;
  cursor: grab;
  font-size: 0.7rem;
  letter-spacing: -1px;
  user-select: none;
}
.site .ws-tree-btn {
  flex: 1 1 auto;
  text-align: left;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.site .ws-tree-btn:hover,
.site .ws-tree-btn:focus-visible {
  background: color-mix(in srgb, var(--ws-blue) 12%, transparent);
  color: var(--ws-blue);
}
.site .ws-tree-btn.is-active {
  background: var(--ws-blue);
  color: var(--ws-blue-ink);
}
.site .ws-tree-item.is-vis-aus {
  opacity: 0.42;
}
.site .ws-tree-item.is-vis-aus .ws-tree-btn {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.site .ws-tree-item.is-vis-owner {
  opacity: 0.72;
}
.site .ws-tree-item.is-vis-owner .ws-tree-btn::after {
  content: " · privat";
  font-weight: 500;
  font-size: 0.72em;
  opacity: 0.75;
}
.site .ws-tree-item.is-vis-aus .ws-tree-btn.is-active,
.site .ws-tree-item.is-vis-owner .ws-tree-btn.is-active {
  opacity: 1;
}
.site .ws-sec-adapt {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e5e7eb;
}
.site .site-block.is-vis-aus {
  opacity: 0.55;
  outline: 1px dashed #9ca3af;
}
.site .site-block.is-vis-owner {
  outline: 1px dashed color-mix(in srgb, var(--ws-blue) 45%, #9ca3af);
}
.site .ws-tree-body {
  font-weight: 750;
}
.site .ws-nav-hint {
  margin: 14px 2px 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6b7280;
}
.site .ws-style-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 12px 0;
  background: #f7f8fa;
  border-bottom: 1px solid #e5e7eb;
}
.site .ws-sel-name {
  display: block;
  margin: 0 0 8px;
  font-weight: 750;
  font-size: 0.95rem;
}
.site .ws-tabs {
  display: flex;
  gap: 0;
}
.site .ws-tab {
  flex: 1;
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-weight: 650;
  font-size: 0.84rem;
  cursor: pointer;
}
.site .ws-tab.is-active {
  color: #111827;
  border-bottom-color: var(--ws-blue);
}
.site .ws-pane {
  display: none;
  padding: 12px;
}
.site .ws-pane.is-active { display: block; }
.site .ws-choice {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.site .ws-choice legend {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.site .ws-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.site .ws-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #d7dbe3;
  background: #fff;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}
.site .ws-chip input { position: absolute; opacity: 0; pointer-events: none; }
.site .ws-chip:has(input:checked),
.site .ws-chip.is-on {
  border-color: var(--ws-blue);
  border-width: 2px;
  background: color-mix(in srgb, var(--ws-blue) 18%, #fff);
  color: #1a1208;
  font-weight: 750;
}
.site .ws-style-save {
  margin: 8px 0 0;
}
.site .ws-style-save button {
  min-height: 40px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--ws-blue);
  color: var(--ws-blue-ink);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.site .ws-note {
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.4;
}
.site .ws-link {
  display: block;
  margin: 0 0 8px;
  color: var(--ws-blue);
  font-weight: 650;
  font-size: 0.9rem;
}

/* Canvas-Editor: Webstudio-blaue Markierung + Label-Tab */
body.site.owner:has(#bearbeiten:checked) .site-block,
body.site.owner:has(#bearbeiten:checked) section.hero {
  position: relative;
  scroll-margin-top: calc(var(--ws-bar-h) + 24px);
}
body.site.owner:has(#bearbeiten:checked) .site-block {
  margin-top: 8px;
  padding: 14px 8px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  transition: border-color 0.12s ease, outline-color 0.12s ease;
}
body.site.owner:has(#bearbeiten:checked) .site-block:hover {
  border-color: color-mix(in srgb, var(--ws-blue) 45%, transparent);
}
body.site.owner:has(#bearbeiten:checked) .site-block.is-selected,
body.site.owner:has(#bearbeiten:checked) section.hero.is-selected {
  border-color: var(--ws-blue);
  outline: 1px solid var(--ws-blue);
  outline-offset: 0;
}
body.site.owner:has(#bearbeiten:checked) .site-block.is-dragging {
  opacity: 0.5;
}
body.site.owner:has(#bearbeiten:checked) .site-block.is-over {
  border-style: dashed;
  border-color: var(--ws-blue);
}
body.site.owner .block-chrome {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .block-chrome {
  display: none;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 3;
  max-width: calc(100% - 120px);
  padding: 2px 8px 2px 4px;
  border-radius: 0 0 4px 0;
  background: var(--ws-blue);
  border: 0;
  color: var(--ws-blue-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
body.site.owner:has(#bearbeiten:checked) .site-block:hover > .block-chrome,
body.site.owner:has(#bearbeiten:checked) .site-block.is-selected > .block-chrome,
body.site.owner:has(#bearbeiten:checked) .site-block.is-dragging > .block-chrome {
  display: inline-flex;
}
.site .block-griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 2px;
  border-radius: 3px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  color: var(--ws-blue-ink);
  background: color-mix(in srgb, #000 12%, transparent);
}
.site .block-griff:hover {
  background: color-mix(in srgb, #000 22%, transparent);
}
.site .block-griff:active {
  cursor: grabbing;
}
.site .block-griff-fix {
  display: none;
}
.site .block-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.site.owner:has(#bearbeiten:checked) .site-block > .owner-tools {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
body.site.owner:has(#bearbeiten:checked) .site-block:hover > .owner-tools,
body.site.owner:has(#bearbeiten:checked) .site-block.is-selected > .owner-tools {
  opacity: 1;
  pointer-events: auto;
}
body.site.owner:has(#bearbeiten:checked) .site-block > .owner-tools .aendern-link {
  min-height: 32px;
  padding: 4px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
}

/* Canvas in der Mitte: weiße Fläche */
body.site.owner:has(#bearbeiten:checked) header.top,
body.site.owner:has(#bearbeiten:checked) .hero,
body.site.owner:has(#bearbeiten:checked) main#inhalt,
body.site.owner:has(#bearbeiten:checked) footer.foot {
  background: var(--bg, #fff);
}
body.site.owner:has(#bearbeiten:checked) main#inhalt {
  min-height: 60vh;
  padding-bottom: 72px;
  box-shadow: 0 0 0 1px #d7dbe3;
}

/* Viewport-Breiten (optional) */
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1280"] header.top .wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1280"] main#inhalt.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1280"] footer.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1280"] .hero .wrap {
  max-width: 1280px;
}
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1024"] header.top .wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1024"] main#inhalt.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1024"] footer.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="1024"] .hero .wrap {
  max-width: 1024px;
}
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="768"] header.top .wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="768"] main#inhalt.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="768"] footer.wrap,
body.site.owner:has(#bearbeiten:checked)[data-ws-vp="768"] .hero .wrap {
  max-width: 768px;
}

@media (max-width: 1100px) {
  body.site.owner:has(#bearbeiten:checked) {
    --ws-nav-w: 0px;
    --ws-style-w: 0px;
    padding-left: 0;
    padding-right: 0;
  }
  body.site.owner:has(#bearbeiten:checked) .ws-nav,
  body.site.owner:has(#bearbeiten:checked) .ws-style {
    display: none;
  }
  body.site.owner:has(#bearbeiten:checked) .ws-crumb {
    left: 0;
    right: 0;
  }
}

/* Layout-Editor-Panel */
.site #edit-layout {
  scroll-margin-top: 88px;
}
.site .layout-editor-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.site .order-save-form {
  margin: 0;
}
.site .order-save-btn {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 65;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 750;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.site .order-save-btn.is-visible {
  display: inline-flex;
  align-items: center;
}
.site .brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.site .brand::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
}
.site .brand.has-logo::before {
  display: none;
}
.site .brand.has-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: min(220px, 55vw);
}
.site .brand .logo {
  height: var(--logo-h, 40px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
body.site.header-h-set .brand .logo {
  max-height: calc(var(--header-h) - 16px);
}
body.site.header-h-set:not(.logo-h-set) .brand .logo {
  height: calc(var(--header-h) - 24px);
}
body.site.logo-h-set .brand:not(.has-logo) {
  font-size: calc(var(--logo-h) * 0.4);
  line-height: 1.15;
}
.site .brand .brand-edit-label {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .brand.brand-logo-edit {
  position: relative;
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
  cursor: pointer;
}
body.site.owner:has(#bearbeiten:checked) .brand.brand-logo-edit:not(.has-logo) .brand-live {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .brand.brand-logo-edit:not(.has-logo)::before {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) .brand.brand-logo-edit:not(.has-logo) .brand-edit-label {
  display: inline;
  color: var(--muted);
  font-weight: 650;
  font-size: 0.92rem;
}
body.site.owner:has(#bearbeiten:checked) .brand.brand-logo-edit.has-logo .brand-edit-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.site .logo-text-form,
.site .logo-size-form {
  margin-top: 14px;
}
.site .logo-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.site nav {
  display: flex;
  gap: 14px 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site nav a {
  color: var(--nav-c, var(--muted));
  text-decoration: none;
  font-size: var(--nav-fs, 0.92rem);
}
.site nav a:hover { color: var(--accent); }

body.site.nav-color-muted { --nav-c: var(--muted); }
body.site.nav-color-text { --nav-c: var(--text); }
body.site.nav-color-accent { --nav-c: var(--accent); }
body.site.nav-size-klein { --nav-fs: 0.8rem; }
body.site.nav-size-normal { --nav-fs: 0.92rem; }
body.site.nav-size-gross { --nav-fs: 1.05rem; }
body.site.nav-font-klar nav,
body.site.nav-font-klar nav a {
  font-family: "Avenir Next", "Segoe UI", Helvetica, sans-serif;
}
body.site.nav-font-freundlich nav,
body.site.nav-font-freundlich nav a {
  font-family: "Trebuchet MS", "Verdana", "Segoe UI", sans-serif;
}
body.site.nav-font-serioes nav,
body.site.nav-font-serioes nav a {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* Header anklickbar im Bearbeiten-Modus (vor aktivem Edit) */
body.site.owner:has(#bearbeiten:checked) header.top:not(.is-hdr-edit) {
  cursor: pointer;
  outline: 1px dashed color-mix(in srgb, var(--ws-blue) 40%, transparent);
  outline-offset: -1px;
}
body.site.owner:has(#bearbeiten:checked) header.top:not(.is-hdr-edit):hover {
  outline-color: var(--ws-blue);
}

/* Header-Edit: heller Canvas + sichtbares Zell-Raster (12×4) */
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit {
  outline: none;
  z-index: 12;
  background: #e8eaef;
  border-bottom: 1px solid #cfd4dc;
  box-shadow: inset 0 0 0 2px var(--ws-blue);
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(28px, 1fr));
  align-items: stretch;
  min-height: 148px;
  padding-top: 14px;
  padding-bottom: 14px;
  isolation: isolate;
  column-gap: 5px;
  row-gap: 5px;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-grid-overlay {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  position: absolute;
  inset: 8px 0;
  pointer-events: none;
  z-index: 0;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-grid-overlay span {
  display: block;
  min-height: 0;
  border-radius: 8px;
  background: color-mix(in srgb, #fff 72%, #d5dae3);
  border: 1px solid color-mix(in srgb, #9aa3b2 35%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner > :not(.hdr-grid-overlay) {
  position: relative;
  z-index: 2;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit [data-hdr-item] {
  position: relative;
  cursor: grab;
  outline: 2px solid color-mix(in srgb, var(--ws-blue) 55%, transparent);
  outline-offset: 0;
  border-radius: 8px;
  touch-action: none;
  user-select: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(28, 31, 38, 0.12);
  min-height: 40px;
  padding: 8px 10px;
  box-sizing: border-box;
  align-self: stretch;
  color: var(--text);
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit [data-hdr-item].is-hdr-selected {
  outline: 2px solid var(--ws-blue);
  outline-offset: 0;
  background: color-mix(in srgb, #fff 92%, var(--ws-blue));
  z-index: 3;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit [data-hdr-item].is-hdr-dragging {
  cursor: grabbing;
  opacity: 0.95;
  z-index: 4;
}
/* Logo-Block: ohne Bild klarer Placeholder „Logo“ */
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand.brand-logo-edit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 72px;
  text-decoration: none;
  outline-style: solid;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand.brand-logo-edit:not(.has-logo) .brand-live {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand.brand-logo-edit:not(.has-logo)::before {
  display: none;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand .brand-edit-label {
  display: inline;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand.brand-logo-edit.has-logo .brand-edit-label {
  position: static;
  display: none;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .brand.brand-logo-edit.has-logo .brand-live {
  display: inline-flex;
  align-items: center;
}
/* Menü-Block: Label + sichtbare Links */
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit nav[data-hdr-item] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 6px 12px;
  min-width: 0;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit nav[data-hdr-item]::before {
  content: "Menü";
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-blue);
  margin-right: 4px;
}
body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit nav[data-hdr-item] a {
  color: var(--text);
  font-weight: 650;
  font-size: 0.88rem;
  pointer-events: none;
}

/* Selektion: Mini-Toolbar + Resize-Handles */
.hdr-sel-ui {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 5;
}
.hdr-mini-bar {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #2a2f3a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}
.hdr-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  padding: 0;
}
.hdr-mini-btn:hover {
  background: #3b4150;
  color: #fff;
}
.hdr-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ws-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  z-index: 6;
}
.hdr-handle[data-dir="nw"] { top: -5px; left: -5px; cursor: nwse-resize; }
.hdr-handle[data-dir="n"]  { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.hdr-handle[data-dir="ne"] { top: -5px; right: -5px; cursor: nesw-resize; }
.hdr-handle[data-dir="e"]  { top: 50%; right: -5px; margin-top: -5px; cursor: ew-resize; }
.hdr-handle[data-dir="se"] { bottom: -5px; right: -5px; cursor: nwse-resize; }
.hdr-handle[data-dir="s"]  { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.hdr-handle[data-dir="sw"] { bottom: -5px; left: -5px; cursor: nesw-resize; }
.hdr-handle[data-dir="w"]  { top: 50%; left: -5px; margin-top: -5px; cursor: ew-resize; }

/* Toolbar: Verwerfen / Speichern */
.ws-hdr-commit {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-right: 4px;
}
.ws-hdr-commit[hidden] {
  display: none !important;
}
.ws-hdr-discard,
.ws-hdr-save {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.ws-hdr-discard {
  border: 1px solid #5b6475;
  background: transparent;
  color: #e5e7eb;
}
.ws-hdr-discard:hover:not(:disabled) {
  border-color: #9ca3af;
  color: #fff;
}
.ws-hdr-save {
  border: 0;
  background: var(--ws-blue);
  color: #fff;
}
.ws-hdr-save:hover:not(:disabled) {
  filter: brightness(1.08);
}
.ws-hdr-discard:disabled,
.ws-hdr-save:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ANPASSEN-Panel */
.ws-hdr-adapt[hidden],
.ws-hdr-adapt-extra[hidden] {
  display: none !important;
}
.ws-hdr-adapt {
  padding: 0 0 12px;
  display: grid;
  gap: 4px;
}
.ws-hdr-adapt-label {
  margin: 0 12px 8px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.ws-hdr-section {
  margin: 0 0 10px;
  padding: 0 12px 12px;
  border-bottom: 1px solid #e5e7eb;
  display: grid;
  gap: 8px;
}
.ws-hdr-sec-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.ws-hdr-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #eef0f4;
}
.ws-hdr-seg-btn {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: default;
}
.ws-hdr-seg-btn.is-active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ws-hdr-pos-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.site .ws-hdr-hint {
  margin: 0 12px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ws-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--ws-blue) 28%, #d7dbe3);
  line-height: 1.35;
}
.site .ws-hdr-num {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #4b5563;
}
.site .ws-hdr-num input,
.site .ws-hdr-field input {
  max-width: 100%;
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line, #d7dbe3);
  border-radius: 8px;
  background: var(--card, #fff);
  font: inherit;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.site .ws-hdr-field {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #4b5563;
}
.site .ws-hdr-pane[hidden] {
  display: none !important;
}
.site .ws-hdr-pane {
  padding: 0;
}
.ws-hdr-adapt-extra {
  padding: 0 12px 12px;
}
.ws-hdr-media {
  display: grid;
  gap: 4px;
}
.ws-hdr-media img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.ws-hdr-file {
  display: block;
  cursor: pointer;
}
.ws-hdr-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.ws-hdr-btn-replace {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 8px;
  background: #16a34a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}
.ws-hdr-btn-replace:hover {
  filter: brightness(1.05);
}
.ws-hdr-btn-ghost {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  border: 1px solid #d7dbe3;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.ws-hdr-upload {
  margin: 0;
  display: grid;
  gap: 6px;
}
.ws-hdr-upload .note,
.ws-hdr-section .note,
.ws-hdr-adapt-extra .note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6b7280;
}

@media (max-width: 900px) {
  .site .inner {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
  }
  .site .inner > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
    max-width: none;
    min-width: 0;
  }
  .site .brand {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site .brand.has-logo {
    display: inline-flex;
    max-width: 100%;
  }
  .site .inner > .nav-burger {
    display: inline-flex;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end;
    margin-left: 0;
    margin-top: 0;
  }
  .site .inner > .muster-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end;
    margin-left: 0;
  }
  .site .inner > nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6px 0 10px;
    border-top: 1px solid var(--line);
  }
  .site .inner:has(#nav-menu:checked) > nav {
    display: flex;
  }
  /* Im Header-Editor: 12×4-Raster (wie Overlay), nicht Mobil-2-Zeilen */
  body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(28px, 1fr)) !important;
  }
  body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner > .brand {
    grid-column: var(--hdr-logo-col, 1) / span var(--hdr-logo-span, 3) !important;
    grid-row: var(--hdr-logo-row, 1) !important;
  }
  body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner > nav {
    display: flex !important;
    grid-column: var(--hdr-nav-col, 4) / span var(--hdr-nav-span, 9) !important;
    grid-row: var(--hdr-nav-row, 1) !important;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 0;
    padding: 8px 10px;
  }
  body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner > nav a {
    padding: 0;
    border-bottom: 0;
    font-size: 0.88rem;
  }
  body.site.owner:has(#bearbeiten:checked) header.top.is-hdr-edit .hdr-inner > .nav-burger {
    display: none !important;
  }
  body.site.header-mitte .inner > .brand {
    justify-content: flex-start;
    text-align: left;
    justify-self: start;
  }
  body.site.header-mitte .inner > nav {
    justify-content: flex-start;
  }
  .site nav a {
    padding: 12px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .site nav a:last-child {
    border-bottom: 0;
  }
  /* Ohne Muster-Button: Burger ganz rechts */
  .site .inner:not(:has(> .muster-btn)) > .nav-burger {
    grid-column: 3 !important;
  }
}

.site .hero {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--bg);
}
.site .hero > img {
  width: 100%;
  height: min(82vh, 920px);
  object-fit: cover;
  object-position: center;
  display: block;
}
.site .hero-shade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.45), transparent 55%);
  padding: 28px 0 36px;
}
.site .hero-panel {
  background: color-mix(in srgb, var(--card) 94%, white);
  border-radius: 22px;
  padding: 26px 28px 24px;
  max-width: 580px;
  border-left: 7px solid var(--accent);
  box-shadow: 0 18px 40px rgba(20, 16, 10, 0.18);
}
.site main.wrap { padding: 28px 20px 72px; }
.site h1 {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 2.55rem;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.site h2 {
  margin: 0 0 16px;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.site h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
  margin-top: 8px;
}
.site .kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.site .lede {
  color: var(--muted);
  max-width: 46rem;
  margin: 0;
}
.site .cta {
  display: inline-block;
  margin-top: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 650;
}
.site .cta-ghost {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.site .termine-intro {
  margin: 0 0 20px;
  max-width: 40rem;
}
.site .spreadshop-embed {
  margin-top: 24px;
  min-height: 320px;
}
.site .termine-angebote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.site .termine-angebot {
  display: flex;
  flex-direction: column;
  border-left: 5px solid var(--accent);
  box-shadow: 0 10px 24px rgba(20, 16, 10, 0.06);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent) 7%, var(--card)) 0%,
      var(--card) 42%
    );
}
.site .termine-angebot .kicker {
  margin-bottom: 4px;
}
.site .termine-angebot h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.25;
}
.site .termine-facts {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.site .termine-facts li {
  margin: 0;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 82%, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.site .termine-angebot-text {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}
.site .termine-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.site .termine-cta .cta {
  margin-top: 4px;
}
.site .termine-cta-hint {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.site .vt-player-wrap {
  margin: 1rem 0 1.25rem;
}
.site .vt-player {
  display: block;
  width: 100%;
  max-width: 56rem;
  height: auto;
  background: #111;
  border-radius: 4px;
}
.site .vt-quality {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
}
.site .vt-quality select {
  margin-left: 0.35rem;
}
.site section { margin-top: 52px; }
.site .photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.site .photos .photo-link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.site .photos .photo-link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.site .licht {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.site .licht:target {
  display: flex;
  z-index: 99999;
  background: rgba(12, 10, 8, 0.92);
}
.site .licht-hinter {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.9);
  color: transparent;
  overflow: hidden;
}
.site .licht figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 96vw;
}
.site .licht figure img {
  max-width: 96vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.site .licht figcaption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.site .licht-nav {
  color: var(--accent-ink);
  background: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 650;
}
.site .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.site .split.three { grid-template-columns: 1fr 1fr 1fr; }
.site .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 18px rgba(20, 16, 10, 0.04);
}
.site .card.dog img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 12px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
/* Foto links (quadratisch), Text rechts — kein flaches Querformat-Crop. */
.site .team-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}
.site .team-card:not(:has(.team-foto)) {
  grid-template-columns: 1fr;
}
.site .team-card .team-foto {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  border-radius: 12px;
  margin: 0;
  background: #f3efe6;
}
.site .team-card > :not(.team-foto) {
  grid-column: 2;
}
@media (max-width: 520px) {
  .site .team-card {
    grid-template-columns: 1fr;
  }
  .site .team-card .team-foto {
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 260px;
  }
  .site .team-card > :not(.team-foto) {
    grid-column: 1;
  }
}
.site .card .thumb,
.site .card.pad > p > img {
  width: 100%;
  max-width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
  margin: 0 0 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.site .card ul { margin: 0; padding-left: 18px; }
.site .dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0;
}
.site .dl div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.site .dl dt {
  font-size: 0.8rem;
  color: var(--muted);
}
.site .dl dd { margin: 4px 0 0; font-weight: 650; }
.site h3 { margin: 0 0 8px; font-size: 1.08rem; }
.site .banner {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  border-radius: 12px;
  padding: 12px 16px;
  margin: 14px 0 0;
}
.site .notfall {
  border: 2px solid var(--accent);
}
.site .notfall-banner {
  margin: 0;
  border-radius: 0;
  background: #c1121f;
  color: #fff;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 20px;
  font-size: 0.98rem;
  line-height: 1.35;
}
.site .hero .notfall-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(80, 8, 8, 0.28);
}
.site .voice p:first-child { margin-top: 0; font-size: 1.05rem; }
.site .voice p:first-child::before {
  content: "“";
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 0;
  margin-right: 4px;
}
.site .faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.site .faq h3 { margin-bottom: 6px; }
.site .faq p { margin: 0; color: var(--muted); }
.site .note { color: var(--muted); }
.site .form { display: grid; gap: 14px; }
.site .form label { display: grid; gap: 6px; }
.site .form input[type="text"],
.site .form select,
.site .form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  width: 100%;
  background: #fff;
}
.site .form .check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site .form .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.site .banner.fehler {
  background: #fde8e8;
  color: #7f1d1d;
}
.site .form button {
  justify-self: start;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 650;
}
.site .foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .site .split.three { grid-template-columns: 1fr 1fr; }
  .site .photos { grid-template-columns: 1fr 1fr; }
  body.site.h-klein { --fs-h1: 1.85rem; }
  body.site.h-normal { --fs-h1: 2.1rem; }
  body.site.h-gross { --fs-h1: 2.35rem; }
}
@media (max-width: 720px) {
  body.site.h-klein { --fs-h1: 1.6rem; }
  body.site.h-normal { --fs-h1: 1.75rem; }
  body.site.h-gross { --fs-h1: 1.95rem; }
  .site .photos,
  .site .split,
  .site .split.three,
  .site .dl { grid-template-columns: 1fr; }
  .site .hero-panel { padding: 20px; }
  .site .nav-burger {
    width: 44px;
    height: 44px;
  }
  .site .form input,
  .site .form textarea,
  .site .form select {
    font-size: 16px; /* iOS: kein Auto-Zoom beim Fokus */
    min-height: 44px;
  }
  .site .form textarea {
    min-height: 7rem;
  }
  .site .form button,
  .site .cta {
    min-height: 44px;
  }
  .site nav a {
    padding: 12px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
.site .owner-bar {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 18px 0 8px;
}
.site .nur-du {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.site .owner-tools { margin: 8px 0 0; }
.site .aendern-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site .aendern-link:hover,
.site .aendern-link:focus-visible {
  filter: brightness(1.05);
}
.site .aendern {
  margin-top: 14px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.site .aendern-titel {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.site .owner-form,
.site .aendern .upload {
  display: grid;
  gap: 14px;
}
.site .owner-form .block,
.site .aendern .block {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 16px;
  display: grid;
  gap: 12px;
  margin: 0;
}
.site .owner-form legend,
.site .aendern legend {
  color: var(--accent);
  padding: 0 6px;
  font-weight: 650;
}
.site .owner-form label,
.site .aendern label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}
.site .owner-form input,
.site .owner-form textarea,
.site .owner-form select,
.site .aendern input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font: inherit;
}
.site .owner-form .row,
.site .owner-form .add,
.site .owner-form .fact {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.site .owner-form .check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.site .owner-form .check input { width: auto; min-height: 0; }
.site .owner-form .sport-wahl {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
}
.site .owner-form .sport-wahl legend {
  padding: 0 6px;
  font-weight: 650;
}
.site .owner-form .check-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}
.site .owner-form .farben { border: 0; padding: 0; margin: 8px 0 0; }
.site .owner-form .farben-wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.site .owner-form .farbe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
}
.site .owner-form .farbe input { width: auto; min-height: 0; }
.site .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}
.site .swatch-sand { background: #c4782a; }
.site .swatch-moos { background: #2f6b4f; }
.site .swatch-see { background: #2a7a78; }
.site .swatch-abend { background: #3d5a80; }
.site .swatch-beere { background: #6b4c9a; }
.site .swatch-ziegel { background: #c45c38; }
.site .owner-form button,
.site .aendern button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.site .owner-form button.weg {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 600;
  box-shadow: none;
}
.site .owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 4px 0 0;
}
.site .owner-actions .schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-weight: 650;
}
.site .owner-actions .schliessen:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.site .photo-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.site .photo-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: var(--bg);
}
.site .photo-card img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.site .photo-card form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.site .photo-card button,
.site .upload button {
  padding: 8px 12px;
  font-size: 0.85rem;
}
.site .logo-block {
  margin-bottom: 18px;
}
.site .logo-vorschau {
  margin: 0 0 12px;
}
.site .logo-vorschau img {
  display: block;
  max-height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin-bottom: 8px;
}

/* Logo-Editor in der rechten Style-Spalte */
.site .ws-style .ws-settings-form {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e5e7eb;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.site .ws-style .ws-settings-form .note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6b7280;
}
.site .ws-style .ws-settings-form .ws-nav-mode-hint {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ws-blue, var(--dogism-teal, #8eb3b1)) 40%, #d7dbe3);
  background: color-mix(in srgb, var(--ws-blue, var(--dogism-teal, #8eb3b1)) 12%, #fff);
  color: #1a1208;
}
/* Unterseiten-Startseite: Owner-Vorschau wie öffentlich — nur Hero/Einstieg.
   Nicht auf Bereichspfaden (/…/ueber etc.) — dort muss der Abschnitt sichtbar bleiben. */
body.site.owner.nav-unterseiten.unterseiten-home:not(:has(#bearbeiten:checked)) #inhalt > section.site-block {
  display: none !important;
}
.site .ws-style .logo-block-ws {
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.site .ws-style .logo-block-ws legend {
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.site .ws-style .logo-block-ws .note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6b7280;
}
.site .ws-style .logo-block-ws .logo-vorschau {
  margin: 0;
}
.site .ws-style .logo-block-ws .logo-vorschau img {
  max-height: 40px;
  max-width: 100%;
  margin-bottom: 4px;
}
.site .ws-style .logo-block-ws label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #4b5563;
}
.site .ws-style .logo-block-ws input[type="text"],
.site .ws-style .logo-block-ws input[type="number"],
.site .ws-style .logo-block-ws input[type="file"] {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #d7dbe3;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 0.8rem;
  box-sizing: border-box;
}
.site .ws-style .logo-block-ws .upload,
.site .ws-style .logo-block-ws .logo-text-form,
.site .ws-style .logo-block-ws .logo-size-form {
  display: grid;
  gap: 6px;
  margin: 0;
}
.site .ws-style .logo-block-ws .logo-text-form,
.site .ws-style .logo-block-ws .logo-size-form {
  margin-top: 2px;
}
.site .ws-style .logo-block-ws .logo-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}
.site .ws-style .logo-block-ws button {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ws-blue);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* Layout / Design */
body.site {
  --fs-body: 1rem;
  --fs-h1: 2.55rem;
  --fs-h2: 1.4rem;
  --fs-btn: 1rem;
  --gap-section: 48px;
  --pad-main: 28px;
  --btn-radius: 999px;
  --btn-pad-y: 11px;
  --btn-pad-x: 20px;
}
body.site.font-klar {
  font-family: "Avenir Next", "Segoe UI", Helvetica, sans-serif;
}
body.site.font-klar h1 {
  font-family: Georgia, "Iowan Old Style", serif;
}
body.site.font-freundlich {
  font-family: "Trebuchet MS", "Verdana", "Segoe UI", sans-serif;
}
body.site.font-freundlich h1,
body.site.font-freundlich h2 {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  letter-spacing: -0.01em;
}
body.site.font-serioes {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
body.site.font-serioes h1,
body.site.font-serioes h2 {
  font-family: Georgia, "Iowan Old Style", serif;
}

body.site.h-klein {
  --fs-h1: 2.1rem;
  --fs-h2: 1.2rem;
}
body.site.h-normal {
  --fs-h1: 2.55rem;
  --fs-h2: 1.4rem;
}
body.site.h-gross {
  --fs-h1: 2.9rem;
  --fs-h2: 1.55rem;
}
body.site.txt-klein {
  --fs-body: 0.92rem;
}
body.site.txt-normal {
  --fs-body: 1rem;
}
body.site.txt-gross {
  --fs-body: 1.08rem;
}
body.site.btnsize-klein {
  --fs-btn: 0.92rem;
  --btn-pad-y: 9px;
  --btn-pad-x: 16px;
}
body.site.btnsize-normal {
  --fs-btn: 1rem;
}
body.site.btnsize-gross {
  --fs-btn: 1.08rem;
  --btn-pad-y: 13px;
  --btn-pad-x: 22px;
}
body.site {
  font-size: var(--fs-body);
}
body.site h1 { font-size: var(--fs-h1); }
body.site h2 { font-size: var(--fs-h2); }

body.site.btn-eckig {
  --btn-radius: 8px;
}
body.site.btn-rund {
  --btn-radius: 999px;
}
body.site.btn-dezent .form button,
body.site.btn-dezent .cta {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
body.site.btn-kraft .form button,
body.site.btn-kraft .cta {
  font-weight: 700;
}
body.site.btn-dezent {
  --btn-pad-y: 9px;
  --btn-pad-x: 16px;
}
body.site .form button,
body.site .cta {
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-btn);
}

body.site.dicht-kompakt {
  --gap-section: 28px;
  --pad-main: 18px;
}
body.site.dicht-normal {
  --gap-section: 48px;
  --pad-main: 28px;
}
body.site.dicht-luftig {
  --gap-section: 64px;
  --pad-main: 36px;
}
body.site main.wrap {
  padding-top: var(--pad-main);
  padding-bottom: calc(var(--pad-main) + 44px);
}

/* Mood: Fläche hell / dunkel / pastell (Marken-Akzent bleibt) */
body.site.mood-hell {
  /* Default: Theme-Farbe */
}
body.site.mood-dunkel {
  --bg: #0b0d11;
  --card: #161b22;
  --text: #f4f6f9;
  --muted: #9aa3b2;
  --line: rgba(244, 246, 249, 0.14);
  --accent-ink: #0a0c10;
}
body.site.mood-dunkel .top {
  background: color-mix(in srgb, var(--card) 94%, black);
  border-bottom-color: var(--line);
}
body.site.mood-dunkel .hero-panel {
  background: color-mix(in srgb, var(--card) 88%, black);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
body.site.mood-dunkel .cta,
body.site.mood-dunkel .form button {
  color: var(--accent-ink);
}
body.site.mood-dunkel .foot,
body.site.mood-dunkel .kicker,
body.site.mood-dunkel .lede,
body.site.mood-dunkel .voice,
body.site.mood-dunkel .dl dd {
  color: var(--muted);
}
body.site.mood-dunkel .photos .photo-link,
body.site.mood-dunkel .voice,
body.site.mood-dunkel .angebot-zeile {
  border-color: var(--line);
}
body.site.mood-pastell {
  --bg: color-mix(in srgb, var(--bg) 42%, #fff8fb);
  --card: color-mix(in srgb, var(--card) 28%, #ffffff);
  --text: color-mix(in srgb, var(--text) 72%, #5b4a6a);
  --muted: color-mix(in srgb, var(--muted) 55%, #9a7a9e);
  --line: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent: color-mix(in srgb, var(--accent) 70%, #e8a0c0);
}
body.site.mood-pastell .hero-panel,
body.site.mood-pastell .cta {
  border-radius: 28px;
}
body.site.mood-pastell .cta,
body.site.mood-pastell .form button {
  border-radius: 999px;
}
body.site.mood-pastell section h2::after {
  border-radius: 999px;
  height: 3px;
  width: 56px;
  opacity: 0.7;
}

/* Inhaltsbreite: steuert --max auf .wrap (Kopf, main, Fuß, Hero-Text) */
body.site.width-schmal {
  --max: 720px;
}
body.site.width-normal {
  --max: 1080px;
}
body.site.width-breit {
  --max: 1360px;
}
body.site.width-voll {
  --max: 1680px;
}
body.site.width-voll .hero > img {
  height: min(92vh, 1100px);
}
body.site.width-voll #fotos .photos,
body.site.width-voll.preset-weitblick #fotos .photos {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
body.site.width-schmal .hero-panel,
body.site.width-schmal .hero-copy {
  max-width: 100%;
}
body.site.width-breit .split,
body.site.width-breit .photos {
  gap: 16px;
}
body.site.width-breit .photos {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Hero-Varianten */
body.site.hero-vollbild .hero > img {
  height: min(88vh, 980px);
}
body.site.hero-vollbild .hero-shade {
  align-items: center;
  background: linear-gradient(
    to top,
    rgba(8, 10, 14, 0.62) 0%,
    rgba(8, 10, 14, 0.28) 45%,
    rgba(8, 10, 14, 0.18) 100%
  );
  padding: 40px 0 48px;
}
body.site.hero-vollbild .hero-copy {
  max-width: 640px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
body.site.hero-vollbild .hero-copy .kicker {
  color: color-mix(in srgb, var(--accent) 70%, white);
}
body.site.hero-vollbild .hero-copy h1,
body.site.hero-vollbild .hero-copy .lede {
  color: #fff;
}
body.site.hero-vollbild .hero-copy .lede {
  opacity: 0.92;
}
body.site.mood-dunkel.hero-vollbild .hero-shade {
  background: linear-gradient(
    120deg,
    rgba(6, 8, 14, 0.82),
    rgba(6, 8, 14, 0.4) 55%,
    transparent
  );
}

/* Vorlagen-Feinschliff (klare visuelle Identitäten) */
body.site.preset-shopklar #angebot .split,
body.site.preset-shopklar #kurse .split {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body.site.preset-shopklar #angebot li,
body.site.preset-shopklar .angebot-zeile {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
body.site.preset-studio h1 {
  letter-spacing: -0.05em;
  font-size: calc(var(--fs-h1) * 1.08);
}
body.site.preset-studio #fotos .photos {
  grid-template-columns: 1fr;
  gap: 18px;
}
body.site.preset-studio #fotos .photo-link img {
  border-radius: 2px;
  filter: contrast(1.08) saturate(0.92);
}
body.site.preset-studio .cta {
  border-radius: 2px;
  letter-spacing: 0.04em;
}
body.site.preset-produkt #angebot .split,
body.site.preset-produkt #kurse ul {
  display: grid;
  gap: 14px;
}
body.site.preset-produkt .cta {
  font-size: calc(var(--fs-btn) * 1.08);
  padding: calc(var(--btn-pad-y) * 1.15) calc(var(--btn-pad-x) * 1.25);
}
body.site.preset-magazin #stimmen .split,
body.site.preset-magazin #ueber {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}
body.site.preset-magazin #fotos .photos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
body.site.preset-magazin #social {
  padding: 22px 18px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  border-left: 4px solid var(--accent);
}
@media (max-width: 800px) {
  body.site.preset-magazin #stimmen .split,
  body.site.preset-magazin #ueber {
    grid-template-columns: 1fr;
  }
  body.site.preset-magazin #fotos .photos {
    grid-template-columns: 1fr 1fr;
  }
}
body.site.preset-gastlich #angebot li,
body.site.preset-gastlich .angebot-zeile {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  padding-top: 4px;
}
body.site.preset-gastlich h1,
body.site.preset-gastlich h2 {
  font-weight: 500;
}
body.site.preset-sanft section {
  border-radius: 24px;
  padding: 8px 4px;
}
body.site.preset-sanft .cta,
body.site.preset-sanft .form button {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}
body.site.preset-sanft h2::after {
  width: 64px;
  border-radius: 999px;
}
body.site.preset-standort #ort {
  padding: 22px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(20, 16, 10, 0.08);
}
body.site.preset-standort #angebot .split {
  grid-template-columns: 1fr 1fr;
}
body.site.preset-portfolio #ueber,
body.site.preset-portfolio #team {
  text-align: center;
}
body.site.preset-portfolio #team .split {
  justify-items: center;
}
body.site.preset-portfolio .hero-panel {
  margin-inline: auto;
  text-align: center;
  border-left: 0;
  border-top: 6px solid var(--accent);
}
body.site.preset-power {
  --accent: color-mix(in srgb, var(--accent) 55%, #ff3b3b);
}
body.site.preset-power .cta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
body.site.preset-power h1 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
body.site.preset-power h2::after {
  width: 72px;
  height: 5px;
  border-radius: 0;
}
body.site.preset-weitblick .hero > img {
  object-position: center 40%;
  height: min(94vh, 1200px);
}
body.site.preset-weitblick #fotos .photo-link img {
  border-radius: 0;
  min-height: 220px;
  object-fit: cover;
}
body.site.preset-weitblick #ort {
  padding: 28px 0;
}
body.site main.wrap > section {
  margin-top: var(--gap-section);
}
body.site main.wrap > section:first-of-type {
  margin-top: 0;
}

.site .wahl-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.site .wahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.site .wahl input { width: auto; min-height: 0; }

.site .vorschau-reihe,
.vorschau-reihe {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.site .vorschau-karte,
.vorschau-karte {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line, #d8dee6);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  color: inherit;
  align-content: start;
}
.site .owner-form .vorschau-karte,
.site .aendern .vorschau-karte {
  display: grid;
}
.site .vorschau-karte input,
.vorschau-karte input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.site .vorschau-karte:has(input:checked),
.vorschau-karte:has(input:checked) {
  border-color: var(--accent, #1d4f91);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1d4f91) 35%, transparent);
}
.site .vorschau-blick,
.vorschau-blick {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 132px;
  padding: 8px;
  border-radius: 10px;
  background: #eef1f4;
  overflow: hidden;
  text-align: center;
}
.site .vorschau-name,
.vorschau-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #1b2430);
  text-align: center;
}
.site .bsp,
.bsp {
  display: grid;
  gap: 4px;
  line-height: 1.25;
  color: #1c1712;
}
.site .bsp strong,
.bsp strong { font-weight: 750; }
.site .bsp em,
.bsp em { font-style: normal; opacity: 0.75; font-size: 0.85em; }
.bsp-font-klar,
.bsp-font-klar strong { font-family: "Avenir Next", "Segoe UI", Helvetica, sans-serif; }
.bsp-font-klar strong { font-family: Georgia, "Iowan Old Style", serif; font-size: 1.15rem; }
.bsp-font-freundlich,
.bsp-font-freundlich strong {
  font-family: "Trebuchet MS", Verdana, "Segoe UI", sans-serif;
}
.bsp-font-freundlich strong { font-size: 1.15rem; }
.bsp-font-serioes,
.bsp-font-serioes strong {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
.bsp-font-serioes strong { font-size: 1.15rem; }
.bsp-h-klein { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; }
.bsp-h-normal { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.bsp-h-gross { font-family: Georgia, serif; font-size: 1.7rem; font-weight: 700; }
.bsp-txt-klein { font-size: 0.82rem; }
.bsp-txt-normal { font-size: 0.95rem; }
.bsp-txt-gross { font-size: 1.08rem; }
.bsp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8a5a2b;
  color: #fff;
  font-weight: 650;
  border: 2px solid #8a5a2b;
  white-space: nowrap;
}
.bsp-btn-klein { font-size: 0.78rem; padding: 6px 10px; border-radius: 999px; }
.bsp-btn-normal { font-size: 0.92rem; padding: 9px 14px; border-radius: 999px; }
.bsp-btn-gross { font-size: 1.05rem; padding: 12px 18px; border-radius: 999px; }
.bsp-btn-rund { border-radius: 999px; padding: 9px 14px; font-size: 0.92rem; }
.bsp-btn-eckig { border-radius: 8px; padding: 9px 14px; font-size: 0.92rem; }
.bsp-btn-kraft { border-radius: 999px; padding: 9px 14px; font-weight: 750; }
.bsp-btn-dezent {
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: #8a5a2b;
}
.bsp-abstand {
  display: grid;
  width: 100%;
}
.bsp-abstand i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #c9b8a0;
}
.bsp-abstand-kompakt { gap: 4px; }
.bsp-abstand-normal { gap: 10px; }
.bsp-abstand-luftig { gap: 18px; }
.bsp-hero {
  display: grid;
  gap: 6px;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 650;
  color: #1c1712;
}
.bsp-hero-foto {
  display: block;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(120deg, #d4b896, #8a5a2b);
}
.bsp-hero-ohne {
  padding: 12px 8px;
  border: 1px dashed #b7a48c;
  border-radius: 8px;
}
.bsp-preset {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  color: #1c1712;
}
.bsp-preset strong {
  font-size: 0.95rem;
  font-weight: 750;
}
.bsp-preset em {
  font-style: normal;
  font-size: 0.78rem;
  color: #6b5c4c;
  line-height: 1.25;
}
.bsp-preset-bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.bsp-preset-klassisch .bsp-preset-bar {
  background: linear-gradient(90deg, #c4782a 40%, #e8d4b8 40%);
}
.bsp-preset-foto .bsp-preset-bar {
  height: 22px;
  background: linear-gradient(120deg, #d4b896, #8a5a2b);
}
.bsp-preset-text .bsp-preset-bar {
  height: 4px;
  width: 55%;
  background: #5a4a3a;
}
.bsp-preset-fein .bsp-preset-bar {
  background: repeating-linear-gradient(
    90deg,
    #c9b8a0 0 8px,
    transparent 8px 14px
  );
}

/* Mini-Seitenvorschau für Layout-Vorlagen */
.seite-mini {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d8dee6;
  box-shadow: 0 1px 2px rgba(27, 36, 48, 0.06);
  text-align: left;
  position: relative;
}
/* Breiten-Hinweis in Mini-Vorschauen */
.seite-mini-w-schmal {
  padding-left: 18px;
  padding-right: 18px;
  background-image: linear-gradient(
    90deg,
    #cbd5e1 0,
    #cbd5e1 10px,
    transparent 10px,
    transparent calc(100% - 10px),
    #cbd5e1 calc(100% - 10px)
  );
}
.seite-mini-w-normal {
  padding-left: 10px;
  padding-right: 10px;
}
.seite-mini-w-breit {
  padding-left: 4px;
  padding-right: 4px;
  box-shadow: inset 0 0 0 1.5px #64748b;
}
.seite-mini-w-voll {
  padding: 4px 0 6px;
}
.seite-mini-w-voll .seite-mini-hero {
  border-radius: 0;
  margin: 0;
}
.seite-mini-w-voll .seite-mini-nav,
.seite-mini-w-voll .seite-mini-kopf-mitte,
.seite-mini-w-voll .seite-mini-sec,
.seite-mini-w-voll .seite-mini-cta {
  margin-left: 6px;
  margin-right: 6px;
}
.seite-mini-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.seite-mini-nav b {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: #8a5a2b;
}
.seite-mini-nav i {
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: #c9d0d8;
  margin-left: auto;
}
.seite-mini-nav i + i { margin-left: 0; }
.seite-mini-hero {
  display: grid;
  gap: 3px;
  padding: 6px;
  border-radius: 4px;
  background: #f6f1e8;
}
.seite-mini-bild {
  display: block;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(120deg, #d4b896, #8a5a2b 55%, #c4782a);
}
.seite-mini-titel {
  display: block;
  height: 7px;
  width: 72%;
  border-radius: 2px;
  background: #2a2218;
}
.seite-mini-lede {
  display: block;
  height: 4px;
  width: 90%;
  border-radius: 2px;
  background: #b7a48c;
}
.seite-mini-sec {
  display: grid;
  gap: 3px;
}
.seite-mini-h {
  display: block;
  height: 5px;
  width: 40%;
  border-radius: 2px;
  background: #5a4a3a;
}
.seite-mini-p {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background: #d8dee6;
}
.seite-mini-p.kurz { width: 68%; }
.seite-mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.seite-mini-cards i {
  display: block;
  height: 16px;
  border-radius: 3px;
  background: #eef1f4;
  border: 1px solid #d8dee6;
}
.seite-mini-cta {
  display: block;
  height: 10px;
  width: 42%;
  border-radius: 999px;
  background: #8a5a2b;
}

.seite-mini-tag {
  display: block;
  width: 36%;
  height: 5px;
  border-radius: 2px;
  background: #39ff14;
  margin-bottom: 2px;
}
.seite-mini-suche-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c5d0e0;
  margin-top: 4px;
}
.seite-mini-abo {
  width: 100% !important;
  border-radius: 4px !important;
}

/* 1 Shop-klar: hell, Teal-Hero, Produkt-Grid */
.seite-mini-shopklar {
  background: #fff;
}
.seite-mini-shopklar .seite-mini-nav b { background: #0d9488; }
.seite-mini-shopklar .seite-mini-hero {
  background: #14b8a6;
  padding: 5px;
}
.seite-mini-shopklar .seite-mini-bild {
  background: linear-gradient(120deg, #99f6e4, #0f766e);
  height: 20px;
}
.seite-mini-shopklar .seite-mini-titel { background: #fff; }
.seite-mini-shopklar .seite-mini-lede { background: rgba(255,255,255,0.55); }
.seite-mini-shopklar .seite-mini-cards {
  grid-template-columns: 1fr 1fr 1fr;
}
.seite-mini-shopklar .seite-mini-cards i { height: 14px; }
.seite-mini-shopklar .seite-mini-cta { background: #0d9488; }

/* 2 Studio-Dunkel: dark, neon, Galerie */
.seite-mini-studio {
  background: #0f1218;
  border-color: #2a3140;
}
.seite-mini-studio .seite-mini-logo-mitte { background: #38bdf8; }
.seite-mini-studio .seite-mini-menue-mitte i { background: #475569; }
.seite-mini-studio .seite-mini-hero {
  background: #151a24;
  gap: 5px;
}
.seite-mini-studio .seite-mini-bild { display: none; }
.seite-mini-studio .seite-mini-titel {
  height: 10px;
  width: 88%;
  background: #f8fafc;
}
.seite-mini-studio .seite-mini-lede { background: #64748b; }
.seite-mini-studio .seite-mini-h { background: #38bdf8; }
.seite-mini-studio .seite-mini-cards {
  grid-template-columns: 1fr 1fr 1fr;
}
.seite-mini-studio .seite-mini-cards i {
  height: 20px;
  background: #1e293b;
  border-color: #334155;
}
.seite-mini-studio .seite-mini-cta {
  background: #38bdf8;
  border-radius: 2px;
}

/* 3 Produkt-Landing: hell, Features, Pricing */
.seite-mini-produkt { background: #f8fafc; }
.seite-mini-produkt .seite-mini-nav b { background: #2563eb; }
.seite-mini-produkt .seite-mini-hero {
  background: #eff6ff;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.seite-mini-produkt .seite-mini-bild {
  grid-row: 1 / span 3;
  grid-column: 2;
  height: 36px;
  background: linear-gradient(160deg, #bfdbfe, #3b82f6);
}
.seite-mini-produkt .seite-mini-titel { background: #1e3a8a; width: 90%; }
.seite-mini-produkt .seite-mini-cards i {
  height: 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}
.seite-mini-produkt .seite-mini-cta {
  background: #2563eb;
  height: 12px;
}

/* 4 Magazin: dunkel, Neon-Grün, Subscribe */
.seite-mini-magazin {
  background: #111;
  border-color: #333;
}
.seite-mini-magazin .seite-mini-nav b { background: #39ff14; }
.seite-mini-magazin .seite-mini-nav i { background: #444; }
.seite-mini-magazin .seite-mini-hero {
  background: #1a1a1a;
  padding: 5px;
}
.seite-mini-magazin .seite-mini-bild {
  height: 28px;
  background: linear-gradient(120deg, #333, #555);
}
.seite-mini-magazin .seite-mini-titel { background: #f5f5f5; }
.seite-mini-magazin .seite-mini-cards i {
  background: #222;
  border-color: #444;
}
.seite-mini-magazin .seite-mini-abo {
  background: #39ff14 !important;
  height: 12px;
}

/* 5 Gastlich: Cream/Olive, Foto, Menü */
.seite-mini-gastlich {
  background: #f5f0e6;
  border-color: #d4cbb8;
}
.seite-mini-gastlich .seite-mini-nav b { background: #6b7c3a; }
.seite-mini-gastlich .seite-mini-hero {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.seite-mini-gastlich .seite-mini-bild {
  height: 34px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(120deg, #c4a574, #6b7c3a 60%, #8b6914);
}
.seite-mini-gastlich .seite-mini-titel {
  margin: 5px 6px 0;
  background: #3d3428;
}
.seite-mini-gastlich .seite-mini-lede { margin: 0 6px 6px; }
.seite-mini-gastlich .seite-mini-cards {
  grid-template-columns: 1fr;
}
.seite-mini-gastlich .seite-mini-cards i { height: 8px; }
.seite-mini-gastlich .seite-mini-cta {
  background: #5c4033;
  width: 55%;
}

/* 6 Sanft: Pastell, abgerundet */
.seite-mini-sanft {
  background: #f0faf6;
  border-radius: 12px;
}
.seite-mini-sanft .seite-mini-nav b {
  background: #7ec8a3;
  border-radius: 999px;
}
.seite-mini-sanft .seite-mini-hero {
  background: #d8f3e7;
  border-radius: 16px;
}
.seite-mini-sanft .seite-mini-bild {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  justify-self: end;
  background: linear-gradient(140deg, #f9c5b8, #a8e0d0);
}
.seite-mini-sanft .seite-mini-cards i {
  height: 18px;
  border-radius: 12px;
  background: #ffe8dc;
  border-color: #f5c9b8;
}
.seite-mini-sanft .seite-mini-cards i:nth-child(2) { background: #d8f3e7; }
.seite-mini-sanft .seite-mini-cta {
  background: #7ec8a3;
  height: 12px;
}

/* 7 Standort: Map/Suche, Property-Cards */
.seite-mini-standort { background: #fff; }
.seite-mini-standort .seite-mini-nav b { background: #1e3a5f; }
.seite-mini-standort .seite-mini-suche {
  background:
    linear-gradient(rgba(226, 232, 240, 0.7), rgba(226, 232, 240, 0.7)),
    repeating-linear-gradient(0deg, transparent, transparent 6px, #cbd5e1 6px, #cbd5e1 7px),
    repeating-linear-gradient(90deg, transparent, transparent 6px, #cbd5e1 6px, #cbd5e1 7px);
  padding: 8px 6px;
}
.seite-mini-standort .seite-mini-titel {
  width: 70%;
  margin: 0 auto;
  background: #1e3a5f;
}
.seite-mini-standort .seite-mini-cards {
  grid-template-columns: 1fr 1fr 1fr;
}
.seite-mini-standort .seite-mini-cards i { height: 18px; }
.seite-mini-standort .seite-mini-cta {
  background: #1e3a5f;
  border-radius: 3px;
}

/* 8 Portfolio: Lila/Gelb, Portrait */
.seite-mini-portfolio {
  background: #faf5ff;
  border-color: #e9d5ff;
}
.seite-mini-portfolio .seite-mini-logo-mitte { background: #a855f7; }
.seite-mini-portfolio .seite-mini-hero {
  background: #7c3aed;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px;
}
.seite-mini-portfolio .seite-mini-bild {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fbbf24;
  grid-row: 1 / span 2;
}
.seite-mini-portfolio .seite-mini-titel { background: #fef08a; width: 80%; }
.seite-mini-portfolio .seite-mini-lede { background: rgba(255,255,255,0.5); }
.seite-mini-portfolio .seite-mini-cards i {
  border-radius: 4px;
  background: #ede9fe;
  border-color: #c4b5fd;
  height: 16px;
}
.seite-mini-portfolio .seite-mini-cta {
  background: #a855f7;
  border-radius: 3px;
}

/* 9 Power: schwarz/rot, Action */
.seite-mini-power {
  background: #0a0a0a;
  border-color: #333;
}
.seite-mini-power .seite-mini-nav b { background: #ef4444; }
.seite-mini-power .seite-mini-nav i { background: #444; }
.seite-mini-power .seite-mini-hero {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #111;
}
.seite-mini-power .seite-mini-bild {
  height: 36px;
  border-radius: 0;
  background: linear-gradient(135deg, #1a1a1a 30%, #7f1d1d 70%, #ef4444);
}
.seite-mini-power .seite-mini-titel {
  position: relative;
  margin: -18px 6px 0;
  height: 9px;
  width: 70%;
  background: #fff;
  z-index: 1;
}
.seite-mini-power .seite-mini-lede {
  margin: 3px 6px 6px;
  background: #888;
}
.seite-mini-power .seite-mini-h { background: #ef4444; }
.seite-mini-power .seite-mini-cta {
  background: #ef4444;
  border-radius: 2px;
  width: 50%;
}

/* 10 Weitblick: Foto-voll, hell, Touren */
.seite-mini-weitblick { background: #fff; gap: 8px; }
.seite-mini-weitblick .seite-mini-nav b { background: #38bdf8; }
.seite-mini-weitblick .seite-mini-hero {
  padding: 0;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.seite-mini-weitblick .seite-mini-bild {
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 45%, #0369a1 100%);
}
.seite-mini-weitblick .seite-mini-titel {
  position: absolute;
  left: 8px;
  top: 14px;
  width: 55%;
  height: 8px;
  background: #fff;
}
.seite-mini-weitblick .seite-mini-lede {
  position: absolute;
  left: 8px;
  top: 26px;
  width: 40%;
  background: rgba(255,255,255,0.7);
}
.seite-mini-weitblick .seite-mini-cards i {
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(160deg, #e0f2fe, #7dd3fc);
}
.seite-mini-weitblick .seite-mini-cta {
  background: #0ea5e9;
  border-radius: 999px;
}

/* Feineinstellung: gemischte Hinweise */
.seite-mini-fein .seite-mini-bild {
  background: repeating-linear-gradient(
    90deg,
    #d4b896 0 10px,
    #8a5a2b 10px 14px,
    #c4782a 14px 22px
  );
}
.seite-mini-fein .seite-mini-cta {
  border-radius: 4px;
  background: #fff;
  border: 1.5px solid #8a5a2b;
  box-shadow: inset 20px 0 0 #8a5a2b;
}

.bsp-mood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}
.bsp-mood-hell { background: #f8fafc; color: #1e293b; border: 1px solid #cbd5e1; }
.bsp-mood-dunkel { background: #111827; color: #f9fafb; }
.bsp-mood-pastell { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Feineinstellung: Breiten-Vorschau */
.bsp-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  border-radius: 8px;
  background: #e8edf2;
  border: 1px solid #c5d0dc;
}
.bsp-width i {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: #64748b;
}
.bsp-width-schmal i { width: 38%; }
.bsp-width-normal i { width: 58%; }
.bsp-width-breit i { width: 78%; }
.bsp-width-voll {
  background: #dbeafe;
  border-color: #93c5fd;
}
.bsp-width-voll i {
  width: 96%;
  background: #2563eb;
}

.bsp-hero-vollbild {
  position: relative;
  overflow: hidden;
}
.bsp-hero-vollbild .bsp-hero-foto {
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(120deg, #64748b, #1e293b);
}
.bsp-hero-vollbild span:last-child {
  position: absolute;
  left: 8px;
  bottom: 8px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.site .bereich-liste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.site .bereich-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  cursor: grab;
  user-select: none;
}
.site .bereich-zeile.zieht {
  opacity: 0.55;
  cursor: grabbing;
}
.site .bereich-zeile.bereich-ueber {
  border-color: var(--accent, #8b6a3e);
  box-shadow: 0 0 0 1px var(--accent, #8b6a3e);
}
.site .bereich-griff {
  letter-spacing: -2px;
  opacity: 0.45;
  font-size: 0.95rem;
  line-height: 1;
}
.site .bereich-name {
  font-weight: 600;
}
.site .bereich-tasten {
  display: flex;
  gap: 4px;
}
.site .bereich-tasten button {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1;
}

/* Layout-Vorlage Popup */
.layout-popup {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.layout-popup:target {
  display: flex;
}
.layout-popup-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.layout-popup-karte {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  background: #f8fafc;
  border: 1px solid #d8dee6;
  border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.layout-popup-karte h2 {
  margin: 0 40px 8px 0;
  font-size: 1.25rem;
}
.layout-popup-karte > .note {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 0.92rem;
}
.layout-popup-zu {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #334155;
  text-decoration: none;
  font-size: 1.45rem;
  line-height: 1;
  background: rgba(148, 163, 184, 0.18);
}
.layout-popup-zu:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
}
.vorschau-reihe-popup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.vorschau-reihe-popup .vorschau-karte {
  min-width: 0;
  padding: 10px;
}
.vorschau-reihe-popup .vorschau-blick {
  min-height: 118px;
}
.vorschau-blurb {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #64748b;
}
.layout-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 16px 0 0;
}
.layout-popup-actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #8a5a2b);
  color: var(--accent-ink, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.layout-popup-cancel {
  color: #64748b;
  text-decoration: none;
  font-weight: 650;
}
.layout-popup-cancel:hover { color: #1d4ed8; }

.site .layout-vorschau-kurz {
  border-style: dashed;
}
.site .ws-vorlage-aktuell {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: #4b5563;
}

/* Social Media */
.site .social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.site .social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 650;
}
.site .social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.site .social-badge {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Mini-Preview Odoo / Kopfzeile-Beispiele */
.seite-mini-kopf-mitte {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 2px 0 4px;
  border-bottom: 1px solid #e5e7eb;
}
.seite-mini-logo-mitte {
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: #8a5a2b;
}
.seite-mini-menue-mitte {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.seite-mini-menue-mitte i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #c9d0d8;
}
.seite-mini-odoo .seite-mini-hero { margin-top: 2px; }

.bsp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d8dee6;
}
.bsp-header b {
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: #8a5a2b;
}
.bsp-header i {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: #c9d0d8;
  margin-left: auto;
}
.bsp-header i + i { margin-left: 0; }
.bsp-header-mitte {
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.bsp-header-mitte span {
  display: flex;
  gap: 4px;
}
.bsp-header-mitte i { margin-left: 0; }

/* === dogism Editor: große Hintergrund-Pfote nur auf echte Aktions-Buttons (keine Chips/Tabs/▲▼) === */
.site {
  --edit-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231c1f26'%3E%3Cellipse cx='12' cy='15.5' rx='5.2' ry='4.2'/%3E%3Ccircle cx='5.8' cy='8.5' r='2.1'/%3E%3Ccircle cx='9.8' cy='5.8' r='2.15'/%3E%3Ccircle cx='14.2' cy='5.8' r='2.15'/%3E%3Ccircle cx='18.2' cy='8.5' r='2.1'/%3E%3C/svg%3E");
  --edit-paw-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cellipse cx='12' cy='15.5' rx='5.2' ry='4.2'/%3E%3Ccircle cx='5.8' cy='8.5' r='2.1'/%3E%3Ccircle cx='9.8' cy='5.8' r='2.15'/%3E%3Ccircle cx='14.2' cy='5.8' r='2.15'/%3E%3Ccircle cx='18.2' cy='8.5' r='2.1'/%3E%3C/svg%3E");
}
/* Bearbeiten (nicht Corner-Fallback), Aendern-Links, Owner-Primary via .dogism-paw */
.site .bearbeiten-btn:not(.bearbeiten-btn-fallback),
.site .aendern-link,
.site button.dogism-paw,
.site .owner-form button.dogism-paw,
.site .aendern button.dogism-paw,
.site .aendern .upload > button[type="submit"],
.site .ws-style-save > button[type="submit"],
.site .form.wide > button[name="tun"][value="speichern"],
.site .upload > button[type="submit"] {
  position: relative;
  overflow: hidden;
  /* Platz rechts fuer die 36px-Hintergrund-Pfote (sonst unter dem Label unsichtbar) */
  padding-right: 46px;
}
.site .bearbeiten-btn > *,
.site .aendern-link > *,
.site button.dogism-paw > *,
.site .aendern .upload > button[type="submit"] > *,
.site .ws-style-save > button[type="submit"] > *,
.site .form.wide > button[name="tun"][value="speichern"] > *,
.site .upload > button[type="submit"] > * {
  position: relative;
  z-index: 1;
}
/* ~3x frueher (11px → 36px): Pfote als Hintergrund rechts, Text bleibt lesbar */
.site .bearbeiten-btn:not(.bearbeiten-btn-fallback)::before,
.site .aendern-link::before,
.site button.dogism-paw::before,
.site .aendern .upload > button[type="submit"]::before,
.site .ws-style-save > button[type="submit"]::before,
.site .form.wide > button[name="tun"][value="speichern"]::before,
.site .upload > button[type="submit"]::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0.22;
  background: var(--edit-paw) center / contain no-repeat;
}
/* Dunkle/Akzent-Buttons: hellere Pfote — nicht .weg (heller Hintergrund) */
.site .ws-toolbar .bearbeiten-btn::before,
body.site.owner:has(#bearbeiten:checked) .bearbeiten-btn::before,
.site .aendern-link::before,
.site button.dogism-paw:not(.weg)::before,
.site .aendern .upload > button[type="submit"]::before,
.site .ws-style-save > button[type="submit"]::before,
.site .form.wide > button[name="tun"][value="speichern"]::before,
.site .upload > button[type="submit"]::before {
  opacity: 0.32;
  background-image: var(--edit-paw-light);
}


/* Trainingsbuch auf Halter-Startseite */
.site .tb-public {
  margin: 0 0 1.25rem;
}
.site .tb-public h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.site .tb-uebersicht {
  width: 100%;
  border-collapse: collapse;
}
.site .tb-uebersicht th,
.site .tb-uebersicht td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.site .tb-score {
  display: inline-block;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.site .tb-uebersicht .tb-score[data-score="10"],
.site .tb-uebersicht .tb-score[data-score="9"] {
  color: #2a7a4b;
}
.site .tb-uebersicht .tb-score[data-score="0"],
.site .tb-uebersicht .tb-score[data-score="1"],
.site .tb-uebersicht .tb-score[data-score="2"] {
  color: #a33b2c;
}