:root{
  --bg:#0b1226;
  --bg-alt:#0f1733;
  --text:#e8eefc;
  --muted:#a9b6d9;
  --blue:#2a7fff;        /* accent */
  --blue-600:#1f66cc;
  --card:#111b3b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --topbar-h: 64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#0a1124 0%, #0c1530 100%);}
.container{
  width: min(1320px, 100% - 32px);  /* nutzt mehr Breite auf Laptops, mit Rand */
  margin: 0 auto;
  padding: 0;                       /* Außenabstand wird über width-Kalkulation gelöst */
}
.topbar{position:sticky;top:0;height:var(--topbar-h);backdrop-filter:saturate(140%) blur(6px);background:rgba(10,17,36,.65);border-bottom:1px solid rgba(255,255,255,.06);z-index:100}
.nav{display:flex;height:var(--topbar-h);align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  opacity:.9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;         /* pill spacing */
  border-radius:12px;           /* rounded like Home/EN */
  border:2px solid transparent; /* for active outline */
  line-height:1;
}
.burger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    background: #0b0f1a;
    padding: 1rem;
    width: 200px;
  }
  .nav-links.active {
    display: flex;
  }
  .burger {
    display: block;
  }
}
/* remove legacy left-margins from old nav rule */
.menu a{margin-left:0}
/* Navigation link interactions */
.menu a:hover{background:rgba(255,255,255,.05);opacity:1}
.menu a.is-active{border-color:var(--blue);box-shadow:var(--shadow)}

/* Nav readability on different widths */
@media (max-width: 900px){
  .menu{gap:1.2rem}
  .menu a{padding:.5rem .8rem}
}

/* menu layout centered with equal gaps */
.menu{display:flex;gap:2rem;margin:0 auto;justify-content:center}
.menu .btn{margin-left:22px}

.hero{
  position: relative;
  padding: clamp(64px, 12vh, 120px) 0 clamp(40px, 8vh, 80px);
  background:radial-gradient(1200px 500px at 10% -10%, rgba(42,127,255,.25), transparent), radial-gradient(1000px 400px at 90% 10%, rgba(61, 213, 255, .18), transparent);
}
.hero__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
h1{
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 14px;
}
.lead{
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--muted);
  margin: 0 0 24px;
}
.accent{color:var(--blue)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

.badge{
  position: relative;
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#122154,#0d1a43);
  box-shadow: var(--shadow);
}
.badge__ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(42,127,255,.6);filter:blur(.2px)}
.badge__core{font-weight:800;font-size:clamp(28px,6vw,44px);color:#fff}
.badge__text{position:absolute;bottom:14px;font-size:12px;letter-spacing:.4px;color:var(--muted);text-align:center}

.hero__wave{height:40px;background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}

.section{padding:70px 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 100%)}

h2{font-size:28px;margin:0 0 18px}
h3{margin:0 0 10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.card--shadow{box-shadow:0 12px 32px rgba(0,0,0,.45)}
.meta{color:var(--muted);font-size:12px;margin-top:10px}

.list-check, .list-dots{margin:8px 0 0 0;padding:0;list-style:none}
.list-check li{padding-left:26px;margin:8px 0;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22><path fill=%22%232a7fff%22 d=%22M7 13l-3-3 1.4-1.4L7 10.2l5.6-5.6L14 6l-7 7z%22/></svg>') no-repeat 0 4px}
.list-dots li{padding-left:16px;margin:8px 0;position:relative}
.list-dots li:before{content:'';width:6px;height:6px;border-radius:3px;background:var(--blue);position:absolute;left:0;top:10px}

.btn{display:inline-block;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.btn--ghost{border-color:rgba(255,255,255,.15);color:var(--text)}
.btn--outline{border-color:var(--blue);color:var(--text)}

.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cert{background:var(--card);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.06)}
.cert__title{font-weight:700}
.cert__meta{color:var(--muted);margin-top:4px}

.contacts{display:grid;gap:10px}
.contact{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.06);border-radius:12px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.02)}
.contact__label{color:var(--muted)}

.contactform{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.contactform .row{margin-bottom:12px}
.contactform .row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input, textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#0b1432;color:var(--text)}

.footer{padding:22px 0;border-top:1px solid rgba(255,255,255,.06);background:#0a1124cc;backdrop-filter:saturate(140%) blur(6px)}
.footer__inner{display:flex;justify-content:space-between;align-items:center}
.footer__links a{color:var(--muted);text-decoration:none;margin-left:14px}

/* Laptop/desktop container steps for bessere Flächennutzung */
@media (min-width: 1400px){
  .container{width: min(1400px, 100% - 64px)}
}
@media (min-width: 1700px){
  .container{width: min(1560px, 100% - 80px)}
}

@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .certs{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .hero__inner{grid-template-columns:1fr;gap:24px}
  .section{padding:48px 0}
  .cards{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr}
}
@media (max-width: 520px){
  h1{font-size:36px}
  .cards{grid-template-columns:1fr}
}
/* Brand-Buttons (links + Sprache rechts) flexibel nach Textbreite */
.topbar .brand,
.topbar .brand--lang {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;     /* passt sich automatisch an */
  width: auto !important;    /* keine feste Breite */
  min-width: 0 !important;   /* keine Mindestbreite */
  height: auto;              /* statt fixer Höhe */
  white-space: nowrap;       /* nicht umbrechen */
  flex: 0 0 auto;            /* nicht stretchen */
}

/* Falls die Buttons via .btn-Styles eine Breite bekommen haben: */
.topbar .brand.btn,
.topbar .brand--lang.btn {
  width: auto !important;
  min-width: 0 !important;
}

/* Navigation-Layout: Menü in der Mitte, Sprachbutton rechts */
.topbar .nav {
  display: flex;
  align-items: center;
}
.topbar .menu {
  display: flex;
  gap: 2rem;
  margin: 0 auto;            /* zentriert die Menülinks */
}
.topbar .brand--lang {
  margin-left: auto;         /* schiebt Sprachbutton ganz nach rechts */
}
/* ==========================================
   Fix: legible ghost/outline buttons on dark
   ========================================== */
.btn { color: #E6EEFC; }

/* Ensure text is visible for outline/ghost variants */
.btn--ghost, .btn--outline {
  color: #E6EEFC !important;
  border-color: rgba(134,163,255,0.35) !important; /* matches accent tone */
  background: transparent !important;
}
.btn--ghost:hover, .btn--outline:hover {
  color: #FFFFFF !important;
  border-color: rgba(134,163,255,0.6) !important;
  background: rgba(134,163,255,0.08) !important;
}

/* Disabled state remains readable but subdued */
.btn:disabled, .btn[disabled] {
  color: rgba(230,238,252,0.55) !important;
  border-color: rgba(134,163,255,0.2) !important;
  background: rgba(255,255,255,0.04) !important;
}
/* Links in CTA-Kacheln nicht blau/unterstrichen darstellen */
.card--cta,
.card--cta:link,
.card--cta:visited {
  color: inherit;            /* normale Textfarbe übernehmen */
  text-decoration: none;     /* Unterstreichung weg */
}

.card--cta h3,
.card--cta p {
  color: var(--text, #e6ebf5); /* sicherstellen, dass Textfarbe passt */
}

.card--cta:hover {
  text-decoration: none;     /* auch bei Hover keine Unterstreichung */
}

/* Make "Show more" certificate tile (anchor.cert--cta) look like a normal card */
.cert--cta,
.cert--cta:link,
.cert--cta:visited {
  color: inherit;          /* use normal card text color */
  text-decoration: none;   /* remove underline */
  display: block;          /* keep full-card click area */
}

.cert--cta .cert__title,
.cert--cta .cert__meta {
  color: inherit;          /* ensure inner texts don't turn purple/blue */
}

.cert--cta:hover {
  text-decoration: none;   /* no underline on hover */
}
/* --- Certificate badge images --- */
.certs .cert{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
}
.certs .cert__body{ flex:1 1 auto; min-width:0; }
.certs .cert__badge{
  flex:0 0 auto;
  width:88px;
  height:88px;
  border-radius:12px;
  background:#0f1a2b;
  padding:6px;
  object-fit:contain;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  opacity:0.95;
}
@media (max-width: 680px){
  .certs .cert{ flex-direction:row; align-items:flex-start; }
  .certs .cert__badge{ width:64px; height:64px; }
}
@media (max-width: 520px){
  .certs .cert{ flex-direction:column; align-items:flex-start; }
  .certs .cert__badge{ margin-top:12px; }
}
/* ===== Mobile & Tablet Tweaks (add at the very end) ===== */

/* Grundlegende Abstände/Typo skalieren */
.section { padding: clamp(2rem, 6vw, 4rem) 0; }
h1 { font-size: clamp(1.8rem, 5.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3.8vw, 2rem); }
p, .meta { font-size: clamp(0.95rem, 2.7vw, 1.05rem); line-height: 1.55; }

/* Container enger auf kleineren Screens */
.container { padding-left: 1rem; padding-right: 1rem; }

/* Topbar / Navigation */
.topbar .nav { display: flex; align-items: center; gap: .75rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; }
.menu a { padding: .5rem .8rem; }
.brand, .brand--lang { white-space: nowrap; flex: 0 0 auto; }

/* Buttons auf iOS nicht blau hinterlegen + bessere Tappable Areas */
a, button { -webkit-tap-highlight-color: transparent; }
a:focus, a:active { background: transparent; outline: none; }

/* Hero-Bereich (Name + Avatar) */
.hero { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: center; }
.hero__text h1 { margin-bottom: .5rem; }
.hero__text .sub { font-size: clamp(1rem, 2.8vw, 1.15rem); opacity: .95; }
.hero__avatar { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; }
.hero__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero mobil einspaltig */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero__avatar { width: 160px; height: 160px; margin: 0 auto; }
}

/* Karten/Grids allgemein */
.cards, .certs, .highlights, .skills-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
@media (max-width: 1024px) {
  .cards, .certs, .highlights, .skills-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cards, .certs, .highlights, .skills-grid { grid-template-columns: 1fr; }
}

/* Karten-Buttons responsiv anordnen */
.card .actions,
.cert .actions,
.highlight .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.card .actions .btn,
.cert .actions .btn,
.highlight .actions .btn {
  flex: 1 1 auto;
  text-align: center;
  min-width: 42%;
}
@media (min-width: 480px) {
  .card .actions .btn,
  .cert .actions .btn,
  .highlight .actions .btn { flex: 0 0 auto; min-width: auto; }
}

/* Wiki Login-Form */
.contactform { padding: 1rem; }
.contactform .row input { width: 100%; }

/* Footer stapeln */
.footer__inner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .footer__inner { flex-direction: column; }
}

/* Medien nie überlaufen lassen */
img, video { max-width: 100%; height: auto; }
/* Accessiblity helper (screen reader only) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Burger-Button: standardmäßig verstecken (Desktop) */
.nav-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: var(--brand-600, #2e6df6);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 12px;
  align-items: center; justify-content: center;
  padding: 0;
  box-shadow: var(--shadow-sm, 0 6px 20px rgba(0,0,0,.25));
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  position: relative;
}
.nav-toggle__bar::before { position: absolute; top: -7px; }
.nav-toggle__bar::after  { position: absolute; top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: rotate(-90deg) translateX(-7px); }

/* Overlay für das mobile Menü */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 80;
}

/* ===== Mobile Layout ===== */
@media (max-width: 900px) {
  .topbar .nav {
    gap: 12px;
  }
  /* Burger sichtbar machen; Menü wird zum Drawer */
  .nav-toggle {
    display: inline-flex;
    margin-left: auto; /* schiebt Button nach rechts neben Brand */
  }

  /* Drawer-Grundlayout */
  .menu[data-collapsible] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: var(--surface-2, #0f1b2f);
    box-shadow: -30px 0 60px rgba(0,0,0,.35);
    padding: 88px 20px 24px;  /* Platz für Topbar */
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 90;
  }
  .menu[data-collapsible][data-open="true"] {
    transform: translateX(0);
  }

  /* Links im Drawer größer/luftiger */
  .menu[data-collapsible] a {
    font-size: 1.05rem;
    padding: 12px 14px;
    border-radius: 12px;
    background: transparent;
  }
  .menu[data-collapsible] a:hover {
    background: rgba(255,255,255,.06);
  }

  /* Der Wiki-Button soll im Drawer wie ein normaler Eintrag wirken */
  .menu[data-collapsible] #nav-wiki.btn {
    border: 1px solid rgba(255,255,255,.15);
    text-align: center;
  }

  /* Sprachauswahl im Drawer ans Ende drücken (optional) */
  .menu[data-collapsible] .brand--lang {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
  }

  /* Die Desktop-Ausrichtung anpassen: 
     das bisherige .menu flex-row verstecken wir nicht, 
     wir konvertieren es zum Drawer (oben geregelt) */
}

/* ===== Desktop bleibt wie gehabt ===== */
/* Falls nötig: sicherstellen, dass .menu rechts steht */
@media (min-width: 901px) {
  .menu {
    margin-left: auto;
    display: flex;
    gap: 20px;
    align-items: center;
  }
}
/* === Mobile Navigation Fix (Ergänzung) === */
@media (max-width: 900px) {
  /* Menü als Drawer */
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: var(--bg-alt);
    flex-direction: column;
    gap: 1rem;
    padding: 80px 20px 20px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 999;
  }

  .menu[data-open="true"] {
    transform: translateX(0);
  }

  /* Links größer und klickfreundlich */
  .menu a {
    font-size: 1.1rem;
    padding: 12px;
    width: 100%;
  }

  /* Burger-Button sichtbar */
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  /* Overlay-Hintergrund */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 998;
    display: none;
  }
  .nav-overlay[data-open="true"] {
    display: block;
  }
}

/* === Desktop-Ansicht unverändert, nur sicherstellen dass Menü mittig bleibt === */
@media (min-width: 901px) {
  .menu {
    position: static;
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}
/* --- Header Layout Fixes --- */
.topbar .nav {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.topbar .menu {
  margin: 0 auto;                 /* Menü mittig */
  display: flex;
  gap: 2rem;
  align-items: center;
}
.topbar .brand,
.topbar .brand--lang {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  height: auto;
  white-space: nowrap;
}
.topbar .brand--lang { margin-left: .5rem; }

/* Burger standardmäßig ausblenden (Desktop) */
.nav-toggle { display: none; appearance: none; border: 0; background: var(--blue); color: #fff;
  width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center;
  padding: 0; box-shadow: var(--shadow);
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease; position: relative;
}
.nav-toggle__bar::before { position: absolute; top: -7px; }
.nav-toggle__bar::after  { position: absolute; top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: rotate(-90deg) translateX(-7px); }

.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 80; }

/* --- Mobile Drawer --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }   /* Burger sichtbar */

  .menu[data-collapsible] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: var(--bg-alt);
    box-shadow: -30px 0 60px rgba(0,0,0,.35);
    padding: 88px 20px 24px;
    display: flex; flex-direction: column; gap: 14px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 90;
  }
  .menu[data-collapsible][data-open="true"] { transform: translateX(0); }

  .menu[data-collapsible] a { font-size: 1.05rem; padding: 12px 14px; border-radius: 12px; }
  .menu[data-collapsible] a:hover { background: rgba(255,255,255,.06); }

  /* Sprachbutton ans Ende des Drawers drücken */
  .menu__footer { margin-top: auto; }
  .menu[data-collapsible] .brand--lang {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; background: rgba(255,255,255,.08); border-radius: 12px;
  }
}

/* --- Hero zentrieren + Reihenfolge mobil: Bild über Text --- */
.hero .container { margin: 0 auto; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero__text { order: 1; }
.hero__media { order: 2; text-align: right; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__media { order: 1; justify-self: center; margin-bottom: 18px; }
  .hero__text  { order: 2; text-align: center; }
}

/* Accessibility helper (falls noch nicht vorhanden) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Hero-Layout: Desktop Bild links, Text rechts */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.hero__badge { order: 1; }
.hero__copy  { order: 2; }

/* Mobile: Bild über Text */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__badge { order: 1; justify-self: center; margin-bottom: 20px; }
  .hero__copy  { order: 2; }
}
/* ===========================
   1) HERO – Desktop sauber zentrieren
   =========================== */
@media (min-width: 1024px) {
  /* etwas Innenabstand links/rechts, damit das Bild nicht „an der Kante klebt“ */
  .hero .container {
    padding-left: clamp(32px, 6vw, 80px);
    padding-right: clamp(32px, 6vw, 80px);
  }

  /* feste Spaltenbreite fürs Foto + flexible Copy-Spalte */
  .hero__inner {
    grid-template-columns: 420px 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
  }

  /* Bild in seiner Spalte zentrieren */
  .hero__badge {
    display: flex;
    justify-content: center;
  }
}

/* ===========================
   2) BURGER-DRAWER fixen
   =========================== */
@media (max-width: 900px) {
  /* rechts einschiebender Drawer */
  .menu[data-collapsible]{
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: var(--surface-2, #0f1b2f);
    box-shadow: -30px 0 60px rgba(0,0,0,.35);

    /* Platz über dem Inhalt, damit nichts unter der Topbar/Notch liegt */
    padding: calc(env(safe-area-inset-top) + 72px) 20px 24px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    transform: translateX(100%);
    transition: transform .25s ease;

    /* WICHTIG: scrollbar machen, sonst sieht man nur „Über mich“ */
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    z-index: 1000; /* über der Topbar (die hat z-index:100) */
  }

  .menu[data-collapsible][data-open="true"] {
    transform: translateX(0);
  }

  /* Links im Drawer gut tappbar */
  .menu[data-collapsible] a{
    font-size: 1.05rem;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .menu[data-collapsible] a:hover{
    background: rgba(255,255,255,.06);
  }

  /* Sprachbutton ans Ende des Drawers */
  .menu[data-collapsible] .brand--lang{
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
  }
}

/* Overlay fürs mobile Menü – unter dem Drawer, über dem Rest */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 900;
}
/* --- Force vertical list inside the mobile drawer --- */
@media (max-width: 900px) {
  /* Only when it's the drawer (has data-collapsible) */
  .menu[data-collapsible]{
    /* override the desktop row layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  /* Make each link occupy a row */
  .menu[data-collapsible] a{
    display: block !important;
    width: 100% !important;
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* If your Wiki is a .btn, keep it full-width like the others */
  .menu[data-collapsible] #nav-wiki.btn{
    width: 100% !important;
    text-align: center;
  }
}
/* --- Mobile burger menu layout override --- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* Only when the menu is opened (toggled via data-open) */
  .menu[data-collapsible][data-open="true"] {
    position: fixed;
    top: 64px;               /* = your nav height */
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: calc(100vh - 64px);
    overflow-y: auto;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;

    background: #0b132b;     /* same family as your topbar */
    padding: 12px 16px;
    z-index: 2000;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }

  /* Make each link expand full-width and stack */
  .menu[data-collapsible][data-open="true"] a {
    display: block !important;
    width: 100% !important;
    text-align: left;
    padding: 12px 14px !important;
    border-radius: 10px;
  }

  /* Buttons (Wiki etc.) in the drawer */
  .menu[data-collapsible][data-open="true"] .btn {
    width: 100% !important;
    text-align: center !important;
  }
}
/* ==== Mobile Drawer fix ==== */
:root { --topbar-h: 64px; }               /* ggf. anpassen falls deine Topbar höher ist */

@media (max-width: 900px) {
  /* Burger sichtbar */
  .nav-toggle { display:inline-flex; margin-left:auto; }

  /* Desktop-Layout der .menu überschreiben */
  .menu { margin:0 !important; justify-content:flex-start !important; }

  /* Drawer-Layout */
  .menu[data-collapsible]{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(84vw, 360px);
    background:#0f1b2f;
    box-shadow:-30px 0 60px rgba(0,0,0,.35);
    padding:calc(var(--topbar-h) + 16px) 16px 24px;
    display:flex !important;
    flex-direction:column !important;     /* << vertikal! */
    align-items:stretch !important;
    gap:10px !important;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:90;
    overflow-y:auto;                      /* Scroll im Drawer */
    -webkit-overflow-scrolling:touch;
  }
  .menu[data-collapsible][data-open="true"]{ transform:translateX(0); }

  /* Links im Drawer über die gesamte Breite */
  .menu[data-collapsible] a{
    display:block;
    width:100%;
    white-space:normal;                   /* nie nebeneinander „kleben“ */
    padding:12px 14px;
    border-radius:12px;
  }
  .menu[data-collapsible] a:hover{ background:rgba(255,255,255,.06); }

  /* Wiki-Button wie normaler Eintrag */
  .menu[data-collapsible] #nav-wiki.btn{
    border:1px solid rgba(255,255,255,.15);
    text-align:center;
  }
}

/* Overlay fürs Schließen bei Tap außerhalb */
.nav-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  z-index:80;
}
@media (max-width: 900px){
  /* Burger sichtbar */
  .nav-toggle{ display:inline-flex; margin-left:auto; }

  /* Der Drawer: beginnt genau unter der Topbar und nimmt den Rest der Höhe ein */
  .menu[data-collapsible]{
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    left: auto;                 /* wichtig: NICHT links “kleben” */
    bottom: 0;

    width: min(88vw, 380px);
    height: calc(100dvh - var(--topbar-h));   /* iOS-sicher */
    min-height: calc(100vh - var(--topbar-h));

    background: #0f1b2f;
    box-shadow: -30px 0 60px rgba(0,0,0,.35);
    padding: 16px 20px 24px;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 90;
  }

  .menu[data-collapsible][data-open="true"]{
    transform: translateX(0);
  }

  /* Links im Drawer immer untereinander und voll breit */
  .menu[data-collapsible] a{
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .menu[data-collapsible] a:hover{
    background: rgba(255,255,255,.06);
  }

  /* Sprachbutton unten im Drawer hübsch als Button */
  .menu[data-collapsible] .brand--lang{
    margin-top: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
  }

  /* Overlay bedeckt den Bereich unterhalb der Topbar */
  .nav-overlay{
    position: fixed;
    left: 0; right: 0; top: var(--topbar-h); bottom: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 80;
  }
}
/* === Mobile drawer tweaks (right aligned + better layout) === */
@media (max-width: 900px) {
  /* Drawer comes from the right and fills height */
  .menu[data-collapsible]{
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%);
    text-align: right;
    align-items: flex-end;                 /* put items to the right */
    padding: calc(64px + env(safe-area-inset-top, 0)) 20px 24px;
    max-height: 100vh;
    overflow-y: auto;                      /* allow scrolling if needed */
  }
  .menu[data-collapsible][data-open="true"]{
    transform: translateX(0);
  }

  /* Links behave like a vertical list, right aligned */
  .menu[data-collapsible] a{
    display: block;
    width: 100%;
    justify-content: flex-end;
    padding: 14px 6px;
    font-size: 1.05rem;
  }

  /* Language button: keep it higher (not at the very bottom) */
  .menu[data-collapsible] .brand--lang{
    align-self: flex-end;
    margin-top: 16px;                      /* small separation from links */
    position: sticky;                      /* stays visible while scrolling */
    top: 12px;                             /* sits near top of the drawer */
  }
}
@media (max-width: 900px) {
  /* Wiki und Sprachbutton im mobilen Menü kompakter machen */
  .menu[data-collapsible] .brand--lang,
  .menu[data-collapsible] .wiki-link {
    width: auto;               /* nur so breit wie nötig */
    min-width: unset;           /* Mindestbreite entfernen */
    display: inline-flex;       /* passt Inhalt an */
    justify-content: center;
    align-items: center;
    padding: 10px 14px;         /* etwas Innenabstand */
    text-align: center;
    border-radius: 8px;         /* runde Ecken */
  }

  /* Rechtsbündig */
  .menu[data-collapsible] .brand--lang,
  .menu[data-collapsible] .wiki-link {
    margin-left: auto;
    margin-right: 0;
  }
}
@media (max-width: 900px) {
  /* Drawer-Container: rechtsbündig, NICHT strecken */
  .menu[data-collapsible]{
    align-items: flex-end;          /* rechts ausrichten */
  }

  /* Alle Links im Drawer kompakt halten */
  .menu[data-collapsible] a,
  .menu[data-collapsible] .brand--lang{
    align-self: flex-end;           /* nicht gestreckt werden */
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content;         /* nur so breit wie Inhalt */
    min-width: 0 !important;
    padding: 10px 14px;
  }

  /* Speziell: Wiki-Button im Drawer nicht auf 100% */
  .menu[data-collapsible] #nav-wiki{
    width: auto !important;
    max-width: max-content !important;
  }
}
/* Mobile Menü Container */
.nav__menu {
  right: 0;
  left: auto;
  width: 35%; /* vorher vermutlich 80–100% */
  max-width: 260px; /* sorgt dafür, dass es auf großen Geräten nicht zu breit wird */
}

/* Optional: damit der Inhalt auch mittiger wirkt */
.nav__menu ul {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* ==== Mobile Drawer: schmal, rechtsbündig, kompakte Buttons ==== */
@media (max-width: 900px){
  /* Drawer selbst: schmal und unter der Topbar starten */
  header.topbar .menu[data-collapsible]{
    position: fixed !important;
    top: 64px !important;            /* Topbar-Höhe */
    right: 0 !important;
    bottom: 0 !important;
    width: 72vw !important;          /* schmaler */
    max-width: 320px !important;     /* Deckel */
    background: #0f1b2f !important;
    padding: 20px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* rechtsbündig */
    gap: 18px !important;
    box-shadow: -24px 0 40px rgba(0,0,0,.35) !important;
    transform: translateX(100%) !important;
    z-index: 1001 !important;
  }
  header.topbar .menu[data-collapsible][data-open="true"]{
    transform: translateX(0) !important;
  }

  /* Overlay unter dem Drawer (falls du es nutzt) */
  .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 1000 !important;
  }

  /* Links im Drawer: NICHT volle Breite, schön kompakt rechts */
  header.topbar .menu[data-collapsible] a{
    display: inline-block !important;
    width: auto !important;
    max-width: 220px !important;
    text-align: right !important;
    padding: 10px 12px !important;
  }

  /* Sprachbutton im Drawer kompakt & nicht ganz unten kleben */
  header.topbar .menu[data-collapsible] .brand--lang{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 220px !important;
    padding: 10px 14px !important;
    margin-top: 12px !important;   /* etwas Luft unter Wiki */
    background: rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
  }

  /* Burger über dem Drawer halten */
  .nav-toggle{ z-index: 1002 !important; }
}