/*
Theme Name: Travel Agency
Theme URI: https://rarathemes.com/wordpress-themes/travel-agency/
Author: Rara Theme (MODIFIED FOR SEEHASEN)
Author URI: https://rarathemes.com/
Description: Dies ist die Travel Agency-Theme-Basis, modifiziert für Seehasen, mit Blur-Hintergrund, mehr Inhalt und lockerere Texte, passender Footer und Balken.
Version: 999.2.0
Text Domain: travel-agency
License: GPL v2 or later
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Open+Sans:wght@400;600&display=swap');

/* ================================
   VARIABLEN / FARBTÖNE
   ================================ */
:root {
  --seehasen-primary: #ff5f6d;
  --seehasen-secondary: #ffc371;
  --seehasen-header-bg: linear-gradient(135deg, var(--seehasen-primary) 0%, var(--seehasen-secondary) 100%);
  --seehasen-text: #333;
  --seehasen-heading: #1e2b45;
  --seehasen-link-hover: #ffe66d;
  --seehasen-hero-blur: 5px;
  --heading-font: 'Amatic SC', cursive, sans-serif;
  --body-font: 'Open Sans', sans-serif;
  --footer-bg: var(--seehasen-header-bg);  /* unten gleicher Verlauf wie oben */
  --footer-text-color: #fff;
}

/* ==============
   BASE
   ============== */
body, button, input, select, optgroup, textarea {
  font-family: var(--body-font);
  color: var(--seehasen-text);
  font-size: 16px;
  line-height: 1.75em;
  background: #fdfdfd;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--seehasen-heading);
  margin-bottom: 0.7em;
}

/* Links */
a {
  color: var(--seehasen-primary);
  text-decoration: none;
}
a:hover {
  color: var(--seehasen-link-hover);
  text-decoration: underline;
}

/* ==============
   HEADER
   ============== */
.site-header .header-t, .site-header .header-b {
    background: var(--seehasen-header-bg) !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    /* padding: 10px 15px; */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-left .logo-image {
  height: 50px;
  width: auto;
}
.header-left .site-branding .site-title a {
  font-size: 2rem !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.header-left .site-branding .site-title a:hover {
  color: var(--seehasen-link-hover) !important;
}

/* Navigation */
.main-navigation a {
  color: #fff !important;
  transition: color 0.3s;
  font-weight: 600;
}
.main-navigation a:hover {
  color: var(--seehasen-link-hover) !important;
}
.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.main-navigation li {
  position: relative;
}

/* ==============
   HERO
   ============== */
.hero-boom {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  margin-bottom: 40px;
}
.hero-boom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://i.ibb.co/DM19z0d/strandkoerbe-am-strand-von-niendorf-ostsee-1059eb9e-3e0f-42a1-b00c-e9967b7e3a53.jpg")
              center/cover no-repeat;
  filter: blur(var(--seehasen-hero-blur));
  z-index: 0;
}
.hero-boom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.hero-boom .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  animation: fadeIn 2s ease forwards;
  opacity: 0;
  background: rgba(0,0,0,0.3);
  padding: 20px 30px;
  border-radius: 8px;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
.hero-boom .hero-hase {
  width: 120px;
  margin: 0 auto 10px auto;
  display: block;
  animation: bounceHase 2s infinite alternate;
}
@keyframes bounceHase {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
.hero-boom h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  letter-spacing: 3px;
  color: #ffeaa7;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-boom p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ==============
   ORTE & SEEN-KACHELN
   ============== */
.orte-seen-wrapper {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}
.orte-seen-wrapper h2 {
  text-align: center;
  font-size: 2.2rem;
  color: var(--seehasen-primary);
  margin-bottom: 30px;
  letter-spacing: 1.5px;
}
.orte-grid,
.seen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.rubrik-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 25px 15px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.rubrik-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.rubrik-card h3 {
  font-family: var(--heading-font);
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #005f99;
}
.rubrik-card p {
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.rubrik-btn {
  display: inline-block;
  background: var(--seehasen-primary);
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.3s, transform 0.3s;
}
.rubrik-btn:hover {
  background: #ff877e;
  transform: scale(1.05);
}

/* ==============
   HIGHLIGHTS / EVENTS
   ============== */
.highlights-wrapper,
.events-wrapper {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.highlights-title,
.events-title {
  text-align: center;
  font-size: 2rem;
  color: var(--seehasen-secondary);
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.highlight-card,
.event-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s;
}
.highlight-card:hover,
.event-card:hover {
  transform: translateY(-3px);
}
.highlight-card h3,
.event-card h3 {
  font-family: var(--heading-font);
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--seehasen-primary);
}
.highlight-card p,
.event-card p {
  margin-bottom: 0.8em;
  font-size: 1rem;
}

/* ==============
   BEREICH "KENNST DU SCHON?" Unten
   ============== */
.kennst-du-schon-wrapper {
  background: var(--footer-bg); /* = gleicher Farbverlauf wie oben */
  color: var(--footer-text-color);
  text-align: center;
  padding: 30px 10px;
}
.kennst-du-schon-wrapper h2 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 10px;
  color: #ffcfcf; /* leicht abgesetzter heller Ton */
  letter-spacing: 2px;
}
.kennst-du-schon-wrapper p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}
.kennst-du-schon-wrapper a {
  color: #ffe66d;
  text-decoration: underline;
  font-weight: 600;
}
.kennst-du-schon-wrapper a:hover {
  color: #fff;
}

/* ==============
   FOOTER
   ============== */
.site-footer .footer-t,
.site-footer .footer-b {
  background: var(--footer-bg) !important;
  color: var(--footer-text-color) !important;
  padding: 20px 15px;
  text-align: center;
}
.site-footer .footer-b .footer-links {
  margin-bottom: 10px;
}
.site-footer .footer-b .footer-links a {
  color: #ffe66d;
  margin: 0 8px;
}
.site-footer .footer-b .footer-links a:hover {
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-b .copyright {
  color: #fff;
  font-size: 0.9rem;
}

/* Spezifische Stile NUR für den Body der Impressum-Seite (page-id-43) */
.page-id-43 .content-area {
  text-align: center; /* Zentriert nur den Inhalt */
}

.page-id-43 .content-area h1, 
.page-id-43 .content-area h2 {
  font-family: 'Amatic SC', cursive !important;
  font-size: 2.3rem; /* Gleiche Größe wie Datenschutzerklärung */
  color: var(--seehasen-primary) !important;
  margin-bottom: 20px !important;
}

.page-id-43 .content-area h3 {
  font-family: 'Open Sans', sans-serif; /* Gleiche Schriftart für kleine Überschriften */
  font-size: 1.5rem; /* Größere Schriftgröße für bessere Lesbarkeit */
  font-weight: 600; /* Stärkere Gewichtung */
  color: var(--seehasen-text); /* Gleiche Farbe wie Datenschutz */
  margin-bottom: 15px;
}

.page-id-43 .content-area p {
  font-size: 1.2rem;
  line-height: 1.8; /* Standard-Zeilenhöhe für Absätze */
  margin: 10px auto;
  color: var(--seehasen-text);
  max-width: 800px; /* Begrenzte Breite für bessere Lesbarkeit */
}

.page-id-43 .content-area img {
  display: block;
  margin: 20px auto;
  max-width: 150px; /* Begrenzte Größe für das Bild */
  border-radius: 8px; /* Optional: Abgerundete Ecken */
}

.page-id-43 .content-area a {
  color: var(--seehasen-primary);
  text-decoration: underline;
  font-weight: 600;
}

.page-id-43 .content-area a:hover {
  color: var(--seehasen-link-hover);
}

/* Sicherstellen, dass der Header unverändert bleibt */
.page-id-43 .site-header {
  background: var(--seehasen-header-bg) !important; /* Behalte den Verlauf */
  color: #fff !important;
}

.page-id-43 .header-left .site-title {
  font-family: 'Amatic SC', cursive; /* Konsistente Schriftart */
  font-size: 2rem;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left; /* Links ausgerichtet */
}

.page-id-43 .main-navigation {
  text-align: right; /* Navigation rechts ausgerichtet */
}

.page-id-43 .main-navigation a {
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
}

.page-id-43 .main-navigation a:hover {
  color: var(--seehasen-link-hover) !important;
}

/* Footer bleibt global gleich */
.page-id-43 .site-footer {
  background: var(--footer-bg);
  color: var(--footer-text-color);
}

/* ==================
   Mobile Optimierungen
   ================== */
@media (max-width: 768px) {
  /* Textgrößen für Mobilgeräte anpassen */
  .page-id-43 .content-area h1, 
  .page-id-43 .content-area h2 {
    font-size: 2.5rem !important; /* Reduzierte Größe für Mobilgeräte */
    margin-bottom: 15px !important; /* Weniger Abstand */
  }

  .page-id-43 .content-area h3 {
    font-size: 1.2rem; /* Kleinere Überschriften */
    margin-bottom: 10px;
  }

  .page-id-43 .content-area p {
    font-size: 1rem; /* Reduzierte Schriftgröße */
    line-height: 1.4; /* Geringerer Zeilenabstand */
    margin: 8px auto; /* Kleinere Abstände */
    max-width: 90%; /* Breite auf dem Bildschirm begrenzen */
  }

  .page-id-43 .content-area img {
    max-width: 100px; /* Bildgröße für Mobilgeräte */
  }

  /* Navigation auf kleineren Bildschirmen */
  .page-id-43 .main-navigation {
    text-align: center; /* Zentrierte Navigation */
  }

  .page-id-43 .main-navigation a {
    font-size: 0.9rem; /* Kleinere Schriftgröße */
  }

  /* Titel anpassen */
  .page-id-43 .header-left .site-title {
    font-size: 1.5rem; /* Reduzierte Schriftgröße */
    text-align: center; /* Zentriert auf kleineren Geräten */
  }
}

/* ==================
   Anpassung des Body line-height nur für page-id-43
   ================== */
.page-id-43 body {
  line-height: 2.1em !important; /* Nur für die Impressum-Seite */
}

/* Sicherstellen, dass der Header unverändert bleibt */
.page-id-51 .site-header {
  background: var(--seehasen-header-bg) !important; /* Behalte den Verlauf */
  color: #fff !important;
}

.page-id-51 .header-left .site-title {
  font-family: 'Amatic SC', cursive; /* Konsistente Schriftart */
  font-size: 2rem;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left; /* Links ausgerichtet */
}

.page-id-51 .main-navigation {
  text-align: right; /* Navigation rechts ausgerichtet */
}

.page-id-51 .main-navigation a {
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
}

.page-id-51 .main-navigation a:hover {
  color: var(--seehasen-link-hover) !important;
}

/* Spezifische Stile NUR für den Body der Datenschutzerklärung-Seite (page-id-51) */
.page-id-51 .content-area {
  text-align: center; /* Zentriert nur den Inhalt */
}

.page-id-51 .content-area h1, 
.page-id-51 .content-area h2 {
  font-family: 'Amatic SC', cursive;
  font-size: 3.3rem;
  color: var(--seehasen-primary);
  margin-bottom: 20px;
}

.page-id-51 .content-area p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 10px auto;
  color: var(--seehasen-text);
  max-width: 800px; /* Begrenzte Breite für bessere Lesbarkeit */
}

.page-id-51 .content-area img {
  display: block;
  margin: 20px auto;
  max-width: 150px; /* Begrenzte Größe für das Bild */
  border-radius: 8px; /* Optional: Abgerundete Ecken */
}

.page-id-51 .content-area a {
  color: var(--seehasen-primary);
  text-decoration: underline;
  font-weight: 600;
}

.page-id-51 .content-area a:hover {
  color: var(--seehasen-link-hover);
}

/* Footer bleibt global gleich */
.page-id-51 .site-footer {
  background: var(--footer-bg);
  color: var(--footer-text-color);
}

/* ==============
   RESPONSIVE
   ============== */
@media (max-width: 768px) {
  .hero-boom {
    min-height: 50vh;
  }
  .hero-boom h1 {
    font-size: 2.3rem;
    letter-spacing: 2px;
  }
  .orte-grid,
  .seen-grid {
    grid-template-columns: 1fr 1fr;
  }
}