/* ManjaPartners, Design-Tokens. Stand: CI-Book Ausgabe 1.2, Oktober 2026 */
:root {
  /* Markenfarben */
  --mp-navy: #0B1F45;          /* Nachtblau */
  --mp-blue: #1F4FCB;          /* Manja Blau */
  --mp-white: #FFFFFF;
  --mp-mist: #F3F5F8;          /* Nebel */
  --mp-grad: linear-gradient(135deg, #0B1F45 0%, #143A8F 55%, #1F4FCB 100%);
  --mp-grad-glow: radial-gradient(60% 70% at 85% 10%, rgba(126,168,255,.42), rgba(126,168,255,0) 70%);

  /* Funktionstöne */
  --mp-blue-hover: #1A43AE;
  --mp-blue-press: #163A98;
  --mp-ice: #E8EEF9;
  --mp-ink: #0B1F45;
  --mp-ink-2: #46546D;
  --mp-ink-3: #5B6880;
  --mp-line: #D9DFE8;
  --mp-line-2: #E9EDF3;
  --mp-on-dark: #FFFFFF;
  --mp-on-dark-2: #BFD3F5;
  --mp-on-grad: rgba(255,255,255,.84);

  /* Schrift */
  --mp-font-display: 'Albert Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;   /* eine Familie, Cormorant nur im Logo */
  --mp-font-text: 'Albert Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mp-display-tracking: -0.022em;
  --mp-display-xl: 300 clamp(44px, 6vw, 80px)/1.04 var(--mp-font-display);
  --mp-display-lg: 300 clamp(34px, 4.2vw, 54px)/1.08 var(--mp-font-display);
  --mp-heading-lg: 300 clamp(27px, 3vw, 37px)/1.14 var(--mp-font-display);
  --mp-heading-md: 400 clamp(22px, 2.2vw, 27px)/1.2 var(--mp-font-display);
  --mp-heading-sm: 400 22px/1.3 var(--mp-font-display);
  --mp-body-lg: 400 20px/1.5 var(--mp-font-text);
  --mp-body: 400 17px/1.55 var(--mp-font-text);
  --mp-body-sm: 400 15px/1.5 var(--mp-font-text);
  --mp-ui: 500 14px/1.2 var(--mp-font-text);
  --mp-caption: 400 13px/1.4 var(--mp-font-text);
  --mp-measure: 64ch;

  /* Rundung: Blatt für die Marke, Apple-Rundung für die Oberfläche */
  --mp-leaf-small: 5px;        /* die drei feinen Ecken des Blatts */
  --mp-radius-btn: 18px;       /* Blatt. Kompakt 14 px, Hero 22 px */
  --mp-radius-media: 28px;     /* Blatt */
  --mp-radius-glass: 40px;     /* Blatt */
  --mp-radius-card: 20px;      /* Apple */
  --mp-radius-tile: 14px;      /* Apple */
  --mp-radius-input: 10px;     /* Apple */

  /* Button */
  --mp-btn-h: 52px;  --mp-btn-h-sm: 42px;  --mp-btn-h-lg: 60px;
  --mp-btn-pad: 28px;  --mp-btn-gap: 16px;
  --mp-btn-glow: radial-gradient(140% 160% at 100% 100%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);

  /* Foto mit Licht */
  --mp-photo-light: .22;       /* Blaue Stunde im Modus Screen */
  --mp-photo-wash: linear-gradient(180deg, rgba(11,31,69,.04), rgba(11,31,69,.08) 50%, rgba(11,31,69,.48));

  /* Icons */
  --mp-icon-stroke: 1.75px;
  --mp-icon-fill: rgba(31,79,203,.14);

  /* Glas */
  --mp-glass-fill: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 55%, rgba(255,255,255,.13));
  --mp-glass-edge: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.14) 35%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.40));
  --mp-glass-blur: 40px;
  --mp-glass-shadow: 0 40px 90px -24px rgba(2,8,28,.6);

  /* Bewegung */
  --mp-ease: cubic-bezier(.2,.7,.2,1);
  --mp-ease-std: cubic-bezier(.4,0,.2,1);
  --mp-dur-1: 120ms;  --mp-dur-2: 220ms;  --mp-dur-3: 360ms;  --mp-dur-4: 640ms;
  --mp-slide-fade: 1600ms;  --mp-slide-hold: 7s;

  /* Raster */
  --mp-space-1: 8px;  --mp-space-2: 16px;  --mp-space-3: 24px;  --mp-space-4: 32px;
  --mp-space-5: 48px; --mp-space-6: 64px;  --mp-space-7: 96px;  --mp-space-8: 128px;
  --mp-container: 1180px;
  --mp-gutter: 24px;
}

/* Rundung: Apple-Rundung und Blatt. Superellipse, wo der Browser sie kann */
.mp-r { border-radius: var(--mp-radius-card); }
.mp-leaf { border-radius: var(--mp-leaf-small) var(--mp-leaf-small) var(--mp-radius-btn) var(--mp-leaf-small); }
@supports (corner-shape: squircle) { .mp-r, .mp-leaf { corner-shape: squircle; } }

/* Button, primär */
.mp-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: var(--mp-btn-h); padding: 0 var(--mp-btn-pad);
  font: var(--mp-ui); font-size: 15px; color: #fff; background: var(--mp-blue); border: 0; overflow: hidden;
  border-radius: var(--mp-leaf-small) var(--mp-leaf-small) var(--mp-radius-btn) var(--mp-leaf-small);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12), 0 12px 28px -14px rgba(31,79,203,.75); }
.mp-btn::before { content: ""; position: absolute; inset: 0; background: var(--mp-btn-glow); opacity: 0; transition: opacity var(--mp-dur-3) var(--mp-ease); }
.mp-btn:hover { background: var(--mp-blue-hover); }
.mp-btn:hover::before { opacity: 1; }
.mp-btn:active { background: var(--mp-blue-press); transform: translateY(1px); }

/* Glas */
.mp-glass { position: relative; border-radius: var(--mp-leaf-small) var(--mp-leaf-small) var(--mp-radius-glass) var(--mp-leaf-small); background: var(--mp-glass-fill);
  backdrop-filter: blur(var(--mp-glass-blur)) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--mp-glass-shadow); }
.mp-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--mp-glass-edge);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }