/* Gestaltung zug-freimaurer.ch
   Nachbau der bestehenden Wix-Optik. Farben und Masse stammen aus der
   ausgelieferten Seite, Stand 11.09.2026. */

:root {
  --blau: #3d9be9;          /* Marken- und Ueberschriftenblau */
  --blau-link: #00adef;     /* Navigation, nicht aktiv */
  --rot: #d41317;           /* Navigation, aktive Seite */
  --grau: #f2f2f2;          /* Kaesten und Kacheln */
  --linie: #dcdcdc;
  --tinte: #000000;
  --weiss: #ffffff;
  --inhalt: 1140px;
  --schrift-titel: Spinnaker, "Trebuchet MS", "Segoe UI", sans-serif;
  --schrift-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Spinnaker wird von scripts/fetch-assets.sh nach assets/fonts/ geladen.
   Fehlt die Datei, greift die Ersatzschrift oben. */
@font-face {
  font-family: Spinnaker;
  src: url("/assets/fonts/spinnaker.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; }

a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  color: var(--blau);
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.75rem; }
.inhalt h2 { font-size: 1.375rem; }

p { margin: 0 0 1.2em; }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--blau);
  font-style: italic;
}

.sprungmarke { position: absolute; left: -999px; background: var(--blau); color: #fff; padding: 0.6rem 1rem; }
.sprungmarke:focus { left: 0.5rem; top: 0.5rem; z-index: 30; }

/* Nur fuer Lesegeraete, nicht fuer das Auge */
.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Kopf */
.kopf { background: var(--weiss); position: sticky; top: 0; z-index: 20; }
.kopf-innen {
  display: flex; align-items: center; gap: 1.25rem;
  max-width: var(--inhalt); margin-inline: auto; padding: 1rem 1.25rem 0.5rem;
}
.kopf-innen img { display: block; }
.obedienz img { width: 113px; }
.logenlogo img { width: 113px; }
.logenzeile {
  flex: 1; margin: 0; text-align: right;
  font-family: var(--schrift-titel); color: var(--blau);
  font-size: clamp(1.5rem, 0.8rem + 2.2vw, 2.625rem); line-height: 1.15;
}
.logenzeile span { display: block; }
.flagge { width: 85px; }

/* Navigation */
.hauptnavigation ul {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; list-style: none;
  margin: 0 auto; padding: 0.4rem 1.25rem 0.9rem; max-width: var(--inhalt);
}
.hauptnavigation a {
  text-decoration: none; color: var(--blau-link); font-size: 1rem; font-weight: 300;
}
.hauptnavigation a:hover { color: var(--blau); text-decoration: none; }
.hauptnavigation a.aktiv { color: var(--rot); }

/* Startseite */
.hero { position: relative; max-width: var(--inhalt); margin: 0 auto 3rem; padding-inline: 1.25rem; }
.hero-bild {
  min-height: clamp(16rem, 40vw, 30rem);
  background-color: #6b5a3e; background-size: cover; background-position: center;
}
.hero-kasten {
  background: var(--grau); padding: 2.5rem 2.5rem 2rem;
  max-width: 42rem; margin: -7rem 1.25rem 0 auto; position: relative;
}
.hero-kasten h1 { margin-bottom: 0.5em; }
.hero-text p { font-size: 1.25rem; line-height: 1.7; }
.hero-knopf { margin: 0; text-align: right; }

.schaltflaeche {
  display: inline-block; background: var(--blau); color: #fff;
  padding: 0.9rem 1.75rem; text-decoration: none; font-size: 17px;
}
.schaltflaeche:hover { color: #fff; text-decoration: none; }

/* Blaue Baender */
.band { background: var(--blau); color: #fff; padding: 3.5rem 1.25rem; }
.band > * { max-width: var(--inhalt); margin-inline: auto; }
.band h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }

.angebote { padding-bottom: 4rem; }
.kachelgitter {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(3, 1fr);
}
.fuss { margin-top: 4rem; }
.kachel {
  display: flex; flex-direction: column; background: var(--grau);
  border-right: 1px solid var(--blau); border-bottom: 1px solid var(--blau);
  padding: 1.75rem 1.5rem 1.25rem; text-decoration: none; color: var(--tinte);
}
.kachel:hover { text-decoration: none; }
.kachel h3 { margin-bottom: 0.5em; }
.kachel p { flex: 1; font-size: 1.125rem; }
.kachel .zeichen { width: 62px; margin: 0.5rem auto 0; }

/* Inhaltsseiten */
.seitenkopf { padding: 3.5rem 1.25rem; }
.seitenkopf h1 { color: #fff; margin: 0 auto; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.inhalt {
  max-width: var(--inhalt); margin-inline: auto; padding: 3.5rem 1.25rem 4rem;
}
.inhalt > p:first-child { margin-bottom: 2.5rem; }

.spaltengitter {
  display: grid; gap: 2.5rem 3rem; text-align: center;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.spaltengitter h2 { margin-bottom: 1em; }
.spaltengitter p:last-child { margin-bottom: 0; }

.fliesstext { max-width: 52rem; }
.fliesstext h2 { margin-top: 2.5rem; }

/* Fragen und Antworten */
.fragenliste { display: grid; gap: 3rem; }
.frage {
  display: grid; gap: 1rem 3rem; align-items: start;
  grid-template-columns: 1fr 1fr;
}
.frage h2 { margin: 0; text-align: right; }
.frage .antwort { text-align: center; }
.frage .antwort p:last-child { margin-bottom: 0; }

/* Fuss */
.fuss .band { padding-bottom: 2rem; }
.fuss h2 { text-align: center; }
.fuss .schaltflaeche { background: transparent; border: 1px solid #fff; }
.fuss .schaltflaeche:hover { background: #fff; color: var(--blau); }

/* Kontaktformular im Fuss */
.kontaktformular {
  display: grid; gap: 1.5rem 3rem;
  grid-template-columns: 1fr 1fr;
  margin: 2.5rem auto 3rem;
}
.kontaktformular .feld { margin: 0; }
.kontaktformular .feld-breit { grid-column: 1 / -1; }
.kontaktformular input,
.kontaktformular textarea {
  width: 100%; background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid #fff; border-radius: 0;
  font-family: inherit; font-size: 1.125rem; font-weight: 300;
  padding: 0.5rem 0.2rem;
}
.kontaktformular textarea {
  line-height: 1.6; resize: vertical; min-height: 7rem;
}
.kontaktformular input::placeholder,
.kontaktformular textarea::placeholder { color: #fff; opacity: 0.95; }
.kontaktformular input:focus,
.kontaktformular textarea:focus {
  outline: 2px solid #fff; outline-offset: 3px;
}
.kontaktformular input:invalid,
.kontaktformular textarea:invalid { box-shadow: none; }
/* Die Falle fuer Maschinen. Nicht display:none, das durchschauen sie.
   Dieselbe Regel steht zusaetzlich als style-Attribut im Formular,
   damit das Feld auch dann unsichtbar bleibt, wenn dieses Stilblatt
   nicht laedt. Sonst fuellt es ein echter Besucher aus und bekommt eine
   Bestaetigung, obwohl seine Nachricht verworfen wird. */
.fallenfeld { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; }
.absenden { grid-column: 1 / -1; margin: 0.5rem 0 0; text-align: center; }
.absenden button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-family: var(--schrift-titel); font-size: 1.5rem; padding: 0.4rem 1.5rem;
}
.absenden button:hover { text-decoration: underline; }
.absenden button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.fussspalten {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  font-size: 1rem;
}
.fussspalten h3 { color: #fff; font-family: var(--schrift-text); font-size: 1rem; font-weight: 400; margin-bottom: 0.6em; }
.fussspalten p { margin-bottom: 0.8em; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--grau); }
.grade { line-height: 1.9; }
.kleingedrucktes {
  margin: 2.5rem auto 0; padding-top: 1rem; font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.35);
}

@media (max-width: 62rem) {
  .kopf-innen .flagge { display: none; }
  .kachelgitter { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
  body { font-size: 17px; }
  .frage { grid-template-columns: 1fr; gap: 0.5rem; }
  .frage h2 { text-align: left; }
  .kopf-innen { flex-wrap: wrap; gap: 0.75rem; }
  .obedienz img, .logenlogo img { width: 74px; }
  .logenzeile { flex-basis: 100%; text-align: left; }
  .hauptnavigation ul { gap: 0.2rem 1rem; font-size: 0.95rem; }
  .hero-kasten { margin: -2.5rem 0 0; padding: 1.75rem 1.5rem; }
  .hero-knopf { text-align: left; }
  .kachelgitter { grid-template-columns: 1fr; }
  .kontaktformular { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media print {
  .hauptnavigation, .sprungmarke { display: none; }
}