/* 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;flex:0 0 auto;}
/* R57 (24.09.2026): the mark in the bar is the deck's mark, mark and wordmark
   in one inline SVG (index.html), at the deck's sizes: 30 px tall on a wide
   screen, 27 px from 860 px down. The only R57 rule that reaches a phone. */
.brand svg{width:95.7px;height:30px;display:block;}
@media (max-width:860px){ .brand svg{width:86.1px;height:27px;} }
/* the moon walks its orbit once every fourteen seconds, about the centre the
   brand file turns it about, exactly as in the deck's bar */
.brand-moon{transform-origin:16px 16px;animation:brandOrbit 14s linear infinite;}
@keyframes brandOrbit{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .brand-moon{animation:none;} }
.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;}

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;}

/* ---------- 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);}
.actions{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;margin-top:2rem;}
/* ---------- 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: Mail und Telefon einer Adresstabelle stehen nicht im Browser-Blau,
   sondern in der Schreibweise des Fliesstexts. */
.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;} }

/* ---------- 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 (.prose a, .legal-table a). */
.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;}

@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{transform:none;}
}

/* =========================================================================
   ===== R40 MOBILE (05.09.2026) =====
   THE PHONE ROUND FOR THE SEVEN SUB PAGES, IN ONE BLOCK.
   Everything this round changes stands here, at the end of the sheet, so
   that every rule of it is stated after the rule it has to win against and
   the block can be lifted to r4-src as one piece. One thing is new at EVERY
   width: the bar's menu markup (which is display:none above 860 px, so it
   costs the wide bar nothing). The rest stands inside @media
   (max-width:760px) and never reaches a desktop. (R58: the closing block of
   studio, angebot, arbeiten and team went with those pages.)
   ========================================================================= */

/* ---------- the bar, right hand side ----------
   The mark stays on the left. Everything that can be pressed stands in one
   row on the right: on a phone the call to action and the burger, on a
   desktop the way back to the landing and, since round 55, the same pill
   «Projekt anfragen» the landing's bar carries, right outermost. */
.nav-actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;}
.btn-sm{padding:.72rem 1.35rem;}
/* R55 (owner, 23.09.2026): the pill stands at every width. The long name
   above 760, the short one on a phone, exactly as on the landing. */
.cta-short{display:none;}
@media (min-width:761px){ .nav-actions{gap:1.5rem;} }
.nav-toggle{
  display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--hair);border-radius:var(--r-pill);
  cursor:pointer;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.nav-toggle:hover{border-color:var(--ink);}
/* :not(.sr-only) on every one of these, and it is not cosmetic. The button
   holds two spans: the bar that is drawn, and the name of the button for a
   reader who cannot see it. A bare «.nav-toggle span» is a class plus an
   element and therefore stronger than «.sr-only», so the label was given the
   bar's own box and its two pseudo elements and stood in the button as a
   SECOND burger, sixteen pixels wide, next to the first. Measured here at
   393 px: two spans at x 334 and x 350, both 16 by 1.5. (The same two
   selectors stand in index.html, where the same thing happens; that file
   belongs to A1 this round and is reported rather than touched.) */
.nav-toggle span:not(.sr-only){position:relative;display:block;width:17px;height:2px;background:currentColor;
  transition:transform .35s var(--ease),background-color .2s linear;}
.nav-toggle span:not(.sr-only)::before,.nav-toggle span:not(.sr-only)::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor;
  transition:transform .35s var(--ease);
}
.nav-toggle span:not(.sr-only)::before{top:-6px;}
.nav-toggle span:not(.sr-only)::after{top:6px;}
.menu-open .nav-toggle span:not(.sr-only){background:transparent;}
.menu-open .nav-toggle span:not(.sr-only)::before{transform:translateY(6px) rotate(45deg);}
.menu-open .nav-toggle span:not(.sr-only)::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- the panel ----------
   Taken from the landing, because it is the same menu and has to behave and
   look identically. Two things about it are mechanics rather than styling:
   it carries the SAME ground as the page, so the colour the phone's top edge
   is read at while the menu is open is the colour it was read at before it
   opened; and while it is shut it is display:none rather than merely slid
   away, because a panel that is only translated out of sight is still read
   by Safari and the colour it was last read at is the one that stays.
   It starts one bar height plus a line below the top, and the bar stands
   above it, so the mark is never covered. */
.menu{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:99;
  background:var(--stage);border-bottom:1px solid var(--hair-soft);
  padding:calc(var(--navh) + 1.25rem) var(--gutter) 2rem;
  transform:translateY(-101%);transition:transform .5s var(--ease);
}
.menu-render .menu{display:block;}
.menu-open .menu{transform:translateY(0);}
.menu .m-link{
  display:block;padding:1.05rem .25rem;
  font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--hair-soft);
}
/* the page the reader is standing on is named in the menu too */
.menu .m-link[aria-current]{
  color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:.28em;
}
.menu .btn{margin-top:1.5rem;width:100%;justify-content:center;padding-block:1.1rem;}
/* The scrim covers the whole screen, which means it touches both edges. Its
   dim therefore lives on a CHILD: an absolutely positioned box is not read as
   an edge colour, a fixed one is. The scrim itself has no colour of its own. */
.menu-scrim{
  position:fixed;inset:0;z-index:98;background-color:transparent;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.menu-scrim::before{
  content:"";position:absolute;inset:0;background:rgba(14,15,18,.35);
}
.menu-open .menu-scrim{opacity:1;visibility:visible;}
@media (min-width:761px){ .menu,.menu-scrim{display:none;} }

/* FIX ROUND (08.09.2026): 760 rather than 860. The spec set this boundary to
   the landing's own burger boundary, but the owner's rule for this round is
   that NOTHING above 760 px moves, and at 820 px (an iPad held upright) these
   seven pages showed a pill and a burger where r36 shows the way back to the
   landing. The landing keeps its own 860, which is r36 and older than this
   round. The noscript fassung in the seven files carries the same 760. */
@media (max-width:760px){
  /* the way back to the landing is now one of five ways in the panel */
  .nav-back{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-cta{display:inline-flex;padding:.62rem 1rem;font-size:.9375rem;min-height:40px;}
  .cta-long{display:none;}
  .cta-short{display:inline;}
  .nav-actions{gap:.5rem;}
  /* mark, pill and burger have to fit into 280 px of usable width at 320 */
  .nav-in{gap:1rem;}
  /* the bar stands ABOVE the panel, so the mark stays readable while the
     menu is open and the burger stays the thing that closes it again */
  .nav{z-index:100;}
}

/* ---------- an anchor lands below the bar, not under it ----------
   The bar is sticky at every width, so this is as true for the skip link on
   a desktop as it is for the way from the pill to the form on a phone. It
   moves no pixel of any page at rest. */
html{scroll-padding-top:calc(var(--navh) + 8px);}

/* =========================== the phone ================================ */
@media (max-width:760px){
  /* ---- 1 + 2: the tokens ---------------------------------------------
     --ink-3 read 2.94:1 on --stage, which is under the 3:1 floor for even
     large type; this tone reads 4.59:1 on --stage and 4.97:1 on --stage-hi.
     The micro label steps from twelve to thirteen pixels. */
  :root{ --ink-3:#6A6C74; --fs-micro:.8125rem; }

  /* one long compound word at headline size is wider than a 280 px column,
     and the page then scrolls sideways for two pixels of «zusammenarbeiten»
     (studio, 322 px) or thirty seven of «Datenschutzerklärung» (357 px);
     both measured in the r36 reference as well, so both are older than this
     round. Everything falls back to breaking a word only when it genuinely
     does not fit, which no line of running text on these pages does.

     FIX ROUND (08.09.2026): the headline is NOT hyphenated any more.
     hyphens:auto set a hyphen wherever German allows one, which gave
     «Indi-viduelle», «zusammenar-beiten» and «Datenschutzerklä-rung» at 320
     and at 360 px, while the same sentences in the landing's deck run without
     a single break. A title carries the page, and a break inside a word at
     that size reads as carelessness rather than as typesetting. The overflow
     is caught instead: a title may break anywhere it has to, but only where it
     has to, and without drawing a hyphen. The line height comes to 1.06, the
     value the landing's own headlines carry on the phone. */
  body{overflow-wrap:break-word;}
  h1,h2{overflow-wrap:anywhere;}
  /* And the title is given a size the narrowest column can actually hold, so
     that nothing has to be broken in the first place. Measured, at the 33 px
     the token holds below 846 px: the longest word of these seven titles is
     «Datenschutzerklärung» at 337 px, then «zusammenarbeiten.» at 303, against
     a column of 280 px at 320 and 320 px at 360. 8.4vw is the size at which
     both fit: 26.9 px at 320, 30.2 px at 360, and from 393 px up the cap is
     the token again and nothing changes. overflow-wrap above stays as the net
     under it. */
  h1{line-height:1.06;font-size:min(var(--fs-h2),8.4vw);}

  /* ---- 3: sixteen pixels wherever something is pressed ---------------
     every button carries sixteen pixels and a thumb's height. The bar's pill
     is the one exception and keeps the size it was measured at: at 320 px
     the bar holds mark, pill and burger and nothing more. */
  .btn:not(.nav-cta){font-size:1rem;min-height:48px;}
  /* a long label wrapped into two lines and stood ragged beside a page of
     left aligned text.
     FIX ROUND (08.09.2026): display:block rather than the button's own
     inline-flex. As a flex row the arrow is a second item, and a wrapped
     button left it hanging alone at the right edge, halfway between the two
     lines; in a block it is what it reads as, the last character of the last
     line. The gap of the flex row becomes the ordinary word space that
     already stands in the markup. */
  .actions .btn{display:block;width:100%;text-align:center;}
  .actions .btn span[aria-hidden]{display:inline;margin-left:.15em;}
  /* ---- 4: touch targets ----------------------------------------------
     Every text link that is a way somewhere is at least 44 px tall. The
     underline these links paint as a background gradient at the foot of the
     box would stand ten pixels under the text once the box is 44 px, so on
     the phone the line is a real text decoration and follows the text. */
  .foot a{display:inline-flex;align-items:center;min-height:44px;}
  /* ---- 5: touch feedback instead of hover -----------------------------
     The blue flash a browser paints on a tapped link is the one colour on
     this page nobody chose. */
  a,button,[role=button],summary,label{
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
}
/* a hover state that arrives with the tap and stays after it is a state that
   reads as broken, so every :hover of this sheet is put back to its rest
   value where a pointer cannot hover */
@media (max-width:760px) and (hover:none){
  .btn-primary:hover{background:var(--ink);transform:none;}
  .btn-ghost:hover{border-color:var(--hair);transform:none;}
  .nav-toggle:hover{border-color:var(--hair);}
  .nav-back:hover{background-size:0% 1.5px;}
  .foot a:hover{text-decoration:none;}
  .prose a:hover,.legal-table a:hover{color:var(--ink);}
}
@media (max-width:760px){
  /* stated after the rest values on purpose, so a box that is :hover and
     :active in the same instant shows the press */
  .btn:active{transform:scale(.985);}
  .btn-primary:active{background:#000;}
  .btn-ghost:active{background:var(--stage-hi);}
  .m-link:active{background:var(--stage-hi);}
  .foot a:active{opacity:.7;}
}
/* ===== end R40 MOBILE ===== */

/* ===== R52 SEO (22.09.2026) =====
   1. The breadcrumb above the h1. It takes the place of the old kicker, in
      the kicker's type, so the page name is not said twice above the h1.
      Darker than the kicker (--ink-2): the first part is a link and has to
      read at 4.5:1. The separator is drawn, not text, and silent for screen
      readers.
   2. (The footer rows of R52 were replaced by the column footer of R59.) */
.crumbs{margin:0 0 1rem;}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6em;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;
  text-transform:uppercase;line-height:1.4;color:var(--ink-2);
}
.crumbs li{display:inline-flex;align-items:center;gap:.6em;}
/* R54: the separator hangs at the END of a crumb, not at the start of the
   next one. A crumb trail that breaks onto a second line (a long page name on
   a phone) then ends its first line with the separator instead of opening the
   second line with it. Same gaps as before: .6em inside the item, .6em
   between the items. */
.crumbs li:not(:last-child)::after{content:"\203A";content:"\203A" / "";letter-spacing:0;color:var(--ink-3);}
.crumbs a{color:inherit;text-decoration:none;}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;}

@media (max-width:760px){
  /* a finger-sized first crumb that moves no line: the hit area grows by a
     transparent layer on the link, the crumb keeps the kicker's line box */
  .crumbs a{position:relative;}
  .crumbs a::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;margin-top:-22px;}
}
/* ===== end R52 SEO ===== */

/* ===== R54 (23.09.2026): service pages, footer map, button wrap =====
   1. (The footer rows for services and regions were replaced by the column
      footer of R59; .link-label stays, the columns and the 404 page use it.)
   2. The 404 page lists the services under its buttons, same label, links
      in the underline of the service pages.
   3. A long button on a phone. The closing block's button takes the full
      width there and the label wraps once it is longer than the box
      («Kostenlose Ersteinschätzung erhalten»). Three things keep that
      clean: the lines are balanced, so the arrow never stands alone on the
      last line; the side padding is smaller, so a label takes two lines
      where it took three (375 px); and the radius is the pill's own, half
      the height of a one-line button, so a one-line button stays the pill
      it was and a two-line one keeps the same round corners instead of
      turning into an oval. */
.link-label{
  margin:0;font-size:var(--fs-micro);font-weight:600;letter-spacing:.145em;
  text-transform:uppercase;line-height:1.4;color:var(--ink-2);
}
.page-links{margin-top:clamp(2.25rem,4vw,3rem);}
.page-links ul{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;max-width:52rem;}
.page-links a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.28em;
  transition:text-decoration-color .35s var(--ease);
}
.page-links a:hover{text-decoration-color:var(--ink);}
@media (max-width:760px){
  .page-links ul{gap:0 1.25rem;margin-top:.4rem;}
  .page-links a{display:inline-flex;align-items:center;min-height:44px;}
  .actions .btn{padding-inline:1.1rem;border-radius:calc(.8em + 1.05rem + 1px);text-wrap:balance;}
}
@media (max-width:760px) and (hover:none){
  .page-links a:hover{text-decoration-color:var(--accent);}
}
@media (max-width:760px){
  .page-links a:active{opacity:.7;}
}
/* ===== end R54 ===== */

/* ===== R54 fix round (23.09.2026) =====
   1.-2. (Legal group and service rows of the footer: replaced by the column
      footer of R59.)
   3. (R58: the six steps of /angebot went with that page.)
   4. The menu panel takes the focus itself when it was opened by a tap or a
      click (pages.js), so WebKit draws no ring around «Studio» for a finger.
      Opened with the keyboard, the first link takes the focus as before. */
.menu:focus,.menu:focus-visible{outline:none;}
/* ===== end R54 fix round ===== */

/* ===== R56 (23.09.2026) =====
   1. While the panel is down the pill «Anfragen» stands down: the panel
      carries «Projekt anfragen» as its last line, and two of the same one
      above the other is one too many. Hidden, not removed, so the burger
      does not move by a pixel; back as the panel slides away.
   2. Words inside a button that belong together: «Kostenlose
      Ersteinschätzung erhalten» put «Kostenlose» alone on the first line. .nw keeps a word whole everywhere; .nw-wide keeps a pair of
      words together from 360 px up, where it fits the pill (measured: the
      pair is 223 px, the pill has 229 px inside at 360 px and more above);
      below that the button wraps as it did.
   3. The iPhone's bottom edge while the panel is down. The scrim dims the
      page, and the address bar showed the undimmed ground under it, a light
      bar with a hard edge below a grey page (iPhone 17, /seo). Safari takes
      the tone from the body's background COLOUR and never from a background
      image (RECHERCHE-IOS26-LEISTEN.md), so the colour carries the edge tone
      and a flat image of the ground keeps the page exactly as it was. The
      tone is the ground seen through the scrim: 0.65 of #F1F0EC plus 0.35 of
      #0E0F12. iPhone only (html.ios, set by pages.js); pages.js hands the
      edge a pixel of scroll on open and close, the one thing it is re-read
      on. R56 fix round: Safari draws that edge about a tenth darker than the
      tone it reads (iPhone 17 simulator: 162 drawn as 144-146, 180 as 160,
      182 as 164, 200 as 179, on /seo, /arbeiten and the landing alike), so
      the token is set to what draws as the dimmed ground: #B5B4B3, not the
      computed #A2A1A0. What stays is Safari's own: the bar zone is opaque
      while a fixed layer stands on the edge, so the text under it is cut
      off at the bar, not dimmed through it.
   4. Words in a button: the whole label is ONE span (R56 fix round). .btn is
      a flex container with a gap, and a bare .nw span beside loose text made
      three flex items, so the gap (0.6em) stood in for the word spaces around
      it from 761 px up. */
.nav-actions .nav-cta{
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),
             opacity .3s var(--ease),visibility .3s linear;
}
html.menu-open .nav .nav-actions .nav-cta{opacity:0;visibility:hidden;pointer-events:none;}
.nw{white-space:nowrap;}
@media (min-width:360px){ .nw-wide{white-space:nowrap;} }
html.ios{--bar-tint:var(--stage);}
html.ios.menu-render{--bar-tint:#B5B4B3;}
html.ios,
html.ios body{
  background-color:var(--bar-tint);
  background-image:linear-gradient(var(--stage),var(--stage));
  transition:none;
}
/* ===== end R56 ===== */

/* ===== R57 (24.09.2026): the sub pages at the scale of the deck =====
   Owner, 24.09.2026: the sub pages read like a linked document next to the
   landing, in type size, bar and rhythm. Spec: qa/r57-unterseiten/SPEC.md
   (agreed with Codex). Everything below stands behind ONE gate, the
   complement of the phone decision of R44 (max-width:760px, or a finger
   on a viewport as short as a phone held sideways): a wide window, a tablet
   upright or sideways. A phone renders R56 to the pixel; the one R57 change
   it gets is the mark in the bar (above, at .brand svg).
   The deck draws its pages at a factor with CSS zoom. These pages do not:
   every size here is a rem clamp, so the browser's own zoom and iPad Safari
   (RECHERCHE-IPAD-ZOOM-TEXT.md) scale the text like any other page.
   Values in one place:
     column   max(gutter, (100% - 1136px) / 2, 27vw - 180px,
                  min(50% - min(568px, 39.444vw, 56.8vh), 39vw - 312px))
              below 804 -> gutter, 820 -> 41, 1024 -> 96, 1280x800 -> 186,
              1440x900 -> 209, 1470x832 -> 261, 1512x860 -> 268,
              1920 -> 392, 2560 -> 712 (1136 px of text, the deck's own
              column at k = 1).
              R57 fix round 1: the fourth term is the deck's own edge,
              W/2 - 568 k with k = min(1, W/1440, H/1000), so on a short
              laptop window (MacBook Air 1470x832) the words stand on the
              edge of the deck's pages on the same screen. 39vw - 312px caps
              it: every window up to 1100 px and every tall window keep the
              edge they had.
     h1       clamp(2.0625rem, min(.942rem + 2.356vw, .5rem + 4.8vh), 3.5rem)
              761 -> 33, 1440x900 -> 49, 1470x832 -> 47.9, 1280x800 -> 45.2,
              56 from 1737 on a tall window. The height term follows the
              deck's k on a short window (fix round 1), the rem terms keep it
              growing with the browser's zoom.
     h2       clamp(1.53rem, .725rem + 1.694vw, 2.625rem)   761 -> 24.5, 1440 -> 36, 42 from 1795
     lead     clamp(1.1625rem, 1.105rem + .121vw, 1.25rem)  761 -> 18.6, 1440 -> 19.4, 20 from 1920
     text     17 px / 1.6, cards 15 to 16 px / 1.55, labels 13 px at 761 to 12 px from 1101
     rhythm   clamp(2.5rem, 9.13vw - 1.97rem, 6.5rem)       761 -> 40, 1440 -> 100
   Stepless (owner, 24.09.2026: every width, every device, every system
   scaling): h1, h2, lead, running text, labels, the edge and the rhythm run
   as straight lines from the value the phone layout shows at 760 px to the
   deck's value at 1440 px, so dragging a window across 761 px changes none
   of them. Blocks that change their form at 761 px (rows into cards)
   change their roles with it. Every type clamp carries a rem
   term, so browser zoom scales the text as well; --r57-pad and --r57-gap are
   room, not type, and run on vw alone between their bounds. */
@media (min-width:761px) and (pointer:fine), (min-width:761px) and (hover:hover), (min-width:761px) and (min-height:521px){
  :root{
    --r57-col:max(var(--gutter), calc((100% - 1136px) / 2), calc(27vw - 180px), min(calc(50% - min(568px, 39.444vw, 56.8vh)), calc(39vw - 312px)));
    --r57-sec:clamp(2.5rem,9.13vw - 1.97rem,6.5rem);
    --r57-lead:clamp(1.1625rem,1.105rem + .121vw,1.25rem);
    --r57-h2:clamp(1.53rem,.725rem + 1.694vw,2.625rem);
    /* labels and crumbs: 13 px where the phone leaves off, 12 px (the deck's
       size) from 1101 px */
    --fs-micro:max(.75rem,calc(.9525rem - .294vw));
    --r57-pad:clamp(1.3rem,1.8vw,1.6rem);
    --r57-gap:clamp(.75rem,1.1vw,1rem);
    --ease-out:cubic-bezier(.16,1,.3,1);
    /* R57 fix round 1: the third ink step carries 4.5:1 on the light ground
       here as well. #6A6C74 is the phone's tone since R40 (4.59:1 on
       --stage, 4.97:1 on --stage-hi); the deck's #8A8C94 read 2.94:1 on
       «Fehler 404», «Demoprojekt» and «Gründer und Inhaber», and the tone
       no longer changes at 761 px. */
    --ink-3:#6A6C74;
  }

  /* ---------- 1. the bar, as the deck's bar ----------
     The deck's glass tone at every scroll position; the soft hairline under
     it only once the page has moved (pages.js sets .is-scrolled). Without
     script the tone stands alone, which reads as a clean edge. */
  .nav{
    background:rgba(241,240,236,.82);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-bottom-color:transparent;
    transition:border-color .4s var(--ease);
  }
  .nav.is-scrolled{border-bottom-color:var(--hair-soft);}
  /* «Zur Startseite» is one of the deck's tabs: 15 px, 500, ink-2, a pill
     of room around it and the accent line drawn from the left on hover. The
     pill «Projekt anfragen» keeps its button and stands where the deck's
     does: two rem to the right of the last tab. */
  .nav-actions{gap:.6rem;}
  .nav-back{
    position:relative;padding:.6rem 1.05rem;border-radius:var(--r-pill);
    font-size:var(--fs-sm);font-weight:500;line-height:1.6;color:var(--ink-2);
    background:none;transition:color .3s var(--ease);
  }
  .nav-back::after{
    content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:.35rem;
    height:1.5px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
  }
  .nav-back:hover{color:var(--ink);}
  .nav-back:hover::after{transform:scaleX(1);}
  .nav-cta{margin-left:1.4rem;}
  /* ---------- 2. the column ----------
     Bar and footer stay in the 1280 frame, as the deck's bar does; the
     text stands one step further in, where the deck's pages start. */
  main .wrap{max-width:none;padding-inline:var(--r57-col);}

  /* ---------- 3. type roles ----------
     Weight, tracking, line height and measure of the h1 are the sheet's own
     (h1 at the top); only the size and the balanced lines are set here. */
  main h1{font-size:clamp(2.0625rem,min(.942rem + 2.356vw,.5rem + 4.8vh),3.5rem);text-wrap:balance;}
  main section > h2{
    font-size:var(--r57-h2);font-weight:700;letter-spacing:-.03em;line-height:1.1;
    margin:0 0 clamp(1.4rem,.45rem + 2vw,2.25rem);max-width:26ch;text-wrap:balance;
  }
  main .lead{font-size:var(--r57-lead);}

  /* ---------- 4. rhythm ----------
     Space between sections instead of a rule under every heading. */
  main section{padding-bottom:var(--r57-sec);}
  .head{padding-bottom:clamp(1.75rem,10.6vw - 3.29rem,6.5rem);}
  /* datenschutz opens with a sentence, not with a section: the sentence
     stays with its title, at the spacing of R56 (fix round 1; 117 px under
     the h1 at 1440 made it read as part of clause 1). /impressum opens with
     a heading and keeps the room of the head. */
  .head:has(+ .prose > p:first-child){padding-bottom:clamp(1.75rem,3vw,2.75rem);}
  .head .lead{max-width:62ch;}
  .head .actions{margin-top:2.4rem;}

  /* ---------- 5. the blocks of the other sub pages ----------
     (R58: studio, team, angebot, arbeiten and kontakt are sections of the
     landing now, and their blocks went with them.) The address table of the
     legal pages carries the running text's size. */
  main .legal-table dt,main .legal-table dd{font-size:var(--fs-body);}

  /* impressum, datenschutz: prose stays prose, with headings one step under
     the section title, because a legal text has a dozen of them. The measure
     is 38 rem, about 70 characters of Inter (70ch came to about 88; fix
     round 1). The heading runs from the phone's 24.5 px at 761 px to 26 px
     at 1440 px (it dropped to 22 px at 761 before). */
  .prose h2{font-size:clamp(1.53rem,1.4235rem + .2239vw,1.625rem);letter-spacing:-.022em;line-height:1.25;margin:2.8rem 0 .8rem;max-width:40ch;}
  .prose > h2:first-child{margin-top:0;}
  .prose p,.prose li{font-size:var(--fs-body);line-height:1.65;max-width:38rem;}

  /* 404 */
  .head .page-links{margin-top:clamp(2.5rem,4vw,3.25rem);}

  /* ---------- 6. scroll reveals (pages.js) ----------
     Only what stands below the first screen at load time gets .rv, only
     with motion allowed, and only with script: without it nothing is ever
     hidden. An animation rather than a transition, on translate rather than
     transform, so the cards' own hover lift is never overruled by it.
     Screen only: print shows everything (fix round 1; a reveal that had not
     come in yet left sections blank on paper). pages.js takes .rv off again
     once an element has risen, so a later change of the gate or of the
     motion setting cannot play it a second time. */
  @media screen and (prefers-reduced-motion:no-preference){
    html.r57-rv .rv{opacity:0;}
    html.r57-rv .rv.rv-in{animation:r57rise .65s var(--ease-out) var(--rv-d,0ms) both;}
  }
}
@keyframes r57rise{from{opacity:0;translate:0 14px;}to{opacity:1;translate:none;}}

/* the wide arrangement of the head: from 1101 px the deck's section head,
   crumbs and title on the left, the text on the right. A short lead stands
   at the foot of the title, as in the deck; the long core passage of the
   service pages starts at the title's top edge, so the title never waits
   in empty room beside it (service.css). Between 761 and 1100 px the head
   is one column. */
@media (min-width:1101px) and (pointer:fine), (min-width:1101px) and (hover:hover), (min-width:1101px) and (min-height:521px){
  .head{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(2rem,5vw,5rem);align-items:start;
  }
  .head > *{grid-column:1 / -1;}
  .head > .crumbs,.head > .label{grid-column:1;}
  .head > h1{grid-column:1;grid-row:2;max-width:17ch;}
  .head > .lead{grid-column:2;grid-row:2;align-self:end;margin:0;max-width:40ch;}
}
/* ===== end R57 ===== */

/* ===== R58 (24.09.2026): the sub pages follow the deck's new reading size =====
   The deck of a desktop is drawn in a box 880 high now (it was 1000), with
   18 px running text, 20 px lead and 22 px card titles (index.html, R58).
   The sub pages keep the R57 rule, the same edge and the same type roles as
   the landing on the same screen, so their deck terms follow:
     k        min(1, W/1440, H/880)          (was H/1000)
     edge     W/2 - 568 k, below it the R57 ramp from the phone's gutter at
              761 px, above it the 1136 px column: 1470x832 -> 198,
              1440x900 -> 152, 1280x720 -> 166, 1920x1080 -> 392
     h1       56 k, from the phone's 33 px at 761 px on a straight line
     text     18 k, never under the 17 px the phone and the R57 pages had:
              1470x832 -> 17, from 1440x880 -> 18
   Desktop only: a finger (the tablet decision of R44/R50, coarse pointer
   without hover) keeps R57 to the pixel, as the deck keeps its box of 1000
   on a tablet. */
@media (min-width:761px) and (pointer:fine), (min-width:761px) and (hover:hover){
  :root{
    --r57-col:max(var(--gutter), calc((100% - 1136px) / 2), min(calc(50% - min(568px, 39.444vw, 64.545vh)), calc(27vw - 180px)));
    --fs-body:max(1.0625rem, min(1.125rem, 1.25vw, 2.045vh));
    /* third level: 22 k, from 17 px at the phone's edge */
    --r58-h3:max(1.0625rem, min(1.375rem, 1.528vw, 2.5vh));
  }
  main h1{font-size:clamp(2.0625rem,min(.451rem + 3.387vw,.2rem + 6vh),3.5rem);}
}
/* ===== end R58 ===== */

/* ===== R57 fix round 1 (24.09.2026): touch tablets =====
   1. A tablet has no hover. The rule that puts every :hover back to its rest
      value (R40) stands up to 760 px only, so on an iPad a tapped button,
      the mail link of the dark panel and «Zur Startseite» kept their hover
      look after the tap. Same gate as the R57 block for a finger (min-height
      521 leaves the phone held sideways to R40), hover:none leaves every
      mouse alone; stated after the R57 hover rules, so it wins by order.
   2. Finger-sized hit areas (44 px) on a touch tablet. The same gate with
      pointer:coarse: the phone and the phone held sideways stay untouched,
      and so does every mouse desktop. Only the footer and the 404 link list
      gain row height; everything else grows its hit area by a transparent
      layer, or by padding a negative margin takes back. */
@media (min-width:761px) and (min-height:521px) and (hover:none){
  .btn-primary:hover{background:var(--ink);transform:none;}
  .btn-ghost:hover{border-color:var(--hair);transform:none;}
  .nav-back:hover{color:var(--ink-2);}
  .nav-back:hover::after{transform:scaleX(0);}
  .crumbs a:hover{color:inherit;text-decoration:none;}
  .page-links a:hover{text-decoration-color:var(--accent);}
  .foot a:hover{text-decoration:none;}
}
@media (min-width:761px) and (min-height:521px) and (pointer:coarse){
  .brand{min-height:44px;}
  /* z-index: the sticky h1 of the service pages is positioned and comes
     later, so it took the last 2 px of the crumb's 44 px; the layer is
     transparent, and while the h1 sticks the crumb has scrolled away */
  .crumbs a{position:relative;z-index:1;}
  .crumbs a::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;margin-top:-22px;}
  .foot a{display:inline-flex;align-items:center;min-height:44px;}
  .foot-col ul,.foot-bottom{row-gap:0;}
  .page-links ul{row-gap:0;}
  .page-links a{display:inline-flex;align-items:center;min-height:44px;}
  .svc-scope dt a{display:inline-block;padding-block:.7rem;margin-block:-.7rem;}
}
/* ===== end R57 fix round 1 ===== */

/* ===== R59 (28.09.2026): the footer in columns =====
   Owner: the page links of the footer looked chaotic. Four rows from four
   rounds (R52, R54, R54 fix, R57) ran their links as lines of text of unequal
   length that wrapped wherever they ran out of room; on a phone «Kontakt»
   stood alone on a line. Now one grid: the brand with its line and the
   address, then three link columns under a label each (Übersicht,
   Leistungen, Region), one link per line, all columns on one top edge; the
   eight services stand in two columns of four. Impressum, Datenschutz and
   the year close the footer on a row of their own, under a hairline that
   runs the width of the text column only (drawn as a background, so the
   gutter stays clear). The type stays the footer's own: --fs-sm, line and
   address in --ink-2 (6.33:1), links in --ink, labels as the breadcrumb.
   Tablet: two columns (brand and Übersicht, then Leistungen and Region).
   Phone: the brand across, Übersicht and Region side by side, the services
   under them in one column; links and address in 44 px rows (R40). */
.foot{color:var(--ink-2);font-size:var(--fs-sm);}
.foot-grid,.foot-bottom{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr);
  gap:2.25rem clamp(1.5rem,3vw,3rem);align-items:start;
}
.foot-line{margin:.9rem 0 0;max-width:26ch;}
.foot-addr{margin:.9rem 0 0;font-style:normal;line-height:1.75;}
.foot-col .link-label{margin-bottom:.85rem;}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;row-gap:.6rem;}
.foot-col-svc ul{grid-template-columns:repeat(2,max-content);column-gap:clamp(1.5rem,3vw,2.75rem);}
.foot-bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;
  margin-top:2.25rem;padding-top:1.25rem;
  background:linear-gradient(var(--hair),var(--hair)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.foot-bottom span{margin-left:auto;}
@media (min-width:761px) and (max-width:1023px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:1.75rem 1.25rem;}
  .foot-brand,.foot-col-svc{grid-column:1 / -1;}
  /* one column: in half the width «GEO und KI-Sichtbarkeit» broke onto a
     second line and made its row taller than the others */
  .foot-col-svc ul{grid-template-columns:minmax(0,1fr);}
  /* the address in the links' 44 px rhythm, so its four lines stand evenly */
  .foot-addr{line-height:2.75rem;}
  .foot-col .link-label{margin-bottom:.25rem;}
  .foot-col ul{row-gap:0;}
  .foot-bottom{row-gap:0;margin-top:1.5rem;padding-top:.5rem;}
}
/* a touch tablet: the links have 44 px rows there (R57 fix round 1), so the
   address takes the same rhythm as on the phone */
@media (min-width:761px) and (min-height:521px) and (pointer:coarse){
  .foot-addr{line-height:2.75rem;}
}
/* ===== end R59 ===== */