/* Seitenkopf aller Unterseiten (Thomas 17.10.2026: „die kurzen hero-sections … noch dazu unterschiedlich gross pro page“ → Variante A:
   „Hero nur mit Schrift, auf allen Unterseiten gleich hoch“). Gilt für About, Services, Work, Blog, Contact, Kategorien, Artikel, Policies.
   Aufbau im HTML: .bloc.sk-bloc > .container.sk-container > .row.align-items-start.round.seitenkopf > .sk-inhalt
                   > p.sk-etikett + h1.sk-titel (+ p.sk-einleitung). Rahmen zeichnet sich weiter über js/seiten-bewegung.js (.round + h1).
   Rahmen bündig mit den Rahmen darunter (Bilder, grüne Felder, Formular, Karten) = Außenkante des Containers (Desktop 1440: 150–1290 px).
   Etikett: genau die Schrift von „- CONTACT“ (Thomas 17.10.: „genau die hätte ich gerne auch auf den anderen seiten“) – Inter Tight Light.
   Blocs erzwingt Textfarben mit !important → eigene Farben hier ebenfalls mit !important. */
.sk-bloc { --sk-h: 500px; padding-top: 48px; padding-bottom: 88px; }
.seitenkopf.row { margin: 0; border: 1px solid var(--swatch-var-2425); border-radius: 6px; }
.seitenkopf .sk-inhalt { display: flex; flex-direction: column; min-height: var(--sk-h); padding: 40px 44px 48px; width: 100%; }
.sk-etikett { margin: 0 0 auto !important; padding: 0 0 32px; font-family: "InterTight-Light", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important; font-size: 19.2px !important; line-height: 1.6 !important; letter-spacing: normal; color: var(--swatch-var-2425) !important; }
.sk-titel { margin: 0 !important; padding: 0 !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important;
	font-size: clamp(46px, 2.2rem + 3.9vw, 96px) !important; line-height: 1.02 !important; color: var(--swatch-var-5657) !important; text-wrap: balance; max-width: 15ch; }
.sk-titel.sk-lang { font-size: clamp(36px, 1.5rem + 3.2vw, 76px) !important; line-height: 1.08 !important; max-width: 20ch; }
.sk-einleitung { margin: 28px 0 0 !important; max-width: 640px; text-wrap: balance; font-size: 19.2px !important; line-height: 1.6 !important; color: var(--swatch-var-2425) !important; }
@media (max-width: 991.98px) { .sk-bloc { --sk-h: 460px; padding-top: 40px; padding-bottom: 72px; } .seitenkopf .sk-inhalt { padding: 32px 32px 40px; } }
@media (max-width: 575.98px) {
	.sk-bloc { --sk-h: 448px; padding-top: 28px; padding-bottom: 56px; }
	.seitenkopf .sk-inhalt { padding: 24px 20px 30px; }
	.sk-etikett, .sk-einleitung { font-size: 17px !important; }
	.sk-einleitung { margin-top: 22px !important; }
}
/* Blöcke direkt unter dem Seitenkopf: gleicher Container wie Kopf + Kopfzeile (Rahmen/Bilder bündig), oben kein eigener Abstand */
.sk-container > .sk-reihe { margin-left: 0; margin-right: 0; }
.bloc .container.sk-ohne-oben { padding-top: 0 !important; padding-bottom: 104px !important; }
.sk-text { margin: 0; max-width: 760px; text-wrap: pretty; }
.sk-auswahl { padding-left: 0; padding-right: 0; }
.sk-kontakt .corners-green { align-self: start !important; }
@media (max-width: 991.98px) { .bloc .container.sk-ohne-oben { padding-bottom: 80px !important; } }
@media (max-width: 575.98px) { .bloc .container.sk-ohne-oben { padding-bottom: 64px !important; } }
/* Raster der Unterseiten = Außenkante des Containers (Blocs: Container ohne Innenabstand, Block 20 px). Rahmen, die mit der Bootstrap-
   Zeile 12 px (Work-Karten) bzw. 40 px (About: Experience/Approach/Philosophy, Handy bis an den Bildschirmrand) darüber hinausragten → bündig */
.row:has(> .round.col-12), .row.mini-event-border { margin-left: 0; margin-right: 0; }
/* Bild rechts im Seitenkopf (Vorschlag 18.10., zuerst nur Services: „vier verbundene Felder“). Desktop/Tablet rechts mittig, Handy klein oben rechts.
   Nur SVG + CSS (stroke/opacity/transform). Ohne html.bew („Bewegung reduzieren“) steht das fertige Bild still. */
.sk-mit-bild .sk-inhalt { position: relative; }
.sk-bild { position: absolute; right: 44px; top: 50%; width: clamp(220px, 27vw, 380px); transform: translateY(-50%); pointer-events: none; }
.sk-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.sk-mit-bild .sk-einleitung { max-width: min(640px, 52%); }
.sk-vier .kreis, .sk-vier .strahl { stroke: var(--swatch-var-2425); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-vier .strahl { stroke-opacity: .55; }
.sk-vier .marke circle, .sk-vier .bahn circle, .sk-vier .mitte { fill: var(--swatch-var-2425); }
.sk-vier .marke text { font-family: "InterTight-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .02em; fill: var(--swatch-var-5803); }
.sk-vier .welle { fill: none; stroke: var(--swatch-var-2425); stroke-width: 1; opacity: 0; }
html.bew .da .sk-vier .kreis, html.bew .da .sk-vier .strahl { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.bew .da .sk-vier .kreis { animation: sk-zeichnen 1.6s cubic-bezier(.44, 0, .28, .99) calc(.9s + var(--i) * .22s) forwards; }
html.bew .da .sk-vier .strahl { animation: sk-zeichnen 1s cubic-bezier(.44, 0, .28, .99) calc(2.2s + var(--i) * .12s) forwards; }
html.bew .da .sk-vier .marke { opacity: 0; animation: sk-zeigen .8s ease calc(2.7s + var(--i) * .12s) forwards; }
html.bew .da .sk-vier .mitte { opacity: 0; transform-origin: 200px 200px; animation: sk-zeigen .6s ease 2.1s forwards, sk-atmen 4s ease-in-out 3s infinite; }
html.bew .da .sk-vier .welle { transform-origin: 200px 200px; animation: sk-welle 4s ease-out 3s infinite; }
html.bew .da .sk-vier .bahn { opacity: 0; animation: sk-zeigen 1s ease 3.2s forwards, sk-kreisen var(--d) linear 3.2s infinite; }
@keyframes sk-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sk-zeigen { to { opacity: 1; } }
@keyframes sk-kreisen { to { transform: rotate(360deg); } }
@keyframes sk-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes sk-welle { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
@media (max-width: 991.98px) { .sk-bild { right: 32px; } }
/* Desktop/Tablet: Überschrift nie unter das Bild (lange Artikel-Titel) */
@media (min-width: 576px) {
	.sk-mit-bild .sk-titel { max-width: min(15ch, calc(100% - clamp(220px, 27vw, 380px) - 40px)); }
	.sk-mit-bild .sk-titel.sk-lang { max-width: min(20ch, calc(100% - clamp(220px, 27vw, 380px) - 40px)); }
}
/* Motive der übrigen Seiten (18.10., Thomas: „bitte vorschläge für die restlichen seiten“) – gleiche Sprache wie Services:
   feine grüne Linien zeichnen sich (.z, Reihenfolge --i), Punkte/Texte erscheinen (.f, ab --s), danach eine ruhige Dauerbewegung.
   About Fingerabdruck · Work steigende Linie · Blog/Kategorien Klangwelle · Contact Gespräch · Artikel Blatt · Policies Schild */
.sk-zeichen .lin { stroke: var(--swatch-var-2425); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.sk-zeichen .lin.fein { stroke-opacity: .55; }
.sk-zeichen .lin.hauch { stroke-opacity: .25; }
.sk-zeichen .lin.balken { stroke-width: 2; }
.sk-zeichen .pkt { fill: var(--swatch-var-2425); }
.sk-zeichen .ring { fill: none; stroke: var(--swatch-var-2425); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.sk-zeichen .tinte { font-family: "InterTight-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .02em; fill: var(--swatch-var-5803); }
html:not(.bew) .sk-zeichen .lauf, html:not(.bew) .sk-zeichen .cursor { display: none; }
html.bew .da .sk-zeichen .z { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sk-zeichnen var(--t, 1.4s) cubic-bezier(.44, 0, .28, .99) calc(.9s + var(--i, 0) * .16s) forwards; }
html.bew .da .sk-zeichen .f { opacity: 0; animation: sk-zeigen .7s ease calc(var(--s, 2.4s) + var(--i, 0) * .1s) forwards; }
html.bew .da .sk-zeichen .atmen { animation: sk-zeigen .7s ease var(--s, 2.4s) forwards, sk-atmen 4s ease-in-out calc(var(--s, 2.4s) + 1s) infinite; }
html.bew .da .sk-zeichen .atmen.spaet { animation-delay: var(--s, 2.4s), calc(var(--s, 2.4s) + 3s); }
html.bew .da .sk-zeichen .ring { animation: sk-welle 3.2s ease-out 3.6s infinite; }
html.bew .da .sk-zeichen .balken { transform-box: fill-box; transform-origin: center; animation: sk-balken-auf .7s cubic-bezier(.44, 0, .28, .99) calc(1.4s + var(--i) * .05s) backwards, sk-balken 2.6s ease-in-out calc(2.8s + var(--i) * .13s) infinite alternate; }
html.bew .da .sk-zeichen .zeile { --t: .7s; animation-delay: calc(1.9s + var(--i) * .22s); }
html.bew .da .sk-zeichen .cursor { opacity: 0; animation: sk-blinken 1.1s steps(1) 4.1s infinite; }
html.bew .da .sk-zeichen .atmen-linie { animation: sk-zeichnen var(--t, 1.4s) cubic-bezier(.44, 0, .28, .99) calc(.9s + var(--i, 0) * .16s) forwards, sk-hauch 5s ease-in-out 3.5s infinite; }
@keyframes sk-balken-auf { from { transform: scaleY(0); } }
@keyframes sk-balken { to { transform: scaleY(.45); } }
@keyframes sk-blinken { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sk-hauch { 50% { stroke-opacity: .7; } }
@media (max-width: 575.98px) { .sk-zeichen .tinte { display: none; } }
/* Handy (Thomas 18.10.: „oben links services, mittig rechts die animation, four connected … unterhalb wieder rechts“ – zu unruhig):
   alles in einer Spalte – Etikett, darunter die Animation, dann Überschrift + Einleitung, gleiche linke Kante. */
@media (max-width: 575.98px) {
	.sk-mit-bild .sk-etikett { order: 0; margin-bottom: 0 !important; padding-bottom: 18px; }
	.sk-bild { position: static; order: 1; width: 132px; transform: none; margin: 0 0 auto calc(132px * var(--sk-links, 62) / -400); } /* äußerste Linie genau auf der Textkante (--sk-links = linker Rand der Zeichnung im SVG) */
	.sk-mit-bild .sk-titel { order: 2; margin-top: 18px !important; }
	.sk-mit-bild .sk-einleitung { order: 3; max-width: none; }
	.sk-vier .marke text { display: none; }
}
/* unter 375 px (sehr kleine Handys) reicht die gleiche Kopf-Höhe nicht für Bild + dreizeilige Überschrift → Bild weglassen */
@media (max-width: 374.98px) { .sk-bild { display: none; } .sk-mit-bild .sk-etikett { margin-bottom: auto !important; } }
/* Kategorie-Seiten: lange Titel + Einleitung → unter 992 px passt das Bild nicht in die gleiche Kopf-Höhe → erst ab Desktop */
@media (max-width: 991.98px) { .sk-bild.sk-nur-gross { display: none; } .sk-mit-bild:has(.sk-nur-gross) .sk-etikett { margin-bottom: auto !important; }
	.sk-mit-bild:has(.sk-nur-gross) .sk-titel, .sk-mit-bild:has(.sk-nur-gross) .sk-einleitung { max-width: none; } }
/* About neu (18.10., Thomas: Fingerabdruck „hat überhaupt nichts mit the person behind the work zu tun“): Person steigt hinter dem Rahmen (= die Arbeit) auf.
   Blog neu (Thomas: Klangwelle „hat nicht wirklich was mit einem geschriebenen blog zu tun“): Notizbuch, eine Feder schreibt die dritte Zeile immer wieder. */
html.bew .da .sk-person .aufsteigen { animation: sk-aufsteigen 1.6s cubic-bezier(.44, 0, .28, .99) 1.3s backwards, sk-schweben 5s ease-in-out 3.2s infinite; }
@keyframes sk-aufsteigen { from { transform: translateY(96px); } }
@keyframes sk-schweben { 50% { transform: translateY(-4px); } }
.sk-zeichen .nur-still { display: none; }
html:not(.bew) .sk-zeichen .nur-still { display: inline; }
/* Erster Aufruf (Thomas 18.10.: „im blog lädt er die seite ein zweites mal … nur beim ersten mal“, „laufen die animationen in mobile viel schneller?“):
   Der Kopf wurde kurz fertig gezeigt, bevor js/seiten-bewegung.js (Seitenende) ihn verdeckte und neu aufzog; die Animationen liefen schon vor dem
   Sichtbarwerden. Jetzt: Kopf von Anfang an verdeckt (CSS im <head>), alle Bild-Animationen starten erst mit dem Aufziehen (.da).
   Notfall ohne Skript: nach 4 s sichtbar (wie seiten-bewegung.css). */
html.bew .seitenkopf:not(.da) { clip-path: inset(0 100% 0 0 round 6px); }
html.bew:not(.bew-an) .seitenkopf { animation: bw-notfall 0s 4s forwards; }
/* Zwei Linien übereinander (Thomas 18.10.: „wir haben nun 2 striche. einmal vom menü, einmal vom hero“): auf Seiten mit Seitenkopf ist die Linie unter der
   Kopfzeile ganz oben unsichtbar – der Rahmen ist die Kante; beim Scrollen (.scrolled) erscheint sie wie gewohnt. Offenes Handy-Menü unverändert. */
html:not(.menu-offen) .kopf .leiste { border-bottom-color: transparent; } /* Thomas 18.10.: „der unterstrich vom menü taucht immer noch auf … oft unschön“ → auf Unterseiten auch beim Scrollen weg; die Kopfzeile trennt sich dann durch ihren hellen Grund */
/* Inhalt unter dem Seitenkopf erst nach dem Auftakt (Thomas 18.10.: „schade, wenn der block unterhalb schon da ist, während oben noch läuft. das lenkt ab“
   → einheitlich für alle Unterseiten): alle Blöcke nach dem Kopf (inkl. Fußzeile) erscheinen 1,5 s nach dem Aufziehen ruhig mit leichtem Aufsteigen.
   html.sk-fertig setzt das Inline-Skript hinter dem Kopf; ohne Skript Notfall nach 4 s. „Bewegung reduzieren“ (kein html.bew): sofort sichtbar. */
html.bew .sk-bloc ~ .bloc { transition: opacity .9s cubic-bezier(.44, 0, .28, .99), transform .9s cubic-bezier(.44, 0, .28, .99); }
html.bew:not(.sk-fertig) .sk-bloc ~ .bloc { opacity: 0; transform: translateY(18px); animation: bw-notfall 0s 4s forwards; }
/* Work-Einleitung auf derselben Kante wie Etikett/Überschrift im Seitenkopf (Thomas 18.10.: „ist diese positionierung so gewollt? … unstimmig zum rest“) */
#bloc-work-intro .sk-text { padding-left: 33px; max-width: calc(760px + 33px); } /* 33 + 12 Spalte − 1 Rahmen = Kante der Seitenkopf-Schrift */
#bloc-work-intro { padding-bottom: 24px; }
@media (max-width: 991.98px) { #bloc-work-intro .sk-text { padding-left: 21px; } }
@media (max-width: 575.98px) { #bloc-work-intro .sk-text { padding-left: 9px; } }
/* Work-Einleitung als Vorspann (Thomas 18.10.: „der obere text wirkt völlig verloren, wie er da nur links so steht“): Fraunces, groß,
   kleines grünes Etikett darüber; erstes Projekt rückt direkt darunter (css/projekte.css) */
#bloc-work-intro .wi-etikett { padding-left: 33px; margin: 0 0 18px !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 12.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--swatch-var-2425) !important; }
#bloc-work-intro .sk-text { font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(24px, 1rem + 1.25vw, 36px) !important;
	line-height: 1.32 !important; color: var(--swatch-var-5657) !important; max-width: none; text-wrap: pretty; }
@media (max-width: 991.98px) { #bloc-work-intro .wi-etikett { padding-left: 21px; } }
@media (max-width: 575.98px) { #bloc-work-intro .wi-etikett { padding-left: 9px; } }
/* Thomas 18.10.: „können wir nicht die normale schrift ‚höher‘ machen, sodass sie nicht falsch wirkt?“ → Einleitung wieder Inter Tight, aber groß */
#bloc-work-intro .sk-text { font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300 !important;
	font-size: clamp(20px, .85rem + .8vw, 26px) !important; line-height: 1.55 !important; color: var(--swatch-var-5803) !important; max-width: 36em; }
/* Thomas 18.10.: „die schrift ist nicht schön in gross“ → Einleitung in normaler Fließtext-Größe, aber im Raster der Projekte darunter (E):
   Etikett links auf der Kante der Überschriften, Text rechts in der Spalte der Projekt-Beschreibungen; Handy untereinander */
#bloc-work-intro .wi-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: start; padding-left: 45px; padding-right: 45px; }
#bloc-work-intro .wi-etikett { padding-left: 0; margin: 6px 0 0 !important; }
#bloc-work-intro .sk-text { padding-left: 0; max-width: none; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-size: 18px !important; line-height: 1.65 !important; }
@media (max-width: 991.98px) {
	#bloc-work-intro .wi-raster { grid-template-columns: minmax(0, 1fr); padding-left: 33px; padding-right: 33px; row-gap: 16px; }
	#bloc-work-intro .wi-etikett, #bloc-work-intro .sk-text { padding-left: 0; }
	#bloc-work-intro .sk-text { font-size: 17px !important; }
}
@media (max-width: 575.98px) { #bloc-work-intro .wi-raster { padding-left: 21px; padding-right: 21px; } }
/* Platz links unter „Selected work“ (Thomas 18.10.: „gibt es eine möglichkeit den platz links … zu füllen?“): Projekt-Verzeichnis,
   Antippen scrollt sanft zum Projekt (js/projekte.js); Einträge erscheinen nacheinander */
.wi-index { list-style: none; margin: 22px 0 0; padding: 0; max-width: 360px; }
.wi-index li { border-top: 1px solid rgba(28, 25, 23, .12); }
.wi-index li:last-child { border-bottom: 1px solid rgba(28, 25, 23, .12); }
.wi-index a { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 11px 0; text-decoration: none !important;
	color: var(--swatch-var-5803) !important; font-size: 15px; line-height: 1.4; }
.wi-index a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--swatch-var-2425); transform: scaleX(0); transform-origin: left center;
	transition: transform .6s cubic-bezier(.44, 0, .28, .99); }
@media (hover: hover) { .wi-index a:hover::after { transform: none; } .wi-index a:hover .wi-name { color: var(--swatch-var-2425) !important; } }
.wi-nr { font-family: "FrauncesFein", Georgia, serif; font-weight: 300; font-size: 14px; color: var(--swatch-var-2425) !important; }
.wi-name { transition: color .3s ease; }
html.bew:not(.sk-fertig) .wi-index li { opacity: 0; transform: translateY(8px); }
html.bew .wi-index li { transition: opacity .7s ease, transform .7s cubic-bezier(.44, 0, .28, .99); }
html.bew .wi-index li:nth-child(2) { transition-delay: .07s; } html.bew .wi-index li:nth-child(3) { transition-delay: .14s; } html.bew .wi-index li:nth-child(4) { transition-delay: .21s; }
html.bew .wi-index li:nth-child(5) { transition-delay: .28s; } html.bew .wi-index li:nth-child(6) { transition-delay: .35s; }
@media (max-width: 991.98px) { .wi-index { max-width: none; margin-bottom: 8px; } }
/* Thomas 18.10.: „der bereich braucht unten gleich viel platz wie oben“ + „den rechten block unten bündig“ – Text rechts schließt mit dem Verzeichnis ab;
   Abstand unten (Verzeichnis → Linie Projekt 1) = oben (Seitenkopf-Rahmen → Etikett), per --wi-luft (js-frei, gemessen) */
#bloc-work-intro .wi-raster { align-items: end; }
#bloc-work-intro .sk-text { margin-bottom: -6px !important; }
#bloc-work-intro { padding-bottom: var(--wi-luft, 88px); }
#bloc-work-intro { --wi-luft: 100px; } /* gemessen: oben 94 px → unten gleich */
@media (max-width: 991.98px) { #bloc-work-intro { --wi-luft: 84px; } }
@media (max-width: 575.98px) { #bloc-work-intro { --wi-luft: 68px; } }