/* === Fonts === */
@font-face {
  font-family: 'PT Sans Pro';
  src: url('../assets/fonts/ParaType - PT Sans Pro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans Pro';
  src: url('../assets/fonts/ParaType - PT Sans Pro Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box}
html {scroll-behavior:smooth;}
html,body{margin:0;padding:0;height: 100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{padding-left:1.2rem}

/* === Tokens === */
:root{
  --container:900px; --hero-overlap: 40px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; 
  --space-8:32px; --space-9: 34px; --space-10:40px; --space-12:48px; --space-14:68px;
  --radius-1:12px; --radius-2:8px;
}

/* === Base type === */
body{
  font-family:'PT Sans Pro',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--brand-contrast);
  line-height:1.6;
  font-size:16px;
  min-height: 100vh;
  flex-direction: column;
}
h1,h2,h3,h4,h5{
  line-height:1.25;
  margin:var(--space-8) 0 var(--space-4);
}
p{margin:0 0 var(--space-4)}

/* Headings style */
h1{color:var(--brand);letter-spacing:.4px}
h2{color:var(--text-muted);font-weight:400}

/* === Layout helpers === */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-4);
}
.visually-hidden{
  position:absolute!important;
  overflow:hidden;
  clip:rect(0 0 0 0);
  height:1px;width:1px;
  white-space:nowrap;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}
.skip-link:focus{
  left:var(--space-4);
  top:var(--space-4);
  background:var(--brand);
  color:var(--brand-contrast);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-1);
}

/* === Header & Navigation (Home) === */
.site-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:var(--space-4);
  padding-block:var(--space-3);
  position:relative;        /* für absolut positioniertes Menü auf Mobile */
  z-index:50;               /* liegt über Hero-Bild */
}
#site-logo img{
  max-height:106px;
  width:auto;
  display:block;
}
.menu-toggle{
  display:none;
  background:none;
  padding:6px 10px;
  cursor:pointer;
  align-self:end;
  position:relative;
}

/* Hamburger-Icon (3 Striche) */
.menu-toggle::before{
  content:"";
  display:inline-block;
  width:18px;
  height:2px;
  background:var(--text);
  box-shadow:0 -5px 0 var(--text), 0 5px 0 var(--text); /* oben & unten = 3 Linien */
}
.main-navigation{
  align-self:end;
}
.main-navigation .menu{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.main-navigation .menu a{
  display:block;
  padding:6px 10px;
  border-radius:var(--radius-2);
}
.main-navigation .menu a:hover,
.main-navigation .menu a[aria-current="page"]{
  background:var(--bg-soft);
  color:var(--text);
}

/* === Slogan bar (Home) === */
.slogan-wrap{
  background:var(--bg-soft);
  padding:10px 0;
}
.slogan{
  margin:0;
  font-weight:700;
}
.slogan span{
  font-weight:400;
  color:var(--text-muted);
}

/* === Hero (Home) === */
.hero{position:relative}
.hero img{
  width:100%;
  height:clamp(180px,28vw,340px);
  object-fit:cover;
  display:block;
  position:relative;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 70%);
  pointer-events:none;
  z-index:1;
}
.hero-text{
  position:absolute;
  inset:auto 0 12%;
  z-index:2;
  color:var(--brand-contrast);
}
.hero-text h2{
  margin:0 0 var(--space-2);
  font-size:clamp(22px,4.4vw,40px);
  color:var(--brand-contrast);
  text-shadow:0 2px 4px rgba(0,0,0,.45);
}
.hero-text p{
  max-width:46ch;
  margin:0 0 var(--space-4);
  color:var(--brand-contrast);
  text-shadow:0 2px 3px rgba(0,0,0,.4);
}
.hero-text .btn{
  position:relative;
  z-index:3;
  background:var(--brand);
  color:var(--brand-contrast);
  padding:10px 18px;
  border-radius:var(--radius-2);
  font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
  transition:background .2s ease, transform .05s ease;
}
.hero-text .btn:hover{
  background:var(--brand-variation);
  transform:translateY(-1px);
}

/* === Callouts (Home) === */
.callouts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-block:var(--space-8);
  align-items:stretch;
}
.callout,
.callout-middle{
  flex:1 1 280px;
  background:var(--brand-contrast);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-1);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:28px var(--space-5);
  text-align:center;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.callout:hover,
.callout-middle:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  border-color:var(--border-strong);
  cursor:pointer;
}
.callout:active,
.callout-middle:active{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.callout:focus-within,
.callout-middle:focus-within{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  border-color:var(--border-strong);
}
.icon-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:var(--space-3);
}
.icon-wrap svg{
  width:96px;
  height:96px;
}
.callout h3,
.callout-middle h3{
  margin:6px 0 6px;
  font-size:20px;
}
.callout p,
.callout-middle p{
  font-size:14px;
  line-height:1.55;
  color:var(--text-muted);
}
.more.teaser{
  display:inline-block;
  margin-top:10px;
  color:var(--text);
  text-decoration:underline;
}
.more.teaser:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}
/* Vollflächig klickbare Bereiche (wenn verwendet) */
.stretched-link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  color:transparent;
  text-indent:-9999px;
  overflow:hidden;
  cursor:pointer;
}
.stretched-link:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:inherit;
}
@media (prefers-reduced-motion: reduce){
  .callout,
  .callout-middle{
    transition:none;
  }
}

/* === Content (Home) === */
.custom-container{
  display:block;
  margin-bottom:var(--space-12);
  text-align:center;
}
.entry-content h2{color:var(--text)}
.entry-content p{
  color:var(--text-muted);
  margin-inline:auto;
  max-width:60ch;
}

/* === Footer === */
.site-footer{
  background-color:var(--bg-footer);
  color:var(--text-bright);
  text-align:center;
  padding:25px 10px var(--space-5);
  font-size:14px;
  margin-top:auto;
}
.site-footer a{
  color:var(--brand);
  text-decoration:none;
  margin:0 6px;
}
.site-footer a:hover{
  text-decoration:underline;
}

/* === Footer neutral auf Landing === */

.site-footer--neutral {
  color: var(--brand-contrast);
  font-size: 14px;
}

.site-footer--neutral a {
  color: var(--brand-neutral);  
  text-decoration: none;
}

.site-footer--neutral a:hover {
  text-decoration: underline;
}

/* Karten wie Callouts, aber als Links */
.card{
  flex:1 1 350px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-1);
  padding:30px var(--space-5) var(--space-10);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration:none;
  color:inherit;
  background:var(--brand-contrast);
}
.card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  transform:translateY(-3px);
  border-color:var(--border-strong);
  cursor:pointer;
}
.card img{
  max-width:200px;
  height:auto;
  margin-bottom:var(--space-5);
  margin-inline:auto;
}
.card h3{
  font-size:22px;
  color:var(--brand);
  margin-bottom:var(--space-2);
  letter-spacing:.4px;
}
.card em,
.card p{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.5;
}

/* === Seitenlayout / Content-Seiten (z.B. Oberflächentechnik, Impressum) === */
.page-main{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  padding:0 var(--space-4) var(--space-4);
  background: var(--brand-contrast); 
}

.page-main--left {
  text-align: left;           /* überschreibt das zentrierte .page-main nur hier */
  align-items: stretch;
}

.page-main--left .page-content {
  text-align: left;
}

/* Angenehmere Zeilenlänge nur auf dieser Seite */
.page-main--left .page-content p {
  margin-inline: 0;
}

/* Listen auf Content-Seiten, speziell hier sichtbar */
.page-main--left .page-content ul {
  margin: 0 0 var(--space-4) 1.5rem;
  padding-left: 1.1rem;
}
.page-header { 
  background: var(--bg-soft);
  /* linkes/rechtes Padding von .page-main ausgleichen */
  margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--hero-overlap));
  /* oben Luft, unten normaler Abstand + Overlap-Zone */
  padding: 0 var(--space-4) calc(var(--space-14) + var(--hero-overlap));
}

.page-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
  position: relative;
}

.page-header-inner h1 {
  margin-bottom: var(--space-2);
}

.page-header-inner h2 {
  margin: 0 auto;
  max-width: 46ch;
}

.page-content{
  max-width:960px;
  margin:0 auto var(--space-8);
  padding:0 var(--space-5);
}

.page-content h2:first-of-type{
  margin-top:var(--space-3);
}

.page-logo{
  max-width:200px;
  margin:0 auto var(--space-4);
}

/* Intro-Callout auf Content-Seiten (z.B. Oberflächentechnik) */
.page-intro-card{
  background:var(--brand-contrast);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-1);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:var(--space-5) 18px 22px;
  text-align:center;
  margin-bottom:var(--space-6);
}

.page-intro-card .page-logo{
  max-width:200px;
  margin:0 auto var(--space-4);
}

.page-intro-card p{
  margin:0;
  font-size:15px;
  color:var(--text-muted);
}

/* Kontaktbox */
.contact-box{
  background-color:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-2);
  padding:var(--space-5);
  width: fit-content;
  max-width: 100%;
  margin:var(--space-6) auto 0;
  text-align:left;
}
.contact-box h3{
  color:var(--text);
  font-size:20px;
  margin: var(--space-1) 0 var(--space-1);
}
.contact-box p{
  margin:2px 0;
  font-size:15px;
  color:var(--text-muted);
}
.contact-label{
  color:var(--brand);
  font-weight:600;
}
.contact-box a[href^="tel"]{
  color:var(--text);
  text-decoration:none;
  font-weight:bold;
}
.contact-box a[href^="tel"]:hover{
  color:var(--text);
  text-decoration:underline;
}
.contact-box a[href^="mailto"]{
  color:var(--text);
  text-decoration:none;
}
.contact-box a[href^="mailto"]:hover{
  text-decoration:underline;
}

.page-note{
  margin-top:var(--space-6);
  font-size:15px;
  color:var(--text-soft);
}

/* Hero-Bild für einfache Seiten (z.B. Kontakt) */
.page-hero {
  max-width: 960px;
  margin: 0 auto var(--space-4);
}

.page-hero img {
  width: 100%;
  border-radius: var(--radius-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-top: calc(-1 * var(--hero-overlap));
}

/* === Legacy hooks (für alte Strukturen, falls noch vorhanden) === */
#main{padding-top:0}
#access a{padding:10px var(--space-3)}
.menu li a{padding:var(--space-2) 0 var(--space-2) var(--space-6)}
#access li{line-height:30px}
.entry-content p:first-of-type{margin-top:0}
.custom-container p:first-of-type{margin-top:0}

/* --- Leistungen: Layout & Subnavigation --- */

.leistungen-layout {
  max-width: 960px;
  margin: 0 auto var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: flex-start;
}

.leistungen-subnav {
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: var(--space-4) var(--space-3);
  text-align: left;
}

.leistungen-subnav-title {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.leistungen-subnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leistungen-subnav-list li + li {
  margin-top: 0.35rem;
}

.leistungen-subnav-list a {
  display: block;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--text);
}

.leistungen-subnav-list li:last-child a {
  border-bottom: none;
}

.leistungen-subnav-list a:hover,
.leistungen-subnav-list a:focus-visible {
  color: var(--brand);
  outline: none;
}

.leistungen-subnav-list a[aria-current="page"] {
    color: var(--brand);
}

/* Hauptbereich der Leistungen-Seite */

.leistungen-main {
  text-align: left;
}

.leistungen-main h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--brand);
  font-size: 1.6rem;
}

.leistungen-main p {
  margin-bottom: 1rem;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top a {
  width: 30px;
  height: 30px;
  display: block;
  background-color: var(--text-soft);
  border-radius: 3px;
  position: relative;
  transition: background-color .3s ease;
}

.back-to-top a:hover {
  background-color: var(--back-to-top-hover);
}

/* Chevron-Pfeil nach oben (W3Schools-Stil) */
.back-to-top a::before {
  content: "";
  position: absolute;

  /* neue Position */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -34%) rotate(-45deg);

  /* arrow Beine */
  width: 8px;
  height: 8px;

  /* gleiche Strichstärke */
  border-top: 3px solid var(--brand-contrast);
  border-right: 3px solid var(--brand-contrast);

  border-radius: 1px;
}

/* === Responsive === */

/* Mobile & Tablet bis 768px */
@media (max-width: 768px) {
  /* less hero overlap over banner on small screens */
  :root{
    --hero-overlap: 24px;
  }

  /* Leistungen: einspaltig, Subnav oben */
  .leistungen-layout {
    grid-template-columns: 1fr;
  }

  .leistungen-main {
    order: -1;
  }

  /* Header: voller Rand wie Container, Hamburger absolut */
  .site-header{
    display:block;
    position:relative;
    padding:var(--space-4);   /* rundum gleich wie .container horizontal */
    padding-bottom:0;
  }

  /* Hamburger oben rechts, ohne Outline, drückt nichts runter */
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:var(--space-4);
    right:var(--space-4);     /* gleiche Right-Distanz wie Content */
    margin:0;
    z-index:30;
    outline:none;
    border: none;
  }

  .menu-toggle:focus,
  .menu-toggle:focus-visible{
    outline:none;
  }

  /* Logo zentriert, kein extra margin-top, mit Padding rundum */
  #site-logo{
    text-align:center;
    margin:0;
    padding:var(--space-4);   /* rundum Puffer, min. wie Hero-/Container-Rand */
  }

  #site-logo img{
    margin-inline:auto;
    max-width:80%;
    width:auto;   
    height:auto;
  }

  /* Navigation als Dropdown-Overlay näher an den Burger ran */
  .main-navigation{
    position:absolute;
    top:calc(var(--space-4) + 22px);  /* etwa halbe Distanz von vorher */
    right:var(--space-5);
    z-index:20;
  }

  .main-navigation .menu{
    display:none;
    flex-direction:column;
    background:var(--bg-soft);
    padding:10px;
    border-radius:var(--radius-2);
    box-shadow:0 4px 12px rgba(0,0,0,.10);
  }

  .main-navigation .menu.is-open{
    display:flex;
  }

  .main-navigation .menu a{
    padding:8px 6px;
  }

  /* Hero-Text wie gehabt etwas höher */
  .hero-text{
    inset:auto 0 14%;
  }

  .back-to-top {
    right: var(--space-5);
  }
}

/* sehr kleine Screens */
@media (max-width:507px){
  #site-title{padding-inline:var(--space-3)}
}

/* größere Screens: H2 in Header nicht umbrechen */
@media (min-width: 1100px){
  .page-header h2{
    max-width:none;
    white-space:nowrap;
  }
}

/* zwischen Desktop und Großbildschirm: etwas kompaktere Menü-Links */
@media (max-width:1078px){
  .menu li a{
    padding:var(--space-2) 0;
  }
}