/* ============================================================
   mf-tools — gemeinsames Stylesheet
   Wird von index.html, impressum.html, datenschutz.html
   und kontakt.html geladen.
   ============================================================ */

:root{
  --papier:    #FFFFFF;
  --eingabe:   #FFFFFF;
  --haarlinie: #D9D7D1;
  --tinte:     #1C1B16;
  --gedaempft: #7C776C;
  --signal:    #E3620F;

  /* Bewegung des Signets auf der Startseite */
  --hub:   18px;                      /* Schwebehöhe */
  --takt:  4.5s;                      /* Dauer eines Auf- oder Abwegs */
  --kurve: cubic-bezier(.32,0,.68,1); /* näher an 0 und 1 = kürzeres Verweilen oben/unten */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--papier);
  color:var(--tinte);
  font-family:'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--gedaempft); text-decoration:none;
  border-bottom:1px solid var(--haarlinie); padding-bottom:1px;
  transition:color .18s, border-color .18s;
}
a:hover{ color:var(--tinte); border-color:var(--gedaempft); }
a:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }

.kopf{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.18em;
  color:var(--gedaempft);
}
.kopf a{ border:none; color:var(--gedaempft); }
.kopf a:hover{ color:var(--tinte); }

.fuss{
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#A09A8D;
}
.fuss a{ border:none; color:#A09A8D; }
.fuss a:hover{ color:var(--tinte); }
.fuss span{ margin:0 10px; opacity:.5; }


/* ============================================================
   STARTSEITE
   ============================================================ */

body.start{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:96px 24px;
  overflow-x:hidden;
}
body.start .kopf{ position:fixed; top:28px; left:32px; z-index:2; }
body.start .fuss{ position:fixed; bottom:26px; left:0; right:0; z-index:2; }

.buehne{
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:1;
}

.signet{
  width:300px; height:300px; display:block;
  animation:schweben var(--takt) var(--kurve) infinite alternate;
  will-change:transform;
}

.schatten{
  width:208px; height:24px; margin-top:16px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
             rgba(38,38,36,.66) 0%, rgba(38,38,36,.28) 48%, transparent 74%);
  animation:schattenwurf var(--takt) var(--kurve) infinite alternate;
  will-change:transform, opacity, filter;
}

/* Tiefpunkt: Schatten eng und dicht */
@keyframes schweben{
  from{ transform:translateY(0); }
  to  { transform:translateY(calc(var(--hub) * -1)); }
}
/* Hochpunkt: breiter, blasser, weicher — aber nie ganz verschwunden */
@keyframes schattenwurf{
  from{ transform:scale(.84); opacity:.62; filter:blur(9px); }
  to  { transform:scale(1.16, 1.08); opacity:.34; filter:blur(17px); }
}

.anmeldung{
  width:320px; max-width:100%; margin-top:48px;
  display:flex; flex-direction:column; gap:18px;
  position:relative; z-index:1;
}
.feld{ display:flex; flex-direction:column; gap:7px; }
.feld label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gedaempft);
}
.feld input{
  background:var(--eingabe);
  border:1px solid var(--haarlinie); border-radius:4px;
  padding:13px 15px; color:var(--tinte);
  font-family:'Barlow', sans-serif; font-size:15.5px;
  transition:border-color .18s, box-shadow .18s;
}
.feld input:focus{
  outline:none; border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(227,98,15,.15);
}

.knopf{
  margin-top:6px; background:var(--signal); color:#1A1006;
  border:none; border-radius:4px; padding:14px;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:16px;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; transition:background .18s, transform .08s;
}
.knopf:hover{ background:#F5741E; }
.knopf:active{ transform:translateY(1px); }
.knopf:focus-visible{ outline:2px solid var(--tinte); outline-offset:3px; }

.nebenzeile{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; color:var(--gedaempft);
}

.meldung{
  min-height:18px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:var(--signal);
}


/* ============================================================
   TEXTSEITEN (Impressum, Datenschutz, Kontakt)
   ============================================================ */

body.text{
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:0 24px;
}
body.text .kopf{
  display:flex; align-items:center; gap:14px;
  padding:26px 0 0;
}
body.text .kopf img{ width:44px; height:44px; display:block; }

.inhalt{
  width:100%; max-width:660px;
  margin:0 auto; padding:64px 0 96px;
  flex:1;
}

.marke{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--signal);
  margin-bottom:14px;
}

.inhalt h1{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:46px; line-height:1.05;
  letter-spacing:-.01em; margin-bottom:34px;
}
.inhalt h2{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:23px; line-height:1.2;
  margin:44px 0 12px;
  padding-top:20px; border-top:1px solid var(--haarlinie);
}
.inhalt h3{
  font-family:'Barlow', sans-serif;
  font-weight:600; font-size:16px;
  margin:26px 0 6px;
}
.inhalt p, .inhalt li{
  font-size:16px; line-height:1.68; color:#3A382F;
}
.inhalt p{ margin-bottom:14px; }
.inhalt ul{ margin:0 0 16px 20px; }
.inhalt li{ margin-bottom:5px; }
.inhalt a{ color:var(--signal); border-bottom-color:rgba(227,98,15,.35); }
.inhalt a:hover{ color:#B94C08; border-bottom-color:#B94C08; }

.anschrift{
  font-size:16px; line-height:1.75;
  padding:20px 22px; margin-bottom:16px;
  border:1px solid var(--haarlinie); border-radius:5px;
  background:#FAFAF8;
}

.notiz{
  font-size:14px; line-height:1.6; color:var(--gedaempft);
  padding:16px 18px; margin:26px 0;
  border-left:2px solid var(--signal);
  background:#FCFAF8;
}

.zurueck{
  display:inline-block; margin-top:44px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

body.text .fuss{ padding:0 0 30px; }


/* ============================================================
   KLEINE BILDSCHIRME
   ============================================================ */

@media (max-width:560px){
  body.start{ padding:84px 22px; }
  body.start .kopf{ left:22px; top:20px; }
  .signet{ width:236px; height:236px; }
  .schatten{ width:164px; margin-top:12px; }
  .anmeldung{ margin-top:40px; }

  .inhalt{ padding:44px 0 72px; }
  .inhalt h1{ font-size:36px; }
  .inhalt h2{ font-size:21px; }
}

/* ============================================================
   BEWEGUNG REDUZIEREN
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .signet{ animation:none; transform:translateY(-9px); }
  .schatten{ animation:none; transform:scale(1.02); opacity:.44; filter:blur(13px); }
  *{ transition:none !important; }
}


/* ============================================================
   GESCHÜTZTER BEREICH — Leiste, Übersicht, Werkzeugseiten
   ============================================================ */

body.werkzeug{
  min-height:100vh;
  display:flex; flex-direction:column;
}

.leiste{
  display:flex; align-items:center; gap:28px;
  padding:0 26px; height:62px;
  border-bottom:1px solid var(--haarlinie);
  background:var(--papier);
  position:sticky; top:0; z-index:10;
}

.marke-klein{
  display:flex; align-items:center; gap:10px;
  border:none; flex-shrink:0;
}
.marke-klein img{ width:30px; height:30px; display:block; }
.marke-klein span{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.18em; color:var(--tinte);
}

.navigation{
  display:flex; gap:4px; flex:1;
  overflow-x:auto; scrollbar-width:none;
}
.navigation::-webkit-scrollbar{ display:none; }
.navigation a{
  border:none; border-radius:4px;
  padding:7px 12px; white-space:nowrap;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:15px;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--gedaempft);
}
.navigation a:hover{ background:#F4F2EE; color:var(--tinte); }
.navigation a.hier{ color:var(--signal); background:rgba(227,98,15,.08); }

.konto{
  display:flex; align-items:center; gap:14px; flex-shrink:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.06em; color:var(--gedaempft);
}
.konto a{ border:none; color:var(--gedaempft); }
.konto a:hover{ color:var(--signal); }

.bereich{
  flex:1; width:100%; max-width:1120px;
  margin:0 auto; padding:44px 26px 80px;
}
.bereich h1{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:42px; line-height:1.05;
  margin-bottom:28px;
}
.bereich .marke{ margin-bottom:12px; }
.bereich p{ font-size:16px; line-height:1.68; color:#3A382F; margin-bottom:14px; }

body.werkzeug .fuss{ padding:0 0 26px; }

/* ---- Übersicht ---- */

.kacheln{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  margin-top:6px;
}
.kachel{
  display:flex; flex-direction:column; gap:7px;
  padding:22px 22px 24px;
  border:1px solid var(--haarlinie); border-radius:6px;
  background:var(--papier);
  transition:border-color .18s, transform .12s, box-shadow .18s;
}
a.kachel:hover{
  border-color:var(--signal);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(40,36,28,.07);
}
.kachel-name{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:24px; letter-spacing:.01em;
  color:var(--tinte);
}
.kachel-text{ font-size:14.5px; line-height:1.55; color:var(--gedaempft); }
.kachel-hinweis{
  margin-top:4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal);
}
.kachel.gesperrt{ opacity:.55; }

/* ---- Platzhalter in den Werkzeugseiten ---- */

.platzhalter{
  padding:16px 18px; border-left:2px solid var(--signal);
  background:#FCFAF8; color:var(--gedaempft);
}
.schritte{ margin:22px 0 0 20px; }
.schritte li{ font-size:15.5px; line-height:1.65; color:#3A382F; margin-bottom:9px; }
code{
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  background:#F4F2EE; padding:2px 5px; border-radius:3px;
}

@media (max-width:700px){
  .leiste{ height:auto; flex-wrap:wrap; gap:12px; padding:12px 18px; }
  .navigation{ order:3; width:100%; }
  .konto{ margin-left:auto; }
  .bereich{ padding:32px 18px 64px; }
  .bereich h1{ font-size:33px; }
}