/* Fuchspack Verpackungs-Check – Pop-up-Mockups (21.08.2026)
   Alles in Container-Query-Einheiten (cqw), damit dieselbe Karte im kleinen Rahmen
   der Vorschlagsseite und in der Großansicht identisch aussieht. */

.frame { position: relative; container-type: inline-size; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12); background: #fff; font-family: "Univers Next", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; }
.frame.desktop { aspect-ratio: 1440 / 900; background: url(home-desktop.webp) center top / cover no-repeat; }
.frame.mobile  { aspect-ratio: 390 / 844;  background: url(home-mobile.webp) center top / cover no-repeat; }
.frame .dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.frame * { box-sizing: border-box; }
.frame h3, .frame p, .frame ul { margin: 0; }
.frame ul { padding: 0; list-style: none; }

:root {
  --fp-gruen: hsl(155deg 25% 55%);
  --fp-lemon: hsl(59deg 56% 55%);
  --fp-lemon-dunkel: hsl(59deg 56% 42%);
  --fp-dunkel: hsl(144deg 18% 29%);
  --fp-rot: #e30613;
}

/* ---------- gemeinsame Bausteine ---------- */
.pop { position: absolute; }
.pop .x { position: absolute; border: 0; background: rgba(0,0,0,.07); color: #111; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; line-height: 1; padding: 0; }
.pop .cta { display: inline-block; background: var(--fp-lemon); color: #111; text-decoration: none; font-weight: 700;
  border-radius: .35em; box-shadow: 0 .35em 1.1em -.3em rgba(0,0,0,.45); }
.pop .cta:hover { background: var(--fp-lemon-dunkel); }
.pop .vorzeile { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--fp-dunkel); }
.pop .klein { color: #555; }
.pop .fakten { display: flex; gap: 1.2em; }
.pop .fakten li { display: flex; flex-direction: column; line-height: 1.05; }
.pop .fakten b { font-weight: 800; color: var(--fp-dunkel); }
.pop .fakten span { color: #666; }

/* ---------- V1: Offener Karton + Packzettel ---------- */
.desktop .v1 { left: 50%; top: 50%; transform: translate(-50%, -52%); width: 52cqw; height: 32cqw; }
.desktop .v1 .zettel { position: absolute; z-index: 2; right: 0; top: 1cqw; width: 34cqw; background: #fff; border-radius: .5cqw;
  padding: 2.1cqw 2.4cqw 2.2cqw; box-shadow: 0 2.2cqw 5cqw -1cqw rgba(0,0,0,.55); transform: rotate(-1.2deg);
  background-image: linear-gradient(to right, #cfcfcf 45%, transparent 45%); background-size: .7cqw .12cqw; background-repeat: repeat-x; background-position: 0 1cqw; }
.desktop .v1 .vorzeile { font-size: .78cqw; display: block; margin-bottom: .8cqw; }
.desktop .v1 h3 { font-size: 2.05cqw; line-height: 1.12; font-weight: 500; margin-bottom: 1cqw; letter-spacing: -.01em; }
.desktop .v1 p.text { font-size: 1.02cqw; line-height: 1.45; color: #333; margin-bottom: 1.3cqw; }
.desktop .v1 .fakten { justify-content: center; gap: 3.2cqw; margin: 0 0 1.4cqw; padding: 1.1cqw 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.desktop .v1 .fakten li { align-items: center; text-align: center; }
.desktop .v1 .fakten b { font-size: 2.7cqw; }
.desktop .v1 .fakten span { font-size: .8cqw; text-transform: uppercase; letter-spacing: .1em; margin-top: .2cqw; }
.desktop .v1 .cta { display: block; width: max-content; margin: 0 auto; font-size: 1.1cqw; padding: .9cqw 2cqw; }
.desktop .v1 .klein { display: block; font-size: .8cqw; margin-top: .9cqw; text-align: center; }
.desktop .v1 .x { top: 1.8cqw; right: 1.1cqw; width: 2cqw; height: 2cqw; font-size: 1cqw; }
.desktop .v1 .karton { position: absolute; z-index: 1; left: -1cqw; bottom: -1.5cqw; width: 23cqw; filter: drop-shadow(0 1.6cqw 2cqw rgba(0,0,0,.4)); }
.desktop .v1 .sticker { position: absolute; z-index: 3; left: 5.2cqw; bottom: 2.6cqw; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--fp-lemon);
  transform: rotate(-9deg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: 2.7cqw; line-height: .9; letter-spacing: -.03em;
  box-shadow: 0 .25cqw .7cqw rgba(0,0,0,.35); border: .22cqw solid #fff; }
.desktop .v1 .sticker small { display: block; font-size: .62cqw; font-weight: 700; letter-spacing: .1em; margin-top: .25cqw; }

.mobile .v1 { left: 0; right: 0; bottom: 0; width: 100cqw; height: auto; }
.mobile .v1 .zettel { background: #fff; border-radius: 5cqw 5cqw 0 0; padding: 14cqw 6cqw 7cqw; box-shadow: 0 -3cqw 10cqw rgba(0,0,0,.35); position: relative; }
.mobile .v1 .vorzeile { font-size: 2.9cqw; display: block; margin-bottom: 2cqw; }
.mobile .v1 h3 { font-size: 6.4cqw; line-height: 1.12; font-weight: 500; margin-bottom: 3cqw; padding-right: 4cqw; }
.mobile .v1 p.text { font-size: 3.7cqw; line-height: 1.45; color: #333; margin-bottom: 4cqw; }
.mobile .v1 .fakten { justify-content: center; gap: 9cqw; margin: 0 0 5cqw; padding: 3.5cqw 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.mobile .v1 .fakten li { align-items: center; text-align: center; }
.mobile .v1 .fakten b { font-size: 8cqw; }
.mobile .v1 .fakten span { font-size: 2.7cqw; text-transform: uppercase; letter-spacing: .08em; }
.mobile .v1 .cta { display: block; text-align: center; font-size: 4.2cqw; padding: 3.6cqw 4cqw; }
.mobile .v1 .klein { display: block; font-size: 3cqw; margin-top: 3cqw; text-align: center; }
.mobile .v1 .x { top: 3cqw; right: 3cqw; width: 8cqw; height: 8cqw; font-size: 4cqw; }
.mobile .v1 .karton { position: absolute; z-index: 2; right: 2cqw; top: -22cqw; width: 40cqw; filter: drop-shadow(0 3cqw 5cqw rgba(0,0,0,.45)); }
.mobile .v1 .sticker { position: absolute; z-index: 3; right: 25cqw; top: -6cqw; width: 14cqw; height: 14cqw; border-radius: 50%; background: var(--fp-lemon);
  transform: rotate(-9deg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: 6cqw; line-height: .9; letter-spacing: -.03em;
  box-shadow: 0 .6cqw 1.5cqw rgba(0,0,0,.35); border: .6cqw solid #fff; }
.mobile .v1 .sticker small { display: block; font-size: 1.5cqw; font-weight: 700; letter-spacing: .1em; margin-top: .6cqw; }

/* ---------- V2: Frage 1 direkt im Pop-up ---------- */
.desktop .v2 { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44cqw; background: #fff; border-radius: .6cqw; overflow: hidden;
  box-shadow: 0 2.2cqw 5cqw -1cqw rgba(0,0,0,.55); }
.v2 .kopf { background: var(--fp-lemon); display: flex; align-items: center; justify-content: space-between; }
.v2 .kopf b { font-weight: 800; }
.v2 .kopf span { color: #333; }
.v2 .fortschritt { position: relative; height: .45cqw; background: rgba(0,0,0,.08); }
.v2 .fortschritt i { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; background: var(--fp-dunkel); }
.v2 .chips { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2 .chip { border: 1px solid #ddd; border-radius: .45cqw; background: #fafafa; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; color: #111; text-decoration: none; font-weight: 600; }
.v2 .chip:hover { border-color: var(--fp-dunkel); background: #fff; }
.v2 .chip img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.desktop .v2 .kopf { padding: .9cqw 1.8cqw; font-size: .95cqw; }
.desktop .v2 .inhalt { padding: 1.8cqw 1.8cqw 1.6cqw; }
.desktop .v2 h3 { font-size: 1.9cqw; font-weight: 500; line-height: 1.15; margin-bottom: .5cqw; }
.desktop .v2 p.text { font-size: 1cqw; color: #444; margin-bottom: 1.3cqw; }
.desktop .v2 .chips { gap: .8cqw; margin-bottom: 1.3cqw; }
.desktop .v2 .chip { padding: .6cqw .6cqw .7cqw; gap: .4cqw; font-size: .85cqw; line-height: 1.2; }
.desktop .v2 .chip img { max-width: 5.2cqw; }
.desktop .v2 .fuss { display: flex; justify-content: space-between; align-items: center; font-size: .8cqw; color: #555; }
.desktop .v2 .fuss a { color: var(--fp-dunkel); font-weight: 700; text-decoration: none; }
.desktop .v2 .x { top: 2.7cqw; right: 1.2cqw; width: 2cqw; height: 2cqw; font-size: 1cqw; }

.mobile .v2 { left: 0; right: 0; bottom: 0; width: 100cqw; background: #fff; border-radius: 5cqw 5cqw 0 0; overflow: hidden; box-shadow: 0 -3cqw 10cqw rgba(0,0,0,.35); }
.mobile .v2 .kopf { padding: 3.2cqw 5cqw; font-size: 3.3cqw; }
.mobile .v2 .fortschritt { height: 1.3cqw; }
.mobile .v2 .inhalt { padding: 5cqw 5cqw 5cqw; }
.mobile .v2 h3 { font-size: 6cqw; font-weight: 500; line-height: 1.15; margin-bottom: 1.5cqw; }
.mobile .v2 p.text { font-size: 3.5cqw; color: #444; margin-bottom: 4cqw; }
.mobile .v2 .chips { gap: 2.5cqw; margin-bottom: 4cqw; }
.mobile .v2 .chip { padding: 2cqw 1.5cqw 2.2cqw; gap: 1.2cqw; font-size: 2.9cqw; line-height: 1.2; border-radius: 2cqw; }
.mobile .v2 .chip img { max-width: 16cqw; }
.mobile .v2 .fuss { font-size: 3cqw; color: #555; text-align: center; }
.mobile .v2 .fuss a { display: block; margin-top: 2cqw; color: var(--fp-dunkel); font-weight: 700; text-decoration: none; }
.mobile .v2 .x { top: 11cqw; right: 4cqw; width: 8cqw; height: 8cqw; font-size: 4cqw; }

/* ---------- V3: Versandetikett ---------- */
.v3 { background: #fff; color: #111; border: .18em solid #111; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.v3 .zeile { display: grid; grid-template-columns: 1fr auto; border-bottom: .12em solid #111; }
.v3 .feld { border-right: .12em solid #111; }
.v3 .feld:last-child { border-right: 0; }
.v3 .label { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #666; display: block; }
.v3 .wert { font-weight: 700; display: block; }
.v3 .prio { background: #111; color: #fff; text-align: center; display: grid; place-items: center; line-height: 1; }
.v3 .prio b { display: block; }
.v3 .prio small { display: block; letter-spacing: .14em; font-weight: 700; }
.v3 .haupt { position: relative; }
.v3 h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.08; }
.v3 p.text { color: #333; line-height: 1.4; }
.v3 .stempel { position: absolute; border: .22em solid var(--fp-rot); color: var(--fp-rot); text-transform: uppercase; font-weight: 800; letter-spacing: .1em;
  transform: rotate(-9deg); padding: .25em .6em; border-radius: .3em; opacity: .9; mix-blend-mode: multiply; line-height: 1.1; text-align: center; }
.v3 .barcode { background: repeating-linear-gradient(90deg, #111 0 .18em, transparent .18em .3em, #111 .3em .38em, transparent .38em .55em, #111 .55em .85em, transparent .85em 1.05em); }
.v3 .unten { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: .12em solid #111; }
.v3 .unten .cta { border-radius: 0; box-shadow: none; text-align: center; }
.v3 .x { background: #fff; border: .1em solid #111; border-radius: 0; }

.desktop .v3 { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1deg); width: 36cqw; }
.desktop .v3 .zeile { grid-template-columns: 1fr 1fr auto; }
.desktop .v3 .feld { padding: .8cqw 1.2cqw; }
.desktop .v3 .label { font-size: .6cqw; margin-bottom: .25cqw; }
.desktop .v3 .wert { font-size: .95cqw; }
.desktop .v3 .prio { padding: .7cqw 1.3cqw; }
.desktop .v3 .prio b { font-size: 1.9cqw; }
.desktop .v3 .prio small { font-size: .55cqw; margin-top: .3cqw; }
.desktop .v3 .haupt { padding: 1.8cqw 1.4cqw 1.6cqw; }
.desktop .v3 h3 { font-size: 2.3cqw; margin-bottom: .9cqw; padding-right: 9cqw; }
.desktop .v3 p.text { font-size: 1.02cqw; margin-bottom: 1.2cqw; max-width: 26cqw; }
.desktop .v3 .fakten b { font-size: 1.5cqw; }
.desktop .v3 .fakten span { font-size: .65cqw; text-transform: uppercase; letter-spacing: .08em; }
.desktop .v3 .stempel { right: 1.3cqw; top: 1.3cqw; font-size: .8cqw; }
.desktop .v3 .barcode { height: 2.2cqw; margin: 0 1.4cqw 1.2cqw; font-size: .9cqw; }
.desktop .v3 .unten .klein { padding: 0 1.4cqw; font-size: .8cqw; }
.desktop .v3 .unten .cta { font-size: 1.05cqw; padding: 1.1cqw 2cqw; }
.desktop .v3 .x { top: -1cqw; right: -1cqw; width: 2.2cqw; height: 2.2cqw; font-size: 1cqw; }

.mobile .v3 { left: 4cqw; right: 4cqw; top: 50%; transform: translateY(-50%) rotate(-1deg); width: 92cqw; }
.mobile .v3 .zeile { grid-template-columns: 1fr auto; }
.mobile .v3 .feld { padding: 2.5cqw 3.5cqw; }
.mobile .v3 .feld.an { display: none; }
.mobile .v3 .label { font-size: 2.2cqw; margin-bottom: .8cqw; }
.mobile .v3 .wert { font-size: 3.3cqw; }
.mobile .v3 .prio { padding: 2cqw 4cqw; }
.mobile .v3 .prio b { font-size: 6.5cqw; }
.mobile .v3 .prio small { font-size: 2cqw; margin-top: 1cqw; }
.mobile .v3 .haupt { padding: 5cqw 4cqw 4.5cqw; }
.mobile .v3 h3 { font-size: 7cqw; margin-bottom: 3cqw; }
.mobile .v3 p.text { font-size: 3.6cqw; margin-bottom: 4cqw; }
.mobile .v3 .fakten b { font-size: 5.5cqw; }
.mobile .v3 .fakten span { font-size: 2.4cqw; text-transform: uppercase; letter-spacing: .08em; }
.mobile .v3 .stempel { right: 3cqw; bottom: 3cqw; font-size: 2.8cqw; }
.mobile .v3 .barcode { height: 7cqw; margin: 0 4cqw 4cqw; }
.mobile .v3 .unten { grid-template-columns: 1fr; }
.mobile .v3 .unten .klein { display: none; }
.mobile .v3 .unten .cta { font-size: 4.2cqw; padding: 4cqw; }
.mobile .v3 .x { top: -3.5cqw; right: -3.5cqw; width: 8cqw; height: 8cqw; font-size: 4cqw; }