/* Tatt_oo_start – Stylesheet (Stand 09/2026) */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-var.woff2) format('woff2')}

/* ---------- Farben & Basis ---------- */
:root{
  --bg:oklch(0.965 0.008 80);
  --paper:oklch(0.93 0.01 80);
  --ink:oklch(0.18 0.01 60);
  --dark:oklch(0.17 0.01 60);
  --light:oklch(0.95 0.008 80);
  --accent:oklch(0.5 0.14 285);
  --accent-light:oklch(0.72 0.12 285);
  --muted:oklch(0.38 0.01 60);
  --muted-dark:oklch(0.78 0.01 60);
  --line:oklch(0.18 0.01 60 / 0.14);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1320px;
  --gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--light);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,88px);line-height:0.95;letter-spacing:-0.02em}
.lead{margin:0;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.dark{background:var(--dark);color:var(--light)}
.dark a:hover{color:var(--accent-light)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:16px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:var(--bg)}
.btn--dark:hover{color:var(--bg);background:var(--accent)}
.btn--ghost{border:1px solid oklch(0.18 0.01 60 / 0.3);font-weight:500}
.btn--light{background:var(--light);color:var(--dark);padding:18px 30px;font-size:16px}
.btn--light:hover{color:var(--dark);background:var(--accent-light)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:10;background:oklch(0.965 0.008 80 / 0.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid oklch(0.18 0.01 60 / 0.12)}
.site-header .wrap{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:0.02em}
.logo span{color:var(--accent)}
.nav{display:flex;gap:clamp(16px,2.5vw,32px);font-size:14px;flex-wrap:wrap;align-items:center}
.nav .cta{padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg)}
.nav .cta:hover{background:var(--accent);color:var(--bg)}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(56px,8vw,112px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5vw,72px);align-items:end}
.hero__text{display:flex;flex-direction:column;gap:32px}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(56px,8.4vw,132px);line-height:0.92;letter-spacing:-0.02em;text-wrap:balance}
.hero h1 em{color:var(--accent)}
.eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:32px;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase;color:oklch(0.45 0.01 60)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hero__intro{margin:0;max-width:30em;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:oklch(0.35 0.01 60);text-wrap:pretty}
.hero__buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero__media{position:relative;margin:0}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:oklch(0.9 0.01 80);border-radius:2px}
.hero__badge{position:absolute;left:-1px;bottom:24px;background:var(--bg);padding:14px 20px 14px 0;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase}

/* ---------- Leistungen ---------- */
.section{padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(64px,9vw,128px)}
.services .wrap{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.section-head p{margin:0;max-width:26em;font-size:16px;line-height:1.55;color:oklch(0.75 0.01 60)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,3vw,40px)}
.card{display:flex;flex-direction:column;gap:20px}
.card__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:oklch(0.25 0.01 60)}
.card__media picture{display:block;height:100%}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);transform:scale(1.001);transition:filter 1s cubic-bezier(.2,.7,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent-light);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card__num,.card h3{transition:transform .6s cubic-bezier(.2,.7,.2,1),color .6s ease}
.card__num{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:var(--accent-light)}
.card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.6vw,38px);line-height:1.05}
.card p{margin:0;font-size:16px;line-height:1.6;color:var(--muted-dark);text-wrap:pretty}

/* ---------- Stilrichtungen ---------- */
.styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(40px,6vw,96px)}
.styles__intro{display:flex;flex-direction:column;gap:24px}
.styles__intro .lead{max-width:24em}
.stil-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stil{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.stil .n{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:8px}
.stil .b{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;justify-content:space-between}
.stil h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1}
.stil p{margin:0;font-size:15px;line-height:1.5;color:oklch(0.42 0.01 60);max-width:24em}

/* ---------- Ablauf ---------- */
.process{border-top:1px solid oklch(0.18 0.01 60 / 0.12);border-bottom:1px solid oklch(0.18 0.01 60 / 0.12)}
.process .wrap{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:40px}
.process h2{margin:0;color:var(--accent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px}
.step{display:flex;flex-direction:column;gap:14px}
.stepnum{width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px}
.step h3{margin:0;font-size:18px;font-weight:600}
.step p{margin:0;font-size:15px;line-height:1.6;color:oklch(0.4 0.01 60);text-wrap:pretty}

/* ---------- Preise ---------- */
.prices .wrap{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.prices__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px 64px;align-items:end}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px}
.price{background:var(--paper);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:24px;border-radius:4px}
.pricehead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.pricehead h3{margin:0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1}
.pricetag{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
.factors{display:flex;flex-direction:column;gap:10px}
.flabel{font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:oklch(0.45 0.01 60)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:999px;border:1px solid oklch(0.18 0.01 60 / 0.2);font-size:14px}
.price p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---------- Über mich ---------- */
.about{background:var(--paper)}
.about .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,6vw,96px);align-items:center}
.about__media{margin:0}
.about__media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:oklch(0.88 0.01 80);filter:grayscale(1)}
.about__text{display:flex;flex-direction:column;gap:28px}
.about h2{margin:0;color:var(--accent)}
.about blockquote{margin:0;font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.12;letter-spacing:-0.01em;text-wrap:pretty}
.about blockquote p{margin:0}
.about__text > p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:34em}

/* ---------- Kontakt & Footer ---------- */
.contact .wrap{padding-top:clamp(72px,10vw,144px);padding-bottom:48px;display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.contact__cta{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.contact h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(56px,9vw,150px);line-height:0.9;letter-spacing:-0.03em}
.contact h2 em{color:var(--accent-light)}
.contact__cta p{margin:0;max-width:32em;font-size:17px;line-height:1.6;color:var(--muted-dark)}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px;border-top:1px solid oklch(0.95 0.008 80 / 0.15);padding-top:32px}
.fcol{display:flex;flex-direction:column;gap:8px}
.flab{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:oklch(0.65 0.01 60)}
.fcol address{font-style:normal;font-size:16px;line-height:1.5}
.flinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:16px}
.footer-bottom{font-family:var(--mono);font-size:12px;color:oklch(0.6 0.01 60);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Leistungen: Effekte (dezent) ---------- */
/* Maus: Bild bekommt langsam Farbe, zoomt minimal, rote Linie waechst, Nummer/Titel ruecken nach */
@media (hover:hover){
  .card:hover img{filter:grayscale(0) contrast(1);transform:scale(1.045)}
  .card:hover .card__media::after{transform:scaleX(1)}
  .card:hover .card__num{transform:translateX(6px)}
  .card:hover h3{transform:translateX(6px);color:var(--accent-light)}
}
/* Touch-Geraete: Karte in Bildschirmmitte bekommt Farbe */
@media (hover:none){
  .card.is-center img{filter:grayscale(0) contrast(1)}
  .card.is-center .card__media::after{transform:scaleX(1)}
}
/* Scrollen: Karten gleiten nacheinander herein, Bild oeffnet sich wie ein Vorhang */
.js .card{opacity:0;transform:translateY(32px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .card .card__media{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.65,0,.2,1)}
.js .card.is-visible{opacity:1;transform:none}
.js .card.is-visible .card__media{clip-path:inset(0 0 0 0)}
.js .card:nth-child(2){transition-delay:.12s}
.js .card:nth-child(2) .card__media{transition-delay:.12s}
.js .card:nth-child(3){transition-delay:.24s}
.js .card:nth-child(3) .card__media{transition-delay:.24s}
/* Leichte Tiefenwirkung beim Scrollen (nur Browser mit Scroll-Timeline) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card__media picture{animation:card-parallax linear both;animation-timeline:view();animation-range:cover}
    @keyframes card-parallax{from{transform:translateY(-4%) scale(1.09)}to{transform:translateY(4%) scale(1.09)}}
  }
}
@media (prefers-reduced-motion:reduce){
  .card img,.card__media::after,.card__num,.card h3{transition:none}
}

/* ---------- Abschnitts-Ueberschriften: Hover (dezent) ---------- */
/* Wort atmet leicht auf, faerbt sich violett, feine Linie zieht von links darunter */
.h2{width:fit-content;padding-bottom:.06em;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:letter-spacing .9s cubic-bezier(.2,.7,.2,1),color .6s ease,background-size .8s cubic-bezier(.2,.7,.2,1)}
.contact h2,.contact h2 em{transition:color .7s ease}
@media (hover:hover){
  .h2:hover{letter-spacing:0;color:var(--accent);background-size:100% 2px}
  .dark .h2:hover{color:var(--accent-light)}
  .contact h2:hover{color:var(--accent-light)}
  .contact h2:hover em{color:var(--light)}
}
@media (prefers-reduced-motion:reduce){
  .h2,.contact h2,.contact h2 em{transition:none}
}

/* ---------- Leistungen: Texte im Blocksatz ueber volle Bildbreite ---------- */
.card p{width:100%;text-align:justify;text-align-last:left;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}

/* ---------- Ablauf ("So laeuft's ab") hervorgehoben: Anthrazit ---------- */
:root{--anthracite:oklch(0.25 0.008 60)}
.process{background:var(--anthracite);color:var(--light);border-top:0;border-bottom:0}
.process h2{color:var(--accent-light)}
.process .stepnum{border-color:var(--accent-light);color:var(--accent-light)}
.process .step h3{color:var(--light)}
.process .step p{color:var(--muted-dark)}

/* ---------- Footer: Credit Schwarting Media ---------- */
.footer-credit{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin-top:-24px}
.footer-credit a{display:inline-flex;opacity:.7;transition:opacity .4s ease}
.footer-credit a:hover,.footer-credit a:focus-visible{opacity:1}
.footer-credit img{display:block;width:180px;height:auto}
@media (max-width:600px){.footer-credit{justify-content:flex-start;margin-top:0}}

/* ---------- Preise: "wird gestochen" – Karten entstehen beim Scrollen Schritt fuer Schritt ---------- */
/* 1. Eine feine Linie zieht wie eine Nadel einmal um die Karte
   2. Die Ueberschrift wird von links nach rechts "eingefaerbt"
   3. "Individuelles Angebot" tippt sich mit blinkendem Cursor
   4. Die Preisfaktoren ploppen nacheinander auf, danach der Text
   Hover: die Faktoren leuchten als Welle nacheinander auf. */
.price{--d:0s;position:relative}
.price-grid .price:nth-child(2){--d:.35s}
.chips li:nth-child(1){--i:0}.chips li:nth-child(2){--i:1}.chips li:nth-child(3){--i:2}
.chips li:nth-child(4){--i:3}.chips li:nth-child(5){--i:4}.chips li:nth-child(6){--i:5}
.chips li{--rd:calc(var(--d) + 1.5s + var(--i) * 90ms);transition:opacity .45s ease var(--rd),transform .6s cubic-bezier(.2,.9,.3,1.3) var(--rd),border-color .3s ease calc(var(--i) * 60ms),color .3s ease calc(var(--i) * 60ms),background-color .3s ease calc(var(--i) * 60ms)}
@media (hover:hover){
  .price:hover .chips li{border-color:var(--accent);color:var(--accent);background-color:oklch(0.5 0.14 285 / .07)}
}

/* Ausgangszustand (nur mit JavaScript, sonst ist alles sofort sichtbar) */
.js .price::before,.js .price::after{content:"";position:absolute;width:0;height:0;box-sizing:border-box;border:1px solid transparent;border-radius:4px;pointer-events:none}
.js .price::before{top:0;left:0}
.js .price::after{bottom:0;right:0}
.js .pricehead h3{clip-path:inset(-15% 100% -15% 0)}
.js .pricetag{display:inline-block;white-space:nowrap;overflow:hidden;width:0;border-right:1px solid transparent;padding-right:2px;vertical-align:bottom}
.js .flabel{opacity:0;transform:translateY(6px)}
.js .chips li{opacity:0;transform:translateY(10px) scale(.9)}
.js .price > p{opacity:0;transform:translateY(8px)}

/* Endzustand */
.js .price.is-visible::before{width:100%;height:100%;border-top-color:oklch(0.5 0.14 285 / .55);border-right-color:oklch(0.5 0.14 285 / .55);transition:width .45s cubic-bezier(.6,0,.2,1) var(--d),height .45s cubic-bezier(.6,0,.2,1) calc(var(--d) + .45s)}
.js .price.is-visible::after{width:100%;height:100%;border-bottom-color:oklch(0.5 0.14 285 / .55);border-left-color:oklch(0.5 0.14 285 / .55);transition:border-color 0s linear calc(var(--d) + .9s),width .45s cubic-bezier(.6,0,.2,1) calc(var(--d) + .9s),height .45s cubic-bezier(.6,0,.2,1) calc(var(--d) + 1.35s)}
.js .price.is-visible .pricehead h3{clip-path:inset(-15% -5% -15% 0);transition:clip-path 1.1s cubic-bezier(.55,0,.2,1) calc(var(--d) + .2s)}
.js .price.is-visible .pricetag{width:calc(var(--n, 21) * (1ch + .08em) + 3px);transition:width 1.2s steps(var(--n, 21)) calc(var(--d) + .9s);animation:price-caret .7s step-end calc(var(--d) + .9s) 4}
.js .price.is-visible .flabel{opacity:1;transform:none;transition:opacity .6s ease calc(var(--d) + 1.3s),transform .6s ease calc(var(--d) + 1.3s)}
.js .price.is-visible .chips li{opacity:1;transform:none}
.js .price.is-visible > p{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d) + 2.1s),transform .8s ease calc(var(--d) + 2.1s)}
@keyframes price-caret{0%{border-right-color:var(--accent)}50%{border-right-color:transparent}}

@media (prefers-reduced-motion:reduce){
  .chips li{transition:none}
}

/* ---------- Ueber mich: Bild-Spielerei ---------- */
/* Scrollen: Bild setzt sich aus 36 Kacheln zusammen, die von allen Seiten hereinfliegen.
   Maus: Bild kippt 3D mit der Maus, ein Farb-Spot folgt dem Cursor (Farbe "durchleuchten"),
   der violette Rahmen dahinter bewegt sich gegenlaeufig. Touch: in Bildschirmmitte ganz in Farbe. */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.about__media{position:relative;isolation:isolate;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.about__media::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--accent);transform:translate(calc(16px + var(--px,0px)),calc(16px + var(--py,0px)));transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.about__media img{transition:opacity .7s ease}
.fx-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);filter:grayscale(1);pointer-events:none;transition:opacity .7s ease}
.fx-tiles span{background-size:600% 600%;background-repeat:no-repeat;opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(.3);transition:transform 1.1s cubic-bezier(.2,.85,.25,1) var(--td),opacity .5s ease var(--td);will-change:transform}
.fx-color{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),#000 55%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),#000 55%,transparent 100%);transition:--r .7s cubic-bezier(.2,.7,.2,1)}
.js .about__media.fx img{opacity:0}
.js .about__media.fx::before{opacity:0}
.about__media.fx.is-visible .fx-tiles span{opacity:1;transform:none}
.about__media.fx.is-built img{opacity:1}
.about__media.fx.is-built .fx-tiles{opacity:0}
.about__media.fx.is-built::before{opacity:1}
.about__media.is-hover .fx-color{--r:180px}
.about__media.is-center .fx-color{--r:1200px}

/* ---------- Footer-Credit: weisses Etikett, pulsierend ---------- */
.footer-credit a{opacity:1;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:0 0 0 0 oklch(1 0 0 / .45);animation:credit-pulse 2.8s ease-in-out infinite;transition:transform .3s ease}
.footer-credit a:hover{transform:translateY(-2px);animation-play-state:paused}
.footer-credit img{width:160px}
@keyframes credit-pulse{
  0%{box-shadow:0 0 0 0 oklch(1 0 0 / .45);transform:scale(1)}
  45%{box-shadow:0 0 0 12px oklch(1 0 0 / 0);transform:scale(1.035)}
  100%{box-shadow:0 0 0 0 oklch(1 0 0 / 0);transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .footer-credit a{animation:none}
  .about__media,.about__media::before,.fx-color{transition:none}
}

/* ---------- Kalligrafie-Hintergrund (Spitzfeder) in den Anthrazit-Bereichen ---------- */
/* Statisch als Bild (ohne JS / "Bewegung reduzieren"); mit JS als Inline-SVG, das sich beim
   Hereinscrollen Zug um Zug "schreibt": erst die Lineatur, dann die Schwellzuege. */
.services,.process{position:relative;overflow:hidden;isolation:isolate}
.services > .wrap,.process > .wrap{position:relative;z-index:1}
.kalli-layer{position:absolute;left:50%;width:max(100%,1100px);transform:translateX(-50%);pointer-events:none;z-index:0}
.kalli-top{top:0}
.kalli-bottom{bottom:0}
.kalli-layer img,.kalli-layer svg{display:block;width:100%;height:auto}
.kalli .pen,.kalli .guide{stroke-dasharray:1 1;stroke-dashoffset:0}
.kalli.is-armed .pen,.kalli.is-armed .guide{stroke-dashoffset:1}
.kalli.is-armed.is-drawn .pen,.kalli.is-armed.is-drawn .guide{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,3s) cubic-bezier(.45,.05,.35,1) var(--delay,0s)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .kalli-layer svg{animation:kalli-drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes kalli-drift{from{transform:translateY(-18px)}to{transform:translateY(18px)}}
  }
}

/* ---------- Stilrichtungen: "Ein Motiv – acht Stile" ---------- */
/* Links eine Buehne: dieselbe Mondsichel wechselt durch alle 8 Stile. Linien zeichnen sich,
   Flaechen setzen sich, Punkte werden einzeln "gestochen". Laeuft automatisch, folgt aber
   sofort der Maus / dem Finger auf der Liste rechts. */
.spec-stage{position:sticky;top:104px;margin:16px 0 0;width:100%;max-width:440px;color:var(--ink)}
.spec-svg{display:block;width:100%;height:auto;overflow:visible}
.spec{opacity:0;transition:opacity .45s ease}
.spec.is-active{opacity:1}
.spec .draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .4s ease}
.spec.is-active .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.35,1) calc(.1s + var(--i,0) * .09s)}
.spec .fill,.spec .dot,.spec .dots circle{transform-box:fill-box;transform-origin:center;opacity:0;transition:opacity .35s ease,transform .35s ease}
.spec .fill{transform:scale(.92)}
.spec .dot,.spec .dots circle{transform:scale(0)}
.spec.is-active .fill{opacity:1;transform:none;transition:opacity .7s ease calc(.25s + var(--i,0) * .08s),transform .9s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i,0) * .08s)}
.spec.is-active .dot,.spec.is-active .dots circle{opacity:1;transform:none;transition:opacity .3s ease calc(var(--i,0) * 3ms),transform .45s cubic-bezier(.2,.9,.3,1.5) calc(var(--i,0) * 3ms)}
.spec-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:oklch(0.45 0.01 60)}
.spec-name{display:inline-block;color:var(--accent)}
.spec-name.swap{animation:spec-swap .5s cubic-bezier(.2,.7,.2,1)}
@keyframes spec-swap{from{opacity:0;transform:translateY(6px)}}
.stil{transition:border-color .45s ease}
.stil .n{transition:color .45s ease}
.stil h3{transition:transform .55s cubic-bezier(.2,.7,.2,1),color .45s ease}
.stil.is-active{border-top-color:var(--accent)}
.stil.is-active .n{color:var(--accent)}
.stil.is-active h3{transform:translateX(8px)}
.js .stil{cursor:pointer}
.stil:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
@media (max-width:820px){.spec-stage{position:relative;top:auto;max-width:360px;margin:8px auto 0}}
@media (prefers-reduced-motion:reduce){.spec,.spec .draw,.spec .fill,.spec .dot,.spec .dots circle,.stil h3{transition:none}}