/* Hide Logo - display text */
    a.logo {display: none !important;}
    #logo::after {content: "Tag der Lehre Lübeck am 13.11.2026";}

    /* Hide unused elements */
    .langselect, .mainNavFirstLevel, .quickSelect, .socialMedia {display:none;}

    /* Change appearance headings insde forms */
    .form-element-statictext>h2 {
      font-size: 26px;
      line-height: 1.2em;
      font-weight: 600;
      margin-top: 35px;
      margin-bottom: 0.4em;
      color: var(--color-dark-grey-1);
    }

    :root {
      /* Change colors of theme*/
      --color-sherpa-blue: #00457C; /*main color*/
      --color-sherpa-blue-90 :#1A5889;
      --color-sherpa-blue-80: #00457C; /*#336A96*/
      --color-sherpa-blue-70: #4D7DA3;
      --color-sherpa-blue-40: #99B5CB;
      --color-sherpa-blue-10: #E6ECF2;
      --color-sherpa-blue-30:rgba(0, 69, 124, 0.3);
      --color-sherpa-blue-20:rgba(0, 69, 124, 0.2);
      --color-sherpa-blue-60:#668FB0;
      --color-eastern-blue: #668FB0;
      --color-green-blue: #1F5F8B;
      --color-dark-grey-1: #383D42;
      --color-dark-grey-2: #2E3237;
      --color-pion-purple: #1A5889;
      --color-orange: #E4611A; //C4410A
      --color-orange-light: #E4611A;
      --color-grey: #9AA0A6;

      /* Colors for session method types */
      --color-cat-workshop: #0B7A6C; /*teal*/
      --color-cat-discussion: darkgoldenrod; /*#F2B705; amber*/
      --color-cat-talk: #B0306A; /*berry*/
      --color-cat-plenum: #6A4CB4;  /*violet*/
    }

    /* Adjust text on news detail page. */
    .news-single .news-text-wrap p{
      line-height: 1.5;
      text-align: justify;
      hyphens: auto;
    }

    /* Adjust image on news detail page. */
    .news-single .news-img-wrap img {
      height: 100%;
      width: 300px;
      float: left;
      margin-right: 40px;
    }

    /* ============================================================
       Cards for event programme page
    ============================================================ */

    /* ws-prefix initially stood for workshop. 
       Should be refactored... . */
    .ws-card {
      --ws-color: #333;
      --ws-muted: #667;
      --ws-bg: #fff;
      --ws-border: #cfd6dd;
      --ws-accent: #004b5a;    /* badge + link color */
      position: relative;
      /*max-width: 36rem;*/
      margin: 0.25em 0;
      padding: 1.1rem 1.25rem;
      border: 1px solid var(--ws-border);
      border-radius: 12px;
      background: var(--ws-bg);
      color: var(--ws-color);
      /* font: 400 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;*/
      transition: box-shadow .15s, border-color .15s;
    }

    .ws-card__pos-top {
       border-radius: 12px 12px 0 0;
       border-bottom: none;
       margin-bottom: 0;
    }
    .ws-card__pos-middle {
       border-radius: 0;
       border-top: none;
       border-bottom: none;
       margin-top: 0;
       margin-bottom: 0;
    }
    .ws-card__pos-bottom {
      border-radius: 0 0 12px 12px;
      border-top: none;
      margin-top: 0;
    }

    .ws-card:hover,
    .ws-card:focus-within {
      /*border-color: var(--ws-accent);*/
      box-shadow: 0 3px 10px rgba(0,0,0,0.3);
      z-index: 999;
    }
    .ws-card__type-keynote {
	  border-right: 10px solid var(--color-cat-plenum);
    }
    .ws-card__type-talk {
      border-right: 10px solid var(--color-cat-talk);
    }
    .ws-card__type-workshop {
      border-right: 10px solid var(--color-cat-workshop);
    }
    .ws-card__type-discussion {
      border-right: 10px solid var(--color-cat-discussion);
    }
    .ws-card__timepill{
      display: inline-block;
      padding: .15em .7em;
      border: 1px solid #cfd6dd; 
      border-radius: 999px;
      background-color: #f4f6f8;
      color: #333;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      line-height: 1.5em;
      margin-bottom: 0.75em;
    }

    .ws-card__pill {
      border: 1px solid #cfd6dd; 
      border-radius: 999px;
      background-color: #f4f6f8;
      display: inline-block;
      padding: .15em .7em;
      border-radius: 999px;
      background-color: #f4f6f8;
      color: #333;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      line-height: 1.5em;
      margin-bottom: 0.75em;
    }
    .ws-card__pill-keynote {
      background: var(--color-cat-plenum);
      color: #fff;
      border: none;
    }
    .ws-card__pill-talk {
      background: var(--color-cat-talk);
      color: #fff;
      border: none;
    }
    .ws-card__pill-workshop {
      background: var(--color-cat-workshop);
      color: #fff;
      border: none;
    }
    .ws-card__pill-discussion {
      background: var(--color-cat-discussion);
      color: #fff;
      border: none;
    }
    .ws-card__title {
      margin: .6rem 0 .25rem;
      font-size: 1.15rem;
      font-weight: 400;
      line-height: 1.3;
    }
    .ws-card__speaker {
      margin: 0 0 .8rem;
      color: var(--ws-muted);
    }
    .ws-card__link {
      color: var(--ws-accent);
      font-weight: 600;
      text-decoration: none;
    }
    /* makes the whole card clickable */
    .ws-card__link::after {           
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }
    .ws-card__link:focus-visible { outline: none; }
    .ws-card:focus-within { outline: 2px solid var(--ws-accent); outline-offset: 2px; }

    /* ============================================================
       Divider styling for divider-shorthand
    ============================================================ */
    .tr-divider {
      --tr-color: #333;        /* text + icon */
      --tr-bg: #f4f6f8;        /* pill background */
      --tr-border: #cfd6dd;    /* pill border + side lines */
      display: flex;
      align-items: center;
      margin: 2rem 0;
    }
    .tr-divider::before,
    .tr-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--tr-border);
    }
    .tr-divider__pill {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      margin: 0 1em;
      padding: .4em 1.1em;
      border: 1px solid var(--tr-border);
      border-radius: 999px;
      background: var(--tr-bg);
      color: var(--tr-color);
      font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .tr-divider__pill svg { width: 1.15em; height: 1.15em; flex: none; }

    /* ============================================================
       Programme grid: four rooms side by side
    ============================================================ */

    /* Container: four equal columns. Grid columns automatically
    share the height of the tallest column. */
    .col-container-1-1-1-1.col-container-1-1-1-1 {
      display: grid !important;                          /* beats theme rules (flex/float) */
      column-gap: 10px;
      gap: 1rem;
      grid-template-columns: repeat(4, minmax(0, 1fr));  /* equal widths */
      align-items: stretch;                              /* all columns same height */
    }

    /* Columns: header frame on top, card frame below. */
    .col-container-1-1-1-1 > .col1,
    .col-container-1-1-1-1 > .col2,
    .col-container-1-1-1-1 > .col3,
    .col-container-1-1-1-1 > .col4 {
      display: flex !important;                          /* beats theme rules */
      flex-direction: column;
      float: none !important;                            /* neutralise theme floats */
      width: auto !important;                            /* width comes from the grid */
      min-width: 0;                                      /* long titles wrap */
    }

    /* ============================================================
       Card frame: fills the rest of the column
       ============================================================ */

    /* The HTML frame takes all remaining height below the room
       header and stacks its cards vertically. */
    .col-container-1-1-1-1 .frame-type-html {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 0;                                  /* theme margin would offset the bottom edge */
    }

    /* ============================================================
       Cards: stretch to fill the frame
       ============================================================ */

    /* Each card grows by the same share, so together the cards
       fill the full frame height. A single card fills it alone. */
    .col-container-1-1-1-1 .frame-type-html > .ws-card {
      flex: 1 1 auto;
      width: 100%;
      box-sizing: border-box;                            /* padding/border included in the size */
    }

    /* ============================================================
       Small screens: rooms stacked
       ============================================================ */

    @media (max-width: 768px) {
      .col-container-1-1-1-1 {
        grid-template-columns: 1fr;
      }

      /* Natural heights again in the stacked layout */
      .col-container-1-1-1-1 .frame-type-html,
      .col-container-1-1-1-1 .frame-type-html > .ws-card {
        flex: none;
      }
    }

    /* ============================================================
       Confirmation Page Box
       ============================================================ */
                                                    
     .success-box {
      --sb-accent: #2A8552;
      --sb-accent-soft: #e8f5ee;
      --sb-bg: #ffffff;
      --sb-border: #c8e6d5;
      --sb-title: #0B7A6C;  
      --sb-text: #3c4a44;
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(42,133,82,.10);

        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
        max-width: 640px;
        margin: 2rem auto;
        padding: 1.5rem 1.75rem;
        background: var(--sb-bg);
        border: 1px solid var(--sb-border);
        border-left: 6px solid var(--sb-accent);
        border-radius: 12px;

      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(11,122,108,.10);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        animation: sb-in .4s ease-out both;
      }

      .success-box__icon {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--sb-accent-soft);
      }

      .success-box__icon svg {
        width: 34px;
        height: 34px;
        stroke: var(--sb-accent);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      /* draw-in animation for circle + check */
      .success-box__icon .sb-circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: sb-draw .6s .15s ease-out forwards; }
      .success-box__icon .sb-check  { stroke-dasharray: 40;  stroke-dashoffset: 40;  animation: sb-draw .35s .65s ease-out forwards; }

      .success-box__content { flex: 1; min-width: 0; }

      .success-box__title {
        margin: .15rem 0 .35rem;
        font-size: 1.25rem;
        font-weight: 650;
        color: var(--sb-title);
      }

      .success-box__text {
        margin: 0;
        line-height: 1.55;
        color: var(--sb-text);
      }

      .success-box__actions {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
      }

      .success-box__btn {
        display: inline-block;
        padding: .5rem 1rem;
        border-radius: 8px;
        font-size: .95rem;
        font-weight: 600;
        text-decoration: none;
        background: var(--sb-accent);
        color: #fff;
        transition: filter .15s;
      }
      .success-box__btn:hover { filter: brightness(1.08); }
      .success-box__btn--ghost {
        background: transparent;
        color: var(--sb-accent);
        border: 1px solid var(--sb-border);
      }

      @keyframes sb-draw { to { stroke-dashoffset: 0; } }
  .col-container-1-1-1-1.col-container-1-1-1-1 {
    gap: 10px !important;
    grid-gap: 10px !important;
  }

  .mask_headerbild {max-height: 280px !important;}
  .mask_headerbild {
    & .image {
      & picture {
        max-height: 280px !important;
      }
    }
  }

  .blueButton {
     background-color: var(--color-sherpa-blue);
  }

  /* Re-Format block quote. */
  blockquote {padding-left: 40px !important; quotes: unset !important; font-style: normal !important;}
  blockquote::before {content: none !important;}