/*
  funkwerk.cloud — Stylesheet

  Gestalterisch an Apples Formensprache angelehnt: sehr grosse, eng laufende
  Ueberschriften, viel Weissraum, ruhige Flaechen im Wechsel zwischen Weiss und
  einem hellen Grau, genau ein Akzentton, und Interaktionen, die sich eher
  zurueckhalten als anspringen.

  Technisch bleibt es wie zuvor: keine externen Schriften, kein Framework, kein
  CDN. Die Systemschrift ist auf Apple-Geraeten ohnehin San Francisco — also
  genau die Schrift, die dieses Bild traegt — und auf allen anderen Systemen die
  jeweils passende Entsprechung. Damit laedt die Seite sofort, funktioniert
  hinter jeder Firewall und setzt keine Cookies.
*/

/* ---- Farben ------------------------------------------------------------
   Hell ist der Normalfall; die Dunkelvariante wird nur ueber die
   Systemeinstellung zugeschaltet. Beide sind vollstaendig definiert, damit
   nirgends eine Farbe nur in einem der beiden Faelle existiert. */
:root {
  --bg:        #ffffff;
  --bg-alt:    #f5f5f7;
  --card:      #ffffff;
  --text:      #1d1d1f;
  --muted:     #6e6e73;
  --line:      #d2d2d7;
  --accent:    #0071e3;
  --accent-in: #ffffff;
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.06);
  --nav-bg:    rgba(255, 255, 255, 0.72);
  --max:       980px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #000000;
    --bg-alt:    #161617;
    --card:      #1d1d1f;
    --text:      #f5f5f7;
    --muted:     #a1a1a6;
    --line:      #38383c;
    --accent:    #2997ff;
    --accent-in: #000000;
    --shadow:    none;
    --nav-bg:    rgba(0, 0, 0, 0.72);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---- Kopfzeile ---------------------------------------------------------
   Schmal, halbtransparent und mit Weichzeichner hinterlegt — die Seite soll
   unter ihr durchscheinen, statt an einer Kante abzuschneiden. */
header {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; gap: 20px;
}
.brand { display: flex; align-items: center; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { height: 22px; display: block; }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a {
  color: var(--text); font-size: 0.75rem; letter-spacing: -0.01em; opacity: 0.85;
}
.nav nav a:hover { opacity: 1; text-decoration: none; }

/* ---- Ausklappmenue in der Kopfzeile -------------------------------------
   Traeger ist <details>: das bringt Aufklappen per Klick, Tastaturbedienung
   und Touch von Haus aus mit — anders als ein Menue, das nur auf Hover
   reagiert. Sichtbar bleibt davon nichts, der Standardpfeil wird entfernt und
   durch einen eigenen, kleineren ersetzt. */
.submenu { position: relative; }
.submenu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text); font-size: 0.75rem; letter-spacing: -0.01em; opacity: 0.85;
  display: flex; align-items: center; gap: 4px;
  user-select: none;
}
.submenu > summary::-webkit-details-marker { display: none; }
.submenu > summary:hover { opacity: 1; }
.submenu > summary::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg);
  transition: transform 0.2s ease;
}
.submenu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.submenu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Sichtbarkeit ausdruecklich an [open] geknuepft, statt sie dem Browser zu
   ueberlassen: Die Standardformatierung blendet den Inhalt eines geschlossenen
   <details> je nach Browser unterschiedlich aus — mal ueber den internen Slot,
   mal per display:none an den Kindern. Im zweiten Fall wuerde das display
   hier unten die Ausblendung ueberschreiben und das Feld bliebe offen stehen. */
.submenu-panel { display: none; }
.submenu[open] > .submenu-panel { display: flex; }

.submenu-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 168px;
  flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  z-index: 30;
}
.submenu-panel a {
  padding: 8px 12px; border-radius: 9px;
  font-size: 0.8125rem; opacity: 1; white-space: nowrap;
}
.submenu-panel a:hover { background: var(--bg-alt); text-decoration: none; }

/* Auf schmalen Anzeigen gibt es neben der Marke zu wenig Platz fuer ein
   schwebendes Feld — dort klappt das Menue schlicht darunter auf. */
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .nav nav { gap: 16px; }
  .submenu-panel { left: auto; right: 0; transform: none; }
}

/* ---- Ueberschriften ----------------------------------------------------
   Gross, halbfett und eng gesetzt. Der negative Buchstabenabstand ist das
   Merkmal, das diese Anmutung traegt; er waechst mit der Schriftgroesse. */
h1, h2, h3 { font-weight: 600; }

.hero {
  padding: 88px 0 72px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
}
.hero .lead {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.016em;
  color: var(--muted);
  /* Breit genug, dass der Absatz als Block unter der Ueberschrift steht und
     nicht als schmale hohe Saeule — bei zentriertem Satz faellt das sofort auf. */
  max-width: 48ch;
  margin: 0 auto 34px;
}
/* Rechtstexte und Unterseiten laufen linksbuendig — dort ist der Hero nur
   Titelzeile, kein Aushaengeschild. */
.hero.plain { text-align: left; padding: 72px 0 40px; }
.hero.plain .lead { margin-left: 0; max-width: 52ch; }

.accent-line { display: block; color: var(--muted); }

/* ---- Schaltflaechen ----------------------------------------------------- */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 980px;
  background: var(--accent); color: var(--accent-in);
  font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; border: 0;
  transition: filter 0.2s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn.ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero.plain .btn-row { justify-content: flex-start; }

/* Textlink mit nachgestelltem Winkel — ersetzt zweite Schaltflaechen dort,
   wo eine volle Flaeche zu laut waere. */
.more { display: inline-block; font-size: 1.0625rem; }
.more::after { content: " \203A"; }

/* ---- Abschnitte --------------------------------------------------------- */
section { padding: 84px 0; }
section.alt { background: var(--bg-alt); }
section h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.1; letter-spacing: -0.022em;
  margin: 0 0 12px; text-align: center;
}
section .sub {
  color: var(--muted); margin: 0 auto 44px; max-width: 46ch;
  text-align: center; font-size: 1.125rem; line-height: 1.42;
}

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--card); border-radius: 18px; padding: 30px 28px;
  box-shadow: var(--shadow);
}
section.alt .card { box-shadow: none; }
.card h3 { margin: 0 0 10px; font-size: 1.3rem; letter-spacing: -0.018em; }
.card p { margin: 0; color: var(--muted); font-size: 1rem; }
.card .tag {
  display: block; margin-bottom: 10px;
  color: var(--accent); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.004em;
}
.card.accent { outline: 1px solid var(--accent); outline-offset: -1px; }

/* ---- Projektblock ------------------------------------------------------- */
.project { display: grid; gap: 46px; grid-template-columns: 1.1fr 0.9fr; align-items: center; }
@media (max-width: 820px) { .project { grid-template-columns: 1fr; } }
.project h3 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 12px; }
.project .intro { color: var(--muted); margin: 0; font-size: 1.0625rem; }
.project ul { margin: 20px 0 0; padding-left: 20px; color: var(--muted); }
.project li { margin-bottom: 7px; }
.panel {
  background: var(--card); border-radius: 20px; padding: 12px 26px;
  box-shadow: var(--shadow);
}
section.alt .panel { background: var(--bg); box-shadow: none; }
.panel .kpi {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
}
.panel .kpi:last-child { border-bottom: 0; }
.panel .kpi span:last-child { color: var(--muted); text-align: right; }
.cta { margin-top: 26px; }

/* ---- Rechtstexte -------------------------------------------------------- */
.legal { padding: 20px 0 90px; max-width: 720px; }
.legal h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); letter-spacing: -0.022em; margin: 0 0 26px; }
.legal h2 { font-size: 1.3rem; letter-spacing: -0.016em; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal .note {
  background: var(--bg-alt); border-radius: 14px;
  padding: 18px 22px; color: var(--text); font-size: 0.9375rem;
}

/* ---- Fusszeile ---------------------------------------------------------- */
footer {
  background: var(--bg-alt);
  padding: 30px 0; color: var(--muted); font-size: 0.75rem;
}
footer .row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

/* ---- Bildfolge im Hero --------------------------------------------------
   Drei Motive im Wechsel, als Inline-SVG statt als Fotos: keine Lizenzfragen,
   keine Ladezeit, auf jedem Display scharf — und die Motive greifen den
   Firmennamen auf (Funk = Sendewellen). Die Umschaltung laeuft rein ueber
   CSS-Keyframes und kann daher nicht haengen bleiben. */
.showcase {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  max-width: 680px;
  margin: 8px auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-alt);
}
.showcase .slide {
  position: absolute; inset: 0;
  /* Grafik oben (schrumpfbar), Text unten (nimmt sich, was er braucht). Lag die
     Unterschrift absolut ueber der Grafik, ueberlagerten sich beide, sobald sie
     zweizeilig wurde. */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 30px 30px 26px;
  opacity: 0;
  animation: fwFade 21s infinite;
}
.showcase .slide:nth-child(1) { animation-delay: 0s; }
.showcase .slide:nth-child(2) { animation-delay: 7s; }
.showcase .slide:nth-child(3) { animation-delay: 14s; }
/* Die Motive zeichnen sich ueber currentColor; der Akzentton ist damit an
   genau einer Stelle gesetzt und gilt fuer alle drei Grafiken. */
.showcase .slide svg {
  width: 100%; height: 100%; min-height: 0; max-width: 470px;
  justify-self: center; color: var(--accent);
}
.showcase .caption {
  font-size: 0.9375rem; line-height: 1.4; color: var(--muted);
  align-self: end; text-align: center;
}
.showcase .caption strong { color: var(--text); font-weight: 600; }

@keyframes fwFade {
  0%   { opacity: 0; transform: scale(1.012); }
  4%   { opacity: 1; transform: scale(1); }
  30%  { opacity: 1; transform: scale(1); }
  34%  { opacity: 0; transform: scale(0.996); }
  100% { opacity: 0; }
}

@keyframes fwPulse {
  0%   { opacity: 0.14; transform: scale(0.82); }
  50%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0.14; transform: scale(0.82); }
}
.wave { transform-origin: center; animation: fwPulse 3.2s ease-in-out infinite; }
.wave.w2 { animation-delay: 0.45s; }
.wave.w3 { animation-delay: 0.9s; }

@keyframes fwDraw { to { stroke-dashoffset: 0; } }
.link { stroke-dasharray: 240; stroke-dashoffset: 240; animation: fwDraw 2.4s ease forwards; }
.link.d1 { animation-delay: 0.2s; } .link.d2 { animation-delay: 0.5s; }
.link.d3 { animation-delay: 0.8s; } .link.d4 { animation-delay: 1.1s; }
.link.d5 { animation-delay: 1.4s; } .link.d6 { animation-delay: 1.7s; }
.link.d7 { animation-delay: 2.0s; }

/* Die Geraete im Mesh-Motiv sind gefuellt, damit die Verbindungslinien hinter
   ihnen enden statt durch sie hindurchzulaufen. */
.showcase .node rect { fill: var(--bg-alt); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .showcase .slide { animation-duration: 1ms; animation-iteration-count: 1; opacity: 1; }
  .showcase .slide:nth-child(n+2) { display: none; }
  .wave, .link { animation: none; opacity: 0.7; stroke-dashoffset: 0; }
  .btn { transition: none; }
}

/* E-Mail-Adressen werden erst im Browser zusammengesetzt (siehe mail.js) und
   sehen aus wie normale Links, ohne im Quelltext welche zu sein. */
.mail a { color: var(--accent); cursor: pointer; }
.mail noscript { color: var(--muted); }

/* ---- Haeufige Fragen ----------------------------------------------------
   Aufklappbar ueber <details>, also ohne JavaScript und mit der Tastatur
   bedienbar. Suchmaschinen lesen den Antworttext trotzdem — anders als bei
   einer Loesung, die den Inhalt erst per Skript nachlaedt. */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 34px 18px 0;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.faq details p {
  margin: 0 0 20px;
  padding-right: 34px;
  color: var(--muted);
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}