/* ====== Design-Variablen ====== */
	/* === Zentrale Verwaltunge der Farben der einzelnen HTML Elemente === */
	:root {
      --bg: #dda552;        /* 0b1220 */
      --text: #000000;       /* 0f172a Slate-900 */
      --muted: #000000;      /* #475569 Slate-600 */
      --card: #f8fafc;       /* alt: f8fafc Slate-50 */
      --accent: #0ea5e9;     /* Sky-500 */
      --accent-strong: #0284c7; /* Sky-600 */
      --border: #e2e8f0;     /* Slate-200 */
      --shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
      --radius: 14px;
      --container: 1100px;
    }
/* === Zentrale Verwaltunge der Farben der einzelnen HTML Elemente --> DARKMODE === */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #dda552; /*0b1220*/
        --text: #000000; /* e5e7eb */
        --muted: #000000;
        --card: #f8fafc;
        --accent: #38bdf8;
        --accent-strong: #0ea5e9;
        --border: #1f2937;
        --shadow: 0 2px 10px rgba(0,0,0,0.35);
      }
    }

    /* ====== Global ====== */
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height: 1.6;
    }

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

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 24px;
    }

    header {
      padding: 32px 0 12px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 700;
      letter-spacing: 0.2px;
      font-size: clamp(26px, 2.8vw, 28px);
    }

    .brand .logo {
      width: 150px;
      height: 150px;
      flex: 0 0 150px;
      border-radius: 12px;
	  background-image: url('FFG_Logo.png');
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat; 
      /* === background: linear-gradient(135deg, var(--accent), var(--accent-strong)); ===*/
      box-shadow: var(--shadow);
    }

    .hero {
      margin: 20px 0 26px;
      padding: clamp(18px, 2.2vw, 28px);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4.2vw, 42px);
      line-height: 1.2;
      letter-spacing: -0.3px;
    }

    .hero p {
      margin: 0;
      color: var(--muted);
      font-size: clamp(15px, 1.6vw, 18px);
    }

    .content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 28px;
    }

    .card {
      padding: clamp(16px, 2vw, 22px);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .card h2 {
      margin: 0 0 8px;
      font-size: clamp(20px, 2.6vw, 24px);
    }

    .card p {
      margin: 0;
      color: var(--muted);
    }

    /* ====== Footer mit quadratischen Buttons ====== */
    footer {
      margin: 36px 0 12px;
    }

    .link-grid {
      display: grid;
	  /*flex-wrap: wrap;*/
      grid-template-columns: repeat(auto-fit, minmax(130px,1fr))   /*(3, 1fr)*/;
      gap: 14px;
    }

    @media (max-width: 720px) {
      .link-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px,1fr)) /*repeat(3, 1fr)*/;
      }
    }

    @media (max-width: 520px) {
      .link-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px,1fr)) /*1fr 1fr 1fr*/ ; /* Bleibt 3 Spalten, aber skaliert */
      }
    }

    .link-tile {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 2 / 1;                  /* Rechteck */
      border: 1px solid var(--border);
      border-radius: 16px;
      background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--card) 70%, transparent));
      color: var(--text);
      box-shadow: var(--shadow);
      transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
      overflow: clip;
      isolation: isolate; /* für Pseudo-Elemente */
    }

    /* Dezente Akzentkante */
    .link-tile::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 16px;
      pointer-events: none;
      background: linear-gradient(135deg, transparent 45%, color-mix(in oklab, var(--accent) 22%, transparent) 100%);
      mix-blend-mode: overlay;
      opacity: 0.6;
      z-index: 0;
    }

    .link-tile span {
      position: relative;
      z-index: 1;
      font-weight: 600;
      letter-spacing: 0.2px;
      text-align: center;
      font-size: clamp(14px, 1.6vw, 18px);
    }

    .link-tile:focus-visible,
    .link-tile:hover {
      transform: translateY(-2px);
      border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
      outline: none;
    }

    .link-tile:active {
      transform: translateY(0);
    }

    /* Fokus-Ring für Tastatur-Nutzung */
    .link-tile:focus-visible {
      box-shadow:
        0 0 0 2px color-mix(in oklab, var(--bg) 70%, transparent),
        0 0 0 6px color-mix(in oklab, var(--accent) 35%, transparent);
    }

    /* Kleiner rechtlicher/Meta-Bereich */
    .subtle {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }
	
	.btn {
	  display: inline-block;
	  padding: 12px 20px;
	  background: var(--accent);
	  color: #fff;
	  font-weight: 600;
	  border-radius: 8px;
	  text-decoration: none;
	  transition: background 0.2s ease;
	}

	.btn:hover {
	  background: var(--accent-strong);
	}

  	.btn-special {
	  display: inline-block;
	  padding: 30px 100px;
	  background: #dda552; /* var(--card);*/
	  color: #fff;
	  font-weight: 600;
    border-color: #1f2937;
	  border-radius: 8px;
	  text-decoration: none;
	  transition: background 0.2s ease;
	}

	.btn-special:hover {
	  background: var(--accent-strong);
	}

    /* Container für alle Kalender */
    .calendar-wrapper {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    /* Jeder einzelne Kalender */
    .calendar {
        flex: 1;
    }

    /* Iframe selbst */
    .calendar iframe {
        width: 100%;
        height: 300px; /* anpassbar */
        border: 0;
    }

    /* --- Responsive für Smartphones --- */
    @media (max-width: 768px) {
        .calendar-wrapper {
            flex-direction: column;
        }

        .calendar iframe {
            height: 200px; /* etwas kleiner für Handy */
        }
    }

    /* -----Responsive Image für autom. Anpassung an Bildschirmgröße */
    .responsive-image {
      max-width: 100%;
      height: auto;
      display: block; 
    }