/* =========================================
   Grundstimmung – warmes, helles Gold
   ========================================= */

body {
  background-color: #F4EEDB;     /* sehr helles Gold */
  color: #000000 !important;     /* überschreibt Bootstrap-Defaults */
}


/* =========================================
   Überschriften – ruhig, kosmisch, hochwertig
   ========================================= */

h1, h2, h3 {
  color: #C9A24D;                /* Gold */
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.3rem, 4vw, 3.2rem);
}

/* Abschnittsüberschriften (C1 – umgesetzt) */
h2 {
  margin-top: 0.5rem;   /* test statt 2.3rem */
  margin-bottom: 0.5rem;   /* test statt 1.2rem */
  font-size: 1.75rem;
  font-weight: 500;
}


/* =========================================
   Fließtext – ruhig, analytisch
   ========================================= */

p {
  line-height: 1.6;
}


/* =========================================
   Hero-Bereich (Landingpage)
   Abstände bewusst minimal gehalten
   (früher mit zusätzlichem Top-Padding getestet)
   ========================================= */

.hero {
  padding: 0 2rem;        /* oben/unten 0, seitlich 2rem */
  text-align: center;
}


/* Hero-interne Abstände kontrollieren */
.hero h1 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.hero h2 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.hero p {
  font-size: 1.15rem;
  color: #516579;                /* kühles Grau-Blau für Kontrast */
}


/* HR direkt nach Hero entschärfen */
.hero + hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/* =========================================
   Grid Layout
   ========================================= */

.grid {
  gap: 2rem;
}


/* =========================================
   Karten – hochwertig, ruhig, kontrolliert
   ========================================= */

.grid-card {
  position: relative;            /* für Overlay-Link */
  pointer-events: none;          /* Klick nur über Link */

  background: linear-gradient(
    160deg,
    #FFFFFF 0%,
    #F4F8FC 100%
  );

  border-radius: 22px;
  padding: 2rem;

  border: 1px solid #C9A24D;     /* dunkles Gold – expliziter Rahmen */

  box-shadow:
    0 12px 30px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover – nur räumlich, keine Farbspielerei */
.grid-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.7);
}


/* =========================================
   Karten-Titel (C1 – umgesetzt)
   ========================================= */

.grid-card h3 {
  color: #C9A24D;                /* Gold wie Überschriften */
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  font-weight: 500;
}


/* =========================================
   Ganze Karte klickbar (Quarto-sicher)
   ========================================= */

.grid-card .card-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;          /* einzig klickbares Element */
}

/* Fokus (Keyboard + Klick) – Gold statt Blau */


/* Tastatur-Fokus – nur wenn sinnvoll */
.grid-card .card-link:focus-visible {
  outline: 2px solid #C9A24D;
  outline-offset: -4px;
}

/* Maus-/Touch-Fokus unterdrücken */
.grid-card .card-link:focus:not(:focus-visible) {
  outline: none;
}


/* =========================================
   Links allgemein
   ========================================= */

a {
  color: #5B8FD6;                /* ruhiges Blau für Links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================================
   Footer – ruhig & zurückhaltend
   ========================================= */

footer {
  font-size: 0.85rem;
  color: #6B6B6B;
}

footer a {
  color: #6B6B6B;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Order card – dominant but restrained */
.order-card {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #f5f6f8;        /* sehr helles Grau / Blau-Grau */
  border: 2px solid #d0d4da;
}

/* Headline etwas größer */
.order-card h3 {
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: 0.01em;
}

.test-banner {
  background: #7a0000;
  color: #fff;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.btn-primary {
    background-color: #c9a24d !important;   /* warmes Gold */
    border: 1px solid #b38c37 !important;   /* leicht dunkleres Gold */
    color: #ffffff !important;              /* weiße Schrift */

    padding: 0.8rem 2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 8px;

    transition: all 0.25s ease;
}

.btn-primary:hover {
    background-color: #b7903e !important;   /* dunkler beim Hover */
    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(201, 162, 77, 0.28);
}
/* Verfeinerung der Trennlinie */
.column-border {
    border-right: 1px solid #d4af37;
    padding-right: 2rem;
}

/* =========================================
   Subtle CTA Pulse Animation (elegant)
   ========================================= */

@keyframes ashPulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(201, 162, 77, 0.12);
  }

  50% {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(201, 162, 77, 0.22);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(201, 162, 77, 0.12);
  }
}

/* Nur für Primary CTA */
.btn-primary {
  animation: ashPulse 3.2s ease-in-out infinite;
}