/* jpra v1 — dunkler Freelancer-Auftritt, angelehnt an das Portfolio-Template „Reeni“.
   Fast schwarzer Grund, Karten eine Stufe heller, feine Rahmen statt Schatten, 20 px Rundung.
   Ein Akzent (Standard Blau, über die Akzentfarbe der Website wählbar), Titel und Zahlen in Rajdhani, Fließtext in Rubik. Klassenpräfix jp-.
   Setzt foundation.css und components.css voraus. */

body{
  --jp-display:"jpra Display","Rajdhani",system-ui,sans-serif;--jp-body:"jpra Body","Rubik",system-ui,sans-serif;
  --jp-black:#060606;--jp-card:#141414;--jp-radius:20px;
  /* Farben eines Abschnitts; die Stile light/soft/dark setzen sie neu. */
  --paper:#060606;--soft:#141414;--card:#141414;--head:#fff;--ink:#9f9f9f;--muted:#9f9f9f;--jp-line:rgba(255,255,255,.08);--line:var(--jp-line);
  --jp-tint:color-mix(in srgb,var(--accent) 16%,transparent);
  --tone-light:#f4f4f4;--tone-soft:#e9e9ec;--tone-ink:#141414;--tone-muted:#5d6570;--tone-edge:#d9dde0;--tone-radius:var(--jp-radius);
  --tone-dark-bg:color-mix(in srgb,#060606 30%,var(--accent));
  font-family:var(--jp-body);font-size:17px;line-height:1.8;color:var(--ink);background:var(--jp-black);
  -webkit-font-smoothing:antialiased;hyphens:auto;hyphenate-limit-chars:10 4 4
}
h1,h2,h3,blockquote p,.jp-brand,.jp-voice-name{hyphens:manual}
.wrap{width:min(1240px,calc(100% - 96px))}
h1,h2,h3{font-family:var(--jp-display);font-weight:700;letter-spacing:0;color:var(--head)}
h1{font-size:clamp(46px,6vw,80px);line-height:1.02}
h2{font-size:clamp(34px,3.8vw,52px);line-height:1.08;margin:0 0 22px}
h3{font-size:25px;line-height:1.2}
.lead,.body-copy{color:var(--ink);font-size:18px;line-height:1.85}
.eyebrow{font-family:var(--jp-body);font-weight:500;font-size:14px;letter-spacing:.16em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;flex-shrink:0}
.eyebrow:empty:not([contenteditable]),.lead:empty:not([contenteditable]),.body-copy:empty:not([contenteditable]),.jp-price:empty:not([contenteditable]),.jp-cat:empty:not([contenteditable]),.jp-project-text:empty:not([contenteditable]),.jp-role:empty:not([contenteditable]),.jp-bio:empty:not([contenteditable]),.jp-org:empty:not([contenteditable]){display:none}
.button{min-height:60px;padding:16px 30px;gap:16px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-family:var(--jp-body);font-weight:500;font-size:16px;letter-spacing:.02em;transition:transform .25s ease,box-shadow .25s ease}
.button:hover{transform:translate3d(0,-2px,0);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 35%,transparent)}
.jp-label{font-family:var(--jp-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--head);margin:0 0 16px}
.jp-hint{font-size:14px;color:var(--muted)}
.jp-empty{display:grid;place-items:center;background:color-mix(in srgb,var(--card) 70%,var(--paper));font-family:var(--jp-display);font-weight:700;font-size:64px;color:var(--jp-tint);-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 45%,transparent)}
a{transition:color .2s ease}

/* Stile: alle drei bleiben dunkel. „Hell“ ist der tiefschwarze Grund, „Sanft“ die Kartenfläche, „Akzent“ ein dunkler Grund mit Stich der Akzentfarbe. */
.variant-light{--paper:#060606;--card:#141414;--head:#fff;--ink:#9f9f9f;--muted:#9f9f9f;--jp-line:rgba(255,255,255,.08);background:var(--paper);color:var(--ink)}
.variant-soft{--paper:#141414;--card:#1d1d1f;--head:#fff;--ink:#a3a3a3;--muted:#a3a3a3;--jp-line:rgba(255,255,255,.09);background:var(--paper);color:var(--ink)}
.variant-dark{--paper:color-mix(in srgb,var(--accent) 12%,#060606);--card:color-mix(in srgb,var(--accent) 14%,#141414);--head:#fff;--ink:#a8acb3;--muted:#a8acb3;--jp-line:rgba(255,255,255,.1);background:var(--paper);color:var(--ink)}
.variant-dark :is(.lead,.body-copy,figcaption){color:var(--ink)}
.variant-dark .eyebrow{color:var(--accent)}
.variant-dark .button{background:var(--accent);color:var(--on-accent)}
.is-tone{--head:var(--tone-ink)}
.is-tone.is-tone-dark{--head:var(--on-accent)}

/* Leuchtpunkt: theme.js setzt --x/--y, der Kreis folgt der Maus. */
.jp-glow{position:relative;isolation:isolate;overflow:hidden}
.jp-glow::after{content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:320px;height:320px;translate:-50% -50%;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.jp-glow:hover::after{opacity:1}

/* Kopfzeile: liegt transparent über dem Einstieg und bekommt beim Scrollen eine Fläche. */
.jp-header{position:sticky;top:0;z-index:30;color:#fff;transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.jp-header.is-scrolled{background:rgba(20,20,20,.86);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom-color:rgba(255,255,255,.08)}
.jp-header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;min-height:92px}
.jp-brand{font-family:var(--jp-display);font-weight:700;font-size:30px;letter-spacing:.02em;line-height:1;text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:12px}
.jp-brand::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);margin-left:-8px;align-self:flex-end;margin-bottom:5px}
.jp-brand:has(.brand-logo)::after{display:none}
.jp-brand .brand-logo{max-height:46px;width:auto}
.jp-header nav{font-family:var(--jp-body);font-weight:500;font-size:16px;gap:8px 34px}
.jp-header nav a{padding-block:12px;text-decoration:none;color:rgba(255,255,255,.82);background:linear-gradient(var(--accent),var(--accent)) left bottom/0 2px no-repeat;transition:color .2s ease,background-size .3s ease}
.jp-header nav a:hover,.jp-header nav a[aria-current]{color:#fff;background-size:100% 2px}
.jp-header nav a[aria-current]{text-decoration:none}
.jp-header .nav-sub{background:#141414;color:#fff;border-color:rgba(255,255,255,.1);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.jp-header .nav-sub a{background:none}
.jp-header .nav-toggle{color:#fff;border-color:rgba(255,255,255,.25);border-radius:6px}

/* Beginnt die Seite mit dem Einstieg, liegt die Kopfzeile darüber, damit Lichtschein und Foto bis oben reichen. */
@media(min-width:761px){
  body:has(main>.block-hero:first-child) .jp-header{margin-bottom:-93px}
  main>.block-hero:first-child .jp-hero{padding-top:177px}
  main>.block-hero.layout-zentriert:first-child .jp-hero{padding-top:189px}
  main>.block-hero.layout-vollbild:first-child .jp-hero{padding-top:233px}
}
}

/* Abschnitte */
.section{padding:120px 0}
.block-hero{padding:0}
.jp-head{margin-bottom:56px;max-width:820px}
.jp-head h2:last-child{margin-bottom:0}
.jp-head .lead{margin:0}
.section-intro{margin-bottom:56px;max-width:820px}

/* Einstieg: Text links, rechts die Person (am besten freigestellt) unten bündig vor Kreis, Lichtschein und Name als Kontur. */
.jp-hero{position:relative;isolation:isolate;overflow:hidden;padding:84px 0 120px}
.jp-hero::before{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-80px;top:14%;border-radius:50%;background:var(--accent);opacity:.24;filter:blur(150px);pointer-events:none}
.jp-hero-word{position:absolute;z-index:-1;left:50%;bottom:-.18em;translate:-50% 0;font-family:var(--jp-display);font-weight:700;font-size:clamp(110px,17vw,260px);line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--head) 16%,transparent);pointer-events:none;user-select:none}
.jp-hero>.wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:48px}
.jp-hero.text-only>.wrap{grid-template-columns:minmax(0,1fr)}
.jp-hero.text-only .jp-hero-copy{max-width:900px}
.jp-hero.has-image{padding-bottom:0}
.jp-hero.has-image .jp-hero-copy{align-self:center;padding-bottom:84px}
.jp-hero.has-image .jp-hero-word{left:auto;right:-.04em;translate:none;top:12%;bottom:auto;font-size:clamp(120px,19vw,300px)}
.jp-hero-copy{min-width:0}
.jp-hero-copy h1{margin-bottom:26px}
.jp-hero-copy .lead{font-size:19px;max-width:580px}
.jp-hero-action{margin-top:38px}
.jp-hero-media{position:relative;min-width:0;display:flex;justify-content:center;align-items:flex-end}
.jp-hero-media::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;translate:-50% 0;width:min(100%,560px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%)}
.jp-hero-media img{width:auto;max-width:100%;max-height:min(680px,80svh);object-fit:contain;object-position:bottom;border-radius:var(--jp-radius) var(--jp-radius) 0 0;-webkit-mask-image:linear-gradient(#000 72%,transparent 99%);mask-image:linear-gradient(#000 72%,transparent 99%)}
.layout-zentriert .jp-hero,.layout-zentriert .jp-hero.has-image{padding:96px 0 120px;text-align:center}
.layout-zentriert .jp-hero::before{right:auto;left:50%;translate:-50% 0;top:-20%}
.layout-zentriert .jp-hero>.wrap{grid-template-columns:minmax(0,1fr);gap:56px}
.layout-zentriert .jp-hero-copy,.layout-zentriert .jp-hero.has-image .jp-hero-copy{max-width:900px;margin-inline:auto;padding-bottom:0}
.layout-zentriert .jp-hero-copy .lead{margin-inline:auto}
.layout-zentriert .jp-hero .eyebrow{justify-content:center}
.layout-zentriert .jp-hero .eyebrow::after{content:"";width:34px;height:2px;background:currentColor;flex-shrink:0}
.layout-zentriert .jp-hero-media{display:block;padding:16px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 6px)}
.layout-zentriert .jp-hero-media::before{display:none}
.layout-zentriert .jp-hero-media img{-webkit-mask-image:none;mask-image:none;width:100%;max-height:none;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;border-radius:var(--jp-radius)}
.layout-zentriert .jp-hero-word,.layout-zentriert .jp-hero.has-image .jp-hero-word{top:12%;bottom:auto;left:50%;right:auto;translate:-50% 0}
.layout-vollbild .jp-hero,.layout-vollbild .jp-hero.has-image{min-height:min(88svh,760px);display:grid;align-content:end;padding:140px 0 88px;background:#060606;color:#fff;--head:#fff;--ink:rgba(255,255,255,.84)}
.layout-vollbild .jp-hero::before{left:-140px;right:auto;top:auto;bottom:-200px;opacity:.32}
.layout-vollbild .jp-hero>.wrap{grid-template-columns:minmax(0,1fr);gap:0}
.layout-vollbild .jp-hero-copy,.layout-vollbild .jp-hero.has-image .jp-hero-copy{max-width:800px;padding-bottom:0}
.layout-vollbild .jp-hero-word,.layout-vollbild .jp-hero.has-image .jp-hero-word{bottom:auto;top:40px;left:auto;right:-.08em;translate:none}
.layout-vollbild .jp-hero-media{position:absolute;inset:0;z-index:-2;display:block}
.layout-vollbild .jp-hero-media::before{display:none}
.layout-vollbild .jp-hero-media img{-webkit-mask-image:none;mask-image:none;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border-radius:0}
.layout-vollbild .jp-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,6,.92) 0%,rgba(6,6,6,.6) 60%,rgba(6,6,6,.35) 100%)}

/* Leistungen: Untereinander als Zeilen mit Nummernkreis, als Kacheln mit Akzentrahmen. */
.jp-services{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.jp-service{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 36px;padding:30px 36px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);min-width:0;transition:border-color .3s ease}
.jp-service:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.jp-icon{width:70px;height:70px;border-radius:50%;border:2px solid var(--jp-line);display:grid;place-items:center;font-family:var(--jp-display);font-weight:700;font-size:24px;color:var(--accent);transition:background .3s ease,color .3s ease,border-color .3s ease}
.jp-service:hover .jp-icon{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.jp-service h3{margin:0 0 6px}
.jp-service h3 a{text-decoration:none}
.jp-service h3 a:hover{color:var(--accent)}
.jp-service p{margin:0;font-size:16px;color:var(--ink)}
.jp-service .jp-price{font-family:var(--jp-display);font-weight:700;font-size:20px;color:var(--accent);white-space:nowrap}
.layout-kacheln .jp-services{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px}
.layout-kacheln .jp-service{grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:22px;padding:40px 32px;background:transparent;border-color:var(--jp-tint)}
.layout-kacheln .jp-service .jp-price{margin-top:auto;white-space:normal}

/* Kennzahlen: erste Zahl groß in eigener Karte, die übrigen im Raster daneben. */
.jp-facts{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-flow:dense;gap:24px;margin:0}
.jp-fact{background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);padding:36px 34px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0}
.jp-fact dd{margin:0;font-family:var(--jp-display);font-weight:700;font-size:clamp(38px,3.6vw,52px);line-height:1;color:var(--head);overflow-wrap:anywhere}
.jp-fact dt{margin:0;font-size:16px;color:var(--ink)}
.jp-fact:first-child{grid-row:span 2;justify-content:flex-start;padding:44px 40px}
.jp-fact:last-child:nth-child(even):not(:first-child){grid-column:span 2}
.jp-fact:first-child dd{font-size:clamp(90px,11vw,167px);color:var(--accent);letter-spacing:-.02em}
.jp-fact:first-child dt{font-family:var(--jp-display);font-weight:700;font-size:26px;color:var(--head);line-height:1.2}
.jp-fact:first-child::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;right:-80px;bottom:-80px;border-radius:50%;background:var(--accent);opacity:.3;filter:blur(90px)}
.layout-liste .jp-facts{grid-template-columns:minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);padding:10px 40px}
.layout-liste .jp-fact,.layout-liste .jp-fact:first-child{grid-row:auto;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;background:none;border:0;border-bottom:1px solid var(--jp-line);border-radius:0;padding:24px 0}
.layout-liste .jp-fact:last-child{border-bottom:0}.layout-liste .jp-fact:last-child:nth-child(even):not(:first-child){grid-column:auto}
.layout-liste .jp-fact dd,.layout-liste .jp-fact:first-child dd{font-size:clamp(30px,3vw,40px);color:var(--accent);order:2}
.layout-liste .jp-fact:first-child dt{font-family:var(--jp-body);font-weight:400;font-size:16px;color:var(--ink)}
.layout-liste .jp-fact:first-child::before{display:none}

/* Referenzen: Bild im gepolsterten Rahmen, darunter Kategorie und Titel. */
.jp-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:30px}
.jp-project{min-width:0;padding:18px 18px 26px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 4px)}
.jp-project-media{overflow:hidden;border-radius:var(--jp-radius);background:var(--paper)}
.jp-project-media a{display:block}
.jp-project-media a[data-lightbox]{cursor:zoom-in}
.jp-project-media img,.jp-project .jp-empty{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.jp-project:hover .jp-project-media img{transform:scale(1.03)}
.jp-project-body{padding:24px 8px 0}
.jp-cat{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;font-weight:500}
.jp-project-body h3{margin:0}
.jp-project-body h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .3s ease}
.jp-project-body h3 a:hover{background-size:100% 2px}
.jp-project-text{margin:12px 0 0;font-size:16px;color:var(--ink)}
.layout-gross .jp-projects{grid-template-columns:repeat(2,minmax(0,1fr))}
.layout-gross .jp-projects>.jp-project:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding:22px}
.layout-gross .jp-projects>.jp-project:first-child .jp-project-media img{aspect-ratio:16/10}
.layout-gross .jp-projects>.jp-project:first-child .jp-project-body{padding:0 26px 0 0}
.layout-gross .jp-projects>.jp-project:first-child h3{font-size:clamp(32px,3.2vw,44px)}
.layout-gross .jp-projects>.jp-project:first-child .jp-project-text{font-size:18px}
.layout-liste .jp-projects{grid-template-columns:minmax(0,1fr);gap:20px}
.layout-liste .jp-project{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:center;padding:16px}
.layout-liste .jp-project-media img,.layout-liste .jp-project .jp-empty{aspect-ratio:3/2}
.layout-liste .jp-project-body{padding:0 16px 0 0}

/* Stärken: nummerierte Karten; untereinander als Zeilen. */
.jp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.jp-feature{min-width:0;padding:38px 34px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius)}
.jp-feature-no{display:block;font-family:var(--jp-display);font-weight:700;font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--accent);margin-bottom:22px}
.jp-feature h3{margin:0 0 10px}
.jp-feature p{margin:0;font-size:16px;color:var(--ink)}
.layout-liste .jp-features{grid-template-columns:minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);padding:6px 40px}
.layout-liste .jp-feature{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:baseline;gap:24px;background:none;border:0;border-bottom:1px solid var(--jp-line);border-radius:0;padding:28px 0}
.layout-liste .jp-feature:last-child{border-bottom:0}
.layout-liste .jp-feature-no{font-size:40px;margin:0}

/* Ablauf: nummerierte Karten 01, 02, 03; untereinander mit Verbindungslinie. */
.jp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;list-style:none;margin:0;padding:0}
.jp-step{min-width:0;padding:40px 34px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius)}
.jp-step-no{display:inline-grid;place-items:center;min-width:64px;height:64px;padding:0 12px;border-radius:14px;background:var(--jp-tint);color:var(--accent);font-family:var(--jp-display);font-weight:700;font-size:26px;margin-bottom:26px}
.jp-step h3{margin:0 0 10px}
.jp-step p{margin:0;font-size:16px;color:var(--ink)}
.layout-vertikal .jp-steps{grid-template-columns:minmax(0,1fr);gap:18px;position:relative;padding-left:104px}
.layout-vertikal .jp-steps::before{content:"";position:absolute;left:32px;top:20px;bottom:20px;border-left:1px dashed color-mix(in srgb,var(--accent) 55%,transparent)}
.layout-vertikal .jp-step{position:relative;padding:30px 34px}
.layout-vertikal .jp-step-no{position:absolute;left:-104px;top:22px;margin:0;background:var(--paper);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}

/* Kundenstimmen: Zitat in Rajdhani, großes Anführungszeichen, Person darunter. */
.jp-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.jp-voice{margin:0;min-width:0;padding:44px 40px 36px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);display:flex;flex-direction:column}
.jp-voice-mark{display:block;font-family:Georgia,serif;font-size:96px;line-height:.7;height:44px;color:var(--accent)}
.jp-voice blockquote p,.jp-quote blockquote p{font-family:var(--jp-display);font-weight:600;font-size:clamp(22px,2vw,27px);line-height:1.4;letter-spacing:0;color:var(--head);margin:0 0 30px}
.jp-voice-person{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:24px;border-top:1px solid var(--jp-line)}
.jp-voice-person img,.jp-voice-initial{width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0}
.jp-voice-initial{display:grid;place-items:center;background:var(--jp-tint);color:var(--accent);font-family:var(--jp-display);font-weight:700;font-size:24px}
.jp-voice-person>span{display:grid}
.jp-voice-name{font-family:var(--jp-display);font-weight:700;font-size:20px;color:var(--head)}
.jp-role{font-size:14px;color:var(--muted)}
.layout-liste .jp-voices{grid-template-columns:minmax(0,1fr);gap:18px}
.layout-liste .jp-voice{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:12px 48px;padding:36px 40px}
.layout-liste .jp-voice-mark{grid-column:1}
.layout-liste .jp-voice blockquote{grid-column:1}
.layout-liste .jp-voice blockquote p{margin:0}
.layout-liste .jp-voice-person{grid-column:2;grid-row:1/span 2;margin:0;padding:0 0 0 32px;border-top:0;border-left:1px solid var(--jp-line);align-self:stretch}

/* Zitat */
.jp-quote{margin:0;max-width:960px;padding:56px 56px 48px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius)}
.jp-quote blockquote p{font-size:clamp(26px,3vw,40px);line-height:1.3}
.jp-quote figcaption{display:grid;gap:2px}
.jp-quote strong{font-family:var(--jp-display);font-size:20px;color:var(--head)}
.layout-zentriert .jp-quote{margin-inline:auto;text-align:center;background:none;border-color:transparent}
.layout-zentriert .jp-quote .jp-voice-mark{font-size:140px;height:70px}

/* Aufruf: Karte mit Lichtschein. */
.jp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px 48px;padding:64px 64px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 4px)}
.jp-cta::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;left:-120px;top:-160px;border-radius:50%;background:var(--accent);opacity:.28;filter:blur(120px)}
.jp-cta-copy{flex:1 1 420px;min-width:0}
.jp-cta h2{margin:0;max-width:720px}
.jp-cta p{margin:14px 0 0;max-width:640px;color:var(--ink)}
.layout-zentriert .jp-cta{flex-direction:column;text-align:center}
.layout-zentriert .jp-cta::before{left:50%;translate:-50% 0}
.layout-zentriert .jp-cta h2,.layout-zentriert .jp-cta p{margin-inline:auto}

/* Kontakt: eine Karte, links die mitlaufende Überschrift, rechts das Formular. */
.jp-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:56px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 4px);align-items:start}
.jp-contact-copy{position:sticky;top:120px;min-width:0}
.jp-contact-copy h2{font-size:clamp(34px,3.6vw,50px)}
.jp-form-wrap{min-width:0}
.jp-contact .contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea,select){background:var(--paper)}
.layout-gestapelt .jp-contact{grid-template-columns:minmax(0,1fr);gap:36px}
.layout-gestapelt .jp-contact-copy{position:static;max-width:760px}

/* Bild mit Text */
.jp-image{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.jp-image-media{order:2;min-width:0;padding:16px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 6px)}
.jp-image-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--jp-radius)}
.jp-image-media .image-placeholder{border-radius:var(--jp-radius);background:var(--paper);border-color:var(--jp-line)}
.jp-image-media figcaption{font-size:14px;color:var(--muted);margin:14px 6px 2px}
.jp-image-copy{min-width:0}
.layout-links .jp-image-media{order:0}
.layout-breit .jp-image{grid-template-columns:minmax(0,1fr);gap:40px}
.layout-breit .jp-image-media img{aspect-ratio:21/9}

/* Werdegang: Karten mit Zeitraum; zwei Spalten als Raster. */
.jp-timeline{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;position:relative;padding-left:44px}
.jp-timeline::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;border-left:1px solid var(--jp-line)}
.jp-station{position:relative;min-width:0;padding:34px 38px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius)}
.jp-station::before{content:"";position:absolute;left:-43px;top:42px;width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.jp-period{display:inline-block;margin:0 0 14px;padding:4px 14px;border-radius:999px;background:var(--jp-tint);color:var(--accent);font-size:14px;font-weight:500}
.jp-station h3{margin:0 0 4px}
.jp-org{margin:0;font-size:15px;color:var(--muted)}
.jp-station-text{margin:14px 0 0;font-size:16px;color:var(--ink)}
.layout-spalten .jp-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-left:0}
.layout-spalten .jp-timeline::before,.layout-spalten .jp-station::before{display:none}
.layout-spalten .jp-station{padding:40px 38px}

/* Kundenlogos: ruhige Felder, graustufig, beim Überfahren farbig. */
.jp-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:18px}
.jp-logo{display:grid;place-items:center;min-height:120px;padding:24px;background:var(--card);border:1px solid var(--jp-line);border-radius:var(--jp-radius);transition:border-color .3s ease}
.jp-logo:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.jp-logo a{display:grid;place-items:center;width:100%;height:100%;text-decoration:none}
.jp-logo img{max-height:52px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.6;transition:opacity .25s ease,filter .25s ease}
.jp-logo:hover img{filter:none;opacity:1}
.jp-logo-name{font-family:var(--jp-display);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--head) 55%,transparent);text-align:center;transition:color .25s ease}
.jp-logo:hover .jp-logo-name{color:var(--head)}
.layout-reihe .jp-logos{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 48px;padding:34px 0;border-block:1px solid var(--jp-line)}
.layout-reihe .jp-logo{min-height:0;padding:0;background:none;border:0;border-radius:0}

/* Profil: Foto im Rahmen, daneben Name, Rolle und Links. */
.jp-profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.jp-profile-media{min-width:0;padding:16px;background:var(--card);border:1px solid var(--jp-line);border-radius:calc(var(--jp-radius) + 6px)}
.jp-profile-media img,.jp-profile-media .jp-empty{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--jp-radius)}
.jp-profile-media .jp-empty{font-size:160px}
.jp-profile-copy{min-width:0}
.jp-profile-copy h1{margin-bottom:10px}
.jp-profile-role{font-family:var(--jp-display);font-weight:600;font-size:24px;color:var(--accent);margin:0 0 22px}
.jp-profile-location{font-size:15px;color:var(--muted);margin:18px 0 0}
.jp-profile-location::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
.jp-profile-role:empty:not([contenteditable]),.jp-profile-location:empty:not([contenteditable]){display:none}
.jp-profile-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.jp-profile-links .button:nth-child(n+2){background:transparent;color:var(--head);border-color:var(--jp-line)}
.layout-zentriert .jp-profile{grid-template-columns:minmax(0,1fr);text-align:center;gap:40px}
.layout-zentriert .jp-profile-media{width:min(100%,300px);margin-inline:auto;border-radius:50%;padding:12px}
.layout-zentriert .jp-profile-media img,.layout-zentriert .jp-profile-media .jp-empty{aspect-ratio:1;border-radius:50%}
.layout-zentriert .jp-profile-copy .lead{margin-inline:auto}
.layout-zentriert .jp-profile .eyebrow,.layout-zentriert .jp-profile-links{justify-content:center}

/* Bausteine ohne eigene Vorlage: Grundform aus components.css, hier nur die Handschrift. */
.prose h2,.prose h3{font-family:var(--jp-display)}
.prose a,.body-copy a{color:var(--accent)}
.faq-list details{border-top:1px solid var(--jp-line);padding:24px 0}
.faq-list details:last-child{border-bottom:1px solid var(--jp-line)}
.faq-list summary{font-family:var(--jp-display);font-weight:700;font-size:22px;color:var(--head)}
.faq-list details[open] summary{color:var(--accent)}
.logo-list img,.logo-item,.logo-grid img,.logo-row img{filter:grayscale(1) brightness(1.6);opacity:.55;transition:opacity .25s ease,filter .25s ease}
.logo-list img:hover,.logo-item:hover,.logo-grid img:hover,.logo-row img:hover{filter:none;opacity:1}
.price-card,.event-item,.job-item,.post-card,.link-card,.review-card,.download-item,.unit-row,.profile-card,.timeline-item{border-radius:var(--jp-radius)}
.price-card,.post-card,.link-card,.review-card{background:var(--card);border:1px solid var(--jp-line);box-shadow:none}
.price-card.is-featured{border-color:var(--accent)}
.block-notice .notice-inner,.notice-box{background:var(--accent);color:var(--on-accent);border-radius:var(--jp-radius)}
.timeline-item::before,.step-number,.price-amount,.review-stars{color:var(--accent)}
.contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea,select){border-radius:8px;border-color:var(--jp-line);background:var(--card);color:var(--head)}
.contact-form :is(input,textarea,select):focus-visible{outline-color:var(--accent)}
.contact-form label,.radio-field legend{font-weight:500;color:var(--head)}

/* Fußzeile */
.jp-footer{background:#0c0c0c;color:#9f9f9f;padding:96px 0 0;border-top:1px solid rgba(255,255,255,.06)}
.jp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.jp-footer-main{padding-right:48px;border-right:1px solid rgba(255,255,255,.08)}
.jp-footer-brand{font-family:var(--jp-display);font-weight:700;font-size:34px;line-height:1;text-decoration:none;color:#fff;display:inline-block}
.jp-footer-brand .brand-logo{max-height:48px;width:auto}
.jp-footer-tagline{margin:18px 0 0;font-size:16px;max-width:360px}
.jp-footer .jp-label{color:#fff}
.jp-footer-col a{text-decoration:none;color:#9f9f9f}
.jp-footer-col a:hover{color:var(--accent)}
.jp-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.jp-footer-note{margin:0;font-size:16px;max-width:340px;white-space:pre-line}
.jp-footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:72px;padding:26px 0 30px;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.jp-footer-base a{color:inherit}
.jp-top{text-decoration:none;font-weight:500}
.jp-top:hover{color:var(--accent)}

/* Schmale Ansichten */
@media(max-width:1050px){
  .wrap{width:min(1240px,calc(100% - 64px))}
  .section{padding:96px 0}
  .jp-hero>.wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .jp-hero.has-image .jp-hero-copy{padding-bottom:0}
  .jp-hero-media img{max-height:540px}
  .jp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jp-fact:first-child{grid-row:auto;grid-column:1/-1}
  .layout-gross .jp-projects>.jp-project:first-child{grid-template-columns:minmax(0,1fr);gap:24px;padding:18px 18px 26px}
  .layout-gross .jp-projects>.jp-project:first-child .jp-project-body{padding:0 8px}
  .jp-image,.jp-profile,.jp-contact{grid-template-columns:minmax(0,1fr);gap:40px}
  .jp-contact-copy{position:static}
  .layout-liste .jp-voice{grid-template-columns:minmax(0,1fr)}
  .layout-liste .jp-voice-person{grid-column:1;grid-row:auto;padding:24px 0 0;border-left:0;border-top:1px solid var(--jp-line)}
  .jp-footer-grid{grid-template-columns:1fr 1fr}
  .jp-footer-main{grid-column:1/-1;border-right:0;padding-right:0}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{width:min(1240px,calc(100% - 40px))}
  .section{padding:72px 0}
  .jp-header{position:relative}
  .jp-header:has(.site-nav.has-toggle){position:sticky}
  .jp-header-inner{min-height:72px;padding:10px 0}
  .jp-brand{font-size:26px}
  .jp-hero{padding:48px 0 84px}
  .jp-head,.section-intro{margin-bottom:38px}
  .button{min-height:54px;padding:14px 24px}
  .jp-service{grid-template-columns:auto minmax(0,1fr);padding:24px 22px;gap:16px 20px}
  .jp-service .jp-price{grid-column:2}
  .jp-icon{width:56px;height:56px;font-size:20px}
  .layout-kacheln .jp-service{grid-template-columns:minmax(0,1fr)}
  .layout-kacheln .jp-service .jp-price{grid-column:auto}
  .jp-facts{grid-template-columns:minmax(0,1fr)}
  .jp-fact:last-child:nth-child(even):not(:first-child){grid-column:auto}
  .jp-fact{padding:28px 26px}
  .layout-liste .jp-facts{padding:6px 24px}
  .layout-gross .jp-projects,.layout-liste .jp-project{grid-template-columns:minmax(0,1fr)}
  .layout-liste .jp-project{gap:20px}
  .layout-liste .jp-project-body{padding:0 8px 10px}
  .layout-vollbild .jp-hero{min-height:min(86svh,620px);padding:110px 0 60px}
  .jp-hero-media img{max-height:440px}
  .jp-feature,.jp-step,.jp-station{padding:28px 24px}
  .layout-liste .jp-features{padding:4px 24px}
  .layout-liste .jp-feature{grid-template-columns:minmax(0,1fr);gap:8px}
  .layout-vertikal .jp-steps{padding-left:76px}
  .layout-vertikal .jp-steps::before{left:24px}
  .layout-vertikal .jp-step-no{left:-76px;min-width:48px;height:48px;font-size:20px}
  .jp-voice{padding:34px 26px 28px}
  .layout-liste .jp-voice{padding:30px 26px}
  .jp-quote{padding:40px 28px 34px}
  .jp-cta{padding:44px 28px}
  .jp-contact{padding:32px 22px}
  .jp-timeline{padding-left:30px}
  .jp-timeline::before{left:6px}
  .jp-station::before{left:-31px;width:13px;height:13px}
  .layout-spalten .jp-timeline{grid-template-columns:minmax(0,1fr)}
  .jp-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .jp-logo{min-height:96px;padding:18px}
  .jp-logo-name{font-size:19px}
  .layout-reihe .jp-logos{justify-content:center;gap:16px 32px}
  .jp-profile-media .jp-empty{font-size:110px}
  .jp-footer{padding-top:68px}
  .jp-footer-grid{grid-template-columns:minmax(0,1fr);gap:36px}
}