/* ==========================================================================
   AROCO — statischer 1:1-Nachbau der WordPress/Elementor-Seite (Theme "Litho")
   Maße, Farben und Schriftgrößen sind am Live-Stand (09/2026, 1440 px Viewport)
   gemessen. Breakpoints wie Elementor: Tablet ≤ 1024 px, Mobil ≤ 767 px.
   ========================================================================== */

/* Die Live-Seite lädt nur den Bold-Schnitt (alle anderen @font-face-Regeln im
   Child-Theme sind ungültig) — deshalb erscheint jede Schrift fett. Ein einziger
   Schnitt für den ganzen Gewichtsbereich bildet genau das nach. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #ff871f;
  --text: #2c2c2c;
  --gray: #6e6e6e;          /* Live-Seite: #828282 – für Kontrast (WCAG AA) abgedunkelt */
  --gray-dunkel-bg: #a3a3a3; /* Grau auf dem dunklen Footer */
  --orange-text: #c2530d;    /* Orange als Schriftfarbe auf Weiß, normale Textgröße (Rechner-Zahlen) */
  --orange-titel: #e06a00;   /* Orange für große Überschriften auf Weiß (≥ 3:1) */
  --dark: #232323;
  --taupe: #6b6968;
  --yellow-1: #eedd45;
  --yellow-2: #f7c933;
  --light: #f7f7f7;
  --container: 1170px;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; transition: color .3s, background-color .3s, opacity .3s; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.hl { color: var(--orange); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[id] { scroll-margin-top: 80px; }

/* Einblenden beim Scrollen (Elementor "fadeIn", 1,25 s) */
.reveal { opacity: 0; }
.reveal.is-visible { animation: fadeIn 1.25s both; }
.reveal[data-delay="100"].is-visible { animation-delay: .1s; }
.reveal[data-delay="200"].is-visible { animation-delay: .2s; }
.reveal[data-delay="600"].is-visible { animation-delay: .6s; }
.reveal[data-delay="700"].is-visible { animation-delay: .7s; }
.reveal[data-delay="800"].is-visible { animation-delay: .8s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; }
  .reveal.is-visible { animation: none; }
}
.no-js .reveal { opacity: 1; }

/* ==========================================================================
   Kopfzeile — oben transparent über dem Bild, beim Scrollen dunkel und flach
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  transition: background-color .3s;
}
.site-header__bar {
  display: grid;
  grid-template-columns: 16.666% 66.666% 16.666%;
  align-items: center;
  padding: 0 35px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* Logo füllt die Spalte, höchstens 115 px hoch (1440 px: 196 × 91, 1920 px: 249 × 115) */
.site-header__logo { display: block; padding: 20px 15px; transition: padding .3s; }
.site-header__logo img { width: auto; max-width: 100%; max-height: 115px; transition: max-height .3s; }
.site-header__nav { display: flex; justify-content: flex-end; padding: 0 15px; }
.menu { display: flex; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block;
  margin: 0 18px;
  padding: 25px 0;
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  text-transform: uppercase;
}
.site-header__toggle { display: none; }
/* Sprachumschalter DE / EN */
.menu__lang { display: flex; align-items: center; gap: 6px; margin-left: 18px; }
.menu .menu__lang a { margin: 0; padding: 25px 0; font-size: 16px; opacity: .8; }
.menu .menu__lang a:hover, .menu .menu__lang a[aria-current] { opacity: 1; }
.menu .menu__lang a[aria-current] { color: var(--orange); }
.menu__lang span { color: #fff; opacity: .6; }

.site-header.is-scrolled { background: rgba(0, 0, 0, .8); }
.site-header.is-scrolled .site-header__logo { padding-top: 22px; padding-bottom: 22px; }
.site-header.is-scrolled .site-header__logo img { max-height: 36px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #fff;
  font-size: 25px;
  line-height: 37.5px;
  letter-spacing: 1px;
  text-align: center;
  border-radius: 15px 0;
  transition: background-color .3s;
}
.btn--orange { background: var(--orange); padding: 10px 30px; color: var(--dark); }
.btn--orange:hover, .btn--orange:focus-visible { background: #ffa057; }
.btn--dark { background: var(--text); padding: 10px 30px; }
.btn--dark:hover, .btn--dark:focus-visible { background: rgba(255, 135, 31, .76); }
.btn .icon { font-size: 25px; }

/* ==========================================================================
   Startseite — Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 70px 0 230px 200px;
  border-bottom-left-radius: 259px;
  overflow: hidden;
  background: url("/assets/img/bg-header.webp") 50% 0 / cover;
}
.hero::before, .page-title::before, .calc-band::before, .img-band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--text) url("/assets/img/bg-header-graph.webp") no-repeat 1200px -108px;
  opacity: .75;
}
/* Live: Container min-height 100vh (1440×900 → Hero 70 + 900 + 230 = 1200 px) */
.hero__inner { position: relative; display: flex; min-height: 100vh; }
.hero__text { width: 50%; padding: 102px 15px 0; }
.hero__image { display: flex; align-items: center; justify-content: center; width: 50%; padding: 0 15px; }

/* Live: h1 70/70 px (Zeilen-Strut), Text im inneren span 51/50 px — daher liegt die Grundlinie tiefer */
.hero h1 { max-width: 436px; color: #fff; font-size: 70px; line-height: 70px; }
.hero h1 > span {
  font-size: 51px;
  line-height: 50px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.hero__lead {
  max-width: 553px;
  margin-top: 20px;
  padding-left: 15px;
  border-left: 3px solid var(--orange);
}
.hero__lead p {
  margin-bottom: 25px;
  color: #fff;
  font-size: 25px;
  line-height: 38px;
  letter-spacing: 1px;
}
.hero__actions { width: 394px; margin-left: 85px; text-align: center; }
.iconbox {
  display: block;
  padding: 20px 10px;
  border: 1px solid #fff;
  border-radius: 25px 0 50px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  transition: background-color .3s;
}
.iconbox:hover, .iconbox:focus-visible { background: rgba(255, 135, 31, .45); }
.iconbox .icon { display: block; margin: 0 auto 8px; font-size: 33px; }
.iconbox h2 {
  font-size: 22px;
  line-height: 47.6px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.iconbox p { margin-top: 1px; font-size: 23px; line-height: 30px; }
.hero__buttons { display: flex; flex-direction: column; align-items: center; gap: 19px; margin-top: 30px; }
.hero__buttons .btn--wide { padding: 10px 70px; }

.frame {
  outline: 1px solid orange;
  outline-offset: -20px;
}
.hero__image img { width: 500px; border-radius: 60px 0; }

/* ==========================================================================
   Kundenleiste
   ========================================================================== */
.kunden { position: relative; z-index: 2; margin-top: -100px; padding-top: 40px; }
.kunden__box {
  padding: 10px 30px 30px;
  border: 2px solid var(--orange);
  border-radius: 40px 0;
  background: #fff;
}
.kunden__box h2 { height: 99px; padding-top: 21px; }
.kunden__box h2 span {
  display: inline-block;
  margin-left: 36px;
  border-bottom: 2px solid var(--orange);
  color: var(--text);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 1px;
}
.kunden__logos { display: grid; grid-template-columns: repeat(3, 1fr); height: 110px; }
.kunden__logos img { margin: 0 auto; width: 225px; }

/* ==========================================================================
   Textabschnitte (Dachzeile + Linie + Aussage)
   ========================================================================== */
.eyebrow {
  color: var(--text);
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -.5px;
  text-transform: uppercase;
}
.rule { height: 17px; padding-top: 8px; }
.rule::before { content: ""; display: block; width: var(--w, 18%); border-top: 1px solid rgba(0, 0, 0, .31); }
.rule--26 { --w: 26%; }
.statement {
  color: var(--text);
  font-size: 35px;
  line-height: 50px;
  font-weight: 500;
  letter-spacing: -.5px;
}
.statement--orange, .statement .hl { color: var(--orange-titel); }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }

.intro { position: relative; z-index: 1; }
.intro--probleme { margin-top: 80px; }
.intro--herausforderung { margin-top: 30px; }
.intro--herausforderung .statement--orange { padding: 8px 0 25px; letter-spacing: 0; }
.intro--tagesgeschaeft { margin-top: 30px; }

.deko {
  position: absolute;
  top: -274px;
  left: -130px;
  z-index: -1;
  width: 443px;
  max-width: none;
  pointer-events: none;
}

/* ==========================================================================
   Lösungs-Blöcke (Bild links, Text rechts)
   ========================================================================== */
.loesung { position: relative; z-index: 1; padding: 30px 0; overflow: hidden; }
.loesung--first { padding: 5px 0 30px; }
.loesung .container { display: flex; }
.loesung__img, .loesung__text { width: 50%; padding-right: 20px; }
.loesung__img { display: flex; align-items: center; }
.loesung__img img { width: 100%; border-radius: 50px 0; box-shadow: -25px 25px 28px -9px rgba(0, 0, 0, .5); }
.loesung--first .loesung__img img { box-shadow: -25px 25px 24px -12px rgba(0, 0, 0, .5); }
.loesung__body { padding: 50px 40px; }
.loesung__body .copy { padding-top: 30px; }
.loesung__body .copy p { margin-bottom: 25px; color: var(--text); font-size: 19px; line-height: 30px; }

/* ==========================================================================
   Leistungen im Überblick — zwei Pakete (gelb → orange = wachsender Umfang)
   ========================================================================== */
.leistungen { position: relative; z-index: 1; margin-top: 55px; padding-bottom: 110px; }
.leistungen__sub {
  max-width: 720px;
  margin-top: 14px;
  color: var(--gray);
  font-size: 22px;
  line-height: 32px;
}

.pakete {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.paket {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 40px 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 40px -22px rgba(0, 0, 0, .35);
  transition: transform .3s, box-shadow .3s;
}
.paket:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 34px 50px -24px rgba(0, 0, 0, .45); }

.paket__head { position: relative; overflow: hidden; padding: 30px 34px 28px; color: var(--text); }
.paket--1 .paket__head { background: var(--yellow-1); }
.paket--2 .paket__head { background: var(--orange); }
.paket__nr {
  position: absolute;
  right: 20px;
  bottom: -22px;
  color: rgba(44, 44, 44, .08);
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
}
.paket__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.paket__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px 0;
  background: rgba(255, 255, 255, .6);
}
.paket__icon .icon { font-size: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Leistungsumfang als kleine Treppe — Anspielung auf die gestaffelten Original-Karten */
.umfang { display: flex; align-items: flex-end; gap: 4px; height: 24px; }
.umfang i { display: block; width: 8px; border-radius: 2px; background: rgba(44, 44, 44, .18); }
.umfang i:nth-child(1) { height: 13px; }
.umfang i:nth-child(2) { height: 24px; }
.umfang i.on { background: var(--text); }

.paket__label {
  position: relative;
  margin-top: 22px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.paket__title {
  position: relative;
  margin-top: 6px;
  font-size: 30px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: .5px;
}

.paket__body { display: flex; flex: 1; flex-direction: column; padding: 30px 34px 34px; }
.paket__lead { color: var(--text); font-size: 20px; line-height: 30px; }
.paket__list { margin: 20px 0 26px; padding: 0; list-style: none; }
.paket__list li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  color: #5c5c5c;
  font-size: 18px;
  line-height: 26px;
}
.paket__list li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 135, 31, .16);
}
.paket__list li::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}

.paket__preis {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #ececec;
  color: var(--gray);
  font-size: 18px;
  line-height: 24px;
}
.paket__preis strong { margin: 0 4px; color: var(--text); font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -.5px; }
.paket__preis small { display: block; font-size: 15px; line-height: 20px; }

.paket__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 15px 0;
  background: var(--text);
  color: #fff;
  font-size: 22px;
  line-height: 33px;
  letter-spacing: 1px;
  transition: background-color .3s;
}
.paket__cta .icon { font-size: 26px; transition: transform .3s; }
.paket__cta:hover, .paket__cta:focus-visible { background: var(--orange); }
.paket__cta:hover .icon, .paket__cta:focus-visible .icon { transform: translateX(4px); }

/* Gemeinsame Handlungsleiste unter den Paketen */
.leistungen__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 50px;
  padding: 36px 44px;
  border-radius: 40px 0;
  background: radial-gradient(circle at 100% 0, rgba(255, 135, 31, .22), transparent 32%), var(--text);
  color: #fff;
}
.leistungen__cta-title { font-size: 32px; line-height: 38px; }
.leistungen__cta-text { margin-top: 6px; color: rgba(255, 255, 255, .72); font-size: 19px; line-height: 28px; }
.leistungen__cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; flex: none; }
.btn--ghost {
  padding: 8px 28px;
  border: 2px solid rgba(255, 255, 255, .45);
  background: transparent;
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--orange); background: rgba(255, 135, 31, .15); }
.leistungen__cta .btn--orange { padding: 10px 30px; }
/* ==========================================================================
   Referenzen
   ========================================================================== */
.ref-tab { position: relative; z-index: 10; margin-bottom: -24px; text-align: center; }
.ref-tab .btn { padding: 10px 50px; font-size: 30px; line-height: 45px; background: var(--text); }

.ref { background: var(--taupe); color: #fff; }
.ref--julabo { border-top-left-radius: 88px; }
.ref--ehret { background: var(--orange); color: var(--dark); }
.ref--ehret .ref__name { color: var(--dark); }
.ref .hl { color: inherit; }
.ref--titan { border-bottom-right-radius: 88px; }
.ref .container { display: flex; }
.ref__img { width: 33.333%; padding-top: 100px; }
.ref__img img { width: 390px; border-radius: 50px 0; }
/* Live: 17,5 % / 21 % der 780-px-Spalte = 2/3 des Containers */
.ref__text { width: 66.667%; padding: 11.6667% 14%; }
.ref__name {
  margin-bottom: 35px;
  color: #fff;
  font-size: 65px;
  line-height: 66px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.ref__name small {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 1px;
  margin-bottom: -1px;
}
.ref__person {
  margin-bottom: 35px;
  font-size: 25px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: underline;
}
.ref__quote {
  max-width: 90%;
  margin-bottom: 42px;
  font-size: 20px;
  line-height: 35px;
  font-weight: 500;
  letter-spacing: -.5px;
}

.termin-tab { position: relative; z-index: 10; height: 110px; text-align: center; }
.termin-tab .btn {
  padding: 10px 50px;
  border-radius: 0 0 15px 15px;
  font-size: 30px;
  line-height: 45px;
}
.termin-tab .btn:hover, .termin-tab .btn:focus-visible, .ref-tab .btn:hover, .ref-tab .btn:focus-visible { background: var(--text); color: #fff; }
.termin-tab .btn .icon { font-size: 30px; align-self: flex-start; margin-top: 8px; }

/* ==========================================================================
   Über uns
   ========================================================================== */
.ueber { display: flex; margin: 90px 0; }
.ueber__img { width: 50%; }
.ueber__img img { width: 100%; }
.ueber__text { width: 50%; padding: 0 50px; }
.ueber__eyebrow {
  margin-bottom: 35px;
  color: var(--taupe);
  font-size: 25px;
  line-height: 30px;
  letter-spacing: 2px;
  text-decoration: underline;
}
.ueber__text h2 { margin-bottom: 30px; }
.ueber__text .copy { padding-top: 30px; }
.ueber__text .copy p { margin-bottom: 25px; font-size: 20px; line-height: 38px; }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.site-footer { padding: 10px 90px 0; background: var(--dark); color: #fff; }
.site-footer__row { display: grid; grid-template-columns: 20% 59.68% 20%; }
.site-footer__row > div { padding: 0 15px; }
.site-footer__cta { padding: 65px 0 27px; }
.site-footer__eyebrow {
  margin-bottom: 30px;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: -.5px;
  text-transform: uppercase;
  text-decoration: underline;
}
.site-footer__title { margin-bottom: 30px; font-size: 40px; line-height: 40px; letter-spacing: -.5px; }
.site-footer p { margin-bottom: 25px; font-size: 20px; line-height: 30px; }
.site-footer__btn {
  margin-top: 80px;
  padding: 12px 32px;
  border: 2px solid var(--dark);
  gap: 17px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__btn:hover, .site-footer__btn:focus-visible { background: #ffa057; }
.site-footer__info { padding: 40px 0 65px; border-top: 1px solid #fff; }
.site-footer__logo { display: flex; align-items: center; }
.site-footer__logo img { width: 219px; }
.site-footer h2.site-footer__head {
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.site-footer__info p { line-height: 25px; }
.site-footer__legal a { color: var(--gray-dunkel-bg); }
.site-footer__legal p:last-child { margin-bottom: 0; }
.site-footer__legal a:hover { color: #fff; }

.scroll-top {
  position: fixed;
  right: 45px;
  bottom: 45px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--gray);
  font-size: 17px;
  box-shadow: 0 0 25px 0 rgba(23, 23, 23, .25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s, color .3s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
.scroll-top:hover { color: var(--text); }

/* ==========================================================================
   Unterseiten — Titelband, Karten auf grauem Grund
   ========================================================================== */
.page-title {
  position: relative;
  height: 290px;
  padding-top: 130px;
  border-bottom-left-radius: 142px;
  overflow: hidden;
  background: url("/assets/img/bg-header.webp") 50% 0 / cover;
}
.page-title h1 {
  position: relative;
  margin-top: 50px;
  color: #fff;
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -.5px;
  text-align: center;
}

/* Kalkulation: zwei dunkle Bildbänder ohne Rundung */
.calc-band { position: relative; height: 131px; background: url("/assets/img/bg-header.webp") 50% 0 / cover; }
.img-band {
  position: relative;
  height: 284px;
  background: url("/assets/img/bg-header.webp") 50% 50% / cover no-repeat;
}
.img-band::before { background: var(--text); opacity: .8; }
.img-band--kontakt { height: 392px; }

.grey { display: flow-root; background: var(--light); }
.grey > .container { padding: 0 15px; }
.card {
  position: relative;
  padding: 112px;
  background: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, .08);
}
.card--pull-271 { margin-top: -271px; margin-bottom: 126px; }
.card--pull-220 { margin-top: -220px; }
.card--spaced { margin: 101px 0 126px; }
.card__kicker { margin-bottom: 5px; font-size: 30px; line-height: 30px; text-align: center; }
.card__title {
  padding: 40px 0 50px;
  color: var(--dark);
  font-size: 39.9px;
  line-height: 35px;
  font-weight: 600;
  letter-spacing: -.5px;
  text-align: center;
}

/* Kontakt: vier Info-Boxen */
.kontakt-infos { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; margin-bottom: 62px; min-height: 171px; }
.kontakt-info { display: flex; flex-direction: column; align-items: center; width: 183.5px; margin: 0 auto; text-align: center; }
.kontakt-info > a { display: block; }
.kontakt-info .icon { display: block; }
.kontakt-info .icon { font-size: 32px; color: var(--orange); margin-bottom: 7px; }
.kontakt-info p { color: var(--text); font-size: 25px; line-height: 33px; }
.kontakt-info a { color: var(--gray); }
.kontakt-info a:hover { color: var(--text); }
.kontakt-info a[href^="tel:"], .kontakt-info a.kontakt-info__plain { color: var(--text); }
.kontakt-info a.kontakt-info__plain:hover { color: var(--orange); }
.kontakt-info--wide p { font-size: 24px; }

/* Formular (Contact Form 7 / Litho-Optik) */
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.form__col { margin-bottom: 46.2px; padding-bottom: 9px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: 25px;
  padding: 9px 20px;
  border: 1px solid #dfdfdf;
  border-radius: 0;
  background: #fff;
  color: var(--dark);
  font-size: 17px;
  line-height: 30px;
  outline: none;
  transition: border-color .3s;
}
.form textarea { height: 200px; resize: vertical; }
.form input:focus, .form textarea:focus { border-color: #b9b9b9; }
.form ::placeholder { color: var(--gray); opacity: 1; }
.form .is-invalid { border-color: #dc3232; }
.form__tip { display: block; margin: -22px 0 12px; color: #dc3232; font-size: 15px; line-height: 20px; }
.form__submit { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.form__submit button {
  padding: 12px 28px;
  border: 0;
  border-radius: 15px 0 14px;
  background: var(--orange);
  color: var(--dark);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .3s;
}
.form__submit button:hover { opacity: .85; }
.form__submit button[disabled] { opacity: .6; cursor: wait; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__kalk { grid-column: 1 / -1; margin-bottom: 24px; padding: 12px 16px; border-left: 3px solid var(--orange); background: #fff6ee; color: var(--text); font-size: 17px; line-height: 26px; }
.form__kalk[hidden] { display: none; }
.form__output {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 7px 14px;
  border: 2px solid #ffb900;
  color: var(--text);
  font-size: 17px;
  line-height: 26px;
}
.form__output--ok { border-color: #46b450; }
.form__output--error { border-color: #dc3232; }
.form__note { grid-column: 1 / -1; margin-top: 14px; font-size: 15px; line-height: 22px; }
.form__note a { color: var(--text); text-decoration: underline; }

/* Calendly erst nach Klick laden (keine Cookies ohne Zustimmung) */
.calendly-slot { min-height: 420px; }
.calendly-slot iframe { display: block; width: 100%; height: 900px; border: 0; }
.calendly-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 420px;
  padding: 40px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  text-align: center;
}
.calendly-consent p { max-width: 560px; color: var(--text); font-size: 20px; line-height: 30px; }
.calendly-consent a { text-decoration: underline; }
.calendly-consent .btn { font-size: 22px; line-height: 33px; }

/* Rechtstexte */
.legal { padding: 60px 0 62px; overflow-wrap: anywhere; }
.legal--grey { padding: 50px 0 0; background: #f3f3f3; }
.legal .container { padding: 0 15px; }
.legal h2 {
  margin-bottom: 50px;
  color: var(--orange-titel);
  font-size: 54.6px;
  line-height: 54.6px;
  font-weight: 500;
  letter-spacing: -.5px;
}
.legal h3, .legal h5, .legal h2.abschnitt { margin-bottom: 0; color: var(--text); font-size: 32.2px; line-height: 42px; letter-spacing: -.5px; }
.legal h4, .legal h6 { color: var(--text); font-size: 25.2px; line-height: 35px; letter-spacing: -.5px; }
.legal p, .legal li { color: var(--text); font-size: 20px; line-height: 30px; }
.legal p { margin-bottom: 25px; }
.legal ul, .legal ol { margin: 0 0 25px; padding-left: 20px; }
.legal a { color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--text); }
.legal b, .legal strong { font-weight: 600; }
.legal .btn, .legal .btn:hover { color: var(--dark); }

/* ==========================================================================
   Rechner (Optik des "Cost Calculator Builder"-Plugins)
   ========================================================================== */
.ccb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 30px;
  padding: 10px;
  color: #001931;
  text-align: left;
  align-items: start;
}
.ccb-box {
  padding: 20px;
  border: 1px solid rgba(0, 25, 49, .1);
  border-radius: 8px;
  background: #fff;
}
.ccb-title { margin-bottom: 20px; font-size: 20px; line-height: 30px; font-weight: 600; }
.ccb-list { display: grid; gap: 20px; }
.ccb-field__title { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: 16px; line-height: 30px; font-weight: 700; }
.ccb-field__title .req { margin-left: 2px; color: #d94141; }
.ccb-field__value { font-weight: 700; color: var(--orange-text); }
.ccb-field[hidden] { display: none; }

.ccb-dd { position: relative; margin-bottom: 5px; }
.ccb-dd__input {
  display: grid;
  grid-template-columns: 1fr 8px;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 12px 10px 12px 12px;
  border: 1px solid rgba(0, 25, 49, .1);
  border-radius: 4px;
  background: var(--light);
  color: #001931;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.ccb-dd.is-open .ccb-dd__input { border-color: #ec671a; }
.ccb-dd__icon { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #001931; transition: transform .2s; }
.ccb-dd.is-open .ccb-dd__icon { transform: rotate(180deg); }
.ccb-dd__list {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 20;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 4px;
  background: var(--light);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.ccb-dd.is-open .ccb-dd__list { opacity: 1; visibility: visible; transform: none; }
.ccb-dd__list li {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(0, 25, 49, .1);
  font-size: 14px;
  line-height: 30px;
  font-weight: 500;
  cursor: pointer;
}
.ccb-dd__list li:first-child { font-size: 15px; font-weight: 700; }
.ccb-dd__list li:hover, .ccb-dd__list li.is-active { background: #fff; color: var(--orange-text); }

.ccb-range { position: relative; }
.ccb-range input[type="range"] {
  width: 100%;
  height: 6px;
  margin: 12px 0 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ec671a var(--p, 0%), rgba(0, 25, 49, .1) var(--p, 0%));
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.ccb-range input[type="range"]::-webkit-slider-thumb {
  width: 20px; height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ec671a;
  box-shadow: 0 2px 6px rgba(0, 25, 49, .3);
  -webkit-appearance: none;
}
.ccb-range input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ec671a;
  box-shadow: 0 2px 6px rgba(0, 25, 49, .3);
}
.ccb-range input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(236, 103, 26, .25); }
.ccb-range__minmax { display: flex; justify-content: space-between; font-size: 13px; line-height: 20px; opacity: .6; }

.ccb-summary { display: flex; flex-direction: column; gap: 20px; }
.ccb-summary__header { display: grid; grid-template-columns: 1fr 20px; align-items: center; margin-bottom: 0; }
.ccb-summary__header .ccb-title { margin: 0; }
.ccb-accordion {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(0, 25, 49, .114);
  cursor: pointer;
}
.ccb-accordion span { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #001931; transition: transform .2s; }
.ccb-summary.is-collapsed .ccb-accordion span { transform: rotate(180deg); }
.ccb-summary__body { display: grid; gap: 5px; }
.ccb-summary.is-collapsed .ccb-summary__body { display: none; }
.ccb-summary__titles {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(0, 25, 49, .114);
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  text-transform: capitalize;
}
.ccb-summary__rows { display: grid; gap: 10px; padding-top: 10px; }
.ccb-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 0 10px; font-size: 14px; line-height: 22px; font-weight: 500; }
.ccb-row small { display: block; opacity: .65; font-size: 13px; }
.ccb-totals { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 25, 49, .1); }
.ccb-total { display: grid; grid-template-columns: 1fr auto; padding: 0 10px; font-size: 18px; line-height: 30px; font-weight: 700; }
.ccb-total span:last-child { color: var(--orange-text); }
.ccb-hint { font-size: 13px; line-height: 20px; opacity: .65; }
.ccb-cta { display: grid; gap: 8px; }
.ccb-cta[hidden] { display: none; }
.ccb-cta__btn { justify-content: space-between; width: 100%; padding: 12px 20px; font-size: 20px; line-height: 30px; }
.ccb-cta__btn .icon { font-size: 22px; }

/* ==========================================================================
   Großbildschirm ≥ 1651 px — Live-Seite ordnet den Hero hier anders an
   (Custom-CSS-Breakpoint 1650 px): Inhalt vertikal zentriert, Buttons nebeneinander
   ========================================================================== */
@media (min-width: 1651px) {
  .hero { padding: 0 0 0 200px; }
  .hero__inner { max-width: 1500px; margin: 0 auto; }
  .hero__text { display: flex; flex-direction: column; justify-content: center; padding: 0 15px 23px; }
  .hero h1 { max-width: 545px; }
  .hero__lead { max-width: 690px; }
  .hero__actions { width: auto; margin-left: 0; text-align: left; }
  .iconbox { width: 372px; margin-left: 164px; text-align: center; }
  .hero__buttons { flex-direction: row; align-items: flex-start; gap: 106px; margin-top: 29px; }
  .kunden { padding-top: 0; }
}

/* ==========================================================================
   Tablet ≤ 1200 / ≤ 1024
   ========================================================================== */
@media (max-width: 1200px) {
  .container { padding-left: 15px; padding-right: 15px; }
  .hero { padding-left: 60px; }
  .hero__actions { margin-left: 40px; }
  .ref__img img { width: 100%; }
  .card { padding: 80px; }
}

@media (max-width: 1024px) {
  body { padding-top: 98px; }
  /* Tablet/Mobil: oben weiße Leiste mit dunklem Hamburger, beim Scrollen dunkel */
  .site-header { background: #fff; }
  .site-header.is-scrolled { background: rgba(0, 0, 0, .8); }
  .site-header__bar { display: flex; justify-content: space-between; padding: 0; }
  .site-header__logo, .site-header.is-scrolled .site-header__logo { padding: 20px 15px; }
  .site-header__logo img, .site-header.is-scrolled .site-header__logo img { max-height: 58px; }
  .site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 52px;
    height: 44px;
    margin-right: 5px;
    padding: 0 15px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .site-header__toggle span { display: block; width: 22px; height: 2px; background: #232323; transition: transform .3s, opacity .3s; }
  .site-header.is-scrolled .site-header__toggle span { background: #fff; }
  .site-header__toggle span:nth-child(1), .site-header__toggle span:nth-child(3) { width: 14px; margin-left: 4px; }
  .site-header.is-open .site-header__toggle span:nth-child(1) { transform: translate(-4px, 6px) rotate(45deg); width: 22px; }
  .site-header.is-open .site-header__toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-header__toggle span:nth-child(3) { transform: translate(-4px, -6px) rotate(-45deg); width: 22px; }
  .site-header__nav {
    position: absolute;
    top: 97px; left: 0; right: 0;
    display: none;
    padding: 15px 0 25px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  }
  .site-header.is-open .site-header__nav { display: block; }
  .menu { flex-direction: column; }
  .menu a { margin: 0; padding: 9px 15px; color: var(--text); }
  .menu a:hover { color: var(--orange); }
  .menu__lang { margin: 0; padding: 9px 15px; }
  .menu .menu__lang a { padding: 0; color: var(--text); opacity: 1; }
  .menu .menu__lang a[aria-current] { color: var(--orange-text); }
  .menu__lang span { color: var(--gray); opacity: 1; }

  .hero { padding: 2px 20px 294px; border-bottom-left-radius: 150px; }
  .hero__inner { min-height: 0; }
  .hero__text { width: 100%; padding: 0 12px 0 35px; }
  .hero__image { display: none; }
  .hero__lead { padding-right: 25px; padding-left: 10px; }
  .hero__lead p { margin-bottom: 0; }
  .hero__actions { width: auto; margin: 15px -12px 0 -35px; }
  .iconbox { width: 197px; margin: 0 auto; }
  .hero__buttons { margin-top: 30px; gap: 30px; padding-right: 26px; }

  .loesung__img, .loesung__text { padding-right: 0; }
  .loesung__body { padding: 30px 0 30px 30px; }
  .pakete { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .leistungen__cta { flex-direction: column; align-items: flex-start; }
  .ref__text { padding: 12% 8%; }
  .ueber__text { padding: 0 30px; }
  .site-footer { padding: 10px 30px 0; }
  .site-footer__cta { grid-template-columns: 1fr; }
  .site-footer__cta > div:empty { display: none; }
  .site-footer__btn { margin-top: 10px; }
  .card { padding: 60px 40px; }
  .scroll-top { display: none; }
}

/* ==========================================================================
   Mobil ≤ 767 (Werte am Live-Stand bei 390 px gemessen)
   ========================================================================== */
@media (max-width: 767px) {
  .hero { border-bottom-left-radius: 50px; }
  .hero, .page-title, .calc-band, .img-band { background-image: url("/assets/img/bg-header-800.webp"); }
  .hero h1 { max-width: 279px; font-size: 55px; line-height: 55px; letter-spacing: -.5px; }
  .hero h1 > span { font-size: 30px; line-height: 8px; letter-spacing: .6px; }
  /* Live sitzt der Hamburger mobil in der zweiten Spalte (x = 197 px bei 390 px) */
  .site-header__toggle { position: absolute; top: 27px; left: calc(50% - 13px); margin: 0; }
  .hero__lead p { font-size: 18px; line-height: 28.8px; letter-spacing: 1px; }
  .iconbox h2 { font-size: 12px; line-height: 37.4px; }
  .iconbox p { font-size: 14px; line-height: 18.2px; }
  .iconbox .icon { font-size: 30px; margin-bottom: 14px; }
  .btn { font-size: 18px; line-height: 27px; gap: 12px; }
  .btn--orange, .btn--dark, .hero__buttons .btn--wide { padding: 5px 20px; }
  .btn .icon { font-size: 18px; }

  /* Kundenleiste ist mobil ausgeblendet, der Abstand bleibt wie live */
  .kunden { margin-top: -92px; }
  .kunden__box { display: none; }

  .container, .grey > .container { padding-left: 30px; padding-right: 30px; }
  .loesung, .loesung--first { padding: 50px 0; }
  .loesung .container { flex-direction: column; padding: 0 25px; }
  .loesung__img, .loesung__text { width: 100%; }
  .loesung__body { padding: 40px 0 0; }
  .loesung__img img { box-shadow: -12px 12px 20px -9px rgba(0, 0, 0, .5); }
  .frame { outline-offset: -10px; }
  .deko { display: none; }

  .leistungen { padding-bottom: 90px; }
  .leistungen__sub { font-size: 19px; line-height: 28px; }
  .pakete { gap: 24px; margin-top: 36px; }
  .paket__head { padding: 26px 24px 24px; }
  .paket__body { padding: 24px 24px 26px; }
  .paket__title { min-height: 0; }
  .paket__preis strong { font-size: 38px; }
  .leistungen__cta { padding: 30px 24px; }
  .leistungen__cta-title { font-size: 28px; line-height: 34px; }
  .leistungen__cta-buttons { flex-direction: column; width: 100%; }
  .leistungen__cta-buttons .btn { width: 100%; }

  .ref-tab { padding-top: 50px; }
  .ref-tab .btn { padding: 5px 20px; font-size: 18px; line-height: 27px; }
  .ref .container { flex-direction: column; padding: 0; }
  .ref__img { width: 100%; padding: 45px 47px 0; }
  .ref__img img { width: 100%; }
  .ref__text { width: 100%; padding: 104px 39px 50px; }
  .ref__name { margin-bottom: 27px; font-size: 40px; line-height: 46px; }
  .ref__name small { font-size: 20px; line-height: 25px; }
  .ref__person { margin-bottom: 9px; font-size: 18px; line-height: 17px; }
  .ref--ehret .ref__person { margin-bottom: 20px; font-size: 25px; line-height: 30px; }
  .ref__quote { max-width: none; margin-bottom: 42px; font-size: 20px; line-height: 25px; }
  .ref--julabo { border-top-left-radius: 50px; }
  .termin-tab { height: auto; }
  .termin-tab .btn { padding: 5px 20px; font-size: 18px; line-height: 27px; }
  .termin-tab .btn .icon { font-size: 22px; margin-top: 2px; }

  .ueber { flex-direction: column; padding-top: 50px; }
  .ueber__img, .ueber__text { width: 100%; }
  .ueber__text { padding: 20px 30px 0; }
  .ueber__eyebrow { margin-bottom: 20px; font-size: 20px; }
  .ueber__text h2 { margin-bottom: 0; font-size: 30px; line-height: 36px; }
  .ueber__text .copy { padding: 30px 17px 0; }
  .ueber__text .copy p { margin-bottom: 15px; font-size: 18px; line-height: 25px; }

  .site-footer { padding: 42px 0 0; }
  .site-footer__row { grid-template-columns: 1fr; }
  .site-footer__row > div { padding: 0 0 0 50px; }
  .site-footer__row > div:empty { display: none; }
  .site-footer__cta { padding: 46px 0 27px; }
  .site-footer__btn { margin: 35px 0 0 20px; padding: 12px 32px; font-size: 25px; line-height: 37.5px; }
  .site-footer__info { padding: 40px 0 65px; }
  .site-footer__row > .site-footer__logo { justify-content: center; margin: 42px 0 20px; padding: 0; }
  .site-footer__logo img { width: 244px; }
  .site-footer__legal { margin-top: 45px; }

  .page-title { height: 220px; padding-top: 80px; border-bottom-left-radius: 70px; }
  .page-title h1 { margin-top: 35px; font-size: 45px; line-height: 50px; }
  .calc-band { height: 0; }
  .img-band { height: 200px; }
  .img-band--kontakt { height: 260px; }
  .card { padding: 40px 20px; }
  .card--pull-271 { margin-top: -160px; margin-bottom: 60px; }
  .card--pull-220 { margin-top: -160px; }
  .card--spaced { margin: 60px 0; }
  .card__kicker { font-size: 22px; line-height: 26px; }
  .card__title { padding: 20px 0 30px; font-size: 30px; line-height: 34px; }
  .grey > .container { padding: 0 15px; }
  .kontakt-infos { grid-template-columns: 1fr; row-gap: 30px; margin-top: 40px; }
  .kontakt-info { width: auto; max-width: 100%; }
  .kontakt-info p { font-size: 20px; line-height: 28px; }
  .kontakt-info--wide p { font-size: 20px; }
  .form { grid-template-columns: 1fr; }
  .form__col { margin-bottom: 0; padding-bottom: 0; }
  .form__submit { justify-content: center; margin-top: 10px; }
  .ccb { grid-template-columns: 1fr; padding: 0; }
  .legal h2 { font-size: 36px; line-height: 40px; margin-bottom: 30px; }
  .legal h3, .legal h5, .legal h2.abschnitt { font-size: 26px; line-height: 34px; }
  .legal p, .legal li { font-size: 18px; line-height: 28px; }
}