/* ================================================================
   aktionskarten-styles.css
   ================================================================
   ABLAGEORT: /site/templates/styles/aktionskarten-styles.css
   ================================================================ */

.aktion{padding:80px 0 40px;}
.aktion-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.aktion-head h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:32px;margin-top:2px;}
.aktion-head .hint{font-size:14px;color:var(--text-muted);}

.aktion-rail{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;position:relative;}

.akarte{
  height:180px;border-radius:2px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:22px;text-align:left;width:100%;min-width:0;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);box-shadow:var(--shadow-1);
}
.akarte:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);}
.akarte .ph-flat{position:absolute;inset:0;border:none;}

.akarte.a1 .ph-flat{background:var(--surface-alt);}
.akarte.a1::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,46,58,0) 40%,rgba(41,46,58,.15) 100%);}
.akarte.a2 .ph-flat{background:var(--navy-2);}
.akarte.a2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,46,58,0) 30%,rgba(41,46,58,.85) 100%);}

.akarte .k-title{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:24px;position:relative;z-index:2;}
.akarte.a1 .k-title{color:var(--text);}
.akarte.a2 .k-title{color:#fff;}

.akarte .k-sub{font-family:'Caveat',cursive;font-weight:600;font-size:25px;display:block;margin-top:2px;position:relative;z-index:2;}
.akarte.a1 .k-sub{color:var(--accent-deep);}
.akarte.a2 .k-sub{color:var(--accent);}

/* Kein eigener Hintergrund mehr - Text sitzt direkt auf der
   jeweiligen Kartenfarbe (a1 hell, a2 dunkel), siehe Farben oben. */
.akarte-info{
  position:relative;z-index:2;
}

@media(max-width:980px){
  .aktion-rail{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .wrap.aktion{padding:30px;}
}

/* ----------------------------------------------------------------
   Bearbeiten-Button: siehe .pwe-edit-btn in pwe-group.css
   (einheitlich fuer alle Sektionen, nicht mehr hier definiert).
   ---------------------------------------------------------------- */