/* ============================================================
   seitmorgen. v2  —  Teil 1: Tokens, Basis, Header, Kante
   Grundlage: design_handoff_seitmorgen_website (verbindlich)
   ============================================================ */

/* --- Schriften, selbst gehostet (Webflow-CDN), kein Google-Fonts-Aufruf --- */
@font-face{font-family:'Schibsted Grotesk';src:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ac6cfbeb1851c8974bd110c_sm-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Schibsted Grotesk';src:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ac6cfbe83484570c8e5f18b_sm-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Schibsted Grotesk';src:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ac6cfbe0a3b6c93ba3d028a_sm-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ac6cfbf834d2c48b3e19acb_sm-newsreader-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'DM Mono';src:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ac6cfbfb1851c8974bd119d_sm-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --sm-black:#111111;
  --sm-cream:#F1EDE2;
  --sm-violet:#5A4A8C;
  --sm-coral:#E48A82;
  --sm-teal:#3D8F87;
  --sm-muted-on-cream:#57534B;
  --sm-muted-on-dark:#A6A29A;
  --sm-rule-on-cream:rgba(17,17,17,0.18);
  --sm-rule-on-dark:rgba(241,237,226,0.2);
  --sm-ink-on-violet:#F1EDE2;
  --sm-ink-on-coral:#111111;
  --sm-ink-on-teal:#111111;
  --sm-sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sm-serif:'Newsreader',Georgia,serif;
  --sm-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --sm-max:1440px;
  --sm-gutter:clamp(20px,4vw,56px);
  --sm-kante-h:clamp(84px,11vw,168px);
  --sm-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --sm-ease-soft:cubic-bezier(.2,.7,.2,1);
  --sm-sec-y:clamp(80px,13vh,150px);
  --sm-nav-h:63px;          /* gemessene Hoehe der Kopfleiste, fuer den Sprungabstand */
}

/* --- Reset, nur innerhalb von body (Spezifitaet 0, damit Klassen gewinnen) --- */
:where(body h1,body h2,body h3,body h4,body p,body ul,body ol,body li,body figure,body dl,body dt,body dd,body blockquote){margin:0;padding:0;font-weight:400;}
:where(body ul,body ol){list-style:none;}
body *,body *::before,body *::after{box-sizing:border-box;}
body{font-family:var(--sm-sans);color:var(--sm-black);background:var(--sm-cream);-webkit-font-smoothing:antialiased;}
body img,body video{display:block;max-width:100%;}
body a{color:inherit;text-decoration:none;}
body a:hover{text-decoration:underline;text-underline-offset:4px;}
/* Webflow setzt im eigenen Stylesheet a:hover{color:#C1330C} mit der
   Spezifitaet (0,1,1) und schlug damit body a{color:inherit} (0,0,2):
   jeder Verweis ohne eigene Hover-Farbe sprang beim Darueberfahren auf
   ein Orangerot, das nicht zur Palette gehoert (Menue, Magazin-Karten,
   Leistungszeilen, Fusszeile). Dieselbe Spezifitaet, spaeter geladen,
   deshalb gewinnt die Regel. Sie steht bewusst hier ganz vorn: alle
   Stellen mit eigener Hover-Farbe (.sm-kon-a, .sm-social-a, .sm-foot-links,
   .sm-legal) stehen in spaeteren Teilen und bleiben unberuehrt. */
a:hover{color:inherit;}
body button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;}
body ::selection{background:var(--sm-coral);color:var(--sm-black);}
body :focus-visible{outline:2px solid currentColor;outline-offset:3px;}

.sm-wrap{max-width:var(--sm-max);margin:0 auto;padding-inline:var(--sm-gutter);}
.sm-mono{font-family:var(--sm-mono);font-size:12px;font-weight:400;letter-spacing:0;}
.sm-mono--sm{font-size:11px;}
.sm-em{font-family:var(--sm-serif);font-style:italic;font-weight:300;letter-spacing:-.02em;}
.sm-dark{background:var(--sm-black);color:var(--sm-cream);}
.sm-dark .sm-mono{color:var(--sm-muted-on-dark);}
.sm-cream{background:var(--sm-cream);color:var(--sm-black);}
.sm-cream .sm-mono{color:var(--sm-muted-on-cream);}
.sm-sec{padding-block:var(--sm-sec-y);}

/* Abschnittskopf: 1,5 px Unterkante */
.sm-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 28px;padding-bottom:12px;border-bottom:1.5px solid var(--sm-black);}
.sm-dark .sm-head{border-bottom-color:var(--sm-cream);}
.sm-head h2{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.08;}
/* Kopf mit Dachzeile ueber der Ueberschrift. Die Dachzeile ist die
   erste Grundlinie der Spalte, deshalb steht sie in einer Zeile mit
   der Zaehlung rechts. */
.sm-head-st{display:flex;flex-direction:column;gap:10px;min-width:0;}
.sm-head--thin{border-bottom-width:1px;border-bottom-color:var(--sm-rule-on-cream);padding-bottom:14px;}
.sm-head--thin h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;}

/* ============================ Header ============================ */
.sm-nav{position:sticky;top:0;z-index:30;background:var(--sm-cream);border-bottom:1px solid var(--sm-rule-on-cream);}
.sm-nav-in{max-width:var(--sm-max);margin:0 auto;padding:18px var(--sm-gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;}
.sm-logo{font-size:21px;font-weight:600;letter-spacing:-.035em;line-height:1;display:inline-flex;align-items:baseline;}
.sm-logo:hover{text-decoration:none;}
.sm-dot{display:inline-block;width:.24em;height:.24em;margin-left:.05em;border-radius:50%;background:var(--sm-acc,var(--sm-coral));transition:background-color 1.2s ease;}
/* Logo im Kopf (15.10.2026, Variante A "Nach vorn"): beim Ueberfahren rueckt
   der Punkt ein Stueck vom Wort weg, beim Klick federt er ein und gibt einen
   Ring ab. Bewegt wird nur der Punkt, seine Farbe bleibt Sache der Seite bzw.
   von farbwechsel() auf der Startseite. Der Ring erbt sie ueber
   background:inherit, auch mitten im Farbwechsel. Nur der Kopf (.sm-nav),
   nicht das Logo der Projektansicht und nicht die Fusszeile. */
.sm-nav .sm-logo .sm-dot{position:relative;transition:background-color 1.2s ease,translate .7s var(--sm-ease-soft);}
.sm-nav .sm-logo .sm-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;pointer-events:none;}
@media (hover:hover){.sm-nav .sm-logo:hover .sm-dot{translate:.34em 0;transition:background-color 1.2s ease,translate .5s var(--sm-ease-soft);}}
.sm-nav .sm-logo.is-tap .sm-dot{animation:sm-dot-press .42s var(--sm-ease-soft);}
.sm-nav .sm-logo.is-tap .sm-dot::after{animation:sm-dot-ring .7s cubic-bezier(.2,.7,.2,1);}
@keyframes sm-dot-press{0%{scale:1}30%{scale:.55}70%{scale:1.15}100%{scale:1}}
@keyframes sm-dot-ring{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
/* Auf Geraeten ohne Mauszeiger (Handy, Tablet) gibt es kein Ueberfahren,
   also eine eigene Folge beim Antippen (Kundenwunsch 28.10.2026, seit
   sm2-63): der Punkt gleitet erst so weit nach rechts wie beim Ueberfahren
   am Rechner (0,32 s), federt dort ein und gibt denselben Ring ab wie am
   Rechner (Federn 0,42 s, Ring 0,7 s, beide ab 0,32 s), dann gleitet er
   zurueck. 1,4 s gesamt; das Skript wechselt die Seite nach 840 ms, wenn
   der Ring schon weit offen ist. Der Ring sitzt im Punkt und gleitet mit. */
@media (hover:none){
  .sm-nav .sm-logo.is-tap .sm-dot{animation:sm-dot-tipp 1.4s linear;}
  .sm-nav .sm-logo.is-tap .sm-dot::after{animation:sm-dot-ring .7s cubic-bezier(.2,.7,.2,1) .32s;}
}
@keyframes sm-dot-tipp{
  0%{translate:0 0;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
  23%{translate:.34em 0;}
  75%{translate:.34em 0;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
  100%{translate:0 0;}
  0%,23%{scale:1;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
  32%{scale:.55;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
  44%{scale:1.15;animation-timing-function:cubic-bezier(.2,.7,.2,1);}
  53%,100%{scale:1;}
}
@media (prefers-reduced-motion:reduce){
  .sm-nav .sm-logo .sm-dot,.sm-nav .sm-logo:hover .sm-dot{translate:none;transition:background-color 1.2s ease;}
  .sm-nav .sm-logo.is-tap .sm-dot,.sm-nav .sm-logo.is-tap .sm-dot::after{animation:none;}
}
/* Hauptmenue: alle Bereiche in einer Zeile, keine Klappe mehr */
.sm-menu{display:flex;align-items:center;gap:clamp(13px,1.5vw,24px);font-size:14px;}
.sm-menu a{display:flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity .25s;}
.sm-menu a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sm-black);flex:none;}
.sm-menu a:hover{text-decoration:none;opacity:.55;}
.sm-menu-cut{flex:none;width:1px;height:15px;background:rgba(17,17,17,.22);}
.sm-burger{display:none;width:26px;height:16px;position:relative;}
.sm-burger span{position:absolute;left:0;right:0;height:1.5px;background:var(--sm-black);transition:transform .4s var(--sm-ease-soft),opacity .2s;}
.sm-burger span:nth-child(1){top:0;}
.sm-burger span:nth-child(2){bottom:0;}
.sm-open .sm-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sm-open .sm-burger span:nth-child(2){transform:translateY(-7px) rotate(-45deg);}

/* Overlay-Menue (mobil) */
/* Der Inhalt steht in .sm-ov-in, damit er mit margin-block:auto mittig
   sitzt und trotzdem scrollbar bleibt: ein Telefon im Querformat ist
   niedriger als das Menue hoch ist. justify-content:center kann das
   nicht: bei zu wenig Platz zentriert es den Ueberhang mit und
   schiebt die obersten Punkte aus dem Bild, wo keine Rollbewegung
   mehr hinkommt. margin-block:auto zentriert genauso, wird bei
   Platzmangel aber zu null, und dann laesst sich alles erreichen. */
.sm-ov{position:fixed;inset:0;z-index:29;background:var(--sm-black);color:var(--sm-cream);display:flex;flex-direction:column;padding:96px var(--sm-gutter) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--sm-ease-soft);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;}
.sm-ov-in{display:flex;flex-direction:column;margin-block:auto;}
.sm-open .sm-ov{clip-path:inset(0 0 0 0);visibility:visible;}
.sm-ov a{display:block;font-size:clamp(25px,6.4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.18;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0)*45ms + .12s);}
.sm-open .sm-ov a{opacity:1;transform:none;}
/* Dieselbe Trennung wie in der breiten Leiste, nur gedreht: dort steht die
   Haarlinie senkrecht zwischen zwei Punkten, hier waagerecht zwischen zwei
   Gruppen, also zwischen den fuenf Bereichen und Home, Arbeiten, Kontakt.
   Bewusst kurz gehalten und nicht ueber die ganze Breite, damit sie wie
   die Linie in der Leiste als Zeichen liest und nicht als Kasten.
   Sie blendet in derselben Staffel ein wie die Punkte davor und danach. */
.sm-ov-cut{flex:none;width:clamp(56px,20vw,110px);height:1.5px;background:var(--sm-rule-on-dark);margin:clamp(16px,2.6vh,26px) 0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0)*45ms + .12s);}
.sm-open .sm-ov-cut{opacity:1;transform:none;}
.sm-ov-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:8px 26px;}
/* Instagram und LinkedIn am Fuss des schmalen Menues. Dieselben Links wie
   in der Fusszeile, also derselbe Baustein .sm-social; die beiden Regeln
   hier sind zwei Klassen tief, weil .sm-ov a (0,1,1) sonst die Menueschrift
   und display:block durchsetzt, und weil .sm-social seine eigenen Abstaende
   fuer die Fusszeile mitbringt. Die Einblend-Staffel erben sie von .sm-ov a,
   darum tragen sie --i:8 und --i:9 und kommen als Letzte. */
.sm-ov .sm-ov-social{margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(16px,2.2vh,22px);}
.sm-ov .sm-social-a{display:inline-flex;min-height:44px;font-size:12px;font-weight:400;letter-spacing:0;line-height:1.2;}

/* ============================ Kante ============================ */
/* Die mittlere Spalte bekommt ihre Breite ausgerechnet, nicht aus dem
   Seitenverhaeltnis des SVG. Mit `auto` muss der Browser die Breite einer
   Grafik bestimmen, deren Hoehe wiederum an der Zeile haengt; manche
   Browser loesen diese Schleife mit der Standardbreite 300 px auf. Dann
   wird die Kante breiter als das Fenster, die Seite laesst sich zur Seite
   schieben und der Punkt rutscht rechts aus dem Bild.
   283,87 / 118,88 = 2,38788. */
.sm-kante{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--sm-kante-h)*2.38788) clamp(150px,26vw,420px);height:var(--sm-kante-h);background:var(--sm-black);--top:var(--sm-teal);--dot:var(--sm-cream);}
.sm-kante-l{position:relative;margin-right:-1px;background:var(--top);transition:background-color 1.2s ease;}
.sm-kante-c{position:relative;z-index:1;display:block;height:100%;width:calc(var(--sm-kante-h)*2.38788);aspect-ratio:283.87/118.88;overflow:visible;}
/* Die Farbflaeche reicht im Markup 3 Einheiten ueber die viewBox hinaus,
   nach oben in den Auftakt und nach links in die linke Spalte, beides
   dieselbe Farbe (das SVG hat overflow:visible). Dadurch liegt ihre
   Oberkante nicht mehr genau auf der Oberkante des schwarzen Rechtecks;
   bei krummer Skalierung zeichnete Safari dort sonst eine dunkle Haarlinie
   quer durch die Farbe. Die Kurve selbst ist unveraendert.
   Pfad: M-3 -3H283.87V0 A... 0 118.88H-3Z
   Bis sm2-41 stand an dieser Stelle ein gleichfarbiger Strich am Pfad. Ein
   Strich liegt aber mittig auf der Kante und waechst auch nach innen: kurz
   vor der Spitze lag darunter schon Schwarz, die Kurve wurde eine Einheit
   unter der Oberkante abgeschnitten und stand an der Nahtstelle eine Stufe
   tief gegen die rechte Spalte. Auf der unteren Kante ohne Cremestrich war
   das dauerhaft zu sehen. Darum hier nie wieder einen Strich, nur Flaeche.
   Der Attributselektor haelt den alten Strich fuer Seiten, deren Markup
   noch die alte Pfadform hat (KI Content bleibt unangetastet). */
.sm-kante-c .sm-fill{fill:var(--top);transition:fill 1.2s ease;}
.sm-kante-c .sm-fill[d^="M0 0H"]{stroke:var(--top);stroke-width:2;stroke-dasharray:283.87 314.34 120 10000;transition:fill 1.2s ease,stroke 1.2s ease;}
/* Runde Enden am cremefarbenen Strich: die Kurve greift dadurch eine halbe
   Strichbreite in die geraden Striche links und rechts hinein, statt stumpf
   gegen sie zu stossen. Im Ruhezustand liegen die Rundungen vollstaendig in
   den beiden Balken, sind also unsichtbar; sie schliessen aber jede Fuge an
   der Nahtstelle, auch bei krummer Skalierung. Beim Zeichnen hat die Linie
   damit eine runde Spitze statt einer senkrechten Abbruchkante. */
.sm-kante-c .sm-stroke{stroke-linecap:round;}
/* Die rechte Spalte greift wie die linke um ein Pixel in die Grafik
   hinein, sonst steht an der Nahtstelle eine feine Fuge. */
.sm-kante-r{position:relative;margin-left:-1px;}
.sm-kante-line{position:absolute;left:0;right:0;height:calc(var(--sm-kante-h)*.1861);background:var(--sm-cream);z-index:2;}
.sm-kante-l .sm-kante-line{bottom:calc(var(--sm-kante-h)*-.093);}
.sm-kante-r .sm-kante-line{top:calc(var(--sm-kante-h)*-.093);}
.sm-kante-dot{position:absolute;z-index:2;border-radius:50%;background:var(--dot);left:calc(var(--sm-kante-h)*.1645);bottom:calc(var(--sm-kante-h)*-.2137);width:calc(var(--sm-kante-h)*.4275);height:calc(var(--sm-kante-h)*.4275);}
.sm-kante--b{--top:var(--sm-cream);--dot:var(--sm-coral);}
/* Auf schmalen Geraeten nahm die Kurve ueber die Haelfte der Breite ein und
   links blieb kaum Farbe stehen. Unter 560 px wird die Kante flacher und die
   rechte Spalte schmaler; bei genau 560 px treffen sich beide Rechnungen,
   der Uebergang ist also stufenlos. */
@media (max-width:560px){
  .sm-kante{--sm-kante-h:clamp(62px,19vw,84px);grid-template-columns:minmax(0,1fr) calc(var(--sm-kante-h)*2.38788) clamp(92px,28vw,150px);}
}
.sm-kante--b .sm-kante-line,.sm-kante--b .sm-stroke{display:none;}

/* ======================= Showreel: der Punkt oeffnet =======================
   Der Punkt in der oberen Kante ist jetzt ein Knopf. Groesse, Lage, Farbe und
   der Auftakt bleiben unveraendert: die Regeln oben greifen weiter, weil die
   Klasse `.sm-kante-dot` bleibt, nur das Element ist ein <button> geworden.
   Dazu kommen das Dreieck darin und die Beschriftung daneben (mobil darunter).
   Beim Darueberfahren nimmt das Dreieck die aktuelle Kopffarbe an; die steht
   als --top ohnehin an der Kante und wird vom Skript mitgedreht. */
.sm-reel{display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none;}
.sm-reel-i{width:0;height:0;border-style:solid;
  border-width:calc(var(--sm-kante-h)*.075) 0 calc(var(--sm-kante-h)*.075) calc(var(--sm-kante-h)*.1167);
  border-color:transparent transparent transparent var(--sm-black);
  transform:translateX(14%);
  transition:border-left-color .4s ease;}
.sm-reel:hover .sm-reel-i,.sm-reel:focus-visible .sm-reel-i{border-left-color:var(--top,var(--sm-teal));}
/* Auf dem Telefon ist der Punkt rund 36 px breit. Die unsichtbare Flaeche
   darunter bringt ihn auf die 44 px, die ein Daumen braucht. */
.sm-reel::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);border-radius:50%;}
.sm-reel-t{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);
  font-family:var(--sm-mono);font-size:12px;color:var(--sm-cream);white-space:nowrap;pointer-events:none;}
@media (max-width:767px){
  .sm-reel-t{left:50%;top:calc(100% + 11px);transform:translateX(-50%);font-size:11px;}
}

/* Der Player. Liegt ueber allem, waechst als Kreis aus dem Punkt heraus.
   Das Video haengt erst nach dem Klick an seiner Quelle, die Startseite
   laedt also keine zwei Megabyte auf Verdacht. */
.sm-reel-ov{position:fixed;inset:0;z-index:60;background:var(--sm-black);color:var(--sm-cream);
  display:flex;flex-direction:column;
  clip-path:circle(0 at var(--cx,50%) var(--cy,50%));
  transition:clip-path .75s cubic-bezier(.7,0,.2,1);}
.sm-reel-ov[hidden]{display:none;}
.sm-reel-ov.sm-reel--auf{clip-path:circle(150% at var(--cx,50%) var(--cy,50%));}
.sm-reel-bar{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px var(--sm-gutter);font-family:var(--sm-mono);font-size:12px;}
.sm-reel-acts{display:flex;gap:clamp(18px,3vw,32px);}
.sm-reel-acts button{font-family:var(--sm-mono);font-size:12px;color:var(--sm-cream);cursor:pointer;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s;}
.sm-reel-acts button:hover{border-bottom-color:var(--sm-cream);}
.sm-reel-b{flex:1;min-height:0;display:grid;place-items:center;
  padding:0 var(--sm-gutter) clamp(22px,5vh,48px);}
.sm-reel-f{aspect-ratio:4/3;background:#000;overflow:hidden;
  width:min(100%,calc((100vh - 130px)*4/3));
  width:min(100%,calc((100svh - 130px)*4/3));}
.sm-reel-f video{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:767px){
  /* Auf dem Telefon laeuft das Video von Rand zu Rand, sonst bleibt vom
     4:3-Bild zu wenig uebrig. */
  .sm-reel-b{padding:0 0 clamp(22px,5vh,48px);}
}
@media (max-width:559px){
  .sm-reel-k{display:none;}
  .sm-reel-bar{padding:16px var(--sm-gutter);}
}
/* Wer Bewegung abbestellt hat, bekommt statt des Kreises eine ruhige Blende. */
@media (prefers-reduced-motion:reduce){
  .sm-reel-ov{clip-path:none;opacity:0;transition:opacity .2s linear;}
  .sm-reel-ov.sm-reel--auf{opacity:1;}
  .sm-reel-i{transition:none;}
}
/* ============ Teil 2: Auftakt, Arbeiten, Wie wir arbeiten ============ */

/* Auftakt / Hero */
.sm-hero{background:var(--sm-acc,var(--sm-teal));color:var(--sm-ink,var(--sm-black));transition:background-color 1.2s ease,color 1.2s ease;}
.sm-hero-in{max-width:var(--sm-max);margin:0 auto;padding:clamp(56px,11vh,130px) var(--sm-gutter) clamp(40px,7vh,72px);}
.sm-hero-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-family:var(--sm-mono);font-size:12px;}
.sm-hero h1,.sm-hero .sm-hero-t{margin-top:28px;font-size:clamp(42px,7vw,116px);font-weight:500;letter-spacing:-.035em;line-height:.98;max-width:15ch;text-wrap:balance;}
/* Seit sm2-51 (SEO): die Dachzeile ist die h1 mit Suchbegriff, der Slogan ein p.sm-hero-t.
   Webflow gibt h1 einen Abstand nach unten (0,3em, am Telefon 0,5em), p nicht: hier nachgezogen. */
.sm-hero .sm-hero-t{margin-bottom:var(--_typography---h1-heading--h1-margin-bottom,.3em);}
.sm-hero--sub h1{font-size:clamp(40px,6.4vw,104px);line-height:1;max-width:16ch;}
.sm-hero--case h1{font-size:clamp(52px,9vw,148px);line-height:.92;letter-spacing:-.045em;max-width:none;}
.sm-hero-sub{max-width:34ch;margin-top:22px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;}

/* Dunkler Absatz direkt unter der Kante */
.sm-intro-in{max-width:var(--sm-max);margin:0 auto;padding:clamp(64px,10vh,112px) var(--sm-gutter) clamp(56px,9vh,100px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px clamp(32px,5vw,80px);align-items:end;}
.sm-lead{max-width:38ch;font-size:clamp(18px,1.6vw,22px);line-height:1.5;text-wrap:pretty;}
/* Startseite: Farbfeld, Kante und dunkle Einleitung fuellen zusammen genau
   einen Bildschirm unter der Kopfleiste, wie der Kopf der Leistungsseiten
   (.sm-kopf in 03_case.css). Die Arbeiten erscheinen erst beim Scrollen.
   Farbfeld und dunkles Band teilen sich den Rest zu gleichen Teilen, der
   Absatz steht in der Mitte des Bandes. min-height, nicht height: passt der
   Inhalt nicht auf den Bildschirm, waechst der Kopf. svh: auf dem Telefon
   zaehlt die Hoehe mit eingeblendeter Browserleiste. Abgezogen wird die
   Kopfleiste, 58 Pixel bis 1060, darueber 62. */
.sm-kopf-start{display:flex;flex-direction:column;min-height:calc(100vh - 58px);min-height:calc(100svh - 58px);}
.sm-kopf-start>.sm-kante{flex:none;}
.sm-kopf-start>.sm-hero{flex:1 0 auto;}
.sm-kopf-start>.sm-dark{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.sm-kopf-start .sm-intro-in{width:100%;}
@media (min-width:1061px){.sm-kopf-start{min-height:calc(100vh - 62px);min-height:calc(100svh - 62px);}}

/* Arbeiten */
.sm-works{display:flex;flex-direction:column;gap:clamp(72px,12vh,140px);margin-top:clamp(48px,8vh,96px);}
.sm-proj{display:block;cursor:pointer;}
.sm-proj:hover{text-decoration:none;}
.sm-proj--2{width:max(74%,min(100%,560px));align-self:flex-end;}
.sm-proj--3{width:max(74%,min(100%,560px));align-self:flex-start;}
.sm-ph{position:relative;overflow:hidden;background:var(--sm-c,var(--sm-teal));}
.sm-ph--1610{aspect-ratio:16/10;}
.sm-ph--169{aspect-ratio:16/9;}
.sm-ph--43{aspect-ratio:4/3;}
.sm-ph--45{aspect-ratio:4/5;}
.sm-ph--916{aspect-ratio:9/16;}
.sm-ph--11{aspect-ratio:1/1;}
.sm-ph-i{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,var(--sm-stripe,rgba(17,17,17,.09)) 0 1px,transparent 1px 14px);transition:transform 1.1s var(--sm-ease-soft);}
.sm-ph-i img,.sm-ph-i video{width:100%;height:100%;object-fit:cover;}
.sm-ph-l{position:absolute;left:20px;bottom:18px;font-family:var(--sm-mono);font-size:12px;color:var(--sm-i,var(--sm-black));z-index:1;}
.sm-proj:hover .sm-ph-i{transform:scale(1.04);}

/* Stufenzeile */
.sm-stufe{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,32%);align-items:end;margin-top:22px;--l:var(--sm-black);}
.sm-stufe-low{position:relative;padding-bottom:12px;display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);min-width:0;}
.sm-stufe-t{font-size:clamp(26px,3.4vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1;}
.sm-stufe-c{display:block;width:67px;height:28px;overflow:visible;}
.sm-stufe-c path{stroke:var(--l);transition:stroke .35s;}
.sm-stufe-high{position:relative;margin-bottom:28px;padding-bottom:10px;display:flex;justify-content:space-between;gap:12px;font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-cream);}
.sm-stufe-rule{position:absolute;left:0;right:0;bottom:-.75px;height:1.5px;background:var(--l);transition:background-color .35s;}
.sm-stufe-dot{position:absolute;right:0;bottom:-33.5px;width:11px;height:11px;border-radius:50%;background:var(--sm-c,var(--sm-teal));transform:scale(0);transition:transform .4s var(--sm-ease-spring);}
.sm-proj:hover .sm-stufe{--l:var(--sm-c,var(--sm-teal));}
.sm-proj:hover .sm-stufe-dot{transform:scale(1);}

/* Arbeiten als Magazin-Raster (Handoff "Portfolio Magazin", Variante 2a).
   Zwoelf Spalten, fester Rhythmus aus breiten und schmalen Feldern. Welche
   Breite und welches Bildformat ein Feld bekommt, steht in data-slot:
   0 und 3 breit (16:11), 1 und 2 schmal (4:5), 4 ueber die ganze Breite
   (21:9). Die Werte stehen schon im Markup, damit beim Laden nichts rueckt;
   das Skript vergibt sie nur neu, wenn sich die Anzahl der Karten aendert,
   und waehlt dann eine Aufteilung, die immer volle Zeilen ergibt.
   Die Filterzeile der Vorlage braucht die Startseite nicht. */
.sm-mg{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(52px,8vh,72px) clamp(20px,2.4vw,32px);align-items:start;}
.sm-mg-c{position:relative;display:flex;flex-direction:column;gap:18px;grid-column:span 7;}
.sm-mg-c[hidden]{display:none;}
.sm-mg-c[data-slot="1"],.sm-mg-c[data-slot="2"]{grid-column:span 5;}
.sm-mg-c[data-slot="4"]{grid-column:span 12;}
.sm-mg-c:hover{text-decoration:none;}

/* Bild. Der Rahmen traegt die Projektfarbe, dann steht beim Laden keine
   weisse Luecke. Der Zoom beim Zeigen laeuft ueber transform, das
   Hereinkommen beim Scrollen ueber scale (Teil 6): so stoeren sie sich nicht. */
.sm-mg-m{position:relative;overflow:hidden;aspect-ratio:16/11;background:var(--sm-c,var(--sm-teal));}
.sm-mg-c[data-slot="1"] .sm-mg-m,.sm-mg-c[data-slot="2"] .sm-mg-m{aspect-ratio:4/5;}
.sm-mg-c[data-slot="4"] .sm-mg-m{aspect-ratio:21/9;}
.sm-mg-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sm-ease-soft);}
.sm-mg-c:hover .sm-mg-i,.sm-mg-c:focus-visible .sm-mg-i{transform:scale(1.03);}
.sm-mg-n{position:absolute;z-index:1;left:18px;bottom:16px;font-family:var(--sm-mono);font-size:12px;color:var(--sm-ink,var(--sm-cream));
  text-shadow:0 1px 2px rgba(10,10,10,.7),0 0 12px rgba(10,10,10,.6);}
/* Auf hellen Bildstellen (Gegenlicht, Lichtboxen) reicht der Schatten nicht: ein weicher dunkler
   Hof hinter der Notiz haelt sie lesbar, auf dunklen Bildern faellt er nicht auf. */
.sm-mg-n::before{content:"";position:absolute;inset:-14px -24px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,10,10,.55),rgba(10,10,10,0));}

/* Unterschrift: Nummer und Titel links, Leistung rechts, darunter die Linie
   mit dem Punkt an ihrem Ende. Dieselbe Figur wie das Zeichen der Marke. */
.sm-mg-cap{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;}
.sm-mg-cap::after{content:"";position:absolute;left:0;right:0;bottom:-.75px;height:1.5px;background:var(--sm-black);transform-origin:left center;transition:background-color .3s;}
.sm-mg-c:hover .sm-mg-cap::after,.sm-mg-c:focus-visible .sm-mg-cap::after{background:var(--sm-c,var(--sm-black));}
.sm-mg-dot{position:absolute;right:0;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--sm-c,var(--sm-teal));z-index:1;transition:transform .4s var(--sm-ease-spring);}
.sm-mg-c:hover .sm-mg-dot,.sm-mg-c:focus-visible .sm-mg-dot{transform:scale(1.45);}
.sm-mg-lead{display:flex;align-items:baseline;gap:14px;min-width:0;}
.sm-mg-nr{font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-cream);}
.sm-mg-t{font-size:clamp(22px,2.1vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1;text-wrap:balance;}
.sm-mg-d{font-family:var(--sm-mono);font-size:12px;margin-right:24px;white-space:nowrap;}

/* Beim Klick zieht das Bild kurz an und der Punkt waechst, dann wechselt die
   Seite. Das Skript haelt den Wechsel genau so lange auf, wie die Bewegung
   dauert, und nur beim einfachen Klick ohne Zusatztaste. */
.sm-mg-c.is-ab .sm-mg-i{transform:scale(1.07);transition:transform .22s var(--sm-ease-soft);}
.sm-mg-c.is-ab .sm-mg-dot{transform:scale(2.6);transition:transform .22s var(--sm-ease-soft);}
.sm-mg-c.is-ab .sm-mg-cap::after{background:var(--sm-c,var(--sm-black));}

/* Tablet: die schmale Spalte ist bei 768 px nur 280 px breit. Mit der
   Schrift des grossen Rasters bricht der laengste Titel dort in die zweite
   Zeile und die Unterschriften einer Reihe werden ungleich hoch. Deshalb
   hier etwas kleiner und mit engeren Abstaenden; gemessen bleibt der
   laengste Titel samt Leistung in einer Zeile, mit Luft zum Punkt. */
@media (max-width:1199px){
  .sm-mg{gap:clamp(44px,6vh,56px) 24px;}
  .sm-mg-cap{gap:12px;}
  .sm-mg-lead{gap:10px;}
  .sm-mg-t{font-size:clamp(17px,2.2vw,24px);}
  .sm-mg-d{font-size:11px;margin-right:12px;}
}

/* Mobil: eine Spalte, jede Karte ueber die ganze Breite und alle im selben
   Ausschnitt. Quadratisch, weil die Motive teils quer und teils hoch sind:
   so verliert keines von beiden mehr als noetig, und die Reihe liest sich
   als Reihe statt als Treppe aus 241 und 437 Pixeln.
   `align-items:stretch` muss hier stehen: das Raster oben setzt `start`,
   und das wirkt im Spalten-Flex auf die Querachse weiter. Die Karten sind
   dadurch bis zum 10.10.2026 auf ihre Inhaltsbreite geschrumpft, 125 bis
   223 px statt 350. Die Unterschrift wird zweizeilig: oben Nummer und
   Leistung, darunter der Titel ueber die ganze Breite. */
@media (max-width:767px){
  .sm-mg{display:flex;flex-direction:column;align-items:stretch;gap:40px;margin-top:28px;}
  .sm-mg-c{gap:14px;}
  .sm-mg .sm-mg-c .sm-mg-m{aspect-ratio:1/1;}
  .sm-mg-n{display:none;}
  .sm-mg-cap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:0;row-gap:6px;padding-bottom:10px;}
  .sm-mg-lead{display:contents;}
  .sm-mg-nr{grid-column:1;grid-row:1;font-size:11px;}
  .sm-mg-d{grid-column:2;grid-row:1;margin:0;font-size:11px;color:var(--sm-muted-on-cream);white-space:normal;}
  .sm-mg-d::before{content:"\00a0·\00a0";}
  .sm-mg-t{grid-column:1/-1;grid-row:2;font-size:clamp(24px,6.6vw,28px);}
  .sm-mg-dot{width:10px;height:10px;bottom:-5px;}
}
@media (prefers-reduced-motion:reduce){
  .sm-mg-i,.sm-mg-dot,.sm-mg-cap::after{transition:none;}
}

/* Wie wir arbeiten / dreistufige Grafik */
.sm-steps{margin-top:clamp(56px,9vh,104px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));row-gap:48px;}
.sm-step-g{height:40px;position:relative;display:flex;}
.sm-step-g .sm-ln-b{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sm-cream);}
.sm-step-g .sm-ln-t{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sm-cream);}
.sm-step-g--mid{display:flex;}
.sm-step-g--mid .sm-s1{flex:0 0 18%;position:relative;}
.sm-step-g--mid .sm-s1::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sm-cream);}
.sm-step-g--mid svg{flex:none;display:block;width:96px;height:40px;overflow:visible;}
.sm-step-g--mid .sm-s3{flex:1 1 auto;position:relative;}
.sm-step-g--mid .sm-s3::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sm-cream);}
.sm-step-g--mid .sm-s3 i{position:absolute;left:15px;bottom:-7.5px;width:15px;height:15px;border-radius:50%;background:var(--sm-coral);}
.sm-step-b{padding:30px 32px 0 0;}
.sm-step-b h3{margin-top:10px;font-size:28px;font-weight:500;letter-spacing:-.02em;}
.sm-step-b p{margin-top:12px;font-size:17px;line-height:1.55;max-width:32ch;}

/* Leistungs-Zeilen */
.sm-rows{margin-top:clamp(40px,6vh,72px);}
.sm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:16px clamp(24px,4vw,64px);align-items:baseline;padding:26px 0;border-bottom:1px solid var(--sm-rule-on-cream);}
.sm-dark .sm-row{border-bottom-color:var(--sm-rule-on-dark);}
.sm-row:hover{text-decoration:none;}
.sm-row-t{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.1;display:flex;align-items:baseline;gap:12px;}
.sm-row-t::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sm-c,var(--sm-coral));flex:none;transform:scale(0);transition:transform .4s var(--sm-ease-spring);}
.sm-row:hover .sm-row-t::before,.sm-row[data-on]  .sm-row-t::before{transform:scale(1);}
.sm-row-d{font-size:16px;line-height:1.5;color:var(--sm-muted-on-cream);}
.sm-dark .sm-row-d{color:var(--sm-muted-on-dark);}
.sm-row-go{font-family:var(--sm-mono);font-size:12px;white-space:nowrap;}

/* ---------------- Leistungs-Faecher (nur Startseite) ----------------
   Fuenf Farbfelder nebeneinander, eins ist immer offen. Ueberfahren oder
   Tastaturfokus oeffnet, die uebrigen werden schmal und drehen ihren Titel
   hochkant. Gebaut nach leistungen-faecher/reference.html.

   Vier Abweichungen von der Vorlage, jede mit Grund:
   1. Die Vorlage gibt dem offenen Inhalt feste 576 px. Das ist die Breite
      bei 1184 px Satzspiegel; schon bei 768 px ist das offene Feld nur noch
      336 px breit und der Inhalt lief unter den Rand. Die Breite wird jetzt
      aus der Rasterbreite gerechnet (container query units), die 576 px
      davor bleiben als Rueckfall fuer Browser ohne cqw stehen.
   2. Aus demselben Grund haengen Schriftgrade und Innenabstaende an cqw
      statt an festen Werten je Breitenband.
   3. Fokusrahmen in currentColor statt Violett: Violett auf dem violetten
      Feld waere unsichtbar.
   4. Kein white-space:nowrap am offenen Titel: das Feld traegt
      overflow:hidden, ein zu langer Titel waere also stumm abgeschnitten
      statt umzubrechen. 60 px werden ab 1200 px Rasterbreite erreicht,
      darunter waechst der Titel mit dem Feld mit.

   Mobil liegen die Felder als Baender untereinander und klappen beim
   Antippen auf, mit derselben Zeitkurve wie das Oeffnen im Web: das Band
   waechst (grid-template-rows 0fr auf 1fr), der Inhalt folgt kurz
   versetzt, und das Plus dreht sich zum Minus. */
.sm-fa{
  --sm-fa-g:8px;
  --sm-fa-ease:cubic-bezier(.6,0,.2,1);
  container-type:inline-size;
  margin:clamp(32px,5vh,48px) 0 0;padding:0;list-style:none;
  display:flex;gap:var(--sm-fa-g);
  height:clamp(430px,64vh,580px);
}
.sm-fa-i{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--sm-c);color:var(--sm-ink);transition:flex .65s var(--sm-fa-ease);}
.sm-fa-i.is-open{flex:4 1 0;}
/* Das Cream-Feld steht auf Cream, nur die Innenlinie trennt es. */
.sm-fa-i--rand{box-shadow:inset 0 0 0 1.5px var(--sm-black);}
.sm-fa-link{position:absolute;inset:0;color:inherit;}
.sm-fa-link:hover{text-decoration:none;}
.sm-fa-link:focus-visible{outline:2px solid currentColor;outline-offset:-7px;}
.sm-fa-top{position:absolute;left:clamp(16px,2.4cqw,28px);right:clamp(16px,2.4cqw,28px);top:clamp(18px,2.2cqw,26px);display:flex;justify-content:space-between;align-items:center;font-family:var(--sm-mono);font-size:12px;}
.sm-fa-dot{width:12px;height:12px;border-radius:50%;background:var(--sm-dot,var(--sm-coral));opacity:0;transform:scale(.3);transition:opacity .3s,transform .5s var(--sm-ease-spring);}
.sm-fa-side{position:absolute;left:clamp(14px,2.2cqw,26px);bottom:clamp(18px,2.4cqw,28px);writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(19px,2.55cqw,30px);font-weight:500;letter-spacing:-.025em;line-height:1;white-space:nowrap;transition:opacity .3s,translate .45s var(--sm-fa-ease);}
.sm-fa-body{
  position:absolute;left:0;top:0;bottom:0;
  /* Breite des offenen Felds: bei n Feldern teilt sich der Platz nach
     flex 4 zu je 1, also 4/(3+n) des Rasters ohne die (n-1) Luecken.
     Bei vier Leistungen sind das 4/7 von (100cqw - 3 Luecken). Wird
     eine Leistung ergaenzt oder gestrichen, muessen beide Zahlen mit. */
  width:663px;
  width:calc((100cqw - 3*var(--sm-fa-g))*4/7);
  padding:clamp(60px,7.1cqw,84px) clamp(20px,3cqw,36px) clamp(24px,2.9cqw,34px);
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.sm-fa-n{font-size:clamp(28px,5cqw,60px);font-weight:500;letter-spacing:-.045em;line-height:.95;text-wrap:balance;}
.sm-fa-t{font-size:clamp(17px,1.78cqw,21px);line-height:1.4;max-width:30ch;text-wrap:pretty;}
.sm-fa-tags{display:flex;flex-wrap:wrap;gap:6px;margin:clamp(16px,2cqw,24px) 0;padding:0;list-style:none;}
.sm-fa-tags li{font-family:var(--sm-mono);font-size:12px;padding:7px 11px;border:1.5px solid currentColor;}
.sm-fa-go{display:inline-block;font-size:clamp(15px,1.44cqw,17px);font-weight:500;padding-bottom:4px;border-bottom:1.5px solid currentColor;}
/* Der Inhalt blendet erst ein, wenn das Feld breit genug ist: in der
   schmalen Breite wuerde er umbrechen und beim Aufgehen zappeln. */
.sm-fa-i.is-open .sm-fa-dot{opacity:1;transform:scale(1);}
.sm-fa-i.is-open .sm-fa-side{opacity:0;translate:0 10px;}
.sm-fa-i.is-open .sm-fa-body{opacity:1;pointer-events:auto;transition-delay:.25s;}

/* Mobil: Baender untereinander, Antippen klappt auf */
.sm-fa-tog{display:none;}
@media (max-width:767px){
  .sm-fa{flex-direction:column;gap:6px;height:auto;margin-top:26px;}
  .sm-fa-i,.sm-fa-i.is-open{flex:none;}
  .sm-fa-top,.sm-fa-side,.sm-fa-n,.sm-fa-tags{display:none;}
  .sm-fa-tog{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:0 18px;text-align:left;}
  .sm-fa-tog:focus-visible{outline:2px solid currentColor;outline-offset:-5px;}
  .sm-fa-nr{flex:none;width:22px;font-family:var(--sm-mono);font-size:11px;}
  .sm-fa-name{flex:1;min-width:0;font-size:clamp(21px,6.4vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.05;}
  /* Das Plus dreht sich zum Minus, statt die Zeichen zu tauschen. */
  .sm-fa-sign{position:relative;flex:none;width:15px;height:15px;}
  .sm-fa-sign i{position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:rotate .45s var(--sm-fa-ease);}
  .sm-fa-sign i+i{rotate:90deg;}
  .sm-fa-i.is-open .sm-fa-sign i+i{rotate:0deg;}
  /* Das Band waechst ueber die Rasterzeile: eine Hoehe laesst sich nur so
     weich bewegen, ohne sie vorher auszurechnen. */
  .sm-fa-link{position:static;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--sm-fa-ease);}
  .sm-fa-i.is-open .sm-fa-link{grid-template-rows:1fr;}
  /* visibility statt display: nimmt den zugeklappten Teil aus Tabfolge und
     Vorlesereihenfolge, ohne den Uebergang zu stoeren. Beim Zuklappen erst
     am Ende der Bewegung. */
  .sm-fa-body{position:static;display:block;width:auto;min-height:0;padding:0;overflow:hidden;opacity:1;pointer-events:auto;visibility:hidden;transition:visibility 0s .5s;}
  .sm-fa-i.is-open .sm-fa-body{visibility:visible;transition:visibility 0s;}
  .sm-fa-in{padding:0 18px 20px 54px;opacity:0;translate:0 6px;transition:opacity .3s,translate .3s;}
  .sm-fa-i.is-open .sm-fa-in{opacity:1;translate:0;transition-delay:.22s;}
  .sm-fa-t{font-size:17px;line-height:1.45;max-width:none;}
  .sm-fa-go{margin-top:12px;font-size:15px;line-height:44px;padding:0;border:0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;}
}
@media (prefers-reduced-motion:reduce){
  .sm-fa-i,.sm-fa-link,.sm-fa-body,.sm-fa-side,.sm-fa-dot,.sm-fa-in,.sm-fa-sign i{transition:none;}
}

/* Team */
.sm-team{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(24px,4vw,56px);}
.sm-team-n{margin-top:16px;font-size:18px;font-weight:500;letter-spacing:-.01em;}
/* Der Punkt hinter dem Namen: dieselbe Figur wie das Zeichen der Marke.
   Beim Aufbau der Portraets (Teil 6, Abschnitt 5) setzt er den Schluss. */
.sm-team-n::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-radius:50%;background:var(--sm-coral);vertical-align:.18em;}

/* Kontakt + Formular */
.sm-kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(40px,6vw,96px);}
.sm-kontakt h2{font-size:clamp(34px,4.6vw,68px);font-weight:500;letter-spacing:-.03em;line-height:1.02;max-width:14ch;text-wrap:balance;}
/* Kontaktspalte: Mono-Marke ueber dem Wert, drei gleich gebaute Bloecke */
.sm-kon-dl{display:grid;gap:clamp(22px,3vh,30px);margin:0;}
.sm-kon-row{display:grid;gap:7px;}
.sm-kon-row dt{color:var(--sm-muted-on-dark);}
.sm-kon-row dd{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;}
.sm-kon-a{border-bottom:1px solid rgba(241,237,226,.4);}
.sm-kon-a:hover{text-decoration:none;color:var(--sm-coral);border-bottom-color:var(--sm-coral);}
.sm-kon-lab{display:block;margin-bottom:26px;color:var(--sm-muted-on-dark);}
/* Soziale Kanaele: Zeichen plus Mono-Wort, kein Bild */
.sm-social{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(20px,3vw,30px);margin-top:clamp(30px,4vh,42px);padding-top:22px;border-top:1px solid rgba(241,237,226,.16);}
.sm-social-a{display:inline-flex;align-items:center;gap:9px;font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-dark);}
.sm-social-a:hover{text-decoration:none;color:var(--sm-cream);}
.sm-social-i{width:18px;height:18px;flex:none;display:block;}
.sm-social--bar{margin:0;padding:0;border:0;gap:10px 22px;}
.sm-f-row{margin-bottom:26px;}
.sm-f-row label{display:block;font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-dark);margin-bottom:8px;}
.sm-f-row input,.sm-f-row textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(241,237,226,.4);color:var(--sm-cream);font-family:var(--sm-sans);font-size:19px;padding:8px 0 10px;border-radius:0;}
.sm-f-row textarea{resize:vertical;min-height:7.2em;line-height:1.5;}
.sm-f-row input:focus,.sm-f-row textarea:focus{outline:none;border-bottom-color:var(--sm-cream);}
.sm-f-btn{display:inline-flex;align-items:center;gap:10px;background:var(--sm-cream);color:var(--sm-black);font-size:15px;font-weight:500;padding:17px 26px;transition:background-color .3s;}
.sm-f-btn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sm-black);}
.sm-f-btn:hover{background:var(--sm-coral);text-decoration:none;}
.sm-f-ok{display:flex;align-items:flex-start;gap:14px;font-size:clamp(20px,2vw,26px);line-height:1.3;}
.sm-f-ok::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--sm-coral);flex:none;margin-top:.3em;}

/* Footer */
.sm-foot{background:var(--sm-black);color:var(--sm-cream);border-top:1px solid rgba(241,237,226,.14);}
.sm-foot-in{max-width:var(--sm-max);margin:0 auto;padding:clamp(64px,10vh,120px) var(--sm-gutter) 26px;}
.sm-foot-cta h2{font-size:clamp(34px,5.2vw,80px);font-weight:500;letter-spacing:-.035em;line-height:1.02;max-width:16ch;text-wrap:balance;margin-top:14px;}
.sm-foot-links{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);margin-top:30px;}
.sm-foot-links a{font-size:clamp(16px,1.4vw,19px);border-bottom:1px solid rgba(241,237,226,.5);}
.sm-foot-links a:hover{text-decoration:none;color:var(--sm-coral);border-bottom-color:var(--sm-coral);}
/* Auf der Startseite steht der Aufruf oben im Kontaktteil, die Fusszeile
   hat ihn deshalb nicht. Dann ist der Schriftzug das erste Kind und
   braucht seinen Abstand nach oben nicht, sonst klafft dort eine Luecke. */
.sm-foot-in>.sm-foot-mark:first-child{margin-top:0;}
.sm-foot-mark{margin-top:clamp(56px,9vh,110px);font-size:clamp(40px,min(15vw,calc((100vw - 2*var(--sm-gutter))/5.65)),220px);font-weight:600;letter-spacing:-.055em;line-height:.8;white-space:nowrap;margin-left:-.04em;display:flex;align-items:baseline;}
.sm-foot-mark i{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--sm-acc,var(--sm-coral));margin-left:.04em;}
.sm-foot-bar{margin-top:clamp(28px,4vh,48px);padding-top:18px;border-top:1px solid rgba(241,237,226,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-dark);}
.sm-foot-bar nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;}
.sm-foot-bar>*{min-width:0;}
/* ======= Teil 3: Fallstudie, Lese-Linie, Leistungsseiten, FAQ, Mobil ======= */

/* Lese-Linie im Header */
.sm-lese-wrap{max-width:var(--sm-max);margin:0 auto;padding:0 var(--sm-gutter) 14px;}
.sm-lese{position:relative;height:18px;}
.sm-lese-layer{position:absolute;inset:0;display:flex;}
.sm-lese-track{opacity:.16;}
.sm-lese-l{flex:0 0 var(--left,50%);position:relative;}
.sm-lese-l::after{content:"";position:absolute;left:0;right:0;bottom:-.75px;height:1.5px;background:var(--sm-black);}
.sm-lese-r{flex:1 1 auto;position:relative;}
.sm-lese-r::after{content:"";position:absolute;left:0;right:0;top:-.75px;height:1.5px;background:var(--sm-black);}
.sm-lese svg{flex:none;display:block;width:43px;height:18px;overflow:visible;}
.sm-lese-fill{clip-path:inset(0 var(--clip,100%) 0 0);}
.sm-lese-dot{position:absolute;left:var(--dotLeft,50%);bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--sm-acc,var(--sm-teal));transform:scale(0);transition:transform .45s var(--sm-ease-spring);}
.sm-lese.is-umbruch .sm-lese-dot{transform:scale(1);}

/* Fallstudie */
.sm-case-meta{max-width:var(--sm-max);margin:0 auto;padding:clamp(40px,7vh,80px) var(--sm-gutter) clamp(36px,6vh,64px);}
.sm-case-meta .sm-mono{display:block;}
.sm-case-dl{margin-top:clamp(36px,5vh,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:22px clamp(24px,4vw,56px);}
.sm-case-dl>div{border-top:1px solid var(--sm-rule-on-dark);padding-top:12px;}
.sm-case-dl dt{font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-dark);}
.sm-case-dl dd{margin-top:8px;font-size:15px;}
.sm-case-lead{max-width:34ch;font-size:clamp(20px,2vw,28px);line-height:1.38;}

/* Die Kennwerte unter dem Vorsatz sind auf den Leistungsseiten raus. Der Satz
   steht jetzt in der Mitte des dunklen Bandes, und der Platz, den die Liste
   belegt hat, liegt je zur Haelfte darueber und darunter: zwei gleiche
   Platzhalter, einer vor und einer nach dem Satz. Damit bleibt das Band so hoch
   wie vorher. Eine Zeile der Liste war 72,2 Pixel hoch (Haarlinie 1 +
   Innenabstand 12 + Kennwort + 8 + Wert), der Abstand zwischen zwei Zeilen 22,
   der Abstand der Liste zum Vorsatz clamp(36px,5vh,56px). Die Liste lief
   vierspaltig ab 900 Pixeln Fensterbreite, also in einer Zeile; darunter drei-
   oder zweispaltig, also in zwei Zeilen; unter 344 Pixeln einspaltig, also in
   vier. Hier steht jeweils die halbe Summe. Die Fallstudien-Vorlage behaelt ihre
   Liste, darum bleiben die Regeln darueber stehen. */
/* Webflow haengt jedem Absatz 0,75em unter den Text, der Reset der Site steht
   in :where() und verliert dagegen (siehe Punkt 45 der Notizen). Im alten
   Aufbau fiel das nicht auf: der Abstand der Liste nach oben war groesser und
   hat ihn geschluckt. Jetzt wuerde er den Vorsatz aus der Mitte schieben. */
.sm-kopf .sm-case-lead{margin:0;}
.sm-case-sp{height:calc(clamp(18px,2.5vh,28px) + 36.1px);}
@media (max-width:899.98px){.sm-case-sp{height:calc(clamp(18px,2.5vh,28px) + 83.2px);}}
@media (max-width:343.98px){.sm-case-sp{height:calc(clamp(18px,2.5vh,28px) + 177.4px);}}

/* Am Rechner fuellt der Kopf einer Leistungsseite genau einen Bildschirm: unter
   der Kopfleiste bleibt der Rest, und Farbfeld und dunkles Band teilen ihn sich
   zu gleichen Teilen. Wer einmal scrollt, sieht sofort den naechsten Abschnitt
   und keinen schwarzen Rest. Abgezogen werden 62 Pixel statt der gemessenen
   62,6 der Kopfleiste: lieber laeuft das Schwarz einen halben Pixel unter die
   Bildkante, als dass dort eine helle Haarlinie stehen bleibt. min-height, nicht
   height, und flex-shrink 0: passt der Kopf nicht in den Bildschirm, waechst er
   darueber hinaus, statt den Text zu quetschen. Die Luft oben und unten ist
   knapper gesetzt als sonst (7vh / 4,5vh statt 11vh / 7vh), sonst reicht ein
   Bildschirm auf flachen Notebooks nicht fuer Schlagzeile, Kante und Vorsatz;
   was uebrig bleibt, verteilt flex ohnehin wieder auf beide Felder. Die
   Platzhalter sind hier aus, die Hoehe kommt vom Bildschirm. */
@media (min-width:1061px){
  .sm-kopf{display:flex;flex-direction:column;min-height:calc(100vh - 62px);}
  .sm-kopf>.sm-kante{flex:none;}
  .sm-kopf>.sm-hero{flex:1 0 auto;}
  .sm-kopf>.sm-dark{flex:1 0 auto;display:grid;}
  .sm-kopf .sm-hero-in{padding-top:clamp(32px,6vh,96px);padding-bottom:clamp(24px,3.8vh,64px);}
  /* Webflow haengt auch im Kopf Abstaende an: 0,3em unter die Schlagzeile und
     0,75em unter den Untertitel. Der erste frisst den gewollten Abstand von
     22px, der zweite steht als Luft vor der Kante. Beides zurueckgenommen,
     dann stimmen die Abstaende wieder und der Kopf passt eher auf einen
     Bildschirm. */
  .sm-kopf .sm-hero h1,.sm-kopf .sm-hero .sm-hero-t,.sm-kopf .sm-hero-sub{margin-bottom:0;}
  .sm-kopf .sm-hero h1,.sm-kopf .sm-hero .sm-hero-t{margin-top:clamp(16px,2.4vh,28px);}
  .sm-kopf .sm-hero-sub{margin-top:clamp(14px,2vh,22px);}
  /* width:100% ist noetig: der Satzspiegel steht auf margin:0 auto, und ein
     Rasterfeld mit automatischen Seitenabstaenden wird nur so breit wie sein
     Inhalt und rueckt in die Mitte. Mit fester Breite verhaelt er sich wieder
     wie ein normaler Block, also linksbuendig am Rand und erst ab 1440 Pixeln
     mittig. */
  .sm-kopf .sm-case-meta{width:100%;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(18px,2.2vh,48px);padding-bottom:clamp(18px,2.2vh,48px);}
  .sm-kopf .sm-case-sp{display:none;}
}
/* Flache Fenster: der Untertitel bricht bei 34 Zeichen Satzbreite auf zwei
   Zeilen, und genau die 33 Pixel fehlen dann, damit der Kopf auf einen
   Bildschirm passt. Hier darf er breiter laufen und steht auf den meisten
   Seiten in einer Zeile. Auf hohen Fenstern bleibt alles wie gehabt. */
@media (min-width:1061px) and (max-height:844px){
  .sm-kopf .sm-hero-sub{max-width:52ch;}
}
.sm-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(32px,5vw,88px);align-items:start;}
.sm-body{margin-top:18px;font-size:clamp(19px,1.6vw,23px);line-height:1.5;max-width:36ch;}
.sm-body--wide{max-width:44ch;}

/* Umbruch */
.sm-umbruch{background:var(--sm-acc,var(--sm-teal));color:var(--sm-ink,var(--sm-black));}
.sm-umbruch-head{height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto clamp(90px,22vw,320px);align-items:stretch;}
.sm-umbruch-head .sm-u1{position:relative;}
.sm-umbruch-head .sm-u1 .sm-mono{position:absolute;left:0;bottom:12px;color:inherit;opacity:.75;}
.sm-umbruch-head .sm-u1::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;}
.sm-umbruch-head svg{flex:none;display:block;width:134px;height:56px;overflow:visible;}
.sm-umbruch-head .sm-u3{position:relative;}
.sm-umbruch-head .sm-u3::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:currentColor;}
.sm-umbruch-head .sm-u3 i{position:absolute;left:21px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:currentColor;}
.sm-quote{margin-top:clamp(44px,7vh,88px);font-family:var(--sm-serif);font-style:italic;font-weight:300;font-size:clamp(36px,5.6vw,88px);line-height:1.04;letter-spacing:-.02em;max-width:18ch;}
.sm-quote-p{margin-top:clamp(36px,5vh,64px);margin-left:auto;max-width:40ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55;}

/* Morgen-Raster */
.sm-grid-a{margin-top:clamp(36px,5vh,64px);}
.sm-grid-b{margin-top:clamp(18px,2.4vh,28px);display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,28px);align-items:flex-end;}
.sm-grid-b>*{min-width:0;}
.sm-fx5{flex:5 1 260px;}
.sm-fx3{flex:3 1 160px;}
.sm-fx4{flex:4 1 220px;}

/* Naechstes Projekt */
.sm-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(17,17,17,.15);padding-top:clamp(28px,4vh,48px);margin-top:clamp(64px,10vh,120px);}
.sm-next:hover{text-decoration:none;}
.sm-next-t{font-size:clamp(40px,6.4vw,104px);font-weight:500;letter-spacing:-.04em;line-height:.95;}
.sm-next-c{width:clamp(44px,5.5vw,84px);height:clamp(44px,5.5vw,84px);border-radius:50%;background:var(--sm-c,var(--sm-violet));flex:none;}

/* Leistungsseiten: Formate, Wirkung, Ablauf, Haltung, Tags */
.sm-num{font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-cream);}
.sm-dark .sm-num{color:var(--sm-muted-on-dark);}
.sm-cards{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,56px) clamp(28px,4vw,64px);}
.sm-card h3{margin-top:10px;font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em;}
.sm-card p{margin-top:10px;font-size:16px;line-height:1.55;max-width:34ch;color:var(--sm-muted-on-cream);}
.sm-dark .sm-card p{color:var(--sm-muted-on-dark);}
.sm-card--line{padding-top:18px;border-top:1.5px solid var(--sm-black);}
.sm-dark .sm-card--line{border-top-color:var(--sm-cream);}
.sm-tags{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(28px,4vh,48px);}
.sm-tag{font-family:var(--sm-mono);font-size:12px;padding:8px 14px;border:1px solid var(--sm-rule-on-cream);}
.sm-dark .sm-tag{border-color:var(--sm-rule-on-dark);}

/* ============================================================
   Leistungsseite Kampagnen: Ziele, Formate, Plakate, Weg
   Vorlage: leistungsseite-kampagnen aus Kampagnen.zip, 10.10.2026.
   Vier Bereiche, in der Reihenfolge der Seite:
     .sm-ar-*  Arten    "Fuer jedes Ziel die richtige Kampagne."
     .sm-fo-*  Formate  "Eine Idee. Sechs Formate."
     .sm-pl-*  Plakate  "So arbeiten wir"
     .sm-we-*  Weg      "Von der Idee zur Ausspielung."
   Die Vorlage rechnet durchgehend mit 1280 px Fensterbreite und
   1184 px Satzspiegel. Die Site hat 1440 px und 1328 px, deshalb
   haengen alle Masse an Container-Einheiten (cqw) oder an clamp(),
   nicht an den festen Zahlen der Vorlage.
   Umbruchstelle ist ueberall 1060 px, dieselbe wie beim Menue.
   ============================================================ */

/* Webflow setzt im eigenen Stylesheet Aussenabstaende an h1-h6, p, figure
   und figcaption. Der Reset der Site steht in :where() und hat damit die
   Spezifitaet 0, also gewinnt Webflow. Fuer die vier neuen Bereiche wird
   das hier einmal zurueckgenommen, alle Abstaende stehen in den Regeln
   darunter. Diese Regel muss vor ihnen stehen: gleiche Spezifitaet, und
   bei gleicher Spezifitaet gewinnt das Spaetere. */
/* Auf den Farbflaechen gilt die Schriftfarbe der Flaeche. Ohne diese
   Regel greift .sm-cream .sm-mono und setzt das gedaempfte Dunkelbraun
   des Cream-Hintergrunds, das auf Violett und Soft Black fast verschwindet. */
.sm-fo-l .sm-mono,.sm-fo-x .sm-mono,.sm-pl-c .sm-mono{color:inherit;}

.sm-ar-z,.sm-ar-n,.sm-ar-p,
.sm-fo-lh,.sm-fo-lp,.sm-fo-c,.sm-fo-c figcaption,.sm-fo-h,.sm-fo-hint,
.sm-pl-t,.sm-pl-p,.sm-pl-bl,.sm-pl-bl li,
.sm-we-n,.sm-we-d{margin:0;}

/* ---------- 1. Arten: vier Spalten, alles sichtbar ---------- */
/* Zweite Fassung der Vorlage, 10.10.2026: "Vier Spalten, minimal".
   Keine Karte, keine Farbflaeche, nichts zu bedienen und kein Skript.
   Vier Spalten, in jeder steht oben das Ziel, darunter eine feine Linie
   mit dem Punkt, darunter die Kampagnenart und der Text. Derselbe
   Aufbau wie "So arbeiten wir" weiter unten auf derselben Seite.
   Die Linien aller Spalten sollen auf einer Hoehe liegen. Dafuer zwei
   Wege nebeneinander: subgrid gibt allen Spalten dieselben fuenf Zeilen,
   das haelt auch dann, wenn ein Ziel einmal dreizeilig umbricht. Wo
   subgrid fehlt, faellt die Zeile aus und es bleibt das Mass der
   Vorlage, zwei Zeilen Mindesthoehe fuer das Ziel (62 px bei 26 px). */
.sm-ar{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:clamp(24px,3.1vw,44px);row-gap:0;container-type:inline-size;}
.sm-ar-c{display:grid;grid-row:span 5;grid-template-rows:subgrid;}
.sm-ar-w{font-size:11px;}
.sm-ar-z{margin-top:10px;min-height:2.3em;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;}
/* Die Linie traegt den Punkt, deshalb steht sie als eigener Strich da
   und nicht als Rahmen am Text darunter. Der Punkt sitzt mit halber
   Hoehe darueber, damit er auf der Linie liegt und nicht daran klebt. */
.sm-ar-r{position:relative;margin-top:22px;height:1px;background:rgba(17,17,17,.3);}
.sm-ar-r::before{content:"";position:absolute;left:0;top:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--sm-violet);}
/* Die Kampagnenart ist das Thema des Bereichs, das Ziel darueber nur die
   Hinfuehrung. Bis zum 10.10.2026 stand die Art in 16 bis 19 px da, also in
   Textgroesse, und verschwand zwischen dem grossen Ziel und dem Absatz.
   Jetzt traegt sie die Akzentfarbe der Seite und steht eine Stufe groesser:
   drei Stimmen statt zwei, Soft Black fuer die Frage, Violett fuer die
   Antwort, Grau fuer die Erklaerung. Der Punkt an der Linie wechselt mit auf
   Violett, damit Punkt und Begriff zusammengehoeren.
   Seit 15.10.2026 (Kunde: "noch zu unsichtbar") ist die Rangfolge umgedreht:
   die Art ist die Ueberschrift der Spalte, das Ziel darueber nur noch Vorsatz
   in 17 bis 20 px. Die Groesse der Art haengt an der Spaltenbreite, nicht am
   Fenster, weil "Recruitingkampagnen" sich nicht trennen laesst und rund das
   9,7-Fache der Schriftgroesse breit ist. Faktor .0245 = 9,8 % einer von vier
   Spalten; bei der schmalsten Vierspalter-Breite bleiben so etwa 11 px Luft.
   Der Container sitzt an .sm-ar, nicht an der Spalte: container-type an
   .sm-ar-c macht die Spalte zu einem eigenen Layout-Kontext und schaltet das
   subgrid ab, dann liegen die Linien nicht mehr auf einer Hoehe. Die erste
   font-size ist der Rueckfall fuer Browser ohne Container-Einheiten. */
.sm-ar-n{margin-top:18px;font-size:clamp(19px,1.58vw,23px);font-size:clamp(20px,calc((100cqi - 3 * clamp(24px,3.1vw,44px)) * .0245),30px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--sm-violet);text-wrap:balance;}
.sm-ar-p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--sm-muted-on-cream);text-wrap:pretty;}

/* ---------- Beispielmotive: vier gleiche Felder ---------- */
/* Vorher stand hier die alte Bildstrecke .sm-grid-a und .sm-grid-b: ein Motiv
   ueber die volle Breite, 1313 x 739 px, darunter drei in 4:5, 9:16 und 1:1,
   zusammen fast 1800 px hoch fuer vier Platzhalter. Vier gleich grosse Felder
   in einer Reihe zeigen dasselbe auf einem Fuenftel der Hoehe, und der Blick
   vergleicht sie, statt an einem grossen Bild haengen zu bleiben. Die
   Beschriftung steht unter dem Bild statt darin: bei dieser Groesse liegt sie
   sonst im Motiv. .sm-grid-a und .sm-grid-b bleiben im Stylesheet, die Seite
   KI Content und die Fallstudien-Vorlage benutzen sie weiter. */
.sm-bsp{margin-top:clamp(32px,4.6vh,52px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);}
.sm-bsp-c{display:flex;flex-direction:column;gap:12px;min-width:0;}
.sm-bsp-l{color:var(--sm-muted-on-cream);}
/* Eigene Umschaltpunkte, nicht die der Arten darueber: vier Felder brauchen
   frueher Platz als vier Textspalten. Unter 600 px waeren zwei Spalten nur
   noch gut 160 px breit, da steht lieber eines unter dem anderen. */
@media (max-width:1060px){
  .sm-bsp{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,28px);}
}
@media (max-width:599.98px){
  .sm-bsp{margin-top:26px;grid-template-columns:minmax(0,1fr);gap:24px;}
  .sm-bsp-c{gap:10px;}
}

/* ---------- 2. Formate: eine Leitidee in sechs Seitenverhaeltnissen ---------- */
/* 392 : 760 ist das Verhaeltnis der Vorlage. Als fr-Werte geschrieben
   waechst beides mit, die Motive bleiben zueinander im Mass. 700 ist
   die Summe der drei Breiten der unteren Reihe: daran haengt der
   Massstab, deshalb steht die untere Reihe immer randvoll und die
   obere behaelt ihre Luft, genau wie in der Vorlage. */
.sm-fo{--sm-fo-g:clamp(12px,1.6vw,20px);margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:minmax(0,392fr) minmax(0,760fr);gap:clamp(20px,2.4vw,32px);align-items:stretch;}
.sm-fo-l{container-type:inline-size;display:grid;background:var(--sm-black);color:var(--sm-cream);}
.sm-fo-li{display:flex;flex-direction:column;justify-content:space-between;gap:8.2cqw;padding:8.2cqw 8.2cqw 7.7cqw;}
.sm-fo-lt{display:flex;justify-content:space-between;align-items:center;}
.sm-fo-ld{flex:none;width:12px;height:12px;border-radius:50%;background:var(--sm-coral);}
.sm-fo-lh{font-size:21.4cqw;font-weight:500;letter-spacing:-.05em;line-height:.92;}
.sm-fo-lh .sm-em{letter-spacing:-.03em;}
.sm-fo-lp{padding-top:4.1cqw;border-top:1.5px solid var(--sm-cream);font-size:clamp(15px,4.34cqw,17px);line-height:1.5;text-wrap:pretty;}

.sm-fo-m{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(18px,2.2vw,28px);}
.sm-fo-r{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sm-fo-g);}
.sm-fo-c{flex:none;width:calc((100cqw - 2*var(--sm-fo-g))*var(--w)/700);display:flex;flex-direction:column;gap:10px;}
.sm-fo-c figcaption{line-height:1.3;}
.sm-fo-x{container-type:inline-size;position:relative;width:100%;overflow:hidden;box-shadow:0 2px 6px rgba(17,17,17,.12);transition:transform .4s cubic-bezier(.3,.7,.2,1),box-shadow .4s;}
.sm-fo-x .sm-mono{position:absolute;}
.sm-fo-h{font-weight:500;letter-spacing:-.05em;line-height:.92;}
/* Die gestreifte Flaeche ist Platzhalter. Kommt ein echtes Foto, traegt
   sie ein <img> mit object-fit:cover und der Streifen faellt weg. */
.sm-fo-bd{position:absolute;overflow:hidden;}
.sm-fo-bd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.sm-fo-x--a{aspect-ratio:3/4;background:var(--sm-violet);color:var(--sm-cream);}
.sm-fo-x--a .sm-fo-bd{left:0;right:0;bottom:0;height:46%;background:repeating-linear-gradient(135deg,rgba(241,237,226,.09) 0 1px,transparent 1px 10px),#4A3D75;}
.sm-fo-x--a .sm-fo-bl{right:6cqw;top:5cqw;font-size:3.6cqw;}
.sm-fo-x--a .sm-fo-h{position:absolute;left:7cqw;right:7cqw;top:7cqw;font-size:15cqw;}
.sm-fo-x--a .sm-fo-cta{left:7cqw;right:7cqw;bottom:6cqw;font-size:4cqw;}

.sm-fo-x--b{aspect-ratio:4/5;background:var(--sm-cream);color:var(--sm-black);outline:1px solid var(--sm-rule-on-cream);outline-offset:-1px;}
.sm-fo-x--b .sm-fo-bd{left:0;right:0;top:0;height:58%;background:repeating-linear-gradient(135deg,rgba(17,17,17,.08) 0 1px,transparent 1px 10px),#DDD7C9;}
.sm-fo-x--b .sm-fo-bl{left:6cqw;top:5cqw;font-size:3.4cqw;}
.sm-fo-x--b .sm-fo-h{position:absolute;left:6cqw;right:6cqw;top:63%;font-size:10.5cqw;letter-spacing:-.045em;line-height:.95;}
.sm-fo-x--b .sm-fo-cta{left:6cqw;right:6cqw;bottom:5cqw;font-size:3.4cqw;color:var(--sm-muted-on-cream);}
.sm-fo-x--b .sm-fo-cta b{font-weight:400;color:var(--sm-black);}

.sm-fo-x--c{aspect-ratio:9/16;background:var(--sm-black);color:var(--sm-cream);border-radius:10px;}
.sm-fo-bar{position:absolute;left:5cqw;right:5cqw;top:5cqw;display:flex;gap:2cqw;}
.sm-fo-bar i{flex:1;height:1.3cqw;border-radius:1cqw;background:rgba(241,237,226,.35);}
.sm-fo-bar i:first-child{background:var(--sm-cream);}
.sm-fo-mid{position:absolute;left:8cqw;right:8cqw;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:7cqw;}
.sm-fo-mid i{width:7cqw;height:7cqw;border-radius:50%;background:var(--sm-coral);}
.sm-fo-x--c .sm-fo-h{font-size:17cqw;}
.sm-fo-x--c .sm-fo-up{left:0;right:0;bottom:7cqw;text-align:center;font-size:5.4cqw;}

.sm-fo-x--d{aspect-ratio:16/9;background:var(--sm-coral);color:var(--sm-black);}
.sm-fo-x--d .sm-fo-h{position:absolute;left:6cqw;top:50%;translate:0 -50%;font-size:9cqw;letter-spacing:-.045em;line-height:.95;}
.sm-fo-x--d .sm-fo-pille{right:5cqw;bottom:6cqw;padding:2.2cqw 3.6cqw;border-radius:6cqw;background:var(--sm-black);color:var(--sm-cream);font-size:3.4cqw;}
.sm-fo-x--d .sm-fo-mark{position:absolute;right:5cqw;top:6cqw;font-size:3.8cqw;font-weight:600;letter-spacing:-.035em;}

.sm-fo-x--e{aspect-ratio:1.91/1;background:var(--sm-violet);color:var(--sm-cream);}
.sm-fo-x--e .sm-fo-bd{left:0;top:0;bottom:0;width:46%;background:repeating-linear-gradient(135deg,rgba(241,237,226,.09) 0 1px,transparent 1px 10px),#4A3D75;}
.sm-fo-x--e .sm-fo-bl{left:4cqw;bottom:4cqw;font-size:3cqw;}
.sm-fo-x--e .sm-fo-h{position:absolute;left:52%;right:4cqw;top:50%;translate:0 -50%;font-size:7.6cqw;letter-spacing:-.045em;line-height:.95;}
.sm-fo-x--e .sm-fo-up{left:52%;bottom:5cqw;font-size:3cqw;}

.sm-fo-x--f{aspect-ratio:16/9;background:#1C1B19;color:var(--sm-cream);}
.sm-fo-x--f .sm-fo-bd{inset:0;background:repeating-linear-gradient(135deg,rgba(241,237,226,.06) 0 1px,transparent 1px 10px);}
.sm-fo-play{position:absolute;left:5cqw;top:5cqw;width:9cqw;height:9cqw;border-radius:50%;background:var(--sm-coral);display:flex;align-items:center;justify-content:center;}
.sm-fo-play i{width:0;height:0;margin-left:.8cqw;border-top:2cqw solid transparent;border-bottom:2cqw solid transparent;border-left:3.2cqw solid var(--sm-black);}
.sm-fo-x--f .sm-fo-h{position:absolute;left:5cqw;right:5cqw;bottom:17cqw;text-align:center;font-size:7cqw;letter-spacing:-.04em;}
.sm-fo-zeit{position:absolute;left:5cqw;right:5cqw;bottom:6cqw;display:flex;align-items:center;gap:3cqw;font-size:3.2cqw;}
.sm-fo-zeit i{flex:1;height:.8cqw;background:rgba(241,237,226,.3);}
.sm-fo-zeit i b{display:block;width:38%;height:100%;background:var(--sm-cream);}
.sm-fo-cta{position:absolute;display:flex;justify-content:space-between;align-items:center;}
.sm-fo-cta i{flex:none;width:4cqw;height:4cqw;border-radius:50%;background:var(--sm-coral);}
.sm-fo-hint{display:none;}
/* Wischleisten: das Skript macht sie nur dann zum Tabulatorziel, wenn
   sie wirklich scrollen, sonst stuende auf dem Rechner ein Halt ohne
   Wirkung in der Reihenfolge. */
.sm-fo-m:focus-visible,.sm-pl:focus-visible{outline:2px solid currentColor;outline-offset:4px;}

/* ---------- 3. Plakate: die vier Grundsaetze als Motivstrecke ---------- */
.sm-pl{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start;}
.sm-pl-c{container-type:inline-size;display:grid;aspect-ratio:3/4;background:var(--sm-c,var(--sm-violet));color:var(--sm-ink,var(--sm-cream));rotate:var(--sm-tilt,0deg);box-shadow:0 2px 6px rgba(17,17,17,.10);transition:rotate .45s cubic-bezier(.3,.7,.2,1),translate .45s cubic-bezier(.3,.7,.2,1),box-shadow .45s;}
.sm-pl-i{display:flex;flex-direction:column;padding:8.45cqw 8.45cqw 7cqw;min-width:0;}
.sm-pl-top{display:flex;justify-content:space-between;align-items:center;}
.sm-pl-top .sm-mono{font-size:clamp(10px,3.87cqw,12px);}
.sm-pl-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--sm-dot,var(--sm-coral));}
.sm-pl-t{margin-top:9.9cqw;font-size:clamp(26px,14.8cqw,46px);font-weight:500;letter-spacing:-.045em;line-height:.95;text-wrap:balance;}
.sm-pl-p{margin-top:auto;font-size:clamp(14px,5.28cqw,16px);line-height:1.45;text-wrap:pretty;}
.sm-pl-f{margin-top:6.3cqw;padding-top:4.2cqw;border-top:1.5px solid currentColor;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.sm-pl-f .sm-mono{font-size:clamp(9px,3.5cqw,11px);}
.sm-pl-mark{font-size:clamp(12px,4.9cqw,15px);font-weight:600;letter-spacing:-.035em;}
.sm-pl-mark i{font-style:normal;color:var(--sm-dot,var(--sm-coral));}
.sm-pl-nav{display:none;}
@media (hover:hover){
  .sm-pl-c:hover{rotate:0deg;translate:0 -10px;box-shadow:0 24px 40px rgba(17,17,17,.22);z-index:1;}
  .sm-fo-x:hover{transform:translateY(-8px);box-shadow:0 20px 34px rgba(17,17,17,.22);}
}
/* Bausteine als Mediaplan-Zeile. Der Trennpunkt gehoert zum folgenden
   Wort, nicht zum vorangehenden: sonst steht er am Zeilenende allein. */
.sm-pl-b{margin-top:clamp(40px,6vh,64px);padding-top:18px;border-top:1.5px solid var(--sm-black);display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:baseline;}
.sm-pl-bl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;padding:0;list-style:none;}
.sm-pl-bl li{display:flex;align-items:center;font-size:clamp(17px,1.7vw,22px);font-weight:500;letter-spacing:-.02em;}
.sm-pl-bl li+li::before{content:"";flex:none;width:9px;height:9px;margin-right:16px;border-radius:50%;background:var(--sm-coral);}

/* ---------- 4. Weg: die Logo-Linie steigt in vier Stufen ---------- */
/* Die Flaeche traegt das Seitenverhaeltnis der Vorlage (1184 : 390),
   deshalb sitzen Linie und Text an denselben Prozentwerten, egal wie
   breit das Fenster ist. Die Stufenhoehe steht je Schritt in --l,
   gerechnet im Koordinatensystem des SVG. */
.sm-we{margin-top:clamp(40px,6vh,72px);}
.sm-we-b{position:relative;aspect-ratio:1184/390;}
.sm-we-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Linie und Punkt bewegt seit sm2-53 das Skript (weg()) in einem Takt,
   der Punkt laeuft dabei genau auf der Linie. Ohne Skript steht Schritt 01. */
.sm-we-dot{position:absolute;z-index:1;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--sm-coral);box-shadow:0 0 0 5px var(--sm-cream);left:calc(var(--a,0)*25% + 3%);top:calc(var(--al,236)/390*100%);}
.sm-we-s{position:absolute;top:0;bottom:0;left:calc(var(--i)*25%);width:22.97%;text-align:left;color:var(--sm-muted-on-cream);transition:color .3s;}
.sm-we-s.is-on{color:var(--sm-black);}
/* Die Schaltflaeche ist auf dem Rechner die ganze Spalte hoch. Ein
   Rahmen darum waere ein 270 mal 440 Pixel grosser Kasten, deshalb
   bekommt der Textblock den Rahmen. */
.sm-we-s:focus-visible{outline:none;}
.sm-we-s:focus-visible .sm-we-h{outline:2px solid currentColor;outline-offset:8px;}
.sm-we-h{position:absolute;left:0;right:0;bottom:calc((390 - var(--l))/390*100% + 16px);display:flex;flex-direction:column;gap:10px;}
.sm-we-n{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1;}
.sm-we-d{position:absolute;left:0;right:0;top:calc(var(--l)/390*100% + 34px);font-size:clamp(15px,1.4vw,17px);line-height:1.5;text-wrap:pretty;}
.sm-we-pt{display:none;}

/* ---------- Mobil und Tablet ---------- */
@media (max-width:1060px){
  .sm-fo{grid-template-columns:minmax(0,1fr);gap:24px;}
  .sm-fo-li{padding:clamp(24px,5cqw,44px) clamp(22px,4.6cqw,40px);gap:clamp(24px,5.6cqw,44px);}
  /* 18,3cqw ist das Mass der Vorlage: 64 px bei 350 px Kartenbreite.
     Die Deckelung greift erst auf dem Tablet, wo die Karte ueber die
     ganze Breite steht und 18 Prozent davon zu gross waeren. */
  .sm-fo-lh{font-size:min(18.3cqw,84px);}
  .sm-fo-lp{padding-top:14px;font-size:16px;}
  /* Die Reihen loesen sich auf, die sechs Motive stehen in einer
     Wischleiste. Die Breiten sind hier fest: eine Leiste wird
     gewischt, nicht gerechnet. */
  .sm-fo-m{flex-direction:row;justify-content:flex-start;align-items:flex-end;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--sm-gutter));padding:0 var(--sm-gutter) 4px;scroll-padding-inline:var(--sm-gutter);}
  .sm-fo-m::-webkit-scrollbar{display:none;}
  .sm-fo-r{display:contents;}
  .sm-fo-c{width:var(--wm);scroll-snap-align:start;gap:8px;}
  .sm-fo-hint{display:block;margin-top:14px;text-align:right;}

  .sm-pl{grid-template-columns:repeat(2,minmax(0,1fr));}

  .sm-pl-b{grid-template-columns:minmax(0,1fr);gap:14px;}
  .sm-pl-bl li{font-size:clamp(16px,2.4vw,19px);}
  .sm-pl-bl{gap:8px 11px;}
  .sm-pl-bl li+li::before{width:7px;height:7px;margin-right:11px;}

  /* Der Weg steht senkrecht. Die Linie ist hier kein SVG mehr, sondern
     ein Strich je Schritt, damit nichts gerechnet werden muss. */
  .sm-we-b{aspect-ratio:auto;display:flex;flex-direction:column;}
  .sm-we-svg,.sm-we-dot{display:none;}
  .sm-we-s{position:relative;left:auto;top:auto;bottom:auto;width:100%;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 20px;padding:0 0 32px;}
  .sm-we-s::before{content:"";position:absolute;left:12px;top:22px;bottom:-22px;width:4px;background:var(--sm-black);transition:background-color .5s;}
  .sm-we-s:last-child::before{display:none;}
  .sm-we-s.is-done:not(.is-on)::before{background:var(--sm-coral);}
  .sm-we-pt{display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:1/span 2;align-self:start;width:28px;height:44px;}
  .sm-we-pt i{width:12px;height:12px;border-radius:50%;background:var(--sm-black);box-shadow:0 0 0 4px var(--sm-cream);transition:width .3s,height .3s,background-color .3s;}
  .sm-we-s.is-done .sm-we-pt i{background:var(--sm-coral);}
  .sm-we-s.is-on .sm-we-pt i{width:22px;height:22px;}
  .sm-we-h{position:static;grid-column:2;grid-row:1;gap:8px;padding-top:4px;}
  .sm-we-n{font-size:clamp(24px,3.4vw,28px);}
  .sm-we-d{position:static;grid-column:2;grid-row:2;margin-top:12px;font-size:16px;}
}
/* Zwischen 768 und 1099 Pixeln stehen die vier Spalten zu zweit
   nebeneinander. Zehn Zeilen statt fuenf, damit die untere Reihe ihre
   eigene Hoehe bekommt; der Abstand zwischen den Reihen haengt an den
   beiden unteren Spalten, weil ein Zeilenabstand sonst auch zwischen
   Ziel und Linie stuende. */
@media (min-width:768px) and (max-width:1099.98px){
  .sm-ar{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(10,auto);column-gap:40px;}
  .sm-ar-c:nth-child(n+3){margin-top:48px;}
  .sm-ar-n{font-size:clamp(20px,calc((100cqi - 40px) * .049),30px);}
}
/* Auf dem Telefon stehen die vier untereinander, 36 Pixel auseinander.
   Hier braucht es kein Raster ueber die Spalten hinweg, also auch kein
   subgrid: jede Spalte bringt ihre eigene Hoehe mit. */
@media (max-width:767.98px){
  .sm-ar{margin-top:clamp(26px,4vh,32px);grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:36px;}
  .sm-ar-c{grid-row:auto;grid-template-rows:none;}
  .sm-ar-w{font-size:10px;}
  .sm-ar-z{margin-top:6px;min-height:0;font-size:18px;letter-spacing:-.015em;}
  .sm-ar-r{margin-top:14px;}
  .sm-ar-r::before{top:-4px;width:9px;height:9px;}
  .sm-ar-n{margin-top:12px;font-size:22px;font-size:clamp(22px,9.8cqi,28px);letter-spacing:-.025em;}
  .sm-ar-p{margin-top:6px;line-height:1.5;}
}
@media (max-width:767px){
  .sm-pl{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--sm-gutter));padding:0 var(--sm-gutter) 4px;scroll-padding-inline:var(--sm-gutter);}
  .sm-pl::-webkit-scrollbar{display:none;}
  .sm-pl-c{flex:none;width:min(290px,calc(100vw - 2*var(--sm-gutter) - 28px));rotate:0deg;scroll-snap-align:start;}
  .sm-pl-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;}
  .sm-pl-dots{display:flex;gap:6px;}
  .sm-pl-dots i{width:6px;height:6px;border-radius:3px;background:rgba(17,17,17,.25);transition:width .3s,background-color .3s;}
  .sm-pl-dots i.is-on{width:22px;background:var(--sm-black);}
}
@media (prefers-reduced-motion:reduce){
  .sm-fo-x,.sm-pl-c,.sm-pl-dots i,
  .sm-we-p1,.sm-we-dot,.sm-we-s,.sm-we-s::before,.sm-we-pt i{transition:none;}
}

/* ============================================================
   Leistungsseite Filmproduktion: Felder, Ablauf
   Vorlage: leistungsseite-filmproduktion aus "Filmproduktion
   seite.zip", 10.10.2026. Zwei Bereiche, in der Reihenfolge der
   Seite (das Kinoprogramm .sm-ki-* ist am 11.10.2026 entfallen):
     .sm-fd-*  Feld-Muster   "Sechs Wege" und "Einmal gedreht."
     .sm-fs-*  Ablauf        "Von der Idee zum fertigen Film."
   Das Feld-Muster nennt die Vorlage selbst als gemeinsames Mass:
   Nummernzeile, Haarlinie mit Coral-Punkt, Titel, Text. Es steht
   hier zweimal, einmal auf Cream dreispaltig und einmal auf Soft
   Black vierspaltig, und traegt seine beiden Farben in Variablen.
   Dasselbe Muster liegt als .sm-ar-* auf der Kampagnen-Seite, dort
   mit einer fuenften Zeile fuer das Ziel. Zusammenlegen lohnt sich,
   sobald es ein drittes Mal gebraucht wird.
   Die Vorlage rechnet mit 1280 px Fensterbreite und 1184 px
   Satzspiegel, die Site hat 1440 und 1328. Alles, was zur Leinwand
   im Verhaeltnis stehen muss, haengt deshalb an cqw, der Rest an
   clamp(). Umbruchstellen wie ueberall: 1060 px und 768 px.
   ============================================================ */

/* Webflow setzt Aussenabstaende an h1-h6, p, figure und figcaption; der
   Reset der Site steht in :where() und verliert dagegen (Punkt 45 der
   Notizen). Das hier nimmt es fuer die drei Bereiche zurueck und muss
   vor den Regeln stehen, die die Abstaende setzen. */
.sm-fd-t,.sm-fd-p,.sm-fs-n,.sm-fs-nr,.sm-fs-h,.sm-fs-p{margin:0;}
/* In den Schritten gilt die Schriftfarbe der Flaeche,
   sonst greift .sm-dark .sm-mono und setzt das gedaempfte Grau. */
.sm-fs-s .sm-mono{color:inherit;}

/* ---------- 1. Feld-Muster: Nummer, Linie mit Punkt, Titel, Text ---------- */
/* Die Linien aller Spalten sollen auf einer Hoehe liegen, auch wenn ein
   Titel einmal zweizeilig umbricht. subgrid gibt jeder Spalte dieselben
   vier Zeilen. Der Abstand zwischen zwei Reihen steht als Aussenabstand
   an den Feldern der zweiten Reihe und nicht als row-gap: row-gap wuerde
   bei subgrid auch zwischen Nummer, Linie, Titel und Text greifen. */
.sm-fd{--fd-rule:rgba(17,17,17,.3);--fd-text:var(--sm-muted-on-cream);margin-top:clamp(40px,6vh,72px);display:grid;column-gap:clamp(24px,3.6vw,48px);row-gap:0;}
.sm-dark .sm-fd{--fd-rule:rgba(241,237,226,.3);--fd-text:#CFCAC0;}
.sm-fd-c{display:grid;grid-row:span 4;grid-template-rows:subgrid;}
.sm-fd-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;}
.sm-fd-top span{white-space:nowrap;}
.sm-fd-r{position:relative;margin-top:14px;height:1px;background:var(--fd-rule);}
.sm-fd-r::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--fd-dot,var(--sm-coral));}
.sm-fd-t{margin-top:22px;font-size:clamp(21px,1.95vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.05;}
.sm-fd-p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--fd-text);text-wrap:pretty;}
/* Seit sm2-54: verlinkte Felder (Formate auf /filmproduktion, Beispiele auf
   den Film-Unterseiten). Die ganze Karte ist der Link; ein kleiner Pfeil in
   der Punktfarbe hinter dem Titel zeigt es an und rueckt beim Zeigen ein
   Stueck nach rechts. Linie und Punkt reagieren wie bei allen Feldern. */
a.sm-fd-c{color:inherit;text-decoration:none;}
.sm-fd-go{display:inline-block;margin-left:.28em;font-weight:400;color:var(--fd-dot,var(--sm-coral));transition:transform .35s var(--sm-ease-soft);}
a.sm-fd-c:focus-visible{outline:2px solid currentColor;outline-offset:8px;}
@media (hover:hover){a.sm-fd-c:hover .sm-fd-go{transform:translateX(5px);}}
.sm-fd--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(8,auto);}
.sm-fd--3>.sm-fd-c:nth-child(n+4){margin-top:clamp(44px,6vh,64px);}
.sm-fd--4{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);}

/* ---------- 2. Ablauf: sechs Schritte auf einer Zeitleiste ---------- */
/* Die Coral-Linie endet am gewaehlten Punkt. Ihre Breite ist eine Rechnung
   aus der Nummer des Schrittes, die das Skript als --fs setzt: eine Spalte
   ist ein Sechstel breit, dazu die halbe Breite des grossen Punktes. */
.sm-fs{margin-top:clamp(44px,7vh,72px);}
.sm-fs-t{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
.sm-fs-t::before{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:var(--sm-black);}
.sm-fs-t::after{content:"";position:absolute;left:0;bottom:9px;height:4px;width:calc(var(--fs,0)*100%/6 + 12px);background:var(--sm-coral);transition:width .6s cubic-bezier(.6,0,.2,1);}
.sm-fs-s{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:0 16px 52px 0;background:none;border:0;font:inherit;color:#8C877C;text-align:left;cursor:pointer;transition:color .3s;}
.sm-fs-s:focus-visible{outline-offset:-2px;}
.sm-fs-s.is-done{color:var(--sm-black);}
.sm-fs-s .sm-mono{font-size:12px;}
.sm-fs-n{font-size:clamp(17px,1.72vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.1;}
/* Die Mitte des Punktes liegt immer auf der Linie, 11 px ueber der Grundkante:
   offen 14 px ab 4 px, gewaehlt 24 px ab -1 px. */
.sm-fs-d{position:absolute;left:0;bottom:4px;width:14px;height:14px;border-radius:50%;background:var(--sm-cream);box-shadow:inset 0 0 0 2px var(--sm-black);transition:width .4s var(--sm-ease-spring),height .4s var(--sm-ease-spring),bottom .4s var(--sm-ease-spring),background-color .4s,box-shadow .4s;}
.sm-fs-s.is-done .sm-fs-d{background:var(--sm-coral);box-shadow:none;}
.sm-fs-s.is-on .sm-fs-d{bottom:-1px;width:24px;height:24px;background:var(--sm-coral);box-shadow:0 0 0 5px var(--sm-cream);}

/* Die sechs Tafeln liegen im selben Rasterfeld uebereinander. Dadurch ist
   der Bereich so hoch wie die laengste und die Seite springt beim Wechsel
   nicht. Auf dem Telefon stehen dieselben Tafeln untereinander. */
.sm-fs-x{margin-top:clamp(34px,5.4vh,56px);display:grid;}
.sm-fs-xi{grid-area:1/1;display:grid;grid-template-columns:clamp(110px,14.6vw,200px) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(22px,3vw,40px);align-items:end;opacity:0;visibility:hidden;transition:opacity .5s var(--sm-ease-soft),visibility 0s linear .5s;}
.sm-fs-xi.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--sm-ease-soft),visibility 0s;}
.sm-fs-nr{font-size:clamp(68px,10.2vw,140px);font-weight:500;letter-spacing:-.06em;line-height:.8;}
.sm-fs-xh{display:flex;flex-direction:column;gap:12px;}
.sm-fs-h{font-size:clamp(26px,3.5vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1;}
.sm-fs-p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--sm-muted-on-cream);max-width:48ch;text-wrap:pretty;}

@media (hover:hover){
}

/* ---------- Filmproduktion: Tablet und Telefon ---------- */
@media (max-width:1060px){
  /* Die Zeitleiste braucht sechs lesbare Spalten. Darunter steht der Weg
     senkrecht, mit allen sechs Schritten sichtbar und ohne Selbstlauf. */
  .sm-fs-t{display:none;}
  .sm-fs-x{margin-top:0;display:block;}
  .sm-fs-xi{display:grid;grid-template-columns:25px minmax(0,1fr);gap:0 18px;align-items:start;position:relative;padding-bottom:28px;opacity:1;visibility:visible;transition:none;}
  .sm-fs-xi::before{content:"";position:absolute;left:11px;top:18px;bottom:-6px;width:3px;background:var(--sm-black);}
  .sm-fs-xi:last-child::before{display:none;}
  .sm-fs-xi::after{content:"";position:absolute;left:6.5px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--sm-black);box-shadow:0 0 0 4px var(--sm-cream);}
  .sm-fs-xi:last-child::after{left:3.5px;top:5px;width:18px;height:18px;background:var(--sm-coral);}
  .sm-fs-nr{display:none;}
  .sm-fs-xh{grid-column:2;gap:6px;}
  .sm-fs-h{font-size:clamp(20px,2.6vw,26px);}
  .sm-fs-p{grid-column:2;margin-top:6px;font-size:15px;line-height:1.5;}
  .sm-fs-von{display:none;}
}
@media (min-width:768px) and (max-width:1060px){
  .sm-fd--3,.sm-fd--4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;}
  .sm-fd--3{grid-template-rows:repeat(12,auto);}
  .sm-fd--4{grid-template-rows:repeat(8,auto);}
  .sm-fd--3>.sm-fd-c:nth-child(n+3),.sm-fd--4>.sm-fd-c:nth-child(n+3){margin-top:48px;}
}
@media (max-width:767.98px){
  .sm-fd{margin-top:clamp(26px,4vh,32px);row-gap:36px;}
  .sm-fd--3,.sm-fd--4{grid-template-columns:minmax(0,1fr);grid-template-rows:none;}
  .sm-fd-c{grid-row:auto;grid-template-rows:none;}
  .sm-fd--3>.sm-fd-c:nth-child(n+4),.sm-fd--4>.sm-fd-c:nth-child(n+3){margin-top:0;}
  .sm-fd-top{font-size:10px;}
  .sm-fd-r{margin-top:10px;}
  .sm-fd-r::before{top:-3.5px;width:8px;height:8px;}
  .sm-fd-t{margin-top:14px;font-size:22px;letter-spacing:-.025em;line-height:1.1;}
  .sm-fd-p{margin-top:8px;line-height:1.5;}

  .sm-fs{margin-top:clamp(26px,4vh,32px);}
  .sm-fs-h{font-size:22px;letter-spacing:-.025em;line-height:1.1;}
}

/* ============================================================
   Leistungsseiten Fotografie und Social Media.
   Vorlagen: leistungsseite-fotografie und leistungsseite-social-media
   aus "Fotografie Seite.zip" und "Social Media Seite.zip", 10.10.2026.
   Vier Bausteine:
     .sm-la-*  Lamellen   "Ein paar Bilder, die bleiben."  (Fotografie)
     .sm-lz-*  Leistungen fuenf Zeilen in zwei Spalten     (Fotografie)
     .sm-fe-*  Feed       "So sieht das im Feed aus."      (Social Media)
     .sm-ab-*  Ablauf     Heute, Umbruch, Morgen           (beide Seiten)
   Die Leistungen der Social-Media-Seite benutzen das Feld-Muster
   .sm-fd-* der Filmproduktion, wie es die Vorlage ausdruecklich
   verlangt. Der Punkt nimmt dafuer jetzt --fd-dot an, voreingestellt
   Coral, auf der Social-Seite Teal.
   Das Ablaufband wiederholt die Kante der Marke zwischen Schritt eins
   und zwei, mit demselben Pfad und denselben Massen wie der Kopf des
   Haltungsbereichs .sm-umbruch-head.
   Das Handy im Feed rechnet innen in cqw: --px ist eine Bildschirm-
   breite von 250 px wert, also bleibt alles darin proportional,
   egal wie breit das Handy gerade gezeichnet wird.
   Umbruchstellen wie ueberall: 1060 px und 768 px.
   ============================================================ */
.sm-lz-t,.sm-lz-d,.sm-ab-t,.sm-ab-d,.sm-fe-h h2,.sm-la-hl h2,.sm-wo-f,.sm-fe-ct{margin:0;}

/* Lamellen */
.sm-la-w{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px 24px;}
.sm-la-hl{display:flex;flex-direction:column;gap:10px;min-width:0;}
.sm-la-hl h2{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.04;}
.sm-la-go{color:inherit;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;padding-bottom:4px;border-bottom:1.5px solid currentColor;}
.sm-la{grid-column:1/-1;margin-top:clamp(24px,3.4vh,32px);display:flex;gap:6px;height:clamp(300px,42vh,380px);}
.sm-la-i{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;overflow:hidden;background:var(--sm-black);color:var(--sm-cream);font:inherit;cursor:pointer;transition:flex .7s cubic-bezier(.6,0,.2,1);}
.sm-la-i:focus-visible{outline-offset:-3px;}
.sm-la-i.is-on{flex:5 1 0;}
.sm-la-i img{display:block;width:100%;height:100%;object-fit:cover;}
.sm-la-g{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(17,17,17,0) 0%,rgba(17,17,17,.72) 100%);opacity:0;transition:opacity .3s;}
.sm-la-c{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--sm-mono);font-size:11px;white-space:nowrap;opacity:0;transition:opacity .3s;}
.sm-la-c::after{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--sm-coral);}
.sm-la-i.is-on .sm-la-g{opacity:1;transition:opacity .3s .2s;}
.sm-la-i.is-on .sm-la-c{opacity:1;transition:opacity .3s .35s;}

/* Leistungszeilen */
.sm-lz{margin-top:clamp(8px,1.6vh,18px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,56px);}
.sm-lz-i{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:24px 0;border-bottom:1px solid var(--sm-rule-on-cream);}
.sm-dark .sm-lz-i{border-bottom-color:var(--sm-rule-on-dark);}
.sm-lz-n{padding-top:6px;}
.sm-lz-b{display:flex;flex-direction:column;gap:6px;min-width:0;}
.sm-lz-t{font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.15;}
.sm-lz-d{font-size:16px;line-height:1.5;color:var(--sm-muted-on-cream);text-wrap:pretty;}
.sm-dark .sm-lz-d{color:var(--sm-muted-on-dark);}

/* Feed */
.sm-fe-s{background:var(--sm-teal);color:var(--sm-ink-on-teal);}
.sm-fe-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;}
.sm-fe-hl{display:flex;flex-direction:column;gap:10px;min-width:0;}
.sm-fe-h h2{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.04;}
.sm-fe-r{margin-top:clamp(34px,5vh,56px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,3.3vw,48px);}
.sm-fe-c{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.1vw,16px);min-width:0;}
.sm-fe-c--m{margin-bottom:clamp(22px,3.3vw,48px);}
.sm-fe-ct{font-family:var(--sm-mono);font-size:clamp(10px,.9vw,12px);white-space:nowrap;}
.sm-fe-p{--px:.431cqw;container-type:inline-size;position:relative;width:clamp(178px,18.6vw,250px);aspect-ratio:250/520;overflow:hidden;border:clamp(6px,.67vw,9px) solid var(--sm-black);border-radius:clamp(26px,2.8vw,38px);background:#2A2A2A;color:var(--sm-cream);box-shadow:0 24px 48px rgba(17,17,17,.28);}
.sm-fe-st{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(241,237,226,.06) 0 1px,transparent 1px 12px);}
.sm-fe-lb{position:absolute;left:calc(14*var(--px));top:calc(18*var(--px));font-family:var(--sm-mono);font-size:max(8px,calc(11*var(--px)));}
.sm-fe-ic{position:absolute;right:calc(10*var(--px));bottom:calc(96*var(--px));display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--px));}
.sm-fe-ic span{width:calc(30*var(--px));height:calc(30*var(--px));border-radius:50%;border:1.5px solid var(--sm-cream);}
.sm-fe-tx{position:absolute;left:calc(14*var(--px));right:calc(56*var(--px));bottom:calc(26*var(--px));display:flex;flex-direction:column;gap:calc(6*var(--px));}
.sm-fe-nm{display:flex;align-items:center;gap:calc(8*var(--px));font-size:max(9px,calc(12*var(--px)));font-weight:600;}
.sm-fe-nm img{width:calc(22*var(--px));height:calc(22*var(--px));border-radius:50%;}
.sm-fe-cp{font-size:max(8px,calc(11*var(--px)));line-height:1.35;}
.sm-fe-pg{position:absolute;left:0;right:0;bottom:0;height:calc(3*var(--px));background:rgba(241,237,226,.25);}
.sm-fe-pg i{display:block;width:100%;height:100%;background:var(--sm-cream);transform:scaleX(.38);transform-origin:left;}
.sm-fe-p--pr{background:var(--sm-cream);color:var(--sm-black);}
.sm-fe-pf{padding:calc(30*var(--px)) calc(14*var(--px)) calc(12*var(--px));display:flex;align-items:center;gap:calc(12*var(--px));}
.sm-fe-pf img{flex:none;width:calc(56*var(--px));height:calc(56*var(--px));border-radius:50%;}
.sm-fe-pf div{display:flex;flex-direction:column;gap:calc(3*var(--px));min-width:0;}
.sm-fe-pf b{font-size:max(9px,calc(13*var(--px)));font-weight:600;}
.sm-fe-pf span{font-size:max(8px,calc(10*var(--px)));line-height:1.35;}
.sm-fe-gr{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(2*var(--px));}
.sm-fe-gr i{display:block;aspect-ratio:3/4;background:var(--k,var(--sm-black));}
.sm-fe-p--so{background:var(--sm-violet);}
.sm-fe-bars{position:absolute;left:calc(10*var(--px));right:calc(10*var(--px));top:calc(12*var(--px));display:flex;gap:calc(4*var(--px));}
.sm-fe-bars i{position:relative;flex:1;height:calc(2*var(--px));overflow:hidden;background:rgba(241,237,226,.35);}
.sm-fe-bars i::after{content:"";position:absolute;inset:0;background:var(--sm-cream);transform:scaleX(0);transform-origin:left;}
.sm-fe-bars i:nth-child(-n+2){background:var(--sm-cream);}
.sm-fe-sn{position:absolute;left:calc(12*var(--px));top:calc(24*var(--px));display:flex;align-items:center;gap:calc(7*var(--px));font-size:max(8px,calc(11*var(--px)));font-weight:600;}
.sm-fe-sn img{width:calc(20*var(--px));height:calc(20*var(--px));border-radius:50%;}
.sm-fe-hw{position:absolute;left:calc(16*var(--px));right:calc(16*var(--px));top:42%;font-family:var(--sm-serif);font-style:italic;font-weight:300;font-size:max(18px,calc(32*var(--px)));line-height:1.05;letter-spacing:-.02em;transform:rotate(-4deg);}
.sm-fe-bt{position:absolute;left:50%;bottom:calc(36*var(--px));transform:translateX(-50%);padding:calc(9*var(--px)) calc(16*var(--px));background:var(--sm-cream);color:var(--sm-black);font-size:max(9px,calc(12*var(--px)));font-weight:500;white-space:nowrap;}

/* Leben im Feed. Das Skript setzt is-live, solange der Bereich im Bild steht,
   und nimmt es wieder weg; bei prefers-reduced-motion setzt es die Klasse nie,
   dann bleiben die Ruhebilder stehen (Balken bei 38 Prozent, zwei Striche voll). */
@keyframes sm-fe-lauf{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes sm-fe-b1{0%{transform:scaleX(0);}33.3%,100%{transform:scaleX(1);}}
@keyframes sm-fe-b2{0%,33.3%{transform:scaleX(0);}66.6%,100%{transform:scaleX(1);}}
@keyframes sm-fe-b3{0%,66.6%{transform:scaleX(0);}99.9%,100%{transform:scaleX(1);}}
.sm-fe-s.is-live .sm-fe-pg i{animation:sm-fe-lauf 7s linear infinite;}
.sm-fe-s.is-live .sm-fe-bars i{background:rgba(241,237,226,.35);}
.sm-fe-s.is-live .sm-fe-bars i:nth-child(1)::after{animation:sm-fe-b1 9s linear infinite;}
.sm-fe-s.is-live .sm-fe-bars i:nth-child(2)::after{animation:sm-fe-b2 9s linear infinite;}
.sm-fe-s.is-live .sm-fe-bars i:nth-child(3)::after{animation:sm-fe-b3 9s linear infinite;}

/* Redaktionsplan */
.sm-wo{margin-top:clamp(44px,7vh,72px);}
.sm-wo-g{margin-top:14px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.sm-wo-d{display:flex;flex-direction:column;gap:10px;padding:14px;border:1.5px solid var(--sm-black);}
.sm-wo-d--on{background:var(--sm-cream);}
.sm-wo-f{font-size:16px;font-weight:500;}

/* Ablauf: Heute, Umbruch, Morgen */
.sm-ab-s{background:var(--ab-bg,var(--sm-black));color:var(--ab-ink,var(--sm-cream));padding-block:clamp(56px,9vh,96px);}
.sm-ab-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;font-family:var(--sm-mono);font-size:12px;}
.sm-ab{margin-top:clamp(20px,3vh,28px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.sm-ab-r{position:relative;height:40px;}
.sm-ab-r::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;}
.sm-ab-i:last-child .sm-ab-r::before{bottom:auto;top:-1px;}
.sm-ab-i--k .sm-ab-r{display:flex;}
.sm-ab-i--k .sm-ab-r::before{display:none;}
.sm-ab-r1{position:relative;flex:0 0 18%;}
.sm-ab-r1::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;}
.sm-ab-k{flex:none;display:block;width:clamp(64px,7vw,96px);height:40px;overflow:visible;}
.sm-ab-k path{fill:none;stroke:currentColor;stroke-width:2;}
.sm-ab-r2{position:relative;flex:1 1 auto;}
.sm-ab-r2::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:currentColor;}
.sm-ab-r2 i{position:absolute;left:15px;bottom:-7.5px;width:15px;height:15px;border-radius:50%;background:currentColor;}
.sm-ab-x{padding:28px clamp(24px,2.8vw,40px) 0 0;display:flex;flex-direction:column;gap:10px;}
.sm-ab-i:last-child .sm-ab-x{padding-right:0;}
.sm-ab-n{font-family:var(--sm-mono);font-size:12px;}
.sm-ab-t{font-size:clamp(22px,2.3vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.1;}
.sm-ab-d{font-size:16px;line-height:1.55;text-wrap:pretty;}

@media (hover:hover){
  .sm-la-go:hover{color:var(--sm-coral);border-bottom-color:var(--sm-coral);}
  /* Feld-Muster: beim Ueberfahren zieht sich die Haarlinie in der Akzentfarbe
     von links nach rechts zu, der Punkt waechst und die Nummer wird wach.
     Gilt fuer alle drei Feld-Raster (Leistungen auf Social Media, Formate und
     Wirkung auf der Filmproduktion), weil es ein Baustein ist. */
  .sm-fd-r::before{transition:transform .45s var(--sm-ease-spring);}
  .sm-fd-r::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--fd-dot,var(--sm-coral));transition:width .55s var(--sm-ease-soft);}
  .sm-fd-top{transition:color .35s;}
  .sm-fd-c:hover .sm-fd-r::after{width:100%;}
  .sm-fd-c:hover .sm-fd-r::before{transform:scale(1.45);}
  .sm-fd-c:hover .sm-fd-top{color:var(--sm-black);}
  .sm-dark .sm-fd-c:hover .sm-fd-top{color:var(--sm-cream);}
  /* Feed: das Handy hebt sich leicht an, als nehme man es in die Hand.
     Dazu je Handy ein eigener Griff: beim Reel ploppen die drei Zeichen
     nacheinander, bei der Story wechselt der Knopf auf Coral. */
  .sm-fe-p{transition:transform .5s var(--sm-ease-soft),box-shadow .5s var(--sm-ease-soft);}
  .sm-fe-c:hover .sm-fe-p{transform:translateY(-6px);box-shadow:0 34px 60px rgba(17,17,17,.34);}
  .sm-fe-ic span{transition:transform .4s var(--sm-ease-spring);}
  .sm-fe-c:hover .sm-fe-ic span{transform:scale(1.18);}
  .sm-fe-c:hover .sm-fe-ic span:nth-child(2){transition-delay:.07s;}
  .sm-fe-c:hover .sm-fe-ic span:nth-child(3){transition-delay:.14s;}
  .sm-fe-bt{transition:background-color .35s var(--sm-ease-soft);}
  .sm-fe-c:hover .sm-fe-bt{background:var(--sm-coral);}
}
@media (hover:hover) and (min-width:768px){
  /* Ein Tag im Redaktionsplan kehrt sich um, solange der Zeiger darauf steht. */
  .sm-wo-d{transition:background-color .3s var(--sm-ease-soft),color .3s var(--sm-ease-soft);}
  .sm-wo-d:hover{background:var(--sm-black);color:var(--sm-cream);}
  .sm-wo-d:hover .sm-mono{color:var(--sm-cream);}
}

@media (max-width:1060px){
  .sm-la{height:clamp(260px,34vh,320px);}
  .sm-fe-r{gap:clamp(16px,2.6vw,32px);}
}

@media (min-width:768px) and (max-width:1060px){
  .sm-lz-i{padding:20px 0;}
  .sm-lz{column-gap:32px;}
}

@media (max-width:767.98px){
  .sm-la-w{grid-template-columns:minmax(0,1fr);}
  .sm-la-hl{order:1;}
  .sm-la{order:2;grid-column:auto;margin-top:22px;gap:4px;height:240px;}
  .sm-la-i:nth-child(n+5){display:none;}
  .sm-la-i.is-on{flex:4 1 0;}
  .sm-la-c{left:12px;right:12px;bottom:12px;font-size:10px;}
  .sm-la-c::after{width:8px;height:8px;}
  .sm-la-go{order:3;justify-self:start;margin-top:0;padding-bottom:0;border-bottom:0;line-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;}
  .sm-lz{grid-template-columns:minmax(0,1fr);}
  .sm-lz-i{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:18px 0;}
  .sm-lz-n{padding-top:4px;}
  .sm-lz-t{font-size:20px;}
  .sm-lz-d{font-size:15px;}
  .sm-fe-r{margin-top:26px;margin-inline:calc(var(--sm-gutter)*-1);padding:0 var(--sm-gutter) 4px;justify-content:flex-start;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .sm-fe-r::-webkit-scrollbar{display:none;}
  .sm-fe-c{flex:none;scroll-snap-align:center;gap:10px;}
  .sm-fe-c--m{margin-bottom:0;}
  .sm-fe-p{width:214px;border-width:8px;border-radius:34px;box-shadow:none;}
  .sm-fe-ct{font-size:11px;}
  .sm-wo{margin-top:32px;}
  .sm-wo-g{margin-top:10px;display:block;border-top:1.5px solid var(--sm-black);}
  .sm-wo-d{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border:0;border-bottom:1px solid rgba(17,17,17,.25);background:none;}
  .sm-wo-f{font-size:15px;}
  .sm-ab-s{padding-block:44px 48px;}
  .sm-ab{position:relative;display:block;margin-top:20px;padding-left:40px;}
  .sm-ab::before{content:"";position:absolute;left:11px;top:10px;bottom:2px;width:2px;background:currentColor;}
  .sm-ab::after{content:"";position:absolute;left:5px;top:4px;width:14px;height:14px;border-radius:50%;background:currentColor;}
  .sm-ab-r,.sm-ab-i--k .sm-ab-r{display:none;}
  .sm-ab-x{padding:0;gap:4px;}
  .sm-ab-i+.sm-ab-i{margin-top:22px;}
  .sm-ab-n{font-size:11px;}
  .sm-ab-t{font-size:21px;}
  .sm-ab-d{font-size:15px;}
}

/* FAQ */
.sm-faq{margin-top:clamp(36px,5vh,64px);}
.sm-faq details{border-bottom:1px solid var(--sm-rule-on-cream);}
.sm-dark .sm-faq details{border-bottom-color:var(--sm-rule-on-dark);}
.sm-faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em;}
.sm-faq summary::-webkit-details-marker{display:none;}
.sm-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-radius:50%;background:var(--sm-coral);transform:translateY(-50%) scale(0);transition:transform .4s var(--sm-ease-spring);}
.sm-faq details[open] summary::after{transform:translateY(-50%) scale(1);}
.sm-faq .sm-faq-a{padding:0 0 24px;font-size:16px;line-height:1.6;max-width:62ch;color:var(--sm-muted-on-cream);}
.sm-dark .sm-faq .sm-faq-a{color:var(--sm-muted-on-dark);}

/* Rechtsseiten */
.sm-legal{max-width:68ch;}
.sm-legal h2{font-size:clamp(20px,1.9vw,25px);font-weight:500;letter-spacing:-.02em;margin-top:clamp(40px,5vh,64px);padding-bottom:10px;border-bottom:1.5px solid var(--sm-black);}
.sm-legal p{margin-top:14px;font-size:16px;line-height:1.65;}
.sm-legal ul{margin-top:12px;}
.sm-legal li{position:relative;padding-left:18px;margin-top:8px;font-size:16px;line-height:1.6;}
.sm-legal li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sm-coral);}

/* Bewegung aus */
@media (prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* Mobil */
/* Das Menue bricht frueher um, weil jetzt alle Bereiche darin stehen */
@media (max-width:1060px){
  .sm-menu .sm-desktop{display:none;}
  .sm-burger{display:block;}
}
@media (min-width:1061px){
  .sm-burger,.sm-ov{display:none;}
}
@media (max-width:900px){
  .sm-row{grid-template-columns:1fr;gap:8px;}
  .sm-row-go{display:none;}
  .sm-umbruch-head{grid-template-columns:minmax(0,1fr) auto clamp(60px,18vw,120px);}
  .sm-umbruch-head svg{width:92px;}
}
@media (max-width:760px){
  /* Fusszeile untereinander, sonst quetschen sich Zeichen und Rechtslinks in eine Zeile */
  .sm-foot-bar{flex-direction:column;align-items:flex-start;gap:16px;}
}
@media (max-width:640px){
  .sm-proj--2,.sm-proj--3{width:100%;}
  .sm-stufe{grid-template-columns:minmax(0,1fr) auto;}
  .sm-stufe-high{grid-column:1 / -1;margin-bottom:0;margin-top:14px;}
  .sm-stufe-dot{bottom:-5.5px;}
  .sm-case-dl{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));}
  /* Der Schriftzug wird so gross, wie die Zeile es zulaesst, und keinen
     Pixel groesser. 5,65 ist die gemessene Laufweite von "seitmorgen."
     samt Punkt, in Vielfachen der Schriftgroesse, plus Reserve. Vorher
     stand hier 17vw; das passte auf manchen Telefonen nicht mehr in die
     Zeile und der Punkt am Ende wurde abgeschnitten. */
  .sm-foot-mark{font-size:min(16vw,calc((100vw - 2*var(--sm-gutter))/5.65));}
}
/* ===== Teil 4: vorhandene Webflow-Huellen und das Kontaktformular ===== */
#gh-kontakt{background:var(--sm-black)!important;color:var(--sm-cream)!important;padding:0 0 clamp(80px,13vh,150px)!important;border:0!important;}
#gh-kontakt .sm-mono{color:var(--sm-muted-on-dark);}
#gh-con-grid{max-width:var(--sm-max)!important;margin:0 auto!important;padding:clamp(40px,6vh,72px) var(--sm-gutter) 0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:clamp(36px,5vw,80px)!important;align-items:start!important;background:none!important;}
@media (min-width:860px){#gh-con-grid{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr)!important;}}
#gh-form-wrap{background:none!important;padding:0!important;border:0!important;}
#gh-form-wrap .w-form,#gh-form-wrap form{margin:0;background:none;}
#gh-form-wrap label,#gh-form-wrap .vor-label{display:block;font-family:var(--sm-mono);font-size:12px;font-weight:400;color:var(--sm-muted-on-dark);margin:0 0 8px;letter-spacing:0;text-transform:none;}
#gh-form-wrap input[type=text],#gh-form-wrap input[type=email],#gh-form-wrap input[type=tel],#gh-form-wrap textarea,#gh-form-wrap .vor-input,#gh-form-wrap .vor-textarea{width:100%;background:transparent!important;border:0!important;border-bottom:1px solid rgba(241,237,226,.4)!important;border-radius:0!important;color:var(--sm-cream)!important;font-family:var(--sm-sans)!important;font-size:19px!important;line-height:1.4;padding:8px 0 10px!important;margin:0 0 26px!important;box-shadow:none!important;height:auto!important;min-height:0!important;}
#gh-form-wrap textarea,#gh-form-wrap .vor-textarea{min-height:7.2em!important;resize:vertical;line-height:1.5;}
#gh-form-wrap input:focus,#gh-form-wrap textarea:focus{outline:none;border-bottom-color:var(--sm-cream)!important;}
#gh-form-wrap input::placeholder,#gh-form-wrap textarea::placeholder{color:rgba(241,237,226,.35);}
/* Freiwillige Auswahl "Wie sind Sie auf uns aufmerksam geworden?" (seit 28.10.2026, Embed im Formular):
   dieselbe Linie wie die Textfelder, eigener Pfeil statt des Systempfeils. Der Pfeil braucht !important
   und die hoehere Spezifitaet von select.vor-input, weil die Feldregel background:transparent!important
   setzt. Solange "Bitte waehlen" steht, sieht die Auswahl aus wie ein Platzhalter. Die Optionen bekommen
   eigene Farben, sonst steht im aufgeklappten Menue unter Windows Cream auf Weiss. */
#gh-form-wrap select.vor-input{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:30px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F1EDE2' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 4px center!important;background-size:14px 9px!important;}
#gh-form-wrap select.vor-input:has(option[value=""]:checked){color:rgba(241,237,226,.35)!important;}
#gh-form-wrap select.vor-input option{color:#111;background:#F1EDE2;}
#gh-form-wrap select:focus{outline:none;border-bottom-color:var(--sm-cream)!important;}
#gh-form-wrap input[type=submit],#gh-form-wrap .w-button,#gh-form-wrap button[type=submit]{display:inline-block;margin-top:6px!important;background:var(--sm-cream)!important;color:var(--sm-black)!important;font-family:var(--sm-sans)!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;padding:17px 26px!important;border:0!important;border-radius:0!important;transition:background-color .3s;width:auto!important;}
#gh-form-wrap input[type=submit]:hover,#gh-form-wrap .w-button:hover{background:var(--sm-coral)!important;}
#gh-form-wrap .w-form-done{display:none;background:none!important;padding:0!important;text-align:left!important;font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:var(--sm-cream);}
#gh-form-wrap .w-form-done>div{position:relative;padding-left:30px;}
#gh-form-wrap .w-form-done>div::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--sm-coral);}
#gh-form-wrap .w-form-fail{background:none!important;border:1px solid rgba(228,138,130,.5);padding:14px 16px!important;margin-top:20px!important;color:var(--sm-cream);font-size:15px;line-height:1.5;}
/* Auf dem Telefon lesen sich die reinen Unterlinien als lose Striche, die
   Felder sind dort kaum als Felder zu erkennen. Sie bekommen deshalb eine
   schwach gefuellte Flaeche mit Rahmen, groessere Tippflaechen, einen enger
   gesetzten Abstand und eine klare Rangfolge aus Feldname, Eingabe und
   Platzhalter. 17 px, damit das Telefon beim Tippen nicht hineinzoomt. */
@media (max-width:767px){
  #gh-con-grid{gap:clamp(30px,5vw,44px)!important;padding-top:clamp(32px,5vh,56px)!important;}
  #gh-form-wrap label,#gh-form-wrap .vor-label{font-size:11px;color:rgba(241,237,226,.78);margin:0 0 7px;}
  #gh-form-wrap input[type=text],#gh-form-wrap input[type=email],#gh-form-wrap input[type=tel],#gh-form-wrap textarea,#gh-form-wrap .vor-input,#gh-form-wrap .vor-textarea{font-size:17px!important;padding:13px 14px!important;margin:0 0 16px!important;background:rgba(241,237,226,.06)!important;border:1px solid rgba(241,237,226,.24)!important;}
  #gh-form-wrap textarea,#gh-form-wrap .vor-textarea{min-height:5.4em!important;}
  #gh-form-wrap input:focus,#gh-form-wrap textarea:focus{border-color:var(--sm-cream)!important;background:rgba(241,237,226,.1)!important;}
  #gh-form-wrap input::placeholder,#gh-form-wrap textarea::placeholder{color:rgba(241,237,226,.45);}
  #gh-form-wrap select.vor-input{padding-right:40px!important;background-position:right 14px center!important;}
  #gh-form-wrap select.vor-input:has(option[value=""]:checked){color:rgba(241,237,226,.45)!important;}
  #gh-form-wrap select:focus{border-color:var(--sm-cream)!important;background-color:rgba(241,237,226,.1)!important;}
  #gh-form-wrap input[type=submit],#gh-form-wrap .w-button,#gh-form-wrap button[type=submit]{width:100%!important;margin-top:8px!important;padding:18px 24px!important;font-size:16px!important;}
}
/* alte Hilfsklassen neutralisieren */
body .gh-blk,body .gh-yellow,body .gh-paper{background:none!important;}
/* Bildunterschrift auf echten Fotos lesbar halten */
.sm-ph-l{text-shadow:0 1px 10px rgba(0,0,0,.55);}
.sm-ph--foto .sm-ph-l{color:var(--sm-cream);}
/* ===== Teil 5: Webflow-Typografie neutralisieren ===== */
html body{
  --_typography---font--body-font:var(--sm-sans);
  --_typography---font--heading-font:var(--sm-sans);
  --_typography---font--button-font:var(--sm-sans);
  --_typography---font--display-font:var(--sm-sans);
}
html body,html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body p,html body a,html body span,html body div,html body li,html body dt,html body dd,
html body button,html body input,html body textarea,html body select,html body blockquote,html body em,html body strong{
  font-family:var(--sm-sans);
}
html body .sm-mono,html body .sm-mono *{font-family:var(--sm-mono);}
html body .sm-em,html body em.sm-em,html body .sm-quote{font-family:var(--sm-serif);font-style:italic;font-weight:300;}
html body h1,html body h2,html body h3,html body h4{font-weight:500;}
html body .sm-logo,html body .sm-foot-mark{font-weight:600;}
html body .sm-foot-bar,html body .sm-foot-bar *{font-family:var(--sm-mono);}
html body .sm-num,html body .sm-ph-l,html body .sm-tag,html body .sm-stufe-high,html body .sm-stufe-high *,
html body .sm-hero-meta,html body .sm-hero-meta *,html body .sm-case-dl dt,html body .sm-row-go,
html body .sm-ov-foot,html body .sm-ov-foot *,
html body .sm-mg-nr,html body .sm-mg-d,html body .sm-mg-n,
html body .sm-fa-top,html body .sm-fa-top *,html body .sm-fa-nr,html body .sm-fa-tags li,
html body .sm-ab-h,html body .sm-ab-h *{font-family:var(--sm-mono);}
/* Die Liste oben hatte vom 10. bis 11.10.2026 keinen Block mehr (beim
   Loeschen von .sm-zi-chips blieb das Komma stehen). Der Parser hat dann
   den folgenden @media-Block als ihren Inhalt gelesen und beides
   verworfen: die Dachzeilen ueber den Seitenkoepfen standen in der
   Grotesk statt in Mono, und die Telefonregeln darunter fehlten.
   Eine Selektorliste endet immer mit einem Block, nie mit einem Komma. */

/* "Ablauf" im Ablaufband ist seit 11.10.2026 eine echte Ueberschrift (h2),
   damit Heute, Umbruch und Morgen nicht unter "Leistungen" haengen. Sie
   sieht aus wie vorher die Beschriftung; Webflows h2-Werte nimmt das zurueck. */
html body .sm-ab-h .sm-ab-l{margin:0;font-size:inherit;font-weight:400;line-height:inherit;letter-spacing:inherit;color:inherit;text-transform:none;}

/* Mobil: Stufenzeile darf nicht ueber den Rand laufen */
@media (max-width:640px){
  html body .sm-stufe{grid-template-columns:minmax(0,1fr) auto;}
  html body .sm-stufe-t{font-size:clamp(22px,6.2vw,32px);}
  html body .sm-stufe-c{width:44px;height:20px;}
  html body .sm-stufe-high{font-size:11px;}
  html body .sm-hero-meta{gap:6px 16px;}
  html body .sm-cards{gap:28px 24px;}
}
@media (max-width:900px){
  html body .sm-two{gap:24px;}
  html body .sm-case-meta{padding-top:clamp(32px,6vh,64px);}
}

/* Rechtsseiten: Adress- und Kontaktlisten */
html body .sm-legal dl{margin-top:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;align-items:baseline;}
html body .sm-legal dt{font-family:var(--sm-mono);font-size:12px;color:var(--sm-muted-on-cream);}
html body .sm-legal dd{font-size:16px;line-height:1.6;margin:0;}
html body .sm-legal a{border-bottom:1px solid var(--sm-rule-on-cream);}
html body .sm-legal a:hover{text-decoration:none;color:var(--sm-coral);border-bottom-color:var(--sm-coral);}
html body .sm-legal h2:first-child{margin-top:0;}

/* Flex-Elemente duerfen schrumpfen, sonst laufen Ueberschriften ueber den Rand */
html body .sm-head,html body .sm-head h2,html body .sm-head span{min-width:0;}
html body .sm-head h2,html body .sm-row-t,html body .sm-card h3,html body .sm-step-b h3,
html body .sm-hero h1,html body .sm-hero .sm-hero-t,html body .sm-quote,html body .sm-stufe-t{overflow-wrap:break-word;}
html body .sm-hero-meta span,html body .sm-hero-meta a{min-width:0;overflow-wrap:anywhere;}
/* Der Schriftzug sitzt auf line-height .8, damit er optisch satt steht.
   Die Unterlaenge des g ragt dabei rund 0,12 em unter den Kasten, der
   i-Punkt knapp darueber. Jedes Abschneiden am Kasten kappt also Letter.
   Bis 11.10.2026 stand hier overflow:clip mit overflow-clip-margin; Safari
   kennt overflow-clip-margin nicht (auch 26.1 nicht) und schnitt deshalb
   oben den i-Punkt und unten das g ab. Abschneiden braucht der Zug nicht
   mehr: seine Groesse haengt an der freien Zeilenbreite (02_start.css und
   03_case.css), er passt also in jede Spalte, und html{overflow-x:clip}
   faengt den Rest ab. Kein overflow auf .sm-foot-in: das waere ein eigener
   Scrollbereich und wuerde die scrollgekoppelten Einblendungen stillegen.
   Unten braucht der Zug Platz fuer die Unterlaenge: die Haarlinie der
   Fussleiste stand nur clamp(28px,4vh,48px) darunter, bei 1440x900 beruehrte
   das g die Linie, auf flacheren Bildschirmen lief es hindurch. 0,23 em
   Aussenabstand lassen 0,065 em Luft; die Abstaende von Zug und Leiste
   fallen zusammen, der groessere gilt. */
html body .sm-foot-mark{overflow:visible;margin-bottom:.23em;}

/* Auf den Unterseiten und den Rechtsseiten steht die untere Kante direkt
   vor der Fusszeile. Deren Oberkantenstrich lief dann als gerade Linie
   quer durch die Kurve, obwohl die untere Kante bewusst ohne Faden
   gebaut ist. Auf der Startseite folgt die Fusszeile auf den dunklen
   Kontaktteil, dort trennt der Strich richtig und bleibt stehen. */
body .sm-kante + * .sm-foot{border-top:0;}
/* Webflow-Normalize setzt svg:not(:root){overflow:hidden} (0,1,1) und schlug die Klassenregel.
   Dadurch wurde die halbe Strichbreite an den viewBox-Raendern abgeschnitten: Stufen an der Kante. */
html body svg.sm-kante-c,html body svg.sm-stufe-c,html body .sm-step-g--mid svg,html body .sm-lese svg,html body .sm-umbruch-head svg,html body svg.sm-we-svg,html body svg.sm-ab-k{overflow:visible;}

/* Die Kopfleiste steckt in einem Webflow-Embed-Wrapper, der nur bis zum ersten dunklen
   Abschnitt reicht. position:sticky klebt aber hoechstens innerhalb dieser Box, also war
   der Header nach rund 1000 px weg. display:contents nimmt dem Wrapper seine Box, damit
   wird der Body der Bezugsrahmen und die Leiste traegt ueber die ganze Seite. */
body > .w-embed:has(> nav.sm-nav){display:contents;}
/* Sprungziele duerfen nicht unter der stehenden Leiste landen. */
html{scroll-padding-top:calc(var(--sm-nav-h) + 22px);}

/* Letzte Sicherung gegen seitliches Verschieben: ragt doch einmal etwas
   ueber den rechten Rand, wird es abgeschnitten statt scrollbar. `clip`
   statt `hidden`, damit position:sticky weiter funktioniert. */
html{overflow-x:clip;}

/* Webflow setzt im eigenen Stylesheet `img{border-radius:20px}`. Das Design
   ist durchgehend rechtwinklig, deshalb hier zurueckgenommen. Ohne diese
   Regel stehen in den Ecken der Magazin-Bilder vier farbige Zwickel. */
html body img,html body video{border-radius:0;}

/* sm2-51 (SEO): Slogan als p traegt dasselbe Gewicht wie vorher die h1;
   die h1 in der Dachzeile sieht aus wie die Dachzeile (Mono, 12px, normal). */
html body .sm-hero .sm-hero-t{font-weight:500;}
html body .sm-hero .sm-hero-k{margin:0;padding:0;font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;max-width:none;min-width:0;overflow-wrap:anywhere;text-wrap:wrap;color:inherit;animation:none;}
/* sm2-51 (SEO): Verweise im Fliesstext (Projekte in "Ueber uns", FAQ-Antworten, Leistungskarten).
   Wie im Rechtstext eine Haarlinie, beim Zeigen Coral; sonst saehe man sie nicht, weil body a die Farbe erbt. */
html body .sm-tl{border-bottom:1px solid rgba(17,17,17,.35);transition:color .2s,border-color .2s;}
html body .sm-tl:hover{color:var(--sm-coral);border-bottom-color:var(--sm-coral);}
html body .sm-dark .sm-tl{border-bottom-color:var(--sm-rule-on-dark);}

/* ============================================================
   seitmorgen. v2  —  Teil 6: Bewegung
   Eine Sprache fuer die ganze Seite: ein kurzer Weg von unten,
   weiche Kurve, nichts blinkt und nichts springt.
   Vier Teile:
   1. Auftakt beim Laden, zeitgesteuert. Laeuft in jedem Browser.
   2. Die Kante im Abschnitt "Wie wir arbeiten" zeichnet sich in einem
      Zug. Ebenfalls zeitgesteuert, ausgeloest vom Skript, sobald der
      Abschnitt ins Bild kommt. Nur nach vorn, nicht zurueck.
   3. Beim Scrollen, an den Scrollstand gekoppelt (animation-timeline).
      Vorwaerts und rueckwaerts gleich ruhig, ohne JavaScript.
   4. Ersatzweg fuer Browser, die Teil 3 noch nicht koennen (Safari vor
      26, Firefox vor 136). Dort vergibt das Skript die Klassen.
   Jeder verborgene Anfangszustand haengt an einer Klasse, die nur das
   Skript setzt. Faellt das Skript aus, steht die Seite unbewegt und
   vollstaendig sichtbar da.
   Alles liegt in prefers-reduced-motion:no-preference. Wer Bewegung
   abbestellt hat, bekommt die Seite ohne jede Animation.
   ============================================================ */

/* Die Zielgruppen fuer Teil 4 stehen einmal als Eigenschaft, damit das
   Skript genau dieselbe Liste liest. Die Regeln weiter unten wiederholen
   sie, weil ein Selektor kein var() enthalten darf. Aendert sich etwas,
   dann hier und dort. */
:root{
  --sm-an-b:".sm-head,.sm-intro-in>*,.sm-lead,.sm-case-meta>.sm-mono,.sm-case-lead,.sm-body,.sm-quote,.sm-quote-p,.sm-kon-lab,.sm-foot-cta,.sm-foot-mark";
  --sm-an-i:".sm-proj,.sm-mg-c,.sm-row,.sm-fa-i,.sm-card,.sm-ar,.sm-fd,.sm-fs,.sm-la,.sm-lz,.sm-fe-c,.sm-wo,.sm-ab,.sm-fo-l,.sm-fo-m,.sm-pl,.sm-team>*,.sm-case-dl>div,.sm-faq details,.sm-kon-row,.sm-kon .sm-social-a,.sm-grid-b>*,.sm-bsp-c,.sm-next";
  --sm-an-p:".sm-ph-i,.sm-mg-i";
  --sm-an-k:".sm-kante--b .sm-kante-dot";
}

@media (prefers-reduced-motion:no-preference){

/* ---------------- Bewegungsformen ---------------- */
@keyframes sm-an-auf{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes sm-an-ein{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes sm-an-ein-s{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes sm-an-quer{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes sm-an-zeichne{from{stroke-dashoffset:315;}to{stroke-dashoffset:0;}}
@keyframes sm-an-punkt{from{transform:scale(0);}to{transform:scale(1);}}
/* Zweite Fassung ueber die Eigenschaft scale: so bleibt transform fuer
   das Groesserwerden beim Zeigen frei. */
@keyframes sm-an-punkt-s{from{scale:0;}to{scale:1;}}
@keyframes sm-an-bild{from{scale:1.05;}to{scale:1;}}

/* ---------------- 1. Auftakt beim Laden ---------------- */
body .sm-hero-meta{animation:sm-an-auf .7s var(--sm-ease-soft) .08s backwards;}
body .sm-hero h1,body .sm-hero .sm-hero-t{animation:sm-an-auf .85s var(--sm-ease-soft) .18s backwards;}
body .sm-hero-sub{animation:sm-an-auf .85s var(--sm-ease-soft) .3s backwards;}

/* Die Kante zieht sich einmal von links nach rechts durch: erst der gerade
   Strich, dann die Kurve, dann der Strich rechts, zuletzt setzt der Punkt
   den Schluss. Die Pfadlaenge betraegt 314,33 Einheiten, 315 deckt sie ab.

   Die drei Teile duerfen sich zeitlich **nicht** ueberlappen. Sie bilden eine
   einzige Linie, und jeder Teil endet genau da, wo der naechste anfaengt. Setzt
   der naechste frueher ein, steht er als eigener Block neben einem Loch: bis
   sm2-40 begann der rechte Balken bei 1,12 s, die Kurve war aber erst bei
   1,18 s fertig. In diesen 60 ms stand rechts oben ein abgetrennter Cremeblock,
   daneben eine dunkle Luecke und eine Stufe von einer halben Strichbreite
   gegen das Kurvenende. Dasselbe im Kleinen links: die Kurve begann bei 0,78 s,
   der linke Balken erreichte die Nahtstelle erst bei 0,84 s.

   Jetzt laeuft es streng nacheinander: Balken links 0,38 bis 0,84, Kurve 0,85
   bis 1,19, Balken rechts 1,20 bis 1,46, Punkt 1,48 bis 1,94. Zu jedem
   Zeitpunkt ist die Linie von ganz links bis zur Zeichenspitze geschlossen. */
body .sm-kante:not(.sm-kante--b) .sm-kante-l .sm-kante-line{transform-origin:left center;animation:sm-an-quer .46s var(--sm-ease-soft) .38s backwards;}
body .sm-kante:not(.sm-kante--b) .sm-stroke{stroke-dasharray:315;animation:sm-an-zeichne .34s linear .85s backwards;}
body .sm-kante:not(.sm-kante--b) .sm-kante-r .sm-kante-line{transform-origin:left center;animation:sm-an-quer .26s var(--sm-ease-soft) 1.2s backwards;}
body .sm-kante:not(.sm-kante--b) .sm-kante-dot{animation:sm-an-punkt .46s var(--sm-ease-spring) 1.48s backwards;}

/* ---------------- 2. Die Kante der drei Schritte ---------------- */
/* Die drei Schritte bilden zusammen wieder die Kante: gerader Strich,
   Kurve mit Punkt, gerader Strich. Als drei einzeln eingeblendete Kacheln
   zerfiel die Linie in Stuecke, die zu verschiedenen Zeiten und auf
   verschiedenen Hoehen auftauchten. Jetzt zeichnet sie sich in einem Zug
   von links nach rechts, mit gleichmaessiger Geschwindigkeit: die Dauer
   jedes Abschnitts entspricht seiner Breite (438 : 79 : 96 : 263 : 438).
   Zeitgesteuert, damit sie immer vollstaendig durchlaeuft und nicht auf
   halbem Weg stehen bleibt, wenn jemand mitten darin aufhoert zu scrollen.
   Die Kurve wird gewischt statt gezeichnet: ihr Pfad traegt
   vector-effect="non-scaling-stroke", und damit greift stroke-dasharray
   nicht. Bei einer 2 px feinen Linie sieht man den Unterschied nicht.

   Nur ein Weg, nach vorn. Eine Fassung, die beim Hochscrollen wieder
   zurueckzeichnete, gab es kurz (sm2-18) und sie ist auf Wunsch wieder
   heraus: der Aufbau soll ein einmaliger Auftakt sein, kein Mitlaufen.
   Gemacht mit Uebergaengen statt Animationen, weil damit die Falle mit
   paused/running und :nth-child entfaellt: die Startwerte stehen in der
   Regel ohne --an, die Zielwerte samt Dauer und Verzoegerung in der Regel
   mit --an. Faellt --an je weg, stuende alles sofort wieder am Anfang,
   ohne Uebergang. Das Skript nimmt die Klasse nicht zurueck. */
body .sm-steps.sm-linie .sm-ln-b,
body .sm-steps.sm-linie .sm-s1::after,
body .sm-steps.sm-linie .sm-s3::after,
body .sm-steps.sm-linie .sm-ln-t{transform-origin:left center;transform:scaleX(0);}
body .sm-steps.sm-linie .sm-step-g--mid svg{clip-path:inset(-14px 100% -14px -14px);}
body .sm-steps.sm-linie .sm-s3 i{transform:scale(0);}
body .sm-steps.sm-linie .sm-step-b{opacity:0;transform:translateY(10px);}

body .sm-steps.sm-linie--an .sm-ln-b{transform:scaleX(1);transition:transform .52s var(--sm-ease-soft) 0s;}
body .sm-steps.sm-linie--an .sm-s1::after{transform:scaleX(1);transition:transform .11s linear .5s;}
body .sm-steps.sm-linie--an .sm-step-g--mid svg{clip-path:inset(-14px 0% -14px -14px);transition:clip-path .13s linear .6s;}
body .sm-steps.sm-linie--an .sm-s3::after{transform:scaleX(1);transition:transform .32s linear .72s;}
body .sm-steps.sm-linie--an .sm-s3 i{transform:scale(1);transition:transform .44s var(--sm-ease-spring) .76s;}
body .sm-steps.sm-linie--an .sm-ln-t{transform:scaleX(1);transition:transform .52s var(--sm-ease-soft) 1.03s;}
/* Die Verzoegerung je Spalte wird nur nachgereicht, die Kurzschreibweise
   steht in der Regel ohne :nth-child. Sonst waere die allgemeine Regel
   die weniger spezifische und die Spalten 2 und 3 blieben ohne Ziel. */
body .sm-steps.sm-linie--an .sm-step-b{opacity:1;transform:none;transition:opacity .7s var(--sm-ease-soft) .34s,transform .7s var(--sm-ease-soft) .34s;}
body .sm-steps.sm-linie--an>*:nth-child(2) .sm-step-b{transition-delay:.76s;}
body .sm-steps.sm-linie--an>*:nth-child(3) .sm-step-b{transition-delay:1.18s;}

/* ---------------- 3. Beim Scrollen ---------------- */
@supports (animation-timeline:view()){

  /* Die Spanne steht in "cover" und nicht in "entry": entry rechnet in
     Prozent der Elementhoehe, dann huscht eine flache Zeile in 30 px vorbei
     und ein hohes Bild braucht 400 px. cover rechnet die Fensterhoehe mit,
     dadurch dauert jede Einblendung ungefaehr gleich lang. Sie beginnt am
     unteren Bildrand und ist bei etwa zwei Dritteln Bildhoehe fertig.
     Zeitkurve linear: bei scrollgekoppelter Bewegung kommt die Dynamik aus
     dem Scrollen selbst. Eine weiche Kurve waere nach dem ersten Drittel
     der Strecke fast fertig und man saehe kaum etwas. */

  /* Textbloecke und Abschnittskoepfe */
  body .sm-head,
  body .sm-intro-in>*,
  body .sm-lead,
  body .sm-case-meta>.sm-mono,
  body .sm-case-lead,
  body .sm-body,
  body .sm-quote,
  body .sm-quote-p,
  body .sm-kon-lab,
  body .sm-foot-cta,
  body .sm-foot-mark{
    animation:sm-an-ein .9s linear both;
    animation-timeline:view();
    animation-range:cover 6% cover 30%;
  }
  /* Die Fusszeile steht am Dokumentende. Dort laesst sich nicht weit genug
     scrollen, um eine lange Spanne zu Ende zu bringen, also eine kurze. */
  body .sm-foot-cta,body .sm-foot-mark{animation-range:cover 0% cover 18%;}

  /* Einzelne Kacheln, Zeilen und Eintraege */
  body .sm-proj,  body .sm-mg-c,  body .sm-row,  body .sm-fa-i,  body .sm-card,  body .sm-ar,  body .sm-fd,  body .sm-fs,  body .sm-la,  body .sm-lz,  body .sm-fe-c,  body .sm-wo,  body .sm-ab,  body .sm-fo-l,  body .sm-fo-m,  body .sm-pl,  body .sm-team>*,  body .sm-case-dl>div,  body .sm-faq details,  body .sm-kon-row,  body .sm-kon .sm-social-a,  body .sm-grid-b>*,  body .sm-bsp-c,  body .sm-next{
    animation:sm-an-ein-s .8s linear both;
    animation-timeline:view();
    animation-range:cover 5% cover 26%;
  }

  /* Was nebeneinander steht, kommt leicht versetzt. Der Versatz haengt am
     Scrollweg, nicht an einer Uhr, deshalb bleibt er auch rueckwaerts stimmig. */
  body .sm-cards>*:nth-child(2),body .sm-team>*:nth-child(2),
  body .sm-case-dl>div:nth-child(2),body .sm-grid-b>*:nth-child(2),
  body .sm-kon-row:nth-child(2),body .sm-kon .sm-social-a:nth-child(2),
  body .sm-fa>*:nth-child(2),body .sm-fo>*:nth-child(2),body .sm-fe-c:nth-child(2),
  body .sm-bsp-c:nth-child(2),
  body .sm-mg>*:nth-child(2n){animation-range:cover 9% cover 30%;}
  body .sm-cards>*:nth-child(3),body .sm-team>*:nth-child(3),
  body .sm-case-dl>div:nth-child(3),body .sm-grid-b>*:nth-child(3),
  body .sm-fa>*:nth-child(3),body .sm-fe-c:nth-child(3),body .sm-bsp-c:nth-child(3),
  body .sm-kon-row:nth-child(3){animation-range:cover 13% cover 34%;}
  body .sm-cards>*:nth-child(4),body .sm-team>*:nth-child(4),
  body .sm-case-dl>div:nth-child(4),body .sm-grid-b>*:nth-child(4),
  body .sm-fa>*:nth-child(4),body .sm-bsp-c:nth-child(4){animation-range:cover 16% cover 37%;}
  body .sm-cards>*:nth-child(n+5),body .sm-team>*:nth-child(n+5),
  body .sm-fa>*:nth-child(n+5){animation-range:cover 19% cover 40%;}

  /* Grosse Projektkacheln sind fast bildschirmhoch. Mit der allgemeinen
     Spanne wuerden sie sehr lange blass bleiben, deshalb eine kuerzere. */
  body .sm-proj{animation-range:cover 4% cover 17%;}

  /* Bilder setzen sich beim Hereinkommen auf ihr Mass. Die eigene
     scale-Eigenschaft, damit transform fuer den Hover frei bleibt.
     Die Zeitleiste muss am Rahmen haengen, nicht am Bild selbst: .sm-ph
     traegt overflow:hidden und ist damit ein eigener Scrollbereich, in dem
     das Bild immer vollstaendig sichtbar ist. view() am Bild stuende
     deshalb dauerhaft auf fertig und es passierte gar nichts. */
  body .sm-ph{view-timeline:--sm-bild block;}
  body .sm-ph-i{
    animation:sm-an-bild 1s linear both;
    animation-timeline:--sm-bild;
    animation-range:cover 2% cover 30%;
  }

  /* Magazin-Raster. Das Bild setzt sich auf sein Mass, danach zieht sich die
     Linie der Unterschrift von links nach rechts durch und zuletzt setzt der
     Punkt den Schluss: dieselbe Reihenfolge wie beim Auftakt der Kante.
     Beide haengen an der Zeitleiste der Unterschrift, nicht an der eigenen,
     sonst waere die 1,5 px hohe Linie schon fertig, bevor man sie sieht. */
  body .sm-mg-m{view-timeline:--sm-mg-b block;}
  body .sm-mg-i{
    animation:sm-an-bild 1s linear both;
    animation-timeline:--sm-mg-b;
    animation-range:cover 2% cover 30%;
  }
  body .sm-mg-cap{view-timeline:--sm-mg-u block;}
  body .sm-mg-cap::after{
    animation:sm-an-quer .9s linear both;
    animation-timeline:--sm-mg-u;
    animation-range:cover 4% cover 26%;
  }
  body .sm-mg-dot{
    animation:sm-an-punkt-s .6s linear both;
    animation-timeline:--sm-mg-u;
    animation-range:cover 16% cover 32%;
  }

  /* Die beiden unteren Kanten haben keinen Strich, nur den Punkt.
     Er haengt an der Zeitleiste der ganzen Kante, nicht an seiner eigenen. */
  body .sm-kante--b{view-timeline:--sm-kante block;}
  body .sm-kante--b .sm-kante-dot{
    animation:sm-an-punkt .6s linear both;
    animation-timeline:--sm-kante;
    animation-range:cover 12% cover 30%;
  }

  /* Zwei Bereiche kommen spaeter dran: "Wie wir arbeiten" und "Kontakt".
     Mit der allgemeinen Spanne waren sie knapp ueber dem unteren Bildrand
     schon fertig, man sah die Bewegung also kaum. Jetzt laufen sie bis
     etwa zur halben Bildhoehe. Beide unteren Kanten gehoeren genau zu
     diesen zwei Bereichen, deshalb reicht eine Regel fuer den Punkt.
     Diese Regeln stehen bewusst ganz am Ende: sie sollen die Staffelung
     weiter oben ueberschreiben, und bei gleicher Spezifitaet gewinnt das
     Spaetere. Luft nach unten ist geprueft, der Endzustand wird auf jeder
     Seite erreicht, bevor sich nicht mehr weiterscrollen laesst. */
  body .sm-kante--b .sm-kante-dot{animation-range:cover 30% cover 52%;}
  body .sm-kon-lab,
  body .sm-kon-row{animation-range:cover 18% cover 44%;}
  body .sm-kon-row:nth-child(2){animation-range:cover 22% cover 48%;}
  body .sm-kon-row:nth-child(3){animation-range:cover 26% cover 52%;}
  body .sm-kon .sm-social-a{animation-range:cover 26% cover 52%;}
  body .sm-kon .sm-social-a:nth-child(2){animation-range:cover 30% cover 56%;}
}

/* ---------------- 4. Ersatzweg ohne scrollgekoppelte Animationen ---------------- */
/* Ohne @supports-Klammer, damit sich der Weg auch in einem modernen Browser
   pruefen laesst. Scharf wird er nur durch die Klasse sm-an-js, und die
   setzt das Skript ausschliesslich dann, wenn animation-timeline fehlt. */
  html.sm-an-js .sm-an-b{opacity:0;transform:translateY(16px);transition:opacity .9s var(--sm-ease-soft),transform .9s var(--sm-ease-soft);}
  html.sm-an-js .sm-an-i{opacity:0;transform:translateY(10px);transition:opacity .8s var(--sm-ease-soft),transform .8s var(--sm-ease-soft);}
  html.sm-an-js .sm-an-b.sm-an-da,html.sm-an-js .sm-an-i.sm-an-da{opacity:1;transform:none;}
  html.sm-an-js .sm-an-p{scale:1.05;transition:scale 1.1s var(--sm-ease-soft);}
  html.sm-an-js .sm-an-p.sm-an-da{scale:1;}
  html.sm-an-js .sm-an-k{transform:scale(0);transition:transform .6s var(--sm-ease-soft);}
  html.sm-an-js .sm-an-k.sm-an-da{transform:scale(1);}

  html.sm-an-js .sm-cards>:nth-child(2),html.sm-an-js .sm-team>:nth-child(2),
  html.sm-an-js .sm-case-dl>div:nth-child(2),html.sm-an-js .sm-grid-b>:nth-child(2),
  html.sm-an-js .sm-kon-row:nth-child(2),html.sm-an-js .sm-kon .sm-social-a:nth-child(2),
  html.sm-an-js .sm-fa>:nth-child(2),html.sm-an-js .sm-fo>:nth-child(2),
  html.sm-an-js .sm-fe-c:nth-child(2),html.sm-an-js .sm-bsp-c:nth-child(2),
  html.sm-an-js .sm-mg>:nth-child(2n){transition-delay:.08s;}
  html.sm-an-js .sm-cards>:nth-child(3),html.sm-an-js .sm-team>:nth-child(3),
  html.sm-an-js .sm-case-dl>div:nth-child(3),html.sm-an-js .sm-grid-b>:nth-child(3),
  html.sm-an-js .sm-fa>:nth-child(3),html.sm-an-js .sm-fe-c:nth-child(3),html.sm-an-js .sm-bsp-c:nth-child(3),
  html.sm-an-js .sm-kon-row:nth-child(3){transition-delay:.16s;}
  html.sm-an-js .sm-cards>:nth-child(4),html.sm-an-js .sm-team>:nth-child(4),
  html.sm-an-js .sm-case-dl>div:nth-child(4),html.sm-an-js .sm-grid-b>:nth-child(4),
  html.sm-an-js .sm-fa>:nth-child(4),html.sm-an-js .sm-bsp-c:nth-child(4){transition-delay:.24s;}
  html.sm-an-js .sm-cards>:nth-child(n+5),html.sm-an-js .sm-team>:nth-child(n+5),
  html.sm-an-js .sm-fa>:nth-child(n+5){transition-delay:.3s;}
}

/* ---------------- 5. Team: einmaliger Aufbau der Portraets ---------------- */
/* Zeitgesteuert wie die Kante in Teil 2: das Skript (team()) setzt
   sm-team-js nur, wenn der Bereich beim Laden noch unterhalb steht, und
   is-da an jede Karte, sobald sie etwa bei zwei Dritteln der Bildhoehe
   ankommt. Seit sm2-52 (Kundenwunsch, die Blende mit Zoom wirkte beim
   Scrollen stoerend) nur noch ein ruhiges Einblenden: kein Zuschnitt,
   kein Zoom, keine Bewegung. Das Portraet blendet auf, Name und Aufgabe
   folgen, der Coral-Punkt setzt leise den Schluss. Zweite Karte leicht
   versetzt. Nur nach vorn. */
@media (prefers-reduced-motion:no-preference){
  /* Die Team-Karten haben ihren eigenen Auftritt, die allgemeinen
     Einblendungen aus Teil 3 und 4 sind fuer sie abgeschaltet. */
  body .sm-team>*,body .sm-team .sm-ph-i{animation:none;}
  html.sm-an-js .sm-team>.sm-an-i{opacity:1;transform:none;transition:none;}
  html.sm-an-js .sm-team .sm-an-p{scale:1;transition:none;}

  html.sm-team-js .sm-team .sm-ph{opacity:0;transition:opacity 1.2s var(--sm-ease-soft);}
  html.sm-team-js .sm-team .sm-team-n,
  html.sm-team-js .sm-team .sm-team-n+.sm-mono{opacity:0;transition:opacity .9s var(--sm-ease-soft) .35s;}
  html.sm-team-js .sm-team .sm-team-n+.sm-mono{transition-delay:.45s;}
  html.sm-team-js .sm-team .sm-team-n::after{opacity:0;transition:opacity .6s var(--sm-ease-soft) .8s;}
  html.sm-team-js .sm-team>:nth-child(2) .sm-ph{transition-delay:.12s;}
  html.sm-team-js .sm-team>:nth-child(2) .sm-team-n{transition-delay:.47s;}
  html.sm-team-js .sm-team>:nth-child(2) .sm-team-n+.sm-mono{transition-delay:.57s;}
  html.sm-team-js .sm-team>:nth-child(2) .sm-team-n::after{transition-delay:.92s;}

  html.sm-team-js .sm-team>.is-da .sm-ph,
  html.sm-team-js .sm-team>.is-da .sm-team-n,
  html.sm-team-js .sm-team>.is-da .sm-team-n+.sm-mono,
  html.sm-team-js .sm-team>.is-da .sm-team-n::after{opacity:1;}

  /* Beim Zeigen rueckt das Bild ein kleines Stueck naeher. */
  @media (hover:hover){
    .sm-team .sm-ph img{transition:transform 1.1s var(--sm-ease-soft);}
    .sm-team>div:hover .sm-ph img,
    html.sm-team-js .sm-team>.is-da:hover .sm-ph img{transform:scale(1.035);transition:transform 1.1s var(--sm-ease-soft);}
  }
}

/* ===== Teil 7: Arbeiten aus dem CMS und die Projektansicht "Buehne" =====
   Vorlage: design_handoff_seitmorgen_website/projektansicht-buehne, Variante 1a.
   Die Buehne liegt als Vollbild ueber der Seite: ein Medium zur Zeit im
   echten Format, rechts die Fakten, unten die Leiste mit allen Bildern und
   Filmen. Ab 900 px zwei Spalten, darunter eine Spalte, die als Ganzes
   scrollt. Gebaut wird sie vom Skript (Teil 13), die Inhalte kommen aus der
   Sammlung "Arbeiten", die verborgen auf der Seite liegt. */

/* Die Datenliste ist nur fuer das Skript da. Das hidden-Attribut versteckt
   sie auch dann, wenn dieses Stylesheet einmal nicht ankommt. */
[data-pj-liste]{display:none!important;}

.sm-bu{position:fixed;inset:0;z-index:70;background:var(--sm-black);color:var(--sm-cream);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .3s ease;
  --bu-pad:clamp(20px,3.2vw,40px);--bu-muted:var(--sm-muted-on-dark);--bu-text:#CFCAC0;
  --bu-rule:rgba(241,237,226,.18);--bu-buehne:#0A0A0A;--bu-film:#1C1B19;--bu-th:48px;
  --bu-streifen:repeating-linear-gradient(135deg,rgba(241,237,226,.09) 0 1px,transparent 1px 14px);}
.sm-bu[hidden]{display:none;}
.sm-bu.is-auf{opacity:1;}
.sm-bu.is-sofort{transition:none;}
html.sm-bu-offen,html.sm-bu-offen body{overflow:hidden;}

/* Ein Raster fuer alles. Mobil liegen die Teile untereinander, ab 900 px
   stehen Buehne und Fakten nebeneinander, die Leiste laeuft unten ueber
   die ganze Breite. */
.sm-bu-in{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"kopf" "st" "mob" "leiste" "info";transition:opacity .2s ease;}
.sm-bu-in.is-wechsel{opacity:0;}

/* Kopf */
.sm-bu-kopf{grid-area:kopf;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 16px 12px 20px;}
.sm-bu-kl{display:flex;align-items:baseline;gap:20px;min-width:0;}
.sm-bu-logo{display:none;color:var(--sm-cream);}
.sm-bu-logo .sm-dot{background:var(--sm-coral);}
.sm-bu-pfad{display:none;}
.sm-bu-pfad,.sm-bu-pfad-m,.sm-bu-zahl{font-size:12px;color:var(--bu-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-bu-pfad-m{min-width:0;}
.sm-bu-kr{flex:none;display:flex;align-items:center;gap:24px;}
.sm-bu-zahl{display:none;}
.sm-bu-zu{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--sm-cream);color:var(--sm-cream);font-family:var(--sm-mono);font-size:13px;line-height:1;
  transition:background-color .25s,color .25s;}
.sm-bu-zu:hover{background:var(--sm-cream);color:var(--sm-black);}
.sm-bu-zu-t{display:none;}
.sm-bu-zu-x{font-size:20px;line-height:1;}

/* Buehne: die Flaeche bleibt stehen, der Rahmen darin nimmt das Format des
   Mediums an und wechselt seine Groesse weich. */
.sm-bu-st{grid-area:st;position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--bu-buehne);height:clamp(260px,56vh,440px);height:clamp(260px,56svh,440px);touch-action:pan-y;}
.sm-bu-f{position:relative;width:0;height:0;overflow:hidden;background:#161514;
  transition:width .45s cubic-bezier(.6,0,.2,1),height .45s cubic-bezier(.6,0,.2,1);}
.sm-bu-f.is-sofort{transition:none;}
.sm-bu-f>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease;}
.sm-bu-f>img.is-da{opacity:1;}
.sm-bu-f>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}

/* Pfeile. Auf der Buehne nur ab 900 px, mobil sitzen sie in der Zeile darunter. */
.sm-bu-pf{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--sm-cream);color:var(--sm-cream);font-size:16px;line-height:1;
  transition:background-color .25s,color .25s;}
.sm-bu-pf:hover{background:var(--sm-cream);color:var(--sm-black);}
.sm-bu-st .sm-bu-pf{display:none;position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;
  background:rgba(17,17,17,.6);font-size:18px;}
.sm-bu-st .sm-bu-pf:hover{background:var(--sm-cream);}
.sm-bu-pf--z{left:16px;}
.sm-bu-pf--v{right:16px;}

/* Film vor dem Abspielen: Standbild oder gestreifte Flaeche, der Play-Punkt
   und darunter der Hinweis, dass erst der Klick YouTube laedt. */
.sm-bu-film{position:absolute;inset:0;background:var(--bu-film);}
.sm-bu-film-m{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:20px 20px 52px;text-align:center;}
.sm-bu-film--leer::before{content:"";position:absolute;inset:0;background:var(--bu-streifen);}
.sm-bu-film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sm-bu-film:not(.sm-bu-film--leer)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,.12) 55%,rgba(10,10,10,.3));}
.sm-bu-play{position:relative;z-index:1;flex:none;width:60px;height:60px;display:grid;place-items:center;
  border-radius:50%;background:var(--sm-coral);transition:transform .35s var(--sm-ease-spring);}
.sm-bu-play::before{content:"";width:0;height:0;margin-left:5px;border-left:16px solid var(--sm-black);
  border-top:10px solid transparent;border-bottom:10px solid transparent;}
.sm-bu-play:hover,.sm-bu-play:focus-visible{transform:scale(1.07);}
.sm-bu-hinweis{position:relative;z-index:1;max-width:40ch;margin:0;font-family:var(--sm-mono);font-size:11px;
  line-height:1.5;color:rgba(241,237,226,.82);text-wrap:balance;}
.sm-bu-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.sm-bu-hinweis a:hover{color:var(--sm-cream);}
/* Auf einem Standbild steht der Hinweis auf wechselndem Grund, ein weicher Schatten haelt ihn lesbar. */
.sm-bu-film:not(.sm-bu-film--leer) .sm-bu-hinweis{color:var(--sm-cream);text-shadow:0 1px 2px rgba(10,10,10,.85),0 0 16px rgba(10,10,10,.75);}
.sm-bu-zeit{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:10px;
  font-family:var(--sm-mono);font-size:11px;color:var(--sm-cream);}
.sm-bu-zeit i{flex:1;height:1.5px;background:currentColor;opacity:.5;}

/* Bildunterschrift unter der Buehne (ab 900 px) */
.sm-bu-cap{grid-area:cap;display:none;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px;font-size:12px;}
.sm-bu-cap-l{min-width:0;}
.sm-bu-cap-nr{margin-right:1.1em;color:var(--bu-muted);}
.sm-bu-cap-r{flex:none;color:var(--bu-muted);text-align:right;}

/* Mobil: Pfeile mit Titel und Art des Mediums dazwischen */
.sm-bu-mob{grid-area:mob;display:flex;align-items:center;gap:12px;padding:12px 16px;}
.sm-bu-mob-m{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;text-align:center;}
.sm-bu-mob-m span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-bu-mob-m span+span{color:var(--bu-muted);}

/* Leiste mit allen Medien. Die Breite jedes Felds folgt seinem Format. */
.sm-bu-leiste{grid-area:leiste;display:flex;align-items:flex-end;gap:6px;padding:6px 16px 10px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.sm-bu-leiste::-webkit-scrollbar{display:none;}
.sm-bu-th{position:relative;flex:none;height:var(--bu-th);aspect-ratio:var(--r,1.5);width:auto;padding:0;
  background:var(--bu-film);opacity:.5;outline:2px solid transparent;outline-offset:2px;transition:opacity .3s,outline-color .2s;}
.sm-bu-th:hover,.sm-bu-th:focus-visible{opacity:1;}
.sm-bu-th.is-an{opacity:1;outline-color:var(--sm-cream);}
.sm-bu-th img{display:block;width:100%;height:100%;object-fit:cover;}
.sm-bu-th--leer::before{content:"";position:absolute;inset:0;background:var(--bu-streifen);}
.sm-bu-th-f{position:absolute;left:6px;bottom:5px;display:flex;align-items:center;gap:4px;
  font-family:var(--sm-mono);font-size:9px;line-height:1;color:var(--sm-cream);text-shadow:0 1px 4px rgba(0,0,0,.7);}
.sm-bu-th-f::before{content:"";width:0;height:0;border-left:6px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;}
/* Die Dauer passt nur in breite Felder. Hochkant und mobil bleibt das Dreieck allein. */
.sm-bu-th-d{display:none;}

/* Ein einziges Medium: keine Pfeile, keine Leiste */
.sm-bu--eins .sm-bu-pf,.sm-bu--eins .sm-bu-leiste{display:none!important;}
.sm-bu--eins .sm-bu-mob{justify-content:center;}

/* Fakten */
.sm-bu-info{grid-area:info;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:28px 20px 40px;min-width:0;}
.sm-bu-io{display:flex;flex-direction:column;gap:16px;min-width:0;}
.sm-bu-kj{font-size:11px;color:var(--bu-muted);}
.sm-bu .sm-bu-t{margin:0;font-size:52px;font-weight:500;letter-spacing:-.05em;line-height:.9;
  color:var(--sm-cream);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;text-wrap:balance;}
.sm-bu-pkt{display:inline-block;width:.16em;height:.16em;margin-left:.04em;border-radius:50%;background:var(--bu-c,var(--sm-teal));}
/* Lange Titel (Kunde plus Projektname) kleiner und ohne Silbentrennung, das Skript setzt die Klasse. */
.sm-bu .sm-bu-t.sm-bu-t--lang{font-size:40px;hyphens:manual;-webkit-hyphens:manual;}
.sm-bu .sm-bu-x{margin:0;font-size:15px;line-height:1.55;color:var(--bu-text);text-wrap:pretty;}
.sm-bu .sm-bu-fk{margin:0;display:flex;flex-direction:column;}
.sm-bu-fk>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;
  border-top:1px solid var(--bu-rule);font-size:14px;line-height:1.35;}
.sm-bu .sm-bu-fk dt{flex:none;font-family:var(--sm-mono);font-size:11px;font-weight:400;color:var(--bu-muted);}
.sm-bu .sm-bu-fk dd{margin:0;min-width:0;text-align:right;overflow-wrap:break-word;}
.sm-bu-nx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:14px;
  border-top:1.5px solid var(--sm-cream);color:var(--sm-cream);}
.sm-bu-nx[hidden]{display:none;}
.sm-bu-nx:hover{text-decoration:none;color:var(--sm-cream);}
.sm-bu-nx-l{font-size:11px;color:var(--bu-muted);}
.sm-bu-nx-t{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.1;}
.sm-bu-nx-p{flex:none;width:10px;height:10px;border-radius:50%;background:var(--nx-c,var(--sm-coral));}
.sm-bu-nx-a{display:inline-block;transition:transform .3s var(--sm-ease-soft);}
.sm-bu-nx:hover .sm-bu-nx-a,.sm-bu-nx:focus-visible .sm-bu-nx-a{transform:translateX(5px);}

@media (min-width:900px){
  .sm-bu{--bu-th:60px;}
  .sm-bu-in{height:100%;min-height:600px;padding:0 var(--bu-pad);
    grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px);column-gap:40px;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"kopf kopf" "st info" "cap info" "leiste leiste";}
  .sm-bu-kopf{padding:20px 0;}
  .sm-bu-logo{display:inline-flex;}
  .sm-bu-pfad,.sm-bu-zahl{display:block;}
  .sm-bu-pfad-m{display:none;}
  .sm-bu-zu{width:auto;padding:0 18px;}
  .sm-bu-zu-t{display:inline;}
  .sm-bu-zu-x{font-size:18px;}
  .sm-bu-st{height:auto;min-height:300px;}
  .sm-bu-st .sm-bu-pf{display:grid;}
  .sm-bu-play{width:72px;height:72px;}
  .sm-bu-play::before{margin-left:6px;border-left-width:20px;border-top-width:12px;border-bottom-width:12px;}
  .sm-bu-film-m{padding-bottom:60px;}
  .sm-bu-zeit{left:20px;right:20px;bottom:16px;gap:14px;font-size:12px;}
  .sm-bu-cap{display:flex;}
  .sm-bu-mob{display:none;}
  .sm-bu-leiste{gap:8px;padding:18px 0 22px;}
  .sm-bu-th{outline-offset:3px;}
  /* Ohne Leiste fehlt unten deren Abstand: Bildunterschrift und naechstes Projekt brauchen Luft zum Rand. */
  .sm-bu--eins .sm-bu-in{padding-bottom:clamp(22px,3.4vh,36px);}
  .sm-bu-th-d{display:inline;}
  .sm-bu-th--hoch .sm-bu-th-d{display:none;}
  .sm-bu-info{padding:0 0 4px;gap:24px;overflow-y:auto;scrollbar-width:none;}
  .sm-bu-info::-webkit-scrollbar{display:none;}
  .sm-bu-io{gap:20px;}
  .sm-bu-kj{font-size:12px;}
  .sm-bu .sm-bu-t{font-size:clamp(48px,5vw,72px);}
  .sm-bu .sm-bu-t.sm-bu-t--lang{font-size:clamp(36px,3.3vw,50px);}
  .sm-bu-nx{gap:8px;}
  .sm-bu-nx-t{gap:12px;font-size:28px;}
  .sm-bu-nx-p{width:12px;height:12px;}
}

/* Flache Fenster im Querformat: die Buehne bekommt, was uebrig ist */
@media (min-width:900px) and (max-height:620px){
  .sm-bu-in{height:auto;}
  .sm-bu-st{height:420px;}
}

@media (prefers-reduced-motion:reduce){
  .sm-bu,.sm-bu-in,.sm-bu-f,.sm-bu-f>img,.sm-bu-th,.sm-bu-play,.sm-bu-nx-a{transition:none!important;}
}

/* Projektseite /arbeiten/...: was ohne Skript und fuer Suchmaschinen dasteht.
   Mit Skript legt sich die Buehne sofort darueber. */
[data-pj-seite]{min-height:100vh;padding:clamp(28px,5vw,64px) var(--sm-gutter);background:var(--sm-black);color:var(--sm-cream);}
[data-pj-seite]>*{max-width:960px;}
body [data-pj-seite] h1{margin:28px 0 20px;font-size:clamp(44px,8vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.92;}
body [data-pj-seite] p{margin:0 0 28px;max-width:60ch;font-size:17px;line-height:1.55;color:#CFCAC0;}
body [data-pj-seite] img{display:block;width:100%;height:auto;margin:0 0 28px;}
body [data-pj-seite] a{color:var(--sm-cream);text-decoration:underline;text-underline-offset:4px;}
/* 8 — Ausgewaehlte Arbeiten als Projektmappe (seit sm2-58, Kundenwahl
   Entwurf 8c "Projektmappe, fein", 20.10.2026). Fuer jedes Projekt dieselbe
   Figur ohne Spiegeln: Querbild 3:2 und zwei Hochformate 2:3 in gleicher
   Hoehe (Spalten 9 : 4 : 4, gleicher Steg), darunter die Textzeile mit
   Nummer, zweitoenigem Titel, Leistungen und "Ansehen", darunter die
   Haarlinie mit dem Punkt in der Projektfarbe. Gebaut von mappe() in
   Teil 13 des Skripts aus der CMS-Liste. Abstandsmodul u: Handy 8, ab
   720 px 12, ab 1024 px 16 px. Klassen .sm-mp-*. */


/* ---------- Abschnitt ---------- */
.sm-mp{
  --u:8px;
  --ind:calc(3 * var(--u));
  --pkt:10px;                   /* Durchmesser des Punkts am Linienende */
  --tf:clamp(24px,6.9vw,28px);  /* Projekttitel */
  --sm-mp-feld:#E6E1D5;           /* Grund der Bildfelder, solange ein Bild laedt */
  --sm-mp-feld-collage:#F1EEE3;   /* Grund der GRUNDOMAT-Collage, mit der Pipette aus dem Bild genommen */
  background:var(--sm-cream);color:var(--sm-black);
}
.sm-mp *,.sm-mp *::before,.sm-mp *::after{box-sizing:border-box;}

/* ---------- Kopf: wie ein Titelblatt der Mappe ---------- */
html body .sm-mp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:last baseline;column-gap:calc(2 * var(--u));padding-bottom:calc(1.5 * var(--u));border-bottom:1.5px solid var(--sm-black);}
/* Handy: so gross, wie "Ausgewaehlte" neben dem Etikett Platz hat
   (bei 320 px 36, bei 375 rund 44, ab 390 px 46 px). */
html body .sm-mp-head h2{margin:0;font-size:clamp(36px,calc(17vw - 20px),46px);font-weight:500;line-height:1.02;letter-spacing:-.035em;text-wrap:balance;}
html body .sm-mp-hm{font-family:var(--sm-mono);font-size:11px;line-height:16px;font-weight:400;letter-spacing:0;color:var(--sm-muted-on-cream);white-space:nowrap;}

.sm-mp-list{list-style:none;margin:calc(6 * var(--u)) 0 0;padding:0;}
.sm-mp-p{margin:0;padding:0;}
.sm-mp-p + .sm-mp-p{margin-top:calc(6 * var(--u));}

/* ---------- Bildzeile (unveraendert aus 8b) ---------- */
.sm-mp-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--u);}
.sm-mp-f{position:relative;margin:0;overflow:hidden;background:var(--sm-mp-feld);}
.sm-mp-f--q{grid-column:1 / -1;aspect-ratio:3 / 2;}
.sm-mp-f--h{aspect-ratio:2 / 3;}
.sm-mp-f img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--o,50% 50%);}
/* Die Collage zum GRUNDOMAT bringt ihren eigenen Cremegrund mit: das Feld
   bekommt genau diesen Ton, die Collage steht unbeschnitten darin, eine
   Haarlinie zieht die Feldkante nach. */
.sm-mp-f--fl{background:var(--sm-mp-feld-collage);}
.sm-mp-f--fl img{object-fit:contain;}
.sm-mp-f--fl::after{content:"";position:absolute;inset:0;border:1px solid var(--sm-rule-on-cream);pointer-events:none;}

/* ---------- Textzeile ---------- */
.sm-mp-c{position:relative;margin-top:calc(2 * var(--u));padding-bottom:calc(1.5 * var(--u));}
/* Handy: oben der Titel ueber die ganze Breite, darunter eine Mono-Zeile
   mit Nummer, Leistungen und "Ansehen", alles auf einer Grundlinie. */
.sm-mp-r{display:grid;grid-template-columns:var(--ind) minmax(0,1fr) auto;align-items:baseline;row-gap:calc(1.5 * var(--u));}
.sm-mp-k{display:contents;}
.sm-mp-t{grid-column:1 / -1;grid-row:1;}
.sm-mp-nr{grid-column:1;grid-row:2;}
.sm-mp-ls{grid-column:2;grid-row:2;}
.sm-mp-go{grid-column:3;grid-row:2;justify-self:end;padding-left:calc(2 * var(--u));white-space:nowrap;}

.sm-mp-nr,.sm-mp-ls,.sm-mp-go{margin:0;font-size:11px;line-height:16px;}
html body .sm-mp-nr,html body .sm-mp-ls,html body .sm-mp-go,html body .sm-mp-go *{font-family:var(--sm-mono);font-weight:400;letter-spacing:0;}
.sm-mp-nr{color:var(--sm-muted-on-cream);font-variant-numeric:tabular-nums;}
.sm-mp-ls{color:var(--sm-muted-on-cream);}
.sm-mp-go{color:var(--sm-black);}
.sm-mp-pf{display:inline-block;margin-left:.6em;transition:translate .5s var(--sm-ease-soft);}

.sm-mp-t{margin:0;font-size:var(--tf);line-height:1.08;letter-spacing:-.03em;}
html body .sm-mp-t,html body .sm-mp-t span{font-weight:500;}
.sm-mp-tk,.sm-mp-th{display:block;text-wrap:balance;}
.sm-mp-tk{color:var(--sm-muted-on-cream);}
.sm-mp-th{color:var(--sm-black);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:.15em;transition:text-decoration-color .45s ease;}

/* Haarlinie mit Punkt: dieselbe Figur wie das Zeichen der Marke */
.sm-mp-l{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;}
.sm-mp-ln{position:absolute;inset:0;background:var(--sm-black);transform-origin:0 50%;}
.sm-mp-pt{position:absolute;right:0;top:calc(.5px - var(--pkt) / 2);width:var(--pkt);height:var(--pkt);border-radius:50%;background:var(--c);transition:translate .5s var(--sm-ease-soft);}

/* Das ganze Projekt (Bilder und Textzeile) ist ein einziger Verweis;
   sein Name ist der Titel (aria-labelledby). */
.sm-mp-in,.sm-mp-in:hover{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.sm-mp-in:focus{outline:none;}
.sm-mp-in:focus-visible{outline:2px solid var(--sm-black);outline-offset:6px;}

/* ---------- Ab 720 px: Textzeile in denselben Spalten wie die Bilder ---------- */
@media (min-width:720px){
  .sm-mp{--u:12px;--pkt:11px;--tf:clamp(26px,3.4vw,32px);}
  html body .sm-mp-head h2{font-size:clamp(46px,5.4vw,56px);}
  html body .sm-mp-hm{font-size:12px;}
  .sm-mp-b{grid-template-columns:minmax(0,9fr) minmax(0,4fr) minmax(0,4fr);}
  .sm-mp-f--q{grid-column:auto;}
  .sm-mp-c{padding-bottom:calc(2 * var(--u));}
  .sm-mp-r{grid-template-columns:minmax(0,9fr) minmax(0,4fr) minmax(0,4fr);column-gap:var(--u);row-gap:0;align-items:last baseline;}
  .sm-mp-k{display:grid;grid-column:1;grid-row:1;grid-template-columns:var(--ind) minmax(0,1fr);align-items:last baseline;}
  .sm-mp-nr{grid-column:1;grid-row:1;}
  .sm-mp-t{grid-column:2;grid-row:1;padding-right:calc(.5 * var(--u));}
  /* Leistungen beginnen an der Kante des ersten Hochformats und duerfen
     bis vor "Ansehen" reichen; so brechen sie auch bei 768 nicht um. */
  .sm-mp-ls{grid-column:2 / 4;grid-row:1;padding-right:calc(9ch + var(--u));}
  .sm-mp-go{grid-column:3;grid-row:1;padding-left:var(--u);}
  .sm-mp-nr,.sm-mp-ls,.sm-mp-go{font-size:12px;}
}
@media (min-width:1024px){
  .sm-mp{--u:16px;--pkt:12px;--tf:clamp(32px,2.7vw,40px);}
  /* Untergrenze 55 px: stetig an der Grenze, bei 1023 px stehen 55,2 px */
  html body .sm-mp-head h2{font-size:clamp(55px,4.6vw,68px);}
}

/* ---------- Bewegung, je Projekt genau einmal ----------
   1. Die Bilder blenden nacheinander auf: erst das Querbild, dann die
      beiden Hochformate (nur opacity, kein Zoom). Jedes Bildfeld loest an
      seiner eigenen Oberkante aus: auf dem Desktop stehen alle drei auf
      einer Hoehe und kommen gestaffelt, auf dem Handy kommt das Querbild
      fuer sich und das Paar darunter, sobald es selbst ins Bild rueckt.
   2. Erreicht die Haarlinie 80 % der Fensterhoehe, zeichnet sie sich in
      0,8 s von links nach rechts; der Punkt folgt ab 0,5 s und steht nach
      0,8 s. So ist beides fertig, bevor die Zeile die Bildmitte erreicht.
   Verborgen wird nur, wenn das Skript die Klasse am html-Element setzt. */
html.sm-mp-js .sm-mp-f{opacity:0;transition:opacity .8s var(--sm-ease-soft);}
html.sm-mp-js .sm-mp-f.is-da{opacity:1;}
html.sm-mp-js .sm-mp-b > .sm-mp-f:nth-child(3){transition-delay:.18s;}
@media (min-width:720px){
  /* Drei Bildfelder auf einer Hoehe: Querbild, dann die Hochformate */
  html.sm-mp-js .sm-mp-b > .sm-mp-f:nth-child(2){transition-delay:.18s;}
  html.sm-mp-js .sm-mp-b > .sm-mp-f:nth-child(3){transition-delay:.36s;}
}
html.sm-mp-js .sm-mp-ln{transform:scaleX(0);transition:transform .8s var(--sm-ease-soft);}
html.sm-mp-js .sm-mp-p.is-linie .sm-mp-ln{transform:none;}
html.sm-mp-js .sm-mp-pt{opacity:0;transition:opacity .3s var(--sm-ease-soft) .5s,translate .5s var(--sm-ease-soft);}
html.sm-mp-js .sm-mp-p.is-linie .sm-mp-pt{opacity:1;}
/* Was bei einem Sprung schon ueber dem Fenster liegt, steht sofort fertig
   da (is-sofort). Nach Ablauf aller Zeiten haelt is-fertig den Endzustand
   fest, auch wenn ein Browser einen Uebergang nicht zu Ende zeichnet. */
html.sm-mp-js .sm-mp-f.is-sofort,html.sm-mp-js .sm-mp-f.is-fertig,
html.sm-mp-js .sm-mp-p.is-sofort .sm-mp-ln,html.sm-mp-js .sm-mp-p.is-fertig .sm-mp-ln{transition:none;}
html.sm-mp-js .sm-mp-p.is-sofort .sm-mp-pt,html.sm-mp-js .sm-mp-p.is-fertig .sm-mp-pt{transition:translate .5s var(--sm-ease-soft);}

/* Zugabe beim Zeigen, nur mit Maus (und beim Tastaturfokus): der Punkt
   rueckt wie im Logo ein Stueck vom Linienende weg, der Pfeil rueckt nach,
   der kraeftige Titelteil bekommt eine feine Linie in der Projektfarbe. */
@media (hover:hover){
  .sm-mp-in:hover .sm-mp-pt{translate:calc(var(--pkt) * 1.42) 0;}
  .sm-mp-in:hover .sm-mp-pf{translate:.34em 0;}
  .sm-mp-in:hover .sm-mp-th{text-decoration-color:var(--c);}
}
/* Auf Touch statt des grauen Tippschleiers: der Punkt rueckt beim Antippen.
   (iOS Safari setzt :active an Links nur mit einem touchstart-Listener,
   das Skript unten meldet deshalb einen leeren, passiven an.) */
@media (hover:none){
  .sm-mp-in:active .sm-mp-pt{translate:calc(var(--pkt) * 1.42) 0;}
  .sm-mp-in:active .sm-mp-pf{translate:.34em 0;}
}
.sm-mp-in:focus-visible .sm-mp-pt{translate:calc(var(--pkt) * 1.42) 0;}
.sm-mp-in:focus-visible .sm-mp-pf{translate:.34em 0;}
.sm-mp-in:focus-visible .sm-mp-th{text-decoration-color:var(--c);}

@media (prefers-reduced-motion:reduce){
  html .sm-mp-f,html .sm-mp-ln,html .sm-mp-pt,
  html.sm-mp-js .sm-mp-f,html.sm-mp-js .sm-mp-ln,html.sm-mp-js .sm-mp-pt{opacity:1;transform:none;transition:none;}
  .sm-mp-pf,.sm-mp-th{transition:none;}
}
/* 9 — Startseite "laut" (seit sm2-59, 28.10.2026, Kundenvorlage
   design_handoff_seitmorgen_website_laut, bewusst nicht 1:1): Filmkorn ueber
   der Seite, Kopf mit laufender Showreel-Vorschau ueber der Kante, Arbeiten
   mit Bewegtbild (Schleifen in Quer- und Hochformat, Fotokarussell, Galerie
   der Hochformat-Filme), einmaliges Aufleuchten des Einleitungssatzes.
   Grundaufbau und Texte der Seite bleiben, wie sie sind. Gesteuert von
   laut.js (Teil 14 des Skripts). Klassen .sm-korn, .sm-film, .sm-hero--film,
   .sm-kante--film, .sm-mp-v, .sm-mp-band, .sm-w. */


/* ---------- Korn ----------
   Eine Kachel 256 x 256 (korn.png aus der Vorlage), Deckkraft 0,08, ueber
   allem und fuer Zeiger unsichtbar. Sie springt zweimal pro Sekunde durch
   sechs Lagen wie echtes Filmkorn. Bewegt wird ein uebergrosses Innenelement
   per transform: das rechnet die Grafikkarte, die Seite wird dafuer nicht
   neu gezeichnet. Wer Bewegung abbestellt hat, bekommt das Korn stehend. */
.sm-korn{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;}
.sm-korn::before{content:"";position:absolute;inset:-128px;background:url('https://cdn.prod.website-files.com/6a47c0268f998806af5c5810/6ae1cb32041a7dac0cb52705_seitmorgen-korn.png') 0 0/256px 256px repeat;opacity:var(--sm-korn,.08);will-change:transform;animation:sm-korn .5s steps(1) infinite;}
/* Staerke einstellbar ohne neue Datei (seit sm2-61): im Kopf-Code der Site
   <style>:root{--sm-korn:.08;--sm-korn-mobil:.06}</style> hinter dem Stylesheet.
   --sm-korn gilt fuer Rechner und Tablet, --sm-korn-mobil bis 767 px Breite;
   fehlt der Handy-Wert, gilt der Rechner-Wert, fehlt beides, 0,08. */
@media (max-width:767px){.sm-korn::before{opacity:var(--sm-korn-mobil,var(--sm-korn,.08));}}
@keyframes sm-korn{
  0%{transform:translate3d(0,0,0);}
  17%{transform:translate3d(-71px,43px,0);}
  33%{transform:translate3d(57px,-93px,0);}
  50%{transform:translate3d(-119px,-31px,0);}
  67%{transform:translate3d(91px,117px,0);}
  83%{transform:translate3d(-37px,79px,0);}
  100%{transform:translate3d(13px,-11px,0);}
}


/* ---------- Kopf: Showreel-Vorschau ueber der Kante ----------
   Auftakt und Kante stehen in .sm-kopf-bild. Darunter liegt die Filmflaeche
   .sm-film ueber die ganze Hoehe beider: oben laeuft die Vorschau, die Kante
   schneidet sie mit der Linie der Marke ab, darunter beginnt Soft Black.
   Das Standbild steht im Markup (schnellstes Bild der Seite), das Video legt
   erst das Skript dazu und blendet es ein, sobald es laeuft. Zwei Verlaeufe
   und ein leichter Schleier halten Schrift und Navigation lesbar. */
/* z-index 1: der Punkt der Kante ragt nach unten in das dunkle Band und
   muss darueber liegen. */
.sm-kopf-bild{position:relative;z-index:1;flex:1.5 0 auto;display:flex;flex-direction:column;isolation:isolate;background:var(--sm-black);}
.sm-kopf-bild>.sm-hero{flex:1 0 auto;}
.sm-kopf-bild>.sm-kante{flex:none;}
.sm-film{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--sm-black);}
.sm-film img,.sm-film video{position:absolute;inset:-1px;display:block;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;object-position:50% 50%;border-radius:0;}
.sm-film video{opacity:0;transition:opacity 1.2s ease;}
.sm-film video.is-an{opacity:1;}
.sm-film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(17,17,17,.52),rgba(17,17,17,0) 32%),
             linear-gradient(to top,rgba(17,17,17,.66),rgba(17,17,17,0) 66%),
             rgba(17,17,17,.16);}

body .sm-hero--film{position:relative;background:transparent;color:var(--sm-cream);transition:none;}
/* Hinweis rechts in der Dachzeile: Punkt wie bei einer laufenden Aufnahme */
.sm-hero-reel{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;}
.sm-hero-rp{flex:none;width:7px;height:7px;border-radius:50%;background:var(--sm-coral);animation:sm-rec 1.2s steps(1) infinite;}
@keyframes sm-rec{50%{opacity:.2;}}
@media (max-width:559px){.sm-hero-rz{display:none;}}

/* Kante ueber dem Film: oben durchsichtig, unten Soft Black. Die schwarze
   Flaeche unter der Kurve ist ein eigener Pfad (.sm-unten), er reicht drei
   Einheiten nach rechts in die schwarze Spalte und nach unten in das dunkle
   Band, damit an keiner Naht der Film durchblitzt.
   Der Punkt ist seit sm2-60 kein Showreel-Knopf mehr, sondern nur Farbe
   (Kundenwunsch 28.10.2026): er nimmt --top an, das farbwechsel() alle 5 s
   zusammen mit dem Punkt im Logo dreht, und wechselt im selben Takt
   (1,2 s wie .sm-nav .sm-logo .sm-dot). */
.sm-kante--film{background:transparent;--dot:var(--top);}
.sm-kante--film .sm-kante-l{background:transparent;}
.sm-kante--film .sm-kante-r{background:var(--sm-black);}
.sm-kante--film .sm-unten{fill:var(--sm-black);}
.sm-kante--film .sm-kante-dot{transition:background-color 1.2s ease;}


/* ---------- Einleitung: Wort fuer Wort, einmal ----------
   Nach der Kante leuchtet der Satz unter ihr von links nach rechts auf,
   Wort fuer Wort (Vorlage: Szene "Studio"), aber zeitgesteuert und nur
   einmal, nicht an das Scrollen gekoppelt. */
html.sm-wort-js .sm-lead .sm-w{opacity:.28;transition:opacity .55s ease;}
html.sm-wort-js .sm-lead .sm-w.is-an{opacity:1;}


/* ---------- Arbeiten: Bewegtbild in der Mappe ----------
   Die Figur jedes Projekts bleibt (Querbild 3:2, zwei Hochformate 2:3).
   Hat ein Projekt Film, laeuft im Querbild eine stumme Schleife, in den
   Hochformaten laufen die Hochformat-Filme. Das Foto bleibt darunter liegen
   und ist zu sehen, bis die Schleife wirklich laeuft. */
/* Ein Pixel groesser als das Feld: das Video zeichnet seine letzte Zeile
   bei krummer Hoehe nicht ganz, darunter blitzte sonst das Foto als
   farbige Haarlinie hervor. Das Feld schneidet den Ueberstand ab. */
.sm-mp-v{position:absolute;inset:-1px;display:block;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;object-position:var(--vo,50% 50%);border-radius:0;opacity:0;transition:opacity .9s var(--sm-ease-soft);pointer-events:none;}
.sm-mp-v.is-an{opacity:1;}

/* Bildstreifen statt Figur, fuer Projekte nur mit Fotos (Karussell) und nur
   mit Hochformat-Filmen (Galerie). Jede Kachel ist ein Hochformat 2:3 in der
   Breite der Hochformate der anderen Projekte (Spalten 9:4:4), also steht
   der Streifen genauso hoch wie die Figuren daneben. Auf dem Telefon ist eine
   Kachel 62 % breit, rechts schaut die naechste herein. */
.sm-mp-band{position:relative;overflow:hidden;container-type:inline-size;}
.sm-mp-bt{--kw:calc(100cqw * .62);display:flex;gap:var(--u);width:max-content;will-change:transform;}
.sm-mp-bk{position:relative;flex:none;width:var(--kw);aspect-ratio:2 / 3;overflow:hidden;background:var(--sm-mp-feld);}
.sm-mp-bk img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--o,50% 50%);border-radius:0;}
@media (min-width:720px){
  .sm-mp-bt{--kw:calc((100cqw - 2 * var(--u)) * 4 / 17);}
}
/* Karussell: alle 3,2 s rueckt der Streifen um eine Kachel weiter. */
.sm-mp-bt--schritt{transition:transform 1.1s cubic-bezier(.6,0,.2,1);}
.sm-mp-bt--schritt.is-sprung{transition:none;}
/* Galerie: der Streifen zieht gleichmaessig nach links, ohne Naht (der
   Satz Kacheln steht zweimal hintereinander). Die Bewegung setzt das Skript
   ueber die Web Animations API mit Laenge und Dauer in Pixeln und Sekunden;
   ausserhalb des Bildes haelt sie an. */

/* Die Mappe blendet Bildfelder einzeln auf (Teil 8); der Streifen ist ein
   einziges Feld und kommt als Ganzes. */
html.sm-mp-js .sm-mp-band{opacity:0;transition:opacity .8s var(--sm-ease-soft);}
html.sm-mp-js .sm-mp-band.is-da{opacity:1;}
html.sm-mp-js .sm-mp-band.is-sofort,html.sm-mp-js .sm-mp-band.is-fertig{transition:none;}


/* ---------- Ohne Bewegungswunsch ----------
   Kein laufendes Korn, kein blinkender Punkt, kein Zug und kein Karussell,
   der Satz steht voll da. Videos legt das Skript gar nicht erst an. */
@media (prefers-reduced-motion:reduce){
  .sm-korn::before,.sm-hero-rp{animation:none;}
  .sm-mp-bt--schritt{transition:none;}
  html.sm-wort-js .sm-lead .sm-w{opacity:1;transition:none;}
  html.sm-mp-js .sm-mp-band{opacity:1;transition:none;}
}