/* 24ideen · Design C „Moment“ (Eugens Wahl 15.10.2026): echte Momente statt Deko – Hände, die Türchen öffnen.
   Bilder: Google Nano Banana über OpenRouter (Kosten in bild-gemini/protokoll.jsonl), aufbereitet von werkzeug/fotos-web.py.
   Liegt über app.css, seite.css, thema.css und thema-a2.css (wird zuletzt geladen). Schriften, Farben und Formen bleiben wie bisher.
   Kontraste: Text liegt nie direkt auf einem Foto – außer im Schlussband, dort über einer dunklen Verlaufsfläche (nachgemessen). */

/* ---------- Grundbaustein ---------- */
.foto { display: block; width: 100%; height: auto; max-width: none; background: #E9DFD0; object-fit: cover; }
.option__foto img, .plan__foto, .artikel-foto, .kalender-foto { max-width: 100%; }
picture { display: block; }

/* ---------- Held (Startseite + Ideen-Seiten) ---------- */
/* Das Foto ersetzt den Eckzweig: keine Deko-Ebene, kein Funkeln über dem Kopf */
.held--foto > .deko, .held--foto > .funkeln { display: none; }
.held__foto { position: relative; margin: 0; overflow: hidden; background: #E9DFD0; }
.held__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 979px) {
  /* Handy/Tablet: Foto randlos direkt unter der Kopfleiste, darunter Text, Knöpfe und Beispielplan */
  [data-deko] .held.held--foto, .held.held--foto { padding-top: 0; }
  .held--foto .inhalt { row-gap: 30px; }
  .held--foto .held__bild { display: contents; }
  .held--foto .held__foto { order: -1; margin: 0 calc(-1 * var(--rand)); aspect-ratio: 3 / 2; border-radius: 0 0 30px 30px;
    box-shadow: 0 22px 40px -30px rgba(42, 33, 25, .6); }
  .held--foto .held__text { order: 0; }
  .held--foto .planbild { order: 1; width: 100%; max-width: 560px; justify-self: center; }
  .held--foto .planbild__karte { order: 2; margin-top: -14px; }
  .held--foto h1 { margin-top: 12px; }
}
@media (min-width: 980px) {
  [data-deko] .held.held--foto { padding-top: clamp(40px, 5vw, 72px); }
  [data-deko] .held--foto .held__bild { position: relative; margin-top: 0; }
  .held--foto .held__foto { aspect-ratio: 4 / 5; border-radius: 30px; box-shadow: 0 50px 90px -46px rgba(42, 33, 25, .55), 0 0 0 1px rgba(42, 33, 25, .05); }
  /* Der Beispielplan steht gleich darunter bei „Beispiele“ – im Kopf zählt das Foto; die Höhepunkt-Karte schwebt über seiner Ecke */
  .held--foto .planbild { display: none; }
  /* hängt unter der linken unteren Fotoecke – verdeckt weder Hände noch Tütennummer */
  .held--foto .planbild__karte { position: absolute; left: -48px; bottom: -58px; width: min(78%, 310px); margin: 0; }
  .held--klein.held--foto .held__foto { aspect-ratio: 5 / 5.6; }
}

/* ---------- So geht’s: drei Fotos ---------- */
.schritt--foto { --pad: clamp(24px, 3vw, 34px); overflow: hidden; padding-top: 0; }
.schritt__foto { width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); aspect-ratio: 3 / 2; }
.schritt--foto .schritt__zahl { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin: -40px 0 0;
  border-radius: 50%; background: var(--flaeche); font-size: 1.875rem; box-shadow: 0 10px 22px -12px rgba(42, 33, 25, .5); }
[data-thema] .schritt.schritt--foto::after { display: none; }   /* kein Mini-Zweig über dem Foto */

/* ---------- Für wen: Foto-Karten ---------- */
.zielgruppe--foto { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; min-height: 104px; padding: 10px 18px 10px 10px; overflow: hidden; }
.zielgruppe--foto picture { width: 84px; height: 84px; overflow: hidden; border-radius: 18px; }
.zielgruppe__foto { width: 100%; height: 100%; transition: transform 600ms var(--kurve); }
.zielgruppe--foto:hover .zielgruppe__foto { transform: scale(1.05); }
@media (min-width: 980px) {
  .zielgruppen--foto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .zielgruppe--foto { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: end; gap: 16px 10px; padding: 10px 18px 20px 10px; }
  .zielgruppe--foto picture { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; }
  .zielgruppe--foto > span { padding-left: 10px; }
}

/* ---------- Beispiele: Foto oben in der Karte ---------- */
.bsp--foto { --pad: clamp(22px, 2.6vw, 28px); overflow: hidden; }
.bsp__foto { width: calc(100% + 2 * var(--pad)); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; aspect-ratio: 21 / 9; }
[data-thema] .bsp.bsp--foto { outline-offset: -1px; outline-color: rgba(201, 160, 78, .35); }

/* ---------- Kalender-Abschnitt ---------- */
.kalender-foto { aspect-ratio: 3 / 2; margin-bottom: 26px; border-radius: 26px; box-shadow: 0 36px 70px -40px rgba(42, 33, 25, .55); }
@media (min-width: 980px) {
  .kalender-kopf .kalender-foto { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 clamp(32px, 5vw, 56px); }
}

/* ---------- Schlussband: Türchen 24 am Heiligabend ---------- */
.band--foto { position: relative; isolation: isolate; overflow: hidden; }
.band--foto picture { display: contents; }
.band__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 50%; }
.band--foto .inhalt { position: relative; z-index: 2; }
@media (max-width: 979px) {
  /* Handy: Foto als Bild oben, unten weich in die Bandfarbe auslaufend; Text darunter auf ruhiger Fläche */
  .band--dunkel.band--foto { padding-top: 0; }
  .band__foto { margin-bottom: 26px; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
}
@media (min-width: 980px) {
  /* Desktop: Foto füllt das Band, Text links auf dem dunklen, unscharfen Teil (plus Verlauf für sicheren Kontrast) */
  .band__foto { position: absolute; inset: 0; z-index: 0; height: 100%; aspect-ratio: auto; object-position: 72% 50%; }
  .band--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(14, 22, 17, .9) 0%, rgba(14, 22, 17, .78) 38%, rgba(14, 22, 17, .2) 66%, rgba(14, 22, 17, 0) 100%); }
  .band--dunkel.band--foto .inhalt { justify-items: start; text-align: left; min-height: 360px; align-content: center; }
  .band--dunkel.band--foto h2 { max-width: 12ch; }   /* bleibt auf dem dunklen Teil, nie über der hellen Tüte */
  .band--dunkel.band--foto p { max-width: 30ch; }
}
.band--foto .schnee { z-index: 1; }

/* ---------- Ratgeber ---------- */
.artikel-foto { aspect-ratio: 21 / 9; margin: 0 0 26px; border-radius: 24px; box-shadow: 0 30px 60px -40px rgba(42, 33, 25, .55); }

/* ---------- Planer: Fotos in den Antworten, Stimmungsbild über dem Plan ---------- */
.option__foto { width: 58px; height: 58px; overflow: hidden; border-radius: 16px; background: #E9DFD0; box-shadow: 0 0 0 1px rgba(42, 33, 25, .06); }
.option__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.option:has(.option__foto) { padding-left: 10px; min-height: 80px; }
.plan__foto { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 22px; background: #E9DFD0; box-shadow: 0 26px 50px -34px rgba(42, 33, 25, .6); }
@media (min-width: 980px) { .plan__foto { aspect-ratio: 5 / 2; border-radius: 20px; } }

/* ---------- Bewegung & Druck ---------- */
@media (prefers-reduced-motion: reduce) { .zielgruppe__foto { transition: none; } .zielgruppe--foto:hover .zielgruppe__foto { transform: none; } }
@media print { .foto, .held__foto, .band__foto, .plan__foto, .option__foto { display: none !important; } }