/* ==========================================================
   TYPO3 Sitepackage - altmann.css
========================================================== */


/* ==========================================================
    Kapitel 01.01 - Designsystem (:root)
========================================================== */

:root {

   
        /* ----------------------------------------------------------
       Design Tokens
    ---------------------------------------------------------- */
    
    
   /* ==========================================================
   Farben
========================================================== */
    
    /*   Designfarben   */   
    
        --altmann-primary: #026a3b;
        --altmann-primary-light: #daf9ca;
        --altmann-primary-active: #f3fdf8;
        --altmann-success: #318006;
    
        --altmann-heading-muted: #5f7568;
    
    /* Links */

       /*   --altmann-link: var(--altmann-primary);   */ 
    
    
      /*   Funktionsfarben   */   
    
        --altmann-text: #333333;
        --altmann-text-light: #666666;
    
        --altmann-link-color: var(--altmann-primary);
        --altmann-link-hover: #014f2d;
    
        --altmann-link-decoration: none;
        --altmann-link-decoration-hover: underline;
    
    /*   Border  */   
    
        --altmann-border: #e1feec;
        --altmann-border-success: #255b07;
    
        --altmann-warning: #f59e0b;
        --altmann-danger: #c62828;
    
    
        --altmann-white: #ffffff;
        --altmann-black: #000000;

        

    
   /* ==========================================================
   Typografie
========================================================== */

        /* Schriftgrößen */

        --altmann-font-small:   .9rem;
        --altmann-font-large:   2.2rem; 
         
        --altmann-font-h1: 2.1rem;
        --altmann-font-h2: 1.7rem;
        --altmann-font-h3: 1.4rem;
        --altmann-font-h4: 1.2rem;
        --altmann-font-h5: 1.1rem;
      
        /*   vorher: --altmann-font-body: 1rem;   */  
         --altmann-font-base: 1rem;
    
        --altmann-line-height-body: 1.6;
        --altmann-line-height-heading: 1.2;

    
    /* ==========================================================
   Abstände
========================================================== */

        --altmann-space-xs: .25rem;
        --altmann-space-sm: .5rem;
        --altmann-space-md: 1rem;
        --altmann-space-lg: 1.5rem;
        --altmann-space-xl: 3rem;
                /* angelegt - "smd"-test 1808-2026   */
        --altmann-space-smd: .85rem;
    
    
    /* Typo 3 Elemente - Medien - Abstände */   
        --altmann-media-gap: 3rem;
        --altmann-content-gap: 3rem;
    
    /* TYPO3 Text & Medien */
        --altmann-textmedia-image-width: 320px;
        --altmann-textmedia-text-max-width: 70ch;
    
    /* Komponenten */
    /* TYPO3 Inhaltselemente */
        --altmann-frame-space: 2rem;


    
    
    
    
    
   /* ==========================================================
   01.04. Layout
========================================================== */
    
    
        /* Maximalbreiten */
        --altmann-container: 1320px;
    
        /* Section-Abstände */
        --altmann-section-space: var(--altmann-space-lg);
    
        /* Medien -Abstände */
    
        /* Rahmen */  
    
        --altmann-content-width: 70ch;
    
    
    /* ==========================================================
   01.05. Radius
========================================================== */
     
        --altmann-radius-sm: .25rem;
        --altmann-radius-md: .5rem;
        --altmann-radius-lg: 1rem;
        --altmann-radius-pill: 999px;
    
    
    /* ==========================================================
   01.06. Schatten
========================================================== */
        --altmann-shadow-sm:
            0 2px 6px rgba(0,0,0,.12);

        --altmann-shadow-md:
            0 4px 12px rgba(0,0,0,.18);

        --altmann-shadow-lg:
            0 8px 24px rgba(0,0,0,.20);
    
        --altmann-shadow-dropdown: 0 .5rem 1rem rgba(0,0,0,.15);

    
    /* ==========================================================
   Animationen
========================================================== */
    
        --altmann-transition: .25s ease;
        --altmann-transition-fast: .18s ease;
        --altmann-transition-dropdown: .28s ease;
        --altmann-transition-slow: .40s ease;
 
    


 /* ----------------------------------------------------------
       Komponenten Tokens
---------------------------------------------------------- */   
    
    /* 
   TYPO3 Trenner / Horizontale Linie
========================================================== */
    
        --altmann-divider-color: #58ac75;
  
    
   /* ==========================================================
   Buttons
========================================================== */

/* Primary Button */

        --altmann-button-primary: #026a3b;
    
        --altmann-button-bg: var(--altmann-button-primary);
        --altmann-button-hover-bg: #23a469;

        --altmann-button-text: #ffffff;

        --altmann-button-border: #b1e9a6;
        --altmann-button-hover-border: #e6f9e2;
 

/* Outline Button */

        --altmann-button-outline-color: #ffffff;
        --altmann-button-outline-hover-bg: #ffffff;
        --altmann-button-outline-hover-color: var(--altmann-primary);


    /* Allgemeine Button-Eigenschaften */

        --altmann-button-radius: .35rem;

        --altmann-button-padding-y: .65rem;
        --altmann-button-padding-x: 1.4rem;

        --altmann-button-transition: .25s ease;


/*

Später ergänzen:

        --altmann-button-secondary
        --altmann-button-secondary-hover

*/
    
    
    
   /* ==========================================================
 Navigation
========================================================== */
    
      /* Header-bg  */
    
  --altmann-header-bg: #ffffff;  
    
    
     /* Navigation  */
    
        --altmann-navbar-bg: #1d531c; 
        --altmann-navbar-link: #43e19b;
    
    /* Hover */ 
        --altmann-navbar-link-hover: #b6fb8f;
    
    /*  Active */ 
        --altmann-navbar-link-active: var(--altmann-primary-active);   
    

    /* Dropdown-Menü  */  
    
        --altmann-dropdown-bg: #1d531c;
    
    /*  Dropdown */ 
        --altmann-dropdown-link: #fefefe; /* #b7efa6;  */
      
    
    /* Dropdown Hover */
        --altmann-dropdown-link-hover: #f1fff4; /*  #75ff57;  */ 
    
        --bs-dropdown-bg: var(--altmann-dropdown-bg);
        --bs-dropdown-link-color: var(--altmann-dropdown-link);
        --bs-dropdown-link-hover-color: var(--altmann-dropdown-link-hover);
        --bs-dropdown-link-hover-bg: var(--altmann-primary);
    

    
    
    
    
    /* ==========================================================
   Cards
========================================================== */
    
    
        --altmann-card-bg: #ffffff;
        --altmann-card-border: var(--altmann-border);
        --altmann-card-radius: var(--altmann-radius-md);
        --altmann-card-shadow: var(--altmann-shadow-sm);
        --altmann-card-shadow-hover: var(--altmann-shadow-md);
        --altmann-card-padding: 1.5rem;
        --altmann-card-transition: var(--altmann-transition);
    
    
           /* Typo 3 Cards - Abstände */ 
        --altmann-card-gap: 1.5rem;
    
    
    /* -----------------------------
    Hero
-------------------------------- */    


        --altmann-hero-height: 420px;
        --altmann-hero-content-width: 760px;
        --altmann-hero-overlay: rgba(0,0,0,.35);
    
       /*  vorher  --altmann-hero-title-size: clamp(2.5rem,6vw,4.8rem);   */     
        --altmann-hero-title-size: clamp(2.3rem,5vw,4.5rem);
        --altmann-hero-text-size: 1.25rem;
        --altmann-hero-button-gap: 1rem;  
        --altmann-hero-content-offset: 25px;
    
    
    
    
   /* ==========================================================
   Formulare
========================================================== */
    

    
    /* ==========================================================
   Utilities
========================================================== */   
    

    
}







/* ==========================================================
    Kapitel 02 - Reset
========================================================== */


/* ----------------------------------------------------------
   Box Model
---------------------------------------------------------- */

*,
*::before,
*::after {

    box-sizing: border-box;

}


/* ----------------------------------------------------------
   HTML / Body
---------------------------------------------------------- */

html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    background: var(--altmann-white);

    color: var(--altmann-text);

}


/* ----------------------------------------------------------
   Bilder und Medien
---------------------------------------------------------- */

img,
picture,
svg,
video,
canvas {

    display: block;

    max-width: 100%;

    height: auto;

}


/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

a {

    text-decoration: none;

}


/* ----------------------------------------------------------
   Formularelemente
---------------------------------------------------------- */

button,
input,
textarea,
select {

    font: inherit;

}


/* ----------------------------------------------------------
   Überschriften
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

}


/* ----------------------------------------------------------
   Listen
---------------------------------------------------------- */

ul,
ol {

    margin: 0;

}


/* ----------------------------------------------------------
   Tabellen
---------------------------------------------------------- */

table {

    border-collapse: collapse;

    border-spacing: 0;

}





/* ==========================================================
   Kapitel 01.03    Allgemein
========================================================== */

/* ==========================================================
   Body
========================================================== */

body {

    font-size: var(--altmann-font-base);
    line-height: var(--altmann-line-height-body);


}



/* ==========================================================
   Links  
========================================================== */


a {

    color: var(--altmann-link-color);
    text-decoration: var(--altmann-link-decoration);

    transition:
        color var(--altmann-transition),
        text-decoration-color var(--altmann-transition);

}

a:hover,
a:focus {

    color: var(--altmann-link-hover);
    text-decoration: var(--altmann-link-decoration-hover);

}

a:focus-visible {

    outline: 2px solid var(--altmann-primary);
    outline-offset: 2px;

}
/* ==========================================================
   Absätze
========================================================== */

p {

    margin-bottom: var(--altmann-space-md);

}



/* ==========================================================
   Listen
========================================================== */


ul,
ol {

    margin: 0 0 var(--altmann-space-md) ;
    

}


ol {

    list-style: decimal;

}

li {

    margin-bottom: var(--altmann-space-xs);

}

li:last-child {

    margin-bottom: 0;

}

/* Verschachtelte Listen */

ul ul,
ul ol,
ol ul,
ol ol {

    margin-top: .45rem;
    margin-bottom: 0;

}


/* ==========================================================
   Horizontale Linien   - weiter unten bei 1.04 typografie 
========================================================== */


/*   vorher.  

hr {

    margin: var(--altmann-space-xl) 0;

    border: 0;

    border-top: 1px solid var(--altmann-border);
    opacity: 1;

}

*/   




/* ==========================================================
   Bilder / Fotos  (img)
========================================================== */

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

}


/* ==========================================================
   sonstige HTML-Grundelemente
========================================================== */



figure {

    margin: 0 0 var(--altmann-space-lg);

}

figcaption {

    margin-top: .5rem;

    font-size: .9rem;

    color: var(--altmann-text-light);

    text-align: center;

}



/* ========================= */
/* Kapitel 01.04   Typografie               */
/* ========================= */

/* ----------------------------------------------------------
   Grundtypografie
---------------------------------------------------------- */


body {

    font-size: var(--altmann-font-base);

    line-height: var(--altmann-line-height-body);

    color: var(--altmann-text);

    font-family: 
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}





/* ==========================================================
   Überschriften allgemein
========================================================== */

h1,
h2,
h3,
h4,
h5 {

    line-height: var(--altmann-line-height-heading);
    font-weight: 600;
    color: var(--altmann-primary);
}

/* ----------------------------------------------------------
   H1
---------------------------------------------------------- */

h1 {

    color: var(--altmann-primary);
    font-size: var(--altmann-font-h1);
    margin-bottom: var(--altmann-space-md);

}


/* ----------------------------------------------------------
   H2
---------------------------------------------------------- */



h2 {

    color: var(--altmann-primary);
    font-size: var(--altmann-font-h2);


    /*  Test 1808-2026 - ergänzung: "margin-top".  */ 
    

    margin-bottom: var(--altmann-space-md);

    /*  macht den margin top bei der h2 - margin-top: var(--altmann-space-smd);   */ 

    
}


/* ----------------------------------------------------------
   H3
---------------------------------------------------------- */


h3 {

    /* vorher: color: var(--altmann-primary);   */  
    color: var(--altmann-heading-muted);
    font-size: var(--altmann-font-h3);
    margin-bottom: var(--altmann-space-sm);
}


/* ----------------------------------------------------------
   H4 - H6
---------------------------------------------------------- */


h4 {

    font-size: var(--altmann-font-h4);
    color: var(--altmann-heading-muted);
}


h5 {

    font-size: var(--altmann-font-h5);
    color: var(--altmann-heading-muted);
}

h6 {

    font-size: var(--altmann-font-normal);
    color: var(--altmann-heading-muted);
}

/* ----------------------------------------------------------
   Absätze
---------------------------------------------------------- */


p {

    margin-bottom: var(--altmann-space-md);

}



/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */


a {

    color: var(--altmann-primary);

    transition:
        color var(--altmann-transition);

}







/* ==========================================================
   Textauszeichnungen - Hervorhebungen
========================================================== */


strong,
b {

    font-weight: 700;

}

em,
i {

    font-style: italic;

}

small {

    font-size: .875rem;

    color: var(--altmann-text-light);

}


/* ==========================================================
   Typo 3 Trenner   /- und hr - horizontale Linien allgemein - das muss ggf. noch anders plaziert werden /
========================================================== */








/* ==========================================================
   TYPO3 Trenner / Horizontale Linie  ?
========================================================== */

.ce-div {

    margin: var(--altmann-space-xl) 0;

    border: 0;

    border-top:
        1px solid
        var(--altmann-divider-color);

    opacity: 1;

}










/* ==========================================================
   Marker 
========================================================== */

mark {

    background: var(--altmann-primary-light);
    color: var(--altmann-text);

    padding: .1rem .25rem;
    border-radius: .2rem;

}


/*   Eine kleine Empfehlung

Ich würde keine eigenen Farben für Listenpunkte (::marker) setzen.  Zumindest nicht im Grundsystem. 

Der Standardmarker ist barrierefrei, gut lesbar und passt sich automatisch an verschiedene Themes an. 
Falls ihr später für einzelne Komponenten (z. B. eine Checkliste oder Feature-Liste) farbige Marker möchtet, 
können wir das gezielt dort umsetzen, ohne alle Listen der Website zu beeinflussen.


*/
/*  
li::marker {

    color: var(--altmann-primary);

}
*/   




  /*  Blockquotes    */ 

/* ==========================================================
   Zitate 
========================================================== */

blockquote {

        margin:

        var(--altmann-space-lg)
        0;

        padding-left:

        var(--altmann-space-md);

        border-left:

        4px solid var(--altmann-primary);

        color:

        var(--altmann-text-light);

        font-style: italic;

}

  /*  Codeblöcke    */ 


/* ==========================================================
   CODE
========================================================== */

code {

    padding: .15rem .35rem;

    border-radius: .25rem;

    background: #f5f5f5;

    font-family: Consolas, Monaco, monospace;

}

pre {

    padding: 1rem;

    overflow-x: auto;

    border-radius: .35rem;

    background: #f5f5f5;

}


pre code {

    padding: 0;

    background: transparent;

}



/* ========================= */
/* Kapitel 01.05   Header               */
/* ========================= */



#site-header {

    /*  padding: var(--altmann-space-lg) 0;   frühere Version  */  

    padding: 1.2rem 0;
    border-bottom: 1px solid var(--altmann-border);
    background: var(--altmann-header-bg);
}


/* ----------------------------------------------------------
   Header Container
---------------------------------------------------------- */

.altmann-header {

    align-items: center;

}



.altmann-header__logo {
    
    /*    neu ab 21.07.2026.  */  
    
    display: block;
    max-height: 95px;
    width: auto;
    height: auto;
    
}

.altmann-header__logo-link {
    display: inline-flex;
    text-decoration: none;
}

/* ----------------------------------------------------------
   Header Titel
---------------------------------------------------------- */

.altmann-header__title {

    font-size: var(--altmann-font-large);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.02em;

}

/* ----------------------------------------------------------
   Header Slogan
---------------------------------------------------------- */

.altmann-header__slogan {

    margin-top: var(--altmann-space-xs);

    color: var(--altmann-text-light);

    font-size: 1rem;

    font-weight: 300;

}

/* ----------------------------------------------------------
   Header Kontakt
---------------------------------------------------------- */

.altmann-header__contact {

    font-size: .95rem;

    line-height: 1.6;

}


/* ----------------------------------------------------------
   Header Kontaktlinks
---------------------------------------------------------- */

.altmann-header__phone,
.altmann-header__mail {

    display: block;

    margin-bottom: .18rem;

    color: var(--altmann-text);

    transition:

        color var(--altmann-transition);

}


.altmann-header__phone:hover,
.altmann-header__mail:hover {

    color: var(--altmann-primary);

}


/* ----------------------------------------------------------
     Kapitel 06 - Navigation
---------------------------------------------------------- */


/* ----------------------------------------------------------
   Navigation Grundlayout
---------------------------------------------------------- */

#mainNavigation {

    position: sticky;

    top: 0;

    z-index: 1020;

    background: var(--altmann-navbar-bg);

    --bs-navbar-color: var(--altmann-navbar-link);
    --bs-navbar-hover-color: var(--altmann-navbar-link-hover);
    --bs-navbar-active-color: var(--altmann-navbar-link-active);

}

/* ----------------------------------------------------------
   Navigation Navbar
---------------------------------------------------------- */

#mainNavigation .navbar-nav {

    gap: .25rem;

}

/* ----------------------------------------------------------
   Navigation Links
---------------------------------------------------------- */

#mainNavigation .nav-link {

    color: var(--altmann-navbar-link);

    padding:

        var(--altmann-space-sm)
        var(--altmann-space-md);

    transition:

        color var(--altmann-transition),
        background-color var(--altmann-transition);

}


#mainNavigation .nav-link:hover {

    color: var(--altmann-navbar-link-hover);

    background-color: rgba(255,255,255,.05);

}


/* ----------------------------------------------------------
   Navigation Active
---------------------------------------------------------- */

#mainNavigation .nav-link.active {

    color: var(--altmann-navbar-link-active);

}



/* ----------------------------------------------------------
   Navigation Dropdown
---------------------------------------------------------- */

#mainNavigation .dropdown-menu {

    background: var(--altmann-dropdown-bg);
    border: 1px solid var(--altmann-border);
    border-radius: var(--altmann-radius-md);
    box-shadow: var(--altmann-shadow-dropdown);
    margin-top: .35rem;
    padding: .35rem 0;

}

/* ----------------------------------------------------------
   Navigation Dropdown Items
---------------------------------------------------------- */

#mainNavigation .dropdown-item {

    color: var(--altmann-dropdown-link);
    padding:

        var(--altmann-space-sm)
        var(--altmann-space-lg);

    border-radius: .25rem;
    transition:

        background-color var(--altmann-transition),
        color var(--altmann-transition);

}


#mainNavigation .dropdown-item:hover {

    background: var(--altmann-primary);
    color: var(--altmann-dropdown-link-hover);

}


#mainNavigation .dropdown-item.active {

    background: var(--altmann-primary);
    color: var(--altmann-dropdown-link-hover);
    font-weight: 400;

}


/* ==========================================================
   Main Navigation - Dropdown Divider 
========================================================== */

#mainNavigation .dropdown-divider {

    border-color: var(--altmann-border);

}

/* ----------------------------------------------------------
   Navigation Desktop Dropdown
---------------------------------------------------------- */

@media (min-width:992px) {

    #mainNavigation .dropdown {

        position: relative;

    }


    #mainNavigation .dropdown::after {

        content: "";

        position: absolute;

        left: 0;

        right: 0;

        top: 100%;

        height: 10px;

    }


    #mainNavigation .dropdown-menu {

        display: block;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(12px);

        transition:

            opacity var(--altmann-transition-dropdown),
            transform var(--altmann-transition-dropdown);

    }


    #mainNavigation .dropdown:hover > .dropdown-menu,
    #mainNavigation .dropdown-menu:hover {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);

    }

}


/* ----------------------------------------------------------
   Mobile Navigation
---------------------------------------------------------- */

/*
   Mobile-Anpassungen erfolgen später
   gesammelt im Kapitel 14 Responsive.
*/



/* ==========================================================
    Kapitel 07 - Main Content
========================================================== */

/* ----------------------------------------------------------
   Main Content
---------------------------------------------------------- */

#main-content {

    min-height: 60vh;

}

/* ==========================================================
   Content Sections
========================================================== */

.content-section {

   
    padding-block: var(--altmann-section-space);
   
}


.content-section__title {
    border-bottom:1px solid var(--altmann-primary);
}



/* ==========================================================
   Responsive Tabellen
   ========================================================== */

.ce-table {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767.98px) {

    .frame-type-table {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .frame-type-table .ce-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        overflow: hidden;
    }

}

/* ==========================================================
   Responsive Medien-Galerien
   ========================================================== */

@media (max-width: 767.98px) {

    .ce-gallery[data-ce-columns="2"] .ce-row {
        display: block;
    }

    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: 100%;
    }

    .ce-gallery[data-ce-columns="2"] .ce-column:not(:last-child) {
        margin-bottom: var(--altmann-space-md);
    }

    .ce-gallery[data-ce-columns="2"] .audio-embed {
        width: 100% !important;
        margin-bottom: 25px;
    }

    .ce-gallery[data-ce-columns="2"] .audio-embed-item {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

}


/* ==========================================================
   Responsive Videos
   ========================================================== */

@media (max-width: 767.98px) {

    .video-embed-item {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

}










.content-section--hero {

    padding-top: 0;

}










/* ----------------------------------------------------------
   Container-Erweiterungen
---------------------------------------------------------- */

/*
   Reserviert für projektspezifische Container,
   z. B.:

   .container-narrow
   .container-wide
   .container-full
*/

/* ----------------------------------------------------------
   Content Utilities
---------------------------------------------------------- */

/*
   Reserviert für spätere Inhalts-Hilfsklassen.
*/



/* ==========================================================
    Kapitel 08 - Hero
========================================================== */

/* Hero direkt unter Navigation */
.altmann-main > .altmann-hero:first-child {

    margin-top: 0;

}

/* Give the first regular content element room after a hero. */
.content-section .frame-type-hero + .frame,
.content-section .frame:has(.altmann-hero) + .frame {

    margin-top: var(--altmann-frame-space);

}



.altmann-hero {
        position: relative;
        min-height: var(--altmann-hero-height);  
    
        display: flex;
        align-items: center;
        overflow: hidden;
}


/* Hero Container */

.altmann-hero__container {

    position: relative;
    z-index: 3;

}


/* Hero Background */

.altmann-hero__background { 
        position: absolute;
        inset: 0;
        background-color: var(--altmann-primary-light);
        z-index:0;
}



.altmann-hero__image {

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    
    transform:scale(1.05);

    animation:
        heroImageZoom 8s ease-out forwards;
    

}


/* Hero Overlay */

.altmann-hero__overlay { 
        position: absolute;
        inset: 0;
        z-index:2;
        background: var(--altmann-hero-overlay);

}

/* Hero Content */

.altmann-hero__content {
        position: relative;
        z-index: 3;
    
        /*   vorher:  padding-block: 5rem;  */  
        max-width: var(--altmann-hero-content-width);
    
        opacity: 0;
    /*   vorher: 
        transform: translateY(25px);    */   
        transform: translateY(var(--altmann-hero-content-offset));

        animation:
        heroContentFade .9s ease-out forwards; 
    
    
}





/* Hero Eyebrow */
.altmann-hero__eyebrow {

        display: inline-block;
        margin-bottom: 1rem;
        color: rgba(255,255,255,.85);
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;

}




/* Hero Title */

.altmann-hero__title {

    font-size: var(--altmann-hero-title-size);

    margin-bottom: 1rem;

    color: var(--altmann-white);

    font-weight: 400;
    line-height: 1.05;

    text-transform: uppercase;
    letter-spacing: 0.1em;

}

/* Hero Text */

.altmann-hero__text {
        max-width:650px;
        margin-bottom: 2rem;
        color: rgba(255,255,255,.95);
        /*  vorher:  color: var(--altmann-white);  */  
    
        font-size: var(--altmann-hero-text-size);

         /*  vorher:  font-size: var(--altmann-font-normal);  */  
    
        line-height: 1.7;
    
    
    
}

/* Hero Buttons */

.altmann-hero__buttons {
    
    /*  vorher:  margin-top: var(--altmann-space-lg);  */  
    
        display: flex;
        gap: var(--altmann-hero-button-gap);
        flex-wrap: wrap;
    
        opacity:0;

        animation:
        heroButtons .8s ease .45s forwards;
    
        margin-top: 2rem;
    
    
}




/* ==========================
   Hero Scroll Indicator
========================== */

.altmann-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 20;
}



.altmann-hero__scroll a {

        color: var(--altmann-white);
        font-size:2rem;
        text-decoration:none;

}

.altmann-hero__scroll-link {
    display: inline-flex;
    text-decoration: none;
}



/* hero mouse und hero wheel   */    
.altmann-hero__mouse {
    width: 34px;
    height: 56px;
    border: 2px solid #fff;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.altmann-hero__wheel {
    width: 4px;
    height: 10px;
    background: #fff;
    border-radius: 2px;
    animation: heroScroll 2s infinite;
}


/* ----------------------------------------------------------
   Hero Varianten
---------------------------------------------------------- */

/*

Später:

.altmann-hero--small

.altmann-hero--large

.altmann-hero--center

.altmann-hero--dark

.altmann-hero--video

.altmann-hero--slider

*/


/* ==========================================================
    Kapitel 09 - Buttons
========================================================== */



.btn-primary {

    --bs-btn-color: var(--altmann-button-text);

    --bs-btn-bg: var(--altmann-button-primary);

    --bs-btn-border-color: var(--altmann-button-border);

    --bs-btn-hover-color: var(--altmann-button-text);

    --bs-btn-hover-bg: var(--altmann-button-hover-bg);

    --bs-btn-hover-border-color: var(--altmann-button-hover-border);

}


/* ----------------------------------------------------------
   Bootstrap Outline  - Im Moment nur als Platzhalter.
---------------------------------------------------------- */
    
/*

Später:

.btn-outline-primary

.btn-outline-secondary

*/

/* ----------------------------------------------------------
   Bootstrap Focus
---------------------------------------------------------- */

.btn:focus-visible {

    box-shadow: none;

}


/* ----------------------------------------------------------
   Bootstrap Disabled
---------------------------------------------------------- */

.btn:disabled {

    opacity: .65;

}


/* ----------------------------------------------------------
   Bootstrap Größen
---------------------------------------------------------- */

/*

Später:

.btn-lg

.btn-sm

*/



/* ==========================================================
    Kapitel 01.10 - Eigene Komponenten
========================================================== */


/* ==========================================================
   Komponenten - Altmann Button 
========================================================== */

.altmann-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        var(--altmann-button-padding-y)
        var(--altmann-button-padding-x);

    background: var(--altmann-button-bg);
    color: var(--altmann-button-text);

    border: 1px solid var(--altmann-button-border);
    border-radius: var(--altmann-button-radius);

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--altmann-button-transition),
        border-color var(--altmann-button-transition),
        color var(--altmann-button-transition),
        transform var(--altmann-button-transition),
        box-shadow var(--altmann-button-transition);

}

 /*  Altmann Button Hover */  

.altmann-button:hover {

    background: var(--altmann-button-hover-bg);

    border-color: var(--altmann-button-hover-border);

    color: var(--altmann-button-text);

    transform: translateY(-2px);

    box-shadow: var(--altmann-shadow-md);

}

 /*  Altmann Button Active */  

.altmann-button:active {

    transform: translateY(0);

}


 /*  Altmann Button Focus */

.altmann-button:focus-visible {

    outline: 3px solid var(--altmann-primary-light);

    outline-offset: 3px;

}

 /*  Altmann Button Disabled */

.altmann-button:disabled,
.altmann-button.disabled {

    opacity: .5;

    cursor: default;

    pointer-events: none;

}

 /*  Altmann Button Platzhalter Icon / Text */

.altmann-button__icon {

}

.altmann-button__text {

}

 /*  Altmann Button Outline Button */


.altmann-button--outline {

    background: transparent;

    border: 2px solid var(--altmann-button-outline-color);

    color: var(--altmann-button-outline-color);

}

.altmann-button--outline:hover {

    background: var(--altmann-button-outline-hover-bg);

    color: var(--altmann-button-outline-hover-color);

    border-color: var(--altmann-button-outline-hover-bg);

}

/* Secondary button for light component backgrounds */
.altmann-button--secondary {

    background: transparent;
    border-color: var(--altmann-primary);
    color: var(--altmann-primary);

}

.altmann-button--secondary:hover {

    background: var(--altmann-primary);
    border-color: var(--altmann-primary);
    color: var(--altmann-white);

}


/* ==========================================================
   Komponenten - Call to Action
========================================================== */

.altmann-cta {

    margin-block: var(--altmann-frame-space);
    padding-block: var(--altmann-space-xl);
    background: var(--altmann-primary-active);
    border-block: 1px solid var(--altmann-border);

}

.altmann-cta__content {

    max-width: var(--altmann-content-width);

}

.altmann-cta__title {

    margin-bottom: var(--altmann-space-md);

}

.altmann-cta__text > :last-child {

    margin-bottom: 0;

}

.altmann-cta__buttons {

    display: flex;
    flex-wrap: wrap;
    gap: var(--altmann-space-md);
    margin-top: var(--altmann-space-lg);

}

@media (max-width: 575.98px) {

    .altmann-cta__buttons .altmann-button {

        width: 100%;

    }

}


/* -----------------------------
   Komponenten - Altmann Card 
-------------------------------- */

    .altmann-card {

        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--altmann-card-bg);
        border: 1px solid var(--altmann-card-border);
        border-radius: var(--altmann-card-radius);
        overflow: hidden;
        box-shadow: var(--altmann-card-shadow);
        transition:

        transform var(--altmann-card-transition),
        box-shadow var(--altmann-card-transition);

}


    .altmann-card:hover {

        transform: translateY(-6px);
        box-shadow: var(--altmann-card-shadow-hover);

}


    .altmann-card__image {

        display: block;
        width: 100%;
        height: auto;
        
        /*
        Später können wir daraus auch machen:
            object-fit: cover;
            aspect-ratio: 16 / 9;
        */
        

}


    .altmann-card__body {

        padding: var(--altmann-card-padding);
        flex: 1;

}

    .altmann-card__title {

        margin-bottom: .75rem;
        color: var(--altmann-primary);
        font-size: 1.35rem;

}


    .altmann-card__text {

        color: var(--altmann-text);
        line-height: 1.6;

}

.altmann-card__footer {

        padding:

            0
            var(--altmann-card-padding)
            var(--altmann-card-padding);

}

.altmann-card-grid-section {

    margin-block: var(--altmann-frame-space);

}

.altmann-card-grid-section__title {

    margin-bottom: var(--altmann-space-lg);

}

.altmann-card-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--altmann-card-gap);

}

/* A single thematic card should not span the full desktop container. */
@media (min-width: 768px) {

    .altmann-card-grid:not(:has(.altmann-card:nth-child(2))) {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

.altmann-card__image-link {

    display: block;

}

.altmann-card__title a {

    color: inherit;
    text-decoration: none;

}

.altmann-card__title a:hover {

    text-decoration: underline;

}


/* ----------------------------------------------------------
   Altmann Hero
---------------------------------------------------------- */

/*

Reserviert für eigenständige Hero-Varianten.

Beispielsweise:

.altmann-hero--small

.altmann-hero--video

.altmann-hero--slider

.altmann-hero--fullscreen

*/


/* ----------------------------------------------------------
   Altmann Accordion
---------------------------------------------------------- */

/* folgt später */




/* ----------------------------------------------------------
   Altmann CTA
---------------------------------------------------------- */

/* folgt später */


/* ----------------------------------------------------------
   Altmann Gallery
---------------------------------------------------------- */

/* folgt später */










/* ==========================================================
   Kapitel 01.11   TYPO3 Inhaltselemente
========================================================== */

/* ------------------------------------------
   11.01 TYPO3 Frames - Grundabstand aller TYPO3 Inhaltselemente
------------------------------------------ */

/* ----------------------------------------------------------
   TYPO3 Frame
---------------------------------------------------------- */

.frame {

    /*  vorher margin-bottom: var(--altmann-space-xl);  */  
     margin-bottom: var(--altmann-frame-space);
}


/* Letztes Inhaltselement */

.frame:last-child {

    margin-bottom: 0;

}

/* ==========================================================
    Kapitel 11.02 - TYPO3 Text
========================================================== */

/* ----------------------------------------------------------
   TYPO3 Bodytext
---------------------------------------------------------- */

.ce-bodytext {

    line-height: var(--altmann-line-height-body);

}

/* ----------------------------------------------------------
   TYPO3 Überschriften
---------------------------------------------------------- */

.ce-bodytext header {

    margin-bottom: var(--altmann-space-md);

}

.ce-bodytext > header:first-child {

    margin-top: 0;

}

.ce-bodytext > header:first-child h2 {

    margin-top: 0;

}

/* ----------------------------------------------------------
   TYPO3 Absätze
---------------------------------------------------------- */

.ce-bodytext p:last-child {

    margin-bottom: 0;

}

.ce-bodytext > *:last-child {

    margin-bottom: 0;

}

/* ----------------------------------------------------------
   TYPO3 Links
---------------------------------------------------------- */

.ce-bodytext a {

    color: var(--altmann-primary);

    text-decoration: underline;

    text-underline-offset: .15em;

}

.ce-bodytext a:hover {

    color: var(--altmann-success);

}

/* ----------------------------------------------------------
   TYPO3 Horizontale Linien
---------------------------------------------------------- */

.ce-bodytext hr {

    margin-block: var(--altmann-space-xl);

    border: 0;

    border-top: 1px solid var(--altmann-border);

}

/* ----------------------------------------------------------
   TYPO3 Figure
---------------------------------------------------------- */

.ce-bodytext figure {

    margin: 0;

}



/* ----------------------------------------------------------
   TYPO3 Figcaption
---------------------------------------------------------- */

.ce-bodytext figcaption {

    margin-top: .5rem;

    color: var(--altmann-text-light);

    font-size: .9rem;

    text-align: center;
    

}

/* ----------------------------------------------------------
   TYPO3 Blockquote
---------------------------------------------------------- */

/*

blockquote

blockquote footer

*/


/* ==========================================================
    Kapitel 11.03 - TYPO3 Listen
========================================================== */

/* ----------------------------------------------------------
   TYPO3 Listen
---------------------------------------------------------- */

.ce-bodytext ul,
.ce-bodytext ol {

    margin-bottom: var(--altmann-space-md);

    padding-left: 1.5rem;

}

/* ----------------------------------------------------------
   TYPO3 Listenelemente
---------------------------------------------------------- */

.ce-bodytext li {

    margin-bottom: .4rem;

    line-height: var(--altmann-line-height-body);

}

/* ----------------------------------------------------------
   TYPO3 Verschachtelte Listen
---------------------------------------------------------- */

.ce-bodytext li ul,
.ce-bodytext li ol {

    margin-top: .5rem;

    margin-bottom: 0;

}

/* ----------------------------------------------------------
   TYPO3 Letztes Listenelement
---------------------------------------------------------- */

.ce-bodytext li:last-child {

    margin-bottom: 0;

}


/* ----------------------------------------------------------
   TYPO3 Definitionslisten
---------------------------------------------------------- */

/*

.ce-bodytext dl

.ce-bodytext dt

.ce-bodytext dd

*/





/* ==========================================================
    Kapitel 11.04 - TYPO3 Bilder
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Bild
---------------------------------------------------------- */

.ce-image img,
.ce-gallery img {

    display: block;

    max-width: 100%;

    height: auto;

    border-radius: var(--altmann-radius-sm);

}


/* ----------------------------------------------------------
   TYPO3 Figure
---------------------------------------------------------- */

.ce-image figure,
.ce-gallery figure {

    margin: 0;

    overflow: hidden;

    border-radius: var(--altmann-radius-sm);

}


/* ----------------------------------------------------------
   TYPO3 Image Embed
---------------------------------------------------------- */

.ce-gallery .image-embed-item {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: inherit;

    transition:
        transform var(--altmann-transition),
        box-shadow var(--altmann-transition);

}

/* Uniform gallery previews; the linked original file remains unchanged. */
.ce-gallery .image-embed-item img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}


/* ----------------------------------------------------------
   TYPO3 Bild Hover
---------------------------------------------------------- */

.ce-gallery:hover .image-embed-item {

    transform: scale(1.02);

    box-shadow: var(--altmann-shadow-md);

}


/* ----------------------------------------------------------
   TYPO3 Galerie
---------------------------------------------------------- */

.ce-gallery {

    margin-bottom: var(--altmann-space-md);

}


/* ----------------------------------------------------------
   TYPO3 Galerie Zeile
---------------------------------------------------------- */

.ce-row {

    display: flex;

    gap: var(--altmann-space-md);

}

/* TYPO3 creates a new row for each image in one-column galleries. */
.ce-gallery .ce-row {

    margin-bottom: var(--altmann-space-md);

}

.ce-gallery .ce-row:last-child {

    margin-bottom: 0;

}

/* ----------------------------------------------------------
   Altmann Lightbox
----------------------------------------------------------- */

body.altmann-lightbox-open {

    overflow: hidden;

}

.altmann-lightbox-overlay {

    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: var(--altmann-space-lg);
    background: rgba(0, 0, 0, .88);

}

.altmann-lightbox-overlay[hidden] {

    display: none;

}

.altmann-lightbox-dialog {

    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 1200px);
    max-height: 100%;

}

.altmann-lightbox-figure {

    margin: 0;
    text-align: center;

}

.altmann-lightbox-image {

    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    margin-inline: auto;
    object-fit: contain;

}

.altmann-lightbox-caption {

    margin-top: var(--altmann-space-sm);
    color: var(--altmann-white);

}

.altmann-lightbox-close,
.altmann-lightbox-prev,
.altmann-lightbox-next {

    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: var(--altmann-white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;

}

.altmann-lightbox-close {

    top: -3.25rem;
    right: 0;

}

.altmann-lightbox-prev {

    top: 50%;
    left: -3.5rem;
    transform: translateY(-50%);

}

.altmann-lightbox-next {

    top: 50%;
    right: -3.5rem;
    transform: translateY(-50%);

}

.altmann-lightbox-close:hover,
.altmann-lightbox-prev:hover,
.altmann-lightbox-next:hover {

    background: var(--altmann-primary);

}

.altmann-lightbox-close:focus-visible,
.altmann-lightbox-prev:focus-visible,
.altmann-lightbox-next:focus-visible {

    outline: 3px solid var(--altmann-primary-light);
    outline-offset: 3px;

}

@media (max-width: 767.98px) {

    .altmann-lightbox-overlay {

        padding: var(--altmann-space-md);

    }

    .altmann-lightbox-image {

        max-height: calc(100vh - 6rem);

    }

    .altmann-lightbox-close {

        top: -3rem;

    }

    .altmann-lightbox-prev {

        left: .25rem;

    }

    .altmann-lightbox-next {

        right: .25rem;

    }

}


/* ----------------------------------------------------------
   TYPO3 Bildunterschrift
---------------------------------------------------------- */

.ce-gallery figcaption {

    margin-top: .5rem;

    color: var(--altmann-text-light);

    font-size: .9rem;

    text-align: center;

}


/* ----------------------------------------------------------
   TYPO3 Mehrere Bilder
---------------------------------------------------------- */

/*

data-ce-columns

Galerie

Grid

Masonry

folgt später

*/


/* ----------------------------------------------------------
   TYPO3 Lazy Loading
---------------------------------------------------------- */

/*

loading="lazy"

decoding="async"

folgt später

*/

/* ==========================================================
    Kapitel 11.05 - TYPO3 Text & Medien (Premium)
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Flexbox Layout
---------------------------------------------------------- */

.ce-textpic,
.ce-textpic.ce-left,
.ce-textpic.ce-right,
.ce-textpic.ce-intext,
.ce-textpic.ce-above,
.ce-textpic.ce-below {

    display: flex;

    align-items: flex-start;

    gap: var(--altmann-media-gap);

    margin-bottom: var(--altmann-frame-space);

}


/* ----------------------------------------------------------
   TYPO3 Bild links
---------------------------------------------------------- */

.ce-textpic.ce-left,
.ce-textpic.ce-intext.ce-left {

    flex-direction: row;

}


/* ----------------------------------------------------------
   TYPO3 Bild rechts
---------------------------------------------------------- */

.ce-textpic.ce-right,
.ce-textpic.ce-intext.ce-right {

    flex-direction: row-reverse;

}


/* ----------------------------------------------------------
   TYPO3 Bild oben
---------------------------------------------------------- */

.ce-textpic.ce-above {

    display: block;

}


/* ----------------------------------------------------------
   TYPO3 Bild unten
---------------------------------------------------------- */

.ce-textpic.ce-below {

    display: flex;

    flex-direction: column-reverse;

}


/* ----------------------------------------------------------
   TYPO3 Bildbereich
---------------------------------------------------------- */

.ce-textpic .ce-gallery {

    flex: 0 0 var(--altmann-textmedia-image-width);

    margin: 0;

}


/* ----------------------------------------------------------
   TYPO3 Textbereich
---------------------------------------------------------- */

.ce-textpic .ce-bodytext {

    flex: 1 1 auto;

    min-width: 0;

    line-height: var(--altmann-line-height-body);

}





/* ==========================================================
   Typo3 Kapitel 11.05 Responsive
========================================================== */

@media (max-width:991.98px){

    .ce-textpic,
    .ce-textpic.ce-left,
    .ce-textpic.ce-right,
    .ce-textpic.ce-intext.ce-left,
    .ce-textpic.ce-intext.ce-right{

        display:flex;

        flex-direction:column;

        gap:var(--altmann-space-lg);

    }


  .ce-textpic .ce-gallery{

        flex:0 0 auto;

        width:100%;

    }

}


/* ==========================================================
    Kapitel 11.06 - TYPO3 Tabellen
========================================================== */

/* ----------------------------------------------------------
   TYPO3 Tabelle
---------------------------------------------------------- */

.ce-table {

    width: 100%;

    margin-bottom: var(--altmann-frame-space);

}


/* ----------------------------------------------------------
   TYPO3 Table
---------------------------------------------------------- */

.ce-table table {

    width: 100%;

    border-collapse: collapse;

}

/* ----------------------------------------------------------
   TYPO3 Tabellenkopf
---------------------------------------------------------- */

.ce-table th {

    padding: .85rem 1rem;

    background: var(--altmann-primary);

    color: var(--altmann-white);

    text-align: left;

    font-weight: 600;

}


/* ----------------------------------------------------------
   TYPO3 Tabellenzellen
---------------------------------------------------------- */

.ce-table td {

    padding: .85rem 1rem;

    border-bottom: 1px solid var(--altmann-border);

}

/* ----------------------------------------------------------
   TYPO3 Tabellen Zebra
---------------------------------------------------------- */

.ce-table tbody tr:nth-child(even) {

    background: rgba(2,106,59,.03);

}

/* ----------------------------------------------------------
   TYPO3 Tabellen Hover
---------------------------------------------------------- */

.ce-table tbody tr:hover {

    background: rgba(2,106,59,.08);

}


/* ----------------------------------------------------------
   TYPO3 Tabellen Responsive
---------------------------------------------------------- */

.ce-table {

    overflow-x: auto;

}


/* ==========================================================
    Kapitel 11.07 - TYPO3 Downloads
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Downloadliste
---------------------------------------------------------- */

.ce-uploads {

    margin-bottom: var(--altmann-frame-space);

}


/* ----------------------------------------------------------
   TYPO3 Downloadelement
---------------------------------------------------------- */

.ce-uploads li {

    display: flex;

    align-items: center;

    gap: .75rem;

    padding: .75rem 0;

    border-bottom: 1px solid var(--altmann-border);

}


/* ----------------------------------------------------------
   TYPO3 Downloadlink
---------------------------------------------------------- */

.ce-uploads a {

    color: var(--altmann-primary);

    text-decoration: none;

}

.ce-uploads a:hover {

    color: var(--altmann-success);

}


/* ==========================================================
    Kapitel 11.08 - TYPO3 Dateilinks
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Dateilink
---------------------------------------------------------- */

.filelink {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

}


/* ----------------------------------------------------------
   TYPO3 Dateigröße
---------------------------------------------------------- */

.filelink .filesize {

    color: var(--altmann-text-light);

    font-size: .9rem;

}


/* ==========================================================
    Kapitel 11.09 - TYPO3 Audio
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Audio
---------------------------------------------------------- */

.ce-audio audio {

    width: 100%;

    margin-bottom: var(--altmann-frame-space);

}


/* ==========================================================
    Kapitel 11.10 - TYPO3 Video
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Video
---------------------------------------------------------- */

.ce-video iframe,
.ce-video video {

    width: 100%;

    border: 0;

    border-radius: var(--altmann-radius-sm);
    
        /*   Später können wir hier noch ein 16:9-Responsive-Layout ergänzen.   */   

}

/* ==========================================================
    Kapitel 11.11 - TYPO3 Formulare
========================================================== */


/* ----------------------------------------------------------
   TYPO3 Formulare
---------------------------------------------------------- */

/*

Form Framework

Input

Textarea

Select

Checkbox

Radio

Buttons

Validation

folgt später

Der Grund: Das TYPO3 Form Framework bringt viele Klassen und Zustände mit. 
Dafür lohnt sich ein eigenes, sorgfältig aufgebautes Kapitel, 
anstatt jetzt nur ein paar verstreute Regeln einzufügen.

*/















/* ==========================================================
   Navigation
========================================================== */



#mainNavigation {
        position: sticky;
        top: 0;
        z-index: 1020;
        background-color: var(--altmann-navbar-bg);
    
        --bs-navbar-color: var(--altmann-navbar-link);
        --bs-navbar-hover-color: var(--altmann-navbar-link-hover);
        --bs-navbar-active-color: var(--altmann-navbar-link-active);
    
        }





#mainNavigation .navbar-nav {

    gap: .25rem;
    /*  align-items: center;  - falls später mehr Abstand benötigt wird.  */

}



#mainNavigation .navbar-brand {

                      }





#mainNavigation .nav-link {
    /* früher getestet -- color: var(--altmann-primary-light);   */
    
    color: var(--altmann-navbar-link);
    
    padding:  
    var(--altmann-space-sm)
    var(--altmann-space-md);
    
    transition: 
    color var(--altmann-transition),
    background-color var(--altmann-transition);
    
}

#mainNavigation .nav-link:hover {
    
    color: var(--altmann-navbar-link-hover);
    background-color: rgba(255,255,255,.05);
                        }


#mainNavigation .nav-link.active {

    color: var(--altmann-navbar-link-active);
    /*   font-weight: 600;   menü ruckelt - wegen unterschiedlicher Schriftgrößen - ist nicht gut  */  
    
    
                         }


#mainNavigation .dropdown-menu {



    background-color: var(--altmann-dropdown-bg);
    /* frühere Anweisung border-color: var(--altmann-border);  */  
    
    box-shadow: var(--altmann-shadow-dropdown);
    
    border-radius: var(--altmann-radius-md);

    margin-top: .35rem;
    padding: .35rem 0;
    
    border: 1px solid var(--altmann-border);

}


#mainNavigation .dropdown-menu.show {

    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}




#mainNavigation .dropdown-item {
        color: var(--altmann-dropdown-link);
        padding:
        var(--altmann-space-sm)
        var(--altmann-space-lg);
        border-radius: .25rem;
        /* 
        transition:
        background-color .25s ease,
        color .25s ease;
        */  
}


#mainNavigation .dropdown-item.active {
           
            background-color: var(--altmann-primary);
            color: var(--altmann-dropdown-link-hover);
            font-weight: 400;
}

#mainNavigation .dropdown-item:hover {

    background-color: var(--altmann-primary);
    color: var(--altmann-dropdown-link-hover);
    
    transition:
    background-color var(--altmann-transition),
    color var(--altmann-transition);

}

   /*    Brauchen wir nicht mehr? 
#mainNavigation[data-bs-theme="dark"] {
    --bs-navbar-color: var(--altmann-navbar-link);
    --bs-navbar-hover-color: var(--altmann-navbar-link-hover);
    --bs-navbar-active-color: var(--altmann-navbar-link-active);
}
   */  



#mainNavigation .dropdown-divider {

    border-color: var(--altmann-border);

}




/* ==========================================
   Desktop Dropdown Animation
========================================== */




@media (min-width: 992px) {
    
      #mainNavigation .dropdown {
        position: relative;
    }


    #mainNavigation .dropdown::after {

        content:"";
        position:absolute;
        left:0;
        right:0;
        top:100%;
        height:10px;

    }
    
    
    
    
    

    #mainNavigation .dropdown-menu {

        display:block;
        opacity:0;
        visibility:hidden;

        transform:translateY(12px);

        pointer-events:none;

        transition:
        opacity var(--altmann-transition-dropdown),
        transform var(--altmann-transition-dropdown);

    }


    #mainNavigation .dropdown:hover > .dropdown-menu,
    #mainNavigation .dropdown-menu:hover {

        opacity:1;
        visibility:visible;

        transform:translateY(0);

        pointer-events:auto;

    }

}


























/* ==========================================================
   Komponenten
========================================================== */







/* -----------------------------
   Animationen 
-------------------------------- */


@keyframes heroContentFade {

    from {

        opacity: 0;
        /*   vorher:  transform: translateY(25px);  */   
        transform: translateY(var(--altmann-hero-content-offset));

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}



@keyframes heroImageZoom {

    from {

        transform:scale(1.12);

    }

    to {

        transform:scale(1.05);

    }

}


@keyframes heroButtons {

    from {

        opacity:0;
        transform:translateY(10px);

    }

    to {

        opacity:1;
        transform:translateY(0);

    }

}




@keyframes heroScroll {

    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(12px);
        opacity: .2;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}



@keyframes heroFadeUp {

    from {

        opacity: 0;
        transform: translateY(35px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}










/* ==========================================================
   Formulare
========================================================== */







/* ==========================================================
   Footer
========================================================== */




/* ==========================================================
   Utilities
========================================================== */















/* ======================================
   DEBUG BLOCK
====================================== */





/* ==========================================================
   Responsive
========================================================== */





/* Bootstrap < lg
   Smartphones und Tablets
========================================================== */

@media (max-width: 991.98px) {

    .altmann-header__contact {
        text-align: left;
        padding-top: 0.5rem;
    }
    
    .altmann-hero {

        min-height: 380px;   
        
    }
    

    
    
    
    .altmann-hero__content {

        text-align: center;

    }

    .altmann-hero__buttons {

        justify-content: center;

    }
    
    
    
    


}




    
    
    
  /* Medium devices (Bootstrap md) */
@media (max-width: 767.98px) {

     .altmann-header__logo {
        max-width: 90px;
    }
    
     .altmann-hero {
        min-height: 60vh;
    }
    

    :root {
        
        --altmann-hero-text-size: 1rem;
    }
    
    
    /*    Medium Devices 767.98 Typo3 Elemente   */   
    
    .ce-textpic.ce-intext.ce-left,
    .ce-textpic.ce-intext.ce-right {
        flex-direction: column;
        gap: var(--altmann-space-lg);
    }

    .ce-textpic.ce-intext .ce-gallery {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    .ce-textpic.ce-intext .ce-bodytext {
        max-width: none;
    }  
    
    
    
    
    
 
}  
    
 







    
    
    
    

 /* Small devices (Bootstrap sm) */
@media (max-width: 575.98px) {
    
     .altmann-header__logo {
        max-width: 90px;
    }

    .altmann-header__title {
        font-size: calc(var(--altmann-font-large) * .6);
    }
    
    .altmann-header__slogan {
        font-size: 0.9rem;
    }
    

    .altmann-header__contact {
        text-align: left;
        font-size: 0.85rem;
    }
    
        .altmann-hero {
        min-height: 60vh;
    }
    
    
    
    .altmann-hero__content {
        padding: 2rem 1rem;
    }

    .altmann-hero__title {
        font-size: clamp(2rem, 9vw, 2.4rem);
        letter-spacing: .06em;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }
    
    
     .altmann-hero__buttons {
        flex-direction: column;
        width: 100%;
    }

    .altmann-hero__scroll {
        display: none;
    }

    .altmann-hero__buttons .btn {
        width: 100%;
    }
    
    
    

}

    


    




/* ==========================================================
   Testbereich
========================================================== */