/* Society Outsiders – Entwurf V5. Ein Stylesheet, drei Farben, sieben Schriftgrößen. */
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ink:#0B0B0C; --paper:#fff; --sig:#FF4D21; --sig-ink:#C8320C;
  --mute-d:#A6A6AB;            /* Nebentext auf Schwarz */
  --mute-l:#5C5C61;            /* Nebentext auf Weiß */
  --line-d:rgba(255,255,255,.18); --line-l:rgba(11,11,12,.16);
  --t-h1:clamp(2.375rem,4.9vw,4.25rem); --t-h2:clamp(1.75rem,3.1vw,2.75rem);
  --t-xl:1.75rem; --t-h3:1.375rem; --t-lead:clamp(1.0625rem,1.4vw,1.1875rem); --t-body:1rem; --t-small:.875rem;
  --pad:clamp(4.5rem,9vw,8rem); --gut:clamp(1.25rem,4vw,3rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ink);font:400 var(--t-body)/1.5 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1;letter-spacing:-.04em}
h2{font-size:var(--t-h2);line-height:1.05}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
strong{font-weight:500}
.lead{font-size:var(--t-lead);line-height:1.45}

.shell{width:100%;max-width:calc(80rem + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.zone{padding-block:var(--pad)}
.zone--ink{background:var(--ink);color:var(--paper)}
.zone--paper{background:var(--paper);color:var(--ink)}
.zone--sig{background:var(--sig);color:var(--ink)}
.zone--ink .lead,.zone--ink .head p{color:var(--mute-d)}
.zone--paper .head p{color:var(--mute-l)}

/* Abschnittskopf: Überschrift links, ein Satz rechts */
.head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.head p{font-size:var(--t-lead);line-height:1.45;max-width:34rem}

/* Knöpfe und Textlinks */
.btn{display:inline-flex;align-items:center;gap:.5rem;height:3rem;padding:0 1.375rem;border-radius:999px;font-weight:500;white-space:nowrap;transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn--sig{background:var(--sig);color:var(--ink)} .btn--sig:hover{background:var(--paper)}
.btn--paper{background:var(--paper);color:var(--ink)} .btn--paper:hover{background:var(--sig)}
.btn--line{border:1px solid rgba(255,255,255,.4);color:var(--paper)} .btn--line:hover{border-color:var(--paper)}
.btn--ink{background:var(--ink);color:var(--paper)} .btn--ink:hover{background:var(--paper);color:var(--ink)}
.arr{display:inline-block;transition:transform .2s var(--ease)}
a:hover>.arr,.post:hover .arr,.btn:hover .arr{transform:translateX(4px)}
.tl{font-weight:500;display:inline-flex;gap:.4rem;align-items:center}
.tl .arr{color:var(--sig)} .zone--paper .tl .arr{color:var(--sig-ink)}

/* Kopfzeile */
.zone--top{padding-top:0}
.top{display:flex;align-items:center;gap:2rem;height:5rem}
.logo{display:block;width:146px;height:40px;flex:none;background:currentColor;-webkit-mask:url(img/logo.svg) left center/contain no-repeat;mask:url(img/logo.svg) left center/contain no-repeat}
.nav{display:flex;gap:1.75rem;margin-inline:auto}
.nav a,.top__tel{color:var(--paper);transition:color .18s}
.nav a:hover,.top__tel:hover{color:var(--mute-d)}

/* Einstieg */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,7vw,6rem)}
.hero h1{max-width:11.5em}
.hero .lead{margin-top:1.75rem;max-width:33rem}
.hero__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero__note{margin-top:1.25rem;font-size:var(--t-small);color:var(--mute-d)}

.stack{display:grid;grid-template-columns:56% 44%;align-items:stretch}
.stack__svg{width:100%;height:auto;overflow:visible}
.pl{cursor:pointer;transition:transform .26s var(--ease),opacity .2s var(--ease)}
.pl__f--paper{fill:#fff} .pl__e--paper{fill:#B9B9BE}
.pl__f--sig{fill:var(--sig)} .pl__e--sig{fill:#B5330F}
.pl__f--line{fill:var(--ink);stroke:rgba(255,255,255,.75);stroke-width:1.5}
.stack__legend{position:relative}
.stack__legend li{position:absolute;inset:var(--y) 0 auto 0;transform:translateY(-50%);padding-left:3rem}
.stack__legend li::before{content:"";position:absolute;left:.5rem;top:50%;width:1.75rem;height:1px;background:rgba(255,255,255,.45)}
.stack__legend a{display:grid;transition:opacity .2s var(--ease)}
.stack__legend strong{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
.stack__legend span{font-size:var(--t-small);line-height:1.4;color:var(--mute-d)}
.stack__legend span:last-child{color:var(--paper)}
.stack[data-on] .pl{opacity:.4}
.stack[data-on] .stack__legend a{opacity:.45}
.stack[data-on="1"] .pl[data-pl="1"],.stack[data-on="2"] .pl[data-pl="2"],.stack[data-on="3"] .pl[data-pl="3"],.stack[data-on="4"] .pl[data-pl="4"]{opacity:1;transform:translateY(-12px)}
.stack[data-on="1"] [data-lg="1"],.stack[data-on="2"] [data-lg="2"],.stack[data-on="3"] [data-lg="3"],.stack[data-on="4"] [data-lg="4"]{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .pl{animation:auf .95s cubic-bezier(.16,1,.3,1) backwards}
  @keyframes auf{from{transform:translateY(calc((1.5 - var(--i)) * 84px))}}
}

/* Kundenreihe */
.clients__head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding-top:2rem;border-top:1px solid var(--line-d);color:var(--mute-d)}
.clients__head .tl{color:var(--paper)}
.clients__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem}
.clients__list li{display:grid}
.clients__list span{font-size:var(--t-small);color:var(--mute-d)}

/* Leistungen: vier schwarze Karten */
.areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.area{display:flex;flex-direction:column;background:var(--ink);color:var(--paper);border-radius:1rem;padding:1.5rem;scroll-margin-top:2rem}
.area h3{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em}
.area>p{margin-top:.625rem;color:var(--mute-d);min-height:4.5em}
.area ul{margin:1.5rem 0 2rem;border-bottom:1px solid var(--line-d)}
.area li a{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;border-top:1px solid var(--line-d);font-weight:500}
.area li span:last-child{font-weight:400;color:var(--mute-d);white-space:nowrap;transition:color .18s}
.area li a:hover span:last-child{color:var(--paper)}
.area>.tl{margin-top:auto}
.zone--paper .area .tl .arr{color:var(--sig)}

/* Referenzen: Liste links, eine Aufnahme rechts */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.work__tabs{display:grid;border-bottom:1px solid var(--line-d)}
.work__tabs button{display:grid;gap:.125rem;padding:1.25rem 0 1.25rem 1.25rem;border-top:1px solid var(--line-d);position:relative;color:var(--mute-d);transition:color .18s}
.work__tabs button::before{content:"";position:absolute;left:0;top:1.75rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--sig);opacity:0;transition:opacity .18s}
.work__tabs strong{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
.work__tabs span{font-size:var(--t-small)}
.work__tabs button:hover,.work__tabs [aria-selected=true]{color:var(--paper)}
.work__tabs [aria-selected=true]::before{opacity:1}
.work__tabs [aria-selected=true] span{color:var(--mute-d)}
.work__stage{overflow-anchor:none}
.work__panel img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:.75rem;background:#fff}
.work__panel.is-on img{animation:blende .3s ease-out}
@keyframes blende{from{opacity:0}}
.work__cap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem 2.5rem;margin-top:1.25rem;min-height:4.5rem}
.work__meta{display:grid;gap:.5rem;justify-items:end;text-align:right}
.work__meta span:first-child{font-size:var(--t-small);color:var(--mute-d)}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.steps li{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:1.25rem}
.steps__n{font-size:var(--t-h2);line-height:1;font-weight:500;letter-spacing:-.03em}
.steps h3{margin-top:2rem}
.steps p{margin-top:.5rem;color:var(--mute-l)}
.steps .steps__r{margin-top:auto;padding-top:1.5rem;color:var(--ink);font-weight:500}
.steps__r span{display:block;font-size:var(--t-small);font-weight:400;color:var(--mute-l)}

/* Über uns und Karte */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about .lead{margin-top:1.5rem;max-width:34rem}
.facts{margin:2.5rem 0;border-bottom:1px solid var(--line-d)}
.facts li{display:grid;gap:.125rem;padding:1rem 0;border-top:1px solid var(--line-d)}
.facts span{color:var(--mute-d)}
.about__map{max-width:34rem;justify-self:end;width:100%}
.map{width:100%;height:auto;overflow:visible}
.m-lk{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-linejoin:round}
.m-st{fill:rgba(255,255,255,.13);stroke:rgba(255,255,255,.4);stroke-width:1;stroke-linejoin:round}
.m-rv{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5}
.m-city{font-size:23px;font-weight:500;fill:#fff}
.m-lb{font-size:21px;fill:var(--mute-d)}
.m-pt{fill:#fff}
.m-hq{fill:var(--sig)} .m-ring{fill:none;stroke:var(--sig);stroke-width:1.5}
.m-hqt{font-size:23px;font-weight:500;fill:#fff}
.about__map figcaption{margin-top:1rem;font-size:var(--t-small);color:var(--mute-d)}

/* Ratgeber und Fragen */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.post{display:flex;flex-direction:column;gap:1rem}
.post__cover{display:flex;align-items:flex-end;aspect-ratio:16/9;border-radius:.75rem;padding:1.25rem 1.5rem;font-size:var(--t-xl);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.post__cover--ink{background:var(--ink);color:var(--paper)} .post__cover--sig{background:var(--sig);color:var(--ink)}
.post .tl{margin-top:auto}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:2rem 4rem;margin-top:var(--pad);padding-top:2.5rem;border-top:2px solid var(--ink)}
.faq__list{border-bottom:1px solid var(--line-l)}
.faq details{border-top:1px solid var(--line-l)}
.faq details:first-child{border-top:0}
.faq summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.125rem 0;font-size:var(--t-h3);font-weight:500;letter-spacing:-.02em;line-height:1.2;cursor:pointer;list-style:none}
.faq details:first-child summary{padding-top:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.875rem;height:.875rem;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 3rem 1.5rem 0;color:var(--mute-l);max-width:40rem}

/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.contact h2{font-size:var(--t-h1);line-height:1;letter-spacing:-.04em;max-width:9em}
.contact .lead{margin:1.5rem 0 2.25rem;max-width:30rem}
.contact__ways{border-bottom:1px solid rgba(11,11,12,.35)}
.contact__ways li{display:grid;gap:.125rem;padding:1rem 0;border-top:1px solid rgba(11,11,12,.35)}
.contact__ways span{font-size:var(--t-small)}
.contact__ways a,.contact__ways p{font-size:var(--t-xl);font-weight:500;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere}
.contact__ways a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}

/* Fuß */
.foot{padding-block:4rem 2rem}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
.foot nav{display:grid;gap:.5rem;align-content:start}
.foot h4{font-size:var(--t-small);font-weight:400;color:var(--mute-d);margin-bottom:.375rem}
.foot nav a:hover,.foot__legal a:hover{color:var(--mute-d)}
.foot__legal{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--line-d);font-size:var(--t-small);color:var(--mute-d)}
.foot__legal span{margin-right:auto}
.foot__legal a{color:var(--paper)}

/* Mittlere Breiten */
@media (max-width:1180px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area>p{min-height:0}
  .stack__legend li a span:nth-child(2){display:none}
}
@media (max-width:1040px){ .nav{gap:1.25rem} .top__tel{display:none} }
@media (max-width:900px){
  .nav{display:none} .top .btn{margin-left:auto}
  .hero{grid-template-columns:minmax(0,1fr)}
  .stack{max-width:34rem}
  .stack__legend li a span:nth-child(2){display:block}
  .head,.about,.contact,.faq{grid-template-columns:minmax(0,1fr)}
  .head{align-items:start}
  .clients__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work{grid-template-columns:minmax(0,1fr)}
  .work__tabs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}
  .posts{grid-template-columns:minmax(0,1fr)}
  .post{max-width:32rem}
  .about__map{justify-self:start}
  .foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))} .foot__grid .logo{grid-column:1/-1}
}
@media (max-width:560px){
  h1,h2{hyphens:auto}
  .top{gap:1rem;height:4.25rem} .top .logo{width:118px;height:32px} .top .btn{height:2.5rem;padding:0 1rem}
  .steps li{padding-bottom:.5rem} .steps h3{margin-top:1rem}
  .stack{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .stack__svg{width:min(76%,17rem)}
  .stack__legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem}
  .stack__legend li{position:static;transform:none;padding:0}
  .stack__legend li::before{display:none}
  .areas,.steps{grid-template-columns:minmax(0,1fr)}
  .work__tabs strong{font-size:var(--t-body)}
  .work__cap{grid-template-columns:minmax(0,1fr)}
  .work__meta{justify-items:start;text-align:left}
  .faq details p{padding-right:0}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-city,.m-hqt{font-size:30px} .m-lb{font-size:28px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} }