/* HK Landschaftspflege — Design-System (docs/Design.md, Variante A „Alpin-sachlich“)
   Mobile-first, Schriften selbst gehostet, keine externen Requests.
   Farben nur als Tokens in :root; Komponenten verwenden ausschließlich Tokens. */

/* ---------- Schriften (SIL OFL, Lizenzen in /assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Farben laut docs/Design.md */
  --color-bg: #F4F1EA;
  --color-surface: #FFFFFF;
  --color-text: #1B211D;
  --color-text-muted: #4A524C;
  --color-primary: #1F3D2B;
  --color-primary-dark: #152B1E;          /* nur Hover von Links/kleinen Elementen, nie Flächen */
  --color-accent: #A9531A;
  --color-on-accent: #FFFFFF;
  --color-border: rgba(27, 33, 29, .12);
  --color-panel: #1F3D2B;                 /* große dunkle Flächen: Referenzen, Saisonleiste */
  --color-on-panel: #FFFFFF;
  --color-on-panel-muted: #D8E0DA;
  --color-placeholder: #C9CFC4;
  --radius: 4px;

  /* Abgeleitet (nicht in der Tabelle, für Flächen mit primary, Panel-Linien, Platzhalter, Schatten) */
  --color-on-primary: #FFFFFF;
  --color-panel-border: rgba(255, 255, 255, .2);
  --color-placeholder-label: rgba(255, 255, 255, .75);
  --color-focus: var(--color-accent);
  --color-danger: #B3261E;                /* Löschen; 6,5:1 auf Weiß */
  --color-on-danger: #FFFFFF;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-tile: 0 12px 32px rgba(0, 0, 0, .14);

  /* Schrift. Größen fließend zwischen 390 px (mobil) und 1440 px (Desktop) laut docs/Design.md */
  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --fs-h1: clamp(2.375rem, 1.679rem + 2.857vw, 4.25rem);      /* 38 → 68 */
  --fs-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);       /* 30 → 44 */
  --fs-h3: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);         /* 20 → 24 */
  --fs-lead: clamp(1.0625rem, .993rem + .286vw, 1.25rem);     /* 17 → 20 */
  --fs-text: clamp(1rem, .977rem + .095vw, 1.0625rem);        /* 16 → 17 */
  --fs-small: clamp(.875rem, .852rem + .095vw, .9375rem);     /* 14 → 15 */
  --fs-eyebrow: clamp(.8125rem, .79rem + .095vw, .875rem);    /* 13 → 14 */
  --fs-card: clamp(.9375rem, .914rem + .095vw, 1rem);         /* 15 → 16, Karten-Text laut Mockup */

  /* Layout: Inhalt max. 1280 px, Seitenrand 28 / 40 / 80 px */
  --content-max: 1280px;
  --gutter: 1.75rem;
  --space-section: clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem); /* 36 → 72 */
  --gap-card: 24px;
}
@media (min-width: 640px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 80px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-danger: #FF8F86;              /* 7:1 auf dunkler Fläche */
    --color-on-danger: #2B0704;
    --color-bg: #121714;
    --color-surface: #1A211C;
    --color-text: #E8ECE7;
    --color-text-muted: #A9B3AB;
    --color-primary: #8CC7A1;
    --color-primary-dark: #B5DCC2;
    --color-accent: #E8894A;
    --color-on-accent: #121714;
    --color-border: rgba(232, 236, 231, .14);
    --color-panel: #183024;
    --color-on-panel: #E8ECE7;
    --color-on-panel-muted: #B9C4BC;
    --color-placeholder: #2A332D;

    --color-on-primary: #121714;
    --color-panel-border: rgba(232, 236, 231, .16);
    --color-placeholder-label: rgba(18, 23, 20, .7);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-tile: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
/* Befund aus 014: Klassen wie .btn setzen display (z. B. inline-flex) mit
   gleicher Spezifität wie die Browser-Standardregel für [hidden] und stehen
   später in der Kaskade – das Attribut wurde dadurch wirkungslos. !important
   stellt sicher, dass [hidden] immer gewinnt, unabhängig von der Klasse. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--color-text);
  margin: 0 0 .5em;
}
h1, h2 { text-transform: uppercase; letter-spacing: .02em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); color: var(--color-primary); }
p { margin: 0 0 1em; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 560px; }
.eyebrow {
  display: block; margin: 0;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: .75em 1.2em; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Layout-Container */
.wrap {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Auflage aus Abnahme 008a: Der Container selbst bleibt so breit wie ein
   normales .wrap (gleiche linke Kante wie nachfolgende volle Abschnitte),
   nur die Kinder (Absätze, Listen, Überschriften …) werden auf Lesebreite
   begrenzt und bleiben dadurch linksbündig statt separat zentriert. */
.prose { padding-top: 2rem; padding-bottom: 1rem; }
.prose > * { max-width: 760px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

/* Platzhalterseite (Phase 0) */
.placeholder { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text)); color: var(--color-on-accent); }
.btn-secondary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn-call {
  background: var(--color-primary); color: var(--color-on-primary);
  min-height: 52px; padding: 0 24px; gap: 10px; font-weight: 700;
}
.btn-call:hover { background: color-mix(in srgb, var(--color-primary) 85%, var(--color-bg)); color: var(--color-on-primary); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- 1. Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  column-gap: 1rem; padding-top: 14px; padding-bottom: 14px;
}
.brand {
  display: flex; flex-direction: column; line-height: 1;
  text-decoration: none; color: var(--color-primary); white-space: nowrap;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3125rem, 1.196rem + .476vw, 1.625rem); }
.brand-sub { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; }
.brand:hover { color: var(--color-primary); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; border-radius: var(--radius);
  background: var(--color-primary); color: var(--color-on-primary);
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
}
.header-phone:hover { color: var(--color-on-primary); }
.header-phone-number {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.nav-toggle {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer; color: var(--color-text);
}
.hamburger, .hamburger::before, .hamburger::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative; border-radius: 1px;
}
.hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; }
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Navigation mobil: aufklappbare Liste unter dem Header, Untermenü als eingerückte Liste */
.primary-nav { display: none; order: 3; width: 100%; }
.primary-nav.open { display: block; }
.nav-list, .submenu { list-style: none; margin: 0; padding: 0; }
.nav-list { margin-top: 12px; border-top: 1px solid var(--color-border); }
.nav-list > li { border-bottom: 1px solid var(--color-border); }
.nav-list a, .sub-toggle {
  display: flex; align-items: center; min-height: 44px; padding: .5rem 0;
  color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 1rem; white-space: nowrap;
}
.nav-list a:hover, .sub-toggle:hover { color: var(--color-primary); }
.nav-list a[aria-current="page"] { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-accent); }
.sub-toggle {
  width: 100%; gap: 8px; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.sub-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.submenu { display: none; padding: 0 0 .5rem 1rem; }
.sub-toggle[aria-expanded="true"] + .submenu { display: block; }
.submenu a { font-weight: 400; min-height: 40px; }

@media (max-width: 1023.98px) {
  .brand-sub { display: none; }
  .header-actions { order: 2; }
  .header-phone svg { width: 20px; height: 20px; }
}

/* Navigation ab 1024 px: einzeilig, Untermenü als Dropdown */
@media (min-width: 1024px) {
  .header-inner { flex-wrap: nowrap; column-gap: 24px; padding-top: 20px; padding-bottom: 20px; }
  .nav-toggle { display: none; }
  .primary-nav { display: block; order: 0; width: auto; }
  .nav-list { display: flex; align-items: center; gap: 16px; margin: 0; border: 0; }
  .nav-list > li { border: 0; position: relative; }
  .nav-list a, .sub-toggle { min-height: 0; padding: .35rem 0; font-size: .875rem; }
  .sub-toggle { width: auto; }
  .submenu {
    position: absolute; top: calc(100% + 10px); left: -1rem; z-index: 60;
    min-width: 16rem; padding: .5rem 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-tile);
  }
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px; }
  .submenu a { padding: .55rem 1rem; font-size: var(--fs-small); }
  .submenu a:hover { background: var(--color-bg); }
  .header-phone { background: transparent; color: var(--color-primary); }
  .header-phone:hover { color: var(--color-primary-dark); }
}
@media (min-width: 1024px) and (hover: hover) {
  .has-sub:hover > .submenu { display: block; }
}
@media (min-width: 1280px) {
  .header-inner { column-gap: 32px; }
  .nav-list { gap: clamp(18px, calc(18px + (100vw - 1280px) * .05), 26px); }
  .nav-list a, .sub-toggle { font-size: .9375rem; }
  .header-phone { padding: 0 4px; }
  .header-phone-number { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* ---------- 2. Saisonleiste ---------- */
.season-bar { background: var(--color-panel); color: var(--color-on-panel); font-size: var(--fs-small); --color-focus: var(--color-on-panel); }
.season-bar[hidden] { display: none; }
.season-bar-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; row-gap: .25rem;
  padding-top: 10px; padding-bottom: 10px;
}
.season-bar a { color: var(--color-on-panel); font-weight: 600; }
.season-bar a:hover { color: var(--color-on-panel-muted); }

/* ---------- 10. Foto-Platzhalter ---------- */
/* Muster für echte Fotos (016), sobald .photo-placeholder ersetzt wird:
 *
 *   <img src="/assets/images/<name>-960.webp"
 *        srcset="/assets/images/<name>-480.webp 480w,
 *                /assets/images/<name>-960.webp 960w,
 *                /assets/images/<name>-1600.webp 1600w"
 *        sizes="(min-width: 1200px) 960px, 100vw"
 *        width="960" height="540" alt="…"
 *        decoding="async" loading="lazy">
 *
 * - width/height (oder aspect-ratio in CSS) IMMER angeben, gegen Layout-Sprünge (CLS).
 * - loading="lazy" außerhalb des ersten Bildschirms (alles außer dem Hero-Bild
 *   auf der Startseite). Beim Hero-Bild stattdessen fetchpriority="high" und
 *   <link rel="preload" as="image" imagesrcset="…" imagesizes="…"> im <head>.
 * - decoding="async" immer, auch beim Hero-Bild.
 * - Die drei Breiten (480/960/1600) und WebP (optional zusätzlich AVIF)
 *   erzeugt tools/bilder.mjs aus material/ nach website/assets/images/.
 * - Bildernachweis in der Datenschutzerklärung/im Impressum ergänzen, sobald
 *   echte Fotos eingebaut werden (bisher Platzhalter dort, siehe Auftrag 010).
 */
.photo-placeholder {
  display: flex; align-items: flex-end; padding: 16px;
  width: 100%; min-height: 180px;
  background: var(--color-placeholder); border-radius: var(--radius);
}
.photo-placeholder span {
  font-size: .8125rem; color: var(--color-text); line-height: 1.3;
  background: var(--color-placeholder-label); padding: 4px 8px; border-radius: 2px;
}
/* 017: Übergangsfassung ohne Platzhalter – Foto-Platzhalter auf den
   Inhaltsseiten per hidden-Attribut ausgeblendet statt gelöscht, damit sie
   sich einfach wieder einschalten lassen, sobald echte Fotos da sind. */
.photo-placeholder[hidden] { display: none; }
/* Die schwebende Kachel im Hero ist normalerweise relativ zum Foto
   positioniert (siehe Abschnitt 3). Ohne Foto hätte .hero-media keine eigene
   Höhe mehr und die Kachel würde frei hängen – deshalb fließt sie hier ganz
   normal mit. Modifier-Klasse einfach wieder entfernen, sobald das Hero-Foto
   zurückkommt. */
.hero-media--ohne-foto .hero-tile { position: static; margin: 16px 0 0; }

/* ---------- 3. Hero mit schwebender Kachel ---------- */
.hero-inner {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: clamp(2rem, 1.071rem + 3.81vw, 4.5rem);
  padding-bottom: clamp(2rem, 1.071rem + 3.81vw, 4.5rem);
}
.hero-text { display: flex; flex-direction: column; gap: 18px; }
.hero-text h1, .hero-text .lead { margin: 0; }
.hero-media { position: relative; }
.hero-media .photo-placeholder { height: 220px; justify-content: flex-end; } /* Beschriftung rechts, links liegt die Kachel */
.hero-tile {
  position: static; margin: 16px 0 0; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-tile);
}
.hero-tile-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.361rem + .571vw, 1.875rem); line-height: 1.1; color: var(--color-primary); }
.hero-tile-text { font-size: var(--fs-small); color: var(--color-text-muted); }
.hero .btn-row { flex-direction: column; gap: 10px; }

/* Unter 768 px (Auflage Abnahme 003): Text und Buttons vor dem Foto, damit H1
   und Primär-Button bei 390 × 844 ohne Scrollen sichtbar sind. Kachel liegt
   dafür unter dem Foto statt darüber. */
@media (min-width: 640px) {
  .hero-media .photo-placeholder { height: 360px; }
  .hero .btn-row { flex-direction: row; gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-media { order: -1; }
  .hero-tile { position: relative; margin: -28px 16px 0; }
}
@media (min-width: 1024px) {
  .hero-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
  .hero-text { gap: 24px; }
  .hero-media { order: 0; }
  .hero-media .photo-placeholder { height: 500px; }
  .hero-tile { position: absolute; left: -32px; bottom: -32px; margin: 0; padding: 22px 26px; }
}

/* ---------- 4. Value-Row ---------- */
.value-row { padding-top: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem); }
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-card); grid-template-columns: 1fr; }
.value-card {
  display: flex; flex-direction: column; gap: 8px; padding: 28px;
  background: var(--color-surface); border-radius: var(--radius);
}
.value-title { margin: 0; font-size: clamp(1.25rem, 1.204rem + .19vw, 1.375rem); color: var(--color-primary); text-transform: none; letter-spacing: 0; }
.value-card p { margin: 0; font-size: var(--fs-card); line-height: 1.5; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 5. Services-Grid / Service-Card ---------- */
.services { padding-top: clamp(2.25rem, 1.229rem + 4.19vw, 5rem); }
.services h2 { margin-bottom: 8px; }
.services-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.service-card {
  display: block; height: 100%; padding: 18px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none;
}
.service-card-media { display: none; }
.service-card-body { display: flex; flex-direction: column; gap: 4px; }
.service-card-title { margin: 0; font-size: var(--fs-h3); }
.service-card-body p { margin: 0; font-size: var(--fs-card); line-height: 1.45; color: var(--color-text-muted); }
.service-card-more { display: none; font-size: var(--fs-small); font-weight: 600; color: var(--color-accent); }
.service-card:hover { color: var(--color-text); }
.service-card:hover .service-card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

@media (min-width: 640px) {
  .services h2 { margin-bottom: 32px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card); }
  .service-card {
    display: flex; flex-direction: column; gap: 14px; padding: 0; overflow: hidden;
    border: 0; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  }
  .service-card-media { display: flex; height: 180px; min-height: 0; }
  .service-card-body { gap: 8px; padding: 0 24px 24px; }
  .service-card-body p { line-height: 1.5; }
  .service-card-more { display: block; margin-top: auto; }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 6. Referenz-Panel ---------- */
.panel { background: var(--color-panel); color: var(--color-on-panel); --color-focus: var(--color-on-panel); }
.panel h2, .panel h3 { color: var(--color-on-panel); }
.panel a { color: var(--color-on-panel); font-weight: 600; }
.panel a:hover { color: var(--color-on-panel-muted); }
.ref-panel { margin-top: clamp(1.75rem, .357rem + 5.714vw, 5.5rem); }
.ref-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px 40px;
  padding-top: var(--space-section); padding-bottom: var(--space-section);
}
.ref-intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ref-intro h2 { margin: 0; font-size: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem); }
.ref-intro p { margin: 0; color: var(--color-on-panel-muted); }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list li { padding: 14px 0; border-top: 1px solid var(--color-panel-border); }
.ref-name { display: block; font-weight: 700; font-size: clamp(1rem, .93rem + .286vw, 1.1875rem); }
.ref-detail { font-size: clamp(.9375rem, .891rem + .19vw, 1.0625rem); color: var(--color-on-panel-muted); }
.ref-detail + .ref-detail::before { content: " · "; }
@media (min-width: 640px) {
  .ref-list li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 20px 0; }
  .ref-detail + .ref-detail::before { content: none; }
}
@media (min-width: 1024px) {
  .ref-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ref-intro { grid-column: span 4; }
  .ref-list { grid-column: span 8; }
}

/* ---------- 7. CTA-Band ---------- */
.cta-inner {
  display: flex; flex-direction: column; gap: 24px;
  padding-top: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
}
.cta-text { display: flex; flex-direction: column; gap: 10px; }
.cta-text h2 { margin: 0; font-size: clamp(1.75rem, 1.518rem + .952vw, 2.375rem); }
.cta-text p { margin: 0; font-size: clamp(1rem, .954rem + .19vw, 1.125rem); color: var(--color-text-muted); }
.cta-band .btn-row { flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .cta-band .btn-row { flex-direction: row; gap: 16px; }
}
@media (min-width: 1024px) {
  .cta-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; }
  .cta-band .btn-row { flex-wrap: nowrap; flex-shrink: 0; }
}

/* ---------- 8. Footer ---------- */
.site-footer { font-size: var(--fs-small); color: var(--color-text-muted); }
.footer-inner {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: clamp(1.75rem, 1.564rem + .762vw, 2.25rem);
  padding-bottom: clamp(1.75rem, 1.564rem + .762vw, 2.25rem);
}
.footer-inner p { margin: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--color-primary); }
@media (min-width: 640px) {
  .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }
}
@media (min-width: 1024px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
  .footer-links { gap: 24px; }
}

/* ---------- 9. Page-Hero (Unterseiten) ---------- */
.page-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.page-hero-inner {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: var(--space-section); padding-bottom: var(--space-section);
}
.page-hero-title { margin: 0; font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: .02em; }
.page-hero .lead { margin: 0; max-width: 720px; }

/* Ergänzt in 004 (in Design.md nicht vorgesehen): Abstand für Abschnitte mit
   allgemeinem Inhalt zwischen Page-Hero und CTA-Band, hier für den Hinweis
   "Inhalt in Vorbereitung." auf den noch leeren Seiten. */
.page-content { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.page-content h2 { margin-top: 1.6em; }
.page-content h2:first-child { margin-top: 0; }

/* Ergänzt in 007: Platzhalter aus den Texten bleiben sichtbar und auffällig,
   bis Hansjörg die fehlenden Angaben liefert. Bewusst fest gelb/dunkel statt
   über Tokens, unabhängig von Hell/Dunkel-Modus – wie das Standard-<mark>
   des Browsers, und wie dieses kein Teil des Marken-Farbschemas: Der Marker
   verschwindet vor dem Launch wieder (siehe Platzhalter-Prüfung in tools/). */
mark.platzhalter {
  background: #fbbf24;
  color: #1b1203;
  padding: .05em .3em;
  border-radius: 2px;
  font-weight: 600;
  font-style: normal;
}

/* FAQ mit details */
.faq { max-width: 860px; }
.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); margin: 0 0 12px;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; padding: 16px 20px; min-height: 44px;
  list-style-position: inside;
}
.faq-item summary:hover { color: var(--color-primary); }
.faq-item > :not(summary) { margin: 0; padding: 0 20px 16px; color: var(--color-text-muted); }

/* Scrollbare Tabelle (mobil), z. B. Eignungstabelle für öffentliche Auftraggeber */
.table-scroll { overflow-x: auto; margin: 1.5em 0; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 480px; }
.table-scroll td { padding: .65em .9em; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.table-scroll tr:first-child td { border-top: 1px solid var(--color-border); }
.table-scroll td:first-child { font-weight: 600; white-space: nowrap; }

/* Foto-Galerie (z. B. Referenzen-Seite, bis echte Fotos da sind) */
.photo-gallery { display: grid; gap: var(--gap-card); grid-template-columns: 1fr; margin: 1.5em 0; }
.photo-gallery .photo-placeholder { min-height: 220px; }
@media (min-width: 768px) {
  .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Textlinks unter einem Absatz (z. B. "→ Grünflächenpflege · Winterdienst") */
.block-links { margin: -0.6em 0 1.6em; font-size: var(--fs-small); }

/* Callout */
.callout {
  max-width: 860px; margin: 0 0 1em; padding: 16px 20px;
  background: var(--color-surface); border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout > :last-child { margin-bottom: 0; }

/* ---------- Backoffice (intern, 008b) ---------- */
.bo-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.bo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 1rem; }
.bo-toolbar h1, .bo-toolbar h2 { margin: 0; font-size: var(--fs-h3); }
.bo-filter {
  display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 1.2rem;
  padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.bo-filter .form-row { margin-bottom: 0; }
@media (min-width: 640px) { .bo-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bo-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px 6px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.bo-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; flex: 1 1 220px; min-width: 0; min-height: 44px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.bo-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
/* Löschen (019b): als gefährliche Aktion abgesetzt, nicht wie ein vierter Status */
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.btn-danger:hover, .btn-danger:focus-visible { background: var(--color-danger); color: var(--color-on-danger); border-color: var(--color-danger); }
.bo-status-switch-klein { gap: 6px; }
.bo-status-switch-klein .btn, .bo-row-actions .bo-row-loeschen { min-height: 44px; padding: 0 12px; font-size: var(--fs-small); }
.bo-item-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: var(--color-placeholder); }
.bo-item-body { flex: 1; min-width: 0; }
.bo-item-title { font-weight: 600; margin: 0; }
.bo-item-meta { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }

.bo-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; margin: 0 0 1.1em; }
.bo-fieldset legend { font-weight: 600; padding: 0 6px; }
.bo-fieldset[hidden] { display: none; }

.bo-status-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.bo-status-switch button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* Link-Vorschau (014): Karte mit Bild/Titel/Portal der externen Anzeige */
.bo-link-vorschau:empty { display: none; }
.bo-link-vorschau { margin-top: 10px; }
.bo-link-vorschau-hinweis { font-size: var(--fs-small); color: var(--color-text-muted); }
.bo-link-vorschau-karte { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.bo-link-vorschau-karte img { width: 120px; max-width: 120px; height: auto; border-radius: 4px; flex-shrink: 0; object-fit: cover; }
.bo-link-vorschau-text { min-width: 0; }
.bo-link-vorschau-titel { font-weight: 600; margin: 0 0 2px; }
.bo-link-vorschau-portal { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0 0 4px; }
.bo-link-vorschau-datum { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }
.bo-link-vorschau-aktualisieren { margin-top: 8px; min-height: 36px; padding: 0 14px; font-size: var(--fs-small); }

.bo-photos { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bo-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; }
.bo-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.bo-photo-actions { display: flex; gap: 4px; }
.bo-photo-actions button { min-width: 28px; min-height: 28px; padding: 0; font-size: .875rem; }

/* ---------- Bestandslisten (Brennholz, Maschinen – serverseitig gerendert, 008a) ---------- */
.artikel-group + .artikel-group { margin-top: var(--space-section); }
.artikel-group h2 { margin-bottom: 20px; }
.artikel-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-card); grid-template-columns: 1fr; }
.artikel-card {
  display: flex; flex-direction: column; position: relative;
  background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.artikel-card-media img, .artikel-card-media .photo-placeholder { height: 180px; margin: 0; border-radius: 0; }
.artikel-card-media img { width: 100%; object-fit: cover; display: block; }
.artikel-gallery { display: flex; gap: 6px; padding: 6px; overflow-x: auto; }
.artikel-gallery img { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: 4px; }
.artikel-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: .3em .75em; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; color: var(--color-on-primary);
}
.artikel-badge-reserviert { background: var(--color-accent); color: var(--color-on-accent); }
.artikel-badge-verkauft { background: var(--color-text-muted); }
.artikel-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.artikel-card-body h3 { margin: 0; font-size: var(--fs-h3); }
.artikel-kerndaten { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--color-text-muted); display: flex; flex-direction: column; gap: 2px; }
.artikel-preis { font-weight: 700; color: var(--color-primary); }
/* Fuß der Karte (014/014c): Button-Zeile und/oder Link-Karte, immer unten. */
.artikel-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* Externe Link-Karte (014c): kompakte Vorschau statt des einfachen Buttons,
   sobald eine gespeicherte Vorschau vorliegt. */
.artikel-link-karte {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.artikel-link-karte:hover { border-color: var(--color-primary); }
.artikel-link-karte img { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 4px; }
.artikel-link-karte-text { min-width: 0; flex: 1; }
.artikel-link-karte-titel {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; font-size: var(--fs-small);
}
.artikel-link-karte-portal { display: block; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: 2px; }
.artikel-link-karte > .artikel-link-oeffnen-symbol { flex-shrink: 0; color: var(--color-text-muted); }
@media (min-width: 640px) {
  .artikel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .artikel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Formulare ---------- */
.contact-form {
  max-width: 640px; margin: 0; padding: 1.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.contact-form h2 { margin-top: 0; }
.form-row { margin-bottom: 1.1em; display: flex; flex-direction: column; gap: .35em; }
.form-row-check { flex-direction: row; align-items: flex-start; gap: .6em; }
.form-row-check input { margin-top: .3em; }
label { font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  padding: .65em .8em; border: 1px solid var(--color-border); border-radius: var(--radius);
  font: inherit; background: var(--color-bg); color: var(--color-text);
}
textarea { resize: vertical; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-hint { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.field-error { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--color-accent); }
[aria-invalid="true"] { border-color: var(--color-accent); }
.form-status { margin-top: 1em; font-weight: 600; }

/* ---------- Kontaktseite (zweispaltig ab 1024 px, mobil Kontaktdaten zuerst) ---------- */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.contact-info h2 { margin-top: 0; }
.contact-details { margin: 1.2em 0 0; }
.contact-details > div { padding: .9em 0; border-top: 1px solid var(--color-border); }
.contact-details > div:first-child { border-top: 0; }
.contact-details dt { font-weight: 600; margin: 0 0 .2em; }
.contact-details dd { margin: 0; color: var(--color-text-muted); }
.contact-details a { color: var(--color-primary); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
  .contact-form-col { order: 1; }
  .contact-info { order: 2; }
  .contact-form { max-width: none; }
}

/* ---------- Musterseite (nur /styleguide/) ---------- */
.sg-section { padding-top: var(--space-section); padding-bottom: var(--space-section); border-top: 1px solid var(--color-border); }
.sg-section > .wrap > * + .sg-label { margin-top: 48px; }
.sg-label {
  margin: 0 0 16px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.sg-photo { max-width: 480px; height: 240px; }