/* Stylesheet schauerte-consulting.de, erstellt 2026-09-29. Eigene Datei (cachebar), keine externen Fonts, keine Verläufe/Schatten. */
:root{
  --papier:#FBFAF7; --tinte:#1C2830; --stahlblau:#2E5361; --messing:#A8752E;
  --hairline:#E4E0D6; --fond:#F4F1E9;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0;padding:0;}
body{
  background:var(--papier); color:var(--tinte);
  font-family:'Schibsted Grotesk',system-ui,Arial,sans-serif;
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:8px; border:1px solid var(--hairline);
  pointer-events:none; z-index:0;
}
@media (min-width:768px){ body::before{ inset:16px; } }
h1,h2,h3{ text-wrap:balance;
  font-family:'Newsreader',Georgia,serif; font-weight:500; color:var(--tinte);
  margin:0 0 .6em 0; line-height:1.2;
}
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.55rem,3vw,2.1rem); }
h3{ font-size:1.25rem; margin-bottom:.4em; }
h4{ font-size:1.05rem; margin:1.2em 0 .3em 0; }
p{ margin:0 0 1em 0; }
a{ color:var(--stahlblau); text-underline-offset:3px; }
a:hover{ color:var(--tinte); }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--stahlblau); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--tinte); color:#FBFAF7;
  padding:10px 16px; z-index:10;
}
.skip:focus{ left:16px; top:16px; }
.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.wrap.narrow{ max-width:720px; }
em.brass{ font-style:italic; color:var(--messing); }
.eyebrow{
  text-transform:uppercase; letter-spacing:.26em; font-size:.75rem;
  color:var(--stahlblau); font-weight:600; margin:0 0 20px 0;
}

/* Kopfzeile */
header.site{ padding:40px 0 0 0; }
header.site .wrap{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; }
.brand{
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.35rem;
  color:var(--tinte); text-decoration:none;
}
nav.main a{ margin-right:20px; font-size:.95rem; text-decoration:none; color:var(--stahlblau); }
nav.main a:last-child{ margin-right:0; }
nav.main a:hover{ text-decoration:underline; }

/* Wartungsseite (Stil der Parking-Seite) */
header.site .wrap{ display:block; }
.hero-img{ width:100%; height:auto; display:block; border-radius:2px; margin:28px 0 32px 0; aspect-ratio:16/9; background:var(--fond); }
p.lead{ font-size:1.05rem; max-width:58ch; }
.status{ background:var(--fond); border-left:2px solid #A8752E; padding:16px 20px; margin:28px 0; font-size:.98rem; line-height:1.7; }
main > .wrap.narrow{ padding-top:8px; }

/* Hero */
.hero{ padding:56px 0 24px 0; }
.hero p.lead{ font-size:1.15rem; max-width:56ch; margin-bottom:0; }
.hero-figure{ margin:40px 0 0 0; position:relative; }
.hero-figure img{ width:100%; height:auto; display:block; aspect-ratio:16/9; background:var(--fond); }
.hero-figure::after{
  content:""; position:absolute; inset:0; background:rgba(46,83,97,0.30);
  mix-blend-mode:multiply; pointer-events:none;
}

/* Abschnitte */
section.block{ padding:64px 0 0 0; }
section.block > .wrap > h2{ margin-bottom:.5em; }
.rule{ border:0; border-top:1px solid var(--hairline); margin:0; }
.intro{ max-width:62ch; }

/* Versprechen */
.promises{ list-style:none; margin:32px 0 0 0; padding:0; display:grid; gap:0; grid-template-columns:1fr; }
.promises li{ padding:24px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:64px 1fr; gap:0 16px; }
.promises li:last-child{ border-bottom:1px solid var(--hairline); }
.num{ font-family:'Newsreader',Georgia,serif; font-size:2.4rem; line-height:1; color:var(--messing); }
.promises h3{ margin-bottom:.25em; }
.promises p{ margin:0; max-width:52ch; }
@media (min-width:768px){
  .promises{ grid-template-columns:1fr 1fr; column-gap:48px; }
  .promises li:nth-last-child(2){ border-bottom:1px solid var(--hairline); }
}

/* Leistungen */
.cards{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px; }
.card{ background:var(--fond); border:1px solid var(--hairline); padding:28px 24px; }
.card h3{ margin-bottom:.4em; }
.card p{ margin:0; }
@media (min-width:768px){ .cards{ grid-template-columns:repeat(3,1fr); gap:20px; } }

/* Kontakt */
.contact{ background:var(--fond); border-left:2px solid #A8752E; padding:28px 28px; margin-top:24px; max-width:640px; }
.contact dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 24px; }
.contact dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--stahlblau); font-weight:600; padding-top:.35em; }
.contact dd{ margin:0; font-size:1.1rem; }
.contact a{ color:var(--stahlblau); }

/* Inhaltsseiten (Impressum, Datenschutz) */
main{ display:block; }
.legal{ font-size:.97rem; padding-top:40px; }
.legal h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.legal h2{ margin-top:1.6em; font-size:1.3rem; }
.legal h3{ font-size:1.1rem; margin-top:1.3em; }
.legal p, .legal ul{ max-width:68ch; }
.legal .stand{ color:var(--stahlblau); margin-top:2em; }

/* Footer: Farben bewusst hart codiert */
main{ padding-bottom:64px; }
footer.site{
  border-top:0.75pt solid #A8752E; padding:24px 0 40px 0; font-size:.85rem; color:#1C2830; background:#FBFAF7;
  position:relative; z-index:1;
}
footer.site a{ color:#2E5361; }
footer.site .nav{ margin-top:8px; }
footer.site .nav a{ margin-right:16px; }

@media (prefers-reduced-motion:no-preference){
  main{ animation:fade-in .5s ease-out; }
  @keyframes fade-in{ from{opacity:0;} to{opacity:1;} }
}
@media (max-width:480px){
  .promises li{ grid-template-columns:52px 1fr; }
  .contact dl{ grid-template-columns:1fr; gap:2px 0; }
  .contact dd{ margin-bottom:12px; }
}

/* Logo + Bild-Overlay (Stahlblau-Toning) */
a.brand{ display:inline-block; line-height:0; }
.logo{ height:64px; width:auto; display:block; }
.img-wrap{ position:relative; margin:28px 0 32px 0; }
.img-wrap .hero-img{ margin:0; }
.img-wrap::after{ content:""; position:absolute; inset:0; background:rgba(46,83,97,0.30); mix-blend-mode:multiply; pointer-events:none; border-radius:2px; }


/* Kopfbalken Stahlblau mit weissem Logo */
header.site{ background:#2E5361; padding:18px 0; position:relative; z-index:1; }
.logo{ height:56px; }
main > .wrap.narrow{ padding-top:36px; }

.hero-img ~ p.lead, main p.lead{ max-width:none; }

.logo{ height:76px; }