/* =========================================================================
   Airclip Cloud – Design System (base.css)
   Clean SaaS layout (airteam-style) in the Airclip corporate design.
   Brand: Orange #f59500 · Petrol #007288 · Signature-Verlauf #f59500→#ee6428
   Font: New Rubrik Edge (nicht frei verfügbar) → Web-Fallback Ubuntu
   Shared by all three drafts. Do not fork per draft – only the homepage
   section ORDER differs between drafts (the funnel test).
   ========================================================================= */

/* ---------- Schrift ----------
   Ubuntu liegt selbst unter /shared/fonts/ (Ubuntu Font Licence), nicht bei
   fonts.googleapis.com: ein Abruf von Google uebertraegt die Besucher-IP
   ohne Einwilligung (LG Muenchen I, 3 O 17493/20). Nur latin und latin-ext,
   dieselben Schnitte wie vorher: 400, 500, 700, 700 kursiv. */
/* latin-ext */
@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ubuntu-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ubuntu-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --orange:        #f59500;
  --orange-light:  #f7a33e;
  --orange-dark:   #ee6428;
  --orange-deep:   #e5601f;
  --petrol:        #007288;
  --petrol-dark:   #005768;
  --petrol-light:  #e3f0f3;
  --grad-orange:   linear-gradient(100deg, #f59500 0%, #ee6428 100%);
  --grad-orange-soft: linear-gradient(120deg, #fff3e2 0%, #ffe7cf 100%);

  /* Neutrals */
  --ink:      #181819;   /* headlines / near-black */
  --body:     #384049;   /* body text */
  --muted:    #6a7480;   /* secondary text */
  --line:     #e6e9ee;   /* borders */
  --line-soft:#eef1f5;
  --bg:       #ffffff;
  --bg-alt:   #f7f9fb;   /* alternating section bg */
  --bg-tint:  #f4f8f9;   /* petrol-tinted section */
  --surface:  #ffffff;

  /* Feedback */
  --star:     #ffb400;
  --ok:       #17a673;

  /* Type */
  --font: "New Rubrik Edge", "Ubuntu", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1: clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem);
  --h2: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem);
  --h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(24,24,25,.06), 0 2px 8px rgba(24,24,25,.05);
  --shadow-md: 0 6px 20px rgba(24,24,25,.08), 0 2px 6px rgba(24,24,25,.05);
  --shadow-lg: 0 18px 48px rgba(24,24,25,.12);
  --shadow-orange: 0 10px 26px rgba(238,100,40,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Das hidden-Attribut muss jede eigene display-Regel schlagen. Der Browser
   liefert dafuer nur `[hidden]{display:none}` im UA-Stylesheet, und jede
   Autoren-Regel (z. B. `.btn{display:inline-flex}`) gewinnt dagegen – sonst
   bleiben per JS auf `hidden` gesetzte Elemente sichtbar. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--petrol-dark); }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--h1); }
/* Lange Komposita („Nutzerverwaltung“, „Datenschutzerklärung“) sind auf dem
   Telefon breiter als die Spalte. break-word greift nur, wenn ein Wort nicht
   passt, und laesst die Desktop-Umbrueche unberuehrt; getrennt wird erst auf
   schmalen Bildschirmen. */
h1, h2, h3, h4, .pkg-card__name { overflow-wrap: break-word; }
@media (max-width: 480px){ h1, h2, .pkg-card__name { hyphens: auto; } }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }
p { color: var(--body); }
strong { color: var(--ink); font-weight: 700; }
.lead { font-size: var(--lead); color: var(--muted); line-height: 1.55; }
.headline-italic { font-style: italic; }   /* CD: Headlines Bold Italic (dezent eingesetzt) */

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tint { background: var(--bg-tint); }
.section--ink { background: var(--ink); color: #cfd5dc; }
.section--tight { padding-block: clamp(2.4rem, 4vw, 3.5rem); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3rem); }
.section-head.center { text-align: center; }
.section-head .eyebrow { margin-bottom: .8rem; }
.section-head h2 + .lead { margin-top: .9rem; }

/* ---------- Eyebrow / chips / badges ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.section-head.center .eyebrow { justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem; border-radius: var(--radius-pill);
  background: var(--petrol-light); color: var(--petrol-dark);
  font-size: .82rem; font-weight: 600;
}
.chip svg { width: 15px; height: 15px; flex: none; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: #fff3e2; color: #8a3a12; font-weight: 700; font-size: .8rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 1rem; line-height: 1; border: 2px solid transparent;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
  white-space: nowrap; cursor: pointer;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--grad-orange); color: #fff; box-shadow: var(--shadow-orange); }
/* Der zweite Fall ist die eingesetzte Pille im Viewer-Rahmen: der Mauszeiger
   liegt dort auf dem umschliessenden <button>, nie auf der Pille selbst. */
.btn--primary:hover,
.media-frame__play:hover .btn--primary { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(238,100,40,.4); }
.btn--secondary { background: var(--petrol); color: #fff; }
.btn--secondary:hover { background: var(--petrol-dark); color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--petrol); border-color: var(--line); }
.btn--outline:hover { border-color: var(--petrol); color: var(--petrol-dark); background: var(--petrol-light); }
.btn--sm { padding: .6rem 1.1rem; font-size: .92rem; }
.btn--ghost { background: transparent; color: var(--ink); padding-inline: .4rem; }
.btn--ghost:hover { color: var(--petrol); }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.08rem; }
/* Auf schmalen Telefonen (320px) ist ein langer Knopftext breiter als die
   Spalte; dann darf er umbrechen, statt die Seite seitlich zu schieben. */
@media (max-width: 380px){ .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; } }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row.center { justify-content: center; }

.textlink { color: var(--petrol); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.textlink:hover { gap: .55rem; }
.textlink::after { content: "→"; transition: transform .15s var(--ease); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.nav__brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.nav__brand img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__links a { color: var(--ink); font-weight: 600; font-size: .98rem; white-space: nowrap; }
/* Zwischen Burger-Grenze und 1240 px wird es eng: der Registrierknopf
   ("1 Monat kostenlos testen") ist der laengste Eintrag der Zeile. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav { gap: 1rem; }
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: .94rem; }
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--petrol); }
.nav__actions { display: flex; align-items: center; gap: .7rem; }
.nav__login { color: var(--ink); font-weight: 600; }
.nav__toggle { display: none; background: none; border: 0; padding: .4rem; color: var(--ink); }
.nav__toggle svg { width: 28px; height: 28px; }

/* Sprachumschalter. Steht bewusst zwischen Linkliste und Buttons: er ist ein
   Steuerelement, kein Navigationsziel. Als <details> gebaut, damit er ohne
   JavaScript aufklappt -- app.js ergaenzt nur das Schliessen bei Klick
   daneben und bei Escape. Gehalten in Petrol, nicht in Orange: das Orange
   gehoert im Header allein dem Registrieren-Button. */
.lang-switch { position: relative; }
.lang-switch > summary {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .42rem .6rem .42rem .55rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--body);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
  cursor: pointer; user-select: none;
  list-style: none;   /* Firefox: sonst steht das Dreieck davor */
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover,
.lang-switch[open] > summary { border-color: var(--petrol); color: var(--petrol); }
.lang-switch__globe { width: 1.15em; height: 1.15em; flex: none; }
.lang-switch__caret { width: .8em; height: .8em; flex: none; color: var(--muted); transition: transform .18s var(--ease); }
.lang-switch[open] .lang-switch__caret { transform: rotate(180deg); color: inherit; }
.lang-switch__menu {
  position: absolute; z-index: 20; top: calc(100% + .55rem); right: 0;
  min-width: 10.5rem; padding: .3rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.lang-switch__option {
  display: block; padding: .52rem .7rem; border-radius: 10px;
  font-size: .95rem; font-weight: 600; color: var(--body); white-space: nowrap;
}
a.lang-switch__option:hover { background: var(--bg-alt); color: var(--ink); }
.lang-switch__option.is-active { background: var(--petrol-light); color: var(--petrol); }
@media (prefers-reduced-motion: reduce) { .lang-switch__caret { transition: none; } }

@media (max-width: 1100px) {
  /* Zeile 1: Marke + Burger, sauber auf 72px zentriert. Links & Buttons sind
     geschlossen aus dem Layout (display:none) und klappen beim Öffnen als
     durchgehendes Dropdown darunter auf. */
  .nav { flex-wrap: wrap; min-height: 72px; align-items: center; column-gap: 1rem; row-gap: 0; }
  .nav__brand { order: 1; min-height: 72px; }
  /* Der Umschalter bleibt in der Kopfzeile stehen, statt im Menue zu
     verschwinden: wer die Seitensprache nicht versteht, findet ihn sonst
     hinter einem Burger, dessen Beschriftung er ebenfalls nicht versteht. */
  /* Beide auf order 2: innerhalb desselben Werts entscheidet die
     Quelltextreihenfolge, und dort steht der Umschalter vor dem Burger.
     Eine 3 waere hier falsch -- die traegt schon nav__links. */
  .lang-switch { order: 2; }
  .nav__toggle { order: 2; display: inline-flex; align-items: center; min-height: 72px; }
  .nav__links, .nav__actions {
    order: 3; display: none;
    flex-basis: 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .nav__actions { order: 4; }
  /* Offenes Menü über die volle Bildschirmbreite weiß (Full-Bleed bis an die
     Kanten – unabhängig von der is-menu-open-Klasse/JS). */
  .nav[data-open="true"] {
    background: #fff;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    box-shadow: var(--shadow-md);
  }
  .nav[data-open="true"] .nav__links { display: flex; background: #fff; padding: .25rem 0 0; border-top: 1px solid var(--line); }
  .nav[data-open="true"] .nav__actions { display: flex; background: #fff; gap: .7rem; padding: 1rem 0 1.2rem; border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: .95rem .1rem; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__login { padding: .2rem .1rem .4rem; font-size: 1.05rem; }
  .nav__actions .btn { width: 100%; }
  /* Beim Öffnen den Header deckend machen (per JS-Klasse, kein :has), damit das Menü über Inhalten lesbar bleibt */
  .site-header.is-menu-open { background: #fff; box-shadow: var(--shadow-md); }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.6rem, 5vw, 5rem); }
.hero--tint { background: var(--grad-orange-soft); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__title { font-size: var(--h1); margin-top: 1rem; }
.hero__title .accent { color: var(--orange-deep); }
.hero__sub { margin-top: 1.2rem; max-width: 34ch; }
.hero__actions { margin-top: 1.8rem; }
.hero__note { margin-top: 1rem; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hero__media { position: relative; }
.hero__media img, .hero__media .media-frame { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__badges { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; margin-top: 1.4rem; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__sub { max-width: none; }
  .hero__media { order: -1; }
}

/* ---------- Trust bar / metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.metric { text-align: center; padding: 1rem; }
.metric__num { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.metric__num .unit { color: var(--orange-deep); }
.metric__label { margin-top: .5rem; color: var(--muted); font-size: .95rem; }
/* Dreier-Variante (Startseite): sonst bliebe im 4er-Raster eine Spalte leer. */
.metrics--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px){ .metrics { grid-template-columns: repeat(2,1fr); }
  /* dritte Kennzahl über beide Spalten, damit sie mittig steht statt links zu hängen */
  .metrics--3 > .metric:last-child { grid-column: span 2; } }

/* Trustpilot-style rating block */
.rating { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.stars { --pct: 100%; display: inline-block; font-size: 1.15rem; line-height: 1; position: relative; color: #d7dbe0; }
.stars::before { content: "★★★★★"; letter-spacing: 2px; }
.stars::after {
  content: "★★★★★"; letter-spacing: 2px; color: var(--star);
  position: absolute; inset: 0; width: var(--pct); overflow: hidden; white-space: nowrap;
}
.rating__text { font-weight: 700; color: var(--ink); }
.rating__text span { color: var(--muted); font-weight: 500; }

/* ---------- Logo strip ---------- */
.logostrip { overflow: hidden; }
.logostrip__label { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.logostrip__track { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; justify-content: center; }
.logostrip__item {
  font-weight: 800; letter-spacing: .02em; color: #9aa3ad; font-size: 1.15rem;
  opacity: .85; filter: grayscale(1); transition: opacity .2s, filter .2s, color .2s;
}
.logostrip__item:hover { opacity: 1; filter: grayscale(0); color: var(--petrol); }
/* Durchlaufendes Logo-Band – nur wo .logostrip--marquee gesetzt ist (Drafts B/C bleiben statisch).
   Für nahtlose Schleife muss der Track die Items doppelt enthalten (2. Satz aria-hidden). */
.logostrip--marquee .logostrip__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; animation: logoscroll 32s linear infinite; }
.logostrip--marquee .logostrip__item { margin-right: clamp(2rem, 5vw, 4rem); flex: none; }
.logostrip--marquee:hover .logostrip__track { animation-play-state: paused; }
@keyframes logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .logostrip--marquee .logostrip__track { animation: none; flex-wrap: wrap; justify-content: center; gap: clamp(2rem,5vw,4rem); }
  .logostrip--marquee .logostrip__item { margin-right: 0; }
}

/* ---------- Kompatible Programme (Startseite, unter den Branchen) ----------
   Klein gehalten: ein Satz, eine Reihe Logos, ein Link. Die Logos sind die
   quadratischen Kacheln aus der Preistabelle, in Farbe, weil manche nur aus
   Farbe bestehen und grau nicht mehr zu erkennen waeren. */
.programs { max-width: 720px; margin: 0 auto; text-align: center; }
.programs__title { font-size: var(--h3); line-height: 1.25; }
.programs__logos {
  list-style: none; padding: 0; margin: 1.2rem 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.programs__logos img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: contain; }
.programs__text { color: var(--muted); margin-bottom: .6rem; }

/* ---------- Grid + cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid--3, .grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.5vw, 1.9rem); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dfe4ea; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--petrol-light); color: var(--petrol); margin-bottom: 1rem;
}
.card__icon svg { width: 26px; height: 26px; }
.card__icon--orange { background: #fff3e2; color: var(--orange-deep); }

/* Feature list */
.checklist li { position: relative; padding-left: 2rem; margin-top: .8rem; color: var(--body); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--petrol-light); color: var(--petrol); font-size: .8rem; font-weight: 800;
  display: grid; place-items: center;
}

/* ---------- Steps (So einfach geht's) ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2rem); }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: .5rem; }
.step__num {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-orange); color: #fff; font-weight: 700; font-size: 1.4rem;
  box-shadow: var(--shadow-orange); margin-bottom: 1rem;
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); }
.steps--connected .step:not(:last-child)::after {
  content: ""; position: absolute; top: 1.6rem; left: 3.9rem; right: -1rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--orange-light) 0 8px, transparent 8px 16px);
}
@media (max-width: 820px){ .steps--connected .step::after { display: none; } }

/* ---------- Viewer / media embed ---------- */
.media-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #0d1b1f; box-shadow: var(--shadow-lg);
}
.media-frame::before { content: ""; display: block; padding-top: 56.25%; }
.media-frame > iframe, .media-frame > video, .media-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.media-frame__play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,114,136,.12), rgba(13,27,31,.55)); cursor: pointer;
}
.media-frame__play .disc {
  width: 78px; height: 78px; border-radius: 50%; background: var(--grad-orange);
  display: grid; place-items: center; box-shadow: var(--shadow-orange); transition: transform .2s var(--ease);
}
.media-frame__play:hover .disc { transform: scale(1.08); }
/* Ohne Schleier. Der Verlauf in .media-frame__play ist Kontrastunterlage fuer
   die Scheibe und taugt dort, wo hinter ihr nur eine Platzhalterflaeche liegt.
   Ueber einem echten Bild legt er einen grauen Film darueber und nimmt genau
   dem die Farbe, was gezeigt werden soll. Die Rueckmeldung beim Zeigen leistet
   ohnehin die Scheibe, die aufgeht. */
.media-frame__play--clear { background: none; }
/* Im Viewer-Rahmen steht im Knopf, was der Klick tut. Ein Zeichen allein --
   Lineal, Wuerfel, Umlaufbahn -- laesst sich verkennen, ein Wort nicht. Die
   Pille ist derselbe Primaerknopf wie ueberall, nur eingesetzt statt gebaut:
   sie faengt keine Mausereignisse, der Schwebezustand haengt oben mit an
   .btn--primary:hover. */
.media-frame__play .btn--primary { pointer-events: none; }
/* .media-frame schneidet ab (overflow:hidden), ein Fokusrahmen mit positivem
   Abstand waere unsichtbar. Deshalb nach innen. */
.media-frame__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: var(--radius-lg); }
.media-frame__play .disc svg { width: 30px; height: 30px; color: #fff; margin-left: 4px; }
.viewer-note { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; margin-top: .9rem; }

/* ---------- Split feature (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem); align-items: center; }
/* Im Reset traegt nichts einen Aussenabstand, deshalb klebte im Textblock die
   Ueberschrift am ersten Absatz. Der Rhythmus steht hier und nicht in den
   einzelnen Komponenten: .split__body kommt auf der Preis- und auf der
   Erfolgsgeschichtenseite vor. Wer enger oder weiter will, setzt am Element
   selbst ein margin-top, das gewinnt gegen diese Regel. */
.split__body > * + * { margin-top: .9rem; }
/* Die Eyebrow ist die Aufschrift der Ueberschrift und sitzt naeher an ihr,
   derselbe Wert wie in .section-head. */
.split__body .eyebrow + * { margin-top: .8rem; }
.split--reverse .split__media { order: 2; }
/* Bild oben buendig statt mittig: die Erfolgsgeschichten tragen neben dem Bild
   Absaetze, Kennzahlen, Zitat und Personenzeile, das Bild schwebte sonst in
   der Mitte einer langen Textspalte. */
.split--top { align-items: start; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 900px){ .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card--featured { border-color: var(--orange); box-shadow: var(--shadow-md); }
.price-card--featured::before {
  content: "Beliebt"; position: absolute; top: -.8rem; right: 1.3rem;
  background: var(--grad-orange); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: var(--radius-pill);
}
.price-card__name { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.price-card__price { font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; margin: .6rem 0 .2rem; letter-spacing: -.02em; }
.price-card__price .cur { font-size: 1.2rem; vertical-align: super; }
.price-card__price .from { font-size: .95rem; color: var(--muted); font-weight: 600; }
.price-card__unit { color: var(--muted); font-size: .9rem; }
.price-card .checklist { flex: 1; margin: 1.2rem 0; }
.price-card .btn { margin-top: auto; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); }
.price-table th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table tr:hover td { background: var(--bg-alt); }
.price-table .price { font-weight: 700; color: var(--ink); }
/* Preisspalte: Grundpreis groß, Preismodell klein darunter. */
.price-table .price__value { display: block; white-space: nowrap; }
.price-table .price__model {
  display: block; margin-top: .15rem; margin-left: auto; max-width: 24ch;
  font-weight: 400; font-size: .78rem; line-height: 1.35; color: var(--muted);
}
/* Produktzelle: Logo aus der Preis-API neben Name und Kurzbeschreibung. */
.price-table__product { display: flex; align-items: flex-start; gap: .6rem; }
.price-table__product img { width: 24px; height: 24px; object-fit: contain; flex: none; margin-top: .15rem; }
/* Werkzeugleiste ueber der Preistabelle: Suchfeld links, Branchen-Chips rechts
   daneben. Die Chips passen zu acht nicht auf eine Zeile (ca. 1227px bei 1116px
   Platz), sie sind deshalb ein eigener Flex-Container, der IN SICH umbricht –
   sonst waere das Suchfeld von den Chips auf eine eigene Zeile gedraengt worden.
   Unterschreitet der Platz die Basis von .industry-filter, rutschen die Chips
   komplett unter die Suche; ein eigener Breakpoint ist dafuer nicht noetig. */
.table-tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .6rem .75rem; margin-bottom: 1.4rem; }
.table-search { position: relative; display: flex; align-items: center; flex: 0 0 11rem; }
.table-search svg { position: absolute; left: .7rem; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.table-search input {
  width: 100%; padding: .4rem .8rem .4rem 2.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font: inherit; font-size: .84rem; color: var(--ink); background: #fff;
  transition: border-color .15s;
}
.table-search input:focus { border-color: var(--petrol); outline: none; }

/* Leerzustand, wenn Suche und Filter zusammen nichts uebrig lassen. */
.no-results { margin-top: 1.4rem; color: var(--muted); }
.linkish {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--petrol); cursor: pointer; text-decoration: underline;
}

/* Branchenfilter ueber der Preistabelle. Chips sind .preset (wie die
   Groessen-Schnellauswahl im Preisrechner), der Container kommt erst per JS
   zum Vorschein (hidden-Attribut, siehe Reset oben) - ohne JS filtert nichts
   und die volle Tabelle bleibt stehen.
   !important bei .is-hidden-branche, damit die Klasse auch dann greift, wenn
   eine Zeile parallel per hidden-Attribut aufgeklappt wurde. */
.industry-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .4rem; flex: 1 1 24rem; }
.price-table tr.is-hidden-branche { display: none !important; }

/* Enthaltene Ergebnisse: ein Eintrag pro Zeile statt durch " · " getrennt.
   Der Punkt uebernimmt currentColor der Zelle, damit er sich nicht selbst
   erklaert; bei nur einem Eintrag entfaellt er ganz - ein einzelner Aufzaehl-
   punkt sieht nach fehlenden Geschwistern aus. */
.output-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.output-list li { position: relative; padding-left: .85rem; }
.output-list li::before {
  /* .68em statt der halben Zeilenhoehe: der Punkt soll auf der Mitte der
     ERSTEN Textzeile sitzen, auch wenn der Eintrag zweizeilig umbricht. */
  content: ""; position: absolute; left: 0; top: .68em;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .4;
}
.output-list li:only-child { padding-left: 0; }
.output-list li:only-child::before { content: none; }

/* Demospalte: Link auf das Beispielprojekt, sofern die Preis-API einen
   demo_project_link liefert. Orange faellt auf Weiss durch den Kontrasttest,
   deshalb Petrol (siehe airclip-corporate-design.md). */
.price-table__demo { white-space: nowrap; }
.price-table__demo a { color: var(--petrol); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.price-table__demo a:hover, .price-table__demo a:focus-visible { border-bottom-color: currentColor; }
/* position: relative macht den Scrollbereich zum Containing Block der
   .sr-only-Texte in der Demospalte. Ohne das haengen sie, sobald .reveal sein
   transform abgibt, am <body>, werden nicht mehr abgeschnitten und machen die
   Seite auf dem Telefon um die halbe Tabellenbreite breiter. */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* Live price preview widget */
.pricebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.3rem,3vw,2rem); box-shadow: var(--shadow-md); }
.pricebox__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label, .field .field__label { font-weight: 600; color: var(--ink); font-size: .92rem; }
.field select, .field input {
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink);
  background: #fff; transition: border-color .15s;
}
.field select:focus, .field input:focus { border-color: var(--petrol); outline: none; }
.pricebox__result {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem 1.2rem; flex-wrap: wrap;
}
/* "netto" behält Schriftart, Schnitt und Farbe des Betrags, steht aber eine
   Stufe kleiner, damit die Zahl die Hauptrolle behält. Der Abstand kommt per
   flex-gap (~Wortabstand), nicht per Leerzeichen. */
.pricebox__amount {
  display: flex; align-items: baseline; gap: .3em;
  font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.02em;
}
.pricebox__amount [data-net] { font-size: .5em; letter-spacing: 0; }
.pricebox__result .btn { flex: 0 0 auto; }
/* Sehr schmale Karten: Button rutscht unter den Preis und nimmt die volle Breite. */
@media (max-width: 420px) {
  .pricebox__result .btn { flex: 1 0 100%; }
}

/* Discount tiers */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .8rem; }
.tier { text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .6rem; background: #fff; }
.tier__pct { font-size: 1.7rem; font-weight: 700; color: var(--orange-deep); }
.tier__req { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

/* Vertriebsweg unter dem Mengenrabatt: eigenes Panel, damit Grosskunden ihn
   sehen, ohne dass er dem orangen "Jetzt starten" die Aufmerksamkeit nimmt.
   Rahmen bewusst --line-soft: die Karte liegt auf hellem Grund zwischen den
   Rabattkacheln und der naechsten Sektion und soll sich nicht davor draengen. */
.volume-cta {
  max-width: 620px; margin: 1.8rem auto 0;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.volume-cta p { flex: 1 1 22ch; min-width: 0; font-size: .92rem; }
.volume-cta .btn { flex: none; }

/* ---------- Preise-Sektion: Grundfläche-Plan (Startseite) ----------
   Botschaft der Sektion: Der Preis richtet sich nach der GRUNDFLÄCHE –
   nicht nach Dachfläche und nicht nach Bildanzahl. Farblogik nach CD:
   Petrol für Struktur, Bemaßung und Text, Orange nur als Fläche
   (schraffierte Grundfläche) und für den Haupt-Button.
   Der Plan ist statisch – Grundriss, Maße und Preis sind hartcodiert. */
.sample-project__plan {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background-color: #5f7648;   /* Grundton des Kartenbilds, sichtbar bis es geladen ist */
}
/* 16:10 ist das Seitenverhältnis des Bildschirmfotos, keine Vorliebe: der
   Ausschnitt ist auf die eingezeichnete Projektgrenze zentriert und endet
   unten an der Zeile mit den Kartendaten (siehe SampleProject.astro).
   Rahmen und Bild sind damit deckungsgleich, object-fit schneidet nichts
   weg. */
.sample-project__plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mitten ins Bild, auf die eingezeichnete Fläche: dort beantwortet die Zahl
   die Frage, die das Bild aufwirft -- wofür steht das Orange? An den Rand
   gesetzt wäre sie eine Bildunterschrift und der Zusammenhang ein Rätsel.
   Der Ausschnitt ist auf die Fläche zentriert, Bildmitte und Flächenmitte
   sind also dasselbe. Unten geht es ohnehin nicht: dort stehen
   Google-Schriftzug und Datenzeile, die nicht verdeckt werden dürfen. */
.sample-project__measure {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.94); color: var(--petrol-dark); box-shadow: var(--shadow-sm);
}
.sample-project__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.2rem 2rem;
  margin-top: clamp(1.3rem,3vw,1.9rem);
}
.sample-project__amount {
  font-size: clamp(2.3rem,5vw,3.1rem); font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1;
}
.sample-project__unit { color: var(--muted); font-size: .95rem; margin-top: .45rem; }
.sample-project__actions { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
.sample-project__incl {
  margin-top: clamp(1.3rem,3vw,1.8rem); padding-top: clamp(1.3rem,3vw,1.8rem);
  border-top: 1px solid var(--line);
}
.sample-project__incl .checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  column-gap: 1.8rem; margin-top: .2rem;
}
.sample-project__incl .checklist li { font-size: .92rem; margin-top: .6rem; }
@media (max-width: 620px){
  .sample-project__row { grid-template-columns: 1fr; }
}

/* ---------- Testimonials ---------- */
.testimonial { display: flex; flex-direction: column; gap: 1rem; }
.testimonial__stars { color: var(--star); font-size: 1.05rem; letter-spacing: 2px; }
.testimonial__quote { color: var(--ink); font-size: 1.05rem; line-height: 1.55; flex: 1; }
.testimonial__author { display: flex; align-items: center; gap: .8rem; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-orange); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.testimonial__name { font-weight: 700; color: var(--ink); }
.testimonial__role { color: var(--muted); font-size: .88rem; }
/* Stimmen mit Erfolgsgeschichte: die ganze Karte fuehrt dorthin. Die Flaeche
   legt der Link selbst ueber die Karte — ::before, weil ::after beim
   .textlink schon den Pfeil traegt. Ein Anker statt eines Klick-Handlers,
   damit es ohne JavaScript, mit der Tastatur und per Mittelklick
   funktioniert. Der Fokusring gehoert dann der Karte, nicht dem Wort. */
.testimonial--link { position: relative; }
.testimonial__link { margin-top: .2rem; align-self: flex-start; }
.testimonial__link::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.testimonial--link:has(.testimonial__link:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 3px; }
.testimonial__link:focus-visible { outline: none; }

/* horizontal snap slider (optional) */
.slider { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; }
/* Luft rundherum, sonst schneidet der Scrollcontainer den Kartenschatten ab.
   Das scroll-padding haelt die eingerastete Karte auf derselben Kante. */
.slider { padding: .35rem .35rem .75rem; margin: -.35rem -.35rem 0; scroll-padding-left: .35rem; }
/* Keine Scrollleiste: sie ist ein grauer Balken quer unter den Karten und
   sagt nichts, was die angeschnittene naechste Karte nicht schoener sagt.
   Gewischt, gescrollt und geblaettert wird weiterhin, und die Spur ist
   fokussierbar -- die Pfeiltasten bleiben also auch ohne Leiste.

   Weg ist sie aber erst, wenn die Pfeilknoepfe da sind: ohne app.js bleiben
   die hidden, und ein Mausnutzer haette dann gar keine Handhabe mehr -- ein
   Mausrad scrollt nicht waagerecht. Deshalb am sichtbaren Knopfpaar
   aufgehaengt statt pauschal; ohne :has()-Unterstuetzung bleibt die Leiste
   stehen, was die harmlosere Richtung ist. */
.slider-wrap:has([data-slider-nav]:not([hidden])) .slider { scrollbar-width: none; -ms-overflow-style: none; }
.slider-wrap:has([data-slider-nav]:not([hidden])) .slider::-webkit-scrollbar { display: none; }
.slider > * { scroll-snap-align: start; flex: 0 0 min(88%, 380px); }
/* Die weiche Kante unten gilt auch fuer das Outline -- der Fokusrahmen waere
   auf der ausblendenden Seite halb weg. Solange die Spur den Fokus hat, ist
   sie deshalb aus: dann zaehlt der Rahmen, nicht die Andeutung. */
.slider:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: var(--radius); --slider-mask: none; }

/* An die Stelle der Leiste tritt eine weiche Kante: die Seite, auf der es
   weitergeht, laeuft aus. Die Klassen setzt app.js beim Scrollen, damit die
   erste und die letzte Karte nicht grundlos angeblasst werden. */
.slider { -webkit-mask-image: var(--slider-mask, none); mask-image: var(--slider-mask, none); }
.slider-wrap { --slider-fade: 3.5rem; }
/* Am Handy schaut nur ein schmaler Streifen der naechsten Karte heraus --
   eine breite Blende wuerde genau ihn schlucken. */
@media (max-width: 700px) { .slider-wrap { --slider-fade: 1.6rem; } }
.slider-wrap.is-more-right { --slider-mask: linear-gradient(90deg, #000 calc(100% - var(--slider-fade)), transparent); }
.slider-wrap.is-more-left  { --slider-mask: linear-gradient(90deg, transparent, #000 var(--slider-fade)); }
.slider-wrap.is-more-left.is-more-right {
  --slider-mask: linear-gradient(90deg, transparent, #000 var(--slider-fade), #000 calc(100% - var(--slider-fade)), transparent);
}

/* Blaetterknoepfe. Sie stehen unter der Spur, nicht ueber den Karten: ein Paar
   Kreise auf dem Zitat verdeckt genau das, was gelesen werden soll. Bis app.js
   sie verdrahtet hat, sind sie hidden -- gewischt und gescrollt wird auch ohne
   sie, ein toter Knopf waere schlechter als keiner. */
.slider-nav { display: flex; justify-content: center; gap: .6rem; margin-top: .4rem; }
.slider-nav[hidden] { display: none; }
.slider-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--petrol); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.slider-btn svg { width: 1.15rem; height: 1.15rem; }
.slider-btn:hover:not([aria-disabled="true"]) { border-color: var(--petrol); background: var(--petrol-light); }
.slider-btn[aria-disabled="true"] { color: var(--muted); opacity: .45; cursor: default; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.2rem .2rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--ink); font-size: 1.05rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--petrol); transition: transform .2s var(--ease);
  line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 .2rem 1.3rem; color: var(--muted); max-width: 68ch; }
.faq__answer a { font-weight: 600; }

/* ---------- KB / Wissen cards ---------- */
.kb-card { display: flex; flex-direction: column; }
.kb-card__cat { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--petrol); margin-bottom: .5rem; }
.kb-card h3 { font-size: 1.15rem; }
.kb-card p { flex: 1; margin: .5rem 0 1rem; }
.kb-card__meta { color: var(--muted); font-size: .85rem; }

/* ---------- Schnellstart ----------
   Auf der Wissensuebersicht eine gewoehnliche .kb-card, nur Rubrik und Knopf
   heben sie ab: wer die Seite kennt, scannt an ihr vorbei. */
.kb-card--start .kb-card__cat { color: var(--orange-deep); }
.kb-card--start .btn { align-self: flex-start; }

/* Die Schnellstart-Seite selbst (Quickstart.astro, initQuickstart() in
   app.js). Die Schritte sind die .steps der Startseite, ohne gestrichelte
   Verbindung: die Spalten tragen Inhalt. */
.quickstart {
  padding: clamp(1.4rem, 3vw, 2.3rem);
  background: var(--grad-orange-soft); border: 2px solid var(--orange-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.quickstart__steps { list-style: none; margin: 0; padding: 0; }
.quickstart__step { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; transition: opacity .2s; }
.quickstart__step .step__num { margin-bottom: .2rem; }
.quickstart__step h2 { font-size: 1.2rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.quickstart__step p { margin: 0; }
.quickstart__req {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .15rem .5rem; border-radius: var(--radius-pill); background: #fff; color: #8a3a12;
}
.picker { display: flex; flex-direction: column; gap: .55rem; width: 100%; }
.picker__label { font-size: .78rem; font-weight: 700; color: var(--ink); }
.picker__input {
  font: inherit; font-size: .95rem; color: var(--ink); width: 100%; max-width: 24rem;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.picker__input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.picker__alt { display: flex; flex-wrap: wrap; gap: .4rem; }
.picker__alt .chip--tag:not([aria-pressed="true"]):not(:hover) { background: var(--bg-alt); }
.picker__note { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0; padding: .8rem 1rem; background: var(--petrol-light); border-radius: var(--radius); font-size: .92rem; color: var(--petrol-dark); }
.picker__note p { margin: 0; color: inherit; }
.picker__note[hidden] { display: none; }
.quickstart .picker__alt .chip--tag:not([aria-pressed="true"]):not(:hover) { background: #fff; }
.quickstart .picker__note { background: #fff; color: var(--body); }
.quickstart__patterns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.quickstart__patterns li[hidden] { display: none; }
.quickstart__locked { font-size: .85rem; font-weight: 600; color: var(--petrol-dark); }
/* Gesperrt bis zur Drohnenwahl: sichtbar, damit man den Weg sieht, aber
   nicht anklickbar. Die Sperre setzt nur app.js, ohne JS ist alles offen. */
.quickstart__step.is-locked > :not(.step__num):not(h2):not([data-qs-locked]) { opacity: .4; pointer-events: none; }
.quickstart__step.is-locked .step__num { background: #fff; color: var(--orange-deep); box-shadow: none; }

/* ---------- CTA band ---------- */
/* Testphase auf der Preisseite: ein Petrol-Band mit Satz und Knopf in einer
   Zeile. Petrol statt Orange, damit es nicht mit dem orangen Abschluss-CTA
   (.cta-band) unten auf der Seite konkurriert. Auf dem Telefon untereinander. */
.trial {
  display: flex; align-items: center; gap: 1.6rem 2.4rem;
  background: var(--petrol); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 4vw, 2.6rem);
  max-width: 920px; margin-inline: auto;
}
.trial__body { flex: 1 1 auto; min-width: 0; }
.trial__title { font-size: var(--h3); line-height: 1.25; color: #fff; }
.trial__body p { color: rgba(255,255,255,.82); margin-top: .3rem; }
.trial__body p a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.trial__cta { flex: none; }
.trial .btn--on-dark { color: var(--petrol-dark); }
.trial .btn--on-dark:hover { color: var(--petrol-dark); }
@media (max-width: 700px){
  .trial { flex-direction: column; align-items: stretch; text-align: center; }
  .trial__cta { width: 100%; }
}

.cta-band { background: var(--grad-orange); border-radius: var(--radius-lg); color: #fff; padding: clamp(2.2rem,5vw,3.6rem); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 52ch; margin: 1rem auto 0; }
.cta-band .btn-row { margin-top: 1.8rem; }
.cta-band .btn--primary { background: #fff; color: var(--orange-deep); box-shadow: var(--shadow-lg); }
.cta-band .btn--primary:hover { color: var(--orange-deep); }
.cta-band .btn--outline { color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn--outline:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.cta-band::after { /* decorative CD cross-pattern hint */
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0 40%, transparent 42%); opacity: .6;
}

/* ---------- Callout / bonus banner ----------
   Ein Kasten mit normalem Textfluss, keine Flex-Pille: als Flex-Container
   wurde jedes Textstueck und jeder Link zu einem eigenen Element, und ein
   Satz mit Link zerfiel auf dem Telefon in Bruchstuecke, die runden Enden
   machten aus zwei Zeilen ein Oval. Links laufen jetzt im Satz mit. */
.callout {
  background: var(--petrol-light); border: 1px solid #cfe5ea; color: var(--petrol-dark);
  border-radius: var(--radius); padding: .9rem 1.2rem; font-weight: 500; line-height: 1.55;
}
.callout a { font-weight: 700; }
.callout--orange { background: #fff3e2; border-color: #ffe0bf; color: #8a3a12; }
/* Satz und Knopf nebeneinander (<PriceTeaser>), auf dem Telefon untereinander. */
.callout--action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem; }
.callout--action > :first-child { flex: 1 1 18rem; }

/* ---------- Zwei Wege (<NextSteps>) ----------
   Untereinander auf dem Telefon, nebeneinander ab der Breite der Textspalte.
   Das erste Feld traegt die Markenflaeche. */
.next-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.next-steps__path { display: grid; gap: .25rem; align-content: start; justify-items: start; padding: 1.1rem 1.25rem 1.3rem; box-shadow: -1px -1px 0 var(--line); }
.next-steps__path--main { background: var(--grad-orange-soft); }
.next-steps__cat { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.next-steps__path--main .next-steps__cat { color: #8a3a12; }
.next-steps__text { margin: 0 0 .75rem; color: var(--ink); font-weight: 500; line-height: 1.45; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #aeb6bf; padding-block: clamp(2.6rem,5vw,4rem) 2rem; }
.site-footer a { color: #cbd2da; }
.site-footer a:hover { color: #fff; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__top { grid-template-columns: 1fr; } }
.footer__brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.footer__brand p { color: #8b939c; font-size: .92rem; max-width: 32ch; }
.footer__claim { color: var(--orange-light); font-style: italic; font-weight: 700; margin-top: 1rem; }
.footer__col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer__col li { margin-bottom: .6rem; font-size: .95rem; }
.footer__shopnote { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: .8rem 1rem; font-size: .9rem; color: #cbd2da; margin-top: 1rem; }
.footer__bottom { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: #8b939c; }
.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Misc ---------- */
.placeholder-note {
  font-size: .75rem; color: var(--muted); background: repeating-linear-gradient(45deg,#fafbfc,#fafbfc 6px,#f2f4f7 6px,#f2f4f7 12px);
  border: 1px dashed #d6dbe1; border-radius: 6px; padding: .15rem .5rem; display: inline-block;
}
.divider { height: 1px; background: var(--line); border: 0; margin-block: 0; }
.pill-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.text-muted { color: var(--muted); }
/* Nur fuer Screenreader: erklaert Links, deren sichtbarer Text ("Ansehen")
   ausserhalb der Tabellenzeile mehrdeutig waere. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.hide-mobile{}@media (max-width:700px){.hide-mobile{display:none!important}}
/* Unterkante nur dort straffen, wo direkt ein .hide-mobile-Block anschließt
   (Startseite: der Viewer unter "So geht's"). Auf Mobil, wo dieser Block
   ausgeblendet ist, bleibt der normale Sektionsabstand erhalten. */
@media (min-width: 701px){ .tight-bottom-desktop { padding-bottom: clamp(1.9rem, 3vw, 2.5rem); } }

/* =========================================================================
   V2 (Draft-A-Mashup) components – added for the reworked workflow-first
   one-pager. Additive only: existing drafts B/C keep working unchanged.
   ========================================================================= */

/* ---------- Compact "most used outputs" cards ---------- */
.out-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 760px){ .out-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.out-card { display: flex; flex-direction: column; gap: .3rem; }
.out-card__price { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.out-card__price .from { font-size: .9rem; color: var(--muted); font-weight: 600; }
.out-card__formats { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.out-card p { margin-top: .3rem; }

/* ---------- Grundflächen-Eingabe (Live-Preisvorschau) ----------
   Zahlenfeld mit angehängter Einheit plus Schnellauswahl typischer Größen.
   Die Spinner-Pfeile sind ausgeblendet, sonst kollidieren sie mit dem "m²". */
.unit-input { position: relative; }
.unit-input input { width: 100%; padding-right: 3.1rem; }
.unit-input input::-webkit-outer-spin-button,
.unit-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.unit-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.unit-input__unit {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 600; font-size: .9rem; pointer-events: none;
}
.preset-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.preset {
  border: 1px solid var(--line); background: #fff; color: var(--petrol-dark);
  padding: .38rem .8rem; border-radius: var(--radius-pill);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.preset:hover { border-color: var(--petrol); }
.preset[aria-pressed="true"] { background: var(--petrol-light); border-color: var(--petrol); }
/* "Weitere"-Umschalter in der Chipleiste: gleiche Groesse wie ein Branchen-Chip,
   aber ohne Rahmen, damit er nicht wie eine weitere Branche aussieht. */
.preset--more { border-color: transparent; color: var(--muted); text-decoration: underline; }
.preset--more:hover { border-color: transparent; color: var(--petrol); }
/* Ausgabeformat im Preisrechner (OutputPicker.astro): Chips mit Logo, im
   Kern Radiobuttons. Gleiche Form und Farben wie .preset, nur etwas hoeher,
   weil ein Logo drinsteht. Der Radiokreis selbst ist unsichtbar, die Auswahl
   zeigt der Chip; Fokus und Auswahl laufen ueber :has(). */
.out-picker { border: 0; padding: 0; min-width: 0; }
.out-picker legend { padding: 0; margin-bottom: .4rem; }
.out-picker__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.out-picker .out-chip {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); background: #fff; color: var(--petrol-dark);
  padding: .3rem .8rem .3rem .35rem; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.out-chip:hover { border-color: var(--petrol); }
.out-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.out-chip img, .out-chip svg {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  object-fit: contain; background: #fff;
}
.out-chip svg { padding: 3px; color: var(--muted); }
.out-chip:has(input:checked) { background: var(--petrol-light); border-color: var(--petrol); }
.out-chip:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 2px; }
.out-picker .field__hint { margin-top: .55rem; }
.field__head { display: flex; align-items: center; gap: .35rem; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; padding: 0; flex: none;
  border: 0; background: none; border-radius: 50%;
  color: var(--muted); cursor: pointer; transition: color .15s;
}
.info-btn svg { width: 100%; height: 100%; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--petrol); }
.field__hint { color: var(--muted); font-size: .78rem; margin-top: .45rem; }

/* ---------- Inline social-proof strip (breaks up the price block) ---------- */
.proof-strip {
  display: flex; align-items: center; gap: .8rem 1.1rem; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: 100%; margin-inline: auto;
  background: var(--petrol-light); border: 1px solid #cfe5ea; border-radius: 999px;
  padding: .7rem 1.4rem;
}
.proof-strip .rating { flex: none; }

/* ---------- Demo project "trading cards" (specs) ---------- */
.spec-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; max-width: 900px; margin-inline: auto; }
@media (max-width: 640px){ .spec-cards { grid-template-columns: 1fr; max-width: 440px; } }
.spec-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.spec-card--featured { border-color: var(--orange); }
.spec-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dfe4ea; }
.spec-card__media { position: relative; display: block; aspect-ratio: 16/10; background: linear-gradient(135deg,var(--petrol-dark),var(--petrol)); overflow: hidden; }
/* contain, nicht cover: die Vorschaubilder sind freigestellte Modelle auf
   durchsichtigem Grund. Beschnitten saehe man vom Gebaeude die Haelfte,
   und der Verlauf darunter ist ohnehin als Hintergrund gedacht. */
.spec-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease); }
.spec-card:hover .spec-card__media img { transform: scale(1.05); }
.spec-card__drone {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.94);
  color: var(--ink); font-weight: 700; font-size: .78rem; padding: .32rem .6rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.spec-card__open {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  background: linear-gradient(180deg, rgba(0,114,136,.06), rgba(13,27,31,.30));
  transition: background .2s var(--ease);
}
.spec-card__media:hover .spec-card__open, .spec-card__media:focus-visible .spec-card__open { background: linear-gradient(180deg, rgba(0,114,136,.14), rgba(13,27,31,.5)); }
.spec-card__open .disc { width: 60px; height: 60px; border-radius: 50%; background: var(--grad-orange); display: grid; place-items: center; box-shadow: var(--shadow-orange); transition: transform .2s var(--ease); }
.spec-card__media:hover .spec-card__open .disc { transform: scale(1.08); }
.spec-card__open .disc svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; }
.spec-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
/* Karte mit zwei Projekten: jede Fassung ist ein .spec-card__variant. Sichtbar
   loest er sich auf (display: contents), damit Medium, Titel und Button
   Flex-Kinder der Karte bzw. des Body bleiben und margin-top:auto weiter greift. */
.spec-card__variant:not([hidden]) { display: contents; }
.spec-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
/* Umschalter mit gleitendem Daumen; app.js setzt data-active auf die Position
   des gedrueckten Knopfs (0, 1). Nur fuer zwei Optionen gebaut. */
.variant-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  background: var(--petrol-light); border-radius: var(--radius-pill);
}
.variant-switch[hidden] { display: none; }
.variant-switch::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--radius-pill); background: var(--grad-orange); box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease);
}
.variant-switch[data-active="1"]::before { transform: translateX(100%); }
.variant-switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; color: var(--petrol);
  padding: .3rem .85rem; border-radius: var(--radius-pill); transition: color .2s var(--ease);
}
.variant-switch button[aria-pressed="true"] { color: #fff; }
.variant-switch button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .variant-switch::before { transition: none; } }
.spec-card__cat { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--petrol); }
.spec-card__title { font-size: 1.15rem; margin: .25rem 0 .9rem; }
/* minmax(0, 1fr) statt 1fr: sonst setzt ein langes Wort in Versalien
   („DROHNENFÜHRERSCHEIN“) die Spaltenbreite und schiebt die Seite seitlich. */
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin: 0 0 1.1rem; }
.spec-list dt, .spec-list dd { overflow-wrap: break-word; hyphens: auto; }
.spec-list > div { display: flex; flex-direction: column; gap: .05rem; }
.spec-list dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.spec-list dd { color: var(--ink); font-weight: 700; font-size: .92rem; }
.spec-list .ok { color: var(--ok); }
.spec-card__body .btn { margin-top: auto; }
/* Sieben Kennzahlen: die Liste endet einzeilig, darum etwas mehr Luft zum Button.
   Nur in .spec-card, damit die Faustregel-Liste auf wissen.html unveraendert bleibt. */
.spec-card .spec-list { margin-bottom: 1.8rem; }
.spec-list .no { color: var(--muted); }
/* Kleines Fragezeichen an einer Kennzahl, das in den passenden Wissens-Abschnitt springt. */
.spec-help {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: .3rem; border-radius: 50%; border: 1px solid #c9d3d6; color: var(--petrol);
  font-size: .62rem; font-weight: 700; line-height: 1; vertical-align: .1em;
  text-transform: none; letter-spacing: 0;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.spec-help:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.demo-more { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: 1.6rem; text-align: center; }
.demo-more__note { font-size: .85rem; color: var(--muted); }
.demo-more__note a { color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Kauf-Streifen im Fuss einer Demo-Karte ----------
   Zieht ueber die volle Kartenbreite, indem er die Innenabstaende des
   .spec-card__body negativ ausgleicht. */
.spec-card__buy {
  margin: 1.1rem -1.3rem -1.4rem; padding: .85rem 1.3rem .95rem;
  background: var(--grad-orange-soft); border-top: 1px solid #ffe0bf;
  display: flex; flex-direction: column; gap: .1rem;
}
.spec-card__buy-label { font-size: .78rem; color: #8a6340; }
.spec-card__buy-link {
  font-weight: 700; font-size: .95rem; color: var(--orange-deep);
  display: inline-flex; align-items: center; gap: .35rem;
}
.spec-card__buy-link::after { content: "→"; transition: transform .15s var(--ease); }
.spec-card__buy-link:hover { color: var(--orange-deep); gap: .55rem; }
.spec-card__buy-note { font-size: .74rem; color: #8a6340; margin-top: .15rem; }

/* ---------- Paket-Karten-Kopf ---------- */
/* Rest der Komplettpaket-Sektion entfernt; wissen.html nutzt den Kopf noch fuer den
   A2-Fuehrerschein-Block. */
.pkg-card__head { display: flex; align-items: center; gap: .7rem; }
.pkg-card__name { font-weight: 700; color: var(--ink); font-size: 1.25rem; }

/* ---------- Success-story cards (Erfolgsgeschichten) ---------- */
.story-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.story-card__media { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg,var(--petrol),var(--orange-dark)); overflow: hidden; }
.story-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card__branche { position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,.94); color: var(--petrol-dark); font-weight: 700; font-size: .76rem; padding: .3rem .65rem; border-radius: var(--radius-pill); }
.story-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.story-card__quote { color: var(--ink); font-size: 1.05rem; line-height: 1.5; margin: .2rem 0 1rem; flex: 1; }
.story-card__author { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.story-card .textlink { margin-top: 1rem; }

/* ---------- Person teaser (industries → success stories) ---------- */
.person { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.person .avatar { width: 40px; height: 40px; font-size: .85rem; }
.person__name { font-weight: 700; color: var(--ink); font-size: .92rem; line-height: 1.2; }
.person__role { color: var(--muted); font-size: .82rem; }

/* ---------- Image-ready avatars & customer logos (Foto-/Logo-Slots) ---------- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Porträt-Slot in den Kundenstimmen: zeigt bis zum Go-Live eine Silhouette mit
   gestricheltem Rand. Echtes Foto = <img> in den .avatar setzen – Silhouette und
   Rand verschwinden dann von selbst. */
.avatar--photo { width: 56px; height: 56px; background: var(--bg-tint); border: 2px dashed #c8d4d8; color: var(--petrol); }
.avatar--photo > svg { width: 58%; height: 58%; fill: currentColor; opacity: .45; }
.avatar--photo:has(img) { border: 0; background: var(--grad-orange); }
.avatar--photo:has(img) > svg { display: none; }
/* Feste Hoehe statt max-height: ein SVG ohne width/height hat keine eigene
   Breite, und im Band (width: max-content) schrumpfte es damit auf 0x0. Mit
   fester Hoehe ergibt sich die Breite aus dem Seitenverhaeltnis, bei SVG wie
   bei Rastern, und das srcset kann ein SVG nicht mehr kleinrechnen. */
.logostrip__item img { height: 30px; width: auto; display: block; }
/* Hochformatige Wort-Bild-Marken (Zeichen ueber dem Schriftzug) waeren bei
   30px nur ein farbiges Quadrat; sie duerfen hoeher, die Reihe ist mittig
   ausgerichtet. */
.logostrip__item img.logostrip__img--tall { height: 48px; }

/* Firmenlogo auf der Seite einer Erfolgsgeschichte. Nur dort: die Uebersicht
   traegt je Geschichte schon genug. Freigestellte Logos kommen in sehr verschiedenen Seitenverhaeltnissen
   herein, vom fast quadratischen bis zum 4:1-Schriftzug. Begrenzt wird deshalb
   Hoehe UND Breite: das Bild passt sich in beide Grenzen ein und traegt damit
   ueberall dasselbe optische Gewicht, egal welches Format der Betrieb liefert. */
.story-logo { display: block; width: auto; height: auto; max-width: 190px; max-height: 44px; margin-top: 1.3rem; }

/* ---------- Trustpilot-Widget (TrustBox, src/components/TrustBox.astro) ----------
   Das Iframe ist 20px hoch und so breit wie sein Container; ohne feste
   Breite fiele es im max-content-Streifen auf die 300px eines nackten
   Iframes zurueck. Unter etwa 450px laesst die Vorlage die Bewertungszahl
   weg und zeigt nur Wort und Sterne, daher 30rem; auf dem Telefon nimmt
   Trustpilot das in Kauf. Bis das Script da ist, steht in derselben
   Flaeche die Bewertung aus dem Build. */
.trustbox { width: 30rem; max-width: 100%; min-height: 20px; }
.trustbox__fallback { display: flex; justify-content: center; color: inherit; text-decoration: none; }
.trustbox__fallback .stars { font-size: 1rem; }
/* Im Streifen steht .rating auf flex: none; hier muss die Zeile umbrechen
   duerfen, sonst schiebt sie auf dem Telefon die Seite seitlich. */
.trustbox__fallback .rating { flex: 0 1 auto; min-width: 0; justify-content: center; }

/* ---------- Light footer variant (nur v2/draft-a; B/C behalten den dunklen Footer) ---------- */
.site-footer--light { background: #e8f0f2; color: var(--muted); border-top: 1px solid #d3e2e6; }
.site-footer--light a { color: var(--petrol); }
.site-footer--light a:hover { color: var(--petrol-dark); }
.site-footer--light .footer__brand p { color: var(--muted); }
.site-footer--light .footer__claim { color: var(--orange-deep); }
.site-footer--light .footer__col h4 { color: var(--ink); }
.site-footer--light .footer__shopnote { background: #fff; border-color: #d3e2e6; color: var(--petrol-dark); }
.site-footer--light .footer__bottom { border-top-color: var(--line); color: var(--muted); }

/* ---------- Flugmuster-Grafiken (Wissen → Flugplanung) ----------
   Das Markup baut src/lib/flight-patterns.ts zur Buildzeit, bewegt wird es
   von app.js. Ohne JS ruht die Drohne auf der ersten Aufnahmeposition und
   deren Sichtlinie leuchtet – die Abbildung ist dann vollständig, nur still.
   Strichstärke, Deckkraft und Punktgröße stehen als inline style im Markup
   und werden von app.js fortgeschrieben; hier stehen nur Farben und Formen. */
.flightpattern { margin: 2rem 0 0; }
/* Abbildung als Link auf die Musterseite (Flugplanungs-Uebersicht). Dieselbe
   leichte Rueckmeldung wie beim Titelbild der Erfolgsgeschichten. */
.flightpattern__link { display: block; border-radius: var(--radius); transition: box-shadow .25s var(--ease); }
.flightpattern__link:hover { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .flightpattern__link { transition: none; } }
.fp-svg {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font);
}

.fp-ground { fill: #f4f9fb; }
.fp-gridline { fill: none; stroke: #dde8ec; stroke-width: 3; }
.fp-grid { stroke: none; }
.fp-ground-edge { fill: none; stroke: #c6d8de; stroke-width: 3; }
.fp-divider { stroke: #e3eef2; stroke-width: 3; }

/* Die Flugbahn. Zwei Halbbögen, beide im Uhrzeigersinn notiert, damit die
   Striche auf der vorderen und der hinteren Hälfte gleich herum wandern. */
.fp-track { fill: none; stroke: var(--petrol); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 24 18; }

/* Eine Aufnahmeposition. .is-hot ist der Moment des Auslösens. */
.fp-ray line { fill: none; stroke: var(--petrol); stroke-linecap: round; stroke-dasharray: 10 12; }
.fp-ray circle { fill: var(--petrol); }
.fp-ray.is-hot line { stroke: var(--orange); stroke-dasharray: none; }
.fp-ray.is-hot circle { fill: var(--orange); }

/* Der Kamerakegel am Standort der Drohne: er zeigt aufs Gebäude, nicht nach
   unten, und ist so breit, dass das Haus hineinpasst. Zu sehen ist er nur im
   Moment des Auslösens — app.js schreibt Punkte und Deckkraft fort. Im
   Ruhezustand ohne JS leuchtet die erste Aufnahme, also auch ihr Kegel. */
.fp-beam { fill: var(--orange); opacity: .2; }

.fp-wall { fill: #eaf2f5; stroke: #bed2d9; stroke-width: 2; }
.fp-wall--side { fill: #d9e6eb; }
.fp-roof { fill: var(--petrol); opacity: .92; }
.fp-roof--back { opacity: .5; }
.fp-roof--left { opacity: .65; }
.fp-roof--dark { fill: var(--petrol-dark); opacity: 1; }
.fp-plan-house { fill: var(--petrol); opacity: .88; }
.fp-plan-ridge { fill: none; stroke: #fff; stroke-width: 4; opacity: .7; }

.fp-drone { color: var(--orange); }
.fp-drone__body { fill: currentColor; }
.fp-drone__eye { fill: #fff; }
.fp-drone.is-hidden { display: none; }

.fp-title { font-size: 30px; font-weight: 700; letter-spacing: .09em; fill: var(--petrol); }

@keyframes fp-dash { to { stroke-dashoffset: -420; } }
.flightpattern.is-running .fp-track { animation: fp-dash 3.4s linear infinite; }
.flightpattern.is-paused .fp-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .flightpattern .fp-track { animation: none; }
}

/* ---- Gebietsroute mit Schrägbildern ----
   Dieselbe Abbildung in zwei Fassungen (Smart Oblique und fünf Einzelrouten).
   In ihr steht kein Wort: was sie zeigt, sagt der Beitrag darüber. Farben
   trennen die Aufgabe, nicht das Gerät — die Drohne behält ihre, sonst sieht
   es nach mehreren Fluggeräten aus. */
.fp-lane {
  fill: none; stroke: var(--petrol); stroke-width: 5;
  stroke-linejoin: round; stroke-linecap: round;
  transition: opacity .45s ease;
}
.fp-lane--oblique { stroke: var(--orange); stroke-width: 4.5; }

/* Ein Aufnahmepunkt ist ein Foto, kein Scanstrich. .is-hot ist der Moment
   des Auslösens; bei Smart Oblique blitzt er viermal hintereinander. Orange
   ist nur dieser eine Moment — dieselbe Regel wie bei den Sichtlinien des
   Point of Interest. */
.fp-shot { color: var(--petrol); transition: opacity .45s ease; }
.fp-shot.is-hot { color: var(--orange); }
.fp-shot__dot { fill: currentColor; opacity: .42; }
.fp-shot__ring { fill: none; stroke: currentColor; stroke-width: 4; opacity: 0; }
.fp-shot.is-hot .fp-shot__dot { opacity: 1; }
.fp-shot.is-hot .fp-shot__ring { opacity: .85; }

/* Die gerade nicht geflogene Route tritt zurück, sonst liegen fünf Raster
   gleich laut übereinander. */
.fp-lane.is-dim, .fp-shot.is-dim { opacity: .12; }
/* Smart 3D Capture: die Ringe sind EINE Route, Etage fuer Etage. Die anderen
   Etagen bleiben deshalb sichtbarer als ein fremdes Raster -- von oben sollen
   sie als Hoehenlinien stehen bleiben. */
.fp-lane--ring { stroke-width: 4; }
.fp-lane--ring.is-dim { opacity: .3; }
.fp-shot--ring.is-dim { opacity: .18; }

/* Der Kamerakegel. Fünf Lagen liegen im Markup, sichtbar ist genau eine —
   ohne JS die erste Aufnahme. */
.fp-cam { opacity: 0; }
.fp-cam.is-on { opacity: 1; }
.fp-cam__fill { fill: var(--petrol); opacity: .13; }
.fp-cam__foot { fill: var(--petrol); opacity: .2; stroke: var(--petrol); stroke-width: 3; }
.fp-cam--oblique .fp-cam__fill { fill: var(--orange); opacity: .17; }
.fp-cam--oblique .fp-cam__foot { fill: var(--orange); opacity: .26; stroke: var(--orange); }

/* Das Gewerbegebiet: Flachdach-Halle mit Oberlichtbändern, Bürogebäude. */
.fp-flat { fill: #9fc2cd; stroke: #b7ccd4; stroke-width: 2; }
.fp-plan-flat { fill: #8fb8c5; opacity: .95; stroke: #fff; stroke-width: 4; }
/* Heller als das Dach in der Schrägansicht: die Bahn fliegt über dem Haus und
   muss in der Draufsicht darüber zu sehen sein, nicht petrol auf petrol. */
.fp-plan-office { fill: var(--petrol); opacity: .6; stroke: #fff; stroke-width: 4; }
.fp-skylight { stroke: #fff; stroke-width: 7; opacity: .5; stroke-linecap: round; }

/* Die Baustelle der Nadirroute: Haufwerke statt Gebäuden. Eine senkrechte
   Kamera sieht keine Fassade — was sie erfasst, ist die Fläche und das
   Volumen darauf. In der Draufsicht tragen die Haufen Höhenlinien, also
   genau das, was am Ende aus den Bildern entsteht. */
.fp-heap { fill: #c6d8df; stroke: #9db6c0; stroke-width: 2; stroke-linejoin: round; }
.fp-heap--shade { fill: #9bb5c0; stroke: none; }
.fp-plan-heap { fill: var(--petrol); opacity: .55; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.fp-plan-heap-ring { fill: none; stroke: #fff; stroke-width: 3; opacity: .5; stroke-linejoin: round; }
.fp-plan-heap-crest { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .75; }

/* ---- Seitenriss ----
   Die dritte Tafel jeder Abbildung, von vorn auf die x-z-Ebene. Die Maße
   (Flughöhe, Kamerawinkel) sind Linien ohne Zahl: die Werte stehen in der
   Kennwertliste darunter. */
.fp-side-base { stroke: #c6d8de; stroke-width: 5; }
.fp-side-track { stroke: var(--petrol); stroke-width: 4; stroke-linecap: round; opacity: .35; }
.fp-side-opening { fill: #cfdee4; }
.fp-side-window { stroke: #cfdee4; stroke-width: 12; }
.fp-dim { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fp-dim--angle { stroke: var(--orange); stroke-width: 4; }
.fp-plumb { stroke: #7d929b; stroke-width: 3; stroke-dasharray: 11 9; opacity: .5; }
/* Was der Kegel am Boden trifft. */
.fp-cam__hit { stroke: var(--petrol); stroke-width: 10; stroke-linecap: round; opacity: .8; }
.fp-cam--oblique .fp-cam__hit { stroke: var(--orange); }

/* Muster, für die es noch keine Bauanleitung gibt (src/lib/flight-patterns.ts,
   Register BUILDERS). Gleicher Rahmen, gestrichelt, ohne Bewegung. */
.flightpattern--placeholder .fp-svg { background: var(--bg-alt); }
.fp-placeholder-box { fill: #fff; stroke: #c6d8de; stroke-width: 4; stroke-dasharray: 18 14; }
.fp-placeholder-title { text-anchor: middle; }
.fp-placeholder-hint {
  text-anchor: middle; font-size: 30px; font-weight: 400; fill: var(--muted);
}

/* =========================================================================
   Erklärgrafiken (Wissensartikel, zuerst Genauigkeit & RTK)
   Das Markup baut src/lib/diagrams.ts zur Buildzeit. Ein Vergleich besteht
   aus zwei Tafeln, die ab 640 px nebeneinander und darunter untereinander
   stehen. Petrol ist "ohne" bzw. "ungünstig", Orange "mit" bzw. "gut".
   Bewegung läuft nur mit .is-running, das app.js im Sichtfeld setzt.
   ========================================================================= */
.diagram__panels { display: grid; gap: 1rem; }
@media (min-width: 640px) { .diagram__panels--pair { grid-template-columns: 1fr 1fr; } }
.diagram__panel {
  position: relative; background: #fff;
  border: 2px solid var(--petrol); border-radius: var(--radius); overflow: hidden;
}
.diagram__panel--orange { border-color: var(--orange); }
.diagram__panels:not(.diagram__panels--pair) .diagram__panel { border: 1px solid var(--line); }
.diagram__label {
  position: absolute; top: .75rem; left: .75rem;
  padding: .2rem .7rem; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--petrol);
}
.diagram__panel--orange .diagram__label { background: var(--grad-orange); }
.dg-svg { display: block; width: 100%; height: auto; font-family: var(--font); }

.dg-sat, .dg-base, .dg-device { fill: var(--petrol); color: var(--petrol); }
.dg-drone { fill: currentColor; }
.dg-drone.is-petrol { color: var(--petrol); }
.dg-drone.is-orange { color: var(--orange); }
.dg-beam { stroke: var(--petrol); stroke-width: 3; stroke-dasharray: 8 14; opacity: .5; fill: none; }
.dg-beam--orange { stroke: var(--orange); stroke-width: 4; opacity: .95; }
.dg-band { fill: rgba(245,149,0,.13); stroke: var(--orange); stroke-width: 3; stroke-dasharray: 12 10; }
.dg-band--tight { fill: rgba(245,149,0,.2); }
.dg-cross { fill: none; stroke: var(--petrol); stroke-width: 3; opacity: .65; }
.dg-cross--bold { stroke-width: 5; opacity: 1; }
.dg-cross--orange { stroke: var(--orange); stroke-width: 5; opacity: 1; }
.dg-corr { fill: none; stroke: var(--petrol); stroke-width: 4; stroke-dasharray: 14 12; }
.dg-corr-head { fill: var(--petrol); }
.dg-flow { fill: none; stroke: var(--orange); stroke-width: 6; stroke-dasharray: 18 16; stroke-linecap: round; }

.dg-value { font-size: 46px; font-weight: 700; fill: var(--ink); }
.dg-value--petrol { fill: var(--petrol); font-size: 40px; }
.dg-value--orange { fill: var(--orange-dark); }
.dg-note { font-size: 26px; font-weight: 700; fill: var(--ink); }
.dg-note--orange { fill: var(--orange-dark); }
.dg-or { font-size: 22px; font-weight: 700; letter-spacing: .12em; fill: var(--orange-dark); }
.dg-angle { font-size: 46px; font-weight: 700; fill: #fff; }

.dg-wall { fill: #e6eef1; }
.dg-roof { fill: var(--petrol); opacity: .9; }
.dg-roof--orange { fill: var(--orange); opacity: 1; }
.dg-ghost { fill: none; stroke: #7d929b; stroke-width: 3; stroke-dasharray: 10 9; }
.dg-ghost--orange { stroke: var(--orange); }
.dg-ground { stroke: #c6d8de; stroke-width: 4; }
.dg-hall { fill: #e6eef1; }
.dg-line { fill: none; stroke: var(--petrol); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.dg-line--orange { stroke: var(--orange); }
.dg-dim { fill: none; stroke: var(--petrol); stroke-width: 3; }
.dg-dim--bold { stroke-width: 4; }
.dg-dim--orange { stroke: var(--orange); stroke-width: 5; }
.dg-arrow { fill: var(--petrol); }
.dg-cad { fill: none; stroke: var(--petrol); stroke-width: 5; stroke-dasharray: 14 10; }
.dg-dot { fill: var(--orange); opacity: .85; }
.dg-shift { fill: rgba(245,149,0,.28); stroke: var(--orange); stroke-width: 5; }
.dg-heap { fill: #dfe9ec; }
.dg-heap2 { fill: rgba(245,149,0,.35); stroke: var(--orange); stroke-width: 5; }
.dg-building { fill: #d6e3e7; }
.dg-window { fill: #c2d4da; }
.dg-tree { fill: #bcd0d6; }
.dg-cone { fill: rgba(0,114,136,.10); stroke: var(--petrol); stroke-width: 3; stroke-dasharray: 12 9; }
.dg-cone--orange { fill: rgba(245,149,0,.12); stroke: var(--orange); }

/* Bewegung. Die Streuung links ist Meter, rechts Zentimeter -- dieselbe
   Kurve, zwanzigfach kleiner. transform-box, damit die Verschiebung in
   Einheiten des viewBox rechnet und nicht in Pixeln. */
@keyframes dg-dash { to { stroke-dashoffset: -220; } }
@keyframes dg-jitter-wide {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-96px, 48px); } 25% { transform: translate(72px, -70px); }
  37% { transform: translate(110px, 52px); } 50% { transform: translate(-60px, -92px); }
  62% { transform: translate(46px, 96px); } 75% { transform: translate(-104px, -36px); }
  87% { transform: translate(36px, 42px); }
}
@keyframes dg-jitter-tight {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(6px, -5px); } 40% { transform: translate(-5px, 6px); }
  60% { transform: translate(5px, 4px); } 80% { transform: translate(-4px, -5px); }
}
.dg-jitter { transform-box: view-box; }
.diagram.is-running .dg-beam, .diagram.is-running .dg-corr { animation: dg-dash 2.6s linear infinite; }
.diagram.is-running .dg-flow { animation: dg-dash 2.2s linear infinite; }
.diagram.is-running .dg-jitter--wide { animation: dg-jitter-wide 7s linear infinite; }
.diagram.is-running .dg-jitter--tight { animation: dg-jitter-tight 3.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .diagram * { animation: none !important; }
}

/* Eine Kennwertzeile über beide Spalten – für Werte, die als Aufzählung
   kommen und in einer halben Spalte dreizeilig umbrechen würden. */
.spec-list__wide { grid-column: 1 / -1; }

/* Häufige Fragen im Fließtext. .faq bringt die Trennlinien und das Pluszeichen
   schon mit; hier steht nur, was im Artikel anders ist als im Abschnitt einer
   Marketingseite: linksbündig statt zentriert, eine Überschrift darüber. */
.prose-faq { margin-inline: 0; }
.prose-faq h3 { margin-bottom: .4rem; }
.prose-faq .faq__item summary { font-size: 1rem; }

/* Drohnenbeispiele unter einer Flugmuster-Abbildung. Die Aufschrift steht in
   derselben Zeile wie die Chips, solange Platz ist, und rutscht darüber,
   sobald es eng wird. */
.drone-examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; margin-top: .9rem; }
.drone-examples__label {
  color: var(--muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Drohnenfilter über den Flugmustern. Bleibt hidden, bis app.js ihn
   verdrahtet hat – ohne JS steht kein totes Bedienelement da. */
.drone-filter {
  display: grid; gap: .45rem; margin: 1.6rem 0 0;
  padding: 1rem 1.1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-alt);
}
/* Aufschrift, Info-Knopf und Suchfeld teilen sich eine Zeile, die Serien-Tags
   bekommen die zweite. Erst wenn es eng wird, rutscht das Feld unter die
   Aufschrift. */
.drone-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
.drone-filter__head { display: flex; align-items: center; gap: .3rem; }
.drone-filter__label { font-size: .78rem; font-weight: 700; color: var(--ink); }
.drone-filter__input {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; flex: 1 1 15rem; min-width: 0; max-width: 24rem;
}
.drone-filter__input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
/* Die Serien als Schnellwahl: ein Tag schreibt seinen Namen ins Suchfeld,
   ein zweiter Klick leert es wieder. Gedrueckt sieht es aus wie ein Treffer
   unter der Abbildung -- derselbe Verlauf wie .chip.is-match. */
.drone-filter__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip--tag { border: 0; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.chip--tag:hover { background: var(--petrol); color: #fff; }
.chip--tag[aria-pressed="true"] { background: var(--grad-orange); color: #fff; }
.chip--tag:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.drone-filter__hint { margin: 0; font-size: .8rem; color: var(--muted); }

/* Ein Flugmuster auf der Übersicht. Der Filter blendet den ganzen Abschnitt
   aus, deshalb die Klammer – die Abstände darin bleiben wie im Fließtext. */
.pattern-section > * + * { margin-top: 1.1rem; }
/* Die Verweise am Fuß des Abschnitts: Musterseite und, wo es eines gibt, das
   Video. Nebeneinander, solange Platz ist. */
.pattern-section__links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* Wegweiser über den Flugmustern: je Zeile Ziel, Muster, Ausschluss. Am
   Schreibtisch drei Spalten, auf dem Telefon untereinander. Die ganze Zeile
   ist der Link, damit niemand den Musternamen treffen muss. */
.pattern-guide { margin: 1.6rem 0; }
.pattern-guide__list { list-style: none; margin: .8rem 0 0; padding: 0; }
.pattern-guide__list li + li { border-top: 1px solid var(--line); }
.pattern-guide__row {
  display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: .2rem 1.2rem; align-items: baseline;
  padding: .75rem 0; color: var(--ink); text-decoration: none;
}
.pattern-guide__row:hover .pattern-guide__goal { color: var(--petrol); }
.pattern-guide__goal { font-weight: 700; }
.pattern-guide__name { font-weight: 700; }
/* .textlink ist inline-flex: bei einem zweizeiligen Namen stuende der Pfeil
   als eigene Spalte daneben. Inline laeuft er hinter dem letzten Wort mit. */
.pattern-guide__name.textlink { display: inline; }
.pattern-guide__name.textlink::after { margin-left: .35rem; }
.pattern-guide__not { color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) {
  .pattern-guide__row { grid-template-columns: 1fr; }
}

/* Modelle über der Vorschaugrenze liegen im Markup und sind nur ausgeblendet:
   der Filter holt genau das gewählte wieder hervor. */
.chip.is-overflow { display: none; }
.chip.is-overflow.is-revealed { display: inline-flex; }
.chip.is-match { background: var(--grad-orange); color: #fff; }
.drone-examples__more { font-size: .8rem; color: var(--muted); align-self: center; }

/* ---------- Drohnen im Vergleich (Wissen → Drohnen) ----------
   <DroneTable>, <CompareCards>, <Terms>, <FigureRow> aus src/components/prose/.
   Haken in Petrol auf Petrol-Hell wie in .checklist, nicht im Gruen von --ok:
   Gruen ist keine Airclip-Farbe (airclip-corporate-design.md). */

/* Freigestelltes Produktbild auf heller Flaeche; das Bild kommt aus dem Shop */
.product-plate {
  display: grid; place-items: center; max-width: 100%;
  aspect-ratio: 16 / 9; padding: 1rem 1.4rem;
  background: radial-gradient(ellipse at 50% 60%, var(--surface) 0%, var(--bg-alt) 70%);
  border-radius: var(--radius);
}
.product-plate img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(24,24,25,.16));
}

.compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.compare-card { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1rem 1.2rem; }
.compare-card--highlight { border-color: var(--petrol); }
.compare-card .chip { align-self: flex-start; }
/* div.compare-card statt .compare-card: die Regeln fuer den Artikelrumpf
   (.prose[data-astro-cid-…] h3, scoped in Article.astro) haben sonst dieselbe
   Spezifitaet, stehen spaeter und gewinnen. */
.compare-cards div.compare-card h3 { margin: 0; font-size: 1.15rem; }
.compare-cards div.compare-card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.compare-cards div.compare-card ul { margin: 0; font-size: .92rem; }

/* position: relative haelt die sr-only-Texte ("ja"/"nein") im Scrollrahmen
   der Tabelle, sonst machen sie die Seite auf dem Telefon breiter (wie bei
   .table-scroll). */
.drone-table { position: relative; }
.drone-table th, .drone-table td { vertical-align: middle; }
/* tr. aus demselben Grund wie div.compare-card oben */
.drone-table tr.drone-table__group th { background: var(--bg-tint); white-space: normal; padding: .55rem .8rem; }
.drone-table__family { display: flex; align-items: center; gap: .9rem; }
.drone-table__family img { width: 72px; height: 40px; object-fit: contain; flex: none; }
.drone-table__family strong { display: block; }
.drone-table__app { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); }
.drone-table__yes {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--petrol-light); color: var(--petrol); font-size: .8rem; font-weight: 800;
}
.drone-table__no { color: var(--muted); }
.drone-table__note { color: var(--petrol); font-weight: 700; font-size: .88rem; }

.term-list { display: grid; margin: 0; }
.term-list > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.term-list > div:first-child { border-top: 0; padding-top: 0; }
.term-list dt { font-weight: 700; color: var(--ink); }
.term-list dd { margin: 0; color: var(--body); line-height: 1.6; font-size: .95rem; }

.figure-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.figure-row .prose-figure { margin: 0; }
/* Eigene Regel fuers Bild: .prose-figure img steht scoped in Article.astro
   und greift nur beim Titelbild, nicht in einer Komponente. */
.figure-row img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

@media (max-width: 680px) {
  .term-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .figure-row { grid-template-columns: 1fr; }
}

/* ---------- Schnellstart-Anleitung (src/pages/de/wissen/schnellstart.astro) ----------
   Fuenf Schritte untereinander, je Schritt ein Abschnitt mit Nummer. Der
   Flugteil hat zwei Wege (DJI Fly, DJI Pilot 2); data-path am Rahmen blendet
   den anderen aus, sobald die Drohne feststeht (initGuide() in app.js). Ohne
   JS und im Druck steht alles da. Das Druckbild weiter unten ist zugleich das
   Layout der PDFs (scripts/make-guide-pdf.mjs). */
[data-guide][data-path="fly"] [data-only="pilot2"],
[data-guide][data-path="pilot2"] [data-only="fly"] { display: none !important; }

.guide-hero { padding-top: clamp(2.6rem, 5vw, 4.5rem); padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.guide-hero h1 { font-size: var(--h2); text-wrap: balance; }
.guide-hero h1 .accent { color: var(--orange-deep); }
.guide-hero__head { margin-bottom: 1.6rem; }
/* Schrittlinie: die Reihenfolge ist die Information. Unter 560px steht sie
   senkrecht, die Verbindung laeuft dann zwischen den Kreisen nach unten. */
.guide-nav { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 46rem; }
.guide-nav li { position: relative; }
.guide-nav li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(.95rem - 1px); left: calc(50% + 1.2rem); right: calc(-50% + 1.2rem);
  height: 2px; background: var(--orange-light); opacity: .45; border-radius: 2px;
}
.guide-nav a {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0 .2rem;
  text-align: center; color: var(--ink); font-weight: 600; font-size: .88rem; line-height: 1.3;
}
.guide-nav a:hover { color: var(--petrol); }
.guide-nav span {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--orange); color: var(--petrol); font-size: .82rem; font-weight: 700;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.guide-nav a:hover span, .guide-nav a:focus-visible span { background: var(--grad-orange); border-color: transparent; color: #fff; }
@media (max-width: 560px) {
  .guide-nav { grid-template-columns: minmax(0, 1fr); gap: .5rem; max-width: 16rem; }
  .guide-nav a { flex-direction: row; text-align: left; gap: .7rem; }
  .guide-nav li:not(:last-child)::after { top: 1.9rem; bottom: -.5rem; left: calc(.95rem - 1px); right: auto; width: 2px; height: auto; }
}
.guide-pdf { margin: 1.4rem 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.guide-pdf a { color: var(--muted); }
.guide-pdf a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: .2em; }
.guide-pdf svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: .3rem; color: var(--petrol); }

.guide-step { scroll-margin-top: 5rem; }
.guide-step__body { max-width: 960px; }
.guide-step__body > p { max-width: 68ch; }
.guide-step__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.guide-step__head h2 { margin: 0; font-size: var(--h3); }
.guide-step__num {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-orange); color: #fff; font-weight: 700; font-size: 1.25rem; box-shadow: var(--shadow-orange);
}
.guide-picker { margin-top: 1rem; max-width: 40rem; }
.guide-prep .card h3 { font-size: 1.1rem; }
.guide-prep .checklist { margin: 0; padding: 0; list-style: none; }
.guide-more { margin: 1rem 0 0; }

.guide-rules { padding: clamp(1.2rem, 2.5vw, 1.8rem); background: var(--grad-orange-soft); border-radius: var(--radius-lg); margin-bottom: 2rem; }
.guide-rules h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.guide-rules ol { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .35rem; }
.guide-rules p { margin: 0; }

.guide-path + .guide-path { margin-top: 2.5rem; }
.guide-path__title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.25rem; }

.method-tabs__list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.method-tabs__tab {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  padding: .5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--petrol);
}
.method-tabs__tab:hover { border-color: var(--petrol); }
.method-tabs__tab[aria-selected="true"] { background: var(--grad-orange); border-color: transparent; color: #fff; }
.method-tabs.is-tabbed > .method.is-inactive { display: none; }
.method { margin-top: 1.4rem; }
.method-tabs.is-tabbed > .method { margin-top: 0; }
.method-tabs.is-tabbed .method__title { font-size: 1.15rem; }
.method__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: 1rem 0 1.4rem; }
.method__facts div { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; }
.method__facts dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--petrol); }
.method__facts dd { margin: .15rem 0 0; font-weight: 600; color: var(--ink); font-size: .95rem; }

.guide-steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: gstep; display: grid; gap: 1.4rem; }
.guide-steps > li {
  counter-increment: gstep; position: relative; padding-left: 2.6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start;
}
.guide-steps > li:not(:has(.shot)) { grid-template-columns: minmax(0, 1fr); }
.guide-steps > li::before {
  content: counter(gstep); position: absolute; left: 0; top: .1rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--petrol-light); color: var(--petrol); font-weight: 700; font-size: .85rem;
}
.guide-steps h4 { margin: .15rem 0 .35rem; font-size: 1.02rem; }
.guide-steps p { margin: 0 0 .5rem; }
@media (max-width: 820px) { .guide-steps > li { grid-template-columns: minmax(0, 1fr); } }

.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.shot figcaption { font-size: .82rem; color: var(--muted); margin-top: .35rem; }
.shot__slot {
  aspect-ratio: 16 / 9; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; padding: 1rem;
}
.shot__alt { font-size: .82rem; color: var(--muted); }

.pitfalls { margin: 1.6rem 0 1rem; padding: 1rem 1.2rem; background: #fff3e2; border-radius: var(--radius); }
.pitfalls h4 { margin: 0 0 .4rem; font-size: .95rem; color: #8a3a12; }
.pitfalls ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; list-style: disc; }
.pitfalls li { color: var(--body); }

.video-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--petrol); margin-top: .4rem; }
.video-link svg { width: 1.6rem; height: 1.6rem; flex: none; }
.video-link__at { font-weight: 400; color: var(--muted); }
.guide-print-only { display: none; }
.guide-keys { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; list-style: disc; font-size: .95rem; }
.guide-table { margin: .4rem 0 .8rem; display: grid; gap: .4rem; }
.guide-table div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .8rem; padding: .55rem .8rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.guide-table dt { font-weight: 700; color: var(--ink); }
.guide-table dd { margin: 0; color: var(--body); }
@media (max-width: 620px) { .guide-table div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }
.guide-software { margin-top: 2rem; max-width: 40rem; }
#auswerten .method__head { margin: 0 0 .5rem; }

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html, body { background: #fff; font-size: 10.5pt; }
  .site-header, .site-footer, .guide-nav, .guide-pdf, .guide-picker, .guide-step__body > p.guide-step__lead,
  .guide-cta, .method-tabs__list, .skip-link { display: none !important; }
  .guide-print-only { display: block; }
  .section { padding: 10pt 0 !important; background: #fff !important; }
  .guide-hero { padding-top: 0 !important; }
  .guide-hero__stamp { font-size: 9pt; color: var(--muted); }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card, .shot img { box-shadow: none !important; }
  .method-tabs.is-tabbed > .method.is-inactive { display: block; }
  /* Kein Seitenumbruch je Schritt: das liess halbe Seiten leer. Nur der
     Flugteil beginnt auf einer neuen Seite, und keine Ueberschrift bleibt
     allein unten stehen. */
  #fliegen { break-before: page; }
  h2, h3, h4, .guide-step__head { break-after: avoid; }
  .method-tabs > .method + .method { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .method__facts { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .guide-steps > li, .pitfalls, .method__facts, .card, .faq__item { break-inside: avoid; }
  .guide-steps > li { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .shot img, .shot__slot { max-height: 6.2cm; width: auto; max-width: 100%; }
  /* Auf Papier zaehlt die Adresse: sie steht in einer eigenen Zeile, statt
     in schmalen Karten den Linktext zu zerreissen. */
  .video-link { display: block; }
  .video-link svg { display: none; }
  .video-link::after { content: attr(data-print-url); display: block; font-weight: 400; color: var(--muted); }
  .faq__item summary::after { display: none; }
}

/* ---------- Feldanleitungen (src/layouts/FieldGuide.astro) ----------
   Druckboegen fuer die PDFs zum Mitnehmen, nach dem Airclip-CD: Kopfband im
   Signatur-Verlauf mit weissem Titel in Bold Italic und weissem Logo,
   Zwischenueberschriften in Petrol. Am Bildschirm ein A4-Blatt, damit man
   sieht, was gedruckt wird. Seitenraender macht @page; die Seiten haben links
   und rechts keinen Rand, damit das Kopfband bis an die Kante geht -- der
   Abstand zum Text sitzt deshalb in .fg-body. */
body.fg { background: var(--bg-alt); }
.fg-band, .fg-body { max-width: 210mm; margin-inline: auto; }
.fg-band {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm;
  padding: 12mm 14mm 10mm; background: linear-gradient(90deg, #f59500 0%, #ee6428 100%); color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fg-band__eyebrow { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.fg-band h1 { margin: .35rem 0 .5rem; color: #fff; font-style: italic; font-weight: 700; font-size: 1.9rem; line-height: 1.15; }
.fg-band p { margin: 0; color: #fff; max-width: 125mm; font-size: .95rem; }
.fg-band__logo { flex: none; width: 46mm; height: auto; margin-top: 1mm; }
.fg-body { background: #fff; padding: 2mm 14mm 10mm; }
.fg-section h2 { color: var(--petrol); font-size: 1.3rem; margin: 7mm 0 3mm; padding-bottom: 1.5mm; border-bottom: 2px solid var(--petrol-light); }
.fg-section--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7mm; align-items: start; }
.fg-section--split .guide-rules { margin: 7mm 0 0; }
.fg .checklist { list-style: none; margin: 0; padding: 0; }
.fg .checklist li { margin-top: .5rem; font-size: .92rem; }
.fg .guide-rules { padding: 5mm 6mm; }
.fg .guide-rules h3 { font-size: 1rem; color: var(--petrol-dark); }
.fg .guide-rules li { font-size: .92rem; }
.fg-plain { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .92rem; }
.fg .method { margin-top: 0; }
.fg .method__title { font-size: 1.05rem; color: var(--ink); }
.fg .method__facts { grid-template-columns: repeat(auto-fit, minmax(30mm, 1fr)); margin: 3mm 0 5mm; }
.fg .method__facts div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fg .guide-steps { gap: 5mm; }
.fg .guide-steps > li { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 5mm; }
.fg .guide-steps > li:not(:has(.shot)) { grid-template-columns: minmax(0, 1fr); }
.fg .guide-steps h4 { font-size: .98rem; }
.fg .guide-steps p { font-size: .9rem; }
.fg .shot img { box-shadow: none; border: 1px solid var(--line); }
.fg .shot figcaption { color: var(--petrol); font-weight: 600; font-size: .75rem; }
.fg .pitfalls, .fg .guide-rules, .fg .guide-steps > li::before, .fg .guide-nav span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fg-note { margin: 5mm 0 0; padding: 3.5mm 5mm; background: var(--petrol-light); border-radius: var(--radius); font-size: .88rem; color: var(--petrol-dark); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media (max-width: 760px) {
  .fg-band { flex-direction: column-reverse; padding: 8mm 6mm; }
  .fg-body { padding-inline: 6mm; }
  .fg-section--split, .fg .guide-steps > li { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  /* Benannte Seite: die Raender gelten nur fuer die Feldanleitungen, nicht
     fuer jede gedruckte Seite der Website. */
  @page fieldguide { size: A4; margin: 14mm 0 16mm; }
  @page fieldguide:first { margin-top: 0; }
  body.fg { page: fieldguide; background: #fff; font-size: 10pt; }
  .fg-band, .fg-body { max-width: none; }
  .fg-section h2, .fg .method__head, .fg .method__facts { break-after: avoid; }
  .fg .method__facts { break-inside: avoid; }
  .fg .guide-steps > li { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .fg .shot img, .fg .shot__slot { max-height: 62mm; }
}

/* ---------- Terminbuchung (Booking.astro, initBooking() in app.js) ----------
   Port des Widgets aus scripts-collection/sales_booking, auf die Tokens und
   Chips dieser Seite gesetzt. Die Schrittnummern zaehlt CSS: versteckte
   Schritte (ein einziger Ansprechpartner) zaehlen damit nicht mit. */
.booking { padding: 0; overflow: hidden; scroll-margin-top: 6rem; }
/* Das Formular waechst beim Ausfuellen; die Textspalte daneben soll dabei
   oben stehen bleiben, statt mittig mitzuwandern. */
.hero__grid:has(.booking) { align-items: start; }
.booking__head { background: var(--grad-orange); color: #fff; padding: 1.1rem 1.4rem; font-weight: 700; }
.booking__body { padding: 1.4rem; min-height: 340px; }
.booking__form { display: flex; flex-direction: column; gap: 1.3rem; counter-reset: booking-step; }
.booking__step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.booking__step[hidden] { display: none; }
.booking__title { display: flex; align-items: center; gap: .55rem; padding: 0; margin-bottom: .7rem; font-weight: 700; color: var(--ink); counter-increment: booking-step; }
.booking__title::before {
  content: counter(booking-step); display: inline-grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--petrol); color: #fff; font-size: .85rem;
}
.booking__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.booking__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); gap: .5rem; }
.booking__slots .chip { justify-content: center; }
.booking .chip--tag[aria-checked="true"] { background: var(--grad-orange); color: #fff; }
.booking__hint { color: var(--muted); font-size: .82rem; margin: 0; }
.booking__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.booking__opt { font-weight: 400; color: var(--muted); }
.booking textarea {
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink);
  background: #fff; resize: vertical;
}
.booking textarea:focus { border-color: var(--petrol); outline: none; }
.booking__radio { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; cursor: pointer; }
.booking__radio input { accent-color: var(--petrol); padding: 0; }
.booking__captcha:empty { display: none; }
.booking__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-radius: 10px; background: var(--petrol-light); color: var(--petrol-dark); font-weight: 700;
}
.booking__summary[hidden] { display: none; }
.booking__change {
  flex: none; border: 1px solid var(--petrol); border-radius: var(--radius-pill); background: #fff; color: var(--petrol);
  padding: .3rem .9rem; font: inherit; font-weight: 600; cursor: pointer;
}
.booking__change:hover { background: var(--petrol); color: #fff; }
.booking__change:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.booking__loading { display: flex; align-items: center; gap: .5rem; color: var(--muted); margin: 0; }
.booking__spinner {
  width: 1em; height: 1em; flex: none; border-radius: 50%;
  border: 2px solid var(--petrol); border-right-color: transparent; animation: booking-spin .8s linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking__spinner { animation: none; } }
.booking__error { border-left: 4px solid var(--orange-dark); padding: .6rem .9rem; color: var(--body); background: #fff5ec; font-weight: 600; }
.booking__done { text-align: center; padding: 1.5rem 0; }
.booking__done .card__icon { margin-inline: auto; }
.booking__fallback { display: grid; place-items: center; min-height: 300px; margin: 0; }
.booking__fallback[hidden], .booking__done[hidden], .booking__error[hidden], .booking__loading[hidden] { display: none; }

/* ---------- Buchungszeiten pflegen (/team/buchungszeiten, team-hours.js) ---------- */
.hours-page { background: var(--bg-alt); }
.hours__title { font-size: var(--h2); margin: 1.4rem 0 .6rem; }
.hours__hint, .hours__who, .hours__loading, .hours__empty { color: var(--muted); }
.hours__who { margin-top: 1rem; }
.hours { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.hours__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hours__name { margin: 0; font-size: var(--h3); }
.hours__toggle, .hours__toggle input { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--ink); cursor: pointer; accent-color: var(--petrol); }
.hours__toggle input { width: 1.1rem; height: 1.1rem; }
.hours__settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.hours__days { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.hours__day {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .5rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.hours__dayname { font-weight: 700; color: var(--ink); }
.hours__ranges { display: flex; flex-direction: column; gap: .4rem; }
.hours__ranges:empty { display: none; }
.hours__off { color: var(--muted); }
.hours__off[hidden] { display: none; }
.hours__range { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hours__range input {
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: #fff;
}
.hours__range input:focus { border-color: var(--petrol); outline: none; }
.hours__remove, .hours__add {
  border: 1px solid var(--line); background: #fff; color: var(--petrol); border-radius: var(--radius-pill);
  font: inherit; font-weight: 600; cursor: pointer; padding: .3rem .8rem;
}
.hours__remove { padding: .2rem .6rem; line-height: 1.2; }
.hours__remove:hover, .hours__add:hover { border-color: var(--petrol); background: var(--petrol-light); }
.hours__remove:focus-visible, .hours__add:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.hours__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hours__status { font-weight: 600; color: var(--petrol-dark); }
.hours__status.is-error { color: var(--body); border-left: 4px solid var(--orange-dark); padding-left: .6rem; }
.hours__meta { color: var(--muted); font-size: .88rem; margin: 0; }
.hours__meta[hidden], .hours__who[hidden], .hours__empty[hidden], .hours__loading[hidden] { display: none; }
@media (max-width: 560px) {
  .hours__day { grid-template-columns: 1fr auto; }
  .hours__ranges, .hours__off { grid-column: 1 / -1; grid-row: 2; }
}
.hours__head .hours__meta { margin-top: .2rem; }
.hours__addrep { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.hours__addrep[hidden] { display: none; }
.hours__addrep .field { flex: 1 1 18rem; margin-bottom: 0; }
.hours__delete {
  margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: .9rem;
  text-decoration: underline; cursor: pointer; padding: .3rem 0;
}
.hours__delete:hover { color: var(--orange-deep); }
.hours__delete:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.hours__delete[hidden], [data-hours-admin][hidden], [data-addrep-none][hidden] { display: none; }