/* Grundstruktur */
main { padding-top: 4.5rem; }

/* WICHTIG: KEINE self-referencing var() Definitionen mehr!
   Landing nutzt die Brand-Tokens aus style.css.
   (Falls landing.css mal ohne style.css geladen wird, greifen Fallbacks unten.) */
:root {
  /* Brand palette (global) */
  --brand-orange: #e99400;
  --brand-orange-rgb: 233, 148, 0;
  --brand-orange-dark: #cd8200;
  --brand-orange-dark-rgb: 205, 130, 0;
  --brand-orange-light: #eb9f1a;
  --brand-orange-light-rgb: 235, 159, 26;

  --brand-brown: #7a3f00;
  --brand-brown-rgb: 122, 63, 0;
  --brand-brown-dark: #5e2f00;

  --brand-cream: #fff7eb;
  --brand-cream-2: #fff4e2;

  --brand-gray: #f8f9fa;
  --brand-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  --brand-radius: 12px;

  /* Bootstrap alignment */
  --bs-primary: var(--brand-orange);
  --bs-primary-rgb: var(--brand-orange-rgb);
  --bs-link-color: var(--brand-orange);
  --bs-link-hover-color: var(--brand-orange-dark);
  --bs-focus-ring-color: rgba(var(--brand-orange-rgb), 0.25);
}
.btn-primary{
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color:#fff !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brand-orange-dark) !important;
  border-color: var(--brand-orange-dark) !important;
  color:#fff !important;
}

.btn-outline-primary{
  color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color:#fff !important;
}


/* Buttons (Landing-sicher, falls irgendwo Styles überschrieben werden) */
.btn-primary{
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color:#fff !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brand-orange-dark) !important;
  border-color: var(--brand-orange-dark) !important;
}

.btn-outline-primary{
  color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color:#fff !important;
}

/* =========================
   HERO
   ========================= */
.hero-section{
  background-color:#fff;
  background-image: radial-gradient(circle at top left, #fff6e8 0%, #fffaf3 35%, #ffffff 70%, #f8f9fa 100%);
}

.hero-content{
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.06);
}

.hero-slide,
.hero-slide-image{ display:none; }
.hero-slide.is-active,
.hero-slide-image.is-active{ display:block; }

.hero-content h1{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-strong);
}

.hero-subtitle{
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-bottom:0.75rem;
}

.hero-bullets{
  list-style:none;
  padding-left:0;
  margin:0;
  font-size:0.9rem;
  color: var(--text);
}
.hero-bullets li::before{
  content:"• ";
  color: var(--brand-orange);
}

.hero-image{
  max-width:100%;
  height:auto;
}

/* Hero Responsiveness */
@media (max-width: 767.98px){
  .hero-content{ padding: 1rem 1.25rem; }
  .hero-content h1{ font-size: 1.5rem; }
  .hero-subtitle{ font-size: 0.95rem; }
  .hero-section{ padding-top: 1.5rem; }
}

/* =========================
   SECTIONS
   ========================= */
.light-section{ background-color: var(--brand-light); }

.section-lead{
  max-width:720px;
  margin:0 auto;
  color: var(--text);
  font-size:0.98rem;
}

h2{
  font-size:1.8rem;
  font-weight:600;
  color: var(--text-strong);
}

/* =========================
   PRODUKT-KACHELN
   ========================= */
.product-card{
  background:#fff;
  border-radius:0.9rem;
  padding:1.75rem 1.5rem;
  border:1px solid var(--border);
  box-shadow:0 0.25rem 0.75rem rgba(0,0,0,0.03);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform: translateY(-4px);
  box-shadow:0 0.75rem 1.5rem rgba(0,0,0,0.08);
}
.product-card h3{ font-size:1.2rem; font-weight:600; margin-bottom:.25rem; color: var(--text-strong); }
.product-card p{ font-size:.95rem; color: var(--text); }
.product-card ul{
  list-style:none;
  padding-left:0;
  margin-bottom:.75rem;
  font-size:.9rem;
  color: var(--text);
}
.product-card ul li::before{ content:"• "; color: var(--brand-orange); }
.product-card .btn{ margin-top:auto; }

.product-icon{
  width:3rem;height:3rem;border-radius:999px;
  background: var(--brand-orange-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.75rem;
}
.product-icon i{ font-size:1.3rem; color: var(--brand-orange); }

/* =========================
   DARK HIGHLIGHT
   ========================= */
.dc-highlight-section{
  background: linear-gradient(135deg, #231608, #1b1206);
  color:#fff;
}
.dc-highlight-section h2,
.dc-highlight-section h3{ color:#fff; }
.dc-highlight-section p{ color:#f2e9dd; }
.dc-highlight-section .bullet-list{
  list-style:none;
  padding-left:0;
  margin-bottom:1rem;
  font-size:.95rem;
}
.dc-highlight-section .bullet-list li::before{ content:"• "; color: var(--brand-orange); }

.infra-box{
  background: rgba(0,0,0,0.25);
  border-radius:0.9rem;
  padding:1.75rem 1.5rem;
}

.small-text{ font-size:.85rem; color: var(--text); }

/* =========================
   USE CASES / MANAGED / METRICS / TESTI
   ========================= */
.use-case-card,
.metric-box,
.managed-cta-box,
.about-cta-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--brand-radius);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.use-case-card{ padding:1.5rem 1.4rem; height:100%; }

.metric-box{
  padding:1.05rem 1.1rem;
  height:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.15rem;
  background: linear-gradient(180deg, rgba(var(--brand-orange-rgb),0.06), #fff 55%);
}
.metric-value{
  font-weight:900;
  font-size:1.25rem;
  line-height:1.1;
  color: var(--text-strong);
}
.metric-label{
  font-size:.92rem;
  color: var(--text);
}

.managed-cta-box,
.about-cta-box{ padding:1.5rem 1.4rem; height:100%; }

.use-case-card:hover,
.metric-box:hover,
.managed-cta-box:hover,
.about-cta-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  border-color: rgba(var(--brand-orange-rgb), 0.28);
}

.product-card p,
.product-card ul,
.use-case-card p,
.use-case-card ul,
.managed-section .bullet-list,
.metric-label,
.testimonial-content p{
  color: var(--text);
}

/* =========================
   FINAL CTA
   ========================= */
.final-cta-section{
  background: linear-gradient(135deg, #231608, #1b1206);
  color:#fff;
  text-align:center;
}
.final-cta-section h2{ color:#fff; }
.final-cta-section p{
  color:#f2e9dd;
  max-width:720px;
  margin:.5rem auto 1.5rem auto;
}

@media (max-width: 575.98px){
  h2{ font-size:1.6rem; }
}

/* Use-Case-Karten: gemeinsames Raster, damit Ueberschriften, Listen und
   Buttons der drei Karten auf einer Linie liegen. */
.use-case-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:1.5rem;
  row-gap:1.5rem;
}
@media (max-width: 767.98px){
  .use-case-grid{ grid-template-columns: 1fr; }
}

.use-case-card{
  display:flex;
  flex-direction:column;
}
.use-case-card > .btn,
.use-case-card > .use-case-actions{
  margin-top:auto;
}
.use-case-actions{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:.5rem;
}

/* Mit Subgrid liegen alle vier Zeilen (Titel | Text | Liste | Buttons)
   ueber die Karten hinweg auf denselben Linien. Karten mit zwei Buttons
   lassen den zweiten darunter stehen, der erste bleibt auf Hoehe der anderen. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 768px){
    .use-case-grid{
      grid-template-rows: auto auto 1fr auto;
      row-gap:0;
    }
    .use-case-card{
      display:grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
    .use-case-card > .use-case-actions{
      margin-top:0;
    }
  }
}