/* Entwurf 01 "Klar": gemeinsames Stylesheet fuer Startseite und Unterseiten */
:root{
  --bg:#fff;
  --tile:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#5f5f64;
  --line:#d2d2d7;
  --dark:#1d1d1f;

  /* Bereichs-Akzente: gleiche Helligkeit und Saettigung, nur andere Farbrichtung */
  --c-apps:oklch(0.5 0.12 255);
  --c-web:oklch(0.5 0.12 165);
  --c-it:oklch(0.5 0.12 55);
  --c-music:oklch(0.5 0.12 345);

  --r:28px;
  --r-sm:18px;
  --gap:16px;
  --pad:clamp(22px,3vw,40px);
  --sec:clamp(72px,9vw,128px);
  --max:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-rv:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable} /* Platz fuer die Scrollleiste immer reserviert: nichts verschiebt sich, wenn sie beim Aufklappen erscheint */
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
h1,h2,.lead,.sec-head p.intro{text-wrap:balance}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
p{text-wrap:pretty}
section[id]{scroll-margin-top:72px}

/* Bereichszuordnung: jede Kachel/Zeile setzt --c (Akzent) und --t (Toenung) */
.a-apps{--c:var(--c-apps)}
.a-web{--c:var(--c-web)}
.a-it{--c:var(--c-it)}
.a-music{--c:var(--c-music)}
.a-apps,.a-web,.a-it,.a-music{--t:color-mix(in oklch,var(--c) 6%,var(--tile))}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:22px}
.k{display:inline-block;font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--c);font-feature-settings:"tnum"}
.kicker{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.mute{color:var(--ink-2)}

/* Buttons als Pillen */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:550;text-decoration:none;background:var(--dark);color:#fff;border:1px solid var(--dark);transition:background .2s,color .2s;white-space:nowrap}
.pill:hover{background:#000}
.pill.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.pill.ghost:hover{border-color:var(--ink)}
.pill-sm{min-height:34px;padding:0 16px;font-size:14px}
.pill svg{width:16px;height:16px;flex:none}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.08)}
/* Milchglas auf eigener Ebene: ein Filter direkt an .nav wuerde das feste Vollbild-Menue an die Kopfzeile binden */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);transition:background .35s ease}
.nav-in{display:flex;align-items:center;gap:32px;height:56px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:18px;width:auto}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:28px}
.nav nav a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:6px 0;transition:color .2s}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]{font-weight:600}
.menu-btn{-webkit-tap-highlight-color:transparent;display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;margin:0 -10px 0 auto;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.menu-btn span{display:block;width:20px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .55s cubic-bezier(.32,.72,0,1)}
.nav.open .menu-btn span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- Geraete: echte Rahmen (Android Studio Device Art: Pixel 6 dunkel, Pixel 7 hell, Pixel Tablet; Quelle: quellen/geraete).
   Der Rahmen liegt als Bild ueber dem Bildschirm (::after), Bild oder Video fuellen den Bildschirmausschnitt.
   .phone = Handy, .screen = Tablet quer, .tab = Tablet hochkant. Standard ist der dunkle Rahmen (fuer helle Inhalte);
   .hell waehlt den hellen Rahmen (fuer dunkle Websites und Apps). ---------- */
.phone,.screen,.tab{position:relative;isolation:isolate;aspect-ratio:var(--fa);
  --fa:1209/2553;--f:url(assets/geraete/handy-dunkel.webp);--sx:4.963%;--sy:2.703%;--sw:89.330%;--sh:94.007%;--ir:3.06%/1.38%}
.screen{--fa:2798/1837;--f:url(assets/geraete/pixel-tablet-dunkel.webp);--sx:4.253%;--sy:6.369%;--sw:91.494%;--sh:87.099%;--ir:1.17%/1.88%}
.tab{--fa:1837/2798;--f:url(assets/geraete/pixel-tablet-hoch-dunkel.webp);--sx:6.369%;--sy:4.253%;--sw:87.099%;--sh:91.494%;--ir:1.88%/1.17%}
.phone>img,.phone>video,.screen>img,.tab>img{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);object-fit:cover;object-position:50% 0;background:#000;border-radius:var(--ir)} /* Eckradius wie das Display: keine Ecke ragt aus dem Rahmen */
.phone::after,.screen::after,.tab::after{content:"";position:absolute;inset:0;z-index:1;background:var(--f) center/100% 100% no-repeat;pointer-events:none}
.screen.hell{--f:url(assets/geraete/pixel-tablet-hell.webp)}
.tab.hell{--f:url(assets/geraete/pixel-tablet-hoch-hell.webp)}
.phone.hell{--fa:1200/2541;--f:url(assets/geraete/handy-hell.webp);--sx:4.917%;--sy:2.283%;--sw:90.000%;--sh:94.451%;--ir:5.09%/2.29%}
.base{display:none}

/* ---------- Startseite: Einstieg mit drei Kacheln ---------- */
.hero{padding-top:clamp(40px,5vw,72px);text-align:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.04;letter-spacing:-.038em;font-weight:680}
.lead{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--ink-2);max-width:34em;margin:18px auto 0;line-height:1.45;letter-spacing:-.01em}

.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(36px,4.5vw,56px)}
/* Farbsuppe: je Kachel drei stark verschwommene Farbpunkte ihrer Kategorie, die unabhaengig voneinander
   durch den Hintergrund treiben (eigene Dauer je Punkt, daher nie im Gleichtakt). Beim IT-Service nur im oberen
   Teil, bis unter die runden Bildecken. */
@property --x1{syntax:'<percentage>';inherits:false;initial-value:18%}
@property --y1{syntax:'<percentage>';inherits:false;initial-value:22%}
@property --x2{syntax:'<percentage>';inherits:false;initial-value:78%}
@property --y2{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --x3{syntax:'<percentage>';inherits:false;initial-value:45%}
@property --y3{syntax:'<percentage>';inherits:false;initial-value:75%}
.choice{--g1:color-mix(in oklch,var(--c) 5%,#fff)}
.choice.a-apps{--b1:#9cc8ff;--b2:#bcb3ff;--b3:#9fe0f2}
.choice.a-web{--b1:#a3eac6;--b2:#d9f09c;--b3:#8fd9d0}
.choice.a-it{--b1:#ffc39a;--b2:#ffdb8c;--b3:#ffb3a3}
.choice::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at var(--x1) var(--y1),var(--b1),transparent 72%),
    radial-gradient(52% 58% at var(--x2) var(--y2),var(--b2),transparent 72%),
    radial-gradient(62% 48% at var(--x3) var(--y3),var(--b3),transparent 72%),var(--g1);
  animation:dot1 19s ease-in-out infinite alternate,dot2 23s ease-in-out infinite alternate,dot3 29s ease-in-out infinite alternate}
.choice.a-web::before{animation-duration:21s,27s,17s;animation-delay:-6s,-11s,-3s}
.choice.a-it::before{bottom:auto;height:64%;animation-duration:25s,18s,22s;animation-delay:-9s,-4s,-13s}
@keyframes dot1{0%{--x1:12%;--y1:18%}35%{--x1:68%;--y1:30%}70%{--x1:38%;--y1:78%}100%{--x1:82%;--y1:58%}}
@keyframes dot2{0%{--x2:84%;--y2:24%}30%{--x2:30%;--y2:52%}65%{--x2:72%;--y2:86%}100%{--x2:18%;--y2:40%}}
@keyframes dot3{0%{--x3:40%;--y3:80%}40%{--x3:86%;--y3:66%}75%{--x3:22%;--y3:30%}100%{--x3:60%;--y3:14%}}
.choice{position:relative;display:flex;flex-direction:column;background:var(--g1);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;isolation:isolate;container-type:inline-size}
/* Text waechst mit der Kachelbreite (cqi), mit Unter- und Obergrenze */
.choice-text{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,6.5cqi,52px) clamp(20px,5cqi,40px) clamp(22px,4.5cqi,34px)}
.choice-title{display:block;font-size:clamp(2.1rem,8.2cqi,3.3rem);font-weight:680;letter-spacing:-.032em;line-height:1.05}
.choice-text p{color:#38383d;margin-top:clamp(10px,2.2cqi,14px);font-size:clamp(16px,3.4cqi,19.5px);line-height:1.45;max-width:24em}
.choice .pill{margin-top:clamp(20px,4.2cqi,28px);font-size:clamp(16px,3.1cqi,18px);min-height:clamp(44px,9.6cqi,52px);padding:0 clamp(22px,5cqi,30px)}
.choice:hover .pill{background:#000}
.choice-media{position:relative;margin-top:auto;aspect-ratio:368/320}
.choice-media>*{transition:transform .6s var(--ease)}
.choice:hover .choice-media>*{transform:translateY(-6px)}
.choice:hover .m-it>*{transform:scale(1.04)} /* Foto fuellt die Kachel bis zum Rand: zoomen statt verschieben */
/* Apps-Kachel: Handys mittig, beim Scrollen gegenlaeufig (links rauf, rechts runter), nie aus der Kachel (--py aus klar.js) */
.m-apps .phone{position:absolute;top:50%;width:29%;transform:translateY(calc(-50% + var(--py,0px)));transition:none}
.m-apps .phone:nth-child(1){left:16%}
.m-apps .phone:nth-child(2){right:16%}
.choice:hover .m-apps .phone{transform:translateY(calc(-50% + var(--py,0px)))}
/* Webdesign-Kachel: Bildschirm und Handy als Gruppe, senkrecht mittig im Bildbereich.
   margin-bottom = Ueberstand des Handys unter dem Bildschirm, damit die sichtbare Gruppe zentriert ist. */
/* Tablet und Handy als Gruppe (Webdesign-Kachel, kleine Referenzen), senkrecht mittig im freien Raum.
   Beide liegen in derselben Rasterzelle, das Handy mit Abstand von oben: sein Ueberstand zaehlt so zur Gruppenhoehe. */
.duo{display:grid;align-items:center}
.duo .grp{display:grid;width:84%;margin-left:8%}
.duo .grp>*{grid-area:1/1;align-self:start}
.duo .phone{justify-self:end;width:28.6%;margin:19% -2.4% 0 0}
.m-web .grp{margin-bottom:clamp(22px,4.5cqi,34px)} /* Innenabstand unter dem Button ausgleichen: mittig zwischen Button und Kachelende */
.m-it img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Desktop: Knoepfe mittig zwischen Kacheln und Belegzeile (gleicher Abstand oben und unten) */
.hero{--call-gap:clamp(40px,4.5vw,64px)}
.call-slot{margin-top:var(--call-gap)}
.proof{--call-gap:clamp(40px,4.5vw,64px)}
.call{display:flex;align-items:center;justify-content:center;gap:14px}
/* WhatsApp: gruener Kreis, gleich hoch wie die Pille daneben */
.wa-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#25d366;color:#fff;transition:background .2s}
.wa-btn:hover{background:#1ebe5b}
.wa-btn svg{width:24px;height:24px}

@media (min-width:761px){
  /* Kacheln der Startseite reichen bis an die Fensterraender (Breite ohne Scrollleiste ueber cqi der Hero-Flaeche);
     die aeusseren Ecken sind eckig, damit die Kacheln sauber am Rand abschliessen */
  .hero{container-type:inline-size}
  .choices{margin-inline:calc((100% - 100cqi) / 2)}
  .choice:first-child{border-top-left-radius:0;border-bottom-left-radius:0}
  .choice:last-child{border-top-right-radius:0;border-bottom-right-radius:0}
  .m-apps .phone{width:33%} /* Desktop: Handys rund 14 % groesser */
  .m-apps .phone:nth-child(1){left:15%}
  .m-apps .phone:nth-child(2){right:15%}
  /* Maske: der Bildbereich hat oben runde Ecken, das Bild liegt darunter und zoomt beim Hovern nur innerhalb */
  .m-it{border-radius:var(--r) var(--r) 0 0;overflow:hidden;isolation:isolate}
}

/* Proof-Zeile */
.proof{margin-top:var(--call-gap,clamp(56px,7vw,96px))}
.proof ul{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof li{padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.proof li+li{border-left:1px solid var(--line)}
.proof strong{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.proof span.d{font-size:15px;color:var(--ink-2)}

/* ---------- Abschnitte und Unterseiten ---------- */
.sec{padding-top:var(--sec)}
.page-head{padding-top:clamp(48px,6vw,88px)}
.sec-head{max-width:980px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h1,.sec-head h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.034em;font-weight:680;margin-top:14px}
.page-head .sec-head h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.page-head .sec-head{margin-inline:auto;text-align:center}
.page-head .sec-head h1{margin-top:0}
.sec-head p.intro{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink-2);margin-top:16px;max-width:36em}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.tile{background:var(--t,var(--tile));border-radius:var(--r);padding:var(--pad)}
.tile h3,.tile .h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.025em;font-weight:650;line-height:1.15}

/* Apps */
/* Apps: Umschalter zwischen den zwei Apps; das Handy ist das groesste Element, der App-Name kommt oben
   hinter dem Handy hervor, die Kurzbeschreibung unten */
.app-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.app-tabs button{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:20px;border:1px solid rgba(245,245,247,.14);background:rgba(245,245,247,.05);color:rgba(245,245,247,.62);font:inherit;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.app-tabs button:hover{color:#f5f5f7;border-color:rgba(245,245,247,.3)}
.app-tabs button[aria-selected="true"]{background:rgba(245,245,247,.12);border-color:rgba(245,245,247,.32);color:#f5f5f7}
.app-tabs button:focus-visible{outline:2px solid #f5f5f7;outline-offset:3px}
.app-tabs img{width:44px;height:44px;border-radius:11px}
.tab-t{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:7.6em}
.app-tabs strong{font-size:16px;font-weight:600}
.tab-bar{width:100%;height:3px;border-radius:2px;background:rgba(245,245,247,.16);overflow:hidden}
.tab-bar i{display:block;height:100%;background:#f5f5f7;transform-origin:0 50%;transform:scaleX(0)}
.st-dev{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(16px,4vw,56px)}
.st-go{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid rgba(245,245,247,.2);background:rgba(245,245,247,.08);color:#f5f5f7;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.st-go:hover{background:rgba(245,245,247,.18)}
.st-go:active{transform:scale(.94)}
.st-go svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stages{display:grid;padding-bottom:clamp(56px,7vw,104px)}
.stage{grid-area:1/1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(28px,4vw,56px);
  opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .45s,transform .7s var(--ease),visibility 0s .45s}
.stage.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s .08s,transform .7s var(--ease) .08s,visibility 0s}
.st-name{position:relative;z-index:0;display:flex;align-items:flex-end;justify-content:center;height:calc(clamp(4.2rem,19vw,15rem) * .92);font-size:var(--fs);font-weight:760;letter-spacing:-.055em;line-height:.92;white-space:nowrap;color:var(--glow);margin-bottom:-.24em}
.st-phone{z-index:1;width:min(34vh,340px)}
.stage::after{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:min(90vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklch,var(--glow) 22%,transparent),transparent);pointer-events:none}
.stage{position:relative;isolation:isolate}
.st-line{position:relative;z-index:0;display:flex;align-items:flex-start;justify-content:center;min-height:2.16em;margin-top:clamp(24px,2.8vw,38px);font-size:clamp(1.7rem,4.4vw,3.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;max-width:15em;color:#f5f5f7}
.st-meta{margin-top:16px;font-size:15px;color:rgba(245,245,247,.6)}
.st-meta a{color:inherit;text-underline-offset:3px}
.st-meta a:hover{color:#f5f5f7}
 /* schliesst mit der normalen Fuge an die Buehne an */
 /* Fensterleiste oben, Befehle mittig */

/* Webdesign */
/* Werkzeug-Band (Apps): jede Technologie in ihrer Hausschrift bzw. der naechstaehnlichen freien Schrift (OFL/Apache,
   lokal unter assets/fonts, nichts wird bei Google geladen) und in ihrer Markenfarbe */
/* Inter lokal (frueher Google Fonts; Datenschutz): variable Schrift 400 bis 700, Teilmenge latin, OFL 1.1 */
@font-face{font-family:"Inter";font-weight:400 700;font-style:normal;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/jetbrains-mono-700.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:900;font-style:normal;font-display:swap;src:url(assets/fonts/roboto-900.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/geist-700.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/open-sans-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/source-serif-4-600.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/rubik-700.woff2) format("woff2")}
.t-kotlin{font-family:"JetBrains Mono",monospace;font-weight:700;background-image:linear-gradient(90deg,#7f52ff,#c811e1,#e54857);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-compose{font-family:Roboto,sans-serif;font-weight:500;color:#1a73e8}
.t-kmp{font-family:"JetBrains Mono",monospace;font-weight:700;color:#7f52ff}
.t-ts{font-family:"Segoe UI",system-ui,sans-serif;font-weight:600;color:#3178c6}
.t-react{font-family:system-ui,"Segoe UI",sans-serif;font-weight:600;color:#087ea4}
.t-cap{font-family:Inter,sans-serif;font-weight:800;color:#119eff}
.t-next{font-family:Geist,Inter,sans-serif;font-weight:700;letter-spacing:-.05em;color:#000}
.t-vite{font-family:Inter,sans-serif;font-weight:800;background-image:linear-gradient(90deg,#41d1ff,#bd34fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-tw{font-family:Inter,sans-serif;font-weight:700;color:#06b6d4}
.t-pg{font-family:"Open Sans",sans-serif;font-weight:700;color:#336791}
.t-prisma{font-family:Barlow,sans-serif;font-weight:700;color:#2d3748}
.t-firebase{font-family:Roboto,sans-serif;font-weight:500;color:#f57c00}
.t-docker{font-family:Roboto,sans-serif;font-weight:900;color:#1d63ed}
.t-claude{font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:#d97757}
.t-openai{font-family:Inter,sans-serif;font-weight:600;color:#000}
.t-sentry{font-family:Rubik,sans-serif;font-weight:700;color:#362d59}
.t-vitest{font-family:Inter,sans-serif;font-weight:800;color:#6e9f18}

/* Leistungen als ruhig durchlaufendes Band (zwei gleiche Listen, Verschiebung um die Haelfte = nahtlose Schleife) */
.ticker{margin-top:var(--sec);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex}
.ticker li{display:flex;align-items:center;font-size:clamp(1.7rem,3.6vw,3rem);font-weight:650;letter-spacing:-.035em;white-space:nowrap;color:var(--ink)}
.ticker li::after{content:"";width:.24em;height:.24em;margin:0 .8em;border-radius:50%;background:var(--c)}
@keyframes tick{to{transform:translateX(-50%)}}
.ref-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 32px}
.label{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.ref-head h3,.ref-small h3{margin-top:6px}
.ref-head p,.ref-small .desc{color:var(--ink-2);margin-top:6px;font-size:16px}
.devices{display:grid;grid-template-columns:5fr 1.75fr 1.05fr;gap:clamp(14px,2.4vw,32px);align-items:end;margin-top:clamp(32px,4vw,48px)}
.devices figure{display:flex;flex-direction:column;gap:12px}
.devices figcaption{font-size:14px;color:var(--ink-2);white-space:nowrap}

.refs{margin-top:var(--gap)}
.refs-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* Groschn: Kachelfarbe reicht links und rechts bis an den Bildschirmrand, der Inhalt bleibt in der Spalte */
.ref-main{box-shadow:0 0 0 100vmax var(--t);clip-path:inset(0 -100vmax);--s:clamp(48px,6vw,88px);padding-block:var(--s)}
.ref-main .devices{margin-top:var(--s)} /* oben, zwischen Kopf und Geraeten, unten: gleicher Abstand */
/* Webdesign: dunkler Kopf, geht nahtlos in die dunkle Groschn-Kachel ueber */
.page-head.dark-top{padding-top:0}
.dark-head{background:#0a0a0b;box-shadow:0 0 0 100vmax #0a0a0b;clip-path:inset(0 -100vmax -2px);color:#f5f5f7;padding-top:clamp(48px,6vw,88px)}
.dark-head .mute{color:rgba(245,245,247,.56)}
.dark-head .sec-head{margin-bottom:0}
/* Groschn im dunklen Design (Grund wie in der App) */
.tile.ref-main{--t:#0a0a0b;color:#f5f5f7}
.ref-main .ref-head p,.ref-main .ref-head a{color:rgba(245,245,247,.64)}
.tile.ref-main,.tile.ref-small{border-radius:0} /* auch am Handy eckig: Rand zu Rand */
/* Kleine Referenzen: gleich grosse Quadrate, jede in eigener Farbe; Geraete so gross, wie die Hoehe erlaubt */
.ref-small{display:flex;flex-direction:column;overflow:hidden;text-align:center;aspect-ratio:1;min-height:0} /* Reihe reicht von Rand zu Rand (liegt ausserhalb von .wrap) */
.ref-small .media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:var(--pad)} /* = Innenabstand unten: Geraete mittig zwischen Text und Kachelende */
.ref-small .grp{height:100%;width:auto;max-width:94%;aspect-ratio:1.28;margin:0;transform:translateX(-1.2%);align-content:center} /* 1.28 = Breite : Hoehe von Tablet samt Handy; Versatz = halber Ueberstand des Handys */
.ref-melo{--t:#f7c9d4}
.ref-law{--t:#f9dc93}
.ref-ww{--t:#ffc59a}
.it-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)} /* 12 Kacheln: 4, 2 oder 1 pro Reihe, nie ein Platz frei */
.svc{border-radius:var(--r-sm);padding:26px 24px 28px;background:var(--t)}
.svc svg{width:28px;height:28px;color:var(--c);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc h3,.svc .h3{font-size:18px;font-weight:620;letter-spacing:-.012em;margin-top:18px;line-height:1.25}
.svc p{font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.it-cta{display:grid;grid-template-columns:1fr 1fr;margin-top:0;padding:0;overflow:hidden}
.it-cta .txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.it-cta .txt p{color:var(--ink-2)}
.it-cta .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.it-cta img{width:100%;height:100%;min-height:320px;object-fit:cover;object-position:50% 50%}
/* IT-Service: unter der Reihe faehrt ein Feld ueber die ganze Breite auf und schiebt den Rest weich nach unten;
   ein Zeiger an der Feldkante zeigt auf die gewaehlte Kachel (Hoehe und Lage setzt klar.js) */
.it-grid{position:relative;row-gap:0;overflow-anchor:none;--ps:16px}
.it-grid *{overflow-anchor:none} /* Nachfuehren beim Reihenwechsel uebernimmt klar.js */
.it-grid>.svc{margin-bottom:var(--gap)} /* Reihenabstand liegt unter den Kacheln: ein geschlossenes Feld nimmt keinen Platz ein */
.svc{position:relative;cursor:default;outline:0}
.svc:focus-visible{box-shadow:inset 0 0 0 2px var(--c)}
.svc-panel[hidden]{display:none}
.svc-panel{position:relative;grid-column:1/-1;display:block;height:0;overflow:hidden;border-radius:var(--r-sm);background:var(--t)}
.svc-ptr{position:absolute;left:0;top:0;width:var(--ps);height:var(--ps);border-radius:3px;background:var(--t);transform:rotate(45deg);opacity:0;pointer-events:none;list-style:none;
  transition:left .5s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.svc-ptr.on{opacity:1}
.sp-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(28px,3.4vw,48px)}
.sp-in h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sp-in .sp-lead{margin-top:12px;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--ink-2);max-width:30em}
.sp-in ul{border-top:1px solid color-mix(in oklch,var(--c) 18%,transparent)}
.sp-in ul li{padding:11px 0;font-size:16px;border-bottom:1px solid color-mix(in oklch,var(--c) 18%,transparent)}
.sp-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* IT-Service: jedes Leistungs-Symbol mit eigener Mini-Animation beim Darueberfahren (am Handy beim Hereinscrollen) */
.ai svg{overflow:visible}
.ai svg *{transform-box:view-box}
.ai:hover .a-scan,.ai:focus-within .a-scan{animation:s-draw 1.3s ease-out infinite}
.ai:hover .a-needle,.ai:focus-within .a-needle{animation:s-needle 1.6s cubic-bezier(.4,0,.2,1) infinite}
.ai:hover .a-k1,.ai:focus-within .a-k1{animation:s-k1 1.4s ease-in-out infinite}
.ai:hover .a-k2,.ai:focus-within .a-k2{animation:s-k2 1.4s ease-in-out infinite}
.ai:hover .a-l1,.ai:focus-within .a-l1,.ai:hover .a-l2,.ai:focus-within .a-l2,.ai:hover .a-l3,.ai:focus-within .a-l3{animation:s-stack 1.6s ease-out infinite}
.ai:hover .a-up,.ai:focus-within .a-up{animation:s-up 1.3s ease-in-out infinite}
.ai:hover .a-check,.ai:focus-within .a-check{animation:s-draw 1.4s ease-out infinite}
.ai:hover .a-shield,.ai:focus-within .a-shield{animation:s-pulse 1.4s ease-in-out infinite}
.ai:hover .a-phone,.ai:focus-within .a-phone{animation:s-wiggle 1.5s ease-in-out infinite}
.ai:hover .a-vib,.ai:focus-within .a-vib{animation:s-vib 1.5s ease-in-out infinite}
.ai:hover .a-fan,.ai:focus-within .a-fan{animation:s-spin 1.1s linear infinite}
.ai:hover .a-w1,.ai:focus-within .a-w1,.ai:hover .a-w2,.ai:focus-within .a-w2,.ai:hover .a-w3,.ai:focus-within .a-w3{animation:s-wave 1.4s ease-in-out infinite}
@media (hover:none){
  .ai.in .a-scan{animation:s-draw 1.3s ease-out 2}
  .ai.in .a-needle{animation:s-needle 1.6s cubic-bezier(.4,0,.2,1) 2}
  .ai.in .a-k1{animation:s-k1 1.4s ease-in-out 2}
  .ai.in .a-k2{animation:s-k2 1.4s ease-in-out 2}
  .ai.in .a-l1,.ai.in .a-l2,.ai.in .a-l3{animation:s-stack 1.6s ease-out 2}
  .ai.in .a-up{animation:s-up 1.3s ease-in-out 2}
  .ai.in .a-check{animation:s-draw 1.4s ease-out 2}
  .ai.in .a-shield{animation:s-pulse 1.4s ease-in-out 2}
  .ai.in .a-phone{animation:s-wiggle 1.5s ease-in-out 2}
  .ai.in .a-vib{animation:s-vib 1.5s ease-in-out 2}
  .ai.in .a-w1,.ai.in .a-w2,.ai.in .a-w3{animation:s-wave 1.4s ease-in-out 2}
  .ai.in .a-fan{animation:s-spin 1.1s linear 3}
}

.a-scan,.a-check{stroke-dasharray:1;stroke-dashoffset:0}
.a-needle{transform-origin:12px 17px}
.a-k1,.a-k2{fill:#fff}
.a-shield{transform-origin:12px 12px}
.a-phone{transform-origin:12px 12px}
.a-vib{opacity:0}
.a-scan.b{animation-delay:.25s!important}
.a-l2{animation-delay:.14s!important}
.a-l1{animation-delay:.28s!important}
.a-w2{animation-delay:.18s!important}
.a-w3{animation-delay:.36s!important}
@keyframes s-draw{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes s-needle{0%,100%{transform:rotate(0)}35%{transform:rotate(-92deg)}70%{transform:rotate(14deg)}}
@keyframes s-k1{0%,100%{transform:none}50%{transform:translateX(-7px)}}
@keyframes s-k2{0%,100%{transform:none}50%{transform:translateX(7px)}}
@keyframes s-stack{0%{transform:translateY(-5px);opacity:0}45%,100%{transform:none;opacity:1}}
@keyframes s-up{0%{transform:translateY(3px);opacity:0}30%,70%{opacity:1}100%{transform:translateY(-5px);opacity:0}}
@keyframes s-pulse{0%,100%{transform:none}30%{transform:scale(1.08)}}
@keyframes s-wiggle{0%,45%,100%{transform:rotate(0)}6%{transform:rotate(-9deg)}12%{transform:rotate(9deg)}18%{transform:rotate(-7deg)}24%{transform:rotate(7deg)}30%{transform:rotate(-4deg)}36%{transform:rotate(3deg)}}
@keyframes s-vib{0%,42%,100%{opacity:0}6%,36%{opacity:1}}
.a-fan{transform-origin:12px 13.5px}
@keyframes s-spin{to{transform:rotate(360deg)}}
@keyframes s-wave{0%,100%{opacity:.18}35%{opacity:1}}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

@media (hover:none){}

/* Startseite: Multimedia-Symbole und Karten-Pin mit kleinen Bewegungen */
.mm svg *{transform-box:view-box}
.mm li:hover .a-bar{animation:m-bar .9s ease-in-out infinite;transform-origin:center}
.mm li:hover .a-bar:nth-child(2){animation-delay:.12s}.mm li:hover .a-bar:nth-child(3){animation-delay:.24s}
.mm li:hover .a-bar:nth-child(4){animation-delay:.08s}.mm li:hover .a-bar:nth-child(5){animation-delay:.2s}.mm li:hover .a-bar:nth-child(6){animation-delay:.3s}
@keyframes m-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.mm li:hover .a-rec{animation:m-rec 1s steps(1) infinite}
@keyframes m-rec{50%{opacity:0}}
.a-cap{transform-origin:12px 9px}
.mm li:hover .a-cap{animation:m-cap 1.2s ease-in-out infinite}
@keyframes m-cap{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(-1px)}60%{transform:rotate(4deg)}}
.a-tassel{transform-origin:21.5px 9px}
.mm li:hover .a-tassel{animation:m-tassel 1.2s ease-in-out infinite}
@keyframes m-tassel{0%,100%{transform:rotate(0)}40%{transform:rotate(18deg)}75%{transform:rotate(-10deg)}}
.map-bar:hover .map-pin{animation:pin-hops .8s cubic-bezier(.3,0,.3,1)}
@keyframes pin-hops{0%,100%{transform:none}35%{transform:translateY(-6px)}60%{transform:translateY(0)}78%{transform:translateY(-2px)}}

/* Apps unter der Buehne: reduziert und grosszuegig. Riesige Woerter statt Kaesten, Haarlinien statt Kacheln,
   Werkzeug als ruhige Plakat-Wand mit Lichtschleier, Preise als offene Spalten; alles blendet beim Scrollen sanft ein. */
.plat{margin-top:var(--sec)}
.plat-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.plat-cols>div{text-align:center;padding:clamp(12px,2vw,28px) clamp(16px,2.6vw,40px)}
.plat-cols>div+div{border-left:1px solid var(--line)}
.plat-cols h3{display:inline-block;font-size:clamp(3rem,6.4vw,5.6rem);font-weight:720;letter-spacing:-.055em;line-height:1.02;padding-bottom:.06em;-webkit-background-clip:text;background-clip:text;color:transparent}
.g-android{background-image:linear-gradient(135deg,#3ddc84,#0f8a55)}
.g-ios{background-image:linear-gradient(135deg,#9fb0cc,#4a5568 45%,#1d1d1f)}
.g-both{background-image:linear-gradient(135deg,#5b8cff,#9d6bff 55%,#ff6fae)}
.plat-cols p{max-width:17em;margin:14px auto 0;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--ink-2)}
.wall{position:relative;isolation:isolate;margin-top:var(--sec);padding-block:clamp(40px,5vw,72px)}
.wall::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,#5b8cff,#9d6bff 22%,#ff6fae 45%,#ffb067 62%,#9d6bff 82%,#5b8cff);background-size:200% 100%;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 50%,#000,rgb(0 0 0 / .5) 45%,transparent 72%);mask-image:radial-gradient(60% 50% at 50% 50%,#000,rgb(0 0 0 / .5) 45%,transparent 72%);
  animation:schleier2 40s linear infinite}
@keyframes schleier2{to{background-position:200% 0}}
.wall-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:clamp(6px,1.2vw,16px) clamp(20px,2.8vw,44px);max-width:1120px}
.wall-list li{font-size:clamp(1.55rem,3.3vw,3.1rem);line-height:1.2;letter-spacing:-.02em}
.prices2{margin-top:var(--sec)}
.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.pcol{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(36px,4.4vw,60px) clamp(18px,2.4vw,36px) clamp(40px,4.8vw,64px)}
.pcol+.pcol{border-left:1px solid var(--line)}
.p-badge{height:24px;margin-bottom:12px;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:650;letter-spacing:.02em;line-height:18px}
.is-top .p-badge{background:var(--ink);color:#fff}
.pcol h3{font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:650;letter-spacing:-.02em}
.p-ab{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.p-price{margin-top:2px;white-space:nowrap;font-size:clamp(2.6rem,4.4vw,4rem);font-weight:720;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.p-for{max-width:17em;margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pcol ul{width:100%;max-width:19em;margin:28px 0 36px}
.pcol li{padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.pcol li:last-child{border-bottom:1px solid var(--line)}
.pcol .pill{margin-top:auto}
.incl2{max-width:30em;margin:clamp(48px,6vw,80px) auto 0;text-align:center;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.4;letter-spacing:-.02em;font-weight:500;color:var(--ink-2)}
.incl2 b{font-weight:650;color:var(--ink)}
.prices2 .price-note{margin-top:20px}
/* Erscheinen beim Laden und Scrollen: klar.js setzt .in und die Staffelung --d. Unsichtbar nur mit JavaScript (Klasse
   js aus dem Kopf der Seite, vor dem ersten Zeichnen); laedt klar.js nicht, zeigt rv-off nach 4 s alles. Eigene
   translate- und scale-Werte statt transform: vorhandene Verschiebungen und Hover-Effekte bleiben unberuehrt. */
.js:not(.rv-off) :is(.rv,.rv-fade,.rv-zoom):not(.in){opacity:0}
.rv.in{animation:rv-up 1s var(--ease-rv) var(--d,0s) backwards}
.rv-zoom.in{animation:rv-zoom 1.3s var(--ease-rv) var(--d,0s) backwards}
.rv-fade.in{animation:rv-fade 1s ease var(--d,0s) backwards}
:is(.rv,.rv-fade,.rv-zoom).now{animation:none}
@keyframes rv-up{from{opacity:0;translate:0 28px}}
@keyframes rv-zoom{from{opacity:0;translate:0 22px;scale:.965}}
@keyframes rv-fade{from{opacity:0}}
.price-note{margin-top:18px;text-align:center;font-size:14px;color:var(--ink-2)}
.cta-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-top:var(--sec)}
.cta-row p{color:var(--ink-2);font-size:16px}
/* Musik: schwarzes Band ueber die volle Breite, Schrift weiss, Dooplexx mit Farbverlauf */
.band-dark{background:#0b0b0d;color:#f5f5f7;margin-top:var(--sec);padding-block:clamp(64px,8vw,112px)}
.band-dark .kicker{color:#f5f5f7}
.band-dark .k{color:color-mix(in oklch,var(--c) 45%,#fff)}
/* Musik: Wortmarke gross und mittig; die zwei x werden beim Hereinscrollen nacheinander abgehakt */
.music{display:flex;flex-direction:column;align-items:center;text-align:center}
.dooplexx{--g1:#7c8cff;--g2:#c77dff;--g3:#ff5fa2;--g4:#ff9f45;--g5:#ffd166;
  font-size:clamp(3.6rem,11vw,9rem);font-weight:700;letter-spacing:-.04em;line-height:1;display:flex;align-items:center}
.dooplexx .w{background:linear-gradient(90deg,var(--g1),var(--g2) 25%,var(--g3) 50%,var(--g2) 75%,var(--g1));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;animation:dx-glow 14s ease-in-out infinite alternate}
@keyframes dx-glow{to{background-position:100% 0}}
.dooplexx{align-items:baseline}
/* Die zwei x: eigene Kaestchen, so hoch wie die Grossbuchstaben, auf der Grundlinie; die Striche zeichnen sich nacheinander */
.dx-box{flex:none;width:.72em;height:.72em;margin-left:.05em;overflow:visible}
.dx-box:first-of-type{margin-left:.08em;color:var(--g4)}
.dx-box:last-of-type{color:var(--g5)}
.dx-box rect{fill:none;stroke:currentColor;stroke-width:8}
.dx-ink{fill:currentColor}
/* Aufdecken entlang des Strichs: Maskenlinie zeichnet sich von links nach rechts */
.dx-rev{fill:none;stroke:#fff;stroke-width:44;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .3s cubic-bezier(.6,0,.3,1)}
.js .dooplexx:not(.is-in) .dx-rev{stroke-dashoffset:1}
.dooplexx.is-in #dxm1 .dx-rev{transition-delay:.45s}
.dooplexx.is-in #dxm2 .dx-rev{transition-delay:.7s}
.dooplexx.is-in #dxm3 .dx-rev{transition-delay:1.05s}
.dooplexx.is-in #dxm4 .dx-rev{transition-delay:1.3s}
.dooplexx.is-in .dx-box{animation:dx-tick .45s var(--ease) both}
.dooplexx.is-in .dx-box:first-of-type{animation-delay:.95s}
.dooplexx.is-in .dx-box:last-of-type{animation-delay:1.55s}
@keyframes dx-tick{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.soon-tag{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:550;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#f5f5f7}
.mm-label{margin-top:clamp(64px,8vw,112px);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:680;letter-spacing:-.025em}
.mm{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);width:100%;margin-top:clamp(24px,3vw,36px)}
.mm li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(36px,4vw,56px) 24px;border-radius:var(--r);background:#17171a}
.mm svg{width:48px;height:48px;margin-bottom:10px}
.mm li:nth-child(1) svg{color:var(--g1,#7c8cff)}
.mm li:nth-child(2) svg{color:#ff5fa2}
.mm li:nth-child(3) svg{color:#ffd166}
.mm strong{font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:650;letter-spacing:-.02em}
.mm span{font-size:15px;line-height:1.45;color:rgba(245,245,247,.62);max-width:18em}
.band-dark + .sec{padding-top:var(--sec)}

/* Ueber */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:center}
.about figure{display:grid;gap:12px}
.about .ph{overflow:hidden;aspect-ratio:5/8;border-radius:var(--r);background:var(--tile)}
/* ganzer Koerper, von Kopf bis Schuh: schmaler Rahmen schneidet den grauen Rand seitlich ab, leichter Zoom bleibt innerhalb */
.about .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.06);transform-origin:50% 100%} /* Zoom vom unteren Rand aus: oben wird gekuerzt, die Schuhe bleiben ganz */
.about figcaption{font-size:14px;color:var(--ink-2);padding-left:4px;letter-spacing:.01em}
.about h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.032em;font-weight:680}
.about>div{text-align:center}
.about p.sub{color:var(--ink-2);font-size:clamp(1.05rem,1.5vw,1.25rem);margin-top:16px}

/* Kontakt: zwei grosse Kacheln (Telefon, WhatsApp) mit feinem Symbol als Wasserzeichen, darunter E-Mail als Liste */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.contact .tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:250px;isolation:isolate}
.c-glyph{position:absolute;right:-18px;top:-18px;width:168px;height:168px;z-index:-1;color:var(--ink);opacity:.06;transition:transform .8s var(--ease)}
.c-wa{background:color-mix(in oklch,#25d366 7%,var(--tile))}
.c-wa .c-glyph{color:#128c4a;opacity:.13}
.contact .tile:hover .c-glyph{transform:rotate(-6deg) scale(1.04)}
.c-num{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:680;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;text-decoration:none;color:var(--ink);margin-top:4px}
a.c-num:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.c-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.c-sub{font-size:16px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.c-mail{grid-column:1/-1;min-height:0!important}
.c-list li:first-child a{border-top:0}
.c-list a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto 18px;align-items:center;gap:6px 18px;padding:18px 6px;border-top:1px solid color-mix(in oklch,var(--ink) 9%,transparent);text-decoration:none;color:var(--ink);transition:background .25s}
.c-list li:last-child a{border-bottom:1px solid color-mix(in oklch,var(--ink) 9%,transparent)}
.c-list .t{font-size:17px;font-weight:600;letter-spacing:-.01em}
.c-list .m{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:550;color:var(--ink-2);overflow-wrap:anywhere;text-align:right}
.c-chev{width:16px;height:16px;color:var(--c);transition:transform .35s var(--ease)}
.c-list a:hover{background:color-mix(in oklch,var(--c) 6%,transparent)}
.c-list a:hover .m{color:var(--ink)}
.c-list a:hover .c-chev{transform:translateX(4px)}
/* Karte: schmaler Streifen unter den E-Mail-Adressen (links Adresse, rechts Knopf); darunter schiebt sich Google Maps auf */
#kontakt .sec-head{margin-inline:auto;text-align:center}
.map{margin-top:var(--gap);padding:0;overflow:hidden}
.map-bar{display:flex;align-items:center;gap:14px;padding:14px 14px 14px clamp(16px,2.4vw,28px)}
.map-pin{flex:none;width:40px;height:40px;padding:10px;border-radius:50%;background:#fff;color:var(--c-web)}
.map-addr{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;font-size:16px;color:var(--ink-2)}
.map-addr strong{font-weight:620;color:var(--ink)}
.map-addr span::before{content:"· "}
.map-bar .pill{flex:none}
.map-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.32,.72,0,1)}
.map.open .map-box{grid-template-rows:1fr}
.map-in{min-height:0;overflow:hidden}
.map iframe{display:block;width:100%;height:min(64vh,560px);border:0}

/* Weiter zu den anderen Bereichen (Unterseiten) */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* Weiter zu den anderen Bereichen: grosse Kacheln, kraeftiger getoent, Kontakt dunkel; runder Pfeil-Knopf gleitet beim Hovern */
.next a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:clamp(250px,23vw,330px);padding:40px 28px;border-radius:var(--r);background:var(--t,var(--tile));text-decoration:none;color:var(--ink)}
.next a[class]{--t:color-mix(in oklch,var(--c) 14%,var(--tile))}
.next a .k{font-size:15px}
.next a strong{font-size:clamp(2rem,3.4vw,3rem);font-weight:680;letter-spacing:-.035em;line-height:1.05}
.next a span.d{font-size:16px;color:var(--ink-2);max-width:20em}
.next a::after{content:"";width:48px;height:48px;margin-top:14px;border-radius:50%;background:var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .35s var(--ease)}
.next a:hover::after{transform:translateX(6px)}
.next a:not([class]){--t:#0a0a0b;color:#f5f5f7}
.next a:not([class]) .k{color:rgba(245,245,247,.6)!important}
.next a:not([class]) span.d{color:rgba(245,245,247,.62)}
.next a:not([class])::after{background:#f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%230a0a0b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* Footer */
footer{margin-top:var(--sec);border-top:1px solid var(--line);padding:28px 0 72px;font-size:14px;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot .brand img{height:15px}
.foot .addr{margin-right:auto}
.foot ul{display:flex;gap:24px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsiv ---------- */
@media (max-width:1060px){
  .it-grid{grid-template-columns:repeat(2,1fr)}

}
@media (max-width:860px){
  .it-cta{grid-template-columns:1fr}
  .it-cta img{min-height:240px;max-height:300px}

  .menu-btn{display:flex}
  /* Menue: Vollbild-Panel unter der Kopfzeile. Zieht mit satter Kurve (schneller Start, langes Auslaufen) auf,
     die Links gleiten nacheinander von unten ein. Schliessen laeuft schneller rueckwaerts. */
  .nav{--sheet:cubic-bezier(.32,.72,0,1)}
  .nav.open::before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--navh,56px));height:calc(100dvh - var(--navh,56px));margin:0;background:#fff;overflow-y:auto;
    visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:clip-path .42s cubic-bezier(.6,0,.8,.3),visibility 0s linear .42s}
  .nav.open nav{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .68s var(--sheet),visibility 0s}
  .nav ul{flex-direction:column;gap:0;max-width:var(--max);margin:0 auto;padding:18px 22px 40px}
  .nav nav li{opacity:0;transform:translateY(22px);transition:opacity .2s ease,transform .3s ease}
  .nav.open nav li{opacity:1;transform:none;transition:opacity .45s ease,transform .7s var(--sheet)}
  .nav.open nav li:nth-child(1){transition-delay:.12s}
  .nav.open nav li:nth-child(2){transition-delay:.165s}
  .nav.open nav li:nth-child(3){transition-delay:.21s}
  .nav.open nav li:nth-child(4){transition-delay:.255s}
  .nav.open nav li:nth-child(5){transition-delay:.3s}
  .nav.open nav li:nth-child(6){transition-delay:.345s}
  .nav nav a{display:block;padding:16px 0;font-size:30px;font-weight:650;letter-spacing:-.028em;line-height:1.1;color:var(--ink);border-bottom:1px solid rgba(0,0,0,.07)}
  .nav nav a[aria-current="page"]{color:var(--ink-2)}
  .menu-open{overflow:hidden}
  .nav li:last-child a{border-bottom:0}
  .grid-2,.about,.mm,.refs-3{grid-template-columns:1fr}
  .proof ul,.next{grid-template-columns:1fr}

  .proof li,.proof li+li{padding:20px 0;border-left:0}
  .proof li+li{border-top:1px solid var(--line)}  .about figure{max-width:440px}
}
@media (max-width:760px){
  .sp-in{grid-template-columns:1fr}
  .plat-cols,.pcols{grid-template-columns:1fr}
  .plat-cols>div+div,.pcol+.pcol{border-left:0;border-top:1px solid var(--line)}
  .plat-cols>div{padding-block:28px}
  .p-badge:empty{display:none}
  .contact{grid-template-columns:1fr}
  .contact .tile{min-height:210px}
  .c-glyph{width:132px;height:132px}
  .c-call .c-foot{justify-content:flex-start}
  .c-list a{grid-template-columns:2.8em minmax(0,1fr) 16px;padding:16px 2px}
  .c-list .m{grid-column:2;grid-row:2;text-align:left}
  .c-list .c-chev{grid-column:3;grid-row:1/3}
  /* Am Handy sind die Knoepfe nie in ihrer Zeile zu sehen (sie erscheinen erst unten am Rand): die Zeile nimmt keinen Platz ein,
     Abstand IT-Kachel -> Belege wie Belege -> Foto */
  .call-slot{height:0;margin-top:0}
  .proof{margin-top:var(--sec)}
  .call{justify-content:space-evenly}
  /* als Leiste unten angeheftet */
  .call.is-pinned{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 22px calc(14px + env(safe-area-inset-bottom,0px))}
  /* Die Knoepfe in Telefon- und WhatsApp-Kachel erscheinen erst, wenn der mitlaufende Knopf dort einrastet */
  .js .contact [data-dock]:not(.is-docked){visibility:hidden}
  /* Kacheln untereinander, volle Breite, ohne Rundung, mit Bild */
  .choices{grid-template-columns:1fr;gap:12px;margin:32px -22px 0}
  .choice{border-radius:0}
  /* alle anderen Kacheln genauso: volle Breite, ohne Rundung */
  .tile,.next a,.svc,.svc-panel,.mm li{border-radius:0}
  .contact,.grid-2,.next,.it-grid,.wrap>.tile,.mm{margin-inline:-22px;width:auto}  .map-addr{flex-direction:column;font-size:15px}
  .map-addr span::before{content:none}  /* Referenzen am Handy: hoeher, mehr Luft zwischen Text und Geraeten */
  .ref-small{aspect-ratio:auto;padding-block:48px}
  .ref-small .media{padding-top:48px} /* = Abstand unten */
  .ref-small .grp{height:auto;width:90%;max-width:none}
  .choice-media{aspect-ratio:390/330}
  .hero{padding-top:32px}
  .lead{margin-top:14px}
  .devices{grid-template-columns:1.5fr 1fr;row-gap:24px}
  .dev-laptop{grid-column:1/-1}
  .devices figcaption{font-size:13px}
}
@media (max-width:560px){
  .it-grid{grid-template-columns:1fr;gap:10px;row-gap:0;--ps:10px}
  .it-grid>.svc{margin-bottom:10px}
  .svc{display:grid;grid-template-columns:28px 1fr;column-gap:16px;padding:20px}
  .svc h3,.svc .h3{margin-top:2px}
  .svc p{grid-column:2}
  .it-cta .pill{white-space:normal}

  body{font-size:16px}  .st-phone{width:70vw}
  .st-go{display:none} /* am Handy: Wischen und die App-Karten */
  .app-tabs button{padding:8px 14px 8px 8px}
  .app-tabs img{width:36px;height:36px;border-radius:9px}
  .tab-t{min-width:6.6em}
}
@media (prefers-reduced-motion:reduce){
  .ai svg *,.mm svg *,.map-pin{animation:none!important}
  .wall::before{animation:none}
  .js:not(.rv-off) :is(.rv,.rv-fade,.rv-zoom):not(.in){opacity:1}
  :is(.rv,.rv-fade,.rv-zoom).in{animation:none}  .choice::before{animation:none}
  .stage,.stage.is-on{transition:none}
  .tab-bar{display:none}
  .map-box{transition:none}
  .dooplexx .w,.dooplexx.is-in .dx-box{animation:none}
  .js .dooplexx:not(.is-in) .dx-rev,.dx-rev{stroke-dashoffset:0;transition:none}

  .ticker{-webkit-mask-image:none;mask-image:none}
  .ticker-track{animation:none;width:auto;justify-content:center}
  .ticker ul{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .ticker ul[aria-hidden]{display:none}

  *{transition:none!important}
  .choice:hover .choice-media>*{transform:none}
}

/* Kontaktformular in Schritten (Thema, Anliegen, Kontakt, Danke). Links Titel und Schrittfolge, rechts der Schritt.
   Alle Schritte liegen in derselben Zelle uebereinander: gleiche Hoehe, die Knoepfe bleiben stehen, und die Schritte
   gleiten seitlich ein und aus (Richtung ueber --dx). Akzentfarbe und Hintergrund folgen dem gewaehlten Thema. */
.kf{--dx:48px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,88px);padding:clamp(28px,4.5vw,64px);scroll-margin-top:84px;transition:background-color .7s ease}
.kf h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.034em;font-weight:680}
.kf-steps{list-style:none;margin:clamp(28px,3.5vw,48px) 0 0;padding:0;display:grid;gap:14px}
.kf-steps li{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:560;color:var(--ink-2);transition:color .4s ease}
.kf-steps li::before{content:attr(data-n);display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);font-size:14px;font-weight:600;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.kf-steps li.on{color:var(--ink)}
.kf-steps li.on::before{border-color:var(--c,var(--ink));color:var(--c,var(--ink))}
.kf-steps li.done{color:var(--ink);cursor:pointer}
.kf-steps li.done::before{content:"";border-color:transparent;background:var(--c,var(--ink)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.kf-main{display:flex;flex-direction:column;min-width:0;overflow:hidden;margin:-8px;padding:8px} /* seitliches Gleiten bleibt in der Spalte; Platz fuer Fokusringe */
.kf-stage{flex:1}
.kf-step{min-width:0}
.kf-q{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:650;letter-spacing:-.022em;line-height:1.2;margin-bottom:clamp(18px,2vw,24px)}
.kf-done{display:none}
.js .kf-stage{display:grid}
.js .kf-step{grid-area:1/1;opacity:0;visibility:hidden;translate:var(--dx) 0;transition:opacity .3s ease,translate .55s var(--ease-rv),visibility 0s .55s}
.js .kf-step.out{translate:calc(var(--dx) * -1) 0}
.js .kf-step.on{opacity:1;visibility:visible;translate:none;transition:opacity .5s ease .12s,translate .75s var(--ease-rv) .08s,visibility 0s}
.js .kf-done{display:block}
.js .kf-step{display:flex;flex-direction:column}
.js .kf-f.grow{flex:1;grid-template-rows:auto 1fr}
.js .kf-f.grow textarea{height:100%} /* Nachrichtenfeld fuellt den Schritt bis zu den Knoepfen */
.js .kf-step.on .kf-in{animation:kf-in .7s var(--ease-rv) backwards;animation-delay:calc(.16s + var(--i,0) * .06s)}
@keyframes kf-in{from{opacity:0;translate:0 14px}}
.kf-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-radius:var(--r-sm)}
.kf-opt{position:relative;display:block;padding:20px 20px 20px 58px;border-radius:var(--r-sm);background:#fff;border:1.5px solid transparent;cursor:pointer;transition:border-color .25s ease,box-shadow .3s ease,translate .3s var(--ease)}
.kf-opt.k-x{--c:var(--ink)}
.kf-opt:hover{translate:0 -2px;box-shadow:0 12px 28px -18px rgba(0,0,0,.3)}
.kf-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kf-opt::before{content:"";position:absolute;left:20px;top:21px;width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in oklch,var(--c) 45%,var(--line));transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.kf-opt:has(:checked){border-color:var(--c)}
.kf-opt:has(:checked)::before{border-color:var(--c);background:var(--c);box-shadow:inset 0 0 0 4.5px #fff}
.kf-opt:has(:focus-visible){outline:2px solid var(--c);outline-offset:3px}
.kf-opt b{display:block;font-size:17px;font-weight:640;letter-spacing:-.01em}
.kf-opt small{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.kf-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.kf-f{display:grid;gap:8px;min-width:0}
.kf-f.wide{grid-column:1/-1}
.kf-f>span{font-size:14px;font-weight:580}
.kf-f em{font-style:normal;font-weight:450;color:var(--ink-2)}
.kf-f input,.kf-f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid transparent;border-radius:14px;padding:14px 16px;outline:0;transition:border-color .2s ease,box-shadow .25s ease}
.kf-f textarea{display:block;min-height:180px;resize:vertical;line-height:1.5}
.kf-f :is(input,textarea)::placeholder{color:#8e8e93}
.kf-f :is(input,textarea):focus{border-color:var(--c,var(--ink));box-shadow:0 0 0 4px color-mix(in oklch,var(--c,var(--ink)) 16%,transparent)}
.kf-check{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.kf-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.kf-check input:checked{border-color:transparent;background:var(--c,var(--ink)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.kf-check input:focus-visible{outline:2px solid var(--c,var(--ink));outline-offset:2px}
.kf-check a{color:var(--ink)}
.kf .bad{border-color:#c4321a;animation:kf-no .42s ease}
.kf-opts.bad{outline:1.5px solid #c4321a;outline-offset:6px}
@keyframes kf-no{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
.kf-nav{display:flex;align-items:center;gap:12px;margin-top:clamp(24px,3vw,32px);transition:opacity .4s ease,visibility 0s}
.kf-back{transition:opacity .3s ease,visibility 0s,border-color .2s}
.kf[data-step="1"] .kf-back,.kf[data-step="4"] .kf-nav{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.kf-next{margin-left:auto;min-width:152px;transition:background .2s,opacity .3s}
.kf-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--ease)}
.kf-next:hover svg{translate:3px 0}
.kf.busy .kf-next{opacity:.6;pointer-events:none}
.kf-msg{min-height:1.45em;margin-top:12px;font-size:14.5px;color:#c4321a}
.kf-ok{display:block;width:64px;height:64px;color:var(--c,var(--ink))}
.kf-ok circle,.kf-ok path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kf-ok circle{stroke-dasharray:176;stroke-dashoffset:176}
.kf-ok path{stroke-dasharray:40;stroke-dashoffset:40}
.kf-done.on .kf-ok circle{animation:kf-draw .9s var(--ease-rv) .25s forwards}
.kf-done.on .kf-ok path{animation:kf-draw .5s var(--ease-rv) .8s forwards}
@keyframes kf-draw{to{stroke-dashoffset:0}}
.kf-done h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:22px}
.kf-done p{margin-top:10px;color:var(--ink-2);font-size:17px;line-height:1.5;max-width:28em}
@media (max-width:760px){
  .kf{--dx:28px;grid-template-columns:1fr;gap:22px;padding:34px 22px 26px}
  .kf-steps{display:flex;gap:18px;margin-top:20px}
  .kf-steps li{gap:8px;font-size:14px}
  .kf-steps li::before{width:28px;height:28px;font-size:13px}
  .kf-opts,.kf-fields{grid-template-columns:1fr}
  .kf-opt{padding:16px 16px 16px 52px}
  .kf-opt::before{left:16px;top:17px}
  .kf-f textarea{min-height:150px}
  .kf-next{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){
  .js .kf-step,.js .kf-step.out,.js .kf-step.on{translate:none;transition:opacity .2s ease,visibility 0s}
  .js .kf-step.on .kf-in,.kf .bad{animation:none}
  .kf-ok circle,.kf-ok path{stroke-dashoffset:0}
}

/* Rechtliche Seiten und 404: ruhige Lesespalte unter dem zentrierten Titel */
.legal{padding-bottom:var(--sec)}
.legal h1,.prose{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* lange Rechtswoerter brechen sauber um */
.prose{max-width:44em;margin-inline:auto;font-size:17px;line-height:1.62}
.prose .lead-l{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2)}
.prose h2{font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:650;letter-spacing:-.02em;line-height:1.25;margin-top:2.1em}
.prose h3{font-size:17px;font-weight:650;margin-top:1.4em}
.prose p,.prose ul{margin-top:.7em}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:.35em}
.prose a{color:var(--ink);text-underline-offset:2px}
.nf .sec-head{max-width:760px}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.prices2+.it-cta{margin-top:var(--sec)}
.kf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Fangfeld fuer Spam-Programme, fuer Menschen unsichtbar */
/* IT-Service: so arbeiten wir. Drei Punkte unter dem Titel, ruhig wie die Belege-Zeile der Startseite (3 oder 1 Spalte, nie 2 plus 1) */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0 0 clamp(40px,5vw,64px);border-block:1px solid var(--line)}
.pillars li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px clamp(14px,1.8vw,24px)}
.pillars li+li{border-left:1px solid var(--line)}
.pillars svg{width:26px;height:26px;margin-bottom:4px;color:var(--c);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pillars strong{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pillars span{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:22em}
@media (max-width:760px){
  .pillars{grid-template-columns:1fr}
  .pillars li+li{border-left:0;border-top:1px solid var(--line)}
}