/* Easy Analog — Website * * Derselbe Look wie die App: schwarzer Film als Grund, Perforation an den * Rändern, Schreibmaschinenschrift. * * BEWUSST OHNE externe Ressourcen. Keine Google Fonts, kein CDN, kein * Analysewerkzeug, keine Cookies. Jede eingebundene Fremdadresse würde die * IP-Adresse der Besucher dorthin übertragen und damit eine Einwilligung * nötig machen (siehe LG München I, 3 O 17493/20 zu Google Fonts). So bleibt * die Datenschutzerklärung kurz und wahr. */ :root { --film: #0a0a0a; --film-edge: #161616; --sprocket: #2b2b2b; --frame: #1a1a1a; --line: #333; --text: #f2f2f2; --muted: #8f8f8f; --accent: #bdbdbd; --edge: 26px; /* Durchgängig Schreibmaschinenschrift, wie im Sucher der App. */ --face: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; background: var(--film); color: var(--text); font-family: var(--face); line-height: 1.6; } /* Perforationsstreifen links und rechts, wie in der App. */ body::before, body::after { content: ''; position: fixed; top: 0; bottom: 0; width: var(--edge); z-index: -1; pointer-events: none; background-color: var(--film-edge); background-image: repeating-linear-gradient( to bottom, transparent 0 10px, var(--sprocket) 10px 24px, transparent 24px 34px); background-size: 12px 34px; background-position: 7px 0; background-repeat: repeat-y; } body::before { left: 0; } body::after { right: 0; } /* Auf schmalen Bildschirmen zählt jeder Millimeter Textbreite: schmalere Perforation, weniger Rand, kleinere Kartenpolsterung. */ @media (max-width: 560px) { :root { --edge: 22px; } .wrap { padding: 16px 28px 40px; } .card { padding: 18px; } } .wrap { max-width: 760px; margin: 0 auto; padding: 20px 40px 60px; } /* ---------- Kopf ---------- */ .top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0 24px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; } .brand img { width: 30px; height: 30px; border-radius: 7px; } nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; } nav a { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-radius: 3px; padding: 6px 10px; } nav a:hover { color: var(--text); } nav a[aria-current="page"] { color: var(--film); background: var(--text); border-color: var(--text); } /* ---------- Karten ---------- */ .card { background: var(--frame); border: 1px solid var(--line); border-radius: 3px; padding: 26px; margin-bottom: 18px; } h1 { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.35; margin-bottom: 14px; } h2 { font-size: 15px; font-weight: 500; letter-spacing: 0.5px; margin: 26px 0 10px; } h3 { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; } h2:first-child, h3:first-child { margin-top: 0; } /* Dicktengleiche Schrift über mehrere Absätze braucht mehr Zeilenabstand und eine Spur weniger Größe, sonst wirkt der Satz gedrängt. */ p, li { font-size: 14px; line-height: 1.75; margin-bottom: 12px; /* Dicktengleiche Schrift bricht nicht von selbst: „Spiegelreflexkamera" ragt sonst auf schmalen Bildschirmen aus der Karte heraus. Zuerst wird nach Silben getrennt (das sagt dem Browser, welche Regeln gelten), erst als letzter Ausweg mitten im Wort. */ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } h1, h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .lead { font-size: 15px; color: var(--text); } .muted { color: var(--muted); font-size: 13px; } /* Anschriften: Zeilenumbrüche aus dem Quelltext übernehmen. */ .lines { font-size: 14px; white-space: pre-line; margin-bottom: 12px; } a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--accent); } ul { padding-left: 20px; } li { margin-bottom: 8px; } /* ---------- Merkmale ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; } .feature { border: 1px solid var(--line); border-radius: 3px; padding: 14px; background: var(--film); } .feature h3 { margin: 0 0 6px; } .feature p { font-size: 13px; margin: 0; } figure { margin: 20px 0; } figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; display: block; } figcaption { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; } /* ---------- Bildschirmfotos ---------- */ /* Drei Aufnahmen nebeneinander, auf schmalen Bildschirmen untereinander. Kein festes Raster mit fester Spaltenzahl: Bei 210 px Mindestbreite wird ein Bildschirmfoto unlesbar klein. */ .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 620px) { .shots { grid-template-columns: 1fr; gap: 22px; } /* Untereinander würde ein Bildschirmfoto sonst die volle Spaltenbreite einnehmen. Auf einem Bildschirm mit dreifacher Pixeldichte bräuchte es dann über 1400 echte Bildpunkte – die Datei hat 1000, und der Rest wäre Matsch. Begrenzt und mittig sieht es scharf aus. */ .shot img { max-width: 330px; margin: 0 auto; } } .shot { margin: 0; } .shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; } .shot figcaption { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; } /* ---------- Fuß ---------- */ footer { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--text); } footer .spacer { margin-left: auto; text-transform: none; letter-spacing: 0; }