/* =========================================================================
   mocks.css – device frames + the four concept-project mini sites.
   Everything inside .mock is sized in em; the em scales with the frame
   width via container query units, so the mocks stay crisp at any size.
   ========================================================================= */

.device { position: relative; width: 100%; border-radius: clamp(8px, 1.2vw, 16px); background: #2a2622; padding: 0; box-shadow: 0 40px 80px -40px rgba(40, 28, 16, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08); overflow: hidden; }
.device__bar { display: flex; align-items: center; gap: 6px; height: clamp(22px, 2.4vw, 32px); padding-inline: 12px; background: #1f1c19; }
.device__bar i { width: 8px; height: 8px; border-radius: 50%; background: #45403a; }
.device__url { margin-inline: auto; padding: 2px 14px; border-radius: 99px; background: #2c2824; font-size: 10px; color: #8d857b; font-family: var(--f-body); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.device__screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.device--phone { border-radius: clamp(22px, 3vw, 36px); padding: 8px; background: #1b1916; }
.device--phone .device__screen { aspect-ratio: 9 / 19; border-radius: clamp(16px, 2.4vw, 28px); }
.device--phone::after { content: ""; position: absolute; z-index: 3; top: 16px; left: 50%; width: 28%; height: 14px; translate: -50% 0; border-radius: 99px; background: #0b0a09; }

.mock { font-size: calc(100cqi / 72); line-height: 1.45; transition: transform 7s cubic-bezier(0.45, 0, 0.2, 1); will-change: transform; }
.device--phone .mock { font-size: calc(100cqi / 23); }
.device.is-panning .mock { transform: translateY(var(--pan, 0)); transition-duration: 10s; }
.mock *, .mock *::before, .mock *::after { box-sizing: border-box; }
.m-nav { display: flex; align-items: center; gap: 2em; padding: 1.4em 3em; }
.m-logo { font-size: 1.5em; margin-right: auto; white-space: nowrap; }
.m-links { display: flex; gap: 2em; font-size: 0.85em; opacity: 0.8; }
.m-links i { font-style: normal; }
.m-btn { display: inline-flex; align-items: center; padding: 0.75em 1.4em; border-radius: 99em; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.m-burger { display: none; width: 1.6em; height: 1em; border-block: 2px solid currentColor; position: relative; }
.m-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid currentColor; translate: 0 -50%; }
.m-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; align-items: center; padding: 3em 3em 4em; }
.m-kicker { display: block; font-size: 0.75em; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2em; opacity: 0.75; }
.m-title { font-size: 4em; line-height: 1; margin: 0 0 0.35em; font-weight: 400; }
.m-text { font-size: 1em; opacity: 0.8; margin: 0 0 1.8em; max-width: 30em; }
.m-section { padding: 3.5em 3em; }
.m-h { font-size: 2.2em; line-height: 1.1; margin: 0 0 1em; font-weight: 400; }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.m-footer { padding: 2.5em 3em; font-size: 0.8em; display: flex; justify-content: space-between; gap: 2em; }

/* phone adaptations */
.device--phone .m-nav { padding: 3.2em 1.4em 1em; }
.device--phone .m-links, .device--phone .m-nav .m-btn { display: none; }
.device--phone .m-burger { display: block; }
.device--phone .m-hero { grid-template-columns: 1fr; padding: 1.2em 1.4em 2.4em; gap: 1.6em; }
.device--phone .m-title { font-size: 2.6em; }
.device--phone .m-section { padding: 2.2em 1.4em; }
.device--phone .m-grid { grid-template-columns: 1fr; }
.device--phone .m-h { font-size: 1.7em; }
.device--phone .m-footer { flex-direction: column; padding: 2em 1.4em; }

/* ---------- 1. Salbei – restaurant ---------------------------------------- */
.mock--salbei { background: #1c2a21; color: #efe6d6; font-family: "Inter", sans-serif; }
.mock--salbei .m-logo, .mock--salbei .m-title, .mock--salbei .m-h { font-family: "Calistoga", Georgia, serif; }
.mock--salbei .m-logo::before { content: "✺ "; color: #d77a45; }
.mock--salbei .m-btn { background: #d77a45; color: #1c140e; }
.mock--salbei .m-title em { font-style: normal; color: #e9a36f; }
.plate { position: relative; aspect-ratio: 1; width: 100%; max-width: 26em; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f3ebdd 0 52%, #e2d6c3 53% 60%, #f3ebdd 61% 70%, transparent 71%); }
.plate::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; background:
  radial-gradient(circle at 38% 40%, #c2502a 0 13%, transparent 14%),
  radial-gradient(circle at 60% 58%, #e7a13e 0 11%, transparent 12%),
  radial-gradient(circle at 58% 34%, #5d7f45 0 9%, transparent 10%),
  radial-gradient(circle at 40% 64%, #7f9d5c 0 8%, transparent 9%),
  radial-gradient(circle at 50% 50%, #d9c7a2 0 48%, transparent 49%); }
.plate::after { content: ""; position: absolute; right: -6%; top: 8%; width: 30%; height: 12%; border-radius: 100% 0; background: #6f9152; rotate: -30deg; }
.menu-rows { display: grid; gap: 1.1em; }
.menu-row { display: flex; align-items: baseline; gap: 0.8em; font-size: 1em; }
.menu-row b { font-weight: 600; }
.menu-row span { flex: 1; border-bottom: 1px dotted rgba(239, 230, 214, 0.35); }
.menu-row small { display: block; opacity: 0.6; font-size: 0.8em; }
.resv { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; background: #243629; border-radius: 1.2em; padding: 2.4em; }
.device--phone .resv { grid-template-columns: 1fr; gap: 1.4em; padding: 1.4em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6em; margin-bottom: 1em; }
.chips i { font-style: normal; font-size: 0.85em; padding: 0.55em 1em; border-radius: 99em; border: 1px solid rgba(239, 230, 214, 0.3); }
.chips i.on { background: #efe6d6; color: #1c2a21; border-color: #efe6d6; }
.mock--salbei .m-footer { border-top: 1px solid rgba(239, 230, 214, 0.15); opacity: 0.8; }

/* ---------- 2. Holzwerk Brenner – carpentry --------------------------------- */
.mock--brenner { background: #ece5da; color: #1d1b18; font-family: "Inter", sans-serif; }
.mock--brenner .m-logo { font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; font-size: 1.3em; }
.mock--brenner .m-logo::after { content: " ▲"; color: #a8703c; font-size: 0.7em; }
.mock--brenner .m-title, .mock--brenner .m-h { font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; }
.mock--brenner .m-title { font-size: 4.6em; line-height: 0.9; }
.device--phone .mock--brenner .m-title { font-size: 2.9em; }
.mock--brenner .m-btn { background: #1d1b18; color: #ece5da; border-radius: 0.2em; }
.mock--brenner .m-kicker { color: #a8703c; opacity: 1; font-weight: 700; }
.wood { position: relative; aspect-ratio: 4 / 5; border-radius: 0.3em; overflow: hidden; background:
  radial-gradient(ellipse 12% 6% at 30% 40%, #6d4524 0 40%, transparent 70%),
  radial-gradient(ellipse 9% 5% at 70% 72%, #6d4524 0 40%, transparent 70%),
  repeating-linear-gradient(88deg, #b98452 0 0.6em, #a8733f 0.6em 0.9em, #c28f5c 0.9em 1.8em, #9c6936 1.8em 2em),
  #b07a45; }
.wood::after { content: "Meisterbetrieb"; position: absolute; left: 1.2em; bottom: 1.2em; padding: 0.6em 1em; background: #ece5da; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.device--phone .wood { aspect-ratio: 4 / 3; }
.m-tile { aspect-ratio: 1; border-radius: 0.3em; position: relative; display: flex; align-items: end; padding: 1em; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; }
.m-tile--a { background: repeating-linear-gradient(0deg, #6b4a2e 0 1.2em, #7b5634 1.2em 2.8em), #6b4a2e; }
.m-tile--b { background: linear-gradient(160deg, #d8c3a5, #b38f65); color: #1d1b18; }
.m-tile--c { background: repeating-linear-gradient(90deg, #2e2a25 0 0.3em, #3a352f 0.3em 2.4em); }
.device--phone .m-tile { aspect-ratio: 16 / 9; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid #1d1b18; }
.steps3 div { padding: 1.2em 1em 0 0; font-size: 0.9em; }
.steps3 b { display: block; font-size: 2em; font-weight: 800; color: #a8703c; }
.device--phone .steps3 { grid-template-columns: 1fr; }
.mock--brenner .m-footer { background: #1d1b18; color: #ece5da; }

/* ---------- 3. Linnen & Ton – concept store ---------------------------------- */
.mock--linnen { background: #f6f1ea; color: #2b2420; font-family: "Manrope", sans-serif; }
.mock--linnen .m-logo, .mock--linnen .m-title, .mock--linnen .m-h { font-family: "Cormorant", Georgia, serif; font-weight: 500; }
.mock--linnen .m-logo { font-size: 1.7em; letter-spacing: 0.02em; }
.mock--linnen .m-title { font-size: 4.8em; letter-spacing: -0.02em; }
.mock--linnen .m-title em { color: #a5553a; }
.mock--linnen .m-btn { background: transparent; border: 1px solid #2b2420; color: #2b2420; }
.mock--linnen .m-hero { text-align: center; grid-template-columns: 1fr; justify-items: center; }
.mock--linnen .m-text { margin-inline: auto; }
.arch { width: 60%; max-width: 30em; aspect-ratio: 5 / 3; border-radius: 50% 50% 0.4em 0.4em / 80% 80% 0.4em 0.4em; background: linear-gradient(180deg, #d9cbb8, #c9b59c); position: relative; overflow: hidden; }
.device--phone .arch { width: 100%; aspect-ratio: 4 / 4; }
.arch::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 22%; aspect-ratio: 3 / 4; translate: -50% 0; background: #a5553a; border-radius: 40% 40% 30% 30% / 60% 60% 20% 20%; }
.arch::after { content: ""; position: absolute; left: 30%; bottom: 0; width: 12%; aspect-ratio: 1; background: #9aa58b; border-radius: 50% 50% 20% 20%; }
.m-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; }
.device--phone .m-prods { grid-template-columns: 1fr 1fr; }
.m-prod { display: grid; gap: 0.5em; font-size: 0.85em; }
.m-prod__img { aspect-ratio: 3 / 4; background: #ebe2d6; border-radius: 0.3em; display: grid; place-items: end center; padding-bottom: 18%; }
.m-prod__img::before { content: ""; width: 40%; aspect-ratio: 3 / 4; background: var(--c, #a5553a); border-radius: var(--shape, 45% 45% 30% 30% / 60% 60% 25% 25%); }
.m-prod b { font-weight: 600; }
.m-prod span { color: #7a6c61; }
.m-banner { display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 2em 2.4em; background: #2b2420; color: #f6f1ea; border-radius: 0.3em; }
.device--phone .m-banner { flex-direction: column; align-items: start; padding: 1.4em; gap: 1em; }
.m-banner .m-btn { border-color: #f6f1ea; color: #f6f1ea; }
.mock--linnen .m-footer { border-top: 1px solid #ddd2c4; color: #7a6c61; }

/* ---------- 4. Betreuungsbüro Wendt – legal guardianship -------------------- */
.mock--wendt { background: #f3f6f7; color: #16283a; font-family: "Manrope", sans-serif; font-size: calc(100cqi / 66); }
.device--phone .mock--wendt { font-size: calc(100cqi / 21); }
.mock--wendt .m-util { display: flex; justify-content: end; gap: 1.6em; padding: 0.6em 3em; background: #16283a; color: #dfe8ec; font-size: 0.75em; }
.device--phone .mock--wendt .m-util { padding: 2.9em 1.4em 0.6em; justify-content: start; }
.device--phone .mock--wendt .m-nav { padding-top: 1em; }
.mock--wendt .m-util b { font-weight: 700; }
.mock--wendt .m-logo { font-weight: 700; font-size: 1.2em; letter-spacing: -0.01em; }
.mock--wendt .m-logo::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; border-radius: 50% 50% 50% 0; background: #2f6f6a; vertical-align: -0.1em; }
.mock--wendt .m-title { font-weight: 700; letter-spacing: -0.03em; font-size: 3.4em; }
.device--phone .mock--wendt .m-title { font-size: 2.2em; }
.mock--wendt .m-h { font-weight: 700; letter-spacing: -0.02em; }
.mock--wendt .m-btn { background: #2f6f6a; color: #fff; border-radius: 0.5em; }
.reach { background: #fff; border-radius: 1em; padding: 2em; box-shadow: 0 1.2em 3em -1.6em rgba(22, 40, 58, 0.35); display: grid; gap: 0.8em; }
.reach__status { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 700; color: #2f6f6a; font-size: 0.9em; }
.reach__status::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: #3fa46a; box-shadow: 0 0 0 0.3em rgba(63, 164, 106, 0.2); }
.reach__phone { font-size: 1.9em; font-weight: 700; letter-spacing: -0.02em; }
.reach small { color: #5a6b78; }
.m-card { background: #fff; border-radius: 1em; padding: 1.6em; display: grid; gap: 0.6em; font-size: 0.95em; }
.m-card::before { content: ""; width: 2.4em; height: 2.4em; border-radius: 0.7em; background: var(--c, #dcebe9); }
.m-card b { font-size: 1.1em; }
.m-card span { color: #5a6b78; }
.mock--wendt .m-footer { background: #e3eaed; color: #3c4d5a; }