/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Faktolino — shared theme for the website pages */
:root {
  --fk-bg:        #FAF9F7;
  --fk-bg-warm:   #F4EFE5;
  --fk-card:      #FFFFFF;
  --fk-ink:       #1B1A17;
  --fk-ink-2:     #4A463F;
  --fk-ink-3:     #8A8276;
  --fk-hair:      #ECE7DD;
  --fk-danger:    #D14A4A;

  /* Pastels — chunky kid-brand */
  --fk-mint:      #7CC4C1;
  --fk-mint-deep: #5BB983;
  --fk-lav:       #D9C8F5;
  --fk-lav-deep:  #7B5BD3;
  --fk-sun:       #C8DF2F;
  --fk-sun-deep:  #A7BA27;
  --fk-peach:     #FFC7AC;
  --fk-peach-deep:#E07A4F;
  --fk-sky:       #BFE4F5;
  --fk-sky-deep:  #2F88B8;

  --fk-shadow:
    0 1px 0 rgba(27,26,23,0.04),
    0 4px 14px -2px rgba(27,26,23,0.06),
    0 24px 48px -12px rgba(27,26,23,0.10);
  --fk-shadow-soft:
    0 1px 0 rgba(27,26,23,0.03),
    0 6px 20px -8px rgba(27,26,23,0.10);
}

.fk {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--fk-ink);
  background-color: var(--fk-bg);
}

.fk h1, .fk h2, .fk h3, .fk h4, .fk h5, .fk h6,
.fk .display, .fk .headline, .fk .head {
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fk-ink);
}

/* ---------- Buttons ---------- */
.fk-btn {
  appearance: none;
  border: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.005em;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  text-decoration: none;
}
.fk-btn:hover { transform: translateY(-1px); }
.fk-btn:active { transform: translateY(0); }

.fk-btn-primary {
  background: var(--fk-ink) !important;
  color: var(--fk-bg) !important;
  box-shadow: 0 4px 0 #0B0A08, 0 8px 18px -6px rgba(27,26,23,0.35) !important;
}
.fk-btn-primary:hover { 
  background: #2A2620 !important; box-shadow: 0 5px 0 #0B0A08, 0 10px 22px -6px rgba(27,26,23,0.4) !important; 
}

.fk-btn-sun {
  background: var(--fk-sun) !important;
  color: var(--fk-ink) !important;
  box-shadow: 0 4px 0 var(--fk-sun-deep), 0 8px 18px -6px rgba(167,186,39,0.35) !important;
}
.fk-btn-mint {
  background: var(--fk-mint) !important;
  color: var(--fk-ink) !important;
  box-shadow: 0 4px 0 var(--fk-mint-deep), 0 8px 18px -6px rgba(91,185,131,0.3) !important;
}
.fk-btn-lav {
  background: var(--fk-lav) !important;
  color: var(--fk-ink) !important;
  box-shadow: 0 4px 0 var(--fk-lav-deep), 0 8px 18px -6px rgba(123,91,211,0.3) !important;
}
.fk-btn-ghost {
  background: transparent !important;
  color: var(--fk-ink) !important;
  border: 2px solid var(--fk-ink) !important;
  box-shadow: none !important;
}
.fk-btn-ghost:hover { background: var(--fk-ink) !important; color: var(--fk-bg) !important; }
.fk-btn-sm { padding: 10px 16px; font-size: 14px; }
.fk-btn-lg { padding: 18px 30px; font-size: 18px; }

/* Bubble button — for shop "Add to Cart" */
.fk-bubble {
  appearance: none;
  border: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 18px;
  background: var(--fk-ink);
  color: var(--fk-bg);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 0 #0B0A08;
  transition: transform 0.12s;
}
.fk-bubble:hover { transform: translateY(-1px) scale(1.02); }
.fk-bubble.is-sun { background: var(--fk-sun); color: var(--fk-ink); box-shadow: 0 3px 0 var(--fk-sun-deep); }
.fk-bubble.is-mint { background: var(--fk-mint); color: var(--fk-ink); box-shadow: 0 3px 0 var(--fk-mint-deep); }

/* ---------- Cards ---------- */
.fk-card {
  background: var(--fk-card);
  border-radius: 28px;
  box-shadow: var(--fk-shadow-soft);
  overflow: hidden;
}
.fk-card-flat {
  background: var(--fk-card);
  border-radius: 24px;
  border: 1px solid var(--fk-hair);
}

/* ---------- Chips ---------- */
.fk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--fk-bg-warm);
  color: var(--fk-ink-2);
  white-space: nowrap;
}
.fk-chip.is-mint  { background: var(--fk-mint); color: #1F4A30; }
.fk-chip.is-lav   { background: var(--fk-lav); color: #3D2A66; }
.fk-chip.is-sun   { background: var(--fk-sun); color: #5C4310; }
.fk-chip.is-peach { background: var(--fk-peach); color: #6B2E14; }
.fk-chip.is-sky   { background: var(--fk-sky); color: #1E4C68; }

/* ---------- Image placeholder ---------- */
.fk-imgph {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(27,26,23,0.045) 0 8px,
      transparent 8px 16px),
    var(--fk-bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fk-imgph-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--fk-ink-3);
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.fk-imgph.is-mint  { background: repeating-linear-gradient(135deg,rgba(91,185,131,0.18) 0 8px,transparent 8px 16px), #E8F6EE; }
.fk-imgph.is-lav   { background: repeating-linear-gradient(135deg,rgba(123,91,211,0.18) 0 8px,transparent 8px 16px), #F1EAFA; }
.fk-imgph.is-sun   { background: repeating-linear-gradient(135deg,rgba(167,186,39,0.20) 0 8px,transparent 8px 16px), #E8F6CC; }
.fk-imgph.is-peach { background: repeating-linear-gradient(135deg,rgba(224,122,79,0.18) 0 8px,transparent 8px 16px), #FFE4D6; }
.fk-imgph.is-sky   { background: repeating-linear-gradient(135deg,rgba(47,136,184,0.18) 0 8px,transparent 8px 16px), #E0F1FA; }

/* utility */
.fk-mw { max-width: 1180px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
.fk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--fk-bg-warm);
  font-weight: 700;
  font-size: 13px;
  color: var(--fk-ink-2);
}
.fk-pill-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--fk-mint-deep);
  box-shadow: 0 0 0 4px rgba(91,185,131,0.20);
}

@media (max-width: 768px) {
    .fk-mw { padding: 0 20px; }
    h1 { font-size: 42px !important; }
}

/* WooCommerce Checkout App-like Styling — Deaktiviert zugunsten des neuen Faktolino Premium Designs */


@keyframes fkPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

/* ---------- Top Nav ---------- */
.fk-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; gap: 28px; background: var(--fk-bg); border-bottom: 1px solid var(--fk-hair); width: 100%; box-sizing: border-box; }
.fk-logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--fk-ink); }
.fk-logo-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--fk-sun); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06); }
.fk-nav-links { display: flex; gap: 6px; align-items: center; }
.fk-nav-link { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; color: var(--fk-ink-2); padding: 8px 18px; border-radius: 999px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; }
.fk-nav-link { background: transparent; color: var(--fk-ink-2); }
.fk-nav-link:hover { background: #FFFFFF; color: var(--fk-ink); }
.fk-nav-link.is-active { background: #FFFFFF; color: var(--fk-ink); box-shadow: 0 2px 10px rgba(0,0,0,0.06); font-weight: 800; }

/* Dynamic WP Menu Support */
.fk-nav-links-ul { display: flex; gap: 6px; align-items: center; margin: 0; padding: 0; list-style: none; }
.fk-nav-links-ul li { margin: 0; padding: 0; list-style: none; }
.fk-nav-links-ul a { padding: 8px 18px; font-weight: 700; color: var(--fk-ink-2); text-decoration: none; border-radius: 999px; transition: all 0.2s ease; font-size: 15px; display: block; background: transparent; }
.fk-nav-links-ul a:hover,
.fk-nav-links-ul li.current-menu-item > a,
.fk-nav-links-ul li.current_page_item > a,
.fk-nav-links-ul li.current-menu-ancestor > a { 
    background: #FFFFFF; 
    color: var(--fk-ink); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.06); 
    font-weight: 800;
}

/* ---------- Image placeholder ---------- */
.fk-imgph {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--fk-hair); color: var(--fk-ink-3);
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 14px;
}
.fk-imgph-label {
  background: rgba(255,255,255,0.7); padding: 8px 16px; border-radius: 999px;
  backdrop-filter: blur(4px); color: var(--fk-ink);
}
.fk-imgph.is-mint  { background: repeating-linear-gradient(135deg,rgba(91,185,131,0.18) 0 8px,transparent 8px 16px), #E8F6EE; }
.fk-imgph.is-lav   { background: repeating-linear-gradient(135deg,rgba(123,91,211,0.18) 0 8px,transparent 8px 16px), #F1EAFA; }
.fk-imgph.is-sun   { background: repeating-linear-gradient(135deg,rgba(167,186,39,0.20) 0 8px,transparent 8px 16px), #E8F6CC; }
.fk-imgph.is-peach { background: repeating-linear-gradient(135deg,rgba(224,122,79,0.18) 0 8px,transparent 8px 16px), #FFE4D6; }
.fk-imgph.is-sky   { background: repeating-linear-gradient(135deg,rgba(47,136,184,0.18) 0 8px,transparent 8px 16px), #E0F1FA; }

/* ---------- Footer ---------- */
.fk-foot {
  background: var(--fk-bg-warm);
  padding: 56px 0 32px;
  color: var(--fk-ink-2);
  width: 100%;
  box-sizing: border-box;
}
.fk-foot-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.fk-foot h5 {
  font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 700;
  margin: 0 0 16px; color: var(--fk-ink);
}
.fk-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fk-foot ul a { color: var(--fk-ink-2); text-decoration: none; font-size: 15px; }
.fk-foot ul a:hover { color: var(--fk-ink); }
.fk-foot-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--fk-hair);
  padding-top: 32px;
  margin-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--fk-ink-3);
  flex-wrap: wrap; gap: 16px;
}

/* Hide mobile-only elements on desktop */
@media (min-width: 993px) {
  .fk-mobile-only {
    display: none !important;
  }
  #fk-mobile-menu-overlay {
    display: none !important;
  }
}

/* ---------- Responsive Header & Footer ---------- */
@media (max-width: 992px) {
  .fk-desktop-only {
    display: none !important;
  }

  /* Navigation bar */
  .fk-nav { padding: 14px 20px; }

  /* Mobile Overlay – full screen */
  #fk-mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #FAF8F4 !important;
    z-index: 99999 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #fk-mobile-menu-overlay.is-open {
    display: flex !important;
  }

  /* Mobile overlay top bar */
  .fk-mobile-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  /* Close X button (pure CSS) */
  .fk-close-x {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
  }
  .fk-close-x span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2.5px;
    background: #1B1A17;
    border-radius: 2px;
  }
  .fk-close-x span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .fk-close-x span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Search bar */
  .fk-mobile-search {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-shrink: 0;
  }
  .fk-mobile-search form {
    display: flex;
    align-items: center;
    background: var(--fk-bg-warm);
    border-radius: 16px;
    padding: 14px 18px;
    gap: 12px;
  }
  .fk-mobile-search input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    width: 100%;
    color: var(--fk-ink);
    font-weight: 600;
  }

  /* Library banner */
  .fk-mobile-library {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  .fk-mobile-library a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #E8F6CC;
    border: 1px solid var(--fk-sun);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
  }

  /* Nav link list inside overlay - scoped precisely and with important to prevent theme style bleed */
  #fk-mobile-menu-overlay .fk-nav-links-scrollable {
    flex: 1 !important;
    overflow-y: auto !important;
    width: 100% !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul a,
  #fk-mobile-menu-overlay .fk-nav-link {
    font-size: 20px !important;
    padding: 16px 16px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fk-ink) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    height: auto !important;
    border: none !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul a::before,
  #fk-mobile-menu-overlay .fk-nav-link::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D0CBBD !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul a::after,
  #fk-mobile-menu-overlay .fk-nav-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238E887B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul a:hover {
    background: transparent !important;
    box-shadow: none !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current-menu-item > a,
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current_page_item > a,
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current-menu-ancestor > a,
  #fk-mobile-menu-overlay .fk-nav-link.is-active {
    background: var(--fk-sun) !important;
    box-shadow: 0 3px 0 var(--fk-sun-deep), 0 4px 16px rgba(167,186,39,0.25) !important;
    color: var(--fk-ink) !important;
  }
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current-menu-item > a::before,
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current_page_item > a::before,
  #fk-mobile-menu-overlay .fk-nav-links-ul li.current-menu-ancestor > a::before,
  #fk-mobile-menu-overlay .fk-nav-link.is-active::before {
    background: var(--fk-sun) !important;
  }

  /* Hamburger btn + icon */
  .fk-mobile-menu-btn { display: flex !important; }
  .fk-mobile-cart-icon { display: flex !important; align-items: center; }
  .fk-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 22px;
    height: 22px;
  }
  .fk-hamburger span {
    display: block;
    width: 20px;
    height: 2.5px;
    background: #1B1A17;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }
  /* Animate to X when active */
  .fk-mobile-menu-btn.is-active .fk-hamburger span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .fk-mobile-menu-btn.is-active .fk-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .fk-mobile-menu-btn.is-active .fk-hamburger span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* Bottom action buttons */
  .fk-mobile-bottom-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: var(--fk-bg);
    border-top: 1px solid var(--fk-hair);
    flex-shrink: 0;
  }
  .fk-mobile-btn-account {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    background: #FFF;
    border: 2px solid var(--fk-ink);
    border-radius: 999px;
    padding: 16px;
    text-decoration: none;
    color: var(--fk-ink);
    font-weight: 800; font-size: 15px;
  }
  .fk-mobile-btn-cart {
    flex: 1.2;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    background: var(--fk-sun);
    border-radius: 999px;
    padding: 16px;
    text-decoration: none;
    color: var(--fk-ink);
    font-weight: 800; font-size: 16px;
  }
  .fk-mobile-btn-cart span {
    background: var(--fk-ink);
    color: #FFF;
    width: 26px; height: 26px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    margin-left: 2px;
  }

  /* Cart & Actions */
  .fk-cart-btn { padding: 10px 14px !important; }
  .fk-cart-text-label { display: none; }

  /* Footer */
  .fk-foot { padding: 48px 20px 24px; }
  .fk-foot-inner { grid-template-columns: 1fr; gap: 40px; }
  .fk-foot-bottom { flex-direction: column; text-align: center; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .fk-foot-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Blog Post Content ---------- */
.fk-post-content p {
  font-size: 18px; line-height: 1.7; color: var(--fk-ink-2); margin-top: 0; margin-bottom: 24px;
}
.fk-post-content h2, .fk-post-content h3, .fk-post-content h4 {
  font-family: 'Quicksand', sans-serif; color: var(--fk-ink); margin-top: 40px; margin-bottom: 16px;
}
.fk-post-content img {
  border-radius: 24px; max-width: 100%; height: auto; display: block; margin: 32px 0;
}

/* Bild mit Bildunterschrift ("Szenen-Illustration") */
.fk-post-content figure.wp-block-image { margin: 32px 0; }
.fk-post-content figure.wp-block-image img { margin: 0; }
.fk-post-content figcaption,
.fk-post-content .wp-element-caption {
  margin-top: 12px; text-align: center; font-size: 14px; font-style: normal;
  font-weight: 600; color: var(--fk-ink-3);
}

/* Drop Cap for the very first paragraph */
.fk-post-content > p:first-of-type::first-letter {
  font-family: 'Quicksand', sans-serif; font-size: 64px; float: left;
  line-height: 0.9; margin-right: 14px; margin-top: 6px; color: var(--fk-sun-deep);
}

/* Callout Boxes (Apply to Gutenberg Groups via "Zusätzliche CSS-Klassen") */
.fk-box-mint, .fk-box-lav {
  border-radius: 24px; padding: 24px 28px; position: relative; margin: 32px 0;
}
.fk-box-mint {
  background: var(--fk-mint); box-shadow: 0 4px 0 var(--fk-mint-deep);
}
.fk-box-mint * { color: #1F4A30 !important; }

.fk-box-lav {
  background: var(--fk-lav); box-shadow: 0 4px 0 var(--fk-lav-deep);
}
.fk-box-lav * { color: #3D2A66 !important; }

.fk-box-mint p, .fk-box-lav p { margin-bottom: 0 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.45 !important; }

/* Auto-Callout (Story-Formatter): "Wusstest du, dass…?" Kopfzeile */
.fk-callout .fk-callout-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.fk-callout .fk-callout-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.fk-box-mint.fk-callout .fk-callout-icon { color: var(--fk-mint-deep); }
.fk-callout .fk-callout-title {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 18px;
}

/* Auto-Forscher-Frage (Story-Formatter): lila Box mit Antwort-Reveal */
.fk-forscher { margin: 32px 0; }
.fk-forscher .fk-forscher-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.fk-forscher .fk-forscher-icon {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.fk-box-lav.fk-forscher .fk-forscher-icon { color: var(--fk-lav-deep); }
.fk-forscher .fk-forscher-title {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 18px;
}
.fk-forscher .fk-forscher-q {
  margin: 0 0 12px !important; font-size: 17px !important;
  font-weight: 600 !important; line-height: 1.45 !important;
}
.fk-forscher .fk-forscher-details { margin-top: 4px; }
.fk-forscher .fk-forscher-toggle {
  border: 2px solid #3D2A66 !important; color: #3D2A66 !important;
  background: transparent !important; cursor: pointer;
  display: inline-flex !important; align-items: center; list-style: none;
  box-shadow: none !important;
}
.fk-forscher .fk-forscher-toggle::-webkit-details-marker { display: none; }
.fk-forscher .fk-forscher-toggle:hover {
  background: #3D2A66 !important; color: #FFFFFF !important;
}
.fk-forscher .fk-forscher-details[open] .fk-forscher-toggle { display: none !important; }
.fk-forscher .fk-forscher-answer {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed rgba(61,42,102,0.3);
}
.fk-forscher .fk-forscher-answer p {
  margin-bottom: 0 !important; font-size: 16px !important;
  font-weight: 500 !important; line-height: 1.6 !important;
}

/* ── Neue Artikel-Sektionen (vom Studio/Generator geliefert) ──────────────── */

/* fk-wow: "Schon gewusst?"-Box — ähnlich fk-box-mint, mit eigenem Icon-Akzent */
.fk-blog-main aside.fk-wow,
.fk-post-content aside.fk-wow {
  background: #E6F7EE;
  border-radius: 22px;
  padding: 22px 26px;
  /* margin-top erhöht: Badge hängt 14 px über den Rand → 44 px = genug Freiraum */
  margin: 44px 0 36px;
  box-shadow: 0 4px 0 #5BB983;
  position: relative;
}
.fk-wow::before {
  content: "💡";
  position: absolute;
  top: -14px; left: 22px;
  font-size: 22px;
  background: #fff;
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  line-height: 1;
  padding: 4px;
  box-sizing: border-box;
}
.fk-wow strong, .fk-wow b { color: #1F4A30; }
.fk-wow p, .fk-wow li {
  font-size: 17px !important; font-weight: 600 !important;
  line-height: 1.5 !important; color: #1F4A30; margin-bottom: 8px;
}
.fk-wow li:last-child { margin-bottom: 0; }
/* ul/ol ohne Bullet — Generator nutzt bereits Emoji als Marker */
.fk-wow ul, .fk-wow ol { margin: 0; padding: 0; list-style: none; }
.fk-wow .fk-wow-label {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: #2F7C50;
  display: block; margin-bottom: 10px;
}
/* Generator schreibt <h2>/<h3> statt .fk-wow-label-Span → als Label rendern
   Höhere Spezifizität nötig, da single.php-Inline-Style .fk-blog-main h2 überschreibt */
.fk-blog-main aside.fk-wow h2, .fk-post-content aside.fk-wow h2,
.fk-blog-main aside.fk-wow h3, .fk-post-content aside.fk-wow h3 {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: #2F7C50;
  margin: 0 0 10px; line-height: 1.3;
}

/* fk-experiment: "Probier es selbst aus"-Box — creme/gelblich, Schritte-Liste */
.fk-blog-main div.fk-experiment,
.fk-post-content div.fk-experiment {
  background: #FFF8E6;
  border-radius: 22px;
  padding: 22px 26px;
  margin: 36px 0;
  box-shadow: 0 4px 0 var(--fk-sun-deep);
  border: 1.5px solid var(--fk-hair);
}
.fk-experiment .fk-experiment-label {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: #7A5B00;
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
/* Generator schreibt <h2>/<h3> statt .fk-experiment-label-Span */
.fk-blog-main div.fk-experiment h2, .fk-post-content div.fk-experiment h2,
.fk-blog-main div.fk-experiment h3, .fk-post-content div.fk-experiment h3 {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: #7A5B00;
  margin: 0 0 14px; line-height: 1.3;
}
/* Intro- und Abschluss-Absätze kompakter als normaler Fließtext */
.fk-experiment p {
  font-size: 16px !important; color: #3A2A00 !important;
  font-weight: 600 !important; line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.fk-experiment p:last-child { margin-bottom: 0 !important; }
.fk-experiment ol {
  margin: 0; padding: 0; list-style: none; counter-reset: exp-step;
  display: flex; flex-direction: column; gap: 10px;
}
.fk-experiment ol li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16px !important; font-weight: 600 !important;
  line-height: 1.5 !important; color: #3A2A00;
  counter-increment: exp-step;
}
.fk-experiment ol li::before {
  content: counter(exp-step);
  min-width: 28px; height: 28px;
  background: var(--fk-sun); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 13px;
  color: #3A2A00; flex-shrink: 0; margin-top: 1px;
}

/* fk-glossary: "Forscherwörter" — <dl> mit dt/dd */
.fk-blog-main dl.fk-glossary,
.fk-post-content dl.fk-glossary {
  background: #F0EAFA;
  border-radius: 22px;
  padding: 22px 26px;
  /* margin-top 0: die vorangehende <h2> stellt den Abstand (14px Unterkante);
     margin-bottom 36px: konsistenter Block-Rhythmus */
  margin: 0 0 36px;
  box-shadow: 0 4px 0 var(--fk-lav-deep);
}
.fk-glossary .fk-glossary-label {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: #5B3FC8;
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.fk-glossary dt {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 16px;
  color: #3D2A66; margin: 18px 0 4px;
}
.fk-glossary dt:first-of-type { margin-top: 0; }
.fk-glossary dd {
  margin: 0 0 2px 0; padding-left: 14px;
  border-left: 3px solid var(--fk-lav-deep);
  font-size: 15px !important; font-weight: 500 !important;
  line-height: 1.55 !important; color: #4A3A66 !important;
}

/* FAQ-Akkordeon (A-NEU-2) */
.fk-faq-section { margin: 36px 0; }
.fk-faq-section h2 {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--fk-ink); margin: 0 0 16px;
}
.fk-faq-item {
  border: 1.5px solid var(--fk-hair);
  border-radius: 16px; background: #fff; margin-bottom: 16px;
  overflow: hidden; transition: border-color .15s;
}
.fk-faq-item:hover { border-color: var(--fk-ink-3); }
.fk-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 16px; color: var(--fk-ink);
}
.fk-faq-item summary::-webkit-details-marker { display: none; }
.fk-faq-item summary::after {
  content: "+"; font-size: 22px; line-height: 1; flex-shrink: 0;
  color: var(--fk-ink-3); transition: transform .2s;
}
.fk-faq-item[open] summary::after { transform: rotate(45deg); color: var(--fk-ink); }
.fk-faq-item .fk-faq-answer {
  padding: 0 20px 18px; font-size: 16px; line-height: 1.65;
  color: var(--fk-ink-2); font-weight: 500;
}
/* ── FAQ-Sektion im Body-Content (Generator: <section class="fk-faq">) ─────────
   Getrennt von .fk-faq-section (single.php Meta-Akkordeon mit <details>/<summary>).
   Struktur: section.fk-faq > h2 + dl.fk-faq-list > div.fk-faq-item > dt + dd    */
section.fk-faq {
  margin: 36px 0 0;
}
/* Höhere Spezifizität nötig: single.php-Inline überschreibt sonst .fk-blog-main h2 */
.fk-blog-main section.fk-faq > h2,
.fk-post-content section.fk-faq > h2 {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--fk-ink); margin: 0 0 16px;
}
dl.fk-faq-list {
  margin: 0; padding: 0;          /* Browser-Default (margin: 1em 0) zurücksetzen */
}
/* dt = Frage, dd = Antwort — padding statt margin für gleichmäßige Innenabstände */
.fk-faq-list .fk-faq-item dt {
  display: block;
  font-weight: 800; font-size: 16px; color: var(--fk-ink);
  padding: 16px 20px 6px; line-height: 1.4;
}
.fk-faq-list .fk-faq-item dd {
  margin: 0;                      /* Browser-Default margin-left: 40px zurücksetzen */
  padding: 0 20px 16px;
  font-size: 16px; line-height: 1.65;
  color: var(--fk-ink-2); font-weight: 500;
}

@media (max-width: 640px) {
  .fk-wow { padding: 20px 18px; margin-top: 36px; }
  .fk-experiment { padding: 20px 18px; }
  .fk-glossary { padding: 20px 18px; }
  section.fk-faq { margin-top: 28px; }
}

/* --- MAGAZIN / ARCHIV --- */
.fk-filter-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 15px; background: #FFFFFF; color: var(--fk-ink-2);
  border: 2px solid var(--fk-hair); transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.fk-filter-btn:hover {
  background: var(--fk-bg-warm); border-color: var(--fk-ink-3);
}
.fk-filter-btn.is-active {
  background: var(--fk-ink); color: var(--fk-bg); border-color: var(--fk-ink);
  box-shadow: 0 3px 0 #0B0A08; transform: translateY(-1px);
}
.fk-filter-icon {
  width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--fk-ink); transition: background .15s, color .15s;
}
.fk-filter-btn.is-active .fk-filter-icon {
  color: var(--fk-bg); background: rgba(255,255,255,0.18) !important;
}
.fk-card:hover {
  transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important;
}
.fk-pagination {
  display: flex; gap: 8px; font-weight: 700;
}
.fk-pagination a, .fk-pagination span {
  padding: 10px 18px; border-radius: 999px; background: #FFFFFF; color: var(--fk-ink);
  border: 2px solid var(--fk-hair); text-decoration: none;
}
.fk-pagination .current {
  background: var(--fk-ink); color: var(--fk-bg); border-color: var(--fk-ink);
}
.fk-pagination a:hover {
  background: var(--fk-bg-warm);
}

/* ---------- WooCommerce Single Product Responsive Layouts ---------- */
.fk-product-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.fk-product-hero-section {
  padding: 32px 48px 48px;
}
.fk-product-hero-stage {
  padding: 64px 48px;
  min-height: 520px;
}
.fk-features-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 32px;
}
.fk-top-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.fk-top-banner-text {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fk-top-banner-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.fk-product-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
}
.fk-product-desc-section {
  padding: 0 48px 64px;
}
.fk-pack-inside-section {
  padding: 48px 0;
}
.fk-reviews-section {
  padding: 72px 48px 96px;
}

@media (max-width: 992px) {
  .fk-product-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .fk-product-desc-grid { grid-template-columns: 1fr; gap: 40px; }
  .fk-product-hero-section { padding: 24px 20px; }
  .fk-product-desc-section { padding: 0 20px 48px; }
  .fk-features-banner { grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .fk-product-hero-stage { padding: 48px 24px; min-height: 400px; }
  .fk-pack-inside-section { padding: 32px 0; }
  .fk-reviews-section { padding: 48px 20px 64px; }
  
  .fk-top-banner { flex-direction: column; text-align: center; gap: 32px; padding: 32px 24px !important; }
  .fk-top-banner-text { flex-direction: column; gap: 20px; }
  .fk-top-banner-pills { flex-direction: column; width: 100%; }
  .fk-top-banner-pills > div { width: 100%; justify-content: flex-start; padding: 12px 20px !important; font-size: 15px !important; }
}

@media (max-width: 600px) {
  .fk-product-hero-section { padding: 16px 0; }
  .fk-product-hero-stage { border-radius: 0; padding: 40px 20px; }
}

/* ---------- Startseite (Homepage) Responsive ---------- */
.fk-hp-hero-sec { padding: 56px 48px 64px; }
.fk-hp-trust-sec { padding: 28px 48px; }
.fk-hp-mag-sec { padding: 88px 48px; }
.fk-hp-audio-sec { padding: 48px 48px 96px; }
.fk-hp-news-sec { padding: 80px 48px; }

.fk-hp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.fk-hp-hero-visual { position: relative; height: 560px; }
.fk-hp-hero-badge-1 { position: absolute; left: -24px; bottom: 64px; background: #FFFFFF; border-radius: 20px; padding: 14px 18px; box-shadow: var(--fk-shadow); display: flex; align-items: center; gap: 12px; transform: rotate(-3deg); }
.fk-hp-hero-badge-2 { position: absolute; right: -16px; top: 36px; background: #FFFFFF; border-radius: 20px; padding: 12px 16px; box-shadow: var(--fk-shadow); display: flex; align-items: center; gap: 10px; transform: rotate(2deg); }

.fk-hp-mag-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.fk-hp-mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fk-hp-audio-box { background: var(--fk-ink); color: #FAF9F7; border-radius: 36px; padding: 56px 56px 48px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.fk-hp-news-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.fk-hp-news-form { display: flex; flex-direction: column; gap: 0; }
.fk-hp-news-input-row { background: #FFFFFF; border-radius: 999px; padding: 8px 8px 8px 24px; display: flex; align-items: center; gap: 0; box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.fk-hp-news-input-row input[type="email"] { flex: 1; min-width: 0; border: none; background: transparent; padding: 8px 0; font-size: 16px; font-family: inherit; outline: none; color: var(--fk-ink); }
.fk-hp-news-input-row .fk-btn { flex-shrink: 0; white-space: nowrap; padding: 14px 24px !important; font-size: 15px !important; }

@media (max-width: 992px) {
  .fk-hp-hero-sec { padding: 32px 20px 48px; }
  .fk-hp-trust-sec { padding: 24px 20px; }
  .fk-hp-mag-sec { padding: 48px 20px; }
  .fk-hp-audio-sec { padding: 32px 20px 64px; }
  .fk-hp-news-sec { padding: 48px 20px; }

  .fk-hp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .fk-hp-hero-visual { height: 400px; margin-top: 16px; }
  .fk-hp-hero-badge-1 { left: -10px; bottom: 20px; padding: 10px 14px; transform: scale(0.9) rotate(-3deg); transform-origin: left bottom; }
  .fk-hp-hero-badge-2 { right: -10px; top: 20px; padding: 8px 12px; transform: scale(0.9) rotate(2deg); transform-origin: right top; }
  
  .fk-hp-mag-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fk-hp-mag-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fk-hp-audio-box { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px 32px; }
  .fk-hp-news-grid { grid-template-columns: 1fr; gap: 32px; }
  .fk-hp-news-input-row { flex-direction: column; border-radius: 20px; padding: 12px; }
  .fk-hp-news-input-row input[type="email"] { width: 100%; padding: 8px 4px; }
  .fk-hp-news-input-row .fk-btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .fk-hp-mag-grid { grid-template-columns: 1fr; }
  .fk-hp-hero-visual { height: 320px; }
  .fk-hp-trust-sec .fk-mw { justify-content: center; gap: 16px; }
}

/* =============================================================
   WOOCOMMERCE CART — GLOBAL OVERRIDES
   Faktolino: Download-Shop (kein physischer Versand)
   ============================================================= */

/* Versteckt Versand-Banner / Free-Shipping-Progress-Bar */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
  display: none !important;
}

/* Falls ein Plugin eine Shipping-Progress-Bar einfügt */
.shipping-progress-bar,
.free-shipping-bar,
.woo-free-shipping-bar,
.ysfw-free-shipping-bar,
[class*="free-shipping"],
[class*="shipping-notice"],
[class*="shipping-progress"] {
  display: none !important;
}

/* Standard WC Cart Totals Box ausblenden (durch custom Template ersetzt) */
.woocommerce-cart .cart-collaterals .cart_totals {
  display: none !important;
}

/* Cross-Sells ("Vielleicht auch") komplett ausblenden */
.woocommerce-cart .cross-sells,
.woocommerce-cart .cross-sells-title {
  display: none !important;
}

/* Header Cart-Badge-Zähler (z.B. "Warenkorb · 1") ausblenden, except our own badge */
.fk-cart-btn .cart-count,
.fk-cart-btn .cart-items-count,
.fk-cart-btn [class*="count"]:not(.fk-cart-badge),
.fk-cart-btn [class*="badge"]:not(.fk-cart-badge),
span.fk-cart-count,
.header-cart-count {
  display: none !important;
}

/* Bulletproof styles for our custom header cart badge */
.fk-cart-btn .fk-cart-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  right: auto !important;
  background: var(--fk-lav-deep) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--fk-sun) !important;
  box-shadow: 0 2px 6px rgba(123, 91, 211, 0.35) !important;
  pointer-events: none !important;
  z-index: 100 !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1 !important;
}

/* WooCommerce Checkout Button — Faktolino Style */
a.checkout-button.button,
.wc-proceed-to-checkout a.checkout-button {
  background: var(--fk-sun) !important;
  color: var(--fk-ink) !important;
  border-radius: 999px !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 18px 28px !important;
  box-shadow: 0 4px 0 var(--fk-sun-deep) !important;
  transition: transform 0.12s !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
a.checkout-button.button:hover {
  transform: translateY(-2px) !important;
}

/* Quantity Input in Cart — cleaneres Styling */
.woocommerce-cart .qty {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

/* Background Color for Containers as requested */
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
    background-color: #faf9f7;
}

/* Force body background on checkout and cart pages */
body.woocommerce-checkout,
body.woocommerce-cart {
  background-color: #FAF9F7 !important;
}
body.woocommerce-checkout #content,
body.woocommerce-checkout .site-content,
body.woocommerce-cart #content,
body.woocommerce-cart .site-content {
  background-color: #FAF9F7 !important;
}

/* ===== CHECKOUT: GeneratePress Layout Override ===== */
/* Force full-width content on checkout — override any GP sidebar/float layout */
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .site-main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
body.woocommerce-checkout .inside-article {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.woocommerce-checkout #right-sidebar,
body.woocommerce-checkout #left-sidebar,
body.woocommerce-checkout .sidebar,
body.woocommerce-checkout .widget-area {
  display: none !important;
}

/* ===== RESPONSIVE PAGE PADDING & LAYOUT ===== */
#page {
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* #page IMMER voll-breit → Header-Leiste & Footer randlos und auf ALLEN Seiten
   identisch (kein springendes Logo mehr). Die einheitliche Inhaltsbreite kommt
   jetzt über .site-content / .fk-foot-inner (1180px zentriert, s. unten). */
body:not(.home) #page {
  margin: 0 auto !important;
  max-width: 100% !important;
  min-height: 60vh !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  body.home #page {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Custom full-width overrides for pages to allow full-screen backgrounds (Über uns & Meine Bibliothek) */
body.page-template-page-ueber-uns #page,
body.page-template-page-bibliothek #page,
body.page-id-56 #page,
body.page-slug-ueber-uns #page {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Responsive padding adjustments for "Über uns" template section containers */
@media (max-width: 768px) {
  body.page-template-page-ueber-uns .fk-ueber-hero,
  body.page-template-page-ueber-uns .fk-ueber-why,
  body.page-template-page-ueber-uns .fk-ueber-presse,
  body.page-template-page-ueber-uns .fk-ueber-newsletter {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Stacking the 2x2 grid into 1 column on mobile devices */
  body.page-template-page-ueber-uns .fk-ueber-why div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MAGAZIN / BLOG RESPONSIVE STYLES
   ========================================================================= */

/* --- Archive & Home templates --- */
.fk-magazin-header {
  padding: 72px 48px 32px;
  background: linear-gradient(180deg, var(--fk-bg) 0%, transparent 100%);
  text-align: center;
}
.fk-magazin-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
  text-wrap: balance !important;
}
.fk-magazin-filter-bar {
  padding: 8px 48px 32px;
  position: sticky;
  top: 0;
  background: var(--fk-bg);
  z-index: 5;
}
.fk-magazin-filter-inner {
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.fk-magazin-toolbar {
  padding: 0 48px 24px;
}
.fk-magazin-toolbar-inner {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.fk-magazin-grid-section {
  padding: 0 48px 88px;
}
.fk-magazin-grid {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* --- Single Post templates --- */
.fk-single-player-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fk-bg);
  padding: 14px 48px;
  border-bottom: 1px solid var(--fk-hair);
}
.fk-single-player-inner {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.fk-single-header {
  padding: 48px 48px 24px;
}
.fk-single-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 56px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 22px !important;
  text-wrap: balance !important;
}
.fk-single-teaser {
  font-size: 20px !important;
  line-height: 1.45 !important;
  color: var(--fk-ink-2) !important;
  max-width: 680px !important;
  margin-bottom: 24px !important;
  font-weight: 500 !important;
}
.fk-single-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.fk-single-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.fk-single-author-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fk-peach);
  color: #6B2E14;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 20px;
}
.fk-single-author-name {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--fk-ink);
  line-height: 1.2;
}
.fk-single-author-meta {
  font-size: 14px;
  color: var(--fk-ink-3);
  margin-top: 2px;
}

.fk-single-hero {
  padding: 8px 48px 48px;
}
.fk-single-hero img {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: var(--fk-shadow-soft);
  display: block;
}
.fk-single-content-section {
  padding: 0 48px 48px;
}
.fk-single-cta-section {
  padding: 48px 48px 96px;
}
.fk-single-cta-box {
  background: var(--fk-sun);
  border-radius: 32px;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  box-shadow: 0 4px 0 var(--fk-sun-deep);
  position: relative;
  overflow: hidden;
}
.fk-single-related-section {
  padding: 0 48px 96px;
}

/* --- Mobile Responsiveness overrides --- */
@media (max-width: 768px) {
  /* Magazin / Archive mobile adjustments */
  .fk-magazin-header {
    padding: 48px 20px 24px;
  }
  .fk-magazin-title {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
  .fk-magazin-filter-bar {
    padding: 8px 20px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fk-magazin-filter-inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .fk-magazin-filter-inner .fk-filter-btn {
    flex-shrink: 0;
  }
  .fk-magazin-toolbar {
    padding: 0 20px 20px;
  }
  .fk-magazin-toolbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .fk-magazin-grid-section {
    padding: 0 20px 64px;
  }
  .fk-magazin-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* Single Post mobile adjustments */
  .fk-single-player-bar {
    padding: 12px 20px;
  }
  .fk-single-player-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fk-single-player-inner .fk-btn {
    align-self: center;
  }
  .fk-single-header {
    padding: 32px 20px 20px;
  }
  .fk-single-title {
    font-size: 36px !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }
  .fk-single-teaser {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }
  .fk-single-hero {
    padding: 8px 20px 32px;
  }
  .fk-single-hero img {
    aspect-ratio: 16/9;
    border-radius: 20px;
  }
  .fk-single-content-section {
    padding: 0 20px 32px;
  }
  .fk-single-cta-section {
    padding: 32px 20px 64px;
  }
  .fk-single-cta-box {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 24px;
    border-radius: 24px;
  }
  .fk-single-cta-box img {
    order: -1; /* Place image at top on mobile */
    aspect-ratio: 4/3;
  }
  .fk-single-related-section {
    padding: 0 20px 64px;
  }
}

/* ==========================================================================
   FAKTOLINO GLOBAL MICRO-INTERACTIONS & COGNITIVE BRANDING
   ========================================================================== */

/* 1. Global Page Fade-In Transition */
body {
  animation: fkBodyFadeIn 0.35s ease-out;
}
@keyframes fkBodyFadeIn {
  from { opacity: 0.85; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 2. Branded Premium Scrollbar (Desktop only) */
@media (min-width: 961px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #FAF9F7;
  }
  ::-webkit-scrollbar-thumb {
    background: #c8df2f;
    border-radius: 99px;
    border: 2.5px solid #FAF9F7;
    transition: background-color 0.2s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #a7ba27;
  }
}



/* 4. Global Smartphone Tactile Haptic Feedback */
@media (max-width: 768px) {
  /* Disable ugly default mobile tap highlight rectangles */
  a, 
  button, 
  select, 
  input, 
  textarea,
  .fk-tab-btn, 
  .fk-play-btn, 
  .fk-heart-btn, 
  .fk-filter-btn {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  /* Micro haptic-like shrink when tapped on mobile */
  a:active:not(.fk-logo), 
  button:active, 
  select:active,
  .fk-filter-btn:active, 
  .fk-play-btn:active,
  .fk-heart-btn:active,
  .fk-nav-list li a:active,
  .woocommerce-MyAccount-navigation ul.fk-nav-list li a:active,
  .fk-nav-links-ul a:active,
  .fk-mobile-cart-icon:active {
    transform: scale(0.96) !important;
    transition: transform 0.05s ease !important;
  }
}

/* 5. Playful Wobble on Shopping Cart Badge */
@keyframes fkCartWobble {
  0% { transform: scale(1); }
  20% { transform: scale(1.25) rotate(-8deg); }
  45% { transform: scale(1.25) rotate(8deg); }
  70% { transform: scale(1.25) rotate(-4deg); }
  90% { transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.fk-cart-btn:hover .fk-cart-btn-inner svg,
.fk-mobile-cart-icon:hover svg,
.fk-mobile-btn-cart:hover svg {
  animation: fkCartWobble 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 6. Premium Expanding Pill Search Bar (Desktop only) */
.fk-nav-pill {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fk-pill-nav-item {
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  width: 20px;
  overflow: hidden;
}

.fk-pill-search-form {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#fk-pill-search-trigger {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* When the search is active, the pill expands beautifully */
.fk-nav-pill.fk-search-active {
  width: 340px !important;
  padding: 6px 16px 6px 20px !important;
  gap: 0 !important;
  border-color: rgba(200, 223, 47, 0.4) !important; /* Soft brand lime border focus glow */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(200, 223, 47, 0.15) !important;
}

/* Hide other icons when search is active */
.fk-nav-pill.fk-search-active .fk-pill-nav-item {
  width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Expand the search form when search is active */
.fk-nav-pill.fk-search-active .fk-pill-search-form {
  width: 100% !important;
  opacity: 1 !important;
}

/* Slide the search trigger to the right end when search is active, functioning as the submit button */
.fk-nav-pill.fk-search-active #fk-pill-search-trigger {
  order: 2 !important;
  margin-left: 12px !important;
  opacity: 0.8 !important;
}

.fk-nav-pill.fk-search-active .fk-pill-search-form {
  order: 1 !important;
}

/* Hide PWA App Promotion Banner on Desktop screens */
@media (min-width: 993px) {
  #fk-app-promo-banner,
  .fk-app-promo-banner {
    display: none !important;
  }
}

/* Hide PWA App Promotion Banner if already installed (standalone mode active) */
html.ist-pwa #fk-app-promo-banner,
html.ist-pwa .fk-app-promo-banner,
body.ist-pwa #fk-app-promo-banner,
body.ist-pwa .fk-app-promo-banner,
html.is-pwa #fk-app-promo-banner,
html.is-pwa .fk-app-promo-banner,
body.is-pwa #fk-app-promo-banner,
body.is-pwa .fk-app-promo-banner {
  display: none !important;
}

/* Premium Responsive Banners (App Promo & Kids Mode) */
.fk-responsive-banner {
  background: #F8FBE7 !important;
  border: 2px dashed #C8DF2F !important;
  border-radius: 24px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.fk-responsive-banner.is-kids-mode {
  background: #FFF3DC !important;
  border-color: #F5A623 !important;
  margin-bottom: 28px !important;
}

.fk-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.fk-banner-emoji {
  font-size: 36px !important;
  line-height: 1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.fk-banner-text {
  text-align: left !important;
}

.fk-banner-title {
  margin: 0 0 4px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1B1A17 !important;
  font-family: 'Outfit', sans-serif !important;
  line-height: 1.3 !important;
}

.fk-responsive-banner.is-kids-mode .fk-banner-title {
  color: #3A3226 !important;
}

.fk-banner-desc {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #666 !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.fk-banner-btn {
  background: #C8DF2F !important;
  color: #1B1A17 !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 50px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 0 #9DB51B !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.fk-banner-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #9DB51B !important;
}

.fk-responsive-banner.is-kids-mode .fk-banner-btn {
  background: #F5A623 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 #ECAE36 !important;
}

.fk-responsive-banner.is-kids-mode .fk-banner-btn:active {
  box-shadow: 0 2px 0 #ECAE36 !important;
}

/* Close button for App Promo */
.fk-banner-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  border: none !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #8B9E16 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 4px !important;
  transition: all 0.2s ease !important;
}

.fk-banner-close:hover {
  transform: scale(1.1) !important;
  color: #1B1A17 !important;
}

/* Responsive Stacking under 640px viewports */
@media (max-width: 640px) {
  .fk-responsive-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  
  .fk-banner-left {
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .fk-banner-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
}




/* ============================================================
   EINHEITLICHE SEITENBREITE & AUSRICHTUNG (Frontend-Konsistenz)
   Ziel: jede Seite rendert wie die Startseite. Header-Leiste &
   Footer bleiben voll-breit (randloser Hintergrund), aber der
   INHALT aller Standard-Seiten sitzt in derselben 1180px-Spalte
   wie die Startseite (.fk-mw). Kein springendes Logo, keine
   unterschiedlichen Breiten mehr.
   Ausgenommen (bewusst voll-breit): Über uns, Bibliothek,
   Checkout, Warenkorb, Kindermodus.
   ============================================================ */

/* 1) Sidebar-Layout auf Inhaltsseiten entfernen → Content nutzt volle Spalte */
body:not(.home):not(.page-template-page-ueber-uns):not(.page-template-page-bibliothek) #right-sidebar,
body:not(.home):not(.page-template-page-ueber-uns):not(.page-template-page-bibliothek) #left-sidebar {
  display: none !important;
}
body:not(.home):not(.woocommerce-checkout):not(.woocommerce-cart) .content-area {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* 2) KERN-FIX: .fk-mw überall bündig zum Header.
   Header UND Startseite nutzen .fk-mw mit padding:0 (Logo/Inhalt an der
   1180er-Kante). Unterseiten (Kontakt etc.) hatten das Standard-Padding 48px
   → 48px schmaler als der Header. Wir geben ALLEN .fk-mw auf Desktop padding:0,
   damit Inhalt überall genauso weit reicht wie Logo/Warenkorb. */
@media (min-width: 769px) {
  .fk-mw { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Sicherheits-Padding nur im mittleren Bereich, damit Inhalt nie den Rand berührt */
@media (min-width: 769px) and (max-width: 1276px) {
  .fk-mw { padding-left: 24px !important; padding-right: 24px !important; }
}

/* 3) Plain-Seiten (Impressum etc., GP .inside-article): gleiche 1180-Spalte, bündig */
body:not(.home) .inside-article {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 769px) and (max-width: 1276px) {
  body:not(.home) .inside-article { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 768px) {
  body:not(.home) .inside-article { padding-left: 20px !important; padding-right: 20px !important; }
}

/* WooCommerce "Warenkorb anzeigen"-Link nach Add-to-Cart global ausblenden */
a.added_to_cart.wc-forward {
  display: none !important;
}

/* Newsletter Inline Box — Single Posts + Archiv */
.fk-nl-inline-box {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--fk-sun);
  border-radius: 28px;
  padding: 32px 36px;
  box-shadow: 0 4px 0 var(--fk-sun-deep);
}
.fk-nl-inline-left { flex: 1.1; min-width: 0; }
.fk-nl-inline-left h3 { color: var(--fk-ink) !important; }
.fk-nl-inline-left p { color: #5C4310 !important; }
.fk-nl-inline-form { flex: 1; min-width: 280px; }
.fk-nl-inline-form .fk-hp-news-input-row {
  background: rgba(255,255,255,0.85);
}
.fk-nl-inline-form .fk-hp-news-input-row input[type="email"] {
  color: var(--fk-ink);
}
.fk-nl-inline-box .fk-chip {
  background: rgba(255,255,255,0.5) !important;
  color: #5C4310 !important;
}
@media (max-width: 768px) {
  .fk-nl-inline-box { flex-direction: column; align-items: stretch; padding: 24px 20px; gap: 20px; }
  .fk-nl-inline-form { min-width: 0; }
}

/* Mollie Apple Pay Direct Button global ausblenden — rendert als leerer schwarzer Button
   auf Nicht-Apple-Geräten und in Nicht-Safari-Browsern */
#mollie-applepayDirect-button,
#mollie-applepay-button-container,
.mollie-applepay-button-wrapper {
  display: none !important;
}

/* ── Barrierefreiheit: Animationen bei prefers-reduced-motion deaktivieren ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}