/* kfm.mode Cozy Shop, reines CSS ohne SCSS-Build */
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/Manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --kfm-ivory: #F6F1EA; --kfm-sand: #EDE4D8; --kfm-line: #E3D7C8; --kfm-border: #BFAE9B;
  --kfm-esp: #2B2320; --kfm-text2: #5E524A; --kfm-accent: #8A5A36; --kfm-gold: #D9B994;
  --kfm-serif: 'Fraunces', Georgia, serif; --kfm-sans: 'Manrope', system-ui, sans-serif;
}

/* Grundlayout der ganzen Website */
#wrapwrap { background: var(--kfm-ivory); color: var(--kfm-esp); font-family: var(--kfm-sans); }
#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap .h1, #wrapwrap .h2, #wrapwrap .h3 { font-family: var(--kfm-serif); font-weight: 400; letter-spacing: -0.5px; color: var(--kfm-esp); }
#wrapwrap a { color: var(--kfm-esp); }
#wrapwrap a:hover { color: var(--kfm-accent); }
/* Odoo nutzt Bootstrap-Variablen ohne Präfix (--btn-bg statt --bs-btn-bg), dazu direkte Werte als Absicherung */
#wrapwrap .btn-primary, #wrapwrap .btn-fill-primary {
  --btn-bg: var(--kfm-esp); --btn-border-color: var(--kfm-esp); --btn-color: var(--kfm-ivory);
  --btn-hover-bg: #43372F; --btn-hover-border-color: #43372F; --btn-hover-color: var(--kfm-ivory);
  --btn-active-bg: #43372F; --btn-active-border-color: #43372F; --btn-active-color: var(--kfm-ivory);
  --btn-disabled-bg: var(--kfm-esp); --btn-disabled-border-color: var(--kfm-esp);
  background-color: var(--kfm-esp) !important; border-color: var(--kfm-esp) !important; color: var(--kfm-ivory) !important;
  border-radius: 2px; font-weight: 600;
}
#wrapwrap .btn-primary:hover, #wrapwrap .btn-primary:focus { background-color: #43372F !important; border-color: #43372F !important; }
#wrapwrap .btn-secondary, #wrapwrap .btn-outline-primary, #wrapwrap .btn-outline-secondary {
  --btn-bg: transparent; --btn-color: var(--kfm-esp); --btn-border-color: var(--kfm-esp);
  --btn-hover-bg: var(--kfm-esp); --btn-hover-color: var(--kfm-ivory); --btn-hover-border-color: var(--kfm-esp);
  background-color: transparent !important; border-color: var(--kfm-esp) !important; color: var(--kfm-esp) !important; border-radius: 2px;
}
#wrapwrap .btn-secondary:hover, #wrapwrap .btn-outline-primary:hover, #wrapwrap .btn-outline-secondary:hover { background-color: var(--kfm-esp) !important; color: var(--kfm-ivory) !important; }
#wrapwrap .btn-link, #wrapwrap .text-primary, #wrapwrap .link-primary { color: var(--kfm-accent) !important; }
#wrapwrap .bg-primary, #wrapwrap .badge.text-bg-primary, #wrapwrap .badge.bg-primary, #wrapwrap .o_ribbon { background-color: var(--kfm-accent) !important; color: #fff !important; }
#wrapwrap .form-check-input:checked { background-color: var(--kfm-esp) !important; border-color: var(--kfm-esp) !important; }
#wrapwrap .form-control:focus, #wrapwrap .form-select:focus { border-color: var(--kfm-accent) !important; box-shadow: 0 0 0 .2rem rgba(138, 90, 54, .2) !important; }
#wrapwrap .nav-pills .nav-link.active, #wrapwrap .page-item.active .page-link, #wrapwrap .list-group-item.active { background-color: var(--kfm-esp) !important; border-color: var(--kfm-esp) !important; color: var(--kfm-ivory) !important; }
#wrapwrap .page-link { color: var(--kfm-esp) !important; }
#wrapwrap .o_cc, #wrapwrap .o_cc1, #wrapwrap .o_cc2 { --o-cc-bg: transparent; }

/* Header und Footer: Odoos Originale nur auf dieser Website ausblenden */
#wrapwrap > header#top, #wrapwrap header#top, #wrapwrap footer#bottom { display: none !important; }
.kfm-announce { display: flex; justify-content: center; gap: 40px; padding: 10px 16px; background: var(--kfm-esp); color: var(--kfm-ivory); font-size: 13px; font-weight: 500; letter-spacing: .3px; text-align: center; }
.kfm-header { background: var(--kfm-ivory); border-bottom: 1px solid var(--kfm-line); position: sticky; top: 0; z-index: 1030; }
.kfm-header-inner { max-width: 1440px; margin: 0 auto; height: 84px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kfm-logo img { height: 40px; width: auto; display: block; }
.kfm-nav { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.kfm-nav a, .kfm-mobile-nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--kfm-esp) !important; }
.kfm-nav a:hover { color: var(--kfm-accent) !important; }
.kfm-nav a.kfm-nav-accent { color: var(--kfm-accent) !important; font-weight: 700; }
.kfm-icons { display: flex; gap: 2px; }
.kfm-icon { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--kfm-esp) !important; }
.kfm-cart-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kfm-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.kfm-burger { display: none; }
.kfm-burger summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kfm-burger summary::-webkit-details-marker { display: none; }
.kfm-mobile-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--kfm-ivory); border-bottom: 1px solid var(--kfm-line); display: flex; flex-direction: column; padding: 8px 20px 20px; }
.kfm-mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--kfm-line); }
.kfm-footer { background: var(--kfm-esp); color: #D8CCBF; padding: 72px 64px 32px; }
.kfm-footer-grid { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.kfm-footer-grid > div { display: flex; flex-direction: column; gap: 12px; }
.kfm-footer h6 { color: var(--kfm-ivory) !important; font-family: var(--kfm-sans) !important; font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.kfm-footer a { color: #D8CCBF !important; text-decoration: none; font-size: 14px; }
.kfm-footer a:hover { color: var(--kfm-ivory) !important; }
.kfm-footer-brand p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 320px; }
.kfm-footer-logo { height: 40px; width: auto; filter: brightness(0) invert(.93) sepia(.2); align-self: flex-start; }
.kfm-footer-bottom { max-width: 1312px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid #4A3F38; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; flex-wrap: wrap; }

/* Inhaltsseiten */
.kfm-page { padding-top: 64px; padding-bottom: 96px; max-width: 880px; }
.kfm-page h1 { margin-bottom: 20px; }
.kfm-page h2 { font-size: 24px; margin: 36px 0 10px; }
.kfm-page p { font-size: 16px; line-height: 1.7; color: #3D322B; }
.kfm-page a { text-decoration: underline; }
.kfm-note { background: var(--kfm-sand); padding: 14px 16px; border-radius: 2px; font-size: 14px !important; color: var(--kfm-text2) !important; }
.kfm-table-wrap { overflow-x: auto; }
.kfm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kfm-table th, .kfm-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #D9CBBB; }
.kfm-table th { background: var(--kfm-sand); font-weight: 700; }
.kfm-faq { margin-top: 24px; }

/* Bausteine */
.kfm-container { max-width: 1440px; margin: 0 auto; padding-left: 64px; padding-right: 64px; box-sizing: border-box; }
.kfm-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--kfm-accent); }
.kfm-eyebrow-light { color: var(--kfm-gold); }
.kfm-display { font-family: var(--kfm-serif) !important; font-size: clamp(40px, 5vw, 68px); line-height: 1.03; letter-spacing: -1.5px !important; margin: 0; }
.kfm-display-md { font-size: clamp(32px, 3.6vw, 52px); color: var(--kfm-ivory) !important; }
.kfm-lead { font-size: 17px; line-height: 1.6; color: var(--kfm-text2); margin: 0; }
.kfm-h2 { font-size: clamp(30px, 3vw, 44px); margin: 0; }
.kfm-h2-sm { font-size: clamp(26px, 2.4vw, 36px); }
.kfm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.kfm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; background: var(--kfm-esp); color: var(--kfm-ivory) !important; border: 1.5px solid var(--kfm-esp); border-radius: 2px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.kfm-btn:hover { background: #43372F; color: var(--kfm-ivory) !important; }
.kfm-btn-outline { background: transparent; color: var(--kfm-esp) !important; }
.kfm-btn-outline:hover { background: var(--kfm-esp); color: var(--kfm-ivory) !important; }
.kfm-btn-light { background: var(--kfm-ivory); color: var(--kfm-esp) !important; border-color: var(--kfm-ivory); }
.kfm-btn-light:hover { background: #fff; color: var(--kfm-esp) !important; }
.kfm-link { font-size: 15px; font-weight: 600; border-bottom: 1.5px solid var(--kfm-esp); padding-bottom: 2px; text-decoration: none; }

/* Hero */
.kfm-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 680px; max-width: 1440px; margin: 0 auto; }
.kfm-hero-text { padding: 64px 64px 64px 96px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.kfm-hero-media { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; padding: 24px 24px 24px 0; }
.kfm-hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.kfm-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }

/* Vorteile */
.kfm-usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--kfm-line); border-bottom: 1px solid var(--kfm-line); padding-top: 30px; padding-bottom: 30px; background-clip: content-box; }
.kfm-usp > div { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.kfm-usp strong { font-size: 15px; }
.kfm-usp span { font-size: 14px; color: var(--kfm-text2); }

/* Abschnitte und Karten */
.kfm-section { padding-top: 96px; padding-bottom: 80px; }
.kfm-soft { background: var(--kfm-sand); }
.kfm-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.kfm-section-head .kfm-lead { margin-top: 12px; }
.kfm-grid { display: grid; gap: 28px 20px; }
.kfm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kfm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kfm-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.kfm-card-img { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #D9C8B4; }
.kfm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.kfm-category-image-wrap { display: block; width: 100%; height: 100%; }
.kfm-category-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.kfm-card:hover .kfm-card-img img { transform: scale(1.03); }
.kfm-tone-0 { background: #CDB49A; } .kfm-tone-1 { background: #B89878; } .kfm-tone-2 { background: #E4D8CA; } .kfm-tone-3 { background: #D9C8B4; }
.kfm-card-title { font-family: var(--kfm-serif); font-size: 24px; }
.kfm-card-name { font-size: 16px; font-weight: 600; }
.kfm-card-price { font-size: 15px; }

/* Mama und Mini Band */
.kfm-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--kfm-esp); color: var(--kfm-ivory); min-height: 600px; }
.kfm-band-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kfm-band-text { padding: 64px 96px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.kfm-band-text p { font-size: 17px; line-height: 1.6; color: #D8CCBF; margin: 0; max-width: 460px; }

/* Farbwelt und Instagram */
.kfm-palette { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.kfm-palette-text { display: flex; flex-direction: column; gap: 16px; }
.kfm-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.kfm-swatches div { display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 600; }
.kfm-swatches span { display: block; height: 180px; border-radius: 4px; border: 1px solid #D9CBBB; }
.kfm-insta { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 72px; }

/* Newsletter */
.kfm-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; background: var(--kfm-sand); border-radius: 4px; padding: 56px 72px; margin-bottom: 96px; }
.kfm-newsletter > div { display: flex; flex-direction: column; gap: 12px; }
.kfm-nl-form { display: flex; flex-direction: column; gap: 8px; }
.kfm-nl-form label { font-size: 14px; font-weight: 600; }
.kfm-nl-row { display: flex; gap: 8px; }
.kfm-nl-row input { flex: 1; min-height: 54px; padding: 0 16px; border: 1.5px solid var(--kfm-border); background: #fff; border-radius: 2px; font: inherit; font-size: 15px; }
.kfm-nl-form small { color: var(--kfm-text2); }
.kfm-result { padding-top: 96px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.kfm-code { font-size: 18px; background: var(--kfm-sand); padding: 14px 18px; border-radius: 2px; }

/* Produktseite */
.kfm-pdp { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.kfm-fit { font-size: 14px; line-height: 1.5; color: var(--kfm-text2); background: var(--kfm-sand); padding: 12px 14px; border-radius: 2px; margin: 0; }
.kfm-mini { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1.5px solid #D9CBBB; border-radius: 4px; text-decoration: none; }
.kfm-mini img { width: 80px; height: 96px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.kfm-mini span { display: flex; flex-direction: column; gap: 4px; }
.kfm-mini small { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--kfm-accent); }
.kfm-mini em { font-style: normal; font-size: 14px; color: var(--kfm-text2); }
.kfm-acc { border-top: 1px solid #D9CBBB; }
.kfm-acc details { border-bottom: 1px solid #D9CBBB; padding: 16px 0; }
.kfm-acc summary { font-size: 15px; font-weight: 600; cursor: pointer; }
.kfm-acc p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--kfm-text2); }

/* Tablet */
@media (max-width: 1100px) {
  .kfm-header-inner { padding: 0 20px; height: 68px; }
  .kfm-nav { display: none; }
  .kfm-burger { display: block; }
  .kfm-logo { margin-right: auto; }
  .kfm-footer { padding: 56px 32px 28px; }
  .kfm-footer-grid { grid-template-columns: 1fr 1fr; }
  .kfm-container { padding-left: 32px; padding-right: 32px; }
  .kfm-hero { grid-template-columns: 1fr; }
  .kfm-hero-text { padding: 48px 32px; }
  .kfm-hero-media { padding: 0 32px 32px; min-height: 520px; }
  .kfm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kfm-band { grid-template-columns: 1fr; }
  .kfm-band-img { max-height: 520px; }
  .kfm-band-text { padding: 48px 32px; }
  .kfm-palette, .kfm-newsletter { grid-template-columns: 1fr; gap: 32px; }
}
/* Handy */
@media (max-width: 640px) {
  .kfm-logo img { height: 32px; }
  .kfm-footer { padding: 40px 20px 24px; }
  .kfm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .kfm-announce { gap: 16px; font-size: 12px; }
  .kfm-container { padding-left: 20px; padding-right: 20px; }
  .kfm-hero-text { padding: 32px 20px; }
  .kfm-hero-media { grid-template-columns: 1fr; padding: 0; min-height: 0; }
  .kfm-hero-side { display: none; }
  .kfm-hero-main { aspect-ratio: 4 / 5; }
  .kfm-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .kfm-section { padding-top: 56px; padding-bottom: 48px; }
  .kfm-section-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .kfm-grid { gap: 20px 12px; }
  .kfm-grid-3 { grid-template-columns: 1fr; }
  .kfm-band-text { padding: 32px 20px; }
  .kfm-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .kfm-swatches span { height: 80px; }
  .kfm-swatches div { font-size: 12px; }
  .kfm-insta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kfm-newsletter { padding: 28px 20px; margin-bottom: 56px; }
  .kfm-nl-row { flex-direction: column; }
}

/* Version 1.4: Shop, Landingpages */
.kfm-display-sm { font-size: clamp(36px, 4vw, 56px); }
.kfm-shop-hero { padding-top: 40px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.kfm-crumbs { display: flex; gap: 8px; font-size: 13px; color: #6B5E55; }
.kfm-crumbs a { color: #6B5E55 !important; text-decoration: none; }
.kfm-shop-hero .kfm-lead { max-width: 640px; }
.kfm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.kfm-chip { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border: 1.5px solid var(--kfm-border); border-radius: 22px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--kfm-esp) !important; }
.kfm-chip:hover { border-color: var(--kfm-esp); }
.kfm-chip-on { background: var(--kfm-esp); border-color: var(--kfm-esp); color: var(--kfm-ivory) !important; }
.kfm-sale-band { margin-top: 48px; margin-bottom: 40px; background: var(--kfm-esp); color: var(--kfm-ivory); border-radius: 4px; padding-top: 44px; padding-bottom: 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.kfm-band-title { font-family: var(--kfm-serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin: 8px 0 0; color: var(--kfm-ivory); }
.kfm-usp-shop { margin-bottom: 72px; }
.kfm-empty { background: var(--kfm-ivory); border: 1.5px dashed var(--kfm-border); border-radius: 4px; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kfm-empty p { margin: 0; font-size: 16px; color: var(--kfm-text2); }
.kfm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.kfm-step { display: flex; flex-direction: column; gap: 8px; padding: 28px; background: #fff; border-radius: 4px; }
.kfm-step-no { width: 40px; height: 40px; border-radius: 50%; background: var(--kfm-accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kfm-step strong { font-size: 18px; margin-top: 8px; }
.kfm-step p { margin: 0; color: var(--kfm-text2); line-height: 1.6; }
.kfm-page-narrow { max-width: 880px; }
.kfm-tiers { margin-top: 32px; }
.kfm-tier { display: flex; flex-direction: column; gap: 8px; padding: 36px 28px; background: var(--kfm-sand); border-radius: 4px; text-decoration: none; }
.kfm-tier strong { font-family: var(--kfm-serif); font-size: 30px; font-weight: 400; }
.kfm-tier span { color: var(--kfm-text2); }
.kfm-tier-dark { background: var(--kfm-esp); }
.kfm-tier-dark strong, .kfm-tier-dark span { color: var(--kfm-ivory) !important; }
/* Odoo Produktkarten im Shop */
#wrapwrap .oe_product_cart { border: 0 !important; background: transparent !important; box-shadow: none !important; }
#wrapwrap .oe_product_cart .oe_product_image { border-radius: 4px; overflow: hidden; background: #EDE4D8; }
#wrapwrap .oe_product_cart .o_wsale_products_item_title a { font-weight: 600; color: var(--kfm-esp) !important; }
#wrapwrap .o_wsale_products_page { background: var(--kfm-ivory); }
@media (max-width: 1100px) {
  .kfm-steps { grid-template-columns: 1fr; }
}
.kfm-legal h2 { font-family: var(--kfm-sans) !important; font-size: 18px; font-weight: 700; letter-spacing: 0 !important; }

/* Version 1.5: Preise inkl. MwSt., Editor-Bereiche, Empfehlungen auf der Produktseite */
.kfm-shop-hero-text { display: flex; flex-direction: column; gap: 16px; }
.kfm-tax-note p { margin: 4px 0 0; font-size: 13px; color: var(--kfm-text2); }
.kfm-tax-note a, .kfm-footer-tax a { text-decoration: underline; }
.kfm-terms p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--kfm-text2); }
.kfm-terms a { color: var(--kfm-text2) !important; }
.kfm-footer-brand .kfm-footer-tax { font-size: 13px; opacity: .8; }
.kfm-footer-tax a { font-size: inherit; }
.kfm-pdp-more { margin-top: 32px; }
.kfm-usp-pdp { margin-top: 56px; margin-bottom: 72px; }
/* Odoos eigener Block "Alternative Products" wird durch die kfm.mode Empfehlungen ersetzt */
#wrapwrap #oe_structure_website_sale_recommended_products { display: none !important; }
@media (max-width: 640px) {
  .kfm-usp-pdp { margin-top: 32px; margin-bottom: 48px; }
}