/* ======================================================================
   hannafehr.de — Stylesheet
   Aufbau:  1 Schrift · 2 Design-Tokens · 3 Grundlagen · 4 Bausteine
            5 Kopfzeile · 6 Hero · 7 Über mich · 8 Portfolio
            9 Lebenslauf · 10 Kontakt · 11 Fußzeile · 12 Animation
   Alle Farben, Abstände und Schriftgrößen stehen in Abschnitt 2.
   Wer dort etwas ändert, ändert es auf der ganzen Seite.
   ====================================================================== */


/* ==== 1 · SCHRIFT ===================================================== */
/* Liegt lokal auf dem Server (kein Google-CDN → datenschutzrechtlich sauber).
   Eine Datei enthält alle Strichstärken von 100 bis 900.               */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ==== 2 · DESIGN-TOKENS =============================================== */

:root {

  /* --- Farben ------------------------------------------------------- */
  --sand:        #FBF7F2;   /* Seitenhintergrund                        */
  --card:        #FFFFFF;   /* Karten                                   */
  --line:        #EAE3D9;   /* Trennlinien, Rahmen                      */

  --ink:         #24202B;   /* Überschriften, starker Text              */
  --ink-soft:    #4A4553;   /* Fließtext                                */

  --blue-soft:   #B3CCFF;   /* Flächen: Kreis hinter Foto, Lebenslauf   */
  --blue-tint:   #E1E7F7;   /* sehr helle blaue Fläche                  */
  --blue-name:   #6488E0;   /* "Hanna" in der Überschrift *)            */
  --blue-ink:    #3F63C8;   /* Links                                    */

  --pink-soft:   #FCD0E1;   /* Fläche                                   */
  --pink-ink:    #C33F6A;   /* kleine Auszeichnungstexte ("Über mich")  */

  --green:       #2FA84F;   /* Statuspunkt "Offen für Praktika"         */

  /* *) Hannas Original-Blau war #B3CCFF. Auf dem hellen Sand-Hintergrund
        ist das für Text zu kontrastarm (1,7:1 statt der geforderten 3:1).
        --blue-name ist die dunklere, lesbare Variante desselben Blaus.
        Wer das Original will: hier einfach #B3CCFF eintragen.           */

  /* --- Rundungen ---------------------------------------------------- */
  --r-pill:  999px;
  --r-card:  20px;
  --r-img:   16px;

  /* --- Abstände ----------------------------------------------------- */
  --gap-s:   12px;
  --gap-m:   24px;
  --gap-l:   40px;
  --gap-xl:  64px;
  --section-y: clamp(64px, 10vw, 128px);   /* Luft über/unter Abschnitten */
  --gutter:    clamp(20px, 5vw, 40px);     /* Seitenrand                  */
  --maxwidth:  1120px;

  /* --- Schriftgrößen ------------------------------------------------ */
  --fs-display: clamp(2.75rem, 8vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 5vw, 3rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.0625rem, 1.6vw, 1.1875rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;

  --shadow: 0 1px 2px rgb(36 32 43 / .04), 0 12px 32px rgb(36 32 43 / .06);
}


/* ==== 3 · GRUNDLAGEN ================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink-soft);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--gap-m);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { margin: 0 0 var(--gap-m); }

a { color: var(--blue-ink); }

:focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-img) 0;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

/* Innerer Container — hält den Inhalt mittig und begrenzt die Breite */
.wrap {
  width: 100%;
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section-title { text-align: center; margin-bottom: var(--gap-xl); }


/* ==== 4 · BAUSTEINE =================================================== */

/* --- Schaltflächen --------------------------------------------------- */
.button-row {
  display: flex; flex-wrap: wrap; gap: var(--gap-s);
  margin-bottom: 0;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-dark  { background: var(--ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 8px 20px rgb(36 32 43 / .22); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { box-shadow: 0 8px 20px rgb(36 32 43 / .18); }

/* --- Auszeichnung über einer Überschrift ----------------------------- */
.eyebrow {
  color: var(--blue-ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: var(--gap-m);
}

/* --- Akzentwort in Überschriften ------------------------------------- */
/* Ein Wort je Überschrift in Blau — dasselbe Muster wie "Hanna" im Hero. */
.accent { color: var(--blue-name); }

/* --- Status-Plakette -------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--gap-m);
}
.badge-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); flex: none;
}

/* --- Werkzeug-Liste --------------------------------------------------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.chips li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: var(--fs-small);
  color: var(--ink);
}


/* ==== 5 · KOPFZEILE =================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 247 242 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-m);
  min-height: 68px;
}

.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 26px; width: auto; }

@media (min-width: 800px) { .logo img { height: 32px; } }

.nav { display: none; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-body);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blue-name); }

/* Menüschalter (nur auf schmalen Bildschirmen sichtbar) */
.nav-toggle {
  display: grid; place-content: center; gap: 6px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* aufgeklapptes Menü auf dem Smartphone */
.nav.is-open {
  display: flex; flex-direction: column; gap: var(--gap-s);
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding: var(--gap-m) var(--gutter) var(--gap-l);
}

@media (min-width: 800px) {
  .nav-toggle { display: none; }
  .nav { display: flex; gap: var(--gap-m); }
}


/* ==== 6 · HERO ======================================================== */

.hero { padding-top: clamp(40px, 6vw, 72px); }

.hero-inner { display: grid; gap: var(--gap-xl); align-items: center; }

.hero-text .lead {
  font-size: var(--fs-lead);
  max-width: 34ch;
  margin-bottom: var(--gap-l);
}

/* Foto im Kreis, mit versetzter blauer Scheibe dahinter */
.portrait { position: relative; width: min(340px, 78vw); margin-inline: auto; }
.portrait::before {
  content: ""; position: absolute; inset: 0;
  translate: 16% 8%;
  border-radius: 50%;
  background: var(--blue-tint);
}
.portrait img {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 800px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
  .portrait { margin-inline: 0 auto; width: min(400px, 100%); }
}


/* ==== 7 · ÜBER MICH =================================================== */

.about-inner { display: grid; gap: var(--gap-l); }

@media (min-width: 800px) {
  .about-inner { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: start; }
}


/* ==== 8 · PORTFOLIO =================================================== */

.cards {
  display: grid; gap: var(--gap-m);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgb(36 32 43 / .05), 0 20px 40px rgb(36 32 43 / .11);
}

.card-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.card-body { padding: var(--gap-m); }

.card-tag {
  color: var(--blue-ink);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 6px;
}

.card-title { margin-bottom: 8px; }

.card-text { font-size: var(--fs-small); margin-bottom: 0; }


/* ==== 9 · LEBENSLAUF ================================================== */

.cv-block {
  background: var(--blue-soft);
  border-radius: var(--r-card);
  padding: clamp(40px, 8vw, 88px) var(--gutter);
  text-align: center;
}
.cv-block p { color: var(--ink); max-width: 46ch; margin-inline: auto; }
.cv-block .btn { margin-top: var(--gap-s); }


/* ==== 10 · KONTAKT ==================================================== */

.contact-inner { max-width: 46ch; }
.contact-inner .lead { font-size: var(--fs-lead); margin-bottom: var(--gap-l); }


/* ==== 11 · FUSSZEILE ================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--gap-l);
  font-size: var(--fs-small);
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m);
  align-items: center; justify-content: space-between;
}
.footer-inner p { margin: 0; }
.footer-inner nav { display: flex; gap: var(--gap-m); }
.footer-inner a { color: var(--ink-soft); text-decoration: none; }
.footer-inner a:hover { color: var(--blue-ink); text-decoration: underline; }


/* ==== 12 · ANIMATION ================================================== */
/* Inhalte blenden beim Hochscrollen sanft ein.                          */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
   bekommt gar keine Animation.                                          */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==== 13 · DRUCK & TEXTSEITEN ========================================= */
/* Wird von impressum.html und datenschutz.html mitbenutzt.              */

.legal { max-width: 68ch; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: var(--gap-l); }
.legal h2 { font-size: 1.375rem; color: var(--blue-ink); margin-top: var(--gap-l); margin-bottom: var(--gap-s); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal .platzhalter { background: var(--pink-soft); padding: 1px 6px; border-radius: 4px; }


/* ==== 14 · PROJEKTSEITEN ============================================== */
/* Wird von den Fallstudien benutzt (projekt-*.html).                     */

.projekt { max-width: 760px; }

.projekt-kopf { margin-bottom: var(--gap-xl); }
.projekt-kopf h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); }
.projekt-kopf .lead { font-size: var(--fs-lead); margin-bottom: var(--gap-l); }

/* Steckbrief: Rolle, Zeitraum, Werkzeuge */
.steckbrief {
  display: grid; gap: var(--gap-s) var(--gap-l);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--gap-m);
  margin: 0;
  font-size: var(--fs-small);
}
.steckbrief dt { color: var(--blue-ink); font-weight: 600; }
.steckbrief dd { margin: 0 0 var(--gap-s); color: var(--ink); }
.steckbrief dd:last-child { margin-bottom: 0; }

@media (min-width: 620px) {
  .steckbrief { grid-template-columns: max-content 1fr; align-items: baseline; }
  .steckbrief dd { margin-bottom: 0; }
}

/* Die sechs Abschnitte einer Fallstudie */
.schritt { margin-bottom: var(--gap-xl); }
.schritt h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: var(--gap-m); }
.schritt-nr {
  color: var(--blue-ink);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em;
  margin-bottom: 6px;
}

/* Bilder und Videos mit Bildunterschrift */
figure { margin: var(--gap-l) 0; }
figure img, figure video {
  width: 100%; border-radius: var(--r-img); display: block;
  background: var(--blue-tint);
}
figcaption {
  font-size: var(--fs-small); color: var(--ink-soft);
  margin-top: var(--gap-s);
  padding-left: var(--gap-s);
  border-left: 2px solid var(--blue-soft);
}

/* Zwei Bilder nebeneinander */
.bildpaar { display: grid; gap: var(--gap-s); }
@media (min-width: 620px) { .bildpaar { grid-template-columns: 1fr 1fr; } }
.bildpaar figure { margin: 0; }

/* Zitat / hervorgehobener Satz */
.merksatz {
  font-size: var(--fs-lead);
  color: var(--ink);
  border-left: 3px solid var(--blue-name);
  padding-left: var(--gap-m);
  margin: var(--gap-l) 0;
}

/* Gelber Hinweiskasten — nur in der Vorlage, beim Ausfüllen löschen */
.tipp {
  background: var(--blue-tint);
  border-radius: var(--r-img);
  padding: var(--gap-m);
  font-size: var(--fs-small);
  margin-bottom: var(--gap-m);
}
.tipp p:last-child { margin-bottom: 0; }
.tipp strong { color: var(--blue-ink); }

/* Zurück-Verweis am Seitenende */
.zurueck { border-top: 1px solid var(--line); padding-top: var(--gap-l); }

/* Portfoliokarten sind jetzt Verweise */
a.card { text-decoration: none; color: inherit; }
a.card:hover .card-title { color: var(--blue-ink); }