:root{
  --sam-orange: hsla(38,95%,42%,1);
  --sam-dark: #2f2f2f;
  --sam-gray: #999;
  --shadow-strong: 0 8px 18px rgba(0,0,0,.25);
  --shadow-soft: 0 4px 10px rgba(0,0,0,.18);
  --frame-gap: clamp(24px, 5vmin, 56px);
}

@font-face{
  font-family:'Roboto';
  src:url('fonts/Roboto-Regular.woff2') format('woff2'),
      url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ===== Reset/Grundlagen ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;       /* unitlos, vererbt sauber */
  color: #222;
  background: #fff;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: var(--sam-orange); text-decoration: none; }


/* ===== Keine Text-Unterstreichung ===== */

a:hover,
a:focus,
a:active{
  text-decoration: none !important;
}

/* Max-Layoutbreite */
.wrapper{ width:1080px; max-width:100%; margin:0 auto; }

/* ===== Header (sticky) ===== */
.site-header{
  position: sticky; top: 0; z-index: 3000;
  background: var(--sam-dark); color:#fff;
  box-shadow: 0 4px 6px rgba(0,0,0,.8);
}

.top-bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1rem;
}

.logo img{ height: 90px; }

/* Kontakt rechts */
.contact{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.contact-item{
  display: inline-flex; 
  align-items: center; 
  gap: .5rem;
  color: #fff; 
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.contact-item .icon{ 
	width: 45px; 
	height: 45px; 
}

@media (max-width: 1080px){
  .contact-item .icon-text{
     display: none;
  }
}

/* Mobile Toggle */
.nav-toggle{
  display: none;
  width: 44px; 
  height: 36px; 
  border: 0;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  z-index: 9999; 
}

/* ===== Navigation ===== */
.main-nav{ background: var(--sam-orange); }
.menu{
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 0;
  padding: .3rem;
  z-index: 10000;
}
.menu a{ color:#fff;
	font-size:1.2rem;
	font-weight:700;
}
/*.menu a:hover{ background-color: black; }*/

/* ===== Eyecatcher / Hero ===== */
#eyecatcher{
  position: relative;
  min-height: 100vh;                 /* volle Höhe inkl. mobiler Safe-Areas */
  display: grid; place-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff; text-align: center;
  padding: 0;                          /* wichtigen Padding raus! */
}

/* Weißer Rahmen mit absolut gleichen Abständen */
#rand{
  position: absolute;
  inset: var(--frame-gap);            /* top/right/bottom/left identisch */
  border: 2.5px solid #fff;
  display: grid; place-items: center;
  padding: clamp(16px, 3vmin, 32px);  /* Innenabstand für den Inhalt */
}

.eyecatcher-overlay{
  background: rgba(0,0,0,.62);
  padding: clamp(16px, 3vmin, 32px);
  max-width: 1080px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

#eyecatcher h1{
  text-transform: uppercase;
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 3rem);
  letter-spacing: .02em;
}

/* ===== Typografie ===== */
h1, h2, h3 { text-wrap: balance; }
.overlay h1, h1{
  text-transform: uppercase;
  margin: 0 0 .25rem 0;   /* keine Seiten-Margins */
  font-size: clamp(2.4rem, 5vw, 2.7rem);
}
.overlay h2, h2{
  text-transform: uppercase;
  margin: .5em;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
}
h3{
  font-size: clamp(1rem, 5vw, 1.1rem);
  color: #fff;
  margin: .5em 0;
}

/* Fließtext sauber, kein justify */
p{
  color: var(--sam-gray);
  text-align: start;
  hyphens: auto;
  overflow-wrap: break-word;
  margin-inline: auto;
}

span{
	color: var(--sam-orange);
	font-weight: bolder;
}

/* ===== Layout-Utilities ===== */
.left  { text-align: left; }
.center{ text-align: center; }
.right { text-align: right; }

section{
  max-width: 100%;
  position: relative;
  scroll-margin-top: 5em;
}

main{ position: relative; margin: 5em 0; }

main section{
	margin: 3em 0;
}

hr{
  margin: 0 auto;
  border: 1px solid var(--sam-orange);
  max-width: 540px;
}

/* Listen */
main li{
  margin-left: 2em;
  text-align: start; /* statt justify */
}

/* Akzentflächen */
.orange{
  background-color: var(--sam-orange);
  color: #fff;
}

.orange hr, .orange h3, .orange p { 
	color:#fff;
}

.card-cta{
	background-color: #fff;
	color: var(--sam-orange);
	padding: .5em;
	margin: 5em;
}

/* ===== Flex-Grid ===== */
.flex-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:0; max-width:100%;
}

.flex-item15 { padding:1em; width:16%; }
.flex-item25 { padding:1em; width:24.6%; }
.flex-item30 { padding:1em; width:33%; }
.flex-item50 { padding:1em; width:50%; }
.flex-item100{ padding:1em; width:100%; }

@media (max-width: 768px){
  .flex-item15, .flex-item25, .flex-item30, .flex-item50, .flex-item100 { width:100%; }
}

/* ===== Medien ===== */
img{
  transition: transform .5s cubic-bezier(0.4,0,0.2,1), box-shadow .5s ease, filter .5s ease;
  /* cursor: pointer;*/
  transform-origin: center center;
  will-change: transform;
}
img.zoom-hover:hover{
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  filter: brightness(1.05);
}
.thumb{ width: 100%; }

    /* ================= FOOTER ================= */
    footer{ background:#2f2f2f; color:#fff; border-top:4px solid var(--sam-orange); padding-top: 3em; }
    
    .footer-logo{ height:48px; margin-bottom:.75rem; }
    .footer-text{ margin:0; color:#ddd; font-size:.98rem; text-align:left; }
    .footer-col h4{ margin:0 0 .75rem 0; font-size:1.05rem; text-transform:uppercase; letter-spacing:.03em; color:#fff; }
    .footer-links{ list-style:none; margin:0; padding:0; }
    .footer-links li{ margin:.35rem 0; }
    .footer-links a{ color:#fff; text-decoration:none; }
    .footer-links a:hover{ text-decoration:underline; }
    .footer-address{ font-style:normal; }
    .footer-address a{ color:#fff; text-decoration:none; }
    .footer-address a:hover{ text-decoration:underline; }
    .footer-bottom{ background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.15); }
    .footer-bottom-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
    .footer-bottom a{ color:#fff; }
    @media (max-width: 768px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom-wrap{ flex-direction:column; gap:.5rem; } }

/* ===== Buttons ===== */
button{
  text-align: center; color: #fff;
  padding: .5em; margin: 1em;
  background-color: #af783c;
  border: none;
  border-radius: 0; /* keine Rundungen */
  box-shadow: 0 4px 6px rgba(0,0,0,0.8);
  cursor: pointer;
}

/* ===== Responsive Header/Nav ===== */
@media (max-width: 500px){
  .contact{ display: none; }       /* platzsparend in mobile */
  .nav-toggle{ display: inline-block; }
  .menu{
    display: none; flex-direction: column; gap: .5rem;
    padding: .75rem 1rem 1rem;
  }
  .menu.is-open{ display:flex; }
}

/* Willkommen-Block bündig machen */
#uns .split .text > * { margin-inline: 0; text-align: start; }
#uns .split .text p { margin: 0 0 1rem 0; max-width: 65ch; } /* linksbündig in der Spalte */
#uns .flex-item50 h1,
#uns .split .text h1{
  margin-inline: 0 !important;
  margin-block: 0 .25rem !important;
  text-align: start !important;
}
#uns .split .text h2 { margin: .5rem 0 1rem 0; }

/* Globalen H2-Seitenrand neutralisieren (verursacht die Unbündigkeit) */
h2 { margin: .5em 0; }          /* statt .5em 1.5em */
.overlay h2 { margin: .5em; }   /* Overlay behält Abstand, aber ohne Seiten-Offset */

/* zusatz Top Button */
#toTop{ opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s; }
#toTop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
/* zusätzlich Fokus im versteckten Zustand entziehen */
#toTop[aria-hidden="true"]{ visibility:hidden; } /* verhindert Fokussierung zuverlässig */

/* =========================
   MOBILE FIXES (Opera etc.)
   -> ganz unten in style.css
   ========================= */

/* Kontaktzeile: Mobil soll Telefon + Mail + Ort sauber nebeneinander bleiben */
.contact-row,
.contact-bar,
.top-contact,
.header-contact {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Erlaubt Umbruch/Anpassung ohne dass ein Item "nach unten rutscht" */
.contact-row > a,
.contact-bar > a,
.top-contact > a,
.header-contact > a,
.contact-row > .contact-item,
.contact-bar > .contact-item,
.top-contact > .contact-item,
.header-contact > .contact-item {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Falls du Icons + Text hast */
.contact-row a,
.contact-bar a,
.top-contact a,
.header-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Extra: Auf sehr kleinen Screens etwas kompakter */
@media (max-width: 480px) {
  .contact-row,
  .contact-bar,
  .top-contact,
  .header-contact {
    gap: 8px;
  }

  .contact-row a,
  .contact-bar a,
  .top-contact a,
  .header-contact a {
    font-size: 14px;
    padding: 10px 8px;
  }
}

/* Leistungen-Links/Buttons: auf Mobil untereinander mit Abstand */
.services-links,
.service-links,
.services-grid,
.service-grid,
.leistungen-links,
.leistungen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 600px) {
  .services-links > a,
  .service-links > a,
  .services-grid > a,
  .service-grid > a,
  .leistungen-links > a,
  .leistungen-grid > a,
  .services-links > .service-item,
  .service-links > .service-item,
  .services-grid > .service-item,
  .service-grid > .service-item,
  .leistungen-links > .service-item,
  .leistungen-grid > .service-item {
    width: 100%;
  }
}

/* =========================================================
   FIXPACK: Center Nav + Burger visible + Mobile menu spacing
   (Appended at end to win specificity)
   ========================================================= */

/* --- Desktop: navigation mittig --- */
header nav{
  display:flex;
  align-items:center;
}
#main-menu.menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin:0 auto;
}

/* Desktop: Kontakt-Icons größer/lesbarer */
.contact .icon{
  width:45px;
  height:45px;
}
.contact-item{
  padding:.35rem .5rem;
}

/* --- Burger button (always styled; shown only on mobile) --- */
.nav-toggle{
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  z-index:2001;
}
.nav-toggle .nav-toggle-bar{
  width:26px;
  height:2px;
  background:#fff;
  display:block;
  position:relative;
  transition:transform .2s ease, background .2s ease;
}
.nav-toggle .nav-toggle-bar::before,
.nav-toggle .nav-toggle-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:26px;
  height:2px;
  background:#fff;
  transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.nav-toggle .nav-toggle-bar::before{ top:-8px; }
.nav-toggle .nav-toggle-bar::after{ top:8px; }

/* Burger -> X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{
  background:transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{
  top:0;
  transform:rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{
  top:0;
  transform:rotate(-45deg);
}

/* --- Mobile nav layout --- */
@media (max-width: 768px){
  /* show burger */
  .nav-toggle{ display:flex; }

  /* hide desktop menu by default */
  #main-menu.menu{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    flex-direction:column;
    align-items:center; /* mittig */
    justify-content:flex-start;
    gap:0; /* we handle spacing via border/margin */
    background:#d18b0a; /* orange */
    z-index:2000;
  }
  #main-menu.menu.is-open{ display:flex; }

  /* menu items: full width + visible separation */
  #main-menu.menu > li{
    width:100%;
  }
  #main-menu.menu > li > a{
    display:block;
    width:100%;
    text-align:center;
    padding:14px 12px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.25); /* Trennung sichtbar */
  }
  #main-menu.menu > li:last-child > a{ border-bottom:0; }
  #main-menu.menu > li > a:hover{
    background:rgba(0,0,0,.08); /* besserer Hover auf orange */
  }

  /* Contact row on mobile: icons only stays visible */
  .contact{
    width:auto;
    gap:12px;
  }
  .contact-item p,
  .contact-item .icon-text{ display:none !important; }
  .contact .icon{
    width:45px;
    height:45px;
  }
}

/* --- Desktop hover: kein border-radius, aber klarer --- */
@media (min-width: 769px){
  #main-menu.menu a{
    padding:6px 10px;
    border-radius:0 !important;
    transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  #main-menu.menu a:hover{
    background:rgba(255,255,255,.18);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
}

/* --- Überblick: orange Blöcke in Mobile trennen --- */
@media (max-width: 768px){
  .flex-item30{
    margin-bottom:12px;
  }
  .flex-item30:last-child{
    margin-bottom:0;
  }
}


/* ===== ToTop klickbar erzwingen ===== */
#toTop,
.toTop,
.to-top{
  pointer-events: auto !important;
  cursor: pointer;
}