/* Aktion auf der Website (20.10.2026, Marian: Fassung A „Schild am Logo“ + F „Band an der Karte“ aus /vorschau/aktion, dazu die Preisliste).
   Eingesetzt beim Ausliefern von src/einspielen.js, nur solange im Hub („Aktionen“) eine Aktion läuft; ohne Aktion greift hier nichts.
   Gestaltung übernommen aus entwuerfe/aktion/bauen.py (BASIS, A_CSS, F_CSS). Nur Saison-Tokens (--deep, --gold, --paper …): passt in jede Saison.
   Prüfung: entwuerfe/aktion/test-aktion-website.mjs */

/* ---------- gemeinsam: Lage des Logo-Schilds, Preisliste, Pendeln ---------- */
.hero { --tw: 116px; --tl: 16px; --tb: calc(32px + (var(--tw) - 26px) * 1.0408); }   /* Breite, links, Unterkante des Logo-Schilds (aus site.css gerechnet) */
@media (min-width: 760px) { .hero { --tw: clamp(170px, 18vw, 220px); --tl: 9%; --tb: calc(58px + (var(--tw) - 44px) * 1.0408); } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.akt-pill { display: inline-block; vertical-align: 2px; margin-left: 6px; font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: var(--deep); border-radius: 99px; padding: 4px 8px 3px; }
.acc li.akt .pr { display: inline-flex; gap: 8px; align-items: baseline; }
.acc li.akt .pr b { color: var(--deep); font-weight: 700; }
.acc li.akt .pr s { color: var(--muted); font-weight: 400; font-size: .92em; text-decoration-thickness: 1px; }
.acc li.akt { background: color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 8px; margin-inline: -8px; padding-inline: 8px; }
/* Pendeln: einmal einschwingen, dann kaum merklich wiegen; nur transform (Grafikkarte), bei „Bewegung reduzieren“ still */
@keyframes akt-ein { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 12% { opacity: 1; transform: translateY(0) rotate(6deg); } 32% { transform: rotate(-4.2deg); }
  52% { transform: rotate(2.6deg); } 72% { transform: rotate(-1.4deg); } 88% { transform: rotate(.6deg); } 100% { transform: rotate(0); } }
@keyframes akt-wiegen { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1.1deg); } 75% { transform: rotate(-1.1deg); } }
@keyframes akt-stups { 0% { transform: rotate(0); } 20% { transform: rotate(-3.5deg); } 45% { transform: rotate(2.2deg); } 70% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
.pendel { display: block; transform-origin: 50% 0; animation: akt-ein 2.8s cubic-bezier(.33,.66,.4,1) 1.5s both, akt-wiegen 8s ease-in-out 4.3s infinite; }
.stups { display: block; transform-origin: 50% 0; }
a:hover > .pendel > .stups, a:focus-visible > .pendel > .stups, .akt-a.zwei:hover > .pendel > .stups { animation: akt-stups 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .pendel, .stups { animation: none !important; } }

/* Klick aufs Schild oder Band: Sprung zum Posten in der Preisliste (Gruppe ist schon offen), dort kurz golden hervorgehoben */
.acc li.akt { scroll-margin-top: 28vh; }
.acc li.akt:target { animation: akt-hier 2.8s ease-out .35s 1 both; }
@keyframes akt-hier { 0%, 35% { box-shadow: 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold) 48%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; background: color-mix(in srgb, var(--gold) 22%, transparent); } }

/* ---------- A · Schild am Logo ---------- */
.akt-a { position: absolute; z-index: 3; left: calc(var(--tl) + var(--tw) / 2); top: calc(var(--tb) - 5px); width: calc(var(--tw) - 6px);
  margin-left: calc((var(--tw) - 6px) / -2); text-decoration: none; color: var(--ink); }
.akt-a .knopf { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -1px 0 0 -5.5px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fffbe8, var(--gold) 52%, var(--gold-d)); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.akt-a .kordel { display: block; width: 100%; height: 20px; overflow: visible; }
.akt-a .kordel path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.akt-a .karte { position: relative; display: grid; justify-items: center; text-align: center; gap: 3px; padding: 11px 8px 9px; background: var(--paper); border-radius: 9px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--gold) 70%, var(--gold-d)), 0 0 0 1px rgba(0,0,0,.06), 0 16px 26px -16px rgba(0,0,0,.65); }
.akt-a .karte::before, .akt-a .karte::after { content: ""; position: absolute; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-d); opacity: .55; }
.akt-a .karte::before { left: calc(9% - 2.5px); } .akt-a .karte::after { right: calc(9% - 2.5px); }   /* Ösen, an denen die Kordeln enden */
.akt-a .kopf { font: 700 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-d); display: flex; align-items: center; gap: 6px; }
.akt-a .kopf::before, .akt-a .kopf::after { content: ""; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 .5px var(--gold-d); }
.akt-a .zeile { display: grid; gap: 1px; justify-items: center; }
.akt-a .zeile + .zeile { border-top: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); padding-top: 4px; margin-top: 2px; }
.akt-a .name { font: 500 13.5px/1.05 var(--serif); color: var(--deep); }
.akt-a .preis { display: flex; align-items: baseline; gap: 5px; }
.akt-a .preis b { font: 600 21px/1 var(--serif); color: var(--deep); }
.akt-a .preis s { font-size: 11px; color: var(--muted); }
.akt-a .bis { font-size: 9.5px; color: var(--muted); letter-spacing: .02em; }
.akt-a.zwei .preis b { font-size: 17px; } .akt-a.zwei .name { font-size: 12.5px; }
@media (min-width: 760px) {
  .akt-a { top: calc(var(--tb) - 6px); width: calc(var(--tw) - 24px); margin-left: calc((var(--tw) - 24px) / -2); }
  .akt-a .kordel { height: 30px; } .akt-a .karte { padding: 16px 14px 13px; gap: 5px; border-radius: 12px; }
  .akt-a .kopf { font-size: 10.5px; } .akt-a .name { font-size: 18px; } .akt-a .preis b { font-size: 30px; } .akt-a .preis s { font-size: 13px; } .akt-a .bis { font-size: 11.5px; }
  .akt-a.zwei .preis b { font-size: 24px; } .akt-a.zwei .name { font-size: 16.5px; } .akt-a .zeile + .zeile { padding-top: 7px; margin-top: 3px; }
}
.akt-a { cursor: pointer; }
.akt-a:focus-visible { outline: none; } .akt-a:focus-visible .karte { outline: 2px solid var(--gold-d); outline-offset: 3px; }

/* ---------- F · Band an der Karte (Behandlungen): Schärpe oben über die ganze Karte, Aktionspreis statt „ab …“ ---------- */
.card:has(> .schaerpe) { overflow: hidden; padding-top: 54px; box-shadow: 0 0 0 2px var(--gold), 0 14px 26px -18px rgba(0,0,0,.55); }
.card > .schaerpe { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px 8px;
  background: var(--gold); color: var(--deep); font: 800 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.card > .schaerpe::before, .card > .schaerpe::after { content: ""; width: 4px; height: 4px; background: var(--deep); transform: rotate(45deg); opacity: .6; }
.card:has(> .schaerpe) .tag { top: 44px; }
.card .from.aktpreis { display: grid; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--muted); }
.card .aktpreis .akt-zeile { display: grid; gap: 1px; }
.card .aktpreis b { font-size: 17px; color: var(--deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.card .aktpreis s { font-size: 13px; }

/* Zwei Behandlungen (Marian 20.10.2026): auf allen Geräten ausgeschrieben untereinander, jede Zeile ein eigener Link zu ihrem Posten */
.akt-a.zwei { cursor: default; }
.akt-a a.zeile { color: inherit; text-decoration: none; border-radius: 6px; cursor: pointer; }
.akt-a a.zeile:hover .name { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold-d) 60%, transparent); text-underline-offset: 2px; }
.akt-a a.zeile:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; }
/* Handy mit zwei Behandlungen: Schild kompakter, Überschrift rückt nur dann ein Stück nach unten (sonst stieß das Schild bei 360 px an „Naturkosmetik“) */
@media (max-width: 759px) {
  .akt-a.zwei .karte { padding: 8px 7px 7px; gap: 2px; }
  .akt-a.zwei .kopf { font-size: 8.5px; }
  .akt-a.zwei .name { font-size: 11.5px; line-height: 1.08; }
  .akt-a.zwei .preis b { font-size: 15.5px; } .akt-a.zwei .preis s { font-size: 10px; }
  .akt-a.zwei .zeile + .zeile { padding-top: 3px; margin-top: 1px; }
  .hero:has(.akt-a.zwei) .claim { padding-top: 46px; }
}

/* ---------- A, drei und mehr Behandlungen: Aushängeschild (Marian 21.10.2026: „nicht stumpf nach unten … eher in die Breite“) ----------
   Eine Messingstange ragt seitlich unter dem Logo-Schild heraus; das breite Schild hängt an zwei Kordeln: links am Knopf unter dem Logo, rechts an der
   Stange. Behandlungen nebeneinander, jede Spalte ein Link. Handy: eine Reihe über die ganze Breite; Tablet hochkant: 2 × 2; ab 1024 px eine Reihe bis vor
   die Überschrift. Wiegt nur ganz leicht (zwei Aufhängungen), die Kordeln laufen hinter den Knöpfen weiter, damit beim Wiegen keine Lücke entsteht. */
.akt-a.breit { --hx: calc(var(--tw) / 2 - 6px); --seil: 14px; left: calc(var(--tl) + 6px); top: calc(var(--tb) - 5px); width: calc(100% - var(--tl) * 2 - 12px); margin-left: 0; cursor: default; }
.akt-a.breit .knopf { left: var(--hx); z-index: 3; }
.akt-a.breit .knopf.rechts { left: auto; right: var(--hx); margin: -1px -5.5px 0 0; }
.akt-a.breit .stange { position: absolute; z-index: 2; top: -2px; left: calc(var(--tw) - 14px); right: calc(var(--hx) - 14px); height: 3px; border-radius: 3px;
  background: linear-gradient(#fff3c4, var(--gold) 45%, var(--gold-d)); box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.akt-a.breit .stange::after { content: ""; position: absolute; right: -5px; top: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe8, var(--gold) 52%, var(--gold-d)); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.akt-a.breit .pendel { animation: akt-breit-ein 2.2s cubic-bezier(.33,.66,.4,1) 1.5s both, akt-breit-wiegen 9s ease-in-out 3.7s infinite; }
.akt-a.breit:hover > .pendel > .stups, .akt-a.breit:focus-within > .pendel > .stups { animation: akt-breit-stups 1.4s ease-out; }
@keyframes akt-breit-ein { 0% { transform: translateY(-16px); opacity: 0; } 18% { opacity: 1; } 45% { transform: translateY(3px); } 70% { transform: translateY(-1px) rotate(.4deg); } 100% { transform: none; } }
@keyframes akt-breit-wiegen { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(.3deg); } 75% { transform: rotate(-.3deg); } }
@keyframes akt-breit-stups { 0% { transform: rotate(0); } 25% { transform: rotate(-.8deg); } 55% { transform: rotate(.45deg); } 100% { transform: rotate(0); } }
.akt-a.breit .seil { position: absolute; z-index: 1; top: -4px; left: var(--hx); width: 1.5px; height: calc(var(--seil) + 8px); margin-left: -.75px; background: var(--gold); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.akt-a.breit .seil.rechts { left: auto; right: var(--hx); margin: 0 -.75px 0 0; }
.akt-a.breit .karte { margin-top: var(--seil); padding: 9px 5px 7px; gap: 4px; }
.akt-a.breit .karte::before { left: calc(var(--hx) - 2.5px); } .akt-a.breit .karte::after { right: calc(var(--hx) - 2.5px); }   /* Ösen genau unter den Kordeln */
.akt-a.breit .spalten { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: 100%; }
.akt-a.breit .zeile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 4px; }
.akt-a.breit .zeile .preis { margin-top: auto; padding-top: 2px; }   /* Preise auf einer Linie, auch wenn ein Name eine Zeile mehr braucht */
.akt-a.breit .zeile + .zeile { border-top: 0; padding-top: 2px; margin-top: 0; border-left: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.akt-a.breit .kopf { font-size: 8.5px; }
.akt-a.breit .name { font-size: 11px; line-height: 1.1; }
.akt-a.breit .preis { flex-wrap: wrap; justify-content: center; column-gap: 4px; }
.akt-a.breit .preis b { font-size: 16px; } .akt-a.breit .preis s { font-size: 10px; }
@media (min-width: 760px) {
  .akt-a.breit { --seil: 22px; width: 36%; }
  .akt-a.breit .karte { padding: 15px 12px 12px; gap: 6px; }
  .akt-a.breit .zeile { padding: 4px 8px; }
  .akt-a.breit .kopf { font-size: 10.5px; } .akt-a.breit .name { font-size: 15px; line-height: 1.12; }
  .akt-a.breit .preis b { font-size: 23px; } .akt-a.breit .preis s { font-size: 12.5px; } .akt-a.breit .bis { font-size: 11.5px; }
}
@media (min-width: 760px) and (max-width: 1023px) {   /* Tablet hochkant: zwischen Logo und Überschrift ist es schmal, daher 2 × 2 (drei: die dritte über beide Spalten) */
  .akt-a.breit .spalten { grid-template-columns: 1fr 1fr; }
  .akt-a.breit .zeile:nth-child(odd) { border-left: 0; }
  .akt-a.breit .zeile:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); padding-top: 8px; margin-top: 6px; }
  .akt-a.breit[style*="--n:3"] .zeile:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .akt-a.breit { --seil: 26px; width: min(calc(var(--n) * 150px), 36%); }
  .akt-a.breit .name { font-size: 13.5px; } .akt-a.breit .preis b { font-size: 21px; }
}
@media (min-width: 1280px) {
  .akt-a.breit { width: min(calc(var(--n) * 150px), 42%); }
  .akt-a.breit .karte { padding: 17px 14px 13px; }
  .akt-a.breit .name { font-size: 16px; } .akt-a.breit .preis b { font-size: 26px; } .akt-a.breit .preis s { font-size: 13px; }
}