/* MileMotion — Bausteine, die es nur auf den Unterseiten gibt.
   Wird ZUSÄTZLICH zu seite.css geladen (dort stehen Tokens, Typografie, Kopf und Fuß).

   Warum eine eigene Datei und nicht unten an seite.css angehängt:
   seite.css trägt die Startseite und das gemeinsame Gerüst — daran arbeitet auch Julius.
   Eine getrennte Datei heißt, dass sich zwei Leute nicht in derselben Datei begegnen, und
   dass ein Rückbau der Unterseiten eine gelöschte Datei ist statt einer Textsuche.

   Die Designregel von seite.css gilt hier unverändert weiter: KEINE Akzentfarbe.
   Die einzige Farbe ist das folierte Auto auf den Fotos. */

/* ————— Brotkrumen ————— */
.krumen{padding-top:1.4rem; font-size:.85rem; color:var(--grau-tief)}
.krumen a{color:var(--grau); text-decoration:none}
.krumen a:hover{color:#fff}
.krumen span{margin-inline:.45rem}

/* ————— Kopf einer Unterseite ————— */
.seiten-held{padding-block:clamp(2.2rem,5vw,3.6rem) clamp(2.6rem,5vw,4rem)}
.seiten-held h1{margin-top:1rem; max-width:16ch}
.seiten-held .gross{margin-top:1.3rem; max-width:44ch}

/* Bild über die volle Bahnbreite. Das Seitenverhältnis steht im HTML als width/height,
   damit beim Laden nichts springt. */
.bild-band{
  margin-top:clamp(2rem,4vw,3rem);
  border:1px solid var(--linie); border-radius:14px; overflow:hidden; background:var(--karte);
  position:relative;
}
.bild-band img{width:100%; height:auto; display:block}
.bild-band figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1.2rem .9rem;
  background:linear-gradient(transparent, rgba(6,6,7,.92));
  font-size:.86rem; color:var(--grau);
}
/* Ein Bild, das nur trägt und nichts erklärt, bekommt keine Bildunterschrift. */
.bild-band--schlicht{border-radius:14px}

/* ————— Zwei Spalten: Text neben Bild ————— */
.paar{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:center}
.paar--gedreht > :first-child{order:2}
@media (max-width:860px){
  .paar{grid-template-columns:1fr}
  .paar--gedreht > :first-child{order:0}
}
.paar img{width:100%; height:auto; border:1px solid var(--linie); border-radius:12px}
.paar h3{font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:.7rem}
.paar p{color:var(--grau); font-size:.98rem}
.paar p + p{margin-top:.7rem}

/* ————— Paketkarten mit Bild ————— */
.pakete{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:940px){ .pakete{grid-template-columns:1fr} }
.paket{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.paket--betont{border-color:var(--linie-stark); background:var(--karte2)}
.paket-bild{background:#0A0A0C; border-bottom:1px solid var(--linie)}
.paket-bild img{width:100%; height:auto; display:block}
.paket-kern{padding:clamp(1.2rem,2.4vw,1.6rem); display:flex; flex-direction:column; flex:1}
.paket-kern h3{font-size:1.45rem; margin-bottom:.3rem}
.paket-fuer{font-size:.9rem; color:var(--grau-tief); margin-bottom:1.1rem}
.paket-preis{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.paket-preis b{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2rem; letter-spacing:-.03em}
.paket-preis span{font-size:.9rem; color:var(--grau-tief)}
.paket-neben{font-size:.88rem; color:var(--grau-tief); margin-top:.35rem}
.paket ul{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem}
.paket li{position:relative; padding-left:1.3rem; font-size:.93rem; color:var(--grau); line-height:1.5}
.paket li::before{content:"—"; position:absolute; left:0; color:var(--grau-tief)}
.paket .marke-zeile{margin-top:auto; padding-top:1.4rem}

/* ————— Kennzeichnung „das nehmen die meisten" o.ä. ————— */
.wimpel{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tief); background:#fff;
  padding:.28rem .55rem; border-radius:4px; margin-bottom:.7rem;
}

/* ————— Rechenbeispiel / Aufstellung ————— */
.rechnung{
  margin-top:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--linie);
  border-radius:var(--r); overflow:hidden;
}
.rechnung-zeile{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.95rem 1.2rem; border-bottom:1px solid var(--linie); background:var(--flaeche);
  font-size:.95rem; color:var(--grau);
}
.rechnung-zeile:last-child{border-bottom:0}
.rechnung-zeile b{color:var(--schrift); font-family:'IBM Plex Mono',monospace; font-size:.9rem; white-space:nowrap}
.rechnung-zeile--summe{background:var(--karte2); color:var(--schrift); font-weight:600}
.rechnung-zeile--summe b{font-size:1.05rem}

/* ————— Merksatz: ein Gedanke, groß gesetzt ————— */
.merk{
  margin-block:clamp(2.2rem,4vw,3.4rem);
  border-left:2px solid var(--linie-stark); padding-left:clamp(1.1rem,2.5vw,1.8rem);
  max-width:46rem;
}
.merk p{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.25; max-width:none}
.merk span{display:block; margin-top:.8rem; font-size:.9rem; color:var(--grau-tief);
  font-family:'Hanken Grotesk',sans-serif; font-weight:400; letter-spacing:0}

/* ————— Kasten für Warnungen und Einschränkungen ————— */
.kasten-hell{
  border:1px solid var(--linie-stark); border-radius:var(--r);
  padding:clamp(1.2rem,2.6vw,1.7rem); margin-top:clamp(1.6rem,3vw,2.2rem); max-width:46rem;
}
.kasten-hell strong{display:block; margin-bottom:.5rem}
.kasten-hell p{color:var(--grau); font-size:.95rem}
.kasten-hell p + p{margin-top:.6rem}

/* ————— Gegenüberstellung (Tabelle, die auf dem Handy zu Karten wird) ————— */
.gegen{width:100%; border-collapse:collapse; margin-top:clamp(1.6rem,3vw,2.4rem); font-size:.95rem}
.gegen th, .gegen td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--linie)}
.gegen th{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grau-tief); font-weight:400}
.gegen td{color:var(--grau)}
.gegen td:first-child{color:var(--schrift); font-weight:600}
@media (max-width:700px){
  .gegen, .gegen tbody, .gegen tr, .gegen td{display:block; width:100%}
  .gegen thead{display:none}
  .gegen tr{border:1px solid var(--linie); border-radius:var(--r); margin-bottom:.7rem; padding:.4rem .2rem}
  .gegen td{border-bottom:0; padding:.4rem 1rem}
  .gegen td::before{content:attr(data-kopf) " · "; color:var(--grau-tief); font-size:.8rem}
  .gegen td:first-child::before{content:""}
}

/* ————— Schritte mit Bild ————— */
.stufe{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center; padding-block:clamp(2rem,4vw,3.2rem); border-top:1px solid var(--linie);
}
.stufe:first-of-type{border-top:0; padding-top:0}
@media (max-width:860px){ .stufe{grid-template-columns:1fr} }
.stufe:nth-child(even) .stufe-bild{order:-1}
@media (max-width:860px){ .stufe:nth-child(even) .stufe-bild{order:0} }
.stufe-bild img{width:100%; height:auto; border:1px solid var(--linie); border-radius:12px}
.stufe-nr{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--grau-tief); display:block; margin-bottom:.7rem}
.stufe h3{font-size:clamp(1.35rem,2.4vw,1.8rem); margin-bottom:.8rem}
.stufe p{color:var(--grau); font-size:.98rem}
.stufe p + p{margin-top:.7rem}
.stufe .dauer{
  display:inline-block; margin-top:1rem; font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grau-tief);
  border:1px solid var(--linie); border-radius:20px; padding:.32rem .8rem;
}

/* ————— Personenkarte (Über uns) ————— */
.leute{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:clamp(1.8rem,3vw,2.6rem)}
@media (max-width:760px){ .leute{grid-template-columns:1fr} }
.person{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,1.8rem)}
.person h3{font-size:1.25rem; margin-bottom:.2rem}
.person .rolle{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grau-tief); display:block; margin-bottom:.9rem}
.person p{color:var(--grau); font-size:.95rem}

/* ————— Weiterführende Wege am Seitenende ————— */
.weiter{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linie);
  border:1px solid var(--linie); border-radius:var(--r); overflow:hidden;
  margin-top:clamp(2.4rem,4vw,3.4rem)}
@media (max-width:820px){ .weiter{grid-template-columns:1fr} }
.weiter a{background:var(--flaeche); padding:1.3rem 1.4rem; text-decoration:none; display:block}
.weiter a:hover{background:var(--karte2)}
.weiter b{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.08rem; letter-spacing:-.015em}
.weiter span{display:block; margin-top:.35rem; font-size:.88rem; color:var(--grau-tief); line-height:1.45}

/* Auf Unterseiten sitzt der Abschluss-Ruf enger als auf der Startseite. */
.abschnitt--eng{padding-block:clamp(3rem,6vw,4.5rem)}