:root{--brand:#c40068;--brand-dark:#94004f;--ink:#202027;--muted:#6d6870;--paper:#fff;--bg:#f7f4f6;--line:#e5dfe3;--ok:#187442;--danger:#a92727}
*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#faf8f9,#f3eff2);color:var(--ink);margin:0;min-height:100vh}
main{max-width:1180px;margin:32px auto;background:#fff;padding:30px 34px;border-radius:16px;box-shadow:0 8px 30px #3b17300d;border:1px solid #eee7eb}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.brandbar img{display:block;width:min(330px,48vw);height:auto}.brandbar .om{width:58px;height:58px;object-fit:cover;border-radius:50%;opacity:.88}
h1{font-size:34px;margin:0 0 7px}h2{font-size:25px;margin-top:28px}h3{margin-bottom:8px}.muted{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}.full{grid-column:1/-1}label{font-weight:700;display:block;margin:8px 0 6px}
input,select{width:100%;padding:11px 12px;border:1px solid #cfc6cc;border-radius:8px;font-size:16px;background:#fff}input:focus,select:focus{outline:2px solid #f2b6d5;border-color:var(--brand)}
button,.btn{background:#252329;color:#fff;border:0;border-radius:8px;padding:11px 15px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.green{background:var(--ok)}.red{background:var(--danger)}.secondary{background:#777177}
.notice{padding:13px 15px;border-radius:8px;margin:14px 0}.ok{background:#e5f5eb}.err{background:#fde7e7;color:#8e1515}
table{border-collapse:separate;border-spacing:0;width:100%;margin-top:15px;border:1px solid var(--line);border-radius:9px;overflow:hidden}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}tr:last-child td{border-bottom:0}th{background:#f5f1f3}tbody tr:hover{background:#fffafd}
.actions{display:flex;gap:7px;flex-wrap:wrap}.top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.top>.actions{justify-content:flex-end}
.badge{padding:4px 9px;border-radius:999px;background:#eee;font-size:12px;font-weight:700;white-space:nowrap}.pending{background:#fff0c7}.approved{background:#dceeff}.sent,.printed{background:#dff2e3}
.hero{background:linear-gradient(135deg,#fff3f9,#fff);border:1px solid #f0d9e5;border-radius:14px;padding:22px;margin-bottom:22px}.hero h1{color:var(--brand-dark)}.formcard{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff}.navbtn{background:var(--brand)}
dialog{border:0;border-radius:12px;box-shadow:0 15px 60px #0004;padding:24px}
@media(max-width:760px){main{margin:0;padding:20px 16px;border-radius:0;border:0}.grid{grid-template-columns:1fr}.full{grid-column:auto}.top{flex-direction:column}.top>.actions{justify-content:flex-start}.brandbar{gap:12px}.brandbar img{width:min(270px,72vw)}.brandbar .om{display:none}h1{font-size:29px}.scroll{overflow:auto}table{font-size:13px}th,td{padding:8px}.btn,button{padding:10px 12px}}

/* Mobile-Optimierung */
@media(max-width:760px){
 body{background:#fff}
 main{width:100%;max-width:none;min-height:100vh}
 .brandbar{padding-bottom:14px;margin-bottom:18px}
 .brandbar img{width:min(245px,78vw)}
 .hero{padding:18px 16px;margin-bottom:16px}
 .hero h1{font-size:26px;line-height:1.15}
 .hero p{font-size:16px;line-height:1.45;margin-bottom:0}
 .formcard{padding:16px;border-radius:10px}
 label{font-size:15px;margin-top:12px}
 input,select{font-size:16px;min-height:48px;padding:11px 12px}
 input[type=checkbox]{min-height:auto}
 form button{width:100%;min-height:48px;font-size:16px}
 .top .actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .top .actions .btn{text-align:center}
 .scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 table{min-width:760px}
 .actions button,.actions .btn{min-height:42px}
 dialog{width:calc(100% - 28px);max-width:520px}
}
@media(max-width:430px){
 .top .actions{grid-template-columns:1fr}
 .top .actions .btn{width:100%}
}

/* Admin-Tabellen auf Smartphones als Karten statt horizontaler Tabellen */
@media (max-width:760px){
  .scroll{overflow:visible!important}
  .scroll table{min-width:0!important;width:100%!important;border:0}
  .scroll table thead{
    position:absolute!important;
    width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important
  }
  .scroll table tbody,.scroll table tr,.scroll table td{
    display:block!important;width:100%!important;box-sizing:border-box
  }
  .scroll table tr{
    background:#fff;
    border:1px solid #ead8e1;
    border-radius:14px;
    padding:10px 14px;
    margin:0 0 14px;
    box-shadow:0 2px 10px rgba(0,0,0,.05)
  }
  .scroll table td{
    border:0!important;
    border-bottom:1px solid #f1e6eb!important;
    padding:8px 0!important;
    min-height:34px
  }
  .scroll table td:last-child{border-bottom:0!important}
  .scroll table td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#7b6871;
    margin-bottom:3px
  }
  .scroll table td[data-label="Name"]{
    font-size:17px;font-weight:700;color:#262126
  }
  .scroll table td[data-label="Name"]::before{display:none}
  .scroll table td .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%
  }
  .scroll table td .actions .btn,
  .scroll table td .actions button{
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important
  }
}

/* ROBUSTER MOBILE-FIX: Admin-Tabellen wirklich als Karten */
@media screen and (max-width: 800px) {
  main { overflow-x:hidden !important; }
  .scroll { overflow:visible !important; width:100% !important; }
  .scroll > table {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
  }
  .scroll > table > thead { display:none !important; }
  .scroll > table > tbody { display:block !important; width:100% !important; }
  .scroll > table > tbody > tr {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 16px !important;
    padding:12px 14px !important;
    border:1px solid #ead8e1 !important;
    border-radius:14px !important;
    background:var(--card,#fff) !important;
    box-sizing:border-box !important;
  }
  .scroll > table > tbody > tr > td {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    padding:8px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(128,128,128,.18) !important;
  }
  .scroll > table > tbody > tr > td:last-child { border-bottom:0 !important; }
  .scroll > table > tbody > tr > td::before {
    content:attr(data-label) !important;
    display:block !important;
    margin-bottom:3px !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    opacity:.65 !important;
  }
  .scroll > table > tbody > tr > td .actions {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    width:100% !important;
  }
  .scroll > table > tbody > tr > td .actions > * {
    width:100% !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
}

/* Yoga 4 Soul Admin-Banner */
.admin-hero{
  width:100%;
  margin:0 0 22px;
  overflow:hidden;
  border-radius:20px;
  background:#fff7f8;
  box-shadow:0 8px 28px rgba(92,45,67,.08);
}
.admin-hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:300px;
  object-fit:cover;
  object-position:center;
}
@media (max-width:800px){
  .admin-hero{
    margin-bottom:18px;
    border-radius:14px;
  }
  .admin-hero img{
    max-height:190px;
    object-fit:cover;
    object-position:center;
  }
}

/* Öffentliche KK-Anforderung – responsive Yoga-4-Soul-Optik */
.public-request-page{
  margin:0;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,222,229,.58), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(246,226,203,.42), transparent 24rem),
    #fffaf8;
}
.public-request-page .wrap,
.public-request-page .container{
  max-width:920px;
  margin:28px auto 48px;
  padding:0 18px;
}
.public-request-page .public-hero{
  overflow:hidden;
  border-radius:24px 24px 0 0;
  background:#fff3f3;
  box-shadow:0 16px 45px rgba(105,46,68,.10);
}
.public-request-page .public-hero img{
  display:block;
  width:100%;
  height:310px;
  object-fit:cover;
  object-position:center;
}
.public-request-page .hero,
.public-request-page .intro,
.public-request-page .card:first-of-type{
  border-color:#f4d8e3;
}
.public-request-page h1{
  color:#ad005d;
}
.public-request-page .public-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:700px;
  margin:22px auto 26px;
  text-align:center;
}
.public-request-page .public-benefits div{
  color:#18243a;
  font-size:15px;
  line-height:1.35;
}
.public-request-page .public-benefits span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin:0 auto 8px;
  border-radius:50%;
  background:#fde6ed;
  color:#b40060;
  font-size:25px;
}
.public-request-page form,
.public-request-page .card{
  border-radius:20px;
}
.public-request-page input,
.public-request-page select{
  min-height:54px;
  border-radius:12px;
}
.public-request-page button[type="submit"],
.public-request-page input[type="submit"]{
  min-height:56px;
  border-radius:16px;
  font-weight:700;
}
@media (max-width:800px){
  .public-request-page .wrap,
  .public-request-page .container{
    margin:0 auto 28px;
    padding:0 10px;
  }
  .public-request-page .public-hero{
    margin:0 -10px;
    border-radius:0 0 18px 18px;
  }
  .public-request-page .public-hero img{
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  .public-request-page h1{
    font-size:27px;
    line-height:1.12;
  }
  .public-request-page .public-benefits{
    gap:6px;
    margin:18px 0 22px;
  }
  .public-request-page .public-benefits div{
    font-size:12px;
  }
  .public-request-page .public-benefits span{
    width:46px;
    height:46px;
    font-size:21px;
  }
  .public-request-page form{
    display:block !important;
  }
  .public-request-page form > *,
  .public-request-page .grid > *,
  .public-request-page .row > *{
    width:100% !important;
    max-width:100% !important;
  }
  .public-request-page input,
  .public-request-page select,
  .public-request-page textarea,
  .public-request-page button{
    width:100%;
    box-sizing:border-box;
    font-size:16px;
  }
}

/* Mobile Fix 2 – light-only + saubere Überschrift */
html:has(body.public-request-page),
body.public-request-page{
  color-scheme:only light !important;
  forced-color-adjust:none !important;
}
body.public-request-page,
body.public-request-page .wrap,
body.public-request-page .container{
  background:#fff9f7 !important;
  color:#1c2636 !important;
}
body.public-request-page .hero,
body.public-request-page .intro,
body.public-request-page .card,
body.public-request-page form{
  background:#fffdfc !important;
  color:#1c2636 !important;
}
body.public-request-page h1{
  color:#ad005d !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
body.public-request-page p,
body.public-request-page label,
body.public-request-page strong{
  color:#1c2636 !important;
}
body.public-request-page input,
body.public-request-page select,
body.public-request-page textarea{
  background:#fff !important;
  color:#1c2636 !important;
  -webkit-text-fill-color:#1c2636 !important;
  border-color:#e5d7dc !important;
}
@media (max-width:800px){
  body.public-request-page h1{
    font-size:27px !important;
    line-height:1.08 !important;
    white-space:normal !important;
    margin:0 0 10px !important;
  }
  body.public-request-page .hero,
  body.public-request-page .intro{
    padding:18px 18px !important;
    margin-bottom:10px !important;
    background:#fffdfc !important;
  }
  body.public-request-page .hero p,
  body.public-request-page .intro p{
    font-size:15px !important;
    line-height:1.42 !important;
  }
  body.public-request-page .public-benefits{
    margin:10px 0 16px !important;
  }
}

/* Mobile Feinschliff 3 – mehr Luft, ohne die Seite unnötig lang zu machen */
@media (max-width:800px){
  body.public-request-page .wrap,
  body.public-request-page .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.public-request-page .hero,
  body.public-request-page .intro{
    padding:24px 22px !important;
    margin:14px 0 18px !important;
    border-radius:20px !important;
  }

  body.public-request-page h1{
    font-size:28px !important;
    line-height:1.15 !important;
    margin:0 0 16px !important;
    letter-spacing:-0.2px;
  }

  body.public-request-page .hero p,
  body.public-request-page .intro p{
    font-size:16px !important;
    line-height:1.55 !important;
    margin:0 !important;
  }

  body.public-request-page .public-benefits{
    margin:18px 4px 24px !important;
    gap:10px !important;
  }

  body.public-request-page form,
  body.public-request-page .card{
    padding:24px 20px !important;
    border-radius:20px !important;
  }

  body.public-request-page form > div,
  body.public-request-page .field{
    margin-bottom:18px;
  }

  body.public-request-page label{
    display:block;
    margin-bottom:8px !important;
    line-height:1.3 !important;
  }

  body.public-request-page input,
  body.public-request-page select,
  body.public-request-page textarea{
    min-height:54px !important;
    padding:12px 14px !important;
  }
}