/* titillium-web-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/titillium-web-v17-latin-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/titillium-web-v17-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/titillium-web-v17-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --prim-color: #df9633;
    --sec-color: #df9633;
    --prim-bg-color: rgb(45, 56, 63);
    --sec-bg-color: #df9633;

    --font-color: #131313;

    --prim-color-deep-dark: rgb(25, 0, 66);

    /* Diese Farbe dunkelt den Hintergrund ab */
    --prim-bg-color-transparent: rgba(0, 0, 0, 0.137);
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
}

a {
    color: #fff;
}

input_light {
    background-color: #fff;
}

.h-50 {
    height: 50vh;
}

.content-center {
    margin: auto;
    justify-content: center;
    align-items: center;
}

.p-thin p {
    font-weight: 100;
}

.logo img {
    width: 100px;
}

.logo-desktop {
    top: 40px;
    left: 40px;
}

body {
    color: #000;
    font-weight: 500;
}

.status_bar .dot svg.empty g {
    stroke: var(--prim-color);
}

main {
    max-width: 1000px;
}



main p {
    margin-bottom: 1rem !important;
    padding-bottom: 0 !important;
    line-height: 1.3;
    text-align: left;
    font-size: 1rem;
}

@media (min-width: 768px) {
    main h2 {
        font-size: 1rem;
    }
}

main h2 {
    text-align: left;
    font-size: 2rem;
}


.link__card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    text-align: center;
    padding: 1rem .75rem;
    transition: all 0.25s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: #FF9e1C solid 1px;
}

.link__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 158, 28, 0.1), rgba(255, 158, 28, 0.3));
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    z-index: 0;
}

.link__card:hover::before {
    opacity: 1;
}

.link__card:hover {
    transform: scale(1.03);
    /* box-shadow: 0 10px 20px rgba(0, 82, 194, 0.15); */
}

.link__card img {
    height: 90px;
    margin-bottom: 0.4rem;
    transition: transform 0.25s ease-in-out;
    z-index: 1;
}

.link__card:hover img {
    transform: translateY(-5px) scale(1.05);
}


.link__card .card__title {
    color: #000;
    font-weight: 500;
    font-size: 1.5rem;
}

.link__card .text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444444;
    line-height: 1.5;
    z-index: 1;
    text-decoration: none;
    text-decoration-color: transparent;
}



.logo img {
    width: 180px;
    height: auto;
}

.lable__image {
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
    justify-self: flex-end;
    margin: 1rem;
}

div:has(.lable__image) {
    justify-content: space-around;
}


.preis-tabelle-visual {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem auto;
    font-size: 0.95rem;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.03);
}

.preis-tabelle-visual thead th {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #222;
    font-size: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.preis-tabelle-visual td,
.preis-tabelle-visual th {
    padding: 1rem 1.2rem;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #eee;
}

.preis-tabelle-visual th:last-child,
.preis-tabelle-visual td:last-child {
    border-right: none;
}

.preis-tabelle-visual td:first-child {
    text-align: left;
    font-weight: 500;
    border-right: 1px solid #ddd;
}

.preis-tabelle-visual tbody tr:not(.paket-row) td {
    border-bottom: 1px solid #eee;
}

.paket-row.basic td {
    background-color: #eaf2ff;
    font-weight: 600;
    font-size: 1rem;
    color: #1a2b5a;
    border-top: 2px solid #bcd3f1;
}

.paket-row.premium td {
    background-color: #f0fbf3;
    font-weight: 600;
    font-size: 1rem;
    color: #1a2b5a;
    border-top: 2px solid #c5e8d2;
}

.paket-row td:first-child {
    text-align: left;
    padding-left: 1.5rem;
}

.paket-row .save {
    color: #28a745;
    font-weight: bold;
    font-size: 0.95rem;
}

.paket-row div {
    line-height: 1.4;
}

@media screen and (max-width: 768px) {

    .preis-tabelle-visual td,
    .preis-tabelle-visual th {
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    .paket-row strong {
        font-size: 1rem;
    }
}


.preis-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 2rem 1rem;
    max-width: 1000px;
    margin: auto;
}


.preis-grid a {
    text-decoration: none;
    color: unset;
}

.card {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    font-size: 0.95rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card.header {
    background-color: #f5f7fa;
    font-weight: bold;
    font-size: 1rem;
}

.card.label {
    text-align: left;
    font-weight: bold;
    padding-left: 1.2rem;
}

.preis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.card.header {
    background-color: #f5f7fa;
    font-weight: bold;
    font-size: 1.1rem;
}

.card.empty {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

/* Paketkarten */
.card.paket {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;

    background: linear-gradient(to bottom, #fff, #f9f9f9);
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    padding: 1.8rem 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.card.paket:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: #999;
}

/* Basic-Stil */
.paket.basic {
    background-color: #eaf2ff;
    border-color: #c6dcff;
}

/* Premium-Stil */
.paket.premium {
    background-color: #f0fbf3;
    border-color: #c6efd5;
}

.card.paket .paket-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2b5a;
    margin-bottom: 0.5rem;
}

.card.paket .paket-preis {
    font-size: 1.25rem;
    font-weight: 600;
    color: #555;
}

.card.paket .paket-preis .old {
    font-size: 1rem;
    color: #999;
    font-weight: normal;
    margin-left: 0.5rem;
    text-decoration: line-through;
}

.card.paket .paket-save {
    font-size: 1rem;
    font-weight: bold;
    color: #28a745;
    margin-top: 0.3rem;
}


/* Mobile Ansicht */
@media screen and (max-width: 768px) {
    .preis-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card.paket {
        grid-column: span 2 !important;
    }
}

.cta-link {
    background-color: var(--prim-color);
    text-decoration: none;
    padding: 7.5px 10px;
    border-radius: 5px;
    margin-top: 10rem;
}

.page-subtitle {
    font-weight: 600;
    font-size: 1.25rem;
    /* color: #636362; */
}

iframe {
    padding: 20px 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}