/* ═══════════════════════════════════════════════════════════════════
   Meducated · TEAMWORK + Liquid Glass – Kopie von „Teamwork.com (Website)“ vom 17.10.2026.
   Alle Teamwork-Grundwerte unten sind unverändert übernommen; neu ist nur der Block
   „Liquid Glass (Meducated)“ am Ende des :root.
   ───────────────────────────────────────────────────────────────────
   Teamwork.com (Website) · Grundwerte
   Gemessen am 13.10.2026 auf www.teamwork.com (Startseite, /pricing/,
   /product/project-management/) bei 1520 × 980 mit Edge/Chromium.
   Herkunft je Wert: references/messliste.md. Die Original-Namen der
   Website (--tw-…) stehen in Klammern hinter jedem Token.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Schiefer: Text und dunkle Flächen ─────────────────────────── */
  --twc-ink:        #1d1c39;  /* Titel, Hauptknopf (--tw-slate) */
  --twc-ink-deep:   #0b0e1f;  /* Tag-Text, FAQ-Titel (--tw-slate-100) */
  --twc-text:       #373753;  /* Fließtext, Statement (--tw-slate-60) */
  --twc-text-2:     #494e6a;  /* Untertitel, Abschnittstext (--tw-slate-40) */
  --twc-muted:      #727491;  /* Hinweise, Preiszusatz, inaktive Reiter (--tw-slate-20) */
  --twc-line-soft:  #b8b9c8;  /* Unterstrich der Textknöpfe (--tw-slate-10) */

  /* ── Warme Neutraltöne: Grund und Flächen ─────────────────────── */
  --twc-page:       #fcfbf9;  /* Seitengrund (--tw-neutral-warm-25) */
  --twc-sand:       #f9f5f1;  /* Pillen, Kennzahlkarten (--tw-neutral-warm-50) */
  --twc-sand-2:     #efe8df;  /* Fortschritt in Pillen, Hover-Ring (--tw-neutral-warm-75) */
  --twc-grey-bg:    #f7f7f7;  /* Fußzeile, Menü-Fußleiste, Nav-Hover (--tw-neutral-warm-100) */
  --twc-grey-2:     #f0eeee;  /* Countdown in Branchen-Reitern (--tw-neutral-warm-200) */
  --twc-border:     #dbd7d7;  /* Tag-Rand, FAQ-Linien (--tw-neutral-warm-300) */
  --twc-divider:    #edebeb;  /* Kopfleisten-Linie, Menürand (--tw-nav-divider-border) */
  --twc-border-cool:#d9d9d9;  /* Rand der Preiskarten */
  --twc-border-tab: #c8c8c8;  /* Spaltenlinien der Vergleichstabelle */
  --twc-white:      #ffffff;

  /* ── Marke ─────────────────────────────────────────────────────── */
  --twc-pink:       #ff22b1;  /* Tag-Schrift, Fortschrittsbalken, Logo-Punkt (--tw-pink) */
  --twc-pink-60:    #ff61c7;  /* Verlaufsmitte (--tw-pink-60) */
  --twc-pink-20:    #f8cae8;  /* „Empfohlen“-Plakette, Hero-Blasen (--tw-pink-20) */
  --twc-purple:     #895ef7;  /* Zweitmarke: Knopf auf Produkt-/Preisseiten, Haken (--tw-purple) */
  --twc-purple-80:  #6438e0;  /* Violetter Text (--tw-purple-80) */
  --twc-violet-hot: #9900ff;  /* Überzeile der Produktseiten („PROJECT MANAGEMENT“) */
  --twc-purple-20:  #d5c8fb;  /* Verlaufsende, Spaltenrand (--tw-purple-20) */
  --twc-purple-10:  #f3effe;  /* (--tw-purple-10) */
  --twc-lilac-cell: #f1eeff;  /* Hervorgehobene Tabellenspalte */
  --twc-lilac-head: #f4f1fe;  /* Kopf der hervorgehobenen Spalte (Verlauf oben) */
  --twc-orange-40:  #ff9c73;  /* Verlaufsanfang (--tw-orange-40) */
  --twc-orange:     #ff7641;  /* KI-Rand (--tw-orange) */
  --twc-blue:       #4da2f8;  /* KI-Rand (--tw-blue) */

  /* ── Verläufe ──────────────────────────────────────────────────── */
  --twc-grad-stops: var(--twc-orange-40) 0%, var(--twc-pink-60) 50%, var(--twc-purple-20) 100%;
  --twc-grad-diagonal: linear-gradient(135deg, var(--twc-grad-stops));   /* aktiver Pillenrand, Kartenrand-Hover */
  --twc-grad-horizontal: linear-gradient(90deg, var(--twc-grad-stops));
  --twc-grad-menu-cta: linear-gradient(to right, #f7b4f8, var(--twc-purple-20)); /* „Produkt entdecken“ im Menü */
  --twc-grad-ai-ring: repeating-conic-gradient(from var(--twc-angle, 0deg), var(--twc-blue) 0deg, var(--twc-pink-60) 16%, var(--twc-orange) 33%, var(--twc-blue) 50%, var(--twc-pink-60) 66%, var(--twc-orange) 83%, var(--twc-blue) 100%);
  /* Bühne der Produkt-Reiter: fünf weiche Lichtflecken über rosa-violettem Grundverlauf */
  --twc-grad-stage:
    radial-gradient(24% 54% at 37% 5%, rgba(253,238,236,.85), rgba(253,238,236,0)),
    radial-gradient(22% 144% at 14% 116%, rgba(253,0,69,.18), rgba(253,0,69,0)),
    radial-gradient(77% 34% at -14% 44%, rgba(253,224,255,.62), rgba(253,224,255,0)),
    radial-gradient(12% 69% at 58% 122%, rgba(255,99,141,.32), rgba(255,99,141,0)),
    radial-gradient(72% 29% at 23% 2%, rgba(255,188,153,.17), rgba(255,188,153,0)),
    linear-gradient(128deg, #fdcfd4 1%, #fdbfcc 8%, #fdcbe0 21%, #fdbbd3 27%, #fdbacf 30%, #fdc1cf 34%, #fddcde 41%, #fdc7cd, #fdd2e6 53%, #fdaddd 58%, #fca5dc 62%, #f4bcf2 73%, #e4baed, #e0b7e7, #e5b7e0, #f3c1db 93%, #fdd1e5);
  /* Schlussaufruf: Ersatz für das Original-Verlaufsbild (neutrale Marke) */
  --twc-grad-cta:
    radial-gradient(60% 90% at 100% 60%, rgba(255,97,199,.55), rgba(255,97,199,0) 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(255,156,115,.55), rgba(255,156,115,0) 70%),
    radial-gradient(50% 50% at 15% 110%, rgba(213,200,251,.6), rgba(213,200,251,0) 70%),
    linear-gradient(115deg, #ffffff 35%, #fde7f4 60%, #fbc3e6 80%, #f9a6d6);
  /* Produktseiten-Hero: zwei große rosa Kreise oben */
  --twc-grad-hero-blobs: radial-gradient(circle at 10% -20%, var(--twc-pink-20) 30%, transparent 0), radial-gradient(circle at 120% -70%, var(--twc-pink-20) 40%, transparent 0);

  /* ── Schrift ───────────────────────────────────────────────────── */
  --twc-font: "Work Sans", "Work Sans fallback", system-ui, sans-serif;
  /* Überschriften (Größe / Zeilenhöhe / Laufweite) */
  --twc-h-huge:   54px;  --twc-h-huge-lh: 1.15;  --twc-h-huge-ls: -1px;    /* tw-heading--huge, --large */
  --twc-h-section:52px;  --twc-h-section-lh: 1.2;                           /* Abschnittskopf links */
  --twc-h-medium: 46px;  --twc-h-medium-lh: 1.15;                           /* Kartentitel (tw-heading--medium) */
  --twc-h-small:  32px;  --twc-h-small-lh: 1.15;                            /* tw-heading--small */
  --twc-h-xsmall: 24px;  --twc-h-xsmall-lh: 1.15;                           /* Hero-Untertitel (tw-heading--x-small) */
  --twc-h-faq:    19px;  --twc-h-faq-lh: 1.68;
  /* Fließtext (Laufweite 0,75 px ist das Markenzeichen) */
  --twc-p-lead:   24px;  --twc-p-lead-lh: 1.45;   /* Abschnittstext */
  --twc-p-huge:   22px;  --twc-p-huge-lh: 1.45;   /* tw-paragraph--huge */
  --twc-p-large:  20px;  --twc-p-large-lh: 1.45;  /* tw-paragraph--large */
  --twc-p-medium: 18px;  --twc-p-medium-lh: 1.45; /* tw-paragraph--medium */
  --twc-p-small:  16px;  --twc-p-small-lh: 1.45;  /* tw-paragraph--small */
  --twc-p-xsmall: 14px;  --twc-p-xsmall-lh: 1.45; /* tw-paragraph--x-small */
  --twc-ls-text:  .75px;
  --twc-ls-small: .25px;
  --twc-ls-footer: 1px;
  /* Gewichte (variable Schrift 100–900) */
  --twc-w-light: 350; --twc-w-regular: 400; --twc-w-medium: 500; --twc-w-semibold: 600; --twc-w-bold: 700; --twc-w-heavy: 745; --twc-w-black: 800;

  /* ── Raster und Abstände ───────────────────────────────────────── */
  --twc-container: 1224px;      /* inkl. 15 px Innenabstand je Seite → 1194 px Inhalt */
  --twc-gutter: 15px;
  --twc-section-y: 60px;        /* (--tw-section-padding) */
  --twc-section-y-m: 40px;      /* (--tw-section-padding-medium) */
  --twc-hero-top: 120px;
  --twc-nav-h: 72px;
  --twc-sticky-top: 96px;       /* Stapelkarten kleben 96 px unter der Fensterkante */

  /* ── Ecken ─────────────────────────────────────────────────────── */
  --twc-r-xs: 2px;      /* Pause-Knopf */
  --twc-r-sm: 5px;      /* Nav-Links */
  --twc-r-md: 8px;      /* Preisplan-Karte (Startseite) */
  --twc-r-ai: 12px;     /* KI-Kasten */
  --twc-r-lg: 16px;     /* Bühne, Kennzahl-, Sicherheits-, CTA-Karte, Menü */
  --twc-r-glass: 18px;  /* Glasebene */
  --twc-r-xl: 20px;     /* Stapel- und Reiterkarte */
  --twc-r-quote: 30px;  /* Kundenstimmen-Karte */
  --twc-r-pill: 300px;  /* alles Pillenförmige */
  --twc-r-btn-huge: 48px; --twc-r-btn-large: 32px; --twc-r-btn-small: 24px;

  /* ── Schatten ──────────────────────────────────────────────────── */
  --twc-sh-stack:  0 -8px 24px -8px rgba(25,25,47,.08), 0 4px 4px 0 rgba(25,25,47,.03);  /* Stapelkarte */
  --twc-sh-soft:   0 4px 4px 0 rgba(0,0,0,.04);                                          /* Reiter-, Sicherheitskarte */
  --twc-sh-plan:   0 0 1px 0 rgba(73,78,106,.05), 0 2px 6px -1px rgba(73,78,106,.08), 0 4px 10px -3px rgba(73,78,106,.04);
  --twc-sh-glass:  0 0 1px 0 rgba(73,78,106,.05), 0 4px 12px -2px rgba(73,78,106,.08), 0 8px 20px -6px rgba(73,78,106,.05);
  --twc-sh-menu:   0 4px 8px 0 rgba(0,0,0,.06), 0 0 4px 0 rgba(0,0,0,.04);
  --twc-sh-card:   0 0 .8px 0 rgba(0,0,0,.04), 0 1.6px 4.8px 0 rgba(0,0,0,.04), 0 12.8px 19.2px 0 rgba(0,0,0,.06); /* Add-on-Karten Preisseite */
  --twc-sh-ring:   inset 0 0 0 2px var(--twc-ink);           /* Umrandeter Knopf */
  --twc-sh-press:  inset 0 0 0 100px rgba(0,0,0,.1);          /* Hover gefüllter Knopf: 10 % dunkler */
  --twc-sh-nav:    inset 0 -1px 0 0 var(--twc-divider);

  /* ── Bewegung ──────────────────────────────────────────────────── */
  --twc-dur-fast: .15s;  --twc-ease-btn: ease-out;                 /* Knöpfe: Farbe, Schatten, Verschieben */
  --twc-dur-ui: .2s;     --twc-ease-ui: ease-in-out;               /* Nav-Hover, Kopfleiste, Links */
  --twc-dur-pill: .4s;   --twc-ease-spring: cubic-bezier(.22,1,.36,1); /* Pillen-Fortschritt */
  --twc-ease-std: cubic-bezier(.4,0,.2,1);                        /* Panels, Menüs (0,25 s) */
  --twc-dur-menu-delay: .3s;                                        /* Mega-Menü öffnet verzögert */
  --twc-dur-tab-cycle: 6s;                                          /* Produkt-/Branchen-Reiter wechseln */
  --twc-dur-quote-cycle: 10s;                                       /* Kundenstimmen wechseln */
  --twc-dur-marquee: 60s;                                           /* Logo-Band, ein Durchlauf */
  --twc-dur-ai-ring: 8s;                                            /* KI-Rand dreht einmal */
  /* ── Liquid Glass (Meducated) · nach Apple „Adopting Liquid Glass“ ─ */
  --twc-glass-tint-top:    rgba(255,255,255,.34);  /* Glasfüllung oben links */
  --twc-glass-tint:        rgba(255,255,255,.16);  /* Glasfüllung Mitte (klar, nicht milchig) */
  --twc-glass-tint-bottom: rgba(255,255,255,.24);
  --twc-glass-legibility:  rgba(255,255,255,.5);   /* helle Dämpfung hinter Text */
  --twc-glass-solid:       rgba(252,251,249,.97);  /* „Transparenz reduzieren“ / ohne Filter */
  --twc-glass-blur:        10px;                   /* Weichzeichnen ohne Linse */
  --twc-glass-blur-lens:   6px;                    /* Weichzeichnen mit Linsenbrechung */
  --twc-glass-saturate:    165%;
  --twc-glass-brightness:  1.08;
  --twc-glass-edge: inset 0 1.5px 1px -1px rgba(255,255,255,.95), inset 0 -1px 1px -.5px rgba(255,255,255,.5), inset 0 0 18px -6px rgba(255,255,255,.55);
  --twc-glass-edge-pressed: inset 0 1.5px 1px -1px #fff, inset 0 0 24px -6px rgba(255,255,255,.75);
  --twc-glass-shadow:        0 16px 34px -12px rgba(29,28,57,.24), 0 2px 6px -1px rgba(29,28,57,.07);
  --twc-glass-shadow-raised: 0 22px 44px -14px rgba(29,28,57,.28), 0 2px 6px -1px rgba(29,28,57,.07);
  --twc-glass-fill:        rgba(29,28,57,.07);     /* getönte Bedienfläche im Glas */
  --twc-glass-fill-hover:  rgba(29,28,57,.11);
  --twc-glass-r-popover:   28px;                   /* schwebende Fläche */
  --twc-glass-inset:       8px;                    /* Abstand innerer Knopf ↔ Rand (konzentrisch: 28 − 8 = 20) */
  --twc-glass-bar-inset:   5px;                    /* Innenabstand Reiterkapsel */
  --twc-glass-press-scale: 1.015;
  --twc-dur-glass-press:   .35s;
  --twc-dur-glass-morph:   520ms;
}

@property --twc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --twc-shine-spread { syntax: "<percentage>"; inherits: true; initial-value: 2.5%; }

/* Ersatzschrift mit angepassten Maßen (wie auf der Website), damit beim Laden nichts springt */
@font-face { font-family: "Work Sans fallback"; src: local("Segoe UI"); size-adjust: 112.55%; ascent-override: 82.6301%; descent-override: 21.5904%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans fallback"; src: local("Arial"); size-adjust: 111.933%; ascent-override: 83.0851%; descent-override: 21.7093%; line-gap-override: 0%; }