:root{
  /* Farben */
  --bg: #ffe7c2;     /* Seiten-Hintergrund */
  --text: #111111;   /* Haupttext */
  --muted: #4a4a4a;  /* Sekundärtext */
  --rule: #1a1a1a;   /* Trennlinie */
  --btn: #dbc278;    /* Button */
  --btn-hover: #cdb262; /* Button Hover (leicht dunkler) */

  /* Layout (fix, nicht responsive) */
  --card-width: 320px;
  --line-height: 1.35;
}

/* Font-Stack mit Fallbacks */
/* Hinweis: "Helvetica Now" muss lokal eingebunden/ installiert sein */
body{
  min-height:100vh;
  margin:0;
  background:#ffe7c2;
  color:var(--text);
  font-family: Helvetica, Arial, sans-serif;
  font-size:20px;                   /* Grundgröße (Text) */
  line-height: var(--line-height);
}

a {text-decoration: none;}

.wrap{
  width:100%;
 
  display:flex;
  justify-content:center; /* horizontal zentrieren */
  align-items:flex-start; /* oben statt genau Mitte */
  padding-top: 8vh;       /* Block leicht nach unten schieben */
}

.card{
  width: 310px;
  margin: 0 auto;
  position: relative;
  padding-left: 80px;
}

/* Überschrift (32 px, Black) */
.brand {
		position: relative;
		z-index: 90;
	
}

.brand h1{
  margin:0 0 20px 0;
  font-size: 43px;
  font-weight: 900;                 /* Black */
  line-height: 1.05;
 
}

.brand h1 span{
	display:block;
		line-height: 0.9em;
}

/* Adresse */
.contact-block{
  font-style: normal;
  margin-top: 8px;
}

.contact-block .name,
.contact-block .street,
.contact-block .city {
  font-weight: 700;   /* Fett */
  margin: 0 0 0 0;
  line-height: 25px;
}

/* H2 (20 px, Fett) */
.h2{
  font-size:20px;
  font-weight:700;                  /* Fett */
  margin: 0 0 4px 0;
}

/* Trennlinie */
.rule{
  border:0;
  height:1.5px;
  background:var(--rule);
  margin:29px 0;
  opacity:.9;
  width: 225px;       /* volle Textbreite */
}

/* Liste */
.services ul{
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  
}


.services .h2 {margin: 0 0 8px 0; padding: 0;}
.services .extra {margin: 8px 0 0 0; padding: 0;}

.services li{
	margin: 0;
	line-height: 25px;
}

/* Kontaktblock */
.contact-data p{margin:0px 0}
.contact-data a{
  color:inherit;
  text-decoration: none;
  text-underline-offset: 2px;
}

.contact-data .contact-data-mail {margin:12px 0 0 0;}

/* Button */
.cta-wrap{
		margin-top:24px;
	}
	
.btn {
	display:inline-flex;
	align-items:center;
	gap:8px;
	background: #e4c36c;
	color:#111;
	padding: 12px 16px 12px 24px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 5px;
	background-image:url('kobel-texture.png');
	background-repeat: repeat;
	background-size: 30px;
	border: 1px solid #b57625;
	transition-duration: 0.3s;

}

.btn:hover, .btn:focus {
	gap:20px;
	border-color:#000;
}

.icon {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.region {
	 font-size:15px; 
	 padding-top:10px;
	 width: 225px; 
}

.footer-logo img {
  max-width: 150px; /* kannst du anpassen */
  height: auto;
  position: absolute;
  z-index: 80;
  top: 0px;
  right: 0px;
}

/* Mobiles */
@media only screen and (min-width: 1px) and (max-width: 479.4999px) {
	.card{
	padding-left: 20px;
	}	
}

@media (min-width: 1600px) {
  .wrap{
	  transform: scale(1.6); /* 110 % der Originalgrösse */
	  transform-origin: 0% 0%; /* Wichtig, damit das Skalieren nicht zentriert erfolgt */
	  max-width:60%;
	  padding-top: 4vh;       /* Block leicht nach unten schieben */
	}
	
	
	.region {
		 font-size:12px; 
	}

}