:root {
  --col-lila: #555C9A;
  --col-blau: #0274be;
}

*, *::before, *::after 				      { -webkit-box-sizing: border-box; box-sizing: border-box; }
html 								                { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; background-color: white; font-size: 20px; } 
body						                    { margin: 0; -webkit-font-smoothing: antialiased; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.container                          { display: flex; flex-direction: column; margin: 0 auto; width: 100vw; max-width: 800px; align-items: center; padding: 5vh 20px; }
.container + .container             { padding-top: 0; }
#main                               { background: linear-gradient(to top, rgba(101,178,228,.5), #fff); }
#logo                               { width: 200px; height: auto; }
.text-center                        { text-align: center; }
.blau                               { color: var(--col-blau); }
.grau                               { color: #666; }
.small                              { font-size: .8em; }

h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,pre { margin: 0; padding: 0; font-size: 1em; line-height: 1; }
* + .hl                             { margin-top: 2em; }
.hl                                 { margin-bottom: 1em; text-wrap: balance; font-family: 'Cantora One'; font-weight: 400 !important; color: var(--col-lila); }
.hl:has(+.hl)                       { margin-bottom: 0; }
.hl + .hl                           { margin-top: 0; }
.h1                                 { font-size: 2.8em; }
.h2                                 { font-size: 2.2em; }
.h3                                 { font-size: 1.8em; }
.h4                                 { font-size: 1.6em; }
.h5                                 { font-size: 1.4em; }
.h6                                 { font-size: 1.2em; }

a                                   { color: var(--col-blau); }
a:has(.icon)                        { display: inline-flex; padding: 0; color: var(--col-lila); align-items: center; text-decoration: none; line-height: 1; }

.btn                                { display: inline-flex; text-decoration: none; color: white; background-color: var(--col-blau); padding: 15px 30px; line-height: 1; border-radius: 20px; }
.btn:hover                          { background-color: var(--col-lila); }

p, .p, li, dt  						          { line-height: 1.5; text-wrap: pretty; color: #333; }

.container > .text                  { width: 100%; }
.text ul + p,
.text p + ul,
.text p + p                         { margin-top: 1em; }

.text ul                            { margin-left: 1.5em; }

footer p                            { font-size: 0.8em; color: #666; }        

img.circleimage                     { max-width: 200px; height: auto; }

.contact-box                        { margin: 1em 0; background-color: white; padding: 2em; border-radius: 1em; display: flex; gap: 2em; flex-direction: row; align-items: center; }
.contact-box p.grau                 { font-size: 0.8em; }

span.icon svg                       { width: 1.5em; height: auto; fill: var(--col-lila); }

@media only screen and (orientation: portrait) {
body                                { font-size: 16px; } 
#logo                               { max-width: 30vw; height: auto; }

.contact-box                        { flex-direction: column; align-items: center; }
.contact-box p:not(.grau)           { text-decoration: center; }

}

/* Formulare */
* + .form                            { margin-top: 1rem; }
input,textarea,select,button        { padding: 5px 10px; margin: 0; font-size: 18px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; border: 1px solid var(--col-lila); background: none; color: #333; }
.form button                        { background: var(--col-blau); color: white !important; padding: 10px 20px; border-radius: 10px; cursor: pointer; }
.form button:hover                  { background: var(--col-lila); }
input,textarea                      { width: 100%; }
input[type="radio"],
input[type="checkbox"]             { width: auto; padding: 0; margin-right: .5em; border-radius: 999px; }
.form                               { max-width: 600px; background-color: white; padding: 1rem; border-radius: 10px; }
.form .template                     { display: none; }
.form-item label                    { font-size: 16px; color: var(--col-blau); font-weight: 400; }
.form-item                          { padding: .2em 0; }
.form-item .pflicht                 { font-size: 14px; }
.form-item.type-info .hl            { margin-bottom: 0; }
div + .form-item.type-info          { margin-top: 1rem; }
.repeat-item .type-info .hl         { color: var(--col-blau); font-size: 1em; }
.repeat-container .repeat-item + .repeat-item { margin-top: 1rem; }
p + button                          { margin-top: 10px; }

/* Client-side validation (set via aria-invalid in JS) */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"]        { border-color: var(--col-blau); box-shadow: 0 0 0 2px color-mix(in srgb, var(--col-blau) 25%, transparent); background-color: color-mix(in srgb, var(--col-blau) 6%, transparent); }

input[type="radio"][aria-invalid="true"],
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid color-mix(in srgb, var(--col-blau) 60%, transparent); outline-offset: 2px; }

.form button:disabled               { opacity: .6; cursor: not-allowed; }
/* NEW: keep disabled inputs readable (we disable fields after successful submit) */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: .5;
  background-color: rgba(0,0,0,.04);
  color: #333;
  cursor: default;
}

.kurswahl + .kurswahl { margin-top: 10px; }
.kurswahl:has(input:checked) { background-color: #f5f5f5; border-radius: 5px; }
.kurswahl .termin { color: #666; }

.anmeldung-thanks { padding: 20px; background-color: var(--col-lila); color: white; border-radius: 10px; text-align: center; }

/* Swiper */
.swiper-gallery .swiper-slide       { aspect-ratio: 4 / 3; background-color: white; line-height: 0; border-radius: 10px; overflow: hidden; }
.swiper-gallery .swiper-slide img   { width: 100%; height: auto; object-fit: cover; }

/* Fonts */
/* cantora-one-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Cantora One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cantora-one-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/cantora-one-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cantora-one-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/cantora-one-v19-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/cantora-one-v19-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/cantora-one-v19-latin-regular.svg#CantoraOne') format('svg'); /* Legacy iOS */
}