/* Franziska Mende – Hauptseite (Dachmarke). Stil: Mix aus „elegant“ und „schwarz, modern“
   (Entscheidung Franzi 17.10.2026). Farben und Schriften siehe ../Markenprofil.md.
   UntermStrich hat ein eigenes Stylesheet: /untermstrich/untermstrich.css.
   Schriften (OFL, lokal, auf Latein gekürzt): Cormorant Garamond (Überschriften), DM Sans (Text). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans.woff") format("woff");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --tinte: #151816;
  --gruen: #3e4f45;
  --salbei: #4d5e55;
  --altrosa: #c48b92;
  --rosenholz: #8c4f58;
  --creme: #f3f1ec;
  --linie: #dcd8cf;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

html { background: var(--creme); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--tinte);
  background: var(--creme);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a { color: var(--gruen); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--rosenholz); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

p { margin: 0 0 1rem; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }

/* Kopfzeile */
.topnav, .wrap > header:not(.hero) {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 2rem; padding: 1.75rem 0;
}
.name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: .005em; color: var(--tinte); text-decoration: none; }
.topnav nav { display: flex; flex-wrap: wrap; gap: .25rem 2rem; font-size: .95rem; }
.topnav nav a { color: var(--salbei); text-decoration: none; }
.topnav nav a:hover { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--altrosa); }

/* Hero */
.hero { padding: clamp(4rem, 12vw, 9rem) 0 clamp(4rem, 10vw, 7rem); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 8.5vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--tinte);
  margin: 0;
  max-width: 15ch;
}
.hero .strich { display: block; width: 3.5rem; height: 1px; background: var(--altrosa); margin: 2.25rem 0 1.75rem; }
.hero .claim { font-size: clamp(1.1rem, 1.8vw, 1.25rem); line-height: 1.6; color: var(--salbei); max-width: 32rem; margin: 0 0 2.25rem; }

.btn {
  display: inline-block; padding: .85rem 1.5rem; border-radius: .25rem;
  background: var(--tinte); color: var(--creme); text-decoration: none; font-weight: 500; letter-spacing: .01em;
}
.btn:hover { background: var(--gruen); color: var(--creme); }
.btn--rand { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.btn--rand:hover { background: var(--tinte); color: var(--creme); }

/* Abschnitte: Titel links, Inhalt rechts */
.row {
  display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr);
  gap: 1rem 3rem; padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--linie);
}
.row h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.1;
  margin: 0; color: var(--gruen);
}
.row .content { max-width: var(--measure); }
.row .content p:last-child { margin-bottom: 0; }

.leistungen { list-style: none; margin: 0; padding: 0; }
.leistungen li { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); font-weight: 500; }
.leistungen li:first-child { padding-top: 0; }
.leistungen li:last-child { border-bottom: 0; padding-bottom: 0; }
.leistungen small { display: block; color: var(--salbei); font-weight: 400; font-size: .97rem; margin-top: .15rem; }

/* Kontakt */
.kontakt-mail {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.1;
  color: var(--tinte); word-break: break-word; text-decoration-color: var(--altrosa); text-decoration-thickness: 1px;
}
.kontakt-mail:hover { color: var(--gruen); }

/* Rechtliche Seiten (Impressum, Datenschutz) */
main > h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05; margin: 2.5rem 0 2rem;
}
main > h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; margin: 2.25rem 0 .4rem; color: var(--gruen); }
main > p, main > ul { max-width: var(--measure); }

footer {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  padding: 2rem 0 3rem; margin-top: 2rem; border-top: 1px solid var(--linie);
  color: var(--salbei); font-size: .92rem;
}
footer a { color: var(--salbei); }

@media (max-width: 46rem) {
  .row { grid-template-columns: 1fr; }
}

/* Kunden- und eigene Projekte: Überschrift und Logo links, Text rechts; nur der Link ist klickbar */
.pj { row-gap: 1.75rem; }
.pj .pj-rechts { max-width: var(--measure); }
.pj .pj-rechts + .pj-links, .pj .pj-rechts + .pj-links + .pj-rechts { padding-top: 2rem; margin-top: .5rem; border-top: 1px solid var(--linie); }
.pj .pj-rechts + .pj-links { border-top: 0; }
.pj .projekte-intro { color: var(--tinte); margin: .4rem 0 0; max-width: var(--measure); }
.pj h3 { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.1; margin: 0 0 .5rem; }
.pj .pj-rechts p:not(.projekte-intro) { color: var(--salbei); margin: 0 0 .6rem; }
.pj .pj-rechts a { text-decoration-color: var(--altrosa); }
.projekt-logo { width: 5rem; height: 5rem; border-radius: 1rem; object-fit: cover; display: block; }