/* ════════════════════════════════════════════════════════════════════
   MyKeyZ Creative Cave — style.css
   Zentrale Stylesheet-Datei für index.html und mykeyz-about.html

   STRUKTUR:
   1.  Farb-Schaltzentrale (CSS Variablen) ab zeile 40
   2.  Reset & Basis ab zeile 79
   3.  Hintergrund-Verlauf (Body) ab zeile 96
   4.  Navigation (NavBar) ab zeile 132
   5.  Nav-Logo ab zeile 164
   6.  Nav-Links (Menüpunkte)  ab zeile 184
   7.  Nav-Right (Auth, Sprache, Theme) ab zeile 214
   8.  Buttons (Ghost, Primary) ab zeile 228
   9.  User-Pill (eingeloggt) ab zeile 269
   10. Icon-Buttons (Sprache, Theme) ab zeile 302
   11. Sprach-Dropdown ab zeile 328
   12. Hero-Bereich (Startseite) ab zeile 374
   13. Sektionen-Bereich (Vier Welten) ab zeile 504
   14. Karten (Cards) ab zeile 541
   15. Featured Tools Grid ab zeile 607
   16. About-Page spezifisch ab zeile 673
   17. Timeline (Lebenslauf) ab zeile 751
   18. Zertifikat-Karten ab zeile 828
   19. Philosophie-Block ab zeile 896
   20. Cave-Levels (Besucher/Member/Premium) ab zeile 932
   21. Persönliche Karten ab zeile 998
   22. CTA-Strip (Call to Action) ab zeile 1031
   23. Footer ab zeile 1097
   24. Toast (Benachrichtigungen) ab zeile 1142
   25. Animationen ab zeile 1178
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   1. FARB-SCHALTZENTRALE
   Alle Farben zentral hier ändern — wirkt sich auf die ganze Seite aus!

   WICHTIG: Kein Pink mehr! Dunkelgrau → Rot ist der neue Vibe.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Hintergründe ── */
  --bg:        #0d0d0f;              /* Haupt-Hintergrund (sehr dunkel) */
  --bg2:       #13131a;              /* Zweiter Hintergrund (etwas heller) */
  --surface:   #1a1a24;              /* Karten & Flächen */

  /* ── Text ── */
  --text:      #f0eee8;              /* Haupt-Schriftfarbe (warm weiss) */
  --muted:     #8a8794;              /* Gedämpfte Schrift (z.B. Untertitel) */

  /* ── Akzentfarben — HIER das Design steuern! ── */
  --accent:    #e03030;              /* ROT — Hauptakzent (war Pink) */
  --accent2:   #a01818;              /* DUNKELROT — zweiter Akzent (war Deep Rose) */
  --accent3:   #cc4400;              /* DUNKELORANGE — dritter Akzent (bleibt warm) */

  /* ── Oberflächen ── */
  --border:    rgba(255,255,255,0.08); /* Feine Linien & Rahmen */

  /* ── Layout ── */
  --nav-h:     64px;                 /* Höhe der Navigationsleiste */
}

/* ── Light Mode — alle Variablen wechseln wenn data-theme="light" ── */
[data-theme="light"] {
  --bg:        #f4f3ef;
  --bg2:       #eceae4;
  --surface:   #ffffff;
  --text:      #1a1a1a;
  --muted:     #666060;
  --border:    rgba(0,0,0,0.1);
}


/* ════════════════════════════════════════════════════════════════════
   2. RESET & BASIS
   Entfernt Browser-Standard-Abstände und setzt Grundregeln
   ════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box; /* Padding/Border wird IN die Breite eingerechnet */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Sanftes Scrollen bei Anker-Links (#sektionen etc.) */
}


/* ════════════════════════════════════════════════════════════════════
   3. HINTERGRUND-VERLAUF (Body)
   Dunkelgrau oben → Dunkelrot unten — kein Pink!
   ════════════════════════════════════════════════════════════════════ */
body {
  font-family: 'DM Sans', sans-serif;

  /* ── DARK MODE Verlauf: schwarz → hellgrau ── */
  background: linear-gradient(
  to bottom,
  #0d0d0f  0%,    /* Schwarz oben */
  #1a1a1a  40%,
  #2a2a2a  65%,
  #3a3a3a  82%,
  #555555  100%   /* Hellgrau unten */
);
  background-attachment: fixed; /* Verlauf scrollt NICHT mit — bleibt fest */

  color: var(--text);
  min-height: 100vh;
  transition: color 0.3s; /* Sanfter Übergang bei Theme-Wechsel */
}

/* ── Light Mode Verlauf ── */
[data-theme="light"] body {
  background: linear-gradient(
    to bottom,
    #f4f3ef  0%,
    #eceae4  40%,
    #d8d5cc  65%,
    #c0bdb4  82%,
    #a8a49c  100%
  );
  background-attachment: fixed;
}


/* ════════════════════════════════════════════════════════════════════
   4. NAVIGATION (NavBar)
   Fixiert oben — Glaseffekt (backdrop-filter: blur)
   ════════════════════════════════════════════════════════════════════ */
nav {
  position: fixed;           /* Bleibt beim Scrollen oben */
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);      /* 64px — definiert in Variablen */

  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;

  /* ── Glas-Effekt: leicht transparent + Blur ── */
  background: rgba(13,13,15,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); /* Safari */

  border-bottom: 1px solid var(--border);
  z-index: 100;              /* Über allem anderen */
  transition: background 0.3s;
}

/* Light Mode Navbar */
[data-theme="light"] nav {
  background: rgba(245,244,240,0.8);
}


/* ════════════════════════════════════════════════════════════════════
   5. NAV-LOGO
   Der "MyKeyZ creative Cave" Schriftzug links in der Navbar
   ════════════════════════════════════════════════════════════════════ */
.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .nav-logo {
    font-size: 0.85rem;
  }
}

/* Das Wort "Creative Cave" im Logo — in Rot */
.nav-logo span {
  color: var(--accent);      /* ROT */
}


/* ════════════════════════════════════════════════════════════════════
   6. NAV-LINKS (Menüpunkte: Home, About, Projects, Links)
   ════════════════════════════════════════════════════════════════════ */
.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin-left: 2rem;
  flex: 1;                   /* Nimmt verfügbaren Platz ein */
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);       /* Gedämpft wenn nicht aktiv */
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

/* Hover-Effekt & aktiver Link (class="active") */
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);        /* Volle Schriftfarbe */
  background: var(--border); /* Zarter Hintergrund */
}


/* ════════════════════════════════════════════════════════════════════
   7. NAV-RIGHT
   Rechter Bereich der Navbar: Auth-Buttons, Sprache, Theme-Toggle
   ════════════════════════════════════════════════════════════════════ */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;         /* Schiebt alles nach rechts */
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════
   8. BUTTONS (Ghost & Primary)
   Ghost = transparent, Primary = roter Hintergrund
   ════════════════════════════════════════════════════════════════════ */

/* ── Ghost Button (z.B. "Login") ── */
.btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--border);
}

/* ── Primary Button (z.B. "Register") ── */
.btn-primary {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);  /* ROT */
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px); /* Kleiner Hüpfer */
}


/* ════════════════════════════════════════════════════════════════════
   9. USER-PILL (wenn eingeloggt)
   Zeigt Avatar + Username als Pille — erscheint nach Login
   ════════════════════════════════════════════════════════════════════ */
.user-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border-radius: 99px;       /* Vollständig rund */
  cursor: pointer;
}

/* Kleiner runder Avatar mit Initiale */
.user-pill .avatar {
  width: 24px;
  height: 24px;
  background: var(--accent2); /* DUNKELROT */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}


/* ════════════════════════════════════════════════════════════════════
   10. ICON-BUTTONS (Sprache 🌐, Theme 🌙)
   Kleine quadratische Buttons mit Icon
   ════════════════════════════════════════════════════════════════════ */
.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  position: relative;
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
  border-color: rgba(255,255,255,0.15);
}


/* ════════════════════════════════════════════════════════════════════
   11. SPRACH-DROPDOWN
   Klappt auf wenn man auf 🌐 klickt
   ════════════════════════════════════════════════════════════════════ */
.lang-wrap {
  position: relative; /* Referenzpunkt für das absolute Dropdown */
}

.lang-dropdown {
  display: none;       /* Standardmässig versteckt */
  position: absolute;
  top: calc(100% + 8px); /* 8px unter dem Icon-Button */
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 120px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 200;
}

/* Sichtbar wenn class="open" per JS gesetzt wird */
.lang-dropdown.open {
  display: block;
}

.lang-dropdown button {
  width: 100%;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-dropdown button:hover,
.lang-dropdown button.active {
  background: var(--border);
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════════════
   12. HERO-BEREICH (Startseite — index.html)
   Der grosse Willkommens-Bereich mit Titel und Buttons
   ════════════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 2rem) 2rem 4rem; /* Oben Platz für Navbar */
  position: relative;
  overflow: hidden;
}

/* ── Kleines Badge oben ("Community · Tools · Kreativität") ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);                        /* ROT */
  background: rgba(224,48,48,0.1);             /* Zartes Rot-Hintergrund */
  border: 1px solid rgba(224,48,48,0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s ease both;
}

/* Pulsierender Punkt vor dem Badge-Text */
.hero-badge::before {
  content: '●';
  font-size: 0.5rem;
  animation: pulse 2s infinite;
}

/* ── Haupt-Titel ── */
.hero h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 6rem); /* Responsive: min 2.8rem, max 6rem */
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 0.3em;
  animation: fadeUp 0.6s 0.1s ease both;
}

/* "creative Cave" — Verlaufs-Text in ROT statt Pink */
.hero h1 .cave {
  display: block;
  background: linear-gradient(135deg, var(--accent) 0%, #cc2222 100%); /* Rot → Hellrot */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tagline unter dem Titel ── */
.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.6s 0.2s ease both;
}
.hero-tagline em {
  font-style: normal;
  color: var(--text);   /* Hervorgehobene Textstellen in voller Schriftfarbe */
  font-weight: 500;
}

/* ── CTA-Buttons (Account erstellen / Entdecken) ── */
.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 0.6s 0.3s ease both;
}

/* Grosser roter Haupt-Button */
.cta-main {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);  /* ROT */
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cta-main:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(224,48,48,0.35); /* Roter Glüh-Effekt */
}

/* Sekundärer Button (transparent mit Rahmen) */
.cta-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.cta-secondary:hover {
  background: var(--bg2);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* ── Pochendes Herz-Emoji ── */
.heart {
  display: inline-block;
  animation: heartbeat 2.4s ease-in-out infinite;
  transform-origin: center;
}


/* ════════════════════════════════════════════════════════════════════
   13. SEKTIONEN-BEREICH ("Vier Welten. Ein Ort.")
   ════════════════════════════════════════════════════════════════════ */
.sections {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Kleines rotes Label über Titeln "für macher die nicht nur wollen! */
.section-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);   /* ROT */
  margin-bottom: 0.75rem;
}

/* Grosser Abschnitts-Titel */
.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 3rem;
  letter-spacing: -0.02em;
}

/* Grid für die 4 Welten-Karten */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}


/* ════════════════════════════════════════════════════════════════════
   14. KARTEN (Cards)
   Glaseffekt-Karten mit Hover-Animation
   ════════════════════════════════════════════════════════════════════ */
.card {
  background: rgba(26,26,36,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

/* Light Mode Override!  */

[data-theme="light"] .card {
  background: rgba(26,26,36,0.85);
}
/* Light Mode Override!  */

/* Subtiler Farbverlauf beim Hover (kommt von --card-color) */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--card-color, var(--accent)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-color, var(--accent));
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.card:hover::before {
  opacity: 0.06; /* Sehr subtiler Schimmer */
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Kleines farbiges Tag unten auf der Karte */
.card-tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}


/* ════════════════════════════════════════════════════════════════════
   15. FEATURED TOOLS GRID (index.html)
   Die Tool-Chip-Liste unter "Tools & PWAs"
   ════════════════════════════════════════════════════════════════════ */
.tools {
  padding: 5rem 2rem;
}
.tools-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

/* Einzelner Tool-Chip (Icon + Name + Typ) */
.tool-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(26,26,36,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s;
  text-decoration: none;
  color: var(--text);
}
.tool-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.2);
}

/* Icon-Box links im Chip */
.tool-chip .t-icon {
  width: 36px;
  height: 36px;
  background: var(--bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tool-chip .t-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* "..." wenn zu lang */
}
.tool-chip .t-type {
  font-size: 0.72rem;
  color: var(--muted);
}


/* ════════════════════════════════════════════════════════════════════
   16. ABOUT-PAGE SPEZIFISCH
   Nur für mykeyz-about.html — Seiten-Wrapper und Header
   ════════════════════════════════════════════════════════════════════ */

/* Haupt-Content-Wrapper der About-Page */
.page {
  max-width: 860px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 4rem) 2rem 6rem;
}

/* Kleines rotes Label ("Wer steckt dahinter?") */
.page-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);   /* ROT */
  margin-bottom: 0.75rem;
}

/* Grosser Seiten-Titel ("Hallo — ich bin Mikey.") */
.page-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

/* Hervorgehobener Name "Mikey" im Titel — Rot-Verlauf */
.page-title .hl {
  background: linear-gradient(135deg, var(--accent) 0%, #ff6b6b 100%); /* Rot → Hellrot */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lead-Text unter dem Titel */
.page-lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: 3.5rem;
}
.page-lead em {
  font-style: normal;
  color: var(--text);
  font-weight: 500;
}

/* Abstand zwischen den grossen Abschnitten */
.sec-block {
  margin-top: 5rem;
}

/* Kleines rotes Label ("Die Reise", "Die Philosophie" etc.) */
.sec-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);   /* ROT */
  margin-bottom: 1.25rem;
}

/* Abschnitts-Titel auf der About-Page */
.sec-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}


/* ════════════════════════════════════════════════════════════════════
   17. TIMELINE (Lebenslauf auf der About-Page)
   Vertikale Linie mit Punkten und Einträgen
   ════════════════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 2rem;
}

/* Vertikale rote Linie links */
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2), transparent);
  border-radius: 99px;
}

/* Einzelner Timeline-Eintrag */
.tl-item {
  position: relative;
  padding-bottom: 2.5rem;
}
.tl-item:last-child {
  padding-bottom: 0;
}

/* Runder Punkt auf der Timeline-Linie */
.tl-dot {
  position: absolute;
  left: -2.35rem;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);                   /* ROT */
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 3px rgba(224,48,48,0.2);   /* Roter Leuchtring */
}
.tl-dot.muted {
  background: var(--muted);  /* Gedämpfter Punkt für weniger wichtige Einträge */
  box-shadow: none;
}

/* Jahr-Label ("2013 – heute") */
.tl-year {
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);   /* ROT */
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.tl-year.muted {
  color: var(--muted);
}

/* Eintrags-Titel */
.tl-head {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* Eintrags-Text */
.tl-body {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════════
   18. ZERTIFIKAT-KARTEN
   Kleine Karten für Diplome und Zertifikate
   ════════════════════════════════════════════════════════════════════ */
.cert-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

/* Einzelne Zertifikat-Karte */
.cert-card {
  background: rgba(26,26,36,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}
[data-theme="light"] .cert-card {
  background: rgba(26,26,36,0.85);
}

[data-theme="light"] .cert-name,
[data-theme="light"] .cert-school {
  color: #f0eee8;
}

[data-theme="light"] .cert-topic {
  color: #f0eee8;
}
.cert-card:hover {
  border-color: rgba(224,48,48,0.3);  /* Roter Rahmen beim Hover */
  transform: translateY(-2px);
}

/* Rotes Badge ("Zertifikat · Feb 2002") */
.cert-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(224,48,48,0.1);
  border: 1px solid rgba(224,48,48,0.2);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  display: inline-block;
  margin-bottom: 0.6rem;
}

.cert-name {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.cert-school {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Topic-Tags auf den Zertifikat-Karten */
.cert-topics {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.cert-topic {
  font-size: 0.68rem;
  background: var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}


/* ════════════════════════════════════════════════════════════════════
   19. PHILOSOPHIE-BLOCK
   Der eingerückte Text-Block mit roter linker Linie
   ════════════════════════════════════════════════════════════════════ */
.philosophy {
  background: rgba(26,26,36,0.5);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);  /* Rote linke Linie */
  border-radius: 0 12px 12px 0;
  padding: 1.75rem 1.75rem 1.75rem 2rem;
}
.philosophy p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}
.philosophy p + p {
  margin-top: 0.85rem;
}
.philosophy em {
  font-style: normal;
  color: var(--text);
  font-weight: 500;
}
/* ════════════════════════════════════════════════════════════════════
   Dunkler Hintergrund bleibt, Schrift wird hell — lesbar!
   ════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .philosophy {
  background: rgba(26,26,36,0.85);
}
[data-theme="light"] .philosophy p {
  color: #c0bdb4;
}
[data-theme="light"] .philosophy em {
  color: #f0eee8;
}

/* ════════════════════════════════════════════════════════════════════
   20. CAVE-LEVELS (Besucher / Member / Premium)
   Die drei Karten die erklären wie die Cave funktioniert
   ════════════════════════════════════════════════════════════════════ */
.levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Einzelne Level-Karte */
.level-card {
  background: rgba(26,26,36,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.2s, border-color 0.2s;
}

/* ════════════════════════════════════════════════════════════════════
Light Mode Override
════════════════════════════════════════════════════════════════════ */

.level-card:hover {
  transform: translateY(-3px);
}
[data-theme="light"] .level-card {
  background: rgba(26,26,36,0.85);
}
[data-theme="light"] .level-card li {
  color: #c0bdb4;
}

/* ════════════════════════════════════════════════════════════════════
Light Mode Override
════════════════════════════════════════════════════════════════════ */

/* Farbige Linie oben je nach Level */
.level-card.free    { border-top: 2px solid var(--muted); }   /* Grau = kostenlos */
.level-card.member  { border-top: 2px solid var(--accent); }  /* ROT = Member */
.level-card.premium { border-top: 2px solid var(--accent3); } /* Orange = Premium */

.level-icon {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}
.level-name {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* Kleines farbiges Tag ("Gratis · Kein Login" etc.) */
.level-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  display: inline-block;
  margin-bottom: 0.85rem;
}
.free    .level-tag { color: var(--muted);   background: rgba(255,255,255,0.06); }
.member  .level-tag { color: var(--accent);  background: rgba(224,48,48,0.1); }
.premium .level-tag { color: var(--accent3); background: rgba(204,68,0,0.1); }

/* Feature-Liste in der Level-Karte */
.level-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.level-list li {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  line-height: 1.4;
}
/* Strich vor jedem Feature */
.level-list li::before      { content: '—'; color: var(--border); flex-shrink: 0; }
.member  .level-list li::before { color: rgba(224,48,48,0.4); }  /* Roter Strich */
.premium .level-list li::before { color: rgba(204,68,0,0.4); }   /* Oranger Strich */


/* ════════════════════════════════════════════════════════════════════
   21. PERSÖNLICHE KARTEN ("Der Mensch dahinter")
   Kleines 2-Spalten Grid mit Info-Karten
   ════════════════════════════════════════════════════════════════════ */
.personal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.personal-card {
  background: rgba(26,26,36,0.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.personal-card .pc-icon  { font-size: 1.4rem; margin-bottom: 0.6rem; }
.personal-card .pc-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);   /* ROT */
  margin-bottom: 0.3rem;
}
.personal-card .pc-val {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
Light Mode Override
════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .personal-card {
  background: rgba(26,26,36,0.85);
}
[data-theme="light"] .personal-card .pc-val {
  color: #c0bdb4;
}

[data-theme="light"] .level-card .level-list li {
  color: #c0bdb4;
}

/* ════════════════════════════════════════════════════════════════════
Light Mode Override
════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   22. CTA-STRIP ("Neugierig geworden?")
   Roter Rahmen-Block ganz unten auf der About-Page
   ════════════════════════════════════════════════════════════════════ */
.cta-strip {
  background: rgba(224,48,48,0.06);           /* Zartes Rot */
  border: 1px solid rgba(224,48,48,0.2);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
}
.cta-strip h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.cta-strip p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.cta-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons im CTA-Strip (leicht kleiner als Hero-CTAs) */
.cta-strip .cta-main {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);  /* ROT */
  border: none;
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.cta-strip .cta-main:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(224,48,48,0.3);
}
.cta-strip .cta-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.cta-strip .cta-secondary:hover {
  background: var(--bg2);
  transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════════════
   23. FOOTER
   Unterer Bereich mit Logo und Links
   ════════════════════════════════════════════════════════════════════ */
footer {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
footer a:hover {
  color: var(--text);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.footer-logo span {
  color: var(--accent);   /* ROT */
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}


/* ════════════════════════════════════════════════════════════════════
   24. TOAST (Benachrichtigungs-Pop-up)
   Erscheint unten rechts — wird per JS ein-/ausgeblendet
   ════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transform: translateY(80px);  /* Versteckt — unten ausserhalb */
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  z-index: 200;
  max-width: 300px;
}

/* Sichtbar wenn JS class="show" setzt */
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast strong {
  color: var(--accent);   /* ROT */
}


/* ════════════════════════════════════════════════════════════════════
   25. ANIMATIONEN
   fadeUp = von unten einblenden (für Hero, About-Page)
   heartbeat = pochendes Herz
   pulse = blinkender Punkt im Badge
   ════════════════════════════════════════════════════════════════════ */

/* Von unten nach oben einblenden */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pochendes Herz ❤️ */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15%       { transform: scale(1.25); }
  30%       { transform: scale(1); }
  45%       { transform: scale(1.15); }
  60%       { transform: scale(1); }
}

/* Blinkender Punkt im Hero-Badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Gestaffelte Einblend-Klassen für About-Page */
.fade-1 { animation: fadeUp 0.6s 0.05s ease both; }
.fade-2 { animation: fadeUp 0.6s 0.15s ease both; }
.fade-3 { animation: fadeUp 0.6s 0.25s ease both; }
.fade-4 { animation: fadeUp 0.6s 0.35s ease both; }
.fade-5 { animation: fadeUp 0.6s 0.45s ease both; }


/* ════════════════════════════════════════════════════════════════════
   26. RESPONSIVE (Mobile)
   Anpassungen für kleine Bildschirme
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  /* Levels untereinander statt nebeneinander */
  .levels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  /* Zertifikat-Karten untereinander */
  .cert-row {
    grid-template-columns: 1fr;
  }
  /* Persönliche Karten untereinander */
  .personal-grid {
    grid-template-columns: 1fr;
  }
}