/* Apptheism – gemeinsames Stylesheet für alle Seiten.
   Schriften liegen auf dem eigenen Server, keine Verbindung zu Dritten. */

@font-face{font-family:"Syne";src:url("fonts/syne-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Syne";src:url("fonts/syne-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- Grundwerte ---------- */

:root{
  --field:#BFBAB1;
  --ink:#15130F;
  --ink-70:#4A463F;
  --rule:rgba(21,19,15,.2);
  --signal:#FF4E14;
  --side:clamp(22px,4.5vw,60px);
  --sl:max(var(--side),env(safe-area-inset-left,0px));
  --sr:max(var(--side),env(safe-area-inset-right,0px));
  --sb:max(clamp(16px,2.4vw,24px),env(safe-area-inset-bottom,0px));
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--field);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Körnung: macht die Fläche zum Material, nicht zum UI-Grau */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cap{
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}

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

.top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  padding:clamp(20px,3.4vw,34px) var(--sr) 0 var(--sl);
  animation:fade .7s .1s ease both;
}
.top a{color:inherit;text-decoration:none;opacity:.9}
.top a:hover{opacity:1}
.top .place{color:var(--ink-70)}

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

.body{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(26px,5vw,80px);
  padding:clamp(52px,11vh,130px) var(--sr) clamp(40px,7vh,80px) var(--sl);
}

.motto{
  font-family:"Syne",sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem,5vw,3.1rem);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  animation:fade .7s .3s ease both;
}

.copy{max-width:38ch;padding-top:.35em}
.copy p{line-height:1.45;animation:fade .7s ease both}
.copy p:nth-child(1){font-weight:500;animation-delay:.42s}
.copy p:nth-child(2){animation-delay:.5s}
.copy .who{color:var(--ink-70);margin-top:.75em;animation-delay:.6s}

/* ---------- Wortmarke ---------- */

.markwrap{
  padding:0 var(--sr) clamp(14px,2.6vh,30px) var(--sl);
  overflow:hidden;
}

.mark{display:flex;overflow:hidden}

.mark span{
  display:block;
  flex:0 0 auto;
  font-family:"Syne",sans-serif;
  font-weight:800;
  font-size:12vw;
  line-height:.82;
  letter-spacing:-.055em;
  padding-right:.055em;
  text-transform:uppercase;
  white-space:pre;
  animation:rise 1s .35s cubic-bezier(.16,.84,.24,1) both;
}

/* ---------- Dokumentseiten ---------- */

.doc{
  flex:1;
  line-height:1.62;
  padding:clamp(44px,8vh,90px) var(--sr) clamp(48px,8vh,88px) var(--sl);
}

.title{
  font-family:"Syne",sans-serif;
  font-weight:800;
  font-size:clamp(2.8rem,11vw,7rem);
  line-height:.85;
  letter-spacing:-.045em;
  margin-bottom:clamp(32px,5vh,56px);
}

.sec{
  display:grid;
  grid-template-columns:150px minmax(0,60ch);
  gap:0 clamp(22px,4vw,54px);
  padding:clamp(22px,3vw,30px) 0;
  border-top:1px solid var(--rule);
}
.sec .ref{color:var(--ink-70);padding-top:.4em}
.sec h2{
  font-family:"Syne",sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:.6em;
}
.sec p + p{margin-top:.8em}
.sec address{font-style:normal}
.sec a{color:inherit}

/* Offene Angabe – leuchtet, damit nichts unbemerkt live geht */
.todo{
  background:var(--signal);
  padding:.05em .34em;
  font-weight:500;
  white-space:nowrap;
}

/* ---------- Apps ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:clamp(28px,3.6vw,46px) clamp(18px,2.4vw,32px);
}
.app img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:10px;background:rgba(21,19,15,.09);
}
.app h2{
  font-family:"Syne",sans-serif;font-weight:700;
  font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:-.02em;
  margin:15px 0 5px;
}
.app p{color:var(--ink-70);line-height:1.45}

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

.band{
  position:relative;
  z-index:2;
  background:var(--signal);
  color:var(--ink);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding:clamp(16px,2.4vw,24px) var(--sr) var(--sb) var(--sl);
  animation:up .8s .55s cubic-bezier(.16,.84,.24,1) both;
}

.reach{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}

.band .mail{
  font-family:"Syne",sans-serif;
  font-weight:700;
  font-size:clamp(1.15rem,3vw,1.75rem);
  letter-spacing:-.02em;
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0 2px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .3s cubic-bezier(.16,.84,.24,1);
}
.band .mail:hover{background-size:100% 2px}

.band .icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-12px 0 -12px -12px;
  color:inherit;opacity:.75;transition:opacity .2s ease;
}
.band .icon:hover{opacity:1}
.band .icon svg{display:block;width:18px;height:18px}

.band nav{display:flex;flex-wrap:wrap;gap:0 22px;margin:-10px 0}
.band nav a{display:inline-block;padding:10px 0;color:inherit;text-decoration:none;opacity:.75;transition:opacity .2s ease}
.band nav a:hover{opacity:1}
.band nav span{display:inline-block;padding:10px 0;opacity:.45}

a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}

/* ---------- Registrierungszeichen ---------- */
/* Größe und Hochstellung sind aus den Glyphenmaßen gerechnet:
   Syne 800 setzt die ®-Oberkante auf 0.705em bei 0.64em Versalhöhe,
   Instrument Sans 500 auf 0.735em bei 0.72em Versalhöhe. */

/* Das ® kommt immer aus Instrument Sans. Syne setzt an dieser Stelle eine
   Display-Glyphe von 1,5 Geviert Breite – als Zeichen viel zu wuchtig.
   Instrument Sans: ®-Oberkante 0.735em, Höhe 0.75em, Versalhöhe 0.72em. */

.reg,.reg-mark{
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-weight:500;
  font-style:normal;
  letter-spacing:0;
}

/* Fließtext und Kapitälchenzeilen */
.reg{font-size:.62em;vertical-align:.43em}

/* Große Wortmarke: 13 % der Wortgröße, Oberkante auf Versalhöhe von Syne */
.reg-mark{font-size:.13em;vertical-align:4.19em;margin-left:.9em}

/* ---------- Bewegung ---------- */

@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---------- Kleine Fenster ---------- */

@media (max-width:760px){
  .sec{grid-template-columns:1fr;gap:0}
  .sec .ref{padding-top:0;margin-bottom:.7em;display:block}
}

@media (max-width:640px){
  .body{
    flex-direction:column;
    gap:clamp(22px,4vh,34px);
    padding-top:clamp(40px,8vh,90px);
  }
  .copy{max-width:100%;padding-top:0}
}

@media (max-height:560px) and (orientation:landscape){
  .top{padding-top:16px}
  .body{padding-top:clamp(24px,5vh,44px);padding-bottom:clamp(18px,3.5vh,30px)}
  .motto{font-size:clamp(1.3rem,3.2vw,2rem)}
  .band{padding-top:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}