/* =====================================================================
   Lumper Maschinen- und Automatisierungstechnik
   Ein einziges Stylesheet für die gesamte Seite.

   Keine externen Schriften, keine Bibliotheken, keine Verbindungen zu
   fremden Servern. Das hält die Seite schnell, macht sie unabhängig vom
   Wohlwollen Dritter und erspart den Cookie-Hinweis.
   ===================================================================== */

:root {
  /* Die drei Blautöne stammen aus dem Logo:
     #004e84 Wortmarke und dunkles Sechseck
     #3678a8 mittleres Sechseck
     #93acca helles Sechseck
     Alles Weitere sind Abstufungen davon. Eine fremde Signalfarbe kommt
     bewusst nicht vor – die Marke ist blau, und dabei bleibt es. */
  --blau:        #004e84;
  --blau-mittel: #3678a8;
  --blau-stahl:  #93acca;
  --blau-dunkel: #013e69;
  --blau-tief:   #012a48;
  --blau-nacht:  #011f36;
  --blau-hell:   #e9f0f7;

  /* Akzent für Marker, Ziffern und Linien */
  --signal:      #3678a8;
  --signal-hell: #eef4f9;

  /* Neutrale Töne */
  --papier:      #ffffff;
  --grund:       #f4f7f9;
  --tinte:       #16242e;
  --tinte-2:     #3d5262;
  --tinte-3:     #6b7f8d;
  --linie:       #d9e2e8;
  --linie-2:     #eceff2;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-technisch: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
             Consolas, "Liberation Mono", monospace;

  --breite: 1180px;
  --radius: 3px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
a { color: var(--blau); }
a:hover { color: var(--blau-mittel); }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

.inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.5rem; }
.eng { max-width: 780px; }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--blau); color: #fff; padding: .7rem 1.2rem; font-weight: 600;
}
.sprungmarke:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ Kopfzeile
   Hell gehalten, damit das Logo in seiner eigenen Umgebung sitzt und
   nicht auf einer aufgesetzten weißen Fläche kleben muss. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 12px rgba(1,31,54,.06);
}
.kopf-innen {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 96px;
}
.marke { display: flex; align-items: center; text-decoration: none; flex: none; }
.marke:hover { color: inherit; }

.marke-bild { height: 68px; width: auto; display: block; }
/* In der dunklen Fußzeile die freigestellte Fassung verwenden */
.marke-bild-fuss { height: 62px; margin-bottom: 1.2rem; }

@media (max-width: 520px) {
  .marke-bild { height: 50px; }
}

.menue { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.menue a {
  display: block; padding: .6rem .9rem; text-decoration: none;
  color: var(--tinte-2); font-size: .95rem; font-weight: 550;
  border-bottom: 2px solid transparent;
}
.menue a:hover { color: var(--blau); border-bottom-color: var(--blau-stahl); }
.menue a[aria-current="page"],
.menue a.eltern-aktiv { color: var(--blau); border-bottom-color: var(--blau); }

.menue-gruppe { position: relative; }
.menue-gruppe > a::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: .45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.untermenue {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--linie);
  padding: .35rem; display: none; box-shadow: 0 16px 40px rgba(1,31,54,.14);
}
.menue-gruppe:hover .untermenue,
.menue-gruppe:focus-within .untermenue { display: block; }
.untermenue a { border-bottom: 0; padding: .55rem .8rem; }
.untermenue a:hover { background: var(--blau-hell); border-bottom-color: transparent; }
.untermenue a[aria-current="page"] { border-bottom-color: transparent; color: var(--blau);
                                     background: var(--blau-hell); }

.kopf-tel {
  margin-left: 1.2rem; padding-left: 1.4rem; border-left: 1px solid var(--linie);
  color: var(--blau); text-decoration: none; font-weight: 700; font-size: 1rem; white-space: nowrap;
}
.kopf-tel:hover { color: var(--blau-dunkel); }
.kopf-tel span { display: block; font-size: .62rem; font-weight: 600; color: var(--tinte-3);
                 text-transform: uppercase; letter-spacing: .14em; }

.menue-schalter {
  display: none; margin-left: auto; background: none; border: 1px solid var(--linie);
  color: var(--blau); padding: .5rem .7rem; cursor: pointer; font: inherit; font-size: .9rem;
  align-items: center; gap: .5rem; font-weight: 600;
}
.menue-schalter svg { display: block; }

@media (max-width: 940px) {
  .menue-schalter { display: inline-flex; }
  .kopf-tel { display: none; }
  .menue {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--linie);
    box-shadow: 0 14px 30px rgba(1,31,54,.12);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0;
    display: none;
  }
  .menue.offen { display: flex; }
  .menue a { padding: .8rem 1.5rem; border-bottom: 0; border-left: 3px solid transparent; }
  .menue a[aria-current="page"],
  .menue a.eltern-aktiv { border-bottom-color: transparent; border-left-color: var(--blau); }
  .menue-gruppe > a::after { display: none; }
  .untermenue {
    position: static; display: block; min-width: 0; border: 0; box-shadow: none;
    background: var(--blau-hell); padding: 0;
  }
  .untermenue a { padding-left: 3rem; font-size: .89rem; }
}

/* ----------------------------------------------------------------- Held */
.held {
  position: relative; overflow: hidden;
  background: var(--blau-nacht); color: #fff;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.held::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 78%);
}
.held::after {
  content: ''; position: absolute; right: -12%; top: -30%;
  width: 60%; height: 160%;
  background: radial-gradient(circle at 50% 50%, rgba(54,120,168,.30), transparent 62%);
}
.held .inhalt { position: relative; z-index: 1; }
.held-klein { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2.2rem, 5vw, 3.4rem); }

.marker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--schrift-technisch); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--blau-stahl);
  margin-bottom: 1.4rem;
}
.marker::before { content: ''; width: 28px; height: 2px; background: var(--blau-stahl); }

/* Text links, technische Zeichnung rechts – ab Tablet nebeneinander */
.held-raster { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; }
}
.held-bild-feld { min-width: 0; }
.held-bild { width: 100%; height: auto; display: block; }
@media (max-width: 899px) {
  .held-bild-feld { max-width: 560px; margin: 0 auto; opacity: .85; }
}
@media (max-width: 560px) { .held-bild-feld { display: none; } }

.held h1 { max-width: 17ch; margin-bottom: .5em; }
.held-raster h1 { max-width: 14ch; }
.held h1 em { font-style: normal; color: #a9c9ea; }
.held-text { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: #c3d6e2; max-width: 56ch; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem; text-decoration: none; font-weight: 650; font-size: .96rem;
  border: 2px solid transparent; border-radius: var(--radius); transition: background .15s, color .15s;
}
.knopf-signal { background: #fff; color: var(--blau); border-color: #fff; }
.knopf-signal:hover { background: var(--blau-hell); border-color: var(--blau-hell); color: var(--blau-dunkel); }
.knopf-rand { border-color: rgba(255,255,255,.4); color: #fff; }
.knopf-rand:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.knopf-blau { background: var(--blau); color: #fff; border-color: var(--blau); }
.knopf-blau:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.knopf-hell { border-color: var(--linie); color: var(--blau); background: #fff; }
.knopf-hell:hover { border-color: var(--blau); color: var(--blau); }

/* ------------------------------------------------------------ Bandzeile */
.band {
  background: var(--blau-tief); color: #a9c4d4;
  padding: 1.1rem 0; font-size: .87rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.band ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; justify-content: center;
}
.band li { display: flex; align-items: center; gap: .7rem; }
.band li::before { content: ''; width: 5px; height: 5px; background: var(--blau-stahl); flex: none; }

/* --------------------------------------------------------- Abschnitte */
.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.abschnitt-grund { background: var(--grund); }
.abschnitt-dunkel { background: var(--blau-nacht); color: #fff; }
.abschnitt-dunkel h2 { color: #fff; }
.abschnitt-dunkel p { color: #c3d6e2; }

.abschnitt-kopf { max-width: 720px; margin-bottom: 2.8rem; }
.abschnitt-kopf p { color: var(--tinte-2); font-size: 1.05rem; margin-bottom: 0; }
.abschnitt-dunkel .abschnitt-kopf p { color: #c3d6e2; }

.ueberschrift-nummer {
  display: block; font-family: var(--schrift-technisch); font-size: .78rem;
  color: var(--blau-mittel); letter-spacing: .18em; margin-bottom: .7rem;
}
.abschnitt-dunkel .ueberschrift-nummer { color: var(--blau-stahl); }

/* ------------------------------------------------------------- Karten */
.raster { display: grid; gap: 1.4rem; }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column;
}
.karte:hover { border-top-color: var(--blau-mittel); }
.karte h3 { margin-bottom: .5rem; }
.karte p { color: var(--tinte-2); font-size: .97rem; }
.karte ul { margin: 0 0 1.2rem; padding-left: 1.1rem; color: var(--tinte-2); font-size: .95rem; }
.karte ul li { margin-bottom: .3rem; }
.karte .weiter { margin-top: auto; padding-top: .6rem; font-weight: 650; font-size: .94rem;
                 text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.karte .weiter::after { content: '→'; transition: transform .15s; }
.karte .weiter:hover::after { transform: translateX(3px); }

.symbol {
  width: 46px; height: 46px; margin-bottom: 1.2rem;
  color: var(--blau); flex: none;
}
.karte:hover .symbol { color: var(--blau-mittel); }

/* ----------------------------------------------------- Leistungsblöcke */
.block {
  border-top: 1px solid var(--linie);
  padding: 2.8rem 0;
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 2rem;
}
/* Ab Tablet die Überschrift neben den Text stellen: nutzt die Breite und
   hält die Zeilenlänge des Fließtexts trotzdem im lesbaren Bereich. */
@media (min-width: 900px) {
  .block { grid-template-columns: 74px minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0 3rem; }
}
.block:first-of-type { border-top: 0; padding-top: .5rem; }
.block-nummer {
  font-family: var(--schrift-technisch); font-size: 1.45rem; font-weight: 600;
  color: var(--blau-stahl); line-height: 1; padding-top: .4rem;
}
.block-titel h3 { color: var(--blau-dunkel); margin-bottom: .4rem; }
.block-text p { color: var(--tinte-2); }
.block-text p:last-child { margin-bottom: 0; }
.block-text .pruefliste { margin-top: 1.2rem; max-width: none; }

.pruefliste { list-style: none; margin: 1.3rem 0 0; padding: 0; max-width: 68ch; }
.pruefliste li {
  position: relative; padding: .5rem 0 .5rem 2rem;
  border-top: 1px solid var(--linie-2); color: var(--tinte-2); font-size: .97rem;
}
.pruefliste li:first-child { border-top: 0; }
.pruefliste li::before {
  content: ''; position: absolute; left: .35rem; top: .95rem;
  width: 7px; height: 11px; border-right: 2px solid var(--blau-mittel);
  border-bottom: 2px solid var(--blau-mittel); transform: rotate(45deg);
}

@media (max-width: 899px) {
  .block-titel { margin-bottom: .8rem; }
}
@media (max-width: 640px) {
  .block { grid-template-columns: 1fr; gap: .3rem; }
  .block-nummer { font-size: 1rem; padding-top: 0; }
}

/* ------------------------------------------------------------ Aussage */
.aussage {
  border-left: 3px solid var(--blau-mittel);
  padding: .3rem 0 .3rem 1.5rem; margin: 0 0 1.6rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600;
  color: var(--blau-dunkel); line-height: 1.4; max-width: 48ch;
}
.abschnitt-dunkel .aussage { color: #fff; }

/* ------------------------------------------------------------- Zahlen */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
}
.kennzahl { background: var(--blau-nacht); padding: 1.7rem 1.4rem; }
.kennzahl dt {
  font-family: var(--schrift-technisch); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blau-stahl); margin-bottom: .6rem;
}
.kennzahl dd { margin: 0; font-size: 1.06rem; font-weight: 600; color: #fff; line-height: 1.35; }

/* -------------------------------------------------------- Kontaktdaten */
.kontakt-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem;
}
.kontakt-feld {
  border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  padding: 1.6rem 1.5rem; background: var(--papier);
}
.kontakt-feld h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
                   color: var(--tinte-3); margin-bottom: .8rem; font-weight: 700; }
.kontakt-feld p { margin: 0; font-size: 1.06rem; line-height: 1.6; }
.kontakt-feld a { font-weight: 650; text-decoration: none; }
.kontakt-feld a:hover { text-decoration: underline; }
.kontakt-feld .klein { font-size: .9rem; color: var(--tinte-3); margin-top: .5rem; }

/* Noch einzutragende Angaben - im Browser nicht zu übersehen */
.offen {
  background: #fff3cd; color: #7a5600; border-bottom: 2px dotted #c99700;
  padding: 0 .25rem; font-weight: 600; font-style: normal;
}

.hinweis {
  background: var(--blau-hell); border: 1px solid #cfe0ee; border-left: 3px solid var(--blau-mittel);
  padding: 1.1rem 1.3rem; margin: 0 0 2rem; font-size: .96rem; color: var(--blau-dunkel);
}
.hinweis strong { color: var(--blau-dunkel); }
.hinweis :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Aufruf */
.aufruf { background: var(--blau); color: #fff; padding: clamp(2.6rem, 6vw, 4rem) 0; }
.aufruf-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem; }
.aufruf h2 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.aufruf p { margin: 0; color: #cfe3ef; }
.aufruf .knopfreihe { margin: 0 0 0 auto; }

/* ------------------------------------------------------------- Fußzeile */
.fuss { background: var(--blau-nacht); color: #9fb7c6; padding: 3.2rem 0 1.6rem; font-size: .93rem; }
.fuss-raster {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; gap: 1.8rem; } }
.fuss h4 {
  color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss a { color: #9fb7c6; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss .marke { margin-bottom: 1rem; }
.fuss-schluss {
  padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  align-items: center; font-size: .86rem;
}
.fuss-schluss .spacer { flex: 1; }

/* --------------------------------------------------------- Textseiten */
.textseite { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem); }
.textseite h2 { margin-top: 2.4rem; font-size: 1.4rem; color: var(--blau-dunkel); }
.textseite h2:first-child { margin-top: 0; }
.textseite dl { margin: 0 0 1.4rem; }
.textseite dt { font-weight: 700; color: var(--tinte); margin-top: .9rem; }
.textseite dd { margin: 0; color: var(--tinte-2); }
.textseite ul { color: var(--tinte-2); }

/* ------------------------------------------------------------- Drucken */
@media print {
  .kopf, .aufruf, .knopfreihe, .band, .menue-schalter { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .held { background: none; color: #000; padding: 0 0 1rem; }
  .held h1 em { color: #000; }
  .held-text, .fuss { color: #000; }
  .fuss { background: none; }
  a { color: #000; text-decoration: underline; }
}