/* Sytora — Unterseiten. Dieselben Token wie die Landing (template2.html),
   auf das reduziert, was eine Textseite braucht. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/inter-800.woff2) format('woff2')}

:root{
  --stage:#F1F0EC; --stage-hi:#FAF9F6;
  --ink:#121316; --ink-2:#55575E; --ink-3:#8A8C94;
  --hair:rgba(18,19,22,.12); --hair-soft:rgba(18,19,22,.07);
  --accent:#5B3FE8; --dark:#0E0F12; --dark-2:#9EA0A8;
  --maxw:1280px; --gutter:clamp(1.25rem,4.6vw,4.5rem); --navh:72px;
  --r-pill:999px; --r-card:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fs-micro:.75rem; --fs-sm:.9375rem; --fs-body:1.0625rem;
  --fs-lead:clamp(1.0625rem,.45vw + .95rem,1.3125rem);
  --fs-h3:clamp(1.375rem,.8vw + 1.15rem,1.75rem);
  --fs-h2:clamp(2.0625rem,3.9vw,3.5rem);
}
@media (max-width:860px){ :root{ --navh:62px; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--stage);}
body{
  margin:0;background:var(--stage);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--stage);padding:.8rem 1.2rem;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;
}
.skip:focus{left:var(--gutter);top:.75rem;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

/* ---------- bar ---------- */
.nav{
  position:sticky;top:0;z-index:20;background:var(--stage);
  border-bottom:1px solid var(--hair-soft);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  min-height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;}
.brand svg{width:96px;height:auto;display:block;}
.nav-back{
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;
  padding-bottom:.25rem;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.nav-back:hover{background-size:100% 1.5px;}

/* ---------- page head ---------- */
main{display:block;}
/* padding-BLOCK, nicht die Kurzform: die würde das padding-inline von .wrap
   zurücksetzen und der Kopf stünde am Seitenrand, der Rest aber im Satzspiegel */
.head{padding-block:clamp(3rem,7vw,6.5rem) clamp(1.75rem,3vw,2.75rem);}
.label{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4;margin:0 0 1rem;
}
h1{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.03;color:var(--ink);margin:0;max-width:20ch;}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:52ch;margin:1.6rem 0 0;}
.h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.022em;line-height:1.2;color:var(--ink);margin:0;}

section{padding-bottom:clamp(2.5rem,5vw,4.5rem);}
section > h2{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.022em;line-height:1.2;margin:0 0 1.4rem;}

/* ---------- hairline rows (Studio-Kompetenzen, Ich-Form-Zeilen) ---------- */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.rows li{
  display:grid;grid-template-columns:minmax(11rem,16rem) 1fr;gap:.4rem 2.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--hair);
}
.rows strong,.rows .rk{font-weight:600;color:var(--ink);}
.rows span{color:var(--ink-2);}
@media (max-width:720px){ .rows li{grid-template-columns:1fr;gap:.3rem;} }

/* ---------- packages ---------- */
.pkgs{display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin:0;padding:0;list-style:none;}
.pkg{border-top:1px solid var(--hair);padding-top:1.35rem;}
.pkg .idx{font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;color:var(--ink-3);margin:0 0 .8rem;font-variant-numeric:tabular-nums;}
.pkg p{color:var(--ink-2);margin:.7rem 0 0;}
.pkg ul{list-style:none;margin:1.1rem 0 0;padding:0;}
.pkg ul li{padding:.5rem 0;border-bottom:1px solid var(--hair-soft);font-size:var(--fs-sm);color:var(--ink-2);}

/* ---------- flow ---------- */
.flow{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin:0;padding:0;list-style:none;}
.flow li{border-top:1px solid var(--hair);padding-top:1rem;}
.flow b{display:block;font-size:var(--fs-micro);letter-spacing:.145em;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.flow em{display:block;font-style:normal;font-weight:600;margin-top:.45rem;}
.flow p{margin:.35rem 0 0;color:var(--ink-2);font-size:var(--fs-sm);}

/* ---------- work ---------- */
.work{display:grid;gap:clamp(2rem,4vw,3.25rem);grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));margin:0;padding:0;list-style:none;}
.work figure{margin:0;}
.work img{border-radius:var(--r-card);background:var(--stage-hi);}
.work .badge{font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;text-transform:uppercase;color:var(--ink-3);margin:1.1rem 0 .5rem;}
.work p{color:var(--ink-2);margin:.6rem 0 0;}

/* ---------- portrait ---------- */
.portrait{display:grid;gap:clamp(1.5rem,3vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,20rem);align-items:start;}
.portrait img{border-radius:var(--r-card);}
.portrait figcaption{margin-top:.9rem;font-size:var(--fs-sm);}
.portrait .pname{font-weight:600;display:block;}
.portrait .prole{color:var(--ink-3);display:block;}
@media (max-width:820px){ .portrait{grid-template-columns:1fr;} }

/* ---------- the dark closing block (echo of the landing's contact panel) --- */
.dark{background:var(--dark);color:var(--stage);border-radius:var(--r-card);
  padding:clamp(2rem,5vw,4rem);margin-bottom:clamp(2.5rem,5vw,4.5rem);}
.dark h1,.dark .h3{color:var(--stage);}
.dark .label{color:var(--dark-2);}
.dark .lead{color:var(--dark-2);}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2.4rem;}
.mailto{
  color:var(--stage);text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  padding-bottom:.3rem;
  background-image:linear-gradient(#9C82FF,#9C82FF);
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .35s var(--ease);
}
.mailto:hover{color:#C7B7FF;}
.where{color:#8B8D95;font-size:var(--fs-sm);}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;padding:1.05rem 1.85rem;
  border-radius:var(--r-pill);border:1px solid transparent;
  /* ein <button> erbt die Schrift nicht von selbst (Runde 34: der Absenden-Knopf) */
  font-family:inherit;cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em;text-decoration:none;
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);
}
.btn-primary{background:var(--ink);color:var(--stage);}
.btn-primary:hover{background:#000;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn-light{background:var(--stage);color:var(--ink);}
.btn-light:hover{background:#fff;transform:translateY(-2px);}
.actions{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;margin-top:2rem;}
.linkline{
  display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:var(--fs-sm);
  color:var(--ink);text-decoration:none;padding-bottom:.3rem;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
}
.linkline:hover{background-size:100% 1.5px;}

/* ---------- legal prose ---------- */
.prose h2{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.022em;margin:2.4rem 0 .7rem;}
.prose p,.prose li{color:var(--ink-2);max-width:70ch;}
.prose ul{padding-left:1.15rem;}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;}
/* Runde 34, nebenbei gefunden: auf /kontakt steht die Adresstabelle NICHT in
   .prose, also standen Mail und Telefon dort im Browser-Blau. Dieselbe
   Schreibweise wie im Fliesstext, jetzt ueberall, wo eine Tabelle steht. */
.legal-table a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;}
.legal-table{margin:0;display:grid;gap:0;border-top:1px solid var(--hair);max-width:70ch;}
.legal-table > div{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.3rem 2rem;
  padding:.85rem 0;border-bottom:1px solid var(--hair);}
.legal-table dt{font-weight:600;color:var(--ink);}
.legal-table dd{margin:0;color:var(--ink-2);}
@media (max-width:640px){ .legal-table > div{grid-template-columns:1fr;} }

/* ---------- Kontaktformular (Runde 34) ----------
   Dieselbe Formsprache wie auf der Landing, nur auf hellem Grund: eine
   Mikro-Beschriftung über einer Haarlinie, keine Kästen, kein Schatten, kein
   neuer Radius. Hier darf die Seite scrollen, also stehen die Fehlermeldungen
   unter ihren Feldern statt in der Statuszeile. */
.cform{margin:0;max-width:60rem;}
.cf-grid{display:grid;gap:1.15rem 1.5rem;grid-template-columns:minmax(0,1fr);}
.cf-grid + .cf-grid{margin-top:1.15rem;}
.cf-field{display:flex;flex-direction:column;min-width:0;}
/* RUNDE 35 — die Beschriftungen stehen hier auf dem HELLEN Grund, und dort
   traegt --ink-3 (#8A8C94) auf #F1F0EC nur 2.94:1; verlangt sind 4.5:1.
   Der Ton der Seite wird dafuer nicht neu erfunden: --ink-2 (#55575E) ist der
   naechste Schritt derselben Ink-Leiter, steht in genau diesem Formular schon
   an der Einwilligungszeile und an der Statuszeile, und misst 6.33:1. Das
   dunkle Deck der Landing bleibt unberuehrt — dort steht dieselbe
   Beschriftung auf #0E0F12 und misst 5.79:1. */
.cf-field > label{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.4;margin-bottom:.4rem;
}
.cf-req{color:var(--accent);}
.cf-opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:.6875rem;color:var(--ink-2);}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;min-width:0;box-sizing:border-box;
  background:transparent;color:var(--ink);
  font-family:inherit;font-size:var(--fs-sm);line-height:1.5;
  border:0;border-bottom:1px solid rgba(18,19,22,.5);border-radius:0;
  padding:.45rem 0 .55rem;
  transition:border-color .35s var(--ease);
}
.cf-field textarea{resize:vertical;display:block;min-height:6.5rem;overscroll-behavior:contain;}
/* der Pfeil des Auswahlfeldes ist die Bedien-Marke des Feldes und faellt
   damit unter dieselbe Schwelle (3:1 fuer grafische Objekte). Mit --ink-3
   waren es 2.94:1; er geht denselben Schritt mit wie die Beschriftung. */
.cf-field select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:right 5px center,right 1px center;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:1.1rem;}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#6E7079;}
.cf-field input:hover,.cf-field select:hover,.cf-field textarea:hover,
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-bottom-color:var(--ink);}
.cf-field.is-bad input,.cf-field.is-bad select,.cf-field.is-bad textarea{border-bottom-color:#B23A3A;}
.cf-err{display:block;font-size:.8125rem;line-height:1.4;color:#9A2F2F;margin-top:.35rem;}
.cf-err:empty{display:none;}
.cf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:1.6rem;}
.cf-consent{display:flex;align-items:flex-start;gap:.65rem;flex:1 1 22rem;min-width:0;
  font-size:.875rem;line-height:1.5;color:var(--ink-2);}
.cf-consent label{cursor:pointer;}
.cf-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;}
.cf-consent input{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.15rem 0 0;accent-color:var(--accent);cursor:pointer;}
.cf-consent.is-bad{color:#9A2F2F;}
.cf-status{margin:0;font-size:.875rem;line-height:1.5;color:var(--ink-2);flex:0 1 auto;max-width:30rem;}
.cf-status a{color:inherit;text-decoration:underline;text-underline-offset:.2em;}
.cf-status.is-ok{color:var(--ink);}
.cf-status.is-bad{color:#9A2F2F;}
.cform button[disabled]{opacity:.55;cursor:progress;}
@media (min-width:761px){
  .cf-row-a{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- foot ---------- */
.foot{border-top:1px solid var(--hair);padding:2rem 0 3rem;margin-top:1rem;}
/* RUNDE 35 — dieselbe Rechnung wie beim Formular: die Zeile unter dem
   Schriftzug («Webdesign und digitale Entwicklung aus Uster bei Zürich.»)
   und die Jahreszeile standen in --ink-3 auf hellem Grund, 2.94:1. Sie gehen
   auf --ink-2, 6.33:1. Damit die beiden Links darin weiterhin eine Stufe
   ueber dem Fliesstext stehen — genau das Verhaeltnis, das die Fusszeile der
   Landing auf ihrem dunklen Grund hat (Text 4.54:1, Links 11.82:1) — ruecken
   sie auf --ink nach, und der Hover, der vorher der Farbschritt war,
   uebernimmt die Unterstreichung, die dieses Stylesheet an seinen anderen
   Links ohnehin fuehrt (.cf-consent a, .cf-status a). */
.foot-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;font-size:var(--fs-sm);color:var(--ink-2);}
.foot svg{width:82px;height:auto;color:var(--ink);}
.foot a{color:var(--ink);text-decoration:none;}
.foot a:hover{text-decoration:underline;text-underline-offset:.2em;}
.foot .spacer{margin-left:auto;}
@media (max-width:640px){ .foot .spacer{margin-left:0;} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  .btn:hover,.btn-primary:hover,.btn-ghost:hover,.btn-light:hover{transform:none;}
}