/* ════════════════════════════════════════════════════════════════
   LEISTUNGEN · WEBENTWICKLUNG — Seiten-eigenes Stylesheet
   Nachgebaut nach leistungen-webdesign-anim.css (nächstverwandte Seite,
   gleicher Aufbau/Maßsystem). Präfix lwe- für alles Seitenspezifische.
   Emrach 27.08.2026: Seite lief ohne eigenes Stylesheet.
   Ben 29.08.2026 (v4): Seite neu gebaut. Massystem, Haekchen-Muster,
   Eyebrow-Strich und Schatten-Regel nach der anydesign-Analyse von
   ascenddesignstudio.net — Struktur und Rhythmus von dort, Farben und
   Schriften bleiben unsere.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1) Hero-Visual: Code-Fenster + Bausteine ───────────────────────
   Kein Foto vorhanden (Disziplin ist neu, kein Kundencase). Statt
   Platzhalter-Kästchen: ein sorgfältig gebautes Inline-SVG nach dem
   Vorbild von ki-automation-aachen (Wirkung über Handwerk, nicht Stock).
   ─────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-hero-cover{
    padding: 1.1rem;
}
.lwe-hero-visual{
    width: 100%;
    height: 100%;
    display: block;
}

.lwe-editor-frame{ fill: #1d1f24; stroke: var(--t1); stroke-width: 0.6; stroke-opacity: 0.35; }
html[data-theme-pref="light"] .lwe-editor-frame{ fill: #282c34; }
.lwe-editor-tabbar{ fill: #21252b; }
.lwe-editor-gutter-bg{ fill: #21252b; }
.lwe-editor-tab-active{ fill: rgba(212, 168, 77, 0.22); }
.lwe-editor-tab{ fill: rgba(255, 255, 255, 0.05); }
.lwe-tab-text{ font-family: var(--font-mono); font-size: 6.2px; fill: #abb2bf; }
.lwe-tab-text-active{ fill: #fff; font-weight: 700; }
.lwe-gutter{ font-family: var(--font-mono); font-size: 6.2px; fill: #5c6370; text-anchor: end; }
.lwe-code{ font-family: var(--font-mono); font-size: 7.4px; }
.lwe-c-tag{ fill: #e06c75; }
.lwe-c-attr{ fill: #d19a66; }
.lwe-c-val{ fill: #98c379; }
.lwe-c-text{ fill: #abb2bf; }
.lwe-c-key{ fill: #c678dd; }
.lwe-c-comment{ fill: #5c6370; font-style: italic; }
.lwe-statusbar{ fill: rgba(212, 168, 77, 0.85); }
.lwe-statusbar-text{ font-family: var(--font-mono); font-size: 5.6px; fill: #1d1d1d; font-weight: 700; }

.lwe-cursor{ fill: #D4A84D; animation: lwe-blink 1s steps(2) infinite; }
@keyframes lwe-blink{ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.lwe-block{ fill: var(--surface, rgba(255, 255, 255, 0.045)); stroke: var(--t1); stroke-width: 0.8; stroke-opacity: 0.4; }
.lwe-block-tag{ font-family: var(--font-mono); font-size: 6.4px; fill: var(--link, #D4A84D); letter-spacing: 0.02em; font-weight: 700; }
.lwe-block-label{ font-family: var(--font-sans); font-size: 6.6px; fill: var(--t2); }
.lwe-connector{ stroke: var(--link, #D4A84D); stroke-width: 1; stroke-dasharray: 2.5 3; opacity: 0.55; fill: none; }
.lwe-badge-ring{ stroke: #2D9F5C; fill: none; stroke-width: 1.4; }
.lwe-badge-check{ stroke: #2D9F5C; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lwe-badge-text{ font-family: var(--font-mono); font-size: 8px; fill: var(--t1); font-weight: 700; }

@media (prefers-reduced-motion: reduce){
    .lwe-cursor{ animation: none; opacity: 1; }
}
html[data-bh-bewegung="aus"] .lwe-cursor{ animation: none; opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   2) MASSSYSTEM — Zeilenlaenge zuerst
   Die Seite war eine Textwueste, weil Absaetze ueber die volle Spalte
   liefen. Vorbild (ascenddesignstudio.net) haelt jeden Copy-Block bei
   42-56 Zeichen, FAQ-Antworten bis 70. Das allein bricht den Blocksatz-
   Eindruck — vor jeder Farb- oder Schriftentscheidung.
   ═══════════════════════════════════════════════════════════════════════ */
.leistungen-webentwicklung{
    --lwe-measure: 52ch;   /* Fliesstext */
    --lwe-measure-faq: 68ch;
    --lwe-rhythm: clamp(4.5rem, 8vw, 7.5rem);
}
.leistungen-webentwicklung .ld-section-head,
.leistungen-webentwicklung .ld-section-lead,
.leistungen-webentwicklung .lwe-prose{
    max-width: var(--lwe-measure);
}
.leistungen-webentwicklung .ld-section-head--center .ld-section-lead{
    margin-left: auto;
    margin-right: auto;
}

/* Ein Rhythmus fuer alle Baender (Vorbild: eine Zahl ueberall). */
.leistungen-webentwicklung .ld-vs,
.leistungen-webentwicklung .ld-pakete,
.leistungen-webentwicklung .ld-lighthouse,
.leistungen-webentwicklung .lwe-haken,
.leistungen-webentwicklung .ld-prozess-vertical,
.leistungen-webentwicklung .ld-faq{
    padding-top: var(--lwe-rhythm);
    padding-bottom: var(--lwe-rhythm);
}

/* Tiefe ueber Flaechenton, nicht ueber Schatten: base -> surface. */
.leistungen-webentwicklung .ld-pakete,
.leistungen-webentwicklung .ld-faq{
    background: var(--surface);
}


/* ─── 3) Eyebrow mit Strich ──────────────────────────────────────────
   Das wiederkehrende Mikro-Motiv des Vorbilds (24px-Linie vor dem
   Label). Uebersetzt: dort Sans-Versalien, hier IBM Plex Mono — unser
   eigenes Vokabular fuer kleine technische Marken. Der Strich ist
   Grafik, kein Text: Magenta ist hier erlaubt, im Fliesstext nie.
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .section-label{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--t3);
}
.leistungen-webentwicklung .section-label::before{
    content: "";
    flex: none;
    width: 24px;
    height: 1px;
    background: var(--accent);
}
.leistungen-webentwicklung .ld-section-head--center .section-label{
    justify-content: center;
}


/* ─── 4) Haekchen-Liste: Behauptung + Beweiszeile ────────────────────
   Das Kernmuster des Vorbilds: 18px-Kreis mit Alpha-Fuellung, darin
   ein Haken, daneben eine kurze fette Behauptung und EINE kleine graue
   Beweiszeile. Die Beweiszeile macht aus der Behauptung ein Argument.
   Farbe: gruen, nicht Magenta — Haekchen sind bei uns gruen, und
   #3FB950 haelt auf Dunkel 7,5:1 statt 4,25:1 beim Akzent.
   Bewusst NUR in der Preis-Sektion, wie im Vorbild.
   ──────────────────────────────────────────────────────────────────── */
.lwe-check-list{
    list-style: none;
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    padding: 0;
    max-width: 54ch;
}
.lwe-check-list li{
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.85rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--tdeco);
}
.lwe-check-list li:first-child{ border-top: 1px solid var(--tdeco); }

.lwe-check-ic{
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    border-radius: 50%;
    background: var(--ok-soft, rgba(63,185,80,0.12));
    border: 1px solid color-mix(in srgb, var(--ok) 42%, transparent);
    color: var(--ok);
    display: grid;
    place-items: center;
}
.lwe-check-ic svg{ width: 10px; height: 10px; display: block; }

.lwe-check-list b{
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--t1);
}
.lwe-check-list b + span{
    display: block;
    margin-top: 0.2rem;
    max-width: 46ch;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--t3);
}


/* ─── 5) Leichte Liste ───────────────────────────────────────────────
   Das Vorbild reserviert die Haekchen fuer die Preiskarten und gibt
   leichteren Listen ein schwaecheres Muster. Hier: ein 8px-Strich
   statt Kreis-Icon, eine Zeile, keine Beweiszeile.
   ──────────────────────────────────────────────────────────────────── */
.lwe-list{
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}
.lwe-list li{
    position: relative;
    max-width: 46ch;
    padding: 0.6rem 0 0.6rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--t2);
}
.lwe-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 1.2em;
    width: 8px;
    height: 1px;
    background: var(--t3);
}


/* ─── 6) Fakten statt Adjektive ──────────────────────────────────────
   Vorbild ersetzt "schnell und persoenlich" durch zwei nachpruefbare
   Zeilen. Hier zweimal: Hero (Einstieg/Arbeitsweise/Pflege) und
   Beleg (Zahlen zur eigenen Seite). Label in Mono, Wert in Condensed.
   ──────────────────────────────────────────────────────────────────── */
.lwe-facts{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    margin: 1.8rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--tdeco);
}
.lwe-facts > div{ min-width: 0; }
.lwe-facts dt{
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--t3);
}
.lwe-facts dd{
    margin: 0.4rem 0 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--t1);
}
.lwe-facts--stat{
    justify-content: center;
    gap: 2rem 3.4rem;
    max-width: 640px;
    margin: clamp(2rem, 4vw, 2.75rem) auto 0;
    text-align: center;
}
.lwe-facts--stat dd{
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
}
.lwe-facts--stat dt{ order: 2; }
.lwe-facts dt a{ font: inherit; letter-spacing: inherit; }
.lwe-facts--stat > div{ display: flex; flex-direction: column; gap: 0.5rem; }


/* ─── 7) Hero ────────────────────────────────────────────────────────
   Asymmetrischer Split statt zentriertem Block, kein Absatz unter der
   Zeile — die Unterzeile macht den Unterschied zur Schwesterseite auf,
   die Fakten-Leiste nennt den Preis-Einstieg und den Haken sofort.
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-hero-cover{ padding: 1.1rem; }
.lwe-hero-sub{
    max-width: 42ch;
    margin: 1.4rem 0 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--t2);
}


/* ─── 8) Weiche: zwei Spalten ────────────────────────────────────────
   Die wichtigste Liste der Seite — sie verhindert die Fehlbuchung.
   Nur 1px-Rahmen, kein Ruhe-Schatten (Vorbild-Regel).
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-vs-col{
    border: 1px solid var(--tdeco);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    background: transparent;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.leistungen-webentwicklung .ld-vs-col h3{
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--t1);
}
.leistungen-webentwicklung .ld-vs-col--human{
    border-color: color-mix(in srgb, var(--accent) 32%, var(--tdeco));
}
@media (hover: hover){
    .leistungen-webentwicklung .ld-vs-col:hover{
        border-color: color-mix(in srgb, var(--t1) 32%, var(--tdeco));
        box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.6);
    }
}
.leistungen-webentwicklung .ld-vs-divider-text{
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--t3);
}


/* ─── 9) Pakete ──────────────────────────────────────────────────────
   Der Automat schreibt in den Marker-Block; hier nur der Rahmen darum.
   Ruhe-Schatten raus, Schatten ausschliesslich bei Hover.
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-pakete-card{
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
@media (hover: hover){
    .leistungen-webentwicklung .ld-pakete-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.6);
    }
}
.leistungen-webentwicklung .ld-pakete-grid{
    margin-top: clamp(1.5rem, 3vw, 2rem);
}


/* ─── 10) Beleg ──────────────────────────────────────────────────────
   Die Luecke steht in der Ueberschrift, nicht im Kleingedruckten.
   Danach die Zahlen der eigenen Seite als Ersatzbeleg.
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-lighthouse .ld-lh-circles{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.2rem;
    max-width: 520px;
    margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}
.leistungen-webentwicklung .ld-lighthouse .ld-lh-svg-wrap{ max-width: 72px; }
.leistungen-webentwicklung .ld-lighthouse .ld-section-head{
    margin-left: auto;
    margin-right: auto;
}


/* ─── 11) Der Haken ──────────────────────────────────────────────────
   Eigene Sektion, keine Fussnote. Ein Absatz, links am Rahmen
   gehalten — der einzige Ort auf der Seite, an dem Prosa richtig ist.
   .lwe-haken steht nicht in der Container-Sammelregel von site.min.css
   (.ld-vs, .ld-pakete, .ld-faq …) — ohne diese Zeilen klebte der Absatz
   am Fensterrand, waehrend alle anderen Sektionen eingerueckt sind.
   ──────────────────────────────────────────────────────────────────── */
.lwe-haken{
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--tdeco);
}
.lwe-haken-inner{
    max-width: 62ch;
    padding-left: clamp(1.2rem, 3vw, 2rem);
    border-left: 1px solid color-mix(in srgb, var(--accent) 45%, var(--tdeco));
}
.lwe-prose{
    margin: 1.4rem 0 0;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--t2);
}


/* ─── 12) FAQ als natives Accordion ──────────────────────────────────
   details/summary — kein zusaetzliches JavaScript. Icon-Kreis wechselt
   bei geoeffnet auf Magenta (Grafik, kein Text).
   ──────────────────────────────────────────────────────────────────── */
.lwe-faq-list{
    max-width: var(--lwe-measure-faq);
    margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}
.lwe-faq-list details{ border-bottom: 1px solid var(--tdeco); }
.lwe-faq-list details:first-child{ border-top: 1px solid var(--tdeco); }
.lwe-faq-list summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--t1);
    transition: color 0.2s ease;
}
.lwe-faq-list summary::-webkit-details-marker{ display: none; }
@media (hover: hover){
    .lwe-faq-list summary:hover{ color: var(--t2); }
}
.lwe-faq-ic{
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--tdeco);
    border-radius: 50%;
    transition: border-color 0.25s ease;
}
.lwe-faq-ic::before,
.lwe-faq-ic::after{
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 11px;
    height: 1px;
    background: var(--t2);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, background 0.25s ease;
}
.lwe-faq-ic::after{ transform: translate(-50%, -50%) rotate(90deg); }
.lwe-faq-list details[open] .lwe-faq-ic{ border-color: var(--accent); }
.lwe-faq-list details[open] .lwe-faq-ic::after{ transform: translate(-50%, -50%) rotate(0deg); }
.lwe-faq-list details p{
    max-width: var(--lwe-measure-faq);
    margin: 0 0 1.3rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--t2);
}
@media (prefers-reduced-motion: reduce){
    .lwe-faq-ic,
    .lwe-faq-ic::before,
    .lwe-faq-ic::after,
    .leistungen-webentwicklung .ld-pakete-card,
    .leistungen-webentwicklung .ld-vs-col{ transition: none; }
}


/* ─── 13) Links im Fliesstext ────────────────────────────────────────
   Vorbild-Regel: der Akzent taucht im Fliesstext nie auf. Deckt sich
   mit der Messung — --link (#C91B3B) haelt auf #0F0F12 nur 3,37:1,
   --accent 4,25:1, beides unter AA fuer normalen Text. Loesung: Text
   in --t1, der Akzent traegt die Unterlaenge (Grafik).
   Ersetzt die alte Regel, die genau diesen Fehler hatte.
   ──────────────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-section-lead a,
.leistungen-webentwicklung .lwe-prose a,
.leistungen-webentwicklung .lwe-list a,
.leistungen-webentwicklung .ld-vs-col h3 a,
.leistungen-webentwicklung .lwe-facts a,
.leistungen-webentwicklung .lwe-faq-list a{
    color: var(--t1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
    text-underline-offset: 3px;
}
@media (hover: hover){
    .leistungen-webentwicklung .ld-section-lead a:hover,
    .leistungen-webentwicklung .lwe-prose a:hover,
    .leistungen-webentwicklung .lwe-list a:hover,
    .leistungen-webentwicklung .ld-vs-col h3 a:hover,
    .leistungen-webentwicklung .lwe-facts a:hover,
    .leistungen-webentwicklung .lwe-faq-list a:hover{
        text-decoration-color: var(--accent);
    }
}


/* ─── 14) Mobil ──────────────────────────────────────────────────────── */
@media (max-width: 640px){
    .lwe-facts{ gap: 1.2rem 1.8rem; }
    .lwe-facts--stat{ gap: 1.5rem 2rem; }
    .lwe-check-list li{ gap: 0.7rem; }
    .lwe-haken-inner{ padding-left: 1rem; }
}



/* ═══════════════════════════════════════════════════════════════════════
   4) PROZESS-PHASE-VISUALS (Timeline 01–04) — analog vis-briefing/
   vis-build/vis-launch aus leistungen-webdesign-anim.css, eigenes
   lwe-Präfix. Vorlage/Struktur (Wrapper + Figcaption) nach leistungen-ki.css.
   Emrach 27.08.2026: leere Fläche zwischen den Timeline-Schritten, während
   alle Schwesterseiten hier ein Visual zeigen.
   ═══════════════════════════════════════════════════════════════════════ */
.leistungen-webentwicklung .ld-prozess-phase-visual{
    margin: 1.1rem 0 0;
    max-width: 100%;
    padding: 0.5rem;
    background: var(--surface, rgba(255,255,255,0.02));
    border: 1px solid var(--tdeco, rgba(127,127,127,0.15));
    border-radius: 6px;
}
.leistungen-webentwicklung .ld-prozess-phase-visual .lwe-visual{
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: none;
}
.leistungen-webentwicklung .ld-prozess-phase-visual svg{ width: 100%; height: 100%; display: block; }
.leistungen-webentwicklung .ld-prozess-phase-visual figcaption{
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
    text-align: center;
}

/* ─── Phase 01 · Briefing & Scope — Kriterienfrage Browser/Webhook ─── */
.lwe-vis-briefing .lwe-vb-bubble,
.lwe-vis-briefing .lwe-vb-tail{
    opacity: 0;
    animation: lwe-b-pop 9s ease-in-out infinite;
    transform-origin: bottom left;
    transform-box: fill-box;
}
@keyframes lwe-b-pop{
    0%, 4%   { opacity: 0; transform: scale(0.85); }
    10%      { opacity: 1; transform: scale(1); }
    88%      { opacity: 1; }
    100%     { opacity: 0; }
}
.lwe-vis-briefing .lwe-vb-stem{
    stroke-dashoffset: 30;
    animation: lwe-b-draw30 9s ease-in-out infinite;
    animation-delay: 1.2s;
}
@keyframes lwe-b-draw30{ 0%,15%{stroke-dashoffset:30} 26%{stroke-dashoffset:0} 88%{stroke-dashoffset:0} 100%{stroke-dashoffset:30} }
.lwe-vis-briefing .lwe-vb-path{
    stroke-dashoffset: 70;
    animation: lwe-b-draw70 9s ease-in-out infinite;
    animation-delay: 1.8s;
}
@keyframes lwe-b-draw70{ 0%,18%{stroke-dashoffset:70} 32%{stroke-dashoffset:0} 88%{stroke-dashoffset:0} 100%{stroke-dashoffset:70} }
.lwe-vis-briefing .lwe-vb-box{ opacity: 0; animation: lwe-b-fade 9s ease-in-out infinite; }
.lwe-vis-briefing .lwe-vb-box-yes{ animation-delay: 3.2s; }
.lwe-vis-briefing .lwe-vb-box-no{ animation-delay: 3.5s; }
@keyframes lwe-b-fade{ 0%,32%{opacity:0} 42%{opacity:1} 88%{opacity:1} 100%{opacity:0} }
.lwe-vis-briefing .lwe-vb-check{
    opacity: 0;
    transform: scale(0.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-b-check 9s ease-in-out infinite;
    animation-delay: 4.6s;
}
@keyframes lwe-b-check{ 0%,50%{opacity:0;transform:scale(0.4);} 58%{opacity:1;transform:scale(1.2);} 66%,88%{opacity:1;transform:scale(1);} 100%{opacity:0;} }
.lwe-vis-briefing .lwe-vb-label-yes{ opacity: 0; animation: lwe-b-fade 9s ease-in-out infinite; animation-delay: 4.9s; }
.lwe-vis-briefing .lwe-vb-out,
.lwe-vis-briefing .lwe-vb-label-no{ opacity: 0; animation: lwe-b-fade 9s ease-in-out infinite; animation-delay: 5.2s; }

/* ─── Phase 02 · Struktur & Bausteine — Kopf/Formular/Fuß setzen sich zusammen ─── */
.lwe-vis-struktur .lwe-vs-block{
    opacity: 0;
    transform: translateY(-14px);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-s-slide 9s ease-in-out infinite;
}
.lwe-vis-struktur .lwe-vs-block-header{ animation-delay: 0.6s; }
.lwe-vis-struktur .lwe-vs-block-form{ animation-delay: 1.4s; }
.lwe-vis-struktur .lwe-vs-block-footer{ animation-delay: 2.2s; }
@keyframes lwe-s-slide{
    0%, 5%  { opacity: 0; transform: translateY(-14px); }
    16%     { opacity: 1; transform: translateY(0); }
    88%     { opacity: 1; }
    100%    { opacity: 0; }
}
.lwe-vis-struktur .lwe-vs-badge{
    opacity: 0;
    transform: scale(0.85);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-s-badge 9s ease-in-out infinite;
    animation-delay: 3.4s;
}
@keyframes lwe-s-badge{ 0%,38%{opacity:0; transform:scale(0.85);} 46%{opacity:1; transform:scale(1);} 88%{opacity:1;} 100%{opacity:0;} }

/* ─── Phase 03 · Code & Korrekturen — Kommentar auf Vorschau → Diff → eingearbeitet ─── */
.lwe-vis-code .lwe-vc-old{ opacity: 1; animation: lwe-c-oldout 9s ease-in-out infinite; }
.lwe-vis-code .lwe-vc-new{ opacity: 0; animation: lwe-c-newin 9s ease-in-out infinite; }
@keyframes lwe-c-oldout{ 0%,44%{opacity:1;} 54%,100%{opacity:0;} }
@keyframes lwe-c-newin{ 0%,44%{opacity:0;} 54%,96%{opacity:1;} 100%{opacity:0;} }
.lwe-vis-code .lwe-vc-comment{
    opacity: 0;
    transform: translateY(-6px);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-c-comment 9s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes lwe-c-comment{ 0%,10%{opacity:0; transform:translateY(-6px);} 18%{opacity:1; transform:translateY(0);} 46%{opacity:1;} 56%,100%{opacity:0;} }
.lwe-vis-code .lwe-vc-done{
    opacity: 0;
    transform: scale(0.5);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-c-done 9s ease-in-out infinite;
}
@keyframes lwe-c-done{ 0%,52%{opacity:0; transform:scale(0.5);} 60%{opacity:1; transform:scale(1.15);} 68%,90%{opacity:1; transform:scale(1);} 100%{opacity:0;} }
.lwe-vis-code .lwe-vc-button{
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-c-grow 9s ease-in-out infinite;
}
@keyframes lwe-c-grow{ 0%,50%{transform:scale(1);} 62%{transform:scale(1.18);} 72%,90%{transform:scale(1.1);} 100%{transform:scale(1);} }

/* ─── Phase 04 · Übergabe & Betrieb — Repo + Zugänge + Checkliste ─── */
.lwe-vis-uebergabe .lwe-vu-arrow{
    opacity: 0;
    stroke-dashoffset: 40;
    animation: lwe-u-arrow 9s ease-in-out infinite;
}
.lwe-vis-uebergabe .lwe-vu-arrowhead{ opacity: 0; animation: lwe-u-fade 9s ease-in-out infinite; }
@keyframes lwe-u-arrow{ 0%,8%{opacity:0; stroke-dashoffset:40;} 20%{opacity:1; stroke-dashoffset:0;} 90%{opacity:1;} 100%{opacity:0;} }
@keyframes lwe-u-fade{ 0%,16%{opacity:0;} 24%{opacity:1;} 90%{opacity:1;} 100%{opacity:0;} }
.lwe-vis-uebergabe .lwe-vu-key{ opacity: 0; animation: lwe-u-fade 9s ease-in-out infinite; animation-delay: 0.6s; }
.lwe-vis-uebergabe .lwe-vu-tick{
    opacity: 0;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: lwe-u-tick 9s ease-in-out infinite;
}
.lwe-vis-uebergabe .lwe-vu-item-1 .lwe-vu-tick{ animation-delay: 2.4s; }
.lwe-vis-uebergabe .lwe-vu-item-2 .lwe-vu-tick{ animation-delay: 3.3s; }
.lwe-vis-uebergabe .lwe-vu-item-3 .lwe-vu-tick{ animation-delay: 4.2s; }
@keyframes lwe-u-tick{ 0%,26%{opacity:0; stroke-dashoffset:16;} 34%{opacity:1; stroke-dashoffset:0;} 90%{opacity:1; stroke-dashoffset:0;} 100%{opacity:0; stroke-dashoffset:16;} }
.lwe-vis-uebergabe .lwe-vu-badge{
    opacity: 0;
    transform: scale(0.85);
    transform-box: fill-box;
    transform-origin: center;
    animation: lwe-u-badge 9s ease-in-out infinite;
    animation-delay: 5.4s;
}
@keyframes lwe-u-badge{ 0%,60%{opacity:0; transform:scale(0.85);} 68%{opacity:1; transform:scale(1);} 90%{opacity:1;} 100%{opacity:0;} }

/* ─── Reduced-Motion: Endzustand einfrieren (Systemeinstellung) ─── */
@media (prefers-reduced-motion: reduce){
    .lwe-vis-briefing *, .lwe-vis-struktur *, .lwe-vis-code *, .lwe-vis-uebergabe * { animation: none !important; }
    .lwe-vis-briefing .lwe-vb-bubble, .lwe-vis-briefing .lwe-vb-tail,
    .lwe-vis-briefing .lwe-vb-box, .lwe-vis-briefing .lwe-vb-check,
    .lwe-vis-briefing .lwe-vb-label-yes, .lwe-vis-briefing .lwe-vb-out, .lwe-vis-briefing .lwe-vb-label-no,
    .lwe-vis-struktur .lwe-vs-block, .lwe-vis-struktur .lwe-vs-badge,
    .lwe-vis-code .lwe-vc-new, .lwe-vis-code .lwe-vc-done,
    .lwe-vis-uebergabe .lwe-vu-arrow, .lwe-vis-uebergabe .lwe-vu-arrowhead,
    .lwe-vis-uebergabe .lwe-vu-key, .lwe-vis-uebergabe .lwe-vu-tick, .lwe-vis-uebergabe .lwe-vu-badge{
        opacity: 1; transform: none;
    }
    .lwe-vis-briefing .lwe-vb-check{ transform: scale(1); }
    .lwe-vis-struktur .lwe-vs-badge{ transform: scale(1); }
    .lwe-vis-code .lwe-vc-old, .lwe-vis-code .lwe-vc-comment{ opacity: 0; }
    .lwe-vis-code .lwe-vc-done{ transform: scale(1); }
    .lwe-vis-code .lwe-vc-button{ transform: scale(1.1); }
    .lwe-vis-uebergabe .lwe-vu-badge{ transform: scale(1); }
    .lwe-vis-briefing .lwe-vb-stem, .lwe-vis-briefing .lwe-vb-path,
    .lwe-vis-uebergabe .lwe-vu-arrow, .lwe-vis-uebergabe .lwe-vu-tick{ stroke-dashoffset: 0; }
}
/* Dieselben Endzustaende ueber das Bedienhilfen-Attribut (data-bh-bewegung="aus") —
   reagiert die @media-Regel oben nicht auf das Widget, s. Begründung weiter oben
   in dieser Datei bzw. in leistungen-webdesign-anim.css. */
html[data-bh-bewegung="aus"] .lwe-vis-briefing *,
html[data-bh-bewegung="aus"] .lwe-vis-struktur *,
html[data-bh-bewegung="aus"] .lwe-vis-code *,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe * { animation: none !important; }
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-bubble,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-tail,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-box,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-check,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-label-yes,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-out,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-label-no,
html[data-bh-bewegung="aus"] .lwe-vis-struktur .lwe-vs-block,
html[data-bh-bewegung="aus"] .lwe-vis-struktur .lwe-vs-badge,
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-new,
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-done,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-arrow,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-arrowhead,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-key,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-tick,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-badge{
    opacity: 1; transform: none;
}
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-check{ transform: scale(1); }
html[data-bh-bewegung="aus"] .lwe-vis-struktur .lwe-vs-badge{ transform: scale(1); }
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-old,
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-comment{ opacity: 0; }
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-done{ transform: scale(1); }
html[data-bh-bewegung="aus"] .lwe-vis-code .lwe-vc-button{ transform: scale(1.1); }
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-badge{ transform: scale(1); }
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-stem,
html[data-bh-bewegung="aus"] .lwe-vis-briefing .lwe-vb-path,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-arrow,
html[data-bh-bewegung="aus"] .lwe-vis-uebergabe .lwe-vu-tick{ stroke-dashoffset: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   15) DER BAUSATZ — die Seite fuehrt vor, was sie verkauft
   Nova 29.08.2026 (v6). These (mit Emrach abgestimmt): "Die Seite baut
   sich selbst." Umsetzung in drei Entscheidungen, nicht in Effekten:

   a) SATZSPIEGEL MIT QUELLTEXT-RAND. Die sieben Querstriche zwischen den
      Baendern fliegen raus. Stattdessen haelt EINE senkrechte Haarlinie
      die Seite zusammen; links davon steht in Mono, senkrecht gesetzt,
      der Baustein, der rechts gerade entsteht — Quelle neben Ergebnis.
      Kein Zierrat: die Marginalspalte ist die Aussage.
   b) SCHRIFT TRAEGT DAS LAYOUT. Ueberschriften von 2,6rem auf bis 5,4rem,
      IBM Plex Sans Condensed Bold, Zeilenabstand 0,86 — die Seite wird
      ueber Groesse gegliedert, nicht ueber Kaesten.
   c) KEINE KARTEN. Die vier Pakete werden zur Preisliste: eine Zeile je
      Paket, Preis rechts in Versalhoehe. Der Marker-Block bleibt Wort
      fuer Wort, wie er ist — die Zeilenoptik kommt komplett aus dem CSS.

   Bewegung: siehe leistungen-webentwicklung.js. CSS haelt IMMER den
   Endzustand — ohne JS, bei reduzierter Bewegung und im Druck steht
   alles fertig da.
   ═══════════════════════════════════════════════════════════════════════ */

.leistungen-webentwicklung{
    --lwe-gut: 76px;                       /* Marginalspalte */
    --lwe-gut-gap: clamp(1.5rem, 2.6vw, 2.4rem);
}

/* ─── a) Marginalspalte + Haarlinie ─────────────────────────────────── */
.leistungen-webentwicklung .lwe-sec{
    display: grid;
    grid-template-columns: var(--lwe-gut) minmax(0, 1fr);
    column-gap: var(--lwe-gut-gap);
    align-items: start;
    border-top: 0;                          /* die Querstriche sind weg */
}
.leistungen-webentwicklung .lwe-sec > *{ grid-column: 2; }
.leistungen-webentwicklung .lwe-sec > .lwe-gut{
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    position: relative;
    display: block;
    min-height: 100%;
}
.lwe-gut-rule{
    position: absolute;
    right: 0;
    top: calc(var(--lwe-rhythm) * -1);
    bottom: calc(var(--lwe-rhythm) * -1);
    width: 1px;
    background: var(--tdeco);
    transform: scaleY(1);
    transform-origin: 50% 0;
}
.leistungen-webentwicklung .case-cta .lwe-gut-rule{ bottom: 0; }
.lwe-gut-tag{
    position: sticky;
    top: clamp(6rem, 26vh, 15rem);
    display: block;
    width: 1.2em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1;
    color: var(--t3);
    white-space: nowrap;
}
.lwe-gut-tag::before{ content: attr(data-tag); }

/* Die Sektion, in der man gerade steht, meldet sich in Magenta —
   der Akzent markiert die Position, nicht den Text. */
.leistungen-webentwicklung .lwe-sec.is-building .lwe-gut-tag{ color: var(--accent); }

/* ─── b) Schrift traegt das Layout ──────────────────────────────────── */
/* Groessen, Durchschuss und Laufweite stehen gebuendelt in Block 16 —
   hier bleibt nur, was Layout ist. */
.leistungen-webentwicklung .ld-hero{
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 3rem);
}
.leistungen-webentwicklung .ld-hero .lwe-gut-rule{ top: 0; }
.leistungen-webentwicklung .case-title{ font-weight: 700; }
.leistungen-webentwicklung .ld-section-title{
    font-weight: 700;
    text-align: left;
    max-width: 15ch;
    margin: 1.1rem 0 0;
}
.leistungen-webentwicklung .case-cta-title{
    font-weight: 700;
}
/* Maskierte Zeilen: der Satz steigt aus der Grundlinie, wie im Andruck.
   Maskiert wird NUR nach unten — clip-path statt overflow:hidden, sonst
   schneidet die Maske lange Ueberschriften seitlich ab (passiert beim
   ersten Andruck genau so: "Webentwicklun"). Das Polster unten faengt
   die Unterlaengen bei Zeilenabstand 0,86. */
.lwe-lines{ display: block; }
.lwe-l{
    display: block;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
    clip-path: inset(0 -100vw 0 -100vw);
}
.lwe-l > span{ display: block; }

.leistungen-webentwicklung .ld-section-head{
    max-width: none;
    margin-bottom: clamp(2.2rem, 4.5vh, 3.2rem);
}
.leistungen-webentwicklung .ld-section-lead{
    max-width: 46ch;
    margin: 1.4rem 0 0;
    font-size: clamp(1rem, 1.2vw, 1.12rem);
}
.leistungen-webentwicklung .ld-lighthouse .ld-section-head{
    margin-left: 0;
    margin-right: 0;
}
.leistungen-webentwicklung .ld-lighthouse-inner{
    max-width: none;
    margin: 0;
}

/* ─── Weiche: die Seite empfiehlt, statt neutral zu bleiben ─────────── */
.leistungen-webentwicklung .ld-vs-grid{
    grid-template-columns: 1fr 1px 1.3fr;
    border: 0;
    border-top: 1px solid var(--tdeco);
    border-bottom: 1px solid var(--tdeco);
    border-radius: 0;
    background: transparent;
}
.leistungen-webentwicklung .ld-vs-col{
    border: 0;
    border-radius: 0;
    padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.4rem, 3vw, 2.4rem);
}
.leistungen-webentwicklung .ld-vs-col:first-child{ padding-left: 0; }
@media (hover: hover){
    .leistungen-webentwicklung .ld-vs-col:hover{ border: 0; box-shadow: none; }
}
.leistungen-webentwicklung .ld-vs-col h3{
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.leistungen-webentwicklung .ld-vs-col--ai h3,
.leistungen-webentwicklung .ld-vs-col--ai .lwe-list li{ color: var(--t3); }
.leistungen-webentwicklung .ld-vs-col--human h3{
    font-size: clamp(1.3rem, 2.3vw, 1.85rem);
    color: var(--t1);
}
.leistungen-webentwicklung .ld-vs-col--human .lwe-list li{
    font-size: clamp(0.98rem, 1.25vw, 1.12rem);
    color: var(--t1);
}
.leistungen-webentwicklung .ld-vs-col--human .lwe-list li::before{ background: var(--t1); }
.leistungen-webentwicklung .ld-vs-divider{ transform-origin: 50% 0; }

/* ─── c) Vier Pakete als Preisliste, nicht als Karten ───────────────── */
.leistungen-webentwicklung .ld-pakete-grid{
    display: block;
    margin-top: clamp(2rem, 4vw, 2.8rem);
    border-top: 1px solid var(--tdeco);
}
.leistungen-webentwicklung .ld-pakete-card{
    display: grid;
    grid-template-columns: 30px minmax(13ch, 21ch) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 clamp(1rem, 2.2vw, 2rem);
    width: 100%;
    min-height: 0;
    padding: clamp(1.2rem, 2.4vw, 1.75rem) 2.1rem clamp(1.2rem, 2.4vw, 1.75rem) 1.9rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tdeco);
    border-radius: 0;
    box-shadow: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.leistungen-webentwicklung .ld-pakete-icon{
    width: 26px;
    height: 26px;
    margin: 0;
    color: var(--t3);
}
.leistungen-webentwicklung .ld-pakete-name{
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.15;
}
.leistungen-webentwicklung .ld-pakete-desc{
    font-size: 0.86rem;
    color: var(--t3);
    flex: none;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.leistungen-webentwicklung .ld-pakete-price{
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0;
    padding: 0;
    border-top: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Bestseller wird zum Daumenregister am linken Rand der Zeile — dieselbe
   senkrechte Mono-Sprache wie die Vermerke in der Marginalspalte. */
.leistungen-webentwicklung .ld-pakete-tag{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 0.5rem 0.28rem;
}
.leistungen-webentwicklung .ld-pakete-card.is-selected{
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.leistungen-webentwicklung .ld-pakete-card.is-selected::after{
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
}
@media (hover: hover){
    .leistungen-webentwicklung .ld-pakete-card:hover{
        transform: none;
        box-shadow: none;
        background: color-mix(in srgb, var(--t1) 5%, transparent);
        border-bottom-color: var(--t1);
    }
    .leistungen-webentwicklung .ld-pakete-card:hover .ld-pakete-icon{ color: var(--t1); }
}

/* ─── Beleg: die Messwerte als Kontrollstreifen, nicht als Ringe ────── */
.leistungen-webentwicklung .ld-lighthouse{
    background: var(--surface);
}
.leistungen-webentwicklung .ld-lighthouse .ld-lh-circles{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.leistungen-webentwicklung .ld-lh-ring{
    display: block;
    text-align: left;
    padding: 0 clamp(0.7rem, 1.6vw, 1.4rem);
    border-left: 1px solid var(--tdeco);
}
.leistungen-webentwicklung .ld-lh-ring:first-child{ border-left: 0; padding-left: 0; }
.leistungen-webentwicklung .ld-lh-num{
    position: static;
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
}
.lwe-lh-bar{
    display: block;
    height: 2px;
    margin: 0.85rem 0 0.7rem;
    background: var(--tdeco);
}
.lwe-lh-bar > i{
    display: block;
    height: 100%;
    background: var(--ok);
    transform: scaleX(var(--s, 1));
    transform-origin: 0 50%;
}
.leistungen-webentwicklung .ld-lh-label{
    text-align: left;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    color: var(--t3);
}
.leistungen-webentwicklung .lwe-facts--stat{
    justify-content: flex-start;
    text-align: left;
    max-width: none;
    margin: clamp(2.2rem, 4vw, 3rem) 0 0;
    gap: 2rem 4rem;
}
.leistungen-webentwicklung .lwe-facts--stat dd{
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── Der Haken: die eine Stelle, an der die Seite still wird ───────── */
.leistungen-webentwicklung .lwe-haken{
    border-top: 0;
    padding-right: clamp(1.5rem, 4vw, 3rem);
}
.leistungen-webentwicklung .lwe-haken-inner{
    max-width: none;
    padding-left: 0;
    border-left: 0;
}
.leistungen-webentwicklung .lwe-prose{
    max-width: 44ch;
    margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
    padding-left: clamp(1.2rem, 2.6vw, 1.9rem);
    border-left: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    font-size: clamp(1.08rem, 1.7vw, 1.42rem);
    font-weight: 300;
    line-height: 1.5;
    color: var(--t2);
}

/* ─── Einwaende: Zeilen statt Kaesten ───────────────────────────────── */
.leistungen-webentwicklung .lwe-faq-list{
    max-width: 64ch;
    margin-left: 0;
    margin-right: 0;
}
.leistungen-webentwicklung .lwe-faq-list summary{
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* ─── CTA: der Bau ist fertig ───────────────────────────────────────── */
.leistungen-webentwicklung .case-cta{
    border-top: 0;
    max-width: 1280px;
    margin: 0 auto;
}
.leistungen-webentwicklung .case-cta-inner{
    max-width: none;
    margin: 0;
    text-align: left;
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tdeco);
    border-radius: 0;
    padding: clamp(2.5rem, 5vh, 4rem) 0 0;
}

/* ─── Bewegung: Anfangszustaende setzt ausschliesslich das JS ───────── */
/* Die Phasenbilder der Prozess-Sektion bleiben so, wie sie abgenommen
   sind. Ein Versuch, sie erst beim Eintreten in den Blick zu starten,
   ist wieder raus: dann steht in jedem Standbild ein halb aufgebautes
   Bild — genau der Eindruck "nicht fertig", der hier weg soll. */

/* ─── Mobil: die Marginalspalte klappt ueber den Satz ───────────────── */
@media (max-width: 900px){
    .leistungen-webentwicklung .lwe-sec{ display: block; }
    .leistungen-webentwicklung .lwe-gut{
        display: block;
        min-height: 0;
        margin: 0 0 1rem;
    }
    .lwe-gut-rule{ display: none; }
    .lwe-gut-tag{
        position: static;
        width: auto;
        writing-mode: horizontal-tb;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }
    .leistungen-webentwicklung .ld-vs-grid{ grid-template-columns: 1fr; }
    .leistungen-webentwicklung .ld-vs-col{ padding-left: 0; padding-right: 0; }
    .leistungen-webentwicklung .ld-pakete-card{
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.35rem;
        padding-left: 1.7rem;
    }
    .leistungen-webentwicklung .ld-pakete-icon{ display: none; }
    .leistungen-webentwicklung .ld-pakete-desc{ grid-column: 1 / -1; }
    .leistungen-webentwicklung .ld-lighthouse .ld-lh-circles{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 0;
    }
    .leistungen-webentwicklung .ld-lh-ring:nth-child(odd){ border-left: 0; padding-left: 0; }
}




/* ═══════════════════════════════════════════════════════════════════════
   16) DIE STAFFEL — was auf dieser Seite wie laut spricht
   Jost 29.08.2026 (v9). Befund von Emrach: "die headlines haben irgendwie
   alle dieselben groessen". Gemessen stimmte es doppelt: die H1 stand mit
   73,6 px unter JEDER H2 (83,5 px), und alle sechs H2 waren aufs Pixel
   gleich. Sechs gleich laute Baender sind keine Gliederung, sondern eine
   Liste.

   Die Rangfolge ist eine inhaltliche Entscheidung, keine Rechnung:
     1. H1               — die Seite. Konkurrenzlos das Groesste.
     2. Messwerte 95/100 — "gemessen, nicht behauptet" ist hier das
                           Argument; der Beleg steht ueber seiner eigenen
                           Ueberschrift.
     3. Weiche (01)      — die Kernentscheidung, hier faellt der Kauf.
     4. Schluss-CTA      — die Bitte. Dritte volle Stimme.
     5. Fakten 86 / 7    — Beleg zweiter Ordnung, klar unter den Messwerten.
     6. Preise (02)      — Geld. Zweitlauteste Bandueberschrift.
     7. Preiszahl        — traegt das Band, nicht die Ueberschrift darueber.
     8. Beleg (03)       — ein Eingestaendnis ("Kein Kundencase") darf nicht
                           bruellen; darum bewusst KLEINER als die Zahlen,
                           die es einloest.
     9. Ablauf (05)      — Wegweiser, spaet im Scroll.
    10. Einwaende (06)   — der Inhalt sind die Fragen, nicht der Titel.
    11. Haken (04)       — die stille Stelle. Nur 1,8x ueber ihrem eigenen
                           Fliesstext, also Absatztitel statt Plakat. Der
                           Abfall der Stimme IST die Ehrlichkeit.

   KEINE gleichmaessige Skala (kein 1,25er-Schritt). Die Abstaende sind
   absichtlich ungleich — 1,11 / 1,04 / 1,15 / 1,13 / 1,05 / 1,15 / 1,10 /
   1,02 / 1,05 / 1,13 —, weil eine saubere Rechenreihe genau die
   Gleichfoermigkeit zurueckbringt, die hier weg soll.

   OPTISCHE GROESSE VOR RECHNERISCHER: Ziffern haben nur Versalhoehe, keine
   Ober-/Unterlaengen, und laufen tabellarisch. "100" bei 81,6 px hat rund
   125 px Farbe, "Webdesign oder" bei 78,4 px rund 500 px. Deshalb stehen
   die Messwerte rechnerisch UEBER der Weiche und wirken trotzdem leiser
   als sie — genau so ist es gemeint.

   DURCHSCHUSS IST TEIL DER STAFFEL: vorher pauschal 0,86 fuer alles. Jetzt
   laeuft er gegen die Groesse (0,84 bei 5,65 rem bis 0,98 bei 2,60 rem).
   Bei 2,6 rem sieht 0,86 nicht gross, sondern gequetscht aus.
   LAUFWEITE ebenso: -0,045 em oben, -0,018 em unten. Enge Spationierung
   ist ein Grossgrad-Werkzeug; unten macht sie den Satz nur eng.
   ═══════════════════════════════════════════════════════════════════════ */

/* Damit auf 390 px kein Wort allein in eine Zeile faellt. Bei Zeilen, die
   ohnehin passen, ist die Regel wirkungslos. */
.leistungen-webentwicklung .lwe-l > span{ text-wrap: balance; }

/* ── 1 · H1 ─────────────────────────────────────────────────────────── */
.leistungen-webentwicklung .case-title{
    font-size: clamp(2.45rem, 6.3vw, 5.65rem);
    line-height: 0.84;
    letter-spacing: -0.045em;
}
/* Die H1 sitzt in der schmalen Hero-Spalte, die H2 ueber der ganzen
   Satzbreite. Rechnerisch groesser reicht da nicht — die Textspalte
   bekommt 1,78fr statt 1,5fr, damit "Webentwicklung" bei 90 px in EINER
   Zeile steht und die Spalte fuellt (Satzspiegel, nicht Zufallsbreite).
   Das Code-Fenster verliert 10 % und bleibt lesbar. */
@media (min-width: 1025px){
    .leistungen-webentwicklung .ld-hero-grid--editorial{
        grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr);
    }
}
/* Ab hier ist der Hero einspaltig (site.css) — dann darf die H1 die volle
   Breite nutzen und wird auf dem Handy spuerbar groesser als vorher. */
@media (max-width: 1024px){
    .leistungen-webentwicklung .case-title{
        font-size: clamp(2.45rem, 8.6vw, 4.15rem);
    }
}

/* ── 2 · Messwerte ──────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-lh-num{
    font-size: clamp(2.35rem, 6vw, 5.1rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
}

/* ── 3 · Weiche (01) ────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-vs .ld-section-title{
    font-size: clamp(2.3rem, 6.1vw, 4.9rem);
    line-height: 0.86;
    letter-spacing: -0.038em;
}

/* ── 4 · Schluss-CTA ────────────────────────────────────────────────── */
.leistungen-webentwicklung .case-cta-title{
    font-size: clamp(1.95rem, 5.3vw, 4.25rem);
    line-height: 0.88;
    letter-spacing: -0.034em;
}
/* Die zweite Zeile ist der laengste Satz der Seite und die einzige, die
   ueberhaupt umbricht. Sie brach nach "mit" (Praeposition ohne Objekt)
   bzw. nach "der" — beides mitten im Satzglied. Gemessen liegt die Fuge
   am Komma bei 12,6 ch, die naechste Fuge erst bei 15,2 ch. Ein Riegel
   von 14 ch NUR auf dieser Zeile trennt darum in jeder Breite gleich:

       Kein CMS im Kopf?
       Dann red mit dem,
       der es codet.

   Die erste Zeile behaelt ihre 23 ch und bleibt ungeschoren. */
.leistungen-webentwicklung .case-cta-title{ max-width: 23ch; }
.leistungen-webentwicklung .case-cta-title .lwe-l + .lwe-l > span{
    max-width: 14ch;
    text-wrap: pretty;
}

/* ── 5 · Fakten 86 / 7 ──────────────────────────────────────────────── */
.leistungen-webentwicklung .lwe-facts--stat dd{
    font-size: clamp(2.05rem, 4.6vw, 3.75rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
}

/* ── 6 · Preise (02) ────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-pakete .ld-section-title{
    font-size: clamp(2.2rem, 4.9vw, 3.95rem);
    line-height: 0.89;
    letter-spacing: -0.032em;
}

/* ── 7 · Preiszahl ──────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-pakete-price{
    font-size: clamp(1.55rem, 3.6vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.028em;
}

/* ── 8 · Beleg (03) ─────────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-lighthouse .ld-section-title{
    font-size: clamp(2.05rem, 4.3vw, 3.45rem);
    line-height: 0.92;
    letter-spacing: -0.028em;
}

/* ── 9 · Ablauf (05) — zugleich Grundwert fuer alle Bandtitel ───────── */
.leistungen-webentwicklung .ld-section-title{
    font-size: clamp(1.95rem, 3.9vw, 3.15rem);
    line-height: 0.94;
    letter-spacing: -0.025em;
}

/* ── 10 · Einwaende (06) ────────────────────────────────────────────── */
.leistungen-webentwicklung .ld-faq .ld-section-title{
    font-size: clamp(1.9rem, 3.7vw, 2.95rem);
    line-height: 0.96;
    letter-spacing: -0.022em;
}

/* ── 11 · Haken (04) — die stille Sektion ───────────────────────────── */
.leistungen-webentwicklung .lwe-haken .ld-section-title{
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 0.98;
    letter-spacing: -0.018em;
}