@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/hanken-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/hanken-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/hanken-grotesk-600.woff2) format('woff2')}

/* Layout: mehrseitiger Entwurf (Start, Leistungen, drei Leistungsseiten, Über uns, Referenzen, Kontakt) im dunklen Tiefsee-Look des Brand-Videos.
   Lange Texte werden gegliedert: Kurzintro, Sprungmarken, Tabs, Karten und Checklisten statt Textwände. */
:root {
  --bg:#00263b; --bg2:#012f4a; --alt:#003B56; --fg:#eef5fa; --muted:#a3bfd2; --accent:#38ABFF; --brand:#0061B2; --soft:#66A0D1; --line:rgba(178,207,232,.2);
  --card:rgba(255,255,255,.04); --btn-fg:#00263b;
  --display:'Bricolage Grotesque','Segoe UI',Arial,sans-serif; --body:'Hanken Grotesk','Segoe UI',Calibri,Arial,sans-serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; position:relative; }
h1,h2,h3 { font-family:var(--display); font-weight:700; text-wrap:balance; margin:0; }
h1 em, h2 em { font-style:normal; color:var(--accent); }
p { margin:0 0 1em; }
.eyebrow { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent); margin:0 0 16px; }
[hidden] { display:none !important; }

/* Header */
.hdr { position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(0,38,59,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.hdr .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.mark { font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.01em; text-decoration:none; display:flex; align-items:baseline; gap:8px; }
.mark small { font-family:var(--body); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; opacity:.7; }
nav.main { display:flex; gap:26px; font-size:.95rem; font-weight:500; align-items:center; }
nav.main a, nav.main button.dd { text-decoration:none; opacity:.85; padding:6px 0; border:0; border-bottom:1px solid transparent; background:none; cursor:pointer; }
nav.main a:hover, nav.main button.dd:hover, nav.main a[aria-current="page"], nav.main .has a.cur { opacity:1; border-color:var(--accent); }
.has { position:relative; }
.sub { position:absolute; top:100%; left:-16px; min-width:260px; padding:10px; background:#022a42; border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); display:none; flex-direction:column; }
.has:hover .sub, .has:focus-within .sub { display:flex; }
.sub a { padding:10px 14px !important; border-radius:6px; border:0 !important; }
.sub a:hover { background:rgba(56,171,255,.12); }
.hdr-r { display:flex; align-items:center; gap:12px; }
.lang { display:flex; border:1px solid rgba(238,245,250,.28); border-radius:999px; padding:2px; }
.lang button { font-size:.78rem; font-weight:600; letter-spacing:.06em; background:none; border:0; padding:4px 10px; border-radius:999px; cursor:pointer; opacity:.75; }
.lang button[aria-pressed="true"] { background:var(--fg); color:var(--bg); opacity:1; }
.burger { display:none; background:none; border:1px solid rgba(238,245,250,.28); border-radius:8px; width:42px; height:42px; cursor:pointer; place-items:center; }
.burger span, .burger span::before, .burger span::after { display:block; width:18px; height:2px; background:var(--fg); position:relative; content:""; }
.burger span::before { position:absolute; top:-6px; } .burger span::after { position:absolute; top:6px; }
.mobile { display:none; border-top:1px solid var(--line); padding:12px 20px 20px; background:#022a42; }
.mobile a { display:block; padding:12px 0; text-decoration:none; border-bottom:1px solid var(--line); font-weight:500; }
.mobile a.s { padding-left:18px; color:var(--muted); font-size:.95rem; }

.btn { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; text-decoration:none; background:var(--accent); color:var(--btn-fg); border:0; padding:13px 24px; border-radius:999px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(56,171,255,.7); }
.btn.ghost { background:none; color:var(--fg); border:1px solid rgba(238,245,250,.45); }
.btn.sm { padding:9px 18px; font-size:.88rem; }

/* Hero */
.hero, .phero { position:relative; background:radial-gradient(120% 90% at 85% 10%, #0a4f78 0%, #00263b 62%); overflow:hidden; isolation:isolate; }
.hero { padding-block:clamp(48px,7vw,96px); }
.phero { padding-block:clamp(44px,6vw,84px) clamp(32px,4vw,48px); }
canvas.net { position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.85; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,64px); align-items:center; }
.hero h1 { font-size:clamp(2.5rem,5.6vw,4.6rem); line-height:1.04; letter-spacing:-.02em; }
.phero h1 { font-size:clamp(2.2rem,4.8vw,3.8rem); line-height:1.06; letter-spacing:-.02em; max-width:20ch; }
.phero h1 em { display:block; font-size:.62em; line-height:1.15; margin-top:.35em; letter-spacing:-.01em; }
.phero .lead { max-width:62ch; margin-top:24px; }
.lead { color:#bcd4e5; font-size:clamp(1.05rem,1.5vw,1.2rem); max-width:56ch; }
.hero p.lead { margin:26px 0 34px; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.crumb { font-size:.82rem; color:var(--muted); margin:0 0 20px; }
.crumb a { text-decoration:none; border-bottom:1px solid transparent; } .crumb a:hover { border-color:currentColor; }
.cta { display:flex; flex-wrap:wrap; gap:12px; }
.om { width:100%; max-width:480px; margin-inline:auto; display:block; overflow:visible; }
.om .tile { fill:url(#tg); stroke:var(--accent); stroke-opacity:.55; stroke-width:1.2; }
.om .tile.core { fill:url(#cg); stroke-opacity:1; stroke-width:1.6; filter:url(#glow); }
.om .grid { fill:url(#dots); }
.om .arr { stroke:var(--accent); stroke-width:1.4; stroke-opacity:.75; fill:none; }
.om .pulse { fill:#fff; filter:url(#glow); }
.om text { fill:var(--fg); font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.03em; text-anchor:middle; }
.om .ai { font-family:var(--display); font-size:26px; letter-spacing:.02em; }
.om-cap { text-align:center; margin:10px 0 0; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* In-Page-Navigation */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.chips span.l { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); align-self:center; margin-right:6px; }
.chip { border:1px solid rgba(178,207,232,.35); background:rgba(255,255,255,.03); border-radius:999px; padding:7px 16px; font-size:.88rem; font-weight:500; cursor:pointer; transition:background .2s, border-color .2s; }
.chip:hover { background:rgba(56,171,255,.14); border-color:var(--accent); }

/* Sections */
section.s { padding-block:clamp(52px,7vw,96px); }
.s + .s { border-top:1px solid var(--line); }
.s.tint { background:var(--bg2); }
.s.alt { background:var(--alt); }
.two { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,80px); align-items:start; }
.two > h2 { position:sticky; top:96px; }
h2.t { font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.015em; }
.prose p { color:var(--muted); max-width:62ch; }
.prose p:first-child { color:var(--fg); font-size:1.18rem; }
.callout { border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:28px 0 0; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.28; letter-spacing:-.01em; max-width:34em; }
.cols3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:36px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; min-width:0; transition:transform .25s ease, border-color .25s ease, background .25s ease; }
a.card, .card.link { text-decoration:none; }
a.card:hover, .card.link:hover { transform:translateY(-5px); border-color:var(--accent); background:rgba(56,171,255,.06); }
.card h3 { font-size:1.35rem; line-height:1.18; letter-spacing:-.01em; }
.card p { margin:0; color:var(--muted); flex:1; font-size:1rem; }
.card .ic { width:42px; height:42px; color:var(--accent); }
.card .more { font-weight:600; color:var(--accent); display:inline-flex; gap:8px; align-items:center; }
.card .more span { transition:transform .2s ease; } a.card:hover .more span { transform:translateX(5px); }
.head { display:flex; align-items:center; gap:16px; margin:0 0 28px; }
.head span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent); white-space:nowrap; }
.head i { flex:1; height:1px; background:var(--line); }

/* Tabs */
.tabs { display:grid; grid-template-columns:minmax(220px,.42fr) minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.02); margin-top:28px; }
.tablist { display:flex; flex-direction:column; border-right:1px solid var(--line); background:rgba(0,0,0,.14); }
.tab { text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:16px 20px; cursor:pointer; font-weight:600; display:flex; gap:12px; align-items:center; color:var(--muted); transition:background .2s, color .2s; }
.tab:last-child { border-bottom:0; }
.tab i { font-style:normal; width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; transition:background .2s, box-shadow .2s; }
.tab:hover { color:var(--fg); background:rgba(56,171,255,.07); }
.tab[aria-selected="true"] { color:var(--fg); background:rgba(56,171,255,.14); }
.tab[aria-selected="true"] i { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.panel { padding:clamp(22px,3vw,40px); min-width:0; }
.panel h3 { font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:16px; }
.panel p { color:var(--muted); max-width:58ch; }
.panel p:first-of-type { color:var(--fg); font-size:1.12rem; }

/* Lifecycle */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:34px; position:relative; }
.step { position:relative; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; padding:24px 22px; background:var(--card); min-width:0; }
.step h3 { font-size:1.25rem; margin-bottom:12px; }
.step p { color:var(--muted); font-size:.98rem; margin-bottom:.8em; }
.step:not(:last-child)::after { content:"→"; position:absolute; right:-14px; top:-1px; transform:translateY(-50%); color:var(--accent); background:var(--bg); padding:0 4px; font-size:1.1rem; z-index:2; }
.loopnote { color:var(--muted); font-size:.85rem; margin:14px 0 0; text-align:right; }

/* Checkliste */
.check { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
.check li { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--card); }
.check li::before { content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; border:1.6px solid var(--accent); background:radial-gradient(circle,var(--accent) 0 38%,transparent 42%); }

/* CTA */
.ctaband { background:linear-gradient(120deg,#0061B2 0%,#003B56 70%); }
.ctaband .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; }
.ctaband h2 { font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.15; max-width:24ch; }
.ctaband p { margin:12px 0 0; color:#cfe3f4; max-width:60ch; }
.ctaband .btn { background:#fff; color:#003B56; }

/* Film */
.film .hd { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px; margin-bottom:30px; }
.film .dur { color:var(--muted); font-size:.9rem; margin:0; }
.player { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#00131f; box-shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(56,171,255,.08); max-width:1000px; margin-inline:auto; }
.player video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#00131f; }

/* Slider */
.slider { border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg,rgba(56,171,255,.08),rgba(255,255,255,.02)); padding:clamp(24px,4vw,56px); position:relative; overflow:hidden; }
.slides { position:relative; display:grid; }
.slide { grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px clamp(24px,4vw,56px); align-items:center; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s; }
.slide.on { opacity:1; visibility:visible; }
.slide blockquote { margin:0; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.6vw,2.1rem); line-height:1.24; letter-spacing:-.01em; text-wrap:balance; }
.slide blockquote::before { content:"„"; display:block; font-size:4.4rem; line-height:.6; color:var(--accent); margin-bottom:10px; }
.slide cite { display:block; margin-top:26px; font-style:normal; }
.slide cite b { display:block; font-size:1.05rem; font-weight:600; }
.slide cite span { color:var(--muted); font-size:.93rem; display:block; }
.slide cite span.co { color:var(--accent); font-weight:600; margin-top:2px; }
.ph { width:clamp(110px,16vw,190px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 36%, #66A0D1 0 21%, transparent 22%), radial-gradient(ellipse at 50% 100%, #66A0D1 0 38%, transparent 39%), #04324d; border:1px dashed rgba(178,207,232,.5); opacity:.85; }
.sctl { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.dots { display:flex; gap:8px; }
.dots button { width:10px; height:10px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer; transition:background .2s, transform .2s; }
.dots button[aria-current="true"] { background:var(--accent); transform:scale(1.3); }
.arrows { display:flex; align-items:center; gap:10px; }
.arrows .n { color:var(--muted); font-size:.88rem; font-variant-numeric:tabular-nums; margin-right:6px; }
.arrows button { width:44px; height:44px; border-radius:50%; border:1px solid rgba(238,245,250,.4); background:none; cursor:pointer; font-size:1.1rem; transition:background .2s, border-color .2s; }
.arrows button:hover { background:rgba(56,171,255,.16); border-color:var(--accent); }

/* Hexagone */
.hexes { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 10px; margin-bottom:40px; }
.hex { width:clamp(112px,16vw,168px); aspect-ratio:1.1547/1; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:linear-gradient(145deg,rgba(56,171,255,.7),rgba(56,171,255,.12)); display:grid; place-items:center; cursor:pointer; border:0; padding:0; transition:transform .25s ease, filter .25s ease; }
.hex:hover, .hex[aria-pressed="true"] { transform:translateY(-4px) scale(1.04); filter:drop-shadow(0 0 16px rgba(56,171,255,.55)); }
.hex span { width:calc(100% - 3px); height:calc(100% - 3px); clip-path:inherit; background:#032e47; display:grid; place-items:center; text-align:center; padding:12px 16px; font-family:var(--display); font-weight:700; font-size:clamp(.8rem,1.3vw,1rem); line-height:1.15; }
.hex[aria-pressed="true"] span { background:#05466d; }
.hex small { display:block; font-family:var(--body); font-weight:500; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.note { color:var(--muted); font-size:.85rem; margin:18px 0 0; text-align:center; }

/* Über uns */
.words { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 28px; }
.words span { font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.015em; padding:6px 22px; border:1px solid rgba(56,171,255,.5); border-radius:999px; background:rgba(56,171,255,.08); }
.pillars3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:6px 0 28px; }
.pillars3 div { border:1px solid var(--line); border-radius:6px; padding:18px 20px; font-weight:600; background:var(--card); }
.person { display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); gap:clamp(24px,5vw,72px); align-items:start; }
.person .pic { aspect-ratio:4/5; max-width:340px; width:100%; border-radius:8px; border:1px dashed rgba(178,207,232,.5); background:radial-gradient(circle at 50% 34%, #66A0D1 0 17%, transparent 18%), radial-gradient(ellipse at 50% 100%, #66A0D1 0 40%, transparent 41%), #04324d; opacity:.85; }
.person h3 { font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:4px; }
.person .role { color:var(--accent); font-weight:600; margin-bottom:22px; }
.facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:26px 0; }
.facts div { border-top:2px solid var(--accent); padding-top:12px; font-size:.95rem; color:var(--muted); }
.facts b { display:block; color:var(--fg); font-family:var(--display); font-size:1.15rem; margin-bottom:2px; }

/* Kontakt */
.contact { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,6vw,96px); }
.contact .ci { margin-top:26px; display:grid; gap:6px; color:var(--muted); }
.contact .ci b { color:var(--fg); font-weight:600; }
form { display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
form .full { grid-column:1/-1; }
label { display:grid; gap:6px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); min-width:0; }
input, textarea { font:inherit; font-size:1rem; letter-spacing:0; text-transform:none; font-weight:400; color:var(--fg); background:rgba(255,255,255,.05); border:1px solid rgba(178,207,232,.28); border-bottom-color:rgba(178,207,232,.6); border-radius:4px; padding:12px 14px; width:100%; min-width:0; }
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
textarea { min-height:130px; resize:vertical; }
.consent { font-size:.8rem; color:var(--muted); margin:0; max-width:70ch; }
.sent { margin:0; font-weight:600; color:var(--accent); }
form .btn { justify-self:start; }
footer { background:var(--alt); color:var(--muted); border-top:1px solid var(--line); font-size:.9rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; padding-block:26px calc(26px + env(safe-area-inset-bottom,0px)); }
footer a { color:var(--fg); text-decoration:none; } footer a:hover { text-decoration:underline; }
footer .l { display:flex; flex-wrap:wrap; gap:8px 24px; }

@media (max-width:980px) {
  nav.main, .hdr .btn { display:none; }
  .burger { display:grid; }
  .mobile.open { display:block; }
  .hero .wrap, .two, .contact, .person { grid-template-columns:minmax(0,1fr); }
  .two > h2 { position:static; }
  .cols3, .pillars3, .facts { grid-template-columns:minmax(0,1fr); }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step:nth-child(2)::after { display:none; }
  .om { max-width:380px; }
  .tabs { grid-template-columns:minmax(0,1fr); }
  .tablist { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .tab { white-space:nowrap; border-bottom:0; border-right:1px solid var(--line); }
  .person .pic { max-width:240px; }
}
@media (max-width:620px) {
  form, .check { grid-template-columns:minmax(0,1fr); }
  .steps { grid-template-columns:minmax(0,1fr); }
  .step::after { display:none !important; }
  .slide { grid-template-columns:minmax(0,1fr); }
  .slide .ph { order:-1; width:84px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .om .pulse { display:none; }
  .card, .btn, .hex, .slide { transition:none; }
}

/* ===== v4: Zweisprachigkeit, echte Assets, Wabengrafiken ===== */
body:not(.en) .le { display:none !important; }
body.en .ld { display:none !important; }

.mark img { height:40px; width:auto; display:block; }

/* Logoleiste */
.logos { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 12px; margin:0 0 44px; }
.lhex { width:clamp(118px,15vw,172px); aspect-ratio:1.1547/1; clip-path:polygon(25% 1.5%,75% 1.5%,100% 50%,75% 98.5%,25% 98.5%,0 50%); background:linear-gradient(145deg,#38ABFF,rgba(56,171,255,.25)); border:0; padding:0; cursor:pointer; display:grid; place-items:center; transition:transform .25s ease; }
.lhex > span { width:calc(100% - 5px); height:calc(100% - 5px); clip-path:inherit; background:#eef4f9; display:grid; place-items:center; transition:background .25s; }
.lg { display:block; width:58%; height:42%; background:center/contain no-repeat; }
.lhex.wide .lg { width:68%; } .lhex.tall .lg { height:64%; } .lhex.mid .lg { height:58%; width:50%; }
.pf { display:block; background-size:cover; background-position:center; }
.lhex:hover, .lhex[aria-pressed="true"] { transform:translateY(-4px) scale(1.05); }
.lhex[aria-pressed="true"] > span { background:#fff; }

/* Zitate mit Fotos */
.slide .ph { width:clamp(112px,15vw,184px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; border:2px solid rgba(56,171,255,.65); box-shadow:0 0 0 10px rgba(56,171,255,.07); background-color:#04324d; opacity:1; display:block; }
.ini { display:grid !important; place-items:center; font-family:var(--display); font-weight:700; color:var(--soft); background:#04324d; }
.slide .ph.ini { font-size:clamp(1.8rem,3.4vw,2.8rem); }
.qgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.qcard { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:26px 24px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.qcard > p { margin:0; color:var(--fg); font-size:1.02rem; flex:1; }
.qcard footer { display:flex; gap:14px; align-items:center; background:none; border:0; color:inherit; font-size:inherit; }
.qcard .av { width:58px; height:58px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid rgba(56,171,255,.6); font-size:1.1rem; }
.qcard footer div { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.qcard footer b { font-weight:600; }
.qcard footer span { color:var(--muted); font-size:.86rem; }
.qcard footer .co { color:var(--accent); font-weight:600; }
.lnk { color:var(--accent); font-weight:600; text-decoration:none; }

/* Zwischenüberschriften */
.sub3 { font-size:clamp(1.3rem,2.2vw,1.7rem); margin:56px 0 8px; }
.subp { color:var(--muted); max-width:72ch; margin:14px 0 0; }
.subp.center { text-align:center; margin-inline:auto; }
.ctag { display:block; font-family:var(--body); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.lbl { margin:44px 0 0; font-weight:600; }
.hint { text-align:center; color:var(--muted); font-size:.8rem; letter-spacing:.06em; margin:14px 0 0; }

/* Waben */
.combwrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; margin-top:36px; }
.comb { position:relative; width:100%; max-width:500px; margin-inline:auto; }
.omcomb { margin:40px auto 0; max-width:880px; }
.omcomb .comb { max-width:880px; }
.hx { position:absolute; isolation:isolate; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:linear-gradient(150deg,rgba(56,171,255,.9),rgba(0,97,178,.3)); border:0; padding:0; margin:0; cursor:pointer; color:var(--fg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; text-align:center; transition:transform .3s ease; }
.hx::before { content:""; position:absolute; inset:2px; clip-path:inherit; background:linear-gradient(160deg,#0b4a73,#032d47); z-index:-1; transition:background .3s ease; }
.hx .ic { width:30%; height:auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:#8fcbff; flex:none; transition:color .3s; }
.hx b { font-family:var(--display); font-weight:700; font-size:clamp(.74rem,1.3vw,1.02rem); line-height:1.14; padding:0 13%; hyphens:manual; }
.hx:hover { transform:scale(1.045); z-index:2; }
.hx:hover::before { background:linear-gradient(160deg,#0f5d8f,#04395a); }
.hx[aria-selected="true"]::before { background:linear-gradient(160deg,#1d8ee0,#0061B2); }
.hx[aria-selected="true"] .ic { color:#fff; }
.hx.core { cursor:default; background:linear-gradient(150deg,#38ABFF,#0061B2); }
.hx.core::before { inset:3px; background:radial-gradient(circle at 50% 38%,#0d4467,#001a29); }
.hx.core b { font-size:clamp(.82rem,1.6vw,1.3rem); }
.hx.core:hover { transform:none; }
.omcomb .hx .ic { width:27%; }
.omcomb .hx b { font-size:clamp(.62rem,1.05vw,.92rem); padding:0 11%; }
body.js .comb:not(.in) .hx { opacity:0; transform:scale(.7); }
.comb.in .hx { animation:pop .6s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:var(--d,0ms); }
.comb.in .hx.core { animation-delay:0ms; }
@keyframes pop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }

.cpanel { border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg,rgba(56,171,255,.07),rgba(255,255,255,.02)); padding:clamp(24px,3vw,40px); min-height:320px; display:flex; flex-direction:column; min-width:0; }
#om-elem .cpanel { margin-top:30px; min-height:0; }
.pane h3 { font-size:clamp(1.5rem,2.6vw,2rem); margin:6px 0 16px; }
.pane p { color:var(--muted); max-width:62ch; }
.pane p:first-of-type { color:var(--fg); font-size:1.1rem; }
.cnt { font-size:.76rem; letter-spacing:.16em; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.pnav { margin-top:auto; display:flex; gap:10px; padding-top:22px; border-top:1px solid var(--line); }
.pnav button { background:none; border:1px solid rgba(238,245,250,.35); border-radius:999px; padding:8px 16px; font-size:.86rem; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s; }
.pnav button:hover { background:rgba(56,171,255,.16); border-color:var(--accent); }

/* Customer-Lifecycle-Rad */
.clwrap { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:center; margin-top:34px; }
.wheel { width:100%; max-width:480px; display:block; margin-inline:auto; overflow:visible; }
.seg { cursor:pointer; outline:none; }
.seg path { fill:var(--f); transform-origin:0 0; transition:transform .3s ease, opacity .3s; }
.seg text { fill:var(--t); font-family:var(--display); font-weight:700; font-size:14.5px; text-anchor:middle; pointer-events:none; }
.seg:hover path, .seg:focus-visible path, .seg.on path { transform:scale(1.05); }
.wheel.sel .seg:not(.on) path { opacity:.55; }
.seg:focus-visible path { stroke:#fff; stroke-width:2; }
.hub { fill:#0061B2; stroke:#38ABFF; stroke-width:2; }
.hubt { fill:#fff; font-family:var(--display); font-weight:700; font-size:16px; text-anchor:middle; }
.orbit { fill:none; stroke:rgba(178,207,232,.3); stroke-width:1; stroke-dasharray:2 7; }
.spark { fill:#fff; }
.steps2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.steps2 .step { border-top-width:3px; transition:border-color .25s, background .25s, transform .25s; cursor:default; }
.steps2 .step::after { display:none !important; }
.steps2 .step.on { border-color:var(--accent); background:rgba(56,171,255,.09); transform:translateY(-3px); }
.step .num { display:block; font-family:var(--display); font-weight:700; color:var(--accent); font-size:.9rem; letter-spacing:.08em; margin-bottom:6px; }

/* Über uns */
.kw { color:var(--accent); font-weight:600; }
.pairs { list-style:none; padding:0; margin:0 0 1.2em; display:grid; gap:10px; }
.pairs li { position:relative; padding:12px 16px 12px 40px; border:1px solid var(--line); border-radius:6px; background:var(--card); font-weight:500; }
.pairs li::before { content:""; position:absolute; left:16px; top:50%; width:12px; height:2px; background:var(--accent); }
.prose.sm p { font-size:1rem; color:var(--muted); }
.person .pic { margin:0; aspect-ratio:4/5; max-width:360px; width:100%; border:0; background:none; opacity:1; border-radius:10px; overflow:hidden; position:relative; box-shadow:0 34px 70px -34px rgba(0,0,0,.85); }
.person .pic::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(56,171,255,.35); pointer-events:none; }
.person .pic .pf { width:100%; height:100%; }

@media (max-width:980px) {
  .combwrap, .clwrap { grid-template-columns:minmax(0,1fr); }
  .qgrid { grid-template-columns:minmax(0,1fr); }
  .cpanel { min-height:0; }
}
@media (max-width:620px) {
  .steps2 { grid-template-columns:minmax(0,1fr); }
  .lhex { width:calc(33% - 8px); min-width:96px; }
  .omcomb .hx .ic { display:none; }
  .omcomb .hx b { font-size:.56rem; padding:0 9%; }
  .hx b { font-size:.66rem; }
  .mark img { height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .comb.in .hx { animation:none; }
  body.js .comb:not(.in) .hx { opacity:1; transform:none; }
  .spark { display:none; }
}
h1, h2, h3 { hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
.hx b, .seg text { hyphens:manual; -webkit-hyphens:manual; }

.ctaband { padding-block:clamp(48px,6vw,80px); }

.hx.core b, .omcomb .hx.core b { font-size:clamp(1rem,2.1vw,1.7rem); line-height:1.08; padding:0 8%; }
@media (max-width:620px) { .omcomb .hx.core b { font-size:.8rem; } }
.omcomb .hx b { font-size:clamp(.72rem,1.28vw,1.1rem); padding:0 9%; }
@media (max-width:620px) { .omcomb .hx b { font-size:.6rem; padding:0 5%; } .omcomb .hx.core b { font-size:.8rem; } }

.head h2.hs { font-family:var(--body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent); white-space:nowrap; margin:0; }
@media (max-width:620px) { .omcomb { margin-inline:-16px; } .omcomb .hx b { font-size:.55rem; padding:0 4%; } .omcomb .hx.core b { font-size:.72rem; } }


.lang a { font-size:.78rem; font-weight:600; letter-spacing:.06em; padding:4px 10px; border-radius:999px; opacity:.75; text-decoration:none; }
.lang a[aria-current="true"] { background:var(--fg); color:var(--bg); opacity:1; }
nav.main a.dd { text-decoration:none; }
nav.main a.dd.cur { opacity:1; border-color:var(--accent); }
.legal { max-width:780px; }
.legal h2 { font-size:clamp(1.3rem,2.2vw,1.65rem); margin:2.2em 0 .7em; }
.legal h2:first-child { margin-top:0; }
.legal h3 { font-size:1.12rem; margin:1.8em 0 .6em; }
.legal p, .legal li { color:var(--muted); }
.legal ul { padding-left:1.2em; margin:0 0 1.2em; }
.legal li { margin-bottom:.6em; }
.legal a { color:var(--accent); word-break:break-word; }
.legal strong { color:var(--fg); font-weight:600; }
.sent.ok { color:#7fe0a6; } .sent.err { color:#ffb4a8; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.consent a { color:var(--accent); }
.nf { min-height:60vh; display:grid; place-items:center; text-align:center; }
.faq-list { max-width:860px; margin-top:32px; border-top:1px solid rgba(178,207,232,.18); }
.faq-i { border-bottom:1px solid rgba(178,207,232,.18); }
.faq-i summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; }
.faq-i summary::-webkit-details-marker { display:none; }
.faq-i summary h3 { font-size:clamp(1.02rem,1.6vw,1.18rem); margin:0; font-weight:600; }
.faq-i summary::after { content:'+'; font-size:1.6rem; line-height:1; color:var(--accent); flex:none; transition:transform .2s; }
.faq-i[open] summary::after { transform:rotate(45deg); }
.faq-i p { color:var(--muted); margin:0 0 22px; max-width:72ch; }
.faq-i summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
img.pf { object-fit:cover; object-position:center; } img.lg { object-fit:contain; } img.ph { height:auto; }

.lg-rewe{background-image:url(/assets/logo-rewe.svg)}.lg-cupra{background-image:url(/assets/logo-cupra.svg)}.lg-seid{background-image:url(/assets/logo-seid.svg)}.lg-pion{background-image:url(/assets/logo-pion.svg)}.lg-obi{background-image:url(/assets/logo-obi.svg)}.pf-rieger{background-image:url(/assets/foto-rieger.jpg)}.pf-stein{background-image:url(/assets/foto-stein.jpg)}.pf-neeb{background-image:url(/assets/foto-neeb.jpg)}.pf-fk{background-image:url(/assets/foto-fk.jpg)}.pf-kueng{background-image:url(/assets/foto-kueng.jpg)}.pf-heilen{background-image:url(/assets/foto-heilen.jpg)}.pf-max{background-image:url(/assets/foto-max.jpg)}