/* ==========================================================
   HEADER OVERRIDES – konsolidiert & konfliktfrei - av2.de
   ========================================================== */
/* ==========================================================
   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: #fffaf0;   /* etwas wärmer, leicht dunkler */
  --card-bg: #f5f2ee;   /* warmes, neutrales Hellbeige */
  --muted-border: #d0c7b8;   /* etwas dunkler, warm */
  --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.12);
--shadow-strong: 0 10px 30px rgba(0,0,0,0.18);
}

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

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

body {
  margin: 0;
  background: 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.05), rgba(0,0,0,0.15)), #1c1b19;

  border-radius: 0.9rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-strong);

  font-family: var(--serif);
  color: #e0dcd5;
  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 !important;
  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;
  color: #2a2520; /* warm, gut lesbar */
}

.snippet-top footer {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #6a5f55;
  opacity: 0.85;
  text-align: right;
}

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

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

/* 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: #4a4642;
  opacity: 0.95;
  letter-spacing: 0.2px;
}

/* Optional: etwas weicherer Ton */
.text-snippet-intro em {
  color: #5c534c;
}


/* ==========================================================
   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;
   var(--paper-bg)!important; 
  border-left: 4px solid var(--primary);
  --primary: #0c63e4;   /* minimal wärmeres Blau */


  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 – Light Mode
   =============================== */

.footer-av2 {
  background-color: #eef3f8;   /* leichtes Hell-Blaugrau */
  color: #1f2933;              /* dunkles Blau-Grau, sehr gut lesbar */

  border-top: 1px solid #d6e0ea;
}
/* ===============================
   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: 3
/* ===============================
   5. Counter
   =============================== */
/* ----------------------------------------------------------
   Footer – Seitenzähler
   ---------------------------------------------------------- */

.footer-counter {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6c757d; /* Bootstrap text-muted */
  opacity: 0.9;
  line-height: 1.3;
}

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

/* ==========================================================
   MOBILE & ACCESSIBILITY – Optimale Darstellung auf Handys
   ========================================================== */

/* ===============================
   Reduced Motion – Barrierefreiheit
   =============================== */
/* ===============================
   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-av2 {
  background-color: #fff1d0 !important;
  color: #1f1e00 !important;
  border-top: 1px solid #333;
  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-av2 {
    padding: 3rem 2rem;
    font-size: 1rem;
  }
}
/* ==========================================================
   DARK MODE – Automatisch, systemabhängig
   ========================================================== */

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

  /* ===============================
     Grundfarben
     =============================== */
  :root {
  /* Hintergrund */
  --dm-site-bg: #121212;
  --paper-bg: #1e1d1b;
  --card-bg: #262522;

  /* TEXT – entscheidend */
:root {
  --dm-text-main: #f0ede7;     /* Haupttext – warmes Hell */
  --dm-text-muted: #b8b4ad;   /* Meta / Footer / Hinweise */

  --dm-link: #7cd3ff;         /* gut sichtbar, nicht grell */
  --dm-link-hover: #9be2ff;   /* Hover */
  --dm-link-visited: #b4a7ff; /* besucht */
 
 --dm-text-soft: #cfcac2;      /* Sekundär */
  /* Akzente */
  --primary: #78b9ff;
  --primary-hover: #9dccff;
  --bs-info: #8fd6ff;

  --muted-border: #3a3835;
}

  body {
  background: var(--dm-site-bg);
  color: var(--dm-text-main);
}
/* ===============================
   Text-Hierarchie – Dark Mode
   =============================== */

/* ===============================
   Text-Hierarchie – Dark Mode
   =============================== */

/* Fließtext & Überschriften */
p,
li,
blockquote,
h1, h2, h3, h4, h5, h6 {
  color: var(--dm-text-main);
}

/* Links – klar sichtbar, nicht grell */
a {
  color: var(--dm-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Link-Zustände */
a:hover {
  color: var(--dm-link-hover);
}

a:visited {
  color: var(--dm-link-visited);
}

/* Meta / sekundärer Text */
.text-muted,
footer,
.snippet-top footer {
  color: var(--dm-text-muted);
}


  /* ===============================
     Header
     =============================== */
  .site-struktur {
    background: #1a1a1a;
    color: var(--dm-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: #242321;
  border: 1px solid #3a3835;
  color: #e6e6e6;
}
.nav-button:hover {
  background: #2e2d2b;
  color: var(--primary);
}
  .nav-button:active {
    background: #1f1f1f;
    color: var(--primary-hover);
  }
  /* ===============================
     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(--dm-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 – Dark Mode (optimiert)
   =============================== */
.footer-av2 {
  background-color: #181716 !important;   /* warmes Dunkelbraun-Anthrazit */
  color: #e6e3dd !important;              /* warmes Hellgrau */
  border-top: 1px solid #2e2c2a;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.45);
}

.footer-av2 a {
  color: var(--dm-text-muted);
}

.footer-av2 a:hover {
  color: var(--dm-link);
}


/* ===============================
   Footer-News – Highlight-Bereich
   =============================== */
.footer-news {
  background-color: #1f1d1b !important;   /* etwas heller als Footer */
  color: #ffbfa3 !important;                         /* warmes Terracotta */
  box-shadow:
    inset 0 -8px 16px rgba(0,0,0,0.45),
    0 3px 6px rgba(0,0,0,0.35);
}

/* ===============================
   Divider
   =============================== */
.footer-divider {
  border-top: 1px solid #2e2c2a;
}
  /* ===============================
     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;
  }
}