/* Base */
body {
  max-width: 100% !important;
  padding: 0 !important;
}
body.ff2_custom_body {
  background: #eee;
}
.ff2_custom_wrapper {
  width: 960px;
  margin: 0 auto;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 20px;
  font-size: 13px;
}
.ff2_custom_footer {
  clear: both;
  padding-top: 40px;
  padding-bottom: 20px;
}

/* Buttons */
a.btn.btn-danger.btn-block {
  color: #fff !important;
  background: #E91E7C !important;
  padding: 10px 30px !important;
  box-shadow: 0 10px 30px #E91E7C4D !important;
  border-radius: 20px;
  border: none !important;
  opacity: 1;
}
a.btn.btn-danger.btn-block:hover { border: 2px solid #fff !important; }

a.btn.btn-success.btn-block {
  color: #fff !important;
  background: #15A361 !important;
  padding: 10px 30px !important;
  box-shadow: 0 10px 30px #15A3614D !important;
  border-radius: 20px;
  border: none !important;
  opacity: 1;
}
a.btn.btn-success.btn-block:hover { border: 2px solid #fff !important; }

a.btn.btn-default.btn-block,
a.btn.btn-default {
  color: #E91E7C !important;
  background: none;
  padding: 10px 30px !important;
  border: 2px solid #E91E7C;
  border-radius: 20px;
  opacity: 1;
}
a.btn.btn-default.btn-block:hover,
a.btn.btn-default:hover { background: #fff; }

.btn-light {
  border: 1px solid #5DAAAA;
  background: none;
  color: #5DAAAA !important;
  line-height: 3em;
}
.btn-light:hover { background: #5DAAAA !important; color: #fff !important; }

.btn-light2 {
  border: 1px solid #B8005C !important;
  background: none;
  color: #B8005C !important;
  line-height: 3em;
}
.btn-light2:hover { background: #B8005C !important; color: #fff !important; }

.btn-close {
  border-radius: 15px;
  border: 1px solid #5DAAAA;
  background: none;
  color: #5DAAAA !important;
  float: right;
  text-align: center;
  font-weight: 600;
  line-height: 1;
}
.btn-close:hover { background: #5DAAAA !important; color: #fff !important; }

.btn-bold { line-height: 3em; }
.btn-bold:hover { background: #A70455 !important; }
.btn-bold2 { line-height: 3em; background: #5DAAAA !important; }
.btn-bold2:hover { background: #C3DFE4 !important; }

.btn-ekurs {
  border: 1px solid #5DAAAA;
  background: #fff;
  color: #5DAAAA !important;
  line-height: 3em;
}
.btn-ekurs:hover { background: #5DAAAA !important; color: #fff !important; }

/* FFM Button (CTA) */
.ffm-button {
    color: #FFFFFF !important;
    background: #B8005C;
    padding: 10px 30px;
    margin-top: 5px;
    border-radius: 20px;
}

input[type=submit].ffm-button {
    color: #000000 !important;
	background: none;
    padding: 10px 30px;
    margin-top: 5px;
    border-radius: 20px;
    border: 1px solid;
    border-color:#B8005C;
    box-shadow: none;
}

input[type=submit].ffm-button:hover {
    color: #B8005C !important;
	background: #FFFFFF !important;
    border: 1px solid;
    border-color:#B8005C;
}

.ffm-button.nachhol {
    background: #C3DFE0 !important;
    color:black !important;
}

.ffm-button.nachhol:hover {
    background: #C3DFE0 !important;
    color:black !important;
}

.ffm-button-ausgebucht {
  background-color: rgba(233,30,124,.4) !important;
  text-align: center;
  border: none !important;
}
.ffm-button-ausgebucht span { color: #fff !important; font-weight: bold; }
.ffm-button-ausgebucht:hover {
  background-color: rgba(233,30,124,.4) !important;
  border-color: rgba(233,30,124,.4) !important;
  border: none !important;
  cursor: default;
}

/* Submit button variant */
input[type=submit].ffm-button {
  color: #000 !important;
  background: none;
  padding: 10px 30px;
  margin-top: 5px;
  border-radius: 20px;
  border: 1px solid #B8005C;
  box-shadow: none;
  font-weight: bold;
  width: auto !important;
}
input[type=submit].ffm-button:hover {
  color: #B8005C !important;
  background: #fff !important;
  border: 1px solid #B8005C;
}

/* Form inputs */
.ffm-textfeld {
  border-radius: 4px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  color: #666;
  padding: 7px;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 12px;
  line-height: 1.625;
  width: 96%;
}
.ffm-textfeld:focus { border: 1px solid #bbb; }
.ffm-textarea { height: 50px; }
.ffm-captcha { width: 75px !important; float: left; margin: 10px 20px 0 0; }
.ffm-captcha-image { float: left; margin: 0 20px 0 0; }
.row {
  margin-right: 0;
  margin-left: 0;
  padding: 0 0 10px !important;
}

/* Navbar (wie gehabt) */
.navbar-brand { height: auto; max-width: 83%; }
.navbar-brand>img { display: block; float: left; margin-right: 10px; }
.navbar-brand>h2 { color: white; padding: 0; margin: 0; }
.navbar-fixed-top .nav { padding: 15px 0; }
.navbar-fixed-top .navbar-brand { padding: 0 15px; }
@media (min-width:768px) {
  .navbar-fixed-top .navbar-brand { padding: 15px 0; }
}

/* Kursliste Grundlayout */
.ffm-table { width: 100%; font-size: 13px; padding-left: 20px; }
.ffm-row { border-spacing: 0 10px; }
.float-clear { clear: both; }
.kurs-title { text-align: center; margin-bottom: 8px; }

/* Kurslogo */
.ffm-kurslogo {
  width: 160px;
  margin: 0 auto 12px auto;
  float: none;
  display: block;
}
.ffm-kurslogo-col { width: 100% !important; padding: 0 !important; }

/* Kurs-Card: Mobile-first */
.ffm-kurs-row {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);  /* feiner Rand für klare Kante */
  box-shadow: 0 6px 20px rgba(0,0,0,.10); /* kräftigerer Schatten */
  padding: 16px!important;                         /* etwas mehr Luft innen */
  margin-bottom: 22px;                   /* etwas mehr Abstand zwischen Cards */
}


/* Reihenfolge auf Mobile: Infos -> Button -> Freie Plätze */
.ffm-kursinfo-col   { order: 1; width: 100% !important; line-height: 1.35em; color: #011627; }
.ffm-buchungsbutton-col { order: 2; width: 100% !important; padding: 0 !important; }
.ffm-column-freieplaetze {
  order: 3;
  font-weight: bold;
  color: #011627;
  margin: 8px 0 0 0 !important;
  display: block;
}

/* Kursinfos: Label/Highlight */
.ffm-kursinfo-label {
  color: #6b7a86;
  font-weight: 600;
  padding-bottom: 4px;
  line-height: 1.4em;
}
.ffm-kursinfo-highlight { font-weight: bolder; }

.ffm-column-freieplaetze {
    text-align: center;
    margin: 8px 0 0 0 !important; /* bündig unter dem Button */
    display: block;
  }

/* Desktop: Button links, Infos rechts (wie bisher) */
@media (min-width: 1024px) {
  .ffm-kurs-row {
    display: grid; 
    grid-template-columns: 220px 1fr;
    column-gap: 16px;
    align-items: center;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ffm-buchungsbutton-col { order: 1; width: auto !important; align-self: center; }
  .ffm-kursinfo-col { order: 2; width: auto !important; align-self: center; }
  .ffm-kurs-row .ffm-button {
    width: auto; 
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    margin-top: 0;
  }
  .ffm-kurs-row .ffm-column-freieplaetze {
    order: 3; 
    margin-top: 8px !important;
    text-align: center; 
  }
}

@media (max-width: 1023px) {
  .ffm-kurs-row .ffm-buchungsbutton-col {
    margin-top: 12px; /* z. B. 12–16px */
  }
}

/* Tablet: 30/70 Gefühl beibehalten */
@media (min-width: 768px) and (max-width: 1023px) {
  .ffm-kurs-row { padding: 16px; }
  .ffm-button { width: auto; }
}

/* Very small screens */
@media (max-width: 480px) {
  .ffm-kursinfo-col { margin-top: 10px; }
  .ffm-kurs-row { width: 100%; }
  .ffm-button { width: 100%; display: block; text-align:center; }
  .ffm-kurslogo { width: 120px; }
  input[type=radio] { width: 1.3em; height: 1.3em; }
}

/* Gewählter Kurs + Scroll-Anker */
#diemama { scroll-margin-top: 80px; }
p.ffm-active-kurs {
  font-size: 15px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Kursplan (beibehalten, leicht gesäubert) */
.ffm-kursplan { width: 100% !important; padding: 0 !important; line-height: 1.1em; }
.ffm-kursplan-row { border-bottom: 1px solid; }
.ffm-kursplan-col { width: 20% !important; padding: 0 !important; float: left; }
.ffm-kursplan-week { padding: 0 !important; margin: 0 !important; font-style: italic; }
.ffm-kursplan-title { text-align: center; }
.ffm-kursplan-col h3 { font-size: 1.5em !important; }
.ffm-kursplan-kurs { margin: 5px 5px 5px 0 !important; padding: 3px !important; text-align: center; }
.ffm-kursplan-kurslogo { height: 50px !important; text-align: center; padding-top:2px; padding-bottom:2px; }
.ffm-kursplan-name { font-weight: bolder; }
.ffm-kursplan-label { font-style: italic; }
.empty { max-height: 1px; font-size: 0; }
.empty:after { content: '\200b'; }

@media (max-width: 767px) {
  .main-inner { padding-left: 2px !important; padding-right: 2px !important; }
  .article-wrap article { padding: 5px !important; }
  .kurs-title { text-align: center; }
  .ffm-kursplan-kurs {
    margin: 1px !important;
    padding: 0 !important;
    text-align: center;
    font-size-adjust: auto;
  }
  .ffm-kursplan-title { font-size-adjust: auto !important; }
  .complete { display: none; }
}

/* Standard: Keyfacts ausblenden (Desktop zuerst) */
.ffm-kursinfo-col .ffm-keyfacts-textonly {
  display: none !important;
}

.ffm-kursplan-weekdates-v2 {
    color: #A8225C !important;
}

/* Mobile/Tablet bis 1023px: Keyfacts anzeigen */
@media screen and (max-width: 1023px) {
.ffm-kursinfo-col .ffm-keyfacts-textonly {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr; /* drei gleich breite Spalten */
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #011627;
    font-family: "Roboto Condensed","Helvetica Neue",Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
}

/* Ausrichtung pro Spalte */
  .ffm-keyfacts-textonly .kf-day  { justify-self: start;  text-align: left; }
  .ffm-keyfacts-textonly .kf-date { justify-self: center; text-align: center; }
  .ffm-keyfacts-textonly .kf-time { justify-self: end;    text-align: right; white-space: nowrap; }


/* Very small screens Feintuning */
@media screen and (max-width: 480px) {
.ffm-kursinfo-col .ffm-keyfacts-textonly {
    font-size: 15px;
    letter-spacing: 0.01em;
  }
}