/* Custom-Overrides für den Landed-Entwurf – Ferienwohnungen Bad Westernkotten
   Design-Richtung: helles "Travel/Tourism"-Muster (Skill ui-ux-pro-max, Demo "Wonderlust").
   Gemeinsam genutzt von index.html und monteur.html. */

/* Cookie-Consent-Banner (cookie-law-info) als volle Leiste unten darstellen.
   Auf dem schlanken Custom-Template (ohne Theme-Rahmen) hat die Leiste keine Breite
   und kollabiert sonst zu einer schmalen, hohen schwarzen Säule ("schwarzer Streifen").
   Volle Breite erzwingen -> normale, wegklickbare Cookie-Leiste. */
#cookie-law-info-bar{width:100% !important;left:0 !important;right:0 !important;box-sizing:border-box !important;}

/* Grundfarbe von Seite/Body: Landeds main.css setzt html/body auf ein dunkles #1c1d26
   (fürs Original-Dark-Theme). Unser Redesign ist durchgehend hell – ohne diese Regel scheint
   die dunkle Grundfarbe in jeder Margin-Lücke ZWISCHEN zwei Sektionen als schwarzer Balken durch
   (z.B. Monteurseite zwischen #wohnungen und #standort, 16px Margin-Collapse). Body weiss = Lücken
   verschwinden optisch. */
html,body{background-color:#fff;}

:root{
	--ink:#0F172A;
	--muted:#475569;
	--blue:#2563EB;
	--blue-dark:#1D4ED8;
	--orange:#F97316;
	--orange-dark:#EA580C;
	--tint:#F3F6FB;
	--border:#E4E9F1;
	--card-shadow:0 10px 30px rgba(15,23,42,.08);
}

/* WP-Integration: Enfold gibt sitenweit ein Inline-<style> mit Dekorationen für alte
   Avia-Sektions-IDs aus (unconditional, unabhängig vom Template). Die ID "prices" kollidiert
   mit unserer eigenen #prices-Sektion (schräger Verlaufs-Hintergrund verdeckte die Preistabelle
   komplett). Auf der statischen Vorschau (ohne WP) existiert diese Regel nicht -> hier neutral. */
#prices:before{content:none !important;}

/* Basis-Typografie */
body,input,select,textarea,button,.button{font-family:"Source Sans 3",Helvetica,Arial,sans-serif;font-weight:500;color:var(--ink);}
h1,h2,h3,h4,h5,h6{font-family:"Source Sans 3",Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:0;color:var(--ink);}
p,li,td,th{font-weight:500;color:var(--ink);}
.accent{color:var(--blue);}
#logo img{height:44px;width:auto;display:block;}
/* Logo ist jetzt <div id="logo"> (vorher <h1>, aus SEO-Gründen demoviert, damit die
   sichtbare Hero-Zeile die einzige H1 ist). main.css positioniert nur `#header h1` –
   deshalb hier die identische Positionierung fürs Div wiederholen. */
#header #logo{position:absolute;left:1.25em;top:0;height:inherit;line-height:inherit;margin:0;}
.spotlight .image.main img{object-position:center 60%;}
#contact header.major{margin-bottom:1.5rem;}
#lage header.major{margin-bottom:0.75rem;}

/* Alle Wrapper-Sektionen: hell statt Creme/Dunkel, Rhythmus über Hintergrund-Ton */
.wrapper{background:#fff;}
.wrapper.style2{background:var(--tint);}
.wrapper .container p,.wrapper .container li{color:var(--muted);font-weight:500;}
.wrapper header.major p{color:var(--muted);}
.wrapper a:not(.button){color:var(--blue);font-weight:600;}
.wrapper a:not(.button):hover{color:var(--blue-dark);}
#lage .container p,#monteur .container > p{color:var(--muted);}

/* Header/Nav */
#header{background:rgba(255,255,255,.96);box-shadow:0 2px 12px rgba(15,23,42,.08);}
#header nav ul li a:not(.button){color:var(--ink);}
#header nav ul li a:not(.button):hover{color:var(--blue);}

/* Buttons – einheitlich, hell, sitewide */
.button.primary{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:700;}
.button.primary:hover{background:var(--orange-dark);color:#fff;border-color:var(--orange-dark);}
.button.ghost,.wrapper .button:not(.primary){background:#fff;color:var(--blue) !important;box-shadow:inset 0 0 0 2px var(--blue);font-weight:700;}
.button.ghost:hover,.wrapper .button:not(.primary):hover{background:var(--blue);color:#fff !important;box-shadow:inset 0 0 0 2px var(--blue);}
.spotlight .content ul.actions li > .button,.wrapper .container ul.actions li > .button{width:auto;min-width:0;padding:0 1.6em;}
@media (max-width:480px){.spotlight .content ul.actions li > .button,.wrapper .container ul.actions li > .button{width:100%;}}

/* ============ HERO (Travel-Stil: heller Verlauf, Split-Layout, Foto-Collage) ============ */
#banner{
	background:linear-gradient(135deg,#F5F3FF 0%,#EFF6FF 45%,#FFFFFF 100%);
	background-attachment:scroll;
	min-height:auto;
	text-align:left;
	box-shadow:none;
}
#banner:before{display:none;}
#banner:after{display:none;}
#banner .content{
	display:flex;
	align-items:center;
	gap:3.5rem;
	max-width:1180px;
	margin:0 auto;
	padding:9em 2rem 6em;
	text-align:left;
}
#banner .hero-copy{flex:1 1 50%;min-width:0;}
.badge-trust{
	display:inline-block;
	background:#fff;
	border:1px solid var(--border);
	color:var(--orange-dark);
	font-size:.8rem;
	font-weight:700;
	padding:.45em 1em;
	border-radius:999px;
	box-shadow:var(--card-shadow);
	margin-bottom:1.1rem;
}
#banner .hero-copy h1{
	font-size:2.9rem;
	line-height:1.08;
	margin:0 0 .6rem;
	color:var(--ink);
}
#banner .hero-copy > p{
	font-size:1.15rem;
	color:var(--muted);
	max-width:38ch;
	margin:0 0 1.6rem;
}
.quick-picker{
	background:#fff;
	border:1px solid var(--border);
	border-radius:16px;
	box-shadow:var(--card-shadow);
	padding:1.1rem 1.2rem;
	max-width:480px;
	margin-bottom:1.6rem;
}
.quick-picker label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:.5rem;}
.quick-picker-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.quick-picker-row select{
	flex:1 1 200px;
	min-width:0;
	border:1px solid var(--border);
	border-radius:8px;
	padding:.6em .7em;
	font-family:inherit;
	font-size:.95rem;
	font-weight:600;
	color:var(--ink);
	background:#fff;
}
.quick-picker-row .button{margin:0;flex:0 0 auto;}
.stat-row{display:flex;gap:2rem;flex-wrap:wrap;}
.stat-row .stat{display:flex;flex-direction:column;}
.stat-row .stat b{font-size:1.6rem;font-weight:800;color:var(--ink);line-height:1.1;}
.stat-row .stat span{font-size:.8rem;color:var(--muted);font-weight:600;}

.hero-actions{margin-top:1.5rem;flex-wrap:wrap;gap:.6rem;}
.hero-actions li > .button{width:auto;min-width:0;padding:0 1.1em;font-size:.8rem;letter-spacing:0;white-space:nowrap;}
.hero-collage{flex:1 1 50%;min-width:0;position:relative;}
.collage-grid{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	grid-template-rows:1fr 1fr;
	gap:.9rem;
	height:420px;
}
.collage-grid .c-item{display:block;border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow);}
.collage-grid .c-item img{width:100%;height:100%;object-fit:cover;display:block;}
.collage-grid .c-big{grid-row:1 / 3;}
.collage-float{
	position:absolute;
	left:1.2rem;
	bottom:1.2rem;
	background:#fff;
	border-radius:12px;
	box-shadow:var(--card-shadow);
	padding:.45em .75em;
	font-size:.7rem;
	line-height:1.25;
	font-weight:700;
	color:var(--ink);
	/* Breite hart deckeln, damit der Badge nicht ins rechte Collage-Bild ragt.
	   min(): auf schmalen Layouts begrenzt 46% (bleibt im großen linken Bild),
	   auf breiten 13.5rem. Bei Bedarf bricht der Text auf 2 Zeilen um. */
	max-width:min(13.5rem,46%);
}
#banner .goto-next:before{filter:invert(1);}

@media (max-width:980px){
	#banner .content{flex-direction:column;padding:7em 1.5em 4em;text-align:center;}
	#banner .hero-copy{text-align:center;}
	#banner .hero-copy > p{margin-left:auto;margin-right:auto;}
	.quick-picker{margin-left:auto;margin-right:auto;}
	.stat-row{justify-content:center;}
	.hero-collage{width:100%;}
	.collage-grid{height:320px;}
	.collage-float{left:50%;transform:translateX(-50%);white-space:normal;text-align:center;max-width:80%;}
}
@media (max-width:736px){
	#banner .content{padding:6em 1.25em 3em;}
	#banner .hero-copy h1{font-size:2rem;}
	.collage-grid{height:260px;grid-template-columns:1fr 1fr;}
}

/* ============ Wohnungs-Karten (Destinations-Muster) ============ */
.apt-section{padding-bottom:0;}
.apt-intro{max-width:820px;margin:0 auto 1rem;color:var(--muted);font-size:1.02rem;line-height:1.6;}
/* Monteurseite: durchgängig moderatere Sektionsabstände (zwei wrapper stapeln sonst 6em+4em).
   Gescoped über body.monteur-page, damit die Startseite unberührt bleibt (#faq existiert dort auch!). */
.monteur-page .wrapper{padding-top:3em;padding-bottom:2em;}
.monteur-page .apt-section{padding-bottom:0;}
.monteur-page #warum{padding-bottom:1em;}
/* Monteurseite #warum: Einleitungstext und die folgende Icon-Box standen zu dicht
   beieinander (nur ~1rem). Mehr Luft zwischen letztem Absatz und Icon-Grid. */
.monteur-page #warum .box.alt{margin-top:2.5em;}
.apt-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.75rem;
	margin-top:2rem;
}
.apt-card{
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:var(--card-shadow);
	display:flex;
	flex-direction:column;
}
.apt-media{position:relative;height:210px;}
.apt-media img{width:100%;height:100%;object-fit:cover;display:block;}
.price-badge{
	position:absolute;
	top:.9rem;
	right:.9rem;
	background:#fff;
	color:var(--orange-dark);
	font-weight:700;
	font-size:.8rem;
	padding:.4em .8em;
	border-radius:999px;
	box-shadow:0 4px 12px rgba(15,23,42,.15);
}
.apt-body{padding:1.5rem;text-align:left;flex:1;display:flex;flex-direction:column;}
.apt-body h3{margin:0 0 .4rem;font-size:1.25rem;}
.apt-chips{color:var(--blue);font-weight:700;font-size:.85rem;margin:0 0 .8rem;}
/* Nur auf Karten mit Adresszeile (Erwitte/Lippstadt-Seiten): direkt unter .apt-chips,
   zieht sich per negativem Top-Margin näher heran, ohne .apt-chips selbst zu verändern
   (das würde auch die bestehende BWK-Monteurkarte ohne Adresszeile beeinflussen). */
.apt-chips + .apt-address{margin-top:-.6rem;}
.apt-address{color:var(--muted);font-weight:600;font-size:.8rem;margin:0 0 .8rem;}
.apt-body p:not(.apt-chips){color:var(--muted);font-size:.92rem;line-height:1.55;flex:1;}
.apt-body .actions{margin:1.1rem 0 0;padding-left:0;flex-wrap:nowrap;gap:.5rem;}
.apt-body .actions li{padding-left:0;margin:0;}
/* Beide Buttons in EINER Zeile: Auto-Breite, kompaktere Schrift/Padding, kein Umbruch */
.apt-body .actions li > .button{width:auto;min-width:0;padding:0 1em;font-size:.8rem;letter-spacing:0;white-space:nowrap;}
/* Kleine 2er-Foto-Reihe in der Ute-Karte (echte Zimmerfotos, z.B. Einzelbetten) */
.apt-gallery-mini{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 1.1rem;flex:none;}
.apt-gallery-mini img{width:100%;height:130px;object-fit:cover;border-radius:10px;display:block;box-shadow:var(--card-shadow);}
/* 3 Spalten erst ab 1200px (sonst Karten zu schmal → Buttons passen nicht in eine Zeile) */
@media (max-width:1200px){.apt-grid{grid-template-columns:1fr 1fr;}}
/* Monteurseite BWK: 2 Wohnungen → immer 2-spaltig, zentriert */
.apt-grid-2{grid-template-columns:1fr 1fr;max-width:920px;margin-left:auto;margin-right:auto;}
/* Monteurseiten Erwitte/Lippstadt: nur Ute → eine zentrierte Karte, schmaler als volle Breite */
.apt-grid-1{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto;}
@media (max-width:640px){.apt-grid{grid-template-columns:1fr;}}

/* Slider (Splide) */
.gal-apt{margin-bottom:2.75rem;}
.gal-apt h3{margin-bottom:.7rem;}
.splide__slide img{width:100%;height:300px;object-fit:cover;border-radius:6px;display:block;}
@media (max-width:736px){.splide__slide img{height:210px;}}

/* Ausstattung – Icon-Akzent (main.css zeichnet Glyph in Kreisfarbe + weißem Halo als Kontur;
   hier: helle Kreise + Glyph direkt in Blau, Halo entfernt) – gilt für index (#four) und monteur (#warum/#konditionen) */
.container .icon.major.alt{background:#EFF6FF;}
.container .icon.major.alt:before{color:var(--blue) !important;text-shadow:none !important;}

/* Preis-Karte */
.price-card{background:#fff;border-radius:16px;box-shadow:var(--card-shadow);padding:1.75rem;}
.price-note{margin:1.2rem 0 0;color:var(--muted);}
table thead th{background:var(--tint);color:var(--ink);}

/* Monteurseite: Einzugsgebiet-Tabelle */
.mw-table{width:100%;border-collapse:collapse;}
.mw-table th,.mw-table td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--border);}
.mw-table td:nth-child(2){white-space:nowrap;color:var(--blue);font-weight:700;}

/* Testimonials (vorbereitet für spätere Aktivierung) */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;}
.testi-card{background:#fff;border-radius:16px;box-shadow:var(--card-shadow);padding:1.5rem;text-align:left;}
.testi-card p{font-style:italic;color:var(--ink);}
.testi-card footer{margin-top:.8rem;font-size:.85rem;color:var(--muted);}
@media (max-width:736px){.testi-grid{grid-template-columns:1fr;}}

/* Abschluss-CTA-Band (#contact) */
.cta-band{
	background:linear-gradient(135deg,#EDE9FE 0%,#FCE7F3 50%,#FFEDD5 100%);
}
.cta-band .container > p{color:var(--muted);}
.contact-card{
	background:#fff;
	border-radius:18px;
	box-shadow:var(--card-shadow);
	padding:2rem;
	max-width:680px;
	margin:2.5rem auto 0;
	text-align:left;
}

/* Kontaktformular */
#contactForm input,#contactForm select,#contactForm textarea{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:.65rem .9rem;font-family:inherit;font-size:1rem;font-weight:500;}
#contactForm input:focus,#contactForm select:focus,#contactForm textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.18);}
#contactForm textarea{resize:vertical;}
#contactForm select{appearance:auto;}
#contactForm #cf-success{color:#15803D;}

/* Footer */
#footer{background:#fff;}
#footer .footer-contact{margin-bottom:1.4rem;font-size:.9rem;line-height:1.8;color:var(--muted);}
#footer .footer-contact a{color:var(--blue);text-decoration:underline;}
#footer .footer-contact strong{font-weight:700;color:var(--ink);}
#footer .copyright li{color:var(--muted);}
#footer .copyright li a{color:var(--blue);}
/* WP: Plugin "Simple Custom CSS and JS" schleust site-weit ein Inline-<style> mit
   ".copyright a{display:none;}" ein (Rest für die alte Seite) -> versteckt unsere
   Footer-Links (Datenschutzerklärung, HTML5-UP-Credit) komplett. Erzwingen. */
#footer .copyright a{display:inline !important;}

/* ============ Lesbarkeit-Fixes ============
   Vorlage setzt strong/b, label und Platzhalter auf WEISS (für dunklen Hintergrund gedacht).
   Auf den neuen hellen Sektionen korrigieren. */
.wrapper .container strong,.wrapper .container b{color:var(--ink);font-weight:700;}
#faq .box.alt,#faq .box.alt p{color:var(--ink);}
#contactForm label,#contact label{color:var(--ink);}
/* Formular-Platzhalter (Vorlage nutzt weiß + !important) – getrennte Regeln je Browser-Präfix */
#contactForm input::placeholder,#contactForm textarea::placeholder{color:#94A3B8 !important;opacity:1;}
#contactForm input::-webkit-input-placeholder,#contactForm textarea::-webkit-input-placeholder{color:#94A3B8 !important;opacity:1;}
#contactForm input:-ms-input-placeholder,#contactForm textarea:-ms-input-placeholder{color:#94A3B8 !important;opacity:1;}
/* Leere erste Select-Option wie ein Platzhalter grau */
#contactForm select{color:var(--ink);}

/* ============ Video-Einbettung (Ferienwohnung Helga, in Galerie) ============ */
.video-embed{
	position:relative;
	width:100%;
	max-width:640px;
	aspect-ratio:16/9;
	margin:1.5rem auto 0;
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--card-shadow);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ============ Standort-Karten (Google Maps je Wohnung, in "Lage") ============ */
.location-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.5rem;
	margin-top:3rem;
	text-align:left;
}
.location-card{
	background:#fff;
	border-radius:16px;
	box-shadow:var(--card-shadow);
	overflow:hidden;
	padding:1.25rem 1.25rem 0;
}
.location-card h3{margin:0 0 .3rem;font-size:1.05rem;}
.location-card .location-address{margin:0 0 1rem;color:var(--muted);font-size:.85rem;font-weight:600;}
.location-card iframe{
	width:100%;
	height:200px;
	border:0;
	border-radius:8px 8px 0 0;
	display:block;
	margin:0 -1.25rem;
	width:calc(100% + 2.5rem);
}
@media (max-width:900px){.location-grid{grid-template-columns:1fr;}}