/* 24ideen · A+ „Tannenzweig, überarbeitet“ (Eugen 10.10.: „Das Grunddesign mit dem Tannenzweig bitte weiter überarbeiten, nicht völlig neu ansetzen“).
   Gleiche Farben, Schriften und Formen wie A (live). Dazu nur Details, die „clean“ aufbrechen:
   · Papier-Struktur (feines Korn) auf allen Flächen, Tannenzweig im Kopf freigestellt (Struktur läuft dahinter weiter)
   · kleiner Tannenzweig als Ornament: vor jeder Frage, vor jeder Abschnitts-Überschrift, auf dem Kalender
   · Fortschritt mit goldenem Stern an der Spitze, feine Goldlinie unter dem Kopf
   · der Kalender als gerahmte Karte, Türchen mit Rahmen und goldenem Knauf, Gutscheine gestrichelt wie Coupons,
     Türchen 24 mit roter Schleife · Wochen in Handschrift
   Kontraste nachgerechnet (WCAG 2.2): Text ≥ 4,5 : 1, Bedienelemente ≥ 3 : 1. Bewegung abschaltbar. */

@font-face { font-family: "Caveat"; src: url("/a/thema/caveat-latin.d5070a30b0.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

[data-thema="tanne2"] {
  --held-grund: var(--tx-korn) 0 0 / 256px, #FBF7ED; --kopf-grund: rgba(251, 247, 237, .95); --deko-w: min(58vw, 660px);
  --akzent: #1F3D2F; --akzent-zart: #E5EDE7; --gewaehlt: #F3F7F4; --kicker: #9E2B25; --marke: #9E2B25;
  --haupt: #1F3D2F; --haupt-hover: #2C5240; --haupt-schatten: rgba(31, 61, 47, .8); --band: #1F3D2F; --band-text: #C9D8CE;
  --kristall: #8FA99A; --kristall-seite: #A9BDB0;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --tx-korn: url("/a/thema/korn.36ec12c84d.webp");
  --zweig: url("/a/thema/zweig.e6d33654e3.webp"); --schleife: url("/a/thema/schleife.3169566a9d.webp");
  --papier-weiss: #FFFDF8; --gold-linie: rgba(201, 160, 78, .55); --gold: #E6B34E;
}

/* ---------- Papier ---------- */
[data-thema="tanne2"], [data-thema="tanne2"] body { background: var(--tx-korn) 0 0 / 256px, var(--grund); }
[data-thema="tanne2"] .band--weiss { background: var(--tx-korn) 0 0 / 256px, var(--papier-weiss); }
[data-thema="tanne2"] .schnee-schalter[aria-pressed="false"]::after { box-shadow: 0 0 0 2px #FBF7ED; }
/* Eckzweig freigestellt: kein Ausblenden mehr nötig, schaukelt sanft um die obere rechte Ecke */
[data-thema="tanne2"] .deko--ecke img { -webkit-mask-image: none; mask-image: none; transform-origin: 100% 0; }

/* ---------- Kopf & Fortschritt ---------- */
[data-thema="tanne2"] :is(.kopf, .skopf) { box-shadow: 0 1px 0 rgba(201, 160, 78, .38); }
[data-thema="tanne2"] .fortschritt { overflow: visible; overflow-x: clip; overflow-clip-margin: 0px; }   /* Stern darf oben/unten überstehen, aber nie rechts aus dem Bildschirm (Audit 16.10.) */
[data-thema="tanne2"] .fortschritt__balken { position: relative; }
[data-thema="tanne2"] .fortschritt__balken::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---------- Tannenzweig-Ornamente ---------- */
[data-thema="tanne2"] .screen .frage::before { content: ""; display: block; width: 96px; aspect-ratio: 640 / 189; margin: -4px 0 0 -6px;
  background: var(--zweig) left center / contain no-repeat; }
[data-thema="tanne2"] .laden .frage::before { margin: 0 auto; }
[data-thema="tanne2"] :is(.kicker, .plan__kicker)::before { content: ""; display: inline-block; width: 36px; aspect-ratio: 640 / 189; margin-right: 9px;
  vertical-align: -3px; background: var(--zweig) center / contain no-repeat; }

/* ---------- Startseite: Beispielplan wie der Kalender gerahmt, Schritte mit Zweig ---------- */
[data-thema="tanne2"] .planbild { background: var(--tx-korn) 0 0 / 256px, var(--papier-weiss); outline: 1px solid var(--gold-linie); outline-offset: -8px; }
[data-thema="tanne2"] .planbild::before { content: ""; position: absolute; right: 18px; top: -20px; width: 104px; aspect-ratio: 640 / 189; z-index: 2;
  background: var(--zweig) center / contain no-repeat; pointer-events: none; }
[data-thema="tanne2"] .bsp { position: relative; background: var(--tx-korn) 0 0 / 256px, var(--papier-weiss); outline: 1px solid var(--gold-linie); outline-offset: -8px; }
[data-thema="tanne2"] .schritt { position: relative; background: var(--tx-korn) 0 0 / 256px, #F3EDE2; }
[data-thema="tanne2"] .schritt::after { content: ""; position: absolute; right: 18px; top: 22px; width: 64px; aspect-ratio: 640 / 189; opacity: .9;
  background: var(--zweig) center / contain no-repeat; pointer-events: none; }
[data-thema="tanne2"] .set { background: var(--tx-korn) 0 0 / 256px, var(--papier-weiss); }
[data-thema="tanne2"] .band--dunkel { background: var(--tx-korn) 0 0 / 256px, var(--band); }

/* ---------- Icon-Kreise = Christbaumkugeln (Kappe + Öse) ---------- */
[data-thema="tanne2"] :is(.option__icon, .korb__icon) { position: relative; overflow: visible;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, #EEF4EF 36%, #D3E1D6 100%);
  box-shadow: inset 0 -3px 5px rgba(31, 61, 47, .1), 0 3px 6px -3px rgba(31, 61, 47, .35); }
[data-thema="tanne2"] :is(.option__icon, .korb__icon)::before { content: ""; position: absolute; left: 50%; top: -5px; width: 13px; height: 7px; margin-left: -6.5px;
  border-radius: 3px 3px 1px 1px; background: linear-gradient(#F4CD6C, #C68E2C); box-shadow: 0 1px 1px rgba(60, 40, 10, .3); }
[data-thema="tanne2"] :is(.option__icon, .korb__icon)::after { content: ""; position: absolute; left: 50%; top: -11px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C68E2C; clip-path: inset(0 0 45% 0); }
[data-thema="tanne2"] .kachel { padding-top: 22px; }
[data-thema="tanne2"] .kachel > .icon { width: 46px; height: 46px; padding: 9px; border-radius: 50%; overflow: visible;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, #EEF4EF 36%, #D3E1D6 100%);
  box-shadow: inset 0 -3px 5px rgba(31, 61, 47, .1), 0 3px 6px -3px rgba(31, 61, 47, .35); }
[data-thema="tanne2"] .kachel::before { content: ""; position: absolute; left: calc(16px + 23px - 6.5px); top: 17px; width: 13px; height: 7px;
  border-radius: 3px 3px 1px 1px; background: linear-gradient(#F4CD6C, #C68E2C); box-shadow: 0 1px 1px rgba(60, 40, 10, .3); }
[data-thema="tanne2"] .kachel::after { content: ""; position: absolute; left: calc(16px + 23px - 4px); top: 11px; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #C68E2C; clip-path: inset(0 0 45% 0); }
[data-thema="tanne2"] .kachel:has(input:checked) > .icon { background: radial-gradient(circle at 34% 30%, #FFFFFF 0 7%, #F6D9D5 36%, #E8B9B2 100%); color: #7E1F1A; }

/* ---------- Der Kalender: gerahmte Karte, echte Türchen ---------- */
[data-thema="tanne2"] .plan .raster { position: relative; margin-top: 62px; padding: 34px clamp(10px, 3vw, 16px) clamp(10px, 3vw, 16px); border-radius: 22px;
  background: var(--tx-korn) 0 0 / 256px, var(--papier-weiss);
  box-shadow: 0 0 0 1px rgba(31, 61, 47, .07), 0 28px 46px -30px rgba(42, 33, 25, .55);
  outline: 1px solid var(--gold-linie); outline-offset: -7px; }
/* Girlande über dem Kalender (Eugen 10.10.: neue, natürlichere Girlande statt des dünnen Zweigs) – Seitenverhältnis 640 × 189 */
[data-thema="tanne2"] .plan .raster::before { content: ""; position: absolute; left: 50%; top: -58px; width: min(74%, 330px); aspect-ratio: 640 / 189;
  transform: translateX(-50%); background: var(--zweig) center / contain no-repeat; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 6px 6px rgba(42, 33, 25, .18)); }
[data-thema="tanne2"] .tuer { background: var(--tx-korn) 0 0 / 128px, var(--papier-weiss);
  box-shadow: 0 1px 2px rgba(42, 33, 25, .16), 0 7px 12px -9px rgba(42, 33, 25, .4);
  outline: 1px solid rgba(31, 61, 47, .2); outline-offset: -4px; }
[data-thema="tanne2"] .tuer:not(.tuer--hoehepunkt):not(.tuer--gutschein):not(.tuer--wunsch)::after { content: ""; position: absolute; right: 12%; top: 55%;
  width: 7.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F7DC95, #C68E2C 70%); box-shadow: 0 1px 1px rgba(60, 40, 10, .35); }
[data-thema="tanne2"] .raster--mini .tuer::after { display: none; }
[data-thema="tanne2"] .tuer--gutschein { background: var(--tx-korn) 0 0 / 128px, #EAF1EC; box-shadow: none; outline: 1.5px dashed rgba(31, 61, 47, .62); outline-offset: -4px; }
[data-thema="tanne2"] .tuer--hoehepunkt { background: var(--schleife) 50% 3% / 76% auto no-repeat, linear-gradient(160deg, #F4CD6C, #E6B34E 55%, #D09A31);
  outline: 1px solid rgba(122, 82, 10, .3); outline-offset: -4px; }
[data-thema="tanne2"] .raster:not(.raster--mini) .tuer--hoehepunkt .tuer__nr { padding-top: 34%; }
[data-thema="tanne2"] .raster:not(.raster--mini) .tuer--hoehepunkt .icon { display: none; }
[data-thema="tanne2"] .raster--mini .tuer--hoehepunkt { background: var(--schleife) 50% 0 / 80% auto no-repeat, linear-gradient(160deg, #F4CD6C, #E6B34E 55%, #D09A31); }
[data-thema="tanne2"] .raster--mini .tuer--hoehepunkt .tuer__nr { padding-top: 34%; }
[data-thema="tanne2"] .tuer--wunsch { outline: 1px solid rgba(230, 179, 78, .6); outline-offset: -4px; }
[data-thema="tanne2"] .legende i { background: var(--papier-weiss); box-shadow: inset 0 0 0 1px rgba(31, 61, 47, .4); }
[data-thema="tanne2"] .legende i.gut { background: #EAF1EC; box-shadow: none; outline: 1px dashed rgba(31, 61, 47, .7); outline-offset: -1px; }
[data-thema="tanne2"] .legende i.hoch { background: linear-gradient(160deg, #F4CD6C, #D09A31); box-shadow: none; }

/* ---------- Wochen & Karten ---------- */
[data-thema="tanne2"] .woche__titel { font: 700 1.625rem/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--kicker); padding-top: 9px; padding-bottom: 7px; }
[data-thema="tanne2"] .karte { box-shadow: 0 1px 2px rgba(42, 33, 25, .1), 0 12px 26px -20px rgba(42, 33, 25, .5); }
[data-thema="tanne2"] .karte__nr { background: var(--tx-korn) 0 0 / 128px, var(--papier-weiss); box-shadow: inset 0 0 0 1px rgba(31, 61, 47, .24); }
[data-thema="tanne2"] .karte--gutschein .karte__nr { background: #EAF1EC; box-shadow: none; outline: 1.5px dashed rgba(31, 61, 47, .62); outline-offset: -3px; }
[data-thema="tanne2"] .karte--hoehepunkt .karte__nr { background: linear-gradient(160deg, #F4CD6C, #E6B34E 55%, #D09A31); box-shadow: none; }
[data-thema="tanne2"] .karte--hoehepunkt { position: relative; background: linear-gradient(#FFF8E8, #FFFFFF 46%); box-shadow: 0 0 0 1.5px rgba(230, 179, 78, .7), 0 14px 30px -20px rgba(150, 100, 20, .6); }
[data-thema="tanne2"] .karte--hoehepunkt::after { content: ""; position: absolute; right: 12px; top: -16px; width: 84px; aspect-ratio: 640 / 189;
  background: var(--zweig) center / contain no-repeat; pointer-events: none; }
[data-thema="tanne2"] .planbild__karte .karte__nr { background: linear-gradient(160deg, #F4CD6C, #E6B34E 55%, #D09A31); }

/* ---------- Druck: keine Strukturen, keine Ornamente ---------- */
@media print {
  [data-thema="tanne2"], [data-thema="tanne2"] body { background: #fff !important; }
  [data-thema="tanne2"] .plan .raster { margin-top: 0; padding: 0; outline: 0; box-shadow: none; background: none; }
  [data-thema="tanne2"] .plan .raster::before, [data-thema="tanne2"] .karte--hoehepunkt::after, [data-thema="tanne2"] :is(.kicker, .plan__kicker)::before { display: none; }
}