/* Rosigama — Design-Sprache «Der Riechstreifen»
   Dokument: der Papierstreifen, auf dem man in der Parfümerie einen Duft probiert.
   Werkstoff: Glas, Licht, Papier. Schrift: Albert Sans überall, Italiana nur noch im Logo-Schriftzug (Simi, 30.10.: Italiana schwer lesbar). */

:root {
  --puder: #F1E7E6;      /* Grund, Rosé-Taupe aus den Bildern */
  --papier: #FFFCFA;     /* Riechstreifen */
  --hell: #FAF4F3;       /* ruhige Abschnitte */
  --tinte: #2A1A20;      /* Text */
  --grau: #65525A;       /* Nebentext, 6.0:1 auf Puder */
  --linie: #DDCBCC;
  --granat: #A3385E;     /* Rosenrot aus dem Logo, nur für Handlungen (6.4:1 mit Weiss) */
  --granat-tief: #842A4A;
  --gold: #B98A3E;       /* Gold aus dem Logo, nur Schmuck: Wortmarke, Linien */
  --name-rosa: #9C3358;  /* Name Rosigama auf hellem Grund (Kundenwunsch 14.10.), feste Farbe, damit der Dunkelmodus des Handys sie aufhellt */
  --name-rosa-hell: #F4C6D3; /* Name auf dunklem Grund */
  --gold-verlauf: linear-gradient(100deg, #8C6220 0%, #C99A4A 20%, #EBCB86 36%, #A8792E 54%, #D9B067 74%, #8C6220 100%);
  --aubergine: #2A1520;  /* dunkle Abschnitte, Fuss */
  --hell-auf-dunkel: #F6ECEE;
  --grau-auf-dunkel: #CDB8BF;
  --blumig: #D9899F; --holzig: #9A6B48; --frisch: #7FB3A2; --warm: #C7892F;
  --kopf-h: 72px;
  --rand: clamp(20px, 4vw, 56px);
  --bis: 1320px;
  --weich: cubic-bezier(.2, .75, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: only light; background: var(--aubergine); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--puder); color: var(--tinte); font: 400 17px/1.55 'Albert Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--granat); outline-offset: 3px; border-radius: 4px; }
.finden :focus-visible, .fuss :focus-visible { outline-color: var(--papier); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--papier); padding: 10px 14px; border-radius: 6px; }
.sprung:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--bis); margin: 0 auto; padding: 0 var(--rand); }
h1, h2, .titel { overflow-wrap: break-word; }

/* ---------- Vorschau-Hinweis ---------- */
.vorschau { margin: 0; padding: 8px 16px; font-size: 13px; line-height: 1.4; text-align: center; background: #E6D8D8; color: #4E3D44; position: relative; z-index: 30; }
.vorschau a { color: inherit; }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--granat); color: #fff; font: 600 16px/1 'Albert Sans', sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s var(--weich); }
.btn:hover { background: var(--granat-tief); }
.btn:active { transform: scale(.97); }
.btn--gross { min-height: 56px; padding: 0 32px; font-size: 17px; }
.btn--leise { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); }
.btn--leise:hover { background: rgba(42, 26, 32, .05); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 20; height: var(--kopf-h); margin-bottom: calc(-1 * var(--kopf-h)); transition: background .3s, box-shadow .3s, color .3s; color: var(--tinte); }
.kopf__in { height: 100%; max-width: var(--bis); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.marke { font-family: 'Italiana', serif; font-size: 26px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; transition: opacity .3s; }
.marke, .gold { color: var(--name-rosa); }
.marke { font-weight: 600; }
.marke--fuss, .ton-dunkel .kopf:not(.hat-grund):not(.ist-unten) .marke { color: var(--name-rosa-hell); }
.start .kopf:not(.ist-unten) .marke__text { opacity: 0; }
.marke__text { transition: opacity .3s; }
.marke__logo { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; box-shadow: 0 0 0 1px rgba(185, 138, 62, .55); flex: none; }
.kopf__nav { display: flex; gap: 32px; font-size: 15.5px; font-weight: 500; }
.kopf__nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size .25s; }
.kopf__nav a:hover { background-size: 100% 1px; }
.auswahl { justify-self: end; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; text-decoration: none; font-weight: 600; font-size: 15px; }
.auswahl__zahl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--granat); color: #fff; font-size: 12.5px; display: inline-grid; place-items: center; transition: transform .3s var(--weich); }
.auswahl__zahl.hupf { transform: scale(1.35); }
.kopf.hat-grund, .kopf.ist-unten { background: rgba(241, 231, 230, .94); box-shadow: 0 1px 0 var(--linie); color: var(--tinte); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ton-dunkel .kopf:not(.hat-grund):not(.ist-unten) { color: var(--hell-auf-dunkel); }
.ton-dunkel .kopf:not(.hat-grund):not(.ist-unten) .auswahl__zahl { background: var(--papier); color: var(--granat); }

/* ---------- Erster Screen: die Bühne ---------- */
.buehne { position: relative; height: calc(100svh - 34px); min-height: 640px; max-height: 1000px; overflow: hidden; overflow: clip; color: var(--tinte); isolation: isolate; transition: color .5s; }
.buehne[data-ton="dunkel"] { color: var(--hell-auf-dunkel); }
.buehne__bilder { position: absolute; inset: 0; z-index: -1; background: #E9D8D6; }
.buehne__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.buehne__bild.ist-an { opacity: 1; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.buehne__bilder::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(241, 231, 230, .9) 0%, rgba(241, 231, 230, .72) 30%, rgba(241, 231, 230, 0) 55%), linear-gradient(180deg, rgba(241, 231, 230, .55) 0%, rgba(241, 231, 230, 0) 30%); }
.buehne[data-ton="dunkel"] .buehne__bilder::after { background: linear-gradient(90deg, rgba(20,8,14,.55) 0%, rgba(20,8,14,.15) 55%, rgba(20,8,14,0) 100%); }

.buehne__inhalt { position: relative; height: 100%; max-width: var(--bis); margin: 0 auto; padding: calc(var(--kopf-h) + 8px) var(--rand) 0; }
.wortmarke { font-family: 'Italiana', serif; font-weight: 400; line-height: .9; margin: 0 -0.04em; }
.wortmarke__wort { display: block; font-size: min(16.1vw, 226px); letter-spacing: .07em; white-space: nowrap; color: var(--name-rosa); filter: drop-shadow(0 1px 1px rgba(255, 245, 240, .6)) drop-shadow(0 2px 10px rgba(90, 50, 20, .14)); }
.buehne__text { max-width: 470px; margin-top: clamp(20px, 3.4vh, 40px); }
.buehne__unter { font-size: 19px; line-height: 1.5; }
.buehne__knopf { margin-top: 26px; min-width: 200px; }
.buehne[data-ton="dunkel"] .buehne__knopf { background: var(--papier); color: var(--granat); }
.buehne[data-ton="dunkel"] .buehne__knopf:hover { background: #fff; }

.beispiel { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 9px; border-radius: 99px; background: rgba(255, 252, 250, .86); color: #4E3D44; font-size: 12px; line-height: 1.4; pointer-events: none; }
.buehne__beispiel { right: var(--rand); bottom: 16px; }

/* Der Fächer der Riechstreifen */
.faecher { position: absolute; left: max(var(--rand), calc((100vw - var(--bis)) / 2 + var(--rand))); bottom: 0; display: flex; gap: 14px; align-items: flex-end; }
.streifen { --dreh: 0deg; --hoch: 112px; position: relative; display: flex; flex-direction: column; align-items: center; width: 104px; height: 300px; padding-top: 18px; background: var(--papier); color: var(--tinte); text-decoration: none; border-radius: 3px 3px 0 0; box-shadow: 0 14px 34px rgba(60, 25, 38, .16), 0 1px 0 rgba(0,0,0,.04); transform: translateY(var(--hoch)) rotate(var(--dreh)); transform-origin: 50% 100%; transition: transform .35s var(--weich), box-shadow .35s; cursor: pointer; }
.streifen:nth-child(1) { --dreh: -5deg; } .streifen:nth-child(2) { --dreh: -1.8deg; } .streifen:nth-child(3) { --dreh: 1.8deg; } .streifen:nth-child(4) { --dreh: 5deg; }
.streifen:hover { --hoch: 86px; }
.streifen[aria-pressed="true"] { --hoch: 44px; box-shadow: 0 22px 44px rgba(60, 25, 38, .26); }
.streifen__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--linie); flex: none; transition: transform .3s var(--weich); }
.streifen[data-fam="blumig"] .streifen__punkt, [data-fam="blumig"] > .streifen__punkt { background: var(--blumig); }
.streifen[data-fam="holzig"] .streifen__punkt, [data-fam="holzig"] > .streifen__punkt { background: var(--holzig); }
.streifen[data-fam="frisch"] .streifen__punkt, [data-fam="frisch"] > .streifen__punkt { background: var(--frisch); }
.streifen[data-fam="warm"] .streifen__punkt, [data-fam="warm"] > .streifen__punkt { background: var(--warm); }
.streifen[aria-pressed="true"] .streifen__punkt { transform: scale(1.4); }
.streifen__name { margin-top: 16px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: .03em; }

@media (prefers-reduced-motion: no-preference) {
  .js-an .wortmarke__wort { animation: wort 1.1s var(--weich) both; }
  .js-an .buehne__text { animation: auf .7s .35s var(--weich) both; }
  .js-an .streifen { animation: streifen .8s var(--weich) both; }
  .js-an .streifen:nth-child(1) { animation-delay: .55s; } .js-an .streifen:nth-child(2) { animation-delay: .63s; }
  .js-an .streifen:nth-child(3) { animation-delay: .71s; } .js-an .streifen:nth-child(4) { animation-delay: .79s; }
  @keyframes wort { from { opacity: 0; letter-spacing: .16em; } to { opacity: 1; letter-spacing: .07em; } }
  @keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes streifen { from { transform: translateY(320px) rotate(var(--dreh)); } to { transform: translateY(var(--hoch)) rotate(var(--dreh)); } }
}

/* ---------- Abschnitte ---------- */
.sek { padding: clamp(80px, 11vw, 140px) 0; scroll-margin-top: var(--kopf-h); }
.titel { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -.01em; }
.titel--hell { color: var(--hell-auf-dunkel); }
.sek__unter { margin-top: 18px; font-size: 19px; color: var(--grau); max-width: 34em; }
.sek__unter--hell { color: var(--grau-auf-dunkel); }

/* Duftrichtungen: das Regal */
.regal { max-width: var(--bis); margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--rand); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.flakon { min-width: 0; display: flex; flex-direction: column; }
.flakon:nth-child(2) { margin-top: 56px; } .flakon:nth-child(3) { margin-top: 18px; } .flakon:nth-child(4) { margin-top: 74px; }
.flakon__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #E4D3D2; }
.flakon__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--weich); }
.flakon:hover .flakon__bild img { transform: scale(1.03); }
.flakon__name { margin-top: 18px; font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 40px; line-height: 1; display: flex; align-items: center; gap: 12px; }
.flakon__name::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--linie)); flex: none; transform: translateY(-2px); }
.flakon[data-fam="blumig"] { --c: var(--blumig); } .flakon[data-fam="holzig"] { --c: var(--holzig); } .flakon[data-fam="frisch"] { --c: var(--frisch); } .flakon[data-fam="warm"] { --c: var(--warm); }
.flakon__noten { margin-top: 8px; font-weight: 600; font-size: 15.5px; }
.flakon__text { margin-top: 6px; font-size: 16px; color: var(--grau); }
.wahl { align-self: flex-start; margin-top: 16px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinte); color: var(--tinte); font: 600 15px/1 'Albert Sans', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, box-shadow .2s; }
.wahl:hover { background: rgba(42, 26, 32, .06); }
.wahl__an { display: none; }
.wahl[aria-pressed="true"] { background: var(--granat); color: #fff; box-shadow: none; }
.wahl[aria-pressed="true"] .wahl__an { display: inline-flex; align-items: center; gap: 8px; }
.wahl[aria-pressed="true"] .wahl__an::before { content: ""; width: 12px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -2px); }
.wahl[aria-pressed="true"] .wahl__aus { display: none; }
.duefte__fuss { margin-top: clamp(48px, 6vw, 80px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.duefte__stand { color: var(--grau); font-size: 16px; max-width: 36em; }

/* Duft finden */
.finden { background: var(--aubergine) url(/bilder/makro-1600.webp) right center / cover no-repeat; position: relative; color: var(--hell-auf-dunkel); }
.finden::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 21, 32, .98) 0%, rgba(42, 21, 32, .93) 48%, rgba(42, 21, 32, .55) 100%); }
.finden__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.fragen { margin-top: 40px; display: grid; gap: 30px; }
.frage legend { font-size: 18px; font-weight: 600; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(246, 236, 238, .45); font-weight: 500; font-size: 16px; transition: background .2s, color .2s, box-shadow .2s; }
.chip:hover span { box-shadow: inset 0 0 0 1.5px var(--hell-auf-dunkel); }
.chip input:checked + span { background: var(--papier); color: var(--tinte); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--papier); outline-offset: 3px; }
.chips--hell .chip span { box-shadow: inset 0 0 0 1.5px var(--linie); background: var(--papier); }
.chips--hell .chip:hover span { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.chips--hell .chip input:checked + span { background: var(--granat); color: #fff; box-shadow: none; }
.chips--hell .chip input:focus-visible + span { outline-color: var(--granat); }

.ergebnis { display: grid; justify-items: center; }
.ergebnis__streifen { width: min(330px, 100%); min-height: 470px; padding: 30px 28px 32px; background: var(--papier); color: var(--tinte); border-radius: 3px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transform: rotate(-2.5deg); display: flex; flex-direction: column; align-items: flex-start; }
.ergebnis__streifen > .streifen__punkt { width: 14px; height: 14px; }
.ergebnis__leer { margin-top: auto; margin-bottom: auto; padding-top: 24px; font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 30px; line-height: 1.15; color: #6F5B63; }
.ergebnis__voll { margin-top: 22px; display: flex; flex-direction: column; flex: 1; }
.ergebnis__name { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 46px; line-height: 1.05; }
.ergebnis__noten { margin-top: 12px; font-weight: 600; }
.ergebnis__rat { margin-top: 10px; color: var(--grau); font-size: 16px; }
.ergebnis__knopf { margin-top: auto; align-self: stretch; }
.ergebnis__streifen.neu { animation: tauchen .5s var(--weich); }
@keyframes tauchen { from { transform: translateY(26px) rotate(-6deg); opacity: .4; } to { transform: rotate(-2.5deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ergebnis__streifen.neu { animation: none; } }

/* Geschenkideen */
.geschenke { background: var(--hell); }
.geschenke__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.geschenke__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.geschenke__bild img { width: 100%; height: 100%; object-fit: cover; }
.in-arbeit { display: inline-block; margin: 14px 0 6px; padding: 5px 14px; border-radius: 99px; border: 1px solid var(--name-rosa); color: var(--name-rosa); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.schenken { margin-top: 36px; display: grid; gap: 26px; justify-items: start; }
.schenken__gruppe legend { font-size: 18px; font-weight: 600; margin-bottom: 12px; padding: 0; }
.anhaenger { display: flex; flex-wrap: wrap; gap: 12px; }
.tag { position: relative; cursor: pointer; }
.tag input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tag span { position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; background: var(--papier); font-weight: 600; font-size: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linie); transition: background .2s, color .2s, box-shadow .2s; }
.tag:hover span { background: #fff; }
.tag input:checked + span { background: var(--granat); color: #fff; box-shadow: none; }
.tag input:focus-visible + span { outline: 2px solid var(--granat); outline-offset: 2px; }

/* Sortiment: Logo als Medaillon, vier Bögen */
.sortiment { background: var(--hell); }
.sortiment__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.medaillon { width: min(340px, 100%); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px rgba(185, 138, 62, .5), 0 0 0 10px var(--hell), 0 0 0 11px rgba(185, 138, 62, .35), 0 30px 60px rgba(120, 60, 70, .18); margin-bottom: clamp(32px, 4vw, 48px); }
.boegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(16px, 2vw, 28px); }
.bogen { display: flex; flex-direction: column; text-decoration: none; color: var(--tinte); }
.bogen:nth-child(even) { transform: translateY(44px); }
.bogen__bild { position: relative; display: block; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 8px; background: #E4D3D2; box-shadow: inset 0 0 0 1px rgba(185, 138, 62, .3); }
.bogen__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--weich); }
.bogen:hover .bogen__bild img { transform: scale(1.04); }
.bogen__name { margin-top: 16px; font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 36px; line-height: 1; display: flex; align-items: center; gap: 14px; }
.bogen__name::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(185, 138, 62, 0)); transform-origin: left; transition: transform .4s var(--weich); }
.bogen:hover .bogen__name::after { transform: scaleX(1.15); }
.bogen__text { margin-top: 6px; font-size: 15.5px; color: var(--grau); }
.bogen:focus-visible { outline-offset: 6px; }

/* Schluss */
.liebe__in { text-align: center; display: grid; justify-items: center; }
.liebe__text { max-width: 36em; margin-top: 8px; }
.liebe__text p { font-size: 19px; margin: 0 0 16px; }
@media (max-width: 760px) { .liebe__text p { font-size: 17px; } }
.flasche { background: var(--aubergine); padding: clamp(56px, 8vw, 104px) 0; }
.flasche__in { display: grid; justify-items: center; }
.flasche__karte { margin: 0; width: 100%; max-width: 860px; text-align: center; }
.flasche__karte img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; object-fit: cover; border-radius: 20px; }
.flasche__karte figcaption { display: grid; gap: 14px; margin-top: 30px; }
.flasche__name { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: clamp(38px, 5vw, 60px); letter-spacing: .04em; line-height: 1; color: var(--name-rosa-hell); }
.flasche__satz { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-style: normal; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--hell-auf-dunkel); }
.ueber { background: var(--papier); }
.ueber__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ueber__zitat { margin: 28px 0 0; }
.ueber__zitat p { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; color: var(--name-rosa); margin: 0; max-width: 14em; }
.ueber__text { border-left: 1px solid var(--gold); padding-left: clamp(20px, 3vw, 40px); max-width: 38em; }
.ueber__text p { font-size: 19px; margin: 0 0 18px; }
.ueber__gruss { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: 26px !important; color: var(--name-rosa); margin-top: 28px !important; }
@media (max-width: 760px) { .ueber__in { grid-template-columns: 1fr; } .ueber__zitat { margin-top: 16px; } .ueber__text p { font-size: 17px; } }
.schluss__in { text-align: center; display: grid; justify-items: center; }
.schluss .sek__unter { margin-left: auto; margin-right: auto; }
.schluss .btn { margin-top: 30px; }

/* Fuss */
.fuss { background: var(--aubergine); color: var(--hell-auf-dunkel); padding: 64px 0 28px; }
.fuss__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.marke--fuss { font-size: 30px; }
.marke--fuss .marke__logo { width: 64px; height: 64px; margin-right: 16px; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 4px 26px; max-width: 820px; }
.fuss__links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--grau-auf-dunkel); }
.fuss__links a:hover { color: var(--hell-auf-dunkel); text-decoration: underline; }
.fuss__basis { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(246, 236, 238, .14); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--grau-auf-dunkel); }
.fuss__basis a { display: inline-flex; min-height: 44px; align-items: center; }

/* Feste Leiste (nur Handy) */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 252, 250, .97); box-shadow: 0 -1px 0 var(--linie), 0 -10px 30px rgba(42, 26, 32, .08); transform: translateY(110%); transition: transform .35s var(--weich); }
.leiste.ist-da { transform: none; }
.leiste__stand { font-size: 15px; font-weight: 600; }
.leiste__knopf { min-width: 150px; }

/* Einblenden: erst das Skript versteckt (js-an); nach 1600 ms ist alles sichtbar */
.js-an .blende { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--weich); }
.js-an .blende.sichtbar, .alle-sichtbar .blende { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-an .blende { opacity: 1; transform: none; transition: none; } }

/* ---------- Handy ---------- */
@media (max-width: 960px) {
  .kopf__nav { display: none; }
  .kopf__in { grid-template-columns: 1fr auto; }
  .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flakon:nth-child(n) { margin-top: 0; }
  .flakon:nth-child(even) { margin-top: 40px; }
  .finden__raster, .geschenke__raster { grid-template-columns: 1fr; }
  .geschenke__bild { aspect-ratio: 16 / 11; }
  .sortiment__raster { grid-template-columns: 1fr; }
  .sortiment__kopf { text-align: center; display: grid; justify-items: center; }
  .sortiment__kopf .sek__unter { margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  :root { --kopf-h: 60px; }
  html { scroll-padding-bottom: 84px; }
  body { font-size: 16.5px; }
  .vorschau { font-size: 12.5px; padding: 7px 12px; }
  .marke { font-size: 21px; }
  .auswahl { min-height: 44px; font-size: 14.5px; }
  .buehne { height: calc(100svh - 52px); min-height: 600px; max-height: 900px; }
  .buehne__bild img { object-position: 50% 50%; }
  .buehne__bild[data-fam="start"] img { object-position: 50% 100%; }
  .buehne__bilder::after { background: none; }
  .buehne__inhalt { padding-top: calc(var(--kopf-h) + 14px); }
  .wortmarke { margin: 0 -0.02em; }
  .wortmarke__wort { font-size: 17.2vw; letter-spacing: .035em; filter: drop-shadow(0 1px 1px rgba(255, 245, 240, .6)); }
  @media (prefers-reduced-motion: no-preference) { @keyframes wort { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: .035em; } } }
  .buehne__text { margin-top: 10px; max-width: 340px; }
  .buehne__unter { font-size: 16.5px; }
  .buehne__knopf { margin-top: 16px; min-height: 52px; }
  .buehne__beispiel { bottom: 16px; right: 12px; }
  .faecher { left: 50%; transform: translateX(-50%); gap: 10px; }
  .streifen { width: 72px; height: 210px; --hoch: 78px; padding-top: 14px; }
  .streifen:hover { --hoch: 78px; }
  .streifen[aria-pressed="true"] { --hoch: 30px; }
  .streifen__name { font-size: 25px; margin-top: 12px; }
  @keyframes streifen { from { transform: translateY(230px) rotate(var(--dreh)); } to { transform: translateY(var(--hoch)) rotate(var(--dreh)); } }
  .sek__unter { font-size: 17px; }
  .regal { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; scroll-padding: 0 var(--rand); scrollbar-width: none; }
  .regal::-webkit-scrollbar { display: none; }
  .flakon, .flakon:nth-child(n) { flex: 0 0 78%; margin-top: 0; scroll-snap-align: start; }
  .flakon__name { font-size: 34px; }
  .duefte__fuss { gap: 14px; }
  .duefte__fuss .btn { width: 100%; }
  .ergebnis__streifen { min-height: 0; transform: none; width: 100%; }
  @keyframes tauchen { from { transform: translateY(20px); opacity: .4; } to { transform: none; opacity: 1; } }
  .ergebnis__leer { font-family: 'Albert Sans', sans-serif; font-size: 17px; line-height: 1.5; padding: 14px 0 4px; color: var(--grau); }
  .ergebnis__name { font-size: 38px; }
  .ergebnis__knopf { margin-top: 22px; }
  .schenken .btn, .schluss .btn { width: 100%; }
  .fuss__basis { flex-direction: column; }
  .marke__logo { width: 34px; height: 34px; margin-right: 10px; }
  .medaillon { width: 220px; }
  .boegen { gap: 22px 14px; }
  .bogen:nth-child(even) { transform: translateY(28px); }
  .bogen__name { font-size: 27px; margin-top: 12px; gap: 8px; }
  .bogen__text { font-size: 14.5px; }
  .sortiment { padding-bottom: 104px; }
}
@media (min-width: 761px) { .leiste { display: none !important; } }

/* ---------- Textseiten (Impressum, Datenschutz, Danke, 404) ---------- */
.textseite .kopf__in { grid-template-columns: 1fr auto auto; }
.kopf__aktion { min-height: 44px; padding: 0 20px; font-size: 15px; }
.text { padding: calc(var(--kopf-h) + 56px) var(--rand) 96px; min-height: 60vh; }
.text__in { max-width: 680px; margin: 0 auto; }
.text h1 { font-family: 'Albert Sans', sans-serif; font-weight: 500; font-size: clamp(40px, 6vw, 60px); line-height: 1.05; }
.text h2 { margin-top: 36px; font-size: 19px; font-weight: 600; }
.text p { margin-top: 12px; }
.text a:not(.btn) { color: var(--granat); text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; margin: -12px 0; }
.text__hinweis { margin-top: 20px !important; padding: 14px 16px; background: var(--papier); border-radius: 4px; font-size: 15.5px; }
.zurueck { margin-top: 32px !important; }

/* Niedrige Bildschirme (Laptop): Wortmarke nach der Höhe, Streifen schauen weniger weit herein */
@media (min-width: 761px) and (max-height: 800px) {
  .wortmarke__wort { font-size: min(16.1vw, 226px, 22vh); }
  .buehne { min-height: 560px; }
  .buehne__text { margin-top: 14px; }
  .buehne__unter { font-size: 18px; }
  .buehne__knopf { margin-top: 18px; }
  .streifen { --hoch: 156px; }
  .streifen:hover { --hoch: 130px; }
  .streifen[aria-pressed="true"] { --hoch: 100px; }
}
.ergebnis__name.lang { font-size: 46px; }
@media (max-width: 760px) { .ergebnis__name.lang { font-size: 42px; } }