/* ============================================================================
   ALFI & SAMI — alfiandfriends.com
   Aufbau und Ruhe angelehnt an das Design von „Babyfotografie bei Alena D."
   (helles Papier, viel Weißraum, Eyebrow/Lead-Muster), aber in den Farben und
   Schriften von Alfi & Sami: Creme, Rot, Sonnengelb, warmes Dunkelbraun.
   Schriften sind SELBST GEHOSTET — kein Aufruf zu Google im Browser.
   ============================================================================ */

@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap;
             src: url("fonts/fredoka-500.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap;
             src: url("fonts/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap;
             src: url("fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap;
             src: url("fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap;
             src: url("fonts/nunito-700.woff2") format("woff2"); }

:root {
  --papier:      #FFF7E6;   /* Grundfläche — das Creme der Buchcover */
  --karte:       #FFFDF7;
  --sand:        #F6EAD2;
  --rot:         #C62828;   /* Hauptakzent */
  --rot-tief:    #A31F1F;
  --gelb:        #FFC107;   /* Sonnengelb — sparsam, für Freude */
  --gruen:       #1A6A5C;
  --tinte:       #2D2014;   /* Überschriften */
  --tinte-weich: #5E4B3B;   /* Fließtext */
  --tinte-leise: #9A8873;
  --auf-dunkel:  #FFF7E6;
  --linie:       #EFE2C9;

  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --text:    "Nunito", -apple-system, "Segoe UI", sans-serif;
  --rund:    18px;
  --breite:  1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--tinte-weich);
  font-family: var(--text); font-size: 1.05rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }   /* height:auto — sonst
         überschreibt das HTML-Attribut height=… das Seitenverhältnis und Kreise werden Ovale */
a { color: var(--rot); }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
section { padding: 84px 0; }
h1, h2, h3 { font-family: var(--display); color: var(--tinte); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }

.augenbraue {
  font-family: var(--display); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot); display: block; margin-bottom: .8em;
}
.fuehrung { font-size: 1.2rem; color: var(--tinte-weich); max-width: 56ch; }
.mitte { text-align: center; }
.mitte .fuehrung { margin-inline: auto; }

.knopf {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; padding: 15px 30px; border-radius: 999px;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(198,40,40,.18); }
.knopf--voll  { background: var(--rot); color: var(--auf-dunkel); }
.knopf--linie { border: 2px solid var(--rot); color: var(--rot); }
.knopf--gelb  { background: var(--gelb); color: var(--tinte); }

/* ------------------------------------------------------------------ Kopf -- */
.kopf {
  position: sticky; top: 0; z-index: 20; background: rgba(255,247,230,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between;
               gap: 20px; padding: 14px 24px; max-width: var(--breite); margin: 0 auto; }
.marke { font-family: var(--display); font-weight: 600; font-size: 1.3rem;
         color: var(--rot); text-decoration: none; letter-spacing: .02em; }
.marke span { color: var(--gruen); }
.nav { display: flex; gap: 26px; }
.nav a { font-family: var(--display); color: var(--tinte); text-decoration: none; font-size: .98rem; }
.nav a:hover { color: var(--rot); }
@media (max-width: 720px) { .nav { display: none; } }

/* ------------------------------------------------------------------ Held -- */
.held { padding: 64px 0 72px; }
.held__gitter { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .held__gitter { grid-template-columns: 1fr; gap: 32px; } }
.held__bild { border-radius: 28px; overflow: hidden; border: 3px solid var(--rot);
              box-shadow: 0 18px 44px rgba(45,32,20,.12); background: var(--karte); }
.held__knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* --------------------------------------------------------------- Karten -- */
.dreier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .dreier { grid-template-columns: 1fr; } }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
         padding: 30px 28px; }
.karte__zeichen { font-size: 1.9rem; line-height: 1; margin-bottom: 14px; }
.karte p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Figuren -- */
.figuren { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .figuren { grid-template-columns: repeat(2, 1fr); } }
.figur { text-align: center; }
.figur img { border-radius: 50%; border: 3px solid var(--gelb); background: var(--karte);
             aspect-ratio: 1; object-fit: cover; }
.figur h3 { margin: 16px 0 2px; font-size: 1.1rem; }
.figur p  { font-size: .95rem; color: var(--tinte-leise); margin: 0; }

/* --------------------------------------------------------------- Folgen -- */
.folgen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.folge { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
         overflow: hidden; text-decoration: none; color: inherit; display: block;
         transition: transform .15s ease, box-shadow .15s ease; }
.folge:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(45,32,20,.12); }
.folge__text { padding: 14px 16px 18px; }
.folge__nr { font-family: var(--display); color: var(--rot); font-size: .8rem;
             letter-spacing: .1em; text-transform: uppercase; }
.folge__titel { font-family: var(--display); color: var(--tinte); font-size: 1.02rem;
                line-height: 1.3; margin-top: 4px; }

/* ------------------------------------------------------------- Abschnitt -- */
.band { background: var(--sand); }
.band--dunkel { background: var(--tinte); color: var(--auf-dunkel); }
.band--dunkel h2 { color: var(--auf-dunkel); }
.band--dunkel .augenbraue { color: var(--gelb); }
.band--dunkel .fuehrung { color: #E4D6C0; }

/* --------------------------------------------------------------- Fußzeile -- */
.fuss { background: var(--tinte); color: #D9CBB6; padding: 56px 0 34px; font-size: .95rem; }
.fuss a { color: var(--gelb); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__gitter { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.fuss__links { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss__unten { border-top: 1px solid #4A3A2C; margin-top: 30px; padding-top: 20px;
               color: #9A8873; font-size: .88rem; }

/* ---------------------------------------------------------- Rechtsseiten -- */
.recht { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
.recht h2 { margin-top: 1.8em; font-size: 1.35rem; }
.recht .hinweis { background: #FFF3CD; border-left: 4px solid var(--gelb);
                  padding: 14px 18px; border-radius: 8px; color: #6B5314; }