/* joerg-esser.de — gemeinsames Stylesheet
   Bewusst ohne externe Schriftarten oder Skripte: Die Datenschutzerklaerung
   sagt zu, dass keine Inhalte von fremden Servern nachgeladen werden. Eine
   eingebundene Google-Schriftart wuerde genau das brechen. */

:root {
  --grund: #ffffff;
  --grund-weich: #f5f7f9;
  --text: #1c1e21;
  --gedaempft: #5a6068;
  --linie: #e2e5e9;
  --akzent: #1d4e89;
  --akzent-weich: #e8eff7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14161a;
    --grund-weich: #1b1e24;
    --text: #e6e8ea;
    --gedaempft: #a0a6ad;
    --linie: #2b2f36;
    --akzent: #7aa7d9;
    --akzent-weich: #1c2733;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.huelle { max-width: 46rem; margin: 0 auto; }

/* Kopf */
header.kopf {
  padding: 4.5rem 0 2.5rem;
  border-bottom: 1px solid var(--linie);
}
header.kopf h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6rem;
}
header.kopf .unterzeile {
  color: var(--gedaempft);
  font-size: 1.05rem;
  margin: 0;
}

/* Innenseiten */
header.klein {
  padding: 3rem 0 1.5rem;
}
header.klein h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 .35rem;
}
.stand { color: var(--gedaempft); font-size: .9rem; margin: 0; }

.zurueck {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .92rem;
}
.zurueck:hover { color: var(--akzent); }

/* Abschnitte */
section { padding: 2.5rem 0; border-bottom: 1px solid var(--linie); }
section:last-of-type { border-bottom: 0; }

h2 {
  font-size: 1.15rem;
  margin: 0 0 .9rem;
  letter-spacing: .01em;
}
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: .4rem; }

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

address { font-style: normal; }

/* Kartenliste fuer Projekte */
.karten {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .75rem;
}
.karten li { margin: 0; }
.karten a {
  display: block;
  padding: 1rem 1.15rem;
  background: var(--grund-weich);
  border: 1px solid var(--linie);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.karten a:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.karten .titel { display: block; font-weight: 600; margin-bottom: .15rem; }
.karten .beschreibung { display: block; color: var(--gedaempft); font-size: .93rem; }

/* Hinweiskasten */
.kasten {
  background: var(--grund-weich);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.kasten p:first-child { margin-top: 0; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .95rem;
}
th, td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
th { font-weight: 600; }

/* Fuss */
footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: .92rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
}
footer .abstand { margin-left: auto; }
footer a { color: var(--gedaempft); }
footer a:hover { color: var(--akzent); }

@media (max-width: 34rem) {
  header.kopf { padding-top: 3rem; }
  footer .abstand { margin-left: 0; }
}