/* Product website: supplied designer reference. Black and white controls, orange footer, warm-gray surfaces. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.8909904ab6.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.f3779f1efc.woff2") format("woff2"); }
:root {
  --white: #FFFFFF;
  --sage-pale: #F2F1EA;
  --sage: #FF8C00;      /* leader lines, small dividers; never text (2.1:1) */
  --sage-deep: #000000; /* primary button, step numbers; never a state */
  --ink: #000000;
  --grey: #5E636B;
  --light: #FFB21E;     /* only: a light is on */
  --open: #C8322B;      /* only: a window or door is open */

  --font: Inter, system-ui, sans-serif;
  --gutter: 20px;
  --section-gap: 72px;
  --content: 1200px;
  --measure: 760px;

  --fs-hero: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-body: 18px;
  --fs-small: 14px;  /* minimum text size; the founder chose the reference's 14px over the 15px
                        this file used to declare (DAM-165) */
}

@media (min-width: 720px) {
  :root {
    --gutter: 48px;
    --section-gap: 96px;
    --fs-hero: 54px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-body: 19px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 80px;
    --section-gap: 120px;
    --fs-hero: 68px;
    --fs-h2: 44px;
    --fs-h3: 28px;
    --fs-body: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-hero); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p { margin: 0 0 1em; }

/* Keeps a hyphenated compound like "3D-Dashboard" from breaking at its hyphen. */
.nowrap { white-space: nowrap; }
/* ...except on the narrowest screens (400 % zoom): with WCAG text spacing the word is wider
   than a 320 px viewport, and a break at the hyphen beats horizontal scrolling. */
@media (max-width: 359px) { .nowrap { white-space: normal; } }
strong { font-weight: 600; }

a { color: var(--ink); text-underline-offset: 0.18em; }
a:hover { color: var(--sage-deep); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Anchored sections must clear nothing — the header is not sticky — but keep a
   little air above the heading when a CTA jumps to them. */
[id] { scroll-margin-top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.measure { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  z-index: 10;
}
.skip-link:focus { top: 8px; color: var(--white); }

/* Review-only strip. Rendered only when site.config.json has "review": true;
   it says plainly that this build is unpublished and incomplete. */
.review-banner {
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 1.45;
  padding: 10px var(--gutter);
  margin: 0;
  text-align: center;
}

/* Header ------------------------------------------------------------------ */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter);
}
.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.2;
  margin-right: auto;
}
.brand__name { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.brand__endorsement { font-size: var(--fs-small); color: var(--grey); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* Language switch (DAM-44): both languages are always listed; the current one is marked with
   aria-current and an underline, the other links to the matching page of that language. */
.lang-nav ul {
  display: flex;
  gap: 0 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang-nav a {
  display: inline-block;
  padding: 10px 0;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.lang-nav a:hover,
.lang-nav a[aria-current="page"] { text-decoration: underline; }
/* Section variants of a language link (DAM-49 F1): hidden until the URL names their section; the
   build appends the :target rules that swap one in for the plain page link. */
.lang-nav a[data-section] { display: none; }

/* Below 720px the nav moves to its own row under brand + CTA. */
/* Below 720px: brand and language switch share the first row, the nav takes the second and the
   (long, DAM-44) quote CTA the third, so the headline still starts in the first screen. */
@media (max-width: 719px) {
  .site-header__inner { gap: 4px 12px; padding-top: 12px; padding-bottom: 12px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { gap: 0 14px; }
  .site-nav a { font-size: 16px; padding: 8px 0; }
  .lang-nav { order: 2; }
  .site-header__cta { order: 4; padding: 10px 18px; font-size: 16px; }
}

/* Buttons: full pills, the only rounded shapes on the page ----------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--sage-deep); color: var(--white); }
.btn--primary:hover { background: #303030; color: var(--white); }
.btn--secondary { background: var(--white); color: var(--ink); border-color: var(--grey); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--sage-pale);
  color: var(--grey);
  border-color: var(--grey);
  cursor: not-allowed;
}

/* Secondary text link beside a primary button: visibly subordinate. */
.link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 500;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 28px 0 16px;
}

/* Text helpers --------------------------------------------------------------- */
.eyebrow { color: var(--grey); font-weight: 500; margin-bottom: 0.75em; }
.lead { font-size: calc(var(--fs-body) * 1.08); }
.small { font-size: var(--fs-small); color: var(--grey); }

/* Sections ------------------------------------------------------------------- */
.section { padding: var(--section-gap) 0 0; }
.band { padding: var(--section-gap) 0; margin-top: var(--section-gap); }
.band + .section { padding-top: var(--section-gap); }
.band--sage { background: var(--sage-pale); }

/* Hero: centred statement, picture underneath. */
.hero { padding: 48px 0 0; }
.hero__text { text-align: center; max-width: calc(880px + 2 * var(--gutter)); }
.hero__text .actions { justify-content: center; }
.hero__text .lead { margin-left: auto; margin-right: auto; max-width: 760px; }
@media (min-width: 1100px) { .hero { padding-top: 80px; } }

/* Pictures: square, no frame. */
.picture { margin-top: 40px; margin-bottom: 0; }
.picture figcaption { font-size: var(--fs-small); color: var(--grey); margin-top: 12px; }
/* Rendered pictures (src/data/assets.json): fill the column, keep their own ratio. */
.picture img { display: block; width: 100%; height: auto; background: var(--sage-pale); }

/* The interactive demo (/demo/app/, its own page) framed on /demo/. Under 700 px frame width
   the app stacks floors, light list and light popover (app/demo-layout.css), so phones get a
   tall frame and tablets a square one; the wide 16:10 frame starts where the app's own
   side-by-side layout does. */
.demo-stage__frame {
  display: block;
  width: 100%;
  height: min(80vh, 640px);
  border: 0;
  background: var(--sage-pale);
}
@media (min-width: 720px) {
  .demo-stage__frame { height: auto; aspect-ratio: 1 / 1; max-height: 80vh; }
}
@media (min-width: 1100px) {
  .demo-stage__frame { aspect-ratio: 16 / 10; }
}
.hero .picture figcaption,
.demo-stage figcaption { text-align: center; }

/* Scene and look control, ABOVE the 3D view and outside it (DAM-171). The site runs no script,
   so each segment is an ordinary link to that variant's own page, and the open one is marked
   aria-current="page" - which is also what styles it, so the state a screen reader hears and the
   state the eye sees are one thing and cannot drift apart. One group with every building and
   look in it (DAM-173): nothing hides in a menu or scrolls out of view; on a narrow screen the
   segments wrap onto further lines, and the 20 px radius keeps one line a pill and several lines a
   rounded box whose corners do not cut into the outer segments. */
.demo-scenes {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.segmented {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--grey);
  border-radius: 20px;
}
.segmented__item {
  display: block;
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.segmented__item:hover { background: var(--sage-pale); }
.segmented__item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.segmented__item[aria-current] { background: var(--sage-deep); color: var(--white); }
/* Forced colours (Windows high contrast) drops background colours, so the open segment would
   otherwise read exactly like the closed ones. */
@media (forced-colors: active) {
  .segmented__item[aria-current] { outline: 2px solid currentColor; outline-offset: -2px; }
}

/* Text the visitor copies exactly (the Home Assistant export template). Lines are never
   wrapped: the block scrolls sideways instead, and takes keyboard focus so it can. Square,
   on the pale surface like the placeholder it replaced. The only monospace on the site. */
.code-block {
  margin: 0 0 1.5em;
  padding: 20px 24px;
  overflow-x: auto;
  background: var(--sage-pale);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: pre;
  tab-size: 4;
}
.code-block code { display: block; font: inherit; }

/* Review-only stand-in for approved content that does not exist yet (a picture). The build refuses to emit it when "review" is false, so
   it cannot reach a release. */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  background: var(--sage-pale);
  text-align: center;
}
.split__picture .placeholder { aspect-ratio: 4 / 3; }
.placeholder__label { margin: 0; max-width: 34em; font-size: var(--fs-small); color: var(--grey); }
.placeholder__label strong { color: var(--ink); }

/* Open window / door: red frame + pulse + text label, as in the app. Red and
   deep sage share a lightness, so red always carries a frame and a word. */
.mark-open {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--open);
  font-weight: 500;
  font-size: var(--fs-small);
}
.mark-open__frame {
  width: 64px;
  height: 88px;
  border: 4px solid var(--open);
  background: var(--white);
  animation: open-pulse 1.6s ease-in-out infinite;
}
@keyframes open-pulse {
  50% { outline: 6px solid rgba(200, 50, 43, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .mark-open__frame { animation: none; }
}

/* Detail: text beside picture on wide screens. */
.split { display: grid; gap: 32px; align-items: center; }
.split__picture { margin-top: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* Three-step row. */
.steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
.step p { margin: 0; }
.steps + p { margin-top: 24px; }
/* Four steps (DAM-44 process): two columns from 900 px, four from 1300 px. */
@media (min-width: 900px) {
  .steps--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1300px) {
  .steps--four { grid-template-columns: repeat(4, 1fr); gap: 40px; }
}
.step__num { color: var(--sage-deep); }

/* FAQ: question as heading, answer as paragraph — all visible, no toggles. */
.faq { margin: 32px 0 0; }
.faq__q { font-size: var(--fs-h3); margin: 40px 0 0.4em; }
.faq__q:first-child { margin-top: 0; }
.faq__a { margin: 0; }

/* Quote form ------------------------------------------------------------------ */
.quote-form { margin-top: 32px; }
.field { margin: 0 0 28px; }
.field label { display: block; font-weight: 500; margin-bottom: 8px; }
.field__optional { color: var(--grey); font-weight: 400; }
.field__help { font-size: var(--fs-small); color: var(--grey); margin: 8px 0 0; }
/* Help that must be read before choosing a file (DAM-91: assign rooms before the Home Assistant
   export) sits between label and control, so it keeps its gap below instead of above. */
.field__help--before { margin: 0 0 8px; }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--grey);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--ink); }
.field ::placeholder { color: var(--grey); opacity: 1; }

/* The m² field belongs to the last building bracket only (DAM-142). Where :has() works, it
   appears when that bracket is selected; without it the field simply stays visible, and its
   own help line says which answer it belongs to. The field is never required, so hiding it
   cannot block a submission. */
@supports selector(form:has(select)) {
  .quote-form:not(:has(select[name="gebaeude"] option[value="custom-area"]:checked)) .field--area { display: none; }
}

.form-note { font-size: var(--fs-small); color: var(--grey); }
.form-note a { color: var(--ink); }

/* Shown instead of a working submit while no intake endpoint is authorised. */
.form-unavailable {
  background: var(--sage-pale);
  padding: 14px 18px;
  font-size: var(--fs-small);
  margin: 0 0 16px;
}

/* Footer ----------------------------------------------------------------------- */
.site-footer { background: var(--sage-pale); margin-top: var(--section-gap); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 32px var(--gutter);
}
.site-footer__brand { margin: 0; font-weight: 600; }
.site-footer__category { margin: 4px 0 0; font-size: var(--fs-small); color: var(--grey); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links a { display: inline-block; padding: 10px 0; font-size: var(--fs-small); }

.quote-files { margin: 0 0 28px; }
.quote-files summary { cursor: pointer; font-weight: 500; padding: 16px 0; }
.quote-files .field { margin-top: 20px; }
.field input[type="file"] { max-width: 100%; font-size: var(--fs-small); }
.field input[type="file"]::file-selector-button { font: inherit; padding: 8px; margin-right: 8px; cursor: pointer; }

/* Product — supplied Product_v3.pdf, DAM-135. */
/* --fs-small is the reference's 14px and is the site's minimum text size, as the founder decided
   on 6 November (DAM-165). No text on the site may fall below it, and browser-test.mjs holds
   every page to it, so the header items below use the variable instead of their own 12-13px. */
:root { --orange: #FF8C00; --warm-grey: #F2F1EA; --content: 1000px; --gutter: 32px; --section-gap: 96px; --fs-hero: 40px; --fs-h2: 40px; --fs-h3: 22px; --fs-body: 17px; --fs-small: 14px; --font: Inter, sans-serif; }
/* The brand orange is 2.3:1 on white and cannot carry text. This is the same hue darkened until
   it passes AA for large text (3.73:1 on white, 3.29:1 on the warm gray). Use it only at
   --fs-hero and above, which never drops below 32px; never for body copy. */
:root { --orange-display: #CC6A00; }
body { line-height: 1.45; }
h1,h2,h3 { font-family: Inter, sans-serif; font-weight: 500; letter-spacing: -.025em; line-height: 1.24; }
.container { max-width: calc(1000px + 2 * var(--gutter)); }
.site-header__inner { max-width: calc(1000px + 2 * var(--gutter)); padding: 36px var(--gutter); display: flex; gap: 24px; align-items: end; }
.brand { flex-shrink: 0; margin-right: auto; }
.brand__logo { display: block; width: 150px; height: 89px; object-fit: contain; }
.site-nav ul { gap: 24px; }
.site-nav a { font-size: var(--fs-small); font-weight: 400; white-space: nowrap; padding: 10px 0; }
.site-header__cta { font-size: var(--fs-small); min-height: 42px; padding: 10px 16px; }
.lang-nav { position: absolute; right: max(32px, calc((100% - 1000px)/2)); top: 8px; }
.lang-nav a { font-size: var(--fs-small); padding: 4px; }
.review-banner { font-size: var(--fs-small); padding: 5px 20px; background: var(--warm-grey); margin: 0; text-align: center; }
.btn { border-radius: 0; font-weight: 400; font-size: 17px; padding: 14px 26px; min-height: 48px; }
.btn--primary { font-weight: 500; }
.btn--secondary { border: 1px solid #000; }
.btn:disabled { opacity: .65; }
a:hover { color: #303030; }
.btn--primary:hover { color: white; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; padding: 32px 0 64px; }
.intro .lead { font-size: 20px; margin: 12px 0 0; max-width: 400px; }
.hero { padding: 8px 0 100px; }
.hero-media { position: relative; }
.hero-media picture { display: contents; }
.hero-media img { display: block; width: 100%; height: auto; }
.hero-media > picture > picture > img { aspect-ratio: 2.13; object-fit: cover; }
/* The demo tablet (DAM-162): a flat, front-on tablet drawn in CSS around a real app capture. The
   captures are 4:3 and so is the screen, so the app's pixels are shown whole — never cropped,
   stretched or projected. Bezel, corners and camera are fractions of the device's own width, so
   the hero tablet, the section tablets and the phone sizes are one device at different sizes. A
   thin lighter edge, not a shadow (no elevation system). Used as .floating-tablet over the hero
   scene and inside .tablet-scene beside a text column. */
.device { position: relative; background: #17191c; border-radius: 4.6% / 6%; outline: 1px solid #3a3e44; outline-offset: -1px; }
.device::before { content: ""; position: absolute; top: 1.7%; left: 50%; width: .9%; aspect-ratio: 1; margin-left: -.45%; border-radius: 50%; background: #2e3237; }
/* flow-root keeps the screen's margins inside the device: they are the bezel. */
.device picture { display: flow-root; }
.device img { display: block; width: 93%; height: auto; aspect-ratio: 4 / 3; margin: 3.5%; border-radius: 1.3% / 1.73%; }
.floating-tablet { position: absolute; width: 42%; right: 6%; bottom: -43%; }
.hero-actions { margin: 56px 0 32px; gap: 40px; }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.editorial h2 { margin: 0 0 20px; }
.editorial p { font-size: 16px; }
.tablet-scene { position: relative; margin: 0; overflow: hidden; }
.tablet-scene > img { display: block; width: 100%; height: auto; }
.tablet-scene .tablet-scene__screen { position: absolute; left: 32.7%; top: 51.1%; width: 43.8%; height: 50.8%; object-fit: cover; transform-origin: 0 0; transform: matrix(.948,-.320,.347,.94,0,0); }
.page-intro { padding: 40px var(--gutter) 92px; }
.process-band { background: var(--warm-grey); padding: 80px 0; }
/* The steps line up across the columns, in both languages (DAM-173): each step is a subgrid of
   the same five rows - label, heading, photos, text, action - so a longer heading in one column
   moves every column's photos and text down with it, instead of a min-height tuned to one
   language's headings. The columns are equally wide (a gap, with the rule drawn in it), so the
   photo boxes below have equal heights too. Each step's own column is pinned to the step's width
   (DAM-198): left auto, Safari sized the 8:5 photo box from the shared row height instead, and
   the photos and text ran over the rule into the next step. */
.process-steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); column-gap: 64px; margin: 0 auto; }
.process-steps li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
.process-steps li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: -32px; border-left: 1px solid #000; }
.process-steps li > p:first-child { grid-row: 1; }
.process-steps li > h2 { grid-row: 2; }
.process-steps li > figure { grid-row: 3; }
.process-steps li > figure + p,
.process-steps li > h2 + p { grid-row: 4; }
.process-steps li > .btn,
.process-steps li > .form-unavailable { grid-row: 5; justify-self: start; align-self: start; }
.process-steps h2 { font-size: 32px; }
/* Example photos inside a process step (DAM-162): what a home scan and exterior photos look like.
   Every step's photos fill one 8:5 box, so all three pictures share a top and a bottom edge; a
   pair splits the box. Cropped, never stretched: 8:5 is as wide as the scan can go and keep the
   scanning person's head and feet, hence its lowered focus. */
.process-photos { display: grid; grid-template-rows: minmax(0, 1fr); gap: 8px; margin: 0 0 16px; aspect-ratio: 8 / 5; }
.process-photos--pair { grid-template-columns: 1fr 1fr; }
.process-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-photos:not(.process-photos--pair) img { object-position: 50% 75%; }
/* The review notice under the last step: small print in the step's own column, no box (the
   step already sits on the warm gray). No top margin: the text above already ends in one, and in
   the step grid the two would add up and drop the notice below step 1's button (DAM-173). */
.process-steps .form-unavailable { margin: 0; padding: 0; background: none; color: var(--grey); }
.faq-page { padding-top: 50px; padding-bottom: 90px; }
.faq-page h1 { margin-bottom: 56px; }
.faq { max-width: 790px; }
.faq__q { font-family: Inter,sans-serif; font-weight: 500; font-size: 20px; margin: 44px 0 12px; }
.inquiry { padding: 100px 0; margin-top: 110px; background: var(--warm-grey); }
.inquiry__grid { display: grid; grid-template-columns: 30% 1fr; gap: 44px; }
.quote-form { margin-top: 0; display: block; max-width: 680px; }
.quote-form > p:first-child { margin-bottom: 28px; font-size: 16px; }
.quote-form > .field { margin: 0 0 24px; min-width: 0; }
.field label { font-size: 16px; font-weight: 400; }
.field input,.field select,.field textarea { background: transparent; border: 1px solid #555; border-radius: 0; font-family: Inter,sans-serif; font-size: 16px; padding: 14px; }
.field textarea { min-height: 120px; }
.field__help { font-size: var(--fs-small); }
.quote-form > .quote-files { margin: 0 0 24px; font-size: 16px; }
.quote-files summary { padding: 12px 0; font-weight: 400; }
.quote-form > .form-note,.quote-form > .form-unavailable { margin: 0 0 20px; }
#individuell { scroll-margin-top: 120px; }
.site-footer { margin-top: 0; background: var(--orange); padding: 90px 0; }
.site-footer__inner { max-width: calc(1000px + 2 * var(--gutter)); padding: 0 var(--gutter); align-items: center; }
.site-footer__category { max-width: 270px; margin-top: 24px; color: #000; }
@media (max-width: 1100px) {
 .site-header__inner { flex-wrap: wrap; gap: 18px; align-items: center; }
 .brand__logo { width: 125px; height: 74px; }
 .site-nav ul { gap: 16px; }
 .site-nav a { font-size: var(--fs-small); }
 .site-header__cta { font-size: var(--fs-small); padding: 10px 12px; }
 :root { --fs-hero: 34px; --fs-h2: 34px; }
 .intro .lead { font-size: 18px; }
 .inquiry__grid { grid-template-columns: 25% 1fr; gap: 24px; }
}
@media (max-width: 850px) {
 :root { --gutter: 28px; --section-gap: 64px; }
 .site-nav { order: 3; width: 100%; }
 .site-nav ul { justify-content: space-between; }
 .intro,.editorial { gap: 28px; }
 .inquiry__grid { grid-template-columns: 1fr; }
 .inquiry { margin-top: 70px; padding: 64px 0; }
 .inquiry h2 br { display: none; }
 .hero { padding-bottom: 60px; }
 .floating-tablet { bottom: -40%; }
 .hero-actions { gap: 18px; }
 .hero-actions .btn { padding: 12px 16px; font-size: 15px; }
 .process-steps { column-gap: 36px; }
 .process-steps li + li::before { left: -18px; }
 .process-steps h2 { font-size: 25px; }
}
@media (max-width: 600px) {
 :root { --gutter: 20px; --fs-hero: 32px; --fs-h2: 30px; }
 .intro,.editorial { grid-template-columns: 1fr; }
 .intro { padding-bottom: 36px; gap: 18px; }
 h1 br { display: none; }
 .hero { padding-top: 0; padding-bottom: 0; }
 .floating-tablet { width: 49%; right: 4%; bottom: -25%; }
 .hero-actions { margin-top: 85px; gap: 12px; }
 .editorial > .tablet-scene { order: 2; }
 .editorial p { font-size: 16px; }
 .process-steps { grid-template-columns: 1fr; gap: 28px; }
 .process-steps li { display: block; border-top: 1px solid #000; padding: 24px 0 0; }
 .process-steps li + li::before { content: none; }
 .process-steps li:first-child { border-top: 0; }
 .quote-form { display: block; }
 .quote-form > .field { margin-bottom: 24px; }
 .quote-form > .form-note,.quote-form > .form-unavailable { margin: 16px 0; }
 .site-footer { padding: 60px 0; }
 .site-footer__inner { gap: 32px; }
}

.review-banner { color: #000; }
.hero-media > picture > picture > img { aspect-ratio: 2.13; object-fit: cover; }
.intro .eyebrow { font-size: var(--fs-small); margin: 10px 0 12px; }
.intro > div .lead { margin: 0; }

.site-footer__inner > div { display: grid; grid-template-columns: 150px 1fr; gap: 0 80px; align-items: end; }
.site-footer__category { margin: 0; }
.site-footer__contact { grid-column: 2; font-size: var(--fs-small); font-style: normal; }
/* The mail address is a target of its own, not a link inside prose, so it carries its own
   24 px height (WCAG 2.2 AA target size); at 14px/1.45 the text box alone is 20 px (DAM-165). */
.site-footer__contact a { color: #000; display: inline-block; padding: 4px 0; }
@media(max-width:850px) { .lang-nav { position: static; margin-left: auto; } .site-footer__inner > div { gap: 20px 40px; } }
@media(max-width:600px) { .site-footer__inner > div { grid-template-columns: 1fr; } .site-footer__contact { grid-column:1; } }

/* Six synchronized headline/image states. Native controls require no runtime script. */
.hero-phrase { display: grid; }
/* The rotating phrase ("Genau deine Villa.") carries the brand highlight; the rest of the
   headline stays black (founder, 2 November 2026). Large display text only — see
   --orange-display. */
.hero-phrase > span { grid-area: 1 / 1; color: var(--orange-display); }
.hero-phrase > span, .hero-slide { opacity: 0; visibility: hidden; }
.hero-phrase > span:first-child, .hero-slide--home { opacity: 1; visibility: visible; }
.hero-media { aspect-ratio: 2.13; }
.hero-media > .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* every slide is now a rendered responsive picture, not only the first one (DAM-155) */
.hero-media > .hero-slide > picture, .hero-media > .hero-slide > picture > img { width:100%; height:100%; object-fit:cover; }
/* Image controls use native radio keys. Chevrons are pointer shortcuts to the same dots. */
.hero-sr, .hero-dot input, .hero-playback input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero-controls { position:absolute; z-index:2; left:20px; bottom:18px; display:flex; border:0; margin:0; padding:2px 4px; border-radius:28px; background:#000c; }
.hero-dot { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:22px; cursor:pointer; }
.hero-dot-mark { width:8px; height:8px; border:1px solid #fff; border-radius:50%; }
.hero-dot input:checked + .hero-dot-mark { background:#fff; }
.hero-dot:has(input:focus-visible), .hero-playback label:has(input:focus-visible) { outline:2px solid #fff; outline-offset:-5px; border-radius:24px; }
.hero-arrows { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; }
.hero-arrows[data-scene="home"] { opacity:1; visibility:visible; }
.hero-arrow { position:absolute; top:calc(50% - 24px); z-index:2; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#000c; color:#fff; cursor:pointer; pointer-events:auto; user-select:none; }
/* The chevron is drawn, not typed (DAM-162): the ‹ › glyphs sat low and toward the open side of
   their circle, by font metrics nobody controls. The path's box is centred in its 24-unit view box
   and the box is centred in the button, so the two arms' midpoints sit on the button's centre. */
.hero-arrow__icon { display:block; width:50%; height:50%; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.hero-prev { left:20px; } .hero-next { right:20px; }
.hero-arrow:hover, .hero-dot:hover, .hero-playback label:hover { background:#000; }
.hero-playback { position:absolute; z-index:2; right:20px; top:18px; display:flex; border-radius:24px; background:#000c; color:#fff; }
.hero-playback label { width:44px; height:44px; display:grid; place-items:center; cursor:pointer; border-radius:24px; }
.hero:has(.hero-auto:checked) .hero-auto-label { display:none; }
.hero:not(:has(.hero-auto:checked)) .hero-pause-label { display:none; }
.hero-pause-label:has(input:checked) { outline:2px solid #fff; outline-offset:-4px; }
/* Preserve the space needed by the floating tablet after removing the old control row. */
.hero { padding-bottom:clamp(80px,12vw,160px); }
@media(max-width:600px) {
 .hero-controls { left:8px; top:8px; bottom:auto; padding:0; }
 .hero-dot { width:36px; height:44px; }
 .hero-arrow { width:44px; height:44px; top:calc(50% - 22px); }
 .hero-prev { left:8px; } .hero-next { right:8px; }
 .hero-playback { right:8px; top:8px; }
}
.hero:has(.hero-auto:checked) .hero-phrase > span, .hero:has(.hero-auto:checked) .hero-slide, .hero:has(.hero-auto:checked) .hero-arrows { animation: hero-cycle 36s linear infinite; }
.hero:has(.hero-pause:checked) .hero-phrase > span, .hero:has(.hero-pause:checked) .hero-slide, .hero:has(.hero-pause:checked) .hero-arrows, .hero:has(.hero-pause:checked) .hero-dot-mark { animation-play-state: paused; }
@keyframes hero-cycle { 0%, 16.65% { opacity:1; visibility:visible; } 16.6667%,100% { opacity:0; visibility:hidden; } }
.hero:has(.hero-auto:checked) [data-scene][data-scene="home"] { animation-delay: -36s; }
.hero:has(.hero-choice-home:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-home:checked) [data-scene="home"] { opacity:1; visibility:visible; }
.hero:has(.hero-auto:checked) [data-scene][data-scene="office"] { animation-delay: -30s; }
.hero:has(.hero-choice-office:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-office:checked) [data-scene="office"] { opacity:1; visibility:visible; }
.hero:has(.hero-auto:checked) [data-scene][data-scene="villa"] { animation-delay: -24s; }
.hero:has(.hero-choice-villa:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-villa:checked) [data-scene="villa"] { opacity:1; visibility:visible; }
.hero:has(.hero-auto:checked) [data-scene][data-scene="boat"] { animation-delay: -18s; }
.hero:has(.hero-choice-boat:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-boat:checked) [data-scene="boat"] { opacity:1; visibility:visible; }
.hero:has(.hero-auto:checked) [data-scene][data-scene="camper"] { animation-delay: -12s; }
.hero:has(.hero-choice-camper:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-camper:checked) [data-scene="camper"] { opacity:1; visibility:visible; }
.hero:has(.hero-auto:checked) [data-scene][data-scene="room"] { animation-delay: -6s; }
.hero:has(.hero-choice-room:checked) [data-scene] { opacity:0; visibility:hidden; }
.hero:has(.hero-choice-room:checked) [data-scene="room"] { opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce) {
 .hero:has(.hero-auto:checked) [data-scene][data-scene] { animation: none; opacity:0; visibility:hidden; }
 .hero:has(.hero-auto:checked) [data-scene][data-scene="home"] { opacity:1; visibility:visible; }
 .hero-pause-label { display:none; }
}

/* Keep older custom enquiry links at the shared form. */
.inquiry-anchor { display:block; scroll-margin-top:120px; }
@media (prefers-reduced-motion: reduce) { .hero-controls .hero-pause-label { display:none; } }

.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-home) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-36s; }
.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-office) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-30s; }
.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-villa) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-24s; }
.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-boat) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-18s; }
.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-camper) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-12s; }
.hero:has(.hero-auto:checked) .hero-dot:has(.hero-choice-room) .hero-dot-mark { animation:hero-dot-cycle 36s linear infinite; animation-delay:-6s; }
@keyframes hero-dot-cycle { 0%,16.65% { background:#fff; } 16.6667%,100% { background:transparent; } }
@media(prefers-reduced-motion:reduce) { .hero:has(.hero-auto:checked) .hero-controls .hero-dot .hero-dot-mark { animation:none; } .hero:has(.hero-auto:checked) .hero-dot:first-of-type .hero-dot-mark { background:#fff; } .hero-playback { display:none; } }

.hero:has(.hero-pause:checked) .hero-controls .hero-dot .hero-dot-mark { animation-play-state:paused; }

/* Attention to quote (DAM-157) -------------------------------------------------------------- */
/* The Home Assistant fit, right under the hero lead: the one line a visitor needs to know whether
   the product is for them. */
.intro .hero-fit { margin: 12px 0 0; font-size: 16px; font-weight: 500; }
/* Under the carousel: the scenes are fictional, the tablet is the demo. Kept to the left half on
   wider screens, because the floating tablet hangs below the picture on the right. */
.hero-note { margin: 24px 0 0; max-width: 48%; font-size: var(--fs-small); color: var(--grey); }
.hero-note a { color: var(--ink); }
.hero-note + .hero-actions { margin-top: 32px; }
/* The Home Assistant section: two text columns, both starting at the top. */
.editorial--top { align-items: start; }
.editorial h3 { font-size: 20px; margin: 0 0 12px; }
.editorial .feature-list + h3 { margin-top: 28px; }
.feature-list { margin: 0; padding-left: 1.2em; font-size: 16px; }
.feature-list li + li { margin-top: 6px; }
/* What happens after the form, beside it (under the title from 850 px down). */
.inquiry-steps__title { font-size: 16px; margin: 28px 0 12px; }
.inquiry-steps { margin: 0; padding-left: 1.2em; font-size: var(--fs-small); }
.inquiry-steps li + li { margin-top: 10px; }
.inquiry-steps strong { font-weight: 500; }
.hero--demo .small { max-width: 640px; margin: 0 auto; }

/* Phones: header in two short rows (brand, language and the quote action; then the pages) instead
   of four, so the headline and the picture reach the first screen. "Kontakt" is left out here: it
   is the same target as the quote button beside it. */
@media (max-width: 600px) {
  .site-header__inner { padding: 10px var(--gutter) 4px; gap: 4px 10px; align-items: center; }
  .lang-nav ul { gap: 0 8px; }
  .brand__logo { width: 64px; height: 38px; }
  .lang-nav { order: 2; margin-left: auto; }
  .site-header__cta { order: 3; min-height: 44px; padding: 8px 10px; font-size: var(--fs-small); }
  .site-nav { order: 4; width: 100%; }
  .site-nav ul { justify-content: flex-start; gap: 0 18px; }
  .site-nav a { font-size: var(--fs-small); padding: 8px 0; }
  .site-nav li:last-child { display: none; }
  .hero .intro { padding: 12px 0 24px; gap: 4px; }
  .hero-note { max-width: none; margin-top: 64px; }
  .hero-note + .hero-actions, .hero-actions { margin-top: 20px; }
  /* Carousel: the dots sit under the picture, the tablet is smaller and hangs below it on the
     right, so neither covers the scene. */
  .hero-controls { top: calc(100% + 8px); left: 0; bottom: auto; }
  .hero-arrow { width: 36px; height: 36px; top: calc(50% - 18px); font-size: 28px; }
  .hero-playback label { width: 40px; height: 40px; }
  .floating-tablet { width: 30%; right: 3%; bottom: -24%; }
}

/* Guides (/wissen/, /en/guides/) ------------------------------------------------------------ */
/* Breadcrumb above every guide and the hub: small, grey, the trail back to the hub and home. The
   separator is generated and has no spoken text. */
.breadcrumb { padding-top: 24px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--grey); }
.breadcrumb li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; color: var(--grey); }
.breadcrumb a { display: inline-block; padding: 10px 0; color: var(--ink); }
/* A guide is a reading column on the left edge of the page grid (aligned with the logo), at the
   editorial measure. Same headings, lead and buttons as the rest of the site; no new type sizes. */
.guide > * { max-width: 760px; }
.guide__intro { padding: 24px 0 8px; }
.guide__intro .eyebrow { font-size: var(--fs-small); margin: 0 0 12px; }
.guide__intro h1 { margin-bottom: 20px; }
.guide__intro .lead { font-size: 20px; margin: 0; }
.guide__picture { margin: 32px 0 0; }
.guide h2 { font-size: 24px; margin: 48px 0 12px; }
.guide p { font-size: 17px; margin: 0 0 16px; }
.guide .guide__notice { margin-top: 32px; font-size: var(--fs-small); }
.guide .actions { margin-top: 0; }
/* Guide list: the hub's topic entries and a guide's related topics. Thin rules between entries,
   like the process steps, not cards (DESIGN.md: no cards, shadows or gradients). */
.guide-related { padding-top: 64px; }
.guide-related h2, .guide-group h2 { font-size: 24px; margin: 0 0 8px; }
.guide-group { padding-top: 56px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 44px; }
@media (min-width: 720px) { .guide-list { grid-template-columns: 1fr 1fr; } }
.guide-list li { border-top: 1px solid var(--ink); padding: 8px 0 20px; }
.guide-list a { display: inline-block; padding: 8px 0; font-size: 18px; font-weight: 500; line-height: 1.3; }
.guide-list p { margin: 0; font-size: 15px; color: var(--grey); }
.guide-list--plain li { padding-bottom: 8px; }
.guide-hub__intro { padding-bottom: 8px; }
.guide-hub__intro .lead { font-size: 20px; max-width: 760px; margin: 0; }
.guide-hub__actions { padding-top: 56px; }
.guide-hub__actions > * { max-width: 760px; }
@media (max-width: 600px) {
  .breadcrumb { padding-top: 12px; }
  .guide__intro .lead, .guide-hub__intro .lead { font-size: 18px; }
  .guide h2 { font-size: 22px; margin-top: 40px; }
  .guide-related { padding-top: 48px; }
  .guide-group { padding-top: 44px; }
}
/* Phones: the page links stay one row, so the header keeps the height the quote journey was
   accepted with (DAM-157: at most 160 px). With the guides link the German labels are wider
   than a phone, so the row scrolls sideways instead of wrapping into a second row; the last
   link is cut off at the edge, which is what makes the row read as scrollable. The size is the
   site minimum (--fs-small), not the 13px this started at: nothing here may be smaller than the
   rest of the site's small text (DAM-165). */
@media (max-width: 600px) {
  .site-nav ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 0 14px; }
  .site-nav a { font-size: var(--fs-small); }
  .site-nav li { flex-shrink: 0; }
}

/* GENERATED by scripts/build.mjs from the page sections (see "Language links keep the section"):
   show the language link of the section in the URL instead of the plain page link. */
:root:has(#angebot:target) .lang-nav a[data-section="angebot"] { display: inline-block; }
:root:has(#angebot:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#boot:target) .lang-nav a[data-section="boot"] { display: inline-block; }
:root:has(#boot:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#camper:target) .lang-nav a[data-section="camper"] { display: inline-block; }
:root:has(#camper:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#dateien:target) .lang-nav a[data-section="dateien"] { display: inline-block; }
:root:has(#dateien:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#einstieg:target) .lang-nav a[data-section="einstieg"] { display: inline-block; }
:root:has(#einstieg:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#export:target) .lang-nav a[data-section="export"] { display: inline-block; }
:root:has(#export:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#home-assistant:target) .lang-nav a[data-section="home-assistant"] { display: inline-block; }
:root:has(#home-assistant:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#hotel:target) .lang-nav a[data-section="hotel"] { display: inline-block; }
:root:has(#hotel:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#individuell:target) .lang-nav a[data-section="individuell"] { display: inline-block; }
:root:has(#individuell:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#probleme:target) .lang-nav a[data-section="probleme"] { display: inline-block; }
:root:has(#probleme:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#raeume:target) .lang-nav a[data-section="raeume"] { display: inline-block; }
:root:has(#raeume:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#verstehen:target) .lang-nav a[data-section="verstehen"] { display: inline-block; }
:root:has(#verstehen:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#zugangsdaten:target) .lang-nav a[data-section="zugangsdaten"] { display: inline-block; }
:root:has(#zugangsdaten:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }
:root:has(#zuhause:target) .lang-nav a[data-section="zuhause"] { display: inline-block; }
:root:has(#zuhause:target) .lang-nav a.lang-nav__page:not([aria-current]) { display: none; }