/* ==========================================================================
   crm manufaktur – Template Stylesheet
   Joomla 6 Compatible
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Global Variables)
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --color-accent:          #00A4A9;
    --color-accent-hover:    #007F84;
    --color-accent-light:    var(--color-bg);
    --color-accent-mid:      #33B8BC;

    /* Neutral Palette */
    --color-bg:              #F5F7F8;    
    --color-bg-alt:          #EDF0F2;
    --color-bg-dark:         #1C2B3A;
    --color-bg-dark-alt:     #42505d; /* Hintergrundfarbverlauf dunkel – leicht aufgehellt gegenüber --color-bg-dark */
    --color-bg-footer:       #162230;
    --color-bg-surface:         #FFFFFF;
    --color-bg-surface-alt:     #EBF4F4;
    --color-bg-page: #F5F7F8;

    /* Text */
    --color-text:            #1A1F2E; /* Überschriften Farbe */
    --color-text-muted:      #6B7280; /* Textfarbe */
    --color-text-inverted:   #EBF4F4; /* invertierte Überschriften Farbe */
    --color-text-muted-inverted:      #C1C5CB; /* invertierte Textfarbe */

    /* Borders & Dividers */
    --color-border:          #c0c0c9; /* Randfarbe */
    --color-border-inverted:   #D1D5DB; /* invertierte Randfarbe */

    /* Typography */
    --font-display:          'DM Sans', 'Segoe UI', Arial, sans-serif;
    --font-body:             'DM Sans', 'Segoe UI', Arial, sans-serif;
    --font-mono:             'JetBrains Mono', 'Courier New', monospace;

    /* Font Sizes */
    --text-xs:               0.75rem;
    --text-sm:               0.875rem;
    --text-base:             1rem;
    --text-md:               1.125rem;
    --text-lg:               1.25rem;
    --text-xl:               1.5rem;
    --text-2xl:              1.875rem;
    --text-3xl:              2.25rem;
    --text-4xl:              3rem;
    --text-5xl:              3.75rem;

    /* Font Weights */
    --weight-normal:         400;
    --weight-medium:         500;
    --weight-semibold:       600;
    --weight-bold:           700;

    /* Line Heights */
    --leading-tight:         1.2;
    --leading-snug:          1.35;
    --leading-normal:        1.6;
    --leading-relaxed:       1.75;

    /* Spacing Scale */
    --space-1:               0.25rem;
    --space-2:               0.5rem;
    --space-3:               0.75rem;
    --space-4:               1rem;
    --space-5:               1.25rem;
    --space-6:               1.5rem;
    --space-8:               2rem;
    --space-10:              2.5rem;
    --space-12:              3rem;
    --space-16:              4rem;
    --space-20:              5rem;
    --space-24:              6rem;
    --space-32:              8rem;

    /* Layout */
    --container-max:         1200px;
    --container-wide:        1440px;
    --container-narrow:      800px;

    /* Border Radius */
    --radius-sm:             2px;
    --radius-md:             4px;
    --radius-lg:             6px;
    --radius-xl:             8px;
    --radius-2xl:            12px;
    --radius-full:           4px;

    /* Shadows */
    --shadow-sm:             0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:             0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg:             0 10px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-xl:             0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);
    --shadow-accent:         0 8px 32px rgba(0,164,169,0.22);

    /* Kategorie-Karten Kopffarben – abgeleitet von --color-accent (#00A4A9)
       card-1: ~20% dunkler, card-2: Accent selbst, card-3: ~40% dunkler */
    --color-cat-card-1:      #007B80;
    --color-cat-card-2:      var(--color-accent);
    --color-cat-card-3:      #005F6B;




    /* Status-Farben (Alert-Komponenten) */
    --color-success-bg:      #D1FAE5;
    --color-success-text:    #065F46;
    --color-success-border:  #A7F3D0;
    --color-warning-bg:      #FEF3C7;
    --color-warning-text:    #92400E;
    --color-warning-border:  #FDE68A;
    --color-error-bg:        #FEE2E2;
    --color-error-text:      #991B1B;
    --color-error-border:    #FECACA;
    --color-info-bg:         #DBEAFE;
    --color-info-text:       #1E40AF;
    --color-info-border:     #BFDBFE;

    /* Logofarbe – für optionale Verwendung in UI-Elementen */
    --color-logo:            #878787;

    /* Transitions */
    --transition-fast:       150ms ease;
    --transition-base:       250ms ease;
    --transition-slow:       400ms ease;
    --transition-spring:     350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Navigation – Zustände */
    --color-nav-active-text:   #2E6B70;
    --color-nav-active-bg:     var(--color-bg);
    --color-nav-active-border: #00A4A9;
    --color-nav-hover-bg:      var(--color-bg-alt);

    /* Z-Index Scale */
    --z-below:               -1;
    --z-base:                0;
    --z-above:               10;
    --z-overlay:             100;
    --z-modal:               1000;
    --z-tooltip:             2000;

    /* Header Heights */
    --header-top-height:     40px;
    --header-main-height:    80px;
 
    /* Lucide-Style Calendar Icon (16x16, stroke 2) – als Mask für currentColor */
    
    --icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    --icon-user: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");

}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

ul, ol {
    /*list-style: none;*/
}

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 {
    font-size: var(--text-4xl);
}
h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
    margin-top: var(--space-6);
}
h3 {
    font-size: var(--text-xl);
}
h4 {
    font-size: var(--text-lg);
}
h5 {
    font-size: var(--text-md);
}
h6 {
    font-size: var(--text-md);
}

h2 em, h3 em, h4 em, h5 em, h6 em {
    font-style: italic;
    color: var(--color-accent);
}

p {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. Layout Utilities
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);       /* 1200px – Standard */
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* Auf sehr breiten Screens (>1440px) mehr Luft nutzen */
@media (min-width: 1440px) {
    .container {
        max-width: var(--container-wide);    /* 1440px */
    }
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    /*padding-block: var(--space-20);*/ //Das padding stört auf den Einzelseiten
}

.section--sm {
    padding-block: var(--space-12);
}

.section--lg {
    padding-block: var(--space-32);
}

/* --------------------------------------------------------------------------
   5. Header – Top Bar
   -------------------------------------------------------------------------- */
.header-top {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-top-height);
    display: flex;
    align-items: center;
}

.header-top .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.header-top .mod-menu,
.header-top nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.header-top .mod-menu ul,
.header-top nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.header-top .mod-menu a,
.header-top nav a {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.header-top .mod-menu a:hover,
.header-top nav a:hover {
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   6. Header – Main Navigation
   -------------------------------------------------------------------------- */
.header-main {
    background-color: var(--color-bg-surface);
    height: var(--header-main-height);
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.header-main.scrolled {
    box-shadow: var(--shadow-md);
}

.header-main .container {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--space-10);
}

/* Logo area */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-logo img {
    height: 48px;
    width: auto;
}

.header-logo-text {
    display: flex;
    flex-direction: column;
}

.header-logo-text .brand-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.header-logo-text .brand-sub {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

/* Main nav */
.header-nav {
    flex: 1;
    display: flex;
    align-items: stretch;
    height: 100%;
}

.header-nav .mod-menu ul,
.header-nav nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.header-nav .mod-menu a,
.header-nav nav a {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
}

.header-nav .mod-menu a:hover,
.header-nav nav a:hover,
.header-nav .mod-menu .current > a,
.header-nav nav .active > a {
    color: var(--color-text);
    background-color: var(--color-bg-alt);
}

.header-nav .mod-menu .current > a,
.header-nav nav .active > a {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

/* CTA in nav */
.nav-cta {
    margin-left: auto;
}

.nav-cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-accent);
    color: var(--color-text-inverted) !important;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--transition-base);
}

.nav-cta a:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    margin-left: auto;
}

.menu-toggle span {
    display: block;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 50%;
    transition: all var(--transition-base);
}

/* --------------------------------------------------------------------------
   7. Hero Section
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background-color: var(--color-bg);
    overflow: hidden;
    padding-block: var(--space-24) var(--space-20);
    border-bottom: 1px solid var(--color-border);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 75% 60%, rgba(0, 164, 169, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 15% 80%, rgba(0, 164, 169, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.2;
}

/* Grid pattern overlay */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,164,169,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,164,169,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: rgba(0,164,169,0.12);
    border: 1px solid rgba(0,164,169,0.28);
    color: var(--color-accent-mid);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    transition: all var(--transition-base);
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-badge:hover {
    transform: translateY(-4px);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

.hero-headline {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.hero-headline mark {
    background: none;
    color: var(--color-accent);
}

.hero-subline {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-width: 640px;
    margin-bottom: var(--space-10);
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-8);
    transition: all var(--transition-base);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

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

.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-sm {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-5);
}

.btn-lg {
    font-size: var(--text-md);
    padding: var(--space-5) var(--space-10);
}

.btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* Anker */

#addon_loesungen_bereits_im_einsatz {
  scroll-margin-top: 200px;
}

/* --------------------------------------------------------------------------
   9. Content Section (Joomla Blog Output)
   -------------------------------------------------------------------------- */
.content-section {
    /*background-color: var(--color-bg-surface);*/
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.section-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-accent);
}

.section-title {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.section-intro {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-width: 600px;
    margin-bottom: var(--space-12);
}

/* Joomla Blog / Article Output */
.joomla-content {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.blog, .com-content-category-blog {
    /* Reset Joomla defaults */
}

/* h1-Überschrift Kategorie + Kategoriebeschreibung*/
.category_teaser {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-24) var(--space-20);
}
#start .category_teaser {
    display: none;
}

/* Bestehendes (Zeile 716) – gap bleibt für mehrspaltige Layouts */
.blog-items, .com-content-category-blog__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

/* Einspaltig: kein Gap – hg_beitrag liegen direkt aneinander,
   Pfeil überlappt nahtlos den Nachfolger */
.com-content-category-blog .com-content-category-blog__items:has(.hg_beitrag) {
    gap: 0;
}
/* Abstand wird in diesem Fall im .hg_beitrag gesetzt */
.com-content-category-blog .com-content-category-blog__items:has(.hg_beitrag) .hg_beitrag {
    padding: var(--space-8) 0;
}

/* Mehrspaltige Blog-Items (columns-2/3/4) – Joomla setzt diese Klasse
   automatisch auf den Items-Container, wenn der Menüpunkt 2+ Spalten hat.
   Items-leading bleibt bewusst ohne columns-*-Klasse → 1 Spalte (Default). */
.com-content-category-blog__items.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.com-content-category-blog__items.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.com-content-category-blog__items.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Mobile: alles wieder einspaltig, damit Karten lesbar bleiben */
@media (max-width: 768px) {
    .com-content-category-blog__items.columns-2,
    .com-content-category-blog__items.columns-3,
    .com-content-category-blog__items.columns-4 {
        grid-template-columns: 1fr;
    }
}


.blog-item, .com-content-category-blog__item {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: var(--space-10);
    transition: all var(--transition-base);
}

/* Im 1-spaltigen Blog übernimmt .hg_beitrag Hintergrund/Rahmen/Padding */
.hg_beitrag .blog-item,
.hg_beitrag .com-content-category-blog__item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
}



.blog-item .page-header h2,
.com-content-category-blog__item .page-header h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.blog-item .page-header h2 a,
.com-content-category-blog__item .page-header h2 a {
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.blog-item .page-header h2 a:hover,
.com-content-category-blog__item .page-header h2 a:hover {
    color: var(--color-accent);
}

.article-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-inverted);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.article-info dt {
    display: none;
}

.article-info dd {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.article-info .icon-calendar::before {
    content: '📅';
    font-style: normal;
}

.item-content h2 {

}

.item-content h2:first-child {
    margin-top: 0;
}

.item-content p {

    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.item-content ul {
    list-style: none;
    margin-bottom: var(--space-6);
}

.item-content ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-md);
    color: var(--color-text-muted);

}

.hg--dunkel .item-content ul li  {
    color: var(--color-text-muted-inverted);
}

.item-content ul li:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   10. Services Section
   -------------------------------------------------------------------------- */
.services-section {
    background-color: var(--color-bg-alt);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
}

.service-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-mid));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 52px;
    height: 52px;
    background-color: var(--color-accent-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    font-size: 24px;
    transition: all var(--transition-base);
}

.service-card:hover .service-icon {
    background-color: var(--color-accent);
}

.service-card:hover .service-icon svg {
    color: var(--color-text-inverted);
}

.service-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
    transition: color var(--transition-base);
}

.service-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.service-card p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
}

.services-cta {
    margin-top: var(--space-10);
    text-align: center;
}

/* --------------------------------------------------------------------------
   11. Cases / Praxis Section
   -------------------------------------------------------------------------- */
.cases-section {
    background-color: var(--color-bg-surface);
    overflow: hidden;
}

.cases-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.cases-intro-col {
}

.cases-list-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.case-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.case-item:hover {
    background-color: var(--color-bg-surface);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.case-number {
    width: 44px;
    height: 44px;
    background-color: var(--color-accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.case-item:hover .case-number {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
}

.case-text {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: var(--leading-snug);
    padding-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   12. About / Über Uns Section
   -------------------------------------------------------------------------- */
.about-section {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-dark-alt) 100%);
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 164, 169, 0.10) 0%, transparent 60%);
    pointer-events: none;
}

.about-section .section-label {
    color: var(--color-accent-mid);
}

.about-section .section-label::before {
    background-color: var(--color-accent-mid);
}

.about-section .section-title {
    color: var(--color-text-inverted);
}

.about-section .section-intro {
    color: rgba(255,255,255,0.6);
    max-width: 100%;
    margin-bottom: 0;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.about-text-col {
    position: relative;
    z-index: 1;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.about-feature-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.about-feature p {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.65);
    margin-bottom: 0;
}

.about-stats-col {
    position: relative;
    z-index: 1;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: all var(--transition-base);
}

.stat-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(0,164,169,0.28);
}

.stat-number {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   13. Contact Section
   -------------------------------------------------------------------------- */
.contact-section {
    /*background-color: var(--color-bg-alt);*/
}

.contact-card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-mid));
}

.contact-card .section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.contact-card p {
    margin-bottom: var(--space-8);
    font-size: var(--text-md);
}

.contact-email-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    padding: var(--space-4) var(--space-8);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    margin-bottom: var(--space-6);
}

.contact-email-link:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    box-shadow: var(--shadow-accent);
    transform: translateY(-2px);
}

.contact-note {
    font-size: var(--text-sm);
    color: var(--color-text-inverted);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-bg-dark);
    color: rgba(255,255,255,0.55);
    padding-top: var(--space-16);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ── Brand-Spalte (Logo + Beschreibung) ───────────────────────────── */
.footer-brand .mod-custom p {
    margin-bottom: var(--space-3);
}

.footer-brand .mod-custom p:last-child {
    margin-bottom: 0;
}

.footer-brand .mod-custom img {
    max-width: 180px;
    height: auto;
    display: block;
    opacity: 0.85;
}

.footer-brand .mod-custom p + p {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.45);
    line-height: var(--leading-relaxed);
}

/* ── Info-Spalten: gemeinsame Basis (1–3) ─────────────────────────── */
.footer-info .mod-custom p {
    margin-bottom: var(--space-3);
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
}

.footer-info .mod-custom p:last-child {
    margin-bottom: 0;
}

/* Alle Links */
.footer-info a {
    font-size: var(--text-sm);
    color: var(--color-text-inverted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-info a:hover {
    color: var(--color-accent);
}

/* Spaltenüberschrift: erster Absatz / <strong> */
.footer-info .mod-custom p:first-child,
.footer-info .mod-custom p:first-child a {
/*    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-5);*/
}

.footer-info .mod-custom p:first-child a:hover {
    color: var(--color-accent);
}

.footer-info3 .mod-custom p:first-child strong {
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Kategorie-Icons (footer-info1) ───────────────────────────────── */
/* Links als Zeile: Icon links, Text rechts, kein Unterlaufen */
.footer-info1 .mod-custom p:not(:first-child) a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.footer-info1 .mod-custom img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm, 6px);
    padding: 6px;
    opacity: 0.7;
    transition: opacity var(--transition-fast),
        background var(--transition-fast);
}

.footer-info1 .mod-custom a:hover img {
    opacity: 1;
    background: rgba(255,255,255,0.14);
}

/* ── Navigations-Spalte (footer-info2) ────────────────────────────── */
.footer-info2 .mod-custom p:not(:first-child) {
    padding: var(--space-1) 0;
}

/* ── Kontakt-Spalte (footer-info3) ────────────────────────────────── */
.footer-info3 .mod-custom p:not(:first-child) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    padding: var(--space-1) 0;
}

.footer-info3 .mod-custom img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.5;
    margin-top: 2px; /* optische Zentrierung zur ersten Textzeile */
}

/* Footer nav bar */
.footer-nav-bar {
    padding-block: var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-nav-bar .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.footer-nav-bar .mod-menu ul,
.footer-nav-bar nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
}

.footer-nav-bar .mod-menu a,
.footer-nav-bar nav a {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.footer-nav-bar .mod-menu a:hover,
.footer-nav-bar nav a:hover {
    color: rgba(255,255,255,0.8);
}

/* Copyright bar */
.footer-copyright {
    padding-block: var(--space-5);
}

.footer-copyright .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright {
    text-align: center;
}

.copyright .webadrett {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.3);
    margin-bottom: 0;
}

.copyright .webadrett a {
    color: rgba(255,255,255,0.4);
    transition: color var(--transition-fast);
}

.copyright .webadrett a:hover {
    color: var(--color-accent);
}

.copyright .webadrett img {
    display: inline;
    height: 14px;
    width: auto;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    vertical-align: middle;
}

.copyright .webadrett a:hover img {
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   15. Scroll-to-Top Button
   -------------------------------------------------------------------------- */
.scroll-top {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-8);
    width: 48px;
    height: 48px;
    background-color: var(--color-accent);
    color: var(--color-text-inverted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-accent);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all var(--transition-base);
    z-index: var(--z-overlay);
    border: none;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,164,169,0.4);
}

.scroll-top svg {
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------------------
   16. Joomla System Messages
   -------------------------------------------------------------------------- */
.system-unpublished {
    display: none;
}

#system-message-container {
    position: fixed;
    top: calc(var(--header-top-height) + var(--header-main-height) + var(--space-4));
    right: var(--space-4);
    z-index: var(--z-modal);
    max-width: 400px;
}

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}
.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}
.alert-error   {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}
.alert-info    {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    font-size: var(--text-lg);
    line-height: 1;
    transition: opacity var(--transition-fast);
}

.alert-close:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   17. Responsive Design
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .about-layout,
    .cases-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .about-stats-col {
        order: -1;
    }
}

@media (max-width: 768px) {
    :root {
        --header-main-height: 64px;
    }

    .header-top {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .header-nav {
        display: none;
        position: fixed;
        top: var(--header-main-height);
        left: 0;
        right: 0;
        background: var(--color-bg-surface);
        padding: var(--space-6);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        z-index: var(--z-overlay);
    }

    .header-nav.open {
        display: flex;
        flex-direction: column;
    }

    .header-nav .mod-menu ul,
    .header-nav nav ul {
        flex-direction: column;
        gap: var(--space-1);
    }

    .header-nav .mod-menu a,
    .header-nav nav a {
        display: block;
        padding: var(--space-3) var(--space-4);
    }

    .nav-cta {
        margin-left: 0;
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border);
    }

    .hero {
        padding-block: var(--space-16) var(--space-12);
    }

    .section {
        /*padding-block: var(--space-12);*/ //Das padding stört auf den Einzelseiten
    }

    .section--lg {
        padding-block: var(--space-16);
    }

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

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .contact-card {
        padding: var(--space-8) var(--space-6);
    }

    .contact-email-link {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: var(--space-4);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-6);
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   18. Animations & Utilities
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to   {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease both;
}

.animate-delay-100 {
    animation-delay: 0.1s;
}
.animate-delay-200 {
    animation-delay: 0.2s;
}
.animate-delay-300 {
    animation-delay: 0.3s;
}
.animate-delay-400 {
    animation-delay: 0.4s;
}

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

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
    .header-top,
    .scroll-top,
    .nav-cta {
        display: none;
    }

    .hero {
        padding-block: var(--space-8);
    }
}

/* --------------------------------------------------------------------------
   20. Joomla Module Styles – Logo & Navigation
   -------------------------------------------------------------------------- */

/* --- Logo (mod-custom in header-logo) --- */
.header-logo .mod-custom,
.header-logo .mod-custom p {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.header-logo .mod-custom img {
    height: 75px;
    width: auto;
    display: block;
}

/* --- Haupt-Navigation --- */

/* Reset Joomla defaults */
.header-nav .mod-menu__sub,
.header-nav .list-unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level ul */
.header-nav .mod-list {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

/* Top-level li */
.header-nav .nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Top-level links */
.header-nav .nav-item > a {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    padding: 0 var(--space-4);
    border-radius: 0;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.header-nav .nav-item > a:hover {
    color: var(--color-accent);
    background-color: var(--color-bg-alt);
    border-bottom-color: var(--color-accent);
}

/* Aktiver / aktueller Menüpunkt */
.header-nav .nav-item.active > a,
.header-nav .nav-item.current > a {
    color: var(--color-nav-active-text);
    background-color: var(--color-nav-active-bg);
    border-bottom-color: var(--color-nav-active-border);
}

/* Desktop: Toggle-Button verstecken, Hover reicht */
.header-nav .mod-menu__toggle-sub {
    display: none;
}

/* ==========================================================================
   Dropdown-Navigation & Kategorien-Karten
   Beide Blöcke teilen dieselbe visuelle Sprache (Icon + farbiger Kopf + Text).
   Änderungen hier und in Abschnitt 23 (Kategorien-Sektion) aufeinander abstimmen.
   ========================================================================== */

/* --- Dropdown Container --- */
.header-nav .mod-menu__sub {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 560px;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    z-index: var(--z-overlay);
    pointer-events: none;
}

/* Dropdown öffnen (.is-open gesetzt via JS) */
.header-nav .nav-item.is-open > .mod-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Dropdown Item-Links (wie category-card, Abschnitt 23) --- */
.header-nav .mod-menu__sub .nav-item > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-surface);
    padding: 0;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.header-nav .mod-menu__sub .nav-item > a:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

/* img: füllt den farbigen Kopfbereich – Kopffarben identisch mit Abschnitt 23 */
.header-nav .mod-menu__sub .nav-item > a img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: contain;
    padding: var(--space-5);
}

.header-nav .mod-menu__sub .nav-item.item-112 > a img {
    background-color: var(--color-cat-card-1);
}
.header-nav .mod-menu__sub .nav-item.item-113 > a img {
    background-color: var(--color-cat-card-2);
}
.header-nav .mod-menu__sub .nav-item.item-114 > a img {
    background-color: var(--color-cat-card-3);
}

/* Titel unter dem Kopfbereich */
.header-nav .mod-menu__sub .nav-item > a .image-title {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    padding: var(--space-3);
    line-height: var(--leading-snug);
    transition: color var(--transition-fast);
}

.header-nav .mod-menu__sub .nav-item > a:hover .image-title {
    color: var(--color-accent);
}

/* active/current */
.header-nav .mod-menu__sub .nav-item.active > a,
.header-nav .mod-menu__sub .nav-item.current > a {
    border-color: var(--color-accent);
}
.header-nav .mod-menu__sub .nav-item.active > a .image-title,
.header-nav .mod-menu__sub .nav-item.current > a .image-title {
    color: var(--color-accent);
}

/* Kleiner Dropdown-Pfeil am Parent */
.header-nav .nav-item.deeper > a::after,
.header-nav .nav-item.parent > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: var(--space-2);
    opacity: 0.6;
    transition: transform var(--transition-fast);
}

.header-nav .nav-item.is-open > a::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* --- Top-Bar Navigation (nav_top) --- */
.header-top .mod-list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.header-top .nav-item > a {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.header-top .nav-item > a:hover {
    color: var(--color-accent);
}

/* --- Footer Navigation (nav_general) --- */
.footer-nav-bar .mod-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav-bar .nav-item > a {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.footer-nav-bar .nav-item > a:hover {
    color: rgba(255,255,255,0.8);
}

/* --- Mobile Navigation --- */
@media (max-width: 768px) {

    .header-nav .mod-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .header-nav .nav-item {
        width: 100%;
    }

    .header-nav .nav-item > a {
        display: block;
        width: 100%;
        padding: var(--space-3) var(--space-4);
    }

    /* Mobile: Toggle-Button anzeigen */
    .header-nav .mod-menu__toggle-sub {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 4px;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

    .header-nav .mod-menu__toggle-sub[aria-expanded="true"] {
        color: var(--color-accent);
        transform: rotate(180deg);
    }

    /* Mobile Dropdown */
    .header-nav .mod-menu__sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--color-accent-light);
        border-radius: 0;
        background: var(--color-bg-alt);
        margin-left: var(--space-4);
        padding: var(--space-1) 0;
        display: none;
        pointer-events: auto;
    }

    .header-nav .mod-menu__sub[aria-hidden="false"] {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   21. Kachel-Layout (CSS-Klasse Seite: "kacheln")
   -------------------------------------------------------------------------- */

#kacheln .content-section,
.page-kacheln .content-section {
    background-color: var(--color-bg);
}

/* Grid */
#kacheln .com-content-category-blog__items,
.page-kacheln .com-content-category-blog__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-8);
    align-items: start;
}

/* Kachel */
#kacheln .com-content-category-blog__item,
.page-kacheln .com-content-category-blog__item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    margin-top: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

#kacheln .com-content-category-blog__item:hover,
.page-kacheln .com-content-category-blog__item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0,164,169,0.10), var(--shadow-md);
    transform: translateY(-3px);
}

/* Icon – absolut oben rechts, halb rausragend */
#kacheln .item-image,
.page-kacheln .item-image {
    position: absolute;
    top: -20px;
    right: var(--space-5);
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}

#kacheln .com-content-category-blog__item:hover .item-image,
.page-kacheln .com-content-category-blog__item:hover .item-image {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0,164,169,0.18);
}

#kacheln .item-image img,
.page-kacheln .item-image img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* Content */
#kacheln .item-content,
.page-kacheln .item-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* --- Reihenfolge: Titel → Tags → Beschreibung → Weiterlesen --- */
#kacheln .page-header,  .page-kacheln .page-header  {
    order: 1;
}
#kacheln .article-info, .page-kacheln .article-info {
    order: 2;
    display: none;
}
#kacheln .MsoNormal,    .page-kacheln .MsoNormal    {
    order: 3;
}
#kacheln .item-content > p:not(.readmore),
.page-kacheln .item-content > p:not(.readmore)      {
    order: 3;
}
#kacheln .tags,         .page-kacheln .tags         {
    order: 4;
}
#kacheln .readmore,     .page-kacheln .readmore     {
    order: 5;
}

/* Titel – dunkler Header-Balken */
#kacheln .page-header,
.page-kacheln .page-header {
    padding: 0 var(--space-20) 0 0;
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin: 0;
}


#kacheln .page-header h2,
.page-kacheln .page-header h2 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    margin: 0;
}

#kacheln .page-header h2 a,
.page-kacheln .page-header h2 a {
    display: flex;
    align-items: center;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    color: var(--color-text);
    transition: color var(--transition-fast);
}

#kacheln .page-header h2 a:hover,
.page-kacheln .page-header h2 a:hover {
    color: var(--color-accent);
}

/* Tags – unter dem Titel, mit Pulse-Punkt */
#kacheln .tags,
.page-kacheln .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-2) var(--space-5);
    padding: 0;
    list-style: none;
}

#kacheln .tags .list-inline-item,
.page-kacheln .tags .list-inline-item {
    margin: 0;
    padding: 0;
}

#kacheln .tags .btn-info,
.page-kacheln .tags .btn-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-1) var(--space-3);
    line-height: 1.6;
    text-decoration: none;
    transition: all var(--transition-fast);
}

#kacheln .tags .btn-info:hover,
.page-kacheln .tags .btn-info:hover {
    background: var(--color-bg-alt);
    color: var(--color-accent);
    border-color: var(--color-border);
}

/* Pulse-Punkt vor jedem Tag */
#kacheln .tags .btn-info::before,
.page-kacheln .tags .btn-info::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

/* Beschreibung */
#kacheln .MsoNormal,
.page-kacheln .MsoNormal {
    font-size: var(--text-md) !important;
    font-weight: var(--weight-normal) !important;
    color: var(--color-text) !important;
    line-height: 1.55 !important;
    margin: var(--space-4) var(--space-5) var(--space-3) !important;
}

#kacheln .MsoNormal em,
.page-kacheln .MsoNormal em {
    font-style: normal !important;
}

#kacheln .item-content > p:not(.readmore),
.page-kacheln .item-content > p:not(.readmore) {
    font-size: var(--text-md);
    color: var(--color-text);
    line-height: 1.55;
    margin: var(--space-4) var(--space-5) var(--space-3);
}

#kacheln .item-content > p em,
.page-kacheln .item-content > p em {
    font-style: normal;
}

/* Weiterlesen – volle Bodenleiste */
#kacheln .readmore,
.page-kacheln .readmore {
    margin: 0;
    padding: 0;
}

#kacheln .readmore .btn-secondary,
.page-kacheln .readmore .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    color: var(--color-accent);
    background: var(--color-bg-surface);
    border: none;
    border-top: 1px solid rgba(0, 164, 169, 0.18);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    transition: all var(--transition-fast);
}

#kacheln .readmore .btn-secondary:hover,
.page-kacheln .readmore .btn-secondary:hover {
    background: var(--color-accent);
    color: var(--color-text-inverted);
    border-color: var(--color-accent);
}

/* Joomla-Felder auf Kategorieseiten ausblenden */
#kacheln .fields-container,
.page-kacheln .fields-container {
    display: none;
}

/* Responsive */
@media (max-width: 900px) {
    #kacheln .com-content-category-blog__items,
    .page-kacheln .com-content-category-blog__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    #kacheln .com-content-category-blog__items,
    .page-kacheln .com-content-category-blog__items {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   22. Typewriter Animation
   -------------------------------------------------------------------------- */
.typewriter-wrap {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-width: 640px;
    margin-bottom: var(--space-10);
    min-height: 2em;
    display: flex;
    align-items: center;
    gap: 2px;
}

.typewriter-text {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.typewriter-cursor {
    color: var(--color-accent);
    font-weight: var(--weight-normal);
    animation: blink 1s step-end infinite;
    margin-left: 1px;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50%       {
        opacity: 0;
    }
}




/* ==========================================================================
   .kaertchen — 3-Spalten-Karten-Modul
   Globale Komponente für Custom-HTML-Module, deren Wrapper die Klasse
   .kaertchen trägt. Das Modul gibt eine <table><tbody><tr><td>…</td></tr></tbody></table>
   aus; via display:grid + display:contents wird die Tabelle auf ein
   3-Spalten-Grid gemappt – kein Override nötig, reines CSS-Mapping.
   Padding/Hintergrund liefert der umgebende Kontext (Section, Beitrag, …).
   ========================================================================== */
/* Hintergrund vor div.container und .kaertchen */
.kaertchen_hg {
    padding-block: var(--space-24) var(--space-20);
    background: var(--color-bg-surface);
}


/* Wrapper: Tabellen-Layout auf CSS Grid umstellen.
   display:contents auf tbody/tr macht die Tabellenstruktur für
   das Grid-System unsichtbar – alle Browser seit 2020 unterstützen das. */
.kaertchen .mod-custom table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    width: 100%;
    /* Browser-Standard-Abstände der Tabelle zurücksetzen */
    border-collapse: separate;
    border-spacing: 0;
}

.kaertchen .mod-custom tbody,
.kaertchen .mod-custom tr {
    display: contents;
}

/* td = Karte
   position:relative für den Link-Overlay (h3 a::after dehnt sich über gesamte Karte)
   overflow:hidden damit border-radius auf den Kopfbereich wirkt */
.kaertchen .mod-custom td {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-surface);
    padding: 0;
    transition: box-shadow var(--transition-base),
        transform var(--transition-base),
        border-color var(--transition-base);
}

.kaertchen .mod-custom td:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
}

/* ── Kopfbereich: erstes p enthält das Icon-Bild ─────────────────────────── */
.kaertchen .mod-custom td > p:first-child {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
}

/* Hintergrundfarben je Karte – über :root Variablen gesteuert */
.kaertchen .mod-custom td:nth-child(1) > p:first-child {
    background: var(--color-cat-card-1);
}
.kaertchen .mod-custom td:nth-child(2) > p:first-child {
    background: var(--color-cat-card-2);
}
.kaertchen .mod-custom td:nth-child(3) > p:first-child {
    background: var(--color-cat-card-3);
}

/* Blob-Animation: ::before auf dem p (nicht auf td, damit ::after frei bleibt) */
.kaertchen .mod-custom td > p:first-child::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    top: -40px;
    right: -40px;
    animation: blobFloat 6s ease-in-out infinite;
}
.kaertchen .mod-custom td > p:first-child::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    bottom: -30px;
    left: -20px;
    animation: blobFloat 8s ease-in-out infinite reverse;
}
.kaertchen .mod-custom td:nth-child(2) > p:first-child::before {
    animation-delay: -2s;
}
.kaertchen .mod-custom td:nth-child(3) > p:first-child::before {
    animation-delay: -4s;
}

/* Icon selbst */
.kaertchen .mod-custom td > p:first-child img {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 14px; /* 56 + 28 = 84px Gesamtgröße */
    backdrop-filter: blur(4px);
    transition: background var(--transition-base), transform var(--transition-base);
}
.kaertchen .mod-custom td:hover > p:first-child img {
    background: rgba(255,255,255,0.25);
    transform: scale(1.06);
}

/* ── Textkörper: h3 + Beschreibungstext ──────────────────────────────────── */
.kaertchen .mod-custom td > h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-snug);
    margin: 0;
    padding: var(--space-6) var(--space-6) var(--space-2);
}

/* Link im h3: Klickbereich über gesamte Karte (Overlay-Technik).
   ::after des Links dehnt sich auf inset:0 – kein td::after nötig,
   damit bleibt td::after frei für "Addons ansehen →" */
.kaertchen .mod-custom td > h3 a {
    color: var(--color-text);
    text-decoration: none;
    display: block;
}
.kaertchen .mod-custom td > h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-md);
}

/* Beschreibungstext */
.kaertchen .mod-custom td > p:not(:first-child) {
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
    padding: 0 var(--space-6) var(--space-4);
    flex: 1; /* schiebt "Addons ansehen →" nach unten */
}

/* ── "Addons ansehen →" – td::after, da p::after durch Blob-Animation belegt ── */
.kaertchen .mod-custom td::after {
    content: 'Addons ansehen →';
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    padding: 0 var(--space-6) var(--space-6);
    transition: padding-left var(--transition-fast);
    /* z-index unter dem Link-Overlay, damit Hover auf der Karte trotzdem klickbar */
    position: relative;
    z-index: 0;
}
.kaertchen .mod-custom td:hover::after {
    padding-left: calc(var(--space-6) + var(--space-2));
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kaertchen .mod-custom table {
        grid-template-columns: 1fr;
    }
}












.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.category-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    background: var(--color-bg-surface);
}

.category-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
    color: inherit;
}

/* Kopfbereich mit Blauton + Animation */
.category-card__head {
    position: relative;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Karte 1 – mittleres Teal */
.category-card:nth-child(1) .category-card__head {
    background: var(--color-cat-card-1);
}

/* Karte 2 – helles Teal */
.category-card:nth-child(2) .category-card__head {
    background: var(--color-cat-card-2);
}

/* Karte 3 – dunkles Teal/Blau */
.category-card:nth-child(3) .category-card__head {
    background: var(--color-cat-card-3);
}

/* Animierter Blob im Hintergrund */
.category-card__head::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    top: -40px;
    right: -40px;
    animation: blobFloat 6s ease-in-out infinite;
}

.category-card__head::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    bottom: -30px;
    left: -20px;
    animation: blobFloat 8s ease-in-out infinite reverse;
}

.category-card:nth-child(2) .category-card__head::before {
    animation-delay: -2s;
}
.category-card:nth-child(3) .category-card__head::before {
    animation-delay: -4s;
}

@keyframes blobFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33%       {
        transform: translate(10px, -12px) scale(1.05);
    }
    66%       {
        transform: translate(-8px, 8px) scale(0.96);
    }
}

/* Icon im Kopfbereich */
.category-icon {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background var(--transition-base), transform var(--transition-base);
}

.category-card:hover .category-icon {
    background: rgba(255,255,255,0.25);
    transform: scale(1.06);
}

.category-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* Text-Bereich */
.category-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.category-card h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-snug);
    margin: 0;
}

.category-card p {
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
    flex: 1;
}

.category-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    margin-top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--transition-fast);
}

.category-card:hover .category-link {
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .categories-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   24. Tag-Filter-Leiste (Kachel-Seiten)
   -------------------------------------------------------------------------- */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tag-filter-sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Alle-Button */
.tag-filter-reset {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-4);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tag-filter-reset:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tag-filter-reset.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverted);
}

/* Tag-Checkbox-Labels */
.tag-filter-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    font-family: var(--font-body);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.tag-filter-item:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

/* Checkbox ausgeblendet – wir nutzen den Zustand nur visuell */
.tag-filter-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Aktiv wenn checkbox checked */
.tag-filter-item:has(input:checked) {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
}

/* Inaktiv wenn nicht checked – ausgegraut */
.tag-filter-item:has(input:not(:checked)) {
    opacity: 0.55;
}

/* Leere-State */
.tag-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-inverted);
    font-size: var(--text-md);
    padding: var(--space-12) 0;
}

@media (max-width: 540px) {
    .tag-filter-bar {
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }
}

/* ==========================================================================
   25. Addon-Einzelseite
   Struktur: .com-content-article > .page-header, .tags, .item-image,
             .com-content-article__body, .fields-container > .field-entry
   ========================================================================== */

/* --- Scroll-Animation Basis --- */
.addon-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.addon-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.addon-animate.delay-1 {
    transition-delay: 0.1s;
}
.addon-animate.delay-2 {
    transition-delay: 0.2s;
}
.addon-animate.delay-3 {
    transition-delay: 0.3s;
}

/* --- Hero-Bereich (Titel, Tags, Icon, 1-Satz) --- */
.addon-hero {
    background: var(--color-bg-surface);
    position: relative;
    padding: var(--space-16) 0 var(--space-24);
    overflow: visible;
}

/* Weißes Dreieck nach unten */
.addon-hero::after {
    content: '';
    position: absolute;
    bottom: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 40px solid var(--color-bg-surface);
    z-index: 2;
}

.addon-hero__inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-12);
    align-items: center;
}

.addon-hero__left {
    max-width: 680px;
}

/* Kategorie-Label oberhalb der Headline */
.addon-hero__category {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.addon-hero .page-header h1 {
    font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5);
}

.addon-hero .tags {
    margin: 0 0 var(--space-6) !important;
    padding: 0 !important;
}

.addon-hero .com-content-article__body p {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.addon-hero .com-content-article__body p em {
    font-style: normal;
}

/* Icon rechts – groß, schwebend */
.addon-hero__right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.addon-hero__icon {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    object-fit: contain;
    padding: var(--space-6);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    animation: iconFloat 5s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50%       {
        transform: translateY(-20px);
    }
}

@media (max-width: 768px) {
    .addon-hero {
        padding-bottom: var(--space-20);
    }
    .addon-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .addon-hero__right {
        order: -1;
    }
    .addon-hero__icon {
        width: 120px;
        height: 120px;
        animation: none;
    }
}

/* --- Felder-Container Reset --- */
.com-content-article .fields-container {
    list-style: none;
    margin: 0;
    padding: 0;
}

.com-content-article .field-entry {
    margin: 0;
    padding: 0;
}

/* --- Sektion Basis --- */
.addon-section {
    padding: var(--space-20) 0;
    border-bottom: none;
}

.addon-section:last-child {
    border-bottom: none;
}

.addon-section__container {
    /* Alias für .container – gleiche Breite und Abstände */
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.addon-section h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-6);
}

/* --- Intro Sektion --- */
.addon-section--intro {
    background: var(--color-bg);
    padding: var(--space-20) 0 var(--space-24);
    position: relative;
}

.addon-section--intro::after {
    content: '';
    position: absolute;
    bottom: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 40px solid var(--color-bg);
    z-index: 1;
}

/* Zweispaltiges Layout */
.addon-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

/* Badge – gleiche Gestaltung wie .hero-badge */
.addon-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: rgba(0,164,169,0.12);
    border: 1px solid rgba(0,164,169,0.28);
    color: var(--color-accent-mid);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    text-decoration: none !important;
    transition: all var(--transition-base);
}


.addon-intro__badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.addon-intro__badge:hover {
    transform: translateY(-4px);
}

/* Text-Spalte */
.addon-intro__text h3 {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5);
}



.addon-intro__text .field-value p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-4);
}

.addon-intro__text .field-value p:last-of-type {
    margin-bottom: var(--space-8);
}

/* CTA Button */
.addon-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    color: var(--color-text-inverted);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.addon-intro__cta:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-inverted);
    transform: translateY(-2px);
}

/* Bild-Spalte */
.addon-intro__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
    .addon-intro__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .addon-intro__image {
        order: -1;
    }
}

/* --- Features Sektion – Card-Grid (Basis: .service-card) --- */
.addon-section--features {
    background: var(--color-bg-surface);
}

.addon-section--features h3 {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-10);
}

.addon-features__grid {
    display: grid;
    gap: var(--space-6);
}

/* Card – analog zu .service-card auf der Startseite */
.addon-features__card {
    background: var(--color-accent-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.addon-features__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-mid));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.addon-features__card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.addon-features__card:hover::before {
    transform: scaleX(1);
}

/* Icon-Box – analog zu .service-icon */
.addon-features__icon {
    width: 52px;
    height: 52px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    transition: background var(--transition-base);
}

.addon-features__card:hover .addon-features__icon {
    background-color: var(--color-accent);
    color: var(--color-bg-surface);
}

.addon-features__icon {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.addon-features__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
    hyphens: auto;
}

.addon-features__desc {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.addon-img--features img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    display: block;
}

.addon-img--details img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.addon-section--details-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}



/* --- Details Sektion (Bild links, Text rechts) --- */
.addon-section--details {
    background: var(--color-bg);
}

.addon-details__text h3 {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin: var(--space-4) 0 var(--space-5);
}

.addon-details__text p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-5);
}

/* Häkchen-Liste */
.addon-details__text ul {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.addon-details__text ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

.addon-details__text ul li::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    flex-shrink: 0;
    margin-top: 2px;
}

.addon-section--details-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.addon-section--details .field-value p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-4);
}

.addon-section--details .field-value p:last-child {
    margin-bottom: 0;
}

/* --- Requirements Sektion --- */
.addon-section--requirements {
    background: var(--color-bg-footer);
}

.addon-section--requirements h3 {
    color: var(--color-text-inverted);
}

/* ul kommt direkt aus dem Override (kein .field-value Wrapper) */
.addon-section--requirements ul,
.addon-section--requirements .field-value ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.addon-section--requirements li,
.addon-section--requirements .field-value ul li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.8);
}

.addon-section--requirements li::before,
.addon-section--requirements .field-value ul li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Video Sektion (dunkel, YouTube-Embed zentriert, 16:9) --- */
.addon-section--video {
    background: var(--color-bg-dark);
    position: relative;
    padding: var(--space-20) 0 var(--space-24);
}

.addon-video__wrapper {
    max-width: 800px;
    margin-inline: auto;
}

/* Responsives 16:9 Seitenverhältnis für iframes */
.addon-video__wrapper iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* --- Details2 Sektion (zwei Spalten, Inhalt frei) --- */
.addon-section--details2 {
    background: var(--color-bg-surface);
    position: relative;
    padding: var(--space-20) 0 var(--space-24);
}

.addon-details2__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

/* Nur eine Spalte befüllt → volle Breite */
.addon-details2__col:only-child {
    grid-column: 1 / -1;
}

/* Text-Stile innerhalb Details2 – analog zu Details */
.addon-details2__col h3,
.addon-details2__col h4 {
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}

.addon-details2__col p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-4);
}

.addon-details2__col p:last-child {
    margin-bottom: 0;
}

/* Bilder in Details2 responsiv */
.addon-details2__col img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 12px);
    display: block;
}

/* Häkchen-Liste analog zu Details */
.addon-details2__col ul,
.addon-section--intro ul {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.addon-details2__col ul li,
.addon-section--intro ul li {
    /* kein display: flex verwenden, dass zerstört wieder die Gestaltung */
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-5);
}

.addon-details2__col ul li::before,
.addon-section--intro ul li::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    flex-shrink: 0;
    margin-top: 2px;
    position: absolute; /* das Icon wird mit left:0 nach links geschoben, und der Stichpunkt bleibt hintereinanderweg geschrieben stehen */
    left: 0;
}

/* --- Pfeile auf ALLE Addon-Sektionen --- */
/* Basis-Pfeil: jede Sektion bekommt ::after, Farbe = eigener Hintergrund */
.addon-section--features,
.addon-section--details,
.addon-section--video,
.addon-section--details2,
.addon-section--requirements {
    position: relative;
    padding-bottom: var(--space-24); /* Platz für Pfeil */
}

.addon-section--features::after,
.addon-section--details::after,
.addon-section--video::after,
.addon-section--details2::after,
.addon-section--requirements::after {
    content: '';
    position: absolute;
    bottom: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    z-index: 2;
}

/* Pfeil-Farbe = Hintergrundfarbe der jeweiligen Sektion */
.addon-section--features::after  {
    border-top: 40px solid var(--color-bg-surface);
}
.addon-section--details::after   {
    border-top: 40px solid var(--color-bg);
}
.addon-section--video::after     {
    border-top: 40px solid var(--color-bg-dark);
}
.addon-section--details2::after  {
    border-top: 40px solid var(--color-bg-surface);
}
.addon-section--requirements::after {
    border-top: 40px solid var(--color-bg-footer);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .addon-hero__inner {
        grid-template-columns: 1fr;
    }

    .addon-hero__icon {
        width: 72px;
        height: 72px;
    }

    .addon-section--features-inner,
    .addon-features__grid,
    .addon-section--details-inner {
        grid-template-columns: 1fr !important;
        gap: var(--space-8);
    }

    .addon-section--details-inner .addon-img--details {
        order: -1;
    }

    .addon-details2__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* --------------------------------------------------------------------------
   26. Addon-Einzelseite – Über uns & Kontakt
   -------------------------------------------------------------------------- */

/* --- Über uns --- */
.addon-section--about {
    background: var(--color-bg-dark);
    position: relative;
}

.addon-section--about::after {
    content: '';
    position: absolute;
    bottom: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 40px solid var(--color-bg-dark);
    z-index: 2;
}

.addon-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.addon-about__text .section-label {
    color: var(--color-accent-mid);
}

.addon-about__text .section-label::before {
    background-color: var(--color-accent-mid);
}

.addon-about__text h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverted);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 var(--space-5);
}

.addon-about__text > p {
    font-size: var(--text-md);
    color: rgba(255,255,255,0.6);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.addon-about__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-2);
}

.addon-about__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.addon-about__point:hover {
    background: rgba(255,255,255,0.08);
}

.addon-about__point-icon {
    width: 44px;
    height: 44px;
    background: rgba(0,164,169,0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-accent);
}

.addon-about__point-icon svg {
    width: 20px;
    height: 20px;
}

.addon-about__point strong {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverted);
    margin-bottom: var(--space-1);
}

.addon-about__point p {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* --- Kontakt --- */
.addon-section--contact {
    background: var(--color-bg);
    padding-top: var(--space-24); /* Platz für Dreieck */
}

.addon-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.addon-contact__text h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 var(--space-5);
}

.addon-contact__text > p {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-6);
}

.addon-contact__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.addon-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.addon-contact__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.addon-contact__btn--primary {
    background: var(--color-accent);
    color: var(--color-text-inverted);
    border-color: var(--color-accent);
}

.addon-contact__btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverted);
}

.addon-contact__btn--secondary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.addon-contact__btn--secondary:hover {
    background: var(--color-accent);
    color: var(--color-text-inverted);
}

.addon-contact__btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.addon-contact__btn--ghost:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

.addon-contact__form {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

/* Responsive */
@media (max-width: 768px) {
    .addon-about__inner,
    .addon-contact__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}


/* ==========================================================================
   27. Addon-Liste (id="liste")
   ========================================================================== */

/* Item als Zeile */
#liste .com-content-category-blog__item {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

/* item-content als flex-row */
#liste .item-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Unerwünschte Elemente ausblenden */
#liste figure,
#liste .com-content-article__body,
#liste .fields-container,
#liste .readmore,
#liste .article-info-term,
#liste p {
    display: none !important;
}

/* Titel */
#liste .page-header {
    flex-shrink: 0;
    min-width: 200px;
    margin: 0;
}

#liste .page-header h2 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

#liste .page-header h2 a {
    color: inherit;
    text-decoration: none;
}

#liste .page-header h2 a:hover {
    color: var(--color-accent);
}

/* Kategorie */
#liste .article-info {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

#liste .article-info dd {
    margin: 0;
}

#liste .article-info a {
    color: var(--color-text-muted);
    text-decoration: none;
}

/* Tags */
#liste .tags {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    flex: 1;
}

#liste .tags li {
    display: inline-flex !important;
}

/* Unterkategorien ausblenden */
#liste .com-content-category-blog__children {
    display: none;
}

/* ==========================================================================
   28. Blog-Beitrags-Layouts (Layout-Feld: cards / darkBackground / standard)
   Gilt für alle .com-content-category-blog__item – nicht auf #start
   ========================================================================== */

/* --- cards: Kachel-Grid aus Tabelle --- */
.blog-layout--cards {
    background: transparent;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.blog-layout--cards .page-header {
    display: none;
}

.blog-layout--cards .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
}

.blog-layout--cards .cards-grid__item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-layout--cards .cards-grid__item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* Icon-Container – farbiger Hintergrund damit hell+dunkel icons funktionieren */
.blog-layout--cards .cards-grid__icon-wrap {
    width: 52px;
    height: 52px;
    background: var(--color-accent-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-base);
}

.blog-layout--cards .cards-grid__item:hover .cards-grid__icon-wrap {
    background: var(--color-accent);
}

.blog-layout--cards .cards-grid__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.blog-layout--cards .cards-grid__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--leading-tight);
}

.blog-layout--cards .cards-grid__title a {
    color: inherit;
    text-decoration: none;
}

.blog-layout--cards .cards-grid__title a:hover {
    color: var(--color-accent);
}

.blog-layout--cards .cards-grid__text {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* --- darkBackground: Volle Breite --- */
/* Der Breakout läuft über .item-content, der .container wird als
   Clipping-Kontext genutzt (overflow-x: clip dort, nicht auf items) */
.blog-layout--dark {
    background: transparent;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-layout--dark .item-content {
    background: var(--color-bg-dark);
    padding: var(--space-20) 0;
    /* Aus dem .container ausbrechen – .container selbst hat overflow-x: clip */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


/* Zweispaltiges Inner */
.blog-dark__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* Label */
.blog-dark__label {
    color: var(--color-accent-mid) !important;
    margin-bottom: var(--space-4);
}

.blog-dark__label::before {
    background-color: var(--color-accent-mid) !important;
}

/* Linke Spalte */
.blog-dark__left h3 {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    color: var(--color-text-inverted);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 var(--space-6);
}

.blog-dark__left p {
    color: rgba(255,255,255,0.65);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-4);
}

.blog-dark__left h2 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverted);
    letter-spacing: -0.02em;
    margin: var(--space-3) 0 var(--space-6);
}

/* Rechte Spalte – Punkte als Karten */
.blog-dark__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.blog-dark__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: background var(--transition-base), transform var(--transition-base);
}

.blog-dark__point:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-3px);
}

.blog-dark__point-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(0,164,169,0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.blog-dark__point div {
    color: rgba(255,255,255,0.75);
    line-height: var(--leading-relaxed);
}

.blog-dark__point strong {
    color: var(--color-text-inverted);
}

/* Abschlusssatz */
p.blog-dark__closing {
    max-width: var(--container-max);
    margin: var(--space-10) auto 0;
    padding-inline: var(--space-6);
    color: var(--color-bg-surface-alt);
    font-style: italic;
}

@media (max-width: 768px) {
    .blog-dark__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* --- standard: Normaler Beitrag (Default) --- */
.blog-layout--standard {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   29. Kontakt-Sektion (kontaktmodul + form_kontakt)
   ========================================================================== */

.contact-section {
    /*background: var(--color-bg);*/
    padding-block: var(--space-20);
}

/* Eingangsanimation – ausgelöst durch JS IntersectionObserver */
.contact-section .contact-section__text,
.contact-section .contact-section__form {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.contact-section .contact-section__form {
    transition-delay: 0.15s;
}

.contact-section.is-visible .contact-section__text,
.contact-section.is-visible .contact-section__form {
    opacity: 1;
    transform: translateY(0);
}

.contact-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

/* Linke Spalte – Text aus kontaktmodul */
.contact-section__text h3 {
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.contact-section__text p {
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-3);
}

/* Label über h3 */
.contact-section__text h3 {
    position: relative;
}

.contact-section__text h3::before {
    content: '— KONTAKT';
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

/* Icon-Klassen – SVG-Icons per CSS */
[class*="icon_"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

[class*="icon_"]::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.icon_tel::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.15 3.47 2 2 0 0 1 3.12 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16z'/%3E%3C/svg%3E");
}

.icon_email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A4A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.icon_leistungen::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

.icon_linkedin::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666' stroke='none'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

/* Button-Klassen aus dem Modul */
.contact-section__text .btn_teal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-inverted);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    transition: background var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.contact-section__text .btn_teal:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverted);
}

.contact-section__text .btn_teal_invert {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    transition: all var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.contact-section__text .btn_teal_invert:hover {
    background: var(--color-accent);
    color: var(--color-text-inverted);
}

.contact-section__text .btn_teal_invert:hover.icon_email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.contact-section__text .btn_grey {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    text-decoration: none;
    transition: all var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.contact-section__text .btn_grey:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

/* Tabelle im Modul ausblenden – wir nutzen nur die erste Zelle */
.contact-section__text table {
    display: contents;
}

.contact-section__text tr,
.contact-section__text td {
    display: block;
}

/* Rechte Spalte – Formular */
.contact-section__form {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .contact-section__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}





/* ==========================================================================
   Kategorie-Blog: h1 + category-desc Gestaltung
   Gesteuert über Body-ID (#addon_loesungen, etc.) – kein JS-Wrapping nötig
   ========================================================================== */

/* Kein horizontaler Overflow auf der gesamten Seite */
body {
    overflow-x: hidden;
}

/* Hintergrundfarbe der content-section auf Kategorieseiten */
#addon_loesungen .content-section,
#automatisierung_prozesse .content-section,
#daten_integrationen .content-section,
#analyse_reporting .content-section {
    /*    background-color: var(--color-bg);
        position: relative;
        overflow: hidden;*/
}

/* Rotierende Vierecke – per CSS, kein JS nötig */


/* Feines Grid-Muster im Hintergrund */
/* h1 auf Kategorieseiten */
.com-content-category-blog > h1 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    padding-top: var(--space-16);
    margin-bottom: var(--space-5);
    opacity: 0;
    transform: translateY(16px);
    animation: catHeroFadeIn 0.5s ease forwards;
    animation-delay: 0.05s;
}

/* Badge auf Kategorieseiten */
.cat-hero-badge {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    animation: catHeroFadeIn 0.5s ease forwards;
    opacity: 0;
}

/* Wenn Badge vor h1 steht: h1 braucht kein eigenes padding-top mehr */
.cat-hero-badge + h1 {
    padding-top: var(--space-3);
}

/* category-desc auf Kategorieseiten */
.com-content-category-blog > .category-desc {
    /* Kein max-width hier – liegt auf den p-Tags, damit ::after volle Breite hat */
    margin-bottom: var(--space-10);
    opacity: 0;
    overflow: visible;
    transform: translateY(12px);
    animation: catHeroFadeIn 0.5s ease forwards;
    animation-delay: 0.15s;
}

.com-content-category-blog > .category-desc p {
    max-width: 680px;
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-3);
}

.com-content-category-blog > .category-desc p:last-child {
    margin: 0;
}

/* Akzentlinie nach category-desc:
   category-desc hat max-width:680px, daher ::after darauf zu klein.
   Lösung: ::after bricht mit negativem margin-left aus der max-width aus
   und orientiert sich an .com-content-category-blog (kein max-width). */
.com-content-category-blog > .category-desc {
    overflow: visible;
}

.com-content-category-blog > .category-desc::after {
    content: '';
    display: block;
    height: 2px;
    /* Breite = volle Container-Breite, unabhängig von max-width der category-desc */
    width: 100%;
    /* Negativer margin hebt die Einschränkung durch max-width:680px auf */
    margin-top: var(--space-10);
    margin-left: 0;
    background:
        linear-gradient(
        90deg,
        rgba(0,164,169,0.13) 0%,
        rgba(0,164,169,0.23) 30%,
        rgba(0,164,169,0.25) 50%,
        rgba(0,164,169,0.53) 70%,
        rgba(0,164,169,0.13) 100%
        );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: catLineShimmer 16s ease-in-out 9s infinite;
}

@keyframes catLineShimmer {
    0%   {
        background-position: 200% 0;
    }
    40%  {
        background-position: -200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes catHeroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   Einspaltige Kategorie-Blog: Beitrags-Layout-System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hintergründe – .hg_beitrag
   Basis: volle Breite, kein eigener Stil
   Farbvarianten über bg--* Klassen (gesetzt per JS aus Feld "hintergrund")
   -------------------------------------------------------------------------- */
.hg_beitrag {
    width: 100%;
}

.hg_beitrag.bg--transparent {
    background: transparent;
}
.hg_beitrag.bg--light       {
    background: var(--color-bg-surface);
}
.hg_beitrag.bg--teal        {
    background: var(--color-accent-hover);
}
.hg_beitrag.bg--grey        {
    background: var(--color-bg-dark-alt);
}
.hg_beitrag.bg--dark        {
    background: var(--color-bg-dark);
}

/* Innenabstand: farbige Hintergründe bekommen mehr Luft */
.hg_beitrag.bg--light .container,
.hg_beitrag.bg--teal  .container,
.hg_beitrag.bg--grey  .container,
.hg_beitrag.bg--dark  .container {
    padding-block: var(--space-16);
}

.hg_beitrag.bg--transparent .container {
    padding-block: var(--space-12);
}

/* Trennlinie zwischen aufeinanderfolgenden transparenten Beiträgen */
.hg_beitrag.bg--transparent + .hg_beitrag.bg--transparent {
    /*border-top: 1px solid var(--color-border);*/
}


/* ==========================================================================
   Pfeil-Übergang zwischen Beiträgen
   Vorgänger muss immer über Nachfolger liegen → absteigender z-index
   per :nth-child (realistisches Maximum: 10 Beiträge)
   ========================================================================== */

.hg_beitrag {
    width: 100%;
    position: relative;
    /* isolation: isolate  ← ENTFERNEN – blockiert z-index nach außen */
}

/* Absteigender z-index: erster Beitrag liegt ganz oben */
.hg_beitrag:nth-child(1)  {
    z-index: 10;
}
.hg_beitrag:nth-child(2)  {
    z-index: 9;
}
.hg_beitrag:nth-child(3)  {
    z-index: 8;
}
.hg_beitrag:nth-child(4)  {
    z-index: 7;
}
.hg_beitrag:nth-child(5)  {
    z-index: 6;
}
.hg_beitrag:nth-child(6)  {
    z-index: 5;
}
.hg_beitrag:nth-child(7)  {
    z-index: 4;
}
.hg_beitrag:nth-child(8)  {
    z-index: 3;
}
.hg_beitrag:nth-child(9)  {
    z-index: 2;
}
.hg_beitrag:nth-child(10) {
    z-index: 1;
}

/* Pfeil: ::after des Vorgängers, kein eigener z-index nötig –
   erbt den Stacking Context des Elternelements */
.hg_beitrag:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 32px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Pfeilfarbe = Hintergrundfarbe des Vorgängers */
.hg_beitrag.bg--transparent:not(:last-child)::after {
    background: var(--color-bg);
}
.hg_beitrag.bg--light:not(:last-child)::after       {
    background: var(--color-bg-surface);
}
.hg_beitrag.bg--teal:not(:last-child)::after        {
    background: var(--color-accent-hover);
}
.hg_beitrag.bg--grey:not(:last-child)::after        {
    background: var(--color-bg-dark-alt);
}
.hg_beitrag.bg--dark:not(:last-child)::after        {
    background: var(--color-bg-dark);
}

/* --------------------------------------------------------------------------
   2. Hell / Dunkel – Textfarben per Vererbung
   Alle Kinder erben die Farbe – kein Selektor pro Element nötig
   Ausnahmen (Nummern, Labels) überschreiben lokal
   -------------------------------------------------------------------------- */

.hg--dunkel p {
    color: var(--color-text-muted-inverted);
}

.hg--dunkel h2,
.hg--dunkel h3,
.hg--dunkel h4 {
    color: var(--color-text-inverted);
}

.hg--dunkel a {
    color: var(--color-text-inverted);
}

.hg--dunkel a:hover {
    color: rgba(255,255,255,0.75);
}

.hg--dunkel strong {
    color: var(--color-text-inverted);
}

/* --------------------------------------------------------------------------
   3. fields-container – Flex-Layout für Editor-Blöcke
   -------------------------------------------------------------------------- */
.com-content-category-blog .fields-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-8);
    row-gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;   /* vertikale Zentrierung der Spalten */
}

/* Steuerfelder ausblenden – nie sichtbar */
.fields-container .breite-editor-1,
.fields-container .breite-editor-2,
.fields-container .breite-editor-3,
.fields-container .breite-editor-4,
.fields-container .hintergrund,
.fields-container .besonderheiten {
    display: none;
}

/* --------------------------------------------------------------------------
   4. Editor-Blöcke – Breiten (Klassen gesetzt per JS)
   calc() zieht column-gap anteilig ab damit die Zeile nicht umbricht
   -------------------------------------------------------------------------- */
.com-content-category-blog .fields-container .editor1,
.com-content-category-blog .fields-container .editor2,
.com-content-category-blog .fields-container .editor3,
.com-content-category-blog .fields-container .editor4 {
    flex: 1 1 100%;
    min-width: 0;
}

.com-content-category-blog .fields-container .col--width100 {
    flex: 1 1 100%;
    max-width: 100%;
}
.com-content-category-blog .fields-container .col--width75  {
    flex: 1 1 calc(75%   - var(--space-8));
    max-width: calc(75%   - var(--space-8));
}
.com-content-category-blog .fields-container .col--width66  {
    flex: 1 1 calc(66.6% - var(--space-8));
    max-width: calc(66.6% - var(--space-8));
}
.com-content-category-blog .fields-container .col--width50  {
    flex: 1 1 calc(50%   - var(--space-8));
    max-width: calc(50%   - var(--space-8));
}
.com-content-category-blog .fields-container .col--width33  {
    flex: 1 1 calc(33.3% - var(--space-8));
    max-width: calc(33.3% - var(--space-8));
}
.com-content-category-blog .fields-container .col--width25  {
    flex: 1 1 calc(25%   - var(--space-8));
    max-width: calc(25%   - var(--space-8));
}

@media (max-width: 767px) {
    .com-content-category-blog .fields-container .col--width75,
    .com-content-category-blog .fields-container .col--width66,
    .com-content-category-blog .fields-container .col--width50,
    .com-content-category-blog .fields-container .col--width33,
    .com-content-category-blog .fields-container .col--width25 {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. Typografie in Editor-Blöcken
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Button: a.weiter
   Globale, wiederverwendbare Button-Komponente.
   Anwendung: <a class="weiter" href="…">Linktext</a>
   Pfeil → wird automatisch via ::after angehängt.
   Funktioniert in allen 4 Editoren des Kategorieblogs, im Einzelbeitrag,
   in Modulen und überall sonst, wo ein Link mit class="weiter" steht.
   Dunkle Variante greift automatisch innerhalb von .hg--dunkel.
   ========================================================================== */

/* Basis + helle Variante (Standard) */
a.weiter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    background: transparent;
    transition: all var(--transition-base);
}

a.weiter::after {
    content: '→';
}

a.weiter:hover,
a.weiter:focus-visible {
    background: var(--color-accent);
    color: var(--color-text-inverted);
    transform: translateY(-4px);
}

/* Dunkle Variante – greift automatisch in .hg_beitrag.hg--dunkel
   und überall sonst, wo ein Elternelement .hg--dunkel trägt */
.hg--dunkel a.weiter {
    color: inherit;                        /* erbt die invertierte Textfarbe */
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;

}

.hg--dunkel a.weiter:hover,
.hg--dunkel a.weiter:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: inherit;                        /* bleibt bei der hellen Schriftfarbe */
}






/* ==========================================================================
   Button: a.weiter_inv
   Invertierte Variante zu a.weiter — gefüllter CTA-Look.
   Anwendung: <a class="weiter_inv" href="…">Linktext</a>
   Pfeil → wird automatisch via ::after angehängt.
   Funktioniert in allen 4 Editoren des Kategorieblogs, im Einzelbeitrag,
   in Modulen und überall sonst, wo ein Link mit class="weiter_inv" steht.
   Dunkle Variante greift automatisch innerhalb von .hg--dunkel.
   ========================================================================== */

/* Basis + helle Variante (Standard) — gefüllt mit Akzent */
a.weiter_inv {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-base);
    color: var(--color-text-inverted);
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
}

a.weiter_inv::after {
    content: '→';
}

/* Hover: dreht zum Outline-Look (= Standard von a.weiter) */
a.weiter_inv:hover,
a.weiter_inv:focus-visible {
    background: transparent;
    color: var(--color-accent);
    transform: translateY(-4px);
}

/* Dunkle Variante – greift automatisch in .hg_beitrag.hg--dunkel
   und überall sonst, wo ein Elternelement .hg--dunkel trägt.
   Auf dunklem Grund bleibt der gefüllte Akzent-Look erhalten,
   weil Akzent auch auf dunklem Hintergrund gut funktioniert. */
.hg--dunkel a.weiter_inv {
    color: var(--color-text-inverted);
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.hg--dunkel a.weiter_inv:hover,
.hg--dunkel a.weiter_inv:focus-visible {
    background: transparent;
    color: inherit;                        /* erbt invertierte Textfarbe */
    border-color: rgba(255, 255, 255, 0.6);
}










/* ==========================================================================
   Aufzählung mit Punkt (ul) – Häkchen-Liste
   Globale Komponente: greift in allen Editoren und überall sonst,
   wo ein <ul> in einem Joomla Custom Field steht.
   Dunkle Variante greift automatisch innerhalb von .hg--dunkel.
   ========================================================================== */

/* --- Liste zurücksetzen --- */
.hg_beitrag .field-value ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Listeneintrag (Basis + helle Variante) --- */
.hg_beitrag .field-value ul > li {
    display: inline-block;     /* siehe ol – global li-Reset umgehen */
    width: 100%;
    position: relative;
    padding: var(--space-2) 0;
    padding-left: 2rem;        /* Platz für das Häkchen links */
}

/* --- Häkchen-Marker --- */
.hg_beitrag .field-value ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--space-2) + 0.4em);   /* vertikal an der ersten Textzeile */
    width: 1rem;
    height: 0.55rem;
    border-left: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(-45deg);
    transform-origin: left center;
}

.hg--dunkel.hg_beitrag .field-value ul > li {
    color: var(--color-text-muted-inverted);
}

/* ==========================================================================
   Nummerierte Aufzählung (ol) – Karten-Stil mit zweistelliger Nummer
   Globale Komponente: greift in allen Editoren des Kategorieblogs
   und überall sonst, wo ein <ol> in einem Joomla Custom Field steht.
   Dunkle Variante greift automatisch innerhalb von .hg--dunkel.
   ========================================================================== */

/* --- Liste zurücksetzen --- */
.hg_beitrag .field-value ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ol-counter;
}

/* --- Listeneintrag = Karte (Basis + helle Variante) --- */
.hg_beitrag .field-value ol > li {
    counter-increment: ol-counter;
    /* inline-block + width:100% statt display:block,
       weil global irgendwo li { display: inline } gesetzt ist.
       So bleibt der Inhalt ein normaler Text-Flow (kein flex/grid),
       dadurch brechen Texte mit <strong> und &nbsp; sauber um. */
    display: inline-block;
    width: 100%;
    position: relative;
    padding: var(--space-4) var(--space-5);
    padding-left: calc(var(--space-5) + 2.5rem);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

/* --- Nummer (automatisch per counter, zweistellig: 01, 02, …) --- */
.hg_beitrag .field-value ol > li::before {
    content: counter(ol-counter, decimal-leading-zero);
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    padding-top: 2px;
}

.hg_beitrag .field-value ol > li:hover {
    transform: translateY(-4px);
}

/* --- Dunkle Variante --- */
.hg--dunkel .field-value ol > li {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted-inverted);
}







/* ============================================================
   Slider CK – globale Komponente
   Klassen-Hook:  .swiper-container.swiper-layout-over
   Helle Variante = Standard, Dunkle Variante über .hg--dunkel
   Plugin-JS bleibt unangetastet, nur Optik wird gestaltet
   
   Höhe: Plugin auf 280px setzen (Slider Options → Height value)
   ============================================================ */

/* ---------- Container ---------- */
/* seitliches Padding schafft Platz für die Pfeile außerhalb der Slides
   unten Platz für die Pagination */
.swiper-container.swiper-layout-over {
    position: relative;
    padding: var(--space-10) 0;
    // damit icon platz hat
    margin: var(--space-4) 0;
}

/* ---------- Einzelne Slide als Karte ---------- */
/* position: relative ist Pflicht: das überstehende Icon und der
   absolute Link-Overlay positionieren sich relativ zur Karte */
.swiper-container.swiper-layout-over .swiper-slide {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* KEIN overflow:hidden – das Icon soll oben überstehen */
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
    /* Plugin setzt margin-right und width inline – nicht überschreiben */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: visible;
    //sonst ist icon abgeschnitten
}

/* Hover: leichter Lift + kräftigerer Schatten – wie bei .kaertchen */
.swiper-container.swiper-layout-over .swiper-slide:hover,
.swiper-container.swiper-layout-over .swiper-slide:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* ---------- Icon: oben rechts überstehend ---------- */
/* Plugin rendert die figure mit background-image UND ein <img> darin.
   Wir nutzen NUR das <img>, blenden das background-image aus,
   und positionieren die figure als kleinen überstehenden Container. */
.swiper-container.swiper-layout-over .swiper-img-cont {
    position: absolute;
    top: -16px;
    right: var(--space-5);
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    background: var(--color-bg-surface) !important;
    background-image: none !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 3;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    pointer-events: none;
    // Icon-Klick durchlassen — Klick geht zum Link, Icon bleibt sichtbar 
}

/* Hover-Spiegelung am Icon-Kasten */
.swiper-container.swiper-layout-over .swiper-slide:hover .swiper-img-cont {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0,164,169,0.18);
}

.swiper-container.swiper-layout-over .swiper-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    visibility: visible;
    // Plugin Slider CK hat hier ein visibility:hidden
}

/* ---------- Caption: nur Container, kein eigenes Padding/Background ---------- */
/* Title und Desc steuern Padding und Hintergrund jetzt selbst,
   damit Title als grauer Header-Streifen über die volle Breite reichen kann */
.swiper-container.swiper-layout-over .swiper-caption {
    position: static;
    width: 100%;
    background: transparent;
    padding: 0;
    color: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------- Title: hellgrauer Header-Streifen über volle Breite ---------- */
.swiper-container.swiper-layout-over .swiper-title {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    /* Höhe ~70px durch Padding gesteuert, vertikal mittig */
    min-height: 70px;
    display: flex;
    align-items: center;
    /* rechts mehr Platz fürs überstehende Icon */
    padding: var(--space-3) calc(50px + var(--space-5) + var(--space-3)) var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--color-text);
    /* Header rundet oben mit, Body rundet unten mit */
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

/* ---------- Desc: weißer Body unter dem Header ---------- */
.swiper-container.swiper-layout-over .swiper-desc {
    background: var(--color-bg-surface);
    padding: var(--space-5);
    flex: 1; /* füllt restliche Karten-Höhe */
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    /* Header rundet oben mit, Body rundet unten mit */
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* ---------- Klickbarer Overlay-Link ---------- */
.swiper-container.swiper-layout-over .swiper-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.swiper-container.swiper-layout-over .swiper-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

/* ============================================================
   Pfeile: Pill-Buttons über den Slides, mittig vertikal
   Plugin-SVG entfernen, CSS-Chevron stattdessen (currentColor)
   ============================================================ */

.swiper-container.swiper-layout-over .swiper-button-prev, .swiper-container.swiper-layout-over .swiper-button-next {
    width: 32px;
    height: 120px;
    margin-top: -60px;
    background: var(--color-accent-light);
    background-image: none !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-muted);
    z-index: 10;
    transition: color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    opacity: 0.8;
}

/* Position: leicht in den Slide-Bereich überragend, aber sichtbar als Steuerung */
.swiper-container.swiper-layout-over .swiper-button-prev {
    left: var(--space-2);
}
.swiper-container.swiper-layout-over .swiper-button-next {
    right: var(--space-2);
}

/* Plugin-eigenes ::after (Font-Icon) ausblenden */
.swiper-container.swiper-layout-over .swiper-button-prev::after,
.swiper-container.swiper-layout-over .swiper-button-next::after {
    display: none;
}

/* Chevron via zwei rotierte Borders – einfärbbar via currentColor */
.swiper-container.swiper-layout-over .swiper-button-prev::before,
.swiper-container.swiper-layout-over .swiper-button-next::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
}

.swiper-container.swiper-layout-over .swiper-button-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.swiper-container.swiper-layout-over .swiper-button-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

/* Hover: Akzent-Farbe + leichtes Lift */
.swiper-container.swiper-layout-over .swiper-button-prev:hover,
.swiper-container.swiper-layout-over .swiper-button-next:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

/* Tastatur-Fokus */
.swiper-container.swiper-layout-over .swiper-button-prev:focus-visible,
.swiper-container.swiper-layout-over .swiper-button-next:focus-visible {
    color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Deaktivierter Zustand */
.swiper-container.swiper-layout-over .swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

.swiper-container.swiper-layout-over .swiper-button-disabled:hover {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    box-shadow: none;
}





/* Pfeile dunkel: heller Pill-Button auf dunklem Karten-Slide */
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-prev,
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-next {
    background: var(--color-bg-dark);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted-inverted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.5;
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-prev:hover,
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-next:hover {
    color: var(--color-accent-mid);
    border-color: var(--color-accent-mid);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}












/* ---------- Pagination ---------- */
.swiper-container.swiper-layout-over .swiper-pagination {
    position: static;
    margin-top: var(--space-5);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.swiper-container.swiper-layout-over .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--color-border);
    opacity: 1;
    transition: background var(--transition-fast), transform var(--transition-fast);
    margin: 0 !important;
}

.swiper-container.swiper-layout-over .swiper-pagination-bullet:hover {
    background: var(--color-text-muted);
}

.swiper-container.swiper-layout-over .swiper-pagination-bullet-active {
    background: var(--color-accent);
    transform: scale(1.25);
}







/* ============================================================
   Dunkle Variante – greift automatisch in .hg--dunkel
   ============================================================ */

.hg--dunkel .swiper-container.swiper-layout-over .swiper-slide {
    background: var(--color-bg-dark-alt);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-slide:hover,
.hg--dunkel .swiper-container.swiper-layout-over .swiper-slide:focus-within {
    box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
    border-color: transparent;
}

/* Icon-Kasten im Dunkelmodus: bleibt heller Akzent oben rechts */
.hg--dunkel .swiper-container.swiper-layout-over .swiper-img-cont {
    background: var(--color-bg-surface) !important;
    border-color: rgba(255,255,255,0.15);
}

/* Dunkle Variante: Header und Body in dunklen Tönen */
.hg--dunkel .swiper-container.swiper-layout-over .swiper-title {
    background: rgba(0,0,0,0.2); /* dunklerer Header-Streifen */
    border-bottom-color: rgba(255,255,255,0.08);
    color: var(--color-text-inverted);
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-desc {
    background: var(--color-bg-dark-alt);
    color: var(--color-text-muted-inverted);
}

/* Pfeile + Pagination heller, Akzent bleibt */
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-prev,
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-next {
    color: var(--color-text-muted-inverted);
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-prev:hover,
.hg--dunkel .swiper-container.swiper-layout-over .swiper-button-next:hover {
    color: var(--color-accent-mid);
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-pagination-bullet {
    background: var(--color-border-inverted);
    opacity: 0.4;
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-pagination-bullet:hover {
    opacity: 0.7;
}

.hg--dunkel .swiper-container.swiper-layout-over .swiper-pagination-bullet-active {
    background: var(--color-accent-mid);
    opacity: 1;
}

/* Slider in Custom Field stabilisieren */
.field-value > .swiper-container.swiper-layout-over,
.field-value .swiper-container.swiper-layout-over {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* .field-value selbst zwingen, ein Block-Container zu sein */
.field-entry .field-value {
    display: block;
    width: 100%;
}





/* ============================================================
   Slider voll auf .hg_beitrag-Breite ausdehnen (1-spaltiger Blog)
   Slide-Band geht voll, Pagination bleibt im Container
   ============================================================ */

/* Nur im 1-spaltigen Blog (.hg_beitrag wraps den Beitrag voll breit) */
.hg_beitrag .swiper-container.swiper-layout-over {
    /* aus dem .container ausbrechen, volle Viewport-Breite einnehmen,
       dann per max-width auf .hg_beitrag-Breite begrenzen */
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* Pagination behält Container-Breite – sitzt mittig im sichtbaren Slider,
   wirkt nicht „verloren" am Bildschirmrand */
.hg_beitrag .swiper-container.swiper-layout-over .swiper-pagination {
    max-width: 1320px; /* an Bootstrap-Container-Breite anpassen */
    margin-left: auto;
    margin-right: auto;
}






/* ==========================================================================
   Besonderheit: Karten (besonderheit--karten)
   Globale Komponente: Tabellenstruktur im Editor wird zu Karten-Grid.
   Redakteure schreiben einfach eine <table> im JCE – pro <td> entsteht
   eine Karte. Funktioniert in editor-1 bis editor-4.
   Dunkle Variante greift automatisch innerhalb von .hg--dunkel.
   ========================================================================== */




/* Tabelle → Grid */
.besonderheit--karten .field-value table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-6) 0;
}

.besonderheit--karten .field-value tbody,
.besonderheit--karten .field-value tr {
    display: contents;
}

/* td = Karte (Basis + helle Variante) */
.besonderheit--karten .field-value td {
    position: relative;
    /* display: flex;          ← weg */
    /* flex-direction: column; ← weg */
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

/* leere <td> ausblenden – Redakteure haben manchmal Tabellen mit
   Platzhalter-Zellen (siehe euer Beispiel mit <td></td>) */
.besonderheit--karten .field-value td:empty {
    display: none;
}

/* Karten-Innenleben: Standard-Abstände aufräumen */
.besonderheit--karten .field-value td > *:first-child {
    margin-top: 0;
}

.besonderheit--karten .field-value td > *:last-child {
    margin-bottom: 0;
}

/* Hover-Lift wie bei .kaertchen */
.besonderheit--karten .field-value td:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Dunkle Variante */
.hg--dunkel .besonderheit--karten .field-value td {
    background: var(--color-bg-dark-alt);
    border-color: rgba(255, 255, 255, 0.08);
    color: inherit;
}

.hg--dunkel .besonderheit--karten .field-value td:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    border-color: transparent;
}

/* Module innerhalb von Karten visuell inline behandeln.
   Joomla schließt <p> vor jeder Modul-Ausgabe (weil .moduletable ein
   <div> enthält und nicht in <p> stehen darf). Der so entstehende
   Block-Bruch zerreißt den Fließtext optisch. Workaround:
   Modul-Wrapper und unmittelbare Inline-Inhalte werden visuell
   zu einem zusammenhängenden Textfluss. */
.besonderheit--karten .field-value td .moduletable {
    display: inline;
}

.besonderheit--karten .field-value td .moduletable > * {
    display: inline;
}

/* Leere <p>-Tags ausblenden, die Joomla beim Auseinanderreißen erzeugt */
.besonderheit--karten .field-value td p:empty {
    display: none;
}

.besonderheit--karten .field-value td .addon-count {
    font-weight: 700;
    color: var(--color-accent);
    /* oder font-size: 1.25em o.ä. */
}


/* Einzelseiten mit der Seiten-ID general*/
#general .com-content-article{
    padding: var(--space-24) 0;
}
#general .com-content-article__body ul {
    padding: 0 var(--space-5) var(--space-5);
}
#general .com-content-article__body li {
    color:var(--color-text-muted);
}


/* Gestaltung des Plugins COOKIEHINT */
#redim-cookiehint-modal p {
    line-height: var(--leading-snug);
}
#redim-cookiehint-modal ul {
    padding: 0 var(--space-5);
}
#redim-cookiehint #cookiehintsubmit {
    background: var(--color-accent) !important;
    color: var(--color-text-inverted) !important;
    border-color: var(--color-accent);
}




#redim-cookiehint #cookiehintsubmit:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverted);
    
    box-shadow: var(--shadow-accent);
}

#redim-cookiehint #cookiehintsubmitno {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border);
}

#redim-cookiehint #cookiehintsubmitno:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Cookie-Hinweis unter Video */
.addon-video__cookie-hint {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted-inverted);
    margin-top: 1rem;
    margin-bottom: 0;
}


/* ==========================================================================
   OSMap Sitemap
   ========================================================================== */

/* Container – zentriert, etwas schmaler als der Content-Bereich */
#osmap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Menü-Überschriften */
#osmap h2 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent);
}

/* Erstes h2 braucht keinen oberen Abstand */
#osmap h2:first-child {
    margin-top: 0;
}

/* Alle Listen: Reset */
#osmap ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Ebene 1 einrücken, Ebene 2 weiter */
#osmap ul.level_1 {
    padding-left: var(--space-6);
}

#osmap ul.level_2 {
    padding-left: var(--space-6);
}

/* Listenpunkte */
#osmap li {
    position: relative;
    padding: var(--space-2) 0;
    padding-left: var(--space-5);
    line-height: var(--leading-snug);
}

/* Trennlinie zwischen Geschwister-Elementen auf Ebene 0 */
#osmap ul.level_0 > li + li {
    border-top: 1px solid var(--color-border);
}

/* Marker: kleiner Strich vor jedem Eintrag */
#osmap li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--space-2) + 0.55em); /* vertikal an der Textmitte */
    width: 12px;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 1px;
}

/* Kategorien (Eltern) etwas kräftiger */
#osmap li.osmap-has-children > a {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Unter-Einträge: Standard-Linkfarbe, normales Gewicht */
#osmap li a.osmap-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

#osmap li a.osmap-link:hover,
#osmap li a.osmap-link:focus-visible {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Eltern-Links überschreiben die Accent-Farbe */
#osmap li.osmap-has-children > a.osmap-link {
    color: var(--color-text);
}

#osmap li.osmap-has-children > a.osmap-link:hover,
#osmap li.osmap-has-children > a.osmap-link:focus-visible {
    color: var(--color-accent-hover);
}

/** Menüpunkt Insights Kategorieblog **/


/** Menüpunkt Insights Einzelbeitrag **/
#insights .com-content-article {
    padding: var(--space-24) 0;
}



/* --- Abstand zwischen Items-Containern (Leading -> Intro-Spalten) ----------- */
/* Joomla rendert items-leading und intro_items als zwei separate Container.
   Der "gap" greift NUR innerhalb eines Containers, deshalb hier explizit. */
.com-content-category-blog__items + .com-content-category-blog__items {
    margin-top: var(--space-12);
}


/* --- Article-Info (Autor + Datum unter Überschrift) ------------------------- */
/* Seriös: dezent, gut lesbar, mit echtem Border-Top als sauberer Trenner zur
   Überschrift. Border-Bottom entfernt, weil der Karten-Rahmen schon einrahmt. */
.article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);   /* row-gap kleiner als column-gap */
    font-size: var(--text-sm);
    color: var(--color-text-muted);        /* statt -inverted: jetzt lesbar */
    margin: var(--space-4) 0 var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    border-bottom: none;                   /* Override der alten Regel */
}

/* Labels ("Geschrieben von:", "Veröffentlicht:") leiser stellen, aber sichtbar */
.article-info dt {
    display: inline;
    font-weight: 500;
    opacity: 0.7;
    margin-right: var(--space-1);
}

.article-info dd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;                             /* Browser-Default 40px killen */
}

/* Echtes Kalender-Icon statt Emoji – per CSS-Mask, erbt currentColor */
.article-info .icon-calendar {
    display: inline-flex;
    align-items: center;
}
.article-info .icon-calendar::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon-calendar) center / contain no-repeat;
            mask: var(--icon-calendar) center / contain no-repeat;
    margin-right: var(--space-1);
    opacity: 0.7;                          /* leiser als der Text */
}

/* Dunkle Variante: Text wird durch globale .hg--dunkel-Vererbung schon hell.
   Hier nur den Border etwas anpassen, damit er auf dunklem Grund nicht knallt. */
.hg--dunkel .article-info {
    border-top-color: rgba(255, 255, 255, 0.15);
}



/* Generischer Icon-Hook: jedes <span class="icon-XYZ"> bekommt das passende
   Mask-Icon. icon-fw ist Joomlas "fixed-width"-Klasse – kommt automatisch mit. */
.article-info [class*="icon-"]::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    margin-right: var(--space-1);
    opacity: 0.65;                  /* leiser als der Text, dezent */
    vertical-align: -0.15em;        /* auf Textbasislinie ziehen */
}

.article-info .icon-user::before     { -webkit-mask-image: var(--icon-user);     mask-image: var(--icon-user); }
.article-info .icon-calendar::before { -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); }

/* ============================================================================
   Blog-Karten: Editorial-Typografie
   Bild randlos oben in der Karte, Caption als Bildunterschrift,
   Hierarchie zwischen Leading- und Folge-Karten
   ============================================================================ */

/* --- Karten-Padding so umbauen, dass das Bild oben randlos sitzen kann ----- */
.blog-item,
.com-content-category-blog__item {
    padding: 0;                     /* überschreibt das alte var(--space-10) */
    overflow: hidden;               /* damit das Bild der Karten-Rundung folgt */
    display: flex;
    flex-direction: column;         /* Bild oben, Inhalt darunter */
}

/* Innerer Inhalt bekommt das Padding zurück, das vorher die Karte hatte */
.blog-item .item-content,
.com-content-category-blog__item .item-content {
    padding: var(--space-8) var(--space-10) var(--space-10);
}

/* --- Bild: randlos oben, korrektes Seitenverhältnis ------------------------ */
.blog-item .item-image,
.com-content-category-blog__item .item-image {
    margin: 0;                      /* figure-default killen */
    display: block;
    /* float: left aus Joomla-Default neutralisieren */
    float: none;
}

.blog-item .item-image img,
.com-content-category-blog__item .item-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;           /* einheitliches Format auch bei abweichenden Originalen */
    object-fit: cover;
    border-radius: 0;
}

/* --- Bildunterschrift (figcaption.caption): leise, kursiv, Luft nach oben - */
.blog-item .item-image .caption,
.com-content-category-blog__item .item-image .caption {
    display: block;
    padding: var(--space-4) var(--space-10) 0;   /* gleiche seitliche Flucht wie .item-content */
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

.hg--dunkel .item-image .caption {
    color: var(--color-text-muted-inverted);
}

/* --- Headline: dominanter Anker, schmalere Lesbreite ---------------------- */
.blog-item .page-header h2,
.com-content-category-blog__item .page-header h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
    /* Headline darf bis zur Karten-Innenkante laufen */
    max-width: none;
}

/* --- Lesbreite für Fließtext begrenzen ------------------------------------ */
/* Best Practice Editorial: ~65-75 Zeichen pro Zeile = ca. 65ch */
.blog-item .item-content > p,
.com-content-category-blog__item .item-content > p {
    max-width: 65ch;
}


/* ============================================================================
   Hierarchie: Leading-Karte (Hero) vs. Folge-Karten (Liste)
   ============================================================================ */

/* --- Leading: Hero-Karte – dominant ---------------------------------------- */
/* Joomla setzt .items-leading auf den Container des ersten Beitrags, wenn
   "Anzahl der Hauptbeiträge" >= 1 ist. Dadurch ist der Selektor sauber. */
.items-leading .blog-item .page-header h2,
.items-leading .com-content-category-blog__item .page-header h2 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
}

/* Mehr Innenraum für die Hero-Karte */
.items-leading .blog-item .item-content,
.items-leading .com-content-category-blog__item .item-content {
    padding: var(--space-10) var(--space-12) var(--space-12);
}

.items-leading .blog-item .item-image .caption,
.items-leading .com-content-category-blog__item .item-image .caption {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}

/* --- Folge-Karten: kompakter, kleinere Headline --------------------------- */
/* (Default greift bereits über die Basis-Regeln oben.
   Hier nur, falls man später bewusst absetzen will – aktuell nicht nötig) */


/* ============================================================================
   Mobile: alles atmen lassen
   ============================================================================ */
@media (max-width: 768px) {
    .blog-item .item-content,
    .com-content-category-blog__item .item-content,
    .items-leading .blog-item .item-content,
    .items-leading .com-content-category-blog__item .item-content {
        padding: var(--space-6) var(--space-6) var(--space-8);
    }

    .blog-item .item-image .caption,
    .com-content-category-blog__item .item-image .caption,
    .items-leading .blog-item .item-image .caption,
    .items-leading .com-content-category-blog__item .item-image .caption {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .items-leading .blog-item .page-header h2,
    .items-leading .com-content-category-blog__item .page-header h2 {
        font-size: var(--text-3xl);   /* mobil moderater */
    }
}

/* ============================================================================
   Karten-Hover: dezenter Lift mit Akzent-Border
   ============================================================================ */
.blog-item,
.com-content-category-blog__item {
    /* transition existiert bereits oben (var(--transition-base)) */
    cursor: default;            /* Karte ist nicht klickbar, nur die Links drin */
}

/* Hover: Border nimmt Akzent-Farbe an, Schatten weicher */
.blog-item:hover,
.com-content-category-blog__item:hover {
    
    border-color: var(--color-accent);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

/* Bild bekommt beim Hover einen ganz dezenten Zoom – fühlt sich lebendig an */
.blog-item .item-image img,
.com-content-category-blog__item .item-image img {
    transition: transform var(--transition-base);
}
.blog-item:hover .item-image img,
.com-content-category-blog__item:hover .item-image img {
    transform: scale(1.02);
}

/* :focus-visible-Spiegel des Hovers – Tastatur-Nutzer dürfen nicht ohne Feedback bleiben.
   Greift, wenn ein Link innerhalb der Karte (z.B. h2 a oder readmore) Fokus bekommt. */
.blog-item:focus-within,
.com-content-category-blog__item:focus-within {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
}


/* ============================================================================
   Hero-Karte: dezent angehoben gegenüber den Folge-Karten
   ============================================================================ */
.items-leading .blog-item,
.items-leading .com-content-category-blog__item {
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.10);
}

/* Hero-Hover wird stärker, damit der Lift-Effekt erhalten bleibt */
.items-leading .blog-item:hover,
.items-leading .com-content-category-blog__item:hover,
.items-leading .blog-item:focus-within,
.items-leading .com-content-category-blog__item:focus-within {
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.15);
}


/* ============================================================================
   Read-More: gleicher Look wie globaler a.weiter-Button
   Joomla rendert: <p class="readmore"><a class="btn btn-secondary">…</a></p>
   Wir gestalten den .btn innerhalb von .readmore – kein globales .btn-Override.
   ============================================================================ */

/* Bootstrap-Default-Styles abräumen, damit nur unser Look bleibt */
.readmore .btn,
.readmore .btn-secondary {
    /* Bootstrap-Reset für diesen einen Kontext */
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-text-inverted);

    /* identisch zu a.weiter */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    background: transparent;
    transition: all var(--transition-base);
}

/* Joomlas Chevron-Icon (<span class="icon-chevron-right">) ausblenden,
   damit nicht zwei Pfeile entstehen */
.readmore .btn .icon-chevron-right {
    display: none;
}

/* Pfeil hinten anhängen – wie bei a.weiter */
.readmore .btn::after {
    content: '→';
}

/* Hover-Verhalten identisch zu a.weiter */
.readmore .btn:hover,
.readmore .btn:focus-visible {
    background: var(--color-accent);
    color: var(--color-text-inverted);
    transform: translateY(-4px);
}

/* Dunkle Variante – exakt wie bei a.weiter */
.hg--dunkel .readmore .btn {
    color: inherit;
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
}

.hg--dunkel .readmore .btn:hover,
.hg--dunkel .readmore .btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: inherit;
}

/* Karten-Hover: Lift der Karte addiert sich nicht doppelt mit dem
   eigenen Button-Lift, also Button-Lift im Karten-Hover deaktivieren */
.blog-item:hover .readmore .btn:not(:hover),
.com-content-category-blog__item:hover .readmore .btn:not(:hover) {
    transform: none;
}

/* ============================================================================
   Beitragsbild-Ratios: Editorial Wide für Hero, klassisch 4:3 für Folge-Karten
   Überschreibt das vorherige aspect-ratio: 16/9 aus der Basis-Regel.
   ============================================================================ */

/* Folge-Karten (Default): 4:3 – klassisch, ausgewogen */
.blog-item .item-image img,
.com-content-category-blog__item .item-image img {
    aspect-ratio: 5 / 2;
}

/* Leading-Karte: 5:2 – Editorial Wide */
.items-leading .blog-item .item-image img,
.items-leading .com-content-category-blog__item .item-image img {
    aspect-ratio: 5 / 2;
}


/* ============================================================================
   Insights – Einzelbeitrag (Standard-Pfad in default.php)
   Hook: #insights .com-content-article
   Ziel: Editorial-Lesefluss – schmale Lesespalte, Bilder dürfen ausbrechen
   ============================================================================ */

/* --- 1. Lesespalte: Fließtext linksbündig auf ~70ch begrenzen --------------
   Greift NUR auf direkte Kinder von __body, damit Bilder/Videos ausbrechen
   können (per zweiter Regel weiter unten). max-width statt width, damit
   Mobile (< 70ch) nicht horizontal scrollt. */
#insights .com-content-article__body > p,
#insights .com-content-article__body > h2,
#insights .com-content-article__body > h3,
#insights .com-content-article__body > h4,
#insights .com-content-article__body > ul,
#insights .com-content-article__body > ol,
#insights .com-content-article__body > blockquote {
    max-width: 70ch;
    /* margin-left: 0 ist Browser-Default, hier nur explizit als Doku */
    margin-left: 0;
    margin-right: auto;
}

/* --- 2. Lead-Absatz: erster <p> im Body bekommt Gewicht --------------------
   --text-lg statt Standard --text-md, --color-text statt -muted.
   Greift via :first-of-type, damit fields-container/figure davor egal sind. */
#insights .com-content-article__body > p:first-of-type {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

/* --- 3. Intro-Bild: schmal links verankert --------------------------------
   Joomla rendert das Beitragsbild als <figure class="left item-image"> direkt
   vor dem __body. Float aus Joomla-Default neutralisieren, links anbinden,
   schmaler als die Lesespalte. */
#insights .com-content-article > .item-image {
    float: none;
    margin: 0 0 var(--space-8);
    max-width: 560px;
}

#insights .com-content-article > .item-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* --- 4. Caption (figcaption.caption): leise, kursiv ----------------------- */
#insights .com-content-article > .item-image .caption {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}

/* --- 5. Inline-Bilder im Fließtext: dürfen rechts ausbrechen --------------
   Joomla wrappt Inline-Bilder als <p><img></p>. Diese Absätze enthalten NUR
   ein Bild – :has() erkennt das und hebt die 70ch-Grenze auf. Das Bild kann
   bis Container-Breite, bleibt aber linksbündig. */
#insights .com-content-article__body > p:has(> img:only-child) {
    max-width: none;
    margin: var(--space-8) 0;
}

#insights .com-content-article__body > p:has(> img:only-child) img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    /* Bild läuft maximal bis Container-Breite, nicht weiter */
    max-width: 100%;
}

/* --- 6. Überschriften: mehr Luft für klare Abschnitte --------------------
   Globale h2-Regel hat margin-top: var(--space-6) – im Lesefluss eines
   Artikels wirkt das zu eng. Mehr Luft oben, bisschen mehr unten. */
#insights .com-content-article__body > h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-5);
}

#insights .com-content-article__body > h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

/* --- 7. Blockquote: Akzentbalken links, dezent abgehoben -----------------
   Kein eigener Hintergrund, nur ein 4px-Balken in --color-accent links und
   ein leichter Padding-Versatz. So bleibt die Lesespalte ruhig. */
#insights .com-content-article__body > blockquote {
    margin: var(--space-10) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 4px solid var(--color-accent);
    font-size: var(--text-lg);
    font-style: italic;
    line-height: var(--leading-snug);
    color: var(--color-text);
}

#insights .com-content-article__body > blockquote p {
    /* Globale p-Regel überschreibt Farbe + line-height – hier zurückholen */
    color: inherit;
    line-height: inherit;
    font-size: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADDON-PREISE — Kauf vs. Miete mit interaktivem Slider
   Nach dem Muster: helle Variante Standard, dunkle ueber .hg--dunkel,
   keine Hex-Werte, alles ueber Custom Properties.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Sektions-Hintergrund: abgesetzte Zone ──────────────────────────── */
.addon-section--preise {
    background: var(--color-bg-surface);
    padding-top: 3rem;
    padding-bottom: 3.5rem;

    /* Komponenten-lokale Variablen (Karten auf weiss = Kontrast zur Sektion) */
    --preise-card-bg:     var(--color-bg-page);
    --preise-card-border: var(--color-border);
    --preise-muted:       var(--color-text-muted);
    --preise-accent:      var(--color-accent);
    --preise-gap:         1rem;
}

/* ─── Header-Block ─────────────────────────────────────────────────────── */
.addon-preise__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.addon-preise__eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--preise-muted);
    margin: 0 0 0.375rem;
    text-transform: uppercase;
}

.addon-preise__title {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.addon-preise__subtitle {
    font-size: 1rem;
    color: var(--preise-muted);
    margin: 0;
    line-height: 1.55;
}

/* ─── Slider: ruhig eingebettet, keine eigene Pille ───────────────────── */
.addon-preise__slider-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.addon-preise__slider-label {
    font-size: 0.9375rem;
    color: var(--preise-muted);
    white-space: nowrap;
    margin: 0;
}

.addon-preise__slider {
    flex: 1;
    min-width: 200px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--preise-card-border);
    outline: none;
    cursor: pointer;
}

/* Thumb (Griff) — Chrome/Safari/Edge */
.addon-preise__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--preise-accent);
    border: 2px solid var(--preise-card-bg);
    cursor: grab;
    transition: transform 0.1s ease;
}
.addon-preise__slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* Thumb — Firefox */
.addon-preise__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--preise-accent);
    border: 2px solid var(--preise-card-bg);
    cursor: grab;
}

/* Focus-Style fuer Tastaturnutzer */
.addon-preise__slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.addon-preise__slider-out {
    font-size: 1.125rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Karten-Grid mit ODER-Trenner ───────────────────────────────────── */
.addon-preise__karten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--preise-gap);
    position: relative;
    margin-bottom: 1.75rem;
}

.addon-preise__karten.has-both {
    grid-template-columns: 1fr 1fr;
}

/* ODER-Kreis: weiss, Teal-Border und Teal-Schrift (dezente Variante A) */
.addon-preise__oder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 1px solid var(--preise-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--preise-accent);
    letter-spacing: 0.06em;
}

/* ─── Einzelne Karte ─────────────────────────────────────────────────── */
.addon-preise__karte {
    background: var(--preise-card-bg);
    border: 1px solid var(--preise-card-border);
    border-radius: 0.875rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.addon-preise__karte-header {
    margin-bottom: 1.25rem;
}

.addon-preise__option-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--preise-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.375rem;
}

.addon-preise__karte-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.addon-preise__karte-lead {
    font-size: 0.9375rem;
    color: var(--preise-muted);
    margin: 0;
    line-height: 1.5;
}

/* ─── Hauptpreis (Kauf-Einmalbetrag oder Miete-Monatspreis) ──────────── */
.addon-preise__hauptpreis {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0;
    flex-wrap: wrap;
}

.addon-preise__betrag {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.addon-preise__einheit {
    font-size: 0.9375rem;
    color: var(--preise-muted);
}

.addon-preise__hauptpreis-hint {
    font-size: 0.8125rem;
    color: var(--preise-muted);
    margin: 0.25rem 0 1.25rem;
}

/* ─── Zusatzposten (Support bei Kauf) ────────────────────────────────── */
.addon-preise__zusatzposten {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    border-top: 1px solid var(--preise-card-border);
    padding-top: 1rem;
    margin-bottom: 1rem;
}

.addon-preise__zusatzposten-title {
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0 0 0.125rem;
}

.addon-preise__zusatzposten-hint {
    font-size: 0.75rem;
    color: var(--preise-muted);
    margin: 0;
}

.addon-preise__zusatzposten-preis {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.addon-preise__zusatzposten-einheit {
    font-size: 0.75rem;
    color: var(--preise-muted);
    font-weight: 400;
    margin-left: 0.125rem;
}

/* ─── Summen-Block am Kartenfuss ─────────────────────────────────────── */
/* Hintergrund als leicht abgesetzte Zone: zurueck zum Sektions-Grund */
.addon-preise__summe {
    background: var(--color-bg-surface);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    margin-top: auto;
}

.addon-preise__summe-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.addon-preise__summe-zeile + .addon-preise__summe-zeile {
    margin-top: 0.25rem;
}

.addon-preise__summe-zeile--muted {
    color: var(--preise-muted);
    font-size: 0.8125rem;
}

.addon-preise__summe-zeile > span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

.addon-preise__summe-zeile--muted > span:last-child {
    font-weight: 400;
}

/* ─── Miet-Karte: interne Zweispaltigkeit (Team + Flatrate) ──────────── */
.addon-preise__miete-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Wenn Flatrate-Block vorhanden: 2 Spalten mit Trennlinie */
.addon-preise__miete-grid:has(.addon-preise__miete-flatrate) {
    grid-template-columns: 1fr 1fr;
}

.addon-preise__miete-flatrate {
    border-left: 1px solid var(--preise-card-border);
    padding-left: 1rem;
}

.addon-preise__miete-heading {
    font-size: 0.75rem;
    color: var(--preise-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}

/* Hauptpreis innerhalb der Miet-Karte etwas kleiner als solo */
.addon-preise__miete-grid .addon-preise__betrag {
    font-size: 1.875rem;
}

.addon-preise__miete-rechnung,
.addon-preise__miete-flatrate-hint {
    font-size: 0.75rem;
    color: var(--preise-muted);
    margin: 0.375rem 0 0;
    font-variant-numeric: tabular-nums;
}

.addon-preise__miete-footnote {
    font-size: 0.75rem;
    color: var(--preise-muted);
    border-top: 1px solid var(--preise-card-border);
    padding-top: 0.75rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* ─── Break-Even-Hinweis: zentrierter Satz, keine Box ─────────────────── */
.addon-preise__break-even {
    font-size: 0.9375rem;
    color: var(--preise-muted);
    text-align: center;
    max-width: 680px;
    margin: 1.5rem auto 0;
    line-height: 1.6;
}

/* Highlight-Spans: starker Kontrast zum gedaempften Satzrest */
.addon-preise__break-even span {
    color: var(--color-text-base);
    font-weight: 600;
}

/* ─── Disclaimer (MwSt.-Hinweis) ─────────────────────────────────────── */
.addon-preise__disclaimer {
    font-size: 0.75rem;
    color: var(--preise-muted);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   DUNKLE VARIANTE — nur was wirklich anders ist, Rest erbt ueber color
   ══════════════════════════════════════════════════════════════════════ */
.hg--dunkel .addon-section--preise {
    --preise-card-bg:     rgba(255, 255, 255, 0.06);
    --preise-card-border: rgba(255, 255, 255, 0.12);
    --preise-muted:       rgba(255, 255, 255, 0.65);

    /* Sektions-Hintergrund auf einen anderen dunklen Ton, damit Karten sichtbar */
    background: rgba(0, 0, 0, 0.2);
}

.hg--dunkel .addon-preise__summe {
    background: rgba(0, 0, 0, 0.25);
}

.hg--dunkel .addon-preise__break-even span {
    color: var(--color-text-inverted, #fff);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — gestaffelt: erst Karten stapeln, dann Miet-Grid
   ══════════════════════════════════════════════════════════════════════ */

/* Bis ~900px: Karten untereinander (vermeidet Quetschung bei Flatrate-Block) */
@media (max-width: 900px) {
    .addon-preise__karten.has-both {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    /* ODER-Kreis: zwischen gestapelten Karten statt absolut */
    .addon-preise__oder {
        position: static;
        transform: none;
        margin: 0 auto;
        width: 44px;
        height: 44px;
    }
}

/* Bis ~480px: Miet-Grid auch einspaltig, Slider vertikal */
@media (max-width: 480px) {
    .addon-preise__miete-grid:has(.addon-preise__miete-flatrate) {
        grid-template-columns: 1fr;
    }

    .addon-preise__miete-flatrate {
        border-left: 0;
        border-top: 1px solid var(--preise-card-border);
        padding-left: 0;
        padding-top: 1rem;
    }

    .addon-preise__slider-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .addon-preise__slider-out {
        text-align: center;
    }

    .addon-preise__title {
        font-size: 1.5rem;
    }

    .addon-preise__betrag {
        font-size: 2rem;
    }

    .addon-section--preise {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }
}

/* ─── Vorposten: Einmalige Einrichtung ──────────────────────────────── */
/* Faellt bei Kauf und Miete identisch an — als ruhige Zeile VOR den Karten */
.addon-preise__vorposten {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--preise-card-bg);
    border: 1px solid var(--preise-card-border);
    border-radius: 0.5rem;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
}

.addon-preise__vorposten-text {
    min-width: 0;
    /* min-width:0 verhindert Overflow bei langen Titeln */
}

.addon-preise__vorposten-title {
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0 0 0.125rem;
}

.addon-preise__vorposten-hint {
    font-size: 0.8125rem;
    color: var(--preise-muted);
    margin: 0;
    line-height: 1.4;
}

.addon-preise__vorposten-preis {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    /* tabular-nums haelt Komma-Position bei 2- bis 4-stelligen Betraegen stabil */
}

.addon-preise__vorposten-einheit {
    font-size: 0.875rem;
    color: var(--preise-muted);
    font-weight: 400;
    margin-left: 0.125rem;
}

/* Mobile: Vorposten-Zeile umbricht wenn noetig */
@media (max-width: 480px) {
    .addon-preise__vorposten {
        flex-wrap: wrap;
    }

    .addon-preise__vorposten-preis {
        font-size: 1.25rem;
    }
}