/* ==========================================================================
   Marktritter – Startseite: „Welche Website passt zu dir?“ (Website-Arten, Paket F)
   Idee „Entwurfsmappe“: Karteireiter + Entwurfsblatt (Papier mit Raster) mit Strich-Skizze,
   Schriftfeld und einer Lime-Markierung für das, was die Art ausmacht.
   Präfix .wa · Farben nur aus Tokens (app.css) · keine Bilder, keine Webfonts außer vorhandenen.
   Ohne JS (.wa ohne .wa--ready): Reiter = Anker, alle Panels untereinander, Skizze aus.
   ========================================================================== */

.wa {
  --wa-ink: rgba(20, 20, 20, .66);      /* Skizzen-Strich */
  --wa-soft: rgba(20, 20, 20, .16);     /* Textlinien in der Skizze */
  --wa-t: .32s;
  --wa-ear: 14px;                       /* Radius der Reiter-Ohren */
}

.wa__box {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(16px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: var(--peach-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tabs" "work" "panels" "mix" "navlist";
}
.wa__tabs { grid-area: tabs; min-width: 0; position: relative; }
.wa__work { grid-area: work; min-width: 0; }
.wa__panels { grid-area: panels; min-width: 0; }
.wa__mix { grid-area: mix; }
.wa__navlist { grid-area: navlist; }

/* ---------- Reiter ---------- */
.wa__tablist { margin: 0; padding: 0; list-style: none; display: flex; gap: 4px; }
.wa__tabitem { display: flex; }
.wa__tab {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: var(--ctl-h); padding: 10px 16px 10px 16px;
  color: var(--ink); text-decoration: none; border-radius: var(--r-sm);
  transition: background .2s var(--ease);
}
.wa__tab:hover { background: rgba(255, 255, 255, .55); }
.wa__tabname {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-display); font-weight: 600; font-stretch: 100%; font-size: 1rem; line-height: 1.2;
}
/* Rubrik-Schild vor dem aktiven Reiter (wie .eyebrow) – Platz ist immer reserviert, damit nichts springt */
.wa__tabname::before {
  content: ""; flex: none; width: .82em; height: .96em; background: var(--orange); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .2s;
}
.wa__tabshort { font-size: .8rem; line-height: 1.3; color: var(--muted); padding-left: calc(.82em + .5em); }
.wa__tab[aria-selected="true"] { background: var(--paper); }
.wa__tab[aria-selected="true"] .wa__tabname { font-weight: 800; }
.wa__tab[aria-selected="true"] .wa__tabname::before { opacity: 1; }
.wa__tab:focus-visible { outline-offset: -3px; }

/* Ohne JS: Reiter als Inhaltsverzeichnis (Sprunglinks zu den Panels) */
.wa:not(.wa--ready) .wa__tablist { flex-wrap: wrap; }
.wa:not(.wa--ready) .wa__tab { background: rgba(255, 255, 255, .6); }
.wa:not(.wa--ready) .wa__tabname::before { opacity: 1; }

/* ---------- Entwurfsblatt ---------- */
.wa:not(.wa--ready) .wa__work { display: none; }
.wa__sheet {
  position: relative;
  padding: clamp(14px, 2vw, 26px);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(20, 20, 20, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, .045) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}
.wa__views { display: none; }
.wa__drawing { position: relative; }

/* Desktop-Rahmen */
.wa-stage {
  position: relative; width: 84%; aspect-ratio: 16 / 10.6;
  border: 1.5px solid var(--wa-ink); border-radius: 8px; background: var(--paper); overflow: hidden;
  container-type: inline-size;
  font-size: 9px; font-size: clamp(6.5px, 1.75cqw, 11px);
  box-shadow: 0 18px 40px -26px rgba(60, 30, 10, .35);
}
.wa-url {
  position: absolute; left: 0; right: 0; top: 0; height: 7%;
  display: flex; align-items: center; padding: 0 2.6%;
  border-bottom: 1.5px solid var(--wa-ink); font-family: var(--f-body); color: var(--muted);
}
.wa-url span { font-size: .95em; letter-spacing: .01em; }
.wa-screen { position: absolute; left: 0; right: 0; top: 7%; bottom: 0; overflow: hidden; contain: layout paint; }

/* Kopf der Skizze */
.wa-head {
  position: absolute; left: 0; right: 0; top: 0; height: 14%; z-index: 3;
  display: flex; align-items: center; padding: 0 3%; background: var(--paper);
  border-bottom: 1px solid var(--wa-soft);
}
.wa-head > i { flex: none; display: block; max-width: 14em; opacity: 1; transition: max-width var(--wa-t) var(--ease), margin var(--wa-t) var(--ease), opacity .2s, padding var(--wa-t) var(--ease), border-width var(--wa-t); }
.wa-logo { width: 2.3em; height: 2.3em; border-radius: .35em; background: var(--orange); }
.wa-sp { flex: 1 1 auto !important; max-width: none !important; }
.wa-n { position: relative; width: 3.2em; height: .42em; margin-left: 1.3em; border-radius: .2em; background: var(--wa-ink); }
.wa-n2 { width: 4.3em; } .wa-n3 { width: 2.7em; } .wa-n4 { width: 3.8em; } .wa-n5 { width: 3em; } .wa-n6 { width: 3.4em; }
/* Sprungmarke (wandert beim Onepager mit) */
.wa-n::after {
  content: ""; position: absolute; left: -.2em; right: -.2em; top: 1.05em; height: .32em; border-radius: .2em;
  background: var(--orange); opacity: 0; transition: opacity .2s;
}
/* Mega-Menü: Pfeil am ersten Punkt */
.wa-n1::before {
  content: ""; position: absolute; right: -1em; top: -.12em; width: .5em; height: .5em;
  border-right: 1.5px solid var(--wa-ink); border-bottom: 1.5px solid var(--wa-ink); transform: rotate(45deg);
  opacity: 0; transition: opacity .2s;
}
.wa-hbtn {
  display: grid !important; place-items: center; position: relative;
  width: 2.5em; height: 2.5em; margin-left: .8em; border: 1.5px solid var(--wa-ink); border-radius: .45em; background: var(--paper);
}
.wa-hbtn svg { width: 1.45em; height: 1.45em; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa-cart b {
  position: absolute; top: -.55em; right: -.55em; min-width: 1.35em; height: 1.35em; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 .75em/1 var(--f-body);
}
.wa-stick {
  margin-left: .9em; padding: .55em .9em; border-radius: .45em; background: var(--orange); color: var(--ink);
  font: 700 .85em/1 var(--f-body); font-style: normal; white-space: nowrap; overflow: hidden;
}
.wa-burger {
  display: flex !important; align-items: center; gap: .5em; margin-left: .9em; padding: .5em .7em;
  border: 1.5px solid var(--wa-ink); border-radius: .45em; font: 600 .85em/1 var(--f-body); font-style: normal; overflow: hidden; white-space: nowrap;
}
.wa-burger s { width: 1.1em; height: .7em; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); text-decoration: none; }

/* Sichtbarkeit im Kopf je Navigation/Art (ausgeblendet = zusammengeklappt) */
.wa-stage:not([data-art="online-shop"]) :is(.wa-search, .wa-cart),
.wa-stage:not([data-art="portal"]) .wa-login,
.wa-stage[data-sticky="0"] .wa-stick,
.wa-stage:not([data-nav="drawer"]) .wa-burger,
.wa-stage:is([data-nav="drawer"], [data-nav="ohne"]) .wa-n,
.wa-stage[data-navcount="0"] .wa-n,
.wa-stage[data-navcount="3"] :is(.wa-n4, .wa-n5, .wa-n6),
.wa-stage[data-navcount="4"] :is(.wa-n5, .wa-n6),
.wa-stage[data-navcount="5"] .wa-n6 {
  max-width: 0; margin-left: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0;
}
.wa-stage[data-nav="mega"] .wa-n1 { margin-right: .9em; }
.wa-stage[data-nav="mega"] .wa-n1::before { opacity: 1; }
.wa-stage[data-nav="sprung"][data-sec="0"] .wa-n1::after,
.wa-stage[data-nav="sprung"][data-sec="1"] .wa-n1::after,
.wa-stage[data-nav="sprung"][data-sec="2"] .wa-n2::after,
.wa-stage[data-nav="sprung"][data-sec="3"] .wa-n3::after,
.wa-stage[data-nav="sprung"][data-sec="4"] .wa-n4::after,
.wa-stage[data-nav="sprung"][data-sec="5"] .wa-n5::after { opacity: 1; }
/* Markierte Kopf-Elemente (was die Art ausmacht) */
.wa-stage[data-art="online-shop"] .wa-cart,
.wa-stage[data-art="portal"] .wa-login { background: var(--lime); border-color: var(--ink); }
.wa-stage[data-art="portal"] .wa-login { width: 2.9em; }

/* ---------- Inhalts-Blöcke (Geometrie in % der Leinwand, je Art) ---------- */
.wa-canvas {
  position: absolute; left: 0; right: 0; top: 14%; bottom: 0;
  transition: transform .42s var(--ease);
}
.wa-b {
  --x: 50; --y: 50; --w: 0; --h: 0; --o: 0;
  position: absolute; display: block; box-sizing: border-box;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  opacity: var(--o);
  transition: left var(--wa-t) var(--ease), top var(--wa-t) var(--ease), width var(--wa-t) var(--ease), height var(--wa-t) var(--ease), opacity .2s, background-color .2s, border-color .2s;
  transition-delay: calc(var(--i, 0) * 18ms);
}
.wa-b > * { display: block; transition: opacity .2s, width var(--wa-t) var(--ease), height var(--wa-t) var(--ease); }

/* Grundlage (auch „Parkposition“ ausgeblendeter Blöcke) */
.wa-b--hi { --x: 52; --y: 6; --w: 42; --h: 40; background: var(--peach); border: 1.5px solid var(--wa-ink); border-radius: .5em; }
.wa-b--ht { --x: 6; --y: 8; --w: 40; --h: 32; display: flex; flex-direction: column; justify-content: center; gap: .55em; }
.wa-b--ht b { height: 1.05em; width: 92%; border-radius: .2em; background: var(--ink); }
.wa-b--ht b + b { width: 62%; }
.wa-b--ht s { height: .42em; width: 86%; border-radius: .2em; background: var(--wa-soft); text-decoration: none; }
.wa-b--ht s + s { width: 70%; }
.wa-b--ht u { width: 7.5em; height: 1.9em; margin-top: .45em; border-radius: .45em; background: var(--orange); text-decoration: none; }
.wa-b--r1 { --x: 6; --y: 52; --w: 44; --h: 9; }
.wa-b--r2 { --x: 6; --y: 64; --w: 44; --h: 9; }
.wa-b--r3 { --x: 6; --y: 76; --w: 44; --h: 9; }
.wa-b--s4 { --x: 8; --y: 108; --w: 84; --h: 15; }
.wa-b--s5 { --x: 8; --y: 127; --w: 84; --h: 15; }
.wa-b--r {
  display: flex; align-items: center; gap: 4%; padding: 0 3%;
  border: 1.5px solid var(--wa-ink); border-radius: .45em; background: var(--paper);
}
.wa-b--r em { flex: none; height: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--peach); border: 1.5px solid var(--wa-ink); }
.wa-b--r b { flex: none; width: 32%; height: .5em; border-radius: .2em; background: var(--ink); }
.wa-b--r s { flex: none; width: 24%; height: .38em; border-radius: .2em; background: var(--wa-soft); text-decoration: none; }
.wa-b--r s + s { display: none; }
.wa-b--r u { display: none; flex: none; text-decoration: none; }
.wa-b--prods {
  --x: 5; --y: 28; --w: 90; --h: 58;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5% 3.5%;
}
.wa-b--prods em { display: flex; flex-direction: column; gap: 7%; padding: 5%; border: 1.5px solid var(--wa-ink); border-radius: .45em; background: var(--paper); min-height: 0; }
.wa-b--prods em b { flex: 1 1 auto; min-height: 0; border-radius: .3em; background: var(--peach); }
.wa-b--prods em s { flex: none; height: .38em; width: 70%; border-radius: .2em; background: var(--wa-soft); text-decoration: none; }
.wa-b--prods em u { flex: none; height: .5em; width: 34%; border-radius: .2em; background: var(--orange); text-decoration: none; }
.wa-b--feat { --x: 56; --y: 52; --w: 38; --h: 33; border: 1.5px solid var(--ink); border-radius: .5em; background: var(--lime); overflow: hidden; }
.wa-f { position: absolute !important; inset: 0; opacity: 0; }
.wa-b--lock {
  --x: 47; --y: 41; --w: 10; --h: 16;
  display: grid; place-items: center; z-index: 2;
}
.wa-b--lock svg {
  width: 3.6em; height: 3.6em; padding: .75em; border-radius: 50%; box-sizing: border-box;
  background: var(--ink); fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.wa-b--dots {
  --x: 90.6; --y: 20; --w: 2.6; --h: 36;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  border: 1.5px solid var(--ink); border-radius: .5em; background: var(--lime);
}
.wa-b--dots s { width: .42em; height: .42em; border-radius: 50%; background: var(--ink); opacity: .35; text-decoration: none; transition: opacity .2s, transform .2s; }
.wa-b--foot { --x: 0; --y: 92; --w: 100; --h: 8; background: rgba(20, 20, 20, .06); border-top: 1px solid var(--wa-soft); }

/* Feature-Varianten */
.wa-f--map { display: grid !important; grid-template-rows: 1fr auto auto; gap: 5%; padding: 7%; }
.wa-f--map b {
  border: 1.5px solid var(--ink); border-radius: .35em; position: relative;
  background:
    linear-gradient(28deg, transparent 46%, rgba(20, 20, 20, .5) 46%, rgba(20, 20, 20, .5) 50%, transparent 50%),
    linear-gradient(-62deg, transparent 58%, rgba(20, 20, 20, .35) 58%, rgba(20, 20, 20, .35) 61%, transparent 61%),
    var(--paper);
}
.wa-f--map b::after {
  content: ""; position: absolute; left: 54%; top: 22%; width: 1.3em; height: 1.3em;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); border: 1.5px solid var(--ink);
}
.wa-f--map s { height: .42em; width: 80%; border-radius: .2em; background: rgba(20, 20, 20, .55); text-decoration: none; }
.wa-f--map s + s { width: 55%; }
.wa-f--map u { display: none; }
.wa-f--form { display: flex !important; flex-direction: column; gap: 6%; padding: 9% 9%; }
.wa-f--form > b { display: flex; gap: 6%; align-items: center; margin-bottom: 3%; }
.wa-f--form > b i {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper); font: 700 .85em/1 var(--f-body); font-style: normal; color: var(--ink);
}
.wa-f--form > b i:first-child { background: var(--ink); color: var(--lime); }
.wa-f--form > s { height: 2.1em; border: 1.5px solid var(--ink); border-radius: .35em; background: var(--paper); text-decoration: none; }
.wa-f--form > u { height: 2.3em; width: 60%; margin-top: auto; border-radius: .4em; background: var(--ink); text-decoration: none; }
.wa-f--upload { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8%; margin: 6%; border: 1.5px dashed var(--ink); border-radius: .4em; }
.wa-f--upload svg { width: 3.4em; height: 3.4em; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-f--upload s { height: .42em; width: 52%; border-radius: .2em; background: rgba(20, 20, 20, .55); text-decoration: none; }
.wa-f--dash { display: grid !important; grid-template-columns: 22% 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 5% 5%; padding: 7% 7% 7% 0; }
.wa-f--dash > b { grid-row: 1 / -1; background: rgba(20, 20, 20, .78); border-radius: 0 .4em .4em 0; }
.wa-f--dash > s { grid-column: span 2; height: .5em; width: 60%; border-radius: .2em; background: rgba(20, 20, 20, .45); text-decoration: none; }
.wa-f--dash > s ~ s { display: none; }
.wa-f--dash > u { border: 1.5px solid var(--wa-ink); border-radius: .4em; background: var(--paper); text-decoration: none; }

/* ---------- Geometrie je Art ---------- */
/* Web-Visitenkarte: geteilter Hero, Leistungen als Zeilen, Kontakt & Anfahrt markiert */
.wa-stage[data-art="web-visitenkarte"] :is(.wa-b--hi, .wa-b--ht, .wa-b--r1, .wa-b--r2, .wa-b--r3, .wa-b--feat, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="web-visitenkarte"] .wa-f--map { opacity: 1; }

/* Onepager: Statement vollbreit, Abschnitte untereinander, Abschnitts-Anzeiger markiert */
.wa-stage[data-art="onepager"] :is(.wa-b--hi, .wa-b--ht, .wa-b--r1, .wa-b--r2, .wa-b--r3, .wa-b--s4, .wa-b--s5, .wa-b--dots, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="onepager"] .wa-b--hi { --x: 0; --y: 0; --w: 100; --h: 42; border-width: 0 0 1.5px; border-radius: 0; }
.wa-stage[data-art="onepager"] .wa-b--ht { --x: 8; --y: 7; --w: 58; --h: 30; }
.wa-stage[data-art="onepager"] .wa-b--r1 { --x: 8; --y: 51; --w: 84; --h: 15; }
.wa-stage[data-art="onepager"] .wa-b--r2 { --x: 8; --y: 70; --w: 84; --h: 15; }
.wa-stage[data-art="onepager"] .wa-b--r3 { --x: 8; --y: 89; --w: 84; --h: 15; }
.wa-stage[data-art="onepager"] .wa-b--foot { --y: 146; }
.wa-stage:is([data-art="onepager"], [data-art="landingpage"]) .wa-b--ht b { height: 1.5em; }
.wa-stage:is([data-art="onepager"]) .wa-b--r { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12%; border-width: 0 0 0 3px; border-radius: 0; padding: 0 0 0 2.4%; }
.wa-stage[data-art="onepager"] .wa-b--r em,
.wa-stage[data-art="onepager"] .wa-b--r u { display: none; }
.wa-stage[data-art="onepager"] .wa-b--r b { width: 22%; }
.wa-stage[data-art="onepager"] .wa-b--r s { width: 78%; }
.wa-stage[data-art="onepager"] .wa-b--r s + s { display: block; width: 56%; }
.wa-stage[data-art="onepager"] .wa-b--dots s:first-child { opacity: 1; transform: scale(1.35); }
.wa-stage[data-art="onepager"][data-sec="2"] .wa-canvas { transform: translateY(-18%); }
.wa-stage[data-art="onepager"][data-sec="3"] .wa-canvas { transform: translateY(-36%); }
.wa-stage[data-art="onepager"][data-sec="4"] .wa-canvas { transform: translateY(-50%); }
.wa-stage[data-art="onepager"][data-sec="5"] .wa-canvas { transform: translateY(-54%); }
/* Der Abschnitts-Anzeiger bleibt beim Scrollen stehen: gleicht die Verschiebung der Leinwand aus */
.wa-stage[data-art="onepager"] .wa-b--dots { transition: top .42s var(--ease), opacity .2s; transition-delay: 0s; }
.wa-stage[data-art="onepager"][data-sec="2"] .wa-b--dots { --y: 38; }
.wa-stage[data-art="onepager"][data-sec="3"] .wa-b--dots { --y: 56; }
.wa-stage[data-art="onepager"][data-sec="4"] .wa-b--dots { --y: 70; }
.wa-stage[data-art="onepager"][data-sec="5"] .wa-b--dots { --y: 74; }
.wa-stage[data-art="onepager"]:not([data-sec="0"]):not([data-sec="1"]) .wa-b--dots s:first-child { opacity: .35; transform: none; }
.wa-stage[data-art="onepager"][data-sec="2"] .wa-b--dots s:nth-child(2),
.wa-stage[data-art="onepager"][data-sec="3"] .wa-b--dots s:nth-child(3),
.wa-stage[data-art="onepager"][data-sec="4"] .wa-b--dots s:nth-child(4),
.wa-stage[data-art="onepager"][data-sec="5"] .wa-b--dots s:nth-child(5) { opacity: 1; transform: scale(1.35); }

/* Firmenporträt: Leistungs-Teaser mit angedeuteten Unterseiten dahinter (Lime) */
.wa-stage[data-art="firmenportraet"] :is(.wa-b--hi, .wa-b--ht, .wa-b--r1, .wa-b--r2, .wa-b--r3, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="firmenportraet"] .wa-b--hi { --h: 36; }
.wa-stage[data-art="firmenportraet"] .wa-b--ht { --h: 30; }
.wa-stage[data-art="firmenportraet"] .wa-b--r1 { --x: 6; --y: 54; --w: 25; --h: 31; }
.wa-stage[data-art="firmenportraet"] .wa-b--r2 { --x: 37; --y: 54; --w: 25; --h: 31; }
.wa-stage[data-art="firmenportraet"] .wa-b--r3 { --x: 68; --y: 54; --w: 25; --h: 31; }
.wa-stage[data-art="firmenportraet"] .wa-b--r {
  flex-direction: column; align-items: flex-start; gap: 8%; padding: 5%;
  box-shadow: .45em -.45em 0 -1.5px var(--lime), .45em -.45em 0 0 var(--ink), .9em -.9em 0 -1.5px var(--lime), .9em -.9em 0 0 var(--ink);
}
.wa-stage[data-art="firmenportraet"] .wa-b--r em { width: 100%; height: 44%; aspect-ratio: auto; border-radius: .3em; }
.wa-stage[data-art="firmenportraet"] .wa-b--r b { width: 62%; }
.wa-stage[data-art="firmenportraet"] .wa-b--r s { width: 86%; }

/* Online-Shop: schmaler Banner, Produktkarten, Warenkorb im Kopf markiert */
.wa-stage[data-art="online-shop"] :is(.wa-b--hi, .wa-b--ht, .wa-b--prods, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="online-shop"] .wa-b--hi { --x: 5; --y: 5; --w: 90; --h: 18; }
.wa-stage[data-art="online-shop"] .wa-b--ht { --x: 9; --y: 6; --w: 38; --h: 16; gap: .4em; }
.wa-stage[data-art="online-shop"] .wa-b--ht b { height: .8em; }
.wa-stage[data-art="online-shop"] .wa-b--ht b + b,
.wa-stage[data-art="online-shop"] .wa-b--ht s + s { display: none; }
.wa-stage[data-art="online-shop"] .wa-b--ht u { height: 1.5em; width: 6em; margin-top: .2em; }

/* Landingpage: Statement links, geführte Anfrage rechts (markiert), kein Fuß-Menü */
.wa-stage[data-art="landingpage"] :is(.wa-b--hi, .wa-b--ht, .wa-b--r1, .wa-b--r2, .wa-b--r3, .wa-b--feat) { --o: 1; }
.wa-stage[data-art="landingpage"] .wa-b--hi { --x: 0; --y: 0; --w: 57; --h: 100; border-width: 0 1.5px 0 0; border-radius: 0; }
.wa-stage[data-art="landingpage"] .wa-b--ht { --x: 7; --y: 10; --w: 44; --h: 38; }
.wa-stage[data-art="landingpage"] .wa-b--r1 { --x: 7; --y: 58; --w: 40; --h: 3.4; }
.wa-stage[data-art="landingpage"] .wa-b--r2 { --x: 7; --y: 65; --w: 33; --h: 3.4; }
.wa-stage[data-art="landingpage"] .wa-b--r3 { --x: 7; --y: 72; --w: 37; --h: 3.4; }
.wa-stage[data-art="landingpage"] .wa-b--r { border: 0; border-radius: .2em; background: rgba(20, 20, 20, .22); padding: 0; }
.wa-stage[data-art="landingpage"] .wa-b--r > * { display: none; }
.wa-stage[data-art="landingpage"] .wa-b--feat { --x: 63; --y: 9; --w: 31; --h: 82; }
.wa-stage[data-art="landingpage"] .wa-f--form { opacity: 1; }

/* Portal: vorne öffentlich (links), dahinter der Innenraum (rechts), Login markiert */
.wa-stage[data-art="portal"] :is(.wa-b--hi, .wa-b--ht, .wa-b--feat, .wa-b--lock, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="portal"] .wa-b--ht { --x: 6; --y: 7; --w: 38; --h: 30; }
.wa-stage[data-art="portal"] .wa-b--hi { --x: 6; --y: 44; --w: 38; --h: 38; }
.wa-stage[data-art="portal"] .wa-b--feat { --x: 52; --y: 0; --w: 48; --h: 100; border-width: 0 0 0 1.5px; border-radius: 0; background: var(--bg-2); }
.wa-stage[data-art="portal"] .wa-f--dash { opacity: 1; }
.wa-stage[data-art="portal"] .wa-b--foot { --x: 0; --y: 90; --w: 52; --h: 10; }

/* Karriere: Stellen mit Umriss-Tags, Upload-Feld markiert */
.wa-stage[data-art="karriere"] :is(.wa-b--hi, .wa-b--ht, .wa-b--r1, .wa-b--r2, .wa-b--r3, .wa-b--feat, .wa-b--foot) { --o: 1; }
.wa-stage[data-art="karriere"] .wa-b--hi { --h: 36; }
.wa-stage[data-art="karriere"] .wa-b--ht { --h: 30; }
.wa-stage[data-art="karriere"] .wa-b--r1 { --x: 6; --y: 50; --w: 46; --h: 10; }
.wa-stage[data-art="karriere"] .wa-b--r2 { --x: 6; --y: 63; --w: 46; --h: 10; }
.wa-stage[data-art="karriere"] .wa-b--r3 { --x: 6; --y: 76; --w: 46; --h: 10; }
.wa-stage[data-art="karriere"] .wa-b--r em { display: none; }
.wa-stage[data-art="karriere"] .wa-b--r b { width: 30%; }
.wa-stage[data-art="karriere"] .wa-b--r s { width: 16%; }
.wa-stage[data-art="karriere"] .wa-b--r u { display: block; width: 14%; height: 1.5em; margin-left: auto; border: 1.5px solid var(--wa-ink); border-radius: .35em; }
.wa-stage[data-art="karriere"] .wa-b--r u + u { margin-left: 0; width: 11%; }
.wa-stage[data-art="karriere"] .wa-b--feat { --x: 57; --y: 50; --w: 37; --h: 36; }
.wa-stage[data-art="karriere"] .wa-f--upload { opacity: 1; }

/* ---------- Navigation: Mega-Menü und Seitenmenü ---------- */
.wa-mega {
  position: absolute; z-index: 4; left: 14%; top: 13%; width: 56%; height: 38%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6%; padding: 3.2% 3.6%;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0 0 .6em .6em;
  box-shadow: 0 1.4em 2em -1.4em rgba(20, 20, 20, .45);
  transform-origin: top center; transform: scaleY(.4); opacity: 0; pointer-events: none;
  transition: transform .2s var(--ease), opacity .2s;
}
.wa-mega em { display: flex; flex-direction: column; gap: .8em; }
.wa-mega b { height: .55em; width: 64%; border-radius: .2em; background: var(--ink); }
.wa-mega s { height: .4em; width: 88%; border-radius: .2em; background: var(--wa-soft); text-decoration: none; }
.wa-mega s:nth-of-type(2) { width: 70%; } .wa-mega s:nth-of-type(3) { width: 80%; }
.wa-stage[data-nav="mega"] .wa-mega { transform: none; opacity: 1; }

.wa-drawer {
  position: absolute; z-index: 5; top: 14%; right: 0; bottom: 0; width: 34%;
  display: flex; flex-direction: column; gap: 1.3em; padding: 3.6% 3%;
  background: var(--paper); border-left: 1.5px solid var(--ink); box-shadow: -1.2em 0 2em -1.4em rgba(20, 20, 20, .5);
  transform: translateX(104%); transition: transform .28s var(--ease);
}
.wa-drawer b { align-self: flex-end; width: 1.3em; height: 1.3em; margin-bottom: .6em; background:
  linear-gradient(45deg, transparent 44%, var(--ink) 44%, var(--ink) 56%, transparent 56%),
  linear-gradient(-45deg, transparent 44%, var(--ink) 44%, var(--ink) 56%, transparent 56%); }
.wa-drawer s { height: .6em; width: 70%; border-radius: .2em; background: var(--ink); text-decoration: none; }
.wa-drawer s:nth-of-type(2) { width: 54%; } .wa-drawer s:nth-of-type(3) { width: 78%; } .wa-drawer s:nth-of-type(4) { width: 46%; }
.wa-drawer u { margin-top: auto; height: 2.2em; border-radius: .45em; background: var(--orange); text-decoration: none; }
.wa-stage[data-nav="drawer"] .wa-drawer { transform: none; }

/* ---------- Anmerkung (Pfeil + Label) ---------- */
.wa-note { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.wa-note__label {
  position: absolute; left: calc(var(--nx, 60) * 1%); top: calc(var(--ny, 40) * 1%);
  padding: .45em .7em; border: 1.5px solid var(--ink); border-radius: .3em;
  background: var(--lime); color: var(--ink); font: 700 max(1.05em, 8.5px)/1.1 var(--f-body); white-space: nowrap;
  transform: rotate(-2.5deg); box-shadow: .25em .3em 0 rgba(20, 20, 20, .14);
}
.wa-note__arrow {
  position: absolute; left: calc(var(--ax, 70) * 1%); top: calc(var(--ay, 44) * 1%);
  width: 5.8em; height: 3.9em; overflow: visible;
  transform: rotate(var(--ar, 0deg)) scale(var(--asx, 1), var(--asy, 1)); transform-origin: 10% 15%;
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wa-note__arrow path { stroke-dasharray: 80; stroke-dashoffset: 0; }
.wa-stage.is-noting .wa-note { animation: wa-note-in .22s var(--ease) .2s both; }
.wa-stage.is-noting .wa-note__arrow path { animation: wa-draw .3s var(--ease) .26s both; }
@keyframes wa-note-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wa-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }

.wa-stage[data-art="web-visitenkarte"] .wa-note { --nx: 60; --ny: 44; --ax: 78; --ay: 50.5; --ar: 8deg; }
.wa-stage[data-art="onepager"] .wa-note { --nx: 60; --ny: 18.5; --ax: 80; --ay: 22; --ar: 4deg; }
.wa-stage[data-art="firmenportraet"] .wa-note { --nx: 44; --ny: 46.5; --ax: 71; --ay: 51; --ar: 12deg; }
.wa-stage[data-art="online-shop"] .wa-note { --nx: 72.5; --ny: 23; --ax: 84; --ay: 17; --ar: -78deg; --asy: -1; }
.wa-stage[data-art="landingpage"] .wa-note { --nx: 26; --ny: 84; --ax: 49; --ay: 82; --ar: -20deg; }
.wa-stage[data-art="portal"] .wa-note { --nx: 70; --ny: 21; --ax: 86; --ay: 14.5; --ar: -62deg; --asy: -1; }
.wa-stage[data-art="karriere"] .wa-note { --nx: 50; --ny: 45; --ax: 72; --ay: 50; --ar: 18deg; }
/* Schmale Skizze (Handy): Label hat eine Mindestgröße – längere Anmerkungen weiter nach links */
@container (max-width: 480px) {
  .wa-stage[data-art="onepager"] .wa-note { --nx: 26; }
  .wa-stage[data-art="web-visitenkarte"] .wa-note { --nx: 52; }
}

/* ---------- Handy-Rahmen ---------- */
.wa-phone { position: absolute; right: 0; bottom: 0; width: 19%; z-index: 2; }
.wa-ph-screen {
  position: relative; aspect-ratio: 9 / 18.6; overflow: hidden;
  display: flex; flex-direction: column; padding: 14% 8% 0;
  border: 1.5px solid var(--wa-ink); border-radius: 16% / 8%; background: var(--paper);
  box-shadow: 0 18px 36px -22px rgba(60, 30, 10, .45);
  container-type: inline-size; font-size: 7px; font-size: clamp(5px, 5.4cqw, 9px);
}
.wa-ph-screen::before { content: ""; position: absolute; left: 38%; right: 38%; top: 4.5%; height: 1.6%; border-radius: 99px; background: var(--wa-soft); }
.wa-ph-head { display: flex; align-items: center; gap: 5%; height: 8%; flex: none; border-bottom: 1px solid var(--wa-soft); }
.wa-ph-head > i { display: block; flex: none; }
.wa-ph-logo { width: 2em; height: 2em; border-radius: .3em; background: var(--orange); }
.wa-ph-sp { flex: 1 1 auto !important; }
.wa-ph-burger { width: 2.2em; height: 1.4em; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); position: relative; }
.wa-ph-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink); transform: translateY(-50%); }
.wa-ph-cart, .wa-ph-login { width: 2.4em; height: 2.4em; border: 1.5px solid var(--ink); border-radius: .4em; background: var(--lime); display: none !important; }
.wa-ph-screen[data-nav="ohne"] .wa-ph-burger { display: none; }
.wa-ph-screen[data-art="online-shop"] .wa-ph-cart,
.wa-ph-screen[data-art="portal"] .wa-ph-login { display: block !important; }
.wa-ph-body { flex: 1 1 auto; min-height: 0; padding: 8% 0 18%; }
.wa-ph-art { display: none; flex-direction: column; gap: 5%; height: 100%; }
.wa-ph-screen[data-art="web-visitenkarte"] [data-for="web-visitenkarte"],
.wa-ph-screen[data-art="onepager"] [data-for="onepager"],
.wa-ph-screen[data-art="firmenportraet"] [data-for="firmenportraet"],
.wa-ph-screen[data-art="online-shop"] [data-for="online-shop"],
.wa-ph-screen[data-art="landingpage"] [data-for="landingpage"],
.wa-ph-screen[data-art="portal"] [data-for="portal"],
.wa-ph-screen[data-art="karriere"] [data-for="karriere"] { display: flex; }
.wa-ph-art > i { display: block; flex: none; border-radius: .4em; position: relative; }
.wa-ph-art s, .wa-ph-art b, .wa-ph-art u { display: block; text-decoration: none; }
.ph-hero { height: 30%; background: var(--peach); border: 1.5px solid var(--wa-ink); }
.ph-hero--tall { height: 40%; }
.ph-hero--short { height: 24%; }
.ph-row, .ph-sec { height: 7%; border: 1.5px solid var(--wa-ink); background: var(--paper); }
.ph-sec { height: 14%; border-width: 0 0 0 3px; border-radius: 0; background: linear-gradient(var(--wa-soft), var(--wa-soft)) 12% 30% / 50% 18% no-repeat, linear-gradient(var(--wa-soft), var(--wa-soft)) 12% 75% / 76% 14% no-repeat; }
.ph-map { height: 24%; background: var(--lime); border: 1.5px solid var(--ink); }
.ph-map s { position: absolute; left: 44%; top: 26%; width: 2em; height: 2em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); border: 1.5px solid var(--ink); }
.ph-dots { position: absolute !important; right: 2%; top: 44%; width: 1.4em; height: 12em; display: flex !important; flex-direction: column; justify-content: space-evenly; align-items: center; background: var(--lime); border: 1.5px solid var(--ink); }
.ph-dots s { width: .55em; height: .55em; border-radius: 50%; background: var(--ink); opacity: .35; }
.ph-dots s:first-child { opacity: 1; }
.ph-card { height: 22%; background: var(--paper); border: 1.5px solid var(--wa-ink); box-shadow: .5em -.5em 0 -1.5px var(--lime), .5em -.5em 0 0 var(--ink); margin-right: .6em; }
.ph-banner { height: 14%; background: var(--peach); border: 1.5px solid var(--wa-ink); }
.ph-prods { height: 58%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6%; }
.ph-prods s { border: 1.5px solid var(--wa-ink); border-radius: .4em; background: linear-gradient(var(--peach), var(--peach)) 50% 12% / 76% 50% no-repeat, var(--paper); }
.ph-form { height: 46%; background: var(--lime); border: 1.5px solid var(--ink); display: flex !important; flex-direction: column; gap: 8%; padding: 10%; }
.ph-form b { display: flex !important; gap: 8%; }
.ph-form b s { width: 1.6em; height: 1.6em; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); }
.ph-form b s:first-child { background: var(--ink); }
.ph-form u { height: 2.2em; border: 1.5px solid var(--ink); border-radius: .3em; background: var(--paper); }
.ph-loginbtn { height: 9%; width: 70%; align-self: center; background: var(--lime); border: 1.5px solid var(--ink); }
.ph-job { height: 9%; border: 1.5px solid var(--wa-ink); background: var(--paper); }
.ph-upload { height: 22%; background: var(--lime); border: 1.5px dashed var(--ink); }
.wa-ph-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  display: grid; place-items: center; background: var(--orange); color: var(--ink);
  font: 700 1.25em/1 var(--f-body); font-style: normal; white-space: nowrap;
  border-top: 1.5px solid var(--ink); transform: translateY(102%); transition: transform var(--wa-t) var(--ease);
}
.wa-ph-screen[data-sticky="1"] .wa-ph-bar { transform: none; }

/* ---------- Schriftfeld ---------- */
.wa__titleblock {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  width: min(300px, 100%); margin: 16px 0 0 auto;
  border: 1.5px solid var(--ink); background: var(--paper); font-size: .78rem; line-height: 1.25;
}
.wa__titleblock > div { display: contents; }
.wa__titleblock dt, .wa__titleblock dd { margin: 0; padding: 6px 10px; border-top: 1px solid var(--ink); }
.wa__titleblock > div:first-child dt, .wa__titleblock > div:first-child dd { border-top: 0; }
.wa__titleblock dt { color: var(--muted); border-right: 1px solid var(--ink); }
.wa__titleblock dd { font-weight: 700; font-family: var(--f-display); font-stretch: 100%; }

/* ---------- Navigation ausprobieren ---------- */
.wa__nav { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.wa__legend { padding: 0; margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 1.05rem; }
/* Aufklapp-Knopf nur schmal (< 900 px), siehe unten; breit steht nur der Legendentext */
.wa__navtoggle { display: none; }
.wa__navbody[hidden] { display: none; }
.wa-seg {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl); overflow: hidden; background: var(--paper);
}
.wa-seg__opt { position: relative; display: flex; min-width: 0; }
.wa-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wa-seg__txt {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: var(--ctl-h); padding: 6px 6px; text-align: center;
  font-size: .86rem; font-weight: 600; line-height: 1.15; border-left: 1px solid var(--line-strong);
  transition: background .2s, color .2s;
}
.wa-seg__opt:first-child .wa-seg__txt { border-left: 0; }
.wa-seg__rec { font-size: .72rem; font-weight: 500; color: var(--muted); }
.wa-seg__opt input:hover + .wa-seg__txt { background: var(--peach-2); }
.wa-seg__opt input:checked + .wa-seg__txt { background: var(--ink); color: #fff; }
.wa-seg__opt input:checked + .wa-seg__txt .wa-seg__rec { color: var(--lime); }
.wa-seg__opt input:focus-visible + .wa-seg__txt { outline: 3px solid var(--ink); outline-offset: -4px; }
.wa-seg__opt input:checked:focus-visible + .wa-seg__txt { outline-color: var(--lime); }

.wa-switchrow { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin-top: 14px; }
.wa-switchrow > .wa-switch { flex: 0 1 auto; min-width: 0; }
/* Erklärung neben dem Schalter nur, wenn sie genug Breite hat – sonst darunter (lange Leisten-Namen) */
.wa-switchrow > .wa-switch__text { flex: 1 1 260px; min-width: 0; }
.wa-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.wa-switch input { position: absolute; left: 0; top: 50%; width: 48px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.wa-switch__track { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--paper); transition: background .2s; }
.wa-switch__track span { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--ink); transition: transform .2s var(--ease), background .2s; }
.wa-switch input:checked + .wa-switch__track { background: var(--ink); }
.wa-switch input:checked + .wa-switch__track span { transform: translateX(20px); background: var(--lime); }
.wa-switch input:focus-visible + .wa-switch__track { outline: 3px solid var(--ink); outline-offset: 3px; }
.wa-switch__text { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.wa-navtext { margin-top: 12px; }
.wa-navtext p { margin: 0; font-size: .92rem; line-height: 1.5; }
.wa-hint { margin: 10px 0 0; font-size: .9rem; line-height: 1.45; }
.wa-hint:not(:empty) { padding: 8px 12px; border-left: 4px solid var(--orange); background: var(--paper); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wa-navnote { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }

/* ---------- Panels ---------- */
.wa:not(.wa--ready) .wa__panels {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 20px;
}
.wa:not(.wa--ready) .wa-panel { padding: 22px; border-radius: var(--r-md); background: var(--paper); }
.wa-panel { min-width: 0; }
.wa-panel[hidden] { display: none !important; }
.wa-panel:focus-visible { outline-offset: 6px; border-radius: 6px; }
.wa-panel__name { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.05; }
.wa-panel__claim { margin: 8px 0 0; font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.wa-panel__buy { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.wa-price { margin: 0; align-items: baseline; }
.wa-price__from { font-weight: 600; }
.wa-price .price__value { font-size: clamp(1.8rem, 2.5vw, 2.2rem); }
.wa-panel__buy .price__note { margin: 4px 0 0; line-height: 1.45; }
.wa-cta { margin-top: 14px; justify-content: space-between; white-space: normal; text-align: left; line-height: 1.15; padding-left: 1.3em; font-size: .92rem; }
.wa-panel__body { margin-top: 18px; }
.wa-panel__text { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.wa-facts { margin: 16px 0 0; display: grid; gap: 12px; }
.wa-facts dt { font-family: var(--f-display); font-weight: 700; font-stretch: 100%; font-size: .84rem; }
.wa-facts dd { margin: 3px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.wa-list { margin: 0; padding: 0; }
.wa-list li { position: relative; padding-left: 16px; }
.wa-list li + li { margin-top: 2px; }
.wa-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--orange-deep); }
.wa-adds { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.wa-adds a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.wa-adds a:hover { text-decoration-color: var(--ink); }
.wa-sitemap ul { margin: 0; padding: 0; list-style: none; }
.wa-sitemap > ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.wa-sitemap li { font-size: .88rem; }
.wa-sitemap li > span { font-weight: 600; }
.wa-sitemap ul ul { display: block; margin: 2px 0 2px 5px; padding-left: 10px; border-left: 1.5px solid var(--line-strong); }
.wa-sitemap ul ul li > span { font-weight: 400; }
.wa-sitemap li.is-muted > span { color: var(--muted); font-weight: 400; }
.wa-sitemap li.is-strong > span { font-weight: 800; }
.wa-panel__ref { margin: 14px 0 0; font-size: .9rem; line-height: 1.5; }
.wa-panel__ref a { font-weight: 600; color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.wa-panel__own { color: var(--muted); }

.wa__mix { margin: 18px 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.wa__mix a { color: var(--ink); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.wa__foot { margin-top: 14px; max-width: 110ch; }

/* Navigations-Erklärungen ohne JS */
.wa.wa--ready .wa__navlist { display: none; }
.wa__navlist { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px 24px; }
.wa__navlist dt { font-family: var(--f-display); font-weight: 800; font-size: .95rem; }
.wa__navlist dd { margin: 3px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.wa__navlist-note { grid-column: 1 / -1; }
.wa__navlist-note dd { color: var(--muted); }

/* ==========================================================================
   Layouts mit JS
   ========================================================================== */

/* ≥ 1280 px: Reiter links (Register), Blatt Mitte, Panel rechts.
   Blatt und „Navigation ausprobieren“ liegen in eigenen Grid-Zeilen (.wa__work wird aufgelöst): Das Blatt ist
   so hoch wie die Reiter-Zeile (die Ohren schließen an), die Navigation steht direkt darunter, und ein langes
   Panel wächst in die freie dritte Zeile – nichts ragt aus der Box, nichts liegt über der Fußnote. */
@media (min-width: 1280px) {
  .wa.wa--ready .wa__box {
    grid-template-columns: 196px minmax(0, 1fr) 336px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "tabs sheet panels" "mix nav panels" ". . panels";
  }
  .wa.wa--ready .wa__work { display: contents; }
  .wa.wa--ready .wa__sheet { grid-area: sheet; min-width: 0; }
  .wa.wa--ready .wa__nav { grid-area: nav; min-width: 0; margin-top: 24px; }
  .wa.wa--ready .wa__mix { align-self: start; }
  .wa.wa--ready .wa__tablist { flex-direction: column; gap: 2px; }
  /* Platz unter dem letzten Reiter, damit sein unteres Ohr noch auf dem Blatt liegt */
  .wa.wa--ready .wa__tabs { padding-bottom: calc(var(--wa-ear) + 6px); }
  .wa.wa--ready .wa__tab { border-radius: var(--r-sm) 0 0 var(--r-sm); padding-right: 12px; }
  /* Konkave „Ohren“: der aktive Reiter geht nahtlos ins Blatt über */
  .wa.wa--ready .wa__tab[aria-selected="true"]::before,
  .wa.wa--ready .wa__tab[aria-selected="true"]::after {
    content: ""; position: absolute; right: 0; width: var(--wa-ear); height: var(--wa-ear); pointer-events: none;
  }
  .wa.wa--ready .wa__tab[aria-selected="true"]::before { bottom: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--wa-ear) - .5px), var(--paper) var(--wa-ear)); }
  .wa.wa--ready .wa__tab[aria-selected="true"]::after { top: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--wa-ear) - .5px), var(--paper) var(--wa-ear)); }
  .wa.wa--ready .wa__tabitem:first-child .wa__tab::before { display: none; }
  .wa.wa--ready .wa__mix { padding-right: 20px; }
  .wa.wa--ready .wa__panels { padding-left: 30px; }
}

/* < 1280 px: Reiter waagerecht über dem Blatt */
@media (max-width: 1279px) {
  .wa.wa--ready .wa__tablist {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 var(--wa-ear);  /* Platz für die Ohren */
    margin: 0 calc(-1 * var(--wa-ear));
  }
  .wa.wa--ready .wa__tablist::-webkit-scrollbar { display: none; }
  .wa.wa--ready .wa__tabitem { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--wa-ear); }
  .wa.wa--ready .wa__tab { border-radius: var(--r-sm) var(--r-sm) 0 0; width: 11.5rem; justify-content: flex-start; }
  .wa.wa--ready .wa__tabname { white-space: nowrap; }
  .wa.wa--ready .wa__tab[aria-selected="true"]::before,
  .wa.wa--ready .wa__tab[aria-selected="true"]::after {
    content: ""; position: absolute; bottom: 0; width: var(--wa-ear); height: var(--wa-ear); pointer-events: none;
  }
  .wa.wa--ready .wa__tab[aria-selected="true"]::before { right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--wa-ear) - .5px), var(--paper) var(--wa-ear)); }
  .wa.wa--ready .wa__tab[aria-selected="true"]::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--wa-ear) - .5px), var(--paper) var(--wa-ear)); }
  .wa.wa--ready .wa__tabitem:first-child .wa__tab::before { display: none; }
  /* Hinweis „da ist noch mehr“ am rechten Rand */
  .wa.wa--ready .wa__tabs::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--wa-ear)); width: 44px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 234, 219, 0), var(--peach-2) 80%);
  }
  .wa.wa--ready .wa__panels { margin-top: 26px; }
  .wa.wa--ready .wa__mix { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
}

/* 900–1279 px: Panel zweispaltig (Text | Preis + CTA) */
@media (min-width: 900px) and (max-width: 1279px) {
  .wa.wa--ready .wa-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: 36px;
    grid-template-areas: "head buy" "body buy";
  }
  .wa.wa--ready .wa-panel__head { grid-area: head; }
  .wa.wa--ready .wa-panel__buy { grid-area: buy; align-self: start; margin-top: 0; }
  .wa.wa--ready .wa-panel__body { grid-area: body; }
}

/* < 900 px: alles untereinander, Umschalter Desktop | Handy */
@media (max-width: 899px) {
  .wa.wa--ready .wa__views {
    display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0 0 14px;
    border: 1.5px solid var(--ink); border-radius: var(--r-ctl); overflow: hidden; background: var(--paper);
  }
  .wa__view {
    min-height: 44px; min-width: 96px; padding: 0 16px; border: 0; background: transparent; color: var(--ink);
    font: 600 .9rem/1 var(--f-body); cursor: pointer;
  }
  .wa__view + .wa__view { border-left: 1px solid var(--line-strong); }
  .wa__view[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .wa__view:focus-visible { outline-offset: -4px; }
  .wa__view[aria-pressed="true"]:focus-visible { outline-color: var(--lime); }
  .wa-stage { width: 100%; }
  .wa-phone { position: relative; width: min(170px, 52%); margin: 0 auto; right: auto; bottom: auto; }
  .wa__drawing[data-view="desktop"] .wa-phone,
  .wa__drawing[data-view="phone"] .wa-stage { display: none; }
  .wa-seg { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wa-seg__opt { grid-column: span 2; }
  .wa-seg__opt:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid var(--line-strong); }
  .wa-seg__opt:nth-child(4) .wa-seg__txt { border-left: 0; }
  .wa-switchrow { display: grid; grid-template-columns: minmax(0, 1fr); }
  .wa-cta { width: 100%; }
  /* „Navigation ausprobieren“ klappbar: Name, Preis und CTA der Art folgen direkt unter der Skizze */
  .wa.wa--ready .wa__nav { margin-top: 14px; }
  .wa.wa--ready .wa__legend { width: 100%; margin: 0; }
  .wa.wa--ready .wa__legendtext { display: none; }
  .wa.wa--ready .wa__navtoggle {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    width: 100%; min-height: 56px; padding: 9px 14px 9px 16px;
    border: 1.5px solid var(--ink); border-radius: var(--r-ctl); background: var(--paper); color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
    transition: background .2s;
  }
  .wa__navtoggle:hover { background: var(--peach-2); }
  .wa__navtoggle:focus-visible { outline-offset: 3px; }
  .wa__navtoggle-label { grid-column: 1; font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 1rem; line-height: 1.25; }
  .wa__navtoggle-state { grid-column: 1; font-size: .84rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
  .wa__navtoggle-icon { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; transition: transform .2s var(--ease); }
  .wa__navtoggle[aria-expanded="true"] .wa__navtoggle-icon { transform: rotate(180deg); }
  .wa.wa--ready .wa__navbody { padding-top: 14px; }
}
@media (max-width: 679px) {
  .wa__titleblock { display: none; }
  .wa__sheet { padding: 12px; }
}
@media (max-width: 420px) {
  .wa-seg__txt { font-size: .78rem; padding: 5px 3px; hyphens: manual; -webkit-hyphens: manual; }
  .wa.wa--ready .wa__tab { width: 10.4rem; padding: 10px 12px; }
}

/* Bewegung: globale Regel in app.css setzt Übergänge schon auf 0; hier zusätzlich die Scroll-Demo. */
@media (prefers-reduced-motion: reduce) {
  .wa-canvas { transition: none; }
}
html.reduce-motion .wa-canvas { transition: none; }