/* Firmensite structure layer (from prototype/it365.css). Colours come from the brand file via --ci-* and --p-*. */
/* Manrope (CI) runs wider than the dealt faces: the split hero takes the kit's 64px step (--ly-h1-col),
   so a 45-character h1 stays on three lines (hero-lines). */
.hero--split { --ly-h1: var(--ly-h1-col); }

/* headings in CI navy */
h1, h2, h3, .t-card { color: var(--ci-navy); }
h2 .muted, h1 .muted { color: var(--p-muted); }
.ground-inverse h2, .ground-inverse h3, .footer--dark h2, .footer--dark h3 { color: var(--p-inv-ink); }

/* logo in nav and footer (client SVG, text as paths) */
.nav__logo img { height: 34px; width: auto; display: block; }
.footer .nav__logo img { height: 40px; }

/* ---------- Ring (Leistungsmarke) ---------- */
.ring { display: block; flex: none; }
.ring path.s { stroke: var(--ci-seg); }
.ring.k0 path.s0, .ring.k1 path.s1, .ring.k2 path.s2, .ring.k3 path.s3, .ring.k4 path.s4 { stroke: var(--ci-red); }
.ring--all path.s { stroke: var(--ci-navy); }

/* ---------- Leistungskacheln (freigegeben 2026-11-10, logo/web/leistungskacheln.html) ---------- */
.lk { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.lk > li { display: flex; }
.lk .lk__tile { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 24px; background: #fff;
  border-radius: 12px; box-shadow: 0 1px 3px color-mix(in srgb, var(--ci-navy) 8%, transparent); text-decoration: none; color: var(--ci-navy); }
a.lk__tile:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--ci-navy) 14%, transparent); }
.lk .lk__head { display: flex; align-items: center; gap: 12px; }
.lk .ring { width: 44px; height: 44px; }
.lk .lk__name { font-weight: 800; font-size: 16px; line-height: 1.2; }
.lk .lk__name small { display: block; font-weight: 500; font-size: 12px; color: var(--ci-grey); letter-spacing: .06em; margin-top: 2px; }
.lk .pict { width: 28px; height: 28px; color: var(--ci-navy); }
.lk p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ci-grey); }
#leistungen { background: var(--p-surface); }
@media (max-width: 1023px) { .lk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lk { grid-template-columns: 1fr; gap: 12px; } .lk .lk__tile { padding: 16px 20px; gap: 8px; } }

/* ---------- Platzhalter für fehlendes Kundenmaterial (site-craft: Slot klar benennen) ---------- */
.slot { position: relative; display: grid; place-items: center; align-content: center; gap: 16px; width: 100%; height: 100%;
  background: var(--p-surface); border-radius: var(--r-lg); color: var(--p-muted); text-align: center; padding: 24px; }
.slot .ring { width: min(40%, 200px); height: auto; opacity: .9; }
.slot__label { font-size: 14px; line-height: 1.4; max-width: 28ch; }
.ph { border-bottom: 1px dashed currentColor; white-space: nowrap; }

/* ---------- Arbeitsweise ---------- */
.facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(27, 36, 48, .14); }
.facts li { padding: 20px 0; border-bottom: 1px solid rgba(27, 36, 48, .14); }
.facts h3 { font-size: var(--t-card); line-height: 1.3; margin: 0 0 6px; font-weight: 500; }
.facts p { margin: 0; color: var(--p-ink); }

/* ---------- Support-Kanäle ---------- */
.channels { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.channel { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ci-navy) 8%, transparent); color: var(--p-ink); text-decoration: none; }
.channel img, .channel svg.ch-ic { width: 40px; height: 40px; }
.channel h3 { margin: 0; font-size: var(--t-card); }
.channel p { margin: 0; }
.channel .link { margin-top: auto; }
@media (max-width: 1023px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .channels { grid-template-columns: 1fr; gap: 12px; } .channel { padding: 16px 20px; } }

.lk-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; }
.lk-foot p { margin: 0; max-width: 62ch; }
@media (max-width: 639px) { .lk-foot { flex-direction: column; align-items: stretch; margin-top: 32px; } }
.support-rows { margin-top: 48px; }
@media (max-width: 639px) { .support-rows { margin-top: 32px; } }
.contact-person { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 24px; }
.contact-person p { margin: 0 0 4px; }
.contact-person__name { font-weight: 500; font-size: var(--t-card); color: var(--ci-navy); }
.slot--portrait { width: 240px; height: 300px; flex: none; }
@media (max-width: 639px) { .slot--portrait { width: 165px; height: 206px; } }

/* footer on Navy: logo negative */
.footer--dark .footer__lede, .footer--dark .footer__legal { color: var(--p-inv-muted); }

/* the message field runs the full form width */
.form .field:has(textarea) { grid-column: 1 / -1; }

/* hover lift for linked tiles and channel cards, as the kit's .card (motion.md: 2px, 200ms) */
.channel, a.lk__tile { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) :is(.channel, a.lk__tile):hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--ci-navy) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .channel, a.lk__tile { transition: none; } :is(.channel, a.lk__tile):hover { transform: none; } }

/* five tiles between 1024 and 1279: the name under the ring so "Rechenzentrum" fits */
@media (min-width: 1024px) and (max-width: 1279px) { .lk .lk__head { flex-direction: column; align-items: flex-start; gap: 8px; } .lk .lk__tile { padding: 20px; } }
/* 640 to 1023: two columns, the fifth tile takes the full row */
@media (min-width: 640px) and (max-width: 1023px) { .lk > li:last-child { grid-column: 1 / -1; } }

/* phone: the hero's placeholder label stays clear of the float card; channels as compact rows */
@media (max-width: 639px) {
  .hero__media .slot { align-content: start; padding-top: 20px; }
  .hero__media .slot .ring { width: 72px; }
  .channel { flex-direction: row; align-items: center; gap: 16px; }
  .channel p { display: none; }
  .channel img, .channel svg.ch-ic { width: 32px; height: 32px; flex: none; }
  .channel h3 { flex: 1; }
  .channel .link { margin-top: 0; }
  .support-rows > li > p { display: none; }
}

/* 320 to 399: smaller logo, channel rows without the repeated link line, hero placeholder label off */
@media (max-width: 639px) { .nav__logo img { height: 28px; } .channel .link { display: none; } }
@media (max-width: 399px) { .hero__media .slot__label { display: none; } .nav__logo img { height: 24px; } }

/* support channels as a list beside the CRM365 panel */
.ch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(27, 36, 48, .14); }
.ch-list li > :is(a, div) { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(27, 36, 48, .14); color: var(--p-ink); text-decoration: none; min-height: 72px; }
.ch-list img, .ch-list svg.ch-ic { width: 32px; height: 32px; flex: none; }
.ch-list b { display: block; font-weight: 500; font-size: var(--t-card); color: var(--ci-navy); }
.ch-list span > span { color: var(--p-muted); }
.ch-list a { transition: padding-left .2s; }
@media (hover: hover) and (pointer: fine) { html:not([data-motion="off"]) .ch-list a:hover { padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .ch-list a { transition: none; } }
.ch-panel { --p-h: 500px; background: var(--p-surface) !important; background-image: none !important; }
.ch-panel .ui-note__btn { background: var(--ci-navy); color: #fff; }
:is(#preise, #enthalten, #umfang) .rows > li > p { font-size: var(--t-lead); line-height: 1.5; }
:is(#preise, #enthalten, #umfang) :is(.rows__name, .rows__value) { font-size: var(--t-lead); }
@media (max-width: 639px) { .ch-panel { --p-h: 300px; } }

/* subpages */
.channels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .channels--3 { grid-template-columns: 1fr; } }
.ablauf-panel { --p-h: 300px; background: var(--p-surface) !important; background-image: none !important; }
@media (max-width: 639px) { .ablauf-panel { --p-h: 560px; } }
.ch-panel--hero { --p-h: 100%; height: 100%; }
.slot--shot { min-height: 420px; }
@media (max-width: 639px) { .slot--shot { min-height: 240px; } }
.steps { counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; }
.steps li::before { content: counter(st); grid-row: span 2; font-weight: 500; font-size: var(--t-card); color: var(--ci-red); }

/* Betreuung: the way to a contract as five numbered steps */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.flow li { border-top: 2px solid var(--ci-seg); padding-top: 24px; }
.flow li:last-child { border-top-color: var(--ci-red); }
.flow__n { display: block; font-size: 28px; line-height: 1; color: var(--ci-navy); margin-bottom: 16px; letter-spacing: -0.03em; }
.flow h3 { margin: 0 0 8px; font-size: var(--t-card); font-weight: 500; }
.flow p { margin: 0; }
@media (max-width: 1023px) { .flow { grid-template-columns: 1fr; gap: 0; } .flow li { display: grid; grid-template-columns: 56px 1fr; padding: 16px 0; } .flow__n { grid-row: span 2; font-size: 32px; margin: 0; } }

/* template parts render in a wrapper div; it must not take part in the layout */
.fs-part { display: contents; }

/* WordPress layer */
@media (max-width: 639px) { .section--hm2 { --hm: 2; } }
.slot-tall .slot { min-height: 520px; }
@media (max-width: 639px) { .slot-tall .slot { min-height: 300px; } }
.hero__media .slot { height: 100%; }
.legal { max-width: 62ch; }
.legal dl { display: grid; grid-template-columns: minmax(0, 16ch) 1fr; gap: 12px 24px; margin: 24px 0 0; }
.legal dt { color: var(--p-muted); }
.legal dd { margin: 0; }
@media (max-width: 639px) { .legal dl { grid-template-columns: 1fr; gap: 4px; } .legal dd { margin-bottom: 12px; } }
.fd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; }
.fd-stats dt { font-size: 14px; color: var(--p-muted); }
.fd-stats dd { margin: 0; font-size: var(--t-card); color: var(--ci-navy); }
.fd-stats__stand { font-size: 14px; color: var(--p-muted); margin: 0; }

/* a button row inside a flex foot: the button is the flex item, as in the prototype */
.lk-foot .btn-row { display: contents; }

/* WordPress wraps the page in .wp-site-blocks; it must not be a box of its own (equal edges, fixed header) */
.wp-site-blocks { display: contents; }

/* contact icons take the brand colour */
.ch-ic { color: var(--ci-navy); }

/* editor-only notes in legal texts */
.fd-offen { display: block; margin: 8px 0; padding: 8px 12px; background: #fff4c2; color: #4a3b00; border-left: 3px solid #d4a200; font-size: 14px; }
.legal h2 { font-size: var(--t-card); margin: 40px 0 8px; }
.legal p, .legal li { max-width: 62ch; }