:root{
  --pink:#e60050;
  --grey:#626d72;
  --black:#111;
  --line:#d9dcdd;
  --bg:#fff;
  --pad:clamp(22px,5vw,76px);
  --max:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--grey);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--pink);outline-offset:5px}
.shell{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto}
header{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;
  gap:28px;border-bottom:1px solid var(--line)
}
.brand{font-weight:700;font-size:17px;color:var(--grey);letter-spacing:-.02em}
.brand span{color:var(--grey);font-weight:400}
nav{display:flex;gap:clamp(14px,2.5vw,34px);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.hero{min-height:auto;display:flex;align-items:center;padding:clamp(72px,9vh,110px) 0 clamp(78px,10vh,120px)}
.hero h1{margin:0;color:var(--grey);font-size:clamp(44px,6.4vw,88px);line-height:.9;letter-spacing:-.055em;font-weight:700}
.hero h1 span{display:block;color:var(--grey);margin-top:20px;font-size:clamp(16px,1.55vw,22px);line-height:1.25;letter-spacing:0;font-weight:400}
.section{border-top:1px solid var(--line);padding:clamp(42px,5vw,72px) 0}
.split{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.25fr);gap:clamp(34px,7vw,110px)}
.label{margin:0;color:var(--pink);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.lead{margin:0;max-width:1050px;color:var(--grey);font-size:clamp(23px,2.8vw,38px);line-height:1.09;letter-spacing:-.035em}
.skills{margin:38px 0 0;max-width:1000px;font-size:clamp(16px,1.7vw,23px);line-height:1.55}
.team{margin-top:34px;font-size:14px}
.team a,.contact a,.legal a{text-decoration:underline;text-underline-offset:.2em}
.pagehero{padding:clamp(54px,7vw,90px) 0 clamp(38px,5vw,65px)}
.pagehero h1,.legal h1{margin:0;color:var(--grey);font-size:clamp(38px,5.5vw,68px);line-height:.9;letter-spacing:-.05em;font-weight:700}
.contactgrid{border-top:1px solid var(--line);padding:clamp(55px,7vw,90px) 0;display:grid;grid-template-columns:1fr 2fr;gap:50px}
.contactgrid p{margin:0 0 18px;font-size:clamp(18px,2vw,28px);line-height:1.5}
.contactgrid .small{font-size:14px;line-height:1.65}
.legal{padding:clamp(52px,6vw,82px) 0}
.legal h1{margin-bottom:70px}
.legal h2{margin:52px 0 14px;color:var(--pink);font-size:21px}
.legal h3{margin:30px 0 10px;color:var(--grey);font-size:16px}
.legal p,.legal li{max-width:900px;font-size:15px;line-height:1.7}
footer{border-top:1px solid var(--line);padding:24px 0 36px;font-size:11px}
.footerrow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footerlinks{display:flex;gap:22px;flex-wrap:wrap}
@media(max-width:700px){
  header{padding:20px 0;align-items:flex-start;flex-direction:column}
  nav{width:100%;justify-content:space-between;gap:10px;font-size:10px}
  .hero{min-height:auto;padding:58px 0 70px}
  .split,.contactgrid{grid-template-columns:1fr;gap:28px}
  .legal h1{margin-bottom:45px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero .hero-pink{color:var(--pink)}

/* Compact editorial refinement */
header{min-height:64px}
.brand{font-size:15px;font-weight:400;color:var(--grey)}
.brand strong{color:var(--pink);font-weight:700}
.brand span{font-weight:400;color:var(--grey)}

.hero{min-height:auto;padding:clamp(54px,7vh,82px) 0 clamp(62px,8vh,94px)}
.hero h1{
  color:var(--grey);
  font-size:clamp(40px,5.1vw,72px);
  line-height:.94;
  letter-spacing:-.05em;
  font-weight:700
}
.hero h1 .hero-pink{
  display:inline;
  color:var(--pink);
  margin:0;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-weight:inherit
}
.hero h1 > span:last-child{
  display:block;
  color:var(--grey);
  margin-top:18px;
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.35;
  letter-spacing:0;
  font-weight:400
}

.section{padding:clamp(36px,4.5vw,62px) 0}
.lead{
  max-width:820px;
  font-size:clamp(20px,2.25vw,31px);
  line-height:1.18;
  letter-spacing:-.025em
}
.skills{
  margin-top:24px;
  max-width:900px;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.6
}
.team{margin-top:24px;font-size:13px}
.label{font-size:10px}
.pagehero h1,.legal h1{font-size:clamp(36px,4.8vw,62px)}
.contactgrid p{font-size:clamp(16px,1.4vw,20px)}
.legal p,.legal li{font-size:14px}
@media(max-width:700px){
  .hero h1{font-size:clamp(38px,13vw,56px)}
  .lead{font-size:21px}
}

/* v4 — compact fixed editorial rhythm */
.brand{font-size:15px;line-height:1}
.brand strong,.brand span{font-size:inherit;line-height:inherit}
.brand strong{font-weight:700;color:var(--pink)}
.brand span{font-weight:400;color:var(--grey)}

body{font-size:14px}
header{height:64px;min-height:64px}

.hero{
  padding:clamp(44px,6vh,68px) 0 clamp(48px,6vh,72px);
}
.hero h1{
  font-size:clamp(38px,4.6vw,64px);
  line-height:.96;
}
.hero h1 > span:last-child{
  margin-top:14px;
  font-size:clamp(13px,1vw,16px);
}
.section{padding:clamp(30px,3.6vw,50px) 0}
.label{font-size:12px;letter-spacing:.11em}
.lead{
  max-width:720px;
  font-size:clamp(16px,1.55vw,22px);
  line-height:1.28;
  letter-spacing:-.015em;
}
.skills{
  max-width:820px;
  margin-top:18px;
  font-size:13px;
  line-height:1.55;
}
.team{margin-top:18px;font-size:12px}

/* Home and contact use the same compact page geometry */
body:has(.hero), body:has(.pagehero){
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body:has(.hero) main, body:has(.pagehero) main{flex:1}
body:has(.hero) footer, body:has(.pagehero) footer{margin-top:auto}

.pagehero{
  padding:clamp(44px,6vh,68px) 0 clamp(34px,4vh,48px);
}
.pagehero h1{font-size:clamp(34px,4vw,54px)}
.contactgrid{
  padding:clamp(30px,3.6vw,50px) 0;
  grid-template-columns:minmax(180px,1fr) minmax(0,2.25fr);
  gap:clamp(34px,7vw,110px);
  align-items:start;
}
.contactgrid .label,
.contactgrid .contact{padding-top:0}
.contactgrid p{font-size:14px;line-height:1.5;margin:0 0 12px}
.contactgrid .small{font-size:12px;line-height:1.55}

@media(min-width:701px){
  body:has(.hero),body:has(.pagehero){overflow-x:hidden}
}
@media(max-width:700px){
  .contactgrid{grid-template-columns:1fr;gap:18px}
  .hero h1{font-size:42px}
  .lead{font-size:18px}
}

/* v5 */
.label{font-size:15px;line-height:1;font-weight:700}

/* v6 — unified secondary typography */
:root{--secondary-size:17px}

/* Header mark + descriptor */
.brand,
.brand strong,
.brand span{
  font-size:var(--secondary-size);
}

/* Hero subline */
.hero h1 > span:last-child{
  font-size:var(--secondary-size);
}

/* Intro copy */
.lead{
  font-size:var(--secondary-size);
  line-height:1.45;
  letter-spacing:0;
  max-width:780px;
}

/* A–Z same size */
.label{
  font-size:var(--secondary-size);
}

/* Service list remains the smallest text level */
.skills{
  font-size:13px;
  line-height:1.55;
}

@media(max-width:700px){
  :root{--secondary-size:16px}
  .lead{font-size:var(--secondary-size)}
}

/* v7 — strict shared grid and optical top alignment */
:root{
  --grid-left:minmax(150px,1fr);
  --grid-right:minmax(0,2.25fr);
  --grid-gap:clamp(34px,7vw,110px);
}

/* Every two-column content block uses exactly the same grid */
.split,
.contactgrid{
  display:grid;
  grid-template-columns:var(--grid-left) var(--grid-right);
  column-gap:var(--grid-gap);
  align-items:start;
}

/* Left labels stay on the grid top */
.split > :first-child,
.contactgrid > :first-child{
  align-self:start;
  padding-top:0;
}

/* Right-hand content gets the same subtle optical drop everywhere */
.split > :nth-child(2),
.contactgrid > :nth-child(2){
  align-self:start;
  padding-top:4px;
}

/* Keep label metrics predictable */
.label{
  margin:0;
  line-height:1.2;
}

/* Contact copy follows the same baseline logic */
.contactgrid .contact{
  padding-top:4px;
}

/* Legal text: headings remain on their own flow; text spacing is consistent */
.legal h2 + p,
.legal h3 + p{
  margin-top:8px;
}

@media(max-width:700px){
  .split,.contactgrid{
    grid-template-columns:1fr;
    row-gap:18px;
  }
  .split > :nth-child(2),
  .contactgrid > :nth-child(2),
  .contactgrid .contact{
    padding-top:0;
  }
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.contact-data{white-space:nowrap}

/* v9 — legal hierarchy + aligned secondary labels */
.contact-name,
.split .label{
  font-size:var(--secondary-size);
  text-transform:none;
  letter-spacing:0;
}

/* Impressum: red subheads slightly quieter than before */
.legal h2,
.legal h3{
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.25;
}

/* v10 — unified red-label hierarchy and stronger optical alignment */

/* All red labels/subheads share exactly the same responsive size:
   VON A–Z, Ursula Zeitz on contact, legal red subheads */
.split .label,
.contactgrid .label,
.contact-name,
.legal h2,
.legal h3{
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.25;
}

/* Preserve the requested casing */
.contact-name{
  text-transform:none;
  letter-spacing:0;
}

/* Right column sits visibly lower for optical alignment */
.split > :nth-child(2),
.contactgrid > :nth-child(2),
.contactgrid .contact{
  padding-top:10px;
}

@media(max-width:700px){
  .split > :nth-child(2),
  .contactgrid > :nth-child(2),
  .contactgrid .contact{
    padding-top:4px;
  }
}

/* v12 — final claim treatment */
.claim{font-weight:700}
.claim span:first-child{color:var(--pink)}
.claim span:last-child{color:var(--grey)}

/* v20 — only requested email emphasis; page geometry restored to pre-v17 state */
.contactgrid .contact-email{
  font-size:var(--secondary-size);
  font-weight:700;
  line-height:1.45;
}


/* v23 — prevent horizontal page jump caused by the vertical scrollbar */
html{
  overflow-y:scroll;
}


/* v24 — Impressum heading geometry exactly matches Kontakt.
   The legal content starts below the same horizontal divider. */
.legal-content{
  border-top:1px solid var(--line);
  padding:clamp(30px,3.6vw,50px) 0 clamp(52px,6vw,82px);
}
.legal-content h2:first-child{
  margin-top:0;
}


/* v25 — mobile header: reliable touch/click targets on iPhone */
@media (max-width:700px){
  header,
  .topbar,
  nav{
    position:relative;
    z-index:100;
  }

  nav{
    pointer-events:auto;
  }

  nav a{
    position:relative;
    z-index:101;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
}


/* v27 — alternative color hierarchy */
.split .label{
  color:var(--pink);
}

/* First bold claim on the homepage: black instead of pink */
.split .claim strong:first-child{
  color:var(--black);
}

/* Contact email: black */
.contact-email,
.contact-email .contact-data{
  color:var(--black);
}


/* v28 — corrected selectors, desktop AND mobile */
.claim span:first-child{
  color:var(--black);
}
.split .label{
  color:var(--pink);
}
.contactgrid .contact-email,
.contactgrid .contact-email .contact-data{
  color:var(--black);
}


/* v29 — legal pages: only the first small heading is red */
.legal h2,
.legal h3{
  color:var(--black);
}
.legal .legal-first-heading{
  color:var(--pink);
}