/* Grund-Reset & Schriftart */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: rgba(51,51,51,0.05);
}

/* Container für zentrale Inhaltsbreite */
.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
}

/* Globale Abstände */
.section-padding {
    padding: 30px 0;
}

/* === 1. HEADER (Sticky Navigation) === */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(51,51,51,0.97);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.sticky-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    font-size: 1.25rem;
    font-weight: 200;
    color: rgba(204, 102, 0, 1); /* Akzentfarbe: Orange */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
    margin: 0;
    line-height: 1;
}

.hover-home{ /* Home-Symbol in Navleiste wird ein- bzw. ausgeblendet */
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
}

.hover-home img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
}

.hover-home:hover .bild-hover {
  opacity: 1;
}

.hover-home:hover .bild-normal, .hover-home .bild-hover {
  opacity: 0;
}

.sticky-header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.sticky-header nav a {
    text-decoration: none;
    color: #f9f9f9;
    padding: 0 10px;
    transition: color 0.3s;
}

.sticky-header nav a:hover {
    color: #cc6600; /* Akzentfarbe: Orange */
}


/* === 2. HERO SECTION === */
.hero-section {
    height: 55vh; /* 55% der Viewport-Höhe */
    background: url('../dateien/herosection/Bild01.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Dunkler Overlay */
}

.hero-content {
    z-index: 2; /* Über dem Overlay */
    max-width: 600px;
}

.hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    background-color: #cc6600;  /* Akzentfarbe: Orange */
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.5s;
}

.cta-button:hover {
    /*background-color: #E64A19;*/
    background-color: #333;
}


/* === 3. THEMEN-TEASER UND MYSPECIAL (Grid) === */

.teaser-card, .myspecial-card, .mymobility-card, .video-card, .impress-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: whitesmoke;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

.teaser-card:hover {
    transform: translateY(-5px);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.teaser-card img {
    width: 100%;
    /*height:object-fit;*/
    object-fit: cover;
}

.teaser-card h3 {
    padding: 15px 15px 5px;
    margin: 0;
    color: #cc6600 /* Akzentfarbe */
}

.teaser-card p {
    padding: 0 15px 20px;
    margin: 0;
    font-size: 1rem;
}

.themen h2 {
    margin-bottom: 40px;
    color: #333;
}


/* === 4. AKTUELLE BEITRÄGE (Cards) === */

.post-card {
    background-color: whitesmoke;
    border-radius: 8px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.post-card img {
    width: 100%;
    object-fit: cover;
}

.post-info {
    padding: 20px;
}

.post-info h4 {
    margin: 0 0 5px;
    color: #333;
}

.post-info .date {
    font-size: 0.85rem;
    color: #999;
}


/* === 5. FOOTER === */
footer {
    background-color: rgba(51,51,51,0.97);
    color: #ccc;
    padding: 20px 0;
    font-size: 0.8rem;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav a {
    color: #ccc;
    text-decoration: none;
    margin-left: 15px;
}

.footer-nav a:hover {
    color: #cc6600;
}



/* === 6. ALLGEMEIN FÜR ALLE SEITEN === */

.hero-section,
.cta-button,
.post-info-button,
.back-button,
.absatz-button,
.absatzdunkel,
.absatzdunkel a:hover,
.textbox p,
.textbox h2 {
    color: whitesmoke;
}

.absatz,
.absatz-button, 
.absatz h2, 
.absatz h3, 
.textbox h2,
.mausuebersbild,
.hero-section, 
.themen h2,
.sticky-header .container {
    text-align: center;
}

.post-info-button, .back-button {
    display: inline-block;
    background-color: #cc6600;  /* Akzentfarbe: Orange */
    font-size: 0.65rem;
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.5s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);
    margin: 0 auto;
}

.post-info-button:hover, .back-button:hover{
    background-color: #333;
    transform: translateY(-1px);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);
}
.absatz-button {
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    background-color: rgba(51, 51, 51, 0.95);
    text-shadow: 2px 2px 3px rgba(204, 102, 0, 0.75);
    text-decoration: none;
    padding: 12px 50px;
    border-radius: 8px;
    font-weight: 200;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.absatz-button {
    margin-bottom: 30px;
}

.back-button {
    margin-top: 30px;
}

.absatzdunkel {
    background-color: rgba(51, 51, 51, 0.95);
}

.absatzdunkel a {
    color: #cc6600;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s;
}

.absatzdunkel a:hover {
    text-shadow: 1px 1px 2px rgba(204, 102, 0, 1);

}

.mehr-button {
    display: block;
    width: fit-content;
    color: #333;
    padding: 6px 0px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    font-weight: 200;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.mehr-button a {
    color: rgba(204, 102, 0, 1.0);
    text-shadow: 1px 1px 2px rgba(51, 51, 51, 0.8);
    text-decoration: none;
    transition: color 0.3s;
    padding: 10px 30px 6px 30px;
}

.mehr-button a:hover {
    color: rgba(51, 51, 51, 0.8);
    text-shadow: 1px 1px 2px rgba(204, 102, 0, 0.8);
    transition: color 0.3s;
}

.absatz h2 {
    font-size: 2.5rem;
}

.absatz h3 {
    font-size: 1.5rem;
}

.absatz p {
    font-size: 1.25rem;
    text-align: justify;
    padding: 15px 15px;
}

.margintop30 {
    margin-top: 30px;
}
.marginbottom30 {
    margin-bottom: 30px;
}

#Reichweite:target, 
#Ladeinfrastruktur:target,
#Ladeleistung:target,
#Lade-Tipps:target,
#Akku-Tipps:target,
#Ladetarife:target,
#Datenschutz:target,
#Singapur:target,
#KualaLumpur:target,
#Mauritius:target,
#LaReunion:target,
#Safari:target,
#KapStadt:target,
#myspecials2025:target,
#myspecials2024:target,
#myspecials2023:target,
#myspecials2022:target,
#myspecials2021:target,
#myspecials2020:target,
#myspecials2019:target,
#myspecials2018:target {
  scroll-margin-top: 90px;
}

.textbox {
    display: block;
    text-decoration: none;
    background-color: rgba(51, 51, 51, 0.95);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

.textbox p {
    padding: 15px 15px;
    margin: 0;
    text-align: justify;
}

.textbox h2 {
    font-size: 1.5rem;
    padding: 15px 15px;
    margin: 0;
}

.grid-4, .grid-3, .grid-2, .grid-1 {
    display: grid;
    gap: 30px;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
 }

.grid-1 {
     grid-template-columns: repeat(1, 1fr);
 }

 .trennlinie {
    margin: 30px auto 0px auto;
    color: rgba(51, 51, 51, 0.08);
    width: 66%;
 }

/* === 7. MYSPECIAL - EINZELEVENT UNTER MYSPECIALS === */

.myspecial-card p {
    padding: 0 15px 20px;
    margin: 0;
    font-size: 1.5rem;
}

.fotobox, .videobox {
    display: block;
    text-decoration: none;
    background-color: whitesmoke;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 0 0;
}

.fotobox img, .fotobox iframe {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.fotobox iframe {
    padding-bottom: 0;
}

/* === 8. MYVIDEO - Besonderheiten zum Responsive Video === */

.responsive-video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
.responsive-video {position:relative;padding-bottom:56.25%;padding-top:0px;height:0;overflow:hidden;margin-top:0;}


.video-container video {
    width: 100%;
    height: auto;
    display: block;
}


/* TEXTEINBLENDUNGEN ÜBER BILDERN UND BILDERN IM CAROUSEL */

.mask {
    padding:5px 15px;
    opacity:0;
    z-index:2;
}

.carousel-mask {
    padding: 15px;
}

.mask, .carousel-mask {
    position:absolute;
    bottom:0;
    right: 0;
    left: 0;
    background-color:rgba(0,0,0,0.35);
    font-size: 1.25rem;
    color:whitesmoke;
    text-align:center;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    width: object-fit;
}

.fotobox:hover .mask {
    transform: translateY(0);
}

.box {position:relative;}
.box:hover .mask{opacity:1;}

.imgmaus,.imgmausrechtslinks {
    hight:20px;
    vertical-align: middle;
    opacity: 40%; 
}

.imgmaus {
    width:20px;
}

.imgmausrechtslinks {
    width:30px;
}

.mausuebersbild {
    font-size: 0.45em;
    color: rgba(0,0,0,0.35);
}


.carousel-mask a, .mask a {
    color: #cc6600;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.75);
    transition: color 0.3s;
}

.carousel-mask a:hover, .mask a:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 1px 1px 2px rgba(204, 102, 0, 1);
}


/* === BILDERKARUSSELL === */

/* --- Karussell-Styles (Anpassungen für Smooth Scroll Snap) --- */

/* Der neue, äußere Umschließer, der NICHT scrollt */
.carousel-wrapper-outer {
    position: relative; /* Wichtig für die absolute Positionierung der Buttons */
    max-width: 600px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden; 
}

/* Der innere Container, der die Bilder enthält und SCROLLT */
.carousel-container {
    display: flex;
    width: fit-content;
    overflow-x: scroll; 
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; 
}

.carousel-container::-webkit-scrollbar {
    display: none; /* Versteckt die Scrollbar komplett */
    width: 0;      /* Stellt sicher, dass kein Platz reserviert wird */
    height: 0;
}

.carousel-container {
    -ms-overflow-style: none;  /* Versteckt die Scrollbar für IE und Edge (ältere Syntax) */
    scrollbar-width: none;     /* Versteckt die Scrollbar für Firefox */
}

.carousel-slide {
    width: 100%;
    min-width: 100%; 
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-slide:hover .carousel-mask {
    transform: translateY(0);
}

.carousel-btn-links,.carousel-btn-rechts {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(245, 245, 245, 0.4);
    border: none;
    padding: auto;
    cursor: pointer;
    font-size: 40px;
    z-index: 10;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.carousel-btn-links {
    padding: 3px 20px 10px 16px;
}
.carousel-btn-rechts {
    padding: 3px 16px 10px 20px;
}

.prev-btn { left: 2px; }
.next-btn { right: 2px; }
.carousel-btn-links:hover, .carousel-btn-rechts:hover { 
    background-color: rgba(0, 0, 0, 0.5); 
}

/* === 9. IMPRESSUM === */






/* === DEFINITION DES NACH-OBEN-BUTTONS === */

/* Stile für den Pfeil */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  
  /* Stil des Pfeils */
  font-size: 2em;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  z-index: 1000;
  
  /* Animation für sanftes Ein- und Ausblenden */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  
  /* Initial nicht klickbar, bis er sichtbar wird */
  pointer-events: none;
}

/* Sichtbarmachen des Pfeils */
#scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.nachoben {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    padding: 0 0 0 0;
    margin-bottom: -18px;
    opacity: 0.66;
}

/* === RESPONSIVE ANPASSUNGEN (Mobile) === */
@media (max-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr); /* zwei Spalten werden untereinander gestapelt */
    }

    .grid-3, .grid-2, .grid-1 {
        grid-template-columns: 1fr; /* Spalten werden untereinander gestapelt */
    }

    .hero-content h2 {
        font-size: 2rem;
    }

    .sticky-header .container {
        flex-direction: column; /* Navigation unter Logo */
        padding: 10px 0;
    }

    .sticky-header nav ul {
        margin-top: 10px;
    }
    
    .sticky-header nav a {
        padding: 0 10px;
        font-size: 0.9rem;
    }
}