/* ============================================================
   JAN HOFER CONSULT — Design System
   Farben & Stil: Flyer "JHC Edition I"
   Inhalte: janhofer.at
   ============================================================ */

:root{
  --jhc-teal:        #0E5A5C;
  --jhc-teal-soft:   #14787B;
  --jhc-teal-deep:   #0A4446;
  --jhc-orange:      #F08A1C;
  --jhc-orange-deep: #E5701A;
  --jhc-ink:         #0F2A2E;
  --jhc-ink-muted:   #4A5B5E;
  --jhc-line:        #D9D2C2;
  --jhc-cream:       #F6EFE2;
  --jhc-paper:       #FBF7EE;
  --jhc-white:       #FFFFFF;

  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --max:    1280px;
  --gutter: 2rem;
  --section-gap: 6rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* === RESET === */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--jhc-ink);
  background:var(--jhc-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img, svg{ max-width:100%; display:block; }
a{ color:var(--jhc-teal); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--jhc-orange); }
ul{ list-style:none; }
button{ font:inherit; border:0; background:none; cursor:pointer; color:inherit; }
input, textarea{ font:inherit; color:inherit; }
::selection{ background:var(--jhc-orange); color:var(--jhc-white); }

/* === FOCUS === */
:focus-visible{
  outline:3px solid var(--jhc-orange);
  outline-offset:3px;
  border-radius:4px;
}

/* === LAYOUT === */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section{
  padding:var(--section-gap) 0;
  border-top:1px solid var(--jhc-line);
}
.section--no-border{ border-top:0; }

/* === TYPOGRAPHY === */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-teal);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}
.eyebrow::before{
  content:'';
  width:32px;
  height:2px;
  background:var(--jhc-orange);
}
.eyebrow--ink{ color:var(--jhc-ink); }
.eyebrow--orange{ color:var(--jhc-orange); }
.eyebrow--cream{ color:var(--jhc-cream); }

.display-h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(3rem, 8vw, 6.5rem);
  line-height:.95;
  letter-spacing:-.04em;
  color:var(--jhc-ink);
  margin:1.25rem 0;
}
.display-h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 4.5vw, 3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--jhc-ink);
}
.display-h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--jhc-ink);
}
.lead{
  font-size:clamp(1.125rem, 1.4vw, 1.25rem);
  line-height:1.55;
  color:var(--jhc-ink);
  font-weight:500;
}
.muted{ color:var(--jhc-ink-muted); }
.hl{
  background:linear-gradient(
    90deg,
    var(--jhc-orange-deep) 0%,
    var(--jhc-orange) 50%,
    #F5A623 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hl-soft{ color:var(--jhc-teal-soft); }
.mono{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
}
p + p{ margin-top:1rem; }

/* ============================================================
   HEADER — kompakt, sticky, feste Höhe
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:84px;
  background:var(--jhc-paper);
  border-top:4px solid var(--jhc-orange);
  border-bottom:1px solid var(--jhc-line);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.site-header__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--jhc-ink);
}
.brand__mark{
  height:44px;
  width:auto;
  flex-shrink:0;
  display:block;
}
.brand__name{
  font-weight:700;
  font-size:1.05rem;
  line-height:1;
  color:var(--jhc-ink);
}
.brand__sub{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-teal);
  margin-top:.3rem;
}

.site-nav__list{
  display:flex;
  gap:2rem;
  align-items:center;
  list-style:none;
}
.site-nav__list a{
  display:block;
  padding:.5rem 0;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:500;
  color:var(--jhc-ink);
  position:relative;
  transition:color .2s ease;
}
.site-nav__list a:hover{ color:var(--jhc-teal); }
.site-nav__list a[aria-current="page"]{ color:var(--jhc-ink); }
.site-nav__list a[aria-current="page"]::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:3px;
  background:var(--jhc-orange);
}

/* Burger */
.burger{
  display:none;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  cursor:pointer;
}
.burger span{
  display:block;
  width:22px; height:2px;
  background:var(--jhc-ink);
  transition:transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:768px){
  .site-header{ height:72px; }
  .brand__mark{ height:36px; }
  .brand__sub{ display:none; }
  .burger{ display:flex; }
  .site-nav__list{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(85vw, 360px);
    background:var(--jhc-paper);
    border-left:1px solid var(--jhc-line);
    flex-direction:column;
    gap:0;
    padding:5rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:-20px 0 60px -30px rgba(15,42,46,.3);
    z-index:99;
  }
  .site-nav__list.open{ transform:translateX(0); }
  .site-nav__list a{
    padding:1rem 0;
    font-size:1.1rem;
    border-bottom:1px solid var(--jhc-line);
  }
  .site-nav__list a[aria-current="page"]::after{ display:none; }
  .site-nav__list a[aria-current="page"]{ color:var(--jhc-orange); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(240,138,28,.10), transparent 60%),
    radial-gradient(800px 420px at -10% 95%, rgba(14,90,92,.10), transparent 55%),
    var(--jhc-paper);
}
.hero__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(4rem, 8vw, 7rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  display:grid;
  grid-template-columns: 8fr 4fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.hero__divider{
  border-left:2px solid var(--jhc-teal);
  padding-left:1.75rem;
  margin-top:2rem;
}
.hero__divider .lead{ max-width:38ch; margin-bottom:1.5rem; }
.hero__since{
  margin-top:1.5rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
}
.hero__since::before{
  content:'';
  width:28px; height:2px;
  background:var(--jhc-orange);
}
.hero__since b{ color:var(--jhc-orange); font-weight:600; }
.hero__cta{ margin-top:1.75rem; }

@media (max-width:880px){
  .hero__inner{ grid-template-columns:1fr; gap:2rem; }
  .hero__divider{ margin-top:0; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 1.75rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.btn--primary{
  background:linear-gradient(135deg, var(--jhc-orange) 0%, var(--jhc-orange-deep) 100%);
  color:var(--jhc-white) !important;
  box-shadow:0 12px 28px -10px rgba(240,138,28,.55);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(240,138,28,.7);
}
.btn--primary::after{
  content:'→';
  font-weight:700;
  transition:transform .2s ease;
}
.btn--primary:hover::after{ transform:translateX(4px); }

.btn--ghost{
  background:transparent;
  color:var(--jhc-teal) !important;
  border:1.5px solid var(--jhc-teal);
}
.btn--ghost:hover{ background:var(--jhc-teal); color:var(--jhc-cream) !important; }

.btn--mono{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  background:none;
  color:var(--jhc-orange) !important;
  padding:.5rem 0;
  border-bottom:2px solid var(--jhc-orange);
  border-radius:0;
}
.btn--mono:hover{ color:var(--jhc-orange-deep) !important; transform:translateX(4px); }

/* ============================================================
   ABOUT-Sektion (Home)
   ============================================================ */
.about{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.about__head .display-h2{ margin:.75rem 0 1rem; }
@media (max-width:880px){
  .about{ grid-template-columns:1fr; gap:2.5rem; }
}

/* Termynal Code-Block */
.code-block{
  background:var(--jhc-ink);
  color:var(--jhc-cream);
  border-radius:var(--radius-md);
  padding:1.5rem 1.75rem 2rem;
  font-family:var(--font-mono);
  font-size:.95rem;
  line-height:1.9;
  box-shadow:0 30px 70px -30px rgba(15,42,46,.5);
  position:relative;
  overflow:hidden;
}
.code-block::before{
  content:'• • •';
  display:block;
  letter-spacing:.4em;
  color:rgba(246,239,226,.35);
  margin-bottom:1rem;
  font-size:1rem;
}
.code-block__line{ display:block; }
.code-block__prompt{ color:var(--jhc-orange); margin-right:.5rem; }
.code-block__progress{ color:var(--jhc-teal-soft); }
.code-block a{ color:var(--jhc-orange); border-bottom:1px solid rgba(240,138,28,.4); }
.code-block a:hover{ color:var(--jhc-white); }

/* ============================================================
   SERVICES TEASER (Home)
   ============================================================ */
.teaser{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.pull-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.25;
  color:var(--jhc-ink);
  border-left:3px solid var(--jhc-orange);
  padding-left:1.75rem;
}
.pull-quote::before{ content:'„'; color:var(--jhc-orange); margin-right:.1em; }
.pull-quote::after{ content:'"'; color:var(--jhc-orange); margin-left:.1em; }
.pull-quote footer{
  margin-top:1.5rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-style:normal;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-teal);
}
.teaser__body .display-h2{ margin:.75rem 0 1rem; }
.teaser__body p{ color:var(--jhc-ink-muted); margin-top:1rem; }
.teaser__cta{ margin-top:1.75rem; }
@media (max-width:880px){
  .teaser{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ============================================================
   PAGE INTRO (Sub-Pages)
   ============================================================ */
.page-intro{
  padding:clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
}
.page-intro__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:end;
}
.page-intro__lead{
  color:var(--jhc-ink-muted);
  font-size:1.125rem;
  max-width:50ch;
}
@media (max-width:880px){
  .page-intro__inner{ grid-template-columns:1fr; gap:1.5rem; }
}

/* ============================================================
   SERVICES — Detail-Blöcke
   ============================================================ */
.service{
  border-top:1px solid var(--jhc-line);
  padding:6rem 0;
}
.service:last-of-type{ border-bottom:1px solid var(--jhc-line); }
.service__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.service__num{
  width:96px; height:96px;
  border-radius:var(--radius-sm);
  background:var(--jhc-teal);
  color:var(--jhc-white);
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.05em;
  box-shadow:0 12px 30px -12px rgba(14,90,92,.55);
  margin-bottom:1.5rem;
}
.service__head .eyebrow{ margin-bottom:1rem; display:flex; }
.service__head .display-h3{ margin-bottom:1rem; }
.service__lead{
  font-weight:600;
  color:var(--jhc-ink);
  font-size:1.0625rem;
}
.service__body p{ color:var(--jhc-ink-muted); }
.service__list{
  margin-top:1.75rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem 2rem;
}
.service__list li{
  position:relative;
  padding-left:1.5rem;
  font-size:.95rem;
  color:var(--jhc-ink);
}
.service__list li::before{
  content:'';
  position:absolute;
  left:0; top:.55rem;
  width:8px; height:8px;
  background:var(--jhc-orange);
}
.service__cta{ margin-top:2rem; }

@media (max-width:880px){
  .service{ padding:4rem 0; }
  .service__inner{ grid-template-columns:1fr; gap:1.5rem; }
  .service__num{ width:72px; height:72px; font-size:1.25rem; }
  .service__list{ grid-template-columns:1fr; }
}

/* ============================================================
   CTA-BANNER (großer Abschluss-Block)
   ============================================================ */
.cta-banner{
  background:var(--jhc-teal);
  color:var(--jhc-cream);
  border-radius:var(--radius-lg);
  padding:clamp(2.5rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(14,90,92,.45);
}
.cta-banner__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.75rem, 3.5vw, 2.75rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--jhc-cream);
}
.cta-banner__title em{ color:var(--jhc-orange); font-style:normal; }
.cta-banner__sub{
  margin-top:.75rem;
  color:rgba(246,239,226,.75);
  max-width:42ch;
}
.cta-banner .btn--primary,
.cta-banner .btn--primary:hover{ box-shadow:none; }
@media (max-width:760px){
  .cta-banner{ grid-template-columns:1fr; }
}

/* ============================================================
   STORY / ABOUT-PAGE
   ============================================================ */
.story{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.story__lead{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--jhc-ink);
  border-left:3px solid var(--jhc-teal);
  padding-left:1.5rem;
}
.story__body p{ color:var(--jhc-ink-muted); }
@media (max-width:880px){
  .story{ grid-template-columns:1fr; gap:2rem; }
}

/* Werte-Cards */
.values{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
}
.value-card{
  background:var(--jhc-cream);
  border:1px solid var(--jhc-line);
  border-radius:var(--radius-md);
  padding:1.75rem 1.5rem;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.value-card:hover{
  transform:translateY(-4px);
  border-color:var(--jhc-teal);
  box-shadow:0 18px 40px -20px rgba(14,90,92,.25);
}
.value-card__dot{
  width:12px; height:12px;
  border-radius:50%;
  margin-bottom:1rem;
}
.value-card:nth-child(1) .value-card__dot{ background:var(--jhc-teal); }
.value-card:nth-child(2) .value-card__dot{ background:var(--jhc-teal); }
.value-card:nth-child(3) .value-card__dot{ background:var(--jhc-orange); }
.value-card:nth-child(4) .value-card__dot{ background:var(--jhc-orange-deep); }
.value-card__title{
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-ink);
  margin-bottom:.5rem;
}
.value-card__sub{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-teal);
  margin-bottom:1rem;
}
.value-card__text{
  font-size:.95rem;
  color:var(--jhc-ink-muted);
  line-height:1.6;
}
@media (max-width:880px){
  .values{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .values{ grid-template-columns:1fr; }
}

/* ============================================================
   KONTAKT-PAGE
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns: 7fr 5fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.contact-form{ display:flex; flex-direction:column; gap:2rem; }
.field{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.field label{
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-teal);
}
.field input,
.field textarea{
  background:transparent;
  border:0;
  border-bottom:1.5px solid var(--jhc-line);
  padding:.75rem 0;
  font-size:1.0625rem;
  color:var(--jhc-ink);
  transition:border-color .2s ease;
  font-family:var(--font-body);
  outline:none;
}
.field input:focus,
.field textarea:focus{
  border-bottom-color:var(--jhc-orange);
}
.field textarea{ resize:vertical; min-height:120px; }
.contact-form__submit{
  align-self:flex-start;
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--jhc-white);
  background:linear-gradient(135deg, var(--jhc-orange) 0%, var(--jhc-orange-deep) 100%);
  padding:1rem 1.75rem;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 28px -10px rgba(240,138,28,.55);
}
.contact-form__submit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(240,138,28,.7);
}

/* Direktkontakt-Spalte */
.direct{
  background:var(--jhc-cream);
  border:1px solid var(--jhc-line);
  border-radius:var(--radius-md);
  padding:2rem;
}
.direct__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  margin:1rem 0 1.5rem;
}
.direct__mail{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.25rem, 2vw, 1.625rem);
  color:var(--jhc-ink);
  word-break:break-word;
  letter-spacing:-.01em;
  margin-bottom:1rem;
  border-bottom:2px solid var(--jhc-orange);
  padding-bottom:.5rem;
  width:fit-content;
  max-width:100%;
}
.direct__mail:hover{ color:var(--jhc-orange); }
.direct__list{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.95rem;
}
.direct__list a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--jhc-teal);
  font-weight:500;
}
.direct__list a:hover{ color:var(--jhc-orange); }
.direct__sla{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--jhc-line);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
}

@media (max-width:880px){
  .contact{ grid-template-columns:1fr; gap:2.5rem; }
}

/* Erfolgs-Container nach AJAX-Submit */
.kontakt-success{
  padding:3rem 2rem;
  border:1px solid var(--jhc-line);
  background:var(--jhc-paper);
  border-radius:4px;
}

/* ============================================================
   AGB — Rechts-Text-Blöcke
   ============================================================ */
.agb-block + .agb-block{
  margin-top:4rem;
}
.agb-text p{
  margin-bottom:1rem;
}
.agb-text ol,
.agb-text ul{
  margin:1rem 0 1rem 1.5rem;
}
.agb-text ol li,
.agb-text ul li{
  margin-bottom:.5rem;
}
.agb-text strong{
  color:var(--jhc-ink);
  font-weight:600;
}
.agb-text a{
  color:var(--jhc-teal);
  border-bottom:1px solid var(--jhc-orange);
}
.agb-text a:hover{
  color:var(--jhc-orange);
}
.agb-text table{
  border-collapse:collapse;
  width:100%;
  margin:1.5rem 0;
  font-size:.95rem;
}
.agb-text th,
.agb-text td{
  border:1px solid var(--jhc-line);
  padding:.75rem 1rem;
  text-align:left;
}
.agb-text th{
  background:var(--jhc-cream);
  font-weight:600;
  color:var(--jhc-ink);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* Footer-Link (z.B. AGB) im rechten Footer-Bereich */
.site-footer__link{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-cream);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.site-footer__link:hover{
  color:var(--jhc-orange);
  border-bottom-color:var(--jhc-orange);
}

/* ============================================================
   IMPRESSUM
   ============================================================ */
.legal{
  max-width:720px;
  margin:0 auto;
  padding:0 var(--gutter);
}
.legal-block{
  border-top:1px solid var(--jhc-line);
  padding:1.75rem 0;
}
.legal-block:last-child{ border-bottom:1px solid var(--jhc-line); }
.legal-block__label{
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-teal);
  margin-bottom:.5rem;
}
.legal-block__value{
  font-size:1.125rem;
  color:var(--jhc-ink);
  font-weight:500;
}
.legal-block__value a{ border-bottom:1px solid var(--jhc-orange); }
.legal-note{
  margin-top:2rem;
  padding:1.5rem;
  background:var(--jhc-cream);
  border-radius:var(--radius-md);
  font-size:.95rem;
  color:var(--jhc-ink-muted);
  line-height:1.6;
}

/* ============================================================
   STATUS-DOTS-ZEILE (über Footer)
   ============================================================ */
.status-dots{
  background:var(--jhc-cream);
  border-top:1px solid var(--jhc-line);
  border-bottom:1px solid var(--jhc-line);
}
.status-dots__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:2.5rem var(--gutter);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.status-dot{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding-left:1.25rem;
  position:relative;
}
.status-dot::before{
  content:'';
  position:absolute;
  left:0; top:.4rem;
  width:10px; height:10px;
  border-radius:50%;
}
.status-dot:nth-child(1)::before{ background:var(--jhc-teal); }
.status-dot:nth-child(2)::before{ background:var(--jhc-teal); }
.status-dot:nth-child(3)::before{ background:var(--jhc-orange); }
.status-dot:nth-child(4)::before{ background:var(--jhc-orange-deep); }
.status-dot__title{
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-ink);
}
.status-dot__sub{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
}
@media (max-width:760px){
  .status-dots__inner{ grid-template-columns:repeat(2, 1fr); gap:1.25rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--jhc-teal);
  color:var(--jhc-cream);
  border-top:4px solid var(--jhc-orange);
}
.site-footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1.75rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.site-footer a{ color:var(--jhc-cream); }
.site-footer a:hover{ color:var(--jhc-orange); }
.site-footer__left b{ color:var(--jhc-orange); font-weight:600; margin-right:.5rem; }
.site-footer__right{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
/* Trenner-Punkte zwischen Footer-Items */
.site-footer__right > * + *::before{
  content:"·";
  margin-right:1rem;
  color:var(--jhc-cream);
  opacity:.5;
}
.site-footer__right > .site-footer__social::before{
  content:none;
}
@media (max-width:600px){
  .site-footer__right{ gap:.75rem; font-size:.8rem; }
  .site-footer__right > * + *::before{ margin-right:.75rem; }
}
.site-footer__social{
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.site-footer__social:hover{
  background:var(--jhc-orange);
  transform:translateY(-2px);
}
.site-footer__social svg{ width:14px; height:14px; fill:var(--jhc-cream); }
@media (max-width:600px){
  .site-footer__inner{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   SECTION-HEAD (Eyebrow links, italic rechts)
   ============================================================ */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}
.section-head__right{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--jhc-ink-muted);
  font-size:1.125rem;
}

/* ============================================================
   REFERENZEN — Karten-Galerie
   ============================================================ */
.refs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
}
.ref-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:transparent;
  border:1px solid var(--jhc-line);
  border-radius:6px;
  padding:1.5rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ref-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(15,42,46,.08);
  border-color:var(--jhc-teal);
}
.ref-card__shot-link{
  display:block;
  text-decoration:none;
  cursor:pointer;
}
.ref-card__shot{
  position:relative;
  aspect-ratio:16/10;
  background:var(--jhc-cream);
  border:1px solid var(--jhc-line);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  place-items:center;
  transition:border-color .25s ease;
}
.ref-card:hover .ref-card__shot{
  border-color:var(--jhc-teal);
}
.ref-card__shot img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top left;
  display:block;
  transition:transform .5s ease;
}
.ref-card:hover .ref-card__shot img{
  transform:scale(1.04);
}
/* Karten-spezifische Bild-Position */
.ref-card__shot--center img{
  object-position:center;
}
.ref-card__placeholder{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
}
.ref-card__body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding-top:.25rem;
}
.ref-card__category{
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--jhc-teal);
}
.ref-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.375rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--jhc-ink);
}
.ref-card__text{
  color:var(--jhc-ink-muted);
  font-size:.95rem;
  line-height:1.6;
}
.ref-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .25rem;
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jhc-ink-muted);
  margin-top:.25rem;
}
.ref-card__tag{ display:inline-flex; align-items:center; }
.ref-card__tag + .ref-card__tag::before{
  content:'·';
  margin:0 .6em;
  color:var(--jhc-orange);
}
.ref-card__link{
  margin-top:.75rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--jhc-orange);
  align-self:flex-start;
  border-bottom:2px solid var(--jhc-orange);
  padding-bottom:.25rem;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.ref-card__link:hover{
  color:var(--jhc-orange-deep);
  border-bottom-color:var(--jhc-orange-deep);
  transform:translateX(4px);
}
@media (max-width:768px){
  .refs-grid{ grid-template-columns:1fr; gap:2rem; }
}

/* ============================================================
   STEPS — Arbeitsweise (4-Spalten-Liste mit 64×64-Badges)
   ============================================================ */
.steps{ display:flex; flex-direction:column; }
.step{
  display:grid;
  grid-template-columns:80px 1.1fr 1fr;
  gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid var(--jhc-line);
  align-items:center;
  transition:background .25s ease;
}
.step:first-child{ border-top:1px solid var(--jhc-line); }
.step:hover{ background:rgba(20,120,123,.04); }
.step__num{
  width:64px; height:64px;
  border-radius:8px;
  background:var(--jhc-teal);
  color:var(--jhc-white);
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.05em;
  box-shadow:0 8px 18px -10px rgba(14,90,92,.55);
  transition:background .25s ease, transform .25s ease;
}
.step:hover .step__num{
  background:var(--jhc-orange);
  transform:rotate(-4deg);
}
.step__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--jhc-ink);
}
.step__title em{ color:var(--jhc-teal-soft); font-style:normal; }
.step__text{
  color:var(--jhc-ink-muted);
  font-size:1rem;
  line-height:1.6;
  max-width:48ch;
}
@media (max-width:880px){
  .step{ grid-template-columns:64px 1fr; gap:1.5rem; padding:1.75rem 0; }
  .step__text{ grid-column:1/-1; padding-left:80px; }
}
@media (max-width:520px){
  .step__text{ padding-left:0; }
  .step__num{ width:52px; height:52px; font-size:.9rem; }
}

/* ============================================================
   UTIL
   ============================================================ */
.text-center{ text-align:center; }
.mt-1{ margin-top:1rem; }
.mt-2{ margin-top:2rem; }
.mt-3{ margin-top:3rem; }

/* Erzwungener Zeilenumbruch nur ab 768px */
.desktop-only{ display:inline; }
@media (max-width:768px){
  .desktop-only{ display:none; }
}

/* ============================================================
   COOKIE-BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;
  bottom:1rem;
  left:1rem;
  right:1rem;
  max-width:720px;
  margin:0 auto;
  z-index:200;
  padding:1.25rem 1.5rem;
  background:var(--jhc-ink);
  color:var(--jhc-paper);
  border-radius:6px;
  box-shadow:0 12px 32px rgba(0,0,0,0.22);
  font-size:.9rem;
  line-height:1.5;
}
.cookie-banner__title{
  display:block;
  font-family:'Inter Tight', sans-serif;
  font-weight:700;
  font-size:1rem;
  margin-bottom:.5rem;
  color:var(--jhc-paper);
}
.cookie-banner__text p{
  margin:0;
  color:var(--jhc-cream);
}
.cookie-banner__text a{
  color:var(--jhc-orange);
  text-decoration:underline;
}
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
  justify-content:flex-end;
}
.cookie-btn{
  padding:.55rem 1rem;
  border:1px solid transparent;
  border-radius:3px;
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  transition:all .15s ease;
}
.cookie-btn--primary{
  background:var(--jhc-orange);
  color:var(--jhc-ink);
}
.cookie-btn--primary:hover{
  background:var(--jhc-orange-deep);
}
.cookie-btn--ghost{
  background:transparent;
  color:var(--jhc-cream);
  border-color:rgba(246,239,226,.3);
}
.cookie-btn--ghost:hover{
  border-color:var(--jhc-cream);
  color:var(--jhc-paper);
}
.cookie-banner__details{
  margin-top:.5rem;
}
.cookie-category{
  padding:1rem 0;
  border-top:1px solid rgba(246,239,226,.15);
}
.cookie-category:last-of-type{
  border-bottom:1px solid rgba(246,239,226,.15);
  margin-bottom:1rem;
}
.cookie-category__head{
  display:flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
}
.cookie-category__check{
  width:16px;
  height:16px;
  accent-color:var(--jhc-orange);
  cursor:pointer;
}
.cookie-category__check:disabled{
  cursor:not-allowed;
  opacity:.6;
}
.cookie-category__name{
  font-weight:600;
  color:var(--jhc-paper);
}
.cookie-category__status{
  margin-left:auto;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  color:var(--jhc-cream);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.cookie-category__desc{
  margin:.5rem 0 0 1.6rem;
  color:var(--jhc-cream);
  font-size:.85rem;
}
.cookie-reopen{
  position:fixed;
  bottom:1rem;
  left:1rem;
  z-index:150;
  padding:.4rem .75rem;
  background:var(--jhc-ink);
  color:var(--jhc-paper);
  border:none;
  border-radius:3px;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s ease;
}
.cookie-reopen:hover{
  opacity:1;
}
@media (max-width:600px){
  .cookie-banner{
    bottom:.5rem;
    left:.5rem;
    right:.5rem;
    padding:1rem;
    font-size:.85rem;
  }
  .cookie-banner__actions{
    justify-content:stretch;
  }
  .cookie-btn{
    flex:1;
    min-width:0;
  }
  .cookie-reopen{
    bottom:.5rem;
    left:.5rem;
  }
}