/* ==========================================================
   FARBMARKEN (Licht und Dunkel)
   ----------------------------------------------------------
   Dieselben Marken wie in lw-theme/style.css - diese Seite laedt die
   Theme-Datei nicht mit, deshalb stehen sie hier noch einmal. Werden sie
   dort geaendert, hier mitziehen (und in /index.html).
   Dunkel steht unter :root und ist der Ausgangszustand; ohne Javascript
   bleibt die Seite genau wie bisher.

   --f-*  sind die vier Projektfarben. Sie werden am Element als --p,
   --jump und --rail-c weitergegeben (siehe unten im Markup). Im hellen
   Design sind es dunklere Stufen derselben Toene, weil die leuchtenden
   Fassungen auf Weiss nicht lesbar waeren.
   ========================================================== */
:root {
    color-scheme: dark;
    color-scheme: only dark;   /* "only": kein Nachfaerben, siehe Hell-Block */

    --bg-ground: #101416;
    --bg-body: #101416;
    --bg-panel: #1a1f22;
    --bg-sunk: #14181b;

    --text-primary: #e0e6ed;
    --text-secondary: #94a3b8;
    --text-faint: #6b7c8f;

    --accent: #2ba6df;
    --on-accent: #0b1114;
    --accent-wash: rgba(43, 166, 223, .1);
    --accent-line: rgba(43, 166, 223, .35);

    --border: #2d3748;
    --border-soft: #232c37;
    --hairline: rgba(255, 255, 255, .05);
    --tint: rgba(255, 255, 255, .022);
    --pill-bg: rgba(20, 24, 27, .6);
    --code-ink: #a5d8f3;

    --header-bg: rgba(26, 31, 34, .9);
    --overlay: rgba(8, 11, 13, .92);

    --hero-a: #2ba6df;
    --hero-b: #7c3aed;
    --hero-a-op: .5;
    --hero-b-op: .35;
    --hero-text: linear-gradient(100deg, #2ba6df 0%, #7dd3fc 45%, #a78bfa 100%);

    --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, .5);
    --shadow-menu: 0 22px 34px -16px rgba(0, 0, 0, .8);
    --shadow-soft: 0 10px 20px -5px rgba(0, 0, 0, .4);
    --shadow-frame: 0 18px 40px -18px rgba(0, 0, 0, .85);
    --shadow-frame-hover: 0 26px 55px -20px rgba(0, 0, 0, .95);

    /* Knopf und Marke werden beim Zeigen aufgehellt; im hellen Design
       sind die Flaechen dunkel, dort muss es andersherum gehen. */
    --hover-brightness: 1.12;

    --f-cyan: #06b6d4;
    --f-blue: #3b82f6;
    --f-green: #10b981;
    --f-amber: #f59e0b;

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
    /* "only" verbietet dem Browser, selbst nachzufaerben. Chrome auf
       Android verdunkelt sonst bei eingeschaltetem Dunkelmodus auch das
       helle Design noch einmal - die Seite bleibt dann trotz gewaehlter
       Sonne dunkel. Nur "dark" oder das Wort "only" schalten das ab,
       blosses "light" genuegt nicht. Die Zeile ohne "only" bleibt als
       Rueckfall fuer Browser, die "only" nicht kennen. Samsung Internet
       achtet auf nichts davon - dazu das Kopfskript. */
    color-scheme: light;
    color-scheme: only light;

    --bg-ground: #e8eef4;
    --bg-body: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-sunk: #f6f9fc;

    --text-primary: #15212c;
    --text-secondary: #4d6070;
    --text-faint: #68798a;

    --accent: #0b6f9f;
    --on-accent: #ffffff;
    --accent-wash: rgba(11, 111, 159, .08);
    --accent-line: rgba(11, 111, 159, .30);

    --border: #d2dce6;
    --border-soft: #e4ebf2;
    --hairline: rgba(15, 33, 48, .08);
    --tint: rgba(15, 33, 48, .035);
    --pill-bg: rgba(255, 255, 255, .7);
    --code-ink: #0a5c85;

    --header-bg: rgba(255, 255, 255, .9);
    --overlay: rgba(232, 238, 244, .96);

    --hero-a: #2ba6df;
    --hero-b: #7c3aed;
    --hero-a-op: .3;
    --hero-b-op: .18;
    --hero-text: linear-gradient(100deg, #0b6f9f 0%, #1583b7 45%, #5b3fc0 100%);

    --shadow-card: 0 18px 40px -20px rgba(23, 42, 61, .28);
    --shadow-menu: 0 20px 32px -18px rgba(23, 42, 61, .35);
    --shadow-soft: 0 8px 18px -6px rgba(23, 42, 61, .22);
    --shadow-frame: 0 14px 34px -18px rgba(23, 42, 61, .3);
    --shadow-frame-hover: 0 22px 46px -20px rgba(23, 42, 61, .38);

    --hover-brightness: .9;

    --f-cyan: #0e7490;
    --f-blue: #1d4ed8;
    --f-green: #047857;
    --f-amber: #a1620a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /* bg-ground statt bg-body: im dunklen Design sind beide gleich, im
       hellen ist der Grund hinter der Karte eine Stufe dunkler als die
       weisse Karte - sonst verschwindet ihr Rand. */
    background-color: var(--bg-ground);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    display: flex;
    justify-content: center;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
}

.site-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    background-color: var(--bg-panel);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------- Kopfzeile */
header {
    padding: 12px 30px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--header-bg);
    backdrop-filter: blur(5px);
    position: sticky;
    top: 0;
    z-index: 40;
}
.site-branding {
    display: flex; align-items: center; gap: 12px;
    color: var(--accent); text-decoration: none;
    font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.site-branding img { display: block; width: 66px; height: 45px; flex: none; }
/* Zwei Bilddateien fuer die Marke, weil der dunkle Grund in lw-logo.png
   eingebacken ist und im hellen Design als dunkles Rechteck stehenbliebe.
   /lw-logo-hell.png ist dieselbe Zeichnung freigestellt und in der hellen
   Akzentfarbe #0b6f9f - derselben, in der der Schriftzug daneben steht. Wird
   --accent im Hell-Block geaendert, ist die Datei neu zu erzeugen; sie folgt
   der Marke nicht. Ohne Javascript steht kein data-theme am <html>, dann
   bleibt die dunkle Fassung sichtbar - wie bisher. */
.site-branding .lw-logo-hell { display: none; }
:root[data-theme="light"] .site-branding .lw-logo-dunkel { display: none; }
:root[data-theme="light"] .site-branding .lw-logo-hell { display: block; }
.site-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.5px; }
nav ul { list-style: none; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
nav a {
    color: var(--text-secondary); text-decoration: none;
    font-size: .9rem; font-weight: 500; transition: color .2s ease;
    white-space: nowrap;
}
nav a:hover { color: var(--text-primary); }
nav a.active { color: var(--text-primary); font-weight: 600; }
/* --- SPRACHWAHL (Aufklappliste neben dem Hell/Dunkel-Schalter, seit
   24.09.2026 statt der drei Fahnen in der Navigation). Sieben Kopien:
   lw-theme/style.css und die sechs statischen Seiten. Verhalten in
   /blog/wp-content/themes/lw-theme/js/lw-sprachwahl.js --- */
.lw-sprachwahl { position: relative; flex: none; }
.lw-sprachwahl-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 8px 0 9px;
    font: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
    color: var(--text-primary); background: var(--bg-body);
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.lw-sprachwahl-knopf:hover,
.lw-sprachwahl.offen .lw-sprachwahl-knopf { border-color: var(--accent); }
.lw-sprachwahl-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lw-sprachwahl img { display: block; width: 20px; height: 14px; border-radius: 2px; object-fit: cover; flex: none; }
.lw-sprachwahl-pfeil { display: block; width: 12px; height: 12px; color: var(--text-secondary); transition: transform 0.15s ease; }
.lw-sprachwahl.offen .lw-sprachwahl-pfeil { transform: rotate(180deg); }
.lw-sprachwahl-liste {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 170px; margin: 0; padding: 6px; list-style: none;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-menu);
}
.lw-sprachwahl.offen .lw-sprachwahl-liste { display: block; }
.lw-sprachwahl-liste li { margin: 0; padding: 0; }
.lw-sprachwahl-liste a {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    font-size: 0.95rem; color: var(--text-primary); text-decoration: none; border-radius: 7px;
}
.lw-sprachwahl-liste a:hover,
.lw-sprachwahl-liste a:focus-visible { color: var(--accent); background: var(--bg-raised); outline: none; }
.lw-sprachwahl-liste a[aria-current] { color: var(--accent); background: var(--accent-wash); font-weight: 600; }
/* Die offene Liste ragt unter die Kopfzeile; dort liegende Bloecke mit
   eigenem Stapel (Banner, Kategoriekasten) duerfen sie nicht verdecken. */
.site-container > header:has(.lw-sprachwahl.offen) { z-index: 80; }
@media (max-width: 400px) {
    .lw-sprachwahl-knopf { gap: 5px; padding: 0 6px 0 7px; }
    .lw-sprachwahl-knopf span { display: none; }
}
nav a.nav-cta {
    background: var(--accent); color: var(--on-accent); padding: 6px 14px;
    border-radius: 6px; font-weight: 600;
}
nav a.nav-cta:hover { filter: brightness(var(--hover-brightness)); color: var(--on-accent); }

/* --- FEATURED-TOOL-BANNER (eigene Zeile unter der Kopfzeile, seit die
   Sprachfahnen die Nav-Zeile zu eng gemacht haben) --- */
.featured-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
}
/* Zwei Karten wie die Seitenpaneele (26.09.2026): Symbol, kleine Zeile fuer
   die Art, darunter der Titel. Gekuerzt wird der Titel hier per CSS auf die
   verfuegbare Breite, nicht mehr serverseitig nach 50 Zeichen. */
.featured-banner a {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 420px;
    padding: 9px 14px 9px 9px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.featured-banner a:hover {
    color: var(--text-primary);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}
.featured-banner a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.featured-banner .fb-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-wash);
    color: var(--accent);
}
.featured-banner .fb-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.featured-banner .fb-art {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.featured-banner .fb-titel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.featured-banner .fb-pfeil {
    flex: none;
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
}
.featured-banner a:hover .fb-pfeil {
    color: var(--accent);
    transform: translateX(2px);
}
@media (max-width: 650px) {
    .featured-banner { gap: 8px; padding: 10px 14px; }
    .featured-banner a { flex-basis: 100%; max-width: none; padding: 7px 12px 7px 7px; }
    .featured-banner .fb-symbol { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .featured-banner a, .featured-banner .fb-pfeil { transition: none; }
    .featured-banner a:hover, .featured-banner a:hover .fb-pfeil { transform: none; }
}

/* -------------------------------------------------------------- Hero */
.hero {
    position: relative;
    padding: 74px 40px 62px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
/* Zwei weiche Lichtquellen statt eines Farbverlaufs - das bleibt auch auf
   dunklen Bildschirmen ruhig und erzeugt trotzdem Tiefe. */
.hero::before,
.hero::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: var(--hero-a-op); pointer-events: none;
}
.hero::before { width: 460px; height: 460px; top: -220px; left: -120px;
    background: radial-gradient(circle, var(--hero-a) 0%, transparent 70%); }
.hero::after  { width: 420px; height: 420px; bottom: -260px; right: -100px;
    background: radial-gradient(circle, var(--hero-b) 0%, transparent 70%); opacity: var(--hero-b-op); }

.hero-inner { position: relative; z-index: 1; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 22px;
}
.eyebrow::before {
    content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .7;
}
.hero h1 {
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    line-height: 1.08; letter-spacing: -.03em; font-weight: 800; margin-bottom: 20px;
}
.hero h1 .glow {
    background: var(--hero-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.08rem; color: var(--text-secondary); max-width: 640px; }

/* Die Statusmarken der vier Projekte, entdoppelt: ein Ueberblick, bevor der
   Fliesstext beginnt. Es ist dieselbe .chip-Regel wie unten in den
   Projektabschnitten. --p steht hier zunaechst auf der Seitenfarbe; jede
   Marke, die zu genau einem Projekt gehoert, setzt sie am Element auf dessen
   Farbe um - so ist am Ton schon zu sehen, wohin der Sprung geht. */
.hero-chips { --p: var(--accent); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
/* Jede Marke fuehrt zu dem Projekt, das sie beschreibt, und traegt dessen
   Farbe - dieselbe Zuordnung wie in der Sprungleiste darunter. "Live" gilt
   fuer drei der vier Werkzeuge, bleibt deshalb in der Seitenfarbe und
   springt auf das erste davon. Das Ziel liegt richtig unter der klebenden
   Kopfzeile, dafuer sorgt .project { scroll-margin-top }. */
.hero-chips a.chip {
    position: relative; text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-chips a.chip:hover {
    background: color-mix(in srgb, var(--p) 26%, transparent);
    border-color: color-mix(in srgb, var(--p) 62%, transparent);
    transform: translateY(-2px);
}
.hero-chips a.chip:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
/* Tastbereich in die Luecke zwischen den Zeilen hinein vergroessern, ohne
   die sichtbare Marke zu aendern - dieselbe Loesung wie bei den
   Schalterknoepfen der Kopfzeile, und nur so weit, wie der Zeilenabstand
   hergibt, sonst ueberlappen sich die Trefferflaechen zweier Zeilen. */
.hero-chips a.chip::before {
    content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0;
}
/* Am Telefon bleiben vom Fliesstext rund 270px uebrig; sechs Marken in
   voller Groesse braeuchten dort vier Zeilen und schoeben den Vorspann weit
   nach unten. Kleiner gesetzt passen drei in die erste Zeile; die Hoehe
   holt der Tastbereich zurueck, ohne die Zeilen breiter zu machen. */
@media (max-width: 560px) {
    .hero-chips { gap: 6px; margin-bottom: 18px; }
    .hero-chips .chip { font-size: .62rem; letter-spacing: .06em; padding: 5px 8px; }
    .hero-chips a.chip::before { top: -3px; bottom: -3px; }
}

.hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-jump a {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--pill-bg);
    color: var(--text-secondary); text-decoration: none;
    font-size: .85rem; font-weight: 600; transition: all .2s ease;
}
.hero-jump a:hover { border-color: var(--jump); color: var(--text-primary); transform: translateY(-2px); }
.hero-jump a b { color: var(--jump); font-weight: 700; }

/* ------------------------------------------------------------ Aufbau */
.layout { display: grid; grid-template-columns: 186px 1fr; gap: 0; }

.rail { border-right: 1px solid var(--border); padding: 34px 0 40px; }
.rail-inner { position: sticky; top: 78px; padding: 0 20px; }
.rail h2 {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700; margin-bottom: 14px;
}
.rail ol { list-style: none; counter-reset: rail; }
.rail li { counter-increment: rail; }
.rail a {
    display: block; padding: 8px 0 8px 26px; position: relative;
    color: var(--text-faint); text-decoration: none;
    font-size: .86rem; font-weight: 600; line-height: 1.3;
    border-left: 2px solid transparent; margin-left: -20px; padding-left: 44px;
    transition: color .2s ease, border-color .2s ease;
}
.rail a::before {
    content: counter(rail, decimal-leading-zero);
    position: absolute; left: 20px; top: 9px;
    font-family: var(--font-mono); font-size: .7rem; opacity: .55;
}
.rail a:hover { color: var(--text-secondary); }
.rail a.current { color: var(--text-primary); border-left-color: var(--rail-c, var(--accent)); }
.rail a.current::before { opacity: 1; color: var(--rail-c, var(--accent)); }

.projects { counter-reset: proj; }

/* ---------------------------------------------------------- Projekte */
.project {
    counter-increment: proj;
    position: relative;
    padding: 56px 40px 60px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 70px;
}
.project:last-of-type { border-bottom: 0; }
/* Grosse Geisterziffer als ruhiger Anker in der Ecke */
.project::before {
    content: counter(proj, decimal-leading-zero);
    position: absolute; top: 22px; right: 30px;
    font-size: 5.6rem; font-weight: 800; line-height: 1;
    color: var(--p); opacity: .09; letter-spacing: -.05em; pointer-events: none;
}

.p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.wordmark {
    font-size: 1.55rem; font-weight: 800; letter-spacing: -.025em;
    color: var(--text-primary);
}
.wordmark span { color: var(--p); }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    color: var(--p); background: color-mix(in srgb, var(--p) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--p) 34%, transparent);
}
.chip.plain { color: var(--text-faint); background: transparent; border-color: var(--border); }

.p-claim {
    font-size: 1.32rem; font-weight: 700; letter-spacing: -.015em;
    margin-bottom: 14px; max-width: 640px; line-height: 1.32;
}
.p-lead { color: var(--text-secondary); max-width: 660px; margin-bottom: 30px; }

h3.block-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--text-faint); margin: 34px 0 16px;
    display: flex; align-items: center; gap: 10px;
}
h3.block-title::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

/* Aufzaehlung mit eigenem Zeichen statt Standardpunkt */
ul.feats { list-style: none; display: grid; gap: 14px; }
@media (min-width: 760px) { ul.feats { grid-template-columns: 1fr 1fr; gap: 14px 28px; } }
ul.feats li { position: relative; padding-left: 30px; font-size: .95rem; }
ul.feats li::before {
    content: ""; position: absolute; left: 0; top: .42em;
    width: 14px; height: 14px; border-radius: 4px;
    border: 1.5px solid color-mix(in srgb, var(--p) 55%, transparent);
    background: color-mix(in srgb, var(--p) 16%, transparent);
}
ul.feats li::after {
    content: ""; position: absolute; left: 4.4px; top: .62em;
    width: 4px; height: 7px; border: solid var(--p);
    border-width: 0 1.7px 1.7px 0; transform: rotate(42deg);
}
ul.feats li b { color: var(--text-primary); font-weight: 650; }
ul.feats li { color: var(--text-secondary); }

/* Technische Angaben als Definitionsraster */
dl.specs { display: grid; gap: 0; border-top: 1px solid var(--border-soft); }
dl.specs > div {
    display: grid; grid-template-columns: 200px 1fr; gap: 18px;
    padding: 13px 0; border-bottom: 1px solid var(--border-soft);
}
dl.specs dt {
    font-size: .82rem; font-weight: 700; color: var(--text-primary);
    letter-spacing: -.005em;
}
dl.specs dd { font-size: .9rem; color: var(--text-secondary); }
dl.specs code {
    font-family: var(--font-mono); font-size: .82em;
    background: var(--bg-sunk); border: 1px solid var(--border-soft);
    padding: 1px 5px; border-radius: 4px; color: var(--code-ink);
}
@media (max-width: 640px) { dl.specs > div { grid-template-columns: 1fr; gap: 4px; } }

.stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.stack span {
    font-family: var(--font-mono); font-size: .74rem;
    padding: 4px 9px; border-radius: 5px;
    background: var(--bg-sunk); border: 1px solid var(--border-soft);
    color: var(--text-faint);
}

/* ------------------------------------------------------ Bildrahmen */
.shots { display: grid; gap: 20px; margin-top: 30px; }
@media (min-width: 860px) { .shots { grid-template-columns: 1.32fr 1fr; align-items: start; } }

figure.frame { margin: 0; }
.chrome {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--bg-sunk);
    box-shadow: var(--shadow-frame);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
figure.frame:hover .chrome {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--p) 45%, var(--border));
    box-shadow: var(--shadow-frame-hover);
}
.chrome-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 11px; border-bottom: 1px solid var(--border-soft);
    background: var(--tint);
}
.dots { display: flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
.dots i:first-child { background: color-mix(in srgb, var(--p) 70%, var(--border)); }
.url {
    font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint);
    background: var(--bg-body); border: 1px solid var(--border-soft);
    padding: 2px 9px; border-radius: 999px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chrome img { display: block; width: 100%; height: auto; }
figure.frame figcaption {
    margin-top: 10px; font-size: .8rem; color: var(--text-faint); line-height: 1.45;
}

/* ------------------------------------------------------------- CTA */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: 8px; text-decoration: none;
    font-size: .9rem; font-weight: 650; transition: all .2s ease;
}
.btn-solid { background: var(--p); color: var(--on-accent); }
.btn-solid:hover { filter: brightness(var(--hover-brightness)); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--border); color: var(--text-secondary); }
.btn-ghost:hover { border-color: var(--p); color: var(--text-primary); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* -------------------------------------------------------- Fusszeile */
.outro { padding: 44px 40px; background: var(--bg-sunk); border-top: 1px solid var(--border); }
.outro h2 { font-size: 1.28rem; font-weight: 750; letter-spacing: -.02em; margin-bottom: 10px; }
.outro p { color: var(--text-secondary); max-width: 620px; margin-bottom: 18px; }
.outro a { color: var(--accent); }
/* Footer - an das Blog-Theme angeglichen (lw-theme/footer.php), damit
   Aufbau, Beschriftung und Verhalten auf beiden Seiten identisch sind. */
.site-footer {
    /* bg-sunk statt bg-body: der Footer liegt innerhalb der abgerundeten
       Karte (.site-container, bg-panel) - bg-body waere dunkler als die
       Kartenflaeche selbst und saehe wie ein Fremdkoerper aus. bg-sunk
       entspricht der Farbe, die .outro direkt darueber schon verwendet. */
    width: 100%; padding: 40px 0 30px; margin-top: 0;
    border-top: 1px solid var(--border); background: var(--bg-sunk);
}
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.footer-top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 25px; padding-bottom: 30px;
    border-bottom: 1px solid var(--hairline);
}
.footer-brand { max-width: 520px; }
.footer-logo-text {
    font-size: 1.25rem; font-weight: 800; color: var(--text-primary);
    letter-spacing: .5px; display: block; margin-bottom: 8px;
}
.footer-logo-text span { color: var(--accent); }
.footer-tagline { color: var(--text-secondary); font-size: .88rem; line-height: 1.55; margin: 0; }
.footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.footer-link {
    color: var(--text-secondary); text-decoration: none;
    font-size: .92rem; font-weight: 600; transition: color .2s ease;
}
.footer-link:hover { color: var(--accent); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 15px; padding-top: 22px;
    font-size: .82rem; color: var(--text-secondary);
}
.footer-copyright strong { color: var(--text-primary); font-weight: 600; }
.specs-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 20px;
    font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary);
    transition: border-color .25s ease, transform .25s ease;
}
.specs-badge:hover { border-color: #ff6b6b; transform: translateY(-1px); }
.heart-icon { transition: transform .25s ease; vertical-align: -2px; margin-right: 6px;
    filter: drop-shadow(0 0 5px rgba(255, 107, 107, .4)); }
.specs-badge:hover .heart-icon { transform: scale(1.15); }

.footer-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--hairline); font-size: 0.82rem; color: var(--text-secondary); }
.footer-projects-label { opacity: 0.65; }
.footer-projects a { color: var(--text-secondary); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
.footer-projects a:hover { color: var(--accent); }
@media (max-width: 640px) {
    .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
    .footer-nav { width: 100%; gap: 16px; }
    .footer-inner { padding: 0 24px; }
}

/* ------------------------------------------------ Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .chrome, .btn, .hero-jump a, .hero-chips a.chip { transition: none; }
}

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .rail { display: none; }
    .hero { padding: 52px 24px 44px; }
    .project { padding: 44px 24px 48px; }
    .project::before { font-size: 3.6rem; top: 16px; right: 18px; }
    .outro { padding-left: 24px; padding-right: 24px; }
    header { padding: 12px 20px; }
}

/* ------------------------------------------------------- Burger-Menue */
/* Der Knopf ist am Schreibtisch unsichtbar und uebernimmt ab 900px, wo die
   Navigation neben der Marke keinen Platz mehr hat. Die drei Balken sind
   ein Element plus zwei Pseudoelemente, im offenen Zustand ein Kreuz. */
.nav-toggle {
    display: none; flex: none; width: 44px; height: 44px;
    align-items: center; justify-content: center;
    padding: 0; background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    background: currentColor; border-radius: 2px;
    transition: background .2s ease, transform .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Alle Regeln haengen an .site-container > header, damit sie nur die
   Seitenkopfzeile treffen und kein anderes header-Element. */
@media (max-width: 1120px) {
    .site-container > header { padding: 10px 16px; gap: 12px; }
    .site-branding img { width: 48px; height: 32px; }
    .site-title { font-size: 1rem; }
    .nav-toggle { display: inline-flex; }
    /* Die Kopfzeile ist sticky und damit selbst der Bezugsrahmen fuer das
       aufgeklappte Feld - es legt sich ueber den Text, statt ihn zu schieben. */
    .site-container > header > nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        background: var(--bg-panel);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-menu);
    }
    .site-container > header.nav-open > nav { display: block; }
    .site-container > header nav ul { flex-wrap: wrap; gap: 0; align-items: stretch; padding: 4px 0 10px; }
    .site-container > header nav ul > li { flex: 1 0 100%; }
    .site-container > header nav ul > li > a { display: block; padding: 12px 16px; font-size: .95rem; }
    .site-container > header nav ul > li + li > a { border-top: 1px solid var(--border-soft); }
    .site-container > header nav a.nav-cta {
        display: block; margin: 10px 16px 2px; padding: 10px 16px;
        font-size: .95rem; text-align: center; border-top: 0;
    }
    .site-container > header nav ul > li.lw-suche-li { padding: 10px 16px 2px; border-top: 1px solid var(--border-soft); }
    .site-container > header nav ul > li.lw-suche-li .lw-suche-knopf { width: 100%; justify-content: center; padding: 9px 14px; }
}

/* ============================================================== Suche */
/* Dasselbe Fenster wie im Blog: /blog/.../js/lw-suche.js sucht im Browser
   ueber den Index aus dem Blog. Die Regeln stammen aus der style.css des
   Themes - diese Seite laedt die Theme-Datei nicht mit. */
.lw-suche-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; font-size: .85rem; font-family: inherit;
    color: var(--text-secondary); background: none;
    border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.lw-suche-knopf:hover,
.lw-suche-knopf:focus-visible { color: var(--accent); border-color: var(--accent); }
body.lw-suche-offen { overflow: hidden; }
.lw-suche {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; justify-content: center; padding: 10vh 18px 18px;
    background: var(--overlay);
}
.lw-suche[hidden] { display: none; }
.lw-suche__kasten {
    width: 100%; max-width: 640px; max-height: 76vh;
    display: flex; flex-direction: column; padding: 18px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
    /* Im hellen Design ist die Schicht dahinter selbst hell - ohne Schatten
       stuende ein weisser Kasten auf weissem Grund. */
    box-shadow: var(--shadow-card);
}
.lw-suche__feld {
    width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
    color: var(--text-primary); background: var(--bg-body);
    border: 1px solid var(--border); border-radius: 8px;
}
.lw-suche__feld:focus { outline: none; border-color: var(--accent); }
.lw-suche__hinweis { margin: 10px 2px 6px; font-size: .76rem; color: var(--text-secondary); opacity: .75; }
.lw-suche__liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.lw-suche__treffer {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 10px 12px; border-radius: 7px; text-decoration: none; color: var(--text-primary);
}
.lw-suche__treffer:hover,
.lw-suche__treffer:focus-visible { background: var(--accent-wash); color: var(--text-primary); }
.lw-suche__titel { font-size: .92rem; line-height: 1.4; }
.lw-suche__titel mark { color: var(--accent); background: none; font-weight: 700; }
.lw-suche__art {
    flex: 0 0 auto; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary); opacity: .7; white-space: nowrap;
}
.lw-suche__art--werkzeug { color: var(--accent); opacity: 1; }
@media (max-width: 700px) {
    .lw-suche { padding: 6vh 10px 10px; }
}

/* ============================================== Umschalter hell/dunkel */
/* Drei Felder: hell, Systemvorgabe, dunkel. Welches hervorgehoben ist,
   haengt an data-theme-wahl am <html>-Element und nicht am Knopf - so ist
   es bereits gefaerbt, bevor das Schalter-Skript am Seitenende laeuft.
   Gleiche Regeln in lw-theme/style.css und /index.html. */
.lw-thema {
    display: inline-flex; align-items: center; gap: 2px;
    flex: none; margin-left: auto; padding: 2px;
    background: var(--bg-body); border: 1px solid var(--border); border-radius: 8px;
}
.lw-thema-knopf {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 24px; padding: 0;
    color: var(--text-secondary); background: none; border: 0; border-radius: 6px;
    cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
/* Tastbereich vergroessern ohne die sichtbare Groesse zu aendern - 22-24px
   Hoehe liegt unter der empfohlenen Mindestgroesse (~44px) fuer den Finger.
   Nur vertikal, sonst ueberlappen sich die drei Knoepfe (2px Abstand). */
.lw-thema-knopf::before {
    content: "";
    position: absolute;
    top: -11px; bottom: -11px;
    left: -1px; right: -1px;
}
.lw-thema-knopf svg { display: block; width: 15px; height: 15px; }
.lw-thema-knopf:hover { color: var(--accent); }
.lw-thema-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-theme-wahl="light"]  .lw-thema-knopf[data-thema="light"],
:root[data-theme-wahl="system"] .lw-thema-knopf[data-thema="system"],
:root[data-theme-wahl="dark"]   .lw-thema-knopf[data-thema="dark"] {
    color: var(--on-accent); background: var(--accent);
}
/* Ohne Javascript gibt es keine Marke am <html>-Element und damit kein
   hervorgehobenes Feld - dann ist der Schalter wirkungslos. */
:root:not([data-theme-wahl]) .lw-thema { display: none; }
/* Samsung Internet im Dunkelmodus: dort faerbt der Browser selbst nach
   (siehe Kopfskript), der Schalter kann nichts ausrichten und steht
   deshalb auch nicht da. */
:root[data-theme-zwang] .lw-thema { display: none; }
/* Der Schalter braucht rund 82px in der Kopfzeile. Auf schmalen Geraeten
   reicht der Platz nicht fuer Bildmarke, Schriftzug, Schalter und
   Burger-Knopf zugleich - dort weicht der Schriftzug, die Bildmarke bleibt
   als Weg zur Startseite. Ohne diese Regel wird der Burger-Knopf vom
   overflow:hidden des .site-container abgeschnitten. */
@media (max-width: 470px) {
    .site-title { display: none; }
    .lw-thema-knopf { width: 24px; height: 22px; }
    .lw-thema-knopf svg { width: 13px; height: 13px; }
}