/* * GOLFSTUNDE Footer -- Gestaltung. Uebernommen aus * docs/klickdummies/footer-klickdummy.html (Fassung 1, K1-K14). * Farben und Groessen aus docs/design/ (Fundament + CSS-Startpaket). * * Abschirmung gegen Theme- und Oxygen-Stile wie im Header: alle Resets per * :where() auf Spezifitaet 0,1,0 (nur .gsf), damit die Bauteil-Regeln * darunter -- gleiche Spezifitaet, spaeter notiert -- gewinnen. */ .gsf{ --gsf-cta:#d81e5b; --gsf-brand-dark:#173753; --gsf-recht-dark:#102a42; --gsf-accent-teal:#58b7c4; --gsf-teal-tint:#e7f4f6; --gsf-link:#2c7a86; --gsf-text:#000000; --gsf-text-sec:#595959; --gsf-sub-dark:#aebfcd; --gsf-r-btn:10px; --gsf-f-display:'Anton',sans-serif; --gsf-f-body:'Roboto',system-ui,sans-serif; position:relative;font-family:var(--gsf-f-body);font-size:16px;line-height:1.5; color:var(--gsf-text);text-align:left; } .gsf :where(*),.gsf :where(*)::before,.gsf :where(*)::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} .gsf :where(ul,li){list-style:none;} .gsf :where(li)::before{content:none;} .gsf :where(a){text-decoration:none;box-shadow:none;} .gsf :where(p){margin:0;} .gsf :where(h2){margin:0;font-weight:400;} .gsf :where(button,input){font-family:inherit;line-height:normal;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;} .gsf :where(img){max-width:100%;height:auto;display:block;} .gsf :where(svg){max-width:none;} .gsf [hidden]{display:none !important;} .gsf :focus-visible{outline:2px solid var(--gsf-accent-teal);outline-offset:2px;} .gsf-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .gsf-honig{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;} .gsf-wrap{max-width:1200px;margin:0 auto;padding:0 20px;} .gsf-h2{font-family:var(--gsf-f-display);font-size:26px;line-height:1.2;margin-bottom:6px;} .gsf-lead{max-width:46ch;margin-bottom:14px;} /* ============================= Band 1: Abschluss ======================== */ .gsf-abschluss{background:var(--gsf-teal-tint);color:var(--gsf-text);padding:36px 0;} .gsf-abschluss .gsf-wrap{display:flex;gap:48px;align-items:flex-start;justify-content:space-between;} .gsf-abschluss .gsf-lead{color:#2c3f4f;} .gsf-news{flex:1 1 520px;} .gsf-app{flex:0 0 auto;} .gsf-form{display:block;} .gsf-zeile{display:flex;gap:10px;flex-wrap:wrap;} .gsf-feld{flex:1 1 260px;min-height:52px;padding:0 14px;font:inherit;background:#fff; border:1px solid #b9d4d9;border-radius:var(--gsf-r-btn);color:var(--gsf-text);} .gsf-feld:focus-visible{outline:2px solid var(--gsf-accent-teal);outline-offset:1px;} .gsf-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px; padding:0 22px;font:inherit;font-weight:500;color:#fff;background:var(--gsf-cta); border:0;border-radius:var(--gsf-r-btn);cursor:pointer;} .gsf-knopf:hover,.gsf-knopf:focus-visible{background:#c01950;color:#fff;} /* Datenschutz-Haekchen UEBER dem Feld (statt des langen Wortlauts): erst die Einwilligung, dann die Eingabe. Die ganze Zeile ist das Tippziel, 44 px hoch; das Kaestchen selbst 22 px, damit es auch mit unruhiger Hand zu treffen ist. */ .gsf-haken{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin-bottom:4px;padding:8px 0; font-size:15px;line-height:1.4;color:#2c3f4f;cursor:pointer;max-width:60ch;} .gsf-haken input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--gsf-cta);cursor:pointer;} .gsf-haken a{color:var(--gsf-link);text-decoration:underline;} .gsf-badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} /* Offizielle Store-Badges, beide Knoepfe gleich hoch (48 px). Gemessen am Asset: Apples Bild ist vollstaendig Knopf, Googles PNG hat oben und unten je 29 von 250 Pixeln Luft -- der Knopf macht dort nur 76,8 % der Bildhoehe aus. 48 / 0,768 = 62,5 -> 62 px Bildhoehe fuer Google. */ .gsf-badge{display:inline-flex;align-items:center;} .gsf-badge .gsf-badge-bild{width:auto;} .gsf-badge--apple .gsf-badge-bild{height:48px;} .gsf-badge--google .gsf-badge-bild{height:62px;} /* ============================== Band 2: Inhalt ========================== */ .gsf-inhalt{background:var(--gsf-brand-dark);color:#fff;padding:36px 0 30px;} .gsf-marke{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between; padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:24px;} .gsf-wortmarke{display:inline-flex;align-items:center;min-height:60px;color:#fff;} .gsf-logo{height:60px;width:auto;display:block;fill:#fff;} .gsf-claim{color:var(--gsf-sub-dark);font-size:15px;max-width:44ch;margin-top:4px;} .gsf-social{display:flex;gap:8px;} .gsf-social a{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px; border-radius:12px;color:#fff;} .gsf-social a:hover,.gsf-social a:focus-visible{background:rgba(255,255,255,.14);} .gsf-social svg{width:34px;height:34px;display:block;fill:currentColor;} .gsf-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 32px;} .gsf-spalte-titel{font-family:var(--gsf-f-display);font-size:19px;letter-spacing:.04em; text-transform:uppercase;color:#fff;margin-bottom:6px;} .gsf-klapp{display:none;} .gsf-liste a{display:block;min-height:44px;padding:10px 0;color:#fff;font-size:16px;} .gsf-liste a:hover,.gsf-liste a:focus-visible{text-decoration:underline;} /* =============================== Band 3: Recht ========================== */ .gsf-recht{background:var(--gsf-recht-dark);color:#fff;padding:18px 0 22px;} .gsf-recht .gsf-wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:center;text-align:center;} .gsf-rechtsliste{display:flex;flex-wrap:wrap;gap:4px 26px;justify-content:center;} .gsf-recht a,.gsf-consent a,.gsf-consent button{display:inline-flex;align-items:center;min-height:44px; color:#fff;font-size:15px;} .gsf-recht a:hover,.gsf-recht a:focus-visible,.gsf-consent a:hover,.gsf-consent button:hover{text-decoration:underline;} /* Borlabs setzt seinen Inhalt selbst hinein -- die Huelle nur ausrichten. */ .gsf-consent{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:15px;cursor:pointer;} .gsf-consent *{color:inherit;font:inherit;background:none;border:0;padding:0;} .gsf-copy{width:100%;text-align:center;color:var(--gsf-sub-dark);font-size:14px;padding-top:4px;} .gsf--kasse .gsf-recht{background:var(--gsf-brand-dark);} /* ========================= Handy: Spalten als Akkordeon ================= */ @media (max-width:767px){ .gsf-abschluss{padding:28px 0;} .gsf-abschluss .gsf-wrap{flex-direction:column;gap:26px;} /* flex-basis wirkt im Spaltenfluss auf die HOEHE -- ohne das Zuruecksetzen ist Band 1 rund 250 px zu hoch (gemessen, Klickdummy K14). */ .gsf-news,.gsf-app{flex:0 0 auto;width:100%;} .gsf-h2{font-size:22px;} .gsf-lead{margin-bottom:12px;} .gsf-app .gsf-lead{display:none;} .gsf-zeile .gsf-feld,.gsf-zeile .gsf-knopf{flex:1 1 100%;width:100%;} .gsf-logo{height:48px;} .gsf-inhalt{padding:28px 0 24px;} .gsf-marke{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:18px;margin-bottom:18px;} .gsf-claim{font-size:14px;} .gsf-spalten{grid-template-columns:1fr;gap:0;} .gsf-spalte{border-top:1px solid rgba(255,255,255,.18);} .gsf-spalte:last-child{border-bottom:1px solid rgba(255,255,255,.18);} .gsf-spalte-titel{margin:0;} .gsf-titel-text{display:none;} .gsf-klapp{display:flex;width:100%;align-items:center;justify-content:space-between; min-height:56px;padding:0;background:none;border:0;cursor:pointer;text-align:left; font:inherit;font-family:var(--gsf-f-display);font-size:19px;letter-spacing:.04em; text-transform:uppercase;color:#fff;} .gsf-pfeil{width:0;height:0;flex:none;margin-left:12px; border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff; transition:transform .2s ease;} .gsf-klapp[aria-expanded="true"] .gsf-pfeil{transform:rotate(180deg);} /* Zugeklappt wird erst, wenn das Skript da ist (Klasse am