/* ======================================================================
   shops.css — Unterseite "Onlineshop & Marktplätze"
   DIE DRITTE WELT. /websites ist hell und redaktionell (lokale Betriebe),
   /software dunkel und technisch (Leute, die Systeme kaufen). Händler sind
   beides: sie verkaufen an Menschen und betreiben dabei eine Maschine.
   Deshalb ist diese Seite als EINZIGE keine Temperatur, sondern ein Wechsel.

   Drei Regeln, die diese Datei durchziehen:
   1. HELL IST DIE FLÄCHE, DIE DER KUNDE SIEHT. Die Ladenfront im Hero,
      Marktplätze, Vorgehen und Fragen stehen auf Papier. Dunkel ist, was
      dahinter liegt: Bestellweg, der eigene Shop, Technik und Betrieb.
   2. DER LADEN IST DAS ARGUMENT. Eine Seite, die Shops verkauft, zeigt
      einen — bedienbar, mit Größen, Farben, Bestand je Größe und einer
      Artikelnummer, die sich aus der Auswahl zusammensetzt. Behauptungen
      darüber stehen woanders.
   3. KEINE KÄSTEN, KEINE MITTELACHSE. Struktur entsteht aus Haarlinien und
      dem Einzug --indent, wie auf /software. Gerahmt ist nur, was wirklich
      ein eigenes Objekt ist: die Ladenfront und der Referenz-Screenshot.

   EIN Satz Komponenten für beide Temperaturen. Die Zonen setzen lokale
   Variablen (--grund, --text, --ton, --linie, --akzent), jede Komponente
   liest ausschließlich die. Sonst stünde jede Karte, jede Liste und jede
   Haarlinie zweimal in dieser Datei — und beim nächsten Feinschliff würden
   die beiden Fassungen auseinanderlaufen, so wie es beim Finale schon
   passiert ist (siehe Kopf von finale.css).

   Bewusst eigenständig (kein Import von websites.css oder software.css):
   beide Seiten werden parallel weitergebaut, geteilte Dateien wären eine
   Kollisionsquelle. Geteilt ist nur, was wirklich auf jeder Seite gleich
   ist — site-nav.css, edge-nav.css, finale.css.
   ====================================================================== */
@font-face{font-family:Geist;src:url(/assets/fonts/geist-sans.woff2?v=20260903) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono.woff2?v=20260903) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Palette 1:1 aus der Familie — damit die drei Seiten als eine lesen.
     Die dunklen Werte kommen aus software.css, die hellen aus websites.css.
     Hier stehen sie zum ersten Mal nebeneinander, weil hier zum ersten Mal
     eine Seite beide braucht. */
  --navy:#020914;
  --weiss:#ffffff; --papier:#f5f8fc; --papier2:#eef4fa;
  --tinte:#0d1826; --tinte-weich:#41566b;
  --hell-muted:#aeb9c7; --hell-dim:#7f8fa3;
  --cyan:#19bff4; --cyan-zart:#e8f7fe;
  /* Zwei Werte weichen bewusst von websites.css ab (dort #0784b0 und
     #6b7d8f). Gemessen kommen die auf Weiß nur auf 4,25:1 und 4,24:1 und
     auf dem Papierton der Ladenfront (#eef4fa) auf 3,84:1 und 3,83:1 —
     unter den 4,5:1, die Kleintext braucht. Betroffen wären hier Eyebrow,
     Artikelnummer und die Fußzeile der Ladenfront, also durchweg kleine
     Schrift. Abgedunkelt messen sie 5,75/5,19 und 5,25/4,74. Der Farbton
     bleibt derselbe, nur die Helligkeit sinkt. */
  --cyan-tinte:#066e92; --grau:#5e6e7d;
  /* Der Shop-Akzent der Familie. Auf der Startseite trägt der Plotter-FIX-
     Block (.shopcase) genau diesen Ton — Eyebrow, Browser-Punkt, Kennzahlen
     und den Handstrich unter der Überschrift. Hier gilt dieselbe Regel:
     MAGENTA gehört dem Shop und Plotter-FIX, CYAN bleibt das Hausystem für
     Navigation, Sektionsnummern, Knöpfe und Verweise. Zwei Farben mit zwei
     Zuständigkeiten statt einer, die alles bedeutet. */
  --magenta:#ff2e88;
  --strich-voll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M3 13C6 9.5 12 7.8 20 7.5 33 7 44 5.8 55 5.2 70 4.4 82 3.4 95 3 112 2.5 126 4 140 4.4 156 4.8 170 3 185 2.6 202 2.2 216 3.6 230 4 244 4.4 256 2.9 268 2.6 280 3.4 290 5.4 297.4 8.2C299.4 11.6 298.4 16.4 299.5 20.8C299.9 24.4 298.6 28.6 296.8 31.6C288 34.6 276 36.4 264 37 242 38 218 36.3 194 37.1 170 37.9 148 36.2 124 37 100 37.8 78 36.3 56 35.7 42 35.2 30 33.2 20 32 12 31 6 29.5 3 27Z'/%3E%3C/svg%3E");
  --strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='0.007' stop-color='%23fff' stop-opacity='0.65'/%3E%3Cstop offset='0.018' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='0.24' stop-color='%23fff' stop-opacity='0.94'/%3E%3Cstop offset='0.42' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='0.58' stop-color='%23fff' stop-opacity='0.93'/%3E%3Cstop offset='0.74' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='0.88' stop-color='%23fff' stop-opacity='0.97'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M3 13C6 9.5 12 7.8 20 7.5 33 7 44 5.8 55 5.2 70 4.4 82 3.4 95 3 112 2.5 126 4 140 4.4 156 4.8 170 3 185 2.6 202 2.2 216 3.6 230 4 244 4.4 256 2.9 268 2.6 280 3.4 290 5.4 297.4 8.2C299.4 11.6 298.4 16.4 299.5 20.8C299.9 24.4 298.6 28.6 296.8 31.6C288 34.6 276 36.4 264 37 242 38 218 36.3 194 37.1 170 37.9 148 36.2 124 37 100 37.8 78 36.3 56 35.7 42 35.2 30 33.2 20 32 12 31 6 29.5 3 27Z'/%3E%3C/svg%3E");
  --fox:#f2801f;
  --page:clamp(22px,5vw,80px);
  --wrap:1240px;
  /* Der Versatz, der die Mittelachse bricht: Nummernspalte links, Inhalt
     beginnt dahinter. Derselbe Wert wie auf /software. Unter 900px fällt er
     auf 0 — dort ist kein Platz für eine leere Spalte. */
  --indent:clamp(0px,7vw,132px);
}
/* Querformat auf dem Handy: die Aussparung (Notch) liegt dann seitlich, nicht
   oben. Ohne diese Reserve läuft Text unter die Kamera. Beide Seiten bekommen
   denselben Wert — das hält die Seite symmetrisch, auch wenn nur eine Seite
   betroffen ist. Gleiche Regel wie auf /software. */
@media(orientation:landscape){
  :root{--page:max(clamp(22px,5vw,80px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body.shop{margin:0;background:var(--navy);color:var(--papier);counter-reset:sec;
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0}
/* Rückfall, falls site-nav.js nicht läuft: die Leiste verdeckt sonst jedes
   Sprungziel. Mit JS gilt der genauere Wert aus site-nav.css. */
[id]{scroll-margin-top:96px}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:99;padding:10px 16px;background:var(--cyan);color:#00202e;border-radius:8px;font-weight:700}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ======================================================================
   ZONEN — der Kern dieser Datei
   Jede Zone setzt nur Variablen. Wer eine Komponente umfärben will, ändert
   die Zone, nicht die Komponente. Der dunkle Satz steht auf body.shop und
   ist damit die Vorgabe: Abschnitte ohne Auszeichnung (.laden, .leist) sind
   dunkel, ohne dass es irgendwo nochmal steht.
   ====================================================================== */
body.shop{
  --grund:var(--navy);
  --text:var(--papier);
  --ton:var(--hell-muted);
  --leise:var(--hell-dim);
  --linie:rgba(174,185,199,.15);
  --linie-2:rgba(174,185,199,.28);
  --akzent:var(--cyan);
  --akzent-zart:rgba(25,191,244,.13);
  --akzent-schein:rgba(25,191,244,.55);
  --heben:rgba(174,185,199,.035);
  /* Der Textmarker verhält sich auf den beiden Gründen GRUNDSÄTZLICH anders,
     nicht nur graduell.

     Auf Weiß mischt Transparenz einen Pastellton — genau das, was ein
     Textmarker auf Papier tut, deshalb stehen dort .34 wie auf /websites.
     Auf Navy mischt dieselbe Transparenz die Farbe mit dem Untergrund
     zusammen: bei .62 kommt #9f205c heraus, ein stumpfes Bordeaux, das
     weder nach Magenta noch nach Marker aussieht. Hier muss die Farbe also
     stehen bleiben statt verdünnt zu werden — .9 statt eines Mittelwerts,
     der auf beiden Seiten daneben liegt. */
  --strich-deckung:.9;
}
/* Helle Zone. Der Akzent wechselt von --cyan auf --cyan-tinte: das helle
   #19bff4 misst auf Weiß 1,95:1 und ist als Textfarbe unbrauchbar. Für
   FLÄCHEN (Knöpfe, Punkte, Leuchtlinien) bleibt es richtig — deshalb sind
   es zwei Variablen und nicht eine.

   .band--paper (drei Abschnitte) und die Bühne sind dieselbe Zone. Ein
   gemeinsamer Selektor statt zweier Blöcke: zwei Fassungen derselben Werte
   laufen beim nächsten Feinschliff auseinander — genau der Fehler, den der
   Kopf dieser Datei vermeiden will. */
.zone--hell,.band--paper,.hero{
  --grund:var(--weiss);
  --text:var(--tinte);
  --ton:var(--tinte-weich);
  --leise:var(--grau);
  --linie:#e4eaf1;
  --linie-2:#cdd9e6;
  --akzent:var(--cyan-tinte);
  --akzent-zart:var(--cyan-zart);
  --akzent-schein:rgba(6,110,146,.32);
  --heben:rgba(13,24,38,.028);
  --strich-deckung:.34;
}
/* .zone--dunkel steht im Markup auf zwei Abschnitten. Sie sind ohnehin
   dunkel — die Klasse ist trotzdem nicht überflüssig: sie hält die Absicht
   fest, falls die Vorgabe je kippt, und sie ist der Anker für den Grund. */
.zone--dunkel{background:var(--navy)}

/* ======================================================================
   BAUSTEINE
   ====================================================================== */
.eyebrow{margin:0 0 16px;font:700 .76rem/1 "Geist Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent)}

/* ECKIG, wie jeder andere Knopf des Hauses. Die Startseite (.button in
   site.css) deklariert gar keinen Radius, die Leiste (.topnav__cta) und das
   Finale (finale.css) setzen ihn ausdruecklich auf 0 — mit Begruendung: die
   Pille war die Erfindung der Unterseiten und genau der sichtbare Unterschied
   beim Seitenwechsel. Dieser Knopf hier war der letzte Rest davon.
   NICHT betroffen: die Knoepfe INNERHALB der Shop-Attrappe auf /shops. Die
   sollen wie ein echter Shop aussehen, nicht wie das Knopfsystem dieser
   Seite — dort bleibt die Rundung richtig. */
.web-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:0;
  background:var(--cyan);color:#00202e;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,box-shadow .18s ease}
.web-btn:hover{transform:translateY(-1px);background:#43ccfb;box-shadow:0 14px 34px rgba(25,191,244,.34)}
.web-btn--lg{height:58px;padding:0 34px;font-size:1.06rem}
.web-link{display:inline-flex;align-items:center;gap:8px;color:var(--akzent);font-weight:640;text-decoration:none}
.web-link::after{content:"→";transition:transform .2s ease}
.web-link:hover::after{transform:translateX(4px)}

:where(a,button,summary,[tabindex]):focus-visible{outline:2.5px solid var(--akzent);outline-offset:3px;border-radius:5px}
.web-btn:focus-visible{outline:2.5px solid var(--cyan);outline-offset:4px}
.faq__item summary:focus-visible{outline-offset:-2px}

/* Auszeichnung im Fließtext: der TEXTMARKER von /websites, in Magenta.

   Kein dünner Unterstrich (so macht es die Startseite mit .13em), sondern ein
   breiter Marker: .34em hoch im Hero, .3em in den Überschriften, und tief
   angesetzt bei bottom .03em/.05em — er liegt damit ÜBER der Unterlänge der
   Schrift, nicht darunter. Genau das macht den Unterschied zwischen einem
   Unterstrich und einem durchgezogenen Marker.

   Die Deckkraft ist der Grund, warum das trotzdem lesbar bleibt: bei .34
   scheint die Schrift durch, wie bei einem echten Textmarker. Deshalb darf
   der Balken auch über den Buchstaben liegen.

   Zwei verschiedene Masken, beide aus websites.css: der Hero-Marker hat einen
   Verlauf, der links weich anfängt (er wird ja gezogen), die Überschriften
   bekommen die schlichte Fassung mit voller Deckung. Die Kontur ist in beiden
   Fällen unregelmäßig — ein gerades Rechteck sähe nach Markierung im PDF aus,
   nicht nach Stift.

   Er wird gezogen, nicht eingeblendet — scaleX von links, 1,75 s. shops.js
   setzt .is-drawn, sobald die Zeile im Bild steht. Ohne JS steht der Marker
   sofort und vollständig (siehe Regel unten). */
.hl,.mark{position:relative;z-index:0;white-space:nowrap;font-style:normal}
/* z-index:0 = eigener Stacking-Context. Ohne ihn rutscht das ::after mit
   z-index:-1 hinter den Sektionshintergrund und ist unsichtbar — derselbe
   Stolperstein steht als Kommentar in websites.css. */
.hl::after,.mark::after{content:"";position:absolute;z-index:-1;
  background:var(--magenta);opacity:var(--strich-deckung,.34);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hl::after{left:-.05em;right:-.13em;bottom:.03em;height:.34em;
  -webkit-mask-image:var(--strich);mask-image:var(--strich)}
.mark::after{left:-.04em;right:-.08em;bottom:.05em;height:.3em;
  -webkit-mask-image:var(--strich-voll);mask-image:var(--strich-voll)}
/* Ohne JS bleibt .is-drawn aus — dann darf der Strich nicht unsichtbar sein.
   Deshalb ist der gezogene Zustand die Vorgabe und nur html.shop-js schaltet
   ihn zurück auf null. */
.shop-js .hl::after,.shop-js .mark::after{transform:scaleX(0);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
  .shop-js .hl::after,.shop-js .mark::after{
    transition:transform 1.75s cubic-bezier(.24,.62,.2,1) .35s}
}
.shop-js .hl.is-drawn::after,.shop-js .mark.is-drawn::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .shop-js .hl::after,.shop-js .mark::after{transform:scaleX(1)}
}

/* ======================================================================
   KOPFLEISTE — die einzige Stelle, an der der Zonenwechsel WEHTUT
   site-nav.css lässt die Leiste über dem Hero transparent starten und färbt
   sie erst ab .is-scrolled ein. Auf den dunklen Geschwisterseiten ist das
   richtig. Hier steht sie über der HELLEN Bühne: mit den dunklen
   Rückfallwerten wäre das Logo weiß auf Weiß und die Navigation unlesbar.

   Also zwei Sätze am selben Element: solange die Leiste transparent ist,
   gilt der helle; ab .is-scrolled liegt sie auf ihrem eigenen dunklen Grund
   und der dunkle Satz greift. Kein JS nötig — die Klasse setzt site-nav.js
   ohnehin schon.
   ====================================================================== */
body.shop .topnav{
  /* Oben ist die Leiste hell: farbige Fassung. */
  --nav-marke-dunkel:0;
  --nav-ruhe:var(--tinte-weich);
  --nav-hell:var(--tinte);
  --nav-akzent:var(--cyan-tinte);
  /* Auf hellem Grund geht die Betonung nach UNTEN, nicht nach oben: der
     helle Rückfallwert der geteilten Datei (#43ccfb) trägt weiße Schrift
     nur mit 1,9:1. Dunkler ist hier das, was "hervorgehoben" heißt. */
  --nav-akzent-hell:#05586f;
  --nav-akzent-text:#ffffff;
  --nav-glow:rgba(6,110,146,.40);
  --nav-cta-grund:transparent;
}
body.shop .topnav.is-scrolled{
  --nav-bg:rgba(2,9,20,.94);
  --nav-linie:rgba(174,185,199,.16);
  /* Ab hier liegt die Leiste auf dunklem Grund — die dunkle Fassung blendet
     ueber die farbige. */
  --nav-marke-dunkel:1;
  --nav-ruhe:#9db0c4;
  --nav-hell:var(--papier);
  --nav-akzent:var(--cyan);
  --nav-akzent-hell:#43ccfb;
  --nav-akzent-text:#00202e;
  --nav-glow:rgba(25,191,244,.7);
  --nav-cta-grund:var(--navy);
}
/* Die Punkt-Schiene rechts läuft durch beide Temperaturen. Sie bekommt
   deshalb den hellen Satz — sie startet neben der Bühne — und kippt über den
   dunklen Abschnitten mit. Beide Sätze hängen an der Schiene selbst, nicht
   am Body: so gilt immer der zuletzt passende. */
body.shop{
  --rail-ruhe:rgba(65,86,107,.34);
  --rail-hell:var(--tinte);
  --rail-akzent:var(--cyan-tinte);
  --rail-glow:rgba(6,110,146,.5);
  --rail-chip:rgba(255,255,255,.96);
  --pill-linie:#e4eaf1;
}
/* Ab dem Maschinenraum ist die Seite überwiegend dunkel. Die Schiene wandert
   mit: sobald sie nicht mehr neben der Bühne steht, gilt der dunkle Satz.
   Gesteuert über nav-compact, das edge-nav.js ab 120px Scrollweg setzt —
   dieselbe Schwelle, an der auch die Bühne aus dem Bild läuft. */
.nav-compact body.shop,
html.nav-compact body.shop{
  --rail-ruhe:rgba(174,185,199,.32);
  --rail-hell:var(--papier);
  --rail-akzent:var(--cyan);
  --rail-glow:rgba(25,191,244,.55);
  --rail-chip:rgba(7,17,31,.96);
  --pill-linie:rgba(174,185,199,.15);
}

/* ======================================================================
   HERO — Aussage links, bedienbarer Laden rechts
   Der Laden füllt die rechte Spalte, weil er das Argument IST: eine Seite,
   die Shops verkauft, zeigt einen Shop und behauptet ihn nicht. Deshalb
   auch keine Bildschirmhöhe erzwungen — der Hero ist so hoch, wie der
   Laden ihn braucht, und der Abschnitt darunter darf ins Bild ragen.
   ====================================================================== */
.hero{position:relative;display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,4.4vw,72px);align-items:center;align-content:center;
  /* Volle Bildschirmhöhe. Der Hero ist jetzt das ERSTE BILD für sich — ohne
     Maschinenraum darunter gibt es nichts mehr, das sich die Höhe mit ihm
     teilt. Eine Bühne, die bei 70 % aufhört und den nächsten Abschnitt
     anschneidet, liest sich wie ein Rechenfehler, nicht wie eine Absicht.

     svh statt vh: auf dem Handy schiebt die einklappende Browserleiste den
     Inhalt sonst aus dem Bild. min-height statt height, damit der Hero auf
     kurzen Schirmen wachsen darf, statt den Laden abzuschneiden. */
  min-height:100svh;
  padding:calc(var(--nav-hoehe,80px) + clamp(20px,3vw,48px)) var(--page) clamp(44px,5vw,76px);
  background:var(--grund);color:var(--text)}
/* Ein sehr flacher Schein aus der oberen rechten Ecke — dieselbe Diagonale
   wie im Finale, nur in Papier gedacht. Ohne ihn ist die Bühne eine weiße
   Fläche und der Hero wirkt wie ein unfertiges Layout. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 88% 6%,var(--cyan-zart),transparent 68%),
    radial-gradient(46% 44% at 4% 96%,rgba(13,24,38,.045),transparent 70%)}
.hero > *{position:relative;z-index:1;min-width:0}

.hero__text{max-width:540px}
.hero__text h1{margin:0 0 20px;font-size:clamp(2.3rem,4.1vw,3.7rem);line-height:1.02;
  letter-spacing:-.04em;font-weight:720}
.h1promise{display:block;font-size:.44em;font-weight:600;color:var(--ton);
  letter-spacing:-.01em;line-height:1.15;margin-top:.5em}
.lead{margin:0 0 22px;max-width:44ch;font-size:clamp(1.04rem,1.3vw,1.18rem);
  line-height:1.6;color:var(--ton)}
.trustmarks{display:flex;flex-direction:column;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.trustmarks li{display:flex;align-items:baseline;gap:12px;font-size:.88rem;color:var(--ton)}
.trustmarks li::before{content:"—";flex:0 0 auto;color:var(--akzent);font-weight:700}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}

/* ---- Die Ladenfront ----
   Das einzige gerahmte Objekt der hellen Zone. Es DARF ein Kasten sein: es
   stellt ein eigenes Ding dar, nicht einen Abschnitt der Seite. */
.buehne{min-width:0;justify-self:end;width:min(100%,640px)}
.front{border-radius:14px;overflow:hidden;background:var(--weiss);
  border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(13,24,38,.05),0 18px 44px -14px rgba(13,24,38,.22)}
.front__bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;
  border-bottom:1px solid var(--linie);background:var(--papier2)}
/* Der Punkt in der Shopleiste trägt Magenta — dasselbe Signal wie auf der
   Startseite, wo der erste Chrome-Punkt des Plotter-FIX-Screenshots so steht. */
.front__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 0 3px rgba(255,46,136,.16)}
.front__name{flex:0 0 auto;font:600 .8rem/1 "Geist Mono",monospace;color:var(--tinte)}
.front__navi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.78rem;color:var(--grau)}
.front__korb{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:10px}
.front__sum{font:600 .8rem/1 "Geist Mono",monospace;color:var(--tinte);
  font-variant-numeric:tabular-nums}
.korb{position:relative;display:flex;align-items:center;color:var(--tinte-weich)}
.korb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.korb b{position:absolute;right:-7px;top:-6px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:8px;background:var(--cyan-tinte);color:#fff;
  font:700 .62rem/1 "Geist Mono",monospace;font-variant-numeric:tabular-nums;
  transition:transform .2s cubic-bezier(.22,1.4,.4,1)}
/* Kurzer Stups, wenn ein Artikel dazukommt — die Zahl ist klein, eine reine
   Zahlenänderung übersieht man. shops.js setzt die Klasse und nimmt sie
   nach dem Lauf wieder ab. */
.korb.is-plus b{transform:scale(1.32)}
@media(prefers-reduced-motion:reduce){.korb b,.korb.is-plus b{transition:none;transform:none}}

.regal{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ware{display:flex;flex-direction:column;gap:9px;min-width:0;padding:14px 14px 13px;
  border-top:1px solid var(--linie)}
.ware + .ware{border-left:1px solid var(--linie)}

/* ---- Der Schnitt als Flachzeichnung ----
   Ein Foto zeigt EINE Farbe. Wer sechs Farben führt, pflegt sechs Bilder je
   Artikel — und genau diese Bildpflege ist einer der Posten, die einen
   Shop-Aufbau teuer machen. Die Zeichnung nimmt die Farbe entgegen; der
   Schatten hebt sie von der Kachel ab, damit sie als Ware liest und nicht
   als Piktogramm. */
.ware__bild{display:grid;place-items:center;height:96px;border-radius:9px;
  background:var(--papier2);overflow:hidden}
.tuch{width:auto;height:86px;filter:drop-shadow(0 2px 4px rgba(13,24,38,.16))}
/* Die Kontur trennt das Stück von der Kachel, die Naht zeichnet auf dem
   Stoff. Zwei Aufgaben, zwei Farben — ohne Kontur misst weißer Stoff gegen
   den Papierton der Kachel 1,02:1 und das Shirt ist schlicht nicht da. */
.tuch__stoff{fill:var(--stoff,#c9b89f);stroke:var(--kontur,#6f6455);stroke-width:1.4;
  stroke-linejoin:round;transition:fill .25s ease,stroke .25s ease}
.tuch__naht{fill:none;stroke:var(--naht,#7a6f5f);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease}
.ware__titel{margin:0;font-size:.98rem;font-weight:660;letter-spacing:-.015em;color:var(--tinte)}
/* Die Artikelnummer setzt sich aus den gewählten Merkmalen zusammen und
   ändert sich beim Klicken mit. Sie steht hier nicht als Deko, sondern weil
   genau daran der Unterschied zwischen gepflegtem Katalog und
   durchgereichter Lieferantenliste sichtbar wird. */
.ware__sku{margin:-4px 0 0;font:500 .7rem/1.3 "Geist Mono",monospace;
  letter-spacing:.02em;color:var(--grau)}

.ware__achse{display:grid;gap:6px}
.ware__achse-kopf{display:flex;align-items:baseline;gap:7px;margin:0;
  font:600 .64rem/1 "Geist Mono",monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau)}
.ware__achse-kopf b{font-family:Geist,sans-serif;font-size:.78rem;font-weight:640;
  letter-spacing:0;text-transform:none;color:var(--tinte)}
.ware__var{display:flex;flex-wrap:wrap;gap:6px}
/* Ruhefassung ohne JS: die Varianten als reine Aufzählung. Wahr und
   vollständig, nur nicht bedienbar. */
.ware__ohne{font:500 .78rem/1.6 "Geist Mono",monospace;color:var(--grau)}
.shop-js .ware__ohne{display:none}

.ware__gr{height:26px;min-width:32px;padding:0 9px;border-radius:6px;
  border:1px solid var(--linie-2);background:#fff;color:var(--tinte-weich);
  font:600 .74rem/1 "Geist Mono",monospace;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.ware__gr:hover:not([disabled]){border-color:var(--cyan-tinte);color:var(--tinte)}
.ware__gr[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:#fff}
/* Ausverkaufte Größe: durchgestrichen und gesperrt, nicht versteckt. Wer sie
   sucht, soll sehen, dass es sie gibt und dass sie gerade fehlt — sonst
   sucht er zweimal. */
.ware__gr[disabled]{cursor:not-allowed;opacity:.45;text-decoration:line-through;
  background:transparent}

/* ---- Farbfelder ----
   Der weiße Ton braucht auf weißem Grund einen eigenen Rand, sonst ist das
   Feld unsichtbar. Der Rand liegt deshalb IMMER, nicht nur bei hellen
   Tönen — eine Ausnahme je Farbe wäre der nächste Pflegefall.
   Die Auswahl hängt nicht an der Farbe allein: der gewählte Ton steht als
   Wort im Kopf der Achse. */
.ware__var--farbe{gap:8px;padding:1px 0}
.ware__ton{width:22px;height:22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ton-wert,#ccc);
  box-shadow:inset 0 0 0 1px rgba(13,24,38,.22);
  transition:transform .15s ease,box-shadow .15s ease}
.ware__ton:hover{transform:scale(1.12)}
.ware__ton[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px rgba(13,24,38,.22),0 0 0 2px var(--weiss),0 0 0 4px var(--tinte)}

.ware__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--linie)}
.ware__preis{font-size:1.02rem;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.ware__best{font:500 .71rem/1.3 "Geist Mono",monospace;color:var(--grau);text-align:right}
.ware__best.is-leer{color:#a2422f}

.ware__knopf{height:36px;border-radius:8px;border:1px solid var(--tinte);background:var(--tinte);
  color:#fff;font:660 .83rem/1 Geist,sans-serif;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.ware__knopf:hover:not([disabled]){background:#1b2c42;border-color:#1b2c42;transform:translateY(-1px)}
.ware__knopf:active{transform:none}
/* Leergekauft. Der Artikel bleibt stehen statt zu verschwinden — genau so
   verhält sich ein Shop, dem der Bestand ausgeht, und genau das ist der
   Zustand, den ein Theme nicht mitbringt. */
.ware__knopf[disabled]{cursor:not-allowed;background:transparent;border-color:var(--linie-2);
  color:var(--grau);transform:none}
.front__fuss{margin:0;padding:12px 16px;border-top:1px solid var(--linie);
  background:var(--papier2);color:var(--grau);font-size:.75rem;line-height:1.5}

/* ======================================================================
   SEKTIONEN — versetztes Raster statt Mittelachse
   Die Nummer kommt aus einem CSS-Counter: kein Markup, keine Handpflege,
   und sie stimmt automatisch, wenn eine Sektion dazukommt oder wegfällt.
   Der Maschinenraum trägt bewusst keinen .sec-head — er gehört zum Hero und
   bekommt deshalb keine Nummer.
   ====================================================================== */
.band{position:relative;padding:clamp(64px,8vw,124px) var(--page);
  border-top:1px solid var(--linie);background:var(--grund);color:var(--text)}
.band--paper{background:var(--weiss)}

.sec-head,.sec-head--left{counter-increment:sec;position:relative;max-width:var(--wrap);
  margin:0 auto clamp(38px,4.6vw,64px);padding-left:var(--indent);text-align:left;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:8px clamp(20px,4vw,60px);
  align-items:start}
.sec-head::before{content:counter(sec,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font:700 .82rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--akzent);opacity:.85}
@media(max-width:900px){.sec-head::before{position:static;display:block;margin-bottom:10px}}
.sec-head .eyebrow{grid-column:1/-1;margin-bottom:6px}
.sec-head h2{grid-column:1;margin:0;font-size:clamp(2rem,3.7vw,3.05rem);line-height:1.03;
  letter-spacing:-.035em;font-weight:720;text-wrap:balance;color:var(--text)}
.sec-sub{grid-column:2;margin:.55em 0 0;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--ton);
  line-height:1.6;text-wrap:pretty}
@media(max-width:900px){
  .sec-head,.sec-head--left{grid-template-columns:1fr;gap:14px}
  .sec-head h2,.sec-sub{grid-column:1}
  .sec-sub{margin-top:0}
}

/* ---- Scroll-Reveal ----
   Armiert per JS (html.rv-on): ohne JS bleibt alles sichtbar. Bewusst knapp
   dosiert — 10px und 0.6s, das liest sich als Ruhe, nicht als Effekt.
   Identisch zu /software, damit die Seiten sich gleich anfühlen. */
.rv-on .rv{opacity:0;transform:translateY(10px)}
@media(prefers-reduced-motion:no-preference){
  .rv-on .rv{transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1);
    transition-delay:var(--rvd,0ms)}
}
.rv-on .rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none}}

/* ======================================================================
   02 DER EIGENE SHOP — die Referenz
   ====================================================================== */
/* Bild und Text nebeneinander, die vier Punkte als BAND darunter über die
   volle Breite. Vorher standen die Punkte in der rechten Spalte und machten
   sie rund 200px länger als das Bild — darunter klaffte eine Lücke, die wie
   ein Layoutfehler aussah, weil sie einer war. Jetzt tragen beide Spalten
   oben ungefähr gleich viel, und die Punkte bekommen als eigenes Band mehr
   Gewicht als sie in einer Aufzählung am Textende je hatten. */
.fall{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:start;
  grid-template-areas:"media body" "punkte punkte";
  max-width:var(--wrap);margin:0 auto;padding-left:var(--indent)}
.fall__media{grid-area:media}
.fall__body{grid-area:body}
.fall__points{grid-area:punkte}
.fall__media{position:relative;min-width:0}
.mock{margin:0;border-radius:12px;overflow:hidden;background:#0b1422;
  border:1px solid rgba(174,185,199,.14);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.7)}
.mock__bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;background:#060e1a}
.mock__bar i{width:9px;height:9px;border-radius:50%;background:#233549;flex:0 0 auto}
.mock__bar em{margin-left:10px;font-style:normal;font-size:.73rem;color:#93a8bd;
  font-family:"Geist Mono",monospace;letter-spacing:.02em}
.mock img{width:100%}

.fall__body{min-width:0}
/* Als p.fall__tag notiert, nicht als .fall__tag: die Sparte ist ein direktes
   <p> in .fall__body, und `.fall__body > p` (0,1,1) schlägt sonst jede
   einfache Klasse (0,1,0). Gemessen stand die Sparte deshalb in der
   Fließtextfarbe statt im Akzent. */
.fall__body > p.fall__tag{margin:0 0 12px;font:700 .74rem/1 "Geist Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.fall__body h3{margin:0 0 12px;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.03em;font-weight:720}
.fall__body > p{margin:0;color:var(--ton);line-height:1.65;font-size:1.05rem}
/* Vier Spalten im Haarlinienraster — dieselbe Sprache wie .naeher und .zahlen
   eine Etage tiefer. Der Punkt steht IM FLUSS über dem Text, nicht absolut
   davor: in einer schmalen Spalte bräuchte ein linksstehender Punkt Einzug,
   und der erste hätte keinen (die Zelle beginnt ja an der Kante). Als
   Blockelement löst sich das von selbst und wandert bei jedem Umbruch mit. */
.fall__points{margin:clamp(30px,3.6vw,48px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fall__points li{padding:18px clamp(14px,1.6vw,24px) 0 0;border-top:1px solid var(--linie-2);
  color:var(--ton);line-height:1.55;font-size:.93rem}
.fall__points li + li{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--linie)}
.fall__points li::before{content:"";display:block;width:7px;height:7px;margin:0 0 11px;
  border-radius:50%;background:var(--magenta)}
.fall__foot{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:24px}

/* Nur DIESER Abschnitt bekommt den Shop-Akzent im Eyebrow — er ist das
   Gegenstück zu .shopcase auf der Startseite. Alle anderen Sektionen bleiben
   beim Hausystem. */
.laden .eyebrow,.laden .naeher__no{color:var(--magenta)}

/* ---- Was den Fall trägt ----
   Drei Aussagen im Haarlinienraster, ohne eigene Sektionsüberschrift: sie
   gehören zur Fallbeschreibung darüber und sind nur zu lang für deren
   Aufzählung. Eine eigene Nummer bekämen sie zu Unrecht — es ist kein
   neues Kapitel, sondern derselbe Beweis, eine Ebene genauer. */
.naeher{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--wrap);
  margin:clamp(44px,5vw,72px) auto 0;padding-left:var(--indent)}
.naeher__teil{position:relative;min-width:0;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,32px) 0 0;
  border-top:1px solid var(--linie-2)}
.naeher__teil + .naeher__teil{padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--linie)}
.naeher__no{margin:0 0 12px;font:700 .68rem/1 "Geist Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akzent);opacity:.9}
.naeher__teil h4{margin:0 0 10px;font-size:1.06rem;font-weight:660;letter-spacing:-.018em;
  color:var(--text)}
.naeher__teil p{margin:0;color:var(--ton);line-height:1.65;font-size:.95rem}
.naeher__teil a{color:var(--fox);font-weight:640;text-decoration:none}
.naeher__teil a:hover{text-decoration:underline}

/* Der Schlusssatz des Abschnitts: warum eine Agentur überhaupt einen
   eigenen Shop vorzeigt. Steht bewusst NACH den Zahlen — erst der Beleg,
   dann die Einordnung. */
.laden__note{max-width:min(var(--wrap),88ch);margin:clamp(34px,4vw,52px) auto 0;
  padding-left:var(--indent);color:var(--leise);font-size:.92rem;line-height:1.68}
.laden__note b{color:var(--ton);font-weight:640}

/* ---- Zahlen mit Zeitraum und Messmethode ----
   Eine Kennzahl ohne beides ist eine Behauptung. Die Quelle steht deshalb
   nicht im Kleingedruckten am Seitenende, sondern direkt darunter. */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;
  max-width:var(--wrap);margin:clamp(44px,5vw,72px) auto 0;padding:0 0 0 var(--indent)}
.zahl{display:flex;flex-direction:column;gap:6px;padding:22px clamp(16px,2vw,28px) 22px 0;
  border-top:1px solid var(--linie-2)}
.zahl + .zahl{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--linie)}
/* Die Kennzahlen in Magenta, exakt wie .shopcase__stats dd auf der
   Startseite: dieselben Zahlen, dieselbe Farbe, sofortige Wiedererkennung. */
.zahl b{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:720;letter-spacing:-.04em;
  line-height:1;color:var(--magenta);font-variant-numeric:tabular-nums}
.zahl span{font:500 .74rem/1.35 "Geist Mono",monospace;letter-spacing:.08em;color:var(--leise)}
/* Die Quellenangabe trägt fetten Text, weil „ohne bezahlte Anzeigen" die
   entscheidende Einschränkung ist und nicht Kleingedrucktes. */
.zahlen__quelle b{color:var(--ton);font-weight:640}
.zahlen__quelle{max-width:var(--wrap);margin:18px auto 0;padding-left:var(--indent);
  color:var(--leise);font-size:.82rem;line-height:1.6}

/* ======================================================================
   03 MARKTPLÄTZE — helle Zone, Haarlinienraster
   ====================================================================== */
.mp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--wrap);
  margin:0 auto;padding-left:var(--indent)}
.kanal{display:flex;flex-direction:column;min-width:0;position:relative;
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.6vw,34px) clamp(26px,3vw,38px) 0;
  border-top:1px solid var(--linie);transition:background-color .25s ease}
.kanal + .kanal{padding-left:clamp(20px,2.6vw,34px);border-left:1px solid var(--linie)}
@media(hover:hover){.kanal:hover{background:var(--heben)}}
.kanal__no{margin:0;font:700 .8rem/1 "Geist Mono",monospace;letter-spacing:.08em;
  color:var(--akzent);opacity:.75}
.kanal h3{margin:12px 0 4px;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em;color:var(--text)}
.kanal__claim{margin:0 0 16px;color:var(--akzent);font-size:.92rem;font-weight:620}
.kanal > p:last-child{margin:0;color:var(--ton);line-height:1.65;font-size:.99rem}
.kanal p b{font-weight:680;color:var(--text)}

.mp__note{max-width:var(--wrap);margin:clamp(38px,4.4vw,60px) auto 0;padding-left:var(--indent);
  color:var(--leise);font-size:.92rem;line-height:1.68;max-width:min(var(--wrap),86ch)}
.mp__note b{color:var(--ton);font-weight:640}
.mp__note a{color:var(--fox);font-weight:640;text-decoration:none}
.mp__note a:hover{text-decoration:underline}

/* ======================================================================
   04 LEISTUNGEN — vier Arbeitsfelder
   ====================================================================== */
.leist__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:var(--wrap);
  margin:0 auto;padding-left:var(--indent)}
.tat{position:relative;display:flex;flex-direction:column;min-width:0;
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,36px) clamp(28px,3.2vw,40px) 0;
  border-top:1px solid var(--linie);transition:background-color .25s ease}
.tat:nth-child(even){padding-left:clamp(22px,2.6vw,36px);border-left:1px solid var(--linie)}
@media(hover:hover){.tat:hover{background:var(--heben)}}
.tat__ico{display:block;width:26px;height:26px;margin:0 0 16px;color:var(--leise);
  transition:color .2s ease}
.tat:hover .tat__ico{color:var(--akzent)}
.tat__ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tat h3{margin:0 0 10px;font-size:clamp(1.2rem,1.9vw,1.45rem);letter-spacing:-.02em;color:var(--text)}
.tat > p{margin:0;color:var(--ton);line-height:1.65;font-size:.99rem}
.tat__liste{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:0}
.tat__liste li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--linie);
  color:var(--ton);font-size:.92rem;line-height:1.5}
.tat__liste li:last-child{border-bottom:1px solid var(--linie)}
.tat__liste li::before{content:"";position:absolute;left:2px;top:1.05em;width:6px;height:6px;
  border-radius:50%;background:var(--akzent);opacity:.8}

/* ======================================================================
   GEGENÜBERSTELLUNG — eine Haarlinie trennt, kein Kasten
   Die ehrliche Seite gehört dazu: wer nie abrät, dem glaubt man den Rat
   auch nicht. Die "dafür"-Seite bekommt Licht, die "dagegen"-Seite bleibt
   sachlich — sie ist kein Warnhinweis.
   ====================================================================== */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:calc(var(--wrap) + 2 * var(--page));margin:0 auto;
  padding:clamp(56px,7vw,96px) var(--page);border-top:1px solid var(--linie)}
.pair__card{padding:0 clamp(24px,3.4vw,52px) 0 0}
.pair__card + .pair__card{padding:0 0 0 clamp(24px,3.4vw,52px);border-left:1px solid var(--linie)}
.pair__card h3{margin:10px 0 14px;font-size:clamp(1.3rem,2.1vw,1.68rem);letter-spacing:-.025em;
  color:var(--text)}
.pair__card p{margin:0;color:var(--ton);line-height:1.65}
/* Die Akzentkarte braucht ein eigenes linkes Padding: .pair__card setzt
   padding:0 X 0 0, also links NULL — der Balken bei left:0 läge damit genau
   auf der Textkante und schnitte in die erste Buchstabenspalte. Das linke
   Padding ist hier keine Optik, sondern der Platz, den der Balken belegt. */
.pair__card--accent{position:relative;padding-left:clamp(18px,1.8vw,26px)}
.pair__card--accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cyan);box-shadow:0 0 14px rgba(25,191,244,.6)}

/* ======================================================================
   05 VORGEHEN — vier Schritte auf einer Linie
   Die Linie oben füllt sich mit dem Scrollweg (--p aus shops.js). Ohne JS
   und bei reduzierter Bewegung steht sie voll: eine gezeichnete Strecke,
   kein halbes Bild.
   ====================================================================== */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--wrap);margin:0 auto;padding:0 0 0 var(--indent);list-style:none}
.step{position:relative;padding:30px clamp(18px,2.2vw,30px) 0 0}
.step + .step{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--linie)}
@media(min-width:901px){
  .steps::after{content:"";position:absolute;top:0;left:var(--indent);right:0;height:1px;
    background:var(--linie-2);z-index:0}
  .steps::before{content:"";position:absolute;top:0;left:var(--indent);right:0;height:1px;
    background:var(--cyan);z-index:1;box-shadow:0 0 12px var(--akzent-schein);
    transform-origin:left center;transform:scaleX(var(--p,0));will-change:transform}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){.steps::before{transform:scaleX(1)}}
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-top:1px solid var(--linie)}
  .step + .step{border-left:0;padding-left:0}
  .step:nth-child(even){padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--linie)}
}
@media(max-width:600px){.steps{grid-template-columns:1fr}.step:nth-child(even){padding-left:0;border-left:0}}
.step__no{position:relative;z-index:2;margin:0;font:700 .8rem/1 "Geist Mono",monospace;
  letter-spacing:.08em;color:var(--akzent);opacity:.75}
.step h3{margin:14px 0 10px;font-size:1.24rem;letter-spacing:-.02em;color:var(--text)}
.step p{margin:0;color:var(--ton);line-height:1.6;font-size:.96rem}

/* ======================================================================
   06 TECHNIK & BETRIEB — Haarlinienraster
   ====================================================================== */
.umfang__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--wrap);
  margin:0 auto;padding-left:var(--indent)}
.feat{position:relative;padding:clamp(26px,3vw,36px) clamp(20px,2.4vw,32px) clamp(28px,3.2vw,40px) 0;
  border-top:1px solid var(--linie);transition:background-color .25s ease}
.feat:not(:nth-child(3n+1)){padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--linie)}
@media(hover:hover){.feat:hover{background:var(--heben)}}
.feat__ico{display:block;width:26px;height:26px;margin:0 0 16px;color:var(--leise);transition:color .2s ease}
.feat:hover .feat__ico{color:var(--akzent)}
.feat__ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 10px;font-size:1.12rem;letter-spacing:-.015em;color:var(--text)}
.feat p{margin:0;color:var(--ton);line-height:1.6;font-size:.95rem}
.umfang__note{max-width:min(var(--wrap),86ch);margin:clamp(34px,4vw,52px) auto 0;
  padding-left:var(--indent);color:var(--leise);font-size:.92rem;line-height:1.68}
.umfang__note b{color:var(--ton);font-weight:640}

/* ======================================================================
   07 FRAGEN
   ====================================================================== */
.faq__list{max-width:var(--wrap);margin:0 auto;padding-left:var(--indent)}
.faq__item{border-bottom:1px solid var(--linie)}
.faq__item:first-child{border-top:1px solid var(--linie)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 4px;cursor:pointer;list-style:none;font-size:clamp(1rem,1.35vw,1.12rem);font-weight:620;
  letter-spacing:-.015em;color:var(--text);transition:color .15s ease}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--akzent)}
.faq__item summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-right:4px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease}
.faq__item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq__item[open] summary{color:var(--akzent)}
.faq__answer{margin:0;padding:0 4px 26px;max-width:74ch;color:var(--ton);line-height:1.7;font-size:.99rem}
.faq__note{max-width:var(--wrap);margin:clamp(28px,3.2vw,40px) auto 0;padding-left:var(--indent);
  color:var(--leise);font-size:.94rem}

/* ======================================================================
   FUSSZEILE
   Das Finale selbst kommt aus finale.css — sie wird NACH dieser Datei
   geladen und gilt für alle drei Unterseiten. Hier steht nur die Fusszeile,
   die sie nicht abdeckt.
   ====================================================================== */
.web-foot{position:relative;display:flex;flex-wrap:wrap;gap:12px 26px;
  justify-content:space-between;align-items:center;
  padding:28px var(--page);background:var(--navy);color:var(--hell-dim);font-size:.88rem;
  border-top:1px solid rgba(25,191,244,.28)}
.web-foot a{color:var(--hell-muted);text-decoration:none}
.web-foot a:hover{color:var(--cyan)}
.web-foot__worlds a{margin:0 2px}

/* ======================================================================
   RESPONSIVE
   Die Umschaltpunkte sind dieselben wie auf /software (900/600) — plus
   einer bei 1040, weil der Hero hier zwei echte Spalten hat statt Text
   neben einem Bild.
   ====================================================================== */
@media(max-width:1040px){
  /* Der Laden unter den Text: nebeneinander bleiben unter ~1000px weder
     Überschrift noch Regal lesbar. */
  .hero{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);
    padding-bottom:clamp(34px,5vw,52px)}
  .hero__text{max-width:none}
  .buehne{justify-self:stretch;width:100%;max-width:620px}
  .naeher{grid-template-columns:1fr 1fr}
  .naeher__teil:nth-child(odd){padding-left:0;border-left:0}
  .naeher__teil:nth-child(3){grid-column:1/-1}
}
@media(max-width:900px){
  /* DER EINZUG FÄLLT WEG — und zwar wirklich, nicht nur im Kommentar oben.
     Er ist die leere Nummernspalte des versetzten Rasters; unter 900px rückt
     die Nummer per .sec-head::before ohnehin in den Textfluss, die Spalte hat
     also keine Aufgabe mehr. Bleibt sie stehen, addiert sie sich auf den
     Seitenrand: gemessen bei 375px stand der Text links bei 48px (22 Rand +
     26 Einzug) gegen 22px rechts. Das liest sich als nach rechts verrutschte
     Seite, und genau das war es auch. */
  :root{--indent:0px}
  .naeher{grid-template-columns:1fr}
  .naeher__teil,.naeher__teil:nth-child(n){padding-left:0;padding-right:0;border-left:0}
  /* Einspaltig: die Bereiche stapeln, das Punkteband wird zweizeilig. */
  .fall{grid-template-columns:1fr;gap:32px;
    grid-template-areas:"media" "body" "punkte"}
  .fall__points{grid-template-columns:1fr 1fr}
  .fall__points li:nth-child(odd){padding-left:0;border-left:0}
  .fall__points li:nth-child(n+3){border-top:1px solid var(--linie)}
  .mp__grid{grid-template-columns:1fr}
  .kanal,.kanal + .kanal{padding-left:0;padding-right:0;border-left:0}
  .leist__grid{grid-template-columns:1fr}
  .tat,.tat:nth-child(even){padding-left:0;padding-right:0;border-left:0}
  .umfang__grid{grid-template-columns:1fr 1fr}
  .feat:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .feat:nth-child(even){padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--linie)}
  .pair{grid-template-columns:1fr;gap:34px}
  .pair__card,.pair__card + .pair__card{padding:0;border-left:0}
  .pair__card--accent{padding-left:20px}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl:nth-child(odd){padding-left:0;border-left:0}
  .zahl:nth-child(3),.zahl:nth-child(4){border-top:1px solid var(--linie)}
}
/* ======================================================================
   HANDY — Kopfleiste aus, Griff bleibt, Bedienung auf Fingergröße
   768/769 ist derselbe Umschaltpunkt, den site-nav.css und edge-nav.css
   nennen; ab hier führt das Edge-Menü die Navigation.
   ====================================================================== */
@media(max-width:768px){
  /* Die Kopfleiste trägt hier nur noch das Logo — Weltenpunkte und Aktion
     blendet site-nav.css unter 769px selbst aus. Übrig bleibt ein 64px hoher
     Balken, der nichts mehr bedient und sich mit dem Griff überlagert: beide
     sitzen gemessen bei y=0, die Leiste über die volle Breite, der Griff
     44px breit an derselben Kante.

     Also weg. Verloren geht nur der Sprung zur Startseite über das Logo —
     den trägt das Edge-Menü als ersten Punkt ohnehin.

     Bewusst an body.shop gehängt: site-nav.css ist geteilt, dort zu greifen
     nähme /websites und /software die Leiste gleich mit. */
  body.shop .topnav{display:none}

  /* Der Griff hängt an position:fixed und ist von der Leiste unabhängig; er
     bleibt also stehen. Was wegfällt, ist nur die Höhenreserve, die der Hero
     für die Leiste vorhielt — jetzt genau so viel, dass die Überschrift
     nicht unter den Griff läuft (der belegt y=4…68). */
  .hero{padding-top:clamp(88px,22vw,108px)}

  /* Bedienelemente des Ladens auf Fingergröße. Gemessen waren die Farbfelder
     22×22 und die Größenknöpfe 32×26 — mit der Maus präzise, auf Glas ein
     Geduldsspiel. Ausgerechnet hier soll jemand ausprobieren, wie sich ein
     gepflegter Katalog anfühlt; wer dabei danebentippt, probiert es nicht
     nochmal. Die 24×24 der WCAG sind erfüllt, aber das ist die Untergrenze
     und keine Zielgröße. */
  .ware__gr{height:38px;min-width:44px;font-size:.82rem}
  .ware__ton{width:30px;height:30px}
  .ware__var{gap:8px}
  .ware__var--farbe{gap:12px}
  .ware__knopf{height:46px;font-size:.88rem}
  /* Mehr Luft in der Karte, weil sie einspaltig die volle Breite hat — und
     ein größeres Kleidungsstück, weil dafür jetzt Platz ist. */
  .ware{padding:16px 16px 15px;gap:11px}
  .ware__bild{height:118px}
  .tuch{height:106px}
}
@media(max-width:600px){
  .umfang__grid{grid-template-columns:1fr}
  .feat,.feat:nth-child(even){padding-left:0;border-left:0}
  /* Das Regal einspaltig: zwei Karten nebeneinander sind bei 320px je 140px
     breit, dort passt weder Titel noch Preiszeile ohne Umbruch. */
  .regal{grid-template-columns:1fr}
  .ware + .ware{border-left:0}
  .front__navi{display:none}
  .cta-row{flex-direction:column;align-items:stretch;gap:14px}
  .cta-row .web-btn{width:100%}
  .cta-row .web-link{align-self:flex-start}
  /* Die Kennzahlen bleiben ZWEISPALTIG bis ganz nach unten. Einspaltig sind
     es vier Zeilen à rund 90px, also ein Turm, der als Textwand liest — und
     das bei vier Werten, von denen der längste sechs Zeichen hat. Zwei
     Spalten machen daraus einen kompakten Block, den man in einem Blick
     erfasst. Die Rahmenlogik dafür steht schon im 900er-Block (ungerade ohne
     linke Linie, Zeile zwei mit oberer) und gilt hier weiter.
     Nur die Innenabstände werden enger, damit die längste Beschriftung
     („organisch · ohne Ads") in der halben Breite Platz findet. */
  .zahl{padding-right:12px}
  .zahl + .zahl{padding-left:12px}
  .zahl b{font-size:clamp(1.7rem,7.5vw,2.1rem)}
}

/* ===== EYEBROW IN DER H1 (25.09.2026) =====
   Die Eyebrow sitzt jetzt als <span> in der H1 statt als Absatz darueber.
   So stehen die Suchbegriffe (Websites, Onlineshops ...) am Anfang der H1,
   und die grosse Zeile darf kreativ bleiben. Optisch aendert sich nichts:
   der Span wird Block und behaelt die Masse der Eyebrow.
   .sr-only traegt einen unsichtbaren Doppelpunkt, damit ein Screenreader
   nicht "Onlineshops und Marktplaetze Ein Shop" in einem Atemzug liest. */
h1 > .eyebrow{display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}