/* Redaktionelle Unterseiten im Erscheinungsbild der Startseite. */
.innen-seite {
  --grund: #f5f7fb;
  --flaeche: #fff;
  --flaeche-2: #edf1fb;
  --text: #34435b;
  --titel: #10233e;
  --leise: #56647a;
  --rand: #dce3ee;
  --marke: #5271ff;
  --marke-text: #3655db;
  --knopf: #5271ff;
  --knopf-hover: #3b58df;
  --knopf-text: #fff;
  --ok: #167859;
  --schatten: 0 18px 40px rgb(14 38 75 / .08);
  color-scheme: light;
}
.innen-seite h1,
.innen-seite h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; }
.innen-seite .kopfleiste { background: rgb(245 247 251 / .95); }
.innen-seite .kopfleiste .huelle { max-width: 90rem; min-height: 76px; }
.innen-seite .navi a { border-radius: 4px; }
.innen-seite .navi a[aria-current="page"] { color: #2543bd; background: #e7ebff; }
.innen-seite .abschnitt { padding-block: clamp(4.5rem, 7vw, 7rem); }
.innen-seite .abschnitt.farbig { background: #eaf0fa; border: 0; }
.innen-seite .knopf { border-radius: 4px; }

.seiten-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 35rem; background: #102345; color: #fff; }
.seiten-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 3rem 5rem; min-height: 35rem; padding-block: clamp(5.5rem, 8vw, 8.5rem); }
.seiten-hero-copy { max-width: 43rem; }
.seiten-kicker { display: block; color: #aebfff; font-size: .75rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 1.1rem; }
.seiten-hero h1 { color: #fff; font-size: clamp(3.2rem, 5.4vw, 5.7rem); line-height: 1.045; margin: 0 0 1.55rem; text-wrap: balance; }
.seiten-hero h1 em { color: #d1dcff; font-weight: 400; }
.seiten-hero-copy > p { color: #dbe4f4; font-size: clamp(1.03rem, 1.5vw, 1.25rem); line-height: 1.7; max-width: 37rem; margin-bottom: 1.7rem; }
.seiten-hero-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 48px; color: #fff; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .67); }
.seiten-hero-link:hover { color: #d5dfff; }
.seiten-hero-link span { font-size: 1.35rem; font-weight: 400; }
.seiten-hero-screen { position: relative; margin: 0 -7rem 0 0; border: 9px solid #dce5f3; border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 35px 75px rgb(0 0 0 / .32); transform: rotate(-2deg); }
.seiten-hero-screen img { display: block; width: 100%; }
.seiten-hero-screen figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero-funktionen { background: radial-gradient(45rem 35rem at 85% 10%, rgb(83 113 255 / .24), transparent 70%), #102345; }
.hero-preise .seiten-hero-image,
.hero-probe .seiten-hero-image { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, rgb(8 23 47 / .93) 0%, rgb(13 31 60 / .8) 45%, rgb(12 28 55 / .52) 100%), url('../img/hero-architecture-v2.webp'); background-position: center 49%; background-size: cover; }
.hero-probe .seiten-hero-image { background-position: center 54%; background-image: linear-gradient(90deg, rgb(8 23 47 / .82) 0%, rgb(13 31 60 / .56) 47%, rgb(12 28 55 / .15) 100%), url('../img/hero-probe-interior.webp'); }
.seiten-hero-aside { justify-self: end; display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 19rem); padding: 2rem; border: 1px solid rgb(255 255 255 / .46); background: rgb(13 31 60 / .45); backdrop-filter: blur(8px); }
.seiten-hero-aside strong { font: 400 clamp(5rem, 10vw, 8rem)/1 Georgia, serif; letter-spacing: -.07em; color: #fff; }
.seiten-hero-aside span { color: #e4eaff; font-size: 1.02rem; }
.seiten-hero-aside span:last-child { padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid rgb(255 255 255 / .4); font-size: .88rem; }
.hero-fragen { background: radial-gradient(35rem 32rem at 95% 20%, rgb(82 113 255 / .22), transparent 70%), #102345; }
.hero-fragen .seiten-hero-aside { width: 19rem; min-height: 19rem; align-items: center; justify-content: center; text-align: center; }
.hero-fragen .fragen-quote { font: 400 12rem/.9 Georgia, serif; color: #cbd6ff; padding: 0; margin: 0; border: 0; }
.hero-fragen .seiten-hero-aside span:last-child { font-size: 1rem; }

.seiten-abschnitt-titel { margin-bottom: 2.3rem; }
.seiten-abschnitt-titel .seiten-kicker { color: #3655db; }
.seiten-abschnitt-titel h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.1; margin: 0 0 .7rem; }
.seiten-abschnitt-titel p { font-size: 1.08rem; color: var(--leise); }
.seiten-nav-abschnitt { background: #eaf0fa; padding-block: 2.5rem !important; }
.innen-seite .inhalt-nav { justify-content: flex-start; gap: .65rem; margin: 0; }
.innen-seite .inhalt-nav a { border-radius: 3px; background: #fff; padding-inline: 1rem; }
.innen-seite .inhalt-nav a:hover { border-color: #5271ff; background: #f6f8ff; }
.page-funktionen .modul { padding-block: clamp(3.5rem, 6vw, 6rem); border-color: #d4ddeb; }
.page-funktionen .modul h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.12; }
.page-funktionen .modul .leise { font-size: 1.12rem; }
.page-funktionen .screen { border: 9px solid #e5ebf4; border-radius: 4px; box-shadow: 0 24px 50px rgb(15 35 70 / .12); }
.page-funktionen .screen figcaption { background: #fff; }
.page-funktionen .haken li { padding-block: .3rem; }
.page-funktionen .symbol { color: #3d5bdd; }

.preis-einstieg { padding-top: clamp(4rem, 6vw, 6rem) !important; }
.page-preise .umschalter-reihe { justify-content: flex-start; gap: .8rem; margin-bottom: 2rem; }
.page-preise .umschalter { border-radius: 4px; }
.page-preise .umschalter span { border-radius: 2px; }
.page-preise .pakete { gap: .9rem; }
.page-preise .paket { border-radius: 3px; border-top: 3px solid #5271ff; padding: 1.6rem 1.25rem; box-shadow: 0 16px 32px rgb(14 38 75 / .06); }
.page-preise .paket.hervor { border: 2px solid #5271ff; border-top-width: 4px; box-shadow: 0 24px 42px rgb(34 67 155 / .15); }
.page-preise .paket .abzeichen { top: -.9rem; border-radius: 2px; }
.page-preise .paket h2 { font-size: 1.7rem; }
.page-preise .paket .preis { font-family: Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 2.5vw, 2.45rem); letter-spacing: -.035em; }
.page-preise .paket .knopf { width: 100%; }
.page-preise .karte { border-radius: 3px; border-top: 3px solid #5271ff; padding: 1.75rem; }
.page-preise #funktionen-pakete { background: #eaf0fa; }
.page-preise #funktionen-pakete .kopf-abschnitt,
.page-preise #vergleich .kopf-abschnitt,
.page-preise #rechner .kopf-abschnitt { margin-inline: 0; text-align: left; }
.page-preise #funktionen-pakete .kopf-abschnitt h2,
.page-preise #vergleich .kopf-abschnitt h2,
.page-preise #rechner .kopf-abschnitt h2 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.page-preise #rechner { background: #fff; }

.probe-einstieg .seiten-abschnitt-titel { text-align: center; }
.page-probezugang .countdown-box { max-width: 49rem; padding: 1.5rem; margin: 0 auto 2.5rem !important; border-radius: 3px; text-align: center; }
.page-probezugang .countdown { justify-content: center; }
.page-probezugang .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.page-probezugang .schritte li { border-radius: 3px; border-top: 3px solid #5271ff; padding: 1.5rem; }
.page-probezugang .schritte li::before { width: auto; height: auto; display: block; background: none; color: #4565e3; font: 400 3rem/1 Georgia, serif; margin-bottom: 1.5rem; }
.page-probezugang .schritte h3 { font-size: 1.25rem; }
.page-probezugang .karte { border-radius: 3px; padding: 1.7rem; border-top: 3px solid #5271ff; }

.fragen-einstieg .seiten-abschnitt-titel { max-width: 52rem; margin-inline: auto; }
.page-faq .faq details { border: 0; border-bottom: 1px solid #ced9e9; border-radius: 0; margin-bottom: 0; background: transparent; }
.page-faq .faq details:first-child { border-top: 1px solid #ced9e9; }
.page-faq .faq summary { padding: 1.55rem .3rem; font-size: clamp(1.04rem, 1.35vw, 1.17rem); }
.page-faq .faq summary::after { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid #b7c6e2; border-radius: 50%; font-size: 1.25rem; }
.page-faq .faq details > div { padding: 0 1rem 1.5rem 1rem; line-height: 1.8; }
.page-faq #kontakt { background: #eaf0fa; }
.page-faq #kontakt h2 { font-size: clamp(2.5rem, 4vw, 4rem); }

.innen-seite .band { border-radius: 3px; padding: clamp(2rem, 5vw, 4rem); background: radial-gradient(35rem 30rem at 100% 0, rgb(82 113 255 / .35), transparent 72%), #102345; }
.innen-seite .band h2 { font-size: clamp(2.3rem, 4vw, 4rem); }
.innen-seite .fuss { margin-top: 0; }

@media (max-width: 960px) {
  .innen-seite .kopfleiste .huelle { min-height: 68px; }
  .seiten-hero-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .seiten-hero-screen { margin-right: -6rem; }
  .page-probezugang .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .seiten-hero, .seiten-hero-grid { min-height: 0; }
  .seiten-hero-grid { grid-template-columns: 1fr; padding-block: 5rem 4rem; }
  .seiten-hero h1 { font-size: clamp(3rem, 9vw, 4.5rem); }
  .seiten-hero-screen { width: min(100%, 37rem); margin: 0; transform: none; }
  .seiten-hero-aside { justify-self: start; width: auto; min-width: 15rem; padding: 1.3rem; }
  .seiten-hero-aside strong { font-size: 4.5rem; }
  .hero-fragen .seiten-hero-aside { min-height: 0; width: auto; }
  .hero-fragen .fragen-quote { font-size: 5rem; }
  .page-preise .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-preise .umschalter-reihe { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .innen-seite .kopfleiste .marke span { display: none; }
  .seiten-hero-grid { padding-block: 4rem 3.5rem; }
  .seiten-hero h1 { font-size: clamp(2.7rem, 10.5vw, 3.6rem); }
  .seiten-hero-copy > p { font-size: 1rem; }
  .seiten-hero-aside { display: none; }
  .page-preise .pakete,
  .page-probezugang .schritte { grid-template-columns: 1fr; }
  .page-preise .umschalter { width: 100%; }
  .page-preise .umschalter label { flex: 1 1 auto; text-align: center; }
  .page-preise .umschalter span { justify-content: center; padding-inline: .5rem; font-size: .89rem; }
  .page-faq .faq details > div { padding-inline: .75rem; }
}

/* Funktionen: eine konkrete Geschichte vor der vollständigen Funktionsliste. */
.feature-story { padding: clamp(5rem, 8vw, 8rem) 0; background: #f5f7fb; overflow: hidden; }
.feature-story-grid { display: grid; grid-template-columns: .83fr 1.17fr; gap: 4rem 6rem; align-items: center; }
.feature-story .seiten-kicker { color: #3655db; }
.feature-story h2,
.price-story h2 { font-size: clamp(2.7rem, 4.7vw, 4.9rem); line-height: 1.09; margin-bottom: 1.4rem; text-wrap: balance; }
.feature-story h2 em,
.price-story h2 em { color: #4565e3; font-weight: 400; }
.feature-story-copy > p,
.price-story-copy > p { font-size: 1.13rem; line-height: 1.8; max-width: 34rem; }
.feature-story-steps { margin-top: 2rem; border-top: 1px solid #cbd5e7; }
.feature-story-steps a { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid #cbd5e7; text-decoration: none; color: #193154; font-weight: 750; }
.feature-story-steps a:hover { color: #3655db; }
.feature-story-steps a span:first-child { color: #4565e3; font-size: .78rem; letter-spacing: .06em; }
.feature-story-visual { position: relative; padding: 1.5rem 5rem 3rem 0; }
.feature-story-visual::before { content: ''; position: absolute; inset: 0 0 4rem 4rem; background: #e0e8fa; }
.feature-story-desktop { position: relative; margin: 0; border: 8px solid #e6ebf2; border-radius: 10px; background: #fff; box-shadow: 0 28px 55px rgb(15 35 70 / .17); overflow: hidden; }
.feature-story-desktop img,
.feature-story-phone img { display: block; width: 100%; }
.feature-story-desktop figcaption,
.feature-story-phone figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.feature-story-phone { position: absolute; right: 0; bottom: 0; width: 24%; margin: 0; border: 5px solid #e9edf5; border-radius: 17px; overflow: hidden; box-shadow: 0 18px 38px rgb(15 35 70 / .25); }
.page-funktionen .modul { counter-increment: feature-no; position: relative; }
.page-funktionen .seiten-nav-abschnitt + .huelle { counter-reset: feature-no; }
.page-funktionen .modul::before { content: counter(feature-no, decimal-leading-zero) ' / Funktionsbereich'; position: absolute; top: 1.4rem; left: 0; color: #3c5ad8; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.page-funktionen .modul > div:first-child { padding-top: 1.6rem; }
.page-funktionen .modul:nth-child(even) { background: linear-gradient(90deg, transparent, rgb(232 238 250 / .65) 50%, transparent); }

/* Preise: grosszügige Pakete und ein ruhiger Übergang zum Detailvergleich. */
@media (min-width: 940px) {
  .page-preise .pakete { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
  .page-preise .paket { grid-column: span 2; min-height: 25rem; padding: 2rem 1.55rem; }
  .page-preise .paket:nth-last-child(-n+2) { grid-column: span 3; }
}
.page-preise .paket h2 { font-size: clamp(1.65rem, 2vw, 2.1rem); }
.page-preise .paket .fuer { max-width: 18rem; }
.page-preise .paket .preis { margin-top: 1.2rem; }
.page-preise .paket ul { margin-top: 1.3rem; }
.page-preise .paket li { padding-block: .45rem; }
.price-story { padding: clamp(5rem, 8vw, 8rem) 0; background: #102345; color: #fff; overflow: hidden; }
.price-story-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4rem 7rem; }
.price-story-visual { position: relative; padding: 2.4rem 0 0 2.4rem; }
.price-story-visual::before { content: ''; position: absolute; inset: 0 2.8rem 2.8rem 0; border: 1px solid rgb(255 255 255 / .35); }
.price-story-label { position: absolute; top: 0; left: 2.4rem; color: #b9c7ec; font-size: .73rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.price-story figure { position: relative; margin: 0; border: 8px solid #dfe8f4; border-radius: 8px; background: #fff; box-shadow: 0 35px 65px rgb(0 0 0 / .32); overflow: hidden; }
.price-story img { display: block; width: 100%; }
.price-story figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.price-story .seiten-kicker { color: #aebfff; }
.price-story h2 { color: #fff; }
.price-story h2 em { color: #cad6ff; }
.price-story-copy > p { color: #d4def0; }
.price-story-link { display: inline-flex; gap: .7rem; align-items: center; min-height: 44px; margin-top: .5rem; color: #fff; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .6); }
.price-story-link:hover { color: #d5dfff; }
.price-story-facts { display: flex; gap: 2rem; margin-top: 2.6rem; border-top: 1px solid rgb(255 255 255 / .27); padding-top: 1.4rem; }
.price-story-facts div { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.price-story-facts strong { font: 400 2.4rem/1.2 Georgia, serif; color: #fff; }
.price-story-facts span { color: #bbcbe7; font-size: .85rem; }

/* Probezugang: Schritte als geführter Weg neben der Anwendung. */
.probe-story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem 6rem; align-items: center; }
.page-probezugang .probe-story-grid .schritte { display: block; margin: 0; border-top: 1px solid #cbd5e7; }
.page-probezugang .probe-story-grid .schritte li { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1rem; min-height: 0; padding: 1.15rem 0; border: 0; border-bottom: 1px solid #cbd5e7; border-radius: 0; background: none; box-shadow: none; }
.page-probezugang .probe-story-grid .schritte li::before { grid-row: span 2; font-size: 2.3rem; margin: 0; }
.page-probezugang .probe-story-grid .schritte h3 { margin: .2rem 0 0; }
.page-probezugang .probe-story-grid .schritte p { margin: 0; line-height: 1.65; }
.probe-story-visual { position: relative; padding: 1.8rem 1.8rem 4.5rem 0; }
.probe-story-visual::before { content: ''; position: absolute; inset: 0 0 5.5rem 4rem; background: #e1e8fa; }
.probe-story-screen { position: relative; margin: 0; background: #fff; border: 8px solid #dce5f2; border-radius: 9px; box-shadow: 0 28px 50px rgb(15 35 70 / .16); overflow: hidden; }
.probe-story-screen img { display: block; width: 100%; }
.probe-story-screen figcaption { padding: .65rem 1rem; color: #53617a; font-size: .82rem; }
.probe-story-note { position: absolute; right: 0; bottom: 0; width: min(68%, 17rem); padding: 1.2rem 1.35rem; background: #3d5bea; color: #fff; box-shadow: 0 20px 35px rgb(23 52 137 / .24); }
.probe-story-note span { color: #dbe2ff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.probe-story-note p { margin: .45rem 0 0; font: 400 1.25rem/1.32 Georgia, serif; }
.page-probezugang .raster .karte { border: 0; border-left: 1px solid #b9cae9; border-radius: 0; padding: 1.4rem 2rem; background: transparent; box-shadow: none; }
.page-probezugang .raster .karte h3 { font-size: 1.25rem; }

/* Fragen: Inhaltsverzeichnis und thematische Kapitel. */
.faq-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.faq-rail { position: sticky; top: 7rem; display: flex; flex-direction: column; border-top: 1px solid #cbd5e7; }
.faq-rail .seiten-kicker { color: #3655db; padding-top: 1.2rem; }
.faq-rail a { display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem; padding: .85rem 0; border-bottom: 1px solid #cbd5e7; color: #193154; text-decoration: none; font-weight: 750; }
.faq-rail a:hover { color: #3655db; }
.faq-rail a span { color: #4663dc; font-size: .8rem; letter-spacing: .06em; }
.faq-gruppe { scroll-margin-top: 6rem; padding: 0 0 3.5rem; }
.faq-gruppe:not(:first-child) { padding-top: 3.5rem; border-top: 1px solid #cbd5e7; }
.faq-gruppe-kopf { margin-bottom: 1.8rem; }
.faq-gruppe-kopf .seiten-kicker { color: #3655db; }
.faq-gruppe-kopf h3 { font: 400 clamp(2.1rem, 3.3vw, 3.2rem)/1.15 Georgia, serif; color: #10233e; letter-spacing: -.04em; margin-bottom: .55rem; }
.faq-gruppe-kopf p { color: #56647a; font-size: 1.05rem; }
.page-faq .faq { margin: 0; max-width: none; }
.page-faq .faq summary { font-size: clamp(1.03rem, 1.4vw, 1.2rem); }

@media (max-width: 960px) {
  .feature-story-grid,
  .price-story-grid,
  .probe-story-grid { gap: 2.5rem; }
  .faq-layout { grid-template-columns: 12rem minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 720px) {
  .feature-story-grid,
  .price-story-grid,
  .probe-story-grid,
  .faq-layout { grid-template-columns: 1fr; }
  .feature-story-visual { max-width: 38rem; }
  .price-story-copy { order: -1; }
  .price-story-visual { max-width: 38rem; }
  .page-probezugang .raster .karte { padding-inline: 1rem; }
  .faq-rail { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; border: 0; }
  .faq-rail .seiten-kicker { grid-column: 1 / -1; }
  .faq-rail a { display: block; border: 1px solid #cbd5e7; padding: .7rem; font-size: .9rem; }
  .faq-rail a span { display: block; }
}
@media (max-width: 520px) {
  .feature-story-visual { padding-right: 2rem; }
  .feature-story-visual::before { right: 0; left: 1rem; }
  .feature-story-phone { border-width: 3px; border-radius: 8px; }
  .price-story-facts { gap: 1rem; }
  .probe-story-visual { padding-right: .8rem; }
  .probe-story-note { width: min(68%, 14rem); }
  .faq-rail { grid-template-columns: 1fr; }
  .faq-rail a { display: flex; gap: .8rem; }
}

/* Anker bleiben unter der festen Navigation sichtbar. */
.innen-seite section[id], .innen-seite #paketkarten { scroll-margin-top: 5.5rem; }
@media (max-width: 720px) {
  .hero-probe .seiten-hero-image { background-image: linear-gradient(90deg, rgb(8 23 47 / .83), rgb(8 23 47 / .62)), url('../img/hero-probe-interior.webp'); background-position: 54% center; }
}