/* ============================================================
 *  Pixeltypen — Colors & Type
 *  Source: PT_Minimanual_2024 (Redesign) + uploaded brand assets
 *  All colors verified against the manual swatches.
 * ============================================================ */

/* ---------- Web fonts ---------------------------------------- */

@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Morgan Sans";
  src: url("fonts/MorganSans-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Display + decorative families. Each is essentially single-cut. */
@font-face {
  font-family: "Aerobik";
  src: url("fonts/Aerobik-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Aerobik is a single-cut display face. NEVER bold it — not via heavier
   weights and not via the browser's fake-bold synthesis (e.g. UA <h1>/<h2>
   defaults). The display family is always set in its regular cut. */
.pt-hero, .pt-h1, .pt-h2,
[class*="aer"],
[style*="--font-display"] {
  font-weight: 400 !important;
  font-synthesis: none;
}
@font-face {
  font-family: "Dirtyline";
  src: url("fonts/Dirtyline.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Dirtyline is a single-cut display face. Never let the browser fake-bold it. */
.dty, .l-dty, .line-dty,
[style*="--font-grunge"], [class*="dty"] {
  font-synthesis: none;
}
@font-face {
  font-family: "Kaio";
  src: url("fonts/Kaio-Krilin.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tartuffo";
  src: url("fonts/Tartuffo-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---------- Color tokens ------------------------------------- */
/*  8 brand colors from the Minimanual + paper / ink neutrals.   */
/*  Use multiple as accents in one composition; lean on Petrol   */
/*  (#004C5A) for body type and dark backgrounds.                */

:root {
  /* --- brand palette --- exact RGB values from DOs&DONTs CD-Manual --- */
  /*  Organised as four PAIRS that the manual prints side-by-side.       */
  /*  All 8 combine freely; the named pairings just read as the "primary" */
  /*  alliances and are the safest text-on-surface combos.               */

  --pt-violett:   #DE6EF5;   /*  RGB 222/110/245  --  pair A */
  --pt-petrol:    #004D59;   /*  RGB   0/ 77/ 89  --  pair A · the "ink" */

  --pt-lila:      #632EFF;   /*  RGB  99/ 46/255  --  pair B */
  --pt-flieder:   #D6C7FF;   /*  RGB 214/199/255  --  pair B · soft pastel */

  --pt-gruen:     #D6F000;   /*  RGB 214/240/  0  --  pair C · neon green */
  --pt-rot:       #FF613B;   /*  RGB 255/ 97/ 59  --  pair C · coral-red */

  --pt-rosa:      #FFCCDE;   /*  RGB 255/204/222  --  pair D · baby pink */
  --pt-hellblau:  #69D9FF;   /*  RGB 105/217/255  --  pair D · light blue */

  /*  Legacy aliases for older code that used the Minimanual names.      */
  --pt-neongruen: var(--pt-gruen);
  --pt-koralle:   var(--pt-rot);

  /* --- neutrals --- */
  --pt-paper:     #FFFFFF;   /*  page bg / contrast text on dark */
  --pt-paper-2:   #FFFFFF;   /*  alias kept for older code      */
  --pt-ink:       #004C5A;   /*  body text uses petrol, not black */
  --pt-ink-2:     #0B1416;   /*  near-black for high-contrast situations */
  --pt-line:      rgba(0, 76, 90, 0.18);  /* hairline = petrol @18% */

  /* --- semantic foreground / background --- */
  --fg-1: var(--pt-petrol);          /* primary text */
  --fg-2: color-mix(in srgb, var(--pt-petrol) 70%, var(--pt-paper));
  --fg-3: color-mix(in srgb, var(--pt-petrol) 45%, var(--pt-paper));
  --fg-on-dark: var(--pt-paper);
  --fg-on-bright: var(--pt-petrol);

  --bg-1: var(--pt-paper);
  --bg-2: var(--pt-paper-2);
  --bg-ink: var(--pt-petrol);
  --bg-accent: var(--pt-neongruen);

  /* --- semantic accents -- choose ONE per surface --- */
  --accent: var(--pt-lila);
  --accent-soft: var(--pt-flieder);
  --accent-hot:  var(--pt-rot);
  --accent-acid: var(--pt-gruen);

  /* --- spacing scale (4px base) --- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* --- radii. Pixeltypen leans crisp + geometric, with the occasional pill. */
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- elevation. The brand is largely flat; shadows only on lifted UI. */
  --shadow-1: 0 1px 0 var(--pt-line);
  --shadow-2: 0 8px 24px -12px rgba(0, 76, 90, 0.28);
  --shadow-3: 0 20px 48px -16px rgba(0, 76, 90, 0.30);

  /* --- motion --- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-snap:     cubic-bezier(0.6, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med:  220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* --- typography families --- */
  --font-body:     "Morgan Sans", "Inter", system-ui, sans-serif;
  --font-display:  "Aerobik", "Morgan Sans", sans-serif;        /* tall, condensed grotesk */
  --font-italic:   "Tartuffo", "Morgan Sans", serif;            /* high-contrast italic display */
  --font-script:   "Kaio", "Tartuffo", cursive;                 /* hand / brush feel */
  --font-grunge:   "Kaio", "Dirtyline", "Impact", sans-serif;   /* swapped to Kaio — Dirtyline kept as fallback */

  /* --- type scale (rem-ish, designed for 16px root) --- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;   /* body */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  88px;   /* hero */
  --fs-6xl:  140px;  /* "monstertype" */

  --lh-tight:  1.02; /* @kind font */
  --lh-snug:   1.12; /* @kind font */
  --lh-base:   1.45; /* @kind font */
  --lh-loose:  1.65; /* @kind font */

  --track-tight:  -0.02em;
  --track-base:    0; /* @kind font */
  --track-loose:   0.02em;
  --track-caps:    0.08em;
}

/* ---------- Base reset & body -------------------------------- */

html, body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic typography tokens ----------------------- */
/*  Use these as classes OR mix into custom components.          */

.pt-hero {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-1);
}

.pt-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  font-weight: 400;
}

.pt-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  font-weight: 400;
}

.pt-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}

.pt-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.pt-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.pt-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
}

.pt-script {
  font-family: var(--font-script);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
}

.pt-grunge {
  font-family: var(--font-grunge);
  font-weight: 400;            /* Dirtyline only ships in regular — never bold */
  font-synthesis: none;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-loose);
}

.pt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.pt-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
}

.pt-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.pt-mono {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

/* ===== next style block ===== */

*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; background: var(--pt-flieder); color: var(--pt-petrol); }
  body { font-family: var(--font-body); }

  /* -- helpers -- */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px; }
  .eyebrow {
    font-family: var(--font-body); font-weight: 700;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0 0 16px;
  }
  .head { margin: 0; line-height: 0.9; letter-spacing: -0.02em; }
  .head .l { display: block; }
  .l-tar { font-family: var(--font-italic); font-style: italic; font-weight: 300; letter-spacing: -0.01em; }
  .l-dty { font-family: var(--font-grunge); font-weight: 400; font-synthesis: none; letter-spacing: 0.02em; }
  .l-aer { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.025em; }
  .l-kai { font-family: var(--font-script); }
  .lede {
    font-family: var(--font-body); font-size: 19px; line-height: 1.55;
    max-width: 56ch;
  }
  .lede b { font-weight: 700; }

  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    border: 0; cursor: pointer;
    padding: 18px 30px;
    background: var(--pt-rot); color: var(--pt-paper);
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.16s var(--ease-snap), background 0.16s linear;
  }
  .btn:hover { background: var(--pt-petrol); }
  .btn .arrow { font-size: 18px; line-height: 1; }
  .btn.ghost { background: transparent; color: var(--pt-petrol); border: 2px solid var(--pt-petrol); }
  .btn.ghost:hover { background: var(--pt-petrol); color: var(--pt-flieder); }

  /* -- pixel mark + wordmark -- */
  .pixel-mark { width: 44px; height: 44px; display: block; }
  .pixel-mark svg { width: 100%; height: 100%; }

  /* ========= TOP NAV ========= */
  nav.top {
    position: sticky; top: 0; z-index: 50;
    background: var(--pt-flieder);
    border-bottom: 1px solid color-mix(in srgb, var(--pt-petrol) 18%, transparent);
  }
  nav.top .row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 56px;
  }
  nav.top .brand img { height: 26px; width: auto; display: block; }
  nav.top .right { display: flex; align-items: center; gap: 14px; }
  nav.top .phone {
    font-family: var(--font-body); font-weight: 500; font-size: 14px;
    color: var(--pt-petrol); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
  }
  nav.top .btn { padding: 12px 18px; font-size: 12px; }

  /* ========= 1. HERO ========= */
  section.hero { background: var(--pt-flieder); padding: 96px 0 104px; position: relative; overflow: hidden; }
  section.hero .grid { max-width: 920px; }
  section.hero h1 { font-size: clamp(52px, 5.4vw, 88px); }
  section.hero .l1 { color: var(--pt-petrol); }
  section.hero .l2 {
    color: var(--pt-rot);
    font-size: clamp(40px, 4.4vw, 62px);
    line-height: 0.94;
    margin-top: 14px;
  }
  section.hero .lede { margin: 28px 0 36px; color: var(--pt-petrol); }
  section.hero .region {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 30px;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    line-height: 1.45; letter-spacing: 0.04em; color: var(--pt-petrol);
    max-width: 640px;
  }
  section.hero .region::before {
    content: ""; width: 12px; height: 12px; background: var(--pt-rot);
    transform: rotate(45deg); flex-shrink: 0; margin-top: 4px;
  }
  section.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  section.hero .cta-row .btn { padding: 22px 38px; font-size: 16px; }
  section.hero .proof {
    margin-top: 44px;
    padding: 20px 22px;
    background: color-mix(in srgb, var(--pt-petrol) 6%, transparent);
    border-left: 4px solid var(--pt-rot);
    font-family: var(--font-italic); font-style: italic; font-weight: 300;
    font-size: 19px; line-height: 1.35; color: var(--pt-petrol);
    max-width: 540px;
  }
  section.hero .people { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
  section.hero .people .stack { display: flex; }
  section.hero .people .stack .bubble {
    width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--pt-flieder);
    margin-left: -12px;
    background-size: cover; background-position: center top;
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 14px; color: var(--pt-paper);
    text-transform: uppercase; letter-spacing: -.01em;
    overflow: hidden;
  }
  section.hero .people .stack .bubble:first-child { margin-left: 0; }
  section.hero .people .stack .b1 { background-image: url('assets/images/team/Tobias-Bals.webp'); background-color: var(--pt-rot); }
  section.hero .people .stack .b2 { background-image: url('assets/images/crew-bilder/pixeltypen_202408222-22.webp'); background-color: var(--pt-lila); }
  section.hero .people .stack .b3 { background-image: url('assets/images/crew-bilder/pixeltypen_202408222-133.webp'); background-color: var(--pt-petrol); }
  section.hero .people .stack .b4 { background: var(--pt-violett); }
  section.hero .people .txt { font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--pt-petrol); }
  section.hero .people .txt b { font-weight: 700; display: block; }

  /* booking widget on right */
  .booking {
    background: var(--pt-petrol); color: var(--pt-paper);
    padding: 32px;
    border: 3px solid var(--pt-petrol);
    position: relative;
  }
  .booking .corner-pix {
    position: absolute; top: -22px; right: -22px;
    width: 44px; height: 44px;
  }
  .booking h3 {
    margin: 0 0 8px;
    font-family: var(--font-display); font-size: 30px; line-height: 0.95;
    text-transform: uppercase; letter-spacing: -.02em;
    color: var(--pt-paper);
  }
  .booking h3 em { font-family: var(--font-italic); font-style: italic; font-weight: 300; color: var(--pt-gruen); }
  .booking p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--pt-paper) 80%, transparent); }
  .booking .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
  .booking label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--pt-paper) 65%, transparent); }
  .booking input, .booking select {
    background: transparent; color: var(--pt-paper);
    border: 0; border-bottom: 2px solid var(--pt-gruen);
    padding: 10px 0;
    font-family: var(--font-body); font-size: 15px; outline: none;
  }
  .booking .submit {
    width: 100%; margin-top: 12px;
    background: var(--pt-gruen); color: var(--pt-petrol);
    padding: 16px 22px; border: 0; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  }
  .booking .submit:hover { background: var(--pt-rot); color: var(--pt-paper); }
  .booking small {
    display: block; margin-top: 14px;
    font-size: 11px; letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--pt-paper) 60%, transparent);
  }

  /* full-bleed brand graphics: thick star top-right + thin zigzag bottom-left.
     Real SVGs, used 1:1 (width set, height auto) so they are never distorted. */
  .hero-bleed {
    position: absolute; right: -240px; top: -240px;
    width: 740px; height: auto;
    pointer-events: none; z-index: 0;
  }
  .hero-thin {
    position: absolute; left: -56px; bottom: -54px;
    width: 440px; height: auto;
    pointer-events: none; z-index: 0;
  }
  section.hero .wrap, section.hero .booking { position: relative; z-index: 1; }

  /* ========= 2. TRUST BAR ========= */
  section.trust { background: var(--pt-rosa); padding: 56px 0; }
  section.trust h2 {
    margin: 0 0 28px;
    font-family: var(--font-italic); font-style: italic; font-weight: 300;
    font-size: 28px; color: var(--pt-petrol);
    text-align: center;
  }
  section.trust:not(.slim) .logos {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px;
    align-items: center; justify-items: center;
  }
  section.trust:not(.slim) .logo {
    width: 100%; max-width: 140px; height: 56px;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.65;
    transition: opacity 200ms ease;
  }
  section.trust:not(.slim) .logo:hover { opacity: 1; }

  /* ========= 3. STATUS QUO ========= */
  section.status { background: var(--pt-rosa); color: var(--pt-petrol); padding: 120px 0; }
  section.status .grid {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start;
  }
  section.status h2 { font-size: clamp(56px, 6.2vw, 96px); color: var(--pt-petrol); }
  section.status .l1 { color: var(--pt-petrol); }
  section.status .l2 { color: var(--pt-rot); }
  section.status .eyebrow { color: var(--pt-rot); }
  section.status .body p {
    font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--pt-petrol);
    margin: 0 0 20px; max-width: 60ch;
  }
  section.status .body p b { font-weight: 700; color: var(--pt-rot); }
  section.status .body p:last-child { margin-bottom: 0; }

  /* ========= 4. VORHER NACHHER ========= */
  section.case { background: var(--pt-hellblau); padding: 120px 0; }
  section.case .head-row { text-align: center; margin-bottom: 48px; }
  section.case h2 { font-size: clamp(48px, 5.4vw, 80px); color: var(--pt-petrol); margin: 0 auto; }
  section.case .l1 { color: var(--pt-petrol); }
  section.case .l2 { color: var(--pt-rot); }
  section.case .eyebrow { color: var(--pt-rot); }
  section.case .lede { color: var(--pt-petrol); margin: 18px auto 0; }

  .slider { position: relative; max-width: 960px; margin: 0 auto;
    aspect-ratio: 16 / 9; background: var(--pt-flieder); overflow: hidden;
    border: 3px solid var(--pt-petrol); cursor: ew-resize;
    user-select: none;
  }
  .slider .pane { position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: var(--pt-flieder);
  }
  .slider .vorher { background-image: url('assets/cases/02-Sturm-Feuerschutz-Vorher.webp'); }
  .slider .nachher { background-image: url('assets/cases/02-Sturm-Feuerschutz-Nachher.webp'); clip-path: inset(0 0 0 50%); }
  .slider .handle {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 4px; background: var(--pt-rot);
    transform: translateX(-50%);
  }
  .slider .handle::before {
    content: "⇄"; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: var(--pt-rot); color: var(--pt-paper);
    border-radius: 50%; display: grid; place-items: center;
    font-size: 18px; font-weight: 700;
  }
  .slider .tag {
    position: absolute; top: 16px;
    padding: 6px 12px; font-family: var(--font-body); font-weight: 700; font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .slider .tag.t1 { left: 16px; background: var(--pt-petrol); color: var(--pt-paper); }
  .slider .tag.t2 { right: 16px; background: var(--pt-rot); color: var(--pt-paper); z-index: 2; }

  .gallery {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    max-width: 1120px; margin: 32px auto 0;
  }
  .gallery .frame {
    position: relative; aspect-ratio: 4 / 3; padding: 14px;
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    border: 0; cursor: pointer; overflow: hidden;
    background-size: cover; background-position: center;
    background-color: var(--pt-flieder);
    outline: 3px solid transparent; outline-offset: 3px;
    transition: outline-color var(--dur-fast) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
    font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.2;
    text-transform: none; letter-spacing: 0;
  }
  .gallery .frame::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--pt-petrol) 78%, transparent) 0%, transparent 55%);
  }
  .gallery .frame span {
    position: relative; z-index: 1; color: var(--pt-paper);
    -webkit-text-stroke: 0; text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }
  .gallery .frame:hover { transform: translateY(-3px); outline-color: color-mix(in srgb, var(--pt-rot) 60%, transparent); }
  .gallery .frame.active { outline-color: var(--pt-rot); }
  .gallery .frame.active::before { background: linear-gradient(to top, color-mix(in srgb, var(--pt-rot) 80%, transparent) 0%, transparent 60%); }
    font-family: var(--font-display); font-size: 22px;
    text-transform: uppercase; letter-spacing: -.02em;
  }
  .gallery .f1 { background: var(--pt-lila); color: var(--pt-gruen); }
  .gallery .f2 { background: var(--pt-gruen); color: var(--pt-petrol); }
  .gallery .f3 { background: var(--pt-rot); color: var(--pt-paper); }
  @media (max-width: 980px) { .gallery { grid-template-columns: 1fr 1fr; } }

  /* ========= 5. PIXELTYPEN-WEG ========= */
  section.weg { background: var(--pt-violett); padding: 120px 0; }
  section.weg .eyebrow { color: var(--pt-petrol); }
  section.weg h2 { font-size: clamp(56px, 6vw, 92px); color: var(--pt-petrol); margin: 0 0 56px; max-width: 16ch; }
  section.weg .l1 { color: var(--pt-petrol); }
  section.weg .l2 { color: var(--pt-gruen); }
  section.weg .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  section.weg .step {
    background: var(--pt-flieder); color: var(--pt-petrol);
    padding: 28px; min-height: 280px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
  }
  section.weg .step .num {
    font-family: var(--font-display); font-size: 64px; line-height: 1;
    color: var(--pt-rot); letter-spacing: -.02em;
  }
  section.weg .step h3 {
    margin: 16px 0 12px;
    font-family: var(--font-display); font-size: 28px; line-height: 1.05;
    text-transform: uppercase; letter-spacing: -.01em; color: var(--pt-petrol);
  }
  section.weg .step p { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--pt-petrol) 85%, transparent); }

  /* ========= 6. TESTIMONIALS ========= */
  section.proof { background: var(--pt-flieder); padding: 120px 0; }
  section.proof .head-row { text-align: center; margin-bottom: 56px; }
  section.proof h2 { font-size: clamp(48px, 5.4vw, 80px); color: var(--pt-petrol); margin: 0 auto; }
  section.proof .l1 { color: var(--pt-petrol); }
  section.proof .l2 { color: var(--pt-lila); }
  section.proof .eyebrow { color: var(--pt-rot); }
  section.proof .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  section.proof .card {
    background: #ffffff; padding: 28px;
    display: flex; flex-direction: column; gap: 18px;
    border-top: 6px solid var(--pt-rot);
  }
  section.proof .card.b2 { border-top-color: var(--pt-lila); }
  section.proof .card.b3 { border-top-color: var(--pt-gruen); }
  section.proof .card.b4 { border-top-color: var(--pt-violett); }
  section.proof .card blockquote {
    margin: 0;
    font-family: var(--font-italic); font-style: italic; font-weight: 300;
    font-size: 19px; line-height: 1.4; color: var(--pt-petrol);
  }
  section.proof .card .who {
    display: flex; align-items: center; gap: 14px;
    border-top: 1px solid color-mix(in srgb, var(--pt-petrol) 14%, transparent);
    padding-top: 16px; margin-top: auto;
  }
  section.proof .card .avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background-color: var(--pt-petrol);
    background-size: cover; background-position: center;
    flex-shrink: 0;
  }
  /* Note: class names av-max/av-nicki/av-stefan are legacy slot identifiers;
     the actual people are now Roman Liebl / Thomas Wurstbauer / Stephanie Blüml */
  section.proof .card .avatar.av-max  {
    background-image: url("assets/images/testimonials/Roman-Liebl.webp");
  }
  section.proof .card .avatar.av-nicki {
    background-image: url("assets/images/testimonials/Thomas-Wurstbauer.webp");
  }
  section.proof .card .avatar.av-stefan {
    background-image: url("assets/images/testimonials/Stephanie-Blueml.webp");
  }
  section.proof .card .avatar.av-hans {
    background-color: var(--pt-violett);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 30px; line-height: 1;
    color: var(--pt-petrol);
  }
  section.proof .card .who-name { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--pt-petrol); line-height: 1.2; }
  section.proof .card .who-company { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--pt-rot); margin-top: 3px; }
  section.proof .card .who-role { font-family: var(--font-body); font-size: 13px; color: color-mix(in srgb, var(--pt-petrol) 80%, transparent); margin-top: 1px; }
  section.proof .card .avatar { width: 72px; height: 72px; border: 2px solid color-mix(in srgb, var(--pt-petrol) 14%, transparent); }

  /* ========= 7. TEAM ========= */
  section.team { background: var(--pt-gruen); padding: 120px 0; }
  section.team .eyebrow { color: var(--pt-rot); }
  section.team h2 { font-size: clamp(48px, 5.4vw, 80px); color: var(--pt-petrol); margin: 0 0 24px; max-width: 18ch; }
  section.team .l1 { color: var(--pt-petrol); }
  section.team .l2 { color: var(--pt-rot); }
  section.team .lede { color: var(--pt-petrol); max-width: 56ch; margin-bottom: 56px; }
  section.team .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  section.team .person {
    aspect-ratio: 3 / 4;
    background-color: var(--pt-petrol);
    background-size: cover; background-position: center;
    position: relative; overflow: hidden;
  }
  section.team .person.p1 { background-image: url('https://drive.google.com/thumbnail?id=16eQmNvQXbvrYFgiVRjyYoS2W-acSzjqs&sz=w800'); }
  section.team .person.p2 { background-image: url('https://drive.google.com/thumbnail?id=1BpuyntmYINrfTKswuFD6nfIGwYoGpTvv&sz=w800'); background-color: var(--pt-rot); }
  section.team .person.p3 { background-image: url('https://drive.google.com/thumbnail?id=1lAopnDgFIBFaDfahAoHEpeO4MmF8VtSI&sz=w800'); background-color: var(--pt-lila); }
  section.team .person.p4 { background-image: url('https://drive.google.com/thumbnail?id=1vsr-gaAoFvv-MyMwsCHu84Ot4RVTkl44&sz=w800'); background-color: var(--pt-violett); }

  /* ========= 8. FAQ ========= */
  section.faq { background: var(--pt-rosa); padding: 120px 0; }
  section.faq .eyebrow { color: var(--pt-rot); }
  section.faq h2 { font-size: clamp(48px, 5.4vw, 80px); color: var(--pt-petrol); margin: 0 0 48px; max-width: 18ch; }
  section.faq .l1 { color: var(--pt-petrol); }
  section.faq .l2 { color: var(--pt-lila); }
  section.faq details {
    background: var(--pt-flieder); color: var(--pt-petrol);
    padding: 20px 24px; margin-bottom: 12px;
    cursor: pointer;
  }
  section.faq summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    font-family: var(--font-body); font-weight: 700; font-size: 18px;
    color: var(--pt-petrol);
  }
  section.faq summary::-webkit-details-marker { display: none; }
  section.faq summary::after {
    content: "+"; font-family: var(--font-display); font-size: 28px; line-height: 1;
    color: var(--pt-rot); flex-shrink: 0;
    transition: transform 0.2s;
  }
  section.faq details[open] summary::after { transform: rotate(45deg); }
  section.faq details p {
    margin: 16px 0 0; font-size: 15px; line-height: 1.55;
    color: color-mix(in srgb, var(--pt-petrol) 85%, transparent);
    max-width: 70ch;
  }

  /* ========= 9. FINAL CTA ========= */
  section.final { background: var(--pt-rot); color: var(--pt-paper); padding: 120px 0; text-align: center; position: relative; overflow: hidden; }
  section.final .eyebrow { color: var(--pt-paper); }
  section.final h2 { font-size: clamp(56px, 7.5vw, 132px); color: var(--pt-paper); margin: 0 auto 24px; }
  section.final .l1 { color: var(--pt-paper); }
  section.final .l2 { color: var(--pt-gruen); }
  section.final .lede { color: color-mix(in srgb, var(--pt-paper) 90%, transparent); margin: 0 auto 36px; }
  section.final .btn { background: var(--pt-gruen); color: var(--pt-petrol); padding: 22px 36px; font-size: 16px; }
  section.final .btn:hover { background: var(--pt-petrol); color: var(--pt-gruen); }
  section.final .microcopy {
    margin: 18px auto 0;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--pt-paper) 85%, transparent);
  }
  .final-bleed { position: absolute; left: -170px; bottom: -180px; width: 470px; height: auto; pointer-events: none; z-index: 0; }
  .final-thin { position: absolute; right: -70px; top: -66px; width: 430px; height: auto; pointer-events: none; z-index: 0; }
  section.final .wrap { position: relative; z-index: 1; }

  /* ========= FOOTER ========= */
  footer { background: var(--pt-petrol); color: var(--pt-paper); padding: 72px 0 0; }
  footer .row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
    gap: 40px; align-items: start;
    padding-bottom: 64px;
  }
  footer h4 { margin: 0 0 26px; font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-gruen); }
  footer a, footer p { color: color-mix(in srgb, var(--pt-paper) 88%, transparent); text-decoration: none; font-size: 16px; line-height: 1.85; margin: 0; }
  footer .col p { white-space: nowrap; }
  footer .col a:hover { color: var(--pt-gruen); }
  footer .brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; justify-self: start; }
  footer .brand img { height: 30px; width: auto; }

  footer .socials { display: flex; gap: 14px; }
  footer .socials a {
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--pt-paper); color: var(--pt-petrol);
    display: grid; place-items: center;
    transition: background var(--dur-med) var(--ease-snap), color var(--dur-med) var(--ease-snap), transform var(--dur-fast) var(--ease-snap);
  }
  footer .socials a:hover { background: var(--pt-gruen); color: var(--pt-petrol); transform: translateY(-2px); }
  footer .socials svg { width: 20px; height: 20px; display: block; }

  footer .newsletter {
    display: none;
  }

  footer .legal {
    background: color-mix(in srgb, var(--pt-petrol) 78%, #000);
    margin-top: 0;
  }
  footer .legal .wrap {
    display: flex; align-items: center; gap: 40px;
    padding-top: 22px; padding-bottom: 22px;
  }
  footer .legal a {
    font-size: 15px; color: color-mix(in srgb, var(--pt-paper) 82%, transparent);
    text-decoration: none;
  }
  footer .legal a:hover { color: var(--pt-gruen); }

  /* placeholder boxes */
  .ph {
    display: grid; place-items: center;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
    border: 1.5px dashed color-mix(in srgb, currentColor 40%, transparent);
    font-family: var(--font-body); font-weight: 500; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    text-align: center; padding: 16px;
  }

  /* ===== slim trust bar (between hero & status) ===== */
  section.trust.slim { background: var(--pt-petrol); padding: 26px 0; }
  section.trust.slim .trust-inner {
    display: flex; align-items: center; gap: 44px;
  }
  section.trust.slim .trust-label {
    font-family: var(--font-italic); font-style: italic; font-weight: 300;
    font-size: 16px; line-height: 1.25; color: var(--pt-paper);
    flex-shrink: 0; max-width: 19ch;
  }
  section.trust.slim .logos {
    display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 40px;
  }
  section.trust.slim .logo {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0;
  }
  section.trust.slim .logo img {
    width: auto; object-fit: contain; display: block;
  }
  section.trust.slim .l-penz  img { height: 45px; }
  section.trust.slim .l-arber img { height: 22px; }
  section.trust.slim .l-hamm  img { height: 34px; }
  section.trust.slim .l-liebl img { height: 52px; }
  section.trust.slim .l-pledl img { height: 48px; }

  /* ===== personal contact section ===== */
  section.kontakt { background: var(--pt-petrol); color: var(--pt-paper); padding: 116px 0; }
  section.kontakt .grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
  }
  section.kontakt .eyebrow { color: var(--pt-gruen); }
  section.kontakt h2 { font-size: clamp(44px, 4.8vw, 72px); color: var(--pt-paper); margin: 0; max-width: 13ch; }
  section.kontakt .l1 { color: var(--pt-paper); }
  section.kontakt .l2 { color: var(--pt-gruen); }

  .contact-card {
    color: var(--pt-paper); position: relative;
  }
  .contact-card .corner-pix { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; }
  .contact-card .top { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
  .contact-card .photo {
    width: 124px; height: 124px; flex-shrink: 0;
    background-size: cover; background-position: center top;
    background-color: var(--pt-rot);
    background-image: url('assets/images/team/Tobias-Bals.webp');
    border: 3px solid var(--pt-gruen);
  }
  .contact-card .name {
    font-family: var(--font-display); font-size: 30px; line-height: 0.95;
    text-transform: uppercase; letter-spacing: -.02em; color: var(--pt-paper);
  }
  .contact-card .role {
    margin-top: 8px;
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    letter-spacing: 0.04em; color: var(--pt-gruen);
  }
  .contact-card .say {
    margin: 0 0 22px;
    font-family: var(--font-italic); font-style: italic; font-weight: 300;
    font-size: 21px; line-height: 1.4; color: var(--pt-paper);
  }
  .contact-card .reach {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--pt-paper) 18%, transparent);
  }
  .contact-card .reach a {
    font-family: var(--font-body); font-weight: 700; font-size: 16px;
    color: var(--pt-gruen); text-decoration: none; letter-spacing: 0.01em;
  }
  .contact-card .reach a:hover { color: var(--pt-paper); }
  .contact-card .btn { background: var(--pt-gruen); color: var(--pt-petrol); width: 100%; justify-content: center; }
  .contact-card .btn:hover { background: var(--pt-rot); color: var(--pt-paper); }

  /* mobile */
  @media (max-width: 980px) {
    .wrap { padding: 0 24px; }
    nav.top .row { padding: 14px 24px; }
    section.hero { padding: 40px 0 120px; }
    section.hero .grid { grid-template-columns: 1fr; gap: 40px; }
    /* Shrink the big desktop star + keep eyebrow/heading clear of it */
    .hero-bleed { width: 340px; right: -130px; top: -100px; }
    /* Zigzag sits at the bottom of the hero — visible above the trust strip.
       Section padding-bottom (120px) keeps the avatar row clear of it. */
    .hero-thin  { width: 380px; left: -30px; right: auto; bottom: -30px; }
    section.hero .eyebrow,
    section.hero h1 { padding-right: 200px; }
    /* Bigger Tobias contact photo on tablet — ~1/3 viewport */
    .contact-card .photo { width: 33vw; height: 33vw; max-width: 280px; }
    section.status, section.case, section.weg, section.proof, section.team, section.faq, section.final { padding: 80px 0; }
    section.status .grid { grid-template-columns: 1fr; gap: 32px; }
    section.trust .logos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    section.trust.slim .trust-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
    section.trust.slim .trust-label { max-width: none; }
    section.trust.slim .logos {
      width: 100%;
      display: grid; grid-template-columns: repeat(3, 1fr);
      justify-items: center; align-items: center;
      gap: 32px 40px;
    }
    section.trust.slim .l-penz  img { height: 68px; }
    section.trust.slim .l-arber img { height: 32px; }
    section.trust.slim .l-hamm  img { height: 48px; }
    section.trust.slim .l-liebl img { height: 76px; }
    section.trust.slim .l-pledl img { height: 68px; }
    section.trust.slim .logo img { max-width: 100%; }
    section.kontakt { padding: 80px 0; }
    section.kontakt .grid { grid-template-columns: 1fr; gap: 36px; }
    section.weg .steps,
    section.proof .cards { grid-template-columns: 1fr 1fr; }
    section.team .grid { grid-template-columns: 1fr; }
    footer .row { grid-template-columns: 1fr 1fr; gap: 32px; }
    footer .legal .wrap { gap: 24px; flex-wrap: wrap; }
    /* Final CTA — must come AFTER the shared '80px 0' shorthand so it wins */
    section.final { padding: 96px 0 260px; overflow: hidden; }
    .final-bleed { width: 360px; left: -110px; bottom: -140px; }
  }

  /* ========= PHONE (≤640px) ========= */
  @media (max-width: 640px) {
    /* Nuclear overflow safety: nothing ever creates horizontal scroll on phone */
    html, body { overflow-x: hidden; max-width: 100vw; }
    /* Sections with absolutely-positioned bleed decorations must clip them */
    section.hero, section.case, section.kontakt, section.final { overflow: hidden; }

    .wrap { padding: 0 20px; }
    section.status, section.case, section.weg, section.proof, section.faq { padding: 56px 0; }

    /* Nav — hide phone, shrink brand + button */
    nav.top .row { padding: 12px 20px; gap: 12px; }
    nav.top .right { gap: 10px; }
    nav.top .phone { display: none; }
    nav.top .brand img { height: 22px; }
    nav.top .btn { padding: 10px 14px; font-size: 11px; }

    /* HERO — extra bottom padding lifts the avatar row above the zigzag */
    section.hero { padding: 32px 0 120px; }
    /* Keep eyebrow + heading clear of the orange star decoration on the right */
    section.hero .eyebrow,
    section.hero h1 { padding-right: 110px; }
    section.hero h1 { font-size: 40px; line-height: 1.02; }
    section.hero .l1 { font-size: 34px; }
    section.hero .l2 { font-size: 28px; overflow-wrap: break-word; word-break: break-word; }
    /* Grunge Dirtyline headings everywhere — very wide glyphs, shrink hard on phone */
    .l-dty { font-size: 32px !important; line-height: 1.0; overflow-wrap: break-word; word-break: break-word; }
    .l-tar { overflow-wrap: break-word; }
    section.hero .eyebrow { font-size: 11px; letter-spacing: 0.10em; }
    section.hero .lede { font-size: 16px; line-height: 1.5; }
    section.hero .region { font-size: 14px; }
    section.hero .cta-row .btn {
      width: 100%; padding: 18px 22px; font-size: 14px; justify-content: center;
    }
    section.hero .people .stack .bubble {
      width: 44px; height: 44px; border-width: 2px; margin-left: -10px;
    }
    section.hero .people .stack .bubble:first-child { margin-left: 0; }
    .booking { padding: 24px; border-radius: 20px; }
    .booking h3 { font-size: 24px; }
    .hero-bleed { width: 220px; right: -70px; top: -20px; height: auto; }
    .hero-thin { width: 260px; left: -20px; right: auto; bottom: -20px; height: auto; }

    /* TRUST SLIM */
    section.trust.slim { padding: 28px 0; }
    section.trust.slim .trust-label { font-size: 14px; }
    section.trust.slim .logos {
      display: grid; grid-template-columns: repeat(2, 1fr);
      justify-items: center; align-items: center;
      gap: 22px 28px;
    }
    section.trust.slim .logo { flex: unset; }
    section.trust.slim .l-penz  img { height: 82px; }
    section.trust.slim .l-arber img { height: 38px; }
    section.trust.slim .l-hamm  img { height: 54px; }
    section.trust.slim .l-liebl img { height: 84px; }
    section.trust.slim .l-pledl img { height: 76px; }
    /* Cap by cell width in case a logo would overflow horizontally */
    section.trust.slim .logo img { max-width: 100%; }

    /* STATUS QUO */
    section.status h2 { font-size: 42px; line-height: 1.02; }
    section.status .body p { font-size: 15px; }

    /* CASE / VORHER-NACHHER */
    section.case h2 { font-size: 38px; }
    section.case .head-row { margin-bottom: 32px; }
    .slider { border-width: 2px; }
    .slider .handle::before { width: 36px; height: 36px; font-size: 15px; }
    .slider .tag { top: 10px; padding: 5px 10px; font-size: 10px; }
    .slider .tag.t1 { left: 10px; }
    .slider .tag.t2 { right: 10px; }
    .gallery { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
    .gallery .frame { padding: 10px; font-size: 16px; }

    /* WEG */
    section.weg h2 { font-size: 40px; margin: 0 0 32px; max-width: 12ch; }
    section.weg .steps { grid-template-columns: 1fr; gap: 12px; }
    section.weg .step .n { font-size: 48px; }
    section.weg .step h3 { font-size: 22px; }
    section.weg .step p { font-size: 14px; }

    /* PROOF / TESTIMONIALS */
    section.proof h2 { font-size: 38px; }
    section.proof .cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
    section.proof .card { padding: 24px; }

    /* KONTAKT / CONTACT CARD */
    section.kontakt { padding: 56px 0; }
    section.kontakt h2 { font-size: 36px; }
    .contact-card { padding: 0; }
    .contact-card .top { flex-direction: column; align-items: flex-start; gap: 18px; }
    .contact-card .photo { width: 180px; height: 180px; }

    /* FAQ */
    section.faq h2 { font-size: 38px; margin: 0 0 28px; }
    section.faq details { padding: 18px 20px; }
    section.faq summary { font-size: 16px; }
    section.faq details p { font-size: 14px; }

    /* FINAL CTA */
    section.final { padding: 120px 0 220px; }
    section.final h2 { font-size: 46px; line-height: 1.05; }
    section.final .btn {
      width: 100%; padding: 18px 22px; font-size: 14px; justify-content: center;
    }
    section.final .microcopy { font-size: 12px; }
    .final-bleed { width: 260px; left: -70px; bottom: -80px; height: auto; }
    .final-thin  { width: 260px; right: -40px; top: -20px; height: auto; }

    /* FOOTER */
    footer { padding: 56px 0 0; }
    footer .row { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
    footer h4 { margin: 0 0 16px; font-size: 13px; }
    footer a, footer p { font-size: 15px; }
    footer .col p { white-space: normal; }
    footer .brand img { height: 26px; }
    footer .legal .wrap {
      flex-direction: row; flex-wrap: wrap; align-items: center;
      gap: 12px 24px;
      padding-top: 18px; padding-bottom: 18px;
    }
    footer .legal a { font-size: 14px; }
  }

/* ===== next style block ===== */

:is(h1,h2,h3,h4,h5,h6) >:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) >div { font-family: Tartuffo !important }

/* ============================================================
 *  Contact form section (Gravity Forms, id 1) — .pt-gf scope
 *  Restyles Gravity's markup to match the landing-page design.
 * ============================================================ */

/* Smooth in-page scrolling (e.g. hero CTA → contact form). scroll-margin keeps
   the section heading clear of the sticky nav when jumped to. */
html { scroll-behavior: smooth; }
section.contactform {
  background: var(--pt-flieder); padding: 120px 0; scroll-margin-top: 80px;
  position: relative; overflow: hidden;
}
section.contactform .wrap { position: relative; z-index: 1; }
/* Signature brand graphics bleeding from the corners (as in Hero / Final CTA). */
.cf-bleed { position: absolute; right: -190px; top: -170px; width: 440px; height: auto; pointer-events: none; z-index: 0; }
.cf-thin  { position: absolute; left: -70px; bottom: -70px; width: 340px; height: auto; pointer-events: none; z-index: 0; }
section.contactform .head-row { text-align: center; margin-bottom: 40px; }
section.contactform h2 { font-size: clamp(48px, 5.4vw, 80px); color: var(--pt-petrol); margin: 0 auto; }
section.contactform .l1 { color: var(--pt-petrol); }
section.contactform .l2 { color: var(--pt-rot); }
section.contactform .eyebrow { color: var(--pt-rot); }
section.contactform .lede { color: var(--pt-petrol); margin: 18px auto 0; }

/* --- Gravity Forms wrapper --- */
.pt-gf { max-width: 760px; margin: 0 auto; }
.pt-gf .gform_wrapper {
  margin: 0;
  /* Override Gravity's "orbital" theme design tokens so its own rules paint
     brand colors too (belt-and-suspenders alongside the explicit rules below). */
  --gf-color-primary: var(--pt-rot);
  --gf-color-primary-rgb: 255, 97, 59;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: var(--pt-petrol);
  --gf-color-primary-hover: var(--pt-petrol);
  --gf-ctrl-border-color: var(--pt-petrol);
  --gf-ctrl-border-color-hover: var(--pt-petrol);
  --gf-ctrl-border-color-focus: var(--pt-rot);
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-color: var(--pt-petrol);
  --gf-ctrl-label-color-primary: var(--pt-petrol);
}
.pt-gf .gform_heading { display: none; } /* title/description handled by the section above */

/* Field rows + labels */
.pt-gf .gform_wrapper .gform_fields { row-gap: 22px; }
.pt-gf .gform_wrapper .gfield { margin: 0; }
/* Force every field (incl. the textarea) to span the full row width, so the
   layout is a clean single column regardless of Gravity's per-field size. */
.pt-gf .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1 !important; }
.pt-gf .gform_wrapper .gfield_label {
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: var(--pt-petrol) !important;
  margin: 0 0 10px; display: block;
}
.pt-gf .gform_wrapper .gfield_required { color: var(--pt-rot) !important; }

/* Inputs, textareas, selects */
.pt-gf .gform_wrapper .gfield input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.pt-gf .gform_wrapper .gfield textarea,
.pt-gf .gform_wrapper .gfield select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 16px; color: var(--pt-petrol) !important;
  background: var(--pt-paper) !important;
  border: 1.5px solid var(--pt-petrol) !important; border-radius: 0 !important;
  box-shadow: none; /* strip Gravity's default field drop shadow — no !important, so focus + error box-shadows still win */
  padding: 14px 16px; line-height: 1.4;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.pt-gf .gform_wrapper .gfield textarea { min-height: 120px; resize: vertical; }
.pt-gf .gform_wrapper .gfield input::placeholder,
.pt-gf .gform_wrapper .gfield textarea::placeholder { color: rgba(0, 76, 90, 0.5); }
.pt-gf .gform_wrapper .gfield input:not([type=checkbox]):not([type=radio]):focus,
.pt-gf .gform_wrapper .gfield textarea:focus,
.pt-gf .gform_wrapper .gfield select:focus {
  outline: none;
  box-shadow: inset 0 -4px 0 var(--pt-petrol), 0 0 0 3px color-mix(in srgb, var(--pt-petrol) 16%, transparent) !important;
}

/* Consent checkbox / radios — brand coral accent + comfortable size */
.pt-gf .gform_wrapper .gfield input[type=checkbox],
.pt-gf .gform_wrapper .gfield input[type=radio] {
  accent-color: var(--pt-rot);
  width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto;
}

/* Calm at rest — each field reveals its brand accent only on focus (bottom bar +
   soft ring), drawn with box-shadow so there is NO layout shift. Coral is left
   out of the palette so a focused field never looks like an error. */
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(1) input:focus,
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(1) textarea:focus {
  box-shadow: inset 0 -4px 0 var(--pt-lila), 0 0 0 3px color-mix(in srgb, var(--pt-lila) 22%, transparent) !important;
}
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(2) input:focus,
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(2) textarea:focus {
  box-shadow: inset 0 -4px 0 var(--pt-gruen), 0 0 0 3px color-mix(in srgb, var(--pt-gruen) 22%, transparent) !important;
}
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(3) input:focus,
.pt-gf .gform_wrapper .gform_fields > .gfield:nth-of-type(3) textarea:focus {
  box-shadow: inset 0 -4px 0 var(--pt-violett), 0 0 0 3px color-mix(in srgb, var(--pt-violett) 22%, transparent) !important;
}

/* Field descriptions + consent/checkbox text */
.pt-gf .gform_wrapper .gfield_description,
.pt-gf .gform_wrapper .gfield_consent_description,
.pt-gf .gform_wrapper .gchoice label {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--pt-petrol) 82%, transparent);
}
.pt-gf .gform_wrapper .gfield_consent_description a,
.pt-gf .gform_wrapper .gfield_description a,
.pt-gf .pt_form_html a,
.pt-gf .gfield--type-consent a {
  color: var(--pt-rot) !important; text-decoration: underline !important;
}

/* Submit button — mirrors .btn */
.pt-gf .gform_footer {
  grid-column: 1 / -1; margin-top: 36px; padding: 0;
  display: flex; justify-content: center; text-align: center;
  /* Gravity renders the button ::after arrow in its icon font via this variable
     (used with !important, so property overrides lose). Re-point the variable to
     the body font — scoped to the footer, so only the submit button's arrow is
     affected (not e.g. the consent checkbox icon). */
  --gf-icon-font-family: var(--font-body);
}
.pt-gf .gform_footer input[type=submit],
.pt-gf .gform_footer button,
.pt-gf .gform_wrapper .gform_footer .gform_button,
.pt-gf .gform_wrapper .gform_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0 !important; cursor: pointer; padding: 22px 46px !important;
  background: var(--pt-gruen) !important; color: var(--pt-petrol) !important;
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 16px !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 0 !important;
  width: auto !important;
  transition: transform 0.16s var(--ease-snap), background 0.16s linear, color 0.16s linear;
}
.pt-gf .gform_wrapper .gform_footer button.gform_button::after,
.pt-gf .gform_wrapper .gform_footer input[type=submit]::after,
.pt-gf .gform_wrapper .gform_footer .gform_button::after {
  content: "→" !important;
  /* Gravity's orbital theme forces its own icon font here (gform-icons-orbital),
     which renders U+2192 as a different glyph. This selector matches Gravity's
     specificity and, loading later, forces the body font so the arrow is
     identical to the page's other buttons. */
  font-family: var(--font-body) !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: var(--pt-petrol) !important;
  line-height: 1; display: inline-block;
  transition: transform 0.16s var(--ease-snap), color 0.16s linear;
}
.pt-gf .gform_footer input[type=submit]:hover,
.pt-gf .gform_footer button:hover,
.pt-gf .gform_wrapper .gform_footer .gform_button:hover {
  background: var(--pt-petrol) !important; color: var(--pt-gruen) !important;
}
.pt-gf .gform_wrapper .gform_footer button.gform_button:hover::after,
.pt-gf .gform_wrapper .gform_footer input[type=submit]:hover::after,
.pt-gf .gform_wrapper .gform_footer .gform_button:hover::after {
  transform: translateX(4px); color: var(--pt-gruen) !important;
}

/* ---- Validation / error states ---- */

/* Errored fields: coral border + a soft coral ring (accent bottom stays visible) */
.pt-gf .gform_wrapper .gfield_error input:not([type=checkbox]):not([type=radio]),
.pt-gf .gform_wrapper .gfield_error textarea,
.pt-gf .gform_wrapper .gfield_error select {
  border-color: var(--pt-rot) !important;
  box-shadow: 0 0 0 2px rgba(255, 97, 59, 0.30) !important;
}

/* Per-field error message (sits above the input in this theme) */
.pt-gf .gform_wrapper .validation_message,
.pt-gf .gform_wrapper .gfield_validation_message {
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.02em; color: var(--pt-rot) !important;
  margin: 2px 0 10px !important; padding: 0 !important; background: none !important; border: 0 !important;
}

/* Error summary box at the top of the form — white panel, coral left accent */
.pt-gf .gform_wrapper .gform_validation_errors {
  background: var(--pt-paper);
  border: 0 !important; border-left: 6px solid var(--pt-rot) !important;
  border-radius: 0 !important; box-shadow: var(--shadow-2);
  padding: 24px 28px !important; margin: 0 0 32px !important;
}
.pt-gf .gform_wrapper .gform_validation_errors .gform_submission_error {
  font-family: var(--font-body) !important; font-weight: 700 !important;
  font-size: 17px !important; line-height: 1.35 !important; text-transform: none !important;
  color: var(--pt-rot) !important;
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important;
}
.pt-gf .gform_wrapper .gform_validation_errors ol,
.pt-gf .gform_wrapper .gform_validation_errors ul {
  margin: 0 !important; padding-left: 20px !important;
}
.pt-gf .gform_wrapper .gform_validation_errors li {
  font-family: var(--font-body) !important; font-size: 14px !important; line-height: 1.55 !important;
  color: var(--pt-petrol) !important; margin: 2px 0;
}
.pt-gf .gform_wrapper .gform_validation_error_link {
  color: var(--pt-rot) !important; text-decoration: underline !important; font-weight: 600 !important;
}

/* AJAX confirmation message */
.pt-gf .gform_confirmation_message {
  font-family: var(--font-italic); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.4; color: var(--pt-petrol);
  text-align: center; padding: 32px 24px;
  background: var(--pt-paper); border-left: 4px solid var(--pt-rot);
}

@media (max-width: 980px) {
  section.contactform { padding: 80px 0; }
  .cf-bleed { width: 300px; right: -110px; top: -90px; }
  .cf-thin  { width: 240px; left: -40px; bottom: -40px; }
}
@media (max-width: 640px) {
  section.contactform { padding: 56px 0; }
  .pt-gf .gform_footer input[type=submit],
  .pt-gf .gform_footer button,
  .pt-gf .gform_wrapper .gform_footer .gform_button {
    width: 100% !important; justify-content: center; padding: 20px 22px !important;
  }
  .cf-bleed { width: 200px; right: -70px; top: -30px; }
  .cf-thin  { width: 180px; left: -30px; bottom: -20px; }
}