/* Dormer demo additions on top of configurator.css and veranda-demo.css,
   scoped to this page so the shared demo styles stay untouched. */

/* Size labels: "Dachneigung" / "Roof pitch" need more than the 48 px column. */
.page-dormer .dim { grid-template-columns: 96px minmax(0, 1fr) 76px; }

/* Three demos in the switcher: on phones it takes its own full-width row,
   with the language picker and sales button sharing the row above. */
@media (max-width: 640px) {
    .page-dormer .cfg-header { grid-template-columns: auto 1fr auto; }
    .page-dormer .cfg-header .demo-switch { grid-column: 1 / -1; grid-row: 2; display: flex; }
    .page-dormer .cfg-header .demo-switch a { flex: 1; justify-content: center; }
    .page-dormer .cfg-header-r .lang-switch { grid-column: 2; grid-row: 1; }
    .page-dormer .cfg-header-r > .btn { grid-column: 3; grid-row: 1; }
}
/* German and Dutch sales labels are long: keep them on one line, and drop
   the button rather than crowd the brand on the narrowest phones. */
@media (max-width: 400px) {
    .page-dormer .cfg-header-r > .btn { display: none; }
    .page-dormer .cfg-header { grid-template-columns: auto 1fr; }
}
.page-dormer .cfg-header-r > .btn { white-space: nowrap; }