/* =====================================================================
   beccX – Aussehen der Seite

   Inhalt
   1. Grundfarben und Schriften   ← hier anpassen
   2. Grundlagen
   3. Kopfzeile
   4. Abschnitte und Neon
   5. Bilder und Platzhalter
   6. Über mich / Einblicke (Polaroids)
   7. Meine Webseiten (Karten)
   8. Mein beruflicher Weg
   9. Telefonbuch und Wählscheibe
   10. Kontakt und Fusszeile
   11. Handy und Tablet
   ===================================================================== */


/* ===== 1. Grundfarben und Schriften ===== */
/* Die zwei Neonfarben pro Abschnitt stehen in js/main.js (FARBE). */
:root {
  --hintergrund: #0e0b16;
  --flaeche:     #18142a;   /* Karten, Kästen */
  --linie:       #2c2544;
  --text:        #f3eff9;
  --gedaempft:   #a69fba;
  --papier:      #f7f3ea;   /* Polaroid-Rahmen */
  --papier-text: #2b2633;

  /* Ersatzfarben, falls js/main.js nicht lädt */
  --neon1: #ff3ea5;
  --neon2: #3ef0ff;

  --schrift:       "Bricolage Grotesque", system-ui, sans-serif;
  --handschrift:   "Caveat", cursive;

  --breite: 1100px;          /* maximale Inhaltsbreite */
  --rund: 14px;              /* Eckenradius */
}


/* ===== 2. Grundlagen ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--neon2); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .6em; }
h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

.handschrift { font-family: var(--handschrift); font-size: 1.5rem; }

.knopf {
  display: inline-block;
  padding: .75em 1.4em;
  border: 2px solid var(--neon1);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon1) 45%, transparent);
  transition: background .2s, box-shadow .2s;
}
.knopf:hover, .knopf:focus-visible {
  background: color-mix(in srgb, var(--neon1) 18%, transparent);
  box-shadow: 0 0 22px var(--neon1);
}
.knopf.klein { padding: .45em 1em; font-size: .95rem; }

:focus-visible { outline: 2px solid var(--neon2); outline-offset: 3px; }


/* ===== 3. Kopfzeile ===== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .8rem max(16px, calc((100% - var(--breite)) / 2));
  background: color-mix(in srgb, var(--hintergrund) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.logo {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text);
  text-decoration: none;
}
.logo span, .fuss span, .neon-titel span { color: var(--neon1); }

.menue { display: flex; gap: 1.2rem; margin-left: auto; flex-wrap: wrap; }
.menue a { color: var(--gedaempft); text-decoration: none; font-weight: 500; }
.menue a:hover { color: var(--text); }

.ton-schalter {
  font: inherit;
  font-size: .85rem;
  padding: .3em .8em;
  color: var(--gedaempft);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
}
.ton-schalter[aria-pressed="true"] { color: var(--text); border-color: var(--neon2); }


/* ===== 4. Abschnitte und Neon ===== */
.abschnitt {
  position: relative;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 6rem 16px;
}
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

.abschnitt h2 {
  color: var(--neon1);
  text-shadow: 0 0 6px var(--neon1), 0 0 22px color-mix(in srgb, var(--neon1) 60%, transparent);
}

.einleitung { color: var(--gedaempft); max-width: 60ch; margin: 0 0 2.5rem; }

/* Neonfiguren (die Formen stehen in js/main.js, FIGUREN) */
.neon-figur {
  position: absolute;
  top: 4rem;
  right: 16px;
  width: clamp(70px, 12vw, 130px);
  pointer-events: none;
  animation: flackern 7s infinite;
}
.neon-figur svg { width: 100%; height: auto; overflow: visible; }
.neon-figur path, .neon-figur circle, .neon-figur rect, .neon-figur polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neon-figur .f1 { stroke: var(--neon1); filter: drop-shadow(0 0 4px var(--neon1)) drop-shadow(0 0 10px var(--neon1)); }
.neon-figur .f2 { stroke: var(--neon2); filter: drop-shadow(0 0 4px var(--neon2)) drop-shadow(0 0 10px var(--neon2)); }

@keyframes flackern {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .35; }
}

/* Licht aus (Klick auf das Logo) */
body.licht-aus .neon-figur,
body.licht-aus .neon-titel { opacity: .15; animation: none; filter: grayscale(1); }

/* Start */
.start {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.neon-titel {
  font-size: clamp(4.5rem, 16vw, 10rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--text);
  text-shadow: 0 0 6px var(--neon2), 0 0 24px var(--neon2), 0 0 60px color-mix(in srgb, var(--neon2) 50%, transparent);
  cursor: pointer;
  transition: opacity .3s;
}
.neon-titel span { text-shadow: 0 0 6px var(--neon1), 0 0 24px var(--neon1), 0 0 60px var(--neon1); }
.untertitel { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: .5rem 0 0; }
.start .handschrift { color: var(--neon2); margin: .2rem 0 2rem; }

.zweispaltig {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}
.text p { margin: 0 0 1em; max-width: 60ch; }


/* ===== 5. Bilder und Platzhalter ===== */
.bild { position: relative; overflow: hidden; background: var(--flaeche); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild-hoch    { aspect-ratio: 4 / 5; }
.bild-quer    { aspect-ratio: 16 / 10; }
.bild-quadrat { aspect-ratio: 1 / 1; }

/* Erscheint, wenn die Bilddatei fehlt (gesteuert von js/main.js) */
.bild.fehlt {
  display: grid;
  place-items: center;
  border: 2px dashed var(--linie);
  color: var(--gedaempft);
  font-size: .9rem;
  text-align: center;
  padding: 1rem;
}
.bild.fehlt::after { content: "Bild fehlt: " attr(data-datei); }
.bild.fehlt img { display: none; }


/* ===== 6. Polaroids ===== */
.polaroid {
  margin: 0;
  padding: 12px 12px 4px;
  background: var(--papier);
  color: var(--papier-text);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  transform: rotate(2deg);
  transition: transform .3s;
}
.polaroid:hover { transform: rotate(0) scale(1.02); }
.polaroid figcaption { text-align: center; padding: .3rem 0; }
.polaroid .bild.fehlt { background: #e9e3d6; border-color: #c9c0ae; color: #7a7266; }

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.galerie .polaroid:nth-child(2) { transform: rotate(-2.5deg); }
.galerie .polaroid:nth-child(3) { transform: rotate(1.5deg); }


/* ===== 7. Meine Webseiten ===== */
.karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.karte {
  display: block;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.karte:hover {
  border-color: var(--neon2);
  box-shadow: 0 0 20px color-mix(in srgb, var(--neon2) 35%, transparent);
}
.karte h3 { margin: 1.2rem 1.2rem .4rem; }
.karte p  { margin: 0 1.2rem 1.4rem; color: var(--gedaempft); }


/* ===== 8. Mein beruflicher Weg ===== */
.zeitstrahl {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--neon2);
  box-shadow: -6px 0 12px -8px var(--neon2);
}
.zeitstrahl li { position: relative; margin-bottom: 2rem; }
.zeitstrahl li::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 7px);
  top: .35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neon1);
  box-shadow: 0 0 10px var(--neon1);
}
.zeitstrahl p { margin: 0; color: var(--gedaempft); }
.jahr { display: block; font-family: var(--handschrift); font-size: 1.4rem; color: var(--neon2); }

.zwischentitel { font-size: 1.5rem; }
.zertifikate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.zertifikat {
  padding: 1.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.zertifikat.leer { border-style: dashed; color: var(--gedaempft); }
.zertifikat h4 { margin: 0; }


/* ===== 9. Telefonbuch und Wählscheibe ===== */
.buch {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1.8rem;
  background: var(--papier);
  color: var(--papier-text);
  border-radius: 4px;
  font-family: var(--handschrift);
  font-size: 1.6rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
}
.buch li { display: flex; align-items: baseline; gap: .5rem; }
.buch .punkte { flex: 1; border-bottom: 2px dotted #b8ae9c; transform: translateY(-.3em); }

.telefon { display: grid; justify-items: center; gap: 1rem; }

.anzeige {
  min-width: 14rem;
  padding: .5rem 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--neon2);
  background: #07060c;
  border: 1px solid var(--linie);
  border-radius: 8px;
  text-shadow: 0 0 8px var(--neon2);
}

.waehlscheibe { width: min(300px, 80vw); }
.waehlscheibe svg { width: 100%; height: auto; display: block; }
.waehlscheibe .platte { fill: var(--flaeche); stroke: var(--neon1); stroke-width: 3; filter: drop-shadow(0 0 8px var(--neon1)); }
.waehlscheibe .ziffer { fill: var(--text); font: 600 18px var(--schrift); text-anchor: middle; dominant-baseline: central; }
.waehlscheibe .rad {
  transform-box: view-box;
  transform-origin: 150px 150px;
}
.waehlscheibe .loch { fill: var(--hintergrund); stroke: var(--neon2); stroke-width: 2; cursor: pointer; }
.waehlscheibe .loch-gruppe:hover .loch,
.waehlscheibe .loch-gruppe:focus-visible .loch { fill: color-mix(in srgb, var(--neon2) 25%, var(--hintergrund)); }
.waehlscheibe .loch-gruppe:focus-visible { outline: none; }
.waehlscheibe .mitte { fill: var(--hintergrund); stroke: var(--linie); stroke-width: 2; }
.waehlscheibe .anschlag { stroke: var(--neon1); stroke-width: 5; stroke-linecap: round; }


/* ===== 10. Kontakt und Fusszeile ===== */
.kontakt-links { list-style: none; padding: 0; display: flex; gap: 1.5rem; margin-top: 1.5rem; }
.kontakt-links a.fehlt { color: var(--gedaempft); text-decoration: line-through; }

.fuss {
  padding: 2rem 16px;
  text-align: center;
  color: var(--gedaempft);
  border-top: 1px solid var(--linie);
}


/* ===== 11. Handy und Tablet ===== */
@media (max-width: 800px) {
  .menue { display: none; }       /* auf dem Handy reicht Scrollen */
  .ton-schalter { margin-left: auto; }
  .abschnitt { padding: 4rem 16px; }
  .neon-figur { top: 3rem; }
  .zweispaltig, .karten, .zertifikate { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; max-width: 360px; }
  .polaroid { max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .neon-figur { animation: none; }
  .polaroid, .karte { transition: none; }
}