/* ============================================================
   TGA SOLUTION | STYLE.CSS
   Alle Gestaltungswerte sind hier zentral organisiert.
   ============================================================ */

/* 1. FARBEN / GRUNDEINSTELLUNGEN: Hier die Farbwelt anpassen */
:root {
  --navy: #0b1728;             /* dunkler linker Hintergrund */
  --blue: #4b8bc8;             /* transparenter blauer Balken */
  --red: #bd2c38;              /* rote Linie */
  --light-blue: #9dcaf0;       /* Akzentfarbe */
  --text-muted: #c5d2e0;      /* Beschreibung und Adresse */
  --footer-bg: #e6e8eb;       /* Footer-Hintergrund */
  --footer-text: #465061;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Arial, Helvetica, sans-serif; color: #fff; background: var(--navy); }
a { color: inherit; }

/* 2. HERO / HINTERGRUNDBILD
   Bild austauschen: technik.jpg ersetzen.
   Helligkeit: die letzte Zahl im rgba() reduzieren = helleres Bild.
   Bildposition: 'center' z.B. auf '65% center' ändern. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 45px);
  background: var(--navy);
}
.photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(9, 30, 58, .24), rgba(9, 30, 58, .37)),
    url("technik.jpg") center / cover no-repeat;
  /* Die Bildkante bildet die Schräge. Koordinaten in Prozent. */
  clip-path: polygon(53% 0, 100% 0, 100% 100%, 45% 100%, 49% 60%, 46% 41%);
}

/* 3. BLAUER BALKEN / SCHRÄGE
   clip-path bestimmt die Form. Die Prozentwerte steuern die Kanten.
   rgba(..., .xx) steuert die Transparenz des Balkens. */
.blue-band {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(165deg, rgba(77, 139, 200, .52), rgba(35, 88, 155, .58));
  clip-path: polygon(46% 0, 53% 0, 49% 41%, 54% 60%, 50% 100%, 45% 100%, 49% 60%, 43% 41%);
  pointer-events: none;
}

/* 4. INHALTSBREITE / LOGO */
.hero-inner {
  width: min(100%, 1600px);
  min-height: calc(100svh - 45px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px) clamp(24px, 3.5vw, 56px) 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo { display: block; width: clamp(270px, 27vw, 400px); max-width: 90%; height: auto; }

/* 5. ÜBERSCHRIFT UND BESCHREIBUNG */
.intro { margin-top: clamp(52px, 10vh, 120px); max-width: 650px; }
.eyebrow { margin: 0 0 26px; font-size: 11px; letter-spacing: 2px; color: #7cb1e2; }
.intro h1 { margin: 0; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.15; font-weight: 750; letter-spacing: -1.3px; }
.subtitle { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* 6. KONTAKTBEREICH */
.contact { margin-top: auto; padding-top: 65px; max-width: 610px; }
.contact-title { margin: 0 0 10px; padding-left: 18px; border-left: 2px solid var(--red); font-size: 20px; }
.address { padding-left: 20px; font-style: normal; line-height: 1.45; font-size: 15px; color: var(--text-muted); }
.contact-links { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; padding-left: 20px; font-size: 17px; }
.contact-links a { text-decoration: none; }
.contact-links a:hover { text-decoration: underline; color: var(--light-blue); }

/* 7. SCHMALER FOOTER */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 45px; padding: 10px clamp(24px, 3.5vw, 56px); border-top: 2px solid var(--red); background: var(--footer-bg); color: var(--footer-text); font-size: 11px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.coming { max-width: 370px; }

/* 8. POPUP-FENSTER FÜR IMPRESSUM UND DATENSCHUTZ */
.legal-modal { position: fixed; width: 100%; max-width: min(760px, calc(100vw - 32px)); max-height: min(84vh, 900px); padding: 0; border: 0; border-radius: 12px; overflow: auto; background: #f6f7f9; color: #172437; box-shadow: 0 20px 70px #0009; }
.legal-modal::backdrop { background: rgba(4, 12, 24, .78); backdrop-filter: blur(4px); }
.modal-content { padding: clamp(24px, 4vw, 48px); font-size: 15px; line-height: 1.65; }
.modal-content h1 { margin: 0 0 20px; font-size: 30px; }
.modal-content h2 { margin-top: 26px; font-size: 19px; }
.modal-content a { color: #235a91; }
.modal-close { position: sticky; top: 12px; float: right; z-index: 1; width: 38px; height: 38px; margin: 12px 12px -50px 0; border: 0; border-radius: 50%; background: #e5e9ee; color: #172437; font-size: 28px; cursor: pointer; }

/* 9. SMARTPHONE: Hier mobile Größen und die Bildposition ändern */
@media (max-width: 760px) {
  .hero, .hero-inner { min-height: calc(100svh - 80px); }
  .hero-inner { padding: 30px 23px 42px; }
  .photo { opacity: .45; clip-path: polygon(72% 0, 100% 0, 100% 100%, 60% 100%, 70% 55%); }
  .blue-band { opacity: .32; clip-path: polygon(67% 0, 77% 0, 72% 42%, 78% 58%, 72% 100%, 63% 100%, 69% 58%, 64% 42%); }
  .logo { width: 300px; }
  .intro { margin-top: 70px; }
  .intro h1 { font-size: clamp(34px, 8vw, 49px); }
  .contact { padding-top: 75px; }
  .footer { flex-wrap: wrap; justify-content: flex-start; gap: 9px 22px; }
  .coming { order: 3; flex-basis: 100%; }
}