/* hardtmedia.de - Relaunch 2026. Keine externen Schriften oder Skripte (Datenschutz, Ladezeit). */

:root {
  --ci-blue: #234761;
  --ci-blue-dark: #1a3549;
  --ci-light: #2d607c;
  --ci-baby: #b7d6e8;

  --bg: #ffffff;
  --bg-alt: #f3f6f9;
  --text: #1c2630;
  --muted: #55636f;
  --line: #dfe6ec;
  --card: #ffffff;
  --accent: var(--ci-light);
  --accent-text: #ffffff;

  --radius: 10px;
  --max: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11191f;
    --bg-alt: #172129;
    --text: #e3e9ee;
    --muted: #9aa8b4;
    --line: #2a3843;
    --card: #1a252e;
    --accent: #7fb3d1;
    --accent-text: #0f1a22;
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

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

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

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }

/* Kopfzeile */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ci-blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.site-header .logo { position: relative; display: block; width: 101px; height: 30px; flex: none; }
/* Das Logo-Bild hat links 7,5 % Leerraum; nach links ziehen, damit die Schrift an der Satzkante steht. */
.site-header .logo img { --w: 101px; position: absolute; left: calc(var(--w) * -0.075); top: 0; width: var(--w); max-width: none; height: auto; }

/* Startseite: Logo groß und lesbar (inkl. Claim), die Leiste ist durchsichtig und der Hero läuft
   darunter durch, also keine Kante. Beim Scrollen schrumpft das Logo in die Leiste, Hintergrund und
   Schatten erscheinen. site.js setzt --p (0 = ganz oben, 1 = gescrollt) und die Klasse .scroll-logo
   am Header bzw. .logo-hero am html-Element. --logo-room ist der freie Platz bis zur Navigation
   (von site.js gemessen), damit sich Logo und Menü nie überlappen. Ohne JS bleibt die normale Leiste. */
.site-header.scroll-logo {
  --logo-big: min(320px, var(--logo-room, 320px));
  background: rgba(35, 71, 97, var(--p, 1));
  box-shadow: 0 1px 0 rgba(0,0,0,calc(.15 * var(--p, 1))), 0 4px 14px rgba(0,0,0,calc(.18 * var(--p, 1)));
}
.site-header.scroll-logo .logo img { --w: calc(101px + (var(--logo-big) - 101px) * (1 - var(--p, 1))); }
.logo-hero .hero { margin-top: -60px; padding-top: 160px; }
@media (max-width: 760px) {
  .site-header.scroll-logo { --logo-big: min(220px, var(--logo-room, 220px)); }
  .logo-hero .hero { padding-top: 124px; }
}
.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a {
  color: #fff; text-decoration: none; font-size: .95rem;
  padding: 6px 10px; border-radius: 6px;
}
.site-header nav a:hover { background: rgba(255,255,255,.12); }
.site-header nav .lang { border: 1px solid rgba(255,255,255,.4); margin-left: 6px; }
@media (max-width: 760px) {
  .site-header nav a:not(.lang):not(.cta-nav) { display: none; }
}
.site-header nav .cta-nav { background: #fff; color: var(--ci-blue); font-weight: 600; }
.site-header nav .cta-nav:hover { background: var(--ci-baby); }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--ci-blue) 0%, var(--ci-blue-dark) 100%);
  color: #fff;
  padding: 72px 0 64px;
}
.hero .wrap { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: center; }
.hero .eyebrow { color: var(--ci-baby); font-weight: 600; letter-spacing: .02em; margin-bottom: .8em; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: .3em; }
.hero .role { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: #fff; opacity: .92; margin-bottom: 1.2em; }
.hero .lead { font-size: 1.08rem; max-width: 40em; opacity: .9; }
.hero .portrait {
  border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  border: 4px solid rgba(255,255,255,.25);
}
@media (max-width: 760px) {
  .hero { padding: 48px 0; }
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero .portrait { width: 150px; order: -1; }
}

.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  font-weight: 600; text-decoration: none; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: #fff; color: var(--ci-blue); }
.btn-primary:hover { background: var(--ci-baby); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-accent:hover { filter: brightness(1.08); }

/* Kennzahlen */
.facts { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.facts ul {
  list-style: none; margin: 0; padding: 26px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.facts li { font-size: .95rem; color: var(--muted); }
.facts strong { display: block; font-size: 1.35rem; color: var(--text); line-height: 1.25; }
@media (max-width: 760px) { .facts ul { grid-template-columns: 1fr 1fr; } }

/* Abschnitte */
section { padding: 72px 0; }
section.alt { background: var(--bg-alt); }
.section-intro { color: var(--muted); max-width: 44em; margin-bottom: 2em; font-size: 1.05rem; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
.card p:last-child { margin-bottom: 0; }
.card .example { font-size: .92rem; color: var(--muted); }

/* Referenzen */
.project { display: flex; flex-direction: column; }
.project .meta { font-size: .9rem; color: var(--muted); margin-bottom: .6em; }
.project ul { padding-left: 1.1em; margin: 0 0 1em; }
.project li { margin-bottom: .35em; }
.project .tags { margin-top: auto; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tags li {
  font-size: .8rem; padding: 3px 9px; border-radius: 99px;
  background: var(--bg-alt); border: 1px solid var(--line); color: var(--muted);
}
section.alt .tags li { background: var(--bg); }

.earlier { margin-top: 28px; }
.earlier ul { padding-left: 1.1em; margin: 0; }
.earlier li { margin-bottom: .5em; }

/* Technologien */
.tech dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 10px 24px; }
.tech dt { font-weight: 600; }
.tech dd { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .tech dl { grid-template-columns: 1fr; gap: 2px; } .tech dd { margin-bottom: 12px; } }

/* Über mich */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.about ul { padding-left: 1.1em; }
.about li { margin-bottom: .4em; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* Kontakt */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } }
.contact .direct a { font-weight: 600; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { form .row { grid-template-columns: 1fr; } }
form label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 14px; }
form input, form textarea {
  display: block; width: 100%; margin-top: 4px;
  font: inherit; font-weight: 400; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
form input:focus, form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
form textarea { min-height: 150px; resize: vertical; }
form .hp { position: absolute; left: -9999px; }
form .privacy-note { font-size: .85rem; color: var(--muted); }
.notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; display: none; }
.notice.ok { background: #e3f4e8; color: #17462a; }
.notice.err { background: #fbe7e7; color: #5c1717; }

/* Fußzeile */
.site-footer { background: var(--ci-blue-dark); color: rgba(255,255,255,.8); padding: 28px 0; font-size: .9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer a { color: #fff; margin-left: 16px; }
.site-footer a:first-child { margin-left: 0; }

/* Rechtstexte */
.legal { padding: 56px 0; }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: 2rem; }
.legal h2 { font-size: 1.3rem; margin-top: 1.6em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.2em; }