:root{
  --red:#c0392b;
  --blue:#2c3e94;
  --bg:#eef2f7;
  --text:#0f172a;
  --muted:#475569;
}

.subhero{
  padding:2.5rem 1rem 2rem;
  text-align:center;
}

.subhero h1{
  font-size:2.2rem;
  font-weight:700;
}


*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(
    180deg,
    #050b18 0%,
    #0f1f3d 50%,
    #050b18 100%
  );
  color:var(--text);
}


body{
  font-family:'Inter', Arial, sans-serif !important;
}


a{ text-decoration:none; color:inherit; }

/* ===== HEADER ===== */

.nav{
  display:flex;
  align-items:center;
  gap:.6rem;
}


.clubtitle{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  line-height:1;
}


.clubname{
  font-size:3.8rem;      /* doppelt so groß */
  font-weight:700;
  color:#ffffff;
font-style:italic;
}

.clubyear{
  font-size:1.4rem;
  font-weight:400;
  font-style:italic;
  opacity:.85;
}


header,
header *{
  color:#ffffff !important;
}

header a{
  color:#ffffff !important;
}

header a:hover{
  color:#ffffff !important;
}

header{
  position:relative;
  border-bottom:none;   /* ← blaue Linie weg */
}


header{
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;
  background:
    radial-gradient(140% 100% at 40% 50%, rgba(255,255,255,.28), transparent 60%),
  radial-gradient(140% 100% at 60% 50%, rgba(30,58,138,.35), transparent 65%);
}


.nav{
  max-width:1200px;
  margin:auto;
  padding:.7rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav img{
  height:110px;
  max-height:90%;
}

.nav a{
  padding:.4rem .7rem;
  border-radius:.4rem;
  font-weight:600;
  color:var(--blue);
}

.nav a:hover{
  background:rgba(44,62,148,.08);
}

/* ===== HERO ===== */

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:
radial-gradient(140% 100% at 40% 50%, rgba(255,255,255,.28), transparent 60%),
  radial-gradient(140% 100% at 60% 50%, rgba(30,58,138,.35), transparent 65%);
}


.hero h1,
.hero p,
.claim,
.welcome{
  color:#ffffff !important;
}

.hero{
  background:url('bg-svnittendorf.jpg') center/cover no-repeat;
  position:relative;
  padding:3.5rem 1rem 6rem;
}


.hero::after{
  content:"";
  position:absolute;
  bottom:-10px;   /* ← vorher 0 */
  left:0;
  right:0;
  height:6px;
  background:
    radial-gradient(140% 100% at 40% 50%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(140% 100% at 60% 50%, rgba(30,58,138,.35), transparent 65%);
}


.hero-inner{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:auto;
  color:#fff;
}

.hero h1{
  font-size:2.4rem;
  margin:0 0 .5rem;
}

.hero p{
  max-width:600px;
  font-size:1.1rem;
}

.claim{
  font-style:italic;
  font-size:2.5rem;
  line-height:1.2;
  margin:0 0 .8rem;
}

.claim .sport{ font-weight:800; }
.claim .leidenschaft{ font-weight:600; }
.claim .gemeinschaft{ font-weight:400; }

.welcome{
  font-style:italic;
  font-size:1.15rem;
  opacity:.9;
}


/* ===== KACHEL-HINTERGRUND ===== */

.cards-bg{
  margin-top:-2.5rem;
  padding:4.5rem 0 3rem;
}


/* ===== KACHELN ===== */

.cards{
  max-width:1100px;
  margin:auto;
  padding:0 1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}

.card{
  border-radius:0 !important;
  padding:1.6rem 1.2rem;
  text-align:center;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}

.card h3{
  font-size:0.95rem;
  font-weight:600;
  line-height:1.25;
}

.card span.icon{
  display:block;          
  width:54px;
  height:54px;
  margin:0 auto .6rem;
  background-color:#ffffff;

  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;

  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
}


/* ===== ICONS (alle 12 Kacheln) ===== */

/* 1 Aktuelle Termine – Kalender */
.card:nth-child(1) .icon{
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z"/></svg>');
}

/* 2 Vereinsführung / Abteilungen – Personen */
.card:nth-child(2) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M16 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-8 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 2c-2.7 0-8 1.3-8 4v2h10v-2c0-1.3.5-2.5 1.4-3.4C10.4 13.2 9.1 13 8 13zm8 0c-.6 0-1.3.1-2 .2 1.2.9 2 2.2 2 3.8v2h8v-2c0-2.7-5.3-4-8-4z"/></svg>');
-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M16 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-8 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 2c-2.7 0-8 1.3-8 4v2h10v-2c0-1.3.5-2.5 1.4-3.4C10.4 13.2 9.1 13 8 13zm8 0c-.6 0-1.3.1-2 .2 1.2.9 2 2.2 2 3.8v2h8v-2c0-2.7-5.3-4-8-4z"/></svg>');
}

/* 3 Übungszeiten – Uhr */
.card:nth-child(3) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 20a8 8 0 1 0-8-8 8 8 0 0 0 8 8zm1-8.4V7h-2v5l4.3 2.5 1-1.6L13 11.6z"/></svg>');
}

/* 4 Hallenbelegung – Gebäude */
.card:nth-child(4) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 21V8l9-5 9 5v13h-6v-6H9v6H3z"/></svg>');
}

/* 5 Mitglied werden – Formular */
.card:nth-child(5) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 2l4 4h-4z"/></svg>');
}

/* 6 Datenschutz – Schloss */
.card:nth-child(6) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm3 8H9V7a3 3 0 0 1 6 0v3z"/></svg>');
}

/* 7 Satzung – Dokument */
.card:nth-child(7) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/></svg>');
}

/* 8 Ehrenordnung – Medaille */
.card:nth-child(8) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2l3 6h6l-4.5 4 1.5 7-6-3.5-6 3.5 1.5-7L3 8h6z"/></svg>');
}

/* 9 Jugendordnung – Kind */
.card:nth-child(9) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0 8c-3.3 0-6 1.7-6 4v4h12v-4c0-2.3-2.7-4-6-4z"/></svg>');
}

/* 10 Gesundheitssport – Herz */
.card:nth-child(10) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 21s-7-4.4-9.5-8.5C.7 9.4 3 5 7.5 5c2 0 3.4 1.1 4.5 2.5C13.1 6.1 14.5 5 16.5 5 21 5 23.3 9.4 21.5 12.5 19 16.6 12 21 12 21z"/></svg>');
}

/* 11 Kontakt – Brief */
.card:nth-child(11) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm2 0l8 5 8-5H4z"/></svg>');
}

/* 12 Impressum – Waage */
.card:nth-child(12) .icon{
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3l4 4h-3v7h-2V7H8l4-4zm-7 9l3 6H2l3-6zm14 0l3 6h-6l3-6z"/></svg>');
}

.card h3{ margin:.6rem 0 0; }

/* Farben */
.card{
  background:
    radial-gradient(
      120% 80% at 20% 20%,
      rgba(185,28,28,.85) 0%,
      rgba(185,28,28,.45) 35%,
      transparent 60%
    ),
    radial-gradient(
      120% 90% at 80% 30%,
      rgba(30,58,138,.9) 0%,
      rgba(30,58,138,.55) 40%,
      transparent 70%
    ),
    radial-gradient(
      100% 70% at 50% 80%,
      rgba(255,255,255,.18) 0%,
      transparent 60%
    ),
    #0f1f3d;
}

.card:nth-child(3n+1){
  background:
    radial-gradient(130% 90% at 10% 30%, rgba(185,28,28,.85), transparent 65%),
    radial-gradient(120% 80% at 85% 25%, rgba(30,58,138,.85), transparent 60%),
    radial-gradient(100% 60% at 50% 85%, rgba(255,255,255,.15), transparent 60%),
    #0f1f3d;
}

.card:nth-child(3n+2){
  background:
    radial-gradient(120% 80% at 30% 15%, rgba(30,58,138,.9), transparent 60%),
    radial-gradient(140% 100% at 75% 40%, rgba(185,28,28,.75), transparent 70%),
    radial-gradient(90% 60% at 40% 80%, rgba(255,255,255,.12), transparent 60%),
    #0f1f3d;
}

.card:nth-child(3n+3){
  background:
    radial-gradient(140% 90% at 50% 10%, rgba(185,28,28,.7), transparent 65%),
    radial-gradient(120% 80% at 60% 60%, rgba(30,58,138,.9), transparent 65%),
    radial-gradient(110% 70% at 50% 90%, rgba(255,255,255,.18), transparent 60%),
    #0f1f3d;
}

.cards-bg::after{
  content:"";
  display:block;
  height:6px;
margin-top:1.5rem;
  background:
    radial-gradient(140% 100% at 40% 50%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(140% 100% at 60% 50%, rgba(30,58,138,.5), transparent 65%);
}

/* ===== FÖRDERLOGOS ===== */

.badges{
  max-width:100%;
  padding:2.5rem 1rem 3rem;
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
}

.badges img{ max-height:110px; }

/* ===== FOOTER ===== */

footer{
  border-top:3px solid var(--red);
  text-align:center;
  padding:2rem 1rem;
  color:var(--muted);
}

.content{
  color:rgba(255,255,255,0.9);
}

.content{
  max-width:900px;        /* angenehme Lesebreite */
  margin:0 auto;          /* zentrieren */
  padding:0 1.2rem 3rem;  /* Abstand links/rechts + unten */
}

@media (max-width:600px){
  .content{
    padding:0 1.5rem 2.5rem;
  }
}

.link-list{
  list-style:none;
  padding:0;
  margin-bottom:2rem;
}

.link-list li{
  margin-bottom:0.6rem;
}

.link-list a{
  color:#ffffff;
  text-decoration:none;
  font-weight:500;
}

.link-list a:hover{
  text-decoration:underline;
}

/* ===== TABELLE ÜBUNGSZEITEN ===== */

.table-wrapper{
  overflow-x:auto;
  margin-top:2rem;
}

.zeiten-table{
  width:100%;
  border-collapse:collapse;
  background:rgba(255,255,255,0.05);
  color:#ffffff;
  font-size:0.95rem;
}

.zeiten-table th{
  background:rgba(255,255,255,0.12);
  padding:0.8rem;
  text-align:left;
  font-weight:600;
}

.zeiten-table td{
  padding:0.8rem;
  vertical-align:top;
  border-top:1px solid rgba(255,255,255,0.15);
}

.zeiten-table tr:hover{
  background:rgba(255,255,255,0.06);
}

/* Mobilfreundlich */
@media (max-width:700px){
  .zeiten-table{
    font-size:0.9rem;
  }
}

/* ===== KACHELN AKTUELLE TERMINE ===== */

.tile-list{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  margin-top:2rem;
}

.tile.wide{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
  background:rgba(255,255,255,0.06);
  padding:1.6rem;
  text-decoration:none;
  color:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}

.tile-text h3{
  margin:0 0 .4rem 0;
  font-size:1.15rem;
}

.tile-text p{
  margin:0;
  font-size:0.95rem;
  line-height:1.45;
}

.kachel-bild{
  width:120px;
  height:80px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
}

@media (max-width:600px){
  .kachel-bild{
    width:90px;
    height:60px;
  }
}

.tile-icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  background-color:#ffffff;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  opacity:.9;
}

/* Icon-Zuordnungen – Dateien liegen im selben Ordner */
.tile-icon.calendar{ 
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z"/></svg>');
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z"/></svg>');
}

.pdf-wrapper{
  position:relative;
  width:100%;
  height:80vh;
}

@media (max-width:700px){
  .pdf-wrapper{
    height:75vh;
  }
}

.pdf-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
}

/* FUNKTIONEN – TABELLENLAYOUT */
.funktion-table{
  max-width:1100px;
  margin:0 auto;
  color:#ffffff;
}

.funktion-row{
  display:grid;
  grid-template-columns:
    40px        /* Icon */
    1.4fr       /* Bezeichnung */
    1.6fr       /* Name */
    50px        /* Mail */
    1.2fr       /* Telefon */
    1.8fr;      /* Aufgabe */
  align-items:center;
  padding:.8rem .4rem;
  border-bottom:1px solid rgba(255,255,255,0.15);
  font-size:.95rem;
}

.person-icon{
  text-align:center;
  font-size:1.3rem;
}

.funktion-row a{
  color:#ffffff;
  text-decoration:none;
}

.funktion-row a:hover{
  text-decoration:underline;
}

/* Mobile */
@media (max-width:900px){
  .funktion-row{
    grid-template-columns: 32px 1fr;
    row-gap:.3rem;
  }

  .funktion-row span:nth-child(n+3){
    grid-column:2;
  }
}

.field-label {
  font-size: 0.85rem;
  opacity: 0.85;
  display: block;
  margin: 12px 0 4px;
}

.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.inline-options {
  margin: 10px 0;
}

.inline-options label {
  margin-left: 12px;
}

.form-wrapper,
.form-wrapper label,
.form-wrapper p,
.form-wrapper h2,
.form-wrapper h3 {
  color: #ffffff;
}

.form-wrapper {
  max-width: 1000px;
  margin: 60px auto;
  padding: 40px;
  background: rgba(10, 15, 30, 0.9);
  border-radius: 6px;
}

.form-container input,
.form-container select,
.form-container textarea {
  width: 100%;
  padding: 10px;
  background: #111;
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 3px;
}


.radio-block {
  margin: 20px 0;
}

.radio-block label {
  display: block;
  margin-left: 10px;
}

.signature-box {
  background: #f2f2f2;
  border-radius: 6px;
  padding: 8px;
  max-width: 600px;
}

#signature-pad {
  width: 100%;
  height: 200px;
  background: #ffffff;
  border: 2px dashed #999;
  border-radius: 4px;
  touch-action: none; /* wichtig für Handy */
}

.signature-clear {
  margin-top: 10px;
  background: #b30000;
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 4px;
}

.signature-hint {
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 8px;
}


.submit-button {
  margin-top: 30px;
  padding: 14px 30px;
  background: linear-gradient(135deg, #b30000, #e60000);
  color: #fff;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  opacity: 0.9;
}

@media (max-width:900px){
  .form-row-4{
    grid-template-columns:1fr;
  }
}