/* Martin Langenberg – Übergangsseite. Erzeugt von uebergang/build.mjs. */
/* Schriften lokal (nicht über Google Fonts), Dateien aus @fontsource in public/fonts.
   Familiennamen wie im Design-System, damit tokens.css und die Boards unverändert greifen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-standard-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-standard-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}



/* Martin Langenberg — generated from tokens.json */
:root{
  --Ember: #ef8a3f;
  --AccentText: var(--Ember);
  --Background: #110b08;
  --Surface: #211b17;
  --SurfaceInset: #2a221c;
  --Border: #3a3029;
  --TextStrong: #f4ede7;
  --TextBody: #e2d8cf;
  --TextVoice: #cfc4ba;
  --TextMuted: #a8998d;
  --TextSubtle: #7d6f65;
  --TextOnEmber: #1a130e;
  --AccentTint: rgba(239, 138, 63, 0.14);
  --AccentDash: rgba(239, 138, 63, 0.35);
  --AccentBorder: rgba(239, 138, 63, 0.45);
  --Glow: rgba(239, 138, 63, 0.10);
  --glow-ember: 0 0 14px rgba(239, 138, 63, 0.10);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.25);
}

:root{
  --space-xs: 4px;
  --space-sm: 8px;
  --space-row: 10px;
  --space-stack: 14px;
  --space-gap: 16px;
  --space-card: 26px;
  --space-section: 40px;
  --space-page: 68px;
  --radius-xs: 5px;
  --radius-sm: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}
.display{ font-family: var(--font-sans); font-size: 50.66px; line-height: 55px; font-weight: 700; letter-spacing: -0.02em; }
.title{ font-family: var(--font-sans); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; }
.heading{ font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0; }
.card-title{ font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.lead{ font-family: var(--font-serif); font-size: 17px; line-height: 26px; font-weight: 400; letter-spacing: 0; }
.voice{ font-family: var(--font-serif); font-size: 15px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.quote{ font-family: var(--font-serif); font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: 0; font-style: italic; }
.signature{ font-family: var(--font-serif); font-size: 17px; line-height: 24px; font-weight: 400; letter-spacing: 0; font-style: italic; }
.body{ font-family: var(--font-sans); font-size: 13.33px; line-height: 21px; font-weight: 400; letter-spacing: 0; }
.body-sm{ font-family: var(--font-sans); font-size: 12.26px; line-height: 19px; font-weight: 400; letter-spacing: 0; }
.meta{ font-family: var(--font-sans); font-size: 11.33px; line-height: 17px; font-weight: 400; letter-spacing: 0; }
.caption{ font-family: var(--font-sans); font-size: 10.4px; line-height: 14px; font-weight: 400; letter-spacing: 0; }
.eyebrow{ font-family: var(--font-sans); font-size: 10.66px; line-height: 14px; font-weight: 600; letter-spacing: 0.14em; }
.label{ font-family: var(--font-sans); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.12em; }
.pill{ font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; }
.code{ font-family: var(--font-mono); font-size: 11.46px; line-height: 16px; font-weight: 400; letter-spacing: 0; }



/* Martin Langenberg — Komponenten. Alle Werte kommen aus tokens.css. */
/* Der Glow: radialer Ember-Schein oben links – zentrales Element, auf jeder Seite, in beiden Themes.
   Geometrie aus der Vorlage: Mittelpunkt in der Ecke, horizontaler Radius 57 % der Breite,
   vertikaler Radius 2/3 davon (Seitenverhältnis 3:2, unabhängig vom Format), ausblendend bis 70 %. */
.ml-glow,.ml-page{
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--Background);
}
.ml-glow::before,.ml-page::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 57%;
  aspect-ratio: 3 / 2;
  background: radial-gradient(farthest-side at 0 0, var(--Glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ml-page{
  color: var(--TextBody);
  font-family: var(--font-sans);
  padding: var(--space-page);
}
.ml-page *,.ml-page *::before,.ml-page *::after{ box-sizing: border-box; }

/* Kopf */
.ml-eyebrow{ font: 600 10.66px/14px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--TextMuted); margin: 0 0 12px; }
.ml-display{ font: 700 50.66px/55px var(--font-sans); letter-spacing: -.02em; color: var(--TextStrong); margin: 0; }
.ml-title{ font: 700 32px/38px var(--font-sans); letter-spacing: -.02em; color: var(--TextStrong); margin: 0; }
.ml-accent{ color: var(--AccentText); }
.ml-lead{ font: 400 17px/26px var(--font-serif); color: var(--TextVoice); max-width: 610px; margin: 12px 0 0; }

/* Serife – die Stimme: Ansprache, Zitate, Signatur. Nie für Headlines, UI, Listen oder Daten. */
.ml-voice{ font: 400 15px/24px var(--font-serif); color: var(--TextBody); margin: 10px 0 0; }
.ml-signature{ font: italic 400 17px/24px var(--font-serif); color: var(--TextVoice); margin: 14px 0 0; }
.ml-quote{ position: relative; margin: 0; padding-left: 34px; }
.ml-quote::before{ content: "\201C"; position: absolute; left: 0; top: -6px; font: 400 64px/1 var(--font-serif); color: var(--AccentText); }
.ml-quote p{ font: italic 400 26px/34px var(--font-serif); color: var(--TextStrong); margin: 0; }
.ml-quote cite{ display: block; margin-top: 14px; font: 600 10.66px/14px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--TextMuted); font-style: normal; }

/* Pill */
.ml-pills{ display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ml-pill{ display: inline-flex; align-items: center; height: 27px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--Border); background: var(--SurfaceInset); color: var(--TextStrong); font: 400 12px/16px var(--font-sans); }
.ml-pill--accent{ background: var(--AccentTint); border-color: var(--AccentBorder); color: var(--AccentText); }

/* Card */
.ml-card{ background: var(--Surface); border: 1px solid var(--Border); border-radius: var(--radius-card); padding: var(--space-card); box-shadow: var(--shadow-card); }
.ml-card--highlight{ border-color: var(--AccentBorder); box-shadow: var(--glow-ember), var(--shadow-card); }
.ml-card__title{ display: flex; align-items: center; gap: 10px; font: 600 14px/20px var(--font-sans); color: var(--TextStrong); margin: 0; }
.ml-card__title::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--AccentText); flex: none; }
.ml-card__sub{ font: 400 12.26px/19px var(--font-sans); color: var(--TextSubtle); margin: var(--space-xs) 0 0 16px; }
.ml-card__body{ font: 400 13.33px/21px var(--font-sans); color: var(--TextBody); margin: 10px 0 0; }
.ml-card__body--sm{ font-size: 12.26px; line-height: 19px; }
.ml-card__sign{ font: italic 400 17px/24px var(--font-serif); color: var(--TextVoice); margin: 14px 0 0; }
.ml-card__body--voice{ font: 400 15px/24px var(--font-serif); }
.ml-grid{ display: grid; gap: var(--space-gap); }
.ml-grid--2{ grid-template-columns: repeat(2, 1fr); }
.ml-grid--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px){ .ml-grid--2,.ml-grid--3{ grid-template-columns: 1fr; } }

/* Step */
.ml-step{ display: grid; grid-template-columns: 36px 1fr; gap: 20px; }
.ml-step__num{ width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--Ember); color: var(--TextOnEmber); display: grid; place-items: center; font: 700 14px/1 var(--font-sans); }
.ml-step__title{ font: 700 18px/24px var(--font-sans); color: var(--TextStrong); margin: 6px 0 0; }
.ml-step__body{ font: 400 13.33px/21px var(--font-sans); color: var(--TextBody); margin: 8px 0 0; }
.ml-step__body strong{ color: var(--TextStrong); font-weight: 700; }

/* Callout & Kopierblock */
.ml-callout{ background: var(--AccentTint); border: 1px solid var(--AccentBorder); border-radius: var(--radius-sm); padding: 14px 20px; font: 400 12.26px/19px var(--font-sans); color: var(--TextBody); }
.ml-callout strong{ color: var(--AccentText); font-weight: 700; }
.ml-copy{ background: var(--Background); border: 1px dashed var(--AccentDash); border-radius: var(--radius-sm); padding: 18px 22px; font: 400 12.26px/19px var(--font-sans); color: var(--TextBody); }
.ml-copy__label{ display: block; font: 600 10px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--AccentText); margin-bottom: 8px; }
.ml-code{ font: 400 11.46px/16px var(--font-mono); color: var(--AccentText); background: var(--Background); border: 1px solid var(--Border); border-radius: var(--radius-xs); padding: 1px 6px; }

/* Listen */
.ml-rows{ display: grid; gap: var(--space-row); margin-top: 14px; }
.ml-row{ background: var(--SurfaceInset); border: 1px solid var(--Border); border-radius: var(--radius-sm); padding: 12px 14px; font: 400 12.26px/19px var(--font-sans); color: var(--TextBody); }
.ml-row::before{ content: "→ "; color: var(--AccentText); }
.ml-list{ list-style: none; margin: 12px 0 0; padding: 0; }
.ml-list li{ position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--Border); font: 400 12.26px/19px var(--font-sans); color: var(--TextBody); }
.ml-list li:last-child{ border-bottom: 0; }
.ml-list li::before{ content: ""; position: absolute; left: 2px; top: 17px; width: 4px; height: 4px; border-radius: 50%; background: var(--TextMuted); }

/* Checkliste */
.ml-check{ list-style: none; margin: 12px 0 0; padding: 0; }
.ml-check li{ display: grid; grid-template-columns: 20px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--Border); font: 400 13.33px/21px var(--font-sans); color: var(--TextBody); }
.ml-check li:last-child{ border-bottom: 0; }
.ml-check li::before{ content: ""; width: 20px; height: 20px; border: 1.5px solid var(--AccentText); border-radius: var(--radius-xs); }
.ml-check strong{ color: var(--TextStrong); }

/* Footer */
.ml-footer{ display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--Border); padding-top: 14px; font: 400 10.4px/14px var(--font-sans); color: var(--TextSubtle); }
.ml-footer__brand{ display: flex; align-items: center; gap: 12px; }
.ml-footer__brand img{ width: 20px; height: auto; }

/* Martin Langenberg – gemeinsame Website-Styles für alle Unterseiten (aus der Startseite abgeleitet) */
body{margin:0}
a{color:var(--AccentText);text-decoration:none}
a:hover{color:var(--TextStrong)}
:focus-visible{outline:2px solid var(--Ember);outline-offset:3px}
.serif-news{--font-serif:"Newsreader","Iowan Old Style",Georgia,serif;--serif-weight:300}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:8px 0 0;padding:0;background:transparent;cursor:pointer;--p:50%}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--Ember) 0,var(--Ember) var(--p),var(--Border) var(--p),var(--Border) 100%)}
input[type=range]::-moz-range-track{height:4px;border:0;border-radius:999px;background:var(--Border)}
input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--Ember)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:var(--Ember);box-shadow:0 0 0 4px var(--AccentTint),0 0 10px rgba(239,138,63,.35);transition:box-shadow .25s ease,transform .25s ease}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--Ember);box-shadow:0 0 0 4px var(--AccentTint),0 0 10px rgba(239,138,63,.35);transition:box-shadow .25s ease,transform .25s ease}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px var(--AccentTint),0 0 20px rgba(239,138,63,.55)}
input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 8px var(--AccentTint),0 0 20px rgba(239,138,63,.55)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.15)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--Background),0 0 0 5px var(--Ember),0 0 16px rgba(239,138,63,.5)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--Background),0 0 0 5px var(--Ember),0 0 16px rgba(239,138,63,.5)}
.ml-glow{--AccentDisplay:var(--AccentText)}

.ml-glow{--card-glow:rgba(239,138,63,.085);--card-glow-hl:rgba(239,138,63,.16);--card-edge:rgba(255,226,200,.06);--spot:rgba(239,138,63,.10);--spot-line:rgba(239,138,63,.65)}

.ml-glow .ml-card{position:relative;isolation:isolate;background:radial-gradient(480px 320px at 0 0,var(--card-glow),transparent),var(--Surface);box-shadow:var(--shadow-card)}
.ml-glow .ml-card--highlight{background:radial-gradient(720px 480px at 0 0,var(--card-glow-hl),transparent),var(--Surface);box-shadow:var(--glow-ember),var(--shadow-card)}
.ml-glow .ml-card--line{background:transparent;box-shadow:none;border-style:dashed}
.ml-glow .ml-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 65%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:-1}
.ml-glow .ml-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot-line),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none}
.ml-glow .ml-card:hover::before,.ml-glow .ml-card:hover::after{opacity:1}
.ml-kicker{position:relative;margin:0 0 18px;display:flex;align-items:center;gap:12px;font:400 13px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-kicker__num{color:var(--AccentText);transition:color .4s ease}
.ml-kicker__line{width:40px;height:1px;background:linear-gradient(90deg,var(--AccentBorder),var(--Border));transition:background .4s ease}
.rail-wrap .ml-kicker::before{content:"";position:absolute;left:-33px;top:50%;width:9px;height:9px;margin-top:-4.5px;box-sizing:border-box;border-radius:50%;background:var(--Background);border:1px solid var(--Border);transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.rail-wrap .ml-kicker[data-goal]::before{left:-35px;width:13px;height:13px;margin-top:-6.5px}
.rail-wrap [data-node] .ml-kicker__num,.rail-wrap .ml-kicker[data-node] .ml-kicker__num{color:var(--TextMuted)}
.rail-wrap .ml-kicker[data-node] .ml-kicker__line{background:var(--Border)}
.rail-wrap[data-lit~="01"] [data-node="01"]::before,.rail-wrap[data-lit~="02"] [data-node="02"]::before,.rail-wrap[data-lit~="03"] [data-node="03"]::before,.rail-wrap[data-lit~="04"] [data-node="04"]::before,.rail-wrap[data-lit~="05"] [data-node="05"]::before,.rail-wrap[data-lit~="06"] [data-node="06"]::before,.rail-wrap[data-lit~="07"] [data-node="07"]::before,.rail-wrap[data-lit~="08"] [data-node="08"]::before,.rail-wrap[data-lit~="09"] [data-node="09"]::before{background:var(--Ember);border-color:var(--Ember);box-shadow:0 0 0 4px var(--AccentTint),0 0 12px rgba(239,138,63,.55)}
.rail-wrap[data-lit~="01"] [data-node="01"] .ml-kicker__num,.rail-wrap[data-lit~="02"] [data-node="02"] .ml-kicker__num,.rail-wrap[data-lit~="03"] [data-node="03"] .ml-kicker__num,.rail-wrap[data-lit~="04"] [data-node="04"] .ml-kicker__num,.rail-wrap[data-lit~="05"] [data-node="05"] .ml-kicker__num,.rail-wrap[data-lit~="06"] [data-node="06"] .ml-kicker__num,.rail-wrap[data-lit~="07"] [data-node="07"] .ml-kicker__num,.rail-wrap[data-lit~="08"] [data-node="08"] .ml-kicker__num,.rail-wrap[data-lit~="09"] [data-node="09"] .ml-kicker__num{color:var(--AccentText)}
.rail-wrap[data-lit~="01"] [data-node="01"] .ml-kicker__line,.rail-wrap[data-lit~="02"] [data-node="02"] .ml-kicker__line,.rail-wrap[data-lit~="03"] [data-node="03"] .ml-kicker__line,.rail-wrap[data-lit~="04"] [data-node="04"] .ml-kicker__line,.rail-wrap[data-lit~="05"] [data-node="05"] .ml-kicker__line,.rail-wrap[data-lit~="06"] [data-node="06"] .ml-kicker__line,.rail-wrap[data-lit~="07"] [data-node="07"] .ml-kicker__line,.rail-wrap[data-lit~="08"] [data-node="08"] .ml-kicker__line,.rail-wrap[data-lit~="09"] [data-node="09"] .ml-kicker__line{background:linear-gradient(90deg,var(--AccentBorder),var(--Border))}
@media (max-width:900px){.rail-wrap .ml-kicker::before{display:none}}
/* Leitlinie: verbindet die Abschnitte, der Punkt wandert beim Scrollen mit */
.rail-wrap{position:relative}
.rail{position:absolute;left:var(--rail-x,-200px);top:var(--rail-top,0px);height:var(--rail-h,0px);width:1px;pointer-events:none}
.rail__base{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--Border) 120px)}
.rail__trail{position:absolute;left:0;top:0;width:1px;height:var(--orb-y,0px);background:linear-gradient(180deg,transparent,var(--Ember) 120px)}
.rail__orb{position:absolute;left:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--Ember);box-shadow:0 0 0 4px rgba(239,138,63,.18),0 0 18px rgba(239,138,63,.65);transform:translateY(var(--orb-y,0px));opacity:var(--orb-o,0);transition:opacity .4s ease}
@media (max-width:900px){.rail{display:none}}
.ml-accent{color:var(--AccentDisplay)}
.ml-accent{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:1.1em;letter-spacing:-.01em}
/* Rechner: Eingabe und Ergebnis in einer Box */
.ml-calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.ml-calc__out{position:relative;margin:-1px -1px -1px 0;border:1px solid var(--Border);border-radius:0 16px 16px 0;background:radial-gradient(560px 380px at 0 0,var(--card-glow-hl),transparent),var(--Surface)}
.ml-calc__port{position:absolute;left:-7px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:var(--Ember);box-shadow:0 0 0 4px var(--AccentTint),0 0 14px rgba(239,138,63,.55)}
@media (max-width:900px){.ml-calc{grid-template-columns:1fr}.ml-calc__out{margin:0 -1px -1px -1px;border-radius:0 0 16px 16px}.ml-calc__port{left:50%;top:-7px;margin:0 0 0 -6.5px}}
/* Vorgehen als Zeitleiste */
.ml-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.ml-steps::before,.ml-steps::after{content:"";position:absolute;left:18px;right:calc(25% - 42px);top:18px;height:1px;background:var(--Border)}
.ml-steps::after{background:var(--Ember);transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.ml-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.ml-steps__num{position:relative;z-index:1;width:36px;height:36px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font:700 14px/1 var(--font-sans);background:var(--Background);border:1px solid var(--Border);color:var(--TextMuted);transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease}
.ml-steps li:nth-child(2) .ml-steps__num{transition-delay:.45s}
.ml-steps li:nth-child(3) .ml-steps__num{transition-delay:.9s}
.ml-steps li:nth-child(4) .ml-steps__num{transition-delay:1.3s}
.ml-steps.is-lit::after{transform:scaleX(1)}
.ml-steps.is-lit .ml-steps__num{background:var(--Ember);border-color:var(--Ember);color:var(--TextOnEmber);box-shadow:0 0 14px rgba(239,138,63,.35)}
@media (max-width:900px){.ml-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.ml-steps::before,.ml-steps::after{display:none}}
.ml-meta{font:400 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-tags{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 13px/18px var(--font-mono);color:var(--TextMuted)}
.ml-tags span{display:inline-flex;align-items:center;gap:8px}
.ml-tags span::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--AccentBorder)}
button[aria-pressed]{transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,color .3s ease}
.ml-glow{--chip-bg:rgba(255,226,200,.06)}

.ml-seg{position:relative;isolation:isolate}
.ml-seg__ind{position:absolute;left:0;top:0;width:0;height:0;box-sizing:border-box;border-radius:999px;background:var(--AccentTint);border:1px solid var(--AccentBorder);box-shadow:var(--glow-ember);opacity:0;z-index:-1;pointer-events:none}
.ml-seg__ind[data-ready]{transition:left .55s cubic-bezier(.65,0,.35,1),top .55s cubic-bezier(.65,0,.35,1),width .55s cubic-bezier(.65,0,.35,1),height .55s cubic-bezier(.65,0,.35,1),opacity .3s ease}
button[aria-pressed="false"]:hover{border-color:var(--AccentBorder) !important}
.rec-a .rec-in{animation:ml-rec-a 760ms cubic-bezier(.22,1,.36,1) both}
.rec-b .rec-in{animation:ml-rec-b 760ms cubic-bezier(.22,1,.36,1) both}
@keyframes ml-rec-a{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ml-rec-b{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
/* Belege: Bento aus Fallstudien und der lebenden App Zolun */
.ml-cases{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.ml-cases__main{grid-column:2;grid-row:1 / span 2}
@media (max-width:1100px){.ml-cases{grid-template-columns:repeat(2,minmax(0,1fr))}.ml-cases__main{grid-column:1 / -1;grid-row:auto}}
@media (max-width:700px){.ml-cases{grid-template-columns:1fr}}
.ml-pipe{margin-top:8px}
.ml-pipe__track{position:relative;height:13px;margin:0 6px}
.ml-pipe__track::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--Border)}
.ml-pipe__fill{position:absolute;left:0;top:6px;height:1px;width:0;background:var(--Ember);animation:ml-pipe-fill 6s cubic-bezier(.45,0,.55,1) var(--d,0s) infinite both}
.ml-pipe__orb{position:absolute;top:2px;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--Ember);box-shadow:0 0 0 3px var(--AccentTint),0 0 12px rgba(239,138,63,.6);opacity:0;animation:ml-pipe-orb 6s cubic-bezier(.45,0,.55,1) var(--d,0s) infinite both}
.ml-pipe__node{position:absolute;top:2px;width:9px;height:9px;margin-left:-4.5px;box-sizing:border-box;border-radius:50%;background:var(--Background);border:1px solid var(--Border)}
.ml-pipe__node.n1{animation:ml-pipe-n1 6s linear var(--d,0s) infinite both}
.ml-pipe__node.n2{animation:ml-pipe-n2 6s linear var(--d,0s) infinite both}
.ml-pipe__node.n3{animation:ml-pipe-n3 6s linear var(--d,0s) infinite both}
.ml-pipe__labels{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:10px;font:400 12px/16px var(--font-mono);color:var(--TextMuted);white-space:nowrap}
.ml-pipe__labels .l1{text-align:left;animation:ml-pipe-l1 6s linear var(--d,0s) infinite both}
.ml-pipe__labels .l2{text-align:center;animation:ml-pipe-l2 6s linear var(--d,0s) infinite both}
.ml-pipe__labels .l3{text-align:right;animation:ml-pipe-l3 6s linear var(--d,0s) infinite both}
@keyframes ml-pipe-orb{0%{left:0;opacity:0}6%{left:0;opacity:1}36%{left:50%}50%{left:50%}80%{left:100%}92%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes ml-pipe-fill{0%{width:0;opacity:1}6%{width:0}36%{width:50%}50%{width:50%}80%{width:100%}92%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@keyframes ml-pipe-n1{0%,5%{background:var(--Background);border-color:var(--Border);box-shadow:none}7%,92%{background:var(--Ember);border-color:var(--Ember);box-shadow:0 0 10px rgba(239,138,63,.6)}100%{background:var(--Background);border-color:var(--Border);box-shadow:none}}
@keyframes ml-pipe-n2{0%,35%{background:var(--Background);border-color:var(--Border);box-shadow:none}37%,92%{background:var(--Ember);border-color:var(--Ember);box-shadow:0 0 10px rgba(239,138,63,.6)}100%{background:var(--Background);border-color:var(--Border);box-shadow:none}}
@keyframes ml-pipe-n3{0%,79%{background:var(--Background);border-color:var(--Border);box-shadow:none}81%,92%{background:var(--Ember);border-color:var(--Ember);box-shadow:0 0 0 4px var(--AccentTint),0 0 12px rgba(239,138,63,.7)}100%{background:var(--Background);border-color:var(--Border);box-shadow:none}}
@keyframes ml-pipe-l1{0%,5%{color:var(--TextMuted)}7%,92%{color:var(--TextStrong)}100%{color:var(--TextMuted)}}
@keyframes ml-pipe-l2{0%,35%{color:var(--TextMuted)}37%,92%{color:var(--TextStrong)}100%{color:var(--TextMuted)}}
@keyframes ml-pipe-l3{0%,79%{color:var(--TextMuted)}81%,92%{color:var(--AccentText)}100%{color:var(--TextMuted)}}
.ml-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:6px 0 0}
.ml-result__num{font:700 30px/1 var(--font-sans);letter-spacing:-.02em;color:var(--AccentDisplay)}
.ml-app{margin-top:24px;flex:1;display:flex;flex-direction:column;min-height:320px;border:1px solid var(--Border);border-radius:12px;background:var(--Background);overflow:hidden}
.ml-app__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--Border);font:400 12px/16px var(--font-mono);color:var(--TextMuted)}
.ml-app__dots{display:flex;gap:5px}
.ml-app__dots i{width:7px;height:7px;border-radius:50%;background:var(--Border)}
.ml-app__live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--AccentText)}
.ml-app__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--Ember);animation:ml-live 1.8s ease-in-out infinite}
@keyframes ml-live{0%,100%{box-shadow:0 0 0 0 rgba(239,138,63,.55)}60%{box-shadow:0 0 0 6px rgba(239,138,63,0)}}
.ml-app__body{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr);min-height:0}
.ml-app__nav{display:flex;flex-direction:column;gap:4px;padding:12px;border-right:1px solid var(--Border)}
.ml-app__nav-item{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--TextBody);transition:background-color .5s ease,color .5s ease}
.ml-app__nav-item i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--Border);transition:background-color .5s ease,box-shadow .5s ease}
.ml-app__nav-item.is-active{background:var(--AccentTint);color:var(--TextStrong)}
.ml-app__nav-item.is-active i{background:var(--Ember);box-shadow:0 0 8px rgba(239,138,63,.7)}
.ml-app__feed{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 16px 0}
.ml-app__clip{flex:1 1 0;min-height:222px;overflow:hidden}
.ml-app__row{display:grid;grid-template-columns:86px 8px minmax(0,1fr) auto;align-items:center;gap:10px;height:44px;border-bottom:1px solid var(--Border);font-size:14px;color:var(--TextBody)}
.ml-app__ago{font:400 12px/1 var(--font-mono);color:var(--TextMuted);white-space:nowrap}
.ml-app__dot{width:6px;height:6px;border-radius:50%;background:var(--AccentBorder)}
.ml-app__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-app__cat{font:400 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--TextSubtle)}
.ml-app__row.is-new{color:var(--TextStrong)}
.ml-app__row.is-new .ml-app__dot{background:var(--Ember);box-shadow:0 0 8px rgba(239,138,63,.7)}
.feed-a{animation:ml-feed-a .6s cubic-bezier(.2,.8,.2,1) both}
.feed-b{animation:ml-feed-b .6s cubic-bezier(.2,.8,.2,1) both}
.feed-a .is-new{animation:ml-new-a .7s ease-out both}
.feed-b .is-new{animation:ml-new-b .7s ease-out both}
@keyframes ml-feed-a{from{transform:translateY(-44px)}to{transform:none}}
@keyframes ml-feed-b{from{transform:translateY(-44px)}to{transform:none}}
@keyframes ml-new-a{from{opacity:0;background:var(--AccentTint)}to{opacity:1;background:transparent}}
@keyframes ml-new-b{from{opacity:0;background:var(--AccentTint)}to{opacity:1;background:transparent}}
.ml-app__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 16px;border-top:1px solid var(--Border)}
.ml-done{font:700 24px/1 var(--font-sans);letter-spacing:-.01em;color:var(--AccentDisplay)}
.done-a{animation:ml-done-a .5s ease-out}
.done-b{animation:ml-done-b .5s ease-out}
@keyframes ml-done-a{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ml-done-b{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:700px){.ml-app__body{grid-template-columns:1fr}.ml-app__nav{display:none}.ml-app__cat{display:none}}
.nav-burger{display:none}
@media (max-width:1240px){.nav-links{gap:24px !important}}
@media (max-width:1100px){.nav-links{display:none !important}.nav-burger{display:inline-flex}}
@media (max-width:520px){.nav-cta{display:none !important}}
@media (prefers-reduced-motion:reduce){.rec-a .rec-in,.rec-b .rec-in{animation:none}.ml-seg__ind[data-ready]{transition:none}.ml-steps::after,.ml-steps__num,.ml-kicker::before,.ml-kicker__num{transition:none !important}.ml-pipe__fill,.ml-pipe__orb,.ml-pipe__node,.ml-pipe__labels span,.ml-app__live::before,.feed-a,.feed-b,.feed-a .is-new,.feed-b .is-new,.done-a,.done-b{animation:none !important}.ml-pipe__fill{width:100%}.ml-pipe__node{background:var(--Ember);border-color:var(--Ember)}}
/* Unterseiten */
:root .site-sub{--Surface:#241a13;--SurfaceInset:#2e2118;--Border:#413026}

.site-sub main,.site-sub footer{font-weight:300}
.site-sub main strong{font-weight:600}
.ml-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px;font:400 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-crumbs a{color:var(--TextMuted)}.ml-crumbs a:hover{color:var(--TextStrong)}
.ml-crumbs span[aria-current]{color:var(--AccentText)}
.nav-links a[aria-current="page"]{color:var(--TextStrong) !important}
.ml-statement{font:italic 300 clamp(34px,4.4vw,60px)/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--TextStrong);max-width:1020px;margin:0}
.ml-prose{max-width:680px;font:300 18px/1.75 var(--font-sans);color:var(--TextBody)}
.ml-prose h2{font:700 30px/1.2 var(--font-sans);letter-spacing:-.015em;color:var(--TextStrong);margin:56px 0 16px}
.ml-prose h3{font:600 21px/1.3 var(--font-sans);color:var(--TextStrong);margin:36px 0 10px}
.ml-prose p{margin:0 0 20px}
.ml-prose ul,.ml-prose ol{margin:0 0 22px;padding-left:22px}
.ml-prose li{margin:0 0 8px}
.ml-prose blockquote{margin:36px 0;padding:0 0 0 24px;border-left:0;font:italic 300 26px/1.4 var(--font-serif);color:var(--TextStrong)}
.ml-prose code{font:400 .88em/1 var(--font-mono);color:var(--AccentText);background:var(--SurfaceInset);border:1px solid var(--Border);border-radius:5px;padding:2px 6px}
/* Footer: Inter für Name und Navigation, Newsreader für den Claim, Mono für Labels und Rechtliches */
.ml-foot__top{border-top:1px solid var(--Border);padding-top:40px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.ml-foot__name{display:inline-flex;align-items:center;gap:12px;font:600 16px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--TextStrong)}
.ml-foot__claim{margin:12px 0 0;font:italic var(--serif-weight,300) 24px/1.25 var(--font-serif);color:var(--TextVoice)}
.ml-foot__label{margin:0 0 8px;font:400 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-foot__mail{font:500 clamp(18px,1.7vw,22px)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--TextStrong);transition:color .25s ease}
.ml-foot__mail span{color:var(--AccentText);display:inline-block;transition:transform .25s ease}
.ml-foot__mail:hover{color:var(--AccentText)}.ml-foot__mail:hover span{transform:translateX(4px)}
.ml-foot__bottom{margin-top:32px;padding-top:20px;border-top:1px dashed var(--Border);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.ml-foot__nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ml-foot__nav a{font:400 14px/1.5 var(--font-sans);color:var(--TextBody);transition:color .25s ease}
.ml-foot__nav a:hover{color:var(--TextStrong)}
.ml-foot__legal{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:400 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-foot__legal a{color:var(--TextMuted);transition:color .25s ease}.ml-foot__legal a:hover{color:var(--TextStrong)}
/* Kundenlogos: Inline-SVG in currentColor = warmes Grau (TextMuted), beim Überfahren TextStrong.
   Immer volle Breite: ab 760px Containerbreite 8 in einer Reihe, darunter 2 Reihen à 4 (Umbruch über .ml-logos__br).
   --w/--h je Logo = Grundgröße in px; --s skaliert mit der Containerbreite (cqi), nie größer als die Grundgröße. */
.ml-logos{padding-top:28px;border-top:1px dashed var(--Border);container-type:inline-size}
.ml-logos__row{--s:min(1px,.0952cqi);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.ml-logos__row svg{display:block;flex:none;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));color:var(--TextMuted);transition:color .3s ease}
.ml-logos__row svg:hover{color:var(--TextStrong)}
.ml-logos__br{display:none}
@container (max-width:759px){.ml-logos__row{--s:min(1px,.194cqi)}.ml-logos__br{display:block;flex-basis:100%;height:0}}

/* Hinweise von Claude: auffällig rot, vor dem Launch löschen */
:root{--HintRed:#ff5c5c;--HintBg:rgba(255,92,92,.09)}

.ml-hint{display:block;width:fit-content;max-width:100%;box-sizing:border-box;margin:12px 0 0;padding:7px 12px;border:1px dashed var(--HintRed);border-radius:8px;background:var(--HintBg);color:var(--HintRed)!important;font:500 13px/1.45 var(--font-mono);font-style:normal;letter-spacing:0;text-transform:none;text-align:left}
.ml-todo{color:var(--HintRed)!important}
/* „ab“ vor Preisen: klein, Newsreader kursiv, vertikal mittig */
.ml-ab,.px-care__price .ml-ab{display:inline-block;margin:0 .3em 0 0;font-family:var(--font-serif);font-style:italic;font-weight:var(--serif-weight,300);font-size:.46em;line-height:1;letter-spacing:0;color:var(--TextVoice);vertical-align:middle;transform:translateY(-.1em)}
/* Orangener Punkt vor Paketnamen */
.ml-pdot{display:inline-block;width:7px;height:7px;margin:0 10px 0 0;border-radius:50%;background:var(--Ember);box-shadow:0 0 8px rgba(239,138,63,.6);vertical-align:middle;transform:translateY(-1px)}
/* Stundenweise: Zusatzzeile unter den Paketen */
.ml-pdot--ring{background:none;box-sizing:border-box;border:1.5px solid var(--Ember);box-shadow:none}
.ml-hourly{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;align-items:center;margin-top:44px;padding-top:32px;border-top:1px dashed var(--Border)}
.ml-hourly__head .ml-meta{margin:0}
.ml-hourly__price{margin:8px 0 0;font:700 clamp(22px,2.2vw,26px)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--TextStrong);white-space:nowrap}
.ml-hourly__price span{margin-left:6px;font-family:var(--font-serif);font-style:italic;font-weight:var(--serif-weight,300);font-size:.7em;letter-spacing:0;color:var(--TextVoice)}
.ml-hourly__note{grid-column:2 / -1;margin:0;max-width:620px}
/* Kleiner, gedämpfter Fließtext für Zusätze (15px, TextMuted) – wie z. B. „Nicht sicher, wo du stehst?“ */
.ml-fine{font-size:15px;line-height:1.6;color:var(--TextMuted)}
@media (max-width:1000px){.ml-hourly{grid-template-columns:repeat(2,minmax(0,1fr))}.ml-hourly__note{grid-column:2}}
@media (max-width:560px){.ml-hourly{grid-template-columns:1fr}.ml-hourly__note{grid-column:1}}
/* Kundenstimmen */
.ml-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.ml-voices--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ml-voice{margin:0;padding:28px;display:flex;flex-direction:column;gap:14px}
.ml-voice__mark{display:block;height:30px;overflow:visible;font:italic 400 64px/1 var(--font-serif);color:var(--Ember);text-shadow:0 0 14px rgba(239,138,63,.45)}
.ml-voice__text{margin:0;font:italic var(--serif-weight,300) 19px/1.5 var(--font-serif);color:var(--TextStrong)}
.ml-voice__by{margin-top:auto;padding-top:16px;border-top:1px dashed var(--Border);font:400 12px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted)}
.ml-voice__by a{color:var(--AccentText)}
.ml-org{display:block;width:max-content;max-width:100%;white-space:nowrap;margin-top:2px}
.ml-voices--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ml-voices--4 .ml-voice__text{font-size:18px}
.ml-voice--wide{grid-column:1 / -1}
.ml-voice--wide .ml-voice__text{max-width:900px;font-size:21px}
@media (max-width:1200px){.ml-voices--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.ml-voices,.ml-voices--2{grid-template-columns:1fr}}
@media (max-width:640px){.ml-voices--4{grid-template-columns:1fr}}
/* Website-Referenzen: Karte mit Browserfenster für den Screenshot (Projekte, Leistung Auftritt, Startseite) */
.ml-sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ml-sites__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:0 0 20px}
.ml-site{display:flex;flex-direction:column;gap:12px;min-width:0}
.ml-site__shot{margin:0 0 6px;border:1px solid var(--Border);border-radius:12px;background:var(--SurfaceInset);overflow:hidden}
.ml-site__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--Border);background:var(--Background);font:400 11px/14px var(--font-mono);color:var(--TextMuted);white-space:nowrap;overflow:hidden}
.ml-site__bar i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--Border)}
.ml-site__bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.ml-site__img{display:flex;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:16/10;padding:16px;text-align:center}
.ml-site__img:has(img){padding:0}
.ml-site__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ml-site__name{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:var(--TextStrong)}
.ml-site--compact .ml-site__name{font-size:17px}
.ml-site__text{margin:0;font-size:16px;line-height:1.6;color:var(--TextBody)}
.ml-site__link{margin-top:auto;padding-top:4px;font-size:16px;font-weight:600}
@media (max-width:900px){.ml-sites{grid-template-columns:1fr}}
/* Langer Screenshot (.ml-site__img--scroll): zeigt den Seitenanfang; --dur = Dauer für einmal ganz nach unten */
.ml-site__img--scroll{position:relative;display:block;padding:0;overflow:hidden;container-type:inline-size}
.ml-site__img--scroll img{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:fill;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
/* Startseite: scrollt nur beim Darüberfahren */
.ml-sites--hover .ml-site:hover .ml-site__img--scroll img,.ml-sites--hover .ml-site:focus-within .ml-site__img--scroll img{transform:translateY(calc(62.5cqw - 100%));transition:transform var(--dur,20s) cubic-bezier(.45,.05,.55,.95)}
/* Projekte und Leistung Auftritt: die Websites scrollen abwechselnd. Die nächste startet 2s vor dem Ende der vorigen; die vorige dunkelt ab, springt im Dunkeln nach oben und hellt 1 s später wieder auf.
   Gehört zur Reihenfolge AktivTeam, Werk1512, Taksz (Dauer 21/22/31 s, Runde 68 s). Läuft erst, wenn der Abschnitt sichtbar ist (.is-on), hält beim Darüberfahren und mit dem Pause-Knopf an. */
.ml-sites--relay .ml-site__img--scroll img{animation:ml-relay-1 68s linear 0s infinite both;animation-play-state:paused}
.ml-sites--relay > .ml-site:nth-child(2) .ml-site__img--scroll img{animation-name:ml-relay-2;animation-delay:19s}
.ml-sites--relay > .ml-site:nth-child(3) .ml-site__img--scroll img{animation-name:ml-relay-3;animation-delay:39s}
.ml-sites--relay.is-on .ml-site__img--scroll img{animation-play-state:running}
.ml-sites--relay.is-on:hover .ml-site__img--scroll img,.ml-sites--relay.is-on:focus-within .ml-site__img--scroll img,.ml-sites--relay.is-paused .ml-site__img--scroll img{animation-play-state:paused}
@keyframes ml-relay-1{0%{transform:translateY(0);filter:brightness(1);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}30.882%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(1);animation-timing-function:ease-in-out}32.353%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(.3)}32.382%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}33.824%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}35.294%,100%{transform:translateY(0);filter:brightness(1)}}
@keyframes ml-relay-2{0%{transform:translateY(0);filter:brightness(1);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}32.353%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(1);animation-timing-function:ease-in-out}33.824%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(.3)}33.853%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}35.294%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}36.765%,100%{transform:translateY(0);filter:brightness(1)}}
@keyframes ml-relay-3{0%{transform:translateY(0);filter:brightness(1);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}45.588%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(1);animation-timing-function:ease-in-out}47.059%{transform:translateY(calc(62.5cqw - 100%));filter:brightness(.3)}47.088%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}48.529%{transform:translateY(0);filter:brightness(.3);animation-timing-function:ease-in-out}50%,100%{transform:translateY(0);filter:brightness(1)}}
.ml-sites__ctrl{display:flex;justify-content:flex-end;margin-top:12px}
.ml-sites__pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--TextMuted);font:400 13px/18px var(--font-mono);cursor:pointer;transition:color .25s ease}
.ml-sites__pause:hover{color:var(--TextStrong)}
.ml-sites__pause svg{flex:none;width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.ml-site__img--scroll img{animation:none!important;transition:none!important}.ml-sites__ctrl{display:none}}
.ml-sign{margin:14px 0 0;font-family:"Caveat",cursive;font-weight:400;font-size:48px;line-height:1;color:var(--TextStrong)}
.ml-sign__ink{display:inline-block;padding:.14em .3em .26em .1em;margin:-.14em -.3em -.26em -.1em;transform:rotate(-4deg);transform-origin:left center}
.ml-sign.is-armed .ml-sign__ink{clip-path:inset(0 100% 0 0)}
.ml-sign.is-armed.is-on .ml-sign__ink{animation:ml-sign-write 1.6s cubic-bezier(.45,.05,.35,1) .15s both}
@keyframes ml-sign-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.ml-sign.is-armed .ml-sign__ink{clip-path:none;animation:none}}

/* Gestrichelte Kacheln sind nicht durchsichtig: Sie nehmen die Farbe ihres Untergrunds an, damit Linien und Punkt hinter ihnen verschwinden.
   Auf Seitengrund = Background, in Flächen-Karten = Surface. */
.ml-card:not(.ml-card--line),.ml-calc__out{--fx-ground:var(--Surface)}
/* Struktur-Grafik: "Vom Durcheinander zur Struktur" – Kacheln ordnen sich, Linien verbinden, ein Punkt läuft den Ablauf ab */
.fx-wrap{position:relative}
.fx{position:relative;width:100%;container-type:inline-size;overflow:hidden}
.fx__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx__edge{fill:none;stroke:var(--Border);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fx__edge--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:fx-draw .9s ease-out both}
.fx__trail{fill:none;stroke:var(--Ember);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.fx__port{fill:var(--Border)}
.fx__orb{fill:var(--Ember)}
.fx__halo{fill:var(--Ember);opacity:.22}
.fx__node{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:max(2px,.35cqw);padding:0 max(8px,1.3cqw);background:var(--Surface);border:1px solid var(--Border);border-radius:max(9px,1.2cqw);box-shadow:var(--shadow-card);min-width:0}
.fx__node--trigger::before{content:"";position:absolute;left:max(10px,1.3cqw);top:-4px;width:8px;height:8px;border-radius:50%;background:var(--Ember);box-shadow:0 0 10px rgba(239,138,63,.6)}
.fx__node--data{background:var(--fx-ground,var(--Background));border-style:dashed;box-shadow:none}
.fx__node--logic{flex-direction:row;align-items:center;justify-content:center;gap:max(5px,.6cqw);border-radius:999px;padding:0 max(8px,1cqw);background:var(--Background)}
.fx__node--logic .fx__k{display:none}
.fx__node--logic .fx__l{font-weight:500;font-size:max(10px,1.2cqw);text-align:center}
.fx__node--end{background:radial-gradient(160% 120% at 0 0,var(--card-glow,rgba(239,138,63,.08)),transparent),var(--Surface)}
.fx__k{font:400 max(9px,.95cqw)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--TextMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx__l{font:600 max(11px,1.45cqw)/1.2 var(--font-sans);color:var(--TextStrong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx__s{font:300 max(10px,1.1cqw)/1.3 var(--font-sans);color:var(--TextMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx__hl{position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--AccentBorder);box-shadow:var(--glow-ember),0 0 0 3px var(--AccentTint);opacity:0;pointer-events:none}
.fx__chip{position:absolute;transform:translate(-50%,-100%);padding:max(3px,.35cqw) max(7px,.8cqw);border-radius:999px;background:var(--Background);border:1px solid var(--AccentBorder);font:400 max(9px,.95cqw)/1.1 var(--font-mono);color:var(--AccentText);white-space:nowrap;opacity:0;z-index:20;pointer-events:none}
.fx__chip--below{transform:translate(-50%,0)}
.fx__ticker{position:relative;height:24px;margin-top:16px;font:400 13px/24px var(--font-mono);color:var(--TextBody);overflow:hidden}
.fx__tick{position:absolute;left:0;top:0;right:0;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx__tick b{font-weight:400;color:var(--AccentText);margin-right:12px}
.fx__tick--intro{color:var(--TextMuted)}
.fx__settle{animation:fx-settle 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-settle{from{transform:translate(var(--sx,0),var(--sy,0))}to{transform:none}}
@keyframes fx-draw{to{stroke-dashoffset:0}}
/* Mini-Ordnung: kleine Kacheln fallen in ihre Struktur (für Karten) */
.mx{position:relative;height:120px;margin:-4px 0 6px;overflow:hidden}
.mx__t{position:absolute;box-sizing:border-box;border:1px solid var(--Border);background:var(--SurfaceInset);border-radius:7px;animation:fx-settle 1.1s cubic-bezier(.2,.8,.2,1) both}
.mx__t--hl{border-color:var(--AccentBorder);background:var(--AccentTint);box-shadow:var(--glow-ember)}
.mx__t--line{background:var(--fx-ground,var(--Background));border-style:dashed}
.mx__bar{position:absolute;height:5px;border-radius:3px;background:var(--Border)}
.mx__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mx__edge{fill:none;stroke:var(--Border);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:fx-draw .8s ease-out 1s both}
@media (prefers-reduced-motion:reduce){.fx__settle,.mx__t,.mx__edge,.fx__edge--draw{animation:none!important;stroke-dashoffset:0}}
/* Hell: Linien und Datenquellen etwas kräftiger, sonst verschwinden sie auf Creme */



/* Hero-Stil: rein grafisch wie die Kacheln im Startseiten-Hero. --u = eine viewBox-Einheit (wird inline gesetzt) */
.fx.fh{overflow:visible}
.fh .fx__node{justify-content:flex-start;gap:calc(var(--u)*9);padding:calc(var(--u)*var(--pad,12)) calc(var(--u)*(var(--pad,12) + 2));border-radius:calc(var(--u)*14);background:var(--Surface)}
.fh .fx__node--data{background:var(--fx-ground,var(--Background))}
.fh .fx__node--glyph{padding:0;align-items:center;justify-content:center}
.fh .fx__hl{inset:-1px;border:1.5px solid var(--Ember);box-shadow:var(--glow-ember);background:none}
.fh .fx__node--glyph .fx__hl{display:flex;align-items:center;justify-content:center;background:var(--Surface)}
.fh__cap{flex:none;font:600 max(8.5px,calc(var(--u)*11))/1.25 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--TextMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh__ico{width:calc(var(--u)*26);height:calc(var(--u)*26);fill:none;stroke:var(--TextMuted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fh__ico--on{stroke:var(--Ember)}
.fh__art{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*7);overflow:hidden}
.fh__b{display:block;flex:none;height:calc(var(--u)*7);border-radius:calc(var(--u)*4);background:var(--SurfaceInset)}
.fh__b--s{background:var(--Border)}
.fh__in{flex:none;height:calc(var(--u)*15);box-sizing:border-box;border:1px solid var(--Border);border-radius:calc(var(--u)*5);background:var(--SurfaceInset);position:relative}
.fh__in--area{height:calc(var(--u)*34)}
.fh__in--sel i{position:absolute;right:calc(var(--u)*7);top:50%;width:calc(var(--u)*4.5);height:calc(var(--u)*4.5);border-right:1.5px solid var(--TextMuted);border-bottom:1.5px solid var(--TextMuted);transform:translateY(-70%) rotate(45deg)}
.fh__btn{flex:none;margin-top:auto;height:calc(var(--u)*18);width:44%;border-radius:999px;background:var(--Border)}
.fh__row{display:flex;align-items:center;gap:calc(var(--u)*8);flex:none}
.fh__col{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*5)}
.fh__sq{flex:none;width:calc(var(--u)*11);height:calc(var(--u)*11);border-radius:calc(var(--u)*3);background:var(--Border)}
.fh__sq--open{box-sizing:border-box;background:none;border:1px dashed var(--TextMuted)}
.fh__dot{flex:none;width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;box-sizing:border-box;border:1px solid var(--TextMuted)}
.fh__env{flex:none;width:calc(var(--u)*22);height:calc(var(--u)*16);fill:none;stroke:var(--TextMuted);stroke-width:1.3;stroke-linejoin:round}
.fh__tag{flex:none;font:500 max(7px,calc(var(--u)*8.5))/1 var(--font-mono);letter-spacing:.08em;color:var(--TextMuted);padding:calc(var(--u)*2) calc(var(--u)*4);border:1px solid var(--Border);border-radius:calc(var(--u)*4)}
.fh__grid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:calc(var(--u)*4);align-content:start}
.fh__grid i{height:calc(var(--u)*11);border-radius:calc(var(--u)*3);background:var(--SurfaceInset)}
.fh__grid i.o{background:var(--Border)}
.fh__pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*6);align-content:start}
.fh__pairs span{display:flex;gap:calc(var(--u)*2);padding:calc(var(--u)*2);border:1px solid var(--Border);border-radius:calc(var(--u)*4)}
.fh__pairs i{flex:1;height:calc(var(--u)*10);border-radius:calc(var(--u)*2);background:var(--SurfaceInset)}
.fh__pairs .o i{background:var(--Border)}
.fh__num{flex:none;width:calc(var(--u)*15);height:calc(var(--u)*15);box-sizing:border-box;border-radius:50%;border:1px solid var(--Border);display:flex;align-items:center;justify-content:center;font:500 max(7px,calc(var(--u)*8.5))/1 var(--font-mono);color:var(--TextMuted)}
.fh__pill{flex:1;max-width:46%;height:calc(var(--u)*11);border-radius:999px;background:var(--SurfaceInset)}
.fh__arr{flex:none;font:400 max(8px,calc(var(--u)*11))/1 var(--font-sans);color:var(--TextMuted)}
.fh__room{flex:none;width:calc(var(--u)*18);height:calc(var(--u)*18);box-sizing:border-box;border-radius:calc(var(--u)*4);border:1px solid var(--Border);display:flex;align-items:center;justify-content:center}
.fh__room svg{width:72%;height:72%;fill:none;stroke:var(--TextMuted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fh .fh__chip{left:auto;top:auto;right:calc(var(--u)*9);bottom:calc(var(--u)*9);transform:none;padding:calc(var(--u)*2) calc(var(--u)*8);background:var(--Surface);font-size:max(8.5px,calc(var(--u)*10.5));line-height:1.4}
.fh .fx__trail{stroke:var(--AccentBorder)}
.fh__gate circle{fill:var(--fx-ground,var(--Background));stroke:var(--Border);stroke-width:1.5}
.fh__gate path{fill:none;stroke:var(--TextMuted);stroke-width:3;stroke-linejoin:round}
.fh__gate--on circle,.fh__gate--on path{stroke:var(--Ember)}
.fh__gate--on circle{filter:drop-shadow(0 0 4px rgba(239,138,63,.55))}
.fh__on{opacity:0}
.fh__port-on{fill:var(--Ember)}
.fx__edge--dash{stroke-dasharray:4 5}
.fx__edge--dash.fx__edge--draw{animation:fx-fade .6s ease-out 1.4s both}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}

.fh__ms{fill:var(--fx-ground,var(--Background));stroke:var(--Border);stroke-width:1.5}
.fh__ms--on{fill:var(--Ember);stroke:var(--Ember);filter:drop-shadow(0 0 5px rgba(239,138,63,.6))}
.fh__bars{flex-direction:row;align-items:flex-end;gap:calc(var(--u)*5)}
.fh__bars i{flex:1;border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*1.5) calc(var(--u)*1.5);background:var(--SurfaceInset)}
.fh__bars i.o{background:var(--Border)}
.fh__gantt{justify-content:center;gap:calc(var(--u)*5)}
.fh__gantt i{display:block;height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:var(--SurfaceInset)}
.fh__gantt i.o{background:var(--Border)}
.fh__flow{flex-direction:row;align-items:center;justify-content:space-between;position:relative;padding:0 calc(var(--u)*2)}
.fh__flow::before{content:"";position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*8);top:50%;border-top:1px solid var(--Border)}
.fh__flow i,.fh__flow b{position:relative;flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--Border)}
.fh__flow b{width:calc(var(--u)*13);height:calc(var(--u)*13);box-sizing:border-box;background:var(--Surface);border:1.5px solid var(--Border)}
.fh__av{flex:none;width:calc(var(--u)*12);height:calc(var(--u)*12);box-sizing:border-box;border-radius:50%;border:1px solid var(--Border);background:var(--SurfaceInset)}

.fh__btn--row{margin:0;flex:none;width:30%;height:calc(var(--u)*15)}
.fh__btn--sm{width:34%;height:calc(var(--u)*13)}
.fh__dots{display:flex;gap:calc(var(--u)*4);flex:none}
.fh__dots i{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:var(--Border)}
.fh__sliders{justify-content:center;gap:calc(var(--u)*11)}
.fh__sliders span{position:relative;display:block;flex:none;height:calc(var(--u)*4);border-radius:999px;background:var(--SurfaceInset)}
.fh__sliders i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--Border)}
.fh__sliders b{position:absolute;top:50%;width:calc(var(--u)*11);height:calc(var(--u)*11);margin:calc(var(--u)*-5.5) 0 0 calc(var(--u)*-5.5);border-radius:50%;background:var(--Surface);border:1px solid var(--TextMuted);box-sizing:border-box}
.fh__art--icon{justify-content:center}
.fh__art--icon .fh__ico{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.fh .fx__node--glyph .fh__ico{width:min(calc(var(--u)*26),62%);height:min(calc(var(--u)*26),62%)}
.fh__env--sq{width:calc(var(--u)*18);height:calc(var(--u)*18)}


html,body{background:var(--Background)}
body{margin:0;-webkit-text-size-adjust:100%}
img{max-width:100%}
.ml-glow.ml-root{isolation:auto;overflow:visible;overflow-x:clip;background:radial-gradient(farthest-side at 0 0,var(--Glow),transparent 70%) 0 0/57% 38vw no-repeat,var(--Background)}
.ml-glow.ml-root::before{content:none}
.bo-btn,.bo-head-cta{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.bo-btn--primary:hover{color:var(--TextOnEmber);box-shadow:0 0 0 5px var(--AccentTint),0 0 22px rgba(239,138,63,.4);transform:translateY(-1px)}
.bo-btn--line:hover{background:var(--AccentTint);border-color:var(--AccentBorder);color:var(--AccentText)}
.bo-head-cta:hover{background:var(--Ember)!important;border-color:var(--Ember)!important;color:var(--TextOnEmber)!important;box-shadow:0 0 18px rgba(239,138,63,.35);transform:translateY(-1px)}
.bo-mail:hover{background:var(--Ember)!important;border-color:var(--Ember)!important;color:var(--TextOnEmber)!important}
.ml-foot__legal a{position:relative}
.ml-foot__legal a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--Ember);opacity:.7;transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ml-foot__legal a:hover{color:var(--TextStrong)}
.ml-foot__legal a:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.bo-btn,.bo-head-cta{transition:none}.bo-btn--primary:hover,.bo-head-cta:hover{transform:none}}