/* weidt-architekt.de – Grundstil: schwarz / weiß, schlicht */

/* Schrift Carlito (frei, wie Calibri aus Logo und Visitenkarte) – lokal eingebunden, Lizenz: schrift/OFL.txt */
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/carlito-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/carlito-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/carlito-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/carlito-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --schwarz: #111;
  --weiss: #fff;
  --grau: #888;
  --hellgrau: #e6e6e6;
  --rand: 32px;
  --schrift: "Carlito", Calibri, "Segoe UI", sans-serif;}

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

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

body {
  font-family: var(--schrift);
  font-size: 17px; /* Carlito läuft etwas kleiner als Arial */
  line-height: 1.55;
  color: var(--schwarz);
  background-color: var(--weiss);
}

/* Punktraster wie auf der Visitenkarte – nur auf der Startseite, sehr hell; Kopfzeile bleibt weiß */
.startseite {
  background-image: radial-gradient(circle, #d4d4d4 1px, transparent 1.4px);
  background-size: 28px 28px;
  background-position: 18px 0;
}
/* nur die Projektkacheln (inkl. Abstand zwischen ihnen) bleiben punktfrei – leere Flächen behalten die Punkte */
.startseite .kachel { background-color: var(--weiss); box-shadow: 0 0 0 8px var(--weiss); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--rand);
  background-color: var(--weiss);
}

.logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.logo span { font-weight: 400; color: var(--grau); }
.logo-zeichen { display: inline-block; width: 30px; height: 30px; margin-right: 14px; vertical-align: middle; }

.nav { display: flex; gap: 28px; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.nav a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav .insta { display: flex; align-items: center; border-bottom: 0; padding-bottom: 0; }
.nav .insta:hover { color: var(--grau); }
.nav a:hover,
.nav a.aktiv { border-bottom-color: var(--schwarz); }

/* ---------- Kachelraster ---------- */

.raster {
  display: grid;
  /* immer 3 Kacheln pro Reihe (max. 340 px breit), mittig ausgerichtet */
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px var(--rand) var(--rand);
}

.kachel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--hellgrau);
}
.kachel:has(img) { background: var(--weiss); }

.kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.4s, transform 0.6s;
}

.kachel:hover img { filter: grayscale(0%); transform: scale(1.03); }

.kachel .info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 20px;
  text-align: center;
  color: var(--schwarz);
  background: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transition: opacity 0.3s;
}
.kachel:hover .info { opacity: 1; }

.kachel .titel { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.kachel .meta { font-size: 13px; color: var(--grau); }

/* Platzhalter, solange noch kein Bild da ist */
.platzhalter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grau);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Textseiten ---------- */

.inhalt {
  max-width: 1100px;
  padding: 40px var(--rand) 80px;
}

.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--hellgrau);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }

/* ---------- Schriftstile (Carlito, 4 Stile) ---------- */
.t-ueberschrift {               /* 1 · Überschrift */
  font-size: 24px; font-weight: 700; line-height: 1.25;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 16px;
}
.t-text {                       /* 2 · Fließtext und Beschreibung */
  font-size: 18px; font-weight: 400; line-height: 1.6;
  color: var(--schwarz); margin: 0 0 16px; max-width: 60ch;
}
.t-klein {                      /* 3 · kleinere Schrift */
  font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--schwarz);
}
.t-grau {                       /* 4 · klein in Grau */
  font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--grau);
}

/* ---------- Über mich: Bildspalte links, Textspalte rechts – alle Texte in einer Flucht ---------- */
/* 3 Spalten: Porträt | Texte (immer hier → eine Flucht) | Fahrrad versetzt rechts */
.ueber { max-width: 1240px; margin: 0 auto; padding: 56px var(--rand) 80px; }
.zeile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;           /* Text oben bündig mit dem Bild */
  margin-bottom: 64px;
}
.zeile > div { grid-column: 2; grid-row: 1; }
.zeile > .ueber-bild { grid-column: 1; grid-row: 1; }
.zeile.versetzt > .ueber-bild { grid-column: 3; }
/* erste Textzeile optisch bündig mit der Bildoberkante (Zeilenabstand ausgleichen) */
.zeile > div > .t-text:first-child { margin-top: -0.32em; }
.zeile > div > .t-ueberschrift:first-child { margin-top: -0.22em; }
.ueber-bild { aspect-ratio: 4 / 5; overflow: hidden; background: var(--weiss); }
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; filter: grayscale(100%); }

.eintraege { list-style: none; max-width: 60ch; margin-top: 8px; }
.eintraege li { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--hellgrau); }
.eintraege li:last-child { border-bottom: 1px solid var(--hellgrau); }

h1 { font-size: 28px; font-weight: 400; letter-spacing: 0.02em; margin-bottom: 24px; }
h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 36px 0 12px;
}
p { margin-bottom: 14px; max-width: 62ch; }

.liste { list-style: none; }
.liste li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hellgrau); }
.liste li span:first-child { color: var(--grau); }
.liste small { font-size: 14px; color: var(--grau); }

.kontakt-liste {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  max-width: 620px;
  margin-top: 8px;
}
.kontakt-liste dd { padding-left: 24px; }
.kontakt-liste dt, .kontakt-liste dd {
  margin: 0; padding: 12px 0;
  border-top: 1px solid var(--hellgrau);
  line-height: 1.6;
}
.kontakt-liste dt { font-size: 15px; padding-top: 14px; }   /* grau, Grundlinie passend zur Angabe */
.kontakt-liste dd { max-width: none; }
.kontakt-liste dt:nth-last-of-type(1), .kontakt-liste dd:last-of-type { border-bottom: 1px solid var(--hellgrau); }
.kontakt-liste a:hover { color: var(--grau); }

/* ---------- Projektseite ---------- */

.projekt-titel { padding: 32px var(--rand) 24px; margin: 0; }
.projekt-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 560px);
  gap: 56px;
  align-items: start;          /* Bild und Text oben bündig */
  padding: 0 var(--rand) var(--rand);
}
.projekt-text .liste { margin-bottom: 20px; }
.projekt-text .liste li:first-child { border-top: 0; padding-top: 0; }

.galerie { display: grid; gap: 4px; background: var(--weiss); }
.galerie .bild { overflow: hidden; }
.galerie .bild .platzhalter { aspect-ratio: 3 / 2; background: var(--hellgrau); }
.galerie .bild img { width: 100%; height: auto; }

.zurueck { display: inline-block; padding: 0 var(--rand) 60px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.zurueck:hover { text-decoration: underline; }

/* ---------- Fußzeile ---------- */

.fuss {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--rand);
  font-size: 13px;
  color: var(--grau);
  border-top: 1px solid var(--hellgrau);
}
.fuss nav { display: flex; gap: 20px; }
.fuss a:hover { color: var(--schwarz); }

/* ---------- Tablet / Handy ---------- */

@media (max-width: 900px) {
  .zweispaltig, .projekt-inhalt { grid-template-columns: 1fr; gap: 32px; }
  .zeile { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .zeile > div, .zeile > .ueber-bild, .zeile.versetzt > .ueber-bild { grid-column: 1; grid-row: auto; }
  .zeile > div:empty { display: none; }
  .ueber-bild { width: 100%; max-width: 280px; }
}

@media (max-width: 560px) {
  :root { --rand: 16px; }
  .kopf { flex-direction: column; gap: 10px; padding: 18px var(--rand); }
  .logo { font-size: 13px; letter-spacing: 0.08em; }
  .logo-zeichen { width: 26px; height: 26px; margin-right: 10px; }
  .nav { gap: 20px; }
  .raster { grid-template-columns: 1fr; }  /* auf dem Handy gibt es kein Hover – Bild ohne Überlagerung zeigen */
  .kachel .info { display: none; }
  .kachel img { filter: grayscale(0%); }
  .fuss { flex-direction: column; }
}