@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont.woff2') format('woff2-variations'),
         url('../fonts/Inter-Italic-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal italic;
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif; 
    background: #fff;
    color: #000;
    line-height: 1.5;
    position: relative; 
}

*[id] {
    scroll-margin-top: 40px;
}


header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px 0 20px; 
    margin: 0 auto;
    max-width: 800px;
    box-sizing: border-box;
}

header h1 {
    margin-top: auto; 
}

.line-section {
    margin-top: auto;
}

.dreiklang
{
    max-width: 800px; 
    margin: 0 auto;
    padding: 60px 20px;
    text-align: left;
    box-sizing: border-box;
}

.legal {
  flex-direction: column;  
}    


.manifest
{
    max-width: 800px; 
    margin: 0 auto;
    padding: 60px 0px;
    text-align: left;
    box-sizing: border-box;
}

.die-10-etagen{
    max-width: 800px; 
    margin: 0 auto;
    padding: 0px 20px;
    text-align: left;
    box-sizing: border-box;
}

.etage {
    max-width: 800px; 
    margin: 0 auto;
    padding: 80px 0px;
    text-align: left;
    box-sizing: border-box;
}

p, .subline, .intro, .rule-line {
    max-width: 600px;
    margin: 0 0 1.5em 0;
    font-size: 16px;
}

h1, h2, h3 {
    margin: 0 0 20px 0;
    font-weight: 700;
    line-height: 1.2;
    max-width: 600px; 
}

h1 {
    margin: 0;
}

.license{
    margin: 20px 0;
    font-size: 12px;
    font-weight : 500 !important;
}

/* ============================================================== */
/* 3. SPEZIFISCHE ELEMENTE (Seite 1 & 2)                         */
/* ============================================================== */


header {
    text-align: center;
    padding-top: 60px;
}
header h1, header p { margin-left: auto; margin-right: auto; }

.title, h1 { font-size: 3.6em; white-space: pre-line; }

.vertical-line {
    width: 1px;
    height: 50px;
    background: #000;
    margin: 20px auto;
}

/* Badge & Hero Seite 2 */
.oul-badge {
    display: inline-block;
    border: 1px solid #000;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

/* Dreiklang Seite 1 */
.dreiklang {
    display: flex;
    gap: 80px;
    padding-bottom: 60px;
}
.dreiklang .column { flex: 1; }
.dreiklang .head { font-size: 18px; font-weight: 700; margin-bottom: 8px; }

/* Gemeinsame Abstände für die Listen */
.manifest ul, .step-container {
    list-style: none;
    padding: 0;
    margin: 32px 0;
}

.manifest li, .step-block {
    margin-bottom: 32px;
    line-height: 1.5;
}

/* Sektion 8 & 9: Hauptwort in eigener Zeile mit Bulletpoint */
.manifest li strong {
    display: block;
    margin-bottom: 4px;
    position: relative;
    padding-left: 0px;
}

a.link-ohne{
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

a.link-ohne:hover{
    text-decoration: underline;
    color: inherit;
    text-underline-offset: 4px;
}

.step-link {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    margin-bottom: 4px;
}

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


.step-text {
    display: block;
}

/* Button Styling (linksbündig) */
.step-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    margin-bottom: 12px; /* Abstand zum Text darunter */
    transition: background 0.2s;
}

.step-button:hover {
    background-color: #f0f0f0;
}

/* Der Text unter dem Button */
.step-text {
    display: block;
    line-height: 1.5;
}


/* ============================================================== */
/* 4. ETAGEN GRID & DETAILS (Seite 2)                            */
/* ============================================================== */

/* --- Hero-Bereich Seite 2 --- */

.container-narrow{
    text-align: left;
    align-items: left;
    display: flex;
    flex-direction: row;
    margin: 0px auto;
    max-width: 800px;
    width: 100%;
}

.hero-subpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.hero-inner, 
.etagen-overview {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.hero-inner .rule-line {font-size: 14px!important;}

.hero-subpage p, 
.hero-subpage .subline, 
.hero-subpage .intro {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Grid-Reihen zentrieren */
.grid-row {
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-bottom: 18px;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;   
    
    padding: 60px 20px 60px 20px;
}

.hero-inner h1 {
    font-size: 2em!important;
    margin: 0;
}

.hero-inner p, 
.hero-inner span {
    margin: 0;
}

.hero-inner .oul-badge {
    align-self: center;
}

.etagen-intro {margin-top: 40px;}
.etagen-liste ul { list-style: none; padding: 0; margin: 0px 0 60px 0; }
.etagen-liste li { margin: 12px 0; font-size: 16px; }

.container-grid { display: flex; flex-direction: column; gap: 18px; }
.grid-row { display: flex; gap: 18px;     flex-direction: column;}

.grid-box {
    flex: 1;
    padding: 12px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    text-align: left;
    text-decoration: none;
    transition: all 0.2s;
}
.grid-box:hover { border-color: #000; color: #000; background: #f9f9f9; }

/* Etagen Details */
.title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #0000002e;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.title-block h2 { font-size: 24px; margin: 0; }
.kennziffer { font-family: monospace; font-size: 24px; font-weight: 700; color: #0000002e;}

.leitfrage label {     font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px; }
.leitfrage p { font-size: 16px; max-width: 800px; }

.bulletpoints { display: flex; gap: 60px; margin-top: 30px; }
.bulletpoints h3 { font-size: 16px; margin-bottom: 10px; }
.bulletpoints ul { list-style: disc; padding-left: 20px; font-size: 15px; }

/* SECTION 5 */
#section-5-zahlen .zahlen-container-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alles starr nach links */
    width: 100%;
    padding: 20px 0;
}

#section-5-zahlen .zahlen-block {
    margin-bottom: 20px;
}

#section-5-zahlen .denkbewegung-text {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

#section-5-zahlen .zahlen-formel {
    font-family: monospace;
    font-size: 1.6rem;
    letter-spacing: 15px;
    margin-bottom: 15px;
}

#section-5-zahlen .zahlen-beschreibung {
    margin-bottom: 5px;
    font-weight: normal;
}

#section-5-zahlen .zahlen-fazit {
    font-weight: bold;
}

/* SECTION 6 */
/* Header Bereich linksbündig */
#section-6-bewegungen .sub-headline {
    margin-top: 10px;
    font-size: 1.1rem;
    text-align: left;
}

/* Grid mit extra großem Abstand */
#section-6-bewegungen .bewegungen-grid {
    display: flex;
    justify-content: flex-start;
    gap: 180px; /* Stark vergrößerter Abstand zwischen den Spalten */
    width: 100%;
    padding: 20px 0;
}

#section-6-bewegungen .bewegungs-spalte {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#section-6-bewegungen .spalten-titel {
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: bold;
}

#section-6-bewegungen .spalten-intro {
    margin-bottom: 25px;
}

#section-6-bewegungen .bewegungs-liste {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
    padding: 0;
}

#section-6-bewegungen .bewegungs-liste li {
    margin-bottom: 12px;
}

/* Rahmen-Boxen am Spaltenende */
#section-6-bewegungen .bewegungs-box {
    padding: 20px;
    border: 1px solid #000;
    width: 220px;
    text-align: center;
    margin-bottom: 20px;
}

#section-6-bewegungen .bewegungs-box p {
    margin: 0;
    font-family: monospace;
    font-size: 1rem;
    line-height: 1.5;
}

/* Mobile Fallback */
@media (max-width: 900px) {
    #section-6-bewegungen .bewegungen-grid {
        flex-direction: column;
        gap: 40px;
    }
}

/* Responsive Anpassung für schmale Screens */
@media (max-width: 768px) {
    #section-6-bewegungen .bewegungen-grid {
        flex-direction: column;
        gap:520px;
    }
}


/*SECTION 7*/

/* Header & Sub-Headline */
#section-7-mensch-ki .sub-headline {
    margin-top: 10px;
    font-size: 1.1rem;
    text-align: left;
}

/* Grid-Layout mit großem Spaltenabstand */
#section-7-mensch-ki .denk-grid {
    display: flex;
    justify-content: flex-start;
    gap: 150px; /* Großer Abstand zwischen Mensch und KI */
    width: 100%;
    padding: 20px 0 20px 0;
}

/* Spalten-Styling */
#section-7-mensch-ki .denk-spalte {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#section-7-mensch-ki .spalten-titel {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

#section-7-mensch-ki .spalten-intro {
    margin-bottom: 25px;
}

/* Listen-Styling */
#section-7-mensch-ki .denk-liste {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 25px;
    padding: 0;
}

#section-7-mensch-ki .denk-liste li {
    margin-bottom: 10px;
}

/* Form-Hinweise am Ende der Spalten */
#section-7-mensch-ki .form-hinweis {
    font-style: italic;
    font-size: 0.9rem;
    margin-top: auto;
}

/* Abschließender Satz unten */
#section-7-mensch-ki .footer-note {
    margin-top: 20px;
    padding-bottom: 40px;
}

/* Mobile Anpassung */
@media (max-width: 900px) {
    #section-7-mensch-ki .denk-grid {
        flex-direction: column;
        gap: 50px;
    }
}

/* ============================================================== */
/* 5. NAVIGATION & BUTTONS                                       */
/* ============================================================== */

.buttons { display: flex; flex-wrap: wrap; gap: 15px; padding: 20px 0; }
.buttons .text-button {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 18px 10px 0;
    transition: text-decoration 0.3s;
}
.buttons .text-button:hover { text-decoration: underline; }

.button-secondary {
    display: inline-block;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #000;
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================== */
/* 6. FOOTER & PUNKTE & SCROLL TO TOP BTN                                         */
/* ============================================================== */

footer {
    text-align: center;
    padding: 60px 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-columns { display: flex; justify-content: center; gap: 40px; } 

.footer-columns a{
    text-decoration: none;
    font-weight: 600;
    color: inherit;
}

.footer-columns a:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-legal a{
        text-decoration: none;
        color: inherit;
    }

.footer-legal a:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}

.scroll-points {
    position: absolute; /* Geändert von fixed auf absolute */
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}

.scroll-points div {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
}

#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    color: #000;
    border: 1px solid #000;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px; /* Zentriert den Pfeil optisch */
}

#scrollTopBtn:hover {
    background-color: #f0f0f0;
}


.button-secondary {
    display: inline-flex; /* Geändert für gap-Nutzung */
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #000;
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.pdf-icon {
    width: 14px;
    height: 14px;
}

/* ============================================================== */
/* 7. RESPONSIVE                                                 */
/* ============================================================== */

@media (max-width: 650px) {
    /* Dreiklang von der Startseite untereinander */
    .dreiklang { 
        flex-direction: column; 
        gap: 30px; 
    }

    /* Etagen-Grid auf Seite 2 untereinander */
    .grid-row { 
        flex-direction: column; 
        gap: 5px; 
    }

    /* Bulletpoints in den Etagen-Details untereinander */
    .bulletpoints { 
        flex-direction: column; 
        gap: 30px; 
    }
}


@media (max-width: 900px){
    body{
        padding: 30px;
    }

    .scroll-points {
        left: 10px;
    }

    .scroll-points div {
        width: 6px;
        height: 6px;
        background: #000;
        border-radius: 50%;
    }

    h1{
        font-size: 2.2em !important;
        margin: 0;
        hyphens: auto;
    }

    h2{
        font-size: 1.6em !important;
    }

    .hero-inner{
        padding: 0 0 40px 0;
    }

    .etagen-overview, .grid-row{
        padding: 0;
        margin: 0;
    }

    .container-grid{
        row-gap: 10px;
    }

    .container-etage, header{
        padding: 0 !important;
    }

    .bewegungen-grid{
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    .etage, .manifest{
        padding: 80px 0 40px 0;
    }

    .hero{
        padding: 0 0 60px 0;
    }


}