/* ====================================================================
   wishbox.css — die Wunschliste als Karten
   Angelegt 04.10.2026

   WOFUER

   /wunschbox/<Name> ist die Seite, die Deine Besucher sehen und die
   weitergeschickt wird — das Schaufenster. Bisher war sie eine Tabelle
   mit drei Spalten: links immer dasselbe Geschenkbild, in der Mitte
   Name, Beschreibung und "zum Wunsch *klick*", rechts ein winziges
   Ankreuzfeld mit dem Wort "erfuellen".

   Am Handy wurde daraus eine sehr lange, schmale Tabelle: fuenf
   Wuensche ergaben 3836 Pixel Hoehe (gemessen).

   Jetzt steht jeder Wunsch auf einer eigenen Karte. Am Handy
   untereinander, ab Tablet zweispaltig. Das Abhaken ist eine richtige
   Schaltflaeche statt eines 13-Pixel-Kaestchens.

   WICHTIG

   Diese Datei ist THEMENNEUTRAL. Sie bringt Aufbau, Abstaende und
   Groessen — die Farben kommen aus dem jeweiligen Theme. Dadurch sieht
   die Karte auch in "Klassisch" ordentlich aus, und ein neues Theme
   muss nur wenige Werte setzen.

   Die Farbwerte unten sind Rueckfallwerte fuer den Fall, dass gar kein
   Theme geladen ist.
   ==================================================================== */

:root {
    --wb-karte-hg:        #ffffff;
    --wb-karte-rand:      #d8e6e8;
    --wb-karte-radius:    10px;
    --wb-karte-schatten:  0 1px 2px rgba(0, 40, 50, .06);
    --wb-text:            #16323a;
    --wb-text-leise:      #5b7076;
    --wb-akzent:          #00b4cc;
    --wb-aktion:          #ff9500;
    --wb-aktion-text:     #ffffff;
    --wb-erfuellt:        #3f9b52;
    --wb-abstand:         18px;
}


/* --- Kopf der Box ------------------------------------------------- */

.wbKopf {
    margin: 0 0 var(--wb-abstand);
    padding: 0 0 14px;
    border-bottom: 1px solid var(--wb-karte-rand);
}

.wbTitel {
    font-size: 1.6em;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--wb-text);
}

.wbUnter {
    margin: 0;
    font-size: .95em;
    color: var(--wb-text-leise);
}


/* --- Die Liste ----------------------------------------------------- */

.wbListe {
    list-style: none;
    margin: 0 0 var(--wb-abstand);
    padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;          /* Handy: eine Spalte */
}

/* Zwei Spalten erst, wenn WIRKLICH Platz ist.
   Der Inhaltsbereich ist schmaler als das Fenster - bei 1280 Pixel
   Fensterbreite sind es 693 Pixel. Mit zwei Spalten blieben fuer den
   Text 41 Pixel uebrig, und jedes Wort stand einzeln untereinander.
   Im Browser gemessen, dann die Schwelle hochgesetzt. */
@media (min-width: 1100px) {
    .wbListe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* --- Eine Karte ---------------------------------------------------- */

.wbKarte {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--wb-karte-hg);
    border: 1px solid var(--wb-karte-rand);
    border-radius: var(--wb-karte-radius);
    box-shadow: var(--wb-karte-schatten);
    padding: 14px;
}

/* Bild und Text nebeneinander, die Schaltflaeche darunter.
   Zuerst stand die Schaltflaeche DANEBEN - sie nahm 116 Pixel, das
   Bild 64, und fuer den Text blieben 41. Jedes Wort stand einzeln
   untereinander. */
.wbOben {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.wbBild {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 180, 204, .07);
}

.wbBild img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

.wbText {
    flex: 1 1 auto;
    min-width: 0;          /* sonst sprengt langer Text das Raster */
}

.wbName {
    /* Nur hier umbrechen duerfen - und auch nur, wenn ein einzelnes
       Wort sonst herausragen wuerde. */
    overflow-wrap: break-word;
    font-size: 1.12em;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--wb-text);
}

.wbBeschreibung {
    margin: 0 0 8px;
    font-size: .95em;
    line-height: 1.45;
    color: var(--wb-text-leise);
}

.wbLink {
    display: inline-block;
    font-size: .92em;
    font-weight: 600;
    text-decoration: none;
    color: var(--wb-akzent);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.wbLink:hover,
.wbLink:focus {
    color: var(--wb-text);
}


/* --- Abhaken ------------------------------------------------------- */

.wbAktion {
    margin-top: auto;        /* bei ungleich hohen Karten nach unten */
    align-self: flex-start;
}

/* Das ganze Feld ist anklickbar, nicht nur das Kaestchen.
   44 Pixel Mindesthoehe, damit es am Handy zu treffen ist. */
.wbHaken {
    display: inline-flex !important;   /* schlaegt form label{display:block} */
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 10px;
    min-height: 44px;
    border: 1px solid var(--wb-karte-rand);
    border-radius: 8px;
    cursor: pointer;
    font-size: .9em;
    line-height: 1.2;
    color: var(--wb-text-leise);
    white-space: nowrap;
    background: transparent;
}

.wbHaken:hover {
    border-color: var(--wb-akzent);
    color: var(--wb-text);
}

.wbHaken input {
    margin: 0;
    flex: 0 0 auto;
}

/* Angekreuzt: deutlich sichtbar, bevor abgeschickt wird. */
.wbHaken input:checked ~ .wbHakenText {
    color: var(--wb-aktion);
    font-weight: 700;
}


/* --- Schon erfuellt ------------------------------------------------ */

.wbKarte.istErfuellt {
    opacity: .72;
}

.wbKarte.istErfuellt .wbName,
.wbKarte.istErfuellt .wbBeschreibung {
    text-decoration: line-through;
}

.wbErfuellt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85em;
    font-weight: 600;
    color: var(--wb-erfuellt);
    white-space: nowrap;
}

.wbErfuellt img {
    width: 18px;
    height: auto;
}


/* --- Hauptaktion --------------------------------------------------- */

.wbAbsenden {
    font-size: 1em;
    font-weight: 700;
    padding: 13px 22px;
    min-height: 48px;
    border: 0;
    border-radius: 9px;
    background: var(--wb-aktion);
    color: var(--wb-aktion-text);
    cursor: pointer;
}

.wbAbsenden:hover {
    filter: brightness(.94);
}

/* Solange nichts angekreuzt ist, ist der Knopf zurueckgenommen.
   Umgeschaltet per JavaScript; ohne JavaScript bleibt er normal. */
.wbAbsenden[data-leer="1"] {
    background: transparent;
    color: var(--wb-text-leise);
    border: 1px solid var(--wb-karte-rand);
}

.wbFuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.wbAufrufe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88em;
    color: var(--wb-text-leise);
}

.wbAufrufe img {
    width: 16px;
    height: auto;
}

.wbLeer {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--wb-text-leise);
}

.wbFertig {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--wb-erfuellt);
}

.wbFertig img {
    width: 26px;
    height: auto;
}