/* ==========================================================================
   abo-refresh.css
   Visuelles Redesign der Abo-Bestellstrecke (abo.php).
   WICHTIG: Diese Datei überschreibt NUR Optik/Layout. Sie ändert keine
   name-/id-Attribute und keine Formularlogik. Sie wird zusätzlich zu
   abo.css geladen (nach ihr), damit css/abo.css für andere Seiten
   (z. B. die .kuewi-Kündigungsbox) unverändert bleibt.
   ========================================================================== */

:root {
  --abo-blue: #1E5FA8;
  --abo-blue-dark: #164A85;
  --abo-red: #D6300A;
  --abo-green: #2AA400;
  --abo-bg: #F4F6F9;
  --abo-card-bg: #FFFFFF;
  --abo-border: #E1E5EB;
  --abo-text: #1F2933;
  --abo-text-muted: #6B7684;
  --abo-radius: 6px;
  --abo-shadow: 0 2px 10px rgba(20, 30, 60, 0.06);
  --abo-shadow-hover: 0 4px 18px rgba(20, 30, 60, 0.10);
}

/* Gesamtcontainer als Karte auf hellem Hintergrund */
.abo_content {
  background: var(--abo-bg);
  padding: 12px 14px 18px;
  border-radius: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--abo-text);
  max-width: 560px;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
}

.abo_content form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.abo_content h1,
.abo_content div[style*="font:32px"] {
  font: 700 20px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--abo-blue-dark) !important;
  text-align: center !important;
  width: auto !important;
  margin-bottom: 10px !important;
}
.abo_content div[style*="font:32px"] > div {
  padding: 0 !important;
}

/* Schritt-Header als Badge-Leiste statt reiner Textzeile */
.aboform_header {
  background: var(--abo-blue) !important;
  color: #fff !important;
  font: 700 13px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  padding: 6px 10px !important;
  border-radius: var(--abo-radius) var(--abo-radius) 0 0 !important;
  margin-top: 6px;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aboform_header:first-of-type { margin-top: 0; }
.abo_datenschutz a { color: #D9E8FB !important; font-weight: 600; font-size: 11px !important; }

.abo-step-left { display: flex; align-items: center; gap: 8px; }
.abo-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #fff;
  color: var(--abo-blue);
  font: 700 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Container-Karten: EINE Karte pro Gruppe, nicht pro Zeile, ohne sichtbaren Rand */
.wunschabo_cont,
.abo-card,
.aboform_agb {
  background: var(--abo-card-bg);
  border: none;
  padding: 4px 12px;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.wunschabo_cont {
  border-radius: 0 0 var(--abo-radius) var(--abo-radius);
  padding: 6px;
  overflow: hidden;
}
.abo-card { border-radius: 0 0 var(--abo-radius) var(--abo-radius); margin-bottom: 4px; }

.hr_class {
  display: block;
  background: transparent !important;
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Plan-Auswahl als klickbare Karten */
.wunschabo_text_cont {
  border: none;
  background: #F7F8FA;
  border-radius: var(--abo-radius);
  padding: 6px 8px;
  margin: 3px 0;
  transition: background-color .15s ease;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.wunschabo_text_cont.abo-plan-selected {
  border: none;
  background: #E9F1FC;
}
.wunschabo_auswahl { float: none !important; width: auto !important; margin: 0; padding: 0; }
.abo_radio { margin: 0 !important; }
.wunschabo_text {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  font: 12px/1.25 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  min-width: 0;
}
.wunschabo_text_sm { color: var(--abo-text-muted) !important; font-size: 10px; }
.abo-plan-highlight { color: var(--abo-red); }
.wunschabo_pricebox { text-align: center; }
.wunschabo_preis { float: none !important; margin: 0 !important; font: 700 18px/1.05 Arial, sans-serif !important; }
.wunschabo_preis span { color: var(--abo-blue-dark) !important; font: inherit !important; }
.wunschabo_preis_inf { float: none !important; color: var(--abo-text-muted) !important; font: 9px/1.2 sans-serif !important; margin-top: 2px; }
.wunschabo_hr { display: none; }

/* Formularfelder */
.field_pflicht { color: var(--abo-red) !important; font: 600 11px sans-serif !important; text-align: right; margin: 3px 4px 0 0; }

.pers_data_cont {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 2px 0;
  border-bottom: none;
  margin: 0;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.abo-card > .pers_data_cont:last-child { border-bottom: none; }

.field_name,
.field_name_1,
label.abo-label {
  flex: 0 0 auto;
  width: auto !important;
  text-align: right !important;
  font: 600 12px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--abo-text) !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  height: auto !important;
  padding: 0 !important;
}

.field_cont { flex: 1 1 150px; min-width: 120px; }

/* Name und Vorname bleiben in einer exakt ausgerichteten gemeinsamen Zeile. */
.abo-name-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.abo-name-row > .field_cont { min-width: 0; }
.abo-name-row > .cl { display: none; }
.abo-name-row > .field_name:first-child { text-align: left !important; }

/* Reiner Fließtext-Block (SEPA-Rechtstext) darf kein Flex-Layout bekommen */
.abo-legal-text {
  display: block;
  font: 10px/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--abo-text-muted);
  padding: 4px 0 2px;
}

.abo_field,
input[type="text"].abo_field,
select.dropd {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px !important;
  height: auto !important;
  border: 1px solid var(--abo-border) !important;
  border-radius: 5px !important;
  font: 13px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--abo-text);
  background: #fff;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.abo_field:focus,
select.dropd:focus {
  outline: none !important;
  border-color: var(--abo-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 95, 168, 0.15);
}

/* Zwei Felder nebeneinander auf breiten Screens (Name/Vorname, PLZ/Ort) */
@media (min-width: 560px) {
  .pers_data_cont.abo-row-2 { display: flex; gap: 14px; }
  .pers_data_cont.abo-row-2 > .abo-field-half { flex: 1; }
}

/* Zahlungsart */
div[style*="background:#D3D3D3"] {
  background: #F3F8FF !important;
  border: none;
  border-radius: var(--abo-radius);
  padding: 6px 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bezahlen_radio { margin: 0 !important; }
.bezahlen_txt { margin: 0 !important; font: 600 12px/1.35 sans-serif !important; }
.abo-card > div[style*="width:380px"] {
  float: none !important;
  width: 100% !important;
}

/* Captcha-Block deutlicher absetzen */
.aboform_hinweis {
  background: #F8F8F6 !important;
  border: none;
  border-left: 2px solid #D5B04A;
  border-radius: 4px;
  padding: 4px 8px !important;
  margin: 2px 0 !important;
  font: 10px/1.35 sans-serif !important;
  color: var(--abo-text-muted);
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Bedingungen und Abschlussbutton: feste Zwei-Spalten-Zeile, Button immer darunter. */
.aboform_agb {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 4px 8px;
  border-radius: var(--abo-radius);
  padding: 8px 12px;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.aboform_agb > div:first-child { display: none !important; }
.aboform_agb input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; }
.aboform_agb > div[style*="background:#D60A0A"] {
  float: none !important;
  grid-column: 1;
  margin: 1px 0 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
.aboform_agb > div[style*="width:500px"] {
  float: none !important;
  grid-column: 2;
  width: auto !important;
  margin: 0 !important;
  font: 11px/1.4 sans-serif;
  color: var(--abo-text-muted);
}
.aboform_agb > .cl,
.aboform_agb > br,
.aboform_header + br { display: none; }

/* Submit-Button */
.btn_senden {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
  background: var(--abo-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font: 700 14px sans-serif !important;
  cursor: pointer;
  transition: background .15s ease;
  margin: 4px 0 0 !important;
}
.btn_senden:hover { background: var(--abo-blue-dark) !important; }

/* Live-Hinweise, die abo-form-assist.js einfügt */
.abo-hint {
  font: 12px/1.4 sans-serif;
  margin-top: 4px;
  color: var(--abo-text-muted);
}
.abo-hint.abo-hint-ok { color: var(--abo-green); }
.abo-hint.abo-hint-error { color: var(--abo-red); }

/* Fortschrittsanzeige oben, von abo-form-assist.js befüllt */
.abo-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.abo-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--abo-border);
  transition: background .2s ease;
}
.abo-progress-step.abo-progress-active { background: var(--abo-blue); }

@media (max-width: 480px) {
  .abo_content { padding: 16px 12px 28px; }
  .aboform_header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .abo-name-row {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: 4px;
  }
}

/* Fix: "IHRE VORTEILE"-Checkliste überlappte sich bei Zeilenumbruch (float-Layout ohne verlässliches Clearing) */
.abo_vorteile > div {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 6px 0 !important;
}
.vorteile_chk { float: none !important; flex: 0 0 auto; }
.vorteile_text { float: none !important; margin-top: 0 !important; }

/* Bonus-Banner "6x PDF-Bücher GRATIS" als Text statt Bild */
.abo-bonus-banner {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 4px 8px;
  font: 600 12px/1.3 Arial, sans-serif;
  color: #1F2933;
}
.abo-bonus-arrow { color: var(--abo-red); font-weight: 700; }
.abo-bonus-gratis { color: var(--abo-red); }
.abo-bonus-sub { font: 400 11px sans-serif; color: var(--abo-text-muted); margin-top: 2px; }

/* Sidebar ("IHRE VORTEILE", "Freundschaftswerbung") verkleinern */
.vorteile_head { font: bold 12px Arial !important; padding: 4px !important; }
.abo_vorteile { padding: 6px !important; }
.abo_vorteile .vorteile_text,
.vorteile_text { font-size: 12px !important; }
.abo_vorteile div[style*="font:bold 14px"] { font-size: 12px !important; }
.abo_vorteile div[style*="font: 14px"],
.abo_vorteile div[style*="font:12px"] { font-size: 11px !important; }
.abo_vorteile img[src*="20euro.jpg"] { max-width: 70px !important; height: auto !important; }