/* ============================================================
   THEME 06 — RETRO / POSTER
   ------------------------------------------------------------
   70er-Jahre-Werkstattplakat: Senfgelb, gebranntes Orange und
   Schokobraun auf cremigem Papier. Fette Plakatserife, Sticker,
   Sonnenstrahlen, Polaroid-Galerie und ein Laufband wie auf
   einer alten Reklametafel.
   ============================================================ */

body[data-theme="retro"] {
  /* --- Tokens --- */
  --c-bg:         #f6e8cd;
  --c-surface:    #eddbb8;
  --c-ink:        #46291a;
  --c-ink-soft:   #8c6a4d;
  --c-accent:     #c7521f;
  --c-accent-ink: #f6e8cd;
  --c-line:       #d9c29a;
  --c-mustard:    #d9a514;
  --c-teal:       #34706b;

  --font-display: "Abril Fatface", serif;
  --font-body:    "Work Sans", sans-serif;

  --radius-img:   16px;
  --btn-radius:   999px;
  --container:    1360px;
  --ease:         cubic-bezier(.34, 1.4, .44, 1);   /* federnder Bounce */
  --dur:          .7s;

  --retro-border: 2.5px solid var(--c-ink);
  --retro-shadow: 6px 6px 0 var(--c-mustard);

  font-size: 16.5px;
}
body[data-theme="retro"] h2 em {
  font-style: normal; color: var(--c-accent);
}

/* Reveals: kleiner Pop mit Bounce */
body[data-theme="retro"] [data-reveal] { transform: translateY(22px) scale(.96); }
body[data-theme="retro"] [data-reveal].is-revealed { transform: none; }

/* ---------- Header ---------- */
body[data-theme="retro"] .site-header {
  background: var(--c-bg);
  border-bottom: var(--retro-border);
}
body[data-theme="retro"] .brand__mark { color: var(--c-accent); }
body[data-theme="retro"] .brand__name { font-weight: 400; font-size: 1.3rem; }
body[data-theme="retro"] .main-nav__link {
  font-weight: 600; font-size: .86rem;
}
body[data-theme="retro"] .main-nav__link:hover {
  color: var(--c-accent);
  text-decoration: underline wavy var(--c-mustard) 2px;
  text-underline-offset: 6px;
}
body[data-theme="retro"] .theme-btn { border-radius: 999px; border: 2px solid transparent; }
body[data-theme="retro"] .theme-btn[aria-pressed="true"] { border-color: var(--c-ink); }

/* ---------- Hero: Plakat mit Sonnenrad ---------- */
body[data-theme="retro"] .hero {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  overflow: hidden;
}
body[data-theme="retro"] .hero__inner { grid-column: 2; grid-row: 1; }
body[data-theme="retro"] .hero__media { grid-column: 1; grid-row: 1; }

/* rotierendes Sonnenrad hinter dem Bild */
body[data-theme="retro"] .hero__deco {
  position: absolute; z-index: 0;
  left: clamp(-8rem, -6vw, -3rem); top: 50%;
  width: clamp(420px, 52vw, 760px); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--c-mustard) 0deg 11deg,
    transparent 11deg 30deg
  );
  opacity: .4;
  animation: retro-sun 50s linear infinite;
}
@keyframes retro-sun { to { transform: translateY(-50%) rotate(360deg); } }

body[data-theme="retro"] .hero__kicker {
  display: inline-block;
  border: var(--retro-border); border-radius: 999px;
  background: var(--c-mustard);
  padding: .55em 1.2em;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  transform: rotate(-2deg);
  margin-bottom: 2rem;
}
body[data-theme="retro"] .hero__title {
  font-size: clamp(3.6rem, 8.5vw, 7.8rem);
  font-weight: 400; line-height: .98;
  letter-spacing: .01em;
}
body[data-theme="retro"] .hero__line { display: inline; }
body[data-theme="retro"] .hero__word--accent {
  color: var(--c-accent);
  text-decoration: underline wavy var(--c-teal) 4px;
  text-underline-offset: .12em;
}
body[data-theme="retro"] .hero__claim {
  margin-top: 1.8rem;
  font-size: 1.08rem; max-width: 42ch;
  color: var(--c-ink-soft);
}
body[data-theme="retro"] .hero__actions { margin-top: 2rem; }

/* Bild als runde Vignette mit Ring + Sticker */
body[data-theme="retro"] .hero__media {
  position: relative; z-index: 2;
  aspect-ratio: 1;
  max-width: 520px; width: 100%;
}
body[data-theme="retro"] .hero__media img {
  border-radius: 50%;
  border: var(--retro-border);
  box-shadow: 0 0 0 12px var(--c-bg), 0 0 0 14.5px var(--c-ink);
  filter: sepia(.18) saturate(1.15) contrast(.98);
}
/* Sticker "Echt Handarbeit" */
body[data-theme="retro"] .hero__media::after {
  content: "Echt\AHand-\Aarbeit!";
  white-space: pre;
  position: absolute; right: -2%; top: -4%;
  width: 108px; height: 108px;
  display: grid; place-items: center;
  text-align: center;
  background: var(--c-teal); color: var(--c-bg);
  border: var(--retro-border); border-radius: 50%;
  font-weight: 700; font-size: .78rem; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .04em;
  transform: rotate(10deg);
  transition: transform .4s var(--ease);
}
body[data-theme="retro"] .hero__media:hover::after { transform: rotate(-4deg) scale(1.08); }
body[data-theme="retro"] .hero__media-caption {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  background: var(--c-bg);
  border: 2px solid var(--c-ink); border-radius: 6px;
  padding: .4em 1em;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
body[data-theme="retro"] .hero__scroll-hint { left: 50%; transform: translateX(-50%); font-weight: 700; }

/* ---------- Laufband: Reklametafel ---------- */
body[data-theme="retro"] .ticker {
  display: block;
  background: var(--c-accent); color: var(--c-bg);
  border-top: var(--retro-border); border-bottom: var(--retro-border);
}
body[data-theme="retro"] .ticker__track {
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: .04em;
  animation-duration: 36s;
}

/* ---------- Buttons ---------- */
body[data-theme="retro"] .btn {
  border: var(--retro-border);
  font-weight: 700; font-size: .85rem;
  padding: .95em 1.9em;
}
body[data-theme="retro"] .btn--primary {
  background: var(--c-accent); color: var(--c-accent-ink);
  box-shadow: var(--retro-shadow);
}
body[data-theme="retro"] .btn--ghost { background: var(--c-bg); }
body[data-theme="retro"] .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--c-mustard);
}

/* ---------- Sektionsköpfe: Plakat-Schlagzeile ---------- */
body[data-theme="retro"] .section-head {
  text-align: center;
  display: grid; justify-items: center;
}
body[data-theme="retro"] .section-head__index { display: none; }
body[data-theme="retro"] .section-head__label {
  border: 2px solid var(--c-ink); border-radius: 999px;
  background: var(--c-teal); color: var(--c-bg);
  padding: .45em 1.1em;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  transform: rotate(-1.5deg);
}
body[data-theme="retro"] .section-head__title {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  font-weight: 400; margin-top: .5em;
}
body[data-theme="retro"] .section-head__desc { margin-top: 1em; }
/* drei Retro-Streifen unter dem Kopf */
body[data-theme="retro"] .section-head::after {
  content: ""; width: 120px; height: 12px; margin-top: 1.4rem;
  background: linear-gradient(
    to bottom,
    var(--c-accent) 0 4px, transparent 4px 4.5px,
    var(--c-mustard) 4.5px 8px, transparent 8px 8.5px,
    var(--c-teal) 8.5px 12px
  );
  border-radius: 999px;
}

/* ---------- Leistungen: Jahrmarkt-Karten ---------- */
body[data-theme="retro"] .services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
body[data-theme="retro"] .service-card {
  background: var(--c-bg);
  border: var(--retro-border);
  border-radius: var(--radius-img);
  padding: 2rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--retro-shadow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
body[data-theme="retro"] .service-card:nth-child(even) { transform: rotate(.8deg); }
body[data-theme="retro"] .service-card:nth-child(odd)  { transform: rotate(-.8deg); }
body[data-theme="retro"] .service-card:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 8px 10px 0 var(--c-mustard);
}
body[data-theme="retro"] .service-card__index {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 1rem;
  background: var(--c-ink); color: var(--c-bg);
  border-radius: 999px;
  padding: .35em .8em;
}
body[data-theme="retro"] .service-card__icon {
  width: 54px; color: var(--c-accent);
}
body[data-theme="retro"] .service-card__icon svg { stroke-width: 2.4; }
body[data-theme="retro"] .service-card__title {
  font-size: 1.45rem; font-weight: 400;
}
body[data-theme="retro"] .service-card__text { font-size: .88rem; color: var(--c-ink-soft); flex: 1; }
body[data-theme="retro"] .service-card__link {
  font-weight: 700; font-size: .82rem; color: var(--c-teal);
  display: inline-flex; gap: .45em; align-items: center;
}
body[data-theme="retro"] .service-card__link .arrow { transition: transform .35s var(--ease); }
body[data-theme="retro"] .service-card__link:hover { color: var(--c-accent); }
body[data-theme="retro"] .service-card__link:hover .arrow { transform: translateX(6px); }

/* ---------- Projekte: Polaroid-Wand ---------- */
body[data-theme="retro"] .projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
body[data-theme="retro"] .project {
  background: #fffaf0;
  border: var(--retro-border);
  border-radius: 8px;
  padding: .9rem .9rem 0;
  box-shadow: 0 14px 26px -16px rgba(70, 41, 26, .5);
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
body[data-theme="retro"] .project:nth-child(3n+1) { transform: rotate(-2deg); }
body[data-theme="retro"] .project:nth-child(3n+2) { transform: rotate(1.5deg) translateY(1.4rem); }
body[data-theme="retro"] .project:nth-child(3n)   { transform: rotate(2.2deg); }
body[data-theme="retro"] .project:hover {
  transform: rotate(0) scale(1.03);
  box-shadow: 0 22px 38px -18px rgba(70, 41, 26, .55);
  z-index: 2;
}
/* Klebestreifen oben */
body[data-theme="retro"] .project::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 84px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(217, 165, 20, .65);
  border: 1px solid rgba(70, 41, 26, .25);
}
body[data-theme="retro"] .project__media {
  aspect-ratio: 10 / 11;
  border: 2px solid var(--c-ink);
  border-radius: 4px;
}
body[data-theme="retro"] .project__media img {
  filter: sepia(.22) saturate(1.1);
  transition: filter .45s ease;
}
body[data-theme="retro"] .project:hover .project__media img { filter: sepia(0) saturate(1.05); }
body[data-theme="retro"] .project__meta {
  text-align: center; justify-items: center;
  padding: .9rem .4rem 1.1rem;
}
body[data-theme="retro"] .project__title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
}
body[data-theme="retro"] .project__cat { font-size: .76rem; }
body[data-theme="retro"] .project__year {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  color: var(--c-accent);
}

/* ---------- Werkstatt ---------- */
body[data-theme="retro"] .about__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
body[data-theme="retro"] .about__media { position: relative; }
body[data-theme="retro"] .about__fig--1 {
  aspect-ratio: 4 / 5;
  border: var(--retro-border); border-radius: var(--radius-img);
  box-shadow: var(--retro-shadow);
  transform: rotate(-1.5deg);
}
body[data-theme="retro"] .about__fig--2 {
  position: absolute; right: -6%; bottom: -8%;
  width: 50%; aspect-ratio: 1;
  border: var(--retro-border); border-radius: 50%;
  box-shadow: 0 0 0 8px var(--c-bg), 0 0 0 10.5px var(--c-ink);
  transform: rotate(3deg);
  z-index: 2;
}
body[data-theme="retro"] .about__fig img { filter: sepia(.18) saturate(1.1); }
body[data-theme="retro"] .about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400; line-height: 1.3;
  margin-bottom: 1em;
}
body[data-theme="retro"] .about__quote {
  background: var(--c-mustard);
  border: var(--retro-border); border-radius: var(--radius-img);
  padding: 1.5rem 1.8rem;
  margin: 2rem 0;
  transform: rotate(-1deg);
  box-shadow: 5px 5px 0 var(--c-ink);
}
body[data-theme="retro"] .about__quote p {
  font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1.35;
  margin-bottom: .4em;
}
body[data-theme="retro"] .about__quote cite { color: var(--c-ink); font-weight: 600; }
body[data-theme="retro"] .about__stats {
  grid-template-columns: repeat(4, auto);
  justify-content: start; gap: 1rem 2.4rem;
  margin-top: 2.4rem;
}
body[data-theme="retro"] .stat__value {
  font-weight: 400; font-size: 2.4rem;
}
body[data-theme="retro"] .stat:nth-child(1) .stat__value { color: var(--c-accent); }
body[data-theme="retro"] .stat:nth-child(2) .stat__value { color: var(--c-teal); }
body[data-theme="retro"] .stat:nth-child(3) .stat__value { color: var(--c-mustard); }
body[data-theme="retro"] .stat:nth-child(4) .stat__value { color: var(--c-ink); }

/* ---------- Kontakt: braune Plakatwand mit Sonne ---------- */
body[data-theme="retro"] .contact {
  max-width: min(var(--container), calc(100% - 2.5rem));
  background: var(--c-ink); color: var(--c-bg);
  border-radius: 24px;
  border: var(--retro-border);
  box-shadow: 8px 8px 0 var(--c-mustard);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 6rem);
  margin-block: clamp(2rem, 5vw, 4rem);
  text-align: center;
  position: relative; overflow: hidden;
}
body[data-theme="retro"] .contact::before {
  content: ""; position: absolute; right: -18%; top: -30%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(var(--c-accent) 0deg 10deg, transparent 10deg 26deg);
  opacity: .35;
  animation: retro-sun 60s linear infinite reverse;
}
body[data-theme="retro"] .contact__layout { position: relative; display: grid; justify-items: center; }
body[data-theme="retro"] .section-head--contact { margin-bottom: 1.2rem; }
body[data-theme="retro"] .section-head--contact::after { display: none; }
body[data-theme="retro"] .section-head--contact .section-head__label {
  background: var(--c-mustard); color: var(--c-ink);
}
body[data-theme="retro"] .contact__title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 400; max-width: 16ch;
}
body[data-theme="retro"] .contact__title em {
  font-style: normal; color: var(--c-mustard);
  text-decoration: underline wavy var(--c-accent) 3px;
  text-underline-offset: .14em;
}
body[data-theme="retro"] .contact__desc { margin-top: 1.2em; max-width: 48ch; color: #d9c29a; }
body[data-theme="retro"] .contact__actions { margin-top: 2.2rem; justify-content: center; }
body[data-theme="retro"] .contact .btn { border-color: var(--c-bg); box-shadow: 5px 5px 0 var(--c-mustard); }
body[data-theme="retro"] .contact .btn--primary { background: var(--c-accent); color: var(--c-bg); }
body[data-theme="retro"] .contact .btn--ghost { background: transparent; color: var(--c-bg); }
body[data-theme="retro"] .contact .btn--ghost:hover { background: var(--c-bg); color: var(--c-ink); }
body[data-theme="retro"] .contact__details {
  margin-top: 3rem;
  grid-template-columns: repeat(4, auto);
  gap: 2.5rem; font-size: .9rem;
}
body[data-theme="retro"] .contact__detail-label { color: var(--c-mustard); font-weight: 700; }

/* ---------- Footer ---------- */
body[data-theme="retro"] .site-footer {
  border-top: 9px double var(--c-ink);
  background: var(--c-bg);
}
body[data-theme="retro"] .footer__nav a { font-weight: 600; }
body[data-theme="retro"] .footer__nav a:hover {
  color: var(--c-accent);
  text-decoration: underline wavy var(--c-mustard) 2px;
  text-underline-offset: 5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  body[data-theme="retro"] .services__grid { grid-template-columns: repeat(2, 1fr); }
  body[data-theme="retro"] .projects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body[data-theme="retro"] .hero { grid-template-columns: 1fr; text-align: center; }
  body[data-theme="retro"] .hero__inner { grid-column: 1; grid-row: 1; }
  body[data-theme="retro"] .hero__media { grid-column: 1; grid-row: 2; margin: 2.5rem auto 0; }
  body[data-theme="retro"] .hero__actions { justify-content: center; }
  body[data-theme="retro"] .hero__claim { margin-inline: auto; }
  body[data-theme="retro"] .hero__deco { left: 50%; top: 60%; transform: translate(-50%, -30%); }
  body[data-theme="retro"] .about__layout { grid-template-columns: 1fr; }
  body[data-theme="retro"] .about__media { max-width: 440px; margin-inline: auto; }
  body[data-theme="retro"] .contact__details { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
  body[data-theme="retro"] .services__grid,
  body[data-theme="retro"] .projects__grid { grid-template-columns: 1fr; }
  body[data-theme="retro"] .project:nth-child(3n+2) { transform: rotate(1.5deg); }
  body[data-theme="retro"] .about__stats { grid-template-columns: repeat(2, 1fr); }
  body[data-theme="retro"] .contact__details { grid-template-columns: 1fr; }
}