/* Laura Violetta Lex – Unterrichts-Prototyp V1
   Gleiche Tokens wie theme/laura-lex main.css :root. Kein Build-Step. */
:root{
  --espresso:#2C2A1E; --olive-petal:#A3A380; --deep-blossom:#8C4A55;
  --deep-blossom-h:#723C46; --arctic-daisy:#EFEBCE; --petal-white:#FBF9EF;
  --golden-clover:#D7CE93; --rose-blush:#D8A48F; --peach-blossom:#B88588;
  --gold:#C9A24B; --ink-soft:#5b5742; --olive-text:#67664f; --olive-deep:#5E5E40;
  --f-display:'Fraunces',Georgia,serif; --f-script:'Great Vibes',cursive;
  --f-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --gutter:clamp(1.2rem,4vw,2rem); --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--arctic-daisy)}
body{font-family:var(--f-body);background:var(--arctic-daisy);color:var(--espresso);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:inline-block;font-weight:500;text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;color:var(--olive-text);margin-bottom:.6rem}
.headline-lg{font-family:var(--f-display);font-weight:600;font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.08;letter-spacing:-.015em}
.headline-md{font-family:var(--f-display);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.2}
.script-accent{font-family:var(--f-script);font-weight:400;line-height:1}
.btn{display:inline-block;font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;padding:.85rem 1.9rem;border-radius:9999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;text-align:center;transition:background .25s}
.btn--primary{background:var(--deep-blossom);color:var(--arctic-daisy)}
.btn--primary:hover{background:var(--deep-blossom-h)}
.btn--ghost{background:transparent;border-color:var(--olive-petal);color:var(--espresso)}
.btn--ghost:hover{border-color:var(--deep-blossom);color:var(--deep-blossom)}
.btn--small{padding:.5rem 1.1rem;font-size:.75rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* Abmelden — floating solo CTA top-right over the hero (hero goes full to the top) */
.topbar{position:fixed;top:1rem;right:var(--gutter);z-index:60;display:flex;justify-content:flex-end;pointer-events:none}
.topbar .btn{pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
/* Hero band */
.band{position:relative;text-align:center;color:#fff;background:#1c1a14 center/cover no-repeat url(assets/unterricht-parallax.webp);padding:clamp(3rem,8vw,5.5rem) var(--gutter) clamp(2.5rem,6vw,4rem);overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,12,.6),rgba(20,18,12,.72))}
.band__inner{position:relative;z-index:2;max-width:820px;margin:0 auto;display:flex;align-items:center;gap:clamp(1.2rem,4vw,2.5rem);text-align:left}
.band__photo{flex:0 0 auto;width:clamp(120px,22vw,190px);height:clamp(120px,22vw,190px);object-fit:cover;object-position:top;border-radius:50%;border:4px solid var(--petal-white);outline:2px solid var(--golden-clover);box-shadow:0 14px 44px rgba(0,0,0,.55)}
.band__text{margin:0 auto}
.welcome{display:flex;gap:1rem;align-items:center}
.welcome__photo{flex:0 0 auto;width:64px;height:64px;object-fit:cover;object-position:top;border-radius:50%;border:3px solid var(--petal-white);outline:2px solid var(--golden-clover);box-shadow:0 6px 18px rgba(44,42,30,.25)}
.welcome h2{margin-bottom:.15rem}
.welcome p{margin:0}
.band .script-accent{font-size:clamp(2.2rem,6vw,3.8rem);text-shadow:0 4px 20px rgba(0,0,0,.85)}
.band h1{font-family:var(--f-display);font-size:clamp(1.7rem,4.5vw,2.7rem);margin:.4rem 0 .7rem;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.band p{color:rgba(255,255,255,.92);font-size:1rem}
/* Tiled section */
.tiled{background:url(assets/testimonials-tile.webp) center/480px repeat, var(--arctic-daisy);padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,4.5rem);position:relative}
.card{background:var(--petal-white);border-radius:20px;padding:clamp(1.2rem,3.5vw,2rem);box-shadow:0 14px 40px rgba(44,42,30,.12);border:1px solid rgba(44,42,30,.07);margin-bottom:1.2rem;position:relative;overflow:hidden}
.booking-entry{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin:1.3rem 0;padding:1rem 1.15rem;border:1px solid rgba(44,42,30,.12);border-radius:14px;background:rgba(239,235,206,.48)}
.booking-entry .eyebrow{margin-bottom:.25rem}
.booking-entry p{margin:0}
.booking-entry .btn{flex:0 0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
label.f{display:block;font-size:.85rem;font-weight:500;margin:.9rem 0 .3rem}
input[type=text],input[type=time],input[type=date],input[type=file],select,textarea{width:100%;font:inherit;padding:.65rem .8rem;border-radius:12px;border:1.5px solid rgba(44,42,30,.2);background:#fff;color:var(--espresso)}
textarea{min-height:84px;resize:vertical}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row--end{justify-content:flex-end;margin-top:1rem}
.muted{color:var(--ink-soft);font-size:.9rem}
.small{font-size:.82rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem}
.tab{background:var(--petal-white);border:1.5px solid rgba(44,42,30,.15);box-shadow:0 4px 14px rgba(44,42,30,.08);color:var(--espresso);border-radius:9999px;padding:.5rem 1.2rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tab:hover{background:var(--deep-blossom);border-color:var(--deep-blossom);color:var(--arctic-daisy)}
.tab.is-on{background:var(--espresso);color:var(--petal-white);border-color:var(--espresso)}
table.list{width:100%;border-collapse:collapse;font-size:.92rem}
table.list th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--olive-text);padding:.5rem;border-bottom:2px solid var(--golden-clover)}
table.list td{padding:.55rem .5rem;border-bottom:1px solid rgba(44,42,30,.1);vertical-align:top}
.pill{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .7rem;border-radius:9999px;background:var(--golden-clover);color:var(--espresso)}
.pill--rose{background:var(--rose-blush)}
.pill--ok{background:#cfe3c0}
.pill--open{background:#f3dfae}
.screen{display:none}
.screen.is-on{display:block}
.login-users{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin-top:1rem}
.userbtn{background:var(--petal-white);border:1.5px solid rgba(44,42,30,.15);border-radius:16px;padding:1rem;cursor:pointer;text-align:left}
.userbtn:hover{border-color:var(--deep-blossom)}
.userbtn strong{font-family:var(--f-display);display:block;font-size:1.05rem}
footer.site{padding:2rem var(--gutter);text-align:center;color:var(--olive-text);font-size:.82rem}
.msg{border-left:4px solid var(--golden-clover);background:#fff;border-radius:0 12px 12px 0;padding:.7rem 1rem;margin:.6rem 0}
.msg--all{border-color:var(--deep-blossom)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.3rem .8rem;font-size:.92rem;margin:.6rem 0}
@media(max-width:560px){.kv{grid-template-columns:1fr}}
/* ── Mobile (Schüler kommen meist per Handy) ── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.3rem;padding:0 .3rem}
table.list{min-width:560px}
@media(min-width:1024px){
  .band{padding:6.5rem var(--gutter) 5.5rem}
  .band__photo{width:220px;height:220px}
  .band h1{font-size:3rem}
}
@media(max-width:640px){
  .topbar{top:.7rem}
  .band{padding:2.2rem var(--gutter) 2rem}
  .band__inner{flex-direction:column;text-align:center;gap:1rem}
  .band__photo{width:128px;height:128px}
  .band h1{font-size:1.65rem}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.4rem;margin:0 -.3rem 1rem;padding-left:.3rem;padding-right:.3rem}
  .tab{flex:0 0 auto;min-height:44px}
  .btn{min-height:44px}
  .btn--small{min-height:40px}
  .card{border-radius:16px}
  .welcome{flex-direction:row}
  .welcome__photo{width:52px;height:52px}
  .booking-entry{align-items:stretch;flex-direction:column;gap:.85rem}
  .booking-entry .btn{width:100%}
}