/*
 * Kurskauf: der Knopf am Kurs, das Fenster "Kurs freischalten", die
 * Bezahlseite, "Deine Kurse" im Profil.
 * Alle Farben, Schriftgroessen und Radien kommen aus dem Kern.
 */

/* Der Knopf, der das Fenster oeffnet */
.akk-oeffner {
  cursor: pointer;
}
.akk-oeffner--kursseite {
  width: 100%;
  margin-top: 1rem;
}
.akk-oeffner--probe {
  margin-top: .75rem;
}

/* Das Fenster */
/* Der Anlass vor dem Angebot: das rote Hinweisfeld des Kerns. */
.akk-fenster__grund {
  margin: 0 0 1.1rem;
}
.akk-fenster__grund p {
  margin: 0;
  font-size: var(--schrift-groesse-15);
  font-weight: var(--schrift-gewicht-halbfett);
}
.akk-fenster__grund[hidden],
.akk-fenster__antwort[hidden] {
  display: none;
}
.akk-fenster__kurs {
  margin: 0 0 .15rem;
  font-size: var(--schrift-groesse-17);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text);
}
.akk-fenster__preis {
  margin: 0 0 1rem;
  font-size: var(--schrift-groesse-15);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text-mittel);
}
.akk-fenster__text {
  margin: 0 0 1rem;
  font-size: var(--schrift-groesse-15);
  line-height: 1.6;
  color: var(--farbe-text-mittel);
}
.akk-fenster__form {
  margin: 0;
}
.akk-fenster__knopf {
  cursor: pointer;
}
/* Die Antwort nach "Bezahl-Link anfordern". Steht sie unter dem Knopf
   (bei einem Fehler bleibt er stehen), haelt sie Abstand zu ihm. */
.akk-fenster__antwort {
  margin: 0;
}
.akk-fenster__rumpf:not([hidden]) + .akk-fenster__antwort {
  margin-top: 1.25rem;
}
.akk-fenster__antwort p {
  margin: 0;
  font-size: var(--schrift-groesse-15);
  line-height: 1.6;
}

/* Die Bezahlseite */
.akk-seite__kopf {
  margin: 0 0 1.25rem;
}
.akk-seite__fuer {
  margin: 0 0 .35rem;
  font-size: var(--schrift-groesse-17);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text);
}
.akk-seite__text {
  margin: 0 0 .5rem;
  font-size: var(--schrift-groesse-15);
  line-height: 1.6;
  color: var(--farbe-text-mittel);
}

/* "Deine Kurse" im Profil: je Kurs eine schlanke Zeile, links Name,
   Schild und ein Satz, rechts ein kleiner Knopf. */
.akk-kurse {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--farbe-linie);
}
.akk-kurs {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.akk-kurs__text {
  flex: 1;
  min-width: 0;
}
.akk-kurs__weg {
  flex: none;
}
.akk-kurs__weg .mx-knopf {
  white-space: nowrap;
  text-decoration: none;
}
.akk-kurs__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  margin: 0 0 .2rem;
}
.akk-kurs__titel {
  font-size: var(--schrift-groesse-16);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text);
  text-decoration: none;
}
.akk-kurs__stand {
  margin: 0;
  font-size: var(--schrift-groesse-14);
  line-height: 1.5;
  color: var(--farbe-text-mittel);
}
.akk-kurs__marke {
  display: inline-block;
  padding: .1rem .55rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  font-size: var(--schrift-groesse-12);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--farbe-text-mittel);
}
.akk-kurs--aktiv .akk-kurs__marke,
.akk-kurs--wartet .akk-kurs__marke {
  border-color: var(--farbe-marke);
  color: var(--farbe-marke);
}
.akk-kurse__weitere {
  margin: 1rem 0 0;
  font-size: var(--schrift-groesse-15);
}

.akk-kurs__widerruf {
  margin-top: .2rem;
}

/* "Kontoinhaber" unter den Kursen: nur zum Lesen. */
.akk-inhaber {
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--farbe-linie);
}
.akk-inhaber__titel {
  margin: 0;
  font-size: var(--schrift-groesse-16);
  font-weight: var(--schrift-gewicht-halbfett);
  color: var(--farbe-text);
}
.akk-inhaber__unter,
.akk-inhaber__hinweis {
  margin: 0 0 .6rem;
  font-size: var(--schrift-groesse-14);
  line-height: 1.5;
  color: var(--farbe-text-mittel);
}
.akk-inhaber__angaben {
  margin: 0 0 .6rem;
  font-size: var(--schrift-groesse-15);
  color: var(--farbe-text);
}
.akk-inhaber__angaben > div {
  display: flex;
  gap: .75rem;
  padding: .15rem 0;
}
.akk-inhaber__angaben dt {
  flex: 0 0 4.5rem;
  margin: 0;
  color: var(--farbe-text-mittel);
}
.akk-inhaber__angaben dd {
  margin: 0;
}

/* Die Widerrufsseite: ein schlichtes Formular. */
.akk-seite--widerruf {
  max-width: 560px;
}
.akk-seite--widerruf .mx-meldekasten {
  margin: 0 0 1rem;
}
.akk-seite--widerruf .mx-meldekasten p {
  margin: 0;
}
.akk-widerruf {
  margin: 1rem 0 1.25rem;
}
.akk-widerruf__feld {
  display: block;
  margin: 0 0 .9rem;
}
.akk-widerruf__name {
  display: block;
  margin: 0 0 .25rem;
  font-size: var(--schrift-groesse-14);
  color: var(--farbe-text-mittel);
}
.akk-widerruf__eingabe {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--farbe-linie-mittel);
  border-radius: var(--radius-8);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--schrift-groesse-16);
}
.akk-widerruf__hilfe {
  display: block;
  margin: .25rem 0 0;
  font-size: var(--schrift-groesse-14);
  color: var(--farbe-text-mittel);
}
/* Das Feld, das nur Programme sehen. */
.akk-widerruf__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.akk-widerruf .mx-knopf {
  cursor: pointer;
}

/* Am Telefon rutscht der Knopf unter den Text. */
@media (max-width: 520px) {
  .akk-kurs {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }
}