/* Photonis Ingenieurbüro — Design-System
   Anthrazit/Papier als Grundton, Kupfer als Signalfarbe (Elektrotechnik),
   Petrol als ruhige Zweitfarbe für die Leistungsbereiche. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#F1F0E9;
  --paper:#E8EBE6;
  --surface:#FFFFFF;
  --ink:#1B2422;
  --ink-muted:#54645C;
  --copper:#B5652D;
  --copper-deep:#8A4D22;
  --copper-ink:#7A4520;
  --petrol:#1F5C56;
  --petrol-deep:#163F3B;
  --line:#D6DBD4;
  --line-strong:#B7C0B9;
  --shadow: 0 1px 2px rgba(27,36,34,.06), 0 8px 24px rgba(27,36,34,.05);
  --hero-bg:#1B2422;
  --hero-ink:#F1F0E9;
  --hero-ink-muted:#AEB9B3;
  --hero-line:#33403B;
}
:root[data-theme="dark"]{
  --bg:#12100D;
  --paper:#181F1D;
  --surface:#1E2624;
  --ink:#E9ECE7;
  --ink-muted:#98A69E;
  --copper:#E08A4A;
  --copper-deep:#C77236;
  --copper-ink:#F3C29A;
  --petrol:#5CADA2;
  --petrol-deep:#3E8A80;
  --line:#2A322F;
  --line-strong:#3B4441;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --hero-bg:#0E1412;
  --hero-ink:#E9ECE7;
  --hero-ink-muted:#8A968F;
  --hero-line:#232B28;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12100D;
    --paper:#181F1D;
    --surface:#1E2624;
    --ink:#E9ECE7;
    --ink-muted:#98A69E;
    --copper:#E08A4A;
    --copper-deep:#C77236;
    --copper-ink:#F3C29A;
    --petrol:#5CADA2;
    --petrol-deep:#3E8A80;
    --line:#2A322F;
    --line-strong:#3B4441;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --hero-bg:#0E1412;
    --hero-ink:#E9ECE7;
    --hero-ink-muted:#8A968F;
    --hero-line:#232B28;
  }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0 0 .6rem;
  color:var(--ink);
}
h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.08; font-weight:700; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.05rem); line-height:1.15; }
h3{ font-size:1.15rem; }
p{ margin:0 0 1rem; max-width:62ch; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.mono{ font-family:"IBM Plex Mono", Consolas, monospace; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.section{ padding:4.5rem 0; }
.section-alt{ background:var(--paper); }
.section-tight{ padding:3rem 0; }
@media (max-width:640px){ .section{ padding:3rem 0; } }

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--petrol);
  font-weight:600;
  margin:0 0 .8rem;
}
.lead{ font-size:1.1rem; color:var(--ink-muted); max-width:56ch; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:"IBM Plex Sans", sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:.8rem 1.4rem;
  border-radius:3px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--copper); color:#fff; }
.btn-primary:hover{ background:var(--copper-deep); }
.btn-ghost{ border-color:var(--hero-line); color:var(--hero-ink); }
.btn-ghost:hover{ border-color:var(--copper); color:var(--copper); }
.btn-outline{ border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--copper); color:var(--copper-ink); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:4.4rem;
}
.logo{
  font-family:"IBM Plex Sans Condensed", sans-serif;
  font-weight:700; font-size:1.25rem;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:baseline; gap:.4rem;
}
.logo .dot{ color:var(--copper); }
.logo .sub{
  font-family:"IBM Plex Mono", monospace;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600;
}
nav.main-nav{ display:flex; align-items:center; gap:2rem; }
nav.main-nav > ul{ display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0; }
nav.main-nav > ul > li{ position:relative; }
nav.main-nav a.nav-link{
  text-decoration:none; color:var(--ink); font-size:.92rem; font-weight:500;
  padding:.4rem 0; border-bottom:2px solid transparent;
}
nav.main-nav a.nav-link:hover, nav.main-nav a.nav-link.active{ border-bottom-color:var(--copper); }
.has-dropdown > .nav-link::after{ content:"▾"; font-size:.6em; margin-left:.35em; color:var(--ink-muted); }
.dropdown{
  position:absolute; top:100%; left:-1rem; min-width:280px;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow);
  padding:.5rem; margin-top:.6rem;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.55rem .7rem; border-radius:3px; text-decoration:none;
  font-size:.87rem; color:var(--ink);
}
.dropdown a:hover{ background:var(--paper); }
.dropdown a span.d-hint{ font-size:.76rem; color:var(--ink-muted); font-weight:400; }
.dropdown hr{ border:none; border-top:1px solid var(--line); margin:.4rem .3rem; }
.header-cta{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:3px; padding:.5rem .6rem; cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; }

@media (max-width:920px){
  .header-cta .btn-primary{ display:none; }
  nav.main-nav{
    position:fixed; inset:4.4rem 0 0 0; background:var(--bg);
    flex-direction:column; align-items:stretch; padding:1.5rem;
    transform:translateX(100%); transition:transform .2s ease;
    overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  nav.main-nav > ul > li{ border-bottom:1px solid var(--line); }
  nav.main-nav a.nav-link{ display:block; padding:1rem 0; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background:var(--paper); margin:0 0 .5rem;
    display:none;
  }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
  nav.main-nav .mobile-cta{ margin-top:1rem; }
}

/* ---------- Hero ---------- */
.hero{
  background:var(--hero-bg); color:var(--hero-ink);
  padding:5.5rem 0 4.5rem;
}
.hero .eyebrow{ color:var(--petrol); }
.hero h1{ color:var(--hero-ink); }
.hero .lead{ color:var(--hero-ink-muted); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero-small{ padding:3.4rem 0 3rem; }
.hero-small p.lead{ max-width:60ch; }

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hero-line); border-top:1px solid var(--hero-line);
}
.stat{ background:var(--hero-bg); padding:1.6rem 1.4rem; }
.stat .n{ font-family:"IBM Plex Mono", monospace; font-size:1.7rem; font-weight:600; color:var(--copper); display:block; }
.stat .l{ font-size:.82rem; color:var(--hero-ink-muted); }
@media (max-width:760px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Cards / pillars ---------- */
.group-label{
  font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin:0 0 1.1rem;
}
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.pillars.two{ grid-template-columns:repeat(2,1fr); margin-top:2.2rem; }
@media (max-width:920px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars, .pillars.two{ grid-template-columns:1fr; } }
.pillar{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.7rem;
  text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.pillar:hover{ border-color:var(--petrol); transform:translateY(-2px); }
.pillar .ic{ color:var(--petrol); }
.pillar h3{ margin:0; font-size:1.05rem; }
.pillar p{ font-size:.9rem; color:var(--ink-muted); margin:0; max-width:none; }
.pillar .badge{
  font-family:"IBM Plex Mono", monospace; font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--copper-ink); font-weight:600;
}
.pillar .go{ margin-top:auto; font-size:.83rem; font-weight:600; color:var(--petrol); }

/* ---------- Flow / process ---------- */
.flow{ display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.flow .step{ flex:1 1 180px; padding:1.3rem 1.3rem; background:var(--surface); border-right:1px solid var(--line); }
.flow .step:last-child{ border-right:none; background:var(--paper); }
.flow .step .n{ font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.1em; color:var(--copper-ink); font-weight:700; display:block; margin-bottom:.4rem; }
.flow .step p{ font-size:.88rem; margin:0; color:var(--ink-muted); max-width:none; }
.flow .step h4{ font-size:.95rem; margin:0 0 .25rem; }

/* ---------- Callouts / quotes ---------- */
.callout{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--copper);
  border-radius:3px; padding:1.2rem 1.4rem; font-size:.92rem;
}
.callout .label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper-ink); font-weight:700; margin-bottom:.4rem; }
.callout.petrol{ border-left-color:var(--petrol); }
.callout.petrol .label{ color:var(--petrol); }

.quote{
  border-left:3px solid var(--line-strong); padding-left:1.3rem; margin:1.4rem 0;
  font-style:italic; color:var(--ink-muted); font-size:1.02rem;
}
.quote cite{ display:block; margin-top:.5rem; font-style:normal; font-size:.82rem; font-family:"IBM Plex Mono",monospace; color:var(--ink-muted); }

/* ---------- Reference cards ---------- */
.refs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:920px){ .refs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .refs{ grid-template-columns:1fr; } }
.ref-card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ref-media{
  aspect-ratio:4/3; background:
    repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--surface) 10px 20px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-align:center; padding:1rem;
}
.ref-body{ padding:1.1rem 1.2rem 1.3rem; }
.ref-tag{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); font-weight:600; }
.ref-body h3{ font-size:1rem; margin:.4rem 0 .3rem; }
.ref-body p{ font-size:.87rem; color:var(--ink-muted); margin:0; }
.ref-kpis{ display:flex; gap:1rem; margin-top:.8rem; font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; min-width:480px; font-size:.9rem; }
th,td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid var(--line-strong); font-family:"IBM Plex Mono",monospace; }
tbody tr:last-child td{ border-bottom:none; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--hero-bg); color:var(--hero-ink); border-radius:8px;
  padding:2.6rem 2.6rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-banner h2{ color:var(--hero-ink); margin:0 0 .3rem; }
.cta-banner p{ color:var(--hero-ink-muted); margin:0; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
input, select, textarea{
  width:100%; font-family:"IBM Plex Sans",sans-serif; font-size:.94rem;
  padding:.7rem .8rem; border:1px solid var(--line-strong); border-radius:4px;
  background:var(--surface); color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--petrol); outline-offset:1px; }
textarea{ resize:vertical; min-height:120px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--paper); padding:3rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); font-family:"IBM Plex Mono",monospace; margin-bottom:.8rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.5rem; font-size:.9rem; }
.footer-grid a{ text-decoration:none; color:var(--ink); }
.footer-grid a:hover{ color:var(--copper); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-muted);
}

.placeholder-note{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--copper-ink);
  background:color-mix(in srgb, var(--copper) 12%, transparent);
  border:1px dashed var(--copper); border-radius:4px; padding:.5rem .7rem; display:inline-block;
}

.skip-link{ position:absolute; left:-999px; top:0; background:var(--copper); color:#fff; padding:.6rem 1rem; z-index:100; }
.skip-link:focus{ left:1rem; top:1rem; }