/* VucomBrands – statischer Rebuild (Divi-Ablösung)
   Alle Werte am Original gemessen (vucombrands.com). */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('../fonts/ibm-plex-sans-cond-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --orange: #fd5100;
  --dark: #101010;
  --dark-2: #181818;
  --grau: #8c8c8c;
  --grau-hell: #ababab;
  --navy: #253439;
  --linie: rgba(255, 255, 255, 0.1);
  --sg: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif;
  --mr: Manrope, Helvetica, Arial, Lucida, sans-serif;
  --ibm: 'IBM Plex Sans', Helvetica, Arial, Lucida, sans-serif;
  --ibmc: 'IBM Plex Sans Condensed', Helvetica, Arial, Lucida, sans-serif;
  --rob: Roboto, Helvetica, Arial, Lucida, sans-serif;
}

/* ---------- Basis ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ibm);
  font-size: 14px; font-weight: 500; line-height: 1.7em;
  color: var(--grau); background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.row { width: 90%; max-width: 1290px; margin: 0 auto; }
.row-narrow { width: 90%; max-width: 990px; margin: 0 auto; }

h1, h2 { font-family: var(--sg); font-weight: 700; color: #fff; }
h2 { font-size: 44px; line-height: 1.2em; padding-bottom: 10px; }

/* Kicker: "// TEXT" wie im Original (zwei /-Pseudoelemente) */
.kicker {
  position: relative; padding-left: 15px; margin: 6px 0 4px;
  font-family: var(--mr); font-size: 15px; font-weight: 500; line-height: 1;
  text-transform: uppercase; color: #fff; padding-bottom: 10px;
}
.kicker::before, .kicker::after {
  content: "/"; font-family: var(--sg); font-size: 13px; line-height: 18px;
  font-weight: 400; color: var(--orange); position: absolute; top: -2px;
}
.kicker::before { left: 1px; }
.kicker::after { left: 6px; }
.kicker-center { display: table; margin-left: auto; margin-right: auto; text-align: center; }
.kicker-dark::before, .kicker-dark::after { color: var(--dark); }

.btn {
  display: inline-block; background: var(--orange); color: #fff;
  font-family: var(--sg); font-size: 17px; font-weight: 500; line-height: 1.7em;
  padding: 16px 30px; border-radius: 10px; border: 0; cursor: pointer;
  transition: background .3s, color .3s;
}
.btn:hover { background: #fff; color: var(--orange); }

/* ---------- Topbar (Google Translate) ---------- */
.top-bar { background: #fff; min-height: 29px; }
.top-bar .row { max-width: 1080px; }
.top-bar img { display: inline-block; width: auto; }
.top-bar .goog-te-gadget-simple { border: 0; background: transparent; }

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(0deg, #000 1%, #232323 96%);
  padding: 20px 0 35px;
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 37px; align-items: center; }
.logo img { width: 210px; height: auto; }
.header-kontakte { display: contents; }
.header-inner .btn-header { justify-self: end; }
.header-blurb { display: flex; align-items: flex-start; gap: 15px; margin-top: 15px; }
.header-blurb svg { width: 32px; height: 32px; fill: none; stroke: var(--orange); stroke-width: 1.5; flex: none; }
.header-blurb .titel {
  font-family: var(--ibm); font-size: 15px; font-weight: 700; letter-spacing: 1px;
  line-height: 1; text-transform: uppercase; color: #fff; padding-bottom: 10px; display: block;
}
.header-blurb .wert { font-family: var(--rob); font-size: 15px; font-weight: 300; color: var(--grau); line-height: .5em; }
.btn-header {
  background: var(--orange); color: #fff; font-family: var(--ibm);
  font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 1.7em;
  padding: 15px 48px; border-radius: 5px; display: inline-block;
  transition: background .3s, color .3s;
}
.btn-header:hover { background: #fff; color: #0a2e3d; }
.header-icons { display: none; margin-left: auto; gap: 18px; }
.header-icons a {
  width: 50px; height: 50px; border-radius: 50%; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.header-icons svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-image: linear-gradient(180deg, rgba(16,16,16,.8) 0%, rgba(16,16,16,.8) 100%), url('../img/hero-team.jpg');
  background-size: cover; background-position: 50% 50%;
  padding: 164px 0 307px; text-align: center;
}
.hero h1 { font-size: 70px; letter-spacing: -3px; line-height: 1.1em; padding-bottom: 10px; max-width: 900px; margin: 0 auto 16px; }
.hero p {
  font-family: var(--mr); font-size: 15px; font-weight: 500; line-height: 1.9em;
  color: var(--grau-hell); max-width: 825px; margin: 0 auto 48px;
}
.divider-bottom::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 90px;
  background-size: 100% 90px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxMDEwMTAiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwUzk5My40NiAxNDAgNjQwIDEzOSAwIDAgMCAwdjE0MHoiLz48L2c+PC9zdmc+");
}

/* ---------- Leistungs-Karten ---------- */
.cards { background: var(--dark); padding: 1px 0 10px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; padding: 27px 0; margin-top: -128px; position: relative; z-index: 2; }
.card { background: var(--dark-2); border-radius: 10px; padding: 30px; position: relative; }
.card .nummer {
  position: absolute; top: 30px; right: 30px;
  font-family: var(--sg); font-size: 19px; font-weight: 700; letter-spacing: 1px; line-height: 1; color: #606060;
}
.card h3 {
  font-family: var(--sg); font-size: 24px; font-weight: 500; color: #fff;
  line-height: 1.3em; padding: 0 40px 27px 0; margin-bottom: 30px;
  border-bottom: 1px solid var(--linie);
}
.card img { width: 60px; margin-bottom: 25px; }
.card p { font-family: var(--mr); font-size: 15px; font-weight: 500; color: var(--grau-hell); line-height: 1.8em; }

/* ---------- Über uns ---------- */
.ueber-uns {
  background-color: var(--dark);
  background-image: url('../img/bg-muster-wellen.png');
  background-size: cover; background-position: 0 50%;
  padding: 150px 0;
}
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.ueber-media { position: relative; padding-right: 58px; }
.ueber-media .foto { width: 100%; max-width: 572px; }
.ueber-media .logo-kreis {
  position: absolute; top: 42px; right: 54px; width: 160px; height: 160px;
  background: var(--orange); border-radius: 50%; padding: 40px 20px 20px;
  display: flex; align-items: flex-start; justify-content: center;
}
.ueber-media .logo-kreis img { width: 120px; }
.ueber-uns .text p:not(.kicker), .erfahrung .text p:not(.kicker) {
  font-family: var(--mr); font-size: 15px; font-weight: 600; line-height: 1.8em;
  color: var(--grau-hell); padding-bottom: 16px;
}
.counters { margin: 14px 0 31px; list-style: none; }
.counters li { margin-bottom: 26px; }
.counters .titel { font-family: var(--mr); font-size: 15px; font-weight: 500; line-height: 21px; color: #fff; display: block; margin-bottom: 10px; }
.counter-track { display: block; position: relative; }
.counter-balken { display: block; height: 6px; border-radius: 5px; background: #000; overflow: hidden; }
.counter-balken span { display: block; height: 100%; background: var(--orange); border-radius: 5px; }
.counter-wert {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--ibm); font-size: 12px; font-weight: 600; color: #fff; line-height: 1;
}
.ueber-uns .btn { margin-top: 20px; }

/* ---------- Werte ---------- */
.werte {
  background-color: var(--dark-2);
  background-image: linear-gradient(180deg, rgba(24,24,24,.06) 0%, rgba(24,24,24,.06) 100%), url('../img/bg-muster-werte.png');
  background-size: cover; background-position: 50% 50%;
  padding: 140px 0 1px; text-align: center;
}
.werte h2 { text-align: center; }
.werte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 69px; padding: 27px 0; text-align: left; align-items: start; }
.wert-card { background: #fff; border-radius: 10px; padding: 60px; margin-bottom: 40px; }
.wert-card img { width: 60px; margin-bottom: 25px; }
.wert-card h3 {
  font-family: var(--sg); font-size: 25px; font-weight: 600; color: var(--navy);
  line-height: 1.4em; padding-bottom: 10px;
}
.wert-card p { font-size: 14px; color: var(--grau); }

/* ---------- Dienstleistungen ---------- */
.leistungen {
  background: var(--dark);
  padding: 120px 0 150px;
}
.leistungen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
.leistungen h2 { margin-bottom: 24px; }
.accordion details { border-bottom: 1px solid #404040; }
.accordion summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--sg); font-size: 20px; font-weight: 700; color: #fff;
  line-height: 1; padding: 20px 50px 21px 0;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--sg); font-weight: 400; font-size: 22px; color: #fff;
}
.accordion details[open] summary::after { content: none; }
.accordion .inhalt { padding: 0 0 24px; }
.accordion .inhalt p {
  font-family: var(--mr); font-size: 15px; font-weight: 500; line-height: 1.8em;
  color: var(--grau-hell); padding-bottom: 16px;
}
.accordion .inhalt ul { list-style: disc; padding: 0 0 23px 15px; line-height: 26px; }
.accordion .inhalt li {
  font-family: var(--mr); font-size: 15px; font-weight: 500; color: var(--grau-hell);
  line-height: 1.8em; margin-bottom: 8px;
}
.agentur-card {
  border-radius: 20px; min-height: 708px;
  background-image: linear-gradient(180deg, rgba(24,24,24,.7) 0%, rgba(24,24,24,.7) 100%), url('../img/agentur-team.jpg');
  background-size: cover; background-position: 50% 50%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 46px 70px 40px; text-align: center;
}
.agentur-card h3 {
  font-family: var(--sg); font-size: 30px; font-weight: 600; color: #fff;
  line-height: 1.3em; margin-bottom: 29px;
}

/* ---------- Zitat ---------- */
.zitat {
  background-image: url('../img/overlay-zitat.png'), url('../img/quote-team.jpg');
  background-size: cover, cover; background-position: 50% 50%, 50% 50%;
  padding: 140px 0 146px; text-align: center;
}
.zitat img { width: 75px; margin: 0 auto 26px; }
.zitat blockquote { margin-bottom: 40px; }
.zitat blockquote p {
  font-family: var(--mr); font-size: 25px; font-weight: 600; font-style: italic;
  line-height: 45px; color: #fff;
}

/* ---------- Erfahrung ---------- */
.erfahrung {
  background-color: var(--dark);
  background-image: url('../img/bg-muster-wellen.png');
  background-size: cover; background-position: 0 50%;
  padding: 150px 0 50px;
}
.erfahrung-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 69px; }
.kreis-cta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.33); border-radius: 50%;
  padding: 10px; margin-top: 30px; text-align: center;
}
.kreis-cta img { width: 24px; margin-bottom: 12px; }
.kreis-cta .titel { font-family: var(--mr); font-size: 15px; font-weight: 700; color: #fff; line-height: 1; }
.check-item { display: flex; gap: 16px; margin-bottom: 38px; }
.check-item svg { width: 16px; height: 16px; fill: var(--orange); flex: none; margin-top: 4px; }
.check-item h3 { font-family: var(--mr); font-size: 15px; font-weight: 600; color: #fff; padding-bottom: 6px; }
.check-item p { font-size: 14px; color: var(--grau); }

/* ---------- Kontakt (Footer-CTA, orange) ---------- */
.cta {
  position: relative; background: var(--orange);
  padding: 15vh 0 5vh;
}
.divider-top::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100px;
  background-size: 100% 100px; z-index: 1; pointer-events: none; transform: scale(-1,1);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxMDEwMTAiPjxwYXRoIGQ9Ik05NzguODEgMTIyLjI1TDAgMGgxMjgwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNS45OXoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNOTgzLjE5IDk1LjIzTDAgMGgxMjgwbC0yNjYgOTEuNTJhNzIuNTggNzIuNTggMCAwIDEtMzAuODEgMy43MXoiLz48L2c+PC9zdmc+");
}
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 69px; align-items: center; }
.cta h2 { padding-bottom: 10px; max-width: 560px; }
.cta .text p:not(.kicker) {
  font-family: var(--ibm); font-size: 18px; font-weight: 300; line-height: 1.6em;
  color: #fff; padding-bottom: 20px;
}
.kontakt-liste { list-style: none; }
.kontakt-liste li { display: inline-flex; align-items: center; gap: 10px; margin: 0 30px 12px 0; }
.kontakt-liste a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--ibm); font-size: 18px; font-weight: 500; }
.kontakt-liste svg { width: 14px; height: 14px; fill: #fff; flex: none; }

.kontakt-form { background: rgba(255, 255, 255, .16); border-radius: 20px; padding: 32px; }
.kontakt-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; row-gap: 16px; }
.kontakt-form input[type=text], .kontakt-form input[type=email], .kontakt-form textarea {
  width: 100%; background: #eee; border: 0; padding: 16px;
  font-family: var(--ibm); font-size: 14px; font-weight: 400; color: #999;
}
.kontakt-form textarea { grid-column: 1 / -1; min-height: 150px; resize: vertical; }
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: 1px solid var(--dark); color: var(--dark); }
.kontakt-form .dsgvo { font-size: 14px; color: var(--dark); padding: 14px 0 6px; }
.kontakt-form .dsgvo a { text-decoration: underline; font-weight: 600; color: var(--dark); }
.form-unten { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 6px; }
.captcha { font-size: 14px; font-weight: 500; color: #3a3a3a; display: inline-flex; align-items: center; gap: 8px; }
.captcha input { width: 46px; background: #eee; border: 0; padding: 10px 8px; text-align: center; font-family: var(--ibm); font-size: 14px; }
.btn-senden {
  background: var(--dark); color: #fff; border: 0; border-radius: 5px; cursor: pointer;
  font-family: var(--ibm); font-size: 14px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; line-height: 1.7em; padding: 14px 32px;
  transition: background .3s, color .3s;
}
.btn-senden:hover { background: #fff; color: var(--dark); }
.form-message { grid-column: 1 / -1; color: var(--dark); font-weight: 600; padding-bottom: 10px; }
.kontakt-form .error { outline: 1px solid #c00; }

/* ---------- Footer-Leiste ---------- */
.site-footer { background: var(--dark); padding: 25px 0; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--rob); font-size: 15px; font-weight: 500; line-height: .9em; color: #fff;
}
.footer-inner .trenner { color: #435761; }
.footer-inner a:hover { color: var(--orange); }

/* ---------- Rechtsseiten ---------- */
.rechtsseite { background: var(--dark); padding: 81px 0; }
.rechtsseite .row { max-width: 1080px; }
.rechtsseite h1, .rechtsseite h2, .rechtsseite h3, .rechtsseite h4 {
  font-family: var(--ibmc); font-weight: 500; color: #fff; line-height: 1em;
  padding-bottom: 10px;
}
.rechtsseite h1 { font-size: 30px; }
.rechtsseite h2 { font-size: 26px; padding-top: 20px; }
.rechtsseite h3 { font-size: 22px; padding-top: 14px; }
.rechtsseite h4 { font-size: 18px; padding-top: 8px; }
.rechtsseite p { color: #ccc; padding-bottom: 14px; }
.rechtsseite ul { list-style: disc; padding: 0 0 23px 1em; line-height: 26px; }
.rechtsseite li { color: #ccc; }
.rechtsseite a { color: #b29e86; }
.rechtsseite a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1350px) {
  .hero h1 { font-size: 65px; }
}
@media (max-width: 980px) {
  .header-inner { display: flex; justify-content: space-between; }
  .header-kontakte, .btn-header { display: none; }
  .header-icons { display: inline-flex; }
  .site-header { padding: 15px 0; }
  .hero { padding: 180px 0 287px; }
  .hero h1 { font-size: 65px; }
  .divider-bottom::after { height: 70px; background-size: 100% 70px; }
  .cards-grid, .werte-grid { grid-template-columns: 1fr; gap: 30px; }
  .split, .leistungen-grid, .erfahrung-grid, .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .ueber-media { padding-right: 0; }
  .ueber-media .logo-kreis { right: 16px; }
  .agentur-card { min-height: 520px; padding: 40px 30px; }
}
@media (max-width: 767px) {
  .hero { padding: 85px 0 217px; }
  .hero h1 { font-size: 36px; letter-spacing: -1px; }
  h2 { font-size: 30px; }
  .logo img { width: 140px; }
  .header-icons { gap: 5px; }
  .header-icons a { width: 40px; height: 40px; }
  .header-icons svg { width: 15px; height: 15px; }
  .wert-card { padding: 40px 30px; }
  .zitat blockquote p { font-size: 21px; line-height: 38px; }
  .kontakt-form .form-grid { grid-template-columns: 1fr; }
  .form-unten { flex-wrap: wrap; justify-content: flex-start; }
  .footer-inner { flex-direction: column; text-align: center; line-height: 1.5em; }
  .cta-grid { gap: 50px; }
}