/* Studio Takt on the pages around D2: the Website-Check and the legal pages. They keep
   their markup and their scripts and take the sheet's type, colours and rules, so the
   buyer stays with the same firm after the Befund. */

@font-face { font-family: Geist; src: url(/assets/takt/fonts/Geist-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/takt/fonts/GeistMono-Latin.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url(/assets/takt/fonts/GeistPixel-Numerals.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"); size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }

:root {
  --paper: #fff;
  --paper-2: #f5f8f7;
  --card: #f5f8f7;
  --ink: #1b2a2b;
  --ink-2: #4c5856;
  --ink-3: #566c6a;
  --line: #e6ecea;
  --line-2: #d3dcd9;
  --accent: #1b2a2b;
  --accent-ink: #fff;
  --accent-soft: #e6ecea;
  --ok: #1b2a2b;
  --ok-soft: #e6ecea;
  --lime: #dff500;
  --fog: #4d6662;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 2rem;
  --fs-2xl: clamp(2.25rem, 1.4rem + 2.9vw, 4rem);
  --wrap: 82.5rem;
  --r-lg: 12px;
  --shadow: none;
}

body { font: 400 1rem/1.5 Geist, "Geist Fallback", system-ui, sans-serif; font-feature-settings: normal; font-synthesis: none; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.015em; }
h1 { letter-spacing: -.02em; line-height: 1.09; }
h3 { letter-spacing: -.012em; }
::selection { background: var(--lime); color: var(--ink); }

/* Header: white, with the mark from the page */
.top { background: rgb(255 255 255 / .92); border-bottom: 1px solid var(--line); }
.mark { align-items: center; gap: 10px; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
.mark::after { display: none; }
.mark__box { display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink); background: var(--lime); border-radius: 8px; }
.top__tel { font-weight: 400; }

/* Buttons: the colour changes on hover, nothing moves */
.btn { font-weight: 500; font-size: 1rem; border: 1px solid transparent; background: var(--b); }
.btn:hover { color: var(--paper); background: #2f4243; transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn--sm { font-size: .875rem; }
.btn--accent:hover { color: #fff; }
.btn--ghost { background: none; border-color: var(--line-2); }
.btn--ghost:hover { color: var(--ink); background: var(--card); }

/* The first screen of the check is the fog of the page */
.tool-hero { color: #fff; background: var(--fog) linear-gradient(90deg, rgb(20 34 36 / .24) 0%, rgb(20 34 36 / 0) 56%); }
.tool-hero .lede, .tool-hero .muted { color: rgb(255 255 255 / .94); }
.tool-hero h1 { max-width: 15ch; }
.tool-hero a:hover { color: #fff; }
.tool-hero :focus-visible { outline-color: #fff; }
.tool-hero .probe :focus-visible { outline-color: var(--ink); }
.pill { min-height: 16px; padding: 0 0 0 7px; font: 400 .75rem/16px var(--mono); letter-spacing: .02em; text-transform: uppercase; color: #fff; background: none; border: 0; border-left: 1px solid rgb(255 255 255 / .34); border-radius: 0; }
.pill .dot { display: none; }
.probe { background: #fff; border: 0; }
.probe__input { color: var(--ink); }
.probe__input::placeholder { color: var(--ink-3); opacity: 1; }
.tool-hero .probe:has(.probe__input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }

/* The instrument waits beside the question, on phones the list under it says the same */
.panel { display: none; }
@media (min-width: 900px) {
  .tool-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .tool-hero__in > * { grid-column: 1; }
  .tool-hero__in > .panel { display: block; grid-column: 2; grid-row: 1 / span 5; align-self: center; justify-self: stretch; min-width: 0; margin: 0; padding: 24px; color: #fff; background: rgb(14 24 26 / .26); border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; }
  .how { display: none; }
}
.panel__lab { font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; font-feature-settings: "ss09" 1; color: rgb(255 255 255 / .94); }
.panel__big { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; font-size: 1.125rem; line-height: 1.33; }
.panel__big .px { font-size: 6rem; line-height: 1; }
.panel__scope { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr) minmax(0, .9fr); gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .18); }
.panel__scope ul { margin: 8px 0 0; padding: 0; list-style: none; }
.panel__scope li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.68; color: rgb(255 255 255 / .94); }
.panel__scope li::before { content: ""; position: absolute; left: 0; top: .44em; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }

/* While it works: the same honest lines as on the page */
.working__host { font-weight: 400; }
.working__steps li.is-now::before { border-color: var(--ink); border-top-color: transparent; }
.working__steps li.is-done::before { background-color: var(--ink); border-color: var(--ink); }

/* The number from the page's instrument opens the result */
.px { font-family: "Geist Pixel", ui-monospace, monospace; font-weight: 400; letter-spacing: 0; font-feature-settings: "ss09" 1; }
.result-count { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; font-size: 1.125rem; line-height: 1.33; }
.result-count .px { font-size: clamp(4.5rem, 3rem + 5vw, 6rem); line-height: 1; }

/* The findings are ruled rows, not cards */
.result-head h2 { max-width: 20ch; line-height: 1.09; letter-spacing: -.02em; }
.result-block h3 { font: 400 .75rem/1.34 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.findings { gap: 0; border-bottom: 1px solid var(--line); }
.finding { padding: 20px 0 20px 56px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.finding::before { left: 0; top: 20px; width: 28px; height: 28px; font-size: .75rem; font-weight: 400; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.finding--anfragen::before { background: var(--ink); box-shadow: none; }
.finding__tag { font-weight: 500; }
.finding--anfragen .finding__tag { color: var(--ink); }
.finding__title { font-size: 1.5rem; font-weight: 400; letter-spacing: -.012em; line-height: 1.25; }
.finding__fix strong { font-weight: 500; }
.finding--rest { padding: 16px 0 16px 56px; color: var(--ink-2); border-top: 1px solid var(--line); list-style: none; }
.notice { background: var(--card); border-color: var(--line); }
.vorschau { background: var(--card); }
.mock__word { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
/* The headline is the visitor's own words: a short word stays whole, only a long compound may break */
.mock__h { -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
/* What they offer, as one ruled line: nothing pretends to be content it doesn't have */
.mock__tiles:not(.mock__tiles--empty) { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 1.5rem 1.25rem; padding: .75rem 0; border-block: 1px solid #eee; }
.mock--phone .mock__tiles:not(.mock__tiles--empty) { display: flex; margin: 0 1rem 1rem; padding: .75rem 0; }
.mock__tile { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; }
.frame { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-2), 0 26px 50px -30px rgb(14 24 26 / .5); border: 0; }
.frame__bar { background: var(--card); }
.frame--phone { border: 7px solid var(--ink); border-radius: 28px; box-shadow: 0 26px 50px -30px rgb(14 24 26 / .5); }
.changes strong { font-weight: 500; }

/* The offer is the price card of the page */
.ending h2 { max-width: 15ch; line-height: 1.09; letter-spacing: -.02em; font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3rem); }
.offer { color: #fff; background: var(--fog) linear-gradient(90deg, rgb(20 34 36 / .24) 0%, rgb(20 34 36 / 0) 56%); border: 0; }
.offer a { color: #fff; }
.offer :focus-visible { outline-color: #fff; }
.offer .muted, .offer .ticks { color: rgb(255 255 255 / .94); }
.offer__label { font-weight: 500; }
.offer__price { font-size: 3rem; font-weight: 400; letter-spacing: -.035em; color: #fff; }
.offer__price span { display: inline-block; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / .94); white-space: nowrap; }
.net-first .offer__price + .offer__price { font-size: 1rem; letter-spacing: 0; }
.offer .btn--accent { --b: #fff; color: var(--ink); }
.offer .btn--accent:hover { color: var(--ink); background: #e9efed; }
.offer .ticks li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.6l3.6 3.4 7.4-8'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* The five days from the price card, in half days. Live takes the last one, as it does there. */
.ruler { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-block: 4px 8px; font: 400 12px/1 var(--mono); font-feature-settings: "ss09" 1; color: rgb(255 255 255 / .94); }
.ruler i { position: relative; display: flex; align-items: center; height: 26px; padding-left: 3px; font-style: normal; white-space: nowrap; }
.ruler i::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 0; width: 1px; background: rgb(255 255 255 / .34); }
.ruler i:nth-of-type(odd)::after { top: 0; background: #fff; }
.ruler i:last-of-type { justify-content: flex-end; padding-left: 0; }
.ruler i:first-child { font-size: 0; }
.ruler i:first-child::before { content: "1"; font-size: 12px; }
.ruler__live { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 20px; padding: 0 5px; font: 500 12px/1 var(--mono); color: var(--ink); background: var(--lime); border-radius: 4px; }
/* "Tag 1" needs a cell of 44 px: the card is that wide alone in its row and beside the copy from 75rem. */
@media (min-width: 32.5rem) and (max-width: 52rem), (min-width: 75rem) {
  .ruler i { padding-left: 6px; }
  .ruler i:first-child { font-size: inherit; }
  .ruler i:first-child::before { content: none; }
}
/* On the narrowest phones Live gets tighter, and below that it needs the room of the ninth label. Its tick stays. */
@media (max-width: 22rem) { .ruler__live { padding: 0 3px; } }
@media (max-width: 19rem) { .ruler i:nth-of-type(9) { font-size: 0; } }

/* What is still open is marked like every placeholder in the drafts */
.todo { padding: 4px 8px; font: 400 .75rem/1.34 var(--mono); font-style: normal; color: var(--ink); background: #fbf8d9; border: 1px dashed #a9a34f; border-radius: 4px; }

.legal h1 { font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3rem); line-height: 1.17; }
.legal h2 { font-size: 1.5rem; letter-spacing: -.012em; line-height: 1.25; }
.foot { padding-block: 16px; }
.foot__in { align-items: center; }
.foot__who { display: block; max-width: 52em; }
.foot nav a, .foot nav span { display: inline-flex; align-items: center; min-height: 44px; }

/* Safari's largest text sizes leave a layout about this wide: the header gives way, the name stays in its label. */
@media (max-width: 300px) {
  .top__in { gap: 8px; }
  .top__tel { display: none; }
  .mark { font-size: 0; gap: 0; }
  .top .btn--sm { padding-inline: 12px; }
}
/* Below this width "Datenschutzerklärung" no longer fits in one piece. */
@media (max-width: 308px) {
  .legal { hyphens: auto; overflow-wrap: anywhere; }
}

/* A failed check keeps its distance from the fog, and its title stays small: it only moved up a level for screen readers. */
.error { padding-top: 40px; }
.notice h2 { font-size: var(--fs-lg); letter-spacing: -.012em; line-height: 1.25; }

/* The check and its 404 fill a tall window: the fog takes what the form leaves, the footer stays at the foot. */
.tool { display: flex; flex-direction: column; min-height: 100svh; }
.tool > main { display: flex; flex: 1; flex-direction: column; }
.tool-hero { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.lost { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.lost .btn--accent { --b: #fff; color: var(--ink); }
.lost .btn--accent:hover { color: var(--ink); background: #e9efed; }
.lost a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }

/* What the result says went well, under the sentence that sums it up. */
.result-good { max-width: 38em; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* Under 309 px nothing may push the result wider than the page. */
@media (max-width: 308px) {
  .findings, .finding { grid-template-columns: minmax(0, 1fr); }
  .finding { padding-left: 0; padding-top: 48px; }
  .finding__title { overflow-wrap: anywhere; hyphens: auto; }
  .result-count { flex-wrap: wrap; gap: 0 14px; }
  .frame--phone { width: 100%; max-width: 100%; min-width: 0; }
  .mock__cta { white-space: normal; }
  main h2, main .lede { overflow-wrap: anywhere; hyphens: auto; }
}

/* Dialogs drop the fog and leave its white text pale grey: on paper the price is ink. */
@media print {
  .tool-hero, .offer, .offer .small, .offer .muted, .offer__label, .offer__price, .offer__price span, .offer .ruler, .offer .ticks, .offer a:not(.btn) { color: var(--ink) !important; background: none; }
  .offer .ruler i::after { background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .offer .btn--accent { color: var(--ink); background: none; border: 1px solid var(--ink); }
  .tool-hero h1, .tool-hero .lede, .tool-hero .muted, .tool-hero .pill, .probe__btn { color: var(--ink) !important; }
}