/* Muckibude — Basis-Styles
   Farbwelt und Typografie übernommen von mut-tankstelle.de.
   Design wechseln = nur die Variablen in :root ändern. */

/* ---------- Schriften (lokal gehostet, kein externer Aufruf) ---------- */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'),
      url('../fonts/plus-jakarta-sans-latin-400-normal.woff') format('woff');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'),
      url('../fonts/plus-jakarta-sans-latin-600-normal.woff') format('woff');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'),
      url('../fonts/plus-jakarta-sans-latin-700-normal.woff') format('woff');
}
@font-face{
  font-family:'Satisfy';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/satisfy-latin-400-normal.woff2') format('woff2'),
      url('../fonts/satisfy-latin-400-normal.woff') format('woff');
}

:root{
  /* --- Eigene Farbe der Muckibude: warmes Rostbraun ---
     Das Grün gehört der MUT-Tankstelle. Mit Grün als Hauptfarbe sähe die
     Muckibude aus wie eine Kopie der Tankstelle. --- */
  --rostbraun:#8F440B;      /* Hauptfarbe: Links, Knöpfe, Unterstreichungen — 7,0:1 auf Weiß */
  --tiefbraun:#6A2A00;      /* Überschriften, Hover — 10,8:1 auf Weiß */
  --terrakotta-hell:#E2B29B;/* nur Linien und Rahmen */
  --hautton:#F7E6DC;        /* nur Flächen: Abschnitte, Zitate, Muskelspalte */
  --sand:#F5F0E8;
  --sand-hell:#FAF8F4;
  --dunkelgrau:#646464;     /* Fließtext — 5,9:1 auf Weiß */
  --blaugrau:#486774;       /* Familienfarbe, Schiefergrau der Kiesel */
  --tankstellen-gruen:#387E24; /* der einzige grüne Moment: Link zur MUT-Tankstelle */

  /* --- Rollen im Layout --- */
  --ink:var(--tiefbraun);       /* Überschriften */
  --text:var(--dunkelgrau);     /* Fließtext */
  --muted:#7A7068;              /* Nebentext */
  --ocean:var(--rostbraun);     /* Links, Knöpfe */
  --ocean-hover:var(--tiefbraun);
  --wave:var(--terrakotta-hell);/* Linien, Zierstriche */
  --foam:var(--hautton);        /* helle Flächen */
  --teal:var(--blaugrau);
  --white:#fff;
  --border:var(--terrakotta-hell);
  --bg:var(--sand-hell);
  --bg-mid:var(--sand);

  --radius:10px;
  --shadow:0 1px 3px rgba(106,42,0,.07),0 1px 2px rgba(106,42,0,.05);
  --shadow-lg:0 10px 28px rgba(106,42,0,.13);
  --maxw:1180px;
  --readw:44rem;

  --font:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-script:'Satisfy','Euphoria Script',cursive;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:5rem}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ocean);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{line-height:1.2;text-wrap:balance;color:var(--ink);margin:0 0 .6em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em}

/* Schreibschrift-Akzent */
.script{
  font-family:var(--font-script);
  font-weight:400;letter-spacing:0;line-height:1.35;
}

/* ---------- Sprungmarke (nur bei Tastaturfokus sichtbar) ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ocean);color:#fff;padding:.7rem 1.2rem;
  border-radius:0 0 8px 0;font-weight:600;font-size:.95rem;
}
.skip:focus{left:0;text-decoration:none}

/* Sichtbarer Fokusring für Tastaturnutzung */
a:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:2px solid var(--ocean);outline-offset:2px;border-radius:4px;
}

/* ---------- Topbar mit Ziehharmonika-Menü ----------
   Wie auf mut-tankstelle.de: der Hamburger ist auf allen Breiten der einzige
   Zugang zur Navigation, kein waagerechtes Menü am Desktop. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:.7rem 1.2rem;
  position:sticky;top:0;z-index:30;
}
.topbar .brand{
  font-weight:700;font-size:1.05rem;color:var(--ink);
  letter-spacing:.02em;white-space:nowrap;
}
.topbar .brand a{color:inherit}
.topbar .brand a:hover{color:var(--ocean);text-decoration:none}
.topbar .brand span{color:var(--muted);font-weight:400}

/* --- der Auslöser --- */
.menu{position:relative}
.menu summary{
  display:flex;align-items:center;gap:.6rem;
  cursor:pointer;list-style:none;
  padding:.45rem .2rem;
  color:var(--muted);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  user-select:none;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:hover{color:var(--ocean)}

/* --- die drei Striche, die zum X werden --- */
.burger{
  position:relative;display:block;width:26px;height:2px;
  background:var(--ink);border-radius:2px;
  transition:background .2s ease;
}
.burger::before,.burger::after{
  content:"";position:absolute;left:0;width:26px;height:2px;
  background:var(--ink);border-radius:2px;
  transition:transform .25s ease;
}
.burger::before{top:-8px}
.burger::after{top:8px}
.menu[open] .burger{background:transparent}
.menu[open] .burger::before{transform:translateY(8px) rotate(45deg)}
.menu[open] .burger::after{transform:translateY(-8px) rotate(-45deg)}

/* --- die aufgeklappte Tafel --- */
.menu nav{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:40;
  min-width:16rem;
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:.5rem 0;
}
.menu nav a{
  padding:.72rem 1.4rem;
  color:var(--ink);font-size:.84rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
}
.menu nav a:hover{color:var(--ocean);background:var(--foam);text-decoration:none}
.menu nav .btn{
  margin:.7rem 1.4rem .5rem;
  text-align:center;color:#fff;
  text-transform:uppercase;letter-spacing:.1em;font-size:.84rem;
}
.menu nav .btn:hover{background:var(--ocean-hover);color:#fff}

@media(max-width:520px){
  .topbar{padding:.6rem .9rem}
  .topbar .brand{font-size:.95rem}
  .topbar .brand span{display:none}
  .menu .menu-wort{display:none}
  .menu nav{min-width:14rem}
}

@media(prefers-reduced-motion:reduce){
  .burger,.burger::before,.burger::after{transition:none}
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}
.section{padding:4.5rem 0}
.section--alt{background:var(--bg-mid);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--white{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.read{max-width:var(--readw)}
/* Stehen .wrap und .read auf demselben Element, behält der Abschnitt die
   Seitenbreite (gleiche linke Kante wie überall) und nur die Zeilen werden
   auf Lesebreite begrenzt. Sonst rutscht der ganze Block in die Mitte. */
.wrap.read{max-width:var(--maxw)}
.wrap.read > *{max-width:var(--readw)}
.center{text-align:center;margin-left:auto;margin-right:auto}

.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;
  font-weight:700;color:var(--amber);margin:0 0 .9rem;
}

.lead{font-size:1.2rem;color:var(--ink)}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--ocean);color:#fff;border:0;
  padding:.7rem 1.4rem;border-radius:8px;cursor:pointer;
  font-size:.95rem;font-weight:600;font-family:inherit;
  transition:background .15s ease;
}
.btn:hover{background:var(--ocean-hover);text-decoration:none;color:#fff}
.btn--ghost{background:transparent;color:var(--ocean);box-shadow:inset 0 0 0 1px var(--border)}
.btn--ghost:hover{background:var(--foam);color:var(--ocean)}
.btn--lg{padding:.9rem 1.9rem;font-size:1.02rem}

/* ---------- Cards & Grids ---------- */
.card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);
}
.grid{display:grid;gap:1.2rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ---------- Zitat ---------- */
blockquote.quote{
  margin:1.6rem 0;padding:1.3rem 1.5rem;
  background:var(--foam);border-left:3px solid var(--wave);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.18rem;line-height:1.5;color:var(--ink);
}
blockquote.quote--klein{font-size:1.02rem;line-height:1.6}
blockquote.quote cite{
  display:block;margin-top:.7rem;font-size:.88rem;font-style:normal;color:var(--muted);
  font-family:var(--font);
}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--white);border-top:1px solid var(--border)}
.site-footer .inner{
  max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.2rem 2.4rem;text-align:center;
}
.site-footer .zeile{
  margin:0 0 .5rem;font-size:.9rem;color:var(--muted);line-height:1.9;
}
.site-footer .zeile a{color:var(--ink)}
.site-footer .zeile--links a{font-weight:600}
.site-footer .motto{
  margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--border);
  font-size:.9rem;color:var(--muted);font-style:italic;
}

/* Der einzige grüne Moment der Seite: der Weg zur MUT-Tankstelle */
a.gruen{color:var(--tankstellen-gruen)}
a.gruen:hover{color:#2c6a1b}

/* ---------- Inhaltsseiten (Impressum etc.) ---------- */
.page{padding:3.5rem 1.2rem 4rem}   /* .wrap-Seitenabstand wieder herstellen — sonst klebt der Text am Rand */
.page h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.5rem}
.page h2{font-size:1.3rem;margin-top:2.2rem}
.page .read p,.page .read li{color:var(--ink)}
.page ul{padding-left:1.2rem}