@font-face { 
	font-family: 'LogoFont'; 
	src: url('./High Empathy.ttf') format('truetype');
}
@font-face {
    font-family:'Josefin Sans';
    src: url("./JosefinSans-VariableFont_wght.ttf");
}

:root{
  /* Brand */
  --petrol:#306090;
  --gold:#e0b050;

  /* Backgrounds */
  --cream:#fbf5e8;
  --white:#ffffff;
  --success-bg:#eef5f0;
  --error-bg:#fbeae6;

  /* Text */
  --text:#214364;
  --muted:#5a5e63;
  --text-on-dark-muted:#83acd6;

  /* Dark accents (collapsed) */
  --text:#0f2e2e;

  /* Status / Ampel */
  --status-ok:#3f7a56;
  --status-warn:#c9a24b;
  --status-bad:#a13f2e;

  /* BAFU-Lärm Beurteilungspegel Lr */
  --laerm-75:#464878;
  --laerm-70:#9278b4;
  --laerm-65:#8c3240;
  --laerm-60:#e84e4a;
  --laerm-55:#f0783c;
  --laerm-50:#f4b050;
  --laerm-45:#f8e84c;
  --laerm-40:#325032;
  --laerm-unt:#000000;

  /* Borders (solid blends; ink on cream/white, gold on petrol) */
  --border:#fbf5e8;
  --border-strong:#bcd2e9;

  /* Type scale */
  --fs-12:12px;
  --fs-14:14px;
  --fs-20:20px;
  --fs-24:25px;
  --fs-26:25px;
  --fs-36:36px;
  --fs-48:48px;
  --fs-60:60px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:'Josefin Sans', sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.6;
  lang="de";
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 64px;
  background:var(--petrol);
  border-bottom:1px solid var(--petrol);
  position:sticky;
  top:0;
  z-index:50;
}

header > a{text-decoration:none; color:inherit; display:inline-block;}
.logo{font-family:'LogoFont', cursive; font-size:var(--fs-60); color:var(--cream); letter-spacing:0.5px;}
.logo span{color:var(--gold);}

nav a{
  font-family:'Josefin Sans', sans-serif;
  text-decoration:none;
  color:var(--cream);
  margin-left:36px;
  font-size:var(--fs-20);
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-weight:500;
}
nav a:hover{color:var(--gold);}
nav a.active{color:var(--gold);}

.page-hero{
  padding:80px 24px 60px;
  text-align:center;
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%);
}
.page-hero h1{font-size:var(--fs-48); color:var(--petrol); font-weight:600; max-width:780px; margin:0 auto 16px;}
.page-hero p{font-size:var(--fs-20); color:var(--muted); max-width:600px; margin:0 auto; font-weight:300;}

section{padding:70px 64px;}

.section-title{
  text-align:center;
  font-size:var(--fs-14);
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
  font-weight:600;
}
.section-head{
  text-align:center;
  font-size:var(--fs-36);
  color:var(--petrol);
  max-width:700px;
  margin:0 auto 46px;
  font-weight:500;
}

.cta{
  display:inline-block;
  padding:16px 36px;
  background:var(--petrol);
  color:var(--cream);
  text-decoration:none;
  font-size:var(--fs-20);
  text-transform:uppercase;
  letter-spacing:1px;
  border:1px solid var(--petrol);
  transition:0.25s;
  cursor:pointer;
}
.cta:hover{background:transparent; color:var(--petrol);}
.cta.gold{background:var(--gold); border-color:var(--gold); color:var(--petrol); margin-left:16px;}
.cta.gold:hover{background:transparent; color:var(--gold);}

footer{
  background:var(--petrol);
  color:var(--cream);
  padding:50px 64px 30px;
  text-align:center;
}
footer .logo{font-size:var(--fs-26); color:var(--cream); margin-bottom:10px;}
footer .logo span{color:var(--gold);}
footer p{font-size:var(--fs-14); font-weight:300; color:var(--text-on-dark-muted); margin-top:20px;}
footer a{font-size:var(--fs-14); font-weight:300; color:var(--text-on-dark-muted); margin-top:20px;}

/* ===== Startseite (index.php) ===== */
.hero{padding:120px 64px 100px; text-align:center; background:linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%);}
.hero h1{font-size:var(--fs-48); color:var(--petrol); max-width:820px; margin:0 auto 20px; font-weight:600; line-height:1.3;}
.hero p.slogan{font-size:var(--fs-20); color:var(--muted); max-width:600px; margin:0 auto 40px; font-weight:300;}
.facts{background:var(--petrol); color:var(--cream);}
.facts .section-head{color:var(--cream);}
.facts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1100px; margin:0 auto;}
.fact-card{background:var(--petrol); border:1px solid var(--petrol); padding:36px 28px; text-align:center;}
.fact-card h3{color:var(--gold); font-size:var(--fs-20); margin-bottom:14px; font-weight:500;}
.fact-card p{color:var(--cream); font-size:var(--fs-20); font-weight:300;}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1200px; margin:0 auto;}
.service-card{background:var(--white); border:1px solid var(--border); padding:34px 26px; text-align:left;}
.service-card .num{font-size:var(--fs-14); color:var(--gold); letter-spacing:2px; font-weight:600; margin-bottom:16px; display:block;}
.service-card h3{color:var(--petrol); font-size:var(--fs-20); margin-bottom:12px; font-weight:500;}
.service-card p{color:var(--muted); font-size:var(--fs-20); font-weight:300;}

/* ===== Leistungen (leistungen.php) ===== */
.service-detail{max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:60px;}
.service-row{display:grid; grid-template-columns:100px 1fr; gap:30px; align-items:start; border-bottom:1px solid var(--border); padding-bottom:50px;}
.service-row .num{font-size:var(--fs-48); color:var(--gold); font-weight:600; line-height:1;}
.service-row h3{font-size:var(--fs-24); color:var(--petrol); margin-bottom:14px; font-weight:500;}
.service-row p{color:var(--muted); font-size:var(--fs-20); font-weight:300; margin-bottom:14px;}
.service-row ul{list-style:none; margin-top:10px;}
.service-row ul li{padding:6px 0; font-size:var(--fs-20); color:var(--text);}
.service-row ul li span{color:var(--gold); margin-right:10px; font-weight:600;}
.packages{background:var(--cream);}
.package-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1100px; margin:0 auto;}
.package-card{background:var(--white); border:1px solid var(--border); padding:36px 28px; text-align:center;}
.package-card.highlight{border:2px solid var(--gold);}
.package-card h4{color:var(--petrol); font-size:var(--fs-20); margin-bottom:12px; font-weight:500;}
.package-card p{color:var(--muted); font-size:var(--fs-12); font-weight:300; margin-bottom:20px;}

/* ===== Warum Rentabilis (nutzen.php) ===== */
.risk-intro{max-width:800px; margin:0 auto 60px; text-align:center;}
.risk-intro p{color:var(--muted); font-size:var(--fs-20); font-weight:300; line-height:1.7;}
.risk-grid{display:flex; flex-direction:column; gap:0; max-width:1100px; margin:0 auto;}
.risk-row{display:grid; grid-template-columns:1fr 60px 1fr; gap:0; align-items:stretch; border-bottom:1px solid var(--border); padding:40px 0;}
.risk-col{padding:0 30px;}
.risk-col.problem h4{color:var(--status-bad); font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; font-weight:600;}
.risk-col.problem p{color:var(--muted); font-size:var(--fs-20); font-weight:300;}
.risk-col.solution{background:var(--petrol); color:var(--cream); padding:24px 30px;}
.risk-col.solution h4{color:var(--gold); font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; font-weight:600;}
.risk-col.solution p{color:var(--cream); font-size:var(--fs-20); font-weight:300;}
.arrow-col{display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:var(--fs-24);}
.risk-title{font-size:var(--fs-20); color:var(--petrol); font-weight:500; margin-bottom:16px;}
.stat-strip{background:var(--cream); text-align:center;}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1000px; margin:0 auto;}
.stat-card{padding:20px;}
.stat-card .num{font-size:var(--fs-48); color:var(--gold); font-weight:600; margin-bottom:10px;}
.stat-card p{font-size:var(--fs-14); color:var(--muted); font-weight:300;}
.final-cta{text-align:center; background:var(--petrol); color:var(--cream);}
.final-cta h2{font-size:var(--fs-36); margin-bottom:16px; font-weight:500;}
.final-cta p{color:var(--cream); font-weight:300; margin-bottom:30px; max-width:600px; margin-left:auto; margin-right:auto;}

/* ===== Rendite-Rechner (rechner.php) ===== */
.calc-page{max-width:1200px; margin:0 auto;}
#calcForm{display:block; width:100%;}
.calc-form-wrap{margin-bottom:50px;}
.calc-input-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
.calc-form-section{min-width:0;}
.calc-form-heading{font-size:var(--fs-24); color:var(--petrol); font-weight:500; margin-bottom:20px;}
.calc-form{display:flex; flex-direction:column; gap:20px;}
.calc-field{display:flex; flex-direction:column; gap:6px;}
.calc-form label{font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1px; color:var(--petrol); font-weight:500; display:block;}
.calc-form input{width:100%; padding:12px 14px; border:1px solid var(--border-strong); background:var(--white); font-family:'Josefin Sans', sans-serif; font-size:var(--fs-20); color:var(--text);}
.calc-form input:focus{outline:none; border-color:var(--gold);}
.calc-form select{width:100%; padding:12px 14px; border:1px solid var(--border-strong); background:var(--white); font-family:'Josefin Sans', sans-serif; font-size:var(--fs-20); color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235a5e63' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:36px;}
.calc-form select:focus{outline:none; border-color:var(--gold);}
.calc-form .hint{font-size:var(--fs-12); color:var(--muted); font-weight:300; margin:0;}
.calc-form label.checkbox-option{display:inline-flex; align-items:center; gap:8px; width:auto; text-transform:none; letter-spacing:normal; font-size:var(--fs-20); color:var(--text); font-weight:400; cursor:pointer;}
.calc-form label.checkbox-option input[type="checkbox"]{width:auto; padding:0; flex-shrink:0;}
.calc-label-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.calc-label-row label{display:inline; margin:0; text-transform:uppercase; letter-spacing:1px; font-size:var(--fs-14); color:var(--petrol); font-weight:500;}
.calc-label-row input[type="checkbox"]{width:auto; padding:0; flex-shrink:0; margin:0;}
.calc-field.is-off input[type="number"]{opacity:0.55;}
.calc-results-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch; margin-bottom:40px;}
.calc-results-col{display:flex; flex-direction:column; gap:50px; min-width:0;}
.result-text{color:var(--cream); font-size:var(--fs-14); font-weight:300; margin-bottom:20px; line-height:1.6;}
.status-badge{color:var(--white); padding:6px 16px; font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px;}
.calc-wrap{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.calc-form.calc-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;}
.result-box{background:var(--petrol); color:var(--cream); padding:40px 34px; display:flex; flex-direction:column;}
.result-box-tall{height:100%;}
.result-box h3{font-size:var(--fs-20); text-transform:uppercase; letter-spacing:2px; color:var(--gold); margin-bottom:10px; font-weight:600;}
.result-value{font-size:var(--fs-48); font-weight:600; margin-bottom:24px; color:var(--cream);}
.result-subvalue{font-size:var(--fs-20); color:var(--cream); font-weight:400; margin-top:-12px; margin-bottom:8px;}
.result-subvalue .val{color:var(--gold); font-weight:600;}
.result-hint{font-size:var(--fs-12); color:var(--cream); font-weight:300; opacity:0.85; margin:0 0 20px; line-height:1.5;}
.result-lines{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-14); font-weight:300; color:var(--cream);}
.result-lines:not(.result-lines-calc) > div{display:flex; justify-content:space-between; gap:4px; border-bottom:1px solid rgba(251,245,232,0.25); padding-bottom:4px;}
.result-lines-plain > div{border-bottom:none; padding-bottom:0;}
.result-lines span.val{color:var(--gold); font-weight:500; text-align:right; flex-shrink:0;}
.result-subvalue .val.is-negative,
.result-lines span.val.is-negative{color:var(--status-bad);}
.result-lines-calc .result-line{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:none; padding-bottom:0;}
.result-lines-calc .result-line-emphasis{font-weight:500;}
.result-lines-calc .result-line-divider{border-bottom:2px solid rgba(251,245,232,0.45); margin:4px 0 10px; padding-bottom:0;}
.result-lines-calc .result-line-spacer{border-bottom:none; padding-bottom:0; height:10px;}
.result-line-spacer-lg{height:28px;}
.result-lines-calc .line-label{flex:1; min-width:0;}
.calc-results-row{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:stretch; margin-bottom:50px;}
.result-box-wide{max-width:1200px; margin:0 auto 40px;}
.result-text-notes{display:flex; flex-direction:column; gap:8px; margin-top:16px; margin-bottom:0;}
.result-text-notes span{display:block;}
.result-value.is-negative{color:var(--status-bad);}
.result-lines-calc .line-op{display:inline-block; min-width:1.1em; margin-right:4px; color:var(--gold); font-weight:600;}
.result-lines-calc .val-block{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0;}
.result-lines-calc .val-note{font-size:var(--fs-12); color:rgba(251,245,232,0.75); font-weight:300; text-align:right; white-space:nowrap;}
.disclaimer{max-width:900px; margin:60px auto 0; font-size:var(--fs-14); color:var(--muted); font-weight:300; text-align:center;}

/* ===== Kontakt (kontakt.php) ===== */
.contact-wrap{max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact-info h2{font-size:var(--fs-26); color:var(--petrol); margin-bottom:18px; font-weight:500;}
.contact-info p{color:var(--muted); font-size:var(--fs-20); font-weight:300; margin-bottom:24px;}
.contact-info ul{list-style:none;}
.contact-info ul li{padding:10px 0; border-bottom:1px solid var(--border); font-size:var(--fs-20);}
.contact-info ul li span{color:var(--gold); font-weight:600; margin-right:10px;}
form{display:flex; flex-direction:column; gap:18px;}
form label{font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1px; color:var(--petrol); font-weight:500; margin-bottom:6px; display:block;}
form input, form select, form textarea{width:100%; padding:12px 14px; border:1px solid var(--border-strong); background:var(--white); font-family:'Josefin Sans', sans-serif; font-size:var(--fs-20); color:var(--text);}
form textarea{min-height:110px; resize:vertical;}
form input:focus, form select:focus, form textarea:focus{outline:none; border-color:var(--gold);}
.form-note{font-size:var(--fs-12); color:var(--muted); font-weight:300; margin-top:-6px;}
.form-success{background:var(--success-bg); border:1px solid var(--gold); padding:16px 20px; color:var(--petrol); font-size:var(--fs-14); margin-top:16px;}
.form-error{background:var(--error-bg); border:1px solid var(--status-bad); padding:16px 20px; color:var(--status-bad); font-size:var(--fs-14); margin-top:16px;}

/* ===== Responsive ===== */
@media(max-width:900px){
  header, section{padding-left:24px; padding-right:24px;}
  .page-hero h1{font-size:var(--fs-36);}
  .facts-grid, .services-grid{grid-template-columns:1fr;}
  .hero h1{font-size:var(--fs-36);}
  .risk-row{grid-template-columns:1fr;}
  .arrow-col{display:none;}
  .risk-col.solution{margin-top:10px;}
  .stat-grid{grid-template-columns:1fr;}
  .calc-input-grid,
  .calc-results-grid,
  .calc-results-row{grid-template-columns:1fr;}
  .calc-results-col{gap:30px;}
  .result-box-tall{height:auto;}
}
@media(max-width:800px){
  .calc-wrap{grid-template-columns:1fr;}
}
@media(max-width:700px){
  .service-row{grid-template-columns:1fr;}
  .package-grid{grid-template-columns:1fr;}
}

/* Fix: Browser-Standardstyles für <button> und <select> überschreiben teilweise das cta/form Design */
button.cta{
  font-family:'Josefin Sans', sans-serif;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:0;
  outline:none;
  font-size:var(--fs-20);
}
button.cta:focus{outline:none;}

form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:0;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235a5e63' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
  padding-right:36px;
}

form input[type="number"]{
  -moz-appearance:textfield;
}
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Toggle für Bewirtschaftungskosten (CHF vs. %) */
.toggle-group{display:flex; gap:20px; margin-bottom:10px;}
.toggle-option{display:flex; align-items:center; gap:6px; font-size:var(--fs-14); font-weight:300; color:var(--text); text-transform:none; letter-spacing:normal; cursor:pointer;}
.toggle-option input[type="radio"]{width:auto; accent-color:var(--gold); cursor:pointer;}

/* ===== Burger-Menü (unter 1024px) ===== */
.nav-toggle{display:none;}
.burger{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px;
  height:20px;
  cursor:pointer;
  z-index:60;
}
.burger span{
  display:block;
  height:2px;
  width:100%;
  background:var(--cream);
  transition:0.3s;
}

/* ===== GIS-Auswertung (analyse.php) ===== */
.gis-page{margin:0 auto;}
.gis-search {
  max-width: 800px;
  margin: 0 auto 36px; /* oben 0, links/rechts auto, unten 36px */
}
.gis-search label{font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1px; color:var(--petrol); font-weight:500; display:block; margin-bottom:8px;}
.gis-search-row{display:flex; gap:12px; flex-wrap:wrap;}
.gis-search-row input{flex:1; min-width:220px; padding:12px 14px; border:1px solid var(--border-strong); background:var(--white); font-family:'Josefin Sans', sans-serif; font-size:var(--fs-20); color:var(--text);}
.gis-search-row input:focus{outline:none; border-color:var(--gold);}
.gis-main{display:flex; flex-direction:column; gap:28px;}
.gis-panel{background:var(--white); border:1px solid var(--border); padding:28px 24px;}
.gis-panel-title{font-size:var(--fs-24); color:var(--petrol); font-weight:500; margin-bottom:16px;}
.gis-hint{font-size:var(--fs-12); color:var(--muted); font-weight:300; margin:12px 0 0;}
.gis-muted{color:var(--muted); font-size:var(--fs-14);}
.gis-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.gis-table th,.gis-table td{padding:12px 0; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:var(--fs-14);}
.gis-table th{width:38%; font-size:var(--fs-12); text-transform:uppercase; letter-spacing:1px; color:var(--petrol); font-weight:600; padding-right:16px;}
.gis-table tr:last-child th,.gis-table tr:last-child td{border-bottom:none;}
.gis-table th, .gis-table td {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}
.gis-links{margin:8px 0 0 18px; font-size:var(--fs-14); color:var(--text);}
.gis-links a{color:var(--petrol);}

/* Ampel (Klima) – Farben aus :root */
.ampel{display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:middle; flex-shrink:0;}
.ampel.ok{background:var(--status-ok);}
.ampel.warn{background:var(--status-warn);}
.ampel.bad{background:var(--status-bad);}
.klima-wert{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px;}
.klima-pct{color:var(--muted); font-size:var(--fs-12);}

/* BAFU-Lärmfarben (Beurteilungspegel Lr) */
.laerm-wert{display:inline-flex; align-items:center; gap:10px;}
.laerm-swatch{display:inline-block; width:18px; height:18px; border:1px solid rgba(0,0,0,0.15); flex-shrink:0;}
.laerm-swatch.laerm-75{background:var(--laerm-75);}
.laerm-swatch.laerm-70{background:var(--laerm-70);}
.laerm-swatch.laerm-65{background:var(--laerm-65);}
.laerm-swatch.laerm-60{background:var(--laerm-60);}
.laerm-swatch.laerm-55{background:var(--laerm-55);}
.laerm-swatch.laerm-50{background:var(--laerm-50);}
.laerm-swatch.laerm-45{background:var(--laerm-45);}
.laerm-swatch.laerm-40{background:var(--laerm-40);}
.laerm-swatch.laerm-unt{background:var(--laerm-unt);}
.laerm-block{display:grid; grid-template-columns:1fr auto; gap:24px 32px; align-items:start;}
.laerm-legende{background:var(--cream); border:1px solid var(--border); padding:16px 18px; min-width:220px;}
.laerm-legende-title{font-size:var(--fs-12); text-transform:uppercase; letter-spacing:1px; color:var(--petrol); font-weight:600; margin-bottom:12px;}
.laerm-legende-list{list-style:none; font-size:var(--fs-12); color:var(--text);}
.laerm-legende-list li{display:flex; align-items:center; gap:10px; padding:3px 0;}
.laerm-legende-list .laerm-swatch{width:22px; height:14px;}

.denkmal-quellen{display:flex; flex-direction:column; gap:10px; font-size:var(--fs-14);}
.denkmal-quelle strong{color:var(--petrol); margin-right:6px;}
.denkmal-quelle--ja strong{color:var(--status-bad);}

.gis-map iframe{display:block; width:100%; height:320px; border:1px solid var(--border); background:var(--cream);}
.gis-map-link{margin-top:12px; font-size:var(--fs-14);}
.gis-map-link a{color:var(--petrol); font-weight:500;}

@media(max-width:900px){
  .laerm-block{grid-template-columns:1fr;}
  .gis-search-row .cta{width:100%; text-align:center;}
}

.gis-mapout #mapout {
    width: 100%;
    height: 320px;
    min-height: 320px;
    border: 1px solid var(--border);
    background: var(--cream);
}

.map-container { height: 320px; border-radius: 10px; margin-top: 30px;  z-index: 10; }


.gis-grid{
	display:grid; 
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:28px;
}

/* Grundlayout der Panels */
.gis-panel {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 16px 18px;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Überschrift als „Kachelkopf“ */
.gis-panel-title {
  font-size: var(--fs-20);
  color: var(--petrol);
  margin: 0;
  cursor: pointer;
}
.gis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Grundlayout der Panels */
.gis-panel {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 16px 18px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.gis-panel-title {
  font-size: var(--fs-20);
  color: var(--petrol);
  margin: 0;
  cursor: pointer;
}

/* Inhalt standardmäßig verstecken */
.gis-panel-body {
  display: none;
  margin-top: 14px;
}

/* Aktives Panel: über volle Breite + Inhalt sichtbar im Grid */
.gis-panel.active {
  grid-column: 1 / -1;
  padding: 24px 22px;
}

.gis-panel.active .gis-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* Spalten im Panel */
.gis-element {
  min-width: 0;
}
/* Basis-Design hast du schon, z.B. .cta mit petrol-Hintergrund, cream-Text */

@keyframes auswertenBlink {
  0% {
    background-color: var(--petrol);
    color: var(--cream);
  }
  50% {
    background-color: var(--cream);
    color: var(--petrol);
  }
  100% {
    background-color: var(--petrol);
    color: var(--cream);
  }
}

/* Klasse, die die Animation aktiviert */
.cta.is-loading {
  animation: auswertenBlink 1s ease-in-out infinite;
}



@media only screen and (max-width: 1023px){
  .burger{display:flex;}

  nav{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--petrol);
    border-bottom:1px solid var(--petrol);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
  }
  nav a{
    margin-left:0;
    padding:16px 24px;
    border-top:1px solid var(--petrol);
  }

  .nav-toggle:checked ~ nav{
    max-height:500px;
  }

  .nav-toggle:checked ~ .burger span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }
  .nav-toggle:checked ~ .burger span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked ~ .burger span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }

  .gis-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .gis-panel.active {
    grid-column: auto;
    padding: 18px 16px;
  }

  .gis-panel.active .gis-panel-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}