/* ==========================================================================
   Rechtsseiten im Casa-Croco-Stil. Bewusst schmal gesetzt, damit die Texte
   auch auf dem Handy in einer lesbaren Zeilenlaenge stehen.
   ========================================================================== */

:root{
  --ink:#EFE9E1; --ink-2:#B5ADA2; --ink-3:#7E776D;
  --rojo:#9E3B2E; --rojo-hell:#C25A49;
  --line:#232120; --nacht:#0A0A0B; --nacht-2:#111112;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--nacht);color:var(--ink-2);
  font-family:var(--sans);font-weight:300;
  font-size:1rem;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(239,233,225,.3);
  transition:color .3s,border-color .3s}
a:hover{color:var(--rojo-hell);border-color:var(--rojo-hell)}

/* ---------- Kopfzeile ---------- */
.rtop{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 7vw;border-bottom:1px solid var(--line);
}
.rtop-mark{font-family:var(--serif);font-size:1.05rem;letter-spacing:.34em;
  color:var(--ink);border:0}
.rtop-back{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);border:0}
.rtop-back:hover{color:var(--rojo-hell)}

/* ---------- Textspalte ---------- */
.recht{max-width:760px;margin:0 auto;padding:90px 28px 140px}

.recht-kick{font-size:.68rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--rojo-hell)}

.recht h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,7vw,4rem);line-height:1.05;letter-spacing:.02em;
  color:var(--ink);margin-top:18px}

.recht-norm{margin-top:14px;font-size:.92rem;color:var(--ink-3)}

.recht h2{font-family:var(--serif);font-weight:400;
  font-size:1.5rem;line-height:1.3;color:var(--ink);
  margin-top:56px;margin-bottom:14px}

.recht p{margin-bottom:16px}
.recht ul{margin:0 0 16px 1.2em}
.recht li{margin-bottom:6px}
.recht em{font-style:italic;color:var(--ink)}

/* Platzhalter sollen beim Durchblaettern sofort ins Auge springen. */
.ph{color:var(--rojo-hell);background:rgba(158,59,46,.14);
  padding:1px 7px;border-radius:2px;white-space:nowrap}

.hint{font-size:.85rem;line-height:1.75;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:16px;margin-top:-4px}

.entwurf{margin-top:40px;padding:22px 24px;
  background:var(--nacht-2);border-left:2px solid var(--rojo);
  font-size:.92rem;line-height:1.8}
.entwurf strong{color:var(--ink);font-weight:400}

.recht-fuss{margin-top:80px;padding-top:28px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink-3)}

@media (max-width:700px){
  body{font-size:.97rem}
  .recht{padding:60px 7vw 100px}
  .recht h2{margin-top:44px}
  .ph{white-space:normal}
}