/* DM Sans – self-hosted */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/typo3conf/ext/bs_site/Resources/Public/Fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/typo3conf/ext/bs_site/Resources/Public/Fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/typo3conf/ext/bs_site/Resources/Public/Fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/typo3conf/ext/bs_site/Resources/Public/Fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

/* Farben & Theme */
html body.theme-forest-mist {
    --color-primary-75:  #8FA8CE;
    --color-primary-100: #1B365D;
    --color-neutral-0:  #FFFFFF;
    --color-neutral-10: #EEF2F8;
    --color-neutral-20: #E2EAF4;
    --color-neutral-30: #C8D5E8;
    --color-neutral-40: #A8BCDA;
    --color-neutral-50: #8FA8CE;
    --color-neutral-60: #5E7FA8;
    --color-neutral-70: #2D4E7E;
    --color-neutral-80: #1B365D;
    --color-neutral-90: #0D1F38;
    --headline-family: 'DM Sans', sans-serif;
    --subline-family: 'DM Sans', sans-serif;
    --body-family: 'DM Sans', sans-serif;
    --title-family: 'DM Sans', sans-serif;
    --label-family: 'DM Sans', sans-serif;
}

/* Schrift */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif !important;
}
body, p, a, li, td, input, textarea, button {
    font-family: 'DM Sans', sans-serif !important;
}

/* Sprache verstecken */
.language-menu,
.site-language-menu,
[class*="language"] {
    display: none !important;
}

/* -------------------------
   HEADER
------------------------- */
.header--fixed {
    min-height: 70px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.header__logo svg,
.header__logo img {
    display: none !important;
}
.header__logo {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}
.header__logo::before {
    content: "beckschreibt";
    font-size: 2.1rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.header__logo::after {
    content: "Presse | Text | Online";
    font-size: 1.0rem;
    font-weight: 300;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* -------------------------
   HERO
------------------------- */
.hero {
    padding-top: 120px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.hero__content {
    margin-top: 20px;
}

	.hero__image {
    margin-top: -20px !important;
}
/* -------------------------
   CONTENT
------------------------- */
[id] {
    scroll-margin-top: 120px;
}

.ce-bodytext p,
.textpic__text,
.textpic__text p {
    max-width: 100% !important;
}

.frame,
.content-element,
.frame-type-textmedia,
.frame-type-header,
.frame-type-form_formframework {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.content-element {
    --component-margin-vertical: 24px !important;
}

.frame-type-textmedia .headline {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* -------------------------
   FOOTER
------------------------- */
.footer__logo svg,
.footer__logo img {
    display: none !important;
}
.footer__logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
}
.footer__logo::before {
    content: "beck";
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
}
.footer__logo::after {
    content: "schreibt";
    font-size: 1.4rem;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.footer .link-list__arrow,
.footer .linklist__arrow,
.footer [class*="arrow"] {
    display: none !important;
}

/* -------------------------
   NACH-OBEN-BUTTON
------------------------- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: #1B365D;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 999;
    text-decoration: none;
}
.back-to-top.visible {
    opacity: 1;
}
.back-to-top:hover {
    background: #2D4E7E;
}

/* -------------------------
   KONTAKTFORMULAR
------------------------- */
.frame-type-form_formframework {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.frame + .frame-type-form_formframework {
    margin-top: -2rem !important;
}

.frame-type-form_formframework .frame-header {
    display: block !important;
}

body .frame-type-form_formframework form * {
    box-sizing: border-box !important;
}

body .frame-type-form_formframework input,
body .frame-type-form_formframework textarea,
body .frame-type-form_formframework select {
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

body .frame-type-form_formframework input {
    height: 48px !important;
    padding: 10px 14px !important;
}

body .frame-type-form_formframework textarea {
    min-height: 240px !important;
    padding: 14px !important;
}

body .frame-type-form_formframework label {
    display: block !important;
    margin-bottom: 6px !important;
}

body .frame-type-form_formframework legend {
    display: none !important;
}

/* -------------------------
   ARBEITSPROBEN GRID (Startseite)
------------------------- */
.arbeitsproben-section {
    padding: 2rem 0;
}

.arbeitsproben-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.arbeitsprobe-card {
    border: 0.5px solid #C8D5E8;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.15s;
}

.arbeitsprobe-card:hover {
    border-color: #1B365D;
}

.arbeitsprobe-card__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.arbeitsprobe-card__image {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #E8EDF5;
}

.arbeitsprobe-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.arbeitsprobe-card:hover .arbeitsprobe-card__img {
    transform: scale(1.04);
}

.arbeitsprobe-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: #E2EAF4;
}

.arbeitsprobe-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #1B365D;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.arbeitsprobe-card__body {
    padding: 0.875rem;
    flex: 1;
}

.arbeitsproben-grid .arbeitsprobe-card__title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    margin: 0 0 0.25rem 0 !important;
}

.arbeitsprobe-card__teaser {
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.arbeitsproben-footer {
    text-align: right;
    margin-top: 1rem;
}

.link-alle {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1B365D;
    text-decoration: none;
}

.link-alle:hover {
    text-decoration: underline;
}

/* -------------------------
   PORTFOLIO SEITE
------------------------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.portfolio-alle {
    border-top: 0.5px solid #C8D5E8;
    padding-top: 2rem;
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1B365D #E8EDF5;
}

.portfolio-alle::-webkit-scrollbar {
    width: 4px;
}
.portfolio-alle::-webkit-scrollbar-track {
    background: #E8EDF5;
}
.portfolio-alle::-webkit-scrollbar-thumb {
    background: #1B365D;
    border-radius: 2px;
}

.portfolio-alle__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.portfolio-alle__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 0.5px solid #E2EAF4;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.portfolio-alle__item:hover {
    background: #EEF2F8;
    padding-left: 0.5rem;
}

.portfolio-alle__badge {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #1B365D;
    background: #E8EDF5;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.portfolio-alle__title {
    font-size: 0.9375rem;
    color: #0D1F38;
    flex: 1;
}

.portfolio-alle__date {
    font-size: 0.75rem;
    color: #8FA8CE;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -------------------------
   ANGEBOT TABELLE
------------------------- */
.section-title {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

.angebot-table {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.angebot-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    align-items: start;
}

.angebot-title {
    font-weight: 500;
    font-size: 1.1rem;
    color: #1B365D;
}

.angebot-text {
    font-size: 1rem;
    line-height: 1.6;
}

/* -------------------------
   NEWS (Listenansicht)
------------------------- */
.tx-news-pi1 .news-list-view .news-text-wrap,
.tx-news-pi1 .news-bodytext,
.tx-news-pi1 .news-content {
    display: none !important;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 768px) {
    .arbeitsproben-grid,
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .teaser-scroller {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
        gap: 3rem !important;
    }

    .teaser-scroller > * {
        width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 2rem !important;
    }

    .textmedia-teaser {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 480px) {
    .arbeitsproben-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}