/* ==========================================================================
   DATEI: style.css | VERSION: 2.5 (Teil 1 von 5)
   ========================================================================== */

/* 1. WALLPAPER-HINTERGRUND & TEXTFARBE
   ========================================================================== */
body {
  background: linear-gradient(rgba(247, 219, 178, 0.35), rgba(247, 219, 178, 0.35)),
              url('herbstlaub.png') repeat;
  background-size: 350px auto;
  background-attachment: fixed;
  font-family: system-ui, -apple-system, sans-serif;
  color: #3d240d;
  padding: 20px 10px;
  line-height: 1.5;
}

.content-wrapper {
  max-width: 900px; margin: 10px auto; padding: 30px;
  background: rgba(255, 255, 255, 0.78); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(61, 36, 13, 0.15); backdrop-filter: blur(10px);
  overflow: visible; position: relative; transition: padding-top 0.3s ease-in-out;
}

input[type="radio"] { display: none; }

/* ==========================================================================
   2. KLASSENLOSE, RESPONSIVE ÜBERSCHRIFTEN & UNTERTITEL
   ========================================================================== */
.content-wrapper h1 {
  font-size: 2.6rem; font-weight: 800; text-align: center; margin: 0;
  background: linear-gradient(135deg, #b83227, #d35400);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  word-wrap: break-word; word-break: break-word; hyphens: auto;
  transition: margin-top 0.3s ease-in-out;
}

/* Der allererste Absatz direkt nach <h1> wird automatisch zum Untertitel */
.content-wrapper h1 + p {
  text-align: center; color: #7e5124; font-weight: 600; margin: 4px 0 16px 0; font-size: 1.1rem;
}

.content-wrapper h2 {
  font-size: 1.5rem; margin: 35px 0 12px 0; color: #874719;
  border-bottom: 2px solid rgba(211, 84, 0, 0.15); padding-bottom: 3px;
}

.content-wrapper h3 { font-size: 1.2rem; color: #a04000; margin: 20px 0 8px 0; }
.content-wrapper h4 { font-size: 1.05rem; margin: 15px 0 5px 0; color: #ba4a00; font-weight: 700; }
p { margin-bottom: 12px; }

/* ==========================================================================
   3. LOGISCHE WEICHEN-TRENNUNG FÜR DIE UMSCHALT-BUTTONS
   ========================================================================== */
.view-switcher-box { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 8px; margin-bottom: 24px; }
.switcher-buttons-row { display: flex; flex-direction: row; justify-content: center; gap: 10px; width: 100%; }

.switch-btn {
  font-size: 0.75rem; padding: 5px 12px; border-radius: 20px; font-weight: bold; cursor: pointer; transition: 0.2s;
  color: #874719; background: rgba(115, 66, 22, 0.06); border: 1px solid rgba(211, 84, 0, 0.15);
}
.switch-btn:hover { background: rgba(135, 71, 25, 0.15); }

#view-classic:checked ~ .content-wrapper .label-classic { background: rgba(135, 71, 25, 0.15); border-color: #874719; }
#view-modern:checked ~ .content-wrapper .label-modern { background: rgba(135, 71, 25, 0.15); border-color: #874719; }

.desktop-switcher-only { display: flex; }
.mobile-switcher-only { display: none; }
.desktop-switcher-notice { display: block; font-size: 0.75rem; font-weight: 600; color: #874719; text-align: center; margin-top: 4px; }

/* ==========================================================================
   4. DESKTOP-NAVIGATION & SCHWEBENDE LAPTOP-KAPSEL
   ========================================================================== */
.main-navigation {
  max-width: 100%; margin: 0 auto 24px auto;
  background: rgba(135, 71, 25, 0.04); border: 1px solid rgba(135, 71, 25, 0.12); border-radius: 8px; padding: 8px;
}
.nav-container { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.nav-links { display: flex; gap: 6px; }

.nav-item {
  color: #874719; background: rgba(135, 71, 25, 0.12); border: 1px solid #874719;
  text-decoration: none; font-weight: bold; padding: 6px 14px; font-size: 0.95rem; border-radius: 4px; transition: all 0.2s ease;
}
.nav-item:hover, .nav-item.active { background: #ffcc00 !important; color: #3d240d !important; border-color: #874719; }

@media (min-width: 769px) {
  #view-modern:checked ~ .content-wrapper { backdrop-filter: none !important; background: rgba(255, 255, 255, 0.93); padding-top: 135px; }
  #view-modern:checked ~ .content-wrapper h1 { margin-top: 65px; }
  #view-modern:checked ~ .content-wrapper .desktop-switcher-notice { display: none !important; }

  #view-modern:checked ~ .content-wrapper .desktop-switcher-only {
    position: fixed; top: 25px; left: 50%; transform: translateX(-50%); width: calc(100% - 60px); max-width: 650px; z-index: 3000; margin: 0;
  }
  #view-modern:checked ~ .content-wrapper .main-navigation {
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: calc(100% - 60px); max-width: 650px; z-index: 2999; margin: 0;
    padding: 55px 12px 12px 12px; background: rgba(255, 255, 255, 0.98); border: 2px solid #874719; box-shadow: 0 10px 28px rgba(61, 36, 13, 0.23); border-radius: 24px;
  }
}

.hamburger-icon-label, .hamburger-checkbox { display: none; }

/* ==========================================================================
   ENDE TEIL 1 VON 5 (style.css | Version 2.5)
   ========================================================================== */


/* ==========================================================================
   DATEI: style.css | VERSION: 2.5 (Teil 2 von 5)
   ========================================================================== */

/* 5. INTELIGENTER BILD-ZOOM FÜR KLASSENLOSE BILDER (.content-wrapper img)
   ========================================================================== */
.content-wrapper img {
  display: block;
  margin: 30px auto;
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(61, 36, 13, 0.12);
  position: relative;
  z-index: 10;
  transition: width 0.35s ease-in-out, box-shadow 0.35s ease;
}

@media (hover: hover) {
  .content-wrapper img:hover {
    width: min(100vw - 80px, 999px);
    max-width: none;
    box-shadow: 0 15px 40px rgba(61, 36, 13, 0.35);
    z-index: 99;
  }
}

/* ==========================================================================
   6. DYNAMISCHE HINWEIS-INFOBOX (TEXT-BOX ? INFO-LOGO LOGIK)
   ========================================================================== */
.mobile-info-toggle-box {
  display: none;
  margin: 10px auto 20px auto;
  text-align: center;
  width: 100%;
}

.info-close-checkbox {
  display: none;
}

body:has(.content-wrapper img) .mobile-info-toggle-box {
  display: block;
}

.mobile-image-note-global {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #874719;
  background: rgba(135, 71, 25, 0.05);
  border: 1px dashed rgba(135, 71, 25, 0.2);
  padding: 8px 14px;
  border-radius: 6px;
  max-width: 550px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.info-close-btn {
  font-size: 0.85rem;
  font-weight: bold;
  color: #874719;
  cursor: pointer;
  padding: 2px 6px;
}

.info-restore-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 0.85rem;
  color: #874719;
  background: rgba(135, 71, 25, 0.08);
  border: 1px solid rgba(135, 71, 25, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}

.info-restore-logo:hover {
  background: #ffcc00;
  color: #3d240d;
  border-color: #874719;
}

@media (min-width: 769px) {
  .mobile-image-note-global { display: none; }
  .info-restore-logo { display: inline-flex; }
  .info-close-checkbox:checked ~ .mobile-image-note-global { display: flex; }
  .info-close-checkbox:checked ~ .info-restore-logo { display: none; }
}

@media (max-width: 768px) {
  .mobile-image-note-global { display: flex; }
  .info-restore-logo { display: none; }
  .info-close-checkbox:checked ~ .mobile-image-note-global { display: none !important; }
  .info-close-checkbox:checked ~ .info-restore-logo { display: inline-flex; }
}

/* ==========================================================================
   ENDE TEIL 2 VON 5 (style.css | Version 2.5)
   ========================================================================== */



/* ==========================================================================
   DATEI: style.css | VERSION: 2.5 (Teil 3 von 5)
   ========================================================================== */

/* 7. KLASSENLOSE TEXTAUSZEICHNUNGEN & HYPERLINKS
   ========================================================================== */
.content-wrapper strong {
  color: #874719;
  font-weight: 700;
}

.content-wrapper em,
.content-wrapper i {
  color: #7e5124;
  font-style: italic;
}

.content-wrapper blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-left: 4px solid #d35400;
  background: rgba(135, 71, 25, 0.03);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #5c3a1a;
}

.content-wrapper code {
  font-family: monospace, sans-serif;
  font-size: 0.88rem;
  background: #fdf5e6;
  color: #874719;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(211, 84, 0, 0.15);
}

a, a:visited {
  color: #874719 !important;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(230, 126, 34, 0.4);
  position: relative;
  transition: all 0.2s ease;
}

a:hover, a:visited:hover {
  color: #d4af37 !important;
  border-bottom: 1px solid #b8860b;
}

a[href^="mailto:"]::before {
  content: '\2709\A0';
  font-size: 0.9rem;
  color: #874719;
}

/* ==========================================================================
   8. LAVA-BUTTON (POSTGELB HOVER KONZEPT)
   ========================================================================== */
.button-section { text-align: center; margin: 30px 0; position: relative; z-index: 5; }
.lantern-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; font-family: 'Arial Black', sans-serif; font-weight: 900;
  font-size: clamp(1rem, 4vw, 1.3rem); border-radius: 50px; border: 3px solid #e74c3c;
  max-width: 100%; box-sizing: border-box; word-wrap: break-word; transition: transform 0.2s ease;
  background: linear-gradient(135deg, #d35400, #c0392b); padding: 14px clamp(16px, 4vw, 40px);
  box-shadow: 0 4px 15px rgba(230,126,34,0.6); will-change: box-shadow, transform;
  animation: fire-flicker-stable 1.2s infinite alternate ease-in-out;
  color: #ffffff !important; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6) !important;
  filter: drop-shadow(0 0 3px rgba(255, 245, 180, 0.7));
}
.lantern-button::before, .lantern-button::after { content: none !important; }

@keyframes fire-flicker-stable {
  0% { box-shadow: 0 3px 12px rgba(211, 84, 0, 0.5), 0 0 10px rgba(230, 126, 34, 0.2); transform: scale(0.99); }
  100% { box-shadow: 0 6px 25px #e67e22, 0 0 20px #f1c40f; transform: scale(1.02); }
}

@media (hover: hover) {
  @keyframes magma-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
  .lantern-button:hover {
    border-color: #f1c40f; background: linear-gradient(45deg, #c0392b, #d35400, #f39c12, #e67e22);
    background-size: 300% 300%; animation: magma-flow 3s ease infinite;
    color: #ffcc00 !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
  }
}
.lantern-button:active { animation: none !important; transform: scale(0.95); background: #c0392b; }

/* ==========================================================================
   9. KLASSENLOSE TABELLEN & STANDARD-LISTEN
   ========================================================================== */
.content-wrapper table {
  width: 100%; margin: 25px 0; border-collapse: collapse; font-size: 0.95rem;
  box-shadow: 0 4px 15px rgba(61, 36, 13, 0.05); border-radius: 8px; overflow: hidden;
}
.content-wrapper th { background-color: #874719; color: #ffffff; text-align: left; padding: 12px 16px; font-weight: bold; }
.content-wrapper td { padding: 12px 16px; border-bottom: 1px solid rgba(135, 71, 25, 0.1); color: #3d240d; }
.content-wrapper tr:nth-child(even) { background-color: rgba(253, 245, 230, 0.5); }
.content-wrapper tr:hover { background-color: rgba(212, 175, 55, 0.08); }

.content-wrapper ul:not([class]),
.content-wrapper ol:not([class]) {
  margin: 12px 0 20px 24px; padding: 0; color: #3d240d;
}
.content-wrapper ul:not([class]) li,
.content-wrapper ol:not([class]) li { margin-bottom: 6px; }
.content-wrapper ul:not([class]) li::marker,
.content-wrapper ol:not([class]) li::marker { color: #874719; font-weight: bold; }

/* ==========================================================================
   ENDE TEIL 3 VON 5 (style.css | Version 2.5)
   ========================================================================== */


/* ==========================================================================
   DATEI: style.css | VERSION: 2.5 (Teil 4 von 5)
   ========================================================================== */

/* 10. ALTERNATIVE LISTEN-DESIGN-VARIANTEN (.list-subtle & .list-fiery)
   ========================================================================== */
.list-container { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 15px; }
.list-box { flex: 1; min-width: 250px; background: rgba(115, 66, 22, 0.03); padding: 15px; border-radius: 8px; }
.list-subtle, .list-fiery { list-style: none; padding: 0; margin: 0; }

.list-subtle li {
  padding: 8px; border-left: 3px solid #e67e22; background: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px; border-radius: 0 4px 4px 0; transition: padding-left 0.3s ease, background-color 0.3s ease;
}
.list-subtle li:hover { padding-left: 14px; background-color: rgba(212, 175, 55, 0.1); }

.list-fiery li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(211, 84, 0, 0.1); margin-bottom: 6px; border-radius: 6px; transition: all 0.3s ease;
}
.list-fiery li::before {
  content: '\1F525'; display: inline-block; font-size: 1.1rem; margin-right: 4px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.list-fiery li:hover { background-color: rgba(255, 255, 255, 0.8); border-color: #d4af37; box-shadow: 0 4px 12px rgba(135, 71, 25, 0.1); }
.list-fiery li:hover::before { transform: scale(1.3) rotate(10deg); }

/* ==========================================================================
   11. REGIONAL-SUCHE (.tag-cloud & .tag-item)
   ========================================================================== */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-item {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 0.78rem;
  font-weight: 700; color: #874719; background: #fdf5e6; padding: 6px 14px; border-radius: 20px;
  border: 1px solid rgba(211, 84, 0, 0.12); transition: all 0.2s ease;
}
.tag-item::before { content: '\1F50D'; font-size: 0.75rem; opacity: 0.7; transition: transform 0.2s ease; }
.tag-item:hover { background: #ffcc00 !important; color: #3d240d !important; border-color: #874719; transform: translateY(-1px); }
.tag-item:hover::before { transform: scale(1.1) rotate(10deg); opacity: 1; }

/* ==========================================================================
   12. INTERAKTIVE ARCHIV-NAVIGATION (.archiv -> .dezent | .rot | .gelb)
   ========================================================================== */
.archiv {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin: 22px auto 30px auto; padding: 8px 14px; max-width: 440px;
  background: rgba(135, 71, 25, 0.05); border: 1px solid rgba(135, 71, 25, 0.15); border-radius: 30px;
}

.archiv .links,
.archiv .mitte,
.archiv .rechts {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 22px; font-size: 0.95rem; font-weight: 700;
  text-decoration: none; transition: all 0.25s ease;
}

.archiv .links::before { content: '\00AB'; display: inline-block; transition: transform 0.25s ease; }
.archiv a.links:hover::before { transform: translateX(-5px); }

.archiv .rechts::after { content: '\00BB'; display: inline-block; transition: transform 0.25s ease; }
.archiv a.rechts:hover::after { transform: translateX(5px); }

.archiv .mitte { cursor: default; }

/* Variante 1: Dezent (.archiv.dezent) */
.archiv.dezent .links,
.archiv.dezent .mitte,
.archiv.dezent .rechts { color: #874719 !important; border: 1px solid rgba(135, 71, 25, 0.3); }
.archiv.dezent .links { background: linear-gradient(to left, #fffdf9, #f7c97e); }
.archiv.dezent .rechts { background: linear-gradient(to right, #fffdf9, #f7c97e); }
.archiv.dezent .mitte {
  background: linear-gradient(135deg, #fffdf9, #f7c97e); color: #5c3a1a !important;
  border: 2px solid #d35400; animation: pulsDezent 2.2s infinite alternate ease-in-out;
}
.archiv.dezent a.links:hover,
.archiv.dezent a.rechts:hover {
  background: #ffcc00 !important; color: #3d240d !important; border-color: #874719;
  box-shadow: 0 4px 10px rgba(61, 36, 13, 0.15);
}
@keyframes pulsDezent {
  0% { box-shadow: 0 0 4px rgba(211, 84, 0, 0.2); transform: scale(0.99); }
  100% { box-shadow: 0 0 14px rgba(230, 126, 34, 0.65), 0 0 6px #ffcc00; transform: scale(1.03); }
}

/* Variante 2: Rot dominant (.archiv.rot) */
.archiv.rot { background: rgba(231, 76, 60, 0.1); border-color: rgba(211, 84, 0, 0.3); }
.archiv.rot .links,
.archiv.rot .mitte,
.archiv.rot .rechts {
  color: #ffffff !important; text-shadow: 1px 1px 2px rgba(61, 36, 13, 0.65); border: 1px solid #b83227;
}
.archiv.rot .links { background: linear-gradient(to left, #f39c12, #e74c3c); }
.archiv.rot .rechts { background: linear-gradient(to right, #f39c12, #e74c3c); }
.archiv.rot .mitte {
  background: linear-gradient(135deg, #f39c12, #e74c3c); border: 2px solid #ffcc00;
  animation: pulsRot 2.2s infinite alternate ease-in-out;
}
.archiv.rot a.links:hover,
.archiv.rot a.rechts:hover {
  background: #ffcc00 !important; color: #3d240d !important; text-shadow: none;
  border-color: #d35400; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}
@keyframes pulsRot {
  0% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.45); transform: scale(0.99); }
  100% { box-shadow: 0 0 16px rgba(231, 76, 60, 0.85), 0 0 8px #ffcc00; transform: scale(1.03); }
}

/* Variante 3: Gelb dominant (.archiv.gelb) */
.archiv.gelb { background: rgba(255, 204, 0, 0.16); border-color: rgba(211, 84, 0, 0.35); }
.archiv.gelb .links,
.archiv.gelb .mitte,
.archiv.gelb .rechts { color: #3d240d !important; border: 1px solid #d35400; }
.archiv.gelb .links { background: linear-gradient(to left, #fff8dc, #ffcc00); }
.archiv.gelb .rechts { background: linear-gradient(to right, #fff8dc, #ffcc00); }
.archiv.gelb .mitte {
  background: linear-gradient(135deg, #fff8dc, #ffcc00); border: 2px solid #e74c3c;
  animation: pulsGelb 2.2s infinite alternate ease-in-out;
}
.archiv.gelb a.links:hover,
.archiv.gelb a.rechts:hover {
  background: #e74c3c !important; color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(61, 36, 13, 0.5); border-color: #874719;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}
@keyframes pulsGelb {
  0% { box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); transform: scale(0.99); }
  100% { box-shadow: 0 0 16px rgba(255, 204, 0, 0.95), 0 0 8px #e74c3c; transform: scale(1.03); }
}

/* Inaktiver Zustand für Randjahre */
.archiv .disabled {
  background: rgba(135, 71, 25, 0.04) !important; color: rgba(135, 71, 25, 0.35) !important;
  text-shadow: none !important; border: 1px dashed rgba(135, 71, 25, 0.2) !important; cursor: not-allowed;
}

/* ==========================================================================
   ENDE TEIL 4 VON 5 (style.css | Version 2.5)
   ========================================================================== */


/* ==========================================================================
   DATEI: style.css | VERSION: 2.5 (Teil 5 von 5)
   ========================================================================== */

/* 13. MOBILGERÄTE-STEUERUNG (BEWÄHRTES OVERLAY & KLASSENLOSE TABELLEN)
   ========================================================================== */
@media (max-width: 768px) {
  .content-wrapper { padding: 15px; margin: 5px; }
  .content-wrapper h1 { font-size: 1.6rem; }
  .lantern-button { width: 100%; font-size: 1.1rem; }
  .content-wrapper img { pointer-events: none; width: 100%; }

  /* Logische Trennungs-Schaltung für Smartphones */
  .desktop-switcher-only { display: none !important; }
  .mobile-switcher-only { display: flex !important; margin-bottom: 12px; width: 100%; }

  /* Variante 1: Standard-Ansicht (Links offen untereinander gelistet) */
  #view-classic:checked ~ .content-wrapper .main-navigation .nav-links {
    display: flex; flex-direction: column; text-align: center; margin-top: 15px;
  }
  #view-classic:checked ~ .content-wrapper .main-navigation .hamburger-icon-label { display: none !important; }

  /* Hebelt die position:fixed Blockierung im Kompaktmodus aus */
  #view-modern:checked ~ .content-wrapper {
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.93);
  }

  /* Variante 2: Das echt schwebende Eck-Menü oben rechts */
  #view-modern:checked ~ .content-wrapper .main-navigation {
    position: fixed; top: 15px; right: 15px; z-index: 2999; width: auto; max-width: max-content; background: none; border: none; padding: 0; margin: 0;
  }
  #view-modern:checked ~ .content-wrapper .main-navigation .nav-container { display: flex; flex-direction: column; align-items: flex-end; }

  /* Postgelber Kreis-Hamburger mit drei roten Linien */
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-icon-label {
    display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 44px; height: 44px; background: #ffcc00; border: 2px solid #b83227; border-radius: 50%; cursor: pointer;
    box-shadow: 0 4px 12px rgba(61, 36, 13, 0.25); z-index: 3001; position: relative;
  }
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-icon-label span {
    display: block; width: 18px; height: 3px; background: #b83227; border-radius: 2px; transition: 0.2s;
  }

  /* Schwebendes Overlay mit integriertem Mobil-Umschalter */
  #view-modern:checked ~ .content-wrapper .main-navigation .nav-links {
    display: none; flex-direction: column; gap: 6px; width: calc(100vw - 50px); max-width: 280px;
    background: rgba(255, 255, 255, 0.98); border: 2px solid #874719; padding: 12px;
    border-radius: 8px; box-shadow: 0 6px 18px rgba(61, 36, 13, 0.2); margin-top: 8px; text-align: left; box-sizing: border-box;
  }

  #view-modern:checked ~ .content-wrapper .main-navigation .nav-item {
    color: #874719; background: rgba(135, 71, 25, 0.06); border: 1px solid transparent; width: 100%; display: block; padding: 8px 12px; box-sizing: border-box;
  }
  #view-modern:checked ~ .content-wrapper .main-navigation .nav-item:hover,
  #view-modern:checked ~ .content-wrapper .main-navigation .nav-item.active {
    background: #ffcc00 !important; color: #3d240d !important; border-color: #874719;
  }

  /* Direkter Klick-Sensor öffnet die Link-Box mobil unfehlbar */
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-checkbox:checked ~ .nav-links {
    display: flex !important;
  }

  /* Kreuz-Animation beim geöffneten Menü */
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-checkbox:checked ~ .hamburger-icon-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #b83227; }
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-checkbox:checked ~ .hamburger-icon-label span:nth-child(2) { opacity: 0; }
  #view-modern:checked ~ .content-wrapper .main-navigation .hamburger-checkbox:checked ~ .hamburger-icon-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #b83227; }

  /* KLASSENLOSES TABELLEN-WISCHEN AUF SMARTPHONES */
  .content-wrapper table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-right: 3px dashed #d4af37;
  }

  /* Kompakte Archiv-Kapsel auf schmalen Smartphones */
  .archiv { gap: 6px; padding: 6px 8px; }
  .archiv .links,
  .archiv .mitte,
  .archiv .rechts { padding: 8px 6px; font-size: 0.85rem; }
}

/* ==========================================================================
   ENDE TEIL 5 VON 5 (style.css | Version 2.5 – GESAMTCODE VOLLSTÄNDIG)
   ========================================================================== */