/* ===========================================================================
   CAMPUS-EW · AKTIONSLEISTE
   Gehört zur Sektion aus aktionsleiste-sektion.json.

   Was hier NICHT steht und bewusst im Divi Builder bleibt:
     · der Farbverlauf der Sektion
     · das Icon im Informationstext-Modul
     · Beschriftungen, Enddatum und Linkziel

   Einbinden über inc/aktionsleiste.php. Die Datei ist eigenständig und
   braucht megamenu.css nicht – die Leiste kann vorher live gehen.
   =========================================================================== */

/* ===========================================================================
   AKTIONSLEISTE · gewählte Fassung
   Hintergrund und Icon kommen aus Divi, nicht von hier.
   =========================================================================== */
:root{
  --cew-orange:#FBB000; --cew-navy:#112F48; --cew-teal:#035458;
  --cew-sand:#FFEDC8; --cew-sand-2:#FFD77D; --cew-line:#E4E8EC;
  --cew-line-soft:#F1F4F6; --cew-navy-50:#7A8B9C; --cew-maxw:1240px;
  /* Wie weit der Timer von der Schaltfläche abrückt, also nach links wandert.
     Ein Wert – hier ändern, wenn er noch weiter soll. */
  --cew-timer-versatz:64px;
}
/* --- Sektion ------------------------------------------------------------
   Kein Hintergrund hier: den setzt Divi an der Sektion. */
.cew-promo-sektion{padding:0!important;color:#fff}
.cew-promo-sektion .et_pb_row{max-width:var(--cew-maxw)!important;width:100%!important;
  margin:0 auto!important;padding:0 24px!important}
.cew-promocol{display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;gap:16px;min-height:70px}

/* --- Informationstext: Icon und Aussage --------------------------------- */
/* Icon und Text liegen bei Divi in .et_pb_blurb_content – die Flexbox gehört
   auf diese Ebene, nicht auf das Modul selbst. */
.cew-promo-blurb{grid-column:1;grid-row:1;min-width:0;margin:0!important}
/* Richtung ausdrücklich: Divi-5-Module sind Flex-Container in SPALTEN-
   richtung. Ohne diese Angabe steht das Icon über dem Text statt daneben.
   Klasse doppelt notiert, damit die Regel unabhängig von der Reihenfolge
   gegen Divis eigene Ausgabe gewinnt. */
.cew-promo-blurb.cew-promo-blurb .et_pb_blurb_content{
  display:flex!important;flex-direction:row!important;--flex-direction:row!important;
  align-items:center!important;gap:13px;min-width:0;
  text-align:left!important;max-width:none!important;margin:0!important}
.cew-promo-blurb.cew-promo-blurb .et_pb_main_blurb_image{margin:0!important;flex:none}
.cew-promo-blurb.cew-promo-blurb .et_pb_blurb_container{min-width:0;
  text-align:left!important}
.cew-promo-blurb .et_pb_main_blurb_image{flex:none;width:40px;height:40px;
  margin:0!important;border-radius:11px;background:var(--cew-orange);
  display:flex;align-items:center;justify-content:center;color:#000}
.cew-promo-blurb .et_pb_main_blurb_image .et-pb-icon{font-size:21px!important;
  color:#000!important;line-height:1}
.cew-promo-blurb .et_pb_main_blurb_image svg{width:21px;height:21px;fill:none;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Der Titel steht auf 700, damit die Hervorhebung mit 900 deutlich
   herausragt. Bei 800 gegen 900 ist der Unterschied kaum sichtbar. */
.cew-promo-blurb .et_pb_module_header{margin:0!important;padding:0!important;
  font-size:16.5px!important;font-weight:700!important;line-height:1.25!important;
  color:#FFFFFF!important}
.cew-promo-blurb .et_pb_blurb_description p{margin:2px 0 0!important;padding:0!important;
  font-size:13.5px!important;line-height:1.35!important;color:#B7C6D3!important}
/* Hervorhebung im Titel. Im Divi-Modul so eintragen:
   Sommer-Special: bis zu <span class="cew-hl">30&nbsp;%</span> auf …
   Orange auf dem Verlauf: 7,42:1 links, 6,02:1 in der Mitte – beides über
   der Anforderung von 4,5:1. */
.cew-promo-blurb .cew-hl{color:var(--cew-orange)!important;font-weight:900!important;
  font-size:1.08em;letter-spacing:-.01em}

/* --- Timer: flache Kacheln, ohne Fortschrittslinie ---------------------- */
.cew-countdown{grid-column:2;grid-row:1;
  margin:0 var(--cew-timer-versatz) 0 0!important;
  max-width:none!important;width:auto!important}
.cew-countdown .torq-countdown-container{display:flex!important;flex-direction:row!important;
  flex-wrap:nowrap!important;align-items:center;gap:6px!important;
  background:none!important;border:0!important;padding:0!important}
.cew-countdown .torq-time-box{flex:none;min-width:54px;
  padding:8px 10px 9px!important;margin:0!important;border-radius:10px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);
  display:flex!important;flex-direction:column!important;
  align-items:center;justify-content:center;line-height:1}
.cew-countdown .torq-time{font-size:21px!important;font-weight:900!important;
  line-height:1!important;color:#fff!important;font-variant-numeric:tabular-nums;
  /* Das Modul bringt einen Textverlauf mit – hier abgeschaltet. */
  background:none!important;-webkit-text-fill-color:#fff!important}
.cew-countdown .torq-label{font-size:9.5px!important;font-weight:800!important;
  letter-spacing:.1em;text-transform:uppercase;color:#BFE3E1!important;margin-top:4px}

/* --- Schaltfläche und Schließen ----------------------------------------- */
.cew-promo-btn{grid-column:3;grid-row:1;flex:none;display:inline-flex!important;
  align-items:center;justify-content:center;min-height:38px;padding:0 18px!important;
  border-radius:999px;background:var(--cew-orange)!important;color:#000!important;
  font-weight:900!important;font-size:13.5px;line-height:1.2!important;
  white-space:nowrap;transition:background .16s,color .16s}
.cew-promo-btn:hover{background:#000!important;color:var(--cew-orange)!important}
.cew-promo-zu{grid-column:4;grid-row:1;width:38px;height:38px;border:0;background:none;
  cursor:pointer;color:#9FB6C6;border-radius:9px;display:flex;align-items:center;
  justify-content:center;transition:background .16s,color .16s}
.cew-promo-zu:hover{background:rgba(255,255,255,.14);color:#fff}
.cew-promo-zu svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width:1100px){
  /* Auf Tablets bleibt kein Platz zu verschenken. */
  :root{--cew-timer-versatz:0px}
  .cew-promocol{gap:13px}
  .cew-promo-blurb .et_pb_blurb_description{display:none}
  .cew-promo-blurb .et_pb_module_header{font-size:15.5px!important}
}
/* --- Handy --------------------------------------------------------------- */
@media (max-width:700px){
  .cew-promo-sektion .et_pb_row{padding:0 18px!important}
  /* Zeile 1: Timer, Schaltfläche, Kreuz. Zeile 2: die Aussage über die
     volle Breite – sonst bricht die Überschrift neben den Schaltflächen
     auf vier Zeilen um. */
  /* Zeile 1: Aussage und Kreuz. Zeile 2: Timer und Schaltfläche.
     Der Timer braucht rund 180 px – neben der Schaltfläche in derselben
     Spalte würde er sie überlagern. */
  /* Die Aussage bekommt die volle Breite, sonst bricht sie auf vier Zeilen.
     Das Kreuz sitzt frei in der Ecke und nimmt der Zeile keine Breite weg. */
  .cew-promocol{position:relative;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"text text" "timer btn";
    gap:10px 12px;padding:12px 0;min-height:0}
  .cew-promo-blurb{padding-right:42px}
  .cew-countdown{grid-area:timer;justify-self:start;margin:0!important}
  .cew-promo-blurb{grid-area:text}
  .cew-promo-btn{grid-area:btn;justify-self:end;padding:0 16px!important;font-size:13px}
  .cew-promo-zu{position:absolute;top:10px;right:0;width:34px;height:34px}
  .cew-countdown .torq-time-box{min-width:49px;padding:6px 8px 7px!important}
  .cew-countdown .torq-time{font-size:19px!important}
  .cew-countdown .torq-label{font-size:9px!important}
  .cew-promo-blurb .et_pb_blurb_content{gap:11px}
  .cew-promo-blurb .et_pb_main_blurb_image{width:34px;height:34px;border-radius:9px}
  .cew-promo-blurb .et_pb_main_blurb_image svg{width:18px;height:18px}
  .cew-promo-blurb .et_pb_module_header{font-size:15px!important}
  .cew-promo-blurb .cew-hl{font-size:1.1em}
}
/* Sehr schmale Geräte: Sekunden entfallen. Vier größere Kacheln plus
   Schaltfläche passen unter 430 px nicht mehr nebeneinander, und der
   Sekundentakt bringt auf dem Telefon ohnehin wenig. */
@media (max-width:430px){
  /* Die letzte Kachel ausblenden, nicht die Klasse torq-seconds ansprechen:
     Die sitzt auf der ZAHL, nicht auf der Kachel. Sonst verschwindet nur
     der Wert und die Beschriftung "Sek" bleibt allein stehen. */
  .cew-countdown .torq-time-box:last-child{display:none!important}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}