/* ITC Lucke v3.1 · Ergänzungen für die Seite „Leistungen“ und ihre Verlinkung von der Startseite.
   style.css bleibt bytegleich mit v3.0; diese Datei wird danach geladen und fügt nur hinzu. */

/* ---------- Gemeinsam ---------- */
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }

.tag { display: inline-flex; align-items: center; padding: .05rem .5rem; border: 1px solid currentColor; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--cobalt); }
.on-ink .tag { color: var(--sky); }

.footer-links { display: grid; align-content: start; }
.to-top--page:hover .icon { transform: translateX(.3rem); }

/* ---------- Startseite: Wege zur Seite Leistungen ---------- */
.panel-link--detail { margin-right: clamp(1.25rem, 3vw, 2.25rem); }
.panel-link--detail + .panel-link { margin-top: .25rem; }
.aside-link { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@container (min-width: 44rem) {
  .panel--teaser .panel-grid > .panel-text { grid-column: 2; grid-row: 1; margin-top: .6rem; }
}

/* ---------- Leistungen: Kopf ---------- */
.back { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-bottom: clamp(.5rem, 1.4vw, 1.25rem); font-size: 1rem; color: var(--text-soft); text-decoration: none; transition: color .2s; }
.back .icon { transition: transform .35s var(--ease-out); }
.back:hover { color: #fff; }
.back:hover .icon { transform: translateX(-.3rem); }

.hero--sub h1 { font-size: clamp(2.3rem, 12.6vw, 5.25rem); }
.hero--sub .hero-lead p { max-width: 27em; }
@media (min-width: 700px) {
  .hero--sub h1 { font-size: clamp(3rem, 7.3vw, 8.75rem); line-height: .93; }
}

/* Fünf Fragen: zwischen 900 und 1100 px bleiben sie Zeilen, ab 1100 px fünf Spalten. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .questions--five { grid-template-columns: minmax(0, 1fr); }
  .questions--five .q { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: end; gap: .35rem 1rem; min-height: 0; padding: 1.1rem 1.5rem 1.2rem; }
  .questions--five .q::before { width: 100%; height: 1px; }
  .questions--five .q-text { max-width: none; font-size: 1.5rem; }
}
@media (min-width: 1100px) {
  .questions--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .questions--five .q { padding-inline: 1.15rem; }
  .questions--five .q-text { font-size: clamp(1.25rem, 1.72vw, 1.85rem); }
}

/* ---------- Leistungen: vier Bereiche auf Papier ---------- */
.services--page { padding-top: var(--section); }
.services--page > .frame::before { display: none; }
.services--page .services-aside > p { max-width: 22em; }

.panel-title { display: flex; align-items: center; gap: .7rem; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.panel-title::before { content: ""; width: .5rem; height: .5rem; flex: none; background: var(--cobalt); }
.on-ink .panel-title::before { background: var(--sky); }

.topics { display: grid; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--graphite); }
.topics > div { padding-block: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.topics dt { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.topics dd { margin-top: .35rem; font-size: 1rem; line-height: 1.5; color: var(--text-soft); }
.on-ink .topics { border-top-color: var(--text); }

.limit { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2rem); padding: 1rem 1.15rem 1.1rem; border: 1px dashed var(--cobalt); font-size: 1rem; line-height: 1.5; }
.limit-label { display: block; margin-bottom: .25rem; font-size: .9375rem; font-weight: 600; color: var(--cobalt); }
.on-ink .limit { border-color: var(--sky); }
.on-ink .limit-label { color: var(--sky); }

.panel-grid > .panel-link { justify-self: start; }
@container (min-width: 44rem) {
  .panel-grid > .topics, .panel-grid > .limit, .panel-grid > .panel-link { grid-column: 1 / -1; }
  .panel-grid > .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-grid > .topics > div { padding: 1.1rem 1.5rem .25rem 0; border-bottom: 0; }
  .panel-grid > .topics > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}

/* ---------- Leistungen: KI-Agenten auf Tinte ---------- */
.agents { padding-block: var(--section); scroll-margin-top: 0; }
.agents-head { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.agents .question { margin-top: .9rem; max-width: 9.6em; font-size: clamp(2.1rem, 6.4vw, 5.25rem); line-height: 1; color: var(--sky); }
.agents-lead { max-width: 36rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; }
.agents .diagram { margin-top: 0; color: var(--text); }
.agents .diagram .acc { stroke: var(--sky); }
.agents .diagram .node { fill: var(--sky); }
.agents .diagram text.acc-t { fill: var(--sky); }
.agents-cols { display: grid; gap: 2.25rem; margin-top: clamp(3rem, 6vw, 5rem); }
.agents-cols > div { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.agents-cols h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.agents-cols p { max-width: 34rem; margin-top: 1rem; color: var(--text-soft); }
.agents .topics { margin-top: clamp(3rem, 6vw, 5rem); }
.agents .panel-link { margin-top: 1.5rem; color: #fff; }
@media (min-width: 760px) {
  .agents-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
}
@media (min-width: 900px) {
  .topics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .topics--four > div { padding: 1.1rem 1.5rem .25rem 0; border-bottom: 0; }
  .topics--four > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .agents-head { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
}

/* ---------- Leistungen: Rückweg auf Wärme ---------- */
.onward { padding-block: clamp(4rem, 8vw, 7rem); }
.onward .frame { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.onward .h2 { font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.04; }
.onward-text p { max-width: 36rem; }
.onward-links { margin-top: 1.75rem; border-top: 1px solid var(--graphite); }
.onward-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: .6rem; border-bottom: 1px solid var(--line); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; text-decoration: none; transition: color .2s; }
.onward-links a .icon { transition: transform .35s var(--ease-out); }
.onward-links a:hover { color: var(--cobalt); }
.onward-links a:hover .icon { transform: translateX(.3rem); }
@media (min-width: 1000px) {
  .onward .frame { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 8rem); }
}

/* ---------- Leistungen: Kontakt ---------- */
.contact--sub .h2 { max-width: 9.4em; font-size: clamp(2.4rem, 6.6vw, 6.5rem); }

/* ---------- Bewegung und Druck ---------- */
@media (prefers-reduced-motion: no-preference) {
  .q:nth-child(5)::before { animation-delay: 1.02s; }
  .q:nth-child(5) > * { animation-delay: 1.27s; }
}
@media print {
  .back { display: none; }
}