/* Nur Prototyp: Leiste oben, Stilbuch, Bausteine, Logo-Seite.
   Die Leiste folgt dem Theme absichtlich nicht, damit niemand sie für Design hält.
   Beim WordPress-Umzug ersatzlos entfernen. */

:root {
  --proto-h: 2.75rem;
}

.proto-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--proto-h);
  overflow-x: auto;
  overflow-y: hidden;
  background: #26292b;
  color: #e9ecee;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  scrollbar-width: thin;
  color-scheme: dark;
}

.proto-bar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding: 0 0.75rem;
}

.proto-bar__label {
  flex: none;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  background: #f2d046;
  color: #1d1d1d;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.proto-bar__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
}

.proto-bar__title {
  margin-right: 0.25rem;
  color: #a9b0b5;
}

.proto-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.45rem;
  border-radius: 3px;
  color: #e9ecee;
  text-decoration: none;
}

.proto-bar a:hover {
  background: #3a3e41;
  color: #fff;
}

.proto-bar a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 #f2d046;
  color: #fff;
}

.proto-bar__sep {
  flex: none;
  width: 1px;
  height: 1.4rem;
  background: #4a4f53;
}

.proto-bar :focus-visible {
  outline: 2px solid #f2d046;
  outline-offset: 2px;
}

.proto-swatch {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

/* Farbe kommt aus den Paletten-Tokens des jeweiligen Themes, nicht aus Hex-Werten hier.
   Zeigt das Theme, wie es aussieht: oben links die Scheiben, unten rechts das getönte Glas (Abschlussbox, Footer), Ecke Akzent. */
.proto-swatch span {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 3px;
  background: linear-gradient(135deg, rgb(var(--palette-glass)) 0 50%, rgb(var(--palette-glass-strong)) 50% 78%, var(--palette-accent-500) 78% 100%);
  background-origin: border-box;
}

.proto-swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #f2d046;
}

.proto-scene {
  min-height: 2.25rem;
  margin: 0;
  padding: 0 0.6rem;
  border: 1px solid #4a4f53;
  border-radius: 3px;
  background: transparent;
  color: #e9ecee;
  font: inherit;
  cursor: pointer;
}

.proto-scene:hover {
  background: #3a3e41;
}

.proto-scene[aria-pressed="true"] {
  border-color: #f2d046;
  background: #f2d046;
  color: #1d1d1d;
}

/* ------------------------------------------------------------------
   Stilbuch, Bausteine, Logo: Doku-Elemente
   ------------------------------------------------------------------ */

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.doc-nav li {
  margin: 0;
}

.doc-section {
  margin-top: var(--gutter);
}

.doc-section > .glass > h2,
.doc-section > h2 {
  margin-bottom: var(--space-2);
}

.doc-intro {
  max-width: 48rem;
  margin-bottom: var(--space-5);
}

.doc-meta {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
  font-size: var(--fs-sm);
}

.doc-meta h3,
.doc-meta h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.doc-meta p,
.doc-meta ul {
  margin: 0;
}

.doc-meta ul {
  padding-left: 1.1rem;
}

@media (min-width: 900px) {
  .doc-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.doc-demo {
  padding: var(--space-5);
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-m);
}

.doc-demo + .doc-demo {
  margin-top: var(--space-4);
}

.doc-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .doc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .doc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Farbmuster */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.swatches li {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.swatch__chip {
  height: 3.25rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-s);
}

.swatch__name {
  display: block;
  font-weight: 600;
}

.swatch__value {
  display: block;
  color: var(--color-text-muted);
  font-family: ui-monospace, monospace;
}

.theme-panel {
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--scene-sky), var(--scene-hill-2));
}

.theme-panel__inner {
  padding: var(--space-5);
}

.theme-panel h3 {
  margin-bottom: var(--space-1);
}

.contrast {
  margin-top: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-m);
}

.contrast summary {
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
}

.contrast .table-scroll {
  padding: 0 var(--space-4) var(--space-4);
}

.contrast__table {
  min-width: 40rem;
  font-size: var(--fs-sm);
}

.contrast__table th,
.contrast__table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}

.contrast__table tbody th {
  font-weight: 400;
}

.contrast__swatch {
  display: inline-block;
  min-width: 3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}

.contrast__meta {
  font-size: var(--fs-sm);
}

.type-scale {
  margin: 0;
  padding: 0;
  list-style: none;
}

.type-scale li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  margin: 0;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}

.type-scale__meta {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-family: ui-monospace, monospace;
}

.type-sample {
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
}

.type-sample h3 {
  margin: 0 0 var(--space-2);
}

.type-sample__name {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spacing-scale {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.spacing-scale li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  font-size: var(--fs-xs);
  font-family: ui-monospace, monospace;
}

.spacing-scale span:last-child {
  height: 0.75rem;
  border-radius: 2px;
  background: var(--color-primary);
}

.radius-demo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--color-primary-soft);
  font-size: var(--fs-xs);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-grid li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
  color: var(--color-heading);
  font-size: var(--fs-xs);
}

.icon-grid .icon {
  width: 2rem;
  height: 2rem;
}

.do-dont {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .do-dont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.do-dont > div {
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
}

.do-dont h3,
.do-dont h4 {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.do-dont .do :is(h3, h4) { color: var(--color-success); }
.do-dont .dont :is(h3, h4) { color: var(--color-danger); }

.do-dont ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Logo-Seite */
.logo-concepts {
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 1024px) {
  .logo-concepts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.logo-stage {
  display: grid;
  place-items: center;
  min-height: 11rem;
  padding: var(--space-5);
  border-radius: var(--radius-m);
  background: var(--surface-inset);
  color: var(--logo-color);
}

.logo-stage svg {
  width: 100%;
  max-width: 16rem;
  height: auto;
  max-height: 9rem;
}

.logo-stage--dark {
  background: var(--surface-glass-strong-solid);
  color: var(--on-strong-text);
  --logo-gold: var(--palette-accent-300);
}

.logo-stage--mono {
  color: var(--color-text);
  --logo-gold: currentColor;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
}

.favicon-test {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: end;
}

.favicon-test figure {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
}

.favicon-test img {
  margin-inline: auto;
  image-rendering: auto;
}

.favicon-test .is-pixel img {
  image-rendering: pixelated;
}

.browser-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.9rem;
  border-radius: 8px 8px 0 0;
  background: #dfe3e6;
  color: #26292b;
  font: 13px system-ui, sans-serif;
}

.browser-tab img {
  width: 16px;
  height: 16px;
}

.logo-concepts .do-dont {
  grid-template-columns: minmax(0, 1fr);
}

.logo-concepts .doc-grid--2 .logo-stage {
  padding: var(--space-3);
}

.logo-concepts .doc-grid--2 .logo-stage svg {
  max-height: 10rem;
}

.theme-block + .theme-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.theme-block .swatches {
  margin-top: var(--space-4);
}

.glass-strip {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .glass-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.glass-strip__bg {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-l);
}

.glass-strip__bg--light {
  background: linear-gradient(135deg, var(--scene-sky), var(--scene-light), var(--scene-hill-1));
}

/* Dunkelste Stelle des Blätterfotos, damit man sieht, warum das Glas dort dichter ist */
.glass-strip__bg--dark {
  --surface-glass: rgb(var(--palette-glass) / var(--glass-alpha-photo));
  background: url("../img/scene/blaetter.jpg") 18% 85% / 260% auto;
}

.doc-class {
  margin-left: var(--space-2);
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: middle;
}

.doc-demo--bare {
  padding: var(--space-4);
}

.doc-demo .offer {
  box-shadow: none;
}

/* Die Demo zeigt beide Varianten in einer Reihe, ohne Höhenangleichung. */
.doc-demo .offer-cards {
  align-items: start;
}

.doc-states h3 {
  font-size: var(--fs-lg);
  margin: var(--space-5) 0 var(--space-3);
}

.doc-states h3:first-child {
  margin-top: 0;
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-4);
}

.logo-stage .logo-png {
  width: 100%;
  height: auto;
}




/* Prototyp: Hundekopf je Theme eingefärbt (scripts/logo/build-kopf.py). Im WordPress-Theme ein Site-Logo. */
[data-theme="vereinsblau"] .logo-kopf { content: url("../img/logo/png/kopf-vereinsblau.png"); }
[data-theme="wappenrot"] .logo-kopf { content: url("../img/logo/png/kopf-wappenrot.png"); }
[data-theme="erde"] .logo-kopf { content: url("../img/logo/png/kopf-erde.png"); }
[data-theme="daemmerung"] .logo-kopf { content: url("../img/logo/png/kopf-daemmerung.png"); }
[data-theme="flutlicht"] .logo-kopf { content: url("../img/logo/png/kopf-flutlicht.png"); }

.logo-stage .logo-lockup { --h: 2.5rem; }

/* Auf dunklem Grund: Kopf auf einer hellen runden Plakette, sonst geht die dunkle Kontur unter.
   Dunkel sind Header und Footer der dunklen Themes, der getönte Footer der hellen Themes (Flutlicht hat
   einen hellen Footer) und auf der Logo-Seite die Bühnen mit dunklem Theme. Bühnen mit eigenem Theme
   entscheiden selbst, darum gelten die Seitenregeln nur für Bühnen ohne eigenes Theme.
   Die Scheibe ist größer, der Kopf darin bleibt gleich groß. */
:is([data-theme="daemmerung"], [data-theme="flutlicht"]) :is(.site-header, .logo-stage:not([data-theme])) .logo-lockup > img,
html:not([data-theme="flutlicht"]) .site-footer .logo-lockup > img,
.logo-stage:is([data-theme="daemmerung"], [data-theme="flutlicht"]) .logo-lockup > img {
  box-sizing: border-box;
  aspect-ratio: 1;
  height: calc(var(--h) * 1.6);
  margin-block: calc(var(--h) * -0.3);
  padding: calc(var(--h) * 0.16);
  border-radius: 50%;
  background: var(--palette-primary-100);
  object-fit: contain;
}

/* Bühnen mit eigenem Theme tragen dessen deckenden Grund, sonst steht ein helles Theme auf dunkler Seite */
.logo-stage[data-theme] { background: var(--surface-glass-solid); }

.logo-concepts .logo-stage .logo-lockup { --h: 2.25rem; }