/*
Theme Name: KENJTEC One
Theme URI: https://kenjtec.com/wordpress
Author: KENJTEC
Author URI: https://kenjtec.com
Description: The KENJTEC block theme. Your brand colours, fonts and logo arrive from the KENJTEC cockpit; ready-made sections, whole pages, header and footer variants, style variations and block styles are built in — every piece is a plain WordPress block you can edit anywhere.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Version: 2.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kenjtec-basis
Tags: block-patterns, block-styles, full-site-editing, style-variations, one-column, wide-blocks, custom-colors, custom-logo, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, accessibility-ready, e-commerce, blog, portfolio
*/

/* ==========================================================================
   WARUM ES DIESES THEME GIBT (T-19.2, Neubau 17.09.2026)
   --------------------------------------------------------------------------
   Der Anzeigename ist seit 2.1 „KENJTEC One" (Riza, 17.09.2026: „Basis"
   klang nach basic) — EIN Theme für alles, in der Marke des Kunden. Die
   Kennung `kenjtec-basis` bleibt: Sie steckt in Wegen, Optionen und in jeder
   installierten Anlage (ein Anzeigename ist Text, eine Kennung ist ein Umzug).
   --------------------------------------------------------------------------
   Riza, 17.09.2026: „das Kenjtec WordPress Theme kann viel viel geiler sein …
   es soll alle nützlichen Plugins schon integriert haben, vor allem für die
   Websitegestaltung müssen Funktionen rein wie beim Elementor … das Theme hat
   auch keine Einstellungsmöglichkeiten."

   Die Antwort steht in vier Ordnern, nicht in einer Optionsseite:

   · patterns/   Abschnitte und GANZE SEITEN zum Einsetzen — erzeugt aus
                 core/wp_bausteine.py (tools/wp-theme-muster.py), damit das
                 Cockpit jeden Abschnitt wiedererkennt, den ein Kunde in
                 wp-admin einsetzt. Das ist unser „Elementor": Core-Blöcke,
                 kein eigenes Speicherformat, kein Lock-in (Entscheidung E3).
   · styles/     Stilvarianten (Dark, Editorial, Contrast, Soft, Sharp) und
                 Abschnitts-Stile (Surface, Band, Card, Outline) — die
                 „Einstellungen" eines Block-Themes liegen im Website-Editor
                 unter „Stile", und genau dort erscheinen sie.
   · parts/      drei Kopf- und drei Fußbereiche zum Tauschen.
   · templates/  Seite, Leinwand (ohne Titel), Leer (ohne Kopf und Fuß),
                 Schmal, Blog, Beitrag, Archiv, Suche, 404.

   Die MARKE kommt weiter von außen: kenjtec-gestaltung.php (MU-Plugin)
   schreibt --kenjtec-haupt, --kenjtec-hintergrund, --kenjtec-text — und seit
   dem 18.09.2026 --kenjtec-flaeche (Karten, Bänder) und --kenjtec-kontrast
   (die Schrift AUF haupt, vom Kern gegen haupt gerechnet) —, die Schrift und
   das Logo aus der Option `kenjtec_gestaltung`. Alles andere — Linien,
   Nebentext, Schatten, und Fläche/Kontrast, wo die Option sie nicht trägt —
   wird HIER aus diesen Farben gerechnet (color-mix). Ein Kundenauftritt
   zeigt deshalb nie KENJTEC-Mint, nur seine eigene Marke in Abstufungen.

   Die KNOPF- UND KARTENFORM der Marke (18.09.2026) kommt als Variablen aus
   derselben Option: --kenjtec-knopf-radius/-gewicht/-versal, für „Umriss"
   --kenjtec-knopf-hg/-farbe/-rand, für die Karte --kenjtec-radius (Standard,
   gross und klein folgen) und --wp--preset--shadow--karte:none. theme.json
   liest sie mit Rückfall; die Stilvarianten (Sharp, Soft …) setzen eigene
   Werte und gewinnen — sie sind eine Wahl des Kunden in wp-admin.

   ⚠️ ÜBERSCHRIFTEN, PREISE UND KENNZAHLEN STEHEN IN DER TEXTFARBE, nicht in
   haupt (Riza, 18.09.2026: „bei WordPress werden die Fontfarben anscheinend
   nicht übernommen" — H1 in Lindgrün auf Creme, während Website, Formular
   und Shop die Textfarbe nehmen). haupt ist die Farbe, die HANDELT: Links,
   Knöpfe, Markierungen, Linien — kein Lesetext.

   ⚠️ FARBEN IM CSS IMMER ÜBER DIE PRESETS (--wp--preset--color--…), nie über
   --kenjtec-… direkt. Die Stilvariante „Dark" tauscht die Palette in
   theme.json um (hintergrund → haupt, flaeche → dunkel-flaeche …); nur wer
   durch die Presets liest, folgt dem Tausch. Die einzige Ausnahme ist der
   :root-Block direkt darunter, der die Presets überhaupt erst speist.

   ⚠️ Ohne dieses Theme sind die Abschnitte NICHT kaputt. Sie stehen dann
   untereinander wie normale Blöcke — die Zusage aus E3 gilt weiter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS — drei Markenfarben rein, alles andere gerechnet
   --------------------------------------------------------------------------
   Rückfallwerte stehen hier UND in theme.json: Fehlt das MU-Plugin (frisch
   kopiertes Theme, fremde Installation), sieht die Seite trotzdem aus wie
   eine Seite. Das MU-Plugin schreibt mit `:root:root` und gewinnt damit
   gegen jede Zeile hier — so ist es gedacht.

   Alle abgeleiteten Töne stehen an :root, nicht an body: theme.json gibt die
   Presets an :root aus, und eine Variable wird dort aufgelöst, wo sie
   deklariert ist — ein an body definierter Ton käme im Preset nie an. */
:root {
  --kenjtec-haupt: #04342C;
  --kenjtec-hintergrund: #FFFFFF;
  --kenjtec-text: #15201D;
  /* Akzent = Hover-/Fokusfarbe, aus `haupt` abgeleitet (Akte 098: die Marke
     hat keinen eigenen Akzent mehr). Setzt das MU-Plugin --kenjtec-akzent,
     gilt dessen Wert — es schreibt mit höherem Gewicht. */
  --kenjtec-akzent: color-mix(in srgb, var(--kenjtec-haupt) 78%, white);
  /* ⚠️ KEIN Rueckfall fuer --kenjtec-schrift / --kenjtec-titelschrift hier:
     theme.json traegt die volle Kette (var(--kenjtec-…, system-ui …)), und
     nur wenn die Variable wirklich fehlt, kann styles/editorial.json fuer
     Titel auf Serifen ausweichen. Ein Rueckfall an dieser Stelle machte die
     Variable immer „gesetzt" und die Variante wirkungslos. */

  /* Abgeleitet — helle Lesart. Kontrast und Fläche sind nur der RÜCKFALL:
     Trägt die Option beide (seit 18.09.2026), schreibt das MU-Plugin sie mit
     `:root:root` darüber — gegen haupt gerechnet, nicht geraten. Creme auf
     Lindgrün war der Fall, in dem der Hintergrund als Knopfschrift versagte. */
  --kenjtec-kontrast: var(--kenjtec-hintergrund);
  --kenjtec-flaeche: color-mix(in srgb, var(--kenjtec-haupt) 6%, var(--kenjtec-hintergrund));
  --kenjtec-flaeche-stark: color-mix(in srgb, var(--kenjtec-haupt) 13%, var(--kenjtec-hintergrund));
  --kenjtec-linie: color-mix(in srgb, var(--kenjtec-text) 14%, var(--kenjtec-hintergrund));
  --kenjtec-neben: color-mix(in srgb, var(--kenjtec-text) 68%, var(--kenjtec-hintergrund));

  /* Abgeleitet — dunkle Lesart, für styles/dark.json (Palette umgehängt) */
  --kenjtec-dunkel-flaeche: color-mix(in srgb, var(--kenjtec-kontrast) 8%, var(--kenjtec-haupt));
  --kenjtec-dunkel-flaeche-stark: color-mix(in srgb, var(--kenjtec-kontrast) 15%, var(--kenjtec-haupt));
  --kenjtec-dunkel-linie: color-mix(in srgb, var(--kenjtec-kontrast) 18%, var(--kenjtec-haupt));
  --kenjtec-dunkel-neben: color-mix(in srgb, var(--kenjtec-kontrast) 72%, var(--kenjtec-haupt));
  --kenjtec-dunkel-akzent: color-mix(in srgb, var(--kenjtec-kontrast) 40%, var(--kenjtec-haupt));

  /* WooCommerce liest diese Variablen, wenn es installiert ist — ohne Shop
     stehen sie einfach herum. Ein Shop in Markenfarben ohne eine Zeile
     Einstellung. */
  --wc-primary: var(--kenjtec-haupt);
  --wc-primary-text: var(--kenjtec-kontrast);
  --wc-secondary: var(--kenjtec-flaeche);
  --wc-secondary-text: var(--kenjtec-text);
  --wc-highlight: var(--kenjtec-akzent);
  --wc-content-bg: var(--kenjtec-hintergrund);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; }
:where(img) { vertical-align: middle; }
:where(figure) { margin: 0; }

/* Bedienbare Elemente: 44 px sind das Mindestmaß fürs Antippen (Grundsatz 2). */
:where(.wp-block-button__link, button, input[type="submit"], .wp-block-search__button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   1. KOPFBEREICH — ruhig, klebend, beim Scrollen aus Glas
   --------------------------------------------------------------------------
   Das Besondere dieses Themes, aus einem Griff: Der Kopf ist ein Core-Block
   mit `position: sticky` (im Editor abschaltbar). Sobald die Seite scrollt,
   setzt assets/theme.js die Klasse `kenjtec-kopf--gescrollt`, und der Kopf
   wird zu einer halbtransparenten Glasleiste in der Hintergrundfarbe des
   Kunden — dieselbe Handschrift wie die Menü-Kapsel auf kenjtec.com, nur in
   seinen Farben. Ohne JS bleibt er einfach ein klebender Kopf. */
.kenjtec-kopf {
  padding-block: 0.75rem;
  border-bottom: 1px solid transparent;
  background: var(--wp--preset--color--hintergrund);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.kenjtec-kopf.is-position-sticky { z-index: 50; }
/* ⚠️ Das Kleben muss am <header> haengen, nicht an der Gruppe darin: Ein
   sticky-Element klebt nur innerhalb seines Elternkastens, und der <header>
   der Vorlage ist genau so hoch wie die Gruppe — sie kaeme nie ins Rutschen.
   Deshalb erbt der <header> die Eigenschaft, sobald die Gruppe darin im
   Editor auf „Sticky" steht (Klasse is-position-sticky). Stellt der Kunde
   die Position auf „Standard", ist auch der <header> wieder normal. */
header.wp-block-template-part:has(> .kenjtec-kopf.is-position-sticky),
header.wp-block-template-part:has(> .kenjtec-leiste + .kenjtec-kopf.is-position-sticky) { position: sticky; top: 0; z-index: 50; }
/* Mit Leiste darueber: Die Leiste darf beim Scrollen verschwinden, der Kopf
   bleibt. Dazu klebt der <header> um die Leistenhoehe nach oben versetzt;
   die Hoehe misst assets/theme.js (--kenjtec-leiste-hoehe), ohne JS kleben
   beide — richtig, nur etwas hoeher. */
header.wp-block-template-part:has(> .kenjtec-leiste + .kenjtec-kopf.is-position-sticky) { top: calc(-1 * var(--kenjtec-leiste-hoehe, 0px)); }
.admin-bar header.wp-block-template-part:has(> .kenjtec-kopf.is-position-sticky) { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar header.wp-block-template-part:has(> .kenjtec-leiste + .kenjtec-kopf.is-position-sticky) { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--kenjtec-leiste-hoehe, 0px)); }
/* ⚠️ Beim Wechsel aendert sich NUR Farbe, Linie und Schatten — nie die
   Hoehe (2.3.1, 18.09.2026: „das Menü flackert"). Ein Kopf, der beim
   Scrollen von 0.9rem auf 0.55rem schrumpfte, verschob die ganze Seite um
   elf Pixel unter dem Leser; an der Schwelle kippte das hin und her. Die
   Hysterese dazu steht in assets/theme.js. */
.kenjtec-kopf--gescrollt {
  border-bottom-color: var(--wp--preset--color--linie);
  background: color-mix(in srgb, var(--wp--preset--color--hintergrund) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--wp--preset--shadow--leise);
}
.kenjtec-kopf__zeile { min-height: 48px; }

.kenjtec-marke { align-items: center; gap: 0.75rem; }

/* Logo ODER Name (Riza, 17.09.2026): Steht ein Logo da, verschwindet der
   Seitentitel daneben — die meisten Marken-Logos tragen die Wortmarke schon,
   und „Studio Nord  Studio Nord" liest sich wie ein Fehler. Der Name bleibt
   für Vorleseprogramme erhalten: Der Logo-Link trägt ihn als aria-label
   (kenjtec-gestaltung.php). Ein Symbol-Logo ohne Wortmarke? Dann bekommt der
   Seitentitel im Editor den Blockstil „Show beside logo" (is-style-beside-logo)
   und steht wieder daneben — zwei Wege, kein Zwang. */
.kenjtec-marke:has(.kenjtec-logo) .wp-block-site-title:not(.is-style-beside-logo) { display: none; }
.kenjtec-logo { display: inline-flex; align-items: center; line-height: 0; }
/* SVG (Zeichnung aus dem BrandStudio) und IMG (hochgeladenes Markenlogo,
   logo_url ueber cdn.kenjtec.com) bekommen dieselbe Hoehe — das MU-Plugin
   rendert beides, je nachdem, was die Marke hat. */
.kenjtec-logo svg, .kenjtec-logo img { display: block; height: 44px; max-height: 44px; width: auto; max-width: 220px; border-radius: 0; }
.kenjtec-kopf--gescrollt .kenjtec-logo svg, .kenjtec-kopf--gescrollt .kenjtec-logo img { height: 36px; max-height: 36px; }

/* Kopf zentriert: Logo oben, Menü darunter */
.kenjtec-kopf--zentriert .kenjtec-marke { justify-content: center; }
.kenjtec-kopf--zentriert .wp-block-navigation { justify-content: center; }

/* Die schmale Leiste über dem Kopf (Variante „with top bar") */
.kenjtec-leiste {
  font-size: var(--wp--preset--font-size--small);
  padding-block: 0.4rem;
  background: var(--wp--preset--color--haupt);
  color: var(--wp--preset--color--kontrast);
}
.kenjtec-leiste a { color: inherit; }
.kenjtec-leiste .wp-block-site-tagline { color: inherit; opacity: .9; }
.kenjtec-leiste .wp-block-button__link {
  min-height: 32px;
  padding-block: 0.25rem;
  padding-inline: 0.9rem;
  font-size: var(--wp--preset--font-size--small);
  background: var(--wp--preset--color--kontrast);
  color: var(--wp--preset--color--haupt);
}

/* Navigation */
.wp-block-navigation { --kenjtec-nav-gap: 1.6rem; }
.wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.35rem; position: relative; }
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--haupt);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.wp-block-navigation__submenu-container {
  border: 1px solid var(--wp--preset--color--linie) !important;
  border-radius: var(--wp--custom--radius--standard);
  box-shadow: var(--wp--preset--shadow--karte);
  padding: 0.35rem !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: var(--wp--custom--radius--klein); padding: 0.5rem 0.75rem !important; }
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--flaeche); }
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; border-radius: var(--wp--custom--radius--standard); }
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--large); padding-block: 0.6rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
/* Im Vollbild-Menue stehen die Eintraege am Anfang der Zeile, egal wie das
   Menue im Kopf ausgerichtet ist — rechtsbuendige Listen liest niemand gern. */
.wp-block-navigation__responsive-container.is-menu-open { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; }

/* Kapsel-Menü (Blockstil „Pill") — die Kapsel von kenjtec.com, in Kundenfarben */
.wp-block-navigation.is-style-pill .wp-block-navigation__container { gap: 0.15rem; }
.wp-block-navigation.is-style-pill .wp-block-navigation-item__content {
  padding: 0.45rem 0.9rem;
  border-radius: var(--wp--custom--radius--standard);
}
.wp-block-navigation.is-style-pill .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation.is-style-pill .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-pill .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--haupt); }

/* --------------------------------------------------------------------------
   2. SEITENKOPF UND HAUPTBEREICH
   -------------------------------------------------------------------------- */
main.wp-block-group { padding-block-end: var(--wp--custom--rhythmus); }
.kenjtec-seitenkopf { padding-block: clamp(3rem, 7vw, 6rem) var(--wp--preset--spacing--40); }
.kenjtec-seitenkopf .wp-block-post-title,
.kenjtec-seitenkopf .wp-block-query-title { margin: 0; max-width: 20ch; text-wrap: balance; letter-spacing: -0.035em; }
.kenjtec-seitenkopf--zentriert { text-align: center; }
.kenjtec-beitragskopf { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.kenjtec-beitragskopf .kenjtec-meta { color: var(--wp--preset--color--neben); font-size: var(--wp--preset--font-size--small); }
.kenjtec-beitragskopf .kenjtec-meta > * { margin: 0; }
.kenjtec-beitragsbild img { width: 100%; max-height: 70vh; object-fit: cover; }
.kenjtec-beitragsfuss { padding-block: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--linie); }

/* --------------------------------------------------------------------------
   3. DER RHYTHMUS DER ABSCHNITTE (Bausteine aus dem Cockpit UND die Muster)
   --------------------------------------------------------------------------
   Ein Abschnitt ist die Baueinheit — also bekommt er den Abstand, nicht der
   einzelne Absatz darin. Und er ist BREIT: Der Baukasten schreibt bewusst
   kein `align`-Attribut (jedes Attribut mehr ist Lock-in); die Breite gibt
   deshalb das Theme, genau so wie Core es für `alignwide` tut. */
.is-layout-constrained > .kenjtec-abschnitt { max-width: var(--wp--style--global--wide-size); }
.kenjtec-abschnitt {
  padding-block: var(--wp--custom--rhythmus);
  scroll-margin-top: calc(var(--wp--custom--kopfhoehe) + 1rem);
}
.kenjtec-abschnitt > *:first-child { margin-top: 0; }
.kenjtec-abschnitt > *:last-child { margin-bottom: 0; }
.kenjtec-abschnitt + .kenjtec-abschnitt { padding-block-start: 0; }
.kenjtec-abschnitt + .kenjtec-variante-band,
.kenjtec-variante-band + .kenjtec-abschnitt { padding-block-start: var(--wp--custom--rhythmus); }

/* Jeder Abschnitt hat höchstens eine H2 — sie ist sein Titel. Die Einleitung
   direkt danach ist Nebentext, etwas größer, nie breiter als ein Lesemaß. */
.kenjtec-abschnitt > .kenjtec-feld-titel,
.kenjtec-abschnitt > .wp-block-columns .kenjtec-feld-titel { max-width: 28ch; }
.kenjtec-abschnitt > .kenjtec-feld-einleitung,
.kenjtec-abschnitt > .kenjtec-feld-text,
.kenjtec-abschnitt > .kenjtec-feld-hinweis {
  max-width: 62ch;
  color: var(--wp--preset--color--neben);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.5;
}
.kenjtec-abschnitt > .kenjtec-feld-hinweis { font-size: var(--wp--preset--font-size--small); }

/* Lesebreite für Text-Abschnitte — breit wäre hier kein Vorteil, sondern
   eine Zeile mit 140 Zeichen. */
.is-layout-constrained > .kenjtec-freitext,
.is-layout-constrained > .kenjtec-faq.kenjtec-variante-untereinander,
.is-layout-constrained > .kenjtec-oeffnungszeiten.kenjtec-variante-untereinander { max-width: var(--wp--style--global--content-size); }
.is-layout-constrained > .kenjtec-variante-schmal { max-width: 40rem; }
.kenjtec-freitext .kenjtec-feld-text { color: inherit; font-size: inherit; line-height: inherit; max-width: none; }
.kenjtec-freitext.kenjtec-variante-schmal .kenjtec-feld-text { font-size: var(--wp--preset--font-size--large); line-height: 1.6; }

/* Spalten in Abschnitten mittig ausrichten; auf dem Telefon immer umbrechen
   (Sicherung, falls ein Kunde die Umbruch-Option abschaltet — Grundsatz 2). */
.kenjtec-abschnitt .wp-block-columns { align-items: center; gap: var(--wp--preset--spacing--50); }
@media (max-width: 781px) {
  .kenjtec-abschnitt .wp-block-columns { flex-wrap: wrap !important; }
  .kenjtec-abschnitt .wp-block-column { flex-basis: 100% !important; }
}

/* --------------------------------------------------------------------------
   4. LISTEN UND EINTRÄGE — das Raster kommt aus CSS, nicht aus Spalten-Blöcken
   ⚠️ Bewusst `grid` statt `wp:columns`: Bei fünf Leistungen entstünden fünf
   Spalten, und die sind auf dem Telefon ein Fadenvorhang.
   -------------------------------------------------------------------------- */
.kenjtec-abschnitt .kenjtec-liste {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--50);
  grid-template-columns: 1fr;
}
.kenjtec-abschnitt .kenjtec-liste > * { margin: 0; }
@media (min-width: 600px) {
  .kenjtec-variante-karten .kenjtec-liste,
  .kenjtec-variante-zwei_spalten .kenjtec-liste,
  .kenjtec-variante-drei_spalten .kenjtec-liste,
  .kenjtec-variante-raster .kenjtec-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .kenjtec-variante-karten .kenjtec-liste,
  .kenjtec-variante-drei_spalten .kenjtec-liste,
  .kenjtec-variante-raster .kenjtec-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kenjtec-eintrag > *:first-child { margin-top: 0; }
.kenjtec-eintrag > *:last-child { margin-bottom: 0; }
.kenjtec-eintrag > * + * { margin-top: 0.5rem; }
.kenjtec-eintrag h3 { font-size: var(--wp--preset--font-size--large); margin-bottom: 0.35rem; }

/* Karten — nur wo die Fassung „Karten" oder „Drei Spalten" heißt. Ein
   Rahmen um jede Liste wäre Deko; hier ist er die Aussage der Fassung. */
.kenjtec-variante-karten .kenjtec-eintrag {
  background: var(--wp--preset--color--hintergrund);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--standard);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kenjtec-variante-karten .kenjtec-eintrag:hover {
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--karte);
  border-color: var(--wp--preset--color--flaeche-stark);
}

/* --------------------------------------------------------------------------
   5. EINZELNE ABSCHNITTSARTEN
   -------------------------------------------------------------------------- */
/* Titelbereich */
.kenjtec-hero { padding-block: clamp(3rem, 8vw, 6.5rem); }
.kenjtec-hero .kenjtec-feld-titel { font-size: var(--wp--preset--font-size--xxx-large); line-height: 1.06; max-width: 16ch; letter-spacing: -0.04em; text-wrap: balance; }
.kenjtec-variante-ohne_bild .kenjtec-feld-titel { max-width: 24ch; }
.kenjtec-hero .kenjtec-feld-text { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--neben); max-width: 52ch; line-height: 1.5; }
.kenjtec-hero .kenjtec-feld-knopf { margin-top: var(--wp--preset--spacing--40); }
.kenjtec-hero .kenjtec-feld-bild img {
  border-radius: var(--wp--custom--radius--gross);
  box-shadow: var(--wp--preset--shadow--leise);
  background: var(--wp--preset--color--flaeche);
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
/* Ein Titel, der die ganze Breite hat, darf zentriert stehen. */
.kenjtec-hero.kenjtec-variante-ohne_bild { text-align: center; border-bottom: 1px solid var(--wp--preset--color--linie); }
.kenjtec-hero.kenjtec-variante-ohne_bild > * { margin-inline: auto; }
.kenjtec-hero.kenjtec-variante-ohne_bild .wp-block-buttons { justify-content: center; }

/* Leistungen: eine kleine Zahl vor jeder Karte — gezählt vom CSS, nie vom
   Kunden gepflegt. Ein leises Ordnungszeichen statt Stock-Icons. */
.kenjtec-leistungen .kenjtec-liste { counter-reset: kenjtec-leistung; }
.kenjtec-leistungen .kenjtec-eintrag { counter-increment: kenjtec-leistung; }
.kenjtec-leistungen .kenjtec-eintrag::before {
  content: counter(kenjtec-leistung, decimal-leading-zero);
  display: block;
  font-family: var(--wp--preset--font-family--titelschrift);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--neben);
  margin-bottom: 0.75rem;
}
.kenjtec-leistungen.kenjtec-variante-untereinander .kenjtec-eintrag {
  padding-block: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--linie);
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: var(--wp--preset--spacing--40);
}
.kenjtec-leistungen.kenjtec-variante-untereinander .kenjtec-eintrag::before { margin: 0; padding-top: 0.35rem; }
.kenjtec-leistungen.kenjtec-variante-untereinander .kenjtec-eintrag > * { grid-column: 2; margin: 0; }
.kenjtec-leistungen.kenjtec-variante-untereinander .kenjtec-eintrag > * + * { margin-top: 0.35rem; }

.kenjtec-leistungen.kenjtec-variante-drei_spalten .kenjtec-eintrag {
  border-top: 1px solid var(--wp--preset--color--linie);
  padding-block: 1.5rem;
  padding-inline-end: 1rem;
}
.kenjtec-abschnitt h2, .kenjtec-abschnitt h3 { text-wrap: balance; }
.kenjtec-abschnitt .wp-block-column { min-width: 0; }
.kenjtec-hero .wp-block-columns { gap: clamp(2rem, 6vw, 5.5rem); }
.kenjtec-hero .wp-block-column > :first-child { margin-block-start: 0; }
.kenjtec-hero .kenjtec-feld-text { margin-block: 1.5rem; }
.kenjtec-hero + .kenjtec-abschnitt { padding-block-start: clamp(1.5rem, 4vw, 3rem); }
.kenjtec-freitext.kenjtec-variante-schmal { border-inline-start: 2px solid var(--wp--preset--color--linie); padding-inline-start: clamp(1.5rem, 4vw, 3rem); }
.kenjtec-preise .kenjtec-liste { align-items: stretch; }
.kenjtec-preise .kenjtec-eintrag { display: flex; flex-direction: column; }
.kenjtec-preise .kenjtec-feld-leistung { margin-block-start: auto; }

@media (min-width: 900px) {
  .kenjtec-galerie.kenjtec-variante-raster .kenjtec-liste { grid-template-columns: 1.4fr 1fr; }
  .kenjtec-galerie.kenjtec-variante-raster .kenjtec-eintrag:first-child:nth-last-child(3) { grid-row: span 2; }
  .kenjtec-galerie.kenjtec-variante-raster .kenjtec-eintrag:first-child:nth-last-child(3) figure,
  .kenjtec-galerie.kenjtec-variante-raster .kenjtec-eintrag:first-child:nth-last-child(3) img { height: 100%; }
}
@media (max-width: 781px) {
  .kenjtec-hero .kenjtec-feld-bild img { aspect-ratio: 4 / 3; }
  .kenjtec-hero.kenjtec-variante-bild_links .wp-block-column:first-child { order: 2; }
}

.kenjtec-page-narrow .wp-block-post-content > .kenjtec-abschnitt { max-width: 100%; }
.kenjtec-page-narrow .wp-block-post-content { max-width: min(100%, 40rem); margin-inline: auto; }

/* Kontakt und Standort: Anschrift, Telefon, Mail als ruhige Liste */
.kenjtec-kontakt .kenjtec-feld-adresse,
.kenjtec-standort .kenjtec-feld-adresse { font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
.kenjtec-kontakt .kenjtec-feld-telefon,
.kenjtec-kontakt .kenjtec-feld-email { margin: 0.25rem 0; font-weight: 500; }
.kenjtec-kontakt .kenjtec-feld-knopf,
.kenjtec-standort .kenjtec-feld-knopf { margin-top: var(--wp--preset--spacing--30); }
.kenjtec-standort .kenjtec-feld-wege { padding-inline-start: 1.25rem; }
.kenjtec-standort .kenjtec-feld-wege li::marker { color: var(--wp--preset--color--akzent); }
.kenjtec-kontakt .wp-block-columns,
.kenjtec-standort .wp-block-columns { align-items: start; }
.kenjtec-kontakt .wp-block-column:last-child,
.kenjtec-standort .wp-block-column:last-child {
  background: var(--wp--preset--color--flaeche);
  border-radius: var(--wp--custom--radius--standard);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.kenjtec-kontakt .wp-block-column:last-child > *:first-child,
.kenjtec-standort .wp-block-column:last-child > *:first-child { margin-top: 0; }
.kenjtec-kontakt.kenjtec-variante-einspaltig .wp-block-column,
.kenjtec-standort.kenjtec-variante-einspaltig .wp-block-column { background: none; padding: 0; }

/* Öffnungszeiten: Tag links, Zeit rechts. Zwei Absätze, eine Zeile. */
.kenjtec-oeffnungszeiten .kenjtec-liste { gap: 0; margin-top: var(--wp--preset--spacing--40); }
.kenjtec-oeffnungszeiten .kenjtec-eintrag {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--wp--preset--color--linie);
}
.kenjtec-oeffnungszeiten .kenjtec-eintrag:first-child { border-top: 1px solid var(--wp--preset--color--linie); }
.kenjtec-oeffnungszeiten .kenjtec-eintrag p { margin: 0; }
.kenjtec-oeffnungszeiten .kenjtec-feld-tag { font-weight: 600; }
.kenjtec-oeffnungszeiten .kenjtec-feld-zeit { font-variant-numeric: tabular-nums; color: var(--wp--preset--color--neben); }
.kenjtec-oeffnungszeiten .kenjtec-feld-hinweis { margin-top: var(--wp--preset--spacing--30); }
.kenjtec-oeffnungszeiten.kenjtec-variante-zwei_spalten .kenjtec-liste { column-gap: var(--wp--preset--spacing--60); }
@media (min-width: 600px) {
  .kenjtec-oeffnungszeiten.kenjtec-variante-zwei_spalten .kenjtec-eintrag:nth-child(2) { border-top: 1px solid var(--wp--preset--color--linie); }
}

/* Fragen und Antworten */
.kenjtec-faq .kenjtec-liste { gap: 0; margin-top: var(--wp--preset--spacing--40); }
.kenjtec-faq .kenjtec-eintrag { padding-block: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--linie); }
.kenjtec-faq .kenjtec-eintrag:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }
.kenjtec-faq .kenjtec-eintrag h3 { font-size: var(--wp--preset--font-size--medium); font-weight: 600; margin-bottom: 0.4rem; }
.kenjtec-faq .kenjtec-feld-antwort { color: var(--wp--preset--color--neben); }
.kenjtec-faq.kenjtec-variante-zwei_spalten .kenjtec-liste { gap: 0 var(--wp--preset--spacing--60); }
@media (min-width: 600px) {
  .kenjtec-faq.kenjtec-variante-zwei_spalten .kenjtec-eintrag:nth-child(2) { border-top: 1px solid var(--wp--preset--color--linie); }
  .kenjtec-faq.kenjtec-variante-zwei_spalten .kenjtec-eintrag:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--wp--preset--color--linie); }
}

/* Preise */
.kenjtec-preise .kenjtec-eintrag { text-align: start; }
.kenjtec-preise .kenjtec-feld-name { font-size: var(--wp--preset--font-size--medium); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--wp--preset--color--neben); }
.kenjtec-preise .kenjtec-feld-preis {
  font-family: var(--wp--preset--font-family--titelschrift);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--text);
  margin-block: 0.35rem 0.75rem;
}
.kenjtec-preise .kenjtec-feld-leistung { color: var(--wp--preset--color--neben); padding-top: 0.75rem; border-top: 1px solid var(--wp--preset--color--linie); }
.kenjtec-preise.kenjtec-variante-untereinander .kenjtec-eintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--linie);
}
.kenjtec-preise.kenjtec-variante-untereinander .kenjtec-feld-preis { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.kenjtec-preise.kenjtec-variante-untereinander .kenjtec-feld-leistung { border: 0; padding: 0; margin: 0; }

/* Team */
.kenjtec-team .kenjtec-eintrag { text-align: center; }
.kenjtec-team .kenjtec-feld-bild { order: -1; }
.kenjtec-team .kenjtec-eintrag { display: flex; flex-direction: column; }
.kenjtec-team .kenjtec-feld-bild img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--standard);
}
.kenjtec-team .kenjtec-feld-name { margin-top: 1rem; font-size: var(--wp--preset--font-size--medium); }
.kenjtec-team .kenjtec-feld-rolle { color: var(--wp--preset--color--neben); font-size: var(--wp--preset--font-size--small); margin-top: 0.15rem; }
.kenjtec-team.kenjtec-variante-untereinander .kenjtec-eintrag { flex-direction: row; align-items: center; text-align: start; gap: var(--wp--preset--spacing--40); }
.kenjtec-team.kenjtec-variante-untereinander .kenjtec-feld-bild { flex: 0 0 96px; }
.kenjtec-team.kenjtec-variante-untereinander .kenjtec-feld-name { margin-top: 0; }

/* Galerie: Raster mit Lightbox (theme.json), Reihe als Wischband ohne JS */
.kenjtec-galerie .kenjtec-eintrag { margin: 0; }
.kenjtec-galerie .kenjtec-feld-bild img {
  border-radius: var(--wp--custom--radius--standard);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}
.kenjtec-galerie .kenjtec-eintrag:hover img { transform: scale(1.02); }
.kenjtec-galerie .kenjtec-eintrag { overflow: hidden; border-radius: var(--wp--custom--radius--standard); }
.kenjtec-variante-raster .kenjtec-liste { gap: var(--wp--preset--spacing--30); }
.kenjtec-variante-reihe .kenjtec-liste {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 22rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wp--preset--spacing--40);
  padding-block-end: 0.5rem;
  gap: var(--wp--preset--spacing--30);
  scrollbar-width: thin;
}
.kenjtec-variante-reihe .kenjtec-eintrag { scroll-snap-align: start; }

/* Kundenstimmen: ein großes Anführungszeichen, leise, in der Hauptfarbe */
.kenjtec-referenzen .kenjtec-eintrag { position: relative; padding-top: 2.75rem; }
.kenjtec-referenzen .kenjtec-eintrag::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  inset-inline-start: 1.25rem;
  font-family: var(--wp--preset--font-family--titelschrift);
  font-size: 4rem;
  line-height: 1;
  color: var(--wp--preset--color--haupt);
  opacity: .18;
}
.kenjtec-referenzen.kenjtec-variante-untereinander .kenjtec-eintrag::before { inset-inline-start: 0; }
.kenjtec-referenzen .kenjtec-feld-zitat { font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
.kenjtec-referenzen .kenjtec-feld-quelle { color: var(--wp--preset--color--neben); font-size: var(--wp--preset--font-size--small); font-weight: 600; margin-top: 0.75rem; }
.kenjtec-referenzen .kenjtec-feld-quelle::before { content: "— "; }
.kenjtec-referenzen.kenjtec-variante-untereinander .kenjtec-eintrag { padding-block: var(--wp--preset--spacing--40) 0; border-top: 1px solid var(--wp--preset--color--linie); padding-top: 3rem; }

/* Aufruf — das Band (Abschnitt „aufruf", Fassung „band") */
.kenjtec-variante-band {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--kontrast) 14%, transparent), transparent 55%),
    var(--wp--preset--color--haupt);
  color: var(--wp--preset--color--kontrast);
  border-radius: var(--wp--custom--radius--gross);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.kenjtec-variante-band > * { margin-inline: auto; }
.kenjtec-variante-band h2, .kenjtec-variante-band h3, .kenjtec-variante-band a { color: inherit; }
.kenjtec-variante-band .kenjtec-feld-titel { font-size: var(--wp--preset--font-size--xx-large); max-width: 20ch; }
.kenjtec-variante-band .kenjtec-feld-text { color: inherit; opacity: .88; max-width: 48ch; }
.kenjtec-variante-band .wp-block-buttons { justify-content: center; margin-top: var(--wp--preset--spacing--40); }
.kenjtec-variante-band .wp-block-button__link { background: var(--wp--preset--color--kontrast); color: var(--wp--preset--color--haupt); border-width: 0; }
.kenjtec-variante-band .wp-block-button__link:hover,
.kenjtec-variante-band .wp-block-button__link:focus { background: color-mix(in srgb, var(--wp--preset--color--kontrast) 88%, var(--wp--preset--color--haupt)); color: var(--wp--preset--color--haupt); }
.kenjtec-aufruf.kenjtec-variante-ruhig { text-align: center; }
.kenjtec-aufruf.kenjtec-variante-ruhig > * { margin-inline: auto; }
.kenjtec-aufruf.kenjtec-variante-ruhig .wp-block-buttons { justify-content: center; margin-top: var(--wp--preset--spacing--30); }

/* Formular aus dem FormBuilder */
.kenjtec-formular .wp-block-shortcode,
.kenjtec-formular .kenjtec-form { margin-top: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------------------
   6. BLOCKSTILE — registriert in functions.php, gezeichnet hier
   --------------------------------------------------------------------------
   Sie erscheinen in der Seitenleiste jedes Blocks unter „Stile" — das ist
   die Stelle, an der ein Block-Theme seine Gestaltungsoptionen anbietet. */

/* Gruppe: Karte, Fläche, Band, Umriss kommen aus styles/section-*.json
   (Abschnitts-Stile). Hier nur, was JSON nicht kann: */
.is-style-card:hover { box-shadow: var(--wp--preset--shadow--karte); }

/* Erscheinen beim Scrollen — sanft, nur mit JS, nie bei reduzierter Bewegung */
html.kenjtec-js .is-style-reveal { transition: opacity .6s ease, transform .6s ease; }
html.kenjtec-js .is-style-reveal:not(.kenjtec-sichtbar) { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  html.kenjtec-js .is-style-reveal:not(.kenjtec-sichtbar) { opacity: 1; transform: none; }
}

/* Überschrift: Übertitel (klein, gesperrt) und Akzentlinie */
.wp-block-heading.is-style-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--akzent);
}
.wp-block-heading.is-style-accent-line { padding-bottom: 0.6rem; position: relative; }
.wp-block-heading.is-style-accent-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--haupt);
}
.has-text-align-center.is-style-accent-line::after { inset-inline-start: 50%; transform: translateX(-50%); }

/* Absatz: Vorspann */
.wp-block-paragraph.is-style-lead,
p.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--neben); }

/* Knopf: leise (Text mit Pfeil) und weich (Fläche) */
.wp-block-button.is-style-quiet .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--haupt);
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--wp--preset--color--haupt) 35%, transparent);
  text-underline-offset: 0.3em;
}
.wp-block-button.is-style-quiet .wp-block-button__link::after { content: "\2192"; margin-inline-start: 0.4em; transition: transform .2s; display: inline-block; }
.wp-block-button.is-style-quiet .wp-block-button__link:hover { text-decoration-color: currentColor; color: var(--wp--preset--color--akzent); }
.wp-block-button.is-style-quiet .wp-block-button__link:hover::after { transform: translateX(3px); }
[dir="rtl"] .wp-block-button.is-style-quiet .wp-block-button__link::after { content: "\2190"; }
[dir="rtl"] .wp-block-button.is-style-quiet .wp-block-button__link:hover::after { transform: translateX(-3px); }
.wp-block-button.is-style-soft .wp-block-button__link { background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--haupt); border-width: 0; }
.wp-block-button.is-style-soft .wp-block-button__link:hover { background: var(--wp--preset--color--flaeche-stark); color: var(--wp--preset--color--haupt); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; padding-block: calc(0.7rem - 2px); }

/* Bild: rund, gerahmt, schwebend */
.wp-block-image.is-style-round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.wp-block-image.is-style-framed img { border: 1px solid var(--wp--preset--color--linie); padding: 0.5rem; background: var(--wp--preset--color--hintergrund); border-radius: var(--wp--custom--radius--standard); }
.wp-block-image.is-style-floating img { box-shadow: var(--wp--preset--shadow--schwebend); border-radius: var(--wp--custom--radius--gross); }

/* Liste: Häkchen, zwei Spalten */
.wp-block-list.is-style-checklist { list-style: none; padding-inline-start: 0; }
.wp-block-list.is-style-checklist li { position: relative; padding-inline-start: 1.9rem; margin-block: 0.4rem; }
.wp-block-list.is-style-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.32em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--wp--preset--color--flaeche-stark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2315201D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.wp-block-list.is-style-two-columns { columns: 2; column-gap: var(--wp--preset--spacing--50); }
@media (max-width: 599px) { .wp-block-list.is-style-two-columns { columns: 1; } }

/* Zitat groß */
.wp-block-quote.is-style-large { border: 0; padding: 0; text-align: center; font-family: var(--wp--preset--font-family--titelschrift); font-size: var(--wp--preset--font-size--x-large); line-height: 1.25; }
.wp-block-quote.is-style-large cite { display: block; margin-top: 1rem; font-family: var(--wp--preset--font-family--grundschrift); font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--neben); }

/* Trennlinie kurz */
.wp-block-separator.is-style-short { width: 4rem; max-width: 4rem; border-width: 0 0 3px; border-color: var(--wp--preset--color--haupt); border-radius: 2px; }

/* Details (Aufklapper) als Karte */
.wp-block-details.is-style-card { border: 1px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius--standard); padding: 0.75rem 1.1rem; background: var(--wp--preset--color--hintergrund); }
.wp-block-details.is-style-card[open] { border-color: var(--wp--preset--color--flaeche-stark); box-shadow: var(--wp--preset--shadow--leise); }
.wp-block-details.is-style-card > :not(summary) { color: var(--wp--preset--color--neben); padding-block: 0.5rem 0.25rem; }

/* Spalten als Karten */
.wp-block-columns.is-style-cards > .wp-block-column {
  background: var(--wp--preset--color--hintergrund);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--standard);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Beitragsliste als Karten (Query Loop) */
.wp-block-post-template.is-style-cards { gap: var(--wp--preset--spacing--40); }
.wp-block-post-template.is-style-cards > li {
  background: var(--wp--preset--color--hintergrund);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: var(--wp--custom--radius--standard);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-post-template.is-style-cards > li:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--karte); }
.wp-block-post-template.is-style-cards > li > *:not(.wp-block-post-featured-image) { margin-inline: 1.25rem; }
.wp-block-post-template.is-style-cards > li > *:last-child { margin-bottom: 1.25rem; }
.wp-block-post-template.is-style-cards .wp-block-post-featured-image { margin: 0; }
.wp-block-post-template.is-style-cards .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.wp-block-post-template.is-style-cards .wp-block-post-title { font-size: var(--wp--preset--font-size--large); margin-top: 1.1rem; }
.wp-block-post-template.is-style-cards .wp-block-post-date { margin-top: 0.4rem; }
.wp-block-post-template.is-style-cards .wp-block-post-excerpt { margin-top: 0.6rem; font-size: var(--wp--preset--font-size--small); }
.wp-block-post-template.is-style-cards .wp-block-post-excerpt__more-text { margin-top: 0.5rem; font-weight: 600; }

/* Kennzahlen (Muster „Statistics") */
.kenjtec-kennzahlen .wp-block-column { text-align: center; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.kenjtec-kennzahlen .kenjtec-zahl {
  font-family: var(--wp--preset--font-family--titelschrift);
  font-size: var(--wp--preset--font-size--xxx-large);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wp--preset--color--text);
  margin: 0;
}
.kenjtec-kennzahlen .kenjtec-zahl + p { margin-top: 0.5rem; color: var(--wp--preset--color--neben); }

/* --------------------------------------------------------------------------
   7. FUSSBEREICH
   -------------------------------------------------------------------------- */
.kenjtec-fuss {
  margin-top: var(--wp--custom--rhythmus);
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--linie);
}
.kenjtec-fuss .wp-block-columns { align-items: start; }
.kenjtec-fuss h3, .kenjtec-fuss h4 { font-size: var(--wp--preset--font-size--small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--neben); margin-bottom: 0.75rem; }
.kenjtec-fuss .wp-block-navigation { --kenjtec-nav-gap: 0.35rem; }
.kenjtec-fuss .wp-block-navigation .wp-block-navigation-item__content::after { display: none; }
.kenjtec-fuss .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.2rem; }
.kenjtec-fuss .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--haupt); }
.kenjtec-fuss__zeile {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--linie);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--neben);
}
.kenjtec-fuss__zeile a { color: inherit; text-decoration: none; }
.kenjtec-fuss__zeile a:hover { color: var(--wp--preset--color--haupt); text-decoration: underline; }
.kenjtec-fuss__zeile p { margin: 0; }
/* Die Rechtslinks (functions.php, kenjtec_basis_fusslinks): Ohne Fussmenue und
   ohne Impressum/Datenschutz-Seite bleibt der Absatz leer — dann kein Rest. */
.kenjtec-fusslinks:empty { display: none; }
.kenjtec-fuss--schlicht { padding-block: var(--wp--preset--spacing--40); }
.kenjtec-fuss .wp-block-social-links { gap: 0.35rem; }
.kenjtec-fuss .wp-block-social-links .wp-social-link a { padding: 0.5rem; }
.wp-block-kenjtec-social { min-width: 0; }
.kenjtec-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: inherit;
}
.kenjtec-social-links li { margin: 0; padding: 0; }
.kenjtec-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  border-radius: var(--wp--custom--radius--klein);
  text-decoration: none;
}
.kenjtec-social-links a:hover { box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.kenjtec-social-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.kenjtec-social-links svg { display: block; flex-shrink: 0; }
.kenjtec-social-inherited { margin-block-start: var(--wp--preset--spacing--30); }

/* --------------------------------------------------------------------------
   8. NACH OBEN (assets/theme.js schaltet ihn ein), SUCHE, SEITENZAHLEN, 404
   -------------------------------------------------------------------------- */
.kenjtec-nach-oben {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: var(--wp--custom--radius--standard);
  border: 1px solid var(--wp--preset--color--linie);
  background: color-mix(in srgb, var(--wp--preset--color--hintergrund) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--wp--preset--color--haupt);
  box-shadow: var(--wp--preset--shadow--karte);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
html.kenjtec-js .kenjtec-nach-oben { display: inline-flex; }
.kenjtec-nach-oben.kenjtec-sichtbar { opacity: 1; transform: none; }
.kenjtec-nach-oben:hover { background: var(--wp--preset--color--haupt); color: var(--wp--preset--color--kontrast); border-color: var(--wp--preset--color--haupt); }
.kenjtec-nach-oben svg { width: 18px; height: 18px; }

.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); }
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding-inline: 0.5rem;
  border-radius: var(--wp--custom--radius--klein);
}
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--haupt); color: var(--wp--preset--color--kontrast); }
.wp-block-query-pagination-numbers .page-numbers:not(.current):hover { background: var(--wp--preset--color--flaeche); }

.kenjtec-404 { text-align: center; padding-block: var(--wp--preset--spacing--70); }
.kenjtec-404 > * { margin-inline: auto; }
.kenjtec-404 .kenjtec-404__zahl {
  font-family: var(--wp--preset--font-family--titelschrift);
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--flaeche-stark);
  margin: 0;
}
.kenjtec-404 .wp-block-search { max-width: 28rem; margin-top: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------------------
   9. BEDIENBARKEIT (Grundsatz 2 und 7), DRUCK, BEWEGUNG
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--haupt);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--klein);
}
.kenjtec-variante-band :focus-visible,
.is-style-band :focus-visible,
.kenjtec-leiste :focus-visible { outline-color: var(--wp--preset--color--kontrast); }
.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--haupt);
  color: var(--wp--preset--color--kontrast);
  padding: 0.75rem 1.25rem;
  border-radius: var(--wp--custom--radius--standard);
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
::selection { background: color-mix(in srgb, var(--wp--preset--color--haupt) 18%, var(--wp--preset--color--hintergrund)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .kenjtec-kopf, .kenjtec-fuss, .kenjtec-nach-oben, .kenjtec-leiste, .wp-block-navigation { display: none !important; }
  .kenjtec-abschnitt { padding-block: 1rem; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}