/* Service-page questions: readable native disclosure controls. */
.detail-faq details { border-top:1px solid #bac9ba; padding:0; }
.detail-faq details:last-child { border-bottom:1px solid #bac9ba; }
.detail-faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; min-height:48px; cursor:pointer; list-style:none; font-weight:600; color:#3c4135; line-height:1.5; }
.detail-faq summary::-webkit-details-marker { display:none; }
.detail-faq summary::after { content:'+'; font-size:1.5rem; flex:none; }
.detail-faq details[open] summary::after { content:'−'; }
.detail-faq details p { margin:0 0 22px; }
.detail-text .consultation-questions li { margin-bottom:14px; }
.detail-text .text-link { max-width:100%; flex-wrap:wrap; }

/* Page topics belong in the content flow, separate from the header menu. */
.detail-hero .detail-toc {
  position:static;
  inset:auto;
  width:auto;
  max-width:100%;
  background:transparent;
  border:0;
  padding:0;
  flex-direction:row;
  align-items:center;
}
@media (max-width:760px) {
  .detail-hero .detail-toc {
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    padding:4px 0 12px;
    scrollbar-width:thin;
  }
  .detail-hero .detail-toc a {
    flex:0 0 auto;
    white-space:nowrap;
    min-height:44px;
  }
}

/* Real examples of vehicle insulation, with the shared photo geometry. */
.insulation-examples { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:28px 0; }
.insulation-examples figure { margin:0; min-width:0; }
.insulation-examples img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--photo-radius); }
.insulation-examples figcaption { margin-top:12px; font-size:1rem; line-height:1.6; color:#4f5748; }
@media(max-width:760px) { .insulation-examples { grid-template-columns:1fr; gap:24px; } }

.build-examples { padding:50px 6% 85px; }
.project-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:30px 0; }
.project-examples figure,.service-example figure { margin:0; min-width:0; }
.project-examples .photo-open img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.project-examples figcaption { padding-top:16px; }
.project-examples figcaption h3 { margin:0 0 8px; font-size:1.3rem; }
.project-examples figcaption p { margin:0; }
.service-example { max-width:850px; margin:28px auto; }
.service-example .photo-open img { width:100%; height:auto; max-height:650px; object-fit:contain; }
.service-example figcaption { margin-top:12px; font-size:1rem; line-height:1.6; color:#4f5748; }
@media(max-width:900px) { .project-examples { grid-template-columns:1fr; } }

.service-example .photo-open { width:100%; }
.service-example .photo-open img { max-height:none; aspect-ratio:auto; object-fit:contain; }

.build-examples .project-examples { grid-template-columns:repeat(3,minmax(0,1fr)); }
#beispielausbauten .project-examples { grid-template-columns:repeat(6,minmax(0,1fr)); }
#beispielausbauten .project-examples > figure { grid-column:span 2; }
#beispielausbauten .project-examples > figure:nth-child(4) { grid-column:2 / span 2; }
#beispielausbauten .project-examples > figure:nth-child(5) { grid-column:4 / span 2; }
@media(max-width:760px){.build-examples .project-examples,#beispielausbauten .project-examples {grid-template-columns:1fr;} #beispielausbauten .project-examples > figure:nth-child(n) {grid-column:auto;} }

/* Full photographs remain available in the viewer; previews use a stable frame. */
.service-example .photo-open img { height:auto; aspect-ratio:4/3; object-fit:cover; }
a.photo-open { display:block; position:relative; }
.portfolio-content { padding:20px 6% 70px; }
.portfolio-topic { max-width:1250px; margin:60px auto; scroll-margin-top:120px; }
.portfolio-topic > p { max-width:780px; }
.portfolio-topic h2 { overflow-wrap:anywhere; hyphens:auto; }
.portfolio-topic .project-examples { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:760px){.portfolio-topic .project-examples {grid-template-columns:1fr;} }

/* Keep the heater at the right edge visible in overview crops. */
.photo-open img[src*="beispiel-gasstandheizung"] { object-position:100% 50%; }

.portfolio-navigation { max-width:1040px; margin:32px 0 0; border:1px solid #c9cdb9; border-radius:16px; background:#fffaf0; overflow:hidden; box-shadow:0 8px 24px #51432b0a; }
.portfolio-navigation summary { display:flex; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; list-style:none; font-weight:700; font-size:1.08rem; }
.portfolio-navigation summary::-webkit-details-marker { display:none; }
.portfolio-navigation summary small { margin-left:auto; color:#58624f; font-weight:400; white-space:nowrap; }
.portfolio-navigation summary::after { content:'⌄'; font-size:1.5rem; line-height:1; }
.portfolio-navigation[open] summary { border-bottom:1px solid #dde0cf; }
.portfolio-navigation[open] summary::after { content:'⌃'; }
.portfolio-navigation nav { position:static; inset:auto; width:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:28px 40px; padding:26px 24px 30px; }
.portfolio-nav-group h2 { font-size:.83rem; letter-spacing:.08em; text-transform:uppercase; color:#6c755c; margin:0 0 10px; }
.portfolio-nav-group ul { list-style:none; padding:0; margin:0; }
.portfolio-nav-group li + li { border-top:1px solid #ebe8db; }
.portfolio-nav-group a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 2px; text-decoration:none; font-size:.98rem; line-height:1.45; color:#303e36; }
.portfolio-nav-group a:hover { color:#925130; }
.portfolio-nav-group a span { color:#925130; }
.portfolio-navigation summary:focus-visible,.portfolio-nav-group a:focus-visible { outline:3px solid #d4935b; outline-offset:-3px; border-radius:6px; }
@media(max-width:760px) { .portfolio-navigation nav {grid-template-columns:1fr;gap:22px;} .portfolio-navigation summary {padding:17px 16px;gap:10px;font-size:1rem;} .portfolio-navigation summary small {font-size:.78rem;} }