@charset "utf-8";

/*
  Sternpower – Sendeplan Theme Override
  Final-Version
  - Sternpower Look
  - starke Mobile-Kartenansicht
  - harmonischer Desktop
  - Heute-Tab edler
  - Zeit links besser sichtbar
  - Moderator rechts schöner eingebettet
*/

/* -------------------------------------------------------
   Design Tokens
------------------------------------------------------- */
:root{
  --sp-primary:#19a8bb;
  --sp-primary-2:#30c7d3;
  --sp-primary-3:#67e5ef;

  --sp-accent:#d3745d;
  --sp-accent-2:#ef9c52;

  --sp-bg:#081015;
  --sp-surface:#0d171d;
  --sp-surface-2:#102029;
  --sp-surface-3:#13303a;
  --sp-surface-4:#0b1620;

  --sp-border:rgba(25,168,187,.24);
  --sp-border-strong:rgba(48,199,211,.42);
  --sp-border-soft:rgba(25,168,187,.14);

  --sp-text:#edf8f9;
  --sp-muted:rgba(237,248,249,.76);
  --sp-muted-2:rgba(237,248,249,.56);

  --sp-shadow:0 14px 38px rgba(0,0,0,.34);
  --sp-shadow-soft:0 10px 22px rgba(0,0,0,.24);
  --sp-glow:0 0 0 1px rgba(48,199,211,.18), 0 0 20px rgba(48,199,211,.10);
  --sp-glow-strong:0 0 0 1px rgba(48,199,211,.35), 0 0 22px rgba(48,199,211,.22);

  --sp-radius:20px;
  --sp-radius-sm:14px;
  --sp-radius-pill:999px;
}

/* -------------------------------------------------------
   Base
------------------------------------------------------- */
html, body{
  height:100%;
}

*, *::before, *::after{
  box-sizing:border-box;
}

body{
  margin:0;
  color:var(--sp-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: #0d0d0d;
}

a{
  color:var(--sp-primary);
  transition:color .18s ease, opacity .18s ease;
}

a:hover{
  color:var(--sp-primary-2);
}

.form-control:disabled,
.form-control[readonly]{
  background-color:#2e2e2f;
  opacity:1;
}

#content img,
#wrapper img,
.table img{
  height:auto !important;
  max-width:100%;
}

/* -------------------------------------------------------
   Wrapper / Grundkarte
------------------------------------------------------- */
#wrapper.container{
  max-width:1120px;
  margin:22px auto;
  padding:0;
  background:linear-gradient(180deg, rgba(16,32,41,.88) 0%, rgba(9,18,24,.94) 100%);
  border:1px solid var(--sp-border);
  border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow), var(--sp-glow);
  overflow:hidden;
}

#content.col-12{
  background:transparent;
  color:var(--sp-text);
  padding:18px 18px 12px;
}

/* -------------------------------------------------------
   Eingebetteter Modus
------------------------------------------------------- */
.breadcrumb-area,
.breadcrumb-section,
#breadcrumb-section,
.breadcrumb,
.page-title-area,
.page-title,
.page-header{
  display:none !important;
}

#content,
.main-content,
.container-full{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* -------------------------------------------------------
   Topbar / Footer
------------------------------------------------------- */
nav.bg-dark,
.footer.bg-dark{
  background:rgba(13,23,29,.94) !important;
  border-bottom:1px solid var(--sp-border-soft);
}

.footer{
  height:auto;
  padding:12px 14px;
  border-top:1px solid var(--sp-border);
  color:var(--sp-muted);
  background:linear-gradient(180deg, rgba(12,22,28,.95) 0%, rgba(9,18,24,.98) 100%) !important;
}

.footer a{
  color:var(--sp-text);
  text-decoration:none;
}

.footer a:hover{
  color:var(--sp-primary-2);
}

/* -------------------------------------------------------
   Tabs / Tage oben
------------------------------------------------------- */
#headnav.nav-tabs{
  border:0;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 0 12px;
}

#headnav.nav-tabs .nav-item,
#headnav.nav-tabs li{
  margin:0;
  float:none !important;
}

#headnav.nav-tabs .nav-link,
#headnav li a{
  border:0;
  border-radius:var(--sp-radius-pill);
  padding:10px 15px;
  color:var(--sp-muted);
  background:linear-gradient(180deg, rgba(18,42,52,.65) 0%, rgba(12,26,33,.82) 100%);
  box-shadow:inset 0 0 0 1px rgba(25,168,187,.10);
  transition:transform .14s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

#headnav.nav-tabs .nav-link:hover,
#headnav li a:hover{
  color:var(--sp-text);
  background:linear-gradient(180deg, rgba(24,74,89,.82) 0%, rgba(14,39,49,.95) 100%);
  box-shadow:var(--sp-glow);
  transform:translateY(-1px);
}

#headnav.nav-tabs .nav-link.active,
#headnav.nav-tabs .nav-item.show .nav-link{
  color:#ffffff;
  background:linear-gradient(135deg, rgba(25,168,187,.96) 0%, rgba(48,199,211,.94) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 22px rgba(48,199,211,.22),
    0 10px 22px rgba(0,0,0,.18);
  text-shadow:0 0 10px rgba(255,255,255,.15);
}

/* -------------------------------------------------------
   Formulare / Filter
------------------------------------------------------- */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=search],
input[type=number],
select,
textarea,
.form-control,
.custom-select{
  background:rgba(19,48,58,.54);
  border:1px solid rgba(25,168,187,.26);
  color:var(--sp-text);
  border-radius:12px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.custom-select:focus{
  outline:none;
  border-color:rgba(48,199,211,.58);
  box-shadow:0 0 0 3px rgba(25,168,187,.16), 0 0 18px rgba(48,199,211,.08);
}

label,
abbr[title]{
  color:var(--sp-muted);
}

.input-group-text{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.375rem .75rem;
  margin-bottom:0;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--sp-text);
  text-align:center;
  white-space:nowrap;
  background:rgba(13,23,29,.96);
  border:1px solid rgba(25,168,187,.22);
  border-radius:12px;
}

/* -------------------------------------------------------
   Buttons
------------------------------------------------------- */
.btn{
  border-radius:12px;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-2) 100%);
  border-color:transparent;
  box-shadow:0 8px 18px rgba(25,168,187,.18);
}

.btn-primary:hover{
  background:linear-gradient(135deg, #22b2c5 0%, #46d6e0 100%);
  border-color:transparent;
}

.btn-danger{
  background:linear-gradient(135deg, var(--sp-accent) 0%, var(--sp-accent-2) 100%);
  border-color:transparent;
}

.btn-danger:hover{
  background:linear-gradient(135deg, #dc816c 0%, #f3ac69 100%);
  border-color:transparent;
}

.btn-secondary,
.btn-light{
  background:rgba(20,42,51,.66);
  border-color:rgba(25,168,187,.18);
  color:var(--sp-text);
}

.btn-secondary:hover,
.btn-light:hover{
  background:rgba(20,42,51,.88);
  border-color:rgba(48,199,211,.34);
  color:var(--sp-text);
}

/* -------------------------------------------------------
   Tabellen allgemein
------------------------------------------------------- */
.table{
  color:var(--sp-text);
  background:rgba(9,18,24,.30);
  margin-bottom:0;
}

.table thead th{
  border-bottom:1px solid rgba(25,168,187,.20);
  background:linear-gradient(180deg, rgba(18,42,52,.82) 0%, rgba(13,29,36,.92) 100%);
  color:var(--sp-text);
  font-weight:800;
}

.table td,
.table th{
  vertical-align:middle;
  border:1px solid rgba(25,168,187,.18);
}

.table td{
  background:rgba(8,18,27,.42);
}

.table-striped tbody tr:nth-of-type(odd) td{
  background:rgba(12,24,32,.52);
}

.table-hover tbody tr:hover td{
  background:rgba(18,52,63,.48);
}

.table-success,
.table-success > td,
.table-success > th{
  background:rgba(18,42,52,.72) !important;
}

.table-info,
.table-info > td,
.table-info > th{
  background:rgba(20,42,51,.56);
}

/* -------------------------------------------------------
   Desktop: harmonische Spalten
------------------------------------------------------- */
@media (min-width: 992px){

  .table.table-striped.table-md-responsive{
    table-layout:fixed !important;
    width:100% !important;
  }

  .table.table-striped.table-md-responsive tr td:nth-child(1),
  .table.table-striped.table-md-responsive tr th:nth-child(1){
    width:20% !important;
  }

  .table.table-striped.table-md-responsive tr td:nth-child(2),
  .table.table-striped.table-md-responsive tr th:nth-child(2){
    width:52% !important;
  }

  .table.table-striped.table-md-responsive tr td:nth-child(3),
  .table.table-striped.table-md-responsive tr th:nth-child(3){
    width:28% !important;
  }

  .table.table-striped.table-md-responsive th{
    font-size:18px !important;
    font-weight:700 !important;
    text-align:center !important;
    padding:14px 10px !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(1),
  .table.table-striped.table-md-responsive td:nth-child(3){
    vertical-align:middle !important;
    text-align:center !important;
    padding:24px 16px !important;
  }

  /* Zeit links als kleine Infobox */
  .table.table-striped.table-md-responsive td:nth-child(1){
    font-size:16px !important;
    font-weight:600 !important;
    color:#ffffff !important;
    text-shadow:0 0 8px rgba(74,214,255,.16);
  }

  .table.table-striped.table-md-responsive td:nth-child(1) br{
    display:none !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(1) *{
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.5 !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(1) > *,
  .table.table-striped.table-md-responsive td:nth-child(1) > div,
  .table.table-striped.table-md-responsive td:nth-child(1) > p{
    display:inline-block;
    padding:12px 16px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(18,42,52,.62) 0%, rgba(11,22,29,.92) 100%);
    border:1px solid rgba(48,199,211,.16);
    box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
  }

  .table.table-striped.table-md-responsive td:nth-child(2){
    text-align:center !important;
    padding:16px 18px 18px !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(2) strong,
  .table.table-striped.table-md-responsive td:nth-child(2) b{
    font-size:18px !important;
    line-height:1.3 !important;
    display:inline-block !important;
    margin-bottom:6px !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(2) p,
  .table.table-striped.table-md-responsive td:nth-child(2) span,
  .table.table-striped.table-md-responsive td:nth-child(2) div{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(2) img{
    display:block !important;
    margin:12px auto 0 auto !important;
    max-width:400px !important;
    width:100% !important;
    height:auto !important;
    border-radius:20px !important;
    border:1px solid rgba(48,199,211,.24) !important;
    box-shadow:0 12px 26px rgba(0,0,0,.26), 0 0 0 1px rgba(48,199,211,.08) !important;
  }

  .table.table-striped.table-md-responsive td:nth-child(3) img{
    width:105px !important;
    height:105px !important;
    max-width:105px !important;
    border-radius:999px !important;
    object-fit:cover !important;
    display:block !important;
    margin:10px auto !important;
    border:2px solid rgba(74,214,255,.20) !important;
    box-shadow:
      0 0 16px rgba(74,214,255,.14),
      0 8px 18px rgba(0,0,0,.20) !important;
  }
}

/* -------------------------------------------------------
   Sendungsbereich allgemein
------------------------------------------------------- */
.table td:nth-child(2){
  text-align:center;
  line-height:1.5;
  font-weight:600;
}

.table td:nth-child(2) p,
.table td:nth-child(2) div,
.table td:nth-child(2) span,
.table td:nth-child(2) h1,
.table td:nth-child(2) h2,
.table td:nth-child(2) h3{
  text-align:center !important;
}

/* Moderatorbild Standard */
.table td:nth-child(3) img{
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}

/* -------------------------------------------------------
   Labels / Alerts
------------------------------------------------------- */
span.label{
  display:inline-block;
  background:rgba(20,42,51,.76);
  border:1px solid rgba(25,168,187,.20);
  color:var(--sp-text);
  padding:4px 10px;
  border-radius:999px;
}

span.label-red{ background:rgba(211,116,93,.88); }
span.label-orange{ background:rgba(239,156,82,.88); }
span.label-green{ background:rgba(93,193,93,.70); }

.alert-info{
  color:var(--sp-text);
  background:rgba(25,168,187,.14);
  border-color:rgba(48,199,211,.30);
}

/* -------------------------------------------------------
   OnAir
------------------------------------------------------- */
body#onair_body{
  font-size:20px;
  color:var(--sp-text);
  text-align:center;
  margin-left:1rem;
}

/* -------------------------------------------------------
   Tablet
------------------------------------------------------- */
@media (max-width: 1200px){
  #wrapper.container{
    margin:14px;
  }
}

@media (max-width: 768px){
  #content.col-12{
    padding:14px 12px 10px;
  }

  #headnav.nav-tabs .nav-link,
  #headnav li a{
    padding:8px 12px;
  }
}

/* =======================================================
   MOBILE (<= 767px)
======================================================= */
@media (max-width: 767px){

  html,
  body{
    overflow-x:hidden !important;
  }

  #wrapper.container{
    width:calc(100% - 16px) !important;
    max-width:none !important;
    margin:8px !important;
    border-radius:16px !important;
    overflow:hidden !important;
    box-shadow:0 10px 24px rgba(0,0,0,.30), 0 0 0 1px rgba(48,199,211,.16);
  }

  #content.col-12{
    padding:10px !important;
  }

  /* Tagesnavigation */
  #headnav.nav-tabs{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:6px !important;
    padding-bottom:8px !important;
  }

  #headnav.nav-tabs .nav-link,
  #headnav li a{
    min-width:0 !important;
    width:auto !important;
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    border-radius:14px !important;
  }

  #headnav.nav-tabs .nav-link.active,
  #headnav.nav-tabs .nav-item.show .nav-link{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 0 18px rgba(48,199,211,.24) !important;
  }

  /* Filter untereinander */
  .input-group{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .input-group-prepend,
  .input-group-append{
    display:contents !important;
  }

  .input-group-text,
  .custom-select,
  .form-control,
  .input-group .btn,
  select,
  input,
  button{
    width:100% !important;
    max-width:100% !important;
    border-radius:12px !important;
  }

  /* Tabelle -> Karten */
  .table.table-md-responsive thead{
    display:none !important;
  }

  .table.table-md-responsive,
  .table.table-md-responsive tbody,
  .table.table-md-responsive tr,
  .table.table-md-responsive td{
    display:block !important;
    width:100% !important;
  }

  .table.table-md-responsive tbody tr:not(.table-success){
    margin:14px 0 !important;
    padding:14px !important;
    background:linear-gradient(180deg, rgba(16,32,41,.88) 0%, rgba(9,18,24,.96) 100%) !important;
    border:1px solid rgba(25,168,187,.18) !important;
    border-radius:16px !important;
    box-shadow:0 12px 28px rgba(0,0,0,.24), 0 0 0 1px rgba(48,199,211,.08) !important;
  }

  .table.table-md-responsive td{
    border:0 !important;
    padding:9px 0 !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    background:transparent !important;
  }

  .table.table-md-responsive td::before{
    display:block !important;
    font-weight:800 !important;
    margin-bottom:4px !important;
    color:var(--sp-muted) !important;
    letter-spacing:.01em;
  }

  .table.table-md-responsive td:nth-child(1)::before{ content:"Zeit"; }
  .table.table-md-responsive td:nth-child(2)::before{ content:"Sendung"; }
  .table.table-md-responsive td:nth-child(3)::before{ content:"Moderator"; }
  .table.table-md-responsive td:nth-child(4)::before{ content:"Status"; }
  .table.table-md-responsive td:nth-child(5)::before{ content:"Aktion"; }

  .table.table-md-responsive td:nth-child(1){
    font-weight:700 !important;
    color:#ffffff !important;
  }

  .table.table-md-responsive td:nth-child(2){
    font-size:15px !important;
    line-height:1.4 !important;
  }

  .table.table-md-responsive td:nth-child(2) img{
    display:block !important;
    margin:10px auto 2px !important;
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    border-radius:14px !important;
  }

  .table.table-md-responsive td:nth-child(3) img{
    display:block !important;
    margin:8px auto 0 !important;
    width:88px !important;
    height:88px !important;
    max-width:88px !important;
    border-radius:999px !important;
    object-fit:cover !important;
  }

  /* Datums-Trenner */
  .table.table-md-responsive tr.table-success{
    margin:12px 0 !important;
    padding:10px 14px !important;
    border-radius:14px !important;
    background:linear-gradient(180deg, rgba(19,48,58,.74) 0%, rgba(13,29,36,.92) 100%) !important;
    box-shadow:0 0 0 1px rgba(48,199,211,.10) inset !important;
  }

  .table.table-md-responsive tr.table-success td{
    text-align:center !important;
    font-weight:900 !important;
    padding:0 !important;
  }

  .table.table-md-responsive tr.table-success td::before{
    display:none !important;
  }

  /* Footer / Login */
  .footer{
    height:auto !important;
    padding:10px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
    text-align:center !important;
  }

  .footer ul{
    float:none !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    gap:8px !important;
  }

  .footer ul li{
    float:none !important;
    display:block !important;
  }

  .footer ul li a,
  .footer a.sign-in{
    display:block !important;
    min-width:92px !important;
    padding:8px 12px !important;
    line-height:1.3 !important;
    text-align:center !important;
    border-left:0 !important;
    border-radius:999px !important;
    background:linear-gradient(180deg, rgba(20,42,51,.88) 0%, rgba(11,23,29,.96) 100%) !important;
    border:1px solid rgba(25,168,187,.18) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.20) !important;
  }

  .footer ul li a:hover,
  .footer a.sign-in:hover{
    color:#ffffff !important;
    border-color:rgba(48,199,211,.34) !important;
    box-shadow:0 0 0 1px rgba(48,199,211,.16), 0 0 14px rgba(48,199,211,.12) !important;
  }
}



/* =======================================================
   WUNSCHBOX – Sternpower
======================================================= */
.sp-wunschbox-wrap{
  padding:10px 4px 16px;
}

.sp-wunschbox-head{
  text-align:center;
  padding:6px 10px 18px;
  max-width:860px;
  margin:0 auto;
}

.sp-wunschbox-kicker{
  display:inline-block;
  padding:7px 14px;
  margin-bottom:12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(25,168,187,.18) 0%, rgba(48,199,211,.12) 100%);
  border:1px solid rgba(48,199,211,.18);
  color:var(--sp-primary-3);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.sp-wunschbox-head h2{
  margin:0 0 10px;
  color:var(--sp-text);
  font-size:34px;
  line-height:1.15;
  font-weight:800;
}

.sp-wunschbox-head p{
  margin:0 auto;
  max-width:760px;
  color:var(--sp-muted);
  font-size:16px;
  line-height:1.65;
}

.sp-wunschbox-card{
  height:100%;
  padding:22px 18px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(15,30,38,.92) 0%, rgba(8,17,22,.96) 100%);
  border:1px solid rgba(25,168,187,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(48,199,211,.05) inset;
}

.sp-wunschbox-card--meta{
  margin-bottom:14px;
}

.sp-wunschbox-sectiontitle{
  margin:0 0 16px;
  color:var(--sp-text);
  font-size:22px;
  line-height:1.2;
  font-weight:800;
}

.sp-wunschbox-fields .input-group{
  margin:0 0 12px !important;
  flex-wrap:nowrap;
  align-items:stretch;
}

.sp-wunschbox-fields .input-group-prepend{
  display:flex;
}

.sp-wunschbox-fields .input-group-text{
  min-width:140px;
  justify-content:flex-start;
  padding:12px 14px;
  font-size:15px;
  font-weight:700;
  color:var(--sp-text);
  background:linear-gradient(180deg, rgba(18,42,52,.82) 0%, rgba(13,29,36,.94) 100%);
  border:1px solid rgba(25,168,187,.20);
  border-radius:14px 0 0 14px;
  box-shadow:none;
}

.sp-wunschbox-fields .form-control{
  min-height:52px;
  border-left:0;
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.96);
  color:#0d1f2c;
  font-size:16px;
  box-shadow:none;
}

.sp-wunschbox-fields .form-control:focus{
  background:#fff;
}

.sp-wunschbox-textarea.form-control{
  width:100% !important;
  min-height:230px;
  padding:16px 18px;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(15,52,64,.64) 0%, rgba(14,38,47,.84) 100%);
  border:1px solid rgba(25,168,187,.22);
  color:var(--sp-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  resize:vertical;
}

.sp-wunschbox-textarea.form-control::placeholder{
  color:rgba(237,248,249,.54);
}

.sp-wunschbox-textarea.form-control:focus{
  border-color:rgba(48,199,211,.42);
  box-shadow:0 0 0 3px rgba(25,168,187,.10), 0 0 16px rgba(48,199,211,.08);
}

.sp-wunschbox-hint,
.sp-wunschbox-note{
  margin-top:14px;
  border-radius:14px;
  padding:12px 14px;
  background:rgba(19,48,58,.34);
  border:1px solid rgba(25,168,187,.14);
  color:var(--sp-muted);
  font-size:14px;
  line-height:1.6;
}

.sp-wunschbox-hint strong{
  color:var(--sp-text);
}

.sp-wunschbox-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:18px;
}

.sp-wunschbox-submit.btn{
  min-width:220px;
  min-height:50px;
  border-radius:999px;
  padding:12px 22px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-2) 100%) !important;
  border:0 !important;
  box-shadow:0 10px 22px rgba(25,168,187,.18);
}

.sp-wunschbox-submit.btn:hover{
  background:linear-gradient(135deg, #22b2c5 0%, #46d6e0 100%) !important;
}

.sp-wunschbox-form .g-recaptcha{
  margin-top:16px;
}

.sp-wunschbox-form .col-12.my-3{
  margin-top:18px !important;
  margin-bottom:0 !important;
}

/* Desktop: Wunschbox größer und wertiger */
@media (min-width: 992px){
  .sp-wunschbox-wrap{
    padding:12px 8px 18px;
  }

  .sp-wunschbox-head{
    padding-bottom:22px;
  }

  .sp-wunschbox-card{
    min-height:100%;
  }
}

/* Tablet / Mobile */
@media (max-width: 991px){
  .sp-wunschbox-head h2{
    font-size:28px;
  }

  .sp-wunschbox-card{
    margin-bottom:14px;
  }
}

@media (max-width: 767px){
  .sp-wunschbox-wrap{
    padding:6px 0 8px;
  }

  .sp-wunschbox-head{
    padding:2px 4px 14px;
  }

  .sp-wunschbox-head h2{
    font-size:24px;
  }

  .sp-wunschbox-head p{
    font-size:15px;
    line-height:1.55;
  }

  .sp-wunschbox-card{
    padding:18px 14px 16px;
    border-radius:16px;
  }

  .sp-wunschbox-sectiontitle{
    font-size:19px;
    margin-bottom:14px;
  }

  .sp-wunschbox-fields .input-group{
    flex-wrap:wrap;
  }

  .sp-wunschbox-fields .input-group-text{
    width:100%;
    min-width:100%;
    border-radius:12px 12px 0 0;
    justify-content:flex-start;
  }

  .sp-wunschbox-fields .form-control{
    width:100%;
    border-left:1px solid rgba(25,168,187,.20);
    border-top:0;
    border-radius:0 0 12px 12px;
  }

  .sp-wunschbox-textarea.form-control{
    min-height:190px;
    padding:14px 14px;
    border-radius:14px !important;
  }

  .sp-wunschbox-actions{
    justify-content:center;
  }

  .sp-wunschbox-submit.btn{
    width:100%;
    min-width:0;
  }
}