/* Petratec – statischer Nachbau der Website von 2015 (MB-COMPUTERS, 2026).
   Maße, Farben und Umbruchpunkte sind an der Altseite gemessen; Ziel ist das gleiche Bild.
   Schrift: Systemschrift. Die alte Seite band Webschriften per http ein, die der Browser blockierte;
   Besucher sahen deshalb schon immer Helvetica bzw. Arial. */

:root {
  --orange: #ff9200;
  /* Textgrau gerade so weit abgedunkelt, dass es WCAG AA erreicht (4,5:1), Farbton wie die Altseite:
     Menü #9d9ea1 -> 4,53:1 auf Weiß, Fußtext #a7a8aa und Fußlinks #9d9ea1 -> 4,50 bzw. 4,55:1 auf dem Fußgrau.
     Kastentitel: #82878f (3,06 bis 3,61:1, für 24 px erlaubt, wirkte aber blass) -> #676b73, gleicher Farbton,
     4,53:1 auf dem Kastengrau #ececec und 4,78:1 auf #f2f2f4. */
  --grau-navi: #767679;
  --grau-titel: #676b73;
  --kasten: #ececec;
  --kasten-hell: #f2f2f4;
  --fuss: #e9eaec;
  --fuss-text: #696a6b;
  --fuss-link: #69696c;
  --braun: #6c3c00;
  --schrift: Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: var(--hinweis-h, 0px); }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 18px/1 var(--schrift);
  overflow-y: scroll;
}

h1, h2, p, ul, figure, fieldset, legend { margin: 0; padding: 0; }
h1, h2 { font-weight: normal; }
ul { list-style: none; }
img { border: 0; }
picture { display: contents; }   /* nur Hülle für die WebP-Quelle, das Bild verhält sich wie vorher */
button, input, textarea { font: inherit; color: inherit; }

a { color: var(--grau-navi); text-decoration: none; }
a:hover, a:active { color: var(--orange); }

:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.unsichtbar {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nr { white-space: nowrap; }   /* Telefon- und Artikelnummer brechen nicht um (die Klammer setzt build.mjs) */

/* ---------- Rahmen und Kopf ---------- */

.rahmen {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.kopf { position: relative; height: 210px; }

.logo { position: absolute; top: 60px; left: 0; }
.logo img { display: block; max-width: 100%; height: auto; }

.video-knopf {
  position: absolute; top: 0; right: 260px;
  width: 108px;
  background: var(--grau-navi);   /* Weiß darauf 4,5:1 (WCAG AA) */
  color: #fff;
  font-size: 11px; line-height: 42px;
  text-align: center; text-transform: uppercase;
}

.menue-schalter { display: none; }   /* nur unter 1150 px vorhanden, sonst unsichtbarer Tab-Stopp */
.burger { display: none; }

/* Servicemenü oben rechts */
.navi-meta {
  position: absolute; top: 16px; right: 0;
  display: flex;
}
.navi-meta li { margin-left: 20px; }
.navi-meta a {
  display: block;
  font-size: 11px; line-height: 16px;
  color: var(--grau-navi);
  text-transform: uppercase;
}
.navi-meta a:hover, .navi-meta a[aria-current] { color: var(--orange); }

/* Hauptmenü unten im Kopf: gleich große Lücken, „Kontakt“ bündig rechts (vorher 21 px Abstand, vor „Kontakt“ nur 12 px) */
.navi-haupt {
  position: absolute; left: 0; bottom: -8px;
  width: 100%;
  display: flex; justify-content: space-between;
}
.navi-haupt li { position: relative; z-index: 10; flex: none; }
.navi-haupt a {
  display: block;
  height: 36px;
  font-size: 16px; line-height: 16px;
  color: var(--grau-navi);
  text-transform: uppercase;
  white-space: nowrap;
}
/* aktiver Punkt: orange Schrift und 18 × 10 px Balken unten mittig */
.navi-haupt > li:hover > a, .navi-haupt > li.aktiv > a { color: var(--orange); }
.navi-haupt > li:hover::after, .navi-haupt > li.aktiv::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 18px; height: 10px; margin-left: -9px;
  background: var(--orange);
}

/* Untermenü */
.navi-haupt ul {
  display: none;
  position: absolute; top: 14px; left: 0;
  min-width: 300px;
  padding-top: 20px;
  z-index: 10;
}
.navi-haupt li:hover > ul, .navi-haupt li:focus-within > ul { display: block; }
.navi-haupt ul li { display: block; margin: 0 21px 0 0; }
.navi-haupt ul a {
  height: auto;
  padding: 10px 20px;
  font-size: 11px; line-height: 11px;
  color: #fff;
  background: #000;
  opacity: .7;
}
.navi-haupt ul li:first-child a { padding-top: 20px; }
.navi-haupt ul li:last-child a { padding-bottom: 20px; }
.navi-haupt ul a:hover, .navi-haupt ul a[aria-current] { color: var(--orange); }
.navi-haupt ul a:focus-visible { outline-color: #fff; outline-offset: -4px; }   /* Schwarz verschwand im dunklen Kasten */

/* ---------- Kopfbild ---------- */

.kopfbild { position: relative; height: 400px; overflow: hidden; }
.kopfbild-innen {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
}
.kopfbild-innen > picture > img {   /* Versatz -250 px: bis 850 px Breite reicht die schmale WebP-Fassung (_build/webp.py) */
  position: absolute; top: 0; left: -250px;
  max-width: none;
}

.claim {
  position: absolute; bottom: 0; right: -20px;
  width: 346px; height: 190px;
  padding: 10px 20px 0;
  background: rgba(255, 255, 255, .82);   /* vorher .5 mit weißer Schrift: 1,1 bis 1,8 : 1, auf hellen Kopfbildern unsichtbar */
  color: #595620;   /* Oliv aus dem Logo */
  font-size: 44px; line-height: 1.2;   /* Altseite 46 px: in Arial bricht „Dental-Bereich.“ dort um und die letzte Zeile fällt aus dem Bild */
  white-space: nowrap;
  max-width: calc(100% + 40px);   /* nie breiter als das Fenster: unter 346 px schnitt der linke Rand „P“, „f“ und „D“ an */
}

/* YouTube erst nach Klick (Zwei-Klick-Lösung) */
.video {
  position: absolute; top: 0; left: 50%;
  width: 711px; height: 400px;
  margin-left: -355px;
  background: #000;
}
.video iframe { display: block; width: 712px; height: 400px; border: 0; }
.video-start { position: absolute; inset: 0; display: block; }
.video-start img { display: block; width: 711px; height: 400px; }
.video-play {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 48px; margin: -24px 0 0 -34px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .75);
}
.video-play::after {
  content: "";
  position: absolute; left: 27px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.video-start:hover .video-play, .video-start:focus-visible .video-play { background: var(--orange); }
.video-hinweis {
  position: absolute; left: 50%; bottom: 12px;
  width: max-content; max-width: calc(100% - 40px);   /* bleibt innerhalb des Videos */
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 13px; line-height: 1.35;
  text-align: center;
}
.video-hinweis a { color: #fff; text-decoration: underline; }

/* ---------- Inhalt ---------- */

/* reicht bis an den Rahmenrand, damit überstehende Kästen erst am Bildschirmrand gekappt werden (wie im Original) */
.inhalt { margin: 0 -20px; padding: 40px 60px; line-height: 23.4px; overflow-x: clip; }

.inhalt h1 {
  font-size: 36px; line-height: 1.1; margin: 0 0 .8em;
  overflow-wrap: break-word;   /* Notnagel für lange Wörter ohne Trennstelle */
  -webkit-hyphens: none; hyphens: none;   /* Trennstellen aus build.mjs nur auf schmalen Handys, siehe unten */
}
.inhalt h2 { font-size: 24px; line-height: 30px; color: var(--grau-titel); margin: 0 0 .65em; }
.inhalt p { margin: 0 0 1.3em; }
.inhalt ul:not([class]) { margin: 0 0 1.3em 1.2em; list-style: disc; }
/* Fließtext außerhalb der Kästen höchstens rund 80 Zeichen je Zeile (vorher bei 1440 px 112 bis 132) */
.inhalt > p:not([class]), .inhalt > ul:not([class]) { max-width: 36em; }
.inhalt a { color: var(--orange); }

/* Kastentitel sind h2, sehen aber aus wie die Absätze der Altseite (gleicher Abstand wie .inhalt p) */
.inhalt .akzent { font-size: 24px; line-height: 30px; color: var(--orange); margin: 0 0 1.3em; }
.inhalt .titel { font-size: 24px; line-height: 30px; color: var(--grau-titel); margin: 0 0 1.3em; }
.inhalt p.eng { margin: 0 0 8px; }

/* drei Spalten mit gestapelten Kästen */
.spalten {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  column-gap: 4px;
}
.spalte { min-width: 0; }
.spalte > * { position: relative; display: block; margin: 16px 0; }   /* relative: Textkasten liegt wie im Original über der Fotokante */

.kasten { background: var(--kasten); padding: 22px 16px; }
.kasten--hell { background: var(--kasten-hell); margin-top: -21px !important; }
.kasten > :last-child { margin-bottom: 0; }

.bild img { width: 100%; height: auto; }
.bild figcaption {
  display: block;
  margin: -5px 0 1.3em;
  padding: 22px 16px;
  background: var(--kasten-hell);
  font-size: 16px; line-height: 20px;
}

.inhalt p.hinweis {
  margin: 16px 0;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  font-size: 21px;
}
.inhalt p.hinweis a { color: #fff; }
/* Orange Kästen mit Link: die ganze Fläche ist antippbar, Rückmeldung beim Darüberfahren (nur Maus) und beim Antippen */
.inhalt p.hinweis a { display: block; margin: -8px -16px; padding: 8px 16px; border-radius: 4px; }
@media (hover: hover) { .inhalt p.hinweis a:hover { background: rgba(0, 0, 0, .1); } }
.inhalt p.hinweis a:active { background: rgba(0, 0, 0, .3); }

/* ---------- Formular (Aufbau wie die alte Tabelle) ---------- */

.falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.kontaktweg { border: 0; margin: 0 0 1.3em; }
.kontaktweg label { display: inline-block; margin-left: 1em; }
.kontaktweg input { margin: 0; }

.formular-tabelle { width: 100%; border-collapse: collapse; border-spacing: 0; }
.formular-tabelle td { padding: 10px 0; width: 40%; font-size: 16px; vertical-align: baseline; }
.formular-tabelle td:first-child { width: 20%; padding-right: 20px; }
.formular-tabelle td.absenden-spalte { width: auto; padding-left: 20px; vertical-align: bottom; text-align: center; }
.formular-tabelle label { display: block; }
.formular-tabelle input, .formular-tabelle textarea {
  box-sizing: content-box;   /* wie die Altseite: 95 % plus Polster und Rand */
  width: 95%;
  max-width: calc(100% - 18px);   /* in schmalen Zellen ragten die Felder sonst bis 11 px über die Spalte */
  padding: 2px 8px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  font-size: 18px; line-height: 23.4px;
}
.formular-tabelle td.absenden-spalte .knopf { margin-bottom: 30.4px; }   /* Luft wie im Original (dort lag ein unsichtbarer Lade-Kreisel darunter) */

.knopf {
  display: inline-block;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  font-size: 24px; line-height: 23.4px;
  text-align: left;
  cursor: pointer;
}
.knopf:hover { color: #fff; }
.nur-mobil { display: none; }

/* Datenschutz-Häkchen (Pflicht, Kenntnisnahme): Kästchen nicht wie die Textfelder, alle Kästchen in Markenorange */
.formular input[type="checkbox"] { accent-color: var(--orange); }
.formular-tabelle input[type="checkbox"] { width: auto; max-width: none; margin: 0; padding: 0; }

/* ---------- Fuß ---------- */

.fuss {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  background: var(--fuss);
  color: var(--fuss-text);
  --grau-navi: var(--fuss-link);   /* Links im Fuß: eigenes Grau für den dunkleren Grund, Hover bleibt orange */
}
.fuss-innen { padding: 20px 0; font-size: 12px; text-align: right; }
.fuss-innen::after { content: ""; display: block; clear: both; }
.fuss p { line-height: 19px; }
.teilen { float: right; margin-left: 10px; font-size: 0; }
/* Tippfläche 24 × 24 um das 16-px-Zeichen (WCAG 2.5.8). Die Zeichen stehen 8 statt 5 px auseinander (das Facebook-Zeichen
   rückt 3 px nach links), der Block bleibt 37 × 21 px groß, damit der Fußtext gleich umbricht */
.teilen a { display: inline-block; width: 24px; height: 24px; padding: 4px; margin: -4px -4px 1px; }
.teilen a:first-child { margin-left: -7px; }
.teilen a + a { margin-left: 4px; }
.teilen svg { display: block; width: 16px; height: 16px; }

/* Credit-Zeile (Footer_Standard.md), an den Fuß angepasst: 12 px, Fußgrau, eine Trennlinie, mittig.
   Kreise 28 px, Tippfläche 44 px (::before), 16 px Abstand, damit sich die Tippflächen nicht überlappen. */
.ft-credit {
  clear: both;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #d3d5d8;
  line-height: 19px;
}
.ft-credit > span > a { text-decoration: underline; text-underline-offset: 3px; }
.ft-socials { display: inline-flex; gap: 16px; align-items: center; }
.ft-socials a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, .06);
}
.ft-socials a::before { content: ""; position: absolute; inset: -8px; }
.ft-socials svg { width: 14px; height: 14px; }
.ft-socials a:hover { background: var(--orange); color: #fff; }

/* ---------- Hinweisleiste (nur technisch notwendig, kein Consent) ---------- */

.hinweis-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--fuss);
  border-top: 1px solid #d3d5d8;
  color: #222;
  font-size: 15px; line-height: 1.4;
}
.hinweis-leiste[hidden] { display: none; }
body.hinweis-offen { padding-bottom: var(--hinweis-h, 0px); }   /* Höhe misst main.js, der Fuß bleibt frei scrollbar */
.fuss-speicher { padding: 0; border: 0; background: none; color: var(--grau-navi); cursor: pointer; }
.fuss-speicher:hover { color: var(--orange); }
.hinweis-leiste-innen {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hinweis-leiste p { margin: 0; }
.hinweis-leiste a { color: var(--braun); text-decoration: underline; }
.hinweis-leiste button {
  flex: none;
  padding: 8px 16px;
  border: 0; border-radius: 4px;
  background: var(--braun); color: #fff;
  font-size: 16px; cursor: pointer;
}

/* ---------- unter 1150 px und auf Touch-Geräten ohne Maus: Burger-Menü ----------
   Touch ohne Maus auch breiter (Tablets quer ab 1151 px): Das Untermenü öffnet nur beim Darüberfahren, ein Tipp auf
   „Praxiswagen“ oder „Zubehör“ öffnete in Chrome sofort die Seite, die Unterseiten waren dort nicht erreichbar. */

@media screen and (max-width: 1150px), screen and (hover: none) and (pointer: coarse) {
  .video-knopf { display: none; }

  /* Kopf kompakt: Logo und Burger in einer Zeile, 96 statt 210 px hoch (vorher stand der Burger am Handy über dem Logo) */
  .kopf { height: 96px; }
  .logo { top: 25px; }
  .burger {
    display: block;
    position: absolute; top: 16px; right: 0;
    width: 64px; height: 64px;
    background: var(--orange);
    cursor: pointer;
  }
  .burger::before {   /* drei weiße Linien wie das alte Symbol, auf 64 px verkleinert */
    content: "";
    position: absolute; left: 14px; top: 18px;
    width: 36px; height: 28px;
    background:
      linear-gradient(#fff, #fff) 0 0 / 36px 4px no-repeat,
      linear-gradient(#fff, #fff) 0 12px / 36px 4px no-repeat,
      linear-gradient(#fff, #fff) 0 24px / 36px 4px no-repeat;
  }
  .menue-schalter { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .menue-schalter:focus-visible + .burger { outline: 2px solid #000; outline-offset: 2px; }

  .navi {
    display: none;
    position: absolute; top: 80px; right: -20px; z-index: 100;
    width: 88%;
    background: var(--braun);
    opacity: .9;
    font-size: 20px;
    /* Solange die Hinweisleiste steht, reicht die Seite um deren Höhe unter das Menü: sonst lagen auf kurzen Seiten
       die letzten Menüpunkte samt Tastaturfokus dauerhaft hinter der Leiste. Der Rand ist durchsichtig. */
    border-bottom: var(--hinweis-h, 0px) solid transparent;
    background-clip: padding-box;
  }
  .menue-schalter:checked ~ .navi { display: block; }

  .navi-haupt, .navi-meta { position: static; display: block; width: auto; padding: 0 30px; }
  .navi-haupt li, .navi-meta li { position: static; margin: 0; }
  .navi-haupt a, .navi-meta a {
    height: auto;
    padding: 20px 0;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 20px; line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;   /* Notnagel wie bei h1 */
    -webkit-hyphens: none; hyphens: none;   /* Trennstellen aus build.mjs nur auf schmalen Handys, siehe unten */
  }
  .navi a:focus-visible { outline-color: #fff; outline-offset: -4px; }   /* schwarz auf Braun war zu schwach */
  .navi-haupt > li:hover::after, .navi-haupt > li.aktiv::after { content: none; }
  .navi-haupt ul { display: block; position: static; min-width: 0; padding: 0; }
  .navi-haupt ul li { margin: 0; }
  .navi-haupt ul a, .navi-haupt ul li:first-child a, .navi-haupt ul li:last-child a {
    padding: 20px 0 20px 20px;
    background-color: transparent; opacity: 1;   /* nur die Farbe: der orange Block für die aktuelle Seite ist ein Hintergrundbild */
    font-size: 20px; line-height: 20px;
  }
  .navi-meta li:last-child a { border-bottom: 0; }
  .navi a:hover, .navi a[aria-current], .navi-haupt > li.aktiv > a { color: var(--orange); }
  .navi a[aria-current] {
    background: linear-gradient(var(--orange), var(--orange)) right center / 10px 20px no-repeat;
  }
  /* Platz für den Block, sonst lag er über dem Wortende (bis 10 px, z. B. „Ausstellungsstücke“ bei 390 px) */
  .navi :is(.navi-haupt, .navi-meta) a[aria-current] { padding-right: 18px; }
}

@media screen and (max-width: 1150px) {
  .inhalt { padding-left: 20px; padding-right: 20px; }

  .nur-mobil { display: block; margin: 20px 0 23.4px; }
  .formular-tabelle td.absenden-spalte { display: none; }
}

/* ---------- unter 850 px: eine Spalte ---------- */

@media screen and (max-width: 850px) {
  .spalten { grid-template-columns: 100%; }
  .spalte > * { margin: 8px 0; }
  .inhalt p.hinweis { margin: 8px 0; }
}

/* Handy: das Video (711 × 400 wie die Altseite) wird schmaler statt seitlich abgeschnitten, mittig im Kopfbild.
   100 % ist die Innenbreite des Kopfbilds, + 40 px die ganze Fensterbreite; Prozent-Ränder rechnen ebenfalls mit der Breite. */
@media screen and (max-width: 750px) {
  .video {
    --video-b: min(711px, calc(100% + 40px));
    top: 50%;
    width: var(--video-b); height: auto; aspect-ratio: 711 / 400;
    margin: calc(var(--video-b) * -200 / 711) 0 0 calc(var(--video-b) / -2);
  }
  .video iframe, .video-start img { width: 100%; height: 100%; }
  .video-play { top: 38%; }   /* Platz für den Einwilligungstext unten im kleineren Video */
}

/* Schmale Handys: Der Einwilligungstext (Pflichtangaben am Zwei-Klick-Platzhalter) würde im
   flachen Video den Abspielknopf verdecken. Das Video rückt an den oberen Rand des Kopfbilds,
   der Text steht darunter (bei 390 px 181 px Platz). Umschaltpunkt 500 px nachgemessen: darüber passt die Einblendung. */
@media screen and (max-width: 500px) {
  .video { top: 0; margin-top: 0; }
  .video-hinweis { top: 100%; bottom: auto; margin-top: 8px; max-width: calc(100% - 24px); }

  /* Formular: Beschriftung über dem Feld, Felder so breit wie die Spalte (vorher bei 320 px nur 157 px breit
     neben zweizeiligen Beschriftungen) */
  .formular-tabelle, .formular-tabelle tbody, .formular-tabelle tr, .formular-tabelle td { display: block; width: auto; }
  .formular-tabelle td { padding: 0 0 6px; }
  .formular-tabelle td:first-child { width: auto; padding: 10px 0 4px; }
  .formular-tabelle td:empty { display: none; }   /* leere Beschriftungszelle vor dem Datenschutz-Häkchen */
  .formular-tabelle input, .formular-tabelle textarea { width: 100%; }
}

@media screen and (max-width: 339px) {   /* Logo neben dem Burger: unter 340 px etwas schmaler (196 statt 220 px) */
  .logo img { width: 196px; }
  .logo { top: 27px; }
}

/* Weiche Trennstellen (build.mjs) nur in den Breiten scharf, in denen das Wort sonst über seine Zeile hinausläuft
   (gemessen: Untermenü bis 404 px, h1 bis 394 px, Hauptmenü bis 340 px). Darüber bricht alles um wie bisher. */
@media screen and (max-width: 404px) { .navi-haupt ul a { -webkit-hyphens: manual; hyphens: manual; } }
@media screen and (max-width: 340px) { .navi-haupt > li > a { -webkit-hyphens: manual; hyphens: manual; } }

/* Unter 346 px ist der Kasten fensterbreit, der Text rückt näher an den Rand, damit „Praxislösungen“ ganz zu sehen ist */
@media screen and (max-width: 345px) {
  .claim { padding: 10px 0 0 10px; }
}

/* Über 1580 px reicht das 1600 px breite Kopfbild nicht mehr bis an den Rand (bei 1920 px blieben links 170 und
   rechts 150 px weiß): dann fensterbreit, die Höhe wächst im Seitenverhältnis mit, nichts wird abgeschnitten.
   Das Video bleibt mittig. */
@media screen and (min-width: 1581px) {
  .kopfbild { height: max(400px, 25vw); }
  .kopfbild-innen > picture > img { left: 50%; width: max(1600px, 100vw); height: auto; transform: translateX(-50%); }
  .video { top: 50%; margin-top: -200px; }
}

@media screen and (max-width: 600px) {
  .hinweis-leiste-innen { flex-direction: column; align-items: stretch; }
}

/* ---------- Produktseiten (Edition Petratec, Dentsply Edition): Kopfbereich mit Foto, Eckdaten und Bestellen ----------
   Die Dentsply-Seite nennt keine Eckdaten: Dort steht der Einleitungssatz an ihrer Stelle, das zweite Foto unter den Knöpfen. */
.produktkopf { display: grid; grid-template-columns: 346px minmax(0, 1fr); gap: 40px; align-items: start; margin: 8px 0 24px; }
.produktkopf .bild img { display: block; max-width: 346px; }   /* Originale sind 346 px breit: nie vergrößern */
.produktkopf-text .bild { margin-top: 24px; }
.eckdaten { margin: 0 0 24px; font-size: 16px; line-height: 22px; }
.eckdaten > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--kasten); }
.eckdaten > div:first-child { border-top: 1px solid var(--kasten); }
.eckdaten dt { color: var(--grau-navi); }   /* 16 px = normale Schrift, braucht 4,5:1 (Menügrau 4,53:1 auf Weiß) */
.eckdaten dd { margin: 0; }
.produkt-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inhalt .produkt-knoepfe .hinweis { display: flex; margin: 0; }
.inhalt .produkt-knoepfe .hinweis a { flex: 1; margin: -8px -16px; padding: 8px 16px; }
.produkt-knoepfe--ende { margin: 16px 0 0; }
@media screen and (max-width: 899px) {
  .produktkopf { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .produktkopf .bild img { width: 100%; margin: 0 auto; }
}
@media screen and (max-width: 500px) {
  .eckdaten > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .produkt-knoepfe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kacheln zu den Praxiswagen (Fotos auf ein Format zugeschnitten, oben weg, Räder bleiben) ---------- */
.inhalt .kacheln-titel { margin: 2em 0 .8em; }
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; }
.inhalt .kachel { display: flex; flex-direction: column; background: var(--kasten-hell); color: #000; }
.kachel img { display: block; width: 100%; height: auto; aspect-ratio: 346 / 450; object-fit: cover; object-position: 50% 85%; }
.kachel-text { padding: 16px 16px 20px; font-size: 16px; line-height: 20px; }
.kachel-titel { display: block; margin-bottom: 8px; font-size: 21px; line-height: 26px; color: var(--grau-titel); overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
@media (hover: hover) { .inhalt .kachel:hover .kachel-titel { color: var(--orange); } }
.inhalt .kachel:active .kachel-titel { color: var(--orange); }
@media screen and (max-width: 850px) {   /* Tablet und Handy: Foto links, Text rechts */
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inhalt .kachel { flex-direction: row; align-items: flex-start; }
  .kachel img { width: min(38%, 140px); flex: none; }
  .kachel-text { padding: 12px 14px; }
  .kachel-titel { font-size: 19px; line-height: 24px; }
}
@media screen and (max-width: 600px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }
/* Startseite: drei orange Kästen unter den Kacheln, gleich hoch, die ganze Fläche ist der Link */
.knopfreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; }
.inhalt .knopfreihe .hinweis { display: flex; margin: 0; }
.inhalt .knopfreihe .hinweis a { flex: 1; margin: -8px -16px; padding: 8px 16px; }
@media screen and (max-width: 850px) { .knopfreihe { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- Handy: Kopfbild der Unterseiten flacher (mittlerer Streifen y 80–320), Spruch und Überschrift kleiner ---------- */
@media screen and (max-width: 600px) {
  .kopfbild--spruch { height: 240px; }
  .kopfbild--spruch .kopfbild-innen > picture > img { top: -80px; }
  .claim { width: auto; height: auto; padding: 8px 16px 10px; font-size: 28px; line-height: 1.15; }
  .inhalt h1 { font-size: 28px; }
}

/* Zubehör: Kastentitel führen zur Unterseite; der Titel bleibt grau, der Pfeil ist orange */
.inhalt h2.titel a { color: inherit; }
.inhalt h2.titel .pfeil { color: var(--orange); }
@media (hover: hover) { .inhalt h2.titel a:hover { color: var(--orange); } }
.inhalt h2.titel a:active { color: var(--orange); }

/* ---------- Handy (eine Spalte): Produktfoto zuerst, „Hier bestellen“ ans Ende; harte Umbrüche mitten im Satz weg ----------
   Die drei Spalten lösen sich auf (display: contents), damit die Reihenfolge per order wählbar ist. In der Flex-Spalte
   fallen Abstände nicht mehr zusammen, deshalb nur noch Abstand nach oben (8 px wie vorher). */
@media screen and (max-width: 850px) {
  .spalten--foto-zuerst { display: flex; flex-direction: column; padding-bottom: 8px; }
  .spalten--foto-zuerst > .spalte { display: contents; }
  .spalten--foto-zuerst .spalte > * { margin: 8px 0 0; }
  .spalten--foto-zuerst .bild--zuerst { order: -1; }
  .spalten--foto-zuerst .hinweis--ende { order: 1; }
  br.nur-breit { display: none; }
}

/* ---------- Handy und Tablet: die Kopfzeile bleibt beim Scrollen oben (Menü überall erreichbar) ----------
   Nur Hintergrund und Schatten, feste Höhe 96 px; Anker-Abstand nur über scroll-padding-top. Kein overflow an html/body
   (body overflow-y: scroll geht an das Fenster über, ist also kein Scroll-Container). Fokusziele im Kopf mit negativem
   scroll-margin-top, sonst schiebt jeder Tab im Kopf die Seite hoch (Mobile_Menu.md). Das offene Menü scrollt in sich. */
@media screen and (max-width: 1150px), screen and (hover: none) and (pointer: coarse) {
  html { scroll-padding-top: 96px; }
  .rahmen--kopf {
    position: sticky; top: 0; z-index: 150;
    max-width: none; padding: 0 max(20px, calc((100% - 1080px) / 2));
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  }
  .rahmen--kopf :is(a, input) { scroll-margin-top: -200px; }
  /* Menüpunkte im in sich scrollenden Menü: Mit -200 px rollte das Menü einen per Tab oder Shift+Tab fokussierten Punkt
     über seinen sichtbaren Rand (gemessen 22.10.2026). -20 px genügen der Seite (Menü beginnt bei 80 px, die freigehaltene
     Kopfzone endet bei 96), scroll-padding-top am Menü gleicht sie dort wieder aus. */
  .rahmen--kopf .navi a { scroll-margin-top: -20px; }
  .navi { scroll-padding-top: 20px; }
  /* Menü-Kästchen fest oben im Fenster (unsichtbar, 1 px): Der Fokus darauf (Tab) schob die Seite in WebKit sonst trotz
     negativem scroll-margin um bis zu 211 px hoch (gemessen 22.10.2026 bei 900 × 600). Chrome braucht weiter den Rand oben. */
  .menue-schalter { position: fixed; top: 0; left: 0; }
  .navi { max-height: calc(100vh - 80px); max-height: calc(100svh - 80px); overflow-y: auto; overscroll-behavior: contain; }   /* vh: Rückfall für Browser ohne svh (iOS vor 15.4), sonst klebt das Menü mit unerreichbaren unteren Punkten */
}

/* ---------- Kopfbereich straffen: Kopf ohne Leerraum zwischen Logo und Menü (nur Desktop-Menü mit Maus),
   Kopfbild der Unterseiten 300 statt 400 px (mittlerer Streifen, nicht skaliert); Seiten mit Video bleiben 400 px ---------- */
@media screen and (min-width: 1151px) and (hover: hover), screen and (min-width: 1151px) and (pointer: fine) {
  .kopf { height: 150px; }
  .logo { top: 40px; }
}
@media screen and (min-width: 601px) {
  .kopfbild--spruch { height: 300px; }
  .kopfbild--spruch .kopfbild-innen > picture > img { top: -50px; }
}
@media screen and (min-width: 1581px) {   /* Bild fensterbreit wie bisher, Streifen mittig: (25 - 18,75) / 2 vw */
  .kopfbild--spruch { height: max(300px, 18.75vw); }
  .kopfbild--spruch .kopfbild-innen > picture > img { top: -3.125vw; }
}

@media print {
  .navi, .burger, .video-knopf, .hinweis-leiste, .video, .teilen, .ft-socials { display: none !important; }
}