/* skdesign köln – statische Website
   Layout 1:1 aus dem ehemaligen WordPress/Avada-Auftritt übernommen.
   Icons (Pfeil, Haken): Font Awesome Free 5, Lizenz CC BY 4.0 – https://fontawesome.com/license/free
   Schriften: Nunito Sans, Roboto Slab, Zilla Slab (SIL Open Font License 1.1, lokal gehostet). */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(../fonts/nunito-sans-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url(../fonts/nunito-sans-italic-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto-slab-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/zilla-slab-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --violet: #2f2483;
  --teal: #0d7e86;
  --blue: #00468c;
  --green: #65bc7b;
  --serif: "Roboto Slab", Arial, Helvetica, sans-serif;
  --sans: "Nunito Sans", Arial, Helvetica, sans-serif;
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4l-166.4-166.4c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 400 18px/1.5 var(--sans);
  letter-spacing: 0;
  font-variant-ligatures: none;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: 55px; line-height: 1.1; margin: .67em 0 .5em; }
h2 { font-size: 42px; line-height: 1.1; margin: .67em 0 .25em; }
h3, .h3 { font-size: 30px; line-height: 1.3; margin: .67em 0 .15em; color: var(--violet); }
h4 { font-size: 18px; line-height: 1.5; margin: 0 0 1.25em; }
h5, .h5 { font: 400 24px/1.4 "Zilla Slab", Arial, Helvetica, sans-serif; margin: 1.67em 0; color: #212934; }
ul { margin: 18px 0; padding-left: 40px; }
p { margin: 0 0 20px; }
a { color: #000; text-decoration: none; }
a:hover { color: var(--green); }
img { border: 0; }
.nw { white-space: nowrap; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: #000; padding: 8px 16px;
}
.skip-link:focus { left: 0; }

/* Icons (Font-Awesome-Glyphen als Maske, ohne Icon-Font) */
.ico {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  vertical-align: baseline;
}
.ico--arrow { --ico: var(--icon-arrow); }
.ico--check { --ico: var(--icon-check); }

/* ---------- Kopfzeile ---------- */
.site-header { display: flow-root; height: 68.33px; background: #fff; padding: 0 30px; }
.site-header__in { display: flow-root; position: relative; max-width: 1220px; margin: 0 auto; }
.logo { display: block; width: 293.453px; max-width: 100%; margin: 20px 0; }
.logo img { display: block; width: 293.281px; height: 28px; max-width: 100%; }
.site-nav { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 29px;
  background: var(--violet);
  border-radius: 22px;
  color: #fff;
  font-size: 18px;
  line-height: 17px;
  font-weight: 600;
  text-align: center;
}
.btn span { padding: 0 20px; }
.btn:hover { color: #fff; }
.btnrow { display: flex; justify-content: center; }
.btnrow--left { justify-content: flex-start; }
.btnrow--top { margin-top: 15px; }
.btnrow--gap { margin-bottom: 12px; }

/* ---------- Abschnitte / Raster (Avada-Maße) ---------- */
.sec { padding: 0 30px; position: relative; }
.row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  width: min(1268.8px, 104%);
  margin-inline: calc((100% - min(1268.8px, 104%)) / 2);
}
.col {
  display: flex; flex-direction: column;
  flex: 0 0 auto; min-width: 0;
  width: calc(100% - 3.84%);
  margin: 0 1.92% 20px;
  text-align: center;
}
.col--title { margin-inline: auto; }
.t { margin: 0 20px; }
.col--card { align-self: flex-start; }

/* ---------- Hero ---------- */
.sec--hero {
  padding: 30px 20px 40px;
  background: linear-gradient(90deg, #008aa9 0%, #b3d41c 100%);
}
.sec--hero h1 { color: #fff; }
.sub { font-size: 22px; }

/* ---------- Referenzen / Galerie ---------- */
.sec--work { padding-top: 60px; }
.work { container-type: inline-size; margin: 30px; min-height: 360px; }
.jig { list-style: none; margin: 0; padding: 0 0 30px; display: grid; gap: 30px; }
.jig__item { position: relative; margin: 0; min-width: 0; }
.jig__link { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; }
.jig__link img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; aspect-ratio: 1; background: #fff; }
/* Hover-/Fokus-Beschriftung */
.jig__link::before, .jig__link::after, .jig__cap {
  opacity: 0; transition: opacity .3s;
}
.jig__link::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; }
.jig__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 20px solid rgba(0, 0, 0, .05); }
.jig__cap {
  position: absolute; inset: 0; z-index: 2; padding: 0 25px;
  font-size: 14px; line-height: normal; text-align: center; color: #000;
}
.jig__cap > span { display: block; }
.jig__cat {
  position: absolute; top: 0; left: 0;
  padding: 4px 12px; background: rgba(0, 0, 0, .8); color: #fff;
  font: 400 18px/normal var(--serif);
}
.jig__title, .jig__desc { position: relative; top: 30px; }
.jig__title { margin-top: 38px; color: var(--violet); font-size: 24px; font-weight: 700; line-height: 32px; }
.jig__desc { font-size: 18px; line-height: 24px; }
.jig__desc--b { margin-top: 19px; font-weight: 700; }
@media (hover: hover) {
  .jig__link:hover::before { opacity: .85; }
  .jig__link:hover::after { opacity: 1; }
  .jig__link:hover .jig__cap { opacity: .85; }
}
.jig__link:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.jig__link:focus-visible::before { opacity: .85; }
.jig__link:focus-visible::after { opacity: 1; }
.jig__link:focus-visible .jig__cap { opacity: .85; }

.jig__more { text-align: center; line-height: normal; }
.jig__more button {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: #000; cursor: pointer;
}
.jig__more .ico { width: 18px; height: 18px; color: var(--blue); margin: 0 4px 0 0; vertical-align: -2px; }

@container (max-width: 400px) {
  .jig { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 100cqw; }
  .jig.is-collapsed .jig__item:nth-child(n+10) { display: none; }
}
@container (min-width: 401px) and (max-width: 830px) {
  .jig { --c1: round(down, calc((100cqw - 30px) / 2), 1px); grid-template-columns: var(--c1) minmax(0, 1fr); grid-auto-rows: var(--c1); }
  .jig.is-collapsed .jig__item:nth-child(n+9) { display: none; }
}
@container (min-width: 831px) {
  .jig {
    --c1: round(down, calc((100cqw - 60px) / 3), 1px);
    --c2: round(down, calc((100cqw - 60px - var(--c1)) / 2), 1px);
    grid-template-columns: var(--c1) var(--c2) minmax(0, 1fr);
    grid-auto-rows: var(--c1);
  }
  .jig.is-collapsed .jig__item:nth-child(n+10) { display: none; }
}

/* ---------- Team ---------- */
.sec--team {
  padding-top: 100px;
  background: 0 0 / contain no-repeat;
}
.sec--team.bg-on { background-image: url(../img/lines-mitdenken.webp); }
.portrait { margin: 0 0 12px; text-align: center; }
.portrait img { display: inline-block; width: 180px; max-width: 100%; height: auto; vertical-align: top; }
.team__cite { font-size: 20px; }
.team__link { font-weight: 600; }
.ico--sm { width: 14px; height: 16px; margin: 0 4px; vertical-align: -2px; }
.team__cite ~ p .ico--sm { color: var(--teal); }

/* ---------- Projekt starten (Parallax-Hintergrund) ---------- */
.sec--cta {
  display: flex; flex-direction: column; justify-content: center; min-height: 800px;
  background: 50% 50% / cover;
}
.sec--cta.bg-on {
  background-image: url(../img/bg-skizzenbuch.webp);
  background-image: image-set(url(../img/bg-skizzenbuch.avif) type("image/avif"), url(../img/bg-skizzenbuch.webp) type("image/webp"));
}
@media (min-width: 1025px) {
  .sec--cta { background-attachment: fixed; }
}
.sec--cta::before {
  content: ""; position: absolute; inset: 0;
  background: 50% 50% / cover;
}
.sec--cta.bg-on::before { background-image: url(../img/maske.webp); }
.sec--cta .row { position: relative; }
.col--half { margin-top: 30px; text-align: left; }
.cta__grid { display: flex; flex-wrap: wrap; align-items: center; width: 104%; margin: 15px -2% 0; }
.cta__grid > * { width: calc(50% - 3.84%); margin: 0 1.92% 20px; }
.bullets { line-height: 175%; margin: 0 0 20px; }
.bullets .ico { width: 19px; height: 19px; color: var(--teal); margin: 0 4px; vertical-align: -3px; }

/* ---------- Leistungen ---------- */
.sec--services { margin-top: -30px; padding-bottom: 50px; }
.pict { margin: 0 0 12px; text-align: center; }
.pict img { display: inline-block; width: 125px; height: 125px; max-width: 100%; vertical-align: top; }

/* ---------- Kundenstimmen ---------- */
.sec--voices {
  padding-top: 50px;
  background: 100% 0 / contain no-repeat;
}
.sec--voices.bg-on { background-image: url(../img/lines-kundenstimmen.webp); }
.voices { display: flex; flex-wrap: wrap; width: 100%; margin: 31px 0 111px; }
.voice { flex: 0 0 33.333%; min-width: 0; margin: 0; padding: 0 30px 0 31px; }
.voice__in {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: min-content; max-width: 300px; min-height: 300px; margin: 0; border-radius: 50%;
  background: #ddf0f3; text-align: center;
}
.voice p { margin: 0; padding: 12px 22px 0; }
.voice small { font-size: 14px; line-height: 21px; }

/* ---------- Kontakt ---------- */
.col--btn .btn { width: 290px; max-width: 100%; justify-content: center; }
.sec--talk {
  padding: 100px 30px;
  background: 0 0 / contain no-repeat;
}
.sec--talk.bg-on { background-image: url(../img/lines-reden.webp); }

/* ---------- Fußzeile ---------- */
.site-footer { position: relative; background: var(--violet); color: #fff; padding: 30px; }
.site-footer a { color: #fff; }
.site-footer__in { max-width: 1220px; margin: 0 auto; }
.footer__links { float: right; margin: 18px 0; letter-spacing: .3px; }
.footer__links a + a { padding-left: 30px; }
.footer__logo { margin: 18px 0; }
.footer__logo img { display: block; width: 293.453px; max-width: 100%; height: auto; }
.footer__text { margin: 18px 0; }
.site-footer::after { content: ""; display: table; clear: both; }

/* ---------- Rechtstexte ---------- */
.legal { padding: 0 30px; }
.legal__in { max-width: 1220px; margin: 0 auto; overflow-wrap: break-word; }

/* ---------- Tablet / Mobil ---------- */
@media (min-width: 1001px) {
  .site-header { height: 90.33px; }
  .logo { margin: 31px 0; }
  .site-nav { display: block; position: absolute; top: 0; right: 0; }
  .site-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
  .site-nav li { margin-left: 48px; }
  .site-nav a:hover { color: var(--blue); }
  .site-nav a {
    display: flex; align-items: center; height: 84px;
    font-weight: 700; line-height: 18px;
  }
  .site-nav .ico { width: 17.5px; height: 20px; color: var(--blue); margin-right: 10px; vertical-align: top; }
  .col--title { width: calc(66.667% - 3.84%); }
  .col--third { width: calc(33.333% - 3.84%); }
  .col--half { width: calc(50% - 3.84%); }
  .col--quarter { width: calc(25% - 3.84%); }
}

@media (min-width: 1001px) and (max-width: 1024px) {
  .site-nav li { margin-left: 0; padding-right: 25px; }
}

@media (max-width: 1000px) {
  :root { --fl: calc((1000px - 100vw) * .45 / 640); }
  h1 { font-size: calc(55px - var(--fl) * 32.5); }
  h2 { font-size: calc(42px - var(--fl) * 19.5); }
  h3, .h3 { font-size: calc(30px - var(--fl) * 7.5); }
  h5, .h5 { font-size: calc(24px - var(--fl) * 1.5); }
  .col--hide-small { display: none; }
  .cta__grid > * { width: calc(100% - 3.84%); }
  .col--title { margin-block: 21px 41px; }
  .sec--team .col--title, .sec--talk .col--title { margin-bottom: 62px; }
  .sec--team .row:last-child, .sec--talk .row:last-child { padding-bottom: 21px; }
  .sec--talk { padding-bottom: 60px; }
  .sec--cta { margin-top: -120px; }
  .sec--services { margin-top: -80px; }
  .sec--voices { margin-top: -60px; }
  .sec--benefits { margin-top: -100px; }
  .voices { margin-bottom: 166px; }
}

/* Kundenstimmen stapeln (Avada-Verhalten: 901–1000 px und bis 767 px) */
@media (min-width: 901px) and (max-width: 1000px), (max-width: 767px) {
  .voice { flex-basis: 100%; margin-bottom: 117px; }
  .voices { margin-bottom: 29px; }
}

@media (max-width: 640px) {
  .legal { padding-bottom: 50px; }
  .site-footer__in { padding-bottom: 50px; }
}

@media (max-width: 500px) {
  .jig__cat { font-size: 16px; }
  .jig__title { margin-top: 24px; top: 3px; font-size: 18px; line-height: 95%; }
  .jig__desc { top: 4px; font-size: 14px; line-height: 95%; }
  .footer__links { float: left; padding-bottom: 25px; }
  .voices { margin-top: 0; margin-bottom: 60px; }
  .voice { margin-bottom: 57px; padding: 0 0 0 1px; }
  .site-header { display: none; }
}

/* ---------- Einblend-Animationen (wie zuvor, nur Opacity/Transform) ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.anim-load { animation: fadeIn 1.5s both; }

@media (scripting: enabled) {
  [data-anim] { opacity: 0; }
  [data-anim].is-in { animation: var(--a) var(--d) both; }
}
[data-anim="fadeIn"] { --a: fadeIn; }
[data-anim="fadeInUp"] { --a: fadeInUp; }
[data-anim="bounceIn"] { --a: bounceIn; }
[data-anim="zoomIn"] { --a: zoomIn; }
[data-d="06"] { --d: .6s; } [data-d="07"] { --d: .7s; } [data-d="08"] { --d: .8s; }
[data-d="09"] { --d: .9s; } [data-d="10"] { --d: 1s; } [data-d="14"] { --d: 1.4s; }
[data-d="17"] { --d: 1.7s; } [data-d="21"] { --d: 2.1s; } [data-d="22"] { --d: 2.2s; }
[data-d="35"] { --d: 3.5s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0 8px; border: 0; background: none; color: #000; overflow: hidden;
}
.lb::backdrop { background: #0b0b0b; opacity: .8; }
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb__fig { position: relative; margin: 0; padding: 40px 0; max-width: 100%; line-height: 0; }
.lb__fig::before {
  content: ""; position: absolute; inset: 40px 0; z-index: -1;
  background: #444; box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
.lb__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 80px); margin: 0 auto; }
.lb__bar {
  position: absolute; top: 100%; left: 0; width: 100%; margin-top: -38px;
  padding: 6px 12px; background: #fff; color: #000;
  font-size: 18px; line-height: 1.4; text-align: left; overflow-wrap: break-word;
}
.lb__title { display: block; padding-right: 36px; }
.lb__count { position: absolute; top: 6px; right: 12px; font-size: 12px; line-height: 18px; color: #767676; white-space: nowrap; }
.lb__close, .lb__nav {
  position: absolute; z-index: 1; padding: 0; border: 0; background: none;
  color: #fff; opacity: .65; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lb__close:hover, .lb__close:focus-visible, .lb__nav:hover, .lb__nav:focus-visible { opacity: 1; }
.lb__close { top: 0; right: -6px; width: 44px; height: 44px; font: 28px/44px Arial, Baskerville, monospace; text-align: right; padding-right: 6px; }
.lb__nav { position: fixed; top: 50%; width: 90px; height: 110px; margin-top: -55px; }
.lb__nav::before, .lb__nav::after {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0;
  margin-top: 35px; margin-left: 35px; border: medium inset transparent;
}
.lb__nav::after { top: 8px; border-top-width: 13px; border-bottom-width: 13px; }
.lb__nav::before { border-top-width: 21px; border-bottom-width: 21px; opacity: .7; }
.lb__nav--prev { left: 0; transform-origin: 0; }
.lb__nav--prev::after { margin-left: 31px; border-right: 17px solid #fff; }
.lb__nav--prev::before { margin-left: 25px; border-right: 27px solid #3f3f3f; }
.lb__nav--next { right: 0; transform-origin: 100%; }
.lb__nav--next::after { margin-left: 39px; border-left: 17px solid #fff; }
.lb__nav--next::before { border-left: 27px solid #3f3f3f; }
@media (max-width: 900px) {
  .lb { padding: 0 6px; }
  .lb__nav { transform: scale(.75); }
}