@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ==========================================================================
   1. RESET & VARIABLEN
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
    --bg-color: #f0f2f7;
    --text-color: #252525;
    --main-color: rgb(51, 19, 231);
    --white-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --border: rgba(0, 0, 0, 0.12);
    --radius-md: 8px;
    --radius-lg: 12px;

    /* horizontaler Rand des Content-Blocks: rechts bewusst etwas groesser als links */
    --content-margin-left: 10.4rem;
    --content-margin-right: 10.4rem;

    --color-background-primary: #ffffff;
    --color-background-secondary: #f5f5f3;
    --color-text-secondary: #6b6b67;
    --color-border-tertiary: rgba(0, 0, 0, 0.12);
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

.dark-mode {
    --bg-color: #000000;
    --text-color: rgb(142, 142, 142);
    --main-color: #dadada;
    --white-color: #000000;
    --shadow-color: rgba(162, 162, 162, 0.49);
    --border: rgba(255, 255, 255, 0.12);
    --color-text-secondary: #6b6b67;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

section {
    min-height: 100vh;
    padding: 10rem 7% 2rem;
}

button {
    background: transparent;
    margin-bottom: 0.23rem;
}


/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 7.4% 2rem 9.4rem;
    background: transparent;
    display: flex;
    align-items: center;
    z-index: 100;
    transition: 0.5s;
}

.header.sticky {
    background: var(--bg-color);
    box-shadow: 0 0.1rem 1rem var(--shadow-color);
}

#projectheading {
    margin-top: 120px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.logo {
    font-size: 2.5rem;
    color: var(--main-color);
    font-weight: 600;
    cursor: default;
    margin-right: auto;
    text-decoration: none;
}

.navbar a {
    position: relative;
    font-size: 1.7rem;
    color: var(--text-color);
    font-weight: 500;
    margin-right: 3.5rem;
    text-decoration: none;
}

.header.sticky .navbar a {
    color: var(--text-color);
}

.header.sticky .navbar a.active {
    color: var(--main-color);
}

.navbar a.active::before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 0.2rem;
    background: var(--main-color);
}

.header.sticky .navbar a::before {
    background: var(--main-color);
    opacity: 0.7;
}

#darkMode-icon {
    font-size: 2.4rem;
    color: var(--main-color);
    cursor: pointer;
}

.header.sticky #darkMode-icon {
    color: var(--text-color);
    opacity: 0.9;
}

#menu-icon {
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}

#btn2 {
    font-size: 3.4rem;
    color: var(--main-color);
    cursor: pointer;
    margin-right: 10px;
    margin-left: 10px;
}

.header.sticky #btn2 {
    color: var(--text-color);
    opacity: 0.9;
}

#pfeiloben {
    color: var(--main-color);
}


/* ==========================================================================
   3. TYPOGRAFIE (global)
   ========================================================================== */

h1 {
    margin: 0;
    text-align: left;
    font-size: 5.1rem;
    color: var(--text-color);
    font-weight: 570;
    margin-bottom: 1rem;
}

h1 span {
    color: var(--main-color);
}

h2 {
    margin: 0;
    text-align: left;
    font-size: 2.3rem;
    color: var(--text-color);
    font-weight: 700;
    margin-top: 3.7rem;
    margin-bottom: -1.4rem;
}

h2 span {
    color: var(--main-color);
}

h3 {
    margin: 0;
    text-align: left;
    font-size: 2.3rem;
    color: var(--text-color);
    font-weight: 700;
    margin-top: 3.7rem;
    margin-bottom: 1rem;
}

h4 {
    margin: 0;
    text-align: left;
    font-size: 2.3rem;
    color: var(--text-color);
    font-weight: 700;
    margin-top: 7.3rem;
    margin-bottom: -2rem;
}

h5 {
    margin: 0;
    text-align: left;
    font-size: 2.3rem;
    color: var(--text-color);
    font-weight: 700;
    margin-top: 1.3rem;
    margin-bottom: 3rem;
}

h7 {
    margin: 0;
    text-align: left;
    font-size: 1.5rem;
    color: var(--text-color);
    font-weight: 500;
    margin-top: 7rem;
    margin-bottom: 3rem;
}

.text-highlight {
    background: color-mix(in srgb, var(--main-color) 10%, transparent);
    color: var(--text-color);
    padding: 0.01em 0.01em;
    border-radius: 1px;
    font-weight: 400;
}

.subheading-sm {
    font-size: 1.8rem;
    font-weight: 570;
    color: var(--text-color);
    margin-top: 7rem;
    margin-bottom: 0.7rem;
}

.subheading-sm2 {
    font-size: 1.8rem;
    font-weight: 570;
    color: var(--text-color);
    margin-top: 2.7rem;
    margin-bottom: -2rem;
}

.placeholder-text {
    font-style: italic;
    opacity: 1;
}


/* ==========================================================================
   4. INTRO / HERO (Projekttitel, Tags, Bild)
   ========================================================================== */

.projekt-titel-wrapper {
    width: 100%;
}

.about-content p {
    font-size: 1.5rem;
    width: 100%;
    margin-top: 0rem;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--text-color);
}

/* Projekt-Tags Übersicht */
.projekt-tags-header {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    margin: 2.4rem 0 0 0;
}

.tag {
    font-size: 1.1rem;
    padding: 6px 16px;
    border-radius: 99px;
    background: var(--main-color);
    border: 1px solid var(--white-color);
    color: var(--white-color);
}

.tag-highlight {
    background: var(--white-color);
    border-color: var(--main-color);
    color: var(--main-color);
}

/* Intro-Zeile: Titel/Tags/Text links, Bild rechts daneben (auf Höhe der Überschrift) */
.intro-row {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    width: calc(100% - var(--content-margin-left) - var(--content-margin-right));
    margin: 19.4rem 0 0 var(--content-margin-left);
}

.intro-text {
    flex: 0 0 var(--intro-text-basis, 51%);
    min-width: 0;
}

.intro-image {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .intro-row {
        flex-direction: column;
    }

    .intro-text {
        flex-basis: auto;
        width: 100%;
    }

    .intro-image {
        width: 100%;
    }
}


/* ==========================================================================
   5. AKKORDION (Grundgerüst)
   ========================================================================== */

.accordion-wrapper {
    width: calc(100% - var(--content-margin-left) - var(--content-margin-right));
    margin-top: 11rem;
    margin-left: var(--content-margin-left);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.accordion-item {
    border: 2px solid #eaeaea;
    border-radius: 7px;
    overflow: hidden;
    background: var(--white-color);
}

.accordion-item:has(.accordion-header[aria-expanded="true"]) {
    
    border: 1px solid #1610ca3e;
}

.accordion-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
    color: var(--text-color);
    text-align: left;
    transition: ease 0.2s;
    /*border-bottom: 0.7px solid var(--border);*/
}

.accordion-header:hover {
    background: var(--white-color);
    color: var(--main-color);
}

.accordion-header[aria-expanded="true"] {
    color: var(--main-color);
    /*border-top: 3px solid var(--main-color);*/
    background: var(--white-color);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
    color: var(--main-color);
}

.accordion-header:hover .accordion-icon {
    color: var(--main-color);
}

.accordion-icon {
    font-style: normal;
    font-size: 2.7rem;
    font-weight: 400;
    color: var(--text-color);
    transition: transform 0.3s ease;
    line-height: 1;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 1.8rem;
}

.accordion-body.open {
    max-height: 4000px;
    padding: 2rem 3rem;
    margin-top: -1.4rem;
    /*border-bottom: 3px solid var(--main-color);*/
}

.accordion-body p {
    font-size: 1.5rem;
    color: var(--text-color);
    line-height: 1.7;
    margin: 0 0 0.1rem;
}


/* ==========================================================================
   6. TABS (Research-Tabs & Konzept-Tabs teilen sich die Optik)
   ========================================================================== */

.research-tabs,
.konzept-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1.7px solid var(--border);
    padding-bottom: 0;
    margin-top: 1.7rem;
}

.research-tab,
.konzept-tab {
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.8rem 1.4rem;
    color: var(--white-color);
    opacity: 0.4;
    background: var(--main-color);
    border-radius: 7px 7px 0 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.research-tab:hover,
.konzept-tab:hover {
    opacity: 1;
    background: transparent;
    border-radius: 7px 7px 0 0;
    border: 0.23rem solid var(--main-color);
    color: var(--main-color);
}

.research-tab.active,
.konzept-tab.active {
    opacity: 1;
    color: var(--white-color);
    /*border-bottom: 7px solid rgb(187, 180, 236);*/
}

.research-tab.active:hover,
.konzept-tab.active:hover {
    opacity: 1;
    color: var(--main-color);
    /*border-bottom: 7px solid rgb(187, 180, 236);*/
}

.research-panel,
.konzept-panel {
    animation: fadeInPanel 0.25s ease;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.page {
    max-width: 1200px;
    margin: 0 auto;
}


/* ==========================================================================
   7. TEXTBAUSTEINE INNERHALB DER PANELS
   ========================================================================== */

.content-section {
    margin-bottom: 2.5rem;
}

.section-label {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 7rem;
    margin-bottom: 1.7rem;
    padding-bottom: 7px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

.section-label:first-of-type {
    margin-top: 0;
}

.section-body {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.75;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.content-card {
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
}

.content-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-card-title i {
    font-size: 16px;
    color: var(--main-color);
}

.content-card p {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.65;
}


/* ==========================================================================
   8. UMFRAGE-AUSWERTUNG: Cards, Stats, Donuts, Bars, Scales, Compare
   ========================================================================== */

.card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 12px;
}

.card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 12px;
    line-height: 1.4;
}

.card-title span {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.highlight-box {
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-md);
    padding: 10px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.highlight-box strong {
    color: var(--text-color);
    font-weight: 500;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-md);
    padding: 1rem;
}

.stat-num {
    font-size: 20px;
    font-weight: 500;
}

.stat-lbl {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.donut-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.donut-row.no-margin {
    margin-bottom: 12px;
}

.donut-wrap {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 1.4rem;
}

.donut-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
}

.donut-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

svg.donut {
    flex-shrink: 0;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bar-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    width: 170px;
    flex-shrink: 0;
    line-height: 1.3;
}

.bar-label.narrow {
    width: 140px;
}

.bar-track {
    flex: 1;
    background: var(--color-background-secondary);
    border-radius: 3px;
    height: 8px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 3px;
}

.bar-pct {
    font-size: 12px;
    font-weight: 500;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.scale-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 64px;
    margin-bottom: 6px;
}

.scale-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.scale-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
}

.scale-labels {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.scale-lbl {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.scale-pct-row {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.scale-pct {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
}

.three-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin-bottom: 10px;
}

.split-item {
    padding: 14px 10px;
    text-align: center;
}

.split-pct {
    font-size: 20px;
    font-weight: 500;
}

.split-lbl {
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.3;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.compare-col-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.compare-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.big-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.big-stat {
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-md);
    padding: 1rem;
}

.big-stat-num {
    font-size: 20px;
    font-weight: 500;
}

.big-stat-lbl {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}


/* ==========================================================================
   9. BILDRAHMEN & BILDRASTER (img-frame, aspect-*, img-grid)
   ========================================================================== */

.img-frame {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.3px solid var(--border);
    box-shadow: 0 0.1rem 0.3rem var(--shadow-color);
    cursor: zoom-in;
    transition: box-shadow 0.25s ease;
}

.img-frame:hover {
    box-shadow: 0 0.4rem 1rem var(--shadow-color);
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
    margin-bottom: 40rem;
}

.img-frame:hover img {
    transform: scale(1.05);
}

.aspect-portrait-soft {
    aspect-ratio: 4 / 5;
}

.aspect-landscape {
    aspect-ratio: 16 / 9;
    margin-bottom: 5rem;
}

.aspect-landscape-2 {
    width: 350px;
    height: 159px;
}

.aspect-landscape-3 {
    aspect-ratio: 13 / 9;
    margin-bottom: 0rem;
}

.aspect-phone {
    aspect-ratio: 9 / 16;
}

.aspect-phone2 {
    aspect-ratio: 17 / 15;
    min-width: 100px;
}

.aspect-idea {
    aspect-ratio: 4.3 / 4;
    margin-bottom: 1rem;
}

.img-single {
    max-width: 380px;
    margin-top: 1.5rem;
}

.img-full {
    width: 100%;
    margin-top: 1.5rem;
}

.img-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.img-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

.img-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================================
   10. TEXT-BILD-ZEILE (Lo-Fi-/Usability-Screens neben Fließtext)
   ========================================================================== */

.text-image-row {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2.7rem;
}

.text-image-row-boxed {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
    margin-bottom: 0.5rem;
}

.text-image-row .text-col {
    flex: 0 1 120px;
    min-width: 730px;
}

.text-image-row .text-col-showcase {
    flex: 1 1 380px;
    min-width: 420px;
}

.text-image-row .text-col2 {
    flex: 0 1 120px;
    min-width: 970px;
}

.text-image-row .text-col3 {
    flex: 0 1 120px;
    min-width: 870px;
}

.text-image-row .image-col {
    flex: 1 1 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    align-items: flex-start;
}

.image-col .img-frame.aspect-phone {
    flex: 1 1 150px;
    max-width: 170px;
    max-height: 252px;
}

.image-col .img-frame.aspect-landscape {
    flex: 1 1 380px;
    max-width: 560px;
}

.image-col .img-frame.aspect-landscape-2 {
    flex: 0 0 auto;
    max-width: 760px;
}

.image-col .img-frame.aspect-landscape-3 {
    flex: 0 0 auto;
    max-width: 760px;
}


.image-col.image-col-compact .img-frame.aspect-phone {
    flex: 0 0 108px;
    max-width: 108px;
    width: 108px;
}

.image-col.image-col-compact .img-frame.aspect-portrait-soft {
    flex: 0 0 260px;
    max-width: 260px;
    width: 260px;
}




.mini-gallery {
    position: relative;
    flex: 1 1 480px;
    max-width: 100px;
    max-height: 410px;
    aspect-ratio: 5 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-left: 1rem;
}

.mini-gallery2 {
    position: relative;
    flex: 1 1 480px;
    max-width: 300px;
    aspect-ratio: 10 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-left: 1rem;
}

.mini-gallery3 {
    position: relative;
    flex: 1 1 480px;
    max-width: 270px;
    aspect-ratio: 13 / 17;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-left: 0rem;
    margin-top: -1.1rem;
}

.mini-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.mini-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.mini-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mini-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 40, 40, 0.35);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 0.2s ease;
    z-index: 2;
    border: none;
}

.mini-gallery-arrow:hover {
    background: rgba(40, 40, 40, 0.55);
}

.mini-gallery-arrow-prev {
    left: 1rem;
}

.mini-gallery-arrow-next {
    right: 1rem;
}


.showcase-right-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 3rem;
    flex: 1 1 480px;
    max-width: 340px;
}

.showcase-right-col .mini-gallery {
    flex: none;
    max-width: none;
    width: 100%;
}

.showcase-right-col .mini-gallery2 {
    flex: none;
    max-width: none;
    width: 100%;
}

.showcase-right-col .mini-gallery3 {
    flex: none;
    max-width: none;
    width: 100%;
}

.showcase-right-col .img-frame.aspect-landscape-2 {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 15 / 9;
}

.showcase-right-col .img-frame.aspect-landscape-3 {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 15 / 9;
}


@media (max-width: 900px) {
    .text-image-row:has(.showcase-right-col) {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 1.5rem;
    }

    .text-image-row:has(.showcase-right-col) .text-col-showcase {
        width: 100%;
        min-width: 0;
        max-width: 420px;
    }

    .showcase-right-col {
        width: 100%;
        max-width: 420px;
    }
}

@media (max-width: 500px) {
    .showcase-right-col {
        max-width: 300px;
    }
}


@media (max-width: 900px) {
    .text-image-row:has(.mini-gallery),
    .text-image-row:has(.mini-gallery2),
    .text-image-row:has(.mini-gallery3) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 1.5rem;
    }

    .text-image-row:has(.mini-gallery) .text-col-showcase,
    .text-image-row:has(.mini-gallery2) .text-col-showcase,
    .text-image-row:has(.mini-gallery3) .text-col-showcase {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        max-width: 420px;
    }

    .text-image-row:has(.mini-gallery) .text-col-showcase .section-body,
    .text-image-row:has(.mini-gallery2) .text-col-showcase .section-body,
    .text-image-row:has(.mini-gallery3) .text-col-showcase .section-body {
        font-size: 14px;
    }

    .mini-gallery,
    .mini-gallery2,
    .mini-gallery3 {
        flex: 0 1 100%;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 500px) {
    .text-image-row:has(.mini-gallery) .text-col-showcase,
    .text-image-row:has(.mini-gallery2) .text-col-showcase,
    .text-image-row:has(.mini-gallery3) .text-col-showcase,
    .mini-gallery,
    .mini-gallery2,
    .mini-gallery3 {
        max-width: 300px;
    }
}





/* ==========================================================================
   11. IDEEN-INTRO-ZEILE (Bild + Text, verschiedene Layout-Modifier)
   ========================================================================== */

.idea-intro-row {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
}

.idea-intro-row .idea-text {
    flex: 1 1 380px;
    min-width: 260px;
}

.idea-intro-row .idea-text h3 {
    margin-top: 0;
}

.idea-intro-row .idea-text2 {
    flex: 1 1 380px;
    min-width: 260px;
    max-width: 920px;
    margin-right: 5rem;
}

.idea-intro-row .idea-text2 h3 {
    margin-top: 0;
}

.idea-intro-row .idea-image {
    flex: 0 0 200px;
    max-width: 200px;
    margin-top: 3rem;
}

.idea-intro-row .idea-image .img-frame {
    width: 100%;
}

@media (max-width: 700px) {
    .idea-intro-row .idea-image {
        max-width: 320px;
        width: 100%;
    }
}

/* Modifier: Text oben, Bilder darunter als eigene Reihe */
.idea-intro-row.idea-intro-row--stack {
    flex-direction: column;
}

.idea-intro-row--stack .idea-text2 {
    flex: 1 1 100%;
    max-width: 100%;
    /* Text geht bis zum rechten Rand */
    margin-right: 0;
}

.idea-image-row {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
}

.idea-image-row .idea-image {
    flex: 1 1 0;
    /* alle drei Bilder teilen sich die Breite gleichmäßig */
    max-width: none;
    /* überschreibt die 200px-Grenze aus .idea-image */
    margin-top: 0;
}

@media (max-width: 700px) {
    .idea-image-row {
        flex-direction: column;
    }
}

/* Modifier: Bild rechts umflossen vom Text (float) */
.idea-intro-row.idea-intro-row--wrap {
    display: block;
}

.idea-intro-row--wrap::after {
    content: "";
    display: table;
    clear: both;
}

.idea-intro-row--wrap .idea-image {
    float: right;
    width: 200px;
    max-width: 200px;
    flex: none;
    margin: 0 0 1.5rem 2.5rem;
    margin-top: 3.4rem;
}

.idea-intro-row--wrap .idea-text {
    flex: none;
    min-width: 0;
}

@media (max-width: 700px) {
    .idea-intro-row--wrap .idea-image {
        float: none;
        width: 100%;
        max-width: 320px;
        margin: 0 0 1.5rem;
    }
}


/* ==========================================================================
   12. DIALOG-WIDGET (Kriegerin & Archäologin, im Konzept-Akkordion)
   ========================================================================== */

.dialog-widget {
    margin-top: 3.4rem;
    margin-bottom: 3rem;
}

.dialog-intro {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.dialog-figure {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-color);
    border: 0.3px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
}

.dialog-figure i {
    font-size: 2.2rem;
    color: var(--main-color);
}

.dialog-figure-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.dialog-figure-role {
    font-size: 1.2rem;
    color: var(--text-color);
    opacity: 0.65;
    margin: 0;
}

.dialog-stage-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.dialog-stage-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: var(--main-color);
    border: 0.15rem solid var(--main-color);
    border-radius: var(--radius-md);
    padding: 1rem 0.6rem;
    cursor: pointer;
    color: var(--white-color);
    transition: all 0.2s ease;
}

.dialog-stage-btn i {
    font-size: 2rem;
}

.dialog-stage-btn span {
    font-size: 1.2rem;
}

.dialog-stage-btn:hover,
.dialog-stage-btn.active {
    background: var(--white-color);
    border-color: var(--main-color);
    color: var(--main-color);
}

.dialog-panel {
    background: var(--bg-color);
    border: 0.3px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.dialog-quotes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.dialog-quote {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--border);
}

.dialog-quote.kriegerin {
    border-left-color: var(--main-color);
}

.dialog-quote.archaeologin {
    border-left-color: var(--text-color);
    opacity: 0.85;
}

.dialog-object-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    border-top: 0.3px solid var(--border);
    padding-top: 1.2rem;
}

.dialog-object-swap-item {
    flex: 0 1 auto;
    text-align: center;
}

.dialog-object-swap-item span {
    display: block;
}

.dialog-object-swap-label {
    font-size: 1.1rem;
    color: var(--text-color);
    opacity: 0.6;
    margin-bottom: 0.3rem;
}

.dialog-object-swap-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
}

.dialog-object-swap-value.historisch {
    color: var(--main-color);
}

.dialog-object-swap i {
    font-size: 2.1rem;
    color: var(--main-color);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .dialog-intro {
        flex-direction: column;
    }

    .dialog-object-swap {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   13. PERSONA-GRID & STORY-GRID (Recherche-Tab + finales Konzept)
   ========================================================================== */

.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.persona-card {
    display: block;
    aspect-ratio: 1 / 1.414;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.3px solid var(--border);
    box-shadow: 0 0.1rem 0.3rem var(--shadow-color);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.persona-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.4rem 0.3rem var(--shadow-color);
}

.persona-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}


/* ==========================================================================
   14. ITERATIONS-FLOW (Problem → Lösung, 1. Usability-Test)
   ========================================================================== */

.flow-rows {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
    --img-w: 170px;
    /* feste Screen-Breite, für 2er- und 3er-Reihen identisch */
    --arrow-w: 64px;
    /* reservierter Platz pro Pfeil */
    --slot-gap: 1rem;
    /* Abstand zwischen den Slots */
}

.flow-row-full {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
}

.flow-text {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 470px;
    /* ← hier Breite für den Text vor dem ersten Screen anpassen */
}

/* Der gesamte Screen-Block: feste Breite für 3 Screens + 2 Pfeile,
   egal ob eine Reihe nur 2 Screens nutzt. */
.flow-segment {
    display: grid;
    grid-template-columns: var(--img-w) var(--arrow-w) var(--img-w) var(--arrow-w) var(--img-w);
    align-items: center;
    column-gap: var(--slot-gap);
    width: calc(3 * var(--img-w) + 2 * var(--arrow-w) + 4 * var(--slot-gap));
    flex: 0 0 auto;
    margin-left: auto;
    /* schiebt den kompletten Block an den rechten Rand */
}

.flow-segment .img-frame.aspect-phone {
    width: var(--img-w);
    min-width: var(--img-w);
    max-width: var(--img-w);
}

.flow-arrow {
    font-size: 4rem;
    color: var(--main-color);
    line-height: 1.4;
    transform: scaleX(1);
    justify-self: center;
}

.flow-plus {
    font-size: 3.4rem;
    color: var(--main-color);
    line-height: 1;
    justify-self: center;
    font-weight: 300;
}

@media (max-width: 1000px) {
    .flow-row-full {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow-text {
        max-width: 100%;
    }

    .flow-segment {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
    }

    .flow-segment .img-frame.aspect-phone {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }
}


/* ==========================================================================
   14b. ITERATIONS-FLOW — Kopie mit eigenen Klassen für den 2. Usability-Test
   (gleiche Optik wie oben, aber unabhängig anpassbar)
   ========================================================================== */

.flow-rows-2 {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
    --img-w: 170px;
    --arrow-w: 64px;
    --slot-gap: 1rem;
}

.flow-row-full-2 {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
}

.flow-text-2 {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 470px;
}

.flow-segment-2 {
    display: grid;
    grid-template-columns: var(--img-w) var(--arrow-w) var(--img-w) var(--arrow-w) var(--img-w);
    align-items: center;
    column-gap: var(--slot-gap);
    width: calc(3 * var(--img-w) + 2 * var(--arrow-w) + 4 * var(--slot-gap));
    flex: 0 0 auto;
    margin-left: auto;
}

.flow-segment-2 .img-frame.aspect-phone {
    width: var(--img-w);
    min-width: var(--img-w);
    max-width: var(--img-w);
}

.flow-arrow-2 {
    font-size: 4rem;
    color: var(--main-color);
    line-height: 1.4;
    transform: scaleX(1);
    justify-self: center;
}

.flow-plus-2 {
    font-size: 3.4rem;
    color: var(--main-color);
    line-height: 1;
    justify-self: center;
    font-weight: 300;
}

@media (max-width: 1000px) {
    .flow-row-full-2 {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow-text-2 {
        max-width: 100%;
    }

    .flow-segment-2 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
    }

    .flow-segment-2 .img-frame.aspect-phone {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }
}


/* ==========================================================================
   15. LIGHTBOX (eigene Umsetzung, ersetzt Fancybox)
   ========================================================================== */

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2.2rem;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 1001;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-close {
    top: 2rem;
    right: 2rem;
}

.lightbox-prev {
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

body.lightbox-open {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
}


/* ==========================================================================
   16. Finales Konzept
   ========================================================================== */

.final-concept-hero {
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    margin-top: -1rem;
    aspect-ratio: 15 / 9;
    overflow: hidden;
}

.final-concept-hero .mini-gallery-arrow {
    background: rgba(255, 255, 255, 0.2);
}

.final-concept-hero .mini-gallery-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
}

.final-concept-caption {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.75;
    width: 100%;
    margin: 0 0 3rem;
    text-align: left;
}

.final-concept-video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7.5rem;
    margin-bottom: 3rem;
}

.final-concept-video-item {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    margin-top: 3.5rem;
}

.final-concept-video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.final-concept-video-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.6rem;
    z-index: 2;
}

.final-concept-video-btn {
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.9rem;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}

.final-concept-video-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

.final-concept-video-mute:hover {
    background: rgba(0, 0, 0, 0.65);
}

.final-concept-video-cell {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.final-concept-video-caption {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.45;
    text-align: left;
    margin: 0;
}

@media (max-width: 1000px) {
    .final-concept-hero {
        aspect-ratio: 16 / 9;
    }

    .final-concept-video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}


/* ==========================================================================
   16. META-ROW (Entstanden / mit / in Zusammenarbeit / Typ)
   ========================================================================== */

.meta-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 7rem;
    margin-bottom: 7rem;
    width: calc(100% - var(--content-margin-left) - var(--content-margin-right));
    margin-left: var(--content-margin-left);
}

.meta-item {
    background: var(--white-color);
    padding: 1rem 1.25rem;
}

.meta-label {
    font-size: 11px;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.meta-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}


/* ==========================================================================
   17. KONTAKT
   ========================================================================== */

.container {
    margin-left: 11.4rem;
    margin-top: 10rem;
    margin-bottom: 5rem;
}

.contact-left {
    flex-basis: 105%;
}

.contact-left p {
    margin-top: 20px;
    color: var(--text-color);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.contact-left p i {
    color: var(--main-color);
    margin-right: 10px;
    font-size: 25px;
}

.social-icons {
    margin-top: 20px;
    margin-bottom: 10px;
}

.social-icons a {
    text-decoration: none;
    font-size: 23px;
    margin-right: 10px;
    color: var(--main-color);
    display: inline-block;
    transition: transform 0.5s;
}

.social-icons a:hover {
    color: #333;
    transform: translateY(-5px);
}

.contact-link {
    display: block;
    color: var(--text-color);
    text-decoration: none;
}

.contact-link p {
    color: inherit;
}

.contact-link-text {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--main-color) 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
    animation: contact-pulse 1.6s ease-in-out infinite;
}

.contact-link:hover .contact-link-text {
    text-decoration-color: var(--main-color);
    animation: none;
    color: var(--main-color);
}

@keyframes contact-pulse {
    0%, 100% {
        color: var(--text-color);
    }
    50% {
        color: var(--main-color);
    }
}


/* ==========================================================================
   18. MOBILE HINWEIS-BANNER
   ========================================================================== */

.mobile-hint {
    position: fixed;
    bottom: -10rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 34rem;
    width: 90%;
    background: var(--white-color);
    border: 0.1rem solid var(--main-color);
    border-radius: 0.8rem;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 0.3rem 1rem var(--shadow-color);
    z-index: 999;
    transition: bottom 0.5s ease;
}

.mobile-hint.show {
    bottom: 2rem;
}

.mobile-hint i:first-child {
    font-size: 2.2rem;
    color: var(--main-color);
    flex-shrink: 0;
}

.mobile-hint p {
    font-size: 1.3rem;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
}

.mobile-hint button {
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    display: flex;
}

.mobile-hint button i {
    font-size: 2rem;
    color: var(--text-color);
    opacity: 0.6;
}

.mobile-hint button:hover i {
    opacity: 1;
    color: var(--main-color);
}

@media (min-width: 1100px) {
    .mobile-hint {
        display: none;
    }
}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 8.3%;
    background: var(--main-color);
}

.footer-text p {
    font-size: 1.6rem;
    color: var(--white-color);
    margin-top: 7px;
}

.footer-iconTop a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.8rem;
    background: var(--white-color);
    border-radius: 0.8rem;
    border: 0.2rem solid var(--main-color);
    outline: 0.2rem solid transparent;
    transition: 0.5s ease;
    text-decoration: none;
}

.footer-iconTop a:hover {
    outline-color: var(--white-color);
}

.footer-iconTop a i {
    font-size: 2.4rem;
    color: #333;
}


/* ==========================================================================
   20. BREAKPOINTS (zusammengefasst)
   ========================================================================== */

@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

@media (max-width: 1024px) {
    .header {
        padding: 2rem 3%;
    }

    section {
        padding: 10rem 3% 2rem;
    }
}

@media (max-width: 900px) {
    .img-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .persona-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #menu-icon {
        display: block;
    }

    #darkMode-icon {
        position: absolute;
        right: 7rem;
        font-size: 2.6rem;
        color: var(--text-color);
        margin-bottom: 0.1rem;
    }

    #btn2 {
        margin-right: 5rem;
        font-size: 2.6rem;
        color: var(--text-color);
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        display: none;
    }

    .navbar.active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        color: var(--text-color);
    }

    .navbar a.active {
        color: var(--main-color);
    }

    .navbar a::before {
        display: none;
    }
}

@media (max-width: 700px) {
    .img-grid-2,
    .img-grid-3,
    .img-grid-4 {
        grid-template-columns: 1fr;
    }

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

    .text-image-row {
        flex-direction: column;
    }

    .text-image-row .text-col {
        flex-basis: auto;
    }

    .text-image-row .image-col {
        width: 100%;
    }

    .image-col .img-frame.aspect-phone,
    .image-col .img-frame.aspect-landscape {
        flex: 1 1 120px;
        max-width: none;
        width: auto;
    }

    .image-col.image-col-compact .img-frame.aspect-phone {
        flex: 1 1 90px;
        max-width: 130px;
        width: auto;
    }

    .lightbox-overlay {
        padding: 1.5rem;
    }

    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.8rem;
    }
}

@media (max-width: 500px) {
    .persona-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }

    #darkMode-icon {
        right: 6rem;
    }
}

@media (max-width: 365px) {
    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        text-align: center;
        margin-top: 2rem;
    }
}


/* ===========================================================================
   SPRACHUMSCHALTER + HEADER-AUSRICHTUNG  ->  ans Ende der bachelorprojekt.css

   Wie bei styleaboutme.css: Die Header-Elemente bekommen feste px-Werte
   (= die rem-Werte der Startseite bei 10px), weil diese Seite ihre
   Basisgröße ab 1200px auf 55% umstellt. Padding links und rechts sind
   prozentual, damit der Header beim Verkleinern symmetrisch mitgeht.
   =========================================================================== */

.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 3rem;
    margin-right: 2.5rem;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--text-color);
}

.lang-switch .lang-option {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;      /* hebt das globale button { margin-bottom } auf */
    min-width: 3rem;
    text-align: center;
    cursor: pointer;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
}

.lang-switch .lang-option:hover {
    opacity: 0.85;
}

.lang-switch .lang-option.active {
    opacity: 1;
    font-weight: 500;
}

.lang-switch .lang-sep {
    color: inherit;
    opacity: 0.35;
}

.header.sticky .lang-switch .lang-option.active {
    color: var(--main-color);
}


/* --- Header auf allen Seiten identisch ausrichten --- */
@media (min-width: 769px) {
    .header.header {
        padding-left: 7%;
        padding-right: 7%;
    }

    .header #btn2 {
        font-size: 34px;
        margin-left: -5px;
        margin-right: 10px;
    }

    .header .logo {
        font-size: 25px;
    }

    .header .navbar {
        display: flex;
        align-items: center;
        width: 265px;
        justify-content: space-between;
        gap: 0;
        margin-right: 35px;
    }

    .header .navbar a {
        font-size: 17px;
        margin-right: 0;
    }

    .header .lang-switch {
        width: 80px;
        justify-content: flex-end;
        font-size: 17px;
        margin-left: 30px;
        margin-right: 25px;
        gap: 4px;
    }

    .header .lang-switch .lang-option {
        min-width: 30px;
    }

    .header #darkMode-icon {
        font-size: 24px;
    }
}

/* Startseite wechselt ab 1200px auf 3% - hier genauso */
@media (min-width: 769px) and (max-width: 1200px) {
    .header.header {
        padding-left: 3%;
        padding-right: 3%;
    }
}

@media (max-width: 768px) {
    .lang-switch {
        position: absolute;
        top: 50%;
        right: 11.5rem;
        transform: translateY(-50%);
        margin-left: 0;
        margin-right: 0;
    }

    .lang-switch .lang-option.active {
        color: var(--main-color);
    }
}

@media (max-width: 450px) {
    .lang-switch {
        right: 10rem;
    }
}


/* ===========================================================================
   21. RESPONSIVE-ÜBERARBEITUNG

   Dieser Block steht bewusst ganz am Ende der Datei und überschreibt damit
   alle Media Queries darüber - bitte nichts dahinter einfügen.

   Grundregel: Oberhalb von 1140px ist nichts angefasst worden. Sämtliche
   Regeln hier stecken in max-width-Queries, die Desktop-Ansicht bleibt also
   exakt so, wie sie ist.

   Gliederung:
     21a  Nichts wird mehr zentriert (alles linksbündig)
     21b  Textspalten schrumpfen mit, Screens bleiben länger daneben
     21c  Konzepterarbeitung: Bild unter den Text statt über die Überschrift
     21d  Iterations-Flow: Screens früher untereinander, Pfeile drehen sich
     21e  Dialog-Widget: Figuren-Kästchen auf dem Handy
     21f  Meta-Row: "Typ" bleibt sichtbar
     21g  Seitenränder auf dem Handy (wie auf der Startseite)
   =========================================================================== */


/* --- 21a | ALLES LINKSBÜNDIG --------------------------------------------

   Die 900er-Queries weiter oben schalten mehrere Zeilen auf
   text-align: center, align-items: center und margin: 0 auto. Genau davon
   kommt die mittig sitzende mini-gallery3 im Tab "Extras zur Umfrage" und
   die zentrierten Blöcke im Tab "Vorbereitung 2. Lo-Fi". Hier wird das
   wieder auf linksbündig zurückgesetzt - die Spaltenaufteilung (unter-
   einander statt nebeneinander) bleibt dabei erhalten. */

@media (max-width: 900px) {

    .text-image-row:has(.showcase-right-col),
    .text-image-row:has(.mini-gallery),
    .text-image-row:has(.mini-gallery2),
    .text-image-row:has(.mini-gallery3) {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    /* Der Text darf die volle Breite nutzen statt bei 420px zu stoppen */
    .text-image-row:has(.showcase-right-col) .text-col-showcase,
    .text-image-row:has(.mini-gallery) .text-col-showcase,
    .text-image-row:has(.mini-gallery2) .text-col-showcase,
    .text-image-row:has(.mini-gallery3) .text-col-showcase {
        max-width: none;
    }

    /* margin: 0 auto -> zentriert. Nur links auf 0, rechts auf auto. */
    .mini-gallery,
    .mini-gallery2,
    .mini-gallery3,
    .showcase-right-col {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 500px) {
    .text-image-row:has(.showcase-right-col) .text-col-showcase,
    .text-image-row:has(.mini-gallery) .text-col-showcase,
    .text-image-row:has(.mini-gallery2) .text-col-showcase,
    .text-image-row:has(.mini-gallery3) .text-col-showcase {
        max-width: none;
    }
}


/* --- 21b | TEXTSPALTEN SCHRUMPFEN MIT -----------------------------------

   Ursache des Problems: .text-col hat min-width: 730px, .text-col2 sogar
   970px und .text-col-showcase 420px. Ein min-width kann der Browser nicht
   unterschreiten - deshalb bricht die Zeile um (Screens rutschen unter den
   Text) bzw. der Text läuft aus dem Kasten heraus.

   Ab 1140px wird der Mindestwert aufgehoben. Die Textspalte wird dadurch
   schmaler, statt umzubrechen, und die Screens bleiben deutlich länger
   rechts daneben stehen. Erst ab 700px (siehe Block 20) stapelt sich alles
   untereinander - dort dann linksbündig. */

@media (max-width: 1140px) {

    .text-image-row .text-col,
    .text-image-row .text-col2,
    .text-image-row .text-col3,
    .text-image-row .text-col-showcase {
        min-width: 0;
        flex: 1 1 220px;
    }

    /* Screens etwas kompakter, damit sie länger daneben passen */
    .image-col.image-col-compact .img-frame.aspect-phone {
        flex: 0 0 92px;
        max-width: 92px;
        width: 92px;
    }
}

@media (max-width: 700px) {
    /* Wenn die Screens unter dem Text stehen, beginnen sie links */
    .text-image-row .image-col {
        justify-content: flex-start;
    }

    .text-image-row-boxed {
        padding: 1.5rem;
    }
}


/* --- 21c | KONZEPTERARBEITUNG: BILD UNTER DEN TEXT ----------------------

   .idea-intro-row--wrap ist ein Float-Layout: Das Bild steht im HTML VOR
   dem Text und wird per float: right nach rechts geholt. Fällt der Float
   auf schmalen Schirmen weg, landet das Bild wieder an seiner Stelle im
   HTML - also über der Überschrift.

   Lösung: Aus dem Block wird eine Flex-Spalte, und die Reihenfolge wird per
   order gedreht. Damit steht das Bild immer unter dem zugehörigen Text,
   ohne dass das HTML angefasst werden muss. Das gilt für alle drei Stellen
   (Erste Konzeptidee, Moodboard, Flowchart). */

@media (max-width: 700px) {

    .idea-intro-row.idea-intro-row--wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .idea-intro-row--wrap .idea-text {
        order: 1;
    }

    .idea-intro-row--wrap .idea-image {
        order: 2;
        float: none;
        width: 100%;
        max-width: 320px;
        margin: 1.5rem 0 0 0;
    }
}


/* --- 21d | ITERATIONS-FLOW ----------------------------------------------

   Problem 1: .flow-segment hat eine feste Breite von rund 700px
   (3 Screens + 2 Pfeile). Der Umbruch auf ein flexibles Layout kam bisher
   erst bei 1000px - dazwischen ist der Block breiter als der Kasten und der
   rechte Screen wurde vom overflow: hidden abgeschnitten. Der Umbruch
   passiert jetzt schon bei 1140px.

   Problem 2: Sobald alle Screens untereinander stehen, zeigt der Pfeil
   weiterhin nach rechts. Ab 620px wird die Reihe deshalb zur Spalte und
   Pfeile und Plus drehen sich um 90 Grad, sodass sie mittig unter dem
   jeweils vorherigen Screen sitzen.

   Gilt für beide Varianten: die Klassen ohne Suffix (die im HTML beider
   Iterations-Tabs verwendet werden) und die -2-Kopie. */

@media (max-width: 1140px) {

    .flow-row-full,
    .flow-row-full-2 {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow-text,
    .flow-text-2 {
        max-width: 100%;
        min-width: 0;
    }

    .flow-segment,
    .flow-segment-2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .flow-segment .img-frame.aspect-phone,
    .flow-segment-2 .img-frame.aspect-phone {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }
}

@media (max-width: 620px) {

    .flow-segment,
    .flow-segment-2 {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow-segment .img-frame.aspect-phone,
    .flow-segment-2 .img-frame.aspect-phone {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }

    /* Pfeil zeigt nach unten und sitzt mittig unter dem Screen darüber.
       Die Breite entspricht der Screen-Breite, deshalb landet das Zeichen
       durch text-align: center genau in dessen Mitte. */
    .flow-arrow,
    .flow-arrow-2 {
        display: block;
        width: 130px;
        text-align: center;
        transform: rotate(90deg);
    }

    .flow-plus,
    .flow-plus-2 {
        display: block;
        width: 130px;
        text-align: center;
    }
}


/* --- 21e | DIALOG-WIDGET AUF DEM HANDY ----------------------------------

   .dialog-figure hat flex: 1 1 220px. In einer Zeile sind das 220px
   Breite - sobald .dialog-intro aber auf flex-direction: column umschaltet,
   bezieht sich die flex-basis auf die HÖHE. Daher die überhohen Kästchen.
   flex: 0 0 auto lässt sie wieder auf Inhaltshöhe zusammenfallen. */

@media (max-width: 700px) {
    .dialog-figure {
        flex: 0 0 auto;
        width: 100%;
    }
}


/* --- 21f | META-ROW ------------------------------------------------------

   Grid-Elemente schrumpfen standardmäßig nicht unter ihre Inhaltsbreite.
   Bei vier Spalten wird die Zeile deshalb breiter als der Kasten und
   "Typ" verschwindet hinter dem overflow: hidden. Weniger Spalten plus
   min-width: 0 lösen beides. */

@media (max-width: 768px) {
    .meta-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .meta-item {
        min-width: 0;
    }
}

@media (max-width: 450px) {
    .meta-row {
        grid-template-columns: 1fr;
    }
}


/* --- 21g | SEITENRÄNDER AUF DEM HANDY -----------------------------------

   Intro, Akkordions und Meta-Row hängen alle an --content-margin-left/right
   (10.4rem). Auf einem 380px-Display sind das über 100px, die nur für Rand
   draufgehen. Auf dem Handy übernehmen wir deshalb die 5% der Startseite.
   Zum Ändern reicht die eine Variable. */

@media (max-width: 768px) {

    :root {
        --content-margin-left: 5%;
        --content-margin-right: 5%;
    }

    .header.header {
        padding-left: 5%;
        padding-right: 5%;
    }

    .container {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 5rem;
    }

    .footer {
        padding: 2rem 5%;
    }

    /* Innenabstände der Akkordions mitziehen, sonst frisst das Padding
       den gewonnenen Platz wieder auf */
    .accordion-header {
        padding: 1.8rem 1.6rem;
    }

    .accordion-body {
        padding: 0 1.6rem;
    }

    .accordion-body.open {
        padding: 2rem 1.6rem;
    }

    .intro-row {
        margin-top: 12rem;
    }
}


/* --- 21h | LÜCKE ZWISCHEN TEXT UND SCREENS ------------------------------

   Nachtrag zu 21b: Dort steht flex: 1 1 220px. Das ist als BREITE gedacht,
   solange Text und Screens nebeneinander liegen. Ab 700px schaltet
   .text-image-row aber auf flex-direction: column um - und dann gilt die
   flex-basis für die HÖHE. Die Textspalte bekommt dadurch mindestens 220px
   Höhe, auch wenn der Text kürzer ist. Genau das war die Lücke in den
   ersten Kästen der Lo-Fi-Tabs (die späteren Texte sind länger als 220px,
   deshalb fiel es dort nicht auf).

   In der Spaltenrichtung darf die Höhe sich also wieder nach dem Inhalt
   richten. */

@media (max-width: 700px) {

    .text-image-row .text-col,
    .text-image-row .text-col2,
    .text-image-row .text-col3,
    .text-image-row .text-col-showcase {
        flex: 0 1 auto;
    }

    /* Abstand zwischen Text und Screens etwas enger, wenn sie gestapelt sind */
    .text-image-row {
        gap: 1.5rem;
    }
}


/* --- 21i | PROJEKTTITEL AUF DEM HANDY -----------------------------------

   h1 steht fest auf 5.1rem. "Ausstellungskontext" ist ein einzelnes langes
   Wort und kann nicht umbrechen - bei 380px Bildschirmbreite läuft es
   deshalb aus dem Bild. Kleinere Schriftgröße plus overflow-wrap als
   Sicherheitsnetz, falls doch mal ein noch längeres Wort dazukommt. */

@media (max-width: 700px) {
    h1 {
        font-size: 4rem;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 450px) {
    h1 {
        font-size: 3.4rem;
    }
}


/* --- 21j | KONTAKTBEREICH BÜNDIG ----------------------------------------

   .container ist gleichzeitig eine Bootstrap-Klasse und bringt von dort ein
   padding von 0.75rem pro Seite mit. Dadurch sitzt der Kontaktblock rund
   12px weiter innen als Akkordions und Meta-Row, obwohl beide auf 5% stehen. */

@media (max-width: 768px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* --- 21k | INTRO: BILD DIREKT UNTER DIE ÜBERSCHRIFT ---------------------

   Im HTML liegen Titel, Text und Tags gemeinsam in .intro-text, das Bild
   steht als Geschwister daneben. Beim Stapeln landet das Bild deshalb ganz
   unten.

   display: contents löst .intro-text als Kasten auf - Titel, Text und Tags
   werden dadurch zu direkten Flex-Elementen der .intro-row und lassen sich
   einzeln per order sortieren. Das HTML bleibt unangetastet. */

@media (max-width: 768px) {

    .intro-row {
        flex-direction: column;
        gap: 2rem;
    }

    .intro-text {
        display: contents;
    }

    .intro-row .projekt-titel-wrapper {
        order: 1;
    }

    .intro-row .intro-image {
        order: 2;
        width: 100%;
    }

    .intro-row .about-content {
        order: 3;
    }

    .intro-row .projekt-tags-header {
        order: 4;
        margin-top: 0;
    }
}


/* --- 21l | HEADER UND AUSGEKLAPPTE NAVIGATION --------------------------- */

@media (max-width: 768px) {

    /* Abstand zwischen Zurück-Pfeil und Logo.
       Kleinerer Wert = MT rückt nach links, größerer = nach rechts. */
    #btn2 {
        margin-left: 0;
        margin-right: 1.2rem;
    }

    /* Die ausgeklappte Navigation hatte 3% Rand, alles andere auf der
       Seite 5%. Jetzt identisch. */
    .navbar {
        padding: 1rem 5%;
    }
}


/* --- 21m | UMFRAGE-GRAFIKEN AUF SCHMALEN SCHIRMEN -----------------------

   Grid-Elemente schrumpfen nicht unter ihre Inhaltsbreite, solange
   min-width: auto gilt (Standard). Zweispaltige Raster und feste
   Pixelbreiten sprengen deshalb auf dem Handy den Kasten - und weil die
   Karten overflow: hidden haben, verschwindet der überstehende Teil. */

@media (max-width: 700px) {

    /* Donut-Paare und Vergleichsspalten untereinander */
    .donut-row,
    .compare-grid,
    .big-stat-row,
    .two-col {
        grid-template-columns: 1fr;
    }

    /* Grundsätzlich dürfen alle Rasterzellen schmaler werden als ihr Inhalt */
    .donut-row > *,
    .compare-grid > *,
    .big-stat-row > *,
    .stat-grid > *,
    .three-split > *,
    .two-col > * {
        min-width: 0;
    }

    /* Feste Label-Breiten der Balken reduzieren */
    .bar-label {
        width: 100px;
    }

    .bar-label.narrow {
        width: 90px;
    }

    /* Skalen-Beschriftungen: "sehr wichtig" und "kritisch" liefen bisher
       über den Rand, weil der Text nicht umbrechen konnte. */
    .scale-labels,
    .scale-pct-row,
    .scale-bars {
        gap: 3px;
    }

    .scale-lbl {
        font-size: 8.5px;
        line-height: 1.25;
        min-width: 0;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .scale-pct {
        font-size: 10px;
        min-width: 0;
    }

    .split-lbl {
        font-size: 10px;
    }

    .donut-inner {
        gap: 10px;
    }
}


/* --- 21n | SCREENS IM LO-FI-TAB ETWAS GRÖSSER --------------------------

   Block 21b setzt die Screens ab 1140px auf 92px, damit sie länger neben
   dem Text Platz finden. Sobald sie unter dem Text stehen, ist der Platz
   aber da - also wieder etwas größer. */

@media (max-width: 700px) {
    .image-col.image-col-compact .img-frame.aspect-phone {
        flex: 0 0 118px;
        max-width: 118px;
        width: 118px;
    }
}


/* --- 21o | HEADER-RAND IM TABLET-BEREICH --------------------------------

   Zwischen 769px und 1200px stand der Header auf 3% Rand - bei 1024px also
   rund 30px. Der Seiteninhalt hängt in diesem Bereich aber an
   --content-margin-left (10.4rem), und da die Basisschriftgröße unter
   1200px auf 55% springt, sind das 57px. Zurück-Pfeil und Mond-Icon saßen
   dadurch deutlich weiter außen als alles darunter.

   Jetzt nutzt der Header dieselbe Variable wie Intro, Akkordions und
   Meta-Row - im Tablet-Bereich steht damit alles auf einer Linie.
   Ober- und unterhalb dieses Bereichs ändert sich nichts. */

@media (min-width: 769px) and (max-width: 1200px) {
    .header.header {
        padding-left: var(--content-margin-left);
        padding-right: var(--content-margin-right);
    }
}


/* --- 21p | ABSTAND MOND / SANDWICH-ICON --------------------------------

   #darkMode-icon und .lang-switch sind absolut positioniert, ihr right-Wert
   misst also vom Fensterrand. Das Sandwich-Icon liegt dagegen im normalen
   Fluss am 5%-Innenrand des Headers. Bei festen 7rem standen Mond und
   Sandwich dadurch fast aufeinander.

   Mit calc() hängt der Abstand jetzt am selben 5%-Rand und bleibt bei jeder
   Bildschirmbreite gleich. Zum Justieren die rem-Werte ändern - größer
   heißt weiter nach links. */

@media (max-width: 768px) {

    #darkMode-icon {
        right: calc(5% + 5.5rem);
    }

    .lang-switch {
        right: calc(5% + 10rem);
    }
}


/* --- 21q | SANDWICH-MENÜ SCHON AB 830px ---------------------------------

   Die Umschaltung auf das Sandwich-Menü hängt an der 768er-Grenze. Statt
   diese Zahl an einem Dutzend Stellen in der Datei zu ändern (und dabei
   auch Seitenränder, Intro-Reihenfolge usw. mitzuverschieben, die weiterhin
   erst auf dem Handy greifen sollen), wird hier nur der Header-Teil für den
   Zwischenbereich 769-830px nachgezogen.

   Die Selektoren sind bewusst mit .header davor geschrieben: Der Block
   "Header auf allen Seiten identisch ausrichten" weiter oben nutzt
   .header .navbar - eine einfache .navbar-Regel wäre zu schwach und würde
   nicht greifen. */

@media (min-width: 769px) and (max-width: 830px) {

    #menu-icon {
        display: block;
    }

    #btn2 {
        margin-left: 0;
        margin-right: 1.2rem;
        font-size: 2.6rem;
    }

    #darkMode-icon {
        position: absolute;
        right: calc(var(--content-margin-right) + 5.5rem);
        font-size: 2.6rem;
        color: var(--text-color);
        margin-bottom: 0.1rem;
    }

    .header .lang-switch {
        position: absolute;
        top: 50%;
        right: calc(var(--content-margin-right) + 10rem);
        transform: translateY(-50%);
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .header .lang-switch .lang-option.active {
        color: var(--main-color);
    }

    .header .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem var(--content-margin-left);
        background: var(--bg-color);
        border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        display: none;
        margin-right: 0;
        gap: 0;
    }

    .header .navbar.active {
        display: block;
    }

    .header .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        color: var(--text-color);
    }

    .header .navbar a.active {
        color: var(--main-color);
    }

    .header .navbar a::before {
        display: none;
    }
}