/* Gemeinsame Titel */
.bereich-titel { font-family: var(--schrift-bold); font-size: 50px; line-height: 65px; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.klein-titel { font-family: var(--schrift-bold); font-size: 20px; line-height: 26px; letter-spacing: .2em; text-transform: uppercase; }

/* Über uns */
.ueber { position: relative; padding-top: calc(58 * var(--e)); background: linear-gradient(0deg, rgb(11, 79, 97) 0%, rgb(0, 53, 67) 100%); }
.ueber-spalten { display: grid; grid-template-columns: calc(493 * var(--e)) calc(281 * var(--e)); column-gap: calc(23 * var(--e)); width: calc(797 * var(--e)); margin: calc(41 * var(--e)) auto 0; }
.ueber-text p { width: calc(442 * var(--e)); margin-top: calc(16 * var(--e)); font-family: var(--schrift-light); font-size: 16px; line-height: 1.4; }
.ueber-werte .klein-titel { margin-bottom: 52px; }
.werte { margin: 0; padding: 0 0 0 4px; list-style: none; }
.werte li { width: calc(270 * var(--e)); font-family: var(--schrift-book); font-size: 14px; line-height: 1.6; }
.werte li.werte-welle { width: 45px; height: 26px; margin: 5px 0 5px -4px; }
.werte-welle svg { width: 45px; height: 26px; }

/* Serviceangebot */
.service { position: relative; padding: calc(200 * var(--e)) 0 calc(58 * var(--e)); background: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 53, 67) 94.4113%); overflow: hidden; }
.service-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.service .trenner-oben { height: 150px; }
.service .trenner-unten { height: 100px; }
.service-inhalt { position: relative; z-index: 3; width: calc(1536 * var(--e)); margin: 0 auto; }
.service-text { width: calc(1229 * var(--e)); margin: calc(63 * var(--e)) auto 0; font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; text-align: center; }
.service-welle { display: block; width: 36px; height: 12px; margin: calc(25 * var(--e)) auto; }
.service-welle svg { width: 100%; height: 100%; }
.service-instagram { font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; text-align: center; }
.service-instagram a { color: var(--akzent); }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: calc(46 * var(--e)) 0 0; padding: 0; list-style: none; }
.kachel { position: relative; height: calc(325 * var(--e)); overflow: hidden; background: var(--hellgrau); }
.kachel > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 27%, rgba(0, 27, 35, .12) 50%, rgba(0, 25, 34, .90) 100%); transition: opacity .4s; }
.kachel-titel { position: absolute; z-index: 2; inset: auto 20px 18px; font-family: var(--schrift-bold); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.25; letter-spacing: .10em; text-transform: uppercase; transition: opacity .3s; }
.kachel-ebene { position: absolute; z-index: 3; left: calc(43 * var(--e)); top: calc(45 * var(--e)); width: calc(427 * var(--e)); height: calc(244 * var(--e)); display: flex; flex-direction: column; padding: calc(19 * var(--e)) calc(19 * var(--e)) calc(29 * var(--e)); background: var(--dunkel); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.kachel-ebene-titel { font-family: var(--schrift-bold); font-size: calc(18 * var(--e)); line-height: 1.3; letter-spacing: .2em; color: var(--hellgrau); text-transform: uppercase; }
.kachel-ebene p { margin-top: calc(15 * var(--e)); font-family: var(--schrift-light); font-size: calc(16 * var(--e)); line-height: 1.6; }
.kachel-ebene .knopf { width: calc(142 * var(--e)); height: 35px; margin: auto auto 0; }
.kachel:focus-within .kachel-ebene { opacity: 1; visibility: visible; transition-delay: 0s; }
.kachel:focus-within .kachel-titel, .kachel:focus-within::after { opacity: 0; }
@media (hover: hover) {
  .kachel:hover .kachel-ebene { opacity: 1; visibility: visible; transition-delay: 0s; }
  .kachel:hover .kachel-titel, .kachel:hover::after { opacity: 0; }
}
.kachel:focus { outline-offset: -3px; }

/* Dienstleistungen */
.dienst { position: relative; padding: calc(109 * var(--e)) 0 calc(96 * var(--e)); background: linear-gradient(rgb(11, 79, 97) 0%, rgb(0, 53, 67) 100%); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; width: calc(1728 * var(--e)); margin: calc(52 * var(--e)) auto 0; padding: 0; list-style: none; }
.karte { display: flex; flex-direction: column; min-height: calc(707px - 7.97vw); padding: calc(28 * var(--e)); border: 1px solid #fff; }
.karte-titel { font-family: var(--schrift-bold); font-size: 20px; line-height: 26px; letter-spacing: .2em; text-transform: uppercase; }
.karte-punkte { margin: calc(66 * var(--e)) 0 calc(46 * var(--e)); }
.karte-punkt-titel { font-family: var(--schrift-bold); font-size: 18px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.karte-punkte p { margin-top: calc(7 * var(--e)); font-family: var(--schrift-light); font-size: 16px; line-height: 1.4; }
.karte-punkte p:first-of-type { font-size: 18px; line-height: 1.6; }
.karte-punkte p + h4 { margin-top: calc(22 * var(--e)); }
.karte .knopf { margin: auto auto 0; }

/* Team */
.team { position: relative; padding: calc(153 * var(--e)) 0 calc(492 * var(--e)); background: var(--dunkel); overflow: hidden; }
.team-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0% 100%; opacity: .45; }
.team .trenner-oben { height: 100px; }
.team .trenner-unten { height: 200px; }
.team-inhalt { position: relative; z-index: 3; width: calc(1728 * var(--e)); margin: 0 auto; }
.team .bereich-titel { line-height: 60px; }
.team-text { width: calc(607 * var(--e)); margin: calc(54 * var(--e)) auto 0; font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; text-align: center; }
.personen { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: calc(31 * var(--e)); margin: calc(55 * var(--e)) 0 0; padding: 0; list-style: none; }
.person { text-align: center; }
.person img { width: calc(300 * var(--e)); height: calc(300 * var(--e)); margin: 0 auto; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 calc(2 * var(--e)) calc(16 * var(--e)) 0 rgba(0, 0, 0, .4); }
.person-name { margin-top: calc(20 * var(--e)); font-family: var(--schrift-bold); font-size: calc(28 * var(--e)); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.person-rolle { margin-top: calc(5 * var(--e)); font-family: var(--schrift-bold); font-size: calc(18 * var(--e)); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.person-mail, .person-tel { font-family: var(--schrift-bold); font-size: calc(18.14 * var(--e)); line-height: 1.6; letter-spacing: .2em; }
.person-mail { margin-top: calc(11 * var(--e)); }
.person-tel { margin-top: calc(5 * var(--e)); }
.person-tel a { text-decoration: none; }