/* ==========================================================================
   bmd-ratgeber-kontakt.css — Sektionen des Ratgeber-Artikels und der
   Kontaktseite. Stand 02.09.2026

   bmd-site.css und bmd-unterseiten.css bleiben unangetastet. Hier steht nur,
   was tpl-ratgeber-website-kosten.html und tpl-kontakt-und-systemseiten.html
   ueber die Startseite und die Leistungsseiten hinaus mitbringen.

   Reihenfolge im TypoScript:
   bmd-fonts -> bmd-tokens -> bmd-site -> bmd-unterseiten -> bmd-ratgeber-kontakt

   ZWEI BEWUSSTE ABWEICHUNGEN VON DEN VORLAGEN, beide unvermeidbar, weil hier
   ein Stylesheet gilt, wo die Vorlagen zwei getrennte Blaetter waren:

   1) Modifikatoren .hero-article / .hero-contact.
      Beide Vorlagen benutzen .hero und .hero-grid, definieren sie aber je
      anders (Artikel: kein Bild, Sprungmarken rechts; Kontakt: Formular
      rechts, oben angesetzt). Ohne Modifikator wuerde die letzte Definition
      die Startseiten-Buehne aus bmd-site.css ueberschreiben. Die
      Basisregeln (.hero, .wm, .w, .w-mark, .hero-kick, .hero-sub) sind in
      allen drei Blaettern zeichengleich und werden hier NICHT wiederholt.

   2) .way ist in beiden Vorlagen vergeben — im Artikel als breites Band der
      Zwei-Wege-Buehne, auf der Kontaktseite als Kachel der direkten Wege
      (dort immer zusammen mit .svc). Deshalb sind die Artikel-Regeln unter
      .ways gebunden und die Kontakt-Regeln an .svc.way. Die Klassen im
      Markup bleiben dadurch exakt die der Vorlagen.
   ========================================================================== */


/* ==========================================================================
   1 · Sprungziele — steht seit dem 04.09.2026 in bmd-site.css
   Diese Datei laedt seit dem Technik-Durchgang nicht mehr auf der Startseite
   und den zwoelf Projektseiten; die Regel fehlte dort und liess #inhalt unter
   der Kopfleiste landen. Sie gehoert deshalb in die Datei, die ueberall laedt.
   ========================================================================== */


/* ==========================================================================
   2 · Artikel-Kopf — Buehne ohne Bild, Sprungmarken rechts
   ========================================================================== */
.hero-article .hero-grid{
  display:grid; gap:clamp(2.25rem, 5vw, 3.75rem);
  padding-block:clamp(2.75rem, 6vw, 4.75rem) clamp(2.75rem, 5vw, 4.25rem);
  min-height:0;
  align-content:center;
}
.hero-article{
  background:
    radial-gradient(105% 80% at 85% 4%, oklch(0.33 0.058 195 / 0.5), transparent 62%),
    var(--tinte-deep);
}
.hero-article .hero-copy{ gap:1.5rem; }
.hero-article h1{
  font-size:clamp(2.35rem, 5.6vw, 4.15rem);
  max-width:13em;
}
.hero-article .hero-sub{ max-width:34rem; color:oklch(0.975 0.006 190 / 0.84); }

/* Brotkrumen des Artikels: geordnete Liste mit Strich-Trennern. Der
   Seiten-Held der Leistungsseiten benutzt dieselbe Klasse mit anderem
   Markup — deshalb haengen diese Regeln an .hero-article. */
.hero-article .crumbs{ display:block; color:inherit; letter-spacing:normal; text-transform:none; }
.hero-article .crumbs ol{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0.65rem;
  font:600 var(--fs-kick)/1.4 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
}
.hero-article .crumbs li{ display:flex; align-items:center; gap:0.65rem; }
.hero-article .crumbs li + li::before{
  content:""; width:0.9rem; height:1px; flex:none;
  background:oklch(0.975 0.006 190 / 0.35);
}
.hero-article .crumbs a{ color:inherit; text-decoration:none; }
.hero-article .crumbs a:hover{ color:inherit; text-decoration:underline; text-underline-offset:0.35em; }
.hero-article .crumbs [aria-current]{ color:oklch(0.975 0.006 190 / 0.6); }

/* Zeile mit Lesezeit, Stand und Autor — die Redaktionsangaben eines Artikels */
.hero-meta{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:0.4rem 1.4rem;
  padding-top:1.15rem; width:100%; max-width:44rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
  font-size:var(--fs-s); color:oklch(0.975 0.006 190 / 0.66);
  font-variant-numeric:tabular-nums;
}
.hero-meta li{ display:flex; align-items:center; gap:0.55rem; }
.hero-meta li::before{
  content:""; width:0.35rem; height:0.35rem; border-radius:50%;
  background:var(--mint-hell); flex:none; opacity:0.8;
}
.hero-meta a{ color:oklch(0.975 0.006 190 / 0.9); text-decoration:none; font-weight:600; }
.hero-meta a:hover{ color:var(--mint-hell); }

/* Sprungmarken: fuehren durch einen langen Text, ohne ihn zu zerhacken */
.hero-aside{ width:100%; }
.hero-article .hero-aside{ align-self:center; }
.toc{
  border:1px solid oklch(0.975 0.006 190 / 0.18);
  border-radius:var(--radius);
  background:oklch(0.975 0.006 190 / 0.045);
  padding:clamp(1.35rem, 2.6vw, 1.9rem);
}
.toc-h{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell); margin-bottom:0.9rem;
}
.toc ol{ list-style:none; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{
  display:flex; gap:0.85rem; align-items:baseline;
  padding-block:0.6rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.12);
  color:oklch(0.975 0.006 190 / 0.82);
  text-decoration:none; font-size:var(--fs-s); line-height:1.4;
}
.toc li:first-child a{ border-top:0; padding-top:0; }
.toc a::before{
  content:counter(toc, decimal-leading-zero);
  color:var(--mint-hell); opacity:0.7; font-weight:600;
  font-variant-numeric:tabular-nums; flex:none;
}
.toc a:hover{ color:var(--mint-hell); }

@media (min-width:900px){
  .hero-article .hero-grid{ grid-template-columns:1.3fr 0.7fr; align-items:center; }
  .hero-meta{ grid-column:1 / -1; }
}

/* Lese-Fortschritt: 2px Mint unter der Leiste, rein per Scroll-Timeline.
   Ohne Browser-Unterstuetzung bleibt der Balken auf scaleX(0) — unsichtbar,
   kein JS, kein Layout-Einfluss. */
.read-bar{
  position:fixed; left:0; right:0; top:calc(var(--head-h) + 1px);
  height:2px; z-index:99; pointer-events:none;
  background:var(--mint-hell);
  transform:scaleX(0); transform-origin:0 50%;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .read-bar{ animation:readBar linear both; animation-timeline:scroll(root block); }
    @keyframes readBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  }
}

/* Der Auftakt der Startseite bewegt .hero-copy, .hero-media und .hero-proof.
   Hier treten stattdessen die Sprungmarken und die Redaktionszeile auf. */
@media (prefers-reduced-motion: no-preference){
  .js .hero-aside, .js .hero-meta{
    opacity:0; transform:translateY(22px);
    animation:fadeUp 0.9s var(--eq) forwards; animation-delay:var(--d, 0s);
  }
}
@media (prefers-reduced-motion: reduce){
  .js .hero-aside, .js .hero-meta{ opacity:1; transform:none; animation:none; }
}


/* ==========================================================================
   3 · Fliesstext-Bausteine des Artikels
   ========================================================================== */
.prose p{ max-width:37rem; }          /* ergibt 65–75 Zeichen bei 17px */
.prose p + p{ margin-top:1.15rem; }
/* Bewusst nur Links IM Fliesstext — Kacheln und Kontaktzeilen behalten ihre
   eigene Auszeichnung und werden nicht unterstrichen. */
.prose p a:not(.arrow-link),
.prose .myth-list a:not(.arrow-link),
.prose .checks a:not(.arrow-link){
  color:var(--mint-tief); text-decoration:underline;
  text-underline-offset:0.25em; text-decoration-thickness:1px;
}
/* auf den dunklen Buehnen leuchtet dieselbe Auszeichnung in Mint-hell */
.myth p a:not(.arrow-link),
.myth .myth-list a:not(.arrow-link),
.ways p a:not(.arrow-link){ color:var(--mint-hell); }

/* Haekchen-Symbol. In den Vorlagen ein <symbol> mit <use>; im TYPO3-Ausbau
   liegt der Pfad direkt im <svg> jedes Punktes — mehrere Content-Elemente auf
   einer Seite duerften sonst dieselbe id ein zweites Mal vergeben. */
.ico{ width:1.1rem; height:1.1rem; flex:none; }


/* ==========================================================================
   4 · Antwort-Kapsel — die kurze Antwort steht vor dem langen Text
   ========================================================================== */
.answer{ padding-block:var(--sec-y) clamp(2.5rem, 5vw, 3.5rem); }
.answer-panel{
  display:grid; gap:0.9rem; max-width:46rem;
  background:var(--paper); /* Fallback */
  background:color-mix(in oklab, var(--sand) 46%, var(--paper));
  border:1px solid oklch(0.300 0.050 196 / 0.14);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.4vw, 2.9rem);
  box-shadow:0 18px 46px oklch(0.300 0.050 196 / 0.1);
}
.answer-panel h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); }
.answer-panel p{
  font-size:clamp(1.08rem, 1.7vw, 1.3rem); line-height:1.55;
  max-width:34rem;
}


/* ==========================================================================
   5 · Faktoren — Outline-Ziffern, Zeilen statt Kartenraster
   ========================================================================== */
.factors-sec{ padding-block:clamp(2.5rem, 5vw, 3.5rem) var(--sec-y); }
.factors{ list-style:none; display:grid; }
.factor{
  display:grid; grid-template-columns:minmax(3.4rem, 5rem) 1fr;
  gap:clamp(1rem, 3vw, 2.25rem); align-items:start;
  padding-block:clamp(1.4rem, 3vw, 2.1rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
}
.factor:last-child{ border-bottom:1px solid oklch(0.300 0.050 196 / 0.16); }
.factor-num{
  font-family:var(--fd); font-weight:800; line-height:0.86;
  font-size:clamp(2.4rem, 5.5vw, 3.6rem);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
  color:oklch(0.300 0.050 196 / 0.22);
}
@supports (-webkit-text-stroke: 1px red){
  .factor-num{ color:transparent; -webkit-text-stroke:1.5px oklch(0.42 0.064 194 / 0.5); }
  .factor:nth-child(2n) .factor-num{ -webkit-text-stroke-color:var(--mint-tief); }
}
.factor h3{ margin-bottom:0.35rem; }
/* einspaltig auch auf grossen Schirmen: zwei Spalten wuerden die Zeilen auf
   rund 50 Zeichen druecken — der Fliesstext soll bei 65–75 bleiben. */
.factor p{ max-width:37rem; }
@media (min-width:900px){
  .factor{ grid-template-columns:minmax(4.5rem, 8rem) 1fr; }
  .factor-num{ font-size:clamp(3rem, 6.5vw, 4.6rem); }
}


/* ==========================================================================
   6 · Merksatz-Buehne — dunkle Zwischenflaeche mit Liste und Pull-Quote
   ========================================================================== */
.myth{
  padding-block:var(--sec-y);
  background:
    radial-gradient(100% 80% at 12% 0%, oklch(0.31 0.055 195 / 0.5), transparent 60%),
    var(--tinte-deeper);
}
.myth h2{ color:var(--paper); }
.myth p{ color:oklch(0.975 0.006 190 / 0.82); }
.myth-grid{ display:grid; gap:clamp(2rem, 4vw, 3.25rem); align-items:start; }
.myth-list{ list-style:none; display:grid; gap:1.15rem; max-width:37rem; }
.myth-list li{ position:relative; padding-left:1.6rem; color:oklch(0.975 0.006 190 / 0.82); }
.myth-list li::before{
  content:""; position:absolute; left:0; top:0.72em;
  width:0.8rem; height:2px; border-radius:1px;
  background:var(--mint-hell); opacity:0.85;
}
.myth-list strong{ color:var(--paper); font-weight:650; }
.myth .pull{
  font-family:var(--fd); font-weight:650;
  font-size:clamp(1.35rem, 2.5vw, 1.95rem); line-height:1.22;
  letter-spacing:-0.012em;
  color:var(--mint-hell); max-width:20em;
  border-top:1px solid oklch(0.975 0.006 190 / 0.18);
  padding-top:1.35rem;
}
@media (min-width:900px){
  .myth-grid{ grid-template-columns:1.05fr 0.95fr; }
}


/* ==========================================================================
   7 · Zwei Wege — zwei bewusst ungleiche Baender
   ========================================================================== */
.ways{
  padding-block:var(--sec-y);
  background:
    radial-gradient(110% 85% at 88% 100%, oklch(0.33 0.058 195 / 0.55), transparent 62%),
    var(--tinte-deep);
}
.ways h2{ color:var(--paper); }
.ways .lead{ color:oklch(0.975 0.006 190 / 0.82); }
.ways-grid{ display:grid; gap:clamp(1rem, 2.2vw, 1.5rem); align-items:start; }
/* Zwei Baender statt zweier schmaler Karten: nebeneinander gestellt fiele der
   Fliesstext auf rund 50 Zeichen. Untereinander bleibt der Vergleich intakt —
   gleiche Form, unterschiedliche Behandlung — und die Zeilen stimmen. */
.ways .way{
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.4vw, 2.85rem);
  display:grid; gap:1.35rem; align-content:start;
}
.way-copy{ display:grid; gap:0.9rem; }
@media (min-width:900px){
  .ways .way{
    grid-template-columns:1.2fr 0.8fr;
    column-gap:clamp(2rem, 4vw, 3.5rem);
    align-items:start;
  }
  .fit{ border-top:0; padding-top:0; margin-top:0.35rem; }
}
.way-a{
  background:oklch(0.975 0.006 190 / 0.055);
  border:1px solid oklch(0.975 0.006 190 / 0.16);
}
.way-b{
  background:
    linear-gradient(168deg, oklch(0.40 0.062 194 / 0.85), oklch(0.33 0.056 196 / 0.9)),
    var(--petrol-deep);
  border:1px solid oklch(0.700 0.130 182 / 0.4);
}
.way-kick{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell);
  font-variant-numeric:tabular-nums;
}
.ways .way h3{ color:var(--paper); font-size:clamp(1.4rem, 2.3vw, 1.85rem); }
.ways .way p{ color:oklch(0.975 0.006 190 / 0.85); max-width:37rem; }
.fit{
  list-style:none; display:grid; gap:0.6rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.18);
  padding-top:1.15rem; margin-top:0.25rem;
  font-size:var(--fs-s); line-height:1.5;
  color:oklch(0.975 0.006 190 / 0.85);
}
.fit li{ display:grid; grid-template-columns:auto 1fr; gap:0.7rem; align-items:start; }
.fit .ico{ color:var(--mint-hell); margin-top:0.18em; }
.ways-note{
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top:1.35rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
  color:oklch(0.975 0.006 190 / 0.8);
  max-width:44rem;
}
.ways-note strong{ color:var(--mint-hell); font-weight:650; }


/* ==========================================================================
   8 · Pruefliste und eigene Hebel — auf der Licht-Buehne
   ========================================================================== */
.fair{ padding-block:var(--sec-y) clamp(2.75rem, 5vw, 3.75rem); }
.checks{ list-style:none; display:grid; gap:1.15rem; max-width:44rem; }
.check{ display:grid; grid-template-columns:auto 1fr; gap:0.9rem; align-items:start; }
.check .ico{ color:var(--mint-tief); margin-top:0.28em; }
.check p{ max-width:36rem; }
.check strong{ font-weight:650; color:var(--tinte); }

.levers-sec{ padding-block:clamp(2.75rem, 5vw, 3.75rem) var(--sec-y); }
.levers{ list-style:none; display:grid; gap:clamp(1.5rem, 3vw, 2.25rem); }
.lever{
  border-top:2px solid oklch(0.300 0.050 196 / 0.16);
  padding-top:1.15rem; display:grid; gap:0.5rem; align-content:start;
}
.lever h3{ font-size:1.2rem; }
.lever p{ font-size:var(--fs-s); line-height:1.6; max-width:30rem; }
@media (min-width:900px){
  .levers{ grid-template-columns:repeat(2, 1fr); column-gap:clamp(2rem, 4vw, 4rem); }
}


/* ==========================================================================
   9 · Autoren-Kasten
   In der Vorlage steht er als <aside> IM Hebel-Abschnitt. In TYPO3 ist er ein
   eigenes Content-Element und damit eine eigene Sektion — sonst haette der
   Redakteur ihn nicht ohne Entwickler an eine andere Stelle setzen koennen.
   Damit die Optik gleich bleibt, gibt der vorangehende Abschnitt seinen
   unteren Abstand ab; der Kasten bringt Trennlinie und Abstand selbst mit.
   ========================================================================== */
.author-sec{ padding-block:0 var(--sec-y); }
.levers-sec:has(+ .author-sec),
.fair:has(+ .author-sec){ padding-bottom:0; }
.author{
  display:grid; gap:1.5rem; align-items:center;
  margin-top:clamp(2.75rem, 5vw, 4rem);
  padding-top:clamp(2rem, 4vw, 3rem);
  border-top:1px solid oklch(0.300 0.050 196 / 0.16);
}
.author-fig{
  margin:0; width:clamp(6rem, 16vw, 8.5rem); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
}
.author-fig img{ width:100%; height:100%; object-fit:cover; object-position:52% 26%; }
.author-copy{ display:grid; gap:0.9rem; }
.author-copy p{ max-width:37rem; }
@media (min-width:768px){
  .author{ grid-template-columns:auto 1fr; gap:clamp(1.5rem, 3vw, 2.5rem); }
}


/* ==========================================================================
   10 · Weiterlesen — schmale Leiste am Fuss der Abschluss-Buehne
   ========================================================================== */
.related{
  margin-top:clamp(3rem, 6vw, 4.5rem);
  padding-top:clamp(1.75rem, 3.5vw, 2.5rem);
  border-top:1px solid oklch(0.975 0.006 190 / 0.16);
}
.related h2{
  font:600 var(--fs-kick)/1.3 var(--fb);
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--mint-hell); margin-bottom:1.1rem;
}
.rel-grid{ display:grid; gap:0.75rem; }
.rel{
  display:grid; gap:0.3rem; align-content:start;
  padding:1.1rem 1.25rem;
  border:1px solid oklch(0.975 0.006 190 / 0.16);
  border-radius:14px; text-decoration:none;
  transition:transform 0.3s var(--eq), border-color 0.3s var(--eq), background-color 0.3s var(--eq);
}
.rel:hover{
  transform:translateY(-3px);
  border-color:var(--mint-hell);
  background:oklch(0.975 0.006 190 / 0.05);
}
.rel-t{
  font-family:var(--fd); font-weight:650; font-size:1.05rem;
  color:var(--paper);
  display:flex; align-items:center; gap:0.5rem;
}
.rel:hover .arr{ transform:translateX(4px); }
.rel .arr{ transition:transform 0.3s var(--eq); color:var(--mint-hell); }
.rel-d{ font-size:var(--fs-s); line-height:1.5; color:oklch(0.975 0.006 190 / 0.68); }
@media (min-width:900px){
  .rel-grid{ grid-template-columns:repeat(3, 1fr); }
}


/* ==========================================================================
   11 · Kontakt-Buehne — links die Zusage, rechts das Formular
   Kein Bild: auf einer Anfrageseite ist das Formular die Buehne, nicht die
   Fotografie. Deshalb startet der Hero oben statt mittig.
   ========================================================================== */
.hero-contact .hero-grid{
  padding-block:clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  min-height:calc(62dvh - var(--head-h));
  align-content:start;
}
.hero-contact .hero-copy{ gap:1.4rem; }

/* Erwartungsmanagement gehoert VOR das Formular, nicht in die Fussnote. */
.hero-promise{
  list-style:none; display:grid; gap:0.7rem;
  max-width:32rem; margin-top:0.2rem; padding-top:1.35rem;
  border-top:1px solid oklch(0.975 0.006 190 / 0.14);
  font-size:var(--fs-s); color:oklch(0.975 0.006 190 / 0.78);
}
.hero-promise li{
  display:grid; grid-template-columns:auto 1fr; gap:0.7rem; align-items:start;
}
.hero-promise li::before{
  content:""; width:0.45rem; height:0.45rem; border-radius:50%; flex:none;
  background:var(--mint-hell); margin-top:0.6em;
}
.hero-promise strong{ color:var(--paper); font-weight:650; }

.hero-contact .hero-aside{ position:relative; }

/* Formular-Panel: eine Stufe heller als die Buehne, damit die Felder eine
   eigene Flaeche bekommen, ohne den dunklen Grundton zu verlassen. */
.form-panel{
  background:oklch(0.975 0.006 190 / 0.045);
  border:1px solid oklch(0.975 0.006 190 / 0.16);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 3.2vw, 2.3rem);
  box-shadow:0 24px 60px oklch(0.14 0.025 198 / 0.35);
  scroll-margin-top:calc(var(--head-h) + 1.5rem);
}
.form-panel > .kick{ margin-bottom:1.2rem; }
.form-panel:focus-visible{ outline:2px solid var(--mint-hell); outline-offset:4px; }

/* Datenschutzhinweis. In der Vorlage das letzte Kind des <form>; EXT:form
   rendert das Formular selbst, der Hinweis steht deshalb als Geschwister
   direkt darunter und holt sich den Zeilenabstand des Grids nach.
   .form-note und .form-note a sind am 03.09.2026 nach bmd-site.css gewandert:
   der Hinweis steht seit der Freigabe auch im Block closing, und der laeuft
   auf der Startseite und den zwoelf Projektseiten OHNE diese Datei. Hier
   bleibt nur, was allein den Ratgeber-/Kontakt-Kontext betrifft. */
.form-panel > .form-note{ margin-top:1.2rem; }

.form-ok{ text-align:left; }
.ok-mark{
  display:grid; place-items:center; width:2.6rem; height:2.6rem;
  border-radius:50%; border:1px solid oklch(0.700 0.130 182 / 0.5);
  color:var(--mint-hell); margin-bottom:0.4rem;
}
.form-ok a{ color:var(--mint-hell); font-weight:600; text-decoration:none; }
.form-ok a:hover{ text-decoration:underline; text-underline-offset:0.25em; }

@media (min-width:768px){
  .hero-contact .hero-grid{ grid-template-columns:1.02fr 0.98fr; align-items:start; }
}
@media (min-width:1140px){
  .hero-contact .hero-grid{ grid-template-columns:1.06fr 0.94fr; gap:clamp(3rem, 5vw, 5rem); }
}


/* ==========================================================================
   12 · Direkte Wege — dieselbe ungleiche Rhythmik wie die Leistungsbloecke
   Die Kacheln sind Leistungs-Kacheln (.svc) mit eigenem Anstrich. Deshalb
   haengen die Regeln an .svc.way und nicht am blanken .way des Artikels.
   ========================================================================== */
/* Die Kontaktseite setzt den unteren Abstand kuerzer als die Leistungsseite.
   Erkannt wird sie an ihren eigenen Kacheln — dafuer braucht der Block kein
   zusaetzliches Feld, und tt_content keine zusaetzliche Spalte. */
.services:has(.way--tel), .ways-sec{ padding-block:var(--sec-y) clamp(3rem, 7vw, 5.5rem); }
.svc.way h3{ font-size:clamp(1.35rem, 2.4vw, 1.85rem); overflow-wrap:anywhere; }
@media (max-width:400px){
  /* Auf sehr schmalen Geraeten bricht die Adresse hinter dem Bindestrich um */
  .svc.way h3{ font-size:1.25rem; }
}
.svc.way h3 a{ font-variant-numeric:tabular-nums; }
.way--tel{ background:var(--dunst); }
.way--mail{ background:transparent; border:1px solid oklch(0.300 0.050 196 / 0.2); }
.way--adr{ background:var(--sand); }
.way--zeit{ background:var(--petrol-deep); color:var(--paper); --focus:var(--mint-hell); }
.way--zeit h3{ color:var(--paper); }
.way--zeit p{ color:oklch(0.975 0.006 190 / 0.85); }
.way--zeit .svc-kick{ color:var(--mint-hell); }
/* Das Zeichen folgt dem Kicker: Tiefmint waere auf der dunklen Kachel
   kaum zu sehen. */
.way--zeit .svc-ico{ color:var(--mint-hell); }
@media (min-width:768px){
  .way--tel{ grid-column:span 7; min-height:15rem; }
  .way--mail{ grid-column:span 5; min-height:15rem; }
  .way--adr{ grid-column:span 5; min-height:13rem; }
  .way--zeit{ grid-column:span 7; min-height:13rem; align-content:end; }
}


/* ==========================================================================
   13 · Nachtraege
   ========================================================================== */
/* Eine einzelne Leistungs-Kachel — etwa die Artikelkarte des Ratgeber-Hubs —
   soll die volle Breite nehmen. Ohne diese Regel bliebe sie auf sieben von
   zwoelf Spalten stehen und die halbe Zeile leer. */
@media (min-width:768px){
  .svc-grid > .svc:only-child{ grid-column:1 / -1; min-height:0; }
}