/* YourPetness Shop – Konfigurator, Warenkorb, Kasse, Danke. Baut auf main.css (Tokens, Buttons, Mockups) auf. */

/* ---------- Seitenkopf, Brotkrumen, Stepper ---------- */
.seiten-kopf { padding-top: 40px; }
.seiten-kopf h1 { margin-bottom: .35em; }
.lead { color: var(--text-soft); font-size: 1.08rem; max-width: 60ch; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: .85rem; color: var(--text-soft); }
.brotkrumen li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.brotkrumen a:hover { color: var(--ink); text-decoration: underline; }

/* Schritt-Anzeige ohne Boxen: Nummer + Text, aktiver Schritt mit goldener Nummer und Unterstrich (David 01.11.2026) */
.stepper { display: flex; gap: 8px 28px; margin: 40px 0 48px; counter-reset: none; border-bottom: 1px solid var(--line); }
.stepper li {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: -1px; padding: 0 0 12px;
  border-bottom: 2px solid transparent; color: var(--text-soft); font-weight: 500; font-size: .95rem;
}
.stepper__nr { font: 600 1.6rem/1 var(--font-head); color: inherit; }
.stepper li.is-aktiv { color: var(--ink); border-bottom-color: var(--gold); }
.stepper li.is-aktiv .stepper__nr { color: var(--gold); }
.stepper li.is-fertig { color: var(--ink); }
.stepper li.is-fertig .stepper__nr { color: var(--gold-dark); }

/* ---------- Schritte ---------- */
.konfig { padding-bottom: var(--section); }
.schritt__titel { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .5em; }
.schritt__text { margin-bottom: 28px; }
.schritt__text { color: var(--text-soft); }
.schritt__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.schritt__aktionen { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Upload */
.upload {
  position: relative; display: grid; place-items: center; min-height: 340px; padding: 24px;
  border: 2px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface);
  text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.upload:hover, .upload.is-drag { border-color: var(--gold); background: var(--muted); }
.upload:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.upload__leer { display: grid; justify-items: center; gap: 8px; }
.upload__leer > .icon { width: 44px; height: 44px; color: var(--gold); stroke-width: 1.4; }
.upload__leer strong { font: 600 1.5rem/1.2 var(--font-head); }
.upload__leer span:not(.btn) { color: var(--text-soft); font-size: .9rem; }
.upload__leer small { color: var(--text-soft); margin-top: 6px; }
/* Upload-Knopf zappelt alle fünf Sekunden kurz (David 05.11.2026); nicht unter der Maus und nicht bei reduzierter Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .upload__leer .btn { animation: knopf-zappeln 5s ease-in-out 2s infinite; }
  .upload:hover .upload__leer .btn, .upload:focus-within .upload__leer .btn { animation: none; }
}
@keyframes knopf-zappeln {
  0%, 14%, 100% { transform: none; }
  2% { transform: rotate(-2deg); }
  4% { transform: rotate(2deg); }
  6% { transform: rotate(-1.6deg); }
  8% { transform: rotate(1.6deg); }
  10% { transform: rotate(-.8deg); }
  12% { transform: rotate(.8deg); }
}
.upload__voll { display: grid; justify-items: center; gap: 12px; }
.upload__voll img { max-height: 320px; width: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.upload__wechseln { font-weight: 600; text-decoration: underline; font-size: .9rem; }
.upload__bild { position: relative; display: block; }
.upload__entfernen { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px;
  border: 0; border-radius: 99px; background: rgb(18 18 18 / .78); color: #fffef4; font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(4px); }
.upload__entfernen:hover { background: rgb(18 18 18 / .92); }
.upload__entfernen .icon { width: 13px; height: 13px; }
.upload__fehler { margin: 10px 0 0; color: var(--wine); font-weight: 500; }
/* Ergebnis der Fotoprüfung (Server): läuft · passt · Hinweise (Kunde darf trotzdem weiter) */
.upload.is-pruefend .upload__voll img { opacity: .55; }
.upload__pruefung { display: grid; gap: 4px; margin: 10px 0 0; font-size: .95rem; }
.upload__pruefung p { margin: 0; }
.upload__pruefung.is-laeuft { display: flex; align-items: center; gap: 10px; color: var(--text-soft); }
.upload__pruefung.is-laeuft::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold); animation: dreh .8s linear infinite;
}
.upload__pruefung.is-gut { display: flex; align-items: center; gap: 8px; color: var(--gold-dark); font-weight: 500; }
.upload__pruefung.is-gut .icon { color: var(--gold); }
.upload__pruefung.is-hinweis { padding: 12px 16px; border-radius: var(--radius); background: var(--muted); border-left: 3px solid var(--gold); }
.upload__pruefung.is-hinweis small { color: var(--text-soft); }
.paar-hinweis.is-warnung { border-left-color: var(--wine); }
.paar-hinweis.is-warnung .icon { color: var(--wine); }

.beispielfotos { margin-top: 20px; }
.beispielfotos p { margin-bottom: 10px; font-size: .92rem; color: var(--text-soft); }
.beispielfotos__liste { display: flex; flex-wrap: wrap; gap: 12px; }
.beispielfoto {
  display: grid; justify-items: center; gap: 6px; width: 96px; padding: 0; border: 0; background: none;
  font-size: .8rem; font-weight: 500;
}
.beispielfoto img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 2px solid transparent; transition: border-color .2s, transform .2s var(--ease); }
.beispielfoto:hover img { transform: translateY(-2px); }
.beispielfoto.is-active img { border-color: var(--gold); }

/* Formularfelder */
.feld { display: grid; gap: 6px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.feld > label, .feld legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--text-soft); }
.feld__hilfe { color: var(--text-soft); font-size: .8rem; }
.eingabe {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font: inherit; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.eingabe:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(176 138 62 / .2); }
select.eingabe { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.ist-geprueft .eingabe:invalid { border-color: var(--wine); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.check a { text-decoration: underline; }
.ist-geprueft .check input:invalid + span { color: var(--wine); }

.radio-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.radio-karte { position: relative; }
.radio-karte input { position: absolute; opacity: 0; }
.radio-karte span {
  display: grid; place-items: center; min-height: 48px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); font-weight: 500; font-size: .92rem; cursor: pointer; text-align: center;
  transition: border-color .2s, background-color .2s;
}
.radio-karte input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.radio-karte input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.tipps { padding: 18px 20px; border-radius: var(--radius); background: var(--muted); }
.tipps__titel { font-weight: 600; margin-bottom: 8px; }
.tipps li { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: .9rem; color: var(--text-soft); }
.tipps .icon { color: var(--gold-dark); width: 18px; height: 18px; stroke-width: 2.4; }

/* ---------- Motivwahl ---------- */
.filter { margin-bottom: 32px; }
@media (max-width: 767px) {
  /* Kategorien in einer Zeile zum Wischen (David 01.11.2026), über die Seitenränder hinaus */
  .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .filter::-webkit-scrollbar { display: none; }
  .filter .chip { flex: none; white-space: nowrap; }
}
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.filter__leer { padding: 12px 16px; border-radius: var(--radius); background: var(--muted); color: var(--text-soft); }
.motiv-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.motiv-raster li.ist-echt { order: -1; }
.motiv-karte { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); cursor: pointer; box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s, transform .3s var(--ease); }
.motiv-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
a.motiv-karte--abschluss { color: inherit; text-decoration: none; }
.motiv-karte__bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.motiv-karte__bild > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Zuerst das fertige Gemälde mit Tier; das Original blendet beim Darüberfahren ein, unten rechts als kleiner Kreis
   angedeutet (David 05.11.2026). Echtes Ergebnis für das Beispielfoto (ist-echt): das Ergebnis bleibt vorne */
.motiv-karte__original { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.motiv-karte:has(input:focus-visible) .motiv-karte__original { opacity: 1; }
.motiv-karte__mit-original {
  position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
  border-radius: 30px; background: rgb(27 23 20 / .72); color: #fff; font-size: .72rem; font-weight: 600; transition: opacity .25s;
}
.motiv-karte__mit-original img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--gold-light, #e7c56f); }
.motiv-karte:has(input:focus-visible) .motiv-karte__mit-original { opacity: 0; }
.motiv-karte__text { display: grid; gap: 2px; padding: 12px 14px 14px; }
.motiv-karte__text strong { font: 600 1.15rem/1.25 var(--font-head); }
.motiv-karte__text > span:last-child { font-size: .8rem; color: var(--text-soft); }
/* Titel mit dem Tiernamen („Rocky überquert die Alpen“); Hover: Originaltitel im selben Rasterfeld, kein Springen */
.motiv-karte__titel { display: grid; }
.motiv-karte__titel > strong { grid-area: 1 / 1; transition: opacity .35s var(--ease); }
.motiv-karte__titel-wechsel { opacity: 0; color: var(--gold-dark); }
.motiv-karte:has(input:focus-visible) .motiv-karte__titel:has(.motiv-karte__titel-wechsel) > strong:first-child { opacity: 0; }
.motiv-karte:has(input:focus-visible) .motiv-karte__titel-wechsel { opacity: 1; }
/* Nur mit echter Maus: auf dem Handy bliebe das Hover nach dem Tippen hängen und zeigte das Original statt des Gemäldes */
@media (hover: hover) {
  .motiv-karte:hover .motiv-karte__original { opacity: 1; }
  .motiv-karte:hover .motiv-karte__mit-original { opacity: 0; }
  .motiv-karte:hover .motiv-karte__titel:has(.motiv-karte__titel-wechsel) > strong:first-child { opacity: 0; }
  .motiv-karte:hover .motiv-karte__titel-wechsel { opacity: 1; }
}
.motiv-raster .ist-echt .motiv-karte .motiv-karte__original, .motiv-raster .ist-echt .motiv-karte .motiv-karte__mit-original { opacity: 0; }
.motiv-raster .ist-echt .motiv-karte .motiv-karte__titel > strong:first-child { opacity: 1; }
.motiv-raster .ist-echt .motiv-karte .motiv-karte__titel > .motiv-karte__titel-wechsel { opacity: 0; }
.motiv-karte__echt {
  position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 20px;
  background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700;
}
.motiv-karte__haken {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--ease);
}
.motiv-karte__haken .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.motiv-karte:has(input:checked) { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.motiv-karte:has(input:checked) .motiv-karte__haken { opacity: 1; transform: none; }
.motiv-karte:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Vorschau ---------- */
.vorschau { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.vorschau__buehne { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 16px); }
.mock--gross { aspect-ratio: auto; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg); }
.mock--gross .mock__bild { height: auto; width: min(100%, 420px); }
/* Während des Malens bleibt die Bühne dunkel wie die Seite (die Wand der Vorschau ist hell) */
.mock.is-wartend { background: linear-gradient(#232120, #1a1918); }
.mock.is-wartend .mock__bild { opacity: 0; }
/* Hinter „Bereit für Euer Gemälde?“ und dem Malen: die gewählte Vorlage (--vorlage aus konfigurator.js) nur unscharf
   und abgedunkelt als Fläche (David 01.11.: kein scharfes Bild davor) */
.mock.is-wartend { position: relative; overflow: hidden; isolation: isolate; }
.mock.is-wartend::before { content: ""; position: absolute; z-index: -1; background: var(--vorlage, none) center / cover no-repeat; }
.mock.is-wartend::before { inset: -24px; filter: blur(18px) brightness(.28); }
.mock__bild { transition: opacity .6s, filter .6s; }

/* Wasserzeichen nur in der Vorschau */
.ist-vorschau::after {
  content: attr(data-wasserzeichen); position: absolute; inset: 0; display: grid; place-items: center;
  color: rgb(255 255 255 / .28); font: 700 clamp(1.4rem, 4vw, 2.4rem)/1 var(--font-body); letter-spacing: .3em;
  transform: rotate(-30deg); pointer-events: none;
}
.inschrift {
  position: absolute; right: 7%; bottom: 3.5%; pointer-events: none;
  font: 400 clamp(.6rem, 1.5vw, .95rem)/1.3 var(--font-inschrift); color: var(--inschrift-farbe, #b8955a); /* Faktor 0,5 (David 01.11.) */
  -webkit-text-stroke: .03em var(--inschrift-farbe, #b8955a);
  filter: url(#oelpinsel); opacity: .9; transform: rotate(-4deg); transform-origin: right bottom;
}
.maler {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px;
  text-align: center; padding: 24px;
  isolation: isolate; transform: translateZ(0); /* eigene Ebene: Safari zeichnet Textwechsel sonst nicht sauber neu */
  text-shadow: 0 1px 14px rgb(0 0 0 / .75); /* lesbar über der Vorlage im Hintergrund */
}
.maler__krone--ruhig { animation: none; }
.maler__krone { width: auto; height: 72px; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .35)); animation: logo-atmen 1.8s ease-in-out infinite alternate; }
@keyframes logo-atmen { from { transform: rotate(-4deg) scale(.96); } to { transform: rotate(4deg) scale(1.04); } }
.maler__text { margin: 0; max-width: 34ch; font: italic 600 1.4rem/1.25 var(--font-head); min-height: 1.25em; transition: opacity .35s; }
.maler__text.is-zitat { font-size: 1.15rem; line-height: 1.4; }
.maler__text.is-weg, .maler__wer.is-weg { opacity: 0; }
.maler__text, .maler__wer { will-change: opacity; }
.maler__wer { margin: -6px 0 0; max-width: 34ch; font-size: .8rem; letter-spacing: .04em; color: var(--gold); transition: opacity .35s; }
.maler__balken { width: min(260px, 70vw); height: 4px; border-radius: 2px; background: rgb(255 254 244 / .15); overflow: hidden; }
.maler__balken span { display: block; height: 100%; width: 0; background: var(--gold); }
.maler__dauer { margin: 0; max-width: 300px; font-size: .9rem; color: var(--text-soft); }
.maler__meldung { margin: 0; max-width: 320px; font: 500 1.05rem/1.45 var(--font-body); }
.vorschau__speichern-hinweis { margin: 4px 8px 10px; font-size: .8rem; line-height: 1.5; color: var(--text-soft); text-align: center; }
[data-speichern].is-gespeichert { opacity: 1; border-color: var(--gold); color: var(--gold-dark); }
[data-speichern].is-gespeichert .icon { fill: currentColor; }
/* Abgelehntes Porträt: persönliche Anfrage ans Team */
.anfrage { display: grid; justify-items: center; gap: 10px; width: min(100%, 420px); padding: 16px 18px; border-radius: var(--radius); background: rgb(18 16 14 / .88); box-shadow: var(--shadow); text-shadow: none; }
.anfrage p { margin: 0; }
.anfrage__text { font-size: .9rem; line-height: 1.45; }
.anfrage__form { display: grid; justify-items: center; gap: 10px; width: 100%; text-align: left; }
.anfrage__form .feld { width: 100%; margin: 0; }
.anfrage__hinweis { font-size: .78rem; line-height: 1.45; color: var(--text-soft); }
.anfrage__hinweis a { color: inherit; text-decoration: underline; }
.anfrage__fehler { font-size: .85rem; color: #f3b1b9; }
.anfrage__danke { display: grid; justify-items: center; gap: 8px; font-size: .9rem; }
/* Mehr Inhalt als Bild (Handy, Querformat): der Kasten bestimmt die Höhe, das unscharfe Motiv füllt dahinter */
.vorschau__buehne:has(> [data-vorschau-meldung]:not([hidden]) .anfrage:not([hidden])) > [data-vorschau-meldung] { position: relative; inset: auto; }
.vorschau__buehne:has(> [data-vorschau-meldung]:not([hidden]) .anfrage:not([hidden])) > .ansichten { position: absolute; inset: 0; overflow: hidden; }
.vorschau__buehne:has(> [data-vorschau-meldung]:not([hidden]) .anfrage:not([hidden])) > .ansichten > .mock { height: 100%; }
.konto__anfrage-status { font-size: .8rem; font-weight: 600; color: var(--gold-dark); }
/* Kontingent erreicht: frühere Vorschauen zur Auswahl */
.meine-vorschauen { display: grid; gap: 10px; width: min(100%, 420px); }
.meine-vorschauen__titel { margin: 0; font-weight: 600; font-size: .95rem; }
.meine-vorschauen__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 280px; overflow: auto; padding: 4px; }
.meine-vorschauen__bild { display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; }
.meine-vorschauen__bild:hover, .meine-vorschauen__bild:focus-visible { transform: translateY(-2px); outline: 2px solid var(--gold); }
.meine-vorschauen__bild img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@keyframes pinsel { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

.vorschau__hinweis { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; font-size: .88rem; color: var(--gold-dark); font-weight: 500; text-align: center; }
.vorschau__hinweis .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.vorschau__hinweis--dummy { color: var(--text-soft); font-weight: 400; }
.vorschau__motiv { color: var(--text-soft); margin-top: -.2em; }
.vorschau__motiv strong { color: var(--ink); }
.vorschau__foto { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 10px; border-radius: var(--radius); background: var(--muted); font-size: .9rem; }
.vorschau__foto img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.vorschau__foto > span { flex: 1; }
.vorschau__gemaelde { margin: -6px 0 10px; }
.vorschau__gemaelde img { width: 56px; height: 70px; object-fit: contain; border-radius: 2px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .25)); }
.vorschau__gemaelde > span { display: grid; line-height: 1.35; }
.vorschau__gemaelde small { color: var(--text-soft); font-size: .78rem; }
.vorschau__summe { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 16px; }
.vorschau__summe .price { padding: 0; margin: 0; font-size: 1.8rem; }
.vorschau__summe .price-note { margin: 0; }
.vorschau__seite .btn--block + .btn--block { margin-top: 10px; }

.format-liste, .wahl-liste { display: grid; gap: 8px; }
.format-karte, .wahl {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.format-karte input, .wahl input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; margin: 0; }
.format-karte:has(input:checked), .wahl:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.format-karte__text, .wahl__text { display: grid; flex: 1; }
.format-karte__text small, .wahl__text small { color: var(--text-soft); font-size: .8rem; }
.format-karte__preis, .wahl__preis { font-weight: 600; font-size: .9rem; white-space: nowrap; }

.link { padding: 0; border: 0; background: none; font-weight: 600; text-decoration: underline; font-size: .9rem; }
.link--leise { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); text-decoration: none; font-weight: 500; }
.link--leise:hover { color: var(--wine); }
.link--leise .icon { width: 16px; height: 16px; }
.mini-usps { display: grid; gap: 6px; margin-top: 20px; font-size: .85rem; color: var(--text-soft); }
.mini-usps li { display: flex; align-items: center; gap: 8px; }
.mini-usps .icon { width: 16px; height: 16px; color: var(--gold-dark); stroke-width: 2.4; }

/* ---------- Warenkorb ---------- */
.warenkorb { padding-block: 8px var(--section); }
.warenkorb__grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.leer { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.leer > .icon { width: 48px; height: 48px; color: var(--gold); stroke-width: 1.4; }
.leer p { color: var(--text-soft); }

.positionen { display: grid; gap: 16px; }
.position { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); }
.mock--klein { padding: 12px; border-radius: var(--radius); }
.mock--klein.mock--digital .mock__bild { border-radius: 0; box-shadow: var(--shadow); }
.mock--klein.mock--canvas .mock__bild { box-shadow: 3px 4px 0 -1px #3b2f25, var(--shadow); }
.position__info h3 { font-size: 1.3rem; margin-bottom: .15em; }
.position__motiv { margin: 0 0 6px; color: var(--text-soft); font-size: .88rem; }
.position__details { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .88rem; }
.datei-seite { display: grid; justify-items: center; gap: 16px; max-width: 560px; text-align: center; }
.datei-seite h1 { margin: 0; font: 400 clamp(1.9rem, 1.4rem + 2vw, 2.8rem)/1.2 var(--font-head); }
.datei-seite__bild { width: min(100%, 420px); height: auto; border-radius: 4px; box-shadow: var(--shadow); }
.datei-seite__titel { margin: 0; color: var(--text-soft); }
.datei-seite__titel strong { color: var(--text); font: 400 1.25rem/1.3 var(--font-head); }
.datei-seite__hinweis { margin: 0; font-size: .9rem; color: var(--text-soft); }
.datei-seite__hinweis a { text-decoration: underline; }
.datei-seite .speichern-hinweis { margin: -4px 0 0; }
.speichern-hinweis { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; color: var(--text-soft); }
/* Warenkorb: fertiges Porträt groß ansehen */
.ist-vergroesserbar { cursor: zoom-in; }
.ist-vergroesserbar:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.bild-gross { max-width: min(92vw, 900px); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.bild-gross[open] { display: grid; justify-items: center; }
.bild-gross::backdrop { background: rgb(14 12 10 / .86); }
.bild-gross img { display: block; max-width: 100%; max-height: calc(92vh - 44px); width: auto; height: auto; opacity: 1 !important; border-radius: 4px; box-shadow: 0 16px 48px rgb(0 0 0 / .6); }
.bild-gross__titel { margin: 10px 0 0; text-align: center; color: #fffef4; font: 400 1.1rem/1.25 var(--font-head); }
.bild-gross__zu { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(14 12 10 / .72); color: #fffef4; cursor: pointer; }
.position__foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.position__aktionen { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.position__warnung { margin: -4px 0 12px; color: var(--wine); font-size: .85rem; }
.position__warnung a { font-weight: 600; text-decoration: underline; }
.warenkorb__gesperrt { margin: 10px 0 0; color: var(--wine); font-size: .85rem; text-align: center; }
.btn.is-gesperrt { opacity: .45; cursor: not-allowed; }
.position__preis { margin: 0; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.menge { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.menge button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; }
.menge button:disabled { opacity: .3; cursor: default; }
.menge .icon { width: 16px; height: 16px; }
.menge output { min-width: 28px; text-align: center; font-weight: 600; }

.summe-box { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); }
.warenkorb .summe-box, .kasse__uebersicht { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 16px); }
.summe-box h2 { font-size: 1.6rem; }
.summen { display: grid; gap: 10px; margin: 0 0 20px; }
.summen div { display: flex; justify-content: space-between; gap: 16px; }
.summen dt { color: var(--text-soft); }
.summen dd { margin: 0; font-weight: 600; }
.summen__rabatt dd { color: var(--gold-dark); }
.summen__gesamt { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.15rem; }
.summen__gesamt dt { color: var(--ink); font-weight: 700; }
.summen__gesamt dt small { display: block; font-weight: 400; font-size: .75rem; color: var(--text-soft); }
.summen__gesamt dd { font-weight: 700; }
.gutschein { margin-bottom: 20px; }
.gutschein label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .88rem; }
.gutschein__row { display: flex; gap: 8px; }
.gutschein__msg { min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; color: var(--gold-dark); }
.gutschein__msg.is-fehler { color: var(--wine); }
.weiter-link { display: block; margin-top: 14px; text-align: center; font-size: .9rem; font-weight: 500; text-decoration: underline; }

/* ---------- Kasse ---------- */
:root:has(.kasse-kopf) { --topbar-h: 0px; }  /* Kasse und Danke-Seite haben keine Infozeile */
.kasse-kopf { border-bottom: 1px solid var(--line); background: var(--surface); }
.kasse-kopf__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.kasse-schritte { display: flex; gap: 8px; font-size: .88rem; color: var(--text-soft); }
.kasse-schritte li { display: flex; align-items: center; gap: 8px; }
.kasse-schritte li + li::before { content: ""; width: 24px; height: 1px; background: var(--line); }
.kasse-schritte .is-aktiv { color: var(--ink); font-weight: 600; }
.kasse-schritte .is-fertig a { text-decoration: underline; color: var(--ink); }
.kasse-schritte .is-fertig span { color: var(--ink); }
.kasse-schritte .is-fertig::after { content: "✓"; color: var(--gold-dark); font-weight: 700; }
.kasse-kopf__rechts { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.kasse-kopf__sicher { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; color: var(--text-soft); }
.kasse-kopf__sicher .icon { width: 16px; height: 16px; color: var(--gold-dark); }

.kasse { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; padding-block: 40px var(--section); }
.kasse__block { margin: 0 0 20px; padding: 24px; border: 0; border-radius: var(--radius-lg); background: var(--surface); }
.kasse__block legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 600 1.45rem/1.2 var(--font-head); }
.kasse__block legend + * { clear: both; }
.kasse__nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-dark); font: 700 .85rem/1 var(--font-body); }
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.feld--breit { grid-column: 1 / -1; }
.kasse__abschluss { display: grid; gap: 14px; }
.kasse__widerruf { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--muted); font-size: .85rem; color: var(--text-soft); }
.kasse__fehler { margin: 0; color: var(--wine); font-weight: 500; }
.kasse__dummy { margin: 0; text-align: center; font-size: .8rem; color: var(--text-soft); }
.kasse__dummy:empty { display: none; }
.kasse__zahlung { margin: 0 0 12px; color: var(--text-soft); font-size: .92rem; }
.zahlarten { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zahlarten li { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .85rem; font-weight: 600; }
.kasse__meldung { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--wine); border-radius: var(--radius); color: var(--wine); font-weight: 500; background: var(--surface); }
.kasse__konto { margin: 8px 0 0; font-size: .85rem; color: var(--text-soft); }
.kasse__wahl { margin-bottom: 28px; padding: 22px 24px; border: 1px solid var(--gold); border-radius: var(--radius); }
.kasse__wahl-titel { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.35rem; }
.kasse__wahl-text { margin: 0 0 16px; color: var(--text-soft); }
.kasse__wahl-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.kasse__konto a { font-weight: 600; color: var(--ink); text-decoration: underline; }
.kasse__abweichend { margin-top: 18px; }
.kasse__lieferung { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, rgb(27 23 20 / .1)); }
.kasse__untertitel { margin: 0 0 14px; font: 600 1.1rem/1.2 var(--font-head); }
.btn--gross { min-height: 56px; font-size: 1.05rem; }
.btn.is-laedt { position: relative; color: transparent; }
.btn.is-laedt::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.mini-positionen { display: grid; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mini-position { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.mini-position__bild { position: relative; }
.mini-position__bild img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.mini-position__menge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--ink); color: var(--on-dark); font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
}
.mini-position__text { display: grid; font-size: .9rem; }
.mini-position__text small { color: var(--text-soft); }
.mini-position__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.mini-position__link { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 500; color: var(--gold-light, var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
.mini-position__link:hover { color: var(--ink); }
.mini-position__link .icon { width: 15px; height: 15px; flex: none; }
.mini-position__preis { font-weight: 600; font-size: .9rem; }
.kasse-fuss { padding: 24px 0 40px; text-align: center; font-size: .82rem; color: var(--text-soft); }
.kasse-fuss a:hover { text-decoration: underline; }

/* ---------- Danke ---------- */
.danke { padding-block: 48px var(--section); }
.danke__kopf { display: grid; justify-items: center; text-align: center; margin-bottom: 32px; }
.danke__haken { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: var(--gold); color: #fff; }
.danke__haken .icon { width: 36px; height: 36px; stroke-width: 2.4; }
.danke__kopf p { color: var(--text-soft); margin-bottom: .4em; }
.danke__nr strong { color: var(--ink); letter-spacing: .04em; }
.ablauf { display: grid; gap: 12px; margin-bottom: 32px; }
.ablauf li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); }
.ablauf .icon { width: 28px; height: 28px; color: var(--gold-dark); stroke-width: 1.5; flex: none; }
.ablauf strong { display: block; }
.ablauf span { color: var(--text-soft); font-size: .9rem; }
.danke__weiter { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Freunde werben ---------- */
.aktion-badge { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 20px; background: var(--wine); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.empfehlen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; padding-bottom: var(--section); }
.empfehlen__schritte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
/* Links ein durchgehender goldener Streifen mit der Nummer (David 04.11.2026) */
.empfehlen__schritte li { display: flex; align-items: stretch; background: var(--surface); }
.empfehlen__schritte .stepper__nr { flex: 0 0 50px; display: grid; place-items: center; background: var(--gold); color: #fff; font-size: 1.6rem; }
.empfehlen__schritte li > div { flex: 1; min-width: 0; padding: 20px; }
.empfehlen__schritte strong { display: block; margin-bottom: 2px; }
.empfehlen__schritte span:not(.stepper__nr) { color: var(--text-soft); font-size: .92rem; }
.empfehlen__code h2, .empfehlen__bedingungen h2 { font-size: 1.6rem; }
.empfehlen__codewert { margin: 4px 0 6px; font: 700 1.9rem/1.1 var(--font-body); letter-spacing: .08em; color: var(--gold-dark); }
.empfehlen__link { margin-bottom: 16px; font-size: .85rem; color: var(--text-soft); word-break: break-all; }
.empfehlen__teilen { margin-bottom: 12px; }
.empfehlen__bedingungen { padding: 24px; }
.empfehlen__bedingungen .mini-usps { margin: 0 0 16px; font-size: .92rem; }
.empfehlen__bedingungen a { color: var(--gold-dark); }
.danke__empfehlen { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.danke__empfehlen > .icon { width: 40px; height: 40px; color: var(--gold-light); stroke-width: 1.5; flex: none; }
.danke__empfehlen h2 { font-size: 1.35rem; margin-bottom: .2em; }
.danke__empfehlen p { margin: 0; color: var(--text-soft); font-size: .92rem; }
.danke__empfehlen .btn { margin-left: auto; }
.danke__konto .btn { flex: none; }

/* ---------- Galerie-Freigabe (Danke) ---------- */
.danke__galerie { margin-top: 20px; }
.danke__galerie h2 { font-size: 1.45rem; margin-bottom: .2em; }
.danke__galerie-text { color: var(--text-soft); }
.danke__galerie form { display: grid; gap: 12px; }
.danke__galerie .feld { margin: 4px 0 0; }
.danke__galerie .check span { font-size: .88rem; }
.danke__galerie .btn { justify-self: start; }
.danke__galerie-ok { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--gold-dark); font-weight: 500; }
.danke__galerie-ok .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.danke__galerie-ok a { text-decoration: underline; }

/* ---------- Galerie ---------- */
.galerie { padding-bottom: var(--section); }
.galerie__filter { margin-top: 20px; }
.galerie__badge { position: absolute; top: 20px; left: 20px; z-index: 1; padding: 4px 10px; border-radius: 20px; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700; }
.galerie__bild--eigen figure { box-shadow: 0 0 0 2px var(--gold); }
.galerie__teilen { margin: 10px 4px 2px; }
.galerie__teilen summary { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--gold-dark); cursor: pointer; list-style: none; }
.galerie__teilen summary::-webkit-details-marker { display: none; }
.galerie__teilen summary::before { content: "↗"; }
.galerie__teilen[open] summary { margin-bottom: 10px; }
.galerie__teilen .teilen__knopf { min-height: 32px; padding: 0 11px; font-size: .76rem; }
.danke__teilen { margin-top: 20px; }
.danke__teilen h2 { font-size: 1.45rem; margin-bottom: .2em; }
.danke__teilen p { color: var(--text-soft); }
.galerie__cta { display: grid; justify-items: center; gap: 8px; margin-top: 32px; text-align: center; }

/* ---------- Rechtstexte ---------- */
.rechtstext { padding-bottom: var(--section); }
.rechtstext__entwurf { padding: 12px 16px; border-radius: var(--radius); background: #f6e7c8; color: var(--gold-dark); font-weight: 600; font-size: .9rem; }
.rechtstext__sprache { padding: 12px 16px; border-radius: var(--radius); background: var(--muted); font-size: .9rem; }
.rechtstext__text { line-height: 1.65; }
.rechtstext__text h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.rechtstext__text h3 { font-size: 1.15rem; margin: 1.3em 0 .4em; }
.rechtstext__text p, .rechtstext__text ul, .rechtstext__text ol { margin: 0 0 .9em; }
.rechtstext__text ul, .rechtstext__text ol { display: grid; gap: 8px; padding-left: 1.4em; }
.rechtstext__text ul { list-style: disc; }
.rechtstext__text ol { list-style: decimal; }
.rechtstext__text a { text-decoration: underline; }
.rechtstext [id] { scroll-margin-top: 120px; }  /* Anker (#cookies, #widerrufen …) nicht unter dem festen Kopf */
.rechtstext__offen { padding: 0 3px; border-radius: 3px; background: #fbe3a0; color: #1b1714; }  /* offene Angabe, auch auf dunklem Grund lesbar */
.rechtstext__formular { max-width: 480px; margin-top: 8px; }
.rechtstext__danke { margin: 16px 0 0; font-weight: 600; color: var(--gold-light, var(--gold)); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .schritt__grid, .vorschau, .warenkorb__grid, .kasse { grid-template-columns: 1fr; gap: 28px; }
  .warenkorb .summe-box, .kasse__uebersicht { position: static; }
  .vorschau__buehne { position: relative; top: auto; }  /* nicht mehr klebend, aber Bezug für das Mal-Overlay */
  .kasse__uebersicht { order: -1; }
  .kasse-schritte { display: none; }
  .empfehlen, .empfehlen__schritte { grid-template-columns: 1fr; }
  .danke__empfehlen { flex-wrap: wrap; }
  .danke__empfehlen .btn { margin-left: 0; }
}

@media (max-width: 767px) {
  .stepper { gap: 6px 18px; margin: 20px 0 24px; }
  .stepper li { gap: 6px; padding-bottom: 10px; font-size: .8rem; }
  .stepper__nr { font-size: 1.3rem; }
  .upload { min-height: 260px; }
  .beispielfotos__liste { gap: 10px; }
  .beispielfoto { width: calc((100% - 30px) / 4); }
  .beispielfoto img { width: 100%; }
  .motiv-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .motiv-karte__text { padding: 10px 10px 12px; }
  .motiv-karte__text strong { font-size: 1rem; }
  .schritt__aktionen { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter); background: rgb(18 18 18 / .96); border-top-color: rgb(255 254 244 / .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .schritt__aktionen .btn { flex: 1; padding: 0 12px; }
  .schritt__aktionen > span:empty { display: none; }
  .position { grid-template-columns: 88px 1fr; gap: 14px; }
  .position__preis { grid-column: 2; }
  .feld-raster { grid-template-columns: 1fr; }
  .kasse__block { padding: 18px; }
  .kasse-kopf__sicher span, .kasse-kopf__sicher { font-size: .78rem; }
}

/* ---------- Doppelporträt (Querformat-Motive) ---------- */
.paar-hinweis { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius); background: var(--muted); border-left: 3px solid var(--gold); }
.tier-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 18px; }
.paar-hinweis .icon { flex: none; margin-top: 2px; color: var(--gold); }
.upload__paar { margin: 10px 0 0; }
.tausch { margin: 4px 0 18px; }
.tausch span { display: grid; gap: 2px; }
.tausch small { color: var(--text-soft); }
.motiv-karte__bild > img[data-quer], .mini-position__bild img[data-quer] { object-position: 45% 30%; }
.motiv-karte__mit-original img[data-quer] { object-position: 45% 30%; }
.mock--gross .mock__bild:has(img[data-quer]) { width: min(100%, 560px); }

/* ---------- Mein Konto ---------- */
.konto { display: grid; gap: 20px; padding-block: 8px var(--section); }
.konto__anmelden { max-width: 560px; }
.konto__anmelden form { display: grid; justify-items: start; }
.konto__anmelden .feld { width: 100%; margin-bottom: 16px; }
.konto__text { color: var(--text-soft); font-size: .95rem; }
.konto__code { max-width: 11em; font-size: 1.4rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.konto__neu { margin-top: 14px; }
.konto__meldung { margin: 14px 0 0; color: var(--wine); font-weight: 500; }
.konto__anmelden .kasse__dummy { margin-top: 14px; text-align: left; }
.konto__bereich { display: grid; gap: 20px; }
.konto__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--text-soft); font-size: .92rem; }
.konto__kopf strong { color: var(--ink); letter-spacing: .03em; }
.konto__kopf .konto__abmelden { margin-left: auto; }
.konto__bestellungen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.konto__keine { margin: 0; color: var(--text-soft); }
.konto__keine a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.konto__gespeichert { margin-left: 14px; color: var(--gold-dark); font-size: .9rem; font-weight: 500; }
.konto-bestellung details { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.konto-bestellung summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.konto-bestellung summary::-webkit-details-marker { display: none; }
.konto-bestellung details[open] summary { margin-bottom: 16px; }
.konto-bestellung__bilder { display: flex; gap: 4px; flex: none; }
.konto-bestellung__bilder img { width: 36px; height: 48px; border-radius: 4px; object-fit: cover; }
.konto-bestellung__text { display: grid; }
.konto-bestellung__text small { color: var(--text-soft); }
.konto-bestellung__status { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: #f3e4c6; color: var(--gold-dark); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.konto-bestellung__summe { font-weight: 700; white-space: nowrap; }
/* Fortschritt der Bestellung: Punkte auf einer Linie, erledigt in Gold mit Haken, der nächste offene Schritt pulsiert */
.fortschritt { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px 0 20px; padding: 0; list-style: none; }
.fortschritt li { position: relative; display: grid; align-content: start; justify-items: center; gap: 2px; padding: 26px 4px 0; text-align: center; font-size: .82rem; line-height: 1.3; color: var(--text-soft); }
.fortschritt li::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.fortschritt li:first-child::before { display: none; }
.fortschritt li.is-fertig::before, .fortschritt li.is-aktiv::before { background: var(--gold); }
.fortschritt__punkt { position: absolute; top: 0; left: 50%; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -10px;
  border: 2px solid var(--line); border-radius: 50%; background: var(--surface); }
.fortschritt li.is-fertig { color: var(--text); }
.fortschritt li.is-fertig .fortschritt__punkt { border-color: var(--gold); background: var(--gold); }
.fortschritt li.is-fertig .fortschritt__punkt::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #1d1d1d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fortschritt li.is-aktiv { color: var(--text); }
.fortschritt li.is-aktiv .fortschritt__punkt { border-color: var(--gold); animation: fortschritt-puls 1.8s ease-in-out infinite; }
.fortschritt strong { font-weight: 600; }
.fortschritt small { font-size: .75rem; color: var(--text-soft); }
.fortschritt small.fortschritt__info { color: var(--gold-light, var(--gold)); font-weight: 500; }
@keyframes fortschritt-puls { 50% { box-shadow: 0 0 0 6px rgb(176 138 62 / .3); } }
@media (prefers-reduced-motion: reduce) { .fortschritt li.is-aktiv .fortschritt__punkt { animation: none; box-shadow: 0 0 0 4px rgb(176 138 62 / .3); } }
.konto-bestellung__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.btn--klein { padding: 8px 14px; font-size: .85rem; }
.konto-bestellung__galerie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; font-size: .88rem; color: var(--gold-dark); font-weight: 500; }
.konto-bestellung__adresse { display: grid; gap: 2px; margin: 14px 0 0; color: var(--text-soft); font-size: .88rem; }
.konto-bestellung__adresse strong { color: var(--ink); }
.konto-liefer__aendern { justify-self: start; margin-top: 4px; font-size: .85rem; }
.konto-liefer { margin: 12px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.konto-liefer__knoepfe { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
@media (max-width: 600px) {
  .konto-bestellung summary { flex-wrap: wrap; }
  .konto-bestellung__status { margin-left: 0; }
}
.konto__code-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.konto__code-zeile .empfehlen__codewert { margin: 0; }
.konto__unter { margin: 20px 0 8px; font-size: 1.05rem; }
.konto__gutscheine { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.konto__gutscheine span { color: var(--text-soft); }
.konto__loeschen { margin-top: 18px; }
.konto__loeschen summary { cursor: pointer; color: var(--wine); font-size: .9rem; font-weight: 600; }
.konto__loeschen form { margin-top: 12px; max-width: 480px; }
.btn--wein { background: var(--wine); color: #fff; }

/* ---------- Download-Fenster nach der Bestellung ---------- */
.download-fenster { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 32px 24px 24px; border: 0;
  border-radius: var(--radius-lg); background: var(--cream); color: var(--text); box-shadow: var(--shadow-lg); text-align: center; }
.download-fenster::backdrop { background: rgb(27 23 20 / .55); }
.download-fenster[open] { display: grid; justify-items: center; }
.download-fenster h2 { font: 600 1.75rem/1.2 var(--font-head); margin: 0 0 8px; }
.download-fenster__text { color: var(--text-soft); margin: 0 0 20px; }
.download-fenster__zu { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); cursor: pointer; }
.download-fenster__zu:hover { background: var(--muted); color: var(--ink); }
.download-fenster__zu .icon { width: 20px; height: 20px; }
.download-liste { display: grid; gap: 12px; width: 100%; margin: 0 0 16px; padding: 0; list-style: none; text-align: left; }
.download-liste li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.download-liste img { width: 64px; height: 85px; object-fit: cover; border-radius: 6px; }
.download-liste strong { display: block; margin-bottom: 8px; font-size: .95rem; }
.download-liste .btn { width: 100%; }
.download-liste .is-warten { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .9rem; }
.download-liste .is-warten::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold);
  border-radius: 50%; animation: download-dreh .8s linear infinite; }
@keyframes download-dreh { to { transform: rotate(360deg); } }
.download-fenster__druck { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; color: var(--text-soft); font-size: .9rem; text-align: left; }
.download-fenster__druck .icon { flex: none; width: 20px; height: 20px; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .download-liste .is-warten::before { animation: none; } }
.naeher-knoepfe { display: grid; gap: 8px; width: 100%; }
.download-box__text { margin: -8px 0 16px; color: var(--text-soft); }
.download-box .download-liste { margin-bottom: 0; }

/* ---------- Rahmenfarbe (Schritt 3) ---------- */
.chip--rahmen { display: inline-flex; align-items: center; gap: 8px; }
/* Farbmuster: Ausschnitt der linken Leiste (Mitte) aus dem Rahmenbild */
.chip__muster { width: 18px; height: 18px; border-radius: 50%; background-size: 2400% auto; background-position: 7% 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.rahmen__hinweis { margin: 6px 0 0; font-size: .85rem; color: var(--text-soft); }

/* ---------- Ansichten in Schritt 3 (nur Rahmen-Formate): im Rahmen · an der Wand · Rahmen-Detail ---------- */
.ansichten { display: grid; gap: 12px; }
.ansichten__wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* An der Wand: Flur als Hintergrund, das gerahmte Bild (gleiche Rahmen-Ebene wie in der Vorschau) über der Konsole,
   etwa so groß wie ein 60 × 80-Rahmen im Verhältnis zur Konsole */
.mock--gross.raum { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; background: #ece6dc; }
.raum__flur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bild in echter Größe (--raum-breite aus konfigurator.js), mittig im Wandfeld: waagerecht 50,4 %, senkrecht 32 %
   (1639 / 1306 / 2 = 0,6275 → halbe Höhe in Prozent der Breite; die Fläche ist quadratisch) */
.mock--gross.raum .mock__bild { position: absolute; width: var(--raum-breite, 24.11%); left: calc(50.4% - var(--raum-breite, 24.11%) / 2); top: calc(32% - var(--raum-breite, 24.11%) * .6275); filter: drop-shadow(0 3px 5px rgb(27 23 20 / .3)); }
.mock--gross.raum .mock__bild:has(img[data-quer]) { width: var(--raum-breite, 24.11%); top: calc(32% - var(--raum-breite, 24.11%) * .3984); } /* 1306 / 1639 / 2 */
.mock--gross.ecke { display: grid; place-items: center; aspect-ratio: 1; padding: 0; overflow: hidden; background: #fff; }
.mock--gross.ecke img { width: 100%; height: 100%; object-fit: contain; }

/* Konto: Meine Bilder */
.konto__bilder-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.konto__bilder-liste li { display: grid; gap: 8px; justify-items: start; }
.konto__bilder-liste li { min-width: 0; }
.konto__bilder-liste .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
.konto__bilder-liste img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.konto__bild-titel { font-size: .85rem; font-weight: 600; }

/* Konto: „Mit Google anmelden“ (Gestaltung nach Googles Vorgaben: weiß, farbiges G, Text daneben) */
.konto__google { margin: 4px 0 4px; }
.btn--google { display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-weight: 500; }
.btn--google:hover { background: #f8f9fa; border-color: #c6c9cc; }
.google-g { width: 20px; height: 20px; flex: none; }
.konto__oder { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--text-soft); font-size: .85rem; }
.konto__oder::before, .konto__oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.konto__bonus { margin: 8px 0 0; padding: 10px 14px; border-radius: var(--radius); background: #f6e7c8; color: var(--gold-dark); font-weight: 600; font-size: .9rem; }

/* Konfigurator: gewählte Vorlage (von der Startseite) im Foto-Schritt */
.vorlage-wahl { display: flex; gap: 16px; align-items: center; margin: 0 0 20px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.vorlage-wahl__bild { flex: none; width: 84px; height: 112px; object-fit: contain; border-radius: 2px; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .35)); }
.vorlage-wahl__text { display: grid; gap: 2px; }
.vorlage-wahl__text small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }
.vorlage-wahl__text strong { font: 600 1.2rem/1.2 var(--font-head); }
.vorlage-wahl__text span { font-size: .85rem; color: var(--text-soft); }
.vorlage-wahl__aendern { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; font-size: .85rem; text-decoration: underline; color: var(--text-soft); cursor: pointer; }


/* Konfigurator: Farben der gewählten Vorlage (konfigurator.js setzt --farbe-1…3) als weicher Verlauf hinter der
   ganzen Seite, fest im Fenster (läuft beim Scrollen nicht mit) */
.konfig-hintergrund {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s;
  background:
    radial-gradient(60% 55% at 12% 18%, var(--farbe-1, transparent), transparent 72%),
    radial-gradient(55% 50% at 92% 38%, var(--farbe-2, transparent), transparent 72%),
    radial-gradient(70% 50% at 40% 100%, var(--farbe-3, transparent), transparent 72%);
}
.konfig-hintergrund.is-sichtbar { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .konfig-hintergrund { transition: none; } }

/* Galerie: Bild und Link führen mit diesem Motiv in den Konfigurator */
a.galerie__rahmen { color: inherit; }
.galerie__malen { justify-self: start; margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--gold-dark); }
.galerie__malen:hover { text-decoration: underline; }

/* Galerie: Herz (Like) – unter dem Bild rechts, gefüllt wenn eigenes Like */
.galerie__bild figure { position: relative; }
.galerie__like { position: absolute; right: 2px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 6px;
  border: 0; background: none; color: var(--text-soft); font: 600 .82rem/1 var(--font-body); cursor: pointer; }
.galerie__like .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
.galerie__like:hover { color: var(--text); }
.galerie__like[aria-pressed="true"] { color: #e0475b; }
.galerie__like[aria-pressed="true"] .icon { fill: currentColor; }
.galerie__like.is-pop .icon { animation: herz-pop .35s ease; }
@keyframes herz-pop { 40% { transform: scale(1.3); } }
.galerie__bild figcaption { padding-right: 52px; }

/* ---------- Geschenkgutschein ---------- */
.gutschein__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.gutschein__h2 { font-size: 1.35rem; margin: 28px 0 12px; }
.gutschein__form fieldset.feld { border: 0; padding: 0; margin: 0 0 8px; }
.gutschein__form legend { font-weight: 600; margin-bottom: 8px; }
.gutschein__betraege .chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
.gutschein__betraege .chip small { font-size: .72rem; font-weight: 400; opacity: .75; }
.gutschein__frei { display: block; margin-top: 10px; font-weight: 600; }
.gutschein__frei .eingabe { margin-top: 6px; max-width: 200px; }
.gutschein__karte { background: #1b1714; color: #f4eee2; border: 2px solid #c49e4a; border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; box-shadow: 0 10px 30px rgb(27 23 20 / .25); }
.gutschein__logo { height: 36px; width: auto; margin-bottom: 10px; }
.gutschein__karte-titel { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.gutschein__karte-wert { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: #c49e4a; margin: 8px 0; }
.gutschein__karte-fuer { margin: 0 0 6px; font-size: .95rem; min-height: 1.2em; }
.gutschein__karte-gruss { font-family: var(--font-display); font-style: italic; color: #aaa092; margin: 0 0 14px; min-height: 1.2em; }
.gutschein__karte-code { display: inline-block; background: #f4eee2; color: #1b1714; font-weight: 700; letter-spacing: .14em; padding: 8px 16px; border-radius: 8px; margin: 0; font-size: .9rem; }
.gutschein__gekauft { margin-bottom: 32px; }
.gutschein__code { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.gutschein__code strong { font-size: 1.6rem; letter-spacing: .12em; }
.btn--breit { width: 100%; justify-content: center; }
@media (max-width: 767px) { .gutschein__grid { grid-template-columns: 1fr; gap: 28px; } .gutschein__seite { order: -1; } }
.gutschein__formate .chip, .gutschein__groessen .chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
.gutschein__formate .chip small, .gutschein__groessen .chip small { font-size: .72rem; font-weight: 400; opacity: .75; }
.gutschein__produkt-hinweis { margin: 4px 0 0; font-size: .9rem; color: var(--text-soft); }
.gutschein__karte-fuer-produkt { margin: 10px 0 0; font-size: .85rem; color: #aaa092; }
.gutschein__karte-produkt { font-family: var(--font-display); font-size: 2rem; line-height: 1.25; color: #c49e4a; margin: 2px 0 4px; }
.gutschein__karte-wert { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: #f4eee2; margin: 0 0 10px; }

/* Hauptknöpfe im Konfigurator wackeln alle 8 Sekunden kurz (David 04.11.2026); nicht beim Darüberfahren und nicht bei „Bewegung reduzieren“ */
[data-konfigurator] .btn--gold:not(:disabled):not(:hover):not(:focus-visible) { animation: knopf-wackeln 8s ease-in-out infinite; }
@keyframes knopf-wackeln {
  0%, 90%, 100% { transform: none; }
  92% { transform: translateX(-4px) rotate(-1deg); }
  94% { transform: translateX(4px) rotate(1deg); }
  96% { transform: translateX(-3px) rotate(-.6deg); }
  98% { transform: translateX(2px) rotate(.4deg); }
}
@media (prefers-reduced-motion: reduce) { [data-konfigurator] .btn--gold:not(:disabled):not(:hover):not(:focus-visible) { animation: none; } }