/* Palmora – Drohnenvideos aus dem Bregenzerwald
   Farben: Nebel (Hintergrund), Fichte (Text, dunkle Flächen), Schiefer (Nebentext),
   Schindel (Linien), Enzian (Akzent für Aktionen). */

@font-face { font-family: "Grotesk"; src: url(fonts/grotesk-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Grotesk"; src: url(fonts/grotesk-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Grotesk"; src: url(fonts/grotesk-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --nebel: #F2F3EF;
  --nebel-tief: #E6E8E2;
  --fichte: #1C2B25;
  --fichte-hell: #2A3B34;
  --schiefer: #56635D;
  --schindel: #CBCFC6;
  --enzian: #2747C9;
  --enzian-dunkel: #1C36A3;
  --enzian-hell: #A9B8FF;
  --weiss: #FFFFFF;

  --schrift: "Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --breite: 1180px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(72px, 11vw, 140px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nebel);
  color: var(--fichte);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.25; }

:focus-visible { outline: 2px solid var(--enzian); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--weiss); padding: 8px 14px; border-radius: var(--radius); }
.skip:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 1rem/1 var(--schrift); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn-enzian { background: var(--enzian); color: var(--weiss); }
.btn-enzian:hover { background: var(--enzian-dunkel); }
.btn-linie { border-color: currentColor; background: transparent; }
.btn-linie:hover { background: rgba(255,255,255,.12); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  color: var(--weiss);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.kopf.fest { background: rgba(242,243,239,.94); color: var(--fichte); box-shadow: 0 1px 0 var(--schindel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.marke svg { width: 28px; height: 28px; flex: none; }
.kopf nav { display: flex; align-items: center; gap: 28px; }
.kopf nav a:not(.btn) { text-decoration: none; font-size: .975rem; opacity: .85; }
.kopf nav a:not(.btn):hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.kopf .btn { min-height: 40px; padding: 0 18px; font-size: .95rem; }
.kopf:not(.fest) .btn-enzian { background: var(--weiss); color: var(--fichte); }
@media (max-width: 760px) { .kopf nav a:not(.btn) { display: none; } }

/* ---------- Medien-Plätze ---------- */
/* Jeder Platz versucht seine Datei zu laden. Fehlt sie, bekommt er die Klasse "leer". */
.platz { position: relative; overflow: hidden; background: var(--fichte) url(hoehenlinien.svg) center / cover no-repeat; }
.platz > img, .platz > video { width: 100%; height: 100%; object-fit: cover; }
.platz.leer > img, .platz.leer > video { visibility: hidden; }
.platz-hinweis { display: none; }
.zeige-plaetze .platz.leer .platz-hinweis {
  display: flex; position: absolute; inset: 12px; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed rgba(255,255,255,.55); border-radius: var(--radius);
  color: var(--weiss); font-size: .9rem; line-height: 1.4; padding: 12px; background: rgba(28,43,37,.35);
}
.zeige-plaetze .platz.leer .platz-hinweis b { display: block; font-weight: 600; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--weiss); background: var(--fichte); }
.hero .platz { position: absolute; inset: 0; }
.hero .platz picture, .hero .platz picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .platz .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.hero .platz .hero-video.laeuft { opacity: 1; }
.hero .platz.leer picture { visibility: hidden; }
.hero .platz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,43,37,.55) 0%, rgba(28,43,37,.1) 35%, rgba(28,43,37,.35) 60%, rgba(28,43,37,.88) 100%); pointer-events: none; }
.zeige-plaetze .hero .platz.leer .platz-hinweis { inset: 84px 16px auto auto; width: 240px; height: auto; }
.hero-inhalt { position: relative; z-index: 1; padding-top: 140px; padding-bottom: clamp(40px, 7vw, 80px); }
.hero h1 { font-size: clamp(2.75rem, 8.4vw, 6.5rem); line-height: .98; letter-spacing: -0.035em; max-width: 11ch; }
.hero .lead { max-width: 34rem; margin: 24px 0 32px; font-size: clamp(1.075rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.9); }
.hero-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero-preis { margin: 0; font-size: .975rem; color: rgba(255,255,255,.85); }
.hero-preis b { color: var(--weiss); font-weight: 600; }
.hero-fakten { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.25); font-size: .9rem; color: rgba(255,255,255,.8); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt-kopf { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 44rem; }
.abschnitt-kopf p { margin: 0; color: var(--schiefer); font-size: 1.1rem; }

/* ---------- Arbeiten ---------- */
.arbeiten-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.clip { margin: 0; }
.clip .platz { aspect-ratio: 9 / 16; border-radius: var(--radius); cursor: pointer; }
.clip figcaption { padding-top: 12px; font-size: .95rem; }
.clip figcaption span { display: block; color: var(--schiefer); font-size: .875rem; }
.clip-ton { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(28,43,37,.6); color: var(--weiss); display: grid; place-items: center; cursor: pointer; }
.clip .platz.leer .clip-ton { display: none; }
@media (max-width: 760px) {
  .arbeiten-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--rand) * -1); padding-right: var(--rand); scrollbar-width: none; }
  .arbeiten-liste::-webkit-scrollbar { display: none; }
  .arbeiten-liste > li { scroll-snap-align: start; }
}
/* Ohne Videos wird der ganze Bereich ausgeblendet, damit die Seite fertig wirkt. */
.arbeiten.alle-leer { display: none; }
.zeige-plaetze .arbeiten.alle-leer { display: block; }
.zeige-plaetze .clip .platz.leer + figcaption { opacity: .5; }
/* Einzelne fehlende Clips ausblenden, solange die Platzhalter nicht angezeigt werden */
html:not(.zeige-plaetze) .arbeiten-liste > li:has(.platz.leer) { display: none; }

/* ---------- Leistungen ---------- */
.leistungen { background: var(--weiss); }
/* Foto in voller Breite (16:9) oben, Text darunter in zwei Spalten */
.leistungen-raster { display: grid; gap: clamp(36px, 5vw, 64px); }
.leistungen-bild { aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); }
.leistungen-text { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.leistungen-text .abschnitt-kopf { margin-bottom: 0; }
.leistungen-raster.ohne-bild .leistungen-bild { display: none; }
.zeige-plaetze .leistungen-raster.ohne-bild .leistungen-bild { display: block; }
.leistung { padding: 28px 0; border-top: 1px solid var(--schindel); }
.leistung:last-of-type { border-bottom: 1px solid var(--schindel); }
.leistung p { margin: 10px 0 0; color: var(--schiefer); }
.fuer-wen { margin: 32px 0 0; color: var(--schiefer); }
.fuer-wen b { color: var(--fichte); font-weight: 600; }
@media (max-width: 860px) {
  .leistungen-text { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Ablauf ---------- */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { counter-increment: schritt; position: relative; padding-top: 64px; }
.schritte li::before {
  content: counter(schritt); position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nebel); border: 1.5px solid var(--fichte); font-weight: 600; z-index: 1;
}
.schritte li::after { content: ""; position: absolute; top: 20px; left: 48px; right: -16px; border-top: 1.5px dashed var(--schindel); }
.schritte li:last-child::after { display: none; }
.schritte p { margin: 10px 0 0; color: var(--schiefer); }
.ablauf-dauer { margin-top: 40px; color: var(--schiefer); }
@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; gap: 0; }
  .schritte li { padding: 0 0 36px 64px; }
  .schritte li::after { top: 48px; bottom: 8px; left: 20px; right: auto; border-top: 0; border-left: 1.5px dashed var(--schindel); }
}

/* ---------- Preis ---------- */
.preis { background: var(--nebel-tief); }
.preis-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.preis-karte { background: var(--weiss); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.preis-zahl { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 4px; }
.preis-zahl span { font-size: 1.25rem; color: var(--schiefer); }
.preis-zahl strong { font-size: clamp(2.25rem, 4.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--enzian); }
.preis-karte h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--schiefer); font-weight: 500; }
.preis-pro { max-width: 30rem; }
.preis-pro { color: var(--schiefer); margin-bottom: 28px; }
.haken { list-style: none; margin: 0 0 28px; padding: 0; }
.haken li { position: relative; padding: 10px 0 10px 32px; border-top: 1px solid var(--nebel-tief); }
.haken li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 8px; border-left: 2px solid var(--enzian); border-bottom: 2px solid var(--enzian); transform: rotate(-45deg); }
.preis-notiz { color: var(--schiefer); font-size: .95rem; margin: 0 0 28px; }
.sicher { padding: clamp(28px, 4vw, 48px) 0; }
.sicher h3 { margin-bottom: 20px; }
.sicher dl { margin: 0; display: grid; gap: 0; }
.sicher div { padding: 16px 0; border-top: 1px solid var(--schindel); }
.sicher dt { font-weight: 600; }
.sicher dd { margin: 2px 0 0; color: var(--schiefer); }
@media (max-width: 860px) { .preis-raster { grid-template-columns: 1fr; } .sicher { padding: 8px 0 0; } }

/* ---------- Fragen ---------- */
.fragen-liste { max-width: 48rem; border-bottom: 1px solid var(--schindel); }
.fragen-liste details { border-top: 1px solid var(--schindel); }
.fragen-liste summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-weight: 500; font-size: 1.1rem; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--schiefer); }
.fragen-liste details[open] summary::after { content: "–"; }
.fragen-liste details p { margin: 0; padding: 0 0 24px; color: var(--schiefer); max-width: 40rem; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--fichte); color: var(--weiss); }
.kontakt .abschnitt-kopf p { color: rgba(255,255,255,.78); }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.weg { background: var(--fichte-hell); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.weg-art { font-size: .9rem; color: rgba(255,255,255,.65); }
.weg a.weg-wert { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.weg a.weg-wert:hover { text-decoration: underline; text-underline-offset: 4px; }
.weg .kopieren { align-self: flex-start; margin-top: 10px; min-height: 34px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: none; color: var(--weiss); font: 500 .85rem var(--schrift); cursor: pointer; }
.weg .kopieren:hover { border-color: var(--weiss); }
.kontakt-ort { margin: 32px 0 0; color: rgba(255,255,255,.7); }
.kontakt a:focus-visible, .kontakt button:focus-visible { outline-color: var(--enzian-hell); }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--fichte); color: rgba(255,255,255,.65); border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.fuss a { color: rgba(255,255,255,.85); }
.fuss .rechts { margin-left: auto; }

/* ---------- Unterseiten (Impressum, 404) ---------- */
.seite .kopf { position: sticky; background: var(--nebel); color: var(--fichte); box-shadow: 0 1px 0 var(--schindel); }
.seite main { padding: clamp(48px, 8vw, 96px) 0 var(--abstand); }
.recht { max-width: 46rem; }
.recht h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 20px; }
.recht h2 { font-size: 1.6rem; margin: 56px 0 14px; }
.recht p { color: var(--schiefer); }
.recht p strong { color: var(--fichte); }
.recht dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; margin: 32px 0 0; border-top: 1px solid var(--schindel); }
.recht dt, .recht dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--schindel); }
.recht dt { font-weight: 600; padding-right: 16px; }
.recht dd { color: var(--schiefer); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .recht dl { grid-template-columns: 1fr; }
  .recht dt { padding-bottom: 0; border-bottom: 0; }
  .recht dd { padding-top: 2px; }
}
.nicht-gefunden { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.nicht-gefunden h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.nicht-gefunden p { color: var(--schiefer); max-width: 32rem; margin: 0; }

/* ---------- Pakete: Banner, die beim Scrollen seitlich durchlaufen ---------- */
.preis { background: var(--nebel-tief); }
.pakete-bahn { position: relative; }
.pakete-buehne { padding: var(--abstand) 0 32px; }
.pakete-kopf { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.pakete-kopf p { margin: 0; color: var(--schiefer); font-size: 1.1rem; max-width: 40rem; }

.pakete-fenster { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pakete-fenster::-webkit-scrollbar { display: none; }
.pakete {
  display: flex; gap: clamp(16px, 2.4vw, 32px); margin: 0; list-style: none;
  padding: 4px max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  width: max-content; will-change: transform;
}
.paket {
  flex: none; width: min(84vw, 920px); min-height: min(58svh, 540px); scroll-snap-align: center;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  background: var(--weiss); border-radius: 32px; padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 64px);
  box-shadow: 0 1px 0 rgba(28,43,37,.06), 0 18px 40px -24px rgba(28,43,37,.35);
}
.paket-links { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.paket h3 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.03em; }
.paket-fuer { margin: 8px 0 0; color: var(--schiefer); font-size: 1rem; }
.paket-preis { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 28px; }
.paket-preis span { color: var(--schiefer); font-size: 1.1rem; }
.paket-preis strong { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.paket .haken { margin: 0; font-size: 1.05rem; min-width: 0; }
.paket .haken li { padding-top: 13px; padding-bottom: 13px; }
.paket .haken li::before { top: 20px; }
.paket .haken li:first-child { border-top: 0; }
.paket .btn { min-width: 200px; }

.paket-empfohlen { background: var(--fichte); color: var(--weiss); }
.paket-empfohlen .paket-fuer, .paket-empfohlen .paket-preis span { color: rgba(255,255,255,.72); }
.paket-empfohlen .haken li { border-top-color: rgba(255,255,255,.14); }
.paket-empfohlen .haken li::before { border-color: var(--enzian-hell); }
.paket-empfohlen .btn-enzian { background: var(--weiss); color: var(--fichte); }
.paket-empfohlen .btn-enzian:hover { background: var(--nebel-tief); }
.paket-empfohlen :focus-visible { outline-color: var(--enzian-hell); }
.paket-marke { margin: 0 0 16px; font-size: .85rem; font-weight: 500; padding: 5px 14px; border-radius: 999px; background: var(--enzian-hell); color: var(--fichte); }
.btn-linie-dunkel { border-color: var(--fichte); color: var(--fichte); background: transparent; }
.btn-linie-dunkel:hover { background: var(--nebel-tief); }

.pakete-punkte { display: flex; gap: 8px; margin-top: 24px; }
.pakete-punkte span { width: 8px; height: 8px; border-radius: 999px; background: var(--schindel); transition: width .25s, background-color .25s; }
.pakete-punkte span.aktiv { width: 28px; background: var(--fichte); }

.pakete-unten { padding-bottom: var(--abstand); }
.pakete-notiz { margin: 8px 0 0; color: var(--schiefer); }
.sicher-quer { margin-top: clamp(48px, 6vw, 72px); padding: 0; }
.sicher-quer dl { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Seitlicher Lauf beim Scrollen (wird per Skript eingeschaltet) */
.pakete-bahn.seitlich .pakete-buehne {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 84px 0 24px; overflow: hidden;
}
.pakete-bahn.seitlich .pakete-fenster { overflow: visible; scroll-snap-type: none; }

@media (max-width: 760px) {
  .paket { grid-template-columns: 1fr; gap: 20px; align-items: start; align-content: start; border-radius: 28px; min-height: 0; padding: 32px 24px; }
  .paket h3 { font-size: 1.9rem; }
  .paket-preis { margin: 16px 0 18px; }
  .paket-preis strong { font-size: 3rem; }
  .paket-links .btn { align-self: stretch; }
  .paket .haken { font-size: .95rem; }
  .paket .haken li { padding-top: 9px; padding-bottom: 9px; }
  .paket .haken li::before { top: 16px; }
  .sicher-quer dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .sicher-quer dl { grid-template-columns: 1fr; gap: 0; } }
@media (max-height: 640px) and (max-width: 760px) {
  .pakete-kopf p { display: none; }
}
@media (max-width: 760px) {
  .pakete-bahn.seitlich .pakete-buehne { justify-content: flex-start; padding-top: 88px; }
  .pakete-bahn.seitlich .pakete-kopf { margin-bottom: 20px; }
  .pakete-bahn.seitlich .pakete-kopf p { display: none; }
  .pakete-bahn.seitlich .pakete-punkte { margin-top: 16px; }
}

/* =========================================================
   Ruhigeres Erscheinungsbild
   Eine Hintergrundfarbe für fast alles, weniger Linien und Kästen,
   Abschnitte werden durch Abstand getrennt statt durch Farbflächen.
   ========================================================= */
body { background: var(--nebel); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.025em; }
.abschnitt { padding: clamp(80px, 10vw, 128px) 0; }
.abschnitt-kopf { gap: 12px; margin-bottom: clamp(32px, 4vw, 48px); }
.abschnitt-kopf p { font-size: 1.05rem; }

/* Hero */
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.hero .lead { margin: 20px 0 32px; }
.hero-inhalt { padding-bottom: clamp(56px, 9vw, 104px); }
.hero-link { color: var(--weiss); font-size: .975rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.45); }
.hero-link:hover { text-decoration-color: var(--weiss); }
.hero-aktion { gap: 14px 28px; }

/* Leistungen: gleicher Hintergrund, keine Trennlinien */
.leistungen { background: transparent; }
.leistungen-bild { border-radius: 20px; }
.leistung { border-top: 0; padding: 0 0 28px; }
.leistung:last-of-type { border-bottom: 0; }
.leistung h3 { font-size: 1.15rem; }
.leistung p { margin-top: 6px; }
.fuer-wen { margin-top: 4px; }

/* Ablauf: schlichte Nummern statt Kreisen und gestrichelter Linien */
.ablauf { padding-top: 0; }
.schritte { gap: clamp(24px, 3vw, 40px); }
.schritte li { padding-top: 0; }
.schritte li::before { content: counter(schritt); position: static; display: block; width: auto; height: auto; border: 0; background: none; border-radius: 0; color: var(--schiefer); font-weight: 500; font-size: .95rem; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.schritte li::after { display: none; }
@media (max-width: 860px) {
  .schritte { gap: 28px; }
  .schritte li { padding: 0; }
}

/* Pakete: gleicher Hintergrund, weichere Banner */
.preis { background: transparent; }
.paket { box-shadow: none; border: 1px solid var(--schindel); }
.paket-empfohlen { border-color: var(--fichte); }
.paket-marke { background: none; padding: 0; color: var(--enzian-hell); font-size: .9rem; }
.pakete-unten { padding-bottom: clamp(80px, 10vw, 128px); }
.sicher-quer div { border-top: 0; padding: 0; }
.sicher-quer h3 { font-size: 1.05rem; color: var(--schiefer); font-weight: 500; }

/* Fragen: zweispaltig, Antworten mit Luft */
.fragen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fragen-raster .abschnitt-kopf { position: sticky; top: 100px; margin-bottom: 0; }
.fragen-liste { max-width: none; border-bottom: 1px solid var(--schindel); }
.fragen-liste summary { padding: 24px 44px 24px 0; font-size: 1.1rem; }
.fragen-liste summary:hover { color: var(--enzian); }
.fragen-liste .antwort { padding: 0 0 28px; max-width: 42rem; }
.fragen-liste .antwort p { margin: 0 0 12px; color: var(--schiefer); line-height: 1.7; }
.fragen-liste .antwort p:last-child { margin-bottom: 0; }
.fragen-liste .antwort b { color: var(--fichte); font-weight: 600; }
@media (max-width: 860px) {
  .fragen-raster { grid-template-columns: 1fr; }
  .fragen-raster .abschnitt-kopf { position: static; }
}

/* Kontakt: schlichte Liste statt Kästen */
.kontakt h2 { max-width: 16ch; }
.wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 32px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.weg { background: none; padding: 0; border-radius: 0; display: block; }
.weg dt { font-size: .9rem; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.weg dd { margin: 0; font-size: 1.1rem; font-weight: 500; overflow-wrap: anywhere; }
.weg dd a { text-decoration: none; }
.weg dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.weg .kopieren { display: inline; margin: 0 0 0 6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(255,255,255,.55); font: 400 .85rem var(--schrift); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.weg .kopieren:hover { color: var(--weiss); }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wege { grid-template-columns: 1fr; } }
.fragen-liste .antwort p { padding: 0; }
.weg .kopieren { display: block; margin: 6px 0 0; }

/* =========================================================
   Mehr Spannung: Bewegung im Hero, Foto über die ganze Breite,
   dunkler Ablauf mit großen Zahlen, lebendigere Pakete und Fragen
   ========================================================= */

/* Hero: Bild zoomt langsam heran, Text erscheint einmal beim Laden */
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hoch { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .platz picture img { animation: hero-zoom 14s cubic-bezier(.2,.6,.2,1) both; }
.hero h1, .hero .lead, .hero-aktion { animation: hoch .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .lead { animation-delay: .15s; }
.hero-aktion { animation-delay: .3s; }
.hero-hinweis { position: absolute; right: var(--rand); bottom: clamp(56px, 9vw, 104px); z-index: 1; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .9rem; text-decoration: none; }
.hero-hinweis span { width: 1px; height: 44px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.hero-hinweis span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--weiss); animation: rieseln 2.2s ease-in-out infinite; }
@keyframes rieseln { to { top: 100%; } }
@media (max-width: 760px) { .hero-hinweis { display: none; } }

/* Leistungen: Foto randlos über die ganze Breite mit leichter Tiefenwirkung */
.leistungen { padding-top: 0; }
.leistungen-raster { max-width: none; padding: 0; gap: clamp(56px, 8vw, 104px); }
.leistungen-bild { width: 100%; max-width: 100%; aspect-ratio: auto; height: clamp(380px, 78vh, 760px); border-radius: 0; }
.leistungen-bild img { height: 120% !important; margin-top: -10%; will-change: transform; }
.leistungen-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,43,37,0) 45%, rgba(28,43,37,.75) 100%); pointer-events: none; }
.bild-zeile { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--breite); padding: 0 var(--rand) clamp(32px, 5vw, 64px); color: var(--weiss); font-size: clamp(1.5rem, 3.4vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.bild-zeile { max-width: min(var(--breite), 100%); }
.leistungen-text { max-width: var(--breite); width: 100%; margin: 0 auto; padding: 0 var(--rand); }

/* Ablauf: dunkle Fläche, große Zahlen */
.ablauf { background: var(--fichte); color: var(--weiss); padding: clamp(88px, 11vw, 140px) 0; }
.ablauf .abschnitt-kopf p, .ablauf .schritte p { color: rgba(255,255,255,.72); }
.schritte li { border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; }
.schritte li::before { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; color: var(--enzian-hell); margin-bottom: 20px; letter-spacing: -0.04em; }
.schritte h3 { font-size: 1.25rem; }
@media (max-width: 860px) { .schritte li { padding-top: 20px; } }

/* Pakete: Karten reagieren auf die Maus */
.paket { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
@media (hover: hover) {
  .paket:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(28,43,37,.45); border-color: var(--fichte); }
}
.paket-preis strong { color: var(--enzian); }
.paket-empfohlen .paket-preis strong { color: var(--weiss); }

/* Fragen: geöffnete Frage hervorheben, Plus dreht sich zum Kreuz */
.fragen { background: var(--weiss); }
.fragen-liste summary::after { content: "+"; transition: transform .25s; }
.fragen-liste details[open] summary { color: var(--enzian); }
.fragen-liste details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); color: var(--enzian); }

/* Kontakt: großer, klickbarer Aufruf */
.kontakt h2 { font-size: clamp(2.25rem, 5.6vw, 4.25rem); line-height: 1.02; max-width: 14ch; }

@media (prefers-reduced-motion: reduce) {
  .hero .platz picture img, .hero h1, .hero .lead, .hero-aktion { animation: none; }
  .hero-hinweis span::after { animation: none; }
  .paket, .fragen-liste summary::after { transition: none; }
}

/* =========================================================
   Sanfter: Flächen als abgerundete Inseln mit etwas Rand,
   weiche Übergänge statt harter Kanten
   ========================================================= */
:root { --insel: clamp(8px, 1.2vw, 16px); --runde: clamp(24px, 3vw, 40px); }

/* Kopfzeile: weicher Schatten statt harter Linie */
.kopf.fest { box-shadow: 0 10px 30px -22px rgba(28,43,37,.45); background: rgba(242,243,239,.88); }

/* Hero mit runden unteren Ecken */
.hero { margin: 0 var(--insel); border-radius: 0 0 var(--runde) var(--runde); overflow: hidden; }

/* Breites Foto als abgerundete Fläche */
.leistungen { padding-top: var(--insel); }
.leistungen-bild { width: calc(100% - 2 * var(--insel)); margin: 0 auto; border-radius: var(--runde); }

/* Dunkler Ablauf als Insel */
.ablauf { margin: 0 var(--insel); border-radius: var(--runde); }

/* Fragen als helle Insel */
.fragen { margin: clamp(56px, 7vw, 96px) var(--insel) 0; border-radius: var(--runde); }

/* Kontakt und Fuß als ein abgerundeter dunkler Block */
.kontakt { margin: var(--insel) var(--insel) 0; border-radius: var(--runde) var(--runde) 0 0; }
.fuss { margin: 0 var(--insel) var(--insel); border-radius: 0 0 var(--runde) var(--runde); border-top-color: rgba(255,255,255,.08); }
.seite .fuss { margin-top: 0; }

/* Leichtere Linien */
.fragen-liste, .fragen-liste details { border-color: rgba(203,207,198,.7); }
.schritte li { border-top-color: rgba(255,255,255,.1); }
.wege { border-top-color: rgba(255,255,255,.1); }
.paket { border-color: rgba(203,207,198,.8); }
.paket .haken li { border-top-color: rgba(230,232,226,.9); }

/* Foto-Platzhalter im Hero ebenfalls weich */
.zeige-plaetze .platz.leer .platz-hinweis { border-radius: 16px; }

/* =========================================================
   Anfrage-Seite im Chat-Stil
   ========================================================= */
.anfrage-seite main.anfrage { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); }
.anfrage-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 40px); align-items: start; }

/* Seitenspalte */
.anfrage-seitenspalte { position: sticky; top: 92px; display: grid; gap: 24px; }
.anfrage-bild { position: relative; border-radius: var(--runde); overflow: hidden; aspect-ratio: 4 / 5; max-height: 62vh; background: var(--fichte); }
.anfrage-bild img { width: 100%; height: 100%; object-fit: cover; }
.anfrage-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,43,37,.05) 35%, rgba(28,43,37,.85) 100%); }
.anfrage-bild-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3vw, 32px); color: var(--weiss); }
.anfrage-bild-text h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.05; }
.anfrage-bild-text p { margin: 10px 0 0; color: rgba(255,255,255,.85); max-width: 26rem; }
.anfrage-versprechen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.anfrage-versprechen li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.anfrage-versprechen li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 13px; height: 7px; border-left: 2px solid var(--enzian); border-bottom: 2px solid var(--enzian); transform: rotate(-45deg); }
.anfrage-versprechen span { color: var(--schiefer); font-size: .95rem; }
.anfrage-direkt { margin: 0; display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(203,207,198,.7); }
.anfrage-direkt dt { font-size: .85rem; color: var(--schiefer); }
.anfrage-direkt dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.anfrage-direkt a { text-decoration: none; }
.anfrage-direkt a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Chat-Fenster */
.chat { background: var(--weiss); border-radius: var(--runde); display: flex; flex-direction: column; height: calc(100svh - 120px); min-height: 520px; max-height: 860px; overflow: hidden; box-shadow: 0 24px 60px -40px rgba(28,43,37,.45); }
.chat-kopf { padding: 18px clamp(18px, 3vw, 28px) 0; }
.chat-absender { display: flex; align-items: center; gap: 12px; }
.chat-absender b { display: block; font-weight: 600; }
.chat-absender span { font-size: .875rem; color: var(--schiefer); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--fichte); color: var(--weiss); display: grid; place-items: center; flex: none; }
.chat-avatar svg { width: 24px; height: 24px; }
.chat-fortschritt { height: 3px; background: var(--nebel-tief); border-radius: 999px; margin: 16px 0 0; overflow: hidden; }
.chat-fortschritt span { display: block; height: 100%; width: 0; background: var(--enzian); border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.2,1); }

.chat-verlauf { flex: 1; overflow-y: auto; padding: 24px clamp(18px, 3vw, 28px) 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.blase { max-width: min(82%, 34rem); padding: 12px 16px; border-radius: 20px; line-height: 1.5; font-size: 1rem; animation: blase-rein .35s cubic-bezier(.2,.7,.2,1) both; overflow-wrap: anywhere; }
.blase-bot { align-self: flex-start; background: var(--nebel); border-bottom-left-radius: 6px; }
.blase-kunde { align-self: flex-end; background: var(--fichte); color: var(--weiss); border-bottom-right-radius: 6px; }
.blase-bot + .blase-kunde, .blase-kunde + .blase-bot, .flugplan + .blase { margin-top: 8px; }
@keyframes blase-rein { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.blase.tippt { padding: 14px 16px; }
.punkte { display: inline-flex; gap: 5px; }
.punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--schiefer); opacity: .35; animation: punkt 1s infinite ease-in-out; }
.punkte i:nth-child(2) { animation-delay: .15s; }
.punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes punkt { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-3px); } }

/* Flugplan-Karte */
.flugplan { align-self: stretch; margin-top: 4px; border: 1px solid rgba(203,207,198,.8); border-radius: 20px; padding: 18px 20px 8px; animation: blase-rein .4s cubic-bezier(.2,.7,.2,1) both; }
.flugplan-titel { margin: 0 0 6px; font-weight: 600; font-size: 1.1rem; }
.flugplan dl { margin: 0; }
.flugplan-zeile { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(230,232,226,.9); }
.flugplan-zeile:first-child { border-top: 0; }
.flugplan dt { color: var(--schiefer); font-size: .9rem; }
.flugplan dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.flugplan-aendern { border: 0; background: none; padding: 2px 0; color: var(--enzian); font: 500 .875rem var(--schrift); cursor: pointer; }
.flugplan-aendern:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Eingabebereich */
.chat-eingabe { padding: 14px clamp(18px, 3vw, 28px) 18px; border-top: 1px solid rgba(230,232,226,.9); background: var(--weiss); }
.chat-eingabe:empty { padding: 0; border-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--schindel); background: var(--weiss); color: var(--fichte); font: 500 .975rem var(--schrift); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.chip small { font-size: .85rem; color: var(--schiefer); font-weight: 400; }
.chip:hover { border-color: var(--fichte); }
.chip:active { transform: scale(.97); }
.chip-mehr[aria-pressed="true"] { background: var(--fichte); border-color: var(--fichte); color: var(--weiss); }
.chip-mehr[aria-pressed="true"]::before { content: "✓"; font-size: .85rem; }
.chat-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.chat-leiste:empty { display: none; }
.chat-weiter { margin-left: auto; min-height: 44px; }
.chat-weiter:disabled { opacity: .4; cursor: not-allowed; }
.chat-zurueck, .chat-ueberspringen { border: 0; background: none; padding: 4px 0; color: var(--schiefer); font: 500 .925rem var(--schrift); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(86,99,93,.4); }
.chat-zurueck:hover, .chat-ueberspringen:hover { color: var(--fichte); text-decoration-color: currentColor; }
.chat-form { margin: 0; }
.chat-zeile { display: flex; gap: 8px; align-items: flex-end; }
.chat-feld { flex: 1; min-width: 0; min-height: 48px; padding: 12px 18px; border: 1.5px solid var(--schindel); border-radius: 24px; background: var(--nebel); color: var(--fichte); font: 400 1rem var(--schrift); resize: none; }
textarea.chat-feld { border-radius: 20px; line-height: 1.5; }
.chat-feld:focus { outline: none; border-color: var(--enzian); background: var(--weiss); }
.chat-feld[aria-invalid="true"] { border-color: #B3261E; }
.chat-senden { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--enzian); color: var(--weiss); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, transform .15s; }
.chat-senden:hover { background: var(--enzian-dunkel); }
.chat-senden:active { transform: scale(.95); }
.chat-fehler { margin: 8px 4px 0; color: #B3261E; font-size: .9rem; }
.chat-fehler:empty { display: none; }
.absenden { display: flex; flex-wrap: wrap; gap: 10px; }
.absenden .btn { min-height: 50px; padding: 0 24px; }
.absenden-haupt { flex: 1 1 220px; }
.chat-nachher { margin: 0; color: var(--schiefer); font-size: .95rem; }
.chat-nachher b { color: var(--fichte); font-weight: 600; overflow-wrap: anywhere; }
.chat-ohne-js { padding: 24px; color: var(--schiefer); }

@media (max-width: 900px) {
  .anfrage-raster { grid-template-columns: 1fr; }
  .anfrage-seitenspalte { position: static; order: 2; }
  .anfrage-bild { display: none; }
  .chat { height: calc(100svh - 96px); min-height: 480px; }
}
@media (max-width: 520px) {
  .anfrage-seite main.anfrage { padding-top: 8px; }
  .anfrage-seite .wrap.anfrage-raster { padding-left: 8px; padding-right: 8px; }
  .chat { border-radius: 24px; height: calc(100svh - 84px); }
  .blase { max-width: 88%; }
  .flugplan-zeile { grid-template-columns: 1fr auto; }
  .flugplan dt { grid-column: 1 / -1; }
  .anfrage-seitenspalte { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .blase, .flugplan { animation: none; }
  .punkte i { animation: none; opacity: .5; }
  .chat-fortschritt span { transition: none; }
}

/* Schwebender Anfrage-Knopf auf der Startseite */
.anfrage-knopf {
  position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 14px; border-radius: 999px;
  background: var(--fichte); color: var(--weiss); text-decoration: none; font-weight: 500;
  box-shadow: 0 16px 36px -18px rgba(28,43,37,.7);
  transform: translateY(140%); opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s, background-color .2s;
}
.anfrage-knopf.sichtbar { transform: none; opacity: 1; }
.anfrage-knopf:hover { background: var(--fichte-hell); }
.anfrage-knopf .blase-symbol { width: 30px; height: 30px; border-radius: 50%; background: var(--enzian); display: grid; place-items: center; }
.anfrage-knopf:focus-visible { outline-color: var(--enzian); }
@media (prefers-reduced-motion: reduce) { .anfrage-knopf { transition: none; } }
.btn-hell-kontakt { background: var(--weiss); color: var(--fichte); margin-top: 12px; min-height: 52px; padding: 0 28px; }
.btn-hell-kontakt:hover { background: var(--nebel-tief); }
.kontakt .abschnitt-kopf p:last-child { margin-top: 0; }
.anfrage-knopf { background: var(--enzian); box-shadow: 0 16px 36px -16px rgba(39,71,201,.65); }
.anfrage-knopf:hover { background: var(--enzian-dunkel); }
.anfrage-knopf .blase-symbol { background: var(--weiss); color: var(--enzian); }
.anfrage-knopf:focus-visible { outline-color: var(--fichte); }


/* =========================================================
   Projekte: Karte auf der Startseite, führt zur Projektseite
   ========================================================= */
.projekte { padding-bottom: clamp(56px, 7vw, 96px); }
.projekt-karte { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; border-radius: var(--runde); overflow: hidden; background: #111A16; color: var(--nebel); text-decoration: none; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.projekt-karte:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(28,43,37,.6); }
.projekt-karte-bild { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; }
.projekt-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.projekt-karte:hover .projekt-karte-bild img { transform: scale(1.04); }
.projekt-karte-osd { position: absolute; top: 14px; left: 16px; display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nebel); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.projekt-karte-osd::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
.projekt-karte-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 48px); min-width: 0; }
.projekt-karte-text h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; }
.projekt-karte-text p { margin: 0; color: rgba(242,243,239,.72); }
.projekt-karte-ort { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.projekt-karte-zahlen { display: flex; flex-wrap: wrap; gap: 0; margin: 6px 0 0; border-top: 1px solid rgba(242,243,239,.14); }
.projekt-karte-zahlen div { flex: 1 1 0; min-width: 0; padding: 14px 12px 0 0; }
.projekt-karte-zahlen div + div { padding-left: 12px; border-left: 1px solid rgba(242,243,239,.14); }
.projekt-karte-zahlen dt { font-size: .8rem; color: rgba(242,243,239,.6); }
.projekt-karte-zahlen dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--enzian-hell); }
.projekt-karte-link { margin-top: 6px; font-weight: 500; }
.projekt-karte:hover .projekt-karte-link { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .projekt-karte { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .projekt-karte, .projekt-karte-bild img { transition: none; } }

.projekt-liste { display: grid; gap: clamp(16px, 2vw, 24px); }

/* Projekt-Karte: Clip läuft, solange der Mauszeiger auf der Karte ist */
.projekt-karte-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.projekt-karte.spielt .projekt-karte-video { opacity: 1; }
.projekt-karte-osd { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .projekt-karte-video { display: none; } }

/* Leistungen-Foto: im Originalformat 16:9 zeigen, ohne Zuschnitt, Zoom oder Verschiebung */
.leistungen-bild { height: auto; aspect-ratio: 16 / 9; }
.leistungen-bild img { height: 100% !important; margin-top: 0; transform: none !important; will-change: auto; }
.leistungen-bild::after { background: linear-gradient(180deg, rgba(28,43,37,0) 70%, rgba(28,43,37,.45) 100%); }
.bild-zeile { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
@media (max-width: 700px) {
  .bild-zeile { font-size: 1rem; line-height: 1.3; padding-bottom: 14px; }
}

/* Hero: Video im echten 16:9-Format, neutrale statt grünlicher Abdunklung */
.hero { min-height: 0; aspect-ratio: 16 / 9; background: #0d0f0e; }
.hero .platz { background: #0d0f0e; }
.hero .platz::after { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.6) 100%); }
.hero .platz picture img { animation: none; }
.leistungen-bild::after { background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.4) 100%); }
@media (max-width: 700px) {
  .hero { aspect-ratio: auto; display: block; }
  .hero .platz { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .hero .platz::after { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 40%); }
  .hero-inhalt { padding-top: 28px; }
}