/* Matrix Marketing – Schaustücke der Leistungsseiten (12.10.2026, Gutachten: «Die vier Leistungsseiten sind Abschnitt für
   Abschnitt gleich gebaut … Für 9,5 braucht jede Seite ein eigenes Schaustück»). Jede Seite zeigt ihr Handwerk anders:
   /logo-ci       Zeichenbühne «Vom Strich zum Zeichen» (Marke Halbschatten: Idee, Konstruktion, Zeichen, Einsatz)
   /flyer         Blickführung am Flyer KONTER (Blickfang, Bild, Angebot, nächster Schritt)
   /social-media  Instagram-Profil zum Durchwischen (Gasthaus Lärchenbüel: Raster, Beiträge, Story)
   /webdesign     Websites auf Computer und Handy, beide Bildschirme blättern mit
   Steuerung: assets/js/schaustueck.js. Ohne JavaScript und bei «weniger Bewegung» steht jedes Schaustück still im Endbild.
   Gleiche Regeln wie überall: Haarlinien, Gold für das Aktive, Schrift nie unter 12 px. Runde Formen nur, wo ein Gerät
   (Handy) oder ein Punkt dargestellt ist. */

/* ------------------------------------------------------------------ Schritt-Wahl (Logo, Flyer): Titel und Text, der aktive in Gold */
.schritte-wahl { width: 100%; margin-top: 4px; border-top: 1px solid var(--linie); }
.schritte-wahl li { border-bottom: 1px solid var(--linie); }
.schritte-wahl__knopf {
  position: relative; display: grid; gap: 6px; width: 100%; padding: 15px 0 17px;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.schritte-wahl__titel {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grau); transition: color .35s var(--ease);
}
.schritte-wahl__text { font-size: 15px; line-height: 1.55; color: var(--grau); text-wrap: pretty; transition: color .35s var(--ease); }
.schritte-wahl__knopf::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
}
.schritte-wahl__knopf[aria-pressed="true"] .schritte-wahl__titel { color: var(--gold); }
.schritte-wahl__knopf[aria-pressed="true"] .schritte-wahl__text { color: var(--elfenbein); }
.schritte-wahl__knopf[aria-pressed="true"]::after { transform: scaleX(1); }
.is-takt .schritte-wahl__knopf[aria-pressed="true"]::after { animation: sw-takt var(--dauer, 4s) linear both; }
@keyframes sw-takt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .schritte-wahl__knopf:hover .schritte-wahl__titel { color: var(--gold-hell); }
}
@media (min-width: 1024px) { .schritte-wahl__text { font-size: 15.5px; } }

/* ------------------------------------------------------------------ /logo-ci: Zeichenbühne */
/* Die Bildmarke (fünf Bögen) liegt als SVG in den Koordinaten der Logo-Datei; .zb__marke setzt sie gross in die Mitte
   (Schritte 1–2) oder als ganzes Logo mit Wortmarke (Schritt 3). Schritt 4 blendet das Anwendungsfoto ein. */
.zb__buehne { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #121110; border: 1px solid var(--linie); }
.zb__zeichnung { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s var(--ease); }
.zb__marke { transform: translate(12.66px, 90.32px) scale(.8739); transition: transform 1.1s var(--ease); }
.zb__wortlage { transform: translate(12.66px, 90.32px) scale(.8739); }           /* Wortmarke steht nur im ganzen Logo, nie in der grossen Bildmarke */
.zb__buehne[data-schritt="0"] .zb__marke,
.zb__buehne[data-schritt="1"] .zb__marke,
.zb__buehne[data-schritt="2"] .zb__marke { transform: translate(13.79px, 87.59px) scale(1.8247); }   /* Runde 6: 25 Einheiten tiefer – Bögen, Masslinie und Masse senkrecht mittig (vorher unteres Drittel leer) */

.zb__umriss path {
  fill: none; stroke: #F3ECE0; stroke-width: .42; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease), opacity .6s var(--ease);
}
.zb__umriss path:nth-child(2) { transition-delay: .16s, 0s; }
.zb__umriss path:nth-child(3) { transition-delay: .32s, 0s; }
.zb__umriss path:nth-child(4) { transition-delay: .48s, 0s; }
.zb__umriss path:nth-child(5) { transition-delay: .64s, 0s; }
.zb__buehne[data-schritt="1"] .zb__umriss path,
.zb__buehne[data-schritt="2"] .zb__umriss path { stroke-dashoffset: 0; }
.zb__buehne[data-schritt="3"] .zb__umriss path,
.zb__buehne[data-schritt="4"] .zb__umriss path { stroke-dashoffset: 0; opacity: 0; }

/* Schritt «Idee»: Licht und Schatten in den Bögen, von links hell nach rechts im Schatten */
.zb__licht path { fill: #F3ECE0; opacity: 0; transition: opacity 1s var(--ease) .5s; }
.zb__buehne[data-schritt="1"] .zb__licht path:nth-child(1) { opacity: .2; }
.zb__buehne[data-schritt="1"] .zb__licht path:nth-child(2) { opacity: .14; }
.zb__buehne[data-schritt="1"] .zb__licht path:nth-child(3) { opacity: .09; }
.zb__buehne[data-schritt="1"] .zb__licht path:nth-child(4) { opacity: .045; }
.zb__buehne[data-schritt="1"] .zb__licht path:nth-child(5) { opacity: .015; }

/* Name des Schritts oben links auf der Bühne */
.zb__etikett { position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none; }
.zb__etikett span {
  position: absolute; top: 0; left: 0; padding: 6px 9px; white-space: nowrap; background: rgba(10, 10, 10, .62);
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); opacity: 0; transition: opacity .45s var(--ease);
}
.zb__buehne[data-schritt="1"] .zb__etikett span:nth-child(1), .zb__buehne[data-schritt="2"] .zb__etikett span:nth-child(2),
.zb__buehne[data-schritt="3"] .zb__etikett span:nth-child(3), .zb__buehne[data-schritt="4"] .zb__etikett span:nth-child(4) { opacity: 1; }
@media (min-width: 1024px) {
  .ls-beispiel.zb { align-items: start; }
  .zb .ls-beispiel__text { padding-bottom: 0; }
}

.zb__hilfs, .zb__innen { opacity: 0; transition: opacity .7s var(--ease); }
.zb__hilfs line, .zb__hilfs circle, .zb__innen path { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.zb__hilfs line, .zb__hilfs circle { stroke-opacity: .42; }
.zb__hilfs .zb__mass-linie { stroke-opacity: .9; }
.zb__innen path { stroke-opacity: .85; }
.zb__buehne[data-schritt="2"] .zb__hilfs, .zb__buehne[data-schritt="2"] .zb__innen { opacity: 1; }

.zb__flaeche path, .zb__wort path { fill: #F3ECE0; }
.zb__flaeche path { opacity: 0; transition: opacity .8s var(--ease); }
.zb__flaeche path:nth-child(2) { transition-delay: .1s; }
.zb__flaeche path:nth-child(3) { transition-delay: .2s; }
.zb__flaeche path:nth-child(4) { transition-delay: .3s; }
.zb__flaeche path:nth-child(5) { transition-delay: .4s; }
.zb__wort { opacity: 0; transition: opacity .8s var(--ease) .45s; }
.zb__buehne[data-schritt="3"] .zb__flaeche path, .zb__buehne[data-schritt="4"] .zb__flaeche path,
.zb__buehne[data-schritt="3"] .zb__wort, .zb__buehne[data-schritt="4"] .zb__wort { opacity: 1; }

/* Masse (Schritt 2) und Kompaktzeichen (Schritt 3) als HTML über der Zeichnung: Schrift in festen px statt mitskaliert */
.zb__mass {
  position: absolute; top: 68.83%; transform: translateX(-50%);   /* Runde 6: mit der Bildmarke 25/300 tiefer (vorher 60.5 %) */
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: clamp(12px, .55rem + .45vw, 14px); line-height: 1;
  letter-spacing: .06em; white-space: nowrap; color: var(--gold); opacity: 0; transition: opacity .6s var(--ease);
  pointer-events: none;
}
.zb__mass--1 { left: 18.97%; }
.zb__mass--2 { left: 34.48%; }
.zb__mass--3 { left: 50%; }
.zb__mass--4 { left: 65.52%; }
.zb__mass--5 { left: 81.03%; }
.zb__mass--verhaeltnis { top: 29.83%; left: 18.97%; }
.zb__buehne[data-schritt="2"] .zb__mass { opacity: 1; transition-delay: .35s; }
.zb__klein {
  position: absolute; left: 50%; top: 61%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 24px); opacity: 0; transition: opacity .7s var(--ease);
  pointer-events: none;
}
.zb__klein svg { flex: none; fill: #F3ECE0; }
.zb__klein svg:nth-child(1) { width: 28px; height: 40px; }
.zb__klein svg:nth-child(2) { width: 17px; height: 24px; }
.zb__klein svg:nth-child(3) { width: 11.4px; height: 16px; }
.zb__klein-text { align-self: center; font-size: 12px; line-height: 1.35; color: var(--grau); white-space: nowrap; }
.zb__buehne[data-schritt="3"] .zb__klein { opacity: 1; transition-delay: .7s; }

.zb__foto { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.zb__foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.zb__buehne[data-schritt="4"] .zb__foto { opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; }
.zb__buehne[data-schritt="4"] .zb__zeichnung { opacity: 0; }
@media (max-width: 599px) { .zb__umriss path { stroke-width: .7; } }

/* ------------------------------------------------------------------ /flyer: Blickführung am Flyer KONTER */
.bf__buehne { position: relative; }
.ls-beispiel__bild .bf__buehne img { aspect-ratio: 1600 / 2271; object-fit: cover; }
.bf__weg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bf__weg path {
  fill: none; stroke: var(--gold); stroke-width: .42; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease);
}
.bf__punkt {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(10, 10, 10, .42);
  opacity: 0; transform: scale(.55); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .4s var(--ease);
  pointer-events: none;
}
.bf__punkt::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--gold); }
.bf__punkt--1 { left: 50%; top: 13.2%; }
.bf__punkt--2 { left: 71%; top: 56.3%; }
.bf__punkt--3 { left: 58%; top: 81.5%; }   /* Runde 6: rechts neben «geht auf uns.» statt auf dem Satz (Wege 2 und 3 im HTML) */
.bf__punkt--4 { left: 86%; top: 89.8%; }
/* Schritt n: Punkte 1 … n stehen, der Weg bis n ist gezeichnet, der aktuelle Punkt ist voll */
.bf__buehne[data-schritt="1"] .bf__punkt--1,
.bf__buehne[data-schritt="2"] .bf__punkt--1, .bf__buehne[data-schritt="2"] .bf__punkt--2,
.bf__buehne[data-schritt="3"] .bf__punkt--1, .bf__buehne[data-schritt="3"] .bf__punkt--2, .bf__buehne[data-schritt="3"] .bf__punkt--3,
.bf__buehne[data-schritt="4"] .bf__punkt { opacity: .6; transform: scale(.72); }
.bf__buehne[data-schritt="1"] .bf__punkt--1, .bf__buehne[data-schritt="2"] .bf__punkt--2,
.bf__buehne[data-schritt="3"] .bf__punkt--3, .bf__buehne[data-schritt="4"] .bf__punkt--4 { opacity: 1; transform: none; background: rgba(10, 10, 10, .55); }
.bf__buehne[data-schritt="2"] .bf__weg--1,
.bf__buehne[data-schritt="3"] .bf__weg--1, .bf__buehne[data-schritt="3"] .bf__weg--2,
.bf__buehne[data-schritt="4"] .bf__weg path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bf__punkt::before {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0;
  }
  .bf__buehne[data-schritt="1"] .bf__punkt--1::before, .bf__buehne[data-schritt="2"] .bf__punkt--2::before,
  .bf__buehne[data-schritt="3"] .bf__punkt--3::before, .bf__buehne[data-schritt="4"] .bf__punkt--4::before { animation: bf-puls 2.2s var(--ease) infinite; }
}
@keyframes bf-puls { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.bf__druck { max-width: 34em; font-size: 14.5px; line-height: 1.55; color: var(--grau); text-wrap: pretty; }
.bf__druck strong { font-weight: 600; color: var(--text-2); }
@media (min-width: 1024px) {
  .ls-beispiel.bf { align-items: center; }
  .bf .ls-beispiel__bild { grid-column: 1 / span 5; }
  .bf .ls-beispiel__text { grid-column: 7 / -1; padding-bottom: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .bf .ls-beispiel__bild { grid-column: 1 / span 5; }
  .bf .ls-beispiel__text { grid-column: 7 / -1; }
}
@media (min-width: 600px) and (max-width: 1023px) { .bf .ls-beispiel__bild { max-width: 520px; } }

/* ------------------------------------------------------------------ /social-media: Instagram-Profil auf dem Handy */
.ig-buehne { display: grid; gap: 40px; margin-top: clamp(36px, 4.5vw, 64px); }
.ig-buehne > * { min-width: 0; }                 /* Handy 320–375: lange Wörter dürfen die Spalte nicht verbreitern */
.ig-buehne__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }   /* Flex: die Rasterlagen von .abschnitt__intro gelten hier nicht */
.ig-buehne__text .abschnitt__intro { max-width: 34em; padding-bottom: 0; }
.ig-buehne__text .titel { max-width: 12em; }
@media (min-width: 1024px) {
  .ig-buehne { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
  .ig-buehne__text { grid-column: 1 / span 6; }
  .ig { grid-column: 8 / -1; }
}
.ig { display: flex; justify-content: center; }
.ig__geraet {
  position: relative; width: min(100%, 300px); aspect-ratio: 9 / 18.6; padding: 9px;
  border-radius: 46px; background: #1B1B1C; border: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 600px) { .ig__geraet { width: 340px; padding: 10px; border-radius: 50px; } }
.ig__schirm {
  position: relative; height: 100%; overflow: hidden; border-radius: 37px; background: #000; color: #F5F5F5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--f-text); font-size: 13px; line-height: 1.35;
}
@media (min-width: 600px) { .ig__schirm { border-radius: 40px; } }
.ig__status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 36px;
  display: flex; align-items: center; justify-content: space-between; padding: 4px 28px 0 30px;
  font-weight: 600; font-size: 13px; background: #000;
}
.ig__status svg { width: 58px; height: 12px; fill: #F5F5F5; }
.ig__ansicht { position: absolute; inset: 36px 0 0; overflow-y: auto; scrollbar-width: none; }
.ig__ansicht::-webkit-scrollbar { display: none; }
.ig__ansicht[hidden] { display: none; }
.ig__kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: #000; }
.ig__kopf svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig__zurueck { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -12px; flex: none; }
span.ig__zurueck { width: 24px; margin-left: -2px; }                                /* im Profil nur Zeichen, kein Knopf */
.ig__name { flex: 1; min-width: 0; white-space: nowrap; font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
@media (min-width: 600px) { .ig__name { font-size: 15px; letter-spacing: 0; } }
.ig__kopf-icons { display: flex; gap: 14px; }
.ig__person { display: flex; align-items: center; gap: 16px; padding: 4px 14px 10px; }
.ig__bild {
  flex: none; width: 80px; height: 80px; padding: 3px; border-radius: 50%;
  background: conic-gradient(from 210deg, #8F7A4E, #E3D3AE, #C2B59B, #8F7A4E);
}
.ig__bild img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #000; object-fit: cover; }
.ig__bild:focus-visible { outline-offset: 2px; }
.ig__wer { min-width: 0; display: grid; gap: 2px; }
.ig__firma { font-weight: 600; font-size: 14px; }
.ig__art { font-size: 13px; color: #A8A8A8; }
.ig__bio { padding: 0 14px; font-size: 13px; line-height: 1.4; }
.ig__link { display: block; margin-top: 2px; font-weight: 600; color: #E0F1FF; }
.ig__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 14px 14px; }
.ig__knoepfe span { display: block; padding: 7px 0; border-radius: 8px; background: #262626; text-align: center; font-weight: 600; font-size: 13px; }
.ig__knoepfe span:first-child { background: #0095F6; color: #fff; }
.ig__highlights { display: flex; gap: 12px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none; }
.ig__highlights::-webkit-scrollbar { display: none; }
.ig__highlights li { flex: none; width: 70px; display: grid; justify-items: center; gap: 5px; font-size: 12px; line-height: 1.2; text-align: center; }
.ig__highlights img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #000; outline: 1px solid #3A3A3A; outline-offset: 1px; object-fit: cover; }
.ig__reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #1F1F1F; }
.ig__reiter span { display: flex; justify-content: center; padding: 9px 0 10px; color: #8A8A8A; }
.ig__reiter span:first-child { color: #F5F5F5; box-shadow: inset 0 -1px 0 #F5F5F5; }
.ig__reiter svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ig__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ig__raster button { display: block; width: 100%; -webkit-tap-highlight-color: transparent; }
.ig__raster img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #121212; transition: opacity .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .ig__raster button:hover img { opacity: .82; } }
.ig__raster button:focus-visible { outline-offset: -3px; }
/* Beiträge: seitlich wischen */
.ig__band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ig__band::-webkit-scrollbar { display: none; }
.ig__band:focus-visible { outline-offset: -3px; }
.ig__beitrag { flex: none; width: 100%; scroll-snap-align: start; }
.ig__beitrag-kopf { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-weight: 600; font-size: 13px; }
.ig__beitrag-kopf img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ig__beitrag > img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #121212; }
.ig__aktionen { display: flex; gap: 16px; padding: 10px 12px 4px; }
.ig__aktionen svg { width: 24px; height: 24px; fill: none; stroke: #F5F5F5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ig__aktionen svg:last-child { margin-left: auto; }
.ig__text { padding: 4px 12px 14px; font-size: 13px; line-height: 1.4; }
.ig__text b { font-weight: 600; margin-right: 5px; }
.ig__pos { padding: 0 12px 16px; font-size: 12px; color: #8A8A8A; }
/* Story: über dem ganzen Bildschirm */
.ig__story { inset: 0; z-index: 3; overflow: hidden; background: #000; }
.ig__story-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig__story-bild[hidden] { display: none; }
.ig__balken { position: absolute; top: 14px; left: 12px; right: 12px; z-index: 2; display: flex; gap: 4px; }
.ig__balken span { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 1px; background: rgba(255, 255, 255, .38); }
.ig__balken span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; }
.ig__balken span.is-voll::after { transform: none; }
.ig__balken span.is-laeuft::after { animation: sw-takt 5s linear both; }
.ig.is-still .ig__balken span.is-laeuft::after { animation: none; transform: none; }
.ig__story-kopf {
  position: absolute; top: 24px; left: 12px; right: 4px; z-index: 2;
  display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px; text-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
.ig__story-kopf img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ig__story-kopf span { flex: 1; min-width: 0; }
.ig__zu { position: relative; width: 44px; height: 44px; flex: none; }
.ig__zu::before, .ig__zu::after { content: ""; position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); }
.ig__zu::after { transform: rotate(-45deg); }
.ig__tippen { position: absolute; top: 70px; bottom: 0; z-index: 1; width: 50%; -webkit-tap-highlight-color: transparent; }
.ig__tippen--zurueck { left: 0; }
.ig__tippen--weiter { right: 0; }
.ig__tippen:focus-visible { outline-offset: -4px; }

/* Zweites Beispiel unter dem Handy: Fightsport Wil, Bild im Originalformat 16:10 */
.ig-weiter { margin-top: clamp(64px, 8vw, 120px); }
.ig-weiter .ls-beispiel__bild img { aspect-ratio: 16 / 10; }

/* ------------------------------------------------------------------ /webdesign: Websites auf Computer und Handy */
.wb { margin-top: clamp(36px, 4.5vw, 64px); }
.wb__wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3.5vw, 48px); }
.wb__knopf {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--linie-stark);
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grau); transition: color .3s var(--ease), border-color .3s var(--ease);
}
.wb__knopf[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }
@media (max-width: 599px) { .wb__knopf { flex: 1 1 auto; padding: 0 12px; letter-spacing: .08em; } }   /* Handy: Knöpfe füllen ihre Zeile */
@media (hover: hover) and (pointer: fine) { .wb__knopf:hover { color: var(--gold-hell); border-color: var(--gold); } }
.wb__seite { display: grid; gap: 28px; margin-top: 28px; }
.wb__seite[hidden] { display: none; }
.wb__seite + .wb__seite { margin-top: clamp(56px, 7vw, 104px); }
.wb.is-bereit .wb__seite + .wb__seite { margin-top: 28px; }
.wb__text { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 1024px) {        /* 12.10.2026: Text in fünf statt vier Spalten (die Titel passen auch am Tablet quer) */
  .wb__seite { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
  .wb__buehne { grid-column: 1 / span 7; }
  .wb__text { grid-column: 8 / -1; padding-bottom: 6px; }   /* fünf Spalten: mehr Platz für den Text */
}
.wb__buehne { position: relative; padding: 0 12% 9% 0; }
.wb__browser { border: 1px solid var(--linie-stark); background: #161616; }
.wb__leiste { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--linie); }
.wb__punkte { display: flex; gap: 6px; flex: none; }
.wb__punkte i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #3A3936; }
.wb__adresse {
  flex: 1; max-width: 22em; margin: 0 auto; padding: 3px 10px; background: #222120;
  font-size: 12px; line-height: 1.4; color: var(--grau); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb__schirm, .wb__handy-schirm { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; background: #fff; }
.wb__schirm::-webkit-scrollbar, .wb__handy-schirm::-webkit-scrollbar { display: none; }
.wb__schirm { aspect-ratio: 16 / 10; }
.wb__schirm img, .wb__handy-schirm img { width: 100%; height: auto; }
.wb__schirm:focus-visible, .wb__handy-schirm:focus-visible { outline-offset: -3px; }
.wb__handy {
  position: absolute; right: 0; bottom: 0; width: 26%; min-width: 118px; aspect-ratio: 9 / 19;
  padding: 6px; border-radius: 24px; background: #1B1B1C; border: 1px solid rgba(255, 255, 255, .12);
}
.wb__handy-schirm { height: 100%; border-radius: 18px; }
@media (min-width: 1024px) { .wb__handy { padding: 8px; border-radius: 32px; } .wb__handy-schirm { border-radius: 24px; } }
.wb__legende { margin-top: 18px; }

/* /webdesign: die Websites stehen im Seitenkopf in voller Breite (zweites Gutachten: «Kopfbild eher klein», jede
   Leistungsseite mit eigenem Leitelement weiter oben). Text links, «Auf dieser Seite» rechts, darunter die Bühne. */
.seitenkopf__buehne { position: relative; z-index: 1; margin-top: clamp(44px, 6vw, 88px); }
.seitenkopf__buehne .wb { margin-top: 0; }
.wb__kopf { margin-bottom: 4px; }
.wb__kopf + .wb__wahl { margin-top: 18px; }
/* 12.10.2026: der Seitenkopf von /webdesign folgt jetzt dem Raster der Leistungsseiten mit Kopfbild (seiten.css, seitenkopf--bild) */

/* ------------------------------------------------------------------ Weniger Bewegung: alles ohne Übergänge */
@media (prefers-reduced-motion: reduce) {
  .zb *, .bf *, .ig *, .wb * { transition: none !important; animation: none !important; }
  /* 13.10.2026: Auf /leistungen stehen die Bühnen ohne .zb/.bf (nur .zb__buehne, .bf__buehne) – dort zoomte die Bildmarke, Linien
     und Wege zeichneten sich und die Punkte wuchsen trotz «weniger Bewegung». Jetzt wechseln die Schritte nur mit Einblenden. */
  .zb__buehne *, .bf__buehne * { animation: none !important; }
  .zb__buehne .zb__marke { transition: none !important; }
  .zb__buehne .zb__umriss path { stroke-dashoffset: 0; transition: opacity .6s var(--ease) !important; }
  .zb__buehne[data-schritt="0"] .zb__umriss path { opacity: 0; }
  .bf__buehne .bf__weg path { stroke-dashoffset: 0; opacity: 0; transition: opacity .5s var(--ease) !important; }
  .bf__buehne[data-schritt="2"] .bf__weg--1,
  .bf__buehne[data-schritt="3"] .bf__weg--1, .bf__buehne[data-schritt="3"] .bf__weg--2,
  .bf__buehne[data-schritt="4"] .bf__weg path { opacity: 1; }
  .bf__buehne .bf__punkt { transition: opacity .5s var(--ease) !important; }
}
/* 13.10.2026: schmale Zeichenbühne (320 px und iPhone SE in Safari: 258–265 px breit) – «71 %» und «100 %» stiessen aneinander */
.zb__buehne { container-type: inline-size; }
@container (max-width: 330px) { .zb__mass { font-family: var(--f-text); font-stretch: normal; font-weight: 600; letter-spacing: .02em; } }   /* Archivo gibt es nur breit */
/* 12.10.2026, sechstes Gutachten («die Punkte wirken wie Flecken»): die Punkte tragen die Nummern der Liste daneben */
.bf__punkt { display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: var(--gold); border-color: var(--gold);
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12.5px; line-height: 1; color: var(--schwarz); }
.bf__punkt::after { content: none; }
.bf__buehne[data-schritt="1"] .bf__punkt--1, .bf__buehne[data-schritt="2"] .bf__punkt--2,
.bf__buehne[data-schritt="3"] .bf__punkt--3, .bf__buehne[data-schritt="4"] .bf__punkt--4 { background: var(--gold); box-shadow: 0 0 0 4px rgba(10, 10, 10, .45); }
/* 12.10.2026, siebtes Gutachten: der zweite Reiter der Website-Bühne lädt erst beim Antippen (vorher luden beide Reiter
   beim Öffnen der Seite, bevor das Skript den zweiten ausblendete) */
.js .wb:not(.is-bereit) .wb__seite ~ .wb__seite { display: none; }
/* 12.10.2026, achtes Gutachten: Handy und Tablet – die Website-Bildschirme fangen den Finger nicht mehr ein. Wischen bewegt
   die Seite; Antippen schaltet das Blättern im Bildschirm ein (nochmals antippen: aus), am Ende läuft die Seite weiter. */
@media (pointer: coarse) {
  .wb__schirm, .wb__handy-schirm { overflow-y: hidden; overscroll-behavior: auto; }
  .wb__buehne.is-blaettern .wb__schirm, .wb__buehne.is-blaettern .wb__handy-schirm { overflow-y: auto; }
  .wb__browser { position: relative; }
  .wb__tipp {
    position: absolute; left: 10px; bottom: 10px; z-index: 2; pointer-events: none;
    padding: 6px 10px; border: 1px solid var(--linie-stark); background: rgba(10, 10, 10, .88);
    font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; color: var(--elfenbein); white-space: nowrap;
  }
  .wb__buehne.is-blaettern .wb__tipp { border-color: var(--gold); color: var(--gold); }
}
/* 12.10.2026: Tablet quer – lange Wörter in den Zwischentiteln brechen an der weichen Trennstelle statt über den Rand */
.wb__text { min-width: 0; }
.wb__text .titel { overflow-wrap: break-word; }
.wb__branche + .titel { margin-top: -8px; }   /* Branche als kleine Zeile über dem Zwischentitel */

/* ================================================================== Runde 7 (14.10.2026, Leistungen/Arbeiten/Über uns) */
/* Instagram im Handy-Rahmen (/leistungen): vier Highlights ganz – vorher lief das vierte («Reservieren», EN «Book») rechts aus dem
   Bild; das fünfte entfällt */
.lr-handy .ig__highlights { overflow: hidden; justify-content: space-between; gap: 6px; }
.lr-handy .ig__highlights li { flex: 0 1 25%; width: auto; min-width: 0; }
.lr-handy .ig__highlights li:nth-child(n+5) { display: none; }
.lr-handy .ig__highlights img { width: min(60px, 100%); height: auto; aspect-ratio: 1; }