/*
Theme Name: Bricks Child Theme
Theme URI: https://bricksbuilder.io/
Description: Use this child theme to extend Bricks.
Author: Bricks
Author URI: https://bricksbuilder.io/
Template: bricks
Version: 1.1
Text Domain: bricks
*/
/* =========================================================
Marc André Hinkel – Portfolio
Hand (Retouch) = Serif + warm, Machine (AI) = Mono + rot
========================================================= */
:root{
--bg:#0c0d10; --surface:#15161b; --fg:#ece8e1; --muted:#8b8a92;
--line:rgba(236,232,225,.12); --hand:#d9a47e; --machine:#d63a4f; --note:#e8d27a;
--f-hand:"Instrument Serif","Times New Roman",Georgia,serif;
--f-machine:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
--f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--gutter:clamp(16px,4vw,56px);
color-scheme:dark;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden}
body a{color:inherit;text-decoration:none}
.mah *,.mah *::before,.mah *::after{box-sizing:border-box}
.mah img{max-width:100%;display:block}
.mah h1,.mah h2,.mah h3{text-wrap:balance;margin:0;font-weight:400;color:inherit}
.mah p{margin:0}
.mah :focus-visible{outline:2px solid var(--machine);outline-offset:3px}
.brxe-section.mah-sec{padding:0!important;align-items:stretch!important;width:100%;max-width:none}
.brxe-section.mah-sec.mah-padded{padding:clamp(72px,12vw,160px) max(var(--gutter),env(safe-area-inset-right,0px)) clamp(72px,12vw,160px) max(var(--gutter),env(safe-area-inset-left,0px))!important}
.brxe-section.mah-about-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);border-top:1px solid var(--line)}
.mah-about-grid > .brxe-shortcode{grid-column:1/-1}
.brxe-shortcode{width:100%}
.mah-wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.mah-kicker{font-family:var(--f-machine);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mah-btn{display:inline-block;justify-self:start;font:13px var(--f-machine);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:none;border:1px solid var(--line);padding:12px 18px;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s}
.mah-btn:hover{border-color:var(--fg)}
.mah-btn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.mah-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font:14px var(--f-machine);color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin:0}
.mah-specs dt{color:var(--fg)}
.mah-specs dd{margin:0}
/* alle Abschnitte: oben und unten gleicher Abstand zur Trennlinie */
.mah-sec-pad{padding-top:clamp(96px,10vw,140px);padding-bottom:clamp(96px,10vw,140px);border-top:1px solid var(--line)}
.mah-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.mah-head h2{font-size:clamp(44px,7vw,104px);line-height:.95}
.mah-head p{color:var(--muted);max-width:52ch}
.mah-h-hand{font-family:var(--f-hand);font-style:italic}
.mah-h-hand .acc{color:var(--hand)}
.mah-h-machine{font-family:var(--f-machine);font-weight:300;letter-spacing:-.05em}
.mah-h-machine .acc{color:var(--machine)}
/* Filmkorn + Cursor */
.mah-grain{position:fixed;inset:-50%;pointer-events:none;z-index:70;opacity:.045;will-change:transform;animation:mahGrain 4s steps(6) infinite}
@keyframes mahGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.mah-has-cursor,.mah-has-cursor *{cursor:none!important}
.mah-cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none}
.mah-has-cursor .mah-cur{display:block}
.mah-cur-dot{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--fg)}
.mah-cur-ring{position:absolute;width:38px;height:38px;margin:-19px;border:1px solid var(--fg);border-radius:50%;opacity:.5;transition:width .25s,height .25s,margin .25s,opacity .25s}
.mah-cur-label{position:absolute;left:24px;top:14px;font-family:var(--f-machine);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s}
.mah-cur.is-label .mah-cur-ring{width:72px;height:72px;margin:-36px;opacity:.9}
.mah-cur.is-label .mah-cur-label{opacity:1;left:44px}
/* Intro */
.mah-intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.mah-intro[hidden]{display:none}
.mah-intro.out{clip-path:inset(0 0 100% 0)}
.mah-intro-inner{display:grid;gap:18px;justify-items:center;text-align:center;padding:16px}
.mah-intro-name{font-family:var(--f-hand);font-style:italic;font-size:clamp(44px,9vw,120px);line-height:.95}
.mah-intro-name span{display:inline-block;opacity:0;transform:translateY(40%);animation:mahUp .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mahUp{to{opacity:1;transform:none}}
.mah-intro-meta{font-family:var(--f-machine);font-size:12px;letter-spacing:.12em;color:var(--muted);display:flex;gap:18px}
.mah-intro-meta .pct{color:var(--machine);min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.mah-intro-bar{width:min(320px,70vw);height:1px;background:var(--line);overflow:hidden}
.mah-intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hand),var(--machine))}
.mah-intro-skip{position:absolute;right:16px;bottom:16px;background:none;border:1px solid var(--line);color:var(--muted);font:11px var(--f-machine);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer}
/* Navigation */
.mah-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding-top:14px;padding-bottom:14px;color:var(--fg);background:linear-gradient(to bottom,rgba(12,13,16,.92),rgba(12,13,16,.72));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.admin-bar .mah-nav{top:32px}
.mah-logo{font-family:var(--f-machine);font-size:12px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.mah-logo em{font-family:var(--f-hand);font-size:20px;letter-spacing:0;text-transform:none}
.mah-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:baseline;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;justify-content:flex-end}
.mah-nav li a{position:relative;display:block;font-size:13px;line-height:1;padding:4px 0}
.mah-nav .n-hand{font-family:var(--f-hand);font-style:italic;font-size:18px;color:var(--hand)}
.mah-nav .n-machine{font-family:var(--f-machine);font-size:13px;letter-spacing:.06em;color:var(--machine)}
.mah-nav .n-quiet{opacity:.55}
.mah-nav li a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.mah-nav li a:hover::after{transform:scaleX(1)}
.mah-page-top{height:58px}
/* Hero Split */
/* Beide Hälften liegen übereinander, die Trennlinie wird nur per clip-path verschoben: kein Neuberechnen des Layouts (ruckelfrei in Safari) */
/* Eingangsbild + Kunden-Laufband füllen zusammen genau das Fenster (Menühöhe und Laufband per Script) */
.mah-split{position:relative;height:var(--hh);overflow:hidden;--s:50%}
.mah-half{position:absolute;inset:0;overflow:hidden;display:block}
.mah-hand{clip-path:inset(0 calc(100% - var(--s)) 0 0)}
.mah-machine{clip-path:inset(0 0 0 var(--s))}
.mah-half-img,.mah-half canvas{position:absolute;top:0;height:100%;width:70%;object-fit:cover}
.mah-hand .mah-half-img{left:0;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
.mah-machine canvas{right:0}
/* Bilder wandern mit der Trennlinie mit, damit das Motiv mittig im sichtbaren Teil bleibt (nur Verschieben, kein Layout) */
.mah-hand .mah-half-img{translate:calc((var(--s) / 2 - 35%) / 0.7) 0}
.mah-machine canvas{translate:calc((var(--s) / 2 - 15%) / 0.7) 0}
.mah-hand:hover .mah-half-img{transform:scale(1)}
/* Breites Fenster: das Hochformat nur leicht beschneiden statt stark hineinzuzoomen, an der Trennlinie ausgerichtet, Ränder laufen weich ins Schwarz aus.
Greift erst, wenn eine Hälfte breiter ist als das Bild (Klasse per Script); --sx ist die Position der Trennlinie in px */
.mah-split{--hh:clamp(520px,calc(100vh - var(--mah-top,58px) - var(--mah-clients,175px)),1100px)}
.mah-split.is-wide .mah-half-img,.mah-split.is-wide .mah-half canvas{width:min(70%,calc(var(--hh) * .9))}
.mah-split.is-wide .mah-hand .mah-half-img{translate:calc(var(--sx,50vw) - 100%) 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 24%);mask-image:linear-gradient(to right,transparent,#000 24%)}
.mah-split.is-wide .mah-machine canvas{left:0;right:auto;translate:var(--sx,50vw) 0;-webkit-mask-image:linear-gradient(to left,transparent,#000 24%);mask-image:linear-gradient(to left,transparent,#000 24%)}
.mah-half::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(12,13,16,.78) 0,rgba(12,13,16,.66) clamp(140px,18vw,260px),rgba(12,13,16,.5) clamp(220px,26vw,360px),rgba(12,13,16,.32) clamp(290px,33vw,450px),rgba(12,13,16,.17) clamp(360px,40vw,540px),rgba(12,13,16,.07) clamp(430px,47vw,630px),rgba(12,13,16,0) clamp(500px,55vw,740px))}
.mah-half-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(20px,4vw,48px);display:grid;gap:10px}
.mah-hand .mah-half-label{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:16px}
.mah-machine .mah-half-label{padding-right:max(var(--gutter),env(safe-area-inset-right,0px));padding-left:16px;justify-items:end;text-align:right}
.mah-half h2{line-height:.85;white-space:nowrap}
.mah-hand h2{font-family:var(--f-hand);font-style:italic;font-size:clamp(64px,10vw,176px)}
.mah-machine h2{font-family:var(--f-machine);font-weight:300;font-size:clamp(64px,10vw,176px);letter-spacing:-.06em}
.mah-half-label p{max-width:34ch;color:rgba(236,232,225,.92);font-size:clamp(15px,1.25vw,19px);font-weight:500;line-height:1.45}
.mah-half-label .mah-kicker{font-size:16px;font-weight:500}
.mah-hand .mah-kicker{color:var(--hand)}
.mah-machine .mah-kicker{color:var(--machine)}
.mah-seam{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:var(--s,50%);background:rgba(236,232,225,.28);z-index:3;pointer-events:none}
.mah-seam span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font-family:var(--f-machine);font-size:11px;font-weight:500;letter-spacing:.4em;color:rgba(236,232,225,.75);background:var(--bg);padding:7px 13px}
/* WebGL-Eingangsbild: Zeichenfläche unter den Hälften; Bilder, Rausch-Canvas und Verlauf übernimmt der Shader */
.mah-hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.mah-split.gl-on .mah-half-img,.mah-split.gl-on .mah-half canvas,.mah-split.gl-on .mah-half::after{display:none}
/* Kunden-Laufband */
.mah-clients{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:32px;padding-bottom:32px;display:grid;gap:14px}
.mah-clients .mah-kicker{font-size:clamp(14px,1.3vw,18px);color:var(--fg)}
/* Kopfzeile: links die Rubrik, rechts der Hinweis zu Kundenarbeiten (NDA) */
.mah-clients-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 24px}
.mah-nda{font:12px/1.5 var(--f-machine);letter-spacing:.04em;color:var(--muted)}
.mah-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mah-track{display:flex;align-items:center;width:max-content;animation:mahMarq 96s linear infinite}
.mah-marquee:hover .mah-track{animation-play-state:paused}
.mah-track span{font-size:clamp(30px,4.4vw,60px);line-height:1.1;padding-left:clamp(18px,2.6vw,40px);padding-right:clamp(18px,2.6vw,40px);white-space:nowrap;color:rgba(236,232,225,.82)}
.mah-track .c-h{font-family:var(--f-hand);font-style:italic}
.mah-track .c-m{font-family:var(--f-machine);font-weight:300;letter-spacing:-.04em;font-size:clamp(24px,3.6vw,50px)}
.mah-track i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--hand)}
.mah-track i:nth-of-type(even){background:var(--machine)}
@keyframes mahMarq{to{transform:translateX(-50%)}}
/* From noise to image */
.mah-ai{background:linear-gradient(180deg,var(--bg),rgba(214,58,79,.05))}
.mah-diff{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.mah-diff-canvas{position:relative;aspect-ratio:2/3;width:min(100%,calc(86vh * 2 / 3));justify-self:start;background:var(--surface);overflow:hidden}
.mah-diff-canvas canvas{width:100%;height:100%;display:block}
/* Arbeitsschritte über dem generierten Bild: Upscale, Retusche, Grade werden von oben nach unten aufgedeckt, eine farbige Linie läuft mit */
.mah-diff-stage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0)}
.mah-diff-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,var(--fg));box-shadow:0 0 14px 1px var(--c,var(--fg));opacity:0;pointer-events:none;will-change:transform}
.mah-diff-hud{z-index:1}
/* aktueller Arbeitsschritt gefüllt */
.mah-pipeline span{transition:background .3s,color .3s}
.mah-pipeline .m.on{background:rgba(214,58,79,.24);color:var(--fg)}
.mah-pipeline .h.on{background:rgba(217,164,126,.26);color:var(--fg)}
.mah-diff-hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:10px 12px;font:10px var(--f-machine);letter-spacing:.1em;color:var(--machine);text-transform:uppercase;background:linear-gradient(rgba(12,13,16,.7),transparent);font-variant-numeric:tabular-nums}
.mah-diff-copy{display:grid;gap:22px}
.mah-prompt{font:13px/1.7 var(--f-machine);border:1px solid rgba(214,58,79,.35);background:rgba(214,58,79,.06);padding:16px 18px;min-height:7.5em}
.mah-prompt .lbl{display:block;color:var(--machine);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.mah-prompt .caret{display:inline-block;width:.55em;height:1.05em;background:var(--machine);vertical-align:-2px;animation:mahBlink 1s steps(2) infinite}
@keyframes mahBlink{50%{opacity:0}}
.mah-pipeline{display:flex;flex-wrap:wrap;gap:8px;font:13px var(--f-machine);color:var(--muted)}
.mah-pipeline span{border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.mah-pipeline .h{border-color:rgba(217,164,126,.6);color:var(--hand)}
.mah-pipeline .m{border-color:rgba(214,58,79,.6);color:var(--machine)}
/* Feature-Abschnitte: Bild und Text im Wechsel (AI: Bild links, Retouch: Bild rechts) */
.mah-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.mah-feature.flip .mah-feature-media{order:2}
.mah-feature-media{min-width:0;display:grid}
.mah-feature.flip .mah-feature-media > *{justify-self:end}
.mah-feature-copy{display:grid;gap:24px;align-content:center;min-width:0}
.mah-feature-copy h2{font-size:clamp(44px,6.2vw,96px);line-height:.95}
.mah-feature-copy > .mah-kicker{font-size:16px;font-weight:500}
.mah-lead{font-size:clamp(19px,1.7vw,25px);line-height:1.45;color:var(--fg);max-width:30ch;font-weight:500}
.mah-case{display:grid;gap:12px;padding-top:8px}
.mah-case h3{font-family:var(--f-hand);font-style:italic;font-size:clamp(28px,3vw,40px);line-height:1}
.mah-btn-row{display:flex;gap:10px;flex-wrap:wrap}
.mah-series-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:clamp(64px,9vw,120px);margin-bottom:18px;padding-top:20px;border-top:1px solid var(--line)}
.mah-series-head .more{font:12px var(--f-machine);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.mah-series-head .more:hover{color:var(--hand)}
/* unter "Selected series" nur ein Drittel des normalen Abschnittsabstands */
#retouch{padding-bottom:calc(clamp(96px,10vw,140px) / 3)}
/* Retouch: Lupe + Auswahl */
.mah-lens-block{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.mah-lens{position:relative;aspect-ratio:2/3;width:min(100%,calc(86vh * 2 / 3));justify-self:start;overflow:hidden;touch-action:none;background:var(--surface)}
.mah-lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Lupe: vorberechnetes Rohbild (Canvas), es wird nur ein Kreis ausgeschnitten */
.mah-lens .before{display:none}
.mah-lens-raw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:circle(var(--r,0px) at var(--x,50%) var(--y,50%))}
.mah-lens.reveal .mah-lens-raw{clip-path:circle(150% at 50% 50%)}
.mah-lens-ring{position:absolute;left:0;top:0;width:calc(var(--r,0px)*2);height:calc(var(--r,0px)*2);transform:translate(calc(var(--x,50%) - var(--r,0px)),calc(var(--y,50%) - var(--r,0px)));border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;z-index:1}
.mah-lens.reveal .mah-lens-ring{display:none}
/* Lupe: rundes Fenster, das nur verschoben wird */
.mah-lens-win{position:absolute;left:0;top:0;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.7);z-index:1}
.mah-lens.on .mah-lens-win{opacity:1}
.mah-lens.reveal .mah-lens-win{display:none}
.mah-lens .mah-lens-win img{position:absolute;inset:auto;left:0;top:0;max-width:none;object-fit:cover;will-change:transform}
.mah-lens-tag{z-index:2}
.mah-lens-tag{position:absolute;left:12px;top:12px;font:10px var(--f-machine);letter-spacing:.14em;text-transform:uppercase;background:rgba(12,13,16,.7);padding:5px 8px}
.mah-lens-copy{display:grid;gap:20px;align-content:center}
.mah-lens-copy h3{font-family:var(--f-hand);font-style:italic;font-size:clamp(32px,4vw,52px);line-height:1}
.mah-lens-copy p{color:var(--muted);max-width:44ch}
.mah-works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2vw,28px) clamp(10px,1.4vw,20px)}
.mah-work{position:relative;grid-column:span 4;margin:0}
.mah-work a{display:grid;gap:10px}
.mah-work-media{overflow:hidden;background:var(--surface)}
.mah-work.w5{grid-column:span 5}.mah-work.w7{grid-column:span 7}
/* erste Reihe: Hochformat (4 Spalten, 2:3) und Querformat (8 Spalten, 4:3) sind gleich hoch */
.mah-work.w4{grid-column:span 4}.mah-work.w8{grid-column:span 8}
.mah-work img{width:100%;height:100%;object-fit:cover;aspect-ratio:2/3;filter:grayscale(1);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.mah-work.land img{aspect-ratio:3/2}
.mah-work.w8 img{aspect-ratio:4/3}
.mah-work:hover img{transform:scale(1.04);filter:grayscale(0)}
.mah-work figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mah-work:hover figcaption span{color:var(--hand)}
.mah-work figcaption strong{font-family:var(--f-hand);font-style:italic;font-size:26px;font-weight:400;line-height:1}
.mah-work figcaption span{font:12px var(--f-machine);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;transition:color .3s}
/* What I do: Text in der Mitte, Retusche-Kacheln links, KI-Kacheln rechts */
#services{padding-top:clamp(80px,8.2vw,115px);padding-bottom:calc(clamp(96px,10vw,140px) / 4)}
.mah-w5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.mah-tiles{display:contents}
.mah-w5 .e1{grid-column:1;grid-row:1}.mah-w5 .e2{grid-column:1;grid-row:2}.mah-w5 .e5{grid-column:1;grid-row:3}
.mah-w5 .e3{grid-column:3;grid-row:1}.mah-w5 .e4{grid-column:3;grid-row:2}.mah-w5 .e6{grid-column:3;grid-row:3}
.mah-w-copy{grid-column:2;grid-row:1/4;display:grid;gap:20px;align-content:center;justify-items:center;text-align:center;padding:0 clamp(8px,1.5vw,24px)}
.mah-w-copy h2{font-size:clamp(40px,4.6vw,72px);line-height:.95}
/* Kacheln: Farbfläche mit Filmkorn */
.mah-tile{position:relative;overflow:hidden;min-height:170px;padding:clamp(18px,1.8vw,26px);display:grid;gap:8px;align-content:end;border-radius:2px;background-image:url("data:image/svg+xml;utf8,"),var(--grad);background-size:180px,cover;background-blend-mode:overlay,normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mah-tile:hover{transform:translateY(-4px);background-position:37px 21px,0 0}
.mah-tile.hand{--grad:linear-gradient(155deg,color-mix(in srgb,var(--hand) 38%,var(--bg)),color-mix(in srgb,var(--hand) 10%,var(--bg)))}
.mah-tile.machine{--grad:linear-gradient(155deg,color-mix(in srgb,var(--machine) 46%,var(--bg)),color-mix(in srgb,var(--machine) 12%,var(--bg)))}
.mah-tile-num{position:absolute;top:14px;right:16px;font:12px var(--f-machine);letter-spacing:.12em;color:rgba(236,232,225,.6)}
.mah-tile h3{font-size:clamp(22px,2vw,28px);line-height:1.02}
.mah-tile.hand h3{font-family:var(--f-hand);font-style:italic}
.mah-tile.machine h3{font-family:var(--f-machine);font-weight:300;letter-spacing:-.04em}
.mah-tile p{font-size:14px;color:rgba(236,232,225,.82);max-width:34ch}
.mah-tile::before{content:"";position:absolute;inset:14px;pointer-events:none;opacity:.7}
/* Retusche: Schnittmarken wachsen beim Drüberfahren zu Hilfslinien, statt der Beschreibung erscheint ein Spruch */
@property --m{syntax:'';inherits:false;initial-value:22px}
.mah-tile.hand::before{--c:var(--hand);background:linear-gradient(var(--c),var(--c)) 0 0/var(--m) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px var(--m) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--m) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--m) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--m) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--m) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--m) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--m) no-repeat;transition:--m .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.mah-tile.hand:hover::before,.mah-tile.hand.is-tapped::before{--m:100%;opacity:1}
.mah-tile.hand p:not(.mah-tile-quote){transition:opacity .25s}
/* Touch-Geräte: Spruch per Antippen (Klasse is-tapped per Script) */
.mah-tile.hand:hover p:not(.mah-tile-quote),.mah-tile.hand.is-tapped p:not(.mah-tile-quote){opacity:0}
.mah-tile .mah-tile-quote{position:absolute;left:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);bottom:clamp(22px,2.4vw,34px);margin:0;font-family:var(--f-hand);font-style:italic;font-size:clamp(26px,2.2vw,32px);line-height:1.1;max-width:none;color:var(--hand);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.mah-tile.hand:hover .mah-tile-quote,.mah-tile.hand.is-tapped .mah-tile-quote{opacity:1;transform:none}
/* KI: Pixelraster; flackert zu zufälligen Zeitpunkten (per Script) mit Rauschstoß, Streifen und springendem Raster */
.mah-tile.machine::before{inset:0;opacity:.35;background-image:linear-gradient(color-mix(in srgb,var(--machine) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--machine) 70%,transparent) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);mask-image:linear-gradient(160deg,#000,transparent 70%);transition:opacity .3s,background-size .6s}
.mah-tile.machine:hover::before{opacity:1;background-size:10px 10px}
.mah-tile.machine::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(95,232,255,.2) 6px 8px,transparent 8px 13px,rgba(214,58,79,.12) 13px 15px);mix-blend-mode:screen}
.mah-tile.machine.is-glitch{animation:mahNoiseB .34s steps(2) 1}
.mah-tile.machine.is-glitch::before{animation:mahGridB .34s steps(2) 1}
.mah-tile.machine.is-glitch::after{animation:mahBurst .32s steps(3) 1}
.mah-tile.machine.is-glitch h3{animation:mahBurstText .32s steps(2) 1}
.mah-tile.machine.is-glitch .mah-tile-num{animation:mahNumB .34s steps(2) 1}
@keyframes mahBurst{0%{opacity:1;clip-path:inset(20% 0 60% 0);transform:translateX(-10px)}33%{opacity:1;clip-path:inset(62% 0 18% 0);transform:translateX(8px)}66%{opacity:1;clip-path:inset(40% 0 44% 0);transform:translateX(-4px)}100%{opacity:0}}
@keyframes mahBurstText{0%{text-shadow:-3px 0 rgba(95,232,255,.8),3px 0 rgba(214,58,79,.45);transform:translateX(3px)}50%{text-shadow:3px 0 rgba(95,232,255,.8),-3px 0 rgba(214,58,79,.45);transform:translateX(-2px)}100%{text-shadow:none;transform:none}}
@keyframes mahNoiseB{0%{filter:contrast(1.4) brightness(1.1) saturate(.85);background-position:53px 17px,0 0}50%{filter:contrast(1.3) brightness(1.08);background-position:-29px 41px,0 0}100%{filter:none;background-position:0 0,0 0}}
@keyframes mahGridB{0%{transform:translate(5px,-3px);background-size:9px 9px;opacity:.9}50%{transform:translate(-4px,2px);background-size:20px 20px;opacity:.7}100%{transform:none;opacity:.35}}
@keyframes mahNumB{0%{transform:translateX(-6px);color:#5fe8ff}50%{transform:translateX(4px);color:color-mix(in srgb,var(--machine) 55%,var(--fg))}100%{transform:none}}
/* Ablauf: durchgehende Linie, darüber und darunter derselbe Abstand */
.mah-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(64px,6.8vw,92px);padding-top:clamp(64px,6.8vw,92px);border-top:1px solid var(--line)}
.mah-step{display:grid;gap:10px;align-content:start;min-width:0}
.mah-step .num{font:13px var(--f-machine);color:var(--hand);letter-spacing:.12em}
.mah-step h3{font-family:var(--f-hand);font-style:italic;font-size:clamp(24px,2.2vw,30px);line-height:1.05}
.mah-step p{color:var(--muted);max-width:34ch}
/* How I work with AI */
.mah-ai-way{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,88px);margin-top:clamp(64px,6.8vw,92px);padding-top:clamp(32px,3.4vw,46px);border-top:1px solid var(--line);align-items:center}
.mah-ai-way h2{font-size:clamp(36px,4.6vw,68px);line-height:.98}
.mah-ai-way ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mah-ai-way li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mah-ai-way li:last-child{border-bottom:0;padding-bottom:0}
.mah-ai-way li b{font:13px var(--f-machine);letter-spacing:.12em;text-transform:uppercase;color:var(--machine);font-weight:500;padding-top:3px}
.mah-ai-way li span{color:rgba(236,232,225,.85)}
/* 404 */
.mah-404{min-height:100vh;display:grid;place-items:center;text-align:center;padding-top:100px;padding-bottom:100px}
.mah-404-inner{display:grid;gap:22px;justify-items:center}
.mah-glitch{position:relative;font-family:var(--f-machine);font-weight:300;font-size:clamp(120px,24vw,320px);line-height:.85;letter-spacing:-.06em;color:var(--fg)}
.mah-glitch::before,.mah-glitch::after{content:attr(data-text);position:absolute;inset:0}
.mah-glitch::before{color:#5fe8ff;transform:translateX(-4px);mix-blend-mode:screen;animation:mahGlA 2.4s steps(1) infinite}
.mah-glitch::after{color:var(--machine);transform:translateX(4px);mix-blend-mode:screen;animation:mahGlB 3.1s steps(1) infinite}
@keyframes mahGlA{0%,100%{clip-path:inset(0 0 0 0)}8%{clip-path:inset(12% 0 70% 0);transform:translateX(-14px)}10%{clip-path:inset(60% 0 22% 0);transform:translateX(8px)}12%{clip-path:inset(0 0 0 0);transform:translateX(-4px)}55%{clip-path:inset(40% 0 44% 0);transform:translateX(-20px)}57%{clip-path:inset(0 0 0 0);transform:translateX(-4px)}}
@keyframes mahGlB{0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(75% 0 8% 0);transform:translateX(16px)}22%{clip-path:inset(20% 0 64% 0);transform:translateX(-6px)}24%{clip-path:inset(0 0 0 0);transform:translateX(4px)}70%{clip-path:inset(48% 0 38% 0);transform:translateX(22px)}72%{clip-path:inset(0 0 0 0);transform:translateX(4px)}}
.mah-404 h1{font-family:var(--f-hand);font-style:italic;font-size:clamp(32px,4.4vw,60px);line-height:1}
.mah-404 p{color:var(--muted);max-width:40ch}
/* Archiv */
.mah-archive{border-top:1px solid var(--line)}
.mah-arch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,88px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.mah-arch-head h2{font-size:clamp(44px,6.2vw,96px);line-height:.95}
.mah-arch-text{font-size:17px;line-height:1.6;color:rgba(236,232,225,.85);max-width:44ch}
.mah-arch-personal{font-family:var(--f-hand);font-style:italic;font-size:20px;color:var(--hand);line-height:1.3}
.mah-film{overflow-x:auto;padding-bottom:8px}
.mah-strip{display:flex;width:max-content;background:#050506;padding:22px 0;position:relative}
.mah-strip::before,.mah-strip::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 10px,#2a2a2e 10px 20px,transparent 20px 28px)}
.mah-strip::before{top:6px}.mah-strip::after{bottom:6px}
.mah-frame{width:clamp(150px,18vw,230px);padding:0 8px;display:grid;gap:6px;margin:0}
.mah-frame img{aspect-ratio:2/3;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.05);opacity:.75;transition:opacity .3s}
.mah-frame:hover img{opacity:1}
.mah-frame span{font:9px var(--f-machine);color:#c9a44a;letter-spacing:.12em;display:flex;justify-content:space-between}
/* About + Kontakt (Bricks-Elemente mit diesen Klassen) */
.mah-about{border-top:1px solid var(--line)}
.mah-about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.mah-about-title{font-family:var(--f-hand);font-style:italic;font-size:clamp(40px,6vw,88px);line-height:.95}
.mah-about-title .m{font-family:var(--f-machine);font-style:normal;font-weight:300;letter-spacing:-.05em;color:var(--machine)}
.mah-about-title .h{color:var(--hand)}
.mah-about-text{display:grid;gap:18px;font-size:17px;line-height:1.6;color:rgba(236,232,225,.85);max-width:58ch;align-content:start}
/* unter der Kontaktzeile derselbe Abstand wie über ihrer Trennlinie */
.brxe-section.mah-about.mah-padded{padding-bottom:clamp(56px,8vw,120px)!important}
.mah-contact{display:grid;gap:18px;margin-top:clamp(56px,8vw,120px);padding-top:32px;border-top:1px solid var(--line)}
.mah-contact .big{font-family:var(--f-hand);font-size:clamp(36px,7vw,110px);line-height:1;overflow-wrap:anywhere}
.mah-footer{padding-top:28px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:12px var(--f-machine);color:var(--muted);letter-spacing:.08em;border-top:1px solid var(--line)}
.mah-footer a:hover{color:var(--fg)}
/* Galerie-Seiten */
.mah-gallery{padding-top:58px}
.mah-g-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mah-g-back{color:var(--muted);font:12px var(--f-machine);letter-spacing:.12em;text-transform:uppercase}
.mah-g-back:hover{color:var(--fg)}
.mah-g-title{font-size:clamp(28px,4vw,48px);line-height:1}
.mah-gallery.hand .mah-g-title{font-family:var(--f-hand);font-style:italic;color:var(--hand)}
.mah-gallery.machine .mah-g-title{font-family:var(--f-machine);font-weight:300;letter-spacing:-.05em;color:var(--machine)}
.mah-g-count{font:12px var(--f-machine);color:var(--muted);font-variant-numeric:tabular-nums}
.mah-g-feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:clamp(20px,4vw,56px);padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(24px,4vw,48px);align-items:end;border-bottom:1px solid var(--line)}
.mah-g-left{display:grid;gap:14px;min-width:0}
.mah-g-stage{height:min(56vh,640px);display:flex;align-items:flex-end;justify-content:center;min-width:0;touch-action:pan-y;user-select:none}
.mah-g-stage img{height:100%;width:auto;max-width:100%;object-fit:contain;animation:mahIn .6s cubic-bezier(.2,.7,.2,1)}
.mah-g-stage .mah-slot{height:100%;width:auto;max-width:100%;aspect-ratio:var(--ar,4/5)}
@keyframes mahIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mah-g-nav{display:flex;align-items:center;justify-content:center;gap:14px;font:12px var(--f-machine);color:var(--muted);font-variant-numeric:tabular-nums}
.mah-g-nav[hidden],.mah-g-strip[hidden]{display:none}
.mah-g-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);font:15px var(--f-machine);cursor:pointer}
.mah-g-arrow:hover{border-color:var(--fg)}
.mah-g-strip{display:flex;gap:6px;overflow-x:auto;background:#050506;padding:12px 8px}
.mah-g-thumb{flex:none;height:72px;padding:0;border:0;background:none;opacity:.4;transition:opacity .25s;cursor:pointer}
.mah-g-thumb:hover{opacity:.8}
.mah-g-thumb.on{opacity:1;outline:1px solid var(--fg);outline-offset:2px}
.mah-g-thumb img{height:100%;width:auto;display:block}
.mah-g-thumb .mah-slot{height:100%;width:auto;aspect-ratio:var(--ar,4/5);padding:4px;font-size:8px}
.mah-g-info{display:grid;gap:16px;align-content:end;min-width:0}
.mah-g-info h2{font-family:var(--f-hand);font-style:italic;font-size:clamp(36px,4.5vw,64px);line-height:1}
.mah-gallery.machine .mah-g-info h2{font-family:var(--f-machine);font-style:normal;font-weight:300;letter-spacing:-.05em}
/* Mono-Titel ist breit: etwas kleiner, damit längere Serientitel in der Infospalte auf zwei Zeilen passen */
.mah-gallery.machine .mah-g-info h2{font-size:clamp(30px,3.4vw,50px);line-height:1.02}
.mah-gallery.hand .mah-g-info .mah-kicker{color:var(--hand)}
.mah-gallery.machine .mah-g-info .mah-kicker{color:var(--machine)}
.mah-g-scatter{padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(72px,10vw,140px)}
.mah-scatter{position:relative;min-height:200px}
.mah-s-item{position:absolute;padding:0;border:0;background:var(--surface);overflow:hidden;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mah-s-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mah-s-item:hover img{transform:scale(1.04)}
.mah-s-item .mah-slot{width:100%;height:100%;aspect-ratio:auto}
.mah-s-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font:10px var(--f-machine);letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(to top,rgba(12,13,16,.85),transparent);opacity:0;transition:opacity .3s}
.mah-s-item:hover .mah-s-cap,.mah-s-item:focus-visible .mah-s-cap{opacity:1}
.mah-s-item.is-active{outline:1px solid var(--fg);outline-offset:4px}
.mah-slot{aspect-ratio:4/5;border:1px dashed rgba(214,58,79,.4);display:grid;place-items:center;text-align:center;padding:16px;font:11px var(--f-machine);color:var(--muted);letter-spacing:.08em;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(214,58,79,.04) 12px 13px)}
/* Galerie: ausgewähltes Bild groß, Titel und Infos rechts daneben, vertikal mittig. Bild und Infos stehen als Gruppe in der Mitte */
@media (min-width:821px){
.mah-g-feature{grid-template-columns:auto minmax(240px,360px);justify-content:center;align-items:center;gap:clamp(28px,4vw,64px)}
/* Bildhöhe per Script: die Vorschauleiste endet genau an der Fensterkante */
.mah-g-stage{height:var(--g-stage-h,min(72vh,860px))}
.mah-g-stage img,.mah-g-stage .mah-slot{max-width:calc(100vw - 2 * var(--gutter) - 420px)}
/* Vorschauleiste bestimmt die Spaltenbreite nicht mit, sie passt sich der Bildbreite an */
.mah-g-strip{width:0;min-width:100%}
.mah-g-info{align-content:center}
}
/* Nächste Serie: unter den Infos, Titel der nächsten Serie in der Schrift der Galerie */
.mah-g-next-series{justify-self:start;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;margin-top:6px;padding:14px 0 0;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);text-align:left;width:100%;cursor:pointer}
.mah-g-next-series[hidden]{display:none}
.mah-g-next-series span{grid-column:1/-1;font:12px var(--f-machine);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mah-g-next-series b{font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.05;justify-self:start}
.mah-gallery.hand .mah-g-next-series b{font-family:var(--f-hand);font-style:italic}
.mah-gallery.machine .mah-g-next-series b{font-family:var(--f-machine);font-weight:300;letter-spacing:-.04em}
.mah-g-next-series i{justify-self:start;font-style:normal;font:18px var(--f-machine);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mah-gallery.hand .mah-g-next-series i{color:var(--hand)}
.mah-gallery.machine .mah-g-next-series i{color:var(--machine)}
.mah-g-next-series:hover i{transform:translateX(6px)}
/* Seitenwechsel: kurzer, feiner Rausch-Wischer (von rechts nach links) mit farbiger Kante */
.mah-wipe{position:fixed;inset:0;z-index:95;display:none;pointer-events:none;background-color:var(--bg);background-size:128px;clip-path:inset(0 0 0 100%)}
.mah-wipe::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--machine);box-shadow:-3px 0 0 rgba(95,232,255,.55)}
/* neue Seite startet zugedeckt, bis das Script den Wischer übernimmt (Sicherheitsnetz: nach 1,5 s von selbst weg) */
html.mah-wipe-in body::after{content:"";position:fixed;inset:0;z-index:95;background:var(--bg);pointer-events:none;animation:mahWipeSafe 0s 1.5s forwards}
@keyframes mahWipeSafe{to{visibility:hidden}}
/* Pfeil unten rechts: zeigt, dass darunter noch alle Serien kommen; verschwindet beim Scrollen */
.mah-g-down{position:fixed;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(12,13,16,.7);color:var(--fg);font:16px var(--f-machine);display:grid;place-items:center;cursor:pointer;animation:mahBob 1.8s ease-in-out infinite;transition:opacity .3s,border-color .2s}
/* Farbe je Galerie: Retouch warm, AI rot */
.mah-gallery.hand .mah-g-down{color:var(--hand);border-color:rgba(217,164,126,.55)}
.mah-gallery.machine .mah-g-down{color:var(--machine);border-color:rgba(214,58,79,.55)}
.mah-gallery .mah-g-down:hover{border-color:currentColor}
.mah-g-down.is-off{opacity:0;pointer-events:none}
@keyframes mahBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* Rechtstexte (Impressum, Datenschutz) */
.mah-legal{max-width:72ch}
.mah-legal h2{font-family:var(--f-machine);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--fg);margin-top:2.4em}
.mah-legal h3{font-family:var(--f-body);font-size:15px;font-weight:600;margin-top:1.2em}
.mah-legal p,.mah-legal li{font-size:15px;line-height:1.7}
.mah-legal ul{padding-left:1.2em;margin:0;display:grid;gap:6px}
.mah-legal a{color:var(--hand);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.mah-legal .seal{margin-top:2em;font-size:12px;color:var(--muted)}
@media (max-width:820px){
/* Tablet und Handy: Bilder bei AI und Retouch höchstens 62 % der Fensterhöhe */
.mah-diff-canvas,.mah-lens{width:min(100%,calc(62vh * 2 / 3))}
.mah-head,.mah-lens-block,.mah-diff,.brxe-section.mah-about-grid,.mah-g-feature,.mah-feature,.mah-ai-way,.mah-arch-head{grid-template-columns:minmax(0,1fr)}
.mah-feature .mah-feature-media,.mah-feature.flip .mah-feature-media{order:2}
.mah-feature.flip .mah-feature-media > *{justify-self:start}
.mah-w5{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mah-w-copy{grid-column:1/-1;grid-row:1}
.mah-w5 .mah-tile{grid-column:auto;grid-row:auto}
.mah-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mah-nav ul{gap:12px}
.mah-nav .n-quiet{display:none}
.mah-g-stage{height:52vh}
.mah-g-thumb{height:56px}
}
/* Handy: Eingangsbild-Hälften untereinander, zusammen genau ein Bildschirm; Serien zweispaltig; Menü als Button */
.mah-nav-toggle{display:none}
@media (max-width:600px){
.mah-split{height:auto}
.mah-half{position:relative;inset:auto;height:calc((100svh - var(--mah-top,58px)) / 2);min-height:250px;clip-path:none}
.mah-half-img,.mah-half canvas{width:100%;translate:none!important}
.mah-machine .mah-half-label{justify-items:start;text-align:left;padding-left:max(var(--gutter),env(safe-area-inset-left,0px))}
.mah-seam{display:none}
.mah-work,.mah-work.w4,.mah-work.w5,.mah-work.w7{grid-column:span 6}
.mah-work.land,.mah-work.w8{grid-column:span 12}
.mah-g-down{display:none}
.mah-nav-toggle{display:block;position:relative;z-index:2;background:none;border:1px solid var(--line);border-radius:999px;color:var(--fg);font:11px var(--f-machine);letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;line-height:1.4;cursor:pointer}
/* offenes Menü: ganzer Bildschirm, große Links (Unschärfe am Menü aus, sonst bleibt das Vollbild im Menübalken gefangen) */
/* rechtsbündig, damit man mit dem Daumen gut drankommt */
.mah-nav ul{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;align-items:flex-end;justify-content:center;gap:14px;padding:80px max(var(--gutter),env(safe-area-inset-right,0px));background:var(--bg);text-align:right}
.mah-nav.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
.mah-nav.is-open .mah-logo{position:relative;z-index:2}
.mah-nav.is-open ul{display:flex}
.mah-nav.is-open ul li a{font-size:30px;padding:4px 0}
.mah-nav.is-open .n-hand{font-size:56px}
.mah-nav.is-open .n-machine{font-size:46px}
.mah-nav.is-open .n-quiet{display:block}
html.mah-menu-open{overflow:hidden}
}
@media (max-width:480px){
.mah-w5,.mah-steps{grid-template-columns:minmax(0,1fr)}
.mah-ai-way li{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (max-width:782px){ .admin-bar .mah-nav{top:46px} }
@media (prefers-reduced-motion:reduce){ .mah *,.mah-grain,.mah-track{animation:none!important;transition:none!important} html{scroll-behavior:auto} }