/* Cureal-Look der Konto-Seiten (Nachtrag 29.10.2026, Spec 14.19).
   Laedt nur auf den Seiten in models/konto_seiten.py, LOOK_PFAD (Anmeldung samt Code-Seite, Registrierung, Reset, /my,
   /my/home, /my/account, /my/security, /my/bestellungen), eingebunden in views/konto_templates.xml (layout_konto_look) mit ?v=. Nicht im Bundle
   web.assets_frontend. Eine Regel sitzt am #wrapwrap.cu-konto selbst (Farbwerte als Variablen und Grund), alle anderen unter
   #wrapwrap.cu-konto > main oder am Body einer solchen Seite (Grund, Odoos Dialoge, Dialog-Hintergrund, kein schwebender
   WhatsApp-Knopf); Kopf und Footer
   der Website bleiben unberuehrt (Test: Positivliste in tests/test_patientenkonto_look.py). Kein :root.
   Werte wie die Startseite cureal.de (gemessen 29.10.): Grund #010d2c, Karten #061633 mit Rand rgba(255,255,255,.1),
   Ueberschrift Plus Jakarta Sans 800, Text Inter 16/1.6 #b2c1d7, Bedienelemente Manrope. Knoepfe nach "Ein Blau"
   (#00e5ff, Schrift #06101e, Hover #5cf0ff, Kante 0 5px 0 #0097b3, Fokus rgba(0,229,255,.55), Radius 10, Hoehe 52).
   Schriften: live global aus dem Head-View (Inter, Plus Jakarta Sans, Manrope); das Modul bringt Manrope als
   "Cureal Manrope" mit (Rueckfall, vor allem im Nachbau). Nie Google Fonts.
   Schliere: dieselben Motive wie im Footer (beam-curve2-hoch, beam-arc3-hoch, 4608 px, auf Schwarz, AVIF 4:4:4 mit
   WebP-Rueckfall), per screen auf dem Grund, Deckkraft wie im Footer, nur verkleinert (Anzeige 1536 bzw. 760 px). */

@font-face {
  font-family: "Cureal Manrope";
  src: url("/cureal_pharmacy/static/fonts/Manrope-Variable.woff2?v=1") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* ---- Grund, Farben, Schrift ------------------------------------------------------------------------------------ */
#wrapwrap.cu-konto {
  --ck-grund: #010d2c;
  --ck-karte: #061633;
  --ck-karte-hover: #0a1e42;
  --ck-feld: #020b24;
  --ck-rand: rgba(255, 255, 255, .1);
  --ck-feldrand: #50648a;
  --ck-titel: #f7f9ff;
  --ck-text: #b2c1d7;
  --ck-leise: #93a4bf;
  --ck-label: #dbe4f1;
  --ck-cyan: #00e5ff;
  --ck-cyan-hell: #5cf0ff;
  --ck-cyan-kante: #0097b3;
  --ck-knopf-text: #06101e;
  --ck-fokus: rgba(0, 229, 255, .55);
  --ck-link: #5cf0ff;
  --ck-link-hover: #ffffff;
  --ck-fehler: #ffaaaa;
  --ck-fehler-rand: #ff7d7d;
  --ck-erfolg: #8ee8c2;
  --ck-schrift: Inter, "Cureal Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ck-schrift-titel: "Plus Jakarta Sans", Inter, "Cureal Manrope", system-ui, sans-serif;
  --ck-schrift-ui: Manrope, "Cureal Manrope", Inter, system-ui, sans-serif;
  background-color: var(--ck-grund);
}
/* Kein heller Rand an den Uebergaengen: auch der Body traegt den Grund (eigene Regel, :has darf keine Liste brechen). */
body:has(> #wrapwrap.cu-konto) {
  background-color: #010d2c;
}
#wrapwrap.cu-konto > main {
  position: relative;
  background-color: transparent;
  padding-bottom: 96px;
  color: var(--ck-text);
  font-family: var(--ck-schrift);
  font-size: 16px;
  line-height: 1.6;
  color-scheme: dark;
  caret-color: var(--ck-cyan);
}
#wrapwrap.cu-konto > main #wrap,
#wrapwrap.cu-konto > main .o_portal_wrap,
#wrapwrap.cu-konto > main .oe_structure {
  background-color: transparent;
}
#wrapwrap.cu-konto > main ::selection {
  background-color: rgba(0, 229, 255, .32);
  color: #ffffff;
}
#wrapwrap.cu-konto > main a {
  color: var(--ck-link);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
#wrapwrap.cu-konto > main a:hover {
  color: var(--ck-link-hover);
}
#wrapwrap.cu-konto > main :focus-visible {
  outline: 3px solid var(--ck-fokus);
  outline-offset: 2px;
}
#wrapwrap.cu-konto > main .text-muted,
#wrapwrap.cu-konto > main .form-text {
  color: var(--ck-leise) !important;
}
#wrapwrap.cu-konto > main hr {
  border-color: var(--ck-rand);
  opacity: 1;
}

/* ---- Schliere: eine je Seite im oberen Bereich ----------------------------------------------------------------------
   Liegt mit z-index -1 im Stapelkontext von #wrapwrap (Odoo setzt ihn genau dafuer), ueber dem Grund und unter allem
   Inhalt; kein eigener Stapelkontext am Inhalt (Odoos Dialoge). screen auf dem dunklen Grund, das Bildschwarz verschwindet.
   Hoehe hoechstens die des Inhalts: die Maske laeuft vor dem Footer aus, nie ein harter Schnitt. */
#wrapwrap.cu-konto > main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: min(100%, 1000px);
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-arc3-hoch.webp");
  background-image: image-set(url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-arc3-hoch.avif") type("image/avif"), url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-arc3-hoch.webp") type("image/webp"));
  background-size: 1536px auto;
  background-position: right -260px top -60px;
  mix-blend-mode: screen;
  opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
  animation: ck-licht .9s cubic-bezier(.16, 1, .3, 1) both;
}
/* Anmeldeseiten am Desktop: die zwei Flammen eines Motivs rahmen die Karte. */
@media (min-width: 992px) {
  #wrapwrap.cu-konto > main:has(> .oe_website_login_container)::before {
    background-image: url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.webp");
    background-image: image-set(url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.avif") type("image/avif"), url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.webp") type("image/webp"));
    background-position: center top -150px;
  }
  /* Portal-Seiten: dieselben zwei Flammen rahmen Ueberschrift und Spalte. /my ist mit Seitenleiste breiter: groesser
     (1920 px, bei Pixeldichte 2 hoechstens 0,83 je Bildpixel) und hoeher angesetzt, die Seite ist kurz. */
  #wrapwrap.cu-konto > main:has(.o_portal_wrap)::before {
    background-image: url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.webp");
    background-image: image-set(url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.avif") type("image/avif"), url("https://bfwc-client-assets.pages.dev/cureal/termin-buchen/schlieren/beam-curve2-hoch.webp") type("image/webp"));
    background-position: center top -170px;
  }
  #wrapwrap.cu-konto > main:has(.o_portal_my_home)::before,
  #wrapwrap.cu-konto > main:has(.o_cureal_konto)::before {
    background-size: 1920px auto;
    background-position: center top -440px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100px, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 100px, #000 70%, transparent 100%);
  }
}
/* Handy: ein Bogen am rechten Rand, kleiner und ruhiger (760 px Anzeige, bei Pixeldichte 3 hoechstens 0,5 je Bildpixel). */
@media (max-width: 767.98px) {
  #wrapwrap.cu-konto > main::before {
    background-size: 760px auto;
    background-position: right -60px top -20px;
    opacity: .38;
    height: min(100%, 640px);
  }
}
@keyframes ck-licht {
  from { opacity: 0; }
}

/* ---- Ueberschrift -------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .cu-konto__titel,
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > h3,
#wrapwrap.cu-konto > main .o_portal_security_body > .d-flex > h3,
#wrapwrap.cu-konto > main #cureal_bestellungen > h3 {
  font-family: var(--ck-schrift-titel);
  font-weight: 800;
  /* px und !important: live setzt das Theme Ueberschriften am Handy fest (h3 18 px) und die Wurzel auf 13 px */
  font-size: 40px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em;
  color: var(--ck-titel);
  text-wrap: balance;
  margin: 0;
}

/* ---- Anmeldeseiten: Ueberschrift und Karte in einer Spalte --------------------------------------------------------- */
#wrapwrap.cu-konto > main > .cu-konto__titel,
#wrapwrap.cu-konto > main > .oe_website_login_container {
  width: min(460px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}
#wrapwrap.cu-konto > main > .cu-konto__titel {
  margin-top: 64px;
  margin-bottom: 24px;
}
#wrapwrap.cu-konto > main > .oe_website_login_container {
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 12px;
  padding: 32px 32px 28px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
#wrapwrap.cu-konto > main > .cu-konto__titel + .oe_website_login_container {
  margin-top: 0;
}
#wrapwrap.cu-konto > main > .oe_website_login_container:first-child {
  margin-top: 64px;
}
#wrapwrap.cu-konto > main .oe_website_login_container .oe_login_form,
#wrapwrap.cu-konto > main .oe_website_login_container .oe_signup_form,
#wrapwrap.cu-konto > main .oe_website_login_container .oe_reset_password_form {
  max-width: none;
  margin: 0;
}
/* Code-Seite: Odoos Kartentitel steht schon als Ueberschrift darueber (bleibt im Markup fuer Tests und Team). */
#wrapwrap.cu-konto > main .oe_website_login_container .oe_login_form > h5.card-title {
  display: none;
}
#wrapwrap.cu-konto > main .oe_website_login_container .border-top {
  border-color: var(--ck-rand) !important;
}
#wrapwrap.cu-konto > main .oe_website_login_container #cureal_code_text {
  color: var(--ck-text) !important;
  margin: 0 0 20px !important;
}
#wrapwrap.cu-konto > main .oe_website_login_container .text-center.py-2.border-top {
  border-top: 0 !important;
  padding-top: 0 !important;
  text-align: left !important;
}
#wrapwrap.cu-konto > main .oe_website_login_container form[action="/web/session/logout"] .btn-link,
#wrapwrap.cu-konto > main .oe_website_login_container form[action$="/web/session/logout"] .btn-link {
  margin-bottom: 0 !important;
}

/* ---- Formulare ----------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main label,
#wrapwrap.cu-konto > main .form-label,
#wrapwrap.cu-konto > main .col-form-label {
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ck-label);
}
#wrapwrap.cu-konto > main .form-label,
#wrapwrap.cu-konto > main .col-form-label,
#wrapwrap.cu-konto > main .o_portal_security_body label[for] {
  margin-bottom: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
#wrapwrap.cu-konto > main .mb-3 > .form-label,
#wrapwrap.cu-konto > main .o_caps_lock_warning > .form-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#wrapwrap.cu-konto > main .form-control,
#wrapwrap.cu-konto > main .form-select {
  min-height: 48px;
  padding: 11px 14px;
  font-family: var(--ck-schrift);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ck-titel);
  background-color: var(--ck-feld);
  border: 1px solid var(--ck-feldrand);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
#wrapwrap.cu-konto > main .form-control::placeholder {
  color: var(--ck-leise);
  opacity: 1;
}
#wrapwrap.cu-konto > main .form-control:hover:not(:focus):not([readonly]):not(.is-invalid) {
  border-color: #6b80a6;
}
#wrapwrap.cu-konto > main .form-control:focus,
#wrapwrap.cu-konto > main .form-select:focus {
  color: var(--ck-titel);
  background-color: var(--ck-feld);
  border-color: var(--ck-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .28);
  outline: none;
}
#wrapwrap.cu-konto > main .form-control:-webkit-autofill,
#wrapwrap.cu-konto > main .form-control:-webkit-autofill:hover,
#wrapwrap.cu-konto > main .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ck-titel);
  -webkit-box-shadow: 0 0 0 1000px var(--ck-feld) inset;
  caret-color: var(--ck-cyan);
  transition: background-color 9999s ease-out 0s;
}
#wrapwrap.cu-konto > main .form-control:autofill {
  background-color: var(--ck-feld);
}
/* Nur lesbar (E-Mail = Anmeldung): gestrichelter Rand, leiser Text, Schloss. */
#wrapwrap.cu-konto > main .form-control[readonly] {
  color: var(--ck-text);
  background-color: rgba(255, 255, 255, .03);
  border-style: dashed;
  border-color: var(--ck-feldrand);
  cursor: not-allowed;
  padding-right: 44px;
  background-image: none;
}
#wrapwrap.cu-konto > main :has(> .form-control[readonly]) {
  position: relative;
}
#wrapwrap.cu-konto > main :has(> .form-control[readonly])::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 14px;
  width: 18px;
  height: 18px;
  background-color: var(--ck-leise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
/* Fehler am Feld */
/* Fehler am Feld: 2-px-Rand und ein Warnzeichen im Feld (nicht nur Farbe), auf allen Konto-Seiten. Das Zeichen sitzt als
   Hintergrund im Feld, damit es auch neben dem Augen-Knopf der Passwortfelder Platz hat. */
#wrapwrap.cu-konto > main .form-control.is-invalid,
#wrapwrap.cu-konto > main .was-validated .form-control:invalid {
  border-color: var(--ck-fehler-rand);
  border-width: 2px;
  padding: 10px 42px 10px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffaaaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L21 19.5H3z'/%3E%3Cpath d='M12 10v4M12 16.8v.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px 18px;
}
#wrapwrap.cu-konto > main .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 125, 125, .25);
}
#wrapwrap.cu-konto > main .invalid-feedback {
  color: var(--ck-fehler);
  font-size: 14px;
  margin-top: 6px;
}
/* Passwort zeigen: Teil des Feldes */
#wrapwrap.cu-konto > main .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#wrapwrap.cu-konto > main .input-group > .o_show_password {
  min-width: 48px;
  min-height: 48px;
  color: var(--ck-text);
  background-color: var(--ck-feld);
  border: 1px solid var(--ck-feldrand) !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none;
}
#wrapwrap.cu-konto > main .input-group > .o_show_password:hover {
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .input-group:focus-within > .o_show_password {
  border-color: var(--ck-cyan) !important;
}
#wrapwrap.cu-konto > main .input-group:has(> .is-invalid) > .o_show_password {
  border-color: var(--ck-fehler-rand) !important;
}
#wrapwrap.cu-konto > main .input-group-sm > .form-control {
  min-height: 48px;
  font-size: 16px;
  padding: 11px 14px;
  border-radius: 10px;
}
#wrapwrap.cu-konto > main .input-group-sm > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#wrapwrap.cu-konto > main .input-group > .form-control.is-invalid {
  padding: 10px 42px 10px 13px;
}
/* Auswahlfelder (nur das Team-Adressformular): roter 2-px-Rand; Bootstraps Fehlerzeichen neben dem Pfeil bleibt */
#wrapwrap.cu-konto > main .form-select.is-invalid {
  border-color: var(--ck-fehler-rand);
  border-width: 2px;
}
/* Haken und Schalter im Cyan */
#wrapwrap.cu-konto > main .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--ck-feld);
  border: 1px solid var(--ck-feldrand);
  border-radius: 5px;
}
#wrapwrap.cu-konto > main .form-check-input:checked {
  background-color: var(--ck-cyan);
  border-color: var(--ck-cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306101e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
}
#wrapwrap.cu-konto > main .form-check-input:focus {
  border-color: var(--ck-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .28);
}
#wrapwrap.cu-konto > main .form-check {
  display: flex;
  gap: 12px;
  padding-left: 0;
  margin-bottom: 4px;
}
#wrapwrap.cu-konto > main .form-check .form-check-input {
  float: none;
  margin-left: 0;
  flex: none;
}
#wrapwrap.cu-konto > main .form-check-label {
  font-family: var(--ck-schrift);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main .field-cureal_alter .form-text {
  display: block;
  margin: 6px 0 0 32px;
  font-size: 14px;
}
/* Checkboxen ohne Odoo-Klasse (Code-Seite "Geraet merken", Sperrliste im Loeschdialog) wie .form-check-input */
#wrapwrap.cu-konto > main input[type="checkbox"]:not(.form-check-input) {
  -webkit-appearance: none;
          appearance: none;
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: -4px;
  background-color: var(--ck-feld);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  border: 1px solid var(--ck-feldrand);
  border-radius: 5px;
  cursor: pointer;
}
#wrapwrap.cu-konto > main input[type="checkbox"]:not(.form-check-input):checked {
  background-color: var(--ck-cyan);
  border-color: var(--ck-cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306101e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main input[type="checkbox"]:not(.form-check-input):focus-visible {
  outline: 3px solid var(--ck-fokus);
  outline-offset: 2px;
}
/* Code-Seite: "Geraet merken" mit Zusatz */
#wrapwrap.cu-konto > main .oe_website_login_container div:has(> #switch-remember) {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  align-items: start;
  margin: 4px 0 20px !important;
  color: var(--ck-text) !important;
}
#wrapwrap.cu-konto > main #switch-remember {
  margin: 2px 0 0;
}
#wrapwrap.cu-konto > main label[for="switch-remember"] {
  font-family: var(--ck-schrift);
  font-weight: 400;
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main #cureal_nur_eigenes_geraet {
  grid-column: 2;
  color: var(--ck-leise);
  font-size: 14px;
}

/* ---- Knoepfe ------------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .btn:where(:not(.oi):not(.fa)) {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  border-radius: 10px;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, transform .12s ease-out, box-shadow .12s ease-out;
}
#wrapwrap.cu-konto > main .btn:focus-visible {
  outline: 3px solid var(--ck-fokus);
  outline-offset: 3px;
  box-shadow: none;
}
/* Hauptaktion: Ein Blau */
#wrapwrap.cu-konto > main .btn-primary,
#wrapwrap.cu-konto > main .o_portal_security_body section[name="portal_change_password"] button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 26px;
  font-size: 16px;
  line-height: 1.2;
  color: #06101e;
  background-color: #00e5ff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 5px 0 #0097b3;
  margin-bottom: 5px;
}
#wrapwrap.cu-konto > main .btn-primary:hover,
#wrapwrap.cu-konto > main .o_portal_security_body section[name="portal_change_password"] button[type="submit"]:hover {
  color: #06101e;
  background-color: #5cf0ff;
}
#wrapwrap.cu-konto > main .btn-primary:active,
#wrapwrap.cu-konto > main .o_portal_security_body section[name="portal_change_password"] button[type="submit"]:active {
  color: #06101e;
  background-color: #5cf0ff;
  transform: translateY(3px);
  box-shadow: 0 2px 0 #0097b3;
}
#wrapwrap.cu-konto > main .btn-primary:disabled,
#wrapwrap.cu-konto > main .btn-primary.disabled {
  color: #06101e;
  background-color: #00e5ff;
  box-shadow: 0 5px 0 #0097b3;
  opacity: .5;
}
#wrapwrap.cu-konto > main .oe_login_buttons {
  gap: 12px;
}
#wrapwrap.cu-konto > main .oe_website_login_container .btn-secondary {
  width: 100%;
}
#wrapwrap.cu-konto > main .oe_login_buttons > .btn-primary {
  width: 100%;
}
/* Nebenaktionen: ruhige Ghost-Knoepfe und Textlinks */
#wrapwrap.cu-konto > main .btn-light,
#wrapwrap.cu-konto > main .btn-secondary,
#wrapwrap.cu-konto > main .btn-outline-secondary,
#wrapwrap.cu-konto > main .modal-footer .btn:not(.btn-danger):not(.btn-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  font-size: 15px;
  color: #c9f9ff;
  background-color: transparent;
  border: 1px solid rgba(92, 240, 255, .42);
  box-shadow: none;
}
#wrapwrap.cu-konto > main .btn-light:hover,
#wrapwrap.cu-konto > main .btn-secondary:hover,
#wrapwrap.cu-konto > main .btn-outline-secondary:hover,
#wrapwrap.cu-konto > main .modal-footer .btn:not(.btn-danger):not(.btn-primary):hover {
  color: #ffffff;
  background-color: rgba(0, 229, 255, .1);
  border-color: rgba(92, 240, 255, .75);
}
#wrapwrap.cu-konto > main .btn-link {
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ck-link);
  text-decoration: underline;
  text-decoration-color: rgba(92, 240, 255, .45);
  text-underline-offset: .25em;
  padding: 10px 4px;
  min-height: 44px;
  border: 0;
  box-shadow: none;
}
#wrapwrap.cu-konto > main .btn-link:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}
/* "Passwort zuruecksetzen" neben der Beschriftung (live im Label, in odoo:19.0 daneben) */
/* Trefferflaeche 44 px ohne Verschieben: Innenabstand und gleich grosser negativer Rand */
#wrapwrap.cu-konto > main .o_caps_lock_warning a[href*="/web/reset_password"] {
  display: inline-block;
  min-height: 44px;
  padding: 12px 4px;
  margin: -12px -4px;
  font-size: 14px;
  line-height: 20px;
}
#wrapwrap.cu-konto > main .oe_reset_password_form .small a,
#wrapwrap.cu-konto > main .breadcrumb a {
  display: inline-block;
  padding: 12px 4px;
  margin: -12px -4px;
  line-height: 20px;
}
#wrapwrap.cu-konto > main .o_caps_lock_warning > .d-flex:has(> label[for="password"]) {
  align-items: baseline !important;
  gap: 12px;
}
#wrapwrap.cu-konto > main .oe_login_buttons a.btn-link {
  margin-top: 0 !important;
}
/* "oder" und Passkey (Team) */
#wrapwrap.cu-konto > main .o_login_auth em {
  color: var(--ck-leise) !important;
  font-style: normal;
  margin: 8px 0 12px !important;
}
#wrapwrap.cu-konto > main .o_login_auth .list-group {
  gap: 8px;
}
#wrapwrap.cu-konto > main .o_login_auth .list-group-item {
  min-height: 48px;
  padding: 10px 16px !important;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  color: #c9f9ff;
  background-color: transparent;
  border: 1px solid rgba(92, 240, 255, .42) !important;
  border-radius: 10px !important;
}
#wrapwrap.cu-konto > main .o_login_auth .list-group-item:hover {
  color: #ffffff;
  background-color: rgba(0, 229, 255, .1);
}
/* Bot-Schutz (Turnstile): seit dem Nachtrag 31.10. (Spec 14.26) dunkel und flexibel (static/src/js/turnstile_callbacks.js
   setzt data-theme="dark" und data-size="flexible"): das Widget nimmt die volle Breite der Formularfelder. */
#wrapwrap.cu-konto > main .s_turnstile_container {
  width: 100%;
  margin: 4px 0 16px;
  min-height: 65px;
}
#wrapwrap.cu-konto > main .s_turnstile_container:not([style*="none"]) {
  display: block;
}
#wrapwrap.cu-konto > main .s_turnstile_container > div,
#wrapwrap.cu-konto > main .s_turnstile_container iframe {
  width: 100% !important;
  max-width: 100%;
}
/* Auch „flexible“ ist bei Cloudflare mindestens 300 px breit; die Felder der schmalen Karte (unter 360 px) sind schmaler. Dort
   das Widget verkleinert (gemessen 31.10.: bei 320 px Felder 246 px = 300 x .82, ohne die Regel 17 px Querlauf). */
@media (max-width: 359.98px) {
  #wrapwrap.cu-konto > main .s_turnstile_container {
    zoom: .82;
  }
}

/* ---- Meldungen ----------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .alert {
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid;
  margin-bottom: 16px;
}
#wrapwrap.cu-konto > main .alert-danger {
  color: var(--ck-fehler);
  background-color: rgba(255, 125, 125, .09);
  border-color: rgba(255, 125, 125, .42);
}
#wrapwrap.cu-konto > main .alert-success {
  color: var(--ck-erfolg);
  background-color: rgba(142, 232, 194, .08);
  border-color: rgba(142, 232, 194, .38);
}
#wrapwrap.cu-konto > main .alert-info {
  color: #d3f6ff;
  background-color: rgba(0, 229, 255, .07);
  border-color: rgba(0, 229, 255, .32);
}
#wrapwrap.cu-konto > main .alert-warning {
  color: #ffe2a8;
  background-color: rgba(255, 196, 92, .08);
  border-color: rgba(255, 196, 92, .38);
}
#wrapwrap.cu-konto > main .alert:empty {
  display: none;
}
/* Kontaktdaten: Odoos address.js schreibt Fehler als h5.text-danger in #errors */
#wrapwrap.cu-konto > main #errors > h5 {
  font-family: var(--ck-schrift);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-fehler) !important;
  background-color: rgba(255, 125, 125, .09);
  border: 1px solid rgba(255, 125, 125, .42);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
}

/* ---- Portal: Spalte, Brotkrumen, Seitenleiste ---------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .o_portal.container,
#wrapwrap.cu-konto > main .o_portal_wrap > .container {
  max-width: 912px;
  padding-left: 16px;
  padding-right: 16px;
}
#wrapwrap.cu-konto > main .o_portal_wrap > .container:has(> .row > .o_portal_content) {
  max-width: 1200px;
}
#wrapwrap.cu-konto > main .o_portal_wrap > .container {
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal.container {
  margin-top: 32px !important;
}
#wrapwrap.cu-konto > main .o_portal.container + #wrap > .container {
  padding-top: 20px !important;
}
#wrapwrap.cu-konto > main .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 14px;
  --bs-breadcrumb-divider-color: var(--ck-leise);
  --bs-breadcrumb-item-active-color: var(--ck-label);
}
#wrapwrap.cu-konto > main .breadcrumb-item,
#wrapwrap.cu-konto > main .breadcrumb-item.active {
  color: var(--ck-label);
}
#wrapwrap.cu-konto > main .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ck-leise);
}
#wrapwrap.cu-konto > main .breadcrumb a {
  color: var(--ck-link);
  text-decoration: none;
}
#wrapwrap.cu-konto > main .breadcrumb a:hover {
  text-decoration: underline;
  color: #ffffff;
}
/* Ein Symbolsystem: wo der Patient es sieht, Font-Awesome-Vollformen durch Linien-Masken im selben Strich ersetzen
   (das i-Element mit Beschriftung bleibt), die uebrigen FA-Zeichen leise. */
#wrapwrap.cu-konto > main .fa-home::before,
#wrapwrap.cu-konto > main .fa-phone::before,
#wrapwrap.cu-konto > main .fa-envelope::before,
#wrapwrap.cu-konto > main .fa-pencil::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5'/%3E%3Cpath d='M6 9v10.5h12V9'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5'/%3E%3Cpath d='M6 9v10.5h12V9'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#wrapwrap.cu-konto > main .fa-phone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a11 11 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2 2A16.5 16.5 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a11 11 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2 2A16.5 16.5 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main .fa-envelope::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main .fa-pencil::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L9 19H5v-4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L9 19H5v-4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main .fa-map-marker,
/* die spezifischere Zeile ist noetig: im Loeschdialog traegt das Dreieck .text-danger, und
   "main .modal-body .text-danger" (rot, !important) schluege sonst die allgemeine Zeile */
#wrapwrap.cu-konto > main .modal-body .fa-exclamation-triangle.text-danger,
#wrapwrap.cu-konto > main .fa-exclamation-triangle,
#wrapwrap.cu-konto > main .btn:not(.btn-primary) .fa-angle-left,
#wrapwrap.cu-konto > main .btn:not(.btn-primary) .fa-angle-right {
  color: var(--ck-leise) !important;
}
#wrapwrap.cu-konto > main .btn-primary .fa-angle-right,
#wrapwrap.cu-konto > main .btn-primary .fa-angle-left {
  opacity: .55;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper {
  margin-bottom: 28px;
  padding: 0;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > h3 {
  margin: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  border: 0;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper .o_avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px !important;
}
/* Avatar: Odoos Buchstabenbild (gruene Flaeche) bleibt im Markup, aber unsichtbar; darueber Rahmen und Personen-Symbol
   wie in der Zeile Kontaktdaten. Der Schalter der Seitenleiste am Handy bleibt bedienbar. */
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper .o_avatar,
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 img.rounded,
#wrapwrap.cu-konto > main .offcanvas img.rounded {
  opacity: 0;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn:has(> .o_avatar),
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 div:has(> img.rounded),
#wrapwrap.cu-konto > main .offcanvas div:has(> img.rounded) {
  position: relative;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn:has(> .o_avatar)::before,
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 div:has(> img.rounded)::before,
#wrapwrap.cu-konto > main .offcanvas div:has(> img.rounded)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #061633;
  border: 1px solid rgba(0, 229, 255, .45);
  pointer-events: none;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn:has(> .o_avatar)::after,
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 div:has(> img.rounded)::after,
#wrapwrap.cu-konto > main .offcanvas div:has(> img.rounded)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  width: 24px;
  height: 24px;
  background-color: var(--ck-cyan-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c.6-3.9 3.7-6.5 7.5-6.5s6.9 2.6 7.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c.6-3.9 3.7-6.5 7.5-6.5s6.9 2.6 7.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn:has(> .o_avatar)::before {
  left: 2px;
  top: 2px;
  width: 40px;
  height: 40px;
}
#wrapwrap.cu-konto > main .o_portal_wrap .wrapper > .btn:has(> .o_avatar)::after {
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
}
#wrapwrap.cu-konto > main .o_portal_wrap .row:has(> .o_portal_content) {
  --bs-gutter-x: 40px;
}
#wrapwrap.cu-konto > main .o_portal_content {
  margin-bottom: 0 !important;
}
/* Seitenleiste (Odoo side_content) als ruhige Karte */
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 > div,
#wrapwrap.cu-konto > main .offcanvas .offcanvas-body {
  width: 100%;
  margin-top: 0 !important;
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 > div {
  align-self: flex-start;
  padding: 22px 24px;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 12px;
}
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 h5,
#wrapwrap.cu-konto > main .offcanvas h5 {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 18px;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 img.rounded,
#wrapwrap.cu-konto > main .offcanvas img.rounded {
  border-radius: 10px !important;
}
#wrapwrap.cu-konto > main .o_portal_my_details,
#wrapwrap.cu-konto > main .o_portal_my_details address,
#wrapwrap.cu-konto > main .o_portal_my_details span,
#wrapwrap.cu-konto > main .o_portal_my_details div {
  color: var(--ck-text);
  font-size: 15px;
  overflow-wrap: anywhere;
}
#wrapwrap.cu-konto > main .o_portal_my_details .fa {
  color: var(--ck-leise);
  width: 18px;
}
#wrapwrap.cu-konto > main .o_portal_wrap .col-lg-4 .btn-link,
#wrapwrap.cu-konto > main .offcanvas .btn-link {
  padding: 8px 0 !important;
  margin-top: 8px !important;
}
#wrapwrap.cu-konto > main .offcanvas {
  background-color: var(--ck-karte);
  color: var(--ck-text);
  border-color: var(--ck-rand);
}
#wrapwrap.cu-konto > main .offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  width: 44px;
  height: 44px;
}

/* ---- /my: Hauptaktion und drei Zeilen ------------------------------------------------------------------------------ */
#wrapwrap.cu-konto > main .o_portal_my_home > .mt-3:has(> .btn-primary) {
  margin: 0 0 20px !important;
}
#wrapwrap.cu-konto > main .o_portal_docs {
  --bs-gutter-y: 10px;
  --bs-gutter-x: 0;
  margin: 0;
}
#wrapwrap.cu-konto > main .o_portal_docs > .o_portal_category {
  --bs-gutter-y: 10px;
  --bs-gutter-x: 0;
  margin: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_docs > .o_portal_category + .o_portal_category {
  margin-top: 10px !important;
}
#wrapwrap.cu-konto > main .o_portal_index_card {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_docs,
#wrapwrap.cu-konto > main .o_portal_docs > .o_portal_category {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_index_card > a {
  display: flex !important;
  align-items: center;
  gap: 16px !important;
  min-height: 80px;
  padding: 16px 20px !important;
  color: var(--ck-text);
  background-color: var(--ck-karte) !important;
  border: 1px solid var(--ck-rand);
  border-radius: 12px !important;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}
#wrapwrap.cu-konto > main .o_portal_index_card > a:hover,
#wrapwrap.cu-konto > main .o_portal_index_card > a:focus-visible {
  background-color: var(--ck-karte-hover) !important;
  border-color: rgba(0, 229, 255, .4);
  box-shadow: inset 0 1px 0 rgba(92, 240, 255, .16);
}
#wrapwrap.cu-konto > main .o_portal_index_card > a::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-color: var(--ck-cyan-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease-out;
}
#wrapwrap.cu-konto > main .o_portal_index_card > a:hover::after {
  transform: translateX(3px);
}
#wrapwrap.cu-konto > main .o_portal_index_card .o_portal_icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center !important;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: rgba(0, 229, 255, .08);
  border: 1px solid rgba(0, 229, 255, .2);
}
#wrapwrap.cu-konto > main .o_portal_index_card .o_portal_icon img {
  display: none;
}
#wrapwrap.cu-konto > main .o_portal_index_card .o_portal_icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--ck-cyan-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8.5 11.5l1.5 1.5 2.5-2.5M14 12h2M8.5 16.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8.5 11.5l1.5 1.5 2.5-2.5M14 12h2M8.5 16.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#wrapwrap.cu-konto > main .o_portal_index_card > a[href$="/my/account"] .o_portal_icon::before,
#wrapwrap.cu-konto > main .o_portal_index_card > a[href$="/my/addresses"] .o_portal_icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c.6-3.9 3.7-6.5 7.5-6.5s6.9 2.6 7.5 6.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c.6-3.9 3.7-6.5 7.5-6.5s6.9 2.6 7.5 6.5'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main .o_portal_index_card > a[href$="/my/security"] .o_portal_icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 2.8v5.7c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V5.8z'/%3E%3Cpath d='M9 12.2l2.2 2.2L15.2 10'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 2.8v5.7c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V5.8z'/%3E%3Cpath d='M9 12.2l2.2 2.2L15.2 10'/%3E%3C/svg%3E");
}
#wrapwrap.cu-konto > main .o_portal_index_card > a > div:not(.o_portal_icon) {
  flex: 1 1 auto;
  min-width: 0;
}
#wrapwrap.cu-konto > main .o_portal_index_card .fs-5 {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px !important;
  font-family: var(--ck-schrift-ui);
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .o_portal_index_card [data-placeholder_count] {
  order: 2;
  min-width: 26px;
  padding: 1px 9px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #c9f9ff;
  background-color: rgba(0, 229, 255, .12);
  border: 1px solid rgba(0, 229, 255, .3);
  border-radius: 999px;
}
#wrapwrap.cu-konto > main .o_portal_index_card [data-placeholder_count]:empty {
  display: none;
}
#wrapwrap.cu-konto > main .o_portal_index_card .opacity-75 {
  opacity: 1 !important;
  color: var(--ck-text);
  font-size: 15px;
  line-height: 1.45;
}
#wrapwrap.cu-konto > main .o_portal_doc_spinner {
  color: var(--ck-cyan) !important;
}

/* ---- /my fuer Patienten: Ausweis und Liste (Nachtrag 31.10., Spec 14.24 Punkt 9) --------------------------------------
   Variante B aus Ivos Vorschau (klickweg/varianten/mein-konto-varianten.html#b): links der Ausweis (Verlauf, ohne Schliere),
   rechts eine zusammenhaengende Liste. Am Handy der Ausweis oben. Team: Odoos /my mit den Regeln oben. */
#wrapwrap.cu-konto > main .o_portal_wrap > .container:has(> .o_cureal_konto) {
  max-width: 1132px;
}
#wrapwrap.cu-konto > main .o_cureal_konto > .cu-konto__titel {
  font-size: 44px !important;
}
#wrapwrap.cu-konto > main .o_cureal_konto_raster {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 30px;
}
#wrapwrap.cu-konto > main .o_cureal_ausweis {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0b2a5c 0%, #071a3c 55%, #061633 100%);
  border: 1px solid rgba(92, 240, 255, .22);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
}
#wrapwrap.cu-konto > main .o_cureal_initialen {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(0, 229, 255, .12);
  border: 1px solid rgba(0, 229, 255, .4);
  font-family: var(--ck-schrift-ui);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ck-cyan-hell);
}
#wrapwrap.cu-konto > main .o_cureal_ausweis_name {
  margin: 16px 0 2px;
  font-family: var(--ck-schrift-titel);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ck-titel);
  overflow-wrap: anywhere;
}
#wrapwrap.cu-konto > main .o_cureal_daten {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}
#wrapwrap.cu-konto > main .o_cureal_daten > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
#wrapwrap.cu-konto > main .o_cureal_daten dt {
  margin: 0;
  padding-top: 3px;
  color: var(--ck-leise);
}
#wrapwrap.cu-konto > main .o_cureal_daten dt svg {
  display: block;
  width: 16px;
  height: 16px;
}
#wrapwrap.cu-konto > main .o_cureal_daten dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ck-label);
  overflow-wrap: anywhere;
}
/* Ziffern gleich breit nur im Datum (in E-Mail und Ort machten die Tabellenziffern den Bindestrich breit) */
#wrapwrap.cu-konto > main #cureal_konto_geburtsdatum dd {
  font-variant-numeric: tabular-nums;
}
#wrapwrap.cu-konto > main .o_cureal_quelle {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ck-leise);
}
#wrapwrap.cu-konto > main .o_cureal_trenner {
  height: 1px;
  margin: 20px 0;
  background-color: var(--ck-rand);
}
#wrapwrap.cu-konto > main .o_cureal_ausweis .o_cureal_knopf_licht {
  width: 100%;
}
#wrapwrap.cu-konto > main .o_cureal_liste {
  overflow: hidden;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 16px;
}
#wrapwrap.cu-konto > main .o_cureal_zeile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 20px;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  color: var(--ck-text);
  text-decoration: none;
  transition: background-color .2s;
}
#wrapwrap.cu-konto > main .o_cureal_zeile + .o_cureal_zeile {
  border-top: 1px solid var(--ck-rand);
}
#wrapwrap.cu-konto > main .o_cureal_zeile:hover {
  color: var(--ck-text);
  background-color: var(--ck-karte-hover);
}
#wrapwrap.cu-konto > main .o_cureal_zeile_ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 255, .25);
  background-color: rgba(0, 229, 255, .06);
  color: var(--ck-cyan-hell);
}
#wrapwrap.cu-konto > main .o_cureal_zeile_ico svg {
  width: 20px;
  height: 20px;
}
#wrapwrap.cu-konto > main .o_cureal_zeile_text {
  min-width: 0;
}
/* px und !important: live setzt das Theme Ueberschriften fest (wie die Seitenueberschrift oben) */
#wrapwrap.cu-konto > main .o_cureal_zeile h2 {
  margin: 0;
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 17px !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .o_cureal_zeile_unter {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main .o_cureal_zeile_rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ck-label);
  text-align: right;
}
/* Kurzstatus: derselbe Punkt wie im Zeiger-Kasten; rot ohne Puls */
#wrapwrap.cu-konto > main .o_cureal_zeile_rechts .o_cureal_zeiger_punkt {
  flex: none;
  margin: 0;
}
#wrapwrap.cu-konto > main .o_cureal_zeile_rechts[data-ton="rot"] .o_cureal_zeiger_punkt {
  background-color: var(--ck-fehler-rand);
  box-shadow: 0 0 0 3px rgba(255, 125, 125, .22);
}
#wrapwrap.cu-konto > main .o_cureal_zeile_rechts[data-ton="rot"] .o_cureal_zeiger_punkt::after {
  content: none;
}
#wrapwrap.cu-konto > main .o_cureal_zeile_pfeil {
  width: 20px;
  height: 20px;
  color: var(--ck-cyan-hell);
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}
#wrapwrap.cu-konto > main .o_cureal_zeile:hover .o_cureal_zeile_pfeil {
  transform: translateX(3px);
}
#wrapwrap.cu-konto > main .o_cureal_zusatz {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ck-leise);
}

/* ---- Sicherheit ---------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .o_portal_security_body {
  width: 100% !important;
  max-width: 640px;
  padding-bottom: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_security_body > .d-flex:has(> h3) {
  align-items: center;
  gap: 14px !important;
  margin: 0 0 28px !important;
}
#wrapwrap.cu-konto > main .o_portal_security_body > .d-flex > a.btn {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0 !important;
}
#wrapwrap.cu-konto > main .o_portal_security_body > section {
  padding: 24px;
  margin-bottom: 14px;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 12px;
}
#wrapwrap.cu-konto > main .o_portal_security_body > section > h4 {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ck-titel);
  margin: 0 0 16px;
}
#wrapwrap.cu-konto > main .o_portal_security_body .oe_reset_password_form {
  max-width: none;
  margin: 0;
}
#wrapwrap.cu-konto > main .o_portal_security_body label[for] {
  display: block;
}
/* Odoo setzt mb-4, mb-1 (plus mb-1 an der Eingabegruppe) und mb-3: drei verschiedene Abstaende. Hier ein Wert. */
#wrapwrap.cu-konto > main .o_portal_security_body section[name="portal_change_password"] form > div {
  margin-bottom: 20px !important;
}
#wrapwrap.cu-konto > main .o_portal_security_body section[name="portal_change_password"] form > div > .input-group {
  margin-bottom: 0 !important;
}
#wrapwrap.cu-konto > main #cureal_geraete_hinweis {
  font-size: 14px !important;
  margin-top: 12px !important;
}
#wrapwrap.cu-konto > main section[name="portal_deactivate_account"] > .btn-light {
  color: #ffc4c4;
  border-color: rgba(255, 125, 125, .45);
}
#wrapwrap.cu-konto > main section[name="portal_deactivate_account"] > .btn-light:hover {
  color: #ffffff;
  background-color: rgba(255, 125, 125, .12);
  border-color: rgba(255, 125, 125, .8);
}

/* ---- Dialoge: im Look (in der Seite und am Body) -------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .modal-content {
  color: var(--ck-text);
  background-color: var(--ck-karte);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
#wrapwrap.cu-konto > main .modal-header {
  border-bottom-color: var(--ck-rand);
  border-radius: 12px 12px 0 0;
  padding: 18px 22px;
}
#wrapwrap.cu-konto > main .modal-header.bg-danger {
  background-color: rgba(255, 125, 125, .12) !important;
}
#wrapwrap.cu-konto > main .modal-title {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 18px;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}
#wrapwrap.cu-konto > main .modal-body {
  padding: 20px 22px;
}
#wrapwrap.cu-konto > main .modal-body p {
  color: var(--ck-text) !important;
}
#wrapwrap.cu-konto > main .modal-body b,
#wrapwrap.cu-konto > main .modal-body .text-danger {
  color: var(--ck-fehler) !important;
}
#wrapwrap.cu-konto > main .modal-footer {
  border-top-color: var(--ck-rand);
  padding: 16px 22px;
  gap: 10px;
}
#wrapwrap.cu-konto > main .modal-footer > * {
  margin: 0;
}
#wrapwrap.cu-konto > main .btn-danger {
  min-height: 48px;
  padding: 10px 22px;
  font-size: 15px;
  color: #2a0507;
  background-color: #ff8f8f;
  border: 0;
  box-shadow: none;
}
#wrapwrap.cu-konto > main .btn-danger:hover {
  color: #2a0507;
  background-color: #ffabab;
}
#wrapwrap.cu-konto > main .modal-body .alert-danger:empty {
  display: none;
}
#wrapwrap.cu-konto > main #request_blacklist {
  flex: none;
  margin: 18px 0 0;
}

/* Kein schwebender WhatsApp-Knopf auf den Konto-Seiten (Ivo, 29.10.: "auf der Konto Seite brauchen wir kein whatsapp").
   Der Knopf entsteht live per Skript im Website-Code (Kopf- und Body-Code, .cureal-wa-floating) am Body, also ausserhalb von
   main: die einzige Regel ausserhalb von main und Odoos Dialogen. Der WhatsApp-Link im Footer und im Handy-Menue bleibt. */
body:has(> #wrapwrap.cu-konto) .cureal-wa-floating {
  display: none !important;
}

/* Dialoge, die Odoo an den Body haengt (Passwort bestaetigen): eigene Regeln, :has nie in einer Liste. */
body:has(> #wrapwrap.cu-konto) .modal-backdrop {
  --bs-backdrop-bg: #00040f;
  --bs-backdrop-opacity: .72;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-content {
  color: #b2c1d7;
  background-color: #061633;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  font-family: Inter, "Cureal Manrope", system-ui, sans-serif;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-header,
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-footer {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, .1);
}
/* Odoos Dialogkopf ist ein header-Element: live faerbt das Theme jedes header blau, hier gilt die Karte. */
body:has(> #wrapwrap.cu-konto) .o_dialog header.modal-header {
  color: #f7f9ff;
  background-image: none !important;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-header .oi-arrow-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  color: #dbe4f1;
  font-size: 18px !important;
}
/* live setzt eine Regel des Themes die Schriftgroesse des Symbols auf 0 (gemessen 29.10.) */
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-header .oi-arrow-left::before {
  font-size: 18px !important;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-title {
  font-family: Manrope, "Cureal Manrope", Inter, sans-serif;
  font-weight: 700;
  color: #f7f9ff;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-body h3 {
  font-family: Inter, "Cureal Manrope", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #dbe4f1;
  margin: 0;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-body h3 + br {
  display: none;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-body form > div {
  margin-top: 14px;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-body,
body:has(> #wrapwrap.cu-konto) .o_dialog .modal-body label {
  color: #b2c1d7;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .form-control {
  min-height: 48px;
  color: #f7f9ff;
  background-color: #020b24;
  border: 1px solid #50648a;
  border-radius: 10px;
  box-shadow: none;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .form-control:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .28);
}
/* Symbol-Knoepfe (oi, fa: Zurueck-Pfeil, Vergroessern) behalten ihre Symbolschrift; live schlug Manrope sie sonst */
body:has(> #wrapwrap.cu-konto) .o_dialog .btn:where(:not(.oi):not(.fa)) {
  font-family: Manrope, "Cureal Manrope", Inter, sans-serif;
  font-weight: 700;
  min-height: 48px;
  border-radius: 10px;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-primary {
  color: #06101e;
  background-color: #00e5ff;
  border: 0;
  box-shadow: 0 5px 0 #0097b3;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-primary:hover {
  color: #06101e;
  background-color: #5cf0ff;
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-secondary,
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-light {
  color: #c9f9ff;
  background-color: transparent;
  border: 1px solid rgba(92, 240, 255, .42);
}
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-secondary:hover,
body:has(> #wrapwrap.cu-konto) .o_dialog .btn-light:hover {
  color: #ffffff;
  background-color: rgba(0, 229, 255, .1);
}
body:has(> #wrapwrap.cu-konto) .o_dialog a {
  color: #5cf0ff;
}

/* Dialoge am Handy: Knoepfe untereinander in voller Breite (sonst bricht "Passwort bestaetigen" zweizeilig um) */
@media (max-width: 479.98px) {
  /* Odoos Dialogfuss traegt gap-1 (4 px, !important) */
  body:has(> #wrapwrap.cu-konto) .o_dialog .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
  }
  body:has(> #wrapwrap.cu-konto) .o_dialog .modal-footer .btn {
    width: 100%;
    margin: 0;
  }
  #wrapwrap.cu-konto > main .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #wrapwrap.cu-konto > main .modal-footer > .btn,
  #wrapwrap.cu-konto > main .modal-footer > input.btn {
    width: 100%;
  }
}

/* ---- Kontaktdaten -------------------------------------------------------------------------------------------------- */
#wrapwrap.cu-konto > main .o_customer_address_fill > .row > [name="address_div"] {
  width: 100%;
}
#wrapwrap.cu-konto > main .o_portal_wrap .cu-konto__titel {
  margin-bottom: 28px;
}
#wrapwrap.cu-konto > main form[name="address_form"] {
  padding: 24px 24px 4px;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 12px;
}
#wrapwrap.cu-konto > main form[name="address_form"] > .row {
  --bs-gutter-x: 20px;
  row-gap: 6px;
}
#wrapwrap.cu-konto > main form[name="address_form"] .label-optional::after {
  color: var(--ck-leise);
  font-weight: 400;
}
#wrapwrap.cu-konto > main form[name="address_form"] > .d-flex {
  gap: 12px;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
#wrapwrap.cu-konto > main form[name="address_form"] > .d-flex .btn {
  margin-bottom: 5px;
}
#wrapwrap.cu-konto > main form[name="address_form"] > .d-flex > .position-relative {
  display: none !important;
}
/* Lieferadresse nur zum Lesen (Nachtrag 30.10., Spec 14.21 Punkt 5): kein Eingabefeld, sieht aus wie das gesperrte
   E-Mail-Feld (gestrichelter Rand, leiser Text, Schloss), darunter der Hinweis auf den Fragebogen. */
#wrapwrap.cu-konto > main .o_cureal_adresse > .row {
  --bs-gutter-x: 20px;
}
#wrapwrap.cu-konto > main .o_cureal_adresse_label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ck-label);
}
#wrapwrap.cu-konto > main .o_cureal_adresse dd {
  position: relative;
  min-height: 48px;
  margin: 0;
  padding: 11px 44px 11px 14px;
  font-family: var(--ck-schrift);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ck-text);
  background-color: rgba(255, 255, 255, .03);
  border: 1px dashed var(--ck-feldrand);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
#wrapwrap.cu-konto > main .o_cureal_adresse dd::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-color: var(--ck-leise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
#wrapwrap.cu-konto > main .o_cureal_adresse .form-text {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- Meine Bestellungen (Nachtrag 31.10., Spec 14.24 Punkt 8) ---------------------------------------------------------
   Variante C „Wie die Kasse“ aus Ivos Vorschau (klickweg/varianten/meine-bestellungen-varianten.html#c, Statuszeile Fassung 2
   „Zeiger auf den Schritt“): je Bestellung eine Karte mit blauem Band, nummerierten Kreisen 1 bis 4, dem Zeiger-Kasten mit
   Spitze auf den Schritt, Positionen mit Sortenbild und der Gesamt-Box. Beendete Bestellungen als zugeklappte Zeile
   (details). Die Schliere der Seite bleibt die der Konto-Seiten (die grosse der Vorschau gehoert nicht dazu). */
#wrapwrap.cu-konto > main #cureal_bestellungen > h3 {
  margin: 0 0 28px !important;
}
/* Sperr-Hinweis der Kasse (laufend_text) als ruhige Zeile mit Info-Zeichen unter der Ueberschrift, kein Kasten */
#wrapwrap.cu-konto > main .o_cureal_sperre {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -12px 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-label);
}
#wrapwrap.cu-konto > main .o_cureal_icon {
  flex: none;
  width: 18px;
  height: 18px;
}
#wrapwrap.cu-konto > main .o_cureal_sperre > .o_cureal_icon {
  margin-top: 2px;
  color: var(--ck-cyan-hell);
}
/* Leerer Zustand: eine ruhige Karte mit dem Weg zur Sortenauswahl */
#wrapwrap.cu-konto > main .o_cureal_leer {
  padding: 26px;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 16px;
}
#wrapwrap.cu-konto > main #cureal_keine_bestellung {
  color: var(--ck-text) !important;
  margin: 0 0 20px;
}
#wrapwrap.cu-konto > main .o_cureal_bestellung {
  margin-bottom: 14px;
  color: var(--ck-text);
}
/* Karte: Stepper-Rand (--ck-sp) und Kastenrand (--ck-zr) rechnen die Spitze des Zeigers */
#wrapwrap.cu-konto > main .o_cureal_karte {
  --ck-sp: 26px;
  --ck-zr: 26px;
  overflow: hidden;
  background-color: var(--ck-karte);
  border: 1px solid rgba(0, 229, 255, .3);
  border-radius: 16px;
}
/* Band wie der Kopf der Kasse: Weiss auf dem Verlauf, am hellsten Ende #0a72b2 noch 5,2 : 1 */
#wrapwrap.cu-konto > main .o_cureal_band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  color: #ffffff;
  font-family: var(--ck-schrift-ui);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #0a3f8a 0%, #0b5fae 50%, #0a72b2 80%, #0b5fae 100%);
}
#wrapwrap.cu-konto > main .o_cureal_band_datum {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 700;
  font-size: 15px;
}
/* Stepper: vier nummerierte Kreise wie in der Kasse. Der Name steht im Markup vorn (Screenreader, Tests), der Kreis ist
   rein dekorativ (aria-hidden) und steht per order oben. */
#wrapwrap.cu-konto > main .o_cureal_statusleiste {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
  margin: 0 !important;
  padding: 26px var(--ck-sp) 6px !important;
  list-style: none;
}
#wrapwrap.cu-konto > main .o_cureal_schritt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 2px !important;
  list-style: none !important;
  text-align: center;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ck-leise);
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Verbindungslinie zum vorigen Kreis */
#wrapwrap.cu-konto > main .o_cureal_schritt::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(-50% + 22px);
  right: calc(50% + 22px);
  height: 2px;
  background-color: rgba(178, 193, 215, .2);
}
#wrapwrap.cu-konto > main .o_cureal_schritt:first-child::before {
  content: none;
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="fertig"]::before,
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="aktiv"]::before {
  background-color: var(--ck-cyan);
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="rot"]::before {
  background-color: var(--ck-fehler-rand);
}
#wrapwrap.cu-konto > main .o_cureal_kreis {
  order: -1;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(178, 193, 215, .4);
  background-color: var(--ck-karte);
  color: var(--ck-leise);
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#wrapwrap.cu-konto > main .o_cureal_kreis svg {
  width: 18px;
  height: 18px;
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="fertig"] {
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="fertig"] > .o_cureal_kreis {
  border-color: var(--ck-cyan);
  color: var(--ck-cyan);
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="aktiv"] {
  color: var(--ck-titel);
  font-weight: 700;
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="aktiv"] > .o_cureal_kreis {
  border-color: var(--ck-cyan);
  background-color: var(--ck-cyan);
  color: var(--ck-knopf-text);
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="rot"] {
  color: var(--ck-fehler);
  font-weight: 700;
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="rot"] > .o_cureal_kreis {
  border-color: var(--ck-fehler-rand);
  background-color: rgba(255, 125, 125, .16);
  color: var(--ck-fehler);
}
/* Puls am aktuellen Schritt (Spec 14.21 Punkt 3, seit 31.10. am Kreis wie in der Vorschau): ein Ring um den Kreis weitet sich
   auf das 1,7-Fache und blendet aus, alle 2 s. Nur transform und opacity, auf eigener Ebene: kein Layout. Der Ring sitzt
   absolut im Flex-Element ohne top/left, also an der statischen Stelle (waagrecht mittig, oben wie der Kreis), 2 px groesser
   als der Kreis. Nur am Zustand aktiv (das Template setzt ihn nur dort), nie bei rot, fertig, offen oder grau;
   prefers-reduced-motion blendet ihn aus (unten). Wo er pulsiert, blendet die Schliere nicht ein. */
#wrapwrap.cu-konto > main .o_cureal_puls {
  display: none;
}
#wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="aktiv"] > .o_cureal_puls {
  display: block;
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -2px;
  border: 2px solid var(--ck-cyan);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: ck-puls 2s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes ck-puls {
  0% {
    transform: scale(1);
    opacity: .6;
  }
  75%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
#wrapwrap.cu-konto > main:has(.o_cureal_puls)::before {
  animation: none;
}
#wrapwrap.cu-konto > main:has(.o_cureal_zeiger_punkt)::before {
  animation: none;
}
/* Zeiger-Kasten (Fassung 2): die Spitze zeigt auf den Schritt data-zeiger (1 bis 4), 0 = ohne Spitze. Die Mitte des Schritts n
   liegt bei --ck-sp + (n - 0,5) / 4 der Stepperbreite; der Kasten sitzt um --ck-zr eingerueckt. */
#wrapwrap.cu-konto > main .o_cureal_zeiger {
  --ck-zeiger-f: 0;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 16px var(--ck-zr) 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: var(--ck-karte-hover);
  border: 1px solid rgba(0, 229, 255, .3);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .8);
}
#wrapwrap.cu-konto > main .o_cureal_zeiger::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(var(--ck-sp) - var(--ck-zr) + (100% + 2 * var(--ck-zr) - 2 * var(--ck-sp)) * var(--ck-zeiger-f) - 8px);
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(0, 229, 255, .3);
  border-top: 1px solid rgba(0, 229, 255, .3);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
#wrapwrap.cu-konto > main .o_cureal_zeiger[data-zeiger="1"] {
  --ck-zeiger-f: .125;
}
#wrapwrap.cu-konto > main .o_cureal_zeiger[data-zeiger="2"] {
  --ck-zeiger-f: .375;
}
#wrapwrap.cu-konto > main .o_cureal_zeiger[data-zeiger="3"] {
  --ck-zeiger-f: .625;
}
#wrapwrap.cu-konto > main .o_cureal_zeiger[data-zeiger="4"] {
  --ck-zeiger-f: .875;
}
#wrapwrap.cu-konto > main .o_cureal_zeiger[data-zeiger="0"]::before {
  content: none;
}
#wrapwrap.cu-konto > main .o_cureal_zeiger_punkt {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 6px 2px 0;
  border-radius: 50%;
  background-color: var(--ck-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .22);
}
#wrapwrap.cu-konto > main .o_cureal_zeiger_punkt::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--ck-cyan);
  opacity: 0;
  pointer-events: none;
  animation: ck-welle 2s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes ck-welle {
  0% {
    transform: scale(1);
    opacity: .75;
  }
  75%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
#wrapwrap.cu-konto > main .o_cureal_status_text {
  margin: 0 !important;
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .o_cureal_status_satz {
  margin: 3px 0 0 !important;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-label);
}
#wrapwrap.cu-konto > main .o_cureal_zeiger .o_cureal_fragebogen {
  margin: 14px 0 5px !important;
}
/* Ton rot (Apotheke nicht moeglich): rot getoenter Kasten, Punkt ohne Puls */
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="rot"] .o_cureal_zeiger {
  background: linear-gradient(rgba(255, 125, 125, .1), rgba(255, 125, 125, .1)), var(--ck-karte-hover);
  border-color: rgba(255, 125, 125, .45);
}
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="rot"] .o_cureal_zeiger::before {
  border-color: rgba(255, 125, 125, .45);
}
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="rot"] .o_cureal_zeiger_punkt {
  background-color: var(--ck-fehler-rand);
  box-shadow: 0 0 0 3px rgba(255, 125, 125, .22);
}
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="rot"] .o_cureal_zeiger_punkt::after,
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="grau"] .o_cureal_zeiger_punkt::after {
  content: none;
}
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="rot"] .o_cureal_status_text {
  color: var(--ck-fehler);
}
#wrapwrap.cu-konto > main .o_cureal_karte[data-ton="grau"] .o_cureal_zeiger_punkt {
  background-color: var(--ck-leise);
  box-shadow: none;
}
/* Positionen mit Sortenbild (52 px, Radius 10), Name, Apotheke, Menge */
#wrapwrap.cu-konto > main .o_cureal_positionen {
  margin: 0 !important;
  padding: 0 26px !important;
  list-style: none;
  border-top: 1px solid var(--ck-rand);
}
#wrapwrap.cu-konto > main .o_cureal_positionen > li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 16px 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--ck-rand);
}
#wrapwrap.cu-konto > main .o_cureal_positionen > li::before {
  content: none !important;
}
#wrapwrap.cu-konto > main .o_cureal_pos_bild {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background-color: #e9eef6;
}
/* ohne Bild: ruhige Kachel mit Blatt, kein kaputtes Bild */
#wrapwrap.cu-konto > main .o_cureal_pos_platzhalter {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 229, 255, .06);
  border: 1px solid rgba(0, 229, 255, .2);
  color: var(--ck-cyan-hell);
}
#wrapwrap.cu-konto > main .o_cureal_pos_platzhalter svg {
  width: 24px;
  height: 24px;
}
#wrapwrap.cu-konto > main .o_cureal_pos_name {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ck-titel);
  overflow-wrap: anywhere;
}
#wrapwrap.cu-konto > main .o_cureal_pos_unter {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ck-leise);
}
#wrapwrap.cu-konto > main .o_cureal_pos_menge {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--ck-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#wrapwrap.cu-konto > main .o_cureal_summe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 26px 24px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 229, 255, .3);
  border-radius: 12px;
  background-color: rgba(1, 13, 44, .5);
}
#wrapwrap.cu-konto > main .o_cureal_summe > span {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--ck-titel);
}
#wrapwrap.cu-konto > main .o_cureal_summe > b {
  font-family: var(--ck-schrift-ui);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
}
/* Beendete Bestellungen: zugeklappte Zeile (Datum, Positionen kurz, Status mit Zeichen, Summe, Pfeil) */
#wrapwrap.cu-konto > main .o_cureal_zu {
  overflow: hidden;
  background-color: var(--ck-karte);
  border: 1px solid var(--ck-rand);
  border-radius: 16px;
}
#wrapwrap.cu-konto > main .o_cureal_zu > summary {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto auto 20px;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  list-style: none;
  cursor: pointer;
  color: var(--ck-label);
  font-size: 15px;
  line-height: 1.4;
  transition: background-color .18s ease-out;
}
#wrapwrap.cu-konto > main .o_cureal_zu > summary::-webkit-details-marker {
  display: none;
}
#wrapwrap.cu-konto > main .o_cureal_zu > summary::marker {
  content: "";
}
#wrapwrap.cu-konto > main .o_cureal_zu > summary:hover {
  background-color: var(--ck-karte-hover);
}
#wrapwrap.cu-konto > main .o_cureal_zu_datum {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
}
#wrapwrap.cu-konto > main .o_cureal_zu_kurz {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ck-text);
}
#wrapwrap.cu-konto > main .o_cureal_zu_stand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ck-schrift-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ck-erfolg);
}
#wrapwrap.cu-konto > main .o_cureal_zu_stand .o_cureal_icon {
  width: 16px;
  height: 16px;
}
#wrapwrap.cu-konto > main .o_cureal_bestellung[data-ton="rot"] .o_cureal_zu_stand {
  color: var(--ck-fehler);
}
#wrapwrap.cu-konto > main .o_cureal_bestellung[data-ton="grau"] .o_cureal_zu_stand {
  color: var(--ck-leise);
}
#wrapwrap.cu-konto > main .o_cureal_zu_summe {
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--ck-titel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#wrapwrap.cu-konto > main .o_cureal_zu_pfeil {
  width: 20px;
  height: 20px;
  color: var(--ck-leise);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
#wrapwrap.cu-konto > main .o_cureal_zu[open] .o_cureal_zu_pfeil {
  transform: rotate(180deg);
}
/* Hauptweg zur Sortenauswahl im Lichtstrahl-Stil (Nachtrag 31.10., Spec 14.24 Punkt 9): wie „Termin buchen“ der Startseite
   und „Weiter zur Kasse“ im Konto-Dialog der Sortenseite (Vorschau .knopf-licht). Auch im leeren Zustand hier. */
#wrapwrap.cu-konto > main .o_cureal_knopf_licht {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-bottom: 7px;
  padding: 0 28px;
  border-radius: 10px;
  border: 1px solid rgba(126, 202, 255, .55);
  background: url("https://bfwc-client-assets.pages.dev/cureal/startseite/desktop-cleanplate.webp") no-repeat 50.49% 59.58% / 600% auto, linear-gradient(135deg, #071f52 0%, #0f367f 100%);
  color: #ffffff;
  font-family: var(--ck-schrift-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(2, 10, 34, .55);
  box-shadow: 0 5px 0 #06183f, inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 22px rgba(70, 124, 255, .45), 0 0 64px rgba(70, 124, 255, .2);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#wrapwrap.cu-konto > main .o_cureal_knopf_licht:hover,
#wrapwrap.cu-konto > main .o_cureal_knopf_licht:focus-visible {
  color: #ffffff;
  border-color: rgba(126, 202, 255, .85);
  background: url("https://bfwc-client-assets.pages.dev/cureal/startseite/desktop-cleanplate.webp") no-repeat 50.49% 59.58% / 600% auto, linear-gradient(135deg, #0a2a68 0%, #134195 100%);
  box-shadow: 0 7px 0 #06183f, inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 30px rgba(70, 124, 255, .6), 0 0 80px rgba(70, 124, 255, .28);
  transform: translateY(-2px);
}
#wrapwrap.cu-konto > main .o_cureal_knopf_licht:active {
  color: #ffffff;
  box-shadow: 0 2px 0 #06183f, inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 22px rgba(70, 124, 255, .45);
  transform: translateY(3px);
}
#wrapwrap.cu-konto > main .o_cureal_leer .o_cureal_knopf_licht {
  display: inline-flex;
}

/* ---- Handy -------------------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #wrapwrap.cu-konto > main {
    padding-bottom: 64px;
  }
  #wrapwrap.cu-konto > main .cu-konto__titel,
  #wrapwrap.cu-konto > main .o_portal_wrap .wrapper > h3,
  #wrapwrap.cu-konto > main .o_portal_security_body > .d-flex > h3,
  #wrapwrap.cu-konto > main #cureal_bestellungen > h3 {
    font-size: 32px !important;
  }
  #wrapwrap.cu-konto > main > .cu-konto__titel {
    margin-top: 36px;
    margin-bottom: 20px;
  }
  #wrapwrap.cu-konto > main > .oe_website_login_container {
    padding: 24px 20px 20px;
  }
  #wrapwrap.cu-konto > main > .oe_website_login_container:first-child {
    margin-top: 36px;
  }
  #wrapwrap.cu-konto > main .o_portal_wrap > .container {
    padding-top: 28px !important;
  }
  #wrapwrap.cu-konto > main .o_portal.container {
    margin-top: 20px !important;
  }
  #wrapwrap.cu-konto > main .btn-primary {
    width: 100%;
  }
  #wrapwrap.cu-konto > main .o_portal_security_body > section,
  #wrapwrap.cu-konto > main form[name="address_form"] {
    padding: 20px 18px;
  }
  #wrapwrap.cu-konto > main .o_portal_security_body > section > form > .btn,
  #wrapwrap.cu-konto > main .o_portal_security_body > section > .btn {
    width: 100%;
  }
  #wrapwrap.cu-konto > main .o_portal_index_card > a {
    padding: 14px 16px !important;
    gap: 14px !important;
  }
  /* Meine Bestellungen am Handy (Vorschau body.handy): engere Raender, Stepper 10 px, Kasten 18 px eingerueckt */
  #wrapwrap.cu-konto > main .o_cureal_karte {
    --ck-sp: 10px;
    --ck-zr: 18px;
  }
  #wrapwrap.cu-konto > main .o_cureal_band {
    padding-left: 18px;
    padding-right: 18px;
  }
  #wrapwrap.cu-konto > main .o_cureal_statusleiste {
    padding-top: 22px !important;
  }
  #wrapwrap.cu-konto > main .o_cureal_schritt {
    font-size: 12px;
  }
  #wrapwrap.cu-konto > main .o_cureal_zeiger {
    padding: 14px 16px;
  }
  #wrapwrap.cu-konto > main .o_cureal_positionen {
    padding: 0 18px !important;
  }
  #wrapwrap.cu-konto > main .o_cureal_summe {
    margin-left: 18px;
    margin-right: 18px;
  }
  #wrapwrap.cu-konto > main .o_cureal_leer {
    padding: 22px 18px;
  }
  #wrapwrap.cu-konto > main .o_cureal_leer .o_cureal_knopf_licht {
    display: flex;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu > summary {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    gap: 4px 12px;
    padding: 14px 16px;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu_datum {
    grid-column: 1;
    grid-row: 1;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu_summe {
    grid-column: 2;
    grid-row: 1;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu_pfeil {
    grid-column: 3;
    grid-row: 1;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu_kurz {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }
  #wrapwrap.cu-konto > main .o_cureal_zu_stand {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* /my am Handy: Ausweis oben, Liste darunter, Kurzstatus ausgeblendet */
  #wrapwrap.cu-konto > main .o_cureal_konto > .cu-konto__titel {
    font-size: 34px !important;
  }
  #wrapwrap.cu-konto > main .o_cureal_konto_raster {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }
  #wrapwrap.cu-konto > main .o_cureal_zeile {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    padding: 16px 18px;
  }
  #wrapwrap.cu-konto > main .o_cureal_zeile_rechts {
    display: none;
  }
}
/* Sehr schmal (320 px): die Schrittnamen eine Spur kleiner, damit „Fragebogen“ in eine Spalte passt */
@media (max-width: 359.98px) {
  #wrapwrap.cu-konto > main .o_cureal_schritt {
    font-size: 11px;
    padding: 0 !important;
  }
}

/* ---- Bewegung ----------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #wrapwrap.cu-konto > main::before {
    animation: none;
  }
  #wrapwrap.cu-konto > main .o_cureal_schritt[data-zustand="aktiv"] > .o_cureal_puls {
    display: none;
    animation: none;
  }
  #wrapwrap.cu-konto > main .o_cureal_zeiger_punkt::after {
    display: none;
    animation: none;
  }
  #wrapwrap.cu-konto > main .o_cureal_knopf_licht,
  #wrapwrap.cu-konto > main .o_cureal_knopf_licht:hover,
  #wrapwrap.cu-konto > main .o_cureal_knopf_licht:active {
    transform: none;
  }
  #wrapwrap.cu-konto > main *,
  #wrapwrap.cu-konto > main *::before,
  #wrapwrap.cu-konto > main *::after {
    transition: none !important;
  }
}