@import url('../fonts/fonts.css');

/* ==========================================================================
   optiorg - Jens Heinrich
   Designsprache: technische Zeichnung. Hairlines, Massmarken, Prueffeld.
   ========================================================================== */

:root{
  --ink:        #0C1A22;   /* tiefes Petrol-Navy, Traegerfarbe */
  --ink-soft:   #132934;   /* abgesetzte Flaeche auf dunkel */
  --ink-line:   #24414D;   /* Hairline auf dunkel */
  --paper:      #F1F4F3;   /* kuehles Papier */
  --paper-pure: #FFFFFF;
  --steel:      #566E78;   /* Sekundaertext auf hell */
  --steel-dark: #93A9B1;   /* Sekundaertext auf dunkel */
  --rule:       #D2DADC;   /* Hairline auf hell */
  --brass:      #9A6B28;   /* Akzent: Messing, Messschieber */
  --brass-lift: #D2A05C;   /* Akzent auf dunklem Grund */

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 1280px;
  --band: clamp(4.5rem, 10vw, 8.5rem);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }

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

h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.025em; line-height:1.06; margin:0; }
h1{ font-size:clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }
h3{ font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing:-0.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(1.08rem, 1rem + 0.5vw, 1.3rem); line-height:1.55; color:#20353D; }

.mono{
  font-family:var(--mono); font-weight:500; font-size:0.72rem;
  letter-spacing:0.16em; text-transform:uppercase;
}

/* --- Signatur: Masslinie -------------------------------------------------
   Hairline mit senkrechten Endmarken, wie eine Bemassung in der Zeichnung. */

.dim{ display:flex; align-items:center; gap:0.9rem; margin:0 0 1.6rem; }
.dim__label{ color:var(--brass); white-space:nowrap; }
.dim__line{
  position:relative; flex:1 1 auto; height:1px; background:var(--rule);
}
.dim__line::before,.dim__line::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--rule);
}
.dim__line::before{ left:0; }
.dim__line::after{ right:0; }

.on-dark .dim__label{ color:var(--brass-lift); }
.on-dark .dim__line{ background:var(--ink-line); }
.on-dark .dim__line::before,.on-dark .dim__line::after{ background:var(--ink-line); }

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

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(12,26,34,0.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.site-head__inner{ display:flex; align-items:center; gap:1.5rem; min-height:4.25rem; }

.mark{
  display:inline-flex; align-items:baseline; gap:0.45rem;
  font-family:var(--display); font-weight:600; font-size:1.22rem;
  letter-spacing:-0.03em; color:var(--paper-pure); text-decoration:none;
}
.mark__dot{ width:7px; height:7px; border-radius:50%; background:var(--brass-lift); align-self:center; }
.mark__claim{ font-family:var(--mono); font-weight:400; font-size:0.62rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--steel-dark); }

.site-nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem); }
.site-nav a{
  font-family:var(--mono); font-weight:500; font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--steel-dark); text-decoration:none;
  padding:0.35rem 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.site-nav a:hover{ color:var(--paper-pure); border-bottom-color:var(--brass-lift); }
.site-nav a.is-cta{ color:var(--ink); background:var(--paper-pure); border-bottom:0;
  padding:0.6rem 1.1rem; border-radius:2px; }
.site-nav a.is-cta:hover{ background:var(--brass-lift); color:var(--ink); }
@media (max-width:760px){
  .site-nav .hide-sm{ display:none; }
  .mark__claim{ display:none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--ink-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size:96px 96px; opacity:0.4;
  -webkit-mask-image:radial-gradient(115% 85% at 72% 34%, #000 0%, transparent 70%);
  mask-image:radial-gradient(115% 85% at 72% 34%, #000 0%, transparent 70%);
}
.hero__inner{
  position:relative; display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); align-items:center;
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem);
}
@media (max-width:920px){
  .hero__inner{ grid-template-columns:1fr; }
}
.hero__eyebrow{ color:var(--brass-lift); margin:0 0 1.6rem; }
.hero h1{ color:var(--paper-pure); max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--brass-lift); }
.hero__text{ margin-top:1.9rem; max-width:47ch; color:#C6D3D8;
  font-size:clamp(1.02rem,0.98rem + 0.3vw,1.16rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.4rem; }

.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--mono); font-weight:500; font-size:0.74rem; letter-spacing:0.14em;
  text-transform:uppercase; text-decoration:none; padding:0.95rem 1.5rem; border-radius:2px;
  border:1px solid transparent; transition:background .2s, color .2s, border-color .2s;
}
.btn--solid{ background:var(--brass-lift); color:#14232B; border-color:var(--brass-lift); }
.btn--solid:hover{ background:#E6B778; border-color:#E6B778; }
.btn--ghost{ color:var(--paper); border-color:var(--ink-line); }
.btn--ghost:hover{ border-color:var(--paper); }
.btn--dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--dark:hover{ background:var(--ink-soft); border-color:var(--ink-soft); }

/* Portrait im Prueffeld: Ring, Eckmarken, Bemassung */
.plate{ position:relative; justify-self:center; width:min(100%, 26rem); aspect-ratio:1; }
.plate__img{
  width:100%; height:100%; object-fit:cover; border-radius:50%; background:var(--paper-pure);
}
.plate__ring{ position:absolute; inset:-1.6rem; border:1px solid var(--ink-line); border-radius:50%; }
.plate__corner{ position:absolute; width:14px; height:14px; border:1px solid var(--brass-lift); opacity:.85; }
.plate__corner--tl{ top:-2.7rem; left:-2.7rem; border-right:0; border-bottom:0; }
.plate__corner--tr{ top:-2.7rem; right:-2.7rem; border-left:0; border-bottom:0; }
.plate__corner--bl{ bottom:-2.7rem; left:-2.7rem; border-right:0; border-top:0; }
.plate__corner--br{ bottom:-2.7rem; right:-2.7rem; border-left:0; border-top:0; }
.plate__tag{
  position:absolute; left:50%; bottom:-4.2rem; transform:translateX(-50%);
  color:var(--steel-dark); white-space:nowrap; text-align:center;
}
.plate__tag b{ display:block; font-family:var(--display); font-weight:600; font-size:1.02rem;
  letter-spacing:-0.015em; text-transform:none; color:var(--paper-pure); margin-bottom:0.35rem; }
@media (max-width:920px){
  .plate{ width:min(70%, 19rem); margin-bottom:4.5rem; order:-1; }
  .plate__corner{ display:none; }
}

.hero__band{
  position:relative; border-top:1px solid var(--ink-line);
  display:flex; flex-wrap:wrap; gap:0.7rem clamp(1.2rem,3vw,2.6rem);
  padding-block:1.2rem; color:var(--steel-dark);
}
.hero__band span{ display:inline-flex; align-items:center; gap:0.55rem; }
.hero__band span::before{ content:""; width:5px; height:5px; background:var(--brass-lift); }

/* --- Sektionen ----------------------------------------------------------- */

.band{ padding-block:var(--band); }
.band--tint{ background:var(--paper-pure); border-block:1px solid var(--rule); }
.band--dark{ background:var(--ink); color:var(--paper); }
.band--dark h2{ color:var(--paper-pure); }

.band__head{ max-width:58ch; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.band__head p{ margin-top:1.3rem; color:var(--steel); max-width:54ch; }
.band--dark .band__head p{ color:#B7C6CC; }

/* --- Leistungen ---------------------------------------------------------- */

.services{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:800px){ .services{ grid-template-columns:repeat(2,1fr); } }

.service{ background:var(--paper-pure); padding:clamp(1.75rem,3.4vw,2.75rem); transition:background .25s; }
.service:hover{ background:#F6F8F8; }
.service__no{ font-family:var(--mono); font-weight:500; font-size:0.72rem; letter-spacing:0.16em;
  color:var(--brass); display:block; margin-bottom:1.4rem; }
.service h3{ margin-bottom:0.9rem; }
.service p{ color:var(--steel); max-width:46ch; }
.service ul{ list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.45rem; }
.service li{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:#3E555D; border:1px solid var(--rule); border-radius:2px; padding:0.35rem 0.6rem;
  background:var(--paper);
}

/* --- Haltung ------------------------------------------------------------- */

.stance{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:900px){ .stance{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); } }

.tenets{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.tenet{ border-bottom:1px solid var(--rule); padding:1.2rem 0; display:flex; gap:1.2rem; align-items:baseline; }
.tenet__k{ font-family:var(--mono); font-weight:500; font-size:0.72rem; letter-spacing:0.14em;
  color:var(--brass); flex:0 0 auto; }
.tenet__v{ font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1rem + 0.4vw,1.28rem);
  letter-spacing:-0.015em; }
.tenet__note{ display:block; font-family:var(--body); font-weight:400; font-size:0.94rem;
  letter-spacing:0; color:var(--steel); margin-top:0.4rem; max-width:46ch; }

/* --- Profil: Masskette --------------------------------------------------- */

.profile{ display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:start; }
@media (min-width:900px){ .profile{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); } }
.profile p{ color:#BFCDD2; }
.profile .lead{ color:var(--paper-pure); }

.chain{ list-style:none; margin:1.9rem 0 0; padding:0; position:relative; }
.chain::before{ content:""; position:absolute; left:5px; top:9px; bottom:9px; width:1px; background:var(--ink-line); }
.chain li{ position:relative; padding:0 0 2.2rem 2.5rem; }
.chain li:last-child{ padding-bottom:0; }
.chain li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:1px; background:var(--brass-lift); }
.chain li::after{ content:""; position:absolute; left:5px; top:3px; width:1px; height:11px; background:var(--brass-lift); }
.chain__step{ font-family:var(--mono); font-weight:500; font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--steel-dark); display:block; margin-bottom:0.45rem; }
.chain__title{ font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,1rem + 0.5vw,1.35rem);
  letter-spacing:-0.02em; color:var(--paper-pure); display:block; }
.chain__note{ color:#A9BCC2; font-size:0.94rem; margin-top:0.4rem; display:block; max-width:46ch; }

/* --- Kontakt: Visitenkarte ----------------------------------------------- */

.card{ background:var(--paper-pure); border:1px solid var(--rule); display:grid; gap:0; }
@media (min-width:860px){ .card{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.card__side{ padding:clamp(1.9rem,4vw,3.2rem); }
.card__side + .card__side{ border-top:1px solid var(--rule); }
@media (min-width:860px){
  .card__side + .card__side{ border-top:0; border-left:1px solid var(--rule); }
}
.card__name{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);
  letter-spacing:-0.025em; margin:0 0 0.5rem; line-height:1.1; }
.card__role{ color:var(--steel); margin:0 0 2rem; }
.card__rows{ list-style:none; margin:0; padding:0; }
.card__rows li{ border-top:1px solid var(--rule); }
.card__rows a, .card__rows .row{
  display:flex; align-items:baseline; gap:1rem; padding:1rem 0; text-decoration:none; transition:color .2s;
}
.card__rows a:hover{ color:var(--brass); }
.card__k{ font-family:var(--mono); font-weight:500; font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--steel); flex:0 0 5.5rem; }
.card__v{ font-size:1.02rem; }
.card__note{ color:var(--steel); font-size:0.94rem; margin-top:1.9rem; max-width:40ch; }

/* --- Fusszeile ----------------------------------------------------------- */

.site-foot{ background:var(--ink); color:var(--steel-dark); padding-block:2.75rem; }
.site-foot__inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; }
.site-foot a{ text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.site-foot a:hover{ color:var(--paper-pure); border-bottom-color:var(--brass-lift); }
.site-foot__legal{ margin-left:auto; display:flex; gap:1.5rem; }
@media (max-width:640px){ .site-foot__legal{ margin-left:0; } }

/* --- Rechtstexte --------------------------------------------------------- */

.legal{ padding-block:clamp(3rem,7vw,5.5rem); max-width:72ch; }
.legal h1{ font-size:clamp(2rem,1.6rem + 1.8vw,2.9rem); margin-bottom:2rem; }
.legal h2{ font-size:clamp(1.12rem,1.05rem + 0.4vw,1.35rem); margin:2.6rem 0 0.85rem; }
.legal p, .legal li{ color:#2A4048; }
.legal ul{ padding-left:1.1rem; }
.legal a{ color:var(--brass); text-underline-offset:3px; }

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

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

.skip{
  position:absolute; left:-9999px; top:0; background:var(--paper-pure); color:var(--ink);
  padding:0.75rem 1rem; z-index:99;
}
.skip:focus{ left:1rem; top:1rem; }

/* Startzustand nur wenn JS laeuft, sonst bliebe der Inhalt unsichtbar */
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.is-in{ opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-in.d1{ transition-delay:.08s; }
.js .reveal.is-in.d2{ transition-delay:.16s; }
.js .reveal.is-in.d3{ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal.is-in{ opacity:1; transform:none; transition:none; }
}