/*

    IHK Aachen Kandidaten-iFrame
    Version 1.1.0 / Letzte Änderung: 22.10.2026

*/

/*
    SCHRIFT (lokal)
*/
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2');
}

/*
    FARBEN
*/
:root {
  --ihk-blau:        #003366;
  --ihk-gruen:       #56BD66;
  --ihk-karte-bg:    #e9eef5;
  --ihk-weiss:       #ffffff;
  --ihk-grau-text:   rgba(0, 51, 102, .72);
  --ihk-grau-zart:   rgba(0, 51, 102, .55);
  --ihk-flaeche:     #e3ebf5;

  --ihk-gradient:    linear-gradient(100deg, #003366 0%, #003366 35%, #56BD66 100%);
  --ihk-radius:      8px;
  --ihk-gap:         28px;
  --ihk-font:        'Source Sans Pro', Arial, sans-serif;
}

/*
    BASICS
*/
.ihk-iframe *, .ihk-iframe *::before, .ihk-iframe *::after { box-sizing: border-box; }

.ihk-iframe {
  font-family: var(--ihk-font);
  color: var(--ihk-blau);
  background: var(--ihk-weiss);
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
.ihk-iframe a { color: var(--ihk-blau); }
.ihk-iframe a:hover { color: var(--ihk-gruen); }
.ihk-iframe .is-hidden { display: none !important; }

/*
    FILTERLEISTE
*/
.ihk-banner {
  max-width: 1400px; margin: 0 auto;
  background: var(--ihk-gradient);
  border-radius: 0;   /* randlose Einbindung */
  color: var(--ihk-weiss);
  padding: 24px 28px;
}
.ihk-banner__title { margin: 0 0 16px; font-size: 24px; font-weight: 700; color: var(--ihk-weiss); }
.ihk-banner__form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ihk-filter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }

.ihk-filter__select,
.ihk-suche__input,
#ctl00_ContentPlaceHolder1_ddlWahlbezirk,
#ctl00_ContentPlaceHolder1_ddlWahlgruppe,
#ctl00_ContentPlaceHolder1_ddlGremien,
#ctl00_ContentPlaceHolder1_ddlWahlart {
  width: 100%;
  font: inherit; font-size: 16px;
  color: var(--ihk-blau);
  background-color: var(--ihk-weiss);
  border: none;
  border-radius: 6px;   /* minimale Abrundung */
  padding: 12px 18px;
  outline: none;
}
.ihk-filter__select,
#ctl00_ContentPlaceHolder1_ddlWahlbezirk,
#ctl00_ContentPlaceHolder1_ddlWahlgruppe,
#ctl00_ContentPlaceHolder1_ddlGremien,
#ctl00_ContentPlaceHolder1_ddlWahlart {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003366'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 22px;
  padding-right: 42px;
}
/* Placeholder: grün, beim Fokus transparent */
.ihk-suche__input::placeholder { color: #407929; opacity: 1; transition: color .2s; }
.ihk-suche__input:focus::placeholder { color: rgba(64, 121, 41, .35); }

.ihk-filter--suche { flex: 2 1 280px; }
.ihk-suche__zeile { display: flex; align-items: center; gap: 10px; }
.ihk-suche__zeile .ihk-suche__input { flex: 1 1 auto; }
.ihk-suchbutton {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 20px;   /* abgerundetes Quadrat */
  background: var(--ihk-blau); color: var(--ihk-weiss);
  cursor: pointer; transition: background .2s, color .2s;
}
.ihk-suchbutton:hover { background: var(--ihk-flaeche); }   /* Hover: Farben invertiert */
.ihk-suchbutton:hover svg { fill: var(--ihk-blau); }
.ihk-suchbutton svg { width: 26px; height: 26px; fill: var(--ihk-weiss); transition: fill .2s; }

/*
    SUCHTREFFER UND FILTER
*/
.ihk-ergebnisleiste {
  max-width: 1400px; margin: 12px auto 0;
  padding: 0 28px;   /* bündig mit Banner */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px;
}
.ihk-counter { background: var(--ihk-flaeche); border-radius: 999px; padding: 6px 16px; font-weight: 600; color: var(--ihk-blau); }
.ihk-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.ihk-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ihk-flaeche); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.ihk-badge--entfernbar .ihk-badge__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: var(--ihk-blau); color: var(--ihk-weiss);
  font-size: 13px; line-height: 1; cursor: pointer; transition: background .2s;
}
.ihk-badge--entfernbar .ihk-badge__x:hover { background: var(--ihk-gruen); }

/*
    KANDIDATEN
*/
.ihk-kandidaten,
#ctl00_ContentPlaceHolder1_dlKandidaten {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--ihk-gap);
  padding: 24px 0 48px;
}

/* subgrid, damit Name, Bild und Text in einer Reihe auf gleicher Höhe starten */
.ihk-kandidat {
  grid-row: span 3;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
  background: var(--ihk-karte-bg);
  border-radius: var(--ihk-radius);
  overflow: hidden;
}
.ihk-kandidat__name { margin: 0; padding: 18px 20px 12px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ihk-blau); }
.ihk-kandidat__name strong { color: inherit; font-weight: 700; }

.ihk-kandidat__bildwrap { position: relative; display: block; line-height: 0; }
/* Foto 3:4 */
.ihk-kandidat__bild { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
/* Platzhalter, solange kein Foto da ist */
.ihk-kandidat__bild--platzhalter { background: #d3ddec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a6b6d0'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center / 44% no-repeat; }

/* Reihenfolge der Felder kommt aus dem HTML */
.ihk-kandidat__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }

.ihk-kandidat__funktion,
.ihk-kandidat__firma,
.ihk-kandidat__wahlgruppe,
.ihk-kandidat__bezirk { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ihk-blau); margin: 0; }

.ihk-kandidat__ort { font-size: 15px; color: var(--ihk-grau-zart); margin: 0; }

/* Wahlgruppe: / Wahlbezirk: */
.ihk-kandidat__feldlabel {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--ihk-grau-zart);
  margin: 6px 0 -4px;
}

/*
    STATEMENT
*/
.ihk-kandidat__text { font-size: 15px; line-height: 1.5; color: var(--ihk-blau); margin: 0; }

.ihk-kandidat__statement { position: relative; margin-top: 6px; }
.ihk-kandidat__cb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.ihk-kandidat__clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ihk-kandidat__cb:checked ~ .ihk-kandidat__clamp,
.ihk-kandidat.is-open .ihk-kandidat__clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }

.ihk-kandidat__toggle { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ihk-blau); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ihk-kandidat__toggle:hover { color: var(--ihk-gruen); }

/* Mehr erfahren */
.ihk-kandidat__toggle--mehr { position: absolute; right: 0; bottom: 0; padding-left: 8px; background: var(--ihk-karte-bg); }
.ihk-kandidat__toggle--mehr::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 32px; background: linear-gradient(to right, rgba(233,238,245,0), var(--ihk-karte-bg)); pointer-events: none; }
.ihk-kandidat__cb:checked ~ .ihk-kandidat__toggle--mehr,
.ihk-kandidat.is-open .ihk-kandidat__toggle--mehr { display: none; }

/* weniger, nur aufgeklappt */
.ihk-kandidat__toggle--weniger { margin-left: 6px; }
.ihk-kandidat:not(.is-open) .ihk-kandidat__cb:not(:checked) ~ .ihk-kandidat__clamp .ihk-kandidat__toggle--weniger { display: none; }

/* .is-kurz setzt ihk-hoehe.js, wenn der Text in 2 Zeilen passt */
.ihk-kandidat__statement.is-kurz .ihk-kandidat__toggle { display: none; }

.ihk-kandidat__cb:focus-visible ~ .ihk-kandidat__toggle--mehr,
.ihk-kandidat__cb:focus-visible ~ .ihk-kandidat__clamp .ihk-kandidat__toggle--weniger { outline: 3px solid var(--ihk-gruen); outline-offset: 2px; }

/*
    SOCIAL ICONS
*/
.ihk-social { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.ihk-iframe .ihk-social__link {
  display: inline-flex; width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--ihk-blau); color: var(--ihk-weiss);
  text-decoration: none; transition: background .2s;
}
.ihk-iframe .ihk-social__link:hover { background: var(--ihk-gruen); color: var(--ihk-weiss); }
.ihk-social__link svg { width: 16px; height: 16px; fill: #ffffff; }
.ihk-social__link[href=""], .ihk-social__link:not([href]) { display: none; }

/*
    KEINE TREFFER
*/
.ihk-keine-treffer { max-width: 1400px; margin: 0 auto; padding: 48px; text-align: center; color: var(--ihk-grau-text); font-size: 18px; }

/*
    RESPONSIVE
*/
@media (max-width: 999px) {
  .ihk-kandidaten, #ctl00_ContentPlaceHolder1_dlKandidaten { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ihk-kandidaten, #ctl00_ContentPlaceHolder1_dlKandidaten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ihk-iframe { font-size: 16px; }
  .ihk-banner__form { flex-direction: column; align-items: stretch; }
  .ihk-filter { flex-basis: auto; }
  .ihk-kandidaten, #ctl00_ContentPlaceHolder1_dlKandidaten { grid-template-columns: 1fr; gap: 20px; }
}

/* Fokus */
.ihk-iframe :focus-visible { outline: 3px solid var(--ihk-gruen); outline-offset: 2px; }