:root{
  /* Logo-basierte Hauptfarben */
  --blue-1:#084b93;   /* Signet Fläche */
  --blue-2:#0f1a70;   /* Signet Rahmen */
  --orange:#ff9120;   /* i-Fläche */
  --gold:#fbb610;     /* i-Rand */
  --backdrop:#e6edff; /* m-Hintergrund */

  /* UI-Farben daraus abgeleitet */
  --bg:#e6edff;             /* aus Logo Backdrop, angenehm hell */
  --panel:#f6f8ff;          /* leicht abgesetzte Flächen */
  --bg-soft:#f6f8ff;        /* weiche Paneel-Flächen */
  --bg-light:#f0f2f8;       /* Helle Flächen (Formulare, Karten) */
  --ink:#0e1624;            /* Primärtext */
  --ink-contrast:#f0f2f8;   /* Kontrasttext, z.B. in Panels */
  --muted:#4b5563;          /* Sekundärtext */
  --line:#d6dbea;           /* Linien/Border */

  --brand:var(--blue-1);    /* Primär-Brand */
  --brand-2:var(--blue-2);  /* Tiefes Blau für Akzente/Hover */
  --accent:var(--orange);   /* Sekundärakzent (Buttons/CTAs) */
  --accent-2:var(--gold);   /* Akzent-Gradient 2 */

  /* Status */
  --ok-bg:#ecfdf5; --ok-bd:#a7f3d0; --ok-fg:#065f46;
  --err-bg:#fef2f2; --err-bd:#fecaca; --err-fg:#991b1b;

  /* Effekte/Schatten */
  --shadow-1: rgba(0,0,0,.10);  /* weicher UI-Schatten */
  --shadow-2: rgba(0,0,0,.16);  /* stärkerer Schatten */
  --drop-deep: rgba(0,0,0,.60); /* für drop-shadow Filter */
}

/* Soft-Dark (bis graublau, logo-freundlich) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#a8aeb8;         /* NICHT tiefschwarz – logo bleibt lesbar */
    --panel:#9398a3;
    --bg-soft:#9398a3;
    --bg-light:#dde0e7;
    --ink:#0b1220;
    --ink-contrast:#cfd5e7; /* Kontrasttext, z.B. in Panels */
    --muted:#334155;
    --line:#c9d2ee;

    --brand:var(--blue-1);    /* Primär-Brand */
    --brand-2:var(--blue-2);
    --accent:var(--blue-1);   /* Primärakzent */
    --accent-2:var(--blue-2); /* Sekundärakzent */
  }
}

/* Basis */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--ink);
  background: var(--bg);
  font-family:"Sansation", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  line-height:1.6;
}

/* Headings in Handel Gothic */
/* Nur große Headings in Handel Gothic */
h1, h2 {
  font-family: "HandelGothicBT", "Sansation", Arial, sans-serif;
  letter-spacing: .2px;
}

h3, h4 {
  font-family: "Sansation", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  letter-spacing: .1px;
}
h1 { font-size: clamp(28px, 5vw, 52px); margin: .6rem 0 0; }
h2 { font-size: clamp(22px, 3.5vw, 36px); margin: 1.2rem 0 .5rem; }


/* Claim/Monos – Ubuntu Sans Mono */
.tag, .mono, code, pre, kbd {
  font-family:"Ubuntu Sans Mono VF", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.tag{ color:var(--muted); margin:.2rem 0 1.5rem; }

/* sanfter Verlauf von Backdrop nach Weiß – global, nicht pro Section */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 50% -10%, var(--backdrop) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%); /* Fallback */
  pointer-events:none; z-index:-1;
}

/* Links */
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-2); text-decoration:underline }

/* Buttons */
.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:12px; font-weight:600; border:0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--ink-contrast); box-shadow:0 8px 22px var(--shadow-1);
}

.btn.ghost{
  background:transparent; color:var(--brand);
  border:1px solid var(--brand); box-shadow:none;
}
.btn.ghost:hover{ color:var(--brand-2); border-color:var(--brand-2); }

/* Hero */
/* Hero-Layout */
.hero {
  text-align: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Logo im Hero */
.hero img {
  display: block;
  max-width: 220px;      /* ggf. 260/300 ausprobieren */
  width: 40vw;
  height: auto;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 6px 16px var(--shadow-1)); /* dezenter 3D-Effekt */
  border-radius: 18px;   /* sanft gerundet, passend zum Look */
}

/* dezente Subline */
.hero .tagline {
  margin: 0 0 1.2rem;
  opacity: .8;
}

/* CTAs schön in einer Zeile */
.cta-row {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Screenreader-only (SEO/Accessibility) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Responsive Hero-Bild */

@media (max-width: 700px) {
  .hero img { max-width: 180px; width: 55vw; }
}

/* FIXME: Die Buttons nehmen im HOVER die falsche farbe an, wenn sie in der CTA-Reihe sind.
/* Buttons im Hero / CTA*/
.cta-row .btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink-contrast);
  box-shadow: 0 8px 22px var(--shadow-1);
}
.cta-row .btn:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 10px 24px var(--shadow-2);
  border-color: var(--gold);
}

.cta-row a:hover {
  color: var(--gold);
  text-decoration: underline;
}


/* Sections & Cards */
.section{ max-width:1000px; margin:0 auto; padding:2.2rem 1rem }
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
@media (max-width: 860px){ .grid{ grid-template-columns:1fr } }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1rem 1.2rem;
  box-shadow:0 6px 16px var(--shadow-1);
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px; /* leicht kleiner als card, damit's bündig aussieht */
  margin-bottom: 0.8rem;
}

/* Default: Bilder in Text-Sections rechts flottieren */
.section :where(img, picture > img){
  float: right;
  max-width: min(42%, 520px);
  height: auto;
  margin: 0 0 1rem 1.5rem;   /* Abstand zum Text */
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 8px 22px var(--shadow-1);
  border: 1px solid var(--line);
}

/* Ausnahmen: NICHT anfassen in Komponenten */
.section :where(.card, .form, form, .hero, .hero-nav, .footer, .btn, .logo) img{
  float: none;
  max-width: 100%;
  margin: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Mobile: kein Float */
@media (max-width: 860px){
  .section :where(img, picture > img){
    float: none;
    display: block;
    max-width: 100%;
    margin: 1rem auto;
  }
}

/* Form */
.form-wrap{ max-width:900px }
.form{ display:flex; flex-direction:column; gap:1rem }

.field.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
@media (max-width: 860px){ .field.two{ grid-template-columns:1fr } }

/* Inputs/Textarea immer über Variablen */
.field input, .field textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--bg-light);
  color:var(--ink);
  padding:.75rem .9rem;
  box-shadow:0 2px 6px var(--shadow-1) inset;
}
.field input:focus, .field textarea:focus{
  outline:2px solid color-mix(in oklab, var(--brand) 35%, white);
  border-color: var(--brand);
}

/* Hinweise im Formular */
.form-note{ color:var(--muted); font-size:.9rem }

/* Honeypot: sichtbar im DOM, aber offscreen */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

/* Ausblenden, wenn leer */
#form-status:empty{ display:none }

/* Basis + Fade-in */
#form-status{
  margin-top:.5rem; padding:.55rem .7rem .55rem 2rem;
  border:1px solid var(--line); border-radius:.4rem;
  background:var(--bg-light); color:var(--ink);
  position:relative; opacity:0; transition:opacity .25s ease;
}
#form-status:not(:empty){ opacity:1 }

/* Erfolg / Fehler */
#form-status.ok, #form-status.success{
  background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg);
}
#form-status.error, #form-status.fail{
  background: var(--err-bg); border-color: var(--err-bd); color: var(--err-fg);
}

/* Icons via before */
#form-status.ok::before, #form-status.success::before,
#form-status.error::before, #form-status.fail::before{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  font-size:1.1rem; line-height:1;
}
#form-status.ok::before, #form-status.success::before{ content:"✔"; }
#form-status.error::before, #form-status.fail::before{ content:"✖"; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px); filter:saturate(0.9); transition:all .6s ease }
.reveal.visible{ opacity:1; transform:none; filter:none }

/* ===== Footer: halbtransparente, am Seitenende haftende Leiste ===== */

/* (optional) Höhe als Token, falls du später bottom‑padding brauchst */
:root{ --footer-h: 64px; }

/* Footer-Container */
.footer{
  position: sticky;            /* bleibt am unteren Viewport-Rand haften */
  bottom: 0;
  inset-inline: 0;
  z-index: 50;

  /* Glas-Hintergrund (Theme-abhängig über Tokens) */
  /* Light: mixe Panel ins Transparent, Dark: wirkt wie „Glass“ */
  background: color-mix(in oklab, var(--panel) 65%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px var(--shadow-1);
}

/* Innenbreite analog .section */
.footer__inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: var(--footer-h);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Links/Typo – NICHT mittig */
.footer__left{ color: var(--muted); text-align: left; }
.footer__right{ display:flex; gap:1rem; }
.footer__right a{ color: var(--brand); text-decoration: none; }
.footer__right a:hover{ color: var(--brand-2); text-decoration: underline; }

/* Version-Info */
.version{
  font-size: smaller;
  color: var(--muted);
}

/* Mobile: untereinander, weiterhin linksbündig */
@media (max-width: 640px){
  .footer__inner{ flex-direction: column; align-items: flex-start; padding: .6rem 1rem; gap:.4rem; }
}

/* 404 Seite */
section.container{
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}
section.container h1{
  font-size: clamp(32px, 6vw, 64px);
  margin: 0.5rem 0;
  color: var(--brand);
  transform: rotate(-6deg); /* leichter Schräg-Effekt */
}
/* 404 Bild */
section.container img{
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 10px;
  box-shadow: 0 6px 16px var(--shadow-1);
  transform: rotate(-6deg); /* leichter Schräg-Effekt */
  filter: drop-shadow(0 4px 8px var(--drop-deep));
  transition: transform 0.3s ease;
}

section.container img:hover{
  transform: rotate(-20deg) scale(1.05); /* stärkerer Schräg-Effekt beim Hover */
  filter: drop-shadow(0 6px 12px var(--drop-deep));
  transition: transform 0.3s ease, filter 0.3s ease; /* sanfter Übergang */
  cursor: pointer; /* Zeigt an, dass es interaktiv ist */
}

  /* 404 Text */
section.container p{
  color: var(--muted);
  font-size: 1rem;
  margin: 3.5rem 0 .5rem 0;
  line-height: 1.5;
  font-size: large;
}
/* 404 Link */
section.container a{
  color: var(--brand);
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}
section.container a:hover{
  color: var(--brand-2);
  text-decoration: underline;
  transform: translateY(-2px); /* leichter Hover-Effekt */
}