/* Figma y9fsU21vEKMAvzb2732gmw / 2044:2. Image frame: 290..1711 on 2048. */
.sr { --sr-ease:cubic-bezier(.65,0,.35,1); --sr-dark:#201e1e; /* HVR-20260912-12 (Rene): dunkle Flaechen einheitlich im Token #201e1e, vorher Figma-Grau #3a3a3a */ --sr-left:14.16015625%; --sr-width:69.384765625%; --sr-heading-size:clamp(1.7rem,4.8876953125vw,7rem); --sr-inset:clamp(1.25rem,2vw,2.25rem); --sr-story-ratio:2048 / 1228; }
.sr h2,.sr h3 { text-align:left; }
.sr .svc-wrap { width:var(--sr-width); margin-left:var(--sr-left); margin-inline-start:var(--sr-left); }
.sr .svc-section { padding:9vh 0; }
.sr .svc-section--dark,.sr .svc-cta { --svc-bg:var(--sr-dark); --svc-ink:#fff; --svc-muted:rgba(255,255,255,.76); --svc-rule:#ffffff; } /* HVR-20260914-31: volle Farbstaerke */
.sr figure { margin:0; }
.sr img { display:block; width:100%; height:auto; }
.sr-open { --rp-ink:var(--signal-red); --rp-ink2:#fff; margin-left:var(--sr-left); width:var(--sr-width); max-width:none; height:auto; min-height:50vh; justify-content:flex-start; padding-bottom:5vh; }
.sr-open .rp-open__hl { font-size:clamp(1.7rem,2.21245vw,3.25rem); line-height:1.2; letter-spacing:0; }
.sr-open .rp-open__sub { font-size:clamp(1rem,1.46484375vw,2rem); line-height:1.333333; max-width:30.3667em; margin-top:.8em; }
.hero__page[data-page="design-sprint"] .hero__pline--h3 { display:none; }
.hero__page[data-page="design-sprint"] .hero__page-headline { font-family:"HK Grotesk Wide",var(--font-display); }
.sr-frame { position:relative; }
.sr-frame::before,.sr-frame::after { content:""; position:absolute; z-index:2; left:var(--chrome-rail,3.75%); right:0; /* HVR-20260914-42 (Rene): Horizontale bis zum Website-Rand, vorher 13.75 % (Ende auf v3) */ height:var(--line-w,1px); background:var(--svc-rule); pointer-events:none; }
.sr-frame::before { top:0; }.sr-frame::after { bottom:0; }
.sr-cover.svc-section { padding:3.369140625vw 0; } /* HVR-20260912-33: Pantone-Reihe entfernt, Section schliesst symmetrisch unter dem Bild */
.sr-cover::before { content:""; position:absolute; left:var(--chrome-rail,3.75%); right:13.75%; top:0; height:var(--line-w,1px); background:var(--svc-rule); }
.sr-cover__image { position:relative; overflow:hidden; }
.sr .sr-cover__image>img { width:100%; height:auto; }
/* --- Cover-Wortmarke (Rene 2026-09-10) -----------------------------------
DESIGN fliegt von links, SPRINT von rechts in das Bild; beide zugleich.
Sie erscheinen NUR im Bild: die figure clippt (overflow:hidden), die
Startlagen liegen komplett ausserhalb ihres Rahmens.
Blend: Photoshop "Ausschluss" = mix-blend-mode:exclusion. Als CSS-
Eigenschaft liegt er dauerhaft an, also auch waehrend der Bewegung.
Tinte Off-White, nicht Schwarz: Exclusion mit Schwarz laesst den Grund
unveraendert (unsichtbar), mit Weiss invertiert er ihn — dunkle Lettern
auf dem hellen Bildgrund, helle ueber den Produkten, wie in der Referenz.
isolation:isolate begrenzt das Blending auf das Bild.
Masse in Bildpixeln der 2048er Vorlage: --cw = 100cqw/2048 (dieselbe
Konvention wie --u in .PHASES). container-type:inline-size laesst die
Hoehe beim img. Ruhelage aus der Referenz gemessen: DESIGN linke Ink-
kante 5.0 % der Breite, SPRINT rechte 92.5 %; Cap-Oberkanten 34.2 % und
52.5 % der Hoehe; DESIGN ueberspannt 59.5 % der Breite. Der Schriftgrad
ist auf diese SPANNWEITE kalibriert (301/2048 = 14.7 %): Montserrat Bold
laeuft enger als die Referenzschrift, bei gleicher Cap-Hoehe (263) endete
DESIGN 7.6 % zu frueh. Die Cap ist damit 15 % hoeher als in der Referenz
— die Stoppkanten und die Ueberlappung der beiden Woerter stimmen.
Box-Oberkante = Cap-Oberkante minus gemessener Versatz .1544em.
ZUSTAENDE 01 initial: hidden (hier), nach Mount: ausserhalb im Clip.
02 entry (Desktop): das Cover pinnt zentriert fuer einen
Viewport Scrollweg; 0-40 % Haltezone, 40-100 % Flug,
scrub 0.6 (Rene 2026-09-10, dritte Fassung). Mobil ohne
Pin: Flug waehrend der Annaeherung (Bildmitte 85 -> 50 %).
03/04 kein Build, keine Interaktion.
05 exit: der Pin loest sich, die Woerter scrollen mit dem
Bild in die naechste Section.
06 reverse: vollstaendig umkehrbar — beim Hochscrollen
fliegen die Woerter wieder aus dem Bild, dann loest sich
der Pin oben. Schliessen der Seite setzt auf hidden.
Reduced Motion: Ruhelage sichtbar, keine Bewegung. */
.sr-cover__image { container-type:inline-size; isolation:isolate; }
/* --cw MUSS auf einem Kind der figure stehen: cqw loest gegen den naechsten
Container-VORFAHREN auf. Auf der figure selbst deklariert traf es den
Viewport (gemessen 184.9 px statt 127 px Schriftgrad bei 1440). */
.sr-cover__wm { position:absolute; inset:0; pointer-events:none; --cw:calc(100cqw / 2048); }
.sr-cover__w { position:absolute; margin:0; visibility:hidden; font:700 calc(301 * var(--cw))/1 "Montserrat",var(--font-display); letter-spacing:0; text-transform:uppercase; white-space:nowrap; color:#ededed; mix-blend-mode:exclusion; will-change:transform; }
.sr-cover__w--design { left:calc(102 * var(--cw)); top:30.67%; }
.sr-cover__w--sprint { right:calc(154 * var(--cw)); top:48.97%; }
@media (prefers-reduced-motion:reduce) { .sr-cover__w { visibility:visible; } }
.sr-title { margin:0; font:700 var(--sr-heading-size)/1.72 "Montserrat",var(--font-display); letter-spacing:0; text-transform:uppercase; white-space:nowrap; text-align:left; }
.sr-title i,.sr-cta-title i { margin-right:.06em; color:var(--signal-red); }
.sr-heading-row { display:grid; grid-template-columns:1fr; align-items:start; padding-bottom:0; border-bottom:1px solid var(--svc-rule); margin-bottom:3vh; }
.sr-statement { margin:0; font:700 clamp(1.7rem,2.21245vw,3.25rem)/1.2 "HK Grotesk Wide",var(--font-display); text-transform:uppercase; letter-spacing:0; }
.sr-statement>span { color:var(--signal-red); }
.sr-copy { margin:0; max-width:32em; font:400 clamp(1rem,1.35vw,1.55rem)/1.5 "HK Grotesk Wide",var(--font-body); color:var(--svc-muted); }
.sr-note { margin:1.5em 0 0; font:400 clamp(.875rem,1vw,1.1rem)/1.55 var(--font-body); color:var(--svc-muted); }
/* Fuss 5vh statt 10vh (Rene 2026-09-10: die Story folgt UNMITTELBAR auf
THE BRIEF). Zusammen mit dem 4svh-Kopf der Buehne ergibt das die
9vh-Sectionkadenz der Site; vorher lagen 185 px zwischen Brief-Ende und
SKETCH-Titel. */
.sr-brief.svc-section { padding:7vh 0 5vh; }
.sr-brief__body { display:grid; grid-template-columns:46% minmax(0,1fr); gap:8%; padding:0 1.7578125vw; }
.sr-requirements { margin:3vh 0 0; }
.sr-requirements>div { display:grid; grid-template-columns:27% minmax(0,1fr); gap:1em; padding:1.3em 0; border-top:1px solid var(--svc-rule); font:400 clamp(.875rem,1.1vw,1.2rem)/1.5 var(--font-body); }
.sr-requirements dt { font-weight:700; }.sr-requirements dd { margin:0; color:var(--svc-muted); }
/* Screenshot reference: outer title rails, inset image rails, and a ruled
band above and below the image. Every slide shares the Variations ratio. */
.sr-story.svc-section { padding:0 0 5vh; }
.sr-story-stage { padding:5vh 0; }
.sr-story-sheet { position:relative; }
.sr-story-titles { position:relative; }
.sr-story-title--next { display:none; }
.sr-story-heading::after { display:none; }
.sr-story-mat::before,.sr-story-mat::after { display:none; }
.sr-story-inner-rails { display:none; }
.sr-story-image-frame::before,.sr-story-image-frame::after { display:none; }
.sr-story-canvas { min-width:0; }
/* Every process image uses the Variations format, including unpinned layouts. */
.sr-scene figure { position:relative; overflow:hidden; aspect-ratio:var(--sr-story-ratio); }
.sr-scene figure::before,.sr-scene figure::after { content:""; position:absolute; z-index:2; left:0; right:0; height:var(--line-w,1px); background:var(--svc-rule); pointer-events:none; }
.sr-scene figure::before { top:0; }.sr-scene figure::after { bottom:0; }
.sr .sr-scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.sr-scene+.sr-scene { margin-top:6vh; }
.sr-mobile-heading { border-top:1px solid var(--svc-rule); }
/* Oben buendig, nicht zentriert: die 100svh-Buehne verteilte ihre Restluft
je zur Haelfte ueber und unter die Tafel (gemessen 94.7 px ueber dem
Titel bei 1440x900) — das war der "zu viel Platz" zwischen THE BRIEF und
der Bildvorschau. Kopf 4svh, die Restluft liegt jetzt unten in der
gepinnten Buehne, wo sie nicht als Abstand zum Brief liest. Die Tafel
wird weiterhin in die Viewporthoehe eingepasst (syncStageSize rechnet
mit diesen Paddings). */
.sr-motion .sr-story-stage { height:var(--sr-stage-height,100svh); min-height:0; padding:4svh 0 8svh; display:flex; flex-direction:column; justify-content:flex-start; }
.sr-motion .sr-story-sheet { flex:none; width:100%; }
.sr-motion .sr-story-titles { height:calc(var(--sr-heading-size)*1.72); overflow:hidden; }
.sr-motion .sr-story-titles .sr-title { position:absolute; inset:0; display:block; font-size:var(--sr-heading-size); }
.sr-motion .sr-story-title--next { transform:translateX(100%); }
.sr-motion .sr-story-mat { padding-block:clamp(1.25rem,2.7vw,3.5rem); }
.sr-motion .sr-story-mat::before,.sr-motion .sr-story-mat::after { display:block; }
.sr-motion .sr-story-inner-rails { display:block; position:absolute; z-index:3; top:0; bottom:0; left:calc(var(--sr-left) + (var(--sr-width) - var(--sr-story-media-width))/2); width:var(--sr-story-media-width); border-inline:1px solid var(--svc-rule); pointer-events:none; }
.sr-motion .sr-story-canvas { position:relative; overflow:hidden; width:var(--sr-story-media-width); margin-left:calc(var(--sr-left) + (var(--sr-width) - var(--sr-story-media-width))/2); margin-inline-start:calc(var(--sr-left) + (var(--sr-width) - var(--sr-story-media-width))/2); aspect-ratio:var(--sr-story-ratio); }
.sr-motion .sr-story-image-frame::before,.sr-motion .sr-story-image-frame::after { display:block; }
.sr-motion .sr-scene { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; }
.sr-motion .sr-scene figure { width:100%; height:100%; margin:0; aspect-ratio:var(--sr-story-ratio); }
.sr-motion .sr-scene:not(:first-child) { transform:translateX(100%); }
.sr-motion .sr-scene figure::before,.sr-motion .sr-scene figure::after { display:none; }
.sr-motion .sr-mobile-heading { display:none; }
.sr-delivery-summary { padding-top:3vh; }
.sr-deliverables { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-bottom:1px solid var(--svc-rule); } /* HVR-20260914-23 (Rene, AD): die vier Arten der Visualisierung (Concepts, CMF variations, Selection on white, Selection staged) statt des Dreiers */
/* HVR-20260912-35/-36: Stationen in Slideshow-Reihenfolge, Nummer im Eyebrow-Atom der Seite (.svc-eye-Werte),
Titel Term-Statement, Stuetzzeile Descriptor (>= 16 px), Hairlines terminieren an v2/v3 (svc-wrap) */
.sr-deliverables>div { padding:4vh var(--sr-inset); border-top:1px solid var(--svc-rule); }
.sr-deliverables>div+div { border-left:1px solid var(--svc-rule); }
.sr-deliverables span { display:block; font:400 max(.875rem,.95vw)/1.5 var(--font-display); letter-spacing:.1em; text-transform:uppercase; font-variant-numeric:tabular-nums; color:var(--svc-ink); margin-bottom:1.2em; } /* HVR-20260914-45 (Rene): Nummer in Ink statt muted */
.sr-deliverables h3 { margin:0 0 .6em; font:700 clamp(1.3rem,2vw,2.3rem)/1.1 var(--font-display); text-transform:uppercase; }
.sr-deliverables p { margin:0; font:400 clamp(1rem,1.35vw,1.55rem)/1.55 "HK Grotesk Wide",var(--font-body); color:var(--svc-ink); } /* HVR-20260914-45 (Rene): Copy in voller Deckkraft (vorher rgba .76), lesbar auf dem Grund */ /* Copy-Atom der Seite (.sr-copy), >= 16 px */
.sr-provenance { margin:2em 0 0; padding-inline:var(--sr-inset); font:400 .875rem/1.6 var(--font-body); color:var(--svc-muted); max-width:70em; }
.sr-scope-intro { display:grid; grid-template-columns:minmax(0,1fr); gap:3vh; margin-bottom:5vh; }
/* A single stepped comparison, with aligned deliverable rows. */
/* HVR-20260914-46 (Rene): S / M / L als eigenstaendige, vollstaendig gerahmte Boxen mit Raum
(Pricing-Card-Muster, HVR-20260914-28) statt Subgrid-Leiter Linie an Linie; Kopf, Zweck und
Dauer sichtbar, alle Leistungen je Paket ueber einen Toggle (details, wie das FAQ-Atom).
Grundflaechen S hell / M grau / L dunkel bleiben die visuelle Vielfalt. */
.sr-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2vw,2rem); align-items:start; margin-bottom:clamp(1.2rem,2vw,2rem); }
.sr-package { --sr-package-bg:var(--bg); --sr-package-ink:var(--fg); --sr-package-muted:var(--svc-muted); --sr-package-line:var(--svc-rule); display:flex; flex-direction:column; min-width:0; border:1px solid var(--sr-package-line); background:var(--sr-package-bg); color:var(--sr-package-ink); }
.sr-package--m { --sr-package-bg:var(--tile-gray); }
.sr-package--l { --sr-package-bg:var(--sr-dark); --sr-package-ink:var(--bg); --sr-package-muted:rgba(237,237,237,.74); --sr-package-line:#ededed; } /* HVR-20260914-31 */
.sr-package__head { display:flex; flex-direction:column; justify-content:space-between; gap:2rem; min-height:15rem; padding:var(--sr-inset); }
.sr-package__identity { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.sr-package__size { font:700 clamp(3.5rem,7.5vw,8rem)/.9 var(--font-display); letter-spacing:-.045em; }
.sr-package h3 { margin:0; font:700 clamp(1.2rem,1.7vw,1.9rem)/1.1 var(--font-display); text-transform:uppercase; }
.sr-package__price { text-align:left; }
.sr-package__price span { display:block; font:400 max(.875rem,.95vw)/1.5 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--sr-package-muted); }
.sr-package__purpose { margin:0; padding:1.25rem var(--sr-inset); border-top:1px solid var(--sr-package-line); font:700 clamp(1rem,1.1vw,1.25rem)/1.5 var(--font-body); }
.sr-package__more { border-top:1px solid var(--sr-package-line); }
.sr-package__more summary { cursor:var(--cursor-hand); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1em; padding:1rem var(--sr-inset); font:700 .875rem/1.5 var(--font-body); text-transform:uppercase; letter-spacing:.045em; }
.sr-package__more summary::-webkit-details-marker { display:none; }
.sr-package__more summary::after { content:"+"; font-weight:400; font-size:1.3em; line-height:1; color:var(--signal-red); }
.sr-package__more[open] summary::after { content:"\2212"; }
.sr-package__more[open] summary { border-bottom:1px solid var(--sr-package-line); }
.sr-package__more summary:focus-visible { outline:2px solid var(--signal-red); outline-offset:-4px; }
.sr-package__details { margin:0; }
.sr-package__details>div { padding:1.1rem var(--sr-inset); }
.sr-package__details>div+div { border-top:1px solid var(--sr-package-line); }
.sr-package__addons { margin:0; padding:1.1rem var(--sr-inset); border-top:1px solid var(--sr-package-line); font:700 clamp(1rem,1.1vw,1.25rem)/1.5 var(--font-body); }
.sr-package__plus { color:var(--signal-red); margin-right:.5em; }
.sr-package__details dt { margin:0 0 .5em; font:700 .875rem/1.4 var(--font-body); text-transform:uppercase; letter-spacing:.045em; }
.sr-package__details dd { margin:0; color:var(--sr-package-muted); font:400 clamp(1rem,1.1vw,1.25rem)/1.55 var(--font-body); }
.sr-package__details dd strong { color:var(--sr-package-ink); font-weight:700; }
.sr-foundation { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; padding:3vh var(--sr-inset); border-bottom:1px solid var(--svc-rule); }
.sr-foundation h3 { margin:0; font:700 clamp(1.2rem,1.7vw,1.9rem)/1.2 var(--font-display); text-transform:uppercase; }
.sr-foundation p { margin:0; max-width:44em; font:400 clamp(1rem,1.1vw,1.25rem)/1.55 var(--font-body); color:var(--svc-muted); }
.sr-a11y { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* HVR-20260912-37: Add-on-Band als Ledger (Eyebrow, Term-Statement, Descriptor; Zeilen mit Hairlines) */
.sr-extend { display:grid; grid-template-columns:1.2fr 1fr; gap:8%; padding:4vh var(--sr-inset) 5vh; } /* HVR-20260914-47 (Rene): keine eigene Unterlinie mehr, 45 px darunter folgte der Rahmen der Partner-Schaltflaeche (zwei Linien hintereinander) */
.sr-extend__eye { display:block; font:400 max(.875rem,.95vw)/1.5 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--svc-muted); margin-bottom:1.2em; }
.sr-extend h3 { margin:0 0 .6em; font:700 clamp(1.3rem,2vw,2.3rem)/1.1 var(--font-display); text-transform:uppercase; }
.sr-extend p { margin:0; font:400 clamp(1rem,1.35vw,1.55rem)/1.5 "HK Grotesk Wide",var(--font-body); color:var(--svc-muted); max-width:32em; }
.sr-extend__list { list-style:none; margin:calc(0.38 * max(.875rem,.95vw)) calc(-1 * var(--sr-inset)) 0 0; padding:0; } /* AD-Checkpoint 3 (D1, AP-208): erste Linie auf der Eyebrow-Versallinie */ /* Hairlines laufen bis v3, der Text bleibt im Inset */
.sr-extend__list li { display:grid; grid-template-columns:1.2em minmax(0,1fr); column-gap:.4em; padding:.9em var(--sr-inset) .9em 0; border-top:1px solid var(--svc-rule); }
.sr-extend__list li:last-child { border-bottom:1px solid var(--svc-rule); }
.sr-extend__list li .sr-package__plus { margin:0; }
.sr-extend__list b { grid-column:2; font:700 clamp(1rem,1.1vw,1.25rem)/1.5 var(--font-body); }
.sr-extend__list li>span:last-child { grid-column:2; font:400 clamp(1rem,1.1vw,1.25rem)/1.55 var(--font-body); color:var(--svc-muted); } /* Detailrolle der Paket-Leiter (dd) */
/* Both actions use the site's existing square CTA primitive. */
.sr-partner-bridge { padding-top:5vh; }
.sr-engineering { margin:0; max-width:38em; }
.sr-cta.svc-cta { padding:10vh 0; }
.sr-cta-title { margin:3vh 0 5vh; font:700 clamp(2.6rem,8.4vw,9.5rem)/.97 "Montserrat",var(--font-display); letter-spacing:-.035em; text-align:left; }
.sr-cta-bottom { display:grid; grid-template-columns:minmax(0,1fr); gap:3vh; }
.sr-cta-bottom .sr-copy { max-width:27em; }
.sr .sr-action { display:flex; align-items:center; justify-content:space-between; gap:1.4em; width:100%; min-width:0; padding:1.4em 1.6em; text-decoration:none; color:#17140f; background:var(--signal-red); border:1px solid var(--signal-red); font-family:var(--font-body); transition:background .3s,color .3s,border-color .3s; }
.sr .sr-action .sr-action-label { min-width:0; flex:0 1 auto; font-size:clamp(1rem,1.3vw,1.5rem); line-height:1.4; font-weight:700; }
.sr .sr-action .sr-action-arrow { font-size:2em; line-height:1; flex:0 0 auto; transition:transform .3s var(--sr-ease); }
.sr .sr-action small { display:block; font-size:.875rem; line-height:1.5; font-weight:400; margin-top:.35em; }
.sr .sr-action--partner { background:var(--sr-dark); color:var(--bg); border-color:var(--sr-dark); padding:clamp(1.4rem,3vw,3rem); }
.sr .sr-action--partner .sr-action-label { display:flex; flex-direction:column; gap:1.2rem; font:700 clamp(1.4rem,2.6vw,3rem)/1.15 var(--font-display); text-transform:uppercase; }
.sr .sr-action--partner small { max-width:40em; margin:0; color:rgba(255,255,255,.76); font:400 clamp(1rem,1.1vw,1.25rem)/1.55 var(--font-body); text-transform:none; }
.sr .sr-action--partner .sr-action-destination { font:700 .875rem/1.4 var(--font-body); letter-spacing:.045em; }
.sr .sr-action--partner .sr-action-arrow { color:var(--signal-red); }
.sr .sr-action--partner:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.sr .sr-action--call:hover { background:var(--bg); color:var(--fg); border-color:var(--bg); }
.sr .sr-action:hover .sr-action-arrow { transform:translate(3px,-3px); }
.sr button:focus-visible,.sr a:focus-visible { outline:2px solid var(--signal-red); outline-offset:5px; }
@media(max-width:900px) {
.sr { --sr-heading-size:clamp(1.7rem,5.3vw,3rem); }
/* HVR-20260917-T4 (Rene: "Design Sprint Bild um 90° im Uhrzeigersinn
drehen und hochkant anzeigen, trotzdem von links und rechts einblenden").
Original 2048x1318 (Querformat) bleibt die Bilddatei - nur mobil per
CSS-Transform gedreht, kein neuer Asset-Export noetig. container-type
wird von "inline-size" auf "size" erweitert (traegt jetzt auch die
Hoehe fuer cqh), der Container bekommt das SEITENVERTAUSCHTE Verhaeltnis
(1318/2048 statt 2048/1318). Das ![]()
bekommt EXPLIZITE width:100cqh/
height:100cqw (nicht auto) - nach der 90°-Drehung tauschen sich diese
beiden wieder, sodass das Bild exakt bündig im neuen Hochformat-Rahmen
liegt, ohne Verzug (100cqh:100cqw loest zum selben 2048:1318-Verhaeltnis
auf wie das Originalbild, da der Container selbst auf 1318:2048
kalibriert ist). */
/* HVR-20260918-M6 (Rene: "nutze die gesamte Bildschirmbreite fuer
Bilder, keine Raender links und rechts"): .sr-cover__image erbt sonst
.sr .svc-wrap (width:var(--sr-width)=69.4%, margin-left:var(--sr-left)
=14.16%) - dieselbe Inhaltsspalten-Konvention wie der Fliesstext der
Seite. Fuer das Titelbild jetzt Vollbreite statt Randabstand, !important
noetig (.sr .svc-wrap hat 2 Klassen = hoehere Spezifitaet). */
.sr-cover__image { container-type:size; aspect-ratio:1318/2048; width:100% !important; margin-left:0 !important; }
/* HVR-20260918-M6-Fortsetzung (Rene: "Bei 08 die Bilder von Concepts,
Renderings, Variations koennen auch auf die volle Bildschirmbreite
skaliert werden"): .sr-story-canvas ist wie .sr-cover__image ein
.svc-wrap (69.4%/14.16%-Randspalte). .sr-motion (der Desktop-Slider,
main.js media.add ab 901px) bleibt unberuehrt - <=900px nutzt ohnehin
die einfache gestapelte Darstellung, dort ohne .sr-motion-Klasse. */
.sr-story-canvas { width:100% !important; margin-left:0 !important; }
.sr .sr-cover__image>img {
position:absolute; top:50%; left:50%;
width:100cqh; height:100cqw; max-width:none;
transform:translate(-50%,-50%) rotate(90deg);
}
/* Wortmarken-Ruhelage neu kalibriert fuer das Hochformat (vorher auf die
Querformat-Hoehe/-Breite bezogen; top-% resolven gegen die jetzt viel
groessere Container-Hoehe, links/rechts gegen die jetzt schmale Breite -
beide Werte visuell neu gesetzt statt aus der alten 2048er Formel
abgeleitet, da sich die Bildkomposition durch die Drehung grundlegend
ändert). DESIGN oben im oberen Bilddrittel, SPRINT im unteren -
weiterhin klar getrennt, weiterhin von links/rechts einfliegend (JS
liest offsetLeft/offsetWidth live, keine main.js/design-sprint.js-
Aenderung noetig). */
/* HVR-20260918-M6 (Rene, EXPLIZIT ueber den vorherigen AD-Fund gestellt:
"sollte wie bei der horizontalen Desktop-Version mehr mittig eingeblendet
werden und nicht so viel Abstand zwischen den zwei Woertern haben").
top:10%/80% (voriger Fix, s. Historie oben) hielt bewusst Abstand zu
"unruhigen" Bildzonen - Renes aktuelle, explizite Anweisung verlangt
jedoch das Gegenteil: naeher zusammen, mittiger, wie Desktop (dort
30.67%/48.97% - nur 18.3 Punkte auseinander). Mobil auf denselben
Abstand gebracht (38%/52%, 14 Punkte, um die Bildmitte zentriert) -
Prioritaetsordnung CLAUDE.md #1: explizite aktuelle Anweisung schlaegt
fruehere AD-Kritik. */
.sr-cover__w--design { left:8%; top:38%; right:auto; }
.sr-cover__w--sprint { right:8%; top:52%; left:auto; }
.sr-cover__w { font-size:11vw; }
/* HVR-20260918-M-repeat (Rene: "Texte... sehr zentriert mit viel freien
Rand links und rechts, den Platz mehr nutzen"): --sr-left/--sr-width
(14.16%/69.4%) sind die Desktop-Editorialspalte; .sr .svc-wrap hat
2 Klassen und schlaegt die generische base.css-Mobilregel. Mobil auf
--content-inset umgestellt wie ueberall sonst. */
.sr .svc-wrap { width:calc(100% - 2 * var(--content-inset)); margin-left:var(--content-inset); margin-inline-start:var(--content-inset); }
.sr-brief__body,.sr-scope-intro { grid-template-columns:1fr; gap:3vh; }
.sr-brief__body { padding:0; }
.sr-open { min-height:0; margin-left:var(--content-inset); width:calc(100% - 2 * var(--content-inset)); padding-bottom:8vh; }
.sr-open .rp-open__hl br { display:block; }
.sr-packages { grid-template-columns:1fr; gap:3vh; }
.sr-package__head { min-height:0; gap:2rem; } /* HVR-20260914-46: Boxen ohne Subgrid */
.sr-package__identity { align-items:flex-start; flex-direction:column; gap:.8rem; }
.sr-package__head,.sr-package__purpose,.sr-package__details>div,.sr-package__addons { border-right:1px solid var(--sr-package-line); }
.sr-extend { grid-template-columns:1fr; gap:3vh; }
.sr-package__price b { font-size:clamp(1.8rem,4.2vw,3rem); }
.sr-foundation { grid-template-columns:1fr; gap:1rem; }
.sr-foundation p { grid-column:auto; padding:0; }
.sr-partner-bridge,.sr-cta-bottom { grid-template-columns:1fr; gap:3vh; }
}
@media(max-width:600px) {
.sr .svc-section { padding:7vh 0; }
.sr .sr-cover { padding-top:3vh; padding-bottom:5vh; }
.sr .sr-story { padding-top:0; }
.sr-statement { font-size:clamp(1.5rem,6.5vw,2.2rem); }
.sr-requirements>div { grid-template-columns:1fr; gap:.35em; }
/* HVR-20260917-T4 (Rene: "zu viel Content untereinander, kann auch 2
nebeneinander und mehrere untereinander sein"): die vier Deliverables
(Concepts/CMF/Selection-white/Selection-staged) waren komplett
einspaltig gestapelt (4 Zeilen) - jetzt 2x2 statt 1x4, reduziert die
Scrollstrecke. Border-Logik der Basisregel (>div{border-top},
>div+div{border-left}) passte nur fuer eine einzelne Spalte/Zeile -
hier neu: border-top bleibt (trennt beide Zeilen), border-left nur
auf der jeweils RECHTEN Spalte (nth-child gerade), nicht mehr per
Adjacent-Sibling (das haette Item 3, erste Spalte der 2. Zeile,
faelschlich auch einen linken Rahmen gegeben). */
/* HVR-20260917-T4-v2 (AD-Fund, CRITICAL): der 2x2-Split allein liess bei
375px nur 130px Spaltenbreite (aus der Standard-69.4%-Inhaltsspalte
dieser Seite) - minus beidseitigem Inset blieben ~89px Textbreite,
Fliesstext brach in bis zu 12 Zeilen, eine Headline in 4 Zeilen
(Ein-Wort-pro-Zeile). Fix in drei Teilen: (1) .sr-delivery-summary
bricht mobil aus der schmalen 69.4%-Standardspalte aus und nutzt fast
die volle Breite (--content-inset-aehnliches Randmass), (2) eigenes,
kleineres Zellen-Padding statt des globalen --sr-inset, (3) der
Fliesstext () entfaellt in der kompakten 2x2-Ansicht - Eyebrow-
Nummer und Headline bleiben, das ist die eigentliche Information
dieses Rasters; die volle Beschreibung steht bereits als Copy im
Brief-Abschnitt darueber. */
.sr-delivery-summary { width:calc(100% - 2 * 1.1rem) !important; margin-left:1.1rem !important; }
.sr-deliverables { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sr-deliverables>div { padding:2.4vh 0.7rem; border-left:0; }
.sr-deliverables>div:nth-child(even) { border-left:1px solid var(--svc-rule); }
.sr-deliverables h3 { font-size:clamp(1.05rem,4.8vw,1.4rem); }
.sr-deliverables p { display:none; }
.sr-scope { --sr-inset:1.1rem; }
.sr-package__head { flex-direction:column; align-items:flex-start; }
.sr-package__size { font-size:3.5rem; }
.sr-package h3 { font-size:1.2rem; }
.sr-package__price b { font-size:1.8rem; }
.sr-package__details>div { grid-template-columns:1fr; gap:.6rem; }
.sr-extend h3 { font-size:1.25rem; }
.sr-cta-title { font-size:clamp(2rem,8.7vw,3.2rem); line-height:1.02; }
.sr .sr-action { padding:1.2em; }
.sr .sr-action--partner { flex-wrap:wrap; }
.sr .sr-action--partner .sr-action-label { font-size:clamp(1rem,4.4vw,1.4rem); hyphens:auto; overflow-wrap:break-word; }
.sr .sr-action--partner .sr-action-arrow { margin-left:auto; }
}
/* HVR-20260918-lines-mobile (Rene: alle horizontalen Linien mobil entfernen) */
@media (max-width: 900px) {
.sr-frame::before, .sr-frame::after, .sr-cover::before
{ display: none !important; }
.sr-heading-row,
.sr-requirements > div,
.sr-deliverables, .sr-deliverables > div,
.sr-package__purpose, .sr-package__more, .sr-package__more[open] summary,
.sr-package__details > div + div, .sr-package__addons,
.sr-foundation,
.sr-extend__list li, .sr-extend__list li:last-child
{ border-top: 0 !important; border-bottom: 0 !important; }
}
@media(prefers-reduced-motion:reduce) { .sr .sr-action,.sr .sr-action-arrow { transition:none; } }