/**
 * Berlin Builders — Gestaltung.
 *
 * Die Leute, die hier landen, haben meist keinen schönen Anlass: ein Todesfall,
 * eine Kündigung, ein Umzug unter Druck. Die Seite soll ruhig wirken und schnell
 * zur Sache kommen — kein Hochglanz, keine Versprechen, große Schaltflächen.
 *
 * Farben aus dem Logo: Graphit, Ocker, Creme.
 */

:root{
  --grund:#F7F5F1;
  --flaeche:#FFFFFF;
  --tief:#22282B;
  --schrift:#1D2225;
  --schrift-2:#4E585C;
  --schrift-3:#798388;
  --linie:#E2DED6;
  --akzent:#B96B25;
  --akzent-dunkel:#96551B;
  --akzent-wash:#FBF0E4;
  --gut:#3D7A4A;

  --breit:1080px;
  --schmal:660px;
  --r:12px;
  --schatten:0 1px 2px rgba(29,34,37,.05), 0 12px 30px -22px rgba(29,34,37,.5);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#15181A; --flaeche:#1D2224; --tief:#0F1214;
    --schrift:#ECEFEC; --schrift-2:#AEB6B9; --schrift-3:#828B8F;
    --linie:#2C3235; --akzent:#E08A3C; --akzent-dunkel:#F0A45F; --akzent-wash:#2A1F14;
    --gut:#6FAE7F;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -24px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--grund); color:var(--schrift);
  font-family:var(--sans); font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

.bahn{max-width:var(--breit); margin:0 auto; padding:0 20px}
.eng{max-width:var(--schmal)}

h1,h2,h3{line-height:1.14; letter-spacing:-.025em; text-wrap:balance; margin:0}
h1{font-size:clamp(31px,6.2vw,50px); font-weight:800}
h2{font-size:clamp(25px,4.2vw,34px); font-weight:750; margin:0 0 14px}
h3{font-size:20px; font-weight:700; margin:0 0 6px}
p{margin:0 0 16px; text-wrap:pretty}
a{color:var(--akzent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--akzent); outline-offset:3px; border-radius:4px}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--grund) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--linie);
}
.kopf .bahn{display:flex; align-items:center; gap:16px; min-height:66px}
.marke{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; font-weight:800;
       letter-spacing:-.02em; font-size:18px; margin-inline-end:auto}
.marke .zeichen{
  width:34px; height:34px; border-radius:7px; background:var(--tief); color:#F2EDE4;
  display:grid; place-items:center; font-size:12.5px; font-weight:800; letter-spacing:.5px;
}
.kopf .ruf{
  display:inline-flex; align-items:center; gap:8px; background:var(--akzent); color:#fff;
  text-decoration:none; font-weight:700; padding:11px 18px; border-radius:99px; font-size:16px;
  white-space:nowrap;
}
.kopf .ruf:hover{background:var(--akzent-dunkel)}

/* ---------- Aufmacher ---------- */
.auf{padding:clamp(44px,7vw,84px) 0 clamp(34px,5vw,60px)}
.auf p.vor{
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent); margin:0 0 18px; font-weight:600;
}
.auf .unter{font-size:clamp(18px,2.4vw,21px); color:var(--schrift-2); max-width:56ch; margin:20px 0 30px}
.knopfreihe{display:flex; flex-wrap:wrap; gap:12px}
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 26px; border-radius:99px; text-decoration:none; font-weight:700; font-size:17px;
  border:1px solid transparent; min-height:56px; cursor:pointer;
}
.knopf.voll{background:var(--akzent); color:#fff}
.knopf.voll:hover{background:var(--akzent-dunkel)}
.knopf.leer{background:var(--flaeche); color:var(--schrift); border-color:var(--linie)}
.knopf.leer:hover{border-color:var(--akzent); color:var(--akzent)}

/* ---------- Merkmalsleiste ---------- */
.merkmale{
  display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie);
  border-radius:var(--r); overflow:hidden; margin:38px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.merkmale div{background:var(--flaeche); padding:20px 22px}
.merkmale b{display:block; font-size:16.5px; margin-bottom:3px}
.merkmale span{font-size:15px; color:var(--schrift-2)}

/* ---------- Abschnitte ---------- */
section{padding:clamp(44px,6vw,74px) 0}
section.hell{background:var(--flaeche); border-block:1px solid var(--linie)}
.einleit{color:var(--schrift-2); font-size:18.5px; max-width:58ch; margin:0 0 30px}

/* ---------- Leistungen ---------- */
.leistungen{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:0}
.leistungen article{
  background:var(--grund); border:1px solid var(--linie); border-radius:var(--r); padding:22px 24px;
}
section.hell .leistungen article{background:var(--grund)}
.leistungen h3{font-size:18px; margin-bottom:5px}
.leistungen p{font-size:15.5px; color:var(--schrift-2); margin:0}

/* ---------- Der Unterschied ---------- */
.unterschied{
  background:var(--tief); color:#F2EDE4; border-radius:var(--r); padding:clamp(28px,4vw,44px);
}
.unterschied h2{color:#fff}
.unterschied p{color:#CDD3D2; max-width:56ch}
.unterschied .zahl{
  font-size:clamp(34px,5vw,46px); font-weight:800; color:var(--akzent-dunkel);
  letter-spacing:-.03em; line-height:1;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .unterschied .zahl{color:#F0A45F} }

/* ---------- Ablauf ---------- */
ol.ablauf{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:16px}
ol.ablauf li{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r); padding:20px 22px;
}
section.hell ol.ablauf li{background:var(--grund)}
ol.ablauf li::before{
  content:counter(s); width:34px; height:34px; border-radius:99px; background:var(--akzent-wash);
  color:var(--akzent); display:grid; place-items:center; font-weight:800; font-size:16px;
}
ol.ablauf b{display:block; font-size:17.5px; margin-bottom:3px}
ol.ablauf span{color:var(--schrift-2); font-size:16px}

/* ---------- Kontakt ---------- */
.kontaktgitter{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
form{display:grid; gap:14px}
label{font-weight:650; font-size:15.5px; display:block; margin-bottom:5px}
input,textarea{
  width:100%; font:inherit; font-size:16.5px; padding:14px 15px; border-radius:10px;
  border:1px solid var(--linie); background:var(--flaeche); color:var(--schrift);
}
section.hell input, section.hell textarea{background:var(--grund)}
input:focus,textarea:focus{outline:2px solid var(--akzent); outline-offset:0; border-color:var(--akzent)}
textarea{min-height:120px; resize:vertical}
.pflichthinweis{font-size:14.5px; color:var(--schrift-3); margin:0}
.direkt{display:grid; gap:14px; align-content:start}
.direkt a{
  display:flex; align-items:center; gap:14px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); padding:18px 20px; text-decoration:none; color:var(--schrift);
}
section.hell .direkt a{background:var(--grund)}
.direkt a:hover{border-color:var(--akzent)}
.direkt b{display:block; font-size:17px}
.direkt span{font-size:15px; color:var(--schrift-2)}

/* ---------- Fuß ---------- */
footer{background:var(--tief); color:#B9C1C0; padding:44px 0 34px; font-size:15.5px}
footer a{color:#E2E6E4}
footer .reihen{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
footer b{color:#F2EDE4; display:block; margin-bottom:8px; font-size:16px}
footer .klein{margin-top:28px; padding-top:20px; border-top:1px solid #333B3E; font-size:14px; color:#8D9695}

/* ---------- Rechtstexte ---------- */
.recht{max-width:var(--schmal); margin:0 auto; padding:44px 20px 70px}
.recht h1{font-size:clamp(27px,4.5vw,36px); margin-bottom:22px}
.recht h2{font-size:20px; margin:34px 0 10px}
.recht p, .recht li{color:var(--schrift-2); font-size:16.5px}
.recht .zurueck{display:inline-block; margin-bottom:26px; font-weight:650; text-decoration:none}

/* ---------- Schmale Bildschirme ----------
   Auf 375 Pixeln passen Markenzeile und Knopf nicht nebeneinander.
   Der Knopf hat Vorrang — er ist der Grund, warum die Seite existiert. */
@media (max-width:430px){
  .kopf .bahn{gap:10px; padding:0 14px}
  .marke{font-size:0}                     /* Schriftzug weg, Zeichen bleibt */
  .marke .zeichen{font-size:12.5px}
  .kopf .ruf{padding:11px 16px; font-size:15.5px}
  .bahn{padding:0 16px}
  .knopf{width:100%}
  .knopfreihe{flex-direction:column}
}
@media (max-width:360px){
  .kopf .ruf{padding:10px 13px; font-size:14.5px}
}

/* ---------- Nummer in der Kopfzeile ----------
   Bei örtlichen Diensten wird angerufen, nicht geschrieben. Auf breiten
   Bildschirmen steht die Nummer deshalb direkt oben; auf schmalen fehlt der
   Platz, dort trägt der Knopf. */
.tel-kopf{
  display:none; font-weight:700; font-size:16.5px; text-decoration:none;
  color:var(--schrift); white-space:nowrap;
}
.tel-kopf:hover{color:var(--akzent)}
@media (min-width:720px){ .tel-kopf{display:inline-block} }