:root { --bg:#0e1311; --bg2:#151c19; --line:#26302c; --fg:#f2f1ec; --muted:#9aa8a2; --accent:#ff5a0a; --mint:#4fa595; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
       line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

/* Milchglas wie bei Wanderful, ohne Skript */
.glass { background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
         border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }

/* Kopf */
header { padding:22px 0; position:relative; z-index:10; }
header.over { position:absolute; inset:0 0 auto 0; }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:.02em; }
.brand svg { width:30px; height:auto; fill:var(--accent); }
nav { display:flex; gap:2px; padding:5px; border-radius:999px; }
nav a { text-decoration:none; color:rgba(242,241,236,.82); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
        padding:8px 16px; border-radius:999px; transition:background .2s, color .2s; }
nav a:hover, nav a[aria-current] { color:#fff; background:rgba(255,255,255,.1); }

.eyebrow { color:var(--mint); font-weight:600; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 18px; }
h1 { font-size:clamp(2.6rem,9vw,5.6rem); line-height:.98; letter-spacing:-.025em; margin:0 0 26px; font-weight:800; }
h1 span { color:var(--accent); }
h2 { font-size:clamp(1.8rem,4.4vw,3rem); line-height:1.05; margin:0 0 40px; letter-spacing:-.02em; font-weight:800; }
h2 span { color:var(--accent); }

/* Startseite: Vollbild-Foto */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero picture, .hero img { position:absolute; inset:0; width:100%; height:100%; }
.hero img { object-fit:cover; object-position:28% 62%; z-index:-2; transform-origin:70% 70%;
            animation:drift 38s ease-in-out infinite alternate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1;
                background:linear-gradient(90deg, rgba(8,11,10,.45) 0%, rgba(8,11,10,0) 55%),
                linear-gradient(180deg, rgba(8,11,10,.55) 0%, rgba(8,11,10,0) 26%, rgba(8,11,10,0) 48%, rgba(8,11,10,.55) 74%, var(--bg) 100%); }
.hero-copy { padding-bottom:clamp(56px,10vh,110px); animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both .15s; }
.hero h1 { font-size:clamp(3.2rem,11.5vw,10.5rem); line-height:.86; letter-spacing:-.045em; margin:0 0 28px; text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero .eyebrow { color:#fff; opacity:.85; }
.hero .lead { font-size:clamp(1.08rem,2.2vw,1.35rem); color:rgba(242,241,236,.9); max-width:36ch; margin:0 0 32px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.pill { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; transition:transform .2s, background .2s; }
.pill:hover { transform:translateY(-2px); }
.pill.solid { background:var(--accent); color:#160a02; }
.pill.solid:hover { background:#ff7433; }
.pill.glass:hover { background:rgba(255,255,255,.14); }
.hero-meta { position:absolute; right:24px; bottom:22px; margin:0; font-size:.8rem; color:rgba(242,241,236,.6); letter-spacing:.04em; }
@keyframes drift { from { transform:scale(1.02); } to { transform:scale(1.12) translate(-1.5%,-1%); } }
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* Abschnitte */
section { padding:clamp(72px,11vw,128px) 0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; list-style:none; counter-reset:s; border-top:1px solid var(--line); }
.steps li { padding:36px 32px 8px 0; counter-increment:s; }
.steps li + li { padding-left:32px; border-left:1px solid var(--line); }
.steps li::before { content:"0" counter(s); display:block; font-size:clamp(3rem,6vw,4.6rem); font-weight:800; line-height:1; letter-spacing:-.04em;
                    color:var(--accent); margin-bottom:22px; font-variant-numeric:tabular-nums; }
.steps h3 { margin:0 0 10px; font-size:1.3rem; letter-spacing:-.01em; }
.steps p { margin:0; color:var(--muted); max-width:30ch; }

/* Bild über die volle Breite mit Text darauf */
.panorama { position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.panorama img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.panorama::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--bg) 0%, rgba(8,11,10,0) 18%, rgba(8,11,10,0) 70%, rgba(8,11,10,.6) 100%); }
.panorama .wrap { padding-bottom:56px; }
.panorama .card { max-width:520px; padding:32px 32px 30px; border-radius:20px; background:rgba(8,11,10,.55); }
.panorama h2 { margin-bottom:16px; }
.panorama p { margin:0 0 28px; color:rgba(242,241,236,.88); max-width:44ch; font-size:1.1rem; }

.split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start; }
.split h2 { margin:0; }
.note { color:var(--muted); font-size:1.15rem; margin:0 0 24px; max-width:46ch; }
.from { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:40px; }
.from p { margin:0; color:var(--muted); }
.btn { display:inline-block; padding:12px 20px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); text-decoration:none; font-weight:600; }
.btn:hover { background:var(--accent); color:var(--bg); }

/* Bilder auf Unterseiten */
.band { margin:0; }
.band img { width:100%; aspect-ratio:16/7; object-fit:cover; }
.band img.pos-low { object-position:50% 70%; }
.band figcaption, .photo figcaption { color:var(--muted); font-size:.85rem; padding:10px 0 0; }
.band figcaption { width:100%; max-width:1180px; margin:0 auto; padding:10px 24px 0; }
.photo { margin:0; }
.photo img { border-radius:6px; width:100%; }
.band + section { padding-top:72px; }

/* Über uns */
.page-head { padding:48px 0 40px; }
.page-head h1 { font-size:clamp(2.4rem,7vw,4.4rem); margin-bottom:0; }
.story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.story .text p { margin:0 0 1.1em; font-size:1.12rem; max-width:40ch; }
.story .text p:first-child { font-size:clamp(1.3rem,2.8vw,1.6rem); line-height:1.4; color:var(--fg); }
.story .text p:not(:first-child) { color:var(--muted); }

/* Rechtstexte */
.legal { padding-top:8px; }
.legal h2 { font-size:1.2rem; margin:40px 0 10px; letter-spacing:0; font-weight:700; }
.legal h2:first-child { margin-top:0; }
.legal p { color:var(--muted); margin:0 0 1em; max-width:68ch; }
.legal a { color:var(--fg); }
.legal .stand { font-size:.85rem; margin-top:48px; }

footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:.9rem; }
footer a { color:var(--muted); }
footer a:hover { color:var(--fg); }

@media (max-width:760px) {
  .wrap { padding:0 20px; }
  .brand span { display:none; }
  nav a { padding:8px 12px; font-size:.72rem; }
  .hero { align-items:flex-start; }
  .hero::before { background:linear-gradient(180deg, rgba(8,11,10,.82) 0%, rgba(8,11,10,.55) 38%, rgba(8,11,10,0) 58%, rgba(8,11,10,0) 82%, var(--bg) 100%); }
  .hero-copy { padding:112px 20px 0; }
  .hero h1 { font-size:clamp(3rem,15vw,4.6rem); margin-bottom:18px; }
  .hero .lead { margin-bottom:24px; }
  .actions { gap:8px; }
  .pill { padding:12px 16px; font-size:.86rem; }
  .hero img { object-position:60% 100%; }
  .hero-meta { display:none; }
  .steps, .story, .split { grid-template-columns:1fr; }
  .steps li, .steps li + li { padding:28px 0; border-left:0; }
  .steps li + li { border-top:1px solid var(--line); }
  .split, .story { gap:24px; }
  .band img { aspect-ratio:4/3; }
  .panorama { min-height:70vh; }
  .panorama .card { padding:24px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero img, .hero-copy { animation:none; }
}
.split + .from { margin-top:72px; }