/* =============================================================
   Kanzlei Cremer & Thelen — Seiteninhalte
   Requires base.css to be loaded first.
   ============================================================= */

/* ---------- generischer Fließtext (Seiten, Rechtstexte, Blogartikel) ---------- */
.entry-content{max-width:68ch; font-size:var(--step-lead); color:var(--text-soft);}
.entry-content h2{margin:1.6em 0 .6em; color:var(--navy);}
.entry-content h3{margin:1.3em 0 .5em;}
.entry-content p + p,
.entry-content ul + p,
.entry-content p + ul{margin-top:1em;}
.entry-content ul,
.entry-content ol{padding-left:1.3em; margin-top:.6em;}
.entry-content li + li{margin-top:.4em;}
.entry-content a{color:var(--navy); text-decoration-color:var(--gold); text-underline-offset:3px;}
.entry-content blockquote{
	border-left:3px solid var(--gold);
	padding-left:1.2em; margin:1.4em 0;
	font-style:italic; color:var(--text-mute);
}

/* =============================================================
   Startseite: Hero
   ============================================================= */
.hero{
	padding-block:clamp(64px, 9vw, 120px) clamp(48px, 6vw, 80px);
	background:linear-gradient(180deg, var(--navy-tint) 0%, var(--cream) 100%);
}
.hero-inner{max-width:52ch;}
.hero h1{margin-top:6px;}
.hero-text{font-size:var(--step-lead); color:var(--text-soft); margin-top:20px; max-width:56ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.hero-actions .cta-button.ist-ghost{
	background:transparent; color:var(--navy); box-shadow:none;
	border:1.5px solid var(--line-strong);
}
.hero-actions .cta-button.ist-ghost:hover{border-color:var(--navy); background:var(--surface);}

/* ---------- Kennzahlen-Leiste ---------- */
.kennzahlen{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(20px, 3vw, 40px);
	margin-top:clamp(48px, 6vw, 72px);
	padding-top:clamp(32px, 4vw, 48px);
	border-top:1px solid var(--line-strong);
}
.kennzahl-wert{
	font-family:'Fraunces', serif; font-weight:600;
	font-size:clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
	color:var(--navy);
	display:block;
}
.kennzahl-text{font-size:0.9375rem; color:var(--text-mute); margin-top:4px; max-width:22ch;}

@media (max-width:700px){
	.kennzahlen{grid-template-columns:1fr; gap:24px;}
}

/* =============================================================
   Rechtsgebiete
   ============================================================= */
.rechtsgebiete-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:clamp(18px, 2.4vw, 28px);
}
.rechtsgebiet-karte{
	display:flex; flex-direction:column; align-items:flex-start;
	padding:clamp(24px, 3vw, 32px);
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	text-decoration:none;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), border-color var(--dauer) var(--ease);
}
.rechtsgebiet-karte:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-md);
	border-color:transparent;
}
.rechtsgebiet-icon{
	width:38px; height:38px; padding:9px;
	color:var(--gold-deep);
	background:var(--gold-tint);
	border-radius:11px;
	margin-bottom:18px;
	transition:background var(--dauer) var(--ease), color var(--dauer) var(--ease);
}
.rechtsgebiet-karte:hover .rechtsgebiet-icon{background:var(--navy); color:var(--gold-tint);}
.rechtsgebiet-karte h3{margin-bottom:8px;}
.rechtsgebiet-karte p{color:var(--text-soft); font-size:0.9375rem; flex-grow:1;}
.rechtsgebiet-mehr{
	display:inline-flex; align-items:center; gap:6px;
	margin-top:18px; font-size:0.875rem; font-weight:600; color:var(--navy);
}
.rechtsgebiet-mehr svg{width:16px; height:16px; transition:transform var(--dauer) var(--ease);}
.rechtsgebiet-karte:hover .rechtsgebiet-mehr svg{transform:translateX(4px);}

@media (max-width:900px){
	.rechtsgebiete-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
	.rechtsgebiete-grid{grid-template-columns:1fr;}
}

/* ---------- Detailseite eines Rechtsgebiets ---------- */
.rechtsgebiet-layout{
	display:grid; grid-template-columns:1fr 300px;
	gap:clamp(32px, 5vw, 64px);
	align-items:start;
}
.rechtsgebiet-leistungen{
	list-style:none; margin-top:24px;
	display:grid; gap:12px;
}
.rechtsgebiet-leistungen li{
	display:flex; gap:10px; align-items:flex-start;
	font-size:var(--step-lead); color:var(--text);
}
.rechtsgebiet-leistungen svg{width:20px; height:20px; flex-shrink:0; margin-top:3px; color:var(--gold-deep);}

.rechtsgebiet-sidebar{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(22px, 2.6vw, 28px);
	position:sticky; top:96px;
}
.rechtsgebiet-sidebar h3{margin-bottom:14px;}
.rechtsgebiet-sidebar .cta-button{width:100%; justify-content:center; margin-top:18px;}

@media (max-width:820px){
	.rechtsgebiet-layout{grid-template-columns:1fr;}
	.rechtsgebiet-sidebar{position:static;}
}

/* =============================================================
   Team
   ============================================================= */
.kanzlei-buero-bild{
	margin-bottom:clamp(32px, 4vw, 48px);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-md);
}
.kanzlei-buero-bild img{display:block; width:100%; height:auto;}

.team-grid{
	display:grid; grid-template-columns:repeat(2, 1fr);
	gap:clamp(24px, 3vw, 40px);
}
.team-karte{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(28px, 3.2vw, 40px);
	text-align:center;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.team-karte:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.team-avatar{margin-bottom:18px;}
.team-foto{
	border-radius:50%;
	object-fit:cover;
	aspect-ratio:1;
	border:2px solid var(--gold);
	box-shadow:var(--shadow-sm);
}
.team-titel{color:var(--gold-deep); font-weight:600; font-size:0.9375rem; margin-bottom:16px;}
.team-zitat{
	font-family:'Fraunces', serif; font-style:italic; font-size:1.125rem;
	color:var(--text-soft); max-width:36ch; margin-inline:auto;
}
.team-werdegang{text-align:left; margin-top:22px; font-size:0.9375rem; color:var(--text-soft);}
.team-werdegang p + p{margin-top:10px;}
.team-fokus{text-align:left; margin-top:22px; padding-top:20px; border-top:1px solid var(--line);}
.team-fokus-titel{
	display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.05em;
	text-transform:uppercase; color:var(--text-mute); margin-bottom:10px;
}
.team-fokus-tags{display:flex; flex-wrap:wrap; gap:8px;}
.team-fokus-tags a{
	font-size:0.8125rem; padding:6px 12px; border-radius:999px;
	background:var(--gold-tint); color:var(--gold-deep); text-decoration:none;
	transition:background var(--dauer) var(--ease);
}
.team-fokus-tags a:hover{background:var(--navy); color:var(--gold-tint);}

@media (max-width:700px){
	.team-grid{grid-template-columns:1fr;}
}

/* =============================================================
   Mandantenstimmen
   ============================================================= */
.sterne{display:inline-flex; gap:2px; color:var(--gold); margin-bottom:14px;}
.sterne svg{width:16px; height:16px;}

.testimonial-karte{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(24px, 2.8vw, 32px);
	height:100%;
	display:flex; flex-direction:column;
}
.testimonial-karte blockquote{
	font-family:'Fraunces', serif; font-size:1.125rem; line-height:1.5;
	color:var(--text); flex-grow:1;
}
.testimonial-karte figcaption{margin-top:18px; display:flex; flex-direction:column; gap:2px;}
.testimonial-name{font-weight:700; font-size:0.9375rem; color:var(--navy);}
.testimonial-gebiet{font-size:0.8125rem; color:var(--text-mute);}

.testimonial-slider{position:relative; overflow:hidden;}
.testimonial-slider-track{
	display:flex;
	transition:transform 0.6s var(--ease);
}
.testimonial-slide{
	flex:0 0 100%;
	max-width:100%;
	padding:4px;
}
@media (min-width:760px){
	.testimonial-slide{flex-basis:50%; max-width:50%;}
}
@media (min-width:1080px){
	.testimonial-slide{flex-basis:33.3333%; max-width:33.3333%;}
}

.testimonial-slider-dots{display:flex; justify-content:center; gap:8px; margin-top:24px;}
.testimonial-slider-dots button{
	width:9px; height:9px; border-radius:50%; border:none;
	background:var(--line-strong); cursor:pointer; padding:0;
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease);
}
.testimonial-slider-dots button[aria-selected="true"]{background:var(--gold); transform:scale(1.25);}

.testimonial-grid{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(18px, 2.4vw, 24px);
}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.testimonial-grid{grid-template-columns:1fr;}}

/* =============================================================
   FAQ (natives <details>/<summary>, kein JS nötig)
   ============================================================= */
.faq-block{background:var(--navy-tint);}
.faq-liste{display:grid; gap:12px; max-width:76ch;}
.faq-eintrag{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
	padding:18px 22px;
}
.faq-eintrag summary{
	cursor:pointer; list-style:none;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	font-weight:600; color:var(--navy);
}
.faq-eintrag summary::-webkit-details-marker{display:none;}
.faq-eintrag summary svg{width:18px; height:18px; flex-shrink:0; transition:transform var(--dauer) var(--ease); color:var(--gold-deep);}
.faq-eintrag[open] summary svg{transform:rotate(180deg);}
.faq-eintrag p{margin-top:14px; color:var(--text-soft); font-size:0.9375rem;}

/* =============================================================
   Schluss-CTA
   ============================================================= */
.schluss-cta{
	background:var(--navy); color:var(--gold-tint);
	text-align:center;
}
.schluss-cta h2{color:var(--gold-tint);}
.schluss-cta p{color:rgba(243,236,221,0.75); max-width:52ch; margin:14px auto 0;}
.schluss-cta .cta-button{margin-top:28px;}

/* =============================================================
   Kontakt
   ============================================================= */
.kontakt-layout{
	display:grid; grid-template-columns:1fr 340px;
	gap:clamp(32px, 5vw, 64px);
	align-items:start;
}
.kontakt-info{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(24px, 3vw, 32px);
	display:grid; gap:20px;
}
.kontakt-info-eintrag{display:flex; gap:12px; align-items:flex-start;}
.kontakt-info-eintrag svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--gold-deep);}
.kontakt-info-eintrag strong{display:block; font-size:0.8125rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); margin-bottom:2px;}

.kontakt-form .feld{margin-top:16px;}
.kontakt-form label{display:block; font-weight:600; font-size:0.9375rem; margin-bottom:6px; color:var(--navy);}
.kontakt-form .pflicht{color:var(--gold-deep);}
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea{
	width:100%; padding:12px 14px;
	border:1px solid var(--line-strong); border-radius:var(--radius-sm);
	font:inherit; color:var(--text); background:var(--surface);
	transition:border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus{
	outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-tint);
}
.feld-honigtopf{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.feld-checkbox{margin-top:18px; display:flex; align-items:flex-start; gap:10px;}
.feld-checkbox label{display:flex; gap:10px; font-weight:400; font-size:0.875rem; color:var(--text-soft);}
.feld-checkbox input{width:auto; margin-top:3px;}
.feld-checkbox a{color:var(--navy);}
.feld-hinweis{margin-top:14px; font-size:0.8125rem; color:var(--text-mute);}
.kontakt-form .btn-primary{
	margin-top:22px; width:100%;
	padding:14px 24px; border:none; border-radius:999px;
	background:var(--navy); color:var(--gold-tint);
	font-weight:600; font-size:0.9375rem; cursor:pointer;
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease);
}
.kontakt-form .btn-primary:hover{background:var(--navy-deep); transform:translateY(-2px);}

.form-bestaetigung{
	background:var(--gold-tint); border:1px solid var(--gold);
	border-radius:var(--radius); padding:28px;
}
.form-bestaetigung-haken{
	display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
	background:var(--gold); color:var(--surface); border-radius:50%; margin-bottom:14px;
}
.form-bestaetigung-haken svg{width:22px; height:22px;}
.form-bestaetigung h3{margin-bottom:8px;}
.form-bestaetigung-klein{margin-top:12px; font-size:0.875rem; color:var(--text-mute);}
.form-hinweis{padding:16px 20px; border-radius:var(--radius-sm); font-size:0.9375rem;}
.form-fehler{background:#FBEAEA; color:#8A2E2E; border:1px solid #E7B9B9;}

@media (max-width:860px){
	.kontakt-layout{grid-template-columns:1fr;}
}

/* =============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================= */
.rechtstext-kopf{max-width:60ch; margin-bottom:32px;}
.rechtstext-toc{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:20px 24px; margin-bottom:32px; max-width:60ch;
}
.rechtstext-toc-titel{display:block; font-weight:700; font-size:0.8125rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); margin-bottom:10px;}
.rechtstext-toc ul{list-style:none; display:grid; gap:6px;}
.rechtstext-toc a{color:var(--navy); text-decoration:none; font-size:0.9375rem;}
.rechtstext-toc a:hover{text-decoration:underline;}
.rechtstext-inhalt{max-width:68ch;}

/* =============================================================
   404
   ============================================================= */
.seite-404{text-align:center; max-width:52ch; margin-inline:auto; padding-block:40px;}
.seite-404 p{color:var(--text-soft); margin:16px 0 28px;}

/* =============================================================
   Ratgeber (Blog)
   ============================================================= */
.ratgeber-grid{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(20px, 2.6vw, 28px);
}
.ratgeber-karte{
	display:flex; flex-direction:column;
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(22px, 2.6vw, 28px);
	text-decoration:none;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.ratgeber-karte:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.ratgeber-kategorie{
	display:inline-block; align-self:flex-start;
	font-size:0.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--gold-deep); background:var(--gold-tint);
	padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.ratgeber-karte h3{margin-bottom:10px;}
.ratgeber-karte p{color:var(--text-soft); font-size:0.9375rem; flex-grow:1;}
.ratgeber-datum{margin-top:16px; font-size:0.8125rem; color:var(--text-mute);}

@media (max-width:900px){.ratgeber-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.ratgeber-grid{grid-template-columns:1fr;}}

.ratgeber-artikel-layout{
	display:grid; grid-template-columns:1fr 300px;
	gap:clamp(32px, 5vw, 64px); align-items:start;
}
.ratgeber-artikel-kopf{max-width:66ch; margin-bottom:32px;}
.ratgeber-artikel-meta{display:flex; gap:14px; align-items:center; color:var(--text-mute); font-size:0.875rem; margin-top:10px;}

.ratgeber-sidebar{
	background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
	padding:clamp(22px, 2.6vw, 28px); position:sticky; top:96px;
}
.ratgeber-sidebar h3{margin-bottom:12px; font-size:1.0625rem;}
.ratgeber-sidebar p{color:var(--text-soft); font-size:0.9375rem; margin-bottom:16px;}
.ratgeber-sidebar .cta-button{width:100%; justify-content:center;}

@media (max-width:820px){
	.ratgeber-artikel-layout{grid-template-columns:1fr;}
	.ratgeber-sidebar{position:static;}
}