/* ==========================================================================
   07 · CONTENT — panels, blog, album, buttons, forms, press area, 404
   ========================================================================== */

/* --- Long URLs -------------------------------------------------------------
   Written-out links in editorial text — the privacy page is full of them —
   are unbroken strings with no wrap opportunity. They ran past the panel
   edge on narrow screens.

   Note this did NOT show up as document overflow: the panel clipped them,
   so scrollWidth stayed at the viewport width while the text was visibly
   cut. Checking for horizontal overflow alone would never have found it.

   anywhere, not break-word: the browser still looks for a normal wrap point
   first and only breaks inside a word when there is no other option.
   ------------------------------------------------------------------------ */

.edgtf-content p,
.edgtf-content li,
.edgtf-content a,
.edgtf-content td,
.event_description p,
.event_description a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* --- Panels --------------------------------------------------------------
   72% over a cooled ground plus a light blur. The artwork stays readable
   behind the panel but stops competing with the text. The outline flipped
   from a dark line — invisible on dark ground, obtrusive over the bright
   cloud band — to a pale hairline that reads the same everywhere.

   On two-column pages the panel sits on the LEFT COLUMN, not on the wrapper
   around both. On the wrapper the frame enclosed the sidebar as well and
   the widgets appeared to sit inside the content surface; now each element
   floats for itself, the same way it works on the home page and in posts.

   The exclusions matter: home, news and the calendar overview use the same
   two-column markup, but their left column holds posts that already carry
   their own panels. Without the exclusions those would end up as glass on
   glass.

   Presse-Startseite: die Ausnahme .home gilt fuer schandmaul.de, wo die
   Startseite Beitraege mit eigenen Panels zeigt. Auf presse.schandmaul.de
   ist die Startseite eine normale Inhaltsseite und braucht den Rahmen.
   Getroffen wird sie ueber die Site-Klasse aus functions.php - Seiten-ID und
   Slug sind pro Installation vergeben und auf der jeweils anderen Seite
   falsch.
   ------------------------------------------------------------------------ */

.page:not(.home):not(.news):not(.terminuebersicht) .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
.page.presse .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
.sb-site-presse.home .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
.optional.content,
.edgtf-album-comprehensive {
  background-color: var(--sm-panel);
  -webkit-backdrop-filter: var(--sm-panel-blur);
  backdrop-filter: var(--sm-panel-blur);
  padding: 24px !important;
  border-radius: var(--sm-radius-alt);
  outline: var(--sm-outline);
  outline-offset: var(--sm-outline-offset);
}

/* The gap to the sidebar uses --sm-gap, the same value that separates the
   widgets vertically — columns and widgets end up on one grid.

   The reset below 1024 has to repeat these long selectors. A shorter rule
   in a media query loses to this one: both are !important, and among
   important declarations specificity decides before the media query does. */

.page:not(.home):not(.news):not(.terminuebersicht) .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
.page.presse .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
.sb-site-presse.home .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner {
  margin-right: var(--sm-gap) !important;
}

/* The sidebar column adds its own 20px of grid padding on the left, which
   would land on top of --sm-gap and make the real gap 68. The theme gutter
   is switched off wherever we set the gap ourselves. */

.page .edgtf-two-columns-75-25 .edgtf-column2 > .edgtf-column-inner {
  padding-left: 0 !important;
}

@media only screen and (max-width: 1024px) {
  .page:not(.home):not(.news):not(.terminuebersicht) .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
  .page.presse .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
  .sb-site-presse.home .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner {
    margin-right: 0 !important;
  }
  /* The sidebar column carries 20px of left padding from the theme grid,
     the content column 20px on the right. Both are the gutter between the
     columns; once they stack, they only push the content off the edge that
     everything else sits on. */
  .edgtf-two-columns-75-25 .edgtf-column2 > .edgtf-column-inner {
    padding-left: 0 !important;
  }
  .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner {
    padding-right: 0 !important;
  }
}

/* --- Sidebar widgets ------------------------------------------------------
   Same construction as the content panels, one step lighter. The reading
   surfaces on the left sit firm at 80%, the sidebar stays permeable at 38%
   and leans on a stronger blur instead. Left and right now differ only in
   density, no longer in system.

   Note the layering: the event cards inside carry their own tint. They sit
   only four percentage points above this panel but read clearly, because
   the difference comes from saturation, not from opacity.
   ------------------------------------------------------------------------ */

.edgtf-sidebar .widget {
  background-color: var(--sm-panel-soft);
  -webkit-backdrop-filter: var(--sm-panel-blur-soft);
  backdrop-filter: var(--sm-panel-blur-soft);
  padding: 24px;
  border-radius: var(--sm-radius-alt);
  outline: var(--sm-outline);
  outline-offset: var(--sm-outline-offset);
}

/* Widgets sit --sm-gap apart vertically, the same distance the sidebar
   keeps from the content column horizontally. The theme's 12px left only
   about 2px of visible air, because the 5px outline offset eats into the
   gap from both sides. */

.edgtf-sidebar .widget:not(.edgtf-separator-widget) {
  margin-bottom: var(--sm-gap) !important;
}

/* The last widget keeps no gap — its margin would add to the container's
   bottom padding and double the space before the footer. Same reason the
   last article drops its margin. */

.edgtf-sidebar .widget:not(.edgtf-separator-widget):last-child {
  margin-bottom: 0 !important;
}

/* The sidebar carries another 20px of padding at the bottom from the theme,
   which lands on top of the container padding just the same. */

.edgtf-sidebar {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 768px) {
  .edgtf-sidebar .widget:not(.edgtf-separator-widget) {
    margin-bottom: calc(var(--sm-gap) / 2) !important;
  }
}

.edgtf-sidebar .widget .edgtf-widget-title {
  margin-top: 0 !important;
}

/* --- Images ---------------------------------------------------------------
   WPBakery single-image elements ship at their chosen attachment size and
   stop there. Most of them are set to "large" (1024px), which filled the
   column while the grid was 1300 wide — at 1600 the column is 1108 and the
   images left a gap on the right.

   This forces them to the column width. The cost is upscaling: a 1024px
   image is stretched by about 8%, which is invisible on photographs and
   noticeable only on hard-edged artwork with fine type. Where that matters,
   the real fix is to set the element to XL (1455) or full and let WordPress
   deliver actual pixels — this rule is the net, not the repair.
   ------------------------------------------------------------------------ */

.wpb_single_image .vc_single_image-wrapper,
.wpb_single_image figure,
.wpb_single_image img,
.edgtf-post-image img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.bordered img {
  border-radius: var(--sm-radius-alt);
}

/* --- Blog ---------------------------------------------------------------- */
/* NOTE: this rule existed twice in the original stylesheet. The second
   declaration overwrote border-radius with a plain 24px, so the blog was
   the only element not using the 24px 0 24px 0 corner. Merged, and the
   rendered value kept — switching is a design decision, still open. */

.edgtf-blog-holder article {
  background-color: var(--sm-panel);
  -webkit-backdrop-filter: var(--sm-panel-blur);
  backdrop-filter: var(--sm-panel-blur);
  padding: 36px;
  margin-bottom: var(--sm-gap) !important;
  border-radius: var(--sm-radius);
  outline: var(--sm-outline);
  outline-offset: var(--sm-outline-offset);
  width: -webkit-fill-available;
  width: -moz-available;
}

/* Home and news have no panel on the column, so their column gap comes
   from the theme's 20px of grid padding on each side — 40, not --sm-gap.
   These two lines put them on the same 48.

   The press front page is excluded: it DOES carry a panel, so it takes the
   margin rule above like every other content page. Without the exclusion it
   would get both, and the gap to the sidebar would double. */

@media only screen and (min-width: 1025px) {
  body.home:not(.sb-site-presse) .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner,
  body.news .edgtf-two-columns-75-25 .edgtf-column1 > .edgtf-column-inner {
    padding-right: calc(var(--sm-gap) / 2) !important;
  }
  body.home:not(.sb-site-presse) .edgtf-two-columns-75-25 .edgtf-column2 > .edgtf-column-inner,
  body.news .edgtf-two-columns-75-25 .edgtf-column2 > .edgtf-column-inner {
    padding-left: calc(var(--sm-gap) / 2) !important;
  }
}

@media only screen and (max-width: 768px) {
  .edgtf-blog-holder article {
    margin-bottom: calc(var(--sm-gap) / 2) !important;
  }
}

@media only screen and (max-width: 480px) {
  .edgtf-blog-holder article {
    padding: 20px;
  }
}

/* --- Album --------------------------------------------------------------- */

.single-album .edgtf-album-tracks-holder .edgtf-tracks-holder .edgtf-track-holder {
  border-bottom: 2px dotted var(--sm-hairline-soft) !important;
}

.single-album .edgtf-album-light,
.single-album .edgtf-album-light .edgtf-album-details-holder .edgtf-album-details span {
  color: var(--sm-text) !important;
}

/* --- Discography --------------------------------------------------------- */

.diskografie .wpb_text_column h2 {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 12px !important;
}

/* --- Tour logos ---------------------------------------------------------- */
/* FIX: was "ddrop-shadow" — invalid value, silently dropped. */

.logos.tour {
  -webkit-filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 1));
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 1));
}

/* --- Buttons and forms ---------------------------------------------------
   Filled instead of outlined. An outline on a translucent panel over a
   photograph reads as a frame around nothing; a filled control reads as a
   control. Evenly rounded at --sm-radius-btn — the asymmetric corner stays
   with the large surfaces.
   ------------------------------------------------------------------------ */

.edgtf-btn.edgtf-btn-outline,
.wpcf7-form-control.has-spinner.wpcf7-submit {
  background-color: var(--sm-fill) !important;
  border: 0 !important;
  outline: var(--sm-outline) !important;
  outline-offset: 4px !important;
  color: var(--sm-white) !important;
  border-radius: 12px 0 12px 12px !important;
  font-size: 18px !important;
  padding: 14px 32px !important;
}

.edgtf-btn.edgtf-btn-outline:hover,
.wpcf7-form-control.has-spinner.wpcf7-submit:hover {
  background-color: var(--sm-fill-hover) !important;
  border-color: var(--sm-fill-hover) !important;
  color: var(--sm-white) !important;
}

/* --- Press area ---------------------------------------------------------- */

.presse .edgtf-sidebar .widget ul:not(.edgtf-blog-list) li {
  padding-bottom: 0px !important;
}

.presse .edgtf-sidebar .widget ul:not(.edgtf-blog-list) li:not(.cat-item) {
  margin-bottom: 0px !important;
}

.presse input#user_login,
.presse input#user_pass {
  width: 100%;
  height: 30px;
  padding: 6px;
}

.presse .edgtf-sidebar .widget input[type=submit] {
  background-color: var(--sm-fill) !important;
  border: 2px solid var(--sm-fill) !important;
  color: var(--sm-white) !important;
  border-radius: var(--sm-radius-btn) !important;
  display: inline-block;
  position: relative;
  outline: 0;
  font-style: normal;
  font-weight: 500;
  font-family: inherit;
  padding: 18px 42px;
  font-size: 18px;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s ease-out;
  margin: 12px 0;
}

.presse .edgtf-sidebar .widget input[type=submit]:hover {
  border-color: var(--sm-fill-hover) !important;
  color: var(--sm-white) !important;
  background-color: var(--sm-fill-hover) !important;
}

/* --- 404 ----------------------------------------------------------------- */

.edgtf-404-page h1,
.edgtf-404-page p {
  color: var(--sm-ink) !important;
}

.edgtf-404-page .edgtf-btn.edgtf-btn-outline {
  border: 2px solid var(--sm-ink) !important;
  color: var(--sm-ink) !important;
}