/* ============================================
   UNABHÄNGIGE BAUERNSTIMME — Homepage Redesign
   ============================================

   Table of Contents:
   1. Reset & Base
   2. Custom Properties (CSS Variables)
   3. Utilities
   4. Buttons
   5. Layout & Container
   6. Header
      6a. Topbar & Masthead
      6b. Navigation
      6c. Mobile Menu
      6d. Search Overlay
   7. Hero Banner
   8. Cards & Grid
   9. Newsletter / Nachrichtenbrief
   10. Magazine / Aktuelle Ausgabe
   11. Abo CTA
   12. About Section
   13. Footer
   14. Animations
   15. Article Detail Page
      15a. Breadcrumb
      15b. Article Layout
      15c. Article Body
      15d. Sidebar
      15e. Related Articles
   16. Contact Page
   17. Team Page
   18. Related News (Sidebar)
   19. Responsive (Media Queries)
   20. Fluid Styled Content
      20a. Frame Defaults
      20b. Grid Layouts
      20c. Content Elements (generic, element-based)
      20d. Section-Specific Hooks

   ============================================ */

/* ============================================
   1. RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input {
    font: inherit;
    border: none;
    outline: none;
}

address {
    font-style: normal;
}

p {
    font-size: var(--fs-med);
}

/* ============================================
   2. CUSTOM PROPERTIES (CSS Variables)
   ============================================ */
:root {
    /* Primary Colors */
    --color-primary: #0088b6;
    --color-primary: var(--brand-color);
    --color-primary-dark: rgb(0, 105, 145);
    --color-primary-light: rgb(224, 244, 250);

    /* Secondary — Agricultural Greens */
    --color-green: rgb(76, 140, 43);
    --color-green-light: rgb(234, 245, 228);

    /* Earthy Warm Neutrals */
    --color-earth: rgb(166, 124, 64);
    --color-sand: rgb(248, 244, 236);
    --color-cream: rgb(255, 251, 245);

    /* Neutrals */
    --color-text: rgb(34, 34, 34);
    --color-text-secondary: rgb(85, 85, 85);
    --color-text-muted: rgb(136, 136, 136);
    --color-border: rgb(224, 224, 224);
    --color-bg-gray: rgb(245, 245, 245);
    --color-white: rgb(255, 255, 255);

    /* Functional */
    --color-accent-warm: rgb(200, 80, 40);

    /* Typography */
    --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-sans: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-hero-title: clamp(1.75rem, 4vw, 2.75rem);
    --fs-section-title: clamp(1.5rem, 3vw, 2rem);
    --fs-card-title: clamp(1.05rem, 2vw, 1.3rem);
    --fs-body: 1rem;
    --fs-med: 1.125rem;
    --fs-small: 0.875rem;
    --fs-meta: 0.8125rem;
    --fs-nav: 1.3125rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.6;

    /* Layout */
    --container-max: 1200px;
    --container-padding: 1rem;
    --section-padding: 3rem;
    --gap: 1.5rem;

    /* Transitions */
    --transition: 0.2s ease;

    /* Border Radius */
    --radius: 10px;

    /* Header Height (for sticky sidebar) */
    --header-h: 160px;

    /* container */
    --container-width: 1200px;
}

/* ============================================
   3. UTILITIES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Full-bleed utility */
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ============================================
   4. BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-body);
    border-radius: 3px;
    padding: 0.75rem 1.5rem;
    transition: all var(--transition);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn--outline {
    background: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn--outline-dark {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline-dark:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--outline-primary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn--outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--fs-small);
}

.btn--lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn--full {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* ============================================
   5. LAYOUT & CONTAINER
   ============================================ */
.section {
    padding: var(--section-padding) 0;
}

.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.section__title {
    font-family: var(--font-serif);
    font-size: var(--fs-section-title);
    font-weight: 700;
    color: var(--color-text);
    width: fit-content;
    margin-top: 0;
    margin-bottom: 0.625rem;
}

.section__title::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-top: 0.15rem;
}

.section__more-link {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-primary);
    transition: color var(--transition);
    white-space: nowrap;
}

.section__more-link:hover {
    color: var(--color-primary-dark);
}

/* Frame defaults */
.frame {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.grid-column .frame {
    padding-inline: 0;
}

.frame + .frame {
    margin-top: 1rem;
}

/* ============================================
   6. HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    transition: box-shadow var(--transition);
}

.site-header--scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---- 6a. Topbar & Masthead ---- */
.header-topbar {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-meta);
    padding: 0.4rem 0;
    text-align: center;
    letter-spacing: 0.02em;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.site-header--scrolled .header-topbar {
    max-height: 0;
    padding: 0;
    opacity: 0;
}

.header-masthead {
    padding: calc(0.825rem + 37.5px) 0 calc(0.75rem + 37.5px);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
    transition: padding 0.3s ease;
}

.site-header--scrolled .header-masthead {
    padding: 0.9rem 0;
}

.header-masthead .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Login/Suche/Hero-Info liegen immer in der Navbar (.header-actions) */

.logo {
    display: inline-block;
    line-height: 0;
}

.logo img {
    height: 90px;
    width: auto;
    transition: height 0.3s ease;
}

.site-header--scrolled .logo img {
    height: 50px;
}

/* ---- 6b. Navigation ---- */
.header-navbar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.header-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
}

.main-nav {
    display: none;
}

.main-nav__list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.main-nav__link {
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 400;
    color: var(--color-text);
    padding: 0.5rem 0.5rem;
    border-radius: 4px;
    transition: all var(--transition);
    position: relative;
    white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link.active {
    color: var(--color-primary);
}

.main-nav__link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0.5rem;
    right: 0.5rem;
    height: 5px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    z-index: 1;
}

/* Dropdown */
.main-nav__dropdown {
    position: relative;
}

.main-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--transition);
    z-index: 10;
}

.main-nav__dropdown:hover .main-nav__submenu,
.main-nav__dropdown.open .main-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav__submenu a {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: var(--fs-med);
    font-weight: 500;
    color: var(--color-text);
    transition: all var(--transition);
}

.main-nav__submenu a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-abo-btn {
    margin-left: 0.5rem;
    font-size: 0.875rem !important;
    padding: 0.45rem 1rem !important;
    white-space: nowrap;
}

.search-toggle,
.epaper-toggle,
.login-toggle {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text);
    transition: all var(--transition);
}

.search-toggle:hover,
.epaper-toggle:hover,
.login-toggle:hover {
    background: var(--color-bg-gray);
    color: var(--color-primary);
}

.search-toggle svg,
.epaper-toggle svg,
.login-toggle svg {
    width: 20px;
    height: 20px;
}

/* Hero-Info-Toggle */
.hero-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
}

.hero-toggle.visible {
    display: flex;
}

.hero-toggle:hover {
    background: var(--color-bg-gray);
    color: var(--color-primary);
}

.hero-toggle svg {
    width: 20px;
    height: 20px;
}

/* ---- 6c. Mobile Menu ---- */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before {
    top: -7px;
}

.hamburger::after {
    top: 7px;
}

.mobile-menu-toggle.active .hamburger {
    background: transparent;
}

.mobile-menu-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Mobile nav open */
.main-nav--open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 1rem 0 50vh;
    z-index: 50;
    overflow: auto;
    max-height: calc(100vh - 120px);
}

.main-nav--open .main-nav__list {
    flex-direction: column;
    align-items: stretch;
}

.main-nav--open .main-nav__link {
    padding: 0.75rem var(--container-padding);
    border-radius: 0;
}

.main-nav--open .main-nav__link.active {
    color: var(--color-text);
}

.main-nav--open .main-nav__link.active::after {
    display: none;
}

.main-nav--open .main-nav__submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    padding: 0.25rem 0 0.625rem;
    background: transparent;
    border: none;
}

.main-nav--open .main-nav__submenu a {
    padding: 0.25rem 1rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-primary-light);
    margin-left: calc(var(--container-padding) + 0.25rem);
}

.main-nav--open .main-nav__submenu a:hover {
    color: var(--color-primary);
    background: transparent;
}

/* ---- 6d. Search Overlay ---- */
.search-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-top: 2px solid var(--color-primary);
    z-index: 60;
    padding: 1.25rem 0 1.5rem;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-overlay.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.search-overlay__form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.search-field--keyword {
    flex: 2;
}

.search-field--period {
    flex: 1;
}

.search-field--topics {
    flex: 1;
    position: relative;
}

.search-field--submit {
    flex: none;
}

.search-field__label {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-field__input-wrap {
    position: relative;
}

.search-field__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-overlay__input {
    width: 100%;
    padding: 0.65rem 0.75rem 0.65rem 2.25rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--fs-body);
    transition: border-color var(--transition);
    background: var(--color-white);
}

.search-overlay__input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.search-overlay__select {
    width: 100%;
    padding: 0.65rem 2rem 0.65rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition);
}

.search-overlay__select:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Themen-Dropdown */
.search-topics__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition);
    text-align: left;
}

.search-topics__toggle:hover,
.search-topics__toggle[aria-expanded="true"] {
    border-color: var(--color-primary);
}

.search-topics__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.search-topics__toggle[aria-expanded="true"] .search-topics__chevron {
    transform: rotate(180deg);
}

.search-topics__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 0.5rem 0;
}

.search-topics__dropdown.open {
    display: block;
}

.search-topics__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-topics__list label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition);
}

.search-topics__list label:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.search-topics__list input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-overlay__submit {
    white-space: nowrap;
    padding: 0.65rem 1.75rem;
}

/* ============================================
   7. HERO BANNER
   ============================================ */
.hero-banner {
    position: relative;
    overflow: hidden;
}

.hero-banner--hidden {
    display: none;
}

.hero-banner__media {
    position: relative;
    width: 100%;
    max-height: 434px;
    overflow: hidden;
}

.hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    max-height: 434px;
}

.hero-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.43) 0%,
            rgba(0, 0, 0, 0.27) 55%,
            rgba(0, 0, 0, 0.07) 100%
    );
}

.hero-banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.hero-banner__text {
    max-width: 600px;
    color: var(--color-white);
}

.hero-banner__text p {
    margin-bottom: 1.4rem;
}

.hero-banner__headline {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


.hero-banner__subhead {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    opacity: 0.92;
    line-height: 1.65;
    margin-bottom: 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}


/* Hero Banner Close Button */
.hero-banner__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 10;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition);
}

.hero-banner__close:hover {
    opacity: 0.7;
}

.hero-banner__close svg {
    width: 30px;
    height: 30px;
}

/* ============================================
   8. CARDS & GRID
   ============================================ */
.card-grid {
    display: grid;
    gap: var(--gap);
}

.card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.card__image-link {
    display: block;
    overflow: hidden;
}

.card__image-link img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover .card__image-link img {
    transform: scale(1.03);
}

.card__body {
    padding: 1.25rem;
}

.card__category {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    display: inline-block;
    margin-bottom: 0.4rem;
}

.card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-bottom: 0.5rem;
}

.card__title a:hover {
    color: var(--color-primary);
    transition: color var(--transition);
}

.card__teaser {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.card__teaser p {
    font-size: var(--fs-small);
}

.card__meta {
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

/* Horizontal Card */
.card--horizontal {
    display: flex;
    border-radius: 8px;
}

.card--horizontal .card__image-link {
    flex-shrink: 0;
    width: 140px;
}

.card--horizontal .card__image-link img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.card--horizontal .card__body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card--horizontal .card__title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.card--horizontal .card__teaser {
    -webkit-line-clamp: 2;
    margin-bottom: 0.5rem;
}

/* ============================================
   9. NEWSLETTER / NACHRICHTENBRIEF
   ============================================ */
.section--newsletter {
    background: var(--color-bg-gray);
}

.newsletter-grid {
    display: grid;
    gap: var(--gap);
}

.newsletter-articles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signup-box {
    background: var(--color-primary-light);
    border-radius: 10px;
    padding: 2rem;
}

.signup-box__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.signup-box__text {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.signup-form__field input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--fs-body);
    background: var(--color-white);
    transition: border-color var(--transition);
}

.signup-form__field input:focus {
    border-color: var(--color-primary);
}

.signup-form__field input::placeholder {
    color: var(--color-text-muted);
}

.signup-form .btn {
    width: 100%;
}

.signup-form__privacy {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.signup-form__privacy a {
    color: var(--color-primary);
    text-decoration: underline;
}

.signup-form__success {
    display: none;
    padding: 1rem;
    background: var(--color-green-light);
    border-radius: 6px;
    color: var(--color-green);
    font-weight: 600;
    text-align: center;
}

.signup-form__success.visible {
    display: block;
}

/* ============================================
   10. MAGAZINE / AKTUELLE AUSGABE
   ============================================ */

/* CType "Bauernstimme Ausgaben": beliebige Anzahl Cover pro Zeile (flex-wrap
   statt Raster, imagecols wird bewusst ignoriert). */
.ausgaben-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    list-style: none;
}

.ausgaben-list__item {
    max-width: 240px;
}

.ausgaben-list__figure {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ausgaben-list__item a {
    display: block;
    transition: opacity var(--transition);
}

.ausgaben-list__item a:hover {
    opacity: 0.85;
}

.ausgaben-list__img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: solid 1px var(--color-border);
    background: #fff;
}

/* PDF o. Ä. als Cover: Textlink statt Bild */
.ausgaben-list__doc {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-primary);
}

.ausgaben-list__caption {
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .ausgaben-list {
        gap: 0.75rem;
    }

    /* drei Cover pro Zeile, sonst wird die Jahresliste sehr lang */
    .ausgaben-list__item {
        flex: 0 1 calc((100% - 1.5rem) / 3);
        max-width: none;
    }
}

/* ============================================
   11. ABO CTA
   ============================================ */

.abo-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr 1fr 1fr;
}

.abo-card {
    background: var(--color-white);
    color: var(--color-text);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform var(--transition);
}

.abo-card:hover {
    transform: translateY(-3px);
}

.abo-card--featured {
    border: 3px solid var(--color-primary-light);
    position: relative;
    box-shadow: 0 0 0 1px var(--color-primary-light),
    0 0 18px 4px rgba(0, 154, 220, 0.25),
    0 8px 24px rgba(0, 154, 220, 0.15);
}

.abo-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-card-title);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.abo-card__price {
    margin-bottom: 0.75rem;
}

.abo-card__amount {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-primary);
    display: block;
    line-height: 1.1;
}

.abo-card__period {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.abo-card__description {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.abo-card .btn {
    width: 100%;
}

/* ============================================
   12. ABOUT SECTION
   ============================================ */

/* ============================================
   13. FOOTER
   ============================================ */
.site-footer {
    background: #005f87;
    color: var(--color-white);
    padding: 3rem 0 0;
}

.footer-grid {
    display: grid;
    gap: 2rem;
}

.footer__logo {
    height: 48px;
    width: auto;
    margin-bottom: 0.75rem;
}

.footer__tagline {
    font-size: var(--fs-small);
    line-height: 1.5;
    padding-right: 15px;
}

.site-footer h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer__contact address {
    font-size: var(--fs-small);
    line-height: 1.8;
}

.footer__contact a,
.footer__links a {
    transition: color var(--transition);
}

.footer__contact a,
.footer__links a,
.footer__tagline {
    color: var(--color-white);
}

.footer__contact a:hover,
.footer__links a:hover {
    color: var(--color-white);
    opacity: 0.75;
}

.footer__links ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__links a {
    font-size: var(--fs-small);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    margin-top: 2.5rem;
    text-align: center;
    font-size: var(--fs-meta);
}

/* ============================================
   14. ANIMATIONS
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   15. ARTICLE DETAIL PAGE
   ============================================ */

/* ---- 15a. Breadcrumb ---- */
.breadcrumb-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    color: var(--color-border);
    font-size: 0.75rem;
}

.breadcrumb__link {
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.breadcrumb__link:hover {
    color: var(--color-primary);
}

.breadcrumb__link--home {
    display: flex;
    align-items: center;
}

.breadcrumb__link--home svg {
    width: 15px;
    height: 15px;
}

.breadcrumb__item--current {
    color: var(--color-text);
    font-weight: 500;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 15b. Article Layout ---- */

/* Hero Image */

/* ---- 15c. Article Body ---- */

/* Article Footer: Tags + Share */
.article__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    padding-top: 1.75rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.article__tags,
.article__categories,
.article__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.article__tags-label,
.article__categories-label,
.article__share-label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.article__tag {
    display: inline-block;
    font-size: var(--fs-meta);
    font-weight: 600;
    background: var(--color-sand);
    color: var(--color-text-secondary);
    border-radius: 3px;
    padding: 0.25rem 0.6rem;
    transition: all var(--transition);
}

.article__tag:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.article__share-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-sand);
    color: var(--color-text-secondary);
    transition: all var(--transition);
}

.article__share-btn svg {
    width: 16px;
    height: 16px;
}

.article__share-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ---- 15d. Sidebar ---- */


/* ---- 15e. Related Articles ---- */

/* ============================================
   16. CONTACT PAGE
   ============================================ */

.contact-card {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.contact-card__heading {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.contact-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-card__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.contact-card__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--color-text-secondary);
    fill: none;
}

.contact-card__item a {
    color: var(--color-primary);
}

.contact-card__item a:hover {
    text-decoration: underline;
}

/* Contact Form */

/* ============================================
   17. TEAM PAGE
   ============================================ */

/* ============================================
   18. RELATED NEWS (Sidebar)
   ============================================ */
.related-news-list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.related-news-item {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
}

.related-news-item:first-child {
    padding-top: 0;
}

.related-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-news-item__title {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.related-news-item__title a {
    color: var(--color-text);
    transition: color 0.15s;
}

.related-news-item__title a:hover {
    color: var(--color-primary);
}

/* ============================================
   19. RESPONSIVE (Media Queries)
   ============================================ */

/* ---- Mobile: < 768px ---- */
@media (max-width: 767px) {
    .header-masthead {
        padding: 10px 0;
    }

    .header-masthead .container {
        justify-content: center;
    }

    /* Abo-Button zuerst, danach die Icons vor dem Hamburger */
    .header-actions .nav-abo-btn {
        order: -1;
    }

    .header-navbar__inner {
        justify-content: space-between;
    }

    .search-overlay__form {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-field--keyword,
    .search-field--period,
    .search-field--topics {
        flex: none;
    }

    .search-field--submit {
        align-self: flex-start;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand,
    .footer__contact {
        grid-column: 1 / -1;
    }

    /* Hero Banner Mobile */
    .hero-banner__media {
        max-height: 320px;
    }

    .hero-banner__img {
        max-height: 320px;
    }

    .hero-banner__overlay {
        background: linear-gradient(
                to right,
                rgba(0, 0, 0, 0.43) 0%,
                rgba(0, 0, 0, 0.27) 55%,
                rgba(0, 0, 0, 0.07) 100%
        );
    }

    .hero-banner__content {
        position: absolute;
        background: none;
        padding: 0 var(--container-padding) 1.5rem;
        align-items: flex-end;
    }

    .hero-banner__text {
        max-width: 100%;
        color: var(--color-white);
    }

    .hero-banner__headline {
        font-size: 1.35rem;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
        margin-bottom: 0.5rem;
    }

    .hero-banner__subhead {
        font-size: 0.9rem;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        opacity: 0.92;
        margin-bottom: 0;
    }

    /* Article layout responsive */
    .article__footer {
        justify-content: space-between;
    }

    .abo-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Small: 576px+ ---- */
@media (min-width: 576px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ---- Medium: 768px+ ---- */
@media (min-width: 768px) {
    :root {
        --container-padding: 1.5rem;
        --section-padding: 4rem;
    }

    .header-masthead .container {
        justify-content: center;
        align-items: center;
    }

    .main-nav {
        display: flex;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .main-nav__link {
        font-size: var(--fs-small);
        padding: 0.85rem 0.6rem;
    }

    .logo img {
        height: 60px;
    }

    .newsletter-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* ---- Large: 1024px+ ---- */
@media (min-width: 1024px) {
    :root {
        --container-padding: 2rem;
        --section-padding: 5rem;
    }

    .main-nav__link {
        font-size: var(--fs-nav);
        padding: 0.85rem 0.85rem;
    }

    .main-nav__list > li:first-child > .main-nav__link {
        padding-left: 0;
    }

    .main-nav__list > li:first-child > .main-nav__link.active::after {
        left: 0;
    }

    .logo img {
        height: 70px;
    }

    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }

    .card--horizontal .card__image-link {
        width: 160px;
    }
}

/* ---- Extra Large: 1280px+ ---- */

/* ============================================
   20. FLUID STYLED CONTENT
   ============================================ */

/* ---- 20a. Frame Defaults ---- */
.frame > header {
    margin-bottom: 1.5rem;
}

.frame > header h1,
.frame > header h2  {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--fs-section-title);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0;
    padding-bottom: 0.15rem;
    border-bottom: 4px solid var(--color-primary);
    border-radius: 2px;
}

.frame > header h2 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.6rem;
}

.frame > header h1 + h2 {
    display: block;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-med);
    font-weight: normal;
    color: var(--color-text-secondary);
    margin: 0.625rem 0 0 0;
}

/* ---- 20b. Grid Layouts ---- */
.grid-container > .grid-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    align-items: start;
}

/* ---- 20c. Content Elements (GENERIC) ----
   Editor content is styled by element inside the content-frame body, so it
   works whether or not a `.ce-bodytext` wrapper is present (the rendered
   markup is inconsistent: e.g. `frame-type-text` may emit a bare `<p>`).
   The scope below is the "generic content body": any text-bearing content
   frame plus the optional `.ce-bodytext` wrapper. Special components (cards,
   hero, abo, contact-card, navigation, footer …) keep their own classes and
   override these generic defaults. */

.frame-type-text,
.frame-type-textpic,
.frame-type-textmedia,
.frame-type-html,
.ce-bodytext {
    color: var(--color-text-secondary);
    line-height: 1.75;
}

/* Paragraphs */
.frame-type-text p,
.frame-type-textpic p,
.frame-type-textmedia p,
.ce-bodytext p {
    margin-bottom: 1rem;
}

/* Links */
.frame-type-text a:not(.btn),
.frame-type-textpic a:not(.btn),
.frame-type-textmedia a:not(.btn),
.ce-bodytext a:not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
}

.frame-type-text a:hover:not(.btn),
.frame-type-textpic a:hover:not(.btn),
.frame-type-textmedia a:hover:not(.btn),
.ce-bodytext a:hover:not(.btn) {
    color: var(--color-primary-dark);
}

/* Lists */
.frame-type-text ul,
.frame-type-text ol,
.frame-type-textpic ul,
.frame-type-textpic ol,
.frame-type-textmedia ul,
.frame-type-textmedia ol,
.ce-bodytext ul,
.ce-bodytext ol {
    margin: 0 0 1rem 0;
    padding-left: 1.4rem;
}

.frame-type-text ul,
.frame-type-textpic ul,
.frame-type-textmedia ul,
.ce-bodytext ul {
    list-style: disc;
}

.frame-type-text ol,
.frame-type-textpic ol,
.frame-type-textmedia ol,
.ce-bodytext ol {
    list-style: decimal;
}

.frame-type-text li,
.frame-type-textpic li,
.frame-type-textmedia li,
.ce-bodytext li {
    margin-bottom: 0.35rem;
}

/* Blockquotes */

.ce-bodytext blockquote {
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 0 0.5rem 1rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem 0;
}

/* Tables — generic, works with or without the `.ce-table` class */

.frame-type-text table,
.frame-type-textpic table,
.frame-type-textmedia table,
.ce-bodytext table,
.ce-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}


.frame-type-text table th,
.frame-type-text table td,
.frame-type-textpic table th,
.frame-type-textpic table td,
.ce-bodytext table th,
.ce-bodytext table td,
.ce-table th,
.ce-table td {
    border: 1px solid var(--color-border);
    padding: 0.6rem 0.8rem;
    text-align: left;
}


.frame-type-text table th,
.frame-type-textpic table th,
.ce-bodytext table th,
.ce-table th {
    background: var(--color-bg-gray);
    font-weight: 700;
}

/* Images / gallery */
.ce-textpic .ce-gallery,
.ce-image .ce-gallery {
    margin-bottom: 1rem;
}

/* ---- 20d. Section-Specific Hooks ---- */

/* Aktuelles section */

/* ---- Nachrichten-Übersicht (News Index) ---- */

/* Category filter bar */
.news-kategorien-filter {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 0.875rem 0;
}

.news-kategorien-filter .frame {
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--container-padding, 1rem);
}

/* Page header (Nachrichtenüberblick) above the grid */
.news-kategorien-filter ~ .frame-type-header {
    background: var(--color-cream, var(--color-sand));
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.news-kategorien-filter ~ .frame-type-header > * {
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--container-padding, 1rem);
}

.news-kategorien-filter ~ .frame-type-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.news-kategorien-filter ~ .frame-type-header h3 {
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

/* Divider between header and grid */
.news-kategorien-filter ~ .frame-type-div {
    display: none;
}

/* Two-column layout: 66/33 grid ratio */
.grid-ratio-66-33 > .grid-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .grid-ratio-66-33 > .grid-row {
        grid-template-columns: 1fr 320px;
        gap: 3rem;
    }
}

/* News card grid inside the news list */
.grid-ratio-66-33 .news-list-view {
    display: grid;
    gap: var(--gap);
}

@media (min-width: 576px) {
    .grid-ratio-66-33 .news-list-view {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-ratio-66-33 .news-list-view .card__image-link img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.grid-ratio-50-50 > .grid-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .grid-ratio-50-50 > .grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Three-column layout: 33/33/33 grid ratio */
.grid-container-three_columns > .grid-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .grid-container-three_columns > .grid-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3rem;
    }
}


/* Pagination: f3-widget-paginator */
.f3-widget-paginator {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.f3-widget-paginator li {
    display: inline-flex;
}

.f3-widget-paginator li a,
.f3-widget-paginator li.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}

.f3-widget-paginator li a {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.f3-widget-paginator li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.f3-widget-paginator li.current {
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-white);
}


.f3-widget-paginator li.previous a:not([href]) {
    opacity: 0.4;
    pointer-events: none;
}




.frame-card h2 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.6rem;
}

.frame-card p {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Sidebar: price well (Probe-Abo box) */
.frame-card .well {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.85rem;
    background: var(--color-sand);
    border-radius: 6px;
    margin-bottom: 1.1rem;
}

.frame-card .well .p {
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
    display: block;
}

.frame-card .well .h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
}

/* Sidebar newsletter iframe */

/* Sidebar: current issue image */
.frame-card .ce-textpic,
.frame-card .ce-gallery,
.frame-card .ce-outer,
.frame-card .ce-inner,
.frame-card .ce-row,
.frame-card .ce-column {
    width: 100%;
    max-width: 100%;
}

.frame-card .ce-gallery {
    margin-bottom: 0.85rem;
}

.frame-card .ce-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.25), 1px 1px 3px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.frame-card .ce-gallery img:hover {
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.3), 1px 1px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Wrap gridelements frame in container on the news index page */
.news-kategorien-filter ~ .frame-type-gridelements_pi1 {
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--container-padding, 1rem);
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Nachrichtenbrief */
.nachrichtenbrief {
    background: var(--color-bg-gray);
    padding: var(--section-padding) 0;
}

.nachrichtenbrief .grid-container-two_columns .grid-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .nachrichtenbrief .grid-container-two_columns .grid-row,
    .nachrichtenbrief .grid-container-two_columns.grid-ratio-50-50 .grid-row {
        grid-template-columns: 1.5fr 1fr;
    }
}

.nachrichtenbrief .grid-column-0 .news-list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bauernstimme (Aktuelle Ausgabe) */
.bauernstimme {
    background: var(--color-white);
    padding: var(--section-padding) 0;
}

.bauernstimme .grid-container-two_columns .grid-row {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .bauernstimme .grid-container-two_columns .grid-row {
        grid-template-columns: 240px 1fr;
    }
}

.bauernstimme .grid-column-0 .frame-type-image,
.bauernstimme .grid-column-0 .ce-image {
    margin: 0;
}

.bauernstimme .grid-column-0 figure,
.bauernstimme .grid-column-0 .ce-gallery,
.bauernstimme .grid-column-0 .ce-outer,
.bauernstimme .grid-column-0 .ce-inner,
.bauernstimme .grid-column-0 .ce-row,
.bauernstimme .grid-column-0 .ce-column {
    margin: 0;
    padding: 0;
}

.bauernstimme .grid-column-0 img {
    display: block;
    max-width: 240px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 2px;
    outline: 1px solid #555;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.25),
    1px 1px 3px rgba(0, 0, 0, 0.15);
}

.bauernstimme .grid-column-0 figcaption {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 1rem;
    text-align: center;
}

.bauernstimme .grid-column-1 {
    display: flex;
    flex-direction: column;
}

.bauernstimme .grid-column-1 .frame-type-text,
.bauernstimme .grid-column-1 .ce-bodytext {
    margin: 0;
}

.bauernstimme .grid-column-1 h2,
.bauernstimme .grid-column-1 h3,
.bauernstimme .grid-column-1 h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-card-title);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 1.25rem 0 0.4rem;
    color: var(--color-text);
}

.bauernstimme .grid-column-1 h2 a,
.bauernstimme .grid-column-1 h3 a,
.bauernstimme .grid-column-1 h4 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

.bauernstimme .grid-column-1 h2 a:hover,
.bauernstimme .grid-column-1 h3 a:hover,
.bauernstimme .grid-column-1 h4 a:hover {
    color: var(--color-primary);
}

.bauernstimme .grid-column-1 p {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 0.25rem;
}

.bauernstimme .grid-column-1 .ce-bodytext > :first-child,
.bauernstimme .grid-column-1 h2:first-child,
.bauernstimme .grid-column-1 h3:first-child,
.bauernstimme .grid-column-1 h4:first-child {
    margin-top: 0;
}

.bauernstimme .grid-column-1 hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0 0;
    height: 0;
}

/* Über uns */

/* Section Dark (Abo full-bleed) */
.section--dark {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.section--dark .section__title {
    color: var(--color-white);
}

.section--dark .section__title::after {
    background: rgba(255, 255, 255, 0.4);
}

/* Legal Content */

/* Abo Newsletter Section */

/* ============================================
   21. NEWS DETAIL PAGE (TYPO3 news extension)
   Bridges .news-single markup to match
   the article-detail design (section 15).
   ============================================ */

/* ---- 21a. Overall layout ---- */

/* The grid-ratio-66-33 on the detail page acts as article-layout */
.grid-ratio-66-33 .grid-column-0 .news-single {
    padding-top: 0.5rem;
}

.news-single .article {
    padding-bottom: 0;
    margin-bottom: 0;
}

.news-single .article::after {
    display: none;
}

/* ---- 21b. Article header (title) ---- */
.news-single .header {
    margin-bottom: 1rem;
}

.news-single .header h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.18;
    color: var(--color-text);
    margin-bottom: 0;
}

/* ---- 21c. Article meta (date/author) ---- */
/* Higher specificity to override news-basic.css */
.grid-column-0 .news-single .footer {
    clear: both;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
}

.news-single .footer p {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
}

.news-single .footer span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.news-single .footer span:last-child {
    border-right: none;
}

/* ---- 21d. Teaser text ---- */
.grid-column-0 .news-single .teaser-text {
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 400;
    font-style: italic;
    color: #000;
    margin-bottom: 1.25rem;
}

/* ---- 21e. Hero image ---- */
/* Higher specificity to override news-basic.css (loaded later) */
.grid-column-0 .news-single .article .news-img-wrap {
    float: none;
    width: 100%;
    margin: 0 0 2rem 0;
    background: none;
    padding: 0;
    border: none;
}

.grid-column-0 .news-single .article .news-img-wrap a {
    float: none;
    padding: 0;
    border: none;
    background: none;
    display: block;
}

.grid-column-0 .news-single .article .news-img-wrap img {
    float: none;
    width: 100%;
    height: clamp(220px, 45vw, 480px);
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.grid-column-0 .news-single .article .news-img-wrap .outer {
    float: none;
}

.grid-column-0 .news-single .news-img-caption {
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

/* ---- 21f. Article body text ---- */
.news-single .news-text-wrap {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.news-single .news-text-wrap p {
    font-size: 1.0625rem;
    margin-bottom: 1.4rem;
}

.news-single .news-text-wrap h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    margin: 2.25rem 0 1rem;
}

.news-single .news-text-wrap h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
}

.news-single .news-text-wrap a {
    color: var(--color-primary);
    text-decoration: underline;
}

.news-single .news-text-wrap a:hover {
    color: var(--color-primary-dark);
}

.news-single .news-text-wrap blockquote {
    border-left: 4px solid var(--color-primary);
    background: var(--color-sand);
    border-radius: 0 6px 6px 0;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.news-single .news-text-wrap blockquote p {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 0.6rem;
}

/* ---- 21g. Back link ---- */
.news-single .news-backlink-wrap {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.news-single .news-backlink-wrap a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--color-primary);
    transition: color var(--transition);
}

.news-single .news-backlink-wrap a::before {
    content: '←';
}

.news-single .news-backlink-wrap a:hover {
    color: var(--color-primary-dark);
}

/* ---- 21h. Related wrap (tags/share footer) ---- */
.news-single .news-related-wrap {
    display: block;
    margin-top: 0;
    border: none;
    padding: 0;
}

.news-single .news-related {
    width: 100%;
    display: block;
    padding: 15px 0;
    border: none;
}



.frame-card .frame-type-news_newsdetail > header h3 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.6rem;
    display: inline;
    border-bottom: none;
}



/* ---- 21l. Pager (prev/next) ---- */
.news-single .pager {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: var(--fs-small);
}

.news-single .pager a {
    color: var(--color-primary);
    transition: color var(--transition);
}

.news-single .pager a:hover {
    color: var(--color-primary-dark);
}

/* ============================================
   22. GRID LAYOUT: 33-66 RATIO
   ============================================ */
@media (min-width: 768px) {
    .grid-ratio-33-66 > .grid-row {
        grid-template-columns: 1fr 2fr;
    }
}

/* ============================================
   23. GENERIC: DIVIDER
   ============================================ */
.ce-div {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.5rem 0;
}

/* ============================================
   24. GENERIC: IN-CONTENT HEADINGS (RTE)
   ============================================ */
/* Headings authored inside the rich-text body (not the content-element
   title in `.frame > header`). Styled generically by element across all
   text-bearing frame types. */
.frame-type-text h3,
.frame-type-text h4,
.frame-type-textpic h3,
.frame-type-textpic h4,
.frame-type-textmedia h3,
.frame-type-textmedia h4,
.ce-bodytext h3,
.ce-bodytext h4,
.ce-bodytext h5,
.ce-bodytext h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin: 1.25rem 0 0.375rem;
}

.frame-type-text h3,
.frame-type-textpic h3,
.frame-type-textmedia h3,
.ce-bodytext h3 {
    font-size: 1rem;
}

.frame-type-text h4,
.frame-type-textpic h4,
.frame-type-textmedia h4,
.ce-bodytext h4 {
    font-size: 0.95rem;
}


.ce-bodytext h5,
.ce-bodytext h6 {
    font-size: 0.875rem;
}

/* ============================================
   25. GENERIC: TYPO3 FORM FRAMEWORK
   ============================================ */

/* ============================================
   26. SUBPAGES: Kontakt, Impressum,
       Datenschutz, AGB
   ============================================ */

/* ---- 26a. Page header subtitle ---- */
:is(.page-kontakt, .page-impressum, .page-datenschutz, .page-agbs)
.frame-type-header header h3 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
}

/* ---- 26b. Kontakt intro text (subtitle paragraph) ---- */
.page-kontakt .frame-type-header + .frame-type-text {
    margin-top: 0;
}

.page-kontakt .frame-type-header + .frame-type-text p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
}

/* ---- 26c. Content section headings ---- */
/* Override the large section-title style for content h2s */
:is(.page-kontakt, .page-impressum, .page-datenschutz, .page-agbs)
.frame-type-text > header h2,
:is(.page-kontakt, .page-impressum, .page-datenschutz, .page-agbs)
.frame-type-form_formframework > header h2 {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin: 0 0 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
}

/* ---- 26d. Hide TYPO3 form "Step" heading ---- */
:is(.page-kontakt, .page-impressum, .page-datenschutz, .page-agbs)
form > h2 {
    display: none;
}

/* cards */

.frame.frame-card {
    background: var(--color-white);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
}

#main > .frame-default:first-child,
#main > .breadcrumb-bar + .frame-default {
    margin-top: 4em;
}

#main > .frame-default:last-child {
    margin-bottom: 4em;
}

/* sticky */
@media (min-width: 1024px) {
    .sticky {
        position: sticky;
        top: calc(var(--header-h, 160px) + 1.5rem);
    }
}

/* ---- LOGIN & PASSWORT (EXT:felogin) ---- */
.frame-type-felogin_login,
.frame-type-felogin_passwordrecovery {
    max-width: 480px;
    margin-block: 0.5rem 3rem;
    padding: 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.frame-type-felogin_login h1,
.frame-type-felogin_passwordrecovery h1 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: var(--line-height-tight);
    margin-bottom: 1rem;
}
.frame-type-felogin_login h3,
.frame-type-felogin_passwordrecovery h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}
.frame-type-felogin_login > p,
.frame-type-felogin_passwordrecovery > p {
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}
.frame-type-felogin_login fieldset,
.frame-type-felogin_passwordrecovery fieldset {
    display: grid;
    gap: 1.1rem;
    border: 0;
    padding: 0;
    margin: 0;
}
.frame-type-felogin_login legend,
.frame-type-felogin_passwordrecovery legend {
    padding: 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
}
.frame-type-felogin_login label,
.frame-type-felogin_passwordrecovery label {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
}
.frame-type-felogin_login input:not([type=checkbox]):not([type=hidden]):not([type=submit]),
.frame-type-felogin_passwordrecovery input:not([type=checkbox]):not([type=hidden]):not([type=submit]) {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    transition: border-color var(--transition);
}
.frame-type-felogin_login input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus,
.frame-type-felogin_passwordrecovery input:not([type=checkbox]):not([type=hidden]):not([type=submit]):focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.frame-type-felogin_login input[type=checkbox],
.frame-type-felogin_passwordrecovery input[type=checkbox] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    margin-top: 0.35rem;
}
.frame-type-felogin_login input[type=submit],
.frame-type-felogin_passwordrecovery input[type=submit] {
    width: 100%;
    padding: 0.9rem 2rem;
    font: inherit;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.frame-type-felogin_login input[type=submit]:hover,
.frame-type-felogin_passwordrecovery input[type=submit]:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.frame-type-felogin_login form + a,
.frame-type-felogin_passwordrecovery form + a {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-primary);
    font-size: var(--fs-small);
    font-weight: 600;
}
.frame-type-felogin_login form + a:hover,
.frame-type-felogin_passwordrecovery form + a:hover {
    text-decoration: underline;
}
.felogin-hidden { display: none; }
@media (max-width: 559px) {
    .frame-type-felogin_login,
    .frame-type-felogin_passwordrecovery { padding: 1.25rem; }
}

/* ---- KONTAKTFORMULAR (EXT:form) ---- */
.frame-type-form_formframework form {
    max-width: 640px;
}
.frame-type-form_formframework .form-group {
    margin-bottom: 1.1rem;
}
.frame-type-form_formframework .control-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--fs-small);
    font-weight: 600;
}
.frame-type-form_formframework .required {
    color: var(--color-accent-warm);
}
.frame-type-form_formframework .form-control {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    transition: border-color var(--transition);
}
.frame-type-form_formframework .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.frame-type-form_formframework textarea.form-control {
    min-height: 10rem;
    resize: vertical;
}
.frame-type-form_formframework select.form-control {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}
.frame-type-form_formframework input[type=checkbox],
.frame-type-form_formframework input[type=radio] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}
/* Checkbox-/Radio-Zeilen: Label steht neben dem Input */
.frame-type-form_formframework .checkbox label,
.frame-type-form_formframework .radio label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--fs-body);
    font-weight: 400;
}
/* Validierung */
.frame-type-form_formframework .has-error .form-control {
    border-color: var(--color-accent-warm);
}
.frame-type-form_formframework .help-block {
    margin-top: 0.3rem;
    font-size: var(--fs-small);
    color: var(--color-accent-warm);
}
.frame-type-form_formframework .alert-danger {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-accent-warm);
    border-radius: 3px;
    color: var(--color-accent-warm);
    font-size: var(--fs-small);
}
/* Absenden-Button (EXT:form nutzt .btn.btn-primary, nicht .btn--primary) */
.frame-type-form_formframework .btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.frame-type-form_formframework .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container {
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px);
}

.userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container .userpopup__content h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 30px);
    margin: 0;
}

.userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container .userpopup__content {
    padding-top: 10px;
    padding-bottom: 8px;
}

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

    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container {
        background: rgba(255, 255, 255, .5);

    }
    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container .userpopup__header{
        align-items: flex-start;
        justify-content: space-between;
        display: flex;
        flex-direction: column
    }

    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container h1 {
        font-size: 1rem;
        width:auto;

    }

    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container h2 {
        font-size: 0.85rem
    }
    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container .userpopup__content {
        padding: 16px;
    }

    .userpopup__wrapper.userpopup__sticky:not(.userpopup--visible) .userpopup__container .userpopup__content h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 30px);
        margin: 0 0 4px;
    }

}


.ce-border img, .ce-border iframe {
    border: 1px solid var(--color-border);
    padding: 0px;
}

.frame-card .ce-gallery .ce-border  img:hover {
    transform: none;
}