/*
 * style.css
 *
 * Dies ist die zentrale Stylesheet-Datei für Christians Webseite.
 * Sie enthält globale Regeln sowie seiten-spezifische Anpassungen
 * unter Verwendung von CSS-Variablen.
 *
 * Letzte Aktualisierung: 2025-07-20 (Gründliche Mobile-First-Anpassung)
 */

/* --- 0. Basis-Reset & Box-Sizing --- */
/* Stellt sicher, dass Padding und Border zur Gesamtgröße eines Elements gehören (Box-Modell) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Entfernt Standard-Margin und Padding von HTML- und Body-Elementen */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%; /* Stellt sicher, dass der Body mindestens die volle Viewport-Höhe einnimmt */
}

/* --- 1. CSS-Variablen (Custom Properties) --- */
/* Definiert Farbpaletten, Schriftgrößen, Abstände und Breiten für konsistentes Styling */
:root {
  /* Farbpalette: Poppig & Eiscremig (Global verfügbar) */
  --color-primary-pink: rgb(255, 144, 187);    /* Hauptakzent, "poppig" */
  --color-secondary-pink: rgb(255, 193, 218);    /* Hellerer Akzent */
  --color-background-cream: rgb(248, 248, 225);  /* Standard-Hintergrund, "eiscremig" */
  --color-accent-blue: rgb(0, 48, 73);      /* Sekundärer Akzent, "eiscremig" */

  /* Textfarben (Global verfügbar) */
  --color-text-dark: #333333; /* Ein weicheres Schwarz für Lesbarkeit */
  --color-text-light: #ffffff; /* Weiß für Text auf dunklen Hintergründen */

  /* Seiten-spezifische Farben (werden von Body-Klassen überschrieben) */
  --page-background-color: var(--color-background-cream); /* Standard: Creme */
  --page-text-color: var(--color-text-dark); /* Standard: Dunkel */
  --page-heading-color: var(--color-primary-pink); /* Standard: Pink */
  --page-link-color: var(--color-primary-pink); /* Standard: Pink */
  --page-link-hover-color: var(--color-accent-blue); /* Standard: Blau */
  --page-border-color: var(--color-secondary-pink); /* Standard: Helleres Pink */
  --page-quote-border-color: var(--color-accent-blue); /* Standard: Akzent-Blau */

  /* Schriftgrößen (Fluid oder Rem-basiert für Skalierbarkeit) */
  --font-size-f1: 2.5rem;   /* Angepasste Haupttitelgröße für Mobile (vorher 3.5rem) */
  --font-size-f3: 1.75rem;   /* Überschriften */
  --font-size-f4: 1.5rem;   /* Kleinere Überschriften / Große Texte */
  --font-size-f5: 1.125rem; /* Standardtextgröße (ca. 18px) */
  --font-size-f6: 0.95rem;   /* Kleingedrucktes (ca. 15px) */

  /* Zeilenhöhen für bessere Lesbarkeit */
  --line-height-copy: 1.6;

  /* Abstände (basierend auf einer Tachyons-ähnlichen Skala für Konsistenz) */
  --spacing-1: 0.5rem;    /* 8px */
  --spacing-2: 1rem;     /* 16px */
  --spacing-3: 2rem;     /* 32px */
  --spacing-4: 4rem;     /* 64px */
  --spacing-px: 0.25rem; /* 4px */

  /* Randstärken */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;

  /* Maximale Breiten für Textblöcke und Hauptinhalte */
  --measure-width-text: 80ch;      /* Optimale Textbreite (ca. 80 Zeichen pro Zeile) */
  --max-content-width: 700px;      /* Maximale Breite des Haupt-Grid-Inhalts */
}

/* --- 2. Grundlegendes Body-Styling & Layout (Mobile-First Defaults) --- */
/* Setzt Standard-Schrift, Hintergrund und Grid-Layout für alle Seiten auf Mobile */
body {
  display: grid;
  grid-template-columns: 1fr; /* Eine Spalte für mobile zuerst */
  justify-content: start; /* Inhalt standardmäßig links ausrichten */
  padding: 0;

  /* Standard-Hintergrund und Textfarbe von den Variablen */
  background-color: var(--page-background-color);
  color: var(--page-text-color);

  font-family: sans-serif; /* Fallback-Schriftart */
  line-height: var(--line-height-copy);
}

/* --- 3. Seiten-spezifische Body-Anpassungen (über Body-Klassen) --- */
/* Diese Regeln überschreiben die Standard-Variablen für bestimmte Seiten */

/* Index-Seite: Gelber Hintergrund, schwarze Akzente */
body.home-page {
  --page-background-color: #FFD700; /* Kräftiges Goldgelb */
  --page-text-color: var(--color-text-dark); /* Textelemente schwarz */
  --page-heading-color: var(--color-text-dark); /* Header-Titel schwarz */
  --page-link-color: var(--color-text-dark); /* Links schwarz */
  --page-link-hover-color: var(--color-text-light); /* Links hover weiß */
  --page-border-color: var(--color-text-dark); /* Bildränder schwarz */
  --page-quote-border-color: var(--color-text-dark); /* Zitat-Rand schwarz */
}

/* Datenschutzerklärung-Seite: Bunter, fröhlicher, aber lesbar */
body.privacy-page {
  --page-background-color: var(--color-accent-blue); /* Hintergrund: Blau */
  --page-text-color: var(--color-text-light); /* Text: Weiß für Kontrast */
  --page-heading-color: var(--color-primary-pink); /* Überschriften: Kräftiges Pink */
  --page-link-color: var(--color-secondary-pink); /* Links: Helles Pink */
  --page-link-hover-color: var(--color-text-light); /* Links Hover: Dunkel */
  --page-border-color: var(--color-primary-pink); /* Ränder: Kräftiges Pink */
  --page-quote-border-color: var(--color-text-light); /* Zitat-Rand: Weiß */

  background-color: var(--page-background-color); /* Explizit setzen, da es globale Body-Farben überschreibt */
  color: var(--page-text-color); /* Explizit setzen */
}

/* Impressum-Seite: Eine weitere fröhliche Farbpalette */
body.impressum-page {
  --page-background-color: var(--color-secondary-pink); /* Helleres Pink als Hintergrund */
  --page-text-color: var(--color-text-dark); /* Dunkler Text für gute Lesbarkeit */
  --page-heading-color: var(--color-accent-blue); /* Überschriften: Blau als Akzent */
  --page-link-color: var(--color-primary-pink); /* Links: Kräftiges Pink */
  --page-link-hover-color: var(--color-text-light); /* Links Hover: Weiß */
  --page-border-color: var(--color-primary-pink); /* Ränder: Kräftiges Pink */
  --page-quote-border-color: var(--color-text-dark); /* Zitat-Rand: Dunkel */

  background-color: var(--page-background-color);
  color: var(--page-text-color);
}


/* --- 4. Allgemeine Header-Stylings (Mobile-First) --- */
.main-header {
    text-align: center;
    padding: var(--spacing-3) var(--spacing-2); /* Padding angepasst für mobile */
    margin: var(--spacing-3) auto var(--spacing-2) auto;
    max-width: var(--max-content-width);
    width: 100%;
    color: var(--page-heading-color); /* Farbe aus Seiten-Variable */
}

.main-header h1 {
  font-size: var(--font-size-f1); /* Nutzt die jetzt kleinere mobile Größe */
  text-transform: uppercase;
  letter-spacing: -0.05em;
  margin-top: 0;
  margin-bottom: var(--spacing-1);
  /* Zusätzliche Anpassung für sehr kleine Bildschirme, um Überlauf zu vermeiden */
  word-break: break-word; /* Worte brechen, wenn sie zu lang sind */
  overflow-wrap: break-word; /* Alternativ für IE/Edge */
  hyphens: auto; /* Silbentrennung aktivieren */
}

.main-header h3 {
  font-weight: bold;
  margin-top: 0;
}

/* --- 5. Hauptinhaltsbereich (main-content) (Mobile-First) --- */
/* Definiert das Layout und die maximale Breite des Hauptinhalts für mobile */
.main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-3);
    justify-content: center;
    width: 100%;
    max-width: var(--max-content-width);
    margin: var(--spacing-3) auto;
    padding: 0 var(--spacing-3); /* Mobile: Padding an den Seiten */
}

/* Zentriert und begrenzt die Breite von Textblöcken innerhalb des Hauptinhalts */
.main-content > section:not(.image-block),
.main-content > hr,
.main-content > h1,
.main-content > h2,
.main-content > p,
.main-content > ul,
.main-content > ol { /* Auch für OL falls verwendet */
    max-width: var(--measure-width-text);
    justify-self: center;
    width: 100%;
}

/* --- 6. Überschriften (H1, H2, H3) im Hauptinhalt (Mobile-First) --- */
.main-content h1 {
    font-size: var(--font-size-f3);
    color: var(--page-heading-color);
    text-align: center;
    margin-bottom: var(--spacing-2);
}

.main-content h2 {
    font-size: var(--font-size-f4);
    color: var(--page-heading-color);
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-1);
}

.main-content h3 {
    font-size: var(--font-size-f5);
    color: var(--page-heading-color);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-1);
}


/* --- 7. Text- und Listen-Styling (Mobile-First) --- */
.main-content p {
    font-size: var(--font-size-f5);
    line-height: var(--line-height-copy);
    margin-bottom: var(--spacing-2);
}

.main-content ul,
.main-content ol { /* Auch für OL falls verwendet */
    list-style: disc;
    padding-left: var(--spacing-3);
    margin-bottom: var(--spacing-2);
    color: var(--page-text-color);
}

.main-content ul li,
.main-content ol li {
    margin-bottom: var(--spacing-1);
}

/* Spezielles Styling für das Inhaltsverzeichnis (UL mit class="index") (Mobile-First) */
ul.index {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--spacing-3);
    border: var(--border-width-1) solid var(--page-border-color);
    border-radius: var(--spacing-px);
    padding: var(--spacing-2);
    background-color: rgba(255, 255, 255, 0.1);
}

ul.index li {
    margin-bottom: var(--spacing-px);
}

ul.index a.index-link {
    font-size: var(--font-size-f5);
    color: var(--page-link-color);
    display: block;
    padding: var(--spacing-1) 0;
    transition: background-color 0.15s ease-in;
}

ul.index a.index-link:hover,
ul.index a.index-link:focus {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--page-link-hover-color);
}

/* Styling für das Glossar (UL mit class="glossary") (Mobile-First) */
ul.glossary {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--spacing-3);
}

ul.glossary li {
    margin-bottom: var(--spacing-2);
    padding-left: var(--spacing-1);
    border-left: var(--border-width-1) solid var(--page-border-color);
}

ul.glossary li strong {
    color: var(--page-heading-color);
}


/* --- 8. Link-Styling (Allgemein) (Mobile-First) --- */
.link-section a,
.main-content a {
  font-size: var(--font-size-f6); /* Basisschriftgröße für Links im Text (kleiner) */
  text-decoration: none;
  border: none;
  padding: 0;
  display: inline;
  color: var(--page-link-color);
  transition: color 0.15s ease-in;
}

.main-content a { /* Standard-Links im main-content (z.B. Mailto, externe Links) sollen Standard-Textgröße haben */
    font-size: var(--font-size-f5);
}

/* Spezielles Styling für den Generator-Link im Footer-Bereich (Mobile-First) */
.seal a {
    font-size: var(--font-size-f6); /* Kleiner für den Generator-Hinweis */
    color: var(--page-text-color);
    opacity: 0.7;
    text-decoration: underline;
}

.seal a:hover {
    opacity: 1;
    color: var(--page-link-hover-color);
}

.link-section a {
  border: var(--border-width-2) solid var(--page-link-color);
  padding: var(--spacing-2) var(--spacing-3);
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: var(--spacing-2);
}

.link-section a:hover,
.link-section a:focus,
.main-content a:hover,
.main-content a:focus {
  color: var(--page-link-hover-color);
  opacity: 0.8;
}

/* --- 9. Zitat-Block (blockquote) Styling (Mobile-First) --- */
.quote-block blockquote {
  margin-left: 0;
  margin-top: 0;
  padding-left: var(--spacing-2);
  color: var(--page-text-color);
  border-left: var(--border-width-2) solid var(--page-quote-border-color);
  font-family: 'Georgia', serif;
}

.quote-block blockquote p {
  font-size: var(--font-size-f5);
  line-height: var(--line-height-copy);
  margin-top: 0;
}

.quote-block blockquote cite {
  font-size: var(--font-size-f6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-style: normal;
  display: block;
  margin-top: 0.5rem;
}

/* --- 10. Bild-Styling (Mobile-First) --- */
.image-block {
    justify-self: center;
    width: 100%;
    max-width: var(--max-content-width);
}
.image-block img {
  display: block;
  max-width: 100%;
  border: var(--border-width-3) solid var(--page-border-color);
  height: auto;
  margin: 0 auto;
}

.quote-divider {
  border: none;
  border-top: var(--border-width-1) solid var(--page-border-color);
  margin: var(--spacing-3) auto;
  width: 80%;
}

.main-content .img-w-50,
.main-content .img-w-80,
.main-content .img-w-100 {
    display: block;
    max-width: var(--max-content-width);
    margin: var(--spacing-2) auto;
    border: var(--border-width-3) solid var(--page-border-color);
    height: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: var(--spacing-px);
}
.main-content .img-w-50 { width: 50%; }
.main-content .img-w-80 { width: 80%; }
.main-content .img-w-100 { width: 100%; }


/* --- 11. Fußzeile (site-footer) Styling (Mobile-First) --- */
.site-footer {
  text-align: center;
  max-width: var(--max-content-width);
  margin: var(--spacing-3) auto;
  padding: 0 var(--spacing-3);
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* Anpassung für Footer-Links auf Datenschutzseite: angepasste Farben (Mobile-First) */
body.privacy-page .site-footer a {
    text-decoration: none;
    color: var(--page-link-color);
    font-size: var(--font-size-f5);
    padding: var(--spacing-1);
    transition: color 0.2s ease-in-out;
}

body.privacy-page .site-footer a:hover,
body.privacy-page .site-footer a:focus {
    color: var(--page-link-hover-color);
}

/* Anpassung für Footer-Links auf Home-Seite */
body.home-page .site-footer a {
    text-decoration: none;
    color: var(--page-link-color);
    font-size: var(--font-size-f5);
    padding: var(--spacing-1);
    transition: color 0.2s ease-in-out;
}

body.home-page .site-footer a:hover,
body.home-page .site-footer a:focus {
    color: var(--page-link-hover-color);
}

/* Anpassung für Footer-Links auf Impressum-Seite */
body.impressum-page .site-footer a {
    text-decoration: none;
    color: var(--page-link-color); /* Kräftiges Pink vom Impressum */
    font-size: var(--font-size-f5);
    padding: var(--spacing-1);
    transition: color 0.2s ease-in-out;
}

body.impressum-page .site-footer a:hover,
body.impressum-page .site-footer a:focus {
    color: var(--page-link-hover-color); /* Weiß vom Impressum */
}

/* --- 12. Home-Button-Styling (Nur für Datenschutz/Impressum) (Mobile-First) --- */
.home-button-container {
    text-align: center;
    margin: var(--spacing-3) auto var(--spacing-4) auto;
    max-width: var(--max-content-width);
}

.home-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--page-heading-color);
    color: var(--color-text-light);
    text-decoration: none;
    font-size: var(--font-size-f5);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    z-index: 500;
    position: relative;
    padding: var(--spacing-1);
}

.home-button:hover {
    background-color: var(--color-secondary-pink);
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
    color: var(--color-text-dark);
}

/* --- 13. Media Query für größere Bildschirme (Desktop - min-width: 60em) --- */
/* Nur hier werden Styles überschrieben, um die Desktop-Ansicht zu verbessern */
@media screen and (min-width: 60em) {

  /* Header-Styling für größere Bildschirme */
  .main-header {
      position: static;
      color: var(--page-heading-color);
      margin-top: var(--spacing-4);
  }

  /* **Anpassung für responsiven Header-Text auf Desktop** */
  .main-header h1 {
    font-size: 3.5rem; /* Setze die gewünschte größere Schriftgröße für Desktop */
    word-break: normal; /* Deaktiviere Brechen auf Desktop, falls nicht nötig */
    overflow-wrap: normal;
    hyphens: manual; /* Deaktiviere Silbentrennung */
  }

  /* Hamburger Menü auf Desktop ausblenden, falls aktiviert */
  .menu-button,
  .main-nav {
      display: none;
  }
}

/* --- 14. Media Query für noch größere Bildschirme (Optional) --- */
/* Wenn du später noch feinere Abstufungen möchtest, kannst du hier weitere @media-Regeln hinzufügen. */
/* Beispiel:
@media screen and (min-width: 80em) {
  :root {
    --font-size-f1: 4rem;
  }
}
*/