/* Funkbuch – Gästebuch im Look der Homepage */

:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212a; --line:#2a2f3a;
  --text:#e8eaf0; --muted:#9aa3b2; --accent:#ffb020; --accent2:#4fd1c5;
  --paper:#1b1f27; --ink:#e8eaf0; --err:#e5484d; --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f3ee; --panel:#ffffff; --panel2:#faf8f3; --line:#e2ddd2;
         --text:#1c1d21; --muted:#5d6472; --accent:#c26a00; --accent2:#0f7f76;
         --paper:#fffdf7; --ink:#2a2620; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Kopf */
.top{border-bottom:1px solid var(--line); background:var(--bg)}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.top .row{min-height:56px}
.logo{font-weight:700; color:var(--text)}
.skip{font-size:.9rem; color:var(--muted)}

/* Hero mit Skala */
.hero{padding:56px 0 36px; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:auto -10% -50% auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 65%); pointer-events:none}
.hero .wrap{position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--panel)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 25%,transparent)}
h1{font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.08; margin:16px 0 12px; letter-spacing:-.02em}
h1 em{font-style:normal; color:var(--accent)}
.lead{max-width:640px; color:var(--muted); font-size:1.08rem; margin:0 0 28px}

.dial{position:relative; max-width:640px; height:64px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; overflow:hidden}
.dial .scale{position:absolute; inset:12px 14px 22px;
  background:
    repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 24px) bottom/100% 10px no-repeat,
    repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 120px) bottom/100% 22px no-repeat;
  opacity:.55}
.dial .needle{position:absolute; top:6px; bottom:6px; left:calc(14px + (100% - 28px) * var(--pos) / 100);
  width:2px; background:var(--accent); box-shadow:0 0 12px var(--accent); border-radius:2px;
  animation:tune 1.4s cubic-bezier(.2,.8,.2,1) both}
.dial .nums{position:absolute; left:14px; right:14px; bottom:3px; display:flex; justify-content:space-between;
  font:.68rem/1 ui-monospace,Menlo,Consolas,monospace; color:var(--muted)}
@keyframes tune{from{left:14px}}
.tuned{margin:10px 0 0; font-size:.92rem; color:var(--muted)}
.tuned b{color:var(--accent)}

/* Überschriften */
h2{font-size:1.5rem; margin:0 0 14px; letter-spacing:-.01em}
h2 small{font-size:.8rem; color:var(--muted); font-weight:500; border:1px solid var(--line); border-radius:999px; padding:1px 9px; margin-left:6px; vertical-align:middle}
main{padding-bottom:40px}
main > section{padding:40px 0 8px}

/* Formular */
.send form,
.send > form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.send label{display:block; font-size:.92rem; color:var(--muted); margin-bottom:14px}
.send label small{font-weight:400}
input[type=text],input[type=password],textarea{
  display:block; width:100%; margin-top:5px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); font:inherit}
textarea{resize:vertical; min-height:120px}
input:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent2) 60%,transparent); outline-offset:1px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.formfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.formfoot small{color:var(--muted)}
.hint{font-size:.82rem; color:var(--muted); margin:14px 0 0}

.btn{display:inline-block; padding:10px 20px; border-radius:10px; font:600 .95rem/1.2 inherit; font-family:inherit;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer}
.btn:hover{border-color:var(--accent2); text-decoration:none}
.btn.primary{background:var(--accent); color:var(--on-accent,#1a1200); border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6; cursor:wait}
.btn.small{padding:6px 12px; font-size:.85rem}
.btn.danger{color:var(--err)}

/* Empfangsstärke wählen */
fieldset.rapport{border:0; padding:0; margin:0 0 16px}
.rapport legend{font-size:.92rem; color:var(--muted); padding:0; margin-bottom:6px}
.stars{display:inline-flex; flex-direction:row-reverse; gap:6px; align-items:flex-end; height:44px}
.stars input{position:absolute; opacity:0; pointer-events:none}
.stars label{display:block; width:20px; margin:0; cursor:pointer; border-radius:4px;
  height:calc(10px + var(--i) * 7px); background:var(--line); transition:background .12s, transform .12s}
.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label{background:var(--accent2)}
.stars label:hover{transform:translateY(-2px)}
.stars input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}
.rtext{margin:6px 0 0; min-height:1.5em; font-size:.88rem; color:var(--accent)}
.rtext span{display:none}
.rapport:has(#r1:checked) .t1,
.rapport:has(#r2:checked) .t2,
.rapport:has(#r3:checked) .t3,
.rapport:has(#r4:checked) .t4,
.rapport:has(#r5:checked) .t5{display:inline}

/* Hinweise */
.note{padding:12px 16px; border-radius:10px; margin-bottom:14px; border:1px solid var(--line); border-left:4px solid var(--accent2); background:var(--panel)}
.note.err{border-left-color:var(--err)}

/* QSL-Karten */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px; padding:6px 0 10px}
.qsl{position:relative; display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-left:6px solid hsl(var(--h) 65% 55%); border-radius:6px;
  padding:16px 18px 14px; box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .18s}
.qsl:nth-child(odd){transform:rotate(-.7deg)}
.qsl:nth-child(even){transform:rotate(.6deg)}
.qsl:hover{transform:rotate(0) translateY(-3px)}
.qsl::after{content:""; position:absolute; inset:5px; border:1px dashed color-mix(in srgb,var(--ink) 18%,transparent); border-radius:3px; pointer-events:none}
.qsl-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-height:84px}
.qsl-tag{font:700 .66rem/1.3 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase;
  color:hsl(var(--h) 55% 45%); max-width:11em}
@media (prefers-color-scheme: dark){.qsl-tag{color:hsl(var(--h) 70% 68%)}}
.mail{position:relative; width:104px; height:84px; flex:none}
.stamp{position:absolute; right:0; top:0; width:62px; padding:8px 4px 6px; text-align:center;
  background:hsl(var(--h) 60% 52%); color:#fff; border-radius:3px;
  outline:3px dotted var(--paper); outline-offset:-3px; box-shadow:0 0 0 2px hsl(var(--h) 60% 52%);
  font-family:ui-monospace,Menlo,Consolas,monospace; line-height:1.1}
.stamp b{display:block; font-size:1.05rem}
.stamp small{font-size:.62rem; letter-spacing:.12em; opacity:.9}
.postmark{position:absolute; left:0; top:14px; width:70px; height:70px; border-radius:50%; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:2px solid color-mix(in srgb,var(--ink) 55%,transparent); color:color-mix(in srgb,var(--ink) 65%,transparent);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb,var(--ink) 40%,transparent);
  transform:rotate(-14deg); font:700 .58rem/1.15 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em}
.postmark b{font-size:1.15rem; line-height:1}
.qsl-msg{margin:6px 0 16px; flex:1; font:1.02rem/1.6 ui-serif,Georgia,Cambria,"Times New Roman",serif; overflow-wrap:anywhere}
.qsl-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent); padding-top:10px; font-size:.9rem}
.qsl-foot strong{display:block}
.from{display:block; color:color-mix(in srgb,var(--ink) 65%,transparent); font-size:.85rem}
.rep{text-align:right}
.rep small{display:block; font-size:.74rem; color:color-mix(in srgb,var(--ink) 65%,transparent)}
.bars{display:inline-flex; gap:3px; align-items:flex-end; height:22px}
.bars i{display:block; width:6px; height:calc(5px + var(--i) * 3.4px); border-radius:2px; background:color-mix(in srgb,var(--ink) 20%,transparent)}
.bars i.on{background:hsl(var(--h) 60% 48%)}
@media (prefers-color-scheme: dark){.bars i.on{background:hsl(var(--h) 70% 62%)}}

.empty{color:var(--muted); padding:20px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius)}

/* Seiten */
.pager{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:22px 0 4px}
.pager a,.pager span{display:inline-block; min-width:36px; text-align:center; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.pager span{border-color:var(--accent); color:var(--accent)}

/* Verwaltung */
.admin{padding-top:30px}
.admin h1{font-size:2rem; margin:0 0 18px}
.adm-item{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:14px}
.adm-item.pending{border-left:4px solid var(--accent)}
.adm-meta{font-size:.88rem; color:var(--muted)}
.adm-meta strong{color:var(--text)}
.adm-item p{margin:8px 0 12px; overflow-wrap:anywhere}
.adm-btns{display:flex; gap:8px; margin:0}

/* Fuß */
.foot{border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:.92rem}
.foot a{color:var(--muted)} .foot a:hover{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  .dial .needle{animation:none}
  .qsl,.stars label{transition:none}
}

/* Einbettung im Joomla-Template (?embed=1) */
.embed .top,
.embed .foot,
.embed h1,
.embed .eyebrow{display:none}
.embed .wrap{max-width:none; padding:0}
.embed .hero{padding:4px 0 20px; border-bottom:0}
.embed .hero::before{display:none}
.embed .lead{margin-bottom:20px}
.embed main > section:first-child{padding-top:24px}