/* ------------------------------------------------------------------
   AVK — Ergaenzungen zum Antra-Template
   Nur additive Regeln, klar gescopet. Template-CSS bleibt unberuehrt,
   damit ein Template-Update nichts zerschiesst.
   ------------------------------------------------------------------ */

:root {
    --avk-linie: rgba(0, 0, 0, 0.12);
    --avk-grau: #6b6b6b;
    --avk-dunkel: #1a1a1a;
}

/* --- Wortmarke ----------------------------------------------------
   ZWISCHENLOESUNG: Das echte Logo (Wappen mit gekroenter Koenigsfigur)
   liegt nicht als Datei vor. Statt ein Wappen zu erfinden, steht hier
   eine typografische Wortmarke. Sobald die Vektordatei da ist, wird
   dieser Block durch ein <img> ersetzt.
   ------------------------------------------------------------------ */
.avk-wortmarke {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
}

.avk-wortmarke:hover {
    color: #fff;
}

.avk-wm-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.avk-wm-name em {
    font-style: italic;
    font-weight: 400;
    opacity: 0.8;
}

.avk-wm-ort {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-top: 3px;
    white-space: nowrap;
}

/* --- Deutsche Gross-/Kleinschreibung ------------------------------
   Das Template setzt Ueberschriften auf text-transform: capitalize.
   Im Englischen ueblich, im Deutschen falsch ("Ihr Logo Sitzt In
   Fuenf Jahren"). Deshalb hier abgeschaltet.
   ------------------------------------------------------------------ */
.section-heading .section-title,
.section-heading .sub-heading,
.slider-content .section-title,
.video-content .video-title,
.post-card .post-content .title,
.project-content .title,
.service-item .service-top .title,
.feature-item .title,
.team-item .left-content .title,
.process-content .title,
.counter-item .sub-title,
.faq-accordion .accordion-button,
.footer-section .widget-title,
.avk-inhalt h1,
.avk-inhalt h2,
.avk-inhalt h3,
.avk-seitenkopf h1,
.avk-abschluss h2,
.avk-karte h3,
.tl-primary-btn,
a.tl-primary-btn,
button.tl-primary-btn {
    text-transform: none;
}

/* Die kleinen Kapitel-Marken bleiben bewusst in Versalien. */
.section-heading .sub-heading,
.avk-brotkrumen {
    text-transform: uppercase;
}

/* --- Hero: Schriftgroesse mitwachsen lassen -----------------------
   Das Template setzt fix 120px. Deutsche Ueberschriften sind laenger
   als die englischen der Demo und liefen rechts aus dem Bild.
   ------------------------------------------------------------------ */
.slider-content .section-title {
    font-size: clamp(34px, 5vw, 96px);
    line-height: 1.05;
}

.slider-content .antra-desc p {
    max-width: 640px;
}

/* --- Bildband-Sektion ---------------------------------------------
   Der Abspiel-Knopf der Vorlage oeffnete ein YouTube-Video (Daten an
   Google ohne Einwilligung). Er ist entfernt; dafuer traegt die
   Sektion jetzt einen Knopf zur Anfrage. Der Absatz war in der
   Vorlage absolut positioniert und lag unter der Ueberschrift.
   ------------------------------------------------------------------ */
.video-section .video-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.video-section .video-title {
    font-size: clamp(30px, 4.6vw, 88px);
    line-height: 1.05;
    max-width: 16ch;
    margin-bottom: 0;
}

.video-section .video-content p {
    position: static;
    max-width: 540px;
    margin-bottom: 0;
}

/* --- Kurzanfrage-Formular ---------------------------------------- */
.avk-anfrage-section {
    background: #f6f4f0;
}

.avk-anfrage-section .avk-anfrage-tel {
    margin-top: 18px;
    font-weight: 600;
}

.avk-anfrage-section .avk-anfrage-tel a {
    white-space: nowrap;
    border-bottom: 1px solid var(--avk-linie);
}

.avk-form-wrap {
    background: #fff;
    padding: 40px;
    border: 1px solid var(--avk-linie);
}

.avk-form {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.avk-form-row {
    flex: 1 1 calc(50% - 11px);
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.avk-form-row-voll {
    flex: 1 1 100%;
}

.avk-form-row label {
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--avk-grau);
    margin-bottom: 8px;
}

.avk-form-row input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--avk-linie);
    background: #fff;
    font-size: 16px;
    color: var(--avk-dunkel);
    border-radius: 0;
}

.avk-form-row input:focus {
    outline: none;
    border-color: var(--avk-dunkel);
}

/* Rot erst, wenn der Nutzer wirklich etwas Falsches eingegeben hat.
   NICHT :invalid verwenden - leere Pflichtfelder sind von Anfang an
   ungueltig, dadurch stand das ganze Formular sofort in Rot. */
.avk-form-row input:user-invalid {
    border-color: #b3261e;
}

.avk-form-aktion {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.avk-form-aktion button {
    border: none;
    cursor: pointer;
}

.avk-form-fuss {
    font-size: 14px;
    line-height: 1.5;
    color: var(--avk-grau);
    max-width: 320px;
}

.avk-form-fuss a {
    border-bottom: 1px solid var(--avk-linie);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ausfuellbar.
   Kein display:none — manche Bots erkennen das. */
.avk-honig {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.avk-form-hinweis {
    background: #fbeae9;
    border-left: 3px solid #b3261e;
    padding: 14px 18px;
    margin-bottom: 26px;
    font-size: 15px;
}

/* --- CTA-Knopfpaar ----------------------------------------------- */
.avk-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 34px;
}

.avk-btn-zweit {
    background: transparent;
    color: var(--avk-dunkel);
    border: 1px solid var(--avk-dunkel);
}

/* --- Fussbereich -------------------------------------------------- */
.footer-section .widget-title {
    font-size: 18px;
    margin-bottom: 22px;
    color: #fff;
}

.footer-section .footer-note {
    display: block;
    font-size: 14px;
    opacity: 0.6;
}

.footer-section .footer-list li {
    margin-bottom: 12px;
}

/* --- Unterseiten: Anpassungen an den Vorlagen-Sektionen -----------
   Die Unterseiten bestehen aus Sektionen der gekauften Vorlage. Hier
   stehen nur die Korrekturen, die deutscher Text bzw. eigene Elemente
   noetig machen - kein Nachbau.
   ------------------------------------------------------------------ */

/* Seitenkopf: die Vorlage setzt eine feste Schriftgroesse, mit der
   laengere deutsche Ueberschriften auf dem Handy aus dem Bild liefen. */
.page-header .page-header-content .title {
    font-size: clamp(30px, 5.4vw, 64px);
    line-height: 1.1;
    text-transform: none;
}

.page-header .page-header-content .sub-title {
    text-transform: none;
}

/* Anfrage-Sektion: eigener Einleitungstext und Datenschutz-Hinweis
   stehen auf dunklem Grund und muessen hell sein. */
.request-section .request-intro {
    color: rgba(255, 255, 255, 0.82);
    max-width: 520px;
    margin-bottom: 34px;
}

.request-section .request-hinweis {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 22px;
    margin-bottom: 0;
}

.request-section .request-hinweis a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.request-section .avk-form-hinweis {
    color: #fff;
    background: rgba(179, 38, 30, 0.25);
    border-left: 3px solid #ff6b60;
}

/* Die vier Icon-Karten der Detailseite stehen in der Vorlage fest
   nebeneinander und ragten auf dem Handy ueber den Rand. */
@media (max-width: 991px) {
    .service-details-items {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service-details-items .service-details-item {
        width: 100%;
        max-width: 100%;
    }

    .service-details-list-wrap {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Detailseiten: Ueberschriften und Listen */
.service-details-content .details-title {
    text-transform: none;
}

.service-details .service-category-list .list-title,
.service-details .service-faq .faq-title {
    text-transform: none;
}

/* --- Inhaltsseiten (alte eigene Bloecke, noch fuer danke.html) ----- */
.avk-seitenkopf {
    position: relative;
    padding: 190px 0 90px;
    background-size: cover;
    background-position: center;
}

.avk-seitenkopf::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.62);
}

.avk-seitenkopf .container {
    position: relative;
    z-index: 2;
}

.avk-seitenkopf h1 {
    color: #fff;
    max-width: 900px;
    margin-bottom: 16px;
    /* Muss mitwachsen: die Vorlage setzt eine feste Groesse, mit der die
       laengeren deutschen Ueberschriften auf dem Handy rechts aus dem
       Bild liefen. */
    font-size: clamp(30px, 5.4vw, 64px);
    line-height: 1.1;
}

.avk-seitenkopf p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 680px;
    margin-bottom: 0;
}

.avk-brotkrumen {
    margin-bottom: 18px;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.avk-brotkrumen a {
    color: rgba(255, 255, 255, 0.7);
}

.avk-brotkrumen a:hover {
    color: #fff;
}

.avk-inhalt {
    padding: 110px 0;
}

.avk-inhalt h2 {
    margin-bottom: 24px;
}

.avk-inhalt h3 {
    margin-bottom: 14px;
}

.avk-inhalt p {
    margin-bottom: 20px;
}

.avk-block + .avk-block {
    margin-top: 80px;
}

.avk-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.avk-karte {
    border: 1px solid var(--avk-linie);
    padding: 34px;
    background: #fff;
}

.avk-karte .nummer {
    display: block;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--avk-grau);
    margin-bottom: 14px;
}

.avk-karte h3 {
    font-size: 22px;
}

.avk-karte p:last-child {
    margin-bottom: 0;
}

.avk-karte img {
    width: 100%;
    height: auto;
    margin-bottom: 22px;
}

/* Zeitachse */
.avk-achse {
    border-left: 2px dashed var(--avk-linie);
    padding-left: 34px;
    margin-left: 10px;
}

.avk-achse-punkt {
    position: relative;
    padding-bottom: 40px;
}

.avk-achse-punkt:last-child {
    padding-bottom: 0;
}

.avk-achse-punkt::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--avk-dunkel);
    border-radius: 50%;
}

.avk-achse-punkt .wann {
    display: block;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--avk-grau);
    margin-bottom: 6px;
}

.avk-achse-punkt h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

/* Tabelle (Kundenblatt, Vergleich) */
.avk-tabelle-wrap {
    overflow-x: auto;
}

.avk-tabelle {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.avk-tabelle th,
.avk-tabelle td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--avk-linie);
    vertical-align: top;
}

.avk-tabelle th {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--avk-grau);
    font-weight: 600;
}

/* Abschlussblock */
.avk-abschluss {
    background: var(--avk-dunkel);
    color: #fff;
    padding: 96px 0;
    text-align: center;
}

.avk-abschluss h2 {
    color: #fff;
    margin-bottom: 18px;
}

.avk-abschluss p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
    margin: 0 auto 34px;
}

.avk-abschluss .avk-btn-zweit {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.avk-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.avk-liste li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
}

.avk-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 2px;
    background: var(--avk-dunkel);
}

.avk-bild-voll {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .avk-form-wrap {
        padding: 26px 20px;
    }

    .avk-form-row {
        flex: 1 1 100%;
    }

    .avk-seitenkopf {
        padding: 150px 0 70px;
    }

    .avk-inhalt {
        padding: 70px 0;
    }

    .avk-block + .avk-block {
        margin-top: 56px;
    }

    .avk-cta-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .avk-cta-btns .tl-primary-btn {
        justify-content: center;
        text-align: center;
    }
}

/* --- Vergleichskarten "Kaufen oder mieten" ------------------------
   Die Karten der Vorlage waren unterschiedlich hoch, weil der deutsche
   Text unterschiedlich lang umbricht. Die weisse Flaeche endete dadurch
   mitten im Textblock und sah wie ein Darstellungsfehler aus. Jetzt
   gleiche Hoehe fuer alle Karten plus Innenabstand unten.
   ------------------------------------------------------------------ */
.blog-carousel .swiper-slide {
    height: auto;
}

/* Im Original steht die Karte OHNE weisse Flaeche auf dem Sektionsgrund —
   nur Bild, Titel, Text. Die weisse Box kam aus einer eigenen Regel und
   endete je nach Textlaenge auf unterschiedlicher Hoehe. Weg damit. */
.blog-carousel .post-card {
    height: 100%;
    background: transparent;
}

.blog-carousel .post-card .post-content {
    padding-top: 4px;
}

/* --- Logoleiste ---------------------------------------------------
   Platzhalter-Wortmarken, bis echte Kundenlogos mit Nennfreigabe da
   sind. Ruhig gehalten: Graustufe, beim Hover leicht praesenter.
   ------------------------------------------------------------------ */
.sponsor-section .sponsor-item img {
    max-height: 56px;
    width: auto;
    opacity: 0.72;
    transition: opacity 0.3s ease-in-out;
}

.sponsor-section .sponsor-item img:hover {
    opacity: 1;
}

/* --- Referenzen ---------------------------------------------------
   Die Vorlage setzt ein Raster aus 64px Portraitspalte plus Text. Wir
   zeigen kein Portrait, dadurch quetschte der Name in die 64px-Spalte.
   Gilt nur fuer diese eine Sektion.
   ------------------------------------------------------------------ */
#referenzen .testi-author {
    display: block;
    padding-top: 8px;
}

#referenzen .testi-author .name {
    line-height: 1.3;
}

#referenzen .testi-author .name span {
    display: block;
    font-size: 15px;
    color: var(--avk-grau);
    margin-top: 4px;
}

#referenzen .testi-item p {
    min-height: 96px;
}

/* --- Bildsektion: Verlauf von links -------------------------------
   Die Vorlage legt nur eine flaechige Schwarzstufe (46 %) ueber das
   Hintergrundbild. Beim dunklen Demo-Motiv genuegt das; unser
   Werkstattfoto ist hell und warm, dadurch stand die weisse Schrift
   auf zu wenig Kontrast. Zusaetzlicher Verlauf von links nach rechts,
   damit die Textseite dunkel bleibt und das Bild rechts frei liegt.
   ------------------------------------------------------------------ */
.about-section .about-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(14, 13, 12, 0.88) 0%,
        rgba(14, 13, 12, 0.74) 32%,
        rgba(14, 13, 12, 0.34) 60%,
        rgba(14, 13, 12, 0) 84%);
}

@media (max-width: 991px) {
    .about-section .about-bg::after {
        background: linear-gradient(180deg,
            rgba(14, 13, 12, 0.82) 0%,
            rgba(14, 13, 12, 0.7) 55%,
            rgba(14, 13, 12, 0.5) 100%);
    }
}

/* --- Sektionsgrund: kein kaltes Grau ------------------------------
   Die Vorlage legt auf .testimonial-section und .process-section ein
   hartes #EEEEEE. Das ist ein kaltes Grau und gehoert nicht zur
   Palette — neben dem warmen Papierweiss bricht es sichtbar. Ersetzt
   durch einen warmen Zwischenton zwischen Papierweiss und Kalk.
   ------------------------------------------------------------------ */
.testimonial-section,
.process-section {
    background-color: #EFEAE1;
}

/* --- Weicher Sektionsabschluss ------------------------------------
   Beide Sektionen enden in der Vorlage ohne Innenabstand: die Flaeche
   hoerte direkt an der Textkante auf, die Farbe kippte hart ins
   Papierweiss. Jetzt Luft unten plus ein Verlauf, der die Flaeche in
   den Grund der Folgesektion auslaufen laesst.
   ------------------------------------------------------------------ */
.testimonial-section {
    position: relative;
    padding-bottom: 130px;
}

.blog-section {
    padding-bottom: 130px;
}

.testimonial-section::after,
.process-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(180deg, rgba(246, 242, 234, 0) 0%, #F6F2EA 100%);
    pointer-events: none;
    z-index: 0;
}

.testimonial-section > .container,
.testimonial-section > .container-2,
.process-section > .container,
.process-section > .container-2 {
    position: relative;
    z-index: 1;
}

/* --- Deko-Bild der Kundenblatt-Sektion ----------------------------
   In der Vorlage sitzt hier ein zartes Drahtgitter. Bei uns liegt ein
   Foto an der linken Kante, das dadurch wie abgeschnitten wirkte.
   Weiche Kante nach rechts, damit es als Flaeche liest, nicht als
   angeschnittenes Bild.
   ------------------------------------------------------------------ */
.team-section .bg-shape img {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
}

/* --- Rechtstexte (Impressum, Datenschutz) -------------------------
   Beide Seiten lagen vorher als nackte Textdateien ohne Kopf, Menue
   und Fuss vor — sie wirkten wie von einer fremden Website. Jetzt
   laufen sie durch denselben Bau wie die uebrigen Seiten; hier nur
   die Typografie fuer den Fliesstext.
   ------------------------------------------------------------------ */
.avk-rechtstext h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 44px 0 14px;
}

.avk-rechtstext h2:first-child {
    margin-top: 0;
}

.avk-rechtstext p {
    max-width: 68ch;
    margin-bottom: 18px;
}

.avk-rechtstext ul {
    max-width: 68ch;
    margin: 0 0 18px 22px;
    list-style: disc;
}

.avk-rechtstext li {
    margin-bottom: 8px;
}

.avk-rechtstext a {
    color: var(--avk-dunkel);
    border-bottom: 1px solid var(--avk-linie);
}

.avk-rechtstext a:hover {
    border-bottom-color: currentColor;
}

.avk-rechtstext hr {
    border: 0;
    border-top: 1px solid var(--avk-linie);
    margin: 48px 0;
}

/* --- Logo in der Wortmarke ----------------------------------------
   Das Wappen liegt seit dem 31.07. als Datei vor. Es steht links
   neben dem Schriftzug, in der weissen Fassung — auf Anthrazit waere
   das Siegelrot zu dunkel. Hoehe an die Zeilenhoehe der Wortmarke
   gekoppelt, damit Bild und Schrift zusammen atmen.
   ------------------------------------------------------------------ */
.avk-wortmarke {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

.avk-wortmarke .avk-wm-logo {
    grid-column: 1;
    grid-row: 1 / 3;
}

.avk-wortmarke .avk-wm-name,
.avk-wortmarke .avk-wm-ort {
    grid-column: 2;
}

.avk-wortmarke .avk-wm-logo {
    height: 42px;
    width: auto;
    flex: 0 0 auto;
}

.avk-wortmarke .avk-wm-name,
.avk-wortmarke .avk-wm-ort {
    display: block;
}

/* Der Textteil braucht einen eigenen Block, sonst schiebt das
   Wappen die zweite Zeile unter sich. */
.avk-wortmarke .avk-wm-name {
    margin-bottom: 2px;
}

.footer-section .avk-wortmarke .avk-wm-logo {
    height: 52px;
}

@media (max-width: 575px) {
    .avk-wortmarke .avk-wm-logo {
        height: 34px;
    }
}

/* --- Fusszeile ----------------------------------------------------
   Nur noch Firmenname und Zusatz, mittig. Inhaber und USt-IdNr.
   stehen im Impressum, dort gehoeren sie hin.
   ------------------------------------------------------------------ */
.copyright-area .copyright-content {
    text-align: center;
    width: 100%;
}

.copyright-area .copyright-content p {
    margin: 0 auto;
}

/* --- Hero-Ueberschrift --------------------------------------------
   Lief bis dicht an den rechten Rand. Eine Spur kleiner, damit
   Luft zum naechsten Element bleibt.
   ------------------------------------------------------------------ */
.slider-content .section-title {
    font-size: clamp(32px, 4.4vw, 84px);
}

/* Die Ueberschrift stand direkt auf der Kennzahlen-Box. Luft darunter. */
.slider-content .section-heading {
    margin-bottom: 46px;
}

.slider-content .antra-desc p {
    margin-bottom: 0;
}

/* Die Vorlage setzt die Hero-Ueberschrift ueber drei Klassen auf feste
   120px — die bisherige Regel mit zwei Klassen hat nie gegriffen.
   Gleiche Spezifitaet, damit sie mitwaechst und nicht an den Rand stoesst. */
.slider-content-wrap .section-heading .section-title {
    font-size: clamp(30px, 4.6vw, 88px);
    line-height: 1.06;
}

/* --- Anfrage-Seite ------------------------------------------------
   Die Seite lief vorher auf der dunklen Sektion mit Laufschrift. Jetzt
   nutzt sie die Kontakt-Sektion der Vorlage: heller Grund, Kopfzeile
   links, Angaben und Bild links, Formular rechts. Hier nur die Farben,
   die vorher fuer den dunklen Grund gesetzt waren.
   ------------------------------------------------------------------ */
.contact-section .request-intro {
    max-width: 520px;
    margin-bottom: 34px;
}

.contact-section .request-hinweis {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 22px;
    margin-bottom: 0;
    color: var(--avk-grau);
}

.contact-section .request-hinweis a {
    border-bottom: 1px solid var(--avk-linie);
}

.contact-section .contact-img {
    margin-top: 40px;
}

.contact-section .contact-img img {
    width: 100%;
    height: auto;
    border-radius: 24px;
}