/* Fassung 0.8 in Bildern (fassung-08.html).
 *
 * Eine Seite, die 0.77 und 0.8 vergleicht, und zwar jede Aenderung auf die
 * Weise, in der man sie am besten sieht: Ueberblenden, Nebeneinander, Regler,
 * lebender Satz, Lupe. Farben und Schriften nur aus den
 * Marken von style.css; eckig wie der Rest der Edition, keine Kreise. */

.fb{max-width:72rem;margin:0 auto;padding:calc(var(--header-h) + 4rem) max(1.25rem,env(safe-area-inset-right,0px)) 5rem max(1.25rem,env(safe-area-inset-left,0px));color:var(--text-body);font-variant-numeric:oldstyle-nums proportional-nums}
.fb a{color:var(--accent)}
.fb a:hover{text-decoration:none;color:var(--text-ink)}
.fb-kopf{display:grid;gap:1rem;max-width:44rem;margin-bottom:3.5rem}
.fb-zurueck{font-size:.77rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted) !important}
.fb-zurueck:hover{color:var(--text-ink) !important}
.fb h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,5vw,3.9rem);line-height:1.02;color:var(--text-ink)}
.fb-lead{margin:0;font-size:1.13rem;line-height:1.62;text-wrap:pretty}
.fb-hinweis{margin:0;font-size:.9rem;color:var(--text-muted)}

.fb-zahlen{margin:0 0 5rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--rule)}
.fb-zahlen div{display:grid;gap:.15rem;padding:1.1rem 1.1rem 1.1rem 0;border-left:1px solid var(--rule)}
.fb-zahlen div:not(:first-child){padding-left:1.1rem}
.fb-zahlen div:first-child{border-left:0}
.fb-zahlen dt{order:2;font-size:.82rem;line-height:1.45;color:var(--text-muted)}
.fb-zahlen dd{order:1;margin:0;font-size:1.75rem;line-height:1.15;color:var(--text-ink);font-variant-numeric:lining-nums}
.fb-zahlen dd s{font-size:.6em;color:var(--text-muted);text-decoration-thickness:1px;margin-right:.35em}
@media (max-width:900px){
  .fb-zahlen{grid-template-columns:1fr 1fr}
  .fb-zahlen div:nth-child(odd){border-left:0;padding-left:0}
  .fb-zahlen div:nth-child(even){padding-left:1.1rem}
  .fb-zahlen div:nth-child(n+3){border-top:1px solid var(--rule)}
  .fb-zahlen div:last-child{grid-column:1/-1}
}

.fb-teil{display:grid;gap:1.4rem;margin-bottom:5.5rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.fb-teil > h2{margin:0;font-family:var(--font-body);font-size:clamp(1.65rem,2.6vw,2.2rem);font-weight:600;line-height:1.15;color:var(--text-ink)}
.fb-teil > p{margin:0;max-width:44rem;line-height:1.7;text-wrap:pretty}
.fb-ansicht{display:grid;gap:.8rem;margin:1rem 0 0}
.fb-ansicht h3{margin:0;font-family:var(--font-body);font-size:.77rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.fb-ansicht figcaption{font-size:.93rem;line-height:1.6;color:var(--text-muted);max-width:46rem}
.fb-ansicht figcaption b{color:var(--text-body);font-weight:600}
.fb-ansicht ul{margin:.3rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem}

/* Vergleich: oben 0.8, darueber 0.77 bis zum Regler */
.fb-vgl{position:relative;--p:50%;border:1px solid var(--rule);background:#1c1b20;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.fb-vgl img{display:block;width:100%;height:auto}
.fb-vgl .fb-vor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.fb-vgl .fb-vor img{height:100%;object-fit:cover;object-position:top}
.fb-vgl .fb-linie{position:absolute;top:0;bottom:0;left:var(--p);width:1px;background:var(--accent-gold);pointer-events:none}
.fb-vgl .fb-griff{position:absolute;top:50%;left:var(--p);width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border:1px solid var(--accent-gold);background:#1c1b20;color:#cbaa5c;display:grid;place-items:center;font-size:.85rem;letter-spacing:.12em;pointer-events:none}
.fb-vgl .fb-tafel{position:absolute;top:.75rem;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:.35rem .55rem;background:rgba(20,19,23,.86);color:#e8e3da;pointer-events:none;font-variant-numeric:lining-nums}
.fb-vgl .fb-tafel.l{left:.75rem}.fb-vgl .fb-tafel.r{right:.75rem}
.fb-vgl{cursor:ew-resize}
.fb-vgl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.fb-vgl input:focus-visible ~ .fb-griff{outline:2px solid var(--accent-gold);outline-offset:3px}


.fb-fuss{border-top:1px solid var(--rule);padding-top:1.2rem;font-size:.86rem;color:var(--text-muted);display:grid;gap:.4rem;max-width:46rem}

/* Neuigkeiten: Hinweis auf diese Seite oben in der Fassung 0.8 */
.fb-karte{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1.1rem;align-items:center;margin:.9rem 0 1.4rem;padding:.8rem;border:1px solid var(--rule);color:var(--text-body) !important;text-decoration:none;transition:border-color .2s}
.fb-karte:hover{border-color:var(--accent-gold);text-decoration:none}
.fb-karte img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.fb-karte b{display:block;color:var(--text-ink);font-weight:600;font-size:1rem}
.fb-karte span{font-size:.88rem;color:var(--text-muted);line-height:1.5}
@media (max-width:520px){.fb-karte{grid-template-columns:1fr}}

/* ── Gemeinsames: Etikett, Wortknopf, Schalter ─────────────────────────── */
.fb-etikett{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);font-variant-numeric:lining-nums}
.fb-etikett.neu{color:var(--accent-gold)}
.fb-erkl{margin:0;max-width:46rem;font-size:.97rem;line-height:1.65;text-wrap:pretty}
.fb-zeile-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem}
.fb-teil > .fb-zeile-kopf h2{margin:0;font-family:var(--font-body);font-size:clamp(1.65rem,2.6vw,2.2rem);font-weight:600;line-height:1.15;color:var(--text-ink)}
.fb-ansicht h4{margin:0 0 .9rem;font-size:.77rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);line-height:1.5}
.fb-wort,.fb-schalter button{font:inherit;font-size:.77rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-variant-numeric:lining-nums;color:var(--text-ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:.3rem 0 .25rem;cursor:pointer;transition:border-color .2s,color .2s}
.fb-wort:hover,.fb-schalter button:hover{border-bottom-color:var(--accent)}
.fb-schalter{display:flex;gap:1.3rem}
.fb-schalter button[aria-pressed="false"]{color:var(--text-muted)}
.fb-schalter button[aria-pressed="true"]{border-bottom-color:var(--accent-gold)}

/* ── Ueberblenden ──────────────────────────────────────────────────────── */
.fb-blende{position:relative;display:grid;border:1px solid var(--rule);background:#1c1b20;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fb-blende img{grid-area:1/1;display:block;width:100%;height:auto;transition:opacity .6s ease}
.fb-blende .fb-b-077{opacity:0}
.fb-blende[data-zeigt="077"] .fb-b-077,.fb-blende-gruppe[data-zeigt="077"] .fb-b-077{opacity:1}
.fb-blende-gruppe[data-zeigt="077"] .fb-blende .fb-b-077{opacity:1}
.fb-blende .fb-marke{position:absolute;top:.75rem;right:.75rem;padding:.35rem .55rem;background:rgba(20,19,23,.86);color:#cbaa5c;font-size:.7rem;font-weight:500;letter-spacing:.2em;font-variant-numeric:lining-nums;pointer-events:none}
.fb-blende .fb-marke::after{content:"0.8"}
.fb-blende[data-zeigt="077"] .fb-marke{color:#e8e3da}
.fb-blende[data-zeigt="077"] .fb-marke::after{content:"0.77"}

/* ── Nebeneinander ─────────────────────────────────────────────────────── */
.fb-paar{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.fb-paar > div{display:grid;gap:.55rem;align-content:start}
.fb-paar img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.fb-paar p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-muted)}
@media (max-width:640px){.fb-paar{grid-template-columns:1fr}}

/* ── Zeilenmass: lebender Satz ─────────────────────────────────────────── */
.fb-mass{padding:1.6rem 0 .4rem;border-block:1px solid var(--rule);overflow:hidden}
.fb-mass-innen{display:grid;gap:2.2rem;width:max-content;font-size:17px;transform-origin:0 0}
.fb-mass-block{width:calc(var(--b) * 1em)}
.fb-mass-block[data-breite="41.41"]{--b:41.41}
.fb-mass-block[data-breite="35.2"]{--b:35.2}
.fb-mass-kopf{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;margin-bottom:.9rem;font-size:1rem}
.fb-mass-kopf .fb-etikett{font-size:.66em}
.fb-mass-lineal{height:9px;border:1px solid var(--rule);border-top:0;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 10%)}
.fb-mass-block.neu .fb-mass-lineal{border-color:var(--accent-gold);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-gold) 60%,transparent) 0 1px,transparent 1px 10%)}
.fb-mass-schnitt{font-size:.72em;letter-spacing:.06em;color:var(--text-muted);font-variant-numeric:lining-nums;white-space:nowrap}
.fb-mass-block.neu .fb-mass-schnitt{color:var(--accent-gold)}
.fb-mass-satz{position:relative;font-family:var(--font-body);font-size:1em;line-height:1.72;color:var(--text-body);text-align:justify;hyphens:auto;-webkit-hyphens:auto;font-variant-numeric:oldstyle-nums proportional-nums}
.fb-mass-satz p{margin:0 0 .6em}
.fb-mass-satz em{font-style:italic;font-size:1.03em}
.fb-mass-zahl{position:absolute;right:-2.6em;width:2.1em;text-align:right;font-size:.62em;line-height:2.78;color:var(--text-muted);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.04em}
.fb-mass-zahl.aus{opacity:.35}
.fb-mass-block.neu .fb-mass-zahl{color:var(--accent-gold)}
.fb-mass-block{padding-right:0;margin-right:2.6em}

/* ── Ueberschriften: vom Druck zur Ansicht ────────────────────────────── */
.fb-weg{display:grid;border-top:1px solid var(--rule)}
.fb-weg-schritt{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:2rem;row-gap:.4rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--rule)}
.fb-weg-schritt .fb-etikett{grid-column:1;grid-row:1;align-self:end}
.fb-weg-schritt p{grid-column:1;grid-row:2;align-self:start;margin:0;font-size:.88rem;line-height:1.55;color:var(--text-muted)}
.fb-weg-schritt img,.fb-weg-druck{grid-column:2;grid-row:1/3;justify-self:center}
.fb-weg-schritt img{display:block;max-width:100%;height:auto}
.fb-weg-druck{display:grid;justify-items:center;gap:.1rem;font-family:var(--font-body);font-size:.92rem;letter-spacing:.14em;color:var(--text-ink);text-align:center;line-height:1.5}
.fb-weg-druck .klein{font-size:.78rem;margin-top:.3rem}
@media (max-width:640px){.fb-weg-schritt{grid-template-columns:1fr}.fb-weg-schritt img,.fb-weg-druck{grid-column:1;grid-row:3;margin-top:.6rem}}

/* ── Blocksatz: Lupe, Zaehlung, Einpassen ─────────────────────────────── */
.fb-lupe{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.fb-lupe-bild{display:grid;gap:.55rem}
.fb-lupe-rahmen{position:relative;border:1px solid var(--rule);overflow:hidden;background:#1c1b20}
.fb-lupe-rahmen img{display:block;width:100%;height:auto}
.fb-kante{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #cd4b44}
.fb-kante.gut{border-left-color:#cbaa5c}
.fb-ueber{position:absolute;background:rgba(205,75,68,.28);outline:1px solid #cd4b44}
.fb-ueber-text{position:absolute;margin:.4rem 0 0 .3rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;color:#e58a83;font-variant-numeric:lining-nums}
@media (max-width:640px){.fb-lupe{grid-template-columns:1fr}}
.fb-blocksatz-unten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2.4rem;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
@media (max-width:900px){.fb-blocksatz-unten{grid-template-columns:1fr}}
.fb-zaehl table{width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.fb-zaehl th,.fb-zaehl td{padding:.5rem 0;border-bottom:1px solid var(--rule);text-align:left;font-size:.92rem;font-weight:400}
.fb-zaehl thead th{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.fb-zaehl thead th:last-child{color:var(--accent-gold)}
.fb-zaehl td{color:var(--text-muted)}
.fb-zaehl td:last-child{color:var(--accent-gold);width:3rem}
.fb-punkte{display:inline-block;vertical-align:middle;margin-right:.6rem;width:calc(var(--n) * 9px);height:7px;background:repeating-linear-gradient(90deg,#cd4b44 0 6px,transparent 6px 9px)}
.fb-einpassen{display:grid;align-content:start}
.fb-probe{padding:1.4rem 0 1.2rem;overflow:hidden}
.fb-probe-spalte{position:relative;border-right:1px dashed #cd4b44;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text-ink);transition:border-color .3s}
.fb-probe-spalte.passt{border-right-color:var(--accent-gold)}
@media (max-width:640px){.fb-probe-spalte{font-size:15px}.fb-probe{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5rem);mask-image:linear-gradient(90deg,transparent,#000 3.5rem)}}
.fb-probe-zeile{display:inline-block;white-space:nowrap;transform-origin:left center;transition:letter-spacing .7s ease,word-spacing .7s ease,transform .7s ease}
.fb-leiter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.fb-leiter li{position:relative;display:grid;gap:.1rem;padding:.55rem 0 0;border-top:2px solid var(--rule);font-size:.84rem;line-height:1.35;color:var(--text-muted);transition:border-color .3s,color .3s}
.fb-leiter li::before{content:attr(data-stufe);font-size:.68rem;letter-spacing:.2em;font-variant-numeric:lining-nums}
.fb-leiter li b{font-weight:600;color:inherit}
.fb-leiter li span{font-size:.8rem;font-variant-numeric:lining-nums}
.fb-leiter li.an{border-top-color:color-mix(in srgb,var(--accent-gold) 55%,var(--rule));color:var(--text-body)}
.fb-leiter li.jetzt{border-top-color:var(--accent-gold);color:var(--text-ink)}
@media (max-width:520px){.fb-leiter{grid-template-columns:1fr 1fr}}
.fb-probe-fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;margin-top:1.1rem}
.fb-probe-stand{font-size:.88rem;color:var(--text-muted);font-variant-numeric:lining-nums}

/* ── Werkzeugleiste: Streifen ─────────────────────────────────────────── */
.fb-streifen{display:grid;gap:.9rem}
.fb-streifen > div{display:grid;grid-template-columns:3.4rem minmax(0,1fr) 5.5rem;align-items:center;gap:1rem}
.fb-streifen img{display:block;width:100%;max-width:728px;height:auto;border:1px solid var(--rule)}
.fb-streifen > div:last-child img{max-width:622px}
.fb-streifen-zahl{font-size:.82rem;color:var(--text-muted);font-variant-numeric:lining-nums}
.fb-streifen > div:last-child .fb-streifen-zahl{color:var(--accent-gold)}
@media (max-width:640px){.fb-streifen > div{grid-template-columns:1fr auto}.fb-streifen img{grid-column:1/-1;grid-row:2}}

/* ── Telefon: drei Telefone, ein Schalter ─────────────────────────────── */
.fb-tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.fb-tel figure{margin:0;display:grid;gap:.6rem;justify-items:start}
.fb-tel .fb-telefon{max-width:16rem;width:100%;cursor:default}
.fb-tel figcaption{font-size:.84rem;color:var(--text-muted)}
@media (max-width:820px){.fb-tel{grid-template-columns:1fr}.fb-tel .fb-telefon{max-width:20rem}}

@media (prefers-reduced-motion:reduce){.fb-vgl *,.fb-blende img,.fb-probe-zeile{transition:none}}