/* Sandy & Michael – Grundgestaltung der ersten Fassung (2026-10-01),
   übernommen von Q Consulting & Services: Arial, Schwarz-Weiß. */
:root {
  --text: #1a1a1a;
  --grau: #5a5a5a;
  --linie: #e2e2e2;
  --grund: #ffffff;
  --sand: #d0c7a3; /* heller Sandton aus dem Strand im Logo-Foto, Knöpfe (Michael, 2026-10-06) */
  --breite: 80rem; /* 1280 px, Inhaltsbreite aller Websites (Michael, 2026-10-01) */
  --lesebreite: 80rem; /* Text in voller Inhaltsbreite wie bei Nadi Life, mehrspaltig im Einzelfall (Michael, 2026-10-01) */
}
* { box-sizing: border-box; }
body { margin: 0; font: 400 1.0625rem/1.65 Arial, Helvetica, sans-serif; color: var(--text); background: var(--grund); }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--grund); padding: .5rem; }
a { color: var(--text); }
/* Kopf ohne Linie, Logo und Schriftzug zentriert (Michael, 2026-10-06) */
.kopf-innen { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-top: 2rem; padding-bottom: .5rem; text-align: center; }
.marke { display: flex; flex-direction: column; align-items: center; font-family: Arial, Helvetica, sans-serif; font-size: 1.65rem; line-height: 1.25; color: var(--text); text-decoration: none; } /* 25 % kleiner (Michael, 2026-10-06) */
.marke-titel { margin: 0; font-size: inherit; }
.marke .portrait { margin-bottom: 1rem; }
nav a { margin-left: 1.25rem; color: var(--grau); text-decoration: none; }
nav a:first-child { margin-left: 0; }
nav a[aria-current="page"], nav a:hover { color: var(--text); text-decoration: underline; }
.inhalt { padding-top: 2.5rem; padding-bottom: 3rem; }
.inhalt > * { max-width: var(--lesebreite); }
section { margin-bottom: 2.5rem; }
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; font-weight: 400; line-height: 1.25; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.45rem; margin-top: 2rem; }
.untertitel { color: var(--grau); font-size: 1.2rem; }
/* Knöpfe in Sand statt Volltonschwarz (Michael, 2026-10-06) */
.knopf { display: inline-block; margin: .25rem 0 1rem; padding: .7rem 1.4rem; border: 1px solid var(--sand); border-radius: 999px; background: var(--sand); color: var(--text); text-decoration: none; }
/* Fußzeile ohne Linie, zentriert, Text und Links hellgrau ohne Unterstrich
   (Michael, 2026-10-06); #999 bewusst heller als #767676 (Kontrast 2,8:1 statt 4,5:1, Michael) */
.fuss { color: #999; font-size: .9375rem; padding: 1.5rem 0; text-align: center; }
.fuss a { color: #999; margin: 0 .625rem; text-decoration: none; }
.fuss a:hover { color: var(--grau); }
.mitte { text-align: center; }
.portrait { display: block; width: 128px; height: 128px; margin: 0 auto 1rem; border-radius: 50%; }
/* Linkseite unter /lp/ */
.links { max-width: 28rem; margin: 0 auto; text-align: center; }
.links .knopf { display: block; margin: 0 0 .9rem; }
.links .profile { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; margin-top: 1.8rem; }
@media (max-width: 600px) {
  .marke { font-size: 1.3125rem; }
  nav { text-align: center; }
  nav a { margin: 0 .6rem; }
  h1 { font-size: 1.75rem; }
}

/* Pfeil nach oben wie bei Nadi Life (Michael, 2026-10-01): erscheint nach
   etwa 500 px Scrollen, mittig am unteren Rand, klebt per sticky am
   Bildschirmrand und bleibt am Seitenende über der Fußzeile stehen. */
html { scroll-behavior: smooth; }
.nach-oben-halter { position: sticky; bottom: 1rem; z-index: 5; height: 0; display: flex; justify-content: center; pointer-events: none; }
.nach-oben { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -60px; border-radius: 50%;
  color: var(--text); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: auto; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.nach-oben:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.nach-oben:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nach-oben { transition: none; } .nach-oben:hover { transform: none; } }

/* Knöpfe: kein Unterstrich und kein Farbwechsel beim Überfahren, stattdessen
   leichtes Anheben mit Schatten wie bei Nadi Life (Michael, 2026-10-01) */
.knopf { transition: transform .15s ease, box-shadow .15s ease; }
.knopf:hover { text-decoration: none; filter: none; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }
.knopf:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover, .knopf:active { transform: none; } }
.knopf:hover { background: var(--sand); color: var(--text); }

/* Stand eines Rechtstexts: klein, grau, mittig unter dem Text (Michael, 2026-10-06).
   Erprobung bei sami, danach für alle Websites, siehe website-aufbau. */
.stand { margin-top: 3rem; text-align: center; font-size: .8125rem; color: #999; }

/* Startseite: Projekte zweispaltig, links Sandy, rechts Michael
   (Michael, 2026-10-01); auf schmalen Bildschirmen untereinander. */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; max-width: 56rem; margin-left: auto; margin-right: auto; text-align: center; }
.zwei-spalten h2 { margin-top: 0; }
.zwei-spalten ul { list-style: none; padding: 0; margin: 0; }
.zwei-spalten li { margin-bottom: .4rem; }
.zwei-spalten a { text-decoration: none; } /* ohne Unterstrich (Michael, 2026-10-06) */
.zwei-spalten a:hover { color: var(--grau); }
/* Pfeil hinter den Projektlinks: führt auf eine andere Website (Michael, 2026-10-06).
   Als Maske, damit er die Linkfarbe übernimmt; reine Zierde, nichts für Vorleseprogramme. */
.zwei-spalten a::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .05em; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 600px) { .zwei-spalten { grid-template-columns: 1fr; gap: 2rem; } }