/* ==========================================================================
   ec-satz.css – Seitengestaltung Ebeling Consulting v18 (P16 B4, 29.10.2026; B9 Abstände, B10 Hero 30.10.2026)
   Setzt die bestehenden Seiten in den gemeinsamen Satz: Farben, Schriften,
   Größen und Radien kommen aus tokens.css (B2). Keine Texte, keine Logik.
   Wird NACH dem eingebetteten Seiten-Stylesheet geladen und überschreibt es.
   Kein Aufruf externer Server.
   ========================================================================== */

/* ---------- Alte Variablen auf die Marken-Tokens umlegen ---------- */
:root{
  --ec-blue:var(--ec-petrol);
  --ec-blue-d:var(--ec-petrol-dunkel);
  --ec-teal:var(--ec-petrol);          /* altes Türkis entfällt */
  --ec-ink:var(--tinte);
  --ec-body:var(--tinte);
  --ec-muted:var(--tinte-2);
  --ec-bg:var(--kalkstein);
  --ec-card:var(--weiss);
  --ec-line:var(--linie);              /* nur dekorative Linien */
  --ec-grad:var(--ec-petrol);          /* kein Verlauf mehr */
  --ec-radius:var(--radius-lg);
  --ec-radius-sm:var(--radius-md);
  --ec-shadow:0 6px 20px rgba(30,37,40,.07);
  --ec-wrap:var(--inhalt-max);
}

body{background:var(--farbe-grund);}

/* ---------- Grundschrift ---------- */
.ec-scope{font-family:var(--schrift-text);font-size:var(--groesse-text);line-height:var(--zeile-text);color:var(--farbe-text);}
.ec-scope a:not(.ec-btn){color:var(--farbe-link);text-decoration:underline;text-underline-offset:2px;}
.ec-wrap{padding:0 var(--space-6);}
.ec-ic{stroke-width:var(--symbol-strich);}

/* Wortmarke bleibt wie live (eigene Schrift des Logos) */
.ec-logo-name{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
.ec-scope a.ec-logo{text-decoration:none;}

/* ---------- Überschriften: Source Serif 4 ---------- */
.ec-h1,.ec-h2,.ec-scope h1,.ec-scope h2,.ec-scope h3{font-family:var(--schrift-ueberschrift);font-weight:600;letter-spacing:0;color:var(--farbe-text);}
.ec-h1{font-size:var(--groesse-h1);line-height:var(--zeile-h1);}
.ec-h1 .ec-accent{color:var(--farbe-akzent);}
.ec-h2{font-size:var(--groesse-h2);line-height:var(--zeile-h2);}
.ec-card h3,.ec-service-card h3{font-size:var(--groesse-h3);line-height:var(--zeile-h3);}
.ec-hero-card h3{font-size:22px;line-height:var(--zeile-h3);}

/* ---------- Buttons: 52 px, keine Pillen ---------- */
.ec-btn{font-family:var(--schrift-text);font-weight:var(--gewicht-button);font-size:var(--groesse-button);line-height:1.2;min-height:var(--button-hoehe);padding:12px 24px;border-radius:var(--radius-md);white-space:normal;}
.ec-btn-lg{padding:14px 28px;font-size:var(--groesse-button);}
.ec-btn-primary{background:var(--farbe-aktion);color:var(--farbe-aktion-text);}
.ec-btn-primary:hover{background:var(--farbe-aktion-hover);color:var(--farbe-aktion-text);transform:none;}
.ec-btn-ghost{background:var(--weiss);color:var(--farbe-link);border-color:var(--farbe-feldrand);}
.ec-btn-ghost:hover{border-color:var(--farbe-aktion);color:var(--farbe-aktion-hover);}
.ec-btn-light{background:var(--weiss);color:var(--ec-petrol);border-color:var(--weiss);}
.ec-btn-light:hover{background:var(--kalkstein);color:var(--ec-petrol-dunkel);border-color:var(--kalkstein);transform:none;}
.ec-btn:focus-visible,.ec-nav a:focus-visible,.ec-footer a:focus-visible,.ec-legal a:focus-visible,.ec-burger summary:focus-visible{outline:3px solid var(--ec-petrol);outline-offset:2px;}
.ec-footer a:focus-visible{outline-color:var(--ec-petrol-hell);}

/* ---------- Kopf ---------- */
.ec-header{background:var(--weiss);border-bottom:1px solid var(--linie);}
.ec-nav a{font-size:17px;color:var(--farbe-text);text-decoration:none!important;}
.ec-nav a:hover{color:var(--farbe-link);}
.ec-menu a{font-size:17px;text-decoration:none!important;}
.ec-burger summary{border-color:var(--farbe-feldrand);border-radius:var(--radius-md);width:48px;height:48px;}
.ec-nav{gap:22px;margin-left:12px;}
.ec-header .ec-wrap{max-width:1320px;}
.ec-header .ec-btn{min-height:var(--button-hoehe);padding:10px 16px;font-size:17px;}
/* Größere Schrift braucht mehr Platz: Menü-Knopf schon unter 1260 px (live: 1000 px) */
@media (max-width:1259px){.ec-nav,.ec-header-cta{display:none;}.ec-burger{display:block;margin-left:auto;position:relative;}.ec-burger summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--farbe-text);background:var(--weiss);border:1px solid var(--farbe-feldrand);}.ec-burger summary::-webkit-details-marker{display:none;}.ec-burger[open] .ec-menu{display:flex;}.ec-menu{display:none;flex-direction:column;gap:4px;position:absolute;right:0;top:56px;width:270px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);box-shadow:var(--ec-shadow);padding:12px;}.ec-menu a{padding:12px;border-radius:var(--radius-sm);color:var(--farbe-text);font-weight:500;}.ec-menu a:hover{background:var(--kalkstein);}.ec-menu .ec-btn{margin-top:6px;}}

/* ---------- Hero mit Porträt ---------- */
.ec-hero{background:var(--kalkstein);padding:var(--space-16) 0 56px;}
.ec-eyebrow{font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ec-petrol);background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-sm);}
.ec-eyebrow .ec-ic{width:18px;height:18px;}
.ec-lead{font-size:20px;color:var(--farbe-text);}
.ec-hero-note{font-size:var(--groesse-fussnote);color:var(--farbe-text-2);}
.ec-hero-side{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6);}
.ec-portrait{margin:0;}
.ec-portrait img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:var(--radius-lg);border:1px solid var(--linie);background:var(--sand);}
.ec-hero-card{border:1px solid var(--linie);border-radius:var(--radius-lg);box-shadow:none;}
.ec-quicklist li{font-size:17px;color:var(--farbe-text);border-top-color:var(--linie);}
.ec-tick{border-radius:var(--radius-sm);}

/* ---------- Vertrauensleiste ---------- */
.ec-trust{background:var(--weiss);border-color:var(--linie);}
.ec-trust-item .ec-ic{color:var(--ec-petrol);}
.ec-trust-item b{font-size:17px;color:var(--farbe-text);}
.ec-trust-item span{font-size:17px;color:var(--farbe-text-2);}

/* ---------- Abschnitte ---------- */
.ec-section{padding:var(--space-16) 0;}
.ec-section.alt{background:var(--sand);}
.ec-kicker{font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ec-petrol);}
.ec-h2-sub{font-size:19px;color:var(--farbe-text);}

.ec-card{border:1px solid var(--linie);border-radius:var(--radius-lg);}
.ec-card:hover{box-shadow:none;transform:none;border-color:var(--linie);}
.ec-card-ic{background:var(--ec-petrol);border-radius:var(--radius-md);}
.ec-card p{font-size:var(--groesse-text);color:var(--farbe-text);}
.ec-badge-soft{font-size:17px;color:var(--ec-petrol-dunkel);background:var(--kalkstein);border:1px solid var(--linie);border-radius:var(--radius-sm);}
.ec-baustein,.ec-chip{font-size:17px;color:var(--farbe-text);border-color:var(--linie);border-radius:var(--radius-md);}
.ec-baustein .ec-ic,.ec-chip .ec-ic,.ec-qual .ec-ic{color:var(--ec-petrol);}
.ec-soft-note{font-size:17px;color:var(--farbe-text-2);border:1px solid var(--linie);border-radius:var(--radius-md);background:var(--weiss);}
.ec-service-card{border-color:var(--linie);border-radius:var(--radius-lg);}
.ec-service-card .ec-si{background:var(--kalkstein);color:var(--ec-petrol);border-radius:var(--radius-md);}
.ec-service-card p{font-size:17px;color:var(--farbe-text);}

/* Über mich – Porträt steht jetzt oben im Hero */
.ec-about-ohne-foto{grid-template-columns:1fr;max-width:46em;}
.ec-about p{font-size:var(--groesse-text);color:var(--farbe-text);}
.ec-qual{font-size:17px;color:var(--farbe-text);}

/* FAQ: Pfeil statt Pluszeichen */
.ec-acc{border-color:var(--linie);border-radius:var(--radius-md);}
.ec-acc summary{font-size:var(--groesse-text);color:var(--farbe-text);min-height:var(--touch-min);}
.ec-acc summary::after,.ec-acc[open] summary::after{content:"";font-size:0;width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--ec-petrol);border-bottom:2px solid var(--ec-petrol);transform:rotate(45deg);margin:0 4px 4px 0;}
.ec-acc[open] summary::after{transform:rotate(225deg);margin:4px 4px 0 0;}
.ec-acc .ec-acc-body{font-size:17px;color:var(--farbe-text);}

/* Kontaktband: Petrol-Fläche, helle Buttons */
.ec-cta{background:var(--ec-petrol);border-radius:var(--radius-lg);}
.ec-cta h2{font-family:var(--schrift-ueberschrift);font-weight:600;font-size:28px;color:var(--weiss);}
.ec-cta p{font-size:var(--groesse-text);color:var(--weiss);}

/* ---------- Fuß: dunkler Grund ---------- */
.ec-footer{background:var(--farbe-dunkel);color:var(--farbe-text-auf-dunkel);font-size:17px;}
.ec-footer.ec-scope a:not(.ec-btn){color:var(--farbe-akzent-auf-dunkel);text-decoration:none;}
.ec-footer.ec-scope a:not(.ec-btn):hover{color:var(--weiss);text-decoration:underline;}
.ec-foot-blurb{color:var(--farbe-text-auf-dunkel);}
.ec-foot-contact .ec-ic{color:var(--farbe-akzent-auf-dunkel);}
.ec-foot-contact li.ec-foot-zeiten{display:block;padding-left:28px;margin:-4px 0 12px;font-size:17px;line-height:1.5;color:var(--farbe-text-auf-dunkel);}
.ec-foot-h{font-size:17px;color:var(--weiss);letter-spacing:.02em;text-transform:none;}
.ec-foot-legal{font-size:17px;color:var(--farbe-text-auf-dunkel);}
.ec-foot-legal b{color:var(--weiss);}
.ec-foot-bottom{font-size:17px;color:var(--farbe-text-auf-dunkel);border-top-color:rgba(246,243,238,.2);}
.ec-foot-bottom a{color:var(--farbe-akzent-auf-dunkel);}

/* ---------- Rechtstexte ---------- */
.ec-legal h1{font-size:var(--groesse-h2);line-height:var(--zeile-h2);}
.ec-legal h2{font-size:var(--groesse-h3);line-height:var(--zeile-h3);margin:36px 0 10px;}
.ec-legal h3{font-size:20px;line-height:var(--zeile-h3);}
.ec-legal p,.ec-legal li{font-size:var(--groesse-text);color:var(--farbe-text);}
.ec-legal-sub,.ec-legal-stand{font-size:var(--groesse-fussnote);color:var(--farbe-text-2);}
.ec-legal-box{background:var(--weiss);border-color:var(--linie);border-radius:var(--radius-lg);}
.ec-dl{font-size:17px;}
.ec-dl dt{color:var(--farbe-text-2);}
.ec-dl dd{color:var(--farbe-text);}

/* ---------- Formulare ---------- */
.ec-field>label{font-size:17px;color:var(--farbe-text);}
.ec-field input[type=text],.ec-field input[type=email],.ec-field input[type=tel],.ec-field input[type=date],.ec-field textarea,.ec-field select{font-size:var(--groesse-text);min-height:var(--button-hoehe);border:1px solid var(--farbe-feldrand);border-radius:var(--radius-md);color:var(--farbe-text);}
.ec-field input[type=file]{font-size:17px;border:1px dashed var(--farbe-feldrand);border-radius:var(--radius-md);}
.ec-field input:focus,.ec-field textarea:focus,.ec-field select:focus{outline:3px solid var(--ec-petrol);outline-offset:1px;border-color:var(--ec-petrol);}
.ec-check,.ec-consent{font-size:17px;color:var(--farbe-text);}
.ec-form-note{font-size:17px;color:var(--farbe-text-2);}
.ec-form-msg,.ec-form-warn,.ec-form-ok{font-size:17px;border-radius:var(--radius-md);}
/* Datei-Upload (kontakt.php, schaden.php) */
.ec-field input.ec-fileinput{width:1px;min-height:0;padding:0;border:0;}  /* Altfehler live: unsichtbares Feld lief über den Rand (waagerechtes Scrollen) */
.ec-filebtn{font-family:var(--schrift-text);font-size:17px;font-weight:700;min-height:var(--touch-min);padding:10px 18px;border:1px solid var(--farbe-feldrand);border-radius:var(--radius-md);color:var(--farbe-link);}
.ec-filebtn:hover{border-color:var(--farbe-aktion);color:var(--farbe-aktion-hover);}
.ec-fileinput:focus-visible+.ec-filebtn{outline:3px solid var(--ec-petrol);}
.ec-filename,.ec-filehint{font-size:17px;color:var(--farbe-text-2);}
.ec-form-sec{font-family:var(--schrift-ueberschrift);font-size:20px;font-weight:600;color:var(--farbe-text);}
.art-dyn{background:var(--kalkstein);border-color:var(--linie);border-radius:var(--radius-md);}
.ec-legal [style*="font-size:13"],.ec-legal [style*="font-size:14"]{font-size:var(--groesse-fussnote)!important;color:var(--farbe-text-2)!important;}

/* ---------- Bewertungsleiste (eigene bewertung.php) ---------- */
body #pe-leiste{--pe-marke:var(--ec-petrol);--pe-text:var(--tinte);--pe-grau:var(--tinte-2);--pe-linie:var(--linie);font-family:var(--schrift-text);font-size:17px;}
body #pe-leiste .pe-info,body #pe-leiste .pe-text{font-size:17px;}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .ec-portrait img{max-width:240px;margin:0;}
}
@media (max-width:600px){
  .ec-wrap{padding:0 var(--space-4);}
  .ec-h1,.ec-h2,.ec-legal h1,.ec-legal h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
  .ec-h2{font-size:26px;}
  .ec-cta h2{font-size:24px;}
  .ec-cta{padding:28px 20px;}
  .ec-hero{padding:40px 0 40px;}
  .ec-lead{font-size:19px;}
  .ec-legal h1{font-size:28px;}
  .ec-legal h2{font-size:22px;}
}

/* B7 (29.10.2026): Registernummern und Telefonnummern nie mitten in der Nummer umbrechen */
.ec-nowrap,a[href^="tel:"]{white-space:nowrap;}

/* ==========================================================================
   B9 (30.10.2026): Feinschliff Abstände Startseite – nur margin, padding, gap,
   max-width, Ausrichtung. Werte aus der Abstands-Skala (tokens.css).
   ========================================================================== */

/* B9-1 Vertrauensleiste: Innenabstand oben/unten (.ec-wrap hatte ihn auf 0 gesetzt) */
.ec-trust .ec-trust-grid{padding-top:var(--space-6);padding-bottom:var(--space-6);}

/* B9-2 Abstände über Absätzen: „.ec-scope p“ setzte margin-top auf 0 */
.ec-scope .ec-hero-note{margin-top:var(--space-6);}
.ec-scope .ec-soft-note{margin-top:var(--space-6);}
.ec-scope .ec-foot-blurb{margin-top:var(--space-4);}
.ec-scope .ec-legal-stand{margin-top:var(--space-8);}
.ec-scope .ec-form-note{margin-top:var(--space-2);}

/* B9-3 Kästchen „Rund ums Haus“ / „Weitere Versicherungen“: Raster statt Fließreihe,
   damit lange Wörter nicht über den Rand laufen (3 / 2 / 1 Spalten) */
.ec-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-3);}
.ec-chip{min-width:0;}

/* B9-4 Häufige Fragen → Kontaktband: kein doppelter Abschnittsabstand */
#kontakt.ec-section{padding-top:0;}

/* B9-5 FAQ-Antworten: lesbare Zeilenlänge */
.ec-acc .ec-acc-body>*{max-width:var(--zeilenlaenge-max);}

/* B9-8 Haken in „Alles rund um Ihre Immobilie“ mittig zur ersten Zeile */
.ec-tick{margin-top:var(--space-1);}

@media (max-width:980px){
  /* B9-7 Fuß: Tippflächen mind. 44 px (einspaltig) */
  .ec-foot-nav li{margin-bottom:0;}
  .ec-foot-nav a{display:inline-block;padding:var(--space-3) 0;}
  .ec-foot-contact li{min-height:var(--touch-min);margin-bottom:0;}
  /* B9-7 Bewertungsleiste: Tippflächen ⓘ und × mind. 44 px, Leiste bleibt gleich hoch */
  body #pe-leiste .pe-in{padding-right:var(--space-12);}
  body #pe-leiste .pe-info{padding:var(--space-3) var(--space-4);margin:calc(-1 * var(--space-2)) 0;}
  body #pe-leiste .pe-zu{right:0;padding:var(--space-3) var(--space-4);}
}
@media (max-width:600px){
  /* B9-6 Buttons mobil bündig in voller Breite */
  .ec-hero-actions .ec-btn,.ec-cta-actions .ec-btn{flex:1 1 100%;}
  .ec-cta-actions{width:100%;}
}

/* ==========================================================================
   B10 (30.10.2026): Hero – drei Spalten (Text | Foto | Kundenkarte), oben bündig,
   bei allen Desktop-Größen ab 650 px Fensterhöhe vollständig über der
   Bewertungsleiste. Foto und Karte gleich breit (290 px), Hero und
   Vertrauensleiste so breit wie die Kopfzeile (1320 px).
   ========================================================================== */
.ec-hero{padding:var(--space-8) 0 var(--space-12);}
@media (min-height:800px){.ec-hero{padding-top:var(--space-12);}}
@media (max-height:699px){.ec-hero{padding-top:var(--space-6);}}
.ec-hero-grid{align-items:start;}
.ec-scope .ec-hero-note{margin-bottom:0;}

/* Kundenkarte „Für meine Kundinnen und Kunden“ */
.ec-kundenkarte .ec-quicklist li{padding:var(--space-3) 0;}
.ec-scope .ec-kundenkarte .ec-quicklist a{display:flex;gap:var(--space-3);align-items:flex-start;width:100%;min-height:var(--touch-min);color:var(--farbe-text);text-decoration:none;white-space:normal;}
.ec-scope .ec-kundenkarte .ec-quicklist a:focus-visible{outline:3px solid var(--ec-petrol);outline-offset:2px;border-radius:var(--radius-sm);}
.ec-kundenkarte .ec-quicklist b{display:block;color:var(--farbe-link);font-weight:700;}
.ec-kundenkarte .ec-quicklist a[href^="tel:"] b{white-space:nowrap;}
.ec-kundenkarte .ec-quicklist a:hover b{text-decoration:underline;}
.ec-kundenkarte .ec-quicklist small{display:block;font-size:var(--groesse-fussnote);line-height:var(--zeile-fussnote);color:var(--farbe-text-2);}
.ec-kundenkarte .ec-tick{width:var(--space-8);height:var(--space-8);margin-top:0;}
.ec-kundenkarte .ec-tick .ec-ic{width:18px;height:18px;stroke-width:2;}

/* Desktop ab 1260 px (Kopfzeile mit Menü): Text | Foto | Karte */
@media (min-width:1260px){
  .ec-hero .ec-wrap,.ec-trust .ec-wrap{max-width:1320px;}
  /* B11 (30.10.2026): zweite Spalte fest = Foto 290 px + Abstand + Karte 290 px.
     Mit „auto“ rechnet WebKit/Safari die Spalte nach dem Inhalt statt nach
     flex-basis (Foto absolut positioniert = 0 px) – die Karte lief rechts aus dem Fenster. */
  .ec-hero-grid{grid-template-columns:minmax(0,1fr) calc(2 * 290px + var(--space-6));column-gap:var(--space-8);align-items:stretch;}
  .ec-hero-side{flex-direction:row;align-items:stretch;gap:var(--space-6);}
  .ec-portrait{position:relative;flex:0 0 290px;}
  .ec-portrait img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 20%;}
  .ec-hero-card{flex:0 0 290px;padding:var(--space-6);}
  .ec-kundenkarte .ec-quicklist li{padding:var(--space-2) 0;}
}
/* Tablet und schmale Fenster: Text, darunter Foto und Karte nebeneinander */
@media (min-width:601px) and (max-width:1259px){
  .ec-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8);}
  .ec-hero-side{flex-direction:row;align-items:stretch;gap:var(--space-6);}
  .ec-portrait{position:relative;flex:0 0 240px;}
  .ec-portrait img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 20%;}
  .ec-hero-card{flex:1 1 auto;}
}
/* Niedrige Fenster (650–699 px, z. B. 13"-Laptop mit Taskleiste): Karte etwas dichter */
@media (min-width:1260px) and (max-height:699px){
  .ec-hero-card{padding:var(--space-4) var(--space-6);}
  .ec-kundenkarte .ec-quicklist li{padding:var(--space-1) 0;}
}
/* Mobil: Kundenkarte vor dem Foto */
@media (max-width:600px){
  .ec-hero-card{order:-1;}
}

/* B10 Anordnung übrige Seite */
/* „Über mich“ an der linken Kante der übrigen Abschnitte, Textbreite bleibt begrenzt */
.ec-about-ohne-foto{max-width:var(--ec-wrap);}
.ec-about-ohne-foto>div{max-width:46em;}
/* „Weitere Versicherungen“: vier Kästchen in einer Reihe (kein einzelnes in Zeile 2) */
@media (min-width:981px){#weitere .ec-chips{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* Bausteine Wohngebäude als Raster 3 × 2 bzw. 2 × 3 (kein einzelner Baustein in Zeile 2) */
@media (min-width:601px){.ec-bausteine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}}
@media (min-width:981px){.ec-bausteine{grid-template-columns:repeat(3,minmax(0,1fr));}}