Vorlage:Bild-Maximare

/* 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;
 }

}