/* ==========================================================================
   Kontakt
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.ko-hero { position: relative; background: transparent; clip-path: inset(0); }
.ko-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 80px 32px;
  text-align: center;
}
.ko-hero__title { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ko-hero__title .h1 { white-space: nowrap; }

/* --- Direkter Kontakt ---------------------------------------------------- */
.ko-info { position: relative; background: transparent; clip-path: inset(0); }
.ko-info__inner {
  position: relative;
  z-index: 1;
  width: 629px;
  max-width: 100%;
  margin: 0 auto;
  padding-block: 40px 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ko-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  transition: box-shadow .18s ease, transform .18s ease;
}
a.ko-tile:hover { box-shadow: inset 0 0 0 1px var(--blue-main); transform: translateY(-2px); }
.ko-tile__icon { width: 24px; height: 24px; color: var(--blue-main); margin-bottom: 4px; }
.ko-tile__icon svg { width: 100%; height: 100%; }
.ko-tile__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ko-tile__value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--black);
  white-space: nowrap;
}
@media (max-width: 700px) { .ko-info__inner { grid-template-columns: 1fr; } }

/* --- Formular ------------------------------------------------------------ */
.ko-form { position: relative; background: transparent; clip-path: inset(0); }
.ko-form__inner { position: relative; z-index: 1; padding-block: 28px 11px; }
.ko-form__title {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: normal;
  color: var(--plum-main);
  text-align: center;
}

.kform {
  width: 629px;
  max-width: 100%;
  margin: 33px auto 0;
  display: grid;
  grid-template-columns: 303fr 303fr;
  column-gap: 23px;
  row-gap: 24px;
}
.kfield { display: flex; flex-direction: column; gap: 8px; }
.kfield--wide { grid-column: 1 / -1; }
.kfield label {
  font-family: "Open Sans", var(--font-body), sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
}
.kfield input,
.kfield textarea {
  background: var(--blue-very-light);
  border: 1px solid var(--blue-main);
  border-radius: 3px;
  height: 39px;
  padding: 8px 12px;
  font-family: "Open Sans", var(--font-body), sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--black);
  width: 100%;
}
.kfield textarea { height: 121px; resize: vertical; }
.kfield input:focus, .kfield textarea:focus { outline: 2px solid var(--blue-main); outline-offset: 1px; }

.kform__consent { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.kform__consent p,
.kform__consent label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: normal;
}
.kform__consent a { text-decoration: underline; }
.kform__check { display: flex; align-items: flex-start; gap: 8px; }
.kform__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--black);
  border-radius: 4px;
  background: var(--white);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.kform__check input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.kform__check input[type="checkbox"]:checked { background: var(--blue-main); border-color: var(--blue-main); }
.kform__check input[type="checkbox"]:checked::after { opacity: 1; }
.kform__check label { padding-top: 2px; }
.kform__check strong { font-weight: 700; }

.kform__submit { grid-column: 1 / -1; margin-top: 9px; }
.kform__submit .btn { min-width: 200px; }
.kform__note {
  grid-column: 1 / -1;
  margin-top: 0;
  width: 100%;
  max-width: 630px;
  font-family: "Open Sans", var(--font-body), sans-serif;
  font-style: italic;
  font-size: 12px;
  line-height: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kform__status {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--blue-main);
  background: var(--blue-very-light);
}
.kform__status--error { color: #b3261e; background: #fdeceb; }

/* Solange die Anfrage läuft, bleibt der Knopf sichtbar, aber gesperrt. */
.kform__submit .btn[disabled] { opacity: .6; pointer-events: none; }

@media (max-width: 700px) {
  .kform { grid-template-columns: 1fr; }
  .kform__submit .btn { width: 100%; }
}

/* Der Zeilenumbruch im Titel ist für breite Bildschirme gesetzt; auf schmalen
   bricht der Text ohnehin und der harte Umbruch ließe „und" allein stehen. */
@media (max-width: 700px) { .ko-form__title br { display: none; } }

/* Demo-Hinweis unter dem Formulartitel */
.ko-form__note { max-width: 640px; margin: 12px auto 0; text-align: center; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--text-muted); }

/* --- Messen ---------------------------------------------------------------
   Aufbau wie bei galvorn.eu: dunkles Band, oben die Ansprache über die volle
   Breite, darunter die Terminkarten und daneben das Foto vom Stand. Bild und
   Kartenstapel teilen sich dieselbe Rasterzeile und sind deshalb oben wie
   unten bündig; ab 1000px rutscht das Bild unter die Karten. */
.ko-messe { background: var(--blue-dark-2); color: var(--white); }
.ko-messe__inner {
  padding-block: 64px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  grid-template-areas: "copy copy" "liste bild";
  align-items: start;
  gap: 40px 56px;
}
.ko-messe__copy { grid-area: copy; }
.ko-messe__list { grid-area: liste; }
.ko-messe__bild {
  grid-area: bild;
  margin: 0;
  /* Das Bild liegt absolut im Rahmen und zieht die Rasterzeile deshalb nicht
     in die Länge: Die Höhe geben die Terminkarten vor, das Bild füllt sie. */
  position: relative;
  align-self: stretch;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.ko-messe__bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.ko-messe__copy .shead__title { margin-top: 16px; }
.ko-messe__note {
  margin-top: 20px;
  max-width: 620px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .75);
}
.ko-messe__list { display: grid; gap: 24px; }
.ko-fair {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
/* Titel links, Logo-Plakette rechts; wird die Karte zu schmal, rutscht die
   Plakette über den Titel (wrap-reverse). Weiße Plakette, damit alle drei
   Messelogos in ihren Originalfarben stehen können. */
.ko-fair__head { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 16px 24px; }
.ko-fair__logo {
  flex: none;
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--white);
}
.ko-fair__logo img { display: block; width: auto; }
.ko-fair__logo--scc img { height: 36px; }
.ko-fair__logo--ss img { height: 40px; }
.ko-fair__logo--kommunal img { height: 17px; }
.ko-fair__name { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.25; }
.ko-fair__name a { color: var(--white); text-decoration: none; }
.ko-fair__name a:hover { color: var(--blue-medium); }
.ko-fair__name span { color: var(--blue-medium); }
.ko-fair__facts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ko-fair__facts li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 400; font-size: 16px; }
.ko-fair__icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--blue-medium); }
.ko-fair__icon svg { width: 20px; height: 20px; }
.ko-fair__what {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 1000px) {
  .ko-messe__inner {
    padding-block: 48px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "liste" "bild";
    gap: 32px;
  }
  .ko-messe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ungerade Anzahl: die letzte Karte nimmt die ganze Zeile */
  .ko-fair:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Unter den Karten liegt das Foto quer über die volle Breite – als
     Panorama-Ausschnitt statt als Hochformat, das die Seite nur verlängert. */
  .ko-messe__bild { align-self: auto; aspect-ratio: 2 / 1; }
}
@media (max-width: 700px) {
  .ko-messe__list { grid-template-columns: minmax(0, 1fr); }
  .ko-messe__bild { aspect-ratio: 4 / 3; border-radius: 16px; }
}