/*
 * Projekt: IKOMM Website
 * Datei: assets/css/style.css
 * Version: 0.7 Rev5
 * Stand: 10. Oktober 2026
 * Aufgabe: Gemeinsame Gestaltung aller öffentlichen Seiten.
 * Codierung: UTF-8 ohne BOM
 */

/* Lokale Schriften und zentrale Farben */
@font-face { font-family: "Montserrat"; src: url("../../fonts/montserrat-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/montserrat-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../fonts/montserrat-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #183256;
  --navy-dark: #0b1e38;
  --blue-soft: #e9f0f8;
  --silver: #aab4c1;
  --ink: #132139;
  --muted: #5d6a79;
  --muted-on-dark: #b7c8d9;
  --line: #dbe2ea;
  --paper: #f7f9fb;
  --heading-note-size: 1rem;
  --heading-note-line-height: 1.8;
}

/* Allgemeine Seitengrundlagen und Navigation */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Montserrat", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { height: 84px; max-width: 1360px; margin: 0 auto; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-bottom: 1px solid rgba(219,226,234,.7); background: rgba(255,255,255,.94); position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 180px; }
.brand img { width: 180px; height: auto; max-height: 63px; display: block; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: .8125rem; font-weight: 500; color: #34455c; }
.main-nav a { white-space: nowrap; position: relative; transition: color .2s ease; }
.main-nav a:hover { color: var(--navy); }
.main-nav .is-active { color: var(--navy); }
.main-nav .is-active::after { content: ""; height: 2px; position: absolute; right: 0; bottom: -10px; left: 0; background: var(--navy); }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { width: 42px; height: 42px; display: grid; place-content: center; gap: 4px; list-style: none; cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary span { width: 22px; height: 2px; display: block; background: var(--navy); border-radius: 2px; }
.mobile-nav nav { width: 210px; position: absolute; right: 0; top: 50px; padding: 10px; display: grid; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 20px 50px rgba(12,31,57,.17); }
.mobile-nav nav a { padding: 12px 13px; color: var(--navy); font-size: .8125rem; font-weight: 700; }
.mobile-nav nav a.is-active { border-radius: 7px; background: var(--blue-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 54px; padding: 0 24px; border: 1px solid var(--navy); background: var(--navy); color: white; font-size: .84rem; font-weight: 700; border-radius: 8px; box-shadow: 0 11px 24px rgba(24,50,86,.17); transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); background: #224773; }
.button-small { min-height: 44px; padding: 0 18px; font-size: .8125rem; }

.hero { min-height: 690px; max-width: 1360px; margin: 0 auto; padding: 90px 70px 100px; display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; gap: 80px; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #fff 55%, #f3f6fa 100%); }
.hero-copy { max-width: 680px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; color: var(--navy); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 700px; color: var(--navy-dark); font-size: clamp(2.64rem, 4.22vw, 4.53rem); line-height: 1.01; letter-spacing: -.055em; font-weight: 700; }
.hero h1 span { color: var(--navy); position: relative; display: inline-block; padding-bottom: .09em; }
.hero h1 span::after { content: ""; position: absolute; left: 3px; right: 0; bottom: 0; height: clamp(2px, .045em, 4px); background: linear-gradient(90deg, var(--navy), #b5c0cc); border-radius: 2px; }
.hero-lead { max-width: 650px; margin: 30px 0 0; color: #3f4f63; font-size: 1.15rem; line-height: 1.75; }
.hero-benefit { margin: 13px 0 0; color: var(--navy); font-size: 1rem; font-weight: 700; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 34px; }
.text-link { color: var(--navy); font-size: .82rem; font-weight: 700; border-bottom: 1px solid #b9c5d3; padding: 8px 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 38px 0 0; padding: 0; list-style: none; color: #536176; font-size: .8125rem; font-weight: 500; }
.trust-row li::before { content: "✓"; display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 8px; border: 1px solid #a9b9ca; border-radius: 50%; color: var(--navy); font-weight: 700; }

.hero-visual { min-height: 480px; position: relative; display: grid; place-items: center; }
.hero-symbol-stage { width: 100%; min-height: 480px; position: relative; display: grid; place-items: center; }
.hero-symbol-stage::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #eef3f8, #d8e1eb 54%, #c4ced9 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 40px 80px rgba(32,54,82,.12); }
.visual-orbit { position: absolute; width: 510px; height: 510px; border: 1px solid rgba(24,50,86,.15); border-radius: 50%; }
.visual-orbit-two { width: 590px; height: 590px; border-style: dashed; opacity: .45; }
.hero-logo-card { width: 300px; min-height: 330px; padding: 38px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.75); box-shadow: 0 28px 60px rgba(18,40,70,.15); backdrop-filter: blur(10px); }
.hero-logo-card img { width: 178px; height: 178px; object-fit: contain; filter: drop-shadow(0 16px 17px rgba(23,46,77,.2)); }
.hero-logo-card strong { margin-top: 18px; color: var(--navy); font-size: 1.55rem; letter-spacing: .16em; }
.hero-logo-card span { margin-top: 9px; text-align: center; color: #5c6979; font-size: .8125rem; line-height: 1.6; }
.hero-notes { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.floating-note { width: 215px; min-height: 70px; padding: 12px 15px; position: absolute; display: flex; align-items: center; gap: 10px; border: 1px solid #c7d3df; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 14px 32px rgba(22,45,75,.15); pointer-events: auto; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.floating-note:hover, .floating-note:focus-visible { border-color: #93a9c0; box-shadow: 0 18px 38px rgba(22,45,75,.2); transform: translateY(-3px); outline: none; }
.floating-note b { width: 46px; flex: 0 0 46px; color: var(--navy); text-align: center; font-size: .8125rem; line-height: 1; letter-spacing: .04em; }
.floating-note span { color: #344a64; font-size: .8125rem; font-weight: 500; line-height: 1.42; }
.note-three b { font-size: 1.05rem; }
.note-one { left: -18px; top: 54px; }
.note-two { right: -18px; top: 54px; }
.note-three { left: -18px; bottom: 34px; }
.note-four { right: -18px; bottom: 34px; }

.section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; }
.solutions { background: var(--navy-dark); color: white; }
.section-heading { display: grid; grid-template-columns: 1.5fr .7fr; align-items: end; gap: 80px; margin-bottom: 46px; }
.section-heading .eyebrow { color: #a9bfd8; }
.section-heading h2 { max-width: 760px; margin: 0; font-size: clamp(1.89rem, 2.73vw, 3.12rem); line-height: 1.08; letter-spacing: -.04em; }
.section-heading > p { margin: 0; color: #b8c4d1; }
.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.solution-card { min-height: 430px; padding: 26px 24px 24px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.solution-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.card-topline { display: flex; justify-content: space-between; color: #90a3b9; font-size: .8125rem; letter-spacing: .14em; }
.card-arrow { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -5px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: .95rem; }
.solution-card h3 { margin: 32px 0 7px; font-size: 1.28rem; }
.card-kicker { margin: 0 0 20px !important; color: #b7c8da !important; font-size: .8125rem !important; font-weight: 700; }
.solution-card p { margin: 0; color: #acb8c6; font-size: .8125rem; line-height: 1.75; }
.solution-card ul { display: grid; gap: 8px; margin: 24px 0; padding: 0; list-style: none; color: #e0e7ee; font-size: .8125rem; }
.solution-card li::before { content: "—"; margin-right: 8px; color: #809ab5; }
.solution-card a { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; color: white; font-size: .8125rem; font-weight: 700; }

.section-light { max-width: 1360px; margin: 0 auto; padding: 110px 70px; background: var(--paper); }
.promise { display: grid; grid-template-columns: 1.12fr .88fr; gap: 88px; align-items: center; }
.promise h2, .process h2, .seo-copy h2, .quality h2, .about h2, .contact h2 { margin: 0; color: var(--navy-dark); font-size: clamp(1.85rem, 2.77vw, 3.21rem); line-height: 1.08; letter-spacing: -.045em; }
.promise-copy > p:not(.eyebrow) { max-width: 700px; margin: 25px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.promise-list { margin-top: 38px; display: grid; border-top: 1px solid var(--line); }
.promise-list > div { padding: 19px 0; display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; border-bottom: 1px solid var(--line); }
.promise-list > div > span { color: var(--muted); font-size: .8125rem; letter-spacing: .12em; }
.promise-list p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.promise-list b { margin-bottom: 4px; display: block; color: var(--navy); font-size: .85rem; }
.modern-card { padding: 48px; border-radius: 20px; background: var(--navy); color: white; box-shadow: 0 30px 65px rgba(18,45,81,.18); }
.mini-label { margin: 0 0 28px; color: var(--muted-on-dark); font-size: .8125rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.modern-card h3 { margin: 0; font-size: 1.75rem; line-height: 1.35; letter-spacing: -.025em; }
.modern-card > p:not(.mini-label) { margin: 20px 0 0; color: #c7d2de; font-size: .8125rem; line-height: 1.8; }
.modern-card ul { margin: 27px 0 30px; padding: 0; display: grid; gap: 12px; list-style: none; color: #eff3f7; font-size: .8125rem; }
.modern-card li::before { content: "✓"; margin-right: 10px; color: #bccbda; }
.text-link-light { color: white; border-color: rgba(255,255,255,.3); }
.section-more-link { display: inline-block; margin-top: 28px; }

.heading-dark .eyebrow { color: var(--navy); }
.heading-dark > p { color: var(--muted); }
.process-track { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-track article { min-height: 240px; padding: 28px 28px 30px 0; border-right: 1px solid var(--line); }
.process-track article:not(:first-child) { padding-left: 28px; }
.process-track article:last-child { border-right: 0; }
.process-track span { color: var(--muted); font-size: .8125rem; letter-spacing: .14em; }
.process-track h3 { margin: 62px 0 12px; color: var(--navy); font-size: 1.02rem; }
.process-track p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }

.seo-section { max-width: 1360px; margin: 0 auto; padding: 0 70px 110px; }
.seo-panel { padding: 80px 70px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; border-radius: 22px; background: linear-gradient(140deg, #edf2f7, #f9fbfc); overflow: hidden; }
.seo-visual { min-height: 430px; padding: 38px 30px; position: relative; border: 1px solid #d9e1e9; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 30px 60px rgba(24,50,86,.12); transform: rotate(-2deg); }
.search-bar { height: 50px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border: 1px solid #d7dfe8; border-radius: 25px; color: #566478; font-size: .8125rem; }
.search-bar span { font-size: 1.35rem; color: var(--navy); }
.result-card { margin-top: 18px; padding: 16px 18px; min-height: 84px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #e0e5eb; border-radius: 10px; background: white; }
.result-card span { color: #526176; font-size: .8125rem; }
.result-card strong { color: var(--navy); font-size: .8125rem; }
.result-card i { display: block; width: 82%; height: 7px; border-radius: 4px; background: #e8edf2; }
.result-card i + i { width: 58%; }
.result-card.featured { border-color: #aabbd0; box-shadow: 0 12px 24px rgba(31,58,92,.08); }
.seo-copy > p:not(.eyebrow) { margin: 24px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.85; }
.check-list { margin: 30px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; color: #34465e; font-size: .8125rem; font-weight: 500; }
.check-list > li::before { content: "✓"; display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 11px; border-radius: 50%; background: var(--navy); color: white; font-size: .8125rem; }
.check-list-with-info { position: relative; }
.info-popover { margin-left: 5px; position: relative; display: inline-block; vertical-align: middle; }
.info-popover summary { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid #9aabba; border-radius: 50%; background: white; color: var(--navy); font-size: .8125rem; font-weight: 700; line-height: 1; list-style: none; cursor: pointer; }
.info-popover summary::-webkit-details-marker { display: none; }
.info-popover summary:hover, .info-popover summary:focus-visible { border-color: var(--navy); outline: 3px solid rgba(24,50,86,.12); outline-offset: 2px; }
.info-popover-card { width: min(390px, calc(100vw - 48px)); padding: 20px 22px; position: absolute; right: -8px; bottom: calc(100% + 12px); z-index: 20; border: 1px solid #cbd6e1; border-radius: 12px; background: white; color: var(--muted); font-size: .8125rem; font-weight: 400; line-height: 1.65; box-shadow: 0 18px 42px rgba(18,45,81,.18); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.info-popover-card::after { content: ""; width: 10px; height: 10px; position: absolute; right: 13px; bottom: -6px; border-right: 1px solid #cbd6e1; border-bottom: 1px solid #cbd6e1; background: white; transform: rotate(45deg); }
.info-popover-card strong { display: block; margin-bottom: 9px; color: var(--navy); font-size: .8125rem; }
.info-popover-card p { margin: 0 0 10px; }
.info-popover-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.info-popover[open] .info-popover-card, .info-popover:hover .info-popover-card { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.quality { padding-top: 20px; }
.quality-intro { max-width: 770px; margin-bottom: 50px; }
.quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quality-grid article { min-height: 275px; padding: 30px 28px; background: white; }
.quality-grid span { color: var(--muted); font-size: .8125rem; }
.quality-grid h3 { margin: 77px 0 15px; color: var(--navy); font-size: 1rem; }
.quality-grid p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.75; }

.about { max-width: 1360px; margin: 0 auto; padding: 110px 70px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: center; background: var(--paper); }
.about-mark { min-height: 380px; padding: 54px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 18px; background: var(--navy-dark); color: white; box-shadow: 0 30px 60px rgba(11,30,56,.18); }
.about-mark img { width: 105px; height: 105px; filter: drop-shadow(0 14px 15px rgba(0,0,0,.23)); }
.about-mark span { font-size: 1.75rem; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.about-copy > p:not(.eyebrow) { margin: 25px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.85; }
.about-facts { margin-top: 35px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-facts span { padding-top: 17px; border-top: 1px solid var(--line); color: #44546a; font-size: .8125rem; line-height: 1.55; }
.about-facts b { display: block; margin-bottom: 10px; color: var(--muted); font-size: .8125rem; letter-spacing: .12em; }

.contact { background: var(--navy); color: white; }
.contact .eyebrow { color: #b6c8db; }
.contact h2 { max-width: 850px; color: white; }
.contact > p:not(.eyebrow) { max-width: 700px; margin: 24px 0 0; color: #c2cfdb; font-size: .9rem; line-height: 1.8; }
.contact-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; }
.button-light { background: white; border-color: white; color: var(--navy); box-shadow: none; }
.button-light:hover { background: #eef3f8; }
.contact-actions > span { color: #b4c2d0; font-size: .8125rem; }
.contact-quick { max-width: 760px; margin-top: 50px; padding-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 46px; border-top: 1px solid rgba(255,255,255,.2); }
.contact-quick div { display: grid; gap: 9px; }
.contact-quick span { color: #9eb0c3; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-quick a { color: white; font-size: .82rem; font-weight: 700; }
/* Gemeinsamer Footer: klare Bereiche und einheitliche Abstände (0.7 Rev2). */
footer {
  --footer-space: .75em;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--footer-space) 70px;
  background: #08182e;
  color: #b0bdca;
  font-size: .8125rem;
  line-height: 1.4;
}
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 90px; }
.footer-brand { display: flex; align-items: center; flex-shrink: 0; }
.footer-brand img { width: 270px; max-width: 100%; height: auto; display: block; }
.footer-links { display: grid; gap: var(--footer-space); }
.footer-links-row { display: flex; flex-wrap: wrap; gap: var(--footer-space); }
.footer-links a, .footer-legal-links a { white-space: nowrap; }
.footer-bottom {
  margin-top: var(--footer-space);
  padding-top: var(--footer-space);
  border-top: 1px solid #253a51;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--footer-space);
  color: #91a3b8;
}
.footer-copyright { display: grid; gap: var(--footer-space); }
.footer-version { white-space: nowrap; }
.footer-legal-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--footer-space); }
@media (max-width: 1200px) {
  footer { padding-right: 38px; padding-left: 38px; }
  .footer-top { gap: 48px; }
}
@media (max-width: 950px) {
  .footer-top { align-items: flex-start; flex-direction: column; gap: var(--footer-space); }
  .footer-links { width: 100%; }
}
@media (max-width: 760px) {
  footer { padding-right: 20px; padding-left: 20px; }
  .footer-brand img { width: 220px; }
}
@media (max-width: 420px) {
  .footer-links { display: flex; flex-wrap: wrap; gap: var(--footer-space); }
  .footer-links-row { display: contents; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: var(--footer-space); }
}

@media (max-width: 1200px) {
  .site-header { padding: 0 28px; }
  .main-nav { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .hero { padding: 72px 38px 85px; grid-template-columns: 1fr .82fr; gap: 32px; }
  .hero-visual { transform: scale(.85); }
  .section { padding: 90px 38px; }
  .section-light { padding: 90px 38px; }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .promise { grid-template-columns: 1fr; gap: 45px; }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .process-track article:nth-child(2) { border-right: 0; }
  .process-track article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .seo-section { padding: 0 38px 90px; }
  .seo-panel { padding: 58px 45px; gap: 50px; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .about { padding: 90px 38px; gap: 50px; }
}

@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 18px; }
  .brand { min-width: auto; }
  .brand img { width: 148px; height: auto; max-height: 52px; }
  .site-header > .button { min-height: 40px; padding: 0 12px; font-size: .8125rem; }
  .mobile-nav { order: 3; margin-left: 0; }
  .site-header > .button { display: none; }
  .hero { min-height: auto; padding: 64px 22px 72px; display: flex; flex-direction: column; gap: 56px; }
  .eyebrow { font-size: .8125rem; line-height: 1.65; }
  .hero h1 { font-size: clamp(2.33rem, 11vw, 3.39rem); }
  .hero-lead { font-size: 1rem; line-height: 1.7; }
  .hero-benefit { font-size: .88rem; line-height: 1.55; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .hero-actions .text-link { align-self: flex-start; }
  .button { width: 100%; min-height: 56px; }
  .trust-row { display: grid; gap: 13px; }
  .hero-visual { width: 100%; min-height: auto; display: block; transform: none; }
  .hero-symbol-stage { min-height: 350px; }
  .hero-symbol-stage::before { width: 310px; height: 310px; }
  .visual-orbit { width: 355px; height: 355px; }
  .visual-orbit-two { width: 410px; height: 410px; }
  .hero-logo-card { width: 230px; min-height: 265px; padding: 24px; border-radius: 22px; }
  .hero-logo-card img { width: 135px; height: 135px; }
  .hero-notes { margin-top: 18px; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; pointer-events: auto; }
  .floating-note { width: auto; min-height: 68px; padding: 10px 11px; position: static; box-shadow: 0 10px 24px rgba(22,45,75,.1); }
  .floating-note b { width: 42px; flex-basis: 42px; font-size: .8125rem; }
  .note-three b { font-size: .95rem; }
  .floating-note span { font-size: .8125rem; }
  .section { padding: 76px 20px; }
  .section-light { padding: 76px 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; }
  .section-heading h2 { font-size: 2.05rem; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 390px; }
  .modern-card { padding: 34px 26px; }
  .process-track { grid-template-columns: 1fr; }
  .process-track article, .process-track article:not(:first-child) { min-height: 190px; padding: 24px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .process-track article:last-child { border-bottom: 0; }
  .process-track h3 { margin-top: 35px; }
  .seo-section { padding: 0 20px 76px; }
  .seo-panel { padding: 46px 20px; grid-template-columns: 1fr; gap: 48px; }
  .seo-panel .seo-copy { order: 1; }
  .seo-panel .seo-visual { order: 2; }
  .seo-visual { min-height: 350px; padding: 25px 18px; transform: none; }
  .quality { padding-top: 10px; }
  .quality-grid { grid-template-columns: 1fr; }
  .quality-grid article { min-height: 220px; }
  .quality-grid h3 { margin-top: 48px; }
  .about { padding: 76px 20px; grid-template-columns: 1fr; gap: 46px; }
  .about-mark { min-height: 320px; padding: 38px; }
  .about-facts { grid-template-columns: 1fr; }
  .contact-actions { align-items: stretch; flex-direction: column; }
  .contact-actions > span { text-align: center; }
  .contact-quick { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.legal-page { min-height: calc(100vh - 84px); max-width: 1000px; margin: 0 auto; padding: 90px 70px 110px; }
.legal-page h1 { margin: 0; color: var(--navy-dark); font-size: clamp(2.02rem, 3.87vw, 3.52rem); line-height: 1.08; letter-spacing: -.045em; }
.legal-page .legal-card { margin-top: 36px; padding: 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--muted); line-height: 1.8; }
.legal-page .legal-card strong { color: var(--navy); }
.legal-page .text-link { display: inline-block; margin-top: 28px; }

@media (max-width: 760px) {
  .legal-page { min-height: calc(100vh - 72px); padding: 62px 20px 80px; }
  .legal-page .legal-card { padding: 25px 20px; }
}
/*
 * IKOMM Website 0.5 – Gestaltung der Lösungsübersicht
 * Dieser Abschnitt wird in die zentrale assets/css/style.css integriert.
 */

.solutions-hero {
  max-width: 1360px;
  min-height: 630px;
  margin: 0 auto;
  padding: 92px 70px 100px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 90px;
  background: linear-gradient(135deg, #fff 0%, #fff 53%, #f1f5f9 100%);
  overflow: hidden;
}

.solutions-hero h1,
.solutions-intro h2,
.package-heading h2,
.comparison-heading h2,
.common-heading h2,
.independence-copy h2,
.search-copy h2,
.collaboration-heading h2,
.solutions-cta h2 {
  margin: 0;
  color: var(--navy-dark);
  font-size: clamp(2.02rem, 3.43vw, 3.83rem);
  line-height: 1.04;
  letter-spacing: -.052em;
}

.solutions-hero-copy {
  position: relative;
  z-index: 2;
}

.solutions-hero-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: #46566a;
  font-size: 1.05rem;
  line-height: 1.8;
}

.solutions-hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.solutions-trust {
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  list-style: none;
  color: #526176;
  font-size: .8125rem;
  font-weight: 500;
}

.solutions-trust li {
  display: flex;
  align-items: center;
}

.solutions-trust b {
  min-width: 22px;
  margin-right: 8px;
  color: #8d9daf;
  font-size: .8125rem;
  letter-spacing: .08em;
  font-weight: 700;
}

.solutions-hero-panel {
  min-height: 430px;
  padding: 54px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,238,245,.78));
  box-shadow: 0 30px 65px rgba(18,45,81,.14);
}

.solutions-hero-panel::before,
.solutions-hero-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(24,50,86,.12);
  border-radius: 50%;
}

.solutions-hero-panel::before { width: 490px; height: 490px; inset: -30px; }
.solutions-hero-panel::after { width: 570px; height: 570px; inset: -70px; border-style: dashed; opacity: .55; }

.solution-count {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: var(--navy);
}

.solution-count strong { font-size: 5.6rem; line-height: 1; letter-spacing: -.07em; }
.solution-count span { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

.solution-mini-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.solution-mini-grid a {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d8e0e8;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.solution-mini-grid a:hover,
.solution-mini-grid a:focus-visible {
  transform: translateY(-2px);
  border-color: #a7b9cc;
  background: white;
  box-shadow: 0 10px 22px rgba(24,50,86,.1);
}

.solution-mini-grid a > span { margin-left: auto; color: #8b9caf; }
.solution-mini-grid b { color: #97a5b5; font-size: .8125rem; letter-spacing: .1em; }
.solutions-hero-panel > p { margin: 26px 0 0; color: #687587; font-size: .8125rem; line-height: 1.7; }

.solutions-intro {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
  text-align: center;
}

.solutions-intro h2 { font-size: clamp(2.11rem, 3.34vw, 3.78rem); }
.solutions-intro > p:not(.eyebrow) { max-width: 820px; margin: 28px auto 0; color: var(--muted); font-size: .95rem; line-height: 1.85; }

.solutions-message {
  max-width: 930px;
  margin: 52px auto 0;
  padding: 27px 32px;
  display: grid;
  gap: 8px;
  border: 1px solid #c8d3df;
  border-radius: 14px;
  background: var(--blue-soft);
}

.solutions-message strong { color: var(--navy); font-size: 1.04rem; }
.solutions-message span { color: #5b697a; font-size: .8125rem; line-height: 1.6; }

.package-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
  background: var(--navy-dark);
  color: white;
}

.package-heading {
  margin-bottom: 46px;
  display: grid;
  grid-template-columns: 1.45fr .75fr;
  align-items: end;
  gap: 80px;
}

.package-heading .eyebrow { color: #a9bfd8; }
.package-heading h2 { color: white; font-size: clamp(2.11rem, 3.26vw, 3.74rem); }
.package-heading > p { margin: 0; color: #b4c1cf; }

.package-foundation {
  margin-bottom: 28px;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 42px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 15px;
  background: rgba(255,255,255,.08);
}

.package-foundation-label {
  margin: 0 0 12px;
  color: #9eb3c8;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.package-foundation h3 { margin: 0; font-size: 1.35rem; line-height: 1.4; }
.package-foundation ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; color: #e0e7ee; font-size: .8125rem; line-height: 1.65; }
.package-foundation li { display: grid; grid-template-columns: 1em minmax(0, 1fr); gap: 10px; align-items: start; }
.package-foundation li::before { content: "✓"; color: #aec1d3; }

.package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.package-card {
  min-height: 760px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  scroll-margin-top: 30px;
}

.package-one { border-top: 3px solid rgba(151,171,192,.55); }
.package-basis { border-top: 3px solid rgba(163,188,212,.7); }
.package-active { border-top: 3px solid rgba(185,211,235,.88); background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)); }
.package-custom { border-top: 3px solid #d3e1ee; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)); }

.package-number { color: #91a5bb; font-size: .8125rem; letter-spacing: .15em; }
.package-label { margin: 35px 0 6px; color: #b2c4d6; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.package-card h3 { margin: 0; font-size: 1.7rem; letter-spacing: -.025em; }
.package-card h4 { margin: 0 0 11px; color: white; font-size: .8125rem; }
.package-card ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; color: #e2e8ee; font-size: .8125rem; line-height: 1.6; }
.package-card li { display: grid; grid-template-columns: 1em minmax(0, 1fr); gap: 10px; align-items: start; }
.package-card li::before { content: "✓"; color: #a9bdd0; }
.package-block { margin-top: 25px; }
.package-block p { margin: 0; color: #c3ced9; font-size: .8125rem; line-height: 1.7; }
.package-fit { min-height: 96px; }
.package-limit { padding: 16px; border-left: 2px solid #9bb1c8; background: rgba(255,255,255,.055); }
.package-options { padding-top: 23px; border-top: 1px solid rgba(255,255,255,.11); }
.package-card > a { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); color: white; font-size: .8125rem; font-weight: 700; }

.comparison-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
}

.comparison-heading { max-width: 900px; }
.comparison-heading h2 { font-size: clamp(2.11rem, 3.26vw, 3.78rem); }
.comparison-heading > p:not(.eyebrow) { max-width: 740px; margin: 24px 0 0; color: var(--muted); }

.comparison-scroll { margin-top: 45px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.comparison-table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: .8125rem; }
.comparison-table th, .comparison-table td { padding: 17px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.55; }
.comparison-table thead th { background: var(--navy); color: white; font-size: .8125rem; }
.comparison-table thead th:first-child { width: 28%; }
.comparison-table tbody th { color: var(--navy); font-weight: 700; }
.comparison-table tbody tr:nth-child(even) { background: var(--paper); }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }


/* Lösungsvergleich im Handy-Querformat: Breite verteilen statt Schrift verkleinern.
   Unter 600px bleibt die vorhandene horizontale Scrollmöglichkeit erhalten.
   Die ID bindet die Anpassung an diese Tabelle und übersteht spätere Grundregeln. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1100px) {
  #vergleich { width: 95%; padding-right: 0; padding-left: 0; }
  #vergleich .comparison-table { min-width: 0; table-layout: fixed; }
  #vergleich .comparison-table th, #vergleich .comparison-table td { padding: 14px 7px; overflow-wrap: anywhere; hyphens: auto; }
}

.common-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
  background: var(--paper);
}

.common-heading { max-width: 850px; margin-bottom: 48px; }
.common-heading h2 { font-size: clamp(2.11rem, 3.26vw, 3.78rem); }
.common-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.common-grid article { min-height: 285px; padding: 30px; background: white; }
.common-grid span { color: var(--muted); font-size: .8125rem; letter-spacing: .13em; }
.common-grid h3 { margin: 73px 0 14px; color: var(--navy); font-size: 1rem; }
.common-grid p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.75; }

.independence-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: 86px;
}

.independence-copy h2 { font-size: clamp(2.11rem, 3.26vw, 3.7rem); }
.independence-copy > p:not(.eyebrow) { margin: 26px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.85; }
.independence-copy ul { margin: 30px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; color: #384a61; font-size: .8125rem; }
.independence-copy li::before { content: "✓"; margin-right: 11px; color: var(--navy); font-weight: 700; }
.independence-card { padding: 50px; border-radius: 20px; background: var(--navy); color: white; box-shadow: 0 30px 65px rgba(18,45,81,.18); }
.independence-card h3 { margin: 0; font-size: 1.85rem; line-height: 1.3; }
.independence-card > p:not(.mini-label) { margin: 22px 0 0; color: #c8d3de; font-size: .8125rem; line-height: 1.8; }

.search-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 100px 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  background: linear-gradient(140deg, #edf2f7, #f9fbfc);
}

.search-copy h2 { font-size: clamp(2.07rem, 3.08vw, 3.52rem); }
.search-copy > p:not(.eyebrow) { margin: 25px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.85; }
.search-facts { display: grid; align-content: start; }
.search-facts article { padding: 20px 0; display: grid; grid-template-columns: 185px 1fr; gap: 20px; border-bottom: 1px solid #ccd6e0; }
.search-facts strong { color: var(--navy); font-size: .8125rem; }
.search-facts span { color: #5c6a7c; font-size: .8125rem; line-height: 1.6; }
.search-facts > p { margin: 26px 0 0; color: #687587; font-size: .8125rem; line-height: 1.7; }

.collaboration-section {
  max-width: 1360px;
  margin: 0 auto;
  padding: 110px 70px;
}

.collaboration-heading { max-width: 930px; margin-bottom: 48px; }
.collaboration-heading h2 { font-size: clamp(2.11rem, 3.26vw, 3.78rem); }
.collaboration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.collaboration-grid article { min-height: 370px; padding: 31px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.collaboration-grid span { color: var(--muted); font-size: .8125rem; letter-spacing: .13em; }
.collaboration-grid h3 { margin: 65px 0 22px; color: var(--navy); font-size: 1.03rem; }
.collaboration-grid ul { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.collaboration-grid li::before { content: "—"; margin-right: 8px; color: #8da1b7; }
.hosting-note { margin-top: 18px; padding: 27px 31px; display: grid; grid-template-columns: 240px 1fr; gap: 28px; border: 1px solid #c9d5e1; border-radius: 13px; background: var(--blue-soft); }
.hosting-note strong { color: var(--navy); font-size: .8125rem; }
.hosting-note p { margin: 0; color: #5b697a; font-size: .8125rem; line-height: 1.7; }

.solutions-cta {
  max-width: 1360px;
  margin: 0 auto;
  padding: 105px 70px;
  text-align: center;
  background: var(--navy);
  color: white;
}

.solutions-cta .eyebrow { color: #b6c8db; }
.solutions-cta h2 { color: white; font-size: clamp(1.98rem, 3.17vw, 3.56rem); }
.solutions-cta > p:not(.eyebrow) { max-width: 760px; margin: 26px auto 34px; color: #c2cfdb; font-size: .88rem; line-height: 1.8; }
.solutions-cta .button { width: auto; }

@media (max-width: 1100px) {
  .solutions-hero { padding: 75px 38px 90px; grid-template-columns: 1fr .82fr; gap: 45px; }
  .solutions-hero-panel { min-height: 390px; padding: 38px; }
  .solutions-hero-panel::before, .solutions-hero-panel::after { display: none; }
  .solutions-intro, .package-section, .comparison-section, .common-section, .independence-section, .collaboration-section { padding: 90px 38px; }
  .package-heading { gap: 45px; }
  .package-foundation { grid-template-columns: 1fr; gap: 20px; }
  .common-grid { grid-template-columns: repeat(2, 1fr); }
  .independence-section { gap: 48px; }
  .search-section { padding: 85px 38px; gap: 45px; }
}

@media (max-width: 760px) {
  .solutions-hero { min-height: auto; padding: 62px 20px 75px; display: flex; flex-direction: column; gap: 48px; }
  .solutions-hero h1 { font-size: clamp(2.24rem, 10.6vw, 3.3rem); }
  .solutions-hero-lead { font-size: .95rem; }
  .solutions-hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .solutions-hero-actions .text-link { align-self: flex-start; }
  .solutions-trust { display: grid; gap: 12px; }
  .solutions-hero-panel { width: 100%; min-height: 340px; padding: 30px 24px; }
  .solution-count strong { font-size: 4.5rem; }
  .solution-mini-grid { grid-template-columns: 1fr; }
  .solutions-intro, .package-section, .comparison-section, .common-section, .independence-section, .collaboration-section { padding: 75px 20px; }
  .solutions-intro { text-align: left; }
  .solutions-intro > p:not(.eyebrow) { margin-left: 0; }
  .solutions-message { text-align: center; }
  .package-heading { grid-template-columns: 1fr; gap: 22px; }
  .package-foundation { padding: 26px 24px; }
  .package-grid { grid-template-columns: 1fr; }
  .package-card { min-height: auto; padding: 28px 24px; }
  .package-fit { min-height: 0; }
  .comparison-scroll::after { content: "Tabelle seitlich verschiebbar"; padding: 10px 14px; display: block; color: #7a8797; font-size: .8125rem; text-align: center; }
  .common-grid { grid-template-columns: 1fr; }
  .common-grid article { min-height: 230px; }
  .common-grid h3 { margin-top: 46px; }
  .independence-section { grid-template-columns: 1fr; gap: 45px; }
  .independence-card { padding: 35px 26px; }
  .search-section { padding: 75px 20px; grid-template-columns: 1fr; gap: 42px; }
  .search-facts article { grid-template-columns: 1fr; gap: 8px; }
  .collaboration-grid { grid-template-columns: 1fr; }
  .collaboration-grid article { min-height: 310px; padding: 27px 24px; }
  .collaboration-grid h3 { margin-top: 45px; }
  .hosting-note { padding: 24px; grid-template-columns: 1fr; gap: 12px; }
  .solutions-cta { padding: 78px 20px; }
  .solutions-cta .button { width: 100%; }
}


/* Häufige Fragen – ein gemeinsamer Abschnitt für die vier Leistungsseiten.
   Fließtext bleibt 16px groß; native Details brauchen kein zusätzliches Skript.
   Flexible Innenabstände ersetzen eigene FAQ-Regeln für jeden Bildschirmtyp. */
.faq-section { max-width: 1360px; margin: 0 auto; padding: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 70px); background: var(--paper); }
.faq-content { max-width: 980px; margin: 0 auto; }
.faq-content h2 { margin: 0 0 30px; color: var(--navy-dark); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.25; letter-spacing: -.025em; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--navy); font-size: 1rem; font-weight: 700; line-height: 1.6; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 1em; text-align: center; font-size: 1.4rem; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible, .faq-contact a:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 3px; }
.faq-item > p { max-width: 72ch; margin: 0; padding: 0 0 24px; color: var(--ink); font-size: 1rem; line-height: 1.8; }
.faq-contact { margin-top: 30px; }
.faq-contact p { max-width: 72ch; margin: 0 0 12px; color: var(--ink); font-size: 1rem; line-height: 1.8; }
.faq-contact .text-link { display: inline-block; font-size: .9375rem; }

/* IKOMM 0.5 – Kontaktformular, Impressum und Datenschutz */

.legal-page { max-width: 1180px; padding: 90px 70px 110px; }
.legal-intro { max-width: 850px; margin-bottom: 48px; }
.legal-intro > p:not(.eyebrow) { max-width: 760px; margin: 24px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.legal-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: stretch; }
.legal-stack { display: grid; gap: 18px; }
.legal-page .legal-card { margin: 0; padding: 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--muted); font-size: .8125rem; line-height: 1.8; }
.legal-page .legal-card-primary { background: var(--navy); border-color: var(--navy); color: #d7e0e9; box-shadow: 0 24px 52px rgba(18,45,81,.16); }
.legal-page .legal-card-primary strong { color: white; }
.legal-page .legal-card h2 { margin: 0 0 18px; color: var(--navy); font-size: 1.35rem; line-height: 1.35; letter-spacing: -.02em; }
.legal-page .legal-card-primary h2 { color: white; font-size: 1.8rem; }
.legal-page .legal-card p { margin: 0 0 16px; }
.legal-page .legal-card p:last-child { margin-bottom: 0; }
.legal-page .legal-card a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: #b9c6d4; text-underline-offset: 3px; }
.legal-page .legal-card-primary a { color: white; text-decoration-color: rgba(255,255,255,.45); }
.legal-kicker { margin: 0 0 12px !important; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-card-primary .legal-kicker { color: #aebfd0; }
.legal-contact-list, .legal-detail-list { margin: 26px 0 0; padding: 0; }
.legal-contact-list > div, .legal-detail-list > div { padding: 11px 0; display: grid; grid-template-columns: 115px 1fr; gap: 12px; border-top: 1px solid rgba(219,226,234,.8); }
.legal-card-primary .legal-contact-list > div { border-color: rgba(255,255,255,.16); }
.legal-contact-list dt, .legal-detail-list dt { font-size: .8125rem; font-weight: 700; }
.legal-contact-list dt { color: var(--muted-on-dark); }
.legal-detail-list dt { color: var(--muted); }
.legal-contact-list dd, .legal-detail-list dd { margin: 0; }
.legal-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.legal-wide { margin-top: 18px !important; }
.legal-footer-row { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: .8125rem; }
.legal-page .legal-footer-row .text-link { margin-top: 0; }

.privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.privacy-grid .legal-card { position: relative; padding-top: 68px; }
.privacy-number { position: absolute; top: 28px; right: 30px; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .13em; }
.privacy-page code { padding: 2px 5px; border-radius: 4px; background: #e8edf3; color: var(--navy); font-family: Consolas, monospace; font-size: .8125rem; }
.privacy-authority { background: var(--blue-soft) !important; border-color: #c9d5e1 !important; }

.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.contact-field { min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field label { margin-bottom: 9px; display: block; color: var(--navy); font-size: .8125rem; font-weight: 700; }
.contact-field label > span { color: var(--muted); font-size: .8125rem; font-weight: 500; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid #cfd8e2; border-radius: 8px; outline: 0; background: white; color: var(--ink); font: inherit; font-size: .8125rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-field textarea { min-height: 150px; resize: vertical; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(24,50,86,.12); }
.contact-field [aria-invalid="true"] { border-color: #b34a55; }
.field-error { margin-top: 7px; display: block; color: #b13d49; font-size: .8125rem; line-height: 1.5; }
.contact-consent label { margin: 0; display: flex; align-items: flex-start; gap: 11px; color: #526176; font-size: .8125rem; line-height: 1.6; cursor: pointer; }
.contact-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.contact-consent a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-submit { display: flex; align-items: center; gap: 24px; }
.contact-submit .button { width: auto; border: 0; font-family: inherit; cursor: pointer; }
.contact-submit small { max-width: 390px; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.honeypot-field { width: 1px !important; height: 1px !important; padding: 0 !important; position: absolute !important; left: -10000px !important; overflow: hidden !important; }
.form-message { grid-column: 1 / -1; margin-bottom: 22px; padding: 15px 17px; border-radius: 8px; font-size: .8125rem; line-height: 1.6; }
.form-message-error { border: 1px solid #e2aeb4; background: #fff0f1; color: #8e2631; }

.contact-page { max-width: 1180px; margin: 0 auto; padding: 90px 70px 110px; }
.contact-page-intro { max-width: 840px; }
.contact-page-intro h1 { margin: 0; color: var(--navy-dark); font-size: clamp(2.11rem, 3.52vw, 3.83rem); line-height: 1.04; letter-spacing: -.052em; }
.contact-page-intro > p:not(.eyebrow) { max-width: 700px; margin: 25px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.contact-form-card { margin-top: 46px; padding: 38px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.contact-direct { margin-top: 18px; padding: 24px 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border: 1px solid #cbd6e1; border-radius: 13px; background: var(--blue-soft); }
.contact-direct div { display: grid; gap: 8px; }
.contact-direct span { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.contact-direct a, .contact-direct strong { color: var(--navy); font-size: .8125rem; font-weight: 700; }
.contact-success { margin-top: 46px; padding: 55px 45px; text-align: center; border: 1px solid #c6d4e2; border-radius: 18px; background: var(--blue-soft); }
.contact-success > span { width: 54px; height: 54px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: white; font-size: 1.4rem; }
.contact-success h2 { margin: 0; color: var(--navy); font-size: 1.7rem; }
.contact-success p { max-width: 620px; margin: 18px auto 28px; color: var(--muted); font-size: .8125rem; line-height: 1.75; }
.contact-success .button { width: auto; }

/* Neutrale Fehlerseite für nicht vorhandene oder geschützte Adressen */
.error-page { min-height: 62vh; padding: clamp(4rem, 9vw, 8rem) 5vw; display: grid; place-items: center; background: linear-gradient(145deg, #f8fafc 0%, #edf3f8 100%); }
.error-card { width: min(720px, 100%); padding: clamp(2rem, 5vw, 4rem); text-align: center; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(24,50,86,.1); }
.error-card h1 { margin: .7rem 0 1rem; color: var(--navy-dark); font-size: clamp(1.76rem, 4.4vw, 2.99rem); line-height: 1.08; letter-spacing: -.045em; }
.error-card > p:not(.eyebrow) { max-width: 580px; margin: 0 auto; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.error-actions { margin-top: 2rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.error-actions .button { width: auto; }
.error-actions .text-link { margin-top: 0; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .legal-page, .contact-page { padding: 62px 20px 80px; }
  .legal-page .legal-card, .contact-form-card { padding: 26px 21px; }
  .legal-page .legal-card-primary { padding: 30px 24px; }
  .legal-contact-list > div, .legal-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
  .legal-footer-row { align-items: flex-start; flex-direction: column; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-field-wide { grid-column: 1; }
  .contact-submit { align-items: stretch; flex-direction: column; }
  .contact-submit .button { width: 100%; }
  .contact-direct { padding: 24px; grid-template-columns: 1fr; }
  .contact-success { padding: 42px 22px; }
}

/*
 * Eigenständige Inhaltsseiten der IKOMM-Basis-Musterversion
 * Die gleichen Bausteine sorgen bei Neue Website, Modernisieren,
 * Besser gefunden und Über IKOMM für einen nachvollziehbaren Aufbau.
 */
.topic-hero { max-width: 1360px; min-height: 610px; margin: 0 auto; padding: 92px 70px 100px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 86px; background: linear-gradient(135deg, #fff 0%, #fff 53%, #f1f5f9 100%); }
.topic-hero-copy h1 { max-width: 790px; margin: 0; color: var(--navy-dark); font-size: clamp(2.38rem, 3.74vw, 4.22rem); line-height: 1.03; letter-spacing: -.052em; }
.topic-hero-copy > p:not(.eyebrow) { max-width: 720px; margin: 28px 0 0; color: #46566a; font-size: .98rem; line-height: 1.85; }
.topic-actions { margin-top: 34px; display: flex; align-items: center; gap: 30px; }
.topic-summary-card { min-height: 410px; padding: 46px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #d3dde7; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 28px 62px rgba(18,45,81,.13); }
.topic-card-number { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; }
.topic-summary-card h2 { margin: 28px 0 0; color: var(--navy); font-size: 1.85rem; line-height: 1.3; letter-spacing: -.03em; }
.compact-check-list { gap: 12px; }
.compact-check-list > li { display: flex; align-items: flex-start; }
.compact-check-list > li::before { flex: 0 0 21px; }
.topic-section { padding-top: 100px; padding-bottom: 100px; }
.topic-feature-section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; background: var(--paper); }
.topic-heading { max-width: 930px; }
.topic-heading h2, .topic-split-section h2, .search-scope-section h2, .personal-work-section h2, .topic-cta h2 { margin: 0; color: var(--navy-dark); font-size: clamp(1.94rem, 3.12vw, 3.56rem); line-height: 1.06; letter-spacing: -.048em; }
.topic-heading > p:not(.eyebrow) { max-width: 800px; margin: 25px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.85; }
.topic-feature-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.topic-feature-grid article { min-height: 285px; padding: 30px; background: white; }
.topic-feature-grid span, .search-principles-grid span { color: var(--muted); font-size: .8125rem; letter-spacing: .13em; }
.topic-feature-grid h3, .search-principles-grid h3 { margin: 72px 0 14px; color: var(--navy); font-size: 1rem; }
.topic-feature-grid p, .search-principles-grid p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.75; }
.topic-split-section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; align-items: start; }
.topic-split-section > div:last-child > p { margin: 0 0 18px; color: var(--muted); font-size: .86rem; line-height: 1.85; }
.topic-split-section .text-link { display: inline-block; margin-top: 12px; }
.plain-check-list { margin: 24px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; color: #3b4c61; font-size: .8125rem; }
.plain-check-list li::before { content: "✓"; margin-right: 11px; color: var(--navy); font-weight: 700; }
.topic-cta { max-width: 1360px; margin: 0 auto; padding: 100px 70px; text-align: center; background: var(--navy); color: white; }
.topic-cta .eyebrow { color: #b6c8db; }
.topic-cta h2 { max-width: 870px; margin-right: auto; margin-left: auto; color: white; }
.topic-cta > p:not(.eyebrow) { max-width: 740px; margin: 25px auto 34px; color: #c2cfdb; font-size: .86rem; line-height: 1.8; }
.topic-cta .button { width: auto; }
.topic-search-visual { min-height: 430px; transform: rotate(-1.5deg); }
.search-visual-label { margin: 0 0 13px 2px; color: #78879a; font-size: .8125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.search-principles-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.search-principles-grid article { min-height: 270px; padding: 30px; background: white; }
.search-scope-section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; background: var(--paper); }
.search-scope-section > div > p:not(.eyebrow) { margin: 25px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.85; }
.search-scope-section aside { padding: 38px; border-radius: 18px; background: var(--navy); color: white; box-shadow: 0 25px 55px rgba(18,45,81,.16); }
.search-scope-section aside strong { font-size: 1rem; }
.search-scope-section aside p { margin: 18px 0 0; color: #c7d3df; font-size: .8125rem; line-height: 1.8; }
.about-topic-card { min-height: 420px; padding: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 22px; background: var(--navy-dark); color: white; box-shadow: 0 30px 64px rgba(11,30,56,.18); }
.about-topic-card img { width: 145px; height: 145px; filter: drop-shadow(0 16px 17px rgba(0,0,0,.24)); }
.about-topic-card strong { margin-top: 30px; font-size: 1.7rem; line-height: 1.35; }
.about-topic-card span { margin-top: 19px; color: #b6c5d4; font-size: .8125rem; line-height: 1.7; }
.about-common-section { max-width: 1360px; }
.personal-work-section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; background: var(--paper); }
.personal-work-section > div:last-child > p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.85; }
.personal-work-section strong { margin-top: 30px; padding-top: 24px; display: block; border-top: 1px solid var(--line); color: var(--navy); font-size: 1rem; line-height: 1.65; }

@media (max-width: 1100px) {
  .topic-hero { padding: 78px 38px 90px; gap: 45px; }
  .topic-summary-card { padding: 36px; }
  .topic-feature-section, .topic-split-section, .search-scope-section, .personal-work-section, .topic-cta { padding-right: 38px; padding-left: 38px; }
  .topic-split-section, .personal-work-section { gap: 55px; }
  .search-principles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topic-hero { min-height: auto; padding: 64px 20px 76px; grid-template-columns: 1fr; gap: 42px; }
  .topic-hero-copy h1 { font-size: clamp(2.16rem, 10.1vw, 3.17rem); }
  .topic-hero-copy > p:not(.eyebrow) { font-size: .88rem; }
  .topic-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .topic-actions .text-link { align-self: flex-start; }
  .topic-summary-card { min-height: auto; padding: 32px 24px; }
  .topic-summary-card h2 { font-size: 1.55rem; }
  .topic-feature-section, .topic-split-section, .search-scope-section, .personal-work-section, .topic-cta { padding: 76px 20px; }
  .topic-feature-grid, .search-principles-grid { grid-template-columns: 1fr; }
  .topic-feature-grid article, .search-principles-grid article { min-height: 220px; }
  .topic-feature-grid h3, .search-principles-grid h3 { margin-top: 46px; }
  .topic-split-section, .search-scope-section, .personal-work-section { grid-template-columns: 1fr; gap: 38px; }
  .topic-search-hero .topic-hero-copy { order: 1; }
  .topic-search-hero .topic-search-visual { order: 2; }
  .topic-search-visual { min-height: 350px; padding: 25px 18px; transform: none; }
  .about-topic-card { min-height: 360px; padding: 36px; }
  .about-topic-card img { width: 120px; height: 120px; }
  .topic-cta .button { width: 100%; }
}

/*
 * Vorbereitete Plattform-Vergleichsseite
 * Die Seite nutzt ausschließlich lokale, manuell freigegebene JSON-Daten.
 */
.comparison-page { background: var(--paper); }
.comparison-hero { max-width: 1360px; margin: 0 auto; padding: 96px 70px 104px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; background: linear-gradient(135deg, #fff 0%, #fff 54%, #eef3f8 100%); }
.comparison-hero h1 { max-width: 830px; margin: 0; color: var(--navy-dark); font-size: clamp(2.51rem, 3.96vw, 4.4rem); line-height: 1.02; letter-spacing: -.052em; }
.comparison-lead { max-width: 760px; margin: 29px 0 0; color: #46566a; font-size: 1rem; line-height: 1.84; }

/* Kompakte Sprunglinks unter dem Einstieg; auf schmalen Displays umbrechend. */
.comparison-jump-links { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; color: var(--navy); font-size: .8125rem; line-height: 1.7; }
.comparison-jump-links > span { font-weight: 700; white-space: nowrap; }
.comparison-jump-links ul { min-width: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; }
.comparison-jump-links li { position: relative; }
.comparison-jump-links li + li::before { content: "·"; position: absolute; left: -11px; color: var(--muted); }
.comparison-jump-links a { padding: 2px 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.comparison-jump-links a:hover { text-decoration-thickness: 2px; }
.comparison-jump-links a:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 2px; }
#vergleich-ueberblick, #vergleich-wartung, #vergleich-ereignisse, #vergleich-freiheit { scroll-margin-top: 30px; }
.comparison-hero-facts { margin-top: 38px; padding-top: 25px; display: flex; flex-wrap: wrap; gap: 22px 38px; border-top: 1px solid var(--line); }
.comparison-hero-facts span { color: #59687a; font-size: .8125rem; line-height: 1.45; }
.comparison-hero-facts strong { margin-bottom: 5px; display: block; color: var(--navy); font-size: 1rem; }
.comparison-monitor { min-width: 0; padding: 35px 34px 31px; border-radius: 22px; overflow: hidden; background: var(--navy-dark); color: white; box-shadow: 0 30px 64px rgba(11,30,56,.18); }
.comparison-monitor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.comparison-monitor-heading h2 { min-width: 0; margin: 0; color: white; font-size: 1.125rem; line-height: 1.4; letter-spacing: -.015em; }
.comparison-monitor-heading strong { color: white; font-size: 1rem; letter-spacing: .08em; }
.comparison-monitor-viewport { margin: 27px -34px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.comparison-monitor-track { width: max-content; padding: 15px 0; display: flex; animation: comparison-monitor-run 42s linear infinite; }
.comparison-monitor-group { padding-right: 10px; display: flex; flex: none; gap: 10px; }
.comparison-monitor-item { min-width: 176px; padding: 14px 16px; display: grid; gap: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.065); color: white; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.comparison-monitor-item:hover, .comparison-monitor-item:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); outline: none; transform: translateY(-2px); }
.comparison-monitor-system { display: flex; align-items: center; gap: 8px; }
.comparison-monitor-name { color: #aabdd1; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.comparison-monitor-signal { position: relative; width: 13px; height: 13px; flex: 0 0 13px; color: #aebbc8; transform: rotate(0deg); }
.comparison-monitor-signal::before { content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 3px; border-radius: 1px; background: currentColor; }
.comparison-monitor-signal::after { content: ""; position: absolute; top: 2px; right: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 5px solid currentColor; }
.comparison-monitor-signal.is-alert { color: #ff5d55; transform: rotate(45deg); }
.comparison-monitor-signal.is-watch { color: #b8c3ce; }
.comparison-monitor-signal.is-clear { color: #62d17f; transform: rotate(-45deg); }
.comparison-monitor-signal.is-unknown { color: #b8c3ce; transform: none; }
.comparison-monitor-signal.is-unknown::before { content: "?"; top: -2px; left: 1px; width: auto; height: auto; background: none; font-size: .8125rem; font-weight: 800; line-height: 1; }
.comparison-monitor-signal.is-unknown::after { display: none; }
.comparison-monitor-item strong { font-size: .8125rem; line-height: 1.35; }
.comparison-monitor-item em { color: #ffcf9b; font-size: .8125rem; font-style: normal; font-weight: 700; line-height: 1.35; }
.comparison-monitor-item.is-ikomm { border-color: rgba(142,216,163,.5); background: rgba(74,145,94,.2); }
.comparison-monitor-item.is-ikomm .comparison-monitor-name, .comparison-monitor-item.is-ikomm em { color: #bce7c7; }
.comparison-monitor-note { margin: 23px 0 0; color: #aebed0; font-size: .8125rem; line-height: 1.7; }
.comparison-monitor:hover .comparison-monitor-track, .comparison-monitor:focus-within .comparison-monitor-track { animation-play-state: paused; }
@keyframes comparison-monitor-run { to { transform: translateX(-50%); } }
.comparison-error { max-width: 1220px; margin: 70px auto; padding: 34px 38px; border: 1px solid #d4a9a9; border-radius: 14px; background: #fff5f5; color: #7f2828; }
.comparison-error h2 { margin: 0; font-size: 1.25rem; }
.comparison-error p { margin: 12px 0 0; }
.comparison-section { max-width: 1360px; margin: 0 auto; padding: 110px 70px; background: white; }
.comparison-section:nth-of-type(even) { background: var(--paper); }
.comparison-heading { margin-bottom: 46px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; }
.comparison-heading h2 { max-width: 840px; margin: 0; color: var(--navy-dark); font-size: clamp(1.94rem, 2.99vw, 3.43rem); line-height: 1.07; letter-spacing: -.046em; }
.comparison-heading > p { margin: 0; color: var(--muted); }

.comparison-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comparison-platform-card { min-width: 0; min-height: 360px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(18,45,81,.05); }
.comparison-platform-card.is-ikomm { grid-column: span 3; min-height: 270px; background: linear-gradient(135deg, var(--navy-dark), var(--navy)); color: white; }
.comparison-platform-topline { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.comparison-platform-topline b { color: var(--navy); font-size: .8125rem; letter-spacing: .05em; }
.comparison-platform-card dl { margin: 42px 0 0; display: grid; gap: 14px; }
.comparison-platform-card dl div { padding-bottom: 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 15px; border-bottom: 1px solid var(--line); }
.comparison-platform-card dt { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.comparison-platform-card dd { margin: 0; color: #34465c; font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.comparison-platform-year-values { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.comparison-platform-year-values > span { white-space: nowrap; }
.comparison-platform-year-values > span:not(:last-of-type)::after { content: "|"; margin-left: 8px; color: #b4bec9; }
.comparison-platform-year-values small { font-size: inherit; }
.comparison-platform-undated, .comparison-platform-caveat { width: 100%; display: block; color: var(--muted); font-weight: 600; }
.comparison-platform-caveat { margin-top: 3px; }
.comparison-platform-card > p { margin: auto 0 0; padding-top: 25px; color: var(--muted); font-size: .8125rem; line-height: 1.75; }
.comparison-platform-card.is-ikomm .comparison-platform-topline, .comparison-platform-card.is-ikomm dt { color: #9fb1c5; }
.comparison-platform-card.is-ikomm .comparison-platform-topline b, .comparison-platform-card.is-ikomm dd { color: white; }
.comparison-platform-card.is-ikomm dl div { border-color: rgba(255,255,255,.16); }
.comparison-platform-card.is-ikomm .comparison-platform-undated, .comparison-platform-card.is-ikomm .comparison-platform-caveat { color: #aebed0; }
.comparison-platform-card.is-ikomm > p { color: #c3cfdb; }

.comparison-freedom { background: var(--paper); }
.comparison-freedom-panels { display: grid; gap: 18px; }
.comparison-freedom-panel { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 14px 34px rgba(18,45,81,.055); }
.comparison-freedom-intro { padding: 27px 30px; display: grid; grid-template-columns: .68fr 1.32fr; gap: 45px; align-items: end; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #f8fafc, #fff); }
.comparison-freedom-intro h3 { margin: 0; color: var(--navy-dark); font-size: 1.15rem; }
.comparison-freedom-intro p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.comparison-property-table-wrap { overflow-x: auto; }
.comparison-property-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comparison-property-table th, .comparison-property-table td { padding: 19px 22px; border-bottom: 1px solid #e8edf2; text-align: left; vertical-align: top; }
.comparison-property-table thead th { background: var(--navy-dark); color: white; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; }
.comparison-property-table thead th:first-child { width: 15%; }
.comparison-property-table thead th:nth-child(2) { width: 29%; }
.comparison-property-table tbody th { color: var(--navy); font-size: .8125rem; }
.comparison-property-table tbody td { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.comparison-property-table tbody td strong { color: #2f4865; font-size: .8125rem; line-height: 1.55; }
.comparison-property-table tbody td p { margin: 0; }
.comparison-property-table tbody tr:last-child th, .comparison-property-table tbody tr:last-child td { border-bottom: 0; }
.comparison-property-table tbody tr.is-ikomm { background: #f0f8f2; }
.comparison-property-table tbody tr.is-ikomm th { color: #1f6640; }
.comparison-property-table tbody tr.is-ikomm td strong { color: #225f3d; }
.comparison-property-sources { margin-top: 9px; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.comparison-property-sources span { font-weight: 700; }
.comparison-property-sources a { color: #4b6683; border-bottom: 1px solid #c5d0da; }
.comparison-property-sources a:hover, .comparison-property-sources a:focus-visible { color: var(--navy); border-color: var(--navy); outline: none; }

.comparison-maintenance-table-wrap, .comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 14px 32px rgba(18,45,81,.06); }
.comparison-maintenance-table, .comparison-event-table { width: 100%; border-collapse: collapse; }
.comparison-maintenance-table th, .comparison-maintenance-table td, .comparison-event-table th, .comparison-event-table td { padding: 18px 19px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-maintenance-table thead th, .comparison-event-table thead th { background: var(--navy-dark); color: white; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; }
.comparison-maintenance-table tbody th { color: var(--navy); font-size: .8125rem; }
.comparison-maintenance-table tbody td { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.comparison-maintenance-table tbody td:nth-child(2), .comparison-maintenance-table tbody td:nth-child(3), .comparison-maintenance-table tbody td:nth-child(4), .comparison-maintenance-table tbody td:nth-child(5) { text-align: center; white-space: nowrap; }
.comparison-maintenance-table tr:last-child th, .comparison-maintenance-table tr:last-child td { border-bottom: 0; }

.comparison-filters { margin-bottom: 22px; padding: 24px; display: grid; grid-template-columns: repeat(4, minmax(135px, .65fr)) minmax(230px, 1.35fr) auto; gap: 14px; align-items: end; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fb; }
.comparison-filters label { display: grid; gap: 8px; color: #566579; font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.comparison-filters select, .comparison-filters input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #c8d2dd; border-radius: 8px; background: white; color: #253b56; font: inherit; font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.comparison-filters select:focus, .comparison-filters input:focus { border-color: var(--navy); outline: 3px solid rgba(24,50,86,.12); }
.comparison-reset { min-height: 46px; padding: 0 16px; border: 1px solid var(--navy); border-radius: 8px; background: transparent; color: var(--navy); font-size: .8125rem; font-weight: 700; cursor: pointer; }
.comparison-reset:hover, .comparison-reset:focus-visible { background: var(--navy); color: white; }
.comparison-result-head { margin: 0 3px 18px; display: flex; justify-content: space-between; gap: 28px; color: var(--muted); font-size: .8125rem; }
.comparison-result-head p { margin: 0; }
.comparison-result-head p:first-child { color: var(--navy); font-weight: 700; }
.comparison-event-table { min-width: 940px; }
.comparison-event-table thead th:nth-child(1) { width: 150px; }
.comparison-event-table thead th:nth-child(2) { width: 150px; }
.comparison-event-table thead th:nth-child(4) { width: 260px; }
.comparison-event-table thead th:nth-child(5) { width: 145px; }
.comparison-event[hidden] { display: none; }
.comparison-event-row { cursor: pointer; transition: background .16s ease; }
.comparison-event-row:hover, .comparison-event-row:focus-visible, .comparison-event-row[aria-expanded="true"] { background: #f1f5f9; outline: none; }
.comparison-event-row td { color: #506075; font-size: .8125rem; line-height: 1.55; }
.comparison-event-row td:nth-child(2) strong { color: var(--navy); }
.comparison-event-row td:nth-child(3) { color: #243a55; font-weight: 700; }
.comparison-row-marker { width: 22px; height: 22px; margin-right: 10px; display: inline-grid; place-items: center; border: 1px solid #aab8c7; border-radius: 50%; color: var(--navy); font-size: .8125rem; font-weight: 700; transition: transform .16s ease; }
.comparison-event-row[aria-expanded="true"] .comparison-row-marker { transform: rotate(45deg); }
.comparison-category { white-space: nowrap; padding: 6px 9px; display: inline-block; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.35; }
.comparison-category.category-1 { background: #fbecec; color: #8a2e2e; }
.comparison-category.category-2 { background: #edf2f7; color: #405875; }
.comparison-category.category-3 { background: #edf6ef; color: #356241; }
.comparison-effort { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); white-space: nowrap; }
.comparison-effort b { color: var(--navy); font-size: .8125rem; }
.comparison-effort span { color: #55708e; font-size: .8125rem; letter-spacing: .08em; }
.comparison-event-detail td { padding: 0; background: #f7f9fb; }
.comparison-event-detail[hidden] { display: none; }
.comparison-detail-grid { padding: 28px 30px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
.comparison-detail-grid span { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.comparison-detail-grid p { margin: 8px 0 0; color: #3f5065; font-size: .8125rem; line-height: 1.7; }
.comparison-source-link { margin: 0 30px 28px; display: inline-block; color: var(--navy); font-size: .8125rem; font-weight: 700; border-bottom: 1px solid #b8c4d0; }
.comparison-empty { margin: 0; padding: 34px; color: #566579; text-align: center; font-size: .8125rem; }
.comparison-empty[hidden] { display: none; }

.comparison-disclosure { border: 1px solid var(--line); border-radius: 14px; background: white; }
.comparison-disclosure > summary { padding: 22px 26px; color: var(--navy); font-size: .8125rem; font-weight: 700; cursor: pointer; }
.comparison-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.comparison-components-grid { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.comparison-components-grid article { min-height: 295px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
.comparison-components-grid article > p:first-child { margin: 0; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.comparison-components-grid h3 { margin: 16px 0 18px; color: var(--navy); font-size: 1rem; }
.comparison-components-grid dl { margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comparison-components-grid dl div { padding: 10px; background: white; border-radius: 7px; }
.comparison-components-grid dt { color: var(--muted); font-size: .8125rem; }
.comparison-components-grid dd { margin: 5px 0 0; color: #334a65; font-size: .8125rem; font-weight: 700; }
.comparison-components-grid article > p:not(:first-child) { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.comparison-components-grid a { margin-top: auto; padding-top: 20px; color: var(--navy); font-size: .8125rem; font-weight: 700; }

.comparison-level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.comparison-level-grid article { min-height: 215px; padding: 26px; background: white; }
.comparison-level-grid p { margin: 0; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.comparison-level-grid h3 { margin: 48px 0 14px; color: var(--navy); font-size: .95rem; }
.comparison-level-grid span { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.comparison-method-disclosure { margin-top: 30px; }
.comparison-method-list { margin: 0; padding: 22px 26px 26px; }
.comparison-method-list div { padding: 17px 0; display: grid; grid-template-columns: 210px 1fr; gap: 24px; border-bottom: 1px solid var(--line); }
.comparison-method-list div:last-child { border-bottom: 0; }
.comparison-method-list dt { color: var(--navy); font-size: .8125rem; font-weight: 700; }
.comparison-method-list dd { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }

@media (max-width: 1100px) {
  .comparison-hero, .comparison-section { padding-right: 38px; padding-left: 38px; }
  .comparison-hero { gap: 48px; }
  .comparison-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-platform-card.is-ikomm { grid-column: span 2; }
  .comparison-filters { grid-template-columns: repeat(3, 1fr); }
  .comparison-search { grid-column: span 2; }
  .comparison-components-grid { grid-template-columns: repeat(2, 1fr); }
  .comparison-level-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .comparison-hero { padding: 64px 20px 76px; grid-template-columns: 1fr; gap: 42px; }
  .comparison-hero h1 { font-size: clamp(1.89rem, 8.62vw, 2.68rem); }
  .comparison-lead { font-size: .88rem; }
  .comparison-monitor { margin-right: 4px; margin-left: 4px; padding: 26px 18px 23px; }
  .comparison-monitor-viewport { margin-right: -18px; margin-left: -18px; }
  .comparison-monitor-track { animation-duration: 48s; }
  .comparison-monitor-item { min-width: 160px; padding: 12px 13px; }
  .comparison-section { padding: 76px 20px; }
  .comparison-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 34px; }
  .comparison-heading h2 { font-size: clamp(1.58rem, 7.22vw, 1.8rem); }
  .comparison-platform-grid, .comparison-components-grid, .comparison-level-grid { grid-template-columns: minmax(0, 1fr); }
  .comparison-platform-card.is-ikomm { grid-column: auto; }
  .comparison-platform-card { min-height: 330px; }
  .comparison-freedom-intro { padding: 25px 22px; grid-template-columns: 1fr; gap: 10px; }
  .comparison-property-table-wrap { overflow: visible; }
  .comparison-property-table { display: block; table-layout: auto; }
  .comparison-property-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comparison-property-table tbody, .comparison-property-table tr { display: block; }
  .comparison-property-table tr { padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
  .comparison-property-table tbody tr:last-child { border-bottom: 0; }
  .comparison-property-table th, .comparison-property-table td { padding: 0; display: block; border: 0; }
  .comparison-property-table tbody th { margin-bottom: 12px; font-size: .8125rem; }
  .comparison-property-table tbody td { margin-top: 12px; }
  .comparison-property-table tbody td::before { content: attr(data-label); margin-bottom: 4px; display: block; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .comparison-property-table tbody tr.is-ikomm { background: #f0f8f2; }
  .comparison-filters { padding: 18px; grid-template-columns: 1fr; }
  .comparison-search { grid-column: auto; }
  .comparison-result-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .comparison-table-wrap { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .comparison-event-table { min-width: 0; display: block; }
  .comparison-event-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comparison-event-table tbody { margin-bottom: 12px; display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: white; }
  .comparison-event-table tr { display: block; }
  .comparison-event-row td { padding: 12px 16px; display: grid; grid-template-columns: 105px 1fr; gap: 12px; border-bottom: 1px solid #edf0f3; }
  .comparison-event-row td::before { content: attr(data-label); color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .comparison-event-row td:first-child { padding-top: 17px; }
  .comparison-event-row td:last-child { padding-bottom: 17px; border-bottom: 0; }
  .comparison-row-marker { display: none; }
  .comparison-detail-grid { padding: 23px 18px 16px; grid-template-columns: 1fr; gap: 20px; }
  .comparison-source-link { margin: 0 18px 24px; }
  .comparison-components-grid { padding: 12px; }
  .comparison-method-list { padding: 14px 20px 20px; }
  .comparison-method-list div { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-monitor-viewport { overflow-x: auto; }
  .comparison-monitor-track { animation: none; }
  .comparison-monitor-group[aria-hidden="true"] { display: none; }
}

/* Revision 0.6 Rev8: Lesbarkeit, einheitliche Umbrüche und kompakter Monitor. */
.hero-copy, .solutions-hero-copy, .topic-hero-copy,
.hero-visual, .solutions-hero-panel, .topic-summary-card,
.section-heading > *, .package-heading > *, .comparison-heading > *,
.promise > *, .seo-panel > *, .about > * { min-width: 0; }
h1, h2 { overflow-wrap: anywhere; }
.hero-copy, .solutions-hero-copy { width: 100%; }
.solutions-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solutions-trust li { min-width: 0; }
.solutions-trust b { flex-shrink: 0; }
.solution-card p, .promise-list p, .modern-card > p:not(.mini-label),
.process-track p, .quality-grid p, .solutions-message span,
.package-block p, .common-grid p, .independence-card > p:not(.mini-label),
.search-facts span, .search-facts > p, .hosting-note p,
.topic-feature-grid p, .search-principles-grid p, .search-scope-section aside p,
.about-topic-card span { font-size: 1rem; }
.solution-card ul, .modern-card ul, .check-list, .package-card ul,
.package-foundation ul, .independence-copy ul, .collaboration-grid ul,
.plain-check-list { font-size: .9375rem; }
.package-card h4, .solution-card a, .package-card > a { font-size: .9375rem; }
.floating-note span, .hero-logo-card span, .solutions-hero-panel > p,
.about-facts span, .contact-actions > span { font-size: .875rem; }
.contact-quick a { overflow-wrap: anywhere; }
.comparison-monitor-heading > strong { flex-shrink: 0; }
.comparison-monitor-description { margin: 15px 0 0; color: #c5d2df; font-size: .9375rem; line-height: 1.7; }
.comparison-monitor .comparison-hero-facts { margin-top: 22px; padding-top: 18px; gap: 14px 24px; border-color: rgba(255,255,255,.2); }
.comparison-monitor .comparison-hero-facts span { color: #b7c8da; font-size: .8125rem; }
.comparison-monitor .comparison-hero-facts strong { color: white; }
.comparison-lead + .comparison-lead { margin-top: 18px; }
@media (max-width: 760px) {
  .solutions-trust { grid-template-columns: 1fr; }
  .comparison-monitor { width: 100%; margin-right: 0; margin-left: 0; }
  .comparison-monitor-heading { align-items: flex-start; gap: 12px; }
  .comparison-monitor-heading h2 { font-size: 1rem; }
  .comparison-event-row td { grid-template-columns: minmax(0, 90px) minmax(0, 1fr); }
  .comparison-event-row td > *, .comparison-detail-grid > * { min-width: 0; overflow-wrap: anywhere; }
  .comparison-source-link { overflow-wrap: anywhere; }
  .hero-symbol-stage::before { width: min(310px, 100%); height: auto; aspect-ratio: 1; }
  .visual-orbit { width: min(355px, 100%); height: auto; aspect-ratio: 1; }
  .visual-orbit-two { width: min(410px, 100%); height: auto; aspect-ratio: 1; }
  .floating-note { padding: 10px 8px; gap: 7px; }
  .floating-note b { width: 30px; flex-basis: 30px; }
}

.comparison-platform-card dt, .comparison-platform-card dd { min-width: 0; overflow-wrap: anywhere; }

/* Revision 0.6 Rev9: Kategorien auf schmalen Displays weiterhin umbrechen. */
@media (max-width: 760px) {
  .comparison-category { white-space: normal; }
}

/* Revision 0.6 Rev10: Aufwandsskala und kompakte Produktkarten. */
#loesungen .solution-card p { font-size: .9375rem; }
#loesungen .solution-card ul { font-size: .875rem; }
#loesungen .solution-card li { display: grid; grid-template-columns: 1em minmax(0, 1fr); column-gap: 8px; }
#loesungen .solution-card li::before { margin-right: 0; }
.comparison-components .comparison-heading { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.comparison-method .comparison-heading { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.comparison-components .comparison-heading > p { margin-top: 0; }
.comparison-method .comparison-heading > p { max-width: 980px; margin-top: 0; }
.comparison-scale-help { max-width: 700px; }
.comparison-scale-help a { margin-top: 8px; display: block; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.comparison-level-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.comparison-level-grid article { min-width: 0; }
.comparison-level-grid h3 { overflow-wrap: normal; hyphens: auto; }
.comparison-level-grid h3 small { margin-bottom: 8px; display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.comparison-method-note { margin: 22px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
/* Dezenter Schulungshinweis nur unter der Tabelle zur eigenständigen Betreuung. */
.comparison-freedom-panel > .comparison-method-note { margin: 0; padding: 22px clamp(22px, 3vw, 30px); }
@media (max-width: 1100px) {
  .comparison-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .comparison-components .comparison-heading, .comparison-level-grid { grid-template-columns: minmax(0, 1fr); }
  .comparison-components .comparison-heading { gap: 22px; }
}

/* Version 0.7: gemeinsame Typografie der Begleittexte zu Abschnittsüberschriften. */
.section-heading > p,
.package-heading > p,
.comparison-heading > p:not(.eyebrow) {
  font-size: var(--heading-note-size);
  font-weight: 400;
  line-height: var(--heading-note-line-height);
}


/* Version 0.7 Rev1: Lösungsvergleich, hängende Listen und kompakter Footer. */
/* Nur der Lösungsvergleich besitzt drei direkt aufeinanderfolgende Texte. */
.comparison-heading-stacked { display: block; }
.comparison-heading-stacked > .eyebrow { margin: 0 0 18px; }
.comparison-heading-stacked > p:not(.eyebrow) { margin-top: 24px; }

/* Die Markierung erhält ihren eigenen Platz; auch Folgezeilen bleiben eingerückt. */
.collaboration-grid li, .modern-card li,
.independence-copy li, .plain-check-list li {
  position: relative;
  padding-left: calc(1em + 10px);
}
.collaboration-grid li::before, .modern-card li::before,
.independence-copy li::before, .plain-check-list li::before {
  position: absolute;
  left: 0;
  width: 1em;
  margin-right: 0;
}
.check-list > li { position: relative; display: block; padding-left: 32px; }
.check-list > li::before { position: absolute; left: 0; margin-right: 0; }