@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body {
    background-color: #2a3b47;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* LOGO */
.logo img {
    margin-top: 5%;
    margin-left: 5%;
    border-radius: 20px;
    max-width: 100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo img:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* NAVIGATION */
.navbar {
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #306658;
    font-size: large;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.navitem {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.navitem a {
    color: #dd6c2f;
    text-decoration: none;
    font-weight: bold;
}

.navitem:hover {
    background-color: #294e44;
    transform: translateY(-2px);
}

.selected {
    border-radius: 8px;
    border: 2px solid #dd6c2f;
    background-color: #3d7868;
}

/* TEXT STYLES */
.header {
    color: #ff7e75;
    padding: 1%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.bigtext {
    font-size: 25px;
    text-align: center;
    color: #ffdfdf;
    font-weight: bold;
}

.normaltext {
    font-size: 20px;
    text-align: center;
    color: #ffdfdf;
}

/* CONTENT BOXES */
.contentbox, .contentbox-social {
    background-color: #202224;
    border-radius: 12px;
    padding: 1%;
    margin: 1%;
    border: 2px solid #b39797;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.contentbox:hover, .contentbox-social:hover {
    background-color: #294e44;
    transform: translateY(-3px);
}

.contentbox a {
    color: #dd6c2f;
    font-weight: bold;
    text-decoration: underline;
}
.contentbox a:hover {
    color: #ff7e75;
}
/* PROJECTS — stabil, clean, ohne Layout-Shift */
.project {
    background-color: #202224;
    border: 2px solid #b39797;
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    display: flex;
    align-items: flex-start;      /* nicht mitten im Text ausrichten */
    gap: 16px;                    /* konsistenter Abstand statt margin-right */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.project:hover {
    background-color: #294e44;
    transform: translateY(-3px);
}

.project img {
    /* fixes: konstante Größe + kein Verzerren */
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 10px;
    object-fit: cover;            /* zentriert/füllt ohne Stretch */
    display: block;
}

.project-info {
    flex: 1;
    min-width: 0;                 /* erlaubt sauberes Zeilenumbruch-Verhalten */
}

.project h3 {
    color: #FF7E75;
    font-size: 24px;
    margin: 0 0 8px 0;            /* enger, damit Text nicht hüpft */
    line-height: 1.2;
    word-break: break-word;       /* lange Wörter/URLs brechen sauber */
}

.project p {
    color: #FFF;
    font-size: 18px;
    margin: 0 0 14px 0;
    line-height: 1.45;
    opacity: 0.95;
}

.project a {
    /* Button bleibt “griffig”, ohne Layout zu sprengen */
    color: #DD6C2F;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #DD6C2F;
    border-radius: 8px;
    padding: 8px 14px;
    display: inline-flex;         /* bessere Hitbox/Ausrichtung */
    align-items: center;
    gap: 8px;
    will-change: transform;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.project a:hover {
    background-color: #DD6C2F;
    color: #FFF;
    transform: translateZ(0) scale(1.06); /* weniger aggressiv als 1.25 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Falls mehrere Links kommen, etwas Abstand zur Copy */
.project a + a {
    margin-left: 10px;
}

/* Styling für Cancel-Hinweis als Textblock */
.project .cancelled {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px dashed #FF7E75;
    border-radius: 8px;
    background: rgba(255, 126, 117, 0.1);
    color: #FF7E75;
    font-weight: 600;
    text-align: center;
    font-size: 14px;
    box-shadow: inset 0 0 8px rgba(255, 126, 117, 0.15);
}

/* Responsive Feinschliff ohne Layout-Änderung */
@media (max-width: 767px) {
    .project {
        flex-direction: column;   /* wie bei dir vorgesehen */
        align-items: center;
        text-align: center;
    }
    .project img {
        width: 90px;
        height: 90px;
        flex: 0 0 90px;
        margin-right: 0;
    }
    .project-info {
        width: 100%;
    }
    .project a + a {
        margin-left: 0;
        margin-top: 8px;          /* Buttons stacken sauber */
    }
}

/* BUTTONS */
.button, .contentbox a.button {
    color: #DD6C2F;
    border: 2px solid #DD6C2F;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: bold;
    background: transparent;
    transition: all 0.3s ease;
    display: inline-block;
}

.button:hover, .contentbox a.button:hover {
    background-color: #DD6C2F;
    color: #FFF;
    transform: scale(1.05);
}

.social-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.social-box {
    background: rgba(32, 34, 36, 0.9);
    border: 2px solid #b39797;
    border-radius: 16px;
    padding: 25px 20px;
    max-width: 260px;
    width: 100%;
    text-align: center;
    transition: all 0.35s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.social-box img,
.social-icon {
    width: 60px;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.social-box-text h2 {
    color: #FF7E75;
    font-size: 20px;
    margin-bottom: 6px;
    font-weight: 600;
}

.social-box-text p {
    color: #EEE;
    font-size: 15px;
    margin-bottom: 14px;
    line-height: 1.4;
}

.social-box a {
    display: inline-block;
    border: 2px solid #DD6C2F;
    padding: 8px 18px;
    border-radius: 8px;
    color: #DD6C2F;
    font-weight: bold;
    transition: all 0.3s ease;
}

.social-box:hover {
    background-color: rgba(41, 78, 68, 0.95);
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.social-box:hover img,
.social-box:hover .social-icon {
    transform: scale(1.15);
}

.social-box a:hover {
    background-color: #DD6C2F;
    color: #FFF;
}


/* IMAGES */
.dragon-img, .dragon-img-small {
    border-radius: 1.5rem;
    margin: 2%;
}
.dragon-img {
    width: 80%;
}
.dragon-img-small {
    width: 40%;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .navbar {
        display: block;
    }
    .navitem {
        display: block;
        margin: 0;
        padding: 10px;
    }
    .dragon-img {
        width: 90%;
    }
    .dragon-img-small {
        width: 80%;
    }
}
/* --- Dragon Gallery --- */
#dragon-gallery {
  text-align: left;
}

/* Thumbnails-Kachel */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.gallery-thumbs button {
  all: unset;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #b39797;
  background: #202224;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gallery-thumbs button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  border-color: #DD6C2F;
}
.gallery-thumbs button.is-active {
  border-color: #DD6C2F;
  box-shadow: 0 0 0 2px rgba(221,108,47,0.25);
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* gleichmäßige Kacheln, kein Verzerren */
  display: block;
}

/* Viewer */
.gallery-viewer {
  position: relative;
  background: #202224;
  border: 2px solid #b39797;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* Hauptbild: groß, aber nie verzerrt */
.gallery-viewer img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #16181a;
}

/* Pfeile */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #DD6C2F;
  color: #DD6C2F;
  background: rgba(32,34,36,0.7);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.gallery-arrow:hover {
  background: #DD6C2F;
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

/* Caption */
.gallery-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: #ffdfdf;
}
.gallery-counter {
  opacity: 0.85;
}
.gallery-artist a {
  color: #DD6C2F;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dashed rgba(221,108,47,0.6);
}
.gallery-artist a:hover {
  color: #FF7E75;
  border-bottom-color: transparent;
}

/* Mobile Feinschliff */
@media (max-width: 767px) {
  .gallery-arrow { width: 36px; height: 36px; font-size: 20px; }
  .gallery-viewer img { max-height: 50vh; }
}
/* --- Gallery caption rework --- */
.gallery-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

/* Zeile mit Zähler + Artist */
.gallery-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gallery-counter {
  font-size: 14px;
  color: #ffdfdf;
  opacity: 0.9;
}

/* Künstler prominenter */
.gallery-artist {
  font-size: 18px;           /* größer */
  font-weight: 700;          /* fett */
  color: #FF7E75;            /* Header-Farbe */
  letter-spacing: 0.2px;
}

.gallery-artist a {
  color: #FF7E75;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,126,117,0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gallery-artist a:hover {
  color: #ff9a91;
  border-bottom-color: transparent;
}

/* Beschreibung unter Artist */
.gallery-desc {
  font-size: 15px;
  line-height: 1.5;
  color: #ffdfdf;
  opacity: 0.95;
  background: rgba(32,34,36,0.6);
  border: 1px solid rgba(179,151,151,0.5);
  border-radius: 10px;
  padding: 10px 12px;
  word-break: break-word;
}

/* Mobile Feinschliff */
@media (max-width: 767px) {
  .gallery-artist { font-size: 17px; }
  .gallery-desc { font-size: 14px; }
}
/* Guestbook Container */
#guestbook {
  padding: 20px;
  border-radius: 12px;
  background: #111; /* oder dein Theme-Hintergrund */
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

/* Guestbook Überschrift */
#guestbook h1 {
  text-align: center;
  font-size: 2.2em;
  color: #c084fc; /* Lila-Ton aus deinem Theme */
}

/* Guestbook Hinweistexte */
#guestbook p.normaltext {
  font-size: 0.95em;
  color: #bbb;
  text-align: center;
  margin-top: 10px;
}

/* Giscus iframe (Kommentarbox) */
.giscus, .giscus-frame {
  border-radius: 8px;
  overflow: hidden;
}
.cta-guestbook {
    text-align: center;
    color: white;
    border-radius: 12px;
}

.cta-guestbook h2 {
    margin-top: 0;
    color: white;
}

.cta-guestbook .button {
    background: white;
    color: #6a0dad;
    font-weight: bold;
}
/* --- Guestbook Special Look (nur hier) --- */
.guestbook-hero {
  text-align: center;
  border-radius: 14px;
  padding: 24px 18px;
  background: radial-gradient(120% 120% at 10% -10%, rgba(255,126,117,0.12), rgba(32,34,36,0.9) 60%),
              linear-gradient(135deg, rgba(106,13,173,0.25), rgba(61,120,104,0.15));
  border: 2px solid #b39797;
}
.guestbook-kicker {
  margin: 0 0 6px 0;
  font-size: 22px;
  color: #ffdfdf;
}

/* Guidelines kompakt & lesbar */
.guidelines h2 {
  margin-top: 0;
}
.guidelines-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0 0;
  display: grid;
  gap: 8px;
}
.guidelines-list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
  color: #ffdfdf;
}
.guidelines-list li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.9;
}

/* Giscus-Box an dein Theme anpassen */
.guestbook-wrap {
  padding: 16px;
}
.guestbook-wrap .normaltext.subtle {
  color: #cfd3d5;
  opacity: 0.9;
  text-align: center;
  margin: 10px 0;
}

/* Giscus iframe “eingebettet” aussehen lassen */
.giscus, .giscus-frame, #guestbook iframe {
  width: 100%;
  border-radius: 12px;
  border: 2px solid #b39797;
  background: #202224;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

/* Links in diesem Bereich in deinem Akzent */
#guestbook a {
  color: #DD6C2F;
  text-decoration: none;
  border-bottom: 1px dashed rgba(221,108,47,0.6);
}
#guestbook a:hover {
  color: #FF7E75;
  border-bottom-color: transparent;
}

/* Mobile Feinschliff */
@media (max-width: 767px) {
  .guestbook-kicker { font-size: 20px; }
  .guidelines-list { gap: 6px; }
}
.friend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.friend-link {
    text-decoration: none;
    color: inherit;
    margin: 10px;
}
.friend-card span {
    margin-top: 5px;
    font-size: 0.9rem;
}