/* ==========================================================================
   Zahlungsschritt des Einrichtungsassistenten.
   Eigener Namensraum pgck-, und jede Eigenschaft wird ausdruecklich gesetzt.
   Grund: auf breiten Schirmen brach der alte Schritt auseinander, der
   Mandatstext lief als schmale Grossbuchstaben-Spalte am rechten Rand. Fremde
   Regeln aus anderen Stylesheets hatten auf ihn durchgeschlagen. Hier wird
   nichts geerbt, was das Layout tragen soll.
   ========================================================================== */

.pgck{
  --pgck-tinte:#12203A;
  --pgck-weich:rgba(18,32,58,.56);
  --pgck-leise:rgba(18,32,58,.40);
  --pgck-gold:#B8862B;
  --pgck-gold-tief:#6B4B12;
  --pgck-linie:rgba(18,32,58,.11);
  --pgck-linie-stark:rgba(18,32,58,.20);
  --pgck-flaeche:#FFFFFF;
  --pgck-grund:#F5F1E8;
  --pgck-gruen:#2F6B4F;
  --pgck-rot:#9B2C2C;

  text-align:left;
  color:var(--pgck-tinte);
  font-family:"Inter","Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  text-transform:none;
  letter-spacing:normal;
  line-height:1.5;
}
.pgck *{box-sizing:border-box;text-transform:none;letter-spacing:normal}

/* Die Wizard-Karte ist auf 780px begrenzt, spaeter auf 920px. Fuer sechs
   Formularfelder reicht das, fuer einen zweispaltigen Checkout nicht: auf einem
   breiten Monitor klebte der Inhalt als schmale Saeule in der Mitte, links und
   rechts jeweils ein Drittel leere Flaeche. Nur der Zahlungsschritt hebt die
   Grenze auf, alle uebrigen Schritte bleiben, wie sie sind. */
/* Die Breite haengt AUSSCHLIESSLICH an der Klasse, die checkout-schritt.js
   setzt, wenn der Zahlungsschritt wirklich sichtbar ist.

   Vorher stand hier zusaetzlich ein :has()-Selektor, der auf
   style="display: none" pruefte. Der war falsch: die Wizard-Schritte werden
   ueber die Klasse .active geschaltet (dashboard.css), nicht ueber ein
   style-Attribut. #wizPaymentBody hat nie eines, der Selektor traf also IMMER,
   und alle neun Bildschirme wurden auf 1860px aufgezogen statt nur der
   Zahlungsschritt. Auf einem grossen Monitor lief damit auch die Begruessung
   ueber die ganze Wand. */
.wiz-card.pgck-breit{
  max-width:min(1860px,95vw) !important;
}

/* Zwei Spalten ab Tablet, darunter gestapelt. Genau hier brach es vorher. */
.pgck-spalten{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;text-align:left}
@media(min-width:860px){
  /* stretch statt start: die Uebersicht reicht genauso weit nach unten wie die
     Methodenliste. Sonst hoert sie frueher auf und wirkt abgeschnitten. Der
     Inhalt verteilt sich, die Zusagen ruecken ans untere Ende. */
  .pgck-spalten{grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:stretch}
  .pgck-uebersicht{display:flex;flex-direction:column}
  .pgck-uebersicht .pgck-zusagen{margin-top:auto}
}
/* Grosser Monitor: mehr Platz fuer die Uebersicht, alles eine Spur groesser. */
@media(min-width:1300px){
  .pgck-spalten{grid-template-columns:minmax(0,1fr) 440px;gap:60px;align-items:stretch}
  .pgck-kopf{padding:19px 21px}
  .pgck-name{font-size:15.5px}
  .pgck-koerper{padding:0 21px 21px}
  .pgck input[type=text]{font-size:16.5px;padding:13px 16px}
  .pgck-uebersicht{padding:27px 25px}
  .pgck-plan-name{font-size:22px}
  .pgck-null{font-size:34px}
  .pgck-logo{height:23px}
}

/* Sehr breiter Monitor. Es wachsen vor allem die Abstaende und die Uebersicht,
   nicht die Eingabefelder: ein Feld ueber die halbe Wand liest sich schlechter,
   nicht besser. */
@media(min-width:1700px){
  .pgck-spalten{grid-template-columns:minmax(0,1fr) 500px;gap:74px}
  .pgck-kopf{padding:22px 25px}
  .pgck-koerper{padding:0 25px 25px}
  .pgck-uebersicht{padding:31px 29px}
  .pgck-null{font-size:38px}
}

/* ---- Zeilen, die gelesen werden, bleiben lesbar ------------------------
   Eine Textzeile ueber 90 Zeichen findet das Auge am Zeilenende nicht mehr
   zuverlaessig zurueck. Das Geruest darf breit sein, der Satz nicht. */
.pgck-notiz{max-width:70ch}
.pgck-haken span{max-width:96ch}
.pgck-mandat-inhalt p{max-width:104ch}
.pgck-plan-was{max-width:44ch}
.pgck-danach{max-width:46ch}
.pgck-zusagen li span{max-width:44ch}

/* ---- Uebersicht -------------------------------------------------------- */
.pgck-uebersicht{
  background:var(--pgck-flaeche);border:1px solid var(--pgck-linie);border-radius:14px;
  padding:20px 18px;position:relative;overflow:hidden;order:2;
  box-shadow:0 1px 2px rgba(18,32,58,.04), 0 12px 30px -22px rgba(18,32,58,.3);
}
.pgck-uebersicht::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pgck-gold) 22%,var(--pgck-gold) 78%,transparent);
}
.pgck-plan{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 3px}
.pgck-plan-name{font-size:19px;font-weight:600;color:var(--pgck-tinte);margin:0}
.pgck-plan-preis{font-size:13.5px;color:var(--pgck-weich);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pgck-plan-was{font-size:12.5px;color:var(--pgck-weich);margin:0 0 15px;line-height:1.45}

.pgck-posten{border-top:1px solid var(--pgck-linie);padding-top:12px;font-size:13px;margin:0}
.pgck-zeile{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
  color:var(--pgck-weich);font-variant-numeric:tabular-nums}
.pgck-zeile b{color:var(--pgck-tinte);font-weight:600}
.pgck-zeile.pgck-gutschrift b{color:var(--pgck-gold-tief)}

.pgck-heute{border-top:1px solid var(--pgck-linie);margin-top:11px;padding-top:13px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pgck-heute-text{font-size:13.5px;font-weight:600;color:var(--pgck-tinte)}
.pgck-null{font-size:29px;font-weight:700;line-height:1;color:var(--pgck-tinte);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pgck-danach{font-size:12px;color:var(--pgck-weich);margin:9px 0 0;line-height:1.5}

.pgck-zusagen{list-style:none;margin:14px 0 0;padding:13px 0 0;
  border-top:1px solid var(--pgck-linie);display:flex;flex-direction:column;gap:8px}
.pgck-zusagen li{display:flex;gap:8px;align-items:flex-start;font-size:12px;
  color:var(--pgck-weich);line-height:1.45;margin:0}
.pgck-zusagen svg{flex:none;margin-top:2px;color:var(--pgck-gold-tief)}

/* ---- Methodenliste ------------------------------------------------------ */
.pgck-zahlung{order:1;min-width:0}
.pgck-methoden{border:1px solid var(--pgck-linie);border-radius:13px;overflow:hidden;
  background:var(--pgck-flaeche);margin-bottom:16px;
  box-shadow:0 1px 2px rgba(18,32,58,.04), 0 12px 30px -24px rgba(18,32,58,.28)}
.pgck-methode{border-bottom:1px solid var(--pgck-linie);position:relative}
.pgck-methode:last-child{border-bottom:0}
.pgck-methode::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--pgck-gold);
  transform:scaleY(0);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.pgck-methode.pgck-aktiv::before{transform:scaleY(1)}
.pgck-methode.pgck-aktiv{background:linear-gradient(90deg,rgba(184,134,43,.055),transparent 62%)}

.pgck-kopf{display:flex;align-items:center;gap:11px;padding:14px 15px;cursor:pointer;
  margin:0;transition:background .16s ease}
.pgck-methode.pgck-gesperrt .pgck-kopf{cursor:default;opacity:.52}
.pgck-punkt{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--pgck-linie-stark);
  flex:none;transition:border-color .18s ease,border-width .18s ease}
.pgck-methode.pgck-aktiv .pgck-punkt{border-color:var(--pgck-gold);border-width:6px}
.pgck-name{flex:1;font-size:14.5px;font-weight:600;color:var(--pgck-tinte);min-width:0}
.pgck-notiz{display:block;font-size:12px;color:var(--pgck-weich);font-weight:400;margin-top:1px}
.pgck-logos{display:flex;gap:4px;align-items:center;flex:none}
.pgck-logo{height:20px;width:auto;display:block;border-radius:3px}
.pgck-bald{font-size:10px;letter-spacing:.06em;color:var(--pgck-gold-tief);
  background:rgba(184,134,43,.15);padding:2px 6px;border-radius:4px;white-space:nowrap;
  text-transform:uppercase}

.pgck-koerper{display:none;padding:0 15px 16px}
.pgck-methode.pgck-aktiv .pgck-koerper{display:block}

/* ---- Felder -------------------------------------------------------------- */
.pgck-feld{display:block;margin-bottom:12px}
.pgck-feld:last-child{margin-bottom:0}
.pgck-feld-name{display:block;font-size:12px;font-weight:600;color:var(--pgck-weich);
  margin-bottom:5px;text-transform:none;letter-spacing:normal}
.pgck input[type=text]{
  width:100%;font-family:inherit;font-size:16px;font-weight:400;color:var(--pgck-tinte);
  background:var(--pgck-grund);border:1.5px solid transparent;border-radius:9px;
  padding:12px 13px;outline:none;margin:0;
  transition:border-color .16s ease,background .16s ease;
}
.pgck input[type=text]::placeholder{color:rgba(18,32,58,.3)}
.pgck input[type=text]:focus{border-color:var(--pgck-gold);background:#fff}
.pgck #wizIban{font-variant-numeric:tabular-nums;letter-spacing:.04em}

.pgck-bank{font-size:12px;color:var(--pgck-weich);margin-top:6px;min-height:17px;
  display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .26s ease}
.pgck-bank.pgck-an{opacity:1}
.pgck-bank .pgck-kugel{width:6px;height:6px;border-radius:50%;background:var(--pgck-gruen);flex:none}
.pgck-bank.pgck-warnung{color:var(--pgck-rot)}
.pgck-bank.pgck-warnung .pgck-kugel{background:var(--pgck-rot)}

/* ---- Rechtliches --------------------------------------------------------- */
.pgck-haken{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
  color:var(--pgck-weich);line-height:1.55;cursor:pointer;padding:8px 0;margin:0;
  text-align:left;max-width:none;width:100%}
.pgck-haken input[type=checkbox]{margin:1px 0 0;flex:none;width:18px;height:18px;
  accent-color:var(--pgck-gold);cursor:pointer}
.pgck-haken span{flex:1;min-width:0}
.pgck-haken a{color:var(--pgck-tinte);text-decoration:underline;text-underline-offset:2px}
.pgck-haken b{color:var(--pgck-tinte);font-weight:600}

.pgck-mandat{margin-top:4px;border-top:1px solid var(--pgck-linie);padding-top:11px}
.pgck-mandat summary{font-size:12px;color:var(--pgck-weich);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:7px;padding:2px 0}
.pgck-mandat summary::-webkit-details-marker{display:none}
.pgck-mandat summary::before{content:"";width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s ease}
.pgck-mandat[open] summary::before{transform:rotate(45deg)}
.pgck-mandat-inhalt{margin-top:10px;padding:13px;background:var(--pgck-grund);border-radius:10px;
  font-size:11.5px;line-height:1.6;color:var(--pgck-weich);text-align:left}
.pgck-mandat-inhalt p{margin:8px 0 0}
.pgck-mandat-inhalt b{color:var(--pgck-tinte);font-weight:600}
.pgck-angaben{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--pgck-linie)}
.pgck-angaben dt{color:var(--pgck-leise);font-size:11px;margin:0}
.pgck-angaben dd{color:var(--pgck-tinte);font-size:11px;margin:0}
.pgck-angaben .pgck-platzhalter{font-family:ui-monospace,SFMono-Regular,monospace;
  color:var(--pgck-gold-tief)}

/* ---- Abschluss ----------------------------------------------------------- */
.pgck-meldung{display:none;color:var(--pgck-rot);font-size:13px;margin:12px 0 0;
  padding:11px 13px;background:rgba(155,44,44,.07);border-radius:9px;line-height:1.45}
.pgck-rechtsfuss{font-size:11px;line-height:1.55;color:var(--pgck-leise);text-align:center;
  margin:13px auto 0;padding-top:12px;border-top:1px solid var(--pgck-linie);max-width:46ch}

/* ==========================================================================
   Bankverbindungs-Dialog im Dashboard.

   Derselbe Namensraum, dieselben Felder, dieselbe Mandatssprache wie im
   Zahlungsschritt des Assistenten. Vorher standen hier zwei prompt()-Kaesten
   des Browsers: kein Mandatstext, keine Bestaetigung, kein Betrag. Wer eine
   Lastschrift erteilt, muss vorher sehen, wofuer und wie viel.

   Die Karte traegt ihre Farben selbst und erbt nichts vom Dashboard-Thema.
   Grund ist derselbe wie oben: das Formular soll ueberall gleich aussehen,
   auch auf einem dunklen Dashboard.
   ========================================================================== */
.pgck-schleier{
  position:fixed;inset:0;z-index:99997;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(9,16,30,.62);backdrop-filter:blur(5px);
}
.pgck-schleier.pgck-offen{display:flex}
.pgck-karte{
  background:var(--pgck-grund);border-radius:18px;width:100%;max-width:560px;
  max-height:92vh;overflow-y:auto;padding:26px 24px 22px;
  box-shadow:0 30px 80px rgba(9,16,30,.45);
  animation:pgck-auf .22s cubic-bezier(.16,1,.3,1);
}
@keyframes pgck-auf{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.pgck-karte-kopf{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px}
.pgck-karte-kopf h2{font-size:19px;font-weight:700;color:var(--pgck-tinte);margin:0 0 3px;
  letter-spacing:-.01em}
.pgck-karte-kopf p{font-size:13px;color:var(--pgck-weich);margin:0;line-height:1.5}
.pgck-zu{margin-left:auto;flex:none;width:32px;height:32px;border-radius:9px;border:0;
  background:rgba(18,32,58,.06);color:var(--pgck-weich);font-size:19px;line-height:1;
  cursor:pointer;transition:background .16s ease}
.pgck-zu:hover{background:rgba(18,32,58,.12)}

/* Die Kostenzeile steht ueber dem Formular, nicht daneben: ein Dialog hat
   nicht die Breite fuer zwei Spalten, und die Zahl gehoert vor die Eingabe. */
.pgck-kosten{
  background:var(--pgck-flaeche);border:1px solid var(--pgck-linie);border-radius:12px;
  padding:14px 15px;margin:0 0 16px;position:relative;overflow:hidden;
}
.pgck-kosten::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pgck-gold) 22%,var(--pgck-gold) 78%,transparent);
}
.pgck-kosten .pgck-zeile:first-of-type{padding-top:2px}
.pgck-kosten-summe{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid var(--pgck-linie);margin-top:9px;padding-top:11px}
.pgck-kosten-summe span{font-size:13px;font-weight:600;color:var(--pgck-tinte)}
.pgck-kosten-summe b{font-size:22px;font-weight:700;color:var(--pgck-tinte);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pgck-kosten-wann{font-size:12px;color:var(--pgck-weich);margin:8px 0 0;line-height:1.5}

.pgck-karte .pgck-methoden{margin-bottom:12px}
.pgck-karte .pgck-erfolg{display:none;text-align:center;padding:14px 0 6px}
.pgck-karte.pgck-fertig .pgck-formular{display:none}
.pgck-karte.pgck-fertig .pgck-erfolg{display:block}
.pgck-erfolg-kreis{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  background:rgba(47,107,79,.12);display:flex;align-items:center;justify-content:center;
  color:var(--pgck-gruen)}
.pgck-erfolg h3{font-size:17px;font-weight:700;color:var(--pgck-tinte);margin:0 0 6px}
.pgck-erfolg p{font-size:13px;color:var(--pgck-weich);margin:0 auto;max-width:42ch;line-height:1.55}

/* Der Absendeknopf des Dialogs. Eigene Regeln, weil wiz-cta-btn zum
   Assistenten gehoert und dessen Stylesheet auf dem Dashboard nicht liegt. */
.pgck-senden{
  width:100%;margin-top:14px;padding:13px 18px;border:0;border-radius:10px;cursor:pointer;
  background:var(--pgck-gold);color:#12203A;font-family:inherit;font-size:14.5px;font-weight:700;
  transition:background .16s ease,opacity .16s ease;
}
.pgck-senden:hover:not(:disabled){background:var(--pgck-gold-tief);color:#fff}
.pgck-senden:disabled{opacity:.6;cursor:default}

@media(max-width:520px){
  .pgck-karte{padding:20px 16px 18px;border-radius:14px}
  .pgck-kosten-summe b{font-size:20px}
}

@media (prefers-reduced-motion:reduce){.pgck *{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){.pgck-karte{animation:none!important}}


/* Dunkles Thema — 14.08.2026 nachgetragen. Bis dahin stand die Kasse als
   weisse Flaeche mit dunkelblauer Schrift im dunklen Dashboard: lesbar, aber
   ein Fremdkoerper, und der Uebergang aus der Anwendung blendete. */
body.theme-dark .pgck{
  --pgck-tinte:#F5F1EA; --pgck-weich:rgba(255,255,255,.62); --pgck-leise:rgba(255,255,255,.44);
  --pgck-gold:#D4B46A; --pgck-gold-tief:#E3C888;
  --pgck-linie:rgba(255,255,255,.12); --pgck-linie-stark:rgba(255,255,255,.22);
  --pgck-flaeche:#18181C; --pgck-grund:#111113;
  --pgck-gruen:#5FBF8F; --pgck-rot:#E07A7A;
}