/* FELDWERK — kubli-emv.ch
   Schweizer Technik-Magazin: strenge Raster, Stahlblau/Weiss, diskretes Rot.
   Reines HTML/CSS, keine Bilder, keine externen Schriften. */

:root{
  --stahl:#2b5d7f;
  --stahl-dunkel:#1c3e57;
  --stahl-tief:#152f44;
  --tinte:#182630;
  --grau:#5b6b78;
  --nebel:#f1f4f7;
  --nebel2:#e7edf2;
  --linie:#d6dee6;
  --rot:#c8102e;
  --weiss:#ffffff;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--tinte);
  background:var(--weiss);
  -webkit-text-size-adjust:100%;
}
p,li,dd{hyphens:auto;overflow-wrap:break-word;}
a{color:var(--stahl);text-decoration:none;}
a:hover,a:focus{color:var(--stahl-dunkel);text-decoration:underline;}
img,svg{max-width:100%;height:auto;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ---------- Kopf ---------- */
.obenbarre{background:var(--stahl-tief);color:#c9d8e4;font-size:.78rem;letter-spacing:.08em;}
.obenbarre .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;}
.obenbarre .dom{color:var(--weiss);font-weight:700;}
.obenbarre .dom::before{content:"";display:inline-block;width:8px;height:8px;background:var(--rot);margin-right:10px;transform:translateY(0px);}

.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:34px;padding-bottom:26px;flex-wrap:wrap;}
.logo{font-size:2.6rem;line-height:1;letter-spacing:.06em;font-weight:800;color:var(--stahl-dunkel);}
.logo span{font-weight:300;color:var(--stahl);}
.logo:hover{text-decoration:none;}
.logo .pkt{display:inline-block;width:12px;height:12px;background:var(--rot);margin-left:10px;}
.claim{margin:0;max-width:46ch;color:var(--grau);font-size:.95rem;border-left:3px solid var(--linie);padding-left:16px;}

.hauptnav{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--weiss);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(21,47,68,.04);}
.hauptnav .wrap{display:flex;flex-wrap:wrap;}
.hauptnav a{
  display:inline-block;padding:13px 18px 11px 18px;
  font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinte);border-bottom:3px solid transparent;
}
.hauptnav a:hover{color:var(--stahl);text-decoration:none;border-bottom-color:var(--linie);}
.hauptnav a.aktiv{color:var(--stahl-dunkel);border-bottom-color:var(--rot);}

/* ---------- Hero (reines CSS-Gradient + SVG-Linie) ---------- */
.hero{
  color:var(--weiss);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
    radial-gradient(1200px 500px at 85% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(118deg, var(--stahl-tief) 0%, var(--stahl-dunkel) 38%, var(--stahl) 78%, #3e7396 100%);
}
.hero .wrap{padding-top:72px;padding-bottom:64px;}
.hero ._label{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#cddcec;border:1px solid rgba(255,255,255,.35);padding:6px 12px;margin-bottom:26px;
}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.12;margin:0 0 18px 0;letter-spacing:-.01em;max-width:22ch;font-weight:800;}
.hero h1 em{font-style:normal;font-weight:300;}
.hero p{max-width:62ch;color:#e3ecf4;font-size:1.08rem;}
.hero .wellen{margin-top:34px;display:block;}
.hero .cta{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap;}
.hero .cta a{
  display:inline-block;padding:12px 22px;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.cta .prim{background:var(--weiss);color:var(--stahl-dunkel);}
.cta .prim:hover{background:var(--nebel);text-decoration:none;}
.cta .sek{border:1px solid rgba(255,255,255,.5);color:var(--weiss);}
.cta .sek:hover{border-color:var(--weiss);text-decoration:none;color:var(--weiss);background:rgba(255,255,255,.08);}

/* ---------- Kennzahlen-Streifen ---------- */
.kennzahlen{border-bottom:1px solid var(--linie);}
.kennzahlen .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.kz{padding:22px 20px;border-left:1px solid var(--linie);}
.kz:first-child{border-left:none;}
.kz b{display:block;font-size:1.5rem;color:var(--stahl-dunkel);letter-spacing:.02em;}
.kz b::after{content:"";display:block;width:22px;height:3px;background:var(--rot);margin-top:6px;}
.kz span{font-size:.82rem;color:var(--grau);display:block;margin-top:8px;line-height:1.5;}

/* ---------- Sektionen / Raster ---------- */
.sektion{padding:56px 0;}
.sektion.nebel{background:var(--nebel);}
.sektion-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:2px solid var(--tinte);padding-bottom:12px;margin-bottom:34px;flex-wrap:wrap;}
.sektion-kopf h2{margin:0;font-size:1.5rem;letter-spacing:.01em;}
.sektion-kopf .num{font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--rot);text-transform:uppercase;}

.intro{max-width:76ch;font-size:1.1rem;color:#33454f;}

/* Teaser-Karten */
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);}
.karte{background:var(--weiss);padding:24px 22px 26px 22px;display:flex;flex-direction:column;}
.karte .themavermerk{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);margin-bottom:12px;}
.karte h3{margin:0 0 10px 0;font-size:1.05rem;line-height:1.35;}
.karte p{margin:0 0 16px 0;font-size:.92rem;color:var(--grau);line-height:1.6;flex:1;}
.karte .mehr{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.karte:hover{background:var(--nebel);}
.karte:hover h3 a{color:var(--stahl-dunkel);}

/* Aufmacher */
.aufmacher{display:grid;grid-template-columns:1.35fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);}
.aufmacher-haupt{background:var(--weiss);padding:34px 32px;}
.aufmacher-haupt .themavermerk{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);}
.aufmacher-haupt h2{font-size:1.7rem;margin:12px 0 14px 0;line-height:1.2;}
.aufmacher-haupt p{color:#33454f;}
.aufmacher .neben{background:var(--weiss);display:flex;flex-direction:column;}
.aufmacher .neben article{padding:26px 28px;flex:1;border-bottom:1px solid var(--linie);}
.aufmacher .neben article:last-child{border-bottom:none;}
.aufmacher .neben h3{margin:8px 0 8px 0;font-size:1.1rem;}

/* ---------- Artikel ---------- */
.artikel{padding:48px 0 64px 0;}
.krume{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin:0 0 30px 0;}
.krume a{color:var(--grau);}
.artikel-kopf{max-width:820px;border-bottom:1px solid var(--linie);padding-bottom:26px;margin-bottom:36px;}
.artikel-kopf .themavermerk{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rot);}
.artikel-kopf h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.18;margin:12px 0 14px 0;letter-spacing:-.01em;}
.artikel-kopf .stand{font-size:.8rem;color:var(--grau);letter-spacing:.06em;}
.autzeile{font-size:.88rem;color:var(--grau);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:10px 0;margin:18px 0 0 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.autzeile .signatur{font-weight:700;color:var(--tinte);}

.inhalt{max-width:76ch;}
.inhalt h2{font-size:1.35rem;margin:2.2em 0 .6em 0;line-height:1.25;scroll-margin-top:80px;}
.inhalt h2::before{content:"";display:inline-block;width:10px;height:10px;background:var(--rot);margin-right:12px;transform:translateY(-1px);}
.inhalt h3{font-size:1.08rem;margin:1.8em 0 .5em 0;color:var(--stahl-dunkel);}
.inhalt p{margin:0 0 1.15em 0;}
.inhalt ul,.inhalt ol{padding-left:1.3em;margin:0 0 1.15em 0;}
.inhalt li{margin-bottom:.5em;}
.inhalt figure{margin:2em 0;padding:18px;background:var(--nebel);border:1px solid var(--linie);}
.inhalt figcaption{font-size:.82rem;color:var(--grau);margin-top:10px;}

/* Merkkästen */
.merkkasten{border:1px solid var(--stahl);border-left:6px solid var(--stahl);background:var(--nebel);padding:20px 24px;margin:2em 0;}
.merkkasten .titel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl-dunkel);display:block;margin-bottom:8px;}
.merkkasten p:last-child{margin-bottom:0;}
.profikasten{border-left:6px solid var(--tinte);background:var(--weiss);border-top:1px solid var(--linie);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:20px 24px;margin:2em 0;}
.profikasten .titel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte);display:block;margin-bottom:8px;}

/* Tabellen */
.tabelle-wrap{overflow-x:auto;margin:2em 0;}
table.tabelle{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--weiss);}
table.tabelle caption{text-align:left;font-size:.8rem;color:var(--grau);padding-bottom:8px;letter-spacing:.06em;}
table.tabelle th{
  text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--weiss);
  background:var(--stahl-dunkel);padding:10px 14px;border:1px solid var(--stahl-dunkel);
}
table.tabelle td{border:1px solid var(--linie);padding:10px 14px;vertical-align:top;}
table.tabelle tbody tr:nth-child(even){background:var(--nebel);}
table.tabelle td b{color:var(--stahl-dunkel);}

/* Glossar */
.glossar{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.glossar .eintrag{border-bottom:1px solid var(--linie);padding:16px 0;}
.glossar dt{font-weight:700;color:var(--stahl-dunkel);}
.glossar dt .kuerzel{font-weight:400;color:var(--grau);font-size:.85rem;}
.glossar dd{margin:6px 0 0 0;font-size:.94rem;color:#33454f;line-height:1.6;}

/* Quellenliste */
.quellenliste{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);}
.quelle{background:var(--weiss);padding:22px 24px;}
.quelle .anbieter{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);}
.quelle h3{margin:8px 0 6px 0;font-size:1rem;}
.quelle p{margin:0;font-size:.9rem;color:var(--grau);}
.quelle a{font-weight:700;}

/* Spektrum-Band (reines CSS) */
.spektrum{margin:2em 0;border:1px solid var(--linie);}
.spektrum .band{display:flex;}
.spektrum .band div{
  flex:1;padding:14px 10px 12px 10px;color:var(--weiss);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  border-right:1px solid rgba(255,255,255,.35);text-align:center;line-height:1.4;
}
.spektrum .band div:last-child{border-right:none;}
.spektrum .band div span{display:block;font-weight:400;letter-spacing:.03em;opacity:.85;}
.spektrum-skala{display:flex;justify-content:space-between;font-size:.72rem;color:var(--grau);border-top:1px solid var(--linie);padding-top:8px;letter-spacing:.05em;}
.nis-grenze{margin-top:14px;font-size:.82rem;color:var(--tinte);border-left:4px solid var(--rot);padding:8px 14px;background:var(--nebel);}

/* Redaktion */
.redaktion{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);}
.person{background:var(--weiss);padding:26px 28px;}
.person .rolle{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);}
.person h3{margin:10px 0 8px 0;font-size:1.15rem;}
.person p{margin:0;font-size:.93rem;color:var(--grau);}

/* Hinweis-Box */
.hinweis{border:1px solid var(--linie);border-top:4px solid var(--tinte);background:var(--nebel);padding:26px 30px;}
.hinweis .titel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:10px;}
.hinweis p:last-child{margin-bottom:0;}

/* Kontakt */
.kontaktblock{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);}
.kontaktblock > div{background:var(--weiss);padding:26px 30px;}
.kontaktblock .titel{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);display:block;margin-bottom:10px;}
.kontaktblock p:last-child{margin-bottom:0;}

/* Fuss */
.fuss{border-top:3px solid var(--tinte);background:var(--stahl-tief);color:#b9cad8;margin-top:40px;}
.fuss .wrap{padding-top:44px;padding-bottom:20px;}
.fussgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;}
.fuss h4{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--weiss);margin:0 0 14px 0;}
.fuss a{color:#cddcec;}
.fuss a:hover{color:var(--weiss);}
.fuss ul{list-style:none;margin:0;padding:0;}
.fuss li{margin-bottom:8px;font-size:.9rem;}
.fuss p{font-size:.9rem;margin:0 0 12px 0;line-height:1.6;}
.fuss .marke{font-size:1.3rem;font-weight:800;letter-spacing:.06em;color:var(--weiss);}
.fuss .marke span{font-weight:300;}
.fuss .marke .pkt{display:inline-block;width:9px;height:9px;background:var(--rot);margin-left:8px;}
.fusszeile{border-top:1px solid rgba(255,255,255,.18);padding-top:18px !important;font-size:.78rem;letter-spacing:.04em;color:#8fa5b6;}

/* Sprunglink */
.sprung{position:absolute;left:-9999px;}
.sprung:focus{left:12px;top:12px;background:var(--weiss);color:var(--tinte);padding:10px 16px;z-index:100;border:2px solid var(--stahl);}

/* ---------- Responsiv ---------- */
@media (max-width:960px){
  .raster{grid-template-columns:repeat(2,1fr);}
  .kennzahlen .wrap{grid-template-columns:repeat(2,1fr);}
  .kz:nth-child(3){border-left:none;}
  .kz{border-top:1px solid var(--linie);}
  .kz:nth-child(-n+2){border-top:none;}
  .aufmacher{grid-template-columns:1fr;}
  .glossar,.quellenliste,.redaktion,.kontaktblock{grid-template-columns:1fr;}
  .fussgrid{grid-template-columns:1fr 1fr;}
  .inhalt{max-width:100%;}
}
@media (max-width:600px){
  body{font-size:1rem;}
  .masthead{padding-top:24px;}
  .logo{font-size:2rem;}
  .claim{border-left:none;padding-left:0;}
  .raster{grid-template-columns:1fr;}
  .kennzahlen .wrap{grid-template-columns:1fr;}
  .kz{border-left:none;border-top:1px solid var(--linie);}
  .kz:first-child{border-top:none;}
  .fussgrid{grid-template-columns:1fr;}
  .hero .wrap{padding-top:48px;padding-bottom:44px;}
}

/* ---------- pipeline photos ---------- */
.hero .hero-foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero .hero-schleier{
  position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(21,47,68,.84) 0%, rgba(21,47,68,.48) 46%, rgba(21,47,68,.10) 100%);
}
.hero .wrap{ position:relative; z-index:1; }
.inhalt figure.photo img{
  width:100%; max-width:100%;
  aspect-ratio:3/2; object-fit:cover; display:block;
}