/* Reha-Shirts.de | Farbwelt B - Frisches Blau (aufgehellte Variante) | 2026-11-14
   Eigene Anpassungen zu BootstrapMade eStore. Nach main.css laden.
   Hauptfarben: #075A9C / #1599D6 / #77C9ED / #263D52
*/
:root {
  --rs-ocean: #075A9C;
  --rs-azure: #1599D6;
  --rs-sky: #77C9ED;
  --rs-navy: #263D52;
  --rs-white: #FFFFFF;
  --rs-page: #F4F8FB;
  --rs-border: #DCE6EE;
  --rs-muted: #526778;
  --rs-text: #22313F;
  --rs-sky-soft: #EAF7FD;
  --rs-success: #20764B;
  --rs-warning: #A95B05;
  --rs-danger: #B42332;

  /* Kompatibilität mit bisherigen eigenen Variablen */
  --rs-ink: var(--rs-navy);
  --rs-green: var(--rs-ocean);
  --rs-mint: var(--rs-sky-soft);
  --rs-sand: var(--rs-page);

  /* BootstrapMade eStore Variablen: override nach main.css */
  --background-color: var(--rs-white);
  --default-color: var(--rs-text);
  --heading-color: var(--rs-navy);
  --accent-color: var(--rs-ocean);
  --surface-color: var(--rs-white);
  --contrast-color: var(--rs-white);
  --nav-color: var(--rs-navy);
  --nav-hover-color: var(--rs-navy);
  --nav-mobile-background-color: var(--rs-white);
  --nav-dropdown-background-color: var(--rs-white);
  --nav-dropdown-color: var(--rs-navy);
  --nav-dropdown-hover-color: var(--rs-navy);
  --bs-primary: var(--rs-ocean);
  --bs-primary-rgb: 7, 90, 156;
  --bs-link-color: var(--rs-ocean);
  --bs-link-hover-color: var(--rs-ocean);
}
.light-background { --background-color: var(--rs-page); --surface-color: var(--rs-white); }
.dark-background { --background-color: var(--rs-ocean); --default-color: var(--rs-white); --heading-color: var(--rs-white); --accent-color: var(--rs-sky); --surface-color: #36536A; --contrast-color: var(--rs-ocean); }

body { color: var(--rs-text); background: var(--rs-white); font-family: 'Nunito', system-ui, sans-serif; }
h1,h2,h3 { font-family: 'Poppins', system-ui, sans-serif; letter-spacing: -.035em; font-weight: 700; color: var(--rs-navy); }
h1 { font-size: clamp(2.5rem,5vw,4.7rem); line-height: 1.12; }
h2 { font-size: clamp(1.8rem,3vw,2.5rem); }
p { line-height: 1.7; }
a { color: var(--rs-navy); }
a:hover { color: var(--rs-ocean); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid var(--rs-azure); outline-offset: 3px; }
.topline { text-align: center; background: var(--rs-ocean); color: #fff; padding: 7px 12px; font-size: .82rem; }
.rs-header { background: var(--rs-white); box-shadow: 0 2px 17px rgba(38,61,82,.09); }
.navbar-brand { color: var(--rs-ocean)!important; letter-spacing: -.05em; }
.navbar-brand span { color: var(--rs-azure); }
.navbar-brand small { font-size: .65em; }
.rs-header .nav-link { font-weight: 700; color: var(--rs-navy); }
.rs-header .nav-link:hover,.rs-header .nav-link:focus,.rs-header .nav-link.active { color: var(--rs-navy); }
.btn-rs, .btn-primary { background: var(--rs-ocean); border: 1px solid var(--rs-ocean); color: #fff; border-radius: 7px; padding: .7rem 1.3rem; font-weight: 700; }
.btn-rs:hover,.btn-rs:focus-visible,.btn-primary:hover,.btn-primary:focus-visible { background: var(--rs-azure); border-color: var(--rs-azure); color: #fff; }
.btn-outline-primary { color: var(--rs-navy); border-color: var(--rs-navy); }
.btn-outline-primary:hover { color: #fff; background: var(--rs-navy); border-color: var(--rs-navy); }
.eyebrow { letter-spacing: .14em; font-size: .75rem; font-weight: 800; color: var(--rs-navy); }
.rs-hero { background: linear-gradient(110deg,var(--rs-page) 0%,#fff 74%); padding: 3.5rem 0; }
.rs-hero h1 em { color: var(--rs-navy); font-style: normal; }
.hero-art { position: relative; border-radius: 25px; background: var(--rs-sky-soft); padding: 24px; box-shadow: 0 25px 60px rgba(38,61,82,.1); }
.hero-art img { width: 100%; height: auto; border-radius: 16px; }
.hero-sticker { position: absolute; right: -7px; bottom: 7%; background: var(--rs-sky); color: var(--rs-navy); padding: 17px 22px; border-radius: 50%; font-weight: 800; transform: rotate(-9deg); box-shadow: 0 5px 22px rgba(38,61,82,.17); text-align: center; }
.benefit { background: var(--rs-page); border-radius: 12px; padding: 25px; height: 100%; }
.benefit i { font-size: 1.8rem; color: var(--rs-navy); }
.benefit h3 { font-size: 1.25rem; margin-top: 15px; }
.motif-card { display: block; box-shadow: 0 7px 32px rgba(38,61,82,.08); border: 1px solid var(--rs-border); border-radius: 13px; overflow: hidden; color: var(--rs-ocean); height: 100%; text-decoration: none; transition: transform .15s,box-shadow .15s; }
.motif-card:hover { transform: translateY(-3px); color: var(--rs-navy); box-shadow: 0 11px 35px rgba(7,90,156,.14); }
.motif-card img { display: block; aspect-ratio: 1; object-fit: contain; width: 100%; background: var(--rs-page); }
.motif-card small { color: var(--rs-muted); font-weight: 800; }
.motif-card h3 { font-size: 1.08rem; line-height: 1.4; margin: .4rem 0 1rem; }
.motif-card span { font-size: .9rem; color: var(--rs-navy); font-weight: 700; }
.link-rs { color: var(--rs-navy); font-weight: 700; }
.soft-section { background: var(--rs-sky-soft); }
.product-art { width: 100%; border-radius: 15px; box-shadow: 0 15px 40px rgba(38,61,82,.09); }
.product-form { background: var(--rs-page); border: 1px solid var(--rs-border); border-radius: 14px; padding: 25px; }
.cart-line { padding: 20px 0; border-bottom: 1px solid var(--rs-border); }
.cart-line img { height: 145px; width: 145px; object-fit: contain; border-radius: 8px; background: var(--rs-page); }
.summary { background: var(--rs-page); border: 1px solid var(--rs-border); border-radius: 13px; padding: 25px; }
.summary .d-flex { margin-bottom: 10px; }
.narrow { max-width: 860px; }
.narrow h2 { margin-top: 2rem; font-size: 1.6rem; }
.rs-footer { background: var(--rs-ocean); color: var(--rs-white); }
.rs-footer p,.rs-footer small { color: #D4E7F4; }
.footer-links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.footer-links a { color: #E5F5FD; text-decoration: none; }
.footer-links a:hover { color: var(--rs-sky); text-decoration: underline; }
.form-control:focus,.form-select:focus { border-color: var(--rs-azure); box-shadow: 0 0 0 .2rem rgba(21,153,214,.18); }
.form-check-input:checked { background-color: var(--rs-navy); border-color: var(--rs-navy); }
.badge.bg-primary,.bg-primary { background-color: var(--rs-navy)!important; }
.text-primary { color: var(--rs-navy)!important; }
.border-primary { border-color: var(--rs-navy)!important; }
@media(max-width:767px) { .rs-hero { padding: 1.2rem 0; } .hero-sticker { right: 0; bottom: 0; font-size: .8rem; padding: 12px; } .cart-line img { width: 100px; height: 100px; } .motif-card h3 { font-size: .95rem; } }


/* Markenlogos – Querformat im Header, gestapelt im hellen Footer */
.rs-header .navbar-brand.rs-brand { display: inline-flex; align-items: center; padding: .45rem 0; margin-right: 1.5rem; flex-shrink: 1; min-width: 0; }
.rs-brand img { display: block; width: clamp(185px, 24vw, 300px); height: auto; max-width: 100%; }
.rs-footer { background: var(--rs-page); color: var(--rs-text); border-top: 1px solid var(--rs-border); }
.rs-footer p, .rs-footer small { color: var(--rs-muted); }
.rs-footer strong { color: var(--rs-navy); }
.rs-footer .footer-links a { color: var(--rs-ocean); }
.rs-footer .footer-links a:hover { color: var(--rs-navy); }
.rs-footer-brand { display: inline-block; max-width: 100%; margin-bottom: 1rem; }
.rs-footer-brand img { display: block; width: min(360px, 100%); height: auto; }
@media (max-width: 575px) {
 .rs-brand img { width: 195px; }
 .rs-header .navbar-brand.rs-brand { margin-right: .5rem; }
 .rs-footer-brand img { width: min(310px, 100%); }
}

/* Finale Markenlogos, November 2026: SVG-Vektordateien */
.rs-brand img { width: clamp(180px, 25vw, 300px); height: auto; object-fit: contain; }
.rs-footer-brand img { width: min(360px, 100%); height: auto; object-fit: contain; }
@media (max-width: 575px) { .rs-brand img { width: 190px; } .rs-footer-brand img { width: min(310px, 100%); } }

/* Checkout-Optimierungen: sichtbare Formularfelder, gruppierte Übersicht, sichtbarer Bestellbutton */
.checkout-fields .form-panel {
  background: var(--rs-white);
  border: 1px solid var(--rs-border);
  border-radius: 14px;
  padding: 24px;
}
.checkout-fields .form-label {
  font-weight: 700;
  color: var(--rs-navy);
}
.checkout-fields .form-control,
.checkout-fields .form-select,
.checkout-fields textarea.form-control {
  background: var(--rs-white);
  border: 1px solid #b9c9d8;
  color: var(--rs-text);
  border-radius: 10px;
  min-height: 48px;
}
.checkout-fields textarea.form-control {
  min-height: 120px;
}
.checkout-fields .form-control::placeholder,
.checkout-fields textarea.form-control::placeholder {
  color: #7b8a97;
}
.checkout-fields .checkout-table-wrap {
  margin-top: 1rem;
}
.checkout-fields .checkout-table th {
  color: var(--rs-navy);
  font-weight: 800;
}
.checkout-fields .checkout-table td,
.checkout-fields .checkout-table th {
  vertical-align: top;
}
.checkout-sidebar {
  position: sticky;
  top: 110px;
}
.checkout-sidebar .btn[disabled] {
  opacity: 1;
  background: var(--rs-muted);
  border-color: var(--rs-muted);
  cursor: not-allowed;
}
@media (max-width: 991px) {
  .checkout-sidebar {
    position: static;
    top: auto;
  }
}

/* Reha-Shirts.de – einheitliche Typografie und Formularfelder (15.11.2026)
   Diese Regeln gelten für sämtliche öffentlichen Formulare inklusive Produkt-Personalisierung. */
:root {
  --rs-heading: #075A9C;
  --rs-input-border: #AFC3D5;
  --rs-input-hover: #779DBE;
}
main h1, main h2, main h3, main h4, main h5, main h6,
.rs-footer h1, .rs-footer h2, .rs-footer h3, .rs-footer h4,
.rs-footer h5, .rs-footer h6 {
  color: var(--rs-heading);
}
/* Sichtbar gerahmte Eingaben auf Produktseite, Kasse und zukünftigen Formularen. */
main .form-control,
main .form-select,
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="number"],
main input[type="date"],
main textarea,
main select {
  background-color: #FFFFFF;
  border: 1.5px solid var(--rs-input-border);
  border-radius: 8px;
  color: var(--rs-text);
  box-shadow: none;
}
main .form-control:hover, main .form-select:hover,
main input[type="text"]:hover, main input[type="email"]:hover,
main input[type="tel"]:hover, main input[type="number"]:hover,
main input[type="date"]:hover, main textarea:hover, main select:hover {
  border-color: var(--rs-input-hover);
}
main .form-control:focus, main .form-select:focus,
main input[type="text"]:focus, main input[type="email"]:focus,
main input[type="tel"]:focus, main input[type="number"]:focus,
main input[type="date"]:focus, main textarea:focus, main select:focus {
  border-color: var(--rs-ocean);
  box-shadow: 0 0 0 .2rem rgba(21,153,214,.16);
  outline: none;
}
main .form-control::placeholder, main textarea::placeholder {
  color: #718397;
  opacity: 1;
}
main .form-label { font-weight: 600; color: var(--rs-navy); }
/* Fehler der Validierung müssen klar sichtbar bleiben. */
main .form-control.is-invalid, main .form-select.is-invalid,
main input.is-invalid, main textarea.is-invalid, main select.is-invalid,
main .was-validated .form-control:invalid,
main .was-validated .form-select:invalid {
  border-color: var(--rs-danger);
}
main .form-check-input { border: 1.5px solid var(--rs-input-border); }
main .form-check-input:checked { background-color: var(--rs-ocean); border-color: var(--rs-ocean); }