/* What the live site needs beyond the lab's styles (the counterpart of site.js): rules for
   content the lab does not have, and changes to the lab's design the user asked for on the
   live site, each with its date. */

/* A landing page's figure with a long unit ("1,7 Mio.", "20 hrs."): at the lab's size it runs
   out of a phone's width (the lab's own figures are "500+" at most). On a phone the landing
   pages' figures are set a step smaller. */
@media (max-width: 480px) {
  [data-slot^="landing."] .stat__value { font-size: calc(var(--fs-display) * .95); }
}

/* The hub's arrows on a handheld (Shop & E-Commerce, the user, 2026-10-01): stacked, the lab turns
   the incoming arrow's head down (135°) while its line stays across, so the head stands crooked at
   the line's end. It points along the line as on a desktop: in to the right, out to the left. */
@media (max-width: 900px) {
  #main .bsv-hub__flow--in i::after { rotate: 45deg; }
}

/* The list of posts (bl02: /blog/, topics, tags, authors, search, Wissen) (the user, 2026-10-02):
   each row reveals when it scrolls in, but waits 90 ms per row before it - the lab's list had a
   handful of rows, the live one has every post, so the 28th row waited 2.4 s after it was in view
   and a fast scroll showed an empty, black list for seconds. The first six rows still come in one
   after another; every later row appears as it arrives. */
html.reveal-ready .post-index__list > .reveal:nth-child(n+7).is-in { animation-delay: 0s; }

/* The home page's film by scroll on a handheld (the user, 2026-10-01): the lab holds a stage the
   height of the screen with the film and its point in the middle, so a third of a phone's screen
   stays empty above and below them as the section comes and goes. The stage is as tall as what it
   shows (--fit, measured by site.js) and held in the middle of the screen; the track is shorter by
   as much, so the points take the same scroll as in the lab. Without --fit: the lab's values. */
.v2-duo > .v2-scrub.is-armed .v2-scrub__track { height: calc(var(--fit, 100svh) + var(--n, 4) * 70svh); }
.v2-duo > .v2-scrub.is-armed .v2-scrub__stage { height: var(--fit, 100svh); top: max(0px, calc((100svh - var(--fit, 100svh)) / 2)); }

/* Less air between the home page's sections on a phone (the user, 2026-10-01): under the film and
   above the six phases, under the client logos and above the closing section (whose top keeps
   room for the header in the lab, as if it opened a page). */
/* The figures under a hero (service pages, landing pages) on a phone (the user, 2026-10-01, on
   ERP-Beratung): 132 px of air between the hero's button and the figures, 92 px under them. The
   section loses its padding at the top and keeps 8 px at the bottom, the first row of figures its
   space above: 64 px on either side, the hero's and the next section's own padding. */
@media (max-width: 640px) {
  #main section:has(> .wrap > .stats) { padding-block: 0 var(--sp-1); }
  #main section:has(> .wrap > .stats) .stat:nth-child(-n+2) { padding-top: 0; }
}
/* On a tablet (the user, 2026-10-01, on Managed Operations): the section under the figures opens
   with the full section padding, 201 px under the figures at 1024 px (132 at 768). Where it is not a
   shaded band (the service pages) it opens with 64 px: about 100 px under the figures. */
@media (min-width: 641px) and (max-width: 1180px) {
  #main section:has(> .wrap > .stats) + section:not([data-band="shade"]) { padding-top: var(--sp-7); }
}

/* Less air above two sections on a phone (the user, 2026-10-01, on ERP-Beratung): "Neu einführen
   oder besser nutzen?" (deck-fork) and the related services (deck-rel, also on Individualsoftware
   and KI-Beratung). 112 px between the section above and the headline become 80. */
@media (max-width: 640px) {
  #main > .deck-fork, #main > .deck-rel { padding-top: var(--sp-4); }
}

/* "Was sich im Tagesgeschäft ändert" under the hero of KI-Beratung (bsv-pairs, only there) on a
   phone (the user, 2026-10-01): 120 px above it become the hero's 64, 112 below it become 80. */
@media (max-width: 640px) {
  #main > .bsv-pairs { padding-block: 0 var(--sp-4); }
}

/* Air between sections on a tablet (the user, 2026-10-02, section by section on an iPad Pro 13",
   1032 × 1376): from 901 px the lab spaces its sections as on a desktop, 160 px above and below
   each, so two sections stood 320 px apart on every page (192 at 768 px, where the lab's tablet
   step gives 96). Between 641 and 1180 px - the tablets, as the lab's own handheld line for the
   home page's film - the section padding is 64 px and the two larger steps 64 and 96 px: about
   128 px between sections. The phone's values (at 640 px and less) are the lab's own. */
@media (min-width: 641px) and (max-width: 1180px) {
  :root { --section-pad: var(--sp-7); --sp-9: var(--sp-7); --sp-10: var(--sp-8); }
}

/* Heroes and the closing photo band on a tablet (the user, 2026-10-02): both keep a height of their
   own (the hero up to 800/940 px, the band 760 px) and centre their copy in it, so on a tall tablet
   the KI-Beratung and Wissen heroes ended 220 px under their buttons, and the band's heading
   stood 180 px into the photo. From 901 px (the desktop layout) a stage hero is as tall as its
   copy - not Über uns, whose team stands on its own measure (below) - and the band at every
   tablet width. */
@media (min-width: 901px) and (max-width: 1180px) {
  #main > .hero--stage:not(.hero--about) { min-height: 0; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  #main > :is(.cta--image, .cta--photo) { min-height: 0; }
}

/* The Über uns hero on an upright tablet (the user, 2026-10-02, iPad Pro 13", "the about hero went
   bad"): from 901 px the lab sets the team beside the copy, at 57 % of the width - on an upright
   1032 px screen a small group in the corner, the back row's heads behind "Team kennenlernen".
   Upright, it takes the phone's arrangement instead: the copy on top, the team across the whole
   width under it, standing on the facts row (which keeps its four columns). */
/* Lying (1024 × 768, 1180 × 820) the team stays beside the copy; the second button goes under the
   first, out of the back row's way. */
@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  #main > .hero--about .hero__acts { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 901px) and (max-width: 1180px) and (orientation: portrait) {
  #main > .hero--about { --facts-h: 116px; align-items: flex-start; padding-bottom: calc(var(--facts-h) + 66vw); }
  #main > .hero--about .stage__cast { right: 0; bottom: calc(var(--facts-h) - 14vw); width: 100%; translate: none !important; }
  #main > .hero--about .stage__waves { inset: auto 0 calc(var(--facts-h) - 20vw); height: 84vw; }
}

/* The home page on a tablet (the user, 2026-10-02, on an iPad Pro 13", 1032 × 1376): the hero is a
   screen tall with its content in the middle - 330 px empty above and below it on a tall screen; it
   is as tall as its content. "Erst die Prozesse, dann die Software" had 160 px above and 128 below,
   now 64 and 96; under the client logos and above the closing section 266 px become 96. */
@media (min-width: 641px) and (max-width: 1180px) {
  #main > .v2-hero { min-height: 0; }
  #main > .v2-statement { padding-block: var(--sp-7) var(--sp-8); }
  .v2-cases[data-slot="index.cases"] { padding-bottom: var(--sp-5); }
  .contact-syn[data-slot="index.close"] { padding-top: var(--sp-7); }
}

/* Über uns on a tablet (the user, 2026-10-01): from 901 px the sections take the desktop's 160 px,
   so "Wer wir sind" (a few lines of text) stood in 288 px of air below it and 160 above, and 411 px
   lay between the team's photos and "Was uns ausmacht". "Wer wir sind" keeps 96 px above it and
   about 96 below; the team band closes 32 px under its carousel (whose frame leaves room for the
   lifted card), and the principles open with 96 px; the principles close 64 px under their last
   row and the careers band opens with 96 px (320 px between them before).
   The history under it (climb) holds a stage the height of the screen with its content in the
   middle: on a tall tablet (1024 × 1366: 770 px of content) a third of the screen stood empty above
   and below it, all the way through. Here the content fills the stage: the heading at its top, the
   stair taking the height that is left, the year and its text at its foot. */
@media (min-width: 641px) and (max-width: 1180px) {
  #main > .about-manifest { padding-block: var(--sp-8) 0; }
  #main > .team5 { padding-bottom: var(--sp-5); }
  #main > .team5 + section { padding-top: var(--sp-8); padding-bottom: var(--sp-7); }
  #main > .team5 + section + section { padding-top: var(--sp-8); }
  #main > .climb.is-armed .climb__pin { align-content: stretch; }
  #main > .climb.is-armed .climb__grid { grid-template-rows: auto minmax(0, 1fr) auto; }
  #main > .climb.is-armed .climb__stair { height: auto; align-self: stretch; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #main > .climb.is-armed .climb__grid { grid-template-rows: auto minmax(0, 1fr) auto auto; }
}

/* The case's photo on a phone (the user, 2026-10-01): 112 px between the section above and the
   photo become 80 - under "Das komplette Vorgehensmodell ansehen" (Shop & E-Commerce, Xentral,
   Schnittstellen & EDI) and under a shaded section (Managed Operations, Individualsoftware,
   KI-Beratung). */
@media (max-width: 640px) {
  #main > .bsv-case { padding-top: var(--sp-4); }
}

/* "Typische Anwendungen" on KI-Beratung (bsv-tabs, only there), a shaded band, on a phone (the
   user, 2026-10-01): 32 px inside its edges instead of 56. */
@media (max-width: 640px) {
  #main > .bsv-tabs { padding-block: var(--sp-5); }
}

@media (max-width: 640px) {
  .v2-duo > .v2-scrub { padding-bottom: var(--sp-5); }
  .v2-proc[data-slot="index.process"] { padding-top: var(--sp-6); }
  .v2-cases[data-slot="index.cases"] { padding-bottom: var(--sp-5); }
  .contact-syn[data-slot="index.close"] { padding-top: var(--sp-7); }
}