@import url('fonts.css');

/* ---------------------------------------------------------------
   martineisen.de
   Tokens auf Deutsch, wie in den Demo-Projekten.
   --------------------------------------------------------------- */

:root {
  --papier:    #f7f5f1;
  --papier-2:  #f1eee7;
  --karte:     #fffefc;
  --tinte:     #16150f;
  --text:      #4a463d;
  --grau:      #857f72;
  --linie:     #e4e0d6;
  --linie-2:   #d3cec1;

  --moos:       #1f5d3f;   /* Akzent, dunkel genug für Text auf Papier */
  --moos-hell:  #35906a;   /* nur auf dunklem Grund */
  --moos-blass: #ecf3ef;

  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --wrap: 1080px;
  --rad: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--tinte); font-weight: 400; margin: 0; }
p { margin: 0 0 1.1em; }
a { color: var(--moos); }

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

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

/* Tastatur-Navigation sichtbar halten */
:focus-visible {
  outline: 2px solid var(--moos);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--tinte); color: var(--papier);
  padding: 12px 18px; border-radius: 0 0 var(--rad) 0;
  font-size: 14px; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* --- Mono-Label ------------------------------------------------ */

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linie);
}

/* --- Kopf ------------------------------------------------------ */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,245,241,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.kopf.ab { border-bottom-color: var(--linie); }
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.marke {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinte);
  text-decoration: none;
  padding: 11px 0;   /* Tippziele: Text ist 21px hoch, mit Polster ~43px */
}
.marke span { color: var(--moos); }

.nav { display: flex; gap: 30px; align-items: center; }
.nav a {
  color: var(--text); text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s;
}
.nav a:hover { color: var(--tinte); }
.nav .knopf-klein {
  background: var(--tinte); color: var(--papier);
  padding: 9px 18px; border-radius: 100px;
  font-size: 14px;
}
.nav .knopf-klein:hover { background: var(--moos); color: #fff; }
@media (max-width: 700px) {
  .nav a:not(.knopf-klein) { display: none; }
}

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

.hero { padding: 96px 0 72px; }
@media (max-width: 700px) { .hero { padding: 56px 0 48px; } }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 28px;
}
.hero-eyebrow b { color: var(--moos); font-weight: 500; }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 7.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin: 0 0 32px;
}
.hero h1 em {
  font-style: italic;
  color: var(--moos);
}

.hero-text {
  font-size: 19px;
  max-width: 54ch;
  color: var(--text);
}
@media (max-width: 700px) { .hero-text { font-size: 17.5px; } }

.hero-aktion {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 36px;
}

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tinte); color: var(--papier);
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 15.5px; font-weight: 500;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.knopf:hover { background: var(--moos); color: #fff; transform: translateY(-1px); }
.knopf.geist {
  background: transparent; color: var(--tinte);
  border: 1px solid var(--linie-2);
}
.knopf.geist:hover { background: var(--karte); border-color: var(--tinte); transform: translateY(-1px); }

/* --- Kennzahlen (Fakten, keine Behauptungen) ------------------- */

.fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--rad);
  overflow: hidden;
  margin-top: 64px;
}
@media (max-width: 620px) { .fakten { grid-template-columns: 1fr; } }

.fakt { background: var(--papier); padding: 24px 26px; }
.fakt dt {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 8px;
}
.fakt dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--tinte);
  line-height: 1.2;
}
.fakt dd small {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--grau);
  margin-top: 4px;
  line-height: 1.45;
}

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

.sek { padding: 88px 0; }
@media (max-width: 700px) { .sek { padding: 60px 0; } }
.sek-hell { background: var(--papier-2); }

.sek h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 20ch;
  margin: 0 0 20px;
}
.sek-intro {
  max-width: 58ch;
  font-size: 17.5px;
  margin-bottom: 48px;
}

/* --- Arbeitsweise ---------------------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
@media (max-width: 820px) { .schritte { grid-template-columns: 1fr; gap: 28px; } }

.schritt { border-top: 2px solid var(--tinte); padding-top: 20px; }
.schritt-nr {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--moos);
  margin-bottom: 10px;
}
.schritt h3 {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 600;
  margin-bottom: 8px;
}
.schritt p { font-size: 15.5px; margin: 0; color: var(--text); }

/* --- Werk-Index (Zeilen statt Karten-Brei) --------------------- */

.werke { border-top: 1px solid var(--linie-2); }

.werk {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 4px;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: inherit;
  transition: padding 0.25s var(--ease), background 0.25s var(--ease);
}
a.werk:hover { background: var(--karte); padding-left: 14px; padding-right: 14px; }

.werk-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.werk-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--tinte);
  line-height: 1.2;
}
a.werk:hover .werk-name { color: var(--moos); }
.werk-was {
  font-size: 15.5px;
  color: var(--grau);
}
.werk-text {
  font-size: 15.5px;
  margin: 8px 0 0;
  max-width: 62ch;
}

/* Auf dem Handy stapeln, sonst quetscht das Abzeichen den Text
   in eine 3-Wort-Spalte. */
@media (max-width: 700px) {
  .werk { grid-template-columns: 1fr; gap: 12px; }
  .werk .stand { justify-self: start; }
}

.stand {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid var(--linie-2);
  color: var(--grau);
  background: var(--karte);
}
.stand.live { color: var(--moos); border-color: #bcd9c9; background: var(--moos-blass); }
.stand.eigen { color: var(--grau); }

/* --- Prompt-Karten (der Free Value) ---------------------------- */

.prompts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .prompts { grid-template-columns: 1fr; } }

.prompt {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rad);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}
.prompt-nr {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--moos);
  margin-bottom: 10px;
}
.prompt h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.15;
  margin-bottom: 10px;
}
.prompt-warum {
  font-size: 14.5px;
  color: var(--grau);
  margin: 0 0 18px;
}

.prompt-box {
  position: relative;
  background: var(--tinte);
  border-radius: var(--rad);
  margin-top: auto;
}
.prompt-box pre {
  margin: 0;
  /* oben Platz für den absolut gesetzten Kopier-Knopf, sonst
     verschwindet eine lange erste Zeile darunter */
  padding: 46px 20px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #d9d5c8;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Wenn der Knopf (schmale Karten) statisch über dem Text sitzt,
   braucht die pre kein Extra-Polster oben. */
@media (max-width: 380px) {
  .prompt-box pre { padding-top: 8px; }
}
.prompt-box pre b { color: var(--moos-hell); font-weight: 500; }

.kopier {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.09);
  color: #e8e4d8;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kopier:hover { background: rgba(255,255,255,0.16); }
.kopier.fertig {
  background: var(--moos-hell); color: #fff; border-color: var(--moos-hell);
}
/* Auf schmalen Karten den Knopf nicht über den Text legen */
@media (max-width: 380px) {
  .kopier { position: static; display: block; margin: 12px 20px 16px auto; }
}

/* --- Social-Funnel --------------------------------------------- */

.folge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.folge a {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #322f26;
  border-radius: var(--rad);
  padding: 18px 20px;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s, transform 0.2s var(--ease);
}
.folge a:hover {
  background: rgba(255,255,255,0.07);
  border-color: #4a4636;
  transform: translateY(-2px);
}
.folge-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--moos);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem; color: #fff;
}
.folge-txt b {
  display: block;
  color: var(--papier);
  font-weight: 500;
  font-size: 15.5px;
}
.folge-txt span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #8d8778;
}

/* --- Entwürfe (Portfolio) -------------------------------------- */

.hinweis {
  display: flex; gap: 14px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--moos);
  border-radius: var(--rad);
  padding: 18px 20px;
  margin-bottom: 44px;
  max-width: 68ch;
}
.hinweis-i {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--moos);
  padding-top: 2px;
  flex-shrink: 0;
}
.hinweis p { margin: 0; font-size: 15px; }

@media (max-width: 700px) {
  .hinweis { flex-direction: column; gap: 8px; }
}

/* --- Funnel-Block (dunkel) ------------------------------------- */

.kontakt {
  background: var(--tinte);
  color: #c9c5b8;
  padding: 88px 0;
}
@media (max-width: 700px) { .kontakt { padding: 60px 0; } }

.kontakt .label { color: #7d7768; }
.kontakt .label::after { background: #322f26; }
.kontakt h2 {
  font-family: var(--font-display);
  color: var(--papier);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
  margin: 0 0 20px;
}
.kontakt p { max-width: 52ch; font-size: 17.5px; }
.kontakt a:not(.knopf) { color: var(--moos-hell); }

.kontakt .knopf {
  background: var(--papier); color: var(--tinte);
  margin-top: 14px;
}
.kontakt .knopf:hover { background: var(--moos-hell); color: #fff; }

.kanaele {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #322f26;
  font-family: var(--font-mono);
  font-size: 13px;
}
.kanaele div { color: #7d7768; display: flex; align-items: center; }
.kanaele a { text-decoration: none; display: inline-block; padding: 12px 0; }
.kanaele a:hover { text-decoration: underline; }

/* --- Fuß ------------------------------------------------------- */

.fuss {
  background: var(--tinte);
  border-top: 1px solid #322f26;
  padding: 26px 0;
  color: #6d6759;
  font-size: 13.5px;
}
.fuss .wrap {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  align-items: center;
}
.fuss-links { display: flex; gap: 22px; }
.fuss a { color: #8d8778; text-decoration: none; display: inline-block; padding: 9px 0; }
.fuss a:hover { color: var(--papier); }

/* --- Rechtstexte (Impressum / Datenschutz) --------------------- */

.recht { padding: 56px 0 88px; max-width: 72ch; }
.recht h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  margin-bottom: 32px;
}
.recht h2 {
  font-family: var(--font-body);
  font-size: 17px; font-weight: 600;
  margin: 38px 0 10px;
}
.recht p, .recht li { font-size: 16px; }
.recht ul { padding-left: 20px; }
.recht .todo {
  background: #fff6e0;
  border: 1px dashed #d9a441;
  border-radius: 8px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #7a5310;
}
.zurueck {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grau);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 36px;
}
.zurueck:hover { color: var(--tinte); }

/* --- Einblenden beim Scrollen ---------------------------------- */

/* Nur verstecken, wenn JS läuft und es auch wieder einblenden kann.
   Ohne JS steht alles sofort da. */
.js .rein { opacity: 0; transform: translateY(14px); }
.js .rein.da {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .rein { opacity: 1; transform: none; }
}