/*
Theme Name: kerngefüge
Theme URI: https://kerngefuege.de
Author: Bernhard Kempen
Description: Eigenes Block-Theme für kerngefüge. Alle Farben, Schriften, Abstände und Breiten liegen zentral in theme.json. Wiederkehrende Abschnitte liegen als Block Patterns unter patterns/. Keine Page-Builder, kein Tracking, keine externen Schriften.
Version: 1.0.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kerngefuege
Tags: block-theme, full-site-editing, accessibility-ready, two-columns
*/

/* ==========================================================================
   Diese Datei enthält NUR, was theme.json nicht abbilden kann.
   Farben, Schriftgrößen und Abstände NICHT hier ändern, sondern in theme.json.
   ========================================================================== */

/* --- 1. Logo im Kopf und Fuß ------------------------------------------- */
.kg-logo             { display:inline-flex; text-decoration:none; }
.kg-logo svg         { display:block; height:84px; width:auto; }
.kg-logo-fuss svg    { display:block; height:56px; width:auto; }
@media (max-width:781px){ .kg-logo svg { height:52px; } }

/* --- 2. Bildmarke als ruhige Hintergrundzeichnung im Hero --------------- */
.kg-hero             { position:relative; overflow:hidden; }
.kg-hero > *         { position:relative; z-index:1; }
.kg-gefuege          { position:absolute; top:50%; right:3%; transform:translateY(-50%);
                       width:min(32%,360px); aspect-ratio:1; pointer-events:none;
                       z-index:0; display:none; }
.kg-gefuege path     { fill:var(--wp--preset--color--graphit); }
@media (min-width:900px){ .kg-gefuege { display:block; } }

/* --- 3. Dreischritt: Titel links, Text rechts, Trennlinien -------------- */
.kg-schritt          { border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--creme) 28%, transparent);
                       padding-block:1.75rem; }
.kg-schritt:first-of-type { border-top:1px solid color-mix(in srgb, var(--wp--preset--color--creme) 28%, transparent); }
@media (min-width:782px){
  .kg-schritt .wp-block-column:first-child { flex-basis:14rem !important; flex-grow:0; }
}

/* --- 4. Zwei Einstiege: ein durchgehendes Raster statt zweier Karten ---- */
.kg-einstiege        { border:1px solid var(--wp--preset--color--stein); gap:1px !important;
                       background:var(--wp--preset--color--stein); }
.kg-einstiege > .wp-block-column { background:var(--wp--preset--color--papier);
                       padding:clamp(1.9rem,4vw,3rem); margin:0; }
/* Drei Spalten brauchen mehr Breite als zwei: darunter untereinander. */
@media (max-width:1023px){
  .kg-einstiege { flex-wrap:wrap !important; }
  .kg-einstiege > .wp-block-column { flex-basis:100% !important; }
}

/* --- 5. Textlink mit Pfeil (statt Schaltfläche) ------------------------- */
.kg-pfeillink a      { font-weight:600; text-decoration:none;
                       border-bottom:1px solid transparent;
                       display:inline-flex; align-items:center; gap:.55rem;
                       min-height:44px; }
.kg-pfeillink a:hover{ border-bottom-color:currentColor; }
.kg-pfeillink a::after{ content:"→"; transition:transform .18s ease; }
.kg-pfeillink a:hover::after { transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .kg-pfeillink a::after { transition:none; } }

/* --- 6. Vorspann über einer Überschrift (Eyebrow) ----------------------- */
.kg-eyebrow          { font-size:.875rem; font-weight:600; letter-spacing:.14em;
                       text-transform:uppercase; }

/* --- 7. Nachweiszeile unter dem Kurzprofil ------------------------------ */
.kg-nachweis         { border-top:2px solid var(--wp--preset--color--gruen);
                       padding-top:1rem; }

/* --- 8. Lesbarkeit und Bedienung --------------------------------------- */
:where(p, li)        { max-width:62ch; }
.kg-voll p           { max-width:none; }
:focus-visible       { outline:2px solid var(--wp--preset--color--gruen); outline-offset:3px; }
.has-anthrazit-background-color :focus-visible,
.has-graphit-background-color :focus-visible,
.has-gruen-background-color :focus-visible { outline-color:var(--wp--preset--color--weiss); }

.wp-block-navigation a,
.wp-block-button__link { min-height:44px; display:inline-flex; align-items:center; }

img                  { max-width:100%; height:auto; }
svg                  { max-width:100%; }

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

/* --- 9. Kontaktformular, einspaltig ------------------------------------ */
.kg-formular label   { display:block; font-weight:600; margin-bottom:.35rem; }
.kg-formular input, .kg-formular select, .kg-formular textarea {
                       width:100%; max-width:34rem; padding:.7rem .85rem;
                       border:1px solid var(--wp--preset--color--stein);
                       border-radius:0; background:var(--wp--preset--color--weiss);
                       font:inherit; color:inherit; }
.kg-formular > p     { margin-bottom:1.25rem; max-width:34rem; }
.kg-formular .kg-hinweis { font-size:1rem; color:var(--wp--preset--color--grau); }

/* --- 10. Rückmeldung des Kontaktformulars ------------------------------ */
.kg-meldung          { max-width:34rem; padding:.9rem 1.1rem; margin-bottom:1.5rem;
                       border-left:4px solid; }
.kg-meldung-gut      { border-color:var(--wp--preset--color--gruen);
                       background:color-mix(in srgb, var(--wp--preset--color--gruen) 10%, transparent); }
.kg-meldung-schlecht { border-color:var(--wp--preset--color--kupfer);
                       background:color-mix(in srgb, var(--wp--preset--color--kupfer) 10%, transparent); }


/* --- 11. Zeilenlänge der Hauptaussage im Hero -------------------------- */
.kg-hero h1          { max-width:17ch; }
.kg-hero > p         { max-width:52ch; }


/* --- 12. Linksbündige Komposition -------------------------------------- */
/* WordPress zentriert Blöcke, sobald sie eine eigene Maximalbreite haben.
   Die Gestaltung ist durchgehend linksbündig, deshalb hier zurückgesetzt. */
/* WordPress setzt die Zentrierung mit !important, deshalb hier ebenso. */
main .is-layout-constrained > :where(h1, h2, h3, p, ul, ol, figure, .wp-block-buttons, .wp-block-image, .wp-block-table, .wp-block-details) {
  margin-inline-start:0 !important; margin-inline-end:auto !important;
}


/* --- 14. Honorartabelle ------------------------------------------------ */
.wp-block-table      { max-width:44rem; }
.wp-block-table table{ border-collapse:collapse; }
.wp-block-table th, .wp-block-table td {
                       border:0; border-bottom:1px solid var(--wp--preset--color--stein);
                       padding:.75rem 1.25rem .75rem 0; text-align:left; vertical-align:top; }
.wp-block-table thead th { font-size:.875rem; letter-spacing:.08em; text-transform:uppercase;
                       color:var(--wp--preset--color--grau); border-bottom-width:2px; }
.wp-block-table td:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }

/* --- 13. Kein Zwischenraum zwischen Kopf, Inhalt und Fuß ---------------- */
/* Die Abschnitte tragen ihren Abstand selbst als Innenabstand. */
.wp-site-blocks > * + * { margin-block-start:0; }


/* --- 15. Logo auf dunklem Grund ---------------------------------------- */
/* Die Akzentflächen der Bildmarke sind für hellen Grund entnommen. Auf dem
   dunklen Kopf erreichen drei von vier unter 3:1 und verschwinden. Hier
   werden sie aufgehellt — gleicher Farbton, nur heller. Die Logodatei
   selbst bleibt unangetastet. */
.kg-logo path[fill="#824C2D"], .kg-logo-fuss path[fill="#824C2D"] { fill:#C07B44; }
.kg-logo path[fill="#3D4A3A"], .kg-logo-fuss path[fill="#3D4A3A"] { fill:#7E9576; }
.kg-logo path[fill="#8A626D"], .kg-logo-fuss path[fill="#8A626D"] { fill:#BC8B98; }
.kg-logo path[fill="#AB8E76"], .kg-logo-fuss path[fill="#AB8E76"] { fill:#D2B69A; }


/* --- 16. Themenliste: Stichwort links, Erklärung rechts ---------------- */
/* Gleiche Bauweise wie der Dreischritt, aber für helle Flächen. */
.kg-punkt            { border-bottom:1px solid var(--wp--preset--color--stein);
                       padding-block:1.4rem; margin-block:0 !important; }
.kg-punkt:first-of-type { border-top:1px solid var(--wp--preset--color--stein); }
.kg-punkt h3         { font-size:1.1875rem !important; letter-spacing:0; }
.kg-punkt p          { max-width:58ch; }
@media (min-width:782px){
  .kg-punkt .wp-block-column:first-child { flex-basis:17rem !important; flex-grow:0; }
}


/* --- 17. Navigation: „Für" als Beschriftung, drei Ziele sofort sichtbar - */
/* Bewusst ohne Aufklappmenü: Einzelpersonen, Paare und Organisationen
   stehen immer da. Kontakt sitzt abgesetzt daneben. */
.kg-nav              { display:inline-flex; align-items:center; gap:1.1rem;
                       border:1px solid color-mix(in srgb, var(--wp--preset--color--nebel) 42%, transparent);
                       padding:.3rem 1.2rem .3rem 1rem; }
.kg-nav-label        { font-size:.8125rem; font-weight:600; letter-spacing:.14em;
                       text-transform:uppercase; color:var(--wp--preset--color--nebel); }
.kg-nav-liste        { list-style:none; margin:0; padding:0;
                       display:flex; flex-wrap:wrap; gap:0 1.5rem; }
.kg-nav a            { font-size:1.0625rem; text-decoration:none; color:inherit;
                       display:inline-flex; align-items:center; min-height:44px;
                       border-bottom:1px solid transparent; }
.kg-kontaktlink      { font-size:1.0625rem; text-decoration:none; color:inherit;
                       margin-left:1.75rem;
                       display:inline-flex; align-items:center; min-height:44px;
                       border-bottom:1px solid transparent; }
.kg-nav a:hover, .kg-nav a[aria-current="page"],
.kg-kontaktlink:hover, .kg-kontaktlink[aria-current="page"] {
                       border-bottom-color:var(--wp--preset--color--salbei); }
@media (max-width:781px){
  .kg-nav            { flex-wrap:wrap; gap:.4rem 1rem; }
  .kg-kontaktlink    { margin-left:0; }
}

/* --- Textlinks auf dunklem Grund ---------------------------------------
   Die globale Linkfarbe ist gruen. Auf gruenem, graphit- oder
   anthrazitfarbenem Grund verschwindet ein Link sonst (19.09.2026, Link auf
   /hypnose/ von Seite 8). Dort uebernimmt der Link die helle Schriftfarbe. */
.has-anthrazit-background-color a:where(:not(.wp-element-button, .wp-block-button__link)),
.has-graphit-background-color  a:where(:not(.wp-element-button, .wp-block-button__link)),
.has-gruen-background-color    a:where(:not(.wp-element-button, .wp-block-button__link)),
.has-tinte-background-color    a:where(:not(.wp-element-button, .wp-block-button__link)) { color:inherit; }