/* Desktop revision 3. Presentation only; original demonstration content and scripts. */
.calm-scene-wash { display:none; }
@media (min-width:1100px) {
  html[data-design="calm"] {
    --calm-blue:#f5f7f7; --calm-warm:#f8f8f5; --calm-line:#dfe6e8;
    --calm-shadow:0 2px 5px rgba(45,63,74,.025),0 16px 44px rgba(45,63,74,.055);
    --calm-content:min(1000px,calc(100vw - 160px)); --calm-inset:64px;
    --section-space:clamp(160px,12vw,208px); --step-space:clamp(136px,10vw,176px);
  }
  /* Original fold, devices and screen contrast; only the room is quieted. */
  html[data-design="calm"] body { padding-top:64px; }
  html[data-design="calm"] .kopf { position:fixed;top:0;left:0;right:0;box-shadow:0 1px 0 rgba(68,86,98,.07); }
  html[data-design="calm"] .hero-band { background:#fff; }
  html[data-design="calm"] .hero-hinter { background:url('/static/demo/bilder/hero-lager-960.jpg') right bottom / cover no-repeat;filter:none;opacity:.14; }
  html[data-design="calm"] .calm-scene-wash { display:block;position:absolute;inset:0;width:1916px;height:901px;max-width:none;z-index:4;pointer-events:none;user-select:none; }
  html[data-design="calm"] .buehne.oben :is(.buehne-bild,.calm-scene-wash) { mask-image:linear-gradient(to bottom,transparent 0,#000 13%); }
  html[data-design="calm"] .buehne.rand .calm-scene-wash { mask-image:linear-gradient(to right,transparent 0,#000 7%); }
  /* Headings use colour alone; the template contains no decorative underlines. */
  html[data-design="calm"] :is(.ich,.ab) h2 .akzent { color:#568fa1; }

  /* One text axis, with wider room only for the paired illustrations. */
  html[data-design="calm"] :is(#kosten,#termin,#demo) > .w1000 { width:var(--calm-content);max-width:none;padding:0; }
  html[data-design="calm"] #zeitleiste > .w1000 { width:calc(var(--calm-content) + 2 * var(--calm-inset));max-width:none;padding:0; }

  /* A separate, generous team row. */
  html[data-design="calm"] .ich { width:calc(var(--calm-content) + 2 * var(--calm-inset));max-width:none;border-radius:20px;box-shadow:var(--calm-shadow);padding-inline:var(--calm-inset);padding-bottom:0; }
  html[data-design="calm"] .ich-text p { margin-bottom:1.2em; }
  html[data-design="calm"] .ich-text p:last-child { margin-bottom:0; }
  html[data-design="calm"] .ich-team { margin:52px -64px 0;padding:40px 64px 44px;background:linear-gradient(180deg,#fafbf9,var(--calm-blue));border-top:1px solid #edf0ef;border-radius:0 0 20px 20px; }
  html[data-design="calm"] .ich-team-reihe { grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;align-items:start;justify-content:stretch; }
  html[data-design="calm"] .ich-team-reihe img { width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply; }
  html[data-design="calm"] .ich-team-reihe figcaption { padding:14px 0 0;font-size:14px;line-height:1.6; }
  html[data-design="calm"] .ich-team-reihe figcaption b { font-size:16px;line-height:1.4;margin-bottom:8px; }

  /* Consistent section rhythm; illustration groups align with the text's centre. */
  html[data-design="calm"] .ab { margin-top:var(--section-space); }
  html[data-design="calm"] #ablauf.schritte6 { margin-bottom:0; }
  html[data-design="calm"] #ablauf > .w1000 { width:calc(100% - 100px);max-width:1220px;padding:0; }
  html[data-design="calm"] #ablauf .w1000 > h2 { width:var(--calm-content);max-width:none;margin:0 auto 96px; }
  html[data-design="calm"] #ablauf.schritte6 .pfad > .schritt:not(:last-child) { margin-bottom:var(--step-space); }
  html[data-design="calm"] #ablauf .pfad .schritt { grid-template-columns:46% 46%;column-gap:0;justify-content:space-between;align-items:start; }
  html[data-design="calm"] #ablauf .pfad .schritt-bild { align-self:center;justify-self:center;width:100%;max-width:none;background:none;padding:0;border-radius:0; }
  html[data-design="calm"] #ablauf .schritt-text p { margin-bottom:1em;line-height:1.65; }
  html[data-design="calm"] #ablauf .schritt-text p:last-child { margin-bottom:0; }
  html[data-design="calm"] #ablauf .schritt-text h3 { margin-bottom:24px;line-height:1.3; }
  html[data-design="calm"] #ablauf .schritt-nr { margin-bottom:12px;font-size:14px;font-weight:500;letter-spacing:.025em;text-transform:none;color:#677c87; }
  html[data-design="calm"] #ablauf .fragen li::before { background:var(--ink); }
  html[data-design="calm"] #ablauf .kette .ergebnis::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23445662' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10h19M13 2.5l8 7.5-8 7.5'/%3E%3C/svg%3E"); }
  /* Optical sizing respects each illustration's aspect ratio and live screen. */
  html[data-design="calm"] #ablauf .pfad :is(.s2-bild,.s3-bild,.s6-bild) { position:relative;isolation:isolate;min-height:410px; }
  html[data-design="calm"] #ablauf .pfad :is(.s2-bild,.s3-bild,.s6-bild)::before { content:"";position:absolute;z-index:-1;inset:8% -3% 0;background:radial-gradient(ellipse at 50% 65%,#f3f6f5 0%,rgba(247,249,248,.65) 40%,rgba(255,255,255,0) 72%);pointer-events:none; }
  html[data-design="calm"] #ablauf .pfad .s2-bild > img { width:450px;max-width:100%;height:auto;object-fit:contain; }
  html[data-design="calm"] #ablauf .pfad .s3-bild > img { width:450px;max-width:100%;height:auto;object-fit:contain; }
  html[data-design="calm"] #ablauf .pfad .s6-bild > img { width:500px;max-width:100%;height:auto;object-fit:contain; }
  html[data-design="calm"] #ablauf .pfad :is(.s5-bild,.s7-bild) { max-width:450px; }
  html[data-design="calm"] #ablauf .pfad :is(.s5-bild,.s7-bild) { min-height:410px;display:flex;align-items:center; }
  html[data-design="calm"] #ablauf .pfad .galerie3 .schritt-bild { align-self:start; }
  html[data-design="calm"] #ablauf .s1-weg { max-width:330px; }
  html[data-design="calm"] #ablauf :is(.s1-original,.s1-shop,.entwurf) { box-shadow:var(--calm-shadow);border-color:var(--calm-line); }
  html[data-design="calm"] #ablauf .pfad .schritt-ew .schritt-bild { display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:28px 16px;aspect-ratio:auto;max-width:550px; }
  html[data-design="calm"] #ablauf .pfad .schritt-ew .entwurf { grid-column:1;width:100%; }
  html[data-design="calm"] #ablauf .pfad .schritt-ew .schritt-bild > .ew-angelika { display:block;position:static;grid-column:2;grid-row:1;align-self:center;width:84px;height:auto;margin:0;object-fit:contain; }
  html[data-design="calm"] #ablauf .ew-schritte { grid-column:1/-1; }
  html[data-design="calm"] #ablauf .pfad-linie { background:#e7edee;width:1px; }
  html[data-design="calm"] #ablauf .pfad-linie i { background:#cedde2; }
  html[data-design="calm"] #ablauf .pfad-nr { width:36px;height:36px;margin-left:-18px;background:#fff;border:1px solid #dce5e8;color:#75909b;font-size:15px;font-weight:500; }
  html[data-design="calm"] #ablauf .pfad-nr.an { background:#f5f8f8;border-color:#cadde3;color:#507e8f; }

  /* Quiet section ground, original interactive content. */
  html[data-design="calm"] #demo { position:relative;isolation:isolate;margin-top:var(--section-space);padding-top:72px;padding-bottom:0; }
  html[data-design="calm"] #demo::before { content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#fff,#f8f9f7 55%,#fff);pointer-events:none; }
  html[data-design="calm"] #demo .sd-fenster { border-color:#d8e3e8;border-radius:16px;box-shadow:var(--calm-shadow); }

  /* A second view of the existing room: light at the edges, white under the chart. */
  html[data-design="calm"] #zeitleiste { position:relative;isolation:isolate;margin-top:0;padding:160px 0 120px; }
  html[data-design="calm"] #zeitleiste::before { content:"";position:absolute;z-index:-2;inset:0;background:url('/static/demo/bilder/hero-lager-960.jpg') 44% 54% / cover no-repeat;filter:saturate(.65);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);pointer-events:none; }
  html[data-design="calm"] #zeitleiste::after { content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.33),rgba(255,255,255,.72) 20%,rgba(255,255,255,.92) 48%,rgba(255,255,255,.76) 72%,rgba(255,255,255,.36));pointer-events:none; }

  /* A light project panel replaces the isolated dark block. */
  html[data-design="calm"] #zeitleiste .karte-dunkel { --hell-akzent:#568fa1;background:rgba(255,255,255,.94);color:var(--ink);padding:56px var(--calm-inset) 60px;border:0;border-radius:20px;box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(215,225,226,.65),0 24px 70px rgba(49,65,69,.07); }
  html[data-design="calm"] #zeitleiste .karte-dunkel h2 { color:var(--ink);margin-bottom:32px; }
  html[data-design="calm"] #zeitleiste .zl { margin-top:32px; }
  html[data-design="calm"] #zeitleiste .zl-wahl { background:#e6ecec;padding:5px; }
  html[data-design="calm"] #zeitleiste .zl-wahl button { color:#566d78; }
  html[data-design="calm"] #zeitleiste .zl-wahl button.an { color:var(--ink);background:#fff;box-shadow:0 1px 4px rgba(45,63,74,.07); }
  html[data-design="calm"] #zeitleiste .zl-zeile { grid-template-columns:44% minmax(0,1fr); }
  html[data-design="calm"] #zeitleiste .zl-leise { color:#687e88; }
  html[data-design="calm"] #zeitleiste .zl-spur { background-image:linear-gradient(90deg,#d9e2e3 1px,transparent 1px);border-right-color:#d9e2e3; }
  html[data-design="calm"] #zeitleiste .zl-marken { background:none;border:0; }
  html[data-design="calm"] #zeitleiste .zl-strich { border-color:#a2c3cd; }
  html[data-design="calm"] #zeitleiste .zl-phase:not(.aktiv) .zl-balken { opacity:.58; }
  html[data-design="calm"] #zeitleiste .zl-info { padding-top:24px;border-top:1px solid #dce5e5;line-height:1.65; }

  html[data-design="calm"] #kosten { margin-top:64px;margin-bottom:0; }
  html[data-design="calm"] #kosten h2 { margin-bottom:40px; }
  html[data-design="calm"] #kosten .preise-ruhig { margin-top:36px;margin-bottom:40px; }
  html[data-design="calm"] #kosten .preise-ruhig:last-child { margin-bottom:0; }
  html[data-design="calm"] #kosten .preise-ruhig td { padding-top:20px;padding-bottom:20px; }
  html[data-design="calm"] #termin { padding:88px 0 104px;margin-bottom:0;background:linear-gradient(180deg,#fff 0%,#f5f7f5 28%,#f4f6f5 100%);border-top:0; }
  html[data-design="calm"] #termin > .w1000 > h2 { max-width:none;text-align:center;margin-bottom:48px; }
}