@font-face{font-family:Barlow;src:url(barlow-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Barlow;src:url(barlow-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(barlow-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(barlow-semibold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --magenta:#ff0098; --magenta-ink:#cc0079; --orange:#ff8500; --grey:#877a71;
  --steingrau:#7a6f6a; --ink:#3e3b38; --ink-soft:#8a7d74; --line:#e4ddd4;
  --alt:#ece6e1; --bg:#fff;
  --grad:linear-gradient(90deg,#ff8500 0%,#ff0098 100%);
  --grad-v:linear-gradient(180deg,#ff8500 0%,#ff0098 100%);
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
  --step-0:clamp(1.04rem,1rem + .22vw,1.16rem);
  --step-1:clamp(1.2rem,1.08rem + .5vw,1.45rem);
  --step-3:clamp(1.8rem,1.35rem + 2.1vw,2.6rem);
  --step-4:clamp(2.2rem,1.5rem + 3.4vw,3.7rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:400;font-size:var(--step-0);line-height:1.7;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(p,li,h1,h2,h3,blockquote,figcaption){overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(255,0,152,.38);border-radius:3px}
h1,h2,h3,p,ul{margin:0 0 1rem}
h1,h2{font-weight:300;line-height:1.1;letter-spacing:-.025em}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)}
h1 strong,h2 strong{font-weight:500}
h3{font-weight:500;font-size:var(--step-1);letter-spacing:-.01em;line-height:1.3;margin-bottom:.4rem}
.lead{font-weight:300;font-size:var(--step-1);line-height:1.5;color:#4c4844}
strong{font-weight:600}

.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:9}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.4rem,6vw,5rem)}
.section{padding-block:clamp(2.75rem,6.5vw,5rem)}
.section--alt{background:var(--alt)}
.section--dark{background:var(--steingrau);color:#f1ece8}
.section--dark .eyebrow{color:#fff}
.section--dark .eyebrow>i{background:var(--magenta)}

.statement__row{display:flex;align-items:center;justify-content:space-between;gap:2.5rem}
.statement__row .statement{flex:1 1 auto}

.deco-outline{flex:none;width:clamp(6rem,9vw,9.5rem);height:auto;color:rgba(255,255,255,.4);pointer-events:none}
@media(max-width:700px){.deco-outline{display:none}}
.measure{max-width:46rem}

/* Eyebrow = Linie + Label (Visitenkarten-Motiv) */
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;margin-bottom:1.3rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--ink)}
.eyebrow>i{flex:1 1 110px;order:-1;height:2px;background:var(--grey)}
.eyebrow--mag>i{background:var(--magenta)} .eyebrow--org>i{background:var(--orange)}
@media(max-width:600px){.eyebrow>i{flex-basis:100%}}

.hero{border-bottom:1px solid var(--line)}
.hero__grid{display:grid;gap:clamp(1.75rem,5vw,3.5rem);align-items:center}
@media(min-width:820px){.hero__grid{grid-template-columns:1.15fr .85fr}}
.hero__band{width:150px;height:2px;margin:1.2rem 0 2.1rem;background:var(--magenta)}
.hero img{border-radius:12px}
.focus{max-width:46rem;margin-top:1.2rem;font-weight:300;font-size:var(--step-1);
  line-height:1.5;color:#4c4844}
.focus strong{display:block;font-weight:600;color:var(--ink);margin-bottom:.15rem}

/* CTA = Versal-Text mit Linie darunter */
.btn{display:inline-block;font:600 .8rem/1.1 var(--font);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;color:var(--ink);position:relative;padding:0 0 .55rem;transition:color .18s}
.btn::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--magenta)}
.btn::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--magenta-ink);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.btn:hover,.btn:focus-visible{color:var(--magenta-ink)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn--org::before{background:var(--orange)} .btn--org::after{background:#d9720a}

/* Leistungen als nummerierte Linien-Zeilen */
.rows{counter-reset:row;margin-top:1.5rem}
.rows__item{counter-increment:row;position:relative;padding:1.6rem 0 1.7rem clamp(3.6rem,6vw,5rem);
  border:0}
.rows__item::before{content:counter(row,decimal-leading-zero);position:absolute;left:0;top:1.6rem;
  font-weight:300;font-size:1.9rem;line-height:1;color:var(--ink-soft)}
.rows__item::after{content:"";position:absolute;left:clamp(3.6rem,6vw,5rem);right:0;bottom:.7rem;
  height:2px;background:var(--grey)}
.rows__item:nth-child(2)::after{background:var(--magenta)}
.rows__item:nth-child(3)::after{background:var(--orange)}
.rows__item p{color:var(--ink-soft);margin:0;max-width:52ch}

/* Referenzen / Zitate */
.quotes{display:grid;gap:clamp(1.9rem,4vw,2.6rem);margin-top:1.6rem}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{position:relative;margin:0;padding-left:1.15rem}
.quote::before{content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:2px;background:var(--grad-v)}
.quote blockquote{margin:0 0 1rem;font-weight:300;font-size:.98rem;line-height:1.55;color:var(--ink)}
.quote figcaption{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.8rem;row-gap:.1rem}
.quote__avatar{grid-row:1/3;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--alt)}
.quote cite{grid-column:2;font-style:normal;font-weight:600;display:block;font-size:.92rem}
.quote span{grid-column:2;display:block;color:var(--ink-soft);font-size:.82rem;margin-top:.15rem}

/* Prominentes Zitat */
.statement{margin:0;max-width:40rem}
.statement blockquote{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.3;color:#fff;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.35rem)}

.contact-lines{list-style:none;padding:0;margin:1.4rem 0 0;font-size:var(--step-1);font-weight:300}
.contact-lines li{margin-bottom:.4rem}
.contact-lines a{text-decoration:none;background:var(--grad) 0 100%/100% 2px no-repeat;padding-bottom:1px}

/* Rechtstexte (recht.html) */
.legal{font-size:.94rem;color:#5f564f;line-height:1.65}
.legal h1{margin-bottom:1.4rem}
.legal h2{font-size:1.15rem;font-weight:600;letter-spacing:0;color:var(--ink);margin:2.2rem 0 .5rem}
.legal h3{font-size:.95rem;font-weight:600;margin:1.2rem 0 .2rem}
.legal a{background:var(--grad) 0 100%/100% 2px no-repeat;text-decoration:none;padding-bottom:1px}
.legal em{color:#948a83}
.legal .hint{background:#fbf1d8;border:1px solid #f0e2b8;border-radius:8px;padding:.75rem 1rem;color:#7a6a3a;
  font-size:.85rem;margin:.8rem 0 0}
.legal .back{display:inline-block;margin-top:2.4rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;background:none;padding-bottom:.4rem;position:relative}
.legal .back::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad)}

.site-foot{padding:2rem 0;font-size:.85rem;color:var(--ink-soft)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--magenta-ink)}

.brand img{height:60px;width:auto}
.topbar{padding:1.1rem 0;border-bottom:1px solid var(--line)}