/* ==========================================================================
   Hey Rasterei — Leistungs-Detailseiten (leistungen/*.html)
   Baut auf home.css auf (Raster, Frames, Header, Farben, Buttons).
   Gleiche Zellen-Logik: --x / --y / --w in Zellen, 1 Zelle = 1/16 Breite.
   Größen: Hero-Headline 1.9 = der eine laute Moment · Section-Headlines 0.85 · Rest ruhig.
   Bereichsfarben: 01 Orange · 02 Blau · 03 Schwarz · 04 Orange · 05 Blau
   ========================================================================== */

/* Farb-Themen für Flächen (plane) und Heroes */
.pl-orange { --pc: var(--orange); --acc: var(--ink); color: var(--ink); }
.pl-blue   { --pc: var(--blue);   --acc: var(--orange-b); color: var(--cream); }
.pl-ink    { --pc: var(--ink);    --acc: var(--orange); color: var(--cream); }
.f > .plane.pl-fill { background: var(--pc); }
.pl-blue .btn, .pl-blue .btn-o { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.pl-blue .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 4px 4px 0 var(--cream); }
.pl-ink .btn { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.pl-ink .btn:hover { background: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 var(--orange); }

.sv-ask { font-size: 12px; font-weight: 700; color: inherit; text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size .3s; }
.sv-ask:hover { background-size: 0 2px; }
.sv-ask::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: .35em; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--star-icon) center / contain no-repeat; mask: var(--star-icon) center / contain no-repeat; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.sv-ask:hover::after { transform: rotate(180deg); }
.chip { font-size: 11px; font-weight: 700; padding: 5px 9px; border: 1.5px solid currentColor; transition: background .2s, color .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.chip:hover { transform: translateY(-2px) rotate(-2deg); background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pl-blue .chip:hover, .pl-ink .chip:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.lead2 { font-size: 20px; line-height: 1.45; z-index: 1; }

/* ---------------- Visuals (Plakat-Kompositionen, driften mit dem Zeiger) ---------------- */
/* Visuals: kleine Plakat-Kompositionen, driften sanft mit dem Zeiger */
.sv-vis { --x: var(--vx); --y: 1.2; --w: 5.6; height: calc(var(--cell) * 5.4); z-index: 2; }
.sv-vis > * { position: absolute; display: block; translate: calc(var(--nx, 0) * var(--d, 1) * 12px) calc(var(--ny, 0) * var(--d, 1) * 12px); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
.sv-stamp { z-index: 2; padding: 6px 11px; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--cream); white-space: nowrap; --d: 1.6; }
.sv-ast { font-style: normal; font-family: var(--font-mono); line-height: 1; color: var(--orange); --d: 2; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.sv-vis:hover .sv-ast { transform: rotate(120deg); }

/* 01 — zwei Flyer, wie hingeworfen */
.vis-1 .sh { width: calc(var(--cell) * 2.5); height: calc(var(--cell) * 3.6); border: 2px solid var(--ink); }
.vis-1 .sh-a { left: calc(var(--cell) * 2.5); top: calc(var(--cell) * .55); background: var(--cream); transform: rotate(7deg); --d: .8; }
.vis-1 .sh-b { left: calc(var(--cell) * .55); top: calc(var(--cell) * 1.15); background: var(--orange); transform: rotate(-6deg); --d: 1.3; }
.vis-1 .sh-b i { position: absolute; left: calc(var(--cell) * .3); height: calc(var(--cell) * .16); background: var(--cream); width: calc(var(--cell) * 1.6); }
.vis-1 .sh-b i:nth-child(1) { top: calc(var(--cell) * .35); width: calc(var(--cell) * 1.9); height: calc(var(--cell) * .3); }
.vis-1 .sh-b i:nth-child(2) { top: calc(var(--cell) * .95); }
.vis-1 .sh-b i:nth-child(3) { top: calc(var(--cell) * 1.3); width: calc(var(--cell) * 1.1); }
.vis-1 .sv-stamp { left: calc(var(--cell) * 3.7); top: calc(var(--cell) * 4.2); background: var(--blue); transform: rotate(-4deg); }
.vis-1 .sv-ast { left: calc(var(--cell) * 4.5); top: calc(var(--cell) * .1); font-size: calc(var(--cell) * 1.5); }
.vis-1:hover .sh-a { transform: rotate(13deg) translate(14px, -8px); }
.vis-1:hover .sh-b { transform: rotate(-12deg) translate(-12px, 6px); }

/* 02 — Logo, Schrift, Farben */
.vis-2 .badge-logo { left: calc(var(--cell) * .3); top: calc(var(--cell) * .7); width: calc(var(--cell) * 2.4); aspect-ratio: 1; border-radius: 50%; background: var(--cream); display: grid; place-items: center; --d: 1.2; }
.vis-2 .badge-logo .ast { font-size: calc(var(--cell) * 1.9); line-height: 1; color: var(--ink); margin-top: .18em; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.vis-2:hover .badge-logo .ast { transform: rotate(180deg); }
.vis-2 .aa { left: calc(var(--cell) * 3); top: calc(var(--cell) * .1); font-size: calc(var(--cell) * 2.3); line-height: 1; color: var(--cream); --d: .7; }
.vis-2 .sw { width: calc(var(--cell) * 1.3); height: calc(var(--cell) * 1.3); top: calc(var(--cell) * 3.5); --d: 1.4; }
.vis-2 .sw-1 { left: calc(var(--cell) * .4); background: var(--orange); }
.vis-2 .sw-2 { left: calc(var(--cell) * 1.6); background: var(--cream); top: calc(var(--cell) * 3.7); }
.vis-2 .sw-3 { left: calc(var(--cell) * 2.8); background: var(--ink); }
.vis-2:hover .sw-1 { transform: translateX(-10px) rotate(-6deg); }
.vis-2:hover .sw-3 { transform: translateX(14px) rotate(6deg); }
.vis-2 .sv-stamp { left: calc(var(--cell) * 4.2); top: calc(var(--cell) * 4.3); background: var(--ink); transform: rotate(-3deg); }

/* 03 — Browserfenster mit Cursor */
.vis-3 .win { left: calc(var(--cell) * .3); top: calc(var(--cell) * .8); width: calc(var(--cell) * 4.9); height: calc(var(--cell) * 3.7); background: var(--cream); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-2deg); display: flex; flex-direction: column; gap: calc(var(--cell) * .2); padding: 0 calc(var(--cell) * .3) calc(var(--cell) * .3); --d: .7; }
.vis-3 .win-bar { position: static; display: flex; align-items: center; gap: 5px; height: calc(var(--cell) * .55); margin: 0 calc(var(--cell) * -.3); padding: 0 calc(var(--cell) * .3); border-bottom: 2px solid var(--ink); translate: none; }
.vis-3 .win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.vis-3 .win-bar i:nth-child(1) { background: var(--orange); }
.vis-3 .win-bar i:nth-child(2) { background: var(--blue); }
.vis-3 .win-bar b { margin-left: 8px; font-size: 10px; letter-spacing: .04em; opacity: .7; }
.vis-3 .win > span { position: static; translate: none; }
.vis-3 .win-hero { height: calc(var(--cell) * 1.3); background: var(--orange); border: 2px solid var(--ink); transition: background .25s; }
.vis-3:hover .win-hero { background: var(--blue); }
.vis-3 .win-line { height: calc(var(--cell) * .14); background: var(--ink); width: 82%; }
.vis-3 .win-line--s { width: 54%; }
.vis-3 .win-btn { width: calc(var(--cell) * 1.3); height: calc(var(--cell) * .38); background: var(--ink); transition: width .3s cubic-bezier(.3, 1.6, .5, 1); }
.vis-3:hover .win-btn { width: calc(var(--cell) * 1.9); }
.vis-3 .cursor { left: calc(var(--cell) * 3.9); top: calc(var(--cell) * 3.3); z-index: 3; --d: 3; width: calc(var(--cell) * .5); height: auto; filter: drop-shadow(3px 3px 0 var(--ink)); }
.vis-3 .sv-ast { left: calc(var(--cell) * 4.7); top: calc(var(--cell) * .1); font-size: calc(var(--cell) * 1.3); color: var(--blue); }

/* 04 — Wimpelkette, Ticket, Programm */
.vis-4 .garland { left: 0; top: calc(var(--cell) * .3); width: calc(var(--cell) * 5.4); height: calc(var(--cell) * 1.3); border-top: 2px solid var(--ink); transform: rotate(-3deg); transform-origin: 0 0; display: flex; justify-content: space-between; padding: 0 calc(var(--cell) * .25); --d: .6; }
.vis-4 .garland i { position: static; translate: none; display: block; width: calc(var(--cell) * .6); height: calc(var(--cell) * .85); clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--cream); transform-origin: 50% 0; animation: sway 3.6s ease-in-out infinite; }
.vis-4 .garland i:nth-child(3n+2) { background: var(--ink); animation-delay: -.6s; }
.vis-4 .garland i:nth-child(3n) { background: var(--blue); animation-delay: -1.4s; }
.vis-4 .garland i:nth-child(4n) { animation-delay: -2.2s; }
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.vis-4:hover .garland i { animation-duration: 1.4s; }
.vis-4 .ticket { left: calc(var(--cell) * .3); top: calc(var(--cell) * 2.2); width: calc(var(--cell) * 3.4); height: calc(var(--cell) * 1.7); background: var(--cream); border: 2px solid var(--ink); transform: rotate(-5deg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; --d: 1.2; }
.vis-4 .ticket::before, .vis-4 .ticket::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); }
.vis-4 .ticket::before { left: -10px; }
.vis-4 .ticket::after { right: -10px; }
.vis-4 .ticket b { font-size: calc(var(--cell) * .3); letter-spacing: .12em; }
.vis-4 .ticket em { font-style: normal; font-size: 11px; letter-spacing: .1em; }
.vis-4 .prog { left: calc(var(--cell) * 3.4); top: calc(var(--cell) * 2.6); width: calc(var(--cell) * 2); height: calc(var(--cell) * 2.6); background: var(--ink); transform: rotate(6deg); padding: calc(var(--cell) * .3) calc(var(--cell) * .25); --d: 1.6; }
.vis-4 .prog i { position: static; translate: none; display: block; height: calc(var(--cell) * .13); background: var(--cream); margin-bottom: calc(var(--cell) * .22); width: 100%; }
.vis-4 .prog i:nth-child(2) { width: 70%; }
.vis-4 .prog i:nth-child(3) { width: 45%; background: var(--orange); }
.vis-4:hover .ticket { transform: rotate(-9deg) translate(-8px, 4px); }
.vis-4:hover .prog { transform: rotate(11deg) translate(10px, -6px); }

/* 05 — offen, gestrichelt, mit der Ente */
.vis-5 .open-box { left: calc(var(--cell) * .6); top: calc(var(--cell) * .4); width: calc(var(--cell) * 4.6); height: calc(var(--cell) * 4.3); border: 3px dashed var(--blue); display: grid; place-items: center; --d: .6; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), border-color .2s; }
.vis-5 .q { position: static; translate: none; font-size: calc(var(--cell) * 3.2); line-height: 1; color: var(--blue); margin-top: -.08em; margin-right: calc(var(--cell) * .6); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.vis-5:hover .open-box { transform: rotate(-1.5deg); border-color: var(--orange); }
.vis-5:hover .q { transform: rotate(12deg) scale(1.08); color: var(--orange); }
.vis-5 .sv-stamp { left: calc(var(--cell) * .1); top: calc(var(--cell) * 4.7); background: var(--orange); color: var(--ink); transform: rotate(-5deg); }
.sv-duck { --x: 11.5; --y: 4.15; --w: 3.6; z-index: 3; }


/* ==========================================================================
   HERO
   ========================================================================== */
.f-lh { --rows: 9; z-index: 6; --gl: rgba(223, 116, 62, .36); --acc: var(--orange-l); }
.f-lh .g { --mask: radial-gradient(ellipse 45% 55% at 20% 40%, #000 0, transparent 100%), radial-gradient(ellipse 40% 60% at 85% 50%, #000 0, transparent 100%); }
.lh-blue { background: var(--blue); color: var(--cream); --gl: rgba(246, 241, 230, .2); --gl-hi: rgba(246, 241, 230, .85); overflow: clip; --acc: var(--orange-b); }
.lh-orange { background: var(--orange); color: var(--ink); --gl: rgba(246, 241, 230, .24); --gl-hi: rgba(246, 241, 230, .9); overflow: clip; --acc: var(--ink); }
.lh-orange .lh-h1 { color: #FEFDFB; }
.lp-03 .f-lh, .lp-05 .f-lh { --acc: var(--blue); }
.lh-blue .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.lh-blue .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 4px 4px 0 var(--cream); }
.hdr-blue .hdr:not(.solid) { --star: var(--orange); }

.lh-back { --x: 1; --y: 1.4; width: auto !important; display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; z-index: 2; }
.lh-back a { text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.lh-back a:hover { background-size: 100% 2px; }
.lh-back a i { font-style: normal; display: inline-block; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); margin-right: 4px; }
.lh-back a:hover i { transform: translateX(-5px); }
.lh-back span { opacity: .9; }
.lh-h1 { --x: 1; --y: 2.25; width: auto !important; font-size: calc(var(--cell) * 1.9); line-height: .95; white-space: nowrap; z-index: 1; }
.lh-h1 span { display: block; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.lh-h1 .o { color: var(--acc); }
.lh-h1:hover span:first-child { transform: translateX(6px); }
.lh-h1:hover .o { transform: translateX(14px); }
.lh-lead { --x: 1; --y: 6.1; --w: 6.2; font-size: 18px; line-height: 1.5; z-index: 1; }
.lh-cta { --x: 1; --y: 7.6; width: auto !important; display: flex; align-items: center; gap: 22px; z-index: 1; }
.lh-vis { --vx: 9.4; --y: 1.9; }
.lh-duck { --x: 12.6; --w: 3.2; z-index: 3; }
.f.f-lh > .lh-duck { top: auto; bottom: -1px; }

/* ==========================================================================
   FÜR WEN — leise
   ========================================================================== */
.f-who { --rows: 6.9; z-index: 4; }
.f-who .g { --mask: radial-gradient(ellipse 35% 45% at 12% 70%, #000 0, transparent 100%), radial-gradient(ellipse 30% 40% at 90% 30%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.f-who .tag, .lp-tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.who-h { --x: 1; --y: 2.1; font-size: calc(var(--cell) * .85); }
.who-pass { --x: 1; --y: 3.6; --w: 4.8; z-index: 1; }
.lbl { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 8px; display: block; }
.st-list { display: flex; flex-direction: column; }
.st-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid rgba(28, 26, 23, .3); font-size: 15px; line-height: 1.4; transition: padding .25s; }
.st-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 13px; height: 13px; background-color: var(--orange); -webkit-mask: var(--star-icon) center / contain no-repeat; mask: var(--star-icon) center / contain no-repeat; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.st-list li:hover { padding-left: 28px; }
.st-list li:hover::before { transform: rotate(180deg); }
.st-list li:last-child { border-bottom: 1px solid rgba(28, 26, 23, .3); }
.who-text { --x: 7; --y: 1.5; --w: 7.6; }
.who-need { --x: 7; --y: 4.15; --w: 7.6; z-index: 1; }
.who-need .st-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.who-need .st-list li { border-bottom: 0; }

/* ==========================================================================
   DAZU — je Leistung eine eigene Form
   ========================================================================== */
.f-dazu { z-index: 4; }
.dz-h { --x: 1; --y: 1.9; font-size: calc(var(--cell) * .85); }
.dz-sub { --x: 1; --y: 3.05; --w: 4.6; z-index: 1; font-size: 16px; }

/* 01 — Liste wie die Kartenrückseite */
.lp-01 .f-dazu { --rows: 7.8; }
.lp-01 .f-dazu .g { --mask: radial-gradient(ellipse 35% 50% at 85% 30%, #000 0, transparent 100%); }
.lp-01 .dz-fmt { --x: 1; --y: 5; --w: 4.8; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.lp-01 .menu-list { --y: 1.5; }
.lp-01 .menu-list a { grid-template-columns: calc(var(--cell) * .6) calc(var(--cell) * 2.6) 1fr auto; }

/* 02 — fünf Bausteine als Spalten */
.lp-02 .f-dazu { --rows: 8.4; }
.lp-02 .f-dazu .g { --mask: radial-gradient(ellipse 40% 50% at 15% 60%, #000 0, transparent 100%), radial-gradient(ellipse 35% 45% at 90% 55%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.pts { position: absolute; left: 0; top: 0; width: 100% !important; height: 100%; z-index: 1; }
.pt { position: absolute; top: calc(var(--cell) * 3.75); left: calc(var(--cell) * (1 + var(--i) * 2.85)); width: calc(var(--cell) * 2.6); border-top: 3px solid var(--ink); padding-top: 12px; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.pt:hover { transform: translateY(-8px); }
.pt .n { font-size: 12px; font-weight: 700; color: var(--orange-t); }
.pt-shape { display: block; position: relative; height: calc(var(--cell) * 1.5); margin: 8px 0 10px; }
.pt-shape > * { position: absolute; display: block; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.pt b { display: block; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .58); line-height: 1; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.pt p { font-size: 14px; line-height: 1.4; }
.s-logo i { left: 0; top: 0; width: calc(var(--cell) * 1.4); aspect-ratio: 1; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); display: grid; place-items: center; color: var(--ink); font-size: 1px; -webkit-text-fill-color: transparent; }
.s-logo i::before { content: ""; width: 46%; height: 46%; background-color: currentColor; -webkit-mask: var(--star-icon) center / contain no-repeat; mask: var(--star-icon) center / contain no-repeat; }
.s-logo em { left: calc(var(--cell) * 1.1); top: calc(var(--cell) * .2); width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.2); border: 2px dashed var(--ink); border-radius: 50%; }
.pt:hover .s-logo i { transform: rotate(180deg); }
.s-col i { width: calc(var(--cell) * .95); height: calc(var(--cell) * 1.3); border: 2px solid var(--ink); top: 0; }
.s-col i:nth-child(1) { left: 0; background: var(--orange); }
.s-col i:nth-child(2) { left: calc(var(--cell) * .7); background: var(--blue); }
.s-col i:nth-child(3) { left: calc(var(--cell) * 1.4); background: var(--ink); }
.pt:hover .s-col i:nth-child(1) { transform: translateX(-6px) rotate(-6deg); }
.pt:hover .s-col i:nth-child(3) { transform: translateX(8px) rotate(6deg); }
.s-type i { left: 0; top: calc(var(--cell) * -.15); font-style: normal; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * 1.7); line-height: 1; }
.s-type em { left: calc(var(--cell) * 1.4); top: calc(var(--cell) * .5); font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.pt:hover .s-type i { transform: skewX(-8deg) scale(1.06); }
.s-card i { left: 0; top: calc(var(--cell) * .2); width: calc(var(--cell) * 1.7); height: calc(var(--cell) * 1); background: var(--cream); border: 2px solid var(--ink); transform: rotate(-4deg); }
.s-card em { left: calc(var(--cell) * .6); top: calc(var(--cell) * .55); width: calc(var(--cell) * 1.7); height: calc(var(--cell) * 1); background: var(--orange); border: 2px solid var(--ink); transform: rotate(5deg); }
.pt:hover .s-card i { transform: rotate(-9deg) translate(-4px, -4px); }
.pt:hover .s-card em { transform: rotate(10deg) translate(6px, 4px); }
.s-base i { left: calc(var(--cell) * .2); top: 0; width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.5); background: var(--cream); border: 2px solid var(--ink); border-left: 8px solid var(--blue); }
.s-base em { left: calc(var(--cell) * .55); top: calc(var(--cell) * .35); width: calc(var(--cell) * .65); height: 2px; background: var(--ink); box-shadow: 0 8px 0 var(--ink), 0 16px 0 var(--ink); }
.pt:hover .s-base i { transform: rotate(-6deg) translateY(-4px); }

/* 03 — Tabs: Bereiche zum Durchklicken */
.lp-03 .f-dazu { --rows: 8.4; }
.lp-03 .f-dazu .g { --mask: radial-gradient(ellipse 35% 50% at 10% 75%, #000 0, transparent 100%), radial-gradient(ellipse 30% 40% at 95% 20%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.tab-list { --x: 1; --y: 4.2; --w: 4.6; z-index: 1; border-top: 2px solid var(--ink); }
.tab-list button { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; width: 100%; padding: 14px 8px; background: none; border: 0; border-bottom: 1px solid rgba(28, 26, 23, .35); cursor: pointer; text-align: left; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-mono); transition: color .2s, padding .25s; }
.tab-list button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.3, 0, .2, 1); }
.tab-list .n { font-size: 12px; color: var(--orange-t); transition: color .2s; }
.tab-list .ast { color: var(--orange); font-size: 18px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), color .2s; }
.tab-list button:hover { padding-left: 14px; }
.tab-list button[aria-selected="true"] { color: var(--cream); padding-left: 14px; }
.tab-list button[aria-selected="true"]::before { transform: scaleX(1); }
.tab-list button[aria-selected="true"] .n, .tab-list button[aria-selected="true"] .ast { color: var(--cream); }
.tab-list button[aria-selected="true"] .ast { transform: rotate(180deg); }
.tab-panels { --x: 6.5; --y: 1.5; --w: 8.5; z-index: 1; height: calc(var(--cell) * 5.9); border: 2px solid var(--ink); background: rgba(246, 241, 230, .9); box-shadow: 8px 8px 0 var(--ink); }
.tab-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr calc(var(--cell) * 3); gap: calc(var(--cell) * .3); padding: calc(var(--cell) * .4); animation: panelIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.tab-panel h3 { margin: 6px 0 12px; font-size: calc(var(--cell) * .95); line-height: .95; }
.tab-panel p { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.tab-panel .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vp { position: relative; align-self: center; height: calc(var(--cell) * 4.2); }
.vp > * { position: absolute; display: block; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.vp-web .w { left: 0; top: calc(var(--cell) * .3); width: calc(var(--cell) * 2.9); height: calc(var(--cell) * 3.2); border: 2px solid var(--ink); background: var(--cream); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); }
.vp-web .w::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cell) * .4); border-bottom: 2px solid var(--ink); background: linear-gradient(90deg, var(--orange) 0 14%, transparent 14%); }
.vp-web .w::after { content: ""; position: absolute; left: 10%; right: 10%; top: calc(var(--cell) * .7); height: calc(var(--cell) * 1.2); background: var(--orange); border: 2px solid var(--ink); }
.vp-web .b { left: calc(var(--cell) * .3); top: calc(var(--cell) * 2.6); width: calc(var(--cell) * 1.6); height: calc(var(--cell) * .16); background: var(--ink); box-shadow: 0 12px 0 var(--ink); }
.vp-soc .c { left: 0; top: 0; width: calc(var(--cell) * .9); aspect-ratio: 1; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); }
.vp-soc .gr { left: 0; top: calc(var(--cell) * 1.1); width: calc(var(--cell) * 2.8); height: calc(var(--cell) * 2.8); display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.vp-soc .gr i { border: 2px solid var(--ink); background: var(--cream); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), background .2s; }
.vp-soc .gr i:nth-child(3n+1) { background: var(--orange); } .vp-soc .gr i:nth-child(4) { background: var(--blue); } .vp-soc .gr i:nth-child(6) { background: var(--ink); }
.tab-panel:hover .vp-soc .gr i:nth-child(odd) { transform: rotate(-4deg) scale(.94); }
.tab-panel:hover .vp-soc .gr i:nth-child(even) { transform: rotate(4deg) scale(.94); }
.vp-story .s1, .vp-story .s2 { width: calc(var(--cell) * 1.7); height: calc(var(--cell) * 3.2); border: 2px solid var(--ink); }
.vp-story .s1 { left: 0; top: calc(var(--cell) * .5); background: var(--blue); transform: rotate(-5deg); box-shadow: inset 0 0 0 6px var(--cream); }
.vp-story .s2 { left: calc(var(--cell) * 1.2); top: calc(var(--cell) * .3); background: var(--orange); transform: rotate(4deg); }
.vp-story .s2::after { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 4px; background: var(--ink); }
.tab-panel:hover .vp-story .s1 { transform: rotate(-9deg) translateX(-6px); }
.tab-panel:hover .vp-story .s2 { transform: rotate(9deg) translateX(6px); }
.vp-post .p1, .vp-post .p2 { width: calc(var(--cell) * 2.2); aspect-ratio: 1; border: 2px solid var(--ink); }
.vp-post .p1 { left: 0; top: calc(var(--cell) * 1.4); background: var(--cream); transform: rotate(-4deg); }
.vp-post .p2 { left: calc(var(--cell) * .7); top: calc(var(--cell) * .3); background: var(--orange); transform: rotate(5deg); display: grid; place-items: center; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * 1); }
.tab-panel:hover .vp-post .p2 { transform: rotate(11deg) translate(6px, -4px); }
.vp-tpl .t { left: 0; top: calc(var(--cell) * .3); width: calc(var(--cell) * 2.6); height: calc(var(--cell) * 3.4); border: 2px solid var(--ink); background: var(--cream); padding: calc(var(--cell) * .25); display: flex; flex-direction: column; gap: calc(var(--cell) * .2); transform: rotate(-2deg); }
.vp-tpl .t i { display: block; border: 2px dashed var(--blue); flex: 1; transition: background .2s; }
.vp-tpl .t i:first-child { flex: 0 0 34%; }
.vp-tpl .t i:last-child { flex: 0 0 18%; }
.tab-panel:hover .vp-tpl .t i { background: rgba(53, 86, 206, .12); }

/* Layer: hält absolut platzierte Elemente eines Frames zusammen */
.lay { position: absolute; left: 0; top: 0; width: 100% !important; height: 100%; z-index: 1; }

/* 04 — Event-Zeitleiste */
.lp-04 .f-dazu { --rows: 8.4; }
.lp-04 .dz-sub { --w: 9; }
.lp-04 .f-dazu .g { --mask: radial-gradient(ellipse 45% 40% at 30% 55%, #000 0, transparent 100%), radial-gradient(ellipse 30% 35% at 90% 65%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.tl-grp { top: calc(var(--cell) * 4); position: absolute; font-size: 12px; font-weight: 700; z-index: 1; padding-bottom: 8px; border-bottom: 2px solid var(--ink); color: var(--blue); }
.tl-grp.g1 { left: calc(var(--cell) * 1); width: calc(var(--cell) * 5.4); }
.tl-grp.g2 { left: calc(var(--cell) * 6.6); width: calc(var(--cell) * 8.2); }
.tl-line { position: absolute; left: calc(var(--cell) * 1); width: calc(var(--cell) * 13.8); top: calc(var(--cell) * 4.8); border-top: 3px solid var(--ink); z-index: 1; }
.tl-stop { position: absolute; top: calc(var(--cell) * 4.55); left: calc(var(--cell) * (1 + var(--i) * 2.8)); width: calc(var(--cell) * 2.6); z-index: 2; }
.tl-node { display: grid; place-items: center; width: calc(var(--cell) * .55); aspect-ratio: 1; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); font-size: 11px; font-weight: 700; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
.tl-card { margin-top: calc(var(--cell) * .55); padding: calc(var(--cell) * .2) 0 0; border-top: 0; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.tl-card b { display: block; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .54); line-height: 1; margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
.tl-card p { font-size: 14px; line-height: 1.45; }
.tl-stop:hover .tl-node { transform: scale(1.35) rotate(90deg); background: var(--orange); }
.tl-stop:hover .tl-card { transform: translateY(-6px); }

/* 05 — offene Beispiel-Zettel, bewusst nicht ausgerichtet */
.lp-05 .f-dazu { --rows: 9.4; }
.lp-05 .f-dazu .g { --mask: radial-gradient(ellipse 45% 45% at 50% 60%, #000 0, transparent 100%); }
.cd { position: absolute; z-index: 1; left: calc(var(--cell) * var(--cx)); top: calc(var(--cell) * var(--cy)); width: calc(var(--cell) * var(--cw)); padding: calc(var(--cell) * .22) calc(var(--cell) * .25) calc(var(--cell) * .28); background: rgba(246, 241, 230, .92); border: 2.5px dashed var(--blue); transform: rotate(var(--r)); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), background .25s, color .25s, border-color .25s; translate: calc(var(--nx, 0) * var(--d, 1) * 8px) calc(var(--ny, 0) * var(--d, 1) * 8px); }
.cd .n { font-size: 12px; font-weight: 700; color: var(--orange-t); transition: color .25s; }
.cd b { display: block; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .68); line-height: 1; margin: 6px 0 8px; text-transform: none; letter-spacing: 0; }
.cd p { font-size: 14px; line-height: 1.45; }
.cd:hover { transform: rotate(0) scale(1.03); background: var(--blue); color: var(--cream); border: 2.5px solid var(--ink); border-style: solid; }
.cd:hover .n { color: var(--cream); }
.cd-1 { --cx: 1; --cy: 4.1; --cw: 4.4; --r: -2deg; --d: 1; }
.cd-2 { --cx: 6.1; --cy: 2.5; --cw: 4.4; --r: 1.5deg; --d: 1.6; }
.cd-3 { --cx: 10.7; --cy: 3.6; --cw: 4.4; --r: -1.2deg; --d: .8; }
.cd-4 { --cx: 3; --cy: 6.5; --cw: 4.7; --r: 1.2deg; --d: 1.3; }
.cd-5 { --cx: 8.4; --cy: 6.2; --cw: 4.7; --r: -1.6deg; --d: 1.8; }
.cd-q { position: absolute; left: calc(var(--cell) * 13.2); top: calc(var(--cell) * 7); z-index: 2; padding: 7px 12px; font-size: 12px; font-weight: 700; background: var(--orange); color: var(--ink); transform: rotate(-6deg); white-space: nowrap; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cd-q:hover { transform: rotate(3deg) scale(1.08); }

/* ==========================================================================
   DELIVERABLES + ABLAUF  — Farbfläche, zwei Spalten
   ========================================================================== */
.f-flow { --rows: 7.8; z-index: 4; }
.f-flow .plane { --x: 1; --y: .6; --w: 14; --h: 6.6; z-index: 0; }
.f-flow .plane .g, .f-cta2 .plane .g { --gl: rgba(246, 241, 230, .2); --gl-hi: rgba(246, 241, 230, .85); --mask: radial-gradient(ellipse 45% 70% at 25% 60%, #000 0, transparent 100%), radial-gradient(ellipse 30% 55% at 92% 25%, rgba(0, 0, 0, .6) 0, transparent 100%); }
.f-flow .plane .g::before, .f-flow .plane .g::after { background-position: calc(var(--cell) * -1) calc(var(--cell) * -.6); }
.pl-orange .g { --gl: rgba(246, 241, 230, .3) !important; }
.fl-h { width: auto !important; font-size: calc(var(--cell) * .85); line-height: .95; white-space: nowrap; z-index: 1; }
.fl-note { font-size: 12px; font-weight: 400; letter-spacing: .04em; opacity: .75; margin-left: 6px; vertical-align: middle; }
.fl-d-h { --x: 2; --y: 1.6; }
.fl-d { --x: 2; --y: 2.85; --w: 5.8; z-index: 1; }
.fl-d li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid currentColor; border-top-color: rgba(246, 241, 230, .28); font-size: 15px; line-height: 1.4; transition: padding .25s; }
.pl-orange .fl-d li, .pl-orange .fl-s li { border-top-color: rgba(28, 26, 23, .35); }
.fl-d li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 13px; height: 13px; background-color: var(--acc); -webkit-mask: var(--star-icon) center / contain no-repeat; mask: var(--star-icon) center / contain no-repeat; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.fl-d li:hover { padding-left: 30px; }
.fl-d li:hover::before { transform: rotate(180deg); }
.fl-s-h { --x: 8.7; --y: 1.6; }
.fl-s { --x: 8.7; --y: 2.85; --w: 5.6; z-index: 1; counter-reset: st; }
.fl-s li { display: grid; grid-template-columns: calc(var(--cell) * .95) 1fr; align-items: baseline; padding: 9px 0 10px; border-top: 1px solid rgba(246, 241, 230, .28); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.fl-s li:hover { transform: translateX(6px); }
.fl-s .pn { font-size: calc(var(--cell) * .68); line-height: 1; color: var(--acc); }
.fl-s b { display: block; font-size: 13px; letter-spacing: .04em; margin-bottom: 2px; }
.fl-s span:last-child { font-size: 14px; line-height: 1.4; }

/* ==========================================================================
   PORTFOLIO-BEISPIELE — echte Cases zur Leistung
   ========================================================================== */
.f-pref { --rows: 10.8; z-index: 4; }
.f-pref .g { --mask: radial-gradient(ellipse 40% 50% at 14% 66%, #000 0, transparent 100%), radial-gradient(ellipse 32% 45% at 90% 30%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.pref-h { --x: 1; --y: 1.9; --w: 8; font-size: calc(var(--cell) * .85); line-height: .95; }
.pref-sub { --x: 1; --y: 4.05; --w: 4.6; z-index: 1; font-size: 16px; }
.pref-list { --x: 1; --y: 5.35; --w: 14; z-index: 1; display: flex; gap: calc(var(--cell) * .6); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pref-list li { flex: 1 1 calc(var(--cell) * 3.6); min-width: calc(var(--cell) * 3.2); max-width: calc(var(--cell) * 4.6); }
.pref-list a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.pref-shot { display: block; overflow: hidden; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 4 / 3; background: var(--cream); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pref-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.pref-list a:hover .pref-shot { transform: translate(-2px, -4px); }
.pref-list a:hover .pref-shot img { transform: scale(1.05); }
.pref-name { display: block; margin-top: 14px; font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: 21px; line-height: 1; letter-spacing: 0; text-transform: none; }
.pref-name b { color: var(--orange-l); font-weight: inherit; }
.pref-note { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: rgba(28, 26, 23, .75); flex: 1; }
.pref-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.pref-list a:hover .pref-go { transform: translateX(4px); }
.pref-shot-left img { object-position: left center; }
/* Online sichtbar: 4 statt 2–3 Cases — zweizeiliges Raster (2×2 statt 3+1), entsprechend mehr Höhe */
.lp-03 .f-pref { --rows: 18.4; }
.lp-03 .pref-list li { flex-basis: calc(var(--cell) * 6); max-width: calc(var(--cell) * 6.7); }
/* Ganz nach Bedarf: 6 statt 2–4 Cases — zweizeiliges Raster, entsprechend mehr Höhe */
.lp-05 .f-pref { --rows: 14.7; }

/* ==========================================================================
   VERWANDTE — „Passt nicht ganz?“
   ========================================================================== */
.f-rel { --rows: 6.2; z-index: 4; }
.lp .f-rel { --rows: 7.7; }
.lp-05 .f-rel { --rows: 7.6; }
.f-rel .g { --mask: radial-gradient(ellipse 40% 55% at 15% 60%, #000 0, transparent 100%), radial-gradient(ellipse 30% 50% at 88% 45%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.rel-h { --x: 1; --y: 1.9; font-size: calc(var(--cell) * .85); }
.rel-sub { --x: 1; --y: 3.05; --w: 4.6; z-index: 1; font-size: 16px; }
.rel-list { --x: 7; --y: 1.5; --w: 8; z-index: 1; border-top: 2px solid var(--ink); }
.rel-list li { border-bottom: 1px solid rgba(28, 26, 23, .35); }
.rel-list a { --ac: var(--orange); --on: var(--ink); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: calc(var(--cell) * .6) 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 0; height: calc(var(--cell) * 1.4); padding: 8px 14px 8px 0; text-decoration: none; transition: color .25s, padding .25s; }
.rel-list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ac); transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s cubic-bezier(.3, 0, .2, 1); }
.rel-list a:hover, .rel-list a:focus-visible { color: var(--on); padding-left: 10px; }
.rel-list a:hover::before, .rel-list a:focus-visible::before { transform: scaleX(1); }
.rel-list .n { grid-row: 1 / 3; font-size: 12px; color: var(--orange-t); padding-left: 6px; transition: color .25s; }
.rel-list a:hover .n { color: var(--on); }
.rel-list b { font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .62); line-height: 1; text-transform: none; letter-spacing: 0; align-self: end; }
.rel-list em { grid-column: 2; font-style: normal; font-size: 14px; line-height: 1.35; align-self: start; padding-top: 3px; }
.rel-list .go { grid-row: 1 / 3; grid-column: 3; font-family: var(--font-mono); font-size: 22px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.rel-list a:hover .go { transform: translateX(6px); }
.rel-list li:nth-child(2) a { --ac: var(--blue); --on: var(--cream); }
.rel-list li:nth-child(3) a { --ac: var(--ink); --on: var(--cream); }
.rel-list li.c-b a { --ac: var(--blue); --on: var(--cream); }
.rel-list li.c-k a { --ac: var(--ink); --on: var(--cream); }
.rel-list li.c-o a { --ac: var(--orange); --on: var(--ink); }
.rel-alt { --x: 7; --y: 6.1; --w: 8; z-index: 1; display: flex; align-items: center; gap: 14px; border: 2px solid var(--ink); padding: 12px 16px; text-decoration: none; color: inherit; transition: background .25s, color .25s; }
.rel-alt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel-alt .n { font-size: 12px; color: var(--orange-t); transition: color .25s; }
.rel-alt b { font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .5); line-height: 1; text-transform: none; letter-spacing: 0; }
.rel-alt em { font-style: normal; font-size: 13px; line-height: 1.3; opacity: .85; }
.rel-alt .go { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 20px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.rel-alt:hover, .rel-alt:focus-visible { background: var(--ink); color: var(--cream); }
.rel-alt:hover .n, .rel-alt:focus-visible .n { color: var(--orange); }
.rel-alt:hover .go, .rel-alt:focus-visible .go { transform: translateX(6px); }

/* ==========================================================================
   KONTAKT — Farbfläche mit Ente
   ========================================================================== */
.f-cta2 { --rows: 7.4; z-index: 4; }
.f-cta2 .plane { --x: 1; --y: 1; --w: 14; --h: 5.4; z-index: 0; }
.f-cta2 .plane .g::before, .f-cta2 .plane .g::after { background-position: calc(var(--cell) * -1) calc(var(--cell) * -1); }
.cta2-h { --x: 2; --y: 1.7; width: auto !important; font-size: calc(var(--cell) * 1.15); line-height: .95; z-index: 1; }
.pl-orange .cta2-h { color: var(--cream); }
.cta2-h span { color: var(--acc); }
.pl-orange .cta2-h span { color: var(--ink); }
.cta2-note { --x: 8.2; --y: 2.1; --w: 5.3; font-size: 16px; line-height: 1.5; z-index: 1; }
.cta2-btn { --x: 8.2; --y: 3.95; width: auto !important; z-index: 1; }
.cta2-btn span { display: inline-block; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.cta2-btn:hover span { transform: rotate(180deg); }
.cta2-contact { --x: 8.2; --y: 4.8; width: auto !important; z-index: 1; display: flex; flex-direction: column; font-style: italic; font-size: 15px; line-height: 1.35; }
.cta2-contact a { text-decoration: none; width: fit-content; }
@media (min-width: 901px) {
  .cta2-contact { gap: 6px; }
  .cta2-contact a { display: inline-block; padding: 3px 0; }
}
.cta2-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta2-duck { --x: 11.9; --y: 4.15; --w: 3.5; z-index: 3; }

/* ==========================================================================
   Mobil / Tablet — Raster halbiert, Frames fließen
   ========================================================================== */
@media (max-width: 900px) {
  .f-lh { padding-top: calc(var(--hdr) + var(--cell) * .9); padding-bottom: calc(var(--cell) * 1.4); }
  .lh-back { position: relative !important; }
  .lh-h1 { font-size: 15vw; white-space: normal; }
  .lh-lead { font-size: 16px; }
  .lh-cta { flex-wrap: wrap; row-gap: 12px; }
  .lh-vis { width: 100% !important; height: calc(var(--cell) * 5.6); margin-top: calc(var(--cell) * .3); }
  .lh-duck { position: absolute !important; right: 0; bottom: calc(var(--cell) * .8); width: 34vw !important; left: auto; top: auto; margin: 0; }
  .who-h, .dz-h, .rel-h, .pref-h { font-size: 12vw; white-space: normal; }
  .who-pass, .who-need, .who-text, .dz-sub, .rel-sub, .pref-sub { width: 100% !important; }
  .pref-list { width: 100% !important; flex-direction: column; gap: 26px; }
  .pref-list li { max-width: none; }
  .who-need .st-list { grid-template-columns: 1fr; }
  .lead2 { font-size: 17px; }
  .rel-list a { height: auto; padding: 12px 10px 12px 0; }
  .rel-list b { font-size: 26px; }
  .lp-01 .menu-list, .rel-list, .rel-alt { width: 100% !important; }
  .rel-alt { margin-top: 14px; flex-wrap: wrap; }
  .lp-01 .menu-list a { grid-template-columns: 2.4em 1fr auto; row-gap: 4px; height: auto; padding: 12px 8px 12px 0; }
  .lp-01 .menu-list em { grid-column: 2 / 4; grid-row: 2; padding: 0; }
  .lp-01 .dz-fmt { width: 100% !important; }
  .pts { position: relative; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; width: 100% !important; }
  .pt { position: relative; left: auto; top: auto; width: auto; }
  .pt-shape { height: calc(var(--cell) * 2.4); }
  .tab-list { width: 100% !important; }
  .tab-panels { position: relative !important; width: 100% !important; height: auto; min-height: 0; box-shadow: 5px 5px 0 var(--ink); margin-top: calc(var(--cell) * .2); }
  .tab-panel { position: relative; grid-template-columns: 1fr; padding: 18px 16px 22px; }
  .tab-panel h3 { font-size: 11vw; }
  .vp { height: calc(var(--cell) * 5.4); }
  .vp > * { transform-origin: 0 0; }
  .lay { position: relative !important; height: auto !important; display: flex; flex-direction: column; gap: 22px; }
  .tl-grp { display: none; }
  .tl-line { top: 0; bottom: 0; height: auto; width: 0; left: 9px; border-top: 0; border-left: 3px solid var(--ink); }
  .tl-stop { position: relative; left: auto; top: auto; width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
  .tl-card { margin-top: 0; }
  .cd { position: relative; left: auto; top: auto; width: 100% !important; transform: none; translate: none; }
  .cd-q { position: relative; left: auto; top: auto; align-self: flex-start; }
  .f-flow .plane, .f-cta2 .plane { top: calc(var(--cell) * .4); width: 100%; left: 0; height: calc(100% - var(--cell) * .8); }
  .f-flow, .f-cta2 { padding-left: calc(var(--cell) * 1); padding-right: calc(var(--cell) * 1); padding-top: calc(var(--cell) * 1.4); padding-bottom: calc(var(--cell) * 1.4); }
  .fl-h { font-size: 11vw; white-space: normal; }
  .fl-d, .fl-s { width: 100% !important; }
  .cta2-h { font-size: 15vw; }
  .cta2-note { width: 100% !important; }
  .cta2-duck { position: absolute !important; right: 3vw; bottom: calc(var(--cell) * 1.1); width: 34vw !important; left: auto; top: auto; margin: 0; }
  .cta2-contact { margin-bottom: calc(var(--cell) * 1); }
}


/* ==========================================================================
   Responsive-QA
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1240px) {
  .lh-lead { --w: 7.4; font-size: 16px; }
}
@media (max-width: 900px) {
  .f-lh { padding-bottom: calc(var(--cell) * .9); }
  .lh-back a { display: inline-block; padding: 12px 0 10px; }
  .sv-ask { display: inline-block; padding: 14px 0 8px; }
  .lh-vis.vis-1, .lh-vis.vis-2 { height: calc(var(--cell) * 4.9); }
  .lh-vis.vis-3 { height: calc(var(--cell) * 4.7); }
  .lh-vis.vis-4 { height: calc(var(--cell) * 5.4); }
  .lh-vis.vis-5 { height: calc(var(--cell) * 5.3); }
  .vp { height: calc(var(--cell) * 4.4); }
  .fl-s-h { margin-top: 22px; }
  .rel-list em { padding-right: 16px; }
}

@media (max-width: 900px) {
  .sv-ask { display: inline-block; padding: 15px 0; background-origin: content-box; }
}

/* ==========================================================================
   Mobile-Polish (Test auf echtem iPhone) — gezielt ≤430px
   ========================================================================== */
@media (max-width: 430px) {
  /* „Fünf Bausteine“ (Gut aufgestellt): 2 Spalten wurden auf schmalen Handys eng und ließen
     beim 5. Baustein eine leere Spalte übrig — jetzt sauber einspaltig, kompakt gruppiert. */
  .pts { grid-template-columns: 1fr; gap: 22px; }

  /* .cta2-btn hat ein eigenes "width: auto !important" (home.css); hier — nach home.css
     geladen — noch einmal explizit auf volle Breite setzen, damit die generische .btn-Regel
     für diese Seiten (Leistungen, Kontakt, Über, FAQ, Portfolio-Case) tatsächlich greift. */
  .cta2-btn { width: 100% !important; text-align: center; }
}