/* Verkleinerte, rein grafische Vorschau der fünf Designbeispiele (kein Foto, kein Screenshot).
   Skaliert über Container-Einheiten mit der Kartenbreite. */

.thumb { container-type: inline-size; aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.thumb .t-in { position: absolute; inset: 0; padding: 5.5cqw 6cqw; display: flex; flex-direction: column; font-size: 2.6cqw; line-height: 1.2; }
.thumb .t-nav { display: flex; align-items: center; gap: 3cqw; font-size: 2.3cqw; position: relative; z-index: 1; }
.thumb .t-nav b { margin-right: auto; font-size: 2.7cqw; }
.thumb .t-nav i { width: 6cqw; height: 0.5cqw; background: currentColor; opacity: 0.35; }
.thumb .t-h { margin: auto 0 3.5cqw; max-width: 62%; position: relative; z-index: 1; }
.thumb .t-btn { align-self: flex-start; position: relative; z-index: 1; font-size: 2.2cqw; }
.thumb .t-in::after { content: ""; position: absolute; }

/* 01 Modern & Minimal */
.t01 { background: #fff; color: #161616; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.t01 .t-h { font-size: 8cqw; font-weight: 500; letter-spacing: -0.04em; line-height: 1; max-width: 80%; }
.t01 .t-btn { border-bottom: 0.4cqw solid #c8553d; padding-bottom: 0.8cqw; font-weight: 500; }
.t01 .t-in::after { right: 6cqw; bottom: 6cqw; width: 5cqw; height: 5cqw; border-radius: 50%; background: #c8553d; }

/* 02 Handwerk & Vertrauen */
.t02 { background: #f4eee4; color: #2e2118; font-family: "Avenir Next", "Segoe UI", Arial, sans-serif; }
.t02 .t-h { font-size: 6.6cqw; font-weight: 800; text-transform: uppercase; line-height: 1.02; max-width: 58%; }
.t02 .t-btn { background: #a94e0d; color: #fff; padding: 1.6cqw 3.2cqw; font-weight: 700; }
.t02 .t-nav i:last-child { display: none; }
.t02 .t-in::after { right: 0; top: 0; bottom: 0; width: 34%; background: #6b4a2f repeating-linear-gradient(96deg, rgba(0, 0, 0, 0.16) 0 0.6cqw, transparent 0.6cqw 3.4cqw); }

/* 03 Klassisch & Seriös */
.t03 { background: #14233d; color: #f5f1e8; font-family: Georgia, "Times New Roman", serif; }
.t03 .t-in { align-items: center; text-align: center; }
.t03 .t-nav { width: 100%; font-family: "Helvetica Neue", Arial, sans-serif; }
.t03 .t-h { font-size: 6.2cqw; max-width: 82%; margin-inline: auto; line-height: 1.12; }
.t03 .t-btn { align-self: center; border: 0.3cqw solid #c2a56f; color: #e4cfa3; padding: 1.5cqw 3.6cqw; letter-spacing: 0.18em; text-transform: uppercase; font-size: 1.8cqw; font-family: "Helvetica Neue", Arial, sans-serif; }
.t03 .t-in::after { left: 50%; top: 23%; width: 9cqw; height: 0.3cqw; background: #c2a56f; transform: translateX(-50%); }

/* 04 Modern & Dynamisch */
.t04 { background: #0e0e12; color: #fff; font-family: "Avenir Next", "Segoe UI", Arial, sans-serif; }
.t04 .t-h { font-size: 8.4cqw; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; }
.t04 .t-h span { color: #c6f432; }
.t04 .t-btn { background: #c6f432; color: #0e0e12; padding: 1.6cqw 3.4cqw; font-weight: 800; text-transform: uppercase; font-style: italic; }
.t04 .t-nav i { display: none; }
.t04 .t-in::after { right: -10%; top: -10%; width: 40%; height: 130%; background: #c6f432; transform: skewX(-14deg); }

/* 05 Industrie & Automatisierung */
.t05 { background: #fff; color: #0f2740; font-family: "DIN Alternate", "Bahnschrift", "Avenir Next", Arial, sans-serif; }
.t05 .t-in { background: linear-gradient(120deg, #fff 0%, #fff 48%, #f1f3f5 100%); border-bottom: 1cqw solid #ef7d00; }
.t05 .t-nav b { text-transform: uppercase; letter-spacing: 0.06em; }
.t05 .t-h { font-size: 6.2cqw; font-weight: 700; line-height: 1.04; max-width: 54%; }
.t05 .t-h span { color: inherit; }
.t05 .t-nav i { display: none; }
.t05 .t-btn { background: #ef7d00; color: #101820; padding: 1.6cqw 3.2cqw; font-weight: 700; }
.t05 .t-in::after { right: 0; top: 0; bottom: 0; width: 46%; background: #0f2740 url("../img/industrie-vorschau.jpg?v=20261009g") 62% 50% / cover no-repeat; clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); }