/* ==========================================================
   Kiefer Grafik — Bloecke der Startseite
   ========================================================== */

/* === BANNER === */
.block-banner {
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.block-banner .comp-media,
.block-banner .comp-media .bild-container { height: 100%; }
.block-banner .medien-overlay {
    background: linear-gradient(0deg, #1e1e1ee6 4%, #1e1e1e66 46%, #1e1e1e00 78%);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.banner-inhalt {
    bottom: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.banner-container { padding: 0 64px; }
.banner-anzeige {
    align-items: flex-end;
    display: flex;
    gap: 40px;
}
.banner-anzeige .inhalt { margin-right: auto; max-width: 780px; padding-right: 60px; }
.banner-anzeige .inhalt h1,
.banner-anzeige .inhalt h2 { color: #fff; }
.banner-unterzeile {
    color: #ffffffe6;
    font-size: 16px;
    line-height: 1.9;
    margin-top: 18px;
    max-width: 62ch;
}

.zweiter-banner { height: 78svh; min-height: 520px; }
.zweiter-banner .banner-anzeige .inhalt { max-width: 640px; }

/* === ZWEI SPALTEN === */
.block-zwei-spalten { padding: 120px 0 100px; }
.spalten-inhalt { display: flex; }
.spalte-text {
    align-items: center;
    display: flex;
    padding: 0 6% 0 10%;
    width: 55%;
}
.spalte-text .inner-container { max-width: 660px; }
.spalte-text .vortitel { margin-bottom: 18px; }
.spalte-text .stil-titel-mittel { margin-bottom: 26px; }
.spalte-text p { color: var(--ton-text-grau); font-size: 16px; line-height: 1.95; margin-bottom: 18px; }
.spalte-text .aktion-container { margin-top: 24px; }
.spalte-bild { width: 45%; }
.spalte-bild .comp-media { height: 100%; min-height: 560px; }

.fakt-karten {
    display: flex;
    gap: 24px;
    margin-top: 80px;
    padding: 0 10%;
}
.fakt {
    border-top: 1px solid var(--ton-rand);
    padding-top: 20px;
    width: 33.333%;
}
.fakt .fakt-titel {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 8px;
}
.fakt p { color: var(--ton-text-grau); font-size: 15px; line-height: 1.85; }

/* === LEITWORT === */
.block-leitwort {
    padding: 150px 0 0;
    position: relative;
    text-align: center;
}
.block-leitwort .inner-container {
    margin: 0 auto;
    max-width: 900px;
    padding: 0 var(--abstand-x-mittel);
}
.block-leitwort .vortitel { margin-bottom: 20px; }
.block-leitwort .leitwort-text {
    color: var(--ton-text-grau);
    font-size: 16px;
    line-height: 2;
    margin: 28px auto 0;
    max-width: 68ch;
}
.block-leitwort .aktion-container { margin-top: 40px; }
.leit-linie { height: 100px; margin: 40px auto 0; position: relative; width: 2px; }
.leit-linie .linien-koerper { height: 100px; width: 2px; }
.leit-linie .linien-fueller {
    background-color: var(--ton-primaer);
    height: 100%;
    transform-origin: top;
    width: 100%;
    animation: linie-waechst 1.2s ease-out both;
}
.leit-linie:before,
.leit-linie:after {
    background-color: var(--ton-primaer);
    border-radius: 50%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 12px;
}
.leit-linie:before { top: 0; }
.leit-linie:after { top: 100%; }
@keyframes linie-waechst { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.block-leitwort.abschluss { padding: 140px 0 150px; }
.block-leitwort.abschluss .leit-linie { display: none; }

/* === KARTEN-KARUSSELL === */
.block-karten { padding: 120px 0 50px; }
.karten-kopf {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 0 67px;
}
.karten-pfeile { display: flex; gap: 10px; }
.karten-pfeile button {
    background: #fff;
    border: 1px solid var(--ton-rand);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    height: 46px;
    line-height: 1;
    transition: var(--uebergang);
    width: 46px;
}
.karten-pfeile button:hover { background: var(--ton-primaer); border-color: var(--ton-primaer); color: #fff; }

.karten-spur {
    display: flex;
    gap: 24px;
    margin-top: 44px;
    overflow-x: auto;
    padding: 0 67px 10px;
    scroll-padding-left: 67px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.karten-spur::-webkit-scrollbar { display: none; }
.karte {
    border-radius: 24px;
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
}
.karte .comp-media,
.karte .comp-media .bild-container { height: 100%; }
.karte .comp-media { height: 560px; }
.karten-verlauf {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0) 34%, rgba(30, 30, 30, .82) 100%);
    inset: 0;
    position: absolute;
}
.karten-inhalt {
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 0;
    padding: 24px;
    position: absolute;
    right: 0;
}
.karten-inhalt * { color: #fff; }
.karten-zeile {
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1.6;
    text-transform: uppercase;
}
.karten-inhalt h3 { font-size: 25px; font-weight: 500; letter-spacing: .15px; line-height: 1.2; }
.karten-text { font-size: 14px; line-height: 1.7; }
.karten-inhalt .comp-button { margin-top: 8px; }

/* TODO: auf sehr breiten Schirmen vertraegt die Spur eine fuenfte Karte */
.karten-punkte {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}
.karten-punkte button {
    background: var(--ton-rand);
    border: 0;
    cursor: pointer;
    height: 2px;
    padding: 0;
    transition: var(--uebergang);
    width: 34px;
}
.karten-punkte button.aktiv { background: var(--ton-primaer); }

/* === MESSTABELLE === */
.block-messung { background: var(--ton-flaeche); padding: 110px 0 96px; }
.messung-inner { margin: 0 auto; max-width: 1180px; padding: 0 var(--abstand-x-mittel); }
.messung-kopf { display: flex; gap: 60px; justify-content: space-between; margin-bottom: 44px; }
.messung-kopf p {
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.9;
    max-width: 46ch;
}
.messung-tabelle { border-collapse: collapse; width: 100%; }
.messung-tabelle th {
    border-bottom: 1px solid var(--ton-rand-kopf);
    color: var(--ton-text-still);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    padding: 0 20px 12px 0;
    text-align: left;
    text-transform: uppercase;
}
.messung-tabelle td {
    border-bottom: 1px solid #d8d3cd;
    font-size: 15px;
    line-height: 1.7;
    padding: 18px 20px 18px 0;
    vertical-align: top;
}
.messung-tabelle td:first-child { font-weight: 500; width: 34%; }
.messung-tabelle td:last-child { color: var(--ton-text-grau); padding-right: 0; }
.messung-tabelle sup { font-size: 10px; }
.messung-fuss {
    border-left: 2px solid var(--ton-primaer);
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.9;
    margin-top: 34px;
    max-width: 76ch;
    padding: 4px 0 4px 18px;
}

/* === CHARGE === */
.block-charge { min-height: 100svh; position: relative; width: 100%; }
.block-charge .block-hintergrund { inset: 0; overflow: hidden; position: absolute; }
.block-charge .block-hintergrund img { height: 100%; object-fit: cover; width: 100%; }
.charge-inhalt {
    display: flex;
    min-height: 100svh;
    padding-top: var(--hoehe-kopf);
    position: relative;
    width: 100%;
    z-index: 2;
}
.charge-karte {
    background: #fff;
    border-top-right-radius: 16px;
    margin-top: auto;
    max-width: 49%;
    padding: 8.8svh 7% 8.7svh 8.8%;
    width: 100%;
}
.charge-karte > p {
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.9;
    margin: 18px 0 26px;
    max-width: 52ch;
}
.charge-form label {
    color: var(--ton-text-still);
    display: block;
    font-size: 12px;
    letter-spacing: .1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.feld-zeile { display: flex; gap: 10px; }
.feld-zeile input {
    background: var(--ton-feld);
    border: 1px solid transparent;
    flex: 1;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: .06em;
    min-width: 0;
    padding: 15px 16px;
}
.feld-zeile input:focus { border-color: var(--ton-primaer); outline: none; }
.feld-zeile button {
    background: #1e1e1e;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: .04em;
    padding: 0 26px;
    transition: var(--uebergang);
}
.feld-zeile button:hover { background: var(--ton-primaer); }
.charge-ausgabe { font-size: 14px; line-height: 1.8; margin-top: 18px; }
.charge-ausgabe.gefunden { border-left: 2px solid var(--ton-primaer); padding-left: 16px; }
.charge-ausgabe.leer { border-left: 2px solid var(--ton-rand); color: var(--ton-text-grau); padding-left: 16px; }
.charge-ausgabe a { text-decoration: underline; }

.weitere-info {
    align-items: center;
    border: 1px solid var(--ton-rand);
    border-radius: 16px;
    display: flex;
    height: 80px;
    margin-top: 34px;
    max-width: 306px;
    padding: 0 55px 0 28px;
    position: relative;
    transition: var(--uebergang);
}
.weitere-info:hover { border-color: var(--ton-primaer); }
.weitere-info .text { font-size: 16px; font-weight: 500; line-height: normal; }
.weitere-info .pfeil-rechts {
    border: solid var(--ton-primaer);
    border-width: 0 1.5px 1.5px 0;
    height: 9px;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 9px;
}

/* === KARTON === */
.block-karton { padding: 130px 0 140px; position: relative; }
.karton-hintergrund {
    background: var(--ton-flaeche);
    inset: 0 0 0 0;
    position: absolute;
}
.karton-inhalt {
    display: flex;
    gap: 44px;
    margin: 0 auto;
    max-width: 1500px;
    padding: 0 67px;
    position: relative;
    z-index: 2;
}
.karton-karte {
    background: #fff;
    border-bottom-right-radius: 16px;
    padding: 64px 60px 60px;
    width: 55%;
}
.karton-liste { margin: 34px 0 40px; }
.karton-liste li {
    align-items: flex-start;
    border-bottom: 1px solid #ece8e4;
    display: flex;
    padding: 16px 0;
}
.karton-liste li:last-child { border-bottom: 0; }
.karton-liste .icon-container {
    height: 48px;
    margin-right: 24px;
    width: 48px;
    flex: 0 0 48px;
}
.karton-liste .icon-container svg {
    fill: none;
    height: 40px;
    stroke: var(--ton-primaer);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 40px;
}
.karton-liste .text p { color: var(--ton-text-grau); font-size: 15px; line-height: 1.85; }
.karton-medien { display: flex; gap: 24px; width: 45%; }
.karton-medien .comp-media { min-width: 0; overflow: hidden; }
.karton-medien .hoch { border-radius: 22px 22px 0 0; height: 620px; }
.karton-medien .flach { align-self: flex-end; border-radius: 22px 0 0 22px; height: 480px; }

.block-abstand { height: 60px; }

@media screen and (max-width: 1440px) {
    .karte { flex: 0 0 calc((100% - 48px) / 3); }
    .karton-karte { padding: 50px 44px 46px; }
}

@media screen and (max-width: 1180px) {
    .spalten-inhalt { flex-direction: column; }
    .spalte-text { padding: 0 var(--abstand-x) 48px; width: 100%; }
    .spalte-bild { width: 100%; }
    .spalte-bild .comp-media { min-height: 420px; }
    .fakt-karten { padding: 0 var(--abstand-x); }
    .karte { flex: 0 0 calc((100% - 24px) / 2); }
    .karton-inhalt { flex-direction: column; padding: 0 var(--abstand-x); }
    .karton-karte,
    .karton-medien { width: 100%; }
    .karton-medien .hoch { height: 420px; }
    .karton-medien .flach { height: 340px; }
}

@media screen and (max-width: 991px) {
    .block-zwei-spalten { padding: 80px 0 70px; }
    .banner-container { padding: 0 32px; }
    .banner-anzeige { display: block; }
    .banner-anzeige .inhalt { padding-right: 0; }
    .banner-anzeige .aktion-container { margin-top: 26px; }
    .charge-karte { max-width: none; padding: 40px 30px 44px; }
    .karten-kopf { padding: 0 var(--abstand-x); }
    .karten-spur { padding: 0 var(--abstand-x) 10px; scroll-padding-left: var(--abstand-x); }
    .messung-kopf { flex-direction: column; gap: 16px; }
    .block-leitwort { padding-top: 90px; }
    .block-leitwort.abschluss { padding: 90px 0 100px; }
    .block-karten { padding: 80px 0 40px; }
    .block-messung { padding: 76px 0 70px; }
    .block-karton { padding: 80px 0 90px; }
    .fakt-karten { flex-direction: column; gap: 0; margin-top: 50px; }
    .fakt { padding: 20px 0; width: 100%; }
}

@media screen and (max-width: 575px) {
    .block-banner { min-height: 560px; }
    .banner-container { padding: 0 20px; }
    .karte { flex: 0 0 82%; }
    .karte .comp-media { height: 440px; }
    .messung-tabelle,
    .messung-tabelle tbody,
    .messung-tabelle tr,
    .messung-tabelle td { display: block; width: 100%; }
    .messung-tabelle thead { display: none; }
    .messung-tabelle tr { border-bottom: 1px solid #d8d3cd; padding: 14px 0; }
    .messung-tabelle td { border: 0; padding: 2px 0; }
    .messung-tabelle td:first-child { width: 100%; }
    .messung-tabelle td:nth-child(2):before { content: "Grenzwert: "; color: var(--ton-text-still); }
    .messung-tabelle td:last-child:before { content: "Gerät: "; color: var(--ton-text-still); }
    .karton-karte { padding: 34px 22px 36px; }
    .karton-medien { flex-direction: column; }
    .karton-medien .hoch,
    .karton-medien .flach { border-radius: 16px; height: 300px; width: 100%; }
    .feld-zeile { flex-direction: column; }
    .feld-zeile button { padding: 15px 26px; }
    .weitere-info { max-width: none; padding: 0 44px 0 20px; }
}