/* Gestaltung nach „Apple-Logik“ – liegt über style.css (eingebunden in server.js und seo/seiten.js).
   Nicht Apples Aussehen kopieren, sondern die Regeln: eine Schriftfamilie, enge Überschriften, klare Größenstufen,
   Pillen-Knöpfe mit festen Höhen, Glas statt Linien, 44-px-Felder, viel Ruhe. Farben bleiben noteit. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
             unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Apple-Geräte: echte Systemschrift (SF Pro) – überall sonst Inter, die ihr am nächsten kommt */
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);
  --papier: #fbfbfd; --papier-2: #f5f5f7; --weiss: #ffffff;
  --tinte: #1d1d1f; --tinte-2: #6e6e73; --tinte-3: #86868b;
  --linie: rgba(0,0,0,.12); --linie-2: rgba(0,0,0,.07);
  --nav: rgba(251,251,253,.72);
  --glas: rgba(255,255,255,.62); --glas-rand: rgba(255,255,255,.7);
  --schatten-weich: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.06);
}
body { font-family: var(--sans); font-size: 17px; line-height: 1.47; letter-spacing: -.011em; font-feature-settings: "cv05", "cv11"; }

/* Überschriften: eine Familie, kräftig, eng – keine Serif-Kursive mehr */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.028em; line-height: 1.07; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }
.marker { font: 600 12px var(--sans); letter-spacing: .06em; color: var(--akzent); }

/* Knöpfe: Pillen, feste Höhen 44 / 36 / 30 px, Sekundär ohne Rahmen */
.knopf { min-height: 44px; padding: 0 22px; border-radius: 980px; font: 500 17px/1 var(--sans); letter-spacing: -.01em;
         border: 0; background: var(--tinte); color: #fff; }
.knopf:hover { background: #3a3a3c; }
.knopf:active { transform: scale(.97); }
.knopf.hell { background: rgba(0,0,0,.05); color: var(--tinte); border: 0; }
.knopf.hell:hover { background: rgba(0,0,0,.09); }
.knopf.klein { min-height: 32px; padding: 0 14px; font-size: 14px; }
.knopf.breit { min-height: 50px; font-size: 17px; }
.link-pfeil { font: 400 17px var(--sans); color: var(--akzent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link-pfeil:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-pfeil::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }

/* Navigation: Glas, flacher, kleiner Text */
.leiste { background: var(--papier-2); color: var(--tinte); font: 400 13px/1 var(--sans); padding: 11px 16px; letter-spacing: -.005em; }
.leiste:hover { background: #ececf0; }
.leiste span { color: var(--akzent); }
nav { background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(0,0,0,.08); }
nav .wrap { height: 56px; }
nav .links { font-size: 13.5px; gap: 26px; color: var(--tinte); }
nav .links a { opacity: .82; } nav .links a:hover, nav .links a[aria-current="page"] { opacity: 1; }
nav .links a[aria-current="page"] { box-shadow: none; text-decoration: none; }
nav .logo { height: 22px; }

/* Felder: 44 px, großzügige Rundung, weicher Fokus-Ring */
.feld { font-size: 14px; font-weight: 500; gap: 8px; }
.feld input, .zeilen-form input, .kw-formular input, .kw-formular textarea {
  font: 400 17px var(--sans); min-height: 48px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14); background: #fff; transition: border-color .15s, box-shadow .15s; }
.feld input:focus, .zeilen-form input:focus, .kw-formular input:focus, .kw-formular textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(15,106,115,.14); }

/* Karten: weiß, ohne harte Linie, weicher Schatten, größere Rundung */
.paket, .db-karte, .beispiel, .hub-karte, .link-karte { border: 0; border-radius: 22px; box-shadow: var(--schatten-weich); background: #fff; }

/* Kontakt-Bläschen und Fenster: Glas */
.kw-start, .kw { background: var(--glas); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
                 border: 1px solid var(--glas-rand); box-shadow: 0 12px 40px rgba(0,0,0,.12); }

/* ---------------- Neuer Kopfbereich der Startseite */
.hero-a { padding: 96px 0 0; text-align: center; }
.hero-a .eyebrow { font: 600 15px var(--sans); color: var(--akzent); letter-spacing: -.005em; margin-bottom: 14px; }
.hero-a h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; max-width: 14ch; margin: 0 auto; }
.hero-a h1 .grau { color: var(--tinte-3); }
.hero-a .sub { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.38; color: var(--tinte-2); max-width: 42ch; margin: 22px auto 0; letter-spacing: -.015em; }
.hero-a .knoepfe { display: flex; gap: 22px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.hero-a .fakten { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.hero-a .fakten span { font-size: 13px; color: var(--tinte-2); background: var(--glas); border: 1px solid var(--linie-2);
                       padding: 7px 13px; border-radius: 980px; backdrop-filter: blur(12px); }
.hero-a .produkt { margin-top: 64px; }
@media (max-width: 700px) {
  .hero-a { padding-top: 56px; }
  .hero-a .knoepfe { flex-direction: column; gap: 14px; }
}

/* ---------------- Kopfbereich Version 2 (nach Granola, Linear, Superhuman): Text links, Produkt im Einsatz rechts */
.hero-b { padding: 72px 0 0; }
.hb-raster { display: grid; grid-template-columns: 1.12fr 1fr; gap: 48px; align-items: center; }
.hb-pille { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinte); text-decoration: none;
            padding: 5px 12px 5px 5px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px var(--linie-2), 0 1px 2px rgba(0,0,0,.04); }
.hb-pille b { font-weight: 600; font-size: 12px; color: #fff; background: var(--akzent); padding: 3px 9px; border-radius: 980px; }
.hb-pille span { color: var(--tinte-3); font-size: 16px; line-height: 1; }
.hero-b h1 { font-size: clamp(42px, 4.1vw, 58px); line-height: 1.02; letter-spacing: -.038em; font-weight: 650; margin: 26px 0 0; text-wrap: balance; }
.hb-sub { font-size: 19px; line-height: 1.45; color: var(--tinte-2); margin-top: 20px; letter-spacing: -.012em; }
.hb-knoepfe { display: flex; gap: 22px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.hb-plattform { font-size: 13.5px; color: var(--tinte-3); margin-top: 18px; }

/* Bild: Videocall mit noteit-Karte darüber */
.hb-bild { position: relative; padding: 0 0 150px 0; }
.hb-call { background: #1f2023; border-radius: 18px; padding: 12px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); width: 88%; }
.hb-call-kopf { display: flex; align-items: center; gap: 8px; color: #d6d6d9; font-size: 12.5px; padding: 2px 4px 10px; }
.hb-zeit { margin-left: auto; font: 500 12px var(--sans); color: #a1a1a6; font-variant-numeric: tabular-nums; }
.hb-punkt { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 3px rgba(255,69,58,.2); }
.hb-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-kacheln figure { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #2c2c2e; }
.hb-kacheln img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-kacheln figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.45);
                         padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(8px); }
.hb-notiz { position: absolute; right: -8px; bottom: 0; width: 56%; background: rgba(255,255,255,.82); border-radius: 18px; padding: 18px 20px 16px;
            backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
            box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 24px 60px -20px rgba(0,0,0,.35); font-size: 13.5px; }
.hb-notiz-kopf { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinte-2); }
.hb-notiz-kopf img { width: 18px; height: 18px; border-radius: 5px; }
.hb-notiz-kopf b { color: var(--tinte); font-weight: 600; }
.hb-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--akzent); font-weight: 500; }
.hb-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: hb-puls 1.6s ease-in-out infinite; }
@keyframes hb-puls { 50% { opacity: .3; } }
.hb-notiz h3 { font-size: 19px; margin: 12px 0 2px; letter-spacing: -.02em; }
.hb-meta { font-size: 12px; color: var(--tinte-3); }
.hb-abschnitt { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 12px 0 5px; }
.hb-notiz ul { margin: 0; padding-left: 16px; line-height: 1.5; } .hb-notiz li::marker { color: var(--tinte-3); }
.hb-todos { list-style: none; padding: 0 !important; display: grid; gap: 5px; }
.hb-todos li { display: flex; gap: 8px; align-items: center; }
.hb-todos span { font-size: 11.5px; font-weight: 600; color: var(--akzent); background: var(--akzent-weich); padding: 2px 8px; border-radius: 980px; }
.hb-tippt { display: flex; gap: 4px; margin-top: 10px; } .hb-tippt i { width: 5px; height: 5px; border-radius: 50%; background: var(--tinte-3); animation: hb-puls 1.2s infinite; }
.hb-tippt i:nth-child(2) { animation-delay: .2s; } .hb-tippt i:nth-child(3) { animation-delay: .4s; }

/* Darunter: Programme und drei Vorteile (wie Granola) */
.hb-mit { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 64px; padding: 22px 0;
          border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); color: var(--tinte-3); }
.hb-mit span { font-size: 13px; } .hb-mit b { font-weight: 600; font-size: 16px; color: #9a9aa0; letter-spacing: -.02em; }
.hb-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
.hb-drei div { display: flex; gap: 14px; align-items: flex-start; }
.hb-drei svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.hb-drei p { font-size: 15.5px; line-height: 1.5; color: var(--tinte-2); } .hb-drei b { color: var(--tinte); font-weight: 600; }
.hb-live-titel { text-align: center; font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 84px 0 -36px; scroll-margin-top: 90px; }

@media (max-width: 900px) {
  .hero-b { padding-top: 44px; }
  .hb-raster { grid-template-columns: 1fr; gap: 36px; }
  .hb-sub br { display: none; }
  .hb-drei { grid-template-columns: 1fr; gap: 20px; }
  .hb-mit { gap: 14px 22px; margin-top: 44px; }
  .hb-call { width: 100%; }
  .hb-notiz { position: relative; width: 90%; margin: -70px 0 0 auto; }
  .hb-bild { padding-bottom: 0; }
}

/* ---------------- Version 3: Landschaftsbild mit laufendem noteit darauf */
.hb-foto { position: relative; aspect-ratio: 4 / 4.6; border-radius: 30px; overflow: hidden;
           background: #0e1424 url(bilder/berge-nacht.webp) center 58% / cover no-repeat;
           box-shadow: 0 40px 80px -40px rgba(10,20,40,.55); }
.hb-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                  background: linear-gradient(180deg, rgba(8,12,24,.0) 40%, rgba(8,12,24,.25) 100%); }
/* kleines App-Fenster (wie die Seitenleiste der echten App) – dunkles Glas über dem Sternenhimmel */
.hb-app { position: absolute; z-index: 1; left: 7%; top: 8%; width: 58%; color: #f2f2f5; border-radius: 18px; padding: 14px 16px 12px;
          background: rgba(22,26,38,.55); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px -20px rgba(0,0,0,.6); }
.hb-app-kopf { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.hb-app-kopf img { width: 18px; height: 18px; border-radius: 5px; }
.hb-app-kopf b { font-weight: 600; } .hb-app-kopf span { margin-left: auto; color: rgba(255,255,255,.62); font-size: 11.5px; }
.hb-app-mitte { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.hb-stopp { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.hb-stopp i { width: 16px; height: 16px; border-radius: 4px; background: #ff453a; }
.hb-uhr { font: 300 30px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hb-welle { display: flex; align-items: center; gap: 3px; height: 22px; margin-top: 8px; }
.hb-welle i { width: 3px; border-radius: 2px; background: #7cc4ff; opacity: .9; }
.hb-welle i:nth-child(3n) { background: #5ad1c3; }
.hb-app-fuss { display: flex; gap: 12px; font-size: 11.5px; color: rgba(255,255,255,.7); align-items: center; }
.hb-app-fuss span { display: inline-flex; align-items: center; gap: 5px; }
.hb-app-fuss i { width: 7px; height: 7px; border-radius: 50%; background: #7cc4ff; } .hb-app-fuss i.du { background: #5ad1c3; }
.hb-app-fuss .hb-stern { margin-left: auto; color: #9be2d8; }
/* Zusammenfassung: helles Glas unten rechts */
.hb-foto .hb-notiz { z-index: 1; right: 6%; bottom: 7%; width: 66%; }
@media (max-width: 900px) {
  .hb-foto { aspect-ratio: 4 / 5; }
  .hb-app { width: 78%; left: 6%; top: 6%; }
  .hb-foto .hb-notiz { position: absolute; width: 84%; right: 5%; bottom: 5%; margin: 0; }
}
/* Horizont und Berge frei lassen: Karte höher und kompakter */
.hb-foto { background-position: center 72%; }
.hb-app { top: 6%; width: 54%; }
.hb-foto .hb-notiz { top: 30%; bottom: auto; right: 5%; width: 56%; padding: 14px 16px 12px; font-size: 12.5px; }
.hb-foto .hb-notiz h3 { font-size: 16.5px; margin-top: 9px; }
.hb-foto .hb-abschnitt { margin: 9px 0 4px; }
@media (max-width: 900px) { .hb-foto .hb-notiz { top: 34%; width: 80%; } .hb-app { width: 76%; } }
@media (max-width: 900px) { .hb-foto .hb-notiz { top: 44%; } }
/* Zusammenfassung im selben dunklen Glas wie das Aufnahme-Fenster – passt zum Nachthimmel */
.hb-foto .hb-notiz { background: rgba(22,26,38,.58); color: #f2f2f5;
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px -20px rgba(0,0,0,.6); }
.hb-foto .hb-notiz-kopf { color: rgba(255,255,255,.7); } .hb-foto .hb-notiz-kopf b { color: #fff; }
.hb-foto .hb-live { color: #9be2d8; } .hb-foto .hb-live i { background: #5ad1c3; }
.hb-foto .hb-notiz h3 { color: #fff; }
.hb-foto .hb-meta, .hb-foto .hb-abschnitt { color: rgba(255,255,255,.55); }
.hb-foto .hb-notiz li::marker { color: rgba(255,255,255,.45); }
.hb-foto .hb-todos span { color: #9be2d8; background: rgba(90,209,195,.16); }
.hb-foto .hb-tippt i { background: rgba(255,255,255,.55); }
/* Zusammenfassung unter das Aufnahme-Fenster – ohne Überschneidung */
@media (min-width: 901px) { .hb-foto .hb-notiz { top: 37%; } }
@media (max-width: 900px) { .hb-foto { aspect-ratio: 4 / 6; } .hb-foto .hb-notiz { top: 40%; } }
/* Handy: beide Fenster untereinander im Fluss – keine Überschneidung bei keiner Breite; unten bleibt Platz für die Berge */
@media (max-width: 900px) {
  .hb-foto { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 18px 120px; }
  .hb-app, .hb-foto .hb-notiz { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; margin: 0; }
  .hb-app { width: 88%; }
  .hb-foto .hb-notiz { width: 88%; align-self: flex-end; }
}
/* Endgültig: beide Fenster im Fluss (oben links das Aufnahme-Fenster, darunter rechts die Zusammenfassung) –
   bei keiner Breite Überschneidung; unten bleibt Raum für Horizont und Berge */
.hb-foto { aspect-ratio: auto; display: flex; flex-direction: column; gap: 18px; padding: 7% 6% 24%; }
.hb-app, .hb-foto .hb-notiz { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; margin: 0; }
.hb-app { width: 64%; }
.hb-foto .hb-notiz { width: 66%; align-self: flex-end; }
@media (max-width: 900px) { .hb-foto { padding: 22px 18px 120px; } .hb-app, .hb-foto .hb-notiz { width: 90%; } }

/* Laufende Aufnahme: Tonwelle bewegt sich (Uhr zählt per Script) */
.hb-welle i { transform-origin: center; animation: hb-welle 1.1s ease-in-out infinite alternate; }
.hb-welle i:nth-child(2n) { animation-duration: .8s; } .hb-welle i:nth-child(3n) { animation-duration: 1.4s; }
.hb-welle i:nth-child(5n) { animation-duration: .65s; } .hb-welle i:nth-child(7n) { animation-delay: -.3s; }
.hb-welle i:nth-child(4n+1) { animation-delay: -.55s; }
@keyframes hb-welle { 0% { transform: scaleY(.25); } 60% { transform: scaleY(1); } 100% { transform: scaleY(.5); } }
@media (prefers-reduced-motion: reduce) { .hb-welle i, .hb-live i, .hb-tippt i { animation: none; } }

/* ---------------- Bildfläche auf Anmelden, Registrieren, Passwort, Bestätigt, Download, Einladung:
   dasselbe Bergbild wie auf der Startseite, Karten in dunklem Glas */
.geteilt-buehne { background: #0e1424 url(bilder/berge-nacht.webp) center 72% / cover no-repeat; place-items: start center;
                  padding: 13% 40px 48px; box-shadow: 0 40px 80px -40px rgba(10,20,40,.55); }
.geteilt-buehne canvas { display: none; }
.geteilt-buehne .schwebe-karte, .geteilt-buehne .schwebe-chip {
  background: rgba(22,26,38,.58); color: #f2f2f5;
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 60px -20px rgba(0,0,0,.6); }
.geteilt-buehne .schwebe-chip { background: rgba(22,26,38,.72); }
.geteilt-buehne .schwebe-chip i { background: #2fa696; }
.geteilt-buehne .sk-kopf { color: rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,.12); }
.geteilt-buehne .sk-kopf b { color: #fff; }
.geteilt-buehne .sk-k, .geteilt-buehne .sk-fuss { color: rgba(255,255,255,.55); }
.geteilt-buehne .sk-fuss { border-top-color: rgba(255,255,255,.12); }
.geteilt-buehne .sk-text { color: #fff; font-family: var(--sans); font-size: 16.5px; letter-spacing: -.015em; }
.geteilt-buehne .sk-liste { color: rgba(255,255,255,.82); }
.geteilt-buehne .sk-liste svg { stroke: #5ad1c3; }
.geteilt-buehne .sk-liste .offen-kreis { border-color: rgba(255,255,255,.45); }
.geteilt-buehne .sk-liste small { color: rgba(255,255,255,.5); }
.geteilt-buehne .sk-gross { color: #fff; font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }
.geteilt-buehne .sk-gross small { color: rgba(255,255,255,.6); }
.geteilt-buehne .sk-tage span { background: #5ad1c3; } .geteilt-buehne .sk-tage span.vorbei { background: rgba(255,255,255,.15); }
@media (max-width: 900px) { .geteilt-buehne { padding: 40px 22px 120px; } }

/* Kleinigkeit: lange Wörter im Verzeichnis dürfen umbrechen (sonst 3 px Überbreite bei 320 px) */
.verzeichnis * { overflow-wrap: anywhere; }
.geteilt-buehne .schwebe-chip { z-index: 2; }
/* Karte ruhig und mittig; Hinweise zentriert über/unter der Karte statt seitlich herausragend */
.geteilt-buehne .schwebe { animation: none; width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.geteilt-buehne .schwebe-karte { width: 100%; }
.geteilt-buehne .schwebe-chip.oben, .geteilt-buehne .schwebe-chip.unten { position: relative; inset: auto; display: inline-flex; }
.geteilt-buehne .schwebe-chip.oben { margin-bottom: 14px; }
.geteilt-buehne .schwebe-chip.unten { margin-top: 14px; }
.geteilt-buehne .schwebe { min-width: 0; } .geteilt-buehne .schwebe-chip { white-space: normal; max-width: 100%; }
/* Eine Karte: Hinweis als letzte Zeile in der Karte, Karte mittig im Bild */
.geteilt-buehne { place-items: center; padding: 48px 40px; }
.sk-fertig { display: flex; align-items: center; gap: 9px; margin: 18px -24px -22px; padding: 14px 24px; font: 500 13.5px var(--sans);
             border-top: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 0 0 18px 18px; background: rgba(255,255,255,.04); }
.sk-fertig i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2fa696; display: grid; place-items: center; }
.sk-fertig i svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .geteilt-buehne { padding: 40px 22px; } }

/* Abschnittsköpfe: Überschrift bekommt mehr Breite, etwas kleiner – keine vierzeiligen Überschriften */
@media (min-width: 901px) {
  .ueber { grid-template-columns: 1.35fr 1fr; gap: 56px; }
  .ueber h2 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.06; }
}

/* =============== Startseite als Verkaufsseite: neue Abschnitte =============== */
.hb-mit b.leise { color: #b4b4b9; font-weight: 500; }
.zahlen b { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: 44px; }

/* Vorher / Nachher */
.vk-vergleich-abschnitt { padding: 120px 0 0; }
.vk-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.vk-spalte { border-radius: 24px; padding: 32px 32px 28px; }
.vk-spalte h3 { font-size: 22px; margin-bottom: 18px; }
.vk-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vk-spalte li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.vk-spalte li b { color: var(--tinte); font-weight: 600; }
.vk-spalte li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
                        font: 600 12px/22px var(--sans); text-align: center; }
.vk-spalte.vorher { background: var(--papier-2); }
.vk-spalte.vorher h3 { color: var(--tinte-3); }
.vk-spalte.vorher li::before { content: "\2715"; background: rgba(200,68,47,.1); color: var(--rot); }
.vk-spalte.nachher { background: #fff; box-shadow: var(--schatten-weich), inset 0 0 0 1.5px rgba(15,106,115,.25); }
.vk-spalte.nachher h3 { color: var(--akzent); }
.vk-spalte.nachher li::before { content: "\2713"; background: var(--akzent); color: #fff; }

/* Drei Stärken im Detail */
.vk-tief-abschnitt { padding: 130px 0 0; }
.vk-tief { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 72px; }
.vk-tief.umgekehrt .vk-text { order: 2; }
.vk-badge { display: inline-block; font: 600 12.5px var(--sans); color: var(--akzent); background: var(--akzent-weich); padding: 6px 12px; border-radius: 980px; }
.vk-text h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.03em; margin: 16px 0 14px; }
.vk-text p { font-size: 17px; line-height: 1.55; color: var(--tinte-2); margin-bottom: 18px; }
.vk-ui { background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--schatten-weich), 0 0 0 1px var(--linie-2); font-size: 14px; }
/* Kunden-Akte */
.vk-akte-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--linie-2); }
.vk-avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--akzent); color: #fff; display: grid; place-items: center; font: 600 14px var(--sans); }
.vk-akte-kopf b { display: block; font-size: 16px; } .vk-akte-kopf small { color: var(--tinte-3); font-size: 12.5px; }
.vk-tag { margin-left: auto; font: 600 11.5px var(--sans); color: var(--akzent); background: var(--akzent-weich); padding: 4px 10px; border-radius: 980px; }
.vk-zeitleiste { list-style: none; margin: 16px 0 0 6px; padding: 0 0 0 18px; border-left: 2px solid var(--linie-2); display: grid; gap: 14px; }
.vk-zeitleiste li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.vk-zeitleiste li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--akzent); }
.vk-zeitleiste li:last-child::before { background: var(--akzent); }
.vk-zeitleiste b { font-weight: 600; } .vk-zeitleiste small { color: var(--tinte-3); font-size: 12px; }
.vk-zeitleiste span { grid-column: 1 / -1; color: var(--tinte-2); font-size: 13.5px; }
.vk-offen { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--papier-2); display: grid; gap: 8px; }
.vk-offen small { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.vk-offen div { display: flex; align-items: center; gap: 10px; }
.vk-offen i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--tinte-3); flex: none; }
.vk-offen em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--akzent); font-weight: 500; white-space: nowrap; }
/* Claude-Chat */
.vk-chat { background: #faf9f5; }
.vk-chat-kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--linie-2); }
.vk-chat-kopf b { font: 600 15px var(--sans); color: #c96442; }
.vk-chat-kopf small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--tinte-3); font-size: 12px; }
.vk-chat-kopf small i { width: 7px; height: 7px; border-radius: 50%; background: #2fa36b; }
.vk-frage { margin: 16px 0 14px auto; max-width: 86%; background: #ece8dd; border-radius: 16px 16px 4px 16px; padding: 12px 14px; line-height: 1.45; }
.vk-antwort { line-height: 1.5; color: var(--tinte); }
.vk-antwort small { display: inline-block; font-size: 11.5px; color: var(--akzent); background: var(--akzent-weich); padding: 3px 9px; border-radius: 980px; margin-bottom: 8px; }
.vk-antwort ol { margin: 6px 0 8px; padding-left: 20px; } .vk-antwort p { margin: 0; }
/* Dialekt / Wörterbuch */
.vk-zeile { padding: 14px 16px; border-radius: 14px; background: var(--papier-2); }
.vk-zeile + .vk-zeile { margin-top: 10px; }
.vk-zeile small, .vk-chips small { display: block; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 5px; }
.vk-zeile p { margin: 0; line-height: 1.45; } .vk-zeile:first-child p { font-style: italic; color: var(--tinte-2); }
.vk-zeile.gut { background: var(--akzent-weich); } .vk-zeile.gut b { color: var(--akzent); font-weight: 600; }
.vk-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vk-chips small { flex-basis: 100%; }
.vk-chips span { font-size: 13px; padding: 5px 11px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.vk-chips span.mehr { color: var(--tinte-3); box-shadow: none; background: var(--papier-2); }
.vk-weiter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 72px; }
.vk-weiter a { font-size: 14.5px; color: var(--tinte); text-decoration: none; padding: 9px 16px; border-radius: 980px; background: rgba(0,0,0,.05); }
.vk-weiter a:hover { background: rgba(0,0,0,.09); } .vk-weiter a::after { content: " \2192"; color: var(--tinte-3); }

/* Warum kein Bot */
.vk-bot-abschnitt { padding: 130px 0 0; }
.vk-bot { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 48px; border-radius: 28px; background: var(--papier-2); align-items: start; }
.vk-bot h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.vk-bot p { font-size: 17px; line-height: 1.55; color: var(--tinte-2); margin-bottom: 16px; } .vk-bot p b { color: var(--tinte); }

/* Preis-Vorschau: Satz je Paket */
.pk-fuer { display: block; font-style: normal; font-size: 13.5px; line-height: 1.45; color: var(--tinte-2); margin-top: 6px; max-width: 34ch; }

/* Häufige Fragen */
.vk-faq-abschnitt { padding: 130px 0 0; scroll-margin-top: 80px; }
.vk-faq-titel { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; max-width: 22ch; margin: 0 0 18px; }
.vk-faq-abschnitt .faq summary { font: 600 18px/1.35 var(--sans); letter-spacing: -.015em; }
.vk-faq-abschnitt .faq p { font-size: 16.5px; line-height: 1.6; color: var(--tinte-2); max-width: 760px; padding-bottom: 22px; }

/* Abschluss mit Bild (Bergsee im Abendlicht) */
.schluss-bild .flaeche { color: #fff; border-radius: 30px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(12,22,48,.10) 0%, rgba(12,22,48,.30) 45%, rgba(10,18,40,.78) 100%),
              #1d2b4f url(bilder/bergsee-abend.webp) center 35% / cover no-repeat; padding: 150px 32px 90px; }
.schluss-bild h2 { color: #fff; text-shadow: 0 2px 30px rgba(10,18,40,.35); }
.schluss-bild p { color: rgba(255,255,255,.88); max-width: 46ch; margin-left: auto; margin-right: auto; }
.schluss-bild .knopf { background: #fff; color: #1d2b4f; border: 0; }
.schluss-bild .knopf:hover { background: #f3e9df; color: #1d2b4f; }
.schluss-klein { display: block; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.72); }
.schluss-bild + .verzeichnis { padding-top: 110px; }

@media (max-width: 900px) {
  .vk-vergleich, .vk-tief, .vk-bot { grid-template-columns: 1fr; gap: 28px; }
  .vk-tief.umgekehrt .vk-text { order: 0; }
  .vk-tief { margin-top: 56px; }
  .vk-spalte, .vk-bot { padding: 26px 22px; }
  .vk-vergleich-abschnitt, .vk-tief-abschnitt, .vk-bot-abschnitt, .vk-faq-abschnitt { padding-top: 90px; }
  .schluss-bild .flaeche { padding: 110px 22px 64px; }
}

/* Feinschliff nach der Prüfung */
@media (max-width: 900px) { .zahlen b { font-size: clamp(26px, 7.5vw, 44px); } }
.vk-bot { grid-template-columns: 1.05fr 1fr; } .vk-bot h2 { font-size: clamp(28px, 2.7vw, 38px); }
@media (min-width: 901px) { .vk-vergleich-abschnitt .ueber h2 { font-size: clamp(32px, 3.1vw, 44px); } }
@media (max-width: 900px) { .vk-bot { grid-template-columns: 1fr; } .ueber h2, .vk-faq-titel, .vk-bot h2 { font-size: clamp(27px, 7.4vw, 36px); } .schluss-bild h2 { font-size: clamp(30px, 8.6vw, 44px); } }

/* =============== Gekürzt: drei Karten statt langer Abschnitte =============== */
.vk-bento-abschnitt { padding: 130px 0 0; }
.vk-kopf { text-align: center; }
.vk-kopf h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.035em; }
.vk-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.vk-karte { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--papier-2); border-radius: 28px;
            padding: 30px 26px 0; overflow: hidden; transition: transform .25s var(--kurve), box-shadow .25s; }
.vk-karte:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.25); }
.vk-karte h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; margin: 14px 0 8px; }
.vk-karte > p { font-size: 15.5px; line-height: 1.45; color: var(--tinte-2); margin: 0 0 24px; }
.vk-karte .vk-ui { margin-top: auto; border-radius: 18px 18px 0 0; padding: 18px 18px 20px; font-size: 13px; box-shadow: 0 -1px 0 var(--linie-2), 0 10px 30px -16px rgba(0,0,0,.18); }
.vk-karte .vk-akte-kopf { padding-bottom: 12px; }
.vk-karte .vk-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12.5px; }
.vk-karte .vk-zeitleiste { margin-top: 12px; gap: 9px; }
.vk-karte .vk-offen { margin-top: 12px; padding: 10px 12px; }
.vk-karte .vk-frage { margin: 0 0 12px auto; max-width: 92%; }
.vk-karte .vk-zeile { padding: 10px 12px; }
.vk-karte .vk-chips { margin-top: 12px; }

/* Kein Bot: ein ruhiger Streifen */
.vk-bot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding: 30px 36px; }
.vk-bot h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.vk-bot p { flex: 1 1 360px; margin: 0; font-size: 16.5px; }
.vk-bot-abschnitt { padding-top: 90px; }

/* Häufige Fragen: kurze Überschrift */
.vk-faq-titel { max-width: none; }

/* Abschluss: dasselbe Sternenbild wie oben, im Querformat (Horizont mit Abendrot sichtbar) */
.schluss-bild .flaeche { padding: 130px 32px 120px;
  background: linear-gradient(180deg, rgba(8,12,24,.15) 0%, rgba(8,12,24,.35) 55%, rgba(8,12,24,.7) 100%),
              #0e1424 url(bilder/berge-nacht.webp) center 66% / cover no-repeat; }
.schluss-bild p { margin-bottom: 28px; }

@media (max-width: 900px) {
  .vk-bento { grid-template-columns: 1fr; }
  .vk-bento-abschnitt { padding-top: 90px; }
  .vk-bot { padding: 24px 22px; }
  .schluss-bild .flaeche { padding: 96px 22px 88px; }
}
.vk-karte .vk-badge { align-self: flex-start; }

/* =============== Terminanfrage („Kontakt“ im Menü) =============== */
.tm-offen { overflow: hidden; }
.tm-hg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
         background: rgba(15,20,30,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tm-hg[hidden] { display: none; }
.tm { position: relative; display: grid; grid-template-columns: 290px 1fr; width: min(1080px, 100%); max-height: calc(100dvh - 48px); overflow: auto;
      background: #fff; border-radius: 26px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.45); font-family: var(--sans); }
.tm-zu { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.05);
         font: 400 22px/1 var(--sans); color: var(--tinte-2); cursor: pointer; z-index: 1; }
.tm-zu:hover { background: rgba(0,0,0,.09); }
.tm-links { padding: 34px 28px; border-right: 1px solid var(--linie-2); }
.tm-gesichter img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linie); }
.tm-gesichter img + img { margin-left: -12px; }
.tm-links small { display: block; color: var(--tinte-3); font-size: 13.5px; margin: 14px 0 4px; }
.tm-links h3 { font-size: 30px; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; }
.tm-links h3 em { font-style: normal; color: var(--akzent); }
.tm-fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tm-fakten li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.tm-fakten svg { width: 18px; height: 18px; fill: none; stroke: var(--akzent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tm-links p { font-size: 14px; line-height: 1.55; color: var(--tinte-2); margin-top: 20px; }
.tm-schritt[data-schritt="wahl"] { display: grid; grid-template-columns: 1fr 240px; }
.tm-schritt[hidden] { display: none !important; }
.tm-mitte { padding: 34px 30px 26px; border-right: 1px solid var(--linie-2); }
.tm-monat { display: flex; justify-content: space-between; align-items: center; margin: 0 40px 18px 0; }
.tm-monat b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.tm-monat button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linie); background: #fff; color: var(--tinte-2); font-size: 16px; cursor: pointer; margin-left: 6px; }
.tm-monat button:disabled { opacity: .35; cursor: default; }
.tm-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; font-size: 15px; }
.tm-tage .k { font-size: 11.5px; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 6px; }
.tm-tage span:not(.k), .tm-tage button { width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; }
.tm-tage span:not(.k) { color: #c7c7cc; }
.tm-tage button { border: 0; background: var(--papier-2); color: var(--tinte); font: 500 15px var(--sans); cursor: pointer; transition: background .15s; }
.tm-tage button:hover { background: #e8e8ed; }
.tm-tage button.an { background: var(--tinte); color: #fff; }
.tm-zone { font-size: 12px; color: var(--tinte-3); margin-top: 18px; }
.tm-rechts { padding: 34px 22px 24px; display: flex; flex-direction: column; }
.tm-rechts h4 { font: 600 15px var(--sans); margin: 0 30px 12px 0; min-height: 20px; }
.tm-gruppe { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin: 8px 0 8px; }
.tm-zeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tm-zeiten button { border: 1px solid var(--linie); background: #fff; border-radius: 10px; padding: 9px 0; font: 500 14px var(--sans); color: var(--tinte); cursor: pointer; }
.tm-zeiten button:hover:not(:disabled) { border-color: var(--tinte-3); }
.tm-zeiten button.an { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.tm-zeiten button:disabled { opacity: .4; cursor: default; }
.tm-weiter { margin-top: auto; min-height: 46px; width: 100%; }
.tm-weiter:disabled { background: #d2d2d7; opacity: 1; }
.tm-form, .tm-danke { padding: 34px 36px 30px; display: grid; gap: 14px; align-content: start; max-width: 560px; }
.tm-zurueck { justify-self: start; border: 0; background: none; padding: 0; font: 500 14px var(--sans); color: var(--akzent); cursor: pointer; }
.tm-gewaehlt { font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; margin: 0; }
.tm-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.tm-form label span { font-weight: 400; color: var(--tinte-3); }
.tm-form input, .tm-form textarea { font: 400 16px var(--sans); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: #fff; resize: vertical; }
.tm-form input:focus, .tm-form textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(15,106,115,.14); }
.tm-status { color: var(--rot); font-size: 14px; margin: 0; }
.tm-klein { font-size: 12.5px; color: var(--tinte-3); margin: 0; }
.tm-danke { justify-items: start; }
.tm-danke h3 { font-size: 28px; letter-spacing: -.03em; margin: 0; }
.tm-danke p { margin: 0; color: var(--tinte-2); }
.tm-haken { width: 48px; height: 48px; border-radius: 50%; background: var(--akzent); display: grid; place-items: center; }
.tm-haken svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .tm-hg { padding: 0; place-items: stretch; }
  .tm { grid-template-columns: 1fr; border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .tm-links { border-right: 0; border-bottom: 1px solid var(--linie-2); padding: 22px 20px 18px; }
  .tm-links p, .tm-fakten li:nth-child(n+2) { display: none; }
  .tm-links h3 { font-size: 24px; margin-bottom: 10px; }
  .tm-schritt[data-schritt="wahl"] { grid-template-columns: 1fr; }
  .tm-mitte { border-right: 0; padding: 20px 16px 8px; }
  .tm-tage span:not(.k), .tm-tage button { width: 38px; height: 38px; }
  .tm-rechts { padding: 10px 16px 22px; }
  .tm-zeiten { grid-template-columns: repeat(4, 1fr); }
  .tm-weiter { margin-top: 16px; }
  .tm-form, .tm-danke { padding: 22px 18px 28px; }
}

/* =============== Wolkenbild hinter der App-Vorschau und der „So geht's“-Szene =============== */
.produkt .flaeche { background: #b9cfe4 url(bilder/wolken.webp) center 62% / cover no-repeat; }
.produkt #heroWelle { display: none; }
.produkt .fenster { box-shadow: 0 50px 100px -40px rgba(20,40,70,.55), 0 0 0 1px rgba(255,255,255,.6); }
.szene { background: #b9cfe4 url(bilder/wolken.webp) center 70% / cover no-repeat; box-shadow: 0 30px 70px -40px rgba(20,40,70,.5); }
.szene-kopf { background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
              box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 8px 24px -14px rgba(20,40,70,.35); }
.ebene { background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
         box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 24px 50px -24px rgba(20,40,70,.45); }
.produkt .mini-app .ma-karte, .produkt .mini-app .ma-kopf { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* =============== Echte Fotos statt Farbverläufe =============== */
/* Abschluss-Banner auf allen Seiten (Startseite, Unterseiten, SEO-Seiten): Sternenhimmel über dem See */
.schluss .flaeche, .schluss-bild .flaeche {
  color: #fff;
  background: linear-gradient(180deg, rgba(6,10,20,.10) 0%, rgba(6,10,20,.30) 50%, rgba(6,10,20,.70) 100%),
              #0d1520 url(bilder/sternensee.webp) center 62% / cover no-repeat; }
.schluss .motiv { color: rgba(255,255,255,.7); opacity: 1; }
.schluss h2 { color: #fff; text-shadow: 0 2px 30px rgba(6,10,20,.4); }
.schluss p { color: rgba(255,255,255,.86); }
.schluss .knopf { background: #fff; color: #0d1520; border: 0; }
.schluss .knopf:hover { background: #eef2f7; color: #0d1520; }

/* Wolkenmeer von oben: „Kein Bot im Call“, Preis-Box, noteit-Kasten auf den SEO-Seiten */
.vk-bot, .preis-box, .noted-box {
  color: #fff;
  background: linear-gradient(90deg, rgba(8,32,72,.62) 0%, rgba(8,32,72,.30) 55%, rgba(8,32,72,.10) 100%),
              #3b74b8 url(bilder/wolkenmeer.webp) center 55% / cover no-repeat; }
.vk-bot h2, .preis-box h2, .preis-box h3, .noted-box b, .noted-box h2, .noted-box h3 { color: #fff; }
.vk-bot p, .preis-box p, .noted-box p { color: rgba(255,255,255,.9); }
.vk-bot .link-pfeil, .preis-box a:not(.knopf), .noted-box a:not(.knopf) { color: #fff; }
.preis-box .marker { color: rgba(255,255,255,.8); }
.preis-box .knopf, .noted-box .knopf { background: #fff; color: #0d2a52; border: 0; }
.preis-box .knopf:hover, .noted-box .knopf:hover { background: #eef2f7; }
.noted-box .motiv { color: rgba(255,255,255,.75); }
.preis-box small, .preis-box span:not(.motiv) { color: rgba(255,255,255,.82); }

/* Preisseite: Paket-Karten vor dem Wolkenmeer, Karten aus hellem Glas */
.pakete { padding: 32px; border-radius: 34px; background: linear-gradient(180deg, rgba(8,32,72,.18), rgba(8,32,72,.05)), #3b74b8 url(bilder/wolkenmeer.webp) center 55% / cover no-repeat; box-shadow: 0 40px 80px -50px rgba(8,32,72,.6); }
.pakete .paket { background: rgba(255,255,255,.86); border: 0; border-radius: 24px; backdrop-filter: saturate(170%) blur(20px); -webkit-backdrop-filter: saturate(170%) blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 24px 50px -28px rgba(8,32,72,.55); }
.pakete .paket.hervorgehoben, .pakete .paket.empfohlen { background: rgba(255,255,255,.95); box-shadow: inset 0 0 0 2px var(--akzent), 0 30px 60px -28px rgba(8,32,72,.65); }
@media (max-width: 900px) { .pakete { padding: 14px; border-radius: 24px; } }