/* ============================================================
   DENTIN (Version 2) – Ergänzungen zu main.css
   main.css wird immer als Basis geladen, diese Datei danach (siehe
   KONZEPT, Paket 6). Abschnitte in dieser Reihenfolge:
   1. Versions-Hooks (.section--NAME-dentin, ehemals in main.css)
   2. Seitentypen (ehemals css/layouts/{typ}-2.css)
   3. Header (ehemals css/headers/header-2.css)
   4. Footer (ehemals css/footers/footer-2.css)
   Seitentyp-Regeln sind mit :where(.dv-<typ>) auf ihren Seitentyp begrenzt.
   ============================================================ */

/* ============================================================
   1. VERSIONS-HOOKS
   ============================================================ */

.section--galerie-dentin .container {
  text-align: center;
}

@media (min-width: 1280px) {
  .section--alt.section--about-dentin {
    padding-bottom: 0;
  }
}

.section--kontakt-hero-dentin {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.section--kontakt-hero-dentin .page-hero__text {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--gap-md);
}

.section--white.section--kontakt-split-dentin {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   2. SEITENTYPEN
   ============================================================ */

/* ------------------------------------------------------------
   Kontakt (ehemals css/layouts/kontakt-2.css)
   ------------------------------------------------------------ */

/* ============================================================
   KONTAKT – VARIANTE 2 (page-kontakt-2.php)
   War bisher eine reine Kopie der Basis ohne eigenes CSS (siehe
   conventions.md → Kontaktmöglichkeiten-Karten). Einziger Unterschied:
   abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster. Scope über "main" statt sitewide, damit Header/
   Footer-Buttons unangetastet bleiben (Header-2/Footer-2 haben dafür
   ihre eigene CSS-Datei).
   ============================================================ */

:where(.dv-kontakt) main {
  --radius-btn: 2rem;
}

/* Textblock des Heros: 75 % der Spaltenbreite, höchstens 1000px; Untergrenze
   28rem bzw. volle Breite auf dem Handy. Nur bei Dentin (diese Datei wird nur
   auf der Dentin-Kontaktseite geladen) – alle anderen Versionen:
   .page-hero__text width: 100% (main.css). */
.section--kontakt-hero-dentin .page-hero__text {
  width: clamp(min(100%, 28rem), 75%, 1000px);
}

/* ------------------------------------------------------------
   Leistungen (ehemals css/layouts/leistungen-2.css)
   ------------------------------------------------------------ */

/* ============================================================
   LEISTUNGEN – VARIANTE 2 (page-leistungen-2.php)
   Hero: .page-hero__text bleibt bei allen Breiten flex/column (kein
   Umschalten auf Grid ab 768px wie bei .section--leistungen-hero).
   Die übrigen Page-Hero-Regeln (Bild-Aspect-Ratio, Letterbox ab 1133px)
   sind hier erneut deklariert, weil main.css sie
   exklusiv an die Hooks .section--leistungen-hero-/ueberuns-hero-/
   notfall-hero-{enamel,veneer,inlay} bindet – nach dem Umbenennen der Section-Klasse
   auf section--leistungen-hero-dentin greifen sie sonst nicht mehr.
   ============================================================ */

/* Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster (siehe conventions.md → Abgerundete Buttons). Scope
   über "main" statt sitewide, damit Header/Footer-Buttons unangetastet
   bleiben (Header-2/Footer-2 haben dafür ihre eigene CSS-Datei). */
:where(.dv-leistungen) main {
  --radius-btn: 2rem;
}

/* Abstand zwischen Bild und .page-hero__text läuft über gap auf dem
   Container statt margin-bottom auf dem Bild, siehe main.css → PAGE HERO. */
.section--leistungen-hero-dentin .container {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-lg);
}

.section--leistungen-hero-dentin .page-hero__image img {
  aspect-ratio: 2 / 1;
}

@media (min-width: 1133px) {
  .section--leistungen-hero-dentin .page-hero__image {
    height: 55vh;
    width: 100%;
    background-color: var(--color-bg-alt);
    min-height: 450px;
  }
}

/* Textblock des Heros: 75 % der Spaltenbreite, höchstens 1000px; Untergrenze
   28rem bzw. volle Breite auf dem Handy. Nur bei Dentin – alle anderen
   Versionen: .page-hero__text width: 100% (main.css). */
.section--leistungen-hero-dentin .page-hero__text {
  width: clamp(min(100%, 28rem), 75%, 1500px);
}

/* ------------------------------------------------------------
   Notfall (ehemals css/layouts/notfall-2.css)
   ------------------------------------------------------------ */

/* ============================================================
   NOTFALL – VARIANTE 2 (page-notfall-2.php)
   Hero: .page-hero__text bleibt bei allen Breiten flex/column (kein
   Umschalten auf Grid ab 768px wie bei .section--notfall-hero).
   Die übrigen Page-Hero-Regeln (Bild-Aspect-Ratio, Letterbox ab 1133px,
   schmalere/kleinere Absatzbreite) sind hier erneut deklariert, weil
   main.css sie exklusiv an die Hooks .section--leistungen-hero-/ueberuns-hero-/
   notfall-hero-{enamel,veneer,inlay} bindet – nach dem Umbenennen der Section-Klasse
   auf section--notfall-hero-dentin greifen sie sonst nicht mehr.
   ============================================================ */

/* Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster (siehe conventions.md → Abgerundete Buttons). Scope
   über "main" statt sitewide, damit Header/Footer-Buttons unangetastet
   bleiben (Header-2/Footer-2 haben dafür ihre eigene CSS-Datei). */
:where(.dv-notfall) main {
  --radius-btn: 2rem;
}

/* Abstand zwischen Bild und .page-hero__text läuft über gap auf dem
   Container statt margin-bottom auf dem Bild, siehe main.css → PAGE HERO. */
.section--notfall-hero-dentin .container {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-lg);
}

.section--notfall-hero-dentin .page-hero__image img {
  aspect-ratio: 2 / 1;
}

.section--notfall-hero-dentin .page-hero__text p {
  font-size: var(--text-body);
}

@media (min-width: 1133px) {
  .section--notfall-hero-dentin .page-hero__image {
    height: 55vh;
    width: 100%;
    background-color: var(--color-bg-alt);
    min-height: 450px;
  }
}

/* Textblock des Heros: 75 % der Spaltenbreite, höchstens 1000px; Untergrenze
   28rem bzw. volle Breite auf dem Handy. Nur bei Dentin – alle anderen
   Versionen: .page-hero__text width: 100% (main.css). */
.section--notfall-hero-dentin .page-hero__text {
  width: clamp(min(100%, 28rem), 75%, 1500px);
}

/* ------------------------------------------------------------
   Startseite (ehemals css/layouts/startseite-2.css)
   ------------------------------------------------------------ */

/* ============================================================
   STARTSEITE – VARIANTE 2 (page-startseite-2.php)
   Hero: Text-Block gestapelt über einem durchgehend breiten Bild, auch am
   Desktop kein Umschalten auf 2-spaltiges Grid (anders als Variante 1).
   Text-Elemente (Eyebrow/Title/Subtitle/Buttons) sind bewusst weiter
   .hero__* aus main.css – reine Typografie ohne Grid-Abhängigkeit,
   kein Grund zum Duplizieren. Das Hero-Bild nutzt ebenfalls die geteilte
   Klasse .hero__image (wie .page-hero__image bei Leistungen/Über-uns/
   Notfall) statt eines eigenen Klassennamens – die Varianten-Identität
   steckt allein in der Section-Hook-Klasse .section--hero-dentin, nicht
   zusätzlich im Klassennamen. Kollisionsfrei, weil pro Seite ohnehin nur
   eine Layout-CSS-Datei geladen wird (siehe conventions.md).
   ============================================================ */

/* Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster (siehe conventions.md → Abgerundete Buttons). Scope
   über "main" statt sitewide, damit Header/Footer-Buttons unangetastet
   bleiben (Header-2/Footer-2 haben dafür ihre eigene CSS-Datei). */
:where(.dv-startseite) main {
  --radius-btn: 2rem;
}

/* Diagonal-Streifen-Overlay über der Section, per ::before statt direkt im
   background der Section selbst, damit die vorhandene section--alt-
   Hintergrundfarbe darunter erhalten bleibt. Harte Farbstopp-Paare (gleicher
   Prozentwert zweimal hintereinander) erzeugen scharfe Kanten statt eines
   weichen Verlaufs – der mittlere, komplett transparente Bereich (10–60 %)
   lässt den Hintergrund dort unverändert durchscheinen, nur die äusseren
   Bereiche werden abgedunkelt. .container braucht deshalb position:relative
   + z-index, damit Text/Bild über dem Overlay liegen.
   Abstufungen über die relative Farb-Syntax (CSS Color 5, "hsl(from …)")
   aus var(--color-bg-alt) berechnet – reine Helligkeits-Reduktion derselben
   Farbe (Farbton/Sättigung bleiben erhalten, nur "l" sinkt), kein Schwarz
   oder sonst eine fremde Farbe wird beigemischt (anders als bei einem
   color-mix(..., black X%)-Ansatz, der bei hohen Prozentwerten optisch
   nicht mehr von reinem Schwarz unterscheidbar ist – erster Versuch, auf
   Wunsch verworfen). Reagiert automatisch auf einen Farbthema-Wechsel
   (Standard/Warm/Kühl), da --color-bg-alt pro Thema einen anderen
   Ausgangston hat; alle drei liegen bei ~91 % Helligkeit, die hier
   verwendeten Abzüge (20/35/50 Punkte) ergeben dadurch in jedem Thema
   sichtbar unterscheidbare, aber eindeutig demselben Farbton zugehörige
   Stufen.
   Ersetzt das vorherige, dezente PNG-Pattern-Overlay ("Bogenfenster") – die
   Bilddatei (css/img/pattern-bogenfenster-01.png) wird dadurch nicht mehr
   referenziert. */
.section--hero-dentin {
  position: relative;
}

.section--hero-dentin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    hsl(from var(--color-bg-alt) h s calc(l - 35)) 0%,
    hsl(from var(--color-bg-alt) h s calc(l - 35)) 10%,
    var(--color-bg-alt) 10%,
    var(--color-bg-alt) 60%,
    hsl(from var(--color-bg-alt) h s calc(l - 20)) 60%,
    hsl(from var(--color-bg-alt) h s calc(l - 20)) 70%,
    hsl(from var(--color-bg-alt) h s calc(l - 35)) 70%,
    hsl(from var(--color-bg-alt) h s calc(l - 35)) 80%,
    hsl(from var(--color-bg-alt) h s calc(l - 50)) 80%,
    hsl(from var(--color-bg-alt) h s calc(l - 50)) 100%
  );
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  animation: dentivoa-hero-dentin-wipe 1.1s ease-out;
}

/* Eingangsanimation: der Verlauf selbst "schiebt sich" beim Laden in seine
   Ruheposition, statt sofort fertig dazustehen – auf Wunsch statt des
   zunächst versuchten clip-path-Wipes (gefiel an dieser Stelle nicht, siehe
   Changelog), da der harte Schnittrand gegen die bereits diagonale
   Streifenoptik unruhig wirkte. Technik: background-size/-position werden
   gemeinsam animiert – der Endzustand (100% 100% / 0 0, identisch mit den
   Defaultwerten oben) reproduziert exakt das bestehende, unverändert
   korrekte Design; der Anfangszustand zeigt denselben Verlauf testweise
   vergrössert und verschoben, wodurch er beim Einlaufen sichtbar in Position
   "rutscht". background-repeat: no-repeat ist dabei nötig, sonst würde der
   vergrösserte Anfangszustand eine zweite, gekachelte Kopie neben der
   ersten zeigen. */
@keyframes dentivoa-hero-dentin-wipe {
  from {
    background-size: 300% 100%;
    background-position: 100% 0;
  }
  to {
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--hero-dentin::before {
    animation: none;
  }
}

.section--hero-dentin .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* Textspalte: 75 % der Containerbreite, höchstens 1000px; Untergrenze 28rem
   bzw. volle Breite auf dem Handy (siehe main-enamel.css). */
.section--hero-dentin .hero__content {
  width: clamp(min(100%, 28rem), 75%, 1500px);
}

.section--hero-dentin .hero__image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
}

/* Box mit den wechselnden Vertrauensangaben (Gestaltung in main.css, js/hero-facts.js): oben rechts im Bild. */
.section--hero-dentin .hero__facts {
  top: 1rem;
  right: 1rem;
  transition-delay: 1.8s; /* Bild-Reveal startet hier erst nach 1,1 s (siehe .reveal-clip oben) und dauert 0,7 s */
}

@media (min-width: 1024px) {
  .section--hero-dentin .hero__facts {
    top: var(--gap-lg);
    right: var(--gap-lg);
  }
}

.section--hero-dentin .hero__image img {
  width: auto;
  height: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
}

/* Bild-Clip-Reveal (sitewide .reveal-clip-System, js/scroll-reveal.js) erst
   starten, nachdem die Hintergrund-Eingangsanimation (dentivoa-hero-dentin-wipe,
   1.1s, siehe oben) fertig durchgelaufen ist – sonst laufen beide
   Animationen gleichzeitig, da der Hero beim Laden sofort im Viewport
   sitzt und der IntersectionObserver fast augenblicklich auslöst. Nur
   transition-delay überschrieben (höhere Spezifität gewinnt gegenüber dem
   impliziten transition-delay:0s aus dem .reveal-clip-Shorthand), Dauer/
   Timing-Funktion bleiben unverändert sitewide geerbt – betrifft dadurch
   ausschliesslich dieses eine Bild, nicht die übrigen .reveal-clip-Stellen
   im Projekt. */
.section--hero-dentin .hero__image img.reveal-clip {
  transition-delay: 1.1s;
}

@media (min-width: 768px) {
  .section--hero-dentin .hero__image {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1133px) {
  .section--hero-dentin .hero__image {
    width: 100%;
  }
}

/* Leistungsübersicht: Kachel-Bild als breites 2:1-Banner statt kleinem
   rundem Avatar (anders als Variante 1). Bild liegt randlos in der Karte
   (kein Padding mehr auf .leistungen__card selbst), Text/Link stattdessen
   in einem eigenen Wrapper mit eigenem Padding. */
.section--leistungen-dentin .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 768px) {
  .section--leistungen-dentin .container {
    grid-template-columns: 1fr 2fr;
  }
}

.section--leistungen-dentin .leistungen__header {
  text-align: left;
  margin-bottom: 0;
}

/* Mobil: Karten als horizontales Swipe-Carousel, analog zum bestehenden
   .leistungen-nav__inner-Muster. 88% statt 100% Kartenbreite sorgt für
   einen dauerhaften "Peek"-Effekt (Rand der nächsten Karte bleibt
   sichtbar) – Hinweis, dass hier weitergeswiped werden kann, ganz ohne
   JS/Animation. Komplett in max-width:767.98px gekapselt (statt unbedingt
   gesetzt und ab 768px wieder zurückgedreht): main.css' eigene
   Breakpoint-Stufen für .leistungen__grid können dadurch strukturell
   nicht mehr versehentlich überschrieben werden, unabhängig von
   Spezifität oder Ladereihenfolge – siehe conventions.md → CSS-Fallstricke. */
@media (max-width: 767.98px) {
  .section--leistungen-dentin .leistungen__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bis an den rechten Bildschirmrand (hebt den Innenabstand 1.5rem des .container auf; der Abstand bleibt am Ende der Reihe erhalten) */
    margin-right: -1.5rem;
    padding-right: 1.5rem;
  }

  .section--leistungen-dentin .leistungen__grid::-webkit-scrollbar {
    display: none;
  }

  .section--leistungen-dentin .leistungen__card {
    scroll-snap-align: start;
  }

  /* Keine Eingangsanimation in der Wisch-Reihe: auch der Schutz vor dem ersten Paint (html.reveal-pending, functions.php) versteckt diese Karten nicht. */
  html.reveal-pending .section--leistungen-dentin .leistungen__grid > * {
    opacity: 1;
  }
}

/* Bleibt ab 768px bewusst bei 2 Spalten statt main.css' 3-Spalten-Stufe ab
   1024px: .leistungen__grid liegt hier in der schmaleren 2fr-Containerspalte,
   3 Spalten wären zu eng. Separat von der Carousel-Regel oben, damit beide
   unabhängig voneinander lesbar/wartbar bleiben. */
@media (min-width: 768px) {
  .section--leistungen-dentin .leistungen__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section--leistungen-dentin .leistungen__card img {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-card);
  width: 100%;
  height: auto;
}

/* Ganze Karte ist jetzt selbst ein <a> (statt <div> mit innerem Link),
   gleiches Muster wie main-enamel.css/main-veneer.css. Statt des
   sitewide Text-Unterstreichen-Hovers auf .leistungen__card a wechselt
   hier stattdessen der Kartenhintergrund. */
.section--leistungen-dentin .leistungen__card {
  padding: 0;
  gap: 0;
  text-decoration: none;
  /* opacity/transform hier mit aufgeführt, nicht nur background: transition
     ist ein Shorthand, würde sonst den Scroll-Reveal-Effekt (main.css
     .reveal, js/scroll-reveal.js) auf dieser Karte komplett überschreiben
     statt zu ergänzen (Karte bliebe ohne Animation). */
  transition: background 300ms, opacity 0.5s ease-out, transform 0.5s ease-out;
}

.section--leistungen-dentin .leistungen__card:hover {
  background: var(--color-primary-dark);
}

.section--leistungen-dentin .leistungen__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: 1.5rem;
  flex-grow: 1;
}

/* "Mehr erfahren"-Span ist kein <a> mehr (siehe oben), deshalb die
   sitewide .leistungen__card a-Optik (main.css) hier repliziert. */
.section--leistungen-dentin .leistungen__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-primary-text);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Text auf Weiss beim Hover, da der Kartenhintergrund dann auf
   --color-primary-dark wechselt (sonst zu wenig Kontrast). */
.section--leistungen-dentin .leistungen__card h3,
.section--leistungen-dentin .leistungen__card p,
.section--leistungen-dentin .leistungen__card-link {
  transition: color 300ms;
}

.section--leistungen-dentin .leistungen__card:hover h3,
.section--leistungen-dentin .leistungen__card:hover p,
.section--leistungen-dentin .leistungen__card:hover .leistungen__card-link {
  color: var(--color-white);
}

/* Bewertungen: Google-Link steht jetzt unter .bewertungen__grid statt im
   Header, braucht deshalb eigene Positionierung (vorher übernahm
   .bewertungen__header { text-align: center } das automatisch). */
.section--bewertungen-dentin .bewertungen__link {
  display: block;
  text-align: center;
  margin-top: var(--gap-lg);
}

.section--bewertungen-dentin .bewertungen__card {
  border: 0.5rem solid var(--color-border);
}

/* ------------------------------------------------------------
   Über uns & Team (ehemals css/layouts/ueber-uns-2.css)
   ------------------------------------------------------------ */

/* ============================================================
   ÜBER UNS – VARIANTE 2 (page-ueber-uns-2.php)
   Hero: .page-hero__text bleibt bei allen Breiten flex/column (kein
   Umschalten auf Grid ab 768px wie bei .section--ueberuns-hero).
   Die übrigen Page-Hero-Regeln (Bild-Aspect-Ratio, Letterbox ab 1133px)
   sind hier erneut deklariert, weil main.css sie exklusiv an die Hooks
   leistungen-hero-/ueberuns-hero-/notfall-hero-{enamel,veneer,inlay}
   bindet – nach dem Umbenennen der Section-Klasse auf
   section--ueberuns-hero-dentin greifen sie sonst nicht mehr.
   ============================================================ */

/* Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   -3-Vorlagen-Muster (siehe conventions.md → Abgerundete Buttons). Scope
   über "main" statt sitewide, damit Header/Footer-Buttons unangetastet
   bleiben (Header-2/Footer-2 haben dafür ihre eigene CSS-Datei). */
:where(.dv-ueber-uns) main {
  --radius-btn: 2rem;
}

/* Abstand zwischen Bild und .page-hero__text läuft über gap auf dem
   Container statt margin-bottom auf dem Bild, siehe main.css → PAGE HERO. */
.section--ueberuns-hero-dentin .container {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gap-lg);
}

.section--ueberuns-hero-dentin .page-hero__image img {
  aspect-ratio: 2 / 1;
}

@media (min-width: 1133px) {
  .section--ueberuns-hero-dentin .page-hero__image {
    height: 55vh;
    width: 100%;
    background-color: var(--color-bg-alt);
    min-height: 450px;
  }
}

/* Textblock des Heros: 75 % der Spaltenbreite, höchstens 1000px; Untergrenze
   28rem bzw. volle Breite auf dem Handy. Nur bei Dentin – alle anderen
   Versionen: .page-hero__text width: 100% (main.css). */
.section--ueberuns-hero-dentin .page-hero__text {
  width: clamp(min(100%, 28rem), 75%, 1500px);
}

/* ============================================================
   3. HEADER
   ============================================================ */

/* ============================================================
   HEADER – VARIANTE 2 (header-2.php)
   Abgerundete Buttons statt des sitewide kantigen Designs, analog zum
   bestehenden -3-Vorlagen-Muster (siehe conventions.md → Abgerundete
   Buttons in allen -3-Vorlagen). --radius-btn wird sitewide von jedem
   Button referenziert (.btn-primary/.btn-secondary etc.) – hier für den
   ganzen Header auf 2rem umdefiniert statt jede Button-Klasse einzeln
   zu überschreiben.
   ============================================================ */

.nav--dentin {
  --radius-btn: 2rem;
}

/* Nur Dentin: Menüpunkte im mobilen Menü zentriert statt linksbündig
   (sitewide main.css-Standard für .nav__mobile-links a). */
.nav--dentin .nav__mobile-links a {
  text-align: center;
}

/* ============================================================
   4. FOOTER
   ============================================================ */

/* ============================================================
   FOOTER – VARIANTE 2 (footer-2.php)
   Abgerundete Buttons statt des sitewide kantigen Designs, gleiches
   Muster wie main-dentin.css (Abschnitt Header) (--radius-btn statt einzelner Klassen).
   ============================================================ */

.footer--dentin {
  --radius-btn: 2rem;
  /* Kein Aufdeck-Effekt (main.css: sticky am unteren Fensterrand): der Footer steht normal am Seitenende */
  position: static;
}

/* Mobil: Bewertungen als Swipe-Carousel wie bei Inlay (Muster: conventions.md → Mobile-Swipe-Carousel; Punkte: js/carousel-dots.js).
   Der Slider ab vier Bewertungen (.bewertungen__grid--slider) hat eigene Pfeile und Punkte und ist ausgenommen. */
@media (max-width: 767.98px) {
  .section--bewertungen-dentin .bewertungen__grid:not(.bewertungen__grid--slider) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bis an den rechten Bildschirmrand (hebt den Innenabstand 1.5rem des .container auf; der Abstand bleibt am Ende der Reihe erhalten) */
    margin-right: -1.5rem;
    padding-right: 1.5rem;
  }

  .section--bewertungen-dentin .bewertungen__grid:not(.bewertungen__grid--slider)::-webkit-scrollbar {
    display: none;
  }

  .section--bewertungen-dentin .bewertungen__grid:not(.bewertungen__grid--slider) > .bewertungen__card {
    scroll-snap-align: start;
  }

  /* Keine Eingangsanimation in der Wisch-Reihe: auch der Schutz vor dem ersten Paint (html.reveal-pending, functions.php) versteckt diese Karten nicht. */
  html.reveal-pending .section--bewertungen-dentin .bewertungen__grid:not(.bewertungen__grid--slider) > * {
    opacity: 1;
  }
}

/* Über uns: CTA-Abschnitt in voller Breite des Containers statt der 560 px aus main.css (.cta__inner) */
:where(.dv-ueber-uns) .section--cta-dentin .cta__inner {
  max-width: none;
}

/* Leistungen: Kosten-Box 960 px statt 720 px aus main.css, CTA in voller Breite des Containers statt 560 px (.cta__inner) */
:where(.dv-leistungen) .section--kosten-dentin .kosten__box {
  max-width: 960px;
}

:where(.dv-leistungen) .section--cta-dentin .cta__inner {
  max-width: none;
}