/*
Theme Name: Contra Werkhof
Theme URI: https://contra-muell.de/
Author: Contra Müll Transport GmbH
Author URI: https://contra-muell.de/
Description: Block-Theme für contra-muell.de nach dem freigegebenen Entwurf „Richtung A Werkhof v2“: helles Sand, warmes Graphit, Orange für Aktionen. Selbst gehostete Schriften Barlow und Barlow Condensed (OFL), ein Pattern je Abschnitt, Formulare für das Anfrage-Plugin.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: contra-werkhof
Tags: block-patterns, full-site-editing, one-column, custom-colors, editor-style
*/

/* ==========================================================================
   Entwurf „Werkhof“ (Richtung A, v2 mit Rückmeldungen vom 27.10.2026)
   Die Custom Properties sind dieselben Werte wie in theme.json (Palette,
   Schriftgrößen, Abstände). Fonts kommen aus theme.json (fontFace, swap).
   ========================================================================== */

:root {
  /* Farben -> theme.json settings.color.palette */
  --c-graphite: #2b2724;        /* warmes Anthrazit: Kopf, Fuß, ein Band */
  --c-graphite-2: #353029;
  --c-graphite-card: #3d3731;
  --c-graphite-line: #514940;
  --c-sand: #f6f1e8;            /* Seitenhintergrund */
  --c-sand-2: #ece4d5;          /* Wechselabschnitte */
  --c-sand-3: #fffdf8;          /* Karten, Formulare */
  --c-sand-line: #d9cfbc;
  --c-text-dark: #1f1c19;
  --c-muted-dark: #5c554b;
  --c-text-light: #f6f1e8;
  --c-muted-light: #c9bfaf;
  --c-orange: #ff6600;          /* Marke: Flächen, Buttons mit dunkler Schrift, Text nur auf Graphit (5:1) */
  --c-orange-soft: #ffb380;     /* Links auf Graphit (10:1) */
  --c-orange-deep: #a64200;     /* Links und Akzenttext auf Sand (5,5:1) */
  --c-on-orange: #111111;
  --c-rust: #7b3b2e;

  /* Oberflächen-Variablen: Standard hell, .is-alt = dunkleres Sand, .is-dark = Graphit */
  --s-bg: var(--c-sand);
  --s-bg-2: var(--c-sand-2);
  --s-card: var(--c-sand-3);
  --s-text: var(--c-text-dark);
  --s-muted: var(--c-muted-dark);
  --s-line: var(--c-sand-line);
  --s-link: var(--c-orange-deep);
  --s-accent-text: var(--c-orange-deep);

  /* Skizzen (SVG), hell */
  --sk-ink: var(--c-text-dark);
  --sk-muted: var(--c-muted-dark);
  --sk-accent: var(--c-orange);
  --sk-body: #7b3b2e;
  --sk-body-2: #5b2a20;
  --sk-body-3: #33170f;
  --sk-paper: var(--c-sand-3);
  --sk-ground: #ece4d5;
  --sk-street: #d3c8b1;
  --sk-building: #c6b99f;
  --sk-green: #c9d2b4;
  --sk-font: var(--f-body);

  /* Schrift -> theme.json settings.typography */
  --f-head: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-xl: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-2xl: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  --fs-num: clamp(2.75rem, 2rem + 2vw, 3.5rem);

  /* Abstände -> theme.json settings.spacing.spacingSizes */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6rem;

  --wrap: 76rem;
  --gutter: 1rem;
  --radius: 2px;
  --btn-h: 3.25rem;
  --stripe: repeating-linear-gradient(135deg, var(--c-orange) 0 14px, var(--c-graphite) 14px 28px);
}

/* ---- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: var(--f-body);
  font-size: var(--fs-m);
  line-height: 1.55;
  padding-bottom: 4.75rem; /* Platz für die Anruf-Leiste */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--s-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0.5rem; padding: 0.75rem 1rem; background: var(--c-orange); color: var(--c-on-orange); font-weight: 700; z-index: 100; }
.skip:focus { left: 0.5rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sk { width: 100%; height: auto; display: block; }
.sk text { font-family: var(--f-body); }
@media (min-width: 48em) { :root { --gutter: 1.5rem; } }

/* Wechselabschnitte: dunkleres Sand */
.is-alt, .anfrage {
  --s-bg: var(--c-sand-2);
  --s-bg-2: #e3d9c6;
  --s-line: #cfc4ae;
  --sk-ground: #e3d9c6;
  --sk-street: #cbbfa6;
  --sk-building: #bfb197;
  background: var(--s-bg);
  color: var(--s-text);
}
/* Ein Band je Seite in Graphit */
.is-dark {
  --s-bg: var(--c-graphite);
  --s-bg-2: var(--c-graphite-2);
  --s-card: var(--c-graphite-card);
  --s-text: var(--c-text-light);
  --s-muted: var(--c-muted-light);
  --s-line: var(--c-graphite-line);
  --s-link: var(--c-orange-soft);
  --s-accent-text: var(--c-orange);
  --sk-ink: var(--c-text-light);
  --sk-muted: var(--c-muted-light);
  --sk-paper: var(--c-graphite);
  --sk-body: #8a4435;
  --sk-body-3: #26120e;
  --sk-ground: #3a342d;
  --sk-street: #4a433b;
  --sk-building: #5a5249;
  --sk-green: #4a5440;
  background: var(--s-bg);
  color: var(--s-text);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--btn-h); padding: 0 1.25rem;
  font: 600 1.0625rem/1.2 var(--f-body);
  text-decoration: none; text-align: center; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius);
  white-space: nowrap;
}
.btn--call, .btn--primary { background: var(--c-orange); color: var(--c-on-orange); border-color: var(--c-orange); }
.btn--call:hover, .btn--primary:hover { background: #ff7a1f; border-color: #ff7a1f; }
.btn--secondary { background: transparent; color: var(--s-text); border-color: currentColor; }
.btn--secondary:hover { background: rgba(127, 127, 127, 0.12); }
.btn--block { width: 100%; }
.btn--call:focus-visible, .btn--primary:focus-visible { outline-color: var(--s-text); }
.ico { flex: none; }

/* ---- Kopf ---------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--c-graphite); color: var(--c-text-light); }
/* Dunkle Flächen außerhalb von .is-dark (Kopf, Fuß, Anrufleiste): helle Schrift auch für Buttons wie „Angebot anfordern“ */
.site-head, .site-foot, .callbar { --s-text: var(--c-text-light); --s-muted: var(--c-muted-light); --s-line: var(--c-graphite-line); --s-link: var(--c-orange-soft); }
.site-head .btn--secondary { border-color: var(--c-text-light); }
.site-head .btn--secondary:hover { background: var(--c-text-light); color: var(--c-graphite); }
.site-head::before { content: ""; display: block; height: 6px; background: var(--stripe); }
.site-head__row { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; position: relative; }
.brand { display: inline-flex; flex: none; background: var(--c-sand); padding: 0.3rem 0.6rem; border-radius: var(--radius); }
.brand img { height: 2.1rem; width: auto; max-width: none; }
.nav { display: none; }
.site-head__actions { display: none; margin-left: auto; gap: 0.5rem; }
.btn--head { min-height: 2.75rem; padding: 0 1rem; font-size: 1rem; }

.menu { margin-left: auto; }
.menu__btn {
  list-style: none; display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--c-graphite-line); border-radius: var(--radius);
  font-weight: 600; cursor: pointer; user-select: none;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__bars { width: 1.2rem; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-graphite); border-top: 1px solid var(--c-graphite-line);
  padding: 0.5rem var(--gutter) 1.5rem; max-height: calc(100vh - 5rem); overflow: auto;
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; border-bottom: 1px solid var(--c-graphite-line); }
.menu__link { display: block; padding: 0.9rem 3rem 0.9rem 0; color: var(--c-text-light); text-decoration: none; font-size: 1.125rem; font-weight: 600; }
.menu__sub > summary {
  list-style: none; position: absolute; top: 0; right: 0; width: 3rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--c-orange); font-family: var(--f-head); font-size: 1.7rem; line-height: 1;
}
.menu__sub > summary::-webkit-details-marker { display: none; }
.menu__sub > summary::after { content: "+"; }
.menu__sub[open] > summary::after { content: "–"; }
.menu__sub ul { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; }
.menu__sub ul a { display: block; padding: 0.6rem 0; color: var(--c-muted-light); text-decoration: none; }
.menu__groups { padding-left: 0; }
.menu__group { list-style: none; }
.menu__group-title { margin: 0.6rem 0 0.1rem 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--c-orange); }
.menu__contact { margin-top: 1rem; color: var(--c-muted-light); }
.menu__contact a { color: var(--c-orange-soft); font-weight: 700; }

@media (min-width: 64em) {
  .brand img { height: 2.5rem; }
  .menu { display: none; }
  .nav { display: block; }
  .nav__list { display: flex; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
  .nav__item { display: flex; align-items: center; position: relative; }
  .nav__item > a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.7rem;
    color: var(--c-text-light); text-decoration: none; font-weight: 500; white-space: nowrap;
  }
  .nav__item.has-sub > a { padding-right: 0.3rem; }
  .nav__item > a:hover { color: var(--c-orange-soft); }
  .dd { position: static; }
  .dd > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 2.75rem; cursor: pointer; color: var(--c-orange); }
  .dd > summary::-webkit-details-marker { display: none; }
  .dd > summary::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
  .dd[open] > summary::after { transform: translateY(0.15em) rotate(-135deg); }
  .dd__panel { position: absolute; left: 0; top: 100%; min-width: 17rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--c-graphite-2); border: 1px solid var(--c-graphite-line); z-index: 60; }
  .dd__panel a { display: block; padding: 0.6rem 0.75rem; color: var(--c-text-light); text-decoration: none; white-space: nowrap; }
  .dd__panel a:hover { background: var(--c-graphite); color: var(--c-orange-soft); }
  .dd__panel--groups { display: grid; grid-template-columns: repeat(3, auto); gap: 0.25rem 1.25rem; padding: 0.9rem 1rem 1rem; }
  .dd__group { list-style: none; }
  .dd__group-title { margin: 0 0.75rem 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--c-orange); white-space: nowrap; }
  .dd__group ul { list-style: none; margin: 0; padding: 0; }
  .site-head__actions { display: flex; }
  .site-head__actions .btn--secondary { display: none; }
}
@media (min-width: 96em) { .site-head__actions .btn--secondary { display: inline-flex; } }
@media (min-width: 56.25em) and (max-width: 63.99em) { .site-head__actions { display: flex; margin-left: 0; } .btn--secondary.btn--head { display: none; } }

/* ---- Hero ---------------------------------------------------------------- */
/* Handy: Foto als Band, Text auf Sand. Desktop: Foto als Fläche mit leichter Abdunklung links. */
.hero--cover { position: relative; background: var(--c-sand-2); color: var(--c-text-dark); }
.hero__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__shade { display: none; }
.hero__grid { display: grid; gap: var(--sp-5); padding: var(--sp-5) 0 var(--sp-6); }
.hero__title { font-size: var(--fs-2xl); margin: 0.25em 0 0.4em; max-width: 15ch; }
.hero--sub .hero__title { font-size: var(--fs-xl); max-width: none; }
.hero__lead { font-size: var(--fs-l); line-height: 1.4; max-width: 36rem; color: var(--c-muted-dark); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__hours { color: var(--c-muted-dark); margin-top: 1rem; font-size: var(--fs-s); }
/* Zweiter Hero-Button: gefüllt in Sand mit dunkler Schrift, damit er auf Foto und Sand sichtbar bleibt (16:1) */
.hero .btn--secondary { background: var(--c-sand-3); color: var(--c-text-dark); border-color: var(--c-text-dark); }
.hero .btn--secondary:hover { background: #ffffff; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 0.5rem; }
.hero__facts li { border: 1px solid rgba(31, 28, 25, 0.35); padding: 0.35rem 0.65rem; font-size: 0.95rem; }
.eyebrow { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--s-accent-text); margin: 0 0 0.6rem; }
.hero .eyebrow { color: var(--c-orange-deep); }
.crumbs { font-size: 0.9rem; color: var(--c-muted-dark); margin-bottom: 0.75rem; }
.crumbs a { color: inherit; }
@media (min-width: 64em) {
  .hero--cover { min-height: 42rem; display: flex; align-items: center; background: var(--c-graphite); color: var(--c-text-light); }
  .hero--sub { min-height: 36rem; }
  .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero__shade { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 39, 36, 0.9) 0%, rgba(43, 39, 36, 0.82) 44%, rgba(43, 39, 36, 0.38) 68%, rgba(43, 39, 36, 0.1) 100%); }
  .hero__grid { position: relative; width: min(100% - 2 * var(--gutter), var(--wrap)); grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: center; gap: var(--sp-7); padding: var(--sp-7) 0; }
  .hero__lead { color: #efe6d6; }
  .hero--cover .btn--secondary { border-color: var(--c-sand-3); }
  .hero--cover .btn--secondary:hover { background: #ffffff; border-color: #ffffff; }
  .hero__hours, .crumbs { color: var(--c-muted-light); }
  .hero__facts li { border-color: rgba(246, 241, 232, 0.45); }
  .hero .eyebrow { color: var(--c-orange); }
}

/* ---- Formular ------------------------------------------------------------ */
.form { background: var(--c-sand-3); color: var(--c-text-dark); padding: 1.5rem; border: 1px solid var(--c-sand-line); border-top: 6px solid var(--c-orange); border-radius: var(--radius); --s-link: var(--c-orange-deep); }
.form__title { font-size: 1.9rem; margin: 0 0 0.2rem; }
.form__lead { margin: 0 0 1rem; color: var(--c-muted-dark); }
.form__grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; font-size: 0.95rem; font-weight: 600; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font: 400 1rem/1.3 var(--f-body); color: var(--c-text-dark); background: #fff;
  width: 100%; min-height: 3rem; padding: 0.65rem 0.75rem;
  border: 1px solid #8f8470; border-radius: var(--radius);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 1px; }
.req { color: var(--c-orange-deep); }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.9rem; line-height: 1.4; }
.check input { width: 1.3rem; height: 1.3rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--c-orange); }
.form .btn--block { margin-top: 1rem; }
.form__hint { font-size: 0.875rem; color: var(--c-muted-dark); margin: 0.75rem 0 0; }
@media (min-width: 40em) { .form__grid { grid-template-columns: 1fr 1fr; } }

/* ---- Vertrauensleiste ---------------------------------------------------- */
/* Orange läuft von Rand zu Rand (Rückmeldung Patrick), die Einträge bleiben in der Inhaltsbreite */
.trust { background: var(--c-orange); color: var(--c-on-orange); }
.trust__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: rgba(0, 0, 0, 0.3); }
.trust__list li { background: var(--c-orange); color: var(--c-on-orange); padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; }
.trust__list strong { font-family: var(--f-head); font-size: 1.45rem; text-transform: uppercase; line-height: 1; }
.trust__list span { font-size: 0.9rem; line-height: 1.3; }
@media (min-width: 30em) { .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48em) { .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trust__list strong { font-size: 1.6rem; } .trust__list li:first-child { padding-left: 0; } .trust__list li:last-child { padding-right: 0; } }

/* ---- Abschnitte ---------------------------------------------------------- */
.section { padding: var(--sp-7) 0; }
.section__head { max-width: 48rem; margin-bottom: var(--sp-5); }
.section__title { font-size: var(--fs-xl); margin: 0 0 0.4rem; }
.section__lead { font-size: var(--fs-m); color: var(--s-muted); margin: 0; }
.sub-title { font-size: 1.9rem; margin: var(--sp-6) 0 1rem; }
@media (max-width: 47.99em) { .section { padding: 3.25rem 0; } .section__head { margin-bottom: 1.5rem; } .cta-row { margin-top: 2rem; } }
@media (min-width: 64em) { .section { padding: var(--sp-8) 0; } }

.cta-row { margin-top: var(--sp-6); padding: 1.5rem; border: 1px solid var(--s-line); background: var(--s-card); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cta-row__lead { margin: 0; font-family: var(--f-head); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; max-width: 34rem; }
.cta-row__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-row__btns { flex: 1 1 auto; justify-content: flex-end; }
@media (max-width: 40em) { .cta-row__btns, .cta-row__btns .btn { width: 100%; } }

/* Größen */
.sizes__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.size-card { background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--radius); display: flex; flex-direction: column; }
.size-card__photo { margin: 0; border-bottom: 1px solid var(--s-line); }
.size-card__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.size-card__photo figcaption { font-size: 0.8rem; color: var(--s-muted); padding: 0.4rem 0.75rem; }
.size-card__fig { background: var(--s-bg-2); border-bottom: 1px solid var(--s-line); padding: 0.5rem; }
.size-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.size-card__vol { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-num); line-height: 1; margin: 0; }
.size-card__vol .num { color: var(--s-accent-text); }
.size-card__type { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; color: var(--s-muted); margin: 0; }
.size-card__dims { font-weight: 600; margin: 0.35rem 0 0; font-variant-numeric: tabular-nums; }
.size-card__variants { color: var(--s-muted); font-size: 0.95rem; margin: 0; }
.size-card__note { font-size: 0.95rem; margin: 0.25rem 0 0; }
.size-card__link { margin-top: auto; padding-top: 0.75rem; font-weight: 600; }
@media (min-width: 24em) { .sizes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99em) { .size-card .sk text { display: none; } .size-card__body { padding: 0.75rem 0.85rem 1rem; } .size-card__vol { font-size: 2.1rem; } .size-card__photo figcaption { display: none; } }
@media (min-width: 64em) { .sizes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Ablauf */
.steps-section__grid { display: grid; gap: 2rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.step { border-top: 3px solid var(--c-orange); padding-top: 1rem; }
.step__num { display: block; font-family: var(--f-head); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--s-accent-text); }
.step__title { font-size: 1.5rem; margin: 0.3rem 0 0.4rem; }
.step p { margin: 0; }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.photo figcaption { font-size: 0.875rem; color: var(--s-muted); margin-top: 0.5rem; }
@media (min-width: 64em) { .steps-section__grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* Abfallarten */
.waste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.waste__tile { display: flex; flex-direction: column; gap: 0.15rem; height: 100%; min-height: 4.5rem; padding: 0.9rem 1rem; background: var(--s-card); border: 1px solid var(--s-line); border-left: 3px solid var(--c-orange); color: var(--s-text); text-decoration: none; }
a.waste__tile:hover { background: var(--s-bg-2); border-color: var(--c-orange); }
.waste__name { font-weight: 600; }
.waste__note { font-size: 0.85rem; color: var(--s-muted); }
@media (min-width: 48em) { .waste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .waste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Betrieb */
.betrieb__grid { display: grid; gap: 2rem; }
.betrieb__photos { display: grid; gap: 1rem; }
.facts { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid var(--s-line); }
.facts li { padding: 0.6rem 0; border-bottom: 1px solid var(--s-line); font-size: 0.95rem; }
.textlink { font-weight: 600; }
@media (min-width: 24em) { .betrieb__photos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .betrieb__grid { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Liefergebiet */
.area__grid { display: grid; gap: 2rem; }
.area__map { background: var(--s-bg-2); border: 1px solid var(--s-line); padding: 1rem; }
.area__subtitle { font-size: 1.5rem; }
.area__places { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.area__places li { padding: 0.35rem 0; border-bottom: 1px solid var(--s-line); break-inside: avoid; font-size: 0.95rem; }
.area__more { margin: 1rem 0 0; font-weight: 600; }
@media (min-width: 64em) { .area__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Bewertungen (Platzhalter) */
/* Bewertungen (Startseite): Auszüge aus dem Google-Profil, Sterne als Maske in Markenfarbe */
.stars { display: inline-block; flex: none; width: 6.5rem; height: 1.15rem; vertical-align: -0.2em; background: var(--c-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 26 24'%3E%3Cpath d='M12 .5l2.7 7.78 8.24.17-6.57 4.97 2.39 7.88L12 16.6l-6.76 4.7 2.39-7.88-6.57-4.97 8.24-.17z'/%3E%3C/svg%3E") left center / 1.3rem 1.15rem repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 26 24'%3E%3Cpath d='M12 .5l2.7 7.78 8.24.17-6.57 4.97 2.39 7.88L12 16.6l-6.76 4.7 2.39-7.88-6.57-4.97 8.24-.17z'/%3E%3C/svg%3E") left center / 1.3rem 1.15rem repeat-x; }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.review { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.25rem 1.25rem 1.1rem; background: var(--s-card); border: 1px solid var(--s-line); border-top: 3px solid var(--c-orange); border-radius: var(--radius); }
.review__text { margin: 0; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.5; }
.review__text p { margin: 0; }
.review__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.9rem; color: var(--s-muted); }
.review__name { font-weight: 600; color: var(--s-text); }
.reviews__foot { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.reviews__note { margin: 0; flex: 1 1 24rem; max-width: 48rem; font-size: 0.85rem; color: var(--s-muted); }
@media (max-width: 39.99em) { .reviews__list > li:nth-child(n+4) { display: none; } }
@media (min-width: 40em) { .reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero__rating { margin: 1rem 0 0; font-size: var(--fs-s); }
.hero__rating a { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; }
.hero__rating a:hover span:last-child { text-decoration: underline; }

/* FAQ */
.faq-section__grid { display: grid; gap: 2rem; }
.faq { border-top: 1px solid var(--s-line); }
.faq__item { border-bottom: 1px solid var(--s-line); }
.faq__item summary { cursor: pointer; padding: 1rem 2.75rem 1rem 0; font-weight: 600; font-size: 1.125rem; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--f-head); font-size: 1.9rem; line-height: 1; color: var(--s-accent-text); }
.faq__item[open] summary::after { content: "–"; }
.faq__a { padding: 0 0 1.25rem; max-width: 46rem; }
@media (min-width: 64em) { .faq-section__grid { grid-template-columns: 1fr 1.6fr; align-items: start; } }

/* Anfrage-Band */
.anfrage__grid { display: grid; gap: 2rem; }
.contact-box { background: var(--c-sand-3); color: var(--c-text-dark); padding: 1.5rem; border: 1px solid var(--c-sand-line); border-left: 6px solid var(--c-orange); border-radius: var(--radius); }
.contact-box__kicker { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--c-orange-deep); margin: 0; }
.contact-box__tel { display: block; font-family: var(--f-head); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; color: var(--c-text-dark); text-decoration: none; margin: 0.35rem 0 1rem; }
.contact-box__tel:hover { color: var(--c-orange-deep); }
.contact-box a { color: var(--c-orange-deep); }
.contact-box__note { color: var(--c-muted-dark); font-size: 0.95rem; }
@media (min-width: 64em) { .anfrage__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }

/* Tabelle, Varianten, Vergleich, Stellplatz, Produktbilder */
.table-wrap { overflow-x: auto; border: 1px solid var(--s-line); background: var(--s-card); }
.table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.table th, .table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--s-line); vertical-align: top; }
.table th { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; background: var(--s-bg-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.variants { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.variants li { border-top: 3px solid var(--c-orange); padding-top: 0.5rem; display: flex; flex-direction: column; }
.variants strong { font-family: var(--f-head); text-transform: uppercase; font-size: 1.3rem; }
.variants span { font-size: 0.95rem; color: var(--s-muted); }
.figure-scroll { overflow-x: auto; background: var(--s-card); border: 1px solid var(--s-line); padding: 1rem; }
.figure-scroll .sk { min-width: 62rem; }
.figure-hint { font-size: 0.875rem; color: var(--s-muted); margin: 0.5rem 0 0; }
.place__grid { display: grid; gap: 1.5rem; }
.place__fig { margin: 0; background: var(--s-card); border: 1px solid var(--s-line); }
.place__fig figcaption { padding: 0.75rem 1rem 1rem; font-size: 0.95rem; }
.place__note { margin-top: 1.5rem; max-width: 48rem; }
.renders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.renders__note { color: var(--s-muted); font-size: 0.95rem; margin: -0.5rem 0 1rem; }
.render { margin: 0; background: #000; border: 1px solid var(--s-line); }
.render img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.render figcaption { padding: 0.5rem 0.75rem; font-size: 0.9rem; color: var(--c-text-light); background: #000; }
.photo-row { display: grid; gap: 1rem; margin-top: var(--sp-5); }
@media (min-width: 48em) { .place__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .renders { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-row { grid-template-columns: 1fr 1fr 2fr; } }
@media (min-width: 64em) { .figure-scroll .sk { min-width: 0; } .figure-hint { display: none; } }

/* ---- Fuß ----------------------------------------------------------------- */
.site-foot { background: var(--c-graphite); color: var(--c-text-light); padding: 0 0 var(--sp-5); }
.site-foot::before { content: ""; display: block; height: 6px; background: var(--stripe); margin-bottom: var(--sp-7); }
.foot__grid { display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; }
.brand--foot { margin-bottom: 1rem; }
.foot__address { font-style: normal; line-height: 1.6; margin-bottom: 1rem; }
.foot__address a, .foot__group a, .foot__bottom a { color: var(--c-text-light); text-decoration: none; }
.foot__address a:hover, .foot__group a:hover, .foot__bottom a:hover { color: var(--c-orange-soft); text-decoration: underline; }
.foot__hours { line-height: 1.6; }
.foot__cert { line-height: 1.6; }
.foot__cert a { color: var(--c-orange-soft); font-weight: 600; text-decoration: none; }
.foot__cert .foot__pdf { color: var(--c-text-light); font-weight: 400; text-decoration: underline; }
.foot__cert a:hover { text-decoration: underline; }
.foot__title { font-size: 1.3rem; margin: 0 0 0.75rem; color: var(--c-orange); }
.foot__group ul { list-style: none; margin: 0; padding: 0; }
.foot__group li { padding: 0.28rem 0; font-size: 0.95rem; }
.foot__bottom { margin-top: var(--sp-6); padding-top: 1rem; border-top: 1px solid var(--c-graphite-line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.875rem; color: var(--c-muted-light); }
.foot__legal { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
@media (min-width: 64em) { .foot__grid { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2rem; } .foot__brand { grid-column: auto; grid-row: span 2; } }

/* ---- Anruf-Leiste (nur Handy / Tablet) ---------------------------------- */
.callbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom)); background: var(--c-graphite); border-top: 2px solid var(--c-orange); }
.callbar .btn { min-height: 3rem; padding: 0 0.4rem; font-size: 0.95rem; }
.callbar .btn--secondary { color: var(--c-text-light); }
@media (min-width: 56.25em) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ==========================================================================
   WordPress-Anpassungen (Block-Theme)
   Alles oberhalb ist 1:1 der Entwurf (design/richtung-a/style.css). Hier
   folgen nur die Regeln für Kern-Blöcke, Template-Teile und Plugin-Ausgaben.
   ========================================================================== */

/* Sprungmarken nicht unter dem klebenden Kopf; Kopf unter der Admin-Leiste */
html { scroll-padding-top: 5rem; }
.admin-bar .site-head { top: var(--wp-admin--admin-bar--height, 32px); }
.site-head.wp-block-template-part, .site-foot.wp-block-template-part { display: block; }
h4 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 0.4em; }

/* Brotkrumen (Rank Math, Shortcode in page.html). Ohne Plugin wird die Leiste ausgeblendet. */
.crumbs-bar { background: var(--c-sand-2); color: var(--c-muted-dark); font-size: 0.9rem; }
.crumbs-bar .wrap { padding: 0.6rem 0; }
.crumbs-bar:not(:has(.rank-math-breadcrumb)) { display: none; }
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: inherit; text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--c-orange-deep); text-decoration: underline; }
.rank-math-breadcrumb .separator { margin: 0 0.4rem; }
.rank-math-breadcrumb .last { font-weight: 600; color: var(--c-text-dark); }

/* Listen-Blöcke mit Theme-Klassen: ohne Einzug und Aufzählungszeichen */
.wp-block-list.facts, .wp-block-list.area__places, .wp-block-list.hero__facts { padding-left: 0; list-style: none; }

/* FAQ mit Details-Blöcken: die Antwort sind die inneren Blöcke, ohne Wrapper */
.faq__item.wp-block-details { box-sizing: border-box; margin: 0; }
.faq__item > :not(summary) { max-width: 46rem; margin: 0 0 1rem; }
.faq__item > :not(summary):last-child { margin-bottom: 1.25rem; }
.faq__item > ul, .faq__item > ol { padding-left: 1.25rem; }

/* Tabellen-Block: Haarlinien, Kopfzeile in Barlow Condensed, auf dem Handy seitlich scrollbar */
.wp-block-table { margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--s-line); background: var(--s-card); }
.wp-block-table table { width: 100%; border-collapse: collapse; border: 0; }
.wp-block-table th, .wp-block-table td { text-align: left; padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--s-line); vertical-align: top; }
.wp-block-table thead, .wp-block-table tfoot { border: 0; }
.wp-block-table th { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; font-weight: 700; background: var(--s-bg-2); }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table figcaption { font-size: 0.875rem; color: var(--s-muted); padding: 0.5rem 1rem; margin: 0; text-align: left; }
.masse .wp-block-table table { min-width: 42rem; }
.masse .wp-block-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Zitat-Block: Standard als Zitat, Block-Stil „Hinweis“ als Hinweisbox */
.wp-block-quote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--c-orange); font-style: normal; }
.wp-block-quote.is-style-hinweis { background: var(--s-card); border: 1px solid var(--s-line); border-left: 6px solid var(--c-orange); padding: 1rem 1.25rem; border-radius: var(--radius); }
.wp-block-quote p { margin: 0 0 0.5em; }
.wp-block-quote p:last-child { margin-bottom: 0; }
.wp-block-quote cite { display: block; font-size: 0.9rem; color: var(--s-muted); font-style: normal; margin-top: 0.5rem; }

/* Textabschnitt (Pattern content-section): normaler Seiteninhalt aus Kern-Blöcken */
.prose { max-width: 50rem; }
.prose > * { margin-top: 0; margin-bottom: 1em; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--fs-xl); margin: 0 0 0.5rem; }
.prose > * + h2 { margin-top: 2.5rem; }
.prose h3 { font-size: 1.6rem; margin: 0 0 0.4rem; }
.prose > * + h3 { margin-top: 2rem; }
.prose h4 { font-size: 1.25rem; margin: 0 0 0.3rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: 0.3em 0; }
.prose li::marker { color: var(--c-orange-deep); font-weight: 600; }
.prose .wp-block-details { border: 1px solid var(--s-line); background: var(--s-card); padding: 0 1rem; }
.prose .wp-block-details summary { cursor: pointer; padding: 0.9rem 2.5rem 0.9rem 0; font-weight: 600; list-style: none; position: relative; }
.prose .wp-block-details summary::-webkit-details-marker { display: none; }
.prose .wp-block-details summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--f-head); font-size: 1.8rem; line-height: 1; color: var(--s-accent-text); }
.prose .wp-block-details[open] summary::after { content: "–"; }
.prose .wp-block-details > :not(summary) { margin: 0 0 1rem; }
.prose .wp-block-image { margin: 1.5rem 0; }
.prose .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius); }
.prose .wp-block-image figcaption { font-size: 0.875rem; color: var(--s-muted); margin: 0.5rem 0 0; text-align: left; }
.prose hr, .prose .wp-block-separator { border: 0; border-top: 1px solid var(--s-line); margin: 2rem 0; width: 100%; }
.prose .wp-block-table { margin: 1.5rem 0; }

/* Verwandte Seiten (Pattern related-links) */
/* nur die Kartenliste ist ein Raster, nicht der Abschnitt drumherum (der heißt related-section) */
ul.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.related__card { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1rem 1.1rem 1.1rem; background: var(--s-card); border: 1px solid var(--s-line); border-left: 3px solid var(--c-orange); color: var(--s-text); text-decoration: none; }
.related__card:hover { background: var(--s-bg-2); border-color: var(--c-orange); }
.related__title { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; }
.related__text { font-size: 0.95rem; color: var(--s-muted); }
@media (min-width: 30em) { ul.related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { ul.related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Handlungsaufruf als eigener Abschnitt (Pattern cta-band) */
.section--cta { padding: var(--sp-6) 0; }
.section--cta .cta-row { margin-top: 0; }

/* Formular: Honeypot unsichtbar; Rückmeldungen nach dem Absenden (assets/js/contra.js, ?anfrage=danke|fehler|zuviele) */
.form__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form__notice { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--c-sand-line); border-left: 6px solid var(--c-orange); background: var(--c-sand); color: var(--c-text-dark); line-height: 1.4; }
.form__notice--fehler { border-left-color: var(--c-orange-deep); }
.form__notice a { color: var(--c-orange-deep); font-weight: 700; white-space: nowrap; }
.form__notice:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border: 2px solid var(--c-orange-deep); }
.check.is-invalid { outline: 2px solid var(--c-orange-deep); outline-offset: 4px; }
.check.is-invalid input { accent-color: var(--c-orange-deep); }
.form--done { display: flex; flex-direction: column; align-items: flex-start; }
.form--done:focus-visible { outline-offset: 0; }
.form__done-kicker { font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--c-orange-deep); margin: 0 0 0.6rem; }
.form--done .form__title { margin: 0 0 0.5rem; }
.form__done-text { margin: 0 0 1.25rem; font-size: var(--fs-l); line-height: 1.4; }
.form__done-call { font-weight: 600; margin: 0 0 0.6rem; }

/* Fehlerseite */
.error404 .section { min-height: 50vh; }

/* Unterseiten aus dem Inhaltsgenerator: Größenabschnitt mit Text und Karten, Bilder und Kartenraster im Fließtext */
.content-section > .wrap + .wrap { margin-top: var(--sp-5); }
.sizes__note { margin: 1rem 0 0; max-width: 50rem; color: var(--s-muted); }
.photo--render { margin: 1.5rem 0; }
.photo--render img { aspect-ratio: auto; object-fit: contain; border-radius: 0; }

/* Fotos im Text: Querformat in voller Breite, Hochformat schmal und ab Tablet rechts neben dem Text */
.prose > .photo { margin: 1.5rem 0; }
.photo--hoch { max-width: 24rem; }
.photo--hoch img { aspect-ratio: 4 / 5; }
@media (min-width: 48em) {
  .prose { display: flow-root; }
  .prose > .photo--hoch { float: right; width: 42%; max-width: 21rem; margin: 0.35rem 0 2rem 2rem; }
  .prose > h2, .prose > .tabelle, .prose > .photo:not(.photo--hoch), .prose > .cta-row { clear: both; }
  .prose > .wp-block-quote, .prose > .wp-block-details { display: flow-root; }
}
.photo--sketch { margin: 1.5rem 0; padding: 1rem; background: var(--s-card); border: 1px solid var(--s-line); }
.photo--sketch figcaption { margin-top: 0.75rem; }
.prose > .related { padding-left: 0; margin: 1rem 0 1.5rem; }
.prose .related li { margin: 0; }

/* Häkchen-Listen „darf rein“ und „darf nicht rein“ (Inhaltsgenerator: - [x] / - [ ]) */
.prose ul.checkliste, .prose ul.kreuzliste { list-style: none; padding-left: 0; }
.checkliste li, .kreuzliste li { position: relative; padding-left: 2rem; margin: 0.45em 0; }
.checkliste li::before, .kreuzliste li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 0.85rem; }
.checkliste li::before { background-color: var(--c-orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231b1917' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.kreuzliste li::before { background-color: var(--s-bg-2); border: 1px solid var(--s-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%235a5249' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Hero ohne Formular (Über uns, Ratgeber): Text in Lesebreite */
@media (min-width: 64em) { .hero--ohneform .hero__grid { grid-template-columns: minmax(0, 52rem); } }

/* Passende Seiten: so viele Spalten wie Karten (höchstens 4), damit keine Karte allein in der Zeile steht */
@media (min-width: 48em) {
  ul.related--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul.related--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  ul.related--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Kartenraster im Fließtext (Übersichtsseiten): 2 Spalten, eine übrige letzte Karte über die volle Breite */
@media (min-width: 30em) {
  .prose > .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose > .related > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Fotos im Anfrageformular */
.field input[type="file"] { padding: 0.55rem; background: #fff; font-size: 0.95rem; }
.field__hint { display: block; font-size: 0.85rem; color: var(--c-muted-dark); margin-top: 0.3rem; font-weight: 400; }

/* Tabellen auf dem Handy ohne seitliches Scrollen: jede Zeile als Karte, die Spaltenüberschrift steht über
   dem Wert (data-label aus dem Inhaltsgenerator). Die erste Spalte ist der Kartentitel. */
@media (max-width: 39.99em) {
  .tabelle { overflow: visible; border: 0; background: none; }
  .tabelle table, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabelle tr { margin: 0 0 0.75rem; background: var(--s-card); border: 1px solid var(--s-line); border-left: 3px solid var(--c-orange); }
  .tabelle td { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.5rem 0.9rem; border: 0; border-bottom: 1px solid var(--s-line); }
  .tabelle tr td:last-child { border-bottom: 0; }
  .tabelle td::before { content: attr(data-label); font-size: 0.82rem; font-weight: 600; color: var(--s-muted); line-height: 1.3; }
  .tabelle td[data-label=""] { display: block; }
  .tabelle td[data-label=""]::before { display: none; }
  .tabelle td:first-child { display: block; font-weight: 700; background: var(--s-bg-2); }
  .tabelle td:first-child::before { display: none; }
}