/* KI-Schulung Rosenheim - eigene Gestaltung
   Schriften: Manrope und Space Grotesk (SIL OFL 1.1, siehe schriften/*-OFL.txt) */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("schriften/manrope-latin.php") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("schriften/space-grotesk-latin.php") format("woff2"); }

:root {
    --tinte: #17202a;
    --tinte-weich: #4a5560;
    --grund: #fbf8f3;
    --flaeche: #ffffff;
    --hell: #f3eee6;
    --brezel: #f7e8d0;
    --linie: #e2dacd;
    --primaer: #0f4c5c;
    --primaer-dunkel: #0a3540;
    --primaer-hell: #e3eff1;
    --akzent: #f2a65a;
    --akzent-text: #9a4a12;
    --ok: #1d6b43;
    --ok-hell: #e6f3eb;
    --fehler: #a8261b;
    --fehler-hell: #fbeceb;
    --radius: 14px;
    --radius-klein: 9px;
    --schatten: 0 1px 2px rgba(23, 32, 42, .06), 0 8px 24px rgba(23, 32, 42, .07);
    --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --titelschrift: "Space Grotesk", "Manrope", system-ui, sans-serif;
    --breite: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--primaer); text-underline-offset: .18em; }
a:hover { color: var(--primaer-dunkel); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, .h3 { font-family: var(--titelschrift); line-height: 1.15; letter-spacing: -.015em; color: var(--tinte); margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 650; }
h3, .h3 { font-size: 1.22rem; font-weight: 650; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -999px; top: 8px; background: var(--primaer); color: #fff; padding: .6em 1em; border-radius: var(--radius-klein); z-index: 100; }
.springen:focus { left: 8px; }

.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .rahmen { padding: 0 28px; } }
.schmal { max-width: 820px; }
.mittig { text-align: center; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 243, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
.marke-zeichen { width: 38px; height: 38px; flex: none; }
.marke-text { font-family: var(--titelschrift); font-size: 1.12rem; letter-spacing: -.01em; }
.menue-knopf { display: inline-flex; font: inherit; font-weight: 700; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-radius: 999px; padding: .45em 1.1em; cursor: pointer; }
.hauptmenue { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0 16px; }
.hauptmenue.offen { display: flex; }
.hauptmenue a:not(.knopf) { text-decoration: none; color: var(--tinte); font-weight: 600; padding: .5em .2em; }
.hauptmenue a[aria-current="page"] { color: var(--primaer); }
.hauptmenue .knopf { color: #fff; text-align: center; margin-top: 6px; }
@media (min-width: 960px) {
    .menue-knopf { display: none; }
    .hauptmenue { display: flex; width: auto; flex-direction: row; align-items: center; gap: 22px; padding: 0; }
    .hauptmenue a:not(.knopf) { padding: 0; }
    .hauptmenue .knopf { margin-top: 0; }
}

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center; background: var(--primaer); color: #fff; border: 2px solid var(--primaer); border-radius: 999px; padding: .8em 1.5em; cursor: pointer; transition: background .15s, transform .15s; }
.knopf:hover { background: var(--primaer-dunkel); border-color: var(--primaer-dunkel); color: #fff; transform: translateY(-1px); }
.knopf-zweit { background: transparent; color: var(--primaer); }
.knopf-zweit:hover { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.knopf-klein { padding: .5em 1.05em; font-size: .94rem; }
.knopf-gross { padding: .95em 1.9em; font-size: 1.08rem; }
.knopf-voll { width: 100%; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.textlink { font-weight: 700; }
.textlink-hell { color: #fff; }
.textlink-hell:hover { color: var(--brezel); }

.kicker, .karte-kicker { font-family: var(--titelschrift); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-text); margin: 0 0 .7em; }

/* Held */
.held { padding: 48px 0 56px; background:
    radial-gradient(900px 420px at 92% -10%, rgba(242, 166, 90, .22), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(15, 76, 92, .10), transparent 60%); }
.held-raster { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .held { padding: 80px 0 88px; } .held-raster { grid-template-columns: 1.45fr 1fr; gap: 56px; } }
.held-einleitung { font-size: 1.16rem; color: var(--tinte-weich); max-width: 40em; }
.held-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 26px; box-shadow: var(--schatten); position: relative; overflow: hidden; }
.held-karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--primaer), var(--akzent)); }
.karte-titel { font-family: var(--titelschrift); font-size: 1.5rem; font-weight: 700; margin: 0 0 .3em; line-height: 1.2; }
.karte-termin { background: var(--brezel); border-radius: var(--radius-klein); padding: 12px 14px; display: grid; gap: 2px; }
.karte-termin span { font-size: .82rem; font-weight: 700; color: var(--akzent-text); text-transform: uppercase; letter-spacing: .06em; }
.held-kurs { padding-top: 24px; }
.held-brotzeit { background: radial-gradient(900px 420px at 92% -10%, rgba(242, 166, 90, .35), transparent 60%), var(--grund); }

/* Leiste */
.leiste { background: var(--primaer); color: #fff; }
.leiste-liste { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; padding-top: 18px; padding-bottom: 18px; }
.leiste-liste li { display: grid; padding: 10px 6px; }
.leiste-liste strong { font-family: var(--titelschrift); font-size: 1.05rem; }
.leiste-liste span { color: #cfe3e7; font-size: .93rem; }

/* Abschnitte */
.abschnitt { padding: 64px 0; }
@media (min-width: 900px) { .abschnitt { padding: 88px 0; } }
.abschnitt-hell { background: var(--hell); }
.abschnitt-dunkel { background: var(--primaer-dunkel); color: #e8f0f2; }
.abschnitt-dunkel h2 { color: #fff; }
.abschnitt-dunkel .kicker, .abschnitt-dunkel .karte-kicker { color: var(--akzent); }
.abschnitt-dunkel a { color: #fff; }
.abschnitt-brotzeit { background: var(--brezel); }
.einleitung { font-size: 1.1rem; color: var(--tinte-weich); max-width: 46em; margin-bottom: 2em; }
.zwei-spalten { display: grid; gap: 40px; }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Kurskarten */
.kurs-raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.kurs-raster-klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.kurs-karte { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten); transition: transform .15s, box-shadow .15s; }
.kurs-karte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 32, 42, .06), 0 14px 32px rgba(23, 32, 42, .10); }
.kurs-karte h3 a { color: var(--tinte); text-decoration: none; }
.kurs-karte h3 a:hover { color: var(--primaer); text-decoration: underline; }
.kurs-karte > p:not(.karte-kicker):not(.karte-preis) { color: var(--tinte-weich); font-size: .98rem; }
.kurs-karte-gratis { background: linear-gradient(160deg, var(--brezel), #fff 70%); border-color: #ecd3ae; }
.kurs-karte-firma { background: var(--primaer-hell); border-color: #c6dde2; grid-column: 1 / -1; gap: 12px; }
.kurs-karte-firma .firma-rechts { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 900px) { .kurs-karte-firma { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } .kurs-karte-firma > div:first-child { max-width: 62ch; } .kurs-karte-firma .firma-rechts { justify-items: end; text-align: right; } }
.karte-preis { margin-top: auto; padding-top: 8px; }
.karte-knoepfe { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.eckdaten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; padding: 12px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.eckdaten dt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-weich); }
.eckdaten dd { margin: 0; font-weight: 600; }
.eckdaten-senkrecht { grid-template-columns: 1fr; border: 0; padding: 0; gap: 14px; }
.preis { display: inline-grid; gap: 1px; line-height: 1.35; }
.preis strong { font-family: var(--titelschrift); font-size: 1.35rem; color: var(--tinte); }
.preis-netto { font-size: .9rem; color: var(--tinte-weich); }

/* Listen */
.haken { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 32px; }
.haken li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--primaer) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.abschnitt-dunkel .haken li::before, .held-karte .haken li::before { background-color: var(--akzent); }

.brotzeit-raster { display: grid; gap: 36px; }
@media (min-width: 900px) { .brotzeit-raster { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } }
.brotzeit-termine { background: var(--flaeche); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten); }
.terminliste { list-style: none; margin: 0; padding: 0; display: grid; }
.terminliste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.terminliste li:last-child { border-bottom: 0; }
.terminliste li > span:first-child { display: grid; color: var(--tinte-weich); font-size: .95rem; }
.terminliste li > span:first-child strong { color: var(--tinte); font-size: 1rem; }
.terminliste-gross li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 16px 18px; margin-bottom: 10px; }
.knapp { color: var(--akzent-text); font-weight: 700; }
.ausgebucht { color: var(--fehler); font-weight: 700; }

.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.schritte li { counter-increment: schritt; background: var(--flaeche); border-radius: var(--radius); padding: 22px; display: grid; gap: 6px; box-shadow: var(--schatten); }
.schritte li::before { content: counter(schritt); font-family: var(--titelschrift); font-weight: 700; font-size: 1.1rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primaer); color: #fff; margin-bottom: 6px; }
.schritte span { color: var(--tinte-weich); font-size: .97rem; }

/* Termintabelle */
.tabelle-huelle { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); }
.termintabelle { width: 100%; border-collapse: collapse; font-size: .97rem; }
.termintabelle th, .termintabelle td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.termintabelle thead th { background: var(--hell); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-weich); }
.termintabelle tbody tr:last-child td { border-bottom: 0; }
.termintabelle small { color: var(--tinte-weich); }
@media (max-width: 760px) {
    .tabelle-huelle { border: 0; background: transparent; overflow: visible; }
    .termintabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .termintabelle, .termintabelle tbody, .termintabelle tr, .termintabelle td { display: block; width: 100%; }
    .termintabelle tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 10px 14px; margin-bottom: 12px; }
    .termintabelle td { border: 0; padding: 4px 0; display: flex; gap: 12px; }
    .termintabelle td[data-titel]::before { content: attr(data-titel); flex: 0 0 76px; font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--tinte-weich); padding-top: .15em; }
}
.hinweis { font-size: .92rem; color: var(--tinte-weich); margin-top: 1em; }

.adresskarte { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: 26px; align-self: start; }
.adresse { font-size: 1.12rem; line-height: 1.6; }
.firmen-teaser { background: var(--primaer-hell); border-radius: var(--radius); padding: 28px; align-self: start; }

/* FAQ */
.faq details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 48px 16px 18px; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--primaer); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--tinte-weich); }
.abschluss { background: linear-gradient(135deg, var(--primaer), var(--primaer-dunkel)); color: #e8f0f2; }
.abschluss h2 { color: #fff; }
.abschluss .knopf { background: var(--akzent); border-color: var(--akzent); color: var(--tinte); }
.abschluss .knopf:hover { background: #f7bd80; border-color: #f7bd80; }

/* Kursseite */
.krumen { padding-top: 18px; font-size: .9rem; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--tinte-weich); }
.krumen li + li::before { content: "›"; margin-right: 6px; }
.kurs-raster-inhalt { display: grid; gap: 40px; }
@media (min-width: 900px) { .kurs-raster-inhalt { grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: start; } }
.fliesstext h2 { margin-top: 1.2em; }
.fliesstext h2:first-child { margin-top: 0; }
.seitenkasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten); }
.seitenkasten .h3 { font-size: 1.02rem; margin-bottom: .3em; }
.seitenkasten p { color: var(--tinte-weich); font-size: .97rem; }
@media (min-width: 900px) { .seitenkasten { position: sticky; top: 92px; } }

/* Buchung */
.abschnitt-buchung { padding-top: 24px; }
.buchung-raster { display: grid; gap: 32px; }
@media (min-width: 960px) { .buchung-raster { grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; } }
.buchung-haupt h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.fortschritt { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; font-size: .88rem; font-weight: 700; }
.fortschritt li { padding: .35em .9em; border-radius: 999px; background: var(--hell); color: var(--tinte-weich); }
.fortschritt li[aria-current="step"] { background: var(--primaer); color: #fff; }
.formular fieldset { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: 20px; margin: 0 0 20px; min-width: 0; }
.formular legend { font-family: var(--titelschrift); font-weight: 650; font-size: 1.12rem; padding: 0 8px; }
.feld { margin-bottom: 16px; display: grid; gap: 6px; }
.feld[hidden] { display: none; }
.feld-zeile { display: grid; gap: 0 16px; }
@media (min-width: 620px) { .feld-zeile { grid-template-columns: 1fr 1fr; } .feld-zeile .feld-schmal { max-width: none; } }
.feld-schmal { max-width: 220px; }
.feld label, .feld legend { font-weight: 700; font-size: .95rem; }
.zusatz { font-weight: 400; color: var(--tinte-weich); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld select, .feld textarea {
    width: 100%; font: inherit; color: var(--tinte); background: #fff; border: 1.5px solid #cfc6b8; border-radius: var(--radius-klein); padding: .7em .85em; }
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--primaer); outline: 3px solid rgba(15, 76, 92, .18); outline-offset: 0; }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feldfehler { color: var(--fehler); font-size: .9rem; font-weight: 600; margin: 0; }
.auswahl-zeile { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.auswahl-raster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.auswahl { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.auswahl input, .haken-feld input { width: 20px; height: 20px; accent-color: var(--primaer); flex: none; }
.haken-feld { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; line-height: 1.5; }
.haken-feld input { margin-top: .2em; }
.zahlart { background: var(--primaer-hell); border-radius: var(--radius-klein); padding: 12px 14px; }
.falle { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.meldung { border-radius: var(--radius-klein); padding: 14px 18px; margin-bottom: 20px; font-weight: 600; }
.meldung p { margin: 0 0 .4em; font-weight: 500; }
.meldung-fehler { background: var(--fehler-hell); color: var(--fehler); border: 1px solid #f0c7c3; }
.meldung-ok { background: var(--ok-hell); color: var(--ok); border: 1px solid #bfdfcb; }
.meldung-ok p { color: var(--tinte); }
.uebersicht { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.liste-zwei { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 18px; margin: 0 0 18px; }
.liste-zwei dt { font-weight: 700; color: var(--tinte-weich); font-size: .93rem; }
.liste-zwei dd { margin: 0; }
.summen { width: 100%; max-width: 420px; border-collapse: collapse; margin-bottom: 14px; }
.summen th { text-align: left; font-weight: 500; padding: 5px 0; }
.summen td { text-align: right; padding: 5px 0; font-variant-numeric: tabular-nums; }
.summen .summe th, .summen .summe td { font-weight: 800; font-size: 1.1rem; border-top: 2px solid var(--tinte); padding-top: 9px; }
.uebersicht-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.buchung-seite .karte-titel { font-size: 1.25rem; }
.buchung-seite .eckdaten { margin-top: 14px; }

/* Rechtstexte */
.rechtstext h2 { font-size: 1.25rem; margin-top: 1.6em; }

/* Fuss */
.fuss { background: var(--tinte); color: #c9d1d8; padding: 56px 0 24px; font-size: .95rem; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fuss-marke { font-family: var(--titelschrift); font-size: 1.2rem; color: #fff; }
.fuss-titel { font-weight: 700; color: #fff; margin-bottom: .4em; }
.fuss-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fuss-unten p { margin: 0; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 420px) {
    .kopf-innen { gap: 10px; }
    .marke { gap: 8px; }
    .marke-zeichen { width: 34px; height: 34px; }
    .marke-text { font-size: 1rem; }
    .menue-knopf { padding: .4em .9em; }
}