/* Auszeichnungs-Übersicht und Einzelseiten. Nur TopExperte — siehe PROJEKTE.md. */

.az-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.az-kachel{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.az-kachel:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.az-kachel-siegel{flex-shrink:0;width:132px}
.az-kachel-siegel svg{width:132px;height:auto;display:block;border-radius:6px;box-shadow:0 6px 18px rgba(15,23,42,.16)}
.az-kachel-auge{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.az-kachel h2{font-size:19px;margin-bottom:8px;letter-spacing:-.02em}
.az-kachel p{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px}
.az-kachel-mehr{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--brand)}
.az-kachel-mehr svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.az-kachel:hover .az-kachel-mehr svg{transform:translateX(3px)}
.az-hinweis{margin-top:32px;font-size:14px;color:var(--text-muted);text-align:center}

/* ─── Einzelseite ─── */
/* Die Navigation liegt fest über der Seite. Wer als erstes Element
   startet, muss ihre Höhe selbst freihalten — andere Seiten tun das über
   .page-hero mit 128px. Hier stand nur padding:20px, die Brotkrume lag
   deshalb vollständig hinter der Navigation. */
.az-krume{padding:88px 0 20px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted)}
.az-krume a{color:var(--text-secondary)}
.az-krume a:hover{color:var(--brand)}
.az-krume span{margin:0 7px;opacity:.5}
.az-krume strong{color:var(--ink);font-weight:600}

.az-kopf{padding:40px 0 56px;background:linear-gradient(180deg,var(--surface-alt),var(--surface))}
.az-kopf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.az-kopf h1{margin:18px 0 22px}
.az-intro{font-size:16.5px;line-height:1.72;color:var(--text-secondary);margin-bottom:16px;max-width:34em}
.az-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.az-unter{font-size:13px;color:var(--text-muted);margin-top:14px}
.az-kopf-siegel{margin:0;text-align:center}
.az-kopf-siegel svg{max-width:100%;height:auto;border-radius:10px;box-shadow:0 22px 54px rgba(15,23,42,.26)}
.az-kopf-siegel figcaption{margin-top:16px;font-size:12px;color:var(--text-muted);letter-spacing:.03em}

.az-h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
/* Die Einleitung steht jetzt als mehrere Absätze hier statt einzeln im
   Kopf — ohne Abstand kleben sie aneinander. */
.az-fliess{font-size:16.5px;line-height:1.78;color:var(--text-secondary)}
.az-fliess + .az-fliess{margin-top:18px}

/* Kriterien: nummeriert, weil die Reihenfolge eine Gewichtung ist */
.az-kriterien{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.az-kriterien li{display:flex;gap:18px;background:var(--surface);padding:28px 26px}
.az-nr{font-family:'Playfair Display',Georgia,serif;font-size:28px;color:var(--gold);line-height:1;flex-shrink:0}
.az-kriterien h3{font-size:17px;margin-bottom:8px;letter-spacing:-.015em}
.az-kriterien p{font-size:14.5px;color:var(--text-secondary);line-height:1.6}

.az-nutzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.az-nutzen-karte{border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 26px}
.az-nutzen-karte svg{width:26px;height:26px;color:var(--brand);margin-bottom:16px}
.az-nutzen-karte h3{font-size:17px;margin-bottom:9px;letter-spacing:-.015em}
.az-nutzen-karte p{font-size:14.5px;color:var(--text-secondary);line-height:1.6}

.az-ablauf{list-style:none;counter-reset:az}
.az-ablauf li{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}
.az-ablauf li:last-child{border-bottom:none}
.az-schritt{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-weight:700}
.az-ablauf h3{font-size:17px;margin-bottom:6px;letter-spacing:-.015em}
.az-ablauf p{font-size:15px;color:var(--text-secondary);line-height:1.62}

.az-fragen{border-top:1px solid var(--border)}
.az-frage{border-bottom:1px solid var(--border)}
.az-frage summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:17px;font-weight:600;color:var(--ink);position:relative;transition:color var(--dur) var(--ease)}
.az-frage summary::-webkit-details-marker{display:none}
.az-frage summary:hover{color:var(--brand)}
.az-frage summary::after{content:'';position:absolute;right:6px;top:50%;margin-top:-8px;width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.az-frage[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.az-frage p{padding:0 3em 24px 0;font-size:15.5px;color:var(--text-secondary);line-height:1.68}

.az-schluss{padding:80px 0;background:var(--surface-dark);color:var(--text-on-dark)}
.az-schluss h2{color:#fff}
.az-schluss p{color:var(--text-on-dark-secondary)}
.az-schluss .az-unter a{color:var(--blue-400);text-decoration:underline}

@media (max-width:900px){
  .az-kopf-grid{grid-template-columns:1fr;gap:40px}
  .az-kopf-siegel{order:-1}
  /* Die Begrenzung galt nur für svg. Seit die Urkunde ein echtes Bild ist,
     füllte sie auf dem Handy den ganzen ersten Bildschirm — Überschrift und
     Nutzen kamen erst nach dem Wischen. */
  .az-kopf-siegel svg,
  .az-kopf-siegel img{max-width:230px;margin:0 auto}
  .az-kachel{flex-direction:column}
  .az-kachel-siegel{width:100%;text-align:center}
}
@media (max-width:560px){
  .az-ctas .btn{width:100%;justify-content:center}
}

/* ── Verwandte Auszeichnungen ──────────────────────────────────────── */
.az-verwandt{padding:72px 0;border-top:1px solid var(--border)}
.az-verwandt-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.az-verwandt-karte{display:flex;flex-direction:column;gap:6px;padding:20px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s}
.az-verwandt-karte:hover{border-color:var(--brand);transform:translateY(-2px)}
.az-verwandt-karte strong{font-size:16px;color:var(--ink);line-height:1.3}
.az-verwandt-auge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand)}
.az-verwandt-text{font-size:13.5px;color:var(--text-muted);line-height:1.5}
@media (max-width:760px){
  .az-verwandt-liste{grid-template-columns:1fr}
  .az-verwandt{padding:52px 0}
}


/* ══════════════════════════════════════════════════════════════════════
   AUSZEICHNUNGSHALLE

   Die Award-Seiten sind die einzigen der Marke, die dunkel beginnen.
   Das ist Absicht: eine Ehrenwand, kein weiterer Unterseitenkopf. Ab
   dem zweiten Abschnitt läuft die gewohnte helle Seite weiter, damit
   der Bruch ein Auftritt bleibt und keine zweite Marke wird.

   Farben stehen hier bewusst als Hex und nicht als Token — dieses
   Tiefblau gibt es sonst nirgends, und ein Token dafür würde nur an
   einer Stelle benutzt.
   ══════════════════════════════════════════════════════════════════ */

.az-buehne{
  --tief:      #080D16;
  --tief-hoch: #111C2E;
  --gold-hell: #E9C766;
  --gold-mitt: #C29C3E;
  position:relative;overflow:hidden;
  padding:76px 0 92px;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(194,156,62,.20), transparent 58%),
    linear-gradient(168deg, var(--tief-hoch) 0%, var(--tief) 62%, #05080F 100%);
  color:#EEF2F8;
}
/* Feines Korn. Ohne das wirken große dunkle Flächen im Browser flach
   und leicht bandig. 1 KB, keine Anfrage — als data-URI eingebettet. */
.az-buehne::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.az-buehne > .container{position:relative;z-index:1}

.az-oberzeile{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-hell);
}
.az-strich{width:44px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,var(--gold-mitt))}

/* Playfair ist auf der Seite ohnehin geladen — die Serife gibt der
   Überschrift den Urkundencharakter, den eine Grotesk hier nicht hat. */
.az-buehne h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(38px,5.2vw,62px);line-height:1.04;
  letter-spacing:-.018em;font-weight:700;color:#fff;
  margin:0 0 20px;text-wrap:balance;
}
.az-buehne .az-hero-zeile{
  font-size:19px;line-height:1.6;color:#AFBCCE;max-width:31em;margin:0 0 30px}

/* ── Der Haken ────────────────────────────────────────────────────────
   Vorher zwei gedrehte Rahmenkanten. Die sitzen nie ganz gerade, lassen
   sich nicht einzeln färben und verschwinden im Ausdruck. Jetzt eine
   geprägte Scheibe mit echtem Pfad. */
.hk{
  flex-shrink:0;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(145deg,#F3DE9E,#C29C3E 52%,#8A6E28);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 2px 6px rgba(138,110,40,.34);
  color:#332508;
}
.hk svg{width:14px;height:14px;display:block}
.hk--gross{width:34px;height:34px}
.hk--gross svg{width:18px;height:18px}

/* Auf dunklem Grund darf der Haken heller stehen */
.az-buehne .hk{
  background:linear-gradient(145deg,#FBEFC6,#D9B65A 50%,#9C7B2C);
  box-shadow:0 0 0 1px rgba(233,199,102,.32), 0 3px 12px rgba(0,0,0,.45);
}

.az-gruende{list-style:none;padding:0;margin:0 0 34px;display:grid;gap:14px}
.az-gruende li{display:flex;gap:14px;align-items:flex-start;
  font-size:16.5px;line-height:1.5;color:#DCE4EF}

/* ── Handlungsaufrufe ───────────────────────────────────────────────── */
.btn-award{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border:none;border-radius:999px;cursor:pointer;
  font-size:16px;font-weight:700;letter-spacing:-.005em;text-decoration:none;
  color:#241A04;
  background:linear-gradient(135deg,#F3DE9E,#D9B65A 48%,#C29C3E);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 10px 26px rgba(138,110,40,.42);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-award:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 16px 34px rgba(138,110,40,.5)}
.btn-award svg{transition:transform var(--dur) var(--ease)}
.btn-award:hover svg{transform:translateX(3px)}
/* Auf hellem Grund braucht der Knopf eine Kante, sonst franst das Gold aus */
.btn-award--hell{box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
  0 0 0 1px rgba(138,110,40,.28), 0 10px 26px rgba(138,110,40,.24)}

.btn-geist{
  display:inline-flex;align-items:center;padding:16px 28px;
  border:1px solid rgba(233,199,102,.4);border-radius:999px;
  background:transparent;color:#E9C766;text-decoration:none;
  font-size:15px;font-weight:600;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-geist:hover{border-color:rgba(233,199,102,.85);
  background:rgba(233,199,102,.09);color:#F3DE9E}

.az-buehne .az-unter{color:#7D8CA3;margin-top:18px}

/* ── Urkunde auf der Bühne ──────────────────────────────────────────── */
.az-kopf-siegel{position:relative}
.az-schein{position:absolute;inset:-14% -10%;border-radius:50%;
  background:radial-gradient(circle,rgba(194,156,62,.30),transparent 66%);
  filter:blur(34px)}
.az-buehne .az-kopf-siegel img,
.az-buehne .az-kopf-siegel svg{
  position:relative;border-radius:12px;
  box-shadow:0 34px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(233,199,102,.16)}
.az-buehne .az-kopf-siegel figcaption{color:#7D8CA3;margin-top:20px}

/* Ein Auftritt beim Laden, gestaffelt. Mehr Bewegung braucht die Seite
   nicht — der Rest lebt von Typografie. */
@media (prefers-reduced-motion:no-preference){
  .az-buehne .az-oberzeile,
  .az-buehne h1,
  .az-buehne .az-hero-zeile,
  .az-buehne .az-gruende,
  .az-buehne .az-ctas,
  .az-buehne .az-kopf-siegel{
    animation:az-auf .62s cubic-bezier(.22,.68,.32,1) backwards}
  .az-buehne h1{animation-delay:.06s}
  .az-buehne .az-hero-zeile{animation-delay:.12s}
  .az-buehne .az-gruende{animation-delay:.18s}
  .az-buehne .az-ctas{animation-delay:.24s}
  .az-buehne .az-kopf-siegel{animation-delay:.1s}
}
@keyframes az-auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── Häkchenlisten in Spalten ───────────────────────────────────────── */
.az-vorteile,
.az-zielgruppen{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px 34px}
.az-vorteile li,
.az-zielgruppen li{display:flex;gap:13px;align-items:flex-start;
  font-size:15.5px;line-height:1.5;color:var(--ink)}
.az-zielgruppen li{font-size:15px}

@media (max-width:900px){
  .az-vorteile,.az-zielgruppen{grid-template-columns:repeat(2,1fr)}
  .az-buehne{padding:52px 0 64px}
}
@media (max-width:620px){
  .az-vorteile,.az-zielgruppen{grid-template-columns:1fr}
  .az-buehne .az-hero-zeile{font-size:17px}
  .az-ctas{flex-direction:column;align-items:stretch}
  .btn-award,.btn-geist{justify-content:center}
}

/* Wofür Sie den Award einsetzen — zwei Spalten, linksbündig. Die Liste
   ist kürzer als die Zielgruppen und wirkt in drei Spalten verloren. */
.az-einsatz-liste{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:16px 34px}
.az-einsatz-liste li{display:flex;gap:13px;align-items:flex-start;
  font-size:15.5px;line-height:1.5;color:var(--ink)}
@media (max-width:620px){
  .az-einsatz-liste{grid-template-columns:1fr}
}