25.095
Bearbeitungen
RaWen (Diskussion | Beiträge) (Änderung 269197 von RaWen (Diskussion) rückgängig gemacht.) Markierung: Rückgängigmachung |
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
||
Zeile 1: | Zeile 1: | ||
/* Container für Überschrift+Content-Box */ | |||
.content-box { | |||
position: relative; | |||
display: inline-block; | |||
margin-bottom: 1.5rem; | |||
z-index: 1; | |||
transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1); | |||
transform-origin: center; | |||
width: 100%; | |||
max-width: 500px; | |||
} | |||
.content-box:hover { | |||
transform: scale(1.01); | |||
border-color: rgba(0,0,0,0.12); | |||
z-index: 2; | |||
} | |||
/* Header-Tab */ | |||
{{# | .box-header { | ||
position: relative; | |||
width: max-content; | |||
max-width: 85%; | |||
padding: 0.7rem 0.8rem; | |||
background: rgba(0,0,0,0.08); | |||
border-radius: 6px 6px 0 0; | |||
margin: 0; | |||
margin-bottom: -5px; | |||
} | |||
.box-header h2 { | |||
font-size: 0.9rem; | |||
margin: -2px 0 0 0; | |||
padding: 0; | |||
font-weight: bold; | |||
border-bottom: 0; | |||
color: #222; | |||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; | |||
} | |||
/* Content-Bereich */ | |||
.box-content { | |||
position: relative; | |||
background: #fff; | |||
padding: 0.8rem 1.4rem 1rem; | |||
border: 2px solid rgba(0,0,0,0.08); | |||
border-radius: 6px; | |||
box-shadow: 0 0.3rem 0.8rem rgba(51,51,51,0.08); | |||
} | |||
/* Header-Container mit Symbol und Logo */ | |||
.header-container { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin-bottom: 1.5rem; | |||
padding-top: 0.5rem; | |||
height: 70px; | |||
border-bottom: 1px solid rgba(0,0,0,0.08); | |||
padding-bottom: 1rem; | |||
} | |||
/* Symbol-Container */ | |||
.symbol-container { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-end; | |||
height: 100%; | |||
padding-right: 15px; | |||
} | |||
/* Copyright-Symbol */ | |||
.symbol { | |||
font-size: 60px; | |||
font-weight: bold; | |||
user-select: none; | |||
color: rgba(0,0,0,0.3); | |||
line-height: 1; | |||
} | |||
/* Vertikaler Trennstrich */ | |||
.divider { | |||
width: 1px; | |||
height: 60px; | |||
background-color: rgba(0,0,0,0.15); | |||
margin: 0; | |||
} | |||
/* Logo-Container */ | |||
.logo { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
height: 100%; | |||
padding-left: 15px; | |||
} | |||
.logo img { | |||
max-height: 60px; | |||
width: auto; | |||
object-fit: contain; | |||
border-radius: 6px; | |||
} | |||
/* Bilder */ | |||
.box-content img { | |||
max-width: 100%; | |||
} | |||
/* Hervorhebung */ | |||
.author, .highlight-marker { | |||
margin: 0 0 0.5rem 0; | |||
line-height: 1.7; | |||
border-bottom: 2px solid #80dbfb; | |||
font-weight: normal; | |||
} | |||
/* Links & Highlights */ | |||
.more-link { | |||
text-align: right; | |||
width: 100%; | |||
margin: 1rem 0 0; | |||
} | |||
.more-link a { | |||
width: max-content; | |||
padding: 0.3rem 0.8rem; | |||
height: max-content; | |||
background-color: #f8f9fa; | |||
border: 1px solid #f8f9fa; | |||
color: #0b0080; | |||
border-radius: 4px; | |||
box-shadow: 0 0 3px #ccc; | |||
text-align: center; | |||
line-height: 22px; | |||
font-size: 0.8rem; | |||
cursor: pointer; | |||
transition: all 0.3s; | |||
display: inline-flex; | |||
user-select: none; | |||
touch-action: manipulation; | |||
white-space: pre; | |||
} | |||
.more-link a:hover { | |||
background-color: #f0f0f0; | |||
border-color: #dadce0; | |||
box-shadow: 0 1px 4px #ccc; | |||
text-decoration: none; | |||
} | |||
/* Spezifische Styles für Copyright-Hinweise */ | |||
.copyright-notice { | |||
display: block; | |||
} | |||
.text { | |||
margin-bottom: 1rem; | |||
font-size: 0.9rem; | |||
line-height: 1.5; | |||
} | |||
.details { | |||
margin: 1rem 0; | |||
border-top: 1px solid rgba(0,0,0,0.08); | |||
padding-top: 1rem; | |||
} | |||
.detail-row { | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 0.5rem; | |||
} | |||
.detail-label { | |||
font-weight: bold; | |||
} | |||
.footer { | |||
margin-top: 1rem; | |||
border-top: 1px solid rgba(0,0,0,0.08); | |||
padding-top: 1rem; | |||
text-align: right; | |||
} | |||
/* Media Queries */ | |||
@media screen and (max-width: 900px) { | |||
.box-content { | |||
padding: 0.8rem 1.2rem; | |||
} | |||
} | |||
@media screen and (max-width: 768px) { | |||
.box-content { | |||
display: block; | |||
width: auto; | |||
} | |||
/* Box-Header bleibt bei Textbreite */ | |||
.box-header { | |||
max-width: 85%; | |||
} | |||
} | |||
@media screen and (max-width: 480px) { | |||
.header-container { | |||
flex-direction: column; | |||
height: auto; | |||
padding-top: 0.5rem; | |||
padding-bottom: 0.5rem; | |||
} | |||
.symbol-container, .logo { | |||
justify-content: center; | |||
padding: 0; | |||
margin: 0.25rem 0; | |||
} | |||
.divider { | |||
width: 80%; | |||
height: 1px; | |||
margin: 0.5rem 0; | |||
} | |||
.detail-row { | |||
flex-direction: column; | |||
} | |||
.detail-value { | |||
margin-top: 0.5rem; | |||
} | |||
} | |||
/* Print Styles */ | |||
@media print { | |||
.box-header, | |||
.box-content { | |||
box-shadow: none; | |||
} | |||
.box-content { | |||
border: 1px solid #000; | |||
page-break-inside: avoid; | |||
} | |||
a[href]:after { | |||
content: " (" attr(href) ")"; | |||
color: #444; | |||
} | |||
} |