/* =========================================================
   Abfluß & Kanal-Service Witzmann – Stylesheet
   Farbkonzept aus dem Logo abgeleitet:
     Orange  = Handlung (Anruf, Marken-Akzente)
     Blau    = Arbeit (Auswahl, Links) – das Blaumann-Blau
     Sand    = Wechselflächen, warm wie die Zeichnung
   ========================================================= */

:root{
  --grund:#FFFCF7;            /* warmes Papierweiß */
  --flaeche:#F6F0E6;          /* Sand */
  --karte:#FFFFFF;
  --text:#211B14;             /* warmes Fast-Schwarz */
  --grau:#6E6457;
  --grau-hell:#948A7C;
  --haar:rgba(60,40,20,.12);
  --fuell:rgba(60,40,20,.05);

  --orange:#D96B1E;           /* Wortmarke */
  --orange-tief:#B4520F;
  --blau:#2B5BC4;             /* Blaumann */
  --blau-tief:#1C43A0;
  --gelb:#F2E6A8;             /* Hosenträger – sparsam */

  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Inter",system-ui,sans-serif;
  --breite:1000px;
  --nav-h:64px;
}

*{box-sizing:border-box}
html{font-size:17px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:var(--sf);font-size:1.02rem;line-height:1.6;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
svg,img{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}
.mitte{text-align:center}
.schmal{max-width:720px}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.026em;line-height:1.1}
h1{font-size:clamp(2.1rem,5.6vw,3.5rem)}
h2{font-size:clamp(1.8rem,4.2vw,2.6rem)}
h3{font-size:1.16rem;letter-spacing:-.014em;line-height:1.3}
.eyebrow{font-size:1rem;font-weight:600;color:var(--orange);margin:0 0 10px}
.sub{font-size:clamp(1.08rem,2.1vw,1.3rem);color:var(--grau);max-width:36ch;margin:14px auto 0}
section{padding:84px 0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.flaeche{background:var(--flaeche)}

/* Wellen-Trenner: Sand-Kurve auf Papiergrund. Vor einer Sandfläche
   normal einsetzen, danach gespiegelt (.um). */
.welle{
  height:38px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C200 8 400 42 600 26 C800 10 1000 42 1200 26 L1200 40 L0 40 Z' fill='%23F6F0E6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.welle.um{transform:scaleY(-1)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

.auf{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .auf{opacity:1;transform:none}
}

/* --- Schaltflächen ---------------------------------------- */
.pille{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sf);font-size:1.02rem;font-weight:500;
  padding:.7em 1.45em;border-radius:980px;text-decoration:none;cursor:pointer;border:0;
  transition:background .16s ease,transform .12s ease,box-shadow .16s ease;
}
.pille:active{transform:scale(.98)}
.p-voll{background:var(--orange);color:#fff;box-shadow:0 2px 10px -3px rgba(217,107,30,.45)}
.p-voll:hover{background:var(--orange-tief)}
.p-leer{background:var(--fuell);color:var(--text)}
.p-leer:hover{background:rgba(60,40,20,.09)}
.link{color:var(--blau);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:10px}

/* --- Navigation ------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:70;
  background:rgba(255,252,247,.82);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--haar);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--nav-h)}
.logo-nav{display:flex;align-items:center;gap:9px;text-decoration:none;line-height:0}
.logo-nav .ln-figur{height:40px;width:auto}
.logo-nav .ln-wort{height:29px;width:auto;margin-top:2px}
.nav ul{display:none;list-style:none;margin:0;padding:0;gap:30px;font-size:1.02rem;color:var(--grau)}
.nav ul a{text-decoration:none;transition:color .16s ease}
.nav ul a:hover,.nav ul a.aktiv{color:var(--text)}
.nav .tel{font-size:1.05rem;font-weight:600;text-decoration:none;color:var(--orange);white-space:nowrap}
.nav .tel:hover{color:var(--orange-tief)}

/* --- Startbereich ----------------------------------------- */
.hero{padding:72px 0 8px;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);
  width:760px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,107,30,.09),rgba(217,107,30,0));
}
.hero .wrap{position:relative}
.logo-gross img{width:min(92%,720px);height:auto;margin:0 auto}
.hero .marke{display:block;margin-bottom:36px}
.tel-gross{
  display:inline-block;font-size:clamp(1.7rem,4.6vw,2.3rem);font-weight:600;
  letter-spacing:-.03em;text-decoration:none;margin-top:30px;transition:color .16s ease;
}
.tel-gross:hover{color:var(--orange)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* --- Soforthilfe ------------------------------------------ */
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:34px;text-align:left}
.chip{
  font-family:var(--sf);font-size:1.02rem;font-weight:500;text-align:left;line-height:1.3;
  background:var(--karte);border:1px solid var(--haar);border-radius:14px;
  padding:16px 17px;cursor:pointer;color:var(--text);
  box-shadow:0 1px 2px rgba(60,40,20,.04),0 8px 22px -14px rgba(60,40,20,.18);
  transition:transform .14s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.chip:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(60,40,20,.05),0 12px 26px -14px rgba(60,40,20,.22)}
.chip[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:#fff}
.antwort{
  display:none;margin-top:12px;text-align:left;background:var(--karte);
  border:1px solid var(--haar);border-radius:18px;padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(60,40,20,.04),0 14px 30px -16px rgba(60,40,20,.22);
}
.antwort.aktiv{display:block}
.rat{display:grid;grid-template-columns:1fr;gap:20px;margin:16px 0 20px}
.rat .titel{display:block;font-size:.95rem;font-weight:600;color:var(--grau);margin-bottom:.35em}
.rat ul{margin:0;padding-left:1.1em}
.rat li{margin-bottom:.3em}
.antwort .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;border-top:1px solid var(--haar);padding-top:18px}
.antwort .cta p{margin:0;font-size:.98rem;color:var(--grau)}

/* --- Leistungen ------------------------------------------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:38px;text-align:left}
.kachel{
  background:var(--karte);border:1px solid var(--haar);border-radius:18px;padding:22px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.kachel:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(60,40,20,.22)}
.kachel p{margin:.35em 0 0;color:var(--grau);font-size:1.02rem}
.kachel .bild{
  width:46px;height:46px;border-radius:12px;background:var(--flaeche);
  display:grid;place-items:center;margin-bottom:12px;
}
.kachel .bild svg{width:28px;height:28px}
.flaeche .kachel{background:var(--karte)}
.gebiet{margin-top:32px;font-size:1.02rem;color:var(--grau-hell);max-width:58ch;margin-left:auto;margin-right:auto}

/* --- Hausverwaltungen ------------------------------------- */
.punkte{
  display:grid;gap:0;margin-top:34px;text-align:left;
  background:var(--karte);border:1px solid var(--haar);border-radius:18px;padding:2px 22px;
}
.punkte div{padding:18px 0;border-top:1px solid var(--haar)}
.punkte div:first-child{border-top:0}
.punkte p{margin:.2em 0 0;color:var(--grau);font-size:1.02rem}

/* --- Kontakt ---------------------------------------------- */
.kontaktbox{display:grid;grid-template-columns:1fr;gap:14px;margin-top:38px;text-align:left;
  align-items:stretch}
/* Beide Karten gleich hoch; der Fließtext dehnt sich, damit die
   Schaltflächen unabhängig von der Textlänge auf einer Linie sitzen. */
.kbox{background:var(--flaeche);border-radius:18px;padding:26px 24px;
  display:flex;flex-direction:column}
.kbox .text{flex:1 0 auto}
.kbox .fuss{margin-top:16px}
.kbox .lab{font-size:.95rem;font-weight:600;color:var(--grau)}
.kbox .wert{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;margin:.15em 0 .5em;display:block;
  text-decoration:none;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.kbox a.wert:hover{color:var(--orange)}
.kbox p{margin:0 0 16px;color:var(--grau);font-size:1.02rem}
.kbox .fuss p{margin:0;font-size:.94rem}
.adresse{margin-top:26px;font-size:1.02rem;color:var(--grau-hell)}


/* --- Textseiten (Impressum, Datenschutz) ------------------ */
.textseite{padding:56px 0 88px}
.textseite h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:8px}
.textseite h2{font-size:1.4rem;margin:40px 0 10px}
.textseite h3{margin:24px 0 6px}
.textseite ul{padding-left:1.2em}
.textseite .stand{color:var(--grau-hell);font-size:.95rem}
.hinweis{
  background:var(--flaeche);border-left:4px solid var(--orange);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:28px 0;font-size:.98rem;color:var(--grau);
}
.hinweis strong{color:var(--text)}

/* --- Fußbereich ------------------------------------------- */
footer{background:var(--flaeche);padding:44px 0 40px;font-size:.95rem;color:var(--grau);line-height:1.7;border-top:1px solid var(--haar)}
footer a{color:var(--grau);text-decoration:none;overflow-wrap:anywhere}
footer a:hover{text-decoration:underline;color:var(--text)}
.fuss-figur{display:flex;align-items:flex-end;gap:0;margin-bottom:22px;border-bottom:2px solid var(--haar);padding-bottom:0}
.fuss-figur img{height:52px;width:auto;margin-bottom:-1px}
footer .spalten{display:grid;grid-template-columns:1fr;gap:20px}
footer .titel{color:var(--text);font-weight:600;margin-bottom:4px}
footer .fein{margin-top:24px;padding-top:16px;border-top:1px solid var(--haar);font-size:.88rem;color:var(--grau-hell)}

/* --- Anrufleiste auf dem Telefon -------------------------- */
.rufleiste{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;gap:8px}
.rufleiste a{
  flex:1;display:flex;align-items:center;justify-content:center;padding:14px 8px;border-radius:980px;
  text-decoration:none;font-weight:500;font-size:1.02rem;background:var(--orange);color:#fff;
  box-shadow:0 8px 24px -8px rgba(140,70,10,.5);
}
.rufleiste a+a{
  flex:0 0 38%;background:rgba(255,252,247,.94);color:var(--text);
  backdrop-filter:blur(14px);box-shadow:0 8px 24px -10px rgba(60,40,20,.3);
}
body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}

@media (min-width:720px){
  .rat{grid-template-columns:1fr 1fr}
  .kontaktbox{grid-template-columns:1fr 1fr}
  footer .spalten{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:900px){
  .nav ul{display:flex}
  .rufleiste{display:none}
  body{padding-bottom:0}
  section{padding:104px 0}
}

/* --- Kleine Bildschirme ----------------------------------- */
@media (max-width:600px){
  :root{--nav-h:56px}
  /* Handlungsflächen über die volle Breite, nebeneinander wirkt gequetscht */
  .aktionen{flex-direction:column;align-items:stretch;gap:10px}
  .aktionen .pille{width:100%}
  .antwort .cta{flex-direction:column;align-items:stretch}
  .antwort .cta .pille{width:100%}
  .kbox .pille{width:100%}
  /* lange E-Mail-Adresse kleiner setzen, damit sie in eine Zeile passt */
  .kbox .wert{font-size:1.12rem;letter-spacing:-.01em}
  .tel-gross{font-size:1.85rem}
  .wrap{padding:0 18px}
  section{padding:54px 0}
  .hero{padding:40px 0 4px}
  .hero .marke{margin-bottom:28px}
  .welle{height:26px}
  .logo-nav{gap:8px}
  .logo-nav .ln-figur{height:34px}
  .logo-nav .ln-wort{height:25px}
  .nav .tel{font-size:.95rem}
  .pille{padding:.8em 1.35em}
  .antwort{padding:22px 18px 18px}
  .kbox{padding:22px 18px}
  .punkte{padding:2px 18px}
  footer{padding:36px 0 32px}
}
@media (max-width:360px){
  .nav .tel{font-size:.86rem}
  .logo-nav .ln-wort{height:22px}
  .logo-nav .ln-figur{height:31px}
}

/* --- Druck ------------------------------------------------ */
@media print{
  .nav,.rufleiste,.wahl,.antwort,.welle{display:none!important}
  body{padding:0;font-size:11pt;color:#000;background:#fff}
  section{padding:16pt 0}
  a{text-decoration:none;color:#000}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:9pt}
}