/* ==========================================================================
   Aventa CRM — Marketing-Website
   --------------------------------------------------------------------------
   Das visuelle System ist von attio.com übernommen, nicht geschätzt: die
   Werte unten sind auf deren Seite gemessen worden.

     Grund            #ffffff, rein weiss
     Schrift          #1c1d1f, gedämpft #6f7988, Rahmen #d3d8df
     Schriftfamilie   Inter (Fliesstext und Überschriften), JetBrains Mono
     Fliesstext       16px / 22px — enger Durchschuss, Gewicht 400
     Bedienelemente   14px / Gewicht 500 — das mit Abstand häufigste Paar
     h1               64px / 600 / -0,02em / Zeilenhöhe 0,95
     h2               40px / 500 / -0,01em
     Auszeichnung     12px / 600 / +0,06em, Grossbuchstaben
     Schaltfläche     #202124 auf #f3f4f6, Radius 10px, Höhe 36px
     Karte            1px Rahmen, Radius 12px, weiss, ohne Schatten
     Abschnitt        152px oben / 112px unten
     Satzspiegel      ~1390px

   Was daraus folgt und beim Ändern nicht verhandelbar ist: mittlere
   Schriftgewichte statt fetter, kleine Radien statt Pillen, enger
   Durchschuss, und Farbe ausschliesslich innerhalb der Produktdarstellung.
   Die Seite selbst bleibt grau. Eine Auszeichnungsfarbe auf der Fläche
   zerstört genau den Eindruck, wegen dem hier Attio steht.
   ========================================================================== */

/* ── Schriften ─────────────────────────────────────────────────────────────
   Selbst ausgeliefert statt über Google Fonts: ein Aufruf an
   fonts.gstatic.com überträgt die IP-Adresse jeder Besucherin an einen
   Dritten, und das ist in Österreich und Deutschland bereits Gegenstand von
   Verfahren gewesen. Alle drei Familien stehen unter der SIL Open Font
   License 1.1. Orbitron bleibt — aber nur noch für die Wortmarke, weil das
   die Marke ist und nicht die Typografie. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/mono-500.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/orbitron-700.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --paper:     #ffffff;
  --paper-2:   #f7f8f9;
  --card:      #ffffff;
  --line:      #e5e8ec;
  --line-2:    #d3d8df;

  --ink:       #1c1d1f;
  --ink-2:     #45484d;
  --muted:     #6f7988;

  --btn:       #202124;
  --btn-2:     #35373b;
  --btn-ink:   #f3f4f6;

  /* Farbe existiert — aber nur in der Produktdarstellung, so wie bei Attio
     die Farbe ausschliesslich in den Oberflächen-Ausschnitten vorkommt. */
  --ok:        #15803d;  --ok-bg:   #eaf6ee;  --ok-line:  #c9e5d3;
  --warn:      #a16207;  --warn-bg: #fbf3e2;  --warn-line:#ecdcb4;
  --bad:       #b42318;  --bad-bg:  #fdeceb;  --bad-line: #f4cdc9;
  --info:      #3f4a5a;  --info-bg: #f0f2f5;  --info-line:#dde1e7;

  --r-card: 12px;
  --r-btn:  10px;
  --r-sm:   8px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --logo: "Orbitron", var(--sans);

  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { margin: 0; }
h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 600; letter-spacing: -.022em; line-height: .98; }
h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -.014em; line-height: 1.1; }
h3 { font-size: 20px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; }
h4 { font-size: 16px; font-weight: 600; letter-spacing: -.006em; }
p  { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 720px; }
.center { text-align: center; }

.lede  { font-size: 18px; line-height: 1.45; color: var(--muted); font-weight: 400; }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tiny  { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── Wortmarke ───────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-tile {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--ink); color: #fff;
  font-family: var(--logo); font-weight: 700; font-size: 13px; line-height: 1;
}
.brand-text { font-family: var(--logo); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.brand-text .suffix {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; color: var(--muted); margin-left: 6px;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar-in { height: 60px; display: flex; align-items: center; gap: 24px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nav a {
  text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2);
  padding: 7px 11px; border-radius: var(--r-sm); white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.topbar-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.navtoggle {
  display: none; margin-left: auto;
  width: 36px; height: 36px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--card);
  align-items: center; justify-content: center; cursor: pointer;
}
.navtoggle span { display: block; width: 15px; height: 1.5px; background: var(--ink); position: relative; }
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--ink);
}
.navtoggle span::before { top: -5px; } .navtoggle span::after { top: 5px; }

/* ── Schaltflächen ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-2); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); background: var(--paper-2); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }

.arrowlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 14px; text-decoration: none; color: var(--ink);
}
.arrowlink .arw { transition: transform .15s ease; opacity: .6; }
.arrowlink:hover .arw { transform: translateX(3px); opacity: 1; }

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
section { padding: 112px 0; }
section.tight { padding: 72px 0; }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.eyebrow .no { font-family: var(--mono); font-weight: 400; margin-right: 8px; opacity: .8; }
/* Die semantischen Klassen aus der ersten Fassung bleiben gültig, färben
   aber nichts mehr ein — Auszeichnungen sind jetzt durchgehend grau. */
.eyebrow.teal, .eyebrow.amber, .eyebrow.clay, .eyebrow.slate { color: var(--muted); }

.sec-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.sec-head p { margin-top: 14px; }

/* ── Karten ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  transition: border-color .18s ease, background .18s ease;
}
.card:hover { border-color: var(--line-2); }
.card-tint { background: var(--paper-2); border-color: var(--line); }
.tint-teal, .tint-amber, .tint-clay, .tint-slate { background: var(--paper-2); border-color: var(--line); }
.tint-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.tint-ink p, .tint-ink .small { color: #9aa1ab; }

.chip {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip svg { width: 16px; height: 16px; }
.chip-teal, .chip-amber, .chip-clay, .chip-slate, .chip-ink { background: var(--paper-2); color: var(--ink-2); }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 72px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; margin-bottom: 26px;
  transition: border-color .15s ease;
}
.hero-badge:hover { border-color: var(--line-2); }
.hero-badge b { color: var(--ink); font-weight: 600; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.hero h1 { max-width: 900px; margin: 0 auto; }
.hero .lede { max-width: 560px; margin: 20px auto 0; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hero-note { margin-top: 14px; }

.proof { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.proof-item { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.proof-item svg { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* ── Produkt-Skizze ──────────────────────────────────────────────────────── */
/* Hier — und nur hier — kommt Farbe vor. */
.shot {
  text-align: left;
  margin-top: 56px; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--card);
  box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 8px 24px -12px rgba(16,24,40,.10);
}
.shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.shot-bar .url { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.shot-body { display: grid; grid-template-columns: 196px 1fr; min-height: 330px; }
.shot-rail { border-right: 1px solid var(--line); padding: 14px 10px; background: var(--card); }
.shot-rail .row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 6px; font-size: 13px; color: var(--ink-2); font-weight: 450;
}
.shot-rail .row.on { background: var(--paper-2); color: var(--ink); font-weight: 500; }
.shot-rail .row .sq { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .22; flex: none; }
.shot-rail .row.on .sq { opacity: .5; }
.shot-rail .grp {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 5px 9px; font-weight: 500;
}
.shot-main { padding: 18px; background: var(--paper-2); }
.shot-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shot-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.shot-tile .k { font-size: 12px; color: var(--muted); font-weight: 500; }
.shot-tile .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.shot-tile .d { font-size: 12px; margin-top: 2px; color: var(--muted); }
.shot-tile .d.up { color: var(--ok); } .shot-tile .d.warn { color: var(--warn); }
.shot-panel { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.shot-panel h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: -.006em; }
.shot-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.shot-line:first-of-type { border-top: 0; }
.shot-line .pill {
  font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: 500;
  margin-left: auto; white-space: nowrap; border: 1px solid transparent;
}
.pill-teal  { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.pill-amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pill-clay  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad-line); }
.pill-slate, .shot-line .pill:not([class*="pill-"]) { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }

/* ── Kennzahlenband ──────────────────────────────────────────────────────── */
.band {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper-2); padding: 36px;
}
.band .g4 { gap: 24px; }
.band .n { font-size: 30px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.band .t { color: var(--muted); font-size: 14px; margin-top: 5px; }

/* ── Feature-Zeilen ──────────────────────────────────────────────────────── */
.rowfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Eine Funktionszeile ist ein eigener Abschnitt, kein Kartentitel — bei Attio
   stehen diese Überschriften in derselben Grösse wie die Abschnittstitel. */
.rowfeat h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.rowfeat .lede { font-size: 17px; }
.rowfeat + .rowfeat { margin-top: 112px; }
.rowfeat.flip .rf-media { order: -1; }
.rf-media {
  border-radius: var(--r-card); padding: 24px; min-height: 280px;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.ticklist { list-style: none; margin: 22px 0 0; padding: 0; }
.ticklist li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 15px; color: var(--ink-2); }
.ticklist svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--muted); }

/* ── Abschnittsleiste (die eine Attio-Eigenheit, die hier etwas nützt) ───── */
.secnav {
  position: sticky; top: 60px; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.secnav-in {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 32px; max-width: var(--wrap); margin: 0 auto;
}
.secnav-in::-webkit-scrollbar { display: none; }
.secnav a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.secnav a:hover { color: var(--ink); background: var(--paper-2); }
.secnav a .no { font-family: var(--mono); font-size: 12px; font-weight: 400; opacity: .65; }
.secnav a.on { color: var(--ink); background: var(--paper-2); }
.secnav a.on .no { opacity: 1; }
.rowfeat[id] { scroll-margin-top: 130px; }

/* ── Preise ──────────────────────────────────────────────────────────────── */
.toggle {
  display: inline-flex; padding: 3px; border-radius: var(--r-btn);
  background: var(--paper-2); border: 1px solid var(--line); gap: 2px;
}
.toggle button {
  border: 0; background: transparent; border-radius: 7px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer;
  font-family: inherit; transition: background .15s ease, color .15s ease;
}
.toggle button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.toggle .save { font-size: 12px; color: var(--ok); margin-left: 6px; font-weight: 500; }

.pricecard { max-width: 420px; margin: 0 auto; position: relative; }
.pricecard .amount { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 4px; }
.pricecard .amount .num { font-size: 44px; font-weight: 600; letter-spacing: -.03em; }
.pricecard .amount .per { font-size: 14px; color: var(--muted); }
.ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.cmp th, table.cmp td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
table.cmp td:last-child, table.cmp th:last-child { text-align: right; width: 150px; }
table.cmp tr.grp td {
  background: var(--paper-2); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--line); padding: 18px 2px; }
details.faq:first-of-type { border-top: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; font-weight: 500; font-size: 16px; list-style: none;
  display: flex; align-items: center; gap: 14px; letter-spacing: -.008em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--muted); line-height: 1;
}
details.faq[open] summary::after { content: "–"; }
details.faq .body { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.55; }
details.faq .body p + p { margin-top: 10px; }

/* ── Abschluss-Aufruf ────────────────────────────────────────────────────── */
.finale {
  background: var(--ink); color: #fff; border-radius: 16px;
  padding: 72px 40px; text-align: center;
}
.finale h2 { color: #fff; }
.finale p { color: #9aa1ab; max-width: 480px; margin: 16px auto 0; font-size: 17px; }
.finale .btn-primary { background: #fff; color: var(--ink); }
.finale .btn-primary:hover { background: #e8eaed; }
.finale .btn-ghost { background: transparent; color: #fff; border-color: #3c3f44; }
.finale .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: #55585e; }

/* ── Fusszeile ───────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 24px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px; }
.foot-grid h5 {
  margin: 0 0 12px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: 8px; }
.foot-grid a { text-decoration: none; font-size: 14px; color: var(--muted); }
.foot-grid a:hover { color: var(--ink); }
.foot-base {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.foot-base .small { margin-right: auto; }

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.legal { max-width: 720px; }
.legal h2 { font-size: 22px; margin-top: 36px; font-weight: 600; letter-spacing: -.01em; }
.legal h3 { font-size: 17px; margin-top: 24px; }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.legal p + p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.todo {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--r-card); padding: 16px 18px; color: #6b4c0e; font-size: 14.5px; line-height: 1.55;
}
.ph { background: #f0e2c2; padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: .86em; }

/* ── Bewegung ────────────────────────────────────────────────────────────── */
/* Keine. Inhalte stehen da, wenn die Seite da ist — nichts blendet beim
   Scrollen ein oder aus. Es bleiben nur die Zustandswechsel, die eine
   Handlung beantworten: Zeigen, Klicken, Tastaturfokus.

   Das ist zugleich die robusteste Fassung: ein Block, der nie eingeblendet
   wird, weil ein Beobachter ihn übersprungen hat, kann es nicht mehr geben. */

@media (prefers-reduced-motion: reduce) {
  .arrowlink:hover .arw { transform: none; }
  .btn, .card, .nav a, .secnav a, .toggle button, .topbar { transition: none; }
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rowfeat { grid-template-columns: 1fr; gap: 28px; }
  .rowfeat.flip .rf-media { order: 0; }
  .rowfeat + .rowfeat { margin-top: 64px; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-body { grid-template-columns: 1fr; }
  .shot-rail { display: none; }
  .shot-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  section { padding: 64px 0; }
  .hero { padding: 56px 0 48px; }
  .wrap { padding: 0 20px; }
  .secnav-in { padding: 8px 20px; }
  .nav, .topbar-cta { display: none; }
  .navtoggle { display: flex; }
  .topbar.open .nav {
    display: flex; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 1px;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 10px; margin: 0;
  }
  .topbar.open .nav a { padding: 11px; font-size: 15px; }
  .topbar.open .topbar-cta {
    display: flex; position: absolute; top: 60px; left: 0; right: 0;
    transform: translateY(calc(100% + 10px));
    flex-direction: column; padding: 0 10px 14px; background: var(--card);
    border-bottom: 1px solid var(--line); z-index: 1;
  }
  .topbar.open .topbar-cta .btn { width: 100%; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .band { padding: 24px; }
  .finale { padding: 48px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .rowfeat[id] { scroll-margin-top: 120px; }
}