/*****************************************************************************************************
* Page CSS: All pages
******************************************************************************************************/

/*
Common Page Styles
---------------------------------------------------------------------------------------------------- */

/* Page Title */
/*
.page:not(.home) .entry-header h1.entry-title {
  margin: 0px 0 30px;
}
*/


/*
Editor Patterns
---------------------------------------------------------------------------------------------------- */

/* The classes editors give core blocks (bube-*, the class system of
   EDITOR-WORKFLOW.md in devbuch's .claude), for Verlag, Kontakt, Presse,
   Buchhandel and Bestellung (design step 8, 2026-10-18) and the front page
   (step 9). */

/* Sections: stacked with space between them, headed by small labels. The
   space alone separates them, without a rule above each label (user,
   2026-10-19). */

.bube-root > * + * {
  margin-top: 64px;
}

.page .entry-content .bube-root h2 {
  color: var(--body-color-acc);
  font: var(--basic-font-def);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0 0 28px;
  text-transform: uppercase;
}

.bube-root .wp-block-columns {
  gap: 24px 40px;
  margin: 0;
}

.bube-root .wp-block-column > :last-child {
  margin-bottom: 0;
}

/* Labels, Lead and Text */

.bube-block-label {
  color: var(--body-color-acc);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.3;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.bube-block-lead {
  font: var(--display-font-def);
  font-size: 23px;
  line-height: 1.35;
  max-width: 30em;
}

.bube-section-text p:not(.bube-block-lead) {
  font: var(--alt-font-def);
  max-width: 34em;
}

/* Rows: label left, text right, between hairlines */

.bube-block-row {
  border-top: 1px solid var(--body-background-dk2);
  padding: 16px 0 15px;
}

.bube-block-row:last-child {
  border-bottom: 1px solid var(--body-background-dk2);
}

.bube-block-row p {
  margin: 0;
}

.bube-block-row .bube-block-label {
  margin-top: 4px;
}

/* Cards: on paper, one per column, or a single block (bube-block-card) */

.bube-block-cards > .wp-block-column,
.bube-block-card {
  background: var(--body-background-dk1);
  font-size: 15px;
  line-height: 1.6;
  padding: 26px 28px 24px;
}

.bube-block-cards p,
.bube-block-card p {
  margin: 0;
}

.bube-block-cards .bube-block-label,
.bube-block-card .bube-block-label {
  margin-bottom: 12px;
}

/* Address (Kontakt): the name in the serif, the address below it and phone
   and e-mail beside the address, in the first two columns of the cards
   below and without a band of its own, so that the cards are the page's
   only boxes (user, 2026-10-19: the band looked clunky). Core forces
   align-items off on columns, so the second column aligns itself. */

@media screen and (min-width: 782px) {

  .bube-section-address .bube-block-address > .wp-block-column {
    flex: 0 1 calc((100% - 80px) / 3);
  }

  .bube-section-address .bube-block-address > .wp-block-column:last-child {
    align-self: flex-end;
  }
}

.bube-section-address p {
  font: var(--alt-font-def);
  margin: 0;
}

.bube-section-address .bube-block-address-name {
  font: var(--display-font-def);
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
}

/* Timeline (Verlag): the year, the text and the cover of that year */

.bube-block-timeline {
  border-top: 1px solid var(--body-background-dk2);
  padding: 28px 0;
}

.bube-block-timeline:last-child {
  border-bottom: 1px solid var(--body-background-dk2);
}

.bube-block-timeline p {
  font: var(--alt-font-def);
}

.bube-block-timeline .bube-block-year {
  font: var(--display-font-def);
  font-size: 40px;
  line-height: 1;
  margin: 0;
}

.bube-block-timeline .wp-block-image {
  margin: 0;
  text-align: right;
}

.bube-block-timeline .wp-block-image img {
  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 10px 22px -10px rgba(0,0,0,0.35);
  height: auto;
  max-width: 130px;
}

/* Quotes between sections: italic serif, the source in spaced capitals. The
   prefix outweighs the quote rule of the editing module's editing-block.css,
   which counts with an ID's weight. */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .bube-root .wp-block-quote {
  border: 0;
  margin: 64px 0 0;
  max-width: 34em;
  padding: 0;
}

.page .bube-root .wp-block-quote p {
  font: var(--display-font-def);
  font-size: 24px;
  font-style: italic;
  line-height: 1.35;
  margin: 0 0 12px;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .bube-root .wp-block-quote cite {
  color: var(--body-color-acc);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Shelf: the bub Products block as one row of covers on paper (Verlag). The
   titles stay for screen readers, since the cover links are hidden from
   them. */

.bub-block-products.bube-block-shelf {
  background: var(--body-background-dk1);
  padding: 36px 40px;
}

.bub-block-products.bube-block-shelf .bub-loop.imagebox {
  align-items: end;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container (min-width: 600px) {

  .bub-block-products.bube-block-shelf .bub-loop.imagebox {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.bub-block-products.bube-block-shelf .bub-loop.imagebox .featimg {
  aspect-ratio: auto;
  background: none;
  padding: 0;
}

.bub-block-products.bube-block-shelf .bub-loop.imagebox .text-container {
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Aside image: an image block beside the text that drops below it once the
   columns stack (Webagentur). The columns' 24px gap looked tighter than the
   space between paragraphs, which the text's line spacing widens, so the
   image keeps a paragraph's distance (user, 2026-10-18). */

@media screen and (max-width: 781px) {

  .bube-root .wp-block-image.bube-block-aside-image {
    margin-top: 12px;
  }
}

/* Feature (front page): an image on a paper panel, the text beside it and
   centered to it, for a person (Im Porträt, the image block with the class
   bube-block-portrait, in black and white) or a title. Each column centers
   itself, since WordPress core sets align-items: initial !important on every
   columns block. The title one step below the section headings, as the
   slides of the bub Products slider (user, 2026-10-19). */

.bube-block-feature > .wp-block-column {
  align-self: center;
}

.bube-block-feature .wp-block-image {
  align-items: center;
  background: var(--body-background-dk1);
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 44px 32px;
}

.bube-block-feature .wp-block-image img {
  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 10px 22px -10px rgba(0,0,0,0.35);
  display: block;
  height: auto;
  max-height: 380px;
  width: auto;
}

.bube-block-feature .wp-block-image.bube-block-portrait img {
  box-shadow: none;
  filter: grayscale(1);
  transition: filter 400ms ease;
}

.bube-block-feature .wp-block-image.bube-block-portrait:hover img {
  filter: none;
}

.page .entry-content .bube-block-feature h3 {
  font: var(--display-font-def);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
}

.bube-block-feature p:not(.bube-block-label) {
  font: var(--alt-font-def);
  max-width: 30em;
}

.bube-block-feature .bube-block-meta {
  color: var(--body-color-acc);
  font-style: italic;
}

/* Index (front page): links to the filtered title list, one per line
   between hairlines. */

.entry-content ul.bube-block-index {
  border-top: 1px solid var(--body-background-dk2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-content .bube-block-index li {
  border-bottom: 1px solid var(--body-background-dk2);
  margin: 0;
  padding: 0;
}

.bube-block-index li a {
  color: inherit;
  display: block;
  font: var(--display-font-def);
  font-size: 22px;
  line-height: 1.3;
  padding: 10px 0;
  text-decoration: none;
}

.bube-block-index li a:hover {
  text-decoration: underline;
}

/* Front page: every section headed in serif, one step above the titles of
   the features and slides (28px) and two above those of lists (21px); the
   quote and the events on paper bands across the full width, so the sections
   differ without rules (user, 2026-10-19). The shadow
   paints a band to the screen edges; .site-container's overflow clip keeps
   the page from scrolling sideways. The events section is left out while
   [bub_eventlist] finds no upcoming events (user, 2026-10-18), and its band
   with it; browsers without :has() show it with the no-events text. */

.home .entry-content .bube-root h2 {
  color: var(--body-color-def);
  font: var(--display-font-def);
  font-size: 36px;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.home .bube-section-events,
.home :is(#editor, .bub-editor-content) .bube-root > .wp-block-quote {
  background: var(--body-background-dk1);
  box-shadow: 0 0 0 100vmax var(--body-background-dk1);
  clip-path: inset(0 -100vmax);
  padding: 64px 0;
}

.home :is(#editor, .bub-editor-content) .bube-root > .wp-block-quote {
  max-width: none;
  text-align: center;
}

.home .bube-root > .wp-block-quote p {
  font-size: 30px;
  margin: 0 auto 16px;
  max-width: 24em;
}

.bube-section-events:has(.bub-eventlist__noresults) {
  display: none;
}

@media screen and (max-width: 650px) {

  .bube-root > * + * {
    margin-top: 48px;
  }

  .bub-block-products.bube-block-shelf,
  .bube-block-feature .wp-block-image {
    padding: 28px 22px;
  }

  .page .entry-content .bube-block-feature h3 {
    font-size: 24px;
  }

  .bube-block-lead {
    font-size: 20px;
  }

  .bube-block-timeline .wp-block-image {
    text-align: left;
  }

  :is(#editor, .editor-styles-wrapper, .bub-editor-content) .bube-root .wp-block-quote {
    margin-top: 48px;
  }

  .page .bube-root .wp-block-quote p {
    font-size: 20px;
  }

  .home .entry-content .bube-root h2 {
    font-size: 28px;
  }

  .home .bube-section-events,
  .home :is(#editor, .bub-editor-content) .bube-root > .wp-block-quote {
    padding: 44px 0;
  }

  .home .bube-root > .wp-block-quote p {
    font-size: 22px;
  }
}


/*
Page: Imprint (Impressum) / Privacy (Datenschutz)
---------------------------------------------------------------------------------------------------- */

/* Impressum, AGB, Datenschutz and the editors' guide (body class from
   core/includes/support.php): the text in a reading column, each section
   headed in serif, without a rule above it (user, 2026-10-19). */

.page-legal .entry-content {
  max-width: 42em;
}

.page-legal .entry-content :is(p, li) {
  font-size: 17px;
  line-height: 1.65;
}

.page-legal .entry-content h2 {
  font: var(--display-font-def);
  font-size: 26px;
  line-height: 1.25;
  margin: 44px 0 16px;
}

.page-legal .entry-content > h2:first-child {
  margin-top: 0;
}

@media screen and (max-width: 500px) {

  .page-legal .entry-content h2 {
    font-size: 23px;
  }
}


/*
Agency Credit: Buchhandel, Presse and Verlag
---------------------------------------------------------------------------------------------------- */

/* Centered after the page's content (section.php): the screen picture,
   flipped so that its pages face the text, and "Bubsites" above
   "Buchwebsites" in the capitals of the section labels, the upper word
   indented with the screen's lean (user, 2026-10-23, as in luftschacht). */

.bub-agency-credit {
  display: flex;
  justify-content: center;
  margin: 4rem 0 0;
  width: 100%;
}

.bub-agency-credit a {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.bub-agency-credit :is( a, a:focus) {
  text-decoration: none;
}

.bub-agency-credit img {
  height: 2.75rem;
  transform: scaleX(-1);
  width: auto;
}

.bub-agency-credit span {
  color: var(--body-color-acc);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.bub-agency-credit strong {
  color: var(--body-color-def);
  display: block;
  font-weight: 600;
  padding-left: 0.35em;
}

.bub-agency-credit :is(a:hover, a:focus) strong {
  text-decoration: underline;
}


/*
Page: About / Über uns
---------------------------------------------------------------------------------------------------- */


/*
Page: Kontakt
---------------------------------------------------------------------------------------------------- */