/* =========================================================
   IG Modellbau DGzRS – Design-Tokens
   Farbwelt abgeleitet von der realen DGzRS-Rettungskreuzer-
   Lackierung (Weiß/Orange/Rot). Formsprache angelehnt an
   technische Schiffs-Baupläne ("Blueprint"/Linienriss).
   ========================================================= */
:root{
  /* Farben */
  --c-navy:      #0F2438;   /* Tiefsee/Werftnacht – dunkler Grundton */
  --c-navy-2:    #16324A;   /* etwas heller für Verläufe/Karten auf dunklem Grund */
  --c-paper:     #F5F2EA;   /* Papier/Planpapier – heller Grundton */
  --c-paper-2:   #ECE7D9;   /* dezente Fläche auf hellem Grund */
  --c-orange:    #E15B22;   /* DGzRS-Rettungsorange – Hauptakzent */
  --c-orange-d:  #B8461A;   /* dunkleres Orange für Hover/Kontrast */
  --c-red:       #A82A2E;   /* Wasserpass-Rot – zurückhaltender Zweitakzent */
  --c-slate:     #5C7A8A;   /* Blaugrau – sekundärer Text, Linien */
  --c-ink:       #14202A;   /* Fließtext auf hellem Grund */
  --c-white:     #FFFFFF;

  /* Typografie */
  --f-display: "Roboto Slab", "Georgia", serif;
  --f-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;

  --radius: 3px;
  --max-width: 1180px;
}

/* =========================================================
   Reset / Basis
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.6;
  font-size: 17px;
  position: relative;
}
/* =========================================================
   Wechselnde Abschnitts-Hintergrundbilder (Crossfade beim Scrollen)
   Jeder Abschnitt mit [data-bg] blendet beim Erreichen sein eigenes
   Hintergrundfoto ein; zwei übereinanderliegende, fest positionierte
   Ebenen (.layer) übernehmen dafür die Überblendung per JavaScript
   (assets/js/main.js). Ein heller Überlagerungston sorgt für
   durchgehende Lesbarkeit, unabhängig vom jeweiligen Foto.
   ========================================================= */
:root{ --bg-overlay: 0.18; }
.bg-crossfade{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--c-paper);
}
.bg-crossfade .layer{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.15s ease;
}
.bg-crossfade .layer.is-active{ opacity: 1; }
.bg-crossfade .tint{
  position: absolute;
  inset: 0;
  background: rgba(245,242,234, var(--bg-overlay));
}
img{ max-width:100%; display:block; }
a{ color: var(--c-orange-d); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--c-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 700;
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 var(--space-2); }
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
:focus-visible{
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Eyebrow / technische Beschriftung im Blueprint-Stil */
.eyebrow{
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--c-orange-d);
  display:flex;
  align-items:center;
  gap: 0.6em;
  margin-bottom: var(--space-1);
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--c-orange-d);
  display:inline-block;
}

/* =========================================================
   Kopfbereich / Navigation
   ========================================================= */
.site-header{
  background: var(--c-navy);
  color: var(--c-paper);
  position: sticky; top:0; z-index: 50;
  border-bottom: 3px solid var(--c-orange);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--space-2); padding-bottom: var(--space-2);
  gap: var(--space-3);
}
.site-branding{ display:flex; align-items:center; gap: 0.8rem; }
.site-branding img{ height: 46px; width:auto; }
.site-branding a{ color: var(--c-white); text-decoration:none; }
.site-branding .brand-name{
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.2;
  display:block;
}
.site-branding .brand-sub{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-orange);
  text-transform: uppercase;
}

.main-navigation ul{
  list-style:none; display:flex; gap: var(--space-3);
  margin:0; padding:0; flex-wrap: wrap;
}
.main-navigation li{ position: relative; }
.main-navigation a{
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{
  border-bottom-color: var(--c-orange);
}

/* Sobald irgendein Hauptpunkt sein Untermenü zeigt, die übrigen
   Hauptpunkte dezent abdunkeln – dadurch ist eindeutig erkennbar,
   in welchem Menüzweig man sich gerade befindet. Beide Richtungen
   (davor und danach im Menü) werden abgedeckt. */
.main-navigation > ul > li:hover ~ li > a,
.main-navigation > ul > li:focus-within ~ li > a,
.main-navigation > ul > li:has(~ li:hover) > a,
.main-navigation > ul > li:has(~ li:focus-within) > a{
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.main-navigation > ul > li:hover,
.main-navigation > ul > li:focus-within{
  z-index: 1;
}

/* Untermenüs: Pfeil-Indikator bei Menüpunkten mit Kindern */
.main-navigation .menu-item-has-children > a::after{
  content: ' ▾';
  font-size: 0.7em;
}

/* Desktop: Ausklapp-Menü (Dropdown) beim Hover/Fokus */
.main-navigation ul ul{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  min-width: 220px;
  /* Kein margin-top: die Fläche muss lückenlos an den Menüpunkt
     anschließen, sonst verlässt die Maus beim Herunterbewegen kurz
     den Hover-Bereich und das Dropdown klappt vorzeitig zu. Der
     kleine Abstand zum Text wird stattdessen über padding-top
     innerhalb der bereits durchgehenden Fläche gelöst. */
  margin-top: 0;
  padding: 0.9rem 0 0.4rem;
  background: var(--c-navy);
  border-top: 2px solid var(--c-orange);
  box-shadow: 0 12px 24px rgba(15,36,56,0.25);
  z-index: 60;
}
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul{
  display: flex;
}
.main-navigation ul ul li{ width: 100%; }

/* Ab der dritten Ebene NICHT seitlich ausklappen (unzuverlässig,
   abhängig von Bildschirmbreite), sondern eindeutig unterscheidbar
   direkt in der Spalte einrücken: eigener, dunklerer Hintergrundton,
   Einzug, Verbindungslinie und kleinerer Text. */
.main-navigation ul ul ul{
  position: static;
  margin: 0.3rem 0 0.3rem 1rem;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 2px solid rgba(225,91,34,0.5);
  background: rgba(0,0,0,0.18);
  box-shadow: none;
  min-width: 0;
}
.main-navigation ul ul ul li{ width: auto; }
.main-navigation ul ul ul a{
  font-size: 0.74rem;
  opacity: 0.85;
  padding: 0.4rem 0.6rem;
}
.main-navigation ul ul ul a:hover{ opacity: 1; }
.main-navigation ul ul a{
  display: block;
  padding: 0.55rem 1.1rem;
  border-bottom: none;
  white-space: nowrap;
}
.main-navigation ul ul a:hover{ background: rgba(245,242,234,0.08); }

.menu-toggle{
  display:none;
  background:none; border: 1px solid var(--c-paper);
  color: var(--c-paper); padding: 0.4rem 0.7rem; border-radius: var(--radius);
  font-family: var(--f-mono);
}
@media (max-width: 860px){
  .menu-toggle{ display:inline-block; }
  .main-navigation{ display:none; width:100%; }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; gap: var(--space-1); padding-bottom: var(--space-2); }
  .site-header .container{ flex-wrap: wrap; }

  /* Mobile: Untermenü immer als eingerücktes Akkordeon sichtbar,
     kein Hover verfügbar, daher kein Ausklapp-Mechanismus nötig. */
  .main-navigation ul ul{
    display: block;
    position: static;
    min-width: 0;
    margin: 0.3rem 0 0 1rem;
    padding: 0;
    background: none;
    border-top: none;
    box-shadow: none;
  }
  .main-navigation ul ul a{ padding: 0.35rem 0; }
}

/* =========================================================
   Hero (Blueprint-Signaturelement)
   ========================================================= */
.hero{
  position: relative;
  background: linear-gradient(100deg, rgba(15,36,56,0.82) 0%, rgba(15,36,56,0.55) 42%, rgba(15,36,56,0.28) 75%);
  color: var(--c-paper);
  overflow:hidden;
  padding: var(--space-5) 0;
  min-height: 50vh;
  display: flex;
  align-items: center;
}
.hero .container{ position:relative; width:100%; }
.hero-emblem{
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 110px;
  height: auto;
  z-index: 2;
  opacity: 0.92;
}
@media (max-width: 720px){
  .hero-emblem{ width: 78px; }
}
.hero-hullline{
  position:absolute; right: -40px; bottom: -30px; width: min(560px, 60vw);
  opacity: 0.9; pointer-events:none;
}
.hero h1{ color: var(--c-white); max-width: 20ch; }
.hero .lede{ max-width: 52ch; color: var(--c-paper); opacity:0.9; font-size:1.1rem; }
.hero-meta{
  display:flex; gap: var(--space-4); margin-top: var(--space-3);
  font-family: var(--f-mono); font-size:0.85rem; color: var(--c-orange);
  flex-wrap: wrap;
}
.hero-meta strong{ display:block; color: var(--c-white); font-family: var(--f-display); font-size:1.4rem; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-block;
  font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
  padding: 0.75rem 1.4rem;
  background: var(--c-orange);
  color: var(--c-white) !important;
  border-radius: var(--radius);
  border: 1px solid var(--c-orange);
  text-decoration:none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover{ background: var(--c-orange-d); border-color: var(--c-orange-d); }
.btn.btn-outline{
  background: transparent; color: var(--c-paper) !important;
  border-color: var(--c-paper);
}
.btn.btn-outline:hover{ background: rgba(255,255,255,0.08); }

/* =========================================================
   Sections / Cards
   ========================================================= */
.section{
  padding: var(--space-5) 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  scroll-margin-top: 120px;
}
.section > .content-panel{ width:100%; }
.section.alt{ background: transparent; }
.section-head{ margin-bottom: var(--space-4); max-width: 60ch; }
.section-extra-text{ margin-top: var(--space-2); color: var(--c-slate); max-width: 60ch; }
.section-extra-text p:last-child{ margin-bottom: 0; }

/* Vollflächige, einfarbige Textfläche hinter dem Inhalt eines Abschnitts.
   Reicht über die gesamte Bildschirmbreite, unabhängig von der
   schmaleren .container-Breite darin; oberhalb/unterhalb bleibt das
   Hintergrundfoto sichtbar. */
.content-panel{
  position: relative;
  padding: var(--space-4) 0;
}
.content-panel::before{
  content:"";
  position: absolute;
  top:0; bottom:0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--c-paper);
  z-index: -1;
  box-shadow: 0 0 40px rgba(15,36,56,0.12);
}
.section.alt .content-panel::before{ background: var(--c-paper-2); }

.card-grid{
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card{
  background: var(--c-white);
  border: 1px solid #DED7C4;
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,36,56,0.12); }
.card .card-media{ aspect-ratio: 4/3; overflow:hidden; background: var(--c-paper-2); }
.card .card-media img{ width:100%; height:100%; object-fit:cover; }
.card .card-body{ padding: var(--space-2) var(--space-2) var(--space-3); }
.card .card-tag{
  font-family: var(--f-mono); font-size:0.72rem; text-transform:uppercase;
  color: var(--c-orange-d); letter-spacing: 0.06em;
}
.card h3{ margin: 0.3rem 0 0.4rem; font-size: 1.15rem; }
.card p{ color: var(--c-slate); font-size: 0.95rem; margin-bottom:0; }
/* Blueprint-Eckmarken */
.card::after{
  content:"";
  position:absolute; top:8px; right:8px; width:14px; height:14px;
  border-top: 2px solid var(--c-orange); border-right: 2px solid var(--c-orange);
  opacity:0.8;
}

/* =========================================================
   Flotte: Epochen-Filter
   ========================================================= */
.epoch-filter{
  display:flex; gap: var(--space-1); flex-wrap:wrap; margin-bottom: var(--space-4);
  font-family: var(--f-mono); font-size:0.85rem;
}
.epoch-filter a{
  border: 1px solid var(--c-navy); color: var(--c-navy);
  padding: 0.4rem 0.9rem; border-radius: 999px; text-decoration:none;
}
.epoch-filter a.is-active, .epoch-filter a:hover{
  background: var(--c-navy); color: var(--c-white);
}

/* =========================================================
   Termine / Kalender
   ========================================================= */
.calendar{
  width:100%; border-collapse: collapse; margin-bottom: var(--space-4);
  background: var(--c-white); border: 1px solid #DED7C4;
}
.calendar caption{
  font-family: var(--f-display); font-size:1.3rem; color: var(--c-navy);
  text-align:left; padding: var(--space-2); background: var(--c-paper-2);
}
.calendar th{
  font-family: var(--f-mono); font-size: 0.72rem; text-transform:uppercase;
  color: var(--c-slate); padding: 0.6rem; border-bottom:1px solid #DED7C4;
}
.calendar td{
  vertical-align: top; padding: 0.5rem; border: 1px solid #EFEAD9;
  height: 92px; width: 14.28%;
}
.calendar td .daynum{ font-family: var(--f-mono); color: var(--c-slate); font-size:0.8rem; }
.calendar td.is-today{ background: #FBEFE7; }
.calendar td.is-other-month{ background: #FAF8F2; color:#C9C2AC; }
.cal-event{
  display:block; margin-top:0.25rem; background: var(--c-orange); color:#fff;
  font-size: 0.72rem; padding: 0.15rem 0.35rem; border-radius: 2px;
  text-decoration:none; line-height:1.3;
}
.cal-event:hover{ background: var(--c-orange-d); text-decoration:none; }

.event-list{ list-style:none; margin:0; padding:0; }
.event-list li{
  display:flex; gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px dashed #DED7C4;
}
.event-date{
  font-family: var(--f-mono); color: var(--c-orange-d); min-width: 7ch;
  font-weight:600;
}

/* =========================================================
   Kontaktformular
   ========================================================= */
.contact-form{ max-width: 640px; }
.contact-form .field{ margin-bottom: var(--space-2); }
.contact-form label{
  display:block; font-family: var(--f-mono); font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.45rem; color: var(--c-navy);
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{
  width:100%; padding: 0.75rem; border: 1px solid #C9C2AC; border-radius: var(--radius);
  font-family: var(--f-body); font-size:1rem; background: var(--c-white);
}
.contact-form textarea{ min-height: 160px; resize: vertical; }
.contact-form .hp-field{ position:absolute; left:-9999px; }
.form-notice{ padding: var(--space-2); border-radius: var(--radius); margin-bottom: var(--space-3); font-family: var(--f-mono); font-size:0.9rem; }
.form-notice.success{ background:#E7F3E5; color:#245C2A; border:1px solid #B8DAB6; }
.form-notice.error{ background:#FBEAE8; color:#8C2A24; border:1px solid #F0B9B3; }

/* =========================================================
   Sprungmarken-Leiste (In-Page-Navigation zu den Themenabschnitten)
   Bleibt beim Scrollen unterhalb des Headers stehen; der jeweils
   aktive Abschnitt wird per JavaScript hervorgehoben, synchron
   zum wechselnden Hintergrundbild (siehe assets/js/main.js).
   ========================================================= */
.section-nav{
  position: sticky;
  top: 81px; /* Höhe des Site-Headers */
  z-index: 40;
  background: rgba(245,242,234,0.92);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid #DED7C4;
}
.section-nav .container{ display:flex; justify-content:center; }
.section-nav ul{
  list-style:none; margin:0; padding: 0.7rem 0;
  position: relative;
  height: 1.4rem;
  min-width: 12ch;
}
.section-nav li{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.section-nav li.is-active{
  opacity: 1;
  pointer-events: auto;
}
.section-nav a{
  font-family: var(--f-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-orange-d);
  white-space: nowrap;
  text-decoration:none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--c-orange-d);
}
.section-nav a:hover{ color: var(--c-orange); }

/* =========================================================
   Berichte / Blog
   ========================================================= */
.post-list{ display:flex; flex-direction:column; gap: var(--space-4); }
.post-entry .eyebrow{ margin-bottom: 0.3rem; }
.post-entry h2 a{ color: var(--c-navy); text-decoration:none; }
.post-entry h2 a:hover{ color: var(--c-orange-d); }
.post-entry .entry-excerpt{ color: var(--c-slate); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--c-navy); color: var(--c-paper);
  padding: var(--space-4) 0 var(--space-3);
  margin-top: var(--space-5);
  border-top: 3px solid var(--c-orange);
}
.site-footer a{ color: var(--c-paper); }
.footer-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.footer-grid h4{ color: var(--c-orange); font-family: var(--f-mono); text-transform:uppercase; font-size:0.85rem; letter-spacing:0.06em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: 0.4rem; }
.site-footer .sub{
  font-family: var(--f-mono); font-size:0.78rem; color: var(--c-slate);
  border-top: 1px solid rgba(245,242,234,0.15); padding-top: var(--space-2);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
}
@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Links-Seite
   ========================================================= */
.link-list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.link-list li{ border:1px solid #DED7C4; background:var(--c-white); border-radius: var(--radius); padding: var(--space-2); }
.link-list img.flag{ height:16px; width:auto; vertical-align:middle; margin-right:0.5em; }

/* Werft / Galerie (native WP-Gallery-Block etwas verfeinern) */
.entry-content .wp-block-gallery{ margin: var(--space-3) 0; }