https://www.lesen-in-deutschland.de/092a7a60.js

1import{n as e,S as t,B as n,i as a,k as i}from"./99668773.js";class s extends e{static get styles(){return[t,n,a`
2        :host {
3          display: block;
4          position: relative;
5          --newsletter-box-height: auto;
6
7          --newsletter-box-angle: 2deg;
8          /*-----------------
9            tan(-2°) / 2
10
11            -2° => --newsletter-box-angle
12          ------------------*/
13          --newsletter-box-tan: 0.03492076949;
14          --newsletter-box-width: 100vw;
15          --newsletter-box-skew-padding: calc(
16            var(--newsletter-box-width) * var(--newsletter-box-tan)
17          );
18        }
19        section {
20          overflow: hidden;
21          max-width: 100vw;
22          padding: calc(var(--newsletter-box-skew-padding)) 0
23            var(--app-base-dist) 0;
24        }
25        section::before {
26          content: '';
27          position: absolute;
28          top: var(--newsletter-box-skew-padding);
29          left: 0;
30          right: 0;
31          bottom: 0;
32          background: var(--app-color-blue);
33          transform-origin: 100% 0;
34          transform: skewY(var(--newsletter-box-angle));
35          z-index: -1;
36        }
37        section::after {
38          content: '';
39          position: absolute;
40          top: calc(
41            var(--newsletter-box-skew-padding) + var(--app-base-dist-raw) * 4
42          );
43          bottom: calc(var(--newsletter-box-skew-padding) * -1);
44          left: 0;
45          right: 0;
46          background: var(--app-color-grey-light);
47          z-index: -1;
48        }
49        section::after {
50          content: '';
51          position: absolute;
52          top: calc(var(--newsletter-box-skew-padding));
53          bottom: 0;
54          left: 0;
55          right: 0;
56          background: var(--app-color-blue);
57          z-index: -1;
58        }
59        .content {
60          color: var(--app-on-color-blue);
61        }
62        p > span {
63          display: block;
64        }
65        h2 {
66          font-family: var(--app-serif-font);
67          font-size: var(--app-font-size-title);
68          line-height: 0.7;
69          color: var(--app-on-color-blue);
70          white-space: nowrap;
71        }
72        h2 > span {
73          display: block;
74        }
75        a.btn.box {
76          display: inline-block;
77          white-space: nowrap;
78          margin-top: var(--app-base-dist);
79        }
80        @media (min-width: 720px) {
81          .content {
82            display: flex;
83            justify-content: flex-start;
84            align-items: center;
85          }
86          h2 {
87            max-width: 400px;
88            margin-right: calc(var(--app-base-dist-raw) * 3);
89          }
90          p {
91            flex: 1;
92          }
93          p > span {
94            max-width: 400px;
95          }
96        }
97        @media (min-width: 720px) {
98          h2 {
99            margin-right: calc(var(--app-base-dist-raw) * 5);
100          }
101        }
102        @media (min-width: 1200px) {
103          h2 {
104            margin-right: 0;
105            flex: 1;
106          }
107          p {
108            flex: 2;
109            display: flex;
110            justify-content: space-between;
111            align-items: center;
112          }
113          a.btn.box {
114            margin-top: 0;
115            flex: 0;
116            height: fit-content;
117          }
118        }
119      `]}render(){return i`
120      <section>
121        <div class="content">
122          <h2><span>News</span><span>letter</span></h2>
123          <p>
124            <span>
125              Unser Newsletter informiert Sie regelmäßig über aktuelle Initiativen, Projekte und Termine zum Thema Leseförderung.
126            </span>
127            <a
128              class="btn box"
129              href="https://www.listserv.dfn.de/sympa/subscribe/lesen-in-deutschland?previous_action=info"
130              title="Zur Anmeldung"
131              >Zur Anmeldung</a
132            >
133          </p>
134        </div>
135      </section>
136    `}}customElements.define("newsletter-box",s);export{s as NewsletterBox};