/* Schriften lokal statt von Google — sonst geht die IP jedes Besuchers
   ohne Einwilligung an Google (LG Muenchen I, 20.01.2022, 3 O 17493/20). */
@import url('fonts.css');

:root{
  --white: #FBFBF9;
  --black: #101010;
  --grey: #8C8A84;
  --hairline: #E4E2DA;
  --max: 760px;
  --max-rahmen: 980px;   /* Kopf- und Fusszeile duerfen breiter laufen als die Textspalte */

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Instrument Sans', 'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }

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

/* ---------- Nav ---------- */
nav.top{
  padding:40px 0 34px;
  border-bottom:1px solid var(--hairline);
}
nav.top .wrap{
  max-width:var(--max-rahmen);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
}
.brand img{
  height:clamp(52px, 6vw, 68px);
  width:auto;
  display:block;
  transition:opacity 0.25s ease;
}
.brand:hover img{ opacity:0.6; }
.navlinks{
  display:flex;
  gap:34px;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--grey);
}
.navlinks a{ color:var(--grey); position:relative; padding-bottom:3px; }
.navlinks a.active{ color:var(--black); }
.navlinks a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--black);
  transition:width 0.3s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{ width:100%; }

/* ---------- Sprachumschalter ----------
   Sitzt in .navlinks, erbt daher Schrift, Farbe und Unterstrich
   von .navlinks a — hier nur der Abstand und der Trenner. */
.lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:20px;
  border-left:1px solid var(--hairline);
}
.lang .teiler{ color:var(--hairline); }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--hairline);
  padding:30px 0 46px;
  margin-top:70px;
}
.rechtslinks{
  display:flex;
  gap:20px;
}
.rechtslinks a{
  color:var(--grey);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.rechtslinks a:hover{
  color:var(--black);
  border-bottom-color:var(--black);
}

footer .wrap{
  max-width:var(--max-rahmen);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--grey);
}

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:22px;
}
h1.display{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px, 7vw, 68px);
  line-height:1.04;
  letter-spacing:-0.035em;
  margin:0;
}
.italic-lede{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(19px, 2.2vw, 23px);
  color:#2B2924;
  line-height:1.45;
  letter-spacing:-0.02em;
  margin:0;
}

p{ margin:0 0 20px; }
.grey{ color:var(--grey); }

section{ padding:64px 0; }
.rule{ border-top:1px solid var(--hairline); }

/* ---------- Kontaktformular ---------- */
.formular{
  width:100%;
  max-width:440px;
  margin:0 auto;
  text-align:left;
}
.feld{ margin-bottom:26px; }
.feld label{
  display:block;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:8px;
}
.feld input,
.feld textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;               /* unter 16px zoomt iOS beim Antippen hinein */
  color:var(--black);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hairline);
  padding:6px 0 10px;
  border-radius:0;              /* iOS rundet Felder sonst selbst ab */
  transition:border-color 0.2s ease;
}
.feld textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.6;
}
.feld input:focus,
.feld textarea:focus{
  outline:none;
  border-bottom-color:var(--black);
}
.senden{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--black);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--black);
  padding:0 0 4px;
  margin-top:6px;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.senden:hover{ opacity:0.55; }
/* Honigtopf gegen Spam-Roboter: fuer Menschen unsichtbar, fuer Skripte sichtbar */
.honigtopf{ position:absolute; left:-9999px; }

/* ---------- Zwei-Klick-Einbettungen ---------- */
/* Abspielknopf, der anstelle des YouTube-Players steht */
.laden{
  position:absolute;
  inset:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#F2F1EC;
  border:0;
  cursor:pointer;
  padding:14px;
  text-align:center;
  transition:background 0.2s ease;
}
.laden:hover{ background:#EBE9E2; }
.laden .pfeil{
  width:38px; height:38px;
  border:1px solid var(--black);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--black);
  padding-left:2px;
}
.laden .text{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--black);
}
.laden .klein{
  font-family:var(--sans);
  font-size:10.5px;
  line-height:1.4;
  color:var(--grey);
  max-width:210px;
}

/* Leiste ueber den Arbeitsproben */
.bild-hinweis{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:16px 18px;
  margin-bottom:10px;
  background:#F2F1EC;
}
.bild-hinweis p{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.5;
  color:var(--grey);
  margin:0;
  max-width:520px;
}
.bild-hinweis a{ border-bottom:1px solid var(--hairline); }
.bild-hinweis a:hover{ border-bottom-color:var(--black); }
.bild-hinweis button{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--black);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--black);
  padding:0 0 3px;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity 0.2s ease;
}
.bild-hinweis button:hover{ opacity:0.55; }

/* leerer Bildrahmen, solange nicht geladen */
.thumb[data-bild]{ background:#F2F1EC; }

/* fade-in */
.fade{
  opacity:0;
  transform:translateY(10px);
  animation: fadein 0.9s ease forwards;
}
@keyframes fadein{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .fade{ animation:none; opacity:1; transform:none; }
}