/* DM Sans 400 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 600 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 600 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Merriweather 300 latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/merriweather-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Merriweather 300 latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/merriweather-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Merriweather 400 latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/merriweather-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Merriweather 400 latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/merriweather-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--head:'DM Sans',sans-serif;--hw:700;--orange:#E8650A;--navy:#2F3B4F;--navy2:#1D2A3A;--ink:#2A2C2E;--slate:#52647A;--grey:#5A6873;--mist:#A8B3C2;--pale:#E4ECF2;--bg:#EEF3F7;--white:#F8FAFB;--line:#C9D6E3}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:var(--hw);line-height:1.18;color:var(--navy);letter-spacing:-.015em}
.dist .n,.row .n,.kpi b,.team .big,.row .t,.contact .cards b{font-family:var(--head)}
.team .big,.row .t{font-weight:var(--hw)}
.kpi b{font-weight:800}
a{color:inherit;text-decoration:none}
.acc{color:var(--orange)}
.kicker{font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 20px}}

/* ---------- Preloader (wie roeh.com: Markenfarbe + großes Logo) ---------- */
#pre{position:fixed;inset:0;background:rgba(47,59,79,.9);z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity 4s cubic-bezier(.4,0,.6,1),visibility 4s}
#pre.done{pointer-events:none;opacity:0;visibility:hidden;transition:opacity 3.2s ease,visibility 3.2s}
#pre .stack{display:flex;flex-direction:column;align-items:center;width:min(42vw,420px)}
#pre svg{width:100%;opacity:0;transform:translateY(38vh);animation:up 3.2s .3s cubic-bezier(.4,.1,.2,1) forwards}
#pre .sub{margin-top:20px;width:62%;text-align:center;font-family:'DM Sans',sans-serif;font-weight:600;font-size:clamp(11px,1.15vw,17px);letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:#fff;opacity:0;transform:translateX(60vw);animation:inright 3.2s .3s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes inright{to{opacity:1;transform:none}}
#pre .pct{position:absolute;right:40px;bottom:32px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
#pre .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--orange);width:0;animation:bar 1.4s ease forwards}
@keyframes up{to{opacity:1;transform:none}}
@keyframes bar{to{width:100%}}
#pre .bar{animation-duration:3.4s}

/* ---------- Navigation (zentrierte weiße Leiste + Menü-Quadrat) ---------- */
.nav{opacity:0;transition:opacity 1.2s ease}.nav.show{opacity:1}.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;transition:background .35s,padding .35s,box-shadow .35s}
.nav.solid{background:rgba(248,250,251,.94);backdrop-filter:blur(10px);padding:12px 40px;box-shadow:0 1px 0 var(--line)}
.nav .logo svg{height:34px;width:auto;display:block}
.nav .logo small{display:block;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-top:4px;font-weight:600}
.nav .logo .w{fill:#fff}.nav .logo .n{fill:var(--navy)}
.nav .logo .n{display:none}
.nav ul{display:flex;gap:2px;list-style:none;background:#fff;border-radius:4px;padding:6px 8px;box-shadow:0 10px 30px rgba(29,42,58,.18)}
.nav ul a{display:block;padding:9px 16px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:500;border-radius:3px;transition:background .2s,color .2s}
.nav ul a:hover,.nav ul a.on{background:var(--bg);color:var(--orange)}
.nav ul a.login{color:var(--orange);font-weight:600}
.nav .menu{width:44px;height:44px;background:var(--orange);border:0;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.nav .menu i{display:block;width:18px;height:2px;background:#fff}
@media(max-width:1000px){.nav ul{display:none}}

/* ---------- Hero (Vollformat Stadtansicht + Logo) ---------- */
.hero{position:relative;padding:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;color:#fff;overflow:hidden;background:var(--navy2)}
.hero .bg{position:absolute;inset:-12% 0 0 0;background:url('/wp-content/uploads/funnel_poster.jpg') center/cover no-repeat;will-change:transform}
.hero video{position:absolute;inset:-12% 0 0 0;width:100%;height:112%;object-fit:cover;opacity:0;transition:opacity 3.2s cubic-bezier(.45,0,.55,1);will-change:transform}
.hero video.ready{opacity:1}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,42,58,.6) 0%,rgba(29,42,58,.35) 45%,rgba(29,42,58,.78) 100%)}
.hero .shade::after{content:'';position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.45}
.hero .mark{width:min(30vw,260px);margin:0 auto 40px;opacity:.95;position:relative;z-index:2}

.hero .mark svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.hero .content{position:relative;z-index:2;padding:24vh 0 80px}
.hero .claim{text-align:center;padding:0 40px 100px}
.hero .claim .kicker{color:var(--orange);margin-bottom:18px}
.hero h1{font-family:'Merriweather',Georgia,serif;font-weight:400;color:#fff;font-size:clamp(26px,4.1vw,58px);white-space:nowrap;letter-spacing:0;line-height:1.35;text-shadow:0 6px 40px rgba(0,0,0,.35);overflow:hidden}
.hero h1 .w{display:inline-block;opacity:0;transform:translateX(26vw);transition:opacity 5s cubic-bezier(.2,.6,.2,1),transform 7.5s cubic-bezier(.2,.6,.2,1)}
.hero h1 .w:nth-child(2){transition-delay:.7s}.hero h1 .w:nth-child(3){transition-delay:1.4s}.hero h1 .w:nth-child(4){transition-delay:2.1s}
.hero.go h1 .w{opacity:1;transform:none}
.hero .claim p,.hero .claim .kicker{opacity:0;transition:opacity 2s ease 2.2s}
.hero .claim .sub{margin:18px auto 0;font-family:'DM Sans',sans-serif;font-weight:300;font-size:clamp(15px,1.4vw,20px);color:#E6ECF3;opacity:0;transform:translateY(12px);transition:opacity 2s ease 3.4s,transform 2s ease 3.4s}.hero.go .claim .sub{opacity:1;transform:none}
.hero.go .claim p,.hero.go .claim .kicker{opacity:1}
.hero h1 .acc{color:var(--orange)}
.hero p{max-width:720px;margin:20px auto 0;color:#D6DEE8;font-size:17px}

/* ---------- Verteiler: fünf Auftritte als Panels im Hero-Fuß ---------- */
.dist{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);margin:0 40px}
.dist a{position:relative;padding:28px 26px 24px;border-right:1px solid rgba(255,255,255,.22);background:rgba(29,42,58,.28);backdrop-filter:blur(6px);transition:background .35s;min-height:196px;display:flex;flex-direction:column}
.dist a:last-child{border-right:0}
.dist a:hover{background:var(--orange)}
.dist .n{font-family:'Playfair Display',serif;font-size:14px;color:var(--orange);letter-spacing:.1em;transition:color .35s}
.dist a:hover .n{color:#fff}
.dist h3{color:#fff;font-size:24px;margin:14px 0 8px;line-height:1.15}
.dist h3 small{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.dist a:hover h3 small{color:#fff}
.dist p{font-size:13.5px;color:#D6DEE8;line-height:1.5}
.dist a:hover p{color:#fff}
.dist .go{margin-top:auto;padding-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;transition:color .35s}
.dist a:hover .go{color:#fff}
@media(max-width:1100px){.dist{grid-template-columns:repeat(3,1fr)}.dist a{border-bottom:1px solid rgba(255,255,255,.18)}}
@media(max-width:700px){.dist{grid-template-columns:1fr}.dist a{min-height:0;border-right:0}}

/* ---------- Legal-Zeile ---------- */
.hero .legal{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 40px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.75);background:linear-gradient(180deg,rgba(29,42,58,0),rgba(29,42,58,.45))}
.hero .legal nav a{margin-left:22px;color:#D6DEE8;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;transition:color .2s}
.hero .legal nav a:hover{color:var(--orange)}
@media(max-width:800px){.hero .legal{flex-direction:column;align-items:flex-start}.hero .legal nav a{margin:0 18px 0 0}}
/* ---------- Sektionen ---------- */
section{padding:130px 0}
section.alt{background:var(--bg)}
h2{font-size:clamp(30px,3.8vw,50px);max-width:940px}
p.lead{font-size:18px;color:var(--slate);max-width:760px;margin-top:18px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* Fünf Auftritte – Detail-Reihen */
.rows{margin-top:64px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:90px 1.1fr 1.4fr 200px;gap:34px;align-items:center;padding:36px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.row:hover{padding-left:12px}
.row .n{font-family:'Playfair Display',serif;font-size:30px;color:var(--orange)}
.row h3{font-size:30px}
.row h3 small{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.row .dom{font-size:12.5px;color:var(--grey);margin-top:6px;letter-spacing:.04em}
.row .t{font-family:'Playfair Display',serif;font-size:19px;color:var(--slate);line-height:1.4}
.row .t span{display:block;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--grey);margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:16px 22px;border-radius:4px;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,101,10,.32)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--navy)}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange);box-shadow:none}
.btn.light{background:#fff;color:var(--navy)}
@media(max-width:900px){.row{grid-template-columns:1fr;gap:12px}.row .n{font-size:22px}}

/* Ein Team */
.team{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.team .big{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,38px);line-height:1.25;color:var(--navy)}
.team .big .acc{color:var(--orange)}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.kpi div{border-top:3px solid var(--orange);padding-top:20px}
.kpi b{display:block;font-family:'DM Sans',sans-serif;font-weight:800;font-size:clamp(56px,6vw,84px);line-height:1;color:var(--navy);margin-bottom:10px;letter-spacing:-.02em}
.kpi span{font-size:14.5px;color:var(--slate);font-weight:500}
@media(max-width:900px){.team{grid-template-columns:1fr;gap:40px}}

/* Kontakt-Streifen */
.contact{background:var(--navy);color:#fff}
.contact h2{color:#fff}
.contact p.lead{color:#D6DEE8}
.contact .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end}
.contact .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden}
.contact .cards div{background:var(--navy);padding:22px}
.contact .cards b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.contact .cards span{font-size:14px;color:#E6ECF2;line-height:1.6}
@media(max-width:900px){.contact .grid,.contact .cards{grid-template-columns:1fr}}

/* Footer */
footer{background:var(--navy2);color:var(--mist);padding:70px 0 34px;font-size:13px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .top b{display:block;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer .top a{display:block;color:#D6DEE8;margin-bottom:8px}
footer .top a:hover{color:var(--orange)}
footer .logo svg{height:34px;width:auto;margin-bottom:16px}
footer .legal{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-top:26px;font-size:12px}
footer .legal nav a{margin-left:22px;color:#D6DEE8;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
footer .legal nav a:hover{color:var(--orange)}
footer .rt{font-size:12px;color:var(--mist);line-height:1.6;max-width:520px}
@media(max-width:900px){footer .top{grid-template-columns:1fr 1fr}footer .legal{flex-direction:column;align-items:flex-start}footer .legal nav a{margin:0 22px 0 0}}

/* Hinweis-Badge für Platzhalter (nur im Prototyp) */
.note{position:fixed;left:16px;bottom:16px;z-index:60;background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:11px;color:var(--grey);letter-spacing:.06em;box-shadow:0 6px 20px rgba(29,42,58,.12);display:flex;gap:6px;align-items:center}
.note button{border:1px solid var(--line);background:#fff;border-radius:3px;padding:5px 9px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.06em;color:var(--navy);cursor:pointer}
.note button.on,.note button:hover{background:var(--orange);border-color:var(--orange);color:#fff}

/* ===== Umbau 08.10.2026: Gruppenzeile, Unterauswahl, Wegweiser ===== */
.grpbar{position:fixed;top:0;left:0;right:0;z-index:58;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(13,21,32,.55);backdrop-filter:blur(8px);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);border-bottom:1px solid rgba(255,255,255,.08);transition:background .35s,opacity 1.2s ease;opacity:0}
body:has(#pre.done) .grpbar,.grpbar.show{opacity:1}
.grpbar .l{display:flex;gap:22px;align-items:center}.grpbar b{font-weight:600;color:rgba(255,255,255,.45)}
.grpbar a{transition:color .2s}.grpbar a:hover{color:#fff}
.grpbar.solid{background:var(--navy2)}
.nav{top:34px}
.nav.solid .logo .w{display:none}.nav.solid .logo .n{display:inline}
@media(max-width:1100px){.grpbar{display:none}.nav{top:0}}

.dist a{overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto;align-content:start}
/* Kurztext und Unterauswahl liegen übereinander in derselben Zelle: Panelhöhe bleibt beim Hover gleich (kein Springen/Flackern, 08.10.) */
.dist a>p,.dist .sub{grid-row:3;grid-column:1;align-self:start;margin:14px 0 0}
.dist .go{grid-row:4}
.dist .sub{list-style:none;padding:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.dist a>p{transition:opacity .3s ease,visibility .3s}
.dist .sub li{font-size:12.5px;line-height:1.35;color:#fff;padding:4px 0 4px 14px;position:relative}
.dist .sub li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:1px;background:#fff}
.dist a:hover .sub,.dist a:focus-visible .sub{opacity:1;visibility:visible}
.dist a:hover>p,.dist a:focus-visible>p{opacity:0;visibility:hidden}
@media(hover:none){.dist .sub{opacity:1;visibility:visible}.dist a>p{display:none}.dist .sub li{color:#D6DEE8}.dist .sub li::before{background:var(--orange)}}
.hero .claim{padding-bottom:132px}   /* etwas mehr Luft zwischen Unterzeile und Panels (08.10.) */
@media(max-width:700px){.dist a{min-height:0}}

.hero .hint{position:relative;z-index:2;text-align:center;margin:26px 40px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#D6DEE8}
.hero .hint a{color:var(--orange);font-weight:600;border-bottom:1px solid rgba(232,101,10,.5);padding-bottom:2px}
.hero .hint a:hover{color:#fff;border-color:#fff}
.hero .content{padding-bottom:110px}
@media(max-width:800px){.hero .content{padding-bottom:150px}}
@media(max-width:700px){.hero h1{white-space:normal}}   /* Claim war mobil abgeschnitten */

.guide{background:var(--bg);padding:110px 0;scroll-margin-top:40px}
.guide .head{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin-bottom:54px}
.guide .steps{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:22px}
.guide .steps span{padding:6px 10px;border:1px solid var(--line);border-radius:3px;background:#fff}
.guide .steps span.on{border-color:var(--orange);color:var(--orange)}
.guide .steps span.done{color:var(--navy);border-color:var(--navy)}
.wiz{background:#fff;border:1px solid var(--line);border-radius:6px;padding:44px 48px;min-height:360px;box-shadow:0 16px 50px rgba(29,42,58,.08);scroll-margin-top:150px}
.wiz h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:8px}
.wiz .q{color:var(--slate);font-size:16px;margin-bottom:28px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.opts button{text-align:left;background:var(--white);border:1px solid var(--line);border-radius:5px;padding:20px 22px;cursor:pointer;font:inherit;color:var(--navy);transition:border-color .2s,background .2s,transform .2s;display:flex;flex-direction:column;gap:6px}
.opts button b{font-size:17px;font-weight:600}
.opts button span{font-size:14px;color:var(--grey);line-height:1.45}
.opts button:hover{border-color:var(--orange);background:#fff;transform:translateY(-2px)}
.opts button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.wiz .back{margin-top:26px;display:flex;gap:18px;align-items:center}
.wiz .back button{background:none;border:0;font:600 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);cursor:pointer}
.wiz .back button:hover{color:var(--orange)}
.rec{display:grid;grid-template-columns:1fr;gap:14px}
.rec a{display:grid;grid-template-columns:1fr auto;gap:8px 30px;align-items:center;padding:24px 26px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:5px;background:var(--white);transition:background .2s,transform .2s}
.rec a:hover{background:#fff;transform:translateX(4px)}
.rec a.second{border-left-color:var(--mist)}
.rec small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:6px}
.rec a.second small{color:var(--grey)}
.rec b{font-size:20px;color:var(--navy);font-family:var(--head)}
.rec p{font-size:14.5px;color:var(--slate);margin-top:6px;grid-column:1}
.rec .go{grid-column:2;grid-row:1 / span 2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;white-space:nowrap}
.rec .alt{margin-top:18px;font-size:14.5px;color:var(--slate)}
.rec .alt a{display:inline;padding:0;border:0;border-bottom:1px solid var(--line);color:var(--navy);background:none}
.rec .alt a:hover{color:var(--orange);border-color:var(--orange);transform:none}
@media(max-width:900px){.guide .head{grid-template-columns:1fr;gap:20px}.opts{grid-template-columns:1fr}.wiz{padding:28px 22px}.rec a{grid-template-columns:1fr}.rec .go{grid-column:1;grid-row:auto}}

/* Empfehlungskarte nach Nasher: Spiegel · Tun · Warum · Nächster Schritt (08.10.) */
.wiz .spiegel{font-family:'Merriweather',Georgia,serif;font-weight:300;font-size:17.5px;line-height:1.6;color:var(--navy);max-width:62ch}
.rec a{display:block;padding:26px 28px 24px}
.rec a .blk{display:grid;grid-template-columns:130px 1fr;gap:6px 22px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.rec a .blk:first-of-type{margin-top:16px}
.rec a .blk em{font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;padding-top:3px}
.rec a .blk p{margin:0;font-size:15px;color:var(--ink);line-height:1.55;grid-column:2}
.rec a .go{display:inline-block;margin-top:16px}
.rec a.second{padding:20px 26px}
.rec a.second p{margin-top:6px}
@media(max-width:700px){.rec a .blk{grid-template-columns:1fr;gap:4px}.rec a .blk p{grid-column:1}}

footer.mini{background:var(--navy2);color:var(--mist);padding:30px 0;font-size:12px}
footer.mini .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
footer.mini a{color:#D6DEE8;margin-right:22px;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
footer.mini a:hover{color:var(--orange)}
.hero .legal nav,footer.mini .wrap>span:last-child{display:flex;flex-wrap:wrap;row-gap:8px}

/* ===== Umbau 2 (09.10.2026): Claim + Marketplace oben, 3×2 Kacheln über die volle Breite ===== */
.hero .top{display:grid;grid-template-columns:2fr 1fr;align-items:end;margin:0 40px 54px}
.hero .top .claim{padding:0 28px 0 0}
.hero .top h1{font-size:clamp(24px,3.15vw,46px)}
.mkt{display:flex;flex-direction:column;gap:4px;padding:18px 22px 16px;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(29,42,58,.22);backdrop-filter:blur(4px);color:#fff;text-decoration:none;transition:background .35s,border-color .35s;opacity:0;transform:translateY(10px);transition:opacity 1.6s ease 2.6s,transform 1.6s ease 2.6s,background .35s,border-color .35s}
.hero.go .mkt{opacity:1;transform:none}
.mkt small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.mkt b{font-family:var(--head);font-size:22px;font-weight:700;line-height:1.15}
.mkt .t{font-size:13.5px;color:#D6DEE8;line-height:1.45}
.mkt .go{margin-top:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600}
.mkt .go.soon{color:var(--mist)}
a.mkt:hover{background:var(--orange);border-color:var(--orange)}a.mkt:hover small,a.mkt:hover .t,a.mkt:hover .go{color:#fff}
.dist{grid-template-columns:repeat(3,1fr)}
.dist a{grid-template-columns:minmax(170px,.8fr) 1.2fr;grid-template-rows:auto auto 1fr auto;column-gap:22px;min-height:0;padding:24px 26px 22px;border-bottom:0}
.dist a:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.22)}
.dist a:nth-child(3n){border-right:0}
.dist .n{grid-column:1;grid-row:1}.dist h3{grid-column:1;grid-row:2;margin:12px 0 0}.dist .go{grid-column:1 / -1;grid-row:4;padding-top:16px;white-space:nowrap}
.dist .sub{grid-column:2;grid-row:1 / span 3;align-self:start;margin:2px 0 0}
.hero .content{padding:19vh 0 84px}
@media(hover:none){.dist .sub{display:none}.dist a{grid-template-columns:1fr}}
@media(max-width:1100px){.dist a{grid-template-columns:1fr}.dist .sub{display:none}}
@media(max-width:900px){.hero .top{grid-template-columns:1fr;gap:26px}.hero .top .claim{padding:0}.dist{grid-template-columns:1fr 1fr}.dist a:nth-child(n){border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}.dist a:nth-child(2n){border-right:0}}
@media(max-width:800px){.hero .content{padding:16vh 0 170px}}
@media(max-width:560px){.dist{grid-template-columns:1fr;margin:0 20px}.dist a:nth-child(n){border-right:0}.dist a{padding:20px 22px 18px}.hero .top{margin:0 20px 34px}}

/* ===== Umbau 2b (09.10.2026, Martin): kompakte Kacheln – Themen klappen als Überlagerung auf (keine Layoutverschiebung) ===== */
.dist a{display:block;position:relative;overflow:visible;padding:20px 26px 18px;min-height:0}
.dist .n{position:absolute;right:26px;top:20px}
.dist h3{margin:0;font-size:23px}
.dist h3 small{display:block;margin:0 0 4px}
.dist .go{display:block;padding-top:12px}
.dist .sub{position:absolute;left:-1px;right:-1px;top:100%;z-index:6;margin:0;padding:6px 26px 18px;background:var(--orange);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility .25s;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.dist a:nth-child(n+4) .sub{top:auto;bottom:100%;padding:18px 26px 6px;transform:translateY(6px);box-shadow:0 -18px 40px rgba(0,0,0,.25)}
.dist a:hover,.dist a:focus-visible{z-index:7}
.dist a:hover .sub,.dist a:focus-visible .sub{opacity:1;visibility:visible;transform:none}
@media(hover:none),(max-width:1100px){.dist .sub{display:none}}
/* Marketplace: schmaler, höher, abgerundet, rechts hängend mit Abstand */
.hero .top{align-items:center}
.mkt{justify-self:end;width:min(250px,100%);min-height:210px;margin-right:28px;padding:22px 22px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(160deg,rgba(29,42,58,.62),rgba(13,21,32,.42));backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.3);gap:6px}
.mkt small{color:#D6DEE8}
.mkt .tag{align-self:flex-start;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--orange);border-radius:20px;padding:4px 10px;margin-bottom:10px}
.mkt b{font-size:24px}
.mkt .t{margin-top:2px}
.mkt .go{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);line-height:1.6}.mkt .go i{display:block;font-style:normal;color:#D6DEE8;letter-spacing:.12em}
@media(max-width:900px){.mkt{justify-self:stretch;width:auto;min-height:0;margin-right:0}}

/* ===== Umbau 2c (09.10.2026, Martin): Karte wächst – oben nach unten, unten nach oben; Überschrift bleibt immer oben ===== */
.dist a{height:122px;padding:0;overflow:visible;background:none;backdrop-filter:none}
.dist a:hover{background:none}
.dist .card{position:absolute;left:0;right:0;top:0;min-height:100%;padding:20px 26px 18px;background:rgba(29,42,58,.28);backdrop-filter:blur(6px);transition:background .3s,box-shadow .3s;display:flex;flex-direction:column}
.dist a:nth-child(n+4) .card{top:auto;bottom:0}
.dist a:hover .card,.dist a:focus-visible .card{background:var(--orange);box-shadow:0 22px 50px rgba(0,0,0,.3);z-index:8}
.dist a:nth-child(n+4):hover .card{box-shadow:0 -22px 50px rgba(0,0,0,.3)}
.dist .sub{position:static;order:2;display:flex;flex-wrap:wrap;gap:8px;max-height:0;overflow:hidden;opacity:0;visibility:visible;transform:none;margin:0;padding:0;background:none;box-shadow:none;pointer-events:none;transition:max-height .35s ease,opacity .25s ease,margin .35s ease}
.dist a:nth-child(n+4) .sub{padding:0;transform:none;box-shadow:none}
.dist a:hover .sub,.dist a:focus-visible .sub{max-height:220px;opacity:1;margin:16px 0 6px}
.dist .sub li{font-size:13.5px;font-weight:500;line-height:1.3;color:#fff;padding:6px 12px;border:1px solid rgba(255,255,255,.55);border-radius:20px;background:rgba(255,255,255,.08)}
.dist .sub li::before{content:none}
.dist .go{order:3}
.dist h3{order:1}
@media(hover:none),(max-width:1100px){.dist a{height:auto}.dist .card{position:static;background:rgba(29,42,58,.28)}.dist .sub{display:none}}

/* ===== Umbau 2d (09.10.2026, Martin): Kacheln einzeln – kleiner Abstand, abgerundete Ecken ===== */
.dist{gap:8px;border-top:0;border-bottom:0}
.dist a,.dist a:nth-child(n){border:0}
.dist .card{border:1px solid rgba(255,255,255,.2);border-radius:12px}
.dist a:hover .card,.dist a:focus-visible .card{border-color:var(--orange)}
.dist a:hover .sub,.dist a:focus-visible .sub{max-height:300px}
a.mkt:hover .go i,a.mkt:focus-visible .go i{color:#fff}
/* Umbau 2e (09.10.2026, Martin): Claim mittig über der Fläche links der schmalen Marketplace-Box, weniger Abstand zu den Kacheln */
.hero .top{grid-template-columns:1fr auto;margin-bottom:30px}
.grpbar .r{display:flex;gap:22px;align-items:center}.grpbar .r .mp{color:#fff}
/* Umbau 2f (10.10.2026, Martin): Claim + Marketplace höher, Kacheln unten verankert; Claim exakt mittig zwischen linkem Rand (40px) und Marketplace-Box */
@media(min-width:901px){.hero .top .claim{padding-right:0}.mkt{width:250px}
.hero .content{display:flex;flex-direction:column;box-sizing:border-box;min-height:100vh;padding:calc(112px + 5.5vh) 0 92px}
.hero .top{margin-bottom:48px}.dist{margin-top:auto}
.hero .content{padding-top:34px}.hero .top{flex:1 0 auto;margin-bottom:0;align-items:center}.mkt{align-self:center;margin-top:24px;margin-bottom:24px}.dist{margin-top:0}}
/* 2g (10.10.2026, Martin): Claim-Block (Kicker bis Unterzeile) mittig zwischen Bildanfang unter der Gruppenzeile (34px) und Oberkante Kacheln; Marketplace auf gleicher Mittelachse wie der Claim */
/* Schrift wie Distressed-Hero: H1 größer (nicht ganz 96px), Unterzeile wie Krisen sind unser Business */
.hero .top h1{font-size:clamp(28px,3.4vw,64px)}
.hero .top p.sub{font-family:'Merriweather',serif;font-weight:400;font-size:clamp(17px,1.8vw,24px);line-height:1.6;color:#E6ECF2}
/* Mobil: CSS5 (1fr auto) hatte die einspaltige Anordnung überschrieben */
@media(max-width:900px){.hero .top{grid-template-columns:1fr;gap:26px}}