/* ==========================================================================
   Lokale Schriftart: Quicksand (endlife-crisis.de)
   ========================================================================== */

/* 1. Schriftdateien definieren */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/quicksand/quicksand-v37-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/quicksand/quicksand-v37-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/quicksand/quicksand-v37-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/quicksand/quicksand-v37-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/quicksand/quicksand-v37-latin-700.woff2') format('woff2');
}

/* 2. Quicksand global für die gesamte Website aktivieren */
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea {
  font-family: 'Quicksand', sans-serif !important;
}


/* ==========================================================================
   Design endlife-crisis.de (Clean Dark Style & Bündiger Hero)
   ========================================================================== */

/* 1. Unerwünschte weiße Ränder und Scrollbalken beseitigen */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  background-color: #1a1a1a !important; /* Actionfreak-Dunkelgrau für die gesamte Seite */
  min-height: 100vh;
}

/* 2. Den Standard-Kasten von Quark 2 komplett neutralisieren */
#page-surround,
#body,
main,
article,
.card,
.content,
.wrapper,
.container,
.section,
.default-animation {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Header und Footer unsichtbar halten */
#header,
#footer,
.header,
.footer {
  display: none !important;
}

/* 4. Das Bild als kompletter Vollbild-Hintergrund */
.hero-actionfreak {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* Volle Bildschirmbreite */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0 !important;

  /* Volle Bildschirmhöhe (100vh = 100% Viewport Height) */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

/* 5. Haupttitel: KTM-Orange mit schwarzer Kontur */
.hero-title {
  color: #ff6600 !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 4px;
  margin: 0 0 0.5rem 0;
  line-height: 1.1;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px -2px 0 #000,
     0px  2px 0 #000,
    -2px  0px 0 #000,
     2px  0px 0 #000;
}

/* 6. Untertitel: "Bis zum Kap" in Hellgrau */
.hero-subtitle-cap {
  color: #9ca3af !important;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: none;
  margin: 0;
}



/* ==========================================================================
   Pfeil-Animation & Timeline (Actionfreak-Style)
   ========================================================================== */

/* 1. Weiches Scrollen beim Klick auf den Pfeil */
html {
  scroll-behavior: smooth;
}

/* 2. Den Hero-Container als Bezugspunkt für den Pfeil festlegen */
.hero-actionfreak {
  position: relative !important;
}

/* 3. Der hüpfende Pfeil am unteren Rand */
.scroll-down-arrow {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 10;
  text-decoration: none;
  animation: bounceDown 2s infinite;
  cursor: pointer;
}

/* Grundzustand: Pfeil mit schwarzer Kontur */
.scroll-down-arrow svg {
  width: 52px;
  height: 52px;
  stroke-width: 3;
  transition: filter 0.25s ease-in-out, transform 0.25s ease-in-out;
  
  /* Stabile schwarze Outline in alle vier Richtungen */
  filter: drop-shadow(2px 0 0 #000000) 
          drop-shadow(-2px 0 0 #000000) 
          drop-shadow(0 2px 0 #000000) 
          drop-shadow(0 -2px 0 #000000);
}

/* Hover-Effekt: Intensives KTM-Orange-Leuchten wie bei den Timeline-Badges */
.scroll-down-arrow:hover svg {
  transform: scale(1.15); /* Vergrößert sich wie die Badges um 15 % */
  
  /* Schwarze Outline bleibt scharf, darüber legt sich ein doppeltes Neon-Glühen */
  filter: drop-shadow(2px 0 0 #000000) 
          drop-shadow(-2px 0 0 #000000) 
          drop-shadow(0 2px 0 #000000) 
          drop-shadow(0 -2px 0 #000000)
          drop-shadow(0 0 8px rgba(255, 102, 0, 0.9))
          drop-shadow(0 0 16px rgba(255, 102, 0, 0.7));
}

/* Pfeil vergrößern, Strichdicke anpassen & schwarze Kontur (Outline) */
.scroll-down-arrow svg {
  width: 52px;                 /* Vorher 38px: deutlich präsenter */
  height: 52px;
  stroke-width: 3;             /* Kräftigere Linien passend zur fetten Schrift */
  
  /* Schwarze Kontur in alle vier Richtungen um die Vektorlinien */
  filter: drop-shadow(2px 0 0 #000000) 
          drop-shadow(-2px 0 0 #000000) 
          drop-shadow(0 2px 0 #000000) 
          drop-shadow(0 -2px 0 #000000);
}

/* Hover-Effekt: Outline bleibt erhalten, dazu oranger Glüh-Effekt */
.scroll-down-arrow:hover svg {
  filter: drop-shadow(2px 0 0 #000000) 
          drop-shadow(-2px 0 0 #000000) 
          drop-shadow(0 2px 0 #000000) 
          drop-shadow(0 -2px 0 #000000)
          drop-shadow(0 0 12px #ff6600);
}

.scroll-down-arrow:hover {
  filter: drop-shadow(0 0 8px #ff6600);
}

/* Hüpf-Bewegung: bewegt sich sanft 12 Pixel nach unten und wieder zurück */
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, 12px);
  }
  60% {
    transform: translate(-50%, 6px);
  }
}

/* 4. Der Hauptbereich der Timeline */
.timeline-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem 1.5rem;
  box-sizing: border-box;
}

/* 5. Die senkrechte orange KTM-Linie */
.timeline-vertical-line {
  position: absolute;
  top: 2rem;
  bottom: 7rem; /* Zieht die Linie von unten weiter nach oben */
  left: 50%;
  width: 3px;
  background-color: #ff6600;
  transform: translateX(-50%);
}

/* 6. Ein einzelnes Timeline-Element */
.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 3.5rem;
  box-sizing: border-box;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Links und Rechts aufteilen */
.timeline-item.left {
  left: 0;
  padding-right: 45px;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
  padding-left: 45px;
  text-align: left;
}

/* 7. Die anklickbaren Kategorie-Badges auf der Mittellinie */
.timeline-badge {
  position: absolute;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #212529;          /* Dunkler Hintergrund passend zur Seite */
  border: 2px solid #ff6600;          /* KTM-Orange Umrandung */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Die Vektor-Icons innerhalb des Badges */
.timeline-badge svg {
  width: 20px;
  height: 20px;
  stroke: #ff6600;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* Hover-Effekt: Beim Drüberfahren füllt sich der Kreis orange und das Icon wird weiß */
.timeline-badge:hover {
  background-color: #ff6600;
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.85);
}

.timeline-badge:hover svg {
  stroke: #000000;
}

/* Exakte Zentrierung auf der Mittellinie (40px Breite / 2 = 20px Einrückung) */
.timeline-item.left .timeline-badge {
  right: -20px;
}

.timeline-item.right .timeline-badge {
  left: -20px;
}

/* 8. Die Kärtchen */
.timeline-card {
  position: relative;
  background-color: #212529; /* Dunkles Kärtchen-Grau */
  padding: 1.5rem 1.75rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.timeline-card:hover {
  transform: translateY(-3px);
  border-color: #ff6600; /* Kräftiges KTM-Orange wie bei den Punkt-Kacheln */
  box-shadow: 0 8px 25px rgba(255, 102, 0, 0.15); /* Der weiche orange Schatten */
}

/* Die kleinen Zeiger/Dreiecke zur Mittellinie */
.timeline-card::after {
  content: "";
  position: absolute;
  top: 24px;
  border-style: solid;
}

.timeline-item.left .timeline-card::after {
  right: -10px;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #212529;
}

.timeline-item.right .timeline-card::after {
  left: -10px;
  border-width: 8px 10px 8px 0;
  border-color: transparent #212529 transparent transparent;
}

/* 9. Texte innerhalb der Kärtchen */
.timeline-meta {
  display: block;
  color: #ff6600;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.timeline-title {
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  line-height: 1.3;
}

.timeline-desc {
  color: #9ca3af; /* Sanftes Hellgrau */
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Hover-Effekte für die Timeline */

/* 1. Überschrift wird KTM-Orange */
.timeline-card:hover .timeline-title {
  color: #ff6600 !important;
  transition: color 0.2s ease;
}

/* 2. Kategorie/Datum (oben) und Beschreibungstext (unten) werden schwarz */
.timeline-card:hover .timeline-meta,
.timeline-card:hover .timeline-desc {
  color: #000000 !important;
  transition: color 0.2s ease;
}


/* 10. Smartphone-Ansicht (Responsive) */
@media (max-width: 768px) {
  .timeline-vertical-line {
    left: 24px;
  }

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    padding-left: 64px !important;     /* Platz schaffen für die 40px Icons */
    padding-right: 0 !important;
    text-align: left !important;
    margin-bottom: 2.5rem;
  }

  /* Badge links auf der Linie ausrichten */
  .timeline-item.left .timeline-badge,
  .timeline-item.right .timeline-badge {
    left: 4px;                        /* 24px Linienposition minus halbe Badge-Breite */
    right: auto;
  }

  .timeline-item.left .timeline-card::after,
  .timeline-item.right .timeline-card::after {
    left: -10px;
    right: auto;
    border-width: 8px 10px 8px 0;
    border-color: transparent #212529 transparent transparent;
  }
}


/* 11. Verhindert Silbentrennung auf den Timeline-Karten */
.timeline-card,
.timeline-desc,
.timeline-title {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}


/*  Ab hier ist das meine Pixel Seite */


/* --- Galerie Grid (Pixel) --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden; /* WICHTIG: Verhindert, dass das Bild beim Zoomen über den Rand ragt */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease; /* Aktiviert eine weiche Animation */
}

.gallery-card:hover img {
  transform: scale(1.10); /* Vergrößert das Bild um 10% */
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.gallery-card-desc {
  padding: 1rem;
}

.gallery-card-desc h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.gallery-card-desc p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}





/* 12. Artikel-Design für WORT */
.article-wrapper {
  padding: 4rem 1.5rem;
  display: flex;
  justify-content: center;
}

.article-container {
  max-width: 800px;
  width: 100%;
  background: #1e2227;
  padding: 3rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.article-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ff6600;
  padding-bottom: 1.5rem;
}

.article-meta {
  display: flex;
  justify-content: space-between; /* Das schiebt die Elemente an die äußeren Ränder */
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.article-date {
  color: #ff6600;
}

.article-tag {
  color: #ff6600;
  text-transform: uppercase;
}

/* Überschrift in der normalen hellen Textfarbe statt Orange */
.article-header h1.article-title {
  color: #d1d5db !important;
  font-size: 2.3rem;
  margin: 0.4rem 0 0 0;
  line-height: 1.2;
}

.article-content {
  color: #d1d5db;
  font-size: 1.1rem;
  line-height: 1.8;
}

.article-content p {
  margin-bottom: 1.5rem;
}

/* NEU: Nimmt dem allerletzten Absatz den unteren Abstand weg */
.article-content p:last-child {
  margin-bottom: 0 !important;
}

.article-content h2 {
  color: #ff6600 !important;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}







/* ==========================================================================
   Footer-Leiste Unterseiten (Zwei Versionen zum Testen)
   ========================================================================== */

/* VERSION 1: Durchgehende Linie (volle Bildschirmbreite) - AKTIV */
.article-footer {
  position: relative; /* Wichtig für die durchgehende Linie */
  margin-top: 2rem;
  padding-top: 2.5rem; /* Zieht die Icons weiter nach unten weg vom Strich */
  padding-bottom: 3rem; /* NEU: Das Polster nach unten zum Bildschirmrand */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: none !important; /* Schaltet die alte, kurze Linie ab */
  
  /* NEU: Ränder, Padding und Breite für bündigen Abschluss (1000px Timeline) */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Dieser unsichtbare Kasten zeichnet die durchgehende Linie */
.article-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 2px; /* Dickere Linie wie auf der Startseite */ 
  background-color: #ff6600; /* KTM-Orange */
}

/* ==========================================================================
   VERSION 2: Linie nur so breit wie der Inhalt - INAKTIV (auskommentiert)
   Um diese zu nutzen: Lösche die Zeichen /* und */ /* um diesen Block herum
   und setze stattdessen VERSION 1 in diese /* Kommentarklammern */ /*.
   ========================================================================== */

/*
.article-footer {
  margin-top: 2rem;
  padding-top: 2.5rem; 
  padding-bottom: 3rem;  
  border-top: 2px solid #ff6600; 
  display: flex;
  justify-content: space-between;
  align-items: center;
}
*/
 




/* Container für alle Social-Media-Icons links gebündelt */
.article-social-icons {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;                        /* Fester Abstand zwischen den einzelnen Icons */
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Zieht das erste Icon ganz nach links, damit es exakt mit dem Text fluchtet */
.article-social-icons a:first-child {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Zieht den Zurück-Link ganz nach rechts, damit er bündig mit der Textkante abschließt */
.btn-back {
  padding-right: 0 !important;
  margin-right: 0 !important;
}


/* Verhindert, dass der Zurück-Link umbricht */
.btn-back {
  white-space: nowrap;
  margin-left: auto;                  /* Drückt den Link sicher ganz nach rechts */
}

/* Standard-Farbe: Helles Textgrau passend zum Fließtext (Gilt für alle Footer-Links) */
.article-social-icons a,
.btn-back,
.footer-home-legal a {
  color: #d1d5db;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  display: flex;
  align-items: center;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Hover-Effekt: Beim Drüberfahren mit der Maus färben sich Icons und Link in KTM-Orange */
.article-social-icons a:hover,
.btn-back:hover,
.footer-home-legal a:hover {
  color: #ff6600;
  text-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}




/* Banner ganz oben auf der Artikel-Karte */
.article-hero-image {
  margin: -3rem -2.5rem 2rem -2.5rem; /* Zieht das Bild nahtlos an den Kartenrand */
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  max-height: 420px;
}

.article-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titel in Orange */
.article-title {
  color: #ff6600 !important;
  font-size: 2.3rem;
  margin: 0.4rem 0 0 0;
  line-height: 1.2;
}

/* Bild schwebend rechts im Text */
.img-right {
  float: right;
  max-width: 320px;
  margin: 0.5rem 0 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Bild schwebend links im Text */
.img-left {
  float: left;
  max-width: 320px;
  margin: 0.5rem 2rem 1.5rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Verhindert, dass Elemente nach den Bildern verrutschen */
.article-content::after {
  content: "";
  display: table;
  clear: both;
}


/* ==========================================================================
   Video im Inhaltsbereich für FRAME (Garantierte volle Breite im 16:9 Format)
   ========================================================================== */
.article-video-box {
    position: relative;
    width: 100%;
    max-width: 800px;           /* Verhindert, dass das Video auf Riesen-Monitoren zu groß wird */
    margin: 1.5rem auto;        /* Oben/Unten 1.5rem Abstand, Links/Rechts AUTO = Zentriert! */
    padding-bottom: 56.25%;     /* 16:9 Format */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #000000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.article-video-box iframe,
.article-video-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

/* Texte zwischen den Videos */
.video-section-text {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  color: #d1d5db;
  font-size: 1.1rem;
  line-height: 1.8;
}

.video-section-text p {
  margin-bottom: 1.2rem;
}

/* ==========================================================================
   Mehrere Videos untereinander (FRAME)
   ========================================================================== */
.article-video-item {
  margin-bottom: 2.5rem; /* Abstand zwischen den einzelnen Video-Blöcken */
}

.video-caption {
  font-size: 0.95rem;
  color: #9ca3af;        /* Dezent hellgrau */
  margin-top: -1.2rem;   /* Zieht den Text näher an den Videokasten heran */
  margin-bottom: 1.5rem;
  font-style: italic;
  text-align: center;         /* Zentriert auch den Titel unter dem Video */
}



/* ==========================================================================
   Galerie Navigation (Pagination)
   ========================================================================== */
.gallery-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
}


.btn-page {
  background-color: #1a1a1a;          /* Dunkler Hintergrund passend zur Seite */
  border: 2px solid #ff6600;          /* KTM-Orange Umrandung */
  color: #ff6600 !important;          /* Orange Pfeile */
  width: 40px;                        /* Feste Breite für einen perfekten Kreis */
  height: 40px;                       /* Feste Höhe */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;                 /* Macht den Kasten komplett rund */
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;                  /* Pfeile etwas größer */
  padding: 0;                         /* Altes Padding (Abstände) überschreiben */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Leichter dunkler Schatten */
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn-page:hover {
  background-color: #ff6600;          /* Kreis füllt sich orange */
  color: #000000 !important;          /* Pfeile werden schwarz */
  transform: scale(1.15);             /* Button vergrößert sich leicht */
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.85); /* Oranges Leuchten wie auf der Startseite */
}


.page-info {
  color: #d1d5db; /* Hellgrau passend zu deinem Untertitel */
  font-size: 1.1rem;
  font-weight: 600;
}

/* 1. Den Rahmen als Bezugspunkt setzen */
.content-wrapper {
  position: relative;
}

/* 2. Überschrift zentriert über das Bild legen */
.content-wrapper h1 {
  position: absolute;
  top: 200px; /* Exakt die Mitte deines 400px hohen Banners */
  left: 50%;
  transform: translate(-50%, -50%); /* Zieht den Text exakt in die Mitte */
  z-index: 10; /* Garantiert, dass der Text VOR dem Bild liegt */
  width: 90%; /* Verhindert, dass langer Text an den Rand klatscht */
  
  /* Dein bisheriges Design */
  color: #ffffff !important;
  text-align: center;
  font-weight: 800;
  font-size: 2.8rem;
  margin: 0; 

  
  /* WICHTIG: Ein starker dunkler Schatten, damit man das Orange auf dem Foto gut lesen kann */
  text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Großansicht (Featherlight Lightbox) anpassen
   ========================================================================== */


/* 1. Rahmen komplett entfernen (Bild schwebt frei) */
.featherlight .featherlight-content {
  background: transparent !important; 
  padding: 0 !important;        
  border: none !important;
  border-radius: 0 !important;
}


/* 1. Oranger und schmalerer Rand um das große Bild 
  .featherlight .featherlight-content {
    background: #ff6600 !important; 
    padding: 2px !important;        
    border-radius: 4px;             
    line-height: 0 !important; /* Tötet den restlichen Text-Spalt! 
}  */

/* 2. Riesige Standard-Kästen komplett unsichtbar machen (auch bei Hover) */
.featherlight-next,
.featherlight-previous,
.featherlight-next:hover,
.featherlight-previous:hover {
  background: transparent !important; 
}

/* 3. Pfeile und kleiner Kasten: Standardmäßig unsichtbar */
.featherlight-next span,
.featherlight-previous span {
  color: #ff6600 !important;      
  font-size: 3rem !important;     
  text-shadow: 0 0 10px #000;     
  background: rgba(0, 0, 0, 0.4) !important; 
  padding: 10px 15px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  opacity: 0 !important; /* Macht den Pfeil und Kasten unsichtbar */
  transition: opacity 0.3s ease !important; /* Weiches Einblenden */
}

/* 4. Pfeile und kleiner Kasten: Sichtbar, sobald die Maus über die Bildhälfte fährt */
.featherlight-next:hover span,
.featherlight-previous:hover span {
  opacity: 1 !important; /* Blendet alles ein */
  background: rgba(0, 0, 0, 0.8) !important; /* Kasten wird etwas dunkler */
}

/* 5. Schließen-Kreuz (X) größer, orange und ganz nach vorne holen */
.featherlight .featherlight-close-icon {
  color: #ff6600 !important;
  font-size: 2.5rem !important;
  background: transparent !important; 
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important; 
  right: 15px !important;       
  top: 15px !important;
  z-index: 9999 !important; /* Zieht das X über alle anderen Flächen */
}


/* ==========================================================================
   Vollbild-Banner für Text- und Pixel-Seiten
   ========================================================================== */
.banner-fullwidth {
  width: 100vw !important;          /* !important zwingt die volle Breite auf */
  max-width: 100vw !important;      /* Überschreibt die Sicherheitsregel des Themes */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  height: 400px;                
  object-fit: cover;            
  margin-bottom: 3rem;          
  display: block;
  filter: brightness(0.55); /* <-- NEU: Dunkelt das Bannerbild sauber ab */
}

/* ==========================================================================
   Blätter-Navigation (Pagination) in der Galerie
   ========================================================================== */
.gallery-pagination {
  display: flex;
  justify-content: center; 
  align-items: center;     /* Senkrechte Ausrichtung für den gesamten Block */
  gap: 1.5rem;             
  margin: 2rem 0;          
}

/* NEU: Löscht alle unsichtbaren Abstände, die das Theme dazwischenfunkt */
.gallery-pagination .page-info,
.gallery-pagination .btn-page {
  margin: 0 !important;
  line-height: 1 !important;
  /* Falls der Pfeil auch IM orangen Kreis nicht ganz mittig ist: */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Mobile Anpassungen (Smartphones)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* 1. Footer übereinander stapeln anstatt nebeneinander */
  .article-footer {
    flex-direction: column;
    align-items: stretch !important; /* Gibt den Elementen innen den nötigen Platz */
    gap: 1.5rem;                     /* Abstand zwischen Icons und Link */
  }

  /* 2. Icons zwingend linksbündig ausrichten */
  .article-social-icons {
    justify-content: flex-start !important;
  }

  /* 3. Den "Zurück zur Timeline"-Link zwingend rechtsbündig ausrichten */
  .btn-back {
    justify-content: flex-end !important;
  }
  
}

/* ==========================================================================
   Banner-Container & Dunkles Overlay für Unterseiten
   ========================================================================== */

.banner-container {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  height: 400px;
  margin-bottom: 3rem;
  overflow: hidden;
}

/* Bild füllt den gesamten Kasten aus */
.banner-container .banner-fullwidth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  z-index: 1;
}

/* Die "Sonnenbrille": schwarze Tönungsschicht */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 0.45 = 45% Schwarz-Tönung. Falls dunkler gewünscht: auf 0.6 erhöhen */
  z-index: 2;
}

/* Titel liegt sicher ganz oben über der Tönung */
.banner-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 90%;
  margin: 0;
  text-align: center;
  color: #ff6600 !important;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem);
  text-shadow: 2px 2px 14px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   Kategorie- & Datumsleiste für Pixel-Seiten
   ========================================================================== */
.pixel-meta {
  max-width: 1000px;                  /* Exakt dieselbe Breite wie dein Text darunter */
  margin: -1rem auto 1rem auto;       /* Zieht die Zeile harmonisch nah ans Banner heran */
  padding: 0 1.5rem;                  /* Verhindert am Smartphone das Anstoßen an den Displayrand */
  display: flex;
  justify-content: space-between;     /* Schiebt Kategorie nach links und Datum nach rechts */
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;          /* Schreibt beides sauber in Großbuchstaben (PIXEL) */
}

.pixel-category,
.pixel-date {
  color: #ff6600 !important;          /* KTM-Orange */
}



/* ==========================================================================
   Meta-Leiste unterhalb des Banners für alle Unterseiten (Kategorie & Datum)
   ========================================================================== */
.subpage-meta {
  max-width: 800px;                   
  margin: -1rem auto 0 auto;          
  padding: 0 2.5rem;                  
  box-sizing: border-box;             
  display: flex;
  justify-content: space-between;     
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 1. Die beiden Links in der Meta-Leiste */
.subpage-meta-link {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Abstand zwischen Icon und Text */
  color: #ff6600; /* KTM-Orange */
  text-decoration: none; /* Kein Unterstrich */
  /* NEU: Wir animieren jetzt 'filter' anstelle von 'text-shadow', damit es weich einblendet */
  transition: color 0.2s ease, filter 0.2s ease;
}

/* 2. Hover-Effekt für die Links */
.subpage-meta-link:hover {
  color: #000000; /* Schrift (und damit auch das Icon) wird schwarz */
  
  /* NEU: drop-shadow umhüllt Text UND SVG-Icon mit einem doppelten, größeren Leuchten */
  filter: drop-shadow(0 0 8px #ff6600) drop-shadow(0 0 20px #ff6600);
}

/* 3. Das Icon neben der Kategorie */
.meta-icon svg {
  width: 18px; /* Etwas kleiner als in der Timeline */
  height: 18px;
  stroke: currentColor; /* Nimmt automatisch die Farbe des Links an (Orange, bei Hover greller) */
  fill: none;
  stroke-width: 2.5; /* Leicht dicker, damit es bei der kleinen Größe gut lesbar bleibt */
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block; /* Verhindert komische Abstände im Link */
}

/* Verringert den oberen Abstand der Lesekarte zur Meta-Leiste */
.article-wrapper {
  padding-top: 1.5rem !important;
}


/* ==========================================================================
   Universelle Link-Stile für alle Unterseiten (Wort, Pixel, Frame etc.)
   ========================================================================== */
.subpage-content a {
  color: #ff6600;                                 /* Kräftiges KTM-Orange */
  text-decoration: none;                          /* Kein Unterstrich */
  font-weight: 700;                               /* NEU: Macht die Schrift dauerhaft fett */
  transition: color 0.2s ease, filter 0.2s ease;  /* Übernimmt die weiche Filter-Animation der Meta-Links */
}

.subpage-content a:hover {
  color: #000000 !important;                      /* Schrift wird schwarz */
  filter: drop-shadow(0 0 8px #ff6600) drop-shadow(0 0 20px #ff6600); /* Der orange Leuchteffekt der Meta-Links */
  text-shadow: none;                              /* Schaltet den alten Text-Schatten ab */
}


/* ==========================================================================
   PUNKT: OpenStreetMap & GPX-Download
   ========================================================================== */

/* 1. Die Karten-Box */
.map-wrapper {
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.osm-map-box {
  width: 100%;
  height: 400px; /* Feste Höhe, damit die Karte Platz hat */
  background-color: #212529; /* Dunkler Platzhalter, bis die Karte lädt */
  z-index: 1; /* Hält die Karte auf der richtigen Ebene */
}

/* ==========================================================================
   GPX-Dashboard (Statistik & Download) - Zwei Versionen
   ========================================================================== */

/* VERSION 1: Nur grauer Kasten (ohne Strich) - AKTIV */
.gpx-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
  align-items: center;
  background-color: #212529; 
  border: none; /* Schaltet jeden Rahmen ab */
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  gap: 1.5rem;
}

/* ==========================================================================
   VERSION 2: Komplette orangene Umrandung - INAKTIV (auskommentiert)
   Um diese zu nutzen: Setze die Version 1 in CSS-Kommentare (/* ... 
   und entferne hier unten die Zeichen.
   ========================================================================= */

/*
.gpx-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
  align-items: center;
  background-color: #212529; 
  border: 2px solid #ff6600; border ohne -left zieht den Rahmen rundherum
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  gap: 1.5rem;
}
*/






/* Die linke Seite mit den Werten */
.gpx-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* Abstand zwischen den einzelnen Zahlen */
}

/* Ein einzelner Statistik-Block (Text oben, Zahl unten) */
.gpx-stat-item {
  display: flex;
  flex-direction: column;
}

/* Die kleinen Überschriften (z.B. "STRECKE") */
.stat-label {
  font-size: 0.75rem;
  color: #ff6600;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}

/* Die großen Zahlenwerte */
.stat-value {
  font-size: 1.3rem;
  color: #ffffff;
  font-weight: 700;
}

/* Der Button selbst */
.btn-gpx-download {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #ff6600 !important;
  border: 2px solid #ff6600;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-gpx-download:hover {
  background-color: #ff6600;
  color: #000000 !important;
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.6);
}

/* Anpassung für Smartphones (Bildschirme kleiner als 600px) */
@media (max-width: 600px) {
  .gpx-dashboard {
    flex-direction: column;
    align-items: flex-start;
  }
  .gpx-stats-grid {
    gap: 1.5rem;
  }
  .gpx-download-section,
  .btn-gpx-download {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   Footer-Leiste Startseite (Ausgelagert aus social.html.twig)
   ========================================================================== */

/* 1. Die durchgehende orangene Linie */
.footer-home-line {
  width: 100vw; 
  height: 2px; 
  background-color: #ff6600; 
  position: relative; 
  left: 50%; 
  right: 50%; 
  margin-left: -50vw; 
  margin-right: -50vw; 
  margin-top: 2rem; /* GEÄNDERT von 8rem für bündigen Abstand zur Timeline */
  z-index: 10;
}

/* 2. Container für Icons (links) und Text (rechts) */
.footer-home-container {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: 0;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  
  /* NEU: Breite & Ränder exakt auf die Timeline abstimmen */
  max-width: 1000px; 
  margin-left: auto; 
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* 3. Impressum & Datenschutz (Text-Styling) */
.footer-home-legal {
  margin-left: auto; /* Zwingt die Links ganz nach rechts */
}


/* ==========================================================================
   Reparatur für die Leaflet-Karten-Buttons (+/-)
   ========================================================================== */
.leaflet-bar a,
.leaflet-bar a:hover {
  width: 30px !important;
  height: 30px !important;
  /* NEU: Flexbox zentriert das + und - exakt in der Mitte */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  background-color: #fff !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 22px !important; /* Macht die Zeichen etwas größer */
  font-weight: bold !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Kategorie: Suchfeld, Text & Wandkalender-Raster
   ========================================================================== */

/* 1. Überschriften aus dem Admin-Textfeld zentrieren */
.kategorie-wrapper h1,
.kategorie-wrapper h2,
.kategorie-wrapper h3 {
  text-align: center;
  color: #ffffff;
}

/* 2. Such-Container zentrieren */
.kategorie-suche {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 3rem;
}

.kategorie-suche .search-wrapper {
  width: 100%;
  max-width: 550px;
}

.kategorie-search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* 3. Das Suchfeld (schön breit) */
.kategorie-search-form input[type="text"].search-input {
  flex-grow: 1 !important;
  width: 100% !important;
  min-width: 250px;
  box-sizing: border-box;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #212529;
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  outline: none;
}

/* 4. Runder Such-Button (strikte Kreisform fixiert) */
.search-badge-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important; /* Verhindert jedes Zusammendrücken oder Auseinanderziehen */
  border-radius: 50% !important;
  background-color: #212529;
  border: 2px solid #ff6600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.search-badge-btn svg {
  width: 20px;
  height: 20px;
  stroke: #ff6600;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* Hover: Kreis füllt sich orange, Lupe wird schwarz */
.search-badge-btn:hover {
  background-color: #ff6600;
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.85);
}

.search-badge-btn:hover svg {
  stroke: #000000;
}


/* 4. Das unsichtbare Gitter für die Kacheln */
.kategorie-kalender {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* 5. Die Kachel exakt im Stil deiner Timeline-Karten (ohne orangen Strich) */
.kalender-blatt {
  background-color: #212529; /* Dunkles Timeline-Grau */
  border-radius: 10px;       /* Gleiche Rundung wie Timeline */
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05); /* Zarter grauer Rand */
  transition: all 0.2s ease;
}

/* 6. Hover-Effekt: Rahmen wird orange, Hintergrund bleibt gleich */
.kalender-blatt:hover {
  background-color: #212529;          /* Hintergrund bleibt auf dem dunklen Standard-Grau */
  border-color: #ff6600;              /* Es erscheint ein oranger Rahmen */
  transform: translateY(-3px);        /* Kachel hebt sich leicht an */
  box-shadow: 0 8px 25px rgba(255, 102, 0, 0.15); /* Zarter oranger Schatten */
}


/* 7. Datum in der Kachel (Standard) */
.kalender-datum {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #ff6600; /* Standardmäßig Orange */
  margin-bottom: 0.8rem;
  transition: color 0.2s ease;
}

.kalender-tag {
  font-size: 1.5rem;
  font-weight: bold;
}

.kalender-monat {
  font-size: 1rem;
  font-weight: bold;
}

/* 8. Der Titel des Beitrags (Standard) */
.kalender-titel {
  font-size: 1.35rem; /* Gleiche Größe wie auf der Timeline */
  font-weight: bold;
  line-height: 1.4;
  color: #ffffff;     /* Standardmäßig Weiß */
  transition: color 0.2s ease;
}

/* 9. Hover-Farben: Titel wird Orange, Datum wird Schwarz */
.kalender-blatt:hover .kalender-titel {
  color: #ff6600;                     /* Die Beschreibung (Titel) wird orange */
}

.kalender-blatt:hover .kalender-datum {
  color: #000000;                     /* Das komplette Datum wird pechschwarz */
}


/* ==========================================================================
   Suchseite (SimpleSearch)
   ========================================================================== */

.search-page-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.search-intro {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Eingabebereich und Button */
.search-form-container {
    margin-bottom: 3rem;
}

.search-input-group {
    display: flex;
    gap: 0.5rem;
}

.search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background-color: #212529; /* Dunkler Hintergrund wie bei deinen anderen Elementen */
    color: #ffffff; /* Weiße Schrift im Feld */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    border-color: #ff6600; /* KTM-Orange statt Blau */
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); /* Zarter oranger Leuchteffekt */
}

.search-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #ff6600; /* KTM-Orange als Button-Hintergrund */
    color: #ffffff; /* Weißer Text auf dem Button */
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.search-button:hover {
    background-color: #e65c00; /* Etwas dunkleres Orange beim Hovern */
}

.search-button:active {
    transform: scale(0.98);
}

/* Trefferliste */
.search-results-section {
    border-top: none; /* Den grauen Strich oben entfernen */
    padding-top: 2rem;
}

.search-count {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-bottom: 1.5rem;
}

/* 1. Das quadratische PicoCSS-Kästchen und alle Linien radikal entfernen */
ul.search-results-list li.search-result-item {
    list-style: none !important;
    list-style-type: none !important;
    border-bottom: none !important;
    background: transparent !important; /* Verhindert Striche durch alte Hintergrund-Tricks */
}

/* 2. Link-Farbe (Standard KTM-Orange) erzwingen */
ul.search-results-list li.search-result-item h3 a.subpage-meta-link {
    color: #ff6600 !important;
    transition: color 0.2s ease, filter 0.2s ease;
}

/* 3. Hover-Farbe (Schwarz mit orangem Leuchten) beim Drüberfahren */
ul.search-results-list li.search-result-item h3 a.subpage-meta-link:hover {
    color: #000000 !important;
    filter: drop-shadow(0 0 8px #ff6600) drop-shadow(0 0 20px #ff6600);
}

/* Schaltet das weiße Standard-Kästchen vom Quark-Theme ab */
.search-result-item::before {
    display: none !important;
    content: none !important;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.search-result-item h3 a {
    text-decoration: none;
    color: var(--q2-link, #007acc);
}

.search-result-item h3 a:hover {
    text-decoration: underline;
}

.search-snippet {
    margin: 0;
    line-height: 1.5;
    opacity: 0.85;
}

.no-results {
    font-style: italic;
    opacity: 0.8;
}

/* Entfernt den kurzen Strich vor den Überschriften auf der Suchseite */
.search-results-section h2::before {
    display: none !important;
}