/* Typografie kommt vollstaendig aus dem Theme: theme.json legt Grade, Schriften,
Gewichte und Laufweiten fest, kleinwerkstatt.css ordnet die Klassen dieses Plugins
den Rollen zu. Hier steht bewusst KEINE Schriftangabe - auch kein Ausweichwert,
denn der waere eine zweite Wahrheit. Remy, 09.09.2026. */
/* KLEINWERKSTATT Arbeiten — Stildatei aller Ausgabearten.
*
* Grundsatz: kein fester Farb- oder Schriftwert. Alles kommt aus den Variablen des
* Themes (--wp--preset--…). Hinter jedem Komma steht ein Ersatzwert, damit das Plugin
* auch in einer fremden Umgebung nicht zerfaellt.
*
* Alles ist auf .klw-arbeiten-block eingegrenzt: Das Plugin faerbt nichts ausserhalb
* seines eigenen Blocks.
*
* Reihenfolge:
* 1 Grundwerte und Ersatz fuer Theme-Klassen
* 2 Kopfzeile, Filterleiste, Blaettern
* 3 Die Karte (gemeinsam fuer alle Ausgabearten)
* 4 Ausgabeart Slider (schraeg)
* 5 Ausgabeart Karussell (gerade)
* 6 Ausgabeart Raster
* 7 Ausgabeart Mauerwerk
* 8 Ausgabeart Liste
* 9 Abstaende
* 10 Im Editor: Bewegungen ausgeschaltet, Startzustaende aufgehoben
* 11 Ruhe-Einstellung des Betriebssystems
*/
/* ---------- 1 Grundwerte ---------- */
.klw-arbeiten-block{
--klw-takt:var(--wp--custom--takt,cubic-bezier(.25,.74,.22,.99));
--klw-rinne:var(--wp--custom--rinne,24px);
--klw-rand:var(--wp--preset--spacing--rand);
--klw-sp:var(--wp--custom--sp,48px);
--klw-klein:color-mix(in srgb,currentColor 66%,transparent); /* 66 statt 52, siehe unten */
--klw-linie:color-mix(in srgb,currentColor 13%,transparent);
--klw-spalten:3;
--klw-verhaeltnis:2/3;
--klw-luecke:var(--klw-rinne);
/* Hover-Zoom (Slider), nach Brooklyn Demo 43. Die Karte waechst in zwei Stufen:
--klwa-hover-anlauf schnell (0,7 s), --klwa-hover-zoom langsam (1,7 s) — zusammen
rund 107 %. --klwa-hover-nummer: so weit rutscht die Nummer hinter die Karte.
--klwa-hover-abstand: so viel Luft bleibt zwischen gewachsener Bildkante und
Unterschrift (der Weg dorthin wird aus den gemessenen Kartenmassen berechnet). */
--klwa-hover-anlauf:1.02;
--klwa-hover-zoom:1.05;
--klwa-hover-nummer:43px;
--klwa-hover-abstand:4px;
/* Kurve wie im Vorbild (GSAP „Expo.easeOut“ als CSS-Kurve). */
--klwa-expo-aus:cubic-bezier(.19,1,.22,1);
/* Wie weit die schraege Spur unter die Kopfzeile rutscht. Frueher 4rem — dabei
ueberlappte die rechte, am hoechsten stehende Karte die Pfeile um 34 px
(gemessen bei 1440 px). Groesserer Wert = Spur weiter oben, kleinerer = mehr
Abstand zu den Pfeilen. */
--klwa-spur-hoch:0.5rem;
/* Der Block ist sein eigener Bezugsrahmen: die Umbrueche richten sich nach der
Breite, die er tatsaechlich hat — nicht nach der Breite des Fensters. Damit sitzt
das Raster auch in einer schmalen Spalte richtig. */
container-type:inline-size;
container-name:klwblock;
overflow:clip;
}
/* Ersatz fuer Klassen, die sonst aus dem Theme kaemen. Bringt das Theme sie mit,
sagen beide dasselbe; fehlt das Theme, greift dieser Ersatz. */
.klw-arbeiten-block .klwa-klein{color:var(--klw-klein);}
.klw-arbeiten-block .klwa-gross{max-width:52ch}
.klw-arbeiten-block .klwa-schmal{max-width:56ch}
.klw-arbeiten-block .klwa-weiter{margin-top:16px}
.klw-arbeiten-block .klwa-weiter a{display:inline-flex;align-items:center;gap:10px;padding-bottom:2px;border-bottom:1px solid currentColor;text-decoration:none;color:inherit}
/* Der Pfeil ist als Zeichnung im Stil hinterlegt (kein Bild von aussen). */
.klw-arbeiten-block .klwa-weiter a::after{
content:"";width:14px;height:14px;background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition:transform .4s var(--klw-takt);
}
.klw-arbeiten-block .klwa-weiter a:hover::after{transform:translateX(4px)}
/* Versatz beim Einblenden (im Theme hiessen diese Hilfsklassen klw-i1 … klw-i5). */
.klw-arbeiten-block .klwa-i1{--i:1}
.klw-arbeiten-block .klwa-i2{--i:2}
.klw-arbeiten-block .klw-arbeiten-ueberschrift{margin:0 0 26px}
.klw-arbeiten-block .klw-arbeiten-leer,.klw-arbeiten-leer{padding:12px 0;color:var(--klw-klein,#666)}
/* Leere Angabe auf der Unterseite (der Kurzbefehl gab nichts zurueck) nicht als Luecke
stehen lassen. Gilt fuer die mitgelieferte Rueckfall-Vorlage. */
.klw-fall-angabe:empty{display:none}
/* Einblenden beim Sichtbarwerden. Das Theme (oder das eigene Skript) setzt klwa-da.
Hoehere Gewichtung als im Theme, damit beide Zustaende aus einer Hand kommen. */
.klw-arbeiten-block .klwa-ein{opacity:0;transform:translateY(28px);transition:opacity .7s var(--klw-takt),transform .8s var(--klw-takt);transition-delay:calc(var(--i,0) * 70ms)}
.klw-arbeiten-block .klwa-ein.klwa-da{opacity:1;transform:none}
/* Sichtbarer Fokus — Bedienung mit der Tastatur. */
.klw-arbeiten-block a:focus-visible,
.klw-arbeiten-block button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
/* Nur fuer Vorlesewerkzeuge sichtbar (WordPress bringt die Klasse mit; hier als Ersatz). */
.klw-arbeiten-block .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ---------- 1b Die Bloecke „Fakten“ und „Faktenzeile“ ----------
Sie stehen auf der Projektseite und gehoeren nicht zu einer Uebersicht. Deshalb
sind sie nicht auf .klw-arbeiten-block eingegrenzt, sondern auf ihre eigene Klasse. */
.klwa-fakten{
--klwa-linie:color-mix(in srgb,currentColor 13%,transparent);
/* 66 statt vormals 52 Prozent, damit die Beschriftungen der Faktenzeilen bei 13px
den Mindestkontrast 4,5:1 erreichen (gemessen 12.09.2026, vorher 4,26:1). */
--klwa-gedaempft:color-mix(in srgb,currentColor 66%,transparent);
}
.klwa-fakten .klwa-faktenzeile{padding:12px 0;border-top:1px solid var(--klwa-linie)}
.klwa-fakten .klwa-faktenzeile:last-child{border-bottom:1px solid var(--klwa-linie)}
.klwa-fakten .klwa-fakt-titel{
margin:0 0 2px;
color:var(--klwa-gedaempft);
}
.klwa-fakten .klwa-fakt-text{margin:0;
}
/* Leere Zeile faellt weg — auf der Website, nicht im Editor. */
.klwa-fakten .klwa-faktenzeile:not(.wp-block):has(.klwa-fakt-titel:empty):has(.klwa-fakt-text:empty){display:none}
.klwa-fakten .klwa-fakt-titel:empty,
.klwa-fakten .klwa-fakt-text:empty{display:none}
/* Der Minus-Knopf einer Faktenzeile — nur im Editor, nie auf der Website.
Er ist DAUERHAFT sichtbar: Wo ein Pluszeichen etwas anlegt, muss der Weg zurueck
genauso zu sehen sein, ohne dass man die Zeile erst anklicken muss. */
.editor-styles-wrapper .klwa-faktenzeile{position:relative}
.editor-styles-wrapper .klwa-faktenzeile .klwa-zeile-weg{
position:absolute;top:6px;right:0;
opacity:.5;
min-width:30px;width:30px;height:30px;padding:0;
border-radius:50%;
transition:opacity .15s ease,background-color .15s ease;
}
.editor-styles-wrapper .klwa-faktenzeile:hover .klwa-zeile-weg{opacity:.85}
.editor-styles-wrapper .klwa-faktenzeile .klwa-zeile-weg:hover,
.editor-styles-wrapper .klwa-faktenzeile .klwa-zeile-weg:focus-visible{
opacity:1;
background:color-mix(in srgb,currentColor 10%,transparent);
}
/* Das Pluszeichen von WordPress sitzt sonst rechts unten und schiebt sich unter das
Minus der letzten Zeile. Es bekommt deshalb einen eigenen Platz: links, unterhalb
der letzten Zeile. */
/* Eine Zeile, deren Angabe aus einer Kategorie kommt: im Editor nicht tippbar,
deshalb als Hinweis leicht abgesetzt. Auf der Website sieht sie aus wie jede andere. */
.editor-styles-wrapper .klwa-fakt-auto{cursor:default}
/* Eine Zeile, deren Wert in einem Feld der Arbeit liegt: Sie wird hier getippt, der
Wert landet aber im Feld — nur so kennt ihn auch die Uebersicht. Das Eingabefeld
soll deshalb aussehen wie normaler Text, nicht wie ein Formularfeld. */
.editor-styles-wrapper textarea.klwa-fakt-feld{
display:block;width:100%;margin:0;padding:0;border:0;background:none;
font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;
resize:none;overflow:hidden;box-shadow:none;
}
.editor-styles-wrapper textarea.klwa-fakt-feld:focus{outline:none;box-shadow:none}
.editor-styles-wrapper .klwa-fakt-leer{opacity:.45;font-style:italic}
.editor-styles-wrapper .klwa-fakten > .block-list-appender{
position:relative;
inset:auto;
margin:14px auto 0 0;
width:-moz-fit-content;
width:fit-content;
float:none;
}
/* Der Text weicht dem Knopf aus, damit er nicht darunter laeuft. */
.editor-styles-wrapper .klwa-faktenzeile .klwa-fakt-titel,
.editor-styles-wrapper .klwa-faktenzeile .klwa-fakt-text{padding-right:34px}
/* ---------- 2 Kopfzeile, Filterleiste, Blaettern ---------- */
.klw-arbeiten-block .klw-arbeiten-kopf{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
column-gap:var(--klw-rinne);row-gap:var(--klw-rinne);align-items:start;
max-width:var(--wp--style--global--wide-size,1440px);margin:0 auto;
padding-left:var(--klw-rand);padding-right:var(--klw-rand);
}
.klw-arbeiten-block .klw-arbeiten-text{grid-column:1/7}
.klw-arbeiten-block .klwa-aktiv-zeile{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px}
.klw-arbeiten-block .klwa-aktiv-zeile p{margin:0}
.klw-arbeiten-block .klwa-aktiv-nr{padding-bottom:.25em}
.klw-arbeiten-block .klwa-anrisstext p{margin:0}
.klw-arbeiten-block .klwa-anrisstext p+p{margin-top:10px}
/* Kopfzeile der schlichten Ausgabearten: Ueberschrift links, Pfeile rechts. */
.klw-arbeiten-block .klwa-kopf-schlicht{display:flex;grid-template-columns:none;justify-content:space-between;align-items:flex-end;gap:var(--klw-rinne)}
.klw-arbeiten-block .klwa-kopf-schlicht .klw-arbeiten-ueberschrift{margin-bottom:0}
.klw-arbeiten-block .klwa-steuer{display:flex;gap:10px;align-items:flex-start}
.klw-arbeiten-block .klwa-steuer-rechts{grid-column:11/13;justify-self:end;align-self:center}
.klw-arbeiten-block .klwa-pfeil{
width:52px;height:52px;border:1px solid var(--klw-linie);border-radius:0;
display:grid;place-items:center;color:inherit;background:none;padding:0;cursor:pointer;
transition:background-color .4s var(--klw-takt),color .4s var(--klw-takt),border-color .4s var(--klw-takt);
}
.klw-arbeiten-block .klwa-pfeil svg{width:16px;height:16px}
.klw-arbeiten-block .klwa-pfeil:hover{background:var(--wp--preset--color--anthrazit);color:var(--wp--preset--color--weiss);border-color:var(--wp--preset--color--anthrazit)}
.klw-arbeiten-block .klwa-filterleiste{
display:flex;flex-wrap:wrap;gap:var(--klw-rinne);
max-width:var(--wp--style--global--wide-size,1440px);margin:0 auto var(--klw-sp);
padding:18px var(--klw-rand) 0;
}
.klw-arbeiten-block .klwa-filter-gruppe{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.klw-arbeiten-block .klwa-filter-titel{flex:0 0 auto}
.klw-arbeiten-block .klwa-filter-liste{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.klw-arbeiten-block .klw-filter{
display:inline-block;padding:6px 12px;border:1px solid var(--klw-linie);
text-decoration:none;color:inherit;line-height:1.2;
transition:background-color .3s var(--klw-takt),color .3s var(--klw-takt),border-color .3s var(--klw-takt);
}
.klw-arbeiten-block .klw-filter:hover{border-color:currentColor}
.klw-arbeiten-block .klwa-filter-aktiv{background:var(--wp--preset--color--anthrazit);color:var(--wp--preset--color--weiss);border-color:transparent}
.klw-arbeiten-block .klwa-filter-anzahl{opacity:.55;margin-left:.35em}
.klw-arbeiten-block .klwa-blaettern{
max-width:var(--wp--style--global--wide-size,1440px);margin:var(--klw-sp) auto 0;
padding:0 var(--klw-rand);
}
.klw-arbeiten-block .klwa-blaettern ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.klw-arbeiten-block .klwa-seite{
display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;
border:1px solid var(--klw-linie);text-decoration:none;color:inherit;
}
.klw-arbeiten-block .klwa-seite-aktiv{background:var(--wp--preset--color--anthrazit);color:var(--wp--preset--color--weiss);border-color:transparent}
/* ---------- 3 Die Karte ---------- */
.klw-arbeiten-block .klwa-nummer{display:block;color:var(--klw-klein);margin-bottom:14px}
.klw-arbeiten-block .klwa-karte{
display:block;position:relative;aspect-ratio:var(--klw-verhaeltnis);overflow:hidden;
background:var(--wp--preset--color--grau);
box-shadow:0 10px 16px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);
}
.klw-arbeiten-block .klwa-karte img{
position:absolute;inset:0;width:100%;max-width:none;height:100%;
object-fit:cover;object-position:top;transform:scale(1.3);
transition:transform 1.1s cubic-bezier(.29,.73,.45,1);
}
.klw-arbeiten-block .klwa-kein-bild{display:block;width:100%;height:100%}
.klw-arbeiten-block .klwa-unterschrift{display:block;margin-top:14px;padding-right:8px}
.klw-arbeiten-block .klwa-unterschrift span{color:var(--klw-klein)}
.klw-arbeiten-block .klwa-karten-anriss{margin:8px 0 0;color:var(--klw-klein);max-width:44ch}
/* Bild ist erst gross und zieht sich beim Sichtbarwerden zusammen. */
.klw-arbeiten-block.klwa-da .klwa-karte img,
.klw-arbeiten-block .klwa-spur-feld.klwa-da .klwa-karte img,
.klw-arbeiten-block .klwa-eintrag.klwa-da .klwa-karte img,
.klw-arbeiten-block .klwa-zeile.klwa-da .klwa-karte img{transform:scale(1)}
/* ---------- 4 Ausgabeart Slider (schraeg) ---------- */
.klw-ansicht-slider .klwa-spur-feld{position:relative;margin-top:calc(var(--klw-sp)*.3);padding:50px 0 110px;cursor:grab}
.klw-ansicht-slider .klwa-spur-flaeche{width:104%;margin-left:-2%;transform:rotate(-7.7deg);transform-origin:50% 50%;overflow:visible}
.klw-ansicht-slider .klwa-slide{flex:0 0 25%;padding:0 34px}
@container klwblock (min-width:901px){
.klw-ansicht-slider .klwa-spur{padding-left:calc(var(--klw-rand) + 2vw)}
/* Der Abstand nach oben waechst mit der Fensterbreite mit. Grund: Die Spur ist um
7,7 Grad geneigt — je breiter das Fenster, desto hoeher steht die rechte Karte
und desto naeher kommt sie den Pfeilen. Bei festem Abstand ueberlappte sie ab
etwa 1700 px (gemessen: bei 1920 px 11 px, bei 2560 px 24 px Ueberlappung).
Die Steigung ist aus zwei Messpunkten abgeleitet und haelt den Abstand ueber die
ganze Breite bei rund 25 px; unterhalb von 1400 px greift der Mindestwert. */
.klw-ansicht-slider .klwa-spur-feld{
margin-top:calc(-1 * var(--klwa-spur-hoch));
padding-top:max(24px, calc(6.82vw - 71px));
}
}
@container klwblock (max-width:900px){
.klw-ansicht-slider .klwa-spur-feld{padding:30px 0 20px;cursor:auto;margin-top:0}
.klw-ansicht-slider .klwa-spur-flaeche{width:100%;margin-left:0;transform:none}
.klw-ansicht-slider .klwa-slide{flex-basis:78%;padding:0 10px}
.klw-arbeiten-block .klwa-steuer-rechts{grid-column:1/-1;justify-self:start;margin-top:22px}
.klw-arbeiten-block .klw-arbeiten-text{grid-column:1/-1}
}
/* Anrisse liegen uebereinander; sichtbar ist immer der zur vorderen Karte. */
.klw-arbeiten-block .klwa-stapel{display:grid}
.klw-arbeiten-block .klwa-stapel>.klwa-anrisstext{grid-area:1/1;visibility:hidden;pointer-events:none}
.klw-arbeiten-block .klwa-stapel>.klwa-anrisstext.klwa-aktiv{visibility:visible;pointer-events:auto;animation:klwa-anriss-ein .55s var(--klw-takt)}
.klw-arbeiten-block .klwa-stapel>.klwa-anrisstext>p+p{margin-top:10px}
@keyframes klwa-anriss-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---------- 5 Ausgabeart Karussell (gerade) ---------- */
.klw-ansicht-karussell .klwa-spur-feld{position:relative;margin-top:var(--klw-sp);padding:0}
.klw-ansicht-karussell .klwa-spur-flaeche{width:100%;margin:0;transform:none;overflow:visible}
.klw-ansicht-karussell .klwa-slide{flex:0 0 calc(100% / var(--klw-spalten));padding:0 calc(var(--klw-luecke)/2)}
.klw-ansicht-karussell .klwa-karte{box-shadow:none}
.klw-ansicht-karussell .klwa-spur-feld{cursor:grab}
@container klwblock (max-width:900px){.klw-ansicht-karussell .klwa-slide{flex-basis:82%}}
@container klwblock (min-width:901px) and (max-width:1200px){.klw-ansicht-karussell .klwa-slide{flex-basis:calc(100% / min(var(--klw-spalten),3))}}
/* Spur (Slider und Karussell gemeinsam) */
.klw-arbeiten-block .klwa-spur-feld{max-width:none}
/* KEINE eigene Transition auf der Spur: Embla verschiebt sie Bild fuer Bild selbst.
Ein Uebergang hier wuerde dagegen arbeiten und die Bewegung zaeh machen. */
.klw-arbeiten-block .klwa-spur{
display:flex;width:100%;list-style:none;padding:0;margin:0;
backface-visibility:hidden;
touch-action:pan-y pinch-zoom;
}
.klw-arbeiten-block .klwa-slide{margin:0;box-sizing:border-box}
/* Waehrend der Fahrt bekommt das Bild KEINEN eigenen Uebergang: Es faehrt ohnehin mit
der Spur mit. Vorher liefen bei jeder Fahrt 15 Karten und 15 Bilder zusaetzlich mit
je einem eigenen Uebergang — das machte die Bewegung schwerfaellig. */
.klw-arbeiten-block .klwa-spur.klwa-faehrt .klwa-karte img{transition:none}
/* Ziehen: kein Textmarkieren, kein Bild-Ziehen, senkrechtes Scrollen bleibt dem Browser. */
.klw-arbeiten-block .klwa-spur-feld{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.klw-arbeiten-block .klwa-spur img{-webkit-user-drag:none;pointer-events:none}
.klw-arbeiten-block .klwa-spur.klwa-zieht{cursor:grabbing}
.klw-arbeiten-block .klwa-spur-feld.klwa-zieht{cursor:grabbing}
.klw-arbeiten-block .klwa-spur.klwa-zieht .klwa-karte img{transition:none}
@media (hover:none){.klw-arbeiten-block .klwa-spur-feld{cursor:grab}}
/* Beim Blaettern bewegt sich innerhalb der Karte nichts, nur die Spur faehrt. Dehnen und
Staffelung (nach Brooklyn Demo 43) waren am 13.09.2026 kurz eingebaut und sind auf
Remys Wunsch wieder entfallen. */
/* ---------- Hover-Zoom (nur Slider, nur mit Maus, nicht waehrend der Fahrt) ----------
Machart wie Brooklyn Demo 43 (am 13.09.2026 aus dessen Code und Stilwerten gelesen):
- Die GANZE Karte waechst samt Schatten — das Bild wird nicht im Rahmen beschnitten.
Zwei Stufen mit eigener Dauer: „scale“ 1,02 in 0,7 s, „transform: scale(1.05)“ in
1,7 s. Beide Eigenschaften wirken zusammen (rund 107 %).
- Die Nummer rutscht nach unten HINTER die Karte und verschwindet. Dafuer braucht es
keinen z-index: Sie steht im HTML vor der Karte, also malt der Browser die Karte
darueber.
- Die Unterschrift rueckt bis an die untere Bildkante heran und haelt dort
--klwa-hover-abstand Luft. Abweichung vom Original (dort legt sie sich auf das Bild):
Unsere Unterschrift ist laenger und dunkler und stiess auf Bildinhalte (Remy,
13.09.2026). Weil die Karte um ihre Mitte waechst, kommt ihre Unterkante der
Unterschrift entgegen — um mehr als die 14 px Luecke. Die Unterschrift weicht deshalb
um wenige Pixel nach unten aus. Kartenhoehe und Luecke misst assets/arbeiten.js.
Beim Verlassen: Karte 0,7 s, Nummer und Unterschrift 1,7 s. Kurve Expo easeOut.
Frueherer Versuch vom selben Tag (Rahmen 1,02, Bild darin 1,05 beschnitten, Texte
6 px) hat Remy nicht gefallen. */
.klw-ansicht-slider .klwa-karte{transition:scale .7s var(--klwa-expo-aus),transform .7s var(--klwa-expo-aus)}
.klw-ansicht-slider .klwa-nummer,
.klw-ansicht-slider .klwa-unterschrift{transition:transform 1.7s var(--klwa-expo-aus)}
@media (hover:hover) and (pointer:fine){
@container klwblock (min-width:901px){
.klw-ansicht-slider .klwa-spur:not(.klwa-faehrt) .klwa-slide:hover .klwa-karte{
scale:var(--klwa-hover-anlauf);
transform:scale(var(--klwa-hover-zoom));
transition:scale .7s var(--klwa-expo-aus),transform 1.7s var(--klwa-expo-aus);
}
.klw-ansicht-slider .klwa-spur:not(.klwa-faehrt) .klwa-slide:hover .klwa-nummer{transform:translateY(var(--klwa-hover-nummer))}
/* Weg = halbes Wachstum der Karte − Luecke + Luft. */
.klw-ansicht-slider .klwa-spur:not(.klwa-faehrt) .klwa-slide:hover .klwa-unterschrift{
transform:translateY(calc(var(--klwa-karte-h,460px) * (var(--klwa-hover-anlauf) * var(--klwa-hover-zoom) - 1) / 2 - var(--klwa-unterschrift-luecke,14px) + var(--klwa-hover-abstand)));
}
}
}
/* ---------- 6 Ausgabeart Raster ---------- */
.klw-ansicht-raster .klwa-raster{
display:grid;grid-template-columns:repeat(var(--klw-spalten),minmax(0,1fr));
gap:calc(var(--klw-luecke)*1.6) var(--klw-luecke);
list-style:none;margin:0;padding:0;
max-width:var(--wp--style--global--wide-size,1440px);margin-inline:auto;
padding-inline:var(--klw-rand);
}
.klw-ansicht-raster .klwa-eintrag{margin:0}
.klw-ansicht-raster .klwa-karte{box-shadow:none}
@container klwblock (max-width:1100px){.klw-ansicht-raster .klwa-raster{grid-template-columns:repeat(min(var(--klw-spalten),3),minmax(0,1fr))}}
@container klwblock (max-width:820px){.klw-ansicht-raster .klwa-raster{grid-template-columns:repeat(min(var(--klw-spalten),2),minmax(0,1fr))}}
@container klwblock (max-width:520px){.klw-ansicht-raster .klwa-raster{grid-template-columns:1fr}}
/* Ueberschrift und Filterleiste stehen im selben Raster wie die Kacheln. */
.klw-ansicht-raster .klw-arbeiten-ueberschrift,
.klw-ansicht-mauerwerk .klw-arbeiten-ueberschrift,
.klw-ansicht-liste .klw-arbeiten-ueberschrift{
max-width:var(--wp--style--global--wide-size,1440px);margin-inline:auto;
padding-inline:var(--klw-rand);
}
/* ---------- 7 Ausgabeart Mauerwerk ----------
Zwei Zustaende:
A) OHNE Skript — CSS-Spalten. Sieht gleich aus, die Reihenfolge laeuft aber senkrecht.
Die Spalten-Behaelter sind dabei ausgeblendet.
B) MIT Colcade (Klasse klwa-geordnet am Behaelter) — echte Spalten nebeneinander,
die Reihenfolge laeuft waagerecht. Colcade verschiebt die Kacheln hinein. */
.klw-ansicht-mauerwerk .klwa-mauerwerk{
columns:var(--klw-spalten);
column-gap:var(--klw-luecke);
max-width:var(--wp--style--global--wide-size,1440px);
margin-inline:auto;
padding-inline:var(--klw-rand);
}
.klw-ansicht-mauerwerk .klwa-eintrag{break-inside:avoid;margin:0 0 calc(var(--klw-luecke)*1.6)}
.klw-ansicht-mauerwerk .klwa-mauer-spalte{display:none}
.klw-ansicht-mauerwerk .klwa-karte{box-shadow:none;aspect-ratio:var(--klw-verhaeltnis)}
/* Zustand B: Colcade hat die Kacheln verteilt. */
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet{
columns:auto;
display:flex;
align-items:flex-start;
gap:var(--klw-luecke);
}
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet .klwa-mauer-spalte{
display:block;
flex:1 1 0;
min-width:0;
}
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet > .klwa-eintrag{display:none}
/* Bei „Wie das Bild“ bestimmt das Bild selbst die Hoehe. */
.klw-ansicht-mauerwerk .klwa-karte[style],
.klw-arbeiten-block[style*="--klw-verhaeltnis:auto"] .klwa-karte{aspect-ratio:auto}
.klw-arbeiten-block[style*="--klw-verhaeltnis:auto"] .klwa-karte img{position:static;left:auto;width:100%;height:auto;transform:none}
/* Wie viele Spalten? Ueber die Breite des Blocks, nicht des Fensters. Colcade
beruecksichtigt nur Spalten, die sichtbar sind — die uebrigen werden ausgeblendet. */
@container klwblock (max-width:1100px){
.klw-ansicht-mauerwerk .klwa-mauerwerk{columns:min(var(--klw-spalten),3)}
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet{columns:auto}
.klw-ansicht-mauerwerk .klwa-mauer-spalte-4,
.klw-ansicht-mauerwerk .klwa-mauer-spalte-5,
.klw-ansicht-mauerwerk .klwa-mauer-spalte-6{display:none!important}
}
@container klwblock (max-width:820px){
.klw-ansicht-mauerwerk .klwa-mauerwerk{columns:min(var(--klw-spalten),2)}
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet{columns:auto}
.klw-ansicht-mauerwerk .klwa-mauer-spalte-3{display:none!important}
}
@container klwblock (max-width:520px){
.klw-ansicht-mauerwerk .klwa-mauerwerk{columns:1}
.klw-ansicht-mauerwerk .klwa-mauerwerk.klwa-geordnet{columns:auto}
.klw-ansicht-mauerwerk .klwa-mauer-spalte-2{display:none!important}
}
/* ---------- 8 Ausgabeart Liste ---------- */
.klw-ansicht-liste .klwa-liste{
list-style:none;margin:0;padding-inline:var(--klw-rand);
max-width:var(--wp--style--global--wide-size,1440px);margin-inline:auto;
display:flex;flex-direction:column;gap:calc(var(--klw-sp)*1.2);
}
.klw-ansicht-liste .klwa-zeile{
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
gap:var(--klw-rinne);align-items:center;margin:0;
}
.klw-ansicht-liste .klwa-zeile-gespiegelt .klwa-zeile-bild{order:2}
.klw-ansicht-liste .klwa-karte{box-shadow:none}
.klw-ansicht-liste .klwa-zeile-name{margin:0 0 6px;}
.klw-ansicht-liste .klwa-zeile-name a{color:inherit;text-decoration:none}
.klw-ansicht-liste .klwa-zeile-name a:hover{text-decoration:underline}
.klw-ansicht-liste .klwa-zeile-text p{margin:0}
.klw-ansicht-liste .klwa-zeile-text p+p{margin-top:10px}
.klw-ansicht-liste .klwa-nummer{margin-bottom:6px}
@container klwblock (max-width:900px){
.klw-ansicht-liste .klwa-zeile{grid-template-columns:1fr}
.klw-ansicht-liste .klwa-zeile-gespiegelt .klwa-zeile-bild{order:0}
.klw-ansicht-liste .klwa-liste{gap:var(--klw-sp)}
}
/* ---------- 9 Abstaende ---------- */
.klw-abstand-ohne{--klw-luecke:0px}
.klw-abstand-eng{--klw-luecke:calc(var(--klw-rinne)*.5)}
.klw-abstand-normal{--klw-luecke:var(--klw-rinne)}
.klw-abstand-weit{--klw-luecke:calc(var(--klw-rinne)*2)}
/* ---------- 10 Im Editor ---------- */
/* Die Stildatei gilt auch im Editor, das Skript nicht. Ohne diese Gegenregeln staenden
alle Bloecke mit klwa-ein auf unsichtbar und liessen sich nicht anklicken. */
.editor-styles-wrapper .klw-arbeiten-block .klwa-ein{opacity:1;transform:none;transition:none}
.editor-styles-wrapper .klw-arbeiten-block .klwa-karte img{transform:none}
.editor-styles-wrapper .klw-arbeiten-block .klwa-stapel{display:block}
.editor-styles-wrapper .klw-arbeiten-block .klwa-stapel>.klwa-anrisstext{visibility:visible;pointer-events:auto;grid-area:auto;padding:12px 0;border-top:1px dashed var(--klw-linie);animation:none}
.editor-styles-wrapper .klw-arbeiten-block .klwa-stapel>.klwa-anrisstext::before{content:"Anriss (im Slider ist jeweils einer sichtbar)";display:block;font-size:.75rem;color:var(--klw-klein);margin-bottom:6px}
.editor-styles-wrapper .klw-arbeiten-block .klwa-spur-feld{cursor:auto;padding:24px 0}
.editor-styles-wrapper .klw-arbeiten-block .klwa-spur-flaeche{transform:none;width:100%;margin:0}
.editor-styles-wrapper .klw-arbeiten-block .klwa-spur{overflow-x:auto;padding-left:0}
.editor-styles-wrapper .klw-arbeiten-block .klwa-slide{flex-basis:calc(100% / var(--klw-spalten))}
/* ---------- 11 Ruhe-Einstellung des Betriebssystems ---------- */
@media (prefers-reduced-motion:reduce){
.klw-arbeiten-block .klwa-ein,
.klw-arbeiten-block .klwa-karte img{opacity:1!important;transform:none!important;transition:none!important}
.klw-arbeiten-block .klwa-spur{transition:none}
.klw-arbeiten-block .klwa-karte,
.klw-arbeiten-block .klwa-nummer,
.klw-arbeiten-block .klwa-unterschrift{transform:none!important;scale:none!important;transition:none!important}
.klw-arbeiten-block .klwa-stapel>.klwa-anrisstext.klwa-aktiv{animation:none}
}
/* ---------------------------------------------------------------------------
* Ansicht „Halo“: alle Arbeiten sichtbar, eine offen, die anderen als Streifen.
* Farben und Schriften aus den Voreinstellungen des Themes (theme.json), mit Ersatzwerten
* für ein Theme, das sie nicht kennt.
* ------------------------------------------------------------------------- */
.klwa-halo {
--dauer: var(--wp--custom--bewegung--dauer, 1s);
--kurve: var(--wp--custom--bewegung--kurve, cubic-bezier(.3, .7, .2, 1));
/* Breite der Streifen und der offenen Karte. Die offene Breite rechnet das Raster
selbst aus (Breite der Reihe minus die Streifen), auch im Editor, ohne Skript. */
--streifen: clamp(88px, 9vw, 150px);
--offen: calc(100cqw - (var(--anzahl, 5) - 1) * (var(--streifen) + 14px));
container-type: inline-size;
--rot: var(--wp--preset--color--rot, #cd1316);
--schmal-schrift: var(--wp--preset--font-family--archivo-schmal, "Arial Narrow", sans-serif);
display: flex;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.klwa-halo, .klwa-halo * { box-sizing: border-box; }
.klwa-halo-karte {
position: relative;
flex: 0 1 var(--streifen);
min-width: 0;
margin: 0;
background: var(--wp--preset--color--flaeche, #eeeeeb);
overflow: hidden;
cursor: pointer;
transition: flex-grow var(--dauer) var(--kurve);
}
.klwa-halo-karte.offen { flex-grow: 1; cursor: default; }
.klwa-halo-karte::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--rot);
z-index: 2;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dauer) var(--kurve);
}
.klwa-halo-karte.offen::before { transform: scaleX(1); }
.klwa-halo-karte:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.klwa-halo-bild {
position: relative;
display: block;
left: 50%;
width: var(--offen);
max-width: none;
height: auto;
aspect-ratio: 2.2 / 1;
transform: translateX(-50%);
object-fit: cover;
object-position: left top;
filter: grayscale(1);
transition: filter var(--dauer) var(--kurve);
}
.klwa-halo-karte.offen .klwa-halo-bild { filter: none; }
.klwa-halo-streifen {
position: absolute;
inset: auto 0 0 0;
padding: 16px 14px;
font: 800 15px/1.1 var(--schmal-schrift);
text-transform: uppercase;
letter-spacing: .02em;
overflow-wrap: anywhere;
hyphens: auto;
transition: opacity .4s ease .55s;
}
.klwa-halo-streifen span {
display: block;
margin-bottom: 6px;
font: 500 12px/1 var(--wp--preset--font-family--archivo, sans-serif);
color: var(--wp--preset--color--nebentext, #5c5c57);
}
.klwa-halo-karte.offen .klwa-halo-streifen { opacity: 0; transition: opacity .15s ease; }
.klwa-halo-text {
position: relative;
left: 50%;
width: var(--offen);
max-width: none;
padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px) clamp(28px, 3vw, 44px);
opacity: 0;
transform: translate(-50%, 10px);
transition: opacity .15s ease, transform .15s ease;
pointer-events: none;
}
.klwa-halo-karte.offen .klwa-halo-text {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
transition: opacity .5s ease .6s, transform .6s var(--kurve) .6s;
}
.klwa-halo-kunde {
margin: 0 0 8px;
font-size: 14px;
color: var(--wp--preset--color--nebentext, #5c5c57);
}
.klwa-halo-kernsatz {
margin: 0 0 12px;
font-size: var(--wp--preset--font-size--x-large, clamp(24px, 2.3vw, 36px));
line-height: 1;
}
.klwa-halo-kurz { margin: 0 0 16px; max-width: 36em; }
.klwa-halo-link {
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
color: var(--rot);
}
.klwa-halo-link:hover { color: var(--wp--preset--color--anthrazit, #1d1d1b); }
@media (max-width: 860px) {
.klwa-halo { flex-direction: column; }
.klwa-halo-karte { flex: none; }
.klwa-halo-bild { position: static; transform: none; width: 100%; height: 88px; aspect-ratio: auto; filter: none; }
.klwa-halo-karte.offen .klwa-halo-bild { height: auto; aspect-ratio: 2 / 1; }
.klwa-halo-streifen {
inset: 0 0 auto 0;
height: 88px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
background: linear-gradient(transparent, rgb(0 0 0 / .55));
}
.klwa-halo-streifen span { color: #fff; opacity: .85; }
.klwa-halo-text { position: static; width: auto; display: none; opacity: 1; transform: none; left: auto; }
.klwa-halo-karte.offen .klwa-halo-text { display: block; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.klwa-halo-karte, .klwa-halo-karte::before, .klwa-halo-bild, .klwa-halo-text, .klwa-halo-streifen { transition: none; }
}