Vorlage:Hauptseite/style.css

/* Base Layout */ .container {

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1rem;
 box-sizing: border-box; /* Wichtig! */

}

/* Header */ .wiki-header {

 margin-bottom: 1.25rem;

}

.header-image {

 width: 100%;
 height: auto;
 display: block;
 border-radius: 4px;

}

/* Grid Layout */ .content-grid {

 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.25rem;

}

/* Container für Überschrift+Content-Box */ .content-box {

   position: relative;
   display: inline-block;
   margin-bottom: 1.5rem;
   z-index: 1; /* Basis z-index */
   transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
   transform-origin: center;

}

.content-box:hover {

   transform: scale(1.01);
   border-color: rgba(0,0,0,0.12);
   z-index: 2; /* Erhöhter z-index beim Hover */

}

/* 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;
 /* Überlappung durch negative margin */
 margin-bottom: -5px;  /* Entspricht der Border-Dicke der Content-Box */
 /* Sicherstellen, dass der Header über dem Content liegt */

}

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

}

.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;

}

/* Bilder */ .box-content img {

 border-radius: 6px;
 max-width: 100%;

}

/* Spezielle Formatierung für den Foto-Bereich */ .photos {

 position: relative;
 padding: 0;
 box-shadow: none !important;
 border: none !important;
 width: 85%;  /* Basis-Breite */

}

.photos img {

 width: 100%;  /* Füllt die 85% breite Box */
 height: auto;
 display: block;
 border-radius: 6px;
 box-shadow: 0 0.3rem 0.8rem rgba(51,51,51,0.08);

}

.photos .more-link {

 width: 100%;  /* Füllt die 85% breite Box */
 margin: 1rem 0 0;

}

/* Stimmen zum HammWiki */

.testimonial {

 margin: 1.5rem 0;

}

.testimonial img {

 float: right;
 margin: 0 0 0.5rem 1rem;
 border-radius: 4px;

}

.author,.highlight-marker {

 margin: 0 0 0.5rem 0;
 line-height: 1.7;
 border-bottom: 2px solid #80dbfb;

}

.testimonial .author small {

 color: #666;

}

.testimonial .quote {

 color: #333;
 line-height: 1.5;
 font-family: "Linux Libertine", "Georgia", "Times", serif;
 border-left: 2px dotted rgb(224,224,224);
 margin: 1.5rem 0 1.5rem 0.8rem;
 position: relative;
 padding-left: 1rem;

}

/* Links & Highlights */ .more-link {

 text-align: right;
 width: 100%;
 margin: 1rem 0 0;

}

.photo-content .more-link {

 width: 85%;

}

.next-meeting {

 display: inline-block;
 box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 padding: 0.5rem 0.8rem;
 margin: 0 0 0.8rem 0;
 border-radius: 4px;

}

.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;

}

.startpage-subtitle {

 font-size: 0.75rem;
 margin-top: 0.8rem;
 color: #555;

}

/* Form Elements */ .box-content input[type="text"] {

 width: 100%;
 padding: 0.5rem;
 border: 1px solid #999;
 border-radius: 4px;
 margin-bottom: 0.625rem;

}

.box-content button {

 padding: 0.5rem 1rem;
 background: #fff;
 border: 1px solid #999;
 border-radius: 4px;
 cursor: pointer;
 transition: background-color 0.2s;

}

.box-content button:hover {

 background: #f0f0f0;

}

/* Accessibility */

focus {

 outline: 3px solid #0066cc;
 outline-offset: 2px;

}

/* Media Queries */

@media screen and (max-width: 1240px) {

 .container {
   padding: 0 1.25rem;
 }

 .content-grid {
   gap: 1rem;
 }

}

@media screen and (max-width: 900px) {

 .box-content {
   padding: 0.8rem 1.2rem;
 }

 .photos {
   padding: 0;
   width: 90%;
 }

}

@media screen and (max-width: 768px) {

 .content-grid {
   grid-template-columns: 1fr;
 }

 .container {
   padding: 0 1rem;
 }

 .box-content {
   display: block;
   width: auto;
 }

 .photos {
   width: 90%;
 }

 /* Box-Header bleibt bei Textbreite */
 .box-header {
   max-width: 85%;
 }

 .inner-box .box-header {
   max-width: none;
 }

}

@media screen and (max-width: 480px) {

 .testimonial {
   padding-left: 0.75rem;
 }

 .testimonial img {
   margin: 0 0 0.5rem 0.75rem;
 }

}

/* Zusätzlich für bessere iPad-Unterstützung */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

 .container {
   max-width: 100%;
 }

}

/* Print Styles */ @media print {

 .container {
   max-width: 100%;
   padding: 0;
 }

 .content-grid {
   grid-template-columns: 1fr;
   gap: 1rem;
 }

 .box-header,
 .box-content {
   box-shadow: none;
 }

 .box-content {
   border: 1px solid #000;
   page-break-inside: avoid;
 }

 .photo-content img {
   max-width: 80%;
   margin: 0 auto;
 }

 a[href]:after {
   content: " (" attr(href) ")";
   color: #444;
 }

 input[type="text"],
 button,
 .highlight {
   display: none;
 }

}