/* Telemarie Static Pages – Stylesheet
   Based on telemarie.de theme styles */

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    box-sizing: border-box;
}

/* Variables */
:root {
    --font-main: 'Roboto', sans-serif;
    --font-headline: 'Roboto', sans-serif;
    --clr-text: #444;
    --clr-headline: #333;
    --main-clr: #333;
    --secundary-clr: #f6ac33;
    --third-clr: #103344;
    --white: #FFF;
    --black: #000;
    --logo-height: 90px;
    --tm-yellow: #F8BB58;
    --tm-blue: #0a58ca;
    --tm-blue-hover: #0949a8;
}

/* Base */
html {
    font-family: var(--font-main);
    scroll-behavior: smooth;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--clr-text);
    letter-spacing: 0.5px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--tm-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--tm-blue-hover);
    text-decoration: underline;
}

/* Header */
header {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
}

.header-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
}

.header-container > div {
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    display: flex;
}

#logo {
    max-height: var(--logo-height);
    width: auto;
    padding: 1rem 0;
}

.menu-tele-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile menu button */
#mobile-btn {
    position: relative;
    color: var(--black);
    font-size: 1.625rem;
    cursor: pointer;
    z-index: 100;
    background: none;
    border: none;
    display: block;
    width: 30px;
    height: 30px;
}

#mobile-btn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0c9";
}

/* Navigation */
#topnav {
    position: absolute;
    width: 100%;
    top: 100%;
    max-width: 360px;
    right: 0;
    display: none;
    transition: all 0.5s ease;
}

#topnav.custom_menu {
    display: block;
}

#topnav ul {
    position: absolute;
    padding: 0;
    overflow-y: auto;
    transition: 0.3s;
    background: var(--white);
    width: 100%;
    list-style: none;
    animation: scale-up-hor-right .4s cubic-bezier(.39, .575, .565, 1.000) both;
}

@keyframes scale-up-hor-right {
    0% { transform: scaleX(.4); transform-origin: 100% 100%; }
    100% { transform: scaleX(1); transform-origin: 100% 100%; }
}

#topnav a,
#topnav a:focus {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 15px;
    white-space: nowrap;
    transition: 0.3s;
    color: var(--clr-text);
    text-decoration: none;
}

#topnav a:hover {
    color: var(--tm-blue);
    text-decoration: none;
}

#topnav li {
    margin: 0;
    font-family: var(--font-headline);
    list-style: none;
}

/* CTA Button */
.product-btn {
    background: var(--secundary-clr);
    color: var(--black);
    border: none;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.product-btn a {
    color: var(--black);
    text-decoration: none;
}

.product-btn:hover {
    background: #e09a2a;
    transform: translateY(-2px);
}

/* Content area */
.content {
    padding: var(--logo-height) 0 0;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Article content (tm-* classes from schnellstart) */
.tm-article {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 16px;
    background: #fff;
    font-family: var(--font-main);
}

.tm-eyebrow {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px;
    font-weight: 500;
    line-height: 1.5;
}

.tm-h1like {
    color: #000;
    line-height: 1.25;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 36px);
    margin: 0 0 12px;
}

.tm-sub {
    font-size: 18px;
    color: #555;
    margin: 0 0 24px;
    line-height: 1.5;
}

.tm-article h1 {
    color: #000;
    line-height: 1.25;
    font-weight: 600;
    font-size: clamp(28px, 5vw, 36px);
    margin: 0 0 24px;
}

.tm-article h2 {
    color: #000;
    font-size: clamp(24px, 4vw, 28px);
    margin: 2rem 0 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.tm-article h3 {
    color: #000;
    font-size: 22px;
    margin: 1.5rem 0 .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.tm-article h4 {
    color: #000;
    font-size: 18px;
    margin: .5rem 0;
    font-weight: 600;
    line-height: 1.25;
}

.tm-article p {
    color: #111;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.tm-article li {
    color: #111;
    font-size: 17px;
    line-height: 1.7;
}

.tm-article li + li {
    margin-top: .4rem;
}

.tm-article a {
    color: var(--tm-blue);
    text-decoration: none;
    transition: color .2s ease;
}

.tm-article a:hover {
    color: var(--tm-blue-hover);
    text-decoration: underline;
}

.tm-article a.tm-qp {
    color: var(--black);
}

.tm-article a.tm-qp:hover {
    color: var(--black);
    text-decoration: none;
}

/* Images */
.tm-figure img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* Quickpicks (Chips) */
.tm-quickpicks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.tm-qp {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-radius: 15px;
    border: 2px solid var(--secundary-clr);
    background: #fff;
    box-shadow: 0 4px 12px rgba(246,172,51,.15);
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tm-qp:hover {
    background: var(--secundary-clr);
    color: var(--black);
    border-color: var(--secundary-clr);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(246,172,51,.25);
    text-decoration: none;
}

.tm-qp i {
    color: var(--secundary-clr);
}

.tm-qp:hover i {
    color: var(--black);
}

/* TOC */
.tm-toc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin: 16px 0 24px;
    padding: 12px 16px;
    background: #fef8ed;
    border-radius: 12px;
    border: 1px solid rgba(246,172,51,.3);
    font-size: 15px;
    color: #666;
}

.tm-toc strong {
    margin-right: .3rem;
    color: #000;
}

/* Buttons */
.tm-btn {
    display: inline-block;
    border-radius: 9999px;
    padding: 1rem 1.8rem;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    background: var(--tm-blue);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(10,88,202,.22);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tm-btn:hover {
    background: var(--tm-blue-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--white);
}

.tm-btn-wrap {
    margin: 24px 0 32px;
    text-align: center;
}

/* Screenshot images */
.tm-screenshot {
    width: 100%;
    max-width: 540px;
    display: block;
    margin: 1rem auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* Image placeholder */
.tm-placeholder {
    width: 100%;
    border-radius: 12px;
    background: #f0f1f3;
    border: 2px dashed #ccc;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #999;
    font-size: 15px;
    margin: 1rem 0;
}

.tm-placeholder i {
    display: block;
    font-size: 2rem;
    margin-bottom: .5rem;
    color: #bbb;
}

/* Divider */
.tm-divider {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 2rem 0;
}

/* Icon list (checkmark bullets) */
.tm-icon-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.tm-icon-list li {
    display: block;
    padding: 0.4rem 0 0.4rem 32px;
    position: relative;
    word-break: break-word;
    overflow-wrap: break-word;
}

.tm-icon-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    width: 23px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='16'%3E%3Cpath d='M0 0 C0 1.32 0 2.64 0 4 C-1.609375 5.30859375 -1.609375 5.30859375 -3.75 6.4375 C-8.01699986 8.88441673 -10.77420457 11.54840913 -13 16 C-14.65 16 -16.3 16 -18 16 C-18.45375 15.030625 -18.9075 14.06125 -19.375 13.0625 C-20.65786221 9.92920418 -20.65786221 9.92920418 -23 9 C-23 7.68 -23 6.36 -23 5 C-19.32013404 4.795563 -17.21639654 5.25434889 -14 7 C-13.51789062 6.57847656 -13.03578125 6.15695313 -12.5390625 5.72265625 C-11.90742188 5.17480469 -11.27578125 4.62695312 -10.625 4.0625 C-9.68527344 3.24458984 -9.68527344 3.24458984 -8.7265625 2.41015625 C-5.73435891 -0.03370234 -3.79251756 -0.09980309 0 0 Z' fill='%23F8BB58' transform='translate(23,0)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Section card */
.tm-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f7f8fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.tm-section h3 {
    margin-top: 0;
}

/* Info box */
.tm-info {
    background: #fff8e6;
    border-left: 4px solid var(--tm-yellow);
    padding: 1rem 1.2rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

/* Partner section (aside) */
aside#partner {
    padding: 4rem 2rem;
    text-align: center;
}

aside#partner .wrapper {
    max-width: 1320px;
    margin: 0 auto;
}

aside#partner .hl {
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    line-height: 1.3;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 400;
    font-family: var(--font-headline);
}

.logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

.logos .unterstuetzer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logos .unterstuetzer img {
    width: auto;
    height: auto;
    max-height: 90px;
    max-width: 180px;
    object-fit: contain;
    border-radius: 0 !important;
}

/* Footer */
footer {
    text-align: center;
    position: relative;
    background: var(--third-clr);
    color: var(--white);
}

footer .wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

footer .box {
    flex: 1 1 200px;
    text-align: left;
}

footer .hl {
    color: var(--secundary-clr);
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    font-weight: 400;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin: 0.5rem 0;
}

footer li a {
    color: var(--white);
    transition: 200ms ease;
    text-decoration: none;
}

footer li a:hover {
    color: var(--secundary-clr);
    text-decoration: none;
}

footer p {
    margin: 0 0 1rem;
    text-align: left;
    color: rgba(255,255,255,0.8);
}

footer .app-badges {
    display: flex;
    gap: 1rem;
}

footer .app-badges a {
    flex: 1;
}

footer .app-badges img {
    max-width: 150px;
    border-radius: 0 !important;
}

/* Responsive: Tablet+ */
@media screen and (min-width: 768px) {
    #mobile-btn {
        display: none;
    }

    #topnav {
        position: static;
        display: flex;
        max-width: none;
    }

    #topnav ul {
        position: static;
        display: flex;
        gap: 0;
        height: auto;
        animation: none;
    }

    #topnav li {
        display: flex;
        align-items: center;
    }

    .menu-tele-btn {
        gap: 1.5rem;
    }

    .header-container > div {
        padding: 0 2rem;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .header-container > div {
        padding: 0 .75rem;
    }

    .product-btn {
        font-size: 14px;
        padding: 8px 14px;
    }

    .product-btn .full-text {
        display: none;
    }

    .product-btn [data-mobile]::after {
        content: attr(data-mobile);
    }

    .menu-tele-btn {
        flex-direction: row-reverse;
    }

    .container {
        padding: 0 1rem;
    }

    .tm-article {
        padding: 20px 8px;
    }

    .tm-article h1 {
        font-size: 26px;
    }

    .tm-article h2 {
        font-size: 22px;
    }

    .tm-article h3 {
        font-size: 19px;
    }

    .tm-article p,
    .tm-article li {
        font-size: 16px;
    }

    .tm-quickpicks {
        gap: 8px;
    }

    .tm-qp {
        font-size: 13px;
        padding: .5rem .8rem;
        white-space: normal;
    }

    .tm-toc {
        padding: 10px 12px;
    }

    .tm-info {
        padding: .8rem 1rem;
        font-size: 15px;
    }

    .tm-placeholder {
        padding: 2rem 1rem;
        font-size: 14px;
    }

    .logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 1rem;
    }

    .logos .unterstuetzer img {
        max-height: 60px;
        max-width: 120px;
    }

    aside#partner {
        padding: 2rem 1rem;
    }

    aside#partner .hl {
        font-size: 1.4rem;
    }

    footer .wrapper {
        flex-direction: column;
        padding: 2rem 1rem;
    }

    footer .app-badges img {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .tm-article h1 {
        font-size: 24px;
    }

    .tm-article h2 {
        font-size: 20px;
    }

    .logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}