/* ==========================================================================
   Strohmayer Rechtsanwalt — Stylesheet
   --------------------------------------------------------------------------
   Ersetzt Bootstrap 3 (7.100 Zeilen) durch die tatsächlich verwendeten Regeln.
   Alle Werte sind aus der alten Seite übernommen, das Aussehen ist unverändert.

   Aufbau:
     1. Grundlagen        6. Hero (Hintergrundbild)
     2. Typografie        7. Inhaltsbereiche
     3. Raster            8. Buttons
     4. Hilfsklassen      9. FAQ / Aufklappbereiche
     5. Kopfzeile/Menü   10. Fußzeile
   ========================================================================== */


/* 1. Grundlagen
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Avenir-light, "Amatic SC", sans-serif;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
}

img {
  vertical-align: middle;
  border: 0;
}


/* 2. Typografie
   ========================================================================== */

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }

p {
  margin: 0 0 10px;
}

a {
  color: #337ab7;
  text-decoration: none;
  background-color: transparent;
}

a:hover,
a:focus {
  color: #23527c;
  text-decoration: none;
}

strong {
  font-weight: bold;
}

hr {
  height: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}


/* 3. Raster
   --------------------------------------------------------------------------
   Spalten mit 15px Innenabstand, dadurch ist der Inhalt gegenüber der
   Textbreite um 15px eingerückt — genau wie auf der bisherigen Seite.
   Ab 768px nebeneinander, darunter untereinander.
   ========================================================================== */

.cols {
  display: flex;
  flex-wrap: wrap;
}

.cols > * {
  flex: 0 0 100%;
  max-width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .col-4  { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
  .col-6  { flex: 0 0 50%;          max-width: 50%; }
  .col-8  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
  .col-12 { flex: 0 0 100%;         max-width: 100%; }
}

/* Angaben in zwei Spalten: links die Bezeichnung, rechts der Wert.
   (Kontaktdaten, Lebenslauf, Impressum). Am Handy untereinander. */
.info-row {
  display: flex;
  flex-wrap: wrap;
}

.info-row > * {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .info-row > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* schmale Bezeichnungsspalte, z. B. Jahreszahlen im Lebenslauf */
  .info-row.info-row-narrow > *:first-child { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
  .info-row.info-row-narrow > *:last-child  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
}


/* 4. Hilfsklassen
   ========================================================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-justify { text-align: justify; }

/* Nur am Handy bzw. nur am grossen Bildschirm sichtbar.
   Ersetzt die alten hidden-xs / hidden-sm / hidden-md / hidden-lg. */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* 5. Kopfzeile und Menü
   --------------------------------------------------------------------------
   Am grossen Bildschirm fix am oberen Rand, transparent, Menü rechts.
   Am Handy mitscrollend mit Hamburger-Schaltfläche.
   ========================================================================== */

.site-header {
  position: relative;
  min-height: 60px;
  padding-right: 15px;
  padding-left: 15px;
  background: transparent;
}

@media (min-width: 768px) {
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* Logo */
.brand {
  display: inline-block;
  float: left;
  height: 60px;
  padding: 15px;
  margin-left: -15px;
}

.brand img {
  display: block;
  height: 150px;
  margin-top: -10px;
  margin-left: 2px;
}

.brand:hover,
.brand:focus {
  background-color: transparent;
}

/* Schaltfläche, die das Menü öffnet */
.menu-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin: 13px 0 8px;
  font-family: inherit;
  font-size: 15px;
  color: #141414;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.menu-toggle:focus {
  outline: 0;
}

.menu-toggle:hover {
  color: #31708f;
}

/* Hamburger-Striche (nur am Handy) */
.menu-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #888;
  border-radius: 1px;
}

.menu-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

/* Kleines Dreieck neben "MENÜ" (nur am grossen Bildschirm) */
.menu-toggle .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

@media (max-width: 767px) {
  .menu-toggle {
    margin-right: 0;
    border-color: #ddd;
  }

  .menu-toggle:hover,
  .menu-toggle:focus {
    background-color: #ddd;
  }

  .menu-toggle .caret,
  .menu-toggle .menu-toggle-text {
    display: none;
  }
}

@media (min-width: 768px) {
  .menu-toggle .icon-bar {
    display: none;
  }
}

/* Die Liste der Menüpunkte */
.menu {
  display: none;
  clear: both;
  padding: 0;
  margin: 7.5px 0;
  list-style: none;
}

.menu.is-open {
  display: block;
}

.menu a {
  display: block;
  padding: 10px 15px;
  line-height: 30px;
  color: #141414;
}

.menu a:hover,
.menu a:focus {
  color: #31708f;
  background-color: transparent;
}

.menu .is-current > a {
  color: #31708f;
}

.menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

/* Am grossen Bildschirm klappt das Menü als Kästchen unter "MENÜ" auf */
@media (min-width: 768px) {
  .menu-wrap {
    position: relative;
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 160px;
    padding: 5px 0;
    margin: 0;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }

  .menu a {
    padding: 3px 20px;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
  }

  .menu a:hover,
  .menu a:focus {
    color: #262626;
    background-color: #f5f5f5;
  }

  .menu .is-current > a {
    color: #fff;
    background-color: #337ab7;
  }
}


/* 6. Hero — das Bild, das beim Scrollen stehen bleibt
   --------------------------------------------------------------------------
   WICHTIG: background-attachment "fixed" sorgt dafür, dass das Bild am
   Bildschirm haften bleibt, während das 70vh hohe Fenster darüber wegscrollt.
   Genau dadurch "verschwindet" das Gesicht beim Hinunterscrollen.
   Die feste Breite 1020px (statt "cover") verhindert, dass das Bild auf
   grossen Bildschirmen aufgeblasen wird.
   Diese vier Werte bitte nicht verändern:
       no-repeat / center center / fixed / background-size: 1020px auto
   Am Handy wird stattdessen das Foto strohmayer_small.jpg im Fluss angezeigt.
   ========================================================================== */

.hero {
  height: 70vh;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-right: auto;
  margin-left: auto;
  background-color: #eee;
}

/* Das Hintergrundbild nur am grossen Bildschirm laden: Am Handy ist der
   Block ausgeblendet — ohne diese Abgrenzung laedt das Handy die 165 KB
   trotzdem herunter (unsichtbar, aber im Datenvolumen). */
@media (min-width: 768px) {
  .hero {
    background: url(../images/str1.jpg) no-repeat center center fixed;
    background-color: #eee;
    background-size: 1020px auto;
  }
}

/* Variante mit 80vh (Formularseite) */
.hero-tall {
  height: 80vh;
}

/* Kleineres Startbild der Servicepauschale-Seiten.
   Hier scrollt das Bild mit (kein "fixed") und ist 510px breit. */
.hero-small {
  height: 400px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #eee;
}

@media (min-width: 768px) {
  .hero-small {
    background: url(../images/strohmayer_new.jpg) no-repeat center;
    background-color: #eee;
    background-size: 510px auto;
  }
}

/* Das Foto am Handy */
.hero-photo {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto; /* Hoehe folgt der Breite — sonst verzerrt das height-Attribut das Bild */
  margin: -5px auto 5px;
}

/* Der graue Zitatstreifen, der 34px in das Hero-Bild hineinragt */
.tagline {
  max-width: 650px;
  padding: 13px;
  margin: -34px auto 0;
  text-align: center;
  background-color: #eee;
}

/* Startbereich der Startseite
   --------------------------------------------------------------------------
   Am grossen Bildschirm:  Bild → Zitat → Name
   Am Handy:               Foto → Name → Schaltflächen → Zitat
   Der Text steht nur einmal im HTML, die Reihenfolge macht "order". */
.intro {
  display: flex;
  flex-direction: column;
}

/* Volle Breite: sonst schrumpfen die Blöcke durch ihre auto-Ränder zusammen */
.intro > * {
  flex: none;
  width: 100%;
}

@media (max-width: 767px) {
  .intro .hero-photo   { order: 1; }
  .intro .name-band    { order: 2; }
  .intro .intro-buttons { order: 3; }
  .intro .tagline      { order: 4; }

  /* Am Handy ohne grauen Streifen und ohne Überlappung */
  .tagline {
    max-width: none;
    padding: 0 15px;
    margin: 20px auto 15px;
    background-color: transparent;
  }
}


/* 7. Inhaltsbereiche
   ========================================================================== */

/* Der zentrierte Textblock, in dem der gesamte Seiteninhalt steht */
.wrap {
  max-width: 800px;
  padding-top: 30px;
  margin-right: auto;
  margin-left: auto;
}

.wrap-flush {
  padding-top: 0;
}

/* Der Namenszug direkt unter dem Hero-Bild */
.name-band {
  max-width: 800px;
  margin: -50px auto 0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.name-band h3 {
  margin-top: 80px;
  margin-bottom: -20px;
  text-align: center;
}

@media (max-width: 767px) {
  .name-band {
    padding: 0 15px;
    margin-top: 0;
    border: 0;
  }

  /* Trennlinie unter dem Namen: oben wie unten 20px Abstand.
     (Die Aussenabstaende addieren sich hier statt zu verschmelzen,
     darum die Linie selbst um 10px kuerzen.) */
  .intro-buttons hr {
    margin-top: 10px;
  }

  .name-band h3 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

/* Überschrift einer Unterseite (Abstand zum Zitatstreifen darüber) */
.page-title {
  margin-top: 25px;
  margin-bottom: 0;
  text-align: center;
}

/* Auf Seiten mit Namenszug darüber steht die Überschrift enger */
.page-title-tight {
  margin-top: 40px;
}

/* Trennlinie unter der Seitenüberschrift — 15px eingerückt wie die Spalten */
.page-title + hr {
  margin: 20px 15px 35px;
}

/* Kartenausschnitt (Google Maps) */
.map {
  width: 100%;
  max-width: 770px;
  height: 400px;
  margin: 5px 0 15px 15px;
  background-color: #eee;
}

/* Google-Bewertungen: über die volle Breite, nicht auf 800px begrenzt.
   overflow-x verhindert, dass das eingebundene Widget die Seite am Handy
   breiter macht als den Bildschirm (dadurch liess sie sich seitlich schieben). */
.reviews {
  margin-top: 30px;
  overflow-x: hidden;
}

/* Artikelseiten (Verfahren, Projekte, Ratgeber) */
.article {
  max-width: 800px;
  padding: 0 20px;
  margin: -50px auto 0;
}

.article-title {
  margin-top: 80px;
  margin-bottom: 0;
  text-align: center;
}

.article-byline {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.article p {
  margin-bottom: 30px;
}

.article h2 {
  margin-top: 35px;
  font-size: 24px;
}

.article ul,
.article ol {
  margin-bottom: 20px;
  padding-left: 25px;
}

.article li {
  margin-bottom: 6px;
}

.article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
}

@media (max-width: 767px) {
  .article {
    margin-top: 0;
  }

  .article-title {
    margin-top: 20px;
  }
}

/* Fließtextabsatz mit etwas Abstand nach oben */
.text-block {
  margin-top: 20px;
}

/* Aufzählungen (Publikationen, Verfahren): überall gleicher Zeilenabstand */
.entry-list p {
  margin-bottom: 20px;
}

/* Am Handy bekommt der Inhalt seitlichen Abstand */
@media (max-width: 767px) {
  .wrap {
    padding-right: 15px;
    padding-left: 15px;
  }
}


/* Musterschreiben zum Abschreiben */
.letter-page {
  padding-top: 90px;
}

.letter {
  padding: 0 15px;
  margin-top: 20px;
  text-align: justify;
}

/* Kontaktseite: Formular mittig, passt sich der Bildschirmbreite an */
.form-page {
  padding-top: 90px;
  text-align: center;
}

.contact-form {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border: 0;
}


/* 8. Buttons
   ========================================================================== */

/* Block mit den grossen Schaltflächen unter dem Namenszug */
.cta-block {
  max-width: 800px;
  padding-top: 12px;
  margin-right: auto;
  margin-left: auto;
}

/* Grosse Schaltfläche ("Jetzt kontaktieren", "… beauftragen" …).
   Steht der Button mitten im Text, gilt der normale Abstand von 35px
   (der kommt von .cta-button). */
.cta {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

/* Nur im freistehenden Block am Seitenende rückt der Button enger heran —
   sonst klafft unter der Schaltfläche eine Lücke. */
.cta-block .cta {
  margin-bottom: -55px;
}

.cta-block .cta + .cta {
  margin-top: 10px;
}

/* Am Handy sassen die Knöpfe schon immer dichter am Text (19px/15px) */
@media (max-width: 767px) {
  .cta-block {
    padding-top: 0;
    margin-bottom: 20px;
  }

  .cta-block .cta {
    margin-bottom: 0;
  }

  .cta-block .cta + .cta {
    margin-top: 0;
  }

  .cta-block .cta-button {
    margin: 5px 0 0;
  }

  .cta-block .cta + .cta .cta-button {
    margin-top: 15px;
  }
}

.cta-button {
  display: inline-block;
  padding: 10px 35px;
  margin: 35px 0;
  font-size: 18px;
  color: #337ab7;
  text-decoration: none;
  vertical-align: middle;
  background: #eee;
  border-radius: 0;
  transition-duration: .3s;
}

.cta-button:hover {
  color: #337ab7;
  transform: scale(1.1);
}

/* Hervorgehobene grüne Schaltfläche (Servicepauschale) */
.cta-button-primary {
  padding: 15px 40px;
  font-size: 22px;
  color: #fff;
  background: #28a745;
}

.cta-button-primary:hover {
  color: #fff;
}

/* Die drei hellblauen Schaltflächen am Handy (Anruf / E-Mail / Route) */
.contact-buttons {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.contact-buttons + .contact-buttons {
  margin-top: 4px;
}

.btn {
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3333333;
  color: #337ab7;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: rgba(235, 243, 255, .99);
  background-image: none;
  border: 1px solid transparent;
  border-radius: 6px;
}

.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}


/* 9. FAQ / Aufklappbereiche (Seite "Servicepauschale")
   ========================================================================== */

.faq {
  margin-bottom: 20px;
}

.faq-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.faq-item + .faq-item {
  margin-top: 5px;
}

.faq-question {
  display: block;
  width: 100%;
  padding: 10px 15px;
  font-family: inherit;
  font-size: 16px;
  color: #333;
  text-align: left;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 0;
  border-radius: 3px 3px 0 0;
}

.faq-question::after {
  float: right;
  content: "\25BE";
  transition: transform .2s;
}

.faq-question[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 15px;
  border-top: 1px solid #ddd;
}

.faq-answer.is-open {
  display: block;
}


/* 10. Fußzeile
   ========================================================================== */

.site-footer {
  max-width: 800px;
  padding: 0 15px;
  margin-right: auto;
  margin-left: auto;
}

.site-footer p {
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 15px;
  text-align: center;
}