/* ==========================================================
   HEADER OVERRIDES – konsolidiert & konfliktfrei
   ========================================================== */
/* ==========================================================
   HEADER – Dominante, unabhängige Root-Variablen
   ========================================================== */

:root {
  /* Header-spezifische Farben & Fonts */
  --header-bg: #f8fafc;
  --header-gold: #d4af37;
  --header-font: "Inter", "Segoe UI", Roboto, sans-serif;
  --zitat-font: "Dancing Script", cursive;
}

/* ==========================================================
   GLOBAL ROOT – Farben, Layout, Typografie
   ========================================================== */

:root {
  /* Farben – harmonisiert */
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --accent-warm: #ff6b35;
  --accent-green: #4caf50;
  --accent-green-dark: #2e7d32;
  --accent-red: #a94442;

  --site-bg: #f9fafb;
  --site-color: #111827;
  --paper-bg: #fffdf6;
  --card-bg: #f8fafc;
  --muted-border: #e2decf;
  --bs-info: #0dcaf0;

  /* Typografie */
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: Georgia, serif;
  --base-font-size: 16px;
  --line-height: 1.45;

  /* Layout */
  --gutter: 1.5rem;
  --max-width-snippet: 56rem;
  --max-width-zettel: 50rem;
  --radius: 0.6rem;

  /* Schatten */
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.12);
}

/* ===============================
   Base
   =============================== */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
   background: #000000;
  background-old: var(--site-bg);
  color: var(--site-color);
  font-family: var(--ui-font);
  font-size: var(--base-font-size);
  line-height: var(--line-height);
}

/* ===============================
   ZITAT-SNIPPET – Pergament-Zettel
   =============================== */
.zitat-block .zitat-image img {
  width: 100%;
  height: 40vh;
  min-height: 260px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

.snippet-top.zettel {
  position: relative;
  max-width: var(--max-width-snippet);
  margin: 2rem auto 1.6rem;
  padding: 1.8rem 2rem 1.6rem;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.02)),
    var(--paper-bg);

  border-radius: 0.9rem;
  border: 1px solid rgba(120, 90, 40, 0.25);
  box-shadow: var(--shadow-strong);

  font-family: var(--serif);
  color: #2f2a22;
  line-height: 1.55;

  animation: zettelUnroll 0.8s cubic-bezier(.2,.9,.2,1);
}

/* ==========================================================
   SNIPPET-BEREICH
   ========================================================== */

/* Impuls-Badge */
.snippet-top.imponant::before {
  content: "✦ IMPULS ✦";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.8rem;

  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  background: #f6eed8;
  color: #6a5522;
  border: 1px solid rgba(100,80,30,0.35);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Zitat-Elemente */
.snippet-top blockquote {
  margin: 0;
  font-size: 1.05rem;
}

.snippet-top footer {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: right;
}

/* Bild im Snippet */
.snippet-top img.snippet-image {
  max-width: 25%; /* wird durch width:150px!important überschrieben */
  width: 150px !important;
  height: auto;

  border-radius: 0.5rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Intro-Textblöcke unter dem Header */
.intro-block {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Einzelne Textzeilen */
.text-snippet-intro {
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  opacity: 0.9;
  letter-spacing: 0.2px;
}

/* Optional: etwas weicherer Ton */
.text-snippet-intro em {
  color: #666; /* doppelt, aber funktional ok */
}
/* ==========================================================
   INFO-BEREICH – Snippets, Buttons, Links, Animationen
   ========================================================== */

/* ===============================
   Animationen
   =============================== */

/* Zettel Unroll Animation */
@keyframes zettelUnroll {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CSS-Fallback für Auto-Hide */
@keyframes cssFadeOut {
  to {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

/* ===============================
   Info-Snippet – Basis
   =============================== */

/* (kleiner Override aus deinem ersten Block – bleibt bestehen) */
.info-snippet {
  padding: 0.5rem 0.8rem;
  margin: 1rem 0;
}

/* Vollständige Snippet-Definition */
.info-snippet {
  width: 100%;
  max-width: 900px;
  background: var(--paper-bg);
  border-left: 4px solid var(--primary);

  padding: .6rem 1rem;   /* überschreibt die kleinere Version */
  margin: 1.2rem 0;      /* überschreibt die kleinere Version */

  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-radius: 8px;
  color: var(--site-color);
  font-family: var(--ui-font);

  overflow: hidden;
  will-change: transform, opacity;

  transition:
    opacity .6s ease,
    transform .8s cubic-bezier(.2,.9,.2,1),
    max-height .6s ease,
    padding .4s ease,
    margin .4s ease;
}

/* Auto-Hide per CSS */
.info-snippet.css-auto-hide {
  animation: cssFadeOut 1s ease forwards;
  animation-delay: 6s;
}

/* Hidden State */
.info-snippet.hidden {
  display: none !important;
  visibility: hidden;
}

/* Inneres Layout */
.info-snippet-inner {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
}

.info-snippet strong {
  color: var(--primary);
}

/* ===============================
   Info-Links
   =============================== */
.info-link {
  color: var(--bs-info);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.info-link:hover {
  text-decoration: underline;
}

.info-link:active {
  color: var(--bs-info);
}

.info-link:focus {
  outline: 2px solid var(--bs-info);
  outline-offset: 2px;
}

/* ===============================
   Info-Button
   =============================== */

/* kleiner Override aus deinem ersten Block */
.info-button {
  padding: 0.3rem 0.7rem;
}

/* vollständige Definition */
.info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .4rem 1rem; /* überschreibt die kleinere Version */
  min-height: 2rem;

  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: .5rem;

  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background-color .18s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

/* Hover */
.info-button:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

/* ===============================
   UI-Feinheiten (Transitions)
   =============================== */
.info-button,
.nav-link,
button {
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
  cursor: pointer;
}
/* ==========================================================
   ICONS – kleine Bildmarken & Affiliate-Elemente
   ========================================================== */

/* Rose Icons */
.icon-small {
  width: 1.75rem;
  height: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.amazon-icon {
  width: 1.5rem;   /* ~24px */
  height: auto;
  display: inline-block;
}

/* Amazon Banner */
.amazon-banner {
  max-width: 600px;
  margin: 1.5rem auto;
  padding: 1rem 1.2rem;
  border-left: 5px solid #ff9900;
  background: #fff8e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  font-family: Arial, sans-serif;
}

.amazon-banner h3 {
  margin-top: 0;
  color: #c45500;
}

.amazon-banner a {
  color: #1a73e8;
  font-weight: bold;
  text-decoration: none;
}

.amazon-banner a:hover {
  text-decoration: underline;
}
/* ===============================
   Reduced Motion – Barrierefreiheit
   =============================== */
/* ==========================================================
   FOOTER – Abschlussbereich jeder Seite (dominant & unabhängig)
   ========================================================== */

/* ===============================
   1. Haupt-Footer
   =============================== */
.footer-my33 {
  background-color: #f3e6e6 !important;   /* sehr heller Rotbraunton */
  color: #111827 !important;

  font-family: system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;

  padding: 2rem 1rem;
  margin-top: 3rem;

  border-top: 1px solid rgba(0,0,0,0.08);
  border-left: 1px solid #f0f0f0;         /* optional, sehr dezent */

  position: relative;
  width: 100%;
  z-index: 9999 !important;               /* immer oben, nie überlagert */
}

/* Muted Text */
.footer-my33 .text-muted {
  color: #4b5563;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}

/* ===============================
   2. Footer-Links
   =============================== */
.footer-my33 a {
  color: #006699;
}

.footer-my33 a:hover {
  text-decoration: underline;
}

/* ===============================
   3. Footer-News (Sonderbereich)
   =============================== */
.footer-news {
  background-color: #f3e6e6 !important;
  color: #2c0d0d;
  box-shadow:
    inset 0 -10px 20px rgba(0,0,0,0.25),
    0 4px 8px rgba(0,0,0,0.18);
}

/* ===============================
   4. Trennlinie
   =============================== */
.footer-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 3rem 0 2rem;
}

/* ===============================
   5. Counter
   =============================== */
.footer-counter {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #555;
  opacity: 0.85;
}

.footer-counter strong {
  font-weight: 600;
  color: #333;
}

/* (Doppelt vorhanden – bleibt bestehen, aber redundant) */
.footer-counter
   ------------------------------
@media (prefers-reduced-motion: reduce) {

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================
   MOBILE & ACCESSIBILITY – Optimale Darstellung auf Handys
   ========================================================== */

/* ===============================
   Reduced Motion – Barrierefreiheit
   =============================== */
@media (prefers-reduced-motion: reduce) {

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===============================
   Mobile Layout – bis 640px
   =============================== */
@media (max-width: 640px) {

  /* Grundlegende Textoptimierung */
  body {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* Header */
  header h1 {
    font-size: 1.5rem;
    text-align: center;
  }

  .site-struktur-inner {
    gap: 0.6rem;
  }

  /* Navigation */
  .nav-container {
    flex-direction: column;
    gap: 0.4rem;
  }

  .nav-button {
    width: 100%;
    text-align: center;
  }

  /* Footer Navigation */
  .nav-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }

  .nav-btn-name {
    text-align: center;
  }

  /* Info-Snippets */
  .info-snippet {
    padding: 0.8rem 1rem;
    margin: 1rem 0;
  }

  .info-snippet-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Icons */
  .icon-small,
  .amazon-icon {
    width: 1.2rem;
  }

  /* Domain-Liste */
  ul.domain-list li {
    margin-bottom: 0.8rem;
  }

  /* Footer */
  .footer-my33 {
    padding: 1.5rem 1rem;
    text-align: center;
  }

  .footer-divider {
    margin: 2rem 0 1.5rem;
  }
}
/* ==========================================================
   LARGE SCREENS & TV – Optimiert für große Displays
   ========================================================== */

@media (min-width: 1600px) {

  /* Grundlegende Typografie */
  body {
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 1800px;
    margin: 0 auto;
  }

  /* Header */
  .site-struktur {
    padding: 2rem 2rem 1.5rem;
  }

  .header-zitat {
    font-size: 2rem;
    max-width: 1200px;
    margin: 1.5rem auto;
  }

  /* Navigation */
  .nav-container {
    gap: 1rem;
  }

  .nav-button {
    padding: 0.6rem 1.4rem;
    font-size: 1.05rem;
  }

  /* Info-Snippets */
  .info-snippet {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1.2rem 1.6rem;
  }

  /* Domain-Liste */
  ul.domain-list {
    max-width: 900px;
    margin: 0 auto;
  }

  /* Icons */
  .icon-small,
  .amazon-icon {
    width: 2rem;
  }

  /* Footer */
  .footer-my33 {
    padding: 3rem 2rem;
    font-size: 1rem;
  }
}
/* ==========================================================
   DARK MODE – Automatisch, systemabhängig
   ========================================================== */

@media (prefers-color-scheme: dark) {

  /* ===============================
     Grundfarben
     =============================== */
  :root {
    --site-bg: #0f0f0f;
    --site-color: #e5e5e5;

    --paper-bg: #1a1a1a;
    --card-bg: #1c1c1c;

    --muted-border: #333;

    --primary: #4da3ff;
    --primary-hover: #1e7cd6;

    --accent-warm: #ff8c4d;
    --accent-green: #5ecf6e;
    --accent-red: #ff6b6b;

    --bs-info: #5ecbff;
  }

  body {
    background: var(--site-bg);
    color: var(--site-color);
  }

  /* ===============================
     Header
     =============================== */
  .site-struktur {
    background: #1a1a1a !important;
    color: var(--site-color) !important;
    border-bottom: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  }

  .header-zitat {
    color: #e0e0e0;
  }

  /* ===============================
     Navigation
     =============================== */
  .nav-button {
    background: linear-gradient(#2a2a2a, #1a1a1a);
    border: 1px solid #333;
    color: #e5e5e5;
  }

  .nav-button:hover {
    background: linear-gradient(#333, #222);
    color: var(--primary);
  }

  /* ===============================
     Info-Snippets
     =============================== */
  .info-snippet {
    background: var(--paper-bg);
    border-left-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    color: var(--site-color);
  }

  .info-link {
    color: var(--bs-info);
  }

  /* ===============================
     Icons
     =============================== */
  .icon-small,
  .amazon-icon {
    filter: brightness(0.85);
  }

  /* ===============================
     Domain-Liste
     =============================== */
  ul.domain-list li a {
    color: var(--primary);
  }

  ul.domain-list li a:hover {
    color: var(--primary-hover);
  }

  /* ===============================
     Footer
     =============================== */
  .footer-my33 {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
    border-top: 1px solid #333;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.6);
  }

  .footer-my33 a {
    color: var(--primary);
  }

  .footer-news {
    background-color: #1a1a1a !important;
    color: #ffb199;
    box-shadow:
      inset 0 -10px 20px rgba(0,0,0,0.6),
      0 4px 8px rgba(0,0,0,0.4);
  }

  .footer-divider {
    border-top: 1px solid #333;
  }

  .footer-counter {
    color: #ccc;
  }

  /* ===============================
     Bootstrap-Upgrade (Dark)
     =============================== */
  .card {
    background: var(--card-bg);
    border-color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }

  .form-control {
    background: #222;
    color: #eee;
    border-color: #444;
  }

  .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.15rem rgba(77,163,255,0.35);
  }

  .navbar {
    background: #1a1a1a !important;
    border-bottom: 1px solid #333;
  }

  .navbar-brand {
    color: var(--primary) !important;
  }

  .nav-link {
    color: #ddd !important;
  }

  .nav-link:hover {
    color: var(--primary-hover) !important;
  }
}