/* IAT GmbH – gemeinsames Stylesheet (Neuaufbau 2026)
   Keine externen Schriften: Systemschriften, damit keine Daten an Dritte gehen. */

:root {
  --marke: #4600b8;          /* Logo-Violett */
  --marke-dunkel: #33008a;
  --marke-hell: #efe9fa;
  --text: #1f1f24;
  --text-leise: #55555f;
  --linie: #dcdce3;
  --flaeche: #f6f6f9;
  --weiss: #ffffff;
  --breite: 1100px;
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--marke); text-underline-offset: 0.15em; }
a:hover { color: var(--marke-dunkel); }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.kopf .huelle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.kopf .logo img { height: 64px; width: auto; }
@media (min-width: 820px) { .kopf .logo img { height: 76px; } }

.hauptnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
}
.hauptnav a {
  display: block; padding: 0.35rem 0;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: var(--marke); }
.hauptnav a[aria-current="page"] { color: var(--marke); border-bottom-color: var(--marke); }

/* ---------- Seitentitel ---------- */
.seitentitel { background: linear-gradient(100deg, var(--marke-dunkel) 0%, var(--marke) 55%, #5a1fd0 100%); color: var(--weiss); }
.seitentitel .huelle { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.seitentitel h1 { margin: 0 0 0.5rem 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
.seitentitel p { margin: 0; max-width: 46rem; font-size: 1.125rem; opacity: 0.92; }

.seitentitel--foto {
  background-image: linear-gradient(95deg, rgba(51,0,138,0.97) 0%, rgba(70,0,184,0.94) 52%, rgba(70,0,184,0.55) 72%, rgba(70,0,184,0.18) 100%), var(--banner);
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.seitentitel--foto .huelle { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 820px) { .seitentitel--foto .huelle { padding-top: 3.75rem; padding-bottom: 3.75rem; } }
.banner-geschaeftsfelder { --banner: url("../images/banner-geschaeftsfelder.jpg"); }
.banner-unternehmen      { --banner: url("../images/banner-unternehmen.jpg"); }
.banner-karriere         { --banner: url("../images/banner-karriere.jpg"); }
.banner-stellen          { --banner: url("../images/banner-stellen.jpg"); }
.banner-kontakt          { --banner: url("../images/banner-kontakt.jpg"); }
.banner-rechtliches      { --banner: url("../images/banner-rechtliches.jpg"); }
/* Foto unter dem Seitentitel */
.titelbild { margin: 0 0 2.5rem 0; }
.titelbild img { width: 100%; height: auto; border-radius: 6px; display: block; }
.titelbild figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-leise); }

/* kleine Fotos in der linken Spalte der Geschaeftsfelder */
.feldkopf img { margin-top: 0.9rem; border-radius: 6px; width: 100%; max-width: 16rem; }

/* ---------- Inhalt ---------- */
main { padding: 2.5rem 0 3.5rem 0; }

.sprungmarken { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.5rem 0; padding: 0; list-style: none; }
.sprungmarken a {
  display: inline-block; padding: 0.35rem 0.85rem; border: 1px solid var(--linie); border-radius: 999px;
  font-size: 0.9rem; color: var(--text); text-decoration: none; background: var(--weiss);
}
.sprungmarken a:hover { border-color: var(--marke); color: var(--marke); }

.feld {
  padding: 2rem 0; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: 1fr; gap: 0.5rem 3rem;
  scroll-margin-top: 1rem;
}
.feld:first-of-type { border-top: 0; padding-top: 0; }
.feld h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; color: var(--marke); }
.feld p { margin: 0 0 1rem 0; }
.feld ul { margin: 0 0 1rem 0; padding-left: 1.2rem; }
.feld li { margin-bottom: 0.5rem; }
.feld li::marker { color: var(--marke); }

.feld--schwerpunkt {
  background: var(--marke-hell); border: 0; border-radius: 6px;
  padding: 2rem 1.25rem; margin-bottom: 1rem;
}
.feld--schwerpunkt + .feld { border-top: 0; }
.feld--schwerpunkt:first-of-type { padding-top: 2rem; }   /* :first-of-type setzt sonst padding-top 0 */

.fazit { font-weight: 600; }

@media (min-width: 820px) {
  .feld { grid-template-columns: 16rem 1fr; }
  .feld--schwerpunkt, .feld--schwerpunkt:first-of-type { padding: 2.5rem 2rem; }
}

.aufruf {
  margin-top: 2.5rem; padding: 1.75rem 1.25rem; border-radius: 6px;
  background: var(--flaeche); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.aufruf p { margin: 0; font-size: 1.125rem; }
.knopf {
  display: inline-block; padding: 0.65rem 1.4rem; border-radius: 4px;
  background: var(--marke); color: var(--weiss); font-weight: 600; text-decoration: none;
}
.knopf:hover { background: var(--marke-dunkel); color: var(--weiss); }

.knopf--hell { background: var(--weiss); color: var(--marke); }
.knopf--hell:hover { background: var(--marke-hell); color: var(--marke-dunkel); }
.knopf--rand { background: transparent; color: var(--weiss); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8); }
.knopf--rand:hover { background: rgba(255,255,255,0.12); color: var(--weiss); }

/* ---------- Startseite ---------- */
.buehne { background: linear-gradient(100deg, var(--marke-dunkel) 0%, var(--marke) 55%, #5a1fd0 100%); color: var(--weiss); position: relative; overflow: hidden; }
.buehne::after {
  content: ""; position: absolute; right: -6rem; top: -6rem; width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%); pointer-events: none;
}
.buehne .huelle { position: relative; }
.buehne .huelle { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.buehne h1 { margin: 0 0 1rem 0; max-width: 46rem; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.buehne p { margin: 0 0 1.75rem 0; max-width: 44rem; font-size: 1.2rem; opacity: 0.92; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.einleitung { font-size: 1.2rem; max-width: 50rem; margin: 0 0 2.5rem 0; }

.abschnittstitel { margin: 0 0 1.25rem 0; font-size: 1.5rem; color: var(--marke); }

.kacheln { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 3rem 0; padding: 0; list-style: none; }
.kacheln a {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.25rem;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss);
  color: var(--text); text-decoration: none;
}
.kacheln a:hover { border-color: var(--marke); box-shadow: 0 2px 10px rgba(70, 0, 184, 0.10); }
.kacheln h3 { margin: 0 0 0.5rem 0; font-size: 1.15rem; line-height: 1.3; color: var(--marke); }
.kacheln p { margin: 0 0 1rem 0; flex: 1; }
.kacheln .mehr { font-weight: 600; color: var(--marke); }
.kacheln .kachel--schwerpunkt a { background: var(--marke-hell); border-color: var(--marke-hell); }

.merkmale { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0 0 3rem 0; }
.merkmale h3 { margin: 0 0 0.35rem 0; font-size: 1.1rem; }
.merkmale p { margin: 0; color: var(--text-leise); }
.merkmale div { padding-left: 1rem; border-left: 3px solid var(--marke); }

.kaesten { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.kasten { padding: 1.5rem 1.25rem; border-radius: 6px; background: var(--flaeche); }
.kasten h2 { margin: 0 0 0.5rem 0; font-size: 1.2rem; color: var(--marke); }
.kasten p { margin: 0 0 0.75rem 0; }
.kasten p:last-child { margin-bottom: 0; }

@media (min-width: 700px) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .merkmale { grid-template-columns: repeat(3, 1fr); }
  .kaesten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .kacheln { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Fotos (Variante Fotos) ---------- */
.buehne--foto {
  background-image: linear-gradient(95deg, rgba(51,0,138,0.97) 0%, rgba(70,0,184,0.92) 42%, rgba(70,0,184,0.55) 70%, rgba(70,0,184,0.25) 100%), url("../images/buehne-verdichter-klein.jpg");
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.buehne--foto::after { display: none; }
@media (min-width: 820px) {
  .buehne--foto { background-image: linear-gradient(95deg, rgba(51,0,138,0.97) 0%, rgba(70,0,184,0.92) 40%, rgba(70,0,184,0.45) 65%, rgba(70,0,184,0.15) 100%), url("../images/buehne-verdichter.jpg"); }
}
/* ---------- Fließtextseiten (Karriere, Stellen, Impressum, Datenschutz) ---------- */
.fliesstext { max-width: 48rem; }
.fliesstext h2 { margin: 2rem 0 0.5rem 0; font-size: 1.25rem; line-height: 1.3; color: var(--marke); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin: 1.25rem 0 0.35rem 0; font-size: 1.05rem; }
.fliesstext p { margin: 0 0 1rem 0; }
.fliesstext ul { margin: 0 0 1rem 0; padding-left: 1.2rem; }
.fliesstext li { margin-bottom: 0.4rem; }
.fliesstext li::marker { color: var(--marke); }
.fliesstext address { font-style: normal; margin: 0 0 1rem 0; }
.klein { font-size: 0.9rem; color: var(--text-leise); }
.zurueck { margin-top: 2rem; }

.stellen { list-style: none; margin: 0 0 1.5rem 0; padding: 0; display: grid; gap: 0.75rem; }
.stellen a {
  display: block; padding: 1rem 1.25rem; border: 1px solid var(--linie); border-radius: 6px;
  font-weight: 600; text-decoration: none;
}
.stellen a:hover { border-color: var(--marke); background: var(--marke-hell); }

.spalten { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 2rem 0; }
@media (min-width: 760px) { .spalten { grid-template-columns: repeat(3, 1fr); } }

/* Platzhalter, die vor der Veröffentlichung ersetzt werden müssen */
.pruefen { background: #ffeb3b; color: #000; font-weight: 700; padding: 0 0.2em; }

/* ---------- Fuß ---------- */
.fuss { background: #1c1633; color: #d9d6e6; font-size: 0.95rem; }
.fuss .huelle {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem;
  padding-top: 2rem; padding-bottom: 2rem;
}
.fuss address { font-style: normal; line-height: 1.6; }
.fuss a { color: #ffffff; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: flex-end; }

a:focus-visible, .knopf:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; }
.fuss a:focus-visible { outline-color: #ffffff; }