/* lokal-muenchen.de · Startseite, Impressum, Datenschutz
   Statisch, keine Skripte, keine fremden Schriften, keine Animationen. */

:root{
  --blau:#134A8E;
  --blau-tief:#0C3166;
  --nacht:#0B1F3A;
  --himmel:#EDF3FA;
  --linie:#D3DEEC;
  --sonne:#F6B92B;
  --weiss:#fff;
  --grau:#46556B;
  --max:1080px;
  --rand:22px;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--schrift);
  font-size:17px;
  line-height:1.6;
  color:var(--nacht);
  background:var(--weiss);
  overflow-wrap:break-word;
}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
a:focus-visible,.knopf:focus-visible{outline:3px solid var(--sonne);outline-offset:3px;border-radius:6px;}

.innen{max-width:var(--max);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand);}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Kopf ---------- */
.kopf{background:var(--blau);color:var(--weiss);}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;padding-bottom:16px;}
.marke{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;font-weight:800;font-size:1.06rem;letter-spacing:-.01em;}
.marke svg{flex:none;width:34px;height:34px;}
.marke span{min-width:0;}
.kopf-link{flex:none;font-weight:700;font-size:.95rem;text-decoration:none;padding:9px 16px;border:2px solid rgba(255,255,255,.55);border-radius:999px;}

.kopf--hell{background:var(--weiss);color:var(--blau);border-bottom:1px solid var(--linie);}
.kopf--hell .kopf-link{border-color:var(--blau);}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block;font:inherit;font-weight:800;font-size:1.05rem;line-height:1.2;text-decoration:none;text-align:center;padding:16px 26px;border-radius:12px;}
.knopf--sonne{background:var(--sonne);color:var(--nacht);}
.knopf--blau{background:var(--blau);color:var(--weiss);}
.knopf--rahmen{color:var(--weiss);border:2px solid rgba(255,255,255,.6);padding:14px 24px;}

/* ---------- Auftakt ---------- */
.auftakt{position:relative;background:linear-gradient(180deg,var(--blau) 0%,var(--blau-tief) 100%);color:var(--weiss);}
.auftakt .innen{display:grid;gap:30px;padding-top:26px;}
.auftakt h1{font-size:clamp(2.15rem,8.6vw,3.7rem);line-height:1.07;letter-spacing:-.025em;font-weight:800;text-wrap:balance;}
.auftakt-text p{font-size:1.16rem;line-height:1.55;margin-top:18px;max-width:31em;color:#E4EDF8;}
.auftakt-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.auftakt-knoepfe .knopf{flex:1 1 220px;}

/* Markisen-Kante: der blaue Auftakt endet wie der Volant einer Ladenmarkise */
.auftakt::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 2px);height:17px;
  background:
    linear-gradient(var(--blau-tief),var(--blau-tief)) 0 0/100% 2px no-repeat,
    radial-gradient(circle at 15px 2px,var(--blau-tief) 14.5px,transparent 15.5px) 0 0/30px 17px repeat-x;
}

/* ---------- Handy mit Beispielseite ---------- */
.buehne{height:372px;overflow:hidden;display:flex;justify-content:center;}
.handy{flex:none;width:262px;height:520px;padding:11px;background:var(--nacht);border-radius:40px;box-shadow:0 14px 34px rgba(3,16,38,.42);}
.schirm{position:relative;height:100%;background:var(--weiss);border-radius:30px;overflow:hidden;color:var(--nacht);font-size:12px;line-height:1.35;}
.s-markise{height:30px;background:repeating-linear-gradient(90deg,var(--sonne) 0 20px,#FFF6DC 20px 40px);position:relative;}
.s-markise::after{content:"";position:absolute;left:0;right:0;top:100%;height:9px;
  background:radial-gradient(circle at 10px 0,var(--sonne) 9.5px,transparent 10px) 0 0/40px 9px repeat-x,
             radial-gradient(circle at 30px 0,#FFF6DC 9.5px,transparent 10px) 0 0/40px 9px repeat-x;}
.s-kopf{padding:22px 16px 0;}
.s-kopf strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;}
.s-kopf span{color:var(--grau);}
.s-offen{display:inline-flex;align-items:center;gap:6px;margin:10px 16px 0;padding:4px 10px;border-radius:999px;background:#E3F5E8;color:#12662F;font-weight:700;font-size:11px;}
.s-offen i{width:7px;height:7px;border-radius:50%;background:#1C9A48;}
.s-bild{margin:12px 16px 0;border-radius:12px;overflow:hidden;}
.s-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 16px 0;}
.s-knoepfe span{text-align:center;font-weight:800;padding:9px 0;border-radius:9px;border:2px solid var(--blau);color:var(--blau);}
.s-knoepfe span:first-child{background:var(--blau);color:var(--weiss);}
.s-zeile{display:flex;justify-content:space-between;gap:8px;margin:0 16px;padding:10px 0;border-bottom:1px solid var(--linie);}
.s-zeile:first-of-type{margin-top:8px;}
.s-zeile b{font-weight:700;}
.s-zeile span{color:var(--grau);}
.buehne-hinweis{text-align:center;font-size:.92rem;color:#C9D9EE;padding:0 0 14px;}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:64px 0;}
.abschnitt--erster{padding-top:78px;}
.abschnitt--himmel{background:var(--himmel);}
.abschnitt h2{font-size:clamp(1.65rem,6vw,2.35rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;}
.abschnitt .einleitung{margin-top:14px;max-width:36em;color:var(--grau);font-size:1.08rem;}

/* Für Betriebe wie Ihren */
.betriebe{display:grid;gap:0;}
.zahl-satz{margin-top:30px;padding:22px 22px 22px 20px;border-left:6px solid var(--sonne);background:var(--himmel);border-radius:0 14px 14px 0;font-size:1.3rem;line-height:1.35;font-weight:800;letter-spacing:-.01em;max-width:27em;}

/* Das gehört zu Ihrer Webseite */
.dabei{margin-top:30px;display:grid;gap:0;border-top:1px solid var(--linie);}
.dabei li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:20px 0;border-bottom:1px solid var(--linie);}
.dabei svg{width:30px;height:30px;margin-top:1px;}
.dabei h3{font-size:1.14rem;line-height:1.3;font-weight:800;}
.dabei p{margin-top:4px;color:var(--grau);}

/* So läuft es ab */
.schritte{margin-top:34px;display:grid;gap:0;counter-reset:schritt;}
.schritte li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding-bottom:34px;counter-increment:schritt;}
.schritte li::before{content:counter(schritt);width:52px;height:52px;border-radius:50%;background:var(--blau);color:var(--weiss);font-weight:800;font-size:1.4rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.schritte li::after{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:var(--linie);}
.schritte li:last-child{padding-bottom:0;}
.schritte li:last-child::after{display:none;}
.schritte h3{font-size:1.2rem;line-height:1.3;font-weight:800;padding-top:11px;}
.schritte p{margin-top:6px;color:var(--grau);}

/* Ihr Ansprechpartner */
.person{display:grid;gap:28px;margin-top:30px;}
.person-bild{width:100%;max-width:290px;border-radius:18px;overflow:hidden;background:var(--linie);}
.person-bild img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;}
.person-name{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;}
.person-rolle{color:var(--grau);margin-top:2px;}
.person-text{margin-top:14px;font-size:1.08rem;max-width:32em;}
.zusagen{margin-top:22px;display:grid;gap:14px;}
.zusagen li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;}
.zusagen svg{width:26px;height:26px;margin-top:1px;}
.zusagen b{display:block;font-weight:800;line-height:1.3;}
.zusagen span{color:var(--grau);}

/* Kontakt */
.kontakt{background:var(--nacht);color:var(--weiss);padding:64px 0;}
.kontakt h2{font-size:clamp(1.8rem,6.6vw,2.6rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;}
.kontakt p{margin-top:14px;max-width:30em;color:#D2DDED;font-size:1.1rem;}
.kontakt-wege{margin-top:28px;display:grid;gap:12px;max-width:440px;}
.kontakt-adresse{margin-top:18px;color:#D2DDED;font-size:1rem;}
.kontakt-adresse a{color:var(--weiss);font-weight:700;overflow-wrap:anywhere;}

/* Fuß */
.fuss{background:var(--nacht);color:#B9C7DB;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem;}
.fuss .innen{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;padding-top:22px;padding-bottom:28px;}
.fuss nav{display:flex;gap:22px;}
.fuss a{color:var(--weiss);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Rechtsseiten ---------- */
.recht{padding:44px 0 72px;}
.recht .innen{max-width:760px;}
.recht h1{font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;}
.recht .stand{margin-top:8px;color:var(--grau);}
.recht h2{font-size:1.25rem;line-height:1.3;font-weight:800;margin-top:36px;}
.recht p{margin-top:12px;}
.recht a{color:var(--blau);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere;}
.recht address{font-style:normal;margin-top:12px;}
.zurueck{display:inline-block;margin-bottom:26px;color:var(--blau);font-weight:700;text-underline-offset:3px;}

/* ---------- Ab Tablet ---------- */
@media (min-width:760px){
  :root{--rand:36px;}
  body{font-size:18px;}
  .marke{font-size:1.18rem;}
  .auftakt .innen{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:48px;padding-top:48px;}
  .auftakt-text{padding-bottom:76px;}
  .auftakt-text p{font-size:1.25rem;}
  .auftakt-knoepfe .knopf{flex:0 1 auto;}
  .buehne{height:470px;}
  .handy{width:292px;height:580px;}
  .schirm{font-size:13px;}
  .abschnitt{padding:92px 0;}
  .abschnitt--erster{padding-top:108px;}
  .betriebe{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;}
  .betriebe .zahl-satz{margin-top:0;font-size:1.5rem;padding:28px 28px 28px 26px;}
  .dabei{grid-template-columns:1fr 1fr;column-gap:56px;}
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
  .schritte li{grid-template-columns:1fr;gap:6px;padding-bottom:0;align-content:start;}
  .schritte li::after{left:66px;right:-40px;top:25px;bottom:auto;width:auto;height:2px;}
  .schritte h3{padding-top:14px;}
  .person{grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center;}
  .person-bild{max-width:300px;}
  .kontakt{padding:92px 0;}
  .kontakt-wege{grid-template-columns:auto;justify-content:start;}
}