/* GRID.Whisper - the GRID family look, like GRID.Drop (BA-289, request TBRU 22.10.2026:
 * "Whisper Design bitte so machen wie GRID Drop, damit es zusammenpasst").
 *
 * WHAT THIS FILE IS: the look of the product family, laid over base.css. base.css keeps the
 * structure and every measured promise (contrast, 44 px targets, focus ring, motion only on
 * request); this file changes typeface, palette roles of the main action, header, eyebrows,
 * stage and footer, the way GRID-Drop/frontend/styles.css does it. Loaded after base.css
 * and before the page sheet (landing.css, styles.css, betrieb.css).
 *
 * WHERE THE COLOURS COME FROM: the neutral TOMORIS palette of TOMORIS.Design 3.7.0 (the
 * pages carry data-app="grid", which has no palette block of its own - the same palette
 * GRID.Drop uses). Nothing here defines a colour value that the package does not carry,
 * except the stage gradients and grid lines, which are taken over from GRID.Drop as they are.
 *
 * TWO COLOURS KEEP THEIR MEANING, as on GRID.Drop: blue = goes to our server, orange =
 * stays in your browser. Orange is also the colour of the main action on tomoris.com and
 * GRID.Drop; the main button follows the website.
 */

/* ------------------------------------------------------------------- Kopf */

/* Full width like GRID.Drop, the content still in the column of the page: the inline padding
   puts the brand on the same line as the stage text below it.

   OPAQUE ON EVERY PAGE, no glass (BA-289, decision TBRU 23.10.2026, the same in GRID.Drop).
   The translucent glass let the navy stage shine through when the sticky header glided over
   it, and in light mode the secondary roles fell below AA (measured on rendered pixels:
   switch name down to 4.15:1, ".Whisper" 3.91:1, language and theme toggles 2.86:1). At rest
   at the top the workbench surface looks as before: white over the light ground, the dark
   surface over the dark one. /app had this already; now the start page and /betrieb have it
   too, and pruefe/kontrast.mjs measures the header on --werkbank. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: none;
  padding: 0.7rem max(var(--rand), calc((100% - var(--seite)) / 2 + var(--rand)));
  background: var(--werkbank);
  border-bottom: 1px solid var(--tm-glass-border, var(--linie));
}

.brand {
  align-items: center;
  gap: 0;
}

.brand-zeichen {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  margin-right: 0.6rem;
}

.brand-zeichen .flaeche { fill: var(--buehne); }
.brand-zeichen .punkt { fill: #fff; }
.brand-zeichen .glut { fill: var(--buehne-akzent); }

.brand-mark {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ueberschrift);
}

/* ".Whisper" in orange, exactly as ".Drop" on GRID.Drop: the family name is the sign. */
.brand-dot {
  color: var(--orange-text);
}

/* THE SWITCH TO THE SISTER PRODUCT (BA-289, request TBRU 23.10.2026): next to the brand, a
   small GRID.Drop mark that leads to drop.tomoris.io. GRID.Drop carries the mirror image with
   the same measures, so both headers look alike. Brand and switch share .marken, so the header
   keeps its two sides (brand left, navigation right) and may still wrap on a phone.

   Colour roles: the name is secondary text (--fliesstext, tm-text-2, the role GRID.Drop calls
   --drop-leise) and turns to the headline colour on hover and focus; the divider takes the
   header's own line. The focus ring is the global one from base.css, nothing is taken away.
   pruefe/kontrast.mjs measures the text roles on the header surfaces, pruefe/rauchtest.mjs
   the link, the labels in both languages and the 44 px. */
.marken {
  display: flex;
  align-items: center;
  min-width: 0;
}

.wechsel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 44 px, the target size every control of this product keeps. */
  min-height: 2.75rem;
  margin-left: 0.85rem;
  color: var(--fliesstext);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--takt-schnell) var(--verlauf);
}

/* The thin divider between the two brands. */
.wechsel::before {
  content: "";
  width: 1px;
  height: 1.4rem;
  margin-right: 0.4rem;
  background: var(--tm-glass-border, var(--linie));
}

.wechsel:hover,
.wechsel:focus-visible {
  color: var(--ueberschrift);
}

.wechsel-zeichen {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
}

/* The same mark as .brand-zeichen. */
.wechsel-zeichen .flaeche { fill: var(--buehne); }
.wechsel-zeichen .punkt { fill: #fff; }
.wechsel-zeichen .glut { fill: var(--buehne-akzent); }

/* ".Drop" in orange, like ".Whisper" in the brand. */
.wechsel-punkt {
  color: var(--orange-text);
}

@media (max-width: 640px) {
  .wechsel {
    margin-left: 0.55rem;
  }

  .wechsel-zeichen {
    width: 1.15rem;
    height: 1.15rem;
  }
}

.nav-link {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ueberschrift);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--orange-text);
}

.lang-toggle,
.theme-toggle {
  font-family: inherit;
  font-weight: 800;
}

/* --------------------------------------------------------------- Schrift */

h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: -0.012em;
}

/* Eyebrows: the typeface of the page, heavy and spaced like GRID.Drop, no longer monospace. */
.kennz {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.16em;
}

/* Section eyebrows carry the orange "+" of tomoris.com. */
.ueberzeile {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.ueberzeile::before {
  content: "+";
  color: var(--orange-text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ------------------------------------------------------------ Hauptknopf */

/* THE MAIN BUTTON like tomoris.com and GRID.Drop: orange, heavy, with a glow. Done by
   re-pointing the action roles on the button itself, so every state base.css defines for
   it (loading, done, focus, the one-time shine) keeps working with the new colour. The fill
   stays an opaque colour: the contrast checks measure it against backgroundColor. */
.knopf-gefuellt,
.knopf-haupt {
  --aktion: var(--schluessel);
  --aktion-tief: color-mix(in srgb, var(--schluessel) 86%, #000);
  --aktion-schrift: var(--schluessel-schrift);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.knopf-gefuellt:not(:disabled),
.knopf-haupt {
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--schluessel) 70%, transparent);
}

.knopf-haupt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: auto;
  height: auto;
  min-height: 3.1rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  background-color: var(--aktion);
  color: var(--aktion-schrift);
  text-decoration: none;
}

.knopf-haupt .pfeil {
  transition: transform var(--takt-schnell) var(--verlauf);
}

@media (hover: hover) {
  .knopf-haupt:hover {
    background-color: var(--aktion-tief);
  }

  .knopf-haupt:hover .pfeil {
    transform: translateY(-3px);
  }
}

/* ---------------------------------------------------------------- Werkbank */

.werkbank {
  border-radius: calc(var(--radius-karte) + 4px);
}

/* ------------------------------------------------------------------- Buehne */

/* The navy stage of tomoris.com and GRID.Drop, dark in BOTH modes. Gradients and grid lines
   are GRID.Drop's own values. */
.buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--buehne-text);
  background-color: var(--buehne);
  background-image:
    radial-gradient(58rem 34rem at 82% 28%, rgba(61, 114, 255, 0.38), transparent 62%),
    radial-gradient(40rem 28rem at 6% 112%, rgba(255, 106, 43, 0.22), transparent 60%),
    linear-gradient(180deg, var(--buehne) 0%, #020a3f 100%);
}

.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 70% at 70% 40%, #000 30%, transparent 85%);
}

/* Only the stage's own text: the tool card on the stage keeps its own colours. */
.buehne-kopf .ueberzeile {
  color: var(--buehne-fliess);
}

.buehne-kopf .ueberzeile::before {
  color: var(--buehne-akzent);
}

/* ---------------------------------------------------------------------- Fuss */

/* The navy footer of GRID.Drop: brand and one sentence left, links right, a line with the
   company below. Full width, content in the column of the page. */
.site-footer.fuss {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
  background-color: #020a3f;
  color: var(--buehne-fliess);
  font-size: 0.9rem;
}

.fuss-innen,
.fuss-zeile {
  padding-inline: max(var(--rand), calc((100% - var(--seite)) / 2 + var(--rand)));
}

.fuss-innen {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 48rem) {
  .fuss-innen {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.fuss .brand-mark {
  color: var(--buehne-text);
}

.fuss .brand-dot {
  color: var(--buehne-akzent);
}

.fuss p {
  margin: 0.75rem 0 0;
  max-width: 28rem;
}

/* Maker line (BA-611), set by the shell rendering from tomoris-saeulen.json. */
.fuss .fuss-produkt {
  margin-top: 1rem;
}

.fuss nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.fuss a:not(.brand) {
  color: var(--buehne-text);
  text-decoration: none;
  font-weight: 700;
}

.fuss a:not(.brand):hover {
  color: var(--buehne-akzent);
  text-decoration: underline;
}

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.buehne-kopf :focus-visible,
.fuss :focus-visible,
.schlussband :focus-visible {
  outline-color: #fff;
}

/* ------------------------------------------------------- Anwendung (/app) */

/* The tool lies on a navy band like GRID.Drop's /app: the band behind the top of the page,
   the card over it. The body colour stays opaque - the contrast checks measure against it. */
body.seite-anwendung {
  background-image:
    radial-gradient(48rem 18rem at 78% 0, rgba(61, 114, 255, 0.35), transparent 70%),
    linear-gradient(180deg, var(--buehne) 0, var(--buehne) 15rem, transparent 15rem);
  background-repeat: no-repeat;
}

/* The light haze of base.css (body::before) would lie over the band and wash the navy out;
   GRID.Drop has none. On the stage of the landing page it is covered anyway. */
body.seite-anwendung::before {
  display: none;
}

@media (max-width: 640px) {
  .site-nav {
    gap: 0.8rem;
  }

  .brand-zeichen {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.45rem;
  }
}

/* --------------------------------------------------- Ueberschriften der Ansichten */

/* The view headline in the weight of GRID.Drop. The operator view and the cards of /betrieb
   take Drop's uppercase forms as well; the question in the tool ("Was soll niemand
   mitlesen?") stays in sentence case, a question in capitals reads as shouting. */
.schlagzeile {
  font-weight: 900;
  letter-spacing: -0.012em;
}

.betrieb > .schlagzeile {
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.02;
}

.kachel h2 {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "BETRIEB" next to the brand on /betrieb: GRID.Drop has no tagline, here it stays with air. */
.brand-tagline {
  margin-left: 0.6rem;
  font-family: inherit;
  font-weight: 800;
}

/* ------------------------------------------------------------------- GRID.Pass */

/* The pointer to GRID.Pass (BA-607), once as a section of the start page and once under the
   delete token of a created link. Neutral surface and edge: it is neither "goes to our
   server" (blue) nor "stays in your browser" (orange), so it carries neither colour. */
.upsell {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--feldrand);
  border-radius: 0 var(--radius-karte) var(--radius-karte) 0;
  background-color: var(--tm-surface-2);
}

.upsell .kennz {
  margin-bottom: 0.35rem;
  color: var(--nebentext);
}

.upsell-titel {
  margin: 0 0 0.3rem;
  color: var(--ueberschrift);
  font-size: 1.05rem;
  font-weight: 800;
}

.upsell-text {
  margin: 0;
  color: var(--fliesstext);
}

.upsell-ergebnis {
  margin-top: 1.4rem;
}

/* The link in the box under a created link: the same text link as on the start page
   (landing.css .textlink), which /app does not load. */
.upsell .textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.25rem;
  color: var(--orange-text);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* "Was ist neu" (BA-564): the link with its "Neu" badge and the running version in the
   footer of every page. The badge is the stage accent on the dark footer; empty (nothing
   new) it takes no space. */
.fuss-neu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fuss-neu .tm-news-dot {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--buehne-akzent);
  color: #020a3f;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

tm-news-dot:empty {
  display: none;
}

.fuss-version {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}