/* ===================================================================
   SCHRIFTARTEN DEFINIEREN (WEB H-B)
   Pfad: /wp-content/themes/ds_network/assets/fonts/
   =================================================================== */

/* --- Open Sans (für Fließtext) --- */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2');
  font-weight: 600; /* SemiBold */
  font-style: normal;
  font-display: swap;
}

/* --- Montserrat (für Überschriften) --- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}


/* ================================================================
 * DOMINIC SCHMIEL - CORPORATE DESIGN V1 (TOKENS + THEMES)
 * ================================================================ */

/* --- 1. GLOBALE FARBVARIABLEN & DARKMODE --- */
:root {
  --ds-surface: #ffffff;
  --ds-text: #0f172a;
  --ds-muted: #64748b;
  --ds-border-color: #e2e8f0;
  --ds-subtle-bg: #f8fafc;
  --ds-shadow-soft: rgba(0,0,0,0.05);
  --ds-shadow-medium: rgba(0,0,0,0.12);
  --ds-sticky-offset: 140px; /* Abstand zum Sticky-Header */
  --ds-primary: #60a5fa;  /* kräftiges, gut sichtbares Blau (Light) */
  --ds-accent:  #f97316;  /* Orange – gut von Blau trennbar */
  --ds-ok:     #16a34a;   /* Grün – wird im Colorblind-Modus umgemappt */
  --ds-warn:   #b45309;   /* warmes Braun-/Orange */
  --ds-error:  #b91c1c;   /* sattes Rot */
  --ds-info:   #0369a1;   /* Petrol-Blau */
}

html {
  scroll-behavior: smooth;
}

/* für Sprungmarken */
:target {
  scroll-margin-top: var(--ds-sticky-offset);
}

html[data-theme="dark"] {
  --ds-surface: #1f2937;
  --ds-text: #e5e7eb;
  --ds-muted: #94a3b8;
  --ds-border-color: #374151;
  --ds-subtle-bg: #111827;
  --ds-shadow-soft: rgba(0,0,0,0.3);
  --ds-shadow-medium: rgba(0,0,0,0.5);
  --ds-primary: #21ae58;  /* helles Grün (Darkmode-Primary) */
  --ds-accent:  #fdba74;  /* helles Orange */
  --ds-ok:     #4ade80;   /* hellgrün */
  --ds-warn:   #fbbf24;   /* Gelb/Orange */
  --ds-error:  #f97373;   /* helleres Rot */
  --ds-info:   #38bdf8;   /* helleres Türkis/Blau */
  --ds-error:  #b3002d;   /* helleres Rot */
}

/* --- 3. THEMEN-DEFINITIONEN (Farbpaletten) --- */
.ds-cdv1-theme-alltag    { --primary-color: #60a5fa; --accent-color: #f97316; --primary-text-color: #ffffff; }
.ds-cdv1-theme-finanzen  { --primary-color: #003366; --accent-color: #2ECC71; --primary-text-color: #ffffff; }
.ds-cdv1-theme-natur     { --primary-color: #588157; --accent-color: #A98467; --primary-text-color: #ffffff; }
.ds-cdv1-theme-essen     { --primary-color: #E74C3C; --accent-color: #F39C12; --primary-text-color: #ffffff; }
.ds-cdv1-theme-reisen    { --primary-color: #3498DB; --accent-color: #E67E22; --primary-text-color: #ffffff; }
.ds-cdv1-theme-technik   { --primary-color: #34495E; --accent-color: #3498DB; --primary-text-color: #ffffff; }
.ds-cdv1-theme-familie   { --primary-color: #997b9c; --accent-color: #70617e; --primary-text-color: #ffffff; }
.ds-cdv1-theme-haustiere { --primary-color: #8B4513; --accent-color: #20B2AA; --primary-text-color: #ffffff; }

html[data-theme="dark"] .ds-cdv1-theme-alltag    { --primary-color: #21ae58; --accent-color: #fdba74; }
html[data-theme="dark"] .ds-cdv1-theme-finanzen  { --primary-color: #003366; --accent-color: #2ECC71; }
html[data-theme="dark"] .ds-cdv1-theme-natur     { --primary-color: #588157; --accent-color: #A98467; }
html[data-theme="dark"] .ds-cdv1-theme-essen     { --primary-color: #E74C3C; --accent-color: #F39C12; }
html[data-theme="dark"] .ds-cdv1-theme-reisen    { --primary-color: #3498DB; --accent-color: #E67E22; }
html[data-theme="dark"] .ds-cdv1-theme-technik   { --primary-color: #34495E; --accent-color: #3498DB; }
html[data-theme="dark"] .ds-cdv1-theme-familie   { --primary-color: #997b9c; --accent-color: #70617e; }
html[data-theme="dark"] .ds-cdv1-theme-haustiere { --primary-color: #8B4513; --accent-color: #20B2AA; }


/* --- 4. KOMPONENTEN-STILE (Theme-Scopes) --- */

/* 4.1 Basis-Container */
[class*="ds-cdv1-theme-"] {
  background-color: var(--ds-surface);
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid var(--ds-border-color);
  border-radius: 8px;
  box-shadow: 0 5px 15px var(--ds-shadow-soft);
}

/* 4.2 Gekapselte Stile */
[class*="ds-cdv1-theme-"] h1,
[class*="ds-cdv1-theme-"] h2 { color: var(--primary-color); }

[class*="ds-cdv1-theme-"] a:not(.ds-cdv1-btn) {
  color: var(--primary-color);
  text-decoration: none;
}

[class*="ds-cdv1-theme-"] a:hover:not(.ds-cdv1-btn) {
  text-decoration: underline;
}

[class*="ds-cdv1-theme-"] .ds-cdv1-btn {
  background-color: var(--accent-color);
  color: var(--primary-text-color, #fff);
}

[class*="ds-cdv1-theme-"] .ds-cdv1-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color) 85%, black);
}

[class*="ds-cdv1-theme-"] th {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

[class*="ds-cdv1-theme-"] blockquote {
  border-left-color: var(--primary-color);
}

[class*="ds-cdv1-theme-"] .ds-cdv1-accordion-title {
  color: var(--primary-color);
}

/* 4.3 Allgemeine Komponenten */
.ds-cdv1-post-card, .ds-cdv1-widget-card {
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--ds-shadow-soft);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ds-cdv1-post-card:hover, .ds-cdv1-widget-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px var(--ds-shadow-medium);
  border-color: var(--accent-color);
}

.ds-cdv1-btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.ds-cdv1-grid-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--ds-shadow-soft);
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid var(--ds-border-color);
  background-color: var(--ds-surface);
  color: var(--ds-text);
}

tbody tr:nth-child(even) td { background-color: var(--ds-subtle-bg); }

tbody tr:hover td {
  background-color: color-mix(in srgb, var(--ds-border-color) 40%, var(--ds-surface));
}

blockquote {
  margin: 25px 0;
  padding: 15px 20px;
  font-style: italic;
  color: var(--ds-muted);
  border-left: 4px solid var(--ds-border-color);
  background-color: var(--ds-subtle-bg);
  border-radius: 0 8px 8px 0;
}


/* ==========================================================================
   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; }

/* Topbar: Anordnung erzwingen – A11y links, Sprache ganz rechts */
.topbar-accessibility {
  order: 1;
}

.topbar-language {
  order: 2;
  margin-left: auto; /* schiebt den gesamten Sprachblock an den rechten Rand */
}


/* ==========================================================================
   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 + Account direkt links von der Nav */
.site-logo            { order: 1; }
.flex-spacer          { order: 2; }
.theme-toggle         { order: 3; margin-left: 0; margin-right: 8px; }
.header-account-toggle{ order: 4; margin-right: 16px; }
.site-nav             { order: 5; margin-left: 0; }
.mobile-menu-btn      { order: 6; 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);
}

/* Spricht den Link innerhalb des Menü-Items an */
.site-nav .menu-item a:hover {
  background: var(--ds-primary) !important;
  color: #ffffff !important; /* Damit der Text auf der Farbe lesbar bleibt */
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */

/* 1. Basis-Layout (für Light & Dark gültig) */
/* Gleiche Optik für Theme-Toggle und Account-Icon */
.theme-toggle,
.header-account-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

/* Toggle wird per JS ein-/ausgeblendet */
.theme-toggle {
  display: none;
}
.theme-toggle.is-visible {
  display: inline-flex;
}

/* Account-Icon ist im Desktop-Header immer sichtbar */
.header-account-toggle {
  display: inline-flex;
  text-decoration: none;
  border: 1px solid #000000;     /* wird im Darkmode unten überschrieben */
  background: #fff;
  color: #0f172a;
}

.theme-toggle:hover,
.header-account-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 6px rgba(0,0,0,.15);
}

.theme-toggle.is-visible .icon-sun,
.theme-toggle.is-visible .icon-moon {
  position: absolute;
  opacity: 0;
  transition: opacity .25s ease;
}

.theme-toggle.is-visible svg,
.header-account-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}
.theme-toggle.is-visible svg [stroke],
.header-account-toggle svg [stroke] {
  stroke: currentColor !important;
}
.theme-toggle.is-visible svg [fill]:not([fill="none"]),
.header-account-toggle svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}


/* 2. Light-Modus: Schwarzes Icon, schwarzer Rand, weißer BG */
html[data-theme="light"] .theme-toggle.is-visible {
  border: 1px solid #000000;
  background: #fff;
  color: #0f172a; /* Schwarzes Icon (Mond) */
}
html[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
html[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; }


/* 3. Dark-Modus: Weißes Icon, weißer Rand, dunkler BG */
html[data-theme="dark"] .theme-toggle.is-visible {
  border: 1px solid #ffffff;
  background: #0f172a;
  color: #f8fafc; /* Weißes Icon (Sonne) */
}

html[data-theme="dark"] .header-account-toggle {
  border: 1px solid #ffffff;
  background: #0f172a;
  color: #f8fafc;
}


html[data-theme="dark"] .theme-toggle.is-visible:hover {
  background: var(--ds-primary);
}

html[data-theme="dark"] .theme-toggle.is-visible .icon-sun { opacity: 1; }
html[data-theme="dark"] .theme-toggle.is-visible .icon-moon { opacity: 0; }

/* Gilt für Light UND Dark Mode gleichermaßen */
.theme-toggle:hover,
.header-account-toggle:hover {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #ffffff; /* Weißes Icon für Lesbarkeit auf Primärfarbe */
}

.theme-toggle.is-visible:hover,
.header-account-toggle:hover {
  background: var(--ds-primary) !important;
  color: #ffffff !important;
}

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

html[data-theme="dark"] .mobile-menu-btn{
  display:none;align-items:center;justify-content:center;border:1px solid #ffffff;border-radius:8px;
  background:#111827;color:#ffffff;padding:8px;
}

.mobile-menu-btn .icon{width:24px;height:24px;}

.mobile-menu-btn:hover {
  color: #fff !important;
  background: var(--ds-primary) !important;
}

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

/* ==========================================================================
   Tablet & Mobile (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /*
     * REGEL 1: Desktop-Menü ausblenden
     */
    .main-header .site-nav { 
        display: none !important; 
    }

    /*
     * REGEL 2: Mobiles Menü-Icon (Burger) EINBLENDEN
     */
    .mobile-menu-btn {
        display: inline-flex !important;
        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; 
    }
	
	:root {
        --ds-sticky-offset: 140px;
    }
}

/* ==========================================================================
   Mobile Only (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /*
     * REGEL 3: Topbar & Userbar NUR auf Mobile ausblenden
     */
    /*.topbar, .userbar { 
        display: none !important; 
    }*/ 
	:root {
        --ds-sticky-offset: 100px;
    }
}

/* ==========================================================================
   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;
}
html[data-theme="dark"] .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;}
html[data-theme="dark"] .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);}
html[data-theme="dark"] .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);}
html[data-theme="dark"] .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;}

/* ==========================================================================
   Tablet Only: Drawer-Sektionen ausblenden (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  #mobile-menu .mobile-drawer__section.mobile-a11y,
  #mobile-menu .mobile-drawer__section.mobile-lang {
    display: none !important; 
  }
}

/* ==========================================================================
   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
   ========================= */
.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-menu a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease; /* Optional: Macht den Farbwechsel weicher */
}

.footer-menu a:hover {
  text-decoration: underline;
  color: var(--ds-primary) !important; /* Erzwingt die Primärfarbe */
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding:12px 20px 18px;
  text-align:center;
  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;
  }
  .footer-logo .logo-svg{ margin:0 auto 10px; }
}
.site-footer .footer-logo { color: #f8fafc !important; }

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

/* Layout-Container */
.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: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, "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 */
html[data-theme="dark"] body{
  color: #e5e7eb;            /* Slate-200 */
  background: #0b1220;       /* sehr dunkles Blau/Slate */
}

#main-content {
  padding-top: clamp(20px, 5vw, 40px);
}
.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-family: 'Montserrat', sans-serif;
  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: var(--ds-primary, #60a5fa);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{ text-decoration-thickness: 2px; }

html[data-theme="dark"] a {
  color: var(--ds-primary, #21ae58);
}

/* 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;
  background: #f1f5f9;
  color: #0f172a;
}
html[data-theme="dark"] blockquote{
  border-left-color: #64748b;
  background: #0f172a;
  color: #e5e7eb;
}

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

/* Tabellen */
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; }
html[data-theme="dark"] th, html[data-theme="dark"] 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;
}
html[data-theme="dark"] pre{ background: #ffffff14; }

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

/* Globale Fokus-Styles (A11y) */
:focus-visible{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
html[data-theme="dark"] :focus-visible{
  outline-color: #93c5fd;
}

/* 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 */
.prose{
  max-width: 72ch;
}

/* --- FULL-BLEED Footer-Hintergrund --- */
.site-footer{
  background:#0f172a;
  color:#f8fafc;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw !important;
  overflow-x: clip;
}
.site-footer .container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background: transparent !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; }
.dp-accordion__panel[hidden] { display: none !important; }

.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;
}
html[data-theme="dark"] .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; }


/* ================================================================
 * DESIGN-CSS – TABS, AKKORDEON, TESTIMONIAL-KARUSSELL
 * ================================================================ */

/* --- TABS --- */
.ds-cdv1-tab-nav { display: flex; border-bottom: 1px solid var(--ds-border-color); margin-bottom: 20px; }
.ds-cdv1-tab-btn {
  padding: 10px 20px; border: none; background: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--ds-muted);
  border-bottom: 3px solid transparent; transition: all 0.2s ease;
}
.ds-cdv1-tab-btn:hover { color: var(--ds-text); }
.ds-cdv1-tab-btn.ds-cdv1-active { color: var(--ds-text); border-bottom-color: var(--accent-color); }
.ds-cdv1-tab-pane { display: none; }
.ds-cdv1-tab-pane.ds-cdv1-active { display: block; }

/* --- AKKORDEON --- */
.ds-cdv1-accordion {
  border: 1px solid var(--ds-border-color);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ds-cdv1-accordion-title {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left; padding: 15px 20px; background-color: var(--ds-surface);
  border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600;
  color: var(--primary-color, var(--ds-text)); font-size: 1em;
}
.ds-cdv1-accordion-title::after {
  content: '+'; font-size: 1.4em; transition: transform 0.3s ease;
}
.ds-cdv1-accordion-title.ds-cdv1-active::after { transform: rotate(45deg); }
.ds-cdv1-accordion-title:hover { background-color: var(--ds-subtle-bg); }
.ds-cdv1-accordion-content {
  padding: 0 20px;
  background-color: var(--ds-surface);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}
.ds-cdv1-accordion-title.ds-cdv1-active + .ds-cdv1-accordion-content {
  padding-top: 15px;
  padding-bottom: 20px;
}

/* --- TESTIMONIAL-KARUSSELL --- */
.ds-cdv1-testimonial-carousel { position: relative; padding: 0 55px; }
.ds-cdv1-testimonial-viewport { overflow: hidden; }
.ds-cdv1-testimonial-track { display: flex; transition: transform 0.5s ease-in-out; }
.ds-cdv1-testimonial-slide { flex: 0 0 100%; box-sizing: border-box; padding: 10px; }
.ds-cdv1-testimonial-content {
  background-color: var(--ds-subtle-bg);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid var(--ds-border-color);
  height: 100%;
}
.ds-cdv1-testimonial-content blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-style: italic;
  color: var(--ds-text);
}
.ds-cdv1-testimonial-content blockquote footer {
  font-style: normal;
  font-weight: 600;
  color: var(--ds-muted);
  margin-top: 15px;
}
.ds-cdv1-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; border-radius: 50%;
  background-color: var(--ds-surface); border: 1px solid var(--ds-border-color);
  color: var(--ds-text); font-size: 1.5em; cursor: pointer; z-index: 10;
}
.ds-cdv1-prev { left: 0; }
.ds-cdv1-next { right: 0; }

/* =========================================================
 * CF7 – Corporate Design Bridge (Formulare)
 * ======================================================= */

/* Wrapper: sorgt für Karte im CD-Look */
.ds-cf7,
.wpcf7 form.ds-cf7 {
  --ds-field-bg:       var(--ds-surface, #ffffff);
  --ds-field-bd:       var(--ds-border-color, #e2e8f0);
  --ds-field-bd-focus: color-mix(in srgb, var(--ds-primary, #2563eb) 55%, white);
  --ds-field-shadow:   0 6px 18px var(--ds-shadow-soft, rgba(0,0,0,.06));

  display: block;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  background: var(--ds-surface, #ffffff);
  box-shadow: 0 4px 14px var(--ds-shadow-soft, rgba(0,0,0,.05));
  color: var(--ds-text, #0f172a);
}

html[data-theme="dark"] .ds-cf7,
html[data-theme="dark"] .wpcf7 form.ds-cf7 {
  box-shadow: 0 10px 26px var(--ds-shadow-medium, rgba(0,0,0,.55));
}

/* Grundraster */
.ds-cf7__row { 
  display: block; 
  margin-bottom: 16px; 
}
.ds-cf7__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .ds-cf7__row--2 {
    grid-template-columns: 1fr;
  }
}

/* Labels */
.ds-cf7 label,
.ds-cf7 .ds-cf7__field label,
.ds-cf7 .wpcf7-form-control-wrap label {
  display: block;
  font-weight: 600;
  margin: 0 0 .35rem;
  color: var(--ds-text, #0f172a);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: .95rem;
}

/* Felder: Text, Mail, Textarea, Select */
.ds-cf7 input[type="text"],
.ds-cf7 input[type="email"],
.ds-cf7 input[type="url"],
.ds-cf7 input[type="tel"],
.ds-cf7 input[type="number"],
.ds-cf7 input[type="date"],
.ds-cf7 input[type="password"],
.ds-cf7 textarea,
.ds-cf7 select,
.wpcf7 form.ds-cf7 input[type="text"],
.wpcf7 form.ds-cf7 input[type="email"],
.wpcf7 form.ds-cf7 input[type="url"],
.wpcf7 form.ds-cf7 input[type="tel"],
.wpcf7 form.ds-cf7 input[type="number"],
.wpcf7 form.ds-cf7 input[type="date"],
.wpcf7 form.ds-cf7 input[type="password"],
.wpcf7 form.ds-cf7 textarea,
.wpcf7 form.ds-cf7 select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ds-field-bd);
  background: var(--ds-field-bg);
  color: var(--ds-text, #0f172a);
  font: inherit;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing: border-box;
}

/* Text IMMER gut lesbar */
.ds-cf7 input[type="text"],
.ds-cf7 input[type="email"],
.ds-cf7 input[type="url"],
.ds-cf7 input[type="tel"],
.ds-cf7 input[type="number"],
.ds-cf7 input[type="date"],
.ds-cf7 input[type="password"],
.ds-cf7 textarea,
.ds-cf7 select {
  color: #000 !important;
}
html[data-theme="dark"] .ds-cf7 input[type="text"],
html[data-theme="dark"] .ds-cf7 input[type="email"],
html[data-theme="dark"] .ds-cf7 input[type="url"],
html[data-theme="dark"] .ds-cf7 input[type="tel"],
html[data-theme="dark"] .ds-cf7 input[type="number"],
html[data-theme="dark"] .ds-cf7 input[type="date"],
html[data-theme="dark"] .ds-cf7 input[type="password"],
html[data-theme="dark"] .ds-cf7 textarea,
html[data-theme="dark"] .ds-cf7 select {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--ds-surface, #1f2937) 96%, #ffffff 4%);
}

/* Fokus-Stil */
.ds-cf7 input[type="text"]:focus,
.ds-cf7 input[type="email"]:focus,
.ds-cf7 input[type="url"]:focus,
.ds-cf7 input[type="tel"]:focus,
.ds-cf7 input[type="number"]:focus,
.ds-cf7 input[type="date"]:focus,
.ds-cf7 input[type="password"]:focus,
.ds-cf7 textarea:focus,
.ds-cf7 select:focus {
  outline: none;
  border-color: var(--ds-field-bd-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary, #2563eb) 20%, transparent);
  background: #ffffff;
}

/* Textarea */
.ds-cf7 textarea {
  resize: vertical;
  min-height: 160px;
}

/* Consent / Checkbox-Zeilen */
.ds-cf7__consent {
  margin-top: 8px;
}

.ds-cf7__consent-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: .9rem;
  color: var(--ds-muted, #64748b);
}

.ds-cf7 .wpcf7-acceptance .wpcf7-list-item,
.ds-cf7 .wpcf7-acceptance .wpcf7-list-item label,
.ds-cf7__consent-label {
  margin: 0 !important;
}

.ds-cf7 .wpcf7-acceptance input[type="checkbox"],
.ds-cf7__consent-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 !important;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--ds-accent, #22c55e);
}

/* Submit-Button: Corporate Primary */
.ds-cf7__submit,
.ds-cf7 input[type="submit"],
.wpcf7 form.ds-cf7 input[type="submit"],
.wpcf7 form.ds-cf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  border: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--ds-primary, #2563eb);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37,99,235,.35);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  text-decoration: none;
}

/* Hover / Active */
.ds-cf7__submit:hover,
.ds-cf7 input[type="submit"]:hover,
.wpcf7 form.ds-cf7 input[type="submit"]:hover,
.wpcf7 form.ds-cf7 .wpcf7-submit:hover {
  background: color-mix(in srgb, var(--ds-primary, #2563eb) 88%, #000000);
  box-shadow: 0 10px 22px rgba(15,23,42,.4);
}

.ds-cf7__submit:active,
.ds-cf7 input[type="submit"]:active,
.wpcf7 form.ds-cf7 input[type="submit"]:active,
.wpcf7 form.ds-cf7 .wpcf7-submit:active {
  transform: translateY(1px) scale(.99);
  box-shadow: 0 6px 14px rgba(15,23,42,.35);
}

/* Disabled-State (z.B. bei Spinner / Validation) */
.ds-cf7__submit[disabled],
.ds-cf7 input[type="submit"][disabled],
.wpcf7 form.ds-cf7 input[type="submit"][disabled],
.wpcf7 form.ds-cf7 .wpcf7-submit[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Fehlermeldungen & Statusnachrichten */
.ds-cf7 span.wpcf7-not-valid-tip {
  display: block;
  margin-top: .35rem;
  color: #e11d48;
  font-size: .92rem;
}

.ds-cf7 .wpcf7-response-output {
  margin-top: 12px;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid #eee;
  font-size: .92rem;
}

.ds-cf7 .wpcf7-mail-sent-ok {
  border-color: #22c55e;
  color: #166534;
  background: #ecfdf5;
}

.ds-cf7 .wpcf7-validation-errors,
.ds-cf7 .wpcf7-acceptance-missing {
  border-color: #f59e0b;
  color: #92400e;
  background: #fffbeb;
}

/* Honeypot-Feld unsichtbar */
.ds-cf7 .hpfield{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* ===================================================================
   DS FINAL: robustes Mobile-Menü – OHNE hidden / display
   =================================================================== */

/* hidden NUR fürs eigene Menü neutralisieren */
#mobile-menu[hidden]{
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
}
[data-mobile-menu-overlay][hidden]{
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Basiszustand: Drawer/Overlay immer im Flow, aber unsichtbar & inaktiv */
#mobile-menu{
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  width: min(90vw, 360px);
  background: var(--ds-surface, #fff);
  z-index: 10002 !important;
  box-shadow: -16px 0 32px rgba(0,0,0,.15);
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
}

[data-mobile-menu-overlay]{
  position: fixed !important;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10001 !important;
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

/* Geöffneter Zustand über Body-Klasse */
body.is-menu-open #mobile-menu{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform .28s ease, opacity .28s ease, visibility 0s linear 0s;
}
body.is-menu-open [data-mobile-menu-overlay]{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s linear 0s;
}

/* Scroll lock */
body.is-menu-open{ overflow: hidden !important; }

/* Light-Mode Absicherung */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] body {
  background: #fff !important; 
  color: #111827 !important;
}

/* === Mobile Drawer: A11y/Language Buttons farblich korrekt in Light/Dark === */
.mobile-drawer__section.mobile-a11y button,
.mobile-drawer__section.mobile-lang button {
  background: transparent;
  color: var(--ds-text) !important;
  border: 1px solid color-mix(in oklab, var(--ds-text) 18%, transparent);
}

.mobile-drawer__section.mobile-a11y button:hover,
.mobile-drawer__section.mobile-lang button:hover,
.mobile-drawer__section.mobile-a11y button:focus-visible,
.mobile-drawer__section.mobile-lang button:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--ds-text) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ds-text) 22%, transparent);
}

html[data-theme="light"] .mobile-drawer__section.mobile-a11y button,
html[data-theme="light"] .mobile-drawer__section.mobile-lang button {
  color: var(--ds-text) !important;
  border-color: color-mix(in oklab, var(--ds-text) 18%, transparent);
}

/* Rest-Jitter vermeiden (Off-Canvas) */
html, body{ overflow-x: clip; }

/* === Mobile Drawer Header: sauber ausrichten === */
.mobile-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:8px 12px;
  border-bottom:1px solid color-mix(in oklab, var(--ds-text, #0f172a) 12%, transparent);
}

.mobile-drawer__header > span{
  font-weight:600;
  letter-spacing:.2px;
}

/* Close-Button flächenhaft + mittig */
.mobile-header-actions .mobile-menu-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:10px;
  background: color-mix(in oklab, var(--ds-text, #0f172a) 6%, transparent);
  outline: none;
}
.mobile-header-actions .mobile-menu-close:hover{
  background: color-mix(in oklab, var(--ds-text, #0f172a) 12%, transparent);
}

html[data-theme="dark"] .mobile-drawer__header{
  border-bottom-color: color-mix(in oklab, var(--ds-text, #e5e7eb) 18%, transparent);
}
html[data-theme="dark"] .mobile-header-actions .mobile-menu-close{
  background: color-mix(in oklab, var(--ds-text, #e5e7eb) 10%, transparent);
}
html[data-theme="dark"] .mobile-header-actions .mobile-menu-close:hover{
  background: color-mix(in oklab, var(--ds-text, #e5e7eb) 18%, transparent);
}

/* ==========================================================================
   Sticky Header-Stack (Topbar + Userbar + Main Header)
   ========================================================================== */
.header-stack {
  position: sticky;
  top: 0;
  z-index: 1100;
}

.topbar {
  background: #f1f5f9;
}
html[data-theme="dark"] .topbar {
  background: #0f172a;
}
.userbar{
  background: #fff;
}
html[data-theme="dark"] .userbar{
  background: #1e293b;
}
.main-header{
  background: #fff;
}
html[data-theme="dark"] .main-header{
  background: #111827;
}


/* ============================================
   BÜCHER – LOGIN & MEIN KONTO (Corporate Design)
   ============================================ */

.buecher-login-widget{
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 12px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  box-shadow: 0 6px 18px var(--ds-shadow-soft, rgba(0,0,0,.06));
}

.buecher-login-title{
  margin-top: 0;
  margin-bottom: .5rem;
}

.buecher-login-text{
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--ds-muted, #64748b);
}

.buecher-login-form-wrap form{
  margin: 0;
}

.buecher-login-form-wrap .login-username,
.buecher-login-form-wrap .login-password,
.buecher-login-form-wrap .login-remember,
.buecher-login-form-wrap .login-submit{
  margin-bottom: .75rem;
}

.buecher-login-form-wrap label{
  font-weight: 600;
  display: block;
  margin-bottom: .25rem;
}

.buecher-login-form-wrap input[type="text"],
.buecher-login-form-wrap input[type="password"]{
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
}

.buecher-login-form-wrap input[type="text"]:focus,
.buecher-login-form-wrap input[type="password"]:focus{
  outline: none;
  border-color: var(--ds-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary, #2563eb) 18%, transparent);
}

.buecher-login-form-wrap .login-remember label{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
}

.buecher-login-form-wrap .login .button,
.buecher-login-form-wrap #buecher-login-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  background: var(--ds-primary, #2563eb);
  color: #fff;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}

.buecher-login-form-wrap .login .button:hover,
.buecher-login-form-wrap #buecher-login-submit:hover{
  background: color-mix(in srgb, var(--ds-primary, #2563eb) 88%, black);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.buecher-login-form-wrap .login .button:active,
.buecher-login-form-wrap #buecher-login-submit:active{
  transform: translateY(1px) scale(.99);
}

.buecher-login-register{
  margin-top: 1rem;
  text-align: center;
  font-size: .95rem;
  color: var(--ds-muted, #64748b);
}

.buecher-login-register-link{
  color: var(--ds-primary, #2563eb);
  font-weight: 600;
  text-decoration: none;
}

.buecher-login-register-link:hover{
  text-decoration: underline;
}

.buecher-user-menu{
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.buecher-user-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  font-size: .9rem;
  text-decoration: none;
  color: var(--ds-text, #0f172a);
  background: var(--ds-surface, #fff);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.buecher-user-link--primary{
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #fff;
}

.buecher-user-link--ghost{
  background: transparent;
}

.buecher-user-link:hover,
.buecher-user-link:focus-visible{
  text-decoration: none;
  border-color: var(--ds-primary, #2563eb);
  color: var(--ds-primary, #2563eb);
}

.buecher-user-link--primary:hover,
.buecher-user-link--primary:focus-visible{
  background: color-mix(in srgb, var(--ds-primary, #2563eb) 88%, black);
  color: #fff;
}

html[data-theme="dark"] .buecher-login-widget{
  box-shadow: 0 6px 18px var(--ds-shadow-medium, rgba(0,0,0,.5));
}

html[data-theme="dark"] .buecher-login-register-link{
  color: var(--ds-primary, #60a5fa);
}

/* Userbar – Links in Corporate-Farben */
.userbar a{
  color: var(--ds-primary);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .2s, color .2s;
}

.userbar a:hover,
.userbar a:focus{
  background: rgba(0,0,0,.06);
  color: var(--ds-accent);
}

html[data-theme="dark"] .userbar a:hover,
html[data-theme="dark"] .userbar a:focus{
  background: rgba(255,255,255,.08);
}

/* ================================================================
   NX-BLOCK – Corporate Bridge (Alltag / Autor-Startseite)
   ================================================================ */

/* Grundlayout: nutzt deine globalen Tokens */
#nx-block {
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
  border-radius: 16px;
  box-shadow: 0 12px 30px var(--ds-shadow-soft, rgba(0,0,0,.08));
  margin: clamp(20px, 5vw, 40px) auto;
}

/* Typografie wie im restlichen Theme */
#nx-block h2,
#nx-block h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ds-text, #0f172a);
}

#nx-block p {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Links: gleiche Logik wie global, nur sauber gekapselt */
#nx-block a:not(.nx-btn) {
  color: var(--ds-primary, #ff2693);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#nx-block a:not(.nx-btn):hover {
  text-decoration-thickness: 2px;
}
html[data-theme="dark"] #nx-block a:not(.nx-btn) {
  color: var(--ds-primary, #21ae58);
}

/* Hero-Section im CD-Look */
#nx-block .nx-hero {
  padding: 68px 24px;
  border-radius: 28px;
  background:
    radial-gradient(1100px 500px at 50% -220px, color-mix(in srgb, var(--ds-accent, #f97316) 28%, transparent) 0%, transparent 60%),
    radial-gradient(900px 400px at 10% -140px, color-mix(in srgb, var(--ds-primary, #ff2693) 18%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--ds-surface, #fff) 0%, var(--ds-subtle-bg, #f8fafc) 70%, color-mix(in srgb, var(--ds-subtle-bg, #f8fafc) 90%, black) 100%);
  border: 1px solid color-mix(in srgb, var(--ds-border-color, #e2e8f0) 90%, transparent);
  box-shadow: 0 8px 28px var(--ds-shadow-soft, rgba(0,0,0,.05));
  text-align: center;
}

/* Buttons an CD angelehnt */
#nx-block .nx-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

#nx-block .nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
  text-decoration: none;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 8px var(--ds-shadow-soft, rgba(0,0,0,.05));
  transition:
    transform .26s,
    box-shadow .26s,
    border-color .26s,
    background .26s,
    color .26s;
}

#nx-block .nx-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--ds-shadow-medium, rgba(0,0,0,.12));
  border-color: color-mix(in srgb, var(--ds-border-color, #e2e8f0) 80%, var(--ds-text, #0f172a) 20%);
}

/* Primary-Button: nutzt ds-primary (Pink / im Darkmode Grün) */
#nx-block .nx-btn--primary {
  background: linear-gradient(
    180deg,
    var(--ds-primary, #ff2693) 0%,
    color-mix(in srgb, var(--ds-primary, #ff2693) 85%, black) 100%
  );
  border-color: transparent;
  color: #ffffff;
}
#nx-block .nx-btn--primary:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ds-primary, #ff2693) 85%, black),
    color-mix(in srgb, var(--ds-primary, #ff2693) 75%, black)
  );
}

/* Secondary-Button: dezent, mit Primär-Akzent */
#nx-block .nx-btn--secondary {
  background: color-mix(in srgb, var(--ds-subtle-bg, #f8fafc) 70%, var(--ds-surface, #fff));
  color: color-mix(in srgb, var(--ds-primary, #ff2693) 30%, var(--ds-text, #0f172a));
  border-color: color-mix(in srgb, var(--ds-border-color, #e2e8f0) 70%, var(--ds-primary, #ff2693) 30%);
}
#nx-block .nx-btn--secondary:hover {
  background: color-mix(in srgb, var(--ds-subtle-bg, #f8fafc) 55%, var(--ds-surface, #fff));
}

/* Karten & Grid – leicht an CD angepasst */
#nx-block .nx-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(12, 1fr);
}
#nx-block .nx-col-12 { grid-column: span 12; }
#nx-block .nx-col-7  { grid-column: span 7; }
#nx-block .nx-col-5  { grid-column: span 5; }
#nx-block .nx-col-6  { grid-column: span 6; }
#nx-block .nx-col-4  { grid-column: span 4; }

@media (max-width:1024px){
  #nx-block .nx-t-12 { grid-column: span 12 !important; }
  #nx-block .nx-t-6  { grid-column: span 6 !important; }
}
@media (max-width:768px){
  #nx-block .nx-m-12 { grid-column: span 12 !important; }
}

#nx-block .nx-card {
  background: color-mix(in srgb, var(--ds-surface, #fff) 94%, var(--ds-subtle-bg, #f8fafc));
  border: 1px solid var(--ds-border-color, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 28px var(--ds-shadow-soft, rgba(0,0,0,.05));
}

#nx-block .nx-media {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 6px 20px var(--ds-shadow-soft, rgba(0,0,0,.05));
}

/* Kleine Helfer */
#nx-block .nx-center { text-align:center; }
#nx-block .nx-mt-6  { margin-top:6px; }
#nx-block .nx-mt-10 { margin-top:10px; }
#nx-block .nx-mt-16 { margin-top:16px; }
#nx-block .nx-mt-24 { margin-top:24px; }

#nx-block #ueber-mich.nx-c {
  max-width: 100%;
}

#nx-block #ueber-mich.nx-c {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Alle schmalen NX-Wrapper im nx-block auf volle Breite ziehen */
#nx-block .nx-c {
  max-width: 100%;
}

/* Falls nötig: horizontales Padding dieses speziellen Abschnitts anpassen */
#nx-block #ueber-mich.nx-c {
  padding-left: 0;
  padding-right: 0;
}

/* Nur Smartphones: kompakter Header, Buttons bleiben rechts */
@media (max-width: 768px) {

  .main-header .header-inner {
    padding-inline: 12px;  /* weniger Abstand links/rechts */
    padding-block: 8px;    /* weniger Höhe */
    gap: 8px;              /* engerer Abstand zwischen den Elementen */
  }

  /* Logo etwas begrenzen, damit rechts Platz bleibt */
  .header-inner .site-logo {
    max-width: 150px;
    flex-shrink: 1;
  }

  .header-inner .site-logo .logo-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Flex-Spacer bleibt aktiv, damit die Icons rechts sitzen */
  .header-inner .flex-spacer {
    flex: 1 1 auto;
  }

  /* Icons kompakt rechts gruppieren */
  .theme-toggle,
  .header-account-toggle,
  .mobile-menu-btn {
    margin-left: 6px;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;      /* nicht wachsen, nicht schrumpfen */
  }

  .theme-toggle svg,
  .header-account-toggle svg,
  .mobile-menu-btn svg {
    width: 18px;
    height: 18px;
  }
}

.main-header .header-inner {
  display: flex;
  align-items: center;
  gap: 16px;            /* Standard-Abstände Desktop/Tablet */
}

.header-inner .flex-spacer {
  flex: 1 1 auto;       /* Schiebt die Icons nach rechts */
}


.footer-brand{
  /* falls noch nicht vorhanden – sorgt für etwas Abstand */
  text-align:left;
}

.footer-social{
  display:flex;
  gap:0.75rem;
  margin-top:0.75rem;
  align-items:center;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:999px;
  border:1px solid var(--ds-border-color, rgba(148, 163, 184, 0.5));
  background:color-mix(in srgb, var(--ds-surface, #0b1120) 80%, #020617);
  box-shadow:0 2px 6px rgba(15, 23, 42, 0.35);
  text-decoration:none;
  transition:
    transform 160ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out,
    background-color 160ms ease-out,
    opacity 160ms ease-out;
}

.footer-social-link:hover,
.footer-social-link:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15, 23, 42, 0.5);
  border-color:var(--ds-primary, #22c55e);
  outline:none;
}

.footer-social-icon{
  width:1.1rem;
  height:1.1rem;
  display:block;
}


/* ================================
   "Mein Konto" – Corporate Design
   ================================ */

.buecher-mein-konto-form{
  max-width: 640px;
  margin: clamp(20px, 4vw, 32px) auto;
  padding: clamp(20px, 4vw, 28px);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
  border-radius: 16px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  box-shadow: 0 12px 30px var(--ds-shadow-soft, rgba(15,23,42,.08));
}

.buecher-mein-konto-form > h2{
  margin-top: 0;
  margin-bottom: .5rem;
}
.buecher-mein-konto-form > p{
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--ds-muted, #64748b);
}

.bmk-notice{
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  font-size: .95rem;
}
.bmk-notice--success{
  background: #ecfdf5;
  border: 1px solid #22c55e;
  color: #166534;
}
.bmk-notice--error{
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #991b1b;
}

.buecher-mein-konto-form .bmk-field{
  margin: 0 0 1rem;
}
.buecher-mein-konto-form label{
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
  font-size: .95rem;
}

.buecher-mein-konto-form input[type="text"],
.buecher-mein-konto-form input[type="email"],
.buecher-mein-konto-form input[type="password"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
  font: inherit;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.buecher-mein-konto-form input[disabled]{
  background: color-mix(in srgb, var(--ds-surface, #fff) 96%, #000 4%);
  color: var(--ds-muted, #64748b);
}

.buecher-mein-konto-form input[type="text"]:focus,
.buecher-mein-konto-form input[type="email"]:focus,
.buecher-mein-konto-form input[type="password"]:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--ds-primary, #2563eb) 55%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary, #2563eb) 20%, transparent);
}

.buecher-mein-konto-form .password-hint{
  display: block;
  margin-top: .35rem;
  font-size: .85rem;
  color: var(--ds-muted, #64748b);
}

.buecher-mein-konto-form .bmk-separator{
  margin: 1.5rem 0 1rem;
  border: 0;
  border-top: 1px solid rgba(15,23,42,.08);
}
html[data-theme="dark"] .buecher-mein-konto-form .bmk-separator{
  border-top-color: rgba(255,255,255,.14);
}

.buecher-mein-konto-form .bmk-actions{
  margin-top: 1.25rem;
  text-align: right;
}

.buecher-mein-konto-form .bmk-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  border: 0;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--ds-primary, #2563eb);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37,99,235,.35);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}

.buecher-mein-konto-form .bmk-submit:hover{
  background: color-mix(in srgb, var(--ds-primary, #2563eb) 88%, #000);
  box-shadow: 0 10px 22px rgba(15,23,42,.4);
}

.buecher-mein-konto-form .bmk-submit:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 6px 14px rgba(15,23,42,.35);
}

html[data-theme="dark"] .buecher-mein-konto-form{
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.buecher-passwort-form {
  max-width: 620px;
  margin: 0 auto;
}
.buecher-passwort-title {
  margin-bottom: .5rem;
}
.buecher-passwort-intro {
  margin-bottom: 1.5rem;
}
.buecher-passwort-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.25rem;
}
.bmk-field label {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
}
.bmk-input {
  width: 100%;
  max-width: 100%;
}
.password-hint {
  display: block;
  font-size: .85rem;
  opacity: .8;
  margin-top: .25rem;
}

/* Games-Hero */
.ds-games-hero__header {
  margin-bottom: 2rem;
}
.ds-games-hero__header h1 {
  margin-top: 0;
}
.ds-game-card__media {
  margin: -10px -10px 16px -10px;
  border-radius: 10px;
  overflow: hidden;
}
.ds-game-card__media img {
  display: block;
  width: 100%;
  height: auto;
}
.ds-game-card__bullets {
  margin: 0 0 0.75rem 1.2rem;
}
.ds-game-card__age {
  font-size: .9rem;
  color: var(--ds-muted);
}
.ds-game-card__cta {
  margin-top: 1rem;
}
.ds-games-hero__footer {
  margin-top: 2rem;
  font-size: .9rem;
  color: var(--ds-muted);
}

/* Honeypot-Feld */
.hpfield{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Override aller älteren Silktide-Wrapper-Definitionen */
#silktide-wrapper{
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Silktide-Icon ausblenden, solange das Puzzle aktiv ist */
body.kids-puzzle-active #silktide-cookie-icon {
  display: none !important;
}


.ds-vh {
  position: absolute !important; /* Zieht das Element aus dem Dokumentenfluss */
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.bmk-modal[hidden] {
  display: none !important;
}

.bmk-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.bmk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.bmk-modal__dialog {
  position: relative;
  max-width: 480px;
  margin: 10vh auto;
  background: var(--ds-surface, #fff);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.bmk-button--danger {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.bmk-button--danger:hover {
  background: #991b1b;
}

/* E-Mail Feld im Login-Bereich hübsch machen */
.buecher-login-form-wrap input[type="email"] {
    width: 100%;
    padding: .65rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border-color, #e2e8f0);
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #0f172a);
}

/* =========================================================
   GLOBAL: Icon vor externen Links & E-Mail-Links (Textlinks)
   ========================================================= */

/* Basis: Externe Links (http/https) ohne eigene Domain + mailto */
a[href^="http"]:not([href*="dominicschmiel.com"]):not(.ds-cdv1-btn):not(.footer-social-link),
a[href^="mailto:"]:not(.ds-cdv1-btn):not(.footer-social-link) {
  position: relative;
}

/* Icon davor – nutzt currentColor, passt sich Light/Dark an */
a[href^="http"]:not([href*="dominicschmiel.com"]):not(.ds-cdv1-btn):not(.footer-social-link)::before,
a[href^="mailto:"]:not(.ds-cdv1-btn):not(.footer-social-link)::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.35em;
  vertical-align: -0.1em;

  /* Icon einfärben über currentColor + Masken */
  background-color: currentColor;

  /* Standard-Masken */
  mask-image: url('/wp-content/themes/ds_network/assets/icons/link.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  /* WebKit-Masken (Safari/Chromium) */
  -webkit-mask-image: url('/wp-content/themes/ds_network/assets/icons/link.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* --- Sprach-Switcher kompakt & neutral ------------------------ */

.topbar-language {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* DE-Schnelllink */
.lang-quick {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--ds-muted);
  background: transparent;
  text-decoration: none;
  color: var(--ds-text);
  line-height: 1.2;
}

/* Container für Button + Menü */
.lang-switcher {
  position: relative;
}

/* Toggle-Button (kleiner Chip) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ds-muted);
  background: transparent;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  color: var(--ds-text);
}

.lang-toggle:hover {
  background: rgba(148, 163, 184, 0.15);
}

.lang-toggle-chevron {
  font-size: 0.7rem;
}

/* Dropdown-Layer */
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 7.5rem;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  background: var(--ds-surface);
  border-radius: 0.5rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
  z-index: 50;
}

/* Einzelne Einträge – ALLE Button-Styles überschreiben */
.lang-menu-link {
  display: block;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--ds-text);

  /* harte Resets gegen globale Button-/Pill-Styles */
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.lang-menu-link:hover {
  background: rgba(148, 163, 184, 0.18) !important;
}

/* aktive Sprache nur leicht hervorheben */
.lang-menu-link.is-active {
  font-weight: 600;
}


/* Footer-Brand auf Mobile & Tablet mittig ausrichten */
@media (max-width: 1024px) {
  .footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
  }

  .footer-brand .footer-logo {
    margin: 0 auto;
    display: block;
  }

  .footer-brand .footer-tagline {
    text-align: center;
    margin-top: 12px;
  }

  .footer-brand .footer-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
  }

  .footer-brand .footer-social-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}

/* Basislayout Footer-Brand + Social */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Mobile/Tablet mittig */
@media (max-width: 1024px) {
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  .footer-tagline {
    text-align: center;
  }
}

/* Social-Leiste */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Desktop kannst du sie links lassen, mobil sind sie durch .footer-brand zentriert */
@media (max-width: 1024px) {
  .footer-social {
    justify-content: center;
  }
}

/* Icons über currentColor färben */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 999px;
  text-decoration: none;
  color: #000000; /* Lightmode: schwarz */
}

/* Darkmode: weiß – ggf. den Selector an dein Theme anpassen */
html[data-theme="dark"] .footer-social-link,
body.theme-dark .footer-social-link {
  color: #ffffff;
}

/* SVG-Größe + Füllung */
.footer-social-icon,
.footer-social-icon svg {
  inline-size: 24px;
  block-size: 24px;
  display: block;
}

/* Alle Grundformen auf currentColor ziehen */
.footer-social-icon path,
.footer-social-icon rect,
.footer-social-icon circle,
.footer-social-icon polygon {
  fill: currentColor !important;
  transition: fill 0.18s ease, transform 0.12s ease;
}

/* Hover-Effekt – Icon färbt sich in Primärfarbe */
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--ds-primary, #22c55e);
  outline: none;
  transform: translateY(-1px);
}

.entry-header h1:empty { display: none; }

/* userbar nur anzeigen, wenn eingeloggt */
body:not(.logged-in) .userbar {
  display: none !important;
}

/* Account-Button nur für Gäste anzeigen */
body.logged-in .header-account-toggle {
  display: none !important;
}



.mobile-drawer__section.mobile-a11y {display: none;}
.mobile-drawer__section.mobile-lang {display: none;}
.mobile-drawer__section.mobile-lang {display: none;}


      /* Silktide-Cookie-Icon während des Spiels ausblenden */
      body.kids-puzzle-active #silktide-cookie-icon,
      body.kids-puzzle-active .silktide-cookie-icon {
        display: none !important;
      }
	  
/* =============== Base + Theme Mapping =============== */
#nx-block,
#nx-block * {
  box-sizing: border-box;
}

#nx-block {
  /* Design Tokens */
  --bg:           var(--ds-subtle-bg, #f7fafc);
  --surface:      var(--ds-surface, #ffffff);
  --text:         var(--ds-text, #0f172a);
  --muted:        var(--ds-muted, #64748b);
  --border:       var(--ds-border-color, #e2e8f0);
  --shadow-soft:  var(--ds-shadow-soft, rgba(0,0,0,.05));
  --shadow-med:   var(--ds-shadow-medium, rgba(0,0,0,.12));

  /* Brand Colors */
  --primary:      var(--ds-primary, #22c55e);
  --primary-600:  color-mix(in srgb, var(--primary) 85%, black);
  --primary-700:  color-mix(in srgb, var(--primary) 75%, black);
  --accent:       var(--ds-accent, #0ea5e9);

  /* Link Variable */
  --nx-link:      var(--accent, #0ea5e9);

  --radius:16px;
  --r-sm:12px;
  --gap:22px;
  --speed:260ms;

  color:var(--text);
  background:transparent;
  font-family:var(--font);
  line-height:1.65;
}

#nx-block .nx-c {
  max-width:1120px;
  margin:0 auto;
  padding:56px 20px;
}

#nx-block h2,
#nx-block h3 {
  margin:0 0 .5em;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.015em;
}

#nx-block h2 {
  font-size:clamp(1.8rem,1.3rem + 1.3vw,2.4rem);
}

#nx-block h3 {
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);
}

#nx-block .nx-muted {
  color:var(--muted);
}

/* =============== Links =============== */
#nx-block a:not(.nx-btn) {
  color: var(--nx-link);
  text-decoration: none;
}

#nx-block a:not(.nx-btn):hover {
  color: color-mix(in srgb, var(--nx-link) 85%, black);
  text-decoration: underline;
}

#nx-block a:not(.nx-btn):visited {
  color: var(--nx-link);
}

#nx-block a:not(.nx-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nx-link) 60%, white);
  outline-offset: 2px;
}

/* Darkmode Hooks */
body:not(.is-light) #nx-block,
#nx-block[data-dark="true"] {
  --nx-link: #22c55e;
}

body:not(.is-light) #nx-block a:not(.nx-btn),
#nx-block[data-dark="true"] a:not(.nx-btn) {
  color:#22c55e !important;
}

body:not(.is-light) #nx-block a:not(.nx-btn):hover,
#nx-block[data-dark="true"] a:not(.nx-btn):hover {
  color:#16a34a !important;
}

/* =============== Hero =============== */
#nx-block .nx-hero {
  padding:68px 24px;
  border-radius:28px;
  background:
    radial-gradient(1100px 500px at 50% -220px, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 60%),
    radial-gradient(900px 400px at 10% -140px, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 70%, color-mix(in srgb, var(--bg) 90%, black) 100%);
  border:1px solid color-mix(in srgb, var(--border) 90%, transparent);
  box-shadow: 0 8px 28px var(--shadow-soft);
  text-align:center;
}

/* =============== Buttons =============== */
#nx-block .nx-actions {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

#nx-block .nx-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5ch;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition:
    transform var(--speed),
    box-shadow var(--speed),
    border-color var(--speed),
    background var(--speed),
    color var(--speed);
  box-shadow:0 2px 8px var(--shadow-soft);
}

#nx-block .nx-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 22px var(--shadow-med);
  border-color:color-mix(in srgb, var(--border) 80%, var(--text) 20%);
}

#nx-block .nx-btn--primary {
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  border-color:transparent;
  color: color-mix(in srgb, black 85%, var(--primary));
}

#nx-block .nx-btn--primary:hover {
  background:linear-gradient(180deg, var(--primary-600), var(--primary-700));
}

#nx-block .nx-btn--secondary {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  color: color-mix(in srgb, var(--primary) 30%, var(--text));
  border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}

#nx-block .nx-btn--secondary:hover {
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}

/* =============== Grid & Cards =============== */
#nx-block .nx-grid {
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(12, 1fr);
}

#nx-block .nx-col-12 { grid-column:span 12; }
#nx-block .nx-col-7  { grid-column:span 7; }
#nx-block .nx-col-5  { grid-column:span 5; }
#nx-block .nx-col-4  { grid-column:span 4; }
#nx-block .nx-col-6  { grid-column:span 6; }

@media (max-width:1024px) {
  #nx-block .nx-t-12 { grid-column:span 12 !important; }
  #nx-block .nx-t-6  { grid-column:span 6 !important; }
}

@media (max-width:768px) {
  #nx-block .nx-m-12 { grid-column:span 12 !important; }
}

#nx-block .nx-card {
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  backdrop-filter: saturate(120%) blur(4px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 8px 28px var(--shadow-soft);
}

#nx-block .nx-media {
  width:100%;
  border-radius:16px;
  display:block;
  box-shadow:0 6px 20px var(--shadow-soft);
}

/* =============== Pills =============== */
#nx-block .nx-pill {
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* =============== Tabs =============== */
#nx-block .nx-tabs {
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 8px 28px var(--shadow-soft);
}

#nx-block .nx-tablist {
  display:flex;
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border-bottom:1px solid var(--border);
}

#nx-block .nx-tab {
  flex:1;
  padding:14px 16px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
  transition:background var(--speed), color var(--speed);
}

#nx-block .nx-tab[aria-selected="true"] {
  color:var(--text);
  background:var(--surface);
  border-bottom:2px solid var(--accent);
}

#nx-block .nx-tab:hover {
  color:var(--text);
}

#nx-block .nx-tabpanel {
  display:none;
  padding:22px;
}

#nx-block .nx-tabpanel[data-active="true"] {
  display:block;
}

/* =============== Avatar & Helpers =============== */
#nx-block .nx-avatar {
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 3px 10px var(--shadow-soft);
}

#nx-block .nx-center { text-align:center; }
#nx-block .nx-mt-6  { margin-top:6px; }
#nx-block .nx-mt-10 { margin-top:10px; }
#nx-block .nx-mt-16 { margin-top:16px; }
#nx-block .nx-mt-24 { margin-top:24px; }

/* =============== Zusätzliche Helfer-Klassen (statt Inline-Styles) =============== */
#nx-block .nx-max-980 {
  max-width:980px;
  margin:0 auto;
}

#nx-block .nx-max-900 {
  max-width:900px;
  margin:0 auto;
}

#nx-block .nx-ai-center {
  align-items:center;
}

#nx-block .nx-avatar-lg {
  width:160px;
  height:160px;
}

#nx-block .nx-justify-start {
  justify-content:flex-start;
}

/* Mein Konto – "aktuelles Passwort"-Feld sauber an Theme-Tokens anbinden */
.buecher-mein-konto-form input[name="current_pass"],
.buecher-mein-konto-form #current_pass {
  background: var(--ds-surface, #fff);
  color: var(--ds-text, #0f172a);
  border-color: var(--ds-border-color, #e2e8f0);
}

/* Dark Mode Override: explizit abdunkeln */
html[data-theme="dark"] .buecher-mein-konto-form input[name="current_pass"],
html[data-theme="dark"] .buecher-mein-konto-form #current_pass {
  background: color-mix(in srgb, var(--ds-surface, #1f2937) 96%, #000 4%);
  color: var(--ds-text, #e5e7eb);
}

html[data-theme="dark"] .buecher-mein-konto-form input[name="current_pass"],
html[data-theme="dark"] .buecher-mein-konto-form #current_pass {
  background: color-mix(in srgb, var(--ds-surface, #1f2937) 96%, #000 4%) !important;
  color: var(--ds-text, #e5e7eb) !important;
}