/* MT KI – gemeinsames Aussehen aller Seiten (Apple-Stil, MT-Blau) */
  /* Schrift lokal eingebunden (kein Google-Fonts-Abruf, DSGVO) */
  @font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

  :root {
    --blau: #00ADEF;        /* MT-Blau, Logo und Akzente */
    --blau-text: #00ADEF;   /* ein einziges Blau überall (Marc 30.10.2026: zwei Blautöne passten nicht zusammen) */
    --text: #1d1d1f;
    --grau: #6e6e73;
    --flaeche: #f5f5f7;
    --linie: #d2d2d7;
    --rot: #ff3b30;
    --gruen: #34c759;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
         color: var(--text); background: #fff; font-size: 19px; line-height: 1.47; -webkit-font-smoothing: antialiased; }
  a { color: var(--blau-text); text-decoration: none; font-weight: 500; }
  .breite { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .schmal { max-width: 760px; margin: 0 auto; padding: 0 24px; }
  section { padding: 120px 0; }
  .grau { background: var(--flaeche); }
  .mitte { text-align: center; }

  /* Kopfleiste */
  header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.78);
           backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
           border-bottom: 1px solid rgba(0,0,0,.08); }
  /* Wie die Leiste auf Apples Produktseiten: Logo links, Links und kleiner Knopf rechts zusammen (Marc 30.10.2026) */
  header .breite { display: flex; align-items: center; height: 52px; }
  header img { height: 20px; display: block; }
  nav { display: flex; gap: 24px; font-size: 12px; margin-left: auto; margin-right: 22px; }
  nav a { color: var(--text); opacity: .72; font-weight: 400; letter-spacing: .01em; }
  nav a:hover { opacity: 1; }
  header a:first-child + .knopf-klein { margin-left: auto; }  /* Seiten ohne Menü (Impressum, Datenschutz) */
  .knopf-klein { font-size: 12px; font-weight: 500; background: var(--blau-text); color: #fff; padding: 4px 12px; border-radius: 980px; }

  /* Typografie */
  .ueber { font-size: 21px; font-weight: 600; color: var(--blau-text); margin-bottom: 8px; }
  h1 { font-size: clamp(44px, 7.5vw, 84px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
  h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
  h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; margin-bottom: 10px; }
  .lead { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; color: var(--grau); font-weight: 500; letter-spacing: -0.01em; }
  .klein { font-size: 13px; color: var(--grau); }

  /* Startbereich */
  .start { padding: 110px 0 90px; }
  .start-logo { height: 70px; margin: 0 auto 40px; display: block; }
  .start h1 { max-width: 900px; margin: 0 auto; }
  .start .lead { max-width: 720px; margin: 24px auto 0; }
  .knoepfe { display: flex; gap: 28px; justify-content: center; align-items: center; margin-top: 40px; flex-wrap: wrap; }
  .knopf { background: var(--blau-text); color: #fff; font-size: 17px; font-weight: 600; padding: 12px 24px; border-radius: 980px; }
  .pfeil::after { content: " ›"; }
  /* Leuchtrand wie Apple Intelligence (Marc 30.10.2026: „das ist ja auch unser Ergebnis, kann es auch wirklich leuchten“) –
     echtes CSS, dreht sich langsam; bei „Bewegung reduzieren“ steht es still */
  @property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  @keyframes drehen { to { --winkel: 360deg; } }
  .leuchten { position: relative; display: inline-block; margin-top: 90px; border-radius: 28px; }
  .leuchten::before, .leuchten::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--winkel), #BC82F3, #F5B9EA, #8D9FFF, #AA6EEE, #FF6778, #FFBA71, #C686FF, #BC82F3); animation: drehen 10s linear infinite; }
  /* Farben wie das Leuchten von Apple Intelligence (Pastell statt Neon), aber zurückhaltend: dünner Rand, sanftes Leuchten
     (Marc 30.10.2026: erst „zu kitschig“, dann „nur noch blau … mach es analog zu Apple“) */
  .leuchten::before { inset: 0; filter: blur(24px); opacity: .5; z-index: 0; }
  .leuchten::after { inset: -1.5px; padding: 1.5px; z-index: 2;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  .startzahl { position: relative; z-index: 1; display: inline-block; padding: 28px 40px; border-radius: 28px; background: #fff; }
  @media (prefers-reduced-motion: reduce) { .leuchten::before, .leuchten::after { animation: none; } }
  .startzahl b { display: block; font-size: 56px; letter-spacing: -0.03em; line-height: 1; color: var(--blau); }
  .startzahl span { font-size: 17px; color: var(--grau); }

  /* Problem */
  .problem h2 { max-width: 820px; margin: 0 auto 24px; }
  .problem p { max-width: 680px; margin: 0 auto; color: var(--grau); font-size: 21px; }

  /* Leistungen */
  .kopfzeile { margin-bottom: 56px; }
  .kopfzeile p { margin-top: 16px; }
  .kopfzeile .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
  .karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .karte { background: #fff; border-radius: 28px; padding: 36px 32px; }
  .grau .karte { background: #fff; }
  section:not(.grau) .karte { background: var(--flaeche); }
  .karte .symbol { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,173,239,.12); color: var(--blau-text);
                   display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .karte .symbol svg { width: 24px; height: 24px; }
  .karte p { color: var(--grau); font-size: 17px; }

  /* Zahlen heute (dunkel) */
  .dunkel { background: #000; color: #f5f5f7; }
  .dunkel .ueber { color: var(--blau); }
  .dunkel .lead { color: #a1a1a6; }
  .cockpit { margin-top: 64px; background: #1c1c1e; border-radius: 32px; padding: 32px; }
  .cockpit-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #a1a1a6; margin-bottom: 24px; }
  .kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kachel { background: #2c2c2e; border-radius: 20px; padding: 22px; }
  .kachel span { font-size: 13px; color: #a1a1a6; display: block; }
  .kachel b { display: block; font-size: 30px; letter-spacing: -0.02em; margin: 6px 0 2px; color: #fff; }
  .kachel i { font-style: normal; font-size: 13px; }
  .plus { color: var(--gruen); } .minus { color: var(--rot); }
  .verlauf { margin-top: 14px; background: #2c2c2e; border-radius: 20px; padding: 22px; }
  .verlauf svg { width: 100%; height: 120px; display: block; margin-top: 8px; }
  .fussnote { margin-top: 18px; font-size: 13px; color: #86868b; text-align: center; }

  /* Eigene Zahlen */
  .zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
  .zahl b { display: block; font-size: 48px; letter-spacing: -0.03em; line-height: 1.05; }
  .zahl span { color: var(--grau); font-size: 17px; }
  .gross { margin-top: 64px; }
  .gross b { font-size: clamp(64px, 10vw, 120px); letter-spacing: -0.045em; line-height: 1; color: var(--blau); display: block; }
  .gross span { font-size: 21px; color: var(--grau); }
  .fakten { display: flex; justify-content: center; gap: 56px; margin-top: 40px; flex-wrap: wrap; }
  .fakten b { display: block; font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
  .fakten span { font-size: 17px; color: var(--grau); }
  .gross-paar { display: flex; justify-content: center; align-items: center; gap: 48px; margin-top: 64px; flex-wrap: wrap; }
  .gross-paar .gross { margin-top: 0; }
  .gleich { font-size: clamp(48px, 7vw, 80px); color: var(--linie); font-weight: 300; }

  /* Ablauf */
  .schritte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 56px; counter-reset: s; }
  .schritt { text-align: left; }
  .schritt::before { counter-increment: s; content: counter(s); display: flex; width: 40px; height: 40px; border-radius: 50%;
                     background: var(--text); color: #fff; font-weight: 600; font-size: 17px; align-items: center; justify-content: center; margin-bottom: 18px; }
  .schritt h3 { font-size: 19px; margin-bottom: 6px; }
  .schritt p { font-size: 15px; color: var(--grau); }

  /* Gründe */
  .gruende { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }

  /* Sicherheit */
  .liste { list-style: none; margin-top: 40px; display: grid; gap: 18px; }
  .liste li { display: flex; gap: 16px; align-items: flex-start; font-size: 19px; }
  .liste li::before { content: ""; flex: 0 0 24px; height: 24px; margin-top: 2px; border-radius: 50%;
                      background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat; }

  /* Über mich */
  .ich { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: center; }
  .foto { width: 220px; height: 220px; border-radius: 50%; background: #fff; box-shadow: 0 2px 24px rgba(0,0,0,.06);
          display: flex; align-items: center; justify-content: center; color: var(--grau); font-size: 15px; }
  .foto img { width: 62%; height: auto; display: block; }
  .ich p { color: var(--grau); margin-top: 16px; }
  .ich p.ueber { color: var(--blau-text); margin-top: 0; }

  /* Kontakt */
  .kontakt .knoepfe { margin-top: 36px; }
  .kontakt .wege { margin-top: 28px; color: var(--grau); }

  footer { background: var(--flaeche); padding: 28px 0 40px; font-size: 12px; color: var(--grau); line-height: 1.6; }
  footer .breite { border-top: 1px solid var(--linie); padding-top: 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

  @media (max-width: 860px) {
    nav { display: none; }
    .knopf-klein { margin-left: auto; }
    section { padding: 80px 0; }
    .karten, .gruende, .zahlen { grid-template-columns: 1fr; }
    .zahlen { grid-template-columns: repeat(2, 1fr); }
    .kacheln { grid-template-columns: repeat(2, 1fr); }
    .schritte { grid-template-columns: 1fr; }
    .schritt { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; }
    .schritt::before { grid-row: span 2; margin-bottom: 0; }
    .ich { grid-template-columns: 1fr; text-align: center; gap: 28px; }
    .foto { margin: 0 auto; width: 160px; height: 160px; }
    .cockpit { padding: 20px; border-radius: 24px; }
    .kachel { padding: 16px; }
    .kacheln { gap: 10px; }
    .kachel b { font-size: 21px; white-space: nowrap; }
    .startzahl { padding: 24px 28px; }
    .startzahl b { font-size: 40px; }
    .gross-paar { gap: 8px; flex-direction: column; }
    .gleich { line-height: 1; }
    .zahl b { font-size: 34px; }
    .fakten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
    .fakten b { font-size: 44px; }
    .start-logo { height: 52px; }
  }

  /* Rechtliche Seiten (Impressum, Datenschutz) */
  .recht { padding: 72px 0 96px; }
  .recht h1 { font-size: clamp(36px, 5vw, 48px); letter-spacing: -0.03em; margin-bottom: 32px; }
  .recht h2 { font-size: 24px; letter-spacing: -0.015em; margin: 40px 0 10px; }
  .recht h3 { font-size: 19px; margin: 24px 0 6px; }
  .recht p, .recht li { font-size: 17px; color: #3a3a3c; margin-bottom: 10px; }
  .recht ul { padding-left: 22px; margin-bottom: 10px; }
  .recht .stand { color: var(--grau); font-size: 14px; margin-top: 40px; }