/* ==================================================================
   Glaschak Consulting - Entwurf "modern"
   Handgeschrieben. Keine Bibliothek, keine externen Schriften,
   keine nachgeladenen Ressourcen.

   Gestalterische Grundidee
   ------------------------
   Eine Beratung ohne Kundenlogos und ohne Fallzahlen kann nicht mit
   Belegen auftrumpfen. Also muss die Haltung tragen. Deshalb:
   wenig Elemente, viel Luft, sehr grosse Schrift an wenigen Stellen -
   und eine Serifenschrift fuer die Ueberschriften. Serifen wirken
   gewachsen statt frisch gegruendet, und Georgia ist auf praktisch
   jedem Geraet vorhanden, kostet also keinen einzigen Ladevorgang.
   ================================================================== */

:root {
  /* Farben */
  --tinte:        #0d1b2a;   /* Nachtblau, der Anker */
  --tinte-weich:  #22354a;
  --papier:       #faf8f5;   /* warmes Off-White, nicht klinisch */
  --papier-rein:  #ffffff;
  --schiefer:     #55606e;   /* Nebentext */
  --kupfer:       #a9531f;   /* Akzent, warm und erwachsen */
  --kupfer-hell:  #f2e7de;
  --linie:        #e4ded6;
  --linie-dunkel: #24384d;

  /* Masse */
  --rand:       min(6vw, 5rem);
  --breite:     1240px;
  --schmal:     62ch;

  /* Schriften */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--tinte); text-underline-offset: .2em; }
a:hover { color: var(--kupfer); }

:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 3px; }

.bahn {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.schmal { max-width: var(--schmal); }

.springen {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte); color: #fff;
  padding: .8rem 1.2rem; z-index: 50;
}
.springen:focus { left: 0; }

.nurfuerleser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Typografie -------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.riese {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  margin: 0;
}

.gross {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 1.5rem;
}

h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 .6rem;
}

/* Kleine Grossbuchstaben-Marke ueber jedem Abschnitt */
.marke-klein {
  font-family: var(--sans);
  font-size: .775rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kupfer);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.marke-klein::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
  max-width: 5rem;
}

.vorspann {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 54ch;
}

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

/* --- Kopf -------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 245, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf .bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  min-height: 84px;
  padding-block: 1rem;
}

.marke img { width: 205px; height: 37px; }

.menue ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menue a {
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1.5px solid transparent;
}
.menue a:hover,
.menue a[aria-current="page"] { border-bottom-color: var(--kupfer); }

/* --- Knopf ------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1.5px solid var(--tinte);
  background: var(--tinte);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf:hover { background: var(--kupfer); border-color: var(--kupfer); color: #fff; }

.knopf-leer {
  background: transparent;
  color: var(--tinte);
}
.knopf-leer:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }

.knopf-hell {
  background: transparent;
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.knopf-hell:hover { background: #fff; border-color: #fff; color: var(--tinte); }

.pfeil { font-size: 1.1em; line-height: 1; }

/* --- Auftakt ----------------------------------------------------- */

.auftakt {
  position: relative;
  background: var(--tinte);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Das Bruecken-Bild liegt hinter dem Text. Links bleibt es dunkel,
   damit die Schrift ruhig lesbar ist; nach rechts wird der Verlauf
   duenner und gibt die Bruecke frei. */
.auftakt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("bilder/golden_gate_large3b.jpg");
  background-size: cover;
  background-position: 62% 55%;
  filter: grayscale(.3) contrast(1.02);
  opacity: .72;
  z-index: -2;
}

.auftakt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(13,27,42,.95)  0%,
              rgba(13,27,42,.88) 30%,
              rgba(13,27,42,.60) 62%,
              rgba(13,27,42,.30) 100%);
  z-index: -1;
}

/* Auf schmalen Bildschirmen laeuft der Text ueber die volle Breite.
   Dann muss der Verlauf von oben nach unten abdunkeln statt von
   links nach rechts, sonst steht weisse Schrift auf hellem Wasser. */
@media (max-width: 860px) {
  .auftakt::after {
    background: linear-gradient(to bottom,
                rgba(13,27,42,.92)  0%,
                rgba(13,27,42,.86) 55%,
                rgba(13,27,42,.94) 100%);
  }
}

.auftakt .bahn {
  padding-block: clamp(5rem, 14vh, 9rem);
}

/* Im Auftakt eine Spur zurueckhaltender als auf den Unterseiten -
   die Aussage soll wirken, nicht die Schriftgroesse. */
.auftakt .riese {
  max-width: 24ch;
  font-size: clamp(2.05rem, 4.9vw, 3.45rem);
}

.auftakt .marke-klein { color: #e9a86b; }
.auftakt .marke-klein::after { background: var(--linie-dunkel); }

.auftakt .riese em {
  font-style: normal;
  color: #e9a86b;
}

.auftakt .vorspann {
  color: rgba(255,255,255,.82);
  margin-top: 2rem;
}

.auftakt-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* Die drei Brueckenschlaege direkt unter dem Auftakt.
   Die Einleitungszeile und die drei Spalten sind ein einziger Satz,
   der sich in die Spalten fortsetzt - deshalb steht sie darueber
   und nicht als eigener Abschnitt. */
.bruecken {
  border-top: 1px solid var(--linie-dunkel);
  background: rgba(0,0,0,.28);
}
.bruecken .bahn { padding-block: 2.75rem; }

.bruecken-auftakt {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.4;
  color: rgba(255,255,255,.85);
  margin: 0 0 2rem;
  max-width: 40ch;
}
.bruecken-auftakt em { font-style: normal; color: #e9a86b; }

.bruecken-spalten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bruecken-spalten > div {
  padding-right: 2rem;
  border-right: 1px solid var(--linie-dunkel);
}
.bruecken-spalten > div:last-child { border-right: 0; padding-right: 0; }
.bruecken-spalten > div:not(:first-child) { padding-left: 2rem; }

.bruecken span {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.35;
  color: #fff;
}
.bruecken .nr {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: #e9a86b;
  margin-bottom: .7rem;
}

/* --- Abschnitte -------------------------------------------------- */

section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.hell  { background: var(--papier-rein); }
.warm  { background: var(--kupfer-hell); }
.dunkel {
  background: var(--tinte);
  color: rgba(255,255,255,.86);
}
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .marke-klein { color: #e9a86b; }
.dunkel .marke-klein::after { background: var(--linie-dunkel); }
.dunkel a { color: #fff; }
.dunkel .vorspann { color: rgba(255,255,255,.8); }

.kopfzeile { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- Leistungsfelder --------------------------------------------- */

.felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.feld {
  background: var(--papier-rein);
  padding: 2.5rem 2rem 2.75rem;
  display: flex;
  flex-direction: column;
}

.feld .zahl {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--kupfer-hell);
  margin-bottom: 1.25rem;
}

.feld ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: .975rem;
  color: var(--schiefer);
}
.feld li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: .5rem;
  line-height: 1.5;
}
.feld li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  background: var(--kupfer);
}

/* --- Arbeitsweise, zweispaltig ----------------------------------- */

.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.grundsaetze { display: grid; gap: 2.25rem; }

.grundsatz {
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 1.5rem;
}
.hell .grundsatz, .warm .grundsatz { border-top-color: var(--linie); }

.grundsatz h3 { margin-bottom: .5rem; }
.grundsatz p { font-size: 1rem; margin: 0; }

/* --- Profil ------------------------------------------------------ */
/* Die folgenden Regeln fuer .profil und .portraet werden derzeit von
   keiner Seite genutzt: Der Entwurf kommt bewusst ohne Personenbild
   aus. Sie bleiben stehen, falls du es dir anders ueberlegst - dann
   genuegt es, in index.html und about.html den Bildblock wieder
   einzusetzen. Loeschen kannst du sie sonst gefahrlos. */

.profil {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Der Rahmen ist hochkant im Verhaeltnis 4:5, die Bildvorlage im
   Verhaeltnis 2:3 - es wird also oben und unten etwas abgeschnitten.
   Der zweite Wert bei object-position steuert, wo: kleinere Zahl
   heisst weiter oben. 40% laesst etwas Luft ueber dem Kopf und
   behaelt Notizbuch und Schreibtisch am unteren Rand.

   Falls doch das aeltere Studioportraet verwendet wird - das ist im
   Querformat - stattdessen "57% 22%" eintragen. */
.portraet {
  position: relative;
  background: var(--kupfer-hell);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.portraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.dunkel .vita li { border-top-color: var(--linie-dunkel); }
.dunkel .vita b  { color: #e9a86b; }

/* Platzhalter, solange kein Foto da ist */
.portraet-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-size: .9rem;
  color: var(--kupfer);
  border: 1px dashed var(--kupfer);
}

.vita { list-style: none; margin: 2rem 0 0; padding: 0; }
.vita li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linie);
  font-size: 1rem;
}
.vita b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kupfer);
}

.quellen { list-style: none; margin: 0; padding: 0; }
.quellen li {
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
  font-size: .975rem;
  line-height: 1.55;
  color: var(--schiefer);
}
.dunkel .quellen li {
  border-top-color: var(--linie-dunkel);
  color: rgba(255,255,255,.75);
}

/* --- Projekte (noch leer) ---------------------------------------- */

.projekte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
}

.projekt {
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  padding: 2rem;
}
.projekt .kopfzahl {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kupfer);
  margin-bottom: .9rem;
}
.projekt .eckdaten {
  font-size: .9rem;
  color: var(--schiefer);
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linie);
}

.projekt h4 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kupfer);
  margin: 1.5rem 0 .6rem;
}
.projekt h4:first-of-type { margin-top: 0; }

.projekt p.rolle { font-size: .95rem; margin: 0; }

.projekt ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}
.projekt li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .6rem;
  line-height: 1.5;
}
.projekt li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  background: var(--kupfer);
}

/* Leise Anmerkung unter einem Abschnitt - erklaert etwas, ohne sich
   in den Vordergrund zu draengen. */
.fussnote {
  margin: 2.25rem 0 0;
  font-size: .9rem;
  color: var(--schiefer);
}

/* --- Kontaktband ------------------------------------------------- */

.kontaktband .bahn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.mail-gross {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: 1.5rem 0 0;
}
.mail-gross a { text-decoration-thickness: 1px; }

/* --- Formular ---------------------------------------------------- */

.formular { display: grid; gap: 1.4rem; max-width: 40rem; }

.feldpaar { display: grid; gap: .45rem; }

.formular label {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: .85rem 1rem;
  width: 100%;
}
.formular textarea { min-height: 11rem; resize: vertical; }

.formular input:focus, .formular textarea:focus {
  border-color: var(--kupfer);
  outline: 2px solid var(--kupfer);
  outline-offset: -2px;
}

.einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .925rem;
  line-height: 1.5;
}
.einwilligung input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; }
.einwilligung label { font-weight: 400; letter-spacing: 0; }

/* Honigtopf: fuer Menschen unsichtbar, fuer viele Spam-Programme
   nicht. Wer hier etwas eintraegt, ist keines. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.meldung {
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--kupfer);
  background: var(--kupfer-hell);
  font-size: .975rem;
  margin-bottom: 2rem;
  max-width: 40rem;
}
.meldung.gut { border-left-color: #2f7d52; background: #e7f2ea; }

/* --- Feeds (nur auf info) ---------------------------------------- */

.feeds { background: var(--tinte); color: rgba(255,255,255,.72); padding-block: 4rem; font-size: .9rem; }
.feeds .bahn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.feeds h2 {
  font-family: var(--sans);
  font-size: .775rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e9a86b;
  margin: 0 0 1.2rem;
  display: flex; align-items: center; gap: .55rem;
}
.feeds h2 a { color: #e9a86b; text-decoration: none; }
.feeds ul { list-style: none; margin: 0; padding: 0; }
.feeds li { margin-bottom: 1rem; line-height: 1.45; }
.feeds a { color: rgba(255,255,255,.82); text-decoration: none; }
.feeds a:hover { color: #fff; text-decoration: underline; }
.feeds .datum { display: block; font-size: .775rem; color: rgba(255,255,255,.42); margin-top: .2rem; }
.feeds .stand {
  grid-column: 1 / -1;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 1.25rem;
  font-size: .78rem;
  color: rgba(255,255,255,.42);
}

/* --- Fuss -------------------------------------------------------- */

.fuss {
  background: var(--tinte);
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  padding-block: 3rem;
  border-top: 1px solid var(--linie-dunkel);
}
.fuss .bahn {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}
.fuss a { color: rgba(255,255,255,.8); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* --- Listen im Fliesstext ---------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  padding: .9rem 0 .9rem 1.6rem;
  border-top: 1px solid var(--linie);
  position: relative;
}
.liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.5em;
  width: 6px; height: 6px;
  background: var(--kupfer);
}

/* --- Schmalere Bildschirme --------------------------------------- */

@media (max-width: 1000px) {
  .zweispalt,
  .kontaktband .bahn { grid-template-columns: 1fr; }
  .profil { grid-template-columns: 1fr; }
  .portraet { max-width: 20rem; }
  .feeds .bahn { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .kopf { position: static; }
  .kopf .bahn { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .menue ul { gap: .4rem 1.25rem; }
  .bruecken-spalten { grid-template-columns: 1fr; }
  .bruecken-spalten > div {
    border-right: 0;
    border-bottom: 1px solid var(--linie-dunkel);
    padding: 1.5rem 0 !important;
  }
  .bruecken-spalten > div:first-child { padding-top: 0 !important; }
  .bruecken-spalten > div:last-child { border-bottom: 0; padding-bottom: 0 !important; }
  .feeds .bahn { grid-template-columns: 1fr; }
  .vita li { grid-template-columns: 1fr; gap: .2rem; }
  .auftakt-knoepfe .knopf { width: 100%; justify-content: center; }
}

@media print {
  .kopf, .auftakt::before, .feeds, .springen { display: none; }
  body { background: #fff; font-size: 11pt; }
  section { padding-block: 1.5rem; }
}