/* =====================================================================
   Beispiel-Entwürfe im Hero (js/work.js)
   1. Kästen im Hero   2. Vergrößerte Ansicht   3. Mini-Websites
   ===================================================================== */

/* ---------- 1. Kästen im Hero ---------- */
.hero__top { align-items: flex-start; flex-wrap: wrap; }
/* eigene Zeile unter dem Label, mittig und groß */
.hero__work {
  --work-w: clamp(180px, min(26vw, 31vh), 380px);
  flex-basis: 100%;
  display: grid; justify-items: center; gap: 14px;
  margin-top: clamp(8px, 2vh, 24px);
}
.work-caption { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.work-row { display: grid; grid-template-columns: repeat(3, var(--work-w)); gap: clamp(14px, 2vw, 28px); }

.work { position: relative; display: grid; align-content: start; gap: 9px; }
.work--chor { --work-bg: #E7DCEA; }
.work--handwerk { --work-bg: #E8DAC6; }
.work--zahnarzt { --work-bg: #D3E8E7; }
.work__frame {
  display: block; padding: 9%;
  border-radius: 14px;
  background: var(--work-bg);
  box-shadow: 0 10px 24px -16px rgba(var(--shadow), .35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .2s;
}
.work__screen {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 5px; background: #fff;
  box-shadow: 0 6px 16px -8px rgba(var(--shadow), .45);
  container-type: inline-size;
  pointer-events: none;
}
.work__meta { display: grid; gap: 3px; padding-left: 2px; }
.work__meta b { font: 700 15px/1.15 var(--f-body); }
.work__meta small { font: 500 11.5px/1.25 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--s-muted); }
.work__hit {
  position: absolute; inset: 0; z-index: 2;
  padding: 0; border: 0; border-radius: 14px;
  background: transparent; cursor: zoom-in;
}
.work__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.work:hover .work__frame { transform: translateY(-4px); box-shadow: 0 18px 32px -18px rgba(var(--shadow), .5); }
.work.is-away .work__frame { opacity: 0; transition: none; }
.no-js .hero__work { display: none; }

/* flache Bildschirme (Laptops): Abstände enger, damit Titel und Buttons im Bild bleiben */
@media (max-height: 860px) and (min-width: 701px) {
  .hero__inner { gap: 22px; padding-top: calc(var(--nav-h) + 26px); }
  .hero__work { --work-w: clamp(170px, min(24vw, 27vh), 380px); margin-top: 0; gap: 10px; }
}
@media (max-width: 1100px) {
  .work-row { width: 100%; max-width: 860px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .work-caption__hint { display: none; }
  .work-row { gap: 8px; }
  .work__frame { padding: 7%; border-radius: 10px; }
  .work__meta b { font-size: 12px; }
  .work__meta small { font-size: 9.5px; }
}

/* ---------- 2. Vergrößerte Ansicht ---------- */
html { scrollbar-gutter: stable; }
html.work-open { overflow: hidden; }

.work-modal {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--fg);
  overflow: hidden;
}
.work-modal[open] { display: grid; place-items: center; }
.work-modal::backdrop { background: transparent; }
.work-modal__shade {
  position: absolute; inset: 0;
  background: rgba(var(--shadow), .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.work-modal__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(1200px, 100vw - 48px);
  height: min(880px, 100vh - 48px); height: min(880px, 100dvh - 48px);
  border-radius: 16px; overflow: hidden;
  background: #ECEEF1;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .5);
  transform-origin: 0 0;
}
.work-modal__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid rgba(var(--shadow), .1);
}
.work-modal__dots { display: flex; gap: 7px; }
.work-modal__dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.work-modal__dots i:nth-child(2) { background: #FEBC2E; }
.work-modal__dots i:nth-child(3) { background: #28C840; }
.work-modal__title {
  flex: 1; min-width: 0;
  padding: 8px 14px; border-radius: 8px;
  background: #fff; color: #4A5260;
  font: 12.5px/1.2 var(--f-mono); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.work-modal__model {
  padding: 8px 12px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent);
  font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.work-modal__close {
  flex: none; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; cursor: pointer;
  transition: transform .4s var(--ease-out);
}
.work-modal__close:hover { transform: rotate(90deg); }
.work-modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.work-modal__screen {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff;
  container: mini-modal / inline-size;
}
.work-modal__screen:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

@media (max-width: 700px) {
  .work-modal__panel { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .work-modal__dots, .work-modal__model { display: none; }
  .work-modal__bar { padding: 8px 8px 8px 10px; gap: 8px; }
}

/* ---------- 3. Mini-Websites ----------
   Alle Maße in em einer Einheit --u (1 % der Fensterbreite) – dadurch sieht die
   Seite im kleinen Kasten aus wie ein Screenshot und im großen Fenster lesbar. */
.ms {
  --u: 1cqw;
  --ms-bg: #fff; --ms-ink: #1B2532; --ms-acc: #1E56A0; --ms-card: #F4F4F2;
  --ms-head: var(--f-body);
  --ms-muted: color-mix(in srgb, var(--ms-ink) 66%, transparent);
  --ms-line: color-mix(in srgb, var(--ms-ink) 12%, transparent);
  min-height: 100%;
  font-size: var(--u); font-family: var(--f-body); line-height: 1.5;
  color: var(--ms-ink); background: var(--ms-bg);
  text-align: left;
}
.work-modal__screen .ms { --u: max(1cqw, 9.5px); }
.ms svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Text */
.ms-eyebrow { margin-bottom: 1.1em; font-size: 1.05em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); }
.ms-h1 { margin-bottom: .32em; font-family: var(--ms-head); font-size: 5.4em; line-height: 1.02; letter-spacing: -.02em; }
.ms-h1 em { font-style: normal; color: var(--ms-acc); }
.ms-h2 { margin-bottom: .55em; font-family: var(--ms-head); font-size: 3.1em; line-height: 1.1; letter-spacing: -.015em; }
.ms-h3 { margin: .55em 0 .3em; font-size: 1.55em; font-weight: 700; line-height: 1.25; }
.ms-p { font-size: 1.3em; line-height: 1.6; color: var(--ms-muted); }
.ms-lead { max-width: 34em; font-size: 1.55em; line-height: 1.55; color: var(--ms-muted); }

/* Bausteine */
.ms-row { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 2.6em; }
.ms-row--center { justify-content: center; }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85em 1.6em; border-radius: 99em;
  background: var(--ms-acc); color: #fff;
  font-size: 1.2em; font-weight: 600; white-space: nowrap;
}
.ms-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 .1em currentColor; }
.ms-btn--block { display: flex; width: 100%; }
.ms-sec { padding: 7em 4.5em; }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; margin-top: 3em; }
.ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ms-card { padding: 2.6em; border-radius: 1.4em; background: var(--ms-card); }
.ms-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5em; align-items: center; }
.ms-split--top { align-items: start; }
.ms-quote { padding: 3.4em; border-radius: 1.6em; background: var(--ms-card); }
.ms-quote p { margin-bottom: .8em; font-family: var(--ms-head); font-size: 2.2em; line-height: 1.3; }
.ms-quote span { font-size: 1.15em; color: var(--ms-muted); }
.ms-contact { display: grid; justify-items: center; text-align: center; background: var(--ms-card); }
.ms-contact .ms-lead { margin-bottom: 1.6em; }
.ms-contact .ms-row { margin: 0 0 2.4em; }
.ms-info { display: inline-flex; align-items: center; gap: .5em; font-size: 1.2em; color: var(--ms-muted); }
.ms-info svg { width: 1.3em; height: 1.3em; color: var(--ms-acc); }
.ms-foot { display: flex; justify-content: space-between; gap: 2em; padding: 2.6em 4.5em; border-top: 1px solid var(--ms-line); }
.ms-foot span { font-size: 1.1em; color: var(--ms-muted); }

/* Kopfzeile */
.ms-nav { display: flex; align-items: center; gap: 2.5em; padding: 1.8em 4.5em; }
.ms-logo { display: inline-flex; align-items: center; gap: .6em; margin-right: auto; font-size: 1.5em; }
.ms-logo svg { width: 1.6em; height: 1.6em; color: var(--ms-acc); }
.ms-logo > span { display: grid; line-height: 1.1; }
.ms-logo b { font-weight: 700; }
.ms-logo small { font-size: .62em; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ms-links { display: flex; gap: 2.2em; font-size: 1.2em; color: var(--ms-muted); }
.ms-nav__note { font-size: 1.15em; color: var(--ms-muted); }

/* Startbereiche */
.ms-hero { position: relative; }
.ms-hero__img { position: relative; background: var(--img) center 30% / cover; }

/* --- Chor: festlich, Serifenschrift, Bordeaux & Gold --- */
.ms--chor { --ms-bg: #FBF8F3; --ms-ink: #2A1D27; --ms-acc: #7B2D4B; --ms-gold: #DDBB80; --ms-card: #F3ECE6; --ms-head: Georgia, 'Times New Roman', serif; }
.ms--chor .ms-h1, .ms--chor .ms-h2 { font-weight: 400; }
.ms--chor .ms-logo b { font-family: var(--ms-head); font-size: 1.15em; font-weight: 400; }
.ms-hero--photo {
  display: flex; align-items: flex-end;
  min-height: 52em; padding: 8em 4.5em 6.5em;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(28, 14, 24, .88) 0%, rgba(28, 14, 24, .55) 45%, rgba(28, 14, 24, .08) 100%),
    var(--img) center 45% / cover;
}
.ms-hero--photo .ms-hero__text { max-width: 54em; }
.ms-hero--photo .ms-eyebrow { color: var(--ms-gold); }
.ms-hero--photo .ms-h1 em { font-style: italic; color: var(--ms-gold); }
.ms-hero--photo .ms-lead { color: rgba(255, 255, 255, .86); }
.ms-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3em; padding-top: 5em; padding-bottom: 5em; border-bottom: 1px solid var(--ms-line); }
.ms-fact svg { width: 2.6em; height: 2.6em; color: var(--ms-acc); }

/* --- Handwerk: kräftig, Holz & Bernstein --- */
.ms--holz { --ms-bg: #F6F1EA; --ms-ink: #1F1A16; --ms-acc: #C2702A; --ms-card: #FFFFFF; --ms-head: var(--f-display); }
.ms--holz .ms-h1, .ms--holz .ms-h2 { font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: -.01em; }
.ms--holz .ms-nav { background: #1F1A16; color: #F6F1EA; }
.ms--holz .ms-links { color: rgba(246, 241, 234, .72); }
.ms--holz .ms-logo b { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; text-transform: uppercase; }
.ms-hero--split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 52em; background: #1F1A16; color: #F6F1EA; }
.ms-hero--split .ms-hero__text { align-self: center; padding: 5em 4.5em; }
.ms-hero--split .ms-lead { color: rgba(246, 241, 234, .75); }
.ms-badge { position: absolute; left: 2.4em; bottom: 2.4em; padding: .7em 1.2em; border-radius: .6em; background: var(--ms-acc); color: #fff; font-size: 1.2em; font-weight: 700; }
.ms-stats { display: flex; gap: 3em; margin-top: 3.4em; padding-top: 2.4em; border-top: 1px solid rgba(246, 241, 234, .15); }
.ms-stats span { display: grid; font-size: 1.1em; color: rgba(246, 241, 234, .65); }
.ms-stats b { font-family: var(--f-display); font-size: 2.1em; font-weight: 800; line-height: 1.15; color: #F6F1EA; }
.ms--holz .ms-card { box-shadow: 0 .3em 1.4em rgba(31, 26, 22, .07); }
.ms-num { font-family: var(--f-display); font-size: 2.6em; font-weight: 900; color: var(--ms-acc); }
.ms-sec--dark { background: #2A231D; color: #F6F1EA; }
.ms-sec--dark .ms-p { color: rgba(246, 241, 234, .72); }
.ms-gallery > div { display: grid; gap: 1.2em; }
.ms-wood {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 1em;
  box-shadow: inset 0 -5em 5em -4em rgba(0, 0, 0, .35);
}
/* Lichtreflex wie auf geöltem Holz */
.ms-wood::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 25% 15%, rgba(255, 255, 255, .28), transparent 55%); }
.ms-wood--1 { background: linear-gradient(transparent 60%, rgba(0, 0, 0, .28) 60% 64%, transparent 64%), repeating-linear-gradient(90deg, #C99A62 0 .9em, #BF8E55 .9em 1.6em, #D3A66E 1.6em 2.3em); }
.ms-wood--2 { background: linear-gradient(90deg, transparent 49.5%, rgba(0, 0, 0, .4) 49.5% 50.5%, transparent 50.5%), repeating-linear-gradient(90deg, #5B3B26 0 1.2em, #6A4630 1.2em 1.6em, #4E3220 1.6em 2.7em); }
.ms-wood--3 { background: repeating-linear-gradient(180deg, #E2C9A2 0 2.2em, #B99A70 2.2em 2.6em); }
.ms--holz .ms-contact { background: #EFE5D8; }

/* --- Zahnarzt: ruhig, hell, Petrol --- */
.ms--zahn { --ms-bg: #F6FAFA; --ms-ink: #12343B; --ms-acc: #1F8A87; --ms-card: #FFFFFF; }
.ms--zahn .ms-h1, .ms--zahn .ms-h2 { font-weight: 650; letter-spacing: -.03em; }
.ms-hero--card { padding: 0 3em 3em; }
.ms-hero--card .ms-hero__img {
  display: flex; align-items: center; justify-content: space-between; gap: 3em;
  min-height: 50em; padding: 4em 4.5em;
  border-radius: 2.4em; overflow: hidden; color: #fff;
  background:
    linear-gradient(90deg, rgba(10, 40, 45, .86), rgba(10, 40, 45, .4) 55%, rgba(10, 40, 45, .1)),
    var(--img) center 35% / cover;
}
.ms-hero--card .ms-hero__text { max-width: 46em; }
.ms-hero--card .ms-eyebrow { color: #9FE0DC; }
.ms-hero--card .ms-h1 em { color: #9FE0DC; }
.ms-hero--card .ms-lead { color: rgba(255, 255, 255, .86); }
.ms-book { flex: none; width: 30em; padding: 2.4em; border-radius: 1.8em; background: #fff; color: var(--ms-ink); box-shadow: 0 2em 4em -1.5em rgba(0, 0, 0, .45); }
.ms-book__title { display: flex; align-items: center; gap: .5em; margin-bottom: .6em; font-size: 1.5em; font-weight: 700; }
.ms-book__title svg { width: 1.2em; height: 1.2em; color: var(--ms-acc); }
.ms-book__label { margin: 1.4em 0 .7em; font-size: 1em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); }
.ms-book .ms-btn { margin-top: 1.8em; }
.ms-chips { display: flex; flex-wrap: wrap; gap: .7em; }
.ms-chips span { padding: .5em 1em; border: .1em solid var(--ms-line); border-radius: 99em; font-size: 1.1em; }
.ms-chips .is-on { background: var(--ms-acc); border-color: var(--ms-acc); color: #fff; }
.ms-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; }
.ms-days span { display: grid; place-items: center; padding: .55em 0; border: .1em solid var(--ms-line); border-radius: .8em; font-size: 1.3em; font-weight: 700; line-height: 1.2; }
.ms-days small { font-size: .7em; font-weight: 500; color: var(--ms-muted); }
.ms-days .is-on { background: var(--ms-acc); border-color: var(--ms-acc); color: #fff; }
.ms-days .is-on small { color: rgba(255, 255, 255, .8); }
.ms--zahn .ms-card { border: 1px solid var(--ms-line); }
.ms--zahn .ms-card svg { width: 2.8em; height: 2.8em; padding: .6em; border-radius: .8em; background: color-mix(in srgb, var(--ms-acc) 12%, #fff); color: var(--ms-acc); }
.ms-hours { display: grid; grid-template-columns: 1fr auto; margin: 1.2em 0 2em; font-size: 1.3em; }
.ms-hours > * { padding: .7em 0; border-bottom: 1px solid var(--ms-line); }
.ms-hours span { color: var(--ms-muted); }
.ms-hours b { font-weight: 600; text-align: right; }
.ms-note { display: flex; align-items: center; gap: .6em; }
.ms-note svg { width: 1.2em; height: 1.2em; color: var(--ms-acc); }
.ms-cal { padding: 2.6em; border: 1px solid var(--ms-line); border-radius: 1.8em; background: #fff; box-shadow: 0 1.5em 3em -2em rgba(18, 52, 59, .35); }
.ms-cal__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4em; }
.ms-cal__head b { font-size: 1.7em; }
.ms-cal__head span { font-size: 1.1em; color: var(--ms-muted); }
.ms-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5em; margin-bottom: 1.8em; text-align: center; }
.ms-cal__grid i { padding-bottom: .4em; font-size: 1em; font-style: normal; color: var(--ms-muted); }
.ms-cal__grid span { padding: .45em 0; border-radius: .6em; font-size: 1.2em; }
.ms-cal__grid .is-free { background: color-mix(in srgb, var(--ms-acc) 12%, #fff); color: var(--ms-acc); font-weight: 600; }
.ms-cal__grid .is-on { background: var(--ms-acc); color: #fff; font-weight: 700; }
.ms--zahn .ms-contact { background: color-mix(in srgb, var(--ms-acc) 10%, #fff); }

/* Große Ansicht auf schmalen Bildschirmen: Mini-Websites stapeln sich wie echte Handy-Seiten */
@container mini-modal (max-width: 900px) {
  .ms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-hero--card .ms-hero__img { flex-direction: column; align-items: stretch; }
  .ms-book { width: auto; }
}
@container mini-modal (max-width: 620px) {
  .ms-nav { gap: 1.2em; padding: 1.4em 1.8em; }
  .ms-links, .ms-nav__note { display: none; }
  .ms-nav .ms-btn { padding: .7em 1.1em; font-size: 1.05em; }
  .ms-sec { padding: 4.5em 1.8em; }
  .ms-h1 { font-size: 3.6em; }
  .ms-h2 { font-size: 2.4em; }
  .ms-hero--photo { min-height: 0; padding: 14em 1.8em 4em; }
  .ms-hero--split { grid-template-columns: 1fr; }
  .ms-hero--split .ms-hero__img { min-height: 30em; order: -1; }
  .ms-hero--split .ms-hero__text { padding: 4em 1.8em; }
  .ms-hero--card { padding: 0 1em 1em; }
  .ms-hero--card .ms-hero__img { padding: 10em 1.6em 1.6em; }
  .ms-facts, .ms-grid, .ms-grid--4, .ms-split { grid-template-columns: minmax(0, 1fr); }
  .ms-stats { flex-wrap: wrap; gap: 2em; }
  .ms-foot { flex-direction: column; gap: .6em; padding: 2em 1.8em; }
}