/* ==========================================================
   serienflimmern
   Schriften: Manrope und Bebas Neue, beide SIL Open Font License
   ========================================================== */

@font-face{
  font-family:"Manrope";
  src:url("/assets/fonts/Manrope-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/assets/fonts/Manrope-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bebas Neue";
  src:url("/assets/fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* serienflimmern, bewusst monochrom */
  --bg:#fdfdfb;
  --fg:#16161a;
  --muted:#7c7b76;
  --line:rgba(0,0,0,.10);

  /* Originalpalette Call Me Barista, nur innerhalb der Projektkachel */
  --cmb-bean:#1e1917;
  --cmb-burnt:#c9622d;
  --cmb-gold:#d9a441;
  --cmb-foam:#f6efe4;

  --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,
    BlinkMacSystemFont,sans-serif;
  font-weight:400;
}

::selection{background:var(--fg);color:var(--bg)}

.wrap{width:100%;max-width:700px;margin:0 auto;padding:var(--space-8) var(--space-3) var(--space-7)}

/* ---------- Startseite ---------- */

.hero{min-height:26vh;display:flex;flex-direction:column;justify-content:flex-end}

.logo{
  font-size:clamp(36px,7vw,64px);
  font-weight:500;letter-spacing:.05em;line-height:1.05;
  text-transform:lowercase;color:var(--fg);
}

/* Das Flimmern: einzelne Buchstaben dimmen kurz ab. Jeder Buchstabe hat
   eine eigene, krumme Zyklusdauer, dadurch überlagern sich die Rhythmen
   nie gleich und es wirkt zufällig. Reines CSS, läuft auch auf iOS. */
.logo .l{animation:flick 10s linear infinite;will-change:opacity}
/* Doppelte Keyframes halten den Wert konstant und springen dann in
   0,05 Prozent der Laufzeit um. Das ersetzt steps(), das in WebKit
   und damit in allen iOS-Browsern unzuverlässig ist. */
@keyframes flick{
  0%,   0.95% {opacity:1}
  1.0%, 1.95% {opacity:.30}
  2.0%, 3.15% {opacity:1}
  3.2%, 4.15% {opacity:.62}
  4.2%, 100%  {opacity:1}
}
.logo .l:nth-child(1){animation-duration:8.1s;animation-delay:2.0s}
.logo .l:nth-child(2){animation-duration:11.3s;animation-delay:2.6s}
.logo .l:nth-child(3){animation-duration:7.4s;animation-delay:3.1s}
.logo .l:nth-child(4){animation-duration:9.7s;animation-delay:2.2s}
.logo .l:nth-child(5){animation-duration:12.9s;animation-delay:4.0s}
.logo .l:nth-child(6){animation-duration:8.8s;animation-delay:2.9s}
.logo .l:nth-child(7){animation-duration:10.6s;animation-delay:2.4s}
.logo .l:nth-child(8){animation-duration:7.9s;animation-delay:3.6s}
.logo .l:nth-child(9){animation-duration:13.4s;animation-delay:2.1s}
.logo .l:nth-child(10){animation-duration:9.2s;animation-delay:3.3s}
.logo .l:nth-child(11){animation-duration:11.8s;animation-delay:2.7s}
.logo .l:nth-child(12){animation-duration:8.5s;animation-delay:4.2s}
.logo .l:nth-child(13){animation-duration:10.1s;animation-delay:2.3s}
.logo .l:nth-child(14){animation-duration:12.2s;animation-delay:3.8s}

.tagline{
  margin-top:22px;font-size:16px;color:var(--muted);
  max-width:40ch;line-height:1.75;
}

/* ---------- Projektliste ---------- */

.section-label{
  margin-top:var(--space-7);margin-bottom:14px;
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--fg);
}

.list{border-top:1px solid var(--line)}

.project{
  display:flex;align-items:center;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--fg);
}

.grow{flex:1}

.pm{
  font-size:11px;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;transition:color .2s ease;
}

.ar{display:inline-block;margin-left:12px;transition:transform .2s ease}

.project:hover .pm{color:var(--fg)}
.project:hover .ar{transform:translate(2px,-2px)}

/* Projektkachel: Originaltafel und Originalfarben von Call Me Barista */
.tile{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:172px;height:70px;
  background-color:var(--cmb-bean);
  background-image:url("/assets/img/callmebarista-tafel.jpg");
  background-size:cover;background-position:center 42%;
  font-family:"Bebas Neue",Impact,sans-serif;
  line-height:.88;letter-spacing:.035em;overflow:hidden;
  opacity:.93;transition:opacity .25s ease;
}
.project:hover .tile{opacity:1}

.tile .eyebrow{
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:7px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cmb-gold);
}
.tile .w{font-size:26px;white-space:nowrap}
.tile .c1{color:var(--cmb-foam)}
.tile .c2{color:var(--cmb-burnt)}

/* ---------- Unterseiten ---------- */

.home-link{
  display:inline-block;margin-bottom:var(--space-6);
  color:var(--fg);text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:lowercase;
}
.home-link:hover{color:var(--fg);opacity:.55}

.label{
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--fg);margin-bottom:var(--space-5);
}

.content{max-width:620px}

.content p{
  font-size:15px;line-height:1.85;color:var(--muted);
  margin-bottom:var(--space-4);
}

.content h2{
  font-size:15px;font-weight:500;color:var(--fg);
  letter-spacing:.02em;margin:var(--space-5) 0 var(--space-2);
}
.content h2:first-child{margin-top:0}

.content .address{
  font-style:normal;font-size:15px;line-height:1.9;
  color:var(--fg);margin-bottom:var(--space-4);
}

.content a{
  color:var(--fg);
  border-bottom:1px solid rgba(0,0,0,.22);
  padding-bottom:1px;transition:border-color .2s ease,color .2s ease;
}
.content a:hover{color:var(--fg);border-color:var(--fg)}

/* ---------- Footer ---------- */

footer{
  margin-top:var(--space-8);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:14px;font-size:14px;color:var(--muted);
}
footer .dot{margin:0 7px;color:var(--line)}
.cr{font-size:11px;letter-spacing:.06em}

a{color:var(--muted);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--fg)}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}

/* ---------- Zugänglichkeit ---------- */

/* Respektiert die Systemeinstellung „Bewegung reduzieren“
   (iOS: Einstellungen > Bedienungshilfen > Bewegung).
   Ist sie aktiv, steht der Schriftzug still. Das ist Absicht.
   Soll das Flimmern immer laufen, diesen Block entfernen. */
/* Systemeinstellung „Bewegung reduzieren“.
   Sie richtet sich gegen Bewegung, also gegen Dinge, die sich verschieben,
   zoomen oder scrollen. Genau das wird hier abgeschaltet: der Pfeil bleibt
   beim Überfahren stehen.
   Das Flimmern des Schriftzugs bleibt bewusst aktiv. Es verschiebt nichts,
   sondern ändert nur die Deckkraft einzelner Buchstaben, und zwar rund
   0,2 mal pro Sekunde je Buchstabe. Der Grenzwert der Barrierefreiheits-
   richtlinie WCAG 2.3.1 liegt bei drei Blitzen pro Sekunde auf großer
   Fläche, davon ist das weit entfernt.
   Soll auch das Flimmern bei reduzierter Bewegung stillstehen, hier
   zusätzlich `.logo .l{animation:none!important}` eintragen. */
@media (prefers-reduced-motion:reduce){
  .ar{transition:none!important}
  .project:hover .ar{transform:none!important}
}

/* ---------- Responsive ---------- */

@media (max-width:600px){
  .wrap{padding:var(--space-6) 20px var(--space-6)}
  .hero{min-height:20vh}
  .section-label{margin-top:var(--space-6)}
  .home-link{margin-bottom:var(--space-5)}
  .project{gap:16px}
  footer{margin-top:var(--space-7);flex-direction:column;gap:14px}
}

@media (max-width:400px){
  .tile{width:148px;height:60px}
  .tile .w{font-size:22px}
}