/* Gutschein-Bundles: Volle Breite als Band, innerer Wrapper auf übliche Breite (1080px),
   darin 50:50-Split Bild | Text+Buchen. Liste wechselt die Bildseite ab (Start: links). */

.content_gutschein_bundles_wrapper {
    display: block;
}

.content_gutschein_kachel {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 20px;
    /* Bundle-Farben aus dem Backend (Inline-CSS-Variablen am Container) */
    background-color: var(--gb-bg, transparent);
    color: var(--gb-text, inherit);
}

.content_gutschein_kachel_inner {
    max-width: 1080px;
    margin: 0 auto;
    /*display: flex;*/
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.content_gutschein_kachel_bild {
    flex: 0 0 calc(50% - 15px);
    min-width: 0;
    overflow: hidden;
    order: 0;
    position: relative;
    container-type: inline-size;
    /* Ratio der SVG-Buehne (Design::SVG_CANVAS, ueber --v-bild-ratio vom
       Controller gesetzt) — Foto-Bundles bekommen identische Bildhoehen. */
    aspect-ratio: var(--v-bild-ratio, 1295/1215);
}

/* Action-Tag (aktion_tag): Ecke ueber dem Bild/SVG, im Winkel der
   Baukasten-Karte (-34deg, statischer Wert wie in svg_instance_html).
   Groesse skaliert mit der Bildbreite ueber Container-Abmessungen (cqw);
   die px-Werte davor sind das Fallback fuer Browser ohne cqw-Unterstützung.
   Farblich an die Bundle-Buttons gekoppelt (Sidebar-Farbe, sonst Koralle). */
.content_gutschein_kachel_bild .action-tag,
.content_gutschein_detail_bild .action-tag {
    position: absolute;
    /* Action-Tag: Band im Kartenwinkel (-34deg), das KOMPLETT innerhalb des
     * Bildes bleibt — der Bildcontainer schneidet sonst alles ab, was ueber
     * die obere Kante ragt. Verankert am oberen linken Rand: linke Bandecke
     * bei ~26cqw hoehe, steigt nach rechts um ~27cqw (sin34 * Bandlaenge bei
     * typischer Tag-Laenge) — parallel zur diagonalen Karte, gut lesbar ueber
     * Pinsel- oder Fotiflaeche. Groessen (Schrift, Padding, Position) sind
     * als cqw an die Bildbreite gekoppelt; px-Werte sind das Fallback fuer
     * Browser ohne Container-Query-Einheiten. */
    top: 190px;
    left: -20px;
    padding: 5px 18px;
    font-size: 13px;
    top: 26cqw;
    left: -3cqw;
    padding: 1.4cqw 5cqw;
    font-size: 3.2cqw;
    background-color: var(--gb-button-bg, #e53212);
    color: var(--gb-button-text, #fff);
    font-size: 13px;
    font-size: 3.2cqw;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transform: rotate(-34deg);
    transform-origin: top left;
}

.content_gutschein_kachel_bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content_gutschein_kachel_text {
    flex: 0 0 calc(50% - 15px);
    min-width: 0;
    order: 1;
}

.content_gutschein_kachel.bild_rechts .content_gutschein_kachel_bild {
    order: 2;
}

.content_gutschein_kachel.bild_rechts .content_gutschein_kachel_text {
    order: 1;
}

.content_gutschein_kachel_titel {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--gb-headline, inherit);
}

/* Wort-Cascade der Ueberschrift (Muster header-gepfaded): je Wort eine Zeile,
   Einrueckung +0.5rem/-0.25rem (aus PHP, gutschein::headline_cascade_html);
   white-space:nowrap -> jedes Wort bleibt eine Zeile, kein Umbruch innerhalb
   eines Wortes */
.content_gutschein_kachel_titel .headline-word,
.content_gutschein_detail_ueberschrift .headline-word {

}

/* letztes Wort mit eigener Farbe (konfiguration.farben.headline_last) */
.content_gutschein_kachel_titel .headline-word-last,
.content_gutschein_detail_ueberschrift .headline-word-last {
    color: var(--gb-headline-last, inherit);
}

.content_gutschein_kachel_subheadline {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--gb-subheadline, inherit);
}

.content_gutschein_kachel_beschreibung {
    margin: 8px 0;
}

.content_gutschein_kachel_preis {
    font-weight: bold;
    margin-top: 8px;
}

.content_gutschein_kachel_aktion {
    margin-top: 12px;
}

.content_gutschein_kachel_hinweis {
    font-size: 0.85rem;
    font-style: italic;
}

.content_gutschein_kachel.nicht_buchbar {
    opacity: 0.6;
}

/* SVG-Pinsel-Grafik (ersetzt das Bild, wenn im Bundle aktiv).
   Server-Rendering: Sprite (display:none) + Instanz-SVG mit use-Referenz,
   Text lokal — kein JS noetig. */
.gutschein_bundle_svg {
    min-width: 0;
}

.gutschein_bundle_svg .gutschein_voucher_svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Buttons: Projekt-Klasse .button + optionale Bundle-Farben */
.gutschein_buchen_btn,
.gutschein_in_warenkorb_btn,
.gutschein_einloesen_btn {
    background-color: var(--gb-button-bg, #e53212);
    color: var(--gb-button-text, #fff);
}

/* Buchungs-Panel (öffnet sich unter dem Buchen-Button) */
.gutschein_booking_panel {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: #fafafa;
    color: #333;
    min-width: 0;
}

.gutschein_booking_products {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.gutschein_booking_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.gutschein_booking_label {
    min-width: 0;
}

.gutschein_booking_preis {
    white-space: nowrap;
    font-weight: bold;
}

.gutschein_booking_row_input .gutschein_wert_input {
    width: 110px;
    padding: 6px 8px;
}

/* Wert-Validierung: invalider Input (min/max/Step) wird rot markiert, der
   "In den Warenkorb"-Button ist gesperrt (gutschein_wert_pruefen in gutschein.js) */
.gutschein_wert_input.invalid {
    border-color: #e53212;
    outline: 1px solid #e53212;
}
.gutschein_wert_hint {
    display: block;
    color: #e53212;
    font-size: 0.8rem;
    margin-top: 4px;
}
.gutschein_in_warenkorb_btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.gutschein_booking_summe {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-top: 1px solid var(--border, #ddd);
    padding-top: 10px;
    margin-bottom: 12px;
}

/* Detail (Einzel-Element: gleiches Band-Layout, Bildposition per Stylesidebar) */
.content_gutschein_detail {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 20px;
    background-color: var(--gb-bg, transparent);
    color: var(--gb-text, inherit);
}

.content_gutschein_detail_inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}

/* Standard: Bild ueber dem Text (gestapelt). Nur die Stylesidebar-Option
   "gutschein_bild_rechts" aktiviert das fruehere Zweispalten-Layout. */
.content_gutschein_detail_bild {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    order: 0;
    position: relative;
    container-type: inline-size;
    aspect-ratio: var(--v-bild-ratio, 1295/1215);
}

.content_gutschein_detail_bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content_gutschein_detail_text {
    flex: 1 1 100%;
    min-width: 0;
    order: 1;
}

.content_gutschein_detail.bild_rechts .content_gutschein_detail_bild {
    flex: 0 0 calc(50% - 15px);
    order: 2;
}

.content_gutschein_detail.bild_rechts .content_gutschein_detail_text {
    flex: 0 0 calc(50% - 15px);
    order: 1;
}

.content_gutschein_detail_ueberschrift {
    font-size: 1.8rem;
    color: var(--gb-headline, inherit);
}

.content_gutschein_detail_subheadline {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: var(--gb-subheadline, inherit);
}

.content_gutschein_detail_preis {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.content_gutschein_detail_aktion {
    margin-top: 15px;
}

.content_gutschein_detail_hinweis {
    font-style: italic;
    margin-top: 10px;
}

/* Direkt-Panel-Action (gutschein/buchung) */
.content_gutschein_buchung_wrapper {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--gb-bg, transparent);
    color: var(--gb-text, inherit);
}

.content_gutschein_buchung_wrapper .gutschein_booking_panel {
    margin-top: 0;
    background: var(--gb-bg, #fafafa);
    color: var(--gb-text, #333);
}

.content_gutschein_buchung_hinweis {
    font-size: 0.85rem;
    font-style: italic;
}

/* Kleiner Viewport: untereinander, Bild immer oben */
@media (max-width: 768px) {
    .content_gutschein_kachel_bild,
    .content_gutschein_kachel_text,
    .content_gutschein_detail_bild,
    .content_gutschein_detail_text {
        flex: 1 1 100%;
    }

    .content_gutschein_kachel.bild_rechts .content_gutschein_kachel_bild,
    .content_gutschein_detail.bild_rechts .content_gutschein_detail_bild {
        order: 0;
    }

    .content_gutschein_kachel.bild_rechts .content_gutschein_kachel_text,
    .content_gutschein_detail.bild_rechts .content_gutschein_detail_text {
        order: 1;
    }
}

/* Einlösen: kein breiter Wrapper mehr — die item-Karte läuft in der
   vollen Body-Breite. Die Download-Seite behält ihren zentrierten
   Schmal-Layout (eigene Regel, da die gemeinsame Wrapper-Regel wegfiel). */

/* Against Überlauf: item-card is a grid with implicit columns. Without a hard
   specification, the column sizes according to the content's max-content —
   the five input fields bring about 210px field width from their default size
   attribute, so the details area becomes over 1100px wide and the code
   group appears to run out of the card. Therefore: column is fixed
   minmax(0, 1fr), details may shrink completely. */
.item-card.gutschein_einloesen_card {
    grid-template-columns: minmax(0, 1fr);
}
.gutschein_einloesen_card .details {
    min-width: 0;
    max-width: 100%;
}

.content_gutschein_download_wrapper {
    max-width: 560px;
    margin: 0 auto;
}

.content_gutschein_einloesen_form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 15px 0;
}

.content_gutschein_einloesen_form label {
    flex: 0 0 100%;
    font-weight: bold;
}

.content_gutschein_einloesen_form .input_field {
    flex: 1 1 250px;
    min-width: 0;
}

.content_gutschein_einloesen_status {
    padding: 10px 14px;
    border-radius: 4px;
    margin: 10px 0;
}

.content_gutschein_einloesen_status.erfolg {
    background: #e6f4e6;
    border: 1px solid #4b4;
}

.content_gutschein_einloesen_status.fehler {
    background: #f9e6e6;
    border: 1px solid #d66;
}

.content_gutschein_einloesen_status.pending {
    background: #eef3f8;
    border: 1px solid #7a94ad;
}

.content_gutschein_einloesen_form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}
/* Code-Eingabe: alle Gruppen in einer Zeile nebeneinander. Die
   spezifischeren Selektoren gewinnen gegen spaeter geladene
   Global-Regeln der Site (.input_field Breite/Display), damit die
   Felder nicht auf 100% springen und untereinander fallen. */
/* Code-Eingabe: die Gruppe wirkt wie EIN Input — uebernommenes Style der
   Login-Inputs (.login-form input: 1px #F5F5F5-Rahmen, Fuellung #F5F5F5,
   0.75rem/1rem Innenabstand, 50px Radius). Die Unterfelder selbst sind
   randlos, transparent und ohne Schatten. */
.gutschein_code_gruppen {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #F5F5F5;
    background-color: #F5F5F5;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    font-size: 1rem;
}
.gutschein_code_gruppen:focus-within {
    border-color: #e2dedb;
}
.content_gutschein_einloesen_form .gutschein_code_gruppe,
.content_gutschein_einloesen_form .gutschein_code_gruppe.input_field {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    display: block;
    box-sizing: border-box;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: inherit;
}
.content_gutschein_einloesen_form .gutschein_code_trenner {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: 0.5;
}
.gutschein_weiterer_code a {
    font-weight: 600;
}
.content_gutschein_einloesen_inhalt {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f4f1ef;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content_gutschein_einloesen_ueberschrift {
    font-weight: 700;
}
.content_gutschein_einloesen_bezeichnung {
    font-size: 1.1rem;
}
.content_gutschein_einloesen_zeilen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.9;
}
.content_gutschein_einloesen_ergebnis {
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f4f1ef;
}
.content_gutschein_einloesen_ergebnis.erfolg {
    background: #e8f5e9;
    color: #1b5e20;
}
.content_gutschein_einloesen_ergebnis.fehler {
    background: #fdecea;
    color: #b3261e;
}
.content_gutschein_einloesen_ergebnis.pending {
    background: #fff4e0;
    color: #7a4f01;
}
.content_gutschein_einloesen_restwert {
    font-weight: 600;
    margin-bottom: 8px;
}
.content_gutschein_einloesen_betrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.content_gutschein_einloesen_betrag input {
    width: 120px;
}
.content_gutschein_einloesen_abozeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.content_gutschein_einloesen_abozeile .abo_name {
    font-weight: 600;
}
.content_gutschein_einloesen_abo .abo_hinweis {
    font-size: 0.85rem;
    opacity: 0.8;
}
.gutschein_abo_wk_status {
    margin-top: 6px;
    color: #b3261e;
}
.content_gutschein_einloesen_events {
    margin-top: 10px;
}
.content_gutschein_einloesen_angewendet {
    margin: 6px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
    font-weight: 600;
}

.content_gutschein_einloesen_hinweis {
    font-size: 0.85rem;
}

/* Gutschein-Download: Kopfzeile (Bezeichnung + Wert) und PDF-Button.
   Die Gestaltung selbst (Farben, Text, Layout, Vorschau) gehoert zum
   Design-Editor und liegt in design_editor.css. */
.content_gutschein_download_daten {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin: 16px 0;
}

.content_gutschein_download_name {
    font-size: 1.1rem;
    font-weight: bold;
}

.content_gutschein_download_wert {
    font-size: 1.4rem;
    font-weight: bold;
    color: #c11f1f;
}

/* Download-Seite: Der Gestaltungs-Editor braucht Breite (Vorschau im A4-Format),
   die Einloesenseite bleibt bei der schmalen Spur. */
.content_gutschein_download_wrapper {
    max-width: none;
}

.content_gutschein_download_wrapper .content_gutschein_einloesen_hinweis {
    max-width: 70ch;
}