/**
  @file HOME.CSS.PHP
  enthält spezielle Formatierungen der Startseite (index.html) www.ziemke-koeln.de
  @author (c) Dezember 2023 by Michael Ziemke, Koeln
  2020-01: Ergänzung img.neublink
  @version 2023-12, 2020-01, 2019-03, 2004-11
*/

  body {
    width: 95%;
    max-width: 24rem;
    margin: 0.2rem auto;
  }
  
  a { margin: 0em 0.1em; }

  header {
    font-size: 1.5rem;
    text-align: center;
  } 
  section {
    display: flex;
    flex-direction: row;
  }  
  main, article, aside {
    flex: 1 100%;  
    display: flex;
    flex-direction: column;
  }
  footer {
    font-size: 0.8rem;
    text-align: center;
  }  
  img, input {
    border-radius: 0.3rem;
  }
  input { 
    background-color: #C8D2B7;
    border-width: thin;
  }
  input:hover {
    background-color: #5A6941;
    color: white;
  }
/*
  img.xmas-cap {
    width: 2em; height: auto; position: relative; margin: -0.2em -1.6em -0.2em -1em;   
    }
*/  
  .wetter {
    border: 1px dotted; 
    border-radius: 0.5rem;
    background-color: transparent; 
    margin-left: 1rem;
  }

  div#clockJs, div#clockSwf {
    width: 9rem; height: 9rem; 
  }
  div#clockJs {
    margin: 0 0 0 1rem; // top right bottom left
  }
  canvas#clock {
    /*width: 19rem; height: 9.5rem; css-formatierung nur fehlerhaft einsetzbar!*/ 
    cursor: pointer;  
  }
  .neu  { background-color: #5A6941; }
  
/*
  img.bdm   { 
    width: 100%; height: auto;
    margin: 0.2rem 0.5rem; 
    border-style: none; position: relative;     
    }
  .kurz { width: 10rem; margin: 0.2rem 0.5rem; }
  .lang { width: 21rem; margin: 0.2rem 0.5rem; }
*/
  .kurz   { width: 48%; margin: 0.1rem 0.2rem; }
  .lang   { width: 98%; margin: 0.1rem 0.2rem; }
  img.bdm { width: 98%; margin: 0.1rem 0.2rem; }

  @media all and (min-width: 24em) {
    input {
      font-size: 1.1rem;  height: 1.5rem;
    }
  }
  
  @media all and (min-width: 48em) {
    body { 
      /*font-size: 1.2em;*/
      max-width: 46rem; margin: 0em auto; 
    }
    header {
      font-size: 2rem;
    }  
    main {
      flex-direction: row;
    }
    /*
    article, aside {
      flex-direction: column;
      flex: 1 30%;  
    }
    */
    article {
      flex: 1 1 0%;
    }
    article.bdm {
      flex: 2 1 0%;
    }
    img.bdm   { 
      width: 100%; height: auto;
    } 
    input {
      font-size: 1.0rem; height: 1.5rem;
    }
  }
  
  @media all and (min-width: 60em) {
    body { 
      font-size: 1.5em;
      max-width: 58rem; margin: 0em auto; 
    }
    article {
      flex: 1 1 0%;
    }
    article.bdm {
      flex: 2 1 0%;
    }

    aside {
      flex-direction: row;
    }  
    input {
      font-size: 1.1rem; height: 2rem;
    }
  }