/* Zickgraf Leasing – zentrales Stylesheet
   Keine externen Ressourcen: Systemschriften, keine Tracker, keine Cookies. */
:root{
  --stahl:#1f2a38;        /* dunkler Stahl: Menü, Fußzeile, dunkler Abschnitt */
  --signal:#f0b400;       /* Signalgelb der Baumaschinen: Buttons, Akzente */
  --signal-dunkel:#c99500;
  --seite-bg:#e9ecf0;     /* helles Betongrau als Seitenhintergrund */
  --abschnitt:#dfe4ea;    /* etwas dunkleres Grau für Abschnitte */
  --text:#1f2a38;
  --text-hell:#55637a;
  --text-invers:#f4f6f8;
  --radius:6px;
  --breite:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:1.06rem;line-height:1.65;color:var(--text);background:var(--seite-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--stahl)}
a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}

/* Kopf */
.kopf{background:var(--stahl);color:var(--text-invers);position:sticky;top:0;z-index:50;border-bottom:4px solid var(--signal)}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marke{color:var(--text-invers);text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:.02em}
.marke span{color:var(--signal)}
.kopf nav a{color:var(--text-invers);text-decoration:none;font-weight:600;padding:.4rem .8rem}
.kopf nav a:hover{color:var(--signal)}

/* Abschnitte */
.abschnitt{padding:3.5rem 1rem}
.abschnitt-innen{max-width:var(--breite);margin:0 auto}
.abschnitt.grau{background:var(--abschnitt)}
.abschnitt.dunkel{background:var(--stahl);color:var(--text-invers)}
.abschnitt.dunkel a{color:var(--text-invers)}

/* Bild immer neben Text */
.zwei-spalten{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.zwei-spalten.bild-links{grid-template-columns:1fr 1.1fr}
.zwei-spalten img{border-radius:var(--radius);box-shadow:0 6px 24px rgba(31,42,56,.18);width:100%}
@media (max-width:760px){.zwei-spalten,.zwei-spalten.bild-links{grid-template-columns:1fr}}

/* Button */
.button{display:inline-block;background:var(--signal);color:var(--stahl);font-weight:700;text-decoration:none;padding:.85rem 1.6rem;border-radius:var(--radius);border:2px solid var(--signal)}
.button:hover{background:var(--signal-dunkel);border-color:var(--signal-dunkel);color:var(--stahl)}
.hinweis-extern{font-size:.9rem;color:var(--text-hell);margin-top:.6rem}
.dunkel .hinweis-extern{color:#c5cdd8}

/* Schritte – echte Abfolge, deshalb nummeriert (Nummern stehen im Originaltext) */
.schritte{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.schritte li{background:var(--seite-bg);border-left:6px solid var(--signal);border-radius:var(--radius);padding:1.4rem 1.4rem 1.2rem}
.schritte h3{margin-top:0}
@media (max-width:900px){.schritte{grid-template-columns:1fr}}

/* Textseiten (Impressum usw.) */
.textseite{max-width:760px;margin:0 auto}
.textseite h1{margin-bottom:1.2rem}
.entwurf{background:#fff3c4;border:2px solid var(--signal);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:2rem;font-size:.95rem}

/* Fuß */
.fuss{background:var(--stahl);color:#c5cdd8;padding:1.6rem 1rem;font-size:.95rem}
.fuss-innen{max-width:var(--breite);margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between}
.fuss a{color:var(--text-invers);text-decoration:none;margin-right:1.2rem}
.fuss a:hover{color:var(--signal)}