/*
Theme Name: Custom Template
Author: Toni Ritter
Author URI: https://www.toni-ritter.de
Description: Ein leichtes, aufgeräumtes WordPress-Theme mit Fokus auf Lesbarkeit und klare Typografie. Ideal für Coaching-, Therapie- und Business-Websites.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: toni-clean
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@charset "UTF-8";

/* Project Specific colors */
:root {
  --brand: var(--color-green-800);
  --brand-alt: var(--color-emerald-800);
  --text: var(--color-gray-800);
  --muted: #475569;
  --border: var(--color-gray-50);
  --bg: #ffffff;
  --bg-muted: rgba(255,255,255,0.9);
}

/* Basis-Reset */
* { box-sizing: border-box; }

html { 
	scroll-behavior: smooth;
} 

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-size:16px;
}


.header { 
	border-bottom: 1px solid #e5e7eb; 
	position: sticky; 
	top: 0; 
	background: var(--bg-muted); 
	z-index: 50;
	padding: 1rem 0;
}
.header-inner { 
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	gap: 1rem; 
	padding: 1rem 0; 
	flex-wrap: wrap;
}

header .branding {
	display: flex;
    gap: .75rem;
    align-items: center;
}

.branding .title {
	font-weight:600;
	color: var(--brand);
}
.branding img {
	max-width: 48px;
}
.branding .tagline {
	font-weight:400;
	color: var(--text);
}

.header-inner a {
	color: none;
	text-decoration: none;
}
.header-inner a:hover {
	text-decoration: none;
}

nav {
	display:flex; 
	gap:0.5rem; 
	flex-wrap: wrap;
}

nav li {
	list-style-type:none;
}

nav li a {
	color: var(--text);
	padding:.5rem .75rem; 
	border-radius:.75rem;
}

nav li a:hover, nav .current_page_item > a {
	color: var(--brand-alt);
	background: var(--border);
}

header .right {
	gap: 5px;
    display: flex;
    flex-direction: column;
}

header .right .phone a {
	color: var(--text);
	font-size: 0.8rem;
}

header .right a.button {
	padding: 0.5rem 1rem;
	border-radius:.75rem;
	background: #4CAE4F;
	background: linear-gradient(90deg, rgba(76, 174, 79, 1) 0%, rgba(249, 116, 21, 1) 100%);
	color: #fff;
	font-size:0.875rem;
	line-height: 1.25rem;
}

.container {
	max-width: 1400px; 
	padding: 0 1.25rem; 
	margin: 0 auto; 
}

footer {
	background-color: #000;
	color: #fff;
}

footer .container {
	display:flex; 
	flex-wrap:wrap; 
	gap:1rem; 
	align-items:center; 
	justify-content:space-between;
}




/*
a { color: #0ea5e9; text-decoration: none; }
a:hover { text-decoration: underline; } */
img { max-width: 100%; height: auto; display: block; }


.site-title { font-size: 1.125rem; font-weight: 700; margin: 0; }
.tagline { color:#6b7280; font-size: .95rem; margin: 0; }

.hero { padding: 5rem 0 3rem; background: linear-gradient(180deg,#f8fafc, #fff); }
.hero h1 { font-size: clamp(2rem,4vw,3rem); margin:.25rem 0 0; }
.hero p { max-width: 60ch; color:#475569; }
.btn { display:inline-block; padding:.75rem 1rem; border-radius:.75rem; font-weight:600; border:1px solid #0ea5e9; }
.btn--primary { background:#0ea5e9; color:#fff; }
.btn--ghost { color:#0ea5e9; background:transparent; }
.grid { display:grid; gap:1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.card { border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; box-shadow: 0 1px 1px rgba(0,0,0,0.02); }
.card h3 { margin-top:0; }
.post-meta { color:#6b7280; font-size:.9rem; }
footer.site-footer { border-top:1px solid #e5e7eb; margin-top: 3rem; padding: 2rem 0; color:#475569; }
.search-form { display:flex; gap:.5rem; }
.search-form input[type="search"] { flex:1; padding:.65rem .75rem; border:1px solid #e5e7eb; border-radius:.75rem; }
.search-form input[type="submit"] { padding:.65rem .9rem; border-radius:.75rem; border:1px solid #e5e7eb; background:#f8fafc; cursor:pointer; }
.wp-caption { max-width: 100%; }
.alignwide { max-width: 1200px; margin-left:auto; margin-right:auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }