/* Aktions-Popup der Startseite.
   Gleiche Formensprache wie die Kurs-Popups (assets/css/courses.css): dieselbe
   Abdunklung, dieselbe Rundung, derselbe runde Schliessen-Knopf. Ein Gast soll
   nicht merken, dass hier ein anderes Bauteil arbeitet.

   Eigene Datei statt eines Blocks in home.css: Die Startseite laedt home.css
   ohnehin mit einer Versionsnummer, und eine Aktion soll spaeter nicht die
   Zwischenspeicher-Nummer der gesamten Startseiten-Gestaltung anfassen. */

dialog.fd-aktion-overlay{
  position:fixed; inset:0; margin:0; padding:24px; border:none;
  width:100%; height:100%; max-width:none; max-height:none;
  background:rgba(2,20,28,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  /* Ueber den Kurs-Popups (z-index 300): Die Aktion liegt beim Aufrufen der
     Seite ganz vorn, alles andere ist erst danach dran. */
  z-index:400;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; overscroll-behavior:contain;
}
dialog.fd-aktion-overlay:not([open]){ display:none; }
/* Die Abdunklung malt das Fenster selbst – so wie bei den Kurs-Popups. */
dialog.fd-aktion-overlay::backdrop{ background:transparent; }

.fd-aktion{
  position:relative;
  /* width:auto: Das Fenster ist so breit wie sein Inhalt und nicht breiter –
     bei einem reinen Bild also genau so breit wie das Bild. */
  width:auto; max-width:min(92vw, 560px);
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:fdAktionRein .34s cubic-bezier(.16,.8,.3,1);
}
/* Ein fertig gestaltetes Bild ohne Ueberschrift und Text traegt die ganze
   Aussage allein. Dann gibt es nichts einzurahmen: Das Bild IST das Fenster
   und darf dafuer deutlich groesser werden. */
.fd-aktion--nurbild{ max-width:min(94vw, 860px); }

@keyframes fdAktionRein{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

.fd-aktion-bildhalter{ position:relative; display:block; line-height:0; }

/* Das Bild kommt fertig gestaltet vom Betreiber: Es fuellt das Fenster von Rand
   zu Rand und wird nur verkleinert, nie beschnitten. */
.fd-aktion-bild{
  display:block; width:100%; height:auto;
  max-height:84vh; object-fit:contain;
  background:#eafbfa;
}

.fd-aktion-inhalt{ padding:26px 30px 28px; }
/* Steht ein Bild darueber, darf der Text nicht noch einmal so viel Luft haben. */
.fd-aktion-bildhalter + .fd-aktion-inhalt{ padding-top:22px; }

.fd-aktion-inhalt h2{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(21px,3.4vw,28px); line-height:1.2;
  color:var(--navy,#0d3355); margin:0 0 10px; padding-right:34px;
}
.fd-aktion-text{
  font-size:15px; line-height:1.65; color:#4b6d75; margin:0;
  white-space:pre-line; /* Zeilenumbrueche aus dem Adminfeld bleiben stehen. */
}
.fd-aktion-knopf{
  display:inline-block;
  padding:13px 26px; border-radius:999px;
  background:var(--teal-text,#0b7d73); color:#fff;
  font-weight:700; font-size:15px; line-height:1.2; text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s;
}
.fd-aktion-inhalt .fd-aktion-knopf{ margin-top:18px; }
.fd-aktion-knopf:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,182,168,.36); }

/* ---------------------------------------------------------------------------
   Der Knopf auf dem Bild
   ---------------------------------------------------------------------------
   Wo er gut sitzt, haengt vom Bild ab – deshalb entscheidet das der Betreiber
   im Adminbereich und nicht dieses Stylesheet. Der Schatten steht fest: Ein
   Knopf auf einem Foto braucht ihn, egal an welcher Ecke er liegt. */
.fd-aktion-knopf--aufbild{
  position:absolute; z-index:2;
  box-shadow:0 6px 22px rgba(2,20,28,.45);
  /* Auf einem unruhigen Foto ist der reine Farbknopf schwer zu lesen. */
  border:2px solid rgba(255,255,255,.9);
}
.fd-aktion-knopf--aufbild:hover{ box-shadow:0 12px 30px rgba(2,20,28,.55); }

.fd-aktion-knopf--aufbild.pos-unten-mitte{ left:50%; bottom:6%; transform:translateX(-50%); }
.fd-aktion-knopf--aufbild.pos-unten-mitte:hover{ transform:translateX(-50%) translateY(-2px); }
.fd-aktion-knopf--aufbild.pos-unten-links{ left:6%; bottom:6%; }
.fd-aktion-knopf--aufbild.pos-unten-rechts{ right:6%; bottom:6%; }
.fd-aktion-knopf--aufbild.pos-mitte{ left:50%; top:50%; transform:translate(-50%,-50%); }
.fd-aktion-knopf--aufbild.pos-mitte:hover{ transform:translate(-50%,-50%) scale(1.04); }

.fd-aktion-zu{
  position:absolute; top:14px; right:14px; z-index:3;
  width:38px; height:38px; border-radius:50%; border:none;
  /* Heller Grund mit Schatten: Der Knopf liegt oft auf einem Foto und braucht
     dort genauso viel Halt wie auf Weiss. */
  background:rgba(255,255,255,.92); color:var(--ink,#062a33);
  box-shadow:0 2px 10px rgba(2,40,50,.25);
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.fd-aktion-zu:hover{ background:#fff; }
[dir=rtl] .fd-aktion-zu{ right:auto; left:14px; }
[dir=rtl] .fd-aktion-inhalt h2{ padding-right:0; padding-left:34px; }

body.fd-aktion-offen{ overflow:hidden; }

@media (max-width:640px){
  dialog.fd-aktion-overlay{ align-items:flex-start; padding:64px 14px 20px; }
  .fd-aktion, .fd-aktion--nurbild{ max-width:100%; width:100%; }
  .fd-aktion-bild{ max-height:72vh; }
  .fd-aktion-inhalt{ padding:22px 20px 24px; }
  /* Am Handy ist der Knopf das Wichtigste am ganzen Fenster – er darf hier
     mehr Platz nehmen als das Seitenverhaeltnis des Bildes vorgibt. */
  .fd-aktion-knopf--aufbild{ padding:12px 22px; font-size:14.5px; }

  /* Am Handy verlaesst der Knopf das Bild und steht in einem Streifen darunter.
     Das Bild ist hier nur gut 350px breit, der Knopf aber kaum kleiner als am
     Schreibtisch – auf dem Foto verdeckte er deshalb genau das, worum es geht
     (2026-09-13: beim "Welcome Discount" lag er auf "Code: FUNNY"). Darunter
     verdeckt er bei keinem Aktionsbild etwas, egal welche Stelle im
     Adminbereich gewaehlt ist. Dunkelblau statt Weiss, damit der Streifen wie
     die Fortsetzung des Bildes wirkt und nicht wie ein zweites Design. */
  /* flow-root: Sonst rutscht der untere Abstand des Knopfes aus dem Halter
     heraus und darunter blitzt ein weisser Streifen der Karte. */
  .fd-aktion-bildhalter{ display:flow-root; }
  .fd-aktion-bildhalter:has(.fd-aktion-knopf--aufbild){
    background:var(--navy,#0d3355);
  }
  .fd-aktion .fd-aktion-bildhalter .fd-aktion-knopf--aufbild,
  .fd-aktion .fd-aktion-bildhalter .fd-aktion-knopf--aufbild:hover{
    position:static; display:block; width:fit-content; max-width:calc(100% - 28px);
    margin:14px auto; transform:none; text-align:center;
    left:auto; right:auto; top:auto; bottom:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .fd-aktion{ animation:none; }
  .fd-aktion-knopf{ transition:none; }
  .fd-aktion-knopf--aufbild.pos-unten-mitte:hover{ transform:translateX(-50%); }
  .fd-aktion-knopf--aufbild.pos-mitte:hover{ transform:translate(-50%,-50%); }
  .fd-aktion-knopf:hover{ transform:none; box-shadow:0 6px 22px rgba(2,20,28,.45); }
}