/* ============================================================
   MHL R217
   SCHLESWIG-HOLSTEIN
   SEASON ACCORDION
   ============================================================ */

/* ------------------------------------------------------------
   ÄUSSERER SAISON-BEREICH
   ------------------------------------------------------------ */

body.scene-sh .editorial-details {
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   JEDER EINZELNE JAHRESZEIT-BLOCK
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details {
    position: relative;

    margin: 0 0 12px;
    padding: 0;

    border: 1px solid rgba(76, 185, 213, .24);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 57, 75, .72),
            rgba(4, 39, 54, .72)
        );

    overflow: hidden;

    transition:
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


/* Letztes Element ohne zusätzlichen Abstand */

body.scene-sh .editorial-details details:last-of-type {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   SUMMARY / KOPFZEILE
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 68px;

    padding: 17px 58px 17px 72px;

    box-sizing: border-box;

    cursor: pointer;

    list-style: none;

    color: #f5fbfd;

    font-size: 1.08rem;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -.01em;

    user-select: none;

    transition:
        background .22s ease,
        color .22s ease;
}


/* Chrome / Edge / Safari */

body.scene-sh .editorial-details details summary::-webkit-details-marker {
    display: none;
}


/* Firefox / Standard */

body.scene-sh .editorial-details details summary::marker {
    display: none;
    content: "";
}


/* ------------------------------------------------------------
   NUMMER VOR DER JAHRESZEIT
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details summary::before {
    position: absolute;

    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        rgba(53, 174, 205, .14);

    border: 1px solid rgba(76, 190, 220, .30);

    color: #72d4ed;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .03em;
}


/* Jahreszeiten nummerieren */

body.scene-sh .editorial-details details:nth-of-type(1) summary::before {
    content: "01";
}

body.scene-sh .editorial-details details:nth-of-type(2) summary::before {
    content: "02";
}

body.scene-sh .editorial-details details:nth-of-type(3) summary::before {
    content: "03";
}

body.scene-sh .editorial-details details:nth-of-type(4) summary::before {
    content: "04";
}


/* ------------------------------------------------------------
   PFEIL RECHTS
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details summary::after {
    content: "⌄";

    position: absolute;

    right: 22px;
    top: 50%;

    transform:
        translateY(-58%)
        rotate(0deg);

    color: rgba(190, 232, 242, .78);

    font-size: 1.35rem;
    font-weight: 400;

    transition:
        transform .22s ease,
        color .22s ease;
}


/* Geöffneter Pfeil */

body.scene-sh .editorial-details details[open] summary::after {
    transform:
        translateY(-42%)
        rotate(180deg);

    color: #72d4ed;
}


/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details summary:hover {
    background:
        rgba(45, 157, 187, .08);

    color: #ffffff;
}


/* ------------------------------------------------------------
   GEÖFFNETER BLOCK
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details[open] {
    border-color:
        rgba(76, 190, 220, .42);

    background:
        linear-gradient(
            135deg,
            rgba(7, 61, 80, .90),
            rgba(4, 42, 58, .90)
        );

    box-shadow:
        0 10px 28px rgba(0, 18, 28, .16);
}


/* Geöffnete Kopfzeile */

body.scene-sh .editorial-details details[open] summary {
    background:
        linear-gradient(
            90deg,
            rgba(42, 163, 194, .10),
            rgba(42, 163, 194, .025)
        );

    border-bottom:
        1px solid rgba(76, 185, 213, .20);
}


/* ------------------------------------------------------------
   INHALT
   ------------------------------------------------------------ */

body.scene-sh .editorial-details .editorial-detail-copy {
    box-sizing: border-box;

    padding: 24px 28px 26px;

    color: rgba(235, 247, 250, .82);

    font-size: .95rem;

    line-height: 1.68;
}


/* Absätze */

body.scene-sh .editorial-details .editorial-detail-copy p {
    margin:
        0 0 16px;

    color:
        rgba(235, 247, 250, .82);
}


/* Letzter Absatz */

body.scene-sh .editorial-details .editorial-detail-copy p:last-of-type {
    margin-bottom: 18px;
}


/* ------------------------------------------------------------
   LISTE
   ------------------------------------------------------------ */

body.scene-sh .editorial-details ul.editorial-season-points {
    margin: 18px 0 0;
    padding: 16px 18px 16px 38px;

    border-radius: 12px;

    background:
        rgba(0, 24, 36, .22);

    border:
        1px solid rgba(76, 185, 213, .15);
}


body.scene-sh .editorial-details ul.editorial-season-points li {
    margin: 5px 0;

    color:
        rgba(235, 247, 250, .82);

    line-height: 1.55;
}


/* ------------------------------------------------------------
   DETAILS FOCUS
   ------------------------------------------------------------ */

body.scene-sh .editorial-details details summary:focus-visible {
    outline:
        2px solid rgba(89, 205, 232, .75);

    outline-offset:
        -3px;
}


/* ------------------------------------------------------------
   ABSTAND ZUM TITELBEREICH
   ------------------------------------------------------------ */

body.scene-sh .editorial-details .section-head {
    margin-bottom: 24px;
}


/* ------------------------------------------------------------

   ------------------------------------------------------------ */