/* Einsatzwelten v3 (28.09.2026) – gleicher Aufbau für Forst, GaLaBau und Zaunbau:
   transparentes Menü über dem Video, Nebel und Filmkorn im Hero, Symbolleiste im Nebel,
   Problem-Geschichte mit Stockfotos, Minimog als Lösung, Bildwelt mit Zoom beim Scrollen.
   Helle Welt etwas edler: warmes Elfenbein und Stein statt Grau, Messing als feiner Akzent.
   Dunkle Sektionen haben schräge Kanten, zwischen hellen Sektionen zieht Nebel über die Naht. */

body.welt {
  --bg: #f4f1ea; --surface: #fbfaf6; --surface-2: #ebe6da; --line: #dbd3c3; --muted: #5b605a;
  --grad: linear-gradient(135deg, #0e110c 0%, #242c1e 48%, #3e4d33 100%);
  --grad-text: linear-gradient(135deg, #10140e 0%, #2a3423 45%, #455539 100%);
  --grad-glow: linear-gradient(135deg, #627a2b 0%, #88a740 55%, #b9d070 100%);
  --brass: #a8834f; --brass-2: #c9a978; --deep: #161b12; --cut: clamp(28px, 4.2vw, 64px);
  background: var(--bg); display: block;
}
.welt main { overflow-x: clip; }
.welt .section.alt { background: linear-gradient(180deg, var(--bg) 0, var(--surface-2) 180px); }
.welt .step, .welt .mcard, .welt .alt .step, .welt .alt .mcard { background: var(--surface); border-color: var(--line); }
.welt .ben li { background: var(--surface); border-right-color: var(--line); }
.welt h2.display { font-size: clamp(26px, 3.1vw, 46px); }
.welt h2.display span { display: block; }
/* Überschriften: jede Zeile bleibt eine Zeile (höchstens zwei) – welt.js verkleinert die Schrift, bis sie passt */
.welt :is(h1, h2).display span { white-space: nowrap; }
.welt :is(.section-head, .bridge-grid, .problem-grid, .demo-v2-grid, .faq-grid) > * { min-width: 0; }
.welt .section-head { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

/* ---------- Menü: oben unsichtbar über dem Video, beim Scrollen Milchglas ---------- */
.welt .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition: background-color .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.welt .site-header.is-scrolled { background: rgba(250, 248, 243, .66); box-shadow: 0 10px 30px rgba(18, 23, 15, .08);
  -webkit-backdrop-filter: saturate(1.3) blur(18px); backdrop-filter: saturate(1.3) blur(18px); }
.welt .site-header.open { background: rgba(250, 248, 243, .97); }
.welt .site-header:not(.is-scrolled):not(.open) :is(.nav a, .head-tel) { color: #fff; }
.welt .site-header:not(.is-scrolled):not(.open) .logo-word { background: #fff; }
.welt .site-header:not(.is-scrolled):not(.open) .logo small { color: rgba(255, 255, 255, .78); }
.welt .site-header:not(.is-scrolled):not(.open) .logo-icon { filter: brightness(0) invert(1); }
.welt .site-header:not(.is-scrolled):not(.open) .menu-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.welt .site-header:not(.is-scrolled):not(.open) .menu-btn span { background: #fff; }
.welt .site-header :is(.nav a, .head-tel, .logo small) { transition: color .35s ease; }

/* ---------- Hero: Video, Verläufe, Nebel, Korn ---------- */
.welt .lp-hero { min-height: min(100svh, 940px); align-items: center; overflow: hidden; }
.welt .lp-hero-pic { overflow: hidden; }
.welt .lp-hero-pic video { transform: scale(var(--hz, 1.1)); transform-origin: 50% 40%; will-change: transform; }
.welt .lp-hero::before {
  background:
    linear-gradient(180deg, rgba(8, 18, 12, .62) 0%, rgba(8, 18, 12, 0) 24%),
    linear-gradient(90deg, rgba(8, 18, 12, .84) 0%, rgba(8, 18, 12, .56) 38%, rgba(8, 18, 12, .08) 70%, rgba(8, 18, 12, 0) 100%);
}
.welt .lp-hero-in { position: relative; z-index: 3; padding-top: 110px; padding-bottom: clamp(200px, 19vw, 290px); }
.welt .lp-hero h1.display { font-size: clamp(32px, 4.4vw, 68px); }
.welt .lp-hero h1 span { display: block; white-space: nowrap; }

/* dunkler Auslauf: das Video endet nicht an einer Kante, es versinkt in dunklem Nebel */
.wh-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 20, 13, 0) 0%, rgba(9, 20, 13, .45) 38%, rgba(9, 20, 13, .9) 70%, #09140d 88%, #09140d 100%); }
@keyframes whDrift { to { background-position-x: -2100px; } }

/* Filmkorn – leichtes Rauschen wie bei einem alten Fernseher, bewegt sich in Sprüngen */
.grain { position: absolute; inset: -60%; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(7%, 2%); } 83% { transform: translate(-8%, -4%); } 100% { transform: translate(2%, 6%); }
}

/* ---------- Symbolleiste direkt unter dem Video, im dunklen Nebel, schräge Unterkante ---------- */
.welt-feats { position: relative; z-index: 3; margin-top: clamp(-190px, -12vw, -120px); background: linear-gradient(180deg, rgba(9, 20, 13, 0) 0, #09140d 60%); color: #fff;
  padding: clamp(6px, 1vw, 14px) 0 calc(var(--cut) + clamp(26px, 3vw, 44px));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.welt-feats ul { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.welt-feats li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 18px; }
.welt-feats li + li { border-left: 1px solid rgba(201, 169, 120, .35); }
.welt-feats svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--brass-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.welt-feats span { font: 700 13px/1.25 var(--text); letter-spacing: .06em; text-transform: uppercase; color: #eef2ee; }
.welt-feats + .welt-story { margin-top: calc(-1 * var(--cut)); padding-top: calc(var(--cut) + clamp(40px, 6vw, 84px)); }

/* ---------- Problem-Geschichte mit Stockfotos ---------- */
.welt-story { padding: clamp(48px, 7vw, 96px) 0 calc(var(--cut) + clamp(40px, 5vw, 72px)); }
.welt .eyebrow.brass { color: var(--brass); }
.story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.story-card { position: relative; overflow: hidden; aspect-ratio: 4 / 5; color: #fff; background: #1a211c; }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.18)); will-change: transform; }
.story-card::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 13, 0) 30%, rgba(10, 18, 13, .55) 58%, rgba(10, 18, 13, .92) 100%); }
.story-card div { position: absolute; z-index: 1; left: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); }
.story-card em { display: block; font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--brass-2); margin-bottom: 10px; }
.story-card b { display: block; font: 900 clamp(19px, 1.6vw, 24px)/1.08 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 10px; }
.story-card p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #dfe6e1; }

/* ---------- Dunkle Bänder mit schrägen Kanten ---------- */
.slant { position: relative; z-index: 2; margin: calc(-1 * var(--cut)) 0; padding-top: calc(var(--cut) + clamp(48px, 6vw, 88px)); padding-bottom: calc(var(--cut) + clamp(48px, 6vw, 88px));
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.slant + .section { padding-top: calc(var(--cut) + clamp(56px, 8vw, 104px)); }
.welt-bridge { background: radial-gradient(120% 140% at 85% 0%, #2f3a27 0%, #1b2116 45%, #10140e 100%); color: #fff; overflow: clip; isolation: isolate; }
.welt-bridge .motif { position: absolute; z-index: -1; right: -6vw; top: 50%; width: min(58vw, 820px); aspect-ratio: 2 / 1; transform: translateY(-50%);
  background: #fff; opacity: .05; -webkit-mask: url('bilder/minimog-icon.svg') center / contain no-repeat; mask: url('bilder/minimog-icon.svg') center / contain no-repeat; }
.bridge-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.welt-bridge .eyebrow, .welt-gallery .eyebrow { color: var(--brass-2); }
.welt-bridge h2.display span:last-child:not(:first-child), .welt-gallery h2.display span:last-child:not(:first-child) {
  background: linear-gradient(180deg, #ecf0d8, #c3d685); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welt-bridge p { color: #d3ded7; font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.welt-bridge .btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.welt-bridge .btn-ghost:hover { background: #fff; color: var(--ink); }

/* Gepinnte Bühne (Pin + Transform, Scrub): das Band bleibt stehen, die Maschine fährt herein,
   die drei Probleme werden eines nach dem anderen abgehakt. welt.js setzt --p (0…1). */
.welt-bridge[data-pin] { padding-top: 0; padding-bottom: 0; }
.welt-bridge[data-pin] + .section { padding-top: calc(var(--cut) + clamp(56px, 8vw, 104px)); }
@media (min-width: 901px) {
  .welt-bridge[data-pin] { height: 230vh; }
  .bridge-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: calc(var(--cut) + 40px) 0; }
}
.bridge-stage { width: 100%; }
.bridge-stage .motif { transform: translate(calc(var(--p, 0) * -6vw), -50%); }
.bridge-side { position: relative; display: grid; gap: 22px; justify-items: start; }
.bridge-machine { width: min(100%, 520px); height: auto; max-height: 42vh; object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45));
  transform: translateX(calc((1 - min(1, var(--p, 0) * 2.2)) * 55vw)); opacity: calc(.2 + min(1, var(--p, 0) * 3)); }
.bridge-checks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; width: 100%; }
.bridge-checks li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.bridge-checks svg { width: 24px; height: 24px; fill: none; stroke: var(--brass-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .5s ease .1s; }
.bridge-checks s { display: block; font-size: 13.5px; color: #bfd37c; text-decoration-color: transparent; transition: text-decoration-color .4s ease; }
.bridge-checks b { display: block; font: 700 16px/1.3 var(--text); color: #fff; opacity: .25; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.bridge-checks li.done svg { stroke-dashoffset: 0; }
.bridge-checks li.done s { text-decoration-color: #e0806b; }
.bridge-checks li.done b { opacity: 1; transform: none; }
.bridge-bar { width: 100%; height: 2px; background: rgba(255, 255, 255, .14); }
.bridge-bar i { display: block; height: 100%; background: var(--brass-2); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Entscheidung: große Schrift, die aufgedeckt wird ---------- */
.welt-decide { padding: clamp(64px, 9vw, 130px) 0 calc(var(--cut) + clamp(56px, 8vw, 110px)); }
.welt h2.display.decide-h { font-size: clamp(34px, 6.2vw, 96px); line-height: .98; margin: 6px 0 clamp(24px, 3vw, 40px); }
.decide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); max-width: 1100px; }
.decide-grid p { margin: 0; font-size: 17.5px; line-height: 1.65; color: #2a302b; }
.decide-proof { padding-left: 20px; border-left: 3px solid var(--brass); }
.decide-proof em { display: block; margin-top: 12px; font: 900 18px/1.2 var(--display); font-style: normal; text-transform: uppercase; color: var(--green-2); }

/* ---------- Bildwelt: Mosaik, Bilder zoomen beim Scrollen heraus ---------- */
.welt-gallery { background: #0c1810; color: #fff; overflow: hidden; isolation: isolate; }
.welt-gallery .grain { opacity: .07; }
.welt-gallery .section-head { position: relative; z-index: 2; }
.welt-gallery .lead { color: #c9d3cc; }
.mosaic { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(170px, 19vw, 290px); gap: clamp(8px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.mosaic li { position: relative; overflow: hidden; background: #16221a; }
.mosaic li:nth-child(1) { grid-column: 1 / 8; grid-row: span 2; }
.mosaic li:nth-child(2), .mosaic li:nth-child(3) { grid-column: 8 / 13; }
.mosaic li:nth-child(4) { grid-column: 1 / 5; }
.mosaic li:nth-child(5) { grid-column: 5 / 9; }
.mosaic li:nth-child(6) { grid-column: 9 / 13; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.22)); will-change: transform; }
.mosaic li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 11, 0) 50%, rgba(8, 16, 11, .82) 100%); }
.mosaic span { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px;
  font: 700 12.5px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #eef3ef; }
.mosaic span::before { content: ''; width: 22px; flex: none; border-top: 2px solid var(--brass-2); }

/* Vorführung ebenfalls als schräges Band */
.welt .demo-v2 { background: radial-gradient(120% 140% at 10% 0%, #2f3a27 0%, #1b2116 50%, #10140e 100%); }

/* ---------- Telefon ---------- */
@media (max-width: 900px) {
  .welt .section-head, .welt .bridge-grid { grid-template-columns: minmax(0, 1fr); }
  .welt .lp-hero { min-height: 92svh; align-items: flex-end; }
  .welt .lp-hero::before { background: linear-gradient(180deg, rgba(8, 18, 12, .6) 0%, rgba(8, 18, 12, .2) 25%, rgba(8, 18, 12, .55) 55%, rgba(8, 18, 12, .2) 100%); }
  .welt .lp-hero-in { padding-top: 96px; padding-bottom: 130px; }
  .welt .lp-hero .trust { display: none; }
  .wh-fade { height: 26%; }
  .welt-feats ul { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .welt-feats li { justify-content: flex-start; gap: 10px; padding: 4px 10px; }
  .welt-feats li:nth-child(3) { border-left: 0; }
  .welt-feats svg { width: 28px; height: 28px; }
  .welt-feats span { font-size: 11.5px; }
  .story-cards { grid-template-columns: 1fr; }
  .story-card { aspect-ratio: 4 / 3.4; }
  .bridge-grid { grid-template-columns: 1fr; gap: 8px; }
  .welt-bridge[data-pin] { padding: calc(var(--cut) + 48px) 0; }
  .bridge-machine { transform: none; opacity: 1; max-height: none; }
  .bridge-checks svg { stroke-dashoffset: 0; } .bridge-checks b { opacity: 1; transform: none; } .bridge-checks s { text-decoration-color: #e0806b; }
  .bridge-bar { display: none; }
  .decide-grid { grid-template-columns: 1fr; }
  .welt-feats { margin-top: -110px; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; }
  .mosaic li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .mosaic li:nth-child(1) { grid-column: 1 / 3; }
  .mosaic span { font-size: 10.5px; left: 10px; right: 10px; bottom: 10px; }
  .mosaic span::before { width: 14px; }
}
/* ---------- Bewegungsregeln ---------- */
/* 02 Reveal: Fade + Lift, Stagger über --i, Clip Reveal für Überschriftenzeilen */
.js-motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.js-motion .rv.in { opacity: 1; transform: none; }
.js-motion .clip > span { clip-path: inset(-.25em 100% -.25em 0); transform: translateY(.18em); transition: clip-path 1.05s cubic-bezier(.7, 0, .2, 1) var(--d, 0s), transform 1.05s cubic-bezier(.7, 0, .2, 1) var(--d, 0s); }
.js-motion .clip.in > span { clip-path: inset(-.25em -.2em -.25em 0); transform: none; }
/* 03 Hover: Bild bewegt sich, nicht das Layout; Pfeile und Unterstriche reagieren; magnetische Knöpfe */
.story-card img, .mosaic img, .welt .mcard-pic img, .welt .step-pic img { transition: scale .7s cubic-bezier(.2, .8, .2, 1); }
.story-card:hover img, .mosaic li:hover img, .welt .mcard:hover .mcard-pic img, .welt .step:hover .step-pic img { scale: 1.06; }
.welt .mcard:hover .mcard-pic img { transform: none; }
.welt .btn::after { display: inline-block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.welt .btn:hover::after { transform: translate(3px, -3px); }
.welt .more { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .35s ease; }
.welt .more:hover { text-decoration: none; background-size: 100% 2px; }
.welt .more::after { display: inline-block; transition: transform .3s ease; }
.welt .more:hover::after { transform: translateX(4px); }
.welt .btn { translate: var(--mx, 0) var(--my, 0); transition: translate .5s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.8, .64, 1), background-color .2s, color .2s, box-shadow .2s, transform .2s; }
/* 04 Klick: Knopf gibt nach und federt zurück; Formular zeigt seinen Zustand */
.welt .btn:active { scale: .94; transition-duration: .08s; }
.lead-form .btn.is-sending, .lead-form .btn.is-sent { pointer-events: none; }
.lead-form .btn.is-sending::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.lead-form .btn.is-sent { background: #e4efe7; color: var(--green-1); }
.lead-form .btn.is-sent::after { content: '\2713 '; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .rv, .js-motion .clip > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .grain { animation: none !important; }
  .welt .lp-hero-pic video, .story-card img, .mosaic img { transform: none !important; }
}

/* ---------- Grün: Verlauf von Waldgrün bis leuchtend, Zeile für Zeile (nicht über die ganze Spaltenbreite) ---------- */
.welt .display span { width: fit-content; max-width: 100%; }
.welt .benefits h2.display span { margin-inline: auto; }
.welt .display .green, .welt .display span:last-child:not(:first-child) { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welt :is(.lp-hero, .welt-bridge, .welt-gallery, .welt-filme, .demo-v2) .display span:last-child:not(:first-child),
.welt .lp-hero h1 .green { background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welt .btn-primary { background: var(--grad); background-size: 140% 100%; background-position: 0 0; transition: background-position .5s ease, translate .5s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.8, .64, 1), box-shadow .3s; }
.welt .btn-primary:hover { background: var(--grad); background-size: 140% 100%; background-position: 100% 0; box-shadow: 0 10px 28px rgba(36, 44, 30, .35); }
.welt .step-no, .welt .bridge-bar i { background: var(--grad); }
.welt .ben { border-image: var(--grad) 1; }

/* ---------- Brücke: Anbaugeräte fliegen nach der Maschine herein ---------- */
.bridge-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; width: 100%; }
.bridge-tools li { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  opacity: 0; transform: translate(40vw, -30px) rotate(8deg); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .9, .25, 1.15); }
.bridge-tools li.in { opacity: 1; transform: none; }
.bridge-tools img { height: clamp(64px, 6.5vw, 92px); width: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); }
.bridge-tools span { font: 700 11px/1.2 var(--text); letter-spacing: .05em; text-transform: uppercase; color: #dfe8e2; text-align: center; }
.bridge-machine { max-height: 34vh; }

/* ---------- Filme: großes Feld plus kleine, laufen nur im Bild ---------- */
.welt-filme { background: #0c1810; color: #fff; }
.welt-filme .eyebrow { color: var(--brass-2); }
.welt-filme .lead { color: #c9d3cc; }
.films { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(150px, 16.5vw, 250px); gap: clamp(8px, 1vw, 14px); }
.film { position: relative; margin: 0; overflow: hidden; background: #16221a; }
.film.big { grid-column: span 2; grid-row: span 2; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.2, .8, .2, 1); }
.film:hover video { scale: 1.05; }
.film::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 16, 11, 0) 55%, rgba(8, 16, 11, .85) 100%); }
.film figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 3px; }
.film figcaption b { font: 900 clamp(14px, 1.2vw, 19px)/1.1 var(--display); text-transform: uppercase; }
.film.big figcaption b { font-size: clamp(18px, 1.8vw, 28px); }
.film figcaption span { font-size: 13.5px; color: #cfdad3; }
.film-cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 20px; color: #fff; text-decoration: none;
  background: var(--grad); }
.film-cta.span2 { grid-column: span 2; } .film-cta.span3 { grid-column: span 3; }
.film-cta b { font: 900 clamp(18px, 1.6vw, 24px)/1.1 var(--display); text-transform: uppercase; }
.film-cta span { color: #f2f5e6; font-size: 15px; }
.film-cta em { font-style: normal; font: 700 14px/1 var(--text); margin-top: 8px; }
.film-cta em::after { content: ' \2197 '; display: inline-block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.film-cta:hover em::after { transform: translate(3px, -3px); }
.film-cta::after { display: none; }

@media (max-width: 900px) {
  .bridge-tools { grid-template-columns: repeat(2, 1fr); }
  .bridge-tools li { opacity: 1; transform: none; }
  .films { grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; }
  .film.big { grid-column: span 2; grid-row: span 1; grid-auto-rows: 52vw; }
  .film-cta.span2, .film-cta.span3 { grid-column: span 2; }
  .film-cta { grid-column: span 2; }
  .film:not(.big) figcaption { left: 10px; right: 8px; bottom: 9px; }
  .film:not(.big) figcaption b { font-size: 11.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .film:not(.big) figcaption span { display: none; }
  .film.big { grid-row: span 1; }
  .films { grid-auto-rows: 38vw; }
}

/* =====================================================================
   28.09. spät: Großansicht, Overlays in Sektionsfarbe, Randlicht, Popup
   ===================================================================== */

/* ---------- Bildunterschriften: Overlay läuft in die Sektionsfarbe, Text liegt darauf, leicht über dem Bildrand ---------- */
.welt-story { --sec: var(--bg); }
.welt-gallery, .welt-filme { --sec: #0c1810; }
.story-card { overflow: visible; background: transparent; aspect-ratio: auto; display: flex; flex-direction: column; }
.story-card::after { content: none; }
.story-card .ph { position: relative; left: auto; right: auto; bottom: auto; overflow: hidden; aspect-ratio: 4 / 4.2; background: #1a211c; }
.story-card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 241, 234, 0) 45%, rgba(244, 241, 234, .6) 74%, var(--sec) 99%); }
.story-card .cap { position: relative; left: auto; right: auto; bottom: auto; z-index: 2; margin: -96px 18px 0; color: var(--ink);
  transform: translateY(var(--cy, 0)); will-change: transform; }
.story-card .cap em { color: var(--brass); }
.story-card .cap b { color: #10140f; }
.story-card .cap p { color: #3b423c; }

.mosaic li::after, .film::after { background: linear-gradient(180deg, rgba(12, 24, 16, 0) 40%, rgba(12, 24, 16, .72) 78%, var(--sec) 100%); }
.mosaic .cap, .film figcaption { transform: translateY(var(--cy, 0)); will-change: transform; }
.mosaic .cap { bottom: 16px; font-size: 13px; }

/* ---------- Großansicht ---------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid #88a740; outline-offset: 3px; }
.lbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: clamp(14px, 4vw, 56px);
  background: rgba(4, 10, 6, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .28s ease; }
.lbox.open { opacity: 1; }
.lbox-stage { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.lbox-stage img, .lbox-stage video { max-width: min(100%, 1600px); max-height: calc(100vh - 140px); object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.96); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.lbox.open .lbox-stage img, .lbox.open .lbox-stage video { transform: none; }
.lbox-cap { margin: 14px 0 0; color: #dfe8e2; font: 700 13px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.lbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: #fff; font: 400 28px/1 var(--text); cursor: pointer; transition: background .2s, scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.lbox button:hover { background: rgba(255, 255, 255, .16); }
.lbox button:active { scale: .92; }
.lbox-x { top: 16px; right: 16px; }
.lbox-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lbox-next { right: 16px; top: 50%; translate: 0 -50%; }
.lbox.single .lbox-prev, .lbox.single .lbox-next { display: none; }
body.fx-lock { overflow: hidden; }

/* ---------- Randlicht: überall, wo eine Kante auf den Zeiger reagiert ---------- */
.glow-edge { position: relative; --edge: 0; --angle: 45deg; }
.glow-edge > .edge-light { position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit;
  opacity: calc((var(--edge) - 32) / 68); transition: opacity .35s ease;
  -webkit-mask: conic-gradient(from var(--angle) at center, #000 3%, transparent 14%, transparent 86%, #000 97%);
          mask: conic-gradient(from var(--angle) at center, #000 3%, transparent 14%, transparent 86%, #000 97%);
  box-shadow: inset 0 0 0 1.5px #9dbd52, inset 0 0 12px rgba(157, 189, 82, .45), 0 0 18px rgba(157, 189, 82, .45), 0 0 42px rgba(157, 189, 82, .22); }
.glow-edge:not(:hover) > .edge-light { opacity: 0; transition-duration: .7s; }
:is(.welt-gallery, .welt-filme, .welt-bridge, .demo-v2, .lp-hero, .welt-feats) .glow-edge > .edge-light {
  box-shadow: inset 0 0 0 1.5px #e1e8c1, inset 0 0 14px rgba(185, 208, 112, .5), 0 0 22px rgba(185, 208, 112, .5), 0 0 50px rgba(185, 208, 112, .25); }

.welt .mcard, .welt .step { transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s cubic-bezier(.22, 1, .36, 1), border-color .4s ease; }
.welt .mcard:hover, .welt .step:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -18px rgba(21, 26, 18, .3); }
.story-card img, .mosaic img, .welt .mcard-pic img, .welt .step-pic img, .film video { transition: scale 1s cubic-bezier(.22, 1, .36, 1); }

/* ---------- Anbaugeräte-Popup ---------- */
.apop { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: clamp(10px, 3vw, 40px);
  background: rgba(4, 12, 7, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.apop.open { opacity: 1; }
.apop-card { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; width: min(1080px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); transform: translateY(18px) scale(.98); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.apop.open .apop-card { transform: none; }
.apop-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); font: 400 26px/1 var(--text); cursor: pointer; }
.apop-media { display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 18px; background: radial-gradient(80% 70% at 50% 55%, #fff, #ece6da); }
.apop-main { display: grid; place-items: center; min-height: 320px; }
.apop-main img { max-width: 100%; max-height: 420px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(20, 30, 20, .22)); }
.apop-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.apop-thumbs button { width: 64px; height: 52px; padding: 3px; border: 1px solid var(--line); background: #fff; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.apop-thumbs button.on, .apop-thumbs button:hover { opacity: 1; border-color: #455539; }
.apop-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.apop-body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.apop-body .eyebrow { color: var(--brass); margin: 0; }
.apop-body h3 { margin: 0; font: 900 clamp(22px, 2.2vw, 30px)/1.08 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.apop-text { margin: 0; color: #3a403b; font-size: 16px; line-height: 1.55; }
.apop-specs { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 0; border-top: 1px solid var(--line); }
.apop-specs div { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.apop-specs dt { font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.apop-specs dd { margin: 3px 0 0; font: 600 14px/1.3 var(--mono); }
.apop-note { margin: 0; font-size: 13px; color: var(--muted); }
.apop-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 12px; }
.apop-foot b { font: 900 22px/1 var(--display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apop-media.small .apop-main { min-height: 220px; }
.apop-machines { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; border: 0; }
.apop-machines legend { margin-bottom: 8px; font: 700 14px/1.2 var(--text); }
.apop-machines label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; transition: border-color .2s, background .2s; }
.apop-machines label:has(input:checked) { border-color: #455539; background: #eaf2ec; }
.apop-machines input { accent-color: #455539; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; border: 0; }
.apop-machines label { min-height: 0; font-weight: 600; }
.apop-media.small { place-items: center; }
.apop-media.small .apop-main img { max-height: 280px; }
.apop-card.ask { grid-template-columns: .8fr 1.2fr; }
.apop .btn-ghost::after, .apop [data-back]::after { content: none; }
.apop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apop-grid label { display: grid; gap: 4px; font: 600 13px/1.2 var(--text); }
.apop-grid input { padding: 10px 12px; border: 1px solid var(--line); font: 400 15px/1.2 var(--text); background: #fff; }
.apop-form .btn.is-sending::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.apop-form .btn.is-sent { background: #e4efe7; color: var(--green-1); }
.apop-form .btn.is-sent::after { content: '\2713 '; }

/* ---------- TechText: Weltname als interaktiver Schriftzug ---------- */
.tech-word { position: relative; height: clamp(110px, 17vw, 250px); margin: 0 0 clamp(18px, 2.4vw, 34px); font-family: var(--display); touch-action: pan-y; user-select: none; }
.tech-canvas { display: block; width: 100%; height: 100%; }
.welt-filme { position: relative; overflow: hidden; isolation: isolate; }
.welt-filme .grain, .welt-gallery .grain { z-index: 0; }
.welt-filme .wrap { position: relative; z-index: 1; }
.grain.noise { inset: 0; animation: none; opacity: 1; mix-blend-mode: soft-light; background-size: 180px 180px; image-rendering: pixelated; }

@media (max-width: 900px) {
  .apop-card { grid-template-columns: 1fr; }
  .apop-main { min-height: 200px; }
  .apop-main img { max-height: 240px; }
  .apop-machines, .apop-grid, .apop-specs { grid-template-columns: 1fr; }
  .lbox button { width: 42px; height: 42px; }
  .story-card .cap { margin: -70px 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .story-card .cap, .mosaic .cap, .film figcaption { transform: none !important; } }

/* ---------- Mausleuchten auf dunklen Sektionen: nur Grün und waagerechte Linien ---------- */
.welt .lit-text { --lx: -9999px; --ly: -9999px;
  background-image: radial-gradient(circle 260px at var(--lx) var(--ly), #f7f9ef 0%, #ddecac 22%, rgba(185, 208, 112, 0) 72%), var(--grad-glow);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.welt .lit-line { --lx: -9999px; --ly: -9999px; border-image: radial-gradient(circle 240px at var(--lx) var(--ly), #e8edce 0%, #9dbd52 30%, rgba(255, 255, 255, .14) 72%) 1; }
.welt .welt-feats ul.lit-line { border-top: 1px solid; border-bottom: 1px solid; padding: 16px 0; }
.welt .bridge-bar.lit-line { border-top: 1px solid; height: 1px; background: none; }
.welt .bridge-bar.lit-line i { margin-top: -1px; height: 2px; }

/* ---------- Unsichtbare Ebenen dürfen keine Klicks schlucken ---------- */
.lbox[hidden], .apop[hidden] { display: none !important; }

/* ---------- Hero-Text besser lesbar ---------- */
.welt .lp-hero::before {
  background:
    linear-gradient(180deg, rgba(5, 12, 8, .7) 0%, rgba(5, 12, 8, 0) 26%),
    linear-gradient(90deg, rgba(5, 12, 8, .92) 0%, rgba(5, 12, 8, .78) 36%, rgba(5, 12, 8, .3) 66%, rgba(5, 12, 8, .05) 100%) !important; }
.welt .lp-hero-in :is(h1, .lead, .eyebrow, .crumbs, .trust) { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.welt .lp-hero h1 span { text-shadow: none; filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .55)); }
@media (max-width: 900px) {
  .welt .lp-hero::before { background: linear-gradient(180deg, rgba(5, 12, 8, .72) 0%, rgba(5, 12, 8, .45) 30%, rgba(5, 12, 8, .82) 62%, rgba(5, 12, 8, .9) 100%) !important; }
}

/* ---------- Leuchtkreis auf hellen Sektionen: dunkles Grün wird hellgrün, Linien leuchten grün ---------- */
.welt :is(.welt-story, .welt-anbau, .welt-decide, .section.alt, .benefits) .lit-text {
  background-image: radial-gradient(circle 260px at var(--lx) var(--ly), #9fc740 0%, #78992c 26%, rgba(120, 153, 44, 0) 70%), var(--grad-text); }
.welt :is(.welt-story, .welt-anbau, .welt-decide, .section.alt, .benefits) .lit-line {
  border-image: radial-gradient(circle 240px at var(--lx) var(--ly), #93bb36 0%, #678326 30%, var(--line) 72%) 1; }
.welt .tools li.lit-line, .welt .pains li.lit-line { border-left: 0; border-right: 0; }

/* ---------- Randlicht ohne Maus (Telefon): ganzer Rand leuchtet, solange die Karte in der Mitte steht ---------- */
.glow-edge.glow-auto > .edge-light { opacity: .75 !important; -webkit-mask: none; mask: none; transition: opacity .8s ease; }

/* ---------- Großansicht: Schließen-Feld größer, auf dem Telefon Pfeile unten ---------- */
.lbox-stage img, .lbox-stage video { touch-action: pan-y; }
@media (max-width: 900px) {
  .lbox-prev, .lbox-next { top: auto; bottom: 18px; translate: none; }
  .lbox-prev { left: calc(50% - 56px); } .lbox-next { right: calc(50% - 56px); }
  .lbox-cap { margin-bottom: 64px; }
}

/* =====================================================================
   Randlicht (randlicht.js): Linien, Rahmen, Knöpfe und grüne Schrift leuchten nach Nähe
   ===================================================================== */
.welt { --rl-hell: #a6cb4e; --rl-farbe: #647f25; --rl-schein: 31, 138, 74; --rl-weite: 220px; --rl-dicke: 2px; }
.welt :is(.lp-hero, .welt-feats, .welt-bridge, .welt-gallery, .welt-filme, .demo-v2, .site-footer) { --rl-hell: #f1f4e3; --rl-farbe: #b9cf6f; --rl-schein: 124, 214, 156; }
html.rl-lauf .welt, html.rl-lauf .welt * { --rl-weite: 140px; --rl-dicke: 1.5px; }
.rl-kante::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(var(--rl-weite) circle at var(--gx, 50%) var(--gy, 50%), var(--rl-hell) 0%, var(--rl-farbe) 32%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(var(--k-o, 0) * var(--rl-dicke)) no-repeat,
                linear-gradient(#000 0 0) bottom / 100% calc(var(--k-u, 0) * var(--rl-dicke)) no-repeat,
                linear-gradient(#000 0 0) left / calc(var(--k-l, 0) * var(--rl-dicke)) 100% no-repeat,
                linear-gradient(#000 0 0) right / calc(var(--k-r, 0) * var(--rl-dicke)) 100% no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(var(--k-o, 0) * var(--rl-dicke)) no-repeat,
                linear-gradient(#000 0 0) bottom / 100% calc(var(--k-u, 0) * var(--rl-dicke)) no-repeat,
                linear-gradient(#000 0 0) left / calc(var(--k-l, 0) * var(--rl-dicke)) 100% no-repeat,
                linear-gradient(#000 0 0) right / calc(var(--k-r, 0) * var(--rl-dicke)) 100% no-repeat;
  opacity: calc(var(--nah, 0) * .95); transition: opacity .16s ease-out; }
.rl-schein { box-shadow: 0 0 0 1px rgba(var(--rl-schein), calc(var(--nah, 0) * .7)), 0 0 26px rgba(var(--rl-schein), calc(var(--nah, 0) * .28)); transition: box-shadow .16s ease-out, background-position .5s ease, translate .5s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.34, 1.8, .64, 1), transform .2s; }
.rl-text { filter: brightness(calc(1 + var(--nah, 0) * .75)) drop-shadow(0 0 calc(var(--nah, 0) * 12px) rgba(var(--rl-schein), calc(var(--nah, 0) * .6))); transition: filter .16s ease-out; }
.welt .lp-hero h1 .rl-text, .welt .lp-hero h1 span.rl-text { filter: brightness(calc(1 + var(--nah, 0) * .6)) drop-shadow(0 3px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 calc(var(--nah, 0) * 12px) rgba(var(--rl-schein), calc(var(--nah, 0) * .6))); }
/* altes Randlicht und Lichtkreis ausgeschaltet */
.edge-light { display: none !important; }
@media (prefers-reduced-motion: reduce) { .rl-kante::after { display: none; } .rl-schein { box-shadow: none; } .rl-text { filter: none; } }

/* ---------- Umlaut-Punkte: Verlaufsschrift malt nur innerhalb ihrer Box – Luft oben und unten geben ---------- */
.welt .display span { padding: .14em 0 .08em; margin: -.14em 0 -.08em; }
.welt .js-motion .clip > span, .js-motion .welt .clip > span { clip-path: inset(-.4em 100% -.3em 0); }
.js-motion .welt .clip.in > span { clip-path: inset(-.4em -.3em -.3em 0); }

/* ---------- Technischer Schriftzug: mehr Luft über und unter den Buchstaben ---------- */
.tech-word { height: clamp(200px, 30vw, 420px); margin: calc(-1 * clamp(10px, 2vw, 30px)) 0 clamp(10px, 2vw, 26px); }

/* ---------- Randlicht zurückhaltender: schmaler Lichtfleck, schwächer, schneller auslaufend ---------- */
.welt { --rl-weite: 150px; --rl-dicke: 1.5px; }
html.rl-lauf .welt, html.rl-lauf .welt * { --rl-weite: 90px; --rl-dicke: 1px; }
.rl-kante::after { background: radial-gradient(var(--rl-weite) circle at var(--gx, 50%) var(--gy, 50%), var(--rl-hell) 0%, var(--rl-farbe) 22%, transparent 60%); opacity: calc(var(--nah, 0) * .7); }
.rl-schein { box-shadow: 0 0 0 1px rgba(var(--rl-schein), calc(var(--nah, 0) * .45)), 0 0 18px rgba(var(--rl-schein), calc(var(--nah, 0) * .16)); }
.rl-text { filter: brightness(calc(1 + var(--nah, 0) * .5)) drop-shadow(0 0 calc(var(--nah, 0) * 8px) rgba(var(--rl-schein), calc(var(--nah, 0) * .4))); }

/* ---------- Randlicht wie im Barber-Projekt (brand.css dort): dünner Ring, Lichtstreifen auf der Linie, Textschein ---------- */
.welt { --rl-lit: #bad857; --rl-col: #718f2a; --rl-glow: 60, 200, 120; }
.welt :is(.lp-hero, .welt-feats, .welt-bridge, .welt-gallery, .welt-filme, .demo-v2, .site-footer) { --rl-lit: #f6f8eb; --rl-col: #c4d97f; --rl-glow: 160, 235, 185; }
.rl-kante::after {
  padding: 0; border-radius: 0;
  -webkit-mask: none; mask: none;
  background:
    radial-gradient(var(--rl-weite, 240px) 3px at var(--gx, 50%) 0,    var(--rl-lit), transparent 70%),
    radial-gradient(var(--rl-weite, 240px) 3px at var(--gx, 50%) 100%, var(--rl-lit), transparent 70%),
    radial-gradient(3px var(--rl-weite, 240px) at 0    var(--gy, 50%), var(--rl-lit), transparent 70%),
    radial-gradient(3px var(--rl-weite, 240px) at 100% var(--gy, 50%), var(--rl-lit), transparent 70%);
  background-repeat: no-repeat; background-position: top, bottom, left, right;
  background-size: 100% calc(var(--k-o, 0) * var(--rl-dicke, 2px)), 100% calc(var(--k-u, 0) * var(--rl-dicke, 2px)),
                   calc(var(--k-l, 0) * var(--rl-dicke, 2px)) 100%, calc(var(--k-r, 0) * var(--rl-dicke, 2px)) 100%;
  opacity: calc(var(--nah, 0) * .9); transition: opacity .16s ease-out; }
/* Vollrahmen: 1-px-Ring, per Maske ausgestanzt – es leuchtet die Kante, nicht die Fläche */
.rl-kante.rl-ring::after {
  padding: 1px; border-radius: inherit;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), var(--rl-lit) 0%, var(--rl-col) 32%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background-size: auto; background-position: 0 0; opacity: calc(var(--nah, 0) * .85); }
.welt { --rl-weite: 240px; --rl-dicke: 2px; }
html.rl-lauf .welt, html.rl-lauf .welt * { --rl-weite: 130px; --rl-dicke: 1px; }
html.rl-lauf .rl-kante.rl-ring::after { background: radial-gradient(120px circle at var(--gx, 50%) var(--gy, 50%), var(--rl-lit) 0%, var(--rl-col) 32%, transparent 68%); }
.rl-schein { box-shadow: 0 0 0 1px rgba(var(--rl-glow), calc(var(--nah, 0) * .55)), 0 0 26px rgba(var(--rl-glow), calc(var(--nah, 0) * .16)); }
.rl-text { filter: none; text-shadow: 0 0 calc(var(--nah, 0) * 3px) rgba(var(--rl-glow), calc(var(--nah, 0) * .55)), 0 0 calc(var(--nah, 0) * 20px) rgba(var(--rl-glow), calc(var(--nah, 0) * .45)); transition: text-shadow .16s ease-out; }
.welt .lp-hero h1 span.rl-text { filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .55)); }

/* Grüne Schrift: nur ein enger, kurzer Schein – der Verlauf darunter bleibt lesbar */
.rl-text { text-shadow: 0 0 calc(var(--nah, 0) * 2px) rgba(var(--rl-glow), calc(var(--nah, 0) * .35)), 0 0 calc(var(--nah, 0) * 9px) rgba(var(--rl-glow), calc(var(--nah, 0) * .22)); transition: text-shadow .35s ease-out; }

/* ---------- Arbeiten-Leiste im Hero (unter den Knöpfen) ---------- */
.hero-feats { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 30px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); max-width: 760px; }
.hero-feats li { display: flex; align-items: center; gap: 12px; padding: 4px 26px 4px 0; margin-right: 26px; border-right: 1px solid rgba(255, 255, 255, .18); }
.hero-feats li:last-child { border-right: 0; margin-right: 0; }
.hero-feats span { font: 700 13px/1.25 var(--text); letter-spacing: .06em; text-transform: uppercase; color: #eef3ef; }

/* ---------- Symbole grün, leuchten bei Mausnähe (randlicht.js setzt --nah) ---------- */
.hero-feats svg, .welt-promise svg { width: 34px; height: 34px; flex: none; fill: none; stroke: #b9cf6f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(var(--nah, 0) * 10px) rgba(193, 214, 124, calc(var(--nah, 0) * .9))) brightness(calc(1 + var(--nah, 0) * .5));
  transition: filter .2s ease-out, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.hero-feats li:hover svg, .welt-promise li:hover svg { transform: translateY(-2px) scale(1.06); }

/* ---------- Versprechen-Band unter dem Video: breit, drei Spalten ---------- */
.welt-promise .wrap { max-width: none; }
.welt .welt-promise ul { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1320px; margin: 0 auto; }
.welt-promise li { display: flex; align-items: center; gap: 16px; padding: 10px clamp(16px, 3vw, 40px); justify-content: flex-start; }
.welt-promise li + li { border-left: 1px solid rgba(201, 169, 120, .35); }
.welt-promise svg { width: 40px; height: 40px; }
.welt-promise b { display: block; font: 900 clamp(15px, 1.3vw, 19px)/1.15 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.welt-promise span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: #d1e0a1; }
@media (max-width: 900px) {
  .hero-feats { gap: 12px 0; }
  .hero-feats li { flex: 1 1 45%; margin-right: 0; padding-right: 10px; border-right: 0; }
  .hero-feats svg { width: 28px; height: 28px; }
  .hero-feats span { font-size: 11.5px; }
  .welt .welt-promise ul { grid-template-columns: 1fr; gap: 6px; }
  .welt-promise li + li { border-left: 0; border-top: 1px solid rgba(201, 169, 120, .25); }
  .welt-promise li { padding: 12px 4px; }
}
.welt-promise span { font: 400 14px/1.4 var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; color: #d1e0a1 !important; }

/* Versprechen-Band in der Optik der früheren Leiste: Symbol + zwei kurze Zeilen, breit verteilt */
.welt .welt-promise ul { max-width: 1100px; }
.welt-promise li { justify-content: center; gap: 14px; padding: 6px 18px; }
.welt-promise svg { width: 34px; height: 34px; }
.welt-promise span { font: 700 13px/1.25 var(--text) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #eef2ee !important; margin: 0; }
@media (max-width: 900px) { .welt .welt-promise ul { grid-template-columns: repeat(3, 1fr); gap: 0; } .welt-promise li { flex-direction: column; gap: 8px; text-align: center; padding: 6px 4px; } .welt-promise li + li { border-top: 0; border-left: 1px solid rgba(201, 169, 120, .3); } .welt-promise span { font-size: 11px !important; } }
/* Band nur so weit in den Hero ziehen, dass die schräge Unterkante unter dem Video liegt */
.welt-feats { margin-top: -96px; }
.welt .lp-hero-in { padding-bottom: clamp(130px, 12vw, 180px); }
@media (max-width: 900px) { .welt-feats { margin-top: -60px; } .welt .lp-hero-in { padding-bottom: 90px; } }

/* Ursprünglicher Aufbau (Nutzerwunsch): Versprechen unter den Knöpfen – breiter; Arbeiten im Band – Symbole grün und leuchtend */
.welt .lp-hero .trust { max-width: 980px; justify-content: space-between; }
.welt .lp-hero .trust li { flex: 1 1 0; padding: 0 28px; }
.welt .lp-hero .trust li:first-child { padding-left: 0; }
.welt .lp-hero .trust b { font-size: 16px; }
.welt .lp-hero .trust span { font-size: 12.5px; }
.welt .welt-feats svg { stroke: #b9cf6f; filter: drop-shadow(0 0 calc(var(--nah, 0) * 10px) rgba(193, 214, 124, calc(var(--nah, 0) * .9))) brightness(calc(1 + var(--nah, 0) * .5));
  transition: filter .2s ease-out, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.welt .welt-feats li:hover svg { transform: translateY(-2px) scale(1.06); }

/* ---------- FAQ: Mikroanimationen ---------- */
.faq-list .faq-body { overflow: hidden; }
.faq-list summary { transition: color .25s ease, padding-left .45s cubic-bezier(.22, 1, .36, 1); }
.faq-list summary:hover { color: var(--green-2); padding-left: 6px; }
.faq-list summary::after { content: ''; top: 50%; right: 4px; width: 28px; height: 28px; margin-top: -14px; border: 1.5px solid currentColor; border-radius: 50%;
  color: #5d7722; background:
    linear-gradient(currentColor, currentColor) center / 12px 1.8px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.8px 12px no-repeat;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, color .3s; }
.faq-list details.is-open summary::after, .faq-list details[open] summary::after { transform: rotate(135deg); background-color: #455539; color: #fff; }
.faq-list details { transition: background-color .35s ease; }
.faq-list details.is-open { background: linear-gradient(90deg, rgba(103, 131, 38, .06), transparent 70%); }
.faq-list details p { padding-right: 40px; }

/* Hero-Video: maximal herausgezoomt – kein Scale, ganzes Bild */
.welt .lp-hero-pic video { transform: none !important; will-change: auto; object-position: center center; }
/* Unterkante des Videos: Korn und Verlauf laufen weich aus, keine sichtbare Naht zum Band */
.welt .lp-hero > .grain { -webkit-mask: linear-gradient(180deg, #000 55%, transparent 88%); mask: linear-gradient(180deg, #000 55%, transparent 88%); }
.welt .wh-fade { height: 46%; background: linear-gradient(180deg, rgba(9, 20, 13, 0) 0%, rgba(9, 20, 13, .5) 35%, rgba(9, 20, 13, .92) 62%, #09140d 78%, #09140d 100%) !important; }
.welt .welt-feats { background: linear-gradient(180deg, rgba(9, 20, 13, 0) 0, #09140d 45%) !important; }

/* ---------- Produktseite: Welt-System, aber normales Menü (heller Hero) ---------- */
.welt.produkt .site-header { position: sticky; background: rgba(250, 248, 243, .82); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); }
.welt.produkt .site-header:not(.is-scrolled):not(.open) :is(.nav a, .head-tel) { color: var(--ink); }
.welt.produkt .site-header:not(.is-scrolled):not(.open) .logo-word { background: var(--brand); }
.welt.produkt .site-header:not(.is-scrolled):not(.open) .logo small { color: var(--muted); }
.welt.produkt .site-header:not(.is-scrolled):not(.open) .logo-icon { filter: none; }
.welt.produkt .site-header:not(.is-scrolled):not(.open) .menu-btn { background: var(--surface); border-color: var(--line); }
.welt.produkt .site-header:not(.is-scrolled):not(.open) .menu-btn span { background: var(--ink); }
.welt.produkt .gallery figure, .welt.produkt .tech .pic { overflow: hidden; }
.welt.produkt .gallery img, .welt.produkt .tech .pic img { transition: scale 1s cubic-bezier(.22, 1, .36, 1); }
.welt.produkt .gallery figure:hover img, .welt.produkt .tech .card:hover .pic img { scale: 1.06; }
.welt.produkt .card { transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s cubic-bezier(.22, 1, .36, 1); }
.welt.produkt .card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -18px rgba(21, 26, 18, .3); }
button.btn { cursor: pointer; font: inherit; }

/* Hero-Text der Einsatzwelten über die volle Breite (nur ein Seitenrand) */
.welt .lp-hero-in.wrap { max-width: none; padding-inline: clamp(20px, 5vw, 110px); }
.welt .lp-hero h1.display { font-size: clamp(32px, 5.6vw, 118px); }
.welt .lp-hero .lead { max-width: 62ch; font-size: clamp(17px, 1.25vw, 22px); }
.welt .lp-hero .trust { max-width: 1200px; }
.welt .lp-hero::before { background:
    linear-gradient(180deg, rgba(5, 12, 8, .7) 0%, rgba(5, 12, 8, 0) 26%),
    linear-gradient(90deg, rgba(5, 12, 8, .9) 0%, rgba(5, 12, 8, .72) 45%, rgba(5, 12, 8, .25) 78%, rgba(5, 12, 8, .05) 100%) !important; }
/* Kopfzeile auf den Welt-Seiten auf dieselbe Kante wie der breite Hero-Text */
body.welt:not(.produkt) .head-in.wrap { max-width: none; padding-inline: clamp(20px, 5vw, 110px); }
/* etwas schmaler und kleiner (Nutzerwunsch): Mittelweg zwischen Wrap und voller Breite */
.welt .lp-hero-in.wrap, body.welt:not(.produkt) .head-in.wrap { padding-inline: clamp(20px, 10vw, 220px); }
.welt .lp-hero h1.display { font-size: clamp(32px, 4.5vw, 92px); }
.welt .lp-hero .lead { font-size: clamp(16px, 1.1vw, 19px); max-width: 58ch; }
.welt .lp-hero .trust { max-width: 1040px; }

/* =====================================================================
   Typografie der Versprechen-Leiste als Seitenstandard:
   Titel = Montserrat 900 Versalien, Unterzeile = IBM Plex Mono
   ===================================================================== */
.welt { --t-title: 900 15px/1.15 var(--display); --t-sub: 500 12px/1.35 var(--mono); }

/* Arbeiten-Band: an der Hero-Kante ausgerichtet, Linie oben, näher am Text */
.welt .welt-feats { margin-top: -150px; padding-top: 0; }
.welt .welt-feats .wrap { max-width: none; padding-inline: clamp(20px, 10vw, 220px); }
.welt .welt-feats ul { display: grid; grid-template-columns: repeat(4, 1fr); max-width: none; margin: 0; padding: 22px 0 6px; border-top: 1px solid rgba(255, 255, 255, .16); }
.welt .welt-feats li { justify-content: flex-start; align-items: flex-start; gap: 14px; padding: 4px 24px; }
.welt .welt-feats li:first-child { padding-left: 0; }
.welt .welt-feats li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.welt .welt-feats svg { width: 30px; height: 30px; margin-top: 1px; }
.welt .welt-feats b { display: block; font: var(--t-title); text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.welt .welt-feats li span { display: block; margin-top: 5px; font: var(--t-sub); letter-spacing: 0; text-transform: none; color: #d1e0a1; }
.welt .lp-hero-in { padding-bottom: clamp(190px, 16vw, 240px); }

/* Seitenweit: Vorzeilen, Unterschriften, Listen */
.welt .eyebrow { font: 600 12px/1.2 var(--mono); letter-spacing: .16em; }
.welt .film figcaption span, .welt .lbox-cap, .welt .bridge-checks s, .welt .trust span, .welt .acard li { font: var(--t-sub); letter-spacing: 0; }
.welt .lbox-cap { text-transform: none; }
.welt .mosaic .cap { font: 900 13px/1.2 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.welt .bridge-checks b { font: 800 16px/1.3 var(--display); letter-spacing: -.005em; }
.welt .story-card .cap em, .welt .mcard-brand, .welt .al-item small { font-family: var(--mono); }
.welt .film figcaption b, .welt .trust b, .welt .acard h3, .welt .step-body h3, .welt .ben b { font-family: var(--display); font-weight: 900; text-transform: uppercase; }

@media (max-width: 900px) {
  .welt .welt-feats { margin-top: -70px; }
  .welt .welt-feats ul { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .welt .welt-feats li { padding: 4px 12px; }
  .welt .welt-feats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .welt .welt-feats svg { width: 26px; height: 26px; }
  .welt .welt-feats b { font-size: 12.5px; }
  .welt .welt-feats li span { font-size: 11px; }
  .welt .lp-hero-in { padding-bottom: 120px; }
}
.welt .lp-hero-in { padding-bottom: clamp(150px, 12vw, 190px); }
.welt .welt-feats ul { padding-bottom: 0; }
.welt .welt-feats { padding-bottom: calc(var(--cut) + 34px); }

/* =====================================================================
   v4 (29.09.2026): rahmenlos, Produktkarten dunkel, eine Leiste im Hero,
   Sektionswechsel „ausschalten“, Anfrage-Einstieg statt Formular
   ===================================================================== */

/* ---------- Hero: eine Leiste; auf dem Telefon liegt sie unter dem Video, nicht darüber ---------- */
.welt .lp-hero .eyebrow { max-width: none; line-height: 1.5; }
@media (max-width: 900px) {
  .welt .lp-hero { min-height: 86svh; }
  .welt .lp-hero-in { padding-bottom: 34px; }
  .welt .wh-fade { height: 34%; background: linear-gradient(180deg, rgba(9, 20, 13, 0) 0%, rgba(9, 20, 13, .75) 55%, #09140d 100%) !important; }
  .welt .welt-feats { margin-top: 0; background: #09140d !important; padding-top: 6px; }
  .welt .welt-feats ul { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .welt .welt-feats li, .welt .welt-feats li:nth-child(odd) { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 0; border-left: 0; }
  .welt .welt-feats b { font-size: 12.5px; line-height: 1.2; }
  .welt .welt-feats li span { font-size: 11px; line-height: 1.35; }
}

/* ---------- Problem-Geschichte: Bild oben, Text darunter – nichts liegt mehr halb über dem Foto ---------- */
.story-card .ph { aspect-ratio: 4 / 3.3; }
.story-card .ph::after { content: none; }
.story-card .cap { margin: 18px 4px 0; transform: none !important; }
.story-card .cap b { margin-bottom: 8px; }

/* ---------- Rahmen weg: Flächen und Schatten statt Linien ---------- */
.welt :is(.mcard, .step, .ben li, .more-worlds a, .bridge-tools li) { border: 0 !important; }
.welt .mcard, .welt .step { box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 18px 40px -26px rgba(25, 31, 21, .35); }
.welt .ben { border: 0; border-image: none; gap: 14px; background: none; }
.welt .ben li { background: var(--surface); box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 18px 40px -26px rgba(25, 31, 21, .35); }
.welt .more-worlds a { background: var(--surface); box-shadow: 0 1px 2px rgba(20, 30, 20, .05), 0 18px 40px -26px rgba(25, 31, 21, .35);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s cubic-bezier(.22, 1, .36, 1); }
.welt .more-worlds a:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 30, 20, .06), 0 26px 50px -24px rgba(25, 31, 21, .45); }
.bridge-tools li { background: rgba(255, 255, 255, .05); }
.welt .welt-filme { padding-bottom: clamp(40px, 5vw, 70px); }
.welt .welt-filme + .welt-gallery { margin-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); padding-top: clamp(10px, 2vw, 30px); }

/* ---------- Produktkarten: innen dunkel, Gerät steht im Lichtkegel ---------- */
.acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.acard { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; color: #e9f0eb; isolation: isolate;
  background: linear-gradient(180deg, #1c2217 0%, #11150e 100%); box-shadow: 0 24px 50px -30px rgba(12, 14, 10, .8);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s cubic-bezier(.22, 1, .36, 1); }
.acard::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(90% 60% at 50% 30%, rgba(157, 190, 80, .22), transparent 70%); }
.acard:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(16, 20, 14, .9), inset 0 0 0 1px rgba(196, 217, 127, .35); }
.acard:hover::before { opacity: 1; }
.acard:focus-visible { outline: 2px solid #88a740; outline-offset: 3px; }
.acard-pic { position: relative; aspect-ratio: 1 / .78; display: grid; place-items: end center; padding: 12% 10% 11%;
  background: radial-gradient(60% 46% at 50% 58%, rgba(228, 232, 206, .2) 0%, rgba(228, 232, 206, .05) 55%, transparent 75%); }
.acard-pic::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 10%; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); filter: blur(3px); }
.acard-pic img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .55)) brightness(1.06) contrast(1.04); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.acard:hover .acard-pic img { transform: scale(1.07) translateY(-6px); }
.acard-body { display: flex; flex-direction: column; flex: 1; padding: 4px 18px 18px; }
.acard h3 { margin: 0 0 8px; font: 900 16.5px/1.15 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: #fff; }
.acard p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #cedd9a; }
.acard ul { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 16px; padding: 0; list-style: none; }
.welt .acard li { padding: 5px 8px; background: rgba(255, 255, 255, .07); color: #e2e5d6; }
.acard-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding-top: 14px; border-top: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) top left / 100% 1px no-repeat; }
.acard-foot b { font: 900 16.5px/1.1 var(--display); background: linear-gradient(135deg, #eef2db, #c4d97f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acard-open { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px;
  font: 700 13.5px/1 var(--text); color: #fff; background: rgba(196, 217, 127, .14); transition: background .35s ease, color .35s ease; }
.acard-open::after { content: '+'; font: 400 20px/1 var(--text); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.acard:hover .acard-open { background: linear-gradient(135deg, #455539, #7a9a2f); }
.acard:hover .acard-open::after { transform: rotate(90deg); }
.acard-foot .more { grid-column: 2; grid-row: 1; font-size: 12.5px; color: #c0d47e; }
.acard-foot .more:hover { color: #fff; }
@media (max-width: 900px) {
  .acards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acard-body { padding: 2px 12px 12px; }
  .acard h3 { font-size: 13.5px; }
  .acard p { display: none; }
  .acard ul { margin-bottom: 10px; }
  .welt .acard li:nth-child(n+3) { display: none; }
  .acard-foot { grid-template-columns: 1fr; }
  .acard-foot .more { display: none; }
  .acard-open { padding: 10px; font-size: 12.5px; }
}

/* ---------- Vorführung: Einstieg in die Anfrage statt nacktem Formular ---------- */
.ask-start { align-self: center; padding: clamp(22px, 2.6vw, 34px); background: #f6f4ee; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.ask-kicker { margin: 0; font: 600 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.ask-title { margin: 8px 0 18px; font: 900 clamp(22px, 2.2vw, 30px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.ask-opts { display: grid; gap: 10px; }
.ask-opt { position: relative; display: grid; grid-template-columns: 48px 1fr 20px; grid-template-rows: auto auto; column-gap: 14px; align-items: center; width: 100%;
  padding: 14px 16px; border: 0; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 30, 20, .06), 0 12px 26px -18px rgba(29, 36, 24, .35);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1), background .35s, color .35s; }
.ask-opt svg { grid-row: 1 / 3; width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: #eef3ee; fill: none; stroke: #38462e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .35s, stroke .35s; }
.ask-opt b { align-self: end; font: 900 15px/1.2 var(--display); text-transform: uppercase; }
.ask-opt span { align-self: start; font-size: 13.5px; color: var(--muted); transition: color .35s; }
.ask-opt::after { content: '\2197 '; grid-column: 3; grid-row: 1 / 3; font: 700 16px/1 var(--text); color: #455539; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .35s; }
.ask-opt:hover { transform: translateY(-3px); background: linear-gradient(135deg, #242c1e, #3d4c33); color: #fff; box-shadow: 0 22px 40px -20px rgba(36, 44, 30, .8); }
.ask-opt:hover svg { background: rgba(255, 255, 255, .14); stroke: #fff; }
.ask-opt:hover span { color: #e3e7cf; }
.ask-opt:hover::after { color: #fff; transform: translate(3px, -3px); }
.ask-opt:active { transform: scale(.98); }
.ask-tel { display: block; margin-top: 16px; font-size: 14px; color: var(--muted); text-decoration: none; }
.ask-tel b { color: var(--green-2); }
.ask-tel:hover b { text-decoration: underline; }

/* Karten: Bildfläche fest (Gerät gleich hoch in jeder Karte), Preis allein in seiner Zeile, Link zur Produktseite oben rechts */
.acard-pic { display: block; }
.acard-pic img { position: absolute; left: 10%; right: 10%; top: 12%; bottom: 12%; width: 80%; height: 76%; }
.acard-foot { grid-template-columns: 1fr; }
.acard-foot b { white-space: nowrap; }
.acard-foot .more { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 8px; background: rgba(255, 255, 255, .08); font: 600 11.5px/1 var(--text); color: #dde0cf; opacity: 0; transition: opacity .35s ease, background .25s; }
.acard:hover .acard-foot .more, .acard:focus-within .acard-foot .more { opacity: 1; }
.acard-foot .more:hover { background: rgba(255, 255, 255, .18); }
@media (hover: none) { .acard-foot .more { opacity: 1; } }
/* Telefon: eine allein stehende letzte Karte liegt quer über die volle Breite */
@media (max-width: 900px) {
  .acard:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 44% 1fr; }
  .acard:last-child:nth-child(odd) .acard-pic { aspect-ratio: auto; min-height: 150px; }
  .acard:last-child:nth-child(odd) .acard-body { padding: 14px 12px 12px 0; }
}
/* Telefon-Hero: oben das Video frei (der Ausschnitt folgt dem Geschehen), darunter der Text auf Dunkel –
   kein Text mehr über der Maschine */
@media (max-width: 900px) {
  .welt .lp-hero { display: block; min-height: 0; background: #09140d; }
  .welt .lp-hero-pic { bottom: auto; height: 54svh; }
  .welt .lp-hero-pic::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(9, 20, 13, .55) 0%, rgba(9, 20, 13, 0) 22%, rgba(9, 20, 13, 0) 58%, #09140d 100%); }
  .welt .lp-hero::before { background: none !important; }
  .welt .lp-hero-in { padding-top: calc(54svh - 64px); padding-bottom: 28px; }
  .welt .lp-hero > .grain { -webkit-mask: linear-gradient(180deg, #000 0, #000 50svh, transparent 60svh); mask: linear-gradient(180deg, #000 0, #000 50svh, transparent 60svh); }
  .welt .wh-fade { display: none; }
  .welt .lp-hero .crumbs { display: none; }
}

/* ---------- Hero-Hook unter der H1: klein gebaut – Großes schaffen (29.09., ersetzt die Vorzeile) ---------- */
.welt .lp-hero .hook { margin: clamp(10px, 1.2vw, 18px) 0 0; font: italic 600 clamp(19px, 1.55vw, 27px)/1.3 var(--text); letter-spacing: -.01em; color: #eef4ef;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.welt .lp-hero .hook em { font-size: .78em; font-weight: 500; color: var(--brass-2); margin-right: .15em; }
.welt .lp-hero .hook b { font: italic 900 1.32em/1 var(--display); letter-spacing: -.02em; background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .1em .06em .06em 0; }
.welt .lp-hero .lead { margin-top: clamp(14px, 1.4vw, 22px); }

/* ---------- Zwei Filme: gleich groß nebeneinander, Vorführ-Zeile quer darunter ---------- */
.films.pair { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
.films.pair .film:not(.film-cta) { aspect-ratio: 16 / 9; }
.films.pair .film-cta { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 24px; padding: 24px 28px; }
.films.pair .film-cta em { margin: 0; justify-self: end; }
@media (max-width: 900px) {
  .films.pair { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .films.pair .film-cta { grid-template-columns: 1fr; }
  .films.pair .film-cta em { justify-self: start; }
  .films.pair .film figcaption span { display: block; }
  .films.pair .film:not(.big) figcaption b { font-size: 15px; }
}
/* Nahtlinien: Sektionsgrenzen liegen oft auf halben Pixeln – die Kantenglättung ließ dort den hellen Seitengrund
   als weißen Strich durchblitzen. Dunkle Nachbarn überlappen deshalb um 2 px. */
.welt .welt-filme + .welt-gallery { margin-top: -2px; }
.welt :is(.story-card .ph, .step-pic, .mcard-pic, .mosaic li, .film) { background: #16221a; }

/* Curated original imagery for each Einsatzwelt */
.welt-original{background:#ecebe5;color:#17332a}.welt-original .eyebrow{color:#316b4a}.welt-original .lead{max-width:27rem}.welt-original-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:1rem}.welt-original-grid figure{margin:0;min-width:0;background:#f7f6f0}.welt-original-grid img{display:block;width:100%;height:clamp(250px,30vw,430px);object-fit:cover}.welt-original-grid figcaption{display:grid;gap:.4rem;padding:1.1rem 1.25rem 1.35rem;font-size:.9rem;line-height:1.5}.welt-original-grid figcaption strong{font-size:1.25rem;line-height:1.15}.welt-original-grid figcaption span{opacity:.72}@media(max-width:760px){.welt-original-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem}.welt-original-grid figure{flex:0 0 min(82vw,370px);scroll-snap-align:start}.welt-original-grid img{height:280px}}
.welt-original-grid::-webkit-scrollbar{display:none}@media(max-width:760px){.welt-original-grid{scrollbar-width:none}}

/* 31.10.2026 Nutzer: Seiten sollen sich beim Laden sauber aufbauen, nicht erst alles zeigen, dann verschwinden und animiert wiederkommen.
   Die Elemente, die welt.js gleich aufdeckt (gleiche Auswahl wie dort), sind schon vor dem ersten Bild versteckt, im selben Zustand wie .rv/.clip.
   Sobald welt.js läuft (html.js-motion), übernehmen .rv/.clip ohne sichtbaren Sprung. Fällt das Skript aus, kommt alles nach 3 s von selbst. */
html:not(.js-motion) body.welt :is(.eyebrow, .lead, .lp-hero .btn-row, .trust, .bridge-copy > p, .decide-grid p, .section-head .lead, .benefits .btn-row, .how li, .scarce, .welt-feats li, .story-cards > li, .story-list > li, .steps-v2 > article, .ben > li, .mosaic > li, .mcards > article, .faq-list > details, .bridge-checks li, .mw > a, .acards > article, .films > *, .lead-form) { opacity: 0; transform: translateY(28px); animation: welt-notfall .01s linear 3s forwards; }
html:not(.js-motion) body.welt :is(h1, h2, .hero-claim).display > span { clip-path: inset(-.4em 100% -.3em 0); transform: translateY(.18em); animation: welt-notfall-clip .01s linear 3s forwards; }
@keyframes welt-notfall { to { opacity: 1; transform: none; } }
@keyframes welt-notfall-clip { to { clip-path: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.js-motion) body.welt :is(.eyebrow, .lead, .lp-hero .btn-row, .trust, .bridge-copy > p, .decide-grid p, .section-head .lead, .benefits .btn-row, .how li, .scarce, .welt-feats li, .story-cards > li, .story-list > li, .steps-v2 > article, .ben > li, .mosaic > li, .mcards > article, .faq-list > details, .bridge-checks li, .mw > a, .acards > article, .films > *, .lead-form) { opacity: 1; transform: none; animation: none; }
  html:not(.js-motion) body.welt :is(h1, h2, .hero-claim).display > span { clip-path: none; transform: none; animation: none; }
}