<style>


    /* Responsive Bilder-Logik */
img {
    /* Bild wird nie breiter als der Text/Bildschirm */
    max-width: 100%;
    
    /* Proportional verkleinern, nicht quetschen */
    height: auto;
    
    /* Verhindert, dass Text direkt am Bild klebt */
    display: block;
    margin: 1.5em auto; 
    
    /* Optional: Schöne abgerundete Ecken für Astro-Fotos */
    border-radius: 4px;
}

picture, img {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Gibt den Bildern Tiefe auf dunklem Hintergrund */
}

img {
    max-width: 100% !important; /* !important erzwingt die Regel */
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Falls dein Text direkt im body steht, begrenzen wir diesen für Handys */
body {
    margin: 0;
    padding: 10px; /* Gibt dem Text am Handy einen kleinen Rand zum Display */
    overflow-x: hidden; /* Verhindert das seitliche Wackeln/Scrollen */
}

/* Speziell für deine Astro-Footer oder kleine Icons */
.astro-footer img {
    max-width: 50px; /* Damit Logos im Footer nicht riesig werden */
}


/* Copyright */
.astro-footer {
    background-color: #111; /* Fast schwarz */
    color: #888;            /* Dezentes Grau */
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #D18E12; /* Die ockerfarbene Trennlinie */
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 40px;       /* Abstand zum Inhalt darüber */
}

.footer-content p {
    margin: 5px 0;
}

/* Dein Name in Ocker hervorheben */
.astro-footer span, .astro-footer b {
    color: #D18E12;
}


/* Cookie ja oder nein */
.cookie-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a; /* Dunkler Hintergrund */
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #D18E12; /* Dein Ocker als Akzentlinie */
    z-index: 9999;
    font-family: sans-serif;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
    display: none;
}

.cookie-container p { margin: 0; font-size: 14px; }

.cookie-buttons { display: flex; gap: 10px; }

/* Die Buttons */
.cookie-buttons button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-ja { background: #D18E12; color: #fff; }
.btn-nein { background: #444; color: #ccc; }

.btn-ja:hover { background: #b0780f; }




/* Grundschrift */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #FFFFFF;
}

/* Hauptüberschrift */
h1 {
  font-size: 1.9rem;
  font-weight: 500;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

/* Abschnittsüberschriften */
h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  color: #FF0000;
}

/* Unterüberschriften  sehr zurückhaltend */
h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  color: #FF9933;  
}

/* Optional, falls benötigt */
h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 1.1em;
  margin-bottom: 0.3em;
  color: #e6d515;
 } 

/* Fließtext harmonisieren */
p {
  font-size: 1rem;
  margin-bottom: 1em;
}

font {
  font-size: 1rem;
  font-family: inherit;
}


.weiss {
    color: #ffffff; /* Weiß */    
    }

.gelb {
    color: #ffff00; /* Gelb */    
    }
    
.gruen {
    color: #00ff00; /* Grün */
}

   
.olive {
    color: #baba35; /* Olive */
}


.blaugruen {
    color: #71b6a4; /* Grün */
}

.hellblau {
    color: #00ffff; /* Hellblau */
}

.dunkelblau {
    color: #3c3cdd; /* Dunkelblau */
}

.rot {
    color: #ff0000; /* Rot */
}

.hellrot {
    color: #d56a34; /* Hellrot */
}

.braun {
    color: #ff9900; /* Braun */
}

.ocker {
    color: #D18E12; /* Ocker */
}

.hellbraun {
    color: #e6a330; /* Hellbraun */
}




.trennlinie-schlicht {
    border: 0;          /* Entfernt den Standard-Browser-Rahmen */
    height: 1px;        /* Die Dicke der Linie */
    background: #c9b899;   /* helles Ocker */
    margin: 40px 0;     /* Abstand oben und unten */
}

.trennlinie-glow {
    border: 0;
    height: 2px;
    /* Verlauf von Transparent zu Orange zu Transparent */
    background-image: linear-gradient(to right, transparent, #D18E12, transparent);
    margin: 50px auto;
    width: 80%;         /* Die Linie ist nicht ganz so breit wie die Seite */
}

.trennlinie-ocker {
    border: 0;
    height: 1px;
    /* Verlauf von Transparent zu Ocker zu Transparent */
    background: linear-gradient(to right, transparent, #D18E12, transparent);
    margin: 40px auto;
    width: 60%;
    opacity: 0.8;
}

/* Der Container für Bild und Text */
        .bild-container {
            display: inline-block;
            padding: 10px;
            background-color: #111111; /* Ganz dunkles Grau */
            border-radius: 12px;
            transition: all 0.3s ease; /* Macht die Bewegung flüssig */
            text-align: center;
            margin: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Standard-Schatten */
        }

        /* Hover-Effekt auf dem GESAMTEN Container */
        .bild-container:hover {
            transform: translateY(-8px); /* Container hebt sich an */
            box-shadow: 0 15px 30px rgba(0,0,0,0.8); /* Schatten wird tiefer */
            background-color: #1a1a1a; /* Wird beim Hover minimal heller */
        }


/* Das Bild selbst */
        .bild-stil {
            border-radius: 8px; /* Etwas kleinerer Radius als der Container */
            display: block;
            max-width: 100%;
            height: auto;
        }

         .Eisbild-stil {
            border-radius: 8px; /* Etwas kleinerer Radius als der Container */
            transition: all 0.4s ease;
            display: block;
            max-width: 100%;
            height: auto;
        }

   
             /* Damit der Link den Rahmen des Containers nicht sprengt */
         .video-link {
            position: relative;
            display: inline-block;
            text-decoration: none;       /* bei Methode Dreieck, sonst weg  */       
            /* border-radius: 8px;            bei Methode Bildrahmen */    
          }

              /* Der Effekt, wenn man mit der Maus Ã¼ber den LINK fährt 
                  Bildrahmen: Es erscheint ein ocker Rand mit einem Streifen

        .video-link:hover .Eisbild-stil {
        /* Ein kräftigerer Ocker-Glow beim Hover
            box-shadow: 0 0 40px 10px rgba(209, 142, 18, 0.7);
        /* Das Bild wird minimal größer 
            transform: scale(1.03);
        /* Optional: Ein hellerer Rand als Indikator 
            outline: 2px solid rgba(209, 142, 18, 0.5);
            outline-offset: 5px;
        }*/


/* Das Play-Symbol (Dreieck) */
.video-link::after {
    content: ''; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Genau mittig */
    
    /* Ein schönes Dreieck zeichnen */
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 50px solid rgba(72, 136, 231, 0.8); /* HellBlau */
    
    /* Am Anfang unsichtbar */
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none; /* Klick geht durch das Symbol zum Link */
}

/* Beim Darüberfahren: Bild wird dunkler, Play-Button erscheint */
.video-link:hover .Eisbild-stil {
    filter: brightness(0.5); /* Bild abdunkeln für besseren Kontrast */
}

.video-link:hover::after {
    opacity: 1; /* Play-Button einblenden */
    transform: translate(-50%, -50%) scale(1.2); /* Leichtes Pulsieren */
}


 /* Die Bildunterschrift */
figcaption {
    margin-top: 12px;
    font-size: 0.9em;
    color: #bbbbbb;
    font-style: italic;
    font-family: sans-serif; /* Wirkt moderner */
    max-width: 100%;
    word-wrap: break-word;      /* Umbrüche bei sehr langen Bildunterschriften */
    text-align: center;
}


/* Der äußere Rahmen für alles */
.astro-figure {
    display: inline-block;
    margin: 15px;
    vertical-align: top;
    max-width: 100%; /* Oder deine gewünschte Breite */
}

/* Der Container, in dem gezoomt wird */
.astro-zoom-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    line-height: 0; /* Verhindert kleine Abstände unter dem Bild */
}

.astro-bild {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}



/* Der Text in der Mitte (beim Hover) */
.bild-text-mitte-ohne-Hand {

    /* Verhindert das Ineinanderfließen */
    line-height: 1.2;
    padding: 10px;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    
    display: flex;
    flex-direction: column;    /* Stapelt oben/unten */
    justify-content: center;   /* Mitte vertikal */
    align-items: center;       /* Mitte horizontal */
    
    background: rgba(0, 0, 0, 0.5);
    color: #D18E12;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;

    opacity: 0;
    transition: all 0.4s ease-in-out;    

   pointer-events: none;
}


/* Spezielle Anpassung für kleine Bildschirme (Media Query) */
@media (max-width: 600px) {
    .bild-text-mitte-ohne-Hand {
        font-size: 14px; /* Text etwas kleiner machen */
        background: rgba(0, 0, 0, 0.6); /* Hintergrund etwas dunkler für bessere Lesbarkeit */
    }
}
/* Zusätzliche Sicherheit für den Textfluss */
.bild-text-mitte-ohne-Hand br {
    display: block;
    content: "";
    margin-top: 5px; /* Kleiner Abstand zwischen den Zeilen */
}


/* Der Text in der Mitte (beim Hover) */
.bild-text-mitte {

    /* Verhindert das Ineinanderfließen */
    line-height: 1.2;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-direction: column;    /* Stapelt oben/unten */
    justify-content: center;   /* Mitte vertikal */
    align-items: center;       /* Mitte horizontal */
    
    background: rgba(0, 0, 0, 0.5);
    color: #D18E12;
    font-weight: bold;
    text-align: center;    
    box-sizing: border-box;
    
    opacity: 0;
    transition: all 0.4s ease-in-out;
    
    /* FIX: Die Hand erzwingen */
    cursor: pointer; 
    pointer-events: auto; /* Ändere dies auf auto, damit der Cursor reagiert */
}


/* Spezielle Anpassung für kleine Bildschirme (Media Query) */
@media (max-width: 600px) {
    .bild-text-mitte {
        font-size: 14px; /* Text etwas kleiner machen */
        background: rgba(0, 0, 0, 0.6); /* Hintergrund etwas dunkler für bessere Lesbarkeit */
    }
}

/* Zusätzliche Sicherheit für den Textfluss */
.bild-text-mitte br {
    display: block;
    content: "";
    margin-top: 5px; /* Kleiner Abstand zwischen den Zeilen */
}

/* HOVER-EFFEKTE */
.astro-zoom-box:hover .astro-bild {
    transform: scale(1.1);
}

.astro-zoom-box:hover .bild-text-mitte {
    opacity: 1;
}

.astro-zoom-box:hover .bild-text-mitte-ohne-Hand {
    opacity: 1;
}

/* Verhindert Standard-Link-Styles im Bildbereich */
.astro-link {
    text-decoration: none;
    display: block; /* Sorgt dafür, dass der Link den ganzen Raum ausfällt */
    cursor: pointer;
}

/* Optional: Ein kleiner Effekt für den Text in der Mitte, 
   damit er beim Klicken kurz "nachgibt" */
.astro-link:active .astro-zoom-box {
    transform: scale(0.98);
    transition: transform 0.1s;
}

.astro-footer {
    background-color: #111; /* Fast schwarz */
    color: #888;            /* Dezentes Grau */
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #D18E12; /* Die ockerfarbene Trennlinie */
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 40px;       /* Abstand zum Inhalt darüber */
}

.footer-content p {
    margin: 5px 0;
}

/* Dein Name in Ocker hervorheben */
.astro-footer span, .astro-footer b {
    color: #D18E12;
}

img {
    max-width: 100%; /* Das Bild ist maximal so breit wie sein Container */
    height: auto;    /* Die Höhe passt sich proportional an */
   
    border: none;
 }


</style>