/* Customer reference, October 2026: quieter public pages and practical admin lists.
   Loaded after styles.css so the visual rules below are the last page-specific layer. */
:root {
  --client-paper: var(--paper);
  --client-canvas: var(--canvas);
  --client-warm: var(--pale);
  --client-line: var(--line);
  --client-ink: var(--ink);
  --client-muted: var(--muted);
  --client-red: var(--red);
  --client-gold: #edc866;
  --client-shadow: none;
}

/* Company overview and sections: same white paper, warm side index and editorial type. */
.about-page,
.services-page { color: var(--client-ink); }
.about-page-heading,
.service-detail header { border-color: var(--client-line); }
.about-page-heading h1,
.about-page .about-detail-panel h2,
.service-detail h2 { color: var(--client-ink); }
.about-page .two-column-page { grid-template-columns: minmax(200px, 235px) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.about-page .section-index {
  background: var(--client-paper);
  border: 1px solid var(--client-line);
  border-radius: var(--surface-radius);
  box-shadow: var(--client-shadow);
}
.about-page .section-index strong { color: var(--client-ink); border-color: var(--client-line); }
.about-page .section-index strong small,
.about-page .section-index a { color: var(--client-muted); }
.about-page .section-index a { border-radius: 4px; }
.about-page .section-index a:hover,
.about-page .section-index a:focus-visible { color: #73332d; background: #fbf0df; transform: none; }
.about-page .section-index a.active { color: var(--client-ink); background: var(--client-gold); box-shadow: none; }
.about-page .content-panel,
.service-detail { border: 1px solid var(--client-line); border-radius: var(--surface-radius); background: var(--paper); box-shadow: var(--client-shadow); }
.about-overview { --about-text-inset: clamp(30px, 3.5vw, 54px); }
.about-overview-copy { padding-inline: var(--about-text-inset); background: #f5eee5; }
.about-overview-copy::after { background: var(--client-red); }
.about-overview-copy h2 { color: var(--client-ink); }
.about-overview-intro p { color: #584f46; }
.about-overview-photo { background: #e9e2d7; }
.about-overview-photo img,
.about-overview-photo .gallery-slide img { object-fit: cover; object-position: center 42%; }
.about-overview-below { padding: 44px var(--about-text-inset) 60px; border-top: 1px solid var(--client-line); }
.about-page .about-overview-below .editorial-body { max-width: none; margin: 0; }
.about-page .about-detail-panel { border-top: 3px solid var(--client-gold); }
.about-page .about-detail-panel::before { color: rgba(82, 60, 34, .035); }
.about-page .about-panel-head { border-color: var(--client-line); }
.about-page .about-chapter { color: #a66d24; }
.about-page .editorial-body,
.services-page .editorial-body { max-width: 90ch; }
.about-page .editorial-body .editorial-paragraph,
.services-page .editorial-body .editorial-paragraph,
.about-page .editorial-body > p,
.services-page .editorial-body > p { color: #504840; line-height: 1.85; }
.about-page .editorial-body .editorial-heading,
.services-page .editorial-body .editorial-heading { border-left-color: var(--client-gold); color: var(--client-ink); }
.about-page .editorial-body .editorial-list li,
.services-page .editorial-body .editorial-list li { border-color: var(--client-line); border-radius: 3px; background: #fcfaf6; color: #504840; }
.about-page .editorial-quote,
.services-page .editorial-quote { border-left-color: var(--client-gold); border-radius: 0 4px 4px 0; background: #fff7e6; color: var(--client-ink); }

/* Small arrows at the photo sides; the page counter stays at the bottom. */
.about-page .public-gallery { border-radius: 3px; background: #ece5db; }
.about-page .gallery-slide figcaption { display: none; }
.about-page .gallery-controls { inset: 0; display: block; pointer-events: none; }
.about-page .gallery-controls button {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto;
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 1px solid #d4b991; border-radius: 3px;
  background: rgba(255, 253, 249, .97); color: #3a3027;
  font-size: 18px; transition: color .15s, background .15s, border-color .15s;
}
.about-page .gallery-controls [data-gallery-step="-1"] { left: 8px; }
.about-page .gallery-controls [data-gallery-step="1"] { right: 8px; }
.about-page .gallery-controls button:hover,
.about-page .gallery-controls button:focus-visible { border-color: var(--client-red); background: #fff5ea; color: var(--client-red); }
.about-page .gallery-controls button:focus-visible { outline: 2px solid var(--client-red); outline-offset: 2px; }
.about-page .gallery-controls output { position: absolute; right: 10px; bottom: 10px; min-width: 30px; padding: 2px 3px; font-size: 10px; line-height: 20px; background: rgba(255, 253, 249, .97); font-variant-numeric: tabular-nums; }
.about-detail-founder .founder-story-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.about-detail-founder .founder-story-lead .public-gallery { height: 390px; min-height: 390px; }
.about-detail-founder .founder-videos { margin-top: 32px; padding-top: 27px; border-top: 1px solid var(--client-line); }
.about-detail-founder .founder-video-card { border-color: var(--client-line); border-radius: 4px; background: #fcfaf6; }
.about-detail-founder .founder-video-empty { min-height: 170px; background: #f4ede3; }
.about-detail-founder > .editorial-body { padding-top: 25px; border-top: 1px solid var(--client-line); }

/* Company services carry the same hierarchy rather than a separate saturated design. */
.services-hero { border: 1px solid var(--client-line); border-radius: 5px; background: var(--client-warm); box-shadow: var(--client-shadow); }
.services-hero-copy { background: var(--client-warm); color: var(--client-ink); }
.services-hero h1 { color: var(--client-ink); }
.services-hero-intro p { color: #584f46; }
.services-index { border-color: var(--client-line); border-radius: 5px; box-shadow: var(--client-shadow); }
.services-index button { color: var(--client-ink); border-radius: 3px; }
.services-index button:hover,
.services-index button:focus-visible { transform: none; background: #fbf1e3; }
.services-index button.active { border-color: #dbb665; background: #fff0ce; color: var(--client-ink); }
.services-index button em { color: #a93a30; }
.service-detail { border-top: 3px solid var(--client-gold); }
.services-end { border-color: var(--client-line); border-radius: 4px; background: var(--client-paper); }

/* VerbTower explanation is visible as a normal page section, not a disclosure. */
.method-details { border-color: var(--client-line); border-radius: 5px; background: #fff; box-shadow: var(--client-shadow); }
.method-details .method-step-list { padding-block: 8px; }

/* Contact keeps the two columns aligned, in the same typography and palette. */
.contact-grid { align-items: stretch; gap: 18px; }
.contact-grid > * { min-width: 0; border-radius: 5px; }
.contact-panel { border-color: var(--client-line); background: var(--client-warm); color: var(--client-ink); box-shadow: var(--client-shadow); }
.contact-panel h2,
.form-card h2 { color: var(--client-ink); }
.contact-panel p { color: #5c5349; }
.contact-line { border-color: #dcd0c1; }
.contact-line small { color: #9e392f; }
.contact-line strong { overflow-wrap: anywhere; }
.form-card { border-color: var(--client-line); background: #fff; box-shadow: var(--client-shadow); }
.form-card .field input,
.form-card .field textarea { border-color: #d9ccbb; border-radius: 4px; }
.form-card .field input:focus,
.form-card .field textarea:focus { border-color: #ba715e; box-shadow: 0 0 0 3px rgba(171, 55, 47, .13); }

/* Admin: the reference uses restrained cards and a readable, aligned table. */
.page.wide:has(> .admin-head) { max-width: 1380px; }
.admin-head { min-height: 144px; border: 1px solid var(--client-line); border-radius: 13px; background: #f4eee5; box-shadow: var(--client-shadow); }
.admin-head::before { height: 3px; background: var(--client-gold); }
.admin-head h1 { color: var(--client-ink); }
.admin-head p { color: var(--client-muted); }
.admin-tabs,
.admin-content .site-editor-nav { border-color: var(--client-line); border-radius: 13px; box-shadow: var(--client-shadow); }
.admin-tabs button { border-radius: 3px; color: #564d43; }
.admin-tabs button:hover,
.admin-tabs button:focus-visible { color: #762e28; background: #fbf0df; }
.admin-tabs button.active { color: var(--client-ink); background: #fff1d7; box-shadow: inset 0 -3px 0 var(--client-red); }
.admin-content .panel { border-color: var(--client-line); border-radius: 13px; background: #fff; box-shadow: var(--client-shadow); }
.admin-content .panel-head { border-color: var(--client-line); }
.admin-content .panel-head h2,
.admin-content .site-text-group h3 { color: var(--client-ink); }
.admin-content .panel-head p,
.admin-content .help-text { color: var(--client-muted); }
.admin-content .level-chip { border-color: #e4cc97; border-radius: 3px; background: #fff3d7; color: #684b20; }
.admin-content .site-editor-nav button,
.admin-content .site-group-nav button,
.admin-content .admin-subtabs button { border-radius: 3px; background: #f7f0e7; color: #554b41; }
.admin-content .site-editor-nav button:hover,
.admin-content .site-editor-nav button:focus-visible,
.admin-content .site-group-nav button:hover,
.admin-content .admin-subtabs button:hover { background: #fff0d4; color: #71372c; }
.admin-content .site-editor-nav button.active,
.admin-content .site-group-nav button.active,
.admin-content .admin-subtabs button.active { color: var(--client-ink); background: #fff0ce; box-shadow: inset 0 -2px 0 var(--client-red); }
.admin-content .field input,
.admin-content .field select,
.admin-content .field textarea,
.admin-content .search-input,
.admin-content .compact-select { border-color: #d9cbbb; border-radius: 4px; color: var(--client-ink); }
.admin-content .button { border-radius: 4px; }
.admin-content .button.primary { border-color: var(--client-red); background: var(--client-red); color: #fff; }
.admin-content .button.primary:hover { border-color: #842821; background: #842821; }
.admin-content .button.light,
.admin-content .button.ghost { border-color: #d8cab8; color: #43382e; }
.admin-content .button.light:hover,
.admin-content .button.ghost:hover { border-color: #b8996d; background: #fff6e8; }
.admin-content :is(button, input, select, textarea):focus-visible { outline-color: var(--client-red); }
.admin-content .upload-zone,
.admin-content .media-editor-card,
.admin-content .admin-document,
.admin-content .word-editor-item,
.admin-content .word-media-item,
.admin-content .image-batch-word,
.admin-content .commons-result { border-color: var(--client-line); border-radius: 5px; background: #fffdfa; }
.admin-content .image-batch-panel,
.admin-content .image-search-panel { border-color: var(--client-line); border-radius: 5px; background: #faf6f0; }
.admin-content .site-gallery-admin-list,
.admin-content .word-media-list { scrollbar-color: #c9aa7e #f7f1e9; }
.admin-content .import-preview-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 12px 0; color: #65594c; font-size: 12px; }
.admin-content .preview-wrap { max-height: min(52vh, 460px); border-color: var(--client-line); border-radius: 5px; overflow: auto; }
.admin-content .preview-table { min-width: 660px; }
.admin-content .preview-table thead th { position: sticky; top: 0; z-index: 1; background: #f4eee5; color: #53473a; }
.admin-content .table-wrap { border-color: var(--client-line); border-radius: 5px; }
.admin-content .data-table th,
.admin-content .data-table td { border-color: #e9e0d6; color: #4c4339; vertical-align: top; }
.admin-content .data-table th { background: #f5efe6; color: #594d40; }
.admin-content .data-table td strong { color: var(--client-ink); }
.admin-content .data-table tbody tr:hover { background: #fffaf0; }
.admin-content .admin-message-scroll,
.admin-content .admin-user-scroll { max-height: min(62vh, 640px); scrollbar-color: #c9aa7e #f7f1e9; }
.admin-content .admin-message-scroll .data-table { table-layout: fixed; min-width: 920px; }
.admin-content .admin-message-scroll th:nth-child(1) { width: 19%; }
.admin-content .admin-message-scroll th:nth-child(2) { width: 43%; }
.admin-content .admin-message-scroll th:nth-child(3) { width: 14%; }
.admin-content .admin-message-scroll th:nth-child(4) { width: 10%; }
.admin-content .admin-message-scroll th:nth-child(5) { width: 14%; }
.admin-content .admin-message-scroll td { line-height: 1.55; }
.admin-content .message-preview { display: -webkit-box; max-height: 3.2em; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.admin-content .admin-message-scroll td:last-child { white-space: nowrap; }
.admin-content .admin-message-scroll td:last-child .button { display: block; margin-top: 5px; }
.admin-content .admin-message-pages { padding-top: 12px; border-top: 1px solid var(--client-line); }
.admin-content .site-content-sections,
.admin-content .site-text-intro { min-width: 0; max-width: 100%; }
.message-full-text { color: var(--client-ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.75; }

@media (max-width: 900px) {
  .about-page .two-column-page { display: block; }
}
@media (max-width: 760px) {
  .about-overview { --about-text-inset: 23px; }
}
@media (max-width: 640px) {
  .about-page .section-index { position: relative; top: auto; }
  .about-overview-below { padding: 26px var(--about-text-inset) 35px; }
  .about-detail-founder .founder-story-lead { grid-template-columns: 1fr; }
  .about-detail-founder .founder-story-lead .public-gallery { height: 290px; min-height: 290px; }
  .services-index { gap: 5px; }
  .contact-grid { grid-template-columns: 1fr; }
  .admin-content .panel { padding: 18px 15px; }
  .admin-content .admin-message-scroll .data-table { min-width: 850px; }
}
@media (max-width: 430px) {
  .about-overview { --about-text-inset: 20px; }
}

/* The German line must remain a readable second row on narrow phones. */
@media (max-width: 640px) {
  .site-shell .tower-page .tower-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 3px;
    min-height: 57px;
    padding: 9px 11px;
    line-height: 1.25;
  }
  .site-shell .tower-page .tower-step > .cms-text,
  .site-shell .tower-page .tower-step > .cms-language-second {
    display: block;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .site-shell .tower-page .tower-step > .cms-language-second { font-size: 11px; }

  .site-shell .method-preview .tower-mini { min-height: 0; padding: 25px 10px 17px; }
  .site-shell .method-preview .tower-layer {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 5px;
    row-gap: 2px;
    min-height: 56px;
    height: auto;
    padding: 7px 5px;
  }
  .site-shell .method-preview .tower-layer-number {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 19px;
    height: 19px;
    font-size: 9px;
  }
  .site-shell .method-preview .tower-layer > .cms-text,
  .site-shell .method-preview .tower-layer > .cms-language-second {
    display: block;
    grid-column: 2;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
    font-size: 11px;
  }
  .site-shell .method-preview .tower-layer > .cms-text { grid-row: 1; }
  .site-shell .method-preview .tower-layer > .cms-language-second { grid-row: 2; }

  .site-shell .services-index button { min-height: 72px; }
  .site-shell .services-index button .cms-language-second {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .admin-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }
  .admin-tabs button {
    min-width: 0;
    width: 100%;
    padding: 10px 3px;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .admin-content .site-editor-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .admin-content .site-editor-nav button {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding-inline: 6px;
    white-space: normal;
  }
  .admin-content .site-group-nav {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }
}