/* ============================================================
   NEUES DESIGN-SYSTEM — actionplace Redesign
   Diese Datei wird NACH css.actionplace_main.php eingebunden
   und überschreibt nur die Klassen, die wir gemeinsam neu
   gestaltet haben. Alle anderen (unbekannten) Seiten/Klassen
   bleiben unangetastet, um nichts kaputt zu machen, das wir
   nie gesehen haben.

   Einbindung in inc/meta/inc.metahead.php, NACH der Zeile:
   <link rel="stylesheet" type="text/css" href="./css/css.actionplace_main.php?v=301223">
   ergänzen mit:
   <link rel="stylesheet" type="text/css" href="./css/css.actionplace_redesign.php?v=1">
   ============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ap-teal:      #3BB8C6;
  --ap-navy:      #0D3183;
  --ap-navy-deep: #081F54;
  --ap-ink:       #0B2545;
  --ap-paper:     #F6F8FB;
  --ap-white:     #FFFFFF;
  --ap-line:      rgba(11,37,69,.10);
  --ap-danger:    #E24B4A;
  --ap-danger-bg: #FCEBEB;
  --ap-danger-text: #791F1F;
}


/* ------------------------------------------------------------
   1) HEADER — Login-Hero (ausgeloggt) + kompakter Header (eingeloggt)
   ------------------------------------------------------------ */

.top_header.ap_login_hero{
  background:
    radial-gradient(700px 260px at 12% -20%, rgba(59,184,198,.30), transparent 60%),
    linear-gradient(180deg, var(--ap-navy-deep) 0%, var(--ap-navy) 45%, #1c5aa0 75%, #3BB8C6 100%) !important;
  position:relative;
  overflow:hidden;
}
.top_header.ap_login_hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,184,198,.6), transparent);
}

/* Kompakter Zustand: eingeloggt, nur schlanke weiße Leiste */
.top_header.ap_login_hero.ap_hero_compact{
  background:var(--ap-white) !important;
  border-bottom:1px solid var(--ap-line);
  padding-top:14px !important;
  padding-bottom:14px !important;
  min-height:0 !important;
}
.ap_hero_compact .flex_header_part_two,
.ap_hero_compact .flex_header_part_two a,
.ap_hero_compact .flex_header_part_two .a_text{
  color:var(--ap-ink) !important;
  font-family:'Inter',sans-serif;
  font-size:.82rem;
  font-weight:400 !important;
  line-height:1.6;
}
.ap_hero_compact .flex_header_part_two a{
  font-weight:500 !important; color:#8895AC !important;
  text-decoration:none; border-left:1px solid var(--ap-line); padding-left:12px; margin-left:10px;
}
.ap_hero_compact .flex_header_part_two a:hover{ color:var(--ap-navy) !important; }

.logo_header{ height:32px !important; width:auto !important; }

/* Die alte CSS erzwingt hier eine feste Breite (110px/90px) mit
   passender Spezifität, ohne die Höhe anzupassen - das verzerrt
   das quadratische Icon zu einem breiten Oval. Mit identischer
   Selektor-Spezifität korrigieren wir das auf ein echtes Quadrat. */
.ap_hero_compact .ap_login_logo .logo_header{
  width:32px !important;
  height:32px !important;
  object-fit:contain !important;
}
@media (max-width:560px){
  .ap_hero_compact .ap_login_logo .logo_header{
    width:32px !important;
    height:32px !important;
  }
}


/* ------------------------------------------------------------
   2) LOGIN-/REGISTRIERUNGSFORMULAR
   ------------------------------------------------------------ */

.input_text_login{
  font-family:'Inter',sans-serif;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  padding:10px 16px !important;
}
.input_text_login::placeholder{ color:rgba(255,255,255,.55) !important; }

.button_login{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  background:linear-gradient(120deg, var(--ap-teal), #52d6c9) !important;
  color:#062045 !important;
  border-radius:999px !important; border:none !important;
  box-shadow:0 4px 16px rgba(59,184,198,.35);
}

.lost_pw_text{ font-family:'Inter',sans-serif; }

/* AGB/Datenschutz-Links in den Checkbox-Zeilen */
.input_checkbox + a.a_text,
p .a_text{
  color:var(--ap-navy);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}
.input_checkbox + a.a_text:hover{ color:var(--ap-teal); }


/* ------------------------------------------------------------
   3) SEITEN-TITELZEILE statt grauer Kopfkasten
   (menue_tool_them_headline: Support, Rechnungen, Persönliche
   Daten, Location/Orte, Meine actionplaces, Account löschen ...)
   ------------------------------------------------------------ */

.menue_tool_them_headline{
  display:block !important;
  background:none !important;
  color:var(--ap-ink) !important;
  font-family:'Quicksand',sans-serif !important;
  font-weight:700 !important;
  font-size:1.15rem !important;
  padding:16px 0 4px !important;
  margin-bottom:14px !important;
  border-bottom:1px solid var(--ap-line);
  padding-bottom:14px !important;
}

/* Gefahrenzone-Variante (wird per zusätzlicher Klasse "menue_tool_them_headline_danger"
   gesetzt, siehe PHP-Änderung an delete_my_account() weiter unten) */
.menue_tool_them_headline_danger{
  color:var(--ap-danger-text) !important;
}


/* ------------------------------------------------------------
   4) FORMULAR-ABSCHNITTE (WAS?/WANN?/WO?/etc.) mit
   nummerierten Kreisen statt reinem Fettdruck
   ------------------------------------------------------------ */

.channel_window_h3{
  display:flex !important; align-items:center; gap:10px;
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  font-size:1rem !important;
  color:var(--ap-navy) !important;
  background:none !important;
  margin:22px 0 14px !important;
  padding:0 !important;
}
.ap_step_num{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--ap-paper); color:var(--ap-teal);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-family:'Quicksand',sans-serif; font-weight:700;
}

/* Eingabefelder im Hauptbereich generell vereinheitlichen */
.main_content input[type="text"],
.main_content input[type="email"],
.main_content input[type="tel"],
.main_content input[type="password"],
.main_content textarea,
.main_content select{
  font-family:'Inter',sans-serif;
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  background:var(--ap-paper) !important;
  color:var(--ap-ink) !important;
  padding:13px 16px !important;
}

.main_content input[type="submit"],
.main_content input[type="button"]:not(.button_delete){
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  background:linear-gradient(120deg, var(--ap-teal), var(--ap-navy)) !important;
  color:#fff !important;
  border:none !important; border-radius:999px !important;
  padding:14px 28px !important;
}


/* ------------------------------------------------------------
   5) REICHWEITE-REGLER (slider_1) — Pin-Icon-Griff
   ------------------------------------------------------------ */

.slider_1{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:var(--ap-line) !important;
  border-radius:2px;
  outline:none;
}
.slider_1::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:30px; height:30px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--ap-teal), var(--ap-navy));
  box-shadow:0 3px 10px rgba(13,49,131,.35);
  cursor:pointer;
  margin-top:-13px;
}
.slider_1::-moz-range-thumb{
  width:30px; height:30px; border:none; border-radius:50%;
  background:linear-gradient(135deg, var(--ap-teal), var(--ap-navy));
  cursor:pointer;
}

.ap_price_compare_banner{
  display:flex; align-items:flex-start; gap:10px;
  background:#E1F5EE; border-radius:12px; padding:12px 14px; margin:12px 0;
  font-size:.82rem; color:#085041; line-height:1.5;
  font-family:'Inter',sans-serif; text-align:left;
}
.ap_price_compare_banner b{ color:#04342C; }
.ap_price_compare_icon{ flex-shrink:0; }


/* ------------------------------------------------------------
   6) CHANNEL-MEDIATHEK — Bildkacheln
   ------------------------------------------------------------ */

.galerie_bild_container{
  border-radius:12px !important;
  overflow:hidden;
  border:1px solid var(--ap-line);
}
.button_delete{
  background:var(--ap-white) !important;
  border-radius:50% !important;
  border:1px solid var(--ap-line) !important;
}


/* ------------------------------------------------------------
   8) KATEGORIE-SUCHE (progressive enhancement, siehe
   actionplace.redesign.js — nutzt echte DB-Kategorien)
   ------------------------------------------------------------ */

.ap_cat_suggest_hint{
  font-size:.76rem; color:#8895AC; margin:8px 0 8px;
}
.ap_cat_suggest_chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ap_cat_chip{
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:600;
  color:var(--ap-navy); background:var(--ap-paper); border:1px solid var(--ap-line);
  border-radius:999px; padding:7px 14px; cursor:pointer;
}
.ap_cat_chip:hover{ border-color:var(--ap-teal); color:var(--ap-teal); }

.ap_cat_selected{ margin-bottom:10px; }
.ap_cat_chip_selected{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.85rem;
  color:#fff; background:linear-gradient(120deg, var(--ap-teal), var(--ap-navy));
  border-radius:999px; padding:8px 10px 8px 16px;
}
.ap_cat_chip_remove{
  background:rgba(255,255,255,.25); border:none; color:#fff;
  width:18px; height:18px; border-radius:50%; cursor:pointer; line-height:1;
  font-size:.85rem;
}


/* ------------------------------------------------------------
   9) ACTION-BUTTON ICON-KACHELN (progressive enhancement, siehe
   actionplace.redesign.js — nutzt die 10 echten Button-Typen)
   ------------------------------------------------------------ */

.ap_button_type_grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0 4px;
}
.ap_button_type_tile{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 6px; border:1.5px solid var(--ap-line); border-radius:12px;
  background:#fff; cursor:pointer; text-align:center;
}
.ap_button_type_tile:hover{ border-color:var(--ap-teal); }
.ap_button_type_tile.is-selected{ border-color:var(--ap-teal); background:#E1F5EE; }
.ap_button_type_icon{ width:20px; height:20px; color:#8895AC; }
.ap_button_type_icon svg{ width:100%; height:100%; display:block; }
.ap_button_type_tile.is-selected .ap_button_type_icon{ color:var(--ap-teal); }
.ap_button_type_label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.68rem; color:var(--ap-ink);
}
.ap_button_type_tile.is-selected .ap_button_type_label{ color:var(--ap-navy); }


/* ------------------------------------------------------------
   11) EMPTY-STATES (ok_message) — Meine actionplaces,
   Location/Orte, wenn noch nichts angelegt wurde
   ------------------------------------------------------------ */

.ok_message{
  display:block;
  text-align:center;
  background:var(--ap-paper) !important;
  border-radius:16px;
  padding:36px 20px !important;
  color:var(--ap-ink) !important;
  font-family:'Inter',sans-serif;
  font-size:.9rem !important;
}


/* ------------------------------------------------------------
   12) LISTEN-KARTEN — Meine actionplaces, Location/Orte
   ------------------------------------------------------------ */

.activity_list_detail_container{
  background:#fff !important;
  border:1px solid var(--ap-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:14px 16px !important;
  margin-bottom:10px !important;
}


/* ------------------------------------------------------------
   13) PERSÖNLICHE DATEN — Formularfelder (input_text_channel)
   ------------------------------------------------------------ */

.input_text_channel{
  font-family:'Inter',sans-serif;
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  background:var(--ap-paper) !important;
  color:var(--ap-ink) !important;
  padding:13px 16px !important;
  width:100%;
  box-sizing:border-box;
}


/* ------------------------------------------------------------
   14) UNTERMENÜ-KARTEN (content_link_menu) — Daten &
   Einstellungen, Meine Rechnungen. Icons werden per JS
   ergänzt (actionplace.redesign.js), hier nur die Karten-Optik.
   ------------------------------------------------------------ */

.content_link_menu{
  display:flex !important; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--ap-line); border-radius:14px;
  padding:13px 15px; margin-bottom:10px;
  text-decoration:none !important;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.88rem;
  color:var(--ap-ink) !important;
}
.content_link_menu:hover{ border-color:var(--ap-teal); }
.content_link_menu.ap_danger_link{
  background:var(--ap-danger-bg); border-color:rgba(226,75,74,.3);
  color:var(--ap-danger-text) !important;
}
.ap_link_icon{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:var(--ap-paper); display:flex; align-items:center; justify-content:center;
  color:var(--ap-teal);
}
.content_link_menu.ap_danger_link .ap_link_icon{ background:#fff; color:var(--ap-danger); }
.ap_link_icon svg{ width:17px; height:17px; }

.ap_icon_pin_wrap{ position:relative; display:inline-flex; }
.ap_icon_pin_plus{
  position:absolute; top:-4px; right:-4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--ap-navy); color:#fff;
  font-size:.62rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #fff;
}


/* ------------------------------------------------------------
   15) STATUS-BADGES bei Meine actionplaces / Location/Orte
   (Klassen werden per JS anhand des bestehenden Label-Texts
   gesetzt, siehe actionplace.redesign.js)
   ------------------------------------------------------------ */

.activity_list_detail_container label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.72rem;
  padding:3px 10px; border-radius:999px; display:inline-block;
}
.activity_list_detail_container label.ap_status_live{
  background:#E1F5EE; color:#0F6E56;
}
.activity_list_detail_container label.ap_status_inactive{
  background:var(--ap-paper); color:#8895AC;
}
.activity_list_detail_container label.ap_status_ended{
  background:#FAEEDA; color:#854F0B;
}

.main_content input[type="date"],
.main_content input[type="time"]{
  font-family:'Inter',sans-serif;
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  background:var(--ap-paper) !important;
  color:var(--ap-ink) !important;
  padding:11px 14px !important;
}

.footer{
  background:var(--ap-paper) !important;
  padding-top:24px !important;
  padding-bottom:24px !important;
}
.footer .a_text{
  font-family:'Inter',sans-serif;
  color:#A3ACC2 !important;
  font-weight:400;
  font-size:.78rem !important;
}
.footer .a_text:hover{ color:var(--ap-navy) !important; }
.footer_part_one{
  color:#A3ACC2 !important; font-size:.75rem !important; font-family:'Inter',sans-serif;
}


/* ------------------------------------------------------------
   22) FOOTER ANS SEITENENDE ZWINGEN (BUGFIX)
   Auf manchen Seiten (z.B. Login/Landingpage) folgt nach dem
   Footer noch ein leeres Modul, wodurch der Footer optisch
   "in der Mitte klebt" statt am Seitenende zu stehen. Diese
   Regel zwingt den Footer per Flexbox-"order" ans echte Ende,
   unabhängig von der Reihenfolge der CMS-Module.
   ------------------------------------------------------------ */

html, body{ min-height:100%; }
body{
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
}
.footer{
  order:999 !important;
  margin-top:auto !important;
}


/* ------------------------------------------------------------
   23) DURCHGEHENDER FARBVERLAUF nur im LOGIN-/GAST-ZUSTAND
   (bestätigtes Konzept aus preview_full_page_gradient.html).
   Betrifft NUR Seiten mit .ap_login_hero OHNE .ap_hero_compact
   (also ausgeloggt/Startseite) - eingeloggte Seiten bleiben
   unverändert weiß, per :has()-Selektor abgegrenzt.
   ------------------------------------------------------------ */

body:has(.top_header.ap_login_hero:not(.ap_hero_compact)){
  background:linear-gradient(180deg,
    var(--ap-navy-deep) 0%,
    var(--ap-navy) 35%,
    #1c5aa0 60%,
    var(--ap-teal) 85%,
    #E1F5EE 100%
  ) !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .top_header.ap_login_hero{
  background:none !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .main_content{
  background:transparent !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .footer{
  background:transparent !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .footer .a_text{
  color:rgba(255,255,255,.85) !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .footer .a_text:hover{
  color:#fff !important;
}
body:has(.top_header.ap_login_hero:not(.ap_hero_compact)) .footer_part_one{
  color:rgba(255,255,255,.65) !important;
}


/* ------------------------------------------------------------
   16) GUTHABEN AUFLADEN (dpx/py_1/py_2 aus edit_credit_form())
   Echte Beträge/Rabatte/Radios bleiben unverändert, nur die
   Optik wird zu einem Karten-Grid statt Radio-Liste.
   ------------------------------------------------------------ */

.dpx{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  row-gap:10px !important; column-gap:0 !important;
  align-items:stretch !important;
}
.py_1{
  display:flex !important; align-items:center; justify-content:center;
  background:var(--ap-paper); border:1.5px solid var(--ap-line);
  border-radius:12px 0 0 12px; border-right:none;
  padding:14px 16px !important;
}
.py_2{
  display:flex !important; align-items:center; gap:8px;
  background:var(--ap-paper); border:1.5px solid var(--ap-line);
  border-radius:0 12px 12px 0;
  padding:14px 16px !important;
  font-family:'Inter',sans-serif;
}
.py_2 span{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  color:var(--ap-navy) !important;
}
.py_1:has(input:checked){
  background:#E1F5EE; border-color:var(--ap-teal);
}
.py_1:has(input:checked) + .py_2{
  background:#E1F5EE; border-color:var(--ap-teal);
}
.dpx input[type="radio"]{
  width:20px; height:20px; accent-color:var(--ap-teal);
}
.dpx input[type="number"]{
  border:none !important; background:none !important; padding:0 !important;
  font-family:'Inter',sans-serif; color:var(--ap-ink) !important;
}


/* ------------------------------------------------------------
   17) WHATSAPP-SHARE nach dem Anlegen eines actionplace
   (send_activity_form_part_final())
   ------------------------------------------------------------ */

.ap_share_box{ margin-top:18px; }
.ap_share_label{
  font-size:.78rem; font-weight:700; color:#8895AC;
  text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px;
  font-family:'Inter',sans-serif;
}
.ap_whatsapp_btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:15px; border-radius:999px;
  background:#25D366; color:#fff !important; text-decoration:none !important;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.95rem;
  margin-bottom:12px; box-sizing:border-box;
}
.ap_share_row{ display:flex; gap:10px; }
.ap_share_secondary{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px; border:1px solid var(--ap-line); border-radius:12px;
  background:#fff; color:var(--ap-ink) !important; text-decoration:none !important;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem;
}
.ap_share_secondary:hover{ border-color:var(--ap-teal); color:var(--ap-navy) !important; }


/* ------------------------------------------------------------
   18) LOCATION/ORTE Vorteils-Kacheln (show_my_locations())
   ------------------------------------------------------------ */

.ap_intro_text{
  font-family:'Inter',sans-serif; font-size:.88rem; color:#3D4A63;
  line-height:1.65; margin:0 0 20px;
}
.ap_benefit_list{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.ap_benefit_card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--ap-paper); border-radius:14px; padding:14px 16px;
}
.ap_benefit_icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:#fff; border:1px solid var(--ap-line);
  display:flex; align-items:center; justify-content:center; color:var(--ap-teal);
}
.ap_benefit_icon svg{ width:19px; height:19px; }
.ap_benefit_title{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.88rem;
  color:var(--ap-ink); margin:0 0 3px;
}
.ap_benefit_desc{ font-size:.8rem; color:#3D4A63; line-height:1.5; margin:0; font-family:'Inter',sans-serif; }

.ap_condition_note{
  display:flex; gap:10px; align-items:flex-start;
  background:#FAEEDA; border-radius:12px; padding:12px 14px; margin-bottom:20px;
  font-size:.8rem; color:#633806; line-height:1.5; font-family:'Inter',sans-serif;
}
.ap_condition_note b{ color:#412402; }

.ap_primary_cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; box-sizing:border-box; padding:15px; border:none; border-radius:999px;
  background:linear-gradient(120deg, #3BB8C6, #52d6c9); color:#062045 !important;
  text-decoration:none !important;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.95rem;
  box-shadow:0 6px 18px rgba(59,184,198,.3);
}


/* ------------------------------------------------------------
   19) EMPTY-STATES (universell) + RECHNUNGS-KARTEN
   ------------------------------------------------------------ */

.ap_empty_state{
  text-align:center; padding:36px 20px;
  background:var(--ap-paper); border-radius:16px; margin-bottom:8px;
}
.ap_empty_state_icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:#fff; border:1.5px solid var(--ap-line);
  display:flex; align-items:center; justify-content:center; color:var(--ap-teal);
}
.ap_empty_state_icon svg{ width:26px; height:26px; }
.ap_empty_state_title{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--ap-ink); margin:0 0 6px;
}
.ap_empty_state_sub{ font-size:.85rem; color:#8895AC; margin:0; line-height:1.5; font-family:'Inter',sans-serif; }

.ap_invoice_list{ display:flex; flex-direction:column; gap:10px; }
.ap_invoice_card{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--ap-line); border-radius:14px;
  padding:13px 15px;
}
.ap_invoice_icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--ap-paper); display:flex; align-items:center; justify-content:center;
  color:var(--ap-navy);
}
.ap_invoice_icon svg{ width:18px; height:18px; }
.ap_invoice_info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ap_invoice_title{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.86rem; color:var(--ap-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ap_invoice_meta{ font-size:.74rem; color:#8895AC; font-family:'Inter',sans-serif; }
.ap_invoice_amount{ text-align:right; flex-shrink:0; display:flex; flex-direction:column; }
.ap_invoice_amount_value{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:.88rem; color:var(--ap-navy);
}
.ap_invoice_download{
  font-size:.7rem; color:var(--ap-teal) !important; text-decoration:none !important; margin-top:2px;
  font-family:'Inter',sans-serif;
}

.ap_row_two{ display:flex; gap:10px; }
.ap_row_two .input_text_channel{ flex:1; }


/* ------------------------------------------------------------
   21) HAMBURGER-ICON IM HEADER + DROPDOWN-PANEL
   Ersetzt die vier permanent sichtbaren Buttons im eingeloggten
   Channel-Bereich. Icon sitzt links im Header (module.header.php),
   das Panel klappt direkt darunter auf.
   ------------------------------------------------------------ */

.ap_header_menu_btn{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:24px; height:24px; padding:0; margin-right:14px;
  background:none; border:none; cursor:pointer; flex-shrink:0;
}
.ap_hero_compact .ap_login_logo{
  display:flex !important; align-items:center !important;
}
.ap_hero_compact .ap_login_logo .logo_header{
  display:none !important;
}
.ap_header_menu_btn span{
  display:block; width:100%; height:2px; border-radius:2px;
  background:var(--ap-ink); transition:transform .2s ease, opacity .2s ease;
}
.ap_hero_compact .ap_header_menu_btn span{ background:var(--ap-ink); }
.ap_header_menu_btn.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.ap_header_menu_btn.is-active span:nth-child(2){ opacity:0; }
.ap_header_menu_btn.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.ap_header_dropdown{
  position:fixed; left:0; right:0; top:64px;
  background:#fff; border-bottom:1px solid var(--ap-line);
  box-shadow:0 12px 24px rgba(11,37,69,.12);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .25s ease, opacity .2s ease;
  z-index:999;
  padding:0 20px;
}
.ap_header_dropdown.is-open{
  max-height:320px; opacity:1;
  padding:14px 20px 18px;
}
.ap_header_dropdown .content_link_menu{ margin-bottom:8px; }
.ap_header_dropdown .content_link_menu:last-child{ margin-bottom:0; }

.ap_header_overlay{
  position:fixed; inset:0; background:rgba(11,37,69,.25);
  z-index:998; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.ap_header_overlay.is-open{ opacity:1; pointer-events:auto; }


/* ============================================================
   20) SEITEN-KOHÄRENZ — BUGFIX
   Die alte CSS hat 8 verstreute, teils widersprüchliche
   .main_content-Regeln (mit zwei alten Hintergrundbildern,
   nur in einzelnen Mobile-Breakpoints deaktiviert) und 6
   .channel_window_001-Regeln (mit margin-top:150px als
   Reserve-Platz für das alte Hintergrundbild, plus Schatten/
   Rahmen, der wie eine schwebende Karte wirkt statt Teil der
   Seite zu sein). Diese Regeln laufen UNABHÄNGIG vom
   Viewport/Breakpoint, damit auf jedem Gerät nur noch EIN
   durchgehender, heller Hintergrund sichtbar ist.
   ============================================================ */

.main_content{
  background-image:none !important;
  background-color:var(--ap-white) !important;
  min-height:0 !important;
  width:100% !important;
}

.channel_window_001{
  margin:0 !important;
  padding:0 20px !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-color:var(--ap-white) !important;
  width:100% !important;
  max-width:480px !important;
  box-sizing:border-box !important;
}

.search_window_001{
  border:none !important;
  box-shadow:none !important;
  background-color:transparent !important;
  margin:0 !important;
}

/* Sauberer Übergang Header -> Content -> Footer, keine Lücken/Kanten */
.top_header{ margin-bottom:0 !important; }
.main_content{ padding-top:0 !important; padding-bottom:0 !important; }
.footer{ margin-top:0 !important; }

.a_headline_edit{
  font-family:'Quicksand',sans-serif !important; font-weight:700 !important;
  color:var(--ap-ink) !important; text-decoration:none !important;
  font-size:.95rem !important;
}
.activity_list_detail_container i{
  font-style:normal; display:inline-block;
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  color:var(--ap-teal); background:var(--ap-paper);
  border-radius:999px; padding:3px 10px; margin:6px 0;
}