/* temple-dienstleistungen.de
   Erzeugt von scripts/dienstleistungen-bauen.mjs. Aenderungen gehoeren in
   scripts/lib/dienst-stil.mjs, nicht in diese Datei. */

@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/marcellus-latin.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/schriften/karla-latin.woff2') format('woff2');}

:root{
  --grund:#F4F2EC;
  --grund-2:#E8E5DC;
  --weiss:#FFFFFF;
  --tinte:#18212A;
  --tinte-2:#53606B;
  --dunkel:#12212A;
  --dunkel-2:#1B313E;
  --akzent:#2C6079;
  --akzent-tief:#1F4A5E;
  --akzent-hell:#8FC3DC;
  --linie:rgba(24,33,42,.14);
  --linie-hell:rgba(244,242,236,.20);
  --breit:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Karla',system-ui,sans-serif;
  background:var(--grund);
  color:var(--tinte);
  font-size:17px;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.18}
a{color:inherit}
img,svg{max-width:100%}

/* MIN-WIDTH:0 AN JEDEM KASTEN, DER EIN RASTERFELD IST.
   1fr ist minmax(auto,1fr), und "auto" ist die Mindestbreite des Inhalts.
   Ein unteilbares deutsches Wort wie "Gebaeudereinigung" schiebt sein Feld
   damit ueber den Rand hinaus, und die ganze Seite laesst sich seitwaerts
   schieben. Gemessen wird das von npm run dienst:ueberlauf bei 320 Pixeln. */
.wrap{max-width:var(--breit);margin:0 auto;padding:0 22px;min-width:0}

.augenbraue{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--akzent);
}
.dunkel .augenbraue{color:var(--akzent-hell)}

/* ------------------------------------------------------------------ Kopf */
header{background:var(--dunkel);color:#E9ECEE}
.kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.marke{
  font-family:'Marcellus',Georgia,serif;font-size:19px;letter-spacing:.04em;
  text-decoration:none;color:#F2F4F5;min-width:0;
}
.kopf-rechts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kopf-tel{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;
  text-decoration:none;color:#E9ECEE;font-weight:700;font-size:16px;
}
.kopf-tel .wort{color:var(--akzent-hell);font-weight:400;font-size:14px}

/* ------------------------------------------------------------------ Knopf */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:12px 26px;border:0;border-radius:8px;
  font-family:'Karla',system-ui,sans-serif;font-size:17px;font-weight:700;
  text-decoration:none;cursor:pointer;line-height:1.3;text-align:center;
}
.knopf-voll{background:var(--akzent);color:#FFFFFF}
.knopf-rand{background:transparent;color:#E9ECEE;box-shadow:inset 0 0 0 1.5px var(--linie-hell)}
.hell .knopf-rand{color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--linie)}

/* ------------------------------------------------------------------ Held */
.held{background:var(--dunkel);color:#E9ECEE;padding:52px 0 44px}
.held h1{font-size:clamp(30px,6.2vw,50px);color:#FFFFFF;margin:12px 0 0;max-width:19ch}
.held .lauf{margin-top:16px;max-width:54ch;color:#C8D1D7;font-size:18px}
.held-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fakten{
  display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--linie-hell);
}
.fakt{min-width:0}
.fakt b{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--akzent-hell);font-weight:700}
.fakt span{font-size:16px;color:#DCE3E7}

/* -------------------------------------------------------------- Abschnitt */
section{padding:52px 0}
.band{background:var(--grund-2)}
.dunkel{background:var(--dunkel);color:#E9ECEE}
.dunkel h2{color:#FFFFFF}
h2{font-size:clamp(25px,4.4vw,34px);margin-top:10px}
.unterzeile{margin-top:12px;max-width:62ch;color:var(--tinte-2)}
.dunkel .unterzeile{color:#C8D1D7}

/* ------------------------------------------------------------- Leistungen */
.karten{
  display:grid;gap:16px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:12px;
  padding:22px 20px 24px;min-width:0;
}
.karte .zg{width:46px;height:46px;color:var(--tinte);display:block}
.karte .zg .a{color:var(--akzent)}
.karte h3{font-size:21px;margin-top:14px}
.karte p{margin-top:8px;color:var(--tinte-2);font-size:16px;overflow-wrap:anywhere}

/* ----------------------------------------------------------- Einzugsgebiet */
.gebiet{display:grid;gap:26px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.gebiet > div{min-width:0}
.gebiet h3{font-size:19px}
.marken{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.marken span{
  background:var(--weiss);border:1px solid var(--linie);border-radius:999px;
  padding:4px 12px;font-size:15px;
}
.band .marken span{background:var(--grund)}

/* ---------------------------------------------------------------- Ablauf */
.schritte{display:grid;gap:16px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.schritt{min-width:0}
.schritt b{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:var(--akzent);color:#FFFFFF;font-size:16px;font-weight:700;
}
.schritt h3{font-size:19px;margin-top:12px}
.schritt p{margin-top:6px;color:var(--tinte-2);font-size:16px}

/* -------------------------------------------------------------- Formular */
/* ALIGN-ITEMS:START, sonst dehnt das Raster den kurzen Kontaktkasten auf die
   Hoehe des langen Formulars, und unter seiner letzten Zeile steht eine
   halbe Bildschirmhoehe leeres Weiss. */
.anfragezeile{display:grid;gap:26px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));margin-top:28px}
.anfragezeile > *{min-width:0}
form{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:22px 20px 24px}
.feld{margin-bottom:16px;min-width:0}
.feld label{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.feld .frei{font-weight:400;color:var(--tinte-2)}
.feld input,.feld select,.feld textarea{
  width:100%;min-width:0;min-height:50px;padding:12px 14px;
  font-family:'Karla',system-ui,sans-serif;font-size:16px;color:var(--tinte);
  background:var(--grund);border:1px solid var(--linie);border-radius:8px;
}
.feld textarea{min-height:124px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--akzent);outline-offset:1px;
}
.paar{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.paar > *{min-width:0}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formhinweis{margin-top:14px;font-size:14px;line-height:1.6;color:var(--tinte-2)}
.formhinweis a{color:var(--akzent)}

.kontaktkasten{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:22px 20px}
.kontaktkasten h3{font-size:19px}
.kontaktkasten dl{margin-top:14px}
.kontaktkasten dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--akzent);font-weight:700;margin-top:14px}
.kontaktkasten dd{font-size:16px;overflow-wrap:anywhere}
.kontaktkasten dd a{color:inherit;font-weight:700}
.kontaktkasten .knopf{margin-top:20px;width:100%}

/* ------------------------------------------------------------------- Fuss */
footer{background:var(--dunkel);color:#C8D1D7;padding:30px 0;font-size:15px}
.fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fuss a{color:#E9ECEE}
.fuss nav{display:flex;gap:18px;flex-wrap:wrap}

/* ------------------------------------------------------------ Rechtsseiten */
.rechtstext{padding:44px 0 56px}
.rechtstext h1{font-size:clamp(28px,5vw,40px)}
.rechtstext h2{font-size:22px;margin-top:30px}
.rechtstext h3{font-size:18px;margin-top:22px}
.rechtstext p,.rechtstext li{margin-top:10px;max-width:72ch;overflow-wrap:anywhere}
.rechtstext ul{margin-top:10px;padding-left:22px}
.rechtstext .stand{color:var(--tinte-2);font-size:15px;margin-top:8px}
.rechtstext .anschrift p{margin-top:0}
.zurueck{display:inline-flex;align-items:center;min-height:44px;color:var(--akzent);font-weight:700}

/* -------------------------------------------------------- Danke und Fehler */
.mittig{padding:64px 0 72px;text-align:center}
.mittig h1{font-size:clamp(28px,5.4vw,42px)}
.mittig p{margin:14px auto 0;max-width:52ch;color:var(--tinte-2)}
.mittig .knopf{margin-top:28px}
.mittig .zg{width:60px;height:60px;color:var(--tinte);margin:0 auto}
.mittig .zg .a{color:var(--akzent)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}