/* Normalisierung */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word;
}


/* CSS Custom Properties für bessere Wartbarkeit */
:root {
    --arrow-svg: url('data:image/svg+xml;utf8,<svg width="120" height="20" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M500,98.9L0,6.1V0h1000v6.1L500,98.9z" fill="%23FF0000"/></svg>');
    /* Light Mode Farben */
    --color-primary: #04B2D9;
    --color-secondary: #E94F85;
    --color-text: #333;
    --color-bg: #ecf0f2;
    --color-white: #fff;
    --color-gray: #2f2f2f;
    --color-light-gray: #f6f4f5;
    --color-yellow: #ffd244;
    
    /* Spacing System */
    --space-xs: clamp(0.5rem, 2vw, 0.75rem);
    --space-sm: clamp(1rem, 3vw, 1.5rem);
    --space-md: clamp(1.5rem, 4vw, 2.5rem);
    --space-lg: clamp(2rem, 6vw, 4rem);
    --space-xl: clamp(3rem, 8vw, 6rem);
    
    /* Farbschema für Browsereigenschaften */
    color-scheme: light;
}

/* Dark Mode Variablen */
[data-theme="dark"] {
    --color-primary: #04B2D9;
    --color-secondary: #E94F85;
    --color-text: #f9fafb;
    --color-bg: #1a1a1a;
    --color-white: #1e1e1e;
    --color-gray: #2f2f2f;
    --color-light-gray: #374151;
    --color-yellow: #fbbf24;
    
    /* Schatten für Dark Mode angepasst */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
    
    color-scheme: dark;
}

/* Automatische Systemeinstellungen respektieren */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #04B2D9;
        --color-secondary: #E94F85;
        --color-text: #f9fafb;
        --color-bg: #1a1a1a;
        --color-white: #1e1e1e;
        --color-gray: #2f2f2f;
        --color-light-gray: #374151;
        --color-yellow: #fbbf24;
        
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 15px rgba(0,0,0,0.4);
        --shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
        
        color-scheme: dark;
    }
}

/* Überschreibung für explizit gewählten Light Mode */
@media (prefers-color-scheme: dark) {
    [data-theme="light"] {
        --color-primary: #04B2D9;
        --color-secondary: #E94F85;
        --color-text: #333;
        --color-bg: #ecf0f2;
        --color-white: #fff;
        --color-gray: #2f2f2f;
        --color-light-gray: #f6f4f5;
        --color-yellow: #ffd244;
        
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
        --shadow-md: 0 4px 15px rgba(0,0,0,0.15);
        --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
        
        color-scheme: light;
    }
}


/* skip-link */

.skip-link {
    position: absolute;
    top: -50px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}


/* fonts */

.motto {
    margin-top: 2vw;
    font-weight: bolder;
}


/* Schrfitformatierung */

html {
    font-size: 16px;
    font-family: "ArtegraSansMedium", sans-serif;
}

article ul {
    padding-left: 25px;
}


a {
  text-decoration: none;
}

p, li {
    line-height: calc(19px + 4 * ((100vw - 320px) / 680));
}

li {
    margin-bottom: 0.3vw;
}

p, li, a, button, td {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1600 - 320)));
}

#nav-menu > li > a {
    font-size: calc(12px + 3 * ((100vw - 320px) / 680));
}

#main-hl > h1 {
    font-size: calc(14px + (44 - 14) * ((100vw - 280px) / (1600 - 280)));
}

#main-hl > h2 {
    font-size: calc(13px + (40 - 13) * ((100vw - 280px) / (1600 - 280)));
}

h1 {
    font-family: "Prosto One", sans-serif;
    font-size: calc(21px + (46 - 26) * ((100vw - 320px) / (1600 - 280)));
    line-height: 1.2;
    margin-bottom: 1vw;
}

h2 {
    font-size: calc(26px + (46 - 26) * ((100vw - 320px) / (1600 - 320)));
    line-height: 1.2;
}

.section_title > h2 {
    padding-top: 2vw;
}


h3 {
    font-size: calc(16px + 4 * ((100vw - 320px) / 680));
    line-height: 1.2;
    margin-bottom: calc(4px + 5 * ((100vw - 320px) / 680));
}

.charter > h3 {
    text-align: center;
}

p, ol, ul, h4 {
    margin-bottom: calc(4px + 3 * ((100vw - 280px) / 680));
}

h3.mt {
    margin-top: 1.7vw;
}

h4 {
    font-size: calc(15px + 4 * ((100vw - 320px) / 680));
    font-weight: bolder;
    line-height: 1.4;
}

footer p,
footer a {
    font-size: calc(10px + 2 * ((100vw - 320px) / 680));
}

/* font colors */

h1, h2 {
    color: #04B2D9;
}

h3,
.card > h3,
.card-button,
.hero > div > h2 {
    color: #E94F85;
}

.top-nav a {
    color: var(--color-text);
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
}

.main-logo {
    height: fit-content;
}

.pros,
footer a,
footer p,
.section_title > p {
    color: #fff;
}

/* background-colors */

header {
    background-color: var(--color-light-gray);
    transition: background-color 0.3s ease;
}

.main_home > .hero > div,
.section_title,
.pros,
footer {
    background-color: #2f2f2f;
    transition: background-color 0.3s ease;
}

.card, .workshop, .workshop_details, .workshop-zwei {
    background-color: var(--color-white);
    transition: background-color 0.3s ease;
}

#info img {
    background-color: var(--color-yellow);
}


/* 1-spaltiges Layout */

#datenschutz {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3vw;
}

.workshop {
    max-width: 800px;
    background-color: var(--color-bg);
    margin: 0 auto;
    padding: 6vw 6vw 3vw 6vw;
}


/* Dark Mode für SVG-Logo - nur Text wird weiß */
[data-theme="dark"] .logo-text {
    fill: #f9fafb !important;
}


/* Abstände */

.home_cards_info, .home_cards_angebote, .erwachsene-cards-fallbeispiele, .kurs-auszug, .gruender-cards {
    padding: 0 2vw;
}

.section_title {
    padding: calc(20px + 10 * ((100vw - 320px) / 680));
}

.workshop-eins, .workshop-zwei, .workshop-drei, .about, .charter, .trainer-werden, .bankverbindung {
    padding: calc(20px + 16 * ((100vw - 320px) / 680));
}

#staerken {
    margin: 8vw 0;
}

.marg {
    margin-bottom: -3.5vw;
    padding-bottom: 6vw;
}


/* Logo und Icons */

svg.about-logo {
    justify-self: center;
    height: auto;
}

header > a {
  padding: 1vw 0 1vw 1vw;
}

svg.svg-icon {
    margin-bottom: 0.5vw;
    width: calc(22px + 4 * ((100vw - 320px) / 680));
}

.section_title:before {
    content: '';  /* Leeres content erforderlich! */
    display: block;
    width: 140px;
    height: 20px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23CCCCCC" viewBox="0 0 1000 100" preserveAspectRatio="none"><path class="arrow-svg" d="M500,98.9L0,6.1V0h1000v6.1L500,98.9z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: calc(-22.5px + -9 * ((100vw - 320px) / 680));
}

/* Hamburger-Menu */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 1.3rem;
    position: relative;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
    display: block;
    position: relative;
    transform-origin: center;
}

/* Hamburger zu X Animation */
.menu-toggle-open .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle-open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle-open .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    top: 5px;
}



/* Icon-Rotation für visuelles Feedback */
[data-theme="dark"] .toggle-icon {
    transform: rotate(180deg);
}


/* nav top & footer */

header, section, footer {
    display: grid;
}

header {
    position: fixed;
    top: 0;
    height: 100px;
    width: 100vw;
    grid-template-columns: 1fr 5fr;
    grid-auto-rows: minmax(50px, auto);
    align-items: center;
}

.top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

.top-nav,
footer {
    padding: 1vw 2.5vw;
}

nav > ul {
    display: contents;
}

.top-nav > ul > li {
    display: inline;
    padding: 1%;
}

button#theme-toggle {
    border: none;
    background-color: transparent;
}

footer {
    display: flex;
    gap: 2vw;
    justify-content: end;
}



/* Navigation Link Effekte */
.top-nav > ul > li > a:hover,
.nav-menu > li > a:hover {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.top-nav > ul > li > a:active,
.nav-menu > li > a:active {
    border-bottom: 2px solid var(--color-secondary);
    color: var(--color-secondary);
}

/* Bereits aktive Seite */
.top-nav > ul > li > a[aria-current="page"] {
    border-bottom: 2px solid var(--color-text);
    font-weight: bold;
}

main {
    margin-top: 100px;
}

/* BANNER */

.main_home > .hero {
  display: grid;
  place-items: center;
  background-image: url("../images/selbstverteidigung-fuer-alle.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
}

#main-hl {
    display: grid;
    width: fit-content;
    margin-top: 21vw;
    margin-bottom: 6vw;
    justify-items: center;
    padding: 2vw;
}

#main-hl > h1 {
    margin-bottom: 0.5vw;
}

.about > img {
    max-width: 70%;
    margin: 0 auto;
}

/* Banner About */

#main_content > .about, #main_content > .second {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
    align-items: center;
    padding: 3vw 4vw 5vw 4vw;
}

.about > img {
    place-self: end;
}



/* section_title */

.section_title  {
    text-align: center;
    height: fit-content;
    width: 100%;
}


/* CARDS */
/* Cards home */

.home_cards_angebote, .home_cards_info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: calc(16px + 6 * ((100vw - 320px) / 680));
}

.home_cards_angebote > .card,
.home_cards_info > .card,
.story_content {
    display: flex;
    flex-direction: column;
    padding: calc(14px + 4 * ((100vw - 320px) / 680));
}

.card > .card-text {
    padding-bottom: 8px;
}

article.card.ein-sp {
    grid-template-columns: 1fr;
}

.kurs-auszug {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: calc(20px + 4 * ((100vw - 320px) / 680));
}

.home_cards_angebote > .card > img,
.home_cards_info > .card > img  {
    margin-bottom: calc(20px + 6 * ((100vw - 320px) / 680));
    width: 100%;
    height: auto;
    object-fit: cover;
}

.home_cards_angebote > .card > .card-button {
    align-self: flex-start;
    border: 2px solid #E94F85;
    padding: 0.7vw 1.4vw;
    margin-top: auto;
}



/* Cards Erwachsene */

.erwachsene-cards-fallbeispiele, .gruender-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(20px + 3 * ((100vw - 320px) / 680));
}

.erwachsene-cards-fallbeispiele > .card {
    display: grid;
    grid-template-columns: 2fr 5fr max-content;
    overflow: hidden;
}

.gruender-cards > .card {
    display: grid;
    grid-template-columns: 3fr 5fr max-content;
    overflow: hidden;
}

.erwachsene-cards-fallbeispiele > .card > img, .gruender-cards > .card > img {
    width: 100%;
    object-fit: cover;
    height: auto;
}


/* Cards Erwachsene Kursthemen */

.kurs-auszug > .card {
    padding: clamp(1.2rem, 4vw, 2.5rem);
}

.card > ul {
    padding-left: 1rem;
}

.card > ul > li {
    list-style-type: square;
}


/* 2-spaltiges Grid */

.charter, .trainer-werden, .trainer-werden, .bankverbindung {
    display: grid;
    grid-template-columns: 1fr 2fr;
    max-width: 1000px;
    margin: 2vw auto 2.5vw auto;
    gap: clamp(1rem, 3vw, 2rem);
}

.erwachsene-cards-fallbeispiele, .kurs-auszug, .gruender-cards, .workshop {
    margin-bottom: 6vw;
}

.workshop-eins, .workshop-zwei, .workshop-drei  {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2rem, 6vw, 4rem);
}

.workshop-eins > img, .workshop-zwei > img, .workshop-drei > img {
    width: 100%;
    height: auto;
    object-fit: scale-down;
}


/* Stärken/Pros Sektion */

#staerken {
    grid-template-columns: 1fr 1fr;
}


.pros {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2vw;
    padding: clamp(1.5rem, 4vw, 3rem);
    padding-left: 6vw;
}

.pros > div {
    display: grid;
    height: fit-content;
    align-self: center;
}

.trainingsraum {
    width: auto;
    height: 100%;
    object-fit: cover;
}

.pros_svg {
    width: calc(20px + 8 * ((100vw - 320px) / 680));
    height: calc(20px + 8 * ((100vw - 320px) / 680));
    margin-bottom: 1vw;
}

/* Sonstiges */

#info {
    padding-bottom: 8vw;
}


/* Media Queries */

@media (max-width: 1180px) {
.gruender-cards {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 900px;
    }
}

@media (min-width: 768px) {    
    .workshop-eins > img, .workshop-zwei > img, .workshop-drei > img {
        justify-self: end;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    main {
        margin-top: calc(50px + (90 - 50) * ((100vw - 280px) / (768 - 280)));
    }

    header {
        height: auto;
    }

    header > a > img {
        width: 70%;
        margin-left: 15px;
    }

    button#theme-toggle {
        margin-left: 15px;
        max-width: 50%;
    }

    .section_title:before {
        width: 18vw;
        height: 3vw;
        margin-top: calc(-21px + -9 * ((100vw - 320px) / 680));
    }

    .workshop-eins > img, .workshop-zwei > img, .workshop-drei > img {
        justify-self: end;
        max-width: 400px;
    }
    
    .pros {
        grid-template-columns: 2fr 4fr;
    }

    .top-nav {
        justify-self: end;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        background-color: var(--color-light-gray);
        display: grid;
        position: fixed;
        top: 70px;
        right: -100%;
        width: fit-content;
        padding: clamp(1rem, 6vw, 1.5rem);
        background-color: #f6f4f5;
        justify-content: flex-end;
        transition: right 0.3s ease;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 10;
    }

    .top-nav > ul > li {
        padding-bottom: clamp(1rem, 4vw, 1.5rem);
        width: max-content;
    }

    .nav-menu-open {
        background-color: var(--color-light-gray);
        right: 0;
        text-align: end;
    }

    .home_cards_angebote,
    .home_cards_info {
        grid-template-columns: 1fr 1fr;
    }

    .kurs-auszug {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .hero > div {
        margin-top: clamp(1rem, 4vw, 2rem);
    }

    .erwachsene-cards-fallbeispiele, #main_content > .second {
        grid-template-columns: 1fr;
    }

    #main_content > .second, .main_home > .hero {
        padding: 4vw 6vw 10vw 8vw;        
    }

    .second > h1 {
        order: 2;
    }
}


@media (max-width: 380px) {

    p, li, button, td {
        hyphens: auto;
    }

    .charter, .trainer-werden, .trainer-werden, .bankverbindung {
        gap: 0;
    }
    
    .pros, .erwachsene-cards-fallbeispiele > .card, .workshop-eins, .workshop-zwei, .workshop-drei, .charter, .gruender-cards > .card, .home_cards_angebote, .home_cards_info, .erwachsene-cards-fallbeispiele, .gruender-cards, .trainer-werden, .bankverbindung {
        grid-template-columns: 1fr;
    }

    .erwachsene-cards-fallbeispiele > .card > img {
        max-height: 62vw;
        object-position: top;
    }

}





/* Automatische Systemeinstellungen für Dark Mode respektieren */
@media (prefers-color-scheme: dark) {
    .logo-text {
        fill: #f9fafb !important;
    }
}

/* Überschreibung für explizit gewählten Light Mode */
@media (prefers-color-scheme: dark) {
    [data-theme="light"] .logo-text {
        fill: #040606 !important;
    }
}

/* Reduzierte Animation für Nutzer mit Bewegungsempfindlichkeit */

@media (prefers-reduced-motion: reduce) {
    body,
    header,
    .hero > div,
    .section_title,
    .pros,
    footer,
    .card,
    .workshop_details,
    .workshop-zwei,
    #theme-toggle,
    .toggle-icon {
        transition: none !important;
        animation: none !important;
    }
}