/* ============================================================
   Inselwelt for the subpages.

   The 436 subpages carry a different, older markup generation than the homepage: .section
   instead of plain <section>, .section-badge instead of .eyebrow, .footer-inner instead of
   .foot-inner, plus nine recurring blocks (trigger quote, pricing cards, beta reviews, FAQ
   list, related grid, comparison table, sidebar, stats, footer link cloud) that used to be
   styled by an inline <style> in every single page.

   This file is what replaces all of that. Loaded after tokens.css, home.css and themes/insel.css,
   so the tokens, the container, the buttons, the nav and the night footer already come from
   there and only the vocabulary of the subpages is added here. The order in the head is
   fonts, tokens, home, insel, subpage.

   Same rules as the homepage: paper ground, 2px ink outline, hard shadow instead of a blur,
   green for action, the handwriting only for the eyebrow. Nothing here is dark.
   Contrast: ink on paper 15:1, white on #3E7B12 5.2:1, #155A82 on #E4F3D2 6.4:1.
   ============================================================ */

/* ---------- the shell ---------- */
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--ink); }
.nav-links > a { font-weight: 600; font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-links > a:hover { border-bottom-color: var(--green-d); }
.nav-links > a.btn { border-bottom: 0; }
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--card); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-1); color: var(--ink); }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-md); padding: 6px; min-width: 170px; box-shadow: var(--shadow-2); display: grid; gap: 2px; max-height: 70vh; overflow-y: auto; }
.lang-switch .lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.lang-switch .lang-menu a:hover { background: var(--pink-soft); color: var(--green-dd); }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 11px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-1); }
.nav-mobile-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- sections ---------- */
main > section, body > section, .section { padding: var(--sp-9) 0; position: relative; background: var(--paper); }
main > section.section-alt, body > section.section-alt, main > section.section-dark, body > section.section-dark { background: linear-gradient(var(--paper), var(--grass-3) 120px, #D8EFCB); color: var(--ink); } /* the old dark band becomes a meadow: this world has no night above the fold */
main > section.section-alt + section.section-alt, main > section.section-dark + section.section-dark { background: #D8EFCB; }
.section-header { text-align: center; max-width: 760px; margin: 0 auto var(--sp-6); }
.section-header h1, .section-header h2 { font-size: clamp(30px, 4.2vw, 50px); margin: 14px 0; }
.section-header h2 + p, .section-header h1 + p { color: var(--ink-soft); font-size: 18px; }
.section-badge { display: inline-block; font-family: var(--font-hand); font-size: 20px; line-height: 1; padding: 7px 14px 8px; border-radius: 14px 18px 15px 17px / 17px 14px 18px 15px; border: 2px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); transform: rotate(-1.2deg); color: var(--ink); }
.hero-sub { font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 640px; margin-inline: auto; }
.breadcrumb { font-size: 14px; color: var(--ink-mute); margin-bottom: 18px; }
.breadcrumb a { border-bottom: 2px solid var(--green-d); }
.breadcrumb a:hover { color: var(--green-d); }
.breadcrumb-sep { padding: 0 6px; }

/* the first band of a subpage is sky with a hill, the same entrance as the homepage.
   The sun and the two small clouds are the real elements of the theme, insel.js puts them here. */
.i-subhero, main > section:first-of-type, .content-hero { position: relative; overflow: hidden; background: linear-gradient(var(--sky), var(--sky-2) 70%); padding-bottom: 118px; isolation: isolate; }
main > section:first-of-type > .container, .content-hero > .container, .content-hero > .content-hero-inner { position: relative; z-index: 2; }
.i-subhero::after, main > section:first-of-type::after, .content-hero::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -70px; height: 170px; z-index: 0; background: var(--grass); border-top: 2px solid var(--ink); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
main > section:first-of-type + .section, main > section:first-of-type + section,
.content-hero + .section, .content-hero + *, .i-subhero + * { background: linear-gradient(var(--grass) 0, var(--paper) 200px); --i-meadow: 1; } /* the meadow runs on into the next band */

/* the same protection as for .container: no cloud may ever paint over an article column */
.article-layout, .content-hero-inner, .beta-reviews > *, .cta-content { position: relative; z-index: 1; }

/* ---------- article pages: text column and sidebar ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); align-items: start; }
.article-prose { max-width: 72ch; }
.article-prose h2 { font-size: clamp(26px, 3vw, 36px); margin: var(--sp-7) 0 14px; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose h3 { font-size: 21px; margin: var(--sp-5) 0 8px; }
.article-prose p, .article-prose li { color: var(--ink-soft); }
.article-prose p { margin-bottom: var(--sp-4); }
.article-prose ul, .article-prose ol { margin: 0 0 var(--sp-4) 1.15rem; }
.article-prose li { margin-bottom: 6px; }
.article-prose strong { color: var(--ink); font-weight: 700; }
.article-prose blockquote { margin: var(--sp-5) 0; padding: 18px 22px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); font-family: var(--font-hand); font-size: 20px; color: var(--ink); }
.article-prose a { border-bottom: 2px solid var(--green-d); }
.article-prose a:hover { color: var(--green-d); }
.article-sidebar { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: var(--sp-4); }
.sidebar-card, .sidebar-cta { border: 2px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-2); padding: 18px 20px; }
.sidebar-card h4 { font-family: var(--font-hand); font-weight: 400; font-size: 21px; margin-bottom: 10px; }
.sidebar-toc { list-style: none; display: grid; gap: 2px; }
.sidebar-toc a { display: block; padding: 7px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-soft); }
.sidebar-toc a:hover { background: var(--pink-soft); color: var(--green-dd); }
.sidebar-cta { background: var(--pink-soft); }
.sidebar-cta p { font-size: 15px; margin-bottom: 12px; color: var(--ink-soft); }
.article-faq { margin-top: var(--sp-8); }

/* ---------- the nine blocks ---------- */
/* a quote pinned to the page like a note */
.trigger-quote { max-width: 760px; margin: var(--sp-6) auto 0; padding: 22px 26px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); text-align: start; transform: rotate(-.5deg); }
.trigger-quote__icon { margin-inline-end: 6px; }
.trigger-quote__text { font-family: var(--font-hand); font-size: clamp(19px, 2vw, 23px); font-weight: 400; line-height: 1.45; margin: 0; color: var(--ink); }
.trigger-quote__attr { margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.trigger-quote__attr strong { color: var(--ink); }
.trigger-quote__stars { color: #E0A800; letter-spacing: .1em; margin-inline-end: 6px; } /* 4.6:1 on white, the yellow of the sun would not carry text */

/* the ways to use the app, as cards on the meadow */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); }
.pricing-card--highlight { background: var(--pink-soft); }
.pricing-card__badge { position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(-50%); padding: 5px 12px; background: var(--green-d); color: #fff; border: 2px solid var(--line); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pricing-card__name { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin: 0; }
.pricing-card__price { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; color: var(--green-d); }
.pricing-card__price small { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.pricing-card__sub { font-size: 15px; color: var(--ink-soft); }
.pricing-card ul { margin: 8px 0 0 1.1rem; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.local-price-label { font-size: 14px; color: var(--ink-mute); }

/* features and steps, the same badge as the stations on the homepage */
.features-grid, .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.feature-card, .step-card { padding: 22px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); }
.feature-card h3, .step-card h3 { font-size: 19px; margin-bottom: 8px; }
.feature-card p, .step-card p { color: var(--ink-soft); font-size: 16px; }
.feature-icon, .feature-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--pink-soft); font-size: 20px; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--green-d); color: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.highlight-box { margin: var(--sp-5) 0; padding: 20px 22px; border: 2px solid var(--line); border-radius: 16px; background: var(--pink-soft); box-shadow: var(--shadow-1); }
.highlight-box h4 { font-family: var(--font-hand); font-weight: 400; font-size: 21px; margin-bottom: 8px; }
.highlight-box ul { margin: 0 0 0 1.1rem; }
.highlight-box li { color: var(--ink-soft); margin-bottom: 4px; }

/* voices from the closed beta */
main > section.beta-reviews, .beta-reviews { padding: var(--sp-9) var(--sp-5); background: linear-gradient(var(--sky-2), var(--paper) 70%); }
.beta-reviews__pill { display: inline-block; font-family: var(--font-hand); font-size: 20px; padding: 7px 14px 8px; border: 2px solid var(--line); border-radius: 14px 18px 15px 17px / 17px 14px 18px 15px; background: var(--card); box-shadow: var(--shadow-1); transform: rotate(-1.2deg); }
.beta-reviews__heading { font-size: clamp(26px, 3.4vw, 40px); margin: 16px 0 8px; }
.beta-reviews__heading-accent { color: var(--green-d); }
.beta-reviews__rating-meta { text-align: center; font-size: 15px; color: var(--ink-soft); margin-bottom: var(--sp-5); }
.beta-reviews__rating-meta span { font-weight: 700; color: var(--ink); }
.beta-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); max-width: var(--wrap); margin: 0 auto; }
.beta-reviews__card { padding: 22px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-2); transform: rotate(-.4deg); }
.beta-reviews__card:nth-child(even) { transform: rotate(.5deg); }
.beta-reviews__card--featured { background: var(--pink-soft); }
.beta-reviews__card-quote { font-family: var(--font-hand); font-size: 20px; line-height: 1.45; color: var(--ink); }
.beta-reviews__card-author { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.beta-reviews__cta { text-align: center; margin-top: var(--sp-5); }
.beta-reviews__cta a { font-weight: 700; border-bottom: 2px solid var(--green-d); }
.beta-reviews__cta a:hover { color: var(--green-d); }

/* questions, the same pressed cards as on the homepage */
.faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-list details, .faq-item { border: 2px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 4px 0 var(--ink); padding: 16px 18px; transition: transform .12s ease, box-shadow .12s ease; }
.faq-list details[open], .faq-item[open] { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.faq-list summary, .faq-item summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-list summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--green-d); flex: 0 0 auto; }
.faq-list details[open] summary::after, .faq-item[open] summary::after { content: "\2013"; }
.faq-list details > p, .faq-item p, .faq-list .answer { margin-top: 12px; color: var(--ink-soft); }

/* what to read next */
main > section.related-section, .related-section { padding: var(--sp-8) 0; background: var(--paper); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.related-card { display: block; padding: 20px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); transition: transform .08s ease, box-shadow .08s ease; }
.related-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); background: var(--pink-soft); }
.related-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.related-card h3, .related-card__title { font-size: 18px; margin-bottom: 6px; }
.related-card p, .related-card__sub { font-size: 15px; color: var(--ink-soft); }
.related-card-num { font-family: var(--font-display); font-weight: 800; color: var(--green-d); }

/* the comparison, in both markups that exist */
.comparison-table, .compare-table, main table, body > section table { width: 100%; max-width: 880px; margin: var(--sp-5) auto 0; border-collapse: collapse; border: 2px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--card); font-size: 15px; }
.compare-table th, .compare-table td, .comparison-table th, .comparison-table td, main table th, main table td, body > section table th, body > section table td { padding: 13px 16px; border-bottom: 2px solid var(--line-soft); text-align: center; }
.compare-table th, .comparison-table th, main table th, body > section table th { font-family: var(--font-display); font-weight: 800; text-align: start; background: var(--paper-2); }
.compare-table tr:last-child td, .comparison-table tr:last-child td { border-bottom: 0; }
.compare-table td:last-child, .comparison-table td:last-child { background: var(--pink-soft); font-weight: 600; }
.comp-row, .comp-header { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; }
.comp-header { background: var(--paper-2); font-family: var(--font-display); font-weight: 800; }
.comp-header .comp-us { background: var(--green-d); color: #fff; }
.comp-row > div, .comp-header > div { padding: 13px 16px; border-bottom: 2px solid var(--line-soft); }
.comp-row .comp-us { background: var(--pink-soft); font-weight: 600; }
.comp-row:last-child > div { border-bottom: 0; }

/* the numbers under the headline */
.hero-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.stat { text-align: center; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--green-d); }
.stat-label { font-size: 14px; color: var(--ink-soft); }
.stat-divider { width: 2px; height: 34px; background: var(--line-soft); }

/* the founder note, the same postcard as on the homepage */
.founder-box { position: relative; max-width: 760px; margin: var(--sp-6) auto 0; padding: 26px 28px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 6px 0 var(--ink); transform: rotate(-.6deg); }
.founder-box__quote, .founder-box p { color: var(--ink-soft); }
.founder-box strong { color: var(--ink); }

/* the closing call, the same sky card as on the homepage */
main > section.cta-section, .cta-section { padding: var(--sp-8) 0; background: var(--paper); }
.cta-content { position: relative; max-width: 860px; margin: 0 auto; padding: 48px 40px 60px; text-align: center; border: 2px solid var(--line); border-radius: var(--r-wonk); background: linear-gradient(var(--sky), var(--sky-2)); box-shadow: var(--shadow-3); overflow: hidden; }
.cta-content h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; }
.cta-content > p { max-width: 560px; margin: 0 auto 22px; color: var(--ink-soft); font-size: 18px; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.cta-note { margin-top: 16px; font-size: 14px; color: var(--ink-mute); }
.cta-mascot { width: 88px; height: 88px; margin: 0 auto 8px; object-fit: contain; }
.cta-content .text-coral { color: var(--green-d); }

/* ---------- footer: the same night as on the homepage, its own class names ---------- */
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 2px solid rgba(245, 239, 220, .25); font-size: 14px; color: var(--night-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-links a { color: var(--paper-2); }
.footer-links a:hover { color: var(--sky); }
.footer-links h4 { color: var(--sky); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.footer-brand p, .footer-bottom { color: var(--night-soft); }
.footer-brand .nav-logo { color: var(--paper-2); }
.killer-footer-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.killer-footer-links a { padding: 8px 14px; border: 2px solid rgba(245, 239, 220, .35); border-radius: var(--r-pill); font-size: 14px; color: var(--paper-2); }
.killer-footer-links a:hover { border-color: var(--sky); color: var(--sky); }
.footer a:focus-visible { outline-color: var(--sun); }

/* ---------- the reveal of the old pages, same timing as .rv on the homepage ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease-out); }
.js .reveal.in, .js .reveal.visible, .js .reveal.active { opacity: 1; transform: none; }
.i-measuring .reveal { transform: none !important; transition: none !important; } /* insel.js measures the cloud strips without the reveal offset */
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- narrow ---------- */
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; order: 2; }
}
@media (max-width: 760px) {
  .section { padding: var(--sp-8) 0; }
  main > section:first-of-type, .content-hero { padding-bottom: 120px; }
  main > section:first-of-type::before, .content-hero::before { width: 50px; height: 50px; top: 18px; }
  .nav-mobile-toggle { display: flex; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: absolute; top: 100%; inset-inline: 0; padding: 16px var(--sp-5) 20px; background: var(--nav-bg); border-bottom: 2px solid var(--line); }
  .beta-reviews { padding-inline: var(--sp-4); }
  main table, body > section table { display: block; width: 100%; max-width: 100%; overflow-x: auto; } /* a table is the one block that cannot reflow, it scrolls in its own box */
  main div[style*="overflow-x"] > table, body > section div[style*="overflow-x"] > table { display: table; width: max-content; min-width: 100%; } /* already inside a scrolling wrapper: leave the table a table, or the two scroll boxes fight */
  .footer-inner { flex-direction: column; align-items: start; }
}

/* the sky band of a subpage carries the same sun and clouds as the hero of the homepage */
/* Befund A2: die Sonne stand oben und lief unter die Ueberschrift, auf jeder Breite eine
   andere Zeile. Sie steht jetzt im unteren Band, das ohnehin fuer den Huegel reserviert
   ist und immer leer bleibt: dort kann kein Text sie treffen, und sie geht hinter der
   Kuppe unter. */
.i-subhero .i-sun { top: auto; bottom: 76px; right: 7%; left: auto; }
/* Befund A1: die Wolke lag bei festem top auf der Ueberschrift von 106 Artikelseiten.
   Ein fester Wert kann nicht wissen, wo der Text anfaengt, also raeumt sie das Feld:
   Sonne und Huegel tragen den Himmel der Unterseiten allein. */
.i-subhero .i-cloud.c1 { display: none; }
.i-subhero .i-cloud.c2 { display: none; } /* the headline of a subpage runs full width, one cloud plus the sun is all the sky it can carry */
[dir="rtl"] .i-subhero .i-sun { right: auto; left: 7%; }
[dir="rtl"] .i-subhero .i-cloud.c1 { left: auto; right: 3%; }
@media (max-width: 760px) {
  /* Befund A2 auf schmalen Schirmen: die Ueberschrift laeuft ueber die volle Breite, rechts
     ist kein Platz. Die Sonne geht deshalb unten im reservierten Band hinter dem Huegel unter. */
  .i-subhero .i-sun { scale: .72; bottom: 66px; }
  .i-subhero .i-cloud.c2 { display: none; }
}

/* the logo of the subpages carries its old gradient as an svg attribute, css wins over that */
.nav-logo svg rect { fill: var(--green); }
.nav-logo svg circle { fill: var(--sun); }

/* five pages (legal, press) use the older language picker with a button and a dropdown */
.lang-switcher { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--card); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-1); color: var(--ink); }
.lang-btn svg { width: 16px; height: 16px; }
.lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 170px; padding: 6px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.lang-dropdown.open { display: grid; gap: 2px; }
.lang-dropdown a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.lang-dropdown a:hover, .lang-dropdown a.active { background: var(--pink-soft); color: var(--green-dd); }

/* Der Abschluss der Unterseiten bekommt denselben Horizont wie die Startseite. Dort ist der
   Huegel ein eigenes Element, hier wird er gezeichnet: die Seiten selbst bleiben unangetastet.
   Reihenfolge: Sonne 0, Huegel 1, Text und Moewen 2. Die Moewen liegen ueber dem Huegel, sonst
   rastert der Browser ab doppelter Pixeldichte schwarze Bloecke ueber die Kuppe. */
.cta-content.i-cta { isolation: isolate; }
.cta-content.i-cta::before { content: ""; position: absolute; left: 12%; bottom: 22px; width: 68px; height: 68px; z-index: 0; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); }
.cta-content.i-cta > .i-rays { position: absolute; left: calc(12% - 22px); bottom: 3px; width: 112px; height: 112px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(var(--ink) 0 2.8deg, transparent 2.8deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 42px, #000 43px, #000 54px, transparent 55px);
  mask: radial-gradient(circle, transparent 42px, #000 43px, #000 54px, transparent 55px); }
.cta-content.i-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -34px; height: 92px; z-index: 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--grass); border-top: 2px solid var(--ink); }
.cta-content.i-cta > * { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .cta-content.i-cta::before { left: 10%; bottom: 26px; width: 56px; height: 56px; }
}

/* Neun Unterseiten haben kein <main>, ihre Abschnitte haengen direkt am Body. Nur dort ist
   der erste Body-Abschnitt der Seitenkopf. Auf den 114 Seiten mit nachgestelltem FAQ waere
   es sonst der FAQ-Block am Seitenende, und der bekam bisher Himmel und Huegel. */
body:not(:has(main)) > section:first-of-type { position: relative; overflow: hidden; background: linear-gradient(var(--sky), var(--sky-2) 70%); padding-bottom: 118px; isolation: isolate; }
body:not(:has(main)) > section:first-of-type > .container { position: relative; z-index: 2; }
body:not(:has(main)) > section:first-of-type::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -70px; height: 170px; z-index: 0; background: var(--grass); border-top: 2px solid var(--ink); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
body:not(:has(main)) > section:first-of-type + section { background: linear-gradient(var(--grass) 0, var(--paper) 200px); --i-meadow: 1; }

/* ---------- der Uebergang in die Nacht, auf jeder Unterseite ---------- */
/* Die Nacht steigt als Huegel aus dem letzten Abschnitt in den Fuss. Der Platz dafuer ist
   hier reserviert, damit beim Laden nichts springt. Der Huegel liegt hinter dem Inhalt
   (.container hat z-index 1) und ueber der Wolkenebene. Seiten mit Abschlusskarte
   (.cta-section) haben ihren eigenen Horizont und bleiben aussen vor. */
main:not(:has(~ section)) > section:last-of-type:not(.cta-section) { position: relative; padding-bottom: calc(var(--sp-8) + 58px); --i-meadow: 1; }
main:not(:has(~ section)) > section:last-of-type:not(.cta-section)::before {
  /* volle Breite, kein Ueberstand: ein Ueberstand schoebe das Dokument seitwaerts */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 66px; z-index: 0;
  background: var(--night); border-top: 2px solid var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}
/* der Inhalt des letzten Abschnitts liegt sicher vor dem Huegel */
main:not(:has(~ section)) > section:last-of-type > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  main:not(:has(~ section)) > section:last-of-type:not(.cta-section) { padding-bottom: calc(var(--sp-8) + 40px); }
  main:not(:has(~ section)) > section:last-of-type:not(.cta-section)::before { height: 46px; }
}

/* Steht ein Abschnitt hinter dem </main> (114 Seiten mit nachgestelltem FAQ), ist ER das Ende
   der Seite und bekommt den Uebergang in die Nacht. */
body > section:last-of-type:not(.cta-section) { position: relative; padding-bottom: calc(var(--sp-8) + 58px); --i-meadow: 1; }
body > section:last-of-type:not(.cta-section)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 66px; z-index: 0;
  background: var(--night); border-top: 2px solid var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}
body > section:last-of-type > .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  body > section:last-of-type:not(.cta-section) { padding-bottom: calc(var(--sp-8) + 40px); }
  body > section:last-of-type:not(.cta-section)::before { height: 46px; }
}

/* Befund A6: vier Seiten tragen beide Umschalter, den neuen und den alten. Ab 768 px sind
   beide sichtbar, nebeneinander. Der alte weicht, wo der neue steht. */
body:has(details.lang-switch) .lang-switcher { display: none; }

/* Befund A3: die Vergleichstabelle scrollt in ihrem eigenen Kasten, aber nichts sagt es.
   Ein Schatten an der rechten Kante zeigt, dass da noch etwas ist. */
@media (max-width: 760px) {
  div[style*="overflow-x"]:has(> table), .table-scroll {
    background: linear-gradient(to left, rgba(26,26,26,.13), transparent 26px) right / 26px 100% no-repeat;
  }
}

/* Auf sehr schmalen Schirmen bricht die Lead-Zeile in drei Zeilen und reicht bis an die
   Sonne. Das Kopfband bekommt dort mehr Himmel, statt die Sonne tiefer in den Huegel zu
   schieben. */
@media (max-width: 430px) {
  .i-subhero, main > section:first-of-type, .content-hero { padding-bottom: 152px; }
}