/*
Theme Name: Basis – martin-mutter.com
Theme URI: https://github.com/mamupt/wp-mm
Description: Kind-Theme von „Basis“ für martin-mutter.com: Schrift Rubik, MM-Palette, Texte, Glossar sowie die Anbindung von Rank Math, ACF und Lesezeit.
Author: Martin Mutter
Template: basis
Version: 0.3.0
Tested up to: 7.1
Requires at least: 7.0
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basis-mm
Update URI: https://github.com/mamupt/wp-mm
*/

/* Gliederung: Zustände · Kopfzeile · Listen · Flächen und Breiten · Karten · Bausteine · Formular ·
   Akkordeon · Leistungen · Blog · Glossar · Fuß. Gestaltung nach PROD, Zustände nach Vorgabe Martin. */

/* === Zustände: Hover wie PROD, Fokus eigenständig und immer sichtbar ======================== */
/* Fokus: Ring von Basis (--focus-color, --focus-breite; auf dunklen Flächen weiß) plus heller Saum
   (Vorgabe Martin 26.10.). Der Saum fehlt in Basis noch als Token, deshalb hier. */
:root{ --mm-fokus-saum: var(--wp--preset--color--weiss); }
:where([class*="-dunkel"], .has-sekundaer-background-color, .has-primaer-background-color){ --mm-fokus-saum: var(--wp--preset--color--akzent-dunkel); }
:focus-visible{ outline-offset: var(--focus-breite); box-shadow: 0 0 0 calc(2 * var(--focus-breite)) var(--mm-fokus-saum); }
/* Buttons (theme.json styles.elements.button): Ring etwas weiter außen */
.wp-element-button:focus-visible{ outline-offset: calc(1.5 * var(--focus-breite)); }

/* Fließtextlinks: Hover dickere Unterstreichung */
.basis-hauptbereich :is(p, li) a:not(.wp-element-button):hover{ text-decoration-thickness: 2px; }

/* === Kopfzeile ============================================================================== */
/* Ohne Linie wie PROD (Höhe: parts/header.html); beim Runterscrollen weg, beim Hochscrollen da (assets/js/kopfzeile.js) */
.wp-site-blocks > header:first-child{ box-shadow: none; transition: transform 0.25s ease; }
.wp-site-blocks > header:first-child.mm-kopf--weg{ transform: translateY(calc(-100% - 1rem)); }
.wp-site-blocks > header:first-child.mm-kopf--weg:has(:focus-visible){ transform: none; }
@media (prefers-reduced-motion: reduce){
  .wp-site-blocks > header:first-child{ transition: none; }
}
.basis-kopf-button .wp-block-button__link{ white-space: nowrap; }
/* Navigation mittig zwischen Logo und Button */
@media (min-width: 1024px){
  .basis-kopf > .alignwide{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .basis-kopf > .alignwide > .wp-block-group{ display: contents; }
  .basis-kopf > .alignwide .basis-hauptnavigation{ justify-self: center; }
  .basis-kopf > .alignwide .wp-block-buttons{ justify-self: end; }
}

/* Hauptmenü: Hover und aktuelle Seite in Primär (nie unterstrichen), Untermenü hellblau, Fokus nach innen */
.basis-hauptnavigation .wp-block-navigation-item__content:is(:hover, [aria-current]){ text-decoration: none; color: var(--wp--preset--color--primaer); }
.basis-hauptnavigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ background: var(--wp--preset--color--akzent-hell); }
.basis-hauptnavigation .wp-block-navigation-item__content:focus-visible{ outline-offset: calc(-1 * var(--focus-breite)); box-shadow: none; }
.wp-block-navigation__responsive-container-close{ color: var(--wp--preset--color--text); }
.wp-block-navigation__submenu-icon:hover,
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover{ color: var(--wp--preset--color--primaer); }
/* Chevron etwas größer und nah am eigenen Punkt, mehr Abstand zwischen den Punkten */
@media (min-width: 1024px){
  .basis-hauptnavigation .wp-block-navigation__container{ gap: var(--wp--preset--spacing--xl); }
  .basis-hauptnavigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon{ inline-size: 0.8em; block-size: 0.8em; margin-inline-start: 0.3em; }
  .basis-hauptnavigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg{ inline-size: 100%; block-size: 100%; stroke-width: 1.75; }
}

/* Menü (Overlay) unter dem Kopf, Einträge mittig. Untermenüs eingeklappt (assets/js/kopfzeile.js), Schalter
   in einer eigenen Spalte rechts (links gleich breit frei). Die !important-Angaben übersteuern die
   Overlay-Regeln des Navigationsblocks (Risiko bei Kern-Updates, Protokoll 14 Abschnitt 7).
   Ohne Skript klappt der Schalter über aria-expanded auf. */
@media (max-width: 1023px){
  /* Menüsymbol bis 1023 px wie PROD (der Navigationsblock zeigt sonst schon ab 600 px die volle Navigation) */
  .basis-hauptnavigation .wp-block-navigation__responsive-container-open:not(.always-shown){ display: flex; }
  .basis-hauptnavigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ display: none; }
  .wp-block-navigation__responsive-container.is-menu-open{ inset-block-start: var(--wp--custom--header-h); }
  .is-menu-open .wp-block-navigation__responsive-container-content{ align-items: center !important; }
  .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container{ inline-size: 100%; justify-content: center; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ align-items: center !important; text-align: center; }
  .is-menu-open .wp-block-navigation__container,
  .is-menu-open .wp-block-navigation__submenu-container{ gap: 0 !important; }
  .is-menu-open .wp-block-navigation-item__content{ min-block-size: 2.5rem; display: inline-flex; align-items: center; padding-block: 0 !important; }
  .is-menu-open .wp-block-navigation-submenu{ display: grid !important; grid-template-columns: 2.5rem auto 2.5rem; justify-content: center; align-items: center; }
  .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content{ grid-column: 2; }
  .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container{ display: none !important; grid-column: 1 / -1; padding: 0 0 var(--wp--preset--spacing--xs) !important; }
  .is-menu-open .wp-block-navigation-submenu.mm-offen > .wp-block-navigation__submenu-container,
  .is-menu-open .wp-block-navigation-submenu > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container{ display: flex !important; }
  .is-menu-open .wp-block-navigation__submenu-icon{ display: inline-flex !important; inline-size: 2.5rem; block-size: 2.5rem; margin: 0 !important; justify-content: center; align-items: center; }
  .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon{ grid-column: 3; }
  .is-menu-open .wp-block-navigation__submenu-icon svg{ inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 1.5; transition: transform .15s; }
  .is-menu-open .mm-offen > .wp-block-navigation__submenu-icon svg{ transform: rotate(180deg); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce){
  .is-menu-open .wp-block-navigation__submenu-icon svg{ transition: none; }
}

/* === Typografie und Spalten ================================================================= */
/* Mobil lange Wörter in Überschriften trennen statt über den Rand laufen; nur Wörter ab 12 Zeichen,
   sonst trennt der Browser auch Wörter, die in die nächste Zeile passen würden */
@media (max-width: 767px){ :is(h1, h2, h3){ hyphens: auto; hyphenate-limit-chars: 12 5 5; } h1{ hyphenate-limit-chars: 10 4 4; } }
/* Abstand Abschnittsüberschrift zu Text wie PROD */
.mm-abschnitt > h2.wp-block-heading:not(:last-child){ margin-block-end: var(--wp--preset--spacing--xl); }
/* Spalten ab 768 px nebeneinander (Standard-Breakpoint). Der Kern stapelt bis 781 px mit flex-basis 100% !important,
   das auch Inline-Breiten schlägt; in diesen 14 px teilen sich daher alle Spalten die Breite gleichmäßig (flex-grow 1 aus dem Kern). */
@media (min-width: 768px) and (max-width: 781px){
  .wp-block-columns:not(.is-not-stacked-on-mobile){ flex-wrap: nowrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis: 0 !important; }
}

/* === Listenstile (functions.php: register_block_style für core/list) ======================== */
/* Häkchen: ✓ in Primär; das Zeichen ist Gestaltung, Screenreader lesen die Liste wie gewohnt */
:is(.is-style-haekchen, .is-style-haekchen-zeile, .is-style-ohne-punkte, .is-style-nebeneinander, .mm-feld-branchen ul){ list-style: none; padding-inline-start: 0; }
:is(.is-style-haekchen, .mm-feld-branchen ul) > li{ position: relative; padding-inline-start: 1.75em; }
:is(.is-style-haekchen, .mm-feld-branchen ul) > li + li{ margin-block-start: var(--wp--preset--spacing--2xs); }
:is(.is-style-haekchen, .is-style-haekchen-zeile, .mm-feld-branchen ul) > li::before{ content: "✓" / ""; color: var(--wp--preset--color--primaer); font-weight: 700; }
:is(.is-style-haekchen, .mm-feld-branchen ul) > li::before{ position: absolute; inset-inline-start: 0; }
/* Häkchen in einer Zeile (Kopf der Leistungen: kostenlos · 30 Minuten · unverbindlich) */
.is-style-haekchen-zeile{ display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--m); }
.is-style-haekchen-zeile > li::before{ margin-inline-end: 0.4em; }
/* Nebeneinander: Linkreihen (Kontakt, Social-Profile) klein, fett, dunkel */
.is-style-nebeneinander{ display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m); }
.is-style-nebeneinander a{ font-size: var(--wp--preset--font-size--klein); font-weight: 600; color: var(--wp--preset--color--sekundaer); text-decoration: none; }
.is-style-nebeneinander a:hover{ text-decoration: underline; }
/* Symbole vor Mail, LinkedIn und Facebook (dekorativ, der Linktext bleibt der Name) */
:is(.is-style-nebeneinander, .is-style-haekchen) a:is([href^="mailto:"], [href*="linkedin.com"], [href*="facebook.com"])::before{
  content: ""; display: inline-block; inline-size: 1.1em; block-size: 1.1em; margin-inline-end: 0.4em; vertical-align: -0.15em;
  background: currentColor; -webkit-mask: var(--mm-symbol) center / contain no-repeat; mask: var(--mm-symbol) center / contain no-repeat;
}
a[href^="mailto:"]{ --mm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zM3 6l9 7 9-7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
a[href*="linkedin.com"]{ --mm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2 9h4v12H2zM9 9h4v2c.6-1.1 2-2.3 4.2-2.3 4.3 0 4.8 2.8 4.8 6.5V21h-4v-5.2c0-1.3 0-3-1.8-3s-2.2 1.4-2.2 2.9V21H9z'/%3E%3C/svg%3E"); }
a[href*="facebook.com"]{ --mm-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3c-2.8 0-4.5 1.8-4.5 4.6V11H7v4h2.5v8h4v-8h3l.5-4h-3.5V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E"); }

/* === Flächen und Breiten ==================================================================== */
/* Flächen einfarbig wie PROD: styles/*.json ersetzen die Basis-Varianten gleichen Namens (ohne Verlauf) */
/* Fließtext in der Textbreite; Raster, Spalten und Abfragen in der Inhaltsbreite (1140 px) */
.mm-abschnitt{ padding-block: var(--wp--preset--spacing--abschnitt); }
.is-layout-constrained > .mm-kachelreihe,
.mm-abschnitt.is-layout-constrained > :is(.wp-block-columns, .wp-block-query, nav){ max-inline-size: var(--wp--style--global--wide-size); }
.mm-abschnitt.is-layout-constrained > p:not(:last-child){ margin-block-end: 2em; }
/* Abschnittsüberschrift über einem Raster an dessen Kante */
.mm-abschnitt.is-layout-constrained > .wp-block-heading:has(+ .mm-kachelreihe){ max-inline-size: var(--wp--style--global--wide-size); }
/* Sprungziele unter der festen Kopfzeile */
.mm-abschnitt[id], .wp-block-group[id]{ scroll-margin-block-start: calc(var(--wp--custom--header-h) + 1rem); }

/* === Karten und Kacheln ===================================================================== */
/* Kartenreihen werden als ul/ol mit li ausgegeben (functions.php): ohne Listenpunkte und Einzug */
.mm-kachelreihe{ list-style: none; padding-inline-start: 0; margin-block-end: 0; }
.mm-abschnitt .mm-kachelreihe{ gap: var(--wp--preset--spacing--m); grid-template-columns: repeat(auto-fit, minmax(min(var(--wp--preset--dimension--karte-m), 100%), 1fr)); }
.mm-kachel{ background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--text); padding: var(--wp--preset--spacing--l); }
.mm-kachel > :first-child, .is-style-karte > :first-child{ margin-block-start: 0; }
/* Rahmen 1 px Sekundär, Radius 24 px; Titel dunkel, fett, ohne Unterstreichung */
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .mm-abfrage-unterleistungen .is-style-karte, .mm-feld-preis_ab){ border: 1px solid var(--wp--preset--color--sekundaer); border-radius: var(--wp--preset--border-radius--l); }
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .is-style-karte) :is(h2, h3, h4){ font-size: var(--wp--preset--font-size--h4); font-weight: 500; }
/* Kartentitel: nur sehr lange Wörter (ab 18 Zeichen) trennen; die Breite regelt die Spaltenzahl */
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .is-style-karte) :is(h2, h3, h4){ hyphens: auto; hyphenate-limit-chars: 18 8 8; }
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .is-style-karte) :is(h2, h3, h4) a{ color: var(--wp--preset--color--sekundaer); text-decoration: none; }
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .is-style-karte) :is(h2, h3, h4) a:hover{ color: var(--wp--preset--color--primaer); }
/* Hover Rahmen dunkler; Fokus als Ring um die ganze Karte (der Titellink deckt die Karte ab) */
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel):hover{ border-color: var(--wp--preset--color--akzent-dunkel); }
:is(.basis-beitragskarte, .mm-bildkarte, .mm-kachel, .is-style-karte):has(a:focus-visible){ outline: var(--focus-breite) solid var(--focus-color); outline-offset: calc(1.5 * var(--focus-breite)); box-shadow: 0 0 0 calc(3 * var(--focus-breite)) var(--mm-fokus-saum); }
.basis-beitragskarte .wp-block-post-title a:focus-visible{ outline: none; box-shadow: none; text-decoration: underline; }
/* Bildkarten: Inhalt mittig; ohne Symbol (Über mich, Werdegang) linksbündig */
.mm-bildkarte{ align-items: center; text-align: center; }
.mm-bildkarte:not(:has(.mm-symbol)){ align-items: flex-start; text-align: start; }
.mm-symbol img{ inline-size: var(--wp--preset--dimension--icon); block-size: auto; }
/* Startseiten-Kacheln: mehr Polster, größerer Titel */
body.home .mm-kachelreihe .mm-bildkarte{ padding: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--l); gap: var(--wp--preset--spacing--l); justify-content: flex-start; }
body.home .mm-kachelreihe .mm-bildkarte :is(h2, h3){ font-size: var(--wp--preset--font-size--h3); margin-block-start: var(--wp--preset--spacing--m); }

/* === Bausteine ============================================================================== */
/* Schrittnummer im Ablauf: Zahl im gefüllten Kreis */
.mm-schritt-nr{
  display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin: 0; border-radius: 50%;
  font-family: var(--wp--preset--font-family--akzent); font-size: var(--wp--preset--font-size--h4); font-weight: 600; line-height: 1;
  background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss);
}
/* Sprungnavigation „Auf dieser Seite“ unter dem Kopf */
/* Weißes Band über die volle Breite mit Linie unten (border-image malt über die Seitenränder hinaus) */
.mm-sprungnavigation{
  gap: var(--wp--preset--spacing--s); align-items: center;
  padding-block: var(--wp--preset--spacing--s);
  border-image: linear-gradient(to top, var(--wp--preset--color--akzent-hell) 1px, var(--wp--preset--color--weiss) 1px) fill 0 // 0 100vmax;
}
@media (max-width: 767px){ .mm-sprungnavigation{ flex-direction: column; } }
.mm-sprungnavigation ul{ margin: 0; }
.mm-sprungnavigation a:not(.wp-element-button){ text-decoration: none; }
.mm-sprungnavigation a:not(.wp-element-button):is(:hover, :focus-visible){ text-decoration: underline; }
/* Seitenkopf (Startseite): Dachzeile und Kopf in einem header als eine dunkle Fläche, Spalten in der Inhaltsbreite */
.mm-seitenkopf{ padding-block: var(--wp--preset--spacing--xl); }
.mm-seitenkopf.is-style-abschnitt-dunkel{ padding-block: var(--wp--preset--spacing--3xl); }
.is-style-dachzeile a{ display: inline-block; min-block-size: 1.5rem; min-inline-size: 1.5rem; text-align: center; } /* Zielgröße 24 px auch bei kurzen Namen wie „KI“ (WCAG 2.5.8) */
.mm-seitenkopf > .is-style-dachzeile{ max-inline-size: var(--wp--style--global--wide-size); text-align: center; }
.mm-seitenkopf.is-layout-constrained > .wp-block-columns{ max-inline-size: var(--wp--style--global--wide-size); gap: var(--wp--preset--spacing--xl); }
.mm-seitenkopf .is-style-aufmacher{ font-size: var(--wp--preset--font-size--h1); line-height: 1.15; margin-block: 0; color: inherit; }
.mm-seitenkopf .wp-block-image img{ inline-size: 100%; border-radius: 0; }
/* Vertrauenszeile: weißes Band, einzeilig, klein, fett, Häkchen im gefüllten Kreis */
.mm-vertrauen{
  padding-block: var(--wp--preset--spacing--m); background: var(--wp--preset--color--weiss);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--weiss); clip-path: inset(0 -100vmax);
}
.mm-vertrauen .is-style-haekchen-zeile{ justify-content: center; gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l); font-size: var(--wp--preset--font-size--mini); font-weight: 600; color: var(--wp--preset--color--sekundaer); }
.mm-vertrauen .is-style-haekchen-zeile > li{ display: inline-flex; align-items: center; }
.mm-vertrauen .is-style-haekchen-zeile > li::before{
  display: inline-grid; place-items: center; inline-size: 1.3em; block-size: 1.3em; border-radius: 50%; line-height: 1;
  background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss);
}
/* Band mit Aufruf (Leistungsübersicht): kräftiges Blau, Inhalt zentriert untereinander */
.mm-band{ padding-block: var(--wp--preset--spacing--xl); }
.mm-band > .wp-block-group{ flex-direction: column; align-items: center; text-align: center; }
/* Branchenblock: hohe zweifarbige Fläche, Inhalt senkrecht mittig; Überschrift ein Wort je Zeile,
   nie mitten im Wort; Liste ohne Haken, Links ohne Unterstreichung */
.wp-block-columns:has(> .is-style-flaeche-dunkel){ gap: 0; max-inline-size: var(--wp--style--global--wide-size); }
.wp-block-columns:has(> .is-style-flaeche-dunkel) > .wp-block-column{
  display: flex; flex-direction: column; justify-content: center; padding: var(--wp--preset--spacing--m);
}
/* Mobil wie PROD: Fläche randlos am Abschnittsanfang */
@media (max-width: 767px){
  .mm-abschnitt:has(> .wp-block-columns > .is-style-flaeche-dunkel){ padding-block-start: 0; padding-inline: 0; }
}
.is-style-flaeche-dunkel :is(h2, h3){ color: var(--wp--preset--color--weiss); }
.is-style-flaeche-dunkel > :is(h2, h3){ inline-size: min-content; max-inline-size: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.is-style-flaeche-hell li{ overflow-wrap: normal; hyphens: auto; }
.is-style-flaeche-hell .is-style-haekchen > li{ padding-inline-start: 0; }
.is-style-flaeche-hell .is-style-haekchen > li::before{ content: none; }
.is-style-flaeche-hell a{ color: var(--wp--preset--color--link-aaa); text-decoration: none; }
.is-style-flaeche-hell a:hover{ text-decoration: underline; }
/* Ab Tablet zwei gleich breite Spalten, Inhalt zur Mitte hin eingerückt; ab Desktop hoch wie PROD (40rem) */
@media (min-width: 768px){
  .wp-block-columns:has(> .is-style-flaeche-dunkel){ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-columns:has(> .is-style-flaeche-dunkel) > .wp-block-column{ min-inline-size: 0; padding-block: var(--wp--preset--spacing--xl); }
  .wp-block-columns:has(> .is-style-flaeche-dunkel) > .is-style-flaeche-dunkel{ padding-inline: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--xl); }
  .wp-block-columns:has(> .is-style-flaeche-dunkel) > .is-style-flaeche-hell{ padding-inline: var(--wp--preset--spacing--xl); }
}
@media (min-width: 1024px){
  .wp-block-columns:has(> .is-style-flaeche-dunkel) > .wp-block-column{ min-block-size: 40rem; }
}

/* === Formular =============================================================================== */
/* Kasten mit Rahmen (Kontaktformular der Startseite) */
.mm-rahmen{ border: 1px solid var(--wp--preset--color--sekundaer); border-radius: var(--wp--preset--border-radius--l); background: var(--wp--preset--color--weiss); padding: var(--wp--preset--spacing--l); }
/* Name und E-Mail ab Tablet nebeneinander; Felder als Pillen, nie breiter als das Formular */
@media (min-width: 768px){
  .basis-formular{ display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--m); }
  .basis-formular > *{ grid-column: 1 / -1; }
  .basis-formular > .basis-formular__feld:nth-of-type(-n+2){ grid-column: auto; }
}
.basis-formular label{ font-weight: 400; }
.basis-formular :is(input, textarea, select){ box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; }
/* Rasterzellen dürfen schmaler werden als die Eigenbreite der Felder (sonst bei 320 px waagerechter Bildlauf) */
.basis-formular > *{ min-inline-size: 0; }
.basis-formular :is(input:not([type="hidden"]):not([type="checkbox"]), textarea){ border-radius: var(--wp--preset--border-radius--l); border: 1px solid var(--wp--preset--color--feldrand); padding: 0.6em 1em; }
.basis-formular :is(input:not([type="hidden"]):not([type="checkbox"]), textarea):hover{ border-color: var(--wp--preset--color--sekundaer); }
.basis-formular :is(input, textarea):focus-visible{ border-color: var(--wp--preset--color--primaer); outline-offset: 1px; }
/* Rahmen wie die Button-Vorgabe in theme.json: Bausteine setzt border: 0 und ist spezifischer (Übergang, bis Bausteine das streicht) */
.basis-formular button[type="submit"]{ justify-self: center; font-size: var(--wp--preset--font-size--text); font-weight: 600; padding: 0.5em 1.4em; border: 2px solid var(--wp--preset--color--sekundaer); }

/* === Akkordeon (FAQ, Über mich, Leistungen) und Inhaltsverzeichnis ========================== */
/* Nie unterstrichen (Vorgabe Martin); Fragen nutzen die volle Zeile (kein ausbalancierter Umbruch) */
@media (hover: hover){
  .wp-block-details > summary:hover{ text-decoration: none; }
}
.wp-block-details > summary, .wp-block-details > summary :is(h2, h3, h4){ text-wrap: wrap; }
/* Akkordeon: hellblaue Pille mit Plus und Minus, ohne Kasten. Hover Rahmen innen (kein Layoutsprung), Fokus Ring außen */
.wp-block-details:not(.basis-toc){ background: transparent; border: 0; border-radius: 0; }
.wp-block-details:not(.basis-toc) > summary{
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--s);
  background: var(--wp--preset--color--akzent-hell); border-radius: var(--wp--preset--border-radius--rund);
  padding: 0.6em 1.2em; font-weight: 500;
}
.wp-block-details:not(.basis-toc) > summary::-webkit-details-marker{ display: none; }
.wp-block-details:not(.basis-toc) > summary::after{ content: "+" / ""; font-size: var(--wp--preset--font-size--h4); line-height: 1; color: var(--wp--preset--color--primaer); }
.wp-block-details:not(.basis-toc)[open] > summary::after{ content: "–" / ""; }
.wp-block-details:not(.basis-toc) > summary:hover{ color: var(--wp--preset--color--sekundaer); box-shadow: inset 0 0 0 1px var(--wp--preset--color--primaer); }
.wp-block-details:not(.basis-toc) > summary:focus-visible:hover{ box-shadow: inset 0 0 0 1px var(--wp--preset--color--primaer), 0 0 0 calc(2 * var(--focus-breite)) var(--mm-fokus-saum); }
/* Über mich, Qualifikationen wie PROD: gerahmte Pillen mit Plus links, halbfett, dicht untereinander */
.mm-qualifikationen .wp-block-details + .wp-block-details{ margin-block-start: var(--wp--preset--spacing--2xs); }
.mm-qualifikationen .wp-block-details > summary{ flex-direction: row-reverse; justify-content: flex-end; border: 1px solid var(--wp--preset--color--sekundaer); border-radius: var(--wp--preset--border-radius--l); padding: 0.25em 0.6em; line-height: 1.3; font-weight: 600; }
.mm-qualifikationen > .wp-block-details + h3{ margin-block-start: var(--wp--preset--spacing--2xl); }
/* Inhaltsverzeichnis: offen in gerahmter Box mit Pfeil, genau in der Textbreite */
.basis-toc{ box-sizing: border-box; border: 1px solid var(--wp--preset--color--sekundaer); border-radius: var(--wp--preset--border-radius--l); }
.basis-toc > summary{ box-sizing: border-box; list-style: none; justify-content: space-between; font-size: var(--wp--preset--font-size--text); font-weight: 600; }
.basis-toc > summary::-webkit-details-marker{ display: none; }
.basis-toc > summary::after{ content: ""; inline-size: 0.6em; block-size: 0.6em; margin-inline-end: 0.15em; border-inline-end: 2px solid; border-block-end: 2px solid; transform: rotate(45deg); transition: transform .15s; }
.basis-toc[open] > summary::after{ transform: rotate(-135deg); }
.basis-toc > summary:hover{ color: var(--wp--preset--color--primaer); }
.basis-toc > summary:focus-visible{ outline-offset: 0; border-radius: var(--wp--preset--border-radius--s); }
/* Lange Wörter in Einträgen umbrechen statt waagerecht überlaufen (320 px, „Suchmaschinenoptimierung“) */
.basis-toc a{ overflow-wrap: anywhere; hyphens: auto; }

/* === Leistungen ============================================================================= */
.mm-leistung-bild img{ border-radius: var(--wp--preset--border-radius--m); }
/* Text und Bild: Bild links wie PROD, im Quelltext bleibt der Text zuerst (Leseordnung) */
@media (min-width: 768px){ .mm-bild-links{ flex-direction: row-reverse; } }
/* Alle Abschnitte an der Inhaltskante (1140 px) wie PROD */
.mm-leistung{ --wp--style--global--content-size: var(--wp--style--global--wide-size); }
/* Abstände wie PROD: Kopf und Abschnitte mit dem Abschnittsabstand; der Hauptbereich setzt oben und unten keinen eigenen */
.mm-leistung.basis-hauptbereich{ padding-block: 0; }
.mm-leistung-kopf{ padding-block: var(--wp--preset--spacing--abschnitt); }
body.single-leistung .mm-abschnitt{ margin-block: 0; }
/* Abschnitte im Inhalt ohne zusätzlichen Einzug, an der Containerkante */
.mm-leistung > .wp-block-post-content.alignwide > .alignfull{ padding-inline: 0; }
/* Kopf: Brotkrumen und Häkchenzeile klein (Brotkrumen bleiben unterstrichen: Farbabstand zum Text unter 3:1);
   Hauptbutton gefüllt, Zweitbutton umrandet, untereinander. Der gefüllte Button bleibt der einzige je Ansicht
   (die Sprungleiste darunter nutzt den normalen Button, Vorgabe Martin 27.10.) */
.mm-leistung-kopf :is(.rank-math-breadcrumb, .is-style-haekchen-zeile){ font-size: var(--wp--preset--font-size--mini); }
.mm-leistung-kopf .wp-block-buttons{ flex-direction: column; align-items: flex-start; }
.mm-leistung-kopf .wp-block-button:not(.is-style-outline) > .wp-block-button__link{
  background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); border-color: var(--wp--preset--color--primaer);
}
.mm-leistung-kopf .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover{ border-color: var(--wp--preset--color--sekundaer); }
/* Kacheln ohne Rahmen, hell gefüllt auf weißem Abschnitt; Kennzahl groß und fett oben, Quelle unten */
.mm-leistung .mm-abschnitt:has(> .mm-kachelreihe > .mm-kachel){
  background: var(--wp--preset--color--weiss);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--weiss); clip-path: inset(0 -100vmax);
}
/* Vier Leistungskacheln 2 × 2, sonst ab 1024 px drei Spalten wie PROD. Der Ablauf (Kacheln mit Schrittnummer)
   2 × 2 und erst ab 1280 px in einer Reihe; in der Viertelspalte trennen Titel schon ab 14 Zeichen („Bestandsaufnahme“) */
@media (min-width: 768px){
  .mm-leistung .mm-kachelreihe:has(> .mm-kachel:nth-child(4):last-child):not(:has(.mm-schritt-nr)),
  .mm-kachelreihe:has(.mm-schritt-nr){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .mm-leistungen .mm-kachelreihe:has(> :nth-child(6):last-child),
  .mm-leistung .mm-kachelreihe:not(:has(.mm-schritt-nr, > :nth-child(4):last-child)){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  .mm-kachelreihe:has(.mm-schritt-nr){ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-kachel:has(> .mm-schritt-nr) h3{ hyphenate-limit-chars: 14 6 6; }
}
.mm-leistung .mm-kachel{ border: 0; background: var(--wp--preset--color--grund); padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l); gap: var(--wp--preset--spacing--m); }
.mm-leistung .mm-kachel:hover{ background: var(--wp--preset--color--akzent-hell); }
.mm-leistung .mm-kachel :is(h2, h3){ font-weight: 700; }
.mm-leistung .mm-kachel .is-style-aussage{ font-size: var(--wp--preset--font-size--h4); font-weight: 700; line-height: 1.25; color: var(--wp--preset--color--sekundaer); margin: 0; }
.mm-leistung .mm-kachel > p:last-child:has(small){ margin-block-start: auto; }
.mm-feld-kurz_erklaert{ border-inline-start: 4px solid var(--wp--preset--color--primaer); }
/* Preis groß und fett; Buttons der Leistungsseiten einzeilig */
.mm-feld-preis_ab .is-style-aussage{ font-size: var(--wp--preset--font-size--h2); font-weight: 700; color: var(--wp--preset--color--sekundaer); }
.mm-preis{ display: flex; flex-direction: column; gap: inherit; margin: 0; }
.mm-preis dd, .mm-preis p{ margin: 0; }
.mm-leistung .wp-element-button{ white-space: nowrap; }
/* Im Abschlussband ist die Button-Spalte ein Viertel breit: dort darf der Button umbrechen */
.mm-abschluss .wp-element-button{ white-space: normal; }

/* Abschluss „Erstgespräch“: dunkles Band (Blockfarbe Sekundär) wie PROD; Porträt so groß wie seine Spalte, Button rechts */
.mm-abschluss .wp-block-image img{ inline-size: 100%; }
.mm-abschluss .is-style-haekchen-zeile > li::before{ color: var(--wp--preset--color--akzent-hell); }

/* === Blog =================================================================================== */
/* Kopfband (Klasse und Blockfarben im Template): Fläche über die volle Breite, direkt unter dem Kopf wie PROD */
.wp-site-blocks > .mm-mit-kopfband{ margin-block-start: 0; padding-block-start: 0; }
.mm-kopfband{
  padding-block: var(--wp--preset--spacing--l); padding-inline: 0;
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--akzent-dunkel); clip-path: inset(0 -100vmax);
}
.mm-kopfband :is(a, h1, .rank-math-breadcrumb){ color: inherit; }
.mm-kopfband h1{ text-wrap: balance; }
/* Brotkrumen als geordnete Liste (functions.php), Trenner nur optisch */
.rank-math-breadcrumb ol{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rank-math-breadcrumb li{ min-inline-size: 0; overflow-wrap: anywhere; }
.rank-math-breadcrumb li + li::before{ content: "»" / ""; margin-inline: 0.4em; }
/* Seitenzahlen der Beitragsliste mit Zielgröße 44 px (WCAG 2.5.8) */
.wp-block-query-pagination-numbers{ display: flex; gap: var(--wp--preset--spacing--2xs); }
.wp-block-query-pagination-numbers .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
/* Metazeile wie PROD: fett, mit senkrechtem Strich getrennt */
.basis-meta{ gap: 0; font-weight: 600; }
.basis-meta li + li::before{ content: "|" / ""; margin-inline: 0.6em; }
/* Themenfilter unter dem Band: klein, zentriert, aktiv blau gefüllt */
.mm-filter{ margin-block-end: var(--wp--preset--spacing--xl); }
.basis-filter{ justify-content: center; gap: var(--wp--preset--spacing--xs); }
.basis-filter a{
  min-block-size: 2rem; padding: 0.2em 0.9em; font-size: var(--wp--preset--font-size--klein);
  border: 1px solid var(--wp--preset--color--primaer); border-radius: var(--wp--preset--border-radius--rund);
  color: var(--wp--preset--color--primaer); background: var(--wp--preset--color--weiss);
}
.basis-filter a:hover{ background: var(--wp--preset--color--akzent-hell); color: var(--wp--preset--color--sekundaer); }
.basis-filter a:focus-visible{ outline-offset: calc(1.5 * var(--focus-breite)); }
.basis-filter a[aria-current="page"]{ background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--weiss); }
/* Beitragskarten: gleiche Höhe je Reihe, Kategorie als hellblaues Kopfband über die ganze Kartenbreite */
.wp-block-post-template.is-layout-grid > li{ display: flex; }
.wp-block-post-template.is-layout-grid > li > *{ flex: 1; }
.basis-beitragskarte .wp-block-post-terms{
  align-self: stretch; margin: calc(-1 * var(--wp--preset--spacing--l)) calc(-1 * var(--wp--preset--spacing--l)) var(--wp--preset--spacing--s);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
  background: var(--wp--preset--color--akzent-hell); border-radius: var(--wp--preset--border-radius--m) var(--wp--preset--border-radius--m) 0 0;
  text-align: center; font-weight: 600;
}
.basis-beitragskarte .wp-block-post-terms a{ color: var(--wp--preset--color--sekundaer); text-decoration: none; }
.basis-beitragskarte .wp-block-post-terms a:hover{ text-decoration: underline; }
/* „Kurz und kompakt“: Überschrift über dem hellblauen Kasten */
.basis-kurz{ background: none; border: 0; padding: 0; border-radius: 0; }
.basis-kurz > :not(h2){ background: var(--wp--preset--color--akzent-hell); border: 1px solid var(--wp--preset--color--sekundaer); border-radius: var(--wp--preset--border-radius--l); padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) 2.5em; margin: 0; }
/* Beitrag: Abschnitte deutlich trennen (64 px vor, 32 px nach Überschriften; h3 direkt nach h2 nur 32 px davor) */
.blog-post-content :is(h2, h3, h4, h5, h6).wp-block-heading{ margin-block: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--l); }
.blog-post-content :is(h2.wp-block-heading + h3, h3.wp-block-heading + h4).wp-block-heading{ margin-block-start: var(--wp--preset--spacing--l); }
.blog-post-content > .wp-block-heading:first-child{ margin-block-start: 0; }
/* Absatzabstand wie PROD (xl nach jedem Absatz); Überschriften behalten ihren größeren Abstand */
.blog-post-content > p + *{ margin-block-start: var(--wp--preset--spacing--xl); }
/* Weitere Blogbeiträge: helles Band direkt am Fuß, Bezeichnung über dem Titel */
.basis-hauptbereich:has(.mm-weitere){ padding-block-end: 0; }
.basis-hauptbereich > .wp-block-template-part:has(> .mm-weitere){ margin-block-end: 0; }
.wp-site-blocks:has(:is(.mm-weitere, .mm-abschluss)) > :is(footer, .basis-fuss){ margin-block-start: 0; }
.mm-weitere{ margin-block-start: var(--wp--preset--spacing--abschnitt); padding-block: var(--wp--preset--spacing--xl); }
.mm-weitere .wp-block-post-navigation-link a{ display: grid; gap: var(--wp--preset--spacing--xs); text-decoration: none; color: var(--wp--preset--color--text); }
.mm-weitere .wp-block-post-navigation-link a:hover .post-navigation-link__title{ color: var(--wp--preset--color--link-aaa); text-decoration: underline; text-underline-offset: 0.2em; }
.mm-weitere .post-navigation-link-next{ text-align: end; margin-inline-start: auto; }
.mm-weitere .post-navigation-link__label{ text-transform: uppercase; }
.mm-weitere .post-navigation-link__title{ font-weight: 700; }

/* === Glossar ================================================================================ */
/* Suche in Textbreite, Buchstabenleiste und Liste in der Inhaltsbreite, Liste dreispaltig */
.is-layout-constrained > .mm-glossar-index{ max-inline-size: var(--wp--style--global--wide-size); }
.mm-glossar-az ul{ gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s); }
.mm-glossar-az :is(a, span){ font-size: var(--wp--preset--font-size--h4); }
@media (min-width: 768px){
  .mm-glossar-abschnitte{ grid-template-columns: repeat(3, 1fr); }
}
/* Eintrag: Kurzdefinition als hellblauer Kasten genau in der Textspalte */
.mm-glossar-lead{
  box-sizing: border-box; background: var(--wp--preset--color--akzent-hell); border: 1px solid var(--wp--preset--color--sekundaer);
  border-radius: var(--wp--preset--border-radius--l); padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
}
.mm-glossar-meta{ box-sizing: border-box; }

/* === Fuß ==================================================================================== */
/* Raster wie PROD: ab 768 px drei Spalten (Marke, Leistungen, Blog; darunter Seiten, Rechtliches), ab 1024 px eine Reihe.
   Marke nur so hoch wie ihr Inhalt */
@media (min-width: 768px){
  .basis-fuss > .wp-block-group.alignwide{ grid-template-columns: repeat(3, 1fr); column-gap: var(--wp--preset--spacing--l); }
}
@media (min-width: 1024px){
  .basis-fuss > .wp-block-group.alignwide{ grid-template-columns: 1.3fr repeat(4, 1fr); }
}
.basis-fuss-marke{ align-self: start; }
/* Links wie PROD unter der Spaltenüberschrift eingerückt (Zeilenabstand 0 als blockGap im Pattern) */
.basis-fuss .wp-block-navigation__container{ padding-inline-start: var(--wp--preset--spacing--m); }
/* Links: Hover und aktuelle Seite unterstrichen */
.basis-fuss .wp-block-navigation-item__content{ text-decoration: none; }
.basis-fuss .wp-block-navigation-item__content:hover,
.basis-fuss .current-menu-item > .wp-block-navigation-item__content{ text-decoration: underline; text-underline-offset: 0.15em; }
/* Unterpunkte immer sichtbar, klein und eng wie PROD (rund 32 px hoch, über der Mindestzielgröße WCAG 2.5.8).
   Hover und Fokus am Elternpunkt dürfen die Spalte nicht verbreitern (der Navigationsblock setzt dann min-width: 200px). */
.basis-fuss .wp-block-navigation .wp-block-navigation__submenu-container{ gap: 0 !important; min-inline-size: 0 !important; inline-size: auto !important; }
.basis-fuss .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ min-block-size: 0; padding-block: 0.25rem; font-size: var(--wp--preset--font-size--klein); }
/* Spalte Leistungen: Unterpunkte eingerückt unter dem Elternpunkt, ohne Aufklappen */
.mm-fuss-leistungen .wp-block-navigation-submenu{ flex-direction: column; align-items: flex-start; }
.mm-fuss-leistungen .wp-block-navigation .wp-block-navigation__submenu-container{
  position: static; block-size: auto;
  opacity: 1; visibility: visible; overflow: visible;
  border: 0; background: transparent; color: inherit;
  padding-inline-start: var(--wp--preset--spacing--m);
}
.mm-fuss-leistungen .wp-block-navigation-submenu__toggle,
.mm-fuss-leistungen .wp-block-navigation__submenu-icon{ display: none; }

/* Kontaktangaben im Impressum (address, functions.php): aufrecht wie Fließtext */
.mm-adresse{ font-style: normal; }