/* ==========================================================================
   A11y Utilities: visuell ausblenden, Screenreader behalten
   ========================================================================== */
.sr-only,
.screen-reader-text{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;
}
.screen-reader-text:focus{
  position:static!important;width:auto!important;height:auto!important;margin:0!important;
  clip:auto!important;clip-path:none!important;white-space:normal!important;
  padding:.5rem .75rem!important;background:#fff;color:#000;z-index:10000;box-shadow:0 0 0 2px #000;
}

/* ==========================================================================
   Top-Bar (Light)
   ========================================================================== */
.topbar{background:#f1f5f9;color:#0f172a;font-size:.85rem;border-bottom:1px solid #e5e7eb;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 20px;}
.topbar-accessibility,.topbar-language{display:flex;align-items:center;gap:8px;}
/* Drawer: Icons sicher anzeigen (egal ob fill- oder stroke-basiert) */
.mobile-drawer .icon-wrap svg { width: 24px; height: 24px; display: inline-block; }
.mobile-drawer .icon-wrap svg [stroke] { stroke: currentColor !important; stroke-width: 1.5 !important; }
.topbar .icon-wrap { line-height: 0; display: inline-flex; }
.topbar .icon-wrap svg { width: 24px; height: 24px; display: block; }
.topbar .icon-wrap svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.topbar .icon-wrap svg [stroke] { stroke: currentColor !important; stroke-width: 1.5 !important; }


/* ==========================================================================
   User-Bar (Light)
   ========================================================================== */
.userbar{background:#fff;color:#0f172a;font-size:.85rem;border-bottom:1px solid #e5e7eb;}
.userbar-inner{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:6px 20px;}
.userbar a{color:inherit;text-decoration:none;padding:4px 6px;border-radius:4px;transition:background .2s;}
.userbar a:hover{background:rgba(0,0,0,.06);}

/* ==========================================================================
   Main Header (Light)
   ========================================================================== */
.main-header{background:#fff;color:#0f172a;border-bottom:2px solid var(--ds-primary);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.header-inner{display:flex;align-items:center;gap:24px;padding:16px 20px;} /* gap erhöht */
/* Flex-Spacer schiebt den rechten Block (Toggle, Nav, Burger) nach rechts */
.flex-spacer { flex: 1 1 auto; }

/* Reihenfolge (Desktop) – Toggle direkt links von der Nav */
.site-logo       { order: 1; }
.flex-spacer     { order: 2; }            /* NEU */
.theme-toggle    { order: 3; margin-left: 0px; margin-right: 16px; }
.site-nav        { order: 4; margin-left: 0; }  /* kein auto mehr nötig, das macht der Spacer */
.mobile-menu-btn { order: 5; display: none; }

/* Logo & SVGs */
.site-logo{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:inherit;}
.site-logo .logo-svg{width:180px;height:auto;display:block;}
.site-logo svg [fill]:not([fill="none"]),
.mobile-menu-btn svg [fill]:not([fill="none"]),
.mobile-menu-close svg [fill]:not([fill="none"]){fill:currentColor!important;}
.site-logo svg [stroke],.mobile-menu-btn svg [stroke],.mobile-menu-close svg [stroke]{stroke:currentColor!important;}

/* Navigation (Light) */
.site-nav .menu{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:0;padding:0;}
.site-nav .menu a{color:#0f172a;text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .2s;}
.site-nav .menu a:hover,.site-nav .menu .current-menu-item>a{background:rgba(15,23,42,.06);}

/* Top-Bar Buttons – Light */
.topbar-accessibility button,.topbar-accessibility a,.topbar-language button,.topbar-language a{
  display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:.85rem;background:transparent;
  border:1px solid rgba(0,0,0,.15);border-radius:6px;color:inherit;text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.topbar-accessibility button:hover,.topbar-accessibility a:hover,.topbar-language button:hover,.topbar-language a:hover{
  background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.25);
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */
.theme-toggle{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #cbd5e1;background:#fff;color:#0f172a;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.theme-toggle:hover{transform:scale(1.05);box-shadow:0 0 6px rgba(0,0,0,.15);}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;opacity:0;transition:opacity .25s ease;}
.theme-toggle svg{width:20px;height:20px;display:block;}
.theme-toggle svg [stroke]{stroke:currentColor!important;}
.theme-toggle svg [fill]:not([fill="none"]){fill:currentColor!important;}

/* Light: Mond sichtbar (Wechsel zu Dark) */
body.is-light .theme-toggle{background:#fff;color:#0f172a;}
body.is-light .theme-toggle .icon-moon{opacity:1;}
body.is-light .theme-toggle .icon-sun{opacity:0;}

/* Dark: Sonne sichtbar (hell) */
body:not(.is-light) .theme-toggle{background:#0f172a;color:#f8fafc;}
body:not(.is-light) .theme-toggle .icon-sun{opacity:1;}
body:not(.is-light) .theme-toggle .icon-moon{opacity:0;}

/* ==========================================================================
   Mobile Menü Button (Hamburger)
   ========================================================================== */
.mobile-menu-btn{
  display:none;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:8px;
  background:#fff;color:#0f172a;padding:6px;
}
.mobile-menu-btn .icon{width:22px;height:22px;}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
body:not(.is-light) .topbar{background:#0f172a;color:#f1f5f9;border-bottom:1px solid rgba(255,255,255,.06);}
body:not(.is-light) .userbar{background:#1e293b;color:#f8fafc;border-bottom:1px solid rgba(255,255,255,.06);}
body:not(.is-light) .userbar a:hover{background:rgba(255,255,255,.08);}
body:not(.is-light) .main-header{background:#111827;color:#e5e7eb;border-bottom:2px solid var(--ds-primary);box-shadow:0 2px 4px rgba(0,0,0,.25);}
body:not(.is-light) .site-nav .menu a{color:#e5e7eb;}
body:not(.is-light) .site-nav .menu a:hover,
body:not(.is-light) .site-nav .menu .current-menu-item>a{background:rgba(255,255,255,.06);}
body:not(.is-light) .topbar-accessibility button,
body:not(.is-light) .topbar-accessibility a,
body:not(.is-light) .topbar-language button,
body:not(.is-light) .topbar-language a{border-color:rgba(255,255,255,.15);}
body:not(.is-light) .topbar-accessibility button:hover,
body:not(.is-light) .topbar-accessibility a:hover,
body:not(.is-light) .topbar-language button:hover,
body:not(.is-light) .topbar-language a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);}
body.is-light .main-header .site-logo{color:#0f172a;}
body:not(.is-light) .main-header .site-logo{color:#f8fafc;}

/* ==========================================================================
   Mobile / Tablet (≤ 1024px)
   ========================================================================== */
@media (max-width:1024px){
  /* Topbar & Userbar sollen auf der Seite ausgeblendet werden (im Drawer sind sie ja drin) */
  .topbar, .userbar { display: none !important; }

  /* Hauptmenü im Header ausblenden – Drawer übernimmt */
  .main-header .site-nav { display: none !important; }

  /* Reihenfolge: Logo (1) – Spacer (2) – Toggle (3) – Burger (4 ganz rechts) */
  .mobile-menu-btn{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    border:1px solid #cbd5e1; 
    border-radius:8px; 
    background:#fff; 
    color:#0f172a; 
    padding:6px; 
  }
  .mobile-menu-btn .icon{ width:22px; height:22px; }
}

/* ==========================================================================
   Mobile Drawer
   ========================================================================== */
.mobile-drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(85vw,360px);background:#fff;color:#0f172a;
  box-shadow:-2px 0 12px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .28s ease;z-index:1001;overflow-y:auto;
}
body:not(.is-light) .mobile-drawer{background:#0f172a;color:#f8fafc;}
.mobile-drawer.is-open{transform:translateX(0);}
.mobile-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);color:inherit;}
body:not(.is-light) .mobile-drawer__header{border-color:rgba(255,255,255,.12);}
.mobile-header-actions{display:flex;align-items:center;gap:6px;}
.mobile-menu-close{border:1px solid #ccc;background:transparent;border-radius:8px;padding:4px 10px;cursor:pointer;color:inherit;}
.mobile-menu-close .icon{width:20px;height:20px;}
.mobile-drawer__section{padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(0,0,0,.06);}
body:not(.is-light) .mobile-drawer__section{border-color:rgba(255,255,255,.08);}
.mobile-nav .mobile-menu{list-style:none;margin:0;padding:8px 8px 24px 8px;display:flex;flex-direction:column;gap:6px;}
.mobile-nav .mobile-menu a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:inherit;}
.mobile-nav .mobile-menu a:hover{background:rgba(0,0,0,.06);}
body:not(.is-light) .mobile-nav .mobile-menu a:hover{background:rgba(255,255,255,.08);}

/* Overlay */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;opacity:0;transition:opacity .28s ease;}
.mobile-overlay.is-open{opacity:1;}

/* ==========================================================================
   Posts Grid
   ========================================================================== */
.post-list{display:grid;gap:20px;}
@media (min-width:768px){.post-list{grid-template-columns:repeat(3,1fr);}}
.post-card .title{font-size:1.1rem;margin:.4rem 0;}
.post-card .meta{color:var(--ds-muted);font-size:.9rem;}
/* =========================
   Footer – Layout & Styling
   ========================= */
/* ===== Footer ===== */
.site-footer{
  background:#0f172a;
  color:#f8fafc;
  font-size:.95rem;
}
.footer-top{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;
  padding:40px 20px 20px;
}
.footer-logo .logo-svg{ width:160px; height:auto; display:block; margin-bottom:10px; }
/* Footer-SVGs erben Textfarbe */
.footer-logo svg [fill]:not([fill="none"]), .footer-logo svg [stroke]{ fill:currentColor !important; stroke:currentColor !important; }

.footer-tagline{ margin:.25rem 0; color:#cbd5e1; font-size:.9rem; }
.footer-menu{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.footer-menu a{ color:inherit; text-decoration:none; }
.footer-menu a:hover{ text-decoration:underline; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding:12px 20px 18px;
  text-align:center;         /* Copyright zentriert – auf allen Breakpoints */
  color:#cbd5e1;
}
.footer-copy{ margin:0; line-height:1.4; }

/* Tablet/Mobile: Stack */
@media (max-width:1024px){
  .footer-top{
    grid-template-columns: 1fr;
    text-align:center;       /* Logo & Texte mittig */
  }
  .footer-logo .logo-svg{ margin:0 auto 10px; }
}
.site-footer .footer-logo { color: #f8fafc !important; }

/* ==========================================================================
   BASE / BODY / TYPOGRAPHY (Light-first)
   ========================================================================== */

/* Layout-Container (wird bereits im Header/Footer genutzt) */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Grundtypografie */
html{ box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*,*::before,*::after{ box-sizing: inherit; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;            /* Slate-900 */
  background: #f8fafc;       /* Slate-50 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Dark Mode: Farben umkehren (steuert ihr bereits via body.is-light) */
body:not(.is-light){
  color: #e5e7eb;            /* Slate-200 */
  background: #0b1220;       /* sehr dunkles Blau/Slate */
}

#main-content {
  padding-top: clamp(20px, 5vw, 40px);
}
/* Abstand VOR dem Footer (= unterhalb des Inhalts) */
.site-footer {
  margin-top: clamp(20px, 5vw, 40px);
}

/* Grundabstände für Fließtext */
main, article, section, aside{
  margin-block: 0;
}
p{ margin: 0 0 1rem; }
h1,h2,h3,h4,h5,h6{
  margin: 1.5rem 0 .5rem;
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
}
h1{ font-size: 2rem; }
h2{ font-size: 1.6rem; }
h3{ font-size: 1.3rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; }
h6{ font-size: .95rem; }

/* Links */
a{
  color: #0f62fe;            /* IBM Blue-ish – gut auf hell */
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{ text-decoration-thickness: 2px; }
body:not(.is-light) a{ color: #60a5fa; }   /* Light Blue im Dark Mode */

/* Listen */
ul,ol{ margin: 0 0 1rem 1.25rem; }
li{ margin: .25rem 0; }

/* Zitate */
blockquote{
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid #94a3b8;   /* Slate-400 */
  background: #f1f5f9;              /* Slate-100 */
  color: #0f172a;
}
body:not(.is-light) blockquote{
  border-left-color: #64748b;       /* Slate-500 */
  background: #0f172a;              /* Topbar-Dunkel */
  color: #e5e7eb;
}

/* Bilder & Medien */
img, svg, canvas, video{
  max-width: 100%;
  height: auto;
}

/* Tabellen – sanftes Styling */
table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-variant-numeric: tabular-nums;
}
th, td{
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(15,23,42,.12);
  text-align: left;
}
thead th{ border-bottom-width: 2px; }
body:not(.is-light) th, body:not(.is-light) td{
  border-bottom-color: rgba(255,255,255,.12);
}

/* Code */
code, kbd, samp, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
}
pre{
  overflow: auto;
  padding: .75rem 1rem;
  border-radius: 8px;
  background: #0f172a10;
}
body:not(.is-light) pre{ background: #ffffff14; }

/* Formulare – Basis */
input, select, textarea, button{
  font: inherit;
  color: inherit;
}

/* Globale Fokus-Styles (A11y) – arbeiten zusammen mit deinen sr-only Utilities */
:focus-visible{
  outline: 2px solid #3b82f6;       /* Blue-500 */
  outline-offset: 2px;
}
body:not(.is-light) :focus-visible{
  outline-color: #93c5fd;           /* Blue-300 auf dunkel */
}

/* Reduzierte Animationen respektieren */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Content-Breite für klassische Inhalte (optional) */
.prose{
  max-width: 72ch;
}

/* --- FULL-BLEED Footer-Hintergrund (funktioniert auch in boxed Layouts) --- */
.site-footer{
  /* dein bestehender Stil bleibt, wichtig ist das Full-Bleed unten */
  background:#0f172a;
  color:#f8fafc;
}

/* Hintergrund auf volle Viewport-Breite ziehen,
   selbst wenn ein übergeordnetes Layout den Footer boxed macht */
.site-footer{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;          /* volle Breite des Viewports */
  max-width: 100vw !important;
}

/* Inhalt boxed/zentriert halten */
.site-footer .container{
  max-width: 1200px;     /* oder dein globaler Content-Wert */
  margin: 0 auto;
  padding-left: 20px;    /* gleiche Innenabstände wie vorher */
  padding-right: 20px;
  background: transparent !important;
}

/* optional – falls irgendwo horizontales Scrollen auftaucht,
   nur den Footer gegen Überlauf sichern (nicht global): */
.site-footer{ overflow-x: clip; }

/* Cookie-Icon/Manager aus dem Dokumentenfluss nehmen */
.silktide-consent-manager .manage-consent,
.cookie-icon {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: 0 !important;
}

/* sorgt dafür, dass bei light-mode vor Body-Laden nicht kurz Dark-Farben aufblitzen */
html.is-light-root { background: #fff; color: #111; }

/* ==========================================================================
   Datenschutzerklärung – Akkordeon
   ========================================================================== */
.dp-accordion__panel { display: block; } /* offen per Default */
.dp-accordion__panel[hidden] { display: none !important; } /* zu, wenn JS hidden setzt */

/* (optional) kleine UX-Details */
.dp-accordion__trigger {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; text-align:left; gap:.75rem;
  padding:.75rem 1rem; border-radius:12px; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#0f172a; cursor:pointer;
}
body:not(.is-light) .dp-accordion__trigger {
  background:#0f172a; color:#e5e7eb; border-color:rgba(255,255,255,.12);
}
.dp-accordion__item + .dp-accordion__item { margin-top:.5rem; }
.dp-accordion__panel { padding: .5rem 1rem 1rem; }