@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../_fonts/lora-v37-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../_fonts/rubik-v31-latin-regular.woff2') format('woff2');
}

:root {
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-brand: #f07f3c;
  --color-brand-hover: #d96a27;
  --color-bg-page: #f6f4ef;      /* Warmes Alabaster / Heller Sandstone */
  --color-bg-subtle: #eae5d9;    /* Leicht dunklere Erdfarbe für Akzente */
  --color-text-main: #2c2724;     /* Tiefes Erd-Schwarzbraun */
  --color-text-muted: #2c2724;   
  --color-border: #e2ded3;       /* Weiche organische Trennlinie */
  --color-white: #ffffff;

  --max-width-content: 1140px;
  --max-width-text: 800px;
}

/* CSS Reset & Basics */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit; /* Übernimmt exakt die Textfarbe des umgebenden Textes */
  text-decoration: underline; /* Standardmäßig unterstrichen */
  transition: color 0.2s ease, text-decoration 0.2s ease; /* Weicher Übergang für Farbe und Linie */
}

a:hover {
  color: orange; /* Wird beim Drüberfahren Orange (oder deine Variable, z. B. var(--color-brand-hover)) */
  text-decoration: none; /* Unterstreichung verschwindet beim Mouseover */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   HEADER & NAVIGATION (Siegellayout & Ohne Strich)
   ========================================== --> */
.site-header {
  background-color: var(--color-white);
  /* border-bottom entfernt für nahtlosen Übergang */
  position: relative;
  z-index: 10;
}

.header-inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 4px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.logo-container {
  grid-column: 2;
  text-align: center;
  position: relative;
  z-index: 20;
}

/* Siegel-Effekt: Logo ragt nach unten heraus */
.logo-container a {
  display: inline-block;
  margin-bottom: -52px; /* Siegel-Überlappung nach unten */
}

.logo-container img {
  width: auto;
  height: 160px; /* Angenehme, nicht zu dominante Höhe */
  max-width: 176px;
  object-fit: contain;
  filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.06)); /* Hält das Siegel optisch über dem Content */
}

.nav-left {
  grid-column: 1;
  display: flex;
  gap: 65px;
  justify-content: flex-start;
}

.nav-right {
  grid-column: 3;
  display: flex;
  gap: 65px;
  justify-content: flex-end;
  align-items: center;
}

.nav-link {
  font-weight: 500;
  color: var(--color-text-main);
  font-size: 1.1rem;
  text-decoration: none !important; /* Verhindert jegliche Unterstreichung bei <a> Links */
}
.nav-link:hover {
  color: var(--color-brand);
}

.search-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  padding: 5px;
}
.search-toggle-btn:hover {
  color: var(--color-brand);
}

/* Suchleiste Dropdown */
.search-bar {
  display: none;
  background-color: var(--color-bg-subtle);
  padding: 55px 40px;
}
.search-bar.active {
  display: block;
}
.search-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}
.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}
.search-submit {
  background-color: var(--color-brand);
  color: var(--color-white);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

/* Mobile Controls */
.mobile-left, .mobile-right {
  display: none;
}

.mobile-menu-drawer {
  display: none;
  background-color: var(--color-white);
  padding: 20px;
}
.mobile-menu-drawer.active {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ==========================================
   CONTENT AREA
   ========================================== --> */

h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-main);
  margin-bottom: 15px;
}

h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 40px 0 20px;
  color: var(--color-text-main);
  text-align: left;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 40px 0 20px;
  color: var(--color-text-main);
  text-align: left;
}

/* Grundkonfiguration für Unordered Lists */
ul {
  padding-left: 1.5rem; /* Zieht die Bullets sauber in den Contentbereich hinein */
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  list-style-type: disc; /* Klassischer runder Aufzählungspunkt */
  list-style-position: outside; /* Hält den Einzug bei mehrzeiligem Text sauber */
}

/* Einzelne Listenpunkte */
li {
  font-family: var(--font-body);
  line-height: 1.6;
  margin-bottom: 0.5rem; /* Abstand zwischen den Listenpunkten */
  color: inherit; /* Übernimmt die Fließtextfarbe */
}

/* Letzter Listenpunkt braucht keinen unteren Abstand */
li:last-child {
  margin-bottom: 0;
}

/* Verschachtelte Listen (Falls du mal eine Liste in einer Liste hast) */
ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  list-style-type: circle; /* Untergeordneter Bullet wird zum hohlen Kreis */
}

.main-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 60px 20px 80px; /* Oben etwas mehr Abstand wegen dem Siegel-Logo */
}

/* Touren-Header & Titel */
.tour-header {
  text-align: center;
  margin-bottom: 35px;
}

.category-badge {
  display: inline-block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--color-brand);
  margin-bottom: 10px;
}

.tour-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* ==========================================
   HERO BILD
   ========================================== */

.hero-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1140 / 755;
  background-color: #e5dfd3; /* Skeleton Platzhalter gegen CLS */
  overflow: hidden;
  margin-bottom: 40px;
}

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

/* DESKTOP (ab 901px): Abgerundete Ecken & bündig im Container */
@media (min-width: 901px) {
  .hero-image-wrapper {
    border-radius: 8px;
  }
}

/* MOBILGERÄTE (bis 900px): Full-Width Edge-to-Edge */
@media (max-width: 900px) {
  .hero-image-wrapper {
    /* Sprengt den seitlichen Padding-Abstand des Parent-Containers */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0; /* Keine Eckenrundung auf Mobil */
    margin-bottom: 30px;
  }
}

/* 6 Tourencharakter-Boxen */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  margin-bottom: 50px;
}

.fact-box {
  border: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.4);
  padding: 15px 10px;
  border-radius: 6px;
  text-align: center;
}

.fact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.fact-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-main);
}

/* Fließtext Content */
.article-body {
  max-width: var(--max-width-text);
  margin: 0 auto;
}

.article-body p {
  margin-bottom: 20px;
}

/* Haupt-Button Klasse (für <button> und <a>) */
.btn-primary {
  display: inline-block;
  background-color: var(--color-brand);
  color: var(--color-white) !important; /* Fixiert die weiße Schriftfarbe */
  padding: 16px 28px;
  border-radius: 8px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none !important; /* Verhindert jegliche Unterstreichung bei <a> Links */
  text-align: center;
  transition: background-color 0.2s ease;
  
  /* Zurücksetzen von Standard-Formular-Styles */
  -webkit-appearance: none;
  appearance: none;
}

/* Hover- & Focus-Zustand */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-brand-hover);
  color: var(--color-white) !important; /* Bleibt beim Hover garantiert weiß */
  text-decoration: none !important; /* Verhindert Unterstreichung auch beim Drüberfahren */
}

.text-center {
  text-align: center;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== --> */
@media (max-width: 900px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
  }

  .nav-left, .nav-right {
    display: none;
  }

  .mobile-left, .mobile-right {
    display: flex;
    align-items: center;
  }

  .logo-container a {
    margin-bottom: -45px; /* Etwas kleinerer Überlapp auf Mobilgeräten */
  }

  .logo-container img {
    height: 140px;
  }

  .main-container {
    padding-top: 45px;
  }

  .tour-title {
    font-size: 2rem;
  }

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

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

#map1 {
    width:100%;
    height:540px;
    float:left;
}

/* Container für das Contentbild */
.content-image-full {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

/* Bild-Styling Standard (Desktop) */
.content-image-full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Bildunterschrift Styling (Magazin-Look) */
.content-image-full figcaption {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
  color: #555555; /* Dezent dunklerer Grauton für Bildunterschriften */
  margin-top: 0.5rem;
  text-align: left;
}

/* Mobil-Viewports: Bild bricht auf volle Bildschirmbreite aus */
@media (max-width: 768px) {
  .content-image-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
  }

  .content-image-full img {
    border-radius: 0;
  }

  /* Bildunterschrift auf Mobilgeräten wieder einrücken, damit der Text nicht am Rand klebt */
  .content-image-full figcaption {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Galerie-Layout: 4 Spalten auf Desktop, 2 Spalten auf Mobilgeräten */
/* Galerie-Layout: 4 Spalten auf Desktop, 2 Spalten auf Mobilgeräten */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Max. 4 Bilder nebeneinander */
  gap: 1.25rem; /* Abstand zwischen den Galerie-Elementen */
  margin-top: 3.5rem;   /* Mehr Abstand zum Content darüber */
  margin-bottom: 3.5rem;/* Mehr Abstand zum Content darunter */
}

/* Einzelnes Galerie-Element */
.thumbnail {
  display: flex;
  flex-direction: column;
}

/* Link-Container */
.thumbnail a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* Erzwingt das quadratische Format */
  border-radius: 8px;  /* Abgerundete Ecken */
  overflow: hidden;    /* Schneidet überstehende Bildbereiche an den Ecken ab */
  background-color: #e5e2d9; /* Dezent dunklerer Erdton als Lade-Platzhalter */
}

/* Das Vorschaubild selbst */
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Schneidet das Bild füllend und ohne Verzerrung zu */
  object-position: center; /* Zentriert den Bildausschnitt */
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Subtiler Magazin-Hover-Effekt */
.thumbnail a:hover img {
  transform: scale(1.04); /* Leichtes Heranzoomen beim Drüberfahren */
  opacity: 0.95;
}

/* Beschriftung unter dem Vorschaubild */
.thumb-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.35;
  color: #555555;
  margin-top: 0.5rem;
}

/* Responsive Anpassung für Tablets & Smartphones */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Exakt 2 Bilder nebeneinander */
    gap: 0.875rem; /* Etwas kleinerer Raster-Abstand auf mobilen Displays */
    margin-top: 2.5rem;    /* Harmonisierter mobiler Vertikalabstand */
    margin-bottom: 2.5rem;
  }
}

/* Container für die Quick-Links */
.tour-quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Buttons nebeneinander auf Desktop */
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Styling der unaufdringlichen Quick-Buttons im Erdton-Look */
.btn-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  
  /* Dezent dunklerer Erdton als dein Seitenhintergrund (#f6f4ef) */
  background-color: #e8e4d9; 
  color: #3a3834 !important; /* Dunkles, warmes Anthrazit statt Rein-Schwarz */
  border: 1px solid #d8d2c2;   /* Subtile Umrandung für klare Strukturen */
  
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Hover- & Focus-Zustand: Abdunkeln im Erdton oder dezent orange Akzentuieren */
.btn-quick:hover,
.btn-quick:focus {
  background-color: #dad4c3;  /* Sanftes Nachdunkeln beim Drüberfahren */
  border-color: #c8c0ac;
  color: #1a1918 !important;
  text-decoration: none !important;
}

.btn-quick:active {
  transform: translateY(1px);
}

/* SVG-Icons nehmen automatisch die Textfarbe an */
.btn-quick svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Mobilgeräte & Tablets: 2x2 Grid */
@media (max-width: 768px) {
  .tour-quick-links {
    grid-template-columns: repeat(2, 1fr); /* 2x2 Anordnung */
    gap: 0.625rem;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
  }

  .btn-quick {
    padding: 12px 10px; /* Leicht höheres Touch-Target für Smartphones */
    font-size: 0.875rem;
  }
}


/* Haupt-Container der Vorschaubox (Relativ für Klick-Overlay) */
.next-tour-box {
  position: relative;
  background-color: #eeebe3;
  border: 1px solid #dcd6c8;
  border-radius: 8px;
  padding: 1.75rem;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekte für die gesamte Kachel */
.next-tour-box:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.next-tour-box:hover .next-tour-image img {
  transform: scale(1.03);
}

.next-tour-box:hover .next-tour-title a {
  color: var(--color-brand);
}

/* Header über volle Breite */
.next-tour-header {
  margin-bottom: 1.25rem;
}

.next-tour-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  background-color: #453c35;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.next-tour-region {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.next-tour-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0;
}

.next-tour-title a {
  color: #2b2823;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Klick-Overlay spannt sich über den Hauptlink aus */
.main-card-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Inhaltsbereich: center sorgt dafür, dass der Text vertikal zentriert und nicht auseinandergezogen wird */
.next-tour-content {
  display: flex;
  gap: 2.5rem;
  align-items: center; /* Verhindert das Auseinanderziehen der Zeilen */
}

/* Etwas kompakterer Bildbereich links (~32% / max 310px) im Originalverhältnis */
.next-tour-image {
  flex: 0 0 32%;
  max-width: 310px;
}

.next-tour-image a {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1140 / 755;
}

.next-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Info-Bereich rechts */
.next-tour-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Touren-Kennzahlen Grid mit kompakterem Zeilenabstand */
.next-tour-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem 2.5rem; /* Reduzierter vertikaler Abstand zwischen den Kennzahlen */
  padding: 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 1rem; /* Angenehme, ausgewogene Schriftgröße */
}

.stat-label {
  color: #555045;
  font-weight: 400;
}

.stat-value {
  color: #1a1918;
  font-weight: 600;
}

/* --- Schwierigkeits-Badges (Dezent farbig hinterlegt mit abgerundeten Ecken) --- */
.difficulty-badge {
  display: inline-block;
  padding: 0.125rem 0.9375rem;
  border-radius: 4px;
  font-weight: 600;
}

/* Blau für T1, T2- */
.difficulty-badge.level-blue {
  background-color: rgba(30, 144, 255, 0.12);
  color: #1068c2;
}

/* Rot für T2, T3- */
.difficulty-badge.level-red {
  background-color: rgba(220, 53, 69, 0.12);
  color: #b52a37;
}

/* Schwarz ab T3 */
.difficulty-badge.level-black {
  background-color: rgba(26, 25, 24, 0.1);
  color: #1a1918;
}

/* Responsive: Umbruch & 1-spaltige Details auf Mobilgeräten */
@media (max-width: 800px) {
  .next-tour-box {
    padding: 1.25rem;
  }

  .next-tour-title {
    font-size: 1.25rem;
  }

  .next-tour-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .next-tour-image {
    flex: 100%;
    max-width: 100%;
  }

  .next-tour-image a {
    aspect-ratio: 16 / 9;
  }

  .next-tour-stats {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    padding: 0;
  }

  .stat-item {
    font-size: 0.875rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px dashed #e2dcd0;
  }

  .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}


@media (max-width: 580px) {
  .stat-item {
    padding-bottom: 0.375rem;
  }
}

/* Haupt-Footer Container (Warmer, erdiger Naturton) */
.site-footer {
  background-color: #453c35;
  color: #ffffff;
  padding-top: 4rem;
  padding-bottom: 3rem;
  margin-top: 5rem;
  border-top: 1px solid #544a42;
}

/* Einspaltiger Haupt-Container */
.footer-container-single {
  max-width: 760px; /* Leicht erweitert für den größeren Blockabstand */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}

/* Brand & Fuchs-Grafik */
.footer-brand-centered {
  margin-bottom: 2.5rem;
}

.footer-logo {
  height: auto;
  max-width: 140px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
  margin: 0 auto;
  max-width: 500px;
}

/* Zweispaltiger Block unter der Tagline (Zentriert & mit größerem Abstand) */
.footer-nav-blocks {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6rem; /* Abstand zwischen den Blöcken spürbar vergrößert */
  margin-bottom: 2.5rem;
  text-align: center; /* Zentriert alle Inhalte innerhalb der Blöcke */
}

.footer-nav-block {
  min-width: 180px;
  text-align: center; /* Explizite Zentrierung für den einzelnen Block */
}

/* Überschriften der Blöcke (zentriert) */
.footer-block-heading {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  text-align: center; /* Garantiert zentrierte Überschriften */
}

/* Untereinanderstehende Links im Block (zentriert) */
.footer-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* Zentriert die Link-Einträge */
}

.footer-block-list li {
  margin-bottom: 0.625rem;
}

.footer-block-list a {
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer-block-list a:hover {
  color: var(--color-brand) !important;
}

/* Social, Creator & Meta-Bereich */
.footer-meta-centered {
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Instagram Link */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.social-link svg {
  stroke: #ffffff;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.social-link:hover {
  color: var(--color-brand) !important;
}

.social-link:hover svg {
  stroke: var(--color-brand);
  transform: scale(1.1);
}

/* Ersteller-Hinweis (Fließtext-Schrift Rubik) */
.footer-creator {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #e5e0d8;
  margin: 0;
}

.creator-name {
  font-family: var(--font-body);
  font-weight: 500;
  color: #ffffff;
}

/* Copyright */
.footer-copyright {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #d2cbbf;
  margin: 0;
  opacity: 0.85;
}

/* Responsive Anpassung für Smartphones */
@media (max-width: 580px) {
  h1 {
      font-size: 1.8rem;
  }

  h2 {
      font-size: 1.4rem;
  }
  .footer-nav-blocks {
    flex-direction: column;
    align-items: center; /* Zentriert die Blöcke horizontal auf Mobilgeräten */
    gap: 2rem;
  }

  .footer-nav-block {
    width: 100%;
    text-align: center; /* Garantiert zentrierten Text für alle Links & Überschriften */
  }
    
  .logo-container a {
    margin-bottom: -45px; /* Etwas kleinerer Überlapp auf Mobilgeräten */
  }

  .logo-container img {
    height: 120px;
  }
}

/* Container-Layout für Copyright & Scroll-Top-Button */
.footer-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

/* Container-Layout für Copyright & Scroll-Top-Button */
.footer-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem; /* Abstand zum Copyright deutlich vergrößert */
  margin-top: 0.5rem;
}

/* "Nach oben"-Button (Präsentere & größere Variante) */
.scroll-to-top {
  margin: 3rem 0rem 3.8rem 0rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem; /* Vergrößert auf ~15px */
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.85;
  padding: 0.5rem 1.125rem; /* Großzügigerer Klickbereich */
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.08); /* Dezent heller Kasten im Footer-Erdton */
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s ease;
}

.scroll-to-top svg {
  width: 22px; /* Größeres Icon */
  height: 22px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

/* Hover- & Focus-Zustand */
.scroll-to-top:hover,
.scroll-to-top:focus {
  color: #ffffff !important;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
}

.scroll-to-top:hover svg {
  transform: translateY(-4px); /* Pfeil schwebt beim Drüberfahren spürbar nach oben */
}