:root{--ink:#0E2238;--navy:#16365A;--blau:#2F3FD9;--blau-d:#2432B0;--himmel:#EAF0FF;--hell:#F5F7FB;--text:#1D2733;--grau:#5B6877;--linie:#DDE3EC;--weiss:#fff;--platz:#FFF3CD;--platzr:#D9A92B;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--weiss);overflow-x:hidden}
body.rtl{direction:rtl;font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;font-size:19px;line-height:1.95}
img{max-width:100%;display:block}
a{color:var(--blau)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;color:var(--ink);letter-spacing:-.01em}
body.rtl h1,body.rtl h2,body.rtl h3{letter-spacing:0;line-height:1.5}
h2{font-size:28px;margin-bottom:10px}
h3{font-size:19px;margin-bottom:6px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin-bottom:10px}
body.rtl .eyebrow{letter-spacing:0;font-size:15px}
.lead{font-size:19px;color:var(--grau);max-width:680px}
.offen{background:var(--platz);border:1px dashed var(--platzr);padding:1px 7px;border-radius:5px;font-weight:700;color:#6B4E00;font-size:.92em}
.banner{background:#1A1A1A;color:#fff;text-align:center;font-size:13px;padding:7px 12px}
.banner b{color:#FFD76A}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
header.top img{height:42px;width:auto}
nav.menu{display:none;gap:22px;font-size:15px}
nav.menu a{text-decoration:none;color:var(--navy);font-weight:600}
.btn{display:inline-block;background:var(--blau);color:#fff;font-weight:700;padding:14px 26px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;font-size:17px;font-family:inherit;box-shadow:0 8px 20px rgba(47,63,217,.28)}
.btn:hover{background:var(--blau-d)}
.btn.klein{padding:9px 16px;font-size:15px;box-shadow:none}
.btn.zweit{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:none}
.lang a{font-size:14px;border:1px solid var(--linie);padding:5px 10px;border-radius:8px;text-decoration:none;color:var(--navy);font-weight:600}
.hero{background:radial-gradient(1200px 500px at 85% -10%,#3A57E8 0%,transparent 60%),linear-gradient(160deg,var(--ink) 0%,var(--navy) 55%,#1E4D8C 100%);color:#fff;padding:56px 0 48px}
.hero h1{color:#fff;font-size:34px;margin-bottom:16px}
.hero p.lead{color:#D6E2F5}
.hero .aktion{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.chips{display:grid;gap:10px;margin-top:34px;grid-template-columns:1fr}
.chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;font-size:15px;color:#E6EEFB}
.chip b{display:block;color:#fff;font-size:16px}
section{padding:56px 0}
section.hell{background:var(--hell)}
.raster{display:grid;gap:16px;margin-top:26px;grid-template-columns:1fr}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:22px}
section.hell .karte{background:#fff}
.karte .ico{width:42px;height:42px;border-radius:11px;background:var(--himmel);color:var(--blau);display:grid;place-items:center;font-weight:800;margin-bottom:12px}
.karte p,.karte li{font-size:16px;color:#33404D}
.karte ul{list-style:none}
.karte li{padding:5px 0 5px 22px;position:relative}
body.rtl .karte li{padding:5px 22px 5px 0}
.karte li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border-radius:50%;background:var(--blau)}
body.rtl .karte li::before{left:auto;right:0}
.schritte{list-style:none;counter-reset:s;margin-top:26px;display:grid;gap:12px}
.schritte li{counter-increment:s;display:flex;gap:14px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:16px}
.schritte li::before{content:counter(s);flex:0 0 36px;height:36px;border-radius:50%;background:var(--blau);color:#fff;font-weight:800;display:grid;place-items:center}
.zitat{background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px;margin-top:26px}
.zitat p{font-size:20px;color:#fff}
.person{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:26px}
.foto{width:120px;height:120px;border-radius:50%;background:var(--platz);border:2px dashed var(--platzr);display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;color:#6B4E00;padding:10px}
details{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:0 18px;margin-top:10px}
summary{cursor:pointer;font-weight:700;color:var(--ink);padding:16px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--blau);font-size:22px;line-height:1}
body.rtl summary::after{float:left}
details[open] summary::after{content:"–"}
details p{padding:0 0 16px;color:#33404D;font-size:16px}
.kontakt{background:linear-gradient(160deg,var(--ink),var(--navy));color:#fff}
.kontakt h2,.kontakt .lead{color:#fff}
.kontakt .lead{color:#D6E2F5}
form{background:#fff;color:var(--text);border-radius:var(--radius);padding:22px;margin-top:24px;display:grid;gap:14px}
form label{font-size:14px;font-weight:700;color:var(--ink);display:grid;gap:6px}
form input,form select,form textarea{font:inherit;border:1px solid #C8D0DC;border-radius:10px;padding:12px;background:#fff;color:var(--text);width:100%}
form small{color:var(--grau);font-size:13px;font-weight:400}
.hinweis{font-size:13px;color:var(--grau)}
footer{background:#08141F;color:#A9B7C6;padding:34px 0;font-size:14px}
footer a{color:#D5E0EE}
footer .spalten{display:grid;gap:18px}
footer h2{font-size:16px;color:#fff;margin-bottom:6px}
.mobil-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--linie);padding:10px 16px;display:flex;gap:10px}
.mobil-cta .btn{flex:1;text-align:center;padding:12px}
body{padding-bottom:70px}
.recht{max-width:820px;margin:40px auto;padding:0 20px}
.recht h1{font-size:30px;margin-bottom:16px}
.recht h2{font-size:20px;margin:24px 0 6px}
.recht p{margin-bottom:10px}
@media(min-width:760px){
 body{padding-bottom:0}.mobil-cta{display:none}
 nav.menu{display:flex}
 .hero{padding:90px 0 76px}.hero h1{font-size:50px;max-width:820px}
 .chips{grid-template-columns:repeat(3,1fr)}
 h2{font-size:36px}section{padding:84px 0}
 .raster.drei{grid-template-columns:repeat(3,1fr)}.raster.zwei{grid-template-columns:1fr 1fr}
 .schritte{grid-template-columns:repeat(5,1fr)}.schritte li{flex-direction:column}
 form{grid-template-columns:1fr 1fr}form .breit{grid-column:1/-1}
 footer .spalten{grid-template-columns:1.2fr 1fr 1fr}
}
@media print{.mobil-cta,.banner{display:none}body{padding:0;font-size:13px}section{padding:20px 0;break-inside:avoid}.hero{padding:26px 0}header.top{position:static}}
.btn.wa{background:#25D366;color:#0B2B16;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn.wa:hover{background:#1FB957}
.route{border-top:4px solid var(--blau)}
.route .pfeil{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:8px}
body.rtl .route .pfeil{letter-spacing:0;font-size:15px}
.krieg{background:var(--ink);color:#fff}
.krieg h2,.krieg h3{color:#fff}
.krieg .lead{color:#C9D8EE}
.krieg .karte{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.krieg .karte p{color:#D6E2F5}
.krieg .eyebrow{color:#9DB7FF}
.sprachen{display:flex;gap:6px}
.sprachen a{font-size:13px;font-weight:700;border:1px solid var(--linie);padding:5px 9px;border-radius:8px;text-decoration:none;color:var(--navy)}
.sprachen a.aktiv{background:var(--navy);color:#fff;border-color:var(--navy)}
.kanaele{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.honig{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.person .karte ul{margin:8px 0}
.person .karte li{padding:5px 0 5px 22px;position:relative;list-style:none;font-size:16px}
body.rtl .person .karte li{padding:5px 22px 5px 0}
.person .karte li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border-radius:50%;background:var(--blau)}
body.rtl .person .karte li::before{left:auto;right:0}
.band{position:relative;height:200px;overflow:hidden;background:var(--ink)}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.9}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,34,56,.85),rgba(14,34,56,.15))}
.band-text{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
body.rtl .band::after{background:linear-gradient(270deg,rgba(14,34,56,.85),rgba(14,34,56,.15))}
.band-text p{color:#fff;font-size:26px;font-weight:700;max-width:560px}
.foto-bild{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:center 28%;border:4px solid #fff;box-shadow:0 8px 24px rgba(14,34,56,.2)}
.weg{display:grid;gap:8px;margin-top:22px;grid-template-columns:1fr;align-items:center}
.knoten{background:var(--himmel);border:1px solid var(--linie);border-radius:12px;padding:12px 14px;font-weight:700;color:var(--ink);text-align:center;font-size:15px}
.knoten.ziel{background:var(--blau);color:#fff;border-color:var(--blau)}
.strecke{text-align:center;font-size:13px;color:var(--grau);font-weight:700}
.strecke::before{content:"↓ ";color:var(--blau)}
body.rtl .strecke::before{content:"↓ "}
@media(min-width:900px){.band{height:240px}.band-text p{font-size:38px}.weg{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}.strecke::before{content:"→ "}body.rtl .strecke::before{content:"← "}}
.schritte li::before{flex:none;width:36px;align-self:flex-start}
.person{flex-direction:column;align-items:flex-start;gap:18px}
.person .karte{width:100%}
.foto-bild{width:170px;height:170px}
@media(min-width:760px){.person{flex-direction:row;align-items:flex-start;gap:28px}.person .karte{width:auto}.foto-bild{width:190px;height:190px}}
#ansprechpartner .wrap{text-align:center}
.person,.person .karte{text-align:start}
.person{flex-direction:column !important;align-items:center !important;gap:16px !important}
.person .karte{width:100% !important;max-width:720px}
.foto-bild{width:120px !important;height:120px !important}
.qrbox{display:flex;align-items:center;gap:18px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:14px 18px;margin-top:20px;max-width:430px}
.qrbox img{width:130px;height:130px;flex:none}
.qrbox p{font-size:15px;font-weight:700;line-height:1.5;margin:0}

/* ===== v3: heller, weicher, beweglicher (Mohamed 07.11.2026) ===== */
:root{--ink:#16365A}
.hero{position:relative;overflow:hidden;background:#EAF2FF;color:var(--ink);padding:70px 0 56px}
.hero::before{content:"";position:absolute;inset:-34px;background:url(bilder/hamburg-container-sonnenuntergang.jpg) center 62%/cover;filter:blur(9px) saturate(1.2);transform:translateY(var(--py,0px));will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(240,247,255,.80) 55%,rgba(255,255,255,.97) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--ink)}
.hero p.lead{color:#3A4A5C}
.hero .eyebrow{color:var(--blau)!important}
.hero .btn.zweit{color:var(--blau);border:2px solid var(--blau);background:rgba(255,255,255,.75);box-shadow:none}
.chip{background:rgba(255,255,255,.88);border:1px solid #DCE6F5;color:#3A4A5C;box-shadow:0 8px 22px rgba(30,60,120,.10)}
.chip b{color:var(--ink)}
.drift{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.drift span{position:absolute;font-size:34px;opacity:.55;inset-inline-start:-60px;animation:drift 30s linear infinite}
.drift span:nth-child(1){top:12%;animation-duration:34s}
.drift span:nth-child(2){top:40%;animation-duration:42s;animation-delay:-14s;font-size:40px}
.drift span:nth-child(3){top:68%;animation-duration:30s;animation-delay:-8s}
.drift span:nth-child(4){top:86%;animation-duration:38s;animation-delay:-22s}
@keyframes drift{from{inset-inline-start:-60px}to{inset-inline-start:calc(100% + 60px)}}
.rt{display:grid;grid-template-columns:1fr;gap:8px;margin-top:26px}
.rn{background:#fff;border:1px solid #DCE6F5;border-radius:12px;padding:9px 14px;font-weight:800;font-size:14px;color:var(--ink);text-align:center;box-shadow:0 6px 16px rgba(30,60,120,.10)}
.rn.ziel{background:var(--blau);color:#fff;border-color:var(--blau)}
.rl{display:none;position:relative;height:30px}
.rl::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;background:repeating-linear-gradient(90deg,var(--blau) 0 10px,transparent 10px 20px);opacity:.5;animation:dash 1.2s linear infinite}
.rl .veh{position:absolute;top:0;font-size:22px;inset-inline-start:0;animation:fahren 6s linear infinite}
@keyframes fahren{from{inset-inline-start:0}to{inset-inline-start:calc(100% - 26px)}}
@keyframes dash{to{background-position:20px 0}}
@media(min-width:900px){.rt{grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:10px}.rl{display:block}}
.marq{overflow:hidden;background:linear-gradient(90deg,#2F4FC8,#4C86D0);color:#fff;padding:13px 0;white-space:nowrap;font-weight:800;font-size:16px}
.mq{display:inline-flex;animation:lauf 32s linear infinite}
.mq span{padding-inline-end:10px}
@keyframes lauf{to{transform:translateX(-50%)}}
body.rtl .mq{animation-name:lauf-rtl}
@keyframes lauf-rtl{to{transform:translateX(50%)}}
.band::after{background:linear-gradient(90deg,rgba(22,54,90,.62),rgba(22,54,90,.10))}
body.rtl .band::after{background:linear-gradient(270deg,rgba(22,54,90,.62),rgba(22,54,90,.10))}
.krieg{background:linear-gradient(180deg,#EAF2FF,#DCEAFF);color:var(--ink)}
.krieg h2,.krieg h3{color:var(--ink)}
.krieg .lead{color:#3A4A5C}
.krieg .karte{background:#fff;border-color:#D3E1F5}
.krieg .karte p{color:#33404D}
.krieg .eyebrow{color:var(--blau)}
#warum,#ablauf{position:relative;overflow:hidden}
#warum::before,#ablauf::before{content:"";position:absolute;inset:-20px;background:center/cover;filter:blur(8px);opacity:.15;pointer-events:none}
#warum::before{background-image:url(bilder/hamburg-elbphilharmonie.jpg)}
#ablauf::before{background-image:url(bilder/hamburg-container-sonnenuntergang.jpg)}
#warum .wrap,#ablauf .wrap{position:relative;z-index:1}
.kontakt{background:linear-gradient(160deg,#2F5FA8,#4C86D0);color:#fff}
.kontakt .lead{color:#EAF2FF}
footer{background:#1F3A5C}
.karte{transition:transform .25s ease,box-shadow .25s ease}
.karte:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,60,120,.14)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.in.karte:hover{transform:translateY(-4px)}
.btn.wa{animation:puls 2.8s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.drift,.rl::before,.rl .veh,.mq,.btn.wa{animation:none!important}.reveal{opacity:1;transform:none}}
@media print{.reveal{opacity:1!important;transform:none!important}.drift,.marq{display:none}.hero::before{filter:none}}