* {
  box-sizing: border-box;
}

:root {
  --bg: #f4f2f6;
  --card: #ffffff;
  --text: #241b2f;
  --muted: #6f667b;
  --line: #e7deee;
  --accent: #7f5aa8;
  --accent-soft: #f1e9f8;
  --success: #ecfdf3;
  --error: #fef3f2;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: #ffffff;
  color: var(--text);
  overflow-y: auto;
}

.layout {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: auto;
  padding: 32px 16px calc(100px + env(safe-area-inset-bottom));
  background: #ffffff;
  overflow: visible;
}

/* Eingebettet im Shop bestimmt der Inhalt die Hoehe, nicht der Bildschirm: der Rahmen
   waechst mit (app.js meldet sie der Shop-Seite). Ein min-height von 100dvh waere hier
   die Hoehe des Rahmens selbst — er koennte dann nie wieder kleiner werden. Und die
   grosszuegige Polsterung unten stammt aus der Zeit der schwebenden Hilfe-Blase; im
   Rahmen ist sie nur noch Leerraum, den der Kunde wegscrollen muss. */
.is-embedded .layout {
  min-height: 0;
  padding-bottom: 24px;
}

.card {
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 20px 56px rgba(40, 20, 60, .08);
  overflow: visible;
}

.progress {
  height: 10px;
  background: #ece4f4;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.progress > div {
  width: 10%;
  height: 100%;
  background: linear-gradient(90deg, #b79ad4, #7f5aa8);
  transition: width .25s ease;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 12px;
}

h1,
h2 {
  margin: 0 0 12px;
  line-height: 1.15;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 29px;
}

.intro {
  margin: 0 0 22px;
  color: var(--muted);
}

.offer-hint {
  margin: 14px 0 6px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #f3edfa;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  line-height: 1.45;
}

.fields {
  margin-bottom: 18px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  font-size: 14px;
  font-weight: 700;
}

input[type="email"],
input[type="text"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 16px;
  font: inherit;
  background: #fff;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.options {
  display: grid;
  gap: 12px;
  /* Ohne diesen Abstand klebte auf dem Kuendigungs-Screen das Feld "Magst du uns noch
     etwas mitgeben?" direkt an der letzten Option (Stephan, 22.08.2026). Wo danach
     .actions folgt, kollabieren die Margins - dort aendert sich nichts. */
  margin-bottom: 24px;
}

.option {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  font: inherit;
  cursor: pointer;
  transition: .18s ease;
}

.option small {
  color: var(--muted);
  font-size: 13px;
}

.option:hover,
.option.selected {
  border-color: var(--accent);
  background: #f8f3fc;
  transform: translateY(-1px);
}

.checkbox-list {
  display: grid;
  gap: 10px;
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  line-height: 1.5;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  padding-bottom: env(safe-area-inset-bottom);
}

.actions.end {
  justify-content: flex-end;
}

.actions.between {
  justify-content: space-between;
}

.btn {
  border: 0;
  border-radius: 16px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.btn.primary {
  background: var(--accent);
  color: #fff;
}

.btn.secondary {
  background: var(--accent-soft);
  color: var(--text);
}

.notice {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
}

.notice.error {
  display: block;
  background: var(--error);
  color: #b42318;
}

.notice.success {
  display: block;
  background: var(--success);
  color: #027a48;
}

.global-notice {
  margin: 0 0 18px;
}

.option-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  margin: 6px 0 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.offer-hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbf8fe;
}

.offer-image {
  min-height: 110px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--accent);
  background: linear-gradient(135deg, #efe7f7, #dbc8ee);
}

.offer-kicker {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.subscription-option {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.subscription-option__title {
  font-size: 18px;
  font-weight: 600;
  color: #1d1635;
}

.subscription-option__meta {
  font-size: 14px;
  font-weight: 600;
  color: #6f42c1;
}

.subscription-option__subline {
  font-size: 14px;
  color: #666666;
}

.subscription-option.is-active .subscription-option__meta {
  color: #2e7d32;
}

.subscription-option.is-paused .subscription-option__meta {
  color: #a06a00;
}

.subscription-option.is-cancelled .subscription-option__meta {
  color: #8a8a8a;
}

.hidden {
  display: none !important;
}

#progressBar {
  height: 100%;
  background-color: #845ec2;
  width: 0%;
  transition: width 0.4s ease-in-out;
}

@media (max-width: 640px) {
  h1 {
    font-size: 29px;
  }

  h2 {
    font-size: 24px;
  }

  .layout {
    min-height: auto;
    height: auto;
    padding: 20px 12px 110px;
    overflow: visible;
  }

  .card {
    padding: 20px;
    border-radius: 22px;
    overflow: visible;
  }

  .offer-hero {
    grid-template-columns: 1fr;
  }

  .option {
    padding: 16px;
  }

  .actions {
    margin-top: 22px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .actions.between {
    gap: 12px;
  }

  .btn {
    padding: 14px 18px;
  }

  /* Als Kacheln kostet die Verlustliste auf dem Handy rund 240 px, ohne dass die
     Kacheln etwas erklaeren. Als Zeilen steht derselbe Text da, und die Frage
     "Wann soll dein Abo enden?" rueckt mit aufs Bild (02.09.2026). */
  .loss-list li {
    background: none;
    border-radius: 0;
    padding: 9px 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  .loss-list li:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }
}

/* Optionaler Notfall-Fix, falls einzelne alte Android-Browser die Buttons trotzdem abschneiden.
   Nur aktivieren, wenn der normale Fix nicht reicht.

@media (max-width: 640px) {
  .actions.between {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
    z-index: 20;
  }
}
*/

/* Hinweis auf eine bereits vorgemerkte Kündigung, oberhalb der Retention-Optionen.
   Bewusst ruhig gehalten: es ist eine Information, keine Warnung — der Kunde hat die
   Kündigung ja selbst ausgelöst. */
.scheduled-cancel-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid #373737;
  background: #f6f6f4;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: #373737;
  text-align: left;
}

/* --- Grund-zuerst-Routing (21.08.2026) --- */

/* Kuendigen ist auf dem Startscreen bewusst ein Textlink, kein gleichwertiger Button:
   normal gesetzt und kleiner, damit er neben den Alternativen nicht um Aufmerksamkeit
   konkurriert. Findbar bleibt er trotzdem — die Unterstreichung macht ihn als Weg kenntlich. */
.btn.link {
  background: none;
  color: var(--muted, #6b7280);
  font-weight: 400;
  font-size: 0.9em;
  text-decoration: underline;
  padding: 14px 4px;
}

.btn.link:hover {
  color: var(--text);
}

/* Der Kern des Angebots — eine ruhige Box, kein zweiter Button. */
.save-highlight {
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 18px 0;
  line-height: 1.5;
}

.save-highlight small {
  display: inline-block;
  margin-top: 6px;
  opacity: .8;
}

/* Zweizeilige Optionen (Titel + Erklaerung) auf Start- und Grund-Screen. */
.option strong {
  display: block;
  margin-bottom: 2px;
}

.option small {
  display: block;
  margin-top: 2px;
  opacity: .75;
  font-weight: 500;
  font-size: .92em;
  line-height: 1.4;
}

.option[hidden] {
  display: none;
}

/* --- Loyalty-Header und Verlustliste (Robins Entwurf, 21.08.2026) --- */

.club-header {
  background: var(--accent-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.club-header[hidden] { display: none; }

.club-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.club-tier {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .78em;
  font-weight: 800;
  white-space: nowrap;
}

.club-tier[hidden] { display: none; }

.club-header__stats {
  display: flex;
  gap: 8px;
}

/* Die Kacheln teilen sich die Breite gleichmaessig, egal ob es zwei oder drei sind. */
.club-stat {
  flex: 1 1 0;
  text-align: center;
  line-height: 1.25;
}

.club-stat + .club-stat {
  border-left: 1px solid rgba(0, 0, 0, .12);
}

.club-stat strong {
  display: block;
  font-size: 1.25em;
  color: var(--accent);
}

.club-stat span {
  font-size: .8em;
  opacity: .8;
}

/* Verlustliste: das rote X traegt die Aussage. Durchgestrichener Text war unleserlich. */
.loss-list {
  list-style: none;
  margin: 20px 0 8px;
  padding: 0;
}

.loss-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(0, 0, 0, .035);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  line-height: 1.4;
  text-align: left;
}

.loss-list__question {
  margin-top: 24px;
  margin-bottom: 4px;
}

/* --- Club-Liste und Hilfe-Bubble (Robins Entwurf) --- */

.club-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  text-align: left;
}

.club-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}

.club-list li + li {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.club-list small {
  display: block;
  opacity: .75;
  line-height: 1.4;
}

/* Sitzt IN der Karte unten rechts (Robins Entwurf). Bewusst nicht position:fixed:
   im Shop steckt das Formular in einem Rahmen, dort haengt "fixed" am Rahmenende
   statt am Bildschirm und ist praktisch unsichtbar. */
.help-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 18px;
}

.help-bubble__toggle {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #2f2f33;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.help-bubble__panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  padding: 14px 16px;
  margin-top: 10px;
  max-width: min(280px, 100%);
  text-align: left;
  line-height: 1.5;
  font-size: .92em;
}

.help-bubble__panel[hidden] { display: none; }

.help-bubble__panel p { margin: 6px 0 0; }

.help-bubble__hours { opacity: .75; }

/* Preisvergleich im Upgrade (Robins Entwurf): die neue Zahl traegt, die alte steht daneben. */
.price-compare {
  display: block;
  margin: 6px 0 4px;
}

.price-new {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--accent);
}

.price-compare s {
  opacity: .6;
  margin-left: 4px;
}