@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap"); /* ========================================================================== SOCRATO – Rechner & Downloads Eine einzige Datei. Kein Plugin, kein jQuery, keine externen Skripte. EINBAU IN WORDPRESS 1. Alle Bilder (Karten) und MP3s in die Mediathek von ruedigerschache.de laden. 2. Unten im Skript FLAT auf true setzen. 3. Diesen gesamten Inhalt (ohne //) in einen "Custom HTML"-Block der Unterseite einfügen. ========================================================================== */ :root{ --bg:#0b0a09; --bg-soft:#14110f; --line:#2c2520; --gold:#c9a227; --gold-soft:#8a7332; --red:#a8231d; --ink:#e8e2d8; --ink-dim:#a39a8c; --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } .socrato{ /* Bricht aus der schmalen Spalte der Unterseiten-Vorlage aus, ohne 100vw zu benutzen - so entsteht nie ein waagerechter Scrollbalken. */ width:auto; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.6; padding-block:56px; padding-left:20px; padding-right:20px; } .socrato *{box-sizing:border-box} .sc-wrap{max-width:780px;margin:0 auto} /* --- Kopf ---------------------------------------------------------------- */ .sc-kicker{ font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase; color:var(--gold-soft);text-align:center;margin:0 0 18px; } .sc-title{ font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,3rem); letter-spacing:.14em;text-transform:uppercase;color:var(--red); text-align:center;margin:0 0 22px; } .sc-rule{display:block;margin:0 auto 30px;width:96px;height:1px;border:0; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)} .sc-lead{ font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--ink-dim); text-align:center;margin:0 auto 8px;max-width:52ch; } .sc-lead-sub{text-align:center;color:var(--ink-dim);font-size:.94rem;margin:0 auto 40px;max-width:56ch} /* --- Geburtsdatum -------------------------------------------------------- */ .sc-panel{ background:var(--bg-soft);border:1px solid var(--line);border-radius:3px; padding:28px 22px;margin-bottom:34px; } .sc-panel-label{ font-family:var(--serif);font-size:1.25rem;text-align:center;margin:0 0 18px;color:var(--ink); } .sc-dob{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .sc-dob input{ width:76px;padding:11px 8px;text-align:center;font-family:var(--sans);font-size:1rem; color:var(--ink);background:#0b0a09;border:1px solid var(--line);border-radius:2px; -moz-appearance:textfield; } .sc-dob input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} .sc-dob input::-webkit-outer-spin-button,.sc-dob input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sc-dob input[name=y]{width:104px} .sc-hint{text-align:center;font-size:.82rem;color:var(--ink-dim);margin:14px 0 0;min-height:1.2em} .sc-hint.is-error{color:#d8756e} /* --- Reiter -------------------------------------------------------------- */ .sc-tabs{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin-bottom:0} .sc-tab{ flex:1 1 auto;min-width:130px;padding:13px 10px;cursor:pointer; background:var(--bg-soft);border:1px solid var(--line);border-bottom:none; color:var(--ink-dim);font-family:var(--sans);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;transition:color .2s,background .2s; } .sc-tab:hover{color:var(--ink)} .sc-tab[aria-selected="true"]{background:#1c1713;color:var(--gold);border-color:var(--gold-soft)} /* --- Ergebnis ------------------------------------------------------------ */ .sc-result{border:1px solid var(--line);background:#1c1713;padding:34px 22px 30px;text-align:center} .sc-motto{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-dim);margin:0 0 26px} .sc-empty{color:var(--ink-dim);font-size:.94rem;margin:12px 0} .sc-number{ font-family:var(--serif);font-size:clamp(3.4rem,13vw,5.4rem);line-height:1; color:var(--gold);margin:0;font-weight:400; } .sc-name{ font-family:var(--serif);font-size:1.5rem;letter-spacing:.1em;margin:6px 0 0;color:var(--ink); } .sc-role{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:10px 0 0} .sc-card{margin:26px auto 0;max-width:290px} .sc-card img{width:100%;height:auto;display:block;border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,.65)} .sc-audio{margin:26px auto 0;max-width:420px} .sc-audio audio{width:100%;filter:sepia(.35) saturate(.7) hue-rotate(3deg)} .sc-audio-note{font-size:.78rem;color:var(--ink-dim);margin:8px 0 0} /* --- Nachbarwerte (gestern/heute/morgen etc.) ---------------------------- */ .sc-neighbours{ display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:30px 0 0; padding-top:24px;border-top:1px solid var(--line); } .sc-nb{min-width:92px} .sc-nb-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .sc-nb-val{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin-top:2px} .sc-nb-name{font-size:.78rem;color:var(--gold-soft)} .sc-nb.is-now .sc-nb-val{color:var(--gold)} /* --- Downloads ----------------------------------------------------------- */ .sc-section-title{ font-family:var(--serif);font-size:1.9rem;letter-spacing:.12em;text-transform:uppercase; color:var(--red);text-align:center;margin:64px 0 8px; } .sc-dl-group{margin-top:34px} .sc-dl-group h3{ font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-soft);margin:0 0 14px;font-weight:500; } .sc-dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .sc-dl-list li{border-bottom:1px solid var(--line)} .sc-dl-list a{ display:flex;align-items:center;gap:14px;padding:15px 4px; color:var(--ink);text-decoration:none;transition:color .2s,padding .2s; } .sc-dl-list a:hover{color:var(--gold);padding-left:10px} .sc-dl-ico{flex:none;width:22px;color:var(--gold-soft)} .sc-dl-meta{margin-left:auto;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)} .sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .sc-grid a{display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden; background:#0b0a09;transition:border-color .2s} .sc-grid a:hover{border-color:var(--gold-soft)} .sc-grid img{width:100%;height:auto;display:block} .sc-grid span{display:block;padding:8px 10px;font-size:.74rem;color:var(--ink-dim);text-align:center} .sc-foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line); text-align:center;font-size:.82rem;color:var(--ink-dim)} .sc-foot a{color:var(--gold-soft)} @media (max-width:520px){ .sc-tab{min-width:calc(50% - 2px);font-size:.68rem;letter-spacing:.1em} .sc-neighbours{gap:8px} .sc-nb{min-width:76px} }