/* IGT GmbH – Website */
:root{
  --anthrazit:#2B2726;
  --navy:#2E3189;
  --navy-dunkel:#1F2161;
  --orange:#E07A2F;
  --orange-dunkel:#B9561A;
  --text:#2F2F2F;
  --grau:#5A5A5A;
  --hell:#F4F4F4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,Arial,sans-serif;font-size:17px;line-height:1.7;color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#A84D16}
a:hover{color:var(--anthrazit)}
h1,h2,h3{font-family:Catamaran,Roboto,Arial,sans-serif;line-height:1.1;margin:0}
h2{font-size:clamp(32px,4vw,48px);font-weight:800}
h3{font-size:24px;font-weight:700}
p{margin:0 0 16px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Kopfbereich */
.kopf{position:absolute;top:0;left:0;right:0;z-index:10}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:22px;padding-bottom:22px;max-width:1400px}
.kopf .logo img{width:160px;height:40px}
.menu{display:flex;flex-wrap:wrap;gap:4px 28px}
.menu a{color:#fff;text-decoration:none;font-family:Catamaran,Roboto,sans-serif;font-weight:700;font-size:16px;padding:8px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current=page]{border-bottom-color:var(--orange)}

/* Titelbereich */
.hero{position:relative;color:#fff;background:var(--anthrazit) center/cover no-repeat;min-height:640px;display:flex;align-items:center;clip-path:polygon(0 0,100% 0,100% 92%,0 100%);padding:150px 0 110px}
.hero::before{content:"";position:absolute;inset:0;background:rgba(20,18,18,.58)}
.hero .wrap{position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-text{flex:1 1 520px;max-width:640px}
.hero h1{font-size:clamp(38px,5.4vw,66px);font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:24px}
.hero p{font-size:20px;color:#EEE}
.hero-bild{flex:0 1 300px;margin-left:auto}
.hero.klein{min-height:380px;padding:140px 0 80px}
.knopf{display:inline-block;background:var(--orange-dunkel);color:#fff;text-decoration:none;font-weight:700;padding:14px 28px;border-radius:4px;margin-top:12px}
.knopf:hover{background:var(--orange);color:#fff}
.knopf.hell{background:#fff;color:var(--anthrazit)}
.knopf.hell:hover{background:var(--hell);color:var(--anthrazit)}

/* Abschnitte */
.abschnitt{padding:96px 0}
.abschnitt.grau{background:var(--hell)}
.zentriert{text-align:center;max-width:860px;margin:0 auto 48px}
.zentriert p{color:var(--grau)}
.kicker{display:block;font-family:Catamaran,Roboto,sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--orange-dunkel);margin-bottom:12px}

/* Schräge Farbflächen */
.schraeg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:520px;background:#fff}
.schraeg .feld{color:#fff;padding:88px 20% 88px max(24px,calc((100vw - 1200px)/2 + 24px));clip-path:polygon(0 0,100% 0,82% 100%,0 100%);display:flex;flex-direction:column;justify-content:center}
.schraeg .feld h2{margin-bottom:24px}
.schraeg .feld p{color:#F2F2F2}
.schraeg .bild{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.schraeg .bild img{max-height:440px;width:auto}
.feld.anthrazit{background:var(--anthrazit)}
.feld.navy{background:linear-gradient(135deg,var(--navy),var(--navy-dunkel))}
.feld.orange{background:linear-gradient(135deg,var(--orange-dunkel),#A9491A)}
.schraeg.rechts{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.schraeg.rechts .bild{order:-1}
.schraeg.rechts .feld{clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);padding:88px max(24px,calc((100vw - 1200px)/2 + 24px)) 88px 22%}
.feld .knopf{align-self:flex-start}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.karte{display:flex;flex-direction:column;gap:14px;background:#fff;border-top:4px solid var(--orange);padding:32px;box-shadow:0 2px 14px rgba(0,0,0,.07);text-decoration:none;color:var(--text)}
a.karte:hover{box-shadow:0 6px 24px rgba(0,0,0,.13);color:var(--text)}
.karte p{color:var(--grau);margin:0}
.karte .mehr{margin-top:auto;font-weight:700;color:#A84D16}
.kreis{width:64px;height:64px;border:2px solid var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.kreis svg{width:30px;height:30px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feld .kreis{border-color:rgba(255,255,255,.7)}
.feld .kreis svg{stroke:#fff}
.kreise{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}

/* Aufklapp-Abschnitte */
.klapp{max-width:900px;margin:0 auto}
.klapp details{border-bottom:1px solid #E2E2E2;padding:8px 0}
.klapp summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:18px 0;font-family:Catamaran,Roboto,sans-serif;font-weight:700;font-size:22px;color:var(--anthrazit)}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::before{content:"+";flex:none;width:44px;height:44px;border:2px solid var(--orange);border-radius:50%;color:var(--orange-dunkel);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:400;line-height:1}
.klapp details[open] summary::before{content:"\2212"}
.klapp .inhalt{padding:0 0 16px 64px;color:var(--grau)}

/* Ablauf */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;counter-reset:s}
.ablauf li{counter-increment:s;border-top:3px solid var(--orange);padding-top:18px}
.ablauf li::before{content:"0" counter(s);display:block;font-family:Catamaran,sans-serif;font-weight:800;font-size:30px;color:var(--orange-dunkel);margin-bottom:6px}
.ablauf strong{display:block;font-size:19px;color:var(--anthrazit);margin-bottom:6px}
.ablauf span{color:var(--grau);font-size:16px}

/* Liste */
.haken{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.haken li{padding-left:34px;position:relative}
.haken li::before{content:"";position:absolute;left:4px;top:7px;width:14px;height:8px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.feld .haken li::before{border-color:#fff}

/* Band mit Bild */
.band{position:relative;color:#fff;background:var(--navy) center/cover no-repeat;padding:110px 0}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,33,97,.92),rgba(31,33,97,.55))}
.band .wrap{position:relative}
.band h2{margin-bottom:20px;max-width:700px}
.band p{max-width:640px;color:#EEE}

/* Kontakt */
.kontakt{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:space-between}
.kontakt > div:first-child{flex:1 1 440px}
.kontakt-box{flex:1 1 300px;background:#fff;border-top:4px solid var(--orange);padding:32px;box-shadow:0 2px 14px rgba(0,0,0,.07);display:flex;flex-direction:column;gap:4px}
.kontakt-box strong{font-family:Catamaran,sans-serif;font-size:22px;color:var(--anthrazit)}

/* Rechtstexte */
.recht{max-width:820px;margin:0 auto}
.recht h2{font-size:24px;margin:36px 0 10px;color:var(--anthrazit)}
.recht p,.recht li{color:#3E3E3E}

/* Fußbereich */
.fuss{background:var(--anthrazit);color:#CFCFCF;font-size:15px;clip-path:polygon(0 40px,100% 0,100% 100%,0 100%);padding:96px 0 40px}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.fuss a{color:#CFCFCF}
.fuss a:hover{color:#fff}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}

@media (max-width:860px){
  .schraeg,.schraeg.rechts{grid-template-columns:1fr}
  .schraeg .feld,.schraeg.rechts .feld{clip-path:none;padding:64px 24px}
  .schraeg.rechts .bild{order:0}
  .kopf{position:relative;background:var(--anthrazit)}
  .menu{gap:2px 18px}
  .menu a{font-size:15px}
  .hero h1{font-size:30px;hyphens:auto;overflow-wrap:break-word}
  .hero{min-height:0;padding:56px 0 80px;clip-path:polygon(0 0,100% 0,100% 96%,0 100%)}
  .hero-bild{display:none}
  .hero.klein{min-height:0;padding:56px 0 70px}
  .abschnitt{padding:64px 0}
  .klapp .inhalt{padding-left:0}
}