/* n-design.css 


1. BASIS 
2. REITER-NAVIGATION IN ARTIKEL.PHP 
3. NAVBAR 
4. Rezepte 
5. AUFTEILUNG DER ARTIKELSEITN
6. Artikel-Kopf
7. Gliederung im artikel tab: Text und index 
8. automatisches Inhaltsverzeichnis
9. intext-Bilder
10. Suchrgebnisse auf suchergebnis_volltext.php
11. SOCIAL ICON im footer
12. SLIDER
13. ARTIKEL-EMPFEHLUNGEN in <aside>
14. Kommentarbox 
15. Reitertab: Quellen
16. schieberegler (in astronomie)
17. Footer
18. Typografie 
19. Listenstile
20. Links und Buttons
 */



/*   -----------  */
/*    1. BASIS    */
/*   -----------  */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
--color-textseite: #FEFBF7; 
--color-paper: #F9F2EA;
--color-paper-darker: #F1E0CC;
--color-paper-darkest: #E1BC90;
--color-ink: #1A1A1A;
--color-rubric: #A52A2A;
--color-tinte-rezept: #5D4037;
--color-stumpfgruen: #2a9643;

--wave-color-1: #f3e3d1;
--wave-color-2: #ecd2b3;
--wave-color-3: #e6c29f;

    /* Typografie  */
    --font-main: 'Crimson Text', serif; 
    --fs-base: 20px;
    
    /* Layout-Konstanten */
    --max-width-content: 850px;  /* Begrenzung der Zeilenlänge  */
    --gap-standard: 1.5rem;

    /* Layout-Maße */
    --site-max-width: 1500px;    /* Gesamtbreite inkl. Randbereiche */
    --content-max-width: 80ch;   /* Die "goldene" Lesebreite für den Text */
    --sidebar-width: 300px;      /* Feste Breite für deine Quellen/Marginalien */
    --sticky-header-height: 50px;
    /* Abstände */
    --p-padding: 2rem;           /* Der "Satzspiegel"-Rand */
}

html {
overflow-x: hidden; 
scroll-behavior: smooth;
}

body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: 'Crimson Text', serif;
    font-size: var(--fs-base);
    line-height: 1.2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#n-site-wrapper {/* umhüllt Inhalte innerhalb von <main> und <footer>*/
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--p-padding);
    background-color: var(--color-paper);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*   -------------------------------------  */
/*    2. REITER-NAVIGATION IN ARTIKEL.PHP    */
/*   -------------------------------------  */

.v2-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border-bottom: 1px solid var(--color-tinte-rezept);
    top: 0;
    background-color: var(--color-paper);
    z-index: 10;
}

.v2-tab-button {
    background-color: var(--color-paper-darker);
    border: 1px solid var(--color-ink);
    padding: 10px 18px;
    font-family: inherit;
        font-size: 1.1rem;
    cursor: pointer;
    margin-bottom: -1px;
    color: var(--color-tinte-rezept);
    transition: background-color 0.3s ease-in-out;
}

.v2-tab-button.active {
    background-color: var(--color-textseite);
    border: 1px solid var(--color-rubric);
    border-bottom-color: var(--color-textseite);
    margin-bottom: -2px;
    padding-top: 15px;
    margin-top: -5px;
    position: relative;
    z-index: 1;
    font-weight: bold;
    color: var(--color-ink)
}

/* 2. Der Mouseover-Effekt für die inaktiven Tabs */
.v2-tab-button:hover {
    background-color: var(--color-paper); 
    color: var(--color-ink);
}

/* 3. Der aktive Tab (sollte beim Hover meist stabil bleiben) */
.v2-tab-button.active:hover {
    cursor: default;
    background-color: var(--color-textseite)
}

/* 1. Grundsätzlich alle Tab-Inhalte verstecken */
.v2-tab-content {
    display: none;
}

/* 2. Nur den Inhalt anzeigen, der die Klasse 'active' hat */
.v2-tab-content.active {
    display: block;
    background-color: var(--color-textseite);
    padding: 20px;
    border: 1px solid var(--color-rubric);
}

/*   ------------  */
/*    3. NAVBAR    */
/*   ------------  */

.n-navbar-zierbalken {
background-color: var(--color-rubric);
height: 8px;
width: 100%;
align-self: stretch;
}

.n-navbar-anmeldebalken {
background-color: var(--color-paper-darkest);
width: 100%;
align-self: stretch;
display: flex;
justify-content: flex-end;
}

.n-navbar-anmeldebalken a {
color: var(--color-ink);
font-family: 'Crimson Text', serif;
font-size: 1.1rem;
text-decoration: none;
transition: color 0.2s;
display: inline-block; /* macht aus der Schrift eine Fläche, die farblich reagieren kann */
transition: color 0.2s, background-color 0.2s;
padding: 6px 10px;
margin-right: 18px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.n-navbar-anmeldebalken a:hover {
color: var(--color-paper);
background-color: var(--color-rubric);
}

.n-navbar-main {
width: 100%;
background-color: var(--color-paper-darkest);
align-self: stretch;
display: flex;
align-items: center;
justify-content: space-between; /* Logo links, Suchbereich rechts, Nav dazwischen */
padding: 0 1rem;
}

/* Direkte Ansprache des SVG-Elements im Logo */
.farbe1 {
fill: var(--color-ink);
transition: fill 0.3s ease;
}

/* das Logo wird noch ein µ nach obeeen korrigiert */
.logo-svg {
    position: relative;
    top: -2px;
}

/* Hover-Effekt direkt auf das Element oder das übergeordnete SVG */
.logo-svg:hover .farbe1 {
fill: var(--color-paper);
}

.n-navbar-main-topics {
flex: 1;
display: flex;
align-items: center;
}

.n-navbar-main-ul {
display: flex;
list-style: none;
gap: 5px;
align-items: center;
margin-top: -5px; /* Hebt die gesamte Liste an */
}

.n-navbar-main-item a {
display: block; /* Damit der ganze Bereich klickbar ist */
color: var(--color-ink); 
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
font-family: 'PinselSchrift';
font-size: 1.5rem;
padding: 10px 18px;
}

.n-navbar-main-item a:hover {
color: var(--color-paper);
}

.n-search-form {
display: flex;
align-items: stretch; /* Input und Button gleich hoch  */
}

.n-search-input {
padding: 6px 10px;
font-size: 1rem;
width: 150px; 
border: 1px solid var(--color-rubric); 
border-radius: 4px 0 0 4px;
background-color: var(--color-paper);
transition: border-color 0.2s, width 0.3s; 
}

.n-search-input:focus {
border-color: var(--color-paper-darkest);
width: 200px; 
outline: none;
background-color: var(--color-paper);
}

.n-search-button {
padding: 6px 12px;
background-color: var(--color-paper-darker);
border: 1px solid var(--color-rubric);
border-left: none; 
color: var(--color-ink);
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.2s;
}

.n-search-button:hover {
background-color: var(--color-rubric);
color: var(--color-paper);
}

   /* Mobile Menu Toggle */
.mobile-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #333;
            padding: 5px;
}


        /* Responsive */
@media (max-width: 968px) {

.mobile-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--color-ink);  
        padding: 5px;
        transition: transform 0.3s ease;
    }

    .mobile-toggle.active {
        transform: rotate(90deg);
    }

    /* Klassen verstecken */
    .n-navbar-main-topics {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-paper-darkest);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .n-navbar-main-topics.active {
        display: block;
    }

    .n-navbar-main-ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .n-navbar-main-item {
        width: 100%;
    }

    .n-navbar-main-item a {
        width: 100%;
        padding: 15px;
    }

    .n-search-input {
        width: 150px;
    }

 .main-nav.active {
                display: block;
}

.nav-item {
                width: 100%;
}

.search-input {
                width: 150px;
}
}

@media (max-width: 640px) {
.header-content {
                flex-wrap: wrap;
            }

.search-area {
                order: 3;
                width: 100%;
                margin-top: 10px;
            }

            .search-form {
                width: 100%;
            }

            .search-input {
                width: 100%;
            }

            .user-bar {
                display: none;
            }
        }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-paper-darkest);
  flex-direction: column;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 0; 
  padding-top: 0; 
}

/* Mobile Menu soll DIREKT unter der Navbar starten */
@media (max-width: 968px) {
  .mobile-menu {
    top: var(--navbar-height, 120px); 
  }
}

.mobile-menu.active {
  display: flex;
}

.mobile-menu a {
  padding: 1.2rem 2rem;
  color: var(--color-paper); 
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.mobile-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu a:last-child {
  border-bottom: none;
}


/*   -----------------  */
/*    4. Rezepte     */
/*   -----------------  */

.eingerueckt {
margin-left: 20px;
border: 1px solid var(--color-ink);
padding: 10px;
list-style-position: inside;
}

.rezept-block { /* neu: mit Papierrand-Effekt */
  display: flex;
  flex-wrap: wrap;
  padding: 25px; 
  margin: 20px 0;
  box-sizing: border-box;
  position: relative; 
  background: transparent; 
  z-index: 1;
}

/*  das "Papier", das unter dem Text liegt */
.rezept-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-paper, #f1e0cc);
  filter: url(#tear) drop-shadow(4px 4px 6px rgba(0,0,0,0.25));  /* #tear liegt in der svg, die im footer geladen wird1*/
  z-index: -1;
  pointer-events: none; 
}

.rezept-block h3, .rezept-block ul {
  padding-left: 40px;
  position: relative; 
}

.zutaten {
flex: 0 0 150px; 
min-width: 150px; 
border-right: 1px solid var(--color-tinte-rezept);
padding-right: 10px;
box-sizing: border-box;
font-style: italic;
font-size: 0.9em;
}

/* Ausnahme von .rezept-block ul ! */
.zutaten ul {
padding-left: 0;
}

.anweisung {
flex: 1 1 300px; 
min-width: 300px;
padding-left: 10px;
box-sizing: border-box;
}

.lizenz-hinweis {
font-size: 0.7em;
color: var(--color-tinte-rezept);
text-align: right;
margin-top: 0.5em;
flex-basis: 100%;
}

.recipe-container {
font-family: 'Peisearial';
  background-color: var(--color-paper);
  box-shadow: 9px 8px 13px -3px var(--color-rubric);
  padding: 10px;
margin-left: 13%;
  margin-right: 5%;
}

.recipe-container-pur {
font-family: 'Peisearial';
}

/*   definition list für alle Rezepte  */
dl {
margin: 1em 0;
}

dt {
font-weight: bold;
margin-top: 0.5em;
}

dd {
margin-left: 1.5em; 
margin-bottom: 0.5em;
}

/*   ---------------------------------  */
/*    5. AUFTEILUNG DER ARTIKELSEITN    */
/*   ---------------------------------  */

.content-container {/* Begrenzung in der Breite- erst nach Header */
max-width: var(--site-max-width);
margin: 0 auto;
padding: 0 20px;
}

.n-inhalt-und-aside {
  display: grid;
  grid-template-columns: minmax(0, 1200px) 220px; 
  gap: 2rem;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--p-padding);
  padding-top: 10px;
}

.n-hauptinhalt {
    flex: 1;
    min-width: 0;
}

.n-aside {
    width: 215px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

/* ausblenden bei mobile */
@media (max-width: 900px) {
  .n-aside {
    display: none;
  }

    /* Das Hauptgerüst bleibt da, aber wir neutralisieren es */
.n-inhalt-und-aside, 
    .n-hauptinhalt, 
    .artikeltext, 
    .v2-tabs-main-container, 
    .artikel-grid-wrapper {
        display: block !important;
        margin: 0 !important;
        padding: 10px !important;
        width: 100% !important;
        float: none !important;
    }

    /* Alles ausblenden, was NICHT der Text ist */
    .v2-tabs-nav,
    .inhaltsverzeichnis,
    .n-aside {
        display: none !important;
    }
}

/* Einrücken aller H2/H3 etwas nach links */
.artikeltext h2,
.artikeltext h3 {
    margin-left: -0.7rem;
}


/*   ------  -----------  */
/*     6. Artikel-Kopf    */
/*   ------  -----------  */

/* Sticky Bar Basis */
.sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--sticky-header-height);
    background-color: var(--color-paper-darker);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

.sticky-bar.hidden {
    transform: translateY(-100%);
}

/* Wenn vom User weggeklickt */
.sticky-bar.dismissed {
    display: none !important;
}

.sticky-content {
    max-width: var(--site-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.sticky-title {
    font-size: 1.1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.close-sticky {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-ink);
    line-height: 1;
}

.close-sticky:hover {
    color: var(--color-rubric);
}


/*   -----------------------------------------  */
/*     7. Gliederung im artikel tab: Text und index        */
/*   -----------------------------------------  */

/* Tab-System unangetastet */
.v2-tab-content { display: none; }
.v2-tab-content.active { display: block; }

/* Grid im Wrapper, nicht am Tab selbst */
.artikel-grid-wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(0, 65ch);
  gap: 2rem;
  align-items: start;
}

/* Inhaltsverzeichnis: Sticky beim Scrollen */
.artikel-grid-wrapper .inhaltsverzeichnis {
  position: sticky;
  top: 2rem; 
  max-height: calc(100vh - 4rem); /* Nicht höher als Viewport */
  overflow-y: auto; /* Scrollbar falls zu lang */
  padding-right: 1rem; /* Luft für Scrollbar */
  top: calc(2rem + var(--sticky-header-height, 0px));
}

/* Haupttext */
.artikel-grid-wrapper .db-text {
  max-width: 65ch;
}

/* Bilder/Videos nicht rauslaufen lassen */
.artikel-grid-wrapper .db-text img,
.artikel-grid-wrapper .db-text video,
.artikel-grid-wrapper .db-text figure {
  max-width: 100%;
  height: auto;
}

/* Tablet: Inhaltsverzeichnis wird schmaler */
@media (max-width: 1100px) {
  .artikel-grid-wrapper {
    grid-template-columns: 200px minmax(0, 65ch);
    gap: 1.5rem;
  }
}

/* Mobile: Einspaltig, Inhaltsverzeichnis oben */
@media (max-width: 900px) {
  .artikel-grid-wrapper {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

    .artikel-grid-wrapper .inhaltsverzeichnis {
    position: static; /* Sticky aufheben */
    max-height: none;
    order: -1; 
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  .artikel-grid-wrapper .db-text {
    max-width: 100%; 
  }
}

/* Sehr schmale Phones */
@media (max-width: 600px) {
  .artikel-grid-wrapper {
    gap: 0.5rem;
  }
}

/*   -----------------------------------------  */
/*     8. automatisches Inhaltsverzeichnis      */
/*   -----------------------------------------  */

.inhaltsverzeichnis {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.inhaltsverzeichnis h2 {
padding-left: 20px;
}

.toc-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-ink);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin-bottom: 0.5rem;
}

.toc-list a {
  color: var(--color-ink);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.toc-list a:hover {
  color: var(--color-rubric);
  text-decoration: underline;
}

/* Einrückung für H3 */
.toc-level-3 {
  padding-left: 1rem;
  font-size: 0.9rem;
}

/* Aktiver Link  */
.toc-list a.active {
  color: var(--color-ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .inhaltsverzeichnis {
    position: static;
    margin-bottom: 2rem;
  }
}

/*   ------------------------  */
/*     9. intext-Bilder        */
/*   ------------------------  */

.image-with-license {
    display: grid;
    grid-template-columns: 1fr 14px;
    position: relative;
    width: 100%;
    margin-bottom: 1em;
}

.image-with-license img {
    display: block;
    width: 100%;
    height: auto;
}

.license-strip {
    position: relative;
    grid-column: 2;
    width: 14px;
    overflow: visible;
}

.license-content {
position: absolute;
right: 0;
bottom: 0;
transform: rotate(-90deg) translateX(100%) translateY(5px);
transform-origin: bottom right;
white-space: nowrap;
font-size: 0.8em;
color: var(--color-ink);
}

.license-details {
background-color: var(--color-paper-darker);
}

.license-details a{
 text-decoration: none;
 color: var(--color-ink);
}

.image-with-license-container,
.video-with-license-container {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid var(--color-tinte-rezept);
}

.image-wrapper,
.video-wrapper {
position: relative;
display: flex; 
width: 100%; 
overflow: hidden;
}

.image-wrapper img,
.video-wrapper video {
display: block;
width: calc(100% - 14px); /* Bild nimmt fast die gesamte Breite ein, 14px bleiben rechts frei */
height: auto;
float: left;
}

.license-info, .static-license-info {
position: absolute;
right: 0; 
bottom: 0;
transform: rotate(-90deg) translateX(100%) translateX(10px)  translateY(5px);
transform-origin: 100% 100%; 
white-space: nowrap;
font-size: 0.8rem; 
color: var(--color-ink); 
padding: 3px 0; 
box-sizing: border-box; 
width: 14px; 
display: flex; 
align-items: center; 
justify-content: flex-start; 
z-index: 11;
}

.static-license-info::before {
    content: ""; 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;    
    width: 250px; 
    background-color: var(--color-paper-darker); 
    opacity: 0.7; 
    z-index: -1; 
    transform:  translateX(100%) translateY(5px);
    transform-origin: 100% 100%; 
}

.license-info2 { 
  position: absolute;
  top: 50%; 
  right: 0;
  z-index: 4;
  color: var(--color-tinte-rezept);
  font-size: 0.8em;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: top right;
  top: -0%; 
  right: 25px;  
}

.license-info2 a, .license-info a {
  color: var(--color-tinte-rezept);
  text-decoration: none;
}

.license-info2 a:hover, .license-info a:hover {
  text-decoration: underline;
}

figcaption {
text-align: left;
font-size: 0.9rem;
color: var(--color-tinte-rezept);
margin-top: 0.1em;
padding-left: 0.5rem;
font-family: 'Crimson Text';
display: block;
background-color: var(--color-paper);
}

.image-with-license-container.small-sketch {
width: 50%;
float: right; 
margin-left: 1em; 
margin-right: 0;
}

.lizenz-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-paper);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 10px;
    opacity: 0; 
    transition: opacity 0.3s ease;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    font-size: 0.8rem;
    pointer-events: none; 
}

.artikel-item:hover .lizenz-overlay {
    opacity: 1;
}

.lizenz-overlay a {
color: var(--color-paper);
text-decoration: underline;
}

.lizenzebene {
position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
width: 100%;
  height: 100%;
  display: flex;
z-index: 10; 
  justify-content: center;
  align-items: center;
color: var(--color-paper);
  background-color: rgba(255,255,255,0.3); /* nur zum Testen */
}


/*   --------------------------------------------------  */
/*     10. Suchrgebnisse auf suchergebnis_volltext.php    */
/*   --------------------------------------------------  */

.suche-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 auto;
max-width: 900px;
padding-bottom: 20px;
}

.suche-grid-item {
background: var(--color-paper-darker);
padding: 4px;
border-radius: 12px;
border: 1px solid var(--color-paper-darkest);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: 
    box-shadow 0.3s ease, 
    border-color 0.3s ease,
    background-color 1s ease-out;
}

.suche-grid-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: var(--color-ink);
background-color: var(--color-paper-darkest);
}

.suche-item-link {
display: flex;
align-items: flex-start;
gap: 10px;
text-decoration: none;
color: inherit;
}

.suche-item {
flex: 0 0 90px;
height: 90px;
position: relative;
overflow: hidden;
border-radius: 4px; 
background-color: transparent;
}

.lazy-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.suche-titel {
margin: 0 0 8px 0;
font-size: 1.25rem;
line-height: 1.2;
}

.suche-beschreibung {
margin: 0;
font-size: 0.95rem;
color: var(--color-ink);
display: -webkit-box;
-webkit-line-clamp: 2;   /* Schneidet zu langen Text nach 2 Zeilen ab
  Wird in VS-Code als Fehler markiert, ist aber völlig ok */
-webkit-box-orient: vertical;
overflow: hidden;
}


/*   -----------------------------  */
/*     11. SOCIAL ICON im footer    */
/*   -----------------------------  */

.social-link {
display: inline-block;
align-items: center;
  text-decoration: none;
font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
white-space: nowrap;
}

.social-link .social-icon {
width: 35px;
height: 35px;
margin-right: 2px;
flex-shrink: 0;
}

.social-link .icon-hoverbar {
fill: var(--color-ink); 
transition: fill 0.3s ease-in-out; 
}

.social-link .icon-transparent {
fill: var(--color-paper-darkest); 
}

.social-link:hover .icon-hoverbar {
fill: var(--color-paper); 
}

.visually-hidden {
position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
border: 0;
}

/*   --------------  */
/*     12. SLIDER    */
/*   --------------  */

.slider-container {
position: relative;
      width: 100%;
      height: 40vh;
overflow: hidden;
}

.slide {
position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
padding: 20px;
}

.slide.active {
opacity: 1;
}

.slide h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
color: var(--color-paper);
}

.slide p {
font-size: 1.2rem;
max-width: 600px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.dots-container {
position: absolute;
      bottom: 20px;
      left: 50%;
transform: translateX(-50%);
      display: flex;
gap: 10px;
}

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s ease;
}

.dot.active {
background-color: var(--color-paper);
}


/*   --------------------------------------  */
/*     13. ARTIKEL-EMPFEHLUNGEN in <aside>    */
/*   --------------------------------------  */

.article-item {
border: 1px solid var(--color-tinte-rezept);
border-radius: 5px;
margin-top: 5px;
width: 200px;
background-color: var(--color-paper-darker);
transition: background-color 0.3s;
}

.article-item:hover {
background-color: var(--color-paper);
}

.article-suggestion {
display: flex;
justify-content: center;
}

.suggestion-content {
display: flex;
align-items: center;
background-color: var(--color-paper);
border-radius: 6px;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
max-width: 500px;
}

.article-suggestion-image {
width: 200px;
    height: auto;
    display: block;
    margin-right: 15px; 
object-fit: cover;
}
    
.suggestion-loading {
font-style: italic;
color: var(--color-tinte-rezept);
}

.suggestion-title {
display: block;
background-color: var(--color-paper-darker);
    padding: 10px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-ink);
    box-sizing: border-box;   /* WICHTIG: Damit Padding die 200px nicht verbreitert */
    word-wrap: break-word;
    hyphens: auto;            /* Sauberer Flattersatz */
border-radius: 0 0 5px 5px;
}

.article-item a {
text-decoration: none; 
}

.filter-btn {
  background-color: var(--color-paper-darkest);
  border: 1px solid var(--color-tinte-rezept);
  padding: 2px;
  border-radius: 2px;
  color: var(--color-paper);
  font-size: 1rem;
}

.filter-btn:hover {
  background-color: var(--color-paper-darker);
  border: 1px solid var(--color-tinte-rezept);
  color: var(--color-ink)
}

/*   -----------------  */
/*    14. Kommentarbox  */
/*   -----------------  */

fieldset.kommentarBox, .kommentar-cta {
padding: 5px;
border: 0;
}

fieldset.kommentarBox legend {
padding: 5px;
font-family: 'PinselSchrift';
font-size: clamp(1.3rem, 2.1vw, 2.5rem);
color: var(--color-tinte-rezept);
font-weight: 700;
line-height: 1;
margin-top: 1em; 
margin-bottom: 0.2em;
}


/*   -------------------------  */
/*     15. Reitertab: Quellen    */
/*   -------------------------  */

.sources-list {
list-style: none;
padding: 0;
}

.source-item {
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-rubric);
}


/*   -------------------------------  */
/*      16. schieberegler (in astronomie)*/
/*   -------------------------------  */

/* ÄUSSERER CONTAINER für Textumfluss und Größe */
.astronomy-slider-container {
margin: 15px;
    padding: 0;
width: 500px;
}

.astronomy-slider-right-float {
float: right;
margin-left: 25px;
}

.astronomy-slider-image-stack {
position: relative;
width: 100%;
}

.astronomy-slider-base-image {
width: 100%;
    height: auto;
display: block;
}

.astronomy-slider-overlay-image {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
    pointer-events: none;
opacity: 0.5;
}

.astronomy-slider-control {
background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    color: white;
    text-align: center;
width: 100%;
}

.astronomy-slider-control label {
display: block;
    margin-bottom: 5px;
font-size: 0.9em;
}

.astronomy-slider-control input[type="range"] {
width: 90%;
cursor: pointer;
}

.astronomy-slider-license-info {
font-size: 0.85em;
color: var(--color-tinte-rezept);
text-align: left;
margin-top: 5px;
line-height: 1.4;
    font-family: Arial, Tahoma, Verdana, sans-serif;
}

/*   -----------------  */
/*     17. Footer    */
/*   -----------------  */

footer {
width: 100%;
/*background-color:  var(--color-paper-darkest);*/
font-size: 0;/* Entfernt Whitespace-Problem */

background: var(--color-paper-darkest);
background: linear-gradient(0deg, 
    var(--color-paper) 0%, 
    var(--color-paper-darker) 30%,
    var(--color-paper-darkest) 100%);
}

.footer-section {
width: 50%;
    display: inline-block;
    vertical-align: top;
font-size: 16px; /* Font-Size zurücksetzen */
    box-sizing: border-box;
padding: 20px;
}

.footer-section a {
margin: 0 15px;
text-decoration: none;
}

.footer-section span {
margin: 0 10px;
font-size: 24px;
}

footer .nav-link {
color: var(--color-ink);
font-weight: normal;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
font-family: 'PinselSchrift';
font-size: 1.5rem;
padding: 10px 18px;
}

footer .nav-link:hover,
footer .nav-link:focus,
footer .nav-link:active {
color: var(--color-paper);
text-decoration: none;
}

.trenner {
font-size: 2rem;
color: var(--color-paper-darker);
margin-left: 1rem;
}

.footer-logo {
height: 30px; 
width: auto; 
}

.footer-logo-gross {
height: 60px; 
width: auto; 
}

/* nur eine Zierde */
.hr-double {
border: none;
border-top: 4px double var(--color-paper-darker);
margin: 20px 0;
transform: translateY(-16px);
}

/*  auch eine schicke Idee, aber nicht verwendet. Aufruf: <hr class="hr-animated"> */
.hr-animated {
border: none;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
background-size: 200% 100%;
animation: gradient-shift 3s ease infinite;
margin: 20px 0;
}

@keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}


/*   -----------------  */
/*     18. Typografie    */
/*   -----------------  */

.italic {
font-style: italic;
}

.bold {
font-weight: bold;
}

@font-face {
font-family: 'Peisearial';
  src: url('https://zunfterbe.de/fonts/peisearial.woff') format('woff');
  font-weight: normal;
  font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'PinselSchrift';
src: url('https://zunfterbe.de/fonts/falcon_pro-bold-webfont.woff2') format('woff2'),
     url('https://zunfterbe.de/fonts/falcon_pro-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

h1 {
font-family: 'PinselSchrift';
font-size: 2.8rem;
color: var(--color-rubric);
line-height: 1;
margin-top: 1em; 
margin-bottom: 0.2em;

	background: linear-gradient(90deg, var(--color-rubric), var(--color-paper-darkest), var(--color-rubric)) -100%/ 200%;
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	animation: shimmer 11s linear infinite
}

@keyframes shimmer { to { background-position: 100% } }

.n-h1-unterzeile {
font-size: 1rem;
vertical-align: top;
}

h2 {
font-family: 'PinselSchrift';
font-size: clamp(1.3rem, 2.1vw, 2.5rem);
color: var(--color-rubric);
font-weight: 700;
line-height: 1;
margin-top: 1em; 
margin-bottom: 0.2em;
}

h3 {
color: var(--color-rubric);
font-weight: 700;
line-height: 1;
margin-top: 1em; 
margin-bottom: 0.2em;
}

h2[id], h3[id] {
scroll-margin-top: calc(var(--sticky-header-height) + 1rem);
}

.disclaimer {
color: var(--color-tinte-rezept);
font-size: 0.95rem; 
line-height: 1.5;
}

/*   -----------------------  */
/*    19. Listenstile    */
/*   -----------------------  */

.ohne-bullets ul {
list-style: none;
}

/*   -----------------------  */
/*    20. Links und Buttons    */
/*   -----------------------  */

a.link {
font-weight: bold;
position: relative;
background-color: transparent;
text-decoration: none;
  color: #007acc;
transition: color 0.9s, background-color 0.9s;
}

a.link:hover {
background-color: var(--color-rubric);
color: var(--color-paper-darker);
transition: all 0.3s ease;
border-radius: 5px;
}

::selection {
background-color: var(--color-paper-darkest);
color: var(--color-rubric);
}

.cta-container {
    text-align: center; 
    margin-top: 2rem;
}

.cta-button {
display: inline-block;
padding: 1rem 2rem;
background-color: var(--color-stumpfgruen);
transition: background-color 0.5s ease;
color: var(--color-paper);
text-decoration: none;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin: 0 auto; /* Zentriert horizontal */
box-sizing: border-box;
}

.cta-button:hover {
transform: translateY(-1px); 
box-shadow: 0 1px 9px rgba(0,0,0,0.3); 
filter: brightness(1.08); 
}

.cta-button:disabled {
background-color: var(--color-paper-darkest);
cursor: not-allowed;
}

.cta-button:active {
transform: translateY(0); /* Beim Klicken "drückt" man ihn wieder runter */
box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}


/*   -----------------------  */
/*    21. Karten in den Tabs    */
/*   -----------------------  */

.stat-card, .aff-card {
background: var(--color-textseite);
padding: 24px;
border-radius: 12px;
border: 1px solid var(--color-paper-darkest);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.stat-card:hover, .aff-card:hover {
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: var(--color-tinte-rezept);
}

.stat-card h3, .aff-card h3 {
font-size: 1.1rem;
color: var(--color-rubric);
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}