:root {
  --paper: #F2F4F0;
  --sunk: #E7EAE3;
  --card: #FDFDFC;
  --ink: #182122;
  --soft: #586765;
  --line: #DDE1DA;
  --petrol: #1E4E5C;
  --petrol-tint: #E3EDEB;
  --ochre: #B07C2C;
  --sage: #3C7B58;
  --violet: #5B5384;
  --terra: #A6503C;
  --mittelbg: #F3EBD9;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--petrol); }
img { max-width: 100%; }
/* Korean wraps between words, as it is written with spaces; by default the
   browser breaks between any two syllables («아닙 / 니다»). A word longer than
   the line still wraps. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

/* header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 16px 22px;
  border-bottom: 1px solid var(--line); background: rgba(253,253,252,0.8);
  backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: 0; z-index: 10;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.brand-logo { width: 30px; height: 30px; border-radius: 8px; display: block; }
.top nav a { margin-inline-start: 18px; font-size: 15px; text-decoration: none; color: var(--soft); }
.top nav a:hover { color: var(--petrol); }

.wrap { max-width: 760px; margin: 0 auto; padding: 36px 22px 56px; }

/* hero */
/* Two columns that start at the same height: the message and the ways in on
   the left, the app itself — name, what it is, the six modules — on the
   right (the owner, 2026-10-04: «блок с названием сдвинуть вправо над
   картинкой, а блок … поднять выше и выровнять — типа в два столбца»). */
.hero {
  max-width: 1080px; margin: 0 auto; padding: 56px 22px 40px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 40px; row-gap: 6px;
  grid-template-areas: "copy brand" "copy art"; align-items: start;
}
.hero-copy { grid-area: copy; }
.hero > .brand-hero { grid-area: brand; justify-self: center; }
.hero > .hero-art { grid-area: art; }
.eyebrow {
  font-size: 13.5px; letter-spacing: 1.8px; text-transform: uppercase;
  font-weight: 800; color: var(--petrol); margin-bottom: 14px;
}
/* The app's name, big, at the top of the hero (the owner, 2026-10-04: «не
   хватает большой надписи-банера с названием приложения Rilke»), and the
   slogan under it one step smaller, so the name is what the eye meets first. */
.brand-hero { margin: 0; }
.brand-hero .eyebrow { margin: 10px 0 0; }
.bh-text { min-width: 0; text-align: center; }
.bh-name {
  margin: 0; font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(54px, 7.4vw, 80px); line-height: 0.95; letter-spacing: -0.02em;
}
.bh-desc { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--soft); line-height: 1.35; }
.bh-desc .lv { white-space: nowrap; }
.hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 5.6vw, 58px);
  line-height: 1.03; margin: 0 0 0.3em; letter-spacing: -0.02em;
}
.tagline { font-size: 18px; color: var(--soft); max-width: 46ch; margin: 0 0 18px; }
.quote {
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--petrol);
  margin: 0 0 4px; padding-left: 14px; border-left: 3px solid var(--petrol);
}
.quote-by { font-size: 13px; letter-spacing: 1px; color: var(--soft); font-weight: 600; margin: 0 0 24px 17px; }

/* store badges */
/* Four ways in — the three stores and the web — as four equal tiles (the
   owner, 2026-10-04: «одинакового размера — выровняй их красиво»): one row of
   four where the column is wide, two by two in the hero and on phones. Same
   width, same height, icon and text on one edge, so they read as one set. */
.badges {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  max-width: 820px; margin: 0 auto;
}
/* The app's own colours instead of black (the owner, 2026-10-04: «цвет кнопок
   … с черного поменять на другой — стилизованный и заметный»): the icon's
   petrol running into teal, the icon's ochre on the glyphs. White text keeps
   5:1 or better across the gradient. */
.badge {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: linear-gradient(135deg, #1E4E5C 0%, #2C6C76 100%);
  color: #fff; padding: 10px 16px; border-radius: 13px;
  min-height: 62px; min-width: 0;
  box-shadow: 0 6px 16px rgba(30, 78, 92, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.badge > span { min-width: 0; text-align: start; }
.hero .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin: 0; }
/* The narrow text column (legal and info pages) holds two by two, like the hero. */
.wrap .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; margin: 0; }
.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(30, 78, 92, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.badge svg { width: 26px; height: 26px; flex: none; color: #F2C77F; }
/* Bigger since 2026-10-04 (owner: «текст в кнопках … слишком мелкий, не читаемый»),
   and the small line again after the teal made it look smaller («сделай крупнее»). */
.badge .b-small { font-size: 13.5px; opacity: 0.95; letter-spacing: 0.1px; white-space: nowrap; }
.badge .b-big { font-size: 18px; font-weight: 600; line-height: 1.1; font-family: var(--serif); white-space: nowrap; }
.badge-note { font-size: 14px; color: var(--soft); margin: 12px 0 0; }
/* Over the store buttons: the icon and the name, then the line that says
   «on every device» — the buttons alone never said WHAT they download (the
   owner, 2026-10-04: «даже на кнопках скачать не понятно что скачать»). */
.get-rilke { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.get-rilke img { width: 38px; height: 38px; border-radius: 10px; flex: none; display: block; }
.get-rilke p { margin: 0; line-height: 1.25; text-align: start; }
.get-rilke b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.get-rilke span { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }

/* hero picture: the six modules (site/modules.svg, 2026-10-04 — it replaced
   the phone mockup of a Schreiben grading from the very first version) */
.hero-art { justify-self: center; width: 100%; max-width: 500px; }
.hero-art img { display: block; width: 100%; height: auto; }

/* Type scale since 2026-10-04 (the owner: «пробегись по лендингу — шрифты выровняй,
   слишком мелкие увеличь»): body 16, card and FAQ text 15.5–16, anything secondary
   (captions, hints, footer, crumbs) at least 14, uppercase labels at least 13. */
/* sections */
.section { max-width: 1080px; margin: 0 auto; padding: 40px 22px; }
.section h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 4vw, 34px); text-align: center; margin: 0 0 6px; }
.section .sub { text-align: center; color: var(--soft); margin: 0 auto 30px; max-width: 52ch; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.feature .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 12px; font-size: 22px;
}
.feature h3 { margin: 0 0 5px; font-size: 18.5px; }
.feature p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.55; }
.ic.p { background: var(--petrol-tint); } .ic.o { background: var(--mittelbg); }
.ic.s { background: #E6F0E8; } .ic.v { background: #E9E7F0; }

.exams { text-align: center; padding: 8px 22px 40px; }
.exams .e { font-size: 14px; letter-spacing: 2px; font-weight: 800; color: var(--petrol); }
.exams .d { color: var(--soft); font-size: 15px; max-width: 56ch; margin: 10px auto 0; }

/* legal/support page content */
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 6vw, 42px); margin: 0.1em 0 0.3em; letter-spacing: -0.01em; }
.wrap h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 1.8em 0 0.35em; }
.lede { color: var(--soft); font-size: 17px; max-width: 60ch; }
.meta { color: var(--soft); font-size: 14px; margin-top: 0; }
p, li { font-size: 16px; }
.draft { background: var(--mittelbg); color: var(--ochre); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; margin: 0 0 6px; }
.btn { display: inline-block; background: var(--petrol); color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 15px; margin-top: 6px; }
.disclaimer { color: var(--soft); font-size: 14.5px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; }
ul { padding-left: 20px; }

.foot { border-top: 1px solid var(--line); margin-top: 20px; }
.foot .inner { max-width: 1080px; margin: 0 auto; padding: 26px 22px; color: var(--soft); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--petrol); }

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr; grid-template-areas: "brand" "copy" "art";
    padding-top: 36px; text-align: center;
  }
  .quote { display: inline-block; text-align: left; }
  /* Phones: two by two, centred, every tile the same size. */
  .badges, .hero .badges, .wrap .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; margin: 0 auto; gap: 8px; }
  .badge { padding: 10px 10px; gap: 8px; }
  .badge svg { width: 23px; height: 23px; }
  .badge .b-small { font-size: 12.5px; letter-spacing: 0; }
  .badge .b-big { font-size: 16.5px; }
  .hero-art { max-width: 380px; }
}

/* Screenshot gallery — a horizontal strip, the way a store shows them. Small
   cards that scroll and snap; the frames carry their own background, so they
   need no card around them. */
.shots {
  display: flex; gap: 14px; margin-top: 26px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 14px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.shots figure {
  margin: 0; flex: 0 0 168px; scroll-snap-align: start;
}
.shots img {
  display: block; width: 168px; height: auto; border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(24,33,34,.10), 0 8px 20px rgba(24,33,34,.08);
}
.shots figcaption {
  margin-top: 8px; font-size: 13.5px; color: var(--soft); line-height: 1.35;
}
.shots::-webkit-scrollbar { height: 8px; }
.shots::-webkit-scrollbar-track { background: var(--sunk); border-radius: 8px; }
.shots::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 8px;
}
.shots::-webkit-scrollbar-thumb:hover { background: var(--petrol); }
.shots-hint {
  margin-top: 4px; font-size: 14px; color: var(--soft); text-align: center;
}
.shots-note {
  margin-top: 22px; font-size: 15px; color: var(--soft); text-align: center;
  border-top: 1px solid var(--line); padding-top: 16px;
}

/* Language switcher — a segmented control, not a sixth nav link. Separated by
   a rule so the eye stops at it, and the current language sits on a raised
   surface the way a real switch does. */
.lang {
  margin-left: 20px; padding-left: 20px; position: relative;
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
}
.lang::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 20px; margin-top: -10px; background: var(--line);
}
.lang svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--soft); margin-right: 6px; }
.lang a, .lang b {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .05em; line-height: 1;
  text-decoration: none; transition: background .15s, color .15s;
}
.lang a { color: var(--soft); }
.lang a:hover { color: var(--petrol); background: var(--petrol-tint); }
.lang a:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.lang b { background: var(--petrol); color: #fff; }
.legal-note { color: var(--soft); font-size: 13.5px; }
@media (max-width: 640px) {
  .lang { margin-left: 12px; padding-left: 12px; }
  .lang svg { display: none; }
  .lang a, .lang b { padding: 5px 10px; font-size: 13.5px; }
}

/* FAQ — plain disclosure rows, no accordion library. */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line); padding: 14px 2px;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--ink); font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--petrol); font-weight: 700; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 9px 0 2px; color: var(--soft); font-size: 16px; line-height: 1.55; }

/* The exam index: twelve links that have to stay readable on a phone. */
.examlinks { line-height: 2.1; }
.examlinks a { white-space: nowrap; }
/* The part tables on the exam pages. */
table.parts { width: 100%; border-collapse: collapse; margin: 10px 0 22px; }
table.parts td { padding: 7px 10px; border-bottom: 1px solid rgba(24,33,34,.10); font-size: 15px; }
table.parts td:first-child { font-weight: 700; white-space: nowrap; }
table.parts td:last-child { text-align: end; white-space: nowrap; color: #586765; }
/* Four columns of exam data do not fit a phone, and a table that does not fit
   does not wrap — it pushes the page wider. These pages are read almost
   entirely on phones (someone searching "Goethe B1 Hören wie oft"), so the
   table scrolls inside itself instead. Not verified on a real handset: headless
   Chrome on macOS will not render a viewport below ~500px, it just crops the
   screenshot, which looks exactly like a broken layout and is not one. */
@media (max-width: 700px) {
  table.parts { display: block; width: 100%; overflow-x: auto; }
  table.parts td { font-size: 15px; padding: 7px 8px; }
}

/* ---- Multilingual site (tools/site/build_site.py) ------------------------ */

/* The language menu. Twenty-seven languages do not fit a pill switch, so a
   plain <details>: it works without JavaScript, and every language version is
   an ordinary link a crawler follows — the hreflang cluster is reachable by
   links as well as declared in the head. */
.langs {
  position: relative; display: inline-block; vertical-align: middle;
  margin-inline-start: 20px; padding-inline-start: 20px;
}
.langs::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: 1px; height: 20px; margin-top: -10px; background: var(--line);
}
.langs summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14px;
  font-weight: 700; color: var(--petrol); background: var(--petrol-tint);
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 17px; height: 17px; flex: none; }
.langs summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.langs ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 8px; list-style: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(24,33,34,.16);
  columns: 2; column-gap: 4px; width: max-content; max-width: min(92vw, 440px);
}
.langs li { break-inside: avoid; }
.top nav .langs li a {
  display: block; margin: 0; padding: 7px 12px; border-radius: 9px;
  color: var(--ink); font-size: 15px; white-space: nowrap;
}
.top nav .langs li a:hover { background: var(--petrol-tint); color: var(--petrol); }
.top nav .langs li a[aria-current="page"] { font-weight: 700; color: var(--petrol); }
@media (max-width: 640px) {
  .langs { margin-inline-start: 10px; padding-inline-start: 10px; }
  .langs summary span { display: none; }
  .langs ul { columns: 2; }
}

/* The preview video leads the carousel: a tile like the screenshots, loading
   nothing until it is played. */
.shots figure.vid video {
  display: block; width: 168px; height: auto; aspect-ratio: 886 / 1920;
  border-radius: 12px; background: #0f2a31; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(24,33,34,.10), 0 8px 20px rgba(24,33,34,.08);
}

/* The invitation into the web app, under the hero. Warm gold since
   2026-10-04 — in petrol it melted into the store buttons right under it (the
   owner: «цвет сливается с кнопками для скачивания. Подбери заметный цвет в
   стиле лендинга»). The icon's ochre, light, with ink text (7:1 and better)
   and a solid petrol button — the one dark thing in it. */
.webapp {
  max-width: 1080px; margin: 6px auto 0; padding: 0 22px;
}
.webapp .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding: 22px 26px; border-radius: 18px;
  background: linear-gradient(135deg, #F8E7C0 0%, #EFCB80 100%); color: var(--ink);
  border: 1px solid rgba(176, 124, 44, 0.35);
  box-shadow: 0 8px 22px rgba(176, 124, 44, 0.18);
}
.webapp h2 {
  margin: 0 0 4px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(21px, 3vw, 27px); line-height: 1.2;
}
.webapp p { margin: 0; color: #4A4033; font-size: 16px; }
.webapp a.go, .webapp-hero a.go, .cta-top a.go {
  flex: none; display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--petrol); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 12px rgba(30, 78, 92, 0.28);
}
.webapp a.go:hover, .webapp-hero a.go:hover, .cta-top a.go:hover { background: #163E49; }

/* Breadcrumbs on the exam pages. */
.crumbs {
  max-width: 1080px; margin: 18px auto -22px; padding: 0 22px;
  font-size: 14.5px; color: var(--soft);
}
.crumbs a { color: var(--soft); }
.crumbs a:hover { color: var(--petrol); }

/* Column heads on the exam part tables. */
table.parts th {
  text-align: start; padding: 7px 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--soft);
  border-bottom: 1px solid rgba(24,33,34,.22);
}
table.parts th:last-child { text-align: end; }

/* Right-to-left pages (ar, fa, ur): the exam's own German stays left to right,
   as in the app. */
/* Rilke's line stays German and left to right: on a right-to-left page the
   block hugs its text and sits at the right edge, bar and all. */
[dir="rtl"] .quote { width: fit-content; margin-left: auto; margin-right: 0; text-align: left; }
[dir="rtl"] .examlinks { text-align: center; }

/* Phones: the invitation into the web app right under the headline, the app
   badges right under it with a line saying what they are, the decorative
   phone last. The mockup used to come first, and the headline and every way
   into the product started below the first screen (the owner, 2026-10-04). */
.webapp-hero { display: none; }
@media (max-width: 760px) {
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-copy h1 { order: 2; }
  .webapp-hero {
    order: 3; display: block; width: 100%; margin: 16px 0 4px;
    padding: 18px 18px 20px; border-radius: 16px;
    background: linear-gradient(135deg, #F8E7C0 0%, #EFCB80 100%); color: var(--ink);
    border: 1px solid rgba(176, 124, 44, 0.35);
    box-shadow: 0 8px 22px rgba(176, 124, 44, 0.18); text-align: center;
  }
  .webapp-hero .wh-title {
    margin: 0 0 4px; font-family: var(--serif); font-weight: 600;
    font-size: 21px; line-height: 1.22;
  }
  .webapp-hero .wh-sub { margin: 0 0 14px; color: #4A4033; font-size: 15.5px; line-height: 1.45; }
  .brand-hero { margin: 0 0 18px; }
  .bh-name { font-size: 50px; }
  .bh-desc { margin-top: 5px; font-size: 15.5px; }
  .hero-copy .get-rilke { order: 4; justify-content: center; margin: 18px 0 10px; }
  .hero-copy .badges { order: 5; }
  .hero-copy .tagline { order: 6; margin-top: 26px; }
  .hero-copy .quote { order: 7; }
  .hero-copy .quote-by { order: 8; }
  .hero .hero-art { order: 1; margin-top: 8px; }
  .webapp { display: none; }
}

/* The ways in at the top of every exam page: web app, then the stores. */
.cta-top { margin: 4px 0 34px; }
.cta-top .webapp-box {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 18px 22px; border-radius: 16px;
  background: linear-gradient(135deg, #F8E7C0 0%, #EFCB80 100%); color: var(--ink);
  border: 1px solid rgba(176, 124, 44, 0.35);
  box-shadow: 0 8px 22px rgba(176, 124, 44, 0.18);
}
.cta-top .wh-title {
  margin: 0 0 3px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(19px, 2.6vw, 23px); line-height: 1.22;
}
.cta-top .wh-sub { margin: 0; color: #4A4033; font-size: 15.5px; }
.cta-top .get-rilke { margin: 18px 0 10px; }
.cta-top .badges { margin: 0; }
@media (max-width: 760px) {
  .cta-top .webapp-box { justify-content: center; text-align: center; }
  .cta-top .get-rilke { justify-content: center; }
  .cta-top .badges { margin: 0 auto; }
}

/* «Start practising» in the header: to the landing's ways in (the web app and
   the stores), from every page (the owner, 2026-10-04). On a phone the header
   already wraps, so the legal links leave it there — they are in every footer. */
.top nav a.start {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--petrol); color: #fff; font-weight: 700;
}
.top nav a.start:hover { background: var(--petrol-press, #173E49); color: #fff; }
.hero { scroll-margin-top: 90px; }
@media (max-width: 640px) {
  .top nav a.legal { display: none; }
  .top nav a.start { padding: 7px 14px; }
}

/* The browser card links straight into the web app. */
.feature .more { margin-top: 10px; }
.feature .more a { font-weight: 700; color: var(--petrol); text-decoration: none; }
.feature .more a:hover { text-decoration: underline; }

/* All feature cards the same height — one long card used to stretch its row
   and leave the grid ragged (the owner, 2026-10-04). Not on a phone, where the
   cards stack and equal heights would only add empty space. */
@media (min-width: 560px) {
  .features { grid-auto-rows: 1fr; }
}

/* The banner's text takes the room and wraps, so the button stays beside it
   on wide screens instead of dropping under a long title. */
.webapp .inner > div, .cta-top .webapp-box > div { flex: 1 1 320px; min-width: 0; }

/* Ads (AdSense; slots from build_site.py, filled by ads.js). A quiet label,
   room held so the page does not jump, nothing left behind if Google has no ad. */
.ad { max-width: 1080px; margin: 8px auto 28px; padding: 0 22px; text-align: center; }
.ad-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 0 0 6px; }
.ad-text ins.adsbygoogle:not([data-ad-status]) { min-height: 280px; }
.ad-bottom ins.adsbygoogle:not([data-ad-status]) { min-height: 90px; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-rail { position: fixed; top: 96px; right: 16px; margin: 0; padding: 0; z-index: 5; display: none; }
[dir=rtl] .ad-rail { right: auto; left: 16px; }
.ad-rail.on { display: block; }
@media (max-width: 1463px) { .ad-rail.on { display: none; } }

/* «Verträge hier kündigen» (site/kuendigen.html, § 312k BGB) */
.kform { margin: 22px 0 10px; display: grid; gap: 16px; max-width: 560px; }
.kform fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; margin: 0; }
.kform legend { font-weight: 700; font-size: 15.5px; padding: 0 6px; }
.kform .opt { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 15px; }
.kform .opt > input[type=radio] { margin-top: 4px; flex: none; }
.kform .opt > span { flex: 1; min-width: 0; }
.kform .field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.kform input:not([type=radio]), .kform textarea {
  font: inherit; font-weight: 400; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.kform .note { font-weight: 400; font-size: 14px; color: var(--soft); }
.kform [hidden], #form-view[hidden], #done-view[hidden] { display: none !important; }
.kform .err { color: #A6503C; font-weight: 600; margin: 0; }
.kbtn {
  font: inherit; font-weight: 700; font-size: 16px; color: #fff; background: var(--petrol);
  border: 0; border-radius: 999px; padding: 13px 28px; cursor: pointer; justify-self: start;
}
.kbtn:disabled { opacity: .6; cursor: default; }
.kbtn.ghost { background: var(--petrol-tint); color: var(--petrol); }
.kdone { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0; }
.kdone dt { font-weight: 700; }
.kdone dd { margin: 0; overflow-wrap: anywhere; }
.wrap .hint { color: var(--soft); font-size: 15px; }
@media print { .top, .foot, .kbtn { display: none !important; } }