/* =====================================================================
   dwacker – Bludit-Theme
   ---------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Schriften (lokal eingebunden)
     2. Variablen: Farben, Breite, Schriftfamilien  ← hier zentral ändern
     3. Grundeinstellungen (Seite, Links, Bilder, Überschriften)
     4. Kopfzeile & Menü
     5. Startseite (Vollbild-Foto)
     6. Unterseiten (Hero-Bereich, Inhalt)
     7. Bausteine für den Seiteninhalt (per HTML im Editor nutzbar)
     8. Fußzeile
     9. Handy-Ansicht (bis 820 px Breite)
    10. Foto-Platzhalter
    11. Startseite: Fußzeile im Foto

   Namensschema: Alle eigenen Klassen beginnen mit "dw-", damit sie sich
   nicht mit Bludit- oder Plugin-Klassen in die Quere kommen.
   ===================================================================== */


/* =====================================================================
   1. SCHRIFTEN
   ---------------------------------------------------------------------
   Wenn du die .woff2-Dateien in den Ordner fonts/ des Themes legst,
   werden sie genutzt (lokal, ohne Google-Server → datenschutzfreundlich).
   Fehlen sie, greifen automatisch die Ersatzschriften aus Abschnitt 2.
   font-display: swap = Text wird sofort in der Ersatzschrift angezeigt
   und nach dem Laden ausgetauscht (kein unsichtbarer Text).
   ===================================================================== */

/* Barlow Condensed – schmale Titelschrift für Überschriften und Logo */
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* IBM Plex Sans – Fließtext (normal und halbfett) */
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
/* JetBrains Mono – Festbreitenschrift für "technische" Werte (Rufzeichen, Locator, Frequenzen) */
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }


/* =====================================================================
   2. VARIABLEN
   ---------------------------------------------------------------------
   Zentrale Stellschrauben des ganzen Designs. Eine Änderung hier wirkt
   überall, wo var(--name) verwendet wird.
   ===================================================================== */
:root {
  /* Farben */
  --dw-bg: #0E1417;       /* Seitenhintergrund (fast schwarz, leicht bläulich) */
  --dw-flaeche: #172126;  /* Flächen: Kopf-/Fußzeile, Boxen, Tabellen */
  --dw-rand: #26343B;     /* Rahmen- und Trennlinien */
  --dw-text: #E6EDF0;     /* Haupttextfarbe (helles Grau-Weiß) */
  --dw-grau: #9FB0B8;     /* Nebentext: Intro, Beschriftungen, Fußzeile */
  --dw-akzent: #FFB020;   /* Akzentfarbe Amber: Links, Buttons, Rufzeichen */
  --dw-rot: #FF6B7D;      /* Zweite Akzentfarbe, nur auf der Dänemark-Seite */

  /* Layout */
  --dw-breite: 1150px;    /* Maximale Inhaltsbreite auf großen Bildschirmen */

  /* Schriftfamilien – jeweils mit Ersatzschriften, falls die lokale fehlt */
  --dw-titel: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --dw-text-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --dw-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}


/* =====================================================================
   3. GRUNDEINSTELLUNGEN
   ===================================================================== */

/* Breite/Höhe inkl. Innenabstand und Rahmen rechnen – verhindert Überbreiten */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

/* Seite als senkrechte Flex-Spalte: Kopf – Inhalt – Fuß.
   Zusammen mit flex: 1 bei .dw-main / .dw-start bleibt die Fußzeile
   auch bei wenig Inhalt unten am Bildschirmrand. */
body {
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: var(--dw-text-font);
  font-size: 17px;        /* Grundschriftgröße */
  line-height: 1.6;       /* Zeilenabstand Fließtext */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Links in Akzentfarbe, beim Überfahren etwas heller */
a { color: var(--dw-akzent); }
a:hover { color: #FFC75A; }

/* Bilder nie breiter als ihr Container, Seitenverhältnis bleibt erhalten */
img { max-width: 100%; height: auto; }

/* Überschriften in der schmalen Titelschrift */
h1, h2, h3 { font-family: var(--dw-titel); font-weight: 600; line-height: 1.1; letter-spacing: 0.5px; }
/* h1 skaliert mit der Fensterbreite: min. 44 px, ideal 7 % der Breite, max. 72 px */
h1 { font-size: clamp(44px, 7vw, 72px); font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 40px; margin: 48px 0 16px; }
h3 { font-size: 26px; margin: 28px 0 10px; }

/* Zentrierter Inhaltscontainer mit max. Breite und seitlichem Abstand */
.dw-wrap { width: 100%; max-width: var(--dw-breite); margin: 0 auto; padding: 0 24px; }

/* Hilfsklasse: beliebigen Text in Festbreitenschrift setzen */
.dw-mono { font-family: var(--dw-mono); }


/* =====================================================================
   4. KOPFZEILE & MENÜ
   ===================================================================== */

/* Logo links, Menü rechts. Der seitliche Innenabstand richtet die
   Kopfzeile an der Inhaltsbreite (--dw-breite) aus: auf breiten
   Bildschirmen wächst er mit, mindestens aber 24 px. */
.dw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px max(24px, calc((100% - var(--dw-breite)) / 2 + 24px));
  background: var(--dw-flaeche);
  border-bottom: 1px solid var(--dw-rand);
  position: relative;
  z-index: 20;            /* liegt über dem Inhalt (wichtig fürs Handy-Menü) */
}

/* Seitentitel / Logo oben links */
.dw-logo { font-family: var(--dw-titel); font-size: 26px; font-weight: 600; color: var(--dw-text); text-decoration: none; }

/* Hauptmenü: waagerechte Liste ohne Aufzählungspunkte */
.dw-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; /* Abstand zwischen Menüpunkten */ }
.dw-nav a {
  color: var(--dw-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;    /* Menüpunkte nicht umbrechen */
  padding: 10px 0;
  border-bottom: 2px solid transparent; /* unsichtbare Linie, wird bei Hover/aktiv eingefärbt */
}
/* Hover und aktuelle Seite (.aktiv): Akzentfarbe + Unterstrich */
.dw-nav a:hover, .dw-nav a.aktiv { color: var(--dw-akzent); border-bottom-color: var(--dw-akzent); }

/* Handy-Menü (Checkbox + Hamburger-Button) auf dem Desktop ausblenden –
   wird in Abschnitt 9 für kleine Bildschirme eingeblendet */
.dw-menu-toggle, .dw-menu-button { display: none; }


/* =====================================================================
   5. STARTSEITE: Vollbild-Foto, Menü im Bild
   ---------------------------------------------------------------------
   Gilt nur, wenn <body> die Klasse "dw-startseite" hat.
   ===================================================================== */

/* Kopfzeile liegt transparent über dem Foto; oben leichter Schatten-
   Verlauf, damit das weiße Menü auf hellem Himmel lesbar bleibt */
.dw-startseite .dw-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0));
  border-bottom: none;
  justify-content: flex-end; /* Menü nach rechts, da kein Logo */
}
.dw-startseite .dw-logo { display: none; } /* Titel steht im Bild */
/* Menü weiß mit Schatten für Kontrast auf dem Foto */
.dw-startseite .dw-nav a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.dw-startseite .dw-nav a:hover { color: var(--dw-akzent); border-bottom-color: var(--dw-akzent); }

/* Vollbild-Bereich der Startseite. Der Farbverlauf ist nur Ersatz,
   solange kein Foto gesetzt ist – das Dünenfoto wird im Template
   (index.php) per style="background-image: url(...)" eingetragen und
   überdeckt den Verlauf. cover/center = Foto füllt den Bildschirm. */
.dw-start {
  position: relative;
  flex: 1;
  min-height: 100vh;
  background: linear-gradient(180deg, #C9B3C4 0%, #E9C6A8 32%, #B7A7B5 45%, #6F6A5C 50%, #5E4A2C 100%);
  background-size: cover;
  background-position: center;
}

/* Schriftzug "Dirk Wacker Homepage" im Foto:
   links: Abstand vom linken Rand, top: Höhe (45 % von oben) */
.dw-start-titel {
  position: absolute;
  left: 52px;
  top: 45%;
  margin: 0;
  font-family: var(--dw-text-font);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.dw-start-titel a { color: #fff; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.dw-start-titel a:hover { color: #fff; }


/* =====================================================================
   6. UNTERSEITEN
   ===================================================================== */

/* Hauptbereich füllt den Platz zwischen Kopf- und Fußzeile */
.dw-main { flex: 1; }

/* Kopfbereich einer Unterseite (Titel + Intro) mit dezentem
   Amber-Schimmer am unteren Rand */
.dw-hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--dw-rand);
  background: linear-gradient(180deg, rgba(255,176,32,0) 55%, rgba(255,176,32,0.08) 100%);
}
/* Dänemark-Seite: gleicher Effekt, aber rötlich statt Amber */
.dw-seite-daenemark .dw-hero { background: linear-gradient(180deg, rgba(255,107,125,0) 55%, rgba(255,107,125,0.09) 100%); }

/* Einleitungstext unter dem Seitentitel (Bludit-Feld "Beschreibung") */
.dw-intro { color: var(--dw-grau); font-size: 19px; max-width: 680px; margin: 0; }

/* Titelbild der Seite (Bludit-Feld "Titelbild") */
.dw-cover { margin-top: 48px; }
.dw-cover img { width: 100%; border-radius: 12px; display: block; }

/* Eigentlicher Seiteninhalt aus dem Editor */
.dw-inhalt { padding-top: 24px; padding-bottom: 72px; }
.dw-inhalt > :first-child { margin-top: 32px; } /* einheitlicher Abstand zum Hero, egal ob Text oder Überschrift zuerst kommt */
.dw-inhalt p, .dw-inhalt li { color: #CFD9DD; } /* Fließtext etwas gedämpfter als Überschriften */
.dw-inhalt img { border-radius: 10px; }


/* =====================================================================
   7. BAUSTEINE FÜR DEN SEITENINHALT
   ---------------------------------------------------------------------
   Diese Klassen kannst du im Bludit-Editor (HTML-Ansicht) verwenden,
   z. B. <p class="dw-eyebrow">Amateurfunk</p>
   ===================================================================== */

/* Kleine Überzeile über einer Überschrift (Großbuchstaben, gesperrt) */
.dw-eyebrow {
  font-family: var(--dw-mono);
  font-size: 14px;
  color: var(--dw-akzent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.dw-seite-daenemark .dw-eyebrow { color: var(--dw-rot); } /* auf der Dänemark-Seite rot */

/* Großes Rufzeichen, z. B. <p class="dw-call">DL…</p> */
.dw-call { font-family: var(--dw-mono); font-size: clamp(52px, 8vw, 88px); color: var(--dw-akzent); margin: 0; line-height: 1; }

/* Info-Kärtchen nebeneinander (z. B. Locator, Band, Leistung):
   <div class="dw-chips">
     <div class="dw-chip"><small>Locator</small><strong>JO…</strong></div>
   </div> */
.dw-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.dw-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid var(--dw-rand);
  border-radius: 8px;
  background: #0A0F11;
}
.dw-chip small { font-size: 12px; color: var(--dw-grau); text-transform: uppercase; letter-spacing: 1.5px; } /* Beschriftung */
.dw-chip strong { font-family: var(--dw-mono); font-size: 18px; font-weight: 400; color: var(--dw-akzent); } /* Wert */

/* Spalten-Raster: .dw-spalten = 2 Spalten, .dw-spalten-3 = 3 Spalten.
   Auf dem Handy werden daraus automatisch einzelne Zeilen (Abschnitt 9). */
.dw-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.dw-spalten-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dw-spalten img, .dw-spalten-3 img { width: 100%; display: block; }

/* Eine schmale, gut lesbare Textspalte (ca. 70 Zeichen pro Zeile).
   <div class="dw-spalte-1"> … </div>
   Mit zusätzlich "zentriert" wird sie in die Mitte gesetzt:
   <div class="dw-spalte-1 zentriert"> … </div> */
.dw-spalte-1 { max-width: 720px; }
.dw-spalte-1.zentriert { margin-left: auto; margin-right: auto; }

/* Hervorgehobener Kasten mit Hintergrund und Rahmen */
.dw-box {
  background: var(--dw-flaeche);
  border: 1px solid var(--dw-rand);
  border-radius: 14px;
  padding: 32px 40px;
  margin: 40px 0;
}
.dw-box h2 { margin-top: 0; } /* keine Extra-Lücke oben im Kasten */

/* Tabellen im Seiteninhalt: dunkle Fläche, abgerundete Ecken,
   Trennlinien zwischen den Zeilen */
.dw-inhalt table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dw-flaeche);
  border: 1px solid var(--dw-rand);
  border-radius: 14px;
  overflow: hidden;       /* nötig, damit die runden Ecken sichtbar sind */
  margin: 16px 0;
}
.dw-inhalt td, .dw-inhalt th { text-align: left; padding: 12px 18px; border-top: 1px solid var(--dw-rand); vertical-align: top; }
.dw-inhalt tr:first-child td, .dw-inhalt tr:first-child th { border-top: none; } /* keine Linie über der ersten Zeile */
/* Erste Spalte = Bezeichnung (grau, 36 % breit), weitere Spalten = Werte in Festbreitenschrift.
   Ideal für Technikdaten wie "Antenne | Dipol 2×10 m". */
.dw-inhalt td:first-child { color: var(--dw-grau); width: 36%; }
.dw-inhalt td + td { font-family: var(--dw-mono); font-size: 15px; }

/* Umrandeter Button: <a class="dw-button" href="…">Text</a>
   Beim Überfahren wird er mit der Akzentfarbe gefüllt. */
.dw-button {
  display: inline-block;
  padding: 10px 20px;
  margin: 4px 8px 4px 0;
  border: 1px solid var(--dw-akzent);
  border-radius: 8px;
  color: var(--dw-akzent);
  text-decoration: none;
  font-weight: 600;
}
.dw-button:hover { background: var(--dw-akzent); color: #1A1204; }


/* =====================================================================
   8. FUSSZEILE (Unterseiten)
   ===================================================================== */
.dw-footer { background: var(--dw-flaeche); border-top: 1px solid var(--dw-rand); color: var(--dw-grau); font-size: 14px; }
/* Copyright links, Links (Impressum, Datenschutz) rechts; bricht bei Platzmangel um */
.dw-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.dw-footer nav { display: flex; gap: 24px; }
.dw-footer a { color: var(--dw-grau); }


/* =====================================================================
   9. HANDY-ANSICHT (Bildschirme bis 820 px Breite)
   ---------------------------------------------------------------------
   Das Menü klappt ohne JavaScript auf: eine versteckte Checkbox
   (.dw-menu-toggle) wird über den Hamburger-Button (.dw-menu-button,
   ein <label>) an- und abgehakt.
   ===================================================================== */
@media (max-width: 820px) {
  /* Hamburger-Button: drei Striche, rechts in der Kopfzeile */
  .dw-menu-button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
    margin-left: auto;
  }
  .dw-menu-button span { display: block; width: 24px; height: 2px; background: currentColor; } /* ein Strich; Farbe = Textfarbe der Kopfzeile */
  .dw-header { color: var(--dw-text); padding: 12px 20px; }
  .dw-startseite .dw-header { color: #fff; } /* auf dem Foto weiße Striche */

  /* Menü zunächst versteckt, klappt unter der Kopfzeile auf */
  .dw-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dw-flaeche);
    border-bottom: 1px solid var(--dw-rand);
    padding: 12px 20px 20px;
  }
  /* Checkbox angehakt → Menü sichtbar */
  .dw-menu-toggle:checked ~ .dw-nav { display: block; }
  /* Menüpunkte untereinander, größer zum Antippen */
  .dw-nav ul { flex-direction: column; gap: 4px; }
  .dw-nav a, .dw-startseite .dw-nav a { color: var(--dw-text); text-shadow: none; display: block; font-size: 20px; }

  /* Spalten werden zu einer einzigen Spalte */
  .dw-spalten, .dw-spalten-3 { grid-template-columns: 1fr; }
  /* Schriftzug auf der Startseite näher an den Rand */
  .dw-start-titel { left: 20px; }
  /* Kästen mit weniger Innenabstand */
  .dw-box { padding: 24px; }
}


/* =====================================================================
   10. FOTO-PLATZHALTER
   ---------------------------------------------------------------------
   Gestrichelter Rahmen für noch fehlende Fotos, z. B.
   <figure class="dw-foto-platzhalter">Foto: Antenne</figure>
   ===================================================================== */
.dw-foto-platzhalter {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; margin: 0;
  border: 1px dashed #3A4B53; border-radius: 10px;
  color: var(--dw-grau); font-family: var(--dw-mono); font-size: 14px;
}


/* =====================================================================
   11. STARTSEITE: Fußzeile (Impressum, Datenschutz) dezent unten im Foto
   ===================================================================== */

/* Fußzeile liegt transparent über dem unteren Fotorand, mit
   Schatten-Verlauf von unten für bessere Lesbarkeit */
.dw-startseite .dw-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.40), rgba(0,0,0,0));
  border-top: none;
}
/* Text und Links leicht transparentes Weiß mit Schatten */
.dw-startseite .dw-footer,
.dw-startseite .dw-footer a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.dw-startseite .dw-footer a:hover { color: #fff; }
/* Bezugspunkt für die absolut positionierte Fußzeile */
body.dw-startseite { position: relative; }