/* ============================================================
   j-tec.de - gemeinsames Stylesheet
   Skin: Tidemark Navy (Farben aus dem PayPal-Spendendialog)
   Wird von allen Seiten eingebunden.
   ============================================================ */

/* ============================================================
   Skin: Tidemark Navy — Farben aus dem PayPal-Spendendialog
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --subtle:#F1EDE8;
  --border:#E3DDD5;
  --text:#001435;
  --text-muted:#545D79;
  --primary:#FFD140;
  --primary-hover:#F0C02B;
  --on-primary:#001435;
  --secondary:#003087;
  --secondary-hover:#001435;
  --gold-tint:#FFF6DE;
  --navy-tint:#EAF0F9;
  --shadow:0 4px 20px rgba(0,20,53,.07);
  --radius:12px;
  --radius-pill:999px;
  --font-display:'Caveat',cursive;
  --font-body:'JetBrains Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 24px}

/* Skip-Link für Tastatur & Screenreader */
.skip{position:absolute;left:-9999px;top:0;background:var(--secondary);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--radius) 0;z-index:99;font-size:.8rem;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px;border-radius:4px}

/* ---------- Kopf ---------- */
header{padding:56px 0 0;text-align:center}
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.2rem,11vw,4.8rem);line-height:.95;
  margin:0;letter-spacing:.5px;
}
.tagline{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);margin:14px 0 0;
}
.rule{
  width:64px;height:4px;background:var(--primary);
  border:0;border-radius:var(--radius-pill);margin:22px auto 0;
}

/* ---------- Zitat (Panel wie in der Skin-Referenz) ---------- */
.quote{
  margin:44px 0 0;padding:26px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 6px;
}
.eyebrow .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--secondary);margin-right:8px;vertical-align:2px;
}
/* Zitattext: bewusst NICHT im Schmuckfont, sondern in der
   Fliesstextschrift — kleiner, kursiv, dafür ruhiger. */
.quote p.hand{
  font-family:var(--font-body);font-weight:500;font-style:italic;
  font-size:clamp(.92rem,2.4vw,1.05rem);line-height:1.65;
  margin:0 0 10px;color:var(--text);
}
.quote p.meta{
  margin:0;font-size:.78rem;color:var(--text-muted);
}
.quote p.meta span{color:var(--secondary);font-weight:700}

/* ---------- Portrait ----------
   Die Breite steckt am BILD, nicht an der figure. Sonst müsste sich
   der Nachweis darunter dieselben 230 px teilen und bräche in drei
   Zeilen um. */
.portrait{margin:46px auto 0;display:block}
.portrait img{
  display:block;width:230px;max-width:62vw;height:auto;margin:0 auto;
  border-radius:50%;
  background:var(--surface);
}

/* ---------- Vorstellung ---------- */
.intro{text-align:center;margin:30px 0 0}
.intro .hand{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,6.6vw,2.9rem);line-height:1.15;
  margin:0;
}
.intro .role{
  margin:16px auto 0;max-width:44ch;
  font-size:.86rem;color:var(--text-muted);
}
.intro .role b{color:var(--text);font-weight:700}

/* ---------- Navigations-Buttons ---------- */
nav.shelves{margin:40px 0 0;display:flex;flex-direction:column;gap:14px}
.shelf{
  position:relative;display:flex;align-items:center;gap:18px;
  padding:22px 24px 22px 34px;overflow:hidden;
  background:var(--text);color:#fff;text-decoration:none;
  border:2px solid var(--text);border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,20,53,.14);
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
/* Goldener Balken links — wächst beim Überfahren */
.shelf::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:10px;
  background:var(--primary);transition:width .2s;
}
.shelf .label{flex:1;font-size:.98rem;font-weight:700;line-height:1.35}
.shelf .arrow{flex:0 0 auto;color:var(--primary);transition:color .2s,transform .2s}
.shelf:hover,.shelf:focus-visible{
  background:var(--secondary);border-color:var(--secondary);
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,20,53,.22);
}
.shelf:hover::before,.shelf:focus-visible::before{width:16px}
.shelf:hover .arrow,.shelf:focus-visible .arrow{transform:translateX(4px)}
.shelf:active{transform:translateY(0)}

/* ---------- Fusszeile ---------- */
footer.site{
  margin-top:auto;padding:40px 0 34px;
  border-top:1px solid var(--border);
}
.foot-inner{text-align:center}
.foot-links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 0;
}
.foot-links li{display:flex;align-items:center}
.foot-links li+li::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--border);margin:0 14px;
}
.foot-links a,.foot-links button{
  font-family:var(--font-body);font-size:.74rem;font-weight:500;
  letter-spacing:.06em;color:var(--text-muted);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid transparent;
}
.foot-links a:hover,.foot-links button:hover{color:var(--secondary);border-bottom-color:var(--secondary)}
.copy{margin:18px 0 0;font-size:.7rem;color:var(--text-muted);letter-spacing:.04em}

@media (max-width:620px){
  header{padding-top:40px}
  .tagline{font-size:.66rem;letter-spacing:.14em}
  .quote{padding:22px 20px}
  .shelf{padding:18px 18px 18px 26px;gap:12px}
  .shelf .label{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Unterseiten (Impressum, Datenschutz, …)
   ============================================================ */

/* Kopf einer Unterseite: Titel klein, Rückweg sichtbar */
header.sub{padding:40px 0 0}
header.sub .home{
  font-family:var(--font-display);font-weight:700;
  font-size:2.4rem;line-height:1;color:var(--text);text-decoration:none;
  display:inline-block;border-bottom:3px solid transparent;
}
header.sub .home:hover{border-bottom-color:var(--primary)}
/* Kopf jeder Unterseite ist ZENTRIERT — genau wie die Startseite.
   Das gilt für "J-Tec.de", die Überschrift, die Unterzeile und den
   goldenen Strich; einheitlich auf allen Seiten. */
header.sub h1{
  font-size:clamp(2.4rem,7vw,3.4rem);margin-top:18px;text-align:center;
}
header.sub .rule{margin-left:auto;margin-right:auto}
header.sub .tagline{text-align:center}

/* Fliesstext einer Rechtsseite.
   Der Zeilenabstand ist hier bewusst enger als auf der Startseite
   (body: 1.7), damit lange Texte nicht unnötig weit nach unten laufen. */
/* "auto" links und rechts ist hier entscheidend: .prose ueberschreibt
   sonst das margin:0 auto von .wrap und der ganze Textblock haengt
   links im Fenster, waehrend der Kopf mittig steht. */
.prose{margin:32px auto 0;line-height:1.52}
.prose section{
  padding:20px 22px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.prose h2{
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--secondary);margin:0 0 10px;
}
.prose h3{
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  color:var(--text);margin:16px 0 5px;
}
.prose p{margin:0 0 9px;font-size:.84rem;line-height:1.52}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--secondary)}
.prose ul{margin:0 0 10px;padding-left:20px;font-size:.84rem;line-height:1.5}
.prose li{margin-bottom:5px}
.prose .addr{font-style:normal;font-size:.84rem;line-height:1.62}
.prose .muted{color:var(--text-muted);font-size:.78rem;line-height:1.5}

/* Auszufüllende Stelle — im fertigen Impressum darf davon
   nichts mehr übrig sein. */
.fill{
  background:var(--gold-tint);border-bottom:2px solid var(--primary);
  padding:1px 5px;border-radius:3px;font-weight:700;
}

/* Hinweiskasten */
.notice{
  padding:14px 18px;margin:0 0 16px;
  background:var(--subtle);border-left:4px solid var(--primary);
  border-radius:var(--radius);font-size:.78rem;line-height:1.5;
  color:var(--text-muted);
}
.notice b{color:var(--text)}

/* Zurück-Verweis am Fuss des Textes */
.back{
  display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;
  font-size:.78rem;font-weight:700;color:var(--secondary);text-decoration:none;
}
.back:hover{text-decoration:underline}

@media (max-width:620px){
  .prose section{padding:18px 18px}
}

/* Porträt auf einer Unterseite: etwas kleiner und ohne die
   grosszügigen Abstände der Startseite. */
.portrait-impressum{margin:0 auto 16px}
.portrait-impressum img{width:190px}

/* Kleingedruckter Hinweis unter einer Abbildung.
   Bewusst sehr klein und gedämpft — er soll die Herkunft nennen,
   nicht mit dem Bild konkurrieren. */
.bildnachweis{
  margin:7px 0 0;text-align:center;
  font-size:.64rem;line-height:1.4;letter-spacing:.02em;
  color:var(--text-muted);
}

/* Impressum: Was ZWISCHEN den Kaesten steht, wird mittig gesetzt —
   die Abbildung samt Nachweis darunter und der Rueckweg am Fuss.
   IN den Kaesten bleibt der Text linksbuendig; zentrierter Fliesstext
   ueber mehrere Zeilen liest sich schlechter, und die Kaesten sollen
   aussehen wie auf den uebrigen Seiten. */
.prose.mitte{text-align:center}
.prose.mitte section{text-align:left}
/* Der Rueckweg steht auch hier links an der Kante der Kaesten, wie auf
   allen uebrigen Seiten. Als Block mit eigener Breite plus margin-right:auto,
   weil text-align im zentrierten Elternteil ihn sonst mittig zieht. */
.prose.mitte .back{display:flex;width:max-content;max-width:100%;margin-right:auto}

/* Schaltfläche, die im Fliesstext wie ein Link aussehen soll */
.linkish{
  font-family:var(--font-body);font-size:inherit;color:var(--secondary);
  background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;
}
.linkish:hover{color:var(--secondary-hover)}