/* =============================================================
   Inverta — schema-driven section variables

   Every custom property here is written by Inverta_CSS from a
   field declared in inc/customizer/schema/. Defaults keep each
   section presentable before any option is touched.
   ============================================================= */

/* -------------------------------------------------------------
   CTA

   The section owns itself in sections/cta.css now — five layouts, its own
   token block, its own type scale. What used to live here was a flat
   centred panel with .vf-cta-inner and a single .vf-cta-btn, neither of
   which the renderer emits any more; and its hardcoded #24a9b3 accent
   sat in front of the site's own accent colour.
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Shared section scaffolding
   Every schema-driven section gets padding, colour and width from
   the custom properties Inverta_CSS writes.
   ------------------------------------------------------------- */
.vf-section-counter,
.vf-section-testimonials,
.vf-section-team,
.vf-section-news,
.vf-section-location,
.vf-section-contact,
.vf-section-explainer,
.vf-section-faq,
.vf-section-map {
  position: relative; }

:where(.vf-section-counter)      { --vf-counter-cols: 4;   --vf-counter-num-size: 44px; --vf-counter-label-size: 14px; }

:where(.vf-section-testimonials) { --vf-testi-cols: 3;     --vf-testi-radius: 16px; --vf-testi-card-bg: #fff; --vf-testi-star: #f59e0b; }

:where(.vf-section-team)         { --vf-team-cols: 4;      --vf-team-radius: 16px; --vf-team-photo-ratio: 1 / 1; }

:where(.vf-section-news)         { --vf-news-cols: 3;      --vf-news-radius: 16px; }

:where(.vf-section-explainer)    { --vf-explainer-cols: 3; --vf-explainer-radius: 16px; --vf-explainer-num: #24a9b3; }

/* --vf-faq-radius and --vf-faq-q-size are set by sections/faq.css, which reads
   the global rounding. A second, different number here silently won or lost
   depending on import order. */
:where(.vf-section-location)     { --vf-location-radius: 16px; --vf-location-map-h: 420px; }

:where(.vf-section-contact)      { --vf-contact-radius: 16px; --vf-contact-form-bg: #fff; }

:where(.vf-section-map)          { --vf-map-h: 520px; --vf-map-h-m: 380px; }

/*
 * Padding + colour, driven by the shared spacing/colour field sets.
 *
 * Diese Regeln sind fuer jede Sektion die einzige Stelle, die padding-block und
 * background setzt. Vorher gab es zwei weitere, und beide waren ohne Wirkung —
 * jede auf ihre Art:
 *
 * 1. .vf-section-padding stand auf dreizehn Sektionswurzeln und setzte
 *    padding-block aus --inv-section-py. Gleiches Gewicht wie die Regeln hier,
 *    aber main.bundle.css laedt vor dieser Datei, also gewann immer diese —
 *    die Klasse auf der Sektion tat nichts. Sie steht jetzt nur noch auf
 *    Seiten, Archiven und Vorlagen, wo es kein Sektionsfeld gibt.
 *
 * 2. Die Stylesheets unter sections/ adressierten ihre Sektion ueber
 *    #vf-team, #vf-so-gehts, #vf-counter, #vf-standort und so weiter und
 *    schrieben dort padding-block, background und border-block fest hinein.
 *    Gedruckt wird aber id="team", id="ablauf", id="standort" — ohne
 *    vf-Praefix, seit die Anker umbenannt wurden. Keine dieser etwa zwanzig
 *    Regeln hat je gegriffen; sie lagen in jedem Bundle und beschrieben ein
 *    Aussehen, das niemand gesehen hat. Dass ein ID-Selektor die Felder
 *    "Abstand oben/unten" und "Hintergrundfarbe" ausgehebelt haette, waere der
 *    naechste Schaden gewesen, sobald jemand einen Anker auf den alten Namen
 *    setzt.
 *
 * Darum gilt hier: kein Stil haengt an einem Anker. Der Anker ist ein
 * Eingabefeld, kein Baustein des Designs. Test: tools/tests/anchor_styles.php.
 *
 * transparent als Rueckfall ist Absicht: ein leeres Farbfeld schreibt keine
 * Variable, und ein var() ohne Rueckfall macht die ganze Deklaration ungueltig
 * statt sie auszulassen.
 */
.vf-section-counter      { background: var(--vf-counter-bg, transparent);   color: var(--vf-counter-fg);   padding-block: var(--vf-counter-pt, var(--inv-section-rhythm, 80px)) var(--vf-counter-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-testimonials { background: var(--vf-testi-bg, transparent);      color: var(--vf-testi-fg);      padding-block: var(--vf-testi-pt, var(--inv-section-rhythm, 80px)) var(--vf-testi-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-team         { background: var(--vf-team-bg, transparent);       color: var(--vf-team-fg);       padding-block: var(--vf-team-pt, var(--inv-section-rhythm, 80px)) var(--vf-team-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-news         { background: var(--vf-news-bg, transparent);       color: var(--vf-news-fg);       padding-block: var(--vf-news-pt, var(--inv-section-rhythm, 80px)) var(--vf-news-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-explainer    { background: var(--vf-explainer-bg, transparent);  color: var(--vf-explainer-fg);  padding-block: var(--vf-explainer-pt, var(--inv-section-rhythm, 80px)) var(--vf-explainer-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-faq          { background: var(--vf-faq-bg, transparent);        padding-block: var(--vf-faq-pt, var(--inv-section-rhythm, 80px)) var(--vf-faq-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-location     { background: var(--vf-location-bg, transparent);   color: var(--vf-location-fg);   padding-block: var(--vf-location-pt, var(--inv-section-rhythm, 80px)) var(--vf-location-pb, var(--inv-section-rhythm, 80px)); }

.vf-section-contact      { background: var(--vf-contact-bg, transparent);    padding-block: var(--vf-contact-pt, var(--inv-section-rhythm, 80px)) var(--vf-contact-pb, var(--inv-section-rhythm, 80px)); }

/* -------------------------------------------------------------
   Grids — column count is a single custom property per section
   ------------------------------------------------------------- */
.vf-counter-grid,
.vf-testimonials-grid,
.vf-team-grid,
.vf-posts-grid,
.vf-steps-grid {
  display: grid; }

.vf-counter-grid      { grid-template-columns: repeat(var(--vf-counter-cols, 4), minmax(0, 1fr)); }

.vf-testimonials-grid { grid-template-columns: repeat(var(--vf-testi-cols, 3), minmax(0, 1fr)); }

.vf-team-grid         { grid-template-columns: repeat(var(--vf-team-cols, 4), minmax(0, 1fr)); }

.vf-posts-grid        { grid-template-columns: repeat(var(--vf-news-cols, 3), minmax(0, 1fr)); }

.vf-steps-grid        { grid-template-columns: repeat(var(--vf-explainer-cols, 3), minmax(0, 1fr)); }

/* -------------------------------------------------------------
   Section specifics
   ------------------------------------------------------------- */
.vf-counter-item      { text-align: center; }

.vf-counter-num       { font-weight: 700; line-height: 1.1; }

.vf-counter-label     { opacity: .8; }

.vf-testimonial       { padding: 1.5rem; margin: 0; }

.vf-stars             { display: flex; }

.vf-testimonial-image { border-radius: 50%; object-fit: cover; margin-top: 1rem; }

.vf-testimonial-text  { margin: 1rem 0; line-height: 1.6; }

.vf-team-member       { border-radius: var(--vf-team-radius, 16px); overflow: hidden; }

.vf-team-photo        { width: 100%; aspect-ratio: var(--vf-team-photo-ratio, 1 / 1); object-fit: cover; display: block; }

.vf-post-card { overflow: hidden; }

.vf-step-card         { border-radius: var(--vf-explainer-radius, 16px); }

.vf-step-n            { font-weight: 700; }

.vf-faq-item          { border-radius: var(--vf-faq-radius, 12px); overflow: hidden; }

.vf-faq-q             { font-size: var(--vf-faq-q-size, 17px); width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: start; }

.vf-faq-q[aria-expanded="true"] .vf-faq-icon { transform: rotate(180deg); }

.vf-faq-icon          { flex: none; }

.vf-location-grid     { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin-top: 2.5rem; }

.vf-map-frame         { overflow: hidden; }

.vf-map-frame iframe  { width: 100%; height: 100%; display: block; }

.vf-hours-row         { display: flex; justify-content: space-between; gap: 1rem; }

.vf-contact-grid      { display: grid; }

.vf-form-note         { font-size: .7rem; color: var(--vf-muted-fg); text-align: center; margin-top: .75rem; }

/* -------------------------------------------------------------
   Die Spaltenzahl je Gerät

   Hier stand eine Sammelregel: unter 1024px zwei Spalten, unter 640px eine,
   für alle elf Raster gemeinsam und als feste Zahl. Das war richtig gedacht
   und ließ sich nicht ändern — der Regler „Spalten“ bewegte nur den
   Schreibtisch, und die beiden Reiter daneben wären, sobald es sie gibt,
   stumm geblieben: eine Zahl in einer Medienabfrage gewinnt gegen jede
   Variable.

   Jedes Raster liest deshalb seinen eigenen Wert. Die Zahl dahinter ist
   genau die, die vorher dastand — wer nichts einstellt, sieht nichts
   Neues. Ein leerer Telefon-Wert erbt das Tablett, ein leeres Tablett
   bleibt bei den zwei Spalten des Entwurfs.

   Gemessen am 06.10.2026.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
.vf-counter-grid { grid-template-columns: repeat(var(--vf-counter-cols-tab, 2), minmax(0, 1fr)); }
.vf-testimonials-grid { grid-template-columns: repeat(var(--vf-testi-cols-tab, 2), minmax(0, 1fr)); }
.vf-team-grid { grid-template-columns: repeat(var(--vf-team-cols-tab, 2), minmax(0, 1fr)); }
.vf-posts-grid { grid-template-columns: repeat(var(--vf-news-cols-tab, 2), minmax(0, 1fr)); }
.vf-steps-grid { grid-template-columns: repeat(var(--vf-explainer-cols-tab, 2), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
.vf-counter-grid { grid-template-columns: repeat(var(--vf-counter-cols-mob, var(--vf-counter-cols-tab, 1)), minmax(0, 1fr)); }
.vf-testimonials-grid { grid-template-columns: repeat(var(--vf-testi-cols-mob, var(--vf-testi-cols-tab, 1)), minmax(0, 1fr)); }
.vf-team-grid { grid-template-columns: repeat(var(--vf-team-cols-mob, var(--vf-team-cols-tab, 1)), minmax(0, 1fr)); }
.vf-posts-grid { grid-template-columns: repeat(var(--vf-news-cols-mob, var(--vf-news-cols-tab, 1)), minmax(0, 1fr)); }
.vf-steps-grid { grid-template-columns: repeat(var(--vf-explainer-cols-mob, var(--vf-explainer-cols-tab, 1)), minmax(0, 1fr)); }
}

/* =============================================================
   Responsive custom properties

   A responsive schema field writes --x-dt, --x-tab and --x-mob, and
   Inverta_CSS compiles the media queries that resolve them into --x.
   A stylesheet therefore just reads var(--x, <design default>) and is
   correct at every width — and live preview can drive all three, which
   is otherwise impossible from inside a media query.
   ============================================================= */

/* The brands capsule keeps its slightly rounder corner as a design default, but it is expressed as an offset from the global capsule rounding rather
   than a number, so "Design-Grundlagen" reaches it like every other capsule. */
.vf-section-brands {
  --vf-brands-capsule-radius: calc(var(--inv-radius-capsule, 20px) + 4px);
}

.vf-section-brands .vf-brand-svg,
.vf-section-brands .vf-brand-img {
  height: var(--vf-brands-logo-h, 48px);
}

.vf-section-brands .vf-brands-capsule {
  border-radius: var(--vf-brands-capsule-radius);
}

/* -------------------------------------------------------------
   Responsive breakpoint chains for Hero and About

   A blank tablet or mobile value inherits the breakpoint above it, which is why each step names the previous one as its fallback.
   ------------------------------------------------------------- */
/* Hero and About breakpoint values are resolved by Inverta_CSS, which writes
   the chain --x: var(--x-tab, var(--x-dt)) into the compiled stylesheet. */