/* Lora: shared literary display typeface, also loaded for Aura of Order. */
/* Lora - lokale variable Schriftdateien (400-700). */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-variable-italic.ttf') format('truetype');
}

/* KI PRAKTIKER / Gemeinsame gestalterische Handschrift / November 2026 */
:root {
  --side-padding: clamp(22px, 7vw, 120px);
  --site-content-max: 1440px;
  --site-header-height: 78px;
  --site-section-space: clamp(76px, 9vw, 148px);
  --site-soft-line: rgba(212, 175, 55, .15);
}
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body { -webkit-font-smoothing: antialiased; }
/* Shared header replaces differing fixed/static navigation across page templates. */
header#main-header {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--site-header-height) !important;
  padding: 0 var(--side-padding) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  background: rgba(5, 5, 6, .91) !important;
  border-bottom: 1px solid rgba(212,175,55,.16) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 15000 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 1.25;
}
#main-header .brand {
  display: inline-block !important;
  font-family: 'Lora', serif !important;
  font-size: clamp(.94rem, 1.35vw, 1.15rem) !important;
  letter-spacing: .17em !important;
  font-weight: 400 !important;
  white-space: nowrap;
  line-height: 1.35;
  text-decoration: none !important;
  color: #fff !important;
  text-transform: uppercase !important;
}
#main-header .brand span { color: #d4af37 !important; }
#main-header .nav-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(13px,2.2vw,34px) !important;
  text-align: right !important;
  width: auto !important;
}
#main-header .nav-meta a {
  display: inline-block;
  color: #c0bdba;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: clamp(.65rem,.8vw,.76rem) !important;
  letter-spacing: .055em !important;
  white-space: nowrap;
  line-height: 1.4;
  transition: color .24s ease;
}
#main-header .nav-meta a::before { content: '// '; color: #8c763e; }
#main-header .nav-meta a:hover,
#main-header .nav-meta a:focus-visible,
#main-header .nav-meta a.is-active,
#main-header .nav-meta a[aria-current="page"] { color: #d4af37 !important; }
#main-header a:focus-visible { outline: 1px solid #d4af37; outline-offset: 6px; }
/* Standardized breathing room for standalone content pages. */
body:is(.seite-logbuch,.seite-fallstudien,.seite-impressum,.seite-datenschutz,.seite-ueber-den-praktiker) main {
  padding-top: max(9rem, calc(var(--site-header-height) + 55px));
  max-width: none;
  box-sizing: border-box;
}
body:is(.seite-logbuch,.seite-fallstudien,.seite-impressum,.seite-datenschutz,.seite-ueber-den-praktiker) main > :is(article,section,div) { max-width: var(--site-content-max); }
/* Product pricing becomes a considered project-specific statement. */
.price-tag.investment-note {
  max-width: 800px;
  padding: 14px 0 14px 22px;
  margin-bottom: clamp(30px, 4vw, 56px);
  border-left: 1px solid rgba(212,175,55,.55);
  color: #d4af37;
  font-size: clamp(1rem,1.5vw,1.23rem);
  letter-spacing: 0;
  line-height: 1.5;
}
.price-tag.investment-note span {
  display: block;
  max-width: 650px;
  margin-top: 9px;
  color: #a8a3a0;
  font-family: 'Outfit',sans-serif;
  font-size: clamp(.92rem,1vw,1.04rem);
  line-height: 1.65;
  font-weight: 300;
  text-transform: none;
  letter-spacing: .01em;
}
/* The homepage systems are a deliberately introduced collection rather than a free-floating grid. */
.seite-index #systems { padding-inline: var(--side-padding); border-top: 1px solid var(--site-soft-line); }
.seite-index .systems-intro {
  max-width: 920px;
  padding: clamp(75px,8.5vw,140px) 0 clamp(42px,5.3vw,80px);
}
.seite-index .systems-intro .hero-label { display: block; margin-bottom: 22px; }
.seite-index .systems-intro h2 {
  margin: 0 0 25px;
  font: 400 clamp(2.35rem,4.4vw,4.6rem)/1.16 'Lora',serif;
  letter-spacing: -.025em;
  color: #f2eee5;
}
.seite-index .systems-intro p {
  margin: 0;
  max-width: 690px;
  color: #aaa6a0;
  font: 300 clamp(1.06rem,1.3vw,1.25rem)/1.8 'Outfit',sans-serif;
}
.seite-index .grid-container {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: var(--grid-line,rgba(255,255,255,.06));
  border: 1px solid var(--grid-line,rgba(255,255,255,.06));
  margin-bottom: clamp(75px,8.5vw,135px);
}
.seite-index .product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 340px;
  padding: clamp(29px,3.1vw,53px);
  border: 0 !important;
  background: #080808;
}
.seite-index .product-card:hover { background: #10100e; }
.seite-index .product-card .card-header { margin-bottom: clamp(30px,4vw,55px); }
.seite-index .product-card h3 { font-size: clamp(1.55rem,2vw,2.1rem); line-height: 1.2; }
.seite-index .product-card p { font-size: 1rem; line-height: 1.75; }
.seite-index .product-card .card-footer { margin-top: auto; padding-top: 24px; }
/* Shared materiality of the footer and calls to action. */
.footer-ur-feld { border-top: 1px solid rgba(212,175,55,.11); }
.footer-nav-row { row-gap: 22px; }
.footer-nav-row a:focus-visible { outline: 1px solid #d4af37; outline-offset: 5px; }
@media (max-width: 1150px) {
  .seite-index .grid-container { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seite-index .product-card { min-height: 310px; }
}
@media (max-width: 700px) {
  :root { --site-header-height: 102px; --side-padding: 22px; }
  header#main-header { flex-direction: column !important; gap: 12px !important; justify-content: center !important; padding: 10px 18px !important; }
  #main-header .brand { font-size: 1rem !important; }
  #main-header .nav-meta { justify-content: center !important; gap: 10px 15px !important; }
  #main-header .nav-meta a { font-size: .61rem !important; }
  .seite-index .grid-container { grid-template-columns: 1fr; }
  .seite-index .product-card { min-height: 0; padding: 32px 26px; }
  .seite-index .product-card .card-header { margin-bottom: 22px; }
  .seite-index .systems-intro { padding-top: 90px; padding-bottom: 46px; }
  .seite-index .systems-intro h2 { font-size: clamp(2.1rem,9vw,3rem); }
  .seite-index .hero { padding-top: max(11rem,calc(var(--site-header-height) + 55px)); }
  .seite-produkte-aura-of-order header.hero { padding-top: calc(var(--site-header-height) + 75px); }
  body:is(.seite-logbuch,.seite-fallstudien,.seite-impressum,.seite-datenschutz,.seite-ueber-den-praktiker) main { padding-top: calc(var(--site-header-height) + 50px); }
}
@media (prefers-reduced-motion: reduce) {
  .seite-index .product-card, #main-header .nav-meta a { transition-duration: .01ms !important; }
}
/* Aura has its own visual language, but uses the same site-wide navigation and spacing. */
.seite-produkte-aura-of-order header.hero { padding-top: calc(var(--site-header-height) + 65px); }

.seite-danke .danke-container { margin-top: var(--site-header-height); }

/* Aura of Order uses its own base CSS: maintain the same ProvenExpert responsive treatment. */
.seite-produkte-aura-of-order #ProvenExpert_widgetbar_container { width: 100%; }
/* --- ProvenExpert Responsive Override --- */

/* Apply layout overrides ONLY when the screen is smaller than 1200px */
@media (max-width: 1200px) {
    /* 1. Remove the rigid 1140px width */
    body #ProvenExpert_widgetbar_container > div > div:nth-of-type(2) {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Enable Flexbox & GAP to perfectly center and space elements */
    body a.provenExpertWidgetContent {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        gap: 20px !important; 
        
        /* THE FIX: Kill the blue underline and default link styling */
        text-decoration: none !important; 
        border-bottom: none !important; 
        color: inherit !important;
    }

    /* 3. Strip all rigid margins and floats from the image */
    body .provenExpertWidgetContent > img {
        margin: 0 !important;
        float: none !important;
    }

    /* 4. Deep reset. Strip margin-top from ALL nested divs to prevent sagging */
    body .provenExpertWidgetContent div {
        float: none !important;
        margin-top: 0 !important;
    }
}

/* 5. Mobile View: Streamline layout and drop unnecessary ballast */
@media (max-width: 850px) {
    /* Hide all dividers (1, 3, 5, 7) + "1 Customer Review" (2) + "More Info" (8) */
    body .provenExpertWidgetContent > div:nth-of-type(1), 
    body .provenExpertWidgetContent > div:nth-of-type(3), 
    body .provenExpertWidgetContent > div:nth-of-type(5),
    body .provenExpertWidgetContent > div:nth-of-type(7),
    body .provenExpertWidgetContent > div:nth-of-type(2),
    body .provenExpertWidgetContent > div:nth-of-type(8) {
        display: none !important;
    }

    body .provenExpertWidgetContent > img {
        width: 130px !important;
        height: auto !important;
    }
    
    /* Slightly reduce the gap on very small screens so it doesn't overflow */
    body a.provenExpertWidgetContent {
        gap: 10px !important;
    }
}


/* Standardmauszeiger auf allen Seiten, keine künstliche Cursoranimation. */
html, body, body * { cursor: auto !important; }
a, a *, button, button *, summary, label[for], select, input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], [role="button"], [role="link"] { cursor: pointer !important; }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea, [contenteditable="true"] { cursor: text !important; }
#cursor { display: none !important; }
/* Ruhiger Akzentlink auf der Ueber-Seite. */
a.premium-beratung-link { color: var(--accent, #d4af37) !important; text-decoration: underline; text-decoration-color: rgba(212,175,55,.35); text-underline-offset: 3px; }
a.premium-beratung-link:hover, a.premium-beratung-link:focus-visible { color: #f0d993 !important; text-decoration-color: currentColor; }
