/* christiansteiger.com. Hell, ruhig, dieselbe Schrift und dasselbe Rot wie
   urban-listening.com, damit die beiden Seiten zusammengehoeren. */
:root{
  --grund:#F6F3EC; --panel:#FFFFFF; --linie:#DDD8CC;
  --text:#15171C; --leise:#4E5360; --leiser:#8A8F9B;
  --rot:#D8382C;
  --schrift:"Archivo","Helvetica Neue",Arial,sans-serif;
  --daten:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sp:clamp(1rem,3vw,2rem); --breit:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rot)}
a:hover{color:var(--rot)}
h1,h2{font-weight:600;font-stretch:112%;letter-spacing:-.02em;line-height:1.08;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.augen{font-family:var(--daten);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rot);margin:0 0 .6rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--leise);max-width:60ch;margin:1rem 0 0}
.klein{font-size:.88rem;color:var(--leiser);max-width:70ch}
.sprung{position:absolute;left:-999px;top:.5rem;z-index:99;background:var(--rot);color:#fff;
  padding:.5rem .9rem;border:0;font-size:.9rem}
.sprung:focus{left:.5rem}

.kopf{max-width:var(--breit);margin:0 auto;padding:1.2rem var(--sp);display:flex;
  justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.marke{font-family:var(--daten);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  border:0}
.kopf nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.kopf nav a{font-family:var(--daten);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leise);border:0}
.kopf nav a:hover{color:var(--rot)}

.held{max-width:var(--breit);margin:0 auto;padding:clamp(1.5rem,5vw,4rem) var(--sp) 0;
  display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.held{grid-template-columns:minmax(0,28%) minmax(0,1fr)}}
.held__bild img{width:100%;max-width:300px;height:auto;aspect-ratio:2/3;object-fit:cover;
  border:1px solid var(--linie)}
.knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 0}
.knopf{font-family:var(--daten);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem 1rem;border:1px solid var(--text);border-radius:2px;color:var(--text)}
.knopf:hover{background:var(--text);color:var(--grund)}

.kap{max-width:var(--breit);margin:0 auto;padding:clamp(2.6rem,7vw,5.5rem) var(--sp) 0}
.kap--text{max-width:760px;padding-bottom:3rem}
.kap--text h2{font-size:1.15rem;margin-top:2rem}
.kap--text p{max-width:66ch}
.anschrift{line-height:1.5}

.karten{display:grid;gap:1.2rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{display:flex;flex-direction:column;gap:.55rem;background:var(--panel);
  border:1px solid var(--linie);border-radius:3px;padding:1.4rem 1.4rem 1.2rem;
  transition:border-color .15s,transform .15s}
.karte:hover{border-color:var(--rot);transform:translateY(-2px);color:var(--text)}
.karte__n{font-weight:600;font-stretch:112%;font-size:1.35rem;letter-spacing:-.01em}
.karte__r{font-family:var(--daten);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rot)}
.karte__t{font-size:.95rem;color:var(--leise);flex:1}
.karte__u{font-family:var(--daten);font-size:.74rem;color:var(--leiser);margin-top:.4rem}
.karte__u::after{content:" →"}

.weg{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column}
.weg li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:1.2rem;padding:.9rem 0;
  border-top:1px solid var(--linie);max-width:76ch}
.weg__j{font-family:var(--daten);font-size:.92rem;color:var(--rot)}
.weg__t{color:var(--leise);font-size:.98rem}

.wege{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;
  max-width:60ch}
.wege li{display:grid;grid-template-columns:10ch minmax(0,1fr);gap:1rem;padding:.7rem 0;
  border-top:1px solid var(--linie)}
.wege b{font-family:var(--daten);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--leiser);font-weight:400;padding-top:.2rem}
.wege a{word-break:break-all}

footer{max-width:var(--breit);margin:0 auto;padding:4rem var(--sp) 2.5rem}
footer p{font-family:var(--daten);font-size:.74rem;color:var(--leiser);margin:0}
footer a{color:var(--leiser);border-bottom-color:var(--linie)}
@media(max-width:640px){
  .weg li{grid-template-columns:4.5ch minmax(0,1fr);gap:.8rem}
  .wege li{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Aufmacher, Aktuell, Fotopaar, Formate, Presse */
.zitat{font-weight:600;font-stretch:112%;letter-spacing:-.02em;line-height:1.08;margin:0 0 .6rem;
  font-size:clamp(1.45rem,4.2vw,3rem);color:var(--rot);hyphens:auto;overflow-wrap:anywhere}
.held__text h1{font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--leise);font-weight:500}
.aktuell{display:grid;gap:1.2rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.akt{display:flex;flex-direction:column;gap:.5rem;border-top:2px solid var(--rot);padding-top:.9rem}
.akt__w{font-family:var(--daten);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.akt p{margin:0;color:var(--leise);font-size:.96rem;flex:1}
.akt a{font-family:var(--daten);font-size:.76rem;align-self:flex-start}
.paar{display:grid;gap:1.4rem;margin-top:1.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.paar{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start;max-width:820px}}
.paar figure{margin:0;display:flex;flex-direction:column;gap:.6rem}
.paar img{width:100%;height:auto;border:1px solid var(--linie)}
.paar figure:last-child img{max-width:280px}
.paar figcaption{font-size:.88rem;color:var(--leiser);max-width:60ch}
.karten--drei .karte--still{cursor:default}
.karte--still:hover{transform:none;border-color:var(--linie)}
.karte__links{font-family:var(--daten);font-size:.76rem;margin-top:.4rem}
.bios{display:grid;gap:1.2rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bio{background:var(--panel);border:1px solid var(--linie);border-radius:3px;padding:1.3rem 1.4rem}
.bio h3{margin:0 0 .6rem;font-family:var(--daten);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);font-weight:400}
.bio p{margin:0;font-size:.92rem;color:var(--leise);user-select:all}
.h3{margin:2.4rem 0 0;font-size:1.1rem;font-weight:600}
.fotos{display:grid;gap:1.2rem;margin-top:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,180px))}
.pfoto{margin:0;display:flex;flex-direction:column;gap:.5rem}
.pfoto a{border:0;display:block}
.pfoto img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--linie)}
.pfoto figcaption{font-size:.84rem;color:var(--leise)}
.pfoto figcaption span{font-family:var(--daten);font-size:.7rem;color:var(--leiser)}
.stimmen{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;max-width:76ch}
.stimmen li{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 0;border-top:1px solid var(--linie)}
.stimme__m{font-family:var(--daten);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leiser)}

/* Pressespiegel, aufklappbar je Gruppe */
.spiegel{border-top:1px solid var(--linie);padding:.6rem 0}
.spiegel summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;gap:.6rem;align-items:baseline}
.spiegel summary::-webkit-details-marker{display:none}
.spiegel summary::before{content:"+";font-family:var(--daten);color:var(--rot);width:1.2ch}
.spiegel[open] summary::before{content:"–"}
.spiegel summary span{font-family:var(--daten);font-size:.72rem;color:var(--leiser)}
.spiegel .stimmen{margin-top:.4rem;margin-left:1.8ch}
.spiegel .stimmen li span:not(.stimme__m){color:var(--leise)}