/* ========================================================================== KADER — Stylesheet 1. Schriften 2. Design-Tokens 3. Grundlagen 4. Seitentypen 5. Filmkante 6. Kopfleiste 7. Schaltflächen 8. Auszeichnungen 9. Startseite 10. Beitragsseiten 11. Beitragsvorlage 12. Rechtstexte 13. Hinweisseiten 14. Fußzeilen der Unterseiten 15. Druckausgabe Die Seitenart steht als Klasse am -Element: .page-home | .page-article (+ .page-template) | .page-legal .page-note (+ .page-danke | .page-404) ========================================================================== */ /* 1. Schriften ========================================================================== */ @font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/archivo-black-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); } @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); } /* 2. Design-Tokens ========================================================================== */ :root{ /* Farben */ --base:#17140F; /* Grundton, Filmschwarz */ --base-deep:#120F0B; /* abgesetzte Bänder */ --edge:#2E2A22; /* Kanten, Trennlinien */ --paper:#E7E2D6; /* Papierton, Fließtext auf dunkel*/ --paper-dim:#D5CFC0; /* zurückgenommener Papierton */ --ink:#1B1813; /* Text auf Papierflächen */ --ink-soft:#5A5346; /* Nebentext auf Papierflächen */ --grease:#C93A22; /* nur die zwei gedruckten Marken:*/ /* das E im Titel und der */ /* Chinagraph-Strich */ --grease-lit:#DD4F37; /* Akzent auf dunklem Grund 4,6:1 */ --grease-ink:#B8351F; /* Akzent auf Papierfläche 4,6:1 */ --grease-hair:rgba(221,79,55,.4); /* --grease-lit bei 40 %*/ --sprocket:#8C8577; /* Metadaten, Kleingedrucktes */ /* Schrift */ --display:"Archivo Black","Helvetica Neue",Arial,sans-serif; --text:"Newsreader",Georgia,"Times New Roman",serif; /* Maße */ --gutter:clamp(1.1rem,4vw,3.5rem); /* Seitenrand */ --strip:clamp(26px,4vw,40px); /* Höhe der Filmkante */ --wide:1180px; /* Satzbreite breit */ --col:70ch; /* Satzbreite Lesetext*/ } /* 3. Grundlagen ========================================================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--base); color:var(--paper); font-family:var(--text); } img{ display:block; max-width:100%; } a{color:inherit} /* Sicherheitsnetz für lange deutsche Komposita in der Displayschrift. Greift nur, wenn ein Wort sonst aus der Spalte liefe. */ h1,h2,h3{overflow-wrap:break-word} :focus-visible{ outline:2px solid var(--grease-lit); outline-offset:3px; } /* 4. Seitentypen Nur die typografische Grundeinstellung, alles Weitere in den Bausteinen. ========================================================================== */ .page-home body{ font-size:clamp(1rem,.55vw + .92rem,1.125rem); line-height:1.62; } .page-article body{ font-size:clamp(1.02rem,.55vw + .94rem,1.18rem); line-height:1.72; } .page-legal body{ font-size:1.05rem; line-height:1.7; } /* Hinweisseiten stellen den Inhalt mittig, die Fußzeile bleibt unten. */ .page-note body{ display:flex; flex-direction:column; min-height:100vh; } /* 5. Filmkante Perforation am oberen und unteren Seitenrand. ========================================================================== */ .perf{ height:var(--strip); background:repeating-linear-gradient( to right, transparent 0 12px, var(--edge) 12px 26px, transparent 26px 38px ); background-color:var(--base); } .perf--top{border-bottom:1px solid var(--edge)} .perf--bottom{border-top:1px solid var(--edge)} /* Die Startseite schließt unten zusätzlich mit einer Kante ab. */ .page-home .perf--bottom{border-bottom:1px solid var(--edge)} /* 6. Kopfleiste ========================================================================== */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; max-width:var(--wide); margin-inline:auto; padding:1.15rem var(--gutter); border-bottom:1px solid var(--edge); } .page-legal .topbar{padding:.9rem var(--gutter)} .brand{ font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1; letter-spacing:-.025em; color:var(--paper); text-decoration:none; } .brand span{color:var(--grease)} .brand:hover{opacity:.72} /* Ausgabenzähler rechts in der Kopfleiste */ .kader-nr{ font-family:var(--display); font-size:.62rem; letter-spacing:.12em; color:var(--sprocket); } /* 7. Schaltflächen ========================================================================== */ .contact button, .back{ padding:.95rem 2.2rem; border:0; background:var(--grease-lit); color:var(--base); font-family:var(--display); font-size:.72rem; letter-spacing:.12em; transition:background .18s ease; } .contact button:hover, .back:hover{background:var(--paper)} .contact button{ margin-top:1.4rem; justify-self:start; cursor:pointer; } .back{ align-self:flex-start; text-decoration:none; } /* 8. Auszeichnungen Ressortzeile und Verfasserzeile, seitenweise leicht abweichend. ========================================================================== */ .kicker, .code{ font-family:var(--display); font-size:.66rem; letter-spacing:.14em; color:var(--grease-lit); } .page-home .kicker{margin-bottom:.9rem} .page-article .kicker{margin:0 0 1rem} .code{margin:0 0 1.2rem} .byline{ font-family:var(--display); font-size:.64rem; letter-spacing:.11em; } .page-home .byline{color:var(--ink-soft)} .page-article .byline{ margin:0; color:var(--sprocket); } /* 9. Startseite ========================================================================== */ /* 9.1 Zeitungskopf */ .masthead{ max-width:var(--wide); margin-inline:auto; padding:clamp(2.2rem,6vw,4.5rem) var(--gutter) clamp(1.6rem,4vw,2.8rem); border-bottom:1px solid var(--edge); } .masthead__title{ margin:0; color:var(--paper); font-family:var(--display); font-size:clamp(3.2rem,13vw,8.5rem); line-height:.82; letter-spacing:-.035em; } .masthead__title span{ display:inline-block; color:var(--grease); } .masthead__line{ margin:clamp(1rem,2.4vw,1.6rem) 0 0; max-width:34ch; color:var(--paper-dim); font-size:clamp(1.05rem,1.4vw,1.3rem); } .masthead__meta{ margin-top:1.4rem; color:var(--sprocket); font-family:var(--display); font-size:.66rem; letter-spacing:.14em; } /* 9.2 Navigation als Filmrand */ .nav{ display:flex; flex-wrap:wrap; gap:0; width:100%; max-width:var(--wide); margin-inline:auto; border-bottom:1px solid var(--edge); background:linear-gradient(var(--base),var(--base-deep)); } .nav a{ flex:1 1 0; min-width:0; padding:.95rem clamp(.5rem,1.4vw,1.4rem); border-right:1px solid var(--edge); color:var(--paper-dim); font-family:var(--display); font-size:.72rem; letter-spacing:.1em; text-align:center; text-decoration:none; white-space:nowrap; transition:background .18s ease,color .18s ease; } .nav a:last-child{border-right:0} .nav a:hover, .nav a:focus-visible{ background:var(--grease-lit); color:var(--base); } /* 9.3 Aufmacher — das markierte Kader */ .lead{ position:relative; padding:clamp(1.8rem,5vw,3.6rem) var(--gutter) clamp(2.4rem,6vw,4.5rem); } .lead__frame{ position:relative; display:grid; grid-template-columns:1fr; max-width:var(--wide); margin-inline:auto; background:var(--paper); color:var(--ink); } @media (min-width:60rem){ .lead__frame{grid-template-columns:1.15fr .85fr} } /* position/z-index heben beide über die Markierung (.mark, z-index 2 → siehe unten). */ .lead__photo{ position:relative; z-index:1; display:block; width:100%; height:100%; min-height:clamp(230px,42vw,460px); background:#221F19; object-fit:cover; object-position:center 40%; } .lead__body{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(1.4rem,3vw,2.6rem); background:var(--paper); color:var(--ink); } .lead__headline{ margin:0 0 .9rem; font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.02; letter-spacing:-.02em; } .lead__headline a{text-decoration:none} .lead__headline a:hover{color:var(--grease-ink)} /* Alles auf der Papierfläche nimmt den tiefen Ton. */ .lead__body .kicker{color:var(--grease-ink)} .lead__body :focus-visible{outline-color:var(--grease-ink)} .lead__dek{ margin:0 0 1.4rem; max-width:46ch; color:var(--ink-soft); } /* Chinagraph-Markierung, die sich beim Laden einmal zeichnet */ .mark{ position:absolute; top:-14px; left:-10px; z-index:2; width:calc(100% + 20px); height:calc(100% + 28px); overflow:visible; pointer-events:none; } .mark path{ fill:none; stroke:var(--grease); stroke-width:4; stroke-linecap:round; stroke-dasharray:2600; stroke-dashoffset:2600; opacity:.72; animation:draw 1.5s cubic-bezier(.22,.61,.36,1) .35s forwards; } @keyframes draw{ to{stroke-dashoffset:0} } @media (prefers-reduced-motion:reduce){ .mark path{ animation:none; stroke-dashoffset:0; } } /* 9.4 Dev-Diary-Band */ .band{ padding:clamp(2.2rem,5vw,3.8rem) var(--gutter); border-block:1px solid var(--edge); background:var(--base-deep); } .band__inner{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,3vw,2.6rem); max-width:var(--wide); margin-inline:auto; } @media (min-width:56rem){ .band__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} } .band h2{ margin:.6rem 0 0; font-family:var(--display); font-size:clamp(1.8rem,4vw,3rem); line-height:.98; letter-spacing:-.025em; } .band p{ max-width:56ch; color:var(--paper-dim); } /* 9.5 Redaktion */ .about{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,3vw,2.6rem); max-width:var(--wide); margin-inline:auto; padding:clamp(2.4rem,6vw,4.5rem) var(--gutter); } @media (min-width:56rem){ .about{grid-template-columns:.8fr 1.2fr} } .about h2{ margin:0; font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em; } .about p{ max-width:62ch; color:var(--paper-dim); } .about a{color:var(--grease-lit)} /* 9.6 Kontakt */ .contact{ max-width:var(--wide); margin-inline:auto; padding:clamp(2.4rem,6vw,4.2rem) var(--gutter); border-top:1px solid var(--edge); } .contact h2{ margin:0 0 .8rem; font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em; } .contact > p{ margin:0 0 1.8rem; max-width:56ch; color:var(--paper-dim); } .contact form{ display:grid; gap:.45rem; max-width:46rem; } .contact label{ margin-top:.9rem; color:var(--sprocket); font-family:var(--display); font-size:.64rem; letter-spacing:.12em; } .contact input[type=text], .contact input[type=email], .contact textarea{ width:100%; padding:.75rem .85rem; border:0; border-bottom:3px solid transparent; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:1rem; } .contact textarea{ resize:vertical; line-height:1.55; } .contact input:focus, .contact textarea:focus{ outline:none; border-bottom-color:var(--grease-ink); } .contact__note{ margin:1.8rem 0 0; max-width:56ch; color:var(--sprocket); font-size:.86rem; } .contact__note a{color:var(--grease-lit)} /* Honigtopf gegen Formular-Spam */ .hp{ position:absolute; left:-9999px; } /* 9.7 Impressum und Fuß der Startseite */ .page-home .foot{ padding:clamp(2rem,5vw,3.4rem) var(--gutter) clamp(1.4rem,3vw,2.4rem); font-size:.92rem; } .foot__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,3vw,2.4rem); max-width:var(--wide); margin-inline:auto; } @media (min-width:48rem){ .foot__grid{grid-template-columns:repeat(2,1fr)} } .foot h3{ margin:0 0 .7rem; color:var(--paper-dim); font-family:var(--display); font-size:.66rem; letter-spacing:.13em; } .foot address{ font-style:normal; line-height:1.75; } .foot__links{ margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--edge); } .foot__links a{ margin-right:1.6rem; color:var(--paper-dim); font-family:var(--display); font-size:.66rem; letter-spacing:.13em; text-decoration:none; } .foot__links a:hover{color:var(--grease-lit)} .foot__note{ margin-top:.9rem; max-width:70ch; font-size:.85rem; } /* 10. Beitragsseiten ========================================================================== */ .head{ max-width:var(--col); margin-inline:auto; padding:clamp(2.2rem,6vw,4.4rem) var(--gutter) clamp(1.6rem,4vw,2.6rem); } .head h1{ margin:0 0 1.1rem; font-family:var(--display); font-size:clamp(2rem,5.4vw,3.7rem); line-height:1; letter-spacing:-.028em; } .head .dek{ margin:0 0 1.6rem; color:var(--paper-dim); font-size:clamp(1.1rem,1.6vw,1.35rem); } .hero{ max-width:var(--wide); margin:0 auto clamp(2rem,5vw,3.4rem); } .hero img{ width:100%; height:auto; aspect-ratio:2 / 1; background:#221F19; object-fit:cover; object-position:center 42%; } .hero figcaption{ max-width:var(--col); margin-inline:auto; padding:.7rem var(--gutter) 0; color:var(--sprocket); font-size:.86rem; } .article{ max-width:var(--col); margin-inline:auto; padding:0 var(--gutter) clamp(2.6rem,6vw,4.4rem); } .article p{margin:0 0 1.35rem} .article a{ border-bottom:1px solid var(--grease-hair); color:var(--grease-lit); text-decoration:none; } .article a:hover{border-bottom-color:var(--grease-lit)} .article h2{ margin:2.6rem 0 1rem; font-family:var(--display); font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.12; letter-spacing:-.015em; } .article blockquote{ margin:2.2rem 0; padding-left:1.3rem; border-left:3px solid var(--grease-lit); color:var(--paper); font-size:1.22rem; line-height:1.5; } .article blockquote p:last-child{margin-bottom:0} .article hr{ margin:2.6rem 0; border:0; border-top:1px solid var(--edge); } /* Quellen- und Korrekturhinweis unter dem Beitrag */ .end{ max-width:var(--col); margin-inline:auto; padding:clamp(1.8rem,4vw,2.8rem) var(--gutter); border-top:1px solid var(--edge); color:var(--sprocket); font-size:.94rem; } .end a{color:var(--grease-lit)} /* 11. Beitragsvorlage (artikel.html) Platzhalterflächen statt Fotos, dazu der Warnhinweis. ========================================================================== */ .tpl-warn{ margin:0; padding:.8rem var(--gutter); background:var(--grease-lit); color:var(--base); font-family:var(--display); font-size:.68rem; letter-spacing:.08em; text-align:center; } .page-template .hero{ max-width:none; margin:0 0 clamp(2rem,5vw,3.4rem); } .page-template .hero__img{ height:clamp(220px,44vw,520px); background: radial-gradient(120% 90% at 25% 20%, #6E6455 0%, transparent 60%), linear-gradient(155deg,#4A4237,#221F19); } .page-template .article figure{margin:2.4rem 0} .page-template .article figure div{ height:clamp(180px,32vw,380px); background:linear-gradient(150deg,#514839,#211E18); } .page-template .article figcaption{ margin-top:.6rem; color:var(--sprocket); font-size:.86rem; } /* 12. Rechtstexte (datenschutz.html) ========================================================================== */ .page-legal main{ max-width:var(--col); margin-inline:auto; padding:clamp(2rem,5vw,3.6rem) var(--gutter); } .page-legal main a{color:var(--grease-lit)} /* „Datenschutzerklärung" ist auf 320-px-Geräten breiter als die Spalte. Die Trennstelle steht als ­ im Markup — hyphens:auto braucht ein Trennwörterbuch, das nicht jeder Browser mitbringt. */ .page-legal h1{ margin:0 0 2rem; font-family:var(--display); font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.05; letter-spacing:-.025em; } .page-legal h2{ margin:2.4rem 0 .8rem; font-family:var(--display); font-size:1.1rem; letter-spacing:-.01em; } .page-legal p, .page-legal ul{margin:0 0 1.2rem} .page-legal ul{padding-left:1.2rem} .page-legal li{margin-bottom:.4rem} /* Steht sowohl in der Kopfleiste als auch unter dem Text. */ .stand{ color:var(--sprocket); font-size:.9rem; } /* 13. Hinweisseiten (404.html, danke.html) ========================================================================== */ .page-note main{ display:flex; flex:1; flex-direction:column; justify-content:center; width:100%; max-width:var(--wide); margin-inline:auto; padding:clamp(3rem,10vw,6rem) var(--gutter); } .page-note h1{ margin:0 0 1.4rem; font-family:var(--display); letter-spacing:-.03em; } /* Nicht .lead nennen — so heißt auf der Startseite der Aufmacher. */ .note-lead{ margin:0 0 2.2rem; color:var(--paper-dim); font-size:1.1rem; } .page-404 h1{ font-size:clamp(2.4rem,9vw,5.5rem); line-height:.92; } .page-404 .note-lead{max-width:46ch} .page-danke h1{ font-size:clamp(2rem,7vw,4rem); line-height:.95; } .page-danke .note-lead{max-width:48ch} /* 14. Fußzeilen der Unterseiten ========================================================================== */ .foot{ width:100%; max-width:var(--wide); margin-inline:auto; border-top:1px solid var(--edge); color:var(--sprocket); } .page-article .foot, .page-legal .foot{font-size:.88rem} .page-article .foot{padding:clamp(1.6rem,4vw,2.6rem) var(--gutter)} .page-legal .foot{padding:clamp(1.6rem,4vw,2.4rem) var(--gutter)} .page-article .foot a, .page-legal .foot a{color:var(--paper-dim)} .page-note .foot{ padding:clamp(1.4rem,3vw,2.2rem) var(--gutter); font-family:var(--display); font-size:.82rem; letter-spacing:.1em; } .page-note .foot a{ color:var(--paper-dim); text-decoration:none; } .page-note .foot a:hover{color:var(--grease-lit)} /* 15. Druckausgabe Nur Startseite und Beitragsseiten sind für den Druck aufbereitet. ========================================================================== */ @page{margin:18mm 16mm} /* 15.1 Startseite */ @media print{ .page-home, .page-home body{ background:#fff !important; color:#000 !important; font-size:11pt; } .page-home .perf, .page-home .nav, .page-home .mark, .page-home .contact form, .page-home .contact button{display:none !important} .page-home .masthead{padding:0 0 6mm;max-width:none} .page-home .masthead__title{font-size:34pt;color:#000} .page-home .masthead__title span{color:#000} .page-home .masthead__line, .page-home .masthead__meta{color:#222} .page-home .lead{padding:0 0 6mm} .page-home .lead__frame{ display:block; max-width:none; background:none; break-inside:avoid; } .page-home .lead__photo{max-height:70mm;object-fit:cover} .page-home .lead__body{padding:3mm 0 0} .page-home .lead__headline{font-size:17pt;color:#000} .page-home .lead__headline a{color:#000;text-decoration:none} .page-home .kicker{color:#000;font-size:8pt} .page-home .lead__dek{color:#222} .page-home .byline{color:#333;font-size:8pt} .page-home .band, .page-home .about, .page-home .contact, .page-home .foot{ padding:4mm 0; max-width:none; background:none !important; border-color:#999; } .page-home .band h2, .page-home .about h2, .page-home .contact h2{color:#000;font-size:13pt} .page-home .band p, .page-home .about p, .page-home .contact > p, .page-home .empty{color:#222} .page-home .about a, .page-home .contact__note a, .page-home .foot a{color:#000} .page-home .foot, .page-home .foot__note, .page-home .contact__note{color:#333;font-size:8.5pt} .page-home .foot h3{color:#000} .page-home .foot__grid, .page-home .about, .page-home .band__inner{display:block} .page-home .foot__links{border-top:1pt solid #999} } /* 15.2 Beitragsseiten */ @media print{ .page-article, .page-article body{ background:#fff !important; color:#000 !important; font-size:11pt; line-height:1.45; } .page-article .perf, .page-article .topbar, .page-article .foot, .page-article .tpl-warn{display:none !important} .page-article .head{padding:0 0 8mm;max-width:none} .page-article .head h1{font-size:22pt;line-height:1.1;color:#000} .page-article .head .dek{font-size:12pt;color:#222} .page-article .kicker{color:#000;font-size:8pt} .page-article .byline{color:#333;font-size:8pt} .page-article .hero{margin:0 0 6mm;break-inside:avoid} .page-article .hero img{max-height:75mm;width:100%;object-fit:cover} .page-article .hero figcaption, .page-article .article figcaption{ padding:2mm 0 0; max-width:none; color:#444; font-size:8pt; } .page-article .article{padding:0;max-width:none} .page-article .article h2{ margin:7mm 0 2mm; color:#000; font-size:13pt; break-after:avoid; } .page-article .article p{orphans:3;widows:3} .page-article .article blockquote{ margin:5mm 0; padding-left:5mm; border-left:2pt solid #000; color:#000; font-size:12pt; break-inside:avoid; } .page-article .article hr{margin:6mm 0;border-top:1pt solid #999} .page-article .article a{border:0;color:#000;text-decoration:underline} .page-article .article a[href^="http"]::after{ content:" (" attr(href) ")"; color:#555; font-size:8pt; } .page-article .end{ display:block !important; margin-top:6mm; padding:4mm 0 0; max-width:none; border-top:1pt solid #999; color:#333; font-size:8.5pt; } .page-article .end a{color:#000} } /* --------------------------------------------------------------- Gattungsmarke — sagt vor dem Lesen, was für ein Text folgt --------------------------------------------------------------- */ .gattung{ display:inline-block; align-self:flex-start; /* im Aufmacher ist die Marke Flex-Kind */ margin:0 0 .8rem; padding:.3rem .7rem .28rem; font-family:var(--display); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--base); background:var(--paper-dim); } /* Auf der hellen Aufmacherfläche wird die Marke invertiert. */ .lead__body .gattung{ color:var(--paper); background:var(--ink); } /* Vorspann und Aufzählungen auf den Rechtsseiten */ .page-legal .dek{ font-size:1.15rem; color:var(--paper-dim); margin:0 0 2rem; padding-bottom:1.6rem; border-bottom:1px solid var(--edge); } .page-legal strong{color:var(--paper)} @media print{ .gattung, .lead__body .gattung{ background:none; color:#000; border:1pt solid #000; padding:.1rem .4rem; } }