/* ==========================================================================
   v10.css — Layoutbausteine der Marketing-Startseiten
   --------------------------------------------------------------------------
   Lag bis 2026-08-26 als <style>-Block in index.php. Ausgelagert, weil ihn
   seither zwei Seiten brauchen: die neue Startseite (/ivy/) und die
   Detailseite (/ivy/plattform/). Doppelt gepflegt wäre er nach dem zweiten
   Feilstrich auseinandergelaufen.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════
     Startseite

     Aus mehreren Layout-Entwürfen zusammengeführt. Herkunft der Abschnitte
     (die Entwürfe selbst sind gelöscht, die Angabe erklärt die Mischung):
       Hero, Kernfunktionen, Online-Buchung, Integration,
       Branchen, Warum, Datenschutz ........................ aus v2
       Grundprinzip, Kalender-Synchronisation .............. aus v3
       Anwendungsfälle, Abbinder .......................... aus v6

     EINE Typo-Skala für alles. Die Vorlagen brachten drei verschiedene
     Staffelungen mit (v2: lede 18px, v3: 17px, v6: bis 20px fluid). Hier
     gilt durchgehend die Skala von v2, weil von dort die meisten Abschnitte
     stammen — die übernommenen Teile aus v3 und v6 behalten ihr LAYOUT,
     folgen aber dieser Schriftordnung.

     Formensprache (dokumentierte Regel):
       Flächen, Bilder   8px   (--rt-radius-lg)
       Bedienelemente    4px   (--rt-radius-md)
       Chips             999px (--rt-radius-pill)
       Trennlinien       ohne Radius, sie sind Linien

     Marken-Tokens unverändert.
     ══════════════════════════════════════════════════════════════════════ */

  .v10 {
    --e-out: cubic-bezier(0.23, 1, 0.32, 1);

    --surface:      var(--rt-paper);
    --surface-2:    #FFFFFF;
    --surface-tint: #F2EEE4;
    --ink:          var(--rt-ink);
    --ink-muted:    var(--rt-fg-muted);
    --ink-subtle:   var(--rt-fg-subtle);
    --line:         var(--rt-line);
    --accent:       var(--rt-main-400);
    --accent-soft:  rgba(28, 48, 49, 0.07);
    --on-dark:      var(--rt-warm-100);
    --on-dark-mute: var(--rt-fg-on-dark-muted);

    background: var(--surface); color: var(--ink); font-family: var(--rt-font-body);
  }
  @media (prefers-color-scheme: dark) {
    .v10 {
      --surface: #0B1C1D; --surface-2: #112A2B; --surface-tint: #15302F;
      --ink: var(--rt-warm-100); --ink-muted: #B7B0A2; --ink-subtle: #8C9698;
      --line: #24403F; --accent: var(--rt-warm-100); --accent-soft: rgba(250,241,224,.08);
    }
  }

  .v10 *, .v10 *::before, .v10 *::after { box-sizing: border-box; }
  .v10-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 28px; }
  @media (max-width: 720px) { .v10-wrap { padding-inline: 20px; } }
  .v10 picture { display: block; }

  /* ══ EINE TYPO-SKALA FÜR ALLES ═════════════════════════════════════ */
  .v10-display {
    font-family: var(--rt-font-display); font-weight: 500;
    /* leading 1.06 + Reserve: Playfair-Kursive mit y/g/j braucht Unterlängen-Luft */
    line-height: 1.06; letter-spacing: -0.015em; margin: 0; padding-bottom: .08em;
  }
  .v10-display em { font-style: italic; font-weight: 500; }

  .v10-h1 { font-size: clamp(38px, 5.4vw, 68px); }
  .v10-h2 { font-size: clamp(30px, 3.8vw, 46px); }
  /* Zwei h3-Stufen, bewusst getrennt: die Antiqua-Variante trägt Titel von
     Kacheln und Stationen, die Grotesk-Variante kleine Zwischenüberschriften. */
  .v10-h3     { font-family: var(--rt-font-display); font-weight: 500; font-size: 26px;
                line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
  .v10-h4     { font-family: var(--rt-font-body); font-weight: 700; font-size: 18px;
                line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
  .v10-h5     { font-family: var(--rt-font-body); font-weight: 700; font-size: 15px;
                line-height: 1.35; letter-spacing: -0.005em; margin: 0; }

  .v10-lede { font-size: 18px; line-height: 1.65; color: var(--ink-muted); margin: 18px 0 0; max-width: 62ch; }
  .v10-body { font-size: 15.5px; line-height: 1.68; color: var(--ink-muted); margin: 0; }
  .v10-sm   { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

  .v10-eyebrow {
    display: inline-block; font-family: var(--rt-font-mono); font-size: 11px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 20px;
  }
  .v10-eyebrow--dark { color: var(--rt-warm-200); }
  .v10-micro { font-family: var(--rt-font-mono); font-size: 11px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--ink-subtle); }

  /* ── Bedienelemente ───────────────────────────────────────────────── */
  .v10-btn {
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    font-family: var(--rt-font-body); font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
    padding: 14px 26px; border-radius: var(--rt-radius-md); border: 1px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: transform 160ms var(--e-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  }
  .v10-btn:active { transform: scale(0.97); }
  .v10-btn--primary { background: var(--rt-main-400); color: var(--rt-warm-100); }
  .v10-btn--primary:hover { background: var(--rt-main-300); }
  .v10-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .v10-btn--ghost:hover { border-color: var(--ink); }
  .v10-btn--cream { background: var(--rt-warm-100); color: var(--rt-main-500); }
  .v10-btn--cream:hover { background: #fff; }
  .v10-btn--outline-dark { background: transparent; color: var(--rt-warm-100); border-color: rgba(250,241,224,.35); }
  .v10-btn--outline-dark:hover { border-color: var(--rt-warm-100); background: rgba(250,241,224,.07); }

  .v10-link {
    display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
    padding-bottom: 2px; transition: border-color 200ms ease, gap 200ms var(--e-out);
  }
  .v10-link:hover { border-color: currentColor; gap: 11px; }
  .v10-link--dark { color: var(--rt-warm-100); border-color: rgba(250,241,224,.35); }

  .v10-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rt-font-mono);
             font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
  .v10-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--rt-radius-pill);
                     background: var(--rt-success); flex: none; }

  /* ── Sektionsrhythmus ─────────────────────────────────────────────── */
  .v10-sec { padding-block: clamp(72px, 9vw, 128px); }
  .v10-sec--tight { padding-block: clamp(56px, 6vw, 88px); }
  .v10-sec--tint { background: var(--surface-tint); }
  .v10-sec--dark { background: var(--rt-main-400); color: var(--on-dark); }
  .v10-sec--dark .v10-body, .v10-sec--dark .v10-lede, .v10-sec--dark .v10-sm { color: var(--on-dark-mute); }

  /* ══ 1 · HERO ── aus v2 ════════════════════════════════════════════ */
  .v10-hero { background: var(--rt-main-400); color: var(--on-dark); overflow: hidden; }
  .v10-hero__grid {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center;
    padding-block: clamp(48px, 6vw, 84px);
    /* Deckel statt 100dvh: der Hero soll auf 800px-Notebooks komplett stehen. */
    min-height: min(84dvh, 820px);
  }
  @media (max-width: 940px) { .v10-hero__grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-block: 56px; } }
  .v10-hero__mark { display: block; height: 44px; width: auto; margin-bottom: 26px; }
  .v10-hero__title { font-size: clamp(40px, 5.8vw, 76px); color: var(--rt-warm-100); }
  .v10-hero__lede { color: var(--on-dark-mute); font-size: 17.5px; line-height: 1.62; margin: 22px 0 0; max-width: 52ch; }
  .v10-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
  .v10-hero__media { position: relative; }
  .v10-hero__shot { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
                    border-radius: var(--rt-radius-lg); box-shadow: 0 28px 70px rgba(0,0,0,.34); }
  /* Der Hinweis sitzt am RECHTEN Bildrand und ragt leicht darüber hinaus.
     Der Versatz bleibt innerhalb des Wrapper-Innenabstands, wird also nicht
     vom overflow:hidden des Hero abgeschnitten. */
  .v10-hero__badge {
    position: absolute; right: -22px; bottom: 34px; max-width: 230px;
    background: var(--rt-warm-100); color: var(--rt-main-500);
    border-radius: var(--rt-radius-lg); padding: 16px 20px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: right;
  }
  .v10-hero__badge b { display: block; font-family: var(--rt-font-display); font-size: 24px; line-height: 1; }
  .v10-hero__badge span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--rt-main-300); margin-top: 6px; }
  @media (max-width: 940px) { .v10-hero__badge { right: 12px; bottom: 12px; } }

  /* ══ 2 · GRUNDPRINZIP ── Layout aus v3, Schrift aus v10 ════════════ */
  .v10-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
  @media (max-width: 860px) { .v10-cols3 { grid-template-columns: 1fr; } }
  .v10-col { padding: 0 30px; border-left: 1px solid var(--line); }
  .v10-col:first-child { padding-left: 0; border-left: 0; }
  .v10-col:last-child { padding-right: 0; }
  @media (max-width: 860px) {
    .v10-col { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
    .v10-col:first-child { border-top: 0; padding-top: 0; }
  }
  .v10-col__n { font-family: var(--rt-font-display); font-size: 44px; line-height: 1; color: var(--ink-subtle); }
  .v10-col ul { list-style: none; margin: 16px 0 0; padding: 0; }
  .v10-col li { font-size: 14px; line-height: 1.55; color: var(--ink-muted); padding: 8px 0;
                border-top: 1px dotted var(--line); }

  /* ══ 3 · KERNFUNKTIONEN ── aus v2 ══════════════════════════════════ */
  .v10-index { display: grid; margin-top: 48px; }
  .v10-index__grp { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding-block: 44px; }
  .v10-index__grp + .v10-index__grp { border-top: 1px solid var(--line); }
  @media (max-width: 900px) { .v10-index__grp { grid-template-columns: 1fr; gap: 20px; } }
  .v10-index__lab span { display: block; margin-top: 8px; }
  .v10-index__items { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
  @media (max-width: 680px) { .v10-index__items { grid-template-columns: 1fr; gap: 22px; } }
  .v10-index__it p { margin-top: 6px; }

  /* ══ 4 · ONLINE-BUCHUNG ── aus v2 ══════════════════════════════════ */
  .v10-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 900px) { .v10-split { grid-template-columns: 1fr; gap: 36px; } }
  .v10-split__media { width: 100%; aspect-ratio: 5/4; object-fit: cover;
                      border-radius: var(--rt-radius-lg); box-shadow: var(--rt-shadow-md); }
  .v10-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
  .v10-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px;
                   font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
  .v10-checks svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); flex: none; }

  /* ══ 5 · KALENDER ── Layout aus v3, Schrift aus v10 ════════════════ */
  .v10-flow { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px;
              border-top: 1px solid rgba(250,241,224,.24); }
  @media (max-width: 860px) { .v10-flow { grid-template-columns: 1fr; } }
  .v10-flow__n { padding: 26px 26px 0; border-left: 1px solid rgba(250,241,224,.24); }
  .v10-flow__n:first-child { padding-left: 0; border-left: 0; }
  @media (max-width: 860px) {
    .v10-flow__n { border-left: 0; border-top: 1px solid rgba(250,241,224,.24); padding: 22px 0 0; }
    .v10-flow__n:first-child { border-top: 0; }
  }
  .v10-flow__n h4 { color: var(--rt-warm-100); }
  .v10-flow__sub { font-size: 13px; color: var(--rt-warm-200); margin: 5px 0 16px; }
  .v10-flow__n ul { list-style: none; margin: 0; padding: 0; }
  .v10-flow__n li { font-size: 14px; line-height: 1.55; color: var(--rt-warm-100); padding: 7px 0;
                    border-top: 1px dotted rgba(250,241,224,.2); }

  /* ══ 6 · ANWENDUNGSFÄLLE ── Layout aus v6, Schrift aus v10 ═════════ */
  .v10-cases { display: grid; gap: clamp(56px, 7vw, 104px); margin-top: 56px; }
  .v10-case { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(34px, 5vw, 68px); align-items: center; }
  /* Jede zweite Kachel spiegelt sich — hält die Seite in Bewegung, ohne laut zu werden. */
  .v10-case:nth-child(even) > :first-child { order: 2; }
  @media (max-width: 900px) {
    .v10-case { grid-template-columns: 1fr; gap: 26px; }
    .v10-case:nth-child(even) > :first-child { order: 0; }
  }
  .v10-case img { width: 100%; display: block; border-radius: var(--rt-radius-lg); }
  .v10-case ul { list-style: none; margin: 20px 0 24px; padding: 0; }
  .v10-case li { font-size: 15px; line-height: 1.6; color: var(--ink-muted); padding-left: 16px; position: relative; }
  .v10-case li + li { margin-top: 8px; }
  .v10-case li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 1px;
                         background: var(--ink-subtle); }

  /* ══ 7 · INTEGRATION ── aus v2 ═════════════════════════════════════ */
  .v10-chats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: start; }
  @media (max-width: 900px) { .v10-chats { grid-template-columns: 1fr; } }
  .v10-chats > :nth-child(2) { margin-top: 34px; }
  .v10-chats > :nth-child(3) { margin-top: 68px; }
  @media (max-width: 900px) { .v10-chats > :nth-child(2), .v10-chats > :nth-child(3) { margin-top: 0; } }
  .v10-chat { background: var(--surface-2); border: 1px solid var(--line);
              border-radius: var(--rt-radius-lg); padding: 22px; }
  .v10-chat__who { margin-bottom: 16px; }
  .v10-msg { font-size: 14px; line-height: 1.55; padding: 11px 14px;
             border-radius: var(--rt-radius-lg); margin-bottom: 9px; max-width: 92%; }
  .v10-msg--in  { background: var(--accent-soft); color: var(--ink); }
  .v10-msg--bot { background: var(--rt-main-400); color: var(--rt-warm-100); margin-left: auto; }
  .v10-code { font-family: var(--rt-font-mono); font-size: .92em; background: var(--accent-soft);
              padding: 1px 6px; border-radius: 3px; }

  /* ══ 8 · BRANCHEN ── aus v2 ════════════════════════════════════════ */
  .v10-mq { overflow: hidden; padding-block: 30px; border-block: 1px solid var(--line); margin-top: 44px; }
  .v10-mq__t { display: flex; gap: 14px; width: max-content; animation: v10-scroll 46s linear infinite; }
  .v10-mq:hover .v10-mq__t { animation-play-state: paused; }
  @keyframes v10-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .v10-chip { font-size: 14.5px; padding: 10px 20px; border-radius: var(--rt-radius-pill);
              border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); white-space: nowrap; }

  /* ══ 9 · WARUM ── aus v2 ═══════════════════════════════════════════ */
  .v10-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; margin-top: 52px; }
  @media (max-width: 820px) { .v10-reasons { grid-template-columns: 1fr; gap: 30px; } }
  .v10-reason { display: grid; grid-template-columns: 40px 1fr; gap: 18px; }
  .v10-reason__n { font-family: var(--rt-font-display); font-size: 21px; color: var(--ink-subtle); line-height: 1.2; }
  .v10-reason p { margin-top: 7px; }

  /* ══ 10 · DATENSCHUTZ ── aus v2 ════════════════════════════════════ */
  .v10-privacy-lead { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
                      background: var(--surface-2); border: 1px solid var(--line);
                      border-radius: var(--rt-radius-lg); padding: 28px 30px; margin-top: 44px; }
  @media (max-width: 700px) { .v10-privacy-lead { grid-template-columns: 1fr; } }
  .v10-privacy-lead svg { width: 26px; height: 26px; color: var(--accent); }
  .v10-privacy-lead p { margin-top: 8px; }
  .v10-privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; margin-top: 36px; }
  @media (max-width: 760px) { .v10-privacy-grid { grid-template-columns: 1fr; gap: 26px; } }
  .v10-privacy-grid p { margin-top: 8px; }
  .v10-partners { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px;
                  border-top: 1px solid var(--line); }
  .v10-partners a { display: block; font-size: 14px; color: var(--ink-muted); text-decoration: none;
                    border-bottom: 1px solid transparent; padding-block: 3px; width: fit-content; }
  .v10-partners a:hover { color: var(--ink); border-color: var(--line); }
  .v10-partners h4 { margin-bottom: 10px; }

  /* ══ 11 · ABBINDER ── aus v6 ═══════════════════════════════════════ */
  .v10-end { text-align: center; max-width: 760px; margin-inline: auto; }
  .v10-end .v10-display { margin-inline: auto; max-width: 16ch; }
  .v10-end .v10-lede { margin-inline: auto; }
  .v10-end__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }

  /* ── Scroll-Auftritt ──────────────────────────────────────────────── */
  .v10-r { opacity: 0; transform: translateY(18px); }
  .v10-r.in { opacity: 1; transform: none;
              transition: opacity 620ms var(--e-out), transform 620ms var(--e-out);
              transition-delay: var(--d, 0ms); }
  @media (prefers-reduced-motion: reduce) {
    .v10-r { opacity: 1; transform: none; transition: none; }
    .v10-mq__t { animation: none; }
    .v10-btn:active { transform: none; }
  }