/* APART GO 25 – farbenfrohes, modernes Business-Design:
   klares Weiß, Anthrazit, Logo-Limette plus Pop-Akzente vom Welcome-Mural. */

:root {
  --creme: #fafbf8;
  --weiss: #ffffff;
  --tinte: #23272e;          /* Anthrazit wie die Fassade */
  --dezent: #6b7280;
  --linie: #e4e7e2;
  --pop-gelb: #f5b301;
  --pop-rot: #e2434b;
  --pop-blau: #2779c4;
  --serif: "Inter", -apple-system, sans-serif;   /* bewusst serifenlos: Business */
  --schatten: 0 8px 26px rgba(35, 39, 46, .10);
}

/* Typografie: kompakte, kräftige Grotesk statt Serifen */
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.kicker { letter-spacing: .22em; }
.hero h1 { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hero-slogan { font-family: var(--sans); font-style: normal; font-weight: 500; }
.preis { font-family: var(--sans); font-weight: 700; }
.marke span { font-family: var(--sans); font-weight: 800; }
.gastgeber-portrait figcaption { font-family: var(--sans); font-weight: 600; }

/* Farbige Zielgruppen-Karten (Pop-Akzente vom Welcome-Mural) */
.merkmal { border-top: 4px solid var(--akzent); }
.merkmal-2 { border-top-color: var(--pop-gelb); }
.merkmal-3 { border-top-color: var(--pop-rot); }
.merkmal-4 { border-top-color: var(--pop-blau); }

/* Business-Karten */
.business-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                   gap: 1.4rem; margin-top: 2.2rem; text-align: left; }
.business-karte { background: var(--tinte); color: #eef1f4; border-radius: 18px;
                  padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
                  gap: .4rem; }
.business-karte h3 { color: #fff; }
.business-karte .knopf { margin-top: auto; align-self: flex-start;
                         background: var(--akzent); color: #1c2208; border: none; }
.business-karte .knopf:hover { background: var(--pop-gelb); color: var(--tinte); }

/* Whats-On mit farbiger Zeit-Marke */
.whatson { border-left: 5px solid var(--akzent); }
.whatson:nth-child(2) { border-left-color: var(--pop-gelb); }
.whatson:nth-child(3) { border-left-color: var(--pop-rot); }

/* Routen-Karten mit dezentem Rahmen */
.route { border-top: 4px solid var(--akzent); }

/* Knöpfe: kräftig, modern */
.knopf { border-radius: 10px; letter-spacing: .12em; }
.knopf-dunkel:hover { background: var(--akzent); color: #1c2208; }

/* Hero-Verlauf etwas kühler/staedtischer */
.hero::after {
  background: linear-gradient(180deg, rgba(20, 24, 30, .45) 0%,
              rgba(20, 24, 30, .10) 45%, rgba(20, 24, 30, .60) 100%);
}

/* Footer: Anthrazit mit Limette-Linie */
.fuss { background: var(--tinte); }
.fuss-zeile { border-top-color: rgba(148, 179, 14, .4); font-style: normal;
              font-weight: 600; letter-spacing: .08em; }