/* ===========================================================
   3D Office WebKatalog – Marketingseite
   Farbwerte übernommen aus src/styles/Color_Palette.scss der App,
   damit Landingpage und WebKatalog dieselbe Farbwelt haben.
   =========================================================== */

:root {
  /* aus Color_Palette.scss */
  --wk-primary:        #ACB5AF;   /* Menubar, CatalogNodes */
  --wk-accent:         #808F85;
  --wk-primary-hover:  #919D95;
  --wk-secondary:      #DBD8D0;   /* Groundplane */
  --wk-neutral-200:    #DCDCD7;
  --wk-neutral-300:    #C8C9C4;
  --wk-neutral-600:    #8F928C;
  --wk-text-dark:      #545050;

  /* Ergänzungen für die Marketingseite */
  --brand:        #8B2E36;   /* Logorot, nur für Aktionen */
  --brand-hover:  #74262D;
  --ink:          #2F3330;
  --ink-soft:     #5C605B;
  --ink-muted:    #8F928C;
  --bg:           #FAF9F7;
  --bg-alt:       #F5F5F1;
  --surface:      #FFFFFF;
  --line:         #E5E3DE;
  --dark:         #2F332F;

  --radius:   10px;
  --radius-s: 7px;
  --wrap:     1248px;
  --shadow-s: 0 3px 10px rgba(47, 51, 48, .07);
  --shadow-l: 0 14px 36px rgba(47, 51, 48, .13);

  --font: "Segoe UI", Calibri, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 1.05rem + 2.4vw, 2.65rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2rem); }
h3 { font-size: 1.12rem; font-weight: 600; }
p  { margin: 0; }

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 3rem, 860px); margin-inline: auto; }
.centered { text-align: center; }
.sub { color: var(--ink-soft); margin-top: .6rem; }
h2.centered + .sub.centered { margin-bottom: 0; }

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-s) 0;
}
.skiplink:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent, var(--wk-accent)); outline-offset: 2px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.5rem;
  border-radius: var(--radius-s);
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: .55rem 1.05rem; font-size: .92rem; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--wk-neutral-300); }
.btn-ghost:hover { border-color: var(--wk-accent); }

.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: #F3F1EE; }

.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.logo { flex: none; }
.logo img { width: 175px; height: auto; }

.site-nav { display: flex; gap: 1.75rem; margin-inline: auto; }
.site-nav a {
  color: var(--wk-text-dark); text-decoration: none; font-size: .97rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--wk-accent); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.link-quiet { color: var(--wk-text-dark); text-decoration: none; font-size: .97rem; font-weight: 600; }

/* Sprachumschalter DE | EN */
.langswitch { display: flex; align-items: center; gap: 0; font-size: .9rem; font-weight: 600; }
.langswitch > * {
  padding: .2rem .5rem; text-decoration: none; color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}
.langswitch > * + * { border-left: 1px solid var(--wk-neutral-300); }
.langswitch a:hover { color: var(--ink); }
.langswitch-on { color: var(--ink); border-bottom-color: var(--brand); }
.link-quiet:hover { color: var(--ink); }

.nav-burger { display: none; }
/* Checkbox bleibt fokussierbar (Tastaturbedienung), ist aber unsichtbar */
.nav-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FBFAF8, #F1F1EC);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; right: -6%; top: 4%;
  width: 620px; height: 620px; border-radius: 50%;
  background: #E9EDE8; opacity: .7; pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 605px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #EDF0EB; border: 1px solid #DBE0D9; border-radius: 999px;
  padding: .3rem .95rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #6A756D;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wk-accent); }
.hero h1 { margin: 1.4rem 0 0; }
.hero h1 em { font-style: normal; color: var(--brand); }
.lead { margin-top: 1.4rem; font-size: 1.06rem; max-width: 34em; }
.hint { margin-top: 1.1rem; font-size: .85rem; color: var(--ink-muted); }

.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; }
.ticks li { position: relative; padding-left: 1.55rem; font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: .95rem; height: .5rem;
  border-left: 2.2px solid var(--wk-accent); border-bottom: 2.2px solid var(--wk-accent);
  transform: rotate(-45deg);
}

/* Browserrahmen um den Screenshot */
.browser {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-l); overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .85rem; background: #F1F0EC; border-bottom: 1px solid var(--line);
}
.dots { display: flex; gap: .4rem; flex: none; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #DCD8D2; }
.urlbar {
  flex: 1; max-width: 340px;
  background: #fff; border: 1px solid #E3E1DC; border-radius: 999px;
  padding: .12rem .7rem; font-size: .72rem; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser > img { width: 100%; }

/* ---------------- Standards ---------------- */
.standards { background: var(--surface); border-block: 1px solid var(--line); padding: 1.9rem 0; }
.standards-label {
  text-align: center; font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-muted);
}
.chips {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
}
.chips li {
  background: #F4F5F2; border-radius: 999px;
  padding: .42rem 1.4rem; font-size: .9rem; color: var(--ink-soft);
}

/* ---------------- Sektionen ---------------- */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--surface); }
.section-alt { background: var(--bg-alt); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.9rem; }
.cards, .features, .gallery, .audience { margin-top: 2.8rem; }

.card {
  background: #FBFBF9; border: 1px solid #E9E7E2; border-radius: var(--radius);
  padding: 1.9rem; box-shadow: var(--shadow-s);
}
.card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #EDF0EB; color: var(--wk-accent);
}
.card h3 { margin: 1.4rem 0 .7rem; }

.feature {
  background: var(--surface); border: 1px solid #E9E7E2; border-radius: var(--radius);
  padding: 1.7rem;
}
.feature h3 { position: relative; padding-top: 1.1rem; margin-bottom: .7rem; }
.feature h3::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 26px; height: 4px; border-radius: 2px; background: var(--wk-accent);
}
.card p, .feature p, .audience p { font-size: .95rem; }

.audience h3 { margin-bottom: 1.5rem; }
.audience h3::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin-top: .8rem; background: var(--brand);
}

/* Live-Demo im Hero */
.live { position: relative; background: #fff; }
.live > img { width: 100%; display: block; }
.live-frame { display: none; width: 100%; aspect-ratio: 740 / 464; min-height: 520px; border: 0; position: relative; z-index: 1; }
.live.is-live .live-frame { display: block; }

/* Der Screenshot bleibt als Hintergrund hinter dem iframe stehen und der
   Ladehinweis liegt darueber, bis der WebKatalog gezeichnet hat. Sonst starrt
   der Besucher nach dem Klick mehrere Sekunden auf eine weisse Flaeche. */
.live.is-live > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live.is-loaded > img { display: none; }

.live-loading {
  display: none; position: absolute; left: 50%; bottom: 1.1rem; z-index: 2;
  transform: translateX(-50%); margin: 0; pointer-events: none;
  padding: .38rem 1.05rem .38rem .85rem; border-radius: 999px;
  background: rgba(47, 51, 48, .82); color: #fff;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.live.is-live .live-loading { display: block; }
.live.is-loaded .live-loading { display: none; }
.live-loading::before {
  content: ""; display: inline-block; vertical-align: -2px; margin-right: .5rem;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: live-spin .8s linear infinite;
}
@keyframes live-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live-loading::before { animation: none; } }

.live-start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(47, 51, 48, .22) 30%, rgba(47, 51, 48, .68));
  color: #fff; font-family: inherit;
  transition: background-color .15s ease;
}
.live-start:hover { background: linear-gradient(180deg, rgba(47, 51, 48, .34) 30%, rgba(47, 51, 48, .76)); }
.live-play {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 6px 20px rgba(47, 51, 48, .35);
  display: grid; place-items: center;
}
.live-play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 17px solid #fff; border-block: 11px solid transparent;
}
.live-label { font-size: 1.08rem; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.live-note { font-size: .82rem; opacity: .95; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.hero-shot-note { margin-top: .9rem; font-size: .8rem; color: var(--ink-muted); text-align: center; }

/* Showcase: abwechselnde Zeilen mit grossen Screenshots */
.showcase .show-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--line);
}
.showcase .show-row:first-of-type { border-top: 0; }
.showcase .show-row:nth-child(even) .show-img { order: 2; }
.show-img { margin: 0; }
.show-img img {
  display: block; width: 100%;
  border: 1px solid var(--wk-neutral-200);
  background: var(--surface); box-shadow: var(--shadow-s);
}

/* Die Abbildung ist ein Knopf: rund 1900 px Aufnahme auf gut 600 px Anzeige -
   das Merkmalspanel ist erst in der Vollansicht lesbar. */
.show-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.show-zoom:focus-visible { outline: 3px solid var(--wk-accent); outline-offset: 3px; }
/* Lupe erst beim Zeigen. Auf Touchgeraeten gibt es kein Hover - dort ist das
   Antippen der Abbildung die naheliegende Geste, und der aria-label am Knopf
   sagt Screenreadern ohnehin, was passiert. */
.zoom-badge {
  position: absolute; right: .8rem; bottom: .8rem;
  display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(47, 51, 48, .82); color: #fff;
  opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
  pointer-events: none;
}
.show-zoom:hover .zoom-badge,
.show-zoom:focus-visible .zoom-badge { opacity: 1; transform: none; }
.show-zoom:hover .zoom-badge { background: var(--wk-accent); }
@media (prefers-reduced-motion: reduce) {
  .zoom-badge { transition: opacity .18s ease; transform: none; }
}

/* Vollansicht.
   width/height bleiben auf fit-content: ein modaler Dialog liegt mit inset: 0
   im Fenster, mit "auto" spannt er sich auf die volle erlaubte Groesse auf und
   das Bild schwimmt in einer weissen Flaeche. Der Hintergrund ist ausserdem
   durchsichtig, damit auch waehrend des Ladens nichts Weisses aufblitzt - der
   Schatten sitzt am Bild, nicht am Dialog. */
.lightbox {
  width: fit-content; height: fit-content;
  max-width: 96vw; max-height: 94vh;
  padding: 0; border: 0; background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(24, 27, 24, .84); }
.lightbox img {
  display: block; width: auto; height: auto;
  max-width: 96vw; max-height: 94vh;
  box-shadow: var(--shadow-l);
}
.lightbox-close {
  position: absolute; top: .55rem; right: .55rem;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: rgba(47, 51, 48, .82); color: #fff;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--wk-accent); }
.lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* Auf dem Telefon brächte "ins Fenster einpassen" fast nichts: 96 vw sind dort
   kaum mehr als die 380 px in der Seite. Stattdessen fuellt die Aufnahme die
   Hoehe und laeuft seitlich ueber - schieben statt schielen. */
@media (max-width: 680px) {
  .lightbox { max-width: 100vw; max-height: 100vh; overflow: auto; }
  .lightbox img { box-shadow: none; }
  .lightbox img { max-width: none; max-height: none; height: 92vh; width: auto; }
  .lightbox-close { position: fixed; top: .5rem; right: .5rem; }
}
.show-text h3 { font-size: 1.32rem; font-weight: 700; }
.show-text p { margin-top: .9rem; font-size: 1rem; }
.show-text .ticks { flex-direction: column; gap: .7rem; margin-top: 1.4rem; }

/* Ablauf */
.steps {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem;
  text-align: center; position: relative;
}
.steps::before {
  content: ""; position: absolute; top: 34px; left: 16%; right: 16%;
  border-top: 2px dashed var(--wk-neutral-300);
}
.steps li { position: relative; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: #EDF0EB; border: 1px solid #DBE0D9;
  color: var(--wk-accent); font-size: 1.35rem; font-weight: 700;
  position: relative; z-index: 1;
}
.step-num-accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps h3 { margin: 1.5rem 0 .6rem; }
.steps p { font-size: .95rem; margin-inline: auto; max-width: 24em; }

/* ---------------- Integration ---------------- */
.integration { background: var(--dark); color: #C9D2CA; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.integration h2 { color: #fff; margin-top: 1rem; }
.integration-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.eyebrow-light { background: transparent; border: 0; padding: 0; color: #A6B3A8; }
.lead-light { color: #D7DCD6; }
.ticks-light li::before { border-color: #9FB3A4; }
.ticks-light { flex-direction: column; gap: 1rem; }
.ticks-light li { color: #C9D2CA; }
.integration code { font-family: var(--font-mono); font-size: .92em; color: #E4EAE4; }

.codecard { background: #1E221E; border: 1px solid #3E453E; border-radius: var(--radius); overflow: hidden; }
.codecard-bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .9rem; background: #272C27; font-size: .78rem; color: #8B948C;
}
.codecard-bar .dots i { background: #4B534B; }
.codecard pre { margin: 0; padding: 1.6rem 1.4rem; overflow-x: auto; }
.codecard code {
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.75;
  color: #C9D2CA; white-space: pre;
}
.c-cm  { color: #6E7A70; }
.c-tag { color: #9FB3A4; }
.c-at  { color: #C9D2CA; }
.c-st  { color: #D9A86A; }

/* ---------------- CTA ---------------- */
.cta {
  background: linear-gradient(135deg, var(--wk-accent), #6B7A70);
  color: #E4EAE4; padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.cta h2 { color: #fff; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; }
.cta-sub { margin-top: 1rem; font-size: 1.05rem; }
.cta-url { margin-top: .5rem; font-size: .88rem; color: #C7D2C8; }
.qr { margin: 0; text-align: center; }
.qr img { background: #fff; border-radius: var(--radius); padding: .7rem; width: 164px; }
.qr figcaption { margin-top: .7rem; font-size: .8rem; color: #E4EAE4; }

/* ---------------- Referenzen ---------------- */
/* Gleich grosse Zellen statt gleicher Hoehe: die Logos reichen vom quadratischen
   Signet (WERKSITZ) bis zur sehr breiten Wortmarke (werner works), auf gleiche
   Hoehe skaliert waere das eine siebenmal so breit wie das andere. */
.logos {
  list-style: none; margin: 2.8rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem;
}
.logos li {
  display: grid; place-items: center;
  min-height: 96px; padding: 1rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.logos img {
  max-height: 52px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .66;
  transition: filter .18s ease, opacity .18s ease;
}
.logos li:hover img { filter: grayscale(0); opacity: 1; }
.logos-note { margin-top: 1.8rem; font-size: .88rem; color: var(--ink-muted); }

/* ---------------- Preis ---------------- */
.pricebox {
  margin-top: 2.6rem;
  background: #FBFBF9; border: 1px solid #E9E7E2; border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem; align-items: center;
}
.pricebox .ticks { margin-top: 1.2rem; }
.pricebox .cta-row { margin: 0; }

/* ---------------- FAQ ---------------- */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--wk-neutral-300); }
.faq-item { border-bottom: 1px solid var(--wk-neutral-300); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.2rem 0;
  font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; margin-top: .45rem;
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--wk-accent); border-bottom: 2px solid var(--wk-accent);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: .7rem; }
.faq-item summary:hover { color: var(--brand); }
.faq-item > p { padding: 0 2.4rem 1.4rem 0; margin-top: -.3rem; font-size: .98rem; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--dark); color: #8B948C; padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.footer-logo { width: 175px; }
.footer-claim { margin-top: .9rem; font-size: .85rem; }
.site-footer nav { display: flex; flex-direction: column; gap: .55rem; }
.footer-head { font-size: .92rem; font-weight: 600; color: #fff; margin-bottom: .35rem; }
.site-footer nav a { color: #C9D2CA; text-decoration: none; font-size: .9rem; }
.site-footer nav a:hover { color: #fff; }
.footer-legal { margin-top: 3rem; }
.footer-legal p { font-size: .76rem; color: #6E7A70; }

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-shot { order: -1; }
  .hero::before { display: none; }
  .integration-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase .show-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .showcase .show-row:nth-child(even) .show-img { order: 0; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .cta-grid { grid-template-columns: 1fr; }
  .pricebox { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qr { justify-self: start; text-align: left; }
}

@media (max-width: 1040px) {
  .wrap { width: calc(100% - 2.5rem); }

  /* Navigation klappt auf – reines CSS, kein JavaScript */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; flex: none;
    width: 42px; height: 42px; padding: 0 9px;
    border: 1px solid var(--wk-neutral-300); border-radius: var(--radius-s);
    cursor: pointer;
  }
  .nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--wk-accent); outline-offset: 2px; }
  .nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem 0;
  }
  .site-nav a { padding: .85rem 1.25rem; border-bottom: 0; }
  .nav-toggle:checked ~ .site-nav { display: flex; }

  /* Eine Zeile: Logo | Demo-Button | Burger */
  .header-inner { position: relative; flex-wrap: nowrap; gap: .7rem; }
  .header-actions { order: 2; margin-left: auto; gap: .7rem; }
  .header-actions .link-quiet { display: none; }
  /* Kopfzeile auf schmalen Geraeten zusammenruecken:
     Logo | DE EN | Demo-Button | Burger muessen in eine Zeile passen. */
  .langswitch { font-size: .82rem; }
  .langswitch > * { padding: .15rem .35rem; }
  .header-inner { gap: .45rem; }
  .btn-sm { padding: .5rem .7rem; font-size: .84rem; }
  .logo img { width: 150px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid-3 { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .logos li { min-height: 78px; padding: .8rem 1rem; }
  .logos img { max-height: 40px; }
  .live-frame { min-height: 440px; }
  .logo img { width: 116px; }
  .btn-sm { padding: .45rem .6rem; font-size: .8rem; }
}

@media (max-width: 400px) {
  .header-actions .btn { display: none; }
  .ticks { gap: .8rem 1.5rem; }
}