/* ===================================================================
   Kontakt – lesefreundliches Layout (mobile-first, wider mobile container)
   =================================================================== */
.contact-page{
  padding-top: calc(1rem + var(--header-height, 80px));
}
/* Container: mobil breiter + flexible Innenabstände */
.contact-page .container{
  max-width: min(96vw, 1100px);
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
  margin-left: auto;
  margin-right: auto;
}

/* Grid */
.contact-grid{
  display: grid;
  gap: clamp(.85rem, 3vw, 1.25rem);
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 900px){
  .contact-grid{
    grid-template-columns: 1.05fr 1fr; /* Referenz für unten */
    gap: 1.5rem;
    align-items: stretch;              /* gleich hohe Zeile */
  }
}
/* Panels sollen die gesamte Zeilenhöhe füllen (bündig) – nur Desktop */
.contact-grid > .panel,
.contact-grid > section.panel{
  height: auto;                        /* Mobile: natürl. Höhe */
}
@media (min-width: 900px){
  .contact-grid > .panel,
  .contact-grid > section.panel{
    height: 100%;                      /* Desktop: bündig */
  }
}

/* Karten / Panels */
.panel{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, .75rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px); /* Safari */
}

/* Headings */
.contact-title{
  text-align: center;
  color: var(--text-light, #fff);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  margin: 0 0 clamp(1.2rem, 3.5vw, 2rem);
}
.panel h3{
  color: var(--accent, #F5A623);
  font-size: 1.15rem;
  margin: 0 0 .75rem;
  font-weight: 400; /* entfettet */
}

/* Info-Block links */
.info-block{
  display: grid;
  gap: 1rem;
}
.addr, .hours, .quick-actions{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius, .75rem);
  padding: 1rem;
}
.addr p{ margin: .2rem 0; line-height: 1.5; }
.addr a{ color: var(--text-light, #fff); text-decoration: underline; }

/* Öffnungszeiten (Listen-Variante – optional anderweitig) */
.hours ul{ list-style: none; margin: 0; padding: 0; }
.hours li{
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .3rem 0; border-bottom: 1px dashed rgba(255,255,255,.12);
  font-size: .95rem;
}
.hours li:last-child{ border-bottom: 0; }

/* Quick Actions */
.action-row{
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.btn-line{
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.2);
  color: var(--text-light, #fff);
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn-line:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.35);
}

/* Standort-Karte (Bild) */
.map-card{
  position: relative;
  display: block;
  border-radius: var(--radius, .75rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
  height: auto; /* Mobile: natürlich */
}
@media (min-width: 900px){
  .map-card{ height: 100%; } /* Desktop füllt Panel-Höhe */
}
.map-card img{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px){
  .map-card img{ aspect-ratio: 16/9; object-fit: cover; }
}
.map-cta{
  position: absolute;
  left: .75rem; right: .75rem; bottom: .75rem;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .4rem;
  padding: .5rem .75rem;
  text-align: center;
  color: var(--text-light, #fff);
  font-weight: 600;
  font-size: .95rem;
}

/* Formular rechts */
#kontaktformular{ /* Scroll-Ziel unter Header */
  scroll-margin-top: calc(var(--header-height, 80px) + 16px);
}
.form-grid{
  display: grid;
  gap: .85rem;
}
.input-row{
  display: grid; gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .input-row{ grid-template-columns: 1fr 1fr; }
}
label{
  display: block;
  font-size: .9rem;
  margin-bottom: .3rem;
  color: rgba(255,255,255,.9);
  font-weight: 400; /* entfettet */
}
input[type="text"],
input[type="email"],
textarea{
  width: 100%;
  padding: .75rem .8rem;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text-light, #fff);
  outline: none;
}
textarea{ min-height: 140px; resize: vertical; }

.consent{
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; line-height: 1.45;
}
.consent input{ margin-top: .2rem; }

.submit-row{
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-top: .25rem;
}
.btn-primary{
  background: var(--accent, #F5A623);
  color: #121212;
  padding: .75rem 1.2rem;
  border-radius: .5rem;
  border: none;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover{ filter: brightness(.95); }

/* Status */
.alert{
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-weight: 600;
}
.alert.ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: #c3f2cf;
}
.alert.err{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: #ffd3d3;
}

/* Highlight-Effekt fürs Formular nach Scroll */
@keyframes flashForm {
  0%   { box-shadow: 0 0 0 rgba(245,166,35,0); }
  25%  { box-shadow: 0 0 0 4px rgba(245,166,35,.35); }
  100% { box-shadow: 0 0 0 rgba(245,166,35,0); }
}
.panel.flash { animation: flashForm 1.4s ease-out 1; }

/* ===================================================================
   BOTTOM-BAR (volle Breite, exakt an Top-Grid ausgerichtet)
   =================================================================== */
.contact-bottom{
  margin-top: clamp(16px, 4vw, 28px);
  margin-bottom: clamp(28px, 6vw, 80px); /* mehr Abstand zum Footer */
}
/* Unterer Container auch mobil breiter */
.contact-bottom .container{
  max-width: min(96vw, 1100px);
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
  margin-inline: auto;
}
.bottom-cta.panel{
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.25rem);
}

/* Innenlayout: dieselben Spalten wie oben (1.05fr / 1fr) */
.bottom-cta .bottom-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.85rem, 3vw, 1rem);
  align-items: start;
}
@media (min-width: 900px){
  .bottom-cta .bottom-grid{
    grid-template-columns: 1.05fr 1fr; /* exakt wie .contact-grid */
    gap: 1.5rem;                        /* exakt wie .contact-grid */
  }
}

/* Spalten-Titel auf gleicher Höhe + entfettet */
.bottom-cta .col-title{
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 400; /* entfettet */
  color: var(--text-light, #fff);
}

/* Mobil optisch nicht „zu dünn“ */
.bottom-cta .col{
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Stunden-Tabelle (entfettet) */
.bottom-cta .hours-table{
  width: 100%;
  border-collapse: collapse;
  color: rgba(255,255,255,.92);
  font-size: 1rem;
  margin: .1rem 0 .6rem;
}
.bottom-cta .hours-table th,
.bottom-cta .hours-table td{
  padding: .55rem .7rem;
  border-bottom: 1px dashed rgba(255,255,255,.16);
  font-weight: 400; /* entfettet */
}
.bottom-cta .hours-table th{
  text-align: left;
  color:#fff;
}
/* Heutigen Tag hervorheben – ohne Bold */
.bottom-cta .hours-table tr.is-today{
  background: rgba(245,166,35,.12);
}
.bottom-cta .hours-table tr.is-today th:first-child{
  position: relative;
}
.bottom-cta .hours-table tr.is-today th:first-child::before{
  content:"";
  position:absolute; left:-.25rem; top:10%; bottom:10%;
  width: 3px; background: var(--accent, #F5A623);
  border-radius: 2px;
}

@media (min-width: 1100px){
  .bottom-cta .hours-table{ font-size: .98rem; }
  .bottom-cta .hours-table th,
  .bottom-cta .hours-table td{ padding: .5rem .6rem; }
}

/* =========================
   Buttons unten: UNTEREINANDER
   ========================= */
.bottom-cta .action-row{
  display: flex;
  flex-direction: column;   /* untereinander */
  gap: .6rem;
  margin-top: .25rem;
}
.bottom-cta .btn-line{
  display: flex;             /* zentrierte Inhalte */
  align-items: center;
  justify-content: center;
  width: 100%;               /* volle Breite */
  padding: .8rem 1rem;       /* etwas „fülliger“ */
}
.btn-line--solid{
  background: var(--accent, #F5A623);
  border-color: transparent;
  color: #121212;
  font-weight: 700;
}
.btn-line--solid:hover{ filter: brightness(.95); transform: translateY(-1px); }

/* Button-Icons */
.btn-ico{ display:inline-flex; align-items:center; gap:.5rem; }
.ico{ width: 1.05em; height: 1.05em; flex:0 0 auto; display:inline-block; background: no-repeat center/contain; }
.ico-phone{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.4 21 3 13.6 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z'/%3E%3C/svg%3E");
}
.ico-mail{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5L4 8V6l8 5l8-5z'/%3E%3C/svg%3E");
}
.ico-calendar{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H5V10h14zm0-10H5V6h14z'/%3E%3C/svg%3E");
}

/* Screenreader-only (für Gesamttitel) */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}