/* Ruhl Akademie – Designschicht "Tinte & Bein"
   Enthaelt nur das, was Elementor selbst nicht steuern kann:
   1. Theme-Ueberschreibungen fuer Buttons (OceanWP gewinnt sonst)
   2. Die Farb- und Formvariablen des FluentCart-Frontends
   Alle Schriftgroessen und Typografie der Seiteninhalte werden in Elementor gesetzt. */

:root{
  --ra-ink:#0E0D0C;
  --ra-ink-text:#1A1815;
  --ra-bone:#F4F0E9;
  --ra-white:#FFFFFF;
  --ra-brass:#BC9359;
  --ra-brass-dark:#A17B45;
  --ra-muted:#6E6A62;
  --ra-line:#E2DCD1;
  --ra-line-dark:#2B2825;
  --ra-radius:2px;

  /* FluentCart Frontend */
  --fct-primary-text-color:#1A1815;
  --fct-secondary-text-color:#6E6A62;
  --fct-border-color:#E2DCD1;
  --fct-divider-color:#E2DCD1;
  --fct-active-border-color:#BC9359;
  --fct-primary-bg-color:#1A1815;
  --fct-secondary-bg-color:#F4F0E9;
  --fct-btn-bg-color:#BC9359;
  --fct-btn-text-color:#0E0D0C;
  --fct-btn-border-color:#BC9359;
  --fct-input-bg-color:#FFFFFF;
  --fct-input-disabled-bg-color:#F4F0E9;
  --fct-input-text-color:#1A1815;
  --fct-input-placeholder-text-color:#8E877C;
  --fct-card-bg:#FFFFFF;
  --fct-heading-color:#1A1815;
}

/* ---------------------------------------------------------------
   1. Buttons
   OceanWP setzt eigene Button-Regeln mit hoeherer Spezifitaet als
   Elementor. Diese Schicht stellt die Designwelt wieder her.
   --------------------------------------------------------------- */
.elementor-widget-button .elementor-button,
.elementor-button-wrapper .elementor-button{
  border-radius:var(--ra-radius);
  box-shadow:none;
  text-shadow:none;
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* Farben kommen aus den Elementor-Einstellungen des jeweiligen Buttons.
   Hier steht nur die gemeinsame Form. */

/* Geisterbutton auf Tinte */
.ra-ghost .elementor-button{
  background-color:transparent !important;
  border:1px solid #4A453E;
  color:var(--ra-bone) !important;
}
.ra-ghost .elementor-button:hover,
.ra-ghost .elementor-button:focus{
  background-color:var(--ra-bone) !important;
  color:var(--ra-ink) !important;
  border-color:var(--ra-bone);
}

/* Geisterbutton auf Knochen */
.ra-ghost-dark .elementor-button{
  background-color:transparent !important;
  border:1px solid var(--ra-line);
  color:var(--ra-ink-text) !important;
}
.ra-ghost-dark .elementor-button:hover,
.ra-ghost-dark .elementor-button:focus{
  background-color:var(--ra-ink-text) !important;
  color:var(--ra-bone) !important;
  border-color:var(--ra-ink-text);
}

/* Sichtbarer Fokus fuer Tastaturbedienung */
.elementor-button:focus-visible,
.fct_btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ra-brass);
  outline-offset:2px;
}

/* ---------------------------------------------------------------
   2. FluentCart: Form und Kante
   --------------------------------------------------------------- */
.fluent-cart,
.fct-wrapper,
.fct_checkout_wrapper,
.fct-cart-page,
.fct_thank_you_wrapper,
.fluent-cart-customer-profile{
  font-family:"Manrope",system-ui,sans-serif;
  color:var(--ra-ink-text);
}

.fluent-cart h1,.fluent-cart h2,.fluent-cart h3,.fluent-cart h4,
.fct-wrapper h1,.fct-wrapper h2,.fct-wrapper h3,.fct-wrapper h4,
.fct_checkout_wrapper h1,.fct_checkout_wrapper h2,.fct_checkout_wrapper h3,.fct_checkout_wrapper h4{
  font-family:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  letter-spacing:-.02em;
}

/* Harte Kanten statt Pillen, keine Schatten */
.fluent-cart .fct_btn,
.fct_btn,
.fct-btn,
.fluent-cart button,
.fct_checkout_wrapper button,
.fluent-cart input,
.fluent-cart select,
.fluent-cart textarea,
.fct_checkout_wrapper input,
.fct_checkout_wrapper select,
.fct_checkout_wrapper textarea,
.fluent-cart .fct-card,
.fct_product_card{
  border-radius:var(--ra-radius) !important;
  box-shadow:none !important;
}

/* Produktkarten: Haarlinie statt Schatten */
.fct_product_card,
.fct-product-card{
  border:1px solid var(--ra-line);
  background:var(--ra-white);
}

/* Menge auf 1 begrenzt: Auswahl ausblenden, damit die Regel sichtbar stimmt */
body.ra-single-item .fct-cart-item-quantity,
body.ra-single-item .fct-cart-drawer-quantity,
body.ra-single-item .fct_quantity_wrapper{
  display:none !important;
}

/* Warenkorbseite: Haarlinien und Rhythmus */
.fct-cart-page .fct-cart-drawer-list-content{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ra-line);
}
.fct-cart-page .fct-cart-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--ra-line);
}
.fct-cart-page .fct-cart-item-title{
  font-family:"Bricolage Grotesque","Manrope",sans-serif;
  font-size:clamp(18px, 1.5vw, 22px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
}
.fct-cart-page .fct-cart-item-image{
  display:none;
}
.fct-cart-page .fct-cart-total-wrapper{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding:24px 0 0;
  font-family:"Bricolage Grotesque","Manrope",sans-serif;
  font-size:clamp(20px, 1.8vw, 26px);
  letter-spacing:-.02em;
}

/* "Zur Kasse" ist die Hauptaktion, also ein echter Knopf */
.fluent-cart-cart-cart-button-wrap{
  margin-top:28px;
  display:flex;
  justify-content:flex-start;
}
.fluent-cart-cart-cart-button-wrap a,
.fluent-cart-cart-cart-button-wrap button{
  display:inline-block;
  background:var(--ra-brass);
  color:var(--ra-ink) !important;
  text-decoration:none !important;
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.02em;
  padding:18px 34px;
  border:0;
  border-radius:var(--ra-radius);
  transition:background-color .18s ease;
}
.fluent-cart-cart-cart-button-wrap a:hover,
.fluent-cart-cart-cart-button-wrap button:hover{
  background:var(--ra-brass-dark);
}

/* ---------------------------------------------------------------
   Produktseite
   --------------------------------------------------------------- */
/* OceanWP zeigt auf Produktseiten zusaetzlich das Beitragsbild und den
   Seitentitel an. FluentCart bringt beides selbst mit, also hier ausblenden. */
body.single-fluent-products .thumbnail,
body.single-fluent-products .entry-media,
body.single-fluent-products .page-header{
  display:none !important;
}
body.single-fluent-products .entry-content{
  margin-top:0;
}

.fct-single-product-page{
  max-width:1240px;
  margin:0 auto;
  padding:72px 24px 96px;
}
.fct-single-product-page-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:56px;
}
.fct-single-product-page-row > .fct-product-gallery-wrapper{
  flex:0 1 46%;
  min-width:280px;
}
.fct-single-product-page-row > .fct-product-summary{
  flex:1 1 44%;
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.fct-product-gallery-wrapper img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:var(--ra-radius);
}
@media (max-width:767px){
  .fct-single-product-page{padding:48px 20px 64px;}
  .fct-single-product-page-row{gap:28px;}
  .fct-product-gallery-wrapper img{height:260px;}
}
.fct-single-product-page .fct-product-title,
.fct-single-product-page .fct-product-title h1{
  font-family:"Bricolage Grotesque","Manrope",sans-serif;
  font-size:clamp(30px, 3.2vw, 44px);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--ra-ink-text);
}
.fct-single-product-page .fct-product-excerpt{
  max-width:52ch;
  color:#4A453E;
}
.fct-single-product-page .fct-product-prices,
.fct-single-product-page .fct-item-price{
  font-family:"Bricolage Grotesque","Manrope",sans-serif;
  font-size:clamp(30px, 3vw, 44px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ra-ink-text);
}

/* Nur ein Paket, also keine Mengenwahl */
body.ra-single-item .fct-product-quantity-container{
  display:none !important;
}

/* Die beiden Aktionsknoepfe: einer fuehrt, einer begleitet */
.fct-product-buttons-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.fluent-cart-direct-checkout-button,
.fluent-cart-add-to-cart-button{
  font-family:"Manrope",system-ui,sans-serif !important;
  font-weight:600 !important;
  font-size:16px !important;
  letter-spacing:.02em;
  text-transform:none !important;
  padding:18px 32px !important;
  border-radius:var(--ra-radius) !important;
  box-shadow:none !important;
  white-space:nowrap;
  text-decoration:none !important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.fluent-cart-direct-checkout-button{
  background:var(--ra-brass) !important;
  color:var(--ra-ink) !important;
  border:1px solid var(--ra-brass) !important;
}
.fluent-cart-direct-checkout-button:hover{
  background:var(--ra-brass-dark) !important;
  border-color:var(--ra-brass-dark) !important;
}
.fluent-cart-add-to-cart-button{
  background:transparent !important;
  color:var(--ra-ink-text) !important;
  border:1px solid var(--ra-line) !important;
}
.fluent-cart-add-to-cart-button:hover{
  background:var(--ra-ink-text) !important;
  color:var(--ra-bone) !important;
  border-color:var(--ra-ink-text) !important;
}

/* ---------------------------------------------------------------
   Bestellbestaetigung
   FluentCart setzt hier einen grossen gelben Kasten mit sehr grosser
   Schrift. Das passt nicht zur Designwelt, also ruhiger stellen.
   --------------------------------------------------------------- */
.fct-thank-you-page{
  max-width:820px;
  margin:0;
}
.fct-thank-you-page-header{
  background:#FBF6EE !important;
  border:1px solid var(--ra-line);
  border-left:3px solid var(--ra-brass);
  border-radius:var(--ra-radius);
  padding:28px 32px !important;
  text-align:left !important;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.fct-thank-you-page-header-icon{
  flex:0 0 auto;
  width:28px !important;
  height:28px !important;
  background:none !important;
  border-radius:0 !important;
  margin:0 !important;
  color:var(--ra-brass);
}
.fct-thank-you-page-header-icon svg{
  width:28px;
  height:28px;
}
.fct-thank-you-page-header-title{
  font-family:"Bricolage Grotesque","Manrope",sans-serif !important;
  font-size:clamp(20px, 1.8vw, 26px) !important;
  line-height:1.2 !important;
  letter-spacing:-.02em;
  color:var(--ra-ink-text) !important;
  margin:0 !important;
  text-align:left !important;
}
.fct-thank-you-page-content{
  border:1px solid var(--ra-line);
  border-radius:var(--ra-radius);
  padding:28px 32px;
  margin-top:20px;
  background:var(--ra-white);
}
.fct-thank-you-page-content table{
  width:100%;
  border-collapse:collapse;
}
.fct-thank-you-page-content td{
  padding:12px 0;
  border-bottom:1px solid var(--ra-line);
  vertical-align:top;
}

/* Leerer Warenkorb bleibt lesbar */
.fct-cart-page .fct-cart-empty,
.fct-cart-page .fct-empty-cart{
  padding:40px 0;
  color:var(--ra-muted);
}

/* Hinweis, wenn das vorherige Paket ersetzt wurde */
.ra-cart-notice{
  margin:0 0 20px;
  padding:14px 18px;
  border:1px solid var(--ra-brass);
  border-left-width:3px;
  background:#FBF6EE;
  color:var(--ra-ink-text);
  font-size:15px;
  line-height:1.5;
}

/* ---------------------------------------------------------------
   3. Akkordeon: nur Haarlinien, kein Kasten
   --------------------------------------------------------------- */
.elementor-accordion .elementor-accordion-item{
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
}
.elementor-accordion .elementor-accordion-item:first-child{
  border-top:1px solid var(--ra-line) !important;
}
.elementor-accordion .elementor-tab-title{
  transition:color .18s ease;
}

/* ---------------------------------------------------------------
   Rechtstexte und Kontaktseiten: Lesetypografie statt Verkaufsauftritt
   Impressum, Datenschutz, AGB, Widerruf, Kontakt, Danke
   --------------------------------------------------------------- */
body.page-id-92, body.page-id-94, body.page-id-972,
body.page-id-978, body.page-id-311, body.page-id-949, body.page-id-386{
  background:var(--ra-bone);
}
body.page-id-92 .elementor-widget-container,
body.page-id-94 .elementor-widget-container,
body.page-id-972 .elementor-widget-container,
body.page-id-978 .elementor-widget-container,
body.page-id-311 .elementor-widget-container,
body.page-id-949 .elementor-widget-container,
body.page-id-386 .elementor-widget-container{
  text-align:left;
}
body.page-id-92 h1, body.page-id-94 h1, body.page-id-972 h1, body.page-id-978 h1,
body.page-id-92 .elementor-heading-title, body.page-id-94 .elementor-heading-title,
body.page-id-972 .elementor-heading-title, body.page-id-978 .elementor-heading-title{
  text-align:left;
}
body.page-id-92 h1, body.page-id-94 h1, body.page-id-972 h1, body.page-id-978 h1{
  font-size:clamp(30px, 3.4vw, 46px);
}
body.page-id-92 h2, body.page-id-94 h2, body.page-id-972 h2, body.page-id-978 h2{
  font-size:clamp(20px, 1.8vw, 26px);
  margin-top:1.6em;
}
body.page-id-92 .elementor-widget-text-editor,
body.page-id-94 .elementor-widget-text-editor,
body.page-id-972 .elementor-widget-text-editor,
body.page-id-978 .elementor-widget-text-editor{
  max-width:68ch;
}

/* ---------------------------------------------------------------
   4. Kleinigkeiten
   --------------------------------------------------------------- */
img{max-width:100%;height:auto;}

/* Kein horizontales Scrollen auf schmalen Geraeten */
html,body{overflow-x:hidden;}

/* ---------------------------------------------------------------
   5. Warenkorb-Icon im Hauptmenue
   --------------------------------------------------------------- */
.menu-item-warenkorb > a{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
}

/* Schwebender Warenkorb-Button von FluentCart: Icon-Bild bekam ueber
   Flexbox+Lazyload eine Breite von 0, hier fest verankert. */
.fct-cart-drawer-open-btn{
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.fct-cart-drawer-open-btn img{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  flex:0 0 26px !important;
  object-fit:contain !important;
}
