/* ============================================================
   michael-coelle.de – gemeinsame Gestaltung aller Seiten
   Diese Datei enthaelt nur Design, keinen Text.
   Text wird in den HTML-Dateien geaendert.
   ============================================================ */

/* ------------------------------------------------------------
   STELLSCHRAUBEN FUER DAS HINTERGRUNDFOTO

   Die Werte sind Deckkraft-Angaben zwischen 0 und 1.
   Kleinere Zahl  = dunkler Schleier duenner = Foto besser sichtbar
   Groessere Zahl = dunkler Schleier dichter = Text besser lesbar

   Aendere jeweils nur die Zahl vor dem Semikolon.
   ------------------------------------------------------------ */
:root{
  --foto-kopf-links:   0.86;   /* Kopfbereich, wo die Ueberschrift steht */
  --foto-kopf-mitte:   0.62;   /* Kopfbereich, Uebergang zur Bildmitte   */
  --foto-kopf-rechts:  0.18;   /* Kopfbereich, rechte Seite mit Portraet */
  --foto-textbereich:  0.78;   /* Alles unterhalb des Kopfbereichs       */
  --foto-handy-oben:   0.45;   /* Nur Handy: oberer Bildausschnitt        */
  --foto-handy-mitte:  0.74;   /* Nur Handy: Uebergang                    */
  --foto-handy-unten:  0.88;   /* Nur Handy: unterer Textbereich          */

  --ink:#0B0C0D;
  --paper:#EFEDE9;
  --muted:#9E9B94;
  --line:#8A8378;
  --sans: "Avenir Next","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --col: 720px;
  --pad: clamp(1.5rem, 5vw, 4rem);
  --rail: clamp(0.7rem, 2.4vw, 2rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.09rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* Das Foto liegt fixiert hinter allem. Eigene Ebene statt
   background-attachment:fixed, weil das auf iPhones nicht funktioniert. */
.backdrop{
  position:fixed; inset:0; z-index:-2;
  background:url("michael-coelle.jpg") center right / cover no-repeat;
}
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(11,12,13,var(--foto-kopf-links))  0%,
    rgba(11,12,13,var(--foto-kopf-mitte))  45%,
    rgba(11,12,13,var(--foto-kopf-rechts)) 100%);
}
@media (max-width:820px){
  .backdrop{background-position:72% top}
  .backdrop::after{
    background:linear-gradient(180deg,
      rgba(11,12,13,var(--foto-handy-oben))  0%,
      rgba(11,12,13,var(--foto-handy-mitte)) 55%,
      rgba(11,12,13,var(--foto-handy-unten)) 100%);
  }
}

.lang{
  position:absolute; top:clamp(1.2rem,3vw,2rem); right:var(--pad);
  z-index:3; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.lang a,.lang span{color:var(--muted); text-decoration:none; padding:.25rem .1rem}
.lang span{color:var(--paper)}
.lang a:hover{color:var(--paper)}
.lang i{font-style:normal; opacity:.35; margin:0 .5rem}

.wrap{max-width:var(--col); margin:0; padding:0 var(--pad)}

/* ---------- Kopfbereich ---------- */
.hero{
  min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(4rem,12vh,9rem);
}
.hero h1{
  margin:0 0 1.4rem;
  font-weight:300;
  font-size:clamp(2.35rem,5.5vw,3.95rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.hero h1 small{
  display:block; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1.1rem; font-weight:500;
}
.lede{
  max-width:34em; font-size:1.16em; line-height:1.6; margin:0;
  border-left:1px solid rgba(138,131,120,.55); padding-left:1.4rem;
}
.lede b{font-weight:500}

/* ---------- Inhalt ---------- */
main{position:relative; background:rgba(11,12,13,var(--foto-textbereich)); backdrop-filter:blur(2px)}
main::before{
  content:""; position:absolute; top:0; bottom:0;
  left:var(--rail); width:1px;
  background:linear-gradient(180deg,transparent,rgba(138,131,120,.45) 6%,rgba(138,131,120,.45) 94%,transparent);
}

section{padding:clamp(3.5rem,9vh,7rem) 0; position:relative}
section + section{border-top:1px solid rgba(239,237,233,.07)}

h2{
  margin:0 0 2rem;
  font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.55rem);
  line-height:1.25; letter-spacing:-.005em; position:relative;
}
h2::before{
  content:""; position:absolute; left:calc(var(--rail) - var(--pad) - 4px); top:.58em;
  width:9px; height:9px;
  border-radius:50%; background:var(--line);
}
p{margin:0 0 1.25rem; max-width:36em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 .7rem;
}

/* Drei Kompetenzfelder */
.field{margin-bottom:2.6rem}
.field:last-of-type{margin-bottom:0}
.field ul{margin:0; padding:0; list-style:none}
.field li{
  padding:.32rem 0 .32rem 1.15rem; position:relative;
  color:rgba(239,237,233,.88);
}
.field li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:5px; height:1px; background:var(--line);
}

.converge{
  margin-top:2.8rem; padding-top:2.4rem;
  border-top:1px solid rgba(138,131,120,.3);
}

/* Hervorgehobener Absatz - gleiche Schriftgroesse wie der Fliesstext,
   nur durch die Linie links abgesetzt. */
blockquote{
  margin:0 0 1.25rem; max-width:36em;
  font-size:1em; font-weight:400; line-height:1.75; letter-spacing:normal;
  border-left:1px solid rgba(138,131,120,.5); padding-left:1.4rem;
}

/* Zahlen */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem 1rem; margin:0 0 2.8rem}
.figures:last-child{margin-bottom:0}
.figures div{border-top:1px solid rgba(239,237,233,.14); padding-top:.9rem}
.figures b{
  display:block; font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1;
  letter-spacing:-.02em; margin-bottom:.5rem;
}
.figures span{font-size:.82rem; line-height:1.4; color:var(--muted); display:block}
@media (max-width:640px){.figures{grid-template-columns:repeat(2,1fr)}}

/* Links */
.links{list-style:none; margin:0; padding:0}
.links li{border-bottom:1px solid rgba(239,237,233,.12)}
.links a{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding:1.1rem 0; color:var(--paper); text-decoration:none;
  transition:color .2s, padding-left .2s;
}
.links a:hover,.links a:focus-visible{color:#fff; padding-left:.5rem}
.links strong{font-weight:500; font-size:1.06em}
.links em{font-style:normal; color:var(--muted); font-size:.88em}
.links a::after{content:"→"; margin-left:auto; color:var(--line)}

footer{
  background:rgba(8,9,10,.94); font-size:.85rem; color:var(--muted);
  padding:2.6rem 0;
}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(158,155,148,.35)}
footer a:hover{color:var(--paper)}
footer .row{display:flex; gap:1.6rem; flex-wrap:wrap}

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

.rise{animation:rise .9s cubic-bezier(.2,.7,.3,1) both}
.rise:nth-child(2){animation-delay:.12s}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Rechtliche Seiten (Impressum, Datenschutz)
   Ohne Hintergrundfoto, damit der Text ruhig lesbar bleibt.
   ============================================================ */
.doc{background:var(--ink); min-height:100vh}
.doc main{background:none; backdrop-filter:none}
.doc main::before{display:none}
.doc .back{
  display:inline-block; margin:clamp(2rem,6vh,3.5rem) 0 2.5rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.doc .back:hover{color:var(--paper)}
.doc h1{
  font-weight:300; font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:-.02em; line-height:1.15; margin:0 0 2.5rem;
}
.doc h2{
  font-size:1.05rem; font-weight:500; margin:2.8rem 0 .9rem;
  letter-spacing:0;
}
.doc h2::before{display:none}
.doc h2:first-of-type{margin-top:0}
.doc p{max-width:38em; color:rgba(239,237,233,.86)}
.doc address{font-style:normal; margin:0 0 1.25rem; line-height:1.7}
.doc ul{max-width:38em; padding-left:1.1rem; margin:0 0 1.25rem; color:rgba(239,237,233,.86)}
.doc li{margin-bottom:.4rem}
.doc a{color:var(--paper)}
.doc section{padding:0 0 clamp(3rem,8vh,5rem)}
.doc section + section{border-top:none}
.doc .note{
  border-left:1px solid rgba(138,131,120,.5); padding-left:1.4rem;
  color:var(--muted); font-size:.92em; margin-top:2.5rem;
}