/* rasthof24.de: Gestaltung der Dachseite, im Stil von schulze-job.de (Anton, Manrope, Anthrazit, Creme, Rot, Gelb).
   Die ältere style.css bleibt für nossen.html bestehen.
   Shell-Muschel nur klein, unverändert und auf weißem Feld (Retailer Branding Guidelines 2023), keine Shell-Farbflächen. */
@font-face{font-family:'Anton';font-display:swap;src:url('fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url('fonts/manrope-latin-800-normal.woff2') format('woff2')}
:root{--rot:#C8302B;--gelb:#F5B301;--anthrazit:#1C1C1A;--anthrazit-2:#262624;--creme:#F4F1EA;--creme-2:#EAE6DA;--grau:#8a877e}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-weight:500;background:var(--creme);color:var(--anthrazit);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.innen{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;line-height:1;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(52px,9vw,124px)}
h2{font-size:clamp(38px,5.4vw,68px)}
h3{font-size:30px}
.y{color:var(--gelb)}.r{color:var(--rot)}
.oben{font-weight:800;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--rot);margin-bottom:14px}
.dunkel .oben{color:var(--gelb)}
.strasse{height:10px;width:132px;background:repeating-linear-gradient(90deg,var(--gelb) 0 30px,transparent 30px 51px);margin-bottom:26px}
/* Kopf */
header{background:var(--anthrazit);color:var(--creme);position:sticky;top:0;z-index:20}
header .innen{display:flex;align-items:center;gap:26px;min-height:70px}
.marke{font-family:'Anton',sans-serif;font-size:30px;text-decoration:none;letter-spacing:.02em;text-transform:uppercase}
.marke span{color:var(--gelb)}
nav{margin-left:auto;display:flex;gap:26px;font-weight:700;font-size:16px}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--gelb)}
.knopf{display:inline-block;background:var(--rot);color:#fff;font-weight:800;text-decoration:none;padding:15px 26px;border-radius:12px;font-size:17px;line-height:1.2}
.knopf.hell{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.knopf.gelb{background:var(--gelb);color:var(--anthrazit)}
header .knopf{padding:11px 18px;font-size:15px}
/* Abschnitte */
section{padding:84px 0}
.dunkel{background:var(--anthrazit);color:var(--creme)}
.sand{background:var(--creme-2)}
.held{padding:96px 0 104px;position:relative;overflow:hidden}
.held::after{content:"";position:absolute;left:0;right:0;bottom:34px;height:12px;background:repeating-linear-gradient(90deg,var(--anthrazit-2) 0 70px,transparent 70px 120px)}
.lauf{font-size:clamp(19px,2.2vw,23px);max-width:660px;margin-top:26px;opacity:.92}
.knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.raster{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:40px}
.kachel{background:#fff;border-radius:18px;padding:28px 26px 24px;text-decoration:none;display:flex;flex-direction:column;gap:6px;border:2px solid transparent;transition:border-color .15s}
a.kachel:hover{border-color:var(--rot)}
.kachel .ab{font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--rot)}
.kachel p{font-size:16px;color:#55524b}
.kachel .mehr{margin-top:auto;padding-top:14px;font-weight:800;font-size:15px}
.dunkel .kachel{background:var(--anthrazit-2);color:var(--creme)}
.dunkel .kachel p{color:#c9c5ba}
.dunkel .kachel .ab{color:var(--gelb)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.punkte{list-style:none;display:grid;gap:12px;margin-top:22px}
.punkte li{padding-left:34px;position:relative;font-weight:700}
.punkte li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:12px;background:var(--rot)}
.fakten{background:#fff;border-radius:18px;padding:28px}
.fakten dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:17px}
.fakten dt{font-weight:800;color:var(--grau);font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding-top:4px}
.fakten dd a{font-weight:700}
.band{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.geld{display:inline-block;background:var(--gelb);color:var(--anthrazit);font-family:'Anton',sans-serif;font-size:clamp(34px,5vw,58px);line-height:1;padding:14px 22px 11px;transform:rotate(-2deg);margin-top:22px;text-transform:none}
.recht h2{font-size:30px;margin:38px 0 10px}
.recht p{margin-bottom:12px;max-width:760px}
/* Fuß */
footer{background:var(--anthrazit);color:#c9c5ba;padding:54px 0 40px;font-size:16px}
footer .innen{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer b{color:var(--creme);display:block;margin-bottom:8px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.shellzeile{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:14px}
.shell{background:#fff;border-radius:10px;padding:16px;line-height:0;flex:0 0 auto}
.shell img{width:40px}
.klein{font-size:14px;opacity:.75;margin-top:30px;grid-column:1/-1}
@media(max-width:820px){
  nav{display:none}
  header .knopf{margin-left:auto}
  section{padding:58px 0}
  .held{padding:60px 0 84px}
  .zwei{grid-template-columns:1fr;gap:30px}
  footer .innen{grid-template-columns:1fr}
}

/* Logo „Shell Station Fläming“ (24.09.2026, auch in den Mail-Signaturen). Schwarz auf transparent, deshalb immer auf weißem Feld. */
.kopfzwei{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.logokarte{background:#fff;border-radius:22px;padding:40px 38px;position:relative;z-index:1}
.logokarte img{width:100%;height:auto}
.logoklein{width:210px;height:auto;margin:0 auto 26px}
@media(max-width:820px){.kopfzwei{grid-template-columns:1fr;gap:34px}.logokarte{max-width:300px;padding:28px}}