/*
Theme Name: Treffpunkt Sizilien
Theme URI: https://www.treffpunkt-sizilien.de
Author: Treffpunkt-Sizilien.de
Description: Block-Theme (FSE) für Treffpunkt-Sizilien.de – faktische Reiseplanung für Sizilien. Mittelmeer-/Sizilien-Farbwelt, übersetzbar (Text-Domain: treffpunkt-sizilien), vorbereitet für Mehrsprachigkeit.
Version: 0.1.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: treffpunkt-sizilien
*/

/* === Design-Tokens (Fallbacks; primaer ueber theme.json) === */
:root{
	--ts-header:#4583CF;
	--ts-meerblau:#167D9A;
	--ts-aqua:#2FA7C3;
	--ts-aqua-hell:#4FC3D9;
	--ts-nacht:#243746;
	--ts-meerblau-tief:#15596C;
	--ts-ocker:#C88A2D;
	--ts-gelb:#F5B301;
	--ts-zitrus:#6F7F32;
	--ts-marsala:#7A2E35;
	--ts-kalk:#E8DFCF;
	--ts-brise:#EFF7F8;
	--ts-anthrazit:#3F4142;
	--ts-line:#d6e6ea;
}

.ts-wrap{max-width:1140px;margin-inline:auto;padding-inline:22px;}
.ts-eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ts-meerblau);margin:0 0 .6rem;}
.ts-lead{font-size:1.08rem;color:#54585a;max-width:80ch;}

/* Buttons (zusaetzlich zu theme.json) */
.ts-btn{display:inline-block;padding:.7rem 1.25rem;border-radius:8px;font-weight:600;font-size:.96rem;border:2px solid transparent;text-decoration:none;cursor:pointer;}
.ts-btn--primary{background:var(--ts-meerblau);color:#fff;}
.ts-btn--gelb{background:var(--ts-gelb);color:#143447;}
.ts-btn--gelb:hover{background:#FFC21A;}
.ts-btn--outline{background:transparent;border-color:rgba(255,255,255,.6);color:#fff;}
.ts-btn--ghost{background:#fff;border-color:var(--ts-line);color:var(--ts-nacht);}

/* Header und Hero nahtlos verbinden (Standard-Block-Abstand am Seiten-Main entfernen) */
.wp-site-blocks > main{margin-block-start:0;}
.wp-site-blocks > header.wp-block-template-part{margin-block-end:0;}

/* === Header === */
.ts-header{position:sticky;top:0;z-index:50;background:var(--ts-header);color:#fff;}
.ts-header .ts-wrap{display:flex;align-items:center;gap:1.5rem;min-height:64px;}
.ts-header__brand{font-weight:800;font-size:1.15rem;color:#fff;white-space:nowrap;text-decoration:none;}
.ts-header__brand b{color:var(--ts-ocker);font-weight:800;}
.ts-header nav a{color:#eaf3fc;font-weight:600;font-size:.95rem;text-decoration:none;}
.ts-header nav a:hover{color:#fff;}
.ts-header__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.35rem;align-items:center;}
.ts-header__nav li{margin:0;}
.ts-header__spacer{flex:1;}
.ts-header__pill{font-size:.8rem;color:#dbe8f7;}

/* === Hero === */
.ts-hero{position:relative;color:#fff;background:#16586b;overflow:hidden;}
.ts-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.ts-hero__ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,52,71,.66) 0%,rgba(12,52,71,.35) 35%,rgba(12,52,71,0) 60%);}
.ts-hero .ts-wrap{position:relative;padding-block:92px 84px;}
.ts-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.3rem);max-width:18ch;text-shadow:0 1px 14px rgba(8,40,53,.55);}
.ts-hero__eyebrow{color:#cdeef5;text-shadow:0 1px 10px rgba(8,40,53,.5);}
.ts-hero p{font-size:1.15rem;max-width:54ch;margin:1rem 0 1.6rem;color:#eef2f3;text-shadow:0 1px 14px rgba(8,40,53,.55);}
.ts-hero__btns{display:flex;flex-wrap:wrap;gap:.7rem;}

/* === Sektionen === */
.ts-section{padding-block:64px;}
.ts-section--alt{background:var(--ts-brise);}
.ts-wx-row{display:flex;flex-wrap:wrap;gap:16px;}
.ts-sechead{margin-bottom:30px;max-width:62ch;}
.ts-sechead h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
.ts-sechead .ts-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;}

/* === Karten === */
.ts-grid{display:grid;gap:20px;}
.ts-grid--3{grid-template-columns:repeat(3,1fr);}
.ts-grid--4{grid-template-columns:repeat(4,1fr);}
.ts-card{background:#fff;border:1px solid var(--ts-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;}
.ts-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(36,55,70,.13);}
.ts-card__img{aspect-ratio:16/10;background:#cdd6da center/cover no-repeat;}
.ts-card__body{padding:15px 16px 18px;}
.ts-card__body h3{font-size:1.12rem;margin:0 0 .25rem;}
.ts-card__meta{font-size:.83rem;color:var(--ts-meerblau);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.ts-card__body p{font-size:.95rem;color:#54585a;margin:.5rem 0 0;}
.ts-card--top{border-top:4px solid var(--ts-accent,var(--ts-meerblau));}

/* === Reisebuero-Band === */
.ts-band{background:linear-gradient(120deg,#167D9A 0%,#34AFCB 100%);color:#fff;}
.ts-band .ts-wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:46px;flex-wrap:wrap;}
.ts-band h2{color:#fff;font-size:1.6rem;max-width:24ch;}
.ts-band p{color:#f0fbff;margin:.5rem 0 0;max-width:52ch;}

/* === FAQ === */
.ts-faq details{background:#fff;border:1px solid var(--ts-line);border-radius:10px;margin-bottom:12px;}
.ts-faq summary{cursor:pointer;padding:16px 18px;font-weight:700;color:var(--ts-nacht);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.ts-faq summary::-webkit-details-marker{display:none;}
.ts-faq summary::after{content:"+";color:var(--ts-meerblau);font-size:1.4rem;line-height:1;}
.ts-faq details[open] summary::after{content:"\2013";}
.ts-faq .ts-faq__a{padding:0 18px 16px;color:#54585a;}

/* === Footer === */
.ts-footer{background:var(--ts-meerblau-tief);color:var(--ts-kalk);}
.ts-footer .ts-wrap{padding:54px 22px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;}
.ts-footer h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .8rem;}
.ts-footer a{color:var(--ts-kalk);display:block;padding:.18rem 0;font-size:.95rem;opacity:.85;text-decoration:none;}
.ts-footer a:hover{opacity:1;color:#fff;}
.ts-footer__desc{font-size:.95rem;opacity:.8;max-width:34ch;}
.ts-footer__copy{border-top:1px solid rgba(255,255,255,.12);}
.ts-footer__copy .ts-wrap{display:flex;justify-content:space-between;padding:16px 22px;font-size:.85rem;opacity:.75;flex-wrap:wrap;gap:.5rem;}

@media(max-width:900px){
	.ts-grid--3,.ts-grid--4{grid-template-columns:repeat(2,1fr);}
	.ts-footer .ts-wrap{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
	.ts-grid--3,.ts-grid--4{grid-template-columns:1fr;}
	.ts-footer .ts-wrap{grid-template-columns:1fr;}
}