/* ==========================================================================
   PhoneXpert24 — Design System / Tokens
   Derived from logo colours: navy #001830, cyan #60D8D8, blue #3C84E4,
   silver #D8D8D8. Light, Apple-grade, technical.
   ========================================================================== */

@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var.woff2") format("woff2");
  font-weight:200 800;font-display:swap;font-style:normal;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-display:swap;font-style:normal;
}

:root{
  /* ---- Colour ---- */
  --bg:            #FFFFFF;
  --surface:       #F6F8FB;   /* very light cool grey */
  --surface-2:     #EDF1F6;
  --navy:          #001830;   /* logo contour — primary ink */
  --ink:           #0A1826;   /* near-navy body text */
  --muted:         #5A6B7B;   /* cool grey text */
  --muted-2:       #5F6C7B;
  --border:        #E2E8EF;
  --border-strong: #CBD5DF;

  --cyan:          #48C0D8;   /* logo display top */
  --cyan-bright:   #60D8D8;
  --blue:          #3078D8;   /* logo display bottom */
  --blue-bright:   #3C90E4;
  --accent:        #1A63C0;   /* 5,85:1 auf Weiß – WCAG 1.4.3 AA */
  --accent-on-dark: #5EA2F0;  /* 7,55:1 auf dunklen Akten */   /* CTA / active — tuned for AA on white */
  --accent-hover:  #1F66C2;
  --accent-soft:   rgba(42,125,225,.10);
  --silver:        #C6D0DA;

  /* ---- Gradients (used sparingly) ---- */
  --grad-brand:  linear-gradient(135deg,#60D8D8 0%,#3C90E4 55%,#2A7DE1 100%);
  --grad-ink:    linear-gradient(180deg,#0A1826 0%,#001830 100%);

  /* ---- Type scale ---- */
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --fs-display: clamp(2.75rem, 7vw, 6.5rem);
  --fs-h1:      clamp(2.25rem, 5.2vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 3.8vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9rem;
  --fs-label:   0.78rem;

  /* ---- Spacing scale ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px; --s-40:160px;

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:100px;

  /* ---- Shadow (3 tiers) ---- */
  --sh-1:0 1px 2px rgba(10,24,38,.04), 0 2px 8px rgba(10,24,38,.05);
  --sh-2:0 8px 24px -8px rgba(10,24,38,.12), 0 2px 8px rgba(10,24,38,.06);
  --sh-3:0 30px 70px -24px rgba(10,24,38,.22), 0 8px 24px -12px rgba(10,24,38,.12);

  /* ---- Motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --t-fast:200ms; --t-normal:450ms; --t-cine:1000ms;

  --maxw:1400px;
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.04;letter-spacing:-.03em;color:var(--navy)}
.eyebrow{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(64px,7vw,104px)}
.section--tight{padding-block:clamp(56px,8vw,110px)}

/* Buttons ------------------------------------------------------------- */
.btn{
  --_bg:var(--accent);--_fg:#fff;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--_bg);color:var(--_fg);position:relative;overflow:hidden;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-normal) var(--e-out),background var(--t-fast);
  will-change:transform;
}
.btn .arrow{transition:transform var(--t-fast) var(--e-out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(42,125,225,.5)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{--_bg:transparent;--_fg:var(--navy);border:1.5px solid var(--border-strong)}
.btn--ghost:hover{background:var(--surface);box-shadow:none;border-color:var(--accent)}
.btn--dark{--_bg:var(--navy);--_fg:#fff}
.btn--dark:hover{--_bg:#062a4d}
.btn--lg{padding:17px 34px;font-size:1.1rem}

.link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:600;
  transition:gap var(--t-fast) var(--e-out)}
.link-arrow:hover{gap:12px}

/* Reveal system ------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity var(--t-cine) var(--e-out),transform var(--t-cine) var(--e-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}

.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block;transform:translateY(105%);
  transition:transform var(--t-cine) var(--e-out)}
.in .line-mask>span{transform:none}

/* Utility ------------------------------------------------------------- */
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:500;
  color:var(--muted);background:var(--surface);border:1px solid var(--border);
  padding:6px 13px;border-radius:var(--r-pill)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .line-mask>span{transform:none}
}


/* ---------- Skip-Link (WCAG 2.4.1 Bypass Blocks) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--navy);color:#fff;padding:12px 20px;
  border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* ---------- Ohne JavaScript: Inhalte immer sichtbar ---------- */
html:not(.js) [data-reveal],
html:not(.js) body.landing [data-reveal],
html:not(.js) .line-mask>span{
  opacity:1!important;transform:none!important;filter:none!important;transition:none!important}