/*
Theme Name: sebastian.ooo
Description: Eigenes Theme für sebastian.ooo. Petrol-Verlauf mit Wellenkante, Signet, Systemschriften, keine Webfonts, kein Ladeflackern.
Author: Sebastian Schäfer
Version: 2.2.0
Requires at least: 6.5
Requires PHP: 8.2
*/

/* Farben nach den Gestaltungsgrundlagen.
   Die Namen sind die der Marke, damit beim Nachschlagen nichts übersetzt werden
   muss. Zwei Werte stehen nicht in der Markenliste, weil sie keine Markenfarben
   sind, sondern Funktion haben; sie sind unten einzeln begründet. */
:root {
  --petrol:        #0e7490;   /* Hauptfarbe, Logostufe 1, Labels, Links */
  --petrol-mittel: #2f8f96;   /* Logostufe 2, Verläufe */
  --tuerkis:       #4aa8a6;   /* Logostufe 3 */
  --tuerkis-hell:  #6fbdb5;   /* Logostufe 4 */
  --mint:          #8ccdc5;   /* Logostufe 5, Verlaufsende */
  --nachtpetrol:   #12333d;   /* dunkle Flächen */

  --eisblau:       #f0f6f7;   /* helle Flächen */
  --eisblau-2:     #f8fbfb;
  --eisblau-3:     #eef6f6;

  --tinte:         #1b2228;   /* Text */
  --grau:          #5b6570;   /* Nebentext */
  --grau-hell:     #8a949c;   /* Nebentext, leiser */
  --silbergrau:    #7d9498;   /* Vorname im Namenszug */

  /* Trennlinie. Keine Markenfarbe: Eisblau ist als Fläche gedacht und wäre als
     Linie auf Weiß unsichtbar. Dieser Wert liegt eine Spur darunter. */
  --linie:         #e8eef0;

  /* Abgeleitete Töne. Sie stehen nicht in der Farbtabelle des BRAND-GUIDE,
     werden aber in der Referenzseite des Brand Kit genau so verwendet. Ich
     hatte sie vorher durch Markenfarben ersetzt, weil sie "außerhalb des
     Systems" schienen. Das war ein Fehlschluss: Die Tabelle nennt die
     Markenfarben, nicht jeden Ton, den eine Anwendung daraus ableitet. */
  --petrol-dunkel: #0b5f77;   /* Knopf im Hover */
  --kante:         #cfe1e4;   /* Umrandung heller Knöpfe */
  --mint-blass:    #bfe3df;   /* Haarlinie unter der Welle, Kartenrand */
  --grau-blau:     #5f7c83;   /* Fußzeile, Grußformel */
  --grau-tief:     #40545c;   /* Fließtext auf Eisblau-Flächen */

  /* Fehlermeldung im Kontaktformular. Bewusst außerhalb der Petrol-Familie,
     und die einzige Stelle im ganzen Theme, an der das vorkommt.
     Begründung: Eine Fehlermeldung in Petrol wäre von einer Erfolgsmeldung in
     Petrol nicht zu unterscheiden. Die Regel "maximal eine Akzentfarbe" meint
     Gestaltung, nicht Signalwirkung. Die Farbe steht zudem nie allein, die
     Meldung sagt im Text, was schiefging. */
  --fehler:        var(--fehler);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  color: var(--tinte);
  line-height: 1.6;
}

a { color: var(--petrol); }
img { max-width: 100%; }

/* --- Kopf mit Wellenkante --- */
/* Das Band trägt den Markenverlauf für KANTEN: waagerecht und symmetrisch,
   #0e7490 -> #2f8f96 -> #8ccdc5 -> #2f8f96 -> #0e7490. Links und rechts endet
   es in derselben Farbe, deshalb passen Seitenübergänge nahtlos aneinander.
   Die Stufen sind dieselben wie im SVG der Referenz (0 / 0,3 / 0,5 / 0,7 / 1). */
.kopf {
  position: relative;
  min-height: 104px;
  padding: 16px 24px 42px;
  background: linear-gradient(90deg,
              #0e7490 0%, #2f8f96 30%, #8ccdc5 50%, #2f8f96 70%, #0e7490 100%);
}
.kopf-inner {
  position: relative;   /* über der Welle */
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 17px;
}
/* Weißes Logo als eigene Datei. Ein CSS-Filter auf dem Petrol-Logo verändert
   auch die Kantenglättung, und das Brand Kit liefert die weiße Fassung mit.
   18 x 28 nach der Referenz, das ist das vorgeschriebene Verhältnis 1 : 1,548. */
.marke img { width: 18px; height: 28px; display: block; }
.marke b { font-weight: 700; }

nav.haupt ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
nav.haupt a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 999px;
}
nav.haupt a:hover { background: rgba(255, 255, 255, 0.22); }
nav.haupt .current-menu-item > a,
nav.haupt .current_page_item > a,
nav.haupt .current-menu-parent > a {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.26);
}

/* Feste Höhe, an der Unterkante. Damit bleibt die Kurve immer gleich flach,
   egal wie hoch das Band wird. Bei einer auf die volle Höhe gedehnten Welle
   wandert die Kurve nach oben und verschluckt den Text. */
.welle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;          /* eine Linie überlappen, sonst blitzt der Rand durch */
  width: 100%;
  height: 34px;
  display: block;
  z-index: 0;
}

main { max-width: 1080px; margin: 0 auto; padding: 52px 24px 88px; }
main.schmal { max-width: 720px; }

.kicker {
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--grau-hell);
  margin-bottom: 10px;
}

h1 { font-family: Tahoma, Verdana, sans-serif; font-weight: 300; font-size: 32px; margin: 0 0 16px; }
h2 { font-family: Tahoma, Verdana, sans-serif; font-size: 21px; margin: 32px 0 12px; font-weight: 400; }
p { text-wrap: pretty; }

/* --- Startseite --- */
/* Laufweite +1 pt nach BRAND-GUIDE, Abschnitt 3. */
.namenszug { font-family: Tahoma, Verdana, sans-serif; font-size: 46px; line-height: 1.15; font-weight: 400; letter-spacing: 1px; margin: 0; }
.namenszug .vorname { color: var(--silbergrau); font-weight: 300; }
.namenszug .nachname { font-weight: 700; }
.signet { display: block; margin-top: 14px; max-width: 100%; height: auto; }
.motto { display: flex; width: 300px; max-width: 100%; margin-top: 2px; }
.motto span { font-family: "Courier New", monospace; font-size: 9px; text-align: center; white-space: nowrap; }
.motto span:nth-child(1) { color: var(--petrol); }
.motto span:nth-child(2) { color: var(--petrol-mittel); }
.motto span:nth-child(3) { color: var(--tuerkis); }
.motto span:nth-child(4) { color: var(--mint); }

.intro { font-size: 21px; line-height: 1.55; margin: 42px 0 0; max-width: 640px; }
.intro-klein { font-size: 15px; color: var(--grau); max-width: 600px; margin: 18px 0 0; }

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.knopf { display: inline-block; padding: 12px 24px; border-radius: 999px; font-size: 15px; text-decoration: none; }
.knopf.voll { background: var(--petrol); color: #fff; }
.knopf.voll:hover { background: var(--petrol-dunkel); }
.knopf.leer { border: 1px solid var(--kante); color: var(--petrol); }
.knopf.leer:hover { background: var(--eisblau); border-color: var(--petrol); }

.schwerpunkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 72px; }
.spalte { border-left: 1px solid var(--linie); padding-left: 22px; }
.spalte p { font-size: 15px; color: var(--grau); margin: 0; }

.galerie-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-top: 82px; gap: 16px; }
.galerie-kopf .kicker { margin: 0; }
.galerie-kopf a { font-size: 14px; text-decoration: none; }
.streifen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.streifen img { width: 100%; height: auto; border-radius: 12px; display: block; }

.zuletzt { margin-top: 82px; }
.teaser { display: block; padding: 22px 0; border-top: 1px solid var(--linie); text-decoration: none; color: inherit; }
.teaser:hover .teaser-titel { color: var(--petrol); }
.teaser-meta { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 1.6px; color: var(--grau-hell); }
.teaser-titel { font-family: Tahoma, Verdana, sans-serif; font-size: 19px; margin-top: 8px; }
.teaser-text { font-size: 15px; color: var(--grau); margin-top: 6px; }

/* --- Blog --- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 34px; }
.karte {
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 26px 24px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.karte:hover { border-color: var(--kante); }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.badge {
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  background: var(--eisblau-3);
  color: var(--petrol);
  padding: 3px 8px;
  border-radius: 5px;
}
.meta { font-family: "Courier New", monospace; font-size: 10px; color: var(--grau-hell); }
.karte h2 { font-size: 20px; margin: 14px 0 0; }
.karte p { font-size: 15px; color: var(--grau); margin: 10px 0 18px; flex: 1; }
.weiter { font-size: 14px; color: var(--petrol); }

.zurueck { font-size: 14px; text-decoration: none; display: inline-block; margin-bottom: 26px; }
.beitrag h1 { font-size: 34px; margin: 14px 0 0; }
.beitrag .signet { margin: 18px 0 30px; opacity: 0.85; }
.beitrag-inhalt p { font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.beitrag-inhalt h2 { font-size: 21px; margin: 32px 0 12px; }
.beitrag-inhalt blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mint);
  font-size: 18px;
  line-height: 1.7;
  color: var(--grau);
  font-style: italic;
}
.beitrag-inhalt blockquote p { font-size: inherit; margin: 0; }
.beitrag-inhalt img { height: auto; border-radius: 12px; }

.gruss-zeile {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--grau-blau);
}
.gruss-zeile img { width: 14px; height: 14px; }

/* --- Seiten --- */
.seiten-inhalt p { font-size: 16px; color: var(--grau); margin: 0 0 18px; }
.seiten-inhalt h2 { color: var(--tinte); }

/* --- Galerie --- */
.galerie-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 34px; }
.galerie-raster figure { margin: 0; }
.lightbox-auf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.lightbox-auf img { width: 100%; height: auto; display: block; }
/* Bildunterschrift.
   Bewusst NICHT die Courier-Schrift der Kicker und Meta-Zeilen: Die steht hier
   überall für Etiketten (Kategorie, Datum, Lesezeit, Wegmarken), und ein
   Etikett ist etwas anderes als eine Beschriftung. "Am Bach" in
   Schreibmaschinenschrift liest sich wie ein Datenfeld statt wie ein Name für
   das Bild. Deshalb die Textschrift der Seite, kleiner als Fließtext, in der
   leiseren der beiden Graustufen. */
.galerie-raster figcaption {
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grau-hell);
  margin-top: 10px;
}

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 51, 61, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; display: block; }
#lightbox-zu {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

/* --- Nach oben ---
   Rechts unten, taucht erst nach einem Bildschirm Scrolltiefe auf
   (assets/nach-oben.js). z-index bleibt unter der Lightbox (60), die soll
   immer gewinnen, wenn beides gleichzeitig sichtbar wäre. */
#nach-oben {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--petrol);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 116, 144, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.92;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
#nach-oben:hover { background: var(--petrol-dunkel); opacity: 1; transform: translateY(-2px); }
#nach-oben:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
#nach-oben svg { width: 20px; height: 20px; }
#nach-oben[hidden] { display: none; }
@media (max-width: 600px) {
  #nach-oben { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* --- Kontaktformular --- */
.kontaktformular label { display: block; font-size: 13px; color: var(--grau); margin-bottom: 6px; }
.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular textarea {
  width: 100%;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--eisblau-2);
  color: var(--tinte);
  margin-bottom: 20px;
}
.kontaktformular input:focus,
.kontaktformular textarea:focus { outline: none; border-color: var(--mint); background: #fff; }
.kontaktformular textarea { min-height: 160px; resize: vertical; }
.kontaktformular .honigtopf { position: absolute; left: -9999px; top: -9999px; }
.kontaktformular .cf-turnstile { margin-bottom: 22px; }
.kontaktformular button {
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  background: var(--petrol);
  color: #fff;
  cursor: pointer;
}
.kontaktformular button:hover { background: var(--nachtpetrol); }
.kontakt-meldung { font-size: 14px; margin: 0 0 20px; }
.kontakt-meldung.ok { color: var(--petrol); }
.kontakt-meldung.fehler { color: var(--fehler); }

/* --- Fuß --- */
.fuss { position: relative; padding: 86px 24px 36px; background: linear-gradient(200deg, var(--eisblau-2) 0%, var(--eisblau-3) 100%); }
.fuss-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
  align-items: flex-start;
  justify-content: space-between;
}
.fuss-name { font-family: Tahoma, Verdana, sans-serif; font-size: 16px; }
.fuss-name span { color: var(--silbergrau); }
.fuss-ort { font-size: 13px; color: var(--grau-blau); margin-top: 10px; }
.fuss-links { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.fuss-links a { font-size: 14px; text-decoration: none; }
.sozial { display: flex; gap: 16px; align-items: flex-start; }
.sozial img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.gruss { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--grau-blau); }
.gruss img { width: 14px; height: 14px; }

/* Kontaktwege stehen nicht im Klartext im Markup (siehe spamschutz.js) */
[data-k] { cursor: pointer; color: var(--petrol); }

@media (max-width: 520px) {
  .namenszug { font-size: 34px; }
  .intro { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Inhalte der Unterseiten
   ───────────────────────────────────────────────────────────────────────
   In der vorherigen Fassung lagen diese Regeln in den <style>-Blöcken der
   einzelnen Astro-Seiten und waren dort automatisch auf ihre Seite begrenzt.
   In einem gemeinsamen Stylesheet gibt es diese Begrenzung nicht, deshalb
   hängen sie an .seiten-inhalt. Ohne das überschriebe etwa der kleine
   .intro-Text der Unterseiten den großen der Startseite.
   ═══════════════════════════════════════════════════════════════════════ */

.seiten-inhalt .intro { font-size: 15px; color: var(--grau); max-width: 560px; margin: 0 0 8px; }

/* --- Über mich: Text neben Bildern --- */
.seiten-inhalt .oben { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 8px; }
.seiten-inhalt .text p { font-size: 16px; color: var(--grau); margin: 0 0 18px; }
.seiten-inhalt .bilder { display: grid; gap: 16px; align-content: start; }
.seiten-inhalt .bilder img { width: 100%; height: auto; border-radius: 14px; display: block; }

.seiten-inhalt .rollen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--linie);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 56px;
}
.seiten-inhalt .rolle { background: #fff; padding: 26px 22px; }
.seiten-inhalt .rolle-titel { font-family: Tahoma, Verdana, sans-serif; font-size: 17px; margin-top: 6px; }
.seiten-inhalt .rolle p { font-size: 14px; color: var(--grau); margin: 8px 0 0; }

.seiten-inhalt .wegmarken-kopf { margin-top: 64px; }
.seiten-inhalt .wegmarke { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--linie); }
.seiten-inhalt .zeit { font-family: "Courier New", monospace; font-size: 12px; color: var(--petrol); }
.seiten-inhalt .wm-titel { font-family: Tahoma, Verdana, sans-serif; font-size: 17px; }
.seiten-inhalt .wegmarke p { font-size: 14px; color: var(--grau); margin: 4px 0 0; }

/* --- Technik: Bausteine --- */
/* Eigene Klassen, nicht .karte: Das ist im Theme bereits die Blog-Kachel mit
   ganz anderem Aufbau (Innenabstand, Flex-Spalte). Zwei Bedeutungen in einer
   Klasse wären eine Falle für die nächste Änderung. */
.seiten-inhalt .bausteine { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 34px; align-items: start; }
.seiten-inhalt .baustein { border: 1px solid var(--mint-blass); border-radius: 16px; background: #fff; overflow: hidden; }
.seiten-inhalt .baustein-kopf { padding: 20px 22px; background: linear-gradient(160deg, var(--petrol) 0%, var(--mint) 100%); }
.seiten-inhalt .baustein-kopf .kicker.hell { color: rgba(255, 255, 255, 0.8); margin-bottom: 4px; }
.seiten-inhalt .baustein-titel { font-family: Tahoma, Verdana, sans-serif; font-size: 19px; color: #fff; }
.seiten-inhalt .baustein-koerper { padding: 22px; }
.seiten-inhalt .baustein-koerper p { font-size: 15px; color: var(--grau); margin: 0; }
.seiten-inhalt .punkte { display: grid; gap: 8px; margin-top: 16px; }
.seiten-inhalt .punkt { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 13px; line-height: 1.6; }
.seiten-inhalt .punkt span:first-child { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 1.2px; color: var(--grau-hell); padding-top: 3px; }

.seiten-inhalt .werkzeuge-kopf { margin-top: 64px; }
.seiten-inhalt .werkzeuge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--linie);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 12px;
}
.seiten-inhalt .werkzeug { background: #fff; padding: 22px 20px; }
.seiten-inhalt .werkzeug-titel { font-family: Tahoma, Verdana, sans-serif; font-size: 17px; margin-top: 4px; }
.seiten-inhalt .werkzeug p { font-size: 14px; color: var(--grau); margin: 8px 0 0; }

.seiten-inhalt .schluss { margin-top: 56px; padding: 26px 24px; background: linear-gradient(200deg, var(--eisblau-2) 0%, var(--eisblau-3) 100%); border-radius: 16px; }
.seiten-inhalt .schluss p { font-size: 15px; color: var(--grau-tief); margin: 6px 0 0; max-width: 620px; }

@media (max-width: 520px) {
  .seiten-inhalt .wegmarke { grid-template-columns: 1fr; gap: 4px; }
  .seiten-inhalt .punkt { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Dankeseite --- */
/* Die Bestätigung soll auf den ersten Blick als solche erkennbar sein, nicht
   als Hinweiszeile. Deshalb Signet, großer Satz und Luft darum. */
.danke { text-align: left; padding-top: 72px; }
.danke-marke { margin-bottom: 40px; }
.danke-marke img { max-width: 300px; height: auto; display: block; opacity: 0.9; }
.danke h1 { font-size: 38px; margin-bottom: 26px; }
.danke .danke-gross {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  color: var(--petrol);
  margin: 0 0 22px;
}
.danke .seiten-inhalt p { font-size: 16px; }
.danke .knoepfe { margin-top: 44px; }