/*
 * mm-layout.css für hello-theme-child-master/assets/css/ (auf LIVE eingespielt)
 * Stand 19.10.2026. Ersetzt 04_mm-layout-entwurf.css vom 18.10.2026.
 *
 * Definitionsort aller Token ist allein der Skill layout-standard,
 * clients/mm/layout-mm.css. Auf LIVE kommen sie so an:
 *  - Größen --mm-* als Elementor-v4-Variablen (Kit, post-4.css)
 *  - die vier Token unten, die keine Elementor-Variable sein können (Breakpoint-Werte,
 *    Kern-Namen ohne Präfix), als wörtliche Übertragung aus layout-mm.css.
 * Werte nur in layout-mm.css ändern und den Block unten danach angleichen.
 * Diese Datei enthält sonst nur Regeln ohne eigene Zahlen. Regelwerk: 08_standard-mm.md.
 */

/* --- Übertragung aus clients/mm/layout-mm.css, hier nicht ändern --------- */
:root {
  --header-h: var(--mm-header-h);
  --focus-color: var(--e-global-color-primary);
  --focus-saum: var(--e-global-color-dbe7c70);
  --mm-spalten: 4;
}
@media (min-width: 768px) { :root { --mm-spalten: 8; } }
@media (min-width: 1025px) { :root { --mm-spalten: 12; } }
/* --- Ende Übertragung --------------------------------------------------- */

/* --- Aus layout-core.css Abschnitte 3 bis 6 (Skill 2.0.0), unverändert ------ */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
p, li, dd, td, th { overflow-wrap: break-word; }

img, svg, video, iframe, table { max-inline-size: 100%; }
img, svg, video { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--focus-saum);
}
html { scroll-padding-block-start: calc(var(--header-h) + 0.5rem); }
.skip-link:not(:focus-visible) {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Sichtbar bei Fokus. Hellos Reset ist abgeschaltet, Elementor versteckt
   .screen-reader-text dauerhaft (top: -10000em), daher hier ausdrücklich zurückholen. */
.skip-link:focus-visible {
  position: fixed; z-index: 100000;
  top: var(--mm-abstand-s); left: var(--mm-abstand-s);
  inline-size: auto; block-size: auto; margin: 0;
  overflow: visible; clip: auto; clip-path: none;
  padding: var(--mm-abstand-xs) var(--mm-abstand-m);
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-dbe7c70);
  border-radius: var(--mm-radius-s);
  font-size: var(--mm-text); font-weight: 600;
  text-decoration: underline;
}

/* --- Hauptinhalt als Sprungziel ohne Rahmen beim Anspringen ----------------- */
main#content:focus { outline: none; }

/* --- Hilfsklassen für v3-Container (an v4-Elementen als globale Klassen) ---- */
.mm-abschnitt { padding-block: var(--mm-abstand-abschnitt); padding-inline: var(--mm-rand); }
/* --mm-textbreite = 38em, bei 21 px Text höchstens rund 800 px */
.mm-textspalte { max-inline-size: var(--mm-textbreite); }
.mm-kartenreihe {
  display: grid;
  gap: var(--mm-spaltenabstand);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* --- Blog-Überschriften (bisher 64 / 32 px in style.css) -------------------- */
.blog-post-content :is(h2, h3, h4, h5, h6).wp-block-heading {
  margin-block: var(--mm-abstand-2xl) var(--mm-abstand-l);
}
.blog-post-content h2.wp-block-heading + h3.wp-block-heading,
.blog-post-content h2.wp-block-heading + .elementor-menu-anchor + h3.wp-block-heading,
.blog-post-content h3.wp-block-heading + h4.wp-block-heading,
.blog-post-content h3.wp-block-heading + .elementor-menu-anchor + h4.wp-block-heading {
  margin-block-start: var(--mm-abstand-l);
}

/* --- Bisheriges Kit-CSS, px durch Variablen ersetzt ------------------------- */
.wp-block-quote {
  border-inline-start: 4px solid var(--e-global-color-primary);
  background-color: var(--e-global-color-accent);
  font-weight: 600;
  padding: var(--mm-abstand-m) var(--mm-abstand-l);
  margin-block: var(--mm-abstand-l);
  margin-inline: 0;
}
.wp-block-quote p { margin: 0; }
.rank-math-block { margin-block-start: var(--mm-abstand-l); }
.rank-math-block .rank-math-list-item {
  background-color: var(--e-global-color-dbe7c70);
  border: 1px solid var(--e-global-color-accent);
  border-radius: var(--mm-radius-m);
  padding: var(--mm-abstand-m) var(--mm-abstand-l);
  margin-block-end: var(--mm-abstand-m);
}
.rank-math-block .rank-math-list-item:last-child { margin-block-end: 0; }
.rank-math-block .rank-math-question {
  font-size: var(--mm-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--e-global-color-secondary);
  margin-block: 0 var(--mm-abstand-s);
}
.rank-math-block .rank-math-answer { padding-inline-start: var(--mm-abstand-l); }
.rank-math-block .rank-math-answer p { margin: 0; }
.rank-math-block .rank-math-answer p + p { margin-block-start: var(--mm-abstand-s); }
.wp-block-code {
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-dbe7c70);
  border-inline-start: 4px solid var(--e-global-color-primary);
  border-radius: var(--mm-radius-s);
  padding: var(--mm-abstand-m) var(--mm-abstand-l);
  margin-block: var(--mm-abstand-l);
  overflow-x: auto;
}
.wp-block-code code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: var(--mm-text);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: inherit;
  background: none;
  padding: 0;
}
/* Breite Tabellen scrollen in ihrer Hülle statt die Seite zu verbreitern */
.wp-block-table { margin-block: var(--mm-abstand-l); overflow-x: auto; }
.wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--mm-text); }
/* Vergleichstabellen auf Leistungsseiten: schmaler als 36rem scrollt die Tabelle
   waagerecht in ihrer Hülle, statt die Spalten zusammenzudrücken. */
.wp-block-table table { min-inline-size: 36rem; }
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--e-global-color-accent);
  padding: var(--mm-abstand-s) var(--mm-abstand-m);
  text-align: start;
  vertical-align: top;
}
.wp-block-table th {
  background-color: var(--e-global-color-5483d53d);
  color: var(--e-global-color-secondary);
  font-weight: 600;
}

/* --- Kopfzeile: nur beim Hochscrollen sichtbar, alle Geräte (19.10.2026) --- */
.elementor-location-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 99;
  transition: transform 0.25s ease;
}
.elementor-location-header.mm-kopf--weg { transform: translateY(calc(-100% - 1rem)); } /* 1rem: Schatten verschwindet mit */
/* Tastaturfokus im Kopf: immer sichtbar */
.elementor-location-header.mm-kopf--weg:has(:focus-visible) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .elementor-location-header { transition: none; }
}
/* Sprungziele: Abstand nur an Zielen im Inhalt, nicht an main#content selbst. main beginnt
   direkt unter dem Kopf; mit dem Abstand am main wäre sein Anfang „verdeckt“, und Browser
   scrollen beim Skip-Link dann bis ans Ende des (sehr hohen) main. */
html { scroll-padding-block-start: 0; }
main [id] { scroll-margin-block-start: calc(var(--header-h) + 0.5rem); }
/* Fokusziele (WCAG 2.4.11): beim Tabben Abstand zum Kopf; das Skript blendet den Kopf
   zusätzlich aus, wenn er ein per Tastatur fokussiertes Element verdecken würde. */
:is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) { scroll-margin-block-start: calc(var(--header-h) + 0.5rem); }