/* ============================================================================
   home.css — the thread layer: the homepage (index.html) and the ten trade
   and service pages built to the same thread (docs/rollout-spec.md, FULL)
   ----------------------------------------------------------------------------
   Loads AFTER /css/werk.css and owns no colour, no font and no button: every
   token (--ink is the paper ground, --bone the text, --brass the forest CTA,
   --accent the real brass) and .btn / .link-arrow / .display / .mono /
   .demo-media / .nav-logo come from werk.css. If the studio palette changes
   there, this page follows without an edit.

   The page is one thread, hero to close: who it is for -> the work -> the
   person -> the price -> the one message. One block per section, named like
   the data-sid in the markup:
   KOPF · BUEHNE · ARBEITEN · BERI · PREIS, then FACHSEITEN (what a trade page
   changes: one window, BEWEIS, KOENNEN, the short BERI). The close block
   (START) is in werk.css B/22, because pages that never load this file end
   with it too.

   Undo: `git revert` the home-rollout commits; the old page (3D scene, six
   service blocks, FAQ) is index.html + css/aufbau.css at commit 507ac6a.
   ========================================================================== */


/* ======== KOPF — the shared header, fixed like on every other page ======== */
/* Since 2026-10-13 (Beri) the header stays on screen while the page scrolls, so
   the menu button is always in reach. Logo and bar are werk.css B/19's own
   position:fixed boxes, with the same fade and the same --ink ground once the
   page has scrolled; nothing is overridden here.
   js/components.v2.js injects the header after first paint. The empty
   #nav-placeholder holds exactly the header's height until then, so the
   headline under it never moves: that is the page's CLS 0. The fixed children
   leave .site-head with no box of its own, so it keeps the same height. */
body[data-page="home"] #nav-placeholder,
body[data-page="home"] .site-head { height: 4.75rem; }


/* ======== BUEHNE — the headline, and three pages running beside it ======== */
/* The section's own top padding is cut: werk.css gives every .section a tall
   one, and here it would push the third window off a phone's first screen. */
.buehne { padding-top: clamp(.6rem, 3vw, 2.4rem); }

.buehne-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2.4rem) clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  /* Headline left, windows right, both as tall as the first screen. The
     headline is centred against the windows so the eye lands on the type
     first and finds the button right under it. */
  .buehne-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* -- the headline and the one button -- */
.buehne-h { font-size: clamp(1.45rem, 4.45vw, 4rem); }
@media (min-width: 900px) {
  /* Half a column carries the longer second sentence: at the phone clamp's
     4.45vw it ran to 8 lines in French and pushed the button under the fold
     of every laptop screen. Lines are balanced so none ends on one word. */
  .buehne-h { font-size: clamp(2.4rem, 3.3vw, 3.1rem); }
  .buehne-h .line { text-wrap: balance; }
}
.buehne-h .line { display: block; }
/* The second sentence is the answer to the first: a little air between the
   two is all the separation it needs. */
.buehne-h .line + .line { margin-top: .22em; }
/* The form is the second way in, so it is a text link and not a second
   button; the padding makes it a 44px tap target all the same. The mono line
   always takes a row of its own under the two. */
.buehne-cta .link-arrow { padding: .7rem 0; }
/* .74rem, not the .8rem default: the line has to stay on one row beside the
   windows at 1440, or "Werktagen" drops alone onto a second one. */
/* Balanced, so a language that needs two rows splits near the middle instead of
   leaving "lavorativi" or "jours ouvrés" alone on the second (it / fr at 1366). */
.buehne-cta .mono { flex-basis: 100%; font-size: .74rem; text-wrap: balance; }
.buehne-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem 1.1rem;
  margin-top: clamp(1rem, 2.6vw, 2.2rem);
}
@media (max-width: 599px) {
  /* Still a 44px tap target; the default .btn padding costs the phone 12px
     that the third window needs. */
  .buehne-cta .btn { padding-block: .72rem; }
  .buehne-cta .mono { font-size: .68rem; }
}

/* -- the three windows -- */
/* Phone: three slim phones side by side, each showing its page the way it
   looks on a phone, whole width, nothing cropped. All three audiences are on
   the first screen, and a phone page inside a phone frame needs no
   explaining. */
.buehne-szenen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.buehne-fenster { display: block; }
.buehne-leiste {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .32rem .6rem;
  font-size: .75rem;
  white-space: nowrap;
  color: var(--bone-dim);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.buehne-bild {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  background: #16130F; /* the studio's ink, shown for the instant a picture is still decoding */
  border: 1px solid var(--line);
}
/* Absolute, so the tall picture never gives the frame its height. js/home.js
   moves it with a transform only. */
.buehne-bild img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; }
.buehne-wer {
  display: block;
  margin-top: .4rem;
  font-weight: 620;
  font-size: .88rem;
  line-height: 1.3;
}
/* The phone's short form of the same line; see the block below. */
.buehne-kurz { display: none; }
@media (max-width: 599px) {
  /* The middle phone hangs a little lower: three devices on a desk, not
     three cards on a grid line. */
  .buehne-szenen { align-items: start; }
  .buehne-szene[data-szene="durum"] { margin-top: .9rem; }
  /* A phone has no address bar worth 10px type; the frame is the bezel. */
  .buehne-leiste { display: none; }
  .buehne-bild { border: 3px solid var(--bone); border-radius: 14px; }
  /* Where each page rests before it moves, and for good under reduced
     motion. The two demo sites open with a notice that they are demos; the
     picture starts right under it, on the page's own header. Percent of the
     frame's width, so it holds at any phone size. */
  .buehne-szene[data-szene="durum"] img { margin-top: -20%; }
  .buehne-szene[data-szene="almzeit"] img { margin-top: -25%; }
  /* Under a 100px phone the full sentence would wrap into hyphenated
     crumbs, so the nouns stand in for it. The huge word space leaves room
     for one noun per line and no more. 13px is the floor, so the face is
     set a little narrower instead of smaller: "Ferienwohnungen" has to fit
     at 360px. */
  .buehne-wer { display: none; }
  .buehne-kurz {
    display: block;
    margin-top: .4rem;
    font-weight: 620;
    font-size: .8125rem;
    line-height: 1.25;
    font-variation-settings: 'wdth' 86;
    word-spacing: 100vw;
  }
}
.buehne-fenster:hover .buehne-bild,
.buehne-fenster:hover .buehne-leiste { border-color: var(--accent); }
/* The three windows are one link each; keyboard focus is a ring in the text
   colour (dark forest on the paper ground), well past 3:1, set off from the
   frame so it does not merge with the frame's own border. */
.buehne-fenster:focus-visible { outline: 3px solid var(--bone); outline-offset: 5px; }

@media (min-width: 600px) {
  /* From a tablet up the windows become a small desk: two browser windows
     stacked, and the takeaway next to them as the phone its guest orders on.
     Different shapes on purpose. Three equal boxes in a row would read as a
     feature list, these have to read as three screens. */
  .buehne-szenen {
    grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
    grid-template-areas: "pumpe durum" "almzeit durum";
    gap: 1.1rem 1.2rem;
    align-items: center;
  }
  .buehne-szene[data-szene="pumpe"] { grid-area: pumpe; }
  .buehne-szene[data-szene="almzeit"] { grid-area: almzeit; }
  .buehne-szene[data-szene="durum"] { grid-area: durum; }
  .buehne-bild { aspect-ratio: 16 / 10; }
  .buehne-szene[data-szene="durum"] .buehne-bild { aspect-ratio: 9 / 17; border-radius: 0 0 14px 14px; }
  .buehne-szene[data-szene="durum"] .buehne-leiste { border-radius: 14px 14px 0 0; }
  /* The phone's bar is a third as wide as the others (124px at a 900px window)
     and 12px type is not shrunk to fit: its bar (markup) names the page only. */
  .buehne-szene[data-szene="durum"] .buehne-leiste { padding-inline: .45rem; }
  .buehne-wer { font-size: 1rem; margin-top: .55rem; }
}


/* ======== ARBEITEN — two shelves of real pages, sliding against each other ======== */
.arbeiten { overflow: clip; }
.arbeiten .sec-head { margin-bottom: clamp(1.6rem, 4vw, 3rem); }

/* Each shelf is a native horizontal scroller, so a finger, a trackpad and the
   Tab key all reach every tile without any script. js/home.js only moves the
   same scroll position while the page scrolls. The bar itself is hidden: two
   grey bars under pictures read as a broken layout. */
.arbeiten-row {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  padding: 4px var(--gutter);
  scrollbar-width: none;
}
.arbeiten-row::-webkit-scrollbar { display: none; }
.arbeiten-row + .arbeiten-row { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.arbeiten-row li { flex: 0 0 clamp(232px, 23.5vw, 344px); }

.arbeiten-tile { display: block; }
.arbeiten-tile .demo-media { display: block; }
/* werk.css zooms these pictures on .demo-strip:hover; the tiles are not inside
   a strip, so the same quiet zoom and the same corner ticks are repeated here. */
.arbeiten-tile:hover .demo-media img,
.arbeiten-tile:focus-visible .demo-media img { transform: scale(1.03); }
.arbeiten-tile:hover .demo-media::before,
.arbeiten-tile:hover .demo-media::after,
.arbeiten-tile:focus-visible .demo-media::before,
.arbeiten-tile:focus-visible .demo-media::after { opacity: 1; }
.arbeiten-name {
  display: block;
  margin-top: .85rem;
  font-variation-settings: var(--wide);
  font-weight: 730;
  font-size: 1.08rem;
  line-height: 1.2;
}
.arbeiten-tile .mono { display: block; margin-top: .3rem; font-size: .8125rem; }
.arbeiten-foot { margin-top: clamp(2rem, 4vw, 3rem); }
.arbeiten-foot .link-arrow { padding: .6rem 0; }


/* ======== BERI — the letter ======== */
.beri-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 760px) {
  .beri-letter { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
.beri-photo { border: 1px solid var(--paper-line); max-width: 300px; }
/* The file is a tall phone photo (560x1222). Cropped to 3:4 around the face
   and the cockatoo, because uncropped it is taller than the whole letter and
   the letter is the point. */
.beri-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 42%;
}
.beri-photo figcaption { padding: .7rem .9rem; border-top: 1px solid var(--paper-line); }
.beri-body p { max-width: 60ch; margin-bottom: 1.15rem; color: var(--paper-dim); line-height: 1.75; }
/* The first sentence is the claim of the whole section, so it is set as one. */
.beri-body .beri-first {
  color: var(--paper-ink);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 560;
  max-width: 34ch;
  margin-bottom: 1.6rem;
}
.beri-body .beri-sign { margin-top: 1.8rem; margin-bottom: 0; }


/* ======== PREIS — the two prices, before the ask ======== */
/* Two columns, no cards: one drawn rule over each, a figure set as large as a
   headline, three plain lines under it. The left one is a real price range,
   the right one is a promise with a date, and they must not look like two
   packages to choose between. */
.preis .sec-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.preis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
}
@media (min-width: 760px) {
  .preis-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.preis-art { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.preis-zahl {
  font-family: var(--font-disp);
  font-variation-settings: var(--wide);
  font-weight: 780;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  margin: .5rem 0 1rem;
}
.preis-art p:not(.mono):not(.preis-zahl) { max-width: 46ch; color: var(--bone-dim); margin-bottom: 1.1rem; }
.preis-art .link-arrow { padding: .6rem 0; }


/* ======== FACHSEITEN — what a trade or service page changes ======== */
/* Same sections and same classes as the homepage. Only the differences are
   here: the header is fixed, the stage has one window, the work is a short
   grid, and two sections the homepage does not have (KOENNEN, the short BERI).
   The exact markup to copy is in docs/rollout-spec.md. */

/* The header stays fixed on these pages (werk.css B/19), so the stage starts
   under it. On the homepage it is in flow and takes that room itself. */
body:not([data-page="home"]) .buehne { padding-top: calc(4.75rem + clamp(.6rem, 3vw, 2.4rem)); }
@media (max-width: 899px) {
  /* The homepage headline is two sentences and is set small to leave room for
     three windows. A trade page has one short claim and one window, so on
     phones and tablets the claim is set a third larger. */
  body:not([data-page="home"]) .buehne-h { font-size: clamp(1.8rem, 7vw, 3.4rem); }
}

/* The sentence under the headline says for whom and what. It sits between the
   headline and the button, so it is kept to the measure of the headline. */
.buehne-lead { margin-top: clamp(.8rem, 1.6vw, 1.3rem); max-width: 36ch; color: var(--bone-dim); font-size: 1rem; line-height: 1.5; }

/* -- one window -- */
/* A single real page for this trade, running by itself like the three on the
   homepage (js/home.js). No grid areas: it takes the whole column. */
.buehne-szenen.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.buehne-szenen.solo .buehne-szene { grid-area: auto; }
.buehne-szenen.solo .buehne-bild { aspect-ratio: 4 / 3; }
@media (max-width: 599px) {
  /* The phone screenshot at full width is the page at its real size, seen
     through a slot. Wide rather than phone-shaped, or the frame alone would
     be taller than the screen. The caption is a whole sentence here: there is
     room for it, so the three-noun short form is not used. */
  .buehne-szenen.solo .buehne-bild { aspect-ratio: 3 / 2; }
  .buehne-szenen.solo .buehne-wer { display: block; }
  /* Where the screenshot rests before it moves, and for good under reduced
     motion: --ruhe on the <li>, in percent of the frame's width, set so the
     frame opens on the demo's first piece of real interface and not on its
     demo notice or a full-screen photo. The value per plate is in the table
     of docs/rollout-spec.md. */
  .buehne-szenen.solo .buehne-szene img { margin-top: var(--ruhe, 0%); }
}

/* ======== BEWEIS — the two or three real pages for this trade ======== */
/* The homepage's tiles, standing still: a visitor of a trade page compares two
   pages, he does not browse twelve. */
.beweis .sec-head { margin-bottom: clamp(1.6rem, 4vw, 3rem); }
.beweis-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.8rem, 3vw, 2.6rem);
}
.beweis-reihe p { margin-top: .6rem; max-width: 46ch; color: var(--bone-dim); }

/* ======== KOENNEN — what the site has to do, as plain rows ======== */
/* Hairline rows: the claim on the left, one to three sentences on the right.
   No cards and no icons; the row is read like a line in a price list. */
.koennen-zeile {
  display: grid;
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
  gap: .5rem 3rem;
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.koennen-zeile:last-of-type { border-bottom: 1px solid var(--line); }
.koennen-zeile p { max-width: 60ch; color: var(--bone-dim); }
@media (max-width: 700px) { .koennen-zeile { grid-template-columns: minmax(0, 1fr); } }
/* The neighbouring pages (other valleys, other trades): quiet links under the
   rows, each a 44px tap target. */
.koennen-nah { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin-top: 1.4rem; }
.koennen-nah .link-arrow { padding: .6rem 0; }

/* ======== BERI, short — the person in three lines ======== */
/* The whole letter is on the homepage and on /about. Here the photo is a
   third smaller so it is not taller than the three lines beside it. */
@media (min-width: 760px) {
  .beri-letter.kurz { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; }
}
.beri-letter.kurz .beri-photo { max-width: 200px; }
.beri-letter.kurz .link-arrow { padding: .6rem 0; }