/* digital hoch x — Mobile-First Website
   Design-Quelle: Claude-Design-Handoff "DHX Startseite.dc.html" */

/* ---------- Schriften: selbst gehostet unter /assets/fonts/ (kein Google-CDN, DSGVO) ---------- */
/* Space Grotesk & Hanken Grotesk sind Variable Fonts (eine Datei je Subset deckt alle Gewichte ab) */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-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;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-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;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-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;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/space-mono-400-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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/space-mono-400-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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/space-mono-700-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;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/space-mono-700-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;
}

:root{
  --violet:#8537FF;
  --mint:#00D4B3;
  --ink:#17161C;
  --dark:#250A5F;
  --footer-bg:#1A0838;
  --gray:#56555F;
  --gray2:#9295AA;
  --gray3:#3E3D47;
  --tint:#F3EFFA;
  --tint2:#F5F1FF;
  --page:#E7E4F2;
  --line-07:rgba(17,17,17,.07);
  --line-08:rgba(17,17,17,.08);
  --line-10:rgba(17,17,17,.1);
  --line-12:rgba(17,17,17,.12);
  --sg:'Space Grotesk',sans-serif;
  --sm:'Space Mono',monospace;
  --hg:'Hanken Grotesk',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--hg)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,a{-webkit-tap-highlight-color:transparent}
button{transition:opacity .12s ease, background-color .12s ease;font-family:inherit}
button:active{opacity:.55}
a:active{opacity:.6}
[hidden]{display:none!important}
img{max-width:100%}
html.no-scroll,html.no-scroll body{overflow:hidden}
@keyframes dhxSlideUp{from{transform:translateY(130%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Seiten-Spalte: Mobile voll, Desktop zentriert auf --page */
.site{max-width:430px;margin:0 auto;background:#fff;min-height:100vh;min-height:100dvh;position:relative;color:var(--ink);box-shadow:0 0 44px rgba(37,10,95,.09)}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line-07)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 13px}
.topbar__logo{display:inline-flex;align-items:center;background:transparent;border:0;padding:0;margin:0;cursor:pointer}
.topbar__logo img{height:28px;width:auto;display:block}
.topbar__right{display:flex;align-items:center;gap:14px}
.badge-dsgvo{display:flex;align-items:center;gap:6px}
.badge-dsgvo .badge-dsgvo__dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.badge-dsgvo .badge-dsgvo__txt{font:600 10.5px/1 var(--sm);letter-spacing:.03em;color:var(--gray)}
.burger{flex:0 0 auto;display:inline-flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:center;width:44px;height:44px;margin:-4px 0;border:0;background:transparent;cursor:pointer;padding:0}
.burger span{width:21px;height:2px;background:var(--ink);border-radius:1px}
.burger span:nth-child(3){width:13px}

/* ---------- Typo-Bausteine ---------- */
.eyebrow{font:700 11px/1 var(--sm);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.eyebrow--light{color:rgba(255,255,255,.55)}
.h2{margin:13px 0 0;font:700 24px/1.18 var(--sg);letter-spacing:-.02em;color:var(--ink)}
.h2--23{font-size:23px}
.p15{margin:12px 0 0;font:400 15px/1.6 var(--hg);color:var(--gray)}
.lead{margin:14px 0 0;font:400 15.5px/1.6 var(--hg);color:var(--gray)}
.punch{margin:18px 0 0;font:500 19px/1.35 var(--sg);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}

/* ---------- Buttons & Links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:0;border-radius:10px;font:600 15px var(--hg);padding:14px 20px;text-decoration:none;transition:opacity .12s ease, background-color .12s ease}
.btn:active{opacity:.55}
.btn--white{background:#fff;color:var(--dark)}
.btn--violet{background:var(--violet);color:#fff}
.btn--violet:hover{background:var(--dark)}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:#1A0838}
.btn--ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn--ghost-light:hover{background:rgba(255,255,255,.08)}
.btn--ghost{background:transparent;color:var(--dark);border:1px solid rgba(17,17,17,.16)}
.btn--lg{gap:9px;font-size:15.5px;padding:15px 22px}
.btn--block{width:100%}
.btn__arrow{font:600 17px var(--hg)}
.textlink{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:transparent;border:0;padding:11px 4px;font:600 14px var(--hg);color:var(--violet);text-decoration:none}
.textlink--sm{gap:7px;padding:11px 2px;font-size:13.5px}

/* ---------- Sektionen ---------- */
.sec{padding:32px 24px}
.sec--tint{background:var(--tint)}

/* Dunkle Hero-/Panel-Flächen */
.hero{padding:34px 24px;background:var(--dark);color:#fff;position:relative;overflow:hidden}
.hero__grid{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 22px);-webkit-mask-image:linear-gradient(106deg,transparent 6%,rgba(0,0,0,.55) 50%,#000 100%);mask-image:linear-gradient(106deg,transparent 6%,rgba(0,0,0,.55) 50%,#000 100%)}
.hero__grid--kontakt{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 1px,transparent 1px 22px);-webkit-mask-image:linear-gradient(104deg,transparent 18%,rgba(0,0,0,.5) 55%,#000 100%);mask-image:linear-gradient(104deg,transparent 18%,rgba(0,0,0,.5) 55%,#000 100%)}
.mintbar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mint)}
.hero__in{position:relative}
.hero h1{margin:24px 0 0;font:700 36px/1.08 var(--sg);letter-spacing:-.03em;color:#fff}
.hero__sub{margin:15px 0 0;font:400 16px/1.55 var(--hg);color:rgba(255,255,255,.82);max-width:40ch}

.panel-dark{background:var(--dark);border-radius:16px;padding:26px 22px;color:#fff;position:relative;overflow:hidden}
.panel-dark h2{margin:0;font:700 22px/1.18 var(--sg);letter-spacing:-.02em;color:#fff}
.panel-dark p{margin:10px 0 0;font:400 14.5px/1.55 var(--hg);color:rgba(255,255,255,.78)}
.panel-dark .btn{margin-top:18px}

/* Hero-Pills */
.pills{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:999px;font:600 12.5px/1 var(--hg);color:rgba(255,255,255,.92)}
.pill__dot{width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* Social Proof */
.proof{margin-top:16px;display:flex;align-items:center;gap:10px}
.proof__stars{display:inline-flex;gap:1px;font-size:15px;line-height:1;color:#FBBC05;letter-spacing:1px}
.proof__score{font:700 14px/1 var(--sg);color:#fff}
.proof__sep{width:1px;height:13px;background:rgba(255,255,255,.22)}
.proof__label{font:500 13px/1 var(--hg);color:rgba(255,255,255,.72)}

/* ---------- Karten ---------- */
.card{border:1px solid var(--line-10);border-radius:16px;padding:20px;background:#fff}
.card--14{border-radius:14px;padding:18px}
.card-label{display:flex;align-items:center;gap:8px}
.card-label__dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.card-label__txt{font:700 10.5px/1 var(--sm);letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.card__title{margin-top:11px;font:600 19px/1.25 var(--sg);letter-spacing:-.015em;color:var(--ink)}
.card__p{margin:8px 0 0;font:400 14px/1.55 var(--hg);color:var(--gray)}

.bullets{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.bullet{display:flex;gap:9px;align-items:flex-start}
.bullet__dot{flex:0 0 auto;margin-top:6px;width:5px;height:5px;border-radius:50%;background:var(--violet)}
.bullet__txt{font:400 13.5px/1.5 var(--hg);color:var(--gray3)}
.bullet__txt strong{font-weight:600;color:var(--ink)}

/* Hinweis-Box (Private AI) */
.notice{margin-top:12px;display:flex;gap:11px;align-items:flex-start;border:1px solid rgba(133,55,255,.28);background:var(--tint2);border-radius:14px;padding:15px 17px}
.notice__icon{flex:0 0 auto;margin-top:1px;color:var(--violet)}
.notice__label{font:700 10px/1 var(--sm);letter-spacing:.13em;text-transform:uppercase;color:var(--violet)}
.notice__p{margin:6px 0 0;font:400 13.5px/1.5 var(--hg);color:var(--gray)}

/* ---------- Tab-Bar (Leistung) ---------- */
.tabs{padding:16px 24px 4px;background:#fff}
.tabs__in{display:flex;gap:4px;padding:4px;background:#F1ECFA;border-radius:12px}
.tab{flex:1;display:block;text-align:center;cursor:pointer;border:0;border-radius:9px;padding:11px 6px;font:600 13px/1 var(--hg);background:transparent;color:var(--gray);text-decoration:none}
.tab--active{background:var(--dark);color:#fff;box-shadow:0 2px 6px rgba(37,10,95,.25)}

/* ---------- Schritt-Listen ---------- */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line-08)}
.step:last-child{border-bottom:1px solid var(--line-08)}
.step__num{flex:0 0 26px;font:700 13px var(--sm);color:var(--violet)}
.step__t{font:600 16px var(--sg);color:var(--ink)}
.step__p{margin:5px 0 0;font:400 14px/1.55 var(--hg);color:var(--gray)}
.steps--sm .step{gap:14px;padding:14px 0}
.steps--sm .step__num{flex-basis:24px;line-height:1.4}
.steps--sm .step__t{font-size:15px}
.steps--sm .step__p{margin-top:3px;font-size:13.5px;line-height:1.5}

/* ---------- Akkordeon (FAQ) ---------- */
.acc{border-top:1px solid var(--line-12)}
.acc__btn{width:100%;text-align:left;cursor:pointer;background:transparent;border:0;padding:16px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.acc__q{font:600 16px/1.3 var(--sg);color:var(--ink)}
.acc__glyph{flex:0 0 auto;color:var(--violet);font:300 22px/1 var(--sg);padding-top:1px}
.acc__body{padding:0 0 16px}
.acc__body p{margin:0;font:400 14.5px/1.55 var(--hg);color:var(--gray)}

/* ---------- Handwerk-Akkordeon (Methode) ---------- */
.hw{margin-top:20px;border-top:1px solid var(--line-08);padding-top:15px}
.hw__btn{width:100%;cursor:pointer;background:transparent;border:0;padding:0;text-align:left;display:flex;align-items:center;gap:10px}
.hw__label{font:700 10.5px/1 var(--sm);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.hw__rule{flex:1;height:1px;background:rgba(17,17,17,.09)}
.hw__glyph{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid rgba(133,55,255,.3);color:var(--violet);font:300 17px/20px var(--sg);text-align:center}
.hw__body{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.hw__item{font:400 14px/1.5 var(--hg);color:var(--gray)}
.hw__item .hw__term{font:600 14px var(--sg);color:var(--ink)}

/* ---------- Zeilen-Teaser (borders oben/unten) ---------- */
.rowlink{width:100%;text-align:left;cursor:pointer;background:transparent;border:0;border-top:1px solid var(--line-12);padding:18px 0;display:flex;align-items:center;gap:14px;text-decoration:none}
.rowlink:hover{opacity:.7}
.rowlink__kicker{display:block;font:700 9.5px/1 var(--sm);letter-spacing:.13em;text-transform:uppercase;color:var(--gray2)}
.rowlink__t{display:block;margin-top:8px;font:600 17px/1.22 var(--sg);letter-spacing:-.01em;color:var(--ink)}
.rowlink__arrow{flex:0 0 auto;color:var(--violet);font:400 17px/1 var(--sg)}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg);color:rgba(255,255,255,.6);padding:38px 24px 32px}
.footer__logo{height:26px;width:auto;display:block}
.footer__tag{margin:15px 0 0;font:400 13px/1.55 var(--hg);color:rgba(255,255,255,.5);max-width:300px}
.footer__nav{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
.footer__chip{display:inline-block;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:14px 16px;font:500 13px var(--hg);color:rgba(255,255,255,.8);text-decoration:none}
.footer__badge{margin-top:20px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 13px}
.footer__badge-dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.footer__badge-txt{font:600 12px var(--hg);color:#fff}
.footer__contact{margin-top:18px;display:flex;flex-direction:column;gap:5px;font:500 12.5px var(--hg)}
.footer__contact a{text-decoration:none;color:rgba(255,255,255,.6)}
.footer__contact span{color:rgba(255,255,255,.45)}
.footer__legal{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:18px;font:500 12.5px var(--hg)}
.footer__legal a{display:inline-block;padding:8px 0;text-decoration:none;color:rgba(255,255,255,.55)}
.footer__copy{margin-top:14px;font:400 11.5px/1.5 var(--hg);color:rgba(255,255,255,.36)}

/* ---------- Sticky-CTA-Leiste ---------- */
.sticky{position:sticky;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line-07);padding:9px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.sticky--anim{animation:dhxSlideUp .35s ease}
.sticky__in{display:flex;align-items:center;gap:10px}
.sticky__book{flex:1}
.sticky__call{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;text-decoration:none}
.sticky__call--open{background:var(--mint);color:#08231D;box-shadow:0 6px 16px rgba(0,212,179,.35)}
.sticky__call--closed{background:#E6E6EC;color:var(--gray2);pointer-events:none}
.sticky__note{margin-top:7px;text-align:center;font:500 11px var(--hg);color:var(--gray2)}

/* ---------- Overlays ---------- */
.overlay{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,8,40,.5)}
.overlay__sheet{width:100%;max-width:430px;height:92vh;height:92dvh;background:#fff;border-radius:18px 18px 0 0;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.sheet__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line-08)}
.sheet__label{font:700 11px/1 var(--sm);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.sheet__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(17,17,17,.14);background:#fff;border-radius:8px;cursor:pointer;padding:0}
.sheet__body{flex:1;min-height:0;overflow:hidden;background:#fff}
.sheet__body--scroll{overflow-y:auto;padding:24px 24px 40px}
.sheet__body iframe{border:0;width:100%;height:100%;display:block}

/* Consent-Gate: Google Kalender lädt erst nach aktiver Zustimmung (Zwei-Klick, DSGVO) */
.consent-gate{padding:26px 24px 34px}
.consent-gate__txt{margin:0;font:400 15px/1.6 var(--hg);color:var(--gray)}
.consent-gate__txt strong{color:var(--ink);font-weight:600}
.consent-gate__txt a{color:var(--violet)}
.consent-gate__alt{margin:18px 0 0;font:400 13.5px/1.6 var(--hg);color:var(--gray2)}
.consent-gate__alt a{color:var(--gray);text-decoration-color:var(--gray2)}

/* Menü */
.menu{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;background:rgba(15,8,40,.5)}
.menu__panel{width:100%;max-width:430px;height:100vh;height:100dvh;background:var(--dark);display:flex;flex-direction:column;color:#fff}
.menu__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 13px;border-bottom:1px solid rgba(255,255,255,.12)}
.menu__head img{height:26px;width:auto;display:block}
.menu__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.26);background:transparent;border-radius:8px;color:#fff;cursor:pointer;padding:0}
.menu__nav{padding:6px 14px;display:flex;flex-direction:column;flex:1;min-height:0}
.menu__link{text-align:left;cursor:pointer;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font:600 22px/1 var(--sg);letter-spacing:-.02em;padding:13px 10px;display:flex;align-items:center;justify-content:space-between;text-decoration:none}
.menu__active-dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.menu__foot{margin-top:auto;padding:14px 18px calc(26px + env(safe-area-inset-bottom,0px))}

/* ---------- Broschüren-Formular ---------- */
.lead-progress{margin-top:20px;display:flex;align-items:center;gap:11px}
.lead-progress__step{flex:0 0 auto;font:700 10px/1 var(--sm);letter-spacing:.12em;text-transform:uppercase;color:var(--gray2)}
.lead-progress__track{flex:1;height:4px;background:#EDEAF6;border-radius:2px;display:block;overflow:hidden}
.lead-progress__fill{display:block;height:100%;background:var(--violet);border-radius:2px;transition:width .25s ease}
.field{display:block}
.field__label{display:block;font:600 12px var(--hg);color:var(--gray);margin-bottom:6px}
.field__label .req{color:var(--violet)}
.field__label .opt{font-weight:400;color:var(--gray2)}
.field input[type=text],.field input[type=email]{width:100%;padding:13px 14px;border:1px solid rgba(17,17,17,.18);border-radius:9px;font:400 15px var(--hg);color:var(--ink);background:#fff}
.lead-error{margin-top:14px;font:500 13px/1.45 var(--hg);color:#C0392B}
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin-top:2px}
.consent input{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:#8537FF}
.consent span{font:400 12.5px/1.5 var(--hg);color:var(--gray)}
.consent a{color:var(--violet);text-decoration:none}

/* ---------- Wissen ---------- */
.wiki-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(17,17,17,.16);border-radius:11px;padding:13px 15px}
.wiki-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:400 16px var(--hg);color:var(--ink)}
.wiki-card{width:100%;text-align:left;cursor:pointer;background:#fff;border:1px solid var(--line-10);border-radius:11px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none}
.wiki-card__t{display:block;font:600 16px/1.3 var(--sg);color:var(--ink)}
.wiki-card__kw{display:block;margin-top:4px;font:400 11px/1 var(--sm);color:var(--gray2)}
.wiki-card__theme{display:block;font:700 9px/1 var(--sm);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.wiki-card__arrow{flex:0 0 auto;font:600 16px var(--hg);color:var(--violet)}
.wiki-theme{border-top:2px solid var(--violet);padding-top:14px}
.wiki-theme__label{font:700 10px/1 var(--sm);letter-spacing:.1em;text-transform:uppercase}
.wiki-theme__sub{margin:6px 0 0;font:400 13px/1.4 var(--hg);color:var(--gray)}
.wiki-theme__list{margin-top:12px;display:flex;flex-direction:column;gap:9px}

/* ---------- Referenzen-Carousel ---------- */
.cases{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;padding:2px 24px 8px;scrollbar-width:none}
.cases::-webkit-scrollbar{display:none}
.case{flex:0 0 85%;scroll-snap-align:start;border:1px solid var(--line-08);border-radius:14px;padding:20px;background:#fff}
a.case,button.case{text-align:left;cursor:pointer;text-decoration:none;display:block}
a.case:hover{border-color:rgba(133,55,255,.4)}
.case__kicker{display:block;font:700 10.5px var(--sm);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.case__t{display:block;margin-top:8px;font:700 18px/1.22 var(--sg);color:var(--ink)}
.case__p{display:block;margin:7px 0 0;font:400 13.5px/1.5 var(--hg);color:var(--gray)}
.case-dots{margin-top:6px;padding:0 24px;display:flex;gap:7px}
.case-dots span{width:7px;height:7px;border-radius:50%;background:#D5D2E0}
.case-dots span.is-active{background:var(--violet)}

/* ---------- Artikel / Legal ---------- */
.art-section{padding:16px 0;border-top:1px solid var(--line-08)}
.art-section__h{font:600 19px/1.3 var(--sg);color:var(--ink)}
.art-section__p{margin:7px 0 0;font:400 17px/1.65 var(--hg);color:var(--gray)}
.backlink{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:transparent;border:0;padding:6px 0;font:600 12.5px var(--hg);color:var(--violet);text-decoration:none}

.legal{font:400 14.5px/1.7 var(--hg);color:var(--gray)}
.legal h2{margin:26px 0 0;font:700 18px var(--sg);color:var(--ink);text-wrap:balance}
.legal h3{margin:24px 0 0;font:700 16px var(--sg);color:var(--ink)}
.legal--ds{font-size:14px;line-height:1.65}
.legal--ds h3{margin:16px 0 0;font-size:15px}
.legal p{margin:10px 0 0}
.legal strong{color:var(--ink);font-weight:600}

/* ---------- Glossar ---------- */
.gloss{padding:14px 0;border-top:1px solid var(--line-08)}
.gloss__term{font:700 14px/1 var(--sm);letter-spacing:.02em;color:var(--dark)}
.gloss__def{margin:7px 0 0;font:400 16.5px/1.6 var(--hg);color:var(--gray)}

/* ---------- Team ---------- */
.founder{display:flex;gap:14px;align-items:center}
.founder img{flex:0 0 auto;width:84px;height:84px;border-radius:12px;object-fit:cover;object-position:center top;border:1px solid var(--line-07)}
.founder__name{font:700 19px/1.1 var(--sg);color:var(--ink)}
.founder__role{margin-top:5px;font:700 11px var(--sm);letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.founder__area{margin-top:4px;font:500 12.5px var(--hg);color:var(--gray2)}
.founder__p{margin:10px 0 0;font:400 14.5px/1.55 var(--hg);color:var(--gray)}

/* ---------- Layout-Hooks (Mobile-Werte, identisch zu den früheren Inline-Styles) ---------- */
.hero__ctas{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.cards{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.cards--g11{gap:11px}
.sits{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.founders{display:flex;flex-direction:column;gap:18px}
.figures{margin-top:14px;display:flex;flex-direction:column;gap:18px}
.twolayers{display:flex;flex-direction:column;gap:14px}
.topbar__nav{display:none}
.topbar__cta{display:none}

/* ---------- A11y & Motion ---------- */
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .sticky--anim{animation:none}
  button,a,.btn{transition:none}
}

/* ============================================================
   TABLET ≥ 760px — Inhalt auf zentrierte Lese-Spalte (720px),
   breite Sektionen (Grids, Galerien) auf 1120px.
   Mobile (< 760px) bleibt unverändert.
   ============================================================ */
@media (min-width: 760px){
  .site{max-width:none;box-shadow:none}
  main section{padding-left:max(48px, calc((100% - 720px) / 2)) !important;padding-right:max(48px, calc((100% - 720px) / 2)) !important}
  main section.sec--wide{padding-left:max(48px, calc((100% - 1120px) / 2)) !important;padding-right:max(48px, calc((100% - 1120px) / 2)) !important}
  .tabs{padding-left:max(48px, calc((100% - 720px) / 2));padding-right:max(48px, calc((100% - 720px) / 2))}
  .tabs__in{max-width:420px}
  .footer{padding-left:max(48px, calc((100% - 1120px) / 2));padding-right:max(48px, calc((100% - 1120px) / 2))}
  .topbar__in{max-width:1216px;margin:0 auto;padding-left:48px;padding-right:48px}

  .hero__ctas{flex-direction:row;flex-wrap:wrap;gap:12px}

  /* Referenzen: nebeneinander statt Swipe */
  .cases{display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow:visible;scroll-snap-type:none;padding-left:0;padding-right:0}
  .case{flex:none}
  .case-dots{display:none}

  .figures{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .founders{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}

  /* Modals: zentrierter Dialog statt Bottom-Sheet */
  .overlay{align-items:center;padding:32px}
  .overlay__sheet{border-radius:18px;height:min(720px, 88vh)}
  .sheet__head{padding-top:16px}
}

/* ============================================================
   DESKTOP ≥ 1080px — Topbar-Navigation, größere Typo, Grids.
   ============================================================ */
@media (min-width: 1080px){
  /* Topbar: horizontale Navigation + CTA, Burger & Sticky-Leiste entfallen */
  .topbar__in{padding-top:16px;padding-bottom:15px}
  .topbar__nav{display:flex;align-items:center;gap:24px;margin:0 auto 0 44px;min-width:0}
  .topbar__nav a{font:500 14.5px/1 var(--hg);color:var(--gray3);text-decoration:none;padding:8px 2px;white-space:nowrap}
  .topbar__nav a:hover{color:var(--ink)}
  .topbar__nav a.is-active{color:var(--violet);font-weight:600}
  .topbar__cta{display:inline-flex;font-size:14px;padding:11px 16px;border-radius:9px}
  .burger{display:none}
  .sticky{display:none !important}

  /* Typo-Skala */
  main section h1{font-size:44px !important;line-height:1.08 !important;max-width:22ch}
  main .hero h1{font-size:52px !important;line-height:1.05 !important;max-width:20ch}
  main .hero{padding-top:88px !important;padding-bottom:84px !important}
  main .hero p{font-size:17.5px !important;max-width:52ch}
  .h2{font-size:31px}
  main section h2{max-width:28ch}
  .panel-dark h2{max-width:none}
  main .panel-dark{padding:32px 34px !important}
  .panel-dark h2{font-size:25px !important;line-height:1.16 !important}
  .punch{font-size:23px}
  .lead{font-size:17px}
  .p15{font-size:16px}
  .p15,.lead,.acc__body p,.art-section__p,.hero__sub{max-width:640px}
  .legal{max-width:680px}
  .art-section__p{font-size:17.5px}

  /* Grids */
  .cards--3{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;align-items:stretch}
  .cards--2x2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .sits{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:28px;margin-top:22px}
  .twolayers{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
  .twolayers > div:last-child{grid-column:1 / -1}
  .wiki-themes{display:grid;grid-template-columns:1fr 1fr;gap:12px 44px;align-items:start}
  .wiki-themes .wiki-theme{margin-top:26px !important}

  /* "Wer wir sind": Text links, Bild rechts */
  .about{display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:56px;align-items:center}
  .about > *{grid-column:1}
  .about > img{grid-column:2;grid-row:1 / span 5;align-self:center;margin-top:0 !important}

  /* Footer: mehrspaltig */
  .footer{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;grid-template-areas:
    "logo   nav"
    "tag    nav"
    "badge  contact"
    "legal  legal"
    "copy   copy";align-items:start;padding-top:56px;padding-bottom:40px}
  .footer__logo{grid-area:logo}
  .footer__tag{grid-area:tag}
  .footer__nav{grid-area:nav;justify-self:end;justify-content:flex-end;max-width:400px;margin-top:0}
  .footer__badge{grid-area:badge;justify-self:start;margin-top:30px}
  .footer__contact{grid-area:contact;justify-self:end;text-align:right;margin-top:30px}
  .footer__contact a{display:block}
  .footer__legal{grid-area:legal;margin-top:36px}
  .footer__copy{grid-area:copy}
}

/* ---------- Diverses ---------- */
.tag{font:600 11px var(--sm);letter-spacing:.04em;text-transform:uppercase;color:var(--gray);border:1px solid rgba(17,17,17,.14);border-radius:7px;padding:6px 10px}
.figure{margin:0}
.figure img{display:block;width:100%;height:auto;border:1px solid var(--line-10);border-radius:10px}
.figure figcaption{margin-top:8px;font:600 11px var(--sm);letter-spacing:.04em;text-transform:uppercase;color:var(--gray2)}
.deflist{font:400 14.5px/1.5 var(--hg);color:var(--gray)}
.deflist .deflist__term{font:600 14.5px var(--sg);color:var(--ink)}