/* ===== BASE / RESET ===== */
:root{
  --text:#1f2937; --muted:#4b5563; --brand:#2D68A7; --accent:#F39200;
  --bg:#f0f2f5; --border:#e5e7eb;
}
*{box-sizing:border-box}
body{
  background-color:var(--bg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.5; color:var(--text); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}

/* ===== LAYOUT / TYPO ===== */
.marketing-container{max-width:72rem; margin:0 auto; text-align:center}
.content-box{background-color:var(--bg)}
.main-heading{text-align:center; font-size:2rem; font-weight:800}
.sub-heading{font-size:1rem; line-height:1.5rem; color:var(--muted); margin-bottom:2rem; text-align:center}
.content-text{text-align:left}

/* ===== HEADER BANNER ===== */
.govisible-header-banner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(100deg, var(--brand) 0%, var(--accent) 100%);
  color:#fff; text-align:center; padding:2.5rem 1.5rem; position:relative; overflow:hidden; width:100%;
}
.govisible-header-banner h1{font-size:2.5rem; margin:.5rem 0; font-weight:800; letter-spacing:.03em}
.govisible-header-banner p{font-size:1.2rem; margin-top:1rem; max-width:600px}

/* ===== DIVIDER ===== */
.gv-divider{
  border:none; height:2px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.15), transparent);
  margin:5rem auto; max-width:900px;
}

/* ===== BOXEN: KATEGORIEN / „WAS DU BEKOMMST“ ===== */
.gv-category{max-width:1100px; margin:40px auto}
.gv-category h2{font-size:1.8rem; margin-bottom:20px; color:#222; border-bottom:2px solid #eee; padding-bottom:5px}
.gv-boxes{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:768px){ .gv-boxes{grid-template-columns:1fr} }
.gv-box{background:#fff; border:1px solid #eee; border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:10px}
.gv-box-header{display:flex; gap:15px; align-items:flex-start}
.gv-box span{font-size:2rem; flex-shrink:0}
.gv-box-content h3{margin:0 0 8px 0; font-size:1.3rem}
.gv-box-content p{margin:0; font-size:1rem; line-height:1.5; color:#444; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.gv-more { display: none; font-size: 1rem; line-height: 1.5; color: #444; margin-top: 0; padding-left: 10px;    /* identisch zu p */
  padding-right: 10px;
}

.gv-toggle{color:#d62828; font-size:.95rem; cursor:pointer; user-select:none}

/* ===== PREIS & CTA ===== */
.govisible-price{
  text-align:center; background:#f7f7f7; padding:20px; border-radius:10px; margin:20px auto; max-width:1000px
}
.govisible-price p{margin:8px 0; font-size:1.2rem}
.govisible-price strong{font-size:1.6rem; color:#000}
.govisible-cta{text-align:center; margin-top:30px}
.govisible-cta a{
  background:#d62828; color:#fff; padding:15px 30px; font-size:1.2rem; border-radius:8px; text-decoration:none; display:inline-block; transition:background .3s ease
}
.govisible-cta a:hover{background:#b71d1d}

/* ===== FAQ (Accordion orange) ===== */
.faq-section-wrapper{width:100%; max-width:1000px; margin:0 auto; border-radius:.75rem}
.faq-main-title{font-size:27px; font-weight:bold; color:#00589C; text-align:center; margin-bottom:2.5rem}
.faq-items-grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width:768px){ .faq-items-grid{grid-template-columns:repeat(2,1fr); gap:1.5rem} }
.faq-item{background-color:var(--accent); border-radius:.5rem; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); transition:background-color .3s, box-shadow .3s; margin-bottom:1rem}
.faq-item.active{box-shadow:0 4px 10px rgba(0,0,0,.1)}
.faq-header{
  display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; cursor:pointer;
  font-size:1rem; font-weight:600; color:#fff; transition:background-color .3s
}
.faq-header:hover{background-color:rgba(0,0,0,.1)}
.faq-icon{width:24px; height:24px; min-width:24px; display:flex; justify-content:center; align-items:center; transition:transform .3s; transform:rotate(0)}
.faq-icon svg{width:100%; height:100%; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-content{
  padding:0 1.5rem; max-height:0; overflow:hidden; transition:max-height .3s ease-out, padding .3s ease-out;
  color:#fff; font-size:.95rem; line-height:1.5
}
.faq-item.active .faq-content{max-height:500px; padding:1rem 1.5rem 1.5rem}

/* ===== KONTAKT / FORM ===== */
.contact-section-container{
  background-color:var(--bg); border-radius:.75rem; box-shadow:0 4px 12px rgba(0,0,0,.1);
  padding:2rem; max-width:1000px; width:100%; display:flex; flex-direction:column; gap:1rem; margin:50px auto 0;
  position:relative
}
.contact-info-column{flex:1; padding-right:1rem; display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative}
.contact-form-column{flex:1; padding-left:1rem}
.contact-section-container::before{content:''; position:absolute; top:10%; bottom:10%; left:50%; width:1px; background-color:#a7d9e8; transform:translateX(-50%); display:none}
.contact-heading{font-size:1.25rem; font-weight:600; color:var(--text); margin-bottom:1rem}
.contact-detail{font-size:.95rem; color:var(--muted); margin-bottom:.5rem}
.contact-link{color:var(--brand); text-decoration:none; transition:color .2s}
.contact-link:hover{text-decoration:underline; color:#265A91}

.form-heading{font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:1.5rem; text-align:left}
.form-group{margin-bottom:1rem}
.form-row{display:flex; flex-direction:column; gap:1rem; margin-bottom:1rem}
@media (min-width:640px){
  .form-row{flex-direction:row}
  .form-row .form-group{flex:1; margin-bottom:0}
}
.form-input,.form-textarea{
  width:100%; padding:.75rem 1rem; border:1px solid #a7d9e8; border-radius:.5rem; background-color:#e0f2f7;
  color:var(--text); font-size:1rem; transition:border-color .2s, box-shadow .2s
}
.form-input::placeholder,.form-textarea::placeholder{color:#6b7280}
.form-input:focus,.form-textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.form-textarea{min-height:100px; resize:vertical}
.form-submit-button{
  background:var(--brand); color:#fff; font-weight:600; padding:.75rem 1.5rem; border-radius:.5rem; border:none; cursor:pointer; font-size:1rem;
  transition:background-color .2s, transform .2s, box-shadow .2s; width:100%
}
.form-submit-button:hover{background-color:#265A91; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.15)}
.form-submit-button:active{transform:translateY(0); box-shadow:0 2px 4px rgba(0,0,0,.1)}
@media (min-width:640px){ .form-submit-button{width:auto; min-width:180px} }
@media (min-width:768px){
  .contact-section-container{flex-direction:row; gap:0}
  .contact-info-column{padding-right:2rem}
  .contact-form-column{padding-left:2rem}
  .contact-section-container::before{display:block}
}

/* ===== VERGLEICHSTABELLE (responsive) ===== */
.gv-compare{
  --border:var(--border); --text:#111827; --muted:#6b7280; --emph:#0ea5e9;
  color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin:1rem 0;
}
.gv-compare .table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.gv-compare table{width:100%; border-collapse:collapse; font-size:16px; line-height:1.5}
.gv-compare caption{text-align:left; font-weight:700; padding:1rem 1rem .5rem; font-size:1.125rem}
.gv-compare thead th{text-align:left; padding:.875rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap}
.gv-compare tbody td{padding:.875rem 1rem; border-top:1px solid var(--border); vertical-align:top}
.gv-compare .emph{font-weight:800}
@media (max-width:720px){
  .gv-compare thead{display:none}
  .gv-compare table,.gv-compare tbody,.gv-compare tr,.gv-compare td{display:block; width:100%}
  .gv-compare tbody tr{border-top:1px solid var(--border); padding:.5rem 0}
  .gv-compare tbody td{border:0; padding:.5rem 1rem}
  .gv-compare tbody td::before{
    content:attr(data-label); display:block; font-size:.8125rem; letter-spacing:.02em; text-transform:uppercase; color:#6b7280; margin-bottom:.25rem
  }
  .gv-compare .table-wrap{border:0}
  .gv-compare tbody tr + tr{margin-top:.5rem}
}

/* ===== RESPONSIVE HEADINGS ===== */
@media (min-width:640px){
  .main-heading{font-size:3rem}
  .govisible-header-banner h1{font-size:3rem}
  .govisible-header-banner p{font-size:1.25rem}
}
/* ===== unify container width across sections ===== */
:root {
  --container: 1100px; /* zentraler Container-Wert */
}

/* Einheitliche Breite */
.marketing-container,
.gv-category,
.faq-section-wrapper,
.contact-section-container,
.govisible-price {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* Falls Du den Header-Banner-Textbereich begrenzen willst (optional) */
.govisible-header-banner p,
.govisible-header-banner h1 {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* Die zuvor gesetzten 1000px überschreiben */
.faq-section-wrapper { max-width: var(--container); }
.contact-section-container { max-width: var(--container); }

/* Mobile/Tablet bleiben unverändert – die Trennlinie im Kontaktbereich darf bleiben */

/* Full-bleed Hero auch wenn er im Wrapper steckt */
.gv-exclusive-hero{
  position: relative;
  width: 100vw;               /* volle Browserbreite */
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: 48vh;
  isolation: isolate;         /* Overlay sauber stacken */
}

/* Bild füllt die Section */
.gv-exclusive-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}