/* Guet gfunde · Alte Websites für Vorher Nachher (assets/js/alte-seiten.js). Stil um 2010, jede Branche eigenständig.
   Masse in em: der Behälter setzt die Grundgrösse (Röntgen Strahl 3cqw, Landingpage je nach Breite). */
.as { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  font-family: Verdana, Geneva, Arial, sans-serif; line-height: 1.35; color: #444; text-align: left; }
.as span, .as b, .as u, .as i, .as small { display: block; }
.as u, .as i { text-decoration: none; font-style: normal; }
.as .as__bild { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; background: #ddd center / cover no-repeat; }
/* Bilder sind Hintergründe (alte-seiten.js, B): ohne eigene Grösse, sie füllen nur den Platz, den das Raster vorgibt,
   und werden auf jedem Gerät gleich mittig gezeigt. */
.as__foot { font-size: .72em; padding: .5em 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pflegevermittlung: türkis, Reiter, oranger Knopf */
.as--pflege { background: #eef5f4; }
.as--pflege .as__top { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em 1em; background: #fff; border-bottom: .25em solid #2a8c82; }
.as--pflege .as__logo { display: flex; align-items: center; gap: .45em; min-width: 0; }
.as--pflege .as__logo i { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #6fcabe, #1f6f67); color: #fff; font: bold 1.1em/1 Arial, sans-serif; }
.as--pflege .as__logo b { font: bold 1.4em/1.1 Arial, Helvetica, sans-serif; color: #1f6f67; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--pflege .as__top small { font-size: .7em; color: #888; white-space: nowrap; }
.as--pflege .as__nav { display: flex; gap: .25em; padding: .5em 1em 0; overflow: hidden; }
.as--pflege .as__nav u { background: #cfe5e2; color: #1f6f67; font: bold .78em/1 Arial, sans-serif; padding: .6em .8em; border-radius: .5em .5em 0 0; white-space: nowrap; }
.as--pflege .as__nav u.an { background: #2a8c82; color: #fff; }
.as--pflege .as__body { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: .9em; margin: 0 1em; padding: .9em 1em; background: #fff; border: 1px solid #cfe5e2; border-top: 0; min-height: 0; overflow: hidden; }
.as--pflege .as__main { min-width: 0; }
.as--pflege .as__h { color: #1f6f67; font: bold 1.15em/1.2 Arial, sans-serif; margin-bottom: .35em; }
.as--pflege .as__p { font-size: .85em; }
.as--pflege .as__liste { margin-top: .7em; display: grid; gap: .3em; font-size: .85em; }
.as--pflege .as__liste b { font: bold 1em Arial, sans-serif; color: #333; }
.as--pflege .as__liste u { color: #2a8c82; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--pflege .as__side { display: grid; gap: .7em; align-content: start; min-width: 0; }
.as--pflege .as__foto { aspect-ratio: 4 / 3; border: .25em solid #fff; box-shadow: 0 0 0 1px #cfe5e2, .15em .2em .4em rgba(0, 0, 0, .2); overflow: hidden; }
.as--pflege .as__btn { background: linear-gradient(#ffb347, #f07f13); color: #fff; font: bold .85em/1.2 Arial, sans-serif; text-align: center; padding: .65em .4em; border-radius: .45em; box-shadow: 0 .15em .3em rgba(0, 0, 0, .25); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); }
.as--pflege .as__foot { color: #5c8c87; text-align: center; }

/* Dünger: Erdtöne, Georgia, Produktkästchen, PDF Preisliste */
.as--duenger { background: #f3efe2; color: #4a3b2a; font-family: Georgia, "Times New Roman", serif; }
.as--duenger .as__top { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; padding: .8em 1em; background: linear-gradient(#3d7a26, #1f4512); color: #fff; border-bottom: .2em solid #c9a227; }
.as--duenger .as__top b { font: bold 1.5em/1.1 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--duenger .as__top small { font-style: italic; font-size: .72em; color: #e3d9a5; white-space: nowrap; }
.as--duenger .as__nav { display: flex; background: #e6dcc0; border-bottom: 1px solid #c9b98f; overflow: hidden; }
.as--duenger .as__nav u { font: bold .75em/1 Verdana, sans-serif; color: #3d5a1e; padding: .6em .8em; border-right: 1px solid #c9b98f; white-space: nowrap; }
.as--duenger .as__nav u.an { background: #fff8e0; }
.as--duenger .as__body { padding: .8em 1em; min-height: 0; overflow: hidden; }
.as--duenger .as__h { font: bold 1.15em/1.2 Georgia, serif; color: #2f5d1e; border-bottom: 1px dotted #b8a77a; padding-bottom: .25em; margin-bottom: .6em; }
.as--duenger .as__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.as--duenger .as__grid > span { background: #fff; border: 1px solid #d6c9a4; padding: .4em; font: bold .72em/1.2 Verdana, sans-serif; text-align: center; color: #3d5a1e; box-shadow: .2em .2em 0 #e2d8bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--duenger .as__grid .as__bild { height: 5.4em; margin-bottom: .4em; }
.as--duenger .as__pdf { display: flex; align-items: center; gap: .4em; margin-top: .6em; font: .75em Verdana, sans-serif; color: #a3261b; text-decoration: underline; }
.as--duenger .as__pdf i { background: #c0281c; color: #fff; font: bold .8em/1 Arial, sans-serif; padding: .25em .3em; text-decoration: none; }
.as--duenger .as__p { margin-top: .6em; font-size: .8em; line-height: 1.5; max-width: 40em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as--duenger .as__foot { background: #1f4512; color: #cfe3bf; text-align: center; }

/* Architekturbüro: dunkel, gesperrte Schrift, Galerie aus Vorschaubildern */
.as--arch { grid-template-rows: auto minmax(0, 1fr) auto; background: #161616; color: #9a9a9a; }
.as--arch .as__top { display: flex; justify-content: space-between; align-items: center; gap: .8em; padding: 1em 1em .7em 1.2em; border-bottom: 1px solid #333; }
.as--arch .as__top b { font: normal .85em/1.35 Verdana, sans-serif; letter-spacing: .22em; color: #e8e8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.as--arch .as__nav { display: flex; gap: .8em; flex: none; }
.as--arch .as__nav u { font-size: .62em; letter-spacing: .15em; text-transform: uppercase; color: #8a8a8a; white-space: nowrap; }
.as--arch .as__nav u.an { color: #d4b25a; }
.as--arch .as__body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .6em; padding: .9em 1.2em; min-height: 0; overflow: hidden; }
.as--arch .as__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .4em; min-height: 0; contain: size; overflow: hidden; }
.as--arch .as__thumbs .as__bild { border: 1px solid #444; background-color: #222; }
.as--arch .as__thumbs .as__bild:first-child { border-color: #d4b25a; }
.as--arch .as__cap { font-size: .62em; letter-spacing: .05em; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--arch .as__foot { color: #5a5a5a; border-top: 1px solid #2a2a2a; }

/* Webdesign: Web 2.0, glänzend, Beta Etikett, Preisstern */
.as--web { background: linear-gradient(#e9eef2, #fff 45%); color: #555; font-family: "Trebuchet MS", Verdana, sans-serif; }
.as--web .as__top { display: flex; align-items: center; gap: .5em; padding: .8em 1em; }
.as--web .as__top b { font: bold 1.45em/1 "Trebuchet MS", sans-serif; color: #4a4a4a; letter-spacing: -.03em; white-space: nowrap; }
.as--web .as__top b em { color: #f26b1d; font-style: normal; }
.as--web .as__beta { background: #8cc63f; color: #fff; font: bold .6em/1 Arial, sans-serif; padding: .25em .45em; border-radius: .3em; transform: rotate(-10deg); }
.as--web .as__nav { margin-left: auto; display: flex; background: linear-gradient(#fdfdfd, #e2e2e2); border: 1px solid #ccc; border-radius: 1em; padding: .2em; overflow: hidden; min-width: 0; }
.as--web .as__nav u { font: bold .7em/1 Arial, sans-serif; padding: .45em .7em; color: #666; border-radius: 1em; white-space: nowrap; }
.as--web .as__nav u.an { background: linear-gradient(#ffa64d, #f26b1d); color: #fff; }
.as--web .as__hero { position: relative; margin: .2em 1em 0; padding: 1em 5.4em 1.2em 1.1em; border-radius: .8em; color: #fff;
  background: linear-gradient(#86c94c 0%, #5aa52b 50%, #4b9420 51%, #6cb33a 100%); box-shadow: 0 .3em .6em rgba(0, 0, 0, .2); }
.as--web .as__hero b { font: bold 1.45em/1.1 "Trebuchet MS", sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.as--web .as__hero > span { font-size: .82em; margin-top: .3em; }
.as--web .as__hero .as__stern { position: absolute; right: .6em; top: 50%; width: 5em; height: 5em; margin: -2.5em 0 0; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 40% 35%, #fff36b, #f7b500); color: #b3261e; font: bold .8em/1.1 Arial, sans-serif; transform: rotate(12deg); box-shadow: 0 .15em .3em rgba(0, 0, 0, .3); text-shadow: none; }
.as--web { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.as--web .as__unten { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: .9em; padding: .9em 1em; min-height: 0; overflow: hidden; }
.as--web .as__unten .as__foto { border-radius: .5em; overflow: hidden; box-shadow: 0 .25em .5em rgba(0, 0, 0, .25); align-self: start; aspect-ratio: 16 / 10; }
.as--web .as__icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; align-content: center; min-height: 0; }
.as--web .as__icons > span { display: grid; justify-items: center; gap: .4em; font: bold .8em Arial, sans-serif; color: #555; }
.as--web .as__icons i { width: 3em; height: 3em; border-radius: 50%; box-shadow: 0 .2em .3em rgba(0, 0, 0, .25); background: radial-gradient(circle at 35% 30%, #fff 0 12%, #6db3f2 13%, #1e69de 100%); }
.as--web .as__icons .i2 { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ffb36b 13%, #f26b1d 100%); }
.as--web .as__icons .i3 { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #a6d96a 13%, #4b9420 100%); }
.as--web .as__foot { text-align: center; color: #999; border-top: 1px solid #e3e3e3; }