/* ============================================================
   Plakat-Recycling: Ergaenzende Styles

   Baut auf style.css auf und nutzt dieselben Farben:
   #11414e Hauptfarbe, #c3f0e8 Sekundaerfarbe, #52b7c1 Akzent,
   #f8f9fa Sandweiss, #2c3e50 Schieferblau.

   Alle Klassen tragen das Praefix pr-, damit sie sich nicht mit
   bestehenden Regeln beissen. Der Inhalt dieser Datei kann bei
   Bedarf einfach ans Ende von style.css kopiert werden.
   ============================================================ */

/* --- 1. Baender und Grundraster --- */

.pr-band {
    width: 100%;
}

.pr-band--mint {
    background-color: #c3f0e8;
    color: #11414e;
}

.pr-band--weiss {
    background-color: #ffffff;
    color: #2c3e50;
}

.pr-band--blau {
    background-color: #11414e;
    color: #f8f9fa;
}

/* Dunkler Kopfbalken, wie bei Termine und Kontakt auf der Startseite */
.pr-bandkopf {
    background-color: #11414e;
    color: #f8f9fa;
    text-align: center;
}

.pr-bandkopf h2 {
    font-family: 'Lato-Italic';
    font-size: 32px;
    font-weight: 400;
    padding: 20px;
    margin: 0;
}

.pr-inhalt {
    max-width: 1060px;
    margin: 0 auto;
    padding: 55px 20px 70px;
}

.pr-inhalt--schmal {
    max-width: 720px;
}

.pr-ueberschrift {
    font-family: 'Lato-Italic';
    font-size: clamp(26px, 3.4vw, 32px);
    font-weight: bold;
    text-align: center;
    margin: 0 0 14px;
}

.pr-vorspann {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
    line-height: 1.55;
    hyphens: auto;
}

.pr-textlink {
    color: inherit;
    text-decoration: underline;
}

.pr-band--blau .pr-textlink {
    color: #c3f0e8;
}

/* --- 2. Karussell --- */

.pr-karussell {
    position: relative;
}

.pr-karussell__spur {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 4px 2px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pr-karussell__spur::-webkit-scrollbar {
    display: none;
}

.pr-karussell__spur:focus-visible {
    outline: 3px solid #11414e;
    outline-offset: 6px;
    border-radius: 14px;
}

.pr-plakat {
    /* Die Motive selbst sind knapp 2:1 im Querformat. Zwei Karten nebeneinander
       geben ihnen auf grossen Bildschirmen genug Flaeche, statt sie in schmale
       Hochformat-Kacheln zu zwingen. */
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: 0;
    scroll-snap-align: start;
}

.pr-plakat__figur {
    margin: 0;
}

/* Die gelieferten Plakate liegen fast einheitlich bei 1,96:1. Der Rahmen
   folgt deshalb dem echten Querformat; es gibt keine kuenstliche Hochformat-
   Flaeche und keinen unscharfen Fuellhintergrund mehr. */
.pr-plakat__rahmen {
    position: relative;
    aspect-ratio: 1750 / 894;
    box-sizing: border-box;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background-color: #11414e;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.pr-plakat__rahmen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.pr-plakat__text {
    margin: 12px 4px 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.85;
    hyphens: auto;
}

/* Pfeile, senkrecht mittig zur Bildflaeche */
.pr-karussell__pfeil {
    position: absolute;
    top: 0;
    bottom: 70px;
    height: 44px;
    width: 44px;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #11414e;
    color: #c3f0e8;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.pr-karussell__pfeil svg {
    width: 22px;
    height: 22px;
}

.pr-karussell__pfeil--zurueck {
    left: -14px;
}

.pr-karussell__pfeil--vor {
    right: -14px;
}

.pr-karussell__pfeil:hover {
    background-color: #52b7c1;
    color: #11414e;
    transform: scale(1.06);
}

.pr-karussell__pfeil:focus-visible {
    outline: 3px solid #11414e;
    outline-offset: 3px;
}

.pr-karussell__punkte {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    min-height: 14px;
}

.pr-karussell__punkt {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(17, 65, 78, 0.28);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pr-karussell__punkt[aria-current='true'] {
    background-color: #11414e;
    transform: scale(1.3);
}

.pr-karussell__punkt:focus-visible {
    outline: 2px solid #11414e;
    outline-offset: 3px;
}

/* --- 3. Produktkacheln --- */

.pr-materialhinweis {
    max-width: 720px;
    margin: -16px auto 30px;
    padding: 12px 16px;
    border-left: 4px solid #52b7c1;
    background-color: #eef9f7;
    color: #2c3e50;
    font-size: 14px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Pressehinweis im Einstieg: Bild und Bildunterschrift bilden zusammen
   einen Link. Die Breite richtet sich nach dem verfuegbaren Platz und
   nicht nach der Bilddatei, damit auf schmalen Displays nichts seitlich
   hinauslaeuft und die Unterschrift immer unter dem Bild steht.
   ------------------------------------------------------------------ */
.pr-presse {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 26px auto 0;
    text-decoration: none;
    color: inherit;
}

.pr-presse figure {
    margin: 0;
}

.pr-presse img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    border: 10px solid #f8f9fa;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.55);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.pr-presse figcaption {
    font-family: 'Lato-Italic';
    font-size: 15px;
    line-height: 1.4;
    margin-top: 12px;
    opacity: 0.9;
}

@media (hover: hover) {
    .pr-presse:hover img {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
    }
}

@media (max-width: 620px) {
    .pr-presse {
        margin-top: 18px;
    }

    .pr-presse img {
        border-width: 6px;
    }

    .pr-presse figcaption {
        font-size: 14px;
        margin-top: 10px;
    }
}

.pr-produkte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

.pr-produkt {
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
    max-width: 336px;
    min-width: 0;
    overflow: hidden;
    background-color: #f8f9fa;
    border-top: 4px solid #52b7c1;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pr-produkt:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* Bildflaeche der Kachel. Die Mockups sind freigestellte PNG, hinter den
   durchsichtigen Stellen liegt ein Ausschnitt eines Wahlplakats. Dadurch
   wirkt jedes Produkt so, als waere es aus genau diesem Plakat genaeht.

   Die Mockups liegen im Verhaeltnis 4:3 vor, genau wie diese Flaeche. Das
   Produkt steht darin bereits zentriert und mit eigenem Rand. Deshalb kein
   Innenabstand mehr: sonst bleibt rundherum ein Streifen der Kachelfarbe
   stehen. Ein neues Mockup muss ebenfalls 4:3 sein, sonst wird beschnitten. */
.pr-produkt__bild {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    background-color: #c3f0e8;
}

/* Zwei gleichberechtigte Lagen: eine liegt sichtbar da, die andere wird im
   Hintergrund mit dem naechsten Ausschnitt bestueckt. Beim Wechsel tauschen
   sie die Rollen, deshalb blendet das Bild weich ueber statt zu springen. */
.pr-produkt__plane {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 15%;

    /* Vergroesserung des Plakats. 850 % heisst: die Bildbreite betraegt das
       8,5fache der Kachelbreite, sichtbar bleibt also rund ein Neuntel der
       Plakatbreite. So wirkt der Stoff wie ein echter kleiner Zuschnitt und
       nicht wie ein komplettes Plakat im Taschenformat.

       Der Wert hier ist nur die Notlage. Im Regelfall setzt
       plakat-recycling.js pro Ausschnitt --pr-zoom aus der Konfiguration. */
    background-size: var(--pr-zoom, 850%) auto;
    opacity: 0;
    transition: opacity 1.1s ease;
    pointer-events: none;
}

.pr-produkt__plane.ist-sichtbar {
    opacity: 1;
}

/* Ruhiger Schleier ueber dem Plakat, damit das Mockup davor klar bleibt.
   Die Klasse setzt das Skript erst, wenn wirklich ein Plakat liegt. */
.pr-produkt__bild--plakat::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(248, 249, 250, 0.15),
            rgba(248, 249, 250, 0.04) 45%,
            rgba(17, 65, 78, 0.10)),
        radial-gradient(115% 95% at 50% 42%,
            rgba(255, 255, 255, 0.08),
            rgba(17, 65, 78, 0.08));
}

.pr-produkt__bild img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Zweite Spielart fuer den Fall, dass die Taschenflaechen im PNG nicht
   durchsichtig, sondern hell gefuellt sind. Dann wird das Plakat auf die
   Silhouette des Mockups beschnitten und das Mockup multiplizierend
   darueber gelegt: Die Umrisse bleiben schwarz, die Flaechen bekommen das
   Plakatmotiv. Einschalten, indem in plakat-recycling.php beim Element
   pr-produkt__bild zusaetzlich die Klasse pr-produkt__bild--stoff steht. */
.pr-produkt__bild--stoff .pr-produkt__plane {
    -webkit-mask-image: var(--pr-mockup);
    mask-image: var(--pr-mockup);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: none;
}

.pr-produkt__bild--stoff.pr-produkt__bild--plakat::after {
    background: none;
}

.pr-produkt__bild--stoff img {
    mix-blend-mode: multiply;
}

.pr-produkt__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 20px;
}

.pr-produkt__text h3 {
    font-family: 'Lato-Italic';
    font-size: 24px;
    font-weight: 400;
    color: #11414e;
    margin: 0 0 10px;
}

.pr-produkt__text p {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    hyphens: auto;
}

.pr-produkt__merkmale {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #dddddd;
}

.pr-produkt__merkmale li {
    position: relative;
    font-size: 14.5px;
    line-height: 1.45;
    padding-left: 18px;
    margin-bottom: 9px;
}

.pr-produkt__merkmale li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #52b7c1;
}

.pr-produkt__merkmale li:last-child {
    margin-bottom: 0;
}

.pr-produkt__eckdaten {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}

.pr-produkt__preis {
    font-family: 'Lato-Italic';
    font-size: 19px;
    font-weight: bold;
    color: #11414e;
}

.pr-produkt__auflage {
    font-size: 13px;
    color: #52b7c1;
    text-align: right;
}

/* --- 4. Formular --- */

.pr-formular {
    background-color: #f8f9fa;
    color: #2c3e50;
    border-top: 4px solid #52b7c1;
    border-radius: 12px;
    padding: 28px 26px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.pr-feldgruppe {
    border: none;
    margin: 0 0 26px;
    padding: 0;
}

.pr-feldgruppe legend {
    font-family: 'Lato-Italic';
    font-size: 21px;
    color: #11414e;
    padding: 0;
    margin-bottom: 4px;
}

.pr-hinweis {
    font-size: 14px;
    color: #52779c;
    margin: 0 0 16px;
}

.pr-feld {
    margin-bottom: 16px;
}

.pr-feld label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #11414e;
    margin-bottom: 6px;
}

.pr-optional {
    font-weight: normal;
    font-size: 13px;
    color: #7d8b97;
}

.pr-feld input,
.pr-feld textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: #2c3e50;
    padding: 11px 12px;
    border: 1px solid #c8d3d8;
    border-radius: 6px;
    background-color: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pr-feld textarea {
    min-height: 118px;
    resize: vertical;
}

.pr-feld input:focus,
.pr-feld textarea:focus {
    outline: none;
    border-color: #52b7c1;
    box-shadow: 0 0 0 3px rgba(82, 183, 193, 0.25);
}

.pr-feld-paar {
    display: flex;
    gap: 18px;
}

.pr-feld-paar .pr-feld {
    flex: 1;
    min-width: 0;
}

/* Stueckzahlen */
.pr-menge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e4e9ec;
}

.pr-menge:last-of-type {
    border-bottom: none;
}

.pr-menge label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    cursor: pointer;
}

.pr-menge__name {
    font-size: 16px;
    font-weight: bold;
    color: #11414e;
}

.pr-menge__preis {
    font-size: 13px;
    color: #7d8b97;
}

.pr-menge input {
    width: 88px;
    flex: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    text-align: center;
    padding: 10px 8px;
    border: 1px solid #c8d3d8;
    border-radius: 6px;
    background-color: #ffffff;
}

.pr-menge input:focus {
    outline: none;
    border-color: #52b7c1;
    box-shadow: 0 0 0 3px rgba(82, 183, 193, 0.25);
}

.pr-feld--frage {
    padding: 16px 0 4px;
    border-top: 1px solid #e4e9ec;
}

/* Einwilligung */
.pr-einwilligung {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 24px;
}

.pr-einwilligung input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #11414e;
}

.pr-einwilligung label {
    font-size: 14px;
    line-height: 1.5;
    color: #2c3e50;
}

.pr-knopf {
    display: inline-block;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    color: #f8f9fa;
    background-color: #11414e;
    border: none;
    border-radius: 5px;
    padding: 14px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pr-knopf:hover,
.pr-knopf:focus-visible {
    background-color: #52b7c1;
    color: #11414e;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.pr-knopf:active {
    transform: translateY(0);
}

.pr-kleingedrucktes {
    font-size: 13px;
    line-height: 1.5;
    color: #7d8b97;
    margin: 18px 0 0;
}

/* Honigtopf: sichtbar nur fuer automatisierte Ausfueller.
   Bewusst kein display:none, weil manche Bots solche Felder ueberspringen. */
.pr-honig {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- 5. Meldungen --- */

.pr-meldung {
    border-radius: 12px;
    padding: 24px 24px 20px;
    margin-bottom: 26px;
}

.pr-meldung h3 {
    font-family: 'Lato-Italic';
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px;
}

.pr-meldung p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.pr-meldung p:last-child {
    margin-bottom: 0;
}

.pr-meldung--erfolg {
    background-color: #f8f9fa;
    color: #2c3e50;
    border-top: 4px solid #52b7c1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.pr-meldung--erfolg h3 {
    color: #11414e;
}

.pr-meldung--erfolg .pr-textlink {
    color: #11414e;
}

.pr-meldung--fehler {
    background-color: #fdece9;
    color: #7c261a;
    border-left: 5px solid #b03a2e;
    padding: 18px 20px;
}

.pr-meldung--fehler p {
    font-weight: bold;
    margin-bottom: 8px;
}

.pr-meldung--fehler ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.5;
}

/* --- 6. Responsive --- */

@media (max-width: 900px) {
    .pr-plakat {
        flex-basis: 88%;
    }

    .pr-inhalt {
        padding: 45px 18px 60px;
    }
}

@media (max-width: 620px) {
    .pr-plakat {
        flex-basis: 94%;
    }

    .pr-karussell__pfeil {
        width: 38px;
        height: 38px;
        bottom: 74px;
    }

    .pr-karussell__pfeil--zurueck {
        left: 2px;
    }

    .pr-karussell__pfeil--vor {
        right: 2px;
    }

    .pr-feld-paar {
        flex-direction: column;
        gap: 0;
    }

    .pr-formular {
        padding: 24px 18px 26px;
    }

    .pr-bandkopf h2 {
        font-size: 27px;
        padding: 18px 16px;
    }

    .pr-produkt {
        max-width: 460px;
    }
}

/* --- 7. Reduzierte Bewegung --- */

@media (prefers-reduced-motion: reduce) {

    .pr-karussell__spur {
        scroll-behavior: auto;
    }

    .pr-produkt,
    .pr-knopf,
    .pr-karussell__pfeil,
    .pr-karussell__punkt,
    .pr-presse img,
    .pr-produkt__plane {
        transition-duration: 0.01ms !important;
    }

    .pr-produkt:hover {
        transform: none;
    }
}