:root {
  color-scheme: dark;
  --bg: #080a0d;
  --bg-soft: #0d1117;
  --paper: #080a0d;
  --panel: #111720;
  --panel-2: #171f2a;
  --ink: #f4f7fb;
  --text: #f4f7fb;
  --muted: #a5afbd;
  --quiet: #778393;
  --line: rgba(231, 239, 249, .12);
  --line-strong: rgba(231, 239, 249, .22);
  --lime: #c8f57c;
  --cyan: #91d9ff;
  --violet: #b9adff;
  --warm: #ffd0a1;
  --content: min(1360px, calc(100% - 48px));
  --radius: 26px;
  --space: clamp(5rem, 9vw, 9rem);
  --shadow: 0 28px 90px rgba(0, 0, 0, .38);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  background: var(--bg);
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;
  line-height: 1.65;
  isolation: isolate;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    radial-gradient(ellipse at 82% 8%, rgba(145, 217, 255, .12), transparent 30rem),
    radial-gradient(ellipse at 12% 48%, rgba(185, 173, 255, .075), transparent 34rem),
    var(--bg);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 78%);
}

::selection { background: var(--lime); color: #10140b; }
h1, h2, h3 { color: var(--text); letter-spacing: -.055em; }
p, li { color: var(--muted); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

.skip {
  border-radius: 999px;
  background: var(--lime);
  color: #10140b;
}

.header, .topbar {
  border: 1px solid var(--line);
  background: rgba(10, 13, 18, .78);
  box-shadow: 0 18px 56px rgba(0, 0, 0, .24);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

.header {
  top: 12px;
  width: min(1360px, calc(100% - 48px));
  height: auto;
  min-height: 72px;
  margin: 12px auto 0;
  padding: 9px 12px 9px 22px;
  border-radius: 999px;
  color: var(--text);
}

.topbar {
  color: var(--text);
}

.logo {
  color: var(--text);
  font-size: .86rem;
  font-weight: 780;
  letter-spacing: .095em;
  line-height: 1.05;
}

.logo span {
  display: block;
  margin-top: 4px;
  color: var(--quiet);
  font-size: .55rem;
  font-weight: 650;
  letter-spacing: .28em;
}

.header nav a, .main-nav a {
  color: var(--muted);
  transition: color .2s ease;
}

.header nav a:hover, .main-nav a:hover { color: var(--text); }
.header nav .active, .main-nav .nav-cta { color: var(--lime); }
.menu, .menu-button { color: var(--text); }

.wrap, .section-shell {
  width: var(--content);
}

.hero {
  padding-top: clamp(1.5rem, 3vw, 2.7rem);
}

.eyebrow, .kicker, .concept-kicker, .package-kicker {
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.eyebrow {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5.2rem);
  padding-block: clamp(3.7rem, 7vw, 6.8rem);
}

.hero h1 {
  max-width: 720px;
  margin-bottom: 1.5rem;
  color: var(--text);
  font-size: clamp(3.5rem, 8vw, 7.7rem);
  font-weight: 610;
  line-height: .92;
}

.serif { color: var(--lime); }
.hero-text { max-width: 500px; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }

.hero-offer {
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(200, 245, 124, .085), rgba(255, 255, 255, .025) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.hero-offer strong { color: var(--text); }
.hero-offer span { color: var(--muted); }

.button, .header-cta {
  border: 1px solid rgba(200, 245, 124, .82);
  border-radius: 999px;
  background: linear-gradient(145deg, #d4ff91, #bce96b);
  box-shadow: 0 10px 30px rgba(178, 228, 103, .12), inset 0 1px 0 rgba(255, 255, 255, .48);
  color: #10140b;
  font-weight: 720;
}

.button:hover, .header-cta:hover {
  background: #d8ff9c;
  box-shadow: 0 14px 38px rgba(178, 228, 103, .2);
  transform: translateY(-2px);
}

.text-link, .hero-bottom a, .quiet-link, .case-link, .concept-link {
  color: var(--text);
  text-decoration-color: rgba(200, 245, 124, .55);
}

.text-link span, .quiet-link span, .case-link span, .concept-link span { color: var(--lime); }

.hero-art {
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-art img { filter: saturate(.78) contrast(1.04); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hero-art:hover img { transform: scale(1.035); }

.hero-art::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(5, 7, 10, .08) 16%, rgba(5, 7, 10, .04) 42%, rgba(5, 7, 10, .7) 100%);
}

.hero-art-top, .hero-art-title, .hero-art-link { z-index: 1; }
.hero-art-top { color: rgba(255, 255, 255, .85); }
.hero-art-title { color: #fff; text-shadow: 0 4px 32px rgba(0, 0, 0, .26); }
.hero-art-link { border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(10, 13, 18, .72); color: var(--text); backdrop-filter: blur(18px); }
.hero-art-link span { color: var(--lime); }
.hero-bottom { border-top: 1px solid var(--line); color: var(--muted); }

.ticker {
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

.section { position: relative; }
.section-top { border-bottom-color: var(--line); color: var(--quiet); }
.intro, .pricing-intro, .graphics-note { color: var(--muted); }
.light, .muted { color: var(--muted); }

.service-grid > *, .package-card, .benefits > *, .steps > *, .contact-form, .contact-person {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 55px rgba(0, 0, 0, .14);
}

.service-grid > *, .package-card, .project, .design-piece {
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.service-grid > *:hover, .package-card:hover, .project:hover, .design-piece:hover {
  border-color: rgba(200, 245, 124, .34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24), 0 0 34px rgba(200, 245, 124, .045);
  transform: translateY(-4px);
}

.service-icon, .project-index, .project-tags, .format-list { color: var(--lime); }
.service-grid h3, .package-card h3, .project h3 { color: var(--text); }
.service-grid p, .package-card p, .project p { color: var(--muted); }

.project-visual, .design-image, .craft-project, .architecture-project, .restaurant-project, .fitness-project {
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 22px 65px rgba(0, 0, 0, .28);
}

.project-caption, .design-caption, .preview-bottom {
  border-color: var(--line);
  background: rgba(10, 13, 18, .76);
  color: var(--text);
  backdrop-filter: blur(18px);
}

.project-note, .graphics-note, .fine, .price-note { color: var(--quiet); }
.project-open, .device-switch button { border-color: var(--line); background: var(--panel); color: var(--text); }
.device-switch button.active, .project-open:hover { border-color: var(--lime); color: var(--lime); }

.pricing, .pricing-intro { color: var(--text); }
.pricing-bottom { border-top: 1px solid var(--line); }
.package-card-featured, .package-card.featured {
  border-color: rgba(200, 245, 124, .48);
  background: linear-gradient(145deg, rgba(200, 245, 124, .11), rgba(255, 255, 255, .025) 56%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.package-card .price, .package-card strong { color: var(--text); }
.price-note, .pricing-bottom, .benefits { color: var(--muted); }
.projects, .process, .why, .contact, .pricing, .graphics, .intro, .craft, .fitness { background-color: transparent; }

.contact {
  border-block: 1px solid var(--line);
  background: radial-gradient(ellipse at 8% 20%, rgba(145, 217, 255, .08), transparent 32rem), linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 55%);
}

.contact-grid { align-items: start; }
#contact-form .form-helper { margin: -10px 0 10px; font-size: .8125rem; line-height: 1.6; color: var(--quiet); }
.contact-person, .contact-form { padding: clamp(22px, 3vw, 34px); }
.contact-person a, .email { color: var(--lime); }
.contact-form { background: rgba(11, 15, 21, .72); }
.contact-form label, .form-row label, .contact-form p { color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea,
input, select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--quiet); }
option { background: #111720; color: var(--text); }

.footer-top, .footer-bottom { border-color: var(--line); color: var(--muted); }
.footer-top a, .footer-bottom a { color: var(--text); }
.footer-bottom a:hover { color: var(--lime); }

.topbar .brand-mark { background: var(--lime); color: #10140b; }
.topbar .brand-word { color: var(--text); }
.topbar .brand-sub { color: var(--quiet); }
.topbar .main-nav .nav-cta {
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .035) !important;
  color: var(--lime) !important;
}
.section-heading, .section-intro { color: var(--muted); }
.service-card, .price-card, .project-card, .orbit-card, .dialog-preview {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 55px rgba(0, 0, 0, .16);
}
.subpage-hero {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(145, 217, 255, .11), transparent 31rem),
    radial-gradient(ellipse at 18% 28%, rgba(185, 173, 255, .07), transparent 34rem),
    transparent;
}
.proof-card, .info-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02) 72%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 70px rgba(0, 0, 0, .24);
}
.proof-card > span, .proof-card > #mobile-price-title, .subpage-step > span { color: var(--quiet); }
.proof-card > strong { color: var(--lime); }
.proof-card > strong small { color: var(--muted); }
.proof-list li::before, .clean-list li::before { color: var(--lime); }
.subpage-cta {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) 72%);
  color: var(--text);
  box-shadow: var(--shadow);
}
.subpage-cta .kicker { color: var(--quiet); }
.contact-section { border-top-color: var(--line); background: transparent; }
.contact-meta span { border-color: var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); }
.contact-form { border-color: var(--line); background: rgba(11, 15, 21, .72); }
.contact-form input, .contact-form select, .contact-form textarea { border-color: var(--line-strong); background: rgba(255, 255, 255, .045); color: var(--text); }
.price-card-featured, .price-card.featured { border-color: rgba(200, 245, 124, .48); }
.project-dialog { border: 1px solid var(--line-strong); border-radius: 28px; background: #10151c; color: var(--text); box-shadow: var(--shadow); }
.project-dialog::backdrop { background: rgba(2, 4, 7, .78); backdrop-filter: blur(10px); }
.dialog-close { border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); }

@media (max-width: 860px) {
  .header { width: calc(100% - 28px); min-height: 64px; padding: 8px 10px 8px 17px; border-radius: 22px; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; padding-block: 3.2rem; }
  .hero-text { max-width: 620px; }
  .hero-art { max-width: 760px; width: 100%; margin-inline: auto; }
  .wrap, .section-shell { width: min(100% - 32px, 720px); }
}

@media (max-width: 560px) {
  :root { --space: 4.75rem; }
  .header { top: 8px; margin-top: 8px; }
  .hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .eyebrow { gap: 10px; font-size: .58rem; letter-spacing: .12em; }
  .hero-art { border-radius: 22px; }
  .hero-art-link { left: 14px; right: 14px; bottom: 14px; }
  .button { min-height: 48px; }
  .ticker { gap: 18px; font-size: .72rem; }
  .contact-person, .contact-form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Clearer service labels and a more useful first choice of web packages. */
.hero-packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hero-offer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 106px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(200, 245, 124, .075), rgba(255, 255, 255, .025) 68%);
  color: var(--text);
  cursor: default;
  text-align: left;
  text-decoration: none;
}

.hero-offer:hover { border-color: rgba(200, 245, 124, .55); }
.hero-offer-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; width: 100%; }
.hero-offer strong { font-size: .92rem; line-height: 1.3; }
.hero-offer .hero-offer-price { margin: 0; color: var(--lime); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.hero-offer .hero-offer-scope { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.42; }
.hero-offer .hero-offer-action { margin-top: 2px; color: var(--quiet); font-size: .75rem; font-weight: 700; letter-spacing: .035em; }

.ticker {
  padding: 20px clamp(16px, 4vw, 56px);
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  font-size: .88rem;
  letter-spacing: .025em;
}

.ticker > span { font-weight: 620; }
.ticker i { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--lime); font-size: 0; }

.service-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  color: var(--lime);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .05em;
}

@media (max-width: 560px) {
  .hero-packages { gap: 8px; }
  .hero-offer { min-height: 104px; padding: 11px 10px; }
  .hero-offer strong { font-size: .85rem; }
  .hero-offer .hero-offer-price { font-size: .8125rem; }
  .hero-offer .hero-offer-scope { font-size: .75rem; }
  .hero-offer .hero-offer-action { font-size: .75rem; }
}

.hero-offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 18px;
}

.hero-offer .hero-offer-action {
  display: inline-flex;
  margin-top: 2px;
  color: var(--quiet);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-decoration: none;
}

.hero-offer .hero-offer-action-primary { color: var(--lime); }
.hero-offer .hero-offer-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-offer .hero-offer-action:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 3px; }

.concept-scope {
  margin: 18px 0 22px;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
}
.concept-scope[hidden] { display: none; }

@media (max-width: 560px) {
  .hero-offer { min-height: 116px; }
  .hero-offer-actions { gap: 3px 10px; }
}

/* Compact motion offer: a clearly labeled concept visual, not a portfolio claim. */
.video-feature {
  margin-block: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.1rem, 3.2vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(118deg, rgba(145, 217, 255, .075), rgba(185, 173, 255, .065) 52%, rgba(255, 255, 255, .02));
}
.video-feature .section-top { margin: 0; }
.video-feature-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .82fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-top: clamp(1.6rem, 3.5vw, 3rem); }
.video-feature h2 { margin: 0 0 1rem; font-size: clamp(2.6rem, 5.7vw, 5.25rem); font-weight: 620; line-height: .98; letter-spacing: -.065em; }
.video-feature-copy > p { max-width: 610px; line-height: 1.72; }
.video-feature .video-feature-note { margin-top: .9rem; color: var(--quiet); font-size: .88rem; }
.video-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.5rem; }
.video-pilot-link { color: var(--text); font-size: .88rem; text-decoration-color: rgba(200, 245, 124, .5); text-underline-offset: 4px; }
.video-pilot-link span { margin-left: .3rem; color: var(--lime); }
.video-feature-art { position: relative; display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(280px,1fr) auto; gap:18px; padding:18px; min-height: 320px; border: 1px solid var(--line-strong); border-radius: 24px; background: radial-gradient(ellipse at 52% 53%, rgba(111, 134, 255, .25), transparent 38%), radial-gradient(ellipse at 18% 12%, rgba(145, 217, 255, .16), transparent 48%), linear-gradient(145deg, #171d29, #0b0e14 78%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 64px rgba(0, 0, 0, .24); }
.video-feature-art::before { position: absolute; inset: 0; content: ""; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at center, #000 12%, transparent 78%); }
.video-art-meta, .video-art-caption { position: relative; min-width:0; width:100%; overflow-wrap:anywhere; z-index: 2; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.video-art-meta { top:auto; }
.video-art-scene { position:relative; display:grid; place-items:center; min-width:0; min-height:280px; }
.video-art-caption { bottom:auto; color: var(--quiet); font-size: .52rem; }
.video-orbit { position: absolute; width: min(68%,240px); aspect-ratio: 1.45; border: 1px solid rgba(145, 217, 255, .52); border-radius: 50%; box-shadow: 0 0 0 18px rgba(145, 217, 255, .035), 0 0 0 42px rgba(185, 173, 255, .035); transform: rotate(-28deg); }
.video-orbit > span { position: absolute; top: 12%; left: 12%; width: 13px; height: 13px; border: 3px solid #10141e; border-radius: 50%; background: var(--lime); box-shadow: 0 0 22px rgba(200, 245, 124, .75); }
.video-core { position: absolute; width: clamp(100px, 14vw, 156px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .35); border-radius: 38%; background: radial-gradient(circle at 33% 27%, #fff 0 1%, #c9eaff 2% 9%, #8ad7ff 16%, #5867ca 48%, #262c63 74%, #111827 100%); box-shadow: inset -14px -20px 30px rgba(6, 9, 24, .56), 20px 24px 46px rgba(46, 68, 173, .3), 0 0 60px rgba(145, 217, 255, .2); transform: rotate(-22deg); }
.video-play { position: absolute; right: 20px; bottom: 48px; z-index: 3; display: grid; width: 42px; height: 42px; place-items: center; padding-left: 2px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(10, 13, 18, .65); color: var(--lime); font-size: .75rem; backdrop-filter: blur(14px); }
@media (max-width: 950px) {
  .video-feature-grid { grid-template-columns: 1fr; }
  .video-feature-art { width: 100%; min-width:0; max-width: 580px; min-height: 280px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .video-feature { padding: 1rem; border-radius: 23px; }
  .video-feature-grid { gap: 1.2rem; padding-top: 1.2rem; }
  .video-feature h1, .video-feature h2 { font-size: clamp(2.35rem, 10vw, 3.3rem); line-height: 1.04; }
  .video-feature-art { min-height: 235px; border-radius: 19px; }
  .video-art-meta, .video-art-caption { font-size: .75rem; }
  .video-feature-actions { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .video-play { right: 14px; bottom: 42px; }
}

/* FORMRAUM v81: continuous black canvas and legible dark surfaces */
:root {
  --bg: #080a0d;
  --paper: #080a0d;
  --ink: #f4f7fb;
  --text: #f4f7fb;
  --muted: #aab4c0;
  --quiet: #8e98a5;
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .24);
  --panel: #111720;
  --lime: #c8f57c;
}
html, body, main, footer { background-color: #080a0d !important; color: #f4f7fb !important; }
main > section, main > .section, main .projects, main .process, main .why,
main .pricing, main .graphics, main .contact, main .price-overview,
main .home-process, main .category-page, main .web-packages, main .contact-section {
  background-color: #080a0d !important;
  color: #f4f7fb !important;
}
.header, .header nav { background: rgba(8, 10, 13, .94) !important; }
.ticker { background: #111720 !important; color: #f4f7fb !important; }
.price-overview .price-group, .price-overview .category-card,
.price-overview .price-note, .price-overview .digital-extras,
.web-packages .package-card, .web-packages .digital-extras,
.package-card, .category-card, .service-grid > *, .benefits > *, .steps > *,
.contact-person, .contact-form, .design-cta {
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 72%) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #f4f7fb !important;
}
.price-overview h2, .price-overview h3, .price-overview p,
.price-overview small, .price-overview strong, .price-overview .muted,
.price-overview .eyebrow, .price-overview li,
.web-packages h2, .web-packages p, .category-page h1, .category-page h2,
.category-page h3, .category-page p, .category-page .muted {
  color: #f4f7fb !important;
}
.price-overview .price-intro p, .price-overview .price-list small,
.price-overview .price-note, .price-overview .muted,
.web-packages .muted, .category-page .category-price-link p {
  color: #aab4c0 !important;
}
.price-overview .serif, .price-overview .price-list a,
.category-page .category-price-link a, .back-to-home { color: #d8ff9c !important; }
.price-overview .price-list a { text-underline-offset: 4px; }
.price-overview .price-group, .price-overview .category-card,
.price-overview .price-note, .web-packages .digital-extras { background-color: #111720 !important; }
.package-card p, .price-note p, .contact p, .service-grid p,
.benefits p, .steps p { color: #b3bdc8 !important; }
.package-card-featured, .package-card.featured { background: #111720 !important; border-color: rgba(200, 245, 124, .5) !important; }
.contact .preview-callout, .preview-callout { background: #111720 !important; color: #d9e0e8 !important; border-color: #c8f57c !important; }
.contact-form input, .contact-form select, .contact-form textarea,
input, select, textarea { background: #0b0f14 !important; color: #f4f7fb !important; border-color: rgba(255, 255, 255, .24) !important; }
input::placeholder, textarea::placeholder { color: #9da8b5 !important; opacity: 1; }
.header nav a, .footer-bottom a, .footer-top a { color: #f4f7fb; }
.mobile-menu-cta { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 14px; border: 1px solid #c8f57c; border-radius: 999px; color: #10140b !important; background: #c8f57c; font-weight: 700; text-decoration: none; }
.back-home-row { padding-top: 16px; }
.back-to-home { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: #111720; color: #d8ff9c !important; font-size: .9rem; text-decoration: none; }
.back-to-home:hover { border-color: #c8f57c; background: #171f2a; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #d8ff9c; outline-offset: 3px; }
/* FORMRAUM v82: dark theme readability and clearer actions */
.home-categories .category-card :is(h2,h3),
.home-categories .category-card p,
.home-categories .category-card .category-number,
.home-process h2,
.home-process h3,
.home-process p,
.home-process .muted,
.home-process .eyebrow,
.home-process .home-steps > :is(article,li) > span,
.home-process .serif {
  color: #f4f7fb !important;
}
.home-categories .category-card p,
.home-process p,
.home-process .muted { color: #b3bdc8 !important; }
.home-process .eyebrow,
.home-process .serif { color: #d8ff9c !important; }
.button,
.button.light {
  border-color: #c8f57c !important;
  background: #c8f57c !important;
  color: #10140b !important;
}
.button:hover,
.button.light:hover {
  border-color: #b4e76a !important;
  background: #b4e76a !important;
  color: #10140b !important;
}
.category-page .category-price-link a.button { color: #10140b !important; }

@media (max-width: 1100px) {

}
.header nav a[aria-current="page"] { color: #d8ff9c !important; font-weight: 700; }
.header nav a[aria-current="page"]::after { width: 100%; background: #c8f57c; }
.webdesign-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.webdesign-actions .button { flex: 0 1 auto; }
.graphics-portfolio-intro { margin-top: 25px; }
#form-status[data-state="error"] { color: #ffaaa3 !important; font-weight: 650; }
#form-status[data-state="error"]::before { content: "! "; }
#form-status[data-state="success"] { color: #b8f28b !important; font-weight: 650; }
#form-status[data-state="success"]::before { content: " "; }
.form-status[data-state="error"] { color: #ffaaa3 !important; font-weight: 650; }
.form-status[data-state="error"]::before { content: "! "; }
.form-status[data-state="success"] { color: #b8f28b !important; font-weight: 650; }
.form-status[data-state="success"]::before { content: " "; }
@media (max-width: 680px) {
  .webdesign-actions { flex-direction: column; }
  .webdesign-actions .button { width: 100%; }
}

/* FORMRAUM v83: keep the full page canvas pure black */
body::before { display: none !important; background: none !important; mask-image: none !important; }
html, body, main, footer,
main > section, main > .section, main .projects, main .process, main .why,
main .pricing, main .graphics, main .contact, main .price-overview,
main .home-process, main .category-page, main .web-packages, main .contact-section {
  background-image: none !important;
}
.contact { background: #080a0d !important; background-image: none !important; }
.webdesign-actions .text-link { align-self: center; }
/* FORMRAUM v83: lightweight motion concept with reduced-motion support */
.video-orbit { transform-origin: center; }
.motion-playing .video-orbit { animation: formraum-orbit-turn 4s linear 1; }
.video-core { transform-origin: center; }
.motion-playing .video-core { animation: formraum-core-float 4s ease-in-out 1; }
@keyframes formraum-orbit-turn { to { transform: rotate(332deg); } }
@keyframes formraum-core-float {
  0%, 100% { transform: translateY(0) rotate(-22deg); }
  50% { transform: translateY(-10px) rotate(-17deg); }
}
.package-card .button { width: 100%; justify-content: center; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .video-orbit, .video-core { animation: none !important; }
}
/* FORMRAUM conversion round 1: consistent black page surfaces, including pricing */
:root { --bg: #050505; --paper: #050505; --panel: #080808; color-scheme: dark; }
html, body, main, footer, .header, .header nav,
main > section, main > .section, main .projects, main .process, main .why,
main .pricing, main .graphics, main .contact, main .price-overview,
main .home-process, main .category-page, main .web-packages, main .contact-section {
  background-color: #050505 !important;
  background-image: none !important;
}
body::before, body::after { display: none !important; background: none !important; }
.price-overview .price-group, .price-overview .price-note,
.price-overview .price-list li, .price-overview .digital-extras,
.web-packages .package-card, .web-packages .digital-extras,
.package-card, .category-card, .service-grid > *, .benefits > *, .steps > *,
.contact-person, .contact-form, .contact .preview-callout, .preview-callout {
  background-color: #080808 !important;
  background-image: none !important;
}
/* FORMRAUM conversion round 2: shorter mobile form and clearer package entry points */
@media (max-width: 560px) {
  #contact-form .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  #contact-form .button[type="submit"] { width: 100%; justify-content: center; }
}
/* FORMRAUM conversion round 4: show a clearly labeled work sample in the hero */
@media (min-width: 951px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
  .home-hero-copy { max-width: none; }
}
.home-concept-card { display: grid; gap: 12px; width: 100%; max-width: 420px; justify-self: end; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #080808; color: #f4f7fb; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.home-concept-card:hover { border-color: #c8f57c; transform: translateY(-3px); }
.home-concept-card:focus-visible { outline: 3px solid #d8ff9c; outline-offset: 4px; }
.home-concept-kicker { padding-inline: 8px; color: #b9c3cf; font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.home-concept-art { display: flex; min-height: 240px; gap:1rem; flex-direction: column; justify-content: space-between; padding: clamp(20px, 3vw, 32px); border-radius: 7px; background: linear-gradient(180deg, rgba(2,5,7,.72), rgba(2,5,7,.48) 42%, rgba(2,5,7,.78)), url('/assets/villa-q4.jpg') center 56% / cover; color: #f6f7f2; }
.home-concept-brand { display: flex; flex-wrap:wrap; overflow-wrap:anywhere; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: .85rem; font-weight: 750; letter-spacing: .08em; }
.home-concept-brand small { max-width: 100%; width:100px; font-size: .68rem; font-weight: 500; letter-spacing: .12em; line-height: 1.5; text-align: right; }
.home-concept-title { overflow-wrap:anywhere; font: clamp(1.7rem, 3vw, 2.5rem)/1.06 Georgia, serif; letter-spacing: -.04em; }
.home-concept-title em { color: #d8ff9c; font-weight: 400; }
.home-concept-foot { font-size: .68rem; font-weight: 650; letter-spacing: .1em; }
.home-concept-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 0 8px 4px; }
.home-concept-caption strong { font-size: .85rem; }
.home-concept-caption strong span { color: #d8ff9c; }
.home-concept-caption small { color: #b9c3cf; font-size: .7rem; }
@media (max-width: 950px) {
  .home-hero { display: block; }
  .home-concept-card { max-width: 620px; justify-self: start; margin: 0 0 30px; }
}
@media (max-width: 560px) {
  .home-concept-art { min-height:180px; }
  .home-concept-caption { align-items: flex-start; flex-direction: column; }
}
.package-scope-note { overflow-wrap:anywhere; max-width: 920px; margin: 0 0 22px; padding-left: 16px; border-left: 2px solid #c8f57c; color: #b9c3cf; font-size: .9rem; line-height: 1.75; }


/* FORMRAUM conversion round 1: explicit hero hierarchy and one dark system across every page */
:root { --bg:#050505; --paper:#050505; --panel:#080808; --text:#f4f7fb; --muted:#b3bdc8; --quiet:#aab4c0; color-scheme:dark; }
html, body, main, footer, dialog,
main > section, main > .section, main .projects, main .process, main .why,
main .pricing, main .graphics, main .contact, main .price-overview,
main .home-process, main .category-page, main .web-packages,
main .contact-section, main .legal, .section-shell {
  background-color:#050505 !important;
  background-image:none !important;
  color:#f4f7fb;
}
body::before, body::after { display:none !important; background:none !important; }
main .price-group, main .category-card, main .price-note,
main .package-card, main .digital-extras, main .proof-card, main .info-card,
main .contact-person, main .contact-form, main .contact .preview-callout,
main .preview-callout, main .notice, main .contact-meta span,
#dialog-preview {
  background-color:#080808 !important;
  background-image:none !important;
  color:#f4f7fb !important;
  border-color:rgba(255,255,255,.16) !important;
}
.category-card a:focus-visible, .price-overview a:focus-visible,
:where(a,button,input,select,textarea,summary):focus-visible {
  outline:3px solid #d8ff9c !important;
  outline-offset:3px;
}
.price-actions { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.price-actions a { min-height:40px; padding:8px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; text-decoration:none; }
.price-actions a:last-child { border-color:rgba(200,245,124,.55); color:#d8ff9c; }
.price-actions a:hover { border-color:#d8ff9c; }
#leistungen .category-actions { display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:auto; padding-top:22px; }
#leistungen .category-inquiry { display:inline-flex; width:fit-content; min-width:0; max-width:100%; overflow-wrap:anywhere; min-height:44px; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(200,245,124,.62); border-radius:999px; color:#d8ff9c; font-size:.9rem; font-weight:700; text-decoration:none; }
.category-inquiry:hover { border-color:#d8ff9c; background:rgba(200,245,124,.08); }
#leistungen .category-sample-link { display:inline-flex; width:fit-content; min-width:0; max-width:100%; overflow-wrap:anywhere; min-height:40px; align-items:center; gap:8px; color:#c6cfda; font-size:.88rem; text-decoration:underline; text-decoration-color:rgba(200,245,124,.5); text-underline-offset:4px; }
#start .home-hero-copy h1 { overflow-wrap:anywhere; hyphens:auto; }
@media (min-width:951px) {
  .home-hero { display:grid !important; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); grid-template-rows:auto 1fr; grid-template-areas:"eyebrow eyebrow" "copy concept"; gap:clamp(22px,4vw,54px); align-items:center; }
  .home-hero > .eyebrow { grid-area:eyebrow; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; width:100%; align-self:end; }
  .home-hero > .home-hero-copy { grid-area:copy; max-width:none; align-self:center; padding-block:clamp(18px,3vw,38px); }
  .home-hero-copy h1 { overflow-wrap:anywhere; hyphens:auto; max-width:740px; font-size:clamp(3.2rem,6.5vw,6.4rem); }
  .home-hero-copy .hero-text { max-width:650px; }
  .home-hero > .home-concept-card { grid-area:concept; width:100%; max-width:500px; justify-self:end; align-self:center; }
}
@media (max-width:950px) {
  .home-hero { display:block !important; }
  .home-hero > .eyebrow { display:flex; flex-wrap:wrap; gap:8px 16px; }
  .home-hero > .home-hero-copy { padding-block:clamp(24px,5vw,46px); }
  .home-concept-card { margin:0 0 30px; }
}
@media (max-width:560px) {
  .section-top { display:grid; grid-template-columns:1fr; gap:.45rem; }
  .eyebrow, .home-concept-kicker { font-size:.72rem; letter-spacing:.11em; }
  .home-concept-caption small { font-size:.76rem; }
  .price-actions { justify-content:flex-start; }
  .price-actions a { min-height:44px; }
  .category-actions { gap:8px; }
  .category-inquiry { min-height:46px; }
}

/* FORMRAUM conversion round 2: shorter enquiry path and clear early web design proof */
.optional-form-details { margin:1.15rem 0; padding:12px 0; border-block:1px solid rgba(255,255,255,.16); }
.optional-form-details > summary { display:flex; min-height:48px; align-items:center; gap:12px; cursor:pointer; color:#f4f7fb; font-weight:650; list-style:none; }
.optional-form-details > summary::-webkit-details-marker { display:none; }
.optional-form-details > summary::after { content:"＋"; margin-left:auto; color:#d8ff9c; font-size:1.2rem; }
.optional-form-details[open] > summary::after { content:"−"; }
.optional-form-details > .form-row:first-of-type { margin-top:14px; }
.form-type-row { max-width:560px; margin-top:14px; }
.webdesign-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.8fr); gap:clamp(28px,5vw,68px); align-items:center; }
.webdesign-hero-copy { min-width:0; }
.webdesign-sample-card { min-width:0; overflow-wrap:anywhere; display:grid; gap:12px; width:100%; max-width:470px; justify-self:end; padding:14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#080808; color:#f4f7fb; text-decoration:none; transition:border-color .2s ease,transform .2s ease; }
.webdesign-sample-card:hover { border-color:#d8ff9c; transform:translateY(-2px); }
.webdesign-sample-card:focus-visible { outline:3px solid #d8ff9c; outline-offset:4px; }
.webdesign-sample-kicker { padding-inline:6px; color:#b9c3cf; font-size:.72rem; font-weight:700; letter-spacing:.12em; }
.webdesign-sample-visual { min-width:0; overflow-wrap:anywhere; display:flex; min-height:280px; gap:1rem; flex-direction:column; justify-content:space-between; padding:clamp(20px,3vw,30px); border-radius:8px; background:linear-gradient(180deg,rgba(2,5,7,.66),rgba(2,5,7,.42) 45%,rgba(2,5,7,.78)),url('/assets/villa-q4.jpg') center 56% / cover; color:#f6f7f2; }
.webdesign-sample-brand { display:flex; flex-wrap:wrap; min-width:0; justify-content:space-between; gap:12px; font-size:.82rem; font-weight:750; letter-spacing:.08em; }
.webdesign-sample-brand small { min-width:0; max-width:100%; font-size:.68rem; font-weight:500; letter-spacing:.12em; line-height:1.45; text-align:right; }
.webdesign-sample-title { min-width:0; max-width:100%; overflow-wrap:anywhere; font:clamp(1.6rem,3vw,2.35rem)/1.08 Georgia,serif; letter-spacing:-.04em; }
.webdesign-sample-title em { color:#d8ff9c; font-weight:400; }
.webdesign-sample-foot { font-size:.68rem; font-weight:650; letter-spacing:.1em; }
.webdesign-sample-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 6px 2px; }
.webdesign-sample-caption strong { font-size:.9rem; }
.webdesign-sample-caption > span { color:#d8ff9c; }
@media (max-width:950px) { .webdesign-hero { grid-template-columns:minmax(0,1fr); } .webdesign-sample-card { justify-self:start; max-width:620px; } }
@media (max-width:560px) { .webdesign-sample-visual { min-height:180px; } .optional-form-details > summary { min-height:50px; } }
/* Desktop webdesign hero scale: keep the complete headline readable beside the sample. */
@media (min-width:951px) {
  .webdesign-hero .intro h1 { font-size:clamp(3rem,4.1vw,4.6rem); line-height:1.06; }
}
/* Keep the category headline and copy in one readable desktop column. */
@media (min-width:951px) {
  .webdesign-hero-copy .intro { display:block; }
  .webdesign-hero-copy .intro h1 { max-width:680px; }
}

/* FORMRAUM conversion round 3: readable motion labels and form clarity */
.form-required-legend { margin:0 0 .8rem; color:#b9c3cf; font-size:.85rem; line-height:1.5; }
@media (max-width:560px) {
  .video-art-meta, .video-art-caption { flex-wrap:wrap; gap:6px 10px; font-size:.75rem !important; letter-spacing:.08em; line-height:1.4; }
  .video-art-meta { align-items:flex-start; }
  .video-art-caption { align-items:flex-start; flex-direction:column; }
}

/* FORMRAUM conversion round 4: fix hero typography and make the concept process tangible. */
.video-feature { background:#050505; }
.video-feature h1, .video-feature h2 { margin:0 0 1rem; font-size:clamp(2.6rem,5.7vw,5.25rem); font-weight:620; line-height:.98; letter-spacing:-.065em; }
.video-art-meta, .video-art-caption { flex-wrap:wrap; gap:8px 14px; font-size:.75rem; letter-spacing:.08em; line-height:1.4; }
.video-art-meta { align-items:flex-start; }
.video-art-caption { align-items:flex-start; flex-direction:column; }
.storyboard-preview { margin-top:0; padding-block:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--line); }
.storyboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.storyboard-grid article { min-height:190px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#080808; }
.storyboard-grid article > span { color:var(--lime); font-size:.7rem; font-weight:750; letter-spacing:.1em; }
.storyboard-grid h3 { margin:2rem 0 .5rem; font-size:1.25rem; letter-spacing:-.025em; }
.storyboard-grid p { max-width:34ch; margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
@media (max-width:760px) { .storyboard-grid { grid-template-columns:1fr; } .storyboard-grid article { min-height:0; } .storyboard-grid h3 { margin:1rem 0 .45rem; } }
@media (max-width:560px) {
  .video-feature h1, .video-feature h2 { font-size:clamp(2.35rem,10vw,3.3rem); line-height:1.04; }
  .video-art-meta, .video-art-caption { font-size:.75rem; }
}

/* FORMRAUM conversion round 5: visual concept frames and explicit identity deliverables. */
.storyboard-frame { position:relative; display:flex; min-height:132px; flex-direction:column; justify-content:space-between; overflow:hidden; margin-bottom:1rem; padding:14px; border:1px solid var(--line); border-radius:12px; background:#050505; }
.storyboard-frame > span:first-child { color:var(--quiet); font-size:.62rem; font-weight:700; letter-spacing:.12em; }
.storyboard-frame strong { position:relative; z-index:1; font-size:.9rem; font-weight:650; }
.storyboard-frame-mark { position:absolute; z-index:0; }
.storyboard-frame-opening .storyboard-frame-mark { top:44px; right:16px; width:48%; height:34px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); transform:skewY(-12deg); }
.storyboard-frame-opening .storyboard-frame-mark::before { position:absolute; top:12px; left:0; width:72%; border-top:4px solid var(--lime); content:""; }
.storyboard-frame-solution .storyboard-frame-mark { top:39px; right:28px; width:52px; height:52px; border:1px solid var(--lime); border-radius:50%; box-shadow:0 0 0 12px rgba(200,245,124,.07); }
.storyboard-frame-action .storyboard-frame-mark { top:46px; right:16px; width:112px; height:34px; border:1px solid rgba(200,245,124,.65); border-radius:999px; background:rgba(200,245,124,.08); }

/* FORMRAUM conversion review v85 — black canvas, compact actions and balanced pricing */
:root {
  --bg: #000;
  --bg-soft: #050505;
  --paper: #000;
  --panel: #0a0a0a;
  --panel-2: #141414;
  --space: clamp(4.5rem, 7vw, 7rem);
  color-scheme: dark;
}
html, body, main, footer,
main > section, main > .section, .section-shell, .contact-section,
.home-process, .price-overview, .contact, .category-page {
  background-color: #000 !important;
  background-image: none !important;
}
.header, .header nav, .topbar, .main-nav {
  background-color: rgba(0, 0, 0, .96) !important;
}
.proof-card, .info-card, .contact-meta span, .contact-form,
.price-overview .price-group, .price-overview .price-note,
.web-packages .package-card, .web-packages .digital-extras,
.package-card, .category-card, .price-group, .contact-person,
.contact .preview-callout, .preview-callout {
  background-color: #0a0a0a !important;
  background-image: none !important;
  color: var(--text) !important;
}
.contact-form input, .contact-form select, .contact-form textarea,
input, select, textarea {
  background-color: #111 !important;
  color: var(--text) !important;
}
.price-groups > .price-group { align-self: start; container-type:inline-size; }

@media (max-width: 1100px) {

  .header { gap:8px; flex-wrap:wrap; height:auto; }
  .header .logo { flex:1 1 auto; min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .header .menu { flex:0 1 auto; max-width:100%; }
  .header nav { top:calc(100% + 1px); max-height:calc(100dvh - var(--header-height,76px) - 24px); }
  .header nav a { white-space:normal; overflow-wrap:anywhere; }
  .topbar .main-nav { top:calc(100% + 1px); max-height:calc(100dvh - var(--header-height,76px) - 24px); }
  .topbar .main-nav a { white-space:normal; overflow-wrap:anywhere; }
  .topbar-inner { gap: 8px; flex-wrap:wrap; padding-block:10px; }

}
@media (max-width: 680px) {
  :root { --space: 3.5rem; }
  .header .logo { font-size: 1.1rem; }
  .topbar .brand-word { font-size: 1.1rem; }
  .header .menu, .topbar .menu-button { gap: 8px; padding-inline: 9px; }
  .topbar .header-cta { font-size: .72rem; padding-inline: 9px; }
}
@media (max-width: 380px) {
  .header .logo, .topbar .brand-word { font-size: 1rem; }



}
.device-switch button.active {
  border-color: var(--lime) !important;
  background-color: var(--lime) !important;
  color: #000 !important;
}
.dialog-close:hover, .dialog-close:focus-visible {
  border-color: var(--lime) !important;
  background-color: #141414 !important;
  color: var(--text) !important;
}

/* FORMRAUM analyst round 1 — restore the mobile enquiry path and unify legacy branding */
@media (max-width: 1100px) {


}
.topbar .brand-sub, .site-footer .brand-sub {
  margin-left: 0;
  writing-mode: horizontal-tb;
  transform: none;
}

/* FORMRAUM analyst round 2 — keep pricing and primary actions easy to scan */
@media (max-width: 760px) {
  .price-list li { align-items: start; }
}
@media (min-width: 1101px) {

}

/* FORMRAUM analyst round 3 — surface the free preview and keep its scope clear */
.service-preview-note {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.service-preview-note a { color: #d8ff9c; text-underline-offset: 3px; }

/* FORMRAUM analyst round 4 — make variable project pricing visible in the package card */
.graphics-detail .package-card .price-hint {
  display: inline-block;
  margin: 0 0 14px;
  color: #d8ff9c;
  font-size: .875rem;
  font-weight: 700;
}

/* FORMRAUM analyst round 5 — let visitors request only the free preview */
#contact-form .preview-request-label, #ki-check-form .preview-request-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
}
#contact-form .preview-request-label input[type="checkbox"], #ki-check-form .preview-request-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #111;
  accent-color: #d8ff9c;
}
#contact-form .preview-request-label small, #ki-check-form .preview-request-label small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 400;
}

/* FORMRAUM conversion round 2: make price choices easier to scan and avoid duplicate mobile actions. */
.price-overview .price-list li {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
}
.price-overview .price-list li > div { grid-column: 1 / -1; }
.price-overview .price-list li > strong { grid-column: 1; grid-row: 2; align-self: center; white-space: normal; }
.price-overview .price-list li > .price-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; }
.price-overview .price-list li > a { grid-column: 2; grid-row: 2; justify-self: end; }
@media (max-width: 1100px) {


}
@media (max-width: 560px) {
  .price-overview .price-list li { grid-template-columns: minmax(0, 1fr); }
  .price-overview .price-list li > div,
  .price-overview .price-list li > strong,
  .price-overview .price-list li > .price-actions,
  .price-overview .price-list li > a { grid-column: 1; grid-row: auto; justify-self: start; }
  .price-overview .price-list li > .price-actions { justify-content: flex-start; }
}

@container (max-width:24em) {
  .price-overview .price-list li { grid-template-columns:minmax(0,1fr); }
  .price-overview .price-list li > strong,
  .price-overview .price-list li > .price-actions,
  .price-overview .price-list li > a { grid-column:1; grid-row:auto; justify-self:start; }
  .price-overview .price-list li > .price-actions { justify-content:flex-start; }
}

/* FORMRAUM conversion round 5: transparent illustrative sample for the AI output check. */
.sample-report {
  margin-top: 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: #080808;
  color: #f4f7fb;
}
.sample-report-meta { display:flex; justify-content:space-between; gap:14px; color:#aab4c0; font-size:.7rem; font-weight:700; letter-spacing:.1em; }
.sample-report-output, .sample-verdict { margin-top:18px; padding:16px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:#000; }
.sample-report-output > h3 { margin:0; color:#d8ff9c; font-size:1rem; font-weight:700; line-height:1.65; letter-spacing:normal; }
.sample-report-context > h3 { display:inline; margin:0; color:inherit; font-size:inherit; font-weight:700; line-height:inherit; letter-spacing:normal; }
.sample-report-context > p { display:inline; margin:0; font-size:inherit; line-height:inherit; color:inherit; }
.sample-verdict > h3 { color:#d8ff9c; font-size:1rem; font-weight:700; letter-spacing:normal; line-height:1.5; margin:0; }
.sample-report-output p, .sample-verdict p { margin:8px 0 0; color:#d9e0e8; line-height:1.6; }
.sample-criteria { list-style:none; margin:16px 0 0; padding:0; }

.sample-criteria li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center; padding:13px 0; border-top:1px solid rgba(255,255,255,.14); }
.sample-criteria li > h3 { color:#f4f7fb; font-size:1rem; font-weight:700; letter-spacing:normal; line-height:1.5; margin:0; }
.sample-criteria li > p { grid-column:1 / -1; margin:0; color:#aab4c0; font-size:.88rem; line-height:1.55; }
.sample-status { display:inline-flex; align-items:center; padding:4px 8px; border:1px solid rgba(232,207,130,.45); border-radius:999px; color:#e8cf82; font-size:.68rem; font-weight:750; letter-spacing:.05em; white-space:nowrap; }
.sample-status-pass { border-color:rgba(200,245,124,.48); color:#d8ff9c; }
.sample-disclaimer { margin:16px 0 0; color:#8f9aa7; font-size:.78rem; line-height:1.5; }
@media (max-width:560px) {
  .sample-report-meta { flex-wrap:wrap; }
  .sample-criteria li { grid-template-columns:minmax(0,1fr); }
  .sample-criteria li > p { grid-column:1; }
}


/* Conversion round 1: concise preview terms, visible email route, clearer pricing and links. */
.preview-callout { max-width:800px; line-height:1.65; }
.preview-callout > p { margin:.55rem 0 0; }
.preview-details { margin-top:.65rem; padding-top:.65rem; border-top:1px solid rgba(255,255,255,.14); }
.preview-details summary { color:#d8ff9c; cursor:pointer; font-weight:650; }
.preview-details p { margin:.65rem 0 0; color:#aab4c0; }
.form-email-alternative { margin:.25rem 0; color:#c7ced7; }
.form-email-alternative a { color:#d8ff9c; font-weight:700; text-underline-offset:3px; }
.price-list > li > strong { color:#d8ff9c; font-size:clamp(1.05rem,1.35vw,1.3rem); letter-spacing:-.02em; }
.price-overview .price-list li > strong { color:#d8ff9c !important; font-size:clamp(1.05rem,1.35vw,1.3rem) !important; }
.price-actions a { text-decoration:underline; text-underline-offset:3px; }
.price-actions a[aria-label] { min-width:92px; text-align:center; }
.package-scope-note { max-width:960px; }
#form-status[data-state="error"] { color:#ffb4b4; }


/* FORMRAUM conversion: visible field boundaries and readable recovery states. */
main form input:not([type="checkbox"]):not([type="radio"]), main form select, main form textarea { border-color:#6b6b6b !important; }
#contact-email-status { display:inline-flex; margin-top:.4rem; text-decoration:none; }
.form-submit { flex-wrap:wrap; }
.form-submit .form-status { flex:1 1 100%; }

/* Round 1: surface the low-commitment mini-preview from the first screen. */
.home-preview-note { max-width:560px; margin:1.1rem 0 0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.home-preview-note a { color:var(--lime); font-weight:650; text-underline-offset:3px; }
@media (max-width:680px) { .home-preview-note { max-width:38ch; font-size:.875rem; } }
/* Round 4: keep legacy detail headers aligned and avoid duplicate desktop enquiry actions. */
.topbar-inner { min-height:72px; }
.topbar .brand-word { font-size:.86rem; font-weight:780; letter-spacing:.095em; line-height:1.05; }
.topbar .brand-sub { margin-top:4px; font-size:.55rem; font-weight:650; letter-spacing:.28em; line-height:1.05; }
@media (min-width:951px) { .topbar .main-nav > .nav-cta { display:none; } }

/* FORMRAUM round 1: preserve the black canvas across sections and routes. */
:root { color-scheme: dark; background-color: #000 !important; }
html, body, main, main > section, footer, .header, .back-home-row, .legal {
  background-color: #000 !important;
  background-image: none !important;
}
body::before, body::after { background: none !important; }
.price-group, .price-list li, .price-card, .package-card, .category-card,
.contact-person, .contact-form, .preview-callout, .info-card, .proof-card,
.notice, .digital-extras, .sample-report {
  background-color: #080808 !important;
  background-image: none !important;
}
.header nav a[aria-current="location"] { color: #d8ff9c !important; font-weight: 700; }
.header nav a[aria-current="location"]::after { width: 100%; background: #c8f57c; }
.home-concept-caption small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid #383838;
  border-radius: 999px;
  background: #080808;
  color: #f4f7fb !important;
  font-size: .76rem;
  font-weight: 600;
}


/* Round 2: scan-friendly package scopes and clear offer boundaries. */
.web-packages .package-card .package-intro { margin-bottom: 14px; }
.package-detail-group { width: 100%; margin: 10px 0 2px; }
h3.package-detail-label { display: block; margin:0; line-height:1.6; color: #d8ff9c; font-size: .72rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.package-detail-group ul { margin: 7px 0 0; padding-left: 19px; color: #d9e0e8; font-size: .91rem; line-height: 1.55; }
.package-detail-group li + li { margin-top: 4px; }
.package-detail-group p { margin: 7px 0 0; color: #c5ced8; font-size: .9rem; line-height: 1.6; }
.package-example { margin: 13px 0 0; padding: 12px 14px; border-left: 2px solid #c8f57c; border-radius: 0 8px 8px 0; background: #050505; color: #c5ced8; font-size: .86rem; line-height: 1.6; }
.package-example strong { display: inline; margin: 0; color: #f4f7fb; font-size: inherit; font-weight: 700; letter-spacing: 0; }
.proof-card .proof-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); color: #c5ced8; font-size: .82rem; line-height: 1.55; }


/* Round 4: balanced package comparison and English landing page. */
@media (min-width: 681px) { .web-packages .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .web-packages .package-grid { grid-template-columns: 1fr; } }
.en-hero { padding-top: clamp(46px, 8vw, 92px); }
.en-hero h1 { max-width: 820px; font-size: clamp(2.9rem, 7.6vw, 6.3rem); line-height: .99; letter-spacing: -.055em; }
.en-hero .lead { max-width: 720px; color: #c5ced8; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.7; }
.en-language-note { max-width: 720px; margin-top: 20px; color: #aab4c0; font-size: .92rem; line-height: 1.65; }
.en-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.en-price { display: block; margin: 12px 0; color: #d8ff9c; font-size: 1.3rem; font-weight: 760; letter-spacing: -.025em; }
.en-contact-box { overflow-wrap:anywhere; min-width:0; padding: clamp(22px, 4vw, 40px); border: 1px solid #292929; border-radius: 12px; background: #080808; }
.en-hero h1 { overflow-wrap:anywhere; hyphens:auto; }
.en-contact-box p { color: #c5ced8; line-height: 1.65; }
.language-link { white-space: nowrap; }
.fallback-copy { display: block; margin-top: 12px; padding: 2px 0; border: 0; background: transparent; color: #d8ff9c; font: inherit; font-size: .92rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fallback-copy:focus-visible { outline: 2px solid #d8ff9c; outline-offset: 4px; }
@media (max-width: 680px) { .en-pricing-grid { grid-template-columns: 1fr; } }

/* Round 5: visible concept evidence and clear English privacy information. */
.en-concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:26px; }
.en-concept-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid #292929; border-radius:14px; background:#080808; color:#f4f7fb; text-decoration:none; transition:border-color .2s ease,transform .2s ease; }
.en-concept-card:hover { border-color:#c8f57c; transform:translateY(-2px); }
.en-concept-card:focus-visible { outline:3px solid #d8ff9c; outline-offset:4px; }
.en-concept-card > img { display:block; width:100%; aspect-ratio:1.42; object-fit:cover; background:#050505; }
.en-concept-copy { display:grid; gap:9px; padding:18px; }
.en-concept-kicker { color:#c8f57c; font-size:.68rem; font-weight:750; letter-spacing:.11em; line-height:1.5; }
.en-concept-copy strong { color:#f4f7fb; font-size:1.08rem; line-height:1.25; }
.en-concept-copy > span:not(.en-concept-kicker):not(.en-concept-link) { color:#bdc6d0; font-size:.9rem; line-height:1.55; }
.en-concept-link { color:#d8ff9c; font-size:.88rem; font-weight:700; line-height:1.5; text-decoration:underline; text-underline-offset:3px; }
.en-concepts > .fine { margin-top:16px; color:#aab4c0; line-height:1.6; }
.en-legal-grid { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); gap:14px; margin-top:24px; }
.en-legal-card { min-width:0; overflow-wrap:anywhere; padding:clamp(20px,3vw,30px); border:1px solid #292929; border-radius:14px; background:#080808; }
.en-legal-card h2 { margin:12px 0 14px; color:#f4f7fb; font-size:clamp(1.35rem,2.5vw,1.9rem); letter-spacing:-.035em; }
.en-legal-card p { margin:10px 0; color:#c5ced8; font-size:.92rem; line-height:1.65; }
.en-legal-card a { color:#d8ff9c; }
.en-legal > .fine { margin-top:14px; color:#aab4c0; line-height:1.6; }
@media (max-width:900px) { .en-concept-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .en-concept-grid,.en-legal-grid { grid-template-columns:1fr; } }
/* 2026-10-05: keep every page canvas and surface true black. */
:root { --bg:#000; --paper:#000; --panel:#000; color-scheme:dark; background:#000 !important; }
html, body, body > *, header, footer, main, main > section, main section, .wrap, .section, .hero, .header, .topbar, .topbar-inner, .subpage-hero, .subpage-section, .site-footer, .price-overview, .contact, .home-process, .graphics, .process, .pricing, .legal, .en-hero, .en-concepts, .en-legal, .back-home-row {
  background-color:#000 !important; background-image:none !important;
}
body::before, body::after { background:none !important; }
.category-card, .price-group, .price-list li, .price-card, .package-card, .contact-person, .contact-form, .preview-callout, .info-card, .proof-card, .notice, .digital-extras, .sample-report, .en-contact-box, .en-legal-card, .en-concept-card, .home-concept-card, .webdesign-sample-card, .video-sample, .storyboard-grid article, .storyboard-frame {
  background-color:#000 !important; background-image:none !important;
}
.en-contact-form { display:grid; gap:16px; margin-top:22px; padding:clamp(20px,3vw,30px); border:1px solid #333; border-radius:12px; }
.en-contact-form label { display:grid; gap:7px; margin-bottom:0; color:#c5ced8; }
.en-contact-form .form-row { gap:16px; }
.en-contact-form input:not([type="checkbox"]), .en-contact-form select, .en-contact-form textarea { width:100%; min-width:0; padding:12px 13px; border:1px solid #666; border-radius:8px; background:#000 !important; color:#f4f7fb; font:inherit; }
.en-contact-form input::placeholder, .en-contact-form textarea::placeholder { color:#929ca8; }
.en-contact-form .preview-request-label { display:flex; align-items:flex-start; gap:12px; padding:15px; border:1px solid #333; border-radius:10px; background:#000; }
.en-contact-form .preview-request-label input { flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:#c8f57c; }
.en-contact-form .preview-request-label small { display:block; margin-top:6px; color:#aab4c0; line-height:1.55; }
.video-sample { max-width:980px; margin:28px auto 46px; padding:14px; border:1px solid #292929; border-radius:14px; }
.video-sample video { display:block; width:100%; height:auto; border-radius:8px; background:#000; }
.video-sample figcaption { margin:13px 3px 2px; color:#b9c3cf; font-size:.88rem; line-height:1.65; }
.video-sample figcaption strong { display:block; margin-bottom:4px; color:#f4f7fb; font-size:.78rem; letter-spacing:.07em; }
@media (max-width:430px) {




  .home-hero > .eyebrow { align-items:flex-start; flex-direction:column; justify-content:flex-start; gap:6px; }
  .home-hero > .eyebrow > span:last-child { max-width:100%; text-align:left; overflow-wrap:anywhere; }
  .en-contact-form .form-row { grid-template-columns:1fr; gap:12px; }
}
/* Keep native form options and nested callouts on the same black canvas. */
.en-contact-form select option, .en-contact-form select optgroup { background:#000; color:#f4f7fb; }
.en-contact-form .form-required-legend, .en-contact-form .form-helper, .en-contact-form .fine { color:#aab4c0; }
.en-contact-form .form-email-alternative a, .en-contact-form .fine a { color:#d8ff9c; }
.en-contact-form #form-status[data-state="success"] { color:#c8f57c; }
.en-contact-form #form-status[data-state="error"] { color:#ffb4b4; }

/* Round 2: language continuity, readable concept notes and an accessible transcript. */
.en-concept-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.en-concept-detail { min-width:0; scroll-margin-top:100px; padding:18px 0 0; border-top:1px solid #373737; background:#000 !important; }
.en-concept-detail h3 { margin:10px 0 8px; color:#f4f7fb; font-size:1.2rem; }
.en-concept-detail p { color:#b9c3cf; line-height:1.65; }
.en-concept-detail .text-link { display:inline-flex; color:#d8ff9c; }
.concept-transcript { max-width:980px; margin:0 auto 28px; padding:16px 18px; border:1px solid #343434; border-radius:10px; background:#000 !important; color:#dce3eb; }
.concept-transcript summary { cursor:pointer; color:#d8ff9c; font-weight:600; }
.concept-transcript summary:focus-visible { outline:2px solid #c8f57c; outline-offset:4px; }
.concept-transcript .transcript-copy { max-width:72ch; padding-top:12px; line-height:1.7; color:#b9c3cf; }
@media (max-width:760px) { .en-concept-details { grid-template-columns:1fr; gap:22px; } }

/* Round 3: pure-black page surfaces, including the more specific price panels. */
:root { --panel:#000; --panel-2:#000; --bg-soft:#000; }
.price-overview .price-group, .price-overview .price-note, .contact .preview-callout,
.web-packages .package-card, .web-packages .price-note, .concept-video-card,
.concept-disclosure, .concept-video-player, .project-visual {
  background-color:#000 !important;
  background-image:none !important;
}

/* Cover the remaining high-specificity dark surfaces without changing CTA accents. */
.ticker, .price-overview .category-card, .price-overview .digital-extras,
.web-packages .digital-extras, .package-card-featured, .package-card.featured,
.design-cta {
  background:#000 !important;
  background-image:none !important;
}


/* Round 4: last-layer black surfaces and keyboard/mobile conversion fixes. */
main .pricing, main .graphics, main .contact, main .price-overview, main .home-process, main .category-page, main .web-packages, main .contact-section, main .legal, main .section-shell, main .price-group, main .price-note, main .price-overview .price-list li, main .price-overview .category-card, main .price-overview .digital-extras, main .contact-person, main .contact-form, main .contact .preview-callout, main .preview-callout, main .package-card, main .digital-extras, main .proof-card, main .info-card, main .notice, main .contact-meta span, main .en-contact-box, main .en-legal-card, main .en-concept-card, main .home-concept-card, main .webdesign-sample-card, main .video-sample, main .concept-video-card, main .concept-disclosure, main .concept-video-player, main .storyboard-grid article, main .en-concept-detail, #dialog-preview { background-color:#000 !important; background-image:none !important; }
.en-concept-detail:focus { outline:2px solid #d8ff9c; outline-offset:6px; }
.concept-scope-note { max-width:900px; margin:0 0 24px; padding:14px 16px; border-left:2px solid #c8f57c; color:#bdc6d0; line-height:1.65; }
@media (max-width:760px) { .concept-video-card-vertical { order:-1; } }


/* Round 5: make remaining interface surfaces black while preserving concept artwork. */
.header nav, .back-home-row .back-to-home, main .service-grid > *, main .benefits > *, main .steps > *, main .package-example, main .contact-form input:not([type="checkbox"]), main .contact-form select, main .contact-form textarea, main .contact-form select option, main .contact-form select optgroup { background-color:#000 !important; background-image:none !important; }

/* Round 1 follow-up: keep the canvas black while making form focus and scope clear. */
.skip:focus {
  background:#000 !important;
  color:#d8ff9c !important;
  outline:2px solid #d8ff9c !important;
  outline-offset:3px;
}
#preise { padding-bottom:clamp(28px,3vw,44px); }
#preise + #kontakt { padding-top:clamp(32px,4vw,56px); }
main .contact-form input:not([type="checkbox"]),
main .contact-form select,
main .contact-form textarea {
  border:1px solid #666 !important;
  border-radius:8px;
  background:#000 !important;
  color:#f4f7fb !important;
}
main .contact-form input::placeholder,
main .contact-form textarea::placeholder { color:#aab4c0 !important; }
main .contact-form :is(input,select,textarea):focus-visible {
  outline:3px solid #d8ff9c !important;
  outline-offset:2px;
  border-color:#d8ff9c !important;
}
main .contact-form select option,
main .contact-form select optgroup { background:#000 !important; color:#f4f7fb !important; }
/* Give the native player controls a slim black rail below baked-in captions. */
#eigenkonzept .concept-video-player { object-fit:contain; }
#eigenkonzept .concept-video-card:not(.concept-video-card-vertical) .concept-video-player { aspect-ratio:16 / 10; }
#eigenkonzept .concept-video-card-vertical .concept-video-player { aspect-ratio:9 / 17.5; }


/* R3: correct light-mockup contrast. */
.architecture-project .mini-head { color:#17291d; }
.architecture-project .mini-head span { color:#435246; }


/* FORMRAUM mobile overflow fix round 4 */
@media (max-width: 1100px) {



}


/* FORMRAUM English privacy mobile navigation round 5 */
@media (max-width: 1100px) {
  body#en-privacy-page .header { height: auto !important; min-height: 72px; flex-wrap: wrap; gap: 8px 14px; padding-block: 12px; }
  body#en-privacy-page .header nav { display: flex !important; position: static; width: 100%; flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0; max-height: none; overflow: visible; border: 0; background: transparent !important; box-shadow: none; font-size: .85rem; }
  body#en-privacy-page .header nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 4px; white-space: normal; overflow-wrap: anywhere; }
}

/* 2026-10-05, review round 1: keep every page canvas black and remove the visible form trap. */
:root, html, body { color-scheme: dark; background-color: #000 !important; }
body { background-image: none !important; }
body::before, body::after { background: none !important; }
body > header, body > main, body > footer, main > section, main > div {
  background-color: #000 !important;
  background-image: none !important;
}
main section, main .price-overview, main .price-group, main .price-note, main .contact,
main .contact-form, main .contact-person, main .preview-callout, footer {
  background-color: #000 !important;
  background-image: none !important;
}
.form-trap, .form-trap label, .form-trap input, .honey, .honey input { display: none !important; }
.video-transcript{max-width:980px;margin:-24px auto 44px;color:var(--muted);line-height:1.7}.video-transcript summary{display:flex;align-items:center;gap:12px;list-style:none;min-height:44px;cursor:pointer;color:var(--lime);font-weight:650}.video-transcript summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.video-transcript summary::-webkit-details-marker{display:none}.video-transcript summary::after{content:"＋";margin-left:auto;color:var(--lime);font-size:1.25rem}.video-transcript[open] summary::after{content:"−"}.video-transcript ol{padding-left:1.5rem}.video-transcript li{padding:.5rem 0}.video-transcript strong{color:#f4f7fb}.video-cta-actions{display:flex;min-width:240px;flex-direction:column;align-items:flex-start;gap:12px}.video-cta-actions .button{white-space:normal;text-align:center}
/* FORMRAUM v105: narrow mobile CTA breathing room */
@media (max-width: 340px) {
  .en-hero { padding-top: 24px; }
  .explainer-video-page .subpage-hero { padding-top: 20px; }
}

/* Local enquiry recovery: keep the original attempt separate from editable fields. */
.attempt-snapshot{margin-block:1rem;padding:1rem;border:1px solid #404040;border-radius:12px;min-width:0}
.attempt-snapshot summary{cursor:pointer;font-weight:700}
.attempt-snapshot pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit;margin-bottom:0}
.fallback-copy{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.package-choice{margin-block:2rem;padding:clamp(1rem,3vw,2rem);border:1px solid #404040;border-radius:16px}
.package-choice h2{font-size:clamp(1.5rem,3vw,2rem)}
.package-choice li{margin-block:.5rem;overflow-wrap:anywhere;hyphens:auto}
.package-choice a{text-decoration:underline;text-underline-offset:3px}

/* Responsive navigation: one visibility policy, real labels for speech control. */
.header-cta .cta-short { display:none; }
.header-cta .cta-full { display:inline; }
.mobile-menu-cta, .main-nav .nav-cta { display:none !important; }
.header-cta { min-height:44px; }
@media(max-width:1100px){
 .header .header-cta { display:inline-flex !important;flex:0 1 auto;max-width:100%;overflow-wrap:anywhere;min-height:44px;justify-content:center;gap:8px;padding:8px 12px;font-size:.78rem; }
 .topbar .header-cta { display:none !important; }
 .topbar[data-menu-ready] #navigation { display:none; }
 .topbar[data-menu-ready] #navigation.open { display:flex; }
 .topbar[data-menu-ready] .menu-button { display:flex; }
 .topbar .main-nav.open .nav-cta { display:inline-flex !important; }
}
@media(max-width:430px){
 .header-cta .cta-full { display:none; }
 .header-cta .cta-short { display:inline;font-size:.75rem; }
 .header .header-cta { padding-inline:8px; }
}
/* Links embedded in prose must remain recognizable without colour perception. */
main p a:not(.button), main li a:not(.button) { text-decoration:underline;text-underline-offset:.2em; }
a.project { display:block;color:inherit;text-decoration:none;text-align:left; }
.concept-details { padding-top:2rem; }
.concept-details .concept-detail { margin-block:1.25rem;scroll-margin-top:120px; }
.concept-detail [data-concept-scope] { max-width:75ch; }

/* Review 2026-10-22: clear entry and compact supplementary services. */
.home-hero .hero-text{max-width:60ch}
.home-hero-actions{gap:20px}
.home-preview-note{line-height:1.65;max-width:54ch}
.home-extras .category-card{padding:clamp(20px,3vw,36px)}
.home-extras h3{font-size:clamp(1.2rem,2vw,1.6rem)}
.home-extras .category-card p{margin-block:16px 24px}
.home-extras .category-grid{margin-top:32px}
@media(max-width:600px){.home-hero-actions{align-items:flex-start;gap:18px}.home-preview-note{margin-top:24px}.home-extras .category-grid{gap:16px}}

/* Keep the package comparison heading clear of the sticky navigation. */
#workflow-beispiel-title,#mini-einblick-umfang,#paket-auswahl,#grafik-leistungen,#workflow-beispiel,#ki-angebote,#video-textfassung,#ki-output-grenzen,#ki-offer-output,#ki-offer-workflow{scroll-margin-top:calc(var(--header-height,96px) + 24px)}
section[aria-labelledby="einstieg-title"] .clean-list,section[aria-labelledby="einstieg-title"] .clean-list > li { min-width:0; overflow-wrap:anywhere; }
section[aria-labelledby="einstieg-title"] .clean-list > li > :is(a,.pilot-current) { box-sizing:border-box;width:100%; display:flex;align-items:center;min-height:44px;max-width:100%;padding-block:8px;overflow-wrap:anywhere; }
.pilot-current{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.pilot-table-wrap{max-width:100%;overflow-x:auto;container-type:inline-size}
.pilot-example-table{width:100%;border-collapse:collapse;text-align:left;font-size:.95rem}
.pilot-example-table th,.pilot-example-table td{padding:12px;vertical-align:top;border-bottom:1px solid #373737;overflow-wrap:anywhere}
.pilot-example-table th{color:var(--lime);font-weight:650}
.pilot-example-table td{min-width:8rem}
.mobile-example-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:12px;color:var(--lime);font-weight:650}
.mobile-example-list{margin:0;overflow-wrap:anywhere}
.mobile-example-list > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:12px;border-bottom:1px solid #373737}
.mobile-example-list dt{color:var(--lime);font-weight:650}
.mobile-example-list dd{margin:0;min-width:0}
.excel-cell-label{display:none}
@media(max-width:680px){.mobile-example-head{display:none}.mobile-example-list > div{grid-template-columns:minmax(0,1fr);gap:8px}}
@container(max-width:34em){
 .excel-example-table,.excel-example-table tbody{display:block;width:100%}
 .excel-example-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .excel-example-table tr{display:block;width:100%;padding-block:8px;border-bottom:1px solid #555}
 .excel-example-table td{display:block;min-width:0;width:100%;border-bottom:0;overflow-wrap:anywhere}
 .excel-cell-label{display:block;margin-bottom:6px;color:var(--lime);font-weight:650}
}

/* Keep compact labels compact after promoting them to semantic headings. */
.section-top > h2.eyebrow { margin:0; line-height:1.6; }
label > [data-message-label] { font-weight:inherit; }
#leistungen .category-card h3 { hyphens:auto; overflow-wrap:anywhere; font-size:clamp(2.25rem,4.1vw,4rem); line-height:1.08; }
@media(max-width:680px) { #leistungen .category-card h3 { hyphens:auto; overflow-wrap:anywhere; font-size:clamp(2rem,7.8vw,2.8rem); line-height:1.13; } }
.category-page .section-top > h2.eyebrow { color:var(--quiet) !important; }
.category-page h3.package-detail-label { color:#d8ff9c !important; }
.proof-card > .proof-card-title { display:block; margin:0 0 12px; color:var(--quiet); font-size:.75rem; font-weight:700; letter-spacing:.12em; line-height:1.6; }
.category-steps h3.video-process-card-title { margin:.65rem 0 .45rem; }
html[lang="en"] #services .service-grid h3, .category-steps h3.video-process-card-title { font-size:clamp(2.25rem,4.1vw,4rem); line-height:1.08; font-weight:500; }
@media(max-width:680px) { html[lang="en"] #services .service-grid h3, .category-steps h3.video-process-card-title { font-size:clamp(2rem,7.8vw,2.8rem); line-height:1.13; } }
.package-detail { margin-block:14px; }
.package-detail-list { padding-left:19px; margin:7px 0 0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.package-detail-list li + li { margin-top:4px; }
.attempt-original-text{width:100%;min-width:0;resize:vertical;overflow-wrap:anywhere}
.attempt-snapshot [data-select-attempt]{min-height:44px;max-width:100%;overflow-wrap:anywhere}
.pilot-table-wrap:focus-visible, #form-status:focus, #ki-form-status:focus { outline:2px solid var(--lime); outline-offset:5px; }
#einstieg-title,#pruefumfang-title,#pruefkriterien,#pruefkriterien-title,#sample-report-title,#storyboard-title,#video-process-title,.legal :is(h2,h3)[id],.package-card h2[tabindex="-1"],#paket-auswahl h2[tabindex="-1"] { scroll-margin-top:calc(var(--header-height,96px) + 24px); }
main .contact-form select { appearance:auto; }
@media(forced-colors:active) {
 .device-switch button[aria-pressed="true"] { border-style:dashed; font-weight:700; }
 main .contact-form select { appearance:auto; border:1px solid ButtonText; color:CanvasText; background-color:Canvas !important; }
 :is(#identitaet-umfang,#visuelle-identitaet,#paket-auswahl,#paket-website-start,#paket-redesign,#paket-landingpage,#paket-mobile-check,#grafik-angebot,#preise-video,#preise-webdesign,#preise-grafik,#preise-digitale-extras,#digitale-ergaenzungen,#umfang,#pruefkriterien,#pruefkriterien-title,#sample-report-title,#ki-output-grenzen,#ki-offer-output,#ki-offer-workflow):target { outline:2px solid Highlight; outline-offset:5px; }
}

/* Hash destinations retain a static marker without changing layout or focus outlines. */
:is(#identitaet-umfang,#visuelle-identitaet,#paket-auswahl,#paket-website-start,#paket-redesign,#paket-landingpage,#paket-mobile-check,#grafik-angebot,#preise-video,#preise-webdesign,#preise-grafik,#preise-digitale-extras,#digitale-ergaenzungen,#umfang,#pruefkriterien,#pruefkriterien-title,#sample-report-title,#ki-output-grenzen,#ki-offer-output,#ki-offer-workflow):target { box-shadow:0 0 0 2px #d8ff9c; transition:none; }
.package-card h2[tabindex="-1"]:focus,#paket-auswahl h2[tabindex="-1"]:focus { outline:2px solid #d8ff9c; outline-offset:5px; }
.legal .legal-toc { margin-block:28px 36px; padding:18px 22px; border:1px solid var(--line); border-radius:8px; }
.legal .legal-toc p { margin:0 0 10px; }
.legal .legal-toc ul { margin:0; padding-left:22px; }
.legal .legal-toc li { margin-block:6px; line-height:1.5; }

#dialog-package-link { display:flex; width:fit-content; min-height:44px; margin-top:12px; }
.video-feature-copy .service-preview-note .text-link + .text-link { margin-left:20px; }

/* Optional public concept context stays visible and removable at the package choice. */
.concept-package-choice { display:flex; align-items:start; gap:.55rem; margin:1rem 0 .5rem; font-size:.9rem; line-height:1.5; }
.concept-package-choice input { flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.1rem; }
.package-concept-context { padding:1rem; border:1px solid #566744; border-radius:12px; margin-top:1rem; }
.package-concept-context p { margin-top:0; }
.previous-confirmation { display:block; margin-bottom:.65rem; }
.new-draft-notice { display:block; }
.video-motion-preview { min-width:0; }
[data-motion-replay][hidden] { display:none !important; }
#design-wegweiser-title { overflow-wrap:anywhere; hyphens:auto; }
.mobile-check-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; min-width:0; }
.mobile-check-cta-actions > a { max-width:100%; min-height:44px; overflow-wrap:anywhere; }
@media print {
 .skip { display:none!important; }
 .reveal-ready,.reveal { opacity:1!important; transform:none!important; transition:none!important; animation:none!important; }
 .subpage-steps > .subpage-step,.sample-report .sample-verdict { break-inside:avoid-page; page-break-inside:avoid; }
 .legal h2,.legal h3,.sample-report .sample-verdict h3 { break-after:avoid-page; page-break-after:avoid; }
}

/* After native validation, distinguish a known error without changing field geometry. */
:is(#contact-form,#ki-check-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):user-invalid {
 border-color:#ffb4b4 !important; border-style:dashed !important;
}
@media (forced-colors:active) {
 :is(#contact-form,#ki-check-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):user-invalid { border-color:CanvasText !important; border-style:dashed !important; }
}

/* Keep the existing project close control reachable while its content scrolls. */
#project-dialog > .dialog-header { position:sticky;top:-42px;z-index:3;display:flex;justify-content:flex-end;margin:-42px -42px 16px;padding:10px;background:#10151c; }
#project-dialog .dialog-header .dialog-close { position:static;flex:none; }
@media(max-width:680px){
 #project-dialog > .dialog-header { top:-32px;margin:-32px -18px 16px;padding:10px; }
 .graphics-detail .package-grid { grid-template-columns:minmax(0,1fr); }
}