/* ============================================================================
   pages/service.css — Layer 3 · Page 51 (/service/)
   Scope:   body#s-51  (Seite trägt zusätzlich .is-relaunch)
   Prefix:  sv-
   Zweck:   Service-Teaser-Grid auf den LIVE-Relaunch-Look bringen
            (Inter · Grün-Grau · weiße Cards · Pill-Buttons · Sentence Case) —
            konsistent mit /aktuelles/.
   Ersetzt: den ad-hoc `body#s-51`-Block aus temp.css (beim Deploy entfernt).
   v5-ready: Fallback-Token-Kette (--forest → --green-800 …).
   Erstellt: 2026-07-28
   ============================================================================ */

body#s-51 {
  --sv-primary:     var(--forest,      var(--green-800));   /* #1B3C34 */
  --sv-primary-mid: var(--forest-mid,  var(--green-700));
  --sv-surface:     var(--white,       #ffffff);
  --sv-border:      var(--cream-3,     var(--gray-200));    /* #E5E7EB */
  --sv-ink:         var(--ink,         var(--gray-950));    /* #0A0A0B */
  --sv-body:        var(--muted,       var(--gray-600));    /* #4B5563 */
  --sv-accent:      var(--accent-warm, var(--accent));      /* Coral heute → Copper später */
  --sv-radius:      var(--radius-lg,   16px);
}

/* Seiten-BG aus .is-relaunch body (#f5f5f7). */

/* =========================================================================
   1) INTRO  — "Unser Service für dich!"
   ========================================================================= */
body#s-51 section:first-of-type h3 {
  text-transform: none;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sv-ink);
  margin: 0 0 16px;
}
body#s-51 section:first-of-type p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--sv-body);
  max-width: 860px;
}

/* =========================================================================
   2) TEASER-KARTEN  (.teaser-box.var0.bc-grey)
   ========================================================================= */
/* Gleiche Kartenhöhe pro Zeile: Theme-Float → Flex (Karten strecken sich).
   NUR Teaser-Zeilen (:has(.teaser-box)) — sonst würde die Regel Intro-Spalte
   und Footer treffen (Intro: Text neben statt unter H3; Footer: komprimiert). */
body#s-51 .row:has(.teaser-box) { display: flex; flex-wrap: wrap; align-items: stretch; }
body#s-51 .row:has(.teaser-box) > .col { display: flex; }

body#s-51 .teaser-box.bc-grey {
  background: var(--sv-surface) !important;   /* schlägt globale temp.css-Regel .teaser-box.bc-grey{#f0f9f4 !important} */
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* Grid: Titel oben (volle Breite), darunter Bild links + Text rechts;
     Textspalte füllt die Resthöhe → Button per margin-top:auto am Kartenboden. */
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
}
/* kein Hover-Effekt auf den Karten (bewusst statisch) */

/* Grid-Platzierung der Kachel-Teile (Theme-Floats aufheben) */
body#s-51 .teaser-box h3 { grid-column: 1 / -1; }
body#s-51 .teaser-box-img {
  float: none;
  width: auto;
  align-self: start;
}
body#s-51 .teaser-box-con {
  float: none;
  width: auto;
  padding-left: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;   /* garantierter Mindestabstand Text → Button, auch bei text-gefüllten Karten */
}

/* Kachel-Überschrift: Sentence Case (Theme erzwang uppercase), dunkel */
body#s-51 .teaser-box h3 {
  text-transform: none;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sv-ink);
  margin: 0 0 18px;
}
body#s-51 .teaser-box h3 + p { text-transform: none; }

/* Bild abgerundet */
body#s-51 .teaser-box-img.corner img { border-radius: 12px; }

/* Fließtext + Inline-Links */
body#s-51 .teaser-box-con p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sv-body);
  margin: 0;   /* Abstände regelt der flex-gap der Spalte */
}
body#s-51 .teaser-box-con p > a {
  color: var(--sv-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Button → Pill im Relaunch-Stil — gilt für ALLE .contentbutton der Seite
   (Kachel-Buttons + unterer "Zurück zur Übersicht"-Button im .buttonblock) */
body#s-51 .contentbutton {
  display: inline-block;
  float: none;
  min-width: 0;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--sv-primary);
  color: #fff;
  border: 2px solid var(--sv-primary);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
body#s-51 .contentbutton:hover {
  background: #fff;                    /* Inversion auf Weiß (Theme-Standard) */
  color: var(--sv-primary);
  border-color: var(--sv-primary);
  text-decoration: none;               /* kein Link-Unterstrich im Hover */
  box-shadow: var(--shadow-md);
}
/* In den Karten zusätzlich an den unteren Kartenrand pinnen */
body#s-51 .teaser-box .contentbutton { margin: auto 0 0; align-self: flex-start; }

/* =========================================================================
   3) Responsive — Kachel einspaltig, Button bleibt am Boden
   ========================================================================= */
@media (max-width: 767px) {
  body#s-51 .teaser-box.bc-grey { grid-template-columns: 1fr; padding: 22px; }
  body#s-51 .teaser-box-con { margin-top: 14px; }
}