/* Work: sechs Fälle nach Andriyans Works-Brief v1.1 (24.10.2026). Ersetzt css/projekte.css (Fassung E, ein Projekt pro Bildschirm).
   Thomas 24.10.: „das kürzen der works blöcke ist okay, denn da ist tatsächlich zu viel negative space“ → Fälle so hoch wie ihr Inhalt,
   Abstand dazwischen ≈ ⅓ von vorher (am Handy noch weniger). Linie zwischen den Fällen auf der Textkante (45 px wie Seitenkopf-Schrift + Verzeichnis).
   Links: Etikett, H2, Antwort-Satz, Geschichte, „What I changed“ · rechts: Bild-Platz (leer, unsichtbar), Beleg-Block, Leistungs-Etiketten, Button.
   Bewegung: data-bw (js/seiten-bewegung.js). Blocs erzwingt Textfarben → eigene Farben mit !important. */
.page-container { overflow: clip !important; }
#faelle { padding-top: 24px; padding-bottom: 72px; }
.wf { --wf-gruen: var(--swatch-var-2425); --wf-tinte: var(--swatch-var-5803); --wf-linie: rgba(28, 25, 23, .14); --wf-rand: 45px; }
.wf-fall { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start;
	margin: 0 var(--wf-rand); padding: 72px 0; border-top: 1px solid var(--wf-linie); scroll-margin-top: 104px; color: var(--wf-tinte); }
.wf-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 104px; pointer-events: none; }
.wf-haupt, .wf-seite { min-width: 0; }
@media (min-width: 992px) { .wf-seite { position: sticky; top: 112px; } }

.wf-nr { display: block; font-family: "FrauncesFein", Georgia, serif; font-weight: 300; font-size: 16px; line-height: 1; color: var(--wf-gruen) !important; margin-bottom: 14px; }
.wf .wf-etikett { margin: 0 0 16px !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px; letter-spacing: .09em; line-height: 1.6;
	text-transform: uppercase; color: var(--wf-gruen) !important; }
.wf .wf-titel { margin: 0 0 26px !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(30px, 1.2rem + 1.7vw, 46px) !important;
	line-height: 1.12 !important; color: var(--wf-tinte) !important; text-wrap: balance; }
.wf .wf-antwort { margin: 0 0 24px !important; padding-left: 18px; border-left: 1px solid var(--swatch-var-2425) !important; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 19px !important; line-height: 1.6 !important; color: var(--wf-tinte) !important; }
.wf-haupt p { font-size: 17px; line-height: 1.65; color: rgba(28, 25, 23, .82) !important; margin: 0 0 16px; }
.wf-haupt p strong, .wf-liste strong { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: 400; color: var(--wf-tinte); }
.wf-h3 { margin: 30px 0 12px !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12.5px !important; letter-spacing: .12em;
	text-transform: uppercase; color: var(--wf-gruen) !important; line-height: 1.4 !important; }
.wf-liste { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.wf-liste::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1px; background: var(--wf-gruen); }
.wf-liste li { position: relative; padding: 7px 0; font-size: 17px; line-height: 1.6; color: rgba(28, 25, 23, .82) !important; }
.wf-liste li::before { content: ""; position: absolute; left: -26px; top: calc(7px + .8em - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--wf-gruen); }
.wf-weiter a, .wf-cta-link { color: var(--wf-tinte) !important; text-decoration: none; border-bottom: 1px solid rgba(28, 25, 23, .3); transition: color .3s, border-color .3s; }
@media (pointer: fine) { .wf-weiter a:hover, .wf-cta-link:hover { color: var(--wf-gruen) !important; border-color: var(--wf-gruen); } }

/* rechte Seite: Beleg-Block trägt die Fläche (Brief: „let a project visual or an evidence block carry the large space“) */
.wf-beleg { padding: 30px 32px 22px; border: 1px solid var(--wf-gruen); border-radius: 3px; background: linear-gradient(135deg, #ffffff 0%, var(--swatch-var-6896) 100%); }
.wf .wf-beleg-titel { margin: 0 0 14px !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-gruen) !important; }
.wf-beleg dl { margin: 0; }
.wf-beleg dl > div { padding: 14px 0; border-top: 1px solid rgba(61, 158, 142, .25); }
.wf-beleg dt { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-tinte) !important; margin-bottom: 4px; }
.wf-beleg dd { margin: 0; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.55; color: rgba(28, 25, 23, .82) !important; }
.wf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.wf-tags li { padding: 5px 12px; border: 1px solid var(--wf-linie); border-radius: 999px; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 12px; letter-spacing: .04em; color: rgba(28, 25, 23, .72) !important; }
.wf .wf-cta { margin: 26px 0 0 !important; font-size: 17px; line-height: 1.6; color: var(--wf-tinte) !important; }
.wf-cta .btn { display: table; margin-top: 14px; }

/* Hotel: Karte (Ebene 1) – Ergebnis groß, „Read the case“ führt auf die eigene Seite */
.wf .wf-ergebnis { margin: 0 0 28px !important; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-size: 24px !important; line-height: 1.5 !important; color: var(--wf-tinte) !important; }
.wf-ergebnis strong { font-weight: 400; color: var(--wf-gruen); }
.wf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.wf-cta-link { font-family: "DMMono-Light", monospace; font-size: 15px; }
.wf-karte .wf-beleg { padding-bottom: 30px; }
.wf .wf-karte .wf-ergebnis { margin: 0 !important; font-size: 22px !important; }

.wf-stand { margin: 0 var(--wf-rand) !important; padding-top: 28px; border-top: 1px solid var(--wf-linie); font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(28, 25, 23, .55) !important; }

@media (max-width: 991.98px) {
	.wf { --wf-rand: 33px; }
	.wf-fall { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; scroll-margin-top: 84px; }
	.wf-alias { scroll-margin-top: 84px; }
	.wf .wf-ergebnis, .wf .wf-karte .wf-ergebnis { font-size: 20px !important; }
}
@media (max-width: 575.98px) {
	.wf { --wf-rand: 21px; }
	.wf-fall { padding: 40px 0; }
	.wf-beleg { padding: 24px 22px 16px; }
	.wf-haupt p, .wf-liste li, .wf-beleg dd, .wf-cta { font-size: 16.5px; }
	.wf .wf-antwort { font-size: 17.5px !important; }
}

/* Verzeichnis: der Satz unter der H1 steht jetzt im Seitenkopf → Verzeichnis über die ganze Breite in zwei Spalten */
#bloc-work-intro .wi-raster { grid-template-columns: minmax(0, 1fr); }
#bloc-work-intro .wi-index { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 64px; }
#bloc-work-intro .wi-index li:nth-child(3), #bloc-work-intro .wi-index li:nth-child(6) { border-bottom: 1px solid rgba(28, 25, 23, .12); }
@media (max-width: 767.98px) { #bloc-work-intro .wi-index { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
	#bloc-work-intro .wi-index li:nth-child(3) { border-bottom: 0; } }
#bloc-work-intro { padding-bottom: 24px; }

/* Hotel-Fallseite /work/hotel-lumberjack/ (24.10.2026): Brotkrumen im Seitenkopf, „Also managed“ als <details> (geschlossen, Text im HTML) */
.hl-krumen { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 18px; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(28, 25, 23, .55); }
.hl-krumen a { color: rgba(28, 25, 23, .7) !important; text-decoration: none; border-bottom: 1px solid rgba(28, 25, 23, .25); }
@media (pointer: fine) { .hl-krumen a:hover { color: var(--swatch-var-2425) !important; border-color: var(--swatch-var-2425); } }
.hl-fall { border-top: 0; padding-top: 32px; }
.hl-auch { margin: 26px 0 22px; border-top: 1px solid rgba(28, 25, 23, .14); border-bottom: 1px solid rgba(28, 25, 23, .14); }
.hl-auch summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; }
.hl-auch summary::-webkit-details-marker { display: none; }
.hl-auch summary .wf-h3 { margin: 0 !important; }
.hl-auch summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--swatch-var-2425), var(--swatch-var-2425)) center / 100% 1px no-repeat, linear-gradient(var(--swatch-var-2425), var(--swatch-var-2425)) center / 1px 100% no-repeat; transition: transform .35s cubic-bezier(.44, 0, .28, .99); }
.hl-auch[open] summary::after { transform: rotate(45deg); }
.hl-auch summary:focus-visible { outline: 2px solid var(--swatch-var-2425); outline-offset: 4px; }
.hl-auch .wf-liste { margin-bottom: 18px; }
.hl-zurueck { margin: 22px 0 0 !important; font-family: "DMMono-Light", monospace; font-size: 15px; }
.hl-zurueck a { color: var(--swatch-var-5803) !important; text-decoration: none; border-bottom: 1px solid rgba(28, 25, 23, .3); }
@media (pointer: fine) { .hl-zurueck a:hover { color: var(--swatch-var-2425) !important; border-color: var(--swatch-var-2425); } }

/* ===== preview2 (24.10.2026, Thomas: „work nicht komplett in unseren alten stil zurückwandeln, aber zumindest auf buttons etc rücksicht nehmen“):
   Aufbau bleibt, Bausteine wie auf der übrigen Seite – Leistungen als grüne Linie mit Punkten (wie Services/alte Work), Antwort-Satz als
   Kernaussage (Fraunces grün, Schrift-Ordnung 14.10.), Textlinks DM Mono grün ohne Unterstrich (wie „All articles —>“), Ecken 6 px ===== */
.wf .wf-antwort { padding-left: 0; border-left: 0 !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300 !important; font-size: 22px !important;
	line-height: 1.4 !important; color: var(--swatch-var-2425) !important; }
.wf-tags { display: block; margin: 24px 0 0; padding: 0 0 0 26px; position: relative; }
.wf-tags::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: var(--swatch-var-2425); }
.wf-tags li { position: relative; padding: 6px 0; border: 0; border-radius: 0; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; font-size: 15.5px; letter-spacing: 0; color: var(--swatch-var-5803) !important; }
.wf-tags li::before { content: ""; position: absolute; left: -26px; top: calc(6px + .7em - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--swatch-var-2425); }
.wf-beleg { border-radius: 6px; }
.wf-cta-link, .wf-weiter a, .hl-zurueck a { font-family: "DMMono-Light", monospace; font-size: 14px; color: var(--swatch-var-2425) !important; text-decoration: none !important; border-bottom: 0 !important; }
.wf-cta-link:hover, .wf-weiter a:hover, .hl-zurueck a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.wf-weiter { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.hl-krumen a { border-bottom: 0 !important; color: var(--swatch-var-2425) !important; }
.hl-krumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* „Also managed“: gleiche Pfeil-Geste wie die aufklappbaren Zeilen der Startseite statt Plus-Zeichen */
.hl-auch summary::after { content: "—>"; width: auto; height: auto; background: none; font-family: "DMMono-Light", monospace; font-size: 14px; color: var(--swatch-var-2425); }
.hl-auch[open] summary::after { transform: rotate(90deg); }
@media (max-width: 575.98px) { .wf .wf-antwort { font-size: 19px !important; } }
/* 25.10. Thomas: „das sollte in allen bereichen unten bündig abschliessen. der linke bereich geht überall zu weit nach oben.“ – letzte Zeile links
   endet auf der Unterkante des Buttons rechts (rechte Spalte klebt bis zum Fall-Ende); ist links kürzer (Hotel), rutscht der letzte Baustein nach unten. */
@media (min-width: 992px) {
	.wf-haupt { align-self: stretch; display: flex; flex-direction: column; }
	.wf-haupt > :last-child { margin-top: auto; margin-bottom: 0 !important; }
	.wf-haupt > .wf-liste:last-child li:last-child { padding-bottom: 0; }
	.wf-haupt > .wf-liste:last-child::before { bottom: 9px; }
	.wf-seite > :last-child { margin-bottom: 0 !important; }
}
/* 25.10. Thomas: Hotel-Zeile unter der Überschrift schwarz statt grün */
.sk-einleitung.hl-einleitung { color: var(--swatch-var-5803) !important; }
/* 25.10. Thomas: „für mich ist nicht erkennbar, dass man das aufklappen kann“ → wie die Zeilen bei „Which gap…“: Text groß und dunkel, Pfeil grün, Hover grün */
.hl-auch summary { padding: 20px 0; }
.hl-auch summary .wf-h3 { font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300; font-size: 22px !important; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--wf-tinte) !important; transition: color .3s; }
@media (pointer: fine) { .hl-auch summary:hover .wf-h3 { color: var(--swatch-var-2425) !important; } }
.hl-auch summary::after { font-size: 16px; }
@media (max-width: 575.98px) { .hl-auch summary .wf-h3 { font-size: 19px !important; } }