/* heilende Stadt e.V. – 2026 Neubau, optisch 1:1 zur Vorlage (IconScreen 10.2013) */
/* CSS reset & HTML5 old browser & img 100% --------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } strong, b { font-weight: bold; } i, em, blockquote { font-style: italic; } html, body { min-height: 100%; } img { background: transparent; border: 0; } img, embed, object, video { max-width: 100%; height: inherit; }

/* CLEARFIX ----------------------------------------------------------------------------------------------------- */
.group:after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------------------------------------------------------------------
Design-Tokens (Farben/Fonts/Layout als Custom Properties statt ueberall wiederholter Werte) */
:root {
  --color-text: #333333;
  --color-brand: #a8b000;
  --color-muted: #909090;
  --color-muted-light: #989898;
  --color-hairline: #ededed;
  --color-panel-bg: #f8f8f8;
  --color-accent-bg: rgb(200, 210, 0);
  --color-underline: #a9a9a9;
  --font-sans: TheSansPlain, Arial, sans-serif;
  --font-serif: TheSerifBold, Arial, sans-serif;
  --container-width: 1060px;
}

/* ---------------------------------------------------------------------------------------------------------------------
Fonts */
@font-face { font-family: "TheSansPlain"; src: url("/fonts/TheSans_B2_5_.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "TheSerifBold"; src: url("/fonts/TheSerif_7c_.woff") format("woff"); font-weight: normal; font-style: normal; }

/* ---------------------------------------------------------------------------------------------------------------------
Basics */
body { font-size: 100%; line-height: 1.6em; font-family: var(--font-sans);
color: var(--color-text); width: 100%; min-width: 290px; text-align: center; }

img#FBbutton { position: absolute; width: 100px !important; height: 27px !important; margin-top: 0px; z-index: 100; margin-left: 276px;
opacity: .5; transition: opacity .25s ease-in-out; }
img#FBbutton:hover { opacity: 1; }

/* ---------------------------------------------------------------------------------------------------------------------
Grid */
header, article, section, footer { margin: 0 auto; }
article.intro { margin-bottom: 1em; }
article, section, #topteaser-wrap { max-width: var(--container-width); }

/* ---------------------------------------------------------------------------------------------------------------------
Logo */
#logo { width: 8.750em; height: 7.125em; display: block; margin: 0 auto; padding: 1.125em 0 1.375em 0; }
img#logo { transition: opacity 2s ease; }
img#logo:hover { opacity: 0.6; }

/* ---------------------------------------------------------------------------------------------------------------------
Header Navigation */
header a { color: #646464; }
header a:hover, .active, li.active a { color: var(--color-brand); }
#topnav-wrap { border-top: 1px solid var(--color-hairline); border-bottom: 3px solid var(--color-hairline); padding: 1.1em 0 1.2em 0; }
#topnav { display: flex; justify-content: center; list-style: none; width: 75%; margin: 0 auto; }
#topnav li { width: 25%; font-size: 0.875em; line-height: 1em; text-transform: uppercase; text-align: center; }
.subnav-wrap { width: 100%; background: #ffffff; border-bottom: 3px solid var(--color-hairline);
 opacity: 0.95; position: absolute; z-index: 1000; padding-bottom: 2em; }
.subnav-wrap[hidden] { display: none; }
.subnav-list { list-style: none; width: 62%; margin: 0 auto; }
.subnav-list li { display: flex; align-items: baseline; gap: 1em; padding: 13px 1em 3px 3px; }
.subnav-link { width: 33%; flex-shrink: 0; font-size: 1.125em; text-align: left; text-transform: uppercase; display: block; border-bottom: 1px solid var(--color-underline); }
.subnav-link:hover, .subnav-link.active { border-bottom: 1px solid var(--color-brand); }
.subnav-teaser { text-align: left; color: var(--color-muted-light); font-size: 0.875em; }
.subnav-teaser a { border-bottom: 1px solid var(--color-underline); margin-right: 8px; padding-bottom: 3px; }
.subnav-teaser a:hover, .subnav-teaser a.active { border-bottom: 1px solid var(--color-brand); }

/* ---------------------------------------------------------------------------------------------------------------------
Article */
article { padding: 0 2%; }
a { text-decoration: none; color: var(--color-brand); }
h1 { font-family: var(--font-serif); font-size: 2.5em; line-height: 1em; padding: 0.9em 0 1em 0; }
p, ul { margin-top: 1.625em; }
p { hyphens: auto; text-align: left; }
.nohyphens { hyphens: none; }
.leftColumn { float: left; width: 46%; }
.rightColumn { float: right; width: 46%; }
.oneColumn { width: 55%; margin: 0 auto; }
figcaption { font-size: 0.875em; line-height: 1.2em; color: var(--color-muted); padding: 1em 0; border-bottom: 1px solid var(--color-hairline); text-align: left; }
.dropcap, strong { font-family: var(--font-serif); font-weight: normal; font-size: 1.3em; line-height: 1em; }
ul { text-align: left; list-style-type: circle; padding-left: 22px; }

.leftColumn li, .rightColumn li { padding-bottom: 5px; }

#innernav { color: var(--color-muted); text-align: center; list-style: none;
			padding-top: 1em;  margin-top:5em; border-top: 1px solid var(--color-hairline); }
#innernav a.here { font-weight: bold; color: var(--color-text); }

img#greenGym { width: 65%; height: 65%; }

/* ---------------------------------------------------------------------------------------------------------------------
Section Standard */
section { padding: 2%; }
section a { color: var(--color-text); }
section .cat { display: block; color: var(--color-muted); font-size: 0.875em; }
section .cat a { color: var(--color-muted); text-transform: uppercase; }

/* ---------------------------------------------------------------------------------------------------------------------
Section Top Teaser */
section.topteaser-wrap { padding: 4% 2% 2% 2%; position: relative; }
section.topteaser-wrap div {

width: 55%;
  height: 220px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 45%; left: 0; bottom: 0; right: 0; padding: 2%;

color: var(--color-text); background: rgba(255, 255, 255, 0.8); }
section.topteaser-wrap div h1 { padding: 0 0 0.25em 0; }
section.topteaser-wrap div p { margin-top: 0; }

/* ---------------------------------------------------------------------------------------------------------------------
Button */

.btn {
background: #e0e83c; background-image: linear-gradient(to bottom, #e0e83c, #9ea30d);
border-radius: 13px;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none; }

.btn:hover {
background: #3b5998; background-image: linear-gradient(to bottom, #3b5998, #788cb5);
text-decoration: none; }

/* ---------------------------------------------------------------------------------------------------------------------
Section 3er Teaser */
.3er-teaser { margin: 0 auto; }
.teaser { float: left; width: 30%; margin-right: 5%; background: var(--color-hairline); padding: 0 !important; }
.right { float: right !important; margin-right: 0 !important; }
.teaser h3 { padding: 1em 0 0 1em; font-size: 0.875em; line-height: 1.2em; color: var(--color-muted); text-transform: uppercase; text-align: left; }
.teaser h2 { padding: 0.25em 0 0.75em 0.6em; font-family: var(--font-serif); font-size: 1.3em; line-height: 1em; text-align: left; }
.teaser p { padding: 0.25em 1em 1em 1em; margin-top: 0; }

.hp p { min-height: 12em; }
.team p { min-height: 18em; }

.jobtitle, .contact { display: block; font-size: 0.875em; line-height: 1.5em; text-align: center; font-weight: bold; }
.resume { display: block; margin: 6% 2%; font-size: 0.875em; line-height: 1.5em; text-align: left; color: var(--color-muted); }
.contact a { font-size: 0.75em; color: var(--color-brand); }

/* ---------------------------------------------------------------------------------------------------------------------
Section Testimonials */

section blockquote { color: #fff; background: var(--color-accent-bg) url(/images/arrow3.jpg) center bottom no-repeat; }
section blockquote p { font-family: var(--font-serif); font-size: 180%; line-height: 137%;
padding: 1.6em 4em 2.5em 4em;
background: url(/images/quote.png) no-repeat 40px 80px;
text-align: left; font-style: normal; width: 65%; margin: 0 auto; min-height: 140px; }

section blockquote .name { display: block; text-align: left; line-height: 1.2; font-size: 12px;
font-family: var(--font-sans); color: #fff; }

section.testimonial-images { padding: 0 2% 2% 2%; }
section.testimonial-images figure {  width: 82%; margin: 0 auto !important;  }
section.testimonial-images figure img { width: 18.3%; float: left; padding: 0 2% 2% 0; opacity: 0.5; margin: 0 auto; }
#testimonials blockquote { display: none; }

/* ---------------------------------------------------------------------------------------------------------------------
Footer */
footer { background: var(--color-accent-bg); height: 12em; border-top: 8px solid var(--color-accent-bg); margin-top: 15%; }
#line { display: block; width: 100%; border-top: 1px solid white; padding: 0 0 1.2em 0; }
footer img { width: 6.125em; height: 5em; }
.flag { display: none; }

/* ---------------------------------------------------------------------------------------------------------------------
MEDIA QUERIES ----------------------------------------------------------------------------------------------------------
992px */
@media screen and (max-width: 62em) {

/* Section Top Teaser */
section.topteaser-wrap { padding: 4% 2% 2% 2%; }
section.topteaser-wrap div { position: relative; text-align: center; overflow: inherit; height: auto; top: auto; left: 0%; width: auto; padding: 0; }
section.topteaser-wrap div h1 { padding: 0.25em 0 0.25em 0; }
section.topteaser-wrap div p { margin: 0 auto; width: 55%; padding-bottom: 1em; }
}
/* ---------------------------------------------------------------------------------------------------------------------
MEDIA QUERIES ----------------------------------------------------------------------------------------------------------
600px */
@media screen and (max-width: 37.500em) {
/* divers */

.btn { font-size: 12px; padding: 5px 10px 5px 10px; text-decoration: none; }
#topnav { width: 100%; font-size: 0.938em; }
.subnav-teaser { display: none; }
#logo { width: 6.125em; height: 5em; display: block; margin: 0 auto; padding: 1.2em 0 0.688em 0; }
h1 { font-size: 2em; line-height: 1em; padding: 0.5em 0 0.85em; }
figcaption { padding: 0.1em 0 0.5em 0; }
.leftColumn, .rightColumn, .oneColumn, section.topteaser-wrap div p { float: none; width: auto; }
.rightColumn p { margin-top: 1em; }
.contact a { font-size: 1.125em; color: var(--color-brand); }

/* Section 3er Teaser */
#3er-teaser { width: auto; margin: 0 auto; display: inline; }
.teaser { float: none; width: auto; margin-right: 0; background: none; }
.right { float: none !important; }
.teaser img { width: 100%; }
.teaser h3 { padding: 1em 0 0 0; }
.teaser h2 { padding: 0.2em 0 0.5em 0; }
.teaser p { padding: 0 0 2em 0; }
.hp p, .hp team { min-height: inherit; }

/* Section Testimonials */
section blockquote { background-size: 150% }
section blockquote p { font-size: 140%; line-height: 110%; width: 85%; padding: 0.8em 0 2em 0; min-height: 140px; background: none; }

}