/* Ingenieurbüro Wagner — Designsystem, Variante 2 "zurückgenommen"
   Gleiche Bausteine wie Variante 1 (Punktraster, Verläufe, Akzent #0000DE),
   aber deutlich leiser dosiert: Weiß trägt die Seite, Verläufe nur als
   schmale Kanten, keine großflächigen grauen Platten. */

:root{
  --flaeche:#f7f7f5;
  --platte-dunkel:#313131;
  --platte-hell:#DFDFDF;
  --fuss-dunkel:#2F2F2F;
  --akzent:#0000DE;
  --akzent-dunkel:#00009e;
  --text:#1a1a1a;
  --text-leise:#63635e;
  --linie:#e3e3e0;
  --weiss:#ffffff;
  --breite:920px;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  font-size:17px; line-height:1.75;
  background:var(--weiss) url(punkte.png) repeat;
  display:flex; flex-direction:column; min-height:100vh;
}
.hbox{width:100%;max-width:var(--breite);margin:0 auto;padding:0 28px}

header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:0;
}
/* Marcos Wunsch 18.08.: dunkler Balken als unterer Abschluss der Kopfzeile */
header:after{
  content:""; display:block; height:4px;
  background:linear-gradient(180deg,var(--platte-dunkel) 0%,var(--platte-hell) 100%);
}
.kopf-inhalt{transition:padding .18s ease}
header.geschrumpft .kopf-inhalt{padding-top:14px;padding-bottom:14px}
header.geschrumpft .marke img{width:32px;transition:width .18s ease}
.kopf-inhalt{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;flex-wrap:nowrap}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.marke img{width:38px;height:auto;transition:width .18s ease}
.marke-text strong{display:block;font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:.01em}
nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;flex-wrap:nowrap}
nav a{color:var(--text-leise);text-decoration:none;font-size:.88rem;white-space:nowrap;
  display:inline-block;padding:4px 0 3px 0;border-bottom:1px solid transparent}
nav a:hover,nav a.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)}

main{flex:1;padding:72px 0 88px 0}
h1{font-size:2.1rem;font-weight:600;line-height:1.25;margin:0 0 18px 0;letter-spacing:-.01em;max-width:18em}
h2{font-size:1.35rem;font-weight:600;margin:64px 0 16px 0}
h3{font-size:1.05rem;font-weight:600;margin:0 0 10px 0}
p{margin:0 0 18px 0}
a{color:var(--akzent)}
a:hover{color:var(--akzent-dunkel)}
.fuehrung{font-size:1.15rem;line-height:1.72;max-width:40em}
.leise{color:var(--text-leise)}

/* Platte hier nur als feine Kante, keine Fläche */
.platte{background:transparent;border:0;border-top:1px solid var(--linie);margin:56px 0 0 0;padding-top:32px}
.platte-inhalt{padding:0;max-width:40em}

.trenner{width:44px;height:2px;background:var(--akzent);margin:0 0 34px 0}

.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:0;margin:56px 0 0 0;border-top:1px solid var(--linie)}
.weg{background:transparent;border:0;border-bottom:1px solid var(--linie);display:flex;flex-direction:column}
.weg:first-child{border-right:1px solid var(--linie)}
.weg-kante{height:2px;background:var(--akzent);width:36px;margin:32px 0 0 0}
.weg-inhalt{padding:18px 32px 34px 0;flex:1;display:flex;flex-direction:column}
.weg:last-child .weg-inhalt{padding-left:32px}
.weg:first-child .weg-kante{margin-left:0}
.weg:last-child .weg-kante{margin-left:32px}
.weg h3{font-size:1.12rem;margin-bottom:12px}
.weg ul{margin:0 0 22px 0;padding-left:18px;color:var(--text-leise);font-size:.94rem;line-height:1.65}
.weg li{margin-bottom:6px}
.weg .mehr{margin-top:auto;font-weight:600;text-decoration:none;font-size:.94rem}
.weg .mehr:after{content:" \2192"}

/* Aktionslink, der allein in einem Absatz steht — auch am Rechner klickbar groß */
main p > a:only-child{display:inline-block;padding:4px 0}

.liste{padding-left:20px;margin:0 0 18px 0}
.liste li{margin-bottom:8px}


.fussband{height:3px;background:linear-gradient(180deg,var(--flaeche) 0%,var(--fuss-dunkel) 100%)}
footer{background:transparent;border-top:1px solid var(--linie);padding:34px 0;font-size:.88rem;color:var(--text-leise)}
.fuss-raster{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
footer strong{color:var(--text)}
footer a{text-decoration:none;display:inline-block;padding:3px 0}
footer a:hover{text-decoration:underline}

/* ---------------------------------------------------------------
   Mobilmenü — Schalter statt umbrechender Navigation.
   Anlass 27.08.2026: Nach der Umbenennung in „Industrie, Forschung
   und Technik" brach die fünfteilige Navigation auf dem Handy in
   drei bis vier Zeilen um. Da die Kopfzeile beim Scrollen stehen
   bleibt, nahm sie dauerhaft rund die Hälfte des Bildschirms ein.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Umstellung 28.08.2026: Der Kompaktmodus richtet sich nach dem
   Platzbedarf, nicht mehr nach der Fensterbreite.

   Vorher schaltete das Menü über @media (max-width:900px). Das
   greift nicht, wenn jemand die Schrift vergrößert oder in Firefox
   "Nur Text zoomen" verwendet: Das Fenster bleibt breit, der Text
   wächst, und Bürotitel und Navigation passen nicht mehr
   nebeneinander. Genau das hatte Marco Wagner gemeldet.

   Jetzt misst ein Skript nach jedem Größenwechsel, ob beides in
   eine Zeile passt, und setzt bei Platzmangel die Klasse "eng".
   Ohne JavaScript bricht die Navigation in eine zweite Zeile um —
   höher als nötig, aber vollständig bedienbar.
   --------------------------------------------------------------- */
.menue-schalter{display:none}

/* Rückfallebene ohne Skript: umbrechen statt aus der Zeile laufen */
.kopf-inhalt{flex-wrap:wrap;row-gap:6px}

/* Solange die Seite aufbaut, keine weichen Übergänge. Sonst bleibt der
   Wechsel in den Kompaktmodus in einem angefangenen Übergang hängen und
   Innenabstand und Logogröße behalten ihren alten Wert. Die Klasse wird
   vom Skript nach dem ersten Bild wieder entfernt. */
html.aufbau .kopf-inhalt,
html.aufbau .marke img{transition:none}

header.eng .kopf-inhalt{flex-wrap:nowrap;row-gap:0;gap:12px;padding:14px 20px}
header.eng .marke img{width:32px}
header.eng .marke-text strong{font-size:.95rem}
header.eng.geschrumpft .kopf-inhalt{padding-top:10px;padding-bottom:10px}
header.eng nav{position:static}

header.eng .menue-schalter{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:8px 12px;
  background:transparent;border:1px solid var(--linie);border-radius:3px;
  color:var(--text);font-family:inherit;font-size:.9rem;cursor:pointer;
}
header.eng .menue-schalter:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
header.eng .balken{position:relative;display:block;width:18px;height:2px;background:var(--text)}
header.eng .balken:before,
header.eng .balken:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
header.eng .balken:before{top:-6px}
header.eng .balken:after{top:6px}
header.eng nav.offen .balken{background:transparent}
header.eng nav.offen .balken:before{top:0;transform:rotate(45deg)}
header.eng nav.offen .balken:after{top:0;transform:rotate(-45deg)}

/* Ausgeklappte Liste unterhalb der Kopfzeile, volle Breite */
header.eng nav ul{
  display:none;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;gap:0;
  background:var(--weiss);border-top:1px solid var(--linie);
  box-shadow:0 10px 24px rgba(0,0,0,.09);
  padding:6px 20px 14px 20px;
}
header.eng nav.offen ul{display:flex}
header.eng nav ul li{border-bottom:1px solid var(--linie)}
header.eng nav ul li:last-child{border-bottom:0}
header.eng nav a{
  display:block;padding:13px 0;font-size:1rem;
  border-bottom:0;min-height:44px;line-height:1.35;
}
header.eng nav a.aktiv{border-bottom:0;font-weight:600}

/* Sehr schmal: nur das Symbol, ohne das Wort „Menü" */
@media (max-width:400px){
  header.eng .menue-schalter .schalter-text{display:none}
  header.eng .menue-schalter{padding:8px 10px;min-width:44px;justify-content:center}
}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.7rem;max-width:none}
  h2{font-size:1.22rem;margin:44px 0 14px 0}
  .fuehrung{font-size:1.06rem}
  .hbox{padding:0 20px}
  main{padding:36px 0 52px 0}
  html{scroll-padding-top:74px}
  .weg:first-child{border-right:0}
  .weg-inhalt,.weg:last-child .weg-inhalt{padding:16px 0 26px 0}
  .weg:last-child .weg-kante{margin-left:0}
  .platte{margin-top:40px;padding-top:26px}
  .wege{margin-top:40px}
  .fuss-raster{gap:20px}
}

@media (max-width:400px){
  .hbox{padding:0 16px}
  h1{font-size:1.5rem}
  .marke-text strong,header.eng .marke-text strong{font-size:.88rem}
  .kopf-inhalt,header.eng .kopf-inhalt{padding:12px 16px}
  header.eng nav ul{padding-left:16px;padding-right:16px}
}

/* Rechtstexte (Impressum, Datenschutz) — schmale Spalte, ruhige Zwischenüberschriften */
.rechtstext{max-width:42em}
.rechtstext h2{font-size:1.15rem;margin:38px 0 10px 0}
.rechtstext h3{font-size:1rem;margin:26px 0 8px 0}
.rechtstext h4{font-size:.95rem;font-weight:600;margin:20px 0 6px 0;color:#333}
.rechtstext p{margin:0 0 14px 0}
.rechtstext ul{padding-left:20px;margin:0 0 14px 0}
.rechtstext li{margin-bottom:6px}
.rechtstext a{word-break:break-word}

/* Kontaktformular */
.formular{max-width:34em;margin-top:8px}
.formular label{display:block;margin-bottom:18px;font-size:.95rem}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea{
  display:block;width:100%;margin-top:6px;padding:11px 12px;
  border:1px solid #c9c9c5;border-radius:2px;background:#fff;
  font-family:inherit;font-size:1rem;color:var(--text);
}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.formular textarea{resize:vertical;min-height:150px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.pflicht{color:var(--akzent)}
.formular button{
  margin-top:6px;padding:12px 26px;border:0;border-radius:2px;
  background:var(--akzent);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;
}
.formular button:hover{background:var(--akzent-dunkel)}
.hinweis{padding:14px 16px;margin:0 0 22px 0;border-left:3px solid;max-width:34em;font-size:.95rem}
.hinweis-ok{border-color:#1d7a4c;background:#eef7f1}
.hinweis-fehler{border-color:#b03030;background:#fbeeee}
@media (max-width:560px){
  .feldpaar{grid-template-columns:1fr}
  /* Unter 16px zoomt iOS beim Antippen automatisch hinein */
  .formular input,.formular textarea,.formular button{font-size:16px}
  .formular button{width:100%;min-height:48px}
  .formular textarea{min-height:130px}
}

/* Urhebernachweis findmebetter — dezente Zeile unter dem Fußraster */
.fuss-credit{margin-top:22px;padding-top:14px;border-top:1px solid var(--linie);
  font-size:.8rem;color:var(--text-leise)}
.fuss-credit a{color:var(--text-leise);text-decoration:none}
.fuss-credit a:hover{color:var(--akzent);text-decoration:underline}


/* ---------------------------------------------------------------
   Tippflächen auf Mobilgeräten. Reine Textlinks mitten im Satz
   bleiben unverändert (dort ist die Zeilenhöhe das Maß), aber
   alles, was als eigenständige Schaltfläche gemeint ist, bekommt
   mindestens 44 Pixel Höhe.
   --------------------------------------------------------------- */
@media (max-width:900px){
  .weg .mehr{display:inline-block;padding:12px 0;min-height:44px}
  main p > a[href^="tel:"], main p > a[href^="mailto:"],
  footer a[href^="tel:"], footer a[href^="mailto:"]{
    display:inline-block;padding:11px 0;min-height:44px;
  }
  /* Aktionslink, der allein in einem Absatz steht */
  main p > a:only-child{display:inline-block;padding:12px 0;min-height:44px}
  footer .fuss-raster a,.fuss-credit a{display:inline-block;padding:8px 0;min-height:38px}
}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}