/* FEMALE INTENTION · BIO HUB
   Farben und Schriften ausschließlich laut Female-Intention-Branding
   (Marketing Brand + Master System 1.0). Gestaltung freigegeben am 2026-10-27. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/schriften/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/schriften/raleway-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/schriften/raleway-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../assets/schriften/raleway-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Alex Brush"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/schriften/alex-brush-latin-400-normal.woff2") format("woff2"); }

:root {
  /* Markenfarben */
  --beere: #cb317f;    /* Buttons, hervorgehobener Check */
  --rosa: #f67eb1;     /* nur dekorativ */
  --rose: #f4dbe7;     /* sanfte Flächen */
  --rose-hell: #fbf0f5;
  --petrol: #358a95;   /* Etiketten, Häkchen, Fokus */
  --himmel: #50cef0;   /* nur dekorativ, sehr sparsam */
  --weiss: #fff;
  --schwarz: #000;
  --text-weich: #3d3d3d;

  --titel: "Cormorant Garamond", Georgia, serif;
  --text: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --akzent: "Alex Brush", cursive;
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--schwarz); font-family: var(--text); font-size: 1rem; line-height: 1.6; font-variant-numeric: lining-nums; }
@media (min-width: 40rem) { body { background: linear-gradient(180deg, var(--rose) 0%, var(--rose-hell) 100%); } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; line-height: 1.12; margin: 0; }
p { margin: 0; }
a:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }

.springen { position: absolute; left: -999px; top: 0; background: var(--weiss); padding: .5rem 1rem; z-index: 10; }
.springen:focus { left: 1rem; top: 1rem; }

.seite { max-width: 30rem; margin: 0 auto; background: var(--weiss); overflow: hidden; min-height: 100vh; }
@media (min-width: 40rem) { .seite { margin: 2rem auto; min-height: 0; border-radius: 28px; box-shadow: 0 20px 60px #cb317f1f; } }
.innen { padding: 0 1.25rem; }

/* ---------- Kopf ---------- */
.kopf { position: relative; text-align: center; padding: 1.1rem 1.25rem 1.1rem; }
.kopf::before { content: ""; position: absolute; inset: -40% -30% auto; height: 120%; background: radial-gradient(ellipse at center, var(--rose) 0%, #f4dbe700 68%); z-index: 0; }
.kopf > * { position: relative; }
.logo { width: 8.5rem; margin: 0 auto .8rem; }
.akzentzeile { font-family: var(--akzent); color: var(--beere); font-size: 1.7rem; line-height: 1; margin-bottom: .4rem; }
.kopf h1 { font-size: 2.1rem; letter-spacing: -.01em; margin-bottom: .6rem; }
.kopf .unter { color: var(--text-weich); font-size: .95rem; line-height: 1.5; max-width: 21rem; margin: 0 auto; }
.vertrauen { display: inline-flex; align-items: center; gap: .6rem; margin-top: .8rem; font-size: .85rem; color: var(--text-weich); text-align: left; }
.vertrauen img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--weiss); box-shadow: 0 0 0 1.5px var(--rosa); }
.vertrauen strong { color: var(--schwarz); font-weight: 600; }

/* ---------- Übersicht ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 3.25rem; }
.uebersicht { margin: 0 0 1.75rem; }
.uebersicht h2 { font-size: 1.4rem; text-align: center; margin-bottom: .75rem; line-height: 1.2; }
.uebersicht ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.kachel { display: grid; grid-template-columns: 4rem 1fr auto; gap: .85rem; align-items: center; padding: .5rem .9rem .5rem .5rem; border-radius: 18px; border: 1.5px solid var(--rose); background: var(--weiss); color: inherit; text-decoration: none; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.kachel::after { content: "↓"; color: var(--beere); font-weight: 600; font-size: 1.1rem; transition: transform .25s ease; }
.kachel:active { transform: scale(.985); }
@media (hover: hover) { .kachel:hover { border-color: var(--rosa); transform: translateY(-2px); box-shadow: 0 8px 20px #cb317f1a; } .kachel:hover::after { transform: translateY(3px); } }
.kachel { position: relative; }
.kachel--hervor { padding-top: .85rem; background: var(--rose-hell); border-color: var(--beere); box-shadow: 0 6px 18px #cb317f1f; }
.kachel__badge { position: absolute; top: -.7rem; right: .9rem; font-style: normal; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--weiss); background: var(--beere); border-radius: 99px; padding: .2rem .6rem; box-shadow: 0 4px 10px #cb317f40; }
.uebersicht li:first-child { margin-top: .4rem; }
.kachel__bild { width: 4rem; height: 4rem; border-radius: 12px; overflow: hidden; background: var(--rose); display: grid; place-items: center; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kachel__symbol { font-family: var(--akzent); color: var(--beere); font-size: 1.45rem; }
.kachel__text { display: grid; line-height: 1.3; }
.kachel__text small { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); }
.kachel__text strong { font-family: var(--titel); font-size: 1.3rem; font-weight: 700; margin: .05rem 0; line-height: 1.15; }
.kachel__text span { font-size: .82rem; color: var(--text-weich); }

/* Schrittzeile über jedem Bereich */
.schritt-zeile { display: flex; align-items: center; gap: .75rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin: 2rem 0 .8rem; }
.schritt-zeile::before, .schritt-zeile::after { content: ""; height: 1px; background: var(--rose); flex: 1; }
.uebersicht + .bereich > .schritt-zeile:first-child { margin-top: 0; }

/* Was passiert beim Klick */
.klick-hinweis { font-size: .8rem; text-align: center; margin: .65rem 0 0 !important; opacity: .85; }

/* Vorschaubild im Branding-Check (klein, neben der Überschrift) */
.hervorgehoben__kopf { display: grid; grid-template-columns: 1fr 5.6rem; gap: 1rem; align-items: start; margin-bottom: .7rem; }
.vorschau { margin: .2rem 0 0; background: var(--weiss); border-radius: 12px; padding: .3rem; box-shadow: 0 10px 22px #00000033; transform: rotate(3deg); transition: transform .4s ease; }
.vorschau img { border-radius: 8px; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
@media (hover: hover) { .hervorgehoben:hover .vorschau { transform: rotate(0deg) scale(1.04); } }

/* ---------- Karten ---------- */
.karte { border-radius: var(--radius); padding: 1.6rem 1.4rem; margin-bottom: 1.25rem; }
.etikett { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 99px; margin-bottom: .9rem; }
.karte h2 { font-size: 1.85rem; margin-bottom: .6rem; }
.karte p { margin-bottom: 1.1rem; }
.preis { font-weight: 600; font-size: 1.05rem; }

.knopf { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .85rem 1rem; border-radius: 99px; font-weight: 600; font-size: .95rem; line-height: 1.35; text-decoration: none; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
a.knopf::after { content: "→"; font-weight: 500; transition: transform .25s ease; }
a.knopf:active { transform: scale(.98); }
@media (hover: hover) { a.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #cb317f40; } a.knopf:hover::after { transform: translateX(4px); } }
a.knopf:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
a.knopf:active::after { transform: translateX(6px); }
.knopf--bald { border: 1.5px dashed currentColor; background: transparent !important; box-shadow: none !important; opacity: .8; cursor: default; }

/* Hervorgehoben (Branding-Check) */
.hervorgehoben { background: var(--beere); color: var(--weiss); position: relative; overflow: hidden; box-shadow: 0 14px 34px #cb317f40; }
.hervorgehoben::after { content: ""; position: absolute; width: 14rem; height: 14rem; border-radius: 50%; right: -6rem; top: -6rem; border: 1.5px solid #ffffff38; pointer-events: none; }
.hervorgehoben::before { content: ""; position: absolute; width: 9rem; height: 9rem; border-radius: 50%; right: -2.5rem; top: -2.5rem; border: 1.5px solid #ffffff26; pointer-events: none; }
.hervorgehoben .etikett { background: var(--weiss); color: var(--beere); }
.hervorgehoben { padding: 1.35rem 1.3rem 1.3rem; }
.hervorgehoben h2 { font-size: 1.75rem; margin-bottom: 0; }
.hervorgehoben .etikett { margin-bottom: .6rem; }
.hervorgehoben > p { font-size: .95rem; margin-bottom: .9rem; }
.fakten { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.fakten li { background: #ffffff1f; border: 1px solid #ffffff38; border-radius: 99px; padding: .25rem .75rem; font-size: .8rem; font-weight: 500; line-height: 1.4; }
.fakten b { font-weight: 700; }
.hervorgehoben .knopf { background: var(--weiss); color: var(--beere); box-shadow: 0 6px 16px #0000001f; }

/* Hauptprodukt (AI Branding Studio) */
.hauptprodukt { border: 1.5px solid var(--rose); background: var(--weiss); padding: 0; overflow: hidden; }
.feeds { margin: 0; background: var(--rose); padding: 1rem 0 .8rem; }
.feeds figcaption { font-family: var(--titel); font-weight: 700; color: var(--beere); font-size: 1.2rem; line-height: 1.2; text-align: center; margin-bottom: .7rem; padding: 0 1rem; }
/* Wischbare Galerie: Karten rasten mittig ein, die nächste Marke blitzt am Rand hervor. */
.feeds__reihe { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 10rem; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem calc(50% - 5rem) .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.feeds__reihe::-webkit-scrollbar { display: none; }
.feeds__reihe:focus-visible { outline: 3px solid var(--petrol); outline-offset: -3px; }
.feeds__feed { scroll-snap-align: center; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease; }
.feeds--aktiv .feeds__feed { transform: scale(.86); opacity: .55; filter: saturate(.8); cursor: pointer; }
.feeds--aktiv .feeds__feed.ist-aktiv { transform: none; opacity: 1; filter: none; cursor: default; }
.feeds--aktiv .feeds__feed span { transition: opacity .4s ease; }
.feeds--aktiv .feeds__feed:not(.ist-aktiv) span { opacity: 0; }
.feeds--aktiv .feeds__feed img { transition: box-shadow .5s ease; }
.feeds--aktiv .feeds__feed.ist-aktiv img { box-shadow: 0 14px 30px #cb317f33; }
.feeds__punkte[hidden] { display: none; }
.feeds__punkte { display: flex; justify-content: center; gap: 0; margin: -.35rem 0 -.35rem; }
.feeds__punkte button { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.feeds__punkte button::before { content: ""; width: .45rem; height: .45rem; border-radius: 99px; background: var(--beere); opacity: .3; transition: width .35s ease, opacity .35s ease; }
.feeds__punkte button[aria-current="true"]::before { width: 1.3rem; opacity: 1; }
.feeds__punkte button:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; border-radius: 99px; }
.feeds--aktiv .feeds__hinweis { display: none; }
.feeds__feed img { width: 100%; border-radius: 12px; box-shadow: 0 8px 20px #0000002a; background: var(--weiss); }
.feeds__feed span { display: block; text-align: center; font-size: .78rem; font-weight: 600; margin-top: .45rem; line-height: 1.2; }
.feeds__hinweis { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-weich); margin-top: .2rem; }
.feeds__hinweis::before { content: "← "; } .feeds__hinweis::after { content: " →"; }

.hauptprodukt .inhalt { padding: 1.2rem 1.3rem 1.3rem; }
.hauptprodukt .etikett { background: #358a951a; color: var(--petrol); }
.hauptprodukt h2 { font-size: 1.9rem; margin-bottom: .4rem; }
.hauptprodukt .etikett { margin-bottom: .6rem; }
.hauptprodukt .inhalt > p { font-size: .95rem; margin-bottom: .9rem; }
.liste { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.liste li { position: relative; padding-left: 1.9rem; margin-bottom: .45rem; font-size: .92rem; line-height: 1.4; }
.liste li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }
.hauptprodukt .knopf { background: var(--beere); color: var(--weiss); box-shadow: 0 8px 20px #cb317f40; }
.hauptprodukt .knopf--bald { color: var(--beere); }

/* Gruppe (Content-Kits) */
.gruppe { margin-top: 2rem; }
.schritt-zeile + .gruppe { margin-top: 0; }
.bereich-kopf { text-align: center; margin-bottom: 1rem; }
.bereich-kopf .akzentzeile { font-size: 1.6rem; }
.bereich-kopf h2 { font-size: 1.85rem; margin-bottom: .4rem; }
.bereich-kopf p { color: var(--text-weich); font-size: .9rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: .8rem 0 0; }
.chips li { font-size: .74rem; font-weight: 500; border: 1px solid var(--rose); border-radius: 99px; padding: .2rem .6rem; color: var(--text-weich); }
.produkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.produkt { background: var(--rose-hell); border: 1.5px solid var(--rose); border-radius: 18px; padding: .45rem .45rem .9rem; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.produkt > h3, .produkt > p, .produkt > .preis, .produkt > .knopf { margin-inline: .45rem; }
@media (hover: hover) { .produkt:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #cb317f1f; } }
/* Bildbereich: zeigt später die echte Canva-Vorschau (Feld "bild"), bis dahin eine schlichte Titelfläche. */
.produkt__bild { position: relative; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden; margin-bottom: .7rem; background: linear-gradient(150deg, var(--rose) 0%, #f9e7ef 100%); }
.produkt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
@media (hover: hover) { .produkt:hover .produkt__bild img { transform: scale(1.04); } }
.produkt__cover { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.produkt__cover::before { content: ""; position: absolute; inset: .55rem; border: 1px solid #cb317f33; border-radius: 9px; }
.produkt__cover .nummer { font-family: var(--akzent); color: var(--beere); font-size: 2.2rem; line-height: 1; }
.produkt__cover small { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-weich); margin-top: .3rem; }
.produkt__cover .status-bald { justify-self: center; margin-top: .45rem; }
.status-bald--foto { position: absolute; top: .45rem; right: .45rem; }
.status-bald { box-shadow: 0 2px 6px #0000000f; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--beere); background: var(--weiss); border: 1px dashed var(--beere); border-radius: 99px; padding: .15rem .45rem; white-space: nowrap; }
.produkt h3 { font-size: 1.08rem; line-height: 1.15; margin-bottom: .35rem; overflow-wrap: break-word; }
.produkt p { font-size: .8rem; line-height: 1.45; color: #222; }
.produkt .preis { margin-top: auto; padding-top: .5rem; }
.produkt .knopf { margin-top: .7rem; min-height: 2.75rem; padding: .55rem .6rem; font-size: .82rem; border: 1.5px solid var(--beere); color: var(--beere); background: var(--weiss); }
/* Smartphones: Kit-Karten untereinander, Bild links, Text rechts – damit die Beschreibung genug Platz hat */
@media (max-width: 39.99rem) {
  .produkte { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .produkt h3 { font-size: 1.2rem; line-height: 1.15; margin-bottom: .3rem; }
  .produkt p { font-size: .9rem; line-height: 1.5; }
}
@media (min-width: 22.5rem) and (max-width: 39.99rem) {
  .produkt { display: grid; grid-template-columns: minmax(8.4rem, 40%) minmax(0, 1fr); column-gap: .9rem; align-content: center; padding: .5rem .95rem .5rem .5rem; }
  .produkt__bild { grid-row: 1 / span 4; margin-bottom: 0; align-self: center; }
  .produkt > h3, .produkt > p, .produkt > .preis, .produkt > .knopf { grid-column: 2; margin-inline: 0; }
  .produkt h3 { align-self: end; }
  .produkt p { align-self: start; }
}
/* Sehr schmale Geräte: Bild über dem Text, flacher, damit die Karte kompakt bleibt */
@media (max-width: 22.49rem) { .produkt__bild { aspect-ratio: 16 / 7; } }
.kleingedruckt { text-align: center; font-size: .78rem; color: var(--text-weich); margin: 0 0 1rem; }

/* Standard (z. B. AI Content Studio) */
.standard { background: linear-gradient(160deg, #ffffff 0%, #eaf6f7 100%); border: 1.5px solid #358a9533; margin-top: 2rem; }
.standard .etikett { background: var(--petrol); color: var(--weiss); }
.standard .knopf { background: var(--petrol); color: var(--weiss); }
.standard .knopf--bald { color: var(--petrol); }

/* ---------- Über mich ---------- */
.ueber { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; align-items: center; margin: 1.5rem 0 .75rem; padding: 1.25rem 0; border-top: 1px solid var(--rose); }
.ueber img { width: 5.5rem; height: 7rem; object-fit: cover; object-position: top; border-radius: 999px 999px 18px 18px; }
.ueber p { font-size: .9rem; color: var(--text-weich); }
.ueber .unterschrift { font-family: var(--akzent); color: var(--beere); font-size: 1.7rem; line-height: 1; margin-top: .4rem; }

/* ---------- Fuß ---------- */
.fuss { text-align: center; font-size: .8rem; color: var(--text-weich); padding: 1.5rem 1.25rem 2.5rem; background: var(--rose-hell); }
.fuss nav { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: .5rem; }
.fuss a { color: var(--schwarz); font-weight: 500; text-underline-offset: 3px; display: inline-block; padding: .75rem .25rem; }

/* ---------- Rechtliche Seiten ---------- */
.recht { padding: 0 1.25rem 2.5rem; }
.recht .logo { width: 8rem; margin: 2rem auto 1.75rem; }
.recht h1 { font-size: 2.2rem; margin-bottom: 1.25rem; }
.recht h2 { font-size: 1.45rem; margin: 1.75rem 0 .5rem; }
.recht h3 { font-family: var(--text); font-size: 1.02rem; font-weight: 600; margin: 1.4rem 0 .4rem; line-height: 1.35; }
.recht h4 { font-family: var(--text); font-size: .95rem; font-weight: 600; margin: 1rem 0 .3rem; }
.recht p, .recht li { font-size: .95rem; margin-bottom: .75rem; overflow-wrap: anywhere; }
.recht a { color: var(--beere); }
.zurueck { display: inline-block; margin-top: 1.5rem; font-weight: 600; color: var(--beere); text-underline-offset: 3px; }
.platzhalter { border: 2px dashed var(--rosa); border-radius: 14px; padding: 1rem; background: var(--rose-hell); }


/* ---------- Computer (ab 1024 px): breitere Seite, Angebote nebeneinander ---------- */
@media (min-width: 64rem) {
  .seite { max-width: 72rem; margin: 2.5rem auto; overflow: clip; }
  .kopf { padding: 2.75rem 4rem 2.25rem; }
  .logo { width: 11rem; margin-bottom: 1.2rem; }
  .akzentzeile { font-size: 2rem; }
  .kopf h1 { font-size: 3.4rem; margin-bottom: .9rem; }
  .kopf .unter { font-size: 1.1rem; max-width: 34rem; }
  .vertrauen { margin-top: 1.2rem; }

  .innen { padding: 0 3.5rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; align-items: start; }
  .uebersicht, .bereich--gruppe, .bereich--standard, .ueber { grid-column: 1 / -1; }
  .uebersicht { margin-bottom: 1rem; }
  .uebersicht h2 { font-size: 1.8rem; margin-bottom: 1.1rem; }
  .uebersicht ul { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .uebersicht li:first-child { margin-top: 0; }
  .kachel { height: 100%; }
  .uebersicht + .bereich > .schritt-zeile:first-child { margin-top: 2rem; }

  /* Branding-Check bleibt beim Scrollen neben dem Studio sichtbar */
  .bereich--hervorgehoben { align-self: stretch; }
  .bereich--hervorgehoben > .hervorgehoben { position: sticky; top: 1.5rem; }
  .hervorgehoben { padding: 1.75rem 1.75rem 1.6rem; }
  .hervorgehoben h2 { font-size: 2.1rem; }
  .hervorgehoben__kopf { grid-template-columns: 1fr 7rem; }

  .feeds__reihe { grid-auto-columns: 12rem; padding-inline: calc(50% - 6rem); }
  .hauptprodukt .inhalt { padding: 1.4rem 1.75rem 1.6rem; }

  .gruppe { max-width: 56rem; margin-inline: auto; }
  .produkte { gap: 1rem; }
  /* Kit-Karten waagerecht: Bild links, Text rechts */
  .produkt { display: grid; grid-template-columns: 10.5rem 1fr; column-gap: 1.1rem; align-content: center; padding: .6rem 1.1rem .6rem .6rem; }
  .produkt__bild { grid-row: 1 / span 4; margin-bottom: 0; align-self: center; }
  .produkt > h3, .produkt > p, .produkt > .preis, .produkt > .knopf { grid-column: 2; margin-inline: 0; }
  .produkt h3 { font-size: 1.35rem; align-self: end; }
  .produkt p { font-size: .9rem; align-self: start; }

  .ueber { max-width: 46rem; margin: 2rem auto 1rem; grid-template-columns: 7rem 1fr; gap: 1.6rem; }
  .ueber img { width: 7rem; height: 9rem; }
  .ueber p { font-size: .95rem; }
}

/* ---------- Bewegung (nur wenn nicht reduziert gewünscht) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Kopfbereich erscheint elegant von oben nach unten, danach die Auswahlkarten */
  .kopf > * { animation: auftauchen .8s cubic-bezier(.2,.7,.2,1) both; }
  .kopf > :nth-child(2) { animation-delay: .08s; }
  .kopf > :nth-child(3) { animation-delay: .16s; }
  .kopf > :nth-child(4) { animation-delay: .24s; }
  .kopf > :nth-child(5) { animation-delay: .32s; }
  .uebersicht h2 { animation: auftauchen .7s cubic-bezier(.2,.7,.2,1) .35s both; }
  .uebersicht li { animation: auftauchen .7s cubic-bezier(.2,.7,.2,1) both; }
  .uebersicht li:nth-child(1) { animation-delay: .45s; }
  .uebersicht li:nth-child(2) { animation-delay: .55s; }
  .uebersicht li:nth-child(3) { animation-delay: .65s; }
  .kachel__badge { animation: schimmern 2.4s ease-in-out 1.4s 2; }
  @keyframes schimmern { 50% { box-shadow: 0 4px 16px #cb317f80; } }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Bereiche blenden beim Scrollen dezent ein (nur in Browsern, die das ohne Skript können) */
  @supports (animation-timeline: view()) {
    .einblenden { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}