/* ============================================================ handball-cloud.tourneyflow.de – Uebersetzung auf die Grundschicht ============================================================ Laedt NACH tf-base.css und nach style.css. WAS HIER ABSICHTLICH NICHT ANGEFASST WIRD Dieser Auftritt ist keine Werbeseite, sondern die Anwendung. Drei Flaechenarten bleiben unberuehrt: .bd-* die Anzeigetafel. Ihre Farben, Groessen und Schriften stellt der Veranstalter selbst ein (board_config), und sie laeuft auf einem Beamer in einer hellen Halle. Was dort lesbar ist, hat jemand fuer seine Halle entschieden – nicht ich. .bf-* das Bedienfeld am Kampfgericht. Dort wird waehrend eines laufenden Spiels unter Zeitdruck getippt. Wer diese Knoepfe umfaerbt oder verschiebt, kostet in der 58. Minute Sekunden. .bc-* der Baukasten fuer die Anzeigetafel. Er zeigt eine Vorschau der Tafel; jede Gestaltung von aussen wuerde die Vorschau verfaelschen. Gestaltet werden die Flaechen davor und daneben: Startseite, Anmeldung, Uebersicht, Lizenzkauf, Rechtstexte und die gemeinsame Huelle. ============================================================ */ /* ---------- Gemeinsame Huelle ---------- */ .topbar{ background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:0 1px 0 rgba(16,24,40,.06); border-bottom:0; } .brand{min-height:44px;min-width:44px;justify-content:center} /* min-width nicht vergessen: In der Rechtstext-Leiste steht "AGB" und war 42 Pixel breit. 44 gilt in beide Richtungen. */ .topbar nav a{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px; padding-inline:.55rem;border-radius:8px; } .topbar nav a:hover{background:var(--brand-soft,rgba(79,70,229,.08))} /* Die gerade geoeffnete Seite in der Rechtstext-Leiste. Sie war per Inline-Stil weiss auf weisser Leiste ausgezeichnet und damit unsichtbar. */ .topbar nav a.ist-hier{ color:var(--brand,#4f46e5);font-weight:800; background:var(--brand-soft,rgba(79,70,229,.08)); } /* Querformat auf dem Handy (844 x 390): Die fixierte Kopfleiste nahm 124 Pixel der 390 Pixel Hoehe weg. Hier scrollt sie mit dem Inhalt mit, und sie ist enger. Hochkant und am Desktop bleibt sie fixiert (style.css). Ohne !important: diese Datei wird nach style.css geladen. */ @media (orientation: landscape) and (max-height: 500px){ .topbar{position:static;padding:.35rem .8rem} .topbar nav{gap:.25rem .7rem} /* Die Marke schrumpft nicht: sonst schiebt die Zentrierung das Logo ueber den linken Rand. */ .topbar .brand{flex-shrink:0} } /* ---------- Kopfbereich der Startseite ---------- */ .hero-section{ position:relative;isolation:isolate;overflow:clip; background:var(--tf-dunkel);color:#e7ecf7; } .hero-section::before{ content:'';position:absolute;inset:-30% -10%;z-index:-2; background: radial-gradient(38% 46% at 22% 28%, rgba(99,102,241,.34), transparent 68%), radial-gradient(34% 40% at 78% 22%, rgba(124,58,237,.28), transparent 70%), radial-gradient(46% 52% at 62% 82%, rgba(37,99,235,.22), transparent 72%); filter:blur(14px); animation:tf-schleier 34s var(--tf-weich) infinite alternate; } .hero-section::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), var(--tf-rauschen); background-size:64px 64px, 64px 64px, 140px 140px; -webkit-mask-image:radial-gradient(80% 72% at 46% 38%, #000 25%, transparent 84%); mask-image:radial-gradient(80% 72% at 46% 38%, #000 25%, transparent 84%); } .hero-section .hero{position:relative;z-index:1} .hero-copy h1{color:#fff;letter-spacing:-.04em;line-height:1.04;text-wrap:balance} .hero-copy h1 .grad{ background:linear-gradient(var(--tf-winkel), #a5b4fc 0%, #c4b5fd 38%, #7dd3fc 72%, #a5b4fc 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:tf-drehen 18s linear infinite; } @keyframes tf-drehen{ to{--tf-winkel:360deg} } /* Heller als der erste Griff: Auf der hellsten Stelle des Farbschleiers braucht der Absatz Luft nach unten, sonst faellt er unter 4,5:1. */ .hero-section .lead{color:#bcc6de;max-width:46ch;text-wrap:pretty} .hero-section .hero-checks{color:#a7b3cd} .hero-section .btn-ghost{ background:var(--tf-glas-dunkel);color:#dfe6f5; border-color:rgba(255,255,255,.18); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .hero-section .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff} .hero-section .btn{ box-shadow:0 8px 22px rgba(79,70,229,.42), var(--tf-kante-dunkel); transition:transform .28s var(--tf-sanft), box-shadow .28s var(--tf-sanft); } .hero-section .btn:hover{transform:translateY(-3px)} .hero-section :focus-visible{ outline:3px solid #fff;outline-offset:3px; box-shadow:0 0 0 6px rgba(10,15,30,.65);border-radius:8px; } /* Der Mock-Ausschnitt im Kopfbereich zeigt eine kleine Tafel. Er bekommt Tiefe, aber KEINE neuen Farben – er soll aussehen wie das Produkt. */ .hero-section .mock-row{box-shadow:var(--tf-t3)} /* ---------- Abschnitte und Karten ---------- */ .section-head h2{letter-spacing:-.032em;text-wrap:balance} .section-sub{text-wrap:pretty;max-width:62ch;margin-inline:auto} .kicker{letter-spacing:.12em} /* Alle Kartenarten auf dieselbe Tiefenleiter. Vorher hatte jede ihren eigenen Schatten und sie lagen optisch auf verschiedenen Ebenen, obwohl sie gleichrangig sind. */ .card,.feature,.step,.price-card{ background:linear-gradient(180deg,#fff 0%,#fcfdff 100%); box-shadow:var(--tf-t2), var(--tf-kante); transition:transform .5s var(--tf-sanft), box-shadow .5s var(--tf-sanft); } @media(hover:hover){ .feature:hover,.step:hover,.price-card:hover{ transform:translateY(-6px);box-shadow:var(--tf-t4), var(--tf-kante); } } .feature:focus-within,.step:focus-within,.price-card:focus-within{ transform:translateY(-6px);box-shadow:var(--tf-t4), var(--tf-kante); } /* Die Karten der Uebersicht sind Arbeitsflaechen, keine Werbung – sie bekommen Tiefe, aber kein Abheben beim Zeigen. Sonst wackelt eine Liste mit zwanzig Turnieren unter dem Mauszeiger. */ .card:hover{transform:none} .sport-chip{ box-shadow:var(--tf-t1), var(--tf-kante); transition:transform .3s var(--tf-sanft), box-shadow .3s var(--tf-sanft); } @media(hover:hover){ .sport-chip:hover{transform:translateY(-3px);box-shadow:var(--tf-t2)} } /* ---------- Anmeldung, Registrierung, Passwort ---------- */ .auth-box .card{ box-shadow:var(--tf-t3), var(--tf-kante); } .auth-box h1{letter-spacing:-.03em} /* Die Formulare hier entscheiden ueber den Zugang zum Konto – ihre Felder sollen gross und ruhig sein. */ .auth-box input,.auth-box button{min-height:48px} /* "Passwort vergessen?" und "Noch kein Konto?" stehen als eigene Zeile unter dem Formular – gemessene 19 Pixel. Wer sein Passwort vergessen hat, kommt hier nicht weiter, wenn er den Link nicht trifft. */ .auth-box .muted a{display:inline-flex;align-items:center;min-height:44px} /* ---------- Lizenzkauf ---------- */ .buy-summary,.buy-art{ box-shadow:var(--tf-t2), var(--tf-kante); } .buy-art{transition:box-shadow .4s var(--tf-sanft), transform .4s var(--tf-sanft)} @media(hover:hover){ .buy-art:hover{box-shadow:var(--tf-t3)} } .buy-lead{max-width:62ch} /* ---------- Rechtstexte ---------- */ .legal{max-width:74ch} .legal p,.legal li{line-height:1.8;max-width:62ch;color:var(--ink-2,#374151)} .legal h2{ margin-top:2.2em;padding-top:1.2em;border-top:1px solid var(--line,#e5e9f0); letter-spacing:-.025em; } .legal h2:first-of-type{border-top:0;padding-top:0} .legal a{text-decoration:underline;text-underline-offset:2px} .legal a,.legal code,.legal td{overflow-wrap:anywhere} /* ---------- Die EINZIGE Regel, die das Bedienfeld beruehrt ---------- * * Oben steht, dass .bf-* unberuehrt bleibt. Diese Ausnahme ist begruendet, * nicht vergessen worden. * * Nachgemessen wurden alle 50 Bedienelemente des Bedienfelds bei 375 und * 1280 Pixeln. 45 halten 44 x 44. Fuenf sind zu SCHMAL – hoch genug, aber * 24 bis 40 Pixel breit: * * Ballbesitz ◀ 28 – 24 ▶ 28 * Uhr fein −1s 40 +1s 40 * * Der Grund, aus dem ich das Bedienfeld ausgeklammert hatte, trifft auf * genau diese fuenf nicht zu: Sie liegen samt und sonders in dem *
-Block "Weitere Funktionen", der STANDARDMAESSIG ZU ist. Es * sind keine Knoepfe, nach denen jemand in der 58. Minute greift – * sondern solche, die man bewusst aufklappt. Und die Reihe hat 466 Pixel * Breite bei 144 Pixeln Bedarf fuer drei Ziele. * * Die Regel macht ausschliesslich BREITER. Sie kann nichts verkleinern, * nichts umsortieren und nichts aus dem Bedienfeld herausdraengen. * Die grossen Tasten – Tore, Strafen, Start, Pause, Anpfiff – ruehrt sie * nicht an; die waren schon vorher gross genug. */ .bf-mehr-zeile .pbtn{min-width:44px} /* Und eine zweite Stelle, die nicht eingeklappt ist: die Zeilen der * Ergebnisliste unter dem Bedienfeld. Jede ist ein Link auf das jeweilige * Spiel und war 39 Pixel hoch (min-height stand auf 0). Auch das macht * nur hoeher, nichts anderes. */ .bf-erg li > a{min-height:44px} /* ---------- Tabellen ausserhalb der Anzeigetafel ---------- */ /* Spielplan- und Tabellenansichten sind breiter als ein Handy. Eigener Schiebebereich statt waagerechtem Scrollen der ganzen Seite. .bd-* und .bf-* sind ausgenommen – die bringen ihre eigene Anordnung mit und duerfen nicht umgebaut werden. */ .card > table:not([class*="bd-"]):not([class*="bf-"]), .admin-tbl, .check-tbl{ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%; } /* ---------- Fusszeile ---------- */ .foot{ background:var(--bg-dark,#0a0f1e);color:#8b96ad;position:relative; } .foot::before{ content:'';position:absolute;inset:0 0 auto;height:3px; background:var(--brand-grad,linear-gradient(135deg,#4f46e5,#7c3aed)); } .foot a{color:#c3cbdd;text-decoration:none} .foot a:hover{color:#fff} /* Die Rechtstext-Links stehen nebeneinander in einer Zeile und waren dadurch flach. Sie sind der Pflichtteil der Seite und muessen treffbar sein. */ /* min-width nicht vergessen: "AGB" war 33 Pixel breit. Die Hoehe allein genuegt nicht, die Flaeche muss in beide Richtungen reichen. */ .foot a{display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px;padding-inline:.4rem} /* ---------- Erscheinen beim Scrollen ---------- */ /* Nur auf der Startseite. In der Anwendung waere es Verzoegerung ohne Nutzen: Wer sein Turnier verwaltet, will die Liste sehen, nicht ihr Auftauchen. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .hero-section ~ .section .feature, .hero-section ~ .section .step, .hero-section ~ .section .price-card, .hero-section ~ .section .section-head{ animation:tf-auftauchen linear both; animation-timeline:view(); animation-range:entry 8% cover 26%; } } } @media (prefers-reduced-motion: reduce){ .hero-section::before,.hero-copy h1 .grad{animation:none !important} .hero-copy h1 .grad{ background:linear-gradient(100deg,#a5b4fc,#c4b5fd 45%,#7dd3fc); -webkit-background-clip:text;background-clip:text; } .feature,.step,.price-card,.section-head{ opacity:1 !important;transform:none !important;animation:none !important; } .feature:hover,.step:hover,.price-card:hover,.sport-chip:hover{transform:none} }