/* =========================================================================
   OnDevice OCR Pro — Landing page styles
   Quiet, document-like, trustworthy. One azure accent (from the app icon),
   generous whitespace, Apple-native system type. No flash.
   ========================================================================= */

:root {
  --bg:         #FFFFFF;
  --bg-soft:    #F6F8FB;   /* milk-glass off-white sections */
  --ink:        #1D1D1F;   /* near-black body text */
  --ink-soft:   #5B5E66;   /* secondary text */
  --ink-faint:  #6E6E73;   /* captions / fine print — AA on white (~4.7:1) */
  --hairline:   #E6E8EC;   /* borders / dividers */
  --accent:     #4592CD;   /* icon azure — fills / illustrations */
  --accent-ink: #15639F;   /* deeper azure — links / emphasis (AA on white) */
  --accent-deep:#0A3D62;   /* dark navy — headline highlight words */
  --accent-soft:#EAF2F9;   /* faint azure wash */
  --maxw:       1080px;
  --radius:     14px;
  --shadow-soft: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- base -------------------------------------------------------------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

section { padding-block: clamp(56px, 9vw, 104px); }
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--hairline); }

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;   /* even out line breaks so no lonely last word */
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink-soft); }
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
}
.measure { max-width: 60ch; }
.center { text-align: center; margin-inline: auto; }

/* ---- App Store badge --------------------------------------------------- */
.badge { display: inline-block; transition: transform .2s ease, filter .2s ease; }
.badge img { width: 200px; height: auto; }
.badge:hover { transform: translateY(-1px); filter: brightness(1.06); text-decoration: none; }
.badge:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.req-note { margin-top: 14px; font-size: .85rem; color: var(--ink-faint); }
.trial-strip { background: var(--accent-soft); border-block: 1px solid var(--hairline); }
.trial-strip .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 28px; padding-block: 26px;
}
.trial-strip p {
  margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; color: var(--ink);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  overflow: hidden;
}
/* faint azure glow echoing the glass icon */
.hero::before {
  content: "";
  position: absolute; inset: -20% 0 auto 0; height: 460px;
  background: radial-gradient(60% 70% at 50% 0%, var(--accent-soft) 0%, rgba(234,242,249,0) 70%);
  z-index: 0; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
/* brand lockup: icon + wordmark, the quiet product identity */
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-icon { width: 64px; height: 64px; border-radius: 14px; box-shadow: var(--shadow-soft); flex: none; }
.hero-wordmark {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1.12;
}
/* Wortmarke wie in der App: „OnDevice OCR“ fett, „Business“ leichter und
   etwas heller — beides in der System-Schrift (SF Pro). */
.hero-wordmark b { font-weight: 600; color: #3A3A3C; }
.hero-wordmark .wordmark-suffix { font-weight: 500; color: #6E6E73; }
.hero h1 { margin-bottom: 18px; }
/* Turkish reads better when “Belgelerinizi aranabilir” stays together on the
   first desktop line; balanced wrapping split that phrase unnecessarily. */
html:lang(tr) .hero h1 { text-wrap: wrap; }
.hero .lead .em { color: var(--ink); font-weight: 600; }
.hero h1 .hero-line2 { display: block; margin-top: 0.28em; font-size: 0.8em; }
.hero h1 .hl { color: var(--accent-deep); }
.hero h1 .accent-em { font-style: italic; color: var(--ink); }
/* Japanese has no true italic; synthetic obliquing of kanji looks off — keep it upright on the JA page (EN/DE keep their real italic). */
html:lang(ja) .hero h1 .accent-em { font-style: normal; }
/* Korean likewise has no true italic; keep the accent line upright on the KO page. */
html:lang(ko) .hero h1 .accent-em { font-style: normal; }
/* Traditional Chinese also has no true italic; keep the accent line upright.
   No word-break tweak needed: character-by-character wrapping is the norm for Chinese. */
html:lang(zh-Hant) .hero h1 .accent-em { font-style: normal; }
/* Simplified Chinese: same as above — no true italic, keep the accent line upright. */
html:lang(zh-Hans) .hero h1 .accent-em { font-style: normal; }
/* Natural Japanese line breaking: only break at the phrase boundaries baked in
   as zero-width spaces (U+200B) by tools/ja-budoux.py — never mid-word/mid-loanword.
   overflow-wrap is the safety net so an over-long phrase can still break on overflow. */
html:lang(ja) { word-break: keep-all; overflow-wrap: break-word; }
/* keep loanwords / Latin abbreviations from breaking mid-term on narrow screens */
.nowrap { white-space: nowrap; }
.hero .lead { margin-bottom: 30px; }

/* framed screenshot with a soft, glassy edge */
.shot {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #FFFFFF, var(--bg-soft));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.shot::after { /* fallback look when the <img> has no source yet */
  content: attr(data-label);
  aspect-ratio: 16/10;
  color: var(--ink-faint); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.shot img { display: block; width: 100%; }
.shot.has-img::after { display: none; }

/* hero mockup: transparent PNG that already includes its own device frame —
   no border/box, let it float; a soft drop-shadow follows the laptop silhouette */
.hero-shot { margin: 0; }
.hero-shot img { width: 100%; filter: drop-shadow(0 18px 40px rgba(16,24,40,.16)); }

/* =========================================================================
   TRUST STRIP
   ========================================================================= */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 0; padding-block: 24px;
}
.trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: 1rem; font-weight: 600; letter-spacing: 0;
  color: var(--ink);
  padding-inline: clamp(18px, 3.4vw, 42px);
}
.trust li:not(:last-child) { border-right: 1px solid var(--hairline); }
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
/* Turkish trust labels are longer; keep all four items on one desktop row. */
html:lang(tr) .trust li { padding-inline: clamp(14px, 2.5vw, 32px); }
/* Business: alle vier Punkte in einer Zeile. Abstände und Schrift werden mit
   der Fensterbreite kleiner, statt den letzten Punkt umzubrechen. */
@media (min-width: 901px) {
  .trust { flex-wrap: nowrap; }
  .trust li { white-space: nowrap; padding-inline: clamp(10px, 2.4vw, 32px); font-size: clamp(.84rem, 1.25vw, 1rem); }
}
/* Schmale Fenster und Handy: zwei Spalten ohne Trennstriche. */
@media (max-width: 900px) {
  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .trust li { padding-inline: 0; border-right: 0 !important; font-size: .92rem; }
}
/* Handy und schmale Fenster: Monitor unter den Text statt als Miniatur daneben. */
@media (max-width: 900px) {
  .business-hero .business-hero-copy { grid-template-columns: 1fr; }
  .business-hero .business-hero-copy > .hero-figure { max-width: 560px; }
}

/* =========================================================================
   FEATURES
   ========================================================================= */
.features-head { max-width: 56ch; margin-bottom: clamp(36px, 5vw, 60px); }
.features-head h2 { margin-bottom: 12px; text-wrap: balance; }

.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 46px) clamp(30px, 4vw, 58px);
}
.feature { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.feature .ico {
  width: 22px; height: 22px; display: grid; place-items: center;
  margin-top: 1px;
  color: var(--accent-ink);
}
.feature .ico svg { width: 21px; height: 21px; }
.feature h3 {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.18;
}
.feature p { color: var(--ink); font-size: .95rem; font-weight: 500; line-height: 1.45; max-width: 26ch; }
.feature p a.feature-link {
  color: var(--ink);
  display: block;
  font-weight: 600;
  margin-top: .22rem;
  text-decoration: none;
}
.feature p a.feature-link::after {
  content: " →";
  color: var(--accent-ink);
  font-weight: 600;
}

.made-for {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
  text-align: center; color: var(--ink-soft); font-size: .98rem;
}
.made-for b { color: var(--ink); font-weight: 600; }

/* =========================================================================
   PRIVACY BLOCK
   ========================================================================= */
.privacy { text-align: center; }
.privacy h2 { max-width: 18ch; margin: 0 auto 22px; }
/* :not(.eyebrow), sonst faerbt diese Regel die blaue Vorzeile grau —
   Klasse+Element schlaegt die reine .eyebrow-Klasse. */
.privacy p:not(.eyebrow) { max-width: 64ch; margin-inline: auto; color: var(--ink-soft); text-wrap: pretty; }
.privacy .lead { max-width: 72ch; color: var(--ink); line-height: 1.55; }
.privacy .tail { margin-top: 16px; color: var(--ink-faint); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-head { margin-bottom: clamp(28px, 4vw, 44px); }
.faq { max-width: 760px; margin-inline: auto; }
.faq-search { margin-bottom: 28px; }
.faq-search input {
  width: 100%; padding: 13px 18px; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.faq-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-no-results { margin-top: 14px; color: var(--ink-faint); font-size: 1rem; }
.faq-section { border-top: 1px solid var(--hairline); }
.faq-section:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary.faq-group {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; user-select: none;
  font-size: clamp(.95rem, 1.25vw, 1.05rem); font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent-ink);
  padding: 20px 0; margin: 0;
}
.faq summary.faq-group::-webkit-details-marker { display: none; }
.faq summary.faq-group::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.faq-section[open] > summary.faq-group::after { transform: translateY(2px) rotate(-135deg); }
.faq .qa { padding-block: 22px; border-top: 1px solid var(--hairline); }
.faq .qa:first-of-type { border-top: none; }
.faq h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.faq p { color: var(--ink); font-size: 1.125rem; line-height: 1.55; }
.faq p + p { margin-top: 1.1em; }
.faq .faq-important {
  margin-top: .45em; padding-left: 1.4em;
  color: var(--ink); font-size: 1.125rem; line-height: 1.55;
}
.faq .faq-important li + li { margin-top: .55em; }
.faq .activation-path + .activation-path { margin-top: 1.35rem; }
.faq .activation-path h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: normal;
}
.faq-feature-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px; margin: 14px 0 18px;
  color: var(--ink); font-size: 1.0625rem; line-height: 1.45;
}
.faq-feature-list li { position: relative; padding-left: 18px; }
.faq-feature-list li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

@media (max-width: 620px) {
  .faq-feature-list { grid-template-columns: 1fr; }
}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.cta { text-align: center; padding-block: clamp(45px, 7.2vw, 83px); }
.cta h2 { margin-bottom: 26px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer { border-top: 1px solid var(--hairline); padding-block: 40px; }
footer .container {
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; text-align: center;
}
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
footer a, footer .copy { font-size: .88rem; color: var(--ink-soft); }
footer .copy { color: var(--ink-faint); }
footer nav [aria-current="page"] { color: var(--ink-faint); cursor: default; pointer-events: none; }
footer .language-switcher { position: relative; font-size: .88rem; color: var(--ink-soft); }
footer .language-switcher summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
footer .language-switcher summary::-webkit-details-marker { display: none; }
footer .language-switcher summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  transform: rotate(45deg) translateY(-2px);
}
footer .language-switcher[open] summary::after { transform: rotate(225deg) translateY(-1px); }
footer .language-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
footer .language-menu a { white-space: nowrap; }

/* =========================================================================
   LEGAL SUBPAGES (imprint / privacy)
   ========================================================================= */
.legal { padding-block: clamp(48px, 7vw, 88px); }
.legal .back { font-size: .9rem; display: inline-block; margin-bottom: 28px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 28px; }
.legal h2 { font-size: 1.2rem; margin-top: 36px; margin-bottom: 10px; }
.legal p, .legal dd { color: var(--ink-soft); max-width: 70ch; margin-bottom: 12px; }
.legal dt { font-weight: 600; color: var(--ink); margin-top: 14px; }
.legal dd { margin-left: 0; }
.legal .updated { color: var(--ink-faint); font-size: .9rem; margin-bottom: 28px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { order: 1; }
  .hero-figure { order: 2; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding-block: 48px; }
  .container { padding-inline: 20px; }
  .hero {
    padding-top: 28px;
    padding-bottom: 42px;
  }
  .hero-grid { gap: 26px; }
  .hero-brand { margin-bottom: 20px; }
  .hero-icon { width: 56px; height: 56px; border-radius: 12px; }
  .hero h1 { margin-bottom: 16px; }
  .hero .lead { margin-bottom: 24px; }
  .feature-grid { grid-template-columns: 1fr; }
  .trust li:nth-child(2n) { border-right: 0; }
  footer .container { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   MOTION — one quiet staggered reveal on load; respect reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .reveal.d1 { animation-delay: .06s; }
  .reveal.d2 { animation-delay: .14s; }
  .reveal.d3 { animation-delay: .22s; }
  .reveal.d4 { animation-delay: .30s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* =========================================================================
   BUSINESS DRAFT — current-site design, wide Version A hero
   ========================================================================= */
.business-hero {
  min-height: 760px;
  padding-top: clamp(42px, 6vw, 70px);
  padding-bottom: clamp(60px, 8vw, 92px);
  background: var(--bg);
}
.business-hero::before { display: none; }
.business-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.business-hero-top .hero-brand { margin-bottom: 0; }
.business-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--accent-deep);
  background: var(--bg);
  font-size: .78rem;
  font-weight: 600;
}
.business-platform > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-primary {
  border: 1px solid var(--accent-ink);
  color: #fff;
  background: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-outline {
  border: 1px solid var(--accent-ink);
  color: var(--accent-ink);
  background: #fff;
}
.btn-outline:hover { background: var(--accent-soft); }

/* Hero wie auf der Pro-Seite: Text links, Produktbild rechts. */
.business-hero-copy {
  margin: clamp(48px, 6vw, 72px) 0 0;
  text-align: left;
  align-items: center;
  grid-template-columns: 1fr 0.667fr;
}
.business-hero h1 {
  margin: 18px 0 24px;
  font-size: clamp(2.2rem, 4.0vw, 3.6rem);
  line-height: 1.05;
}
.business-hero .lead {
  max-width: 560px;
  margin: 0 0 29px;
  text-wrap: pretty;
}
.business-hero .lead .em { color: var(--ink); font-weight: 600; }
.business-hero .badge { margin-inline: 0; }
.business-hero-proof {
  display: flex;
  justify-content: center;
  gap: 12px 34px;
  margin-top: 27px;
  padding: 0;
  color: var(--ink-soft);
  font-size: .87rem;
  font-weight: 600;
}
.business-hero-proof li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.business-hero-proof li::before {
  content: "✓";
  color: #287b63;
}

.comparison { background: var(--bg); }
/* Der Textblock ist so breit wie die Tabelle und ebenso mittig — der Text
   darin steht links, damit die Ueberschrift an der linken Tabellenkante
   beginnt. Nur in diesem Abschnitt, der Funktionsteil bleibt unveraendert. */
.comparison .features-head { max-width: 80%; margin-inline: auto; text-align: left; }
/* 80 % der Inhaltsbreite, mittig — wie die Ueberschrift darueber.
   Schriftgroesse und Zeilenhoehe bleiben unveraendert. */
.comparison-table {
  overflow: hidden;
  max-width: 80%;
  margin-inline: auto;
  margin-top: clamp(36px, 5vw, 56px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg);
}
.comparison-row {
  display: grid;
  grid-template-columns: 1.45fr .7fr .85fr;
  border-bottom: 1px solid var(--hairline);
}
.comparison-row:last-child { border-bottom: 0; }
.comparison-row > div {
  display: flex;
  /* 10 % flacher als der urspruengliche Entwurf (60 px / 15 px). */
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  text-align: center;
  font-size: .93rem;
}
.comparison-row > div:first-child {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
}
.comparison-head > div {
  min-height: 50px;
  color: var(--ink);
  font-weight: 600;
}
.pro-link { color: inherit; text-decoration: none; }
.pro-link:hover { color: var(--accent-ink); text-decoration: none; }
.comparison-note {
  margin: clamp(14px, 2vw, 18px) auto 0;
  width: 80%;
  max-width: 860px;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.business-column { background: var(--accent-soft); }
.comparison-row:not(.comparison-head) .business-column {
  color: #287b63;
  font-weight: 600;
}

/* =========================================================================
   SHOWCASE — Screenshot links, Text rechts
   ========================================================================= */
/* Kein eigener Kopfabstand: darueber liegen bereits 104 px Bodenabstand des
   Funktionsteils plus rund 22 px transparenter Schattenrand im Screenshot.
   Zusammen mit den frueheren 48 px waren das 174 px ueber einer einzelnen
   kurzen Textzeile — sichtbar mehr als die 148 px zur Trennlinie darunter. */
.showcase { padding-top: 0; }

.showcase-row {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

/* Das Bild bringt seinen eigenen weichen Schatten mit — kein CSS-Schatten,
   sonst entsteht eine sichtbare Kante. */
.showcase-shot { margin: 0; }
.showcase-viewport { position: relative; overflow: hidden; }
.showcase-shot img {
  width: 100%;
  height: auto;
  display: block;
}
/* Die Punkte laufen im normalen Fluss direkt unter dem Bild — darunter
   steht noch die Hinweiszeile zum Vergroessern. */
.showcase-shot { position: relative; }
.showcase-controls {
  margin-top: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.showcase-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hairline);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  cursor: pointer;
}
.showcase-dot.is-active { background: var(--ink-soft); }
.showcase-dot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Der Screenshot hat oben 4,55 % transparenten Schattenrand. Der Text bekommt
   denselben Versatz, damit Überschrift und Fensterleiste auf einer Linie
   sitzen statt nur rechnerisch bündig zu sein. */
.showcase-text { padding-top: clamp(12px, 2.2vw, 28px); }

/* Karussell-Bild als Knopf: keine eigene Optik, nur Zeigerform. Keine
   Bewegung beim Ueberfahren (Christian 03.10.). */
.showcase-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.showcase-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.showcase-zoom img { width: 100%; height: auto; display: block; }

/* Lupe unten rechts im Bild. Der Screenshot bringt einen transparenten
   Schattenrand mit, deshalb etwas Abstand zum Rand. */
.showcase-zoom-badge {
  position: absolute;
  right: 5%;
  bottom: 8%;
  line-height: 0;
  pointer-events: none;
}

.showcase-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-faint);
}

/* Vergroesserte Ansicht: kein Vollbild, sondern eine schwebende Karte
   ueber der unveraenderten Seite. Der Dialog spannt sich nur deshalb ueber
   das ganze Fenster, damit ein Klick neben die Karte sie schliesst; er ist
   selbst durchsichtig, ebenso sein Hintergrund. */
.galerie-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
/* Overlay hinter der grossen Ansicht. */
.galerie-dialog::backdrop { background: rgba(0, 0, 0, .7); }
/* Einblenden mit derselben Dauer wie das Aufwachsen (220ms),
   Ausblenden mit derselben Dauer wie der Rueckweg (180ms). */
@keyframes galerie-overlay-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes galerie-overlay-aus { from { opacity: 1; } to { opacity: 0; } }
.galerie-dialog[open]::backdrop { animation: galerie-overlay-ein 220ms ease-out; }
.galerie-dialog.overlay-aus::backdrop { animation: galerie-overlay-aus 180ms ease-out forwards; }

.galerie-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Karte und Punkte zusammen; die Buehne ist so breit wie die Karte,
   damit die Punkte darunter mittig sitzen. */
.galerie-buehne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* Die Bedienelemente kommen erst, wenn das Bild an seinem Platz ist. */
.galerie-nav,
.galerie-close,
.galerie-dots {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.galerie-dialog.bedienung-da .galerie-nav,
.galerie-dialog.bedienung-da .galerie-close,
.galerie-dialog.bedienung-da .galerie-dots {
  opacity: 1;
  pointer-events: auto;
}

/* Solange die grosse Ansicht laeuft, ist das kleine Bild im Karussell
   unsichtbar — es soll ja dasselbe Bild sein, das sich vergroessert.
   visibility statt display, damit das Karussell seinen Platz behaelt. */
.showcase-zoom.wird-vergroessert img,
.showcase-zoom.wird-vergroessert .showcase-zoom-badge { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .galerie-nav,
  .galerie-close,
  .galerie-dots { transition: none; }
  .showcase-zoom { transition: none; }
  .galerie-dialog[open]::backdrop,
  .galerie-dialog.overlay-aus::backdrop { animation: none; }
}

/* Die Screenshots haben einen durchsichtigen Rand um das Fenster. Ein
   box-shadow wuerde diesen Rand als Rechteck nachzeichnen; drop-shadow folgt
   der sichtbaren Fensterform. */
.galerie-karte {
  position: relative;
  line-height: 0;
  /* Ankerpunkt fuer das Aufwachsen aus dem Karussell heraus. */
  transform-origin: top left;
}
/* Die Hoechstbreite je Bild setzt das Skript aus der halben Pixelbreite
   (Retina-Aufnahmen), damit nie ueber die echte Groesse vergroessert wird. */
#galerie-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(80vw, var(--galerie-max-breite, 80vw));
  max-height: 78vh;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .28)) drop-shadow(0 4px 10px rgba(0, 0, 0, .12));
}

/* Bedienelemente: weisse, halbtransparente Kreise mit dunklem Zeichen —
   dieselbe Optik wie das Lupensymbol im Karussell. */
.galerie-nav,
.galerie-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.galerie-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
}
.galerie-prev { left: -24px; }
.galerie-next { right: -24px; }
.galerie-close {
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
}
.galerie-nav:hover,
.galerie-close:hover { background: rgba(255, 255, 255, .92); }
.galerie-nav:focus-visible,
.galerie-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Auf schmalen Bildschirmen ist neben der Karte kein Platz: die Pfeile
   ruecken innen an den Bildrand. */
@media (max-width: 700px) {
  .galerie-prev { left: 10px; }
  .galerie-next { right: 10px; }
  .galerie-nav { width: 40px; height: 40px; font-size: 1.7rem; }
  .galerie-close { top: -14px; right: -14px; }
}

.galerie-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Groesse, Zeilenabstand und Sperrung kommen aus der globalen h2-Regel,
   damit alle Abschnittsueberschriften gleich gross sind. */
.showcase-text h2 { margin: 0 0 16px; }
/* :not(.eyebrow), sonst faerbt diese Regel die blaue Vorzeile grau.
   Keine eigene Schriftgroesse: .lead und .tail sollen hier genauso gross
   sein wie in den uebrigen Abschnitten. */
.showcase-text p:not(.eyebrow) { color: var(--ink-soft); }
.showcase-text .tail { margin-top: 16px; font-size: .95rem; color: var(--ink-faint); }

@media (max-width: 860px) {
  .showcase-row { grid-template-columns: 1fr; }
  /* Einspaltig steht der Text unter dem Bild — kein Versatz nötig. */
  .showcase-text { padding-top: 0; }
}

/* =========================================================================
   PRICING — zwei Kaufwege als Karten, Website-Weg hervorgehoben
   ========================================================================= */
.pricing .features-head { margin-inline: auto; margin-bottom: 14px; }
.price-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin: 0 auto clamp(24px, 3.5vw, 34px);
  text-align: center;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 28px);
  max-width: 860px;
  margin: 0 auto;
}
.price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
}
.price-card-featured { border-color: var(--accent-ink); }
.price-card h3 { font-size: 1.15rem; margin-bottom: 12px; }
.price-amount { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.price-note { font-size: .95rem; color: var(--ink-faint); }
.price-list { margin-bottom: 20px; }
.price-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: .95rem;
  color: var(--ink);
}
.price-list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: #287b63; font-weight: 600;
}
.price-card .btn, .price-card .badge { margin-top: auto; }
.btn-disabled {
  border: 1px solid var(--hairline);
  color: var(--ink-faint);
  background: var(--bg-soft);
  cursor: default;
}
.btn-disabled:hover { transform: none; }
/* Kauf- und Testknopf nebeneinander in der Website-Kachel */
.price-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.pricing-notes {
  max-width: 760px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--hairline);
}
.pricing-notes p {
  font-size: .95rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.pricing-notes b { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .business-hero {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 44px;
  }
  .business-hero-top { align-items: flex-start; }
  .business-hero-top .hero-brand { gap: 10px; }
  .business-hero-top .hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 11px;
  }
  .business-hero-top .hero-wordmark { font-size: 1rem; }
  .business-platform { padding: 5px 9px; font-size: .7rem; }
  .btn { padding: 8px 13px; font-size: .82rem; }
  .business-hero-copy {
    margin-top: 54px;
    text-align: left;
  }
  .business-hero h1 {
    margin-block: 13px 20px;
    font-size: clamp(2.15rem, 10vw, 3.05rem);
    line-height: 1.02;
  }
  .business-hero .lead { margin-inline: 0; text-wrap: pretty; }
  .business-hero .badge { margin-inline: 0; }
  .business-hero-proof {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Auf schmalen Fenstern wieder volle Breite — 80 % waeren dort zu eng. */
  .comparison-table { overflow-x: auto; max-width: 100%; }
  .comparison-note { width: 100%; }
  .comparison-row { min-width: 680px; }
}

/* FAQ-Untergruppen (wie auf der Pro-Seite) */
.faq .faq-subsection { border-top: 1px solid var(--hairline); }
.faq .faq-subsection:first-of-type { border-top: none; }
.faq summary.qa-subgroup {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; user-select: none;
  margin: 0; padding: 16px 0 16px 14px;
  font-size: .9rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink);
}
.faq summary.qa-subgroup::-webkit-details-marker { display: none; }
.faq summary.qa-subgroup::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
  opacity: .75;
}
.faq .faq-subsection[open] > summary.qa-subgroup::after { transform: translateY(2px) rotate(-135deg); }
.faq .faq-subsection > .qa { padding-left: 14px; }
.faq .faq-subsection > .qa:first-of-type { border-top: none; padding-top: 6px; }
.faq .faq-subsection > .qa:last-of-type { padding-bottom: 24px; }

/* =========================================================================
   RECHTSSEITEN (Nutzungsbedingungen, Erstattung, Datenschutz, Impressum)
   Übernommen aus der Pro-Website, damit beide Seiten gleich aussehen.
   ========================================================================= */
.legal { padding-block: clamp(48px, 7vw, 88px); }
.legal .back { font-size: .9rem; display: inline-block; margin-bottom: 28px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 28px; }
.legal h2 { font-size: 1.2rem; margin-top: 36px; margin-bottom: 10px; }
.legal p, .legal dd { color: var(--ink-soft); max-width: 70ch; margin-bottom: 12px; }
.legal dt { font-weight: 600; color: var(--ink); margin-top: 14px; }
.legal dd { margin-left: 0; }
.legal .updated { color: var(--ink-faint); font-size: .9rem; margin-bottom: 28px; }

/* ---- Direktkauf: Mengenwahl und Kaufknopf ------------------------------ */
.kauf { width: 100%; margin-top: auto; }
.kauf-menge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.kauf-menge-label { font-size: .95rem; color: var(--ink-soft); }
.kauf-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg);
  overflow: hidden;
}
.kauf-schritt {
  min-width: 44px;              /* Fingerbreite auf dem Touchscreen */
  min-height: 44px;
  border: 0; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.kauf-schritt:hover:not(:disabled) { background: var(--accent-soft); }
.kauf-schritt:disabled { color: var(--ink-faint); cursor: default; }
.kauf-schritt:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.kauf-menge-feld {
  width: 4.5rem; min-height: 44px;
  border: 0; border-inline: 1px solid var(--hairline);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  text-align: center; padding: 0 6px;
  /* Die eigenen Pfeilchen des Browsers verdoppeln die Plus/Minus-Knöpfe und
     sind mit dem Finger kaum zu treffen. */
  -moz-appearance: textfield; appearance: textfield;
}
.kauf-menge-feld::-webkit-outer-spin-button,
.kauf-menge-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kauf-menge-feld:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.kauf-preis {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 16px;
}
.kauf-preis-betrag {
  font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kauf-preis-note { font-size: .9rem; color: var(--ink-faint); }
.kauf-staffel {
  margin-top: 6px; font-size: .9rem; color: var(--ink-soft);
  min-height: 1.6em;
}
.kauf-agb { margin-top: 14px; font-size: .9rem; color: var(--ink-soft); }
.kauf-agb label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.kauf-agb input { margin-top: 3px; }
.kauf .price-actions { margin-top: 18px; }
.kauf-knopf { width: 100%; justify-content: center; }
.kauf-knopf:disabled { opacity: .55; cursor: default; }
.kauf-knopf:disabled:hover { transform: none; }
/* Während das Kauffenster aufgeht: sichtbarer Fortschritt, nicht nur ein
   gesperrter Knopf. */
.kauf-knopf[data-laeuft="1"]::after {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: kauf-dreht .7s linear infinite;
}
@keyframes kauf-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kauf-knopf[data-laeuft="1"]::after { animation: none; }
}
.kauf-meldung { margin-top: 10px; font-size: .9rem; color: var(--ink-soft); min-height: 1.6em; }
.kauf-meldung[data-fehler="1"] { color: #B3261E; }
.kauf-fussnote { margin-top: 10px; font-size: .82rem; color: var(--ink-faint); }

/* Knopfzeile in einer FAQ-Antwort (Rubrik "Direktkauf & Download"). */
.faq-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Kaufseite (kaufen.html). Der Kaufblock steht dort nicht mehr in einer
   Preiskachel, sondern frei auf der Seite: ohne Breitengrenze liefe der
   Kaufknopf (width:100%) sonst ueber die volle Textbreite. */
.kauf-seite .kauf {
  max-width: 420px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
}
.kauf-vorteile { margin: 0 0 28px; padding: 0; list-style: none; max-width: 70ch; }
.kauf-vorteile li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.kauf-vorteile li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-ink);
  font-weight: 700;
}

/* =========================================================================
   BUSINESS-KOPFBEREICH nach Christians Keynote-Vorlage (03.10.2026)
   Maße bei 1440 px Fensterbreite: Inhaltsbreite 1032 px, linke Kante 204 px.
   Englisch und Deutsch haben eigene Abstände, weil der deutsche Titel
   vier statt drei Zeilen hat.
   Gilt nur für Englisch; Deutsch behält den Kopfbereich von main (Christian 03.10.).
   ========================================================================= */
html:lang(en) .business-hero-top .hero-icon { width: 56px; height: 56px; border-radius: 13px; }
html:lang(en) .business-hero-top .hero-wordmark { font-size: 22px; line-height: 25px; }
html:lang(en) .business-hero-top .hero-wordmark b { font-weight: 700; color: var(--ink); }
html:lang(en) .business-hero .eyebrow { line-height: 20px; }
html:lang(en) .business-hero h1 {
  /* volle 58 px, solange der Inhalt seine volle Breite hat (ab 1080 px) */
  font-size: clamp(2.2rem, 5.37vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: wrap;            /* Umbrüche stehen fest im Text */
}
/* Deutsch: untere Titelhälfte 53 statt 58 px */
html:lang(en) .business-hero h1 .h1-klein { font-size: calc(53em / 58); }
html:lang(en) .business-hero .lead { max-width: 595px; }
html:lang(en) .business-hero .lead { font-weight: 500; }
html:lang(de) .business-hero .lead { font-weight: 500; }   /* Christian 14.10.: auch deutsch medium */   /* Christian 14.10.: Einleitung medium */
html:lang(en) .business-hero .badge { display: block; width: max-content; }
html:lang(en) .business-hero .btn-store { width: max-content; }

/* Hinweis für Privatnutzer */
html:lang(en) .business-hero .pro-hint { margin: 0; font-size: .9rem; color: var(--ink-faint); }
html:lang(en) .business-hero .pro-hint a { color: var(--ink-soft); font-weight: 500; }
html:lang(en) .business-hero .pro-hint a:hover { color: var(--accent-ink); }

@media (min-width: 901px) {
  html:lang(en) .business-hero { min-height: 0; padding-top: 76px; padding-bottom: 120px; }
  html:lang(en) .business-hero-top { position: relative; }
  html:lang(en) .business-hero-copy { display: block; position: relative; margin-top: 79px; }
  html:lang(en) .business-hero h1 { margin: 14px 0 0; }
  html:lang(en) .business-hero .lead { margin: 25px 0 0; font-size: clamp(16px, 1.76vw, 19px); }   /* 19 px wie in der Vorlage */
  html:lang(en) .business-hero .badge { margin-top: 29px; }
  html:lang(en) .business-hero .btn-store { margin-top: 29px; }
  html:lang(en) .business-hero-copy > .hero-text { width: calc(63.76% - 24px); }
  /* Monitor frei gesetzt: links 658 px, oben 5 px unter der Dachzeile, 447 px breit */
  html:lang(en) .business-hero-copy > .hero-figure { position: absolute; left: 63.76%; top: 5px; width: 43.31%; }

  /* Englisch: Umbruch wie in der Vorlage („… automatic folder / monitoring …“) */
  html:lang(en) .business-hero .lead { max-width: 506px; }
  /* Privatnutzer-Hinweis auf Höhe der Marke, rechtsbündig mit dem Monitor */
  html:lang(en) .business-hero .pro-hint { position: absolute; top: 50%; left: 97%; transform: translate(-100%, -50%); white-space: nowrap; }
  html:lang(en) .business-hero .pro-hint { left: calc(63.76% + min(43.31%, 50vw - 158px)); }
}
/* Der englische Monitor ragt 73 px über die Inhaltskante hinaus. Wird das
   Fenster dafür zu schmal, schrumpft er stufenlos, statt über den Rand zu laufen. */
@media (min-width: 901px) {
  html:lang(en) .business-hero-copy > .hero-figure { width: min(43.31%, calc(50vw - 158px)); }
}
@media (max-width: 900px) {
  html:lang(en) .business-hero-copy { display: block; }
  html:lang(en) .business-hero-copy > .hero-figure { margin-top: 36px; }
  html:lang(en) .business-hero .pro-hint { margin-bottom: 14px; text-align: center; }
  html:lang(en) .business-hero-top { flex-direction: column-reverse; align-items: stretch; }
}

/* Englische Abschnittsüberschriften minimal größer (Christian 03.10.): 41 statt 38,4 px.
   Alle fünf gleich, damit die Seite einheitlich bleibt. */
html:lang(en) :is(#features-h, #showcase-h, #privacy-h, #faq-h, #cta-h) { font-size: clamp(1.7rem, 3.63vw, 2.56rem); }

/* Fassung B der englischen Startseite (Layout-Test): Hintergrundbild und
   kräftigere Überschrift. Gilt nur, wenn die Weiche <html data-layout="b">
   setzt; ohne Attribut (Fassung A, lokal, Sync-Vorschau) bleibt alles wie
   zuvor. Steht am Dateiende und hat dieselbe Stärke wie
   `html:lang(en) .business-hero h1`. Das Bild liegt im Wurzelordner, der
   Pfad gilt relativ zu dieser Datei. */
html[data-layout="b"] .business-hero {
  background: #FBFCFE url("hero-hintergrund.webp") center top / cover no-repeat;
}
html:lang(en) .business-hero h1 { font-weight: 700; }   /* Christian 14.10.: Titel in beiden Fassungen so kräftig wie Fassung B */
html[data-layout="b"] .business-hero h1 { font-weight: 700; }

/* =========================================================================
   DIREKT-DOWNLOAD-KNOPF (.btn-store)
   Selbstgebauter Knopf im Zuschnitt des Mac-App-Store-Badges: gleiche
   199x51 px sowie gleiche Randfarbe und Eckenrundung, damit beide
   nebeneinander oder an derselben Stelle gleich wirken. Ohne Apfel-Symbol
   -- das Apple-Logo darf nur im offiziellen, unveraenderten Badge
   auftauchen. Im Einsatz auf den Startseiten en, fr, pt,
   pt-pt, es, it und ja; der Knopftext steht in der jeweiligen
   Seitensprache. Die Oberzeile wird per text-transform gross gesetzt,
   im Quelltext steht sie in normaler Schreibweise.
   ========================================================================= */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  box-sizing: border-box;
  /* 199x51 = exakt die Masse des Mac-App-Store-Badges (viewBox 156.1x40,
     auf 51px Hoehe skaliert). Randfarbe und Radius sind aus dem Badge-SVG
     uebernommen: dort umschliesst ein #a6a6a6-Rahmen die schwarze Flaeche,
     Radius 9.5 Einheiten = 12.1px bei 51px Hoehe. Christians Wahl
     (Variante A, 14.08.2026). */
  /* Die Breite waechst mit dem Text, faellt aber nie unter das Badge-Mass:
     Sprachen mit kurzer Oberzeile (de, en, ja, ko, nl, pt, ru, tr, zh) bleiben
     exakt bei 199 px, die langen (es 226, fr 227, it 203, pt-pt 227) laufen
     einzeilig statt umzubrechen. Christians Wahl "Weg C", 15.08.2026, nach Vorschau auf den
     echten Seiten. Bei 320 px Fensterbreite bleiben beim breitesten Fall
     rund 45 px Rand in Hero und Try-free-Streifen, rund 31 px in der FAQ. */
  width: auto;
  min-width: 199px;
  height: 51px;
  padding: 0 18px 0 15px;
  background: #000;
  color: #fff;
  border: 1px solid #a6a6a6;
  border-radius: 12.1px;
  text-decoration: none;
  /* .cta und .trial-strip zentrieren ihren Text; ohne diese Zeile wandern
     die beiden Knopfzeilen dort in die Mitte statt links ans Symbol. */
  text-align: left;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-store:hover { transform: translateY(-1px); background: #141414; text-decoration: none; }
.btn-store:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-store .ico {
  flex: none; width: 25px; height: 25px; display: block;
  position: relative; top: 1px;   /* optisch am Textblock, nicht an der Rahmenkante */
}
.btn-store .lines {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;
}
.btn-store .small {
  font-size: 8px; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.72); font-weight: 500;
  /* Kein Umbruch -- stattdessen waechst der Knopf in der Breite. */
  white-space: nowrap;
}
.btn-store .big { font-size: 16.32px; font-weight: 600; letter-spacing: -.008em; white-space: nowrap; }
.business-hero .btn-store { margin-inline: 0; }