/* ==========================================================================
   bauleiter-elektro.de — the single stylesheet.
   Every visual change happens here. No build step, no framework.

   Order matters: fonts, tokens, dark tokens, normalise, base, components,
   narrow screens, reduced motion. Do not reorder.
   ========================================================================== */

/* --- 1. fonts (self-hosted; never fonts.googleapis.com — see spec D7) ---- */

@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* --- 2. tokens: the complete light palette -------------------------------
   Verified against WCAG 2.2 AA by tools/check_contrast.py.
   --rule is a decorative divider and is deliberately NOT contrast-asserted.
   --border carries the 3:1 requirement for real UI components (inputs).
   --energized is never a text colour on a light ground: fills and rules only.
   ------------------------------------------------------------------------- */

:root{
  --ground:#FAFBFB;
  --panel:#F0F3F2;
  --ink:#121817;
  --ink-2:#3A4644;
  --ink-3:#64716E;
  --primary:#0B5C63;
  --energized:#E8B21E;
  --rule:#CCD4D2;
  --border:#788D88;

  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body-font:Barlow,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;

  /* type scale */
  --t-xs:.72rem;
  --t-sm:.82rem;
  --t-0:1rem;
  --t-1:1.125rem;
  --t-2:1.35rem;
  --t-3:1.7rem;
  --t-4:2.2rem;
  --t-5:2.9rem;

  /* spacing */
  --s-1:.25rem;
  --s-2:.5rem;
  --s-3:.75rem;
  --s-4:1rem;
  --s-5:1.5rem;
  --s-6:2rem;
  --s-7:3rem;
  --s-8:4.5rem;

  --measure:68ch;
  --wide:74rem;
}

/* --- 3. tokens: dark theme (colours only) -------------------------------- */

@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E1413;
    --panel:#161E1D;
    --ink:#E7ECEA;
    --ink-2:#B9C4C1;
    --ink-3:#8B9A96;
    --primary:#4FA8AF;
    --energized:#E8B21E;
    --rule:#2A3533;
    --border:#586F6B;
  }
}

/* --- 4. normalise -------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
/* html keeps the browser's own font size so a visitor's text-size setting is
   respected. Never set a px font-size here. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
figure{margin:0}

/* --- 5. base ------------------------------------------------------------- */

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body-font);
  font-size:var(--t-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5.5vw,var(--t-5));font-weight:700;letter-spacing:-.015em}
h2{font-size:var(--t-3);font-weight:600;letter-spacing:-.008em}
h3{font-size:var(--t-2);font-weight:600}
h4{font-size:var(--t-1);font-weight:600}

p,ul,ol,dl{margin:0}
a{color:var(--primary);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:1px}
strong{font-weight:600}
abbr{text-decoration:none}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* skip link — visible only when focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--primary);color:var(--ground);
  padding:var(--s-3) var(--s-4);
  font-family:var(--display);font-weight:600;text-decoration:none;
}
.skip:focus{left:var(--s-4);top:var(--s-4)}

/* --- 6. components ------------------------------------------------------- */

/* 6.1 title block — a drawing-sheet header band */
.titleblock{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s-3) var(--s-5);
  align-items:end;
  max-width:var(--wide);
  margin:0 auto;
  padding:var(--s-5) var(--s-5) var(--s-3);
  border-bottom:2px solid var(--ink);
}
.titleblock__name{
  font-family:var(--display);
  line-height:1.15;
  grid-column:1;
}
/* the name is the route home — clickable, but it should not read as body-copy
   link, so no underline and it inherits the ink colour */
.titleblock__name a{
  color:inherit;
  text-decoration:none;
  display:inline-block;
}
.titleblock__name a:hover strong{color:var(--primary)}
.titleblock__name a:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.titleblock__name strong{
  display:block;
  font-size:var(--t-2);
  font-weight:700;
  letter-spacing:-.01em;
}
.titleblock__name span{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:var(--s-1);
}
.titleblock__nav{
  grid-column:1/-1;
  grid-row:2;
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--s-5);
  margin-top:var(--s-2);
}
.titleblock__nav a{
  font-family:var(--display);
  font-size:var(--t-1);
  font-weight:600;
  text-decoration:none;
  color:var(--ink-2);
  padding-bottom:var(--s-1);
  border-bottom:3px solid transparent;
}
.titleblock__nav a:hover{color:var(--ink)}
.titleblock__nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--energized);
}
.langswitch{
  grid-column:2;
  grid-row:1;
  display:flex;
  gap:var(--s-2);
  font-family:var(--mono);
  font-size:var(--t-sm);
  letter-spacing:.08em;
}
.langswitch span{color:var(--ink-3);font-weight:500}
.langswitch a{color:var(--primary)}

/* 6.2 page shell */
main{
  max-width:var(--wide);
  margin:0 auto;
  padding:var(--s-7) var(--s-5) var(--s-8);
}
.prose{max-width:var(--measure)}
.prose p+p,.prose ul,.prose ol{margin-top:var(--s-4)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:var(--s-2)}
.prose li::marker{color:var(--ink-3)}

section+section{margin-top:var(--s-8)}
.section-head{
  display:flex;
  align-items:baseline;
  gap:var(--s-4);
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--s-2);
  margin-bottom:var(--s-5);
}

/* 6.3 hero */
.hero{max-width:var(--measure)}
.hero__eyebrow{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:var(--s-4);
}
.hero h1{margin-bottom:var(--s-4)}
.hero__lead{
  font-size:var(--t-2);
  line-height:1.45;
  color:var(--ink-2);
  margin-bottom:var(--s-5);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__actions a{
  font-family:var(--display);
  font-size:var(--t-1);
  font-weight:600;
  text-decoration:none;
  padding:var(--s-3) var(--s-5);
  border:1px solid var(--border);
  color:var(--ink);
}
.hero__actions a:first-child{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--ground);
}
.hero__actions a:hover{border-color:var(--ink)}

/* 6.4 figures strip — the three headline project numbers */
.figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;
  margin-top:var(--s-7);
  background:var(--rule);
  border:1px solid var(--rule);
}
.figure{background:var(--panel);padding:var(--s-5)}
.figure__value{
  font-family:var(--display);
  font-size:var(--t-4);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  border-left:3px solid var(--energized);
  padding-left:var(--s-3);
}
.figure__label{
  margin-top:var(--s-3);
  font-size:var(--t-sm);
  line-height:1.45;
  color:var(--ink-3);
}

/* 6.5 project fact-box */
.factbox{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:var(--s-2) var(--s-5);
  margin:var(--s-5) 0;
  padding:var(--s-4) var(--s-5);
  background:var(--panel);
  border-left:3px solid var(--primary);
  max-width:56rem;
}
.factbox dt{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-top:.25em;
}
.factbox dd{margin:0;font-size:var(--t-0)}
.factbox .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 6.6 project section */
.project{padding-top:var(--s-6);border-top:1px solid var(--rule);scroll-margin-top:var(--s-4)}
.project__where{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--s-2);
}

/* 6.7 gallery + pure-CSS :target lightbox (no JavaScript) */
.gallery{
  list-style:none;
  padding:0;
  margin:var(--s-5) 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:var(--s-4);
}
.gallery figure{display:flex;flex-direction:column;height:100%}
.gallery__item{display:block;border:1px solid var(--rule)}
.gallery__item:hover{border-color:var(--border)}
.gallery figcaption{
  margin-top:var(--s-2);
  font-size:var(--t-sm);
  line-height:1.4;
  color:var(--ink-3);
}
.lightbox{display:none}
.lightbox:target{
  display:grid;
  position:fixed;
  inset:0;
  z-index:60;
  place-items:center;
  gap:var(--s-4);
  padding:var(--s-5);
  background:rgba(10,14,13,.94);
}
.lightbox:target img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  border:1px solid var(--border);
}
.lightbox__close{
  font-family:var(--display);
  font-size:var(--t-1);
  font-weight:600;
  color:#FAFBFB;
  background:var(--primary);
  padding:var(--s-2) var(--s-5);
  text-decoration:none;
  border:1px solid var(--primary);
}
.lightbox p{color:#CCD4D2;font-size:var(--t-sm);text-align:center;max-width:60ch}

/* 6.8 document pages */
.doc{max-width:var(--measure)}
.doc h2{margin-top:var(--s-6)}
.doc h3{margin-top:var(--s-5);font-size:var(--t-1)}
.doc p+p{margin-top:var(--s-4)}
.doc p{text-align:left}
.doc ul{margin-top:var(--s-4);padding-left:1.3em}
.doc blockquote{
  margin:var(--s-5) 0;
  padding:var(--s-4) var(--s-5);
  background:var(--panel);
  border-left:3px solid var(--energized);
  font-size:var(--t-1);
}
.doc blockquote p+p{margin-top:var(--s-4)}
.doc__source{
  margin-top:var(--s-7);
  padding:var(--s-5);
  border:1px solid var(--rule);
  background:var(--panel);
  max-width:56rem;
}
.doc__source h2{
  margin:0 0 var(--s-3);
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.doc__source p+p{margin-top:var(--s-3)}
.doc__source p{font-size:var(--t-0)}
.unclear{font-family:var(--mono);font-size:.9em;color:var(--ink-3)}

/* the plant-layout diagram must scroll in its own box, never widen the page */
.diagram{overflow-x:auto;margin:var(--s-5) 0;border:1px solid var(--rule);background:var(--panel);padding:var(--s-4)}
.diagram svg{display:block;min-width:34rem;width:100%;height:auto}
.legend{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:var(--s-1) var(--s-5);
  margin-top:var(--s-5);
  font-size:var(--t-sm);
}
.legend div{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-3)}
.legend dt{font-family:var(--mono);font-weight:500;color:var(--primary)}
.legend dd{margin:0;color:var(--ink-2)}

/* 6.9 content slot — unsupplied content, visible during owner review */
.slot{
  margin:var(--s-5) 0;
  padding:var(--s-4) var(--s-5);
  border:1px dashed var(--border);
  background:var(--panel);
  max-width:56rem;
}
.slot__what{
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:var(--s-2);
}
.slot p:not(.slot__what){font-size:var(--t-0);color:var(--ink-2)}

/* 6.10 contact form */
.enquiry{max-width:38rem;margin-top:var(--s-5);display:grid;gap:var(--s-1)}
.enquiry label{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:var(--s-4);
}
.enquiry input[type=text],
.enquiry input[type=tel],
.enquiry input[type=email],
.enquiry textarea{
  font-family:inherit;
  font-size:var(--t-1);
  color:var(--ink);
  background:var(--ground);
  border:1px solid var(--border);
  padding:var(--s-3);
  width:100%;
}
.enquiry textarea{resize:vertical;min-height:9rem}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-3);
  align-items:start;
  margin-top:var(--s-5);
  font-family:var(--body-font);
  font-size:var(--t-0);
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-2);
  line-height:1.45;
}
.consent input{width:1.15rem;height:1.15rem;margin-top:.2em;accent-color:var(--primary)}
#customForm{
  justify-self:start;
  margin-top:var(--s-5);
  font-family:var(--display);
  font-size:var(--t-1);
  font-weight:600;
  color:var(--ground);
  background:var(--primary);
  border:1px solid var(--primary);
  padding:var(--s-3) var(--s-6);
  cursor:pointer;
}
#customForm:hover{background:var(--ink)}

.contactcard{
  font-size:var(--t-1);
  line-height:1.8;
  padding:var(--s-5);
  background:var(--panel);
  border-left:3px solid var(--primary);
  max-width:38rem;
}
.contactcard .mono{font-size:var(--t-0)}

/* 6.11 footer */
.footer{
  max-width:var(--wide);
  margin:0 auto;
  padding:var(--s-5);
  border-top:2px solid var(--ink);
  font-size:var(--t-0);
  color:var(--ink-2);
  display:grid;
  gap:var(--s-2);
}
.footer__stand{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* --- 7. narrow screens --------------------------------------------------- */

@media (max-width:40rem){
  body{font-size:var(--t-0)}
  .titleblock{grid-template-columns:1fr;padding:var(--s-4) var(--s-4) var(--s-2)}
  .langswitch{grid-column:1;grid-row:auto;justify-content:flex-start}
  .titleblock__nav{grid-row:auto;gap:0 var(--s-4)}
  main{padding:var(--s-6) var(--s-4) var(--s-7)}
  .footer{padding:var(--s-4)}
  .factbox{grid-template-columns:1fr;gap:var(--s-1) 0;padding:var(--s-4)}
  .factbox dt{padding-top:var(--s-3)}
  .hero__lead{font-size:var(--t-1)}
  .legend div{grid-template-columns:3rem 1fr}
}

/* --- 8. reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   PUBLIC STATE — uncomment both rules to hide unfilled content slots before
   launch. Leave commented while the owner is still reviewing. See spec 5.3.
   ==========================================================================
.slot{display:none}
section:has(>.slot):not(:has(>:not(.slot):not(h2):not(h3):not(.section-head))){display:none}
*/