/* Meisterwerk Sanitär & Heizung, Beispielwebsite
   Handgeschrieben: HTML, CSS, etwas JavaScript. Kein Framework. */

:root{
  --ink:#10141a;
  --ink-2:#1a2028;
  --ink-3:#2a3340;
  --grey:#f4f5f7;
  --grey-2:#e6e9ee;
  --txt:#242c36;
  --soft:#5d6875;
  --yellow:#ffc400;
  --yellow-d:#e0ab00;
  --red:#d92b2b;
  --wrap:1200px;
  --gut:20px;
  --head:68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  margin:0; background:#fff; color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
p{ margin:0 0 14px; overflow-wrap:break-word; }
h1,h2,h3,h4{ margin:0 0 14px; line-height:1.1; letter-spacing:-.025em; color:var(--ink); font-weight:800; }
h1{ font-size:clamp(2.1rem,6vw,3.6rem); }
h2{ font-size:clamp(1.7rem,4vw,2.6rem); }
h3{ font-size:1.1875rem; letter-spacing:-.01em; }
a{ color:var(--ink); }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:99; background:var(--yellow); padding:10px 16px; font-weight:700; }

/* Hinweisleiste ------------------------------------------- */
.flag{
  margin:0; padding:8px var(--gut); background:var(--ink-2); color:#aeb8c4;
  font-size:.8125rem; text-align:center;
}
.flag a{ color:var(--yellow); }

/* Kopf ----------------------------------------------------- */
.head{ position:sticky; top:0; z-index:50; background:var(--ink); color:#fff; }
.head__in{ display:flex; align-items:center; gap:18px; min-height:var(--head); }

.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#fff; margin-right:auto; }
.brand__m{
  width:38px; height:38px; flex:0 0 38px; background:var(--yellow); color:var(--ink);
  display:grid; place-items:center; font-weight:900; font-size:1.25rem; transform:skewX(-8deg);
}
.brand__t{ display:flex; flex-direction:column; font-weight:800; line-height:1.1; font-size:1.0625rem; }
.brand__t small{ font-weight:600; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:#8a94a2; margin-top:3px; }

.burger{
  width:46px; height:40px; display:grid; gap:5px; align-content:center; justify-items:center;
  background:none; border:1px solid #39424f; cursor:pointer; border-radius:4px;
}
.burger span{ width:20px; height:2px; background:#fff; }

.nav{ display:none; }
.nav a{
  display:block; padding:13px 0; color:#d5dae1; text-decoration:none;
  font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid #222a34;
}
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:var(--yellow); }
.nav.open{ display:block; position:absolute; left:0; right:0; top:100%; background:var(--ink); padding:4px var(--gut) 18px; }
.nav.open .btn{ margin-top:14px; border-bottom:0; }
.head .btn--call{ display:none; }

@media (min-width:1020px){
  .burger{ display:none; }
  .nav{ display:flex; align-items:center; gap:26px; }
  .nav a{ padding:6px 0; border-bottom:0; }
  .head .btn--call{ display:inline-flex; }
}

/* Knöpfe ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border:2px solid transparent; border-radius:4px;
  font:inherit; font-size:.875rem; font-weight:800; letter-spacing:.04em;
  text-decoration:none; cursor:pointer; text-align:center;
}
.btn--y{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.btn--y:hover{ background:var(--yellow-d); border-color:var(--yellow-d); }
.btn--dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--dark:hover{ background:var(--ink-2); }
.btn--line{ background:transparent; color:#fff; border-color:#4a5462; }
.btn--line:hover{ border-color:#fff; }
.btn--line-d{ background:transparent; color:var(--ink); border-color:#c8cdd5; }
.btn--line-d:hover{ border-color:var(--ink); }
.btn--red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn--red:hover{ background:#b81f1f; border-color:#b81f1f; }
.btn--lg{ padding:17px 30px; font-size:.9375rem; }
.btn--call{ padding:11px 18px; }

/* Startbereich ---------------------------------------------- */
.hero{ background:var(--ink); color:#c3cbd5; position:relative; overflow:hidden; }
.hero__in{ display:grid; gap:0; }
.hero__txt{ padding:44px 0 46px; }
.hero h1{ color:#fff; }
.hero h1 em{ font-style:normal; color:var(--yellow); }
.hero__lead{ font-size:1.0625rem; max-width:46ch; color:#aab3bf; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 30px; }
.hero__pic{ position:relative; }
.hero__pic img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.hero__tag{
  position:absolute; left:0; bottom:0; background:var(--yellow); color:var(--ink);
  padding:12px 18px; font-weight:800; font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
}
.facts{ list-style:none; margin:0; padding:22px 0 0; border-top:1px solid #2b3540; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.facts li{ font-size:.75rem; color:#8a94a2; line-height:1.35; min-width:0; }
.facts b{ display:block; font-size:1.5rem; color:#fff; font-weight:800; letter-spacing:-.03em; }

@media (min-width:900px){
  .hero__in{ grid-template-columns:1.12fr .88fr; gap:56px; align-items:center; }
  .hero__txt{ padding:78px 0 84px; }
  .hero__pic img{ aspect-ratio:4/5; }
}

/* Notdienstband --------------------------------------------- */
.alarm{ background:var(--red); color:#fff; }
.alarm__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-block:15px; }
.alarm p{ margin:0; flex:1 1 240px; font-size:.9375rem; }
.alarm a{ color:#fff; }
.dot{ width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:#fff; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.7);} 70%{ box-shadow:0 0 0 9px rgba(255,255,255,0);} }

/* Abschnitte ------------------------------------------------- */
.sec{ padding:56px 0; }
@media (min-width:900px){ .sec{ padding:86px 0; } }
.sec--grey{ background:var(--grey); }
.sec--dark{ background:var(--ink); color:#aab3bf; }
.sec--dark h2,.sec--dark h3{ color:#fff; }
.sec--tight{ padding-block:44px; }

.lbl{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:.75rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--soft);
}
.lbl::before{ content:""; width:22px; height:3px; background:var(--yellow); }
.lbl--light{ color:#8a94a2; }
.intro{ color:var(--soft); max-width:56ch; }
.sec--dark .intro{ color:#8a94a2; }
.head2{ margin-bottom:34px; }
.head2--row{ display:grid; gap:18px; }
@media (min-width:860px){ .head2--row{ grid-template-columns:1fr auto; align-items:end; } }

/* Leistungskarten -------------------------------------------- */
.cards{ display:grid; gap:20px; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{ background:#fff; border:1px solid var(--grey-2); display:flex; flex-direction:column; min-width:0; }
.card__img{ position:relative; }
.card__img img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.card__no{
  position:absolute; left:0; top:0; background:var(--yellow); color:var(--ink);
  font-weight:900; font-size:.8125rem; padding:6px 11px; letter-spacing:.06em;
}
.card__body{ padding:22px 20px 24px; display:flex; flex-direction:column; flex:1; }
.card__body p{ font-size:.9375rem; color:var(--soft); margin-bottom:16px; }
.card__more{ margin-top:auto; font-size:.8125rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.card__more::after{ content:" →"; color:var(--yellow-d); }
.card__more:hover{ text-decoration:underline; }

/* Ablauf ------------------------------------------------------ */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:2px; background:#2b3540; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.steps li{ background:var(--ink); padding:28px 22px; min-width:0; }
.steps b{ display:block; font-size:2rem; font-weight:900; color:var(--yellow); line-height:1; margin-bottom:12px; letter-spacing:-.04em; }
.steps h3{ font-size:1.0625rem; margin-bottom:8px; }
.steps p{ margin:0; font-size:.875rem; color:#8a94a2; }

/* Bildband ----------------------------------------------------- */
.band{ position:relative; }
.band img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
.band__box{ background:var(--yellow); color:var(--ink); padding:26px 24px; }
.band__box h2{ margin-bottom:10px; }
.band__box p{ margin:0; font-size:.9375rem; }
@media (min-width:900px){
  .band__box{ position:absolute; right:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut))); bottom:36px; max-width:400px; padding:32px 30px; }
  .band img{ aspect-ratio:21/7; }
}

/* Galerie ------------------------------------------------------ */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.filters button{
  padding:9px 16px; border:1px solid var(--grey-2); background:#fff; border-radius:999px;
  font:inherit; font-size:.8125rem; font-weight:700; cursor:pointer; color:var(--soft);
}
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

.gal{ display:grid; gap:16px; align-items:start; }
@media (min-width:600px){ .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .gal{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tile{ margin:0; position:relative; background:var(--ink); min-width:0; display:flex; flex-direction:column; }
.tile img{ width:100%; aspect-ratio:3/2; object-fit:cover; flex:0 0 auto; }
.tile--tall img{ aspect-ratio:3/4; }
.tile figcaption{ padding:14px 16px 16px; }
.tile figcaption b{ display:block; color:#fff; font-size:1rem; }
.tile figcaption span{ display:block; color:#8a94a2; font-size:.8125rem; margin-top:2px; }
.tile__kind{
  position:absolute; right:0; top:0; background:rgba(16,20,26,.85); color:var(--yellow);
  font-size:.6875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px;
}
.tile[hidden]{ display:none; }

/* Team ---------------------------------------------------------- */
.crew{ display:grid; gap:18px; }
@media (min-width:560px){ .crew{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .crew{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mate{ min-width:0; }
.mate img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .25s ease; }
.mate:hover img{ filter:none; }
.mate h3{ margin:16px 0 2px; font-size:1.0625rem; }
.mate p{ margin:0; font-size:.875rem; color:var(--soft); }
.mate .role{ color:#7a5c00; font-weight:800; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }

/* Zweispalter ---------------------------------------------------- */
.duo{ display:grid; gap:34px; }
@media (min-width:920px){ .duo{ grid-template-columns:1fr 1fr; gap:60px; align-items:start; } }
.duo--img img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

.ticks{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.ticks li{ position:relative; padding-left:30px; font-size:.9375rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:3px; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23ffc400'/%3E%3Cpath d='M5 10.4l3.2 3.2L15 6.8' stroke='%2310141a' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.sec--dark .ticks li{ color:#aab3bf; }

/* Preistabelle ---------------------------------------------------- */
.prices{ border-top:2px solid var(--ink); margin-top:8px; }
.prices > div{ display:flex; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--grey-2); font-size:.9375rem; }
.prices b{ white-space:nowrap; }
.prices span{ color:var(--soft); }

/* Öffnungszeiten --------------------------------------------------- */
.hours{ background:var(--grey); padding:26px 24px; }
.sec--dark .hours{ background:var(--ink-2); }
.hours dl{ margin:0; }
.hours dl > div{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--grey-2); font-size:.9375rem; }
.sec--dark .hours dl > div{ border-color:#2b3540; }
.hours dt{ font-weight:700; }
.hours dd{ margin:0; color:var(--soft); white-space:nowrap; }
.sec--dark .hours dd{ color:#8a94a2; }
.hours .warn dt,.hours .warn dd{ color:#c42222; font-weight:800; }
.sec--dark .hours .warn dt,.sec--dark .hours .warn dd{ color:#ff7070; }

/* Kontaktliste ------------------------------------------------------ */
.clist{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.clist li{ display:flex; gap:16px; font-size:.9375rem; }
.clist span{ flex:0 0 78px; font-size:.6875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); padding-top:4px; }

/* Formular ----------------------------------------------------------- */
.form{ background:#fff; border:1px solid var(--grey-2); padding:26px 24px; display:grid; gap:15px; }
.sec--grey .form{ background:#fff; }
.form label{ display:grid; gap:6px; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }
.form__2{ display:grid; gap:15px; }
@media (min-width:560px){ .form__2{ grid-template-columns:1fr 1fr; } }
.form input,.form select,.form textarea{
  width:100%; padding:12px 14px; border:1px solid #ccd2da; border-radius:3px;
  font:inherit; font-size:.9375rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--txt); background:#fff;
}
.form textarea{ resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(255,196,0,.35); }
.check{ display:flex !important; align-items:flex-start; gap:10px; font-size:.8125rem !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--soft) !important; }
.check input{ width:auto; margin-top:4px; flex:0 0 auto; }
.hint{ margin:0; font-size:.8125rem; color:var(--soft); text-align:center; }

/* Anfahrtsskizze ---------------------------------------------------- */
.sketch{ margin:26px 0 0; }
.sketch__map{ border:1px solid var(--grey-2); background:#e9ecf0; }
.sketch svg{ display:block; width:100%; height:300px; }
.sketch figcaption{ margin-top:10px; font-size:.8125rem; color:var(--soft); }
@media (min-width:900px){ .sketch svg{ height:320px; } }

/* Abschluss-Streifen --------------------------------------------------- */
.cta{ background:var(--yellow); }
.cta__in{ display:grid; gap:20px; padding-block:40px; }
.cta h2{ margin:0; }
.cta p{ margin:6px 0 0; font-size:.9375rem; }
@media (min-width:860px){ .cta__in{ grid-template-columns:1fr auto; align-items:center; gap:36px; } }

/* Fuß ------------------------------------------------------------------ */
.foot{ background:var(--ink); color:#8a94a2; padding:48px 0 34px; font-size:.875rem; }
.foot__in{ display:grid; gap:28px; }
@media (min-width:860px){ .foot__in{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; } }
.foot h4{ color:#fff; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.foot a{ color:#c3cbd5; text-decoration:none; }
.foot a:hover{ color:var(--yellow); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot p{ margin:0 0 10px; }
.foot__bottom{ border-top:1px solid #222a34; margin-top:34px; padding-top:20px; font-size:.8125rem; color:#8a94a2; display:grid; gap:8px; }
@media (min-width:760px){ .foot__bottom{ grid-template-columns:1fr auto; } }

/* Kleinigkeiten ------------------------------------------------------- */
.mate .role{ margin-bottom:6px; }
.hours h3{ margin-bottom:14px; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.sec--dark .hours h3{ color:#8a94a2; }
.duo--img img{ width:100%; }
.brand[style]{ display:inline-flex; }

/* Anruf-Knopf im Menü: dunkle Schrift auf Gelb, auf breiten Bildschirmen ausgeblendet,
   weil dort der Knopf rechts im Kopf schon dieselbe Nummer wählt. */
.nav a.btn{ color:var(--ink); border-bottom:0; }
.nav a.btn:hover{ color:var(--ink); }
@media (min-width:1020px){ .nav a.btn{ display:none; } }