:root{
  --brand:#0f4c81;
  --text:#101111;
  --bg:#ffffff;
  --card-bg: rgba(255,255,255,0.85);
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --hero-h: 48vh;          
  --maxw: 1200px;        
}

body {
  color: #000; 
}


.site-header,
.site-header a,
.site-header .brand-name {
  color: #fff;
}

.site-header a:hover {
  color: #0f4c81; 
}


body{ margin:0; font:16px/1.5 Roboto; color:var(--text); background:#f5f7fb; }
.section{ display:flex; justify-content:center; padding: clamp(24px, 3vw, 48px); }


.site-header, .site-footer{ max-width: var(--maxw); margin:0 auto; padding:12px 16px; }


.has-hero-bg::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient( to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35) ),
    url("Torsystem.png") center/cover no-repeat;
  filter: blur(4px);
  transform: scale(1.03);   
  z-index:-1;
}


.site-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-logo{ width:36px; height:auto; }
.brand-name{ font-weight:600; }
.top-nav a{ margin-left:16px; text-decoration:none; color:inherit; position:relative; }
.top-nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--brand); transition:width .25s; }
.top-nav a:hover{ color:var(--brand); }
.top-nav a:hover::after{ width:100%; }


.hero{ min-height: var(--hero-h); display:grid; place-items:center; padding: clamp(16px, 3vw, 32px); }
.hero-cards{ width: min(100%, var(--maxw)); display:grid; gap:16px; }
@media (min-width: 900px){ .hero-cards{ grid-template-columns: 2fr 1fr; } }

#inhalt {width: 900px; margin-left: auto; margin-right: auto; font-family: trebuchet ms; Helvetica; sant-serif; letter-spacing: 3px; }

#logo {
  text-align: center; 
  font-size: 150%; 
  color: #f6f2f2; 
  padding-top: 30px; 
  padding-bottom: 15px;
}

.logo {
  display: block;
  margin: 0 auto;
  width: 120px;   /* hier passt du die Bildgröße an */
  height: auto;
}
.firmenname {
  margin-top: 10px;   /* Abstand zwischen Logo und Text */
  font-size: 3.0rem;  /* Schriftgröße anpassen */
  text-align: center;
  color: #ffffff; /* reines Weiß */
  -webkit-text-stroke: 1px black; /* schwarze Umrandung */
}

  /* Container */
#Bild.simple-carousel {
  position: relative;
  max-width: 840px;      /* optional: Seitenbreite */
  height: 220px;          /* Höhe nach Wunsch (z.B. 180–300px) */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;    /* optional */
}

/* Bilder übereinander stapeln */
#Bild.simple-carousel img {
  position: absolute;
  inset: 0;               /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;      /* füllt die Fläche ohne Verzerrung */
  object-position: right center; /* rechts ausrichten – bei deinem Motiv sinnvoll */
  opacity: 0;
  transition: opacity .5s ease !important;
}

/* sichtbares Bild */
#Bild.simple-carousel img.is-active {
  opacity: 1;
}

.card{
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:12px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.5vw, 28px);
}
.card h1, .card h2{ margin-top:0; }
.card-cta h1{ font-size: clamp(24px, 4vw, 36px); }

.card h1,
.card h2,
.card h3 {
  text-align: center;
}

.card-cta {
  text-align: center;
}


.cta-row {
  justify-content: center;
align-items: center;}


.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; color:#fff;
  background: var(--brand);
}
.btn:hover{ filter:brightness(1.1); }
.btn.primary{ background: var(--brand); }


.features{ margin:0; padding-left:18px; }
.open-times{ margin:0; padding-left:18px; }
.logo-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.logo-row img{ height:32px; filter:grayscale(1); opacity:.85; }


.contact-form{ display:grid; gap:10px; margin-top:8px; }
.contact-form input, .contact-form textarea{
  border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; background: #fff;
}
/*
.card-zeiten h2 {
  text-align: center;  
}
.card-zeiten {
  max-width: 600px;  
  margin: 0 auto;    
}

.card-zeiten .open-times {
  list-style: none;  
  padding: 0;
  margin: 0;
  line-height: 1.6;
}

.card-zeiten .open-times li {
  text-align: center;  
}
  */
.section .card {
  max-width: 600px;   
  width: 100%;
  margin: 0 auto;    
}

.hero-card {
  max-width: 800px !important; 
  margin: center !important 
}

.site-footer{ text-align:center; color:#eff1f5; padding-bottom:28px; }

.site-footer a:link,
.site-footer a:visited {
  color: #fff;
  text-decoration: none;  
}

.site-footer a:hover,
.site-footer a:focus {
  color: #e6e9ec;         
  text-decoration: underline; 
}