*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#242626;color:#171a1c;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.page{max-width:1600px;margin:auto;background:#f4f4f1}.mast{position:relative;background:#303232;color:#fff;overflow:hidden}.mast:before{content:"";position:absolute;inset:0;background:#404040 url('assets/header-background-original.png') center top/cover no-repeat;filter:grayscale(1) brightness(.78)}.nav,.hero{position:relative}.nav{height:100px;padding:0 7.75%;display:flex;align-items:center;justify-content:space-between}.logo{width:245px;filter:brightness(0) invert(1)}.back{font-size:15px;color:#fff;display:flex;align-items:center;gap:12px}.back span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #fff;border-radius:50%;font-size:20px}.hero{padding:43px 7.75% 52px}.kicker{font-size:19px}.line{width:44px;height:4px;background:#e7b800;margin-top:13px}.hero h1{font-size:54px;line-height:1.03;margin:25px 0 12px;letter-spacing:-.035em}.hero p{font-size:20px;line-height:1.4;margin:0;color:#eee}.body{padding:58px 7.75% 65px}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;border-bottom:1px solid #d6d6d2;padding-bottom:19px}.tab{border:0;cursor:pointer;padding:16px 8px;text-align:center;background:#e6e6e3;color:#303235;font-size:15px;border-radius:3px}.tab.active{background:#252727;color:#fff;box-shadow:inset 0 -7px #ebbd00}.content{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:75px;padding:46px 0 0}.content h2.tag{color:#e1b400;font-size:24px;font-weight:bold;margin:0 0 10px;letter-spacing:0}.content h3{font-size:38px;margin:0 0 21px;letter-spacing:-.025em}.content p{font-size:17px;line-height:1.57;margin:0;color:#3f4243;max-width:710px}.detail{border-top:1px solid #c9c9c5;padding:18px 0}.detail strong{display:block;font-size:18px;margin-bottom:9px}.detail p{font-size:15px;line-height:1.55;color:#555}.detail:first-child{border-top:3px solid #e6b900}.brochure{width:min(100%,500px);aspect-ratio:500/455;margin-top:10px;background-image:url('assets/training-prospekt-entwurf.png');background-size:244.8% auto;background-position:10.9% 76.1%;background-repeat:no-repeat;mask-image:linear-gradient(to right,transparent,#000 6%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 91%,transparent);mask-composite:intersect}.content aside{display:flex;flex-direction:column}.actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:22px;flex:1;padding:35px 0 22px}.glass-button{position:relative;display:flex;align-items:center;width:280px;height:55px;color:#111;font-size:16px;flex:none}.yellow{position:absolute;inset:13% 0;border-radius:999px;background:linear-gradient(#ffd000,#ffc500 55%,#f2b700);box-shadow:0 3px 8px #0003}.arrow{position:absolute;z-index:2;left:0;width:14%;text-align:center;color:#fff;font-size:28px}.glass{position:absolute;inset:0 0 0 12%;border-radius:999px;border:1px solid #fffe;background:linear-gradient(#fff6,#fff1 22%,#fff0 70%,#fff5);backdrop-filter:blur(1px);box-shadow:inset 0 2px 3px #fffa,inset 0 -2px 3px #fffa,0 2px 4px #0004}.button-text{position:absolute;left:12%;right:0;text-align:center;z-index:2;white-space:nowrap}.online{background:#e8e8e5;padding:42px 7.75%;display:flex;align-items:center;gap:30px}.online-icon{display:flex;align-items:center;gap:10px;flex:none}.online-icon img{width:38px;height:38px;object-fit:contain;filter:brightness(0)}.online-icon svg{width:64px;height:22px;color:#111}.online h2{font-size:27px;margin:0 0 7px;letter-spacing:-.02em}.online p{font-size:16px;color:#555;margin:0}.online .glass-button{margin-left:auto}.academy{cursor:default}.footer{padding:25px 7.75%;background:#242626;color:#fff;font-size:13px;display:flex;gap:28px}.footer .up{margin-left:auto;color:#e5b900;font-size:18px}@media(max-width:900px){.content{grid-template-columns:minmax(0,1fr) 280px;gap:35px}.tabs{gap:5px}.tab{font-size:13px}.glass-button{width:250px}.online{gap:15px}.online h2{font-size:22px}}@media(max-width:700px){.nav{height:82px;padding:0 6%}.logo{width:175px}.back{font-size:12px;gap:6px}.back span{width:28px;height:28px}.hero{padding:35px 6% 44px}.hero h1{font-size:38px}.hero p{font-size:17px}.body{padding:38px 6%}.tabs{display:flex;overflow-x:auto;scrollbar-width:thin}.tab{min-width:145px}.content{display:flex;flex-direction:column;gap:20px;padding-top:32px}.content h3{font-size:30px}.content p{font-size:16px}.brochure{max-width:500px}.actions{padding:25px 0 0;gap:10px}.online{padding:30px 6%;flex-wrap:wrap}.online-icon{gap:4px}.online-icon img{width:30px;height:30px}.online-icon svg{width:42px}.online h2{font-size:19px}.online p{font-size:14px}.online .glass-button{margin-left:auto}.footer{padding:25px 6%}}

/* Logo und Typografie entsprechen den Segmenten der Startseite. */
.page{container-type:inline-size}.nav{height:9.98cqw;padding:0 7.4%}.nav>a:first-child{width:22%;transform:translate(1cqw,1.1cqw);flex:none}.logo{display:block;width:100%;filter:none}.back{font-size:1.15cqw}.hero .kicker{font-size:1.7cqw}.hero h1{font-size:4cqw;line-height:.98;letter-spacing:-.035em}.hero p{font-size:1.7cqw;line-height:1.38}@media(max-width:700px){.nav{height:82px;padding:18px 6%}.nav>a:first-child{width:185px;max-width:55%;transform:translateY(1.1cqw)}.back{font-size:12px}.hero .kicker{font-size:16px}.hero h1{font-size:38px}.hero p{font-size:17px}}

@media(min-width:701px){.content .actions{transform:translateY(45px)}}
/* Ausgewähltes Thema wie im Vorschlag; übrige Tabs bleiben hellgrau. */
.tab.active{background:transparent;color:#171a1c;font-weight:700;box-shadow:inset 0 -2px #e6b900}

/* Footer wie auf der Startseite. */
.footer{background:#242626;color:white;padding:2cqw 7%;font-size:1.1cqw;display:flex;justify-content:space-between;gap:0}.footer-links{display:flex;align-items:center;gap:2cqw}.footer-links a:hover{text-decoration:underline}.footer-top{display:inline-flex;align-items:center;justify-content:center}.footer-top img{display:block;width:clamp(22px,2cqw,32px);height:auto}@media(max-width:700px){.footer{padding:25px 7%;font-size:12px}.footer-links{gap:18px;flex-wrap:wrap}}

.back:hover,.back:focus-visible{color:#e7b800}

/* Rückweg mit den Kreideelementen der Startseite. */
.back{gap:8px}.back-dot{display:block;width:20px;height:20px;flex:none}.back-label{position:relative;font-weight:400}.back-rule{position:absolute;left:auto;right:0;top:100%;width:150px;height:20px;overflow:hidden;pointer-events:none}@media(max-width:700px){.back-dot{width:17px;height:17px}.back{gap:6px}}

/* Gläserner Kreis um das bestehende Footer-Dreieck. */
.footer-top{position:relative;isolation:isolate;width:clamp(38px,3.1cqw,48px);height:clamp(38px,3.1cqw,48px);flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.30);background:linear-gradient(155deg,rgba(255,255,255,.27),rgba(255,255,255,.04) 42%,rgba(255,255,255,.10) 80%,rgba(255,255,255,.24));box-shadow:0 0 2px rgba(255,255,255,.48),inset 0 2px 3px rgba(255,255,255,.38),inset 0 -2px 4px rgba(255,255,255,.24),0 3px 8px rgba(0,0,0,.28)}
.footer-top img{position:relative;display:block;width:48%;height:auto;z-index:1}
.footer-top:hover{border-color:rgba(255,255,255,.95)}
.footer-top:focus-visible{outline:2px solid #e7b800;outline-offset:3px}
@media(max-width:700px){.hero h1{font-size:clamp(25px,7.8vw,38px);overflow-wrap:anywhere}}
@media(max-width:700px){.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:8px}.tab{min-width:0;white-space:normal;padding:14px 7px}}
@media(max-width:700px){.tabs .tab{overflow-wrap:anywhere}.nav{overflow:hidden}}
@media(max-width:700px){.content h2.tag,.content h3{overflow-wrap:anywhere;hyphens:auto}}
/* Originalschatten vom unteren Rand des Startseiten-Headers. */
.mast+main{position:relative}
.unterseite-schatten{position:absolute;z-index:3;top:0;left:0;width:100%;height:auto;display:block;overflow:hidden;pointer-events:none;mix-blend-mode:multiply}

/* Footer-Navigation wie im Header; Pfeil bleibt rechts. */
.footer{align-items:center;gap:clamp(16px,2cqw,32px)}
.footer-nav{display:flex;justify-content:flex-end;align-items:center;gap:clamp(12px,1.6cqw,26px);margin-left:auto;flex-wrap:wrap}
.footer-nav a{color:inherit;text-decoration:none;white-space:nowrap}
.footer-nav a:hover,.footer-nav a:focus-visible{color:#e7b800}
@media(max-width:700px){.footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 12px}.footer-links{grid-column:1/-1}.footer-nav{grid-row:2;grid-column:1;gap:10px 14px}.footer-top{grid-row:2;grid-column:2}}

/* Die linke Kante von Logo, Headertext und Inhalt ist identisch. */
@media(min-width:701px){.angebot-seite .hero,.angebot-seite .body{padding-left:calc(7.4% + 1cqw)}}

/* Prospekt mit festem Abstand unter dem längsten Trainingstext. */
.angebot-seite .brochure{margin-top:32px}
@media(max-width:700px){.angebot-seite .tabs .tab{min-height:58px}}

/* Footer: Rechtliches links, Zurück-nach-oben rechts. */
@media(max-width:700px){.footer{display:flex;align-items:center;justify-content:space-between}.footer-top{margin-left:auto}}

/* Fußnavigation nur auf größeren Bildschirmen. */
@media(max-width:700px){.footer-nav{display:none}}

/* Weiche Glaskante und Leuchten wie auf der Startseite. */
.glass-button .glass{border-color:rgba(255,255,255,.30);box-shadow:0 0 2px rgba(255,255,255,.38),inset 0 2px 4px rgba(255,255,255,.38),inset 0 -2px 4px rgba(255,255,255,.24),0 3px 8px rgba(0,0,0,.20);transition:box-shadow .4s ease,border-color .4s ease,background .4s ease}
.glass-button .glass::after{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,255,255,.55);border-radius:inherit;filter:blur(.8px);pointer-events:none;transition:opacity .4s ease;opacity:.7}
.glass-button:hover .glass,.glass-button:focus-visible .glass{border-color:rgba(255,255,255,.30);background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.12) 22%,rgba(255,255,255,.06) 75%,rgba(255,255,255,.40));box-shadow:0 0 7px 1px rgba(255,255,255,.45),inset 0 2px 5px rgba(255,255,255,.48),inset 0 -2px 5px rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.28)}
.glass-button:hover .glass::after,.glass-button:focus-visible .glass::after{opacity:1}

/* Gleiche Größe wie die Glasbuttons auf der Startseite. */
@media(min-width:701px){.glass-button{width:21cqw;height:4.4cqw;font-size:1.05cqw}.glass-button .arrow{font-size:2cqw}}
@media(max-width:700px){.glass-button{width:min(58cqw,100%);height:48px;font-size:15px}}