/* ============================================================
   FIRIZ · assets/firiz-pages.css · Inhaltsseiten (Über uns,
   Impressum, Datenschutz) im Design der Startseite v0.4.0
   Version: 0.1.2 · 2026-09-23 (Handy: lange Überschriften und Links brechen um) · 0.1.1 · 2026-09-22 (Menü einzeilig mit 6 Punkten) · 0.1.0: baut auf firiz-app.css auf
   ============================================================ */
body{font-size:17px;line-height:1.7}
/* Navigation wie Startseite */
.snav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(6,10,20,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,178,90,.14)}
.snav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px;position:relative}
.snav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.snav ul a{font-family:var(--caps);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--silver)}
.snav ul a:hover,.snav ul a[aria-current=page]{color:var(--champ)}
.snav .right{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:1px solid rgba(226,178,90,.4);border-radius:10px;width:42px;height:42px;place-items:center;color:var(--text);cursor:pointer}
.burger svg{width:22px;height:22px}

/* Seitenkopf */
.page-head{padding-block:clamp(40px,7vw,80px) clamp(20px,3vw,34px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.page-head h1{font-size:clamp(1.9rem,4.6vw,3rem);max-width:22ch}
.page-head .lead{max-width:60ch;margin:14px 0 0;font-size:1.05rem}
.page-head .crest{width:clamp(90px,12vw,140px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(226,178,90,.22))}

/* Fließtext */
.prose{max-width:760px}
.prose h2{font-family:var(--caps);font-weight:400;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--neon);margin:2.4em 0 .7em;padding-top:1.2em;border-top:1px solid rgba(79,179,255,.16);scroll-margin-top:90px}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
/* 0.1.2 · Handy: lange Überschriften/Links brechen um statt die Seite zu verbreitern */
.prose h2,.prose h3{overflow-wrap:anywhere;letter-spacing:.14em}
.prose a,.prose code,.prose li,.prose p{overflow-wrap:anywhere}
@media (max-width:420px){.prose h2{letter-spacing:.1em;font-size:.94rem}}
.prose h3{font-family:var(--caps);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;color:var(--champ);margin:0 0 .5em}
.prose p,.prose li{color:var(--silver)}
.prose strong{color:var(--text);font-weight:600}
.prose ul{padding-left:0;list-style:none;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:1.5em}
.prose ul li::before{content:"♡";position:absolute;left:0;color:var(--gold)}
.prose a{color:var(--neon)}
.card.prose-card{max-width:860px;padding:clamp(22px,4vw,44px)}
/* Platzhalter (noch zu füllen) */
.ph{color:#1a1206;background:var(--gold-grad);padding:.05em .45em;border-radius:6px;font-weight:600;font-size:.92em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Über uns */
.about-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(24px,4vw,48px);align-items:center;margin-bottom:34px}
.about-photo{position:relative;border-radius:180px 180px 22px 22px;padding:5px;background:linear-gradient(160deg,var(--champ),var(--amber) 35%,rgba(79,179,255,.9) 75%,var(--gold));box-shadow:0 0 44px rgba(79,179,255,.22),0 26px 50px rgba(0,0,0,.55)}
.about-photo img{width:100%;aspect-ratio:432/560;object-fit:cover;object-position:center 12%;border-radius:175px 175px 18px 18px}
.about-photo .onair{position:absolute;left:-12px;top:38%;font-family:var(--caps);font-weight:600;letter-spacing:.14em;font-size:.9rem;padding:.5em .8em .4em;border:2px solid var(--neon);border-radius:8px;color:#EAF6FF;background:rgba(6,10,20,.85);text-shadow:0 0 10px var(--neon);box-shadow:0 0 20px var(--neon-soft)}
.box{margin-top:34px;padding:28px;border-radius:18px;border:1px solid rgba(226,178,90,.45);background:radial-gradient(80% 140% at 100% 0%,rgba(79,179,255,.18),transparent 60%),linear-gradient(180deg,#0E1F3E,#08101F)}
.box p{margin:.3em 0}

/* Footer wie Startseite */
.sfoot{padding-block:56px 36px;border-top:1px solid rgba(226,178,90,.16);text-align:center;margin-top:60px}
.sfoot .bye{font-family:var(--script);font-size:clamp(1.9rem,4vw,2.6rem);color:var(--neon);text-shadow:0 0 16px rgba(79,179,255,.5);margin:0}
.sfoot .tags{font-family:var(--caps);text-transform:uppercase;margin:18px 0 22px;font-size:.7rem;color:var(--muted);letter-spacing:.32em}
.sfoot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;font-size:.88rem}
.sfoot nav a{color:var(--silver);text-decoration:none}
.sfoot nav a:hover{color:var(--champ)}
.sfoot small{display:block;margin-top:18px;color:var(--dim)}
.sfoot .ver{display:block;margin-top:6px;color:#56617A;font-size:.75rem}

@media (max-width:820px){
  .burger{display:grid}
  .snav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 16px 16px;background:rgba(6,10,20,.96);border-bottom:1px solid rgba(226,178,90,.2)}
  .snav ul.open{display:flex}
  .snav ul a{display:block;padding:14px 4px;border-bottom:1px solid rgba(79,179,255,.12)}
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:320px;margin-inline:auto}
  .page-head{grid-template-columns:1fr}
  .page-head .crest{display:none}
}
@media (max-width:560px){.snav .right .btn{display:none}}
.prose a.btn-gold{color:#1a1206;text-decoration:none}
@media (max-width:820px){.about-photo{max-width:260px}}

/* 0.1.1 · Menü mit 6 Punkten bleibt einzeilig */
.snav ul a{white-space:nowrap}
@media (min-width:821px) and (max-width:1240px){.snav ul{gap:16px}.snav ul a{letter-spacing:.12em;font-size:.72rem}}