/* ==========================================================================
   Partner / Mitmachen (/partners) – seitenspezifisch. Aufbau, Karten, Felder,
   Checkbox & Typo aus pages.css; hier nur Info-Spalte + Paketauswahl.
   ========================================================================== */
/* ---- Markengold-Panel (identische Gestaltung wie /spenden & /bestellen):
   Text oben, Produktbild unten bündig, weißes Marken-Wasserzeichen. -------- */
.ptn-panel {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    border-radius: var(--p-radius);
    background: var(--gold);
    color: var(--gold-ink);
}
/* Desktop: Panel bleibt beim Scrollen des (längeren) Formulars oben stehen. */
@media (min-width: 881px) {
    .ptn-panel { position: sticky; top: calc(var(--nav-h, 6rem) + 1rem); align-self: start; }
}
.ptn-panel::before {
    content: ""; position: absolute; z-index: 0;
    top: 50%; left: 0;
    height: 170%; aspect-ratio: 1;
    transform: translate(-50%, -50%);   /* linksbündig */
    background: url("../images/SVG/overlay-icon.svg") center / contain no-repeat;
    filter: brightness(0) invert(1); opacity: .08;
    pointer-events: none;
}
.ptn-panel__body {
    position: relative; z-index: 1;
    display: grid; gap: .9rem;
    padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
}
.ptn-panel__lead { margin: 0; color: var(--gold-ink); font-size: .95rem; line-height: 1.5; }
.ptn-panel__eyebrow {
    margin: .1rem 0 -.25rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--gold-ink) 85%, transparent);
}
.ptn-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ptn-panel__list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; }
.ptn-panel__check {
    display: grid; place-items: center; flex: none;
    width: 1.45rem; height: 1.45rem; border-radius: var(--radius-full);
    background: var(--color-surface); color: var(--gold);
}
.ptn-panel__check svg { width: .8rem; height: .8rem; }
.ptn-panel__media {
    position: relative; z-index: 1; flex: 1;
    display: grid; align-items: end; justify-items: center; padding: 0;
}
.ptn-panel__media img { width: 100%; height: auto; display: block; }

/* ---- Formular: Blöcke ---- */
.ptn-form { display: grid; gap: 2.1rem; }   /* Trennung der Blöcke über Abstand, nicht über Linien */
.ptn-form .psubheading { display: flex; align-items: center; gap: .65rem; }
.ptn-block { display: grid; gap: 1rem; }

/* Paketauswahl (S/M/L/XL) */
.ptn-pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
/* Boxen exakt wie die Spenden-Auswahl (.dnt-option): sichtbarer Rahmen im
   Normalzustand, Hover verstärkt den Rahmen + dezente Navy-Tönung + Anheben,
   aktiv = Gold-Rahmen + Gold-Tönung + Gold-Outline. Gleiche Tokens/Werte. */
.ptn-pkg__card {
    position: relative;
    display: grid; justify-items: center; gap: .28rem;
    padding: 1.7rem .6rem 1.25rem; text-align: center;
    border: 1px solid var(--p-line);
    border-radius: var(--radius-md);
    background: var(--p-paper);
    transition: border-color var(--transition), background var(--transition),
                outline-color var(--transition), transform var(--transition);
}
.popt:hover .ptn-pkg__card { transform: translateY(-2px); }
.popt:hover input:not(:checked) + .ptn-pkg__card {
    border-color: var(--p-line-strong);
    background: color-mix(in srgb, var(--secondary) 4%, var(--p-paper));
}
.popt input:checked + .ptn-pkg__card {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, var(--p-paper));
    outline: 1px solid var(--gold); outline-offset: -1px;
}
.popt input:focus-visible + .ptn-pkg__card { outline: var(--focus-ring); outline-offset: 2px; }
/* Gruppen-Fehler (keine Paketwahl): rote Kontur auf allen Karten – die Karten
   sind rahmenlos, daher wie beim Auswahl-Zustand über eine Outline gelöst. */
.ptn-pkgs.field--error .ptn-pkg__card { outline: 1px solid var(--p-danger); outline-offset: -1px; }

/* Auswahl-Häkchen oben rechts (statt schlichtem Radio-Punkt) */
.ptn-pkg__radio {
    position: absolute; top: .6rem; right: .6rem;
    display: grid; place-items: center;
    width: 1.3rem; height: 1.3rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--surface-card);
    transition: background var(--transition), border-color var(--transition);
}
.popt input:checked + .ptn-pkg__card .ptn-pkg__radio { background: var(--gold); border-color: var(--gold); }
.ptn-pkg__radio::after {
    content: ""; width: .32rem; height: .6rem; margin-top: -2px;
    border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
    opacity: 0; transition: opacity var(--transition);
}
.popt input:checked + .ptn-pkg__card .ptn-pkg__radio::after { opacity: 1; }

.ptn-pkg__size { font-family: var(--font-display-medium); font-size: 1.5rem; line-height: 1; color: var(--p-ink); }
.ptn-pkg__qty { font-size: .9rem; font-weight: 600; color: var(--p-ink); }
.ptn-pkg__ship { margin-top: .5rem; font-size: .76rem; color: var(--p-ink-muted); }

/* CTA */
.ptn-form .pcta svg { width: 1.15rem; height: 1.15rem; }

/* Mobil (einspaltig): Info-Panel unter das Formular verschieben. */
@media (max-width: 880px) {
    .ptn-panel { order: 2; }
    .ptn-form  { order: 1; }
}

@media (max-width: 620px) {
    .ptn-pkgs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}