/* Atemrhythmus – Layout nach Vorlage der bisherigen Jimdo-Seite */
@font-face{font-family:"Arimo";src:url(../fonts/arimo.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Allura";src:url(../fonts/allura.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --text:#333332;        /* Fliesstext */
  --title:#444444;       /* Website-Titel */
  --nav:#355662;         /* Navigation */
  --link:#3986a0;        /* Links */
  --section:#ebebeb;     /* graue Fläche */
  --box:rgba(246,246,246,.5);
  --max:1024px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:16px/24px Arimo,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto;border:0;vertical-align:top}
a{color:var(--link)}
p{margin:0}
p + p,ul + p{margin-top:24px}
p.tight + p.tight{margin-top:0}
ul{margin:0 0 16px;padding:0 0 0 30px}
ul:last-child{margin-bottom:0}
p + ul{margin-top:0}
h3{font-weight:400;font-size:24px;line-height:30px;margin:0;color:var(--text)}
.inner{max-width:var(--max);margin:0 auto}

/* ---------- Navigation (fixiert) ---------- */
.navigation{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;padding:0 40px}
.navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.navigation a{display:block;padding:11px 15px 10px;font-size:12px;line-height:28px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--nav)}
.navigation li:first-child a{padding-left:15px}
.navigation a.current{font-weight:700}
.navigation a:hover{text-decoration:underline}
.navigation__inner{max-width:var(--max);margin:0 auto}
.burger{display:none}

/* ---------- Header ---------- */
.header{padding:120px 40px 80px;background:#fff center/cover no-repeat;background-position:57.19% 51.1%}
.logo{height:150px}
.logo img{margin:5px;width:140px;height:140px}
.site-title{padding:5px}
.site-title a{font-family:Allura,cursive;font-size:55px;line-height:1.05;color:var(--title);text-decoration:none;display:block}

/* ---------- Graue Fläche mit Inhalt + Kontakt-Spalte ---------- */
.section{background:var(--section);padding:80px 40px}
.section__grid{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}
.content{width:754px;max-width:100%;background:var(--box);border-radius:10px;padding:20px}
.sidebar{width:251px;flex-shrink:0;padding:20px 10px;border-radius:10px}
.sidebar p{margin:0 5px;font-size:15px;line-height:22.5px}
.sidebar p + p{margin-top:0}

.m{padding:5px}
.spacer{height:30px}
.cta{margin:0}
.btn{display:inline-block;margin:15px 0;padding:10px 15px;background:#ccc;color:#2a2a2a;border:2px solid rgba(255,255,255,.25);text-transform:uppercase;text-decoration:none;font-size:16px;line-height:24px}
.btn:hover{background:#bdbdbd}

/* Spalten (wie Jimdo "Spalten"-Element) */
.hgrid{display:flex;align-items:flex-start}
.hgrid .col{min-width:0}
.hgrid--home .col:first-child{width:253px;flex-shrink:0;padding-right:14px}
.hgrid--home .col:last-child{flex:1}
.badge{padding-top:20px}
.badge img{width:181px}
.hgrid--praxis .col:first-child{flex:1;padding-right:14px}
.hgrid--praxis .col:last-child{width:478px;flex-shrink:0}
.gallery{display:flex;gap:4px}
.gallery img{flex:1;width:50%;height:262px;object-fit:cover}

/* Formular */
.form .row{display:flex;align-items:flex-start;margin-bottom:10px}
.form .row > label,.form .row > span{width:178px;flex-shrink:0}
.form em,.req{color:#d00;font-style:normal}
.form input[type=text],.form input:not([type]),.form input[type=email],.form input[type=tel]{width:263px;max-width:100%;height:45px;padding:10px;border:1px solid var(--text);border-radius:0;font:inherit;color:#333;background:#fff}
.form textarea{width:526px;max-width:100%;height:165px;padding:10px;border:1px solid var(--text);border-radius:0;font:inherit;color:#333;background:#fff;resize:vertical}
.form .submit{padding:10px 15px;background:#f0f0f0;border:1px solid var(--link);font:inherit;color:#000;cursor:pointer}
.form .submit:hover{background:#e4e4e4}
.form .privacy{margin:0}
.form + p{margin-top:24px}
.hp{position:absolute;left:-9999px}
.map iframe{display:block;width:100%;height:400px;border:0}

/* ---------- Footer ---------- */
.footer{padding:0 40px}
.footer__inner{padding:40px 20px;font-size:12.8px;line-height:19.2px}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .navigation{padding:0;background:transparent;height:60px}
  .burger{display:block;position:absolute;top:10px;left:10px;width:44px;height:40px;background:transparent;border:0;cursor:pointer;padding:9px 7px}
  .burger span{display:block;height:3px;background:#000;margin-bottom:6px;border-radius:1px}
  .navigation__inner{display:none}
  .navigation.open{height:auto;bottom:0;background:#fff;overflow:auto}
  .navigation.open .navigation__inner{display:block;padding:70px 20px 20px}
  .navigation.open ul{flex-direction:column}
  .navigation.open a{font-size:14px;padding:12px 10px;border-bottom:1px solid #eee}
  body.menu-open{overflow:hidden}
  .header{padding:80px 20px 40px;min-height:375px}
  .logo{height:150px;text-align:center}
  .site-title a{font-size:30px;line-height:1.05}
  .section{padding:10px}
  .section__grid{flex-direction:column}
  .content{width:100%;padding:10px}
  .sidebar{width:100%;padding:5px;margin-top:10px}
  .hgrid{flex-direction:column}
  .hgrid .col{width:100% !important;padding-right:0 !important}
  .gallery{flex-direction:column}
  .gallery img{width:100%;height:auto}
  .form .row{flex-direction:column}
  .form .row > label{width:auto;margin-bottom:4px}
  .form .row > span{display:none}
  .form input,.form textarea{width:100% !important}
  .footer{padding:0}
  .footer__inner{padding:20px}
}