/* service.css — Styles der Service-Seiten (Basis siehe site.css) */
:root {
      --content-w: min(2100px, 70%);   /* Content-Breite 70% des Viewports, gedeckelt */
      --o:  #f15a24;

      --dk: #111;
      --gr: #2a2a2a;
      --md: #444;
      --lt: #f6f5f3;
      --bd: #e6e4e0;
      --wh: #fff;
    }
@media (max-width: 1100px) { :root { --content-w: 100%; } }
a:hover { color: var(--o); text-decoration: none; }
.page { padding-top: clamp(58px, 4.03vw, 74px); }
.hero-dl {
      padding: 80px 0 64px; border-bottom: 1px solid var(--bd);
    }
.hero-dl-in {
      max-width: var(--content-w); margin: 0 auto; padding: 0 48px;
      display: grid; grid-template-columns: 1fr clamp(420px, 29.2vw, 700px); gap: 80px; align-items: center;
    }
.lbl {
      display: block; font-size: clamp(10px, 0.69vw, 12.2px); font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--acd, var(--ac)); margin-bottom: 14px;
    }
h1 {
      font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 700;
      line-height: 1.1; letter-spacing: -.025em; color: var(--dk);
      margin-bottom: 20px;
    }
h1 .thin { font-weight: inherit; }
.hero-lead {
      font-size: clamp(15.5px, 1.08vw, 18.9px); line-height: 1.75; color: var(--md);
      margin-bottom: 28px; max-width: 520px;
    }
.btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 22px; border-radius: 3px;
      font-family: inherit; font-size: clamp(13px, 0.9vw, 15.9px); font-weight: 600;
      border: 1.5px solid transparent; cursor: pointer;
      transition: background .15s, border-color .15s, color .15s, transform .15s;
    }
.btn:hover { transform: translateY(-1px); }
.btn-f { background: transparent; color: var(--o); border-color: var(--o); }
.btn-f:hover { background: rgba(241,90,36,.06); border-color: var(--o); color: var(--o); }
.btn-o { background: transparent; color: var(--o); border-color: var(--o); }
.btn-o:hover { background: rgba(241,90,36,.06); }
.hero-img {
      background: var(--lt); border: 1px solid var(--bd); border-radius: 8px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      min-height: clamp(300px, 20.9vw, 500px); padding: clamp(32px, 2.3vw, 56px);
    }
.hero-img img { max-height: clamp(260px, 18.1vw, 440px); width: auto; object-fit: contain; }
.sec { padding: 80px 0; }
.sec-lt { background: var(--lt); }
h2 {
      font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700;
      line-height: 1.15; letter-spacing: -.02em; color: var(--dk); margin-bottom: 10px;
    }
h2 .thin { font-weight: inherit; }
.sec-sub { font-size: clamp(14.5px, 1.01vw, 17.7px); line-height: 1.7; color: var(--md); max-width: 520px; margin-bottom: 48px; }
.cards {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
.card {
      border: 1px solid var(--bd); border-radius: 8px; padding: 28px 24px;
      transition: border-color .15s, transform .15s;
    }
.card:hover { transform: translateY(-3px); }
.card-icon { font-size: clamp(22px, 1.53vw, 26.8px); color: var(--acd, var(--ac)); margin-bottom: 14px; }
.card-title { font-size: clamp(15px, 1.04vw, 18.3px); font-weight: 700; color: var(--dk); margin-bottom: 8px; }
.card-text { font-size: clamp(13.5px, 0.94vw, 16.5px); line-height: 1.7; color: var(--md); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.bento-item {
      position: relative; overflow: hidden;
      background: var(--lt);
      border: 1px solid var(--bd); border-radius: 14px;
      padding: 26px; display: flex; flex-direction: column;
      transition: border-color .15s;
    }

.bento-ghost { position: absolute; top: 18px; right: 18px; font-size: clamp(26px, 1.81vw, 31.7px); line-height: 1; pointer-events: none; color: var(--ac); }
.bento-title, .bento-text { position: relative; z-index: 1; }
.bento-title { font-size: clamp(21px, 1.46vw, 25.6px); font-weight: 700; color: var(--dk); margin-bottom: 11px; letter-spacing: -.01em; padding-right: 40px; }
.bento-text { font-size: clamp(14px, 0.97vw, 17.1px); line-height: 1.7; color: var(--md); }
.se-card { position: relative; overflow: hidden; border-radius: 16px; padding: 48px 54px;
      background: var(--lt);
      border: 1px solid var(--bd); }
.se-card-ghost { position: absolute; top: 20px; right: 20px; font-size: clamp(30px, 2.08vw, 36.6px); line-height: 1; pointer-events: none; color: var(--ac); }
.se-card h2 { position: relative; z-index: 1; font-size: clamp(21px, 1.46vw, 25.6px); font-weight: 700; letter-spacing: -.01em; margin: 30px 0 11px; color: var(--dk); }
.se-text { max-width: 760px; position: relative; z-index: 1; }
 .se-text p { font-size: clamp(14px, 0.97vw, 17.1px); line-height: 1.7; color: var(--md); margin-bottom: 12px; }
.se-text .se-lead { color: var(--dk); }
.se-text .se-claim { display: inline-block; font-weight: 400; color: var(--dk); margin-bottom: 0; background: linear-gradient(var(--o), var(--o)) no-repeat 0 100% / 0% 2px; transition: color .3s ease, background-size .4s cubic-bezier(.22,1,.36,1); }
.se-text .se-claim:hover { color: var(--o); background-size: 100% 2px; }
@media(max-width: 600px) { .se-card { padding: 34px 26px; } .se-card-ghost { font-size: clamp(38px, 2.64vw, 46.4px); right: 14px; top: 14px; } }

.kontakt-box {
      display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
      padding: 32px 36px; border: 1px solid var(--bd); border-radius: 14px;
      background: var(--lt); margin-top: 48px;
    }
.kontakt-box .kb-icon { font-size: clamp(28px, 1.94vw, 34.2px); color: var(--o); flex-shrink: 0; }
.kontakt-box .kb-body { flex: 1; }
.kontakt-box .kb-lbl { font-size: clamp(10px, 0.69vw, 12.2px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acd, var(--ac)); margin-bottom: 6px; }
.kontakt-box .kb-name { font-size: clamp(15px, 1.04vw, 18.3px); font-weight: 700; color: var(--dk); margin-bottom: 4px; }
.kontakt-box .kb-name a:hover { color: inherit; text-decoration: none; }
.kontakt-box .kb-links { font-size: clamp(13.5px, 0.94vw, 16.5px); color: var(--md); }
.kontakt-box .kb-links a { color: var(--acd, var(--ac)); }
.kontakt-box .kb-links a { padding: 3px 8px; margin: -3px -4px; border-radius: 4px; transition: background .12s, color .12s; }
.kontakt-box .kb-links a:hover { color: var(--o); text-decoration: none; background: rgba(241,90,36,.06); }
.pdf-link {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px; border: 1px solid var(--bd); border-radius: 3px;
      font-size: clamp(13px, 0.9vw, 15.9px); font-weight: 600; color: var(--md);
      transition: border-color .15s, color .15s;
    }
.pdf-link:hover { color: var(--ac); }
.pdf-link i { color: var(--o); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media(max-width: 960px) {
      .hd-in, .w { padding-left: 28px; padding-right: 28px; }
      .hero-dl-in, .two-col { grid-template-columns: 1fr; gap: 36px; }
      .hero-dl-in .hero-img { min-height: 220px; }
      .cards { grid-template-columns: 1fr 1fr; }
      .bento { grid-template-columns: 1fr; }
    }
@media(max-width: 720px) {
      .hd-nav { display: none; }
      .burger { margin-left: auto; }
      .mega-in { grid-template-columns: 1fr; gap: 32px 0; padding: 32px 28px 40px; }
      .mega-dl-grid { grid-template-columns: 1fr 1fr; }
      .mega-divider { display: none; }
      .mega-close { right: 28px; }
      .mega-cta { padding: 20px 28px 32px; flex-direction: column; align-items: flex-start; gap: 16px; }
      .cards { grid-template-columns: 1fr; }
      .kontakt-box { flex-direction: column; }
    }
.dl-nav {
      border-top: 1px solid var(--bd);
      padding: 44px 0 16px;
      background: #fff;
    }
.dl-nav > .w { position: relative; }
.dl-nav-lbl {
      font-size: clamp(10px, 0.69vw, 12.2px); font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--o); margin-bottom: 24px;
    }
.dl-viewport { overflow: visible; padding-bottom: 40px; }
.dl-track {
      display: flex; flex-wrap: wrap; gap: clamp(10px, 0.7vw, 18px); transform: none !important;
      transition: transform .38s cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }
.dl-item {
      flex: 1 1 clamp(90px, 6.3vw, 160px); max-width: clamp(150px, 10.4vw, 240px);
      display: flex; flex-direction: column;
      align-items: center; gap: 8px;
      padding: 14px 2px; border-radius: 6px;
      text-decoration: none;
      transition: background .15s;
      min-width: 0;
    }
.dl-item.dl-sep { margin-left: 18px; position: relative; }
.dl-item.dl-sep::before { content: ''; position: absolute; left: -10px; top: 15%; bottom: 15%; width: 1px; background: var(--bd); }
.dl-item:hover { text-decoration: none; }
.dl-item:hover span { color: var(--o); font-weight: 700; }
.dl-item[href="springereinsaetze.html"]:hover span  { color: #f15a24; }
.dl-item[href="awb.html"]:hover span                 { color: #c99a3d; }
.dl-item[href="coaching.html"]:hover span            { color: #7fa05a; }
.dl-item[href="digitalisierung.html"]:hover span     { color: #6b74c0; }
.dl-item[href="prozessentwicklung.html"]:hover span  { color: #3f8f8a; }
.dl-item[href="strategieberatung.html"]:hover span   { color: #4a7fb5; }
.dl-item[href="project.html"]:hover span             { color: #8a63ad; }
.dl-item[href="dokumentvorlagen.html"]:hover span    { color: #f15a24; }
.dl-item img {
      width: clamp(90px, 6.3vw, 144px); height: clamp(90px, 6.3vw, 144px);
      object-fit: contain; object-position: bottom center;
      transition: transform .25s cubic-bezier(.22,1,.36,1);
      transform-origin: bottom center;
      mix-blend-mode: multiply;
    }
.dl-item:hover img {
      transform: scale(1.2);
      position: relative; z-index: 10;
    }
.dl-item span {
      font-size: clamp(11px, 0.76vw, 13.4px); font-weight: 400;
      color: var(--md); text-align: center; line-height: 1.35;
    }
.dl-item.dl-active span { color: var(--acd, var(--ac)); font-weight: 700; }
.dl-item.dl-active img  { transform: scale(1.15); }
.dl-item.dl-active:hover img { transform: scale(1.2); }
.dl-controls { display: none; }
.dl-btn {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid var(--bd); background: none;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: clamp(11px, 0.76vw, 13.4px); color: var(--dk);
      transition: border-color .15s, color .15s, opacity .2s;
    }
.dl-btn:hover { border-color: var(--o); color: var(--o); }
.dl-btn:disabled { opacity: .3; cursor: default; }

/* Kicker über dem DL-Titel (Team-Analogie: Strich + Satz) */
.dl-kick { display: flex; align-items: center; gap: 12px; font-size: clamp(10px, 0.69vw, 12.2px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acd, var(--ac)); margin-bottom: 16px; }
.dl-kick::before { content: ''; width: 28px; height: 2px; border-radius: 1px; background: var(--ac); }

/* Kicker innerhalb der ersten Karte */
.se-card .dl-kick, .bento-item .dl-kick { position: relative; z-index: 1; margin-bottom: 14px; }
.se-card .dl-kick { margin-top: -10px; }
.dl-kick-spacer { visibility: hidden; }
@media (max-width: 960px) {
  .dl-kick-spacer { visibility: visible; }
}



/* Referenzen: pro Kategorie ein grosses Bento (Icon oben rechts, Zeilen innen) */
.ref-big { position: relative; overflow: hidden; background: var(--lt); border: 1px solid var(--bd); border-radius: 14px; padding: 28px 32px 22px; margin: 0 0 22px; }
.bento + .ref-big, .se-card + .ref-big { margin-top: 56px; }
.ref-big > .bento-ghost { position: absolute; top: 20px; right: 22px; font-size: clamp(26px, 1.81vw, 31.7px); color: var(--ac); pointer-events: none; }
.ref-big .dl-kick { margin-bottom: 10px; }
.ref-big .ref-item { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--bd); font-size: clamp(14px, 0.97vw, 17.1px); line-height: 1.6; color: var(--dk); }
.ref-big .ref-item:last-child { border-bottom: none; }
.ref-item[data-desc] { cursor: pointer; }
.ref-item[data-desc]:hover { color: var(--acd, var(--ac)); background: rgba(241,90,36,.04); }
.ref-item[data-desc]::after { content: '+'; margin-left: auto; color: var(--ac); font-weight: 700; font-size: clamp(15px, 1.04vw, 18.3px); }


/* CTA-Satz über der Ansprechperson */
.kb-lead { margin: 64px 0 18px; font-size: clamp(17.5px, 1.22vw, 21.3px); line-height: 1.7; color: var(--md); max-width: none; }
.kb-lead strong { color: var(--dk); font-weight: 700; }

/* Icon auf Titelhöhe in Angebots-Bentos */
.bento-item .dl-kick { margin-top: -10px; }
.bento-head { display: flex; align-items: flex-start; gap: 12px; margin: 30px 0 11px; }
.bento-head .bento-ghost { margin-top: 3px; }
.bento-head .bento-title { margin-bottom: 0; padding-right: 0; }
.bento-head .bento-ghost { position: static; margin-left: auto; font-size: clamp(24px, 1.67vw, 29.3px); }

.kb-lead-ic { color: var(--ac); font-size: clamp(15px, 1.04vw, 18.3px); margin-right: 6px; vertical-align: -1px; }

/* Hover: Rahmen in DL-Farbe für alle Bentos */
.ref-big, .kontakt-box, .se-card { transition: border-color .15s; }


/* ── Mobile: DL-Leiste horizontal scrollbar ── */
@media (max-width: 720px) {
  .dl-track {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 4px; padding: 0 4px 10px;
    scrollbar-width: none;
  }
  .dl-track::-webkit-scrollbar { display: none; }
  .dl-track .dl-item { flex: 0 0 auto; width: 104px; max-width: none; scroll-snap-align: center; }
}