/* Fussballschule Hochrhein — shared styles */
/* Lokale Schriften (DSGVO: kein externer Google-Abruf) */
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#F4F4F0;
  --ink:#0C0C0B;
  --accent:#a1afba;
  --slate:#343B42;
  --slate-2:#272D34;
  --slate-3:#21262c;
  --white:#FFFFFF;
  --muted:#3a3a36;
  --maxw:1280px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}
::selection{background:var(--accent);}

.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

@keyframes fshMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* hide until translations applied, to avoid showing keys */
[data-i18n]:empty{visibility:hidden;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,244,240,.94);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink);}
.header-row{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:44px;display:block;}
.main-nav{display:flex;align-items:center;gap:28px;}
.navlink{text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:6px 0;transition:color .15s;}
.navlink:hover{color:#4d565f;}
.navlink.active{font-weight:800;background:var(--accent);color:var(--ink);padding:6px 10px;}
.header-actions{display:flex;align-items:center;gap:16px;}
.lang-toggle{display:flex;border:2px solid var(--ink);}
.lang-toggle button{border:none;cursor:pointer;font-family:'Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;padding:8px 12px;background:transparent;color:var(--ink);}
.lang-toggle button.active{background:var(--ink);color:var(--white);}
.btn{display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s,color .15s;}
.btn-dark{background:var(--ink);color:var(--white);font-size:13px;padding:12px 20px;border:none;}
.btn-dark:hover{background:var(--slate);}
.menu-toggle{display:none;}

/* ---------- generic buttons ---------- */
.btn-accent{background:var(--accent);color:var(--ink);border:2px solid var(--ink);font-size:15px;padding:18px 32px;box-shadow:5px 5px 0 var(--ink);}
.btn-accent:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px);}
.btn-outline-ink{color:var(--ink);border:2px solid var(--ink);font-size:15px;padding:18px 32px;background:transparent;}
.btn-outline-ink:hover{background:var(--ink);color:var(--bg);}
.btn-band{background:var(--ink);color:var(--white);font-size:16px;padding:24px 40px;box-shadow:6px 6px 0 rgba(12,12,11,.25);}
.btn-band:hover{background:var(--slate);}
.textlink{text-decoration:none;color:var(--ink);font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid var(--accent);padding-bottom:4px;transition:border-color .15s;}
.textlink:hover{border-bottom-color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--bg);padding:72px 0 36px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;margin-bottom:56px;}
.site-footer .flogo{height:48px;display:block;filter:invert(1);margin-bottom:20px;}
.site-footer p{font-size:15px;line-height:1.6;color:#a8a8a2;max-width:360px;margin:0;}
.flabel{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.fcol-links{display:flex;flex-direction:column;gap:10px;}
.fcol-links a{text-decoration:none;color:var(--bg);font-size:15px;transition:color .15s;}
.fcol-links a:hover{color:var(--accent);}
.fcontact{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--bg);}
.fcontact a{text-decoration:none;color:var(--bg);}
.fcontact a:hover{color:var(--accent);}
.fcontact span{color:#a8a8a2;}
.footer-bottom{border-top:1px solid #2c2c29;padding-top:24px;display:flex;justify-content:space-between;gap:24px;font-size:13px;color:#a8a8a2;flex-wrap:wrap;}
.footer-bottom a{color:#a8a8a2;text-decoration:none;}
.footer-bottom a:hover{color:var(--accent);}
.footer-legal{display:flex;gap:24px;}

/* ---------- cards / hover used across pages ---------- */
.svc-card{text-decoration:none;background:var(--slate-2);border:2px solid rgba(161,175,186,.35);display:block;transition:transform .15s,border-color .15s;}
.svc-card:hover{border-color:var(--accent);transform:translateY(-4px);}
.partner-card{transition:transform .12s,box-shadow .12s;}
.gallery-link:hover{opacity:.92;}

/* ---------- forms ---------- */
input,select,textarea{border:2px solid var(--ink);background:var(--white);padding:14px 16px;font-size:16px;font-family:'Archivo',sans-serif;outline:none;transition:box-shadow .12s,border-color .12s;}
input:focus,select:focus,textarea:focus{border-color:var(--slate);box-shadow:3px 3px 0 var(--accent);}
input::placeholder,textarea::placeholder{color:#9a9a94;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field span{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.field.full{grid-column:1 / -1;}
.btn-submit{background:var(--accent);color:var(--ink);border:2px solid var(--ink);font-size:15px;padding:18px 36px;box-shadow:5px 5px 0 var(--ink);font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.btn-submit:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px);}

/* ---------- FAQ ---------- */
details.faq{border:2px solid var(--ink);background:var(--white);}
details.faq summary{cursor:pointer;padding:20px 24px;font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq .faq-icon{font-family:'Anton',sans-serif;font-size:22px;color:var(--slate);}
details.faq[open] .faq-icon{transform:rotate(45deg);}
details.faq .faq-body{padding:0 24px 22px;font-size:16px;line-height:1.65;color:var(--muted);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .container{padding:0 20px;}
  .main-nav,.header-actions .btn-dark{display:none;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--ink);background:transparent;cursor:pointer;}
  .menu-toggle span{width:20px;height:2px;background:var(--ink);position:relative;}
  .menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);}
  .menu-toggle span::before{top:-6px;}.menu-toggle span::after{top:6px;}
  .mobile-nav{display:none;border-top:2px solid var(--ink);background:var(--bg);}
  .mobile-nav.open{display:flex;flex-direction:column;}
  .mobile-nav a{padding:16px 20px;text-decoration:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--ink);border-bottom:1px solid #e0e0da;}
  .grid-2,.grid-2-rev{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr !important;gap:32px;}
  .form-grid{grid-template-columns:1fr !important;}
  .svc-grid{grid-template-columns:1fr 1fr !important;}
  .testi-grid{grid-template-columns:1fr !important;}
  .gallery-grid{grid-template-columns:1fr 1fr !important;}
  .order-img{order:-1 !important;}
}
@media (max-width:600px){
  .svc-grid,.gallery-grid{grid-template-columns:1fr !important;}
  /* großes Hero-Display darf auf schmalen Phones nicht über den Rand laufen */
  .hero-title,.section-hero-title{font-size:clamp(34px,10vw,52px) !important;letter-spacing:0 !important;}
  /* Startseite: "FUSSBALLSTARS"-Schrägbox auf Phones schmaler halten und nicht überstehen lassen */
  .hero-title > span[style*="skewX(-6deg)"]{transform:skewX(-4deg) !important;padding:0 10px 0 8px !important;max-width:100%;}
  /* Startseite: Trainer-Foto-Box nicht über den linken Rand hinausragen */
  .hero-photo{padding:0 8px 16px 0 !important;}
  .hero-photo-tag{right:6px !important;bottom:-8px !important;font-size:15px !important;padding:8px 14px !important;}
  /* Über uns: Trainer-Bilder dürfen am Phone NICHT sticky sein, sonst überdecken sie den Text */
  .coach-stick{position:static !important;top:auto !important;}
}
.mobile-nav{display:none;}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-hero{background:var(--ink);color:var(--bg);padding:84px 0 92px;position:relative;overflow:hidden;}
.legal-hero .container{position:relative;}
.legal-hero .kicker{display:inline-block;transform:skewX(-8deg);background:var(--accent);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;margin-bottom:22px;}
.legal-hero .kicker span{display:inline-block;transform:skewX(8deg);}
.legal-hero h1{font-size:clamp(46px,6vw,88px);line-height:.98;margin:0;color:var(--bg);}
.legal-hero::after{content:"";position:absolute;right:-70px;bottom:-130px;width:420px;height:420px;background:url(../images/bildmarke.png) no-repeat center/contain;opacity:.10;filter:invert(1);transform:rotate(-6deg);pointer-events:none;}
@media (max-width:600px){ .legal-hero::after{width:240px;height:240px;right:-50px;bottom:-70px;} }
.legal-body{background:var(--bg);border-top:2px solid var(--ink);}
.legal{max-width:820px;margin:0 auto;padding:72px 32px 100px;}
.legal h2{display:flex;align-items:center;gap:14px;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;letter-spacing:.02em;color:var(--ink);margin:46px 0 14px;}
.legal h2::before{content:"";flex:0 0 auto;width:26px;height:11px;background:var(--accent);transform:skewX(-12deg);}
.legal h2:first-of-type{margin-top:8px;}
.legal h3{font-size:17px;font-weight:800;margin:24px 0 6px;}
.legal p,.legal li{font-size:16px;line-height:1.75;color:var(--muted);}
.legal p{margin:0 0 14px;}
.legal ul{margin:0 0 16px;padding-left:22px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--ink);font-weight:600;border-bottom:2px solid var(--accent);text-decoration:none;word-break:break-word;}
.legal a:hover{border-bottom-color:var(--ink);}
.legal .lead{font-size:19px;line-height:1.65;color:var(--ink);border-left:4px solid var(--accent);padding-left:20px;margin:0 0 8px;}
.legal .ph{background:#ffe9a8;color:#0C0C0B;padding:1px 6px;font-weight:700;border-radius:2px;}
.legal .updated{font-size:13px;color:#8a8a84;margin-top:48px;border-top:1px solid #e0e0da;padding-top:16px;}
@media (max-width:600px){ .legal-hero{padding:60px 0 64px;} .legal{padding:48px 20px 72px;} }