/* ══════════════════════════════════════════════════
   Print3r – style.css  |  2026 Edition
   ══════════════════════════════════════════════════ */

/* ── 0. Layer-Reihenfolge ────────────────────────── */
@layer base, layout, components, utilities;

/* ── 1. Design Tokens ────────────────────────────── */
@layer base {
  :root {
    /* Farben */
    --bg:              #0f0f0f;
    --bg-alt:          #171717;
    --card:            #1e1e1e;
    --elev:            #272727;
    --text:            #e8e8e8;
    --muted:           #a0a0a0;
    --brand:           #ff5c1a;      /* Orange aus dem Logo */
    --brand-dark:      #cc4a14;
    --brand-contrast:  #fff;
    --border:          rgba(255,255,255,.1);
    --border-strong:   rgba(255,255,255,.18);
    --focus:           #60cdff;
    --shadow-sm:       0 2px 8px rgba(0,0,0,.4);
    --shadow:          0 6px 24px rgba(0,0,0,.5);
    --shadow-lg:       0 16px 48px rgba(0,0,0,.6);

    /* Typografie */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", ui-monospace, monospace;

    /* Radii */
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-full: 9999px;

    /* Spacing-Skala */
    --space-xs:  .375rem;
    --space-sm:  .75rem;
    --space-md:  1.25rem;
    --space-lg:  2rem;
    --space-xl:  3.5rem;

    /* Transitions */
    --ease: cubic-bezier(.4,0,.2,1);
    --dur:  200ms;

    /* Hero */
    --hero-img: none;
  }
}

/* ── 2. Reset / Base ─────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    hanging-punctuation: first last;
  }

  body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    min-block-size: 100dvh;
  }

  img, video, svg { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }

  /* Reduzierte Bewegung */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ── 3. Accessibility ────────────────────────────── */
@layer base {
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .visually-hidden {
    position: absolute !important; clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important; width: 1px !important;
    height: 1px !important; overflow: hidden !important;
    white-space: nowrap !important;
  }

  .skip-link {
    position: fixed; inset-block-start: -100%; inset-inline-start: 1rem;
    background: var(--focus); color: #000; padding: .5rem .875rem;
    border-radius: var(--r-sm); font-weight: 600; z-index: 9999;
    text-decoration: none; transition: inset-block-start var(--dur) var(--ease);
  }
  .skip-link:focus { inset-block-start: 1rem; }
}

/* ── 4. Layout ───────────────────────────────────── */
@layer layout {
  .container {
    width: min(1140px, calc(100% - 2 * clamp(.875rem, 4vw, 2rem)));
    margin-inline: auto;
  }

  .section {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    border-block-start: 1px solid var(--border);
  }
  .section-alt { background: var(--bg-alt); }

  .grid { display: grid; gap: clamp(.875rem, 2vw, 1.375rem); }
  .auto-fit-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .auto-fit-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

/* ── 5. Typografie ───────────────────────────────── */
@layer base {
  h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }

  h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
  h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--muted); }

  p { max-width: 72ch; }

  .eyebrow {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    font-weight: 600;
    margin-block-end: .375rem;
  }

  .section-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin-block-end: .625rem;
    max-width: 22ch;
  }

  .lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    color: #d8d8d8;
    max-width: 68ch;
    margin-block-end: 1.25rem;
  }

  .muted { color: var(--muted); font-size: .9rem; }
}

/* ── 6. Noscript ─────────────────────────────────── */
@layer components {
  .noscript-note {
    background: #5c3a1e;
    color: #f5e6d8;
    padding: .75rem 1rem;
    text-align: center;
    font-size: .9rem;
  }
}

/* ── 7. Header & Hero ────────────────────────────── */
@layer components {
  .site-header { position: relative; }

  .hero {
    position: relative;
    min-block-size: clamp(380px, 55svh, 680px);
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    background:
      linear-gradient(165deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.6) 100%),
      var(--hero-img, none) center / cover no-repeat;
    overflow: hidden;
  }

  /* Subtle grain overlay */
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
  }

  .hero > * { position: relative; z-index: 1; }

  .logo {
    width: clamp(100px, 10vw, 180px);
    height: auto;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  }
  .logo:hover { transform: scale(1.04); filter: drop-shadow(0 6px 20px rgba(255,92,26,.35)); }

  .hero-content {
    align-self: end;
    margin-block-start: auto;
    padding-block-start: clamp(2rem, 5vw, 4rem);
    max-width: 640px;
  }

  .hero-title {
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin-block-end: .625rem;
  }
  .hero-accent { color: var(--brand); }

  .hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: rgba(255,255,255,.75);
    margin-block-end: 1.5rem;
    max-width: 52ch;
  }
}

/* ── 8. Navigation ───────────────────────────────── */
@layer components {
  .nav {
    position: absolute;
    inset-inline-end: clamp(1rem, 3vw, 2.5rem);
    inset-block-start: clamp(1rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--elev) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: .375rem;
    z-index: 10;
  }

  .nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; }

  .nav a {
    display: inline-block;
    text-decoration: none;
    color: var(--text);
    padding: .45rem .8rem;
    border-radius: var(--r-sm);
    font-size: .9rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
  }
  .nav a:hover, .nav a:focus-visible {
    background: var(--elev);
    color: #fff;
  }
  .nav a:has([aria-current="page"]),
  .nav a[aria-current="page"] {
    background: var(--elev);
    color: var(--brand);
    font-weight: 600;
  }

  .btn-nav {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
    font-weight: 600 !important;
  }
  .btn-nav:hover { background: var(--brand-dark) !important; }

  /* Mobile Toggle */
  .menu-toggle {
    position: absolute;
    inset-inline-end: clamp(1rem, 3vw, 2.5rem);
    inset-block-start: clamp(1rem, 3vw, 2.5rem);
    display: none;
    align-items: center;
    gap: .5rem;
    background: color-mix(in srgb, var(--elev) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: .55rem .85rem;
    border-radius: var(--r-md);
    z-index: 11;
  }
  .menu-toggle__bars {
    display: inline-block; width: 1.2rem; height: .85rem;
    border-block: 2px solid var(--text);
    position: relative;
  }
  .menu-toggle__bars::after {
    content: "";
    position: absolute; inset-inline: 0; inset-block-start: calc(50% - 1px);
    border-block-start: 2px solid var(--text);
  }

  @media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .nav {
      position: fixed;
      inset-inline: 1rem;
      inset-block-start: auto;
      inset-block-end: 1.5rem;
      width: auto;
      padding: .625rem;
      border-radius: var(--r-xl);
      display: none;
    }
    .nav.is-open { display: block; }
    .nav ul { flex-direction: column; gap: .25rem; }
    .nav a { width: 100%; }
  }
}

/* ── 9. Buttons ──────────────────────────────────── */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: var(--brand);
    color: var(--brand-contrast);
    text-decoration: none;
    border: 2px solid transparent;
    padding: .625rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    box-shadow: 0 4px 16px rgba(255,92,26,.35);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    cursor: pointer;
    white-space: nowrap;
  }
  .btn:hover, .btn:focus-visible {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,92,26,.45);
  }
  .btn:active { transform: translateY(0); }

  .btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.4);
    box-shadow: none;
  }
  .btn-ghost:hover, .btn-ghost:focus-visible {
    background: rgba(255,255,255,.1);
    box-shadow: none;
  }

  .btn-hero { padding: .75rem 1.5rem; font-size: 1rem; }
  .btn-lg   { padding: .875rem 1.75rem; font-size: 1.05rem; }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: .75rem;
  }
}

/* ── 10. Cards ───────────────────────────────────── */
@layer components {
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
  }
  .card-feature { padding-block-start: 1.25rem; }

  .icon {
    width: 46px; height: 46px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand) 15%, var(--elev));
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
    margin-block-end: .75rem;
  }
  .icon svg {
    width: 22px; height: 22px;
    color: var(--brand);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Wenn fill verwendet wird (manche Icons) */
  .icon svg[fill="currentColor"] { fill: var(--brand); stroke: none; }

  h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text); margin-block-end: .5rem; }

  .checklist { list-style: none; margin-block-start: .75rem; display: grid; gap: .3rem; }
  .checklist li::before { content: "✓ "; color: var(--brand); font-weight: 700; }
}

/* ── 11. KPI Badges ──────────────────────────────── */
@layer components {
  .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-block: 1.25rem;
  }
  .kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .875rem 1rem;
    text-align: center;
    transition: border-color var(--dur) var(--ease);
  }
  .kpi:hover { border-color: var(--brand); }
  .kpi__value {
    display: block;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--brand);
    line-height: 1.2;
  }
  .kpi__label {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    margin-block-start: .2rem;
  }
}

/* ── 12. Chips ───────────────────────────────────── */
@layer components {
  .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .875rem; }
  .chip {
    background: var(--elev);
    border: 1px solid var(--border);
    padding: .2rem .65rem;
    border-radius: var(--r-full);
    font-size: .85rem;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .chip:hover { border-color: var(--brand); color: var(--brand); }
}

/* ── 13. Prozess-Schritte ────────────────────────── */
@layer components {
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-block: 1.5rem;
    list-style: none;
    counter-reset: step;
  }
  .steps li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.25rem;
    transition: border-color var(--dur) var(--ease);
  }
  .steps li:hover { border-color: var(--brand); }
  .step__badge {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    display: grid; place-items: center;
  }
  .steps li strong { display: block; margin-block-end: .25rem; color: var(--text); }
  .steps li .muted { line-height: 1.5; }

  @media (min-width: 900px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ── 14. Über-uns Grid ───────────────────────────── */
@layer layout {
  .about-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
  }
  @media (min-width: 900px) {
    .about-grid { grid-template-columns: 1fr 1fr; }
  }
  .about-img {
    border-radius: var(--r-lg);
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    box-shadow: var(--shadow-lg);
  }
  .about-img-wrap figcaption {
    color: var(--muted);
    font-size: .85rem;
    margin-block-start: .5rem;
    text-align: center;
  }
}

/* ── 15. Team ────────────────────────────────────── */
@layer components {
  .team-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    margin-block-start: 1.5rem;
  }
  .team-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .team-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top;
  }
  .team-card figcaption {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  .team-card strong { color: var(--text); font-size: 1.05rem; }
  .team-card .muted { font-size: .85rem; }
  .team-mail {
    font-size: .85rem;
    color: var(--brand);
    text-decoration: none;
    margin-block-start: .25rem;
  }
  .team-mail:hover { text-decoration: underline; }
}

/* ── 16. Referenzen ──────────────────────────────── */
@layer components {
  .references-grid .ref {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .references-grid .ref:hover { border-color: var(--brand); transform: scale(1.02); }
  .references-grid img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.4);
    transition: filter var(--dur) var(--ease);
  }
  .references-grid .ref:hover img { filter: none; }
}

/* ── 17. FAQ ─────────────────────────────────────── */
@layer components {
  .faq-container { max-width: 800px; }

  .faq-list { display: grid; gap: .625rem; margin-block-start: 1.5rem; }

  .faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
  }
  .faq-item:has(.faq-toggle[aria-expanded="true"]) {
    border-color: var(--brand);
  }

  .faq-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 1rem 1.125rem;
    text-align: start;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
  }
  .faq-toggle:hover { color: var(--brand); }
  .faq-toggle[aria-expanded="true"] { color: var(--brand); }

  .faq-icon {
    font-size: 1.4rem;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
    color: var(--brand);
  }
  .faq-toggle[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

  .faq-answer {
    padding: 0 1.125rem 1rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    border-block-start: 1px solid var(--border);
    padding-block-start: .875rem;
  }
  .faq-answer[hidden] { display: none; }

  /* Smooth open animation */
  .faq-answer:not([hidden]) {
    animation: faq-open .2s var(--ease) both;
  }
  @keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── 18. Kontakt ─────────────────────────────────── */
@layer components {
  .contact-section {
    background: linear-gradient(135deg, var(--bg-alt) 0%, color-mix(in srgb, var(--brand) 6%, var(--bg-alt)) 100%);
  }
  .contact-inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 720px) {
    .contact-inner { grid-template-columns: 1fr auto; }
  }

  .contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-block-start: 1rem;
  }
  .contact-list li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: 1rem;
  }
  .contact-list a { color: var(--brand); text-decoration: none; }
  .contact-list a:hover { text-decoration: underline; }
  .contact-icon { font-size: 1.1rem; }
}

/* ── 19. Footer ──────────────────────────────────── */
@layer components {
  .site-footer {
    border-block-start: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--muted);
    font-size: .88rem;
  }
  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .875rem;
    padding-block: 1.25rem;
  }
  .footer-copy { color: var(--muted); }
  .footer-location { opacity: .65; }
  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .875rem;
  }
  .site-footer nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }
  .site-footer nav a:hover { color: var(--text); }
}

/* ── 20. View Transitions ────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .15s var(--ease) both; }
::view-transition-new(root) { animation: vt-in  .2s  var(--ease) both; }

@keyframes vt-out { to   { opacity: 0; transform: translateY(8px);  } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 21. Utilities ───────────────────────────────── */
@layer utilities {
  .sr-only { @extend .visually-hidden; }
  .text-brand  { color: var(--brand); }
  .text-muted  { color: var(--muted); }
  .mt-sm { margin-block-start: var(--space-sm); }
  .mt-md { margin-block-start: var(--space-md); }
}