/* =========================================================================
   Griassdi Comic – Frontend Styles
   Alm-Look: Holz, Wiese, Himmel. Bewusst zurückhaltend, fügt sich ins Theme.
   ========================================================================= */

.gc-wrap{
	max-width: 920px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

/* ---- Farben als Variablen (ein Ort zum Anpassen) ---- */
.gc-wrap, .gc-sepp-hero, .gc-sepp-body{
	--gc-holz:    #9A6A2F;
	--gc-holz-dk: #6e4a1d;
	--gc-rot:     #A32D2D;
	--gc-wiese:   #7DA63F;
	--gc-himmel:  #8FBEE0;
	--gc-papier:  #f3e9d2;
	--gc-tinte:   #2a1f12;
	--gc-rahmen:  rgba(0,0,0,.12);
}

/* =========================================================================
   Einzelne Folge
   ========================================================================= */

.gc-single-head{ text-align:center; margin-bottom:1rem; }

.gc-serie-badges{ margin-bottom:.6rem; }
.gc-serie-badge{
	display:inline-block;
	background: var(--gc-papier);
	color: var(--gc-holz-dk);
	font-size:.8rem;
	font-weight:600;
	padding:4px 12px;
	border-radius:6px;
	text-decoration:none;
	border:1px solid var(--gc-rahmen);
}
.gc-serie-badge:hover{ background:#e9dcc0; }

.gc-single-title{ margin:.2rem 0; line-height:1.2; color:#2a1f12; }
.gc-folge-nr{
	display:block;
	font-size:.95rem;
	font-weight:600;
	color: var(--gc-holz);
	letter-spacing:.04em;
	text-transform:uppercase;
}

/* ---- Comic-Bild ---- */
.gc-strip{
	margin:1.2rem 0;
	text-align:center;
}
.gc-strip-img{
	max-width:100%;
	height:auto;
	border-radius:10px;
	border:1px solid var(--gc-rahmen);
	box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.gc-noimage{
	padding:3rem 1rem;
	text-align:center;
	color:#888;
	background:#faf7f0;
	border:1px dashed var(--gc-rahmen);
	border-radius:10px;
}

.gc-single-text{
	max-width:680px;
	margin:1.2rem auto;
	line-height:1.7;
	color:#3a2d1a;
}

/* ---- Blätter-Navigation ---- */
.griassdi-comic-nav{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	align-items:center;
	margin:1rem 0;
}
.gc-nav-btn{
	display:inline-block;
	padding:8px 14px;
	font-size:.9rem;
	font-weight:500;
	text-decoration:none;
	border-radius:8px;
	border:1px solid var(--gc-rahmen);
	background:#fff;
	color: var(--gc-holz-dk);
	transition: background .15s, transform .05s;
}
.gc-nav-btn:hover{ background:var(--gc-papier); }
.gc-nav-btn:active{ transform:scale(.97); }
.gc-nav-archive{
	background: var(--gc-holz);
	color:#fff;
	border-color: var(--gc-holz);
}
.gc-nav-archive:hover{ background: var(--gc-holz-dk); }
.gc-disabled{
	opacity:.4;
	cursor:default;
	color:#999;
}

/* ---- Transkript ---- */
.gc-transkript{
	max-width:680px;
	margin:1.5rem auto 0;
	border:1px solid var(--gc-rahmen);
	border-radius:8px;
	padding:.4rem 1rem;
	background:#faf7f0;
}
.gc-transkript summary{
	cursor:pointer;
	font-weight:600;
	color: var(--gc-holz-dk);
	padding:.5rem 0;
}
.gc-transkript-text{
	padding:.5rem 0 1rem;
	line-height:1.6;
	color:#444;
}

/* =========================================================================
   Archiv-Galerie
   ========================================================================= */

.gc-archive-head{ text-align:center; margin-bottom:1.8rem; }
.gc-archive-head h1{ color:#2a1f12; }
.gc-archive-desc{ color:#6e5a42; max-width:560px; margin:.4rem auto 0; }

.gc-grid{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:18px;
}
.gc-card{
	display:block;
	text-decoration:none;
	color:inherit;
	border:1px solid var(--gc-rahmen);
	border-radius:12px;
	overflow:hidden;
	background:#fff;
	transition: transform .12s, box-shadow .12s;
}
.gc-card:hover{
	transform: translateY(-3px);
	box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.gc-card-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.gc-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gc-card-noimg{
	display:flex; align-items:center; justify-content:center;
	height:100%; color:#999; font-size:.85rem; background:#f4f1ea;
}
.gc-card-nr{
	position:absolute; top:8px; left:8px;
	background: var(--gc-tinte); color: var(--gc-papier);
	font-size:.78rem; font-weight:600;
	padding:2px 8px; border-radius:6px;
}
.gc-card-title{
	padding:12px 14px;
	font-weight:500;
	line-height:1.35;
}

.gc-pagination{ margin-top:2rem; text-align:center; }
.gc-empty{ text-align:center; color:#6e5a42; padding:3rem 1rem; }

/* =========================================================================
   Sepp-Startseite (Shortcode)
   ========================================================================= */

.gc-sepp-hero{
	display:flex;
	gap:1.5rem;
	align-items:center;
	flex-wrap:wrap;
	justify-content:center;
	background: linear-gradient(180deg, var(--gc-himmel) 0%, #a9cfe6 60%, var(--gc-wiese) 60%, #6b9433 100%);
	border-radius:14px;
	padding:1.8rem;
	margin-bottom:1.6rem;
}
.gc-sepp-img{ max-height:300px; width:auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.gc-sepp-greeting{
	background: rgba(243,233,210,.94);
	border:2px solid #8a6a3a;
	border-radius:12px;
	padding:1rem 1.4rem;
	max-width:380px;
}
.gc-sepp-greeting h2{ margin:0 0 .4rem; color: var(--gc-tinte); }
.gc-sepp-greeting p{ margin:0; color:#4a3a26; }

.gc-sepp-body{ max-width:760px; margin:0 auto; }
.gc-sepp-intro{ color:#555; line-height:1.7; margin-bottom:1.4rem; }

.gc-skills{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
	gap:14px;
	margin-bottom:1.6rem;
}
.gc-skill{
	border:1px solid var(--gc-rahmen);
	border-left:4px solid var(--gc-holz);
	border-radius:0 10px 10px 0;
	padding:12px 16px;
	background:#fff;
}
.gc-skill strong{ display:block; margin-bottom:3px; }
.gc-skill span{ color:#666; font-size:.92rem; }

.gc-pricelist{
	border:1px solid var(--gc-rahmen);
	border-radius:12px;
	padding:1rem 1.4rem;
	background:#faf7f0;
	margin-bottom:1.6rem;
}
.gc-pricelist h4{ margin:.2rem 0 .8rem; color: var(--gc-tinte); }
.gc-pricelist ul{ list-style:none; margin:0; padding:0; }
.gc-pricelist li{
	display:flex; justify-content:space-between; align-items:baseline;
	padding:8px 0; border-bottom:1px dashed var(--gc-rahmen);
}
.gc-pricelist li:last-child{ border-bottom:none; }
.gc-pricelist b{ color: var(--gc-rot); }
.gc-pricelist .gc-muted b,
.gc-pricelist .gc-muted span{ color:#999; }

.gc-sepp-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.gc-cta-btn{
	display:inline-block;
	background: var(--gc-holz);
	color:#fff;
	padding:11px 20px;
	border-radius:9px;
	text-decoration:none;
	font-weight:600;
}
.gc-cta-btn:hover{ background: var(--gc-holz-dk); }
.gc-cta-link{ color: var(--gc-holz-dk); text-decoration:underline; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:600px){
	.gc-nav-btn{ padding:7px 10px; font-size:.82rem; }
	.gc-sepp-hero{ flex-direction:column; }
}

/* =========================================================================
   Dark Mode (falls Theme es nutzt) – Alm bleibt hell, UI passt sich an
   ========================================================================= */
@media (prefers-color-scheme: dark){
	.gc-nav-btn{ background:#2a2a2a; color:#e9dcc0; border-color:rgba(255,255,255,.14); }
	.gc-nav-btn:hover{ background:#3a3320; }
	.gc-card{ background:#222; border-color:rgba(255,255,255,.12); }
	.gc-transkript, .gc-pricelist{ background:#262321; }
	.gc-transkript-text{ color:#ccc; }
	.gc-skill{ background:#222; }
	.gc-skill span{ color:#aaa; }
}

/* =========================================================================
   Sprechblasen-Overlay (Frontend)
   Blasen liegen prozentual positioniert über dem Comic-Bild.
   ========================================================================= */

.gc-bubble-layer{
	position:relative;
	display:inline-block;
	max-width:100%;
	line-height:0;
}
.gc-bubble-layer .gc-strip-img{
	display:block;
	margin:0;
}

.gc-bubble{
	position:absolute;
	box-sizing:border-box;
	background:#fff;
	border:2px solid #1a1a1a;
	border-radius:16px;
	padding:.5em .7em;
	line-height:1.25;
	color:#1a1a1a;
	z-index:2;
	text-align:center;
}
.gc-bubble-text{
	font-family:"Comic Sans MS","Segoe Print",cursive;
	white-space:pre-wrap;
	word-break:break-word;
}

/* Blasenspitze: per CSS-Variablen --tail-dx / --tail-dy positioniert */
.gc-bubble-tail{
	position:absolute;
	left:calc(50% + (var(--tail-dx,0) * 1%));
	top:calc(50% + (var(--tail-dy,50) * 1%));
	width:0; height:0;
	transform:translate(-50%,-2px);
}
.gc-bubble--speech .gc-bubble-tail{
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:18px solid #1a1a1a;
}
.gc-bubble--speech .gc-bubble-tail::after{
	content:"";
	position:absolute;
	left:-7px; top:-18px;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:14px solid #fff;
}

/* Gedankenblase */
.gc-bubble--thought{ border-style:dashed; border-radius:50% / 42%; }
.gc-bubble--thought .gc-bubble-tail{
	width:10px; height:10px;
	background:#fff; border:2px solid #1a1a1a; border-radius:50%;
}

/* Schrei */
.gc-bubble--shout{ border-width:3px; border-radius:4px; transform:rotate(-1deg); }
.gc-bubble--shout .gc-bubble-tail{
	border-left:12px solid transparent;
	border-right:6px solid transparent;
	border-top:20px solid #1a1a1a;
}

/* Caption-Kasten (kein Tail) */
.gc-bubble--caption{
	border-radius:3px;
	background:#f3e9d2;
	border-color:#8a6a3a;
}
.gc-bubble--caption .gc-bubble-text{
	font-family:inherit;
	font-style:italic;
	font-size:.92em;
}

@media (prefers-color-scheme: dark){
	.gc-bubble{ background:#fff; color:#1a1a1a; }
}