/* Rendering of the rebuilt Karma shortcodes.
   Ties into the design tokens of the theme and falls back to its own
   values in case the plugin ever runs without this theme. */

.hv-frame,
.hv-col,
.hv-col-clear,
.hv-hr,
.hv-hr-gap {
  --hv-kc-linie: var(--hv-sandlinie, #DFC192);
  --hv-kc-gap:   var(--hv-gap-innen, 24px);
  /* Distance between separator and content. 10px more below the
     content, because the link button ends there with a 2px underline
     and the distance would otherwise look tighter. */
  --hv-kc-rand:       40px;
  --hv-kc-rand-unten: 50px;
  --hv-kc-block: var(--hv-gap-block, 50px);
}

/* ---------------------------------------------------------------
   Image frame [frame]
   The dimensions come from the timthumb calls of the existing pages,
   so that the image crop stays unchanged. The aspect ratio is kept,
   the width scales with it.
   --------------------------------------------------------------- */
.hv-frame { margin: 0 0 var(--hv-kc-gap); max-width: 100%; }
.hv-frame__link { display: block; text-decoration: none; border: 0; }
.hv-frame__bild { width: 100%; height: 100%; object-fit: cover; display: block; }

.hv-frame--two-col-large   { width: 437px; }
.hv-frame--two-col-small   { width: 275px; }
.hv-frame--three-col-large { width: 275px; }
.hv-frame--portrait-thumb  { width: 275px; }
.hv-frame--square          { width: 190px; }
.hv-frame--banner-full     { width: 922px; }

.hv-frame--two-col-large   .hv-frame__bild { aspect-ratio: 437 / 234; }
.hv-frame--two-col-small   .hv-frame__bild,
.hv-frame--three-col-large .hv-frame__bild { aspect-ratio: 275 / 145; }
.hv-frame--portrait-thumb  .hv-frame__bild { aspect-ratio: 275 / 355; }
.hv-frame--square          .hv-frame__bild { aspect-ratio: 190 / 180; }
.hv-frame--banner-full     .hv-frame__bild { aspect-ratio: 922 / 201; }

/* float from the attribute of the shortcode. */
.hv-frame--right { float: right; margin-left: var(--hv-kc-gap); }
.hv-frame--left  { float: left;  margin-right: var(--hv-kc-gap); }

.hv-frame figcaption {
  font-size: var(--hv-fs-legende, 14px);
  line-height: var(--hv-lh-text, 1.44);
  margin-top: 12px;
}

/* ---------------------------------------------------------------
   Columns
   12 columns, 24px gutter on 883px content width. In percent so that
   the columns also add up in narrower containers:
   gutter 24 / 883        = 2.7180%
   column (100 - 11*g)/12 = 5.8418%
   --------------------------------------------------------------- */
.hv-col {
  --hv-kc-rinne: 2.718%;
  --hv-kc-einheit: 5.8418%;
  float: left;
  margin-right: var(--hv-kc-rinne);
  /* The distance to the next row sits on the clearing element, not
     here. Otherwise it adds to the separator's own distance in front of
     a separator. */
  margin-bottom: 0;
  min-width: 0;
}
.hv-col--letzte { margin-right: 0; }
/* The last paragraph of a column brings no distance of its own,
   otherwise it appears twice: once here, once as column spacing. */
.hv-col > *:last-child { margin-bottom: 0; }
/* Carries the distance to the next column row. If a separator follows
   directly, it is dropped: the separator brings its own. 49 places in
   the existing content stack two column rows without a separator. */
.hv-col-clear { clear: both; margin-bottom: var(--hv-kc-gap); }
.hv-col-clear:has(+ .hv-hr) { margin-bottom: 0; }

.hv-col--2  { width: calc(2  * var(--hv-kc-einheit) + 1  * var(--hv-kc-rinne)); }
.hv-col--3  { width: calc(3  * var(--hv-kc-einheit) + 2  * var(--hv-kc-rinne)); }
.hv-col--4  { width: calc(4  * var(--hv-kc-einheit) + 3  * var(--hv-kc-rinne)); }
.hv-col--5  { width: calc(5  * var(--hv-kc-einheit) + 4  * var(--hv-kc-rinne)); }
.hv-col--6  { width: calc(6  * var(--hv-kc-einheit) + 5  * var(--hv-kc-rinne)); }
.hv-col--7  { width: calc(7  * var(--hv-kc-einheit) + 6  * var(--hv-kc-rinne)); }
.hv-col--8  { width: calc(8  * var(--hv-kc-einheit) + 7  * var(--hv-kc-rinne)); }
.hv-col--9  { width: calc(9  * var(--hv-kc-einheit) + 8  * var(--hv-kc-rinne)); }
.hv-col--10 { width: calc(10 * var(--hv-kc-einheit) + 9  * var(--hv-kc-rinne)); }

/* An image frame in a narrow column must not overhang. */
.hv-col .hv-frame { width: 100%; }

/* ---------------------------------------------------------------
   Separator
   --------------------------------------------------------------- */
/* The separator carries both distances on its own: 50px to the content
   above, 40px to the content below. For that to work, neither the
   column nor its last paragraph brings a distance of its own; otherwise
   they add up to the 72px that used to sit below the image-text-link
   unit. */
.hv-hr {
  clear: both;
  border: 0;
  border-top: 1px solid var(--hv-kc-linie);
  /* Top the distance to the content above, bottom the one to the content below. */
  margin: var(--hv-kc-rand-unten) 0 var(--hv-kc-rand);
}
.hv-hr-gap { clear: both; height: var(--hv-kc-gap); }

/* ---------------------------------------------------------------
   Mobile: one column, images at content width, no floats.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .hv-col {
    float: none;
    width: 100%;
    margin-right: 0;
  }
  .hv-frame,
  .hv-frame--right,
  .hv-frame--left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Stacked, the columns need the distance that the clearing element
     carries on desktop. Otherwise the heading of the text column sticks
     directly to the image above it: .hv-col > *:last-child sets the
     distance below the image frame to 0, which is right side by side.
     The last column of a row gets none, .hv-col-clear follows it with
     its own. */
  .hv-col { margin-bottom: var(--hv-kc-gap); }
  .hv-col--letzte { margin-bottom: 0; }
}

/* ---------------------------------------------------------------
   [caption] from the WordPress core
   421 occurrences. The core generates the markup itself, it is styled
   here. Image caption 14 / 1.44 as in the design system.
   --------------------------------------------------------------- */
.wp-caption { max-width: 100%; margin-bottom: var(--hv-kc-gap); }
.wp-caption img { width: 100%; height: auto; display: block; }
.wp-caption-text,
.wp-caption .wp-caption-text {
  font-size: var(--hv-fs-legende, 14px);
  line-height: var(--hv-lh-text, 1.44);
  margin: 12px 0 0;
}
.wp-caption.alignleft  { float: left;  margin-right: var(--hv-kc-gap); }
.wp-caption.alignright { float: right; margin-left: var(--hv-kc-gap); }
.wp-caption.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft  { float: left;  margin-right: var(--hv-kc-gap); }
.alignright { float: right; margin-left: var(--hv-kc-gap); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   [button]
   173 occurrences. Becomes the design system's link button.
   --------------------------------------------------------------- */
.hv-kc-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hv-pfeil-gap, 10px);
  height: var(--hv-link-h, 31px);
  padding-bottom: 4px;
  box-sizing: border-box;
  border-bottom: var(--hv-unterstrich, 2px) solid var(--hv-signalrot, #BD0B06);
  font-size: var(--hv-fs-link, 16px);
  line-height: 1;
  color: var(--hv-anthrazit, #444);
  text-decoration: none;
}
.hv-kc-button:hover, .hv-kc-button:focus {
  color: var(--hv-anthrazit, #444);
  border-bottom-color: transparent;
}
.hv-kc-vector-box { margin: 0 0 var(--hv-kc-gap); }

/* [heading_horizontal], 6 occurrences, always h6. */
.hv-kc-heading { margin: var(--hv-kc-block) 0 var(--hv-kc-gap); }

/* [iframe], 2 occurrences, both YouTube. */
.hv-kc-embed { position: relative; width: 100%; margin-bottom: var(--hv-kc-gap); }
.hv-kc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }