/* ========================================================================
   NICHT IRGENDWANN – SOCIAL MEDIA / KREATIVE ARBEIT 03S
   Scoped auf .ni-social – Enfold Child Theme, Stand 23.10.2026
   Schriftarten aus dem bestehenden globalen Designsystem.
   ======================================================================== */
#top .ni-social {
  --s-black: #020202;
  --s-red: #89252d;
  --s-white: #fff;
  --s-soft: #f5f5f5;
  --s-head: var(--font-headline, 'Nachmittage Display', Impact, sans-serif);
  --s-body: var(--font-body, 'Roboto Slab', Georgia, serif);
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);
  position:relative; overflow:clip; background:#fff; color:var(--s-black);
  font-family:var(--s-body); font-size:16px; line-height:1.7;
}
#top .ni-social,#top .ni-social * {box-sizing:border-box;}
#top .ni-social img {display:block;width:100%;max-width:100%;height:auto;}
#top .ni-social p {margin:0;hyphens:none;line-height:1.7;}
#top .ni-social h1,#top .ni-social h2,#top .ni-social h3 {
  font-family:var(--s-head)!important;font-weight:400!important;font-style:normal!important;
  letter-spacing:-.013em!important;text-transform:uppercase;margin:0!important;hyphens:none;
  overflow-wrap:normal;
}
#top .ni-social a {text-decoration:none;}
#top .ni-social a:focus-visible {outline:3px solid var(--s-red);outline-offset:4px;}
#top .ni-social .ni-social-wrap {width:min(1220px,calc(100% - 92px));margin-inline:auto;}
#top .ni-social .ni-social-kicker {font:700 12px/1.55 var(--s-body);letter-spacing:.14em;color:var(--s-red);margin:0 0 19px;text-transform:uppercase;}
#top .ni-social .ni-social-kicker--light {color:#e2b7bc;}
#top .ni-social em {font-style:normal!important;color:var(--s-red);}

/* 01. Hero – Zweiteilig, Bild und überlagerter 2027-Stempel */
#top .ni-social .ni-social-hero {min-height:740px;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);background:var(--s-black);color:#fff;border-top:5px solid var(--s-red);}
#top .ni-social .ni-social-hero__copy {display:flex;align-items:center;justify-content:flex-end;padding:80px clamp(36px,4.5vw,88px) 85px max(48px,calc((100vw - 1220px)/2));position:relative;min-width:0;}
#top .ni-social .ni-social-hero__copy-inner {max-width:625px;width:100%;position:relative;z-index:1;}
#top .ni-social .ni-social-hero h1 {font-size:clamp(65px,6.2vw,112px)!important;line-height:.92!important;color:#fff!important;letter-spacing:-.02em!important;}
#top .ni-social .ni-social-hero h1 span {color:#fff!important;}
#top .ni-social .ni-social-mark {height:7px;width:112px;margin:30px 0 29px;background:var(--s-red);transform:rotate(-2deg) skew(-12deg);}
#top .ni-social .ni-social-hero__lead {font-size:clamp(18px,1.4vw,22px);font-weight:700;max-width:560px;color:#fff;line-height:1.5;margin-bottom:17px;}
#top .ni-social .ni-social-hero__note {max-width:520px;color:#cfcfcf;font-size:15px;line-height:1.72;}
#top .ni-social .ni-social-actions {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:38px;}
#top .ni-social .ni-social-button {display:inline-flex;gap:27px;justify-content:space-between;align-items:center;min-height:52px;padding:13px 17px;border:2px solid transparent;text-align:left;font:700 12px/1.3 var(--s-body);letter-spacing:.1em;color:#fff;text-transform:uppercase;transition:background .2s,color .2s,transform .2s;}
#top .ni-social .ni-social-button span {font-size:21px;line-height:1;font-weight:400;}
#top .ni-social .ni-social-button--red {background:var(--s-red);color:#fff;box-shadow:5px 5px 0 #fff;}
#top .ni-social .ni-social-button--red:hover {background:#fff;color:#020202;transform:translateY(-2px);}
#top .ni-social .ni-social-button--outline {border-color:#fff;color:#fff;}
#top .ni-social .ni-social-button--outline:hover {background:#fff;color:#020202;}
#top .ni-social .ni-social-button--text {border-color:transparent;border-bottom-color:var(--s-red);padding-inline:4px;color:#fff;}
#top .ni-social .ni-social-button--text:hover {color:#edc3c8;}
#top .ni-social .ni-social-hero__visual {position:relative;min-height:740px;overflow:hidden;background:#292929;isolation:isolate;}
#top .ni-social .ni-social-hero__visual>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% center;z-index:-2;}
#top .ni-social .ni-social-hero__visual::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,2,2,.55),rgba(2,2,2,.06) 43%,rgba(2,2,2,.14));pointer-events:none;}
#top .ni-social .ni-social-hero__stamp {position:absolute;top:65px;right:clamp(24px,4vw,82px);background:var(--s-red);color:#fff;border:3px solid #fff;padding:17px 24px 15px;text-align:center;transform:rotate(8deg);box-shadow:9px 9px 0 rgba(2,2,2,.7);z-index:2;display:flex;flex-direction:column;gap:0;line-height:1;}
#top .ni-social .ni-social-hero__stamp span {font:700 13px/1.2 var(--s-body);letter-spacing:.12em;}
#top .ni-social .ni-social-hero__stamp strong {font:400 clamp(65px,5.7vw,96px)/.9 var(--s-head);}
#top .ni-social .ni-social-hero__stamp small {font:700 10px/1.5 var(--s-body);letter-spacing:.15em;margin-top:7px;}
#top .ni-social .ni-social-hero__image-note {position:absolute;bottom:27px;left:32px;color:#fff;font:700 11px/1.3 var(--s-body);letter-spacing:.12em;background:#020202;padding:9px 13px;transform:rotate(-2deg);}

/* 02. Statusbalken */
#top .ni-social .ni-social-status {background:var(--s-red);color:#fff;border-block:5px solid #020202;padding:28px 0;}
#top .ni-social .ni-social-status__grid {display:grid;grid-template-columns:210px 1fr;gap:38px;align-items:center;}
#top .ni-social .ni-social-status__badge {display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:12px 14px;border:2px solid #fff;transform:rotate(-2deg);font:700 12px/1.25 var(--s-body);letter-spacing:.11em;white-space:nowrap;}
#top .ni-social .ni-social-status__badge span {font-size:21px;}
#top .ni-social .ni-social-status__grid>p:last-child {font-size:15px;max-width:930px;}

/* 03. Services */
#top .ni-social .ni-social-offer {padding:114px 0 130px;background:#fff;}
#top .ni-social .ni-social-section-head {display:flex;align-items:end;justify-content:space-between;gap:56px;margin:0 0 47px;}
#top .ni-social .ni-social-section-head h2 {font-size:clamp(60px,5.4vw,92px)!important;line-height:.98!important;color:#020202;}
#top .ni-social .ni-social-section-head>p {font-size:16px;max-width:350px;color:#464646;padding-bottom:4px;}
#top .ni-social .ni-social-offer__grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;}
#top .ni-social .ni-social-service {position:relative;min-width:0;min-height:365px;padding:28px 24px 37px;border:2px solid #020202;box-shadow:6px 6px 0 rgba(2,2,2,.12);background:#fff;display:flex;flex-direction:column;align-items:flex-start;}
#top .ni-social .ni-social-service__number {font:700 10px/1.5 var(--s-body);letter-spacing:.11em;color:var(--s-red);text-transform:uppercase;margin-bottom:34px;}
#top .ni-social .ni-social-service h3 {font-size:clamp(38px,2.7vw,54px)!important;line-height:.98!important;margin-bottom:21px!important;color:#020202;}
#top .ni-social .ni-social-service p {color:#444;font-size:13.5px;line-height:1.6;padding-bottom:20px;}
#top .ni-social .ni-social-service__glyph {position:absolute;bottom:13px;right:19px;color:var(--s-red);font:700 29px/1 var(--s-body);}
#top .ni-social .ni-social-service--red {background:var(--s-red);color:#fff;box-shadow:8px 8px 0 #020202;transform:rotate(1deg);border-color:var(--s-red);}
#top .ni-social .ni-social-service--red :is(h3,p,.ni-social-service__number,.ni-social-service__glyph) {color:#fff!important;}

/* 04. Brand statement with portrait */
#top .ni-social .ni-social-point {display:grid;grid-template-columns:1fr 1fr;min-height:600px;background:#020202;color:#fff;border-block:6px solid #020202;}
#top .ni-social .ni-social-point__picture {position:relative;min-height:600px;overflow:hidden;}
#top .ni-social .ni-social-point__picture img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% center;filter:grayscale(.15) contrast(1.08);}
#top .ni-social .ni-social-point__photo-label {position:absolute;bottom:32px;left:clamp(25px,5.3vw,88px);background:var(--s-red);color:#fff;padding:12px 15px;transform:rotate(-2deg);font:700 11px/1.3 var(--s-body);letter-spacing:.09em;}
#top .ni-social .ni-social-point__content {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:80px clamp(35px,6vw,95px);}
#top .ni-social .ni-social-point h2 {color:#fff!important;font-size:clamp(54px,4.9vw,85px)!important;line-height:.98!important;margin-bottom:32px!important;}
#top .ni-social .ni-social-point h2 span {color:#fff;text-decoration:underline;text-decoration-color:var(--s-red);text-decoration-thickness:7px;text-underline-offset:7px;}
#top .ni-social .ni-social-point__content>p:not(.ni-social-kicker) {font-size:15.5px;max-width:585px;color:#dfdfdf;margin-bottom:17px;}
#top .ni-social .ni-social-point__underline {width:90px;height:6px;background:var(--s-red);margin-top:18px;transform:rotate(-3deg);}

/* 05. Own channels */
#top .ni-social .ni-social-channels {padding:117px 0 126px;background:#f5f5f5;}
#top .ni-social .ni-social-channels__top {display:grid;grid-template-columns:1.06fr .94fr;gap:75px;align-items:end;margin-bottom:43px;}
#top .ni-social .ni-social-channels h2 {font-size:clamp(59px,5.15vw,87px)!important;line-height:.97!important;color:#020202;}
#top .ni-social .ni-social-channels__top>p {max-width:485px;font-size:15px;color:#444;}
#top .ni-social .ni-social-channels__cards {display:grid;grid-template-columns:1fr 1fr;gap:23px;}
#top .ni-social .ni-social-channel {border:3px solid #020202;padding:30px 38px 27px;min-height:320px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;color:#020202;box-shadow:10px 10px 0 #89252d;transition:transform .2s ease,box-shadow .2s ease;}
#top .ni-social .ni-social-channel:hover {transform:translateY(-4px);box-shadow:10px 14px 0 #89252d;}
#top .ni-social .ni-social-channel--dark {background:#020202;color:#fff;box-shadow:10px 10px 0 #89252d;}
#top .ni-social .ni-social-channel__brand {display:flex;justify-content:space-between;gap:12px;width:100%;font:700 12px/1.4 var(--s-body);letter-spacing:.15em;}
#top .ni-social .ni-social-channel__brand span {font-size:24px;line-height:1;}
#top .ni-social .ni-social-channel strong {display:block;font:400 clamp(85px,9vw,154px)/.9 var(--s-head);margin:25px 0 0;white-space:nowrap;}
#top .ni-social .ni-social-channel__metric {font:700 12px/1.4 var(--s-body);letter-spacing:.18em;color:var(--s-red);margin-top:14px;}
#top .ni-social .ni-social-channel--dark .ni-social-channel__metric {color:#e6a9ae;}
#top .ni-social .ni-social-channel__foot {margin-top:auto;padding-top:24px;font:700 10px/1.4 var(--s-body);letter-spacing:.08em;}
#top .ni-social .ni-social-channels__source {margin-top:27px;color:#6b6b6b;font:700 10px/1.55 var(--s-body);letter-spacing:.095em;}

/* 06. Photos and story */
#top .ni-social .ni-social-stories {display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);background:#fff;min-height:585px;}
#top .ni-social .ni-social-stories__gallery {position:relative;overflow:hidden;background:#e8e8e8;min-height:585px;}
#top .ni-social .ni-social-stories__photo {position:absolute;margin:0;display:block;border:9px solid #fff;box-shadow:13px 16px 0 rgba(0,0,0,.3);overflow:hidden;background:#ddd;}
#top .ni-social .ni-social-stories__photo img {display:block;aspect-ratio:4/3;width:100%;height:100%;object-fit:cover;}
#top .ni-social .ni-social-stories__photo--one {top:12%;left:8%;width:63%;transform:rotate(-5deg);}
#top .ni-social .ni-social-stories__photo--two {bottom:9%;right:5%;width:63%;transform:rotate(6deg);}
#top .ni-social .ni-social-stories__mark {position:absolute;top:26px;right:42px;font:900 52px/1 var(--s-body);color:var(--s-red);transform:rotate(-14deg);}
#top .ni-social .ni-social-stories__copy {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:80px clamp(40px,6.5vw,100px);}
#top .ni-social .ni-social-stories h2 {font-size:clamp(55px,4.6vw,85px)!important;line-height:.98!important;color:#020202;margin-bottom:25px!important;}
#top .ni-social .ni-social-stories__copy>p:not(.ni-social-kicker) {max-width:580px;margin-bottom:17px;color:#404040;}

/* 07. Last call */
#top .ni-social .ni-social-end {padding:108px 0 118px;background:var(--s-red);color:#fff;border-top:8px solid #020202;}
#top .ni-social .ni-social-end__grid {display:grid;grid-template-columns:1.2fr .8fr;gap:65px;align-items:center;}
#top .ni-social .ni-social-end h2 {color:#fff!important;font-size:clamp(61px,5.1vw,100px)!important;line-height:.96!important;}
#top .ni-social .ni-social-end h2 span {text-decoration:underline;text-decoration-color:#020202;text-decoration-thickness:7px;text-underline-offset:9px;}
#top .ni-social .ni-social-end__right {padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
#top .ni-social .ni-social-end__right p {font-size:16px;color:#fff;max-width:455px;}
#top .ni-social .ni-social-button--white {background:#fff;color:#020202;border-color:#fff;box-shadow:6px 6px 0 #020202;min-width:190px;}
#top .ni-social .ni-social-button--white:hover {background:#020202;color:#fff;}
#top .ni-social .ni-social-end__right>span {font:700 10px/1.5 var(--s-body);letter-spacing:.12em;}

/* Desktops to tablets */
@media(max-width:1220px){
 #top .ni-social .ni-social-hero__copy {padding-left:48px;}
 #top .ni-social .ni-social-hero h1 {font-size:clamp(61px,6vw,88px)!important;}
 #top .ni-social .ni-social-offer__grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 #top .ni-social .ni-social-service {min-height:280px;}
 #top .ni-social .ni-social-service h3 {font-size:55px!important;}
}
@media(max-width:900px){
 #top .ni-social .ni-social-wrap {width:calc(100% - 56px);}
 #top .ni-social .ni-social-hero {grid-template-columns:1fr;}
 #top .ni-social .ni-social-hero__visual {grid-row:1;min-height:390px;}
 #top .ni-social .ni-social-hero__visual>img {object-position:center 36%;}
 #top .ni-social .ni-social-hero__stamp {top:23px;right:30px;transform:rotate(6deg) scale(.8);transform-origin:top right;}
 #top .ni-social .ni-social-hero__copy {grid-row:2;justify-content:center;padding:64px 40px 75px;}
 #top .ni-social .ni-social-hero h1 {font-size:clamp(69px,10vw,105px)!important;}
 #top .ni-social .ni-social-hero__image-note {bottom:20px;}
 #top .ni-social .ni-social-status__grid {grid-template-columns:1fr;gap:13px;}
 #top .ni-social .ni-social-status__badge {width:max-content;}
 #top .ni-social .ni-social-point {grid-template-columns:1fr;}
 #top .ni-social .ni-social-point__picture {min-height:370px;}
 #top .ni-social .ni-social-point__content {padding:70px 40px;}
 #top .ni-social .ni-social-channels__top {grid-template-columns:1fr;gap:22px;}
 #top .ni-social .ni-social-stories {grid-template-columns:1fr;}
 #top .ni-social .ni-social-stories__gallery {min-height:470px;}
 #top .ni-social .ni-social-stories__copy {padding:75px 40px;}
 #top .ni-social .ni-social-end__grid {grid-template-columns:1fr;gap:20px;}
 #top .ni-social .ni-social-end {padding:85px 0 97px;}
}
@media(max-width:620px){
 #top .ni-social .ni-social-wrap {width:calc(100% - 34px);}
 #top .ni-social .ni-social-hero__visual {min-height:275px;}
 #top .ni-social .ni-social-hero__visual>img {object-position:center 42%;}
 #top .ni-social .ni-social-hero__stamp {right:15px;top:14px;transform:rotate(6deg) scale(.60);}
 #top .ni-social .ni-social-hero__image-note {left:17px;bottom:14px;font-size:8px;}
 #top .ni-social .ni-social-hero__copy {padding:55px 19px 65px;}
 #top .ni-social .ni-social-hero h1 {font-size:clamp(58px,13vw,89px)!important;}
 #top .ni-social .ni-social-hero__lead {font-size:17px;}
 #top .ni-social .ni-social-hero__note {font-size:14px;}
 #top .ni-social .ni-social-actions {align-items:stretch;gap:11px;}
 #top .ni-social .ni-social-button {min-height:48px;}
 #top .ni-social .ni-social-actions .ni-social-button--red,#top .ni-social .ni-social-actions .ni-social-button--outline {width:calc(50% - 6px);gap:4px;font-size:10px;padding:11px;}
 #top .ni-social .ni-social-actions .ni-social-button--text {width:100%;margin-top:5px;}
 #top .ni-social .ni-social-status {padding:25px 0;}
 #top .ni-social .ni-social-status__grid>p:last-child {font-size:13px;}
 #top .ni-social .ni-social-offer {padding:75px 0 88px;}
 #top .ni-social .ni-social-section-head {display:block;margin-bottom:30px;}
 #top .ni-social .ni-social-section-head h2 {font-size:clamp(50px,11.9vw,72px)!important;}
 #top .ni-social .ni-social-section-head>p {margin-top:20px;}
 #top .ni-social .ni-social-offer__grid {grid-template-columns:1fr;gap:14px;}
 #top .ni-social .ni-social-service {min-height:0;padding:25px 25px 45px;}
 #top .ni-social .ni-social-service h3 {font-size:51px!important;}
 #top .ni-social .ni-social-service__number {margin-bottom:20px;}
 #top .ni-social .ni-social-service--red {transform:none;}
 #top .ni-social .ni-social-point__picture {min-height:270px;}
 #top .ni-social .ni-social-point__content {padding:62px 20px;}
 #top .ni-social .ni-social-point h2 {font-size:clamp(48px,11.5vw,75px)!important;}
 #top .ni-social .ni-social-channels {padding:83px 0 92px;}
 #top .ni-social .ni-social-channels h2 {font-size:clamp(49px,11.3vw,74px)!important;}
 #top .ni-social .ni-social-channels__cards {grid-template-columns:1fr;gap:21px;}
 #top .ni-social .ni-social-channel {min-height:275px;padding:24px 27px;}
 #top .ni-social .ni-social-channel strong {font-size:clamp(92px,23vw,130px);}
 #top .ni-social .ni-social-stories__gallery {min-height:340px;}
 #top .ni-social .ni-social-stories__photo {border-width:6px;}
 #top .ni-social .ni-social-stories__copy {padding:64px 18px 75px;}
 #top .ni-social .ni-social-stories h2 {font-size:clamp(49px,11vw,68px)!important;}
 #top .ni-social .ni-social-end {padding:74px 0 86px;}
 #top .ni-social .ni-social-end h2 {font-size:clamp(55px,11vw,80px)!important;}
}
@media(prefers-reduced-motion:reduce){
 #top .ni-social *,#top .ni-social *::before,#top .ni-social *::after {transition:none!important;}
}