/* ===========================
   XBOOK THEME — Komplettes CSS (final, vollständig)
   Datei: themes/alexandrox/assets/css/custom-xbook.css
   Zweck:
   - Logo bleibt visuell verschoben (transform), ohne Header-Box zu vergrößern
   - Nur auf der Startseite wird das Logo größer dargestellt (Desktop + Mobile)
   - Startseite: Hero-Top-Padding um 50px reduziert, damit Content näher am Header startet
   - Produktseite: Bild und Titel werden auf Desktop 30px höher, auf Mobile 70px höher positioniert
   - Falls main padding-top zu groß ist, wird es auf der Startseite ebenfalls angepasst
   - Header-Höhe wird über --xbook-header-height gesteuert (JS kann setzen)
   - Responsive-Fixes: Controls umbrechen/scrollen nicht aus Viewport
   - Ersetze die bestehende Datei komplett mit diesem Inhalt
=========================== */

/* ---------------------------
   Root / Variablen
   --------------------------- */
:root{
  --xbook-header-height: 64px;        /* Fallback-Höhe (wird per JS überschrieben) */
  --xbook-logo-shift-x: 10px;         /* Standard: nach rechts (visuell) */
  --xbook-logo-visual-y: 6px;         /* Standard: visuelle Verschiebung nach unten (px) */
  --xbook-logo-shift-x-home: 20px;    /* Startseite: zusätzlich 20px nach rechts (visuell) */
  --xbook-logo-visual-y-home: 30px;   /* Startseite: visuell ~30px weiter nach unten (px) */
  --xbook-logo-max-desktop: 140px;    /* Default Desktop max width/height reference */
  --xbook-logo-max-mobile: 36px;      /* Default Mobile max height */
  --xbook-bg: #000000;
  --xbook-accent: #0a84ff;
  --xbook-muted: #9bbcff;
  --xbook-text: #ffffff;
}

/* ---------------------------
   Reset / Body
   --------------------------- */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--xbook-bg);
  color: var(--xbook-text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Scroll-Padding nur auf der Startseite deaktivieren */
body.is-home {
  --scroll-padding-top: 0 !important;
  scroll-padding-top: 0 !important;
}

/* ---------------------------
   Global content offset (unter Header)
   --------------------------- */
main, #wrapper, .page-content, #content-wrapper {
  box-sizing: border-box;
  padding-top: var(--xbook-header-height);
}

/* Sprunganker nicht vom Header verdecken */
h1, h2, h3, h4, .product-title, .product-name {
  scroll-margin-top: calc(var(--xbook-header-height) + 12px);
}

/* ---------------------------
   Header Basis
   --------------------------- */
#xbook-header,
.xbook-header-minimal {
  width: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform .22s ease, background .22s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
}

/* Desktop: fixed mit definierter Höhe */
@media (min-width: 768px) {
  #xbook-header {
    position: fixed;
    top: 0;
    height: var(--xbook-header-height);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* Mobile: relativ, kein fixed */
@media (max-width: 767px) {
  #xbook-header {
    position: relative;
    height: auto;
    background: transparent;
    box-shadow: none;
    padding: 8px 12px;
  }
}

/* Header inner (horizontale Verteilung) */
.xbook-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 50px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* ---------------------------
   Logo: nur visuell per transform verschieben (keine padding-top)
   --------------------------- */

/* Container: Höhe füllt Header, Positionierung per transform */
.xbook-logo {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  /* Standard: X nach rechts, Y nach unten (positive Y = nach unten) */
  transform: translate(var(--xbook-logo-shift-x), var(--xbook-logo-visual-y));
  transition: transform .18s ease;
  min-width: 0;
}

/* Startseite: stärkerer visueller Shift (rechts +20px, runter ~30px) */
body.is-home .xbook-logo {
  transform: translate(var(--xbook-logo-shift-x-home), var(--xbook-logo-visual-y-home));
}

/* Optional: stärkere Klasse (kann JS setzen) */
.xbook-logo.push-strong {
  transform: translate(calc(var(--xbook-logo-shift-x) + 6px), calc(var(--xbook-logo-visual-y) + 6px));
}

/* ---------------------------
   Logo-Größenregeln
   --------------------------- */
.xbook-logo .logo {
  display: block; /* verhindert baseline-shift */
  max-height: calc(var(--xbook-header-height) - 18px);
  max-width: var(--xbook-logo-max-desktop);
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Startseite: größeres Logo (nur Darstellung) */
body.is-home .xbook-logo .logo {
  max-height: calc(var(--xbook-header-height) + 30px);
  max-width: 260px;
}

/* Tablet / Mobile Startseite */
@media (max-width: 1024px) {
  body.is-home .xbook-logo .logo {
    max-height: calc(var(--xbook-header-height) + 18px);
    max-width: 220px;
  }
}
@media (max-width: 480px) {
  body.is-home .xbook-logo .logo {
    max-height: 80px;
    max-width: 180px;
  }
}

/* Sichtbarkeit je Seite (serverseitig body.is-home gesetzt) */
body.is-home .logo--dark  { display: none !important; }
body.is-home .logo--white { display: block !important; }
body:not(.is-home) .logo--white { display: none !important; }
body:not(.is-home) .logo--dark  { display: block !important; }

/* ---------------------------
   Header Controls: responsive, nicht aus dem Viewport schieben
   --------------------------- */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

/* Controls children: erlauben Shrink, begrenzen Breite */
.header-controls > * {
  flex: 0 1 auto;
  min-width: 40px;
  box-sizing: border-box;
}

/* Mobile: Controls umbrechen/scrollen, damit nichts aus dem Viewport ragt */
@media (max-width: 480px) {
  .header-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }
  .header-controls::-webkit-scrollbar { height: 6px; }
  /* Falls Buttons Texte haben, verstecken wir sekundäre Texte auf sehr kleinen Bildschirmen */
  .header-controls .nav-text, .header-controls .btn-text { display: none !important; }
}

/* Menü Toggle (mobile) */
#xbook-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 6px;
  font-size: 18px;
}

/* Warenkorb / Mini‑Cart neutral im Header */
#xbook-header .ps_shoppingcart,
#xbook-header .cart-block,
#xbook-header .blockcart {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* ---------------------------
   Hero / Startseite
   - WICHTIG: Startseite hat Top-Padding um 50px reduziert (gegenüber Standard),
     damit Content näher am Header startet.
   - Wir verwenden calc() mit max() um negative Padding zu vermeiden.
   --------------------------- */

/* Standard-Hero (alle Seiten) */
#xbook-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - var(--xbook-header-height));
  background: var(--xbook-bg);
  padding: calc(40px + var(--xbook-header-height)) 0 80px 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* STARTSEITE: Hero 50px höher (Top-Padding reduziert um 50px) */
body.is-home #xbook-hero {
  /* Reduziert das Standard-Top-Padding um 50px.
     Verwendung von max() verhindert negative Padding-Werte. */
  padding-top: max(0px, calc(40px + var(--xbook-header-height) - 50px)) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  min-height: calc(100vh - var(--xbook-header-height)) !important;
}

/* Falls main padding-top das Problem verursacht: passe es auf der Startseite an */
body.is-home main,
body.is-home #wrapper,
body.is-home .page-content,
body.is-home #content-wrapper {
  /* Reduziere zusätzlich möglichen doppelten Abstand.
     Wir setzen main padding so, dass es nicht zusätzlich 50px Abstand erzeugt. */
  padding-top: max(0px, calc(var(--xbook-header-height) - 50px)) !important;
}

/* Neutralisiere mögliche zusätzliche Wrapper-Abstände auf der Startseite */
body.is-home .page,
body.is-home .content,
body.is-home .hero-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---------------------------
   Hero inner / Titel / Buttons
   --------------------------- */
.xbook-hero-inner {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.xbook-title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--xbook-text);
  margin: 0 0 12px 0;
}
.xbook-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  color: var(--xbook-muted);
  margin: 0 0 32px 0;
}
.xbook-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.xbook-btn-primary { background: var(--xbook-accent); color: #fff; border: none; padding: clamp(10px,1.6vw,14px) clamp(20px,3.2vw,32px); border-radius:8px; }
.xbook-btn-outline { background: transparent; border: 2px solid var(--xbook-accent); color: var(--xbook-accent); padding: clamp(10px,1.6vw,14px) clamp(20px,3.2vw,32px); border-radius:8px; }

/* ---------------------------
   Panels (visual)
   --------------------------- */
.xbook-panels { position: relative; width: 100%; height: clamp(320px,45vw,580px); pointer-events: none; z-index: 0; }

.panel {
  position: absolute;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.panel-main {
  width: min(1800px,90%);
  height: clamp(260px,30vw,500px);
  left: 50%;
  top: 40px;
  transform: translateX(-50%) rotateY(6deg);
  z-index: 3;
}

.panel-left, .panel-right {
  width: clamp(260px,30vw,600px);
  height: clamp(180px,20vw,350px);
  top: clamp(140px,18vw,260px);
}
.panel-left { left: 5%; transform: rotateY(5deg); z-index: 2; }
.panel-right { right: 5%; transform: rotateY(-5deg); z-index: 1; }

.panel-glow { position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,140,255,0.4), rgba(0,140,255,0.05), transparent); mix-blend-mode: screen; }

@keyframes float {
  0% { transform: translateY(0) rotateY(6deg); }
  50% { transform: translateY(-10px) rotateY(6deg); }
  100% { transform: translateY(0) rotateY(6deg); }
}

@media (max-width: 768px) { .xbook-panels { display: none; } }

/* ---------------------------
   Section wrappers (USP, Features, CTA)
   --------------------------- */
.xbook-usp, .xbook-timeline, .xbook-features, .xbook-cta {
  max-width: 1400px;
  margin: 120px auto;
  padding: 0 24px;
  color: var(--xbook-text);
  background: transparent;
  position: relative;
  z-index: 2;
}

/* USP grid */
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }

.usp-item {
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transition: transform .35s ease;
}
.usp-item:hover { transform: translateY(-6px); }

/* Timeline */
.timeline-step { display: flex; align-items: center; gap: 32px; margin-bottom: 48px; }
.timeline-step:nth-child(even) { flex-direction: row-reverse; }
.timeline-img { width: 50%; height: clamp(220px,35vw,420px); object-fit: cover; border-radius: 12px; }

@media (max-width: 768px) {
  .timeline-step { flex-direction: column !important; gap: 20px; }
  .timeline-img { width: 100%; }
}

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.feature-item {
  background: rgba(255,255,255,0.04);
  padding: 28px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  text-align: center;
  transition: transform .35s ease;
}
.feature-item:hover { transform: translateY(-6px); }

/* CTA */
.xbook-cta .cta-container {
  background: rgba(30,90,255,0.12);
  backdrop-filter: blur(8px);
  padding: 56px 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 28px rgba(0,120,255,0.12);
}
.cta-btn { display: inline-block; padding: 12px 28px; background: #4a6bff; color: #fff; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: background .2s ease; }
.cta-btn:hover { background: #6f8aff; }

/* ---------------------------
   Produktseite: Bild und Titel höher positionieren
   - Desktop: -30px
   - Mobile (max-width: 480px): -70px
   Hinweise:
   - Wir zielen auf mehrere gängige Selektoren, damit die Regel in verschiedenen Themes greift:
     .product-image, .product-cover, .product-gallery, .product-main-image, .product-single__photo
     .product-title, .product-name, h1.product-title
   - Transition sorgt für sanfte Bewegung, falls JS/hover Effekte vorhanden sind.
   --------------------------- */

/* Basis: sanfte Transition */
.product-image,
.product-cover,
.product-gallery,
.product-main-image,
.product-media,
.product-hero,
.product-single__photo,
.product-single .product-image,
.product-single .product-media {
  transition: transform .22s ease, margin .22s ease !important;
}

/* Titel-Transition */
.product-title,
.product-name,
h1.product-title,
.product-single__title,
.product-single .product-title {
  transition: transform .22s ease, margin .22s ease !important;
}

/* Desktop / Tablet: -30px (hohe Spezifität, body[class*="product"] und body[id*="product"]) */
body[class*="product"] .product-image,
body[class*="product"] .product-cover,
body[class*="product"] .product-gallery,
body[class*="product"] .product-main-image,
body[class*="product"] .product-media,
body[class*="product"] .product-hero,
body[class*="product"] .product-single__photo,
body[class*="product"] .product-single .product-image,
body[id*="product"] .product-image,
body[id*="product"] .product-cover,
body[id*="product"] .product-gallery,
body[id*="product"] .product-main-image,
body[id*="product"] .product-media,
body[id*="product"] .product-hero,
body[id*="product"] .product-single__photo,
body[id*="product"] .product-single .product-image {
  transform: translateY(-30px) !important;
  margin-top: 0 !important;
}

/* Titel ebenfalls -30px */
body[class*="product"] .product-title,
body[class*="product"] .product-name,
body[class*="product"] h1.product-title,
body[class*="product"] .product-single__title,
body[id*="product"] .product-title,
body[id*="product"] .product-name,
body[id*="product"] h1.product-title,
body[id*="product"] .product-single__title {
  transform: translateY(-30px) !important;
  margin-top: 0 !important;
}

/* Mobile: -70px */
@media (max-width: 480px) {
  body[class*="product"] .product-image,
  body[class*="product"] .product-cover,
  body[class*="product"] .product-gallery,
  body[class*="product"] .product-main-image,
  body[class*="product"] .product-media,
  body[class*="product"] .product-hero,
  body[class*="product"] .product-single__photo,
  body[class*="product"] .product-single .product-image,
  body[id*="product"] .product-image,
  body[id*="product"] .product-cover,
  body[id*="product"] .product-gallery,
  body[id*="product"] .product-main-image,
  body[id*="product"] .product-media,
  body[id*="product"] .product-hero,
  body[id*="product"] .product-single__photo,
  body[id*="product"] .product-single .product-image {
    transform: translateY(-70px) !important;
  }

  body[class*="product"] .product-title,
  body[class*="product"] .product-name,
  body[class*="product"] h1.product-title,
  body[class*="product"] .product-single__title,
  body[id*="product"] .product-title,
  body[id*="product"] .product-name,
  body[id*="product"] h1.product-title,
  body[id*="product"] .product-single__title {
    transform: translateY(-70px) !important;
  }

  /* Falls das Produkt-Layout auf Mobile mit flex/column arbeitet, stellen wir sicher, dass kein Überlauf entsteht */
  body[class*="product"] .product-single,
  body[id*="product"] .product-single {
    overflow: visible !important;
  }
}

/* Fallback: falls Theme Inline-Styles oder JS die transform-Eigenschaft überschreibt,
   erhöhen wir die Spezifität für die wichtigsten Container */
.product-single__photo,
.product-single__media,
.product-single .product-image,
.product-single .product-media {
  transform: translateY(-30px) !important;
}
@media (max-width: 480px) {
  .product-single__photo,
  .product-single__media,
  .product-single .product-image,
  .product-single .product-media {
    transform: translateY(-70px) !important;
  }
}

/* ---------------------------
   Global background / card fixes
   --------------------------- */
body, #wrapper, #content, #content-wrapper, .page-content { background: var(--xbook-bg) !important; }
.card, .card-block, .container:not(.cta-container) { background: transparent !important; }

/* ---------------------------
   Text color fixes
   --------------------------- */
.feature-item h3, .feature-item p, .usp-item h3, .usp-item p, .timeline-step h2, .timeline-step p { color: var(--xbook-text); }

/* USP center */
.xbook-usp h2, .xbook-usp p { text-align: center; margin-left: auto; margin-right: auto; }

/* Scroll indicator */
.scroll-indicator {
  margin: 60px auto 0 auto;
  width: 14px;
  height: 14px;
  border-left: 2px solid var(--xbook-muted);
  border-bottom: 2px solid var(--xbook-muted);
  transform: rotate(-45deg);
  opacity: .85;
  animation: scrollBounce 1.5s infinite;
}
@keyframes scrollBounce { 0%,100% { transform: rotate(-45deg) translateY(0); } 50% { transform: rotate(-45deg) translateY(6px); } }

/* ---------------------------
   Small helpers / accessibility
   --------------------------- */
.hidden-visually { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ---------------------------
   Final responsive tweaks
   --------------------------- */
@media (max-width: 1024px) {
  .xbook-header-inner { padding: 10px 14px; }
  .xbook-logo .logo { max-height: 48px; max-width: 140px; }
}
@media (max-width: 480px) {
  .xbook-header-inner { padding: 8px 12px; }
  .xbook-logo .logo { max-height: var(--xbook-logo-max-mobile); max-width: 120px; }
  .xbook-title { font-size: clamp(1.6rem,8vw,2.4rem); }
  /* auf sehr kleinen Bildschirmen: Logo weniger verschieben, damit es nicht überlappt */
  .xbook-logo { transform: translate(calc(var(--xbook-logo-shift-x) * 0.6), calc(var(--xbook-logo-visual-y) * 0.6)); }
}

/* ---------------------------
   Product page extra offset (Fallback)
   --------------------------- */
/* generischer Fallback: wenn body enthält "product" als id/class */
body[class*="product"] main,
body[id*="product"] main {
  padding-top: calc(var(--xbook-header-height) - 200px); /* kleiner Fallback, JS sollte exakte Höhe setzen */
}

/* Alle Seiten außer Startseite: weißer Hintergrund, schwarze Texte */
body:not(.is-home) {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Falls einzelne Container weiterhin transparent/dunkel sind, diese neutralisieren */
body:not(.is-home) .card,
body:not(.is-home) .card-block,
body:not(.is-home) .container:not(.cta-container),
body:not(.is-home) #wrapper,
body:not(.is-home) #content,
body:not(.is-home) #content-wrapper,
body:not(.is-home) .page-content {
  background: transparent !important;
  color: inherit !important;
}

/* Falls Panels/Overlays auf Unterseiten sichtbar sind, sicherstellen, dass sie nicht das ganze Layout dunkel färben */
body:not(.is-home) .panel,
body:not(.is-home) .xbook-panels { display: none !important; }

/* Button-Zentrierung und Hintergrund-Fix */
form .form-group button[type="submit"],
button#submit-login,
input[type="submit"].btn-primary {
  background-color: #00bcd4 !important; /* dein Blau */
  border: none !important;
  width: auto !important; /* verhindert schwarze Balken links/rechts */
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Falls der Container selbst schwarz ist */
form .form-group,
form .form-footer {
  background: transparent !important;
}

.page-my-account,
.page-my-account #main,
.page-my-account .page-content,
.page-my-account .page-footer,
.page-addresses,
.page-addresses #main,
.page-addresses .page-content,
.page-addresses .page-footer,
.page-order-history,
.page-order-history #main,
.page-order-history .page-content,
.page-order-history .page-footer,
.page-order-detail,
.page-order-detail #main,
.page-order-detail .page-content,
.page-order-detail .page-footer,
.page-identity,
.page-identity #main,
.page-identity .page-content,
.page-identity .page-footer {
    background: #fff !important;
}

#blockcart-modal,
.cart-notification,
.ps-shoppingcart-modal {
    top: 100px !important;
}

/* Entfernt Trennlinien in der Subtotals‑Box */
.card-block.cart-summary-subtotals-container,
.card-block.cart-summary-subtotals-container .cart-summary-line {
  border: none !important;
  box-shadow: none !important;
}

/* Falls einzelne Subtotal‑IDs Linien haben, gezielt ausblenden */
#cart-subtotal-products,
#cart-subtotal-subtotal,
#cart-subtotal-some-other {
  display: none !important; /* oder border: none !important; */
}

/* Adressaktionen Balken weiß machen */
.address-footer,
.address-card .card-footer,
.address .address-footer,
.address-actions,
.address-actions .btn,
.address .actions {
  background: #ffffff !important;
  color: #222 !important;
  border-top: 1px solid #e6e6e6 !important;
}

/* Buttons im Footer anpassen (Kontrast) */
.address-actions .btn,
.address-card .card-footer .btn,
.address .actions .btn {
  background: transparent !important;
  color: #222 !important;
  border: 1px solid transparent !important;
}

/* Hover für Buttons */
.address-actions .btn:hover,
.address-card .card-footer .btn:hover,
.address .actions .btn:hover {
  background: #f5f5f5 !important;
  color: #111 !important;
}

/* Falls Icons oder Texte invertiert sind */
.address-footer,
.address-actions,
.address-card .card-footer {
  filter: none !important;
}
/* Globale Regel korrigieren */
#blockcart-modal .product-image {
    display: block;
    max-width: 9.375rem;
    margin: 0 auto; /* statt 0 0 0 auto */
}

/* Mobile Ansicht: Bild weiter nach unten */
@media (max-width: 991px) {
    #blockcart-modal .product-image {
        max-width: 70%;
        margin: 2rem auto 1rem; /* 2rem nach oben = Bild weiter unten */
        padding-top: 33rem;      /* zusätzlicher Abstand */
        position: relative;
        top: 0;                 /* verhindert Hochrutschen */
    }
}
@media (max-width: 991px) {
    main,
    #wrapper,
    .page-content,
    #content-wrapper {
        padding-top: 0 !important;
    }
}
/* ===========================
   Fix: Schwarzer Balken unten auf Konto-/GDPR-/Bestellseiten
   =========================== */

/* Weißer Footer auf allen Seiten außer Startseite */
body:not(.is-home) .page-footer,
body:not(.is-home) .account-link {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Falls das Theme die Links invertiert */
body:not(.is-home) .page-footer a,
body:not(.is-home) .page-footer i,
body:not(.is-home) .page-footer span {
  color: #000000 !important;
  filter: none !important;
}

/* Optional: dezente Trennlinie oben */
body:not(.is-home) .page-footer {
  border-top: 1px solid #e6e6e6 !important;
}

/* ============================================
   HERO → USP Abstand optimieren (Apple-Style)
   ============================================ */

/* Hero: weniger Abstand unten */
#xbook-hero {
  padding-bottom: 40px !important; /* vorher ~80px */
}

/* USP: weniger Abstand oben */
.xbook-usp {
  margin-top: 40px !important; /* vorher ~120px */
}

/* Extra: Wenn reveal aktiv ist, etwas weicher */
.xbook-usp.reveal {
  margin-top: 32px !important;
}

/* Mobile: noch enger */
@media (max-width: 768px) {
  #xbook-hero {
    padding-bottom: 28px !important;
  }
  .xbook-usp {
    margin-top: 28px !important;
  }
}
/* ============================================
   TIMELINE → CTA Abstand optimieren (Apple-Style)
   ============================================ */

/* Timeline: weniger Abstand unten */
.xbook-timeline {
  margin-bottom: 40px !important; /* vorher ~120px */
}

/* CTA: weniger Abstand oben */
.xbook-cta {
  margin-top: 40px !important; /* vorher ~120px */
}

/* Mobile: noch enger */
@media (max-width: 768px) {
  .xbook-timeline {
    margin-bottom: 28px !important;
  }
  .xbook-cta {
    margin-top: 28px !important;
  }
}

/* ============================================
   CTA – kompakter & perfekt zentriert
   ============================================ */

/* CTA Section selbst */
.xbook-cta {
  max-width: 1200px !important;   /* kompakter als vorher */
  width: 100%;
  margin: 40px auto !important;   /* zentriert + weniger Abstand */
  padding: 0 20px;                /* etwas Luft links/rechts */
}

/* CTA Container (blauer Bereich) */
.xbook-cta .cta-container {
  width: 100%;
  max-width: 900px !important;    /* kompakter, Apple-Style */
  margin: 0 auto;                 /* perfekt zentriert */
  padding: 40px 30px !important;  /* harmonische Innenabstände */
  border-radius: 16px;            /* schöner Look */
}

/* Mobile: noch kompakter */
@media (max-width: 768px) {
  .xbook-cta {
    margin: 28px auto !important;
  }
  .xbook-cta .cta-container {
    max-width: 100% !important;
    padding: 32px 20px !important;
  }
}

/* ============================================
   Header-Elemente nur auf der Startseite ausblenden
   ============================================ */

/* Desktop: Kontakt, Login, Warenkorb */
body.is-home div.header-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Desktop: Navigation */
body.is-home div.header-nav-full-width {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Mobile: Login & Warenkorb */
body.is-home #_mobile_ps_customersignin,
body.is-home #_mobile_ps_shoppingcart {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Doppel-Scrollbar verhindern – Header-Bereich neutralisieren */
body.is-home .header-bottom {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
body.is-home {
  --scroll-padding-top: 0 !important;
  scroll-padding-top: 0 !important;
}

/* Header nur auf der Startseite schwarz */
body.is-home .header-top,
body.is-home .header-bottom,
body.is-home .header-nav-full-width {
  background-color: #000 !important;
}

/* Header-Wrapper nur auf der Startseite schwarz */
body.is-home .header {
  background-color: #000 !important;
  border: none !important;
  box-shadow: none !important;
}
/* Header-Linie nur auf der Startseite entfernen */
body.is-home .header-bottom {
  border-bottom: none !important;
}

body.is-home .header-bottom {
  padding-top: 10px !important;
}
/* Footer + Newsletter nur auf der Startseite schwarz */
body.is-home .bg-body,
body.is-home .bg-body-secondary,
body.is-home .bg-body-tertiary,
body.is-home footer,
body.is-home .footer,
body.is-home .footer-container,
body.is-home .footer-top,
body.is-home .footer-bottom {
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------------------------
   Startseite: Farben korrigieren
   --------------------------- */

/* 1) Bootstrap-Farbvariable für bg-body-tertiary auf der Startseite überschreiben */
body.is-home {
  --bs-tertiary-bg-rgb: 0, 0, 0 !important;   /* macht Newsletter schwarz */
  --bs-bg-opacity: 1 !important;
}

/* 2) Footer komplett schwarz */
body.is-home footer,
body.is-home .footer,
body.is-home .footer-container,
body.is-home .footer-top,
body.is-home .footer-bottom {
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3) Newsletter-Text weiß machen */
body.is-home .block_newsletter,
body.is-home .block_newsletter * {
  color: #fff !important;
}

/* 4) Falls der Newsletter einen Container hat, ebenfalls schwarz */
body.is-home .footer-top .container,
body.is-home .footer-top .row {
  background-color: #000 !important;
  color: #fff !important;
}

/* -----------------------------------------
   Startseite: Sekundärtext weiß machen
   ----------------------------------------- */

/* 1) Bootstrap-Variable für Sekundärtext überschreiben */
body.is-home {
  --bs-secondary-color: #fff !important;
  --bs-text-opacity: 1 !important;
}

/* 2) Falls die Klasse selbst zusätzlich Farbe setzt */
body.is-home .text-body-secondary {
  color: #fff !important;
}

/* -----------------------------------------
   Footer-Layout und Stil
   ----------------------------------------- */

/* Abstand zwischen den SPALTEN */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px; /* Abstand zwischen den Spalten */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
}

/* Jede Spalte gleich breit */
.footer-block {
  flex: 1 1 18%;
  min-width: 140px;
}

/* TITEL – Weiß, minimal größer, KEIN Abstand */
.footer-block__title,
.footer-block__title a {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600;
  margin: 0 !important; /* kein Abstand */
  padding: 0 !important;
  line-height: 1.15;
}

/* LINKS – minimal größer + #8ea7d6 + sehr enger Abstand */
.footer-block ul li a {
  font-size: 12.5px !important;
  color: #8ea7d6 !important;
  text-decoration: none;
  line-height: 1.25; /* enger */
  display: block;
  margin: 0 !important; /* kein Abstand */
  padding: 0 !important;
}

/* Hover-Effekt */
.footer-block ul li a:hover {
  color: #b3c4e6 !important;
}

/* Listen-Layout */
.footer-block ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

/* Abstand zwischen den LINKS selbst */
.footer-block ul li {
  margin: 8px 0 !important; /* minimaler Abstand */
  padding: 0 !important;
}

/* Responsive Verhalten */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 14px;
  }

  .footer-block {
    flex: 1 1 100%;
  }

  .footer-block ul li a {
    font-size: 14px !important;
  }
}

/* Footer Fix – überschreibt das 11rem Gutter aus dem Standard-Theme */
footer .row,
.footer-top .row,
.footer-container .row {
    --bs-gutter-x: 0.5rem !important; /* 8px Abstand */
}

/* ============================================
   FOOTER FIX – kompletter Bereich enger
   ============================================ */

/* 1) Haupt-Footer enger */
.footer__main {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-block: 0.5rem !important;
}

/* 2) Innerer Container enger */
.footer__main .container {
    max-width: 900px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* 3) Bootstrap-Gutter reduzieren */
.footer__main .row {
    --bs-gutter-x: 0.5rem !important;   /* vorher 11rem */
    --bs-gutter-y: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 4) Spalten enger */
.footer__main .col-md-3,
.footer__main .col-sm-6,
.footer__main .col-lg-3 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* ===========================
   ENDE Datei
   =========================== */