/*
Theme Name: WK Theme
Theme URI: https://walterkreisel.com
Author: Martin Lettner
Description: Minimalistisches Block-Theme für walterkreisel.com, abgeleitet vom Designstand A5. Standard-Blöcke, Design-Tokens in theme.json.
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wk-theme
*/
/* Inhalt: 1 Tokens · 2 Basis · 3 Header · 4 Mobiles Menü · 5 Footer · 6 Inhalte. Effekte: assets/effects.css · Risskanten: assets/torn.css */
/* ===== 1 Tokens ===== */
:root{
--wk-hair:rgba(232,228,220,.18); /* feine Linie auf dunklem Grund */
--wk-ease:cubic-bezier(.2,.8,.2,1);
--wk-btn:44px; /* Höhe Burger-, Schließen- und Anfragen-Button */
--wk-bar:52px; /* Höhe der Header-Zeile */
--wk-pad-y:10px; /* vertikaler Header-Abstand */
--wk-pad-x:var(--wp--custom--root-padding,24px);
}
/* ===== 2 Basis ===== */
.is-style-label{width:fit-content}
/* Header, Inhalt, Bänder und Footer schließen bündig aneinander an (Abstände stehen in den Blöcken selbst) */
body .wp-site-blocks>*{margin-block-start:0}
:where(a,button,summary):focus-visible{outline:3px solid var(--wp--preset--color--hot);outline-offset:3px}
.wk-card-link{text-decoration:none}
/* Mono-Look an einer Stelle (Absatz-Stil Mono, Datum, Rubriken, Pagination, Zitat-Quelle, Footer-Beschriftungen) */
.is-style-mono,.wp-block-post-date,.wp-block-post-terms,.wp-block-query-pagination,.wp-block-quote cite,.wk-footer__label,.wk-footer__nav{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);text-transform:uppercase;letter-spacing:var(--wp--custom--tracking)}
/* Social-Icons (Footer und Menü): nur Logo, Papierfarbe, Hover orange */
.wk-social,.wk-menu-social{gap:4px;margin:0}
.wk-social .wp-social-link,.wk-menu-social .wp-social-link{background:none!important;color:var(--wp--preset--color--paper)!important;margin:0}
.wk-social .wp-social-link a,.wk-menu-social .wp-social-link a{padding:6px 12px 6px 0;color:inherit}
.wk-social .wp-social-link a:hover,.wk-menu-social .wp-social-link a:hover{color:var(--wp--preset--color--hot)}
.wk-social svg{width:24px;height:24px}
/* ===== 3 Header ===== */
html{scroll-padding-top:calc(var(--wk-bar) + 2 * var(--wk-pad-y))}
/* Horizontale Abstände kommen vom Root-Padding (theme.json). Gleiche Höhe in beiden Zuständen,
damit Burger-/Schließen-Button immer an derselben Stelle sitzen und nichts springt. */
.wk-header{position:relative;z-index:70;padding-block:var(--wk-pad-y)}
.wk-header__bar{align-items:center;min-height:var(--wk-bar)}
.wk-header__logo{margin:0}
.wk-header__logo img{display:block;height:auto;width:76px}
.wk-header__right{gap:28px;align-items:center}
.wk-header__cta .wp-block-button__link{display:inline-flex;align-items:center;min-height:var(--wk-btn);padding:0 22px;font-size:15px;white-space:nowrap}
.wk-nav .wp-block-navigation__container{gap:6px 22px}
.wk-nav .wp-block-navigation-item__content{padding:10px 2px;white-space:nowrap}
.wk-nav .wp-block-social-links{display:none} /* Social-Icons nur im mobilen Menü */
/* Fixierte Leiste beim Hochscrollen. Hintergrund/Blur liegen im ::before, nicht am Header selbst:
transform/backdrop-filter am Header würden das fixierte Menü-Overlay darin einsperren. */
.wk-header.is-floating{position:fixed;inset:0 0 auto;width:100%;transform:translateY(-105%);transition:transform .3s var(--wk-ease)}
.wk-header.is-floating.is-visible{transform:none}
.wk-header.is-floating::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(243,240,234,.94);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border-bottom:2px solid var(--wp--preset--color--ink)}
.wk-header.is-floating .wk-header__logo img{width:60px}
.admin-bar .wk-header.is-floating{top:var(--wp-admin--admin-bar--height,32px)}
/* Burger-Menü schon ab Tablet-Breite (WordPress schaltet erst bei 600px) */
@media (min-width:600px) and (max-width:959px){
.wk-nav .wp-block-navigation__responsive-container-open{display:flex!important}
.wk-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}
}
/* Mobil/Tablet: Anfragen links, Burger ganz rechts */
@media (max-width:959px){
.wk-header__right{gap:10px}
.wk-header__cta{order:1}
.wk-nav{order:2}
.wk-header__logo img{width:64px}
.wk-header.is-floating .wk-header__logo img{width:56px}
}
/* Burger- und Schließen-Button: gleiche Größe wie der Anfragen-Button, Icon exakt zentriert */
.wk-nav .wp-block-navigation__responsive-container-open,.wk-nav .wp-block-navigation__responsive-container-close{box-sizing:border-box;width:var(--wk-btn);height:var(--wk-btn);padding:0;margin:0;border:0;border-radius:0;line-height:0;align-items:center;justify-content:center;transition:background .15s,color .15s}
.wk-nav .wp-block-navigation__responsive-container-close{display:flex}
.wk-nav .wp-block-navigation__responsive-container-open{background:var(--wp--preset--color--ink);color:var(--wp--preset--color--paper)}
.wk-nav .wp-block-navigation__responsive-container-open:hover{background:var(--wp--preset--color--hot);color:var(--wp--preset--color--ink)}
.wk-nav .wp-block-navigation__responsive-container-open svg,.wk-nav .wp-block-navigation__responsive-container-close svg{display:block;width:24px;height:24px;margin:0}
/* ===== 4 Mobiles Menü: Vollbild, dunkel, Scanlines wie in der Vorlage, nummerierte Display-Schrift ===== */
.wk-nav .wp-block-navigation__responsive-container.is-menu-open{
background-color:var(--wp--preset--color--ink)!important;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px,transparent 3px);
color:var(--wp--preset--color--paper)!important;
padding:calc(var(--wk-bar) + 2 * var(--wk-pad-y) + 4px) var(--wk-pad-x) 28px;
overflow-y:auto;animation:wk-fade .25s ease-out both}
/* langsamer Störbalken wie im CRT-Look der Vorlage */
.wk-nav .is-menu-open::before{content:"";position:fixed;left:0;right:0;top:-170px;height:150px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--wp--preset--color--paper) 50%,transparent);opacity:.05;animation:fx-roll 12s linear infinite}
.wk-nav .is-menu-open .wp-block-navigation__responsive-dialog{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;margin:0;padding:0}
/* Schließen-Button exakt an der Stelle des Burgers: Header-Padding + (Zeile − Button) / 2 */
.wk-nav .is-menu-open .wp-block-navigation__responsive-container-close{position:fixed;z-index:3;top:calc(var(--wk-pad-y) + (var(--wk-bar) - var(--wk-btn)) / 2);right:var(--wk-pad-x);background:var(--wp--preset--color--hot);color:var(--wp--preset--color--ink)}
.admin-bar .wk-nav .is-menu-open .wp-block-navigation__responsive-container-close{margin-top:var(--wp-admin--admin-bar--height,0px)}
.wk-nav .is-menu-open .wp-block-navigation__responsive-container-close:hover{background:var(--wp--preset--color--paper)}
.wk-nav .is-menu-open .wp-block-navigation__responsive-container-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}
.wk-nav .is-menu-open .wp-block-navigation__container{display:flex;flex-direction:column;align-items:stretch;gap:0;counter-reset:wkm;width:100%;padding:0}
.wk-nav .is-menu-open .wp-block-navigation-item{counter-increment:wkm;width:100%;border-top:1px solid var(--wk-hair);animation:wk-rise .45s var(--wk-ease) both}
.wk-nav .is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.11s}
.wk-nav .is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.16s}
.wk-nav .is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.21s}
.wk-nav .is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.26s}
.wk-nav .is-menu-open .wp-block-navigation-item__content{display:flex;align-items:baseline;gap:16px;width:100%;padding:14px 0 12px;white-space:normal;color:var(--wp--preset--color--paper);font-family:var(--wp--preset--font-family--display);font-weight:900;font-size:clamp(44px,13vw,88px);line-height:1;text-transform:uppercase;letter-spacing:.005em;transition:color .15s,transform .2s}
.wk-nav .is-menu-open .wp-block-navigation-item__content::before{content:counter(wkm,decimal-leading-zero);font-family:var(--wp--preset--font-family--mono);font-weight:500;font-size:13px;letter-spacing:var(--wp--custom--tracking);color:var(--wp--preset--color--hot);transform:translateY(-.9em)}
.wk-nav .is-menu-open .wp-block-navigation-item__content:is(:hover,:focus-visible){color:var(--wp--preset--color--hot);transform:translateX(8px)}
.wk-nav .is-menu-open .wp-block-social-links{display:flex;width:100%;padding:22px 0 0;border-top:1px solid var(--wk-hair);animation:wk-rise .45s .34s var(--wk-ease) both}
.wk-nav .is-menu-open .wp-block-social-links svg{width:26px;height:26px}
@keyframes wk-fade{from{opacity:0}to{opacity:1}}
@keyframes wk-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wk-header.is-floating{transition:none}.wk-nav .is-menu-open,.wk-nav .is-menu-open *,.wk-nav .is-menu-open::before{animation:none!important}}
/* ===== 5 Footer: volle Breite, dunkel ===== */
.wk-footer{margin-block-start:0;padding-block:56px 28px;border-top:4px solid var(--wp--preset--color--hot);font-size:14px;line-height:1.6}
.wk-footer__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:32px 48px;align-items:start}
.wk-footer__top>*,.wk-footer__col>*{margin:0!important}
.wk-footer__col{display:flex;flex-direction:column;gap:12px}
.wk-footer__brand{align-items:flex-start;gap:18px}
.wk-footer .wk-footer__mark{margin:0;flex:none}
.wk-footer .wk-footer__mark img{display:block;height:64px;width:auto;max-width:none}
.wk-footer__text{color:var(--wp--preset--color--muted-light)}
.wk-footer__text strong{color:var(--wp--preset--color--paper);font-weight:700}
.wk-footer__text a{color:var(--wp--preset--color--paper);text-decoration:none;border-bottom:1px solid var(--wk-hair)}
.wk-footer__label{color:var(--wp--preset--color--hot);font-size:12px}
.wk-footer__bottom{margin-top:40px!important;padding-top:20px;border-top:1px solid var(--wk-hair);align-items:center;gap:8px 32px}
.wk-footer__copy{margin:0;font-size:13px;color:var(--wp--preset--color--muted-light)}
.wk-footer__nav{font-size:12px;letter-spacing:.12em}
.wk-footer__nav .wp-block-navigation__container{gap:4px 24px}
.wk-footer__nav a{padding:6px 0;border-bottom:1px solid transparent;text-decoration:none}
:is(.wk-footer__text a,.wk-footer__nav a){transition:color .15s,border-color .15s}
:is(.wk-footer__text a,.wk-footer__nav a):hover{color:var(--wp--preset--color--hot);border-bottom-color:var(--wp--preset--color--hot)}
.wk-footer__nav a{color:var(--wp--preset--color--paper)}
@media (max-width:781px){
.wk-footer{padding-block:32px 18px}
.wk-footer__top{grid-template-columns:1fr 1fr;gap:22px 20px}
.wk-footer__brand{grid-column:1/-1;align-items:center;gap:14px}
.wk-footer .wk-footer__mark img{height:48px}
.wk-footer__bottom{margin-top:24px!important;padding-top:12px}
}
/* ===== 6 Inhalte: Standard-Blöcke ===== */
/* Bildausschnitt (Fokuspunkt aus dem Editor, Variable --wk-pos am Bild-Block) */
.wp-block-image img{object-position:var(--wk-pos,50% 50%)}
/* Breiten: Text 760 (Standard) · Breit 1360 (alignwide) · Voll (alignfull). Zusätzlich per Editor-Auswahl "Breite & Position"
(assets/editor-width.js), gespeichert als Klasse wk-w-…: */
:root{--wk-shift:clamp(0px,calc((100vw - 900px) * .18),180px)} /* "etwas verschoben": wächst mit der Bildschirmbreite, mobil 0 */
/* Die Breiten-Klassen wirken nur bei Standard-Ausrichtung. Sobald "Breit" oder "Volle Breite" gewählt ist, gilt die Ausrichtung. */
.wk-w-narrow:not(.alignwide,.alignfull){max-width:560px}
.wk-w-medium:not(.alignwide,.alignfull){max-width:1060px}
.is-layout-constrained>:is(.wk-w-flush-left,.wk-w-narrow-left):not(.alignwide,.alignfull){margin-left:0!important;margin-right:auto!important}
.is-layout-constrained>:is(.wk-w-flush-right,.wk-w-narrow-right):not(.alignwide,.alignfull){margin-left:auto!important;margin-right:0!important}
.wk-w-narrow-left:not(.alignwide,.alignfull),.wk-w-narrow-right:not(.alignwide,.alignfull){max-width:560px}
@media (min-width:900px){
.wk-w-shift-left:not(.alignwide,.alignfull){translate:calc(var(--wk-shift) * -1) 0}
.wk-w-shift-right:not(.alignwide,.alignfull){translate:var(--wk-shift) 0}
}
/* Volle Breite + Breiten-Klasse: der Block geht bis zum Rand (Hintergrund), die Klasse bestimmt die Breite und Position
des INHALTS (--wk-w). Ohne Klasse läuft der Inhalt auf dem Seitenraster (Seitenrand, höchstens 1360 px). */
.alignfull:is(.wk-w-narrow,.wk-w-narrow-left,.wk-w-narrow-right){--wk-w:560px}
.alignfull:is(.wk-w-medium){--wk-w:1060px}
.alignfull:is(.wk-w-shift-left,.wk-w-shift-right,.wk-w-flush-left,.wk-w-flush-right){--wk-w:760px} /* = contentSize der theme.json */
/* a) Spalten, Medien-Text, Zeilen-Gruppen: Inhalt über Innenabstand zentrieren, verschieben oder an den Rand setzen.
Das "body" erhöht die Spezifität gegenüber dem Standard-Innenabstand von WordPress für Blöcke mit Hintergrund. */
body :is(.wp-block-columns,.wp-block-media-text,.wp-block-group:not(.is-layout-constrained)).alignfull{
--wk-gutter:max(var(--wk-pad-x),calc((100vw - var(--wk-w,var(--wp--style--global--wide-size,1360px))) / 2));
padding-inline:var(--wk-gutter)}
body :is(.wp-block-columns,.wp-block-media-text,.wp-block-group:not(.is-layout-constrained)).alignfull.wk-w-shift-left{
padding-left:max(var(--wk-pad-x),calc(var(--wk-gutter) - var(--wk-shift)));padding-right:calc(var(--wk-gutter) + var(--wk-shift))}
body :is(.wp-block-columns,.wp-block-media-text,.wp-block-group:not(.is-layout-constrained)).alignfull.wk-w-shift-right{
padding-left:calc(var(--wk-gutter) + var(--wk-shift));padding-right:max(var(--wk-pad-x),calc(var(--wk-gutter) - var(--wk-shift)))}
body :is(.wp-block-columns,.wp-block-media-text,.wp-block-group:not(.is-layout-constrained)).alignfull:is(.wk-w-flush-left,.wk-w-narrow-left){
padding-left:var(--wk-pad-x);padding-right:max(var(--wk-pad-x),calc(100vw - var(--wk-w) - var(--wk-pad-x)))}
body :is(.wp-block-columns,.wp-block-media-text,.wp-block-group:not(.is-layout-constrained)).alignfull:is(.wk-w-flush-right,.wk-w-narrow-right){
padding-right:var(--wk-pad-x);padding-left:max(var(--wk-pad-x),calc(100vw - var(--wk-w) - var(--wk-pad-x)))}
/* b) Gruppen mit Textspalte, Cover, Pullquote: die Spaltenbreite der Kinder wird umgestellt */
.alignfull:is(.is-layout-constrained,.wp-block-cover,.wp-block-pullquote):is(.wk-w-narrow,.wk-w-medium,.wk-w-narrow-left,.wk-w-narrow-right,.wk-w-shift-left,.wk-w-shift-right,.wk-w-flush-left,.wk-w-flush-right){--wp--style--global--content-size:var(--wk-w)}
.alignfull:is(.is-layout-constrained,.wp-block-cover,.wp-block-pullquote):is(.wk-w-flush-left,.wk-w-narrow-left)>:not(.alignwide,.alignfull){margin-left:0!important;margin-right:auto!important}
.alignfull:is(.is-layout-constrained,.wp-block-cover,.wp-block-pullquote):is(.wk-w-flush-right,.wk-w-narrow-right)>:not(.alignwide,.alignfull){margin-left:auto!important;margin-right:0!important}
@media (min-width:900px){
.alignfull:is(.is-layout-constrained,.wp-block-cover,.wp-block-pullquote).wk-w-shift-left>:not(.alignwide,.alignfull){translate:calc(var(--wk-shift) * -1) 0}
.alignfull:is(.is-layout-constrained,.wp-block-cover,.wp-block-pullquote).wk-w-shift-right>:not(.alignwide,.alignfull){translate:var(--wk-shift) 0}
}
/* Zeilen-Gruppen im Inhalt dürfen auf kleinen Bildschirmen umbrechen, statt Text auf wenige Pixel zu quetschen */
@media (max-width:781px){.wp-block-post-content .wp-block-group.is-nowrap{flex-wrap:wrap}}
/* Vollbreite Blöcke im Artikel (Bänder, Spalten, Gruppen) halten Abstand zum Text davor und danach.
Eigene Abstände im Editor haben Vorrang. */
.wp-block-post-content>:is(.wp-block-group,.wp-block-columns,.wp-block-cover,.wp-block-pullquote,.wp-block-media-text).alignfull{margin-block:var(--wp--preset--spacing--40)}
/* Artikel: Fließtext in Waldgrün, nur direkt im Artikel. Text in Gruppen, Zitaten und Bändern behält seine eigene Farbe. */
.single-post .wp-block-post-content>:is(p,ul,ol){color:var(--wp--preset--color--forest)}
.single-post .wp-block-post-title{max-width:22ch}
.wp-block-post-content a:where(:not(.wp-element-button)){text-underline-offset:3px;text-decoration-thickness:1.5px}
.wp-block-post-content>:is(.wp-block-image,.wp-block-gallery,.wp-block-video,.wp-block-embed){margin-block:var(--wp--preset--spacing--30)}
/* Abstände vor Überschriften und Buttons. Hier statt in theme.json, weil der Block-Abstand (Layout) sonst gewinnt. */
:is(.is-layout-constrained,.is-layout-flow)>h2:not(.wp-block-post-title){margin-top:56px}
:is(.is-layout-constrained,.is-layout-flow)>h3:not(.wp-block-post-title){margin-top:40px}
:is(.is-layout-constrained,.is-layout-flow)>h4:not(.wp-block-post-title){margin-top:32px}
:is(.is-layout-constrained,.is-layout-flow)>.wp-block-buttons{margin-top:44px}
:is(.is-layout-constrained,.is-layout-flow)>:first-child{margin-top:0}
/* Absatz-Stile */
/* Label ist nur so breit wie sein Text: in der Textspalte linksbündig statt zentriert, auch innerhalb voller Breite */
.is-layout-constrained>.is-style-label{margin-left:max(0px,calc((100% - var(--wp--style--global--content-size,760px)) / 2))!important}
/* Zitat: Quelle als eigene Zeile */
.wp-block-quote cite{display:block;margin-top:16px}
.wp-block-quote>:first-child{margin-top:0}
/* Pullquote: Text bündig mit der Textspalte, auch wenn der Block volle Breite hat (z. B. orange Band) */
figure.wp-block-pullquote{text-align:left;padding-block:var(--wp--preset--spacing--20)}
figure.wp-block-pullquote:is(.is-style-band,.is-style-band-dark){padding-block:var(--wp--preset--spacing--50)}
figure.wp-block-pullquote:is(.alignfull,.is-style-band,.is-style-band-dark){padding-inline:var(--wk-pad-x)}
.wp-block-pullquote blockquote{max-width:var(--wp--style--global--content-size,760px);margin-inline:auto;padding:0}
.wp-block-pullquote p{font-size:inherit;line-height:inherit;max-width:18ch;margin:0}
.wp-block-pullquote cite{display:block;margin-top:20px}
/* Listen */
.wp-block-list li::marker{color:var(--wp--preset--color--hot)}
.wp-block-list li+li{margin-top:.4em}
.wp-block-list .wp-block-list{list-style-type:disc}
.wp-block-list :is(ul,ol){margin-top:.4em}
/* Tabellen */
.wp-block-table table{border-collapse:collapse;width:100%}
.wp-block-table :is(th,td){padding:12px 16px 12px 0;border:0;border-bottom:1px solid var(--wp--preset--color--line);text-align:left;vertical-align:top}
.wp-block-table thead{border:0}
.wp-block-table th{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);font-weight:500;letter-spacing:var(--wp--custom--tracking);text-transform:uppercase;color:var(--wp--preset--color--muted);border-bottom:2px solid var(--wp--preset--color--ink)}
/* Aufklapp-Block */
.wp-block-details summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-family:var(--wp--preset--font-family--display);font-weight:900;font-size:var(--wp--preset--font-size--h-3);line-height:1;text-transform:uppercase}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::after{content:"+";flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--wp--preset--color--hot);color:var(--wp--preset--color--ink);font:700 24px/1 var(--wp--preset--font-family--body);transition:transform .2s}
.wp-block-details[open] summary::after{transform:rotate(45deg)}
.wp-block-details>:not(summary){margin-top:14px}
/* Inline-Auszeichnungen */
mark{background:var(--wp--preset--color--hot);color:var(--wp--preset--color--ink);padding:0 .25em}
:not(pre)>code,kbd{font-family:var(--wp--preset--font-family--mono);font-size:.9em;background:var(--wp--preset--color--paper-2);padding:.1em .4em}
/* Button-Stil "Zurück": minimalistischer Textlink wie in der Vorlage, Mono-Schrift mit feinem Pfeil, kein Hintergrund */
.wp-block-button.is-style-back .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;min-height:0;padding:6px 0;background:none;border:0;color:var(--wp--preset--color--muted);font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);font-weight:400;letter-spacing:var(--wp--custom--tracking);text-transform:uppercase;text-decoration:none;animation:none;transition:color .15s}
.wp-block-button.is-style-back .wp-block-button__link::before{content:"";width:16px;height:16px;background:currentColor;transition:transform .2s var(--wk-ease);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.wp-block-button.is-style-back .wp-block-button__link:hover{background:none;color:var(--wp--preset--color--hot);animation:none}
.wp-block-button.is-style-back .wp-block-button__link:hover::before{transform:translateX(-4px)}
/* "Weitere Beiträge": Überschrift links, Karten rechts */
.wk-related__row{gap:28px clamp(32px,4vw,64px)}
.wk-related__head{flex:0 0 clamp(200px,18vw,280px)}
.wk-related__list{flex:1 1 560px;min-width:0}
/* Galerien: Bilder bleiben zugeschnitten (Option "Bilder zuschneiden"), auch mit dem Effekt-Rahmen */
.wp-block-gallery .fx-wrap{flex:1;height:100%}
.wp-block-gallery.is-cropped .fx-wrap img{width:100%;height:100%;object-fit:cover}
/* Karten in Beitragslisten sind gleich hoch */
.wp-block-post-template>li>.is-style-card{height:100%}
/* ===== 7 Startseite: Hero =====
Eine Gruppe (.wk-hero) mit fünf Kindern, per Grid angeordnet: Label, Titel, Text, Buttons, Bild-Gruppe.
Desktop: Text links, Bild rechts. Mobil: Label und Titel links neben dem Bild (rund 60 %), Text und Buttons darunter.
Der Titel darf über das Bild ragen (Kontur in Papierfarbe). */
.wk-hero{display:grid;column-gap:clamp(12px,4vw,64px);align-items:start}
.wk-hero>*{margin:0!important}
.wk-hero__kicker{grid-area:kicker}
.wk-hero__title{grid-area:title;position:relative;z-index:3;white-space:nowrap;line-height:.92;font-size:clamp(40px,12.5vw,110px);text-shadow:3px 0 var(--wp--preset--color--paper),-3px 0 var(--wp--preset--color--paper),0 3px var(--wp--preset--color--paper),0 -3px var(--wp--preset--color--paper),2px 2px 0 var(--wp--preset--color--paper),-2px -2px 0 var(--wp--preset--color--paper),2px -2px 0 var(--wp--preset--color--paper),-2px 2px 0 var(--wp--preset--color--paper)}
.wk-hero__lead{grid-area:lead;max-width:36ch}
.wk-hero__buttons{grid-area:buttons}
.wk-hero__image{grid-area:image;align-self:center}
/* mobil: Label oben, Titel (vertikal zentriert) neben dem Bild, Text und Buttons über die volle Breite darunter */
.wk-hero{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);row-gap:20px;
grid-template-rows:auto 1fr auto 1fr auto auto;
grid-template-areas:"kicker kicker" ". image" "title image" ". image" "lead lead" "buttons buttons"}
.wk-hero__lead,.wk-hero__buttons{margin-top:6px!important}
@media (min-width:1000px){
.wk-hero{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);row-gap:26px;
grid-template-rows:1fr auto auto auto auto 1fr;
grid-template-areas:". image" "kicker image" "title image" "lead image" "buttons image" ". image"}
.wk-hero__lead,.wk-hero__buttons{margin-top:0!important}
.wk-hero__title{font-size:var(--wp--preset--font-size--hero);margin-right:-3vw!important}
}
/* ===== 8 Startseite: Abschnitte ===== */
.wk-section-title{max-width:14ch}
.wk-section-title--long{max-width:24ch}
.wk-section-lead{max-width:52ch}
.wk-section-lead--long{max-width:58ch}
/* Feature-Karten (Keynote, Coaching): Bild oben, Text darunter, Button unten bündig, Karten gleich hoch */
.wk-feature{height:100%}
.wk-feature>.wp-block-image{margin:0}
.wk-feature__body{flex:1;padding:clamp(24px,3vw,40px)}
.wk-feature__body>p{max-width:46ch}
.wk-feature__body>.wp-block-buttons{margin-top:auto!important;padding-top:8px}
/* Liste als Tags (Block-Stil "Tags" für Listen) */
.wp-block-list.is-style-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.wp-block-list.is-style-tags li{margin:0;padding:6px 14px;border:1px solid currentColor;font-size:var(--wp--preset--font-size--sm);line-height:1.4}
/* Kacheln (Unternehmer, Speaker, Sportler, Mensch): Bild füllt die Kachel, Beschriftung unten links, die ganze Kachel ist ein Link */
.wk-tile{position:relative;display:grid;aspect-ratio:3/4;overflow:hidden;background:var(--wp--preset--color--graph);color:var(--wp--preset--color--ink)}
.wk-tile>*{grid-area:1/1;margin:0!important}
.wk-tile>.wp-block-image{height:100%}
.wk-tile .fx-wrap,.wk-tile .fx-wrap img:not(.fx-slice){width:100%;height:100%}
.wk-tile .fx-wrap img:not(.fx-slice){object-fit:cover;object-position:var(--wk-pos,50% 30%)}
.wk-tile img.fx-slice{display:none}
.wk-tile__label{z-index:1;align-self:end;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:18px!important}
.wk-tile__label>*{margin:0!important}
.wk-tile__name{padding:6px 16px 4px;background:var(--wp--preset--color--hot);font-family:var(--wp--preset--font-family--display);font-weight:900;font-size:clamp(32px,3vw,44px);line-height:1;text-transform:uppercase;transition:background .15s}
.wk-tile__more{padding:6px 14px;background:var(--wp--preset--color--ink);color:var(--wp--preset--color--paper-2);font-weight:600;font-size:var(--wp--preset--font-size--sm)}
.wk-tile__more a{color:inherit;text-decoration:none}
.wk-tile__more a::after{content:"";position:absolute;inset:0;z-index:2} /* ganze Kachel anklickbar */
.wk-tile:hover .wk-tile__name{background:var(--wp--preset--color--hot-light)}
/* Kachel-Raster: standardmäßig bis zu 4 Spalten (weniger Kacheln = entsprechend breiter), unter 1000 px 2 Spalten, mobil 1.
Feste Spaltenzahl ab 1000 px über Klasse wk-cols-2 … 6 (Editor: Auswahl "Spalten"). */
.wk-tiles.is-layout-grid{grid-template-columns:repeat(auto-fit,minmax(calc((100% - 30px) / 4),1fr))}
@media (min-width:1000px){
.wk-tiles.is-layout-grid.wk-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-tiles.is-layout-grid.wk-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wk-tiles.is-layout-grid.wk-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wk-tiles.is-layout-grid.wk-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wk-tiles.is-layout-grid.wk-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:999px){.wk-tiles.is-layout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.wk-tiles.is-layout-grid{grid-template-columns:1fr}}
/* ===== 9 Unternehmen: Hierarchie (Block wk/company-tree aus dem Plugin) ===== */
.wk-org{margin-top:44px}
.wk-org__top{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.wk-org__top img{display:block;width:auto;height:64px}
.wk-org__top h3{margin:0;font-size:clamp(28px,3vw,40px);line-height:.92}
.wk-org__top p{margin:0;color:var(--wp--preset--color--muted-light)}
.wk-org__stem,.wk-org__sub{width:2px;margin:0 auto;background:var(--wp--preset--color--hot)}
.wk-org__stem{height:36px;margin-top:18px}
.wk-org__sub{height:22px}
.wk-org__row{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px;position:relative}
.wk-org__row::before{content:"";position:absolute;left:calc(50% / var(--n,5));right:calc(50% / var(--n,5));top:0;height:2px;background:var(--wp--preset--color--hot)}
.wk-org__col{position:relative;display:flex;flex-direction:column;align-items:stretch;padding-top:28px}
.wk-org__col::before{content:"";position:absolute;left:50%;top:0;width:2px;height:28px;margin-left:-1px;background:var(--wp--preset--color--hot)}
.wk-org__card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;flex:1;min-height:190px;padding:22px 18px;background:var(--wp--preset--color--paper-2);color:var(--wp--preset--color--ink);text-decoration:none;transition:background .15s}
a.wk-org__card:hover{background:#fff}
.wk-org__card img{display:block;width:auto;max-width:100%;height:44px;object-fit:contain;object-position:left center}
.wk-org__card.is-svg img{filter:brightness(0)}
.wk-org__card h3{margin:0;font-size:24px;line-height:1}
.wk-org__card p{margin:6px 0 0;font-size:var(--wp--preset--font-size--sm);color:var(--wp--preset--color--muted)}
@media (max-width:1000px){.wk-org__row{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-org__row::before{display:none}}
@media (max-width:560px){.wk-org__row{grid-template-columns:1fr}.wk-org__col{padding-top:0}.wk-org__col::before{display:none}}