/* =====================================================================
   Produkt-Landingpages — Institut für Gute Laune
   Farbfassung des Systems „Weiße Wand, bunte Menschen".

   Seit 09.09.2026 tragen die Produktseiten dieselben Farben wie die
   Startseite: Institutsblau für alles Große, Tinte für den Fließtext, Pink
   nur bei Hover und Tastaturfokus. Die zuvor erprobte schwarz-weiße Fassung
   ist damit abgelöst — sie liegt als Sicherung daneben.

   Die einzige Ausnahme ist das Produktzeichen (.produktzeichen): der
   Produktname bleibt schwarz und in Barlow Semi Condensed, weil er die
   Beschriftung der Schachtel zitiert und kein Seitentitel ist.

   Alles hängt unter der Wurzelklasse .produktseite, damit weder Astra noch
   Elementor hineinregieren und diese Datei nichts außerhalb der Landingpage
   anfasst.
   ===================================================================== */

/* ---------- Schriften ----------
   Alle drei Familien liegen lokal in fonts/. Es wird kein fremder Server
   aufgerufen — weder Google noch sonst jemand. Das ist die Nachlade-Regel
   aus DESIGN.md, und sie ist die Voraussetzung dafür, dass der Cookie-Hinweis
   und die Datenschutzerklärung stimmen.

   Karla 400/700 und kursiv 400 · Faustina 600 · Barlow Semi Condensed 700
   Alle drei unter der SIL Open Font License; Selbst-Ausliefern ist erlaubt.
   Jeweils latin und latin-ext, kein Vietnamesisch, kein Kyrillisch. */

@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/BarlowSemiCondensed-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/BarlowSemiCondensed-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

.produktseite {
  /* Farben — wie auf der Startseite */
  --wand: #ffffff;
  --blau: #202a8c;            /* Institutsblau: alles Große */
  --blau-tief: #171f6b;       /* nur Hover des Hauptknopfs */
  --tinte: #201e1d;           /* Fließtext, und das Produktzeichen */
  --tinte-leise: #6b6257;
  --linie: rgba(32, 42, 140, 0.18);
  --pink: #e0479b;            /* nur bei Berührung */

  /* Schrift */
  --font: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --font-titel: 'Faustina', Georgia, serif;
  --font-marke: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;

  --size-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.25rem);
  --size-h1: clamp(1.75rem, 1.35rem + 2.6vw, 2.75rem);
  --size-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
  --size-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --size-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --size-small: 0.875rem;
  --size-label: 0.75rem;

  /* Maß */
  --mass-text: 66ch;
  --mass-lead: 54ch;
  --mass-titel: 24ch;

  /* Raum */
  --eng: 8px;
  --normal: 24px;
  --weit: 60px;
  --raum: 104px;

  --breite: 1120px;
  --rand: 24px;

  background: var(--wand);
  color: var(--tinte);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Grundlagen ---------- */

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

.produktseite p,
.produktseite h1, .produktseite h2, .produktseite h3,
.produktseite ul, .produktseite ol, .produktseite figure { margin: 0; }

.produktseite img {
  display: block; max-width: 100%; height: auto;
  border-radius: 0;
}

.produktseite ::selection { background: var(--blau); color: var(--wand); }
.produktseite { caret-color: var(--pink); }

.produktseite a {
  color: var(--blau);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease;
}
.produktseite a:hover { color: var(--pink); }
.produktseite a:focus-visible,
.produktseite button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

/* Auch die Bildlaufleiste gehört zur Seite. */
.produktseite { scrollbar-color: var(--blau) rgba(32, 42, 140, .10); }

.huelle { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

/* ---------- Überschriften ---------- */

.produktseite h1 {
  font-family: var(--font-titel);
  font-size: var(--size-display);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.015em;
  max-width: var(--mass-titel);
  color: var(--blau);
  text-wrap: balance;
  hyphens: auto;
}
.produktseite h2.produktzeichen { font-family: var(--font-marke); color: var(--tinte); hyphens: none; }
.produktseite h2 {
  font-family: var(--font-titel);
  font-size: var(--size-h1);
  font-weight: 600; line-height: 1.14; letter-spacing: -0.005em;
  max-width: 20ch;
  color: var(--blau);
  text-wrap: balance;
  hyphens: auto;
}
.produktseite h3 {
  font-family: var(--font-titel);
  font-size: var(--size-h2);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--tinte);
  text-wrap: balance;
  hyphens: auto;
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.5;
  max-width: var(--mass-lead);
  text-wrap: pretty;
}
.text { max-width: var(--mass-text); text-wrap: pretty; }

/* ---------- Knopf ---------- */

/* Wie auf der Startseite: gefüllt in Institutsblau, Hover dunkelt nach. */
.produktseite .knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.75em 1.6em;
  background: var(--blau); color: var(--wand);
  font-family: var(--font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  border: 1px solid var(--blau); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.produktseite .knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--wand); }

.produktseite .knopf-leise {
  background: transparent; color: var(--blau);
  border: 1px solid var(--blau);
}
.produktseite .knopf-leise:hover {
  background: color-mix(in srgb, var(--blau) 8%, transparent);
  color: var(--blau); border-color: var(--blau);
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Kopf ---------- */

.kopf {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px var(--normal);
  padding-block: var(--normal);
  border-bottom: 1px solid var(--linie);
}
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { width: 62px; height: auto; }
.kopf nav { font-size: var(--size-small); }
.kopf nav a { text-decoration: none; }

/* ---------- Abschnitte ---------- */

.abschnitt { margin-top: var(--raum); }
.abschnitt-eng { margin-top: var(--weit); }

.trenner { border: 0; border-top: 1px solid var(--linie); margin: var(--raum) 0 0; }

/* Zweispaltiger Kopf: Überschrift links, Fließtext rechts.
   Die Ungleichheit ist beabsichtigt — sie ersetzt Rahmen und Kästen. */
.paar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--normal) var(--weit);
  align-items: start;
}
.paar-mitte { align-items: center; }
.paar h2 { max-width: 18ch; }

/* ---------- Anschlag ---------- */

.anschlag {
  margin-top: var(--weit);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--weit);
  align-items: center;
}
.anschlag .lead { margin-top: var(--normal); }
.anschlag .knopfreihe { margin-top: var(--weit); }

/* ---------- Bilder ---------- */

figure figcaption,
.bildtext {
  margin-top: var(--eng);
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1.45;
  color: var(--tinte-leise);
  max-width: 46ch;
}

.bilddrei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--normal);
  margin-top: var(--weit);
}
.bilddrei img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ---------- Liste mit Haarlinien ---------- */

.produktseite .liste { list-style: none; padding: 0; margin-top: var(--weit); max-width: var(--mass-text); }
.produktseite .liste li {
  padding-block: 18px;
  border-top: 1px solid var(--linie);
}
.produktseite .liste li:last-child { border-bottom: 1px solid var(--linie); }

/* Aufzählung des Packungsinhalts — knapper, ohne Punkte */
.produktseite .inhalt { list-style: none; padding: 0; margin-top: var(--weit); max-width: 44ch; }
.produktseite .inhalt li {
  padding-block: 12px;
  border-top: 1px solid var(--linie);
}
.produktseite .inhalt li:last-child { border-bottom: 1px solid var(--linie); }

/* ---------- Fähigkeitenblüte ---------- */

.bluete-kopf {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--weit);
  align-items: center;
}
.bluete-kopf img { width: 100%; }
.bluete-kopf h2 { max-width: 22ch; }

.pikto {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--normal) 12px;
  margin-top: var(--weit);
}
.pikto div { text-align: center; }
.pikto img { width: 100%; max-width: 132px; margin-inline: auto; }
.pikto span {
  display: block;
  margin-top: 6px;
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--size-label);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Der eine gestaltete Moment der Seite: die Blüte füllt sich, wenn sie in
   den Blick kommt. Voreinstellung ist sichtbar — ohne JavaScript oder bei
   reduzierter Bewegung steht alles sofort da. */
.pikto.regt-sich div {
  opacity: 0;
  transform: translateY(10px);
}
.pikto.regt-sich.da div {
  opacity: 1;
  transform: none;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 18ms);
}

/* ---------- Produktzeichen ----------
   Die einzige Stelle der Seite, an der eine dritte Schrift steht.
   Barlow Semi Condensed vertritt die Bahnschrift des Schachteldeckels;
   Bahnschrift selbst darf nicht als Webschrift ausgeliefert werden.
   Es ist ein Etikett, keine Textschrift: nur der Produktname, nur einmal.
   Und es bleibt SCHWARZ, während alles andere Große blau ist — die
   Verpackung ist einfarbig bedruckt, das zitiert die Seite hier.
   Festgelegt mit Thomas Preibisch am 08./09.09.2026 — siehe DESIGN.md. */

.produktzeichen {
  font-family: var(--font-marke);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: none;
}
.produktzeichen .dazu {
  display: block;
  font-family: var(--font-marke);
  font-weight: 700;
  font-size: var(--size-body);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 6px;
}

/* ---------- Starterset ---------- */

.produkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--weit);
  align-items: center;
}
.produkt-bilder {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
}
.produkt-bilder img { width: 100%; height: 100%; object-fit: cover; }
.produkt-bilder img:first-child { grid-row: span 2; }

.preiszeile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--normal);
  margin-top: var(--weit);
}
.preis {
  font-family: var(--font-titel);
  font-size: var(--size-h2);
  font-weight: 600;
  line-height: 1;
  color: var(--blau);
}
.zusatz {
  margin-top: 12px;
  font-size: var(--size-small);
  color: var(--tinte-leise);
}

/* ---------- Schluss: das Piktogrammfeld ----------
   Zitat des Schachteldeckels: die Piktogramme laufen randlos über die ganze
   Breite, der Text steht in einer freigelassenen weißen Fläche darin.
   Kein Hintergrundbild, keine Tönung — nur dieselben Zeichen wie oben, dicht
   gesetzt. Die Weiße-Wand-Regel bleibt unberührt, weil nichts eingefärbt wird.
   Genau einmal je Seite. */

.schlussfeld {
  position: relative;
  margin-top: var(--raum);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: var(--raum) var(--rand);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.feld {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 10px;
  padding: 10px;
  align-content: start;
  pointer-events: none;
}
.feld img { width: 100%; }

.schlussblock {
  position: relative;
  z-index: 1;
  background: var(--wand);
  padding: var(--weit) var(--weit) calc(var(--weit) + 8px);
  max-width: 620px;
  text-align: center;
}
.schlussblock img { width: 150px; margin: 0 auto var(--normal); }
.schlussblock h2 { max-width: 18ch; margin-inline: auto; }
.schlussblock .knopf { margin-top: var(--weit); }

/* ---------- Fuß ---------- */

.fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px var(--normal);
  padding-block: var(--weit);
  border-top: 1px solid var(--linie);
  font-size: var(--size-small);
  color: var(--tinte-leise);
}
.fuss-marke { display: flex; align-items: center; gap: 12px; }
.fuss-marke img { width: 38px; height: auto; }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--normal); }
.fuss a { color: var(--tinte-leise); text-decoration: none; }
.fuss a:hover { color: var(--pink); }

/* ---------- Schmale Geräte ---------- */

@media (max-width: 900px) {
  .produktseite { --raum: 72px; --weit: 40px; }

  .schlussfeld { display: block; padding: 0 0 var(--raum); }
  .feld {
    position: static;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 58px;          /* feste Reihenhöhe, damit das Band … */
    height: 140px;                 /* … genau zwei ganze Reihen zeigt */
    overflow: hidden;
    gap: 8px; padding: 8px;
    border-bottom: 1px solid var(--linie);
  }
  .feld img { height: 58px; object-fit: contain; }
  .schlussblock {
    max-width: none;
    margin-top: var(--raum);
    padding: 0 var(--rand);
  }
  .anschlag,
  .paar,
  .produkt { grid-template-columns: minmax(0, 1fr); }
  .anschlag { gap: var(--weit); }
  .produktseite h1,
  .produktseite h2,
  .paar h2,
  .schluss h2 { max-width: none; }
  .bluete-kopf { grid-template-columns: 108px minmax(0, 1fr); gap: var(--normal); }
  .bluete-kopf h2 { max-width: none; }
  .pikto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bilddrei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .produktseite { --rand: 20px; }
  .bluete-kopf { grid-template-columns: minmax(0, 1fr); }
  .bluete-kopf img { max-width: 120px; }
  .pikto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--normal) 8px; }
  .pikto span { letter-spacing: 0.03em; }
  .bilddrei { grid-template-columns: minmax(0, 1fr); }
  .produkt-bilder { grid-template-columns: 1fr; }
  .produkt-bilder img:first-child { grid-row: auto; }
  .knopfreihe .knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .produktseite *,
  .produktseite *::before,
  .produktseite *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .pikto.regt-sich div { opacity: 1; transform: none; }
}

/* ---------- Druck ---------- */

@media print {
  .produktseite { --raum: 32px; --weit: 20px; }
  .kopf, .fuss nav, .feld { display: none; }
  .schlussfeld { width: auto; margin-left: 0; padding: var(--weit) 0; }
  .produktseite a { text-decoration: none; color: var(--tinte); }  /* im Druck spart Schwarz Farbe */
  .pikto.regt-sich div { opacity: 1; transform: none; }
}