/* ================================================================
   MORISI Digital — Startseite
   Baut auf assets/css/tokens.css auf. Farben, Schrift und Bewegung
   kommen ausschliesslich von dort.
   ================================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; font-weight:700;
  letter-spacing:-.032em; line-height:1.1; text-wrap:balance; }
p{ margin:0; }
::selection{ background:var(--slate); color:#fff; }

:focus-visible{ outline:2.5px solid var(--slate); outline-offset:3px; border-radius:3px; }
.invert :focus-visible{ outline-color:var(--slate-100); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:-64px; z-index:200;
  background:var(--slate); color:#fff; padding:12px 20px; border-radius:var(--radius);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:var(--sp-4); }

.inner{ width:100%; max-width:var(--content); margin:0 auto; padding:0 var(--gutter); position:relative; }
section{ position:relative; }
#top,#leistungen,#arbeitsweise,#ueber,#kontakt,#main{ scroll-margin-top:104px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15.5px;
  padding:15px 28px; border-radius:var(--radius); border:1.5px solid transparent;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn-solid{ background:var(--slate); border-color:var(--slate); color:#fff; }
.btn-solid:hover{ background:var(--slate-800); border-color:var(--slate-800);
  transform:translateY(-2px); box-shadow:0 15px 30px -14px rgba(51,85,107,.65); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:rgba(250,248,245,.6); }
.btn-ghost:hover{ background:var(--slate-100); border-color:var(--slate-400); }
.invert .btn-solid{ background:var(--slate-100); border-color:var(--slate-100); color:var(--slate-900); }
.invert .btn-solid:hover{ background:#fff; border-color:#fff; }
.invert .btn-ghost{ border-color:var(--line-dark); color:var(--ink); background:transparent; }
.invert .btn-ghost:hover{ background:rgba(232,238,242,.1); border-color:var(--slate-300); }

/* ---------------- Navigation ---------------- */
/* Oben liegt sie durchsichtig über dem blauen Hero, mit beiger Schrift. Beim Scrollen wird sie dunkelblau.
   Die Unterseiten tragen .nav--scrolled von Anfang an und zeigen die Leiste daher immer dunkelblau. */
.nav{
  --ink:#F4EEE5; --ink-soft:#D8CFC2; --line:rgba(244,238,229,.2);
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter); color:var(--ink);
  background:linear-gradient(180deg,rgba(24,42,54,.55),rgba(24,42,54,0));
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             padding var(--dur-fast) var(--ease);
  border-bottom:1px solid transparent;
}
.nav--scrolled{
  background:rgba(27,47,60,.94); backdrop-filter:blur(12px);
  border-bottom-color:rgba(244,238,229,.14); padding-top:14px; padding-bottom:14px;
}
.nav .btn-solid{ background:#F1EDE8; border-color:#F1EDE8; color:var(--slate-900); }
.nav .btn-solid:hover{ background:#fff; border-color:#fff; }
.nav .btn-ghost{ background:transparent; border-color:rgba(244,238,229,.45); color:#F4EEE5; }
.nav .btn-ghost:hover{ background:rgba(244,238,229,.12); border-color:rgba(244,238,229,.75); }
.nav .brand-glyph rect.a{ fill:#7FA6BF; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display);
  font-weight:700; font-size:18.5px; letter-spacing:-.022em; white-space:nowrap; }
.brand-glyph{ width:25px; height:25px; flex:none; }
.brand-glyph rect{ fill:var(--ink); }
.brand-glyph rect.a{ fill:var(--slate); }
.nav-menu{ display:flex; align-items:center; gap:var(--sp-8); }
.nav-links{ display:none; gap:var(--sp-8); font-size:15px; color:var(--ink-soft); font-weight:500; }
.nav-links a{ transition:color var(--dur-fast) var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav .btn{ padding:12px 22px; font-size:14.5px; }
.cta-long{ display:none; }
.cta-short{ display:inline; }

/* ================================================================
   Markenzeichen in 3D — ein Bauteil, mehrfach verwendet
   ================================================================
   Ruhezustand: Das Zeichen steht gerade und still. Erst wenn die Maus in die Nähe kommt,
   dreht es sich ihr zu (main.js). Es gibt bewusst keine Leerlauf-Animation. Sie ließ das
   Zeichen von selbst nach rechts unten kippen und machte die Mausbewegung ruckelig, weil
   sich beides überlagerte. Die Bewegung setzt main.js direkt, ohne CSS-Übergang. */
.mark-stage{ perspective:1400px; perspective-origin:50% 44%; display:flex; justify-content:center; }
.mark{
  position:relative; width:var(--mark-size,300px); height:var(--mark-size,300px);
  transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg);
  will-change:transform;
}
/* Ein Plättchen besteht aus drei Teilen:
     .plate  der Behälter im Raum (Position, Tiefe, Bewegung)
     .slab   sechs Schichten dahinter: sie ergeben die Dicke mit gerundeten Ecken
     .face   die Vorderseite mit Verlauf, Lichtkante und Glanz (beim zweiten Zeichen ein Button)
   Prozentmasse: das Zeichen skaliert sauber in jeder Groesse. */
.plate{
  position:absolute; width:43%; height:43%;
  transform-style:preserve-3d;
  --edge:#B5A99B;
  /* Dicke: sechs Schichten im Abstand von knapp einem Promille der Zeichengroesse,
     zusammen etwa 4 px bei 300 px Zeichen, 10 px bei der groessten Darstellung */
  --step:calc(var(--mark-size,300px) * .0026);
  /* Ruhetiefe: Die Plättchen liegen fast in einer Ebene (22 % ihrer größten Tiefe), damit das
     Zeichen gerade und ruhig wirkt. Kommt die Maus nah, öffnen sie sich (main.js). */
  --z:calc(var(--mark-size,300px) * var(--zf) * .22 + var(--lift,0px));
}
.plate.accent{ --edge:#27424F; }
.p1{ left:3.5%;  top:3.5%;  --zf:0;   --d:.10s; }
.p2{ left:50.5%; top:3.5%;  --zf:.09; --d:calc(.10s + var(--stagger)); }
.p3{ left:3.5%;  top:50.5%; --zf:.18; --d:calc(.10s + var(--stagger) * 2); }
.p4{ left:50.5%; top:50.5%; --zf:.27; --d:calc(.10s + var(--stagger) * 3); }
/* Die Deckkraft liegt auf den Teilen, nicht auf dem Behälter: Eine Deckkraft unter 1
   würde die 3D-Anordnung abflachen, und die Dicke erschiene erst am Ende des Aufbaus. */
.plate>*:not(.flip),.flip>*{ opacity:0; }

.slab{
  position:absolute; inset:0; display:block; pointer-events:none;
  border-radius:6%; background:var(--edge);
  transform:translateZ(calc(var(--i) * var(--step) * -1));
}
.slab--back{
  box-shadow:0 calc(var(--mark-size,300px) * .045) calc(var(--mark-size,300px) * .08)
             calc(var(--mark-size,300px) * -.025) rgba(29,26,24,.5);
}
.face{
  position:absolute; inset:0; display:block; overflow:hidden;
  border:0; padding:0; margin:0; font:inherit; border-radius:6%;
  background:linear-gradient(148deg,#FCFAF7 0%,#E3DAD0 54%,#C0B5A8 100%);
  box-shadow:0 0 0 1px rgba(29,26,24,.08), 0 1px 0 rgba(255,255,255,.95) inset,
             0 -1px 0 rgba(29,26,24,.14) inset;
}
/* Glanzlicht wie auf einer polierten Platte. Es wandert über eine Verschiebung (transform)
   und wird dabei nicht neu gemalt. Vorher hing der Verlauf selbst an der Mausposition
   und musste bei jedem Mausschritt neu berechnet werden. Das war ein Grund fürs Ruckeln. */
.face::after{
  content:""; position:absolute; inset:-50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 36%);
  transform:translate(calc(var(--sx,0) * 19%), calc(-9% + var(--sy,0) * 19%));
}
.plate.accent .face{
  background:linear-gradient(148deg,#6E93AC 0%,#33556B 56%,#1E3644 100%);
  box-shadow:0 0 0 1px rgba(14,28,38,.4), 0 1px 0 rgba(255,255,255,.3) inset,
             0 -1px 0 rgba(0,0,0,.3) inset;
}
.plate.accent .face::after{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.34),rgba(255,255,255,0) 36%);
}

.mark.is-built .plate{ animation:plateIn var(--dur-build) var(--ease) forwards; animation-delay:var(--d); }
.mark.is-built .plate>*:not(.flip),.mark.is-built .flip>*{ animation:plateFade var(--dur-build) var(--ease) forwards; animation-delay:var(--d); }
@keyframes plateIn{
  from{ transform:translate3d(0,0,calc(var(--z) + 200px)) rotate(12deg) scale(.86); }
  to  { transform:translate3d(0,0,var(--z)) rotate(0deg) scale(1); }
}
@keyframes plateFade{ from{ opacity:0; } to{ opacity:1; } }

/* Nach dem Aufbau steht alles fest und sichtbar, auch wenn keine Animation läuft.
   Die Lage danach setzt main.js direkt (inline). Diese Regel ist der Rückfall. */
.mark.is-done .plate{ transform:translate3d(0,0,var(--z)); animation:none; will-change:transform; }
.mark.is-done .plate>*,.mark.is-done .flip>*{ opacity:1; animation:none; }
/* Auf dunklem Grund bekommen die neutralen Module Licht statt Papier */
.invert .plate{ --edge:#6C8696; }
.invert .plate .face{
  background:linear-gradient(148deg,#D8E2E9 0%,#8FA8B6 56%,#4E6A7C 100%);
}
.invert .plate.accent{ --edge:#2C4A5E; }
.invert .plate.accent .face{
  background:linear-gradient(148deg,#9CC0D6 0%,#5A8098 56%,#2C4A5E 100%);
}

/* Hero in Blau: beige Schrift, beige Plättchen, ein dunkelblaues Plättchen. Das Blau ist heller als im
   Entwurf und läuft zu den Rändern dunkler. Das dunkelblaue Plättchen ist dunkler als der Grund und trägt
   eine feine helle Kante, damit es sich absetzt. */
.hero.hero--blau{
  background:radial-gradient(66% 92% at 74% 46%,#42697F 0%,#2F5065 42%,#223E50 82%);
  --ink:#F4EEE5; --ink-soft:#DCD3C6; --ink-faint:#BFB5A7; --line:rgba(244,238,229,.14);
  color:var(--ink);
}
.hero--blau .hero-glow{ background:radial-gradient(circle,rgba(236,224,206,.16) 0%,rgba(236,224,206,.05) 42%,transparent 68%); }
.hero--blau .hero-grid{ opacity:1; }
/* Plättchen im Hero: feines, glattes Metall mit runder Spiegelung. Aufbau der Vorderseite von oben nach unten:
   1. Reflex (.face::after): ein runder, weicher Lichtfleck, der beim Neigen über die Fläche wandert
   2. Rand: heller Grat oben links, Schatten unten rechts
   3. Rundschimmer: sanfter Kegelverlauf wie bei gedrehtem Metall, nur wenige Prozent hell und dunkel
   4. Lichtfleck: weicher runder Glanz oben links
   5. Korn: kaum sichtbar, nur damit die Fläche nicht wie Plastik wirkt
   6. Grundfarbe: beige oder dunkelblau
   Die Seitenkante (.slab) wird nach hinten dunkler und rückt leicht nach rechts unten. Das gibt Tiefe. */
:root{
  --korn-fein:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='k' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .06  0 0 0 .5 -.12'/></filter><rect width='240' height='240' filter='url(%23k)'/></svg>");
}
.hero--blau .plate{ --edge:#D2C3AC; --step:calc(var(--mark-size,300px) * .0027); }
.hero--blau .slab{
  background:color-mix(in srgb,var(--edge),#1B130B calc(var(--i) * 4%));
  transform:translate3d(calc(var(--i) * var(--step) * .32), calc(var(--i) * var(--step) * .52), calc(var(--i) * var(--step) * -1));
}
.hero--blau .plate .face,
.hero--blau .plate .back{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 50%),
    conic-gradient(from 20deg at 50% 50%, rgba(255,255,255,.10), rgba(120,84,40,.03) 50deg, rgba(255,255,255,.09) 110deg,
                   rgba(120,84,40,.035) 175deg, rgba(255,255,255,.10) 235deg, rgba(120,84,40,.03) 295deg, rgba(255,255,255,.10)),
    var(--korn-fein) 0 0 / 240px 240px,
    linear-gradient(148deg,#FDFAF4 0%,#EBE1D1 52%,#CFC1AB 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -3px 6px rgba(70,54,38,.2) inset,
    0 0 0 1px rgba(29,26,24,.14);
}
/* Reflex: runder weicher Lichtfleck, wandert beim Neigen (--sx, --sy setzt main.js) */
.hero--blau .plate .face::after{
  inset:-55%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,0) 30%);
  transform:translate(calc(var(--sx,0) * 24%), calc(-6% + var(--sy,0) * 24%));
}
.hero--blau .plate.accent{ --edge:#1F4058; }
.hero--blau .plate.accent .face,
.hero--blau .plate.accent .back{
  background:
    radial-gradient(circle at 30% 24%, rgba(150,198,232,.34) 0%, rgba(150,198,232,.11) 20%, rgba(150,198,232,0) 50%),
    conic-gradient(from 20deg at 50% 50%, rgba(190,226,248,.06), rgba(0,10,20,.04) 50deg, rgba(190,226,248,.055) 110deg,
                   rgba(0,10,20,.045) 175deg, rgba(190,226,248,.06) 235deg, rgba(0,10,20,.04) 295deg, rgba(190,226,248,.06)),
    var(--korn-fein) 0 0 / 240px 240px,
    linear-gradient(148deg,#3E6C90 0%,#1C3D57 52%,#0A1B29 100%);
  box-shadow:
    0 0 0 1.5px rgba(214,232,244,.38) inset,
    0 2px 0 rgba(224,240,252,.5) inset,
    0 -3px 6px rgba(0,8,16,.45) inset,
    0 0 0 1px rgba(8,20,30,.5);
}
.hero--blau .plate.accent .face::after{
  background:radial-gradient(circle at 50% 50%, rgba(214,236,252,.5) 0%, rgba(214,236,252,.14) 14%, rgba(214,236,252,0) 30%);
}
/* Vorteile als Gravur auf den Plättchen */
.hero--blau .plate .face,.hero--blau .plate .back{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:8%; }
.hero--blau .plate .face{ border:0; font:inherit; color:inherit; cursor:pointer; }
.hero--blau .plate .face:focus-visible{ outline:3px solid #F4EEE5; outline-offset:4px; }

/* ---- Drehen: Das Plättchen dreht sich um seine Mitte. Die Rückseite zeigt den Beleg ---- */
.hero--blau .mark{ --n:10; }
.hero--blau .flip{
  position:absolute; inset:0; transform-style:preserve-3d;
  /* Drehpunkt in der Mitte der Dicke, sonst springt das Plättchen beim Drehen zur Seite */
  transform-origin:calc(50% + var(--n) * var(--step) * .16) calc(50% + var(--n) * var(--step) * .26) calc(var(--n) * var(--step) * -.5);
  transition:transform .75s var(--ease);
}
.hero--blau .plate.is-open .flip{ transform:rotateY(180deg); }
.hero--blau .plate .face,.hero--blau .plate .back{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.hero--blau .plate .back{
  position:absolute; inset:0; display:flex; border-radius:6%;
  transform:translate3d(calc(var(--n) * var(--step) * .32), calc(var(--n) * var(--step) * .52), calc(var(--n) * var(--step) * -1 - 1px)) rotateY(180deg);
}
.hero--blau .back .plate-label{ margin-bottom:.55em; }
/* Rückseite mit Porträt: Foto als Kreis mit etwas Jacke, darunter ein Satz */
.hero--blau .back--foto{ justify-content:flex-end; gap:.2em; }
.hero--blau .back--foto picture{ display:contents; }
.hero--blau .back.back--foto p{ font-size:clamp(10px, calc(var(--mark-size,300px) * .026), 17.5px); }
.hero--blau .back-foto{
  display:block; flex:none; width:42%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; margin:0 0 .5em;
  box-shadow:0 0 0 1.5px rgba(214,232,244,.6), 0 0 0 4px rgba(8,24,36,.3), 0 8px 16px rgba(0,8,16,.5);
}
@media(min-width:900px){ .hero--blau .back-foto{ width:48%; } }
.hero--blau .back p{
  margin:0; max-width:15em; color:#4A3F34; font-size:clamp(11px, calc(var(--mark-size,300px) * .026), 17.5px); line-height:1.42; font-weight:500;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.hero--blau .plate.accent .back p{ color:#E2EEF6; text-shadow:0 1px 0 rgba(0,8,16,.5); }
/* Kleiner Hinweis auf der Vorderseite: ein Pfeil rechts unten, der zeigt, dass man drehen kann */
.hero--blau .face-hint{
  position:absolute; right:7%; bottom:7%; width:1.5em; height:1.5em; border-radius:50%;
  font-size:clamp(10px,1.1vw,15px); border:1px solid rgba(90,78,66,.45);
  display:grid; place-items:center; opacity:.8;
}
.hero--blau .face-hint::before{ content:""; width:.42em; height:.42em; border-right:1.5px solid #5A4E42; border-bottom:1.5px solid #5A4E42; transform:rotate(-45deg) translate(-.05em,.05em); }
.hero--blau .plate.accent .face-hint{ border-color:rgba(216,231,241,.5); }
.hero--blau .plate.accent .face-hint::before{ border-color:#D8E7F1; }
@media (prefers-reduced-motion:reduce){ .hero--blau .flip{ transition:none; } }

/* ---- Tiefe (B): eine eingelassene Fläche hinter den Plättchen. Abschalten: data-tiefe="aus" am Hero ---- */
.hero-tray{
  display:none; position:absolute; inset:-7%; border-radius:7%; pointer-events:none;
  transform:translateZ(calc(var(--mark-size,300px) * -.075));
  background:
    linear-gradient(148deg, rgba(8,22,34,.66) 0%, rgba(14,34,50,.36) 55%, rgba(8,22,34,.58) 100%);
  box-shadow:
    0 0 0 1px rgba(244,238,229,.12) inset,
    0 22px 44px rgba(3,10,16,.6) inset,
    0 -1px 0 rgba(255,255,255,.07) inset,
    0 50px 90px -34px rgba(2,8,14,.65);
}
.hero[data-tiefe="an"] .hero-tray{ display:block; }
/* Gravur: kleine Großbuchstaben mit weitem Abstand, ein Ton nur wenig dunkler als das Metall, feine Filter (siehe index.html) */
.hero--blau .plate-label{
  font-weight:600; text-transform:uppercase; letter-spacing:.075em; line-height:1.38;
  font-size:clamp(10px,1.08vw,15.5px); max-width:13em; overflow-wrap:break-word; text-wrap:balance;
  color:#5A4E42; filter:url(#gravur-fein);
}
@media(min-width:900px){ .hero--blau .plate-label{ letter-spacing:.1em; filter:url(#gravur-fein); } }
.hero--blau .plate.accent .plate-label{ color:#D8E7F1; filter:url(#gravur-fein-hell); }
@media(min-width:900px){ .hero--blau .plate.accent .plate-label{ filter:url(#gravur-fein-hell); } }
@media(forced-colors:active){ .hero--blau .plate-label,.hero--blau .plate.accent .plate-label{ filter:none; color:CanvasText; } }
.hero--blau .btn-solid{ background:#F1EDE8; border-color:#F1EDE8; color:var(--slate-900); }
.hero--blau .btn-solid:hover{ background:#fff; border-color:#fff; }
.hero--blau .btn-ghost{ border-color:rgba(244,238,229,.42); color:#F4EEE5; background:transparent; }
.hero--blau .btn-ghost:hover{ background:rgba(244,238,229,.1); border-color:rgba(244,238,229,.7); }


/* ================================================================
   1 — Hero
   ================================================================ */
.hero{
  min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:clamp(112px,13vw,150px) 0 clamp(76px,8vw,104px);
}
.hero-grid{ position:absolute; inset:0; z-index:0; opacity:.72;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:92px 92px; background-position:center;
  mask-image:radial-gradient(80% 64% at 70% 48%,#000 14%,transparent 76%);
  -webkit-mask-image:radial-gradient(80% 64% at 70% 48%,#000 14%,transparent 76%); }
.hero-glow{ position:absolute; z-index:0; right:-10%; top:50%; transform:translateY(-50%);
  width:min(1100px,86vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle,rgba(51,85,107,.16) 0%,rgba(51,85,107,.05) 42%,transparent 68%); }

.hero .inner{ z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,64px); align-items:center; }
.hero-mark{ --mark-size:clamp(min(320px,86vw),44vw,700px); --base-y:24deg; }

.kick{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
  background:var(--slate-100); padding:9px 16px; border-radius:999px; }
.kick .sq{ width:8px; height:8px; background:var(--slate); border-radius:2px; }
.invert .kick{ background:rgba(232,238,242,.1); color:var(--slate-100); }
.invert .kick .sq{ background:var(--slate-300); }

/* Die Schlagzeile ist länger als früher. Deshalb kleinere Schrift als --step-hero und mehr
   Breite, sonst steht "ist." allein in der letzten Zeile (gemessen von 375 bis 1920 px). */
.hero h1{ font-size:clamp(36px,4.8vw,70px); line-height:1.03; margin-top:26px; max-width:22ch; }
.hero-sub{ margin-top:26px; font-size:var(--step-lead); color:var(--ink-soft);
  line-height:1.66; max-width:44ch; }
.hero-acts{ margin-top:var(--sp-8); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.trust{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line);
  max-width:640px; display:flex; gap:24px; flex-wrap:wrap;
  font-size:var(--step-small); color:var(--ink-soft); }
.trust span{ display:flex; align-items:center; gap:9px; }
.trust svg{ width:17px; height:17px; flex:none; stroke:var(--slate); fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ================================================================
   2 — Statement
   ================================================================ */
.statement{ padding:var(--section-pad) 0; }
.statement blockquote{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--step-h2); line-height:1.18; max-width:20ch; letter-spacing:-.028em; }
.statement .attrib{ margin-top:var(--sp-8); font-size:var(--step-small); color:var(--ink-faint);
  letter-spacing:.12em; text-transform:uppercase; }

/* ================================================================
   3 — Vier Säulen (interaktiv)
   ================================================================ */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  gap:var(--sp-4); margin-bottom:clamp(36px,5vw,60px); }
.sec-head h2{ font-size:var(--step-h2); }
.sec-head .note{ font-size:var(--step-small); color:var(--ink-soft); max-width:36ch; }

.pillars{ padding:var(--section-pad) 0; overflow:hidden; }
.pillars-grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,68px); align-items:center; }
.pillars-mark{ --mark-size:clamp(260px,42vw,540px); --base-y:22deg; }

/* Module als Schaltflächen: das .face ist der Button, die Schichten dahinter bleiben Deko */
.mark--pillars .face{
  cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-start; text-align:left; padding:8%;
  transition:filter var(--dur-fast) var(--ease);
}

/* Schrift als Gravur. Eine Gravur hat drei Merkmale, die ein Aufdruck nicht hat:
   1. Die Rille ist innen oben links beschattet (das Licht kommt von oben links).
   2. Die untere, äußere Kante der Rille fängt Licht (helle Lippe).
   3. Der Rillengrund ist ein mittlerer Ton des Materials, kein Schwarz.
   Die Punkte 1 und 2 zeichnet der SVG-Filter #gravur (am Anfang von index.html), weil CSS
   allein keinen Schatten im Inneren von Buchstaben kennt. Vorher stand hier fast schwarze
   Schrift mit weißem Rand: Das sah aus wie Aufdruck mit Schlagschatten.
   Kontrast der Füllung auf dem Plättchen gemessen: Notiz im Vault, Projektübersicht. */
.plate-label{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(14px,2.5vw,25px); letter-spacing:-.02em; line-height:1.05;
  color:#5C5249;
  filter:url(#gravur-s);
}
.plate.accent .plate-label{ color:#C9DAE5; filter:url(#gravur-hell-s); }
@media(min-width:900px){
  .plate-label{ filter:url(#gravur); }
  .plate.accent .plate-label{ filter:url(#gravur-hell); }
}
@media(forced-colors:active){
  .plate-label,.plate.accent .plate-label{ filter:none; color:CanvasText; }
}

/* Zustände: Hover hebt an, das gewählte Plättchen tritt nach vorn */
.mark--pillars .face:hover{ filter:brightness(1.06); }
.mark--pillars .face[aria-selected="true"]{
  filter:brightness(1.08);
  box-shadow:0 0 0 2.5px var(--slate), 0 1px 0 rgba(255,255,255,.9) inset;
}
.mark--pillars .plate:has(> .face[aria-selected="true"]){ --lift:calc(var(--mark-size,300px) * .05); }
.mark--pillars .face:focus-visible{ outline:3px solid var(--slate-800); outline-offset:4px; }

/* Panels */
.pillars-panels{ position:relative; }
.panel{ display:flex; flex-direction:column; align-items:flex-start; }
.panel[hidden]{ display:none; }
.panel h3{ font-size:clamp(26px,3.2vw,40px); }
.panel > p{ margin-top:var(--sp-4); font-size:var(--step-lead); color:var(--ink-soft); max-width:40ch; }
.panel ul{ margin-top:var(--sp-6); display:grid; gap:11px; width:100%; max-width:440px; }
.panel li{ display:flex; align-items:flex-start; gap:11px; font-size:16px; color:var(--ink);
  padding-bottom:11px; border-bottom:1px solid var(--line); }
.panel li::before{ content:""; flex:none; width:9px; height:9px; margin-top:7px;
  border-radius:2px; background:var(--slate); }
.panel .btn{ margin-top:var(--sp-8); }

/* ================================================================
   5 — Arbeitsweise
   ================================================================ */
.process{ padding:var(--section-pad) 0; }

/* Verbundener Pfad statt Nummernraster: die Reihenfolge wird gezeigt,
   nicht durchnummeriert. */
.path{ position:relative; }
.path-line{ position:absolute; z-index:0; pointer-events:none; overflow:visible; }
.path-line path{ fill:none; stroke:var(--slate-400); stroke-width:2;
  stroke-linecap:round; opacity:.85; }
.invert .path-line path{ stroke:var(--slate-300); opacity:.6; }
/* Enden weich auslaufen lassen — die Linie soll nicht abrupt abbrechen.
   Nach „Betreuung" trägt das auch inhaltlich: die Begleitung endet nicht. */
.path-line--h{ display:none; left:0; right:0; top:6px; height:120px;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 76%,transparent 97%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 76%,transparent 97%); }
.path-line--v{ left:13px; top:0; bottom:0; width:60px;
  mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 82%,transparent 99%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 82%,transparent 99%); }

.steps{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--sp-12); }
.step{ padding-left:62px; position:relative; }
/* Knotenpunkt im Markenduktus: kleines Quadrat, keine Zahl */
.step-node{ position:absolute; left:14px; top:9px; width:15px; height:15px; border-radius:3px;
  background:var(--slate); box-shadow:0 0 0 5px var(--paper); }
.invert .step-node{ background:var(--slate-100); box-shadow:0 0 0 5px var(--paper); }
.step h3{ font-size:var(--step-h3); }
.step p{ margin-top:10px; font-size:15.5px; color:var(--ink-soft); max-width:32ch; }

/* ================================================================
   6 — Über MORISI
   ================================================================ */
.about{ padding:var(--section-pad) 0; background:var(--surface); }
.about-grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,56px); align-items:center; }
.about h2{ font-size:var(--step-h2); max-width:16ch; }
.about p{ margin-top:var(--sp-6); font-size:var(--step-lead); color:var(--ink-soft); max-width:46ch; }
/* ink-soft statt ink-faint: auf der dunkleren surface-Fläche
   erreicht ink-faint nur 4,07:1 und verfehlt damit AA. */
.about .placeholder{ margin-top:var(--sp-6); font-size:13.5px; color:var(--ink-soft);
  padding:12px 16px; border:1px dashed var(--line); border-radius:var(--radius);
  display:inline-block; }
/* Bild im Abschnitt Über uns (erzeugt, nicht fotografiert; Stand 2026-10-07 bewusst ohne Hinweis) */
.workspace{ margin:0; }
.workspace img{ display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -34px rgba(29,26,24,.45), 0 0 0 1px rgba(29,26,24,.06); }
.workspace figcaption{ margin-top:12px; font-size:13px; color:var(--ink-soft); }

/* ================================================================
   7 — Referenz
   ================================================================ */
.ref{ padding:var(--section-pad) 0; overflow:hidden; }
.ref h2{ font-size:var(--step-h2); max-width:16ch; }

/* --- Musterentwürfe: echte Seiten im Browserrahmen, nicht Bilder --- */
.shots{ --shot-gap:clamp(28px,3.4vw,40px);
  display:grid; grid-template-columns:1fr; gap:var(--shot-gap); }
/* Der Rahmen muss als eigenes Gerät lesbar sein, sonst schwebt nur die helle
   Demoseite im Nichts. Vorher hatte die Chrome-Leiste exakt dieselbe Farbe wie
   dieser Abschnitt (--slate-800 auf --slate-800, also 1,00:1) und die Rahmenlinie
   nur 1,57:1 — der Kasten war optisch gar nicht vorhanden. */
.shot-frame{ border-radius:var(--radius-lg); overflow:hidden; background:var(--slate-900);
  border:1px solid var(--frame-line);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.7);
  /* Bewusst ohne border-color im Übergang: die Kantenfarbe schaltet hart um.
     Bleibt eine Animation hängen — gedrosselter Tab, eingefrorene Uhr —, zeigt
     der Rahmen sonst dauerhaft die falsche Farbe. */
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.shot-chrome{ display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--chrome); border-bottom:1px solid var(--frame-line); }
.shot-chrome .dot{ width:9px; height:9px; border-radius:50%; background:var(--slate-300); opacity:.5; }
.shot-url{ margin-left:9px; font-size:11.5px; color:var(--slate-100);
  background:rgba(0,0,0,.30); padding:4px 11px; border-radius:999px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Die ganze Kachel ist der Link — deshalb darf sie sich auch anheben.
   Vorher hob sie sich an, ohne klickbar zu sein: ein Versprechen ohne Deckung. */
.shot-link{ display:block; color:inherit; text-decoration:none; }
.shot-link:hover .shot-frame,
.shot-link:focus-visible .shot-frame{ transform:translateY(-4px);
  border-color:var(--frame-line-hover);
  box-shadow:0 34px 64px -26px rgba(0,0,0,.8); }
.shot-link:focus-visible{ outline:2px solid var(--slate-300); outline-offset:6px;
  border-radius:var(--radius-lg); }

/* Miniatur: die Demo-Seite wird live skaliert eingebettet */
.shot-view{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--slate-900); }
.shot-view iframe{ position:absolute; top:0; left:0; border:0;
  width:1440px; height:900px; transform-origin:0 0;
  transform:scale(var(--shot-scale,.28)); pointer-events:none; }

.shot-meta h3{ margin-top:var(--sp-6); font-size:var(--step-h3); }
.shot-meta p{ margin-top:8px; font-size:15.5px; color:var(--ink-soft); }

.shots-note{ margin-top:clamp(36px,4.4vw,56px); font-size:var(--step-small);
  color:var(--ink-soft); max-width:62ch; }

/* ================================================================
   8 — Kontakt
   ================================================================ */
.contact{ padding:var(--section-pad) 0; background:var(--slate-100); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,60px); align-items:start; }
.contact h2{ font-size:var(--step-h2); max-width:14ch; }
.contact .lead{ margin-top:var(--sp-6); font-size:var(--step-lead); color:var(--ink-soft); max-width:36ch; }
.form{ background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,38px); }
.field{ margin-bottom:var(--sp-6); }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.field input,.field textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; resize:vertical;
  transition:border-color var(--dur-fast) var(--ease); }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--slate); }
.field select{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background-color:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:13px 42px 13px 15px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%2333556B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center;
  transition:border-color var(--dur-fast) var(--ease); }
.field select:invalid{ color:var(--ink-faint); }
.field [aria-invalid="true"]{ border-color:#9A3B22; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0 var(--sp-4); }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
/* Freiwillige Angaben: eingeklappt, damit das Formular kurz wirkt */
.more{ border-top:1px solid var(--line); margin-top:var(--sp-2); padding-top:var(--sp-4); }
.more summary{ cursor:pointer; font-size:15px; font-weight:600; color:var(--slate); list-style:none;
  display:inline-flex; align-items:center; gap:10px; padding:6px 0; }
.more summary::-webkit-details-marker{ display:none; }
.more summary::before{ content:""; width:9px; height:9px; border-right:2px solid var(--slate); border-bottom:2px solid var(--slate);
  transform:rotate(-45deg); transition:transform var(--dur-fast) var(--ease); }
.more[open] summary::before{ transform:rotate(45deg); }
.more summary span{ font-weight:400; color:var(--ink-faint); }
.more summary:focus-visible{ outline:2px solid var(--slate); outline-offset:4px; border-radius:4px; }
.more-body{ margin-top:var(--sp-5); }
.field-hp{ position:absolute; left:-9999px; }
.form-foot{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-6); }
.form-status{ font-size:14px; color:var(--slate); }
.form-status[hidden]{ display:none; }
.form-note{ margin-top:var(--sp-4); font-size:13.5px; color:var(--ink-faint); }
.form-note a{ color:var(--slate); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ================================================================
   9 — Footer
   ================================================================ */
.foot{ background:var(--slate-900); color:var(--slate-300); padding:var(--sp-12) 0; }
.foot .inner{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-4); }
.foot .brand{ color:var(--slate-100); font-size:16px; }
.foot .brand-glyph rect{ fill:var(--slate-100); }
.foot .brand-glyph rect.a{ fill:var(--slate-350); }
.foot-links{ display:flex; gap:var(--sp-6); font-size:14px; }
.foot-links a{ transition:color var(--dur-fast) var(--ease); }
.foot-links a:hover{ color:var(--slate-100); }

/* ================================================================
   Rechtsseiten
   ================================================================ */
.legal{ padding:clamp(128px,15vw,180px) 0 var(--section-pad); }
.legal .inner{ max-width:800px; }
.legal h1{ font-size:var(--step-h2); }
.legal h2{ font-size:var(--step-h3); margin-top:var(--sp-12); }
.legal h3{ font-size:17px; margin-top:var(--sp-8); }
.legal p, .legal li{ margin-top:var(--sp-4); color:var(--ink-soft); }
.legal ul{ margin-top:var(--sp-4); padding-left:22px; list-style:disc; }
.legal li{ margin-top:8px; }
.legal a{ color:var(--slate); text-decoration:underline; text-underline-offset:3px; }
.legal .lead{ font-size:var(--step-lead); margin-top:var(--sp-6); }
.legal address{ font-style:normal; margin-top:var(--sp-4); color:var(--ink); line-height:1.9; }
/* Auszufüllende Angaben deutlich markieren, damit nichts vergessen wird */
.fill{ background:var(--slate-100); color:var(--slate); font-weight:600;
  padding:2px 8px; border-radius:4px; border:1px dashed var(--slate-400); }
.legal-note{ margin-top:var(--sp-8); padding:var(--sp-6); border-radius:var(--radius-lg);
  background:var(--surface); border:1px dashed var(--line); }
.legal-note strong{ color:var(--ink); }

/* ================================================================
   Reveal
   ================================================================ */
/* Standard: sichtbar. Erst wenn JS läuft, wird versteckt und eingeblendet —
   sonst wäre die ganze Seite leer, falls das Script nicht lädt. */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s; } .d2{ transition-delay:.18s; }
.d3{ transition-delay:.28s; } .d4{ transition-delay:.40s; }

/* ================================================================
   Responsive
   ================================================================ */
@media(min-width:620px){
  .cta-long{ display:inline; }
  .cta-short{ display:none; }
}
@media(max-width:699px){
  /* Zeichen zuerst, damit die Marke ueber dem Falz steht */
  .hero .inner{ gap:34px; }
  .hero-mark{ order:-1; justify-content:flex-start; }
}
@media(min-width:760px){
  .shots{ grid-template-columns:repeat(2,1fr); }
  /* Bleibt in der letzten Reihe eine Karte allein, steht sie mittig statt links.
     Greift von selbst nur bei ungerader Anzahl — bei sechs Karten passiert nichts. */
  .shot:last-child:nth-child(2n+1){
    grid-column:1 / -1; width:calc(50% - var(--shot-gap) / 2); margin-inline:auto; }
}
@media(min-width:1080px){
  .shots{ grid-template-columns:repeat(3,1fr); }
  /* Bei drei Spalten gilt die Zweispaltenregel nicht mehr — zuruecksetzen */
  .shot:last-child:nth-child(2n+1){ grid-column:auto; width:auto; margin-inline:0; }
  .shot:last-child:nth-child(3n+1){ grid-column:2; }
}
@media(min-width:900px){
  .nav-links{ display:flex; }
  .about-grid{ grid-template-columns:1.25fr .75fr; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .pillars-grid{ grid-template-columns:.92fr 1.08fr; }
}
@media(min-width:1080px){
  .hero .inner{ grid-template-columns:1.02fr .98fr; }

  /* Waagerechter Pfad, Schritte versetzt darauf — kein gleichförmiges Raster */
  .path{ padding-top:132px; }
  .path-line--h{ display:block; }
  .path-line--v{ display:none; }
  .steps{ grid-template-columns:repeat(4,1fr); gap:var(--sp-6); }
  .step{ padding-left:0; }
  .step-node{ left:0; top:-46px; }
  /* Versatz entsprechend dem Verlauf der Linie */
  .steps > .step:nth-child(1){ margin-top:0; }
  .steps > .step:nth-child(2){ margin-top:-58px; }
  .steps > .step:nth-child(3){ margin-top:0; }
  .steps > .step:nth-child(4){ margin-top:-58px; }
  .steps > .step:nth-child(2) .step-node,
  .steps > .step:nth-child(4) .step-node{ top:-46px; }
}

/* Linie zeichnet sich beim Hereinscrollen selbst */
.path-line path{ transition:stroke-dashoffset 1.4s var(--ease); }

@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .path-line path{ transition:none; stroke-dashoffset:0 !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .mark{ animation:none; }
  .plate>*,.flip>*{ opacity:1 !important; animation:none !important; }
  .plate{ transform:translate3d(0,0,var(--z)); }
  .mark.is-built .plate,
  .mark.is-done .plate{ animation:none; transform:translate3d(0,0,var(--z)); }
  .btn{ transition:none; }
}

/* ================================================================
   Unterseiten der Leistungen (website, bausteine, ablaeufe, gefunden-werden)
   ================================================================ */
.page{ padding:clamp(128px,15vw,180px) 0 var(--section-pad); }
.page .inner{ max-width:920px; }
.crumb{ font-size:14.5px; color:var(--ink-soft); }
.crumb a:hover{ color:var(--ink); }
.page h1{ margin-top:var(--sp-6); font-size:var(--step-h2); line-height:1.08; max-width:20ch; }
.page .lead{ margin-top:var(--sp-6); font-size:var(--step-lead); color:var(--ink-soft); max-width:52ch; }
.rows{ margin-top:clamp(36px,5vw,64px); border-bottom:1px solid var(--line); }
.row{ display:grid; grid-template-columns:1fr; gap:8px 40px;
  padding:clamp(20px,2.6vw,30px) 0; border-top:1px solid var(--line); }
.row h2{ font-size:var(--step-h3); }
.row p{ color:var(--ink-soft); max-width:56ch; }
.page-note{ margin-top:var(--sp-8); padding:var(--sp-6); border-radius:var(--radius-lg);
  background:var(--surface); max-width:62ch; color:var(--ink-soft); }
.page-note strong{ color:var(--ink); }
.page-more{ margin-top:clamp(36px,5vw,56px); }
.page-more h2{ font-size:var(--step-h3); }
.page-more ul{ margin-top:var(--sp-4); display:grid; gap:12px; list-style:none; padding:0; }
.page-more li span{ color:var(--ink-soft); }
.page-more a{ color:var(--slate); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.page-more a:hover{ color:var(--slate-800); }
.page-cta{ margin-top:clamp(44px,6vw,80px); padding-top:clamp(28px,4vw,44px); border-top:1px solid var(--line); }
.page-cta h2{ font-size:var(--step-h2); max-width:18ch; }
.page-cta p{ margin-top:var(--sp-4); color:var(--ink-soft); }
.page-cta .btn{ margin-top:var(--sp-6); }
@media(min-width:800px){ .row{ grid-template-columns:.8fr 1.2fr; } }

/* Verweis von der Kachel zur Unterseite */
.panel-more{ margin-top:var(--sp-4); font-size:15px; font-weight:600; color:var(--slate);
  text-decoration:underline; text-underline-offset:3px; }
.panel-more:hover{ color:var(--slate-800); }

/* Überschriften brechen ausgewogen um, damit kein einzelnes Wort allein in der letzten Zeile steht */
h1,h2,h3{ text-wrap:balance; }

/* Sehr kleine Telefone (unter 360 px): etwas kleiner, damit "Terminbuchung ist." in eine Zeile passt */
@media(max-width:359px){ .hero h1{ font-size:30px; } }