/* ============================================================
   nomm — Beispielseiten im Fenster (Live-Code, .ms)
   Kleine, echte Websites aus HTML/CSS: im Schaufenster der Straße (street.css) und
   als Bildschirminhalt der Titelbilder von Webdesign und Relaunch.
   1em = 1 % der Breite des umgebenden Containers (.ms setzt 1cqw).
   ============================================================ */

.ms {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  position: relative; display: block; width: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font: 400 1cqw/1.3 var(--sans); letter-spacing: 0; text-align: left; hyphens: none;
}
.ms *, .ms *::before, .ms *::after { box-sizing: border-box; margin: 0; }
.ms img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ms-nav { display: flex; align-items: center; gap: 3em; height: 8em; padding: 0 4.5em; }
.ms-brand { margin-right: auto; font: 600 2em var(--serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ms-link { font-size: 1.55em; white-space: nowrap; }
.ms-eyebrow { font-size: 1.4em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.ms-h { margin-top: .5em; font: 400 6.2em/1.03 var(--serif); letter-spacing: -.01em; }
.ms-p { max-width: 24em; margin-top: 1em; font-size: 1.8em; line-height: 1.5; color: var(--mut); }
.ms-cta { margin-top: 2.8em; }
.ms-btn { display: inline-block; padding: 1.15em 2.2em; font-size: 1.55em; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ms-hero { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 64em; }
.ms-hero-copy { align-self: center; padding: 0 2em 0 4.5em; }
.ms-photo { position: relative; min-height: 64em; }
.ms-photo img { position: absolute; inset: 0; }
.ms-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-bg, var(--bg)), transparent 30%); }
.ms-sec { display: flex; align-items: baseline; justify-content: space-between; padding: 5.5em 4.5em 2.6em; }
.ms-sec-t { font: 400 3.6em var(--serif); }
.ms-sec-a { font-size: 1.5em; color: var(--acc); font-weight: 600; }
.ms-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6em; padding: 4.5em; background: var(--foot-bg); color: var(--foot-ink); }
.ms-foot span { font-size: 1.4em; }

.ms-fashion { --bg: #F7F0E8; --ink: #2E2420; --acc: #A9532F; --mut: #75655B; --foot-bg: #2E2420; --foot-ink: #F7F0E8; }
.ms-fashion .ms-cart { display: grid; place-items: center; width: 4.4em; height: 4.4em; border: 1px solid currentColor; border-radius: 50%; font-size: 1.3em; font-weight: 700; }
.ms-fashion .ms-btn { background: var(--ink); color: var(--bg); }
.ms-usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; padding: 3.2em 4.5em; border-block: 1px solid rgba(46, 36, 32, .14); }
.ms-usps span { display: flex; align-items: center; gap: .8em; font-size: 1.45em; }
.ms-usps span::before { content: ""; flex: none; width: 1.5em; height: 1.5em; border: 1.5px solid var(--acc); border-radius: 50%; }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em; padding: 0 4.5em; }
.ms-pimg { position: relative; height: 30em; border-radius: .8em; overflow: hidden; background: var(--t1); }
.ms-pimg::before { content: ""; position: absolute; left: 50%; bottom: -3em; width: 60%; height: 80%; transform: translateX(-50%); border-radius: 32% 32% 3% 3% / 24% 24% 2% 2%; background: var(--t2); }
.ms-pimg::after { content: ""; position: absolute; left: 50%; top: 19%; width: 22%; height: 13%; transform: translateX(-50%); border-radius: 0 0 50% 50%; background: var(--t1); }
.ms-card:nth-child(1) .ms-pimg { --t1: #E9D7C7; --t2: #A9532F; }
.ms-card:nth-child(2) .ms-pimg { --t1: #DDE3D8; --t2: #6F7F68; }
.ms-card:nth-child(3) .ms-pimg { --t1: #EAD9C2; --t2: #2E2420; }
.ms-pn { margin-top: 1.1em; font-size: 1.65em; font-weight: 700; }
.ms-pp { margin-top: .3em; font-size: 1.5em; color: var(--mut); }

.ms-resto { --bg: #0F1A15; --hero-bg: #0F1A15; --ink: #F2EBDD; --acc: #C9A765; --mut: #B7B09F; --foot-bg: #12261D; --foot-ink: #D9D1BE; }
.ms-resto .ms-brand { font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 2.6em; }
.ms-resto .ms-h { font-style: italic; }
.ms-resto .ms-btn { border: 1px solid var(--acc); color: var(--acc); }
.ms-resto .ms-foot { margin-top: 0; }
.ms-menu { padding: 6.5em 4.5em 2em; background: #F4EEE2; color: #2B2A24; }
.ms-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6em; }
.ms-menu-t { margin-bottom: 1.6em; font: 400 2.5em var(--serif); text-align: center; letter-spacing: .16em; text-transform: uppercase; color: #8A6D2F; }
.ms-row { display: flex; justify-content: space-between; gap: 2em; padding: 1.5em 0; border-bottom: 1px solid rgba(43, 42, 36, .14); font-size: 1.6em; }
.ms-row b { font-weight: 600; }
.ms-row i { font-style: normal; color: #8A6D2F; font-weight: 700; }

.ms-consult { --bg: #F4F2EC; --hero-bg: #0F2240; --ink: #14233D; --acc: #C8A25A; --mut: #5C6677; --foot-bg: #0F2240; --foot-ink: #D5DAE3; }
.ms-consult .ms-top { background: #0F2240; color: #fff; }
.ms-consult .ms-brand { font: 800 1.9em var(--sans); letter-spacing: .24em; }
.ms-consult .ms-nav-btn { padding: .9em 1.7em; background: var(--acc); color: #0F2240; font-size: 1.35em; font-weight: 800; }
.ms-consult .ms-hero { background: #0F2240; color: #fff; }
.ms-consult .ms-hero .ms-eyebrow { color: var(--acc); }
.ms-consult .ms-p { color: #C4CCDA; }
.ms-consult .ms-btn { background: var(--acc); color: #0F2240; }
.ms-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5em; padding: 6em 4.5em 0; }
.ms-contact-t { font: 400 4em/1.05 var(--serif); }
.ms-contact-l { margin-top: 1.4em; font-size: 1.55em; line-height: 1.9; color: var(--mut); }
.ms-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.ms-field { display: block; }
.ms-field.wide { grid-column: 1 / -1; }
.ms-field span { display: block; margin-bottom: .5em; font-size: 1.25em; font-weight: 700; color: var(--mut); }
.ms-field i { display: block; height: 4.6em; border: 1px solid rgba(20, 35, 61, .28); background: #fff; }
.ms-field.tall i { height: 9em; }
.ms-send { grid-column: 1 / -1; justify-self: start; padding: 1.1em 2.4em; background: #0F2240; color: #fff; font-size: 1.5em; font-weight: 700; }

/* generierte Vorschauen (Farben/Schrift kommen als Variablen am .ms-Element) */
.ms-gen { font-family: var(--sans); }
.ms-gen .ms-brand { font: var(--dw) 2.2em/1.1 var(--disp); letter-spacing: var(--dl); text-transform: var(--dt); }
.ms-gen .ms-nav { border-bottom: 1px solid var(--line); }
.ms-gen .ms-nav-btn { padding: .9em 1.7em; background: var(--acc); color: var(--acc-ink); font-size: 1.35em; font-weight: 800; white-space: nowrap; }
.ms-gen .ms-eyebrow { color: var(--ac-text); }
.ms-gen .ms-h { font: var(--dw) 6em/1.03 var(--disp); letter-spacing: var(--dl); text-transform: var(--dt); }
.ms-gen .ms-btn { background: var(--acc); color: var(--acc-ink); }
.ms-gen .ms-art { min-height: 64em; --bw: 1.7em; }
.ms-gen .ms-sec-t { font: var(--dw) 3.4em var(--disp); letter-spacing: var(--dl); text-transform: var(--dt); }
.ms-gen .ms-menu { padding: 2.5em 4.5em 5em; background: var(--tint); color: var(--ink); }
.ms-gen .ms-row { border-bottom-color: var(--line); }
.ms-gen .ms-row i { color: var(--ac-text); }
.ms-gen .ms-foot { margin-top: 0; }

/* Classic by Nature im Schaufenster: so sieht die Seite aus, auf der man landet (geschlossenes Buch auf dem Tisch im Gewölberaum; Klick klappt es auf) */
.ms-book { position: relative; display: block; height: 100cqh; background: radial-gradient(ellipse 80% 70% at 50% 46%, transparent 0%, rgba(3, 6, 4, .35) 72%, rgba(2, 4, 3, .78) 100%), url("assets/cbn-szene.webp") 50% 78% / cover, #0b130e; }
.ms-book::before { content: ""; position: absolute; left: 50%; bottom: 3cqh; width: 46%; height: 9cqh; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, .92) 0, rgba(0, 0, 0, .55) 48%, transparent 72%); filter: blur(.6em); }
.ms-book .mb-img { position: absolute; left: 50%; bottom: 7cqh; translate: -50% 0; width: auto; height: 84cqh; border-radius: .5em .9em .9em .5em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1.2em 2.4em -.6em rgba(0, 0, 0, .8); }

/* Café Eckstein im Schaufenster: die Theke, wie sie nach dem Klick erscheint (Foto in voller Breite, darunter die Holzverkleidung) */
.ms-cafe { height: 100cqh; background: linear-gradient(180deg, #4a2510, #2c1609); }
.ms-cafe img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* Atelier Noir im Schaufenster: der Blick vom Eingang in die Boutique, wie nach dem Klick (Foto in voller Breite, darunter der dunkle Boden) */
.ms-noir { height: 100cqh; background: linear-gradient(180deg, #543e2c, #1d140e); }
.ms-noir img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

/* Drehspieß im Schaufenster: die Startansicht der Seite (Hero mit drehendem Spieß) */
.ms-doener { height: 100cqh; background: #FFC62A; }

/* Schnipp & Schnapp im Schaufenster: der Laden von außen im Comic, wie die Seite beginnt */
.ms-barber { height: 100cqh; background: #5FB4E5; }

/* Studio Lilie im Schaufenster: der Fernsehabend, wie die Seite aussieht, wenn der Fernseher läuft */
.ms-lilie { height: 100cqh; background: #BFB1E3; }

/* Nachtschicht im Schaufenster: das Titelbild des Scrollytellings (die Bar in der Dämmerung) */
.ms-bar { height: 100cqh; background: #060a1b; }

/* bike-mini:start */
/* Kettenreaktion im Schaufenster: die Explosionszeichnung des Stadtrads (erzeugt von gen_bike.py) */
.ms-bike { height: 100cqh; --paper: #F2F6F0; --ink: #0F2418; --green: #0E6B4F; --lime: #C6F432; --fill: #F2F6F0;
  background-color: #F2F6F0; background-image: linear-gradient(rgba(14, 107, 79, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 107, 79, .16) 1px, transparent 1px);
  background-size: 6.2cqw 6.2cqw; }
.ms-bike svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-bike [data-pos] { --fill: #F2F6F0; }
.ms-bike [data-pos="1"] { --fill: #0E6B4F; }
.ms-bike [data-pos].sel { --fill: #C6F432; }
.ms-bike .mg line { stroke: #0E6B4F; stroke-width: 3px; stroke-dasharray: 22 7 5 7; }
.ms-bike .bl circle { fill: var(--fill); stroke: #0F2418; stroke-width: 3px; }
.ms-bike .bl text { font: 700 24px/1 ui-monospace, Consolas, monospace; fill: #0F2418; text-anchor: middle; dominant-baseline: central; }
.ms-bike [class$="-o"] { fill: none; stroke: var(--ink); stroke-width: calc(var(--w, 10) * 1px); stroke-linecap: round; stroke-linejoin: round; }
.ms-bike [class$="-i"] { fill: none; stroke: var(--fill); stroke-width: calc(var(--w, 10) * 1px); stroke-linecap: round; stroke-linejoin: round; }
.ms-bike .rim-o { --w: 15; }
.ms-bike .rim-i { --w: 11; }
.ms-bike .tire { fill: none; stroke: #1A2A21; stroke-width: 24px; }
.ms-bike .tire-hi { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.4px; }
.ms-bike .spk { fill: none; stroke: #52645A; stroke-width: .9px; }
.ms-bike .refl { fill: #E9A92C; stroke: var(--ink); stroke-width: 1.2px; }
.ms-bike .hub, .ms-bike .hub-in { fill: var(--fill); stroke: var(--ink); stroke-width: 2.4px; }
.ms-bike .hub-in { stroke-width: 1.6px; }
.ms-bike .axle, .ms-bike .bolt { fill: var(--ink); stroke: none; }
.ms-bike .thin { fill: none; stroke: var(--ink); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.ms-bike .cap, .ms-bike .shell, .ms-bike .dropout, .ms-bike .ring, .ms-bike .spr, .ms-bike .spr-in, .ms-bike .lamp, .ms-bike .bell, .ms-bike .sad { fill: var(--fill); stroke: var(--ink); stroke-width: 2.2px; stroke-linejoin: round; }
.ms-bike .spr-in { stroke-width: 1.6px; }
.ms-bike .teeth { fill: none; stroke: var(--ink); stroke-width: 7px; }
.ms-bike .shf-o { fill: var(--fill); stroke: var(--ink); stroke-width: 2.2px; }
.ms-bike .grip { fill: none; stroke: #1B2B22; stroke-width: 17px; stroke-linecap: round; }
.ms-bike .grip-hi { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 17px; stroke-dasharray: 1.4 4.6; }
.ms-bike .pad { fill: #1B2B22; stroke: none; }
.ms-bike .pedal { fill: #1B2B22; stroke: var(--ink); stroke-width: 1.4px; }
.ms-bike .ghost { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 7 5; opacity: .75; }
.ms-bike .cab { fill: none; stroke: var(--ink); stroke-width: 1.6px; opacity: .85; }
.ms-bike .gnd { fill: none; stroke: var(--ink); stroke-width: 2px; }
.ms-bike .gnd-h { fill: none; stroke: var(--ink); stroke-width: 1.2px; opacity: .55; }
.ms-bike .chain-o { fill: none; stroke: var(--ink); stroke-width: 6.5px; stroke-dasharray: 7.5 4.5; stroke-linejoin: round; }
.ms-bike .chain-i { fill: none; stroke: var(--paper); stroke-width: 2.4px; stroke-dasharray: 7.5 4.5; stroke-dashoffset: -6; }
/* bike-mini:end */

/* Altstadt Immobilien im Schaufenster: das Titelbild (Dachterrasse mit Blick auf Wien), und Titel als HTML */
.ms-immo { height: 100cqh; background: #12283F; color: #fff; }
.ms-immo img { position: absolute; inset: 0; }
.ms-immo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 31, 51, .9), rgba(14, 31, 51, .5) 55%, rgba(14, 31, 51, 0)); }
.ms-immo b { position: absolute; left: 7%; top: 16%; z-index: 2; font: 600 8.4em/1.06 Georgia, "Palatino Linotype", serif; letter-spacing: -.01em; }

/* Funke Elektro im Schaufenster: das dunkle Titelbild mit warmem Licht (Foto, Titel und goldene Knöpfe als HTML) */
.ms-funke { height: 100cqh; background: #0C0D10; color: #fff; }
.ms-funke img { position: absolute; inset: 0; }
.ms-funke::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 52%, rgba(6, 6, 8, .72), rgba(6, 6, 8, .25) 70%); }
.ms-funke b { position: absolute; left: 6%; right: 6%; top: 24%; z-index: 2; font: 800 8.6em/1.08 var(--sans); letter-spacing: -.02em; text-align: center; text-shadow: 0 .04em .3em rgba(0, 0, 0, .6); }
.ms-funke i { position: absolute; bottom: 24%; z-index: 2; width: 24%; height: 9%; border: .45em solid #F5B82E; border-radius: .8em; }
.ms-funke i:nth-of-type(1) { left: 24%; }
.ms-funke i:nth-of-type(2) { right: 24%; }
.ms-funke u { position: absolute; left: 22%; right: 22%; bottom: 7%; z-index: 2; height: 9%; border-radius: 1.2em; background: rgba(14, 16, 22, .8); }

/* Praxis Lindenblick im Schaufenster: Makroaufnahme eines Zahns auf Mint, Titel links im freien Raum */
.ms-zahn { height: 100cqh; background: #DCEFEC; color: #12343A; }
.ms-zahn img { position: absolute; inset: 0; }
.ms-zahn b { position: absolute; left: 7%; top: 22%; z-index: 2; max-width: 48%; font: 300 7.6em/1.1 var(--sans); letter-spacing: -.02em; }

/* Pfotenglück im Schaufenster: Hund und Katze, Titel links auf dunklem Verlauf */
.ms-tier { height: 100cqh; background: #1E3A29; color: #fff; }
.ms-tier img { position: absolute; inset: 0; }
.ms-tier::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20, 41, 29, .92), rgba(20, 41, 29, .5) 52%, rgba(20, 41, 29, 0)); }
.ms-tier b { position: absolute; left: 7%; top: 18%; z-index: 2; max-width: 50%; font: 600 7.4em/1.08 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: -.015em; }

/* Ferrum Industrie im Schaufenster: Stahlrollen im kühlen Licht, Titel links auf dunklem Verlauf */
.ms-ferrum { height: 100cqh; background: #141C23; color: #fff; }
.ms-ferrum img { position: absolute; inset: 0; }
.ms-ferrum::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 22, 29, .92), rgba(14, 22, 29, .55) 55%, rgba(14, 22, 29, .05)); }
.ms-ferrum b { position: absolute; left: 7%; top: 20%; z-index: 2; font: 600 8em/1.06 var(--sans); letter-spacing: -.025em; }

/* Stonebridge im Schaufenster: Steinbrücke im Morgennebel, Titel in Serifenschrift darüber */
.ms-stone { height: 100cqh; background: #0D1B21; color: #fff; }
.ms-stone img { position: absolute; inset: 0; }
.ms-stone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13, 27, 33, .9), rgba(13, 27, 33, .5) 55%, rgba(13, 27, 33, .05)); }
.ms-stone b { position: absolute; left: 7%; top: 16%; z-index: 2; font: 400 8.2em/1.04 "Didot", "Bodoni MT", "Iowan Old Style", "Palatino Linotype", Georgia, serif; letter-spacing: -.02em; }
.ms-stone b em { color: #D9B98A; }

/* ms-anim-cirrus */
/* Schaufenster Software (Cirrus) und KI (Kundig): ein hochauflösendes Bild des Seitenanfangs, ohne Bewegung. */
.ms-shot { height: 100cqh; background: #F2F4F7; overflow: hidden; }
.ms-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ms-anim-nuss */
/* Tischlerei Nussbaum im Schaufenster: ein rohes Eichenbrett wird von links nach rechts geölt (Maske wandert), darauf ein Nussbaum-Schild mit dem Titel. Grundwert = fertig geölt. */
.ms-nuss { height: 100cqh; background: #B79F78; }
.ms-nuss img { position: absolute; inset: 0; }
.ms-nuss .o { -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 58%); mask-image: linear-gradient(105deg, #000 0%, #000 42%, transparent 58%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; animation: nu-oil 9s ease-in-out infinite; }
@keyframes nu-oil { 0%, 6% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 1; } 56%, 88% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; } 96% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; } 96.1%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; } }
.ms-nuss::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(40, 20, 6, .3)); }
.ms-nuss .sg { position: absolute; left: 7%; top: 15%; z-index: 2; width: 58%; padding: 4.6em 5em 4.8em; border-radius: .7em; color: #F6E9CF; background: url("assets/nuss-fenster-nuss.webp") center / cover; box-shadow: inset 0 .15em 0 rgba(255, 225, 170, .18), inset 0 -.4em 0 rgba(0, 0, 0, .55), 0 3em 4em -2em rgba(0, 0, 0, .75); }
.ms-nuss .sg::before { content: ""; position: absolute; inset: 1.4em; border: .12em solid rgba(0, 0, 0, .6); border-radius: .3em; box-shadow: .12em .12em 0 rgba(255, 225, 180, .16); }
.ms-nuss .sg i { position: relative; display: block; font: 700 1.9em/1 "Avenir Next", "Segoe UI", sans-serif; font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: #E1B66C; }
.ms-nuss .sg b { position: relative; display: block; margin-top: .45em; font: 700 8em/1 "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; letter-spacing: -.01em; text-shadow: 0 -.03em 0 rgba(0, 0, 0, .75); }
.ms-nuss .sg b em { color: #E1B66C; }
@media (prefers-reduced-motion: reduce) { .ms-nuss .o { animation: none !important; } }

/* ms-anim-funke */
/* Funke Elektro im Schaufenster: das Raumbild startet dunkel, die Lampen zünden mit Flackern, nach einer Weile geht das Licht wieder aus und alles beginnt von vorn (wie im Titel der Seite). */
.ms-funke img { animation: fu-on 9s linear infinite; }
@keyframes fu-on { 0%, 5% { filter: brightness(.14) saturate(.6); } 7% { filter: brightness(.95) saturate(1); } 9% { filter: brightness(.22) saturate(.7); } 12% { filter: brightness(1) saturate(1); } 14% { filter: brightness(.5) saturate(.85); } 18%, 86% { filter: brightness(1) saturate(1); } 94%, 100% { filter: brightness(.14) saturate(.6); } }
@media (prefers-reduced-motion: reduce) { .ms-funke img { animation: none; } }

/* ms-anim-klinik */
/* Klinikum Weidenau im Schaufenster: Parkfoto, links eine helle Karte mit dem Titel, rechts ein Atemkreis, der sich langsam weitet und wieder schließt, dazu sanft wandernde Lichtstrahlen. */
.ms-klinik { height: 100cqh; background: #3E5B47; }
.ms-klinik img { position: absolute; inset: 0; }
.ms-klinik::before { content: ""; position: absolute; top: -12%; left: 30%; z-index: 1; width: 14%; height: 135%; background: linear-gradient(180deg, rgba(255, 247, 214, .4), rgba(255, 247, 214, 0) 86%); filter: blur(1.4em); transform: rotate(17deg); mix-blend-mode: screen; animation: kl-sway 12s ease-in-out infinite alternate; }
@keyframes kl-sway { from { transform: rotate(14deg) translateX(-30%); opacity: .5; } to { transform: rotate(20deg) translateX(60%); opacity: 1; } }
.ms-klinik b { position: absolute; left: 6%; top: 15%; z-index: 2; padding: .55em .62em; border-radius: .45em; background: rgba(250, 248, 243, .93); color: #16302A; font: 700 6.6em/1.05 "Avenir Next", "Candara", "Gill Sans", "Trebuchet MS", sans-serif; letter-spacing: -.02em; box-shadow: 0 .45em .75em -.45em rgba(10, 30, 22, .7); }
.ms-klinik b em { display: block; margin-bottom: .5em; font: 700 .26em/1 "Avenir Next", "Candara", sans-serif; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #1F5E43; }
.ms-klinik .rg { position: absolute; right: 9%; bottom: 14%; z-index: 2; display: grid; place-items: center; width: 24em; height: 24em; border: .5em solid rgba(255, 255, 255, .92); border-radius: 50%; background: rgba(18, 54, 40, .5); box-shadow: 0 0 0 2.4em rgba(255, 255, 255, .16), 0 0 10em rgba(255, 255, 255, .3); animation: kl-br 8s ease-in-out infinite; }
.ms-klinik .rg u { width: 52%; height: 52%; border-radius: 50%; background: rgba(255, 255, 255, .24); }
@keyframes kl-br { 0%, 100% { transform: scale(.76); } 42% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ms-klinik::before, .ms-klinik .rg { animation: none; } .ms-klinik .rg { transform: scale(.9); } }