/* JAKU AI – Abschnitt „Beispiele“: Beispiel-Websites bauen sich im Browser auf.
   Bricolage Grotesque (SIL Open Font License) für Überschriften, selbst gehostet. */
@font-face { font-family: "Bricolage"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Bricolage"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

.h-examples, .hero-combo {
  --h-ink: #121721;
  --h-paper: #f5f7fb;
  --h-line: #e3e7ee;
  --h-muted: #5d6676;
  --h-display: "Bricolage", Inter, system-ui, sans-serif;
}
.h-examples { overflow-x: clip; }
.h-examples-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.h-examples .section-head { margin-bottom: 0; }
.h-examples .section-head .button { margin-top: 30px; }
.h-examples .m-hero h2 { font-family: inherit; }

/* Bühne mit Browser */
.h-stage { position: relative; }
.h-stage::before { content: ""; position: absolute; inset: 6% -8% -6% 8%; background: radial-gradient(closest-side, #2457ff22, transparent 70%); z-index: -1; }
.h-browser { background: #fff; border: 1px solid #d8dde7; border-radius: 16px; box-shadow: 0 2px 4px #10182810, 0 30px 80px -20px #10182838; overflow: hidden; }
.h-browser-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #f3f4f7; border-bottom: 1px solid #e3e6ec; }
.h-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e1; }
.h-url { margin-left: 14px; flex: 1; max-width: 300px; font-size: 12px; color: #6a7282; background: #fff; border-radius: 7px; padding: 4px 12px; transition: opacity 0.3s; }
.h-screen { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; overflow: hidden; }
.h-switch { display: flex; gap: 6px; margin-top: 18px; padding: 5px; width: max-content; background: var(--h-paper); border: 1px solid var(--h-line); border-radius: 999px; }
.h-switch button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 650; font-size: 14px; color: var(--h-muted); cursor: pointer; }
.h-switch button[aria-selected="true"] { background: var(--h-ink); color: #fff; }
.h-note { margin-top: 12px; font-size: 13px; color: var(--h-muted); }

/* Beispiel-Websites (Größen relativ zur Bildschirmbreite) */
.mini { position: absolute; inset: 0; padding: 0 4.5cqw 4cqw; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s; }
.mini.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
.m-nav { display: flex; align-items: center; gap: 3.2cqw; height: 9cqw; font-size: 1.55cqw; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 14%, transparent); }
.m-nav b { font-size: 2.1cqw; margin-right: auto; letter-spacing: -0.01em; }
.m-nav em { font-style: normal; font-weight: 700; padding: 1cqw 2cqw; border-radius: 99cqw; }
.m-hero { flex: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4cqw; align-items: center; padding: 3cqw 0; }
.m-hero small { display: block; font-size: 1.5cqw; font-weight: 600; margin-bottom: 1.6cqw; opacity: 0.75; }
.m-hero h2 { font-size: 4.9cqw; line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.m-hero p { font-size: 1.65cqw; line-height: 1.5; margin-top: 2cqw; opacity: 0.8; }
.m-btn { display: inline-block; font-style: normal; font-weight: 700; font-size: 1.6cqw; padding: 1.4cqw 2.6cqw; border-radius: 1.2cqw; margin-top: 2.8cqw; }
.m-art { position: relative; height: 100%; min-height: 24cqw; border-radius: 2cqw; overflow: hidden; }
.m-art i { position: absolute; display: block; }
.m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.m-tile { padding: 2cqw 2.2cqw; border-radius: 1.4cqw; font-size: 1.45cqw; line-height: 1.35; }
.m-tile b { display: block; font-size: 1.75cqw; margin-bottom: 0.5cqw; }

/* Fotos in den Beispielen */
.m-art img, .m-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-tile img { height: 9cqw; border-radius: 1cqw; margin-bottom: 1.4cqw; }

/* Bäckerei: warm, rund, Foto rechts */
.mini-bakery { background: #fff7ec; color: #3b2414; font-family: var(--h-display); }
.mini-bakery .m-nav em, .mini-bakery .m-btn { background: #c8641f; color: #fff; }
.mini-bakery .m-hero h2 { font-weight: 800; font-size: 4.4cqw; }
.mini .m-nav { flex-shrink: 0; }
.mini-bakery .m-hero { min-height: 0; }
.mini-bakery .m-art { max-height: 46cqw; }
.mini-bakery .m-art { border-radius: 2.4cqw; }
.mini-bakery .m-row { margin-top: auto; }
.mini-bakery .m-tile { background: #fff; padding: 1.2cqw 1.2cqw 1.6cqw; box-shadow: 0 0.3cqw 1.4cqw #3b241414; }
.mini-bakery .m-hero { padding: 2.2cqw 0; }
.mini-bakery .m-tile img { height: 6.6cqw; margin-bottom: 1cqw; }
.mini-bakery .m-tile { font-size: 1.35cqw; }
.mini-bakery .m-tile b, .mini-bakery .m-tile span { padding: 0 0.6cqw; display: block; }

/* Schreinerei: Foto über die ganze Breite, Text darauf */
.mini-wood { background: #16201a; color: #f3ece0; font-family: Inter, system-ui, sans-serif; padding-bottom: 3cqw; }
.mini-wood .m-cover img { filter: saturate(0.75) contrast(0.95); }
.mini-wood .m-cover { position: absolute; inset: 0 0 auto; height: 72%; border-radius: 0; min-height: 0; }
.mini-wood .m-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #16201ae6 0%, #16201a99 45%, #16201a10 80%), linear-gradient(0deg, #16201a 0%, transparent 35%); }
.mini-wood .m-nav, .mini-wood .m-hero, .mini-wood .m-row { position: relative; }
.mini-wood .m-nav { border-color: #f3ece02e; }
.mini-wood .m-nav b { letter-spacing: 0.18em; font-size: 1.8cqw; }
.mini-wood .m-nav em, .mini-wood .m-btn { background: #c9a46a; color: #16201a; border-radius: 0.4cqw; }
.mini-wood .m-hero { grid-template-columns: 0.62fr 0.38fr; }
.mini-wood .m-hero h2 { font-weight: 300; letter-spacing: -0.02em; }
.mini-wood .m-tile { display: grid; grid-template-columns: 7cqw 1fr; grid-template-rows: auto auto; column-gap: 1.4cqw; align-items: center; padding: 1.2cqw; background: #1f2b23; border: 1px solid #f3ece01f; border-radius: 0.4cqw; }
.mini-wood .m-tile img { grid-row: 1 / 3; width: 7cqw; height: 7cqw; margin: 0; border-radius: 0.3cqw; }
.mini-wood .m-tile b { margin: 0; }

/* Steuerkanzlei: hell, Serifenschrift, Foto links */
.mini-law { background: #f6f7f9; color: #13233f; font-family: Georgia, "Times New Roman", serif; }
.mini-law .m-nav, .mini-law .m-hero small, .mini-law .m-hero p, .mini-law .m-tile span, .mini-law .m-btn { font-family: Inter, system-ui, sans-serif; }
.mini-law .m-nav em, .mini-law .m-btn { background: #13233f; color: #fff; border-radius: 0.6cqw; }
.mini-law .m-hero { grid-template-columns: 0.85fr 1.15fr; }
.mini-law .m-hero h2 { font-weight: 400; }
.mini-law .m-art { border-radius: 0.8cqw; }
.mini-law .m-row { border-top: 1px solid #13233f24; gap: 0; }
.mini-law .m-tile { border-radius: 0; padding: 1.8cqw 2cqw 0 0; }
.mini-law .m-tile + .m-tile { padding-left: 2cqw; border-left: 1px solid #13233f1a; }

/* Aufbau-Animation: einmal pro Wechsel, Teil für Teil */
.mini.is-active .m-nav, .mini.is-active .m-hero > div:not(.m-art) > *, .mini.is-active .m-art, .mini.is-active .m-tile { animation: m-build 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.mini.is-active .m-hero > div:not(.m-art) > :nth-child(1) { animation-delay: 0.15s; }
.mini.is-active .m-hero > div:not(.m-art) > :nth-child(2) { animation-delay: 0.25s; }
.mini.is-active .m-hero > div:not(.m-art) > :nth-child(3) { animation-delay: 0.4s; }
.mini.is-active .m-hero > div:not(.m-art) > :nth-child(4) { animation-delay: 0.55s; }
.mini.is-active .m-art { animation-delay: 0.35s; animation-name: m-build-art; }
.mini.is-active .m-tile:nth-child(1) { animation-delay: 0.7s; }
.mini.is-active .m-tile:nth-child(2) { animation-delay: 0.8s; }
.mini.is-active .m-tile:nth-child(3) { animation-delay: 0.9s; }
@keyframes m-build { from { opacity: 0; transform: translateY(1.6cqw); } }
@keyframes m-build-art { from { opacity: 0; transform: scale(0.94); } }

@media (prefers-reduced-motion: reduce) {
  .mini, .mini.is-active { transition: none; }
  .mini.is-active * { animation: none !important; }
}
@media (max-width: 1080px) {
  .h-examples-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .h-switch { width: 100%; }
  .h-switch button { flex: 1; padding: 9px 8px; font-size: 13px; }
  .m-nav span { display: none; }
}

/* Einstieg: Leistungsübersicht + Beispiel-Browser mit Software-Karte */
.hero-offer { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hero-offer a { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.hero-offer a:hover { border-color: #b9c8f5; box-shadow: 0 10px 28px -14px #245cff55; }
.hero-offer .card-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; }
.hero-offer .card-icon svg { width: 20px; height: 20px; }
.hero-offer b { font-size: 15px; line-height: 1.25; }
.hero-offer small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.hero-combo { position: relative; padding-bottom: 0; }
.hero-combo .h-note { padding-right: 0; }
.home-hero h1, .hero .hero-text h1 { font-size: clamp(40px, 4.8vw, 66px); }
/* Software-Folien im selben Browser */
.mini-app { padding: 0; background: #f5f7fb; }
.m-app-link { position: absolute; inset: 0; display: block; }
.m-app-link img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.m-app-badge { position: absolute; left: 3cqw; bottom: 3cqw; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.4cqw; border-radius: 999px; background: var(--h-ink); color: #fff; font: 650 2.2cqw/1.2 Inter, system-ui, sans-serif; box-shadow: 0 1.4cqw 4cqw #12172140; }
.m-app-badge .dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; }
.mini-app.is-active .m-app-link img { animation: m-app-in 0.7s cubic-bezier(.2, .7, .2, 1) both; }
.mini-app.is-active .m-app-badge { animation: m-build 0.6s 0.35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes m-app-in { from { transform: scale(1.04); opacity: 0; } to { transform: none; opacity: 1; } }
.h-switch-sep { width: 1px; margin: 6px 4px; background: var(--h-line); }
@media (prefers-reduced-motion: reduce) { .mini-app.is-active * { animation: none !important; } }
@media (max-width: 760px) {
  .hero-offer { grid-template-columns: 1fr; }
  .h-switch { flex-wrap: wrap; border-radius: 18px; }
  .h-switch button { flex: 1 1 30%; }
  .h-switch-sep { display: none; }
  .m-app-badge { font-size: 3.2cqw; }
}

/* Größere Bühne im Einstieg + Farbschimmer passend zum gezeigten Beispiel */
@property --h-glow { syntax: "<color>"; inherits: true; initial-value: #2457ff; }
.hero-combo .h-stage { --h-glow: #2457ff; transition: --h-glow 0.9s ease; isolation: isolate; }
.hero-combo .h-stage[data-tone="bakery"] { --h-glow: #e58a3a; }
.hero-combo .h-stage[data-tone="wood"] { --h-glow: #3f8a5c; }
.hero-combo .h-stage[data-tone="law"] { --h-glow: #2d5bb9; }
.hero-combo .h-stage[data-tone="time"] { --h-glow: #6a5cf0; }
.hero-combo .h-stage[data-tone="finance"] { --h-glow: #1f6bff; }
.hero-combo .h-stage::before { inset: -22% -20% -18% -24%; background: radial-gradient(closest-side, color-mix(in srgb, var(--h-glow) 55%, transparent), transparent 80%); filter: blur(18px); }
@media (min-width: 1081px) {
  .hero .hero-grid:has(.hero-combo) { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  .hero-combo { grid-template-columns: minmax(0, 1fr); }
  .hero-combo .h-browser { width: calc(100% + clamp(0px, (100vw - 1180px) / 2, 80px)); }
  .hero-combo .h-switch { max-width: calc(100% + clamp(0px, (100vw - 1180px) / 2, 80px)); }
  .hero-combo .h-switch button { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) { .hero-combo .h-stage { transition: none; } }

/* Leistungsseite Webdesign & Hosting */
.web-hero .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; }
.web-hero h1 { font-size: clamp(38px, 4.6vw, 62px); }
.product-badge.web { background: #fff1e4; color: #a4500f; }
#hosting .wrap { isolation: isolate; }
.host-card { margin: 0; position: relative; background: #fff; border: 1px solid #d8dde7; border-radius: 18px; padding: 22px 24px 18px; box-shadow: 0 2px 4px #10182810, 0 30px 80px -20px #10182838; }
.host-card::before { content: ""; position: absolute; inset: -24% -18%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, #2fa86a55, transparent 80%); filter: blur(18px); }
.host-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.host-head b { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.host-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fa86a; box-shadow: 0 0 0 4px #2fa86a26; }
.host-pill { font-size: 12px; font-weight: 700; color: #1d7a4b; background: #e6f6ed; border-radius: 999px; padding: 4px 10px; }
.host-list { margin: 0; }
.host-list div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.host-list dt { color: var(--muted); }
.host-list dd { margin: 0; font-weight: 650; text-align: right; }
.host-card figcaption { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: right; }
.web-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.web-list li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.web-list li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
.web-list h3 { font-size: 18px; margin: 2px 0 6px; }
.web-list p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.section.tinted .faq-grid + .wrap .price-note { margin-top: 72px; }
@media (max-width: 1080px) { .web-hero .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .web-list { grid-template-columns: 1fr; } .web-list li:nth-last-child(2) { border-bottom: 0; } }
.web-hero, #hosting { overflow-x: clip; }

/* Dunkles Design: Browserrahmen und Startseiten-Bausteine */
[data-theme="dark"] .hero-combo, [data-theme="dark"] .h-examples { --h-ink: #e9edf4; --h-paper: #151d29; --h-line: #2a374b; --h-muted: #9ba5b6; }
[data-theme="dark"] .h-browser, [data-theme="dark"] .host-card { border-color: #2a374b; box-shadow: 0 2px 4px #00000040, 0 30px 80px -20px #000000b0; }
[data-theme="dark"] .h-browser-bar { background: #1a2230; border-bottom-color: #2a374b; }
[data-theme="dark"] .h-browser-bar i { background: #39465a; }
[data-theme="dark"] .h-url { background: #0f1620; color: #9ba5b6; }
[data-theme="dark"] .h-switch button[aria-selected="true"] { color: #0c1118; }
[data-theme="dark"] .hero-offer a, [data-theme="dark"] .host-card { background: var(--card); }
[data-theme="dark"] .m-app-badge { background: #0c1118; color: #fff; }
[data-theme="dark"] .product-badge.web { background: #3a2412; color: #f2b27a; }
[data-theme="dark"] .host-pill { background: #12301f; color: #6fd69b; }

/* Fuß der Bühne: Hinweis + Umschalter Computer/Handy */
.h-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 12px; }
.h-foot .h-note { margin: 0; }
.h-view { flex: none; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-paper); }
.h-view button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--h-muted); cursor: pointer; }
.h-view button[aria-pressed="true"] { background: var(--h-ink); color: var(--paper, #fff); }
.h-view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-switch { flex-wrap: wrap; max-width: 100%; }
.h-switch:has(> :nth-child(7)) { border-radius: 22px; }
.m-app-phone { display: none; }

/* Handy-Ansicht: gleicher Inhalt im Handyrahmen, einspaltig */
.h-stage.is-phone .h-browser { width: min(290px, 80%) !important; margin: 0 auto; border: 9px solid #121721; border-radius: 40px; }
.h-stage.is-phone .h-browser-bar { height: 34px; justify-content: center; padding: 0 10px; }
.h-stage.is-phone .h-browser-bar i { display: none; }
.h-stage.is-phone .h-url { margin: 0; max-width: none; text-align: center; font-size: 11px; }
.h-stage.is-phone .h-screen { aspect-ratio: 9 / 17; }
.is-phone .mini { padding: 0 5.5cqw 5cqw; }
.is-phone .m-nav { height: 15cqw; gap: 3cqw; font-size: 3.4cqw; }
.is-phone .m-nav b { font-size: 4.4cqw; }
.is-phone .m-nav span { display: none; }
.is-phone .m-nav em { padding: 2cqw 3.4cqw; }
.is-phone .m-hero, .is-phone .mini-wood .m-hero, .is-phone .mini-law .m-hero, .is-phone .mini-food .m-hero, .is-phone .mini-salon .m-hero, .is-phone .mini-garage .m-hero { grid-template-columns: 1fr; align-content: start; gap: 4.5cqw; padding: 5cqw 0 4cqw; flex: none; }
.is-phone .m-hero small { font-size: 3.4cqw; margin-bottom: 2.4cqw; }
.is-phone .m-hero h2, .is-phone .mini-bakery .m-hero h2 { font-size: 9cqw; }
.is-phone .m-hero p { font-size: 3.6cqw; margin-top: 3cqw; }
.is-phone .m-btn { font-size: 3.6cqw; padding: 2.8cqw 4.6cqw; border-radius: 2cqw; margin-top: 4cqw; }
.is-phone .m-art { min-height: 0; height: 44cqw; max-height: none; }
.is-phone .mini-law .m-art { order: 2; }
.is-phone .m-row { grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: auto; }
.is-phone .m-tile:nth-child(3) { display: none; }
.is-phone .m-tile { font-size: 3cqw; padding: 2.4cqw; }
.is-phone .m-tile b { font-size: 3.6cqw; }
.is-phone .m-tile img { height: 16cqw; }
.is-phone .mini-wood .m-cover { height: 70%; }
.is-phone .mini-wood .m-cover::after { background: linear-gradient(0deg, #16201a 8%, #16201acc 50%, #16201a66 100%); }
.is-phone .mini-wood .m-tile { grid-template-columns: 1fr; padding: 2cqw; }
.is-phone .mini-wood .m-tile img { grid-row: auto; width: 100%; height: 14cqw; margin-bottom: 1.6cqw; }
.is-phone .mini-law .m-row { grid-template-columns: 1fr; }
.is-phone .mini-law .m-tile { padding: 2.4cqw 0; border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid #13233f1a; }
.is-phone .mini-law .m-tile:nth-child(3) { display: block; }
.is-phone .m-app-link img:not(.m-app-phone) { display: none; }
.is-phone .m-app-phone { display: block; object-position: top center; }
.is-phone .m-app-badge { font-size: 3.6cqw; padding: 2cqw 3.6cqw; gap: 2cqw; }
.is-phone .m-app-badge .dot { width: 2.4cqw; height: 2.4cqw; }

/* Restaurant: Bordeaux, Serifen, Speisekarte */
.mini-food { background: #2a1416; color: #f6e9da; font-family: Georgia, "Times New Roman", serif; }
.mini-food .m-nav, .mini-food .m-hero small, .mini-food .m-hero p, .mini-food .m-btn, .mini-food .m-tile span { font-family: Inter, system-ui, sans-serif; }
.mini-food .m-nav { border-color: #f6e9da24; }
.mini-food .m-nav b { font-family: Georgia, serif; font-weight: 400; font-size: 2.4cqw; }
.mini-food .m-nav em, .mini-food .m-btn { background: #e3b26b; color: #2a1416; border-radius: 0.4cqw; }
.mini-food .m-hero { grid-template-columns: 0.9fr 1.1fr; }
.mini-food .m-hero h2 { font-weight: 400; }
.mini-food .m-art { border-radius: 1cqw; }
.m-menu { list-style: none; margin: 2.2cqw 0 0; padding: 0; font: 1.55cqw/1.3 Inter, system-ui, sans-serif; }
.m-menu li { display: flex; gap: 1cqw; padding: 0.9cqw 0; border-bottom: 1px dotted #f6e9da40; }
.m-menu li span { margin-left: auto; color: #e3b26b; }
.mini-food .m-row { grid-template-columns: repeat(3, 1fr); }
.mini-food .m-tile { display: flex; align-items: center; gap: 1.6cqw; padding: 0; }
.mini-food .m-tile img { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; margin: 0; flex: none; }
.mini-food .m-tile b { margin: 0; }
.is-phone .mini-food .m-tile img { width: 12cqw; height: 12cqw; }
.is-phone .m-menu { font-size: 3.2cqw; }
.is-phone .mini-food .m-hero > div:not(.m-art) .m-menu li:nth-child(3) { display: none; }

/* Friseur: hell, Rosé, Foto mit Bogen */
.mini-salon { background: #f8f2ef; color: #2b2024; font-family: Inter, system-ui, sans-serif; }
.mini-salon .m-nav b { font-weight: 300; font-size: 2.6cqw; letter-spacing: -0.02em; }
.mini-salon .m-nav em, .mini-salon .m-btn { background: #a8435d; color: #fff; border-radius: 99cqw; }
.mini-salon .m-hero { grid-template-columns: 1.15fr 0.85fr; }
.mini-salon .m-hero h2 { font-weight: 300; font-size: 5.4cqw; letter-spacing: -0.04em; }
.mini-salon .m-art { border-radius: 40cqw 40cqw 1.4cqw 1.4cqw; }
.mini-salon .m-row { border-top: 1px solid #2b202422; gap: 0; }
.mini-salon .m-tile { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; padding: 1.8cqw 2cqw 0 0; border-radius: 0; }
.mini-salon .m-tile + .m-tile { padding-left: 2cqw; border-left: 1px solid #2b202418; }
.mini-salon .m-tile b { margin: 0; font-weight: 600; }
.mini-salon .m-tile span { color: #a8435d; font-weight: 700; white-space: nowrap; }
.is-phone .mini-salon .m-art { height: 52cqw; }
.is-phone .mini-salon .m-hero h2 { font-size: 10cqw; }
.is-phone .mini-salon .m-row { grid-template-columns: 1fr; }
.is-phone .mini-salon .m-tile { border-left: 0 !important; padding: 2.4cqw 0 !important; border-bottom: 1px solid #2b202418; }
.is-phone .mini-salon .m-tile:nth-child(3) { display: flex; }

/* Autowerkstatt: Anthrazit, Gelb, schräges Foto */
.mini-garage { background: #16181c; color: #fff; font-family: Inter, system-ui, sans-serif; }
.mini-garage .m-nav { border-color: #ffffff1f; }
.mini-garage .m-nav b { font-weight: 800; letter-spacing: -0.02em; }
.mini-garage .m-nav b i { font-style: normal; color: #f5c400; }
.mini-garage .m-nav em, .mini-garage .m-btn { background: #f5c400; color: #16181c; border-radius: 0.4cqw; }
.mini-garage .m-hero { grid-template-columns: 1fr 1fr; }
.mini-garage .m-hero h2 { font-weight: 800; letter-spacing: -0.035em; }
.mini-garage .m-art { border-radius: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.mini-garage .m-tile { background: #22252b; border-left: 0.5cqw solid #f5c400; border-radius: 0.4cqw; display: grid; grid-template-columns: 1fr 8cqw; column-gap: 1.2cqw; align-items: center; padding: 1.2cqw 1.2cqw 1.2cqw 1.8cqw; }
.mini-garage .m-tile img { grid-column: 2; grid-row: 1 / 3; width: 8cqw; height: 6.4cqw; margin: 0; border-radius: 0.3cqw; }
.mini-garage .m-tile b { margin: 0; }
.mini-garage .m-tile span { opacity: 0.7; }
.is-phone .mini-garage .m-art { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
.is-phone .mini-garage .m-tile { grid-template-columns: 1fr; padding: 2cqw 2cqw 2cqw 2.6cqw; }
.is-phone .mini-garage .m-tile img { grid-column: auto; grid-row: auto; width: 100%; height: 13cqw; margin-bottom: 1.4cqw; }

/* Farbschimmer der neuen Beispiele */
.hero-combo .h-stage[data-tone="food"] { --h-glow: #b0413e; }
.hero-combo .h-stage[data-tone="salon"] { --h-glow: #d06b86; }
.hero-combo .h-stage[data-tone="garage"] { --h-glow: #f5c400; }

/* Webdesign-Seite: Bereich „Zum Ausprobieren“ (dunkles Band) */
.section.try { background: #121721; color: #e9edf4; --muted: #a3acbb; --line: #2a3446; }
.section.try .eyebrow { color: #8fb0ff; }
.section.try .section-head p:not(.eyebrow) { color: #a3acbb; }
[data-theme="dark"] .section.try { background: #151d29; }
.ba { position: relative; margin: 8px auto 0; max-width: 1000px; }
.ba-frame, .book-frame { background: #fff; border: 1px solid #2a3446; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px #000000a0; color: #121721; }
.ba-frame .h-browser-bar, .book-frame .h-browser-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #f3f4f7; border-bottom: 1px solid #e3e6ec; }
.ba-frame .h-browser-bar i, .book-frame .h-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e1; }
.ba-frame .h-url, .book-frame .h-url { margin-left: 14px; flex: 1; max-width: 300px; font-size: 12px; color: #6a7282; background: #fff; border-radius: 7px; padding: 4px 12px; }
.ba-screen { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; overflow: hidden; }
.ba-new, .ba-old { position: absolute; inset: 0; }
.ba-new .mini { --h-display: "Bricolage", Inter, system-ui, sans-serif; }
.ba-old { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #d4d0c8; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px #12172140; pointer-events: none; }
.ba-line i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px #00000055; }
.ba-line i::before, .ba-line i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.ba-line i::before { left: 7px; border-right-color: #121721; }
.ba-line i::after { right: 7px; border-left-color: #121721; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-line i, .ba:has(.ba-range:focus-visible) .ba-line i { outline: 3px solid #5b8cff; outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; font: 700 12px/1 Inter, system-ui, sans-serif; background: #121721d9; color: #fff; pointer-events: none; }
.ba-tag-old { left: 14px; }
.ba-tag-new { right: 14px; }
/* Die alte Website: bewusst veraltet */
.old-site { width: 88%; margin: 2.4cqw auto 0; background: #fff; border: 2px outset #eee; font: 1.5cqw/1.35 Verdana, Geneva, sans-serif; color: #000; }
.old-top { display: flex; align-items: baseline; gap: 2cqw; padding: 2cqw; background: linear-gradient(#3a6fc4, #0b3b8c); color: #fff; }
.old-top b { font: bold 3.2cqw "Times New Roman", serif; text-shadow: 2px 2px 0 #000; }
.old-top span { font-style: italic; color: #ffef9f; }
.old-nav { padding: 0.8cqw 2cqw; background: #e8e8e8; border-bottom: 1px solid #999; color: #00c; }
.old-site u { color: #00c; }
.old-body { display: grid; grid-template-columns: 20% 1fr; }
.old-side { display: flex; flex-direction: column; gap: 0.8cqw; padding: 1.6cqw; background: #f0f0d8; border-right: 1px solid #ccc; }
.old-counter { margin-top: 2cqw; font: 1.3cqw monospace; background: #000; color: #0f0; padding: 0.4cqw; text-align: center; }
.old-main { padding: 1.6cqw 2cqw; }
.old-main h3 { font: bold 2.2cqw "Comic Sans MS", "Comic Sans", cursive; color: #c00; margin: 0 0 1.2cqw; }
.old-main img { float: left; width: 14cqw; height: 16cqw; object-fit: cover; height: auto; margin: 0 1.6cqw 1cqw 0; border: 3px ridge #999; filter: saturate(0.6) contrast(0.9); }
.old-main p { margin: 0 0 1cqw; }
.old-new { color: #f00; font-weight: bold; }
.old-small { clear: both; font-size: 1.1cqw; color: #666; }
/* Terminbuchung */
.book { margin-top: 72px; }
.book h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }
.book p { color: #a3acbb; }
.book .checks li { color: #e9edf4; }
.book-form, .book-done { padding: 22px 24px 24px; font-family: Inter, system-ui, sans-serif; }
.book-form fieldset { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.book-form legend { font-size: 13px; font-weight: 700; color: #5d6676; margin-bottom: 8px; }
.book-days { display: contents; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border: 1px solid #d5dbe5; border-radius: 999px; font-size: 14px; font-weight: 600; color: #2b2024; background: #fff; }
.chip small { font-weight: 500; color: #8a7a80; }
.chip input:checked + span { background: #a8435d; border-color: #a8435d; color: #fff; }
.chip input:checked + span small { color: #f6d9e1; }
.chip input:focus-visible + span { outline: 3px solid #5b8cff; outline-offset: 2px; }
.chip.is-busy span { opacity: 0.45; text-decoration: line-through; }
.book-name { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #5d6676; margin-bottom: 16px; }
.book-name input { border: 1px solid #d5dbe5; border-radius: 12px; padding: 11px 14px; font: 500 15px Inter, system-ui, sans-serif; color: #121721; background: #fff; }
.book-submit, .book-again { border: 0; border-radius: 999px; padding: 13px 22px; font: 700 15px Inter, system-ui, sans-serif; background: #a8435d; color: #fff; cursor: pointer; }
.book-again { background: #f3eef0; color: #a8435d; }
.book-done { text-align: center; padding: 48px 28px; }
.book-done:focus { outline: none; }
.book-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f6ee; color: #1d7a4b; font-size: 28px; font-weight: 800; }
.book-done h4 { font-size: 22px; margin: 16px 0 8px; }
.book-done p { color: #5d6676; max-width: 380px; margin: 0 auto 22px; }
@media (max-width: 760px) {
  .ba-screen { aspect-ratio: 4 / 3; }
  .ba-tag { top: 8px; font-size: 11px; }
  .book { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ba-new .mini * { animation: none !important; } }
.mini-salon .m-hero { padding: 2cqw 0; }
.mini-salon .m-art { max-height: 44cqw; }
.mini-salon .m-hero h2 { font-size: 5cqw; }
.is-phone .mini-food .m-nav b, .is-phone .mini-salon .m-nav b { font-size: 4.6cqw; }
.is-phone .mini-food .m-tile { gap: 2cqw; min-width: 0; }
.is-phone .mini-food .m-tile div { min-width: 0; }
.is-phone .mini-food .m-tile img { width: 10cqw; height: 10cqw; }
.is-phone .mini-food .m-tile b { font-size: 3.4cqw; }

/* Hinweise: Demo zum Anklicken, Regler zum Ziehen */
.book-frame { position: relative; overflow: visible; }
.book-frame > .h-browser-bar { border-radius: 16px 16px 0 0; }
.demo-hint { position: absolute; top: -16px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px; background: #f5c400; color: #16181c; font: 700 14px/1 Inter, system-ui, sans-serif; box-shadow: 0 10px 24px #00000040; }
.demo-hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.book-try { margin-top: 16px; padding: 14px 16px; border-left: 3px solid #f5c400; background: #ffffff0d; border-radius: 0 12px 12px 0; color: #e9edf4 !important; }
.book-try b { color: #fff; }
/* Sanftes Aufmerksam-Machen, bis zum ersten Klick */
.book-form:not(.touched) .chip:nth-child(3) span { animation: chip-pulse 1.8s ease-in-out infinite; }
@keyframes chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 #a8435d00; } 50% { box-shadow: 0 0 0 5px #a8435d40; } }
.ba-line em { position: absolute; top: calc(50% + 30px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: #f5c400; color: #16181c; font: 700 12px/1 Inter, system-ui, sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 6px 16px #00000040; }
.ba.touched .ba-line em { display: none; }
@media (prefers-reduced-motion: reduce) { .book-form:not(.touched) .chip span { animation: none; } }

/* Webdesign-Seite: jaku-ai.de läuft langsam durch (Bild, kein Video) */
.scroll-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.scroll-view img { display: block; width: 100%; height: auto; animation: page-scroll 48s ease-in-out 1s infinite alternate; will-change: transform; }
.scroll-shot:hover .scroll-view img { animation-play-state: paused; }
@keyframes page-scroll { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(var(--shift)); } }
@media (prefers-reduced-motion: reduce) { .scroll-view img { animation: none; } }

/* Webdesign-Seite: Branchen in der Region */
.web-branchen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.web-branchen li { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.web-branchen b { font-size: 17px; }
.web-branchen span { color: var(--muted); font-size: 15px; }