/* 1Up Vocal Academy: eigener Pixel-Look für /academy und /academy/methode.
   Gilt nur mit <body class="oneup">, die übrige Seite nutzt site.css.
   Vorlage: Entwurf im Claude-Artifact „Academy-Seite“ / „Meine Methode“. */
@font-face{font-family:"Jersey 10";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/jersey-10-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}

.oneup{
  --bg:#f4f1e8;--weiss:#fff;--text:#0a0a0a;--gedaempft:#4b4b42;
  --gruen:#0cc20c;--link:#087b08;--gelb:#ffd400;--schwarz:#000;
  --pixel:"Jersey 10","Arial Narrow",sans-serif;
  --schatten-gruen:6px 6px 0 0 var(--gruen);--schatten-schwarz:6px 6px 0 0 var(--schwarz);
}
.oneup *,.oneup *::before,.oneup *::after{box-sizing:border-box}
html:has(body.oneup){-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.oneup{margin:0;background:var(--bg);color:var(--text);font-family:"Atkinson Hyperlegible",Arial,sans-serif;font-size:16px;line-height:1.5}
.oneup a{color:var(--link)}
.oneup a:hover{color:var(--text)}
.oneup a:focus-visible,.oneup button:focus-visible,.oneup summary:focus-visible{outline:4px solid var(--text);outline-offset:2px}
.oneup img.pixel{image-rendering:pixelated}
.oneup p{margin:0}
.oneup .skip{position:absolute;left:-9999px}
.oneup .skip:focus{left:16px;top:16px;z-index:200;background:var(--weiss);padding:8px 12px;border:4px solid var(--schwarz)}

/* Schriftgrößen: Jersey 10 ist bei Vielfachen von 18,67 px scharf */
.oneup .px-s{font-family:var(--pixel);font-weight:400;font-size:18.67px;line-height:1.1}
.oneup .px-m{font-family:var(--pixel);font-weight:400;font-size:37.33px;line-height:1.05}
.oneup .px-l{font-family:var(--pixel);font-weight:400;font-size:56px;line-height:1}
.oneup .px-xl{font-family:var(--pixel);font-weight:400;font-size:74.67px;line-height:.95}
.oneup .px-xxl{font-family:var(--pixel);font-weight:400;font-size:93.33px;line-height:.95}

.oneup .wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}

/* Kopfzeile */
.oneup header.oneup-kopf{background:var(--bg);border-bottom:4px solid var(--schwarz);position:relative;z-index:50}
.oneup .kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.oneup .kopf-logo{display:block;line-height:0}
.oneup .kopf-logo img{height:40px;width:auto;display:block}
.oneup .kopf-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.oneup .kopf-nav a{color:var(--text);text-decoration:none;padding:12px 0;font-family:var(--pixel);font-size:18.67px;line-height:1.1}
.oneup .kopf-nav a:hover{color:var(--link)}
.oneup .kopf-nav a[aria-current="page"],.oneup .kopf-nav a.aktiv{background:var(--gruen);border:2px solid var(--schwarz);padding:10px 8px;color:var(--schwarz)}
.oneup .nav-toggle{display:none}
@media (max-width:1060px){
  .oneup .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:var(--weiss);border:4px solid var(--schwarz);box-shadow:4px 4px 0 0 var(--schwarz);cursor:pointer}
  .oneup .burger{position:relative;width:22px;height:16px;display:block}
  .oneup .burger span{position:absolute;left:0;width:100%;height:4px;background:var(--schwarz)}
  .oneup .burger span:nth-child(1){top:0}.oneup .burger span:nth-child(2){top:6px}.oneup .burger span:nth-child(3){top:12px}
  .oneup.nav-open .burger span:nth-child(1){top:6px;transform:rotate(45deg)}
  .oneup.nav-open .burger span:nth-child(2){opacity:0}
  .oneup.nav-open .burger span:nth-child(3){top:6px;transform:rotate(-45deg)}
  .oneup .kopf-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:4px solid var(--schwarz);padding:8px 32px 24px}
  .oneup.nav-open .kopf-nav{display:flex}
  .oneup .kopf-nav a{padding:14px 0;border-bottom:2px solid rgb(0 0 0 / .12);font-size:37.33px;line-height:1.05}
  .oneup .kopf-nav a[aria-current="page"],.oneup .kopf-nav a.aktiv{padding:14px 8px;margin:4px 0}
}

/* Bausteine */
.oneup .btn{display:inline-block;font-family:var(--pixel);font-weight:400;font-size:18.67px;line-height:1.1;padding:12px 20px;background:var(--gruen);color:var(--schwarz);border:4px solid var(--schwarz);box-shadow:var(--schatten-schwarz);text-decoration:none;cursor:pointer}
.oneup .btn:hover{color:var(--schwarz);filter:brightness(1.05)}
.oneup .btn.weiss{background:var(--weiss);color:var(--text)}
.oneup .btn.schatten-gruen{box-shadow:var(--schatten-gruen)}
.oneup .btn:active{transform:translate(6px,6px);box-shadow:none}
.oneup .btn-reihe{display:flex;flex-wrap:wrap;gap:24px;padding-bottom:6px}
.oneup .marke{display:inline-block;background:var(--gelb);color:var(--schwarz);border:2px solid var(--schwarz);font-family:var(--pixel);font-size:18.67px;line-height:1.1;padding:4px 10px}
.oneup .balken{width:192px;height:16px;background:var(--gruen);border:4px solid var(--schwarz);margin-bottom:32px}
.oneup .kasten{background:var(--weiss);border:4px solid var(--schwarz);box-shadow:var(--schatten-gruen)}
.oneup .kasten.gruen{background:var(--gruen);color:var(--schwarz);box-shadow:var(--schatten-schwarz)}
.oneup .zitat{margin-top:40px;background:var(--gruen);color:var(--schwarz);border:4px solid var(--schwarz);box-shadow:var(--schatten-schwarz);padding:24px 32px;max-width:760px}

.oneup section.abschnitt{padding-top:64px;padding-bottom:64px}
.oneup section.abschnitt.erster{padding-top:96px;padding-bottom:32px}
.oneup h1,.oneup h2,.oneup h3{margin:0}
.oneup .abschnitt h2{margin-bottom:16px}
.oneup .fliesstext{display:flex;flex-direction:column;gap:20px;max-width:760px;font-size:20px;line-height:30px}
.oneup .liste{margin:0;padding-left:24px;font-size:18px;line-height:30px}
.oneup .liste.klein{font-size:16px;line-height:28px}
.oneup .reihe{display:flex;flex-wrap:wrap;gap:40px}
.oneup .reihe > *{flex:1 1 340px;min-width:0}

/* Hero: Pixel-Spielwelt als Hintergrund, Text in einem Kasten links */
.oneup .hero{position:relative;min-height:max(680px,min(56.25vw,1120px));background:#78acf5;overflow:hidden;border-bottom:4px solid var(--schwarz);display:flex;align-items:center}
.oneup .hero-bild{position:absolute;inset:0}
.oneup .hero-bild img{width:100%;height:100%;object-fit:cover;object-position:70% 70%;display:block}
.oneup .hero-innen{position:relative;width:100%;padding-top:64px;padding-bottom:64px}
.oneup .hero-kasten{background:#0f1a0f;border:4px solid var(--schwarz);box-shadow:8px 8px 0 0 var(--schwarz);padding:40px;max-width:600px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.oneup .hero-logo{display:block;height:120px;width:auto}
.oneup .hero h1{color:var(--weiss)}
.oneup .hero p{font-size:20px;line-height:30px;color:var(--weiss)}
.oneup .seitenkopf.mit-bild{position:relative;overflow:hidden;background:#78acf5;min-height:480px;display:flex;align-items:center}
.oneup .seitenkopf.mit-bild .wrap{width:100%}
.oneup .seitenkopf.mit-bild .hero-bild img{object-position:70% 80%}
.oneup .seitenkopf.mit-bild .wrap{position:relative}
.oneup .hero-kasten.gruen{background:var(--gruen);color:var(--schwarz);max-width:640px}
.oneup .hero-kasten.gruen h1{margin:0}

/* Angebotskarten */
.oneup .angebot-karte{padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.oneup .angebot-karte p{font-size:16px;line-height:24px}

/* Methode-Teaser */
.oneup .teaser{padding:40px;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.oneup .teaser > div{flex:1 1 420px;min-width:0}
.oneup .teaser h2{margin-bottom:12px}
.oneup .teaser p{font-size:20px;line-height:30px;max-width:640px}

/* Online */
.oneup .online{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.oneup .online > .fliesstext{flex:1 1 420px;min-width:0}
.oneup .online aside{flex:1 1 300px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:12px}

/* Preise */
.oneup .preise-intro{margin:0 0 48px;font-size:20px;line-height:30px;max-width:680px}
.oneup .preise > *{flex:1 1 260px}
.oneup .paket{padding:24px;display:flex;flex-direction:column;gap:16px}
.oneup .paket h3{margin-bottom:4px}
.oneup .paket .hinweis{font-size:14px;line-height:20px}
.oneup .paket-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px solid var(--schwarz);padding-top:12px}
.oneup .paket-zeile > span:first-child{font-size:16px;line-height:24px;font-weight:700}
.oneup .paket-zeile .preis{text-align:right}
.oneup .paket-zeile .pro{display:block;font-size:14px;line-height:20px}
.oneup .ust{margin-top:32px;font-size:14px;line-height:20px;color:var(--gedaempft)}

/* Ablauf */
.oneup .ablauf{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:40px}
.oneup .ablauf li{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.oneup .ablauf .nummer{color:var(--link)}
.oneup .ablauf p{font-size:16px;line-height:24px}

/* Lehrer */
.oneup .lehrer{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.oneup .lehrer-foto{flex:1 1 320px;min-width:0;max-width:520px;line-height:0}
.oneup .lehrer-foto img{width:100%;height:auto;display:block}
.oneup .lehrer-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.oneup .lehrer-text p{font-size:20px;line-height:30px}
.oneup .lehrer-text a{font-weight:700}

/* Anfrage */
.oneup .anfrage{background:var(--gruen);border-top:4px solid var(--schwarz);border-bottom:4px solid var(--schwarz);margin-top:64px}
.oneup .anfrage-innen{padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;gap:24px;align-items:flex-start;color:var(--schwarz)}
.oneup .anfrage p{font-size:20px;line-height:30px;max-width:640px}
.oneup .anfrage a:not(.btn){color:var(--schwarz)}

/* Methode-Seite */
.oneup .seitenkopf{background:var(--gruen);border-bottom:4px solid var(--schwarz)}
.oneup .seitenkopf .wrap{padding-top:72px;padding-bottom:72px;color:var(--schwarz)}
.oneup .seitenkopf a{color:var(--schwarz);font-size:16px}
.oneup .seitenkopf h1{margin:24px 0 16px}
.oneup .seitenkopf p{max-width:760px}
.oneup .klappen{margin-top:32px;max-width:900px}
.oneup details{background:var(--weiss);border:4px solid var(--schwarz);box-shadow:var(--schatten-gruen);margin-bottom:24px}
.oneup details > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px}
.oneup details > summary::-webkit-details-marker{display:none}
.oneup details .plus{font-size:56px;line-height:.6;transition:transform .1s}
.oneup details[open] .plus{transform:rotate(45deg)}
.oneup details .klappe-inhalt{border-top:4px solid var(--schwarz);padding:20px 24px 24px}
.oneup .nach-liste{margin-top:20px}

/* Fußzeile */
.oneup footer.oneup-fuss .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;font-size:14px;line-height:20px;color:var(--gedaempft)}
.oneup footer.oneup-fuss img{height:32px;width:auto;display:block}
.oneup footer.oneup-fuss nav{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Cookie-Banner im Pixel-Look (consent.js) */
.oneup .consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:100;max-width:44rem;margin-inline:auto;background:var(--weiss);color:var(--text);border:4px solid var(--schwarz);box-shadow:var(--schatten-gruen);padding:1.2rem 1.4rem;font-size:.95rem;line-height:1.55}
.oneup .consent p{margin:0 0 1rem}
.oneup .consent-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:flex-end}
.oneup .consent .btn{font-size:18.67px;padding:8px 16px;box-shadow:4px 4px 0 0 var(--schwarz)}
.oneup .consent .btn.secondary{background:var(--weiss)}

@media (max-width:700px){
  .oneup .wrap{padding-left:20px;padding-right:20px}
  .oneup .px-xl,.oneup .px-xxl{font-size:56px}
  .oneup .px-l{font-size:37.33px}
  .oneup .hero{min-height:0;display:block;background:#0f1a0f}
  .oneup .seitenkopf.mit-bild{min-height:0;display:block}
  .oneup .seitenkopf.mit-bild .hero-bild img{object-position:72% 100%}
  .oneup .hero-bild,.oneup .seitenkopf.mit-bild .hero-bild{position:static;display:block;border-bottom:4px solid var(--schwarz)}
  .oneup .hero-bild img{height:auto;aspect-ratio:16/10;object-position:72% 100%}
  .oneup .hero-innen,.oneup .seitenkopf.mit-bild .wrap{padding-top:0;padding-bottom:0;padding-left:0;padding-right:0}
  .oneup .hero-kasten{border:0;box-shadow:none;max-width:none;padding:32px 20px 40px}
  .oneup .hero-logo{height:88px}
  .oneup section.abschnitt{padding-top:48px;padding-bottom:48px}
  .oneup section.abschnitt.erster{padding-top:64px}
  .oneup .fliesstext,.oneup .teaser p,.oneup .preise-intro,.oneup .lehrer-text p,.oneup .anfrage p,.oneup .hero p{font-size:18px;line-height:28px}
  .oneup .teaser{padding:24px}
  .oneup .zitat{padding:20px}
  .oneup details > summary{padding:16px}
  .oneup details .klappe-inhalt{padding:16px}
  .oneup .kopf-nav{padding-left:20px;padding-right:20px}
}
@media (prefers-reduced-motion:reduce){html:has(body.oneup){scroll-behavior:auto}.oneup details .plus{transition:none}}

/* Tourneevorbereitung (Profi-Angebot) */
.oneup .tournee{padding:40px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.oneup .tournee h2{margin:0;max-width:900px}
.oneup .tournee .px-m{max-width:860px}
@media (max-width:700px){.oneup .tournee{padding:24px}.oneup .tournee h2{hyphens:auto;overflow-wrap:break-word}}

/* Testimonials */
.oneup .stimmen > *{flex:1 1 300px}
.oneup .stimme{margin:0;padding:24px 28px 28px;display:flex;flex-direction:column;gap:12px}
.oneup .stimme .anf{line-height:.6;color:var(--link);height:32px}
.oneup .stimme blockquote{margin:0}
.oneup .stimme blockquote p{font-size:18px;line-height:28px}
.oneup .stimme figcaption{margin-top:auto;padding-top:12px;border-top:2px solid var(--schwarz);font-size:14px;line-height:20px;color:var(--gedaempft)}
.oneup .stimme figcaption strong{color:var(--text);font-size:16px}