/* Ergänzungen für die lokalen Landingpages.
   Baut auf landingpages.css auf (Variablen, Header, Hero, Sections, FAQ, Kontakt).
   Wird NACH landingpages.css eingebunden. */

/* Breadcrumb */
.lp-breadcrumb{max-width:1500px;margin:auto;padding:18px 5vw 0;font-size:13px;color:#526364}
.lp-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.lp-breadcrumb li+li::before{content:"›";margin-right:6px;color:#8a9696}
.lp-breadcrumb a{text-decoration:none}
.lp-breadcrumb a:hover{text-decoration:underline}
.lp-breadcrumb [aria-current]{font-weight:700;color:var(--ink)}
.lp-breadcrumb + .lp-hero{padding-top:30px}

/* Fließtext-Abschnitte */
.lp-text>p,.lp-text>ul{max-width:72ch}
.lp-text h3{margin-top:34px}
.lp-text ul,.split ul{padding-left:1.2em;margin:18px 0 0}
.lp-text li,.split li{margin:6px 0}

/* Check-Liste (✔-Aufzählungen aus den Texten) */
.lp-checks{list-style:none;padding:0!important;margin:26px 0 0;display:grid;gap:12px}
.lp-checks li{position:relative;padding:14px 18px 14px 50px;background:var(--sand);border-radius:10px;font-weight:700;font-size:16px;margin:0!important}
.lp-checks li::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3l3 3 6-6.3' fill='none' stroke='%23172429' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.contact .lp-checks li{background:#ffffff1a;color:white}

/* Vorteils-Karten: bei 2, 4 oder 6 Karten sauber im Raster */
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
.cards h3{font-size:21px}

/* Förder-Box (Fenster) */
.lp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.lp-facts div{padding:24px;border:1px solid var(--line);border-radius:14px;background:white}
.lp-facts strong{display:block;font-size:18px;margin-bottom:8px}
.lp-facts p{font-size:16px}
.lp-note{margin-top:26px;padding:18px 22px;border-left:4px solid var(--sun);background:var(--sand);border-radius:0 10px 10px 0;font-size:15px;max-width:none}

/* Lokale Verlinkung */
.lp-local h2{margin-bottom:10px}
.lp-local h3{font-size:18px;margin:34px 0 0}
.lp-local .related{grid-template-columns:repeat(4,1fr)}

/* Bildplatzhalter (z. B. Fenster – noch keine Bilder vorhanden) */
.lp-img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:inherit;padding:30px;text-align:center;border-radius:18px;border:2px dashed #b9c4c0;background:repeating-linear-gradient(135deg,#f6efe4 0 14px,#f1e8da 14px 28px);color:#526364;font-size:14px}
.lp-img-placeholder strong{font-size:17px;color:var(--ink)}

@media(max-width:900px){
  .lp-local .related{grid-template-columns:repeat(2,1fr)}
  .cards.cards-2{grid-template-columns:1fr 1fr}
  .lp-img-placeholder{min-height:390px}
}
@media(max-width:600px){
  .lp-breadcrumb{padding-inline:20px;font-size:12px}
  .lp-facts,.cards.cards-2{grid-template-columns:1fr}
  .lp-local .related{grid-template-columns:1fr}
  .lp-img-placeholder{min-height:280px}
  .lp-checks li{font-size:15px}
}

/* Feinschliff nach Browser-Vergleich */
.lp-hero h1{font-size:clamp(38px,3.9vw,64px)}
.regional aside{align-self:start}
.lp-checks + p,.lp-checks + .text-link{margin-top:24px}
.split .text-link{display:inline-block}
@media(max-width:600px){.lp-local .related{grid-template-columns:1fr 1fr;gap:10px}.lp-local .related a{padding:14px;font-size:14px}}
/* Lange deutsche Komposita (z. B. „Terrassenüberdachung“) auf kleinen Displays trennen */
.section h2,.contact h2,.lp-local .related a,.lp-breadcrumb{overflow-wrap:break-word;hyphens:auto}
.lp-local .related a{display:block;overflow-wrap:break-word;hyphens:auto}
.lp-local .related a span{float:right;margin-left:8px}
.split h3{margin-top:30px}

/* Responsive Ergänzungen: lange Überschriften und Ortsnamen */
.lp-hero h1{overflow-wrap:anywhere;hyphens:auto}.lp-hero>*,.related>*{min-width:0}
@media(max-width:600px){.lp-local .related{grid-template-columns:1fr}.lp-hero h1{font-size:clamp(30px,8vw,38px)}.lp-header{flex-wrap:wrap}.lp-header .button{max-width:100%}}