/* ============================================================
   Winlor Media - gemeinsames Stylesheet
   Wird von index.html und allen Landingpages geladen.
   Aus index.html ausgelagert, Inhalt unveraendert.
   ============================================================ */

    /* Fraunces: variabel (Achsen opsz, wght) - eine Datei je Schnitt. */
    @font-face {
      font-family: "Fraunces";
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Fraunces";
      font-style: italic;
      font-weight: 400 600;
      font-display: swap;
      src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
    }

    /* ============================================================
       DESIGN TOKENS
       Formen-Regel: Flächen scharfkantig (Radius 0), Interaktives als Pill.
       Kupfer ist Akzent, nie Fläche.
       Z-Skala: Inhalt 1 | Nav 160 | Menü 155 | Grain 150 | Cursor 400 | Preloader 300
       ============================================================ */
    :root {
      --emerald:       #0B3B2E;
      --emerald-deep:  #072A21;
      --ink:           #071E17;   /* dunkelster Ton: Buttontext auf Kupfer, Footer */
      --cream:         #F5EFE6;
      --copper:        #B87333;
      --copper-hover:  #C9834A;

      --cream-80:  rgba(245, 239, 230, .82);
      --cream-60:  rgba(245, 239, 230, .62);
      --cream-15:  rgba(245, 239, 230, .16);
      --copper-40: rgba(184, 115, 51, .42);
      --copper-25: rgba(184, 115, 51, .25);
      --text-soft: #43584F;   /* gedämpftes Grün für Fließtext auf Creme, AA-sicher */

      --font-display: "Fraunces", Georgia, serif;
      --font-text: "Inter", system-ui, -apple-system, sans-serif;

      /* Mobile-Floor auf 2.5rem: "die Ihr Unternehmen" bleibt bei 375px einzeilig */
      --size-hero: clamp(2.5rem, 8vw, 8.25rem);
      --size-h2:   clamp(2.4rem, 4.6vw, 4.4rem);
      --size-h3:   clamp(1.35rem, 2vw, 1.7rem);
      --size-body: clamp(1.075rem, 1.1vw, 1.2rem);

      --space-section: clamp(6rem, 11vw, 10.5rem);
      --container-pad: clamp(1.25rem, 5vw, 4rem);

      --ease: cubic-bezier(.22, 1, .36, 1);
      --pill: 999px;
    }

    /* ---------- Reset & Grundlagen ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      -webkit-text-size-adjust: 100%;
      /* Statt des grauen Standard-Blitzers beim Antippen ein Kupfer-Hauch. */
      -webkit-tap-highlight-color: rgba(184, 115, 51, .18);
    }
    html.loading { overflow: hidden; }
    html.menu-open { overflow: hidden; }

    body {
      font-family: var(--font-text);
      font-size: var(--size-body);
      line-height: 1.6;
      color: var(--text-soft);
      background: var(--emerald);
      overflow-x: clip;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; }

    ::selection { background: var(--copper); color: var(--cream); }

    :focus-visible {
      outline: 2px solid var(--copper);
      outline-offset: 4px;
      border-radius: 2px;
    }

    .container {
      width: min(100% - 2 * var(--container-pad), 1360px);
      margin-inline: auto;
    }

    section { scroll-margin-top: 6rem; }

    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 500;
      padding: .8rem 1.4rem;
      background: var(--cream);
      color: var(--emerald);
      font-weight: 600;
      text-decoration: none;
      border-radius: var(--pill);
    }
    .skip-link:focus-visible { top: 1rem; }

    /* ---------- Papier-Textur (fix, komposit-günstig) ---------- */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 150;
      pointer-events: none;
      opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    }

    /* ---------- Preloader ---------- */
    .preloader {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: none;
      place-items: center;
      background: var(--emerald);
    }
    html.js .preloader { display: grid; }
    .preloader svg { width: min(46vw, 280px); height: auto; overflow: visible; }
    .pl-w {
      font-family: var(--font-display);
      font-size: 210px;
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      fill: var(--copper);
      fill-opacity: 0;
      stroke: var(--copper);
      stroke-width: 1.25;
    }

    /* ---------- Custom Cursor (nur Maus-Geräte, JS aktiviert) ---------- */
    .cursor {
      position: fixed;
      top: 0; left: 0;
      z-index: 400;
      width: 10px; height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 50%;
      background: var(--copper);
      pointer-events: none;
      opacity: 0;
      transition: width .35s var(--ease), height .35s var(--ease),
                  margin .35s var(--ease), background-color .35s var(--ease),
                  border-color .35s var(--ease), opacity .25s ease;
    }
    html.has-cursor .cursor { opacity: 1; }
    html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; }
    .cursor.is-link {
      width: 40px; height: 40px;
      margin: -20px 0 0 -20px;
      background: transparent;
      border: 1.5px solid var(--copper);
    }

    /* ---------- Navigation ---------- */
    .site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 160;
      transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      gap: clamp(1.25rem, 3vw, 2.75rem);
      padding-block: 1.05rem;
      transition: padding .45s var(--ease);
    }
    .site-nav.scrolled {
      background: var(--emerald);
      box-shadow: 0 1px 0 var(--cream-15), 0 14px 34px rgba(7, 30, 23, .35);
    }
    .site-nav.scrolled .nav-inner { padding-block: .8rem; }
    html.menu-open .site-nav { background: transparent; box-shadow: none; }

    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: .55rem;
      text-decoration: none;
      color: var(--cream);
      margin-right: auto;
    }
    .brand-w {
      font-family: var(--font-display);
      font-weight: 600;
      font-variation-settings: "opsz" 144;
      font-size: 2rem;
      line-height: 1;
      color: var(--copper);
      transition: font-size .45s var(--ease);
    }
    .site-nav.scrolled .brand-w { font-size: 1.55rem; }
    .brand-name {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
    .nav-links a {
      position: relative;
      padding: .6rem .15rem;
      font-size: .92rem;
      font-weight: 500;
      color: var(--cream-80);
      text-decoration: none;
      transition: color .3s ease;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0; right: 100%;
      bottom: .35rem;
      height: 1px;
      background: var(--copper);
      transition: right .4s var(--ease);
    }
    .nav-links a:hover { color: var(--cream); }
    .nav-links a:hover::after { right: 0; }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: .95rem 2.1rem;
      border: 0;
      border-radius: var(--pill);
      font-family: var(--font-text);
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color .35s ease, transform .35s var(--ease);
      will-change: transform;
    }
    .btn:active { transform: scale(.97); }
    .btn-copper { background: var(--copper); color: var(--ink); }
    .btn-copper:hover { background: var(--copper-hover); }
    .nav-cta { min-height: 42px; padding: .6rem 1.5rem; font-size: .92rem; }

    .link-arrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      min-height: 48px;
      font-weight: 500;
      color: var(--cream);
      text-decoration: none;
      border-bottom: 1px solid var(--copper);
      padding-bottom: .15rem;
      transition: color .3s ease, border-color .3s ease;
    }
    .link-arrow:hover { color: var(--copper-hover); }

    /* ---------- Burger / Mobile-Menü ---------- */
    .menu-btn {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
      width: 48px; height: 48px;
      padding: 12px;
      background: transparent;
      border: 0;
    }
    .menu-btn span {
      display: block;
      height: 2px;
      background: var(--cream);
      transition: transform .4s var(--ease), opacity .3s ease;
    }
    html.menu-open .menu-btn span:first-child { transform: translateY(4.5px) rotate(45deg); }
    html.menu-open .menu-btn span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

    .menu {
      position: fixed;
      inset: 0;
      z-index: 155;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2.5rem;
      padding: var(--container-pad);
      background: var(--emerald-deep);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-2%);
      transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
    }
    html.menu-open .menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
    }
    .menu nav { display: flex; flex-direction: column; gap: .4rem; }
    .menu nav a {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 9vw, 3rem);
      font-weight: 500;
      line-height: 1.25;
      color: var(--cream);
      text-decoration: none;
    }
    .menu nav a:hover { color: var(--copper-hover); }
    .menu-contact { display: flex; flex-direction: column; gap: .4rem; font-size: 1rem; }
    .menu-contact a { color: var(--cream-80); text-decoration: none; padding-block: .3rem; }
    .menu-contact a:hover { color: var(--cream); }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--emerald);
      color: var(--cream);
      perspective: 1200px;
    }
    /* WebGL2-Shader: fließende Tiefe im Smaragd, feine Kupferadern.
       Fällt ersatzlos weg, wenn kein WebGL2 da ist (Fläche bleibt smaragd). */
    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      transition: opacity 1.2s var(--ease);
      pointer-events: none;
    }
    .hero-canvas.is-live { opacity: 1; }
    /* Leseschutz: dunkelt die Textseite ab, damit Creme auf Smaragd sicher AA bleibt */
    .hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(100deg, var(--emerald) 0%, rgba(11,59,46,.88) 32%, rgba(11,59,46,.35) 62%, rgba(11,59,46,.12) 100%);
    }
    .hero-w {
      position: absolute;
      top: 50%;
      right: -14vw;
      transform: translateY(-50%);
      z-index: 0;
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: min(72vw, 64rem);
      line-height: .8;
      color: var(--copper);
      opacity: .13;
      user-select: none;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 1;
      padding-block: clamp(7rem, 16vh, 9rem) clamp(3rem, 8vh, 5rem);
    }
    .hero h1 {
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: var(--size-hero);
      line-height: .98;
      letter-spacing: -.015em;
      color: var(--cream);
      max-width: 14ch;
    }
    .hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
    .hero h1 .line-in { display: block; }
    /* Der Claim ist jetzt die zweite Typo-Ebene: kleiner als die H1,
       aber weiter in der Display-Schrift, damit der Charakter bleibt. */
    .hero-claim {
      margin-top: clamp(1.2rem, 2.4vh, 1.9rem);
      font-family: var(--font-display);
      font-variation-settings: "opsz" 144;
      font-weight: 400;
      font-size: clamp(1.35rem, 2.6vw, 2.15rem);
      line-height: 1.2;
      letter-spacing: -.005em;
      color: var(--cream);
      max-width: 22ch;
    }
    .hero h1 em {
      font-style: italic;
      font-weight: 400;
      color: var(--copper);
      padding-right: .06em;
    }
    .hero-sub {
      max-width: 46ch;
      /* Enger an den Claim gerueckt: beide bilden zusammen einen Block. */
      margin-top: clamp(.9rem, 1.6vh, 1.2rem);
      font-size: clamp(1.075rem, 1.3vw, 1.25rem);
      color: var(--cream-80);
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.25rem 2rem;
      margin-top: clamp(2rem, 4.5vh, 3rem);
    }
    /* Risikoumkehr direkt unter dem Button: nimmt die Hürde vor dem Klick. */
    .hero-note {
      margin-top: 1.1rem;
      font-size: .92rem;
      color: var(--cream-60, rgba(245, 239, 230, .62));
      display: flex;
      align-items: center;
      gap: .55rem;
    }
    .hero-note::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--copper);
      flex: none;
    }

    /* ---------- Marquee ---------- */
    .marquee {
      background: var(--cream);
      border-bottom: 1px solid var(--copper-25);
      padding-block: 1.5rem;
      overflow: hidden;
    }
    .mq-track {
      display: flex;
      width: max-content;
      animation: mq 32s linear infinite;
    }
    .mq-group {
      flex-shrink: 0;
      padding-right: 3.5rem;
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1.35rem, 2.2vw, 1.8rem);
      line-height: 1.3;
      color: var(--copper);
      white-space: nowrap;
    }
    @keyframes mq { to { transform: translateX(-50%); } }

    /* ---------- Sektionen allgemein ---------- */
    .section { padding-block: var(--space-section); }
    .section--cream { background: var(--cream); color: var(--text-soft); }
    .section--emerald { background: var(--emerald); color: var(--cream-80); }

    .section-head { max-width: 62ch; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
    .section-head h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: var(--size-h2);
      line-height: 1.04;
      letter-spacing: -.01em;
      color: var(--emerald);
    }
    .section--emerald .section-head h2 { color: var(--cream); }
    .section-head p { margin-top: 1.4rem; max-width: 56ch; }

    /* ---------- Leistungen ---------- */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(3rem, 7vw, 7rem);
      row-gap: clamp(3.5rem, 6vw, 5.5rem);
    }
    .service {
      border-top: 1px solid var(--copper-40);
      padding-top: 1.9rem;
    }
    .service-numeral {
      font-family: var(--font-display);
      font-weight: 400;
      font-style: italic;
      font-variation-settings: "opsz" 144;
      font-size: clamp(3.6rem, 6vw, 5.75rem);
      line-height: 1;
      color: var(--copper);
    }
    .service h3 {
      margin-top: 1.1rem;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--size-h3);
      line-height: 1.15;
      color: var(--emerald);
    }
    .service p { margin-top: .9rem; max-width: 38ch; }
    @media (min-width: 900px) {
      /* margin statt transform: GSAP animiert transform und würde den Versatz löschen */
      .services-grid { align-items: start; }
      .service:nth-child(even) { margin-top: clamp(2.5rem, 5vw, 5rem); }
    }

    /* ---------- Prozess ---------- */
    .process-steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2.75rem;
      list-style: none;
      counter-reset: step;
    }
    .process-line {
      position: absolute;
      top: 5px;
      left: 0;
      width: 100%;
      height: 12px;
      overflow: visible;
    }
    .process-line path {
      stroke: var(--copper);
      stroke-width: 1.5;
      fill: none;
      vector-effect: non-scaling-stroke;
    }
    .step { position: relative; }
    .step::before {
      content: "";
      display: block;
      width: 11px; height: 11px;
      margin-bottom: 1.6rem;
      border-radius: 50%;
      background: var(--copper);
      box-shadow: 0 0 0 7px var(--emerald);
      position: relative;
      z-index: 1;
    }
    .step h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.3rem, 1.7vw, 1.6rem);
      color: var(--cream);
    }
    .step p { margin-top: .7rem; font-size: 1rem; max-width: 26ch; }

    @media (max-width: 899px) {
      .process-steps {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-left: 2.1rem;
      }
      .process-line { display: none; }
      .process-steps::before {
        content: "";
        position: absolute;
        top: .4rem; bottom: .4rem;
        left: 5px;
        width: 1px;
        background: var(--copper-40);
      }
      .step::before {
        position: absolute;
        left: -2.1rem;
        top: .45rem;
        margin: 0;
      }
    }

    /* ---------- Arbeiten ---------- */
    .work-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: clamp(1.5rem, 4vw, 4rem);
      row-gap: clamp(3rem, 6vw, 5.5rem);
    }
    .work { grid-column: 1 / -1; }
    /* Die Kacheln stehen untereinander in einer mittigen Spalte, nicht mehr
       versetzt nebeneinander. Reihenfolge: Stromberg, Reparatur-Montage, Bald Ihre. */
    @media (min-width: 900px) {
      .work--a,
      .work--c,
      .work--d { grid-column: 2 / 12; }
    }
    .work-media {
      position: relative;
      overflow: hidden;
      background: var(--emerald);
    }
    /* Beide Screenshots im Format der Aufnahmen (~1.9:1), damit nichts beschnitten
       wird und die Spalte ruhig bleibt. */
    .work--a .work-media,
    .work--c .work-media { aspect-ratio: 1.9 / 1; }
    .work--d .work-media { aspect-ratio: 16 / 10; }
    .work-media img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.02) brightness(1.04);
      mix-blend-mode: luminosity;
      opacity: .92;
      transition: transform .7s var(--ease);
    }
    /* Website-Screenshots: echte Farben statt Duplex-Filter, damit die Arbeit lesbar bleibt.
       Der Duplex-Look der Fotokacheln bleibt davon unberührt. */
    .work--shot .work-media img {
      filter: none;
      mix-blend-mode: normal;
      opacity: 1;
      object-position: top;
    }
    .work-link { display: block; text-decoration: none; }

    .work-veil {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(184,115,51,.16) 0%, rgba(184,115,51,.34) 52%, rgba(7,30,23,.82) 100%);
      opacity: 0;
      transition: opacity .5s var(--ease);
    }
    .work-name {
      position: absolute;
      left: clamp(1.1rem, 2.5vw, 2rem);
      right: clamp(1.1rem, 2.5vw, 2rem);
      bottom: clamp(1rem, 2.2vw, 1.8rem);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.5rem, 2.4vw, 2.3rem);
      line-height: 1.1;
      color: var(--cream);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
      .work:hover .work-media img { transform: scale(1.045); }
      .work:hover .work-veil { opacity: 1; }
      .work:hover .work-name { opacity: 1; transform: translateY(0); }
    }
    /* Einladungs-Kachel: kein Foto, sondern reservierte Fläche */
    .work--soon a { display: block; text-decoration: none; }
    .work--soon .work-media {
      display: grid;
      place-items: center;
      background: var(--emerald);
    }
    .work--soon .work-media::after {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid var(--copper-40);
      pointer-events: none;
      transition: inset .5s var(--ease), border-color .5s var(--ease);
    }
    .soon-w {
      position: absolute;
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: min(42vw, 16rem);
      line-height: .8;
      color: var(--copper);
      opacity: .1;
      user-select: none;
    }
    .soon-text {
      position: relative;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.7rem, 2.8vw, 2.6rem);
      color: var(--cream);
      transition: color .4s var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
      .work--soon:hover .work-media::after { inset: 8px; border-color: var(--copper); }
      .work--soon:hover .soon-text { color: var(--copper-hover); }
    }

    .work figcaption {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: .35rem 1.1rem;
      margin-top: 1.1rem;
    }
    .work figcaption strong {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.15rem;
      color: var(--emerald);
    }
    .work figcaption span { font-size: .92rem; }

    /* ---------- CTA ---------- */
    .cta {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--emerald);
      color: var(--cream-80);
      text-align: center;
    }
    .cta-w {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: min(85vw, 58rem);
      line-height: .8;
      color: var(--copper);
      opacity: .07;
      user-select: none;
      pointer-events: none;
    }
    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 46ch;
      margin-inline: auto;
      padding-block: clamp(6rem, 10vh, 8rem);
    }
    .cta h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: clamp(2.5rem, 5.5vw, 5rem);
      line-height: 1.04;
      letter-spacing: -.01em;
      color: var(--cream);
    }
    .cta-sub { margin-top: 1.4rem; max-width: 42ch; margin-inline: auto; }
    .cta-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.4rem;
      margin-top: 2.5rem;
    }
    .cta-tel {
      color: var(--cream-80);
      text-decoration: none;
      padding-block: .4rem;
      border-bottom: 1px solid var(--copper);
    }
    .cta-tel:hover { color: var(--cream); }

    /* ---------- Demo-Formular ---------- */
    .cta-content--form { max-width: 680px; }
    .demo-form {
      margin-top: clamp(2.25rem, 5vw, 3.25rem);
      text-align: left;
    }
    .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 1.4rem;
    }
    .form-row { display: grid; gap: .5rem; margin-bottom: 1.35rem; }
    .demo-form label {
      font-size: .9rem;
      font-weight: 500;
      color: var(--cream);
    }
    .demo-form .req { color: var(--copper-hover); }
    .demo-form .opt { color: var(--cream-60); font-weight: 400; }
    .demo-form input,
    .demo-form textarea {
      width: 100%;
      font-family: var(--font-text);
      font-size: 1rem;
      color: var(--emerald);
      background: var(--cream);
      border: 1px solid transparent;
      border-radius: 12px;
      padding: .8rem 1rem;
      min-height: 48px;
      transition: border-color .3s ease, box-shadow .3s ease;
    }
    .demo-form textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
    .demo-form input::placeholder,
    .demo-form textarea::placeholder { color: var(--text-soft); opacity: 1; }
    .demo-form input:focus,
    .demo-form textarea:focus {
      outline: none;
      border-color: var(--copper);
      box-shadow: 0 0 0 3px var(--copper-25);
    }
    /* native Validierung: erst nach Interaktion einfärben */
    .demo-form input:user-invalid,
    .demo-form textarea:user-invalid {
      border-color: #E4A08A;
      box-shadow: 0 0 0 3px rgba(228, 160, 138, .25);
    }
    .demo-form .btn-copper { width: 100%; margin-top: .3rem; }
    .form-note {
      margin-top: 1rem;
      font-size: .85rem;
      color: var(--cream-60);
      text-align: center;
    }
    .form-alert {
      margin-bottom: 1.6rem;
      padding: .9rem 1.2rem;
      border-left: 3px solid var(--copper);
      background: rgba(184, 115, 51, .14);
      color: var(--cream);
      font-size: .95rem;
    }
    .form-alt { margin-top: 1.7rem; text-align: center; }
    /* Honeypot: für Menschen unsichtbar, für Bots ein Köder */
    .hp {
      position: absolute;
      left: -9999px;
      width: 1px; height: 1px;
      overflow: hidden;
    }
    @media (max-width: 560px) {
      .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
    }

    /* ---------- Footer ---------- */
    .site-footer {
      background: var(--emerald-deep);
      color: var(--cream-60);
      padding-top: clamp(4rem, 8vw, 6.5rem);
      font-size: .95rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
      gap: clamp(2rem, 4vw, 3.25rem);
      padding-bottom: clamp(3rem, 6vw, 4.5rem);
    }
    .f-w {
      display: block;
      font-family: var(--font-display);
      font-weight: 600;
      font-variation-settings: "opsz" 144;
      font-size: 3.2rem;
      line-height: 1;
      color: var(--copper);
    }
    .f-claim { margin-top: 1.1rem; max-width: 34ch; }
    .f-head {
      font-family: var(--font-text);
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--cream);
      margin-bottom: 1.2rem;
    }
    .f-col ul { list-style: none; }
    .f-col li { margin-bottom: .55rem; }
    .f-col a {
      color: var(--cream-60);
      text-decoration: none;
      padding-block: .25rem;
      display: inline-block;
      border-bottom: 1px solid transparent;
      transition: color .3s ease, border-color .3s ease;
    }
    .f-col a:hover { color: var(--cream); border-bottom-color: var(--copper); }
    .footer-bottom {
      border-top: 1px solid var(--cream-15);
      padding-block: 1.6rem;
    }

    /* ---------- Über uns / E-E-A-T ---------- */
    .about-grid {
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: center;
    }
    .about-media { position: relative; }
    .about-media::after {
      content: "";
      position: absolute;
      inset: auto -14px -14px auto;
      width: 62%; height: 62%;
      border: 1px solid var(--copper-40);
      z-index: -1;
    }
    .about-portrait {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
    }
    .about-lead {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.4rem, 2.3vw, 1.95rem);
      line-height: 1.35;
      color: var(--cream);
      margin-bottom: 1.6rem;
      max-width: 30ch;
    }
    .about-body p { color: var(--cream-80); max-width: 54ch; }
    .about-body p + p { margin-top: 1.1rem; }
    .about-sign {
      display: flex;
      align-items: baseline;
      gap: .7rem;
      margin-top: 1.8rem;
    }
    .about-name {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.25rem;
      color: var(--cream);
    }
    .about-creds {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: 1.6rem;
    }
    .cred {
      padding: .5rem 1rem;
      border: 1px solid var(--copper-40);
      border-radius: var(--pill);
      font-size: .85rem;
      color: var(--cream-80);
    }
    @media (max-width: 899px) {
      .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .about-media { max-width: 340px; }
    }

    /* ---------- FAQ (Akkordeon, natives details/summary) ---------- */
    .faq-list {
      max-width: 900px;
      margin-inline: auto;
      border-top: 1px solid var(--copper-25);
    }
    .faq-item { border-bottom: 1px solid var(--copper-25); }
    .faq-item > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.5rem 0;
      min-height: 44px;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.15rem, 1.7vw, 1.45rem);
      line-height: 1.3;
      color: var(--emerald);
      transition: color .3s ease;
    }
    /* Auf Creme bleibt der Text smaragd (Kupfer wäre bei dieser Größe unter AA);
       das Kupfer steckt im Icon. */
    .faq-item > summary:hover { color: var(--emerald-deep); }
    .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-icon {
      flex-shrink: 0;
      position: relative;
      width: 18px; height: 18px;
      margin-top: .35rem;
    }
    .faq-icon::before, .faq-icon::after {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      width: 16px; height: 1.5px;
      background: var(--copper);
      transform: translate(-50%, -50%);
      transition: transform .4s var(--ease);
    }
    .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
    .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
    .faq-answer { overflow: hidden; }
    .faq-answer p {
      padding: 0 2.5rem 1.7rem 0;
      max-width: 66ch;
      color: var(--text-soft);
    }
    .faq-item[open] .faq-answer { animation: faqOpen .5s var(--ease); }
    @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    .faq-foot { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
    .faq-foot p { color: var(--text-soft); }
    .faq-foot a { color: var(--emerald); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--copper); padding-bottom: .1rem; }
    .faq-foot a:hover { border-bottom-color: var(--emerald); }

    /* ---------- Preis ----------
       Echte Tabelle statt Aufzählung: Google kann daraus ein
       Tabellen-Snippet bauen, und der Preis bleibt auf einen Blick lesbar. */
    #preis { position: relative; overflow: hidden; }
    /* Initiale als ruhige Tiefe im Hintergrund, wie in Hero und CTA */
    /* Zentrierung über Flex statt translateY(-50%): der transform bleibt
       damit frei für die Parallax-Bewegung per GSAP. */
    .preis-w {
      position: absolute;
      top: 0; bottom: 0; right: -8vw;
      display: flex;
      align-items: center;
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: min(52vw, 40rem);
      line-height: .8;
      color: var(--copper);
      opacity: .06;
      user-select: none;
      pointer-events: none;
      z-index: 0;
    }
    #preis .container { position: relative; z-index: 1; }

    .preis-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
    .preis-zahl {
      font-family: var(--font-display);
      font-weight: 500;
      font-variation-settings: "opsz" 144;
      font-size: clamp(3.4rem, 6vw, 5.5rem);
      line-height: 1;
      color: var(--cream);
    }
    .preis-eur { color: var(--copper); }
    /* Ziffern gleich breit: beim Hochzählen springt die Zeile nicht */
    .preis-num { font-variant-numeric: tabular-nums; }
    .preis-sub { margin-top: .9rem; color: var(--cream-80); max-width: 30ch; }
    .preis-hinweis { margin-top: 1.6rem; font-size: .95rem; color: var(--cream-60); max-width: 32ch; }

    .preis-tabelle {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    .preis-tabelle caption {
      text-align: left;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--size-h3);
      color: var(--cream);
      padding-bottom: 1.1rem;
    }
    /* Trennlinie als Hintergrund statt Rahmen: so lässt sie sich
       beim Scrollen von links aufziehen (--linie 0 -> 1).
       Ohne JS steht --linie auf 1, die Linie ist also immer da. */
    .preis-tabelle tbody tr { --linie: 1; }
    .preis-tabelle th,
    .preis-tabelle td {
      padding: .95rem 0;
      vertical-align: top;
      font-size: 1.02rem;
      background-image: linear-gradient(to right, var(--cream-15), var(--cream-15));
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: calc(var(--linie) * 100%) 1px;
    }
    .preis-tabelle th {
      font-weight: 500;
      color: var(--cream);
      width: 45%;
      padding-right: 1.5rem;
    }
    .preis-tabelle td { color: var(--cream-80); }
    .preis-tabelle tr:last-child th,
    .preis-tabelle tr:last-child td { background-image: none; }
    @media (max-width: 899px) {
      .preis-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .preis-tabelle th { width: 48%; }
    }
    @media (max-width: 520px) {
      .preis-tabelle th, .preis-tabelle td { display: block; width: 100%; padding-right: 0; }
      .preis-tabelle th { padding-bottom: .2rem; background-image: none; }
      .preis-tabelle td { padding-top: 0; }
    }

    /* ---------- Sichtbarkeit: SEO / GEO / AEO erklärt ---------- */
    .sichtbarkeit { margin-top: clamp(4rem, 8vw, 7rem); }
    .sichtbarkeit-head {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.7rem, 3vw, 2.5rem);
      line-height: 1.1;
      color: var(--cream);
      padding-top: 2.2rem;
      border-top: 1px solid var(--copper-25);
      margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    }
    .sicht-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(2rem, 4vw, 3.5rem);
    }
    /* Hover: die angesteuerte Karte kommt nach vorne, die anderen treten
       zurueck. Die Flaeche liegt als Pseudo-Element hinter dem Text, damit
       das Raster unveraendert bleibt. */
    .sicht {
      position: relative;
      isolation: isolate;
      transition: transform .55s var(--ease), opacity .4s ease;
    }
    .sicht::before {
      content: "";
      position: absolute;
      inset: -1.6rem -1.5rem;
      z-index: -1;
      background: rgba(245, 239, 230, .05);
      border: 1px solid var(--copper-25);
      opacity: 0;
      transform: scale(.97);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
      pointer-events: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .sicht:hover {
        transform: translateY(-12px);
        z-index: 2;
      }
      .sicht:hover::before {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 26px 60px rgba(7, 30, 23, .5);
      }
      /* Nachbarn nehmen sich zurueck, damit der Fokus eindeutig ist */
      .sicht-grid:has(.sicht:hover) .sicht:not(:hover) {
        opacity: .45;
        transform: scale(.98);
      }
    }
    .sicht-kuerzel {
      display: block;
      font-family: var(--font-display);
      font-weight: 600;
      font-variation-settings: "opsz" 144;
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: .01em;
      color: var(--copper);
      margin-bottom: .9rem;
      transition: transform .6s var(--ease);
    }
    .sicht h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.15rem, 1.5vw, 1.35rem);
      line-height: 1.25;
      color: var(--cream);
      margin-bottom: .7rem;
    }
    .sicht p { color: var(--cream-80); font-size: 1rem; max-width: 38ch; }
    @media (hover: hover) and (pointer: fine) {
      .sicht:hover .sicht-kuerzel { transform: translate3d(0, -5px, 0); }
    }
    .sichtbarkeit-fuss {
      margin-top: clamp(2.25rem, 4vw, 3rem);
      color: var(--cream-60);
      font-size: .98rem;
      max-width: 62ch;
    }
    @media (max-width: 899px) {
      .sicht-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    }

    /* ---------- Ratgeber ---------- */
    .guides-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(2rem, 4vw, 3.5rem);
    }
    .guide { border-top: 1px solid var(--copper-40); padding-top: 1.7rem; }
    .guide h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(1.3rem, 1.7vw, 1.6rem);
      line-height: 1.18;
      color: var(--emerald);
    }
    .guide p { margin-top: 1rem; font-size: 1.02rem; }
    .guide p + p { margin-top: .8rem; }
    @media (max-width: 899px) {
      .guides-grid { grid-template-columns: 1fr; gap: 2.75rem; }
    }

    /* ---------- Footer-Erweiterungen ---------- */
    .f-address { margin-top: 1.4rem; font-style: normal; line-height: 1.7; color: var(--cream-60); }
    .f-social { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.4rem; }
    .f-social a { display: inline-block; padding: .3rem 0; }

    /* ============================================================
       INTERAKTIONS-SCHICHT
       Tiefe und Reaktion auf Zeigergeräten. Alles rein dekorativ:
       auf Touch und bei reduzierter Bewegung fällt es sauber weg.
       ============================================================ */

    /* Leistungen: Kupfer-Lichtschein folgt dem Zeiger, Linie wächst, Ziffer hebt ab */
    .service {
      position: relative;
      isolation: isolate;
      transition: border-color .5s var(--ease);
    }
    .service::before {
      content: "";
      position: absolute;
      inset: -1.4rem -1.6rem;
      z-index: -1;
      border-radius: 16px;
      opacity: 0;
      background: radial-gradient(
        circle 220px at var(--mx, 50%) var(--my, 50%),
        rgba(184, 115, 51, .13),
        transparent 70%
      );
      transition: opacity .5s var(--ease);
      pointer-events: none;
    }
    .service::after {
      content: "";
      position: absolute;
      top: -1px; left: 0;
      width: 0; height: 1px;
      background: var(--copper);
      transition: width .7s var(--ease);
    }
    .service-numeral,
    .service h3 { transition: transform .6s var(--ease), color .4s ease; }
    @media (hover: hover) and (pointer: fine) {
      .service:hover::before { opacity: 1; }
      .service:hover::after { width: 100%; }
      .service:hover .service-numeral { transform: translate3d(0, -5px, 0); }
      .service:hover h3 { transform: translate3d(6px, 0, 0); }
    }

    /* Projektkacheln: räumliche Neigung. Perspektive am Rahmen,
       damit die Kachel wirklich kippt statt nur zu skalieren. */
    .work { perspective: 1000px; }
    .work-media {
      transform-style: preserve-3d;
      will-change: transform;
    }
    /* Glanzkante, die beim Neigen über die Kachel wandert */
    .work-media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(245, 239, 230, .13) 50%,
        transparent 62%
      );
      transition: opacity .5s var(--ease);
    }
    @media (hover: hover) and (pointer: fine) {
      .work:hover .work-media::after { opacity: 1; }
    }

    /* Prozess-Schritte: Punkt pulst kurz auf, Text rückt nach */
    .step h3, .step p { transition: transform .5s var(--ease); }
    .step::before { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
    @media (hover: hover) and (pointer: fine) {
      .step:hover::before { transform: scale(1.5); }
      .step:hover h3 { transform: translate3d(4px, 0, 0); }
    }

    /* Ratgeber: Kupferlinie zieht durch, Überschrift folgt */
    .guide { position: relative; transition: border-color .5s var(--ease); }
    .guide::after {
      content: "";
      position: absolute;
      top: -1px; left: 0;
      width: 0; height: 1px;
      background: var(--copper);
      transition: width .7s var(--ease);
    }
    .guide h3 { transition: transform .6s var(--ease); }
    @media (hover: hover) and (pointer: fine) {
      .guide:hover::after { width: 100%; }
      .guide:hover h3 { transform: translate3d(5px, 0, 0); }
    }

    /* Bewegung nur dort abschalten, wo sie dekorativ ist */
    @media (prefers-reduced-motion: reduce) {
      .hero-canvas { display: none; }
      .service::before, .work-media::after { display: none; }
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 899px) {
      .nav-links, .nav-cta { display: none; }
      .menu-btn { display: flex; }
      .services-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .hero-w { right: -34vw; font-size: 120vw; opacity: .1; }
      /* Tap-Ziele auf Touch-Geräten mindestens 44px hoch */
      .f-col a, .menu-contact a { padding-block: .6rem; }
    }
    @media (max-width: 540px) {
      .footer-grid { grid-template-columns: 1fr; }
      .hero-actions .btn { width: 100%; }
      .hero-actions .link-arrow { width: 100%; justify-content: center; }
    }

    /* Tablet-Hochformat (iPad): eine Spalte verschenkt die Breite,
       vier wären zu eng. Der Prozess bleibt einspaltig, sonst bricht
       die senkrechte Zeitleiste. */
    @media (min-width: 600px) and (max-width: 899px) {
      .services-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
      .guides-grid { grid-template-columns: 1fr 1fr; }
      .about-media { max-width: 420px; }
    }

    /* ---------- Aktionsleiste auf Touch-Geräten ----------
       Anrufen und Demo bleiben erreichbar, ohne dass jemand nach oben
       scrollen muss. Nur unter 900px, also nie auf dem Desktop. */
    .mobile-bar { display: none; }
    @media (max-width: 899px) {
      .mobile-bar {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .75rem;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 152;
        padding: .7rem var(--container-pad);
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
        background: var(--emerald-deep);
        border-top: 1px solid var(--copper-25);
      }
      .mobile-bar a { text-decoration: none; }
      .mobile-bar .mb-tel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 48px;
        padding: 0 1.1rem;
        border: 1px solid var(--copper-40);
        border-radius: var(--pill);
        color: var(--cream);
        font-weight: 600;
        font-size: .95rem;
      }
      .mobile-bar .btn { width: 100%; min-height: 48px; padding-inline: 1rem; }
      /* Platz schaffen, damit die Leiste nichts verdeckt */
      body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
      /* Im offenen Menü stört sie nur */
      html.menu-open .mobile-bar { display: none; }

      /* Tap-Ziele auf mindestens 44px bringen (Apple- und WCAG-Richtwert).
         Padding statt Höhe, damit das Layout gleich bleibt. */
      .brand { align-items: center; min-height: 44px; }
      .cta-tel { display: inline-flex; align-items: center; min-height: 44px; }
      .f-social a { padding-block: .6rem; }
      .faq-foot a { display: inline-flex; align-items: center; min-height: 44px; }
    }
    /* Muss nach dem Block oben stehen, sonst gewinnt dort width: 100%.
       Auf Tablet-Breite soll der Demo-Button nicht über den halben
       Bildschirm laufen. */
    @media (min-width: 600px) and (max-width: 899px) {
      .mobile-bar { grid-template-columns: auto auto; justify-content: space-between; }
      .mobile-bar .btn { width: auto; padding-inline: 2.1rem; }
    }

    /* ---------- Reduzierte Bewegung ---------- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .mq-track { animation: none; }
      html.js .preloader { display: none; }
    }

/* ============================================================
   LANDINGPAGES
   Eigene Bausteine für die Unterseiten. Bewusst ohne WebGL-Hero
   und ohne Preloader: dort zählt Lesbarkeit, nicht der Auftritt.
   ============================================================ */

/* ---------- Kompakter Kopfbereich ---------- */
.lp-hero {
  position: relative;
  background: var(--emerald);
  color: var(--cream);
  padding-block: clamp(7.5rem, 15vh, 11rem) clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
.lp-hero::after {
  /* Grosse Initiale als ruhige Tiefe, wie auf der Startseite */
  content: "W";
  position: absolute;
  top: 50%; right: -6vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: min(46vw, 32rem);
  line-height: .8;
  color: var(--copper);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.lp-hero .container { position: relative; z-index: 1; }

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: .9rem;
  color: var(--cream-60);
}
.brotkrumen a { color: var(--cream-80); text-decoration: none; border-bottom: 1px solid transparent; }
.brotkrumen a:hover { color: var(--cream); border-bottom-color: var(--copper); }
.brotkrumen span[aria-hidden] { color: var(--copper); }

.lp-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.3rem, 5.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--cream);
  max-width: 18ch;
}
.lp-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--copper);
  padding-right: .06em;
}
.lp-lead {
  max-width: 54ch;
  margin-top: clamp(1.2rem, 2.5vh, 1.8rem);
  font-size: clamp(1.075rem, 1.35vw, 1.28rem);
  color: var(--cream-80);
}
.lp-hero .hero-actions { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.lp-hero .link-arrow { color: var(--cream); }

/* ---------- Textspalte ---------- */
.lp-inhalt { max-width: 74ch; }
.lp-inhalt h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--emerald);
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  margin-bottom: 1.1rem;
}
.lp-inhalt h2:first-child { margin-top: 0; }
.lp-inhalt p { margin-bottom: 1.1rem; max-width: 68ch; }
.lp-inhalt a {
  color: var(--emerald);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--copper);
  padding-bottom: .05rem;
}
.lp-inhalt a:hover { border-bottom-width: 2px; }
.lp-inhalt strong { color: var(--emerald); font-weight: 600; }

.lp-liste { list-style: none; margin: 1.5rem 0 1.1rem; max-width: 68ch; }
.lp-liste li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 1rem;
}
.lp-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--copper);
}

/* ---------- Kontaktbereich ---------- */
.lp-kontakt { max-width: 680px; margin-inline: auto; text-align: center; }
.lp-kontakt h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.06;
  color: var(--cream);
}
.lp-kontakt .cta-sub { margin-top: 1.2rem; margin-inline: auto; }
.lp-kontakt .demo-form { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: left; }

@media (max-width: 560px) {
  .lp-hero::after { right: -22vw; font-size: 82vw; }
}

/* Querverweis unter den Leistungen auf die Zielgruppen-Seiten */
.leistungen-fuss {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--copper-25);
  max-width: 68ch;
  color: var(--text-soft);
}
.leistungen-fuss a {
  color: var(--emerald);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--copper);
  padding-bottom: .05rem;
}
.leistungen-fuss a:hover { border-bottom-width: 2px; }

/* ============================================================
   KONTAKTSEITE
   Zielseite des QR-Codes auf der Visitenkarte. Wer hier landet,
   hat das Handy in der Hand und wenige Sekunden Geduld: die
   Kontaktwege stehen deshalb oben, nicht am Seitenende.
   ============================================================ */

/* ---------- Drei Direktwege im Kopfbereich ---------- */
.kontakt-direkt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .8rem;
  max-width: 760px;
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.kd-karte {
  display: flex;
  align-items: center;
  gap: .95rem;
  min-height: 66px;
  padding: .9rem 1.15rem;
  background: rgba(245, 239, 230, .06);
  border: 1px solid var(--cream-15);
  border-radius: 12px;
  color: var(--cream);
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, transform .35s var(--ease);
}
.kd-karte:hover {
  background: rgba(184, 115, 51, .15);
  border-color: var(--copper);
  transform: translateY(-2px);
}
.kd-karte svg { flex: none; color: var(--copper); }
.kd-txt { display: grid; gap: .12rem; min-width: 0; }
.kd-label {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.kd-wert {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cream);
  /* "info@winlormedia.de" sprengt sonst die schmalste Kachel */
  overflow-wrap: anywhere;
}

/* ---------- Die drei Eckdaten auf Creme ----------
   Die Zahlen tragen den Abschnitt, deshalb stehen sie in Kupfer statt in
   Emerald. Das bleibt Akzent und keine Flaeche: es sind drei Zeilen
   Auszeichnungsschrift, kein eingefaerbter Block. */
.kontakt-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--copper-25);
}
.kf {
  position: relative;
  padding-top: 1.35rem;
  transition: transform .4s var(--ease);
}
.kf-linie {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--copper);
  /* Standardwert 1, damit die Linie ohne JavaScript und bei reduzierter
     Bewegung sofort steht. GSAP animiert nur von 0 hoch. */
  transform: scaleX(1);
  transform-origin: left center;
  opacity: .45;
  transition: opacity .4s ease;
}
.kf--preis .kf-linie { height: 3px; opacity: 1; }
.kf-zahl {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  line-height: 1;
  color: var(--copper);
  /* Tabellenziffern: sonst springt die Breite waehrend des Hochzaehlens
     und der Text darunter zuckt mit. */
  font-variant-numeric: tabular-nums;
}
.kf--preis .kf-zahl { font-size: clamp(2.5rem, 4.6vw, 3.6rem); }
.kf-num { display: inline-block; }
.kf-txt { margin-top: .65rem; font-size: .98rem; }
.kf-txt strong { color: var(--emerald); font-weight: 600; }

@media (hover: hover) {
  .kf:hover { transform: translateY(-4px); }
  .kf:hover .kf-linie { opacity: 1; }
}

/* ---------- Verweise auf die Zielgruppenseiten ---------- */
.kontakt-wege { display: grid; gap: .7rem; margin: 1.6rem 0 1.1rem; max-width: 68ch; }
/* Muss ".lp-inhalt a" schlagen (Spezifitaet 0,1,1), sonst zieht sich die
   Kupfer-Unterlinie fuer Textlinks quer unter die ganze Kachel. */
.lp-inhalt .kw-karte {
  display: block;
  padding: 1.05rem 1.3rem;
  background: rgba(11, 59, 46, .045);
  border: 0;
  border-left: 3px solid var(--copper);
  color: var(--text-soft);
  font-weight: 400;
  text-decoration: none;
  transition: background-color .3s ease, transform .35s var(--ease);
}
.lp-inhalt .kw-karte:hover { background: rgba(11, 59, 46, .09); transform: translateX(4px); }
.kw-titel { display: block; font-weight: 600; color: var(--emerald); margin-bottom: .2rem; }
/* Pfeil erscheint erst beim Darueberfahren: zeigt, dass die Kachel
   irgendwohin fuehrt, ohne im Ruhezustand Unruhe zu stiften. */
.kw-titel::after {
  content: "\2192";
  display: inline-block;
  margin-left: .5rem;
  color: var(--copper);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity .3s ease, transform .35s var(--ease);
}
.lp-inhalt .kw-karte:hover .kw-titel::after { opacity: 1; transform: translateX(0); }

/* ---------- Anschrift ---------- */
.kontakt-nap {
  margin: 1.5rem 0 1.1rem;
  padding-left: 1.3rem;
  border-left: 1px solid var(--copper-25);
  font-style: normal;
  line-height: 1.75;
}
.kontakt-nap strong { color: var(--emerald); font-weight: 600; }

/* Auf dem Handy zaehlt hier jeder Pixel. Wer gerade den QR-Code von der
   Visitenkarte gescannt hat, soll die Kontaktwege sehen, ohne zu scrollen.
   Bei 375 x 640 (typisches Sichtfeld nach Abzug der Browserleiste) reicht
   es damit fuer Ueberschrift, Einleitung und zwei der drei Kacheln - die
   Rufnummer liegt zusaetzlich dauerhaft in der Leiste am unteren Rand. */
@media (max-width: 560px) {
  .lp-hero--kontakt { padding-block: clamp(6rem, 12vh, 8rem) clamp(2.5rem, 6vw, 3.5rem); }
  .lp-hero--kontakt .lp-lead { font-size: 1.02rem; }
  .lp-hero--kontakt .kontakt-direkt { margin-top: 1.5rem; gap: .6rem; }
  .lp-hero--kontakt .kd-karte { padding: .75rem 1rem; }
}