/* Grund-Reset & Schriftart */

:root {
    --accent: #cc6600;
    --dark: #333;
    --light: whitesmoke;
    --shadow: 4px 4px 10px rgba(0,0,0,0.4);
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--dark);
    background-color: rgba(51,51,51,0.05);
}

.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
}

.section-padding {
    padding: 30px 0;
}

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

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

.logo {
    font-size: 1.25rem;
    font-weight: 200;
    color: var(--accent);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
    margin: 0;
}

.hover-home{
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.hover-home img {
    position: absolute;
    inset: 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;
    display: flex;
    padding: 0;
    margin: 0;
}

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

.sticky-header nav a:hover {
    color: var(--accent);
}

/* === 2. HERO SECTION === */
.hero-section {
    height: 55vh;
    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;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content {
    z-index: 2;
    max-width: 600px;
}

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

/* Buttons */
.cta-button,
.post-info-button,
.back-button,
.read-more-btn {
    display: inline-block;
    background-color: var(--accent);
    color: var(--light);
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.5s;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.45);
}

.cta-button {
    padding: 12px 30px;
}

.cta-button:hover,
.post-info-button:hover,
.back-button:hover,
.read-more-btn:hover {
    background-color: var(--dark);
    transform: translateY(-1px);
}

.post-info-button,
.read-more-btn {
    font-size: 0.75rem;
    padding: 5px 15px;
}

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

.read-more-btn {
    border: none;
    cursor: pointer;
    padding: 6px 15px;
    margin: 10px 0 15px 0;
}

/* === 3. CARD ELEMENTS (Teaser, Special, Video) === */

.teaser-card, 
.myspecial-card, 
.mymobility-card, 
.video-card, 
.impress-card,
.textbox,
.fotobox,
.videobox {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: var(--light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 0 0;
}

.fotobox {
    aspect-ratio: 1 / 1;
}

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

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

.teaser-card h3 {
    padding: 15px 15px 5px;
    margin: 0;
    color: var(--accent);
}

.teaser-card p,
.mymobility-card p,
.myspecial-card p {
    padding: 0 15px 20px;
    margin: 0;
}

.small-text, .akzentfarbe {
    font-size: 0.75rem;
    color: var(--accent);
}

.themen h2 {
    margin-bottom: 40px;
    color: var(--dark);
}

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

.post-card {
    background-color: var(--light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}


.post-info {
    padding: 20px;
}

.post-info h4 {
    margin: 0 0 5px;
    color: var(--dark);
}

.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,
.absatz-button,
.absatzdunkel,
.absatzdunkel a:hover,
.textbox p,
.textbox h2 {
    color: whitesmoke;
}

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


.absatz-button {
    display: inline-block;
    /*width: fit-content;*/
    margin: 0 auto;
    padding: 12px 50px;
    background-color: rgba(51, 51, 51, 0.95);
    text-shadow: 2px 2px 3px rgba(204, 102, 0, 0.75);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 200;
    box-shadow: var(--shadow);
}

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

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

.absatzdunkel a {
    color: var(--accent);
    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);

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

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

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

.mehr-button {
    display: block;
    width: fit-content;
    color: var(--dark);
    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;
}

.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,
#myspecials2026:target,
#myspecials2025:target,
#myspecials2024:target,
#myspecials2023:target,
#myspecials2022:target,
#myspecials2021:target,
#myspecials2020:target,
#myspecials2019:target,
#myspecials2018:target,
#myspecials2017:target,
#myspecials2016:target,
#myspecials2015:target,
#myspecials2014:target,
#myspecials2013:target,
#myspecials2012:target,
#myspecials2011: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: 1fr; }

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


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

.responsive-video {
    position:relative;
    padding-bottom:56.25%;
    /*padding-top:0px;*/
    height:0;
    overflow:hidden;
    /*margin-top:0;*/
}

.responsive-video iframe {
    position:absolute;
    inset: 0;
    /*top:0;
    left:0;*/
    width:100%;
    height:100%;}


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

/* TEXTEINBLENDUNGEN NACH ANKLICKEN VON MEHR */

.more-content {
    display: grid;
    grid-template-rows: 0fr; /* Startzustand: Höhe 0 */
    overflow: hidden;
    transition: grid-template-rows 0.5s ease-out; /* Die "soft" Animation */
}

/* Wenn die Klasse 'open' hinzugefügt wird, fährt der Text aus */
.more-content.open {
    grid-template-rows: 1fr;
}

/* Damit die Absätze im Inneren nicht sofort hart erscheinen */
.more-content p {
    min-height: 0;
    padding-top: 0;
}

/* 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); 
}

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

/* Stile für den Pfeil */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  font-size: 2em;
  color: var(--dark);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

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

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

/* === RESPONSIVE ANPASSUNGEN (Mobile) === */

@media (max-width: 768px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-2, .grid-1 { grid-template-columns: 1fr; }

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

    .sticky-header .container {
        flex-direction: column;
        padding: 10px 0;
    }

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