/* Schriften lokal eingebunden (statt Google-Server, wegen Datenschutz). Lizenz: SIL Open Font License */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('schriften/anton-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('schriften/anton-400-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; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schriften/instrument-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schriften/instrument-sans-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; }

/* Salsa im Kiez · Startseite
   Alle Klassen mit Präfix "sik-", damit das WordPress-Theme nichts überschreibt. */

:root {
  --sik-blau: #20BEE2;
  --sik-orange: #ED8E40;
  --sik-rot: #CF4B45;
  --sik-gold: #FCBF49;
  --sik-creme: #FFF8E7;
  --sik-weiss: #FFFFFF;
  --sik-dunkel: #181818;
  --sik-linie: rgba(24, 24, 24, .14);
  --sik-radius: 18px;
  --sik-max: 1180px;
  --sik-sans: "Instrument Sans", system-ui, sans-serif;
  --sik-display: "Anton", Impact, "Arial Narrow", sans-serif;
}

.sik, .sik * { box-sizing: border-box; }
.sik {
  margin: 0;
  background: var(--sik-creme);
  color: var(--sik-dunkel);
  font-family: var(--sik-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sik img { max-width: 100%; display: block; }
.sik a { color: inherit; }
.sik-inner { max-width: var(--sik-max); margin: 0 auto; padding: 0 24px; }
.sik section { scroll-margin-top: 80px; }

/* Typo */
.sik-kicker {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.sik-h2 {
  font-family: var(--sik-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(40px, 5.5vw, 68px); line-height: 1; margin: 0 0 16px;
}
.sik-tag h3, .sik-ort h3, .sik-person h3 { font-family: var(--sik-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.sik-lead { font-size: 19px; max-width: 620px; margin: 0; }

/* Buttons */
.sik-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sik-rot); color: var(--sik-weiss) !important;
  font-weight: 700; font-size: 16px; text-decoration: none;
  padding: 14px 24px; border-radius: 999px; border: 2px solid var(--sik-dunkel);
  box-shadow: 3px 3px 0 var(--sik-dunkel);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sik-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--sik-dunkel); }
.sik-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sik-btn--hell { background: var(--sik-weiss); color: var(--sik-dunkel) !important; }

/* Header */
.sik-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sik-creme); border-bottom: 2px solid var(--sik-dunkel);
}
.sik-header .sik-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.sik-header__logo img { height: 48px; width: auto; }
/* Logo bewusst rechts: links steht direkt darunter schon das große Logo im Hero */
.sik-nav { display: flex; gap: 24px; order: 1; }
.sik-header .sik-btn { order: 2; margin-left: auto; }
.sik-header__logo { order: 3; }
.sik-nav a { text-decoration: none; font-weight: 600; font-size: 15px; }
.sik-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sik-header .sik-btn { padding: 10px 18px; font-size: 15px; box-shadow: 2px 2px 0 var(--sik-dunkel); }

/* Drei-Punkte-Menü, nur auf Tablet und Handy sichtbar */
.sik-menu { display: none; position: relative; order: 3; }
.sik-menu summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); box-shadow: 2px 2px 0 var(--sik-dunkel);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.sik-menu summary::-webkit-details-marker { display: none; }
.sik-menu summary span { width: 6px; height: 6px; border-radius: 50%; background: var(--sik-dunkel); }
.sik-menu[open] summary { background: var(--sik-gold); }
.sik-menu summary:focus-visible { outline: 3px solid var(--sik-blau); outline-offset: 2px; }
.sik-menu__liste {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 190px; z-index: 60;
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--sik-dunkel); padding: 6px; display: flex; flex-direction: column;
}
.sik-menu__liste a { text-decoration: none; font-weight: 700; font-size: 17px; padding: 11px 14px; border-radius: 9px; }
.sik-menu__liste a:hover, .sik-menu__liste a:focus-visible { background: var(--sik-creme); }

/* Hero */
.sik-hero { background: var(--sik-blau); position: relative; overflow: hidden; border-bottom: 2px solid var(--sik-dunkel); }
.sik-hero .sik-inner {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px;
  min-height: 700px; padding-top: 56px;
}
.sik-hero__text { padding-bottom: 72px; position: relative; z-index: 2; }
.sik-hero__logo { width: min(450px, 100%); margin: 0 0 20px -8px; }
.sik-badge {
  display: inline-block; background: var(--sik-gold); color: var(--sik-dunkel);
  font-weight: 700; font-size: 15px; padding: 6px 14px; border-radius: 999px;
  border: 2px solid var(--sik-dunkel); transform: rotate(-3deg); margin-bottom: 22px;
}
.sik-hero__text p { font-size: 20px; max-width: 460px; margin: 0 0 28px; }
.sik-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
/* Bild geht bis an den rechten Rand, oben bündig, abgeschnitten wird nur unten */
.sik-hero__bild {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: max(47%, calc(50% - 40px)); overflow: hidden;
}
.sik-hero__kiez {
  position: absolute; top: -50px; left: 0; width: 100%; max-width: none !important;
  height: calc(100% + 50px) !important; object-fit: cover; object-position: left top; /* reicht immer bis unten */
}
/* Angeschnitten wie auf der Flyer-Rückseite: Tanzfläche läuft unten und rechts aus dem Bild */
.sik-hero__paar {
  position: absolute; bottom: 0; right: 0; width: 88%; max-width: 700px !important; z-index: 2;
  transform: translate(6%, 33%);
}

/* Intro / Vorteile */
.sik-intro { padding: 88px 0; }
.sik-intro .sik-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.sik-vorteile { display: grid; gap: 26px; }
/* Seit 2026-10-21 ohne Kästen: Blüte und Text liegen direkt auf dem Hintergrund */
.sik-vorteil { display: flex; gap: 16px; align-items: center; }
/* Computer: Liste beginnt auf Höhe der Überschrift „Just bring your …“, nicht auf Höhe von „Welcome“ */
@media (min-width: 961px) { .sik-vorteile { margin-top: 37px; margin-left: 60px; } } /* und etwas nach rechts eingerückt */
.sik-vorteil__icon {
  flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--sik-dunkel); font-weight: 700; font-size: 20px;
}
.sik-vorteil__blume { flex: 0 0 37px; width: 37px; height: 37px; object-fit: contain; }  /* Blütenköpfe aus den Flyer-Illustrationen statt farbiger Punkte */
.sik-vorteil strong { display: block; font-size: 18px; }
.sik-vorteil span { font-size: 15px; }

/* Kursplan */
.sik-plan { background: var(--sik-orange); padding: 60px 0; border-top: 2px solid var(--sik-dunkel); border-bottom: 2px solid var(--sik-dunkel); }
.sik-plan .sik-h2 { margin-bottom: 8px; }
/* Skyline (Oberbaumbrücke) als Hintergrund, unten verankert, Fluss leicht angeschnitten */
.sik-plan { position: relative; overflow: hidden; padding-bottom: 180px; }
.sik-plan > .sik-inner { position: relative; z-index: 1; }
.sik-plan__skyline {
  position: absolute; left: 50%; bottom: 0; z-index: 0;
  width: max(100%, 1100px); max-width: none !important;
  transform: translate(-50%, 24%);
  pointer-events: none; overflow: hidden;
}
.sik-plan__skyline img { display: block; width: 100%; max-width: none !important; }
/* Zug und Vordergrund liegen pixelgenau auf dem Hintergrund (Werte in % des 2000 × 1116 px Bildes) */
.sik-zug-bahn { position: absolute; left: 12.85%; top: 57.706%; width: 81.8%; overflow: hidden; } /* sichtbarer Gleisabschnitt: Hauskante links bis Haus rechts */
.sik-plan__skyline .sik-zug { margin-left: 45.538%; width: 66.993%; max-width: none; }
.sik-plan__skyline .sik-zug-vorne { position: absolute; left: 49.95%; top: 53.763%; width: 50.05%; }
.sik-plan__skyline .sik-zug-vorne--links { left: 12.85%; top: 56.452%; width: 37.3%; }
.sik-plan__kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sik-tage { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 18px; align-items: stretch; }
.sik-tag {
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius);
  overflow: hidden; box-shadow: 5px 5px 0 var(--sik-dunkel);
  display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.sik-tag:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--sik-dunkel); }
.sik-tag h3 {
  margin: 0; padding: 10px 18px; background: var(--sik-rot); color: var(--sik-weiss);
  font-size: 22px; border-bottom: 2px solid var(--sik-dunkel);
}
.sik-tag ul { flex: 1; }
.sik-tag__ort { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 18px 10px; border-top: 1.5px dashed var(--sik-dunkel); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sik-tag__ort svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sik-tag ul { list-style: none; margin: 0; padding: 2px 18px 8px; }
.sik-tag li { padding: 8px 0; border-bottom: 1px solid var(--sik-linie); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; }
.sik-tag li:last-child { border-bottom: 0; }
.sik-zeit { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sik-kurs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sik-kurs strong { display: inline; }
.sik-kurs .sik-level { margin-top: 0; }
.sik-level {
  display: inline-block; white-space: nowrap; margin-top: 4px; font-size: 13px; font-weight: 700;
  padding: 1px 10px; border-radius: 999px; border: 1.5px solid var(--sik-dunkel);
}
.sik-level--basics { background: var(--sik-blau); }
.sik-level--beginner { background: var(--sik-gold); }
.sik-level--open { background: var(--sik-weiss); }

/* Levels */
.sik-levels { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 18px; margin-top: 24px; }
.sik-levelkarte { background: var(--sik-creme); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius); padding: 14px 18px; display: flex; gap: 12px; align-items: baseline; }
.sik-levelkarte .sik-level { margin: 0; font-size: 14px; flex: none; }
.sik-levelkarte p { margin: 0; font-size: 15px; }

/* Orte */
.sik-orte { padding: 56px 0; position: relative; overflow: hidden; }
.sik-orte .sik-inner { display: grid; grid-template-columns: 1fr 1fr 480px; gap: 18px; align-content: center; position: relative; }
.sik-orte__kopf { grid-column: 1 / -1; margin-bottom: 10px; }
.sik-orte .sik-h2 { margin-bottom: 0; }
.sik-ort {
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius);
  padding: 18px 22px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start;
}
.sik-ort .sik-kicker { margin-bottom: 6px; }
.sik-ort h3 { font-size: 24px; margin: 0 0 4px; }
.sik-ort p { margin: 0 0 10px; }
.sik-ort a { font-weight: 700; text-underline-offset: 4px; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }
.sik-ort a .sik-icon { width: 18px; height: 18px; }
/* Groß und unten angeschnitten: die Tanzfläche verschwindet unter der Abschnittskante */
.sik-orte__paar {
  position: absolute; right: -70px; bottom: -56px; width: 560px; max-width: none !important;
  transform: translateY(38%);
}

/* Team */
.sik-team { background: var(--sik-blau); padding: 56px 0; border-top: 2px solid var(--sik-dunkel); border-bottom: 2px solid var(--sik-dunkel); }
.sik-lehrer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.sik-person {
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius); overflow: hidden;
}
.sik-person__foto {
  aspect-ratio: 4 / 5; background: var(--sik-creme); /* Hochformat für Porträts */ border-bottom: 2px solid var(--sik-dunkel);
  display: grid; place-items: center; font-family: var(--sik-display); font-size: 56px;
}
.sik-person__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } /* echtes Foto füllt den Rahmen, Gesicht bleibt im oberen Drittel */
.sik-person__foto small { display: block; font-family: var(--sik-sans); font-size: 13px; text-align: center; opacity: .6; margin-top: -8px; }
.sik-person__text { padding: 14px 18px 18px; }
.sik-person h3 { margin: 0; font-size: 24px; }
.sik-person .sik-level { margin: 4px 0 8px; }
.sik-person p { margin: 0; font-size: 15px; }

/* FAQ */
/* Preise, eigener goldener Abschnitt zwischen Orten und Community */
.sik-preise { background: var(--sik-gold); padding: 56px 0; border-top: 2px solid var(--sik-dunkel); }
.sik-preise .sik-inner { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; align-items: stretch; }
/* Aufbau nach Sofias Skizze: großes Drop-in-Feld, zwei kleine Felder gestapelt, Text rechts */
.sik-preis {
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius); box-shadow: 5px 5px 0 var(--sik-dunkel);
  padding: 18px 22px; display: flex; flex-direction: column; gap: 2px; font-size: 15px;
}
.sik-preis .sik-kicker { margin-bottom: 0; }
.sik-preis__betrag { font-family: var(--sik-display); font-weight: 400; font-size: 56px; line-height: 1.05; color: var(--sik-rot); }
.sik-preis p { margin: 6px 0 0; }
.sik-preis__betrag small { font-family: var(--sik-sans); font-size: 16px; font-weight: 600; color: var(--sik-dunkel); }
.sik-preis--gross .sik-preis__betrag { font-size: 64px; line-height: 1; }
.sik-preis__option { padding-top: 10px; }
.sik-preis__option + .sik-preis__option { margin-top: 12px; border-top: 1.5px dashed var(--sik-dunkel); padding-top: 14px; }
.sik-preisstapel { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.sik-preisstapel .sik-preis__betrag { font-size: 48px; }
.sik-preise__text { padding-left: 18px; align-self: center; }
.sik-preise__text .sik-lead { margin-bottom: 12px; }
.sik-preis__hinweis { margin: 0; font-weight: 600; }
/* Community (WhatsApp-Gruppe), blau zwischen Orten und FAQ */
.sik-community { background: var(--sik-blau); padding: 96px 0; border-top: 2px solid var(--sik-dunkel); border-bottom: 2px solid var(--sik-dunkel); }
.sik-community { position: relative; z-index: 2; overflow-x: clip; overflow-y: visible; }  /* Blüten ragen oben und unten in die Nachbarabschnitte */
.sik-community__blumen { position: absolute; inset: 0; pointer-events: none; }
/* Anordnung aus Sofias Figma-Datei „Salsa im Kiez Community Blumen“: --l/--t in % (Mitte, Oberkante), --w in px, --d Drehung; --lm … fürs Handy */
.sik-community__blumen img { position: absolute; height: auto; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1px); transform: translate(-50%, 0) rotate(calc(var(--d) * 1deg)); }
.sik-community__blumen .nur-handy { display: none; }
.sik-community .sik-inner { position: relative; z-index: 1; }
.sik-community .sik-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.sik-community .sik-lead { margin-bottom: 24px; }
.sik-community__qr { background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius); box-shadow: 5px 5px 0 var(--sik-dunkel); padding: 14px 14px 12px; text-align: center; font-weight: 600; font-size: 14px; }
.sik-community__qr img { display: block; width: 180px; height: 180px; margin: 0 auto 6px; image-rendering: pixelated; }
.sik-faq { padding: 56px 0; }
.sik-faq .sik-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.sik-faq details {
  background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: 14px; margin-bottom: 8px;
}
.sik-faq summary {
  cursor: pointer; list-style: none; padding: 13px 52px 13px 18px; font-weight: 700; font-size: 17px; position: relative;
}
.sik-faq summary::-webkit-details-marker { display: none; }
/* Plus und Minus als gezeichnete Linien, damit sie exakt mittig im Kreis sitzen */
.sik-faq summary::after {
  content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sik-dunkel); box-sizing: border-box;
  background:
    linear-gradient(var(--sik-dunkel), var(--sik-dunkel)) center / 11px 2px no-repeat,
    linear-gradient(var(--sik-dunkel), var(--sik-dunkel)) center / 2px 11px no-repeat,
    var(--sik-gold);
}
.sik-faq details[open] summary::after {
  background:
    linear-gradient(var(--sik-dunkel), var(--sik-dunkel)) center / 11px 2px no-repeat,
    var(--sik-orange);
}
.sik-faq details p { margin: 0; padding: 0 18px 14px; }

/* Übergangslösung ohne Team-Abschnitt: FAQ auf Blau, damit Creme und Blau sich weiter abwechseln (2026-10-20) */
.sik-faq--blau { background: var(--sik-blau); border-top: 2px solid var(--sik-dunkel); }

/* Kontakt */
.sik-kontakt { background: var(--sik-orange); padding: 80px 0; border-top: 2px solid var(--sik-dunkel); text-align: center; }
.sik-kontakt .sik-lead { margin: 0 auto 28px; max-width: 440px; }
.sik-kontakt__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
/* Paare links und rechts vom Text: leicht überlappend, unterschiedlich hoch, Tanzflächen unter der Kante weggeschnitten.
   Die orange Fläche behält ihre Höhe, die Paare liegen nur im Hintergrund. */
.sik-kontakt { position: relative; overflow: hidden; }
.sik-kontakt > .sik-inner { position: relative; z-index: 2; }
.sik-reihe { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sik-reihe img {
  position: absolute; bottom: 0; max-width: none !important;
  transform: translateY(var(--sik-tief, 35%));
}
/* Hero-Paar (Rose) und Orte-Paar (Margerite) kommen schon vor, deshalb hier nur die anderen vier */
/* Alle gleich groß. Sofias Kopien (*-teil.png) mit teilweise entferntem Boden: Tanzfläche beginnt jetzt bei 70–78 % Bildhöhe.
   Außen so hoch wie möglich, innen etwas tiefer */
.sik-reihe img { width: 430px; }
.sik-reihe img:nth-child(1) { left: calc(50% - 880px); --sik-tief: 29%; z-index: 1; }
.sik-reihe img:nth-child(2) { left: calc(50% - 640px); --sik-tief: 35%; z-index: 2; }
.sik-reihe img:nth-child(3) { right: calc(50% - 640px); width: 400px; --sik-tief: 30%; z-index: 2; }
.sik-reihe img:nth-child(4) { right: calc(50% - 880px); --sik-tief: 27%; z-index: 1; }
@media (max-width: 1300px) {
  .sik-reihe img { width: 335px; }
  .sik-reihe img:nth-child(1) { left: -130px; }
  .sik-reihe img:nth-child(2) { left: 10px; }
  .sik-reihe img:nth-child(3) { right: 10px; width: 312px; }
  .sik-reihe img:nth-child(4) { right: -130px; }
}

/* Footer */
.sik-footer { background: var(--sik-dunkel); color: var(--sik-creme); padding: 56px 0 28px; }
.sik-footer .sik-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.sik-footer img { width: 160px; margin-bottom: 14px; }
.sik-footer h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sik-gold); }
.sik-footer ul { list-style: none; padding: 0; margin: 0; }
.sik-footer li { margin-bottom: 6px; }
.sik-footer a { text-decoration: none; }
.sik-footer a:hover { text-decoration: underline; }
.sik-footer__unten {
  grid-column: 1 / -1; border-top: 1px solid rgba(255, 248, 231, .2); padding-top: 20px; margin-top: 12px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; opacity: .8;
}

/* Kleine Laptops: Kursplan etwas kompakter, damit jede Zeile einzeilig bleibt */
@media (min-width: 961px) and (max-width: 1240px) {
  .sik-tag ul { padding: 2px 14px 8px; }
  .sik-tag__ort { padding: 9px 14px 10px; }
  .sik-tag li { gap: 10px; font-size: 15px; }
  .sik-kurs { gap: 4px 6px; }
  .sik-tag .sik-level { font-size: 12px; padding: 1px 8px; }
}

/* Schmale Laptop-Fenster (z. B. Browser neben einer anderen App): noch etwas kompakter, damit nichts umbricht */
@media (min-width: 961px) and (max-width: 1100px) {
  .sik-tage { gap: 14px; }
  .sik-tag ul { padding: 2px 11px 8px; }
  .sik-tag__ort { padding: 8px 11px 9px; font-size: 13px; gap: 5px; }
  .sik-tag li { gap: 8px; font-size: 14px; }
  .sik-kurs { gap: 3px 5px; }
  .sik-tag .sik-level { font-size: 11px; padding: 1px 6px; }
}

/* Unterseiten Impressum und Datenschutz */
.sik-rechtstext { padding: 56px 0 72px; }
.sik-rechtstext .sik-inner { max-width: 760px; }
.sik-rechtstext h2 { font-family: var(--sik-sans); font-size: 20px; font-weight: 700; margin: 36px 0 8px; }
.sik-rechtstext p, .sik-rechtstext li { font-size: 16px; line-height: 1.6; }
.sik-rechtstext p { margin: 0 0 12px; }
.sik-rechtstext ul { margin: 0 0 12px; padding-left: 20px; }
.sik-rechtstext a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.sik-rechtstext .sik-lead { font-size: 18px; margin-bottom: 8px; }
.sik-platzhalter { background: var(--sik-gold); padding: 0 6px; border-radius: 4px; font-weight: 700; }
.sik-quelle { margin-top: 28px !important; font-size: 14px !important; opacity: .7; }
.sik-stand { margin-top: 36px !important; font-size: 14px !important; opacity: .7; }
.sik-zurueck { margin-left: auto; padding: 10px 18px !important; font-size: 15px !important; }

/* Tablet */
@media (max-width: 960px) {
  .sik-nav { display: none; }
  .sik-header .sik-btn { margin-left: 0; }
  .sik-menu { display: block; }
  .sik-header__logo { margin-left: auto; order: 4; }
  .sik-hero .sik-inner { grid-template-columns: 1fr; min-height: 0; }
  .sik-hero__text { padding-top: 8px; }
  .sik-hero__text { padding-bottom: 0; }
  .sik-hero__bild { position: relative; left: auto; height: 520px; margin: 0 -24px; }
  .sik-hero__kiez { top: -30px; }
  .sik-hero__paar { width: 62%; }
  .sik-intro .sik-inner { grid-template-columns: 1fr; gap: 32px; }
  .sik-faq .sik-inner { grid-template-columns: 1fr; gap: 16px; }
  .sik-community__qr { display: none; }
  .sik-community__blumen img { left: calc(var(--lm) * 1%); top: calc(var(--tm) * 1%); width: calc(var(--wm) * 1px); transform: translate(-50%, 0) rotate(calc(var(--dm) * 1deg)); }
  .sik-community__blumen .nur-handy { display: block; }
  .sik-community__blumen .nur-computer { display: none; }
  .sik-preise .sik-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sik-preise__text { grid-column: 1 / -1; order: -1; padding-left: 0; }
  .sik-preisstapel { gap: 16px; }
  .sik-community .sik-inner { grid-template-columns: 1fr; }
  .sik-community { padding: 72px 0; }
  .sik-tage, .sik-levels, .sik-lehrer { grid-template-columns: 1fr; }
  .sik-orte .sik-inner { grid-template-columns: 1fr; min-height: 0; }
  .sik-orte__paar { position: static; transform: none; justify-self: end; width: 330px; height: 272px; object-fit: cover; object-position: top; margin: 0 0 -48px; }
  .sik-footer .sik-inner { grid-template-columns: 1fr; }
  .sik-kontakt { padding-bottom: 0; }
  .sik-reihe { position: static; display: flex; justify-content: center; align-items: flex-end; height: 150px; margin-top: -14px; overflow: hidden; }
  .sik-reihe img, .sik-reihe img:nth-child(n) { position: relative; left: auto; right: auto; width: 128px; margin: 0 -17px; display: block; }
  .sik-reihe img:nth-child(n+5) { display: none; }
}

/* Handy */
@media (max-width: 560px) {
  .sik-inner { padding: 0 16px; }
  .sik-header .sik-inner { height: 64px; gap: 10px; }
  .sik-header__logo img { height: 38px; }
  .sik-hero .sik-inner { padding-top: 22px; }
  .sik-hero__text p { font-size: 18px; }
  .sik-hero__logo { width: 62%; } /* auf dem Handy kleiner, mit Luft oben und links */
  /* Handy: Reihenfolge Logo, Bild, dann Opening-Schild, Text und Buttons auf Blau unter dem Bild.
     Das Bild rückt dafür hoch hinter das Logo. */
  .sik-hero .sik-inner { padding-bottom: 36px; row-gap: 0; }
  .sik-hero__text { display: contents; }
  .sik-hero__logo { order: 1; position: relative; z-index: 2; margin: 0; top: -2px; } /* Logo bündig mit dem Seitenrand, Bild bleibt */
  .sik-hero__bild { order: 2; height: 320px; margin: -70px -16px 0; overflow: hidden; z-index: auto; } /* kein eigener Stapel, damit das Tanzpaar über dem Logo liegen kann */
  /* Turm genau in der Lücke zwischen M und K des Logos: Lücke bei 28,3 % der Logobreite (62 % der Inhaltsbreite, Logo ab 16 px), Turm bei 17,8 % der Bildbreite (Bild seit 2026-10-20: kiez-neu-v3) */
  .sik-hero__kiez { top: -15px !important; left: calc(10.4px - 0.25vw) !important; height: auto !important; object-fit: initial; }
  .sik-badge { order: 3; justify-self: start; margin: 24px 0 18px; position: relative; z-index: 2; }
  .sik-hero__text p { order: 4; position: relative; z-index: 2; }
  .sik-hero__paar { width: 106%; transform: translate(8%, 36%); z-index: 3; } /* doppelt so groß wie vorher (62 %), liegt über dem Logo */
  .sik-hero__buttons { order: 5; position: relative; z-index: 2; }
  .sik-intro { padding: 64px 0; }
  .sik-plan, .sik-orte, .sik-team, .sik-faq { padding: 48px 0; }
  .sik-plan { padding-bottom: 190px; }
  /* Handy: Kurszeilen kompakter, damit Kurs und Level in eine Zeile passen (z. B. Dance Acrobatics) */
  .sik-tag ul { padding: 2px 12px 8px; }
  .sik-tag__ort { padding: 8px 12px 9px; font-size: 13px; }
  .sik-preise .sik-inner { grid-template-columns: 1fr; gap: 12px; }
  .sik-preisstapel { gap: 12px; }
  .sik-preis--gross .sik-preis__betrag { font-size: 52px; }
  /* Skyline-Ausschnitt fürs Handy: Türme und Torhaus im Bild, der haltende Zug ragt rechts nur leicht herein
     (rechter Bildrand bei 1120 von 2000 px; 1100 px breit = Faktor 0,55) */
  .sik-plan__skyline { left: calc(100% - 616px); transform: translateY(24%); }
  .sik-preis { padding: 14px 16px; font-size: 14px; }
  .sik-preis__betrag { font-size: 46px; }
  .sik-tag li { gap: 8px; font-size: 15px; }
  .sik-kurs { gap: 4px 5px; }
  .sik-tag .sik-level { font-size: 11.5px; padding: 1px 7px; }
}

/* Styles (seit 2026-10-21): vier Karten zwischen Team und Preisen */
.sik-styles { padding: 64px 0 72px; border-top: 2px solid var(--sik-dunkel); overflow-x: clip; } /* Blüten am Kartenrand erzeugen keinen seitlichen Scroll */
.sik-styles__kopf { margin-bottom: 36px; }
.sik-stile { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sik-stil {
  position: relative; background: var(--sik-weiss); border: 2px solid var(--sik-dunkel); border-radius: var(--sik-radius);
  box-shadow: 5px 5px 0 var(--sik-dunkel); padding: 22px 22px 20px; font-size: 15px;
  /* gemeinsames Raster (subgrid): Titel, Schlagworte, Text und Schlusszeile stehen in allen Karten einer Reihe auf gleicher Höhe */
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
}
.sik-stil--orange { background: var(--sik-orange); }
.sik-stil--blau { background: var(--sik-blau); }
.sik-stil--gold { background: var(--sik-gold); }
.sik-stil--rot { background: var(--sik-rot); color: var(--sik-weiss); }
.sik-stil--rot .sik-stil__fuer { border-top-color: var(--sik-weiss); }
.sik-stil h3 { font-family: var(--sik-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 25px; line-height: 1.05; margin: 0 0 6px; white-space: nowrap; } /* „Dance Acrobatics“ bleibt einzeilig */
.sik-stil p { margin: 0 0 10px; }
.sik-stil__tags { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sik-stil__fuer { margin: 0 !important; align-self: start; /* gestrichelte Linien in allen Karten einer Reihe auf gleicher Höhe */ padding-top: 10px; border-top: 1.5px dashed var(--sik-dunkel); font-weight: 600; }

/* Community: WhatsApp-Button im typischen WhatsApp-Grün (dunkle Schrift für ausreichenden Kontrast), Instagram daneben */
.sik-community__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.sik-btn--whatsapp { background: #25D366; color: var(--sik-dunkel) !important; }

/* Fünf Karten: große Bildschirme fünf Spalten, Laptop drei, Tablet zwei, Handy eine */
@media (max-width: 1239px) {
  .sik-stile { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .sik-stil h3 { font-size: 28px; }
}
@media (max-width: 1100px) {
  .sik-stile { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (max-width: 560px) {
  .sik-styles { padding: 48px 0 56px; }
  .sik-stile { grid-template-columns: 1fr; row-gap: 36px; }
}

/* Community: Margerite links unter dem WhatsApp-Button, auf ihrer alten Höhe (seit 2026-10-21).
   Am Inhaltsrand ausgerichtet statt prozentual, damit sie auch auf breiten Bildschirmen am Button bleibt. */
/* Schmale Laptop-Fenster: links vom Button ist kein Platz, dort bleibt sie an ihrer alten Stelle */
@media (min-width: 961px) and (max-width: 1239px) {
  .sik-community__blumen .b-margerite { left: 37%; top: 75%; }
}
@media (min-width: 1240px) {
  .sik-community__blumen .b-margerite { left: calc(50% - 665px); top: 75%; } /* Höhe wie vorher, ragt unten in die FAQ */
}