/*
Theme Name: Stefanie Straub
Theme URI: https://stefanie-straub.de/
Author: Stefanie Straub
Description: Responsives Design für den mobilen Friseurservice.
Version: 1.1.0
Text Domain: stefanie-straub
*/

:root {
  --bg: #fbf8f3;
  --surface: #fff;
  --soft: #f1ebe3;
  --text: #292722;
  --muted: #6d685f;
  --accent: #8b6c54;
  --accent-dark: #6f523d;
  --border: #e3dbd1;
  --width: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-dark); text-underline-offset: .18em; }
a:hover { color: var(--text); }
p { margin: 0 0 1.1rem; }
h1, h2, h3 {
  margin: 0 0 1rem; color: var(--text);
  font-family: Georgia, "Times New Roman", serif; font-weight: 600;
  line-height: 1.15; letter-spacing: -.025em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.wrap { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.muted, .form-note { color: var(--muted); }
.eyebrow {
  margin-bottom: .85rem; color: var(--accent-dark); font-size: .78rem;
  font-weight: 750; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase;
}

/* Header and navigation */
.site-header { position: relative; z-index: 10; background: rgba(251,248,243,.97); border-bottom: 1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:92px; padding-block:14px; }
.brand { display:inline-flex; flex-direction:column; flex:0 0 auto; color:var(--text); font:700 1.2rem/1.25 Georgia,"Times New Roman",serif; text-decoration:none; }
.brand small { margin-top:4px; color:var(--muted); font:500 .78rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.02em; }
.site-header nav ul { display:flex; align-items:center; flex-wrap:wrap; gap:8px 28px; margin:0; padding:0; list-style:none; }
.site-header nav li { margin:0; padding:0; }
.site-header nav a { display:inline-block; padding:8px 0; color:var(--text); font-size:.95rem; font-weight:600; text-decoration:none; }
.site-header nav a:hover { color:var(--accent-dark); }

/* Buttons */
a.button, .button, button, input[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:12px 22px; border:1px solid var(--accent); border-radius:999px;
  background:var(--accent); color:#fff; font:inherit; font-size:.96rem; font-weight:700; line-height:1.35;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease;
}
a.button:hover, .button:hover, button:hover, input[type="submit"]:hover {
  border-color:var(--accent-dark); background:var(--accent-dark); color:#fff; transform:translateY(-1px);
}

/* Hero */
.hero { padding:clamp(48px,8vw,104px) 0; background:linear-gradient(135deg,#fbf8f3 0%,#f2e9df 100%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.85fr); align-items:center; gap:clamp(36px,7vw,88px); }
.hero-content { min-width:0; }
.hero-content > p { max-width:620px; color:#514d46; font-size:clamp(1.05rem,1.5vw,1.2rem); }
.hero-buttons { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:16px !important; margin:26px 0 !important; }
.hero-buttons > a.button { position:static !important; float:none !important; max-width:100%; margin:0 !important; transform:none !important; }
.hero-buttons > a.button + a.button { margin-top:0 !important; }
.hero-art, .hero-portrait { min-width:0; }
.hero-portrait img { width:100%; max-height:650px; aspect-ratio:4/5; border-radius:46% 46% 20px 20px; object-fit:cover; object-position:center 35%; box-shadow:0 12px 35px rgba(54,42,30,.08); }
.form-note { font-size:.9rem; }

/* Sections and service cards */
.section { padding:clamp(56px,8vw,100px) 0; }
.section-head { max-width:720px; margin:0 auto 42px; text-align:center; }
.section-head .muted { max-width:620px; margin-inline:auto; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card { min-width:0; padding:30px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:0 5px 20px rgba(54,42,30,.035); }
.card .icon { display:inline-grid; width:46px; height:46px; margin-bottom:18px; place-items:center; border-radius:50%; background:var(--soft); color:var(--accent-dark); font-size:1.35rem; }
.card p { margin-bottom:0; color:var(--muted); }
.soft { background:var(--soft); }
.about-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); align-items:center; gap:clamp(34px,7vw,88px); }
.about-photo img { width:100%; max-height:620px; aspect-ratio:4/5; border-radius:18px; object-fit:cover; object-position:center 35%; box-shadow:0 12px 35px rgba(54,42,30,.08); }

/* Contact */
.contact-band { padding:clamp(54px,7vw,88px) 0; background:#332e29; color:#fdfaf6; }
.contact-band h2, .contact-band h3 { color:#fff; }
.contact-band p, .contact-band .eyebrow { color:#eee3d8; }
.contact-band a:not(.button) { color:#f5d9bb; }
.contact-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.75fr); align-items:start; gap:clamp(32px,6vw,76px); }
.contact-inner > div:last-child { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.contact-inner > div:last-child p { margin-bottom:0; }
.site-footer { padding:28px 0; background:#27231f; color:#e9e0d7; font-size:.9rem; }
.site-footer a { color:#f5d9bb; }
:focus-visible { outline:3px solid #bd8c60; outline-offset:3px; }

@media (max-width:900px) {
  .header-inner { flex-wrap:wrap; gap:12px 22px; }
  .site-header nav { order:3; width:100%; }
  .site-header nav ul { gap:6px 22px; }
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(250px,.8fr); gap:32px; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-inner { grid-template-columns:minmax(0,1fr) minmax(230px,.8fr); }
}
@media (max-width:600px) {
  html { scroll-padding-top:18px; }
  body { font-size:16px; line-height:1.65; }
  .wrap { width:calc(100% - 36px); }
  .header-inner { align-items:flex-start; min-height:0; padding-block:18px; gap:14px; }
  .brand { font-size:1.1rem; }
  .brand small { font-size:.78rem; }
  .site-header nav { order:3; width:100%; }
  .site-header nav ul { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:0; list-style:none; }
  .site-header nav a { padding:5px 0; font-size:.94rem; }
  .site-header .header-inner > a.button { min-height:42px; padding:10px 16px; font-size:.9rem; }
  .hero { padding:42px 0 48px; }
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:30px; }
  .hero-content > p { font-size:1.03rem; }
  h1 { font-size:clamp(2.35rem,11vw,3.25rem); line-height:1.08; }
  h2 { font-size:clamp(1.8rem,8vw,2.35rem); }
  .hero-buttons { align-items:stretch !important; gap:12px !important; margin:22px 0 !important; }
  .hero-buttons > a.button { display:flex !important; width:100% !important; min-height:50px; margin:0 !important; box-sizing:border-box !important; }
  .hero-portrait img { width:100%; max-height:none; aspect-ratio:4/4.2; border-radius:22px; object-position:center 30%; }
  .section { padding:54px 0; }
  .section-head { margin-bottom:28px; text-align:left; }
  .cards { grid-template-columns:minmax(0,1fr); gap:14px; }
  .card { padding:24px; }
  .about-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .about-photo img { max-height:none; aspect-ratio:4/3.5; border-radius:20px; }
  .contact-inner { grid-template-columns:minmax(0,1fr); gap:24px; }
  .contact-inner > div:last-child { align-items:stretch; }
  .contact-inner > div:last-child .button { width:100%; }
}
@media (max-width:360px) {
  .wrap { width:calc(100% - 28px); }
  .header-inner > a.button { width:100%; }
  .site-header nav ul { gap:4px 14px; }
  h1 { font-size:2.15rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; }
}