:root{
  --bg:#ffffff;
  --ink:#2e4a4a;       /* dark teal/grey from logo */
  --accent:#0eb2ce;    /* cyan/teal from logo */
  --muted:#6e8b8b;
  --card:#f6fbfb;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
img{max-width:100%;height:auto;display:block}
.wrapper{max-width:1080px;margin:0 auto;padding:24px}
header{padding:32px 0 8px;display:flex;align-items:flex-end;gap:24px;border-bottom:1px solid #e7efef}
header .brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header .brand img{height: 100px; width: auto; max-width:70vw}
header .tagline{color:var(--muted);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:36px 0}
.card{background:var(--card);border-radius:16px;padding:22px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.card .icon{width:84px;height:84px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);margin-bottom:14px}
.card .icon img{width:64px;height:auto}
.card h2{margin:6px 0 8px;font-size:1.25rem;letter-spacing:.2px}
.card p{margin:0;color:#274a4a}
footer{margin:36px 0 12px;color:var(--muted);font-size:.9rem;text-align:center}
.badge{display:inline-flex;align-items:center;gap:10px;background:#e9f7fa;border:1px solid #d4eef3;color:#0f6e7e;padding:8px 12px;border-radius:999px;font-weight:600}
.badge .dot{width:8px;height:8px;background:var(--accent);border-radius:50%}
@media (max-width:900px){.grid{grid-template-columns:1fr} header{align-items:center} header .brand img{width:260px}}


/* Tabs */
nav.tabs{display:flex;gap:8px;margin:18px 0 8px;border-bottom:1px solid #e7efef;flex-wrap:wrap}
nav.tabs a{padding:10px 14px;border-radius:10px 10px 0 0;text-decoration:none;color:var(--ink);font-weight:600;opacity:.8}
nav.tabs a.active{background:#e9f7fa;border:1px solid #d4eef3;border-bottom-color:transparent;opacity:1}
.section{display:none;padding-top:4px}
.section.active{display:block}
/* About block */
.about{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.about img{width:260px;border-radius:14px;box-shadow:var(--shadow);background:#fff}
.about h2{margin:0 0 6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:8px 0 0}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0}
/* Kontakt */
.contact{display:grid;gap:14px;max-width:640px}
.contact .row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.contact a{color:var(--ink);text-decoration:none;border-bottom:1px dashed #b7dfe7}
.contact a:hover{border-bottom-style:solid}
footer .links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer .links a{color:var(--muted);text-decoration:none}
footer .links a:hover{text-decoration:underline}


/* === Technical pattern background (15% opacity) === */
html, body { min-height: 100%; }
body {
  
  background-repeat: repeat;
  background-size: 1024px 1024px;
  background-position: top left;
}



/* === Sticky top navigation (responsive) === */
:root { --nav-bg: rgba(255,255,255,0.88); --nav-border: rgba(0,0,0,0.06); }
.site-header{ position:sticky; top:0; z-index:1000; background:var(--nav-bg); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--nav-border); }
.navbar{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 16px; }
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand img{height:80px; width:auto; display:block; }
.nav-links{ display:flex; gap:18px; align-items:center; }
.nav-links a{ text-decoration:none; font-weight:600; color:#0f172a; padding:8px 10px; border-radius:10px; }
.nav-links a:hover{ background:rgba(15,23,42,0.06); }
.nav-links a[aria-current="page"]{ background:rgba(15,23,42,0.08); }
.nav-toggle{ display:none; border:1px solid var(--nav-border); border-radius:12px; padding:8px 10px; background:#fff; }
.nav-toggle span{ font-size:20px; line-height:1; }

/* Mobile */
@media (max-width: 920px){
  .nav-links{ position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; gap:6px; padding:10px 16px 14px; background:#fff; border-bottom:1px solid var(--nav-border); }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Overlay background so pattern is always visible */
body{ position: relative; }
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url('../img/pattern-tech-15.png');
  background-repeat:repeat;
  background-size:800px 800px;
  opacity:.30;
  pointer-events:none;
  z-index:0;
}
header, main, footer{ position:relative; z-index:1; }

/* Tabs */
.section{ display:none; padding-top:8px; }
.section.active{ display:block; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; overflow-y: scroll; }
#leistungen, #profil, #kontakt{ scroll-margin-top: 90px; }

/* About vertical stack */
.about{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.about img{ width:260px; max-width:100%; }

/* Logo link UX */
a.logo-link{ display:inline-block; cursor:pointer; }
a.logo-link:focus-visible{ outline:2px solid rgba(0,0,0,.5); outline-offset:4px; border-radius:6px; }
a.logo-link img{ display:block; }



/* === Page title styles === */
.page-title{ 
  margin: 10px auto 2px; 
  max-width: 1100px; 
  padding: 0 16px; 
  font-size: clamp(22px, 3vw, 32px); 
  line-height: 1.2; 
  font-weight: 800; 
  color: #0f172a; 
}



/* === Accessible skip link (hidden until focus) === */
.skip-link{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus{
  position:fixed;
  left:16px;
  top:8px;
  width:auto;
  height:auto;
  clip:auto;
  clip-path:none;
  padding:6px 10px;
  background:#111;
  color:#fff;
  border-radius:8px;
  z-index:2000;
}



/* === Hero badge aligned under header === */
.hero-badge-wrap{ max-width:1100px; margin:10px auto 0; padding:0 16px; }
.hero-badge-wrap > *{ display:inline-block; }



/* === Center hero badge and page title === */
.hero-badge-wrap{ max-width:1100px; margin:10px auto 0; padding:0 16px; text-align:center; }
.hero-badge-wrap > *{ display:inline-block; }
.page-title{ text-align:center; margin: 16px auto 8px; }



/* === Contact card === */
.contact-card{ max-width: 580px; padding: 12px 16px; background: #fff; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.contact-card p{ margin: 0 0 6px; }
.impressum-contact{ font-style: normal; margin: 12px 0 0; }



/* === Centering & readability for About and Contact === */
#kontakt, #profil{ max-width: 980px; margin: 0 auto; padding: 0 16px; }
#kontakt h2, #profil h2{ text-align:center; }
#kontakt .contact-card{ margin-left:auto; margin-right:auto; }

/* Über mich layout: image and text centered, readable line-length */
#profil .about{ justify-items:center; }
#profil .about img{ display:block; margin: 0 auto; }
#profil .about > div{ max-width: 70ch; text-align: left; width: 100%; }
#profil .kv{ max-width: 70ch; margin: 10px auto 0; }



/* === Technical blueprint background overlay === */
body{ position: relative; }
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url('../img/pattern-tech-15.png');
  background-repeat:repeat;
  background-size: 1024px 1024px;
  opacity:.30;
  pointer-events:none;
  z-index:0;
}
header, main, footer{ position: relative; z-index: 1; }



}


/* ensure single-layer background */
body{ background-image: none !important; }


/* === Profil (About) centering & readability === */
#profil{ max-width: 980px; margin: 0 auto; padding: 0 16px; }
#profil h2{ text-align:center; }
#profil .about{ display: grid; grid-template-columns: 1fr; gap: 18px; justify-items: center; }
#profil .about img{ display:block; margin: 0 auto; }
#profil .about > div{ max-width: 70ch; width: 100%; text-align: left; }
#profil .kv{ max-width: 70ch; margin: 10px auto 0; }



/* === Skip-link visibility (hard) === */
.skip-link{
  position:absolute !important;
  left:-10000px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
  clip: rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.skip-link:focus{
  position:fixed !important; left:16px !important; top:8px !important;
  width:auto !important; height:auto !important;
  clip:auto !important; clip-path:none !important;
  padding:6px 10px; background:#111; color:#fff; border-radius:8px; z-index:2000;
}



/* === Compact spacing below H1 === */
.page-title + .section{ margin-top: 4px; padding-top: 0; }



/* === Kontakt H2 centered within content width === */
#kontakt h2{ text-align:center; max-width:70ch; margin: 8px auto; line-height:1.25; }



/* === Homepage (Leistungen) H1 in Versalien, groß, gesperrt & kompakter Abstand === */
body.is-home .page-title{
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(28px, 6.8vw, 64px);
  letter-spacing: 0.02em;
  margin: 6px auto 2px;
  line-height: 1.1;
}
/* Brand lockup: no wrap + wider letterspacing ("gesperrt") */
.page-title .brand-lockup{
  white-space: nowrap;
  letter-spacing: 0.08em;
}
/* First section snug to the H1 on home */
body.is-home .page-title + .section{
  margin-top: 0;
  padding-top: 0;
}



/* Ensure nav overlay never covers the page title when closed */
.nav-links{ z-index: 2; }
.page-title{ position: relative; z-index: 1; }



/* Show the hero badge only on the home (Leistungen) */
body:not(.is-home) .hero-badge-wrap{ display: none !important; }



/* === Home H1 spacing tuning === */
body.is-home .hero-badge-wrap{ margin-bottom: 16px; }
body.is-home .page-title{ margin: 12px auto 0; } /* more space above, none below */
body.is-home .page-title + .section{ margin-top: 0; padding-top: 0; }
@media (max-width: 480px){ body.is-home .hero-badge-wrap{ margin-bottom: 14px; } body.is-home .page-title{ margin: 10px auto 0; } }


/* Non-home H1 line-height */
body:not(.is-home) .page-title{ line-height: 1.25; }