:root {
  --bg: #07111f;
  --bg-soft: #0f1c32;
  --surface: rgba(12, 24, 43, 0.72);
  --surface-strong: rgba(15, 30, 53, 0.92);
  --line: rgba(154, 178, 214, 0.18);
  --text: #edf4ff;
  --muted: #97a9c8;
  --accent: #7df9d0;
  --accent-strong: #39d0ff;
  --accent-warm: #ffc76d;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --max-width: 1180px;
  --anchor-offset: 128px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

main [id] {
  scroll-margin-top: var(--anchor-offset);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Manrope", "Segoe UI", sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, rgba(61, 208, 255, 0.16), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(125, 249, 208, 0.16), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255, 199, 109, 0.14), transparent 26%),
    linear-gradient(180deg, #050b15 0%, #081120 46%, #091a2f 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

.page-shell {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
  padding: 28px 0 40px;
}

/* Tablet-/schmaler-Fenster-Bereich: grosszuegigere Aussenraender,
   damit rechts neben der Scrollleiste sichtbar Luft bleibt.
   Mobil (<=767) und grosse Desktops (Auto-Margins) unveraendert. */
@media (min-width: 768px) and (max-width: 1220px) {
  .page-shell {
    width: min(calc(100% - 64px), var(--max-width));
  }
}

.site-header,
.site-footer,
.hero,
.content-section,
.legal-card,
.legal-hero {
  backdrop-filter: blur(18px);
}

.site-header {
  position: relative;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border: 1px solid var(--line);
  background: rgba(7, 17, 31, 0.58);
  border-radius: var(--radius-md);
}

.site-header {
  position: sticky;
  top: 18px;
  z-index: 10;
  transition: padding 220ms ease, gap 220ms ease, background 220ms ease;
}

.mobile-header-toggle {
  display: none;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-logo {
  height: 48px;
  width: auto;
  display: block;
  margin-right: 15px;
  filter: brightness(0.95) saturate(1.15) hue-rotate(200deg);
}

.brand-mark {
  display: none;
}

.brand-text {
  display: none;
}

.brand-tagline {
  max-width: 40ch;
}

.brand-tagline,
.site-nav,
.hero-text,
.info-card p,
.benefit-copy,
.benefit-list,
.contact-card,
.legal-hero p,
.legal-card p,
.site-footer {
  color: var(--muted);
}

.site-nav,
.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.site-nav a,
.footer-links a,
.text-link {
  transition: color 160ms ease, opacity 160ms ease;
}

.site-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.site-nav-parent > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-nav-dropdown {
  position: relative;
}

.site-nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  transition: color 160ms ease, opacity 160ms ease;
}

.site-nav-parent a {
  color: inherit;
  text-decoration: none;
}

.site-nav-parent::-webkit-details-marker {
  display: none;
}

.site-nav-parent::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  transition: transform 160ms ease;
}

.site-nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  z-index: 20;
  gap: 8px;
}

.site-nav-submenu a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.site-nav-dropdown:hover .site-nav-submenu,
.site-nav-dropdown:focus-within .site-nav-submenu,
.site-nav-dropdown[open] .site-nav-submenu {
  display: grid;
}

.site-nav-dropdown:hover .site-nav-parent,
.site-nav-dropdown:focus-within .site-nav-parent,
.site-nav-dropdown[open] .site-nav-parent {
  color: var(--text);
}

.site-nav-dropdown:hover .site-nav-parent::after,
.site-nav-dropdown[open] .site-nav-parent::after {
  transform: rotate(-135deg) translateY(1px);
}

.site-nav a:hover,
.footer-links a:hover,
.text-link:hover {
  color: var(--text);
}

.site-nav a.is-active,
.site-nav-parent.is-active {
  color: var(--accent);
  font-weight: 600;
}

/* Webdesign Fokus (temporär) ============================================= */
.promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(125, 249, 208, 0.08), rgba(57, 208, 255, 0.08));
  border-bottom: 1px solid rgba(125, 249, 208, 0.22);
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgba(125, 249, 208, 0.72);
  line-height: 1.6;
  text-shadow: 0 0 18px rgba(125, 249, 208, 0.3);
  box-shadow: 0 1px 24px rgba(125, 249, 208, 0.07);
  flex-wrap: wrap;
}

.promo-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(125, 249, 208, 0.55);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(125, 249, 208, 0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.promo-banner-btn:hover {
  background: rgba(125, 249, 208, 0.12);
  border-color: rgba(125, 249, 208, 0.85);
  color: #7df9d0;
}
/* ======================================================================== */

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.social-button svg {
  width: 20px;
  height: 20px;
  fill: white;
  transition: transform 220ms ease;
}

.social-button:hover {
  transform: translateY(-1px);
}

.social-button:hover svg {
  transform: scale(1.05);
}

.whatsapp-button {
  background: #25d366;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.22);
}

.whatsapp-button:hover {
  background: #20b858;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.28);
}

.linkedin-button {
  background: #0a66c2;
  box-shadow: 0 10px 30px rgba(10, 102, 194, 0.22);
}

.linkedin-button:hover {
  background: #084d9e;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(10, 102, 194, 0.28);
}

.instagram-button {
  background:
    radial-gradient(circle at 28% 100%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  /* Verlauf nicht unter dem halbtransparenten Rahmen durchscheinen
     lassen (verursachte Farbschimmer an den Ecken) */
  background-clip: padding-box;
  box-shadow: 0 10px 30px rgba(214, 36, 159, 0.24);
}

.instagram-button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(214, 36, 159, 0.34);
  filter: saturate(1.1) brightness(1.04);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
  gap: 28px;
  margin-top: 28px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(14, 30, 51, 0.9), rgba(9, 19, 34, 0.78)),
    linear-gradient(90deg, rgba(57, 208, 255, 0.08), transparent 45%);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin-bottom: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
}

h1 {
  max-width: 11ch;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

h2 {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h3 {
  font-size: 1.3rem;
}

.hero-copy,
.section-heading,
.benefit-layout,
.contact-card,
.legal-main {
  display: grid;
  gap: 20px;
}

.heading-with-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.heading-with-action h2 {
  margin: 0;
}

/* Desktop: mehr Luft zwischen Ueberschrift und Action-Button */
@media (min-width: 961px) {
  .heading-with-action {
    gap: 26px;
  }
}

#contact-title {
  max-width: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

.faq-heading-with-action {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.faq-heading-with-action h2 {
  flex: 0 0 auto;
  max-width: none;
}

.faq-heading-with-action .button {
  margin-left: 0;
  min-width: 170px;
  white-space: nowrap;
  text-align: center;
}

.hero-text,
.benefit-copy,
.legal-hero p,
.legal-card p,
.contact-card p {
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #03111d;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.button-secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.hero-metrics,
.benefit-list,
.stack-card {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hero-metrics li,
.signal-card,
.stack-card,
.info-card,
.contact-card,
.legal-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.hero-metrics li {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.hero-metrics strong,
.signal-card strong {
  color: var(--text);
}

.hero-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.hero-image-card {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.48), inset 0 0 24px rgba(0, 0, 0, 0.24);
}

.hero-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-md);
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.28) 100%);
  z-index: 1;
}

.hero-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0) 48%, rgba(7, 17, 31, 0.52) 100%);
}

.hero-image-card img {
  display: block;
  width: 100%;
  height: auto;
}

.signal-card,
.stack-card,
.info-card,
.contact-card,
.legal-card,
.legal-hero {
  padding: 24px;
}

.signal-label {
  margin-bottom: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.signal-card p {
  margin-top: 10px;
  line-height: 1.65;
  color: var(--muted);
}

.stack-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stack-card span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.content-section,
.legal-hero,
.legal-card {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(7, 17, 31, 0.56);
}

.section-corner-icon {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.section-corner-icon svg {
  width: 30px;
  height: 30px;
  transform: translate(-2px, 2px);
}

.icon-ms365 {
  background: linear-gradient(145deg, rgba(57, 208, 255, 0.22), rgba(57, 208, 255, 0.08));
}

.icon-ms365 svg {
  fill: #7fe4ff;
}

.icon-ai-act {
  background: linear-gradient(145deg, rgba(255, 199, 109, 0.24), rgba(255, 199, 109, 0.08));
}

.icon-ai-act svg {
  fill: rgba(255, 199, 109, 0.2);
  stroke: #ffd998;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-optimization {
  background: linear-gradient(145deg, rgba(125, 249, 208, 0.22), rgba(125, 249, 208, 0.08));
}

.icon-optimization svg {
  fill: none;
  stroke: #8dffd8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card-grid-2up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card {
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.info-card h3 {
  padding-right: 50px;
}

.card-corner-icon {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  transition: box-shadow 320ms ease, border-color 320ms ease;
}

.card-corner-icon svg {
  width: 20px;
  height: 20px;
  transform: translate(-2px, 2px);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 320ms ease;
}

.card-icon-copilot svg {
  fill: var(--muted);
  stroke: none;
  transition: fill 320ms ease;
}

.info-card:hover .card-corner-icon,
.contact-card:hover .card-corner-icon {
  box-shadow: 0 0 18px rgba(125, 249, 208, 0.22);
  border-color: rgba(154, 178, 214, 0.38);
}

.info-card:hover .card-corner-icon svg,
.contact-card:hover .card-corner-icon svg {
  stroke: var(--accent);
}

.info-card:hover .card-icon-copilot svg {
  fill: var(--accent);
  stroke: none;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.step-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57, 208, 255, 0.07), transparent 55%);
  pointer-events: none;
}

.step-number {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.9;
}

.step-card strong {
  font-size: 1rem;
  color: var(--text);
  padding-right: 44px;
}

.step-card span {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--muted);
}

.step-corner-icon {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  transition: box-shadow 320ms ease, border-color 320ms ease;
}

.step-corner-icon svg {
  width: 22px;
  height: 22px;
  transform: translate(-2px, 2px);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 320ms ease;
}

.step-icon-ms365 svg {
  fill: #7fe4ff;
  stroke: none;
  transition: none;
}

.step-icon-ms365 {
  background: linear-gradient(145deg, rgba(57, 208, 255, 0.22), rgba(57, 208, 255, 0.08));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.step-icon-ai-act {
  background: linear-gradient(145deg, rgba(255, 199, 109, 0.24), rgba(255, 199, 109, 0.08));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.step-icon-ai-act svg {
  fill: rgba(255, 199, 109, 0.2);
  stroke: #ffd998;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: none;
}

.step-icon-optimization {
  background: linear-gradient(145deg, rgba(125, 249, 208, 0.22), rgba(125, 249, 208, 0.08));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.step-icon-optimization svg {
  fill: none;
  stroke: #8dffd8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: none;
}

.step-card:hover .step-corner-icon {
  box-shadow: 0 0 18px rgba(125, 249, 208, 0.22);
  border-color: rgba(154, 178, 214, 0.38);
}

.step-card:hover .step-corner-icon svg {
  stroke: var(--accent);
}

.step-card:hover .step-icon-ms365 svg {
  fill: #7fe4ff;
  stroke: none;
}

.step-card:hover .step-icon-ai-act svg {
  fill: rgba(255, 199, 109, 0.2);
  stroke: #ffd998;
}

.step-card:hover .step-icon-optimization svg {
  fill: none;
  stroke: #8dffd8;
}

.step-card:hover .step-icon-ms365 {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(125, 249, 208, 0.22);
  border-color: rgba(154, 178, 214, 0.38);
}

.step-card:hover .step-icon-ai-act,
.step-card:hover .step-icon-optimization {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(125, 249, 208, 0.22);
  border-color: rgba(154, 178, 214, 0.38);
}

.pillar-section {
  padding: 36px;
}

.pillar-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}

.pillar-header h2 {
  padding-right: 82px;
}

.pillar-number {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--accent);
  opacity: 0.22;
  user-select: none;
  padding-top: 4px;
  transition: opacity 320ms ease, text-shadow 320ms ease;
}

.pillar-section:hover .pillar-number {
  opacity: 0.72;
  text-shadow: 0 0 40px rgba(125, 249, 208, 0.55);
}

.pillar-section:hover .section-corner-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(125, 249, 208, 0.22);
  border-color: rgba(154, 178, 214, 0.38);
}

@media (hover: none) {
  .pillar-section.is-in-view .pillar-number {
    opacity: 0.72;
    text-shadow: 0 0 40px rgba(125, 249, 208, 0.55);
  }

  .pillar-section.is-in-view .section-corner-icon {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 24px rgba(125, 249, 208, 0.22);
    border-color: rgba(154, 178, 214, 0.38);
  }
}

.section-corner-icon {
  transition: box-shadow 320ms ease, border-color 320ms ease;
}

.info-card-compact {
  align-content: start;
}

.feature-action {
  display: grid;
  gap: 12px;
}

#eu-ai-act .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#eu-ai-act .feature-action {
  grid-column: 1 / -1;
}

#eu-ai-act .feature-action .button {
  width: 100%;
}

.section-intro {
  max-width: 74ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 50px 18px 18px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.5;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.75;
}

.faq-page .about-hero h1 {
  max-width: 24ch;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.faq-page .section-heading h2 {
  max-width: none;
  line-height: 1.12;
  letter-spacing: -0.02em;
  padding-right: 58px;
}

.faq-page .section-heading .eyebrow {
  padding-right: 58px;
}

.faq-page section[aria-labelledby="faq-general-title"] .faq-list,
.faq-page section[aria-labelledby="faq-m365-title"] .faq-list,
.faq-page section[aria-labelledby="faq-security-title"] .faq-list,
.faq-page section[aria-labelledby="faq-process-title"] .faq-list,
.faq-page section[aria-labelledby="faq-webdesign-title"] .faq-list,
.faq-page section[aria-labelledby="faq-webdesign-basics-title"] .faq-list,
.faq-page section[aria-labelledby="faq-webdesign-seo-title"] .faq-list,
.faq-page section[aria-labelledby="faq-webdesign-geo-title"] .faq-list,
.faq-page section[aria-labelledby="faq-webdesign-local-title"] .faq-list {
  margin-top: 32px;
}

.faq-page .content-section {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.faq-page .content-section:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  border-color: rgba(154, 178, 214, 0.3);
}

.faq-page .content-section:hover .section-corner-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(125, 249, 208, 0.2);
  border-color: rgba(154, 178, 214, 0.38);
}

.faq-page .faq-item {
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.faq-page .faq-item:hover {
  border-color: rgba(154, 178, 214, 0.34);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.faq-page .faq-item[open] {
  border-color: rgba(125, 249, 208, 0.3);
  background:
    linear-gradient(135deg, rgba(125, 249, 208, 0.08), rgba(57, 208, 255, 0.03)),
    var(--surface);
}

.faq-page .faq-item summary {
  transition: color 200ms ease;
}

.faq-page .faq-item:hover summary,
.faq-page .faq-item[open] summary {
  color: var(--accent);
}

.faq-page .faq-item summary::after {
  transition: transform 180ms ease, color 180ms ease;
}

.faq-page .faq-item[open] summary::after {
  color: var(--accent-strong);
}

.services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card {
  align-content: start;
}

.service-kicker,
.contact-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.contact-layout-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-card a {
  width: fit-content;
}

.info-card p,
.benefit-list,
.footer-links,
.site-nav {
  line-height: 1.7;
}

.accent-section {
  background:
    radial-gradient(circle at top right, rgba(61, 208, 255, 0.09), transparent 24%),
    rgba(7, 17, 31, 0.56);
}

.benefit-layout {
  grid-template-columns: 1fr;
  gap: 20px;
  width: fit-content;
  margin: 0 auto;
}

.benefit-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.benefit-list li {
  position: relative;
  padding: 16px 18px 16px 46px;
  border: 1px solid rgba(127, 180, 255, 0.26);
  border-left: 4px solid rgba(61, 208, 255, 0.78);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-align: left;
}

.benefit-list li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #9ce7ff 0%, #3dd0ff 65%, #1198c6 100%);
  box-shadow: 0 0 0 4px rgba(61, 208, 255, 0.14);
}

.contact-card {
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.legal-card {
  display: grid;
  gap: 16px;
}

.legal-card h2,
.legal-card h3 {
  max-width: none;
}

.legal-card h3 {
  font-size: 1.1rem;
  color: var(--text);
}

.legal-card strong {
  color: var(--text);
}

.legal-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.75;
}

.legal-address-block {
  display: grid;
  gap: 4px;
}

.legal-shell {
  max-width: 1280px;
}

.legal-main {
  margin-top: 28px;
}

.legal-hero h1 {
  max-width: none;
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin-bottom: 14px;
}

.about-main {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

/* Grid items must be allowed to shrink below their content's min-content,
   otherwise long words (e.g. headlines) force horizontal overflow on mobile. */
.about-main > *,
.about-hero > * {
  min-width: 0;
}

.about-hero h1,
.hero h1 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* line-height < 1 laesst Unterlaengen (g, y, p) unter die Box ragen;
     der Sheen-Effekt (background-clip: text) malt dort keinen Hintergrund
     mehr -> Buchstaben wirken abgeschnitten. Padding erweitert die
     Malflaeche, das negative Margin kompensiert den Layout-Abstand. */
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: start;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(14, 30, 51, 0.9), rgba(9, 19, 34, 0.78)),
    radial-gradient(circle at top right, rgba(125, 249, 208, 0.12), transparent 30%);
  box-shadow: var(--shadow);
}

.about-hero h1 {
  max-width: 16ch;
}

.about-hero-copy {
  margin-top: 16px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.78;
}

.about-highlight-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.about-highlight-list li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.about-profiles {
  display: grid;
  gap: 20px;
}

.profile-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(7, 17, 31, 0.56);
  backdrop-filter: blur(18px);
}

.profile-card-alt {
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
}

.profile-card-alt .profile-image-wrap {
  order: 2;
}

.profile-card-alt .profile-content {
  order: 1;
}

.profile-image-wrap {
  margin: 0;
  position: relative;
  min-height: 100%;
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.profile-card-alt .profile-image-wrap {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.profile-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 17, 31, 0) 48%, rgba(7, 17, 31, 0.58) 100%),
    radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.2) 100%);
}

.profile-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.profile-content {
  display: grid;
  gap: 14px;
  padding: 28px;
}

.profile-content p {
  color: var(--muted);
  line-height: 1.75;
}

.profile-signature {
  color: var(--text);
  font-weight: 700;
}

.site-footer {
  margin-top: 24px;
}

.legal-footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}

.legal-footer > p {
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.legal-footer .footer-links {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  margin-left: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.legal-footer .footer-links a {
  font-size: 0.92rem;
}

.contact-form-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 48px;
}

.contact-layout-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-layout-form .contact-form-card {
  grid-column: span 2;
}

.contact-form-card {
  display: grid;
  gap: 28px;
  padding: 34px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57, 208, 255, 0.07), transparent 55%);
  pointer-events: none;
}

.contact-form-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text);
  font-size: 1.3rem;
}

.contact-form {
  display: grid;
  gap: 20px;
  position: relative;
  z-index: 1;
}

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

.form-group {
  display: grid;
  gap: 10px;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea {
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: all 200ms ease;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  background: rgba(125, 249, 208, 0.08);
  box-shadow: 0 0 12px rgba(125, 249, 208, 0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.copilot-page .about-main,
.copilot-page .about-hero,
.copilot-page .about-hero > div,
.copilot-page .about-highlight-list,
.copilot-page .content-section,
.copilot-page .pillar-header,
.copilot-page .card-grid,
.copilot-page .contact-layout,
.copilot-page .info-card {
  min-width: 0;
}

@media (max-width: 960px) {
  .hero,
  .about-hero,
  .benefit-layout,
  .card-grid,
  .hero-metrics,
  .step-grid,
  .contact-layout,
  .services-grid,
  .pillar-header {
    grid-template-columns: 1fr;
  }

  #eu-ai-act .card-grid {
    grid-template-columns: 1fr;
  }

  .contact-layout-form .contact-form-card {
    grid-column: span 1;
  }

  .pillar-number {
    display: none;
  }

  h1,
  h2 {
    max-width: none;
  }

  .site-header,
  .site-footer,
  .brand-block {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-footer {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .legal-footer .footer-links {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 10px;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-nav,
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .site-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: none;
    justify-content: flex-start;
  }

  .site-nav-dropdown {
    width: auto;
  }

  .site-nav-parent {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  /* Aufklapp-Pfeil als klar erkennbaren, gut treffbaren Button darstellen */
  .site-nav-parent::after {
    width: 40px;
    height: 40px;
    flex: none;
    margin-left: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: var(--surface-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23edf4ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transform: none;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }

  .site-nav-dropdown:hover .site-nav-parent::after {
    transform: none;
  }

  .site-nav-dropdown[open] .site-nav-parent::after {
    transform: rotate(180deg);
    border-color: var(--accent);
    background-color: rgba(125, 249, 208, 0.08);
  }

  .site-nav-submenu {
    position: static;
    min-width: 0;
    margin-top: 6px;
    padding: 8px;
    border-radius: 10px;
    box-shadow: none;
  }

  .site-nav-submenu a {
    white-space: normal;
  }

  .heading-with-action {
    flex-wrap: wrap;
  }

  .faq-heading-with-action {
    flex-wrap: wrap;
  }

  .header-actions {
    margin-left: 0;
    justify-content: flex-end;
    align-self: stretch;
  }

  .mobile-header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .mobile-header-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .site-header.is-collapsed {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .site-header.is-collapsed .site-nav,
  .site-header.is-collapsed .brand-tagline {
    display: none;
  }

  .site-header.is-collapsed .brand-block {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .site-header.is-collapsed .header-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .site-header.is-collapsed .mobile-header-toggle {
    transform: rotate(180deg);
  }

  .profile-card,
  .profile-card-alt {
    grid-template-columns: 1fr;
  }

  .profile-card-alt .profile-image-wrap,
  .profile-card-alt .profile-content {
    order: initial;
  }

  .profile-image-wrap,
  .profile-card-alt .profile-image-wrap {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .copilot-page .about-main,
  .copilot-page .about-hero,
  .copilot-page .content-section {
    overflow-x: clip;
  }

  .copilot-page .about-hero h1,
  .copilot-page .about-hero-copy,
  .copilot-page .section-intro,
  .copilot-page .info-card h3,
  .copilot-page .info-card p,
  .copilot-page .contact-card p {
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: min(calc(100% - 24px), var(--max-width));
    padding-top: 16px;
  }

  .site-header,
  .site-footer,
  .hero,
  .content-section,
  .legal-hero,
  .legal-card {
    padding: 20px;
  }

  .about-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .site-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .site-header.is-collapsed {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand-logo {
    height: 40px;
    width: auto;
    margin-right: 8px;
  }

  .legal-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .site-nav {
    align-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .site-nav a {
    font-size: 0.95rem;
  }

  .social-button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .social-button svg {
    width: 18px;
    height: 18px;
  }

  .button {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
  }

  .section-corner-icon {
    width: 58px;
    height: 58px;
    border-bottom-left-radius: 14px;
  }

  .section-corner-icon svg {
    width: 24px;
    height: 24px;
    transform: translate(-2px, 2px);
  }

  .pillar-header h2 {
    padding-right: 64px;
  }

  .contact-form-card {
    padding: 20px;
    gap: 20px;
  }

  .contact-form-card h3 {
    font-size: 1.15rem;
  }

  .form-submit .button {
    width: 100%;
  }
}

@media (min-width: 961px) {
  .step-card {
    display: flex;
    flex-direction: column;
  }

  .step-card strong {
    min-height: 2.5em;
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   MOTION & ANIMATIONS
   - Scroll reveal only applies when <html class="has-anim">
     (added by an inline head script, only if motion is allowed)
   - A failsafe class ".reveal-off" makes everything visible
     again if the main script never initialises.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Animated aurora backdrop --------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 8%, rgba(57, 208, 255, 0.12), transparent 60%),
    radial-gradient(34vmax 34vmax at 88% 18%, rgba(125, 249, 208, 0.10), transparent 60%),
    radial-gradient(42vmax 42vmax at 60% 108%, rgba(255, 199, 109, 0.08), transparent 62%);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2.5%, 1.8%, 0) scale(1.07);
  }
  100% {
    transform: translate3d(2.5%, -1.8%, 0) scale(1.04);
  }
}

/* --- Scroll progress bar -------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 12px rgba(57, 208, 255, 0.55);
  z-index: 1100;
  pointer-events: none;
}

/* --- Scroll reveal ------------------------------------------- */
.has-anim:not(.reveal-off) .hero-copy > *,
.has-anim:not(.reveal-off) .hero-panel > *,
.has-anim:not(.reveal-off) .hero-metrics > li,
.has-anim:not(.reveal-off) .about-hero > div,
.has-anim:not(.reveal-off) .about-hero > ul,
.has-anim:not(.reveal-off) .about-highlight-list > li,
.has-anim:not(.reveal-off) .pillar-header,
.has-anim:not(.reveal-off) .section-heading,
.has-anim:not(.reveal-off) .step-card,
.has-anim:not(.reveal-off) .info-card,
.has-anim:not(.reveal-off) .demo-card,
.has-anim:not(.reveal-off) .contact-card,
.has-anim:not(.reveal-off) .contact-form-card,
.has-anim:not(.reveal-off) .profile-card,
.has-anim:not(.reveal-off) .faq-item,
.has-anim:not(.reveal-off) .legal-card,
.has-anim:not(.reveal-off) .signal-card,
.has-anim:not(.reveal-off) .stack-card,
.has-anim:not(.reveal-off) .benefit-list > li,
.has-anim:not(.reveal-off) .feature-action {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.has-anim .is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Hero headline sheen ------------------------------------- */
.has-anim .hero h1,
.has-anim .about-hero h1 {
  background: linear-gradient(
    110deg,
    var(--text) 0%,
    var(--text) 42%,
    #aeecff 52%,
    var(--text) 64%,
    var(--text) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textSheen 9s ease-in-out infinite;
}

@keyframes textSheen {
  0%,
  100% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
}

/* --- Button shine + lift ------------------------------------- */
.button {
  position: relative;
  overflow: hidden;
}

.button-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.button-primary:hover {
  box-shadow: 0 12px 30px rgba(57, 208, 255, 0.3);
}

.button-primary:hover::after {
  animation: btnShine 0.85s ease;
}

@keyframes btnShine {
  to {
    left: 140%;
  }
}

/* --- Card hover lift ----------------------------------------- */
.info-card,
.step-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}

@media (hover: hover) {
  .info-card:hover,
  .step-card:hover {
    transform: translateY(-5px);
    border-color: rgba(154, 178, 214, 0.34);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
  }
}

/* --- Animated nav underline ---------------------------------- */
@media (min-width: 961px) {
  .site-nav > a {
    position: relative;
  }

  .site-nav > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .site-nav > a:hover::after,
  .site-nav > a.is-active::after {
    transform: scaleX(1);
  }
}

/* --- Promo banner shimmer ------------------------------------ */
.promo-banner {
  position: relative;
  overflow: hidden;
}

.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(125, 249, 208, 0.16) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: bannerShimmer 7s linear infinite;
  pointer-events: none;
}

@keyframes bannerShimmer {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

/* ============================================================
   DEMO GALLERY + LIGHTBOX (Webdesign page)
   ============================================================ */

.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 680px) {
  .demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.demo-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}

@media (hover: hover) {
  .demo-card:hover {
    transform: translateY(-6px);
    border-color: rgba(125, 249, 208, 0.42);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(125, 249, 208, 0.12);
  }
}

.demo-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.demo-card-window {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #08111f;
}

.demo-dots {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.demo-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.demo-dots i:nth-child(1) {
  background: #ff5f57;
}
.demo-dots i:nth-child(2) {
  background: #febc2e;
}
.demo-dots i:nth-child(3) {
  background: #28c840;
}

.demo-card-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.demo-card-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.4) 0%, transparent 24%);
}

.demo-card-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
}

@media (hover: hover) {
  .demo-card:hover .demo-card-preview {
    transform: scale(1.05);
  }
}

.demo-card-preview svg {
  position: relative;
  width: 58px;
  height: 58px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.demo-preview-friseur {
  background: linear-gradient(140deg, #2a1830, #7b2d5e 60%, #c75c8a);
}
.demo-preview-barber {
  background: linear-gradient(140deg, #14181f, #3a4350 55%, #6b7686);
}
.demo-preview-zimmerer {
  background: linear-gradient(140deg, #2a1b10, #7a4a23 58%, #c08a4e);
}
.demo-preview-elektro {
  background: linear-gradient(140deg, #102338, #1d4e7a 55%, #39a0d0);
}

.demo-card-live {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 17, 31, 0.72);
  border: 1px solid rgba(125, 249, 208, 0.4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  backdrop-filter: blur(6px);
}

.demo-card-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(125, 249, 208, 0.6);
  animation: livePulse 2s ease-out infinite;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(125, 249, 208, 0.55);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(125, 249, 208, 0);
  }
}

.demo-card-body {
  display: grid;
  gap: 8px;
  padding: 18px 20px 20px;
}

.demo-card-tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.demo-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.demo-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.25s ease, gap 0.25s ease;
}

.demo-card-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .demo-card:hover .demo-card-cta {
    color: var(--accent);
    gap: 13px;
  }
  .demo-card:hover .demo-card-cta svg {
    transform: translateX(3px);
  }
}

/* --- Lightbox ------------------------------------------------ */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  padding: clamp(8px, 2vw, 26px);
  background: rgba(3, 8, 16, 0.82);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.demo-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.demo-modal-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a1626;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.985);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-modal.is-open .demo-modal-window {
  transform: none;
}

.demo-modal-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 31, 0.85);
}

.demo-modal-dots {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.demo-modal-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.demo-modal-dots i:nth-child(1) {
  background: #ff5f57;
}
.demo-modal-dots i:nth-child(2) {
  background: #febc2e;
}
.demo-modal-dots i:nth-child(3) {
  background: #28c840;
}

.demo-modal-address {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.demo-modal-address svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
}

.demo-modal-address span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.demo-segment {
  display: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}

@media (min-width: 720px) {
  .demo-segment {
    display: inline-flex;
  }
}

.demo-segment button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.demo-segment button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-segment button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #03111d;
}

.demo-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.demo-close:hover {
  background: rgba(255, 95, 87, 0.18);
  border-color: rgba(255, 95, 87, 0.5);
  transform: rotate(90deg);
}

.demo-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.demo-modal-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

.demo-modal-stage.is-mobile {
  background: #0a1626;
  padding: 18px 0;
  overflow-y: auto;
}

.demo-frame-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo-modal-stage.is-mobile .demo-frame-wrap {
  width: 390px;
  max-width: calc(100% - 24px);
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 9px solid #05080e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.demo-modal iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.demo-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #0a1626;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.demo-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.demo-loader span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(125, 249, 208, 0.22);
  border-top-color: var(--accent);
  animation: demoSpin 0.9s linear infinite;
}

@keyframes demoSpin {
  to {
    transform: rotate(360deg);
  }
}

body.demo-open {
  overflow: hidden;
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(2, 8, 17, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-consent-banner {
  width: min(560px, 100%);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(6, 14, 27, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
}

.cookie-consent-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.cookie-consent-banner p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cookie-consent-options {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(151, 169, 200, 0.06);
}

.cookie-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 0.92rem;
}

.cookie-option-row input {
  width: 16px;
  height: 16px;
}

.cookie-consent-banner a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-consent-actions {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-consent-decline {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(151, 169, 200, 0.08);
}

@media (max-width: 640px) {
  .cookie-consent-backdrop {
    align-items: flex-end;
    padding: 10px;
  }

  .cookie-consent-banner {
    width: 100%;
    padding: 14px;
  }

  .cookie-consent-actions {
    flex-direction: column;
    gap: 8px;
  }

  .cookie-consent-actions .button {
    width: 100%;
  }
}

/* --- 4-step process grid (Webdesign) ------------------------- */
@media (min-width: 641px) and (max-width: 960px) {
  .step-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 961px) {
  .step-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Small-screen fixes (Mobile First) ----------------------- */
/* The homepage contact heading is forced onto one line for the
   desktop side-by-side layout; on small screens it must wrap so it
   is not clipped by the section's overflow:hidden. */
@media (max-width: 640px) {
  #contact-title {
    white-space: normal;
  }

  /* The FAQ contact heading is fixed-width (flex: 0 0 auto) for the
     desktop layout next to the button; on small screens it must take the
     full row width and wrap, otherwise it is clipped by overflow:hidden. */
  .faq-heading-with-action h2 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Very small phones (<= 360px): keep the collapsed header on one row
   without overflowing the viewport. */
@media (max-width: 360px) {
  .site-header {
    padding: 12px;
    gap: 8px;
  }

  .brand-logo {
    height: 34px;
    margin-right: 4px;
  }

  .header-actions {
    gap: 7px;
  }

  .social-button {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .social-button svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   ACCESSIBILITY — consistent keyboard focus indicator
   Only shown on keyboard navigation (:focus-visible); no layout
   shift (outline is drawn outside the box).
   ============================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}
/* ============================================================
   Startseite: Zwei-Wege-Einstieg (Nach außen / Nach innen)
   ============================================================ */
.about-hero .hero-actions {
  margin-top: 22px;
}

.entry-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.entry-panel {
  --panel-accent: var(--accent);
  --panel-glow: rgba(125, 249, 208, 0.14);
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 30px 28px;
  overflow: hidden;
}

.entry-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 85% -10%, var(--panel-glow), transparent 55%);
}

.entry-panel > * {
  position: relative;
}

.entry-panel-m365 {
  --panel-accent: var(--accent-warm);
  --panel-glow: rgba(255, 199, 109, 0.12);
}

@media (hover: hover) {
  .entry-panel-web:hover {
    border-color: rgba(125, 249, 208, 0.42);
  }

  .entry-panel-m365:hover {
    border-color: rgba(255, 199, 109, 0.42);
  }
}

.entry-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-accent);
}

.entry-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-panel h3 {
  margin: 0;
  font-size: 1.65rem;
  padding-right: 0;
}

.entry-panel .entry-copy {
  max-width: 52ch;
}

.entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.entry-list li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  line-height: 1.6;
}

.entry-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--panel-accent);
  border-bottom: 2px solid var(--panel-accent);
  transform: rotate(-45deg);
}

.entry-sublist {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc;
  display: grid;
  gap: 6px;
}

.entry-list .entry-sublist li {
  padding-left: 0;
  line-height: 1.5;
}

.entry-list .entry-sublist li::before {
  content: none;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entry-tags span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.entry-panel .feature-action {
  margin-top: 6px;
  justify-items: start;
}

/* Startseite: Demo-Streifen ------------------------------------ */
.home-showcase {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.shot-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease, box-shadow 0.4s ease;
}

.shot-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.shot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.4) 0%, transparent 30%);
}

.shot-card .demo-dots {
  top: 10px;
  left: 12px;
}

@media (hover: hover) {
  .shot-card:hover {
    transform: translateY(-5px);
    border-color: rgba(125, 249, 208, 0.42);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  }

  .shot-card:hover img {
    transform: scale(1.05);
  }
}

.shot-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .entry-split {
    grid-template-columns: 1fr;
  }

  .home-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Startseite: Abstand zwischen Sektions-Kopf und Kacheln (wie
   .pillar-header auf den Unterseiten) */
#leistungen .section-heading,
#referenzen .section-heading,
#ablauf .section-heading,
#warum .section-heading {
  margin-bottom: 28px;
}

/* M365: "Kennen Sie das?" nutzt .section-heading statt
   .pillar-header. gap: 0 schaltet den Grid-Gap ab, der sich sonst
   auf die Eigenmargins von .eyebrow (14px) und .section-intro
   (18px) addiert - damit exakt derselbe Rhythmus wie in den
   .pillar-header-Sektionen, plus 28px Abstand zu den Karten. */
#probleme .section-heading {
  gap: 0;
  margin-bottom: 28px;
}

/* M365: "Haeufige Fragen" - gleiche Gap-Korrektur wie oben. Der
   Abstand zur Liste kommt wie auf der FAQ-Seite ueber .faq-list
   (32px statt 28px, weil die Accordion-Zeilen mehr Luft brauchen). */
#faq .section-heading {
  gap: 0;
}

#faq .faq-list {
  margin-top: 32px;
}

/* ============================================================
   Webdesign: Print & Geschäftsausstattung
   ============================================================ */
.print-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
}

.print-points {
  display: grid;
  gap: 18px;
}

.print-stage {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
  padding: 24px;
}

.print-badge {
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 17, 31, 0.72);
  border: 1px solid rgba(255, 199, 109, 0.45);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-warm);
  backdrop-filter: blur(6px);
}

.print-flyer {
  position: relative;
  width: min(340px, 92%);
  aspect-ratio: 1 / 1.414;
  padding: 34px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background:
    radial-gradient(circle at 85% -5%, rgba(125, 249, 208, 0.16), transparent 45%),
    linear-gradient(165deg, #10203a, #0a1526 70%);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.print-flyer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.print-flyer-eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.print-flyer-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.print-flyer-lines {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.print-flyer-lines i {
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.print-flyer-lines i:nth-child(1) {
  width: 88%;
}

.print-flyer-lines i:nth-child(2) {
  width: 68%;
}

.print-flyer-lines i:nth-child(3) {
  width: 52%;
}

.print-flyer-footer {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.print-card {
  position: absolute;
  right: 2%;
  bottom: 7%;
  width: min(310px, 78%);
  aspect-ratio: 85 / 55;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(125, 249, 208, 0.35);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 120%, rgba(57, 208, 255, 0.14), transparent 50%),
    linear-gradient(140deg, #14294a, #0a1628 75%);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55);
  transform: rotate(4deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.print-card-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #03111d;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

.print-card-name {
  margin-top: auto;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}

.print-card-role {
  font-size: 0.82rem;
  color: var(--muted);
}

.print-card-web {
  margin-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

@media (hover: hover) {
  .print-stage:hover .print-flyer {
    transform: rotate(-2deg) translateY(-8px);
  }

  .print-stage:hover .print-card {
    transform: rotate(7deg) translate(8px, -12px);
  }
}

@media (max-width: 960px) {
  .print-layout {
    grid-template-columns: 1fr;
  }

  .print-stage {
    min-height: 460px;
  }
}

/* ============================================================
   Responsive Feinschliff (Eyebrow vs. Ecken-Icon, Print, Panels)
   ============================================================ */
/* Eyebrow in Pillar-Headern nicht unter das Ecken-Icon laufen
   lassen (gleiche Logik wie .pillar-header h2) */
.pillar-header .eyebrow {
  padding-right: 82px;
}

@media (max-width: 640px) {
  .pillar-header .eyebrow {
    padding-right: 64px;
  }

  .entry-panel {
    padding: 24px 20px;
  }

  .entry-panel h3 {
    font-size: 1.45rem;
  }

  .print-stage {
    padding: 14px;
    min-height: 420px;
  }

  .print-flyer {
    width: min(290px, 94%);
    padding: 26px 22px 22px;
  }

  .print-flyer-title {
    font-size: 1.15rem;
  }

  .print-card {
    width: min(260px, 84%);
    padding: 16px 18px;
  }

  .print-card-logo {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .print-card-name {
    font-size: 1rem;
  }

  .home-showcase {
    gap: 10px;
  }
}

/* ============================================================
   Footer v2: Brand + Linkspalten + Rechtszeile
   ============================================================ */
.site-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
  padding: 36px 30px 22px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.footer-brand .brand-logo {
  height: 44px;
  margin-right: 0;
}

.footer-brand p {
  max-width: 36ch;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-col {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
}

.footer-col a {
  transition: color 160ms ease;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-col-title {
  margin-bottom: 2px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-address {
  line-height: 1.7;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-legal a {
  transition: color 160ms ease;
}

.footer-legal a:hover {
  color: var(--text);
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 24px 20px 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Startseite: Kundenstimmen, Team-Teaser, Formular-Hinweis
   ============================================================ */
#stimmen .section-heading,
#faq-teaser .section-heading {
  margin-bottom: 28px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.testimonial-card {
  margin: 0;
  gap: 14px;
}

.testimonial-stars {
  color: var(--accent-warm);
  font-size: 1.05rem;
  letter-spacing: 4px;
}

.testimonial-card blockquote {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.testimonial-card figcaption {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 6px;
}

.testimonial-card figcaption strong {
  color: var(--text);
}

.testimonial-source {
  font-size: 0.82rem;
  color: var(--muted);
}

.team-teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: center;
}

.team-photos {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.team-photos img {
  width: min(230px, 46%);
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-photos img:first-child {
  transform: rotate(-4deg) translateY(8px);
}

.team-photos img:last-child {
  transform: rotate(4deg) translateY(-8px);
  margin-left: -22px;
}

@media (hover: hover) {
  .team-teaser:hover .team-photos img:first-child {
    transform: rotate(-2deg) translateY(2px);
  }

  .team-teaser:hover .team-photos img:last-child {
    transform: rotate(2deg) translateY(-2px);
  }
}

.team-teaser .feature-action {
  margin-top: 22px;
  justify-items: start;
}

.form-privacy-note {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 960px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .team-teaser {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Stimmen-CTA über volle Grid-Breite, zentriert */
.testimonial-grid .feature-action {
  grid-column: 1 / -1;
  justify-items: center;
  margin-top: 10px;
}

/* Abstand zwischen Team-Teaser und Karten darunter */
#team .team-teaser {
  margin-bottom: 28px;
}

/* ============================================================
   Gründerpaket (Startseite) – Styles mit Prefix gp-
   Collage nach dem Muster der Print-Sektion (webdesign.html);
   alles Übrige nutzt bestehende Klassen (info-card, entry-list,
   card-grid-2up, feature-action, …).
   ============================================================ */
.gp-collage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 28px;
  align-items: center;
  margin-top: 28px;
}

.gp-points {
  display: grid;
  gap: 18px;
}

.gp-stage {
  position: relative;
  min-height: 760px;
  display: grid;
  place-items: center;
  padding: 16px;
}

.gp-monitor {
  position: absolute;
  z-index: 0;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 96%);
  display: grid;
  justify-items: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-monitor-frame {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(160deg, #14243d, #081120 80%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.gp-monitor-screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(165deg, #10203a, #0a1526 70%);
}

.gp-monitor-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gp-monitor-neck {
  width: 64px;
  height: 24px;
  background: linear-gradient(180deg, #0c1a30, #081120);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
}

.gp-monitor-base {
  width: 160px;
  height: 10px;
  border-radius: 0 0 10px 10px;
  background: #0c1a30;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: none;
}

.gp-stage-badge {
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 17, 31, 0.72);
  border: 1px solid rgba(255, 199, 109, 0.45);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-warm);
  backdrop-filter: blur(6px);
}

.gp-stage-badge-alt {
  top: auto;
  right: auto;
  bottom: 16px;
  left: 10px;
  border-color: rgba(125, 249, 208, 0.45);
  color: var(--accent);
}

.gp-flyer {
  position: relative;
  z-index: 1;
  width: min(340px, 62%);
  aspect-ratio: 1 / 1.414;
  margin-top: 190px;
  margin-right: 30%;
  padding: 36px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background:
    radial-gradient(circle at 85% -5%, rgba(125, 249, 208, 0.16), transparent 45%),
    linear-gradient(165deg, #10203a, #0a1526 70%);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-flyer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.gp-flyer-eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.gp-flyer-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.gp-flyer-lines {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.gp-flyer-lines i {
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.gp-flyer-lines i:nth-child(1) {
  width: 88%;
}

.gp-flyer-lines i:nth-child(2) {
  width: 68%;
}

.gp-flyer-lines i:nth-child(3) {
  width: 52%;
}

.gp-flyer-footer {
  margin-top: auto;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.gp-print-card {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 6%;
  width: min(310px, 60%);
  aspect-ratio: 85 / 55;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(125, 249, 208, 0.35);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 120%, rgba(57, 208, 255, 0.14), transparent 50%),
    linear-gradient(140deg, #14294a, #0a1628 75%);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55);
  transform: rotate(4deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-print-card-logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #03111d;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.gp-print-card-name {
  margin-top: auto;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

.gp-print-card-role {
  font-size: 0.84rem;
  color: var(--muted);
}

.gp-print-card-web {
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.gp-phone {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 58%;
  width: min(250px, 46%);
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 40px;
  background: linear-gradient(160deg, #14243d, #081120 80%);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-50%) rotate(3deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-phone-speaker {
  display: block;
  width: 56px;
  height: 5px;
  margin: 5px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.gp-phone-screen {
  position: relative;
  display: block;
  aspect-ratio: 9 / 19;
  border-radius: 32px 32px 30px 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% -10%, rgba(57, 208, 255, 0.16), transparent 45%),
    linear-gradient(165deg, #10203a, #0a1526 70%);
}

/* Skeleton-UI als Platzhalter, bis assets/images/gp-phone-screen.webp
   vorliegt; das Bild legt sich per z-index darüber */
.gp-phone-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
}

.gp-phone-skeleton i {
  display: block;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.gp-phone-skeleton i:nth-child(1) {
  height: 38%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 80% -20%, rgba(125, 249, 208, 0.2), transparent 55%),
    rgba(255, 255, 255, 0.08);
}

.gp-phone-skeleton i:nth-child(2) {
  height: 10px;
  width: 72%;
}

.gp-phone-skeleton i:nth-child(3) {
  height: 10px;
  width: 54%;
}

.gp-phone-skeleton i:nth-child(4) {
  width: 52%;
  height: 24px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  opacity: 0.85;
}

.gp-phone-screen img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .gp-stage:hover .gp-monitor {
    transform: translateX(-50%) translateY(-6px);
  }

  .gp-stage:hover .gp-flyer {
    transform: rotate(-2deg) translateY(-8px);
  }

  .gp-stage:hover .gp-print-card {
    transform: rotate(7deg) translate(6px, -10px);
  }

  .gp-stage:hover .gp-phone {
    transform: translateY(-52%) rotate(1deg);
  }
}

.gp-pricing {
  margin-top: 28px;
}

.gp-price-card {
  align-content: start;
}

/* Titel, Preis und Abo-Block über alle drei Karten auf gleicher
   Höhe halten (Titel kann zweizeilig umbrechen) */
@media (min-width: 961px) {
  .gp-price-card h3 {
    line-height: 1.25;
    min-height: 2.5em;
  }
}

/* Paketfarben: Basic = Blau (Primaerfarbe), Professional = Mint,
   Individuell = Gold. Farbe steuert Rahmen, Top-Balken und – via
   --panel-accent – die Haekchen der entry-list. */
.gp-price-card-basic,
.gp-price-card-featured,
.gp-price-card-individuell {
  position: relative;
}

.gp-price-card-basic::before,
.gp-price-card-featured::before,
.gp-price-card-individuell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.gp-price-card-basic {
  --panel-accent: var(--accent-strong);
  border-color: rgba(57, 208, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(57, 208, 255, 0.16), 0 18px 48px rgba(57, 208, 255, 0.06);
}

.gp-price-card-basic::before {
  background: linear-gradient(90deg, var(--accent-strong), rgba(57, 208, 255, 0.12));
}

.gp-price-card-featured {
  --panel-accent: var(--accent);
  border-color: rgba(125, 249, 208, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 249, 208, 0.22), 0 18px 48px rgba(125, 249, 208, 0.07);
}

.gp-price-card-featured::before {
  background: linear-gradient(90deg, var(--accent), rgba(125, 249, 208, 0.12));
}

.gp-price-card-individuell {
  --panel-accent: var(--accent-warm);
  border-color: rgba(255, 199, 109, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 199, 109, 0.16), 0 18px 48px rgba(255, 199, 109, 0.06);
}

.gp-price-card-individuell::before {
  background: linear-gradient(90deg, var(--accent-warm), rgba(255, 199, 109, 0.12));
}

.gp-price {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

.gp-price-note {
  margin-top: -6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.gp-value-box {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(57, 208, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(57, 208, 255, 0.11), rgba(57, 208, 255, 0.03));
  display: grid;
  gap: 4px;
}

.gp-value-box-featured {
  border-color: rgba(125, 249, 208, 0.38);
  background: linear-gradient(180deg, rgba(125, 249, 208, 0.13), rgba(125, 249, 208, 0.04));
}

.gp-value-label {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.gp-price-card .gp-value-total {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.gp-price-card .gp-value-saving {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.gp-price-card-featured .gp-value-saving {
  color: var(--accent);
}

.gp-price-card-basic .gp-value-saving {
  color: var(--accent-strong);
}

/* Preis + FAQ-Button unter dem Intro-Text der Referenzen-Section */
.ref-price-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 24px;
}

.ref-price-action .gp-price {
  margin: 0;
  /* Akzent-Gruen wie die Eyebrows ueber den Sektionsueberschriften.
     Der Einstiegspreis ist die Kernaussage des Blocks und soll aus
     dem gedaempften Umfeld herausstechen. */
  color: var(--accent);
}

.ref-price-action .ref-price-note {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.ref-price-action .button {
  margin-top: 16px;
}

.gp-abo {
  display: grid;
  gap: 10px;
}

.gp-abo-title {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.gp-abo-options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.gp-abo-options li {
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.gp-abo-featured {
  border-color: rgba(125, 249, 208, 0.5);
}

.gp-abo-rate {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

/* Badge sitzt auf der oberen Rahmenkante der 12-Monats-Option –
   absolut positioniert, damit es nie mit der Zeile umbricht */
.gp-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(125, 249, 208, 0.5);
  border-radius: 999px;
  background: #0d1b30;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Verweist inhaltlich aufs Basic-Paket -> Basic-Blau.
   (Selektor mit .gp-price-card, um .info-card p zu ueberstimmen) */
.gp-price-card .gp-list-intro {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
}

.gp-cta {
  margin-top: 28px;
  justify-items: center;
}

@media (max-width: 960px) {
  .gp-collage-layout {
    grid-template-columns: 1fr;
  }

  .gp-stage {
    min-height: 640px;
  }

  .gp-flyer {
    margin-top: 150px;
  }

  /* Platz für das Badge unten links schaffen */
  .gp-print-card {
    bottom: 12%;
  }
}

@media (max-width: 640px) {
  .gp-stage {
    padding: 14px;
    min-height: 560px;
  }

  .gp-flyer {
    width: min(270px, 60%);
    margin-top: 120px;
    margin-right: 28%;
    padding: 24px 20px 20px;
  }

  .gp-flyer-title {
    font-size: 1.15rem;
  }

  .gp-print-card {
    width: min(250px, 62%);
    padding: 16px 18px;
  }

  .gp-print-card-logo {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  .gp-print-card-name {
    font-size: 1.05rem;
  }

  .gp-phone {
    width: min(180px, 42%);
    padding: 7px;
    border-radius: 30px;
  }

  .gp-phone-screen {
    border-radius: 24px;
  }
}

/* ============================================================
   Microsoft 365 & Copilot – Pakete, Wartung, Preistabellen
   Ergaenzt die bestehenden Bausteine (info-card, entry-list,
   gp-price-card, step-grid, faq-item) um die wenigen Teile,
   fuer die es noch kein Muster gab. Keine neuen Farben:
   ausschliesslich Variablen aus :root.
   ============================================================ */

/* --- "Empfohlen"-Pill auf der Preiskarte ---------------------
   Laeuft im Fluss statt absolut positioniert, weil .info-card
   overflow:hidden hat und der farbige Top-Balken der
   gp-price-card-* auf top:0 sitzt. */
.pkg-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(125, 249, 208, 0.5);
  border-radius: 999px;
  background: rgba(125, 249, 208, 0.1);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Titel direkt unter dem Badge nicht doppelt abstaenden */
.gp-price-card .pkg-badge + h3 {
  margin-top: -2px;
}

/* Enthaelt eine Kartenreihe ein Badge, bekommen die uebrigen
   Karten oben denselben Platz reserviert (Badge-Hoehe 24px +
   Grid-Gap 12px + die 24px Standard-Padding der .info-card).
   So liegen Titel, Preis und Listen aller Karten auf einer
   Linie. Nur im Desktop-Layout noetig – darunter stapeln die
   Karten ohnehin. Faellt :has() aus, bleibt lediglich der
   bisherige leichte Versatz. */
@media (min-width: 961px) {
  .gp-pricing:has(.pkg-badge) .gp-price-card:not(:has(.pkg-badge)) {
    padding-top: 60px;
  }
}

/* --- Claim-Zeile unter dem Preis -----------------------------
   Nimmt die Akzentfarbe der jeweiligen Karte (--panel-accent),
   anders als .gp-list-intro, das bewusst immer Basic-Blau ist.
   Selektor mit .gp-price-card, um .info-card p zu ueberstimmen. */
.gp-price-card .pkg-claim {
  margin-top: 4px;
  padding-bottom: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--panel-accent);
}

/* --- Preiszusatz "/ Benutzer / Monat" ------------------------
   Sitzt inline hinter dem .gp-price-Betrag, damit die Zeile
   typografisch eine Einheit bleibt. */
.gp-price .gp-price-unit {
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

/* --- Fussnote unter einer Kartenreihe ------------------------ */
.price-footnote {
  margin-top: 20px;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.price-footnote strong {
  color: var(--text);
}

/* --- Governance-Sektion: 4 Karten als 2x2 ---------------------
   Gleiche Loesung wie bei #eu-ai-act auf der M365-Seite, damit
   die vierte Karte nicht allein in einer Reihe steht. */
#copilot-governance .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
  #copilot-governance .card-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Zeitersparnis-Zeile in den Copilot-Use-Case-Karten ------
   Optisch identisch zur .gp-list-intro der Preiskarten, aber
   ausserhalb von .gp-price-card nutzbar. */
.usecase-saving {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
}

/* --- Preis-/Optionstabelle im Kartenlook --------------------- */
.price-table-card {
  margin-top: 26px;
  padding: 0;
  overflow: hidden;
}

.price-table-card .price-table-title {
  margin: 0;
  padding: 20px 24px 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Horizontaler Scroll bleibt in diesem Container – die Seite
   selbst bekommt nie eine Querscrollbar. */
.price-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.price-table th {
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
}

.price-table td {
  padding: 13px 24px;
  border-top: 1px solid var(--line);
  line-height: 1.55;
  color: var(--muted);
  vertical-align: top;
}

.price-table tbody tr:first-child td {
  border-top: none;
}

.price-table td:first-child {
  font-weight: 600;
  color: var(--text);
}

.price-table .price-table-amount {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  white-space: nowrap;
}

.price-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Mobil: Tabelle als gestapelte Bloecke, Spaltenname aus
   data-label. Verhindert Quetsch-Layout auf kleinen Displays. */
@media (max-width: 640px) {
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td {
    display: block;
    width: 100%;
  }

  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .price-table tr {
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }

  .price-table tbody tr:first-child {
    border-top: none;
  }

  .price-table td {
    padding: 2px 20px;
    border-top: none;
  }

  .price-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .price-table td:first-child[data-label]::before {
    display: none;
  }

  .price-table .price-table-amount {
    margin-top: 6px;
  }
}

/* --- Copilot-Teaser auf der Microsoft-365-Seite --------------- */
.copilot-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  /* end statt center: der Button sitzt unten rechts und kollidiert
     nie mit dem absolut positionierten .card-corner-icon oben rechts */
  align-items: end;
}

.copilot-teaser > div:first-child {
  display: grid;
  gap: 12px;
}

.copilot-teaser .feature-action {
  justify-items: end;
}

@media (max-width: 960px) {
  .copilot-teaser {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .copilot-teaser .feature-action {
    justify-items: start;
  }
}

/* --- Beispielrechnung (Copilot-Kostensektion) ----------------
   Nutzt die Optik der gp-value-box, aber mit Gold-Akzent, damit
   sie sich von den Ersparnis-Boxen der Startseite unterscheidet. */
.calc-box {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 199, 109, 0.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 199, 109, 0.1), rgba(255, 199, 109, 0.03));
  display: grid;
  gap: 6px;
}

.calc-box .calc-box-label {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.calc-box p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

.calc-box strong {
  color: var(--text);
}

/* --- Wartungskarten: Akzentfarbe wie die Paketreihe darueber -- */
.gp-price-card-basic .price-table-amount {
  color: var(--accent-strong);
}

.gp-price-card-individuell .price-table-amount {
  color: var(--accent-warm);
}

/* ============================================================
   Call-to-Action-Sektion (Startseite: "Der erste Eindruck")
   Setzt sich farblich klar von den uebrigen content-sections ab:
   Akzentrahmen, getoenter Verlauf und derselbe 4px-Balken auf der
   Oberkante, den auch die Preiskarten tragen.

   Wird ANSTELLE von .accent-section gesetzt - beide zusammen
   wuerden sich beim background gegenseitig ueberschreiben.
   Die Sektion darf aus demselben Grund kein .section-corner-icon
   tragen: dessen halbtransparenter Kasten sitzt genau auf dem
   Akzentbalken.
   ============================================================ */
.cta-section {
  border-color: rgba(125, 249, 208, 0.42);
  background:
    radial-gradient(720px 340px at 12% -25%, rgba(125, 249, 208, 0.15), transparent 60%),
    radial-gradient(680px 320px at 90% 115%, rgba(57, 208, 255, 0.14), transparent 58%),
    linear-gradient(155deg, rgba(15, 30, 53, 0.95), rgba(7, 17, 31, 0.88));
  box-shadow:
    0 0 0 1px rgba(125, 249, 208, 0.16),
    0 26px 64px rgba(125, 249, 208, 0.07);
}

.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong), rgba(57, 208, 255, 0.12));
}

/* Kompaktes Band. Der Textblock nutzt .section-heading, .eyebrow,
   h2 und .section-intro unveraendert - Typografie und Abstaende
   sind damit identisch zu allen anderen Sektionen. Kompakt bleibt
   die Sektion allein dadurch, dass sie kein Karten-Grid enthaelt.

   Der Button steht in der Ueberschriftenzeile: dasselbe Muster
   wie bei "Echte Projekte, live im Browser" und im Kontaktblock.
   .heading-with-action liefert Flexrow, Abstaende und den Umbruch
   unter 961px bereits mit - hier nur die Ausrichtung nach oben
   statt mittig, damit der Button auf Hoehe der ersten Zeile der
   Ueberschrift sitzt. */
.cta-heading {
  align-items: start;
}

/* Einzige Abweichung von der Standard-h2: mehr Zeilenbreite.
   Die 18ch der Standardregel sind fuer diese Ueberschrift zu
   schmal, weil sie hier neben dem Button steht und sonst
   vierzeilig umbricht. */
.cta-section h2 {
  max-width: 26ch;
}

/* Der Loesungssatz ist das Versprechen der Sektion und wird
   gegenueber der Problembeschreibung darueber hervorgehoben.
   Typografie wie .section-intro, nur kraeftiger. */
.cta-section .cta-promise {
  max-width: 74ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 600;
  color: var(--text);
}

.cta-action {
  display: grid;
  gap: 8px;
  justify-items: center;
}

/* Farbig hervorgehobener Teil der Ueberschrift */
.cta-highlight {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Der Button ist der Zielpunkt der Sektion und darf groesser
   sein als die Buttons in den Inhaltssektionen */
.cta-action .button {
  min-height: 48px;
  padding: 0 26px;
  font-size: 0.96rem;
  white-space: nowrap;
}

/* Button mit vorangestelltem Icon. Bisher gab es auf der Seite
   nur reine Text-Buttons, daher hier die Grundregel. Das Icon
   nimmt ueber currentColor automatisch die Buttonfarbe an und
   funktioniert damit auch auf .button-secondary. */
.button-icon {
  gap: 10px;
}

.button-icon svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-note {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Ab Tablet abwaerts wandert der Button unter den gesamten
   CTA-Text statt direkt unter die Ueberschrift.

   Dafuer wird die Ueberschriftenzeile mit display:contents
   aufgeloest: h2 und Aktionsblock werden dadurch zu direkten
   Kindern des Grids .section-heading - erst dann wirkt order
   ueber die Absaetze hinweg. Der Grid-Gap von 20px liefert den
   Abstand, die 8px margin-top setzen den Block zusaetzlich ab. */
@media (max-width: 960px) {
  .cta-heading {
    display: contents;
  }

  /* Bewusst ohne .cta-section davor: dasselbe Verhalten gilt auch
     fuer den Anruf-Button in "Ein Unternehmen, zwei Richtungen".

     justify-self: center zentriert den gesamten Block in der
     Sektionsbreite und macht ihn nur so breit wie der Button.
     justify-items: stretch legt die Notiz auf genau diese Breite,
     sodass sie mittig unter dem Button sitzt - die Zentrierung
     des Textes kommt aus der Grundregel von .cta-note. */
  .cta-action {
    order: 1;
    margin-top: 8px;
    justify-self: center;
    justify-items: stretch;
  }

  .cta-action .button {
    white-space: normal;
  }
}

/* ============================================================
   Verlinkte Schlagwoerter und Kennzahlen im Hero (Startseite)
   Aus den reinen Spans sind Links geworden. Die Optik bleibt
   unveraendert - dazu kommt nur ein Hover-Zustand, damit
   erkennbar ist, dass man klicken kann. Fokusringe liefert die
   globale a:focus-visible-Regel.
   ============================================================ */

/* Gleiche Werte wie .stack-card span, plus Rahmen und Hover.
   Der transparente Rahmen ist von Anfang an gesetzt, sonst
   springt das Layout beim Hover um 2px. */
.stack-card a {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.stack-card a:hover {
  border-color: rgba(125, 249, 208, 0.45);
  background: rgba(125, 249, 208, 0.1);
  color: var(--accent);
}

/* Die drei Fragen-Kacheln sind vollflaechig anklickbar: das
   Pseudoelement des Links deckt die gesamte Kachel ab, nicht nur
   den Textbereich.

   Eigener Hintergrund, damit sie sich vom Bildpanel und der
   Stack-Karte daneben absetzen: ein leichter Verlauf von Blau
   nach Mint ueber --surface-strong. Beides sind die vorhandenen
   Akzentfarben, nur stark heruntergedimmt - die Kacheln wirken
   dadurch waermer als die uebrigen Flaechen, ohne bunt zu sein. */
.hero-metrics li {
  position: relative;
  border-color: rgba(154, 178, 214, 0.26);
  background:
    linear-gradient(155deg, rgba(57, 208, 255, 0.11), rgba(125, 249, 208, 0.05)),
    var(--surface-strong);
  transition: border-color 160ms ease, background 160ms ease;
}

.hero-metrics li:hover {
  border-color: rgba(125, 249, 208, 0.42);
  background:
    linear-gradient(155deg, rgba(57, 208, 255, 0.17), rgba(125, 249, 208, 0.1)),
    var(--surface-strong);
}

.hero-metrics a {
  display: grid;
  gap: 8px;
}

.hero-metrics a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* --- Leistungsbereiche im Fliesstext betonen ----------------- */
/* Bewusst ohne Farbe: der Fliesstext steht in --muted, farbige
   Woerter darin wuerden wie Links gelesen. Das Schriftgewicht
   reicht als Betonung und bleibt ruhig. */
.accent-web,
.accent-m365 {
  font-weight: 700;
  color: var(--text);
}

/* --- Buttons unter dem Referenzen-Preis ---------------------- */
/* "Alle Demos ansehen" und "Haeufige Fragen" stehen nebeneinander.
   .ref-price-action ist eine Flex-Spalte, deshalb braucht es einen
   eigenen Zeilencontainer; auf schmalen Displays bricht er um. */
.ref-price-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Der Zeilenabstand kommt jetzt vom Container, nicht mehr von den
   einzelnen Buttons - sonst stuenden sie beim Umbruch versetzt. */
.ref-price-action .ref-price-buttons .button {
  margin-top: 0;
}

/* --- Anruf-Button in "Unsere Leistungen" ausrichten ---------- */
/* Desktop: Der Button soll mittig ueber der rechten Karte
   (Microsoft 365) stehen. Dafuer bekommt die Ueberschriftenzeile
   dasselbe Raster wie .entry-split darunter - zwei gleich breite
   Spalten, 18px Abstand. Ueberschrift landet in Spalte 1, der
   Aktionsblock in Spalte 2 und damit exakt ueber der rechten
   Karte; .cta-action zentriert seinen Inhalt bereits selbst.
   Die vertikale Lage bleibt unveraendert (align-items: start). */
@media (min-width: 961px) {
  #leistungen .cta-heading {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
}

/* --- Hero-Kacheln als Fragen -------------------------------- */
/* Die drei Kacheln tragen jetzt Fragen statt Kennzahlen. Frage
   in Textfarbe und etwas kompakter gesetzt, damit sie ueber
   mehrere Zeilen ruhig bleibt; die Antwort darunter gedaempft,
   damit die Frage zuerst gelesen wird.
   Groesse, Rahmen und Bewegung kommen weiter unten im Block
   "Fragen-Kacheln staerker betonen". */
.hero-metrics strong {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.hero-metrics span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Wert-/Ersparnis-Boxen auf gleiche Hoehe bringen --------- */
/* Die Gruenderpaket-Karten sind im Grid gleich hoch, die Listen
   darueber aber unterschiedlich lang (Basic 7 Punkte, Professional
   6 Punkte plus Unterliste). Dadurch standen die Wert-Boxen auf
   unterschiedlicher Hoehe.

   Loesung: Flex-Spalte statt Grid, die Box mit margin-top:auto an
   den unteren Rand. In einem Grid mit align-content:start greift
   margin:auto nicht, weil der freie Platz hinter der letzten Zeile
   liegt und nicht innerhalb davon.

   Nur ab 961px noetig - darunter stapeln die Karten und sind so
   hoch wie ihr Inhalt, es gibt also keinen freien Platz zu
   verteilen. */
@media (min-width: 961px) {
  .gp-price-card {
    display: flex;
    flex-direction: column;
  }

  .gp-price-card .gp-value-box {
    margin-top: auto;
  }
}

/* Die Ausrichtung der Kontakt-Buttons steht gesammelt weiter
   unten, siehe "Termin über Calendly buchen mittig ueber der
   rechten Karte". */

/* --- Schlagwort-Pills auf Mobil zentrieren ------------------- */
/* Ab Tablet abwaerts steht die Stack-Karte allein in einer Spalte.
   Linksbuendig entsteht dort rechts ein unruhiger Rest, weil die
   Pills unterschiedlich breit sind und umbrechen. Zentriert
   wirken die Zeilen ausgeglichen. Auf Desktop bleibt es
   linksbuendig, dort steht die Karte in der schmalen Seitenspalte. */
@media (max-width: 960px) {
  .stack-card {
    justify-content: center;
  }
}

/* ============================================================
   Mobile Navigation: Copilot dauerhaft sichtbar + Anruf-Button
   ============================================================ */

/* Der Anruf-Button steht im Markup jeder Seite, ist aber nur in
   der aufgeklappten mobilen Navigation sichtbar. Der Selektor
   braucht dieselbe Spezifitaet wie ".site-nav > a", das sonst
   display:inline-flex durchsetzen wuerde. */
.site-nav > .site-nav-cta {
  display: none;
}

@media (max-width: 960px) {
  /* --- Copilot ohne Aufklappen zeigen -----------------------
     Das Untermenue wird dauerhaft eingeblendet. Neuere
     Chrome-Versionen kapseln den Inhalt eines <details> in
     ::details-content mit content-visibility:hidden - das muss
     zusaetzlich aufgehoben werden. Aeltere Engines ignorieren
     das Pseudoelement und richten sich nach dem display der
     Kindelemente. */
  .site-nav-dropdown::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  /* Copilot wird zu einer ganz normalen Zeile der Liste: keine
     Panel-Optik, kein Einzug, gleiche Hoehe und gleicher Abstand
     wie die uebrigen Eintraege. Die 12px entsprechen dem Flex-Gap
     der Navigation, den es innerhalb des <details> nicht gibt. */
  .site-nav-dropdown > .site-nav-submenu {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .site-nav-submenu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    /* border-radius aus der Grundregel zuruecksetzen - sonst
       biegen sich die Enden der Trennlinie nach oben */
    border-radius: 0;
    white-space: normal;
  }

  /* Der Aufklapp-Pfeil entfaellt: es gibt nichts mehr
     aufzuklappen. Die Zeile bleibt ein Link auf /m365. */
  .site-nav-parent::after {
    display: none;
  }

  .site-nav-parent {
    cursor: default;
  }

  /* --- Anruf-Button am Ende der Navigation ------------------ */
  .site-nav > .site-nav-cta {
    display: inline-flex;
    margin-top: 8px;
    min-height: 48px;
  }
}

/* ============================================================
   Mobile Navigation, Korrekturen
   ============================================================ */

.site-nav > .site-nav-cta-note {
  display: none;
}

@media (max-width: 960px) {
  /* Alle Eintraege mittig - der Aufklapp-Pfeil ist entfallen,
     deshalb braucht .site-nav-parent kein space-between mehr. */
  .site-nav > a,
  .site-nav-parent,
  .site-nav-submenu a {
    justify-content: center;
    text-align: center;
  }

  /* --- Hinweis unter dem Anruf-Button ----------------------- */
  .site-nav > .site-nav-cta-note {
    display: block;
    margin: -4px 0 0;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* --- Kopfzeile: Logo links, Social-Icons rechts daneben ----
     Bisher stapelten Logo, Navigation und Icons untereinander.
     Jetzt teilen sich Logo und Icons die erste Zeile, die
     Navigation bekommt darunter die volle Breite.

     Bewusst mit :not(.is-collapsed): Der eingeklappte Zustand
     hat bereits ein eigenes, funktionierendes Zeilenlayout. */
  .site-header:not(.is-collapsed) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-header:not(.is-collapsed) .brand-block {
    order: 0;
    width: auto;
    flex: 0 0 auto;
  }

  .site-header:not(.is-collapsed) .header-actions {
    order: 1;
    width: auto;
    flex: 0 0 auto;
    /* schiebt die Icons an den rechten Rand */
    margin-left: auto;
    align-self: center;
  }

  .site-header:not(.is-collapsed) .mobile-header-toggle {
    order: 2;
    /* kein auto-Margin: sonst teilen sich Icons und Pfeil den
       freien Platz und die Icons rutschen zur Mitte */
    margin-left: 8px;
  }

  .site-header:not(.is-collapsed) .site-nav {
    order: 3;
    width: 100%;
  }
}

/* --- Trennlinien zwischen den mobilen Nav-Eintraegen --------- */
/* Jede klickbare Zeile bekommt eine Linie an der Unterkante -
   auch Copilot, damit die Liste durchgaengig gerastert wirkt.
   Der Anruf-Button ist ausgenommen; die Linie unter "Kontakt"
   trennt ihn bereits vom Rest. */
@media (max-width: 960px) {
  .site-nav > a:not(.site-nav-cta),
  .site-nav-parent,
  .site-nav-submenu a {
    border-bottom: 1px solid var(--line);
  }
}

/* --- "oder" zwischen den beiden Nav-Buttons ------------------ */
.site-nav > .site-nav-cta-or {
  display: none;
}

@media (max-width: 960px) {
  /* Zieht die beiden Buttons enger zusammen: der Flussabstand
     der Navigation betraegt 12px, die negativen Margins machen
     daraus 8px ober- und unterhalb des "oder". */
  .site-nav > .site-nav-cta-or {
    display: block;
    margin: -4px 0;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* Der zweite Button braucht keinen zusaetzlichen Vorabstand -
     die 8px margin-top gelten nur fuer den ersten, der sich vom
     Navigationsblock darueber absetzen soll. */
  .site-nav > .site-nav-cta-or + .site-nav-cta {
    margin-top: 0;
  }
}

/* --- Demo-Vorschauen der Startseite als Button --------------- */
/* Die Karten sind jetzt <button> statt <a>, weil sie die
   Demo-Lightbox oeffnen statt zu navigieren. Browser-Defaults
   des Buttons zuruecksetzen, damit die Optik identisch bleibt. */
.shot-card {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   Kontaktbloecke: Calendly-Button in der Kontaktkarte

   Auf allen sechs Seiten steht der Button jetzt in der
   Kontaktkarte unter den Kontaktdaten, nicht mehr neben der
   Ueberschrift. Die Ueberschrift bekommt dadurch die volle
   Sektionsbreite - die globale Begrenzung h2 { max-width: 18ch }
   wuerde sie sonst unnoetig schmal umbrechen lassen.
   ============================================================ */
#kontakt .section-heading h2,
#kontakt-webdesign .section-heading h2,
#kontakt-m365 .section-heading h2,
#kontakt-copilot .section-heading h2,
#kontakt-link .section-heading h2,
#kontakt-faq .section-heading h2 {
  max-width: none;
}

/* Der Button sitzt als letztes Element der Kontaktkarte.
   .contact-card ist ein Grid mit 20px Abstand; margin-top setzt
   ihn zusaetzlich von den Kontaktdaten darueber ab. */
.contact-card-cta {
  justify-self: start;
  margin-top: 4px;
}

/* --- Buttons unter den Demo-Karten (Webdesign-Seite) --------- */
/* Uebernimmt Raster und Abstand von .demo-grid, damit der linke
   Button unter der Zimmerei- und der rechte unter der
   Elektrotechnik-Karte steht. Gleicher Umbruchpunkt (680px):
   darunter stapeln Karten und Buttons einspaltig. */
.demo-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

@media (min-width: 680px) {
  .demo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ohne justify-self wuerde der Button als Grid-Item auf die
   volle Spaltenbreite gezogen. */
.demo-actions .button {
  justify-self: center;
  min-height: 48px;
  padding: 0 26px;
}

/* ============================================================
   Kombi-Rabatt-Karte in den Abo-Sektionen
   (webdesign #wartung-web und m365 #wartung)
   ============================================================ */

/* Dritte Spalte im Pillar-Header. Beide Sektionen haben dafuer ihr
   dekoratives Ecken-Icon abgegeben - es sass exakt an der Stelle,
   an der die Karte steht. Deshalb entfaellt hier auch der
   Rechtsabstand, den Ueberschrift und Eyebrow sonst brauchen, um
   nicht unter das Icon zu laufen. */
@media (min-width: 961px) {
  /* Feste Breite fuer die Kartenspalte. Mit "auto" richtet sich die
     Spalte nach dem max-content der Karte - der lange Fliesstext
     macht sie dann sehr breit und quetscht die Textspalte zusammen. */
  #wartung-web .pillar-header,
  #wartung .pillar-header {
    grid-template-columns: auto minmax(0, 1fr) 280px;
  }

  #wartung-web .pillar-header h2,
  #wartung .pillar-header h2,
  #wartung-web .pillar-header .eyebrow,
  #wartung .pillar-header .eyebrow {
    padding-right: 0;
  }
}

/* Hebt sich staerker ab als die uebrigen Karten: Akzentrahmen,
   Farbschleier aus der oberen rechten Ecke und ein weicher Glow.
   Nur vorhandene Akzentfarben, nur heruntergedimmt. */
.combo-note {
  align-self: start;
  display: grid;
  gap: 2px;
  /* fuellt ihre Rasterspalte; auf Mobil die volle Breite */
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(125, 249, 208, 0.45);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(150% 130% at 100% 0%, rgba(125, 249, 208, 0.18), transparent 62%),
    var(--surface-strong);
  box-shadow:
    0 0 0 1px rgba(125, 249, 208, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.24);
}

.combo-note-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.combo-note-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.combo-note-text {
  margin-top: 2px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Ab Tablet abwaerts klappt der Pillar-Header auf eine Spalte um;
   die Karte steht dann unter dem Einleitungstext. */
@media (max-width: 960px) {
  .combo-note {
    max-width: 420px;
    margin-top: 4px;
  }
}

/* --- LinkedIn-Button im Portraitbild (Ueber uns) ------------- */
/* Sitzt unten rechts im Bild. .profile-image-wrap ist bereits
   position: relative. Der z-index hebt den Button ueber den
   Verlaufs-Overlay des ::after-Pseudoelements. */
.profile-linkedin {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}

/* Bei Yannick sitzt der Button unten links: sein Portrait steht
   in der linken Spalte, dort liegt die aeussere Bildkante links. */
.profile-linkedin-left {
  right: auto;
  left: 16px;
}

@media (max-width: 640px) {
  .profile-linkedin {
    right: 12px;
    bottom: 12px;
  }

  .profile-linkedin-left {
    right: auto;
    left: 12px;
  }
}

/* ============================================================
   FRAGEN-KACHELN IM HERO STAERKER BETONEN
   ============================================================
   Die drei Fragen sind der Einstieg in die Leistungsseiten: wer
   sich in einer wiedererkennt, klickt weiter. Neben Ueberschrift,
   Buttons und Teamfoto gingen sie als ruhige graue Kacheln aber
   unter.

   Deshalb bekommen sie jetzt eine leuchtende Farbleiste an der
   Oberkante, mehr Schriftgewicht, einen eigenen Schlagschatten
   und ein deutliches Anheben beim Hover - alles aus dem
   vorhandenen Farbsystem (Cyan --accent-strong, Mint --accent).
   Dazu ein langsamer Lichtstreifen, der nacheinander ueber die
   drei Kacheln laeuft und den Blick dorthin zieht.
   ============================================================ */

.hero-metrics {
  gap: 16px;
}

/* Kraeftigerer Verlauf, sichtbarer Rahmen und eine eigene
   Schlagschatten-Ebene: die Kacheln liegen dadurch erkennbar
   ueber der Hero-Flaeche statt buendig darin.
   overflow: hidden beschneidet Farbleiste und Lichtstreifen an
   den abgerundeten Ecken. */
.hero-metrics li {
  overflow: hidden;
  padding: 20px 18px 18px;
  border-color: rgba(125, 249, 208, 0.3);
  background:
    linear-gradient(155deg, rgba(57, 208, 255, 0.17), rgba(125, 249, 208, 0.07)),
    var(--surface-strong);
  box-shadow: 0 16px 36px rgba(3, 10, 20, 0.42);
  transition: border-color 200ms ease, background 200ms ease,
    box-shadow 200ms ease, transform 200ms ease;
}

/* Farbleiste an der Oberkante - dasselbe Cyan-nach-Mint wie im
   Fortschrittsbalken der Seite. */
.hero-metrics li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 14px rgba(57, 208, 255, 0.45);
}

.hero-metrics li:hover {
  transform: translateY(-4px);
  border-color: rgba(125, 249, 208, 0.6);
  background:
    linear-gradient(155deg, rgba(57, 208, 255, 0.25), rgba(125, 249, 208, 0.12)),
    var(--surface-strong);
  box-shadow:
    0 22px 46px rgba(3, 10, 20, 0.5),
    0 0 26px rgba(57, 208, 255, 0.18);
}

/* min-width: 0 ist wichtig: der Link ist Rasterelement der Kachel
   und wuerde sonst auf seine min-content-Breite wachsen. Ein
   langes, nicht trennbares Wort wie "Microsoft-365-Lizenzen"
   schob den Text dadurch ueber den rechten Innenabstand hinaus.
   overflow-wrap bricht solche Woerter notfalls um. */
.hero-metrics a {
  gap: 10px;
  min-width: 0;
}

/* Frage groesser und schwerer als bisher - sie ist das, was
   gelesen werden soll. */
.hero-metrics strong {
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.35;
}

.hero-metrics strong,
.hero-metrics span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Lichtstreifen, der langsam ueber die Kachel wandert - versetzt
   gestartet, damit der Blick von der ersten zur dritten Frage
   gefuehrt wird. Nur bei erlaubter Bewegung (.has-anim). */
.has-anim .hero-metrics li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  transform: skewX(-14deg);
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  pointer-events: none;
  animation: metricSweep 9s ease-in-out infinite;
}

.has-anim .hero-metrics li:nth-child(2)::after {
  animation-delay: 0.7s;
}

.has-anim .hero-metrics li:nth-child(3)::after {
  animation-delay: 1.4s;
}

@keyframes metricSweep {
  0%,
  60% {
    left: -60%;
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  96%,
  100% {
    left: 120%;
    opacity: 0;
  }
}

/* Schmale Fenster: die Kacheln stehen untereinander und haben
   die volle Breite - dort darf die Frage groesser stehen. */
@media (max-width: 960px) {
  .hero-metrics strong {
    font-size: 1.1rem;
  }
}

/* ============================================================
   HERO-PANEL AUF DIE HOEHE DER FRAGEN-KACHELN BRINGEN
   ============================================================
   Rechts stehen Bild, "Unser Ansatz" und die Themen-Links, links
   endet die Spalte mit den drei Fragen-Kacheln. Weil .hero-panel
   seinen Inhalt oben ausrichtete (align-content: start), blieb
   unten ein Rest offen - die Link-Karte endete rund 25px vor der
   Unterkante der Kacheln.

   Auf dem Desktop fuellt das Panel die Spalte jetzt vollstaendig:
   die Bildzeile ist 1fr und nimmt den Ueberschuss auf, die beiden
   Karten behalten ihre Inhaltshoehe. Damit liegt die Unterkante
   der Link-Karte exakt auf der Unterkante der Fragen-Kacheln.

   Zusaetzlich ist die rechte Spalte etwas breiter und die beiden
   Karten haben mehr Innenabstand, damit der Zuwachs nicht allein
   auf das Bild faellt.

   Mobil (<= 960px) bleibt alles wie bisher: dort steht das Panel
   unter der Textspalte, eine Ausrichtung gibt es nicht.
   ============================================================ */

@media (min-width: 961px) {
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.83fr);
  }

  .hero-panel {
    align-content: stretch;
    grid-template-rows: minmax(220px, 1fr) auto auto;
  }

  /* Das Bild fuellt seine Zeile aus. object-fit: cover haelt das
     Seitenverhaeltnis; beschnitten wird links und rechts, das
     Team steht mittig im Bild. */
  .hero-image-card {
    min-height: 0;
  }

  .hero-image-card img {
    height: 100%;
    object-fit: cover;
  }

  .hero-panel .signal-card,
  .hero-panel .stack-card {
    padding: 28px;
  }
}