/* ============================================================
   03 · COMPONENTS — Header, Footer, Buttons, Cards, Hero, Formulare.
   EIN Button-System, EINE Card-Basis. Nur Tokens, keine harten Werte.
   ============================================================ */

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-m) var(--container-pad);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__brand { font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-snug); display: inline-flex; align-items: center; }
.site-header__brand b { color: var(--color-accent); }
.site-header__brand img { height: 48px; width: auto; display: block; }
.site-nav { display: flex; gap: var(--sp-l); align-items: center; }
.site-nav a { color: var(--color-text-muted); font-size: var(--text-base); transition: color var(--ease-fast); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); }
/* Akzent-Button im Menü: Text immer weiß (Spezifität über .site-nav a erzwingen) */
.site-nav a.site-nav__cta, .site-nav a.site-nav__cta:hover { color: var(--color-on-accent); }

/* Burger (nur mobil sichtbar) */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: var(--sp-xs); cursor: pointer;
}
.nav-toggle__bar { width: 26px; height: 2px; background: var(--color-text); border-radius: 2px; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--sp-3xl) 0 var(--sp-2xl);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}
.site-footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-xl);
}
.site-footer__brand {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-lg); color: var(--color-text); display: block; margin-bottom: var(--sp-s);
}
.site-footer__col a { color: var(--color-text-muted); }
.site-footer__col a:hover { color: var(--color-accent); }
.site-footer__links { display: flex; flex-direction: column; gap: var(--sp-xs); align-items: flex-start; }
.site-footer__copy { margin-top: var(--sp-xl); color: var(--color-text-subtle); font-size: var(--text-sm); }

/* ---- Buttons (EINE Basis + Varianten) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s);
  min-height: var(--btn-height); padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid currentColor; border-radius: var(--btn-radius);
  background: transparent; color: var(--color-text);
  font-family: var(--font-body); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
  line-height: 1; text-align: center; cursor: pointer;
  transition: background-color var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), opacity var(--ease-fast);
}
.btn--accent  { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn--accent:hover { opacity: .9; }
.btn--solid   { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn--solid:hover { opacity: .88; }
.btn--ghost   { color: var(--color-text-muted); }
.btn--ghost:hover { color: var(--color-text); border-color: var(--color-border-strong); }

/* ---- Cards (EINE Basis) ---- */
.card {
  background: var(--card-bg); border: var(--card-border);
  border-radius: var(--card-radius); padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: var(--sp-m);
}
.card h3 { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }
.card p  { color: var(--color-text-muted); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-l); }

/* ---- Kategorie-Chips / Badges (Küche · Bad · Sonstiges) ---- */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}
.tag--muted { background: var(--color-surface-muted); color: var(--color-text-muted); }

/* ---- Partner-/Marken-Logo-Leiste (Vertrauensbeweis) ---- */
.logo-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-xl); align-items: center;
}
.logo-strip img {
  max-height: 46px; width: auto; margin-inline: auto;
  filter: grayscale(1); opacity: .7;
  transition: filter var(--ease-base), opacity var(--ease-base);
}
.logo-strip img:hover { filter: grayscale(0); opacity: 1; }

/* ---- Projekt-Galerie (Referenzen) ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-l); }
.gallery__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--card-radius); border: var(--card-border);
  background: var(--color-surface-muted); aspect-ratio: 4 / 3;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-base); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__caption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-l) var(--sp-m) var(--sp-m);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 80%, transparent), transparent);
  color: var(--color-ink-text); font-weight: var(--weight-semibold);
}

/* ---- Split-Intro (Text neben Bild) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: center; }
.split__media { border-radius: var(--card-radius); overflow: hidden; border: var(--card-border); aspect-ratio: 4 / 3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--sp-xl); } }

/* ---- Dunkles Holz-Band (Akzent-Sektion / Footer-Nähe) ---- */
.ink { background: var(--color-ink); color: var(--color-ink-text); }
.ink h1, .ink h2, .ink h3 { color: var(--color-ink-text); }
.ink p, .ink .section-lead { color: var(--color-ink-muted); }
.ink .section-badge { color: var(--color-accent); }

/* ---- Media-Hero (Bild + Overlay) — optionale Hero-Variante ---- */
.hero--media {
  position: relative; color: var(--color-ink-text);
  border-radius: var(--radius-xl); overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) var(--container-pad);
}
.hero--media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 78%, transparent), color-mix(in srgb, var(--color-ink) 42%, transparent));
}
.hero--media .hero__title, .hero--media .hero__lead { color: inherit; }

/* ---- Hero (einheitlich auf allen Seiten via Tokens) ---- */
.hero {
  padding: var(--section-gap) 0 var(--sp-2xl);
  text-align: center;
}
.hero__title { font-size: var(--text-hero); margin-bottom: var(--sp-l); }
.hero__title b { color: var(--color-accent); }
.hero__lead { max-width: 60ch; margin: 0 auto var(--sp-xl); color: var(--color-text-muted); font-size: var(--text-md); }
.hero__actions { display: flex; gap: var(--sp-m); justify-content: center; flex-wrap: wrap; }

.section { padding: var(--section-gap) 0; }

/* ---- Formulare ---- */
.form { display: grid; gap: var(--sp-l); max-width: 560px; }
.field { display: grid; gap: var(--sp-xs); }
.field label { font-size: var(--text-sm); color: var(--color-text-muted); }
.input, .textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--color-surface-muted); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit;
}
.input:focus, .textarea:focus { outline: none; border-color: var(--color-accent); }
.textarea { min-height: 140px; resize: vertical; }
/* Honeypot — für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg { padding: var(--sp-m); border-radius: var(--radius-md); font-size: var(--text-base); }
.msg--error { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.msg--ok    { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }

/* ---- Durchgehender Full-Width-Seiten-Hero (Bild + Overlay + Text + CTAs) ---- */
.page-hero {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: min(66vh, 560px);
  padding: var(--section-gap) 0;
  color: var(--color-ink-text);
  background: var(--color-ink);            /* Fallback, falls kein Bild */
}
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 50%, transparent), color-mix(in srgb, var(--color-ink) 72%, transparent));
}
.page-hero__inner { position: relative; z-index: 2; max-width: 64ch; }
.page-hero .section-badge { color: color-mix(in srgb, var(--color-accent) 55%, white); }
.page-hero__title { font-size: var(--text-hero); color: var(--color-ink-text); margin-bottom: var(--sp-l); }
.page-hero__title b { color: var(--color-on-accent); }
.page-hero__lead { color: var(--color-ink-text); opacity: .92; font-size: var(--text-md); max-width: 58ch; margin: 0 auto var(--sp-xl); }
.page-hero__actions { display: flex; gap: var(--sp-m); justify-content: center; flex-wrap: wrap; }

/* ---- Weitere Button-Varianten ---- */
.btn--danger { background: var(--color-danger); color: var(--color-white); border-color: var(--color-danger); }
.btn--danger:hover { opacity: .9; }
.btn--on-ink { color: var(--color-ink-text); border-color: var(--color-ink-muted); }
.btn--on-ink:hover { color: var(--color-on-accent); border-color: var(--color-ink-text); }
.btn--icon { min-height: 2.4rem; padding: 0 var(--sp-s); min-width: 2.4rem; }

/* Button-Reihe: primär unten rechts (Design-System-Regel) */
.btn-row { display: flex; gap: var(--sp-m); flex-wrap: wrap; align-items: center; }
.form .btn-row { justify-content: flex-end; }

/* Beschreibender Textlink mit Pfeil (kein „hier klicken") */
.link-more { color: var(--color-accent); font-weight: var(--weight-semibold); }
.link-more::after { content: " →"; }
.link-more:hover { text-decoration: underline; }

/* Marken-Chip-Reihe */
.brand-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-s); }

/* Fertige Partner-Logo-Leiste (eine Grafik) */
.partner-strip img { max-width: 100%; width: min(920px, 100%); height: auto; }

/* Partner-Logos als Karten (Einzel-Logos) */
.logo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-m); }
.logo-card {
  display: grid; place-items: center; min-height: 100px; padding: var(--sp-l);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast);
}
.logo-card:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--card-shadow); }
.logo-card img { max-height: 54px; width: auto; }

/* Icon-Chip (bringt Leben in Leistungs-/Netzwerk-Karten) */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.icon-chip .icon { width: 26px; height: 26px; }

/* Weiches Pastellgrün-Band */
.bg-green { background: var(--color-accent-soft); }

/* Marken-Cards (Logo, falls vorhanden, sonst Markenname) — Desktop 6 pro Reihe */
.brand-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: var(--sp-m); }
.brand-card {
  display: grid; place-items: center; min-height: 118px; padding: var(--sp-l);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  text-align: center; transition: border-color var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast);
}
.brand-card:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--card-shadow); }
.brand-card img { max-height: 52px; width: auto; }
.brand-card--name { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-text); font-size: var(--text-base); }

/* Formular füllt seine Card voll aus */
.form--full { max-width: none; }

/* Kopfzeile mit Aktion rechts */
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-l); flex-wrap: wrap; }

/* Platzhalter-Fläche, solange keine Fotos vorliegen */
.split__media--placeholder {
  background:
    radial-gradient(circle at 30% 30%, var(--color-accent-soft), transparent 60%),
    var(--color-surface-muted);
  min-height: 260px;
}
.gallery__title { display: block; margin-top: var(--sp-xs); }
.empty-state { text-align: left; }
.contact-card { align-self: start; }

/* ---- Auswahl-Karten (Radio/Checkbox versteckt, eigenes Häkchen) ---- */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-m); }
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  display: flex; align-items: center; gap: var(--sp-s);
  padding: var(--sp-m); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); transition: border-color var(--ease-fast), background var(--ease-fast);
}
.choice__check {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  display: grid; place-items: center; transition: all var(--ease-fast);
}
.choice__check::after { content: "✓"; color: var(--color-white); font-size: 13px; opacity: 0; }
/* Aktiver Zustand durchgängig grün (Design-System) */
.choice input:checked + .choice__box { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface)); }
.choice input:checked + .choice__box .choice__check { background: var(--color-success); border-color: var(--color-success); }
.choice input:checked + .choice__box .choice__check::after { opacity: 1; }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.choice--wide .choice__box { align-items: flex-start; }
.choice--wide a { color: var(--color-accent); }
fieldset.field { border: 0; }
fieldset.field legend { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-xs); }
.form--wide { max-width: 760px; }

/* ---- Galerie-Filter (aktiv = Terracotta-Akzent) ---- */
.filter-bar { display: flex; gap: var(--sp-s); flex-wrap: wrap; }
.filter-btn {
  padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: all var(--ease-fast);
}
.filter-btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.filter-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* ---- Karten-Consent (Google Maps erst nach Klick) ---- */
.map-consent {
  border-radius: var(--card-radius); overflow: hidden; border: var(--card-border);
  background: var(--color-surface-muted); min-height: 320px; display: grid;
}
.map-consent__placeholder { place-self: center; text-align: center; padding: var(--sp-xl); display: grid; gap: var(--sp-m); }
.map-consent iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

.detail-cover { border-radius: var(--card-radius); overflow: hidden; border: var(--card-border); }
.detail-cover img { width: 100%; height: auto; }

/* ---- Lightbox (Projekt-Detail) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  place-items: center; padding: var(--sp-xl);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); }
.lightbox__close { position: absolute; top: var(--sp-l); right: var(--sp-l); }

/* ============================================================
   ADMIN — Statistik-Karten, fluchtendes Daten-Grid, Detail
   ============================================================ */
.inline-form { display: inline; margin: 0; }
.stat-card { text-decoration: none; }
.stat-card__num { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-accent); font-weight: var(--weight-bold); }

/* EIN fluchtendes Spalten-Grid für alle Zeilen (keine Mini-Tabelle je Zeile) */
.data-grid { display: grid; gap: var(--sp-xs); }
.data-row {
  display: grid; align-items: center; gap: var(--sp-m);
  padding: var(--sp-m) var(--sp-l);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text); transition: border-color var(--ease-fast);
}
a.data-row:hover { border-color: var(--color-accent); }
.data-row--head { background: transparent; border: 0; padding-block: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.data-grid--anfragen .data-row { grid-template-columns: 6rem 1.4fr 1fr .9fr 1.5rem; }
.data-grid--projekte .data-row { grid-template-columns: 5rem 1.6fr 1fr .8fr .8fr auto; }
.data-row__arrow { color: var(--color-text-muted); text-align: right; }
.data-row__actions { display: flex; gap: var(--sp-xs); justify-content: flex-end; }

.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: var(--sp-xs); background: var(--color-text-subtle); }
.status-dot--offen { background: var(--color-accent); }
.status-dot--erledigt { background: var(--color-success); }

.detail-head { display: flex; align-items: center; gap: var(--sp-m); flex-wrap: wrap; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-m); }
.detail-list dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.detail-list dd { margin-top: 2px; }
.detail-msg { margin-top: var(--sp-l); }

.thumb { border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--color-border); }
.thumb--sm { width: 72px; height: 54px; }
.thumb--empty { display: inline-block; width: 72px; height: 54px; background: var(--color-surface-muted); }
.thumb-grid { display: flex; flex-wrap: wrap; gap: var(--sp-m); }
.thumb-grid__item { position: relative; }
.thumb-grid__item .inline-form { position: absolute; top: 4px; right: 4px; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--sp-s);
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    padding: var(--sp-m) var(--container-pad); display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__cta { text-align: center; }
}
@media (max-width: 640px) {
  .data-row, .data-row--head { grid-template-columns: 1fr !important; gap: var(--sp-xs); }
  .data-row--head { display: none; }
  .data-row span[data-label]::before { content: attr(data-label) ": "; color: var(--color-text-muted); font-size: var(--text-sm); }
  .data-row__actions { justify-content: flex-start; }
}